How to overlay a Figma design on a live website

6 min read · Updated October 2026 · By the makers of Tracepaper

The fastest way to check a build against its design is to put the design on top of the page and look through it. Side-by-side comparisons hide 2–4px mistakes; an overlay makes them obvious. Here's the whole process, with or without our extension.

1. Export the frame from Figma at the right size

1. Select the frame (the whole page, not a group inside it).
2. In the right panel, under Export, choose PNG at 1x.
3. Note the frame width, for example 1440. You'll match the browser to it in the next step.

On a high-DPI screen (most laptops), a 1x export still lines up: the overlay is drawn in CSS pixels, the same unit as your layout. Export at 2x only if you need to zoom into fine detail, and scale it back to the frame width.

2. Make the browser viewport exactly as wide as the frame

This is where most overlays go wrong. A 1440px design compared in a 1423px viewport (the scrollbar ate 17px) will drift by a few pixels everywhere and send you chasing bugs that don't exist.

• DevTools way: open DevTools → device toolbar (Ctrl+Shift+M) → Responsive → type the width.
• Tracepaper way: in the overlay panel click Match window; it resizes the window so the page itself is exactly as wide as your design.
• Keep browser zoom at 100% (Ctrl+0).

3. Put the design on top of the page

With Tracepaper, open the page, press O and drop (or paste) the PNG. Set opacity to about 50% and align the top-left corner. Arrow keys nudge it 1px at a time, Shift+arrow by 10px. Layers are remembered per page, so the next time you open it the design is still there.

Without an extension you can do a rougher version: take a full-page screenshot in DevTools (Ctrl+Shift+P → "Capture full size screenshot") and stack both images in Figma at 50% opacity. It works, but you have to redo it after every change.

4. Switch to difference mode

Difference blending subtracts the design from the page. Pixels that match turn black; anything that doesn't match glows. It's the quickest way to see a heading 3px too low, a slightly wrong grey, or a card that drifted. In Tracepaper it's a toggle in the overlay panel.

5. Why the overlay still doesn't line up (and what to do)

1. Scrollbar width: Windows scrollbars take 15–17px. Match the page width, not the window width.
2. Font rendering: browsers and Figma rasterize text slightly differently. Expect soft edges around text even when it's right; look for whole-line shifts, not fuzz.
3. Line height: if every text block drifts downward a little more each paragraph, compare the line-height values, not the font size.
4. Content differences: real data is longer or shorter than the design's sample text. Check spacing between blocks rather than absolute positions further down the page.
5. Breakpoints: check each design width separately (e.g. 375, 768, 1440). One overlay per breakpoint.

Measure what the overlay shows you

Once you've spotted a difference, measure it instead of guessing: hover an element to see its size, or click one element and hover another to see the gap between them (M in Tracepaper). Fix, reload, and the overlay is still there to confirm.