Skip to main content

Setting Up Design Baselines

4 min read Last updated: March 2026

Design baselines are the reference points QA Proof uses to detect visual changes. Setting them up correctly ensures accurate comparisons and fewer false positives.

What Is a Design Baseline?

A baseline is a "known good" state of your design — either a Figma frame or a captured screenshot that represents how the page should look. All future tests compare against this baseline.

Creating a Baseline from Figma

  1. Connect your Figma file to the project (see Figma Integration)
  2. Open the test configuration
  3. Select "Figma Frame" as the baseline source
  4. Choose the specific frame to use
  5. QA Proof will automatically export it at the correct resolution

Creating a Baseline from a Screenshot

If you prefer to use a live page as the baseline:

  1. Navigate to the page in its approved state
  2. Click "Capture Baseline" in your test settings
  3. The current screenshot becomes the reference for future comparisons

Updating Baselines

When designs change intentionally:

  1. Run a test to see the new differences
  2. Review each change
  3. Click "Accept as New Baseline" for approved changes
  4. Dismiss false positives as needed

Baseline Best Practices

  • Always use the final approved Figma design, not work-in-progress
  • Set baselines at multiple viewports for responsive designs
  • Update baselines promptly when designs are officially changed
  • Keep a consistent naming convention for easy identification