Организация и именование токенов для масштабирования

Вы уже освоили семантические токены. Теперь разберёмся, как их организовать и назвать. Правильная структура и система имён — это не просто порядок, а фундамент для масштабируемой и поддерживаемой дизайн-системы. Представьте, что строите дом: если кирпичи разбросаны и без чёткого назначения, стройка затянется, а результат будет ненадёжным. С токенами то же самое!

Зачем организовывать токены?

Хорошо организованные токены помогают:

• Быстро находить значения. Дизайнеры и разработчики тратят меньше времени на поиск.
• Легко масштабировать систему. Добавлять новые токены или менять существующие становится проще.
• Поддерживать консистентность. Меньше ошибок и расхождений в дизайне.
• Улучшить коммуникацию. Единая терминология упрощает работу в команде.

Системы именования токенов

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

1. Семантическое именование

Этот подход фокусируется на назначении токена, а не на его конкретном значении.

Принцип: [категория]-[назначение]-[состояние/вариант]

Примеры:

• color-background-primary (основной цвет фона)
• color-text-button-primary (цвет текста основной кнопки)
• spacing-stack-sm (малый отступ между элементами в стеке)
• border-radius-card (радиус скругления углов карточки)

Совет: Не используйте конкретные значения в именах, например color-red-500 или spacing-16px. Это делает токены негибкими. Если color-red-500 завтра станет синим, имя токена перестанет соответствовать его значению.

2. Функциональное именование (для специфических случаев)

Иногда функциональный подход полезен для очень специфических, редко меняющихся значений или когда семантика не очевидна. Но старайтесь минимизировать его использование.

Принцип: [категория]-[элемент]-[свойство]

Примеры:

• font-size-h1 (размер шрифта для заголовка H1)
• line-height-body (высота строки для основного текста)

В Figma переменные удобно группировать.

Организация токенов в Figma

В Figma переменные группируются по коллекциям. Для дизайн-системы рекомендую такую структуру:

Коллекции переменных:

1. Global (или Base): Базовые, несемантические значения (палитра цветов, базовые размеры отступов).
   • color-red-500
   • spacing-4
   • font-family-inter
2. Semantic (или Alias): Семантические токены, которые ссылаются на токены из Global. Здесь же можно определить режимы (светлая/тёмная тема).
   • color-background-primary (ссылается на color-white из Global)
   • color-text-body (ссылается на color-gray-900 из Global)
   • spacing-md (ссылается на spacing-16 из Global)
3. Component (или Component-Specific): Токены, специфичные для отдельных компонентов. Могут переопределять семантические токены. Используется реже, но полезен для сложных компонентов.
   • button-primary-background (ссылается на color-background-primary из Semantic)

Пример структуры именования в Figma:

Представьте коллекцию Semantic. Внутри неё можно создавать группы:

• color
  • background
    • primary
    • secondary
    • accent
  • text
    • primary
    • secondary
    • button-primary
• spacing
  • stack
    • sm
    • md
    • lg
  • inline
    • sm
    • md
• border-radius
  • sm
  • md
  • lg
  • full

Такая иерархия легко создаётся в Figma с помощью слешей / в именах переменных (например, color/background/primary). Figma автоматически превратит их в группы.

Практическое задание

Откройте файл Figma, который мы подготовили ранее.

1. Создайте новую коллекцию переменных Semantic.
2. Перенесите в неё часть ваших цветовых переменных, которые вы создавали ранее. Переименуйте их, используя семантический подход. Например, вместо primary-blue сделайте color/background/primary и свяжите его с вашим базовым синим цветом из коллекции Global.
3. Создайте несколько новых семантических токенов для отступов, используя структуру spacing/stack/sm и spacing/inline/md. Свяжите их с вашими базовыми числовыми значениями.

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

Теперь, когда мы разобрались с организацией и именованием дизайн-токенов, перейдём к созданию атомарных компонентов. Начнём с кнопки.