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 -- определяют, насколько полезными окажутся токены при эволюции дизайна.