Что в видео-уроке:
В уроке знакомимся с интсрументом Variants в Figma и разбираем его на примере кнопки. Создаём состояния Normal, Hover и Active для основных и второстепенных кнопок. Дополнительно добавляем переключаемый параметр скругления и разбираем, почему для корректной работы вариантов особенно важны структура и нейминг компонентов.
Когда нужны варианты компонентов
Variants особенно полезны в крупных проектах: многостраничных сайтах, интернет-магазинах, приложениях и дизайн-системах.
В таких интерфейсах один и тот же элемент может иметь множество состояний: кнопка бывает основной и второстепенной, обычной, активной или при наведении, поле ввода — пустым, заполненным или с ошибкой.
В небольшом лендинге полноценная дизайн-система не всегда обязательна, но Variants удобно использовать для практики и для систематизации повторяющихся интерфейсных элементов.
Создаём состояния кнопки
Разбираем Variants на простом примере кнопки.
Для начала создаём три состояния:
- Normal — обычное состояние;
- Hover — состояние при наведении;
- Active — состояние при нажатии.
Чтобы пользователь видел реакцию интерфейса, состояния должны визуально отличаться. Например, при Hover зелёная кнопка может становиться немного светлее, а при Active — темнее.
Важно сохранять контрастность текста во всех состояниях.
Добавляем разные типы кнопок
Кроме состояний, кнопка может иметь разные визуальные типы.
В уроке используем:
- Primary — основную залитую кнопку;
- Secondary — второстепенную контурную кнопку.
У Secondary сохраняются те же размеры и общая типографика, но меняется оформление. В обычном состоянии она имеет только обводку, при наведении обводка может становиться заметнее, а при нажатии кнопка может получать заливку.
Так для одного элемента появляется сразу несколько комбинаций свойств.
Превращаем состояния в компоненты
Каждый вариант должен быть отдельным мастер-компонентом.
После подготовки всех состояний выделяем компоненты и объединяем их через Combine as Variants. Figma создаёт общий набор, внутри которого находятся все варианты одного элемента.
Теперь вместо нескольких независимых кнопок мы получаем единую систему, где нужный вид можно выбирать через свойства экземпляра.
Продумываем систему нейминга
Для Variants особенно важны последовательные названия.
У кнопки можно выделить несколько уровней:
- категория — Button;
- тип — Primary или Secondary;
- состояние — Normal, Hover или Active.
Например:
Button / Primary / Normal
Button / Primary / Hover
Button / Secondary / Active
Главное — использовать одинаковый порядок свойств во всех компонентах. Если в одном варианте параметры названы или расположены иначе, Figma может неправильно объединить состояния или показать ошибку.
Переименовываем элементы пакетно
Когда компонентов становится много, удобнее использовать пакетное переименование через Ctrl + R.
Например, сначала всем кнопкам можно задать общую структуру имени, а затем отдельно заменить Primary на Secondary или Normal на Hover.
Такой способ ускоряет работу и снижает вероятность случайных различий в нейминге.
Но после переименования важно проверить всю группу: для каждого типа кнопки должны существовать соответствующие состояния.
Настраиваем свойства Variants
После объединения компонентов Figma создаёт свойства автоматически. Вместо стандартных Property 1 и Property 2 лучше сразу дать им понятные названия.
Например:
- Type — Primary или Secondary;
- Status — Normal, Hover или Active.
Порядок значений также можно изменить, чтобы в списке сначала отображалось Normal, затем Hover и Active.
Чем понятнее организованы свойства, тем проще пользоваться компонентом в дальнейшем.
Добавляем переключатель скругления
Variants позволяют управлять не только типом и состоянием кнопки.
В уроке добавляем ещё одно свойство — наличие скругления. Для каждой существующей комбинации создаём дополнительный вариант с прямыми углами.
В названия добавляется новое значение, например:
Radius=True
или
Radius=False
После объединения этих состояний Figma превращает свойство в удобный переключатель. В экземпляре компонента можно включить скругление или отключить его, не выбирая отдельную кнопку вручную.
Следим за полнотой комбинаций
Если у компонента несколько свойств, важно предусмотреть необходимые сочетания.
Например, если существует Primary с Radius=True, но отсутствует соответствующий вариант с Radius=False, при переключении Figma может показать ошибку или не найти нужное состояние.
Поэтому при появлении предупреждений в первую очередь стоит проверить нейминг и убедиться, что необходимые комбинации компонентов действительно существуют.
Не создаём лишние варианты
Технически количество состояний можно увеличивать практически бесконечно, но делать это без необходимости не стоит.
Каждое новое свойство увеличивает количество комбинаций и усложняет поддержку компонента. Поэтому добавляем только те состояния, которые реально используются в интерфейсе.
Задача Variants — упростить работу с дизайн-системой, а не превратить её в ещё более сложную структуру.
Используем одну систему вместо множества компонентов
Главное преимущество Variants заключается в том, что дизайнеру и разработчику не приходится искать отдельный компонент для каждого состояния.
Достаточно добавить один экземпляр кнопки и в правой панели выбрать:
- её тип;
- состояние;
- наличие или отсутствие дополнительных свойств.
Так интерфейсные элементы остаются системными, а все допустимые состояния находятся в одном месте.
Особенно полезен такой подход в крупных проектах, где Variants становятся частью UI Kit и полноценной дизайн-системы.
