Управление токенами: От хаоса к порядку
12 Октября 2023 • 8 мин. чтения
Рассинхронизация дизайна и кода
В 80% проектов возникает разрыв между макетом в Figma и реализацией в браузере. Дизайнер меняет отступ на 8px, а в коде значение остается 16px. Это создает технический долг, который накапливается как снежный ком.
Классический подход "копировать и вставить" приводит к дублированию стилей. Файл global.css разрастается до 5000 строк, где цвета дублируются в разных контекстах: #3B4A36 здесь и там.
Результат: невозможность масштабирования бренда и бесконечные правки "почему этот синий отличается от того синего".
Что такое дизайн-токены
Дизайн-токены — это атомы визуального дизайна. Это именованные переменные, которые хранят значения цвета, отступов, типографики и теней.
Токен — это не значение.
Значение: #3B4A36
Токен: color.brand.primary
Они служат единым источником истины (Single Source of Truth). Изменяя значение токена в одном месте, вы автоматически обновляете его во всех интерфейсах, компонентах и платформах. Это мост между абстрактной системой дизайна и конкретным кодом.
Именование и организация
Базовые токены
Прямые значения без контекста. Пример: color.gray.100, size.spacing.sm. Это "сырые" данные, которые не несут смысловой нагрузки.
Глобальные токены
Семантические имена, понятные команде. Пример: color.background.page или color.text.primary. Они ссылаются на базовые токены.
Компонентные токены
Используются в конкретном UI-элементе. Пример: button.bg.hover. Позволяют изолировать стили конкретных кнопок или карточек.
Сила Modkit API
Modkit не просто хранит ваши токены — он транслирует их. Наш API автоматически преобразует JSON-структуру токенов в валидный CSS, SCSS или переменные React.
Синхронизация происходит в реальном времени. Когда дизайнер обновляет палитру в Modkit, ваш CI/CD пайплайн получает обновленный пакет стилей без ручного вмешательства.
Документация API
Чек-лист внедрения
Аудит существующих CSS-переменных и удаление дубликатов.
Определение семантической стратегии именования (L2 токены).
Настройка конвейера сборки в Modkit для экспорта в CSS Variables.
Обучение команды дизайнеров работе с библиотекой токенов.