Компоненты и дизайн-система

Компоненты

На экранах «Зерна» десятки одинаковых кнопок, строк меню и полей. Если каждую рисовать отдельно, однажды захочется поменять скругление углов — и придётся править сорок кнопок вручную, обязательно пропустив пару.

Компонент в Figma — образец элемента (Ctrl+Alt+K или Cmd+Option+K). Его копии — экземпляры — связаны с ним: поменяли главный компонент — поменялись все экземпляры во всех макетах. В экземпляре можно менять текст и иконку, не разрывая связь.

Компоненты собирают из маленьких в большие: иконка и текст → кнопка → строка меню → карточка заказа.

Варианты и состояния

Одна кнопка бывает разной:

• стиль: главная (залитая акцентом), второстепенная (с рамкой), текстовая;
• размер: большая, средняя, маленькая;
• состояние: обычное, нажатое, неактивное, в фокусе для навигации с клавиатуры, загрузка.

В Figma всё это собирают в один компонент с вариантами (Variants): в правой панели переключаете «Стиль: главная, Состояние: неактивная» — и кнопка меняет вид.

Состояния есть не только у кнопок. Для поля ввода: пустое, в фокусе, заполненное, с ошибкой и подсказкой, неактивное. Для экрана целиком: загрузка, пусто («Здесь появятся ваши заказы»), ошибка («Нет соединения»), данные. Если какое-то состояние не нарисовано, его придумает разработчик — и, скорее всего, не так, как хотелось бы.

Адаптивность

Одним продуктом пользуются на телефоне, планшете и компьютере. Дизайнер продумывает, как макет перестраивается на разной ширине. Опорные ширины называют брейкпоинтами, например:

• 360–430 — телефоны;
• 768 — планшеты;
• 1280–1440 — ноутбуки и компьютеры.

На телефоне меню — список в одну колонку и нижняя навигация, на компьютере — сетка карточек в три колонки и меню сверху. Auto Layout и ограничения (Constraints) в Figma помогают проверить, как элементы растягиваются.

Для мобильных приложений есть ещё правило размера касания: нажимаемая область — не меньше 44–48 точек, иначе по кнопке трудно попасть пальцем.

Дизайн-система

Когда в продукте сотни экранов и несколько дизайнеров, нужны общие правила — дизайн-система:

• основы: цвета, шрифты, отступы, сетка, иконки, скругления, тени;
• компоненты: кнопки, поля, карточки, списки, вкладки, диалоги — со всеми вариантами и состояниями;
• правила использования: когда какую кнопку ставить, как писать тексты ошибок.

Дизайнеры собирают экраны из компонентов в Figma, а разработчики — из тех же компонентов в коде. Продукт выглядит единообразно, а новые экраны делаются быстрее.

Учиться удобно на открытых системах: Material Design 3 от Google и Human Interface Guidelines от Apple. Свои дизайн-системы есть у многих крупных компаний, в том числе российских.