Pixel Perfect Overlay — Design vs Live Page, Unlimited Layers

Description

Overlay your Figma export on any page and compare pixel by pixel. Unlimited layers, works on localhost. No account, no subscription. Drop a Figma export onto any page — production, staging, or localhost — and see exactly where the build drifted from the design. Matching pixels turn black. Everything that is off glows. ★ KEY FEATURES • Stack as many design layers as a page needs — there is no cap, and there will never be one • Flip to difference mode with one key: what matches goes black, what is off lights up • Nudge a layer one pixel at a time with the arrow keys, ten with Shift • Lock a layer and click straight through it — the page stays clickable and fully inspectable in DevTools • Detect @2x and @3x exports automatically, so a 2880px Figma frame lands at the right 1440px width • Keep every layer per page — close the browser, come back, it is where you left it • Paste straight from Figma with Ctrl/Cmd+V, or drop a PNG, JPG or WebP 🔒 PRIVACY FIRST • Your design images never leave your computer — the extension makes no network requests at all • No account, no sign-in, no analytics, no tracking, no ads • Installs asking for zero site access. It reads the page you are on only in the moment you press the shortcut, and only that page • Access to a specific site is requested one site at a time, and only if you turn on "Remember on reload" yourself 💡 HOW TO USE 1. Open the page you are building and press Alt+Shift+P (or click the icon) 2. Paste your design with Ctrl/Cmd+V, drop the file in, or pick it from disk 3. Press D to switch to difference mode and find what moved ❓ FAQ Q: Is there a limit on how many layers I can add? A: No. Not on the free version, not per site, not per page. The layer cap is the reason this extension exists. Q: Are you going to cut the free version later, like the other one did? A: Everything described above is free and stays free. A paid Pro add-on is planned for reporting and multi-breakpoint work, but it will only add things that do not exist today — it will never take away something you already rely on. Q: Will it break my page layout? A: No. The overlay lives in a closed Shadow DOM attached outside your markup, so it cannot inherit or leak styles. Lock the layer and the page underneath behaves exactly as if nothing were there — links click, DevTools inspects normally. Q: Does it work on localhost? A: Yes, that is the main use case. It also works on pages with strict CSP, because the design is drawn to a canvas rather than loaded as a page resource. Q: Why does it not ask to read and change data on all my websites? A: Because it does not need to. It uses activeTab, which gives it access to one tab at the moment you invoke it and takes that access away again afterwards. Q: My Figma export looks twice too big. What do I do? A: It normally sorts itself out — a 2× export is detected from its width. If the guess is wrong, pick @1x / @2x / @3x in the panel. 📮 SUPPORT nvminhtu@gmail.com

Details & SEO