Design in components
If the Figma file is built from components with clear variants, the Webflow build mirrors it almost one to one. If it is built from loose frames, every page becomes a rebuild.
Every repeated element is a component before it reaches a developer.
Rule of thumb
Name components the way developers will: Card / Project / Large, not “Frame 482”.
Agree on tokens
Colours, type sizes and spacing should exist as variables in Figma and as classes or variables in Webflow — with the same names.
Colour → Type scale → Spacing scale → Radius → Shadow. Five token groups, one source of truth.
Our structure
Tokens make later changes cheap: change a value once and the whole site follows.
Plan the CMS early
Anything that repeats — projects, posts, team members — belongs in a CMS collection. Design the fields in Figma as annotations before building.
Annotate each repeating card with its CMS fields right on the design.
Try this
Editors will thank you: they can add a case study without touching the layout.
Review in the browser
Do design reviews on the staging site, not in Figma, once the build starts. Real browsers reveal spacing, wrapping and motion issues that static frames hide.
Three breakpoints · Real content · Keyboard pass · Reduced motion on.
Checklist
Keep a shared list of fixes and close them in batches. Drip-fed feedback slows everyone down.