1 min lesson
Match exactly, then improve where code can
Rebuild the main list in "Match exactly, then improve where code can", then say what each item changes.
Step 1 of 2
Match exactly, then improve where code canfidelity first, judgment second
Get spacing, type and color exact before you get clever. Pull the real values, don’t eyeball them. Then apply the things a static design tool literally cannot express, because that is where code adds value the mockup couldn’t.
- Real interaction states - hover, focus-visible, active, disabled - that the frame only hints at.
- Motion and transitions between the states a designer drew as separate frames.
- Fluid behavior across viewport and density that fixed-width artboards can’t represent.
- Edge cases: long strings, empty data, RTL and the dark-mode pairing of every token.
Verify against the source
Overlay your build on the Figma frame at 100% and diff it. Check spacing with the measure tool, sample colors with a picker, confirm font metrics. “Looks right” is not pixel-perfect; an 8px gap rendered at 6px is the kind of miss this role is hired to catch.