Integrating Figma with Testsigma

With Figma integrated into Testsigma, you can generate test cases directly from design artifacts. By selecting relevant frames, sections, or pages and providing a prompt, Testsigma’s Generative AI transforms Figma designs into executable test scenarios. This ensures early alignment between design and testing, and improves test coverage across visual flows.

Getting Team ID in Figma

1. Open Figma in a web browser.
2. In the left navigation bar, select the team from the dropdown menu.

3. In the address bar, locate the URL in the following format:

   https://www.figma.com/files/team/{TEAM_ID}/your-team-name

   The {TEAM_ID} in the URL is your Figma Team ID.

   

Generating a Personal Access Token in Figma

1. Open Figma in a web browser.
2. In the top-right corner, click your profile icon, and select Settings.
3. Navigate to Security > Personal access tokens section.
4. Click Generate new token.
5. In the Generate new token dialog, enter a Token name.
6. From the Expiration dropdown, select an expiration period.
7. Click Generate token.
8. Click Copy this token to copy the key.

Integrating Figma with Testsigma

1. From the left navigation bar, go to Settings > Integrations.
2. Enable the toggle on Figma widget.
3. On the Figma Details prompt, enter the Team ID and API Key and click Save & Enable.

Components of Figma

Before generating test cases from Figma design, it’s essential to understand how Figma and its features work. Figma is a powerful, cloud-based design tool that is widely used for UI/UX design, prototypes, and collaboration.

A Figma file hierarchy is in this way Project > Design File > Pages > Sections > Frames.

Projects

Projects act as containers for organizing related design files and can hold multiple design files.

To view all projects, navigate to the left panel and select All Projects.

Files

Files contain the actual design work. Each file contains multiple pages where designers create and store UI elements, prototypes, etc.

To access the files within a project, double-click on the project.

Pages

A page inside Figma can have Sections as well as Frames.

Sections

Sections are used within a page to organize related frames visually.

A section inside a page, can have a set of Frames.

Frames

Frames are the primary design components in Figma. Each UI/UX design screen is typically represented by a frame.

A frame inside a page or a section represents a screen of web or mobile app.

Try this interactive demo to learn how Figma components work!