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.

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.