Чем семантические токены лучше базовых?

Семантические токены описывают роль, а не значение: color/text/primary вместо blue/900 . Когда меняется тема или брендинг, достаточно поменять значение под этим именем — и цвет обновится везде. С базовыми пришлось бы искать по всему коду каждое использование конкретного оттенка и править вручную, а часть мест почти наверняка забыли бы.

UX и дизайнUI-дизайнДизайн-системы

Дизайн-токены

Именованные переменные дизайна (цвета, размеры, шрифты), которые единообразно используются и в макетах, и в коде.

КРАТКО

Дизайн-токены — это переменные дизайна с именами вместо конкретных значений: не «#1A73E8», а «основной цвет», не «16 пикселей», а «средний отступ». Когда дизайн-система меняется, правят токены, и продукт перекрашивается сам, без правки сотен файлов. Токены — общий язык макетов и кода: одно имя и одно значение и в макете, и во фронтенде.

СИНОНИМЫ:дизайн-токенытокены дизайнаDesign Tokens

Без токенов дизайн-система быстро рассыпается: один дизайнер взял цвет «такой» из палитры, второй — «такой же, но чуть синее», третий вообще завёл свой. С токенами так сделать структурно нельзя.

Какие бывают

Цветовые — основные цвета, состояния, тёмная тема.
Размерные — отступы, радиусы скругления, высоты компонентов.
Шрифтовые — кегли, межстрочные интервалы, начертания.
Тени и границы — фиксированные значения для всей системы.
Анимационные — длительности и кривые ускорения.

Уровни

Базовые токены — конкретные значения (например, blue/500 = #1A73E8).
Семантические токены — описание роли (color/text/primary = blue/900).
Тематические токены — наборы под разные темы: светлую, тёмную, отдельные бренды.

КОГДА ПРИМЕНЯТЬ

В любой дизайн-системе среднего размера
При поддержке тёмной темы и нескольких брендов
Когда планируете несколько платформ с общим стилем

КОГДА НЕ СТОИТ

На совсем небольшом проекте — там хватит обычных переменных стилей без отдельной системы токенов

ПРИМЕР

До токенов команда переходила на тёмную тему два месяца: каждый разработчик руками искал по коду все случаи белого фона и заменял их. После внедрения семантических токенов вроде color/background/surface запуск тёмной темы свёлся к смене значений в одном месте — за пару дней.

КАК ИСПОЛЬЗОВАТЬ В SHTAB

Самая частая ошибка — называть токены по внешнему виду, а не по роли: color/red вместо color/danger. Сначала всё выглядит нормально, но как только красный нужно заменить на оранжевый, начинается цепочка переименований, в которой путается вся команда. Имена по роли живут заметно дольше.

Попробовать бесплатно

Вопросы про «Дизайн-токены»

В каком-то виде токены существовали давно — обычные переменные стилей. Нового здесь другое: открытый формат W3C Design Tokens, который позволяет описывать их одинаково и в макетах, и в коде, и в инструментах синхронизации. В крупных компаниях это уже фактический стандарт, а не эксперимент отдельных команд.

Ещё из «UX и дизайн»

Вся категория →

Atomic Design (атомарный дизайн)

Подход Брэда Фроста, в котором интерфейс собирается из иерархии «атомов», «молекул», «организмов», «шаблонов» и «страниц».

Mobile-first (сначала мобильная версия)

Подход к проектированию, при котором сначала продумывают мобильную версию, а уже потом расширяют её до десктопа.

UX и UI: в чём разница

UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.

Применяйте термины на практике

База знаний, задачи и цели — в одном сервисе. Бесплатно — без лимита по числу людей.

Попробовать бесплатно Все термины