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

Компоненты, экземпляры и варианты

• Главный компонент (main component) — исходный элемент. Его меняют, и изменения расходятся по всем копиям.
• Экземпляр (instance) — копия компонента в макете. В нем можно менять текст, цвета и другие разрешенные вещи (это называется overrides), но структура остается связанной с главным.
• Набор вариантов (component set) — группа связанных компонентов, например все кнопки: основная и второстепенная, разных размеров и состояний.
• Свойства компонента (component properties) — настройки, которые видны в правой панели у экземпляра: переключить вариант, изменить текст, скрыть иконку, подменить иконку.

Без компонентов каждую кнопку правят вручную, и через месяц в макете оказывается десять немного разных кнопок.

Шаг 1: главный компонент кнопки

1. Соберите кнопку на Auto Layout: текст, иконка, padding, Hug по ширине.
2. Выделите фрейм и нажмите Ctrl + Alt + K (на Mac — Cmd + Option + K) или кнопку «Create component» на верхней панели.
3. Назовите компонент Button.
4. Чтобы создать экземпляр, перетащите компонент из панели Assets или скопируйте его с зажатым Alt.

Держите главные компоненты на отдельной странице, например «Components», а в макетах используйте только экземпляры.

Шаг 2: варианты

1. Выделите компонент Button и нажмите Add variant в правой панели. Появится набор с фиолетовой пунктирной рамкой.
2. Добавьте свойства варианта и назовите их по смыслу:

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

Не обязательно создавать все комбинации. Если ghost-кнопки бывают только размера M, не делайте лишнего.

Шаг 3: свойства компонента

Варианты описывают внешний вид, а свойства — содержимое. Это сильно уменьшает число вариантов.

• Text — привяжите текстовый слой к свойству Label. Текст кнопки меняется прямо в правой панели.
• Boolean — свойство Has icon показывает или скрывает иконку. Без него пришлось бы удваивать все варианты.
• Instance swap — свойство Icon позволяет выбрать любую иконку из библиотеки, не залезая внутрь кнопки.

Свойства создаются через «+» в разделе Properties у главного компонента или набора и привязываются к слою кнопкой рядом с нужным параметром.

Шаг 4: поле ввода

Тот же подход для Input:

• Варианты: State = Default, Focus, Error, Disabled; при необходимости Size.
• Text-свойства: Label, Placeholder, Helper text.
• Boolean: Has helper, Has left icon.
• Instance swap: Left icon.

Состояние Error меняет не только цвет обводки, но и показывает текст ошибки с иконкой, чтобы смысл не передавался одним цветом. Состояние Focus должно быть хорошо заметным.

Правила именования

• Свойства и значения — короткие и понятные разработчику: Type, Size, State, а не «Вариант 1».
• Одинаковые свойства называются одинаково во всех компонентах: если у кнопки State=Disabled, то и у поля State=Disabled.
• Для группировки в Assets используйте слэш: Form/Input, Form/Checkbox, Navigation/Tab.
• Слои внутри компонента тоже называйте: Label, Icon, Container. Это помогает при override и передаче в разработку.
• Согласуйте названия с кодом. Если в коде вариант называется primary, не называйте его в Figma «Main».

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

• Detach instance при любой правке. Отвязанный экземпляр больше не обновляется. Если не хватает настройки — добавьте свойство в главный компонент.
• Варианты вместо свойств. Отдельные варианты «с иконкой» и «без иконки» для каждого размера и типа раздувают набор. Используйте Boolean.
• Правка экземпляра вместо главного компонента, когда меняется сам дизайн системы.
• Компоненты без Auto Layout — при смене текста они ломаются.