When a webpage is not publicly accessible, you run probes using the Uiprobe Chrome Extension.
This guide assumes the extension is already installed. If not, see How to install the Chrome Extension.
When to use the Chrome Extension
Use the Chrome Extension if the webpage you want to compare:
- requires authentication
- is hosted on staging or an internal environment
- is not accessible via a public URL
For public webpages, probes can be created directly from the web app.
What you need
- the Figma frame URL for the design you want to compare
- the webpage open in Chrome, signed in where needed
Run a probe from the Chrome Extension
- Open the webpage you want to compare in Chrome. Make sure the page is fully loaded and shows the state you want to validate.
- Click the Uiprobe icon in the browser toolbar. The extension uses the current tab as the webpage.
- If the page has no probes yet, click Create new. If it already has probes, click + and then New probe.
- Paste the Figma frame URL. Wait for "Good to go!" under the field.
- Optionally, enter a Probe name. Leave it empty to use the Figma frame's name.
- Optionally, choose where to save the probe under Save to: My probes, one of your projects, or your team.
- Leave Capture at frame width on, as it is by default. The page is then captured at the width of the Figma frame, so it lays out at the width of the design, and every version of the probe is captured at that same width. See Chrome Extension for how this works.
- Click Create, and stay on the tab until the page has been captured.
The extension captures the webpage from your current browser session and sends it to Uiprobe for comparison. If you switch to another tab during the capture, it stops without using a run, and you can start again.
What happens next
After you click Create:
- Uiprobe creates the probe and runs the first comparison
- the extension opens the probe's page and shows the progress of the run
- when the run completes, the probe page shows the number of findings per section
Click Open in Uiprobe to review the results in the Probe Inspector. From this point on, reviewing results works the same as for any other probe.
Re-running the probe
Probes created via the Chrome Extension can only be re-run from the extension. The web app does not show a re-run action for these probes.
To create a new version, return to the page in Chrome, open the extension, select the probe under Probes on this page and click Run probe.
Important to know
- The probe captures the current page state (logged-in user, feature flags, visible content).
- A probe created with Capture at frame width on is captured at the frame width again each time you click Run probe. With the setting off, the page is captured at the width of your browser window.
- One page can have several probes, for example one per breakpoint or per state of the page.
- The Chrome Extension does not change how probes, findings, or versions behave. It only enables access to webpages Uiprobe cannot reach directly.
Next steps
Continue with:
