UnHTML

Claude to Figma: Turn a Page Claude Made Into Editable Figma Layers

A page Claude made is HTML, and UnHTML turns HTML into native Figma layers with auto layout. Here is how to get it from Claude to Figma, including Claude Design exports.

TUTORIALDESIGNERPublished

Yes. A page Claude made is HTML, and HTML is what UnHTML reads. Save the page as a self-contained .html file, or copy its code, then drop the file into the UnHTML plugin in Figma or paste the code into its text field. The plugin rebuilds the page as native Figma layers: frames, text, images, vectors and auto layout mapped from the page's own CSS. You get something you can edit by hand, not a picture of the page.

This guide covers the whole trip from Claude to Figma: getting the HTML out, what happens to it on import, what to check afterwards, and how to bring in the next version when you ask Claude for changes.

Why a screenshot is the wrong way in

The quickest way to get a Claude page into Figma is a screenshot, and it is the one output that fails at the job. You bring a page into Figma to change it. A screenshot gives you one flat image: the headline is pixels, the button is pixels, and moving the button means asking Claude again or redrawing it yourself.

An import gives you the parts. The headline arrives as a text layer with its family, weight, size and line height. The button is a frame with its own padding and fill. A row of cards laid out with CSS flexbox comes in as an auto layout frame, so dragging one card reflows the rest the way the page would.

Step 1: get the HTML out of Claude

From a Claude chat. When Claude builds a page in a conversation, the page is code. Copy the complete HTML, from <!doctype html> to the closing </html>, or download it as a file. Keep the styles inside the file: a page whose CSS sits in a <style> block imports cleanly on its own.

From Claude Design. Export the design as a standalone HTML file. Some Claude Design exports arrive as a self-extracting bundle: the file's visible markup is only a placeholder, and the real page is stored as data inside <script> blocks that rebuild it in the browser. Read as plain HTML, that file would import as an empty rectangle. UnHTML recognises the bundle, unpacks it to the real page first, and shows "Design bundle, unpacked" before you import.

If the page pulls in outside files. A page that loads fonts from a CDN or images from another server will not bring them along in a copied file. With default settings UnHTML makes no network requests during an import, so those assets stay missing unless you choose one of three routes: ask Claude to inline the images and styles, turn on the plugin's remote fetch option for that import, or capture the rendered page with the bundled CLI or bookmarklet and drop the resulting scene.json.

Step 2: import it into Figma

  1. Open the UnHTML plugin in Figma.
  2. Drop the .html file onto the plugin's drop zone, or paste the HTML into the field below it.
  3. Pick a viewport: Desktop, Mobile, or a custom width. The page is laid out at that width before it is measured, so a responsive page gives you the layout for that breakpoint.
  4. Import. The plugin renders the page in its own window, measures every element, and writes the layers onto your canvas.

Nothing about the page is uploaded. The markup is cleaned before it renders: scripts, inline event handlers and javascript: links are removed.

Step 3: check what came in

Every import ends with a report, and it is worth reading before you start editing.

  • Fonts. A font you do not have installed is replaced, with Inter as the default, and each replacement is listed. Install the page's font and import again if the exact face matters. How font substitution works in Figma and in UnHTML goes through this in detail.
  • Layout. Flexbox and simple grids become auto layout. Where a frame cannot reproduce the page's measured positions, it falls back to absolute positioning, so the result is never less faithful than the page. The flexbox to auto layout map lists what maps property by property.
  • Size. The free plugin imports up to 500 layers per page. A longer page is not refused: the free import brings in the top of the page and the report names the section where it stopped. Pro removes the cap, and turns repeated elements into components and repeated type into shared text styles.

Step 4: the next version

A page rarely stays finished. You ask Claude for a new hero, a different pricing table, a second colour scheme, and each answer is a new version of the page. Export or copy the new version and import it again. Each import is independent and lands as its own set of layers, so you can place versions side by side, compare them, and keep editing whichever one you choose.

This is where an import beats rebuilding by hand. Redrawing a page in Figma takes hours the first time and the same hours again for every revision. Importing takes as long as the drop.

What UnHTML is, and is not

UnHTML is a Figma plugin made by KOTT Studio. It reads HTML from any source, including pages made with Claude. It is not made by, affiliated with, or endorsed by Anthropic or Figma. It goes one way, from a web page to Figma layers; if you want Figma designs turned into code, that is a different kind of tool, compared in UnHTML vs Anima.

Conclusion

Getting a page from Claude to Figma takes one file and one drop. Save or copy the HTML Claude wrote, export the standalone file from Claude Design, drop it into UnHTML, and the page arrives as real layers you can move, restyle and hand off. When Claude gives you the next version, import that too.

Questions

Can I paste Claude's HTML straight into UnHTML?
Yes. The plugin takes a dropped .html file or HTML pasted into the text field under the drop zone. Paste the complete page, from the doctype to the closing html tag, so the styles come with it.
Does UnHTML work with Claude Design exports?
Yes. Export the design as a standalone HTML file and drop it in. When the export is a self-extracting bundle, with the real page stored as data inside script blocks, UnHTML unpacks it to the actual page before importing.
Why are images or fonts missing after I import a Claude page?
By default UnHTML makes no network requests during an import, so files the page loads from other servers are not fetched. Ask Claude to inline them, turn on the remote fetch option for that import, or capture the page with the CLI or bookmarklet and drop the scene.json.
Is the result a screenshot?
No. The page arrives as native Figma layers: frames, editable text, images, vectors, and auto layout built from the page's CSS flexbox and grid.
How big a page can I import for free?
The free plugin imports up to 500 layers per page. A longer page imports its top part and the report names the section where it stopped. Pro removes the cap and adds components and shared text styles.
Is UnHTML made by Anthropic?
No. UnHTML is a Figma plugin made by KOTT Studio. It is not affiliated with or endorsed by Anthropic or Figma.