Как создать токен в фигме

Создание токенов в Figma — это ключевой элемент современного подхода к проектированию масштабируемых и согласованных дизайн-систем. Токены представляют собой именованные переменные, которые хранят значения, такие как цвета, типографика, отступы, радиусы скруглений и другие стилистические параметры. Использование токенов позволяет централизовать управление дизайном, ускорить разработку и обеспечить единообразие интерфейсов на всех платформах.

Что такое токены в дизайне и зачем они нужны

Дизайн-токены — это абстрактные переменные, которые хранят визуальные значения, такие как цвета, размеры шрифтов, интервалы, тени и другие атрибуты. Вместо того чтобы жёстко прописывать значение «#FF5733» или «16px», вы используете имя переменной, например, «primary-color» или «text-body». Это делает дизайн более гибким и поддерживаемым.
Токены особенно важны при работе над крупными продуктами, где множество дизайнеров и разработчиков взаимодействуют с одной и той же системой. Они позволяют быстро вносить изменения — например, обновить основной цвет бренда — и мгновенно видеть результат во всём проекте. Это снижает количество ошибок и ускоряет процесс релиза.
Использование токенов также способствует лучшей синхронизации между дизайном и кодом. Современные инструменты, такие как Style Dictionary, могут автоматически преобразовывать Figma Variables в CSS, Swift или Android XML, что делает передачу данных между командами почти бесшовной.

Основы работы с Figma Variables: что изменилось в 2025–2026 годах

Figma представила систему Variables в 2022 году, но именно в 2025–2026 годах она стала зрелым инструментом для профессиональных дизайн-систем. Теперь Variables поддерживают не только базовые типы данных, но и сложные коллекции, условия, ссылки на другие токены и экспорт в сторонние системы.
Ключевое изменение — полная интеграция с Figma Dev Mode. Разработчики теперь могут просматривать не только значения токенов, но и их иерархию, связи и контекст использования. Это устраняет необходимость в ручной сверке значений между макетом и кодом.
Также добавлена поддержка тем (themes). Вы можете определять наборы токенов для светлой, тёмной или брендированной темы и переключаться между ними в реальном времени. Это особенно полезно для продуктов с динамическим UI.

• Поддержка условных выражений (например, «если тема = dark, использовать цвет X»)
• Автоматическая проверка конфликтов имён и типов
• Глобальные переменные, доступные во всех файлах команды
• Экспорт в JSON с метаданными для инженерных систем

Как создать токен в Figma: пошаговая инструкция

Создание токена в Figma — это простой, но точный процесс. Ниже приведена детальная последовательность действий, актуальная на февраль 2026 года.

Шаг 1: Откройте панель Variables

Перейдите в правую боковую панель Figma и выберите вкладку «Design». Нажмите на иконку «=» (Variables) или найдите раздел «Local Variables» в нижней части панели. Если вы работаете в команде, убедитесь, что файл находится в Team Library.

Шаг 2: Создайте новую коллекцию

Коллекции помогают группировать токены по типу или назначению. Нажмите «+ New collection», например, назовите её «Colors», «Typography» или «Spacing». Коллекция создаётся на уровне файла, но может быть экспортирована в библиотеку.

Шаг 3: Добавьте переменную (токен)

Внутри коллекции нажмите «+ Add variable». Появится форма:

• Name — имя токена. Рекомендуется использовать kebab-case: primary-color, font-size-heading-lg.
• Variable type — выберите тип: Color, Number, String, Boolean или Composite.
• Mode — режим значения. Например, для тем можно задать «Light» и «Dark» отдельно.
• Value — само значение (например, #0066CC для цвета).

Шаг 4: Примените токен к объекту

Выделите фигуру, текст или компонент. В панели свойств найдите параметр (например, fill, stroke, font size) и кликните на значок переменной (квадрат с символом =). Выберите нужный токен из списка.

Шаг 5: Опубликуйте в библиотеку (опционально)

Если вы хотите, чтобы токены были доступны другим членам команды, перейдите в «Team Library», выберите файл с переменными и нажмите «Publish». После этого любые изменения будут синхронизироваться автоматически.

1. Открыть Variables Panel
2. Создать коллекцию (например, Colors)
3. Добавить переменную (Name, Type, Value)
4. Назначить токен объекту
5. Опубликовать в библиотеку

Категории и типы токенов: как правильно структурировать

Эффективная организация токенов — залог успеха любой дизайн-системы. Без чёткой структуры вы рискуете получить «токен-хаос», когда сложно понять, какой токен за что отвечает.

Рекомендуется использовать двухуровневую систему именования:

• Глобальные токены — базовые значения: color-blue-500, space-4.
• Семантические токены — контекстные: button-background, error-text-color. Эти токены ссылаются на глобальные.

Такой подход позволяет легко менять темы. Например, в тёмной теме «button-background» может ссылаться на «color-gray-800», а в светлой — на «color-white».

Практика использования токенов в проектах

Применение токенов выходит далеко за рамки простой замены цветов. Вот несколько реальных сценариев, где они показывают свою силу.

Адаптивный интерфейс

Используя токены, можно создавать компоненты, которые меняют отступы или размеры шрифтов в зависимости от устройства. Например, «space-unit» может быть 8px на мобильных и 12px на десктопе, если вы используете разные режимы в коллекции.

Мультибрендовые продукты

Компании с несколькими брендами (например, Сбер и Альфа-Банк) используют одну и ту же архитектуру UI, но с разными токенами. Переключение бренда — это всего лишь смена набора переменных.

Локализация и RTL

Для языков с правосторонним письмом можно создать токены направления: margin-start, padding-end. Они автоматически адаптируются под LTR/RTL, если интегрированы с Dev Mode.

Анимации и состояния

Токены могут хранить значения продолжительности анимаций (duration-fast, duration-slow) или состояний (hover-opacity, disabled-alpha).

Распространённые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при работе с токенами. Знание этих ловушек поможет вам сэкономить время и нервы.

• Слишком много токенов: создание отдельного токена для каждого случая приводит к хаосу. Решение: стандартизируйте значения и используйте шкалы (например, 4, 8, 12, 16, 24, 32).
• Плохие имена: «blue-lighter» или «new-red» — это неинформативно. Используйте систему: [категория]-[назначение]-[уровень].
• Отсутствие иерархии: все токены в одной коллекции — кошмар при масштабировании. Разделяйте по типам: Colors, Typography, Spacing.
• Не синхронизируются с кодом: если разработчики не видят токены, они их не используют. Решение: публикуйте переменные в библиотеку и используйте плагины экспорта.
• Изменение токенов без уведомления: обновление цвета без согласования может сломать интерфейс. Введите процесс ревью для критических изменений.

Экспертное мнение

Она также отмечает, что ключевой момент — это культура совместной работы. «Токены работают только тогда, когда дизайнеры, разработчики и менеджеры продуктов говорят на одном языке. Название токена — это уже договорённость.»

Вопросы и ответы

Заключение

Создание токенов в Figma — это не просто технический приём, а стратегический шаг к построению устойчивой, масштабируемой и командной дизайн-системы. Используя Variables, вы переходите от статичных макетов к динамическим, живым интерфейсам, которые легко адаптируются под изменения бренда, платформы или пользовательских потребностей.

• Токены — это переменные, которые хранят стилистические значения и обеспечивают единообразие.
• Figma Variables — мощный встроенный инструмент, доступный в платных тарифах.
• Правильная структура имён и иерархия коллекций критически важны.
• Токены ускоряют работу, снижают ошибки и улучшают collaboration.
• Интеграция с Dev Mode и экспортом в код делает систему практически бесшовной.