W3C Design Tokens Community Group определяет токен как «информацию, связанную с понятным человеку именем; как минимум пару имя/значение» (Design Tokens Format Module 2025.10).
Как выглядит токен
В файле токенов у токена есть имя, значение и обычно тип:
{
"bg": {
"accent": { "$type": "color", "$value": "{color.blue.500}" }
}
}То же решение в коде выглядит как --bg-accent в CSS или BgAccent в TypeScript, а в Figma как переменная bg/accent.
Зачем нужны токены
Токен заменяет скопированное значение общим именем. Если hex-код вставлен в стили, с дизайном его больше ничего не связывает. Если в стилях стоит var(--bg-accent), изменение токена доходит до каждого места, где он используется.
Токен может ссылаться и на другой токен. Это алиас (ссылка на другой токен): bg.accent выше ссылается на color.blue.500, а не повторяет его значение. Через алиасы система отделяет сырую палитру от решений, построенных на ней (см. примитивные и смысловые токены).
Токены и переменные Figma
Из всего, что есть в Figma, ближе всего к токенам переменные Figma: именованное значение с режимами. Токенами в коде они становятся, когда их экспортируют, например в файл DTCG, и доставляют в репозиторий. Этот путь по шагам описан в нашем руководстве: дизайн-токены из Figma в код.