Variables в Figma: шесть типов, коллекции и режимы без путаницы
Переменные в Figma — это именованные значения, которые можно применить к свойствам слоя. Одно значение меняется в одном месте, а обновляется везде.
Но у переменных есть структура: типы, коллекции, режимы. Без неё они превращаются в свалку токенов.
Что такое переменная
Документация определяет: переменные — это «сырые» значения вроде цвета, числа и строки, которые могут меняться в зависимости от контекста дизайна: светлая и тёмная тема, мобильный и десктопный вид.
Ключевая идея: одно имя — несколько значений под разные контексты.
Шесть типов
Документация перечисляет ровно шесть типов и то, к чему каждый применяется:
- Color — сплошные заливки, с опциональной прозрачностью;
- Number — числовые значения;
- String — текстовые строки;
- Boolean — истина/ложь;
- Timing — длительность в миллисекундах;
- Easing — кривая ускорения или пружинная анимация.
Последние два типа нужны для прототипов: длительности переходов и кривые задаются переменными, а не руками в каждой связи.
Коллекции
Коллекция — это набор переменных и режимов. Она организует связанные значения вместе.
Пример из документации: одна коллекция для локализации текста, другая — для пространственных значений.
Внутри коллекции переменные можно группировать. Пример из документации: группа для цветов текста, отдельная группа для цветов обводок.
Лимит: до 5 000 переменных в одной коллекции.
Режимы
Режим — это набор значений переменных в коллекции: по одному значению на каждую переменную.
Проще говоря: коллекция «Цвета» может иметь режимы Light и Dark. Переменная background в режиме Light равна белому, в режиме Dark — почти чёрному. Слой показывает значение того режима, в котором он находится.
Практический эффект: чтобы сделать тёмную тему, не нужно дублировать макеты. Достаточно переключить режим.
Как создать режим
- Откройте переменные: раздел Local variables в правой панели.
- Откройте нужную коллекцию.
- Нажмите New variable mode справа от заголовков столбцов.
Figma продублирует значения из первого столбца в новый. Дальше их правят.
Дублировать режим можно через правый клик по заголовку → Duplicate mode.
Режим по умолчанию
По умолчанию режим коллекции — самый левый столбец.
Объект или страница используют значения этого режима, пока им явно не назначен другой.
Поменять режим по умолчанию: перетащить столбец влево или правый клик → Set as default.
Если у объекта или страницы режим стоит «Auto» или «Default», они наследуют новый дефолт.
Сколько режимов доступно
Число режимов зависит от плана. Документация по планам приводит такие значения:
- Professional — до 10 режимов на коллекцию;
- Organization — до 20;
- Enterprise — расширенные коллекции без этого ограничения.
Это ограничение стоит учитывать при проектировании системы тем: если планируете больше десяти контекстов, нужен более высокий план.
Переменные против стилей
Разница сформулирована в отдельной статье.
Стиль хранит набор значений, которые выражаются одновременно: семейство шрифта, размер, насыщенность. Применили текстовый стиль — применились все свойства сразу.
Переменная хранит одно значение, но может иметь несколько определений под режимы. В каждый момент выражается одно.
Отсюда практическое правило: составные вещи (типографика, тени, градиенты) удобнее стилями; то, что меняется по контексту (цвет темы, отступ, радиус) — переменными.
Практика: цвета темы
- Создайте коллекцию
Theme. - Добавьте переменные
bg,surface,text,accent. - Создайте режимы
LightиDark. - Заполните значения для каждого режима.
- Примените переменные к слоям.
- Переключите режим на фрейме — цвета поменяются.
Это самый быстрый способ проверить тёмную версию интерфейса.
Практика: числа и отступы
Коллекция Spacing с переменными xs, sm, md, lg. Значения — в пикселях.
Дальше отступы задаются переменными, а не вводятся руками. При смене сетки правится одно место.
Передача в разработку
В Dev Mode переменные показываются с деталями: имя, файл-источник, коллекция, режим, значение и цепочка алиасов, область применения и фрагмент кода.
Это удобно: разработчик видит не «#1A1A1A», а color/text/primary в режиме Dark.
Ограничение: расширенные возможности вроде публикации переменных в библиотеки требуют платного плана.
Производительность
Сама по себе переменная почти ничего не стоит. Нагрузка появляется от количества применений и от режимов.
На ноутбуке с 16 ГБ ОЗУ большой файл с тысячами переменных и десятком режимов ощутимо тяжелее, чем тот же файл с жёстко заданными цветами.
Публикация в библиотеку
Переменные можно публиковать в командные библиотеки — как компоненты и стили.
Ограничение из документации: публикация переменных в библиотеки доступна на платных планах и в образовательном.
После публикации переменные доступны в файлах, к которым подключена библиотека. Править их можно только в файле-источнике.
Практика: держите одну библиотеку токенов и не дублируйте коллекции по файлам — иначе появятся расхождения, которые никто не заметит.
Переменные в прототипах
Режимы можно переключать прямо в прототипе.
Документация описывает три сценария:
- задавать значения режима по контексту;
- использовать значения режимов в выражениях;
- менять режим страницы действием прототипа.
Это позволяет собрать переключатель темы: кнопка в прототипе меняет режим, и весь экран перекрашивается без отдельных макетов.
Ограничение: работа с переменными в прототипах требует платного плана.
Частые ошибки
Смешивать стили и переменные без правила. Система обрастает дублями.
Делать по коллекции на каждый экран. Лучше по смыслу.
Забыть про режим по умолчанию. Новые фреймы наследуют не тот контекст.
Упираться в лимит режимов. Проверьте план заранее.
Хранить в переменных составные значения. Для этого есть стили.
FAQ
Сколько типов переменных?
Шесть: Color, Number, String, Boolean, Timing, Easing.
Что такое режим?
Набор значений переменных для одного контекста, например Light или Dark.
Сколько переменных в коллекции?
До 5 000.
Чем переменная отличается от стиля?
Переменная хранит одно значение, стиль — набор свойств.
Где увидеть переменные в Dev Mode?
В панели Dev Mode при выбранном объекте.