Pixel Perfect Overlay — FitPerfect

Overlay your Figma design on the live page and see exactly how many pixels are off. Difference blend, 1px nudge, all local.

FitPerfect puts your design mockup on top of the running page and tells you where the implementation drifts. No account, no sign-in, no telemetry, no network requests at all — your mockups never leave the browser. It only touches a tab after you click the toolbar icon. Most overlay tools stop at "something looks off" and leave the rest to your eyes. Turn on Measure, point at any element, and FitPerfect finds that element's edges in the mockup and gives you the numbers: top +8, left 0, w −6, h 0. Press space to park a reading while you go fix it. No Figma plugin, no account, no sign-in — it reads the image you already exported. Compare however suits the problem: - Opacity — fade the mockup over the page - Difference — everything that matches turns black, everything off shows up - Invert — flip the mockup to make edges pop Line it up precisely: - Drag with the mouse, or nudge 1px at a time with the arrow keys (hold Shift for 10px) - Live x/y readout, one click to re-center - Fit to the viewport width, or scale by hand with a one-click reset - @2x and @3x exports are detected and scaled back to 1:1 on drop - Follow the page scroll, or pin the mockup to the viewport Built for the work, not in the way: - Keeps up to 24 mockups per site, each remembering its own position and scale - Settings survive page reloads - Collapses into a small icon bar when you need the screen - The overlay never adds scrollbars, so the layout you measure is the layout you shipped Shortcuts: arrow keys nudge, Shift+arrows nudge by 10, Alt+wheel fades the overlay, Alt+Shift+F toggles it, Escape hides it. While measuring, space freezes the reading and Escape leaves the mode. Recent updates 1.1 — Measure mode: per-edge pixel deltas against the mockup. Fit to width. Automatic @2x/@3x export detection. Mockups per site raised from 6 to 24. 1.0 — First release.