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

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

Без токенов значения дублируются в кодовых базах CSS, iOS и Android. Единый источник истины для токенов позволяет изменить фирменный цвет сразу на всех платформах.

Распространённые категории: цвет (брендовый, семантический, нейтральный), типографика (семейство шрифта, размер, насыщенность, высота строки), интервалы (сетка 4 пикселя), радиус, тень и анимация (длительность, функция сглаживания).

Токены хранятся в формате JSON, YAML или в формате токенов дизайна W3C. У каждого токена есть имя, значение, тип и необязательное описание. Преобразования превращают их в выходные данные для конкретной платформы.

Глобальные токены содержат исходные значения: color-blue-500: #3b82f6. Псевдонимные токены семантически ссылаются на глобальные: color-action-primary: {color-blue-500}. Компоненты ссылаются на псевдонимные токены, а не на исходные значения.

Пользовательские свойства CSS — естественный способ представить токены для веба. Токен с именем spacing-4 превращается в --spacing-4: 1rem и используется по всей таблице стилей как margin: var(--spacing-4).

Плагин Figma Tokens и Tokens Studio синхронизируют токены дизайна между Figma и репозиториями кода. Дизайнеры и разработчики используют один словарь токенов, что устраняет ошибки перевода при передаче работы.

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

Один и тот же JSON токенов создаёт переменные CSS для веба, константы Swift для iOS и ресурсы XML для Android. Один файл определения предотвращает расхождения дизайнерских решений между платформами.

Начните с токенов цветов и интервалов. Заменяйте жёстко заданные значения файл за файлом. Выполните поиск по кодовой базе необработанных шестнадцатеричных значений и литералов пикселей, чтобы найти оставшиеся жёстко заданные дизайнерские решения.

Псевдонимные токены позволяют создавать темы: измените глобальный токен, на который ссылается псевдоним, и вся тема изменится без редактирования кода компонентов. Светлая, тёмная и брендовая темы строятся на одном уровне псевдонимов.

В чём разница между глобальным токеном и псевдонимным токеном?

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