Visual Testing with Figma Designs

---

You can now compare test execution screenshots with original design files in Figma by adding a design file link and configuring visual testing at the step level. You can also select the target device for accurate comparison. During test execution, Testsigma compares the screenshot with the design file and highlights any differences. This article discusses configuring visual testing with Figma design files in Testsigma.

This feature is available only for Web and Mobile apps and is limited to enterprise accounts. Contact Testsigma Support to enable it for your account.

---

Prerequisites

Before you begin, ensure that you have referred to:

• Documentation on configuring visual testing.

---

Visual Testing Using Figma

1. From the left navigation bar, go to Create Tests > Test Cases.

2. Create a test case or open an existing test case.

3. Click the Kebab menu next to the test step, and then select Enable Visual Testing from the dropdown menu.

4. Click Update Step.

5. Hover over the test step, and then click the Camera icon. This will open the Visual Difference – Figma section.

6. In the Base Line Image section, click Add Figma Designs.

7. In the Add Devices section, select the Browser and Resolution from the dropdown menus.

NOTE

1. For Android and iOS, you need to select a mobile device with the necessary resolution.

2. The same Browser and Resolution configured in visual testing must be selected during the Ad-hoc Run for accurate results.

8. In the Frame Link text box, enter the Figma frame link, and then click Refresh to verify.

NOTE

Ensure that the Figma frame dimensions match your target device resolution.

9. Click Save.

10. Execute the test case. In the test step result, click the Camera icon, and then select the Visual Difference – Figma tab to view the visual testing results.

NOTE

For detailed insights, click AI Insights. You can copy these insights for quick sharing.

---