By Mehdi HassanHow do you move Webflow CMS to Framer CMS?
You move Webflow CMS to Framer CMS by exporting each collection to CSV, building a matching collection in Framer, transforming the fields that don't map one to one, and importing. Our research found no converter for this move, so every collection is rebuilt by hand or by script.
This article covers the content layer only. Pages, components, interactions and redirects are part of the wider job in our Webflow to Framer migration guide, and the full step order is in how to migrate from Webflow to Framer in 9 steps.
The honest summary: simple fields move cleanly, references need ordering, and rich text and images need cleanup. If your collections are mostly plain text, dates and single images, each one moves quickly. If they're heavily cross-referenced, plan for much more mapping and testing.
How do Webflow CMS fields map to Framer CMS fields?
Most Webflow field types have a direct Framer equivalent. The ones that don't are multi-image fields, video links, email and phone fields, and in some cases multi-references. The table is the mapping we start from on every project.
Webflow field | Framer field | What to do |
|---|---|---|
Plain text | Plain text | Direct copy |
Rich text | Formatted text | Import as HTML; clean embeds and classes first |
Image | Image | Public URL in the CSV; Framer fetches it |
Multi-image | Several image fields or a gallery field | Split into numbered columns if no gallery type |
Option | Option | Create the same option values before import |
Switch | Toggle | Convert to true or false |
Reference | Reference | Import the target collection first; use slugs |
Multi-reference | Multi-reference, if available | Otherwise a slug list or a flipped single reference |
Email, phone, video link | Link or plain text | Prefix mailto: or tel:; render video in a component |
Date, number, color, file | Same type | Direct copy; check date formats |
Framer ships CMS updates often, and some roundups we reviewed still list multi-reference fields as missing. Check the field types in your Framer project before you plan workarounds you may not need.
How do you export Webflow collections for Framer?
Export each collection from the Webflow Designer's CMS panel as a CSV, which Webflow documents in its CSV export feature. The export gives you every field, including rich text as HTML and images as Webflow CDN URLs.
Export everything at once and freeze editing. If writers keep publishing in Webflow during the move, you'll be reconciling two versions of the same collection at launch. For large sites, the API route described in how to export Webflow CMS content is faster and keeps item IDs, which helps when rebuilding references.
- Keep the slug column. Framer item slugs should match Webflow's so URLs don't change.
- Note draft and archived items. Decide whether they move before you import, not after.
- Save the raw files. Transform copies, never the originals, so you can always start again.
How do you handle Webflow reference fields in Framer?
Handle Webflow reference fields by importing collections in dependency order and pointing references at slugs. Authors and categories go in first, then the posts that reference them. A reference to an item that doesn't exist yet comes through empty.
Webflow exports may identify referenced items by something other than the slug, depending on how you export. Build a lookup sheet per referenced collection with two columns, the identifier in the export and the slug, and swap one for the other before import. A spreadsheet lookup or a short script does this in minutes.
Workarounds when a multi-reference won't map
If your Framer project has no multi-reference field, you have two clean options. You can flip the relation, so each tag item references many posts through filtering instead of each post holding many tags. Or you can store a comma-separated list of slugs in a plain text field and filter on it in a code component. The first option is simpler to edit, and the second keeps the original shape.
For example, suppose a blog with posts, authors and tags
Hypothetical example: a SaaS blog has 120 posts, 6 authors and 15 tags. Each post has one author (reference) and up to four tags (multi-reference).
The import order is authors, then tags, then posts. The author column is rewritten from export identifiers to author slugs with a lookup. If multi-reference is available, the tag column becomes a list of tag slugs. If not, the team adds a single primary tag reference for filtering and keeps the full tag list as plain text for display.
The test batch is 10 posts covering every author and at least one post with four tags. Once those render correctly on the post template, the other 110 go in.
How do you keep rich text and images intact?
Clean rich text before import and make sure every image URL is public when Framer fetches it. Framer reads HTML in a formatted text column, but custom classes, scripts and embeds from Webflow don't survive the trip.
- Embeds. Webflow custom code blocks inside rich text, such as iframes or tweets, need to become Framer components or links.
- Inline images. They point at Webflow's CDN. Import while the Webflow site is still live so Framer can fetch them.
- Headings and spacing. Strip empty paragraphs and inline styles so Framer's text styles apply evenly.
- Internal links. Rewrite any links whose paths change in Framer, or they'll rely on redirects forever.
Our guide to importing content into Framer CMS covers the CSV, plugin and API routes in more depth. If you're merging content from more than one source, CMS content migration covers export, cleanup and import as one process.
What are the steps to import Webflow collections into Framer?
The import is six steps per collection, done in dependency order. Skipping the test batch is what turns a one-day job into a week of fixes.
Model the collection in Framer
Create the collection with fields named exactly like your CSV columns. Use our content modeling guide if the Webflow structure was messy to begin with.
Transform the CSV
Swap reference identifiers for slugs, split multi-image columns, convert switches to true or false and prefix email and phone values.
Clean the rich text
Remove embeds, inline styles and empty tags. Rewrite internal links to final paths.
Import 10 items
Pick items that cover every field and edge case, then check them on the live template, not just in the CMS table.
Import the rest
Run the full file and compare item counts with the Webflow export.
Spot-check and lock
Open a sample of items per collection, confirm images are hosted by Framer, then reopen editing to your team.
When is Webflow CMS to Framer CMS the wrong move?
The move is wrong when your content model depends on deep relations, large item counts or an API that other tools read from. Those are the reasons teams go the other way, from Framer to Webflow, as we cover in Framer to Webflow migration.
If your Webflow site runs hundreds of programmatic pages from linked collections, compare the plan caps before committing. Our article on programmatic SEO in Webflow shows how those builds lean on Webflow's CMS. For a blog, a case-study library and a team page, Framer's CMS is usually more than enough, and editors tend to find it faster. For budget planning, see Webflow to Framer migration cost.
