6 min readby Milap Magar
From Figma to production without losing the design
The gap between a polished Figma file and the shipped product is where most designs die. Here's the handoff process I use on my own projects — where the designer and the developer are the same person, and the design still tries to escape.
Every designer knows the feeling: the Figma file is perfect, the build is 'done', and somehow the product feels 10% worse. Spacing drifted. The type scale collapsed into three sizes. The hover states never made it. Nobody decided to lose the design — it leaked out one small compromise at a time.
My fix is boring and it works: tokens before components. Before I write a single component, every colour, size, radius, and shadow in the Figma file becomes a CSS custom property with the same name the design file uses. When the code and the canvas share a vocabulary, 'close enough' stops being invisible — a wrong value looks wrong in the diff, not just on the screen.
The second rule: motion is part of the design, not a garnish. I spec easing and duration in the design phase — this site runs almost everything on one cubic-bezier curve — so animation ships with the component instead of being sprinkled on at the end. One curve, used everywhere, reads as personality. Five curves read as noise.
Last: review the build inside the design tool's frame. I screenshot the shipped page, drop it next to the mock, and look at them at the same zoom. It takes five minutes and it catches the drift that a code review never will. The design survives when someone keeps looking at it after the code exists.