Figma

What Is Figma?

Figma, a collaborative interface design tool, is often used to create wireframes and design work. In an effort to ensure that an app's design maintains consistency from wireframe to final version, you'll be able to compare a Figma design file by overlaying it over a Kobiton captured app screenshot. 

Prerequisites

1. Kobiton account
2. Figma account with at least one existing file

Getting started

Create the Figma connection

1. Log in to your Kobiton account and click the dropdown arrow beside your account icon in the upper right corner. From the dropdown menu, click "Settings".
2. On the Settings page, click the "Integration" header at the top of the page.
3. Click "Connect account" in the Figma Integration box; a pop-up box will appear requesting account information. Fill in the required information and click "Connect".
    
   
   Note: If you need assistance obtaining the information to connect a Figma account, please review the following:
   • • For more information on retrieving your API key/token for Figma, check out this site.
     • To get the URL from your Figma file: 

• If you use Figma for desktop: from the upper right corner, select the "Share" button and select "Copy link" from the pop-up box.
• •  

Please note: Kobiton currently only supports a single connection to a single Figma file. If your Figma account has more than one file and you want to use another file, you will need to remove your current connection and create a new connection with the different file. We are hard at work improving this feature to further support you with the creation of multiple connections; check out our release notes to see when that enhancement is announced! 

How to Perform the Visual Comparison

1. In the Kobiton portal, click the "Sessions" tab of the sidebar on the left side of the screen to navigate to your session list.
2. On the session list page, select a manual session and go to "Session Details", then select "Compare to UI design".
3. It will take a few minutes for the images to finish loading; once this is done, select your preferred image for comparison. The selected image will be highlighted in purple.
   During your comparison, you can adjust opacity, adjust scale value, or move the image to achieve the ideal comparison between your Figma design and the screenshot of your Kobiton test on a real device.

Please note: In some cases, you may encounter issues using the Figma visual validation. If your selected Figma file is too large, break your file into separate pages to decrease the size. If you see a query timeout (this usually happens by adjusting the filter, which sends too many unexpected requests to the server) you should follow our recommended filter settings (e.g. select a single page, set depth = 2, etc.)