Webflow to Figma: Three Workflows Compared in 2026

Webflow has no native export to Figma

There is no built-in way to send a Webflow site to Figma. Every workflow captures the rendered page and rebuilds it as Figma layers. As of 2026-10-20, three kinds of tool do that: URL import plugins, a Chrome extension, and file-based import. They agree on the big things and differ on inputs, auto layout and cost.

This guide is for designers who inherit a Webflow site with no design file and need it inside Figma as editable layers. None of these tools gives you a pixel-exact clone. You get layers you can edit, plus a handful of things that fall back or get lost. The sections below spell out which.

The official app only runs the other way

Webflow's own Figma to Webflow app syncs components, variables and styles from Figma into Webflow. Its listing describes one direction, Figma to Webflow, and nothing in the reverse direction. It is free to install, and it needs the Figma plugin plus authorization for your Webflow workspaces or sites.

The reverse is harder because Webflow does not export design source files. As the html.to.design team puts it in its Webflow guide, the live site is the only input. That is why every tool below works from the page as a browser renders it.

Three ways to get a Webflow page into Figma

URL import plugins

html.to.design and Vellum run inside Figma. You paste a published or staging URL, pick a width, and import. The html.to.design guide lists desktop, tablet and mobile viewports, accepts several URLs at once, and says it can only import public pages. For private pages it points to its browser extension. Vellum's 2026 post describes the same flow: publish the site, copy the URL, choose URL as the source, pick a width.

It's the fastest route for a public marketing page, and you never leave Figma.

Browser extension capture

Export to Figma is a Chrome extension. You open the Webflow page, click the extension, choose the whole page or one element, and paste into Figma with Cmd+V or Ctrl+V. The vendor says a capture takes 2 to 5 seconds. Because it reads the rendered page, pages behind a login work when you are signed in to Chrome, and you can capture a single section instead of the whole site.

File-based import with UnHTML

UnHTML is the one we build, so weigh this section accordingly. It does not take a URL in the plugin. It imports a self-contained .html file, a Safari .webarchive, or a scene.json captured with the open-source CLI or bookmarklet. For a live Webflow URL you run the capture first, for example node capture/cli/capture.js https://example.com, saving the result as scene.json, then import that file. You can also export a self-contained HTML file from Chrome.

That's one more step than pasting a URL. In return, you hold a capture file you can re-import later or hand to a teammate. With default settings the import makes zero network requests, and fetching remote assets is an opt-in.

What carries over and what falls back

The vendor pages agree on the headline: text stays editable, images arrive as fills, and structure becomes frames. They also agree on what is lost. The table below uses what each vendor states on its own page as of 2026-10-20. "Not stated" means the page is silent, not that the feature is missing.

Interactions and CMS content

Webflow Interactions are runtime behavior, so none of the tools bring them across. Vellum says you get "the resting state the page settles into, not the movement." Export to Figma suggests triggering a state in Chrome first, such as an open dropdown, then capturing it. A CMS collection list arrives as the items present at capture time, not a repeating template you can refill.

Video and Lottie become a single still frame in Vellum's description, and lazy-loaded images can show up empty unless the page loads them first. Scroll the page before you capture.

Auto layout

Figma's auto layout guide defines three resizing modes: hug contents, fill container and fixed. Constraints generally do not apply to children of an auto layout frame. A faithful import has to choose one of those modes for every child, and that is where tools differ.

UnHTML maps the page's CSS to auto layout, such as flex-direction, gap and justify-content. When a frame cannot match the captured geometry, it falls back to absolute positioning on its own. The import report lists every font substituted, frame reverted to absolute and image skipped, so you see what changed. Auto layout conversion needs the Pro plan. See how CSS Grid maps to layers for the hardest case. Export to Figma says its flex and grid translate to auto layout where possible, and that complex grids with named template areas may need manual cleanup. The html.to.design and Vellum pages do not state how they handle it.

If your Webflow page is a stack of simple flex sections, expect any of these tools to give you a workable start. A dense grid is different: plan on manual cleanup with every one of them. A screenshot plus image trace would not give you either.

Cost, checked 2026-10-20

Prices come from each vendor's own page on the day of writing, and they can change.

• UnHTML: Free up to 500 layers per import. Pro is $39 one-time per editor, with no layer cap. Studio is $119 one-time for up to five editors. The page says "per page" in one place and "per import" in another, so the exact scope of the 500-layer cap is unclear.
• Export to Figma: Free for 10 captures per month. Pro is $1 per month during a launch promotion, with unlimited captures. The page says the promo price may not last.
• html.to.design and Vellum: We did not verify their current pricing, so we do not quote it. Vellum's post shows an "Add to Figma, free" button and no price list.

One-time and monthly pricing suit different jobs. A single redesign favors the one-time purchase. A steady stream of captures favors whichever monthly plan is cheaper on the day you read this, so check the vendor page again before you buy.

Which workflow fits which job

• A public Webflow page and a quick look: a URL plugin or the extension. Paste, import, edit.
• A page behind a login: the extension, since it uses your signed-in browser, or html.to.design's extension for private pages.
• A capture you keep, with a report of what fell back: file-based import, accepting the extra capture step.
• Sending a design to Webflow: Webflow's own Figma to Webflow app.

Test one page before you commit

No workflow makes Webflow to Figma lossless. Interactions and CMS templates do not come across in any of them, and dense grids need cleanup in all of them. Pick one representative page, import it with two tools, and compare the layers you actually have to fix. If you want to try the file-based route, UnHTML is at unhtml.pro.