Обзор возможностей Dev Mode

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

Dev Mode (режим разработчика) — это интерфейс Figma, который превращает макет в интерактивную спецификацию. Если обычный режим нужен для рисования, то Dev Mode подсвечивает структуру, отступы и семантические токены.

Чтобы войти в этот режим, нажмите на иконку </> в правом верхнем углу или используйте Shift + D. Инструменты рисования исчезнут, уступив место панели инспекции.

Анатомия панели инспекции

Выберите любой элемент, и на правой панели откроется вкладка Inspect. Она агрегирует технические данные о компоненте. Вам больше не нужно измерять расстояния вручную: просто наведите курсор на соседние объекты, и Figma покажет точные отступы.

Здесь вы видите не просто слои, а иерархию, близкую к DOM-структуре. Это помогает заранее спланировать вложенность React-компонентов для Next.js.

Как показано на Схеме 1, интерфейс сфокусирован на чтении данных. Вы не сможете случайно подвинуть пиксель или изменить цвет в процессе верстки.

Чтение токенов и переменных

В Dev Mode раскрывается польза семантических токенов. В обычном режиме виден только цвет, а здесь в секциях Selection colors или Layout отображаются имена переменных.

• Плохо: копировать HEX-код #0070F3. Это «магическое число», которое придется менять вручную во всем проекте при обновлении бренда.
• Хорошо: использовать имя переменной, например var(--bg-primary).

Figma автоматически подставляет названия токенов в CSS-код. Это гарантирует, что ваш проект на Next.js будет синхронизирован с дизайн-системой.

Настройка единиц измерения: PX vs REM

Для Next.js важно соблюдать доступность (accessibility). В вебе стандартом считается rem, а не пиксели. В Dev Mode можно настроить Unit Settings:

1. Откройте настройки панели Inspect.
2. Установите базовый размер шрифта (обычно 16px).
3. Переключите отображение в rem.

Теперь Figma сама пересчитает значения. Вам не придется делить числа на 16 в уме.

Важно: перед копированием параметров убедитесь, что формат в Figma совпадает с вашим глобальным CSS-конфигом 📐

Инспекция автолейаута и вариантов

Поскольку вы уже умеете работать с автолейаутом, Dev Mode станет вашим главным помощником. Он транслирует настройки Auto Layout в свойства Flexbox. Параметры Gap, Padding и Alignment превращаются в готовые строки display: flex, gap и padding.

При выборе компонента с вариантами (например, кнопки в состоянии Hover) Figma покажет таблицу свойств. Вы увидите не только визуальные отличия, но и изменения в токенах.

// Как Dev Mode интерпретирует свойства компонента
// Component: Button | Variant: State=Hover, Size=Large
{
  "padding": "12px 24px", // Из настроек Auto Layout
  "background": "var(--button-hover-bg)", // Семантический токен
  "border-radius": "var(--radius-m)" // Переменная скругления
}

В Dev Mode вы перестаете угадывать дизайн и начинаете его читать. Это исключает ошибки при передаче макетов и ускоряет сборку интерфейса.

Мы освоили интерфейс и поняли, как система интерпретирует токены. Пришло время для автоматизации. В следующей теме мы разберем, как превратить созданные переменные в реальный CSS-файл, который Next.js подхватит мгновенно ⚡️