> For the complete documentation index, see [llms.txt](https://docs.qyrus.com/aiverse/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.qyrus.com/aiverse/uxtract.md).
# UXtract
***
## 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](https://www.figma.com/signup) 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](https://github.com/QQyrus/ai-doc/blob/staging/UXtract/README.md#step-1-generate-figma-personal-access-token) 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](https://github.com/QQyrus/ai-doc/blob/staging/UXtract/README.md#step-1-generate-figma-personal-access-token))
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
> **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](https://www.figma.com/login)
* 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.
***
### 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
**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
***
## 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](https://youtu.be/-sAAa-CCOcg)
#### 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
**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 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
**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](https://github.com/QQyrus/ai-doc/blob/develop_p/ApiBuilder/user_documentation.md)
**Test Data Tab**
**Content**: Test data scenarios with:
* Scenario names
* Variables
* Expected results
**Use Case**: Use these scenarios for data-driven testing
***
### 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.
#### 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
**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
**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.
***
## Demo Videos
### Getting Your Figma Team URL
Learn how to locate and copy your Figma Team URL:
[](https://ai-services-stg.s3.us-west-1.amazonaws.com/ai-demo-docs/Figma_teamurl.mp4)
### Design Prototype Testing
See UXtract in action with Figma design prototypes:
[](https://ai-services-stg.s3.us-west-1.amazonaws.com/ai-demo-docs/Uxtract_design_prototype.mp4)
### App Screen Testing
Explore how to generate tests and verify accessibility for app screens:
[](https://ai-services-stg.s3.us-west-1.amazonaws.com/ai-demo-docs/Uxtract_app_screen.mp4)
***
## 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](https://github.com/QQyrus/ai-doc/blob/staging/UXtract/README.md#step-1-generate-figma-personal-access-token)
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](https://help.figma.com/)
* [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
* [API Builder Documentation](https://github.com/QQyrus/ai-doc/blob/develop_p/ApiBuilder/user_documentation.md)
***
**Need Help?** For additional support or questions, please contact the UXtract support team.