Put your Figma export over the real page and see what drifted: spacing, sizes, alignment, colour. No plugin, no sign-up, nothing uploaded.
Export the frame
In Figma, select the frame and export it as PNG, at 1x or 2x.
Add your live UI
Paste the page's URL, upload a screenshot, or capture a browser tab.
Spot the gaps
Overlay, swipe or highlight the differences, then nudge to line them up.
1 · Figma export
Drop your Figma frame here
Export the frame as PNG (File ▸ Export, or Cmd/Ctrl+Shift+E). You can also paste it.
2 · Your live UI
Add your Figma export first, so we know the width. Some sites refuse to be shown inside another page; if yours stays blank, use Capture a tab.
No files to hand?
Add a Figma export and your live UI, and they'll appear here, one on top of the other.
Everything runs in your browser. Your images and pages are never uploaded.
Match the width
Compare at the width you designed for. A 390px frame needs the page at 390px, so resize the window or use your browser's device toolbar before capturing.
Same content, same state
Use the same text, images and state (logged in, empty, error) in both. Different content shows up as a difference, even when the layout is right.
Line up the top
Browsers add bars and banners. Use Auto-align or the arrow keys so the first element lines up; everything below is then a real difference.
Turn the sensitivity down
Fonts render slightly differently in Figma and browsers. Lower sensitivity hides that noise and leaves real spacing and size changes.
Yes. Paste the address and the page loads under your design, at the design's width, so you can overlay, swipe and see differences. Some sites block being shown inside another page; for those, capture the tab instead. Localhost works too, in most browsers.
Browsers don't let one site read the pixels of another, which keeps you safe. To get a score and a list of changed areas, capture the tab or upload a screenshot: then both images are on your side and can be measured.
No. Everything happens in your browser. Files, captures and pages never leave your computer.
The match is the share of pixels that look the same. Each area is a group of changed pixels, with its position and size in design pixels, so 'x 24, y 410 · 342×56' is a box you can find in your Figma frame.
Not yet. It shows where and how big a difference is. For exact values, compare the area in Figma's inspect panel with your browser's developer tools.
More free tools
Spotting a 4px drift is a good eye. Knowing why the spacing was 24 in the first place, and designing systems that stay consistent, is the job. Our course takes you from foundations to research, UI, design systems and AI products, with mentors and real projects.
Or practise first: Hand off to developers, spacing and grids and the Handoff game.