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

Зачем нужны дизайн-токены?

Токены используются для того, чтобы визуальные элементы интерфейса можно было легко повторно использовать, масштабировать и синхронизировать между командами дизайнеров и разработчиков. Например, переменные вроде primary-color, font-size-base, spacing-sm позволяют задать и применять единый стиль по всему проекту.

Что может быть токеном дизайна?

• 🎨 Цвета (например, --color-primary: #007AFF)
• 🔠 Размеры шрифта (например, --font-size-lg: 18px)
• 📐 Отступы и интервалы (например, --spacing-md: 16px)
• 🔲 Скругления границ (например, --border-radius-sm: 4px)
• 🌫️ Тени (например, --shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.1))

Пример в коде (CSS):

:root {

--color-primary: #007aff;

--font-size-base: 16px;

--spacing-sm: 8px;

}

Токены могут храниться в различных форматах — JSON, YAML, SCSS, CSS-переменных и других.

Почему это важно?

• ✅ Единый источник истины: и дизайнеры, и разработчики используют одни и те же значения.
• 🔄 Упрощает обновления: изменение токена автоматически обновляет стиль во всём интерфейсе.
• 🎯 Сохраняется айдентика бренда: цвета, шрифты и другие параметры остаются согласованными.
• 📱 Подходит для адаптивного дизайна: легко масштабируется на разные устройства и платформы.

Вывод:

Design Tokens — ключевой элемент современных дизайн-систем. Они позволяют создать гибкий, масштабируемый и стандартизированный интерфейс, упрощая поддержку и развитие продукта. Это инструмент, который объединяет визуальное и техническое, обеспечивая прочную основу для качественного UI.