Когда проекты разрастаются, разрозненные стили превращаются в хаос. Один и тот же оттенок синего в макете может называться primary-blue, button-color или просто #0A74F0. Разработчикам приходится гадать, какой из них использовать, что ведет к несоответствиям и долгой отладке. Дизайн-система решает эту проблему, становясь единым источником правды для всей команды.

Ключевым элементом, который связывает дизайн и код, являются дизайн-токены. Это именованные сущности, которые хранят атрибуты визуального дизайна: цвета, отступы, типографику, тени. Вместо того чтобы жестко прописывать значение #FFFFFF, вы используете токен, например, color-text-primary. Если основной цвет текста изменится, вам нужно будет обновить только один токен, и изменения применятся везде.

Чтобы система была гибкой и масштабируемой, токены организуют в трехуровневую иерархию. Каждый уровень выполняет свою задачу, от абстрактных значений до конкретного применения.

1. Примитивные токены (Primitive Tokens) Это основа вашей системы. Они содержат сырые, не имеющие контекста значения. Например, blue-500: #0A74F0 или size-font-large: 20px. Их имена не говорят, где и как их использовать; они просто описывают само значение. Это ваша палитра.

2. Семантические токены (Semantic Tokens) Этот уровень придает смысл примитивным токенам. Семантические токены описывают назначение или контекст использования. Например, токен color-background-interactive ссылается на blue-500. Теперь у вас есть не просто синий цвет, а «цвет фона для интерактивных элементов». Если вы решите изменить основной интерактивный цвет, вы поменяете ссылку в одном месте, и все связанные элементы обновятся.

3. Компонентные токены (Component-Specific Tokens) Самый конкретный уровень. Эти токены применяются к определенным компонентам и могут переопределять семантические значения. Например, у вас есть токен button-primary-background-color, который по умолчанию ссылается на color-background-interactive. Но для особого случая вы можете создать кнопку с другим фоном, переопределив только ее компонентный токен, не затрагивая остальные интерактивные элементы.

Раньше для управления токенами в Figma использовали стили и плагины. Теперь основной инструмент для этого — переменные (Variables). Они позволяют создавать и управлять токенами непосредственно в Figma, а также легко переключаться между разными темами с помощью режимов (Modes).

Представьте, что вы создаете светлую и темную темы. Вы можете создать коллекцию переменных colors с двумя режимами: Light и Dark. Для переменной surface-background вы зададите белое значение в режиме Light и темное — в режиме Dark. Когда вы применяете эту переменную к фону фрейма, он будет автоматически менять цвет при переключении режимов.

Такой подход позволяет не только управлять темами, но и разными плотностями интерфейса (компактной, стандартной) или даже локализациями. Вы можете создать коллекцию spacing с режимами compact и comfortable, где отступы будут отличаться. Это делает систему невероятно гибкой.

Настоящая сила токенов раскрывается, когда они становятся мостом между дизайном и кодом. Figma позволяет экспортировать переменные в формате JSON, который разработчики могут напрямую использовать в своем коде. Это гарантирует, что значения в макете и в конечном продукте будут идентичны.

Плагины вроде Tokens Studio расширяют нативные возможности Figma, позволяя создавать более сложную логику, управлять несколькими наборами токенов и синхронизировать их напрямую с репозиториями кода на GitHub.

Для поддержания порядка в большой команде важно правильно организовать библиотеки. Разделяйте токены, иконки и компоненты по разным файлам. Например, у вас может быть один файл для глобальных токенов (Foundation), отдельный для иконок и несколько файлов для разных наборов UI-компонентов (например, для веба и мобильных приложений). Это упрощает управление доступом и ускоряет загрузку файлов.

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