Архитектура дизайн-токенов: цвет, типографика, отступы

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

От атомарного дизайна к токенизации

В основе современной методологии лежит Атомарный дизайн. Мы разделяем интерфейс на мельчайшие частицы (атомы), из которых собираем молекулы и организмы. Но в современной разработке просто иметь библиотеку компонентов недостаточно — нужно управлять данными, которые стоят за этими компонентами.

Для этого используют Design Tokens (дизайн-токены). Это визуальные атомы системы, представленные в виде переменных. Вместо того чтобы передавать разработчику HEX-код цвета или значение отступа, вы передаете имя переменной.

Иерархия и семантика токенов

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

Как устроена эта вложенность, можно увидеть на Схеме 1.

1. Primitives (Примитивы): Базовые значения. Например, blue-500 со значением #2F80ED. Они определяют палитру, но не несут смысла.
2. Semantic Tokens (Семантические токены): Описывают роль элемента. Например, action-primary-bg ссылается на примитив blue-500.
3. Component Tokens (Компонентные токены): Узкий уровень для конкретных элементов, например button-submit-padding.

Пример

Пример правильного наследования для кнопки:

• Primitive: color-brand-blue: #0052CC
• Semantic: surface-action-active: {color-brand-blue}
• Component: button-primary-background: {surface-action-active}

Использование Семантических токенов — критически важный навык. Вы перестаете думать категориями «сделай это красным» и начинаете думать «сделай это критическим».

Антипример

Ошибка именования: Использовать токен text-red для сообщения об ошибке. Если бренд решит, что ошибки должны быть оранжевыми, название text-red станет ложным и запутает разработчиков.

Правильно: Использовать text-error или text-critical. Значение внутри может измениться, но смысл (семантика) останется прежним.

Практика в Figma: переменные и режимы

Основной инструмент для работы с токенами — Figma Variables. В отличие от стилей (Styles), переменные поддерживают логику и режимы (Modes).

Работа с отступами и сеткой

Для системных отступов используйте числовые переменные (Number Variables) с шагом 4px или 8px. Это обеспечит визуальный ритм.

Для расчета шкалы отступов применяется формула: $Spacing_{n} = Base \times Scale^{n}$ Где $Base$ — это 4px или 8px, а $n$ — шаг в иерархии.

Настройка темной темы

Благодаря семантическому слою создание темной темы сводится к добавлению нового режима в коллекции переменных. Вы просто переназначаете, на какие примитивы ссылаются семантические токены в режиме Dark.

Упражнение

Задание: Создание токенизированной палитры

1. В Figma создайте Local Variable Collection «Primitives». Добавьте 3 оттенка серого.
2. Создайте вторую коллекцию «Semantic» и переменную bg-primary.
3. Свяжите bg-primary с самым светлым серым из примитивов.
4. Добавьте в коллекции «Semantic» второй режим (Mode) — «Dark».
5. В режиме «Dark» свяжите bg-primary с самым темным серым из примитивов.
6. Примените токен к фрейму и переключите режим слоя, чтобы проверить смену темы.

Чек-лист именования (Naming Convention)

Чтобы архитектура была понятна коллегам, придерживайтесь структуры: [System]-[Category]-[Item]-[Subitem]-[State]

• System: Продукт или тема (например, crm).
• Category: Тип (например, color, spacing, radius).
• Item: Объект (например, button, surface, text).
• Subitem: Роль (например, primary, success, muted).
• State: Состояние (например, hover, disabled).

Мы заложили фундамент «живой» системы. Теперь, когда у нас есть архитектура токенов в Figma, нужно передать эти данные разработчикам без ручного копирования HEX-кодов.

В следующей теме мы разберем, как превратить переменные в JSON-спецификации и настроить автоматический мост между дизайном и кодом.