Переменные и токены

Переменные — это именованные значения (цвета, числа, строки), которые меняются по режимам: светлая и тёмная тема в один клик.

Стили хороши, но переменные мощнее: они умеют режимы. Одна и та же кнопка показывает разный цвет в light и dark — без дубликатов.

Переменные (Variables) — это нативный движок токенов Figma, появившийся в 2024 и ставший стандартом. Они хранят значения и группируются в коллекции, каждая из которых поддерживает несколько режимов (modes).

Четыре типа переменных

Коллекции и режимы

Переменные живут в коллекциях. У коллекции могут быть несколько режимов — например Light и Dark. Каждая переменная хранит своё значение для каждого режима. Переключаете режим на фрейме — и весь дизайн меняет тему.

1. Откройте панель переменных: в правой панели на пустом холсте найдите секцию Local variables или через меню.
2. Создайте коллекцию, например Colors.
3. Добавьте переменную bg/page типа Color.
4. Добавьте режим Dark и задайте для него тёмное значение.

Коллекция Colors с двумя режимами

  Переменная       Light      Dark
  bg/page          #FFFFFF    #0B0B0F
  text/primary     #111111    #F5F5F5
  accent/brand     #2563EB    #3B82F6

  фрейм в режиме Dark -> берёт правый столбец

Primitive и semantic токены

Зрелая система строится в два слоя. Primitive токены — сырые значения без смысла (blue/500 = #2563EB). Semantic токены ссылаются на примитивы по роли (accent/brand → blue/500). Меняете тему — переопределяете семантику, примитивы остаются.

Два слоя токенов (алиасинг)

  PRIMITIVE            SEMANTIC
  blue/500  #2563EB  <--  accent/brand
  gray/900  #111111  <--  text/primary
  white     #FFFFFF  <--  bg/page

  semantic ссылается на primitive (-> алиас)

Применение переменных к свойствам

Чтобы привязать переменную к свойству объекта, наведите на поле (например Fill, Corner radius или координату) — рядом появится маленькая иконка переменной (шестиугольник). Кликните по ней и выберите нужную переменную из списка. Теперь свойство связано: оно берёт значение из переменной и автоматически меняется вместе с режимом. Так один и тот же макет показывает разные цвета в Light и Dark без единого дубликата.

Number-переменные особенно полезны для отступов и скруглений: заведите space/m = 16 и radius/card = 12, примените их везде — и при смене масштаба системы (скажем, более компактный режим) достаточно поменять числа в одной коллекции. String-переменные применяют к тексту: переключение режима может менять язык интерфейса (мод Ru / En) на лету.

Алиасы и порядок коллекций

Семантический токен делается алиасом: при создании значения переменной вместо ввода HEX выберите другую переменную (примитив). Тогда accent/brand будет указывать на blue/500. Держите примитивы и семантику либо в разных коллекциях, либо чётко разделёнными группами. Важно: переменная может ссылаться только на переменную из той же или «более фундаментальной» коллекции — это предотвращает циклы. Такой двухслойный порядок и есть профессиональная архитектура токенов.

Горячие клавиши

Частые ошибки

• Кладут конкретные HEX прямо в semantic. Семантика должна ссылаться на примитив, а не дублировать значение.
• Делают всё одной коллекцией. Разделяйте: цвета, отступы, типографику — по коллекциям.
• Путают переменные и стили. Стили — наборы свойств; переменные — отдельные значения с режимами. Часто работают вместе.

Совет профи: переменные — фундамент, стили — обёртки

В зрелой системе переменные лежат в основе всего. Цвета, отступы, скругления, размеры — это атомарные значения, которые удобнее всего держать переменными с режимами. Поверх них строят стили (например текстовый стиль ссылается на цвет-переменную) и компоненты. Начните с двух коллекций: примитивы (сырая палитра и шкала spacing) и семантика (роли: bg/page, text/primary, accent/brand), где семантика — алиасы на примитивы. Добавьте режимы Light и Dark — и тёмная тема заработает почти бесплатно. Это и есть архитектура дизайн-токенов, которую используют большие продуктовые команды. Не пугайтесь, что это звучит сложно: начните с десятка переменных, и система естественно вырастет вместе с проектом. Переменные — мост от «красивого макета» к настоящей, масштабируемой дизайн-системе.

Чек-лист

• Создал коллекцию и переменные четырёх типов.
• Добавил режим Dark со своими значениями.
• Понимаю слои primitive и semantic.
• Переключаю тему сменой режима на фрейме.

Итоги. Переменные — нативные токены Figma с типами color/number/string/boolean, коллекциями и режимами для тем. Двухслойная схема primitive→semantic делает систему гибкой. Это мост к настоящей дизайн-системе, которую соберём в финальном разделе. Сначала — прототипы.