How to import a Webflow site into Figma

Webflow built its name on the slogan "Figma to Webflow" — design here, ship there. Going the other way is just as useful, and oddly underserved: pulling a live Webflow site back into Figma to redesign it, audit it, or document it. The good news is that it imports unusually cleanly, because Webflow outputs tidy, semantic HTML and real CSS rather than the tangle some site builders leave behind.

Why import Webflow into Figma

If you spend your days in Webflow, the round trip back to Figma might sound redundant. It isn't. A few situations come up again and again:

• Redesigning a client's live site. The build already exists in Webflow, the brief is to rethink it, and you want to explore in Figma without poking at the production project. Importing the live page gives you an editable starting point in minutes instead of an afternoon of re-tracing.
• Creating a source of truth. Plenty of sites only ever existed in Webflow — built fast, never drawn in a design tool. Pulling the live page into Figma gives you a real, editable record of what shipped, to brand against or extend.
• Handing a build to a Figma team. If a site was made in Webflow but the people maintaining or evolving it work in Figma, the import bridges the two without anyone rebuilding screens by hand.

Import a Webflow site, step by step

Webflow makes this easy precisely because every published page is just a URL away. The flow is short:

1. Publish the site. Hit Publish in the Webflow Designer. You don't need a custom domain — the free .webflow.io staging URL works perfectly as the source.
2. Copy the page URL. Grab the address of the exact page you want — the home page, a pricing page, a CMS article. Each page imports on its own.
3. Run the importer and choose URL. In Figma, open Vellum and pick URL as the source, then paste the link.
4. Pick a width. Choose the viewport you're designing for — a desktop width to start, or a narrower one for the mobile layout.
5. Let it render. The page is measured from the real browser render and comes back as a frame full of editable layers — not a flat image.

For the wider picture of every way into Figma — paste, file, or live URL — see how to import a website into Figma. And if you want the desktop, tablet, and mobile layouts side by side, importing a responsive site covers capturing each breakpoint as its own frame.

What comes across cleanly

Webflow is a gift to an importer. Because it emits semantic HTML and genuine CSS — not inline-styled spaghetti — the browser resolves concrete values that a faithful importer can read straight off the render:

• Structure as frames. Sections, containers, and grids become frames positioned exactly where Webflow drew them, nested the way you built them.
• Text with the right fonts and weights. Headings and body copy stay live and editable, carrying their actual family and weight rather than collapsing to a default.
• Image fills. Photos and background-image assets download and embed as proper Figma image fills.
• Gradients and shadows. The decorative layer — linear-gradient backgrounds, box-shadow depth — arrives as real Figma effects, not baked into a picture.

The reason it holds together is Webflow's class-based styling. Every Webflow class resolves to actual computed pixels by the time the page is on screen, and that's what the importer measures — not the class names, but the numbers they produce. If Webflow drew a card at 348 pixels wide, the import is 348 pixels wide.

What to watch for

Webflow is clean, but parts of it live outside the static render, and an importer can only capture what the browser actually painted. Worth knowing before you start:

• Interactions don't come across. Webflow Interactions and page animations are JavaScript — scroll-triggered reveals, hover states, parallax, page-load motion. You get the resting state the page settles into, not the movement. If an element animates in from transparent, set its starting opacity aside in your mind: the import captures where it lands.
• CMS lists import as what's on the page now. A Collection list renders a fixed set of items at the moment you import — whichever posts, products, or cards are currently bound. You get those exact items as layers, not a repeating template you can refill.
• Lazy-loaded images may need a moment. Webflow defers images below the fold until you scroll near them. If a hero or gallery looks empty, let the page settle — or scroll it — before importing, so the assets are actually loaded.
• Embedded video and Lottie come in as a still. Background video, embedded players, and Lottie animations have no static layout to rebuild, so they're captured as a single frame rather than playable media.

The rule of thumb is the same one that applies to any site: whatever Webflow rendered from real markup converts cleanly; whatever it animates with JavaScript, or draws as video, is the part you'll finish by hand.

After import: redesign or document

Once the page is layers, it's yours to work with. You can restyle it in place — retype the copy, recolour fills, rework the spacing, swap the type — which is exactly the starting point for a refresh; redesigning a website in Figma walks through that. Or you can leave it as it landed and treat it as living documentation: a faithful, editable record of what the Webflow site looks like today, ready to annotate, hand off, or measure new work against.

The bottom line

Webflow and Figma are usually framed as a one-way street, design flowing into the builder. The return trip is quietly one of the cleaner imports you can do, because Webflow's tidy, semantic output is exactly what a measuring importer wants to read. Mind the JavaScript-driven parts, settle the lazy images, and you'll have an editable Figma file to redesign or document from — built from the live page, not redrawn from a screenshot.