Варианты компонента

Варианты собирают разные состояния одного элемента (default, hover, disabled) в единый компонент.

Кнопка живёт в нескольких состояниях. Варианты упаковывают их вместе, и переключение становится выбором из выпадашки.

Варианты (Variants) — способ объединить связанные компоненты в один «набор» (component set). Вместо пяти отдельных кнопок у вас один компонент с переключаемыми свойствами: состояние, размер, тип.

Создаём набор вариантов

1. Сделайте мастер-компонент кнопки.
2. Выделите его и нажмите кнопку Add variant (или ПКМ → Add variant) — появится копия в общей рамке набора.
3. Измените копию: например сделайте её состоянием hover (другой цвет).
4. Повторите для disabled, pressed и т.д.
5. Вокруг всех вариантов появится пунктирная рамка — это component set.

Свойства вариантов

В наборе вариантов на правой панели появляются variant properties. Назовите свойство State со значениями Default, Hover, Pressed, Disabled. Можно добавить второе свойство, например Size со значениями S, M, L. Теперь у инстанса в выпадашках выбираешь нужную комбинацию.

Матрица вариантов кнопки

           Size=S        Size=M        Size=L
  Default  [кн]          [ кнопка ]    [  кнопка  ]
  Hover    [кн]          [ кнопка ]    [  кнопка  ]
  Disabled [кн]          [ кнопка ]    [  кнопка  ]

  свойства: State (3) x Size (3) = 9 вариантов

Переключение инстанса

Поставьте инстанс в макет, выделите его — на панели появятся выпадашки State и Size. Меняете значение — инстанс мгновенно превращается в нужный вариант. Никакого ручного копирования.

Как Figma раскладывает варианты

Внутри component set варианты разложены на сетке, и Figma подсказывает их структуру по свойствам. Удобно располагать строки по одному свойству (например State), а столбцы — по другому (Size): получается читаемая матрица, в которой легко заметить пропущенную комбинацию. Добавить новый вариант можно кнопкой + на границе набора — Figma создаст копию ближайшего варианта, которую вы donastroite.

Если в наборе не хватает какой-то комбинации (скажем, есть Disabled только для размера M, но не для S и L), Figma не выдаст ошибку, но инстанс при выборе несуществующей пары покажет ближайший доступный вариант. Поэтому стоит держать матрицу полной — это предсказуемее.

Сколько вариантов — это много

Комбинаторика быстро растёт: три свойства по три значения дают 27 вариантов, четыре — уже за сотню. Это тяжело поддерживать. Поэтому держите вариантами только то, что действительно меняет визуальную структуру (тип кнопки, состояние, размер), а отличия вроде «есть иконка / нет иконки» или «другая подпись» выносите в boolean- и text-свойства из следующего урока. Грамотный баланс вариантов и свойств — признак зрелого компонента.

Горячие клавиши

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

• Делают состояния отдельными компонентами. Тогда теряется переключение. Объединяйте их в набор вариантов.
• Дают свойствам и значениям разнобойные имена. State с Hover в одном варианте и hovered в другом сломают логику. Держите единые имена.
• Плодят варианты вместо булевых свойств. Если отличие — лишь наличие иконки, лучше boolean-свойство (следующий урок), а не новый вариант.

Совет профи: варианты — для структуры, свойства — для деталей

Ключ к чистому компоненту — правильно разделить, что делать вариантом, а что свойством. Вариантами оформляйте то, что меняет визуальную структуру или принципиальное состояние: тип кнопки (Primary/Secondary), состояние (Default/Hover/Disabled), размер (S/M/L). А мелкие отличия — наличие иконки, текст подписи, конкретная иконка — выносите в boolean-, text- и instance swap-свойства из следующего урока. Это удерживает число вариантов в разумных пределах: вместо сотни комбинаций у вас десяток вариантов плюс несколько гибких свойств. Такой компонент легко поддерживать и приятно использовать. Грамотный баланс вариантов и свойств — один из самых заметных признаков того, что дизайнер вырос из новичка в инженера интерфейсов.

Чек-лист

• Собрал набор вариантов кнопки.
• Задал свойство State с несколькими значениями.
• Добавил второе свойство (например Size).
• Переключаю вариант инстанса выпадашкой.

Итоги. Варианты упаковывают состояния и размеры одного элемента в единый component set с переключаемыми свойствами. Это убирает дубли и упрощает работу. Но не все различия стоят отдельного варианта — для гибкости есть свойства компонентов, к которым переходим дальше.