Compare your Figma design to your live site — down to the pixel

Design-to-code drift is death by a thousand cuts: 4px here, the wrong grey there, a border-radius nobody updated. Screenshots don't catch it and manual QA misses it. Loupe is a Chrome extension that compares the actual rendered DOM of your page against the Figma frame it was built from, and tells you exactly what's off.

How the Figma-vs-DOM comparison works

1. Connect Figma once. Paste your own Figma personal access token — it stays on your device and is used only to fetch the frame you name.
2. Point Loupe at a frame. Paste the Figma frame URL into the Design tab; Loupe pulls its layer tree.
3. Anchor it to the page. Click the matching element on your live site. Loupe pairs each Figma layer with its DOM element automatically.
4. Read the heatmap. Every mismatch is boxed and color-graded by severity — hover for the exact property, expected vs actual value, and a suggested fix.

What it catches

• Spacing and size differences (padding, margin, width, height, gaps) to the pixel
• Color mismatches — and with a design-system profile loaded, the diff names the token you should be using instead of a raw var(--…)
• Typography, border, and radius drift per element
• Severity grading so you fix the glaring stuff first, not the sub-pixel noise

Optional: AI-written fix suggestions

Bring your own Anthropic API key and Loupe can turn any diff into a plain-English fix — what to change and why — sent only when you ask for it. Your key stays on-device.

Private by design

Everything runs locally in your browser. Loupe fetches the Figma frame with your token and compares on-device — nothing is uploaded, no analytics, no tracking.

FAQ