Опубликовано 2026-10-12 · Автор Команда MarkupGen
HTML5-баннеры из Figma с MarkupGen: дизайн, конвертация и правка в Studio Editor
В Figma баннер выглядит готовым задолго до того, как он готов в коде. Кому-то всё равно приходится заново собирать заголовок, фото товара и кнопку на HTML и CSS — и повторять это, когда меняется текст, кнопка сдвигается на 8px или кампании нужны ещё три размера. Большая часть времени уходит на мелкие правки, а не на первую сборку.
MarkupGen сокращает обе части работы. Он конвертирует фрейм Figma в HTML и CSS, а затем позволяет продолжать визуально дорабатывать результат в Studio Editor, не возвращаясь в Figma ради каждой мелочи. В этой статье разобран весь процесс Figma to HTML5 banner и прямо сказано, что инструмент умеет, а что нет.
Макет Figma → плагин MarkupGen → генерация HTML/CSS → Studio Editor → проверка → экспорт
Конвертация макетов Figma в HTML5-баннеры
Процесс начинается в плагине MarkupGen для Figma. Выберите фрейм баннера и отправьте его. Структура, тексты и изображения фрейма появятся в рабочем пространстве MarkupGen в виде проекта, где вы и генерируете код.
Баннер конвертируется так же, как любой другой фрейм, поэтому привычные элементы баннера сохраняются:
- Заголовки и рекламный текст остаются настоящим текстом, а не частью склеенной картинки.
- Изображения товара и фоновые изображения экспортируются вместе с проектом.
- CTA-кнопки сохраняют заливку, скругление и надпись.
- Фигуры, слои, типографика и отступы считываются из файла дизайна, а не оцениваются по скриншоту.
Результат — это отправная точка, обычно близкая к макету, а не гарантия попиксельной копии. Нестандартные эффекты, пользовательские шрифты, которых нет в Google Fonts, и сильно перекрывающиеся слои стоит проверять в первую очередь. Подробнее о том, как читается макет, — в статье как работает конвертация Figma в HTML/CSS в MarkupGen.
Правка баннеров прямо в Studio Editor
Именно это делает MarkupGen чем-то большим, чем генератор кода. Сгенерированный код редко бывает финальной версией баннера: юридическая строка стала длиннее, кнопке нужно больше воздуха, клиент просит увеличить логотип. В большинстве инструментов это означает править CSS вручную или возвращаться в Figma и конвертировать заново.
В MarkupGen вы включаете Визуальный редактор на панели инструментов проекта — режим редактирования студии проекта — и работаете с самим баннером.
Настоящий скриншот Визуального редактора MarkupGen (интерфейс на английском), здесь открыт макет страницы товара. При выборе элемента открываются поля его содержимого, ссылки и расположения.
Выберите любой элемент в предпросмотре или в дереве HTML, и инспектор покажет, что в нём можно изменить:
| Что нужно исправить | Что даёт Studio Editor |
|---|---|
| Текст и ссылки | Правка текста на месте (двойной клик в предпросмотре), ссылка и открытие в новой вкладке |
| Размер и отступы | Ширина, высота, margin и padding по каждой стороне |
| Положение и выравнивание | Выравнивание внутри flex- или grid-родителя, порядок, z-index, поворот |
| Типографика | Размер шрифта, насыщенность, высота строки и выравнивание текста |
| Внешний вид | Цвет фона и текста, прозрачность, рамка, скругление, тень и фильтры — размытие, яркость и другие |
| Видимость | Скрыть, показать или удалить элемент |
Что это значит на практике:
- Меняйте раскладку и положение поддерживаемых элементов, не открывая таблицу стилей.
- Точно настраивайте размеры, отступы и выравнивание числовыми значениями.
- Вносите визуальные правки без возврата в Figma ради каждой мелочи.
- Сразу видьте результат, отменяйте или повторяйте шаг и сохраняйте, когда всё выглядит как нужно.
- Сокращайте хождение между дизайном и кодом. Каждое изменение записывается в HTML и CSS, поэтому экспортируемый код — это тот самый баннер, который вы видите.
Два честных ограничения. Правка выполняется выбором элемента и изменением его свойств в инспекторе — это не холст со свободным перетаскиванием. И правки односторонние: они меняют сгенерированный код, а не ваш файл Figma.
Studio Editor входит в тариф Free, где он использует общую месячную квоту генераций, и не ограничен на платных тарифах.
Несколько вариантов генерации кода
Для вывода «Адаптивный HTML» вы выбираете CSS-инструментарий, на котором будет написан код:
- Vanilla CSS — чистый CSS без зависимостей; проще всего вставить в рекламный слот или блок CMS.
- Tailwind CSS — утилитарные классы; удобно, если баннер живёт на сайте с Tailwind.
- Bootstrap — для команд, чьи страницы уже подключают Bootstrap.
Все три доступны на тарифе Free. Bulma, Materialize и Pico CSS тоже поддерживаются и требуют платного тарифа. Если сомневаетесь в выборе, сравнение есть в статье Vanilla CSS vs Bootstrap vs Tailwind. Для отдельного баннера Vanilla CSS обычно даёт самый лёгкий и переносимый файл.
Тариф Free включает 5 генераций кода в месяц; у платных тарифов дневные квоты.
Предпросмотр, ИИ-оценка и доработка
После генерации сравните предпросмотр с изображением исходного макета в рабочем пространстве и исправьте замеченное в Studio Editor.
На платных тарифах ИИ-оценка даёт второе мнение. Она сравнивает сгенерированный результат с исходным макетом и возвращает балл соответствия от 0 до 10 по шести взвешенным критериям — раскладка и структура, отступы и выравнивание, типографика, цвет, содержимое и изображения, размеры и эффекты — вместе со списком отличий и редактируемым промптом для повторной генерации.
Относитесь к баллу как к подсказке, куда смотреть. Он измеряет визуальное соответствие макету и не подтверждает, что баннер попиксельно точен, готов к продакшену или одинаково выглядит во всех браузерах. В статье как оценивать HTML, сгенерированный ИИ описаны проверки, которые стоит сделать вручную.
Экспорт и использование HTML5-баннера
Когда баннер готов, сохраните его и скачайте HTML вместе с изображениями и шрифтами в .zip или скопируйте код. На платных тарифах тот же макет можно экспортировать и как компоненты React, Vue, Svelte или Angular.
Полезно разделять три вещи, которые часто называют «HTML5-баннером»:
| Что это | В MarkupGen | |
|---|---|---|
| HTML/CSS-баннер | Раскладка баннера в виде разметки и стилей | Да — это основной сценарий |
| Анимация и интерактив | Движение, состояния при наведении, поведение на скриптах | Частично — готовые анимации появления (fade, slide, zoom, flip), которые проигрываются, когда элемент попадает в область просмотра, с настройкой длительности, задержки и easing; редактора таймлайна и ключевых кадров нет |
| Пакет для рекламной платформы | ZIP по спецификации конкретной сети: отслеживание кликов, лимиты веса, правила именования | Нет — вы готовите и проверяете его сами |
То есть на выходе — чистая разметка баннера, которая принадлежит вам. Если баннер идёт в рекламную сеть, добавьте после экспорта код перехода по клику и упаковку этой платформы и прогоните его через её валидатор. Если баннер размещается на вашем сайте, лендинге или в CMS, экспортированных HTML и CSS часто достаточно. Для баннеров в письмах см. Email Ready.
Кому помогает этот процесс
- Фронтенд-разработчики пропускают пересборку и тратят время на то, что требует решений. См. MarkupGen для разработчиков.
- Дизайнеры и креативные команды исправляют отступы и текст на настоящем баннере вместо того, чтобы писать запрос на правку.
- Команды digital-маркетинга превращают макет кампании в рабочую разметку, не дожидаясь окна у разработки. См. MarkupGen для маркетинговых команд.
- Агентства и команды рекламного продакшена обрабатывают раунды правок от клиента как редактирование, а не как пересборку. См. MarkupGen для агентств.
Процесс вкратце
- Создайте баннер в Figma, по одному фрейму на размер.
- Передайте фрейм через плагин MarkupGen для Figma.
- Сгенерируйте HTML и CSS в нужном инструментарии.
- Доработайте баннер в Studio Editor.
- Проверьте предпросмотр по макету и оцените его с помощью ИИ-оценки, если она входит в ваш тариф.
- Экспортируйте код и протестируйте его там, где баннер будет показываться.
Частые вопросы
Экспортирует ли MarkupGen ZIP, готовый для Google Ads или другой рекламной сети? Нет. MarkupGen экспортирует HTML, CSS, изображения и шрифты баннера. Отслеживание кликов, лимиты веса и правила упаковки конкретных рекламных платформ не обрабатываются, их нужно добавить и проверить самостоятельно.
Можно ли анимировать баннер? Можно применить готовые анимации появления — fade, slide, zoom, flip, — которые проигрываются, когда элемент попадает в область просмотра, и задать длительность, задержку и easing. Редактора таймлайна и ключевых кадров нет.
Доступен ли Studio Editor на тарифе Free? Да. Визуальная правка входит в тариф Free и использует его месячную квоту генераций. Для ИИ-оценки нужен платный тариф.
Синхронизируются ли мои правки обратно в Figma? Нет. Правки меняют только сгенерированные HTML и CSS. Файл Figma не изменяется.
Будет ли баннер точно совпадать с макетом? Обычно он близок к нему, но точное совпадение не гарантируется. Сравните предпросмотр с оригиналом и исправьте отличия в Studio Editor.
Превратите макеты Figma в редактируемые HTML5-баннеры
Проектируйте в Figma. Генерируйте код в MarkupGen. Дорабатывайте баннер в Studio Editor.