A Webflow logo with an arrow pointing into a Figma logo.

From Webflow to Figma

Migrating a Webflow site back into Figma isn’t exactly straightforward. Maybe you’re trying to redesign a site, reuse components, or collaborate with a team in Figma—but there’s no native “export Webflow to Figma” button in Webflow.

That leaves you stuck manually recreating screens, taking screenshots of pages, or rebuilding layouts from scratch. It’s frustrating and, certainly, not the best use of your time.

Luckily, there’s a faster way. With the html.to.design plugin, you can export from Webflow to Figma in just a few clicks. In this guide, we’ll show you exactly how to do it step by step.

TL;DR

You can migrate any live Webflow site to Figma using the html.to.design plugin. Just paste your Webflow URL, import, and you’re ready to iterate or redesign inside Figma. Great for handoffs, audits, or starting a new project from an existing site. Follow these 5 easy steps to migrate a site from Webflow to Figma:

  1. Install the html.to.design plugin in Figma
  2. Open the live Webflow website and copy its URL
  3. Run the html.to.design plugin in Figma
  4. Update your design in Figma
  5. Publish your site using the figma.to.website plugin or Figma Sites

Why migrate from Webflow to Figma?

By having your website in Figma and publishing it with figma.to.website or Figma Sites, you can keep one source of truth for your design and website. Updates are easy to make, and you can quickly iterate on your design without needing to jump back into Webflow.

5 steps to migrating your site from Webflow to Figma

Screenshot of Figma canvas with Clario website imported

We used html.to.design to migrate a live Webflow site such as the Clario website. It didn’t take us long to start redesigning it in Figma!

1. Install the html.to.design plugin in Figma

Search for “html.to.design” in the Figma Community and click [Run]. It’ll appear under your Figma plugins menu. If you’ve already installed it, you can launch it from the search icon on your bottom menu.

Screenshot of Figma canvas with Clario website imported

2. Open your Webflow site

Copy the live URL of the Webflow page you want to import. You can use the published link, including staging domains.

The html.to.design plugin can only import public URLs that are accessible on the web. If you want to import a private page, you can use the html.to.design browser extension to capture it directly from your browser.

3. Run the html.to.design plugin

Video of launching html.to.design Figma plugin and importing the URL

Paste your website URLs into the plugin. Choose your preferred viewport (desktop, tablet, or mobile). Click Import and wait a few seconds.

4. Use Figma features to take the design further

Video of someone editing the design of the website in Figma

Now that your Webflow site is editable, you can tweak spacing, restyle components, or convert sections into reusable Figma assets.

5. Publish your website

Video of publishing the website to the web directly from Figma

Want to take it full circle? Once redesigned, you can publish your Figma designs without leaving Figma, using the figma.to.website plugin or Figma Sites – no dev handoff needed.

💡 Tips

Missing fonts

If a Webflow site uses a font not available in your Figma file, it may get replaced.

Fix: Install the correct font locally or choose a similar fallback in Figma. html.to.design will also offer to download the missing font directly in Figma.

Video of the font mapping dialog in html.to.design plugin

Multi-page website

Want to migrate more than one Webflow page to Figma?

Solution: Use the bulk import feature in html.to.design. Paste multiple URLs and import them all in one go.

Screenshot of html.to.design plugin with multiple URLs ready to be imported

💬 FAQs

Q: Can I import a Webflow project file directly into Figma?

Nope, Webflow doesn’t export design files. But you can import the live website using html.to.design.

Q: Does the plugin import animations and interactions, too?

Animations aren’t imported yet, but components from your page can be imported with hover states, as Figma components.

🛟 html.to.design can save the day!

Whether you’re salvaging an old Webflow site or kicking off a fresh project, html.to.design helps you move faster. It turns any live website into editable Figma layers in seconds — so you can skip the rebuild and get straight to iterating, collaborating, and shipping.