Как делать варианты элементов интерфейса в Figma

Каждый раз делать разные состояния одной и той же кнопки — долго. Варианты в Figma помогут избежать этой нудной работы.

Olyasnow для Skillbox Media

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Варианты — это группы компонентов, которые объединяются в один. Благодаря этому дизайнер может в любой момент выбрать, в каком состоянии показать элемент интерфейса: кнопку — нажатой или деактивированной, чекбокс — активным или пустым.

Рассказываем, как сделать варианты для кнопок и воспользоваться ими в макете.

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

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

Подготовка компонентов

Чтобы варианты работали, сначала нужно правильно назвать компоненты для них. Для этого в Figma есть система со слешами /:

Название элемента/Значение первого свойства/Значение второго свойства/…/Значение десятого свойства

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

checkbox/large/true

Система названий поддерживает и русский язык, но имейте в виду, что, если ваш макет попадёт к зарубежным дизайнерам, они не смогут понять, что в нём написано:

чекбокс/большой/отмечен

Как сделать кнопки с системой названий в Figma

Сделайте кнопку через Auto Layout и укажите для неё контрастный фон. Подробнее о функции AutoLayout прочитайте в этом материале.
Дважды кликните на название элемента и напишите Button/Primary. Это будет стиль кнопки по умолчанию.
Сделайте копию кнопки, добавьте на неё чёрную обводку и уберите фон. При необходимости перекрасьте цвет текста в чёрный, чтобы он читался. Назовите кнопку Button/Secondary — это будет дополнительный стиль.
Сделайте из каждой кнопки самостоятельные компоненты — нажмите на каждую правой кнопкой мыши и в выпадающем меню выберите Create component. Подробнее о том, что такое компоненты, читайте в этом материале.

Теперь у вас есть два готовых компонента, которые можно превращать в варианты.

Создание вариантов

Чтобы создать варианты из ваших компонентов, выделите их и на панели настроек, в блоке Variants нажмите Combine as variants. Ваши компоненты объединятся в общую группу с вариантами — он называется комбайном.

Обратите внимание, что добавить в комбайн можно только компоненты. Если вместе с ними выделить группы, фреймы или копии компонентов, Figma не даст вам сделать из них варианты.

Как воспользоваться вариантом

Перейдите на панели слоёв во вкладку Assets и перетащите кнопку на макет.
Выделите появившуюся кнопку и на панели инструментов в блоке Button укажите значение Property 1 — Secondary.

Ваша контрастная кнопка перекрасится в серый:

Добавление новых состояний

У каждого объекта может быть сколько угодно состояний, но их важно правильно назвать, чтобы потом вы не потерялись в своём же макете. Сейчас состояния Primary и Secondary относятся к свойству Property 1 — вашему арт-директору будет непонятно, что это значит.

Чтобы переименовать Property 1, выделите весь комбайн c вариантами и на панели настроек в блоке Variants вместо Property 1 напишите Type. Теперь даже спустя десять лет кому угодно будет понятно, что в этом меню нужно выбрать тип элемента:

Как добавить новое свойство

Выделите комбайн с вариантами.
На панели настроек в блоке Variants нажмите на иконку, затем — Add new property.
В появившемся поле ввода напишите State (состояние).
Снова выделите комбайн с компонентами и нажмите на плюсик в правом нижнем углу.
На панели настроек в блоке Variants напротив слова State напишите Disable. Проверьте значение Property 1 — должно быть Primary.
Укажите непрозрачность фона вашей кнопки — 50%.

Теперь у стиля Primary появилось новое состояние — Disable. Чтобы его активировать, выберите вашу кнопку на макете и на панели настроек в блоке Button укажите значение State — Disable:

То же самое можно сделать и с дополнительным стилем кнопки, чтобы вы могли быстро показать её отключённой.

С помощью вариантов можно менять что угодно, например цвет, размер, и добавлять иконки.

Когда вариантов становится слишком много, полезно привести весь комбайн в порядок, чтобы вы могли быстро найти любое состояние. Рекомендуем располагать всё вертикально и группировать по типу кнопок:

Не забывайте, что варианты — это те же компоненты. Если вы захотите изменить цвета или форму кнопок по всему макету, это можно сделать через комбайн.

Плагин Button Buddy

Создать варианты кнопок несложно, но отрисовывать каждую по отдельности — долго и нудно. Решить проблему поможет плагин Button Buddy, который автоматически создаёт все основные состояния по указанным вами параметрам.

Как пользоваться плагином:

Скачайте плагин по ссылке.
Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Button Buddy.
В появившемся меню выберите цвет и радиус скругления кнопок, а затем нажмите на кнопку Create.

У вас на макете появится готовый комбайн с базовыми состояниями кнопки: