Skip to main content

First Test Creation

5 min read Last updated: March 2026

Now that you've set up your QA Proof account and connected your Figma files, it's time to create your very first design QA test. This guide walks you through every step of the process.

Before You Begin

Make sure you have:

  • A QA Proof project set up (see Quick Start Guide)
  • At least one Figma design file connected
  • A live URL or staging environment to test against

Creating a New Test

  1. Open your project from the dashboard
  2. Navigate to the "Tests" tab
  3. Click "Create New Test"
  4. Give your test a descriptive name (e.g., "Homepage — Desktop")

Configuring Test Settings

Choose the parameters for your test:

  • Viewport size: Select from common presets (Desktop 1440px, Tablet 768px, Mobile 375px) or enter a custom size
  • Browser engine: Chromium (default), Firefox, or WebKit
  • Figma frame: Select which frame from your connected design file to compare
  • Page URL: Enter the URL of the live page to capture

Running the Test

Click "Run Test" to start the comparison. QA Proof will:

  1. Capture a screenshot of the live page at the specified viewport
  2. Export the selected Figma frame as an image
  3. Run a pixel-level and structural comparison
  4. Identify differences and calculate severity scores

Results typically appear within 1–2 minutes depending on page complexity.

Understanding Results

Your test results include:

  • Overall match score: A percentage showing how closely the live page matches the design
  • Highlighted differences: Visual overlay showing exactly where mismatches occur
  • Issue list: Individual issues categorized by type (layout, color, typography, spacing)
  • Side-by-side view: Compare Figma and live screenshots directly

Next Steps