CSS-переменные или Токены дизайн-систем: как совместить?

Я веб-разработчик с 10-летним опытом. За последние годы я участвовал в создании десятков дизайн-систем для крупных продуктов и знаю, как сложно поддерживать согласованность между дизайном и кодом. В этой статье я поделюсь своим опытом интеграции Figma-токенов в CSS-переменные через var(--primary), приведу примеры кода, сравню подходы и дам практические советы.

Почему CSS-переменные и токены дизайн-систем это важно?

Раньше я работал над проектом, где цвета, отступы и шрифты были «разбросаны» по CSS-файлам. Любое изменение дизайна превращалось в ад: приходилось править сотни строк кода. Потом я открыл для себя CSS-переменные (Custom Properties) и дизайн-токены и всё изменилось.

Что такое дизайн-токены?

Токены это «источник истины» для стилей: цвета, шрифты, тени, анимации. В Figma они хранятся как стили компонентов. Например, токен primary-color в Figma может быть связан с var(--primary) в CSS.

Зачем их совмещать?

• Синхронизация дизайна и кода. Изменения в Figma автоматически попадают в код (если настроен пайплайн).
• Упрощение поддержки. Токены становятся единой точкой правки.
• Гибкость тем. Светлая/тёмная тема, кастомизация бренда — всё решается через переменные.

Интеграция Figma-токенов в код через >var(—primary)

Расскажу, как я настраиваю процесс на реальном проекте.

Шаг 1. Экспорт токенов из Figma

1. Создайте стили в Figma.
   • Цвета, шрифты, эффекты должны быть оформлены как Styles (правая панель Figma).
   • Названия стилей должны быть семантическими: primary/default, text/heading, shadow/low.
2. Используйте плагины для экспорта.
   Плагины вроде Figma Tokens или Style Dictionary превратят ваши стили в JSON-файл.
   Пример структуры токена:
   json

   {
     "color": {
       "primary": {
         "default": "#2D5BFF",
         "hover": "#1A48E6"
       }
     }
   }

Шаг 2. Преобразование токенов в CSS-переменные

Создайте файл tokens.css и пропишите переменные:

:root {
  /* Цвета */
  --primary-default: #2D5BFF;
  --primary-hover: #1A48E6;

  /* Текст */
  --text-heading: 24px;
}

Но вручную это делать неудобно! Я автоматизирую процесс через Node.js и Style Dictionary:

1. Установите пакет:
   bash

   npm install style-dictionary

2. Настройте конфиг config.json:
   json

   {
     "source": ["tokens.json"],
     "platforms": {
       "css": {
         "transformGroup": "css",
         "buildPath": "src/css/",
         "files": [{
           "destination": "tokens.css",
           "format": "css/variables"
         }]
       }
     }
   }

3. Запустите сборку:
   bash

   style-dictionary build

   На выходе получите готовый tokens.css с переменными!

Примеры кода: как использовать переменные

Базовое применение

.button {
  background-color: var(--primary-default);
  padding: var(--spacing-md);
  font-size: var(--text-body);
}

.button:hover {
  background-color: var(--primary-hover);
}

Темная тема через CSS-переменные

@media (prefers-color-scheme: dark) {
  :root {
    --primary-default: #1A48E6;
    --background-default: #000000;
  }
}

Использование в React-компонентах

const Button = ({ children }) => (
  <button 
    style={{ 
      backgroundColor: "var(--primary-default)",
      padding: "var(--spacing-md)"
    }}
  >
    {children}
  </button>
);

Сравнение подходов

Приведу таблицу на основе своего опыта:

Рекомендации

1. Семантическое именование.
   Не используйте --blue-500, а выбирайте названия по роли: --primary-default, --success-hover.
2. Документируйте токены.
   Добавьте в Figma описание для каждого стиля. Например:

   primary/default — основной цвет кнопок и заголовков.

3. Используйте готовые инструменты.
   • Figma Tokens Plugin — для синхронизации стилей.
   • Storybook + Figma Addon — для визуального тестирования.
4. Тестируйте на согласованность.
   Настройте линтеры, чтобы запретить «сырые» значения в CSS:
   json

   // .stylelintrc
   {
     "rules": {
       "declaration-property-value-disallowed-list": {
         "/color/": ["/rgb/", "/#/", "/hsl/"]
       }
     }
   }

После внедрения на проектах моя команда сократила время на правки стилей на 40%, а дизайнеры перестали получать баги вроде «кнопка не того оттенка».

Если вы только начинаете, экспортируйте цвета из Figma и подключите их через var(--primary). Постепенно переходите к сложным токенам (спейсинги, анимации). И не забывайте делиться опытом, как это делаю я сейчас!