В 2022-м мы написали про дизайн-токены. С тех пор Figma Variables вышли из беты и стали production-инструментом. Делимся, как у нас сейчас устроен пайплайн от дизайнера к продакшну.
Структура коллекций
Мы держим три уровня токенов в трёх коллекциях. Primitive - сырые значения (gray-100, blue-500). Semantic - алиасы по роли (text-primary, surface-raised). Component - токены, привязанные к конкретным компонентам, если уж совсем нужны.
Самая частая ошибка - заводить semantic-токен под каждый случай. У нас правило: новый semantic-токен появляется только если он используется минимум в трёх местах.
Modes для тем
Variables modes отлично работают для светлой/тёмной темы. На одном проекте - три темы плюс high-contrast. Дизайнер переключает mode в Figma, видит результат, не нужно дублировать страницы. Это сокращает время дизайн-работы на тёмной теме раза в два.
Пайплайн Figma → код
- Дизайнер обновляет Variables в Figma.
- По расписанию (раз в час) или по кнопке - экспорт через Figma REST API в JSON.
- Скрипт конвертирует JSON в формат Tailwind / CSS-переменных / iOS / Android.
- Опен PR в репозиторий с проверкой, что ничего не сломано.
- Разработчик мерджит, автодеплой выкатывает на staging.
Что не получилось автоматизировать
- Переименование токенов - ломает потребителей. Делаем вручную с deprecation-периодом.
- Удаление токена - никогда не делается автоматически, только через PR с обзором.
- Сложные токены (gradients, multi-stop shadows) - Variables их пока полноценно не поддерживают.
Цифры
На дизайн-системе среднего размера (~120 компонентов, ~280 токенов) пайплайн отрабатывает за 4 минуты. Среднее время от обновления в Figma до выкатки на staging - 18 минут. До внедрения автоматизации тот же цикл занимал 1–3 дня и проходил через 2–3 человека.