В сентябре 2022-го Figma анонсировала Variables - родную поддержку токенов и режимов. К концу года это уже работает на продакшн-проектах. Делимся подходом, который мы откатали на пяти продуктах.
Что вообще такое токен
Дизайн-токен - это именованная переменная: цвет, отступ, размер шрифта, радиус. Вместо того чтобы в коде писать #0A0A0F, мы пишем color.ink - а где-то централизованно лежит соответствие. Когда оттенок меняется, мы меняем его в одном месте.
Почему это становится критично
На проекте размером в 50–100 экранов с двумя темами и тремя брейкпойнтами количество комбинаций UI-параметров переваливает за тысячу. Без токенов это превращается в хаос: дизайнер меняет один отступ - разработчик ищет 47 мест в коде, забывает три.
Какие токены мы выделяем
- Color: отдельно базовая палитра и семантические алиасы (text/primary, surface/raised).
- Spacing: шкала отступов (4-8-12-16-24-32-48-64), без произвольных значений.
- Radius: 4-8-12-16-9999.
- Typography: набор стилей (display/lg, body/m, caption), а не отдельные размеры.
- Shadow: набор пресетов, а не свободные значения.
- Motion: длительности и easing-кривые.
Как мы синхронизируем Figma → код
Figma Variables → JSON через плагин (Tokens Studio или собственный) → конвертер в формат CSS-переменных и Tailwind-конфига → автокоммит в репозиторий через GitHub Action. Дизайнер обновляет токен в Figma - через 5 минут он в коде. Без участия разработчика.
Что мы сознательно не делаем
- Не токенизируем компоненты целиком (button.primary.bg). Токены - это атомы, а не молекулы.
- Не делаем больше двух уровней алиасов. Базовый цвет → семантический алиас → конец.
- Не подгружаем токены runtime - только compile-time. Иначе tree-shaking не работает.
- Не делаем токены для одноразовых значений. Если оттенок используется в одном месте - это не токен.