# figma → webflow
Figma to Webflow, structured cleanly.
Send a Figma file. Ship a Webflow project with clean class taxonomy (Client-First or Lumos), CMS collections wired to Figma auto-layout components, responsive from 320 to 1920, accessible, tested. Figma-to-Webflow plugin used where it saves time, hand-restructured where it does not.
What you get.
- Clean Webflow class taxonomy: Client-First by default, Lumos on request. No orphaned classes, no color-red-2-copy-3.
- CMS collections structured from your Figma component variants (Blog, Portfolio, Team, Services). Reference fields wired.
- Responsive at 320, 480, 768, 992, 1200, 1440 (Webflow default plus mobile portrait). Container queries via wrap-and-max-width.
- Interactions built with Webflow native (no external animation lib) unless the design demands GSAP.
- Accessibility: focus states, aria-labels on icon buttons, semantic heading order, forms labelled, colour contrast 4.5:1 verified.
- CMS-ready staging URL on delivery. Client-transfer to your workspace or handover the .webflow export.
Real code output.
A real example of what ships. Not a rendered marketing screenshot; the actual source in your repo.
<!-- Webflow class structure, Client-First -->
<section class="section_hero">
<div class="padding-global">
<div class="container-large">
<div class="hero_component">
<h1 class="heading-style-h1">Figma to Webflow.</h1>
<p class="text-size-large">Send a Figma. Ship a clean Webflow build.</p>
</div>
</div>
</div>
</section>Tools we use.
Figma-to-Webflow plugin used for first-pass layout on component-heavy designs. Restructured by hand when the plugin emits nested-div spaghetti. Relume Library referenced for section patterns when the design is on-pattern.
Turnaround.
| Scope | Turnaround |
|---|---|
| Single page | 5d |
| 5-page marketing site | 10d |
| CMS-driven site | 14d |
Pricing.
Single Webflow page from $349. 5-page bundle from $1,490. See /pricing/ for the full table.
FAQ.
Client-First or Lumos?
Client-First is the default. Lumos on request. Custom system if you already have one; send the docs.
Do you build CMS collections?
Yes. Blog, Portfolio, Team, Services, Case Studies, or bespoke collections. Reference fields wired. Item templates built. Live CMS items seeded from Figma variants.
Interactions and animations?
Webflow native interactions by default (scroll, hover, click). GSAP or Lottie added when the design calls for it and Webflow native cannot deliver.
Do you handle SEO?
Meta title and description slots per page. Open Graph image slot. Canonical, robots, XML sitemap enabled by default. Schema markup on request.
Can you match Relume section patterns?
Yes. If the Figma uses Relume or is Relume-shaped, we speed up by starting from Relume Library then restructure to your class system.
Transfer to my workspace?
One workspace transfer included. You take ownership on delivery. We keep an export copy for the 14-day fix window.
Send a Figma link.
Two-line brief, one Figma URL, one email. Quote back inside 24 hours weekdays. If you have a stack constraint (React version, Tailwind config, existing design tokens), say so up front.