В проекте с 5 разработчиками и 2 дизайнерами среда — хаос. Один использует #1A73E8, другой — #1565C0, а в Figma цвет называется Blue/600. Темизация выливается в дублирование стилей — каждый новый дизайн требует переписывания CSS. Команда тратит до 20 часов в неделю на согласование цветов и отступов, что приводит к 100+ стилевым багам в месяц. Решение — внедрение Design Tokens: единый источник правды для цвета, отступов, типографики, теней и анимаций. Мы прошли этот путь в 30+ проектах и знаем, как избежать граблей. Опыт показывает, что с токенами скорость изменений возрастает в 3 раза, а количество багов падает на 70%.
Почему дизайн-токены — это не просто CSS-переменные?
Прямая замена #1A73E8 на --color-primary — это переменная, не токен. Токен несёт семантику: --color-action-primary-default, --color-action-primary-hover. Разница принципиальная: при смене фирменного цвета нужно менять одно значение в одном месте, а не искать все вхождения «основного синего» по кодовой базе. Без токенов команда из 5 человек тратит до 20% времени на стилизации: дизайнер меняет Blue/600 в Figma, разработчик не знает, что это #1D4ED8 уже используется в 12 местах под разными hex-значениями. Темизация требует дублирования стилей вместо переключения набора переменных. По данным Amazon Style Dictionary, токены сокращают overhead на 40%.Amazon Style Dictionary
Как внедрить Design Tokens в дизайн-систему?
Внедрение начинается с аудита текущих стилей и Figma. Затем мы проектируем трехуровневую модель токенов: primitive, semantic и component. Primitive токены хранят сырые значения без контекста: color.blue.500: #3B82F6. Semantic токены привязывают смысл: color.action.primary.default: {color.blue.500}. Component токены задают конкретные компоненты: button.background: {color.action.primary.default}. Это позволяет менять дизайн глобально, изменяя одно значение в примитивах, и делает темизацию простым переключением файлов.
Трёхуровневая модель решает проблему дублирования
Если нужно сменить оттенок синего, меняется только primitive токен, и все компоненты автоматически получают новый цвет. Без этой модели пришлось бы править каждую кнопку, карточку и ссылку отдельно. Это в 10 раз эффективнее ручного обновления CSS.
| Проблема | Решение с токенами | Результат |
|---|---|---|
| Разные значения одного цвета | Централизованное хранение | Одно изменение для всех |
| Трудности темизации | Семантические токены для каждой темы | Переключение CSS-файлов |
| Несоответствие Figma и кода | Двусторонняя синхронизация | Единый источник правды |
Интеграция токенов с Figma
Используем плагин Tokens Studio для двусторонней синхронизации с GitHub. Рабочий процесс:
- Дизайнер меняет токен в Figma
- Плагин пушит изменение в ветку
tokens/update-blue-palette - CI запускает Style Dictionary, генерирует CSS/JS
- PR с обновлёнными артефактами — код-ревью и merge
Настройка Tailwind для токенов
В Tailwind 4 токены подключаются через директиву @theme:
@theme {
--color-primary: var(--color-action-primary-default);
--radius-button: var(--button-radius);
}
Версионирование токенов
Токены — часть кодовой базы. Храним их в монорепозитории дизайн-системы и публикуем как npm-пакет @company/[email protected]. Семантическое версионирование критично: переименование токена — breaking change (major), добавление — minor, исправление значения — patch или minor в зависимости от контекста. Changelog пишем читаемым для дизайнеров.
Пример структуры файлов токенов
tokens/
primitive/
color.json
spacing.json
typography.json
semantic/
color.json
spacing.json
component/
button.json
card.json
Инструменты трансформации
Style Dictionary от Amazon — стандарт де-факто. Вот типичная конфигурация:
// config.js
module.exports = {
source: ['tokens/**/*.json'],
platforms: {
css: {
transformGroup: 'css',
buildPath: 'dist/css/',
files: [{
destination: 'tokens.css',
format: 'css/variables',
options: { outputReferences: true }
}]
},
js: {
transformGroup: 'js',
buildPath: 'dist/js/',
files: [{
destination: 'tokens.js',
format: 'javascript/es6'
}]
}
}
};
Запуск npx style-dictionary build --config config.js генерирует CSS и JS. Output для CSS:
:root {
--color-blue-500: #3B82F6;
--color-action-primary-default: var(--color-blue-500);
--button-background: var(--color-action-primary-default);
}
Тёмную тему можно добавить отдельным набором семантических токенов и собирать в tokens-dark.css.
Этапы работ
| Этап | Длительность | Результат |
|---|---|---|
| Аудит существующих стилей и Figma | 1–2 дня | Отчёт по несоответствиям |
| Проектирование primitive и semantic токенов | 2–3 дня | JSON-схема токенов |
| Настройка Style Dictionary и компиляция | 2–3 дня | CSS/JS/SCSS артефакты |
| Интеграция в проект | 2–4 дня | Мерж-реквест с токенами |
| Интеграция с Figma (опционально) | 3–5 дней | Двусторонняя синхронизация |
Что входит в работу
Мы проводим аудит текущих стилей и библиотеки Figma, проектируем трехуровневую схему токенов, настраиваем компиляцию через Style Dictionary и интегрируем в код (CSS, JS, Tailwind). Готовим документацию по использованию токенов и обучаем команду (1–2 часа). На все работы действует гарантия 3 месяца на работоспособность токенов.
Типичные ошибки при внедрении: не смешивайте primitive и semantic токены в одном файле; не используйте токены для значений, не являющихся дизайн-решениями (например, z-index модалки); всегда добавляйте fallback для старых браузеров; версионируйте токены с SemVer.
Свяжитесь с нами для предварительной оценки вашего проекта — мы определим сроки за 1 день. Получите консультацию инженера бесплатно. Закажите внедрение дизайн-токенов и избавьте команду от хаоса в стилях.