UXtract

Banner

---

Overview

UXtract is an AI-powered service that transforms Figma designs into comprehensive test scenarios, API specifications, and accessibility assessments. By bridging the gap between design and testing, UXtract enables teams to start test development immediately after design completion, significantly accelerating the software development lifecycle.

What UXtract Does

UXtract provides the following core capabilities:

• Generates Test Scenarios: Automatically creates detailed test steps, API specifications, and test data from Figma prototypes

• Accessibility Analysis: Performs visual accessibility assessments aligned with WCAG 2.1 standards

• Frame-Based Testing: Creates test scenarios for individual Figma frames or entire screens

• API Discovery: Identifies and documents potential APIs from design prototypes

---

Key Features

Feature	Description
Design Prototype Testing	Generate comprehensive test scenarios from interactive Figma prototypes
App Screen Analysis	Create test cases for individual frames or complete screens
Visual Accessibility Verification	WCAG 2.1 compliant accessibility analysis with actionable recommendations
API Generation	Automatically identify and document APIs from design flows
Test Data Scenarios	Generate test data with variables and expected results
Export Capabilities	Export test steps for Mobile and Web testing platforms

---

Benefits

For Testing Teams

• Early Test Development: Start creating tests as soon as designs are ready

• Comprehensive Test Scenarios: Receive detailed test steps, APIs, and test data

• Reduced Manual Effort: Automate test scenario generation from designs

For UI/UX Teams

• Early Accessibility Feedback: Get WCAG 2.1 compliance insights before development

• Design Validation: Identify accessibility issues during the design phase

• Iterative Improvement: Make design adjustments based on accessibility recommendations

For Backend Teams

• API Insights: Understand required APIs from design flows

• Integration Planning: Plan backend integration with clear API specifications

• Seamless Workflow: Align backend development with design requirements

---

Prerequisites

Before using UXtract, ensure you have the following:

Required Items

1. Figma Account

   • An active Figma account

   • Create one here if you don't have an account

2. Figma Team URL

   • The URL of your Figma team or project folder where designs are stored

   • This is required for UXtract to access your designs

3. Figma Personal Access Token (PAT)

   • A PAT with specific scopes (see Step 1 for generation instructions)

   • Required scopes: file_content:read and projects:read

4. Figma Project

   • A project folder in your Figma team

   • This is where your design files are organized

5. Design or Prototype

   • Either a static design or an interactive prototype in your Figma project

   • The design should be accessible within your selected project

Note: The Figma PAT is essential for UXtract to access your designs. Make sure to generate it with the correct scopes.

---

Quick Start

Follow these steps to get started with UXtract:

1. Generate your Figma PAT with required scopes (see Step 1)

2. Copy your Figma Team URL from your Figma workspace

3. Open UXtract and enter your Team URL and PAT

4. Select your project, file, and page

5. Choose your testing approach: Design Prototype or App Screen

6. Generate tests and review the results

---

Getting Started

Step 1: Generate Figma Personal Access Token

To use UXtract, you need to generate a Figma Personal Access Token (PAT) with specific permissions.

Instructions

1. Navigate to Settings

Profile Icon → Settings → Security

• Click on your profile icon in Figma

• Navigate to Settings → Security

2. Generate New Token

• Click on Generate new token

• Name your token (e.g., UXtract Integration Token)

3. Configure Token Settings

• Expiration: Select an expiration period (1 to 90 days)

• Important: Choose an appropriate expiration based on your usage needs

4. Select Required Scopes

The following scopes are mandatory for UXtract to function:

Files:

• file_content:read - Required to read design file contents

Projects:

• projects:read - Required to access project information

5. Generate and Save

• Click to generate the token

• Critical: Copy the token immediately and store it securely

• The token will only be displayed once and cannot be retrieved later

Visual Guide

Generate PAT - Profile Settings

Generate PAT - Security Section

Generate PAT - Token Configuration

Generate PAT - Required Scopes

Security Best Practice: Store your PAT securely and never share it publicly. If your token is compromised, revoke it immediately and generate a new one.

---

Step 2: Prepare Your Figma Design

1. Log in to Figma

• Visit the Figma Login Page

• Sign in with your account

2. Locate Your Team/Project

• Navigate to your team or project folder where your design files are stored

• Click on the team/project to open it

3. Copy the Team URL

• Copy the URL from your browser's address bar

• This URL identifies your Figma team or project folder

Example: In the image below, "pavan's team" is the team folder. Click on it and copy the URL from the address bar.

Team ID URL

---

Step 3: Connect to UXtract

1. Open UXtract Service

• Navigate to the UXtract service interface

2. Enter Credentials

• Paste your Figma Team URL in the "Figma Team URL" field

• Enter your Figma Personal Access Token (PAT) in the "Figma PAT" field

• Click Send to authenticate

Login Page

3. Select Your Design

• Choose the project where your design is stored

• Select the design file you want to work with

• Choose the page within the design file

Design File

Design Page

---

User Guide

UXtract offers two primary workflows for generating tests from your Figma designs:

1. Design Prototype Testing - Generate tests from interactive prototypes

2. App Screen Testing & Accessibility - Generate tests and verify accessibility for individual frames

---

Design Prototype Testing

Generate comprehensive test scenarios from interactive Figma prototypes that include user flows and interactions.

What is a Design Prototype?

A Figma design prototype is an interactive simulation of your design that showcases user flows and interactions. It links frames, adds transitions, and mimics real app behavior, enabling usability testing and stakeholder feedback.

Learn More: How to create a Figma Prototype

Design Prototype Example

Workflow

1. Access Design Prototype Tab

• Click on the "Design Prototype" tab in UXtract

2. View Existing Tests (if any)

• Previously generated tests will be displayed in the list

3. Create New Test

• Click "Create Test"

• Provide a descriptive name for your test

• Note: Test generation is asynchronous and may take several minutes

Reports

Create Test

4. Monitor Test Generation

• Wait for the test generation to complete

• The status will update from "Processing" to "Completed"

5. Access Test Results

• Once status shows "Completed", click the arrow icon to view results

• Select a test scenario from the list

Test Scenarios

Test Scenario Output

When you select a test scenario, you'll see three tabs with comprehensive information:

Steps Tab

Content: Detailed step-by-step instructions for the test scenario

Actions Available:

• Export steps to use in Mobile Testing or Web Testing platforms

• Execute tests in your preferred testing environment

Steps

APIs Tab

Content: Identified APIs with names and descriptions extracted from the prototype

Actions Available:

• Select one or more APIs

• Modify API descriptions as needed

• Build APIs using the "BUILD APIs" button

Integration: Routes to API Builder service for Swagger JSON generation and immediate testing

Learn More: API Builder Documentation

APIs

Test Data Tab

Content: Test data scenarios with:

• Scenario names

• Variables

• Expected results

Use Case: Use these scenarios for data-driven testing

Test Data

---

App Screen Testing & Accessibility

Generate test scenarios for individual Figma frames or perform visual accessibility analysis on your designs.

Understanding Frames

A Figma frame is a container that holds and organizes design elements (shapes, text, images). It serves as the foundation for creating layouts, screens, or components in your design project.

Figma Frame Example

Workflow

1. Access App Screen Tab

• Click on the "App Screen" tab

2. Select Frames

• Choose one or more frames for:

  • Test scenario generation

  • Visual accessibility verification

App Screen Selection

3. Choose Action

• Click on a selected frame to reveal two action tabs

Available Actions

Generate Tests

Creates test scenarios based on the selected frame(s).

Input: Selected Figma frame(s)

Output: Comprehensive test scenarios tailored to the frame content

Use Case: Generate tests for specific screens or components

Generate Tests

Verify Accessibility

Performs visual accessibility analysis according to WCAG 2.1 standards.

What It Does:

• Identifies text readability issues

• Detects contrast problems

• Flags potential accessibility concerns

• Provides descriptive recommendations

Standards Compliance: WCAG 2.1 (Web Content Accessibility Guidelines)

Note: This analysis provides descriptive feedback on potential issues but does not quantify compliance levels.

Visual Accessibility Analysis

---

Demo Videos

Getting Your Figma Team URL

Learn how to locate and copy your Figma Team URL:

Design Prototype Testing

See UXtract in action with Figma design prototypes:

App Screen Testing

Explore how to generate tests and verify accessibility for app screens:

---

Frequently Asked Questions

Q1: What kind of designs can UXtract use?

UXtract supports both static designs and interactive prototypes from Figma. You can work with:

• Static design files

• Interactive prototypes with user flows

• Individual frames or complete screens

Q2: Does UXtract support both web app and mobile app designs?

Yes! UXtract supports both web app and mobile app designs. The service can generate appropriate test scenarios for either platform type.

Q3: How long does it take to generate test scenarios?

Test generation time varies based on design complexity:

• Simple designs: A few minutes

• Complex prototypes: May take longer

• The service operates asynchronously, so you can continue working while tests are generated

Q4: What is WCAG 2.1?

WCAG 2.1 (Web Content Accessibility Guidelines) are international standards created by the World Wide Web Consortium (W3C) that define how to make web content accessible to people with disabilities.

UXtract applies these guidelines to ensure your designs meet accessibility requirements, enhancing usability for all users. The accessibility analysis helps identify potential issues before development begins.

Q5: Can I modify the generated API descriptions?

Yes! After UXtract generates APIs from your design prototype, you can:

• Select specific APIs

• Modify their descriptions

• Build them using the API Builder service

Q6: What happens if my Figma PAT expires?

If your Personal Access Token expires, you'll need to:

1. Generate a new PAT following the steps in Step 1

2. Update the token in UXtract

3. Re-authenticate to continue using the service

---

Limitations

Current Limitation: Complex component-based flows are not yet supported in the current version of UXtract. We're continuously improving the service to support more design patterns.

---

Additional Resources

• Figma Documentation

• WCAG 2.1 Guidelines

• API Builder Documentation

---

Need Help? For additional support or questions, please contact the UXtract support team.