02 —The cost of the handoff
What gets lost between Figma and the live site.
The process — step by step
Design. The components are drawn in Figma. What you get is a picture of the component, with notes attached — not the working component itself.
What it costs
→ Everyone after this point has to interpret that picture. You can't click it, fill it with real content, or test it.
Write it up. The design is turned into a written guide: spacing, different states, screen sizes, edge cases — all noted so engineers can rebuild it.
What it costs
→ That guide is one more document to keep up to date. Anything the notes leave out, the engineer has to guess.
Build. Engineers rebuild the library in code from that guide, asking questions whenever the guide runs out.
What it costs
→ The same component now exists twice — once in Figma, once in code. Every future change has to be made in both, in the right order.
They fall out of sync. New releases go out, quick fixes get made, redesigns touch one side and not the other. The two copies stop matching.
What it costs
→ Nobody chooses for them to drift apart. It just happens, because two separate copies always drift — the only question is how fast.
How the cost adds up
Each step looks fine on its own. Together they add up to a hidden cost: two versions to keep in sync, double the upkeep, and a design that loses a little at every handover — paid on every component, on every change, for as long as the site lives.
What it costs
→ This cost is built into the process. Better notes or a tighter process shrink it; only removing the handover removes it.
Next
If the cost is built into the process, the fix has to change the process too. The next phase proposes it: stop translating, and build the library right where the site runs.