Компоненты и варианты в Figma: как собрать библиотеку кнопок

Библиотека кнопок помогает сохранять согласованное оформление, когда один элемент используется на десятках экранов. Но набор разноцветных прямоугольников ещё не решает задачу: дизайнер должен быстро выбрать нужную роль, размер и состояние, а замена надписи не должна ломать макет.

Разберём вымышленный сервис записи на занятия. В нём нужны действия «Выбрать время», «Назад» и «Отправить заявку». На этом примере соберём небольшую библиотеку: основной компонент, экземпляры, варианты и свойства содержимого. Названия и размеры ниже — учебное соглашение, а не стандарт Figma.

Сначала определите, какие кнопки нужны

Начните с перечня задач интерфейса. Основное действие завершает или продвигает сценарий; дополнительное позволяет вернуться или выбрать другой путь. Не стоит создавать отдельный стиль для каждой подписи: «Отправить» и «Сохранить» могут использовать один тип кнопки.

Для учебного проекта возьмём Primary и Secondary, размеры Small и Large, состояния Default, Hover, Pressed и Disabled. Затем отметим, какие сочетания действительно нужны на экранах. Два типа, два размера и четыре состояния дают 16 возможных комбинаций, но число комбинаций само по себе не является целью библиотеки.

Если действие выполняет переход по текстовой ссылке, сначала решите, нужна ли ему вообще форма кнопки. Библиотека должна отражать роли элементов, а не заставлять оформлять каждую ссылку как основной призыв.

Создайте устойчивую исходную кнопку

Введите подпись «Выбрать время» и оберните текст в Auto Layout. Задайте фон и скругление самому контейнеру. Для учебной большой кнопки можно начать с горизонтальных отступов 20 px и вертикальных 12 px, затем оценить высоту и читаемость с выбранным шрифтом.

Проверьте поведение размеров по каждой оси. Кнопка по содержимому должна расширяться вместе с надписью; кнопка во всю ширину должна занимать доступное место внутри подходящего родителя. Эти задачи удобно разделить до создания вариантов. Подробная настройка есть в руководстве по Auto Layout.

Замените короткую надпись на «Выбрать подходящее время занятия». Если фон приходится растягивать вручную, сначала исправьте исходный контейнер. Размножение проблемной структуры создаст одинаковую ошибку во всей библиотеке.

Превратите элемент в компонент

Когда исходная кнопка ведёт себя предсказуемо, создайте основной компонент. В Figma Design на Windows для этого используется Ctrl + Alt + K, на macOS — Option + Command + K. После создания добавьте экземпляр на отдельный учебный экран и проверьте, что он связан с исходным элементом.

Важно различать компонент и экземпляр. Основной компонент хранит устройство повторно используемого элемента, а экземпляр показывает его в конкретном месте. В библиотеке меняют общий принцип; на экране выбирают подходящую конфигурацию и содержимое.

Дайте слоям понятные имена: Container, Label, Leading icon. Это не обязательный язык именования, но последовательность поможет ориентироваться в структуре и проверить поведение при переключении. Нежелательно оставлять одинаковые имена вроде Frame 183 для разных смысловых частей.

Объедините версии в набор вариантов

Подготовьте несколько основных компонентов с нужными различиями, выделите их и выберите Combine as variants. Figma создаст Component set. Переименуйте автоматически созданные свойства так, чтобы они объясняли выбор: Type, Size, State.

• Type: Primary или Secondary — визуальная роль действия.
• Size: Small или Large — согласованный размер.
• State: Default, Hover, Pressed или Disabled — состояние элемента.

У каждого варианта должна быть уникальная комбинация значений. Если два внешне разных варианта получили одни и те же значения, система не сможет однозначно сопоставить их выбранной конфигурации. Исправьте свойства, а не просто переименуйте видимую подпись рядом с набором.

Начните с минимального набора, необходимого вашему сценарию. Потом добавляйте новые варианты по реальной потребности. В частности, фокус клавиатуры стоит продумать отдельно: какое визуальное обозначение получает элемент, как оно связано с другими состояниями и как команда передаст это разработчику.

Отделите содержимое от визуальных вариантов

Надпись, наличие иконки и выбор иконки не обязательно превращать в десятки дополнительных вариантов. Для этого предусмотрены разные свойства компонента. Текстовое свойство позволяет менять подпись; булево — показывать или скрывать вложенный элемент; Instance swap — заменять вложенный компонент.

В нашем примере «Выбрать время» и «Отправить заявку» используют один вариант Primary / Large / Default. Различается текстовое свойство Label. Если нужна стрелка рядом с надписью, настройте соответствующее свойство, а затем проверьте расстояние между текстом и иконкой.

Разные иконки обычно удобнее хранить отдельными компонентами и подставлять через замену экземпляра. Смешивать все значки продукта в огромном наборе вариантов кнопки неудобно для поиска и сопровождения.

Проверьте библиотеку на экранах

Создайте тестовую страницу с формой записи. Добавьте большую основную кнопку в нижней части формы, маленькую дополнительную в карточке и вариант недоступного действия. Затем меняйте настройки через свойства экземпляров, не отрывая их от компонента.

1. Сравните короткую и длинную подписи. Проверьте сохранение отступов и допустимый перенос.
2. Покажите и скройте иконку. Не должно оставаться лишнего промежутка или исчезать смысл надписи.
3. Смените размер и тип. Убедитесь, что нужный текст сохраняется.
4. Проверьте кнопку в узком контейнере и на широком экране.
5. Обновите основной компонент и посмотрите, как изменились уже размещённые экземпляры.

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

Опишите поведение, а не только цвета

Вариант Hover — подготовленный вид элемента. Он не создаёт автоматически переход в прототипе и не добавляет CSS в готовый сайт. Если нужно показать интерактивность, отдельно настройте взаимодействия прототипа и проверьте переходы.

Также договоритесь, что происходит после отправки формы: показывается загрузка, блокируется ли повторное действие, как выглядит ошибка и куда возвращается фокус. В небольшой библиотеке необязательно заранее изображать все ситуации, но нельзя выдавать четыре визуальных состояния за полное описание поведения.

Рядом с набором полезно оставить короткое правило: где допустимо основное действие, когда нужен другой размер и какие изменения редактор может вносить на экземпляре. Это помогает передать библиотеку другому участнику команды.

Как понять, что библиотека готова к использованию

Попросите другого дизайнера собрать тот же экран по вашей библиотеке. Сможет ли он выбрать нужную кнопку без объяснений? Поймёт ли, где изменить подпись и как вернуть исходное состояние? Такие вопросы лучше проверяют качество системы, чем количество вариантов.

Публикация библиотеки для других файлов зависит от доступного тарифа и прав рабочего пространства. Для учебной практики можно сначала собрать и проверить компоненты внутри одного файла. Определение Variants и краткие различия разобраны в глоссарии Wybex; инструменты для работы собраны в карточке Figma.

Официальные источники: варианты компонентов и свойства компонентов. Структура учебной библиотеки и сценарий проверки составлены для этой инструкции.