Варианты компонентов в Figma: как не превратить дизайн-систему в матрицу
Идея вариантов простая: собрать похожие компоненты в один контейнер. Проблемы начинаются, когда свойств становится пять, у каждого по четыре значения — и библиотека превращается в матрицу на сотни элементов, в которой никто не находит нужное.
Разберём механику по документации Figma.
Компонент, набор и вариант
Три уровня, которые важно не путать:
- Component — отдельный переиспользуемый элемент.
- Component set — контейнер, в который складываются похожие компоненты.
- Variant — один компонент внутри набора.
Документация формулирует так: варианты позволяют группировать похожие компоненты в один контейнер, что упрощает библиотеку. Все варианты внутри набора используют одни и те же свойства, но каждый вариант — уникальная комбинация значений.
Свойства и значения
Variant property — это свойство, определённое на уровне набора. Например: Size, State, Type.
Values — конкретные значения: Small, Large, Default, Hover.
Ключевое ограничение из документации: каждый вариант в наборе должен быть уникальной комбинацией значений. Два одинаковых варианта в одном наборе не имеют смысла и создают путаницу.
Правило косой черты
Механика, на которой спотыкаются все. Имя компонента разбивается на свойства по символу /.
Пример из документации: компонент с именем
Button/Primary/Large/Default/False
превращается в:
- имя набора: Button;
- вариант: Primary;
- свойство 2: Large;
- свойство 3: Default;
- свойство 4: False.
Отсюда предупреждение в документации: у всех компонентов, которые вы объединяете, должно быть одинаковое количество слэшей. Иначе Figma не сможет сопоставить значения с одним и тем же свойством.
Практика: не используйте косую черту внутри значений без необходимости.
Как создать вариант
Базовый путь:
- Выделите компонент.
- Create component или сочетание:
- macOS:
⌥ Option + ⌘ Command + K; - Windows:
Ctrl + Alt + K.
- macOS:
- В правой панели нажмите Add variant или правый клик по компоненту → Main component → Add variant.
Второй путь: нажмите «+» рядом с Add property и выберите Variant из списка. Это создаст variant property и превратит основной компонент в набор.
Третий путь, самый частый: выделить несколько готовых компонентов и объединить их как варианты.
Как добавить вариант в существующий набор
Документация перечисляет:
- выделить набор и нажать «+» в правой панели;
- нажать «+» под набором;
- дублировать существующий вариант (
⌘ Command + D/Ctrl + D); - перетащить другой компонент прямо в набор.
Последний способ удобен при миграции старой библиотеки: компоненты не нужно пересобирать.
Как переключать вариант у инстанса
- Выделите инстанс.
- В правой панели под именем компонента появятся поля свойств.
- Выберите нужное значение из выпадающего списка.
Если у компонента нет вариантов, полей не будет.
Вариант против остальных свойств
Здесь главная ошибка дизайн-систем. В Figma пять типов свойств:
- Variant — организует варианты в наборах;
- Boolean — включает и выключает видимость слоя;
- Instance swap — заменяет вложенный инстанс;
- Text — меняет текст;
- Slot — оставляет свободную область для произвольного контента.
Правило, которое стоит запомнить: вариант — для того, что меняет структуру или внешний вид целиком; boolean и text — для мелочей.
Пример: кнопка с иконкой и без. Если сделать это вариантом, получится два варианта на каждое состояние и размер. Если boolean-свойством — одна кнопка с переключателем иконки.
Пересчёт простой: 3 состояния × 3 размера × 2 варианта иконки = 18 элементов. С boolean — 9.
Рекомендация самой Figma
В документации по основам компонентов есть прямая рекомендация: использовать отдельные свойства для конкретных именованных различий, а не одно свойство, управляющее сразу несколькими изменениями.
Плохо: одно свойство Style со значениями Primary Large, Secondary Small.
Хорошо: Type (Primary, Secondary) и Size (Small, Large) отдельно. Пользователь сможет собрать любую комбинацию, а список останется читаемым.
Сколько вариантов терпимо
Жёсткого лимита нет, но есть практический предел восприятия: набор из 40+ вариантов в панели ассетов уже неудобно просматривать.
Ориентиры:
- до 12 вариантов — нормально;
- 12–24 — нужна строгая сетка и понятные имена;
- больше 24 — почти всегда есть свойство, которое стоило сделать boolean или instance swap.
Порядок свойств
Документация не задаёт порядок, но практика однозначна: первым ставьте свойство, которое сильнее всего меняет структуру (обычно Size), затем менее значимые.
Это влияет только на читаемость панели, но именно она определяет, сколько времени дизайнер тратит на поиск.
Варианты и переменные: что выбрать
В Figma есть ещё один механизм — переменные (variables). Их часто путают с вариантами.
Разница в уровне:
- Вариант — отдельный компонент в наборе. Он существует в файле как объект.
- Переменная — сохранённое значение (цвет, отступ), которое подставляется в свойства.
Практическое следствие: если различие сводится к цвету или размеру отступа, вариант создавать не нужно — достаточно переменной или стиля. Набор из 40 кнопок, отличающихся только заливкой, — типичный пример лишней работы.
Обратная ситуация: если меняется структура (иконка появляется слева, текст исчезает, компонент становится двухстрочным), вариант уместен.
Грубый тест: «поместится ли различие в одно свойство?» Если да — переменная или boolean. Если нет — вариант.
Частые ошибки
Разное число слэшей в именах. Figma не сопоставит значения.
Всё через варианты. Библиотека растёт в геометрической прогрессии.
Пустые варианты-дубли. Одинаковые комбинации значений.
Имена вроде st, tp, v2. Через месяц никто не помнит расшифровку.
Варианты вместо instance swap для иконок. Ведёт к десяткам лишних элементов.
FAQ
Что такое component set в Figma?
Контейнер, который хранит варианты одного компонента.
Чем variant property отличается от boolean?
Variant переключает целый вариант из набора, boolean включает и выключает отдельный слой внутри компонента.
Почему Figma не объединяет компоненты в набор?
Скорее всего, в именах разное количество слэшей — значения не сопоставляются.
Можно ли добавить компонент в существующий набор?
Да, перетащив его внутрь набора.
Сколько вариантов допустимо в одном наборе?
Формального лимита нет, но после 24 элементов панель становится неудобной — проверьте, не пора ли часть вынести в boolean.