There is no button that converts a Framer site to Webflow. Webflow’s own help center states that Framer designs, layouts and interactions can’t be imported directly, so a Framer to Webflow migration is a rebuild: you export your content, recreate the design system and pages in Webflow, then move your URLs across with 301 redirects.
That sounds heavier than it is if you work in the right order. This guide covers the order we use, a feature-by-feature translation table, and the SEO steps that protect your rankings. We’re doing this right now with our own creative agency template, Hulio, which started life in Framer and is being rebuilt for the Webflow Marketplace, so the advice below comes from an actual build. [ADD: link to the Hulio Framer template]
If you’re still deciding between platforms rather than moving, start with our Framer vs WordPress comparison first.
Can you convert a Framer site to Webflow automatically?
No. Neither Framer nor Webflow offers an importer, and Framer has no clean HTML/CSS export that Webflow could read. What you can move automatically is content: Framer CMS collections export to CSV, and Webflow imports CSV into CMS collections. Layouts, components, styles and animations all have to be rebuilt by hand in the Webflow Designer.
Agencies that sell “automatic” conversion are rebuilding it for you. That’s a fine option, but know what you’re paying for.
When moving from Framer to Webflow makes sense
Framer is faster from idea to live page. Webflow is stronger once a site turns into a system: lots of CMS content, multiple editors, strict class structure, and developers who want predictable markup. Move when one of these is true:
- Your CMS is outgrowing Framer. Large blogs, directories, or content with many reference fields are where Webflow’s CMS earns its keep.
- A client or team already lives in Webflow. Handing over a Webflow site to a Webflow team is easier than training them on Framer.
- You want to sell the design on another marketplace. This is our Hulio case: same design, new audience.
Don’t migrate just because a comparison article said Webflow is “better for SEO”. Both platforms let you control titles, meta descriptions, slugs, redirects and sitemaps. A migration done badly costs more rankings than the platform choice ever will.
Before you start: audit your Framer site
Every hour spent on the audit saves several in the rebuild. Open your Framer project and the live site side by side and record the following.
| What to capture | Why it matters in Webflow |
|---|---|
| Every live URL (static pages + CMS item pages) | Becomes your 301 redirect map |
| Meta titles, descriptions, Open Graph images | Re-entered per page and on CMS templates |
| Color styles, text styles, spacing values | Become Webflow variables and base classes |
| Components and their variants | Become Webflow components with properties |
| Breakpoint widths and what changes at each | Webflow’s breakpoints are fixed, so you’ll remap |
| Effects: appear, scroll, hover, page transitions | Rebuilt in Webflow Interactions or custom code |
| Code components and overrides | No equivalent; needs a native rebuild or custom code |
| Fonts and their licences | You may need to upload files or reconnect Google/Adobe Fonts |
| Forms, scripts, analytics, third-party embeds | Reconnected in Webflow site settings |
Webflow publishes a longer pre-migration checklist for Framer sites that also covers localization and hreflang if you run a multilingual site.
How to migrate from Framer to Webflow, step by step
The short version: export content, build the design system, build components, build pages, import CMS, rebuild interactions, then handle SEO, redirects and DNS last. Skipping ahead to page building is the most common reason these projects drag.
1. Export everything Framer will give you
Use the CMS Export plugin from the Framer Marketplace to download each collection as a CSV. Then download your original images, SVGs, videos and font files into one folder, named the way you’ll want them in Webflow.
Don’t rely on image URLs pointing at Framer’s hosting inside your CSV. Once you cancel the Framer plan, those files are no longer something you control. [ADD: what happened with image fields in our Hulio CSV export]
2. Rebuild your design tokens before any page
Create Webflow variables for colors, font sizes and spacing that match your Framer color and text styles one to one. Then style the base tags (body, H1–H6, paragraph, link) and set up a small set of utility classes.
Pick a class naming convention now and stick to it. Framer never forced you to name anything; Webflow’s class system will punish you later if you don’t. A simple convention like section_hero, hero_title, button is-secondary is plenty for a marketing site.
3. Translate components
Rebuild your navbar, footer, buttons and cards as Webflow components and expose the parts that change (text, links, images, visibility) as component properties. Framer variants for things like hover or active states usually map to combo classes and interaction states in Webflow, not separate components.
4. Rebuild pages with flexbox and grid, not absolute positioning
Framer makes absolute positioning painless, and many Framer layouts quietly depend on it. In Webflow, rebuild those sections with flex and grid so they behave across breakpoints. Webflow styles cascade down from the desktop base breakpoint to tablet and mobile, so build desktop first and only override what actually changes.
5. Recreate CMS collections and import your CSVs
Create each Webflow collection with the same fields as your Framer collection, then import the CSV from the CMS panel. Webflow’s CSV import accepts files up to 4MB and lets you map each column to a field. Two practical tips:
- Match your URL structure. Webflow CMS item pages live under the collection’s slug. If your Framer blog posts lived at
/blog/post-name, give the Webflow collection the slugblogand most post URLs will survive unchanged. - Import reference collections first. Authors and categories need to exist before the posts that reference them.
6. Rebuild animations and effects
This is where most of the time goes. Framer’s appear effects, scroll transforms and hover states all need rebuilding in Webflow Interactions. Webflow’s own guidance is that some Framer animations won’t translate directly and may need redesigning with GSAP-based interactions or custom code.
Our rule: rebuild the effects a visitor would notice missing, and drop the ones nobody would. [ADD: the hardest Framer effect to rebuild in Hulio and how we solved it]
7. SEO settings, 301 redirects, then DNS
Re-enter titles, descriptions and Open Graph images on every static page, and set them with CMS fields on collection template pages. Add alt text to every image in the Assets panel.
Then build your redirect map from the URL list in your audit. Webflow can import 301 redirects from a CSV, but an import overwrites all existing redirects on the site, so export first and append if you already have some. Redirects only take effect after you publish.
Switch DNS last. Webflow recommends adding redirects before the domain cutover and moving DNS only once everything else is finished, which keeps downtime close to zero. After launch, submit the sitemap in Google Search Console and watch for 404s for a few weeks.
Framer to Webflow translation table
Most “how to migrate” guides stop at “rebuild your design”. This is the mapping we actually work from.
| Framer | Webflow equivalent | Notes |
|---|---|---|
| Stack (horizontal/vertical) | Div with Flex layout | Gap and alignment map directly |
| Grid | Grid layout | Rebuild column spans per breakpoint |
| Color styles | Color variables | Create these first |
| Text styles | Tag styles + size variables | Style H1–H6 and body globally |
| Components + variants | Components + properties, combo classes | Hover variants become interaction states |
| Breakpoints (Desktop/Tablet/Phone) | Base + tablet, mobile landscape, mobile portrait | Styles cascade down from desktop |
| Appear / scroll effects | Interactions (page load, scroll into view, while scrolling) | Some need custom GSAP or code |
| CMS collections | CMS collections | Move via CSV export/import |
| Code components / overrides (React) | None | Rebuild natively or use an Embed with custom code |
| Framer forms | Webflow forms | Reconnect notifications and integrations |
| Redirects | 301 redirects (CSV import) | Import overwrites existing ones |
Turning a Framer template into a Webflow template
Converting a template is different from migrating a client site. There are no rankings to protect, but the build will be opened, inspected and edited by strangers, so structure matters more than speed.
- Keep the original art. For Hulio we kept the template’s own images instead of swapping in stock photos, so both versions look like the same product.
- Write the class system for a buyer, not for yourself. Someone else has to understand
hero_titlewithout asking you. - Check licences for every font and image you ship, because a marketplace buyer will publish them on their own domain.
- Read the marketplace’s current submission rules before you start building. [ADD: Webflow Marketplace requirements we had to plan around for Hulio]
If you’d rather start from a ready-made design, browse our landing page templates and portfolio templates, and grab icons and illustrations from our list of free design resources for web professionals.
Mistakes to avoid
- Building pages before tokens. You’ll restyle every page twice.
- Copying Framer’s absolute positioning. It looks fine on desktop and breaks on tablet.
- Changing URLs “while you’re at it”. Separate the platform move from content and URL changes so you can tell what caused any ranking drop.
- Importing redirects over existing ones. The CSV import replaces the whole list.
- Switching DNS before QA. Test every page on the webflow.io staging domain first.
How long does a Framer to Webflow migration take?
Webflow agency Flow Ninja quotes 2–5 weeks for most Framer to Webflow migrations, depending on page count, animation complexity and CMS needs. A five-page brochure site with light effects can be done in days. A site with heavy scroll animation and several connected collections sits at the long end.
[ADD: how long the Hulio conversion took, and which step took longest]
Frequently asked questions
Can I import a Framer site into Webflow?
No. There’s no importer in either direction. You can export Framer CMS collections as CSV and import them into Webflow, but layouts, styles, components and animations must be rebuilt manually.
Will I lose SEO rankings moving from Framer to Webflow?
Not if you keep URLs the same where possible, add 301 redirects for every URL that changes before switching DNS, and carry over titles, descriptions and alt text. Expect some short-term fluctuation while Google recrawls.
Can I export Framer CMS content?
Yes. The CMS Export plugin on the Framer Marketplace downloads any collection as a CSV file, which you can then map to fields in Webflow’s CSV importer.
Do Framer animations work in Webflow?
Not directly. Most effects can be rebuilt with Webflow Interactions; complex scroll or physics-based effects may need GSAP or custom code.
Is it cheaper to hire someone to migrate Framer to Webflow?
It’s faster if you don’t know Webflow well. If you already use Webflow, a small site is very doable yourself with the step order in this guide.
The bottom line
A Framer to Webflow migration is a rebuild with a content export bolted on. Audit first, build tokens and components before pages, import CMS content by CSV, and leave redirects and DNS for the very end. Do it in that order and the move is mostly predictable work.