MarkupGen User Guide
Everything you need to know to turn Figma designs into production-ready code — features, plans, limits, and how to get the best results.
Welcome to MarkupGen
What MarkupGen is, who it's for, and what makes it different.
What is MarkupGen?
MarkupGen is a platform that turns Figma designs into production-ready front-end code. A companion Figma plugin exports the frame you're working on; MarkupGen converts it into HTML and CSS, and — on paid plans — into a React, Vue, Svelte, or Angular component. A built-in dual-mode editor (code editor plus a click-to-edit visual editor) lets you refine the result before exporting.
Who it's for
Frontend developers and freelancers who'd rather not hand-translate every layout from a design file, small agencies converting client designs into working pages quickly, and anyone building an HTML email template that needs to survive Gmail, Outlook, and Apple Mail.
The problem it solves
Turning a Figma file into working markup by hand is repetitive and easy to get subtly wrong. MarkupGen's base conversion runs on a predictable, rule-based engine driven by your Figma layer names and Auto Layout settings, so the same design converts the same way every time. A focused set of AI features then layers on top — for interactivity, responsive variants, quality scoring, and one-click fixes — exactly where AI adds real value.
Main use cases
- Converting a single Figma frame or component into a standalone HTML page.
- Producing a responsive landing page that adapts across desktop and mobile.
- Generating an HTML email template with inline styles for cross-client compatibility.
- Exporting a design as a React, Vue, Svelte, or Angular component for your own codebase (paid plans).
- Building a personal or team library of reusable starting points with Templates.
Getting Started
From creating an account to reviewing your first generated page.
- 1
Create an account
Sign up with Google in one click, or with email and password. The email path requires solving a quick verification check and confirming your email before you can log in.
- 2
Sign in
Use the same method you signed up with. Five failed password attempts locks your account for 15 minutes — use “Forgot password” to reset it by email at any time.
- 3
Explore your dashboard
Your dashboard shows a Create from Figma button, your project count and average AI quality score, a Quick Convert launcher, and your most recently updated projects.
- 4
Understand workspaces
Every project lives inside a Workspace — a shared space for you and any teammates. Inside a project, you can switch between the Code Editor (every plan) and the Visual Editor (Starter, Pro, Business).
- 5
Create your first project
Install the MarkupGen plugin from the Figma Community, open it in Figma, select one frame or component, and click Export & Send.
A new project appears in your MarkupGen dashboard.
- 6
Run your first conversion
Open the new project and click Generate Code. Watch the progress as MarkupGen connects to your design data, analyzes the layers, extracts images, and writes the HTML/CSS.
A working HTML/CSS page, plus an automatic 0–10 quality score.
- 7
Review the result
Use the Code tab for a split-view HTML/CSS/JS editor, or the Preview panel to check Desktop (1280px), Tablet (768px), and Mobile (375px) views.
- 8
Export your code
Download plain HTML/CSS on any plan. Paid plans can export a single framework component, or all frameworks at once as a ZIP bundle.
Core Features
Every feature in the product, what plan it requires, and how it works.
Figma Plugin Import
Exports a single selected frame, component, or group from Figma — including vector icons as real SVG, background images, fonts, and Auto Layout structure.
Install from the Figma Community, log in once, select one frame, and click Export & Send.
One frame per export — there's no multi-frame or whole-page batch import yet.
Code Editor
A professional split-view code editor for your generated HTML, CSS, and JS, with syntax highlighting and auto-formatting.
Visual Editor
Click-to-edit directly on the live preview: inspect elements, drag-and-drop style editing, inline text editing, safe link management, and show/hide with transitions.
Requires an active paid subscription, enforced on the server.
AI Semantic Element Conversion
Upgrades static layout boxes into real interactive form controls — buttons, inputs, textareas, selects — using AI.
Three precision levels:
Analyzes current HTML structure, styling, and the preview image.
Cross-references the original design for extra accuracy.
Full structural analysis to classify complex components accurately.
AI JavaScript & Interactive Components
Detects UI patterns — sliders, carousels, accordions, modals, tabs, form validation — and generates working JS and CSS for them.
AI Responsive Layout Generator
Restructures a desktop conversion into an optimized layout for another screen size, with a side-by-side before/after preview.
Supports two target directions — mobile and desktop — with a configurable breakpoint (320–2000px).
AI Quality Scoring & Comparison
Scores your generated code from 0 to 10 against the original design across six weighted criteria: Layout, Spacing, Typography, Color, Content, and Details.
Score color convention
Excellent
Matches the original design almost perfectly.
Good
Close overall, with a few noticeable differences.
Needs Improvement
Significant differences from the original design.
Smart 1-Click Code Fix
Applies targeted AI-generated patches for the discrepancies the Quality Score found, without disturbing the rest of your code.
Automated Syntax & Code Validation
Inspects and repairs generated HTML/CSS syntax issues before saving.
High-Speed Priority Processing
Higher per-minute and per-day generation limits, with faster processing on the Business plan.
Component Export
Downloads your generated design as plain HTML/CSS, a single framework component, or a full multi-framework bundle.
React (JSX/TSX), Vue 3 SFC, Svelte 5, or Angular Standalone, plus a ZIP bundle and an email-client test option.
CSS Framework Output
Generates your CSS in one of six styles: Vanilla, Tailwind, Bootstrap, Bulma, Materialize, or Pico CSS.
Vanilla, Tailwind, and Bootstrap are available on every plan. Bulma, Materialize, and Pico CSS require a paid plan.
Output Modes
Standard Web Page (direct Flexbox/Grid conversion), Responsive Layout (fluid multi-screen), or Email Template (inline-CSS tables for Gmail, Outlook, and Apple Mail).
Email Template mode can't reproduce rotation, non-standard blend modes, or shadow/blur effects — these are simplified or rasterized as an image instead.
Templates
Marks any of your own projects as a reusable Template, visible in a searchable gallery for your workspace.
Figma to Code Workflow
How to prepare, convert, and check a design end to end.
Clean Figma in, clean code out
This isn't just encouragement — it's how the engine works. Semantic HTML tags, accessible labels, and heading levels are inferred directly from your Figma layer names and Auto Layout structure. A file with descriptive names and consistent Auto Layout will measurably out-convert a file full of ungrouped shapes with default names like “Rectangle 4”.
Preparing your Figma file
Name layers by what they are — “Header”, “Add to Cart Button”, “Hero Image” — not Figma's auto-generated names. Use Auto Layout wherever you can: Auto Layout frames convert directly to CSS Flexbox, while frames without it are exported as fixed-size boxes. Keep individual frames well under about 2,000 layers and 120 megapixels of rendered area — split large designs into smaller frames.
Importing
Export happens through the Figma plugin, one frame, component, or group per export. There's currently no way to import multiple frames or a whole page in a single action — convert each frame as its own MarkupGen project.
Configuration options
Choose your output mode (Standard Web Page, Responsive Layout, or Email Template), your CSS framework (Vanilla, Tailwind, and Bootstrap on every plan; Bulma, Materialize, and Pico CSS on paid plans), and an image format for exported assets (Original, PNG, AVIF, WebP, or JPG).
Checking the generated HTML
The engine emits real semantic tags — header, nav, main, footer, aside, article, section — inferred from your layer names, with heading levels inferred from font size and weight. Icon-only buttons get real ARIA labels, content images get descriptive alt text, and decorative or vector images correctly get an empty alt with aria-hidden.
Checking the CSS
Auto Layout frames become Flexbox with matching gap, padding, and alignment. Frames without Auto Layout keep the fixed pixel dimensions and position from your Figma file.
Responsive behavior
The base conversion mirrors your Figma frame at one fixed size — it is not automatically responsive. For a layout that adapts across devices, choose the Responsive output mode or use the AI Responsive Layout Generator (mobile and desktop directions).
Typography, colors, spacing, images, and icons
Heading levels are inferred from font size and weight. Colors are read directly from your Figma fills. Spacing follows Auto Layout's gap, padding, and alignment, or fixed positions when Auto Layout isn't used. Images export in your chosen format; icons are extracted as real SVG wherever possible, with complex fills or masks rasterized as PNG composites.
Components, layout, and constraints
Figma components and component sets are read during export, but MarkupGen does not currently reconstruct one shared, reusable component definition per Figma component — each conversion is a standalone page or fragment. Layout comes from Auto Layout and absolute bounding boxes; Figma's constraint settings (pin left/right, scale) are not currently read or reproduced.
Semantic HTML, accessibility, and SEO
Semantic HTML and accessibility are real, implemented features, described above and in Core Features. SEO output is not included — MarkupGen does not add a page title, meta description, Open Graph tags, or structured data to the code it generates. Add that yourself once you integrate the output into your project.
What affects accuracy, and how to get the best output
Figma layer naming quality is the single biggest lever for semantic and accessible output, followed by Auto Layout usage, frame complexity, and whether your design uses effects the chosen output mode can reproduce (Email Template mode in particular can't reproduce rotation, blend modes, or shadows).
Output Quality
What MarkupGen controls, what depends on your input, and what's measured.
MarkupGen controls
- The conversion engine and semantic-tag heuristics
- Accessible label and alt-text generation
- The AI scoring, fix, responsive, and JS layers (paid plans)
Your input controls
- Figma layer naming quality
- Auto Layout usage
- Frame complexity and effect usage
Accuracy and visual fidelity
Measured automatically by the AI Quality Score (paid plans): 0–10 across Layout, Spacing, Typography, Color, Content, and Details. There's no separate, global accuracy percentage — quality is design-dependent.
HTML structure and semantics
Real semantic tags and heading levels, contingent on how descriptively your Figma layers are named.
CSS quality and maintainability
Flexbox-based for Auto Layout frames, fixed-position for the rest. Maintainability depends on your chosen CSS framework, class-naming style, and layer naming.
Responsive behavior, accessibility, and SEO readiness
Responsive layout is opt-in via the Responsive output mode. Accessibility includes real, auto-generated ARIA labels and alt text. SEO metadata is not included — add your own after export.
Supported Languages
The interface is available in ten languages.
English, Tiếng Việt, Français, 中文 (简体), 日本語, हिन्दी, Italiano, Español, ไทย, and Русский. English is the default; the app doesn't auto-switch based on your browser language, so a shared link always opens in the intended language.
Change your language from Settings → Language. MarkupGen converts whatever text is inside your Figma layers as-is — feature availability is governed entirely by your plan, not your interface language.
Plans & Pricing
All figures below come straight from the billing configuration.
| Feature | Free | Starter | Pro | Business |
|---|---|---|---|---|
| Price | $0 | $10 / mo | $20 / mo | $100 / mo |
| Code generations | 5 / month | 50 / day | 150 / day | 1,000 / day |
| New projects | 10 / month | 100 / day | 300 / day | 2,000 / day |
| Generation speed limit | 2 req/min | 10 req/min | 20 req/min | 60 req/min, faster AI model |
| CSS frameworks | Vanilla, Tailwind, Bootstrap | All 6 frameworks | All 6 frameworks | All 6 frameworks |
| Visual Editor | Not included | Included | Included | Included |
| AI quality scoring & fixes | Not included | Included | Included | Included |
| Component export | HTML / CSS only | 1 framework at a time | All frameworks + Export Studio | All frameworks + Export Studio |
| Support | Community | Email support | Priority email support | Dedicated 1-on-1 support |
All paid plans bill monthly only — there's no annual option. Fees are non-refundable except where required by law. Pay by card via Stripe or Lemon Squeezy, or by instant Vietnamese bank-transfer QR via SePay.
Free plan
Best for trying the product or the occasional one-off conversion: 5 AI-assisted conversions a month, plain HTML/CSS download, and Vanilla, Tailwind, or Bootstrap CSS. The Visual Editor, AI quality scoring, and framework export aren't included.
Paid plans
Starter suits solo builders and freelance projects. Pro adds the full Export Studio bundle for professionals and small agencies running multiple client projects. Business offers the highest volume and fastest processing for teams. Upgrade when you hit your generation cap, need the Visual Editor or quality scoring, or need a real framework component instead of raw HTML.
Credits, Usage & Limits
MarkupGen doesn't use a points-style credit system — it uses a plain generation count per plan.
- How it's counted — one “Generate Code” action equals one unit against your generation quota.
- Reset cadence — Free resets on the calendar month; every paid plan resets daily.
- Rollover — none; unused quota does not carry to the next period.
- Expiry — quota simply resets each period; it doesn't expire mid-period.
Project creation quota
Separate from generation quota, and always exactly double your plan's generation limit for the same period (for example, Free: 10 projects/month; Pro: 300 projects/day). If you're exactly at your limit, one more project can still be saved so you never lose work — but it's placed in a Quota Locked state and can't generate code until you upgrade or the period resets. Deleting a project doesn't free up quota for that period.
| Per-export limits | |
|---|---|
| Figma frame layer count | ~2,000 layers per export |
| Figma frame export area | ~120 megapixels |
| Total upload size per export | 50 MB |
| Plugin upload timeout | 3 minutes |
| Custom AI instruction length | 3,000 characters |
Account & Subscription
What you can change yourself, and how billing works.
Account settings
From Settings you can edit your profile, change your password (this works even if you signed up with Google — you can set a password for the first time from here), manage your plan and billing, and switch your language.
Upgrading
Upgrade from the Pricing page. Upgrades apply immediately with prorated billing.
Downgrading
From Settings → Billing, schedule a move to a lower paid tier that takes effect at the end of your current billing period, with no partial refund. Starter has no lower paid tier to downgrade to.
Canceling
To cancel your subscription, contact support@markupgen.com. If you're on Pro or Business, you can also schedule a downgrade to a lower paid tier from Settings → Billing in the meantime.
Billing & payment
Pay by card via Stripe or Lemon Squeezy, or by instant Vietnamese bank-transfer QR via SePay (a 15-minute window).
Refunds
All fees are non-refundable except where required by law. There's no separate money-back guarantee.
Account deletion
There's no self-service “Delete my account” button today. You can request deletion of your account and its data at any time by emailing support@markupgen.com.
Security & Privacy
Summarized from MarkupGen's Privacy Policy, Terms of Use, and authentication design.
What data is collected
Your name, email, and account credentials, plus only the specific Figma frames you explicitly export — MarkupGen doesn't have standing access to your whole Figma account. Basic technical data (IP, browser, device) is collected via cookies.
Your designs and generated code
You retain rights to the Figma designs and content you import. MarkupGen does not use your private designs to train AI models for other customers.
Data retention and deletion
Data is kept while your account is active, or as needed for legal, accounting, or security reasons. You can request deletion at any time via support@markupgen.com.
Account security
Passwords are hashed; login and registration both require a CAPTCHA check; five failed login attempts locks an account for 15 minutes; email verification is required for password-based accounts. Two-factor authentication and active-session management are not currently available.
Third-party services
Stripe and Lemon Squeezy for card payments, SePay for Vietnamese bank transfer, and Google Analytics for usage analytics.
Troubleshooting
Problem, likely cause, and fix — organized by category.
Conversion issues
Generate Code is greyed out or rejected.
→ You've hit your plan's generation or project-creation limit, or the project is Quota Locked from a prior overflow.
Wait for your next reset, or upgrade — upgrading unlocks locked projects immediately.
Export from the Figma plugin fails or times out.
→ The frame exceeds roughly 2,000 layers or 120 megapixels, or the upload exceeded the 3-minute limit.
Split the frame into smaller pieces and export each separately.
Output looks generic, with plain divs and unhelpful alt text.
→ Your Figma layers still use default names like “Rectangle 4” or “Group”.
Rename layers descriptively and re-export.
Output issues
Rotation, shadows, or blend effects are missing from an Email export.
→ Email clients can't render these reliably, so Email Template mode simplifies or rasterizes them.
Use Standard or Responsive mode if you need those effects as real CSS.
Layout doesn't adapt to screen size.
→ The base conversion mirrors one fixed size.
Choose the Responsive output mode instead.
Authentication issues
Can't log in.
→ Five failed attempts locks the account for 15 minutes, or your email isn't verified yet.
Wait 15 minutes, or check your inbox (and spam folder) for the verification email.
Forgot your password.
Use “Forgot password” on the login page; the reset link is valid for one hour.
Payment issues
A SePay bank-transfer payment is stuck “pending”.
→ The QR code expires after 15 minutes.
Check the order status page, or start checkout again if it's expired.
A card payment fails.
→ The card was declined or details were entered incorrectly.
Verify your card details with your bank, or try the other payment provider. Contact support if you were charged but your plan didn't update.
Subscription issues
No “Cancel Subscription” button.
→ This isn't a self-service control yet.
Email support@markupgen.com to cancel.
No downgrade option on the Starter plan.
→ Starter is the lowest paid tier.
This is expected — there's nothing lower to downgrade to within the app.
Download & export issues
Framework export (React/Vue/Svelte/Angular) is locked.
→ Single-framework export requires any paid plan.
Upgrade to Starter or above.
Export Studio is locked, even on Starter.
→ The all-frameworks bundle requires Pro or Business specifically.
Upgrade to Pro.
Best Practices
Concrete habits that measurably improve conversion quality.
- Use Auto Layout everywhere you can — it's the single biggest factor separating fluid CSS from fixed-position boxes.
- Name layers in plain language — “Header”, “Add to Cart Button”, “Hero Image” — the engine reads these names to choose HTML tags, ARIA labels, and alt text.
- Group related elements inside one Auto Layout frame rather than leaving them as free-floating, absolutely-positioned shapes.
- Use consistent, purposeful type sizes for headings vs. body text — heading levels are inferred from these.
- Keep content images and decorative assets visually distinct — MarkupGen already treats them differently in the output.
- Pick your output mode up front. Don't expect a Standard-mode conversion to become responsive after the fact — start with Responsive mode if the destination needs to work on mobile.
- Avoid relying on Figma constraints for resizing behavior — they aren't reproduced; rebuild that behavior with Auto Layout instead.
- For email output, avoid rotation, blend modes, and shadow or blur effects — they won't survive email-client rendering.
- Always check Desktop, Tablet, and Mobile in Preview before exporting, and run the AI Quality Score (paid plans) for a specific, weighted read on what to fix.
- Plan to add your own SEO metadata after exporting — MarkupGen doesn't generate title tags, meta descriptions, or structured data.
FAQ
Grounded in verified product behavior.
Limitations
What MarkupGen is good at, and what it doesn't do yet.
What MarkupGen does well
Converts a well-structured, Auto-Layout-based Figma frame into clean, semantically-tagged HTML/CSS quickly and predictably, with optional AI layers for interactivity, responsiveness, quality scoring, and one-click fixes.
What it doesn't do
Reconstruct Figma prototype or interaction data automatically; honor Figma constraint-based resizing (pin, scale); import multiple frames or a whole page in one action; add SEO metadata to generated code; or export a shared, reusable component definition per Figma component.
Where output may need manual editing
Generic or unnamed Figma layers producing generic markup; complex visual effects in Email Template mode; interactivity beyond the patterns the AI JS-suggestion feature recognizes.
Technical limits
See Credits, Usage & Limits for exact figures — roughly 2,000 layers, 120 megapixels, and 50 MB per export, a 3-minute upload timeout, and a 3,000-character cap on custom AI instructions.
Glossary
The vocabulary used throughout this guide.
- Frame
- A top-level container in Figma — roughly one screen or section. MarkupGen exports one frame, component, or group at a time.
- Auto Layout
- Figma's built-in responsive-stacking feature; MarkupGen maps it directly to CSS Flexbox.
- Constraints
- Figma's pin and scale resizing rules from before Auto Layout existed; not currently read by MarkupGen.
- Conversion / Generation
- One “Generate Code” run against a project — the unit your plan's quota is measured in.
- Project
- A single Figma export tracked in your dashboard, owned by you within a Workspace.
- Workspace
- A shared team space that projects belong to; membership carries a role controlling permissions.
- Template
- Any of your own projects marked for reuse in your workspace's Templates gallery.
- Export
- Downloading generated code as plain HTML/CSS, a single framework component, or a full multi-framework bundle.
- Subscription
- Your recurring monthly paid plan — Starter, Pro, or Business.
- Quota Locked
- A project created after you'd already hit your plan's creation limit — saved, but unable to generate code until you upgrade or the period resets.
Quick Start Cheat Sheet
From Figma to production-ready code.
- 1Install the MarkupGen plugin from the Figma Community.
- 2Select one clean, well-named, Auto-Layout frame in Figma.
- 3Export & Send from the plugin (log in once via the browser).
- 4Open the new project on your dashboard.
- 5Choose your output mode and CSS framework, then click Generate Code.
- 6Review the result in Preview and check the AI Quality Score (paid plans).
- 7Fix manually in the Code Editor, or upgrade for the Visual Editor and Smart 1-Click Fix.
- 8Export as HTML/CSS, or as a framework component on a paid plan, then integrate it into your project.
Ready to accelerate your design-to-code workflow?
Start free today, or upgrade for the Visual Editor, AI quality scoring, and full framework export.