Переменные и режимы в Figma для тем и брендов
Продвинутое3 минРедакция Innovialabs
Коротко
Переменные в Figma хранят значения цвета, чисел, строк и логических флагов, а режимы дают каждой переменной несколько значений. Разведите примитивы, бренды и темы по отдельным коллекциям, привяжите компоненты только к семантическим переменным — и смена темы или бренда будет делаться одним переключением режима.
Короткий ответ
Переменная в Figma — это именованное значение, которое можно привязать к свойству слоя. Переменные объединяются в коллекции, а у коллекции могут быть режимы (modes): одна и та же переменная bg/surface хранит белый цвет в режиме Light и почти чёрный в режиме Dark. Переключаете режим у фрейма — и все вложенные элементы перекрашиваются.
Типы переменных:
| Тип | Что хранит | К чему привязывается |
|---|---|---|
| Color | цвет | заливка, обводка, цвет текста, эффекты |
| Number | число | ширина, высота, отступы, gap, радиус, толщина обводки, размер шрифта |
| String | текст | содержимое текстового слоя, начертание и семейство шрифта |
| Boolean | true/false | видимость слоя, булевы свойства вариантов |
Структура коллекций
Самая частая ошибка — сложить всё в одну коллекцию. Устойчивая схема для тем и мультибренда — три уровня:
- Primitives — палитра без режимов:
violet/600,gray/50,space/4. Эти переменные скрывают от публикации, чтобы дизайнеры не брали их напрямую. - Brand — режимы по брендам (Brand A, Brand B). Переменные вроде
brand/primaryссылаются (alias) на разные примитивы. - Theme — режимы Light и Dark. Семантические переменные
bg/surface,text/primary,action/primaryссылаются на переменные Brand или Primitives.
Компоненты привязываются только к семантическому уровню. Тогда бренд и тема переключаются независимо: на фрейме можно выбрать Brand B + Dark.
Настройка по шагам
- Откройте панель Variables и создайте коллекцию Primitives. Заведите палитру, используя слэши для групп:
violet/100,violet/600. - Создайте коллекцию Brand, добавьте режим на каждый бренд. Для каждого значения выберите алиас на примитив, а не hex-код.
- Создайте коллекцию Theme с режимами Light и Dark и заполните семантические переменные алиасами.
- Для чисел заведите отдельную коллекцию, например Density с режимами Default и Compact, — так меняются отступы и радиусы.
- Строковые переменные пригодятся для локализации: режимы RU, EN, UZ позволяют проверить, как интерфейс выдерживает длинные слова.
- Настройте scoping: ограничьте, где переменная доступна. Цвет текста не должен предлагаться для заливки фона, а spacing — для радиусов.
- Укажите code syntax для web, iOS и Android, чтобы в Dev Mode разработчик видел имя токена из кода.
Привязка к компонентам
- Выделите слой и нажмите на иконку переменной рядом со свойством: заливка, padding, gap, радиус.
- Для текста привязывайте размер, межстрочный интервал и начертание, а не только цвет.
- Булевы переменные удобно связывать со свойствами компонента, например показом иконки.
- Режим задаётся на уровне фрейма, секции или страницы через блок с режимами в правой панели. Вложенные экземпляры по умолчанию наследуют режим родителя, но его можно переопределить локально.
Проверка: соберите один экран, продублируйте его и переключите режимы. Если где-то остался «неправильный» цвет — значит, там жёстко задан hex вместо переменной.
Типичные ошибки
- Компоненты на примитивах. Тёмная тема тогда требует ручной перекраски.
- Названия по цвету, а не по роли.
blue-buttonломается, когда бренд становится фиолетовым. - Нет отдельных токенов для состояний. Hover, pressed и disabled должны быть семантическими переменными.
- Забытые эффекты и обводки. Тени и разделители в тёмной теме тоже требуют своих значений.
- Несинхронность с кодом. Названия переменных в Figma и токенов в коде должны совпадать.