# Figma

> Give agents structured access to your design files so tickets and code reference real frames, components, and tokens.

_CommerceCopilot documentation · Integrations_

Designs carry half the requirements in most storefront projects. The Figma integration gives CommerceCopilot structured access to your design files: not screenshots, but the actual frames, layers, components, and design tokens. The Business Analyst uses them to write tickets that reference real screens, and the Developer agent uses them to build what was actually designed.

## What CommerceCopilot uses Figma for

- **Design-aware analysis.** During discovery and brief analysis, the Business Analyst reads the linked file's frames and factors them into requirements and tickets.
- **Design-aware development.** The Developer agent can find relevant frames for a ticket, inspect nodes, list design tokens, and export frame images while it works.
- **Architecture context.** The Tech Lead agent uses the design structure when reviewing how storefront work should be broken down.

## Connect Figma

1. Go to **Settings** in the sidebar.
2. Find the **Figma** card and click **Connect**.

![The Figma integration card on the Settings page](/docs/integration-figma.png)

3. Figma's authorization screen opens. Approve read access to file content, file metadata, and library content. CommerceCopilot never writes to your Figma files.

> **The Figma card shows "Coming soon"?** Figma availability is rolling out per organization. Contact support to have it enabled for your workspace.

## Link a file to a project

Each project links to one Figma file:

1. Open the project and go to **Settings**, then **Integrations**.
2. Paste the Figma file URL into the Figma field and save.

Indexing starts immediately: CommerceCopilot walks the file, catalogs every page and frame, and classifies what each frame shows (a product page, a cart drawer, a navigation state). Initial indexing takes seconds; classification finishes within a minute for typical files.

From then on, the index refreshes automatically whenever the file changes, so agents always see the latest design.

## What this changes in practice

With Figma linked, tickets stop saying "as per designs" and start saying which frame. The Developer agent building a product page ticket pulls the relevant frames, reads spacing and tokens from the file, and exports reference images into its working context. Without the link, agents fall back to whatever design exports were uploaded with the brief.

## Troubleshooting

- **The integration shows a permission error.** Your Figma account lost access to the granted scopes, or the token was revoked. Reconnect from the Figma card; the UI flags this state explicitly and asks for re-authorization.
- **A frame the designer just added is missing.** The index refreshes on file changes, but a just-saved change can take a moment. It catches up automatically; there is nothing to re-run.
- **The file is in a team the connected account cannot see.** The integration sees what the authorizing Figma account can see. Connect with an account that has access to your client design teams.

## Next steps

- [From brief to tickets](/docs/your-first-brief-to-ticket-project)
- [Shopify](/docs/shopify) to pair designs with the live storefront

---
Canonical page: https://www.commercecopilot.ai/docs/figma