Задание
Соберите сложный интерфейс из переиспользуемых компонентов по выбранному референсу.
На этой странице
Задача
Соберите сложный интерфейс в Figma по выбранному референсу, используя Auto Layout, вложенные компоненты, Variants и Component Properties.
Основная цель – научиться создавать полноценные интерфейсы из переиспользуемых компонентов, правильно организовывать их структуру и управлять различными состояниями.
Примеры интерфейсов
Для задания выберите один интерфейс. Можно взять готовый референс ниже или найти собственный.
Предложенные темы и референсы – только примеры. Вы можете самостоятельно выбрать похожую тему, сопоставимую по сложности и разнообразию интерфейсных элементов.
Попробуйте найти собственные удачные референсы: ищите интерфейсы, которые Вам интересно разобрать и собрать в Figma. Используйте найденные варианты или возьмите один из предложенных ниже.
Референс можно изменить под свою идею: если Вы видите, как улучшить композицию, структуру или отдельные элементы, внесите эти изменения в макет. Будьте готовы объяснить свои решения.
Работайте с основным интерфейсом выбранного референса. Другие страницы приложения, дополнительные экраны и функциональное прототипирование не требуются.
Если в публикации показано несколько экранов, выберите один основной экран desktop-версии. Рамки устройств и фон презентации повторять не нужно.
1. Интернет-магазин: страница товара или корзина
Страница товара с выбором параметров покупки или корзина с товарами, количеством, стоимостью и оформлением заказа. Для этого варианта достаточно одного экрана: страницы товара или корзины.
Основные элементы страницы товара: изображения, описание и цена, выбор цвета или размера, счётчик количества и кнопки покупки.
Основные элементы корзины: карточки товаров, счётчики количества, кнопки действий, промокод и итоговый блок заказа.
2. Страница онлайн-курса
Интерфейс просмотра учебных материалов на образовательной платформе.
Основные элементы: видеоплеер, список уроков, учебные модули, прогресс обучения, навигация и дополнительные материалы.
3. Файловый менеджер
Интерфейс облачного хранилища для просмотра и управления файлами.
Основные элементы: карточки файлов и папок, боковая навигация, панель действий, поиск, индикаторы и состояния элементов.
4. Kanban
Интерфейс управления задачами с распределением карточек по колонкам.
Основные элементы: колонки задач, повторяющиеся карточки, статусы, приоритеты, исполнители и элементы управления.
5. Многошаговая форма
Интерфейс регистрации или оформления заявки, состоящий из последовательных этапов.
Основные элементы: индикатор этапов (Stepper), поля ввода, элементы выбора, кнопки навигации и состояния заполнения.
Требования
Объём и степень проработки
Точное совпадение с референсом по пикселям не требуется. Важнее внимательно проработать отдельные части интерфейса и правильно собрать их в Figma.
Если референс сложный, выберите один или несколько связанных блоков и доведите их до законченного состояния: аккуратный внешний вид, понятная структура компонентов, корректный Auto Layout и продуманные состояния.
Остальную часть интерфейса можно оставить в черновом виде: обозначить основные блоки и их расположение без детальной проработки. Укажите в проекте Figma, какие части готовы к проверке.
Требования к компонентам, Auto Layout и состояниям ниже относятся прежде всего к проработанной части макета.
1. Компоненты
- Повторяющиеся элементы должны быть реализованы через Components и Instances, а не независимые копии.
- Сложные интерфейсные блоки должны состоять из вложенных компонентов.
- Используйте Variants для различных состояний компонентов.
- Используйте Component Properties для настройки содержимого и поведения экземпляров.
- Соблюдайте логичную и понятную структуру компонентов и слоёв.
Допускается использование ранее созданных компонентов из Figma-02.
2. Auto Layout
- Применяйте Auto Layout для организации интерфейсных блоков и компонентов.
- Корректно настраивайте отступы (Padding), расстояния между элементами (Gap) и выравнивание.
- Используйте подходящие режимы изменения размеров: Hug contents, Fill container и Fixed.
- Интерфейсные блоки должны сохранять корректную структуру при изменении содержимого.
3. Варианты и состояния
Покажите не менее двух различных состояний интерфейсных компонентов.
Например: выбранный и обычный элемент, активная и неактивная кнопка, заполненное и пустое состояние, открытый и закрытый элемент.
Для демонстрации состояний не требуется дублировать весь интерфейс. Достаточно представить соответствующие варианты компонентов отдельно.
4. Общие требования
- Создайте desktop-версию интерфейса.
- Продумайте пропорции и визуальную структуру интерфейса. Ориентируйтесь на выбранный референс; осознанные изменения и улучшения допускаются и приветствуются.
- Работайте в масштабе 1:1 (
Ctrl + 0). - Используйте согласованные стили типографики, цветов и отступов.
- Части интерфейса, которые Вы не успеваете или пока не можете подробно собрать, допускается оставить в черновом виде по правилам выше.
Результат
В проекте Figma должны присутствовать:
- Макет выбранного экрана с законченной проработкой основных частей. Остальные части могут быть черновыми.
- Набор компонентов, использованных в проработанной части макета.
- Варианты состояний ключевых компонентов этой части.
При проверке основное внимание уделяется качеству проработанных частей: их внешнему виду, правильности применения Auto Layout, декомпозиции интерфейса и организации переиспользуемых компонентов.