Webflow to Framer

Before opening Framer, map what actually exists. Export from Google Search Console:

Every indexed URL - this is your redirect map later.
CMS collections in use - how many posts, what fields.
Forms and their destinations - where submissions actually go.
Custom code embeds - analytics, chat widgets, scripts.
Integrations - Memberstack, Jetboost, Udesly, etc.

Decide what to keep. A migration is a chance to cut dead pages, not just replicate them.

Create a new project at framer.com. Before touching layouts, configure your design foundation:

Brand colors - add them as tokens so global changes happen in one place.
Typography - load your fonts (Google Fonts, Adobe Fonts, or custom). Set type styles (Display, H1, H2, Body, Small).
Spacing tokens - consistent padding/margin scale.

This five-minute setup prevents three hours of inconsistency later.

Don't try to port Webflow designs. Rebuild. Copy-pasting designs loses the point of switching.

Build these as Framer Components:

Nav bar (with variants for mobile/desktop).
Footer.
Buttons (primary, secondary, ghost - with hover states).
Cards (blog card, testimonial card, feature card).
Section wrappers (consistent padding and max-width).

Once components exist, page-building is Lego. Components propagate site-wide when edited.

Rebuild static pages first: Home, About, Pricing, Contact. Framer's AI site generator (Insert menu → AI) can scaffold a whole site from a prompt or from your live Webflow URL - useful as a starting skeleton, not the final version.

Work from hero down. Copy content from Webflow directly; restyle in Framer. Watch for:

✓ Responsive breakpoints - Framer uses Desktop / Tablet / Phone
✓ Animations - Framer has native "Effects" on any element
✓ Scroll-triggered reveals - use Scroll Section + Effects
✕ Custom interactions from Webflow's Interactions 2.0 (rebuild)

In Webflow: CMS → each collection → Export as CSV. You get one CSV per collection with all fields.

In Framer: create a CMS collection matching the Webflow schema. Import CSV. Map fields carefully - rich text, images, and references all have specific handling.

Then rebuild the collection template (e.g. blog post template). Connect Framer CMS fields to the template. Framer's CMS is less mature than Webflow's but adequate for most blogs and resource libraries.

Rebuild contact, newsletter, and waitlist forms in Framer's form element. Framer natively supports:

Email providers - ConvertKit, Mailchimp, Beehiiv.
Databases - Airtable, Google Sheets, Notion.
Webhooks - anything via HTTP POST.

If you used Webflow's Memberstack integration for gated content, that pattern needs a ground-up rebuild - Framer doesn't have a direct equivalent.

This step protects your Google rankings. In Framer: Settings → SEO → Redirects.

For every indexed URL from your Search Console audit, create a 301 redirect if the URL is changing. Common cases:

/blog/old-slug  →  /blog/new-slug
/about-us       →  /about
/features/seo   →  /features#seo

Copy meta titles and descriptions page-by-page. Verify the auto-generated sitemap at yoursite.com/sitemap.xml. Submit it to Search Console after going live.

In Framer's domain settings, add your custom domain. Framer gives you records to add in your DNS host (Cloudflare, Namecheap, etc.). Propagation takes 5 minutes to a few hours.

Once live, monitor:

Search Console - watch for Crawl Errors and Coverage drops for 2 weeks.
Analytics - traffic shouldn't change more than 10-15%. A bigger drop usually means broken redirects.
Forms - submit one yourself the first day to confirm delivery.

Cancel Webflow when traffic is stable (usually 2-3 weeks post-launch).