Как экспортировать макет из Figma в код или слои для верстки

Экспортирование макета из Figma в код или слои для верстки выполняется через встроенные инструменты экспорта, плагины и генераторы кода, которые конвертируют дизайн в HTML, CSS, React-компоненты или другие форматы, а также через ручное извлечение свойств слоёв (размеры, цвета, шрифты) для передачи верстальщику. Figma позволяет экспортировать как отдельные элементы, так и целые страницы с сохранением структуры слоёв и стилей.

Зачем нужен экспорт макета из Figma в код

Передать дизайн-макет разработчикам с точными спецификациями размеров, отступов, цветов и типографики без необходимости ручного измерения каждого элемента.
Ускорить процесс верстки, автоматизировав генерацию HTML и CSS кода из дизайна вместо ручного написания разметки с нуля.
Синхронизировать дизайн-систему между дизайнерами и разработчиками, обеспечивая единообразность визуальных элементов на всех страницах.
Экспортировать дизайн в формат, который может быть интегрирован в React, Vue, Angular или другие фреймворки для ускорения разработки приложений.
Получить исходники слоёв в виде SVG, PNG или других графических форматов для использования в коде без необходимости пересоздания графики.
Документировать дизайн-спецификации в машиночитаемом формате для автоматизированного тестирования соответствия разработанного интерфейса дизайну.
Снизить погрешность при передаче данных между дизайном и разработкой, устранив ошибки интерпретации визуальных свойств.

Пошаговая инструкция по экспорту макета из Figma

Откройте файл Figma с готовым макетом в браузере на сайте figma.com или в приложении Figma для рабочего стола.
Убедитесь, что все слои в макете правильно названы и структурированы в панели слоёв слева (используйте понятные названия вроде header, button-primary, card вместо Group 1, Shape 2).
Для экспорта отдельного элемента выделите его на холсте одним кликом левой кнопкой мыши.
Откройте правую панель инспектора свойств, нажав на выделённый элемент (если панель не видна, нажмите I на клавиатуре).
Прокрутите правую панель вниз до раздела Export и нажмите кнопку + Export.
Выберите формат экспорта из выпадающего меню: PNG (растровое изображение), SVG (векторное изображение), PDF (документ) или JPG (растровое сжатое изображение).
Установите масштаб экспорта (обычно 1x для стандартного размера, или 2x для экранов высокого разрешения) в поле масштаба рядом с форматом.
Добавьте дополнительные форматы экспорта, нажав снова + Export, если нужно получить один элемент в нескольких форматах одновременно.
Нажмите кнопку Export [имя элемента] внизу правой панели, чтобы загрузить файл на ваш компьютер.
Для экспорта целой страницы (вместе со всеми слоями) выделите фрейм верхнего уровня, к которому относятся все элементы (например, основной артборд), и повторите шаги 4–9.
Если нужно экспортировать дизайн в HTML и CSS код, используйте плагины Figma: откройте Plugins в левом меню, найдите плагин вроде Anima, Locofy, Penpot Export или HTML Export.
Установите выбранный плагин, нажав Install, и дождитесь завершения процесса установки.
Вернитесь в Figma и откройте плагин из Plugins → Installed plugins → [имя плагина].
Выделите на холсте фрейм или группу элементов, которые нужно преобразовать в код.
В окне плагина выберите целевой язык: HTML + CSS, React, Vue, Angular или другой доступный формат.
Нажмите кнопку Export или Generate Code в окне плагина.
Дождитесь генерации кода (это может занять от нескольких секунд до минуты в зависимости от размера макета).
Скопируйте сгенерированный код из окна плагина, нажав Copy или Download, чтобы сохранить его в файл на компьютере.
Для экспорта дизайн-спецификаций (размеры, отступы, цвета) вручную используйте встроенный инспектор Figma: выделите элемент, откройте правую панель и выпишите значения Width, Height, Padding, Gap, Fill (цвет), Font Size и другие параметры.
Передайте спецификации верстальщику документом (Google Doc, Notion, Markdown) или используйте интеграцию Figma с системой управления дизайном (например, Zeplin, Abstract) для автоматической генерации спецификаций.
Если используется версия Figma с поддержкой Dev Mode (для подписчиков Pro и выше), переключитесь на вкладку Dev в правой панели, чтобы увидеть готовые CSS-свойства, которые можно скопировать напрямую в код.
Проверьте экспортированный код или изображения на корректность: откройте файл в браузере (для HTML) или в приложении верстки, и убедитесь, что все элементы, цвета и размеры соответствуют оригинальному макету Figma.
Если код требует доработки, отредактируйте его в текстовом редакторе (VS Code, Sublime Text) и добавьте недостающие функции, интерактивность или дополнительные стили.

Часто задаваемые вопросы

Могу ли я экспортировать только определённые элементы макета, не всю страницу? Да, выделите нужный элемент на холсте и используйте Export в правой панели инспектора — экспортироваться будет только выбранный элемент или группа элементов.

Что делать, если сгенерированный код из плагина не соответствует макету Figma? Проверьте правильность названия слоёв и структуру макета (используйте компоненты вместо простых групп), установите последнюю версию плагина и попробуйте экспортировать снова; если проблема сохраняется, отредактируйте код вручную или используйте другой плагин.

Есть ли бесплатные инструменты для экспорта кода из Figma, или все плагины платные? Многие плагины имеют бесплатный уровень с ограничениями (например, Anima, Locofy); полный функционал обычно доступен только на платных подписках, но базовый экспорт в SVG и PNG бесплатен встроенными инструментами Figma.

Дизайн и Графика