1. Before you start
Start with a clear inventory. Decide what will move, what will be rebuilt, and which URLs must stay the same.
Pages and URLs
List every static, CMS, utility, localized, and campaign page.
Record the current URL for each page.
Mark each page as keep, rebuild, merge, redirect, or remove.
Note any existing Webflow redirects so they are not lost during the move.
CMS content
List each collection, field, slug, reference, and multi-reference.
Export each Webflow collection as a CSV.
Identify formatted text, images, files, dates, options, and relationships that need checking after import.
Assets and integrations
Download the original images, SVGs, videos, fonts, and downloadable files you still need.
List forms, analytics, consent tools, embeds, search, memberships, ecommerce, and external services.
Record custom code and interactions that need to be rebuilt or replaced.
Styles and components
Record the type scale, colors, spacing, grids, breakpoints, and repeated UI patterns.
Decide which repeated sections should become Framer components.
Choose one representative page to establish the new system before rebuilding the rest.
How Webflow concepts map to Framer
Webflow and Framer use different names for many of the same site-building concepts. Use this table to translate your existing Webflow structure into the Framer styles, components, CMS fields, and effects you will create.
Webflow | Framer |
|---|---|
Site | Project |
Page | Page |
Class | Style, component, or variable |
Symbol / Component | Component |
Collection | CMS collection |
Collection item | CMS item |
Reference field | Reference field |
Interaction | Effect, component variant, or code |
Breakpoint | Breakpoint |
Webflow’s code export can help you collect assets and inspect static markup, but it does not recreate Webflow CMS, forms, search, localization, ecommerce, or other hosted behavior in Framer. See Webflow’s export documentation for the current limitations.
2. Set up your Framer project
Build the foundation before rebuilding every page. This keeps later work consistent and easier to review.
Site structure
Create the required pages and keep important paths unchanged where possible. Match folders and localized routes before adding redirects.
Styles and components
Create text styles, color styles, and variables for the values used across the site. Turn repeated navigation, footers, buttons, cards, and sections into components. Framer uses styles, variables, and components instead of Webflow’s class hierarchy.
Breakpoints
Start with desktop, tablet, and phone layouts that match the needs of the source site. Check the content at each breakpoint instead of assuming the desktop layout will translate automatically.
CMS collections
Create the target collections and fields before importing content. For relationships, create and import the referenced collection first.
3. Migrate your CMS content
CSV import is the simplest path for most Webflow collections. Import one collection at a time and test a small set of representative items before importing everything.
Import with CSV
Open the matching Framer collection.
Import the Webflow CSV.
Map each column to the correct Framer field.
Check slugs, dates, formatted text, images, files, options, and references.
Open the list page and detail page with real content.
For repeatable or assisted imports, see Migrating with Agents. For advanced programmatic migrations, use the Framer Server API.
4. Rebuild key pages
Start with one page that contains the main navigation, repeated sections, CMS content, forms, and responsive patterns. Use it to establish the system for the rest of the site.
Rebuild the content structure and visual hierarchy.
Replace repeated sections with components.
Connect CMS fields and test long, short, and missing values.
Recreate important interactions with native effects, variants, or code where needed.
Review desktop, tablet, and phone before moving to the next page.
Agents can provide a useful first build pass for pages and CMS work. The Agents chapter explains what to attach, which prompts to use, and what still needs human review.
5. Set up forms & integrations
Recreate each form in Framer and connect it to the required destination. Match required fields, validation, success states, consent text, notifications, and tracking.
Add analytics, tag management, cookie consent, CRM connections, chat, embeds, and other services. Confirm that each integration works on the production domain and respects the team’s privacy requirements.
6. Configure redirects
Only changed or removed paths need redirects. Send each old URL to the closest relevant new page and avoid redirect chains.
Framer supports exact, wildcard, capture-group, and named-parameter redirects. Test the response and destination for every changed path. If the domain changes, set up the domain-level redirect with the old domain’s hosting provider. Framer redirects handle sub-paths on the connected domain. See Framer’s redirect guide and the SEO migration chapter.
7. Test before switching DNS
Open every important static, CMS, utility, and localized route.
Check navigation, internal links, rich-text links, buttons, and downloads.
Test forms, integrations, analytics, consent, and custom code.
Review titles, descriptions, canonicals and structured data.
Test redirects, the 404 page, sitemap.xml, and robots.txt.
Review representative pages on desktop, tablet, and phone.
Ask the content owner, designer, SEO owner, and technical owner to approve the result.
Use the migration checklist for the final launch review.
8. Switch DNS and go live
Standard cutover
Connect the domain in Framer, add the requested DNS records at the domain provider, and wait for verification and SSL. Keep the Webflow project available until the new site and redirects have been checked on the production domain.
Optional page-by-page rollout
Large sites can move in stages with Framer’s page-by-page migration setup. It uses Advanced Hosting to serve completed Framer routes and fall back to the existing site for unfinished routes. Check current Advanced Hosting availability and eligibility before choosing this route.
After launch
Check production routes, forms, analytics, redirects, CMS pages, and indexing controls again. Monitor crawl errors, traffic, conversions, and support reports while search engines and users discover the new site.
