​#token Дизайн-токены — строительные блоки дизайн-систем. Их в | Веб дизайн в Figma

​#token
Дизайн-токены — строительные блоки дизайн-систем. Их внедрение помогает сделать дизайн-системы унифицированными, гибкими и готовыми к масштабированию.

Общая информация

Дизайн-токены хранят повторяющиеся дизайн-решения в независимом от платформы виде. Они выступают единым источником достоверных данных для дизайн-системы.
Понятие «Единый источник достоверных данных» (Single source of truth — SSOT) означает централизованное хранилище, которое действует как единая точка отсчёта для различных артефактов.

Дизайн-решение — выбор, который дизайнер делает из имеющихся вариантов. Например, он выбирает фирменный цвет, шрифт или определяет интервал между заголовком и абзацем.

Дизайн-токены не зависят от конкретной платформы или технических возможностей, что делает их независимыми от платформы. Это упрощает внедрение дизайн-токенов на разных платформах и для разных веб- технологий.

Дизайн-токены обычно реализуют в удобном для восприятия формате, например, YAML или JSON, или используют их прямо внутри инструментов проектирования.

Такие инструменты преобразования дизайн-токенов, как Style Dictionary, Theo и другие, переводят независимые от платформы дизайн-токены в формат, соответствующий определённой платформе.
Например, для обозначения цветов в дизайн-токенах дизайнер может использовать формат HEX, в то время как в iOS будет использоваться RGBA, а Android — 8-значный HEX-код.

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

Использование дизайн-токенов вместо жёстко закодированных значений помогает сделать дизайн-систему гибкой, что упрощает её создание, поддержку и масштабирование.