Documentation

Design Fidelity (Figma auto-capture)

Design Fidelity automatically takes screenshots of your real, live app as people use it and grades each screen against its Figma design — then tells you exactly where the built app has drifted from the design (wrong colours, shifted spacing, missing elements, and so on). You set it up once per screen and it keeps watching from then on.

Open Design Fidelity (Figma auto-capture) settings

Configure

  1. 1

    Connect a screen to its Figma design

    First you tell PixellPeep which Figma frame is the "correct" look for each screen of your app. This frame becomes the baseline every screenshot is graded against.

    1. 1.Open Design Fidelity and pick the project you want from the "Project" dropdown.
    2. 2.Click "New binding".
    3. 3.Screen Key: a short label for the screen that your app will send with each screenshot, e.g. "checkout/review" or "home". Pick something memorable — it cannot be changed later.
    4. 4.Figma File Key and Node ID: open your design in Figma and look at its web address — https://www.figma.com/file/<FILE-KEY>/...?node-id=<NODE-ID>. Copy the FILE-KEY into "Figma File Key", and the node id (e.g. 12:345) into "Figma Node ID". Tip: right-click a frame in Figma → "Copy link to selection" to get the node id.
    5. 5.Breakpoints: the screen widths (in pixels) your design should be checked at, e.g. 375, 768, 1440. Leave the default if unsure.
    6. 6.Figma personal token: paste a token so PixellPeep can fetch the design image once to build the baseline. Create one in Figma under Settings → Account → Personal access tokens. It is used once and not stored.
    7. 7.Click "Create binding". The binding appears with "Baseline ready" once the design has been fetched (or "Baseline pending" while it works).
    Open Design Fidelity
  2. 2

    Hide any private or always-changing areas

    So PixellPeep does not flag (or capture) things like card numbers, names, ads, or live timestamps, you can blank them out. There are two ways, and you can use both:

    1. 1.On the design baseline — in the binding window, under "Mask regions", click "Add mask" and enter the rectangle (x, y, width, height in baseline pixels) covering the area to ignore.
    2. 2.In your live app, before the screenshot is even taken — when you add the capture snippet (next step), list the on-screen elements to black out with maskSelectors, e.g. maskSelectors: [".credit-card", "#email"]. This guarantees private data never leaves the user's browser.
  3. 3

    Add auto-capture to your app

    A small piece of code (the PixellPeep capture SDK) takes the screenshots automatically as users move around your app and sends them in for grading. This step is for a developer.

    1. 1.Get an API key from Settings → API keys (see the API keys guide).
    2. 2.Install the SDK: npm install @pixellpeep/capture html2canvas
    3. 3.In a React app, call the hook on each screen: usePixellPeepCapture({ projectId: 123, apiKey: "pk_...", endpoint: "https://api.pixellpeep.com", screenKey: location.pathname }, [location.pathname]). The screenKey must match the one you used on the binding.
    4. 4.Not React? The same options work as new PixellPeepCapture({...}).capture() in plain JavaScript.
    API & key reference
  4. 4

    Choose how much to capture (and respect consent)

    You usually do not need every single screen view. The SDK lets you keep volume and privacy under control:

    1. 1.samplingRate: a number from 0 to 1 — e.g. 0.1 captures about 10% of sessions. Lower it for high-traffic apps.
    2. 2.consentGiven: set to false to skip capturing entirely (for example until a user accepts analytics). When false, nothing is captured.
  5. 5

    Turn on alerts so you hear about real problems

    Connect Slack or email and set a minimum severity, so you are only notified when a screen has genuinely drifted from its design — not for tiny, harmless differences.

    Set up notifications

Test

  1. 1

    Trigger one capture

    Use your app (navigate to the screen you bound), or for a quick check open the test page included with the project (test-browser-capture.html), set the endpoint to your PixellPeep address and your project id / API key, and click the capture button.

  2. 2

    Watch it process

    Open Design Fidelity → Results. Your capture should appear and move from Queued to Processing to Completed within a short while.

    Open results
  3. 3

    Open the result and read the findings

    Click the capture to see the design and your live screen side by side, with the differences highlighted. Each finding is labelled by type — colour mismatch, spacing drift, font mismatch, missing element, extra element, or layout difference — and given a severity (low / medium / high).

  4. 4

    Confirm the alert

    If a finding meets or exceeds your chosen minimum severity, you should receive a Slack or email alert with a link straight to the result. If you set the threshold to High, low-severity differences will (correctly) not alert you.

Tips

  • Each capture uses Pixel Points (your usage credits), and the feature is available on paid plans — a quick check before processing stops you running out unexpectedly.
  • The very first capture for a screen only works once its Figma baseline shows "Baseline ready".
  • Repeated identical captures are automatically de-duplicated, so you are never charged twice for the same screen view.