Как превратить дизайн Figma в чистые HTML и CSS (пошаговое руководство)

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

Почему ручная передача из Figma в HTML происходит медленно

Большая часть времени, потраченного на передачу проекта, уходит не на творческую работу, а на перевод:

• Чтение настроек Auto Layout и ручная реализация их в виде правил Flexbox.
• Повторное измерение отступов, промежутков и размеров шрифта, которые уже определены в файле Figma.
• Определение того, где должны находиться адаптивные брейкпоинты, поскольку фреймы Figma обычно имеют одну фиксированную ширину.
• Очистка разметки, чтобы она не превращалась в десять уровней вложенных тегов <div> без всякого семантического смысла.

Ничто из этого не сложно, но всё это однообразно, а именно в однообразной ручной работе и закрадываются ошибки и несоответствия.

Шаг 1: экспортируйте фрейм из Figma

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

Шаг 2: дайте структуре превратиться в код самой

Именно здесь исчезает большая часть ручной работы. Вот несколько примеров того, что переводится автоматически:

• Auto Layout → Flexbox. Свойства Auto Layout в Figma (направление, промежуток, отступы, выравнивание) напрямую преобразуются в эквивалентную структуру CSS Flexbox вместо того, чтобы подбираться на глаз вручную.
• Ограничения → адаптивные брейкпоинты. Ограничения изменения размера макета определяют гибкие, адаптивные правила вместо одной страницы с фиксированной шириной.
• Слои → семантический HTML. Вывод отдаёт предпочтение осмысленным элементам вместо глубоко вложенного, безымянного нагромождения <div>: блок страницы становится <section>, панель навигации — <nav>, заголовок — <h1>–<h3> в правильном порядке, абзац — <p>, кнопка — <button> или <a> в зависимости от поведения, изображение — <img> с атрибутом alt. Универсальный контейнер для вёрстки, не имеющий собственного смысла, так и остаётся <div> — не для каждого слоя Figma есть готовый семантический тег, поэтому выбор нужного зависит от того, что на самом деле означает контент, а не от фиксированной таблицы соответствий.

Шаг 3: выберите формат вывода

Не каждому проекту нужен один и тот же код. В зависимости от стека, в который вы поставляете результат, можно экспортировать как:

• Обычный HTML/CSS — для статичных сайтов или проектов без этапа сборки.
• Tailwind CSS — утилитарные классы, сгенерированные из реальных токенов отступов, цветов и типографики дизайна; подробнее в статье Figma в Tailwind CSS: практическое руководство по конвертации.
• React — компоненты, которые можно сразу добавить в существующее приложение; подробнее в статье Figma в React: практический рабочий процесс для разработчиков.

Шаг 4: доработайте перед экспортом

Автоматическая конвертация проделывает большую часть пути, но переход от дизайна к коду редко бывает механическим на 100% — тексты могут потребовать правки, а какая-то секция — ручной корректировки макета. Редактор позволяет визуально доработать контент, шрифты и вёрстку перед генерацией финального пакета, и каждый экспорт автоматически получает оценку, чтобы вы могли сразу увидеть, готов ли результат к продакшену.

Адаптивность: это не просто копирование пиксельных значений с десктопа

Фрейм Figma обычно представляет одну конкретную ширину — например, десктопный фрейм 1440px, возможно, рядом с отдельным мобильным фреймом. Это не значит, что нужно зашивать эту ширину в CSS и сжимать всю страницу с помощью transform: scale(). Figma сама по себе не генерирует адаптивный CSS — она только даёт сигналы, а превращение их в реальное адаптивное поведение всё равно остаётся задачей разработчика или системы конвертации:

• Параметры hug / fill / fixed в Auto Layout показывают, должен ли элемент сжиматься по содержимому или заполнять контейнер — это основа для выбора между width: auto, width: 100% / flex: 1 или фиксированным max-width.
• Ограничения (constraints) (закрепление слева/справа, масштабирование вместе с контейнером...) добавляют поведение для элементов, которыми не управляет Auto Layout.
• Медиазапросы всё равно необходимы на любой ширине, где макет действительно меняет форму — колонки складываются в одну, навигация схлопывается, — потому что фрейм Figma фиксирует лишь несколько конкретных размеров вьюпорта, а не весь диапазон между ними.

Цель — воспроизвести адаптивное поведение, заложенное в дизайне, на всех размерах экрана, а не скопировать точные пиксельные значения того фрейма, который случайно оказался открыт.

Что на самом деле означает «чистый» код

«Чистый код» — это не просто рекламная фраза, а конкретные, проверяемые свойства:

1. Никаких лишних оберточных <div> вокруг одиночных элементов.
2. Правильная иерархия заголовков (h1 → h2 → h3) вместо того, чтобы всё было стилизовано под заголовок.
3. Семантические теги там, где они уместны, что также совпадает с тем, что нужно поисковым системам и программам чтения с экрана для понимания страницы.

Последний пункт важнее, чем может показаться: разметка, которую легко разобрать браузеру и краулеру, — это также разметка, которую легче прочитать следующему разработчику. Именно на этом структурно и держится большая часть доступности; о том, что всё ещё требует ручной проверки помимо семантических тегов — ARIA, формы, контраст, навигация с клавиатуры — читайте в статье Figma в доступный HTML.

Небольшой пример: от Auto Layout к реальной разметке

Возьмём простую карточку — иконка, заголовок и ссылка «Узнать больше», расположенные с помощью Auto Layout (вертикально, промежуток 16px, отступы 24px). При ручной пересборке легко скатиться к стопке безымянных <div>. При конвертации из реальной структуры фрейма та же карточка получается такой:

<article class="feature-card">
  <img src="/icons/rocket.svg" alt="" class="feature-card__icon" />
  <h3 class="feature-card__title">Быстрая настройка</h3>
  <a href="/docs/getting-started" class="feature-card__link">Узнать больше</a>
</article>

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

Стоит обратить внимание на несколько деталей: карточка — это <article>, а не универсальный контейнер, потому что она представляет собой самостоятельный фрагмент контента. У иконки атрибут alt="", потому что она декоративная — текст заголовка уже передаёт суть карточки. «Узнать больше» — это настоящая ссылка <a href>, а не <div> с обработчиком клика, потому что она ведёт на другую страницу. Направление vertical и промежуток 16px в Auto Layout напрямую преобразуются в flex-direction: column и gap: 16px — без подбора на глаз. Это самое распространённое соответствие, но есть и другие моменты, которые важно не упустить (отступы, выравнивание, hug/fill-размеры, вложенный Auto Layout); полное соответствие смотрите в статье Figma Auto Layout в CSS: как это преобразуется в Flexbox (и когда нужен Grid).

Частые ошибки при конвертации Figma в HTML

При ручной конвертации дизайна Figma в код снова и снова повторяются одни и те же ошибки:

• Превращение каждого слоя в <div>. Игнорирование того, чем на самом деле является контент (навигация, заголовок, кнопка...), усложняет понимание разметки как для программ чтения с экрана, так и для поисковых систем.
• Злоупотребление position: absolute. Такой подход воспроизводит точную пиксельную позицию с холста Figma, но ломается, как только меняется контент или размер экрана.
• Игнорирование Auto Layout и подбор отступов на глаз вручную. Это гораздо более подвержено ошибкам и сложнее в поддержке, чем прямой перевод из свойств, уже заданных в файле дизайна.
• Жёсткое задание десктопных размеров и отношение к адаптивности как к второстепенной задаче, вместо того чтобы с самого начала выстраивать гибкий макет.
• Хаотичная иерархия заголовков — выбор размера шрифта по тому, как он выглядит, вместо правильного порядка h1 → h2 → h3.
• Лишние оберточные <div> вокруг элемента, который уже осмыслен сам по себе, или путаница между «выглядит одинаково визуально» и «означает то же самое семантически».

Где это вписывается в реальный рабочий процесс

Этот процесс не призван заменить суждение разработчика — он убирает механический этап перевода, чтобы это суждение можно было направить на то, что действительно в нём нуждается: детали взаимодействия, крайние случаи и интеграцию страницы в более крупную кодовую базу. Смотрите, как это сравнивается с ручным написанием того же фрейма, или как агентства встраивают это в рабочий процесс с клиентами. Если хотите увидеть весь процесс из четырёх шагов — экспорт, сборка, доработка, экспорт — в самом продукте, можно бесплатно попробовать его на своём файле Figma.

FAQ

Как конвертировать Figma в HTML? Выберите фрейм, который хотите конвертировать, изучите структуру его слоёв и настройки Auto Layout, а затем переведите их в семантический HTML и соответствующий CSS — Auto Layout превращается во Flexbox, ограничения — в адаптивное поведение. Это можно сделать вручную или с помощью инструмента автоматизации вроде MarkupGen, чтобы убрать однообразную работу по переводу.

Можно ли конвертировать Figma в адаптивные HTML и CSS? Да, но не полностью автоматически. Auto Layout и ограничения дают сигналы о поведении при изменении размера (сжатие, заполнение, фиксированный размер), но определение конкретных брейкпоинтов и проверка макета на разных размерах экрана всё равно требует интерпретации со стороны человека или системы конвертации.

Во что превращается Auto Layout в Figma при конвертации в CSS? В основном в CSS Flexbox: направление превращается в flex-direction, промежуток — в gap, отступы — в padding, выравнивание — в justify-content/align-items. Более подробное соответствие, включая случаи, когда вместо Flexbox нужен CSS Grid, смотрите в статье Figma Auto Layout в CSS: как это преобразуется в Flexbox (и когда нужен Grid).

Нужно ли использовать семантический HTML при конвертации Figma в HTML? Да. Семантический HTML (nav, article, button, правильная иерархия заголовков...) помогает программам чтения с экрана и поисковым системам корректно понимать структуру страницы — это не просто вопрос эстетики кода.

Можно ли автоматизировать конвертацию Figma в HTML? Большую часть — да: чтение структуры слоёв, преобразование Auto Layout во Flexbox, генерация брейкпоинтов на основе ограничений. Но финальная проверка (контент, крайние случаи, интеграция в кодовую базу) всё равно требует участия человека.

Хотите сразу перейти к конвертации своего дизайна? Конвертируйте дизайн Figma в HTML/CSS с помощью MarkupGen →