Дизайн в код: от макета к React

Режим «Код» — аналог Dev Mode

Режим «Код» — это вид макета для разработчика. Он включается клавишей ⇧D или переключателем режимов справа на панели инструментов. Холст в нём только для просмотра: если попробовать что-то изменить, редактор покажет кнопку «К дизайну».

Доступ зависит от роли. В личном файле режим открыт владельцу, в команде — владельцу, администратору, редактору и разработчику. Роль разработчика бесплатна и не занимает место редактора. Наблюдателю режим недоступен.

• Наведение показывает расстояния, а отступы и промежутки автолейаута подсвечиваются.
• «Аннотация» (Y) и «Измерение» (⇧M) работают и в этом режиме. Показ на холсте включается в «Вид → Аннотации» (⇧Y).
• Категории аннотаций: «Разработка», «Взаимодействие», «Доступность» и «Контент».

Как подготовить файл к передаче, рассказано в гайде как передать макет разработчику. Что получает разработчик и сколько это стоит команде — на странице для разработчиков.

Разделы вкладки «Код»: что видит разработчик

Вкладка «Код» в правой панели разбита на разделы. Каждый отвечает на свой вопрос вёрстки: какой это компонент, какие у него размеры, шрифты, токены и файлы.

• Компонент

  React-компонент, его пропсы с типами и значениями по умолчанию, состояния в CSS. Здесь же «К основному» и «Песочница» (как Explore component behavior в Figma).

• Код

  Язык на выбор: «CSS», «React + CSS Modules», «React + Tailwind», «React + inline-стили» или «Токены». Файлы открываются вкладками, их можно скопировать и скачать. Тут же «Что перенести вручную» и «Экспорт в React…».

• Расположение

  Блочная модель слоя.

• Типографика

  Параметры текста выбранного слоя.

• Стили и переменные

  Стили и переменные слоя вместе с предложенными токенами.

• Ассеты

  Иконки и картинки внутри слоя: их можно скачать в SVG и PNG.

• Экспорт

  Файлы, которые дизайнер настроил в разделе «Экспорт» вкладки «Дизайн» для этого слоя и вложенных. PNG, JPG, WEBP и SVG скачиваются прямо отсюда.

Шестерёнка открывает настройки: «Единицы» px или rem, формат цвета HEX, RGB или HSL и «Подставлять токены». Настройки запоминаются на устройстве. Форматы картинок и PDF описаны на странице экспорт PNG, SVG и PDF.

Как получить код выбранного слоя

Код одного слоя берут прямо из вкладки, без выгрузки всего макета. Порядок одинаковый для фрейма и для компонента.

1. 1

   Выделите слой

   Выберите фрейм или компонент на холсте.

2. 2

   Включите режим «Код»

   Нажмите ⇧D или выберите «Код» в переключателе режимов справа на панели инструментов.

3. 3

   Выберите язык

   В разделе «Код» выберите «CSS», «React + CSS Modules», «React + Tailwind», «React + inline-стили» или «Токены».

4. 4

   Заберите файл

   Откройте нужный файл вкладкой и скопируйте или скачайте его.

Во что превращается макет в коде

Генератор переносит в код не только внешний вид, но и устройство макета. Как эти понятия работают в редакторе, описано на страницах автолейаут и переменные и режимы.

Разметка семантическая: заголовки, main, header, nav, footer и так далее. Ниже — функция компонента «Карточка» из шаблона «UI-кит». Вложенные экземпляры стали компонентами Avatar, Tag и Button, их свойства — пропсами (color="yellow", kind="outline", showIcon={false}), а свойства самой карточки «Заголовок» и «Описание» — пропсами heading и description.

export function Card({heading, description, className, ...props}: CardProps) {
  return (
    <div className={cx(styles.root, className)} {...props}>
      <header className={styles.header}>
        <div className={styles.author}>
          <Avatar size={40} className={styles.avatar}>МО</Avatar>
          <div className={styles.name}>
            <span className={styles.nameTitle}>Мария Орлова</span>
            <span className={styles.nameSubtitle}>Арт-директор</span>
          </div>
        </div>
        <Tag color="yellow">На проверке</Tag>
      </header>
      <div className={styles.text}>
        <h3 className={styles.heading}>{heading}</h3>
        <p className={styles.description}>{description}</p>
      </div>
      <div className={styles.actions}>
        <Button showIcon={false} className={styles.button}>Открыть</Button>
        <Button kind="outline" showIcon={false} className={styles.button}>Позже</Button>
      </div>
    </div>
  );
}

Сгенерированный код проверен тестами на всех шаблонах: он проходит проверку TypeScript в строгом режиме и рендерится без предупреждений React.

Экспорт в React: проект целиком

Вкладка «Код» работает с одним слоем. Чтобы забрать весь макет, выберите «Экспорт в React…» в меню «Файл»: получится ZIP-архив с проектом на Vite, React 19 и TypeScript 5.9.

1. 1

   Выберите, что выгрузить

   «Выделенное», «Страница» или «Все страницы».

2. 2

   Выберите оформление

   CSS Modules, Tailwind CSS 4 или inline-стили.

3. 3

   Запустите проект

   Распакуйте архив и выполните npm install, затем npm run dev.

Что лежит в проекте:

• сброс стилей;
• токены: src/tokens.css и src/tokens.ts, для Tailwind ещё src/theme.css;
• страница на каждый экран;
• README на русском языке.

Чего в коде пока нет

Если проект на другом стеке, из вкладки «Код» пригодятся токены, размеры и ассеты, а разметку придётся писать вручную.

• Кода для iOS (Swift), Android и Vue: только CSS, React и токены.
• Статуса «Ready for dev», своих категорий аннотаций и расширения для VS Code.
• Полного повторения Dev Mode из Figma: есть ровно то, что описано на этой странице.