Преобразование токенов Figma в CSS-переменные

Вы уже умеете создавать дизайн-токены в Figma: цвета, шрифты, отступы и другие свойства. Теперь переведём их на язык разработчиков — в CSS-переменные. Это ключевой шаг для бесшовной интеграции вашей дизайн-системы с Next.js.

Зачем нужны CSS-переменные?

CSS-переменные (или кастомные свойства CSS) хранят значения, которые можно переиспользовать по всему проекту. Как переменные в Figma: задали значение один раз — используете везде.

Главные плюсы CSS-переменных:

• Один источник правды. Все стили в одном месте. Изменить что-то? Меняете в одном месте — обновляется везде.
• Гибкость и масштабируемость. Легко переключать темы (светлая/тёмная), адаптировать стили под разные бренды или состояния.
• Чистый код. Имена переменных делают код понятным и самодокументируемым.
• Простая интеграция. Разработчики напрямую используют ваши значения из Figma. Меньше ошибок, меньше расхождений.

Как Figma превращает токены в CSS

Figma, особенно в Dev Mode, значительно упрощает экспорт дизайн-токенов. Она генерирует CSS-переменные на основе ваших коллекций.

Представьте, у вас есть переменная цвета в Figma: Цвета/Базовые/Синий/500 со значением #007bff. Figma преобразует её в CSS-переменную так:

:root {
  --colors-base-blue-500: #007bff;
}

Важно: Имена переменных в Figma часто содержат слеши (/) для организации (например, Цвета/Базовые/Синий/500). При экспорте в CSS эти слеши заменяются дефисами (-) или другими разделителями, чтобы соответствовать синтаксису CSS. Dev Mode делает это автоматически.

Шаги преобразования

1. Организуйте переменные в Figma. Убедитесь, что они хорошо структурированы и имеют понятные имена. От этого зависит читаемость CSS-переменных.

2. Используйте Dev Mode.

   • Переключитесь в Dev Mode в Figma (иконка </>).
   • Выберите любой элемент, к которому применены ваши переменные.
   • В правой боковой панели Dev Mode найдите раздел "Variables" или "Code". Figma покажет, как переменные будут выглядеть в коде.
   • Скопируйте сгенерированный CSS-код с определениями ваших переменных.

   Например, для переменной Цвета/Базовые/Синий/500 и семантической Цвета/Фон/Кнопка/Основная (которая ссылается на Цвета/Базовые/Синий/500), Dev Mode сгенерирует:

   :root {
     /* Colors/Базовые/Синий */
     --colors-base-blue-500: #007bff;
   
     /* Colors/Фон/Кнопка */
     --colors-background-button-primary: var(--colors-base-blue-500);
   }
   

   Видите, как семантическая переменная colors-background-button-primary ссылается на базовую colors-base-blue-500? Это мощь дизайн-токенов: измените базовый цвет — и все семантические токены, которые на него ссылаются, обновятся автоматически.

3. Экспорт типографики, отступов и теней.

   • Типографика: Для переменных шрифтов (размер, высота строки, насыщенность) Figma сгенерирует соответствующие CSS-свойства. Например, Типографика/Заголовок/H1/Размер со значением 48px даст --typography-heading-h1-font-size: 48px;.
   • Отступы: Переменные для отступов, например Отступы/M со значением 16px, преобразуются в --spacing-m: 16px;.
   • Радиусы: Аналогично для радиусов: --radius-small: 4px;.
   • Тени: Для стилей теней Figma сгенерирует box-shadow свойства, которые затем можно использовать как значения CSS-переменных.

Практика

Откройте свой файл Figma с дизайн-системой.

1. Переключитесь в Dev Mode.
2. Выберите любой компонент, например, кнопку.
3. Изучите раздел "Variables" или "Code" в правой панели.
4. Скопируйте сгенерированный CSS-код для нескольких ваших переменных (цветов, отступов, типографики).
5. Вставьте его в текстовый редактор и проанализируйте, как Figma преобразовала ваши токены. Обратите внимание на именование и структуру.

Понимание того, как Figma преобразует ваши дизайн-токены в CSS-переменные, — это фундамент для их интеграции в Next.js. На следующем шаге мы узнаем, как эффективно использовать эти CSS-переменные в коде Next.js, чтобы ваш дизайн ожил.