Варианты компонентов в Figma — что это и как их использовать

Чем вариант отличается от компонента и экземпляра

Компонент задаёт повторно используемый элемент. Экземпляр — его использование в конкретном макете. Вариант — одна из версий компонента внутри набора: например, большая основная кнопка в обычном состоянии. Набор объединяет такие версии под общим именем Button.

Представьте форму записи на занятие. На первом экране нужна основная кнопка «Выбрать время», в модальном окне — второстепенная «Назад». Если это две роли одной кнопки, их удобно оформить вариантами. А поле ввода и кнопку лучше оставить разными компонентами: у них разные задачи и устройство.

Пример: свойства кнопки

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

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

У экземпляра кнопки «Записаться» дизайнер выбирает Type = Primary, Size = Large, State = Default. Для недоступного действия меняет State на Disabled, не подбирая вручную цвет, обводку и прозрачность.

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

Как создать набор вариантов

1. Подготовьте исходный компонент и проверьте его слои. Дайте тексту, иконке и контейнеру понятные имена.
2. Создайте необходимые версии: например, обычную, с наведением и недоступную.
3. Выделите основные компоненты и объедините их командой Combine as variants.
4. Назовите свойства и значения так, чтобы другой дизайнер мог выбрать нужную версию без просмотра всего набора.
5. Разместите экземпляр в макете, переключите значения и проверьте текст, иконку и размеры.

Полезная проверка — заменить «Далее» на «Выбрать подходящее время». Сохраняются ли отступы? Не исчезает ли иконка при переключении? Видно ли, какая версия выбрана? Такой тест выявляет проблемы структуры раньше, чем компонент попадёт в десятки экранов.

Когда нужны другие свойства компонента

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

Например, кнопкам «Отправить» и «Сохранить» не нужны отдельные варианты только из-за слов. Это один тип кнопки с разным текстом. А основная залитая и второстепенная контурная кнопки могут быть вариантами одного набора.

Как Variants связаны с Auto Layout

Variants отвечают за выбор версии, а Auto Layout — за расположение и изменение размеров содержимого. Эти механизмы дополняют друг друга: вариант задаёт вид кнопки, Auto Layout помогает ей подстроиться под надпись и сохранить внутренние отступы.

Начать настройку размеров можно по руководству Wybex по Auto Layout. Затем стоит проверить каждую нужную версию кнопки с короткой и длинной подписью, с иконкой и без неё.

Частые ошибки

• Непонятные имена. Variant 1 и Variant 2 не объясняют, когда выбирать компонент. Лучше назвать осмысленное свойство и его значение.
• Разная структура слоёв. Несогласованные имена и вложенность усложняют сохранение переопределений при переключении. Проверяйте реальный экземпляр.
• Слишком большой набор. Независимые задачи и несвязанные элементы удобнее разделять, чем прятать в одном огромном Component set.
• Состояния только на картинке. Вариант Hover сам по себе не настраивает переход в прототипе и не создаёт поведение в коде. Взаимодействия и реализацию нужно описать отдельно.

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

Источник и дальнейшее изучение

Терминология и возможности проверены по документации Figma: Create and use variants и Explore component properties. Пример библиотеки кнопок составлен для этого материала.