How to move a Framer site to Webflow

At a glance

Official route

None. Webflow says Framer designs, layouts and interactions can't be imported directly.

With FlowPaste

Live Capture on the published Framer site → paste in the Designer, one section at a time.

Animations

Framer appear effects and reveal-on-scroll become Webflow Interactions (on load or on scroll).

Class names

Taken from your Framer layer names (Hero, Card), not framer-1v6xw78 hashes.

Not carried over

Hover/tap effects done in JavaScript, springs (become 0.8 s), and layouts Framer only shows at other breakpoints.

CMS

Export from Framer where possible, import into Webflow Collections by CSV.

Why Framer sites don't move to Webflow by themselves

Framer publishes a React app. The page you see is assembled by JavaScript; class names are generated hashes (framer-1v6xw78); and animations are defined in JSON that Framer's runtime plays. There's no HTML file to hand over, and Framer doesn't offer a code export.

Framer also builds breakpoints differently: often each breakpoint is its own layout, swapped in by Framer, rather than one layout with media queries. Webflow expects the second kind.

FlowPaste copies the section from the live page, after Framer has drawn it. It reads the real styles, uses your layer names for classes, and reads Framer's appear animations (start state, duration, delay) from the page so they become Webflow Interactions instead of being lost.

“There's no automated way to convert a Framer site into a Webflow site.”

Webflow Help Center: Migrate your site from Framer to Webflow

Ways to do it, compared

How to copy a Framer section into Webflow

Time: a few minutes per section. You need: the published Framer site (or its preview link), the FlowPaste Chrome extension, a Webflow site in the Designer.

1. Open the published Framer site at desktop width

   Use the live URL (yourname.framer.website or your domain), not the Framer editor. Make the window desktop-sized: FlowPaste copies the layout Framer shows at that width.

2. Start Live Capture

   Click the FlowPaste icon in Chrome's toolbar → Capture an element, or press ⌥⇧C (Alt+Shift+C). Allow site access when asked, so FlowPaste can read Framer's stylesheets and fonts.

   TipScroll through the page once first, so lazy-loaded images are in.

3. Click the section

   Hover the page; FlowPaste outlines what you'll copy. Press ↑ to select the whole section instead of a child, then click or press Enter.

4. Paste in Webflow

   The section is copied automatically. Click Go to Webflow Designer, select where it goes and press ⌘V (Ctrl+V). Repeat for each section.

5. Set up tablet and mobile

   Check the tablet and mobile breakpoints. Where Framer used a different layout per breakpoint, adjust it in Webflow (often a grid column count or a stack direction).

6. Check the Interactions

   Open the Interactions panel: appear effects arrive as page-load or scroll-into-view Interactions. Adjust easing if you want something other than Webflow's default.

What comes across

Problems and fixes

Moving a whole Framer site

Webflow's migration guide recommends a rebuild in stages. FlowPaste speeds up the design part; the rest is the same checklist.

1. Audit. List pages, CMS collections, fonts, forms, integrations and every URL (for redirects).
2. Global styles first. Paste the navbar and footer first, then turn them into Webflow Components so every page reuses them.
3. Pages. Capture each page's sections in order. Paste into a new page in Webflow.
4. CMS. Create Collections in Webflow, export Framer CMS content where possible and import it by CSV. Rebuild list sections as Collection Lists bound to the fields.
5. Forms. Captured forms paste as Webflow Forms; set the notification email and redirect in Webflow.
6. Redirects and SEO. Add 301 redirects for changed URLs (Webflow can import them by CSV), copy titles and meta descriptions, then switch the domain last.

After you paste

• Add the fonts in Webflow → Site settings → Fonts. FlowPaste lists them in the notes after each conversion. Until then, text that brought its own font file still shows correctly, but you can't pick the font in the Typography panel.
• Images: Webflow publishes images only from its own Assets. Connect your site once in FlowPaste → Account → Webflow images, and every paste uploads its images for you. Without it, images show in the Designer but break on the published site.
• Click through tablet, mobile landscape and mobile portrait in the Designer. Media queries are already mapped to those breakpoints; check anything the notes marked as "snapped".
• Open the Interactions panel and check each appear animation.
• Rename or merge classes where you want your own system. Identical styles already share one class; variations are combo classes.
• Publish to your webflow.io staging domain and check animations and scripts there. Scroll-triggered Interactions don't always play inside Designer Preview.

Questions