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

Variants в Figma решают эту проблему кардинально. Вместо десятка кнопок вы создаёте один компонентный набор, внутри которого через выпадающие списки выбираете нужный размер, цветовую тему или состояние. Это не только убирает визуальный шум из панели Assets, но и делает библиотеку по-настоящему гибкой: изменения вносятся в одном месте и применяются ко всем вариантам сразу. Такой подход упрощает организацию компонентов в Figma и делает работу с дизайн-системой эффективнее.

Что такое Variants в Figma и зачем они нужны?

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

Например, у нас есть компонент «Button». Его варианты могут отличаться:

• Состоянием: Default / Hover / Disabled;
• Размером: Small / Medium / Large;
• Типом: Primary / Secondary / Ghost.

Это 27 возможных комбинаций. Без вариантов вам пришлось бы создать 27 отдельных компонентов и мучиться с их выбором. С вариантами — это один компонент с тремя переключателями.



Рисунок 1. Пример компонента кнопки, который обладает 27 вариациями.

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

Когда использовать Variants, а когда не стоит

Самая частая ошибка при работе с Variants — использовать их просто потому, что у вас есть несколько похожих компонентов. Однако, сам факт визуального сходства ещё не означает, что компоненты нужно объединять. Variants хорошо работают там, где один и тот же компонент в проекте используется с разными состояниями, параметрами, режимами поведения.



Рисунок 2. Когда Variants действительно нужны.

Совет: не стоит превращать один Component Set в контейнер для всего проекта. Огромный компонент на 30–50 вариантов формально может работать, но пользоваться им будет неудобно.

Главный критерий хороших Variants: они должны объяснять компонент, а не скрывать за собой сложность.

Пошаговое создание Variant на примере кнопки (5 шагов)

Разберём создание компонента на практике по шагам.

Шаг 1. Создаём базовые компоненты

Сделайте 3 отдельные кнопки: Primary, Secondary, Outline. Каждая должна быть построена на Auto Layout, с привязкой к цветовым и текстовым стилям. Дайте им понятные имена, например: Button/Primary, Button/Secondary, Button/Outline.

Шаг 2. Объединяем в набор

Выделите все 3 компонента, кликните правой кнопкой и выберите «Combine as Variants». Figma поместит их в общую рамку с фиолетовой пунктирной границей – это и есть ваш компонентный набор.

Шаг 3. Настраиваем свойства

В правой панели, в разделе Variants, вы увидите Property 1. Переименуйте его в Type, а значения – в Primary, Secondary, Outline. Нажмите «Add property» и создайте второе свойство – Size со значениями S, M, L. Добавьте третье свойство – State со значениями Default, Hover, Disabled.

Шаг 4. Заполняем варианты

Теперь для каждой комбинации свойств настройте внешний вид кнопки. Например:Type=Primary, State=Default → синий фон, белый текст.Type=Primary, State=Hover → тёмно-синий фон.Type=Outline, State=Disabled → прозрачный фон, серая обводка.Выбирайте каждую ячейку в сетке и меняйте стили вручную.

Шаг 5. Проверяем работу

Вставьте экземпляр набора в макет. В панели свойств появятся выпадающие списки Type, Size, State. Переключайте их – компонент должен мгновенно менять внешний вид. Готово!



Рисунок 3. Параметры реализованных вариантов в компоненте.

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

Как правильно называть свойства

Наименование — одна из самых недооценённых частей Variant-системы. Хорошая структура должна быть понятна без открытия исходного компонента.



Рисунок 4. Наименование свойств в Variants.

Главные правила:

• Называйте свойства на языке команды (лучше на английском, чтобы разработчики могли быстрее идентифицировать исходный код).
• Значения пишите с маленькой буквы, без пробелов (small, medium, primary).
• Не создавайте больше 4–5 свойств, иначе их сложно использовать.

Как расширять Variants, не создавая хаос

Со временем у вас появятся новые требования: например, понадобится еще размер XL или состояние Selected. Добавить их проще, чем кажется.

Чтобы добавить новое значение в существующее свойство:

→ Откройте компонентный набор.
→ В панели Variants нажмите на значок «+» рядом со свойством (например, у Size).
→ Введите новое значение, например, XL.

Чтобы добавить новое свойство:

→ Нажмите «Add property», задайте имя (например, Corner) и значения (sharp, round).
→ Теперь у вас появится новая сетка – для каждой комбинации придётся настроить внешний вид.

Чтобы добавить новый вариант в существующую сетку:

→ Просто скопируйте любой существующий вариант внутри набора и переименуйте его вручную в формате Property=Value. Например, скопируйте Type=Primary, Size=M, State=Default и переименуйте в Type=Primary, Size=XL, State=Default. Figma автоматически добавит новую строку или столбец.

Важно: если вы добавляете новое свойство, количество вариантов умножается (например, было 3×3=9, станет 3×3×2=18). Не перегружайте набор – если вариантов становится больше 20–30, возможно, стоит разбить их на несколько наборов.

Использование Variants на практике

В макете:
Вы перетаскиваете один компонент и настраиваете его через панель справа. Больше не нужно искать Button/Hover/Primary в списке – просто переключили состояние – и готово. Это ускоряет создание прототипов и мокапов в разы.

В библиотеке:
Вместо 30 компонентов кнопок у вас хранится один набор. Это делает библиотеку лёгкой для навигации. Изменения вносятся в одном месте, например, меняете радиус скругления у родительского набора, и все варианты обновляются автоматически.

Для разработчика:
Свойства Variants легко соотносятся с элементами кода. Разработчик видит, что компонент принимает свойства type: 'primary' | 'secondary', size: 's' | 'm' | 'l', state: 'default' | 'hover' и т.д. Это снижает риск ошибок при передаче данных из дизайна в разработку. В Figma можно даже экспортировать токены с именами свойств.

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

Заключение и бонус: чек-лист для создания идеального Variant

Variants — это не функция Figma, которую нужно использовать везде, где есть несколько компонентов. Это инструмент систематизации.

Хороший Component Set отвечает на простой вопрос: «Какие параметры этого компонента могут изменяться, не превращая его в другой компонент?» Если ответ очевиден — используйте Variants.

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

Чек-лист перед публикацией Variant:

• Все варианты действительно являются одним типом компонента?
• Свойства названы по смыслу, а не по цвету или внешнему виду?
• Значения свойств используют единую терминологию?
• У каждого варианта есть понятное назначение?
• Нет лишних комбинаций, которыми никто не пользуется?
• Переключать варианты внутри экземпляра удобно через выпадающий список?
• Размеры и состояния работают предсказуемо?
• Компонент понятен дизайнеру, который его не создавал?
• Названия можно без труда сопоставить с терминологией разработки?

Теперь вы готовы создавать чистые, масштабируемые и удобные для всей команды компоненты. А правильная работа с Variants в Figma поможет поддерживать дизайн-систему в порядке. Удачи в организации своего Figma-пространства!

Автор статьи: Дарья Панкратова, выпускница 35 потока курса «UX/UI-дизайнер»