Figma в код: поддержка React, Vue и CSS-фреймворков в MarkupGen

Одно из самых трудоёмких решений при передаче дизайна в разработку — вовсе не то, хорошо ли он выглядит, а на каком стеке должен работать сгенерированный код. Команде на React нужен JSX с типизированными props, команде на Vue — полноценный Single File Component, а для статичной посадочной страницы фреймворк может вообще не понадобиться. MarkupGen не привязывает вас к одному выходному стеку на весь проект — формат вывода выбирается для каждого экспорта отдельно, поверх одного и того же дизайна Figma.

Как устроена конвертация

Прежде чем дойти до выбора фреймворка, MarkupGen обрабатывает дизайн в четыре шага:

1. Экспортируйте фрейм из Figma. Плагин MarkupGen для Figma отправляет структуру, стили и изображения выбранного фрейма прямо в ваше рабочее пространство — а не скриншот, который потом придётся восстанавливать на глаз.
2. ИИ строит HTML/CSS на основе реального дизайна. Раскладка, отступы, цвет и Auto Layout считываются напрямую из файла Figma, а не угадываются по общему шаблону.
3. Выберите формат вывода. Именно здесь вы указываете фреймворк: обычный HTML/CSS, React, Vue, Svelte, Angular, а для CSS отдельно — Tailwind, Bootstrap, Bulma, Materialize или Pico.
4. Доработайте — и экспортируйте. Перед тем как забрать финальный код, скорректируйте контент, шрифты и раскладку во встроенном визуальном редакторе; автоматическая оценка качества от ИИ сразу покажет, готов ли экспорт к использованию.

Поскольку структура и стили считываются из исходного дизайна один раз, вы можете переключаться между форматами вывода прямо на шаге 3, не пересобирая дизайн заново каждый раз.

Экспорт в React

Выберите React — и MarkupGen соберёт функциональный компонент с JSX, в TypeScript (TSX) или обычном JavaScript (JSX) — в зависимости от переключателя на экране экспорта. Props типизированы, а стили при необходимости можно экспортировать как CSS Modules вместо инлайн-стилей, если вам нужна изоляция на уровне отдельного компонента, а не одна общая таблица стилей. Auto Layout из Figma сопоставляется напрямую с Flexbox в стилях компонента, так что вы получаете компонент с уже встроенной адаптивной структурой, а не статичный блок HTML с наспех прикрученными props. Подробнее о полном рабочем процессе — в статье Figma в React: практический рабочий процесс для разработчиков.

Экспорт в Vue

Выберите Vue — и на выходе получите полноценный Single File Component Vue 3 (.vue), с объявлением props через defineProps и привычной структурой <template>/<script>/<style>, которой уже следует большинство существующих кодовых баз на Vue. Как и в случае с React, раскладка, сгенерированная из Auto Layout, сохраняет структуру Flexbox в стилях компонента, а имя компонента и переключение между TypeScript и обычным JavaScript задаются на том же экране экспорта. Подробнее о том, что входит в экспорт в Vue, смотрите на странице конвертации Figma в Vue.

А ещё Svelte и Angular

Помимо React и Vue, MarkupGen также экспортирует в Svelte (4/5) и Angular (17+, как отдельный standalone-компонент) — это пригодится, если ваша команда работает не с двумя самыми популярными стеками, но всё равно хочет получить компонент, а не статичный HTML.

CSS-фреймворки для каждого компонента

Если вам не нужен компонент под конкретный JS-фреймворк, можно экспортировать сразу в HTML/CSS и выбрать CSS-фреймворк в настройках проекта: обычный CSS, Tailwind, Bootstrap, Bulma, Materialize или Pico. ИИ пересобирает раскладку под реальную сетку, отступы и классовые соглашения выбранного фреймворка, а не просто добавляет универсальный класс, оставляя доработку вам. Подробный разбор компромиссов по всем шести вариантам — размер вывода, точность соответствия дизайну, кривая обучения — смотрите в статье 6 CSS-фреймворков, которые поддерживает MarkupGen.

Что выбрать для вашего проекта

• Работаете внутри существующей кодовой базы на React или Vue? Экспортируйте сразу в компоненты React или Vue, в сочетании с Tailwind или CSS Modules — в зависимости от принятых в команде соглашений.
• Нужна просто статичная страница без сборщика? Обычный HTML/CSS или Pico — без зависимости от рантайма.
• Нужен рабочий интерфейс быстро, с готовыми компонентами (навбары, модальные окна, формы)? Bootstrap или Materialize.
• Команда работает на Svelte или Angular? Оба фреймворка экспортируются как полноценные компоненты, а не как результат ручной переделки HTML.

Единственно верного ответа на все проекты не существует — суть в том, что MarkupGen позволяет выбирать фреймворк для каждого экспорта отдельно, на основе одного и того же исходного дизайна, вместо того чтобы привязывать вас к одному стеку. Попробуйте бесплатно на своём файле Figma, чтобы увидеть код именно для того стека, с которым вы работаете.