Can I copy and paste a Webflow site into Framer?

Not in a way that produces a clean, maintainable site. Some tools and browser extensions can copy parts of a page, but the result usually needs rebuilding to use Framer's components, styles and breakpoints properly. You'll get better results, and often finish faster, by rebuilding from Figma designs and approved copy, using components for every repeated section.

Does Framer import Webflow CMS content directly?

Framer's CMS imports CSV files, and Webflow can export each collection as CSV, so content moves through those two steps rather than a direct connection. Map every field before you import, keep slugs identical and import referenced collections first. Expect to fix rich-text images, which often arrive as placeholders, and to re-upload images that still point to Webflow's asset CDN.

Can I keep my Webflow blog URLs in Framer?

Usually, yes. If your Webflow posts lived under a path like /blog/post-slug, you can set the Framer CMS collection page to the same path and keep the same slugs, so no redirects are needed. If the path or slugs change, add a one-to-one 301 for every post. Check a sample of old URLs after launch to confirm they resolve.

What happens to Webflow forms when I move to Framer?

Webflow forms and their submissions stay in Webflow, so you rebuild each form in Framer and reconnect where submissions go, such as email notifications, a CRM or a webhook. Export past submissions from Webflow before cancelling. Test every form end to end after launch, including hidden fields used for tracking, because those are easy to lose in a rebuild.

When should I cancel my Webflow plan?

Cancel only after the Framer site has been live and stable for a while, every image and file has been re-hosted, and a crawl shows nothing still loads from Webflow. Keep the Webflow project itself, even unpublished, as a reference for content and settings. Export CMS collections and form submissions first, since you may need them if something was missed in the move.

All posts

Platform migrations

How to Migrate From Webflow to Framer in 9 Steps

How to migrate from Webflow to Framer in 9 steps, sized for a 6–20 page SaaS site: effort per step, CMS import order, redirects and the launch checks.

By Mehdi HassanOct 29, 20268 min read

The short answer

To migrate from Webflow to Framer, follow nine steps: inventory URLs, audit the copy, set up Framer styles and components, rebuild pages, map and import the CMS in reference order, re-host images, rebuild forms and integrations, add redirects and metadata, then launch and recrawl. For a 6–20 page SaaS site, page rebuilds and CMS cleanup take most of the effort.

Key takeaways

Nine steps, in order: inventory, copy, foundations, pages, CMS, images, integrations, redirects, launch.
Build styles and components before pages; it makes a 6–20 page rebuild far faster.
Import CMS collections that others reference first: authors and categories before posts.
Rich-text images and Webflow CDN links need manual fixing after a CSV import.
Recrawl the old URL list the day you launch, not the week after.

What are the steps to migrate from Webflow to Framer?

There are nine steps to migrate from Webflow to Framer, and their order matters more than any single step. Each one produces something the next depends on: the URL inventory feeds the copy audit, the copy decides the page structure, the components speed up the pages, and so on. This walkthrough is sized for a typical 6–20 page SaaS marketing site with a blog.

If you're still deciding whether to move at all, start with our complete Webflow to Framer migration guide, which covers fit, cost and the SEO playbook. This article is the practical list.

1. Inventory every URL
Crawl the Webflow site, export the sitemap and pull top pages from analytics. Record traffic, backlinks and conversions for each URL in one sheet.
2. Audit and rewrite the copy
Mark each page keep, rewrite, merge or retire. Rewrite the home, product, pricing and top landing pages in a doc before design starts.
3. Set up Framer foundations
Create color and text styles, layout breakpoints and core components such as the nav, footer, buttons, cards and CTA sections.
4. Rebuild the pages
Build each page from the approved copy and Figma designs, using your components. Rebuild interactions as Framer effects rather than copying them literally.
5. Map and import the CMS
Write a field map for every collection, then export each collection from Webflow as CSV and import into Framer, referenced collections first.
6. Re-host images and files
Download every image and file from Webflow, upload to Framer and fix rich-text images that arrived as placeholders.
7. Rebuild forms and integrations
Reconnect forms, analytics, cookie consent, chat widgets and any webhooks or automations that pointed at Webflow.
8. Add redirects and metadata
Enter every changed URL in Framer's redirects as a one-to-one 301, and carry over titles, descriptions, social images and alt text.
9. Launch and recrawl
Switch the domain, crawl the old URL list, submit the sitemap in Search Console and watch traffic and errors daily.

How much effort does each step take for a 6–20 page SaaS site?

For a 6–20 page SaaS site, steps 4 and 5, rebuilding pages and moving the CMS, take the largest share of the effort, and steps 1, 7 and 8 take the least. We give relative effort rather than hours, because the real time depends on how many unique templates you have, how big the CMS is and how much copy you rewrite.

Step	Relative effort	What makes it take longer
1. URL inventory	Light	Old campaign pages and years of blog posts
2. Copy audit and rewrite	Moderate to heavy	Rewriting rather than reusing; approval rounds
3. Framer foundations	Moderate	No existing design system in Figma
4. Page rebuilds	Heavy	Many unique templates and complex interactions
5. CMS map and import	Moderate to heavy	References, rich text and large collections
6. Images and files	Light to moderate	Many inline rich-text images
7. Forms and integrations	Light	Custom webhooks and automations
8. Redirects and metadata	Light to moderate	URL structure changes
9. Launch and recrawl	Light	DNS issues or missed redirects found late

The fastest way to shrink step 4 is to reuse sections. A 12-page SaaS site might have only five or six distinct section types: hero, logo strip, feature grid, testimonial, pricing and CTA. Build those once as components and most pages become assembly. Our guide to Webflow to Framer migration cost shows how template count drives the budget.

Hypothetical example: a 12-page SaaS site

For example, suppose a B2B SaaS company has 12 marketing pages, a blog with a few dozen posts, an authors collection and a categories collection on Webflow. The URL inventory shows two old landing pages with no traffic, so they're retired with redirects to the product page.

The team rewrites the home and pricing pages, builds seven section components in Framer, then assembles the remaining pages from them. In the CMS step, authors and categories are imported first, then posts. Most of the cleanup time goes into rich-text images inside older posts.

In what order should you import referenced CMS collections?

Import the collections that other collections point at first, then the collections that point at them. If posts reference authors and categories, import authors and categories before posts, so that every reference has something to connect to when the posts arrive.

List the references. For each collection, note which fields reference other collections.
Import leaf collections first. Collections with no references of their own, like authors, categories and tags, go in first.
Import the middle layer. Collections that reference leaves but are referenced by others, like products referenced by case studies, go next.
Import top-level collections last. Posts, case studies and other content that reference everything else come at the end.
Check references by hand. Open a sample of items and confirm each reference field shows the right author or category.

Keep slugs identical in the CSV so references match and URLs don't change. Multi-reference fields need a decision before import, since Framer's CMS has historically handled them differently from Webflow. Our guide to Webflow to Framer CMS migration covers references, rich text and the workarounds in detail.

How do you rebuild pages faster in Framer?

You rebuild pages faster by starting from Figma and approved copy, building components before pages, and rethinking interactions instead of copying them. Framer is quickest when it's used the way it's designed: visual, component-based and close to Figma.

Start from Figma. If your designs live in Figma, paste or rebuild them in Framer rather than reverse-engineering the live Webflow page.
Components first. Build the nav, footer, buttons and repeated sections as components with variants. Change once, update everywhere.
Styles, not one-offs. Define text and color styles early. Framer has no global class system like Webflow's, so styles and components carry consistency.
Rethink interactions. Rebuild key animations with Framer's effects and appear animations. Drop decorative ones that slowed the old site.
Write once. If copy changes during the build, it should change in the doc first. Our landing page copy process keeps that discipline.

Build accessibility in as you go: real headings, alt text, visible focus states and enough color contrast. Fixing them later is slower, as our guide to accessibility remediation explains.

What should you check before switching the domain?

Before switching the domain, check that every page has its metadata, every changed URL has a redirect, forms submit to the right place and the site is allowed to be indexed. A short pre-launch checklist catches most migration problems while they're still cheap.

Every page has a unique title, description and social image, matching or improving the Webflow version.
Every changed URL in the inventory has a 301 in Framer's redirect settings, pointing at a live page.
Test forms end to end, including notifications and any CRM or webhook connections.
Analytics, cookie consent and tracking scripts are installed and firing once.
No page loads images or files from Webflow's CDN.
Search engine indexing is enabled for the production domain.
Mobile layouts are checked on real devices for the top pages.

If you're moving a multilingual site, the locale URLs add a layer of checks; see our guide to moving a localized site from Webflow to Framer.

Should you do the migration yourself or hire help?

Do it yourself if your site is small, your team already knows Framer and you have time to run the SEO checks properly. Hire help if the site drives significant pipeline, the CMS is large or relational, or nobody on the team has run a migration before.

The risky parts aren't the page builds, which a capable designer can handle, but the URL inventory, CMS mapping and redirects. If you're unsure Framer is the right destination at all, our guide to choosing a platform for your marketing site compares Webflow, Framer, WordPress and Next.js, and our piece on why teams leave Webflow for Framer lists what you might give up.

Frequently asked questions

Can I copy and paste a Webflow site into Framer?: Not in a way that produces a clean, maintainable site. Some tools and browser extensions can copy parts of a page, but the result usually needs rebuilding to use Framer's components, styles and breakpoints properly. You'll get better results, and often finish faster, by rebuilding from Figma designs and approved copy, using components for every repeated section.
Does Framer import Webflow CMS content directly?: Framer's CMS imports CSV files, and Webflow can export each collection as CSV, so content moves through those two steps rather than a direct connection. Map every field before you import, keep slugs identical and import referenced collections first. Expect to fix rich-text images, which often arrive as placeholders, and to re-upload images that still point to Webflow's asset CDN.
Can I keep my Webflow blog URLs in Framer?: Usually, yes. If your Webflow posts lived under a path like /blog/post-slug, you can set the Framer CMS collection page to the same path and keep the same slugs, so no redirects are needed. If the path or slugs change, add a one-to-one 301 for every post. Check a sample of old URLs after launch to confirm they resolve.
What happens to Webflow forms when I move to Framer?: Webflow forms and their submissions stay in Webflow, so you rebuild each form in Framer and reconnect where submissions go, such as email notifications, a CRM or a webhook. Export past submissions from Webflow before cancelling. Test every form end to end after launch, including hidden fields used for tracking, because those are easy to lose in a rebuild.
When should I cancel my Webflow plan?: Cancel only after the Framer site has been live and stable for a while, every image and file has been re-hosted, and a crawl shows nothing still loads from Webflow. Keep the Webflow project itself, even unpublished, as a reference for content and settings. Export CMS collections and form submissions first, since you may need them if something was missed in the move.

Mehdi Hassan · CEO & Design Director

Copywriter, designer and developer, and founder of Designify Studio. Over five years, 60+ projects across 14+ industries, for startups that have raised $300M+.

Want this done for you? Website, $8,000.

A multi-page marketing site, designed by us, developed in Next.js and animated. $8,000, one-time, up to 6 pages. Book a free 30-minute call to see if it fits.

Schedule Call