Figma to Webflow
Webflow lets a team publish and change a site without a developer. That only holds if the project was built tidily. A Webflow site with classes called Div Block 47 is as hard to maintain as bad code, and harder to search.
We rebuild Figma designs in Webflow by hand in the Designer. Import plugins can bring frames across, but they tend to produce fixed sizes and throwaway class names, so we use them for assets and little else.
A naming system the next person can follow
Webflow styles everything through classes. How they are named decides how long the site stays manageable.
Names that describe purpose
A class is called card_title or section_hero, not by its colour or position. The name still makes sense after a redesign.
Utility classes for the scale
Spacing, text sizes and colours from the design get a small set of shared classes, so a margin is picked, not invented.
Combo classes kept shallow
Webflow lets classes stack. Deep stacks become impossible to reorder, so we stop at one modifier.
Variables
Figma variables are recreated as Webflow variables. Changing the brand colour is one edit.
Components
Navigation, footer and repeated cards are Webflow components with properties, so an edit in one place reaches every page.
A style guide page
One hidden page shows every heading, button, form field and colour. It is built first and kept.
Planning CMS collections
Collections are Webflow's database. Their structure is awkward to change once content is in.
Collections from the design
Anything that repeats with the same shape, such as articles, team members, case notes or jobs, becomes a collection.
Fields
Each piece of a card or detail page maps to a field: plain text, rich text, image, reference, switch.
References
An article can point to an author and to several categories. We draw this map before creating anything.
Template pages
Each collection has one template page. Optional fields use conditional visibility so empty ones leave no gap.
Plan limits
Webflow caps collections, items and fields by plan. We count what the design needs and tell you which plan covers it.
What Webflow cannot do
Better to hear this before the build than after.
Server-side logic
There is no place to run your own back-end code. Calculators, gated data and integrations need an outside service or custom script.
Long lists on one page
A collection list shows a limited number of items and nesting one list inside another is restricted. Designs with large filtered grids need pagination or added script.
Full export
Exported code contains static pages only. CMS content and form handling stay on Webflow hosting.
Large or unusual shops
Webflow Ecommerce handles a modest catalogue. Complex pricing, many currencies or marketplace features belong on a commerce platform.
Breakpoints between breakpoints
Styles cascade from the desktop view down through fixed breakpoints. Arbitrary media queries need custom code.
How to prepare the Figma file
Webflow rewards a design that was drawn on a system.
- Frames at the widths of Webflow's own breakpoints
- A spacing scale used consistently, in whole steps
- Section and layer names we can reuse as class names
- Sample entries for each collection, including a sparse one
- Prototype or notes for every scroll and hover effect
- Images exported at final crop; Webflow resizes but does not art-direct
- Form fields, success message and error message
- The 404 and password pages
How the build proceeds
You can open the project and watch at any point.
Style guide and variables
Type, colour, buttons and form fields are set up on the style guide page.
Collections
Created and filled with sample entries so templates can be built on real shapes.
Pages
Static pages and collection templates, desktop first, then each smaller breakpoint.
Interactions
Added last, and sparingly. Motion respects the reduced motion setting.
Comparison and handover
Pages are compared with Figma at each breakpoint and differences listed. Editors get a walkthrough of the Editor and the collections.
Asked before a Webflow project
Who pays for Webflow?
You do, directly. The site plan and workspace are in your name and we are invited in.
Can you add custom code?
Yes, in embeds and page settings. We keep it small and documented, because custom code is the part editors cannot see.
Should this be Webflow at all?
If the site needs logins, complex data or a large shop, probably not, and we will say so after reading the design.
Share the file and your Webflow plan
Send a view link to the design and tell us which plan you hold, if any. We reply within one business day.