Figma Integration

The Figma integration allows you to attach design specifications directly to your screenshot tests, providing visual context and design references alongside your test results.

Overview

When you link a Figma design to a screenshot test, Screenshotbot downloads and stores an image of the specified Figma component while preserving a direct link to the original design. The design reference then appears alongside your screenshot in all reports and test runs, providing visual context for your team.

Setting Up Figma Integration

Getting a Figma URL

To get the URL for a specific component or frame in Figma:

1. Open your Figma file in the browser
2. Click on the component, frame, or element you want to link
3. Notice that the URL in your browser's address bar updates to include the selected element
4. Copy this URL - it will include a node-id parameter that identifies the specific component

The URL will look something like: https://www.figma.com/file/abc123/My-Design-File?node-id=123-456&t=xyz789-0

Linking a Figma Design

1. Navigate to any Screenshotbot report or test run
2. Locate the screenshot test you want to link a design to
3. Click the Figma dropdown menu
4. Select Link Figma
5. Paste the Figma URL in the provided field
6. Click Continue
7. Complete the Figma authentication process through OAuth
8. Screenshotbot will automatically download the component image and save the reference

Viewing Linked Designs

Once a Figma design is linked to a screenshot test, the design image will appear alongside the screenshot when changes are detected in your tests. The original Figma link is preserved and accessible, and these design references persist across all future test runs. This means team members can view the design context without needing separate Figma access.

Managing Linked Designs

Updating a Linked Design

To update the Figma design linked to a screenshot test:

1. Open the test report containing the linked design
2. Click the Figma dropdown
3. Select Update Link or Link Figma to replace the current link
4. Provide the new Figma URL
5. The system will download the updated design image

Removing a Linked Design

To remove a Figma design from a screenshot test:

1. Open the test report
2. Click the Figma dropdown
3. Select Remove Link
4. Confirm the removal

Authentication and Permissions

OAuth Authentication

Screenshotbot uses OAuth 2.0 to authenticate with Figma for each design link request, ensuring secure access to your files without requiring you to share Figma credentials. You'll need to authenticate each time you link a new design.

Required Figma Permissions

The integration requires only one Figma permission:

• Read the contents of files you can access: This allows Screenshotbot to download component images from your Figma files

Team Access

When a design is linked, all team members with access to the Screenshotbot project can view the linked design image and reference. However, the original Figma file permissions still apply for direct access to the Figma file itself. Design images are cached within Screenshotbot to ensure consistent access even if the original Figma file permissions change.