Does Export to Figma work on .webflow.io staging URLs?

Yes — .webflow.io staging URLs work identically to published custom domains. The extension captures whatever Chrome renders, regardless of which domain serves it. Useful when you're working on a Webflow site that hasn't gone live yet and want the design into Figma.

What happens with Webflow's interactions and animations?

Animations don't come through — Figma is a static design tool, so there's no concept of motion in the captured layers. The visual state at the moment of capture is preserved. If you want to capture a specific animation state (an open dropdown, a hover state, a mid-scroll position), trigger the state in your browser first, then capture.

Does it work with Webflow CMS-driven pages?

Yes. CMS pages render in the browser the same as any other Webflow page — by the time you click the extension, the CMS content is already painted. You'll get the rendered page with the dynamic content baked in as Figma text/image layers. If the CMS has variants you want to compare, capture each variant URL separately.

Are Webflow's auto-layout classes preserved as Figma auto-layout?

Yes, in most cases. Webflow's flexbox and grid classes compile to standard CSS flex/grid, which Export to Figma translates to Figma auto-layout. Complex nested grids with named areas need some manual cleanup, but the common Webflow patterns — flex containers, gap-spaced grids, padding-based sections — come through clean.

Can I capture just one section of a Webflow page?

Yes — Export to Figma supports element-level capture. Click the extension, hover over the section you want (a hero, pricing table, testimonial row), click. Only that element comes into Figma as its own frame. Useful when you only want one pattern for a component library rather than the whole page.

Does it work with paid Webflow features like memberships or ecommerce?

If the page renders in Chrome, the extension captures it. For Webflow Memberships, sign in to the member area in Chrome first — captures from your logged-in session work normally. For Webflow Ecommerce, product pages and checkout pages render the same way and capture as editable layers.

How does this compare to other tools for Webflow → Figma?

Webflow doesn't have a native Figma export. The alternatives are server-side capture tools (html.to.design, Anima, Magicul) which all fetch from outside your browser and tend to flatten dynamic Webflow content. Export to Figma reads the painted DOM in Chrome, so CMS pages, member areas, and interaction states all come through as editable layers.

Export Webflow to Figma — One-Click Editable Layers

What this is

A focused workflow for designers tackling Webflow projects: capture any Webflow site into Figma as editable layers — one click, no plugin install inside Figma, works on published sites, .webflow.io staging URLs, and member-only pages alike.

Export to Figma is a Chrome extension. Open your Webflow page in Chrome, click the extension, paste into Figma. Typography, colors, images, and auto-layout come through preserved.

Why this matters for Webflow specifically

Webflow has a particular pain point in the Figma direction. The platform is excellent for shipping production sites, but there's no native bridge back to Figma. So when you need to:

Redesign an existing Webflow site — yours or a client's
Audit a competitor's Webflow build for inspiration or analysis
Iterate visually in Figma before pushing changes back to Webflow
Extract reusable component patterns from a polished Webflow site

…you have to get the design into Figma somehow. The usual options have been:

Manually rebuild in Figma — slow, hours per page.
Screenshot and trace — produces a flat reference at best, not editable layers.
Server-side capture tools — often fail on Webflow's CMS pages, interaction states, and member-only content.

Export to Figma fixes the third option by running inside Chrome instead of fetching from outside the browser. Whatever you see on screen, the extension captures.

How to export Webflow to Figma

1. Install Export to Figma

From the Chrome Web Store — free, 30 seconds. Pin the extension to your Chrome toolbar.

2. Open the Webflow site in Chrome

Any URL works:

Published custom domain — yoursite.com
Staging URL — your-project.webflow.io (no different from a custom domain to the extension)
Specific CMS page — /blog/article-slug, /products/specific-product, etc.
Member-only page — sign in to Webflow Memberships in Chrome first
Editor preview — works if you're logged into your Webflow account

3. Capture

Click the Export to Figma extension icon. Two options:

Whole page — captures everything currently rendered.
Single element — hover over an element first to select just that section.

The capture takes 2–5 seconds.

4. Paste into Figma

Cmd+V on Mac, Ctrl+V on Windows. The Webflow site appears as Figma frames with editable layers.

Webflow-specific things to know

CMS pages

Webflow's CMS dynamically populates page templates with content. Different items, different URLs, same template. Each CMS item renders as its own URL — capture each URL separately if you want them all in Figma.

When you capture a CMS page, the dynamic content (text, images, links) comes through as static Figma layers — exactly what you'd see if you visited the page. If the CMS has a Collection list with 50 items, you'll capture the first N that are rendered on the page when you click.

Webflow Interactions

Webflow's Interactions panel (IX2) lets designers build animations, scroll-triggered effects, and click-state changes. None of these come through to Figma — animations and interaction states are runtime concepts, not static design data.

If you want to capture a specific animation state (a dropdown after it's opened, an accordion mid-expand, a sticky nav after scroll), trigger the state in Chrome first, then capture. You'll get the visual state at the moment of capture, frozen in Figma.

Flexbox and Grid → Figma auto-layout

Webflow's flexbox sections, grid sections, and padding-based layouts compile to standard CSS. Export to Figma translates flex/grid containers to Figma auto-layout where possible. The common Webflow patterns — vertical-stacked sections, horizontal flex hero rows, gap-spaced feature grids — come through with auto-layout structure intact.

Complex grids with named template areas need some manual cleanup in Figma. They're rare in marketing sites and common in app-style layouts.

Webflow Memberships and gated content

Member-only pages render in the browser the same as any other page once you're signed in. Sign into Webflow Memberships in Chrome first, navigate to the member area, click the extension. The logged-in view captures normally.

This is the case that breaks every server-side capture tool — they fetch URLs from outside your browser and hit the member login wall instead of the content. Export to Figma uses your existing Chrome session, so it just works.

Webflow Ecommerce

Ecom product pages, collection pages, cart, and checkout all render in the browser and capture as editable layers. Useful for ecom redesigns where the existing store is on Webflow and you want every page type into Figma at once.

What gets preserved

Element	Preserved?
Typography (font family, size, weight, line height)
Brand colors, gradients, shadows, borders
Images at original resolution
Layout (flex/grid → Figma auto-layout)
Editable text content
Webflow CMS-rendered content	(as static layers)
Member-only / authenticated content
Webflow Interactions and animations
Hover/focus states (without manual trigger)
Webflow's design panel structure	(we get the rendered result, not the source)

A real workflow: agency pitching a Webflow redesign

An agency designer I worked with had a redesign pitch for a Webflow site. The client's existing site was a fairly standard SaaS marketing setup — homepage, pricing, features, docs, blog (CMS), all running on Webflow.

Before the meeting, the designer wanted the existing site in Figma so they could pitch the new design on top of the current one — side-by-side, before/after, with the freedom to iterate during the call.

Old workflow: 4–6 hours of manual rebuilding in Figma to recreate the existing site as a reference. Not pixel-perfect, just close.

New workflow with Export to Figma:

Captured the homepage in 5 seconds.
Captured each pricing tier (the page rendered the toggle states inline) in another 30 seconds.
Captured the docs landing, three deep doc pages, and the blog index in two minutes total.
The blog posts (CMS-driven) — captured three representative posts to cover the variations.

Total time on the capture step: under 5 minutes. The remaining design time was actual design work, not reference-building.

Pricing

Free: 10 captures per month, forever, no credit card.
Pro: $1/month during the launch promo. Unlimited captures.