Дизайн токены и дизайн-переменные: как систематизировать стили для масштабируемых проектов

Представьте: клиент просит поменять основной цвет бренда. В идеальном мире вы меняете одно значение — и весь интерфейс автоматически обновляется. Кнопки, ссылки, иконки, hover-состояния. Всё приходит в согласованный вид за пять минут.

В реальности многие команды тратят на такую задачу недели. Дизайнер вручную перекрашивает сотни элементов в Figma. Разработчик ищет все места в коде, где используется старый цвет. Кто-то обязательно что-то пропускает. Через месяц находят кнопку в старом цвете на странице, которую все забыли.

Design tokens решают эту проблему. Это способ хранить дизайн-решения в виде переменных, которые работают одинаково в Figma, CSS, iOS, Android и любых других платформах.

В октябре 2025 года W3C Design Tokens Community Group выпустила первую стабильную версию спецификации. Токены официально стали индустриальным стандартом. Google, Microsoft, Salesforce, Adobe, Figma, Sketch — все поддерживают или внедряют стандарт.

Эта статья — практическое руководство. Что такое токены, как их структурировать, как именовать, какие инструменты использовать и как внедрить систему в команде.

1. Что такое design tokens простыми словами

Design tokens — это переменные, которые хранят визуальные параметры интерфейса: цвета, размеры шрифтов, отступы, тени, скругления. Вместо того чтобы везде писать #3B82F6, вы создаёте переменную color-brand-primary и используете её.

Можно представить токены как кубики LEGO. Каждый кубик имеет название и назначение. Из них собирается весь интерфейс. Когда нужно что-то изменить — меняете значение кубика, а не ищете все места, где он использован.

Концепция появилась в 2014 году в Salesforce. Команда искала способ синхронизировать дизайн между веб-приложением, мобильными приложениями и маркетинговыми материалами. Создали систему, где все визуальные параметры хранятся в одном месте и автоматически конвертируются в нужные форматы.

Идея оказалась настолько удачной, что её подхватили Google, Microsoft, Amazon, Shopify, Adobe. Сегодня токены — стандарт индустрии.

2. Зачем нужны токены: пять главных причин

Консистентность. Когда все визуальные параметры определены как токены, невозможно случайно использовать «почти такой же» оттенок или «примерно такой» отступ. Интерфейс выглядит согласованно на всех экранах.

Масштабируемость. Новые экраны и компоненты собираются из готовых токенов, а не изобретаются заново. Это ускоряет работу и снижает количество ошибок.

Кросс-платформенность. Одни и те же токены работают на вебе, iOS, Android. Дизайн остаётся единым независимо от технологии.

Простота изменений. Ребрендинг или добавление тёмной темы превращается из многомесячного проекта в задачу на несколько дней.

Общий язык. Дизайнеры и разработчики говорят на одном языке. Вместо «возьми этот синий, примерно такой» — «используй color-brand-primary».

«Дизайн-токены — это шаг от хаотичного дизайна к системному. Они связывают Figma и код, дизайнеров и разработчиков, эстетику и технологию.»

3. Три уровня токенов: от примитивов к компонентам

Токены организуются в иерархию. Каждый уровень ссылается на предыдущий, создавая цепочку от базовых значений до конкретных применений.

Примитивные токены (Primitive / Global)

Базовый уровень — «сырые» значения без контекста использования. Описывают, что существует в системе: какие цвета, размеры, шрифты доступны.

Примитивные токены именуются по внешнему виду: color-blue-500 — конкретный оттенок синего. Без указания, для чего он.

Семантические токены (Semantic / Alias)

Ссылаются на примитивные и добавляют контекст использования. Описывают не как выглядит значение, а зачем оно нужно.

Семантические токены делают возможными темы. В светлой теме color-background-primary ссылается на белый. В тёмной — на тёмно-серый. Компоненты используют семантический токен и автоматически адаптируются.

Компонентные токены (Component-specific)

Самый специфичный уровень — привязаны к конкретным компонентам.

Компонентные токены опциональны. Многие команды работают только с примитивными и семантическими. Компонентные добавляют, когда система становится большой.

4. Как правильно именовать токены

Правильное именование — половина успеха. Плохие имена создают путаницу, хорошие — делают систему интуитивной.

Типичная структура имени: от общего к частному.

[категория]-[тип]-[элемент]-[вариант]-[состояние]

Примеры:

• color-background-surface-primary

• color-text-body-secondary

• color-border-input-hover

• space-padding-button-sm

Не все части обязательны. Используйте столько уровней, сколько нужно для ясности.

Принципы хорошего именования:

Чего избегать:

• Числовые индексы без смысла — color-1, color-2

• Слишком длинные имена — color-background-container-card-primary-default-light

• Аббревиатуры — clr-bg-prim

• Привязка к теме — color-dark-background

5. Цветовые токены: структура и организация

Цветовые токены — обычно самая обширная часть системы. Их структура критична для поддержки тем.

Примитивные цвета

На базовом уровне определяем полную палитру. Типичная структура — шкала от светлого к тёмному:

• color-gray-50 — самый светлый

• color-gray-100, 200, 300...

• color-gray-900 — самый тёмный

Такая же шкала для каждого цвета: blue, green, red, yellow. Шаг 50/100 позволяет добавлять промежуточные оттенки без переименования.

Семантические цвета

Группируем по назначению:

6. Токены для типографики, отступов и эффектов

Типографика

Семейства шрифтов:

• font-family-sans — основной

• font-family-mono — для кода

Размеры по шкале:

Отступы

Шкала на основе базовой единицы (обычно 4px):

Скругления

• radius-sm — 4px

• radius-md — 8px

• radius-lg — 12px

• radius-full — 9999px (круг)

Тени

• shadow-sm — лёгкая тень

• shadow-md — средняя

• shadow-lg — выраженная

7. Тёмная тема через токены

Одно из главных преимуществ токенов — простота реализации тем. Вместо отдельных стилей для каждого режима просто переопределяете семантические токены.

Как это работает

Компоненты используют семантические токены, не зная конкретных значений. Кнопка использует color-background-primary и color-text-primary.

Кнопка не знает о темах. Она просто использует токены, а токены определяют внешний вид в каждом режиме.

Особенности тёмной темы

Нельзя просто инвертировать цвета. Есть нюансы:

• Насыщенность. На тёмном фоне насыщенные цвета создают вибрацию. Нужны менее насыщенные оттенки.

• Контраст. WCAG требует минимум 4.5:1. В тёмной теме могут потребоваться другие оттенки.

• Глубина. В светлой теме глубина создаётся тенями. В тёмной — разницей яркости фонов.

«При адаптации цветов для тёмной темы избегайте насыщенных цветов. На тёмных поверхностях они не проходят стандарт доступности WCAG, создают оптическую вибрацию и вызывают зрительное напряжение.»

8. Инструменты для работы с токенами

Figma Variables

В 2023 году Figma добавила нативные переменные. Поддерживают числа, цвета, строки, алиасы, режимы для тем. Ограничения: не поддерживают тени и композитную типографику.

Tokens Studio

Плагин для Figma с расширенными возможностями: все типы токенов, формат DTCG, синхронизация с Git, экспорт в разные форматы. Open-source, интегрируется с Penpot и VS Code.

Style Dictionary

Инструмент Amazon для трансформации токенов в код. Принимает JSON, генерирует CSS-переменные, SCSS, JavaScript, Swift, Kotlin, конфиги для Tailwind. Стандарт индустрии.

Сравнение инструментов:

9. Workflow: от Figma к коду

Токены раскрывают потенциал, когда дизайн и код синхронизированы. Изменения в Figma автоматически отражаются в коде.

Типичный процесс:

1. Дизайнер определяет токены в Figma (Variables или Tokens Studio)

2. Токены экспортируются в JSON в Git-репозиторий

3. CI/CD запускает Style Dictionary

4. Style Dictionary генерирует код для нужных платформ

5. Разработчики используют сгенерированные переменные

При изменении токена в Figma процесс повторяется автоматически. Разработчикам остаётся обновить зависимость.

Советы:

• Ведите документированный маппинг: Figma токены → код → CSS-переменные

• Используйте Storybook для синхронизации визуальных снапшотов с компонентами

• Добавляйте префикс для системных токенов (--ds-color-primary)

• Конвертируйте пиксели в rem для доступности

10. Как внедрить токены в команде

Этап 1: Аудит существующих стилей

Проанализируйте текущее состояние:

• Сколько разных цветов используется?

• Сколько размеров шрифтов?

• Какие отступы встречаются чаще всего?

• Есть ли уже какие-то переменные?

Этап 2: Создание примитивного уровня

• Консолидируйте похожие цвета в палитру

• Определите шкалу размеров и отступов

• Выберите шрифты

Не пытайтесь сразу сделать идеально. Начните с текущего состояния, итерируйте.

Этап 3: Семантический уровень

Определите, как примитивы используются:

• Какой цвет для основного текста? Для вторичного?

• Какой цвет для фона? Для карточек?

• Какие отступы внутри компонентов? Между ними?

Этап 4: Миграция кода

• Новые компоненты сразу используют токены

• При рефакторинге существующих — переводите на токены

• Правило: новый код только с токенами

Этап 5: Документация

• Каталог всех токенов с примерами

• Гайдлайны по выбору токенов

• Процесс добавления новых токенов

11. Типичные ошибки при работе с токенами

Ошибка 1: Компоненты на примитивах

Кнопка использует color-blue-500. При смене бренда придётся менять все кнопки. Правильно: color-brand-primary.

Ошибка 2: Разные имена в Figma и коде

В Figma токен primary-color, в CSS — brand-main. Путаница гарантирована. Имена должны быть идентичны.

Ошибка 3: Один токен для разных целей

Если color-primary используется для кнопок, ссылок, иконок и бордеров — при изменении пострадает всё. Создавайте отдельные семантические токены.

Ошибка 4: Слишком много токенов

Токен для каждого случая — это хаос, не система. Если у вас button-padding-left и button-padding-right с разными значениями — что-то не так.

Ошибка 5: Нет аудита

Токены устаревают. Без регулярного аудита система засоряется неиспользуемыми токенами. Проводите аудит раз в квартал.

12. Чек-лист системы токенов

Структура:

• ☐ Чёткое разделение примитивного и семантического уровней

• ☐ Компоненты используют только семантические токены

• ☐ Структура масштабируется для новых токенов

Именование:

• ☐ Единая конвенция

• ☐ Имена понятны дизайнерам и разработчикам

• ☐ Семантические токены без визуальных характеристик

Синхронизация:

• ☐ Токены в дизайне и коде идентичны

• ☐ Есть автоматизация

• ☐ Изменения в дизайне отражаются в коде

Темы:

• ☐ Семантические токены поддерживают тёмную тему

• ☐ Компоненты адаптируются автоматически

• ☐ Цвета проходят проверку доступности

13. Что запомнить

Design tokens — переход от хаотичного дизайна к системному. Они связывают Figma и код, дизайнеров и разработчиков. В 2025 году токены стали официальным индустриальным стандартом W3C.

Главные принципы:

• Начинайте с примитивов. Определите базовые значения, из которых строится всё остальное.

• Добавляйте семантику. Она даёт контекст и делает возможными темы.

• Именуйте осмысленно. Хорошие имена — половина успеха.

• Автоматизируйте синхронизацию. Ручная синхронизация — источник ошибок.

• Итерируйте. Не пытайтесь создать идеальную систему сразу.

Начните с малого: один тип токенов (цвета), простая структура, несколько компонентов. Когда увидите результат — расширяйте. Через несколько месяцев вы не сможете представить, как работали без токенов.

Design tokens — это инвестиция. Первоначальная настройка требует усилий. Но отдача — консистентный интерфейс, быстрые изменения, простое масштабирование и общий язык для команды — многократно окупает вложения.

А лучшие вакансии для ux/ui и продуктовых дизайнеров ищите на hirehi.ru