Design Token

Дизайн-токены – это именованные значения, в которых хранятся визуальные дизайн-решения продукта: цвета, типографические шкалы, единицы отступов, радиусы скругления, определения теней и подобные свойства. Вместо жёстко прописанных значений вроде #0057FF или 16px, разбросанных по всей кодовой базе или дизайн-файлу, команда определяет токен один раз и везде ссылается на него по имени.

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

Токены также служат мостом между дизайн-инструментами и кодом. Figma умеет определять токены, которые экспортируются напрямую в CSS custom properties, JavaScript-объекты или платформенные форматы для iOS и Android. Дизайнеры и разработчики ссылаются на одно и то же значение под одним именем, что снижает число ошибок при передаче макетов. Для преобразования единого источника определений токенов в несколько выходных форматов обычно используют инструменты вроде Style Dictionary от Amazon.

Дизайн-системы вроде Material Design и Carbon от IBM публикуют свои токены открыто. Для команд, которые одновременно разрабатывают под веб, iOS и Android, токены часто оказываются самым практичным способом сохранить визуальную согласованность без дублирования усилий. Насколько они полезны при развитии дизайна, определяет дисциплина осмысленного именования: семантические имена вроде color-button-primary вместо blue-500.