От палитры к токенам: живая дизайн-система с Token Studio

Слои «Primary / Blue 500» в Figma растут быстрее, чем баг-репорты? Сегодня узнаем, как превратить рассыпающуюся палитру в гибкие дизайн-токены с помощью Token Studio — и перестать бояться re-branding.

• Сквозной перевод цветов и шрифтов в токены за 30 минут.
• Git-версирование пропускает ручные копипасты.
• CI обновляет тему приложения за один pull-request.
• Миграция безопасна: дизайн-файлы выживают, разработка ускоряется.

Почему палитры больше не спасают продукт?

За последние два года мобильные UI удвоили число интерактивных состояний. Статическая палитра «10 оттенков корпоративного синего» просто не успевает: дизайнеры плодят 🔵Blue 600_New, а разработчик теряется между `#1565C0` и `#1E88E5`. Токены решают проблему, потому что описывают цвет и размер в виде данных, а не визуальных плюшек. Кто уже перешёл? Material 3 и Shopify Polaris — переход ценой в тысячи компонентов.

Список симптомов, когда пора на токены:

1.  > 30 дублей одного оттенка в проекте.
2. Редизайн тянется дольше двух спринтов.
3. Стили хранятся только в Figma.
4. Разработчики меняют SCSS вручную.
5. Дизайнеры боятся global replace.

{
 "color": {
   "blue": {
     "50":  "#E3F2FD",
     "500": "#2196F3",
     "900": "#0D47A1"
   }
 }
}

> Конфигурация будущих токенов: один источник — бесконечные платформы.

Мини-вывод: палитра устаревает при каждом фидбэке, токен — остаётся единым источником истины.

ОНЛАЙН-ПРАКТИКУМ

ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ

ЧТО БУДЕТ НА ОБУЧЕНИИ?

• ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
• Где и как применять? Потестируем модель после установки на разных задачах
• Как дообучить модель под себя?

Участвовать бесплатно

Как Token Studio превращает цвета в данные?

Token Studio — бесплатный плагин Figma, который сериализует стили в JSON. Под капотом — обычный объект, но UI-слой скрывает сложность и ускоряет миграцию.

Шаги интеграции:

• Импортируйте существующие стили в Token Studio.
• Сгруппируйте их по семантике (Primary, Surface).
• Экспортируйте JSON локально.
• Подключите репозиторий Git в настройках плагина.
• Настройте push on save.

Стрелочная диаграмма: Figma → Token Studio → JSON → код

Мини-вывод: плагин сводит всю работу к нажатию Save & Push, экономя десятки кликов.

Pipeline: JSON → Git → CI. Как автоматизировать?

Один JSON файл мало что меняет, пока не подружится с CI. Ниже — рабочий fragment `.github/workflows/tokens.yml`.

name: Design Tokens Sync
on:
 push:
   paths:
     — «design-tokens/**.json»
jobs:
 build:
   runs-on: ubuntu-latest
   steps:
     — uses: actions/checkout@v4
     — name: Transform tokens
       run: npx token-transformer design-tokens/tokens.json src/styles —format scss
     — name: Run tests
       run: npm test

Действуйте по чек-листу:

1. Храните токены рядом с кодом.
2. Запускайте конвертацию в каждом PR.
3. Падение тестов — знак, что дизайн-изменение ломает UX.
4. Лейбл `design-change` помогает ревьюерам фильтровать задачи.
5. Автоматический релиз пакует `npm @my-ui/tokens`.

Мини-вывод: CI превращает смену фирменного цвета в задачу «изменить одну строку».

> Попробуйте сейчас вынести свою главную палитру в JSON-токены и отправить первый PR — увидите, как Git описывает дизайн-долг понятными диффами.

Обновляем тему без боли: тёплый свитч между light и dark

Token Studio умеет хранить несколько наборов значений внутри одного файла. Добавьте ветку `dark` и переключайтесь в UX-прототипах за секунду.

Сделайте так:

• Создайте группу `mode` в Token Studio.
• Скопируйте `light` значения в `dark`.
• Измените критические цвета.
• Экспортируйте два JSON-файла.
• В коде используйте CSS `data-theme` hook.

:root[data-theme='dark'] {
 --color-bg-surface: var(--sys-color-surface-dark);
}

Мини-вывод: две темы — два файла, но один процесс; продукт выглядит цельно и ночью, и днём.

Финальная таблица: шаги миграции на токены

Берите JSON-шаблон, подключайте CI и подарите своей дизайн-системе второе дыхание — пока конкуренты чинят дубликаты стилей.