Простое введение в дизайн-токены

Если вам когда-нибудь приходилось обновлять цвет бренда, а затем целый час выискивать каждое захардкоженное значение #3B82F6, разбросанное по вашим таблицам стилей, — вы уже понимаете, какую проблему решают дизайн-токены. В этой статье объясняется, что такое дизайн-токены, чем они отличаются от обычных CSS-переменных и как начать использовать их в вашем рабочем процессе стилизации фронтенда.

Что такое дизайн-токены?

Дизайн-токены — это именованные, переиспользуемые значения, которые представляют ваши дизайн-решения: цвета, отступы, типографику, радиусы скругления и тени. Вместо того чтобы писать padding: 16px прямо в компоненте, вы ссылаетесь на токен вроде space-4, который хранит это значение.

По своей сути каждый дизайн-токен — это просто имя в паре со значением. Но как методология они идут дальше. Design Tokens Community Group (DTCG), сообщество W3C, работающее над единой спецификацией, описывает их как способ выражения дизайн-решений в платформонезависимом формате, чтобы их можно было использовать в различных дисциплинах, инструментах и технологиях.

Платформонезависимость здесь — ключевой момент. Одни и те же определения токенов могут быть преобразованы в CSS custom properties для web, Swift-константы для iOS или XML-значения для Android — и всё это из единого источника истины.

Типичные категории дизайн-токенов

Большинство дизайн-систем организует токены в следующие категории:

• Цвет — палитра бренда, цвета текста, фоны, границы
• Отступы — значения padding, margin, gap
• Типографика — семейство шрифтов, размер, начертание, межстрочный интервал
• Радиус границ — скругление углов компонентов
• Тень — эффекты возвышения и глубины

Примитивные токены vs. семантические токены

Это разграничение — одна из самых полезных концепций при работе с токенами дизайн-системы.

Примитивные токены (также называемые базовыми или глобальными) — это сырые значения без подразумеваемого использования:

{
  "color-blue-500": { "$value": "#3B82F6", "$type": "color" },
  "space-4": { "$value": "16px", "$type": "dimension" }
}

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

{
  "color-action-primary": { "$value": "{color-blue-500}", "$type": "color" },
  "spacing-component-padding": { "$value": "{space-4}", "$type": "dimension" }
}

Когда вы меняете color-blue-500, все семантические токены, ссылающиеся на него, обновляются автоматически. В этом и заключается реальная сила системы.

Дизайн-токены vs. CSS-переменные

CSS-переменные и дизайн-токены связаны, но это не одно и то же.

Дизайн-токены — это источник. CSS-переменные часто являются результатом. Инструмент вроде Style Dictionary берёт ваши определения токенов и преобразует их в нужный формат для каждой платформы.

Простой практический пример

Вот небольшой набор токенов, определённых в синтаксисе DTCG:

{
  "color-blue-500": { "$value": "#3B82F6", "$type": "color" },
  "color-text-primary": { "$value": "{color-blue-500}", "$type": "color" },
  "space-4": { "$value": "16px", "$type": "dimension" }
}

После прогона через Style Dictionary ваш CSS-вывод будет выглядеть так:

:root {
  --color-blue-500: #3B82F6;
  --color-text-primary: var(--color-blue-500);
  --space-4: 16px;
}

Теперь ваши компоненты используют var(--color-text-primary) вместо захардкоженного hex-значения. Измените токен один раз — обновите везде.

Со стороны дизайна переменные Figma следуют той же схеме «примитив — семантика», что упрощает синхронизацию дизайна и кода.

Начинайте с малого, масштабируйте осознанно

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

Заключение

Дизайн-токены — это не просто способ упорядочить CSS, это общий язык между дизайнерами и разработчиками. Когда этот язык установлен, согласованность по всему продукту перестаёт быть тем, что вам приходится поддерживать вручную, и становится тем, чем занимается сама ваша система.

Часто задаваемые вопросы

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..