Представьте письмо от заказчика: «мы обновили бренд, основной цвет теперь другой». Если ваш фиолетовый вписан значением #7C5CFF в кнопки, ссылки, иконки, тени и обводки по всему макету, вас ждёт вечер археологии — искать и менять вручную, молясь ничего не пропустить. А если он вынесен в переменную, вы меняете одно значение, и весь проект перекрашивается сам. Разница между этими двумя вечерами и есть смысл дизайн-токенов.
Токен — это просто именованная переменная с понятным адресом: color/brand/primary, space/4, radius/lg. Вы перестаёте держать в голове конкретные числа и цвета и начинаете мыслить смыслами: «основной акцент», «средний отступ», «крупное скругление». Редактор подставит фактические значения, а вы управляете системой из одной точки.
Три вещи, которые стоит вынести первыми
Не нужно токенизировать всё сразу — это отпугивает. Начните с трёх осей, которые дают максимум порядка при минимуме усилий. Цвета: акцент, фон, поверхность, текст основной и приглушённый. Отступы: короткая шкала кратных значений вместо «на глаз 13 пикселей». Скругления: три-четыре ступени от острого до мягкого. Уже это убирает из макета «пиксельную грязь» — мелкий разнобой, который читается как небрежность, даже когда зритель не может объяснить, что не так.
Примитивы и семантика — почему двух уровней достаточно
Хороший набор токенов живёт на двух этажах. Примитивы — сырые значения: вся палитра, полная шкала отступов, набор радиусов. Это словарь. Семантические токены — назначение: bg/surface, text/muted, border/subtle. Они ссылаются на примитивы, а компоненты, в свою очередь, ссылаются только на семантику — никогда на сырой цвет напрямую.
Зачем такая прослойка? Потому что при ребрендинге меняется не смысл, а его воплощение. «Приглушённый текст» останется приглушённым текстом — поменяется лишь конкретный серый, на который он показывает. Один правильный слой абстракции превращает страшный ребрендинг в правку пары примитивов.
Темы — это просто второй набор значений
Светлая и тёмная тема пугают ровно до тех пор, пока вы думаете про них как про два макета. На деле это один макет и два набора значений для одних и тех же семантических токенов: bg/surface в светлой — почти белый, в тёмной — почти чёрный, а компонент, который на него ссылается, не меняется вообще. В Rugma переменные поддерживают режимы (Светлая / Тёмная) — панель «Переменные» в редакторе хранит оба значения рядом, и переключение темы не требует копии проекта. Нарисовали один раз — работает в обеих.
Попробуйте прямо сейчас. Откройте редактор, зайдите в «Переменные» и заведите один цветовой токен — скажем, accent. Задайте ему значение для светлого режима и для тёмного. Привяжите к нему заливку пары кнопок. Теперь переключите тему — кнопки перекрасятся сами, а вы не тронули ни одного элемента. Дальше остаётся только расширять словарь.
Не только цвет: типографика, тени, размеры
Начинают обычно с цвета, но настоящая система идёт дальше. Типографика раскладывается на токены размеров и высот строк — text/body, text/h2, text/caption — и тогда шрифтовая шкала перестаёт зависеть от настроения. Тени в виде трёх-четырёх ступеней (shadow/sm, shadow/md, shadow/lg) убирают зоопарк случайных blur и offset, из-за которого интерфейс выглядит собранным из разных наборов. Даже ширины границ и прозрачности overlay стоит вынести — всё, что повторяется больше трёх раз, просится в токен.
Смысл один и тот же на любой оси: вы заменяете «помню, что тут было 14 пикселей» на «это text/body». Память освобождается под работу, а не под бухгалтерию значений.
Как внедрить в уже существующий макет
Собирать токены с чистого листа легко — сложнее навести порядок там, где уже сотня экранов. Заходите поэтапно. Сначала пройдитесь по палитре и соберите примитивы из того, что реально используется, а не из идеала. Потом заведите десяток семантических токенов на самые частые роли и перепривяжите к ним ключевые компоненты — кнопки, поля, карточки. Остальное подтянется по мере правок: каждый раз, когда открываете старый экран, переводите его на токены вместо того, чтобы трогать сырые значения. Через несколько недель проект окажется токенизирован почти без выделенного на это времени.
Дисциплина важнее инструмента
Токены не работают магически — они работают, если им следовать. Главное правило: как только вы поймали себя на том, что вписываете сырой #hex или число отступа вручную, остановитесь и спросите, нет ли уже подходящего токена. Обычно есть. Второе правило — называть токены по назначению, а не по виду: text/muted, а не gray-500, иначе после ребрендинга имя начнёт врать. Эта дисциплина окупается на третьем экране и дальше растёт как снежный ком. А когда над проектом работает больше одного человека, токены становятся общим языком: вместо спора «какой именно тут серый» команда ссылается на text/muted и понимает друг друга с полуслова — код-ревью макетов ускоряется так же, как ускоряется ребрендинг.
Токены — фундамент, на котором стоят компоненты и варианты: кнопка ссылается на семантику, а не на цвета, поэтому переживает любую смену бренда. И именно на уровне токенов удобнее всего заложить доступный контраст — один раз выверить пары «текст на фоне» и переиспользовать их везде. Нет времени собирать систему самим? Закажите дизайн интерфейса под ключ — соберём токены, компоненты и темы в Rugma и передадим проект с кодом.