что такое токены в дизайне
В прошлой статье про дизайн-систему я обещала разобрать токены отдельно и на конкретном примере. Выполняю обещание
→ Токен – это имя вместо значения
Токен – это переменная. Ты один раз называешь значение и дальше везде используешь имя, а не само значение
Вместо #2F6BFF – color/primary/500. Вместо 16px – space/4. Вместо 12px – radius/md
Все. Это весь термин. Дальше начинается интересное – почему одного слоя имен мало и зачем городить три
→ Один синий и пять мест в интерфейсе
Представь обычный экран. Ничего сложного: форма входа с полями, кнопка «Войти», ссылка «Забыла пароль», сверху табы, слева меню
Синий #2F6BFF у тебя живет в пяти местах:
- фон основной кнопки
- цвет ссылки в тексте
- обводка поля в фокусе
- подчеркивание активного таба
- иконка выбранного пункта меню
Ты аккуратная дизайнерка, поэтому не вбивала хекс руками – завела переменную blue/500 и подставила везде. Уже лучше, чем ничего. Теперь смотри, что происходит дальше
Приходит задача: «ссылки в тексте плохо читаются, сделай их темнее». Ты идешь менять blue/500 – и вместе со ссылками темнеет кнопка, обводка, таб и иконка. Ты этого не хотела
Второй вариант: ты не трогаешь переменную, а руками ставишь ссылкам другой цвет. Теперь у тебя в файле два синих, и через месяц никто не помнит, какой из них где должен быть
Это и есть момент, ради которого придумали второй уровень токенов
→ Три уровня и зачем их столько?
Разложу на том же примере
Примитивы. Просто палитра, без смысла. blue/500 = #2F6BFF, blue/700 = #1E4FCC, gray/100, gray/900. Это сырые краски, они ничего не значат и ни к чему не привязаны
Семантические. Значение плюс назначение. Тут появляется смысл:
- color/action/primary = blue/500 – основное действие
- color/link/default = blue/700 – ссылка в тексте
- color/border/focus = blue/500 – состояние фокуса
Компонентные. Значения конкретного элемента: button/bg/default = color/action/primary, input/border/focus = color/border/focus
Теперь вернемся к задаче «сделать ссылки темнее». Ты меняешь ровно одну строчку: color/link/default начинает ссылаться на blue/700 вместо blue/500. Кнопка, таб, обводка и иконка остались на месте, потому что они смотрят на другой семантический токен
Вот и весь фокус. Примитивы отвечают на вопрос «какие у нас есть цвета». Семантические – на вопрос «для чего этот цвет». Компонентные – «что именно красим»
Третий уровень нужен не всегда. Если у тебя один продукт и одна тема – спокойно живи на двух уровнях, компонентные токены добавишь, когда появится реальная нужда. Я сама на маленьких проектах их не делаю
→ А без этого правда никак?
Правда – можно. И это не сарказм
Если ты одна на проекте, у него одна тема, один бренд и он не переживет этот год – три уровня токенов будут честной тратой времени. Заведи переменные на цвета и типографику, зафиксируй шаг отступов и иди делать продукт
Токены начинают отбиваться, когда появляется что-то из этого:
- темная тема или второй бренд
- несколько платформ или несколько сервисов с общим стилем
- разработчики, которым нужен общий язык с макетами
- вторая дизайнерка на проекте
- продукт, который живет годами
В моем опыте в продуктовой команде решающим был последний пункт плюс несколько сервисов сразу. Задача «поменяли брендовый синий» без семантики означала бы ручной обход всех файлов и разговоры в духе «а тут этот синий или другой, похожий». С семантикой это правка нескольких значений
→ Как это выглядит в Figma
Практическая часть, чтобы не оставаться в теории
Токены в Figma живут в переменных – панель Variables. Логика такая:
- Заводишь коллекцию Primitives и складываешь туда всю палитру: blue/500, gray/100, red/500. Значения – хексы
- Заводишь вторую коллекцию, например Semantic. Создаешь переменные color/action/primary, color/text/default, color/bg/surface, color/border/focus
- В качестве значения семантической переменной выбираешь не хекс, а ссылку на примитив. В Figma это называется алиас – переменная ссылается на другую переменную
- В компонентах привязываешь заливки и обводки только к семантическим переменным. К примитивам компоненты не привязываешь никогда
Пункт четыре – главный. Если компонент смотрит прямо на blue/500, вся конструкция теряет смысл: ты снова не можешь поменять один сценарий, не задев остальные
Темная тема, кстати, делается ровно тут же (только для платных команд). В семантической коллекции добавляешь второй режим – Mode, и в нем color/bg/surface ссылается уже на gray/900, а не на gray/100. Компоненты не трогаешь вообще, они смотрят на имя, а имя внутри режима подставляет нужное значение
Если ты сейчас пользуешься стилями цвета – ты уже сделала половину пути. Стили это те же именованные значения, просто без слоев и без режимов
→ Как называть, чтобы потом не переделывать
Именование – та часть, где спотыкаются почти все, включая меня в свое время. Для дизайнерок на м-2 я сделала шпаргалку с возможными вариантами нейминга и категорий
Примерно выглядит так:
{категория} + {статус} + {роль} + {состояние} + {свое дополнение} = токен (необязательно использовать все, оставляем только нужное и складываем в группы)
- color/background/brand/default
- color/text/success
- color/icon/brand
Есть три вещи, которые сэкономят тебе перекатывание файла через полгода
Не зашивай цвет в имя семантического токена
color/text/blue – умрет в тот день, когда бренд станет зеленым
color/text/brand – переживет любой ребрендинг
Не зашивай пиксели в имя
spacing/16px – выглядит удобно ровно до момента, пока 16 превратится в 20
spacing/400 – числа в именах – это шаг шкалы, а не значение
Не изобретай уровней больше, чем сможешь объяснить вслух
Если ты не можешь за минуту объяснить разработчику, чем color/text/primary отличается от color/text/main – значит их не должно быть два
→ Что с этим делать?
Не надо переводить весь файл в токены за один вечер. Это классический способ потратить выходные и бросить на середине (и еще грязь развести)
Возьми свой текущий проект и сделай четыре шага:
- Собери палитру в переменные-примитивы. Просто перенеси то, что уже есть, ничего не придумывая
- Заведи семантический слой на четыре-пять самых частых категорий: фон, текст, иконка, обводка, разделитель
- Пройдись по компонентам и перепривяжи цвета на семантические переменные. Начни с кнопок и полей, они дают больше всего пользы
- Проверь себя одной задачей: попробуй поменять цвет ссылок, не задев кнопки. Если получилось за одну правку, то ты умничка и слои разложены верно :)
Если хочешь собрать это не на своем проекте, а на учебном, то сборка UI Kit с токенами с нуля разбирается в Модуле 2
И да, ты можешь не согласиться с уровнями и именами – схем существует много, и почти все рабочие. Важно не то, какую ты выберешь, а то, что она у тебя вообще есть и ты можешь ее объяснить
13.08.2026
от хаоса к системе
если не можешь выбрать модуль, пройди короткий тест