Eyes Figma Plugin

Export Figma frames directly to Applitools Eyes to run automated visual tests. Compare designs across versions (design-to-design) or validate code against the original spec (design-to-code). Results are collected in a shared dashboard where designers and developers can review changes together, catch drift early, and ensure the implemented UI matches the design.

This plugin helps bridge the gap between design and development with seamless visual collaboration and review.

Installation (Figma Desktop App)

1. Download the Applitools Figma Plugin from the Figma plugin store:

   1. Open the desktop version of Figma or the Figma web app.
   2. Go to Plugins → Manage plugins...
   
   3. Search "Applitools Eyes"
   4. Install the plugin

2. The plugin will be installed under Plugins → Applitools Eyes

3. To use the plugin and export Figma assets to Eyes you should have:

   1. An active Applitools account
   2. A valid Applitools API key

Installation (Figma Web App)

1. Navigate to the Applitools Eyes plugin page.
2. Click "Open in Figma".

How to Use

1. In Figma, select the frames you want to export to Applitools Eyes.

   • You can select one or more frames, or select the entire page.

2. Launch the plugin.

3. Paste your Applitools API key (see instructions here) in the "API Key" field and your server URL in the "Eyes Server URL" field.

   • Default server URL: https://eyes.applitools.com

   

Configuration

After connecting, the plugin automatically generates default names for the App and Batch based on your Figma file and page:

• Application name: [Figma file name] - [Figma page name]
• Batch name: [Figma file name] - [Figma page name]
• Test name: the name of the selected frame or component

You can accept these defaults or override them:

• Update the App name and Batch name directly in the plugin
• Or use dynamic parameters pulled from your Figma file

Supported Parameters

• {figma_project} → replaced with the project name

• {figma_filename} → replaced with the file name

• {figma_selection} → replaced with the current selection in Figma

• {figma_frame} → replaced with the frame name

• {figma_page} → replaced with the page name

• {figma_user} → replaced with the name of the Figma user running the test

  

Exporting Frames to Eyes

1. Review your App & batch info, Connection details, and Test configuration in the plugin.

2. Click Export to Eyes.

   • This sends your selected frames to Applitools Eyes for visual baseline comparison and testing.

3. A success message will appear.

4. Click View results in Eyes to open your frames in the Eyes dashboard.

   

Viewing Results

• Once export is complete, your selected frames are sent to your Applitools Eyes account.
• Open the Eyes dashboard to review them (click View results in Eyes in the plugin).
  
• On the first export, frames are auto-accepted as baselines.
• Subsequent exports of the same frames will be compared against these baselines, and differences will be flagged in the dashboard.

Comparing Designs to Implementation

When a frame is exported, it is assigned a baseline environment name.
You can see this name and its details in the Eyes test results and the Test Editor:

• The baseline environment name also appears in the step tag next to the frame name.

To compare design and implementation:

1. In the Applitools Eyes Figma plugin UI, open the Eyes configuration details section.
2. Copy the Baseline name.
3. Paste this value into your test code to reference the baseline when running automated checks. Configuring baseline environment name in your test code
4. Run your Eyes test to compare your checkpoints to the exported frame.

Optional Test Configurations

• Match Level defaults to Strict. You can change this when exporting frames (e.g., Layout, Content), or set it to None for no comparison.

• Contrast Level: Sets the WCAG accessibility standard used for contrast validation (default: AA 2.0).
  See documentation on Accessibility Testing

• Exported frames are automatically accepted as baselines. To disable this, uncheck the Auto accept baselines option in Test Configuration.

• Export as multi step tests groups all selected frames into a single test, with step order based on Figma frame IDs. By default, this is toggled off, so each frame exports as an individual test.

• The OS and browser that will be displayed in Eyes dashboard can be updated. By default, it will be set as “Figma”.

• The viewport size will be the viewport size of the frame in Figma.

  

Supported Use Cases:

Design-to-Design Comparison

Export the same design multiple times to compare iterations. Once you’ve chosen the desired design, accept it as the baseline.

Design-to-Code Comparison

After exporting frames, run a test with the same baseline environment name.
The checkpoint will be compared against the exported Figma frame to detect unintended visual changes early in development.

UI Component Validation

During design reviews or prototyping, the plugin uploads all top-level items from the selected Figma page or frames by default.
To validate individual components, select a component inside a frame. The component will then be exported as a separate step in your test.

Troubleshooting

Possible Errors

• Invalid API Key
  Make sure you copied the correct API key from the Eyes account you want to export to.

• Server Issues
  If running tests on a private Eyes cloud, verify that your server URL is correct. Try opening the URL in a browser to confirm connectivity.

• Checkpoint Limit Exceeded
  You may have reached the maximum number of checkpoints allowed under your current plan.

Downloading Plugin Logs

If Support requests logs, you can download them directly from the plugin:

1. Hold Ctrl and click the version label at the bottom of the plugin interface.
2. A dialog will appear prompting you to save the log file.
3. Send the saved file to Applitools Support.