Migrate your site from Framer to Webflow

Learn how to rebuild your existing Framer site in Webflow.

This article walks you through migrating an existing Framer site to Webflow. While Framer’s no-code page builder is great for lightweight sites with basic use cases, Webflow gives marketers, designers, and developers a single platform to build, manage, and optimize sites that drive business impact.

High-level instructions:

1. Complete the pre-migration audit checklist

2. Re-build your site and re-configure all site settings in Webflow

3. Lastly, set up your domains, redirects and DNS settings to minimize downtime

Pre-migration audit checklist

Before you begin rebuilding in Webflow, perform a thorough audit of your current Framer setup. Check out Framer's help pages for detailed steps on how to do the following.

Pages

• Inventory all static pages and dynamic templates (including landing pages, legal/privacy pages, error pages)

• Note current URL paths, folder nesting, and any subdomain or language‑based path (e.g., /es/, /fr‑CA/)

• Note all page interactions or animations

CMS, Data, and Assets

• List all content types (e.g., blog posts, case studies, team members)

• Document fields, relationships, references, and multi-reference fields

• Note current asset libraries (images, videos, downloads) including file names, asset locations, alt‑text, and any versioning or large‑asset usage

• Export content where possible. Depending on your Framer setup, CMS content may require manual extraction or recreation, as Framer does not always provide direct CMS exports.

Fonts and typography

• Audit all fonts used in your Framer site, including:

  • Custom or self-hosted fonts

  • Google Fonts

  • Variable fonts or font weights

  • Font usage across headings, body text, buttons, and UI elements

• Confirm that you have the appropriate licenses to use each font in Webflow. Depending on the font provider, you may need to:

  • Upload font files directly to Webflow

  • Connect Google Fonts or Adobe Fonts

  • Replace fonts that can’t be licensed or self-hosted

• Document font sizes, line heights, letter spacing, and responsive typography rules so you can accurately rebuild your type system in Webflow.

Domains

• Identify your primary domain and any additional domains or subdomains in use

• Document domain-level routing needs for locales (e.g., es.domain.com)

SEO and redirects

• Export a list of all current URLs (static and dynamic) with their meta titles, meta descriptions, Open Graph tags, canonical tags

• Note any redirects, SEO settings for different locales, and schema data

• Check sitemap.xml and robots.txt settings

• Document analytics/tracking setup (Google Analytics, Google Search Console, tag manager, etc)

• For multilingual pages, document current hreflang implementation

Forms, integrations, and custom code

• List all forms and their endpoints (e.g., CRM, email marketing tool)

• Note embedded tools, scripts, analytics, and third-party widgets

• List all custom code snippets embedded (in head, body, footer)

• Note any dynamic behavior outside the Framer environment (for example headless CMS, external APIs)

• Note any well-known files for transfer

Components, templates, and interactions

• Identify global components (e.g., navbars, footers, cards)

• Record reusable layout patterns and design tokens

• Note interactive elements: hover states, scroll triggers, animations, custom code embeds

Process and performance

• Plan your DNS cutover (i.e., changing your DNS settings from Framer to Webflow), staging workflows, and publishing window. You'll want to migrate DNS only after you've completed all other migration steps and you're ready to publish to minimize site downtime.

• Document existing performance or SEO issues you might want to fix during migration (large image files, slow scripts, inefficient interactions)

Set up your Webflow site

Once you’ve completed your audit and planning, you can start building the foundation in Webflow.

1. Create a new site in your Webflow Workspace

2. Choose the right Site plan based on traffic, CMS scale, and localization needs

3. In Site settings > Localization, set your primary locale and additional locales (if needed). Decide on your URL strategy (subdirectory vs subdomain vs separate domain).

4. Create a CMS architecture that maps to your Framer content structure

5. Build your global style guide: define color palette, typography, spacing, utility classes, and reusable components

6. Set up integrations, forms and custom code embeds

Migrate content and structure

Now you’re ready to move content and build the new site in Webflow.

1. Rebuild each static page in Webflow, matching layouts and responsive behavior

2. Create CMS Collections and import content via CSV or manually

3. Upload and organize assets in the Webflow Asset panel: images, videos, downloads, icons. Ensure every image has alt‑text and is optimized (compressed, correct format)

4. For each locale:

   1. Duplicate or set up localized variants of pages and CMS items. Use Webflow’s built-in machine translation to accelerate localization, then review and refine translations manually to ensure accuracy and brand consistency.

   2. Ensure slugs, meta tags (title/description), and asset alt‑text are localized

   3. Configure localized SEO settings including titles, descriptions, Open Graph data

5. Rebuild or adapt interactions using Webflow’s native animation tools. Some Framer animations may not translate directly to Webflow and may require redesigning interactions using Webflow Interactions with GSAP or custom code.

6. Re‑implement global components (navigation, footer, banners, callouts)

7. Re-build forms and integrate with tools (e.g., Zapier, HubSpot) as needed

8. Configure analytics: Ensure tracking scripts and tag managers are placed in Site settings → Custom code or page settings as needed.

9. Use the Audit panel to optimize SEO and accessibility

10. Publish your staging version and run a full QA across breakpoints and locales

11. In Site settings > Publishing, add your custom domain, subdomain(s), and configure DNS

Redirects, SEO, and publishing

To preserve rankings and prevent 404s:

• Set up 301 redirects under Site settings > Publishing > 301 redirects

  • For bulk changes, import redirects via CSV

• Enable sitemap and robots.txt configuration

• Check localized SEO and routing behavior

• Set canonical tags for all duplicate pages

• Configure your custom domain(s) via your DNS provider and Webflow’s hosting settings and verify SSL and default domain to avoid duplicate content issues

Once ready:

• Push your site live and monitor in Google Search Console

• Verify that your localized versions are indexed properly

• Test locale switching, redirects, and canonical structure

• Submit your new sitemap (if changed) to Google Search Console and other search engines, then monitor for indexing errors or 404 spikes

After launch: what to monitor

Post-launch, monitor the following:

• Traffic and search engine indexing

• Redirects and crawl errors

• Form submissions and conversion metrics

• SEO metrics by locale and landing page

• Load times and core web vitals

• Locale switching functionality