Создание сложных компонентов с Variants: Состояния, размеры, типы

На прошлых шагах вы освоили мастер-компоненты, научились организовывать их в библиотеки и давать им правильные имена. Теперь углубимся в мощный инструмент Figma — Variants (Варианты). Он поможет создавать гибкие и легко управляемые компоненты.

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

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

Вместо того чтобы делать отдельные компоненты для каждой кнопки (например, «активная», «неактивная», «нажатая»), вы создаёте один компонент «Кнопка» и управляете её состояниями через Variants.

Это значительно упрощает работу:

• Организация: Меньше компонентов в библиотеке, легче найти нужное.
• Управление: Изменения в мастер-компоненте применяются ко всем его вариантам.
• Использование: Дизайнерам проще выбирать нужные состояния, не перебирая десятки отдельных компонентов.
• Масштабирование: Добавлять новые состояния или типы компонента быстрее и логичнее.

Представьте, что у вас есть кнопка. Она может быть:

• По состоянию: Default, Hover, Pressed, Disabled
• По размеру: Small, Medium, Large
• По типу: Primary, Secondary, Outline

Без Variants вам пришлось бы создавать 4 × 3 × 3 = 36 отдельных компонентов кнопок! С Variants вы создадите один компонент Button с тремя свойствами (State, Size, Type), каждое из которых будет иметь свои значения.

Создаём компоненты с Variants

Давайте создадим компонент кнопки с разными состояниями и размерами.

Шаг 1: Базовый компонент

1. Нарисуйте прямоугольник, добавьте текст «Кнопка».
2. Примените Auto Layout к фрейму с текстом (Shift + A).
3. Настройте отступы, радиус скругления, цвет заливки и текста.
4. Превратите этот фрейм в компонент (Ctrl + Alt + K или правая кнопка мыши > Create component). Назовите его Button.

Шаг 2: Добавляем первый Variant

1. Выберите ваш мастер-компонент Button.
2. На панели свойств справа найдите раздел «Variants». Нажмите кнопку «Add variant» (или значок + рядом с Variants на панели инструментов).
3. Figma создаст копию компонента рядом с оригиналом, объединив их в набор вариантов (Variant Set).
4. По умолчанию свойство называется Property 1, а его значение Default.

Шаг 3: Настраиваем свойства и значения

1. Выберите Variant Set (рамку, объединяющую все варианты). На панели свойств вы увидите Property 1. Переименуйте его в State.
2. Выберите первый вариант (оригинальный). На панели свойств для State установите значение Default.
3. Выберите второй вариант (копию). Для State установите значение Hover.
4. Измените внешний вид варианта Hover (например, сделайте фон чуть темнее).

Шаг 4: Добавляем больше состояний

1. Выберите Variant Set. Нажмите + рядом со свойством State на панели свойств.
2. Figma добавит новый вариант. Переименуйте его в Pressed и измените внешний вид.
3. Повторите для Disabled. Для Disabled можно изменить цвет фона, текста и сделать его менее контрастным.

Теперь у вас есть один компонент Button с четырьмя состояниями, управляемыми свойством State.

Добавляем несколько свойств (размеры, типы)

Давайте добавим свойство Size.

Шаг 1: Новое свойство

1. Выберите Variant Set.
2. На панели свойств нажмите + рядом с Properties и выберите New property.
3. Назовите свойство Size.
4. Теперь каждый из ваших существующих вариантов будет иметь два свойства: State и Size. По умолчанию Size будет иметь значение Default.

Шаг 2: Варианты для размеров

1. Выберите все ваши Default, Hover, Pressed, Disabled варианты.
2. Скопируйте их (Ctrl + D или Alt + перетаскивание) и разместите рядом.
3. Для скопированных вариантов измените значение Size на Small.
4. Измените размеры этих вариантов (например, уменьшите высоту и горизонтальные отступы в Auto Layout).
5. Повторите этот процесс для Large размера, увеличив его.

В итоге у вас будет матрица вариантов: State (Default, Hover, Pressed, Disabled) × Size (Small, Default, Large).

При создании Variants, особенно с несколькими свойствами, старайтесь поддерживать логичную структуру. Используйте Auto Layout внутри каждого варианта для гибкости, а также для выравнивания самих вариантов в Variant Set.

Применяем Variants на практике

Теперь, когда у вас есть компонент Button с Variants, попробуйте использовать его:

1. Перейдите на другую страницу или фрейм.
2. Откройте панель Assets (Shift + I).
3. Найдите ваш компонент Button и перетащите его на холст.
4. Выберите экземпляр кнопки. На панели свойств справа вы увидите выпадающие списки для State и Size.
5. Попробуйте менять значения — вы увидите, как кнопка мгновенно меняет свой внешний вид, оставаясь при этом одним и тем же компонентом.

Это значительно ускоряет работу, позволяет быстро тестировать различные состояния и обеспечивает консистентность в дизайне.

Итог

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