Use Applitools Eyes’ Figma Dev Comparison to compare a running website with a linked Figma frame. Configure the integration in a supported Eyes SDK, provide a Figma personal access token with file_content:read permission, and map the frame URL to the relevant Eyes test. The integration sizes the test viewport to the design and lets you review whether implementation changes match the design.
What Figma Dev Comparison does
Applitools Eyes visual testing captures screenshots at application states called checkpoints and compares them with baselines. On a first run, checkpoints can become baselines; on later runs, reviewers accept intended changes or reject differences caused by bugs. See Applitools’ overview of Visual UI Testing.
Figma Dev Comparison brings a Figma design into that baseline workflow. You link a frame, component, or component set to an Eyes test. Eyes uses the design as a visual reference, sizes the test viewport to match it, and shows differences for review. It is intended to compare a running implementation with a design, not to inspect or edit Figma files as a general design-QA tool.
Check SDK and framework support
Use an Eyes SDK with a supported web framework. Applitools’ current documentation lists:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches#1 Best Overall
- JavaScript/TypeScript: Playwright (Fixtures and Standard), Cypress, Storybook, Selenium, and WebdriverIO.
- Java: Selenium and Playwright.
- Python: Selenium and Playwright.
- .NET: Selenium and Playwright.
The documentation describes native mobile support as planned for a future release; do not assume it is available for this workflow.
Set up the Figma-to-Eyes comparison
- Create a Figma personal access token. Grant it the
file_content:readscope. The SDK can read the token fromFIGMA_ACCESS_TOKENor from theaccessTokenoption infigmaOptions. If neither is set, and offline/cache-only mode is not enabled, the Figma API request fails. - Copy the link to the Figma selection. Use the URL for the frame or design selection you want to compare, not just a general Figma file link.
- Associate the link with the Eyes test. Configure the project’s
figmaBaselinesmapping so the Figma URL is tied to the corresponding test name. The mapping key must match the test or story name resolved by your SDK. For a single URL, use the SDK’s direct setup function instead. - Choose how baselines should behave. Select a comparison mode appropriate to local work or CI; the options are described below.
- Run the Eyes test and review its result. Inspect visual differences in Eyes. Accept intended implementation changes; reject bugs to keep the prior accepted baseline active.
For SDK-specific setup and configuration details, use the Figma Dev Comparison documentation. The precise code depends on the SDK and framework in your project; do not copy an example for a different SDK without checking its test-name and setup conventions.
Choose a comparison mode
| Mode | How it treats the reference | Useful when |
|---|---|---|
auto-baseline (default) |
Compares against the linked design when it has changed since the last accepted implementation baseline. After an implementation is accepted, later runs use that accepted baseline until the design changes. | You want design changes to trigger a fresh design comparison, then ordinary regression testing against an accepted implementation. |
figma-baseline |
Always uses the current linked design. | The design should remain the reference for every run. |
test-baseline |
Uses the accepted Eyes test baseline. | You want to compare against the accepted implementation rather than follow the current Figma design. |
disabled |
Turns off the Figma integration. | You need to temporarily stop design comparison for a run or environment. |
The integration can be configured with APPLITOOLS_FIGMA_MODE. Check the SDK documentation for the exact configuration syntax available to your language and framework.
Read the result and baseline behavior
When a linked design changes, auto-baseline renews the comparison against that design. Once you accept an implementation, subsequent runs use the accepted implementation baseline until the design changes again. This separates a design update from ordinary regressions in the implementation.
Eyes results include design context such as the design name, type, revision, last-modified time, and comparison mode. Linked runs also create a short-lived Eyes test to render the design reference; it is removed afterward, so you may briefly see a transient test entry in the dashboard.
Troubleshoot common setup problems
- Figma design cannot be resolved: Check that the personal access token is valid, has
file_content:read, and is available throughFIGMA_ACCESS_TOKENorfigmaOptions.accessToken. If using offline/cache-only mode, verify its configuration. - URL validation fails: Confirm that the configured value is a Figma URL for the intended frame or selection. A non-Figma URL is a validation error.
- No design is associated with the expected test: Compare the
figmaBaselineskey with the test or story name the SDK actually resolves. A name mismatch can prevent the mapping from targeting the intended run. - The integration is not comparing to the design: Check the effective mode, including
APPLITOOLS_FIGMA_MODE.disabledturns the integration off;test-baselineuses the accepted test baseline rather than the current design. - The screenshot viewport differs from your usual run: The integration sizes the test viewport to match the linked design. Review the design dimensions and comparison context before treating the viewport change as an application bug.
- You expected Figma file editing or design-only validation: Dev Comparison checks a running implementation against a design. It does not validate or edit the Figma file itself.
Moving from the older Eyes Figma plugin
The older Eyes Figma plugin exports selected frames to Eyes for design-to-design or design-to-code comparisons. Its documented setup requires an active Applitools account and a valid API key. By default, it accepts first exports as baselines; later exports compare with those baselines.
The plugin documentation says it will be deprecated in favor of Figma Dev Comparison. Applitools’ September 15, 2026 product update describes using a Figma frame URL as a design baseline without plugin installation or manual export. For a new implementation-checking workflow, start with Dev Comparison; consider the plugin information when maintaining an existing export process or interpreting older instructions.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your immediate task is to capture a page rather than connect a design to Eyes’ baseline workflow, ScreenshotNeo provides a website screenshot API and MCP server. One GET request can return a PNG, JPEG, WebP, or PDF. For example, with cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. It accepts cookie or consent banners before capture and removes 60+ known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, with the outcome reported in X-Page-Verdict and X-Billed headers. Its MCP server includes take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Does Figma Dev Comparison replace visual regression testing?
No. In auto-baseline mode, an accepted implementation remains the comparison baseline until the linked design changes; Eyes can then compare against the updated design.
Can I use the legacy Eyes Figma plugin for design-to-design comparisons?
The plugin documentation describes design-to-design comparisons, but also says the plugin will be deprecated in favor of Figma Dev Comparison.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
