Visual Comparison

Visual Comparison lets you compare your live site against Figma designs by overlaying a design frame on the page. Adjust opacity, position, and scale to spot differences, then run an AI-powered diff to identify design drift automatically.

Prerequisites

Before using Visual Comparison, you need a Figma account connected to OverlayQA and a Figma file URL linked to your project. You can set both up in your project settings within the OverlayQA sidebar.

Start a Comparison

Open the OverlayQA sidebar on the page you want to compare.
Click the Workflows button (play icon) in the toolbar.
Select Visual Comparison from the dropdown.

If Figma is not connected, you will see a prompt to connect in Settings. If your project does not have a Figma file linked, you will need to add the Figma file URL in project settings first.

Select a Frame

The frame picker loads all top-level frames from your linked Figma file. Each frame shows a thumbnail preview, name, and dimensions. Use the search bar to filter frames by name. Click a frame to select it as the overlay.

Overlay Controls

Once a frame is selected, it appears as a semi-transparent overlay on the current page. You can adjust the overlay using these controls:

Opacity — Adjust from 0% to 100% (default 50%). Lower opacity lets you see the live page through the design.
Drag to move — Click and drag the overlay to reposition it on the page.
Resize — Drag any corner handle to scale the overlay.
Alignment — Use alignment options to snap the overlay left, center, right, top, middle, or bottom.
Lock — Toggle the lock button to prevent accidental dragging or resizing.
Responsive mode — When enabled (default), the frame auto-scales to fit the viewport width while maintaining aspect ratio.

Scrub Mode

Scrub mode replaces the opacity slider with a vertical clip-reveal divider. The design frame clips to one side of the divider and the live page shows on the other, so you can slide back and forth to compare pixel-by-pixel. Click Scrub next to the Opacity toggle, then drag the handle or use arrow keys to nudge position. The overlay is automatically locked during scrub mode.

Element Inspection

When creating issues in annotation mode, OverlayQA shows an inspector tooltip with CSS properties as you hover over elements: size, layout, typography, colors with hex values, and design token matching. Hold Cmd (Mac) or Ctrl (Windows) to select the deepest element under your cursor. Press D to drill into the first child of a container.

AI Diff Analysis

To run an automated comparison, OverlayQA captures a screenshot of the live page and sends it alongside the Figma frame image for AI analysis. The comparison pipeline runs three steps:

Capture page — A full-page screenshot is taken (the overlay is temporarily hidden).
Fetch Figma frame — The selected frame image is retrieved from Figma.
Analyze — Both images are sent to the server for AI-powered diff analysis.

Reading the Results

The analysis returns a similarity score (0-100), a confidence level, and a list of detected differences categorized by type (color, spacing, typography, layout) and severity (critical, high, medium, low).

80-100 — High fidelity. The implementation closely matches the design.
60-79 — Moderate drift. Some differences worth reviewing.
Below 60 — Significant drift. Multiple areas deviate from the design.

Create Issues from Findings

From the comparison results, you can promote detected differences into issues. Click Promote to Issues to create issues from all findings, or select individual diffs to create issues from specific differences. Each issue includes the comparison context and the specific deviation detected.