Webflow: from Figma design to live site (designer's workflow)
The complete designer workflow for taking a Figma file to a published Webflow site — including class system, CMS, interactions, SEO and handoff.
Webflow is the platform of choice for designers who want pixel-precise control without writing code. The trade-off: a steeper learning curve than Squarespace/Wix, and a more thoughtful approach to structure (classes, components, CMS).
This guide is for designers comfortable in Figma who want to ship the same level of polish in Webflow. It's not a beginner walkthrough — it assumes you understand boxes, flexbox, and basic CSS concepts.
Class naming: Client-First or BEM
Webflow doesn't enforce a class system, but you absolutely need one. Without it, your site becomes unmaintainable within 20 pages — every section has its own one-off classes and you can't change anything globally.
Two viable systems: Client-First (Finsweet's open standard, dominant in 2026) or classic BEM. Pick one before building. Client-First is friendlier for designer/client handoff; BEM is more familiar to developers.
Components and CMS planning
Plan your components (Webflow's reusable symbols) and CMS Collections BEFORE building. Header, footer, CTA blocks, card patterns → components. Anything with more than 3 instances of the same data shape (blog posts, team members, projects, products) → CMS Collection.
Retrofitting components and CMS later is painful. An hour of planning saves a day of restructuring.
Step by step
- 01
Set up the project in Webflow
New Site → Blank. Pick a Workspace plan that supports CMS if you need it. Set the timezone and primary domain placeholder.
- 02
Install Client-First
Webflow Marketplace → Client-First Style Guide → clone. This gives you a pre-built style guide with utility classes, spacing tokens, and typography presets. Customize the variables to match your brand.
- 03
Translate Figma styles to Webflow variables
In Webflow → Variables panel. Add color tokens, spacing scale, font sizes, breakpoints. Match Figma 1:1 so the design system stays in sync.
- 04
Build the design system page first
A single page that contains every component, button variant, typography style, and color swatch. This is your visual contract — every other page should pull from this.
- 05
Build the header and footer as Components
Add → Components → New Component. Components let you edit once, update everywhere. Critical for headers/footers that appear on every page.
- 06
Plan and create CMS Collections
CMS → New Collection. For a blog: Posts, Categories, Authors. For a portfolio: Projects, Categories, Clients. Define fields carefully — adding/changing a field later is fine, but renaming a slug field breaks URLs.
- 07
Build Collection templates
Each Collection gets a /collection-slug/[slug] template page. Bind text, images, and rich content to CMS fields. Use Collection Lists on category pages to show filtered grids.
- 08
Build interactions sparingly
Webflow Interactions are powerful but easy to over-use. One hero scroll animation + subtle hovers is plenty. Heavy parallax and scroll-triggered animations destroy mobile performance and accessibility.
- 09
Make it responsive
Test every breakpoint: desktop, tablet (landscape and portrait), mobile (3 sizes). Webflow's breakpoint inheritance flows down — set defaults at desktop, override only when needed.
- 10
Set per-page SEO
Page Settings → SEO → Title, Description, Open Graph image. Webflow has solid defaults but you must customize per page.
- 11
Connect a custom domain
Project Settings → Hosting → Add Custom Domain. Point DNS to Webflow's load balancer. Enable SSL (automatic). Wait for propagation.
- 12
Publish to the staging subdomain first
Publish → yoursite.webflow.io. QA there. Only push to the custom domain once you've checked every page, form, and CMS template.
- 13
Set up Webflow Forms or replace with a better one
Webflow Forms work but lack notifications/spam protection. Use Basin, Formspark, or connect to a CRM via Zapier/Make for anything mission-critical.
- 14
Add analytics and Search Console
Project Settings → Custom Code → Head. Paste GA4 or GTM tag. Add Google Search Console verification meta. Submit sitemap (auto-generated at /sitemap.xml).
Key takeaways
- Pick a class system (Client-First or BEM) before building. Don't improvise.
- Plan components and CMS Collections before designing — restructuring later is painful.
- Build a design system page first; every other page pulls from it.
- Use interactions sparingly. Heavy scroll animations destroy performance.
- Test every breakpoint. Webflow's responsive controls are powerful but unforgiving.
Troubleshooting
Frequently asked questions
+Webflow vs Framer in 2026?
Webflow has the deeper CMS and more mature ecosystem. Framer is faster to design in and has better motion. For content-heavy sites with 50+ pages or a real CMS, Webflow wins. For marketing/portfolio sites under 20 pages, Framer is often faster.
+Can clients edit Webflow sites?
Yes, via the Editor (basic content edits) or by giving them a Workspace seat with Designer access. Editor mode is safe for non-technical clients — they can edit text and images without breaking layouts.
+Is Webflow good for SEO?
Yes. Clean HTML, fast hosting, full control over titles/descriptions/schema, automatic sitemaps. Scores comparably to WordPress in 2026.
+What's the real cost of Webflow?
Site plans start at $14/month (Basic) up to $39/month (CMS) and $49/month (Business). Add Workspace seats ($24+/month) for collaboration. Total for a typical agency project: $40–80/month per site.
We build sites on Squarespace, Wix, WordPress, Shopify, Webflow and Framer — from blank canvas to live domain.
Book a website call