> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blitzy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma

> Connect Figma to enable design-to-code workflows in Blitzy

Figma integration enables design-to-code workflows, allowing Blitzy to reference your design files during code generation.

<Note>
  **Jump to:** [Setup](#setup) | [PAT Requirements](#pat-requirements) | [Rate Limits](#rate-limits) | [Attaching Frames](#attaching-figma-frames) | [Task Structure](#optimal-task-structure) | [Templates](#prompt-templates)
</Note>

## Setup

Generate a Figma Personal Access Token (PAT) with the following permissions:

**Files**

* `file_content:read` - Read the contents of and render images from files
* `library_assets:read` - Read data about individual components and styles
* `library_content:read` - Read components and styles published from individual files
* `file_dev_resources:read` - Read and list dev resources in accessible files

**Current User**

* `current_user:read` - Used to validate the token

<Note>Other file permissions (such as `file_comments:read`, `file_comments:write`, `file_metadata:read`, `file_versions:read`) are not required for Blitzy integration.</Note>

After configuring your token:

* Verify token permissions before connecting to Blitzy
* Share the integration with your team after initial setup so others can leverage the same connection

## PAT Requirements

Only **one** Personal Access Token is needed per Figma account. That single PAT is shared by your entire team and by Blitzy for code generation.

**Seat requirement** - The PAT must be generated from an account with a **Dev** or **Full** seat. View and Collaborator seats have insufficient API access for code generation workflows.

<Tip>
  Your team does not need individual PATs. One Dev or Full seat holder generates the token, and the entire team (and Blitzy) uses that single token for all design-to-code workflows.
</Tip>

## Rate Limits

Figma enforces per-seat, per-plan rate limits on API endpoints. Blitzy primarily uses **Tier 1** endpoints (file content and image rendering), which have the following limits:

| Seat type              | Starter | Professional | Organization | Enterprise    |
| ---------------------- | ------- | ------------ | ------------ | ------------- |
| **View, Collaborator** | 6/month | 6/month      | 6/month      | 6/month       |
| **Dev, Full**          | 10/min  | 15/min       | 20/min       | Not published |

<Warning>
  View and Collaborator seats are capped at **6 Tier 1 calls per month** regardless of plan. This is completely insufficient for code generation or frame validation. Your PAT must come from a **Dev** or **Full** seat.
</Warning>

**Avoiding rate limit failures:**

* Coordinate with your team to prevent multiple simultaneous jobs using the same token
* Even with paid plans, avoid running multiple Blitzy jobs concurrently with the same Figma token

## Attaching Figma Frames

Always attach frames using Blitzy's Figma button with the frame URL and description. Keep Figma information in the attachments rather than describing it in your prompt text so the system processes visual context optimally.

Be specific and granular with frame selection:

* If building a component within a larger frame, select and attach only that specific component's frame
* Include the broader frame as an additional attachment only if positioning context is critical
* Attach each screen as a separate Figma frame when working across multiple screens

## Optimal Task Structure

Multiple dense screens can exceed the agent's effective context window. Break projects into smaller, focused tasks with targeted frame attachments for better results. Structure work incrementally rather than attempting entire multi-screen implementations at once.

## Prompt Templates

Ready-to-use prompts for common Figma-to-code scenarios - single screens, responsive layouts, user flows, component variants, and more.

<Card title="Figma to Code Templates" icon="file-contract" href="/templates/feature-product-development/figma-to-code">
  Six copy-paste prompts matched to different design input types
</Card>