Framer and Figma live close together in a lot of workflows — one tool ships the site, the other shapes what comes next. So when a page is built and hosted in Framer but the following round of design has to happen in Figma, the gap between them feels larger than it should. You can close most of it by importing the published Framer URL and getting editable layers back. There's one honest caveat, and it's about the very thing Framer is best known for: motion.
Import a published Framer site by its URL and it rebuilds as editable Figma layers. The static composition — layout, type, images — imports well; Framer's signature scroll animations and any 3D or canvas hero sections are the hard parts, arriving as a resting frame or, for WebGL heroes, a flat image.
When to go Framer to Figma
Framer is a fine place to build and ship a site. But the design work doesn't always stop there, and Figma is where a lot of it continues. A few moments where bringing a Framer page back into Figma earns its keep:
- Design-system work. You shipped a marketing site in Framer and now need to fold its real type scale, colours, and components into a Figma library the rest of the team draws from.
- A redesign. The existing Framer site is the starting point for the next version, and you'd rather restyle a faithful copy than rebuild every section from a screenshot.
- Collaboration. Your team — or a client's — is standardised on Figma. The live Framer page is the source of truth, and everyone needs it on the canvas to comment, redline, and iterate.
In each case the goal is the same: reclaim a Framer marketing site as an editable design file, not a flattened picture of one.
Import a Framer site, step by step
The path is short, and it works off the published page rather than the Framer editor:
- Publish the site — or use the free staging URL Framer gives you. Every project gets a
framer.websiteorframer.appaddress even before you connect a custom domain, and that's perfectly importable. - Copy the page URL you want. Import works a page at a time, so grab the exact route — the home page, a landing page, a specific subpage.
- Run the importer, choose URL, pick a width. Paste the address, set the viewport width you're designing for, and let it render and measure. The page comes back as a frame full of editable layers — text, fills, vectors — not a JPEG.
If you want the wider walkthrough — including the paste and file routes for when you have the markup rather than a live address — how to import a website into Figma covers all three in full.
What imports well
The part of a Framer site that travels best is its resting design — the composition as it sits before anything moves. A faithful importer reads what the browser actually computed and rebuilds it:
- Layout as frames. Each section and block becomes a frame positioned where the browser drew it, so the structure stays intact rather than collapsing into overlapping shapes.
- Text with the right fonts and weights. Headings and body copy come back as live, editable text at their true size and weight — provided the typeface is one Figma can reach.
- Image fills. Photography and exported graphics download and embed as proper Figma image fills, not links that break later.
- Gradients and shadows. The decorative layer Framer leans on — gradient backgrounds, drop shadows, soft glows — comes through as real Figma effects you can adjust.
For a lot of Framer sites — the clean, type-led, image-rich kind — that covers nearly everything you can see when the page is sitting still.
Framer's hard parts: animation and effects
Now the honest part. Framer leans harder on motion than almost any other site builder, and motion is exactly what a static design tool can't hold. Two cases are worth understanding before you import.
The first is animation. Scroll-triggered reveals, entrance transitions, parallax, elements that slide and fade as you move down the page — these are driven by JavaScript, and they describe how things travel, not where they rest. An import captures the resting state: where each element lands once the motion is done. You get the destination, faithfully measured, but not the journey. That's usually what you want for design work anyway — you can't redline a transition mid-flight — but it's worth knowing going in.
The second is the 3D or canvas hero. Some Framer templates open with a shader background, a WebGL scene, or a canvas animation. These aren't built from the page's normal structure — there's no underlying markup for an importer to read, just pixels the GPU paints frame by frame. So a hero like that can only come across as a flat image, if at all.
Anything Framer rendered from real structure converts to editable layers; anything it painted with raw graphics, or only revealed through motion, is the hard case.
This isn't a Framer fault, and it isn't a gap a better plugin could close — it's a property of how the web renders. A browser exposes the structure behind ordinary elements but not the contents of a canvas. The deeper version of that story, and why some pages resist import altogether, is in importing a URL into Figma.
After import
Once the page is on the canvas as layers, it's yours to work with like any other Figma file. Restyle it for the next version, pull its components into a library, or document the existing design so the rest of the team can build against it. If a redesign is where you're headed, how to redesign a website in Figma walks through turning an imported page into a fresh direction without starting from a blank artboard.
The bottom line
Going Framer to Figma is worth it when you end up with something you can edit — frames you can restyle, text you can retype, components you can lift into a system. Expect the resting design to come across cleanly, and expect the motion and any GPU-painted heroes to arrive as a still. Know which parts of a Framer site fall on which side of that line, and the import does exactly what you need it to.