Экспорт CSS-переменных и стилей

Мы уже научились ориентироваться в интерфейсе Dev Mode. Теперь перейдем к главному — переносу проектных решений в код. В современной разработке Design Handover строится не на копировании отдельных свойств вроде «красный цвет» или «шрифт 16px», а на системном подходе. Наша задача — забрать из Figma готовую архитектуру стилей.

От стилей к переменным

В проектах на Next.js важно разделять статичные значения и динамические токены.

Экспорт переменных — это извлечение структурированных данных, которые мы создали в Figma. В режиме разработчика Figma показывает не просто HEX-код, а связь элемента с конкретным токеном.

CSS-переменная (Custom Property) — это сущность в коде, которая хранит значение для переиспользования во всем приложении. Dev Mode автоматически генерирует синтаксис --название-переменной: значение;, который можно сразу вставить в проект.

Как показано в Сравнении 1, переменные делают код чище и упрощают поддержку: если вы измените основной цвет в дизайн-системе, он обновится везде автоматически.

/* Извлекаем из панели Styles в Dev Mode */
.button-primary {
  background-color: var(--brand-primary);
  padding: var(--spacing-m);
  border-radius: var(--radius-sm);
}

/* Копирование свойств без привязки к системе */
.button-primary {
  background-color: #0070F3;
  padding: 16px;
  border-radius: 8px;
}

Настройка формата экспорта

Чтобы Figma выдавала код, подходящий для Next.js, проверьте настройки в секции Inspect (правая панель Dev Mode):

1. Язык: Выберите CSS.
2. Unit (Единицы измерения): Используйте rem. Это стандарт доступности: интерфейс будет корректно масштабироваться, если пользователь изменит размер шрифта в браузере.
3. Префиксы: Можно добавить префикс (например, ds-), чтобы избежать конфликтов с внешними библиотеками.

Практикум: Перенос темы в Next.js

Вам не нужно копировать свойства каждого прямоугольника. Мы экспортируем всю таблицу токенов одним массивом.

Ограничения автоматического экспорта

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

• Сложные градиенты: Figma часто генерирует лишние префиксы. В Next.js за это отвечает Autoprefixer, поэтому лишний код лучше вычищать.
• Layout (Сетки): Никогда не копируйте position: absolute. Забирайте только значения отступов (gap, padding), а структуру Flexbox или Grid пишите вручную.
• Эффекты: Свойства вроде backdrop-filter могут требовать ручной правки для корректной работы в разных браузерах.

Мы научились извлекать данные из Figma и подготовили базу для глобальных стилей. Но ручное копирование — это только начало. В следующей теме мы разберем логику преобразования токенов на уровне архитектуры, чтобы автоматизировать обновление дизайна в коде за считанные секунды.