From Figma to Code: What Actually Survives the Handoff
Marcus Webb
17 followers
A mockup is a screenshot of one screen
The design file shows a fixed width, perfect content and no empty states. The browser gives you every width, real words and a user who pastes an essay into the name field. The handoff fails when people treat the mockup as instructions rather than as intent, so the first job is reading what the design is protecting: hierarchy, spacing rhythm, and the feeling of the brand.
What translates cleanly
- Type scale and weights. Sizes and the relationships between them survive exactly, and they do most of the visual work.
- Spacing system. If the design uses multiples of four or eight, keep that discipline in code rather than eyeballing pixels.
- Colour roles. Not the hex values, the roles, primary, muted, danger, and where each one is allowed to appear.
- States nobody drew. Hover, focus, empty, loading and error are where the real design decisions live, and the file usually says nothing about them.
What to throw away
Absolute positions pinned to a canvas, text that only fits because the mockup has no translations, and fixed heights on content that grows. Grid, flex and a spacing scale beat pixel coordinates every time, because they survive contact with long names, small screens and a content editor who ignores the brief.
Keep the designer in the loop
- Flag every place you are deliberately deviating from the file, with a reason.
- Screenshot the real build at the widths that matter and send them back.
- Agree on breakpoints together, since a design decided at one width will not survive another.
- Ask which parts are sacred and which are open to interpretation.
When the two disagree
If the browser reveals a problem the mockup hid, the browser is right, and the fix belongs in the design, not in a fight. Long titles wrapping badly, buttons that cannot fit their label, contrast that fails on a phone in sunlight, all of these are design bugs discovered by code.
Real content is where most of this shows up. Paste in the longest headline you can imagine, add a description three lines longer than the placeholder, and shrink the window. What breaks at that moment is not an edge case, it is Tuesday.
The best handoffs are boring: shared spacing, shared colours, shared type, and early screenshots. Build the system rather than the picture, and the page you ship will match the design where it counts while still working for every person who was never in the room.
Common questions
What should you throw away?
Absolute positions pinned to a canvas, text that only fits because the mockup has no translations, and fixed heights on content that grows. Grid, flex and a spacing scale beat pixel coordinates every time, because they survive contact with long names, small screens and a content editor who ignores the brief.
How do you keep the designer in the loop?
- Flag every place you are deliberately deviating from the file, with a reason. 2. Screenshot the real build at the widths that matter and send them back. 3. Agree on breakpoints together, since a design decided at one width will not survive another. 4. Ask which parts are sacred and which are open to interpretation.
When the two disagree?
If the browser reveals a problem the mockup hid, the browser is right, and the fix belongs in the design, not in a fight. Long titles wrapping badly, buttons that cannot fit their label, contrast that fails on a phone in sunlight, all of these are design bugs discovered by code.
