"Looks about right" and "matches the design" are not the same thing. A heading that's 6px too low or a gap that's 8px too wide is easy to miss when you flip between Figma and the browser, and it's exactly the kind of thing a designer spots right away.
The oldest trick for this is an overlay: put a screenshot of the design on top of the page, make it see-through, and look for the parts that don't line up.
I made a free Chrome and Edge extension for this called SpecMatch. Here's the workflow.
1. Get a design image at the right size
Export the frame from your design tool at 1x. If you only have a 2x export, that's fine: set the layer to 50% scale.
2. Add it as a layer
Open the page you're building, click the SpecMatch icon, and add the image (or paste it straight from the clipboard).
3. Line it up
Set the opacity to around 50% and move the layer with the arrow keys (Shift moves 10px at a time) until a fixed element like the logo or nav sits on top of itself.
4. Switch to Difference mode
Now everything that matches turns black, and anything that's off lights up. You stop comparing and just look for the bright bits.
If you want to try it without a design of your own, there's a demo page with three planted mistakes: https://soubeer.github.io/specmatch/demo/ (save design.png from the link at the top and add it as a layer).
A few small things that help:
- Check at the same viewport width as the design frame, or everything below the first breakpoint will look wrong.
- Lock the reference layer once it's aligned so you don't nudge it by accident.
- Keep one layer per section if the page is long; you can show and hide them separately.
SpecMatch is free with unlimited layers, and the images stay in your browser. It's my first published extension, so feedback is welcome.
Chrome: https://chromewebstore.google.com/detail/keffgeceldbbkolpinldhgopblfjejck
Edge: https://microsoftedge.microsoft.com/addons/detail/apcjabipeglbgaccbpjgmapgdillpgcf
Top comments (0)