Руководство пользователя MarkupGen
Всё, что нужно знать, чтобы превратить дизайны Figma в готовый к продакшену код — функции, тарифы, лимиты и как получить лучший результат.
Добро пожаловать в MarkupGen
Что такое MarkupGen, для кого он создан и чем отличается от других инструментов.
Что такое MarkupGen?
MarkupGen — это платформа, которая превращает дизайны Figma в готовый к продакшену фронтенд-код. Сопутствующий плагин для Figma экспортирует фрейм, над которым вы работаете; MarkupGen конвертирует его в HTML и CSS, а на платных тарифах — в компонент React, Vue, Svelte или Angular. Встроенный редактор с двумя режимами (Code Editor и Visual Editor с редактированием по клику) позволяет доработать результат перед экспортом.
Для кого это
Для фронтенд-разработчиков и фрилансеров, которые не хотят вручную переносить каждый макет из файла дизайна, небольших агентств, которым нужно быстро превращать клиентские дизайны в рабочие страницы, и всех, кто создаёт HTML-шаблон для email-рассылок, который должен корректно отображаться в Gmail, Outlook и Apple Mail.
Какую проблему решает
Превращение файла Figma в рабочую разметку вручную — это рутинная задача, в которой легко допустить малозаметную ошибку. Базовая конвертация MarkupGen работает на предсказуемом движке на основе правил, который опирается на названия слоёв в вашем Figma-файле и настройки Auto Layout, поэтому один и тот же дизайн каждый раз конвертируется одинаково. Поверх этого работает целенаправленный набор AI-функций — для интерактивности, адаптивных вариантов, оценки качества и исправлений в один клик — именно там, где AI даёт реальную пользу.
Основные сценарии использования
- Конвертация одного фрейма или компонента Figma в отдельную HTML-страницу.
- Создание адаптивной посадочной страницы, которая подстраивается под десктоп и мобильные устройства.
- Генерация HTML-шаблона для email с инлайн-стилями для совместимости с разными почтовыми клиентами.
- Экспорт дизайна в виде компонента React, Vue, Svelte или Angular для вашего проекта (платные тарифы).
- Создание личной или командной библиотеки готовых заготовок с помощью Templates.
Начало работы
От создания аккаунта до просмотра первой сгенерированной страницы.
- 1
Создайте аккаунт
Зарегистрируйтесь через Google в один клик или с помощью email и пароля. При регистрации по email нужно пройти быструю проверку и подтвердить адрес электронной почты, прежде чем войти в систему.
- 2
Войдите в систему
Используйте тот же способ, что и при регистрации. Пять неудачных попыток ввода пароля блокируют аккаунт на 15 минут — в любой момент можно сбросить пароль по email через «Забыли пароль».
- 3
Изучите панель управления
На панели управления вы найдёте кнопку Create from Figma, количество ваших проектов и среднюю AI-оценку качества, быстрый запуск Quick Convert и список недавно обновлённых проектов.
- 4
Разберитесь с рабочими пространствами
Каждый проект находится внутри Workspace — общего пространства для вас и ваших коллег по команде. Внутри проекта можно переключаться между Code Editor (доступен на всех тарифах) и Visual Editor (Starter, Pro, Business).
- 5
Создайте первый проект
Установите плагин MarkupGen из Figma Community, откройте его в Figma, выберите один фрейм или компонент и нажмите Export & Send.
На панели управления MarkupGen появится новый проект.
- 6
Запустите первую конвертацию
Откройте новый проект и нажмите Generate Code. Наблюдайте за процессом: MarkupGen подключается к данным вашего дизайна, анализирует слои, извлекает изображения и пишет HTML/CSS.
Рабочая HTML/CSS-страница и автоматическая оценка качества от 0 до 10.
- 7
Проверьте результат
Используйте вкладку Code для просмотра HTML/CSS/JS в режиме split-view или панель Preview, чтобы проверить отображение на Desktop (1280 px), Tablet (768 px) и Mobile (375 px).
- 8
Экспортируйте код
На любом тарифе доступна загрузка обычного HTML/CSS. На платных тарифах можно экспортировать компонент под конкретный фреймворк или все фреймворки сразу в виде ZIP-архива.
Основные функции
Каждая функция продукта, для какого тарифа она нужна и как она работает.
Импорт через плагин Figma
Экспортирует один выбранный фрейм, компонент или группу из Figma — включая векторные иконки в виде настоящего SVG, фоновые изображения, шрифты и структуру Auto Layout.
Установите из Figma Community, один раз войдите в аккаунт, выберите один фрейм и нажмите Export & Send.
Один фрейм за экспорт — пакетного импорта нескольких фреймов или целой страницы пока нет.
Code Editor
Профессиональный редактор кода в режиме split-view для вашего сгенерированного HTML, CSS и JS с подсветкой синтаксиса и автоформатированием.
Visual Editor
Редактирование по клику прямо на живом предпросмотре: инспектирование элементов, редактирование стилей перетаскиванием, инлайн-редактирование текста, безопасное управление ссылками и показ/скрытие элементов с анимацией переходов.
Требует активной платной подписки, проверка выполняется на сервере.
AI-преобразование в семантические элементы
Превращает статичные блоки разметки в настоящие интерактивные элементы форм — кнопки, поля ввода, текстовые области, select — с помощью AI.
Три уровня точности:
Анализирует текущую HTML-структуру, стили и изображение предпросмотра.
Сверяется с исходным дизайном для дополнительной точности.
Полный структурный анализ для точной классификации сложных компонентов.
AI JavaScript и интерактивные компоненты
Распознаёт UI-паттерны — слайдеры, карусели, аккордеоны, модальные окна, вкладки, валидацию форм — и генерирует для них рабочий JS и CSS.
AI-генератор адаптивной вёрстки
Перестраивает десктопную конвертацию в оптимизированную вёрстку под другой размер экрана с наглядным сравнением «до/после».
Поддерживает два направления — мобильное и десктопное — с настраиваемой контрольной точкой (320–2000 px).
AI-оценка и сравнение качества
Оценивает сгенерированный код от 0 до 10 в сравнении с исходным дизайном по шести взвешенным критериям: макет, отступы, типографика, цвет, содержимое и детали.
Цветовая шкала оценок
Отлично
Почти полностью совпадает с исходным дизайном.
Хорошо
В целом близко, с несколькими заметными отличиями.
Требует доработки
Значительные отличия от исходного дизайна.
Умное исправление кода в один клик
Применяет точечные AI-патчи для расхождений, найденных при оценке качества, не затрагивая остальной код.
Автоматическая проверка и валидация кода
Проверяет и исправляет ошибки синтаксиса в сгенерированном HTML/CSS перед сохранением.
Приоритетная высокоскоростная обработка
Более высокие лимиты генерации в минуту и в день, а на тарифе Business — ещё и более быстрая обработка.
Экспорт компонентов
Позволяет скачать сгенерированный дизайн в виде обычного HTML/CSS, компонента под один фреймворк или полного набора для нескольких фреймворков.
React (JSX/TSX), Vue 3 SFC, Svelte 5 или Angular Standalone, а также ZIP-архив и опция тестирования в email-клиентах.
Форматы CSS-фреймворков
Генерирует CSS в одном из шести стилей: Vanilla, Tailwind, Bootstrap, Bulma, Materialize или Pico CSS.
Vanilla, Tailwind и Bootstrap доступны на всех тарифах. Bulma, Materialize и Pico CSS требуют платного тарифа.
Режимы вывода
Standard Web Page (прямая конвертация во Flexbox/Grid), Responsive Layout (гибкая вёрстка под несколько экранов) или Email Template (таблицы с инлайн-CSS для Gmail, Outlook и Apple Mail).
Режим Email Template не может воспроизвести поворот, нестандартные режимы наложения или эффекты тени/размытия — вместо этого они упрощаются или растрируются в изображение.
Templates
Позволяет отметить любой из ваших проектов как повторно используемый Template, который отображается в галерее с поиском для вашего Workspace.
Процесс Figma в код
Как подготовить, конвертировать и проверить дизайн от начала до конца.
Чистая Figma на входе — чистый код на выходе
Это не просто пожелание — так устроен сам движок. Семантические HTML-теги, доступные подписи и уровни заголовков определяются напрямую по названиям слоёв в вашем Figma-файле и структуре Auto Layout. Файл с описательными названиями и последовательным использованием Auto Layout заметно превзойдёт по качеству конвертации файл, полный сгруппированных как попало фигур с названиями по умолчанию вроде «Rectangle 4».
Подготовка файла Figma
Называйте слои по смыслу — «Header», «Add to Cart Button», «Hero Image» — а не автоматически сгенерированными названиями Figma. Используйте Auto Layout везде, где можно: фреймы с Auto Layout напрямую конвертируются в CSS Flexbox, а фреймы без него экспортируются как блоки фиксированного размера. Держите отдельные фреймы значительно ниже примерно 2000 слоёв и 120 мегапикселей отрисовываемой области — разбивайте крупные дизайны на фреймы меньшего размера.
Импорт
Экспорт выполняется через плагин Figma — по одному фрейму, компоненту или группе за раз. Сейчас нет способа импортировать несколько фреймов или целую страницу за одно действие — конвертируйте каждый фрейм как отдельный проект MarkupGen.
Параметры конфигурации
Выберите режим вывода (Standard Web Page, Responsive Layout или Email Template), CSS-фреймворк (Vanilla, Tailwind и Bootstrap доступны на всех тарифах; Bulma, Materialize и Pico CSS — на платных) и формат изображений для экспортируемых ассетов (Original, PNG, AVIF, WebP или JPG).
Проверка сгенерированного HTML
Движок выдаёт настоящие семантические теги — header, nav, main, footer, aside, article, section — на основе названий ваших слоёв, при этом уровни заголовков определяются по размеру и насыщенности шрифта. Кнопки только с иконкой получают настоящие ARIA-подписи, содержательные изображения — описательный alt-текст, а декоративные или векторные изображения корректно получают пустой alt с aria-hidden.
Проверка CSS
Фреймы с Auto Layout превращаются во Flexbox с соответствующими отступами между элементами (gap), внутренними отступами (padding) и выравниванием. Фреймы без Auto Layout сохраняют фиксированные пиксельные размеры и позицию из вашего файла Figma.
Адаптивное поведение
Базовая конвертация точно повторяет ваш фрейм Figma при одном фиксированном размере — сама по себе она не адаптивна. Чтобы получить вёрстку, которая подстраивается под разные устройства, выбирайте режим вывода Responsive или используйте AI-генератор адаптивной вёрстки (направления mobile и desktop).
Типографика, цвета, отступы, изображения и иконки
Уровни заголовков определяются по размеру и насыщенности шрифта. Цвета считываются напрямую из заливок в Figma. Отступы следуют настройкам gap, padding и выравнивания в Auto Layout, либо фиксированным позициям, если Auto Layout не используется. Изображения экспортируются в выбранном формате; иконки по возможности извлекаются как настоящий SVG, а сложные заливки или маски растрируются в виде PNG-композитов.
Компоненты, вёрстка и ограничения
Компоненты и наборы компонентов Figma считываются при экспорте, но MarkupGen пока не воссоздаёт единое переиспользуемое определение компонента для каждого компонента Figma — каждая конвертация представляет собой самостоятельную страницу или фрагмент. Вёрстка строится на основе Auto Layout и абсолютных ограничивающих рамок; настройки constraints в Figma (закрепление слева/справа, масштабирование) в настоящее время не считываются и не воспроизводятся.
Семантический HTML, доступность и SEO
Семантический HTML и доступность — это реальные, реализованные функции, описанные выше и в разделе «Основные функции». SEO-вывод не включён — MarkupGen не добавляет в сгенерированный код заголовок страницы, meta-описание, теги Open Graph или структурированные данные. Добавьте это самостоятельно после интеграции результата в свой проект.
Что влияет на точность и как получить лучший результат
Качество названий слоёв в Figma — главный фактор, определяющий семантичность и доступность результата, за ним следуют использование Auto Layout, сложность фрейма и то, использует ли ваш дизайн эффекты, которые может воспроизвести выбранный режим вывода (в частности, режим Email Template не может воспроизвести поворот, режимы наложения или тени).
Качество результата
Что контролирует MarkupGen, что зависит от вашего исходного файла и что измеряется.
MarkupGen контролирует
- Движок конвертации и эвристики определения семантических тегов
- Генерацию доступных подписей и alt-текста
- AI-слои оценки, исправлений, адаптивности и JS (платные тарифы)
Ваш исходный файл определяет
- Качество названий слоёв в Figma
- Использование Auto Layout
- Сложность фрейма и использование эффектов
Точность и визуальное соответствие
Измеряется автоматически с помощью AI Quality Score (платные тарифы): от 0 до 10 по критериям «Макет», «Отступы», «Типографика», «Цвет», «Содержимое» и «Детали». Отдельного общего процента точности не существует — качество зависит от конкретного дизайна.
Структура и семантика HTML
Настоящие семантические теги и уровни заголовков, зависящие от того, насколько описательно названы ваши слои в Figma.
Качество и поддерживаемость CSS
На основе Flexbox для фреймов с Auto Layout, с фиксированным позиционированием для остальных. Поддерживаемость зависит от выбранного CSS-фреймворка, стиля именования классов и названий слоёв.
Адаптивность, доступность и готовность к SEO
Адаптивная вёрстка включается по выбору через режим вывода Responsive. Доступность включает настоящие, автоматически сгенерированные ARIA-подписи и alt-текст. SEO-метаданные не включены — добавьте их самостоятельно после экспорта.
Поддерживаемые языки
Интерфейс доступен на десяти языках.
English, Tiếng Việt, Français, 中文 (упрощённый), 日本語, हिन्दी, Italiano, Español, ไทย и Русский. По умолчанию используется английский; приложение не переключается автоматически на язык браузера, поэтому общая ссылка всегда открывается на предполагаемом языке.
Изменить язык можно в Настройки → Язык. MarkupGen конвертирует текст внутри ваших слоёв Figma как есть — доступность функций полностью определяется вашим тарифом, а не языком интерфейса.
Тарифы и цены
Все указанные ниже цифры взяты напрямую из настроек биллинга.
| Функция | Free | Starter | Pro | Business |
|---|---|---|---|---|
| Цена | $0 | $10 / мес | $20 / мес | $100 / мес |
| Генерации кода | 5 / месяц | 50 / день | 150 / день | 1000 / день |
| Новые проекты | 10 / месяц | 100 / день | 300 / день | 2000 / день |
| Лимит скорости генерации | 2 запроса/мин | 10 запросов/мин | 20 запросов/мин | 60 запросов/мин, более быстрая AI-модель |
| CSS-фреймворки | Vanilla, Tailwind, Bootstrap | Все 6 фреймворков | Все 6 фреймворков | Все 6 фреймворков |
| Visual Editor | Не включено | Включено | Включено | Включено |
| AI-оценка качества и исправления | Не включено | Включено | Включено | Включено |
| Экспорт компонентов | Только HTML / CSS | 1 фреймворк за раз | Все фреймворки + Export Studio | Все фреймворки + Export Studio |
| Поддержка | Сообщество | Поддержка по email | Приоритетная поддержка по email | Персональная поддержка 1 на 1 |
Все платные тарифы оплачиваются только помесячно — годовой опции нет. Платежи не подлежат возврату, кроме случаев, предусмотренных законом. Оплата картой через Stripe или Lemon Squeezy, либо мгновенным банковским переводом по QR-коду во Вьетнаме через SePay.
Тариф Free
Лучший вариант, чтобы попробовать продукт или сделать разовую конвертацию: 5 конвертаций с помощью AI в месяц, загрузка обычного HTML/CSS и CSS-фреймворки Vanilla, Tailwind или Bootstrap. Visual Editor, AI-оценка качества и экспорт под фреймворки не включены.
Платные тарифы
Starter подходит для соло-разработчиков и фриланс-проектов. Pro добавляет полный набор Export Studio для профессионалов и небольших агентств, ведущих несколько клиентских проектов одновременно. Business предлагает максимальный объём и самую быструю обработку для команд. Переходите на более высокий тариф, когда упираетесь в лимит генераций, когда нужен Visual Editor или оценка качества, либо когда нужен настоящий компонент под фреймворк вместо обычного HTML.
Кредиты, использование и лимиты
MarkupGen не использует систему кредитов в баллах — вместо этого применяется простой счётчик генераций для каждого тарифа.
- Как считается — одно действие «Generate Code» равно одной единице вашей квоты на генерацию.
- Периодичность сброса — у тарифа Free сброс происходит в начале календарного месяца; на всех платных тарифах — ежедневно.
- Перенос остатка — не предусмотрен; неиспользованная квота не переносится на следующий период.
- Истечение срока — квота просто обнуляется в начале каждого периода, в течение периода она не истекает.
Квота на создание проектов
Отдельна от квоты на генерацию и всегда ровно в два раза больше лимита генераций вашего тарифа за тот же период (например, у Free: 10 проектов/месяц; у Pro: 300 проектов/день). Если вы точно достигли своего лимита, ещё один проект всё же можно сохранить, чтобы не потерять работу, — но он попадает в состояние Quota Locked и не может генерировать код, пока вы не перейдёте на более высокий тариф или не начнётся новый период. Удаление проекта не освобождает квоту за этот период.
| Лимиты на один экспорт | |
|---|---|
| Количество слоёв во фрейме Figma | ~2000 слоёв на один экспорт |
| Площадь экспортируемого фрейма Figma | ~120 мегапикселей |
| Общий размер загрузки на один экспорт | 50 МБ |
| Тайм-аут загрузки в плагине | 3 минуты |
| Длина пользовательской AI-инструкции | 3000 символов |
Аккаунт и подписка
Что можно изменить самостоятельно и как устроен биллинг.
Настройки аккаунта
В разделе «Настройки» можно изменить профиль, сменить пароль (это работает, даже если вы регистрировались через Google, — оттуда же можно впервые установить пароль), управлять тарифом и биллингом, а также сменить язык интерфейса.
Повышение тарифа
Переход на более высокий тариф выполняется со страницы «Тарифы». Изменения вступают в силу немедленно, оплата пересчитывается пропорционально.
Понижение тарифа
В разделе Настройки → Биллинг можно запланировать переход на более низкий платный тариф — он вступит в силу в конце текущего расчётного периода, без частичного возврата средств. Для тарифа Starter более низкого платного тарифа для перехода нет.
Отмена подписки
Чтобы отменить подписку, напишите на support@markupgen.com. Если у вас тариф Pro или Business, вы также можете в это время запланировать переход на более низкий платный тариф в разделе Настройки → Биллинг.
Биллинг и оплата
Оплата картой через Stripe или Lemon Squeezy, либо мгновенным банковским переводом по QR-коду во Вьетнаме через SePay (окно действия — 15 минут).
Возвраты
Все платежи не подлежат возврату, кроме случаев, предусмотренных законом. Отдельной гарантии возврата денег нет.
Удаление аккаунта
Сегодня самостоятельной кнопки «Удалить аккаунт» нет. Вы можете в любой момент запросить удаление своего аккаунта и его данных, написав на support@markupgen.com.
Безопасность и конфиденциальность
Кратко изложено по материалам Политики конфиденциальности, Условий использования и архитектуры аутентификации MarkupGen.
Какие данные собираются
Ваше имя, email и учётные данные аккаунта, а также только те конкретные фреймы Figma, которые вы явно экспортируете, — MarkupGen не имеет постоянного доступа ко всему вашему аккаунту Figma. Базовые технические данные (IP-адрес, браузер, устройство) собираются с помощью cookie.
Ваши дизайны и сгенерированный код
Вы сохраняете права на импортируемые дизайны и содержимое Figma. MarkupGen не использует ваши приватные дизайны для обучения AI-моделей в интересах других клиентов.
Хранение и удаление данных
Данные хранятся, пока ваш аккаунт активен, или столько, сколько требуется по юридическим, бухгалтерским причинам или соображениям безопасности. Вы можете запросить удаление в любой момент через support@markupgen.com.
Безопасность аккаунта
Пароли хешируются; вход и регистрация требуют прохождения CAPTCHA; пять неудачных попыток входа блокируют аккаунт на 15 минут; для аккаунтов с паролем обязательно подтверждение email. Двухфакторная аутентификация и управление активными сессиями пока недоступны.
Сторонние сервисы
Stripe и Lemon Squeezy — для оплаты картой, SePay — для банковских переводов во Вьетнаме, и Google Analytics — для аналитики использования.
Решение проблем
Проблема, вероятная причина и решение — по категориям.
Проблемы конвертации
Кнопка Generate Code неактивна или запрос отклоняется.
→ Вы достигли лимита генераций или создания проектов на своём тарифе, либо проект находится в состоянии Quota Locked из-за предыдущего превышения.
Дождитесь следующего сброса квоты или перейдите на более высокий тариф — при повышении тарифа заблокированные проекты разблокируются немедленно.
Экспорт из плагина Figma завершается ошибкой или тайм-аутом.
→ Фрейм превышает примерно 2000 слоёв или 120 мегапикселей, либо загрузка превысила лимит в 3 минуты.
Разбейте фрейм на более мелкие части и экспортируйте каждую отдельно.
Результат выглядит обезличенным, с обычными div и бесполезным alt-текстом.
→ Ваши слои Figma всё ещё используют названия по умолчанию вроде «Rectangle 4» или «Group».
Переименуйте слои описательно и выполните экспорт заново.
Проблемы с результатом
В email-экспорте отсутствуют поворот, тени или эффекты наложения.
→ Почтовые клиенты не могут надёжно отображать такие эффекты, поэтому режим Email Template упрощает или растрирует их.
Если вам нужны эти эффекты как настоящий CSS, используйте режим Standard или Responsive.
Вёрстка не подстраивается под размер экрана.
→ Базовая конвертация точно повторяет один фиксированный размер.
Выберите вместо этого режим вывода Responsive.
Проблемы с аутентификацией
Не получается войти в систему.
→ Пять неудачных попыток блокируют аккаунт на 15 минут, либо ваш email ещё не подтверждён.
Подождите 15 минут или проверьте входящие письма (и папку «Спам») на наличие письма для подтверждения.
Забыли пароль.
Используйте «Забыли пароль» на странице входа; ссылка для сброса действительна в течение одного часа.
Проблемы с оплатой
Платёж через банковский перевод SePay завис в статусе «в ожидании».
→ Срок действия QR-кода истекает через 15 минут.
Проверьте страницу статуса заказа или начните оформление заново, если срок истёк.
Оплата картой не проходит.
→ Карта была отклонена или данные введены неверно.
Проверьте данные карты у своего банка или попробуйте другого платёжного провайдера. Если деньги списались, а тариф не обновился, обратитесь в поддержку.
Проблемы с подпиской
Нет кнопки «Отменить подписку».
→ Пока это не самостоятельная функция.
Для отмены напишите на support@markupgen.com.
На тарифе Starter нет опции понижения тарифа.
→ Starter — самый низкий платный тариф.
Это ожидаемое поведение — внутри приложения нет более низкого тарифа для перехода.
Проблемы со скачиванием и экспортом
Экспорт под фреймворк (React/Vue/Svelte/Angular) заблокирован.
→ Экспорт под один фреймворк требует любого платного тарифа.
Перейдите на тариф Starter или выше.
Export Studio заблокирован даже на тарифе Starter.
→ Набор для всех фреймворков требует именно тарифа Pro или Business.
Перейдите на тариф Pro.
Лучшие практики
Конкретные привычки, которые заметно повышают качество конвертации.
- Используйте Auto Layout везде, где это возможно, — это главный фактор, отличающий гибкий CSS от блоков с фиксированным позиционированием.
- Называйте слои простым языком — «Header», «Add to Cart Button», «Hero Image» — движок использует эти названия, чтобы выбрать HTML-теги, ARIA-подписи и alt-текст.
- Группируйте связанные элементы в один фрейм Auto Layout, а не оставляйте их свободно расположенными фигурами с абсолютным позиционированием.
- Используйте последовательные, осмысленные размеры шрифта для заголовков и основного текста — уровни заголовков определяются именно по ним.
- Визуально отличайте содержательные изображения от декоративных элементов — MarkupGen уже обрабатывает их по-разному в результате.
- Определитесь с режимом вывода заранее. Не рассчитывайте, что конвертация в режиме Standard станет адаптивной постфактум — если результат должен работать на мобильных, сразу начинайте с режима Responsive.
- Не полагайтесь на constraints Figma для поведения при изменении размера — они не воспроизводятся; воссоздавайте такое поведение с помощью Auto Layout.
- Для вывода в формате email избегайте поворота, режимов наложения и эффектов тени или размытия — они не сохранятся при отображении в почтовых клиентах.
- Всегда проверяйте Desktop, Tablet и Mobile в Preview перед экспортом и запускайте AI Quality Score (платные тарифы) для конкретной, взвешенной оценки того, что стоит исправить.
- Планируйте добавить собственные SEO-метаданные после экспорта — MarkupGen не генерирует теги title, meta-описания или структурированные данные.
Частые вопросы
Основано на проверенном поведении продукта.
Ограничения
В чём MarkupGen хорош, а что пока не умеет делать.
В чём MarkupGen хорош
Быстро и предсказуемо конвертирует хорошо структурированный фрейм Figma на основе Auto Layout в чистый, семантически размеченный HTML/CSS, с опциональными AI-слоями для интерактивности, адаптивности, оценки качества и исправлений в один клик.
Чего он не делает
Не воссоздаёт автоматически данные о прототипах или взаимодействиях из Figma; не учитывает изменение размера на основе constraints Figma (закрепление, масштабирование); не импортирует несколько фреймов или целую страницу за одно действие; не добавляет SEO-метаданные в сгенерированный код; не экспортирует общее, переиспользуемое определение компонента для каждого компонента Figma.
Где результату может понадобиться ручная доработка
Обезличенные или безымянные слои Figma дают обезличенную разметку; сложные визуальные эффекты в режиме Email Template; интерактивность за пределами паттернов, которые распознаёт функция AI-предложений по JS.
Технические ограничения
Точные цифры см. в разделе «Кредиты, использование и лимиты» — примерно 2000 слоёв, 120 мегапикселей и 50 МБ на один экспорт, тайм-аут загрузки 3 минуты и ограничение в 3000 символов для пользовательских AI-инструкций.
Глоссарий
Терминология, используемая в этом руководстве.
- Frame
- Контейнер верхнего уровня в Figma — примерно один экран или раздел. MarkupGen экспортирует по одному фрейму, компоненту или группе за раз.
- Auto Layout
- Встроенная функция адаптивного расположения элементов в Figma; MarkupGen напрямую сопоставляет её с CSS Flexbox.
- Constraints
- Правила изменения размера в Figma на основе закрепления и масштабирования, появившиеся ещё до Auto Layout; в настоящее время не считываются MarkupGen.
- Conversion / Generation
- Один запуск «Generate Code» для проекта — единица, в которой измеряется квота вашего тарифа.
- Project
- Один экспорт из Figma, отслеживаемый на вашей панели управления и принадлежащий вам в рамках Workspace.
- Workspace
- Общее командное пространство, которому принадлежат проекты; участие в нём предполагает роль, определяющую права доступа.
- Template
- Любой из ваших проектов, отмеченный для повторного использования в галерее Templates вашего Workspace.
- Export
- Скачивание сгенерированного кода в виде обычного HTML/CSS, компонента под один фреймворк или полного набора для нескольких фреймворков.
- Subscription
- Ваш регулярный ежемесячный платный тариф — Starter, Pro или Business.
- Quota Locked
- Проект, созданный после того, как вы уже достигли лимита создания проектов на своём тарифе, — сохранён, но не может генерировать код, пока вы не перейдёте на более высокий тариф или не начнётся новый период.
Краткая шпаргалка для старта
От Figma до готового к продакшену кода.
- 1Установите плагин MarkupGen из Figma Community.
- 2Выберите один аккуратный, понятно названный фрейм с Auto Layout в Figma.
- 3Нажмите Export & Send в плагине (один раз войдите через браузер).
- 4Откройте новый проект на панели управления.
- 5Выберите режим вывода и CSS-фреймворк, затем нажмите Generate Code.
- 6Проверьте результат в Preview и посмотрите AI Quality Score (платные тарифы).
- 7Исправьте вручную в Code Editor или перейдите на платный тариф ради Visual Editor и Smart 1-Click Fix.
- 8Экспортируйте как HTML/CSS или как компонент под фреймворк на платном тарифе, а затем интегрируйте результат в свой проект.
Готовы ускорить процесс перехода от дизайна к коду?
Начните бесплатно уже сегодня или перейдите на платный тариф ради Visual Editor, AI-оценки качества и полного экспорта фреймворков.