Why would a designer move from Framer to Figma?

A few common reasons: the design team standardized on Figma but the marketing site shipped in Framer; the project is moving from a one-person Framer build to a team that needs Figma's collaboration features; the team wants Figma's plugin ecosystem (handoff, design systems, component libraries) which is more mature than Framer's. None of these mean Framer is bad — it just means the workflow center of gravity has shifted to Figma.

Does it work on Framer's framer.app preview URLs?

Yes. Whatever URL you can open in Chrome, the extension can capture. framer.app preview URLs, custom domains, /preview links, and Framer's editor preview all work the same way.

What about Framer's complex animations and motion?

Framer is animation-first, which is part of what makes it powerful. None of those animations come through to Figma — Figma is a static design tool. What you get is the visual state at the moment of capture. To capture a specific state (after a transition, mid-scroll), trigger that state in your browser before clicking the extension.

Does it handle Framer's complex nested layouts?

Mostly. Framer compiles to standard CSS flexbox and grid, which translates to Figma auto-layout. Deep nesting with mixed positioning strategies can need cleanup, but the common Framer patterns — stacks, grids, padded sections — come through with auto-layout intact.

Can I capture Framer's CMS-driven pages?

Yes. Framer CMS pages render in the browser the same as any other Framer page. By the time you click capture, the CMS content is already painted into the page. Each CMS item is its own URL — capture each one you want.

How does Framer → Figma compare to Webflow → Figma?

Mechanically identical — both Framer and Webflow ship modern HTML/CSS/JS sites, both render in your browser, both capture cleanly via Export to Figma. The differences are in what each platform tends to emphasize (Framer leans heavier on animations, Webflow on CMS structure), but those don't change the capture workflow.

Is there a Framer-native way to export to Figma?

No native Framer → Figma export exists. Some Figma plugins attempt this through URL paste-in (html.to.design, Anima Web Capture) but they fetch the URL server-side, which means modern Framer sites — heavy on client-side rendering and animations — often capture as partial or flattened content. The Chrome extension approach captures the live DOM after rendering, which works.

Export Framer to Figma — Editable Layers in One Click

What this is

A focused workflow for designers moving Framer sites into Figma: capture any Framer page — published site, framer.app preview, custom domain, CMS page — into Figma as editable layers. One click, no plugin install inside Figma.

Export to Figma is a Chrome extension. Open your Framer site in Chrome, click the extension, paste into Figma. Typography, colors, images, and (where possible) auto-layout come through preserved.

Why this matters for Framer specifically

Framer's strength is rapid, animation-rich site building. Its limitation, in many design team workflows, is that it doesn't sit naturally inside a Figma-centric ecosystem. The common patterns where designers need a Framer → Figma bridge:

Migration projects. A marketing site shipped in Framer for speed. The design team standardized on Figma. Now the design source-of-truth needs to live in Figma alongside everything else.
Team handoff. A solo designer built a Framer site. A larger team takes over and works in Figma.
Redesigns. The existing site is in Framer. The redesign happens in Figma so the team's plugins, design tokens, and library workflow apply.
Audits and inspiration. Competitor builds a beautifully animated Framer site. You want to study its structure in Figma without rebuilding from screenshots.

None of these mean Framer is the wrong tool — they just mean the design center of gravity is in Figma and the existing Framer build needs to come along.

How to export Framer to Figma

Install Export to Figma from the Chrome Web Store — free, 30 seconds. Pin the extension.
Open the Framer site in Chrome:
- Published custom domain
- your-project.framer.app preview
- Framer editor's preview pane
Click the Export to Figma extension icon.
Paste into Figma with Cmd+V / Ctrl+V.

Total time: under 30 seconds per page.

Framer-specific things to know

Animations are the main thing that doesn't transfer

Framer is animation-first. Page transitions, scroll-triggered reveals, sticky navs with state changes, hover micro-interactions — these are core to Framer's value and none of them come through to Figma.

What you get is the visual state at the moment of capture. If a hero animates from off-screen to on-screen on load, you'll get the on-screen state (assuming you captured after the animation finished). If a sticky nav darkens after scroll, capture before scroll for the light state or after for the dark state — whichever you need.

For a designer redesigning a Framer site, this is usually fine: the visual structure is what you're working with anyway, and you'll re-author the animations once the design is back in Framer (or whatever production tool ships the new version).

Framer CMS pages

Framer's CMS works similarly to Webflow's — each CMS item is its own URL with content populated into a template. Capture each URL you care about; the rendered content comes through as static Figma text and image layers.

If you have 30 CMS items and only want the first three as references, capture only those three. There's no batch mode — each URL is one click.

Framer's component model

Framer has a Components panel where designers build reusable variants (different button states, different card styles, etc.). These compile to runtime React components in the published site.

Export to Figma captures the rendered component instances, not Framer's component structure. So a "Button" with three variants in Framer captures as three separate visual Figma layers in three different places on the page — not as one Figma component with variants. To rebuild the component structure in Figma, you'd select like instances and convert to a Figma component after capture.

Animations + state-specific captures

A common workflow when capturing Framer sites that have meaningful state-based interactions:

Open the page in Chrome.
Trigger the state you want to capture — hover, click, scroll position, modal open.
Click the Export to Figma extension before the state reverts.
Capture lands with that specific state visible.

For modal/drawer-style components, this is the easiest way to get the open-state design into Figma alongside the closed-state.

What gets preserved

Element	Preserved?
Typography (font family, size, weight)
Colors, gradients, shadows, borders
Images at original resolution
Layout (CSS flex/grid → Figma auto-layout)
Editable text content
Framer CMS-rendered content	(as static layers)
Framer animations and motion
Framer's component variant structure	(rendered output only)
Interactive states (without manual trigger)

A real workflow: brand refresh on a Framer marketing site

A designer I worked with was leading a brand refresh for a SaaS company. Their marketing site was on Framer — built fast, looked great, but the new brand needed a typographic overhaul and palette shift before relaunching.

Old approach: take screenshots of every page, drop them into Figma as references, manually rebuild the structure as editable layers so the brand designer could iterate. About a full day of layer-building before the design work started.

New approach with Export to Figma:

Captured each of the 8 marketing pages in under a minute total.
Sticky nav, dropdown menu (captured open), modal CTA (captured open), feature cards — all came through as editable layers.
The brand designer worked directly on the captured frames, swapping fonts, adjusting colors, restructuring spacing.

The total time saving on the reference-building step was about 6 hours. More importantly, the captured layers were exact — same fonts, same colors, same spacing as the live site — so the redesign decisions weren't fighting against approximations.

Pricing

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