Turn AI-generated HTML into editable Figma layers
Your assistant writes the page in a minute. Getting it into Figma as real layers takes about another one — once you avoid the runtime-CSS trap.
To get AI-generated HTML into Figma, paste the markup into the html2figma plugin, or save the rendered page as a single file and drop it in. The one thing to check first: if the page loads Tailwind from a CDN script tag, it imports unstyled, because the plugin never runs page JavaScript and that CSS is generated at runtime. Save the page from your browser after it renders, or ask your assistant for plain CSS instead. With real CSS in place, repeated blocks become Figma components and the palette becomes variables.
Why AI output is a good input
An AI assistant hands you a working page in a minute and a design file in never. Which is backwards, because the thing you usually want to iterate on — spacing, hierarchy, colour, the actual design work — lives in Figma.
The generated markup is unusually well-behaved as converter input: it is self-contained, it is semantic, it uses a small consistent set of colours and type sizes, and it repeats components predictably. That last part matters — repeated blocks collapse into Figma components cleanly, and the small palette turns into a tidy set of variables rather than ninety near-identical greys.
First, the thing that breaks most imports
If your generated page loads Tailwind from a CDN <script> tag, it will import completely unstyled — correct structure, real text, no colours, no spacing, no layout. This is the single most common reason an AI-generated page converts badly, and it is not a bug you can work around by retrying.
The reason is deliberate. The plugin never executes the page's JavaScript — the render frame is sandboxed without allow-scripts, because pairing that with same-origin access would let pasted code reach the plugin itself. A CDN Tailwind build is a script that generates the stylesheet at load time. No script execution, no stylesheet, no styles.
The plugin detects this and warns you up front rather than letting you find out on the canvas.
Three ways to fix it
- Save the rendered page from your browser. Open the page, let it render, then File → Save Page As → Webpage, Single File. The browser writes out the state after the script has run, so the generated CSS is baked into the save. This is the fastest fix and it needs nothing installed.
- Ask for plain CSS instead. Tell the assistant to output the page with a real
<style>block and no CDN script. Models do this happily when asked; the resulting file converts on the first try. - Build it properly. If the output is a real project, run the build and import the compiled result with its stylesheet.
Match the method to what your tool gave you
App builders and chat assistants hand back different shapes. Pick the row that matches yours rather than the tool's name.
| What you have | What to do |
|---|---|
| Markup in a chat reply | Copy it and use the plugin's Paste code box. A fragment works if you bring its <style> with it. |
| A live preview URL | Open it, scroll to the bottom so images load, then save as Webpage, Single File and drop the .mhtml. |
| A downloadable project or repo | Run the build, then save or zip the built page with its stylesheet. Don't import raw JSX or component source — it isn't HTML. |
A single downloaded .html | Drop it straight in. If it references images by relative path, zip it with its asset folder first. |
| An artifact or canvas preview | Open it in its own window, then save the page as a single file. |
This covers the usual suspects — v0, Lovable, Bolt, Claude artifacts, ChatGPT canvas, Cursor — without needing a per-tool recipe. What matters is whether you end up with rendered HTML and real CSS.
What you get back
Once the CSS is real, the conversion is the same one any hand-written page gets:
- Repeated blocks become one component. The three pricing tiers your assistant generated arrive as three instances of one component, each keeping its own text — not three copies to keep in sync by hand.
- The palette becomes variables. Colours used more than once land as Figma Variables named the way a designer would name them,
Slate 900rather than#0F172A, in a new collection named after the import. Repeated typography becomes Text Styles. - Flex rows become Auto Layout — but only where the children genuinely form a uniform stack. The plugin proposes the frame, replays it, and keeps it only if every child returns to within a pixel of where the browser put it. Generated markup tends to be regular, so this hits often.
- Text stays text, inline SVG icons stay editable vectors, and the layer tree is named from roles and content instead of
div › div › div.
Nothing already in your Figma file is read, reused or modified, so importing an experiment can't disturb an existing design system.
The loop this unlocks
Describe a page to an assistant, get working HTML in a minute, convert it to layers, then do the part a model is worst at — pushing spacing, fixing hierarchy, applying the actual brand. It replaces the blank artboard, which is the expensive part of starting a screen.
Worth knowing the direction of travel: this is an import, not a sync. Changing the Figma file doesn't touch the HTML. Re-generate and re-import when the markup changes.
If you also want to bring in pages that already exist in production, the same file-based method is covered in importing a live website into Figma.
AI-generated HTML in Figma: common questions
Why did my v0 or Lovable page import with no colours or spacing?
The page is almost certainly loading Tailwind from a CDN script, which builds its CSS at runtime. The plugin never executes page JavaScript, so the stylesheet is never created. Open the page in a browser and save it as Webpage, Single File, or ask your assistant for plain CSS instead.
Can I import React or JSX components directly?
No. The plugin converts HTML and CSS, not component source. Run the project, then save the rendered page and import that.
Do I need to save a file, or can I paste the code?
You can paste — the plugin takes a full page or a fragment with its <style>. Saving a file is only necessary when the page depends on external assets, or on CSS generated at runtime.
Will repeated blocks become Figma components?
Yes. Repeated blocks are detected by structure rather than content and rebuilt as one component with instances, each keeping its own text and images. Generated markup is regular, so this works particularly well on it.
Does importing affect my existing design system?
No. Nothing already in your file is read, reused or modified. New variables land in a separate collection named after the import.
Can I send the Figma design back to code?
Not today. The conversion currently runs one way, HTML into Figma, so changing the Figma file doesn’t alter the markup.
Is there an import limit?
No. The plugin is free with unlimited imports and no account, so iterating on generated pages costs nothing.
html2figma is a free Figma plugin that converts HTML and CSS into editable Figma layers. If you use this workflow, let me know what breaks. The failure cases are what I fix first.