Framer to Figma: UnHTML vs Framer's Web Import for Designers

Short answer: they run in opposite directions

Framer's web import and UnHTML do not compete head to head, because they move content in opposite directions. Framer's browser extension copies parts of a web page and pastes them into Framer. UnHTML is a Figma plugin that rebuilds a web page as layers inside Figma.

If you searched "framer to figma", you probably have a published Framer site and you need it in Figma as something you can edit. Nothing in Framer's own documentation that we found covers that direction. This article explains what each tool does, shows a practical route from a published Framer page into Figma, and lays the two side by side. Prices and features were checked on 2026-10-13.

Which direction each tool runs

Framer documents two ways of bringing outside material into a Framer project. One is a browser extension that copies sections from a live web page so you can paste them into a Framer project. The other is a separate official Figma plugin that imports selected Figma layers into Framer. Both end inside Framer.

UnHTML ends inside Figma. It is a plugin that converts a webpage into native frames, text, images, vectors and auto layout. So the useful question isn't "which is better." It's "where do you want the result to live?"

If you have read the direction a conversion actually runs for other tools, the same logic applies here. Check the destination before you compare features.

What Framer's web import does

Framer's tool is a Chrome extension called HTML to Framer. Install it, open your site, hover over an item and copy it. Hold Shift to copy several elements at once, or press Esc while hovering to select the parent element. In Framer you paste with Cmd+V on Mac or Ctrl+V on Windows.

Framer says that when you paste a section with multiple items, empty divs are discarded, which leaves a clean layer hierarchy. Once the elements are on the canvas you can edit them, add breakpoints and publish.

Framer is also candid about what comes next. Its lesson advises you to use the paste as a starting point, then review the layout, assets, and responsive behavior on the canvas. Fair enough. That's a sensible expectation for any conversion.

Two caveats on the sources. The extension page is dated September 5, 2023 and lists no limits or pricing. The Framer lesson notes that it predates the June 16, 2026 update (Agents, Branching and the CMS), so some of the interface may differ today. We have not verified Framer's current plan requirements, so this article does not state them.

For a team that wants to build in Framer, this is a quick way to pull sections of an existing site across. It is not built to hand you Figma layers.

What you get in Figma

UnHTML maps the page's own CSS onto Figma structure. Spacing, padding, wrapping and stretch come from the page's flex and grid CSS and become auto layout. Figma's own help center defines the pieces you will see: direction (vertical, horizontal or grid), gap, padding, wrap, and the resizing modes Hug contents, Fill container and Fixed. Figma documents these auto layout properties in detail, and our reference on how flexbox maps to auto layout covers the CSS side.

When a frame cannot reproduce the captured geometry, the plugin falls back to absolute positioning. Fonts that are not installed on your machine are substituted, and every swap is listed in the import report. It is an editable starting point, not a pixel-exact clone.

Capture methods and privacy

You can drop a self-contained .html file or a Safari .webarchive straight into the plugin. For live sites, remote assets or pages built with JavaScript, you capture a scene.json first with the CLI or a bookmarklet. With default settings the import makes no network requests, and remote fetching is an opt-in setting.

Pricing as of 2026-10-13

The plugin's own page lists three one-time prices with no subscription:

The page notes that launch pricing may change, and that a completed purchase keeps the price paid.

Getting a published Framer site into Figma

This route treats your published Framer page like any other website. The prerequisite is that the page is published, because you are capturing what a browser sees.

1. Open the published page in Chrome or Safari.
2. Save it as a self-contained HTML file (see how to export a self-contained HTML file from Chrome), or capture a scene.json with the CLI if the page depends on scripts or remote assets.
3. Open Figma, run the plugin and drop the file in.
4. Read the import report. Look for substituted fonts and frames that fell back to absolute positioning.
5. Clean up and componentize what you plan to keep editing.

Expect differences. Framer sites are often animated and heavily responsive, and a capture records one viewport state. Check the breakpoints you care about and rebuild interactions by hand, since a static capture carries no behavior.

There are other tools in this category too. If you are weighing another web-to-Figma plugin, compare pricing, layer limits and output on the same page before you pick. We did not verify any Framer-side export tools for this article, so we do not cover them.

Side by side

The table shows a difference in destination, not in quality. Framer's tool is the shorter path if the finished site will live in Framer. The Figma plugin is the shorter path if the finished work lives in Figma, where the layers are native and the auto layout is real.

Which one to use

Pick by destination. If you are moving a page into a Framer project, use Framer's extension and review the result on the canvas, as Framer advises. If you are moving a published Framer page into Figma, capture the page and import it with a Figma-side tool, then read the import report before you trust the layers. Either way, treat the output as a starting point, and budget time for cleanup.

Frequently Asked Questions

Can Framer export a site to Figma?

The Framer documentation we found covers the other direction: a Figma plugin for bringing Figma layers into Framer, and a browser extension for bringing web page sections into Framer. We found no official Framer-to-Figma export, so the practical route is to capture the published page and import that into Figma.

Does Framer's web import produce Figma layers?

No. The extension copies elements from a live page and you paste them into a Framer project, so the result is Framer layers.

What does UnHTML cost?

As listed on unhtml.pro on 2026-10-13: Free at $0 with a 500-layer cap per import, Pro at $39 per editor one-time, and Studio at $119 for up to five editors.

Will the Figma result match the Framer page exactly?

No. Fonts that are not installed are substituted, and complex geometry can fall back to absolute positioning. Treat the import as an editable starting point, not a clone.