How to get a Webflow, Framer or WordPress site into Figma

Why one method covers all three

Webflow, Framer and WordPress store your site in very different ways: a visual project, a canvas, a database plus a theme. But what each of them publishes is the same thing, which is HTML and CSS that a browser lays out.

html2figma works from that end result. It renders the page in a real browser engine, reads every element's final geometry and computed style, and rebuilds that as Figma nodes. It never looks at the builder's project file and never re-interprets the CSS. So the method doesn't change by builder, and you don't need an editor seat, an export plan or the client's login. If you can open the page, you can import it.

Step 1 — let the page finish rendering

The save captures the page as it is at that moment. Builder sites tend to load things late, so spend thirty seconds getting it into the state you want before saving.

• Scroll to the bottom, slowly. Lazy-loaded images and sections that fade in on scroll only appear once they've been on screen. Anything that hasn't appeared won't be in the file.
• Load the content you want. CMS lists with a "Load more" button or pagination only include what's currently on the page. Click through first if you need more items.
• Close cookie banners and popups. If an overlay is open when you save, expect it in the import.
• Set any tab, accordion or slider to the state you want in the design. You'll get that state.

Staging works the same way. A Webflow staging domain, a Framer preview link or a WordPress site behind a password or a VPN is fine: your browser is already signed in, so whatever you can see, you can save.

Step 2 — save the page as a single file

In Chrome or Edge: File → Save Page As… → Webpage, Single File. You get one .mhtml with the HTML, CSS and images packed inside it. If you prefer, save as Webpage, Complete and zip the .html together with its asset folder. The general website guide covers both options in more detail.

Step 3 — drop it on the plugin and pick viewports

In any Figma file, run html2figma, drop the saved file on it, tick any combination of Desktop, Laptop, Tablet and Mobile, and import. Each viewport is rendered separately and placed side by side, with the site's media queries genuinely applied. Builder sites are usually responsive already, so this gives you the breakpoints you built in one run, and a row that stacks on mobile imports as a vertical Auto Layout frame there.

Notes per builder

Webflow

CMS collection lists come in as whatever the page showed when you saved it, so load the items you need first. Interactions don't come across yet: the page's JavaScript never runs inside the plugin, and prototype interactions, hover states and transitions aren't imported yet. You get each element in the state it was in at save time. If something animates in on page load and imports invisible or offset, scroll past it, wait for the animation to finish, and save again.

Framer

The same applies to appear and scroll animations: save after they've played. Framer sites often use fonts you may not have installed. Fonts map to the closest font installed in Figma, with Inter as the fallback, so install the site's typefaces in Figma before importing if the type matters.

WordPress

The theme, and any page builder on top of it, produce rendered HTML and CSS, so the plugin treats them the same. Sliders, tabs and accordions driven by plugins come in as their saved state. Heavy sites with lots of lazy-loaded media are where the scroll-first step matters most.

What arrives in Figma

• Components from repeated blocks. Builder sites repeat a lot: CMS cards, blog rows, team members, nav items. Repeated blocks are detected by structure and rebuilt as one component with instances, each keeping its own text and images.
• Variables and Text Styles. Colours used more than once become Figma Variables in a new collection named after the import, with names like Slate 900 rather than hex codes. Repeated typography becomes Text Styles. Nothing already in your Figma file is read, reused or modified.
• Auto Layout where it's proven. The plugin proposes a stack, replays it, and keeps it only if every child lands within a pixel of where the browser put it. Otherwise the layer stays absolutely positioned at its real coordinates.
• Real text layers, gradients, per-side borders, per-corner radii, shadows, images and inline SVG as editable vectors, in a layer tree named from roles and content.

Where it falls short today

Being plain about this saves you a wasted afternoon. As of October 2026:

• Paste-a-URL isn't available yet. You save the page first, then drop the file.
• Motion isn't imported yet. Interactions, hover states and transitions from Webflow or Framer don't come across. You get a static, editable snapshot.
• One page per run. A twenty-page site is twenty saves and twenty drops. Batch import isn't available yet; it's earmarked for a future paid tier.
• One way, for now. The conversion currently runs one way, so editing the Figma file doesn't change the site.

If you're moving a site off a builder, redesigning it, or turning it into a design system, a static snapshot of each page is usually exactly what you need to start from. That's the job this does well.