The handoff problem
The gap between a design in Figma and its implementation in code is where most quality is lost. Spacing is approximated. Typography is close but not exact. Interactive states that were designed are forgotten in development, or development discovers states that were never designed. This is not a tools problem — it is a process problem.
What goes wrong
- Designers use magic numbers instead of a defined spacing scale
- Components in Figma do not map cleanly to components in code
- Responsive behaviour is implied but not specified
- Interactive states — hover, focus, error, loading, empty — are incomplete
- Developers interpret ambiguity differently from what was intended
A shared language
The most effective solution we have found is a shared language between design and development. This starts with design tokens — a single source of truth for colours, spacing, typography, and motion that both Figma and code reference. When a designer uses an 8px spacing value in Figma, the developer uses the same token in CSS. There is no interpretation required.
Component naming matters too. If a component is called “CardHeader” in Figma and “HeroSection” in code, every conversation about it will include a translation step. That friction adds up across hundreds of components and thousands of conversations.
Design for every state
If a state can exist in production, it should exist in the design file. Empty states, error states, and loading states are not edge cases — they are part of the product.
We ask designers to work through a checklist for every component: default, hover, focus, active, disabled, loading, error, empty, and populated with real content of varying lengths. This adds time to the design phase but eliminates entire categories of bugs and back-and-forth during development.
Closing the gap
Perfect fidelity between Figma and code is not the goal — the browser is a different medium with its own constraints. The goal is shared understanding. When designers and developers work from the same tokens, the same component names, and the same understanding of every state, the gap narrows to the point where it no longer matters.