Importing Webflow to Figma means taking a published Webflow site's rendered HTML and converting it into native, editable Figma layers — preserving every color, font, spacing value, and layout that Webflow generated. Because Webflow outputs standard computed CSS, html2design reads the resolved styles (not Webflow's internal variables) and maps them to Figma fills, text styles, and frame properties. The result is a Figma file that reflects the real live site — not a static screenshot or a hand-rebuilt approximation.
Why Move from Webflow to Figma?
Webflow and Figma occupy different points in the design-development spectrum. Webflow is a visual website builder and CMS — excellent for launching and managing a live site. Figma is a collaborative design tool — the right place for component libraries, design systems, and iterative product work.
Teams typically need to move from Webflow to Figma for one of these reasons:
- Onboarding a design team — The site exists only in Webflow, and designers need an editable Figma source to work from when proposing changes or building new pages.
- Building a design system — You want to extract the visual language from your live Webflow site (colors, type, spacing) into a formal Figma component library for future work.
- Migrating platforms — You're moving away from Webflow to a custom-coded stack and need Figma designs to hand off to developers.
- Creating documentation — Marketing or product teams need accurate Figma mockups for presentations, pitch decks, or internal documentation.
In all of these cases, rebuilding the site from scratch in Figma wastes time that should go toward forward work. The rendered HTML already contains everything Figma needs — the goal is to extract it cleanly.
Key insight: Webflow doesn't store your design in a format Figma can read — it stores it as structured data that generates HTML on publish. But that published HTML is perfect input for html2design. You're not trying to reverse-engineer Webflow's internal representation; you're capturing the visual output that the browser already computed.
What Transfers (and What Doesn't)
Before you start, it's worth setting expectations about what moves cleanly and what requires manual cleanup.
| Element | Transfers via html2design? | Notes |
|---|---|---|
| Text content & fonts | Yes | Text layers with font name, size, weight, line-height, color |
| Colors & fills | Yes | Background colors, text colors, border colors as Figma fills |
| Spacing & layout | Yes | Padding, margins, flex/grid layout as positioned Figma frames |
| Images & SVGs | Yes | Embedded images load; SVG icons import as vector layers |
| Border radius & shadows | Yes | Computed values become Figma corner radius and drop shadow |
| Webflow interactions | No | Capture each state as a separate static frame |
| Scroll animations | Partial | Capture the triggered state in DevTools; import as a frame |
| Lottie / video | Partial | First frame or poster image; annotate with a note layer |
| CMS content | Yes | Any published CMS page with real data imports cleanly |
Step-by-Step: Import a Webflow Page into Figma
Step 1
Publish your Webflow site
Your Webflow project must be published (or in preview mode) so a real URL exists. Staging domains (*.webflow.io) work fine — you don't need a custom domain. If your site has a password, disable it temporarily or use the Webflow preview link.
Step 2
Open the page in Chrome and inspect it
Navigate to the page you want to import. Open DevTools (Cmd+Option+I / F12), click the Elements panel, and find the <body> tag or the specific section you want. Right-click the element → Copy → Copy outerHTML. For a full page, copy from <body> down.
Step 3
Paste into html2design in Figma
Open Figma, run the html2design plugin, select Paste HTML, and paste your copied outerHTML. The plugin processes the code and generates a frame containing all Figma layers — text nodes, shapes, image fills — matching the rendered Webflow page.
Step 4
Import section by section for large pages
For full-page imports, Webflow pages often include navbars, heroes, feature sections, testimonials, and footers. Import each major <section> or <div> separately into its own Figma frame, then assemble them in the correct order on the canvas. This gives you cleaner layers and makes each section independently reusable.
Step 5
Clean up the Figma output
After import, rename ambiguous layers (html2design uses tag+class names as layer names), group related elements, and remove invisible wrapper divs that don't contribute visually. If you're building a component library, extract repeated elements (buttons, cards, nav items) into Figma Components.
Pro tip: Webflow often adds utility wrapper divs (w-layout-grid, w-container) around content. In Figma, these appear as extra frames. Flatten them with Cmd+G or just delete the wrapper frame while keeping the children — use Edit → Select All with Same Layer Type to batch-select empty wrappers.
Capturing Webflow Interactions as Figma Frames
Webflow's interactions — scroll-triggered reveals, hover animations, click-to-open modals, tab switches — are JavaScript-driven and have no Figma equivalent. But you can document each animated state as a static Figma frame, which is exactly what designers need for handoff and specification.
Hover states
Open DevTools, select the element, and in the Styles panel click the :hov toggle to force the :hover pseudo-class. The browser applies Webflow's hover styles (color changes, scale transforms, opacity transitions). With hover forced on, copy the outerHTML and import it as a separate Figma frame labeled "— Hover State."
Scroll-triggered animations
Scroll the page to the point where the animation has triggered (e.g., an element has faded in or slid up). DevTools → Elements will show the final computed state with the animation complete. Copy the outerHTML at that point for the "revealed" frame. Import both the pre-scroll state and the post-scroll state as separate Figma frames to document the transition.
Modal and dropdown states
Click the trigger in the browser to open the modal or dropdown. Once it's visible, copy its outerHTML from DevTools. This gives you the fully-rendered open state as a Figma frame. In Figma, place this frame above the base page frame on the canvas to show the overlay relationship.
Lottie and video blocks
Webflow Lottie animations and video backgrounds import as still images (the first frame or poster image that the browser painted). This is usually enough for design documentation — add a text annotation layer in Figma noting "Lottie animation here" or "video autoplay" so developers understand the intent.
Importing Webflow CMS Templates
CMS Collection Pages are one of Webflow's most powerful features — and they import cleanly because any published CMS URL renders real data as standard HTML. To import a CMS template into Figma:
- Navigate to a published CMS item URL (e.g.,
yoursite.webflow.io/blog/post-slug). - The page renders with real content — no CMS binding placeholders visible in the output.
- Use DevTools to copy the
<main>content or individual sections. - Import into html2design as normal — you get a Figma frame with real article content, real images, real metadata.
For design system work, import 2–3 different CMS items to see how the template holds up with varying content lengths and image aspect ratios. This reveals layout assumptions (e.g., fixed-height hero images) that need to become flexible in Figma Components.
Building Your Webflow Design System in Figma
If the goal is a proper Figma design system — not just a static reference file — the Webflow import is the starting point, not the end product. After importing the key pages, here's a recommended workflow:
- Extract the color palette — Collect all unique hex values from your imported layers using Figma's Inspect panel. Register them as Color Styles or Variables.
- Extract typography — Identify all unique font/size/weight/line-height combinations. Create Figma Text Styles for each.
- Identify repeating components — Find elements that appear on multiple pages: navbar, footer, cards, buttons, form fields. Each is a candidate for a Figma Component.
- Build the component library — Create Figma Components from your extracted elements, attaching your Color Styles and Text Styles to them.
- Document Webflow-specific patterns — Note any Webflow-only behavior (e.g., CMS binding, Webflow form logic) that won't transfer to a custom-coded replatform. Add annotation frames in Figma.
For a detailed guide to the design system extraction process, see Design System Migration: From Code to Figma Components.
Frequently Asked Questions
Can I import a Webflow site into Figma?
Yes. Open the published Webflow site in a browser, copy the outerHTML of the section or page you want, and paste it into the html2design plugin in Figma. You get native Figma layers reflecting the live Webflow design.
Does Webflow have a native Figma export?
No. Webflow's internal representation is not directly exportable to Figma. The practical workaround is the rendered HTML approach: because Webflow generates standard, well-structured HTML/CSS, html2design handles the conversion reliably without any special Webflow integration.
What happens to Webflow animations in Figma?
Animations don't transfer — Figma is a static design tool. Capture each interaction state as a separate Figma frame: default state, hover state, triggered state. See the Capturing interactions section above for the exact DevTools workflow.
Can I import a password-protected Webflow site?
Not directly via the published URL — the password gate renders before your page HTML. Options: temporarily disable the password on a staging branch, use the Webflow preview link (which doesn't require a password), or export the site's HTML/CSS from Webflow directly and import the local files.
Webflow to Figma Checklist
- ✓ Publish (or preview) the Webflow site before importing
- ✓ Import section-by-section for large pages — don't copy the entire DOM at once
- ✓ Capture hover and interaction states separately using DevTools force-state
- ✓ Import at least 2 CMS item URLs to validate template flexibility
- ✓ Clean up Webflow wrapper divs (w-container, w-layout-grid) after import
- ✓ Register colors and type as Figma Styles/Variables before building components
Key Takeaways
- ✓ Webflow outputs standard HTML and CSS — html2design reads the browser's computed styles, not Webflow's internal variables, so the import is a faithful capture of the published design
- ✓ Publish (or use preview) before importing — the Webflow designer view renders internal variables, not final CSS values
- ✓ Import section-by-section for large pages — copying the entire
bodyat once slows conversion and makes the Figma output harder to organize - ✓ Capture hover and interaction states separately using DevTools force-state — import each state as a distinct Figma frame or Component Variant
- ✓ After import, clean up
w-containerandw-layout-gridwrapper layers, then register colors and type as Figma Styles/Variables before building components
Related Articles
The Complete Guide to HTML to Figma Conversion (2026) →
The pillar guide covering every framework, every method, and every use case — all in one place.
How to Import a Website into Figma →
The core import workflow — Chrome extension vs code paste — that underpins every site-to-Figma migration including Webflow.
Design System Migration: From Code to Figma Components →
Extract design tokens and components from any HTML/CSS codebase — including Webflow's output — into a native Figma library.
Responsive Design to Figma: Converting Breakpoints to Variants →
Webflow's responsive breakpoints can each be imported as separate Figma frames and combined into Variants.
How to Convert HTML to Figma: A Developer's Guide →
The foundational guide — DevTools workflow, code paste, and output cleanup in Figma.
Screenshot vs Code Import: Which Figma Method Actually Wins? →
Why the code import approach gives you editable layers while screenshots leave you with a flat image.
Use Case: Webflow to Figma →
The full step-by-step use case workflow for migrating a Webflow project into an editable Figma design system.
Try it now
Import your Webflow site in 60 seconds
Open your published Webflow page, copy a section's outerHTML from DevTools, and paste it into html2design. Get native Figma layers with all Webflow styles preserved — no rebuild required.
Install from Figma Community →$12/mo · $96/yr · Cancel anytime