What moves, and what does not
Comes across
- Layout, spacing, type and colour, built as Webflow styles
- Sections and components, built once and reused
- Desktop, tablet and mobile layouts
- Images and icons, exported and added as assets
- Interactions and animations, rebuilt in Webflow
- Repeating content, set up so your team can edit it
Stays behind
- Figma auto layout. It is a guide, not code. Webflow layouts are built by hand with flexbox and grid.
- Prototype links and flows. They show intent. They are not copied.
- Placeholder text. Real content goes into pages and CMS items.
- Anything missing from the file, such as mobile frames or hover states. These need a decision, and we flag them before the build.
Protect your search rankings
A new design on a new domain has no old addresses to protect. If the design replaces a live site, treat it as a migration too, and keep the old addresses working.
Redirect map
If the new site replaces a live one, list every old address from the sitemap, a crawl, Search Console and analytics. Keep the same path where you can. Add a 301 in Webflow's site settings where the path changes. Do this before the domain switches. A brand new site needs none, but plan its page names with care, because they are hard to change once they rank.
Metadata
A Figma file rarely holds page titles and descriptions. Write them before the build, one for each page, and add them to Webflow's page settings and CMS templates. Plan the heading structure too: one H1 on each page, then H2 and H3 in order.
Sitemap
Webflow can generate a sitemap.xml. Turn it on in the SEO settings and check the page list. Submit it in Search Console once the site is live.
Search Console
Verify your domain in Google Search Console before the move, ideally with a DNS record, because that kind of proof survives a change of platform. After launch, submit the new sitemap and check the key pages with the URL Inspection tool. Then watch the Pages report for errors and the Performance report for drops. Every 404 you find gets a redirect.
Content and CMS mapping
| In Figma | In Webflow | Note |
|---|---|---|
| Frames | Pages | One page for each key frame. |
| Sections | Sections with classes | Named clearly so your team can find them. |
| Components | Webflow components | Built once and reused across pages. |
| Colour and text styles | Variables and classes | Set up before the pages are built. |
| Repeating cards and lists | CMS collections | Blog posts, case studies or products your team can add. |
| Tablet and mobile frames | Breakpoints | If only desktop is drawn, we build the rest from standard patterns. |
| Prototype animations | Webflow interactions | Scroll effects, hovers and page transitions. |
| Image and icon exports | Assets | Compressed so pages stay fast. |
Figma shows how a page looks. It does not say how it behaves. Hover states, form errors and empty states are best decided before building.
Forms and integrations
Forms
A design shows the fields. It does not show what happens next. Decide where each form sends its data, who gets the email, what the success and error messages say, and how spam is blocked.
Analytics and tags
Add Google Analytics, Tag Manager and any ad pixels in Webflow's site settings. Decide which clicks and forms count as conversions.
Fonts
Licensed fonts need to be added to Webflow. Check the licence covers web use.
Training
The aim is a site your team can edit alone. We build the CMS around what they publish and train them to use it.
The steps, in order
Review the Figma file
Check the file for responsive gaps, missing states and a clean component structure. Fix what is missing before the build.
Plan the structure
Choose the pages, the CMS collections and the class naming. Set up variables for colour, type and spacing.
Build the responsive layouts
Build each page for desktop, tablet and mobile, using components for anything that repeats.
Set up the CMS and content
Build collections, fields and template pages. Add the real content and metadata.
Add interactions
Build the scroll effects, hover states and page transitions in the design.
Connect forms and tools
Set up forms, analytics, tags and any integrations.
Test on staging
Test every breakpoint, every browser and every form. Check page speed. Fix what differs from the design.
Launch and hand off
Switch the domain or publish. Train your team on the CMS. If this replaces a live site, watch Search Console for errors.
Time and cost
Time2 to 4 weeks
Cost$3,000 to $8,000
The range depends on the number of pages, how much the CMS needs and how complex the animations are. We give a clear estimate after we review your Figma file.
More migration guides
- WordPress to WebflowLeave plugins and updates behind. Keep your pages, posts and rankings.
- Wix to WebflowGet out of the template box. Keep your pages and your place in search.
- Squarespace to WebflowMore control over layout and content. Every old link still works.
- WordPress to Custom CodeA fast site in Astro or Next.js, with code you own. Your rankings come with it.
