Getting started with Lambdatest's Smart UI Figma CLI

---

Welcome to the LambdaTest SmartUI Figma CLI documentation!

With SmartUI Figma CLI, you can seamlessly perform visual regression testing of your Figma designs on SmartUI using your command line, identifying Visual UI Regression bugs effortlessly. This guide will walk you through the process of running successful Figma Visual tests using SmartUI CLI.

Prerequisites for running SmartUI Figma CLI

• Basic understanding of Command Line Interface is required.
• Basic understanding of Figma file structuring is required.
• Login to LambdaTest SmartUI with your credentials.

The following steps will guide you in running your visual tests for Figma files on LambdaTest platform using SmartUI CLI.

Create a SmartUI CLI Project

The first step is to create a project with the application in which we will combine all your builds run on the project. To create a SmartUI Project, follow these steps:

1. Go to Projects page
2. Click on the new project button
3. Select the platform as CLI for executing your CLI tests.
4. Add name of the project, approvers for the changes found, tags for any filter or easy navigation.
5. Click on the Submit.

Steps to run your first test

Step 1: Install the Dependencies

Install required NPM modules for LambdaTest Smart UI CLI in your repository/folder.

npm install @lambdatest/smartui-cli

Step 2: Create the design info file

smartui config:create-figma designs.json

Once, the designs file will be created, you will be seeing the sample pre-filled configuration in the designs.json file:

/smartui-cli-figma-project/designs.json

{
    "depth":2, //Figma Tree depth - (Optional), change the value according to the your file structure
    "figma_config": [
      {
        "figma_file_token": "<Required Figma File token>",
        "figma_ids":[
          "Id-1", "Id-2"
        ]
      },
       {
        "figma_file_token": "<Required Figma File token>",
        "figma_ids":[
          "Id-3", "Id-4"
        ]
      }
    ]
  }

Step 3: Configure your Project Token and Figma Token

1. Setup your project token show in the SmartUI app after, creating your project.

MacOS/Linux

export PROJECT_TOKEN="123456#1234abcd-****-****-****-************"

Windows - CMD

set PROJECT_TOKEN="123456#1234abcd-****-****-****-************"

2. Setup your personal access token for Figma to authenticate Figma with SmartUI.

MacOS/Linux

export FIGMA_TOKEN="123456#1234abcd-****-****-****-************"

Windows - CMD

set FIGMA_TOKEN="123456#1234abcd-****-****-****-************"

Step 4: Configure your LambdaTest Credentials

MacOS/Linux

export LT_USERNAME="YOUR_USERNAME"
export LT_ACCESS_KEY="YOUR ACCESS KEY"

Windows

set LT_USERNAME="YOUR_USERNAME"
set LT_ACCESS_KEY="YOUR ACCESS KEY"

SmartUI CLI Design Config Options

Please read the following table for more information about the configuration file:

Config Key	Description	Usage
figma_file_token	File token for your required Figma file. You can use multiple figma files in the same configuration.	Mandatory
figma_ids	Comma separated list of nodes that you care about in the document. If specified, only a subset of the document will be returned corresponding to the nodes listed, their children, and everything between the root node and the listed nodes.	Optional
depth (int)	Positive integer (>1) representing how deep into the document tree to traverse. For example, setting it to 2 returns Pages and all top level objects on each page. Not setting this parameter returns all nodes	Optional

Step 5: Uploading the Figma files on SmartUI Cloud using CLI

You can now execute tests for Visual Testing for Figma objects using the following options:.

npx smartui upload-figma designs.json

Advanced options for baseline management

1. markBaseline - You can mark a specific build as a baseline through the runner command

npx smartui upload-figma designs.json --markBaseline

2. buildName - You can add your custom build name to a build by running the following command

npx smartui upload-figma designs.json --buildName "<Build_Name>"

You can use these options in a nested way as well, as shown below

npx smartui upload-figma designs.json --buildName "<Build_Name>" --markBaseline

note

If buildName is not specified, a random build name is generated for every run.

You can add more screenshots in a build by specifying the particular build name in the runner command

Setup with Continuous Integration (CI)

If you are using the Continuous Integration (CI) pipeline for your application and want to integrate SmartUI Figma CLI execution then the following are the steps needs to be added to your .yaml file:

steps:
  - name: Running SmartUI Figma CLI Tests
    - run: |
       npm install @lambdatest/smartui-cli
       npx playwright install-deps
       npx smartui upload-figma designs.json

View SmartUI Results

You can see the Smart UI dashboard to view the results. This will help you identify the Mismatches from the existing Baseline build and do the required visual testing.

For additional information about SmartUI APIs please explore the documentation here