Design tokens rarely survive the handoff
Technology
Figma is where a design gets made, and it is also where most teams assume the handoff ends: export the frame, generate the component, ship it. In practice, generated code rarely survives contact with a real design system, because spacing tokens, state variants, and responsive behavior do not translate cleanly out of a static frame.
We staff design engineers who sit in both places: they build the component in Figma and then build it again in code, checking that the two stay in sync as the design system evolves rather than trusting a one time export to hold.
Where it breaks
What the handoff actually looks like
- A frame is not a component
A well organized Figma file tells you what something should look like at one size, in one state. It does not know what happens when the text is twice as long, the viewport is narrower, or the button is disabled. Someone has to make those decisions, and Figma will not make them for you.
- Generated code is a draft, not a delivery
The exported CSS or React snippet gets you most of the way to the visual, and almost none of the way to a component that fits your actual codebase: your naming, your token system, your existing patterns. We treat it as a reference, not something we ship as is.
- Variables help, but someone still owns the mapping
Figma's variables can mirror your design tokens, which cuts a real category of drift. It only works if a person keeps the mapping current on both sides, which is why we put design engineers on that job instead of assuming the sync stays automatic.
