Can You Export Webflow to Figma?
Not natively. Webflow can publish and export code, but it does not produce Figma files. Tools that turn a rendered web page into Figma layers fill the gap: html.to.design imports a public URL, and html2design converts HTML you copy from the browser. Both read what the browser renders, so a Webflow page imports like any other website.
- Redesigning an existing Webflow site: start from the real live layouts instead of an outdated design file.
- UX audit: annotate the actual pages, spacing and content hierarchy in Figma.
- Design system extraction: collect colors, type scale, buttons and cards that grew inside Webflow.
- Handing a Webflow-first site to designers: give a team that never had a Figma file something to work in.
- Documenting before a migration: keep a visual record of every template before content moves.
Three Ways to Get a Webflow Site into Figma
Pick the method by how many pages you need and how much of the result you plan to keep.
| Method | How it works | Best for | Limits |
|---|---|---|---|
| html.to.design plugin | Paste a published URL into the Figma plugin, choose a desktop, tablet or mobile viewport and import editable layers. Bulk import takes several URLs; the browser extension captures private pages. | A fast redesign baseline across several pages. | Animations are not imported; fonts you do not have are replaced until you install them. |
| html2design | Copy the page's outerHTML from browser DevTools and paste it into the plugin. Copy a single section to import just that component. | Pages behind a login, or a specific open state such as a menu or modal. | One page or section at a time; free to try with paid features. |
| Manual rebuild | Recreate the layouts from screenshots and the live style guide with Auto Layout, components and variables. | A design system the team will maintain for years. | Slowest; needs design time for every template. |
Step by Step: Import a Webflow Page with html.to.design
The plugin route takes minutes per page. Most of the real work is the cleanup afterwards.
1. Install the plugin
Find html.to.design in the Figma Community and run it from the plugins menu.
2. Copy the published URL
Use the custom domain or the webflow.io staging address. The page must be publicly reachable, or captured with the browser extension.
3. Choose the viewport
Import desktop first, then repeat for tablet and mobile so each breakpoint lands in its own frame.
4. Fix fonts
Install the site's web fonts locally or map replacements; the plugin offers to download missing fonts.
5. Import related pages
Use bulk import for templates such as home, service, blog post and contact.
6. Clean up and version
Rebuild components and styles, then save the file as the redesign baseline.
Capture Every Webflow Breakpoint
Webflow designs from a base desktop breakpoint and cascades changes down to smaller ones. Import each width you care about, because the sections stack and resize differently.
| Breakpoint | Width to import | What to look for |
|---|---|---|
| Desktop (base) | 1440px or your main design width | Grid columns, max widths, navigation layout. |
| Tablet | 991px and below | Two-column grids that stack, navigation that collapses into a menu. |
| Mobile landscape | 767px and below | Card grids, image ratios, button groups wrapping. |
| Mobile portrait | 478px and below | Font sizes, padding, long headings, tables and forms. |
Clean Up the Import So Designers Can Use It
An imported page is a picture made of layers. These steps turn it into a file a team can design in.
Rebuild repeating parts as components
Navigation, buttons, cards, footer and form fields should become components with variants, so a change applies everywhere.
Add Auto Layout to sections
Sections that resize like the live site make it obvious when a redesign breaks on narrow widths.
Turn colors and type into styles
Map the live color palette and type scale to Figma styles or variables that mirror the Webflow variables.
Keep useful layer names
Webflow class names imported as layer names make a later round trip easier, because the Figma to Webflow plugin turns layer names into classes.
Flatten extra wrappers
Remove wrapper frames that exist only because of how the browser rendered the page.
Mark CMS-driven areas
Label blog lists, case studies and other collection content so designers know what is dynamic.
Taking the Redesign Back to Webflow
When the redesign is approved, either rebuild the changed sections in Webflow or prepare them with Auto Layout and transfer them with the official Figma to Webflow plugin. Sync creates Webflow components; copy/paste creates elements. Check incoming classes against the existing site so new sections do not overwrite styles that live pages still use.
Follow the transfer steps
Use the Figma to Webflow plugin tutorial for preparation, sync and responsive checks.
Hand off the build
Hire a Figma to Webflow developer to implement the redesign with CMS and launch QA.
Start with design
Work with a UX/UI designer on structure and layouts before rebuilding.
Budget the rebuild
See what a Figma to Webflow build costs by scope.
Webflow to Figma FAQ
Does Webflow export to Figma?
No. Webflow does not export Figma files. You import the published page into Figma with a plugin such as html.to.design or html2design, or rebuild the layouts by hand.
Are Webflow interactions imported into Figma?
No. Animations are not imported. html.to.design notes that hover states can come in as Figma components; with html2design you trigger a state in the browser before copying it.
Can I import Webflow CMS pages?
Yes. A published CMS template page renders as normal HTML, so it imports like any other page. The result is a static design with the item's real content; the collection binding is not kept.
Can I import a webflow.io staging site?
Yes, if the page is published and publicly reachable. For password-protected or private pages, use the html.to.design browser extension or copy the HTML from your own logged-in browser.
Is the imported file ready for a redesign?
It is a starting point. Plan time to rebuild repeating parts as components, add Auto Layout and turn colors and type into styles or variables before the team designs on top of it.
Can I send the redesign back to Webflow?
Yes. Either rebuild the changed sections in Webflow or prepare them with Auto Layout and use the official Figma to Webflow plugin, which syncs components or copies elements into a Webflow site.
Planning a Redesign of a Webflow Site?
I can audit the current site, design the new version in Figma and rebuild it in Webflow without losing the content structure your team relies on.
