The Design Fidelity test compares your live page against a Figma frame and reports where the implementation drifted from the design. It scores 5 categories independently — Layout, Colors, Typography, Spacing, Components — and flags every difference with severity and a specific fix recommendation.

What you need

The QA Proof WP plugin installed and connected (guide).
A Figma file with your target frame. The file's sharing setting must allow "Anyone with the link can view", OR you can provide a Figma personal access token (free Figma plans don't support API access — Professional or higher is required for token-based access).
The live URL of the page that implements that design.
Alternatively, you can upload a static image instead of a Figma URL — same comparison logic, no Figma account needed.

Get your Figma URL

In Figma, select the frame you want to compare, right-click → Copy/Paste as → Copy link to selection. The URL looks like:

https://www.figma.com/design/<file-key>/<name>?node-id=<frame-id>

The node-id is essential — without it we capture the first frame in the file, which usually isn't what you want.

Get a Figma personal access token (optional)

If your file is private, generate a token in Figma:

Open Figma → click your avatar → Settings.
Go to Security → Personal access tokens.
Generate a new token, copy it (it starts with figd_). Tokens are shown only once.
Paste it into the WP plugin's Tests form when running a Design Fidelity test.

⚠ Figma Starter plan limit: Figma's API rate-limits Starter plans to as few as 6 requests per month. For active testing, you need a Professional+ Figma workspace, OR use the Upload Image option instead.

Run the test

WP admin → QAProof → Tests → Design Fidelity tab.
Pick your design source: Upload Image (recommended for most users) or Figma URL.
Enter the live page URL.
For Figma: paste the URL and (if needed) the personal access token. There's a "Save Design" button that caches the fetched image so future runs don't hit Figma's API again.
Click Run Test. Total time 30–90 seconds.

Reading the result

Design Fidelity scores 5 categories:

Layout — element positions and grid structure.
Colors — backgrounds, borders, text color.
Typography — font family, size, weight, line height.
Spacing — padding, margin, gap values.
Components — button, form, card consistency.

The Issues list shows every difference with severity (high / medium / low) and a CSS-level fix suggestion. The screenshot view overlays markers showing exactly where each issue is on the page. Below the score is a "Download as PDF" button — same branded report sent in notification emails.

Element-level fidelity

Instead of comparing the whole page, you can select a specific region (e.g. just the hero) and compare only that. In the Tests form, click Inspect Mode after entering the URL — the page renders with a region selector. Drag to highlight the region, then run.

Tips for good results

Match viewport to design. If the Figma frame is 1440×900, run the test at 1440 too (default). For mobile-first designs, also try the Responsive test which captures multiple viewports automatically.
Stabilize dynamic content first. If the page has a carousel or counters, the live screenshot may show a different state than the design. The plugin masks dynamic content (timers, rotating elements) by default.
Save the design image. After your first Figma fetch, click Save Design in the preview panel. All subsequent tests reuse the saved image — zero Figma API calls.

Troubleshooting

"Figma file not found"

Either the file is private (need a token), the URL is malformed (must include node-id), or the file was deleted. Open the URL in your browser to verify access.

"Figma rate limit exceeded"

You've hit Figma's per-month API quota. Use Upload Image instead, or upgrade your Figma plan to Professional+. The plugin caches Figma images for 24 hours by default to minimize hits.