Варианты компонентов (Variants) в Figma

9 сообщений 1 лайк 116 просмотров
Коллеги, как вы используете Variants в реальных проектах? На простых кнопках всё понятно: размер, состояние, иконка. Но когда в одном компоненте появляются тип, тема, плотность, ширина и десяток состояний, панель свойств быстро превращается в квест. Где для вас заканчивается удобная система и начинается перегруженный монстр?

Интересно обсудить структуру вариантов: какие свойства лучше выносить отдельно, когда использовать Boolean и Instance swap, а когда создать несколько самостоятельных компонентов. Особенно спорный момент — состояния вроде loading, disabled и error: держать их внутри одного набора или разделять, чтобы не раздувать количество комбинаций?

Поделитесь практикой: как называете свойства, проверяете ли комбинации перед передачей в разработку и что делаете с устаревшими вариантами. Полезны примеры не только удачных решений, но и случаев, когда Variants пришлось разобрать из-за путаницы, медленной работы файла или слишком сложной поддержки.
1
Анастасия К.
Сообщений
355
С нами
26.10.2026
Реакции
1

Комментарии 8

Обсуждение темы — по порядку

Я стараюсь разделять свойства на независимые группы: State, Size, Type и Icon. Но если комбинаций становится слишком много, это уже сигнал пересмотреть сам компонент, а не добавлять ещё один вариант.
0
Руслан
Сообщений
359
С нами
26.10.2026
У нас хорошо сработал принцип: в Variants оставляем только то, что реально меняет внешний вид или поведение. Тексты, ссылки и контент — через обычные свойства экземпляра.
0
Дмитрий
Сообщений
395
С нами
18.10.2026
А как вы поступаете с hover и focus? Сначала держали их вариантами, но потом часть состояний перенесли в интерактивные прототипы, иначе наборы стали слишком громоздкими.
0
Толик
Сообщений
351
С нами
26.10.2026
Boolean удобен для показа иконки, но с ним легко получить странные комбинации. Например, для некоторых типов кнопок иконка слева допустима, а справа уже нет — такие ограничения Figma сама не подсказывает.
0
Юлиан
Сообщений
370
С нами
26.10.2026
Мы называем свойства коротко и одинаково во всех компонентах: Size, State, Style. Благодаря этому разработчикам проще читать спецификацию, даже если сам файл открывают нечасто.
0
Света
Сообщений
352
С нами
26.10.2026
Не люблю делать отдельные компоненты для loading и disabled: визуально это всё ещё та же кнопка. Лучше держать состояния вместе, но заранее договориться, какие сочетания команда не использует.
0
Марина
Сообщений
376
С нами
26.10.2026
Есть проблема с наследованием: после обновления главного компонента часть старых экземпляров начинает вести себя непредсказуемо. Поэтому перед крупными изменениями делаем копию страницы и проверяем несколько типовых экранов.
0
alexsandr Администратор
Сообщений
416
С нами
26.10.2026
Для сложных карточек Variants у нас не прижились. Оставили вариантами только размер и состояние, а медиа, бейджи и дополнительные действия вынесли в слоты через вложенные компоненты — файл стал заметно понятнее.
0
Олеся
Сообщений
374
С нами
26.10.2026

Ответить в теме

Чтобы ответить, войдите или зарегистрируйтесь — это займёт меньше минуты.