Design-to-dev handoff: how to lose nothing between Figma and code
Florent Dabernat
May 15, 2026
2 min read
In this article
Faithfully translating mockups into HTML/CSS/JS while guaranteeing accessibility, performance and maintainability is an exercise where the slightest approximation shows up immediately in production.
Semantic HTML, CSS Grid, progressively enhanced JS
Semantic HTML5 structures the page with clear landmarks, properly hierarchized headings and well-labeled forms. CSS Grid handles the page's macro-structure, while Flexbox aligns components at a more local scale. ES6+ JavaScript is used as progressive enhancement: it handles interactions, dynamic accessibility (focus, aria-live) and small useful animations, without ever becoming a blocking dependency for essential content.
CMS or no-code: a choice with consequences
WordPress, with a theme like Salient for example, Webflow, Framer or Bubble answer very different needs. The choice depends on the intended maintenance, the client team's autonomy, expected scalability, security and total cost over time. The limits and lock-in risk of each solution need to be anticipated before the decision, not discovered two years later.
A product card coded in HTML/CSS with nav/main/footer landmarks, visible focus and responsive images, paired with a handoff using tokens and a review checklist, reached a mobile Lighthouse score of 91 for performance and 100 for accessibility.
The handoff that loses nothing
The handoff relies on Figma or Zeplin inspection, design tokens shared between design and development, clear documentation, rigorous versioning, and a Definition of Done that explicitly includes UI conformance, accessibility, testing and performance, for example an LCP target under 2.5 seconds.
In practice, a typical handoff exercise produces precise annotations (sizes, radii, states, motion) and a token excerpt in JSON format for colors, spacing, typography and animation durations, a shared language between designer and developer that eliminates most unnecessary back-and-forth.
Frequently asked questions
-
Why favor CSS Grid over Flexbox for the overall structure?
- CSS Grid naturally handles both dimensions (rows and columns) of a complex layout, while Flexbox excels at aligning elements in a single direction. The two combine effectively depending on the component's scale.
-
How do you choose between WordPress and a no-code solution like Webflow?
- WordPress offers more flexibility and long-term autonomy through its plugin ecosystem, while Webflow or Framer speed up the initial launch at the cost of a stronger dependency on the platform.
-
What should a Definition of Done for a web project include?
- At minimum: visual conformance with the mockup, passed accessibility tests, validated performance (Core Web Vitals) and a code review, to prevent a "visually finished" site from hiding unresolved issues.