> For the complete documentation index, see [llms.txt](https://docs.walnutai.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.walnutai.ai/core-features/intelligence-hub/generate-user-stories/figma-ui-designs-to-requirement.md).

# Figma (UI Designs to Requirement)

The Figma integration in WalnutAI allows you to transform UI designs into structured software requirements. By selecting the relevant frames from your connected Figma project, WalnutAI analyzes the screens and automatically generates requirements based on the design elements and user flows. 

Follow the steps below to select Figma frames and generate requirements.

* If you have already connected **Figma** during the project setup, select **Figma**.

<figure><img src="https://295337183-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9aroNmDWVJAmMjkdy0hx%2Fuploads%2FRLWRFBuwI7fa4IkQgHIE%2FScreenshot%202026-08-06%20at%201.36.38%E2%80%AFPM.png?alt=media&amp;token=5f78afc2-2a67-4826-ab8b-8af9da82eae3" alt=""><figcaption></figcaption></figure>

* Enter the **Team ID**, then select the **Project**, **File**, and **Page** containing the designs you want to use.

<figure><img src="https://295337183-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9aroNmDWVJAmMjkdy0hx%2Fuploads%2FyvZer8U1AWmcwb7Jj0nc%2FScreenshot%202026-08-06%20at%201.46.15%E2%80%AFPM.png?alt=media&amp;token=9b41951f-865e-40b8-ac1a-b19e0d468057" alt=""><figcaption></figcaption></figure>

* Click **Select Frames**, then choose **Browse Frames** to display all the frames associated with the selected page.
* To preview a frame before selecting it, click the **View** icon on the left-hand side.

<figure><img src="https://295337183-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9aroNmDWVJAmMjkdy0hx%2Fuploads%2Fq9B5MGa0XIGEO84lQmgu%2FScreenshot%202026-08-06%20at%203.11.00%E2%80%AFPM.png?alt=media&amp;token=b9c21cf2-4028-45ae-b23f-bc23df7d495f" alt=""><figcaption></figcaption></figure>

* Select one or more frames that you want to use for requirement generation.
* Click **Confirm Selection** to import the selected frames.

<figure><img src="https://295337183-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9aroNmDWVJAmMjkdy0hx%2Fuploads%2FGpij2jmNZydJ8pPRzEZS%2FScreenshot%202026-08-06%20at%203.12.42%E2%80%AFPM.png?alt=media&amp;token=5f80758b-ea2e-458f-a5b8-16f116e792a0" alt=""><figcaption></figcaption></figure>

* WalnutAI analyzes the selected Figma screens and automatically generates detailed software requirements based on the UI design.

<figure><img src="https://295337183-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9aroNmDWVJAmMjkdy0hx%2Fuploads%2FRnbZmMYP3Jn9CV2xqChB%2FScreenshot%202026-08-06%20at%203.15.12%E2%80%AFPM.png?alt=media&amp;token=1937ab4e-d9ab-4dca-bbdd-c0f11749d152" alt=""><figcaption></figcaption></figure>

* The generated requirements provide a structured foundation for creating user stories, test scenarios, and test cases, reducing manual documentation effort and accelerating the testing process.

{% hint style="info" %}
Select a generated User Story and click Use in Chat to generate the related test cases.
{% endhint %}

* Click **Save** to store the generated Epics, Features, User Stories, and Test Cases.

{% hint style="info" %}
Result: Upon saving, items are stored in Action Items, and Test Cases populate the Test Cases page.
{% endhint %}