Loupe

Pixel-perfect Figma to Web comparison

Compare live web components against Figma frames with pixel-level diffing, heatmap visualization, and CSS property inspection.

Download Loupe Read the Docs

Features

Everything you need to close the gap between design and implementation.

px

Pixel Diff

Pixel-level comparison using pixelmatch with configurable threshold. See exactly where your implementation diverges from the design.

</>

CSS Inspector

Side-by-side comparison of CSS properties extracted from Figma and the live web component. Covers typography, colors, spacing, borders, and effects.

☰

DOM Inspector

Built-in DOM tree inspector that traverses shadow DOM and iframes. Hover to highlight, click to capture any element on the page.

📈

Heatmap & Overlay

View results as a diff heatmap, side-by-side comparison, or an overlay with adjustable opacity for onion-skinning.

F

Figma Plugin

Companion Figma plugin sends frames directly to the app with one click. Works in Dev Mode. Extracts design properties automatically.

📋

Export for PRs

Copy inspection results as Markdown for GitHub PR comments or plain text for Slack. Exclude irrelevant properties to customize the score.

How It Works

A five-step wizard guides you through the comparison process.

Figma

Select a frame in Figma and click "Send to Loupe" in the plugin. The frame image and design properties are sent to the app.

Web

Open a browser to your local dev server. Use the DOM inspector to find and capture any element, even inside shadow DOM or iframes.

Compare

Adjust the diff threshold and run a pixel-level comparison. Both images are auto-trimmed and scaled to match.

Result

View the diff as a heatmap, side-by-side, or overlay. See the similarity percentage and download the diff image.

Inspect

Compare CSS properties between Figma and the web. Toggle properties on/off to customize the score. Export as Markdown for PRs.

Download

Grab the latest release for your platform.

macOS

.dmg installer

Download

Windows

.msi / .exe installer

Download

Linux

.deb / .rpm / .AppImage

Download

Documentation

Requirements

Install the Figma Plugin

The plugin is published to Figma for organizations, or can be loaded locally for development:

  1. Open Figma
  2. Go to Plugins > Development > Import plugin from manifest...
  3. Select figma-plugin/manifest.json from the cloned repo
  4. The plugin appears under Plugins > Development > Loupe

Run from Source

Prerequisites: Node.js 18+ and Rust.

Linux (Debian/Ubuntu):

sudo apt-get install libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf libgtk-3-dev libsoup-3.0-dev libjavascriptcoregtk-4.1-dev

Linux (Fedora):

sudo dnf install webkit2gtk4.1-devel openssl-devel libappindicator-gtk3-devel librsvg2-devel pango-devel gtk3-devel libsoup3-devel javascriptcoregtk4.1-devel

Clone and run:

git clone https://github.com/TitaniumCladStudios/loupe.git
cd loupe
npm install
npm run tauri dev

Using the DOM Inspector

The built-in inspector handles complex web apps:

CSS Property Inspection

The Inspect tab compares CSS properties between Figma and the web capture:

Uncheck properties or entire categories to exclude them from the similarity score. Use Copy Markdown to paste results into GitHub PR comments.

Keyboard Shortcuts

Architecture

loupe/
├── src/                  # Svelte 5 frontend
├── src-tauri/            # Rust backend (HTTP server, window management)
├── figma-plugin/         # Figma plugin
│   ├── manifest.json
│   ├── code.js
│   └── ui.html
└── package.json