Design
Figma-to-code contracts that survive a sprint
Omar Farouk · 2025-02-07 · 6 min
Resources
We do not estimate screenshots. We estimate named components with auto-layout and a token file. Anything else is a painting, and paintings slip every sprint.
The inspect ritual is thirty minutes with design and engineering before the estimate. We write the exceptions in the ticket: this is a one-off, this maps to Button, this spacing is wrong in the file.
Inspect together
A hallway conversation after merge is how padding wars start. Shared inspect kills a week of Slack. The file is the contract only after both sides have walked it.
Auto-layout is non-negotiable for anything that will flex. Absolute positioning in Figma becomes magic numbers in CSS. We send those frames back.
Name the layers
Frame 1278 is not a component. PrimaryButton / large / disabled is. Naming is a gift to the person who implements at 11pm.
Contracts that survive a sprint are boring, named, and inspected. That is the work.
Related articles
Design
Dark UI contrast that still passes
Muted text, glass panels, and the WCAG line we will not cross for atmosphere.
Nina Alvarez · 2025-03-19 · 6 min
Read articleDesign
Motion that does not lie about state
Duration, easing, and the reduced-motion path we ship on every marketing surface.
Nina Alvarez · 2025-04-08 · 6 min
Read articleDesign
Ship tokens before you ship a button
Color, type, and space as code — so dark mode is not a weekend project.
Nina Alvarez · 2025-05-16 · 6 min
Read article