UnHTML
Get UnHTML
How it works Features Pricing FAQ Journal Get UnHTML
HTML → editable layers

Any webpage, rebuilt as native Figma layers.

UnHTML converts a page into real frames, text, images, vectors, and true auto-layout, mapped from its actual CSS. Not a flattened screenshot. Drop in a file and edit everything the moment it lands.

Get UnHTML See how it works

UnHTML (unhtml.pro) is a Figma plugin that converts a webpage into native, editable Figma layers: frames, text, images, vectors, and auto-layout mapped from the page's own CSS. It takes a self-contained .html file, a Safari .webarchive, or a scene.json captured by its open-source CLI, and it runs offline by default. It is for designers who need to edit an existing site in Figma instead of tracing a screenshot. The free plugin imports up to 500 layers per page. Pro is $39 one-time per editor with no layer cap, plus components and text styles. Studio is $119 one-time for five editors. Updated

Workflow

From file to editable canvas in three moves.

No account, no upload step. The plugin renders and measures your page in its own UI, then writes native layers straight onto the canvas.

01

Drop a file

A self-contained .html, a Safari .webarchive, or a scene.json. It stages as a chip so you can confirm exactly what is loaded.

02

Set viewport & options

Choose Desktop 1440, Mobile 390, or type a custom width. Toggle auto-layout conversion and, if you need it, opt in to remote fetching.

03

Get layers + a report

Real editable layers land on your canvas, with an honest report of every font substituted, frame reverted to absolute, and image skipped.

A Simplest path

Drop it straight into the plugin

Drag a self-contained file onto the drop zone. The plugin renders it in a real browser context, measures every node, and builds the layers. No CLI, no setup beyond the plugin itself.

B Robust path

Capture with the CLI or bookmarklet

For live sites, remote assets, or JS-built pages, a real headless browser fetches everything with no CORS limits and full-page scroll, then you drop the scene.json.

# capture any URL to a scene file node capture/cli/capture.js https://example.com --out scene.json
Fidelity

Built for editing, not just for looking.

Every layer maps to something you can actually change in Figma. When a mapping cannot be reproduced, the plugin degrades on purpose and tells you why.

Every import
flex · grid · block

Real auto-layout

Spacing, padding, wrap, and stretch, mapped from the page's real CSS. A frame that can't reproduce the captured geometry falls back to absolute on its own, so the result is never worse than a pixel-faithful import.

styled text runs

Editable text

Family, weight, size, and color per run, with letter-spacing, line-height, transform, alignment, and decoration, all kept as live text.

<svg> · webp · bg-image

Vectors & image fills

SVG becomes native Figma vectors, WebP and AVIF transcode to PNG, background photos become image fills behind their content, and gradients map across.

@font-face (missing)

Fonts substituted, logged

Fonts you don't have are swapped — Inter by default, configurable — and every swap is listed in the report, so nothing changes silently.

every import

Honest report

What was substituted, which frames reverted to absolute, which images were skipped — laid out after every run. A node budget guards against runaway dumps.

React · Vue

Re-rendered DOM

Pages built by JavaScript are re-rendered with scripts on inside a sandboxed frame. Opt-in, because that step needs the network.

With Pro
repeated elements

Real components PRO

Repetition becomes real components with instances and variants — edit the main and every instance follows. Occurrences that would shift position stay plain frames, so nothing drifts.

repeated type

Shared text styles PRO

Recurring type becomes shared Figma text styles — change one and every text using it updates, each named by role and size.

Offline by default

By default, nothing leaves your machine.

Zero network requests with default settings. Self-contained files and web archives carry their own assets, so the import needs nothing from the outside.

Markup is sanitized before it renders: scripts, inline event handlers, and javascript: URLs are stripped.

Remote fetching is opt-in. JS-rendered pages run only in a sandboxed frame, and only when you turn it on deliberately.

Pricing

One-time pricing. No subscription.

The free plugin is the whole importer, auto-layout included. Pro lifts the 500-layer cap and structures what it imports — repeated elements become components, repeated type becomes shared text styles. Pay once; nothing renews.

Free
$0
The plugin, to try
Get the free plugin
  • Drop HTML, .webarchive or scene.json
  • Auto-layout from real CSS flex & grid
  • Up to 500 layers per import
  • Open-source capture CLI & bookmarklet
  • Personal use, community support
Most popular
Pro
$39one-time · per editor
The full plugin
  • Everything in Free
  • Unlimited layers per import — no 500 cap
  • Long, dense pages in one pass
  • Repeated elements become real components
  • Repeated type becomes shared text styles
  • Desktop, Mobile & custom viewports
  • Import reports & font-substitution log
  • Commercial use, one year of updates
Studio
$119one-time
Pro for a team of five
  • Everything in Pro
  • Up to 5 editors
  • Priority support
  • One year of updates

Launch pricing, and it may change. A purchase you have already made stays at the price you paid.

FAQ

Straight answers.

What UnHTML does, what it does not, and where its limits are, stated plainly.

Best with a self-contained .html file or a Safari .webarchive, since both carry their own images, styles, and fonts. For live sites behind the network, remote stylesheets, or pages built by JavaScript, use the CLI or bookmarklet to capture a scene.json, then drop that into the plugin.
No. Any font you do not have is substituted automatically (Inter by default, and configurable), and every substitution is listed in the import report, so you always know exactly what changed.
No. With default settings the import makes zero network requests and nothing leaves your machine. Remote fetching is an explicit opt-in toggle, off until you turn it on.
Pages that build their DOM with JavaScript are detected and re-rendered with scripts on inside a sandboxed frame. Because that step needs the network, it is opt-in. For the most reliable result on heavy apps, capture with the CLI first.
Those flatten a page into an image or trace an approximation of it. UnHTML builds real frames, editable text runs, native vectors, and true auto-layout from the page's actual CSS, so you edit it like something you drew in Figma yourself.
Yes. Auto-layout is mapped from the page's real flex and grid. When a frame cannot reproduce the captured geometry, it falls back to absolute positioning automatically, so the output is never worse than a pixel-faithful import, and you can turn conversion off entirely.
The whole importer is free — auto-layout, viewports, vectors, fonts, and reports — up to 500 layers per import. Pro removes that cap and adds structure to what you import: repeated elements become real components with instances and variants, and repeated type becomes shared text styles. Studio is the same as Pro, licensed for a team of up to five editors.
Pro and Studio are one-time purchases that include one year of updates. Launch pricing may change over time, but a purchase you have already made stays yours at the price you paid.
HTML → editable layers

Stop screenshotting. Start editing.

Bring any page into Figma as layers you can actually work with, and keep it all on your machine while you do.

Get UnHTML Review the workflow