> ## 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 to Code

> Copy-paste prompts for converting Figma designs into pixel-faithful front-end code

Six ready-to-use prompts for generating front-end code from Figma designs. Match your scenario to the right prompt using the table below.

<Warning>
  These prompts require a Figma PAT from a **Dev** or **Full** seat. View and Collaborator seats are limited to 6 API calls per month, which is insufficient for code generation. See [Figma integration](/integrations/figma#rate-limits) for rate limit details.
</Warning>

<Note>
  **Jump to:** [Single Screen](#1-single-screen) | [Responsive Screen](#2-responsive-screen) | [User Flow](#3-user-flow) | [Component Logic](#4-component-logic) | [Reskin with Library](#5-reskin-with-component-library) | [Add Feature from Figma](#6-add-feature-to-existing-codebase)
</Note>

| Starting context      | You have...                                                      | Use case                                                      |
| --------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
| **No existing code**  | A single Figma screen                                            | [Single Screen](#1-single-screen)                             |
| **No existing code**  | Multiple Figma frames of the same screen at different widths     | [Responsive Screen](#2-responsive-screen)                     |
| **No existing code**  | Multiple Figma screens representing a user flow                  | [User Flow](#3-user-flow)                                     |
| **No existing code**  | Multiple Figma frames showing a component's states/variants      | [Component Logic](#4-component-logic)                         |
| **Existing codebase** | Existing code + a target component library (MUI, Ant, SAP, etc.) | [Reskin with Library](#5-reskin-with-component-library)       |
| **Existing codebase** | Existing code + new Figma screens to implement                   | [Add Feature from Figma](#6-add-feature-to-existing-codebase) |

## No Existing Code

These prompts generate new code from Figma input alone.

### 1. Single Screen

<CodeGroup>
  ```text Prompt theme={null}
  Convert the attached Figma screen into pixel-faithful, front-end code.

  After implementation, provide screenshots to verify visual fidelity.
  ```
</CodeGroup>

**Attach** - Figma frame URL

### 2. Responsive Screen

<CodeGroup>
  ```text Prompt theme={null}
  The attached Figma URL(s) contains multiple screens of the same UI
  at different viewport widths. Each artboard defines a responsive breakpoint.

  Generate a single responsive implementation that matches every artboard
  exactly at its designed width.

  After implementation, provide screenshots at each designed viewport width.
  ```
</CodeGroup>

**Attach** - Figma frame URL(s)

### 3. User Flow

<CodeGroup>
  ```text Prompt theme={null}
  The attached Figma URL(s) contains multiple screens representing sequential
  steps in a user flow. Each screen is a distinct view.

  Each screen's visual output must match its corresponding Figma frame independently.

  After implementation, provide a screenshot of each screen.
  ```
</CodeGroup>

**Attach** - Figma frame URL(s) for each step in the flow

### 4. Component Logic

<CodeGroup>
  ```text Prompt theme={null}
  The attached Figma frames represent a single component across its variant
  states and configurations (e.g., default, hover, active, disabled, error,
  sizes, themes, responsiveness).

  Generate a single component that accepts props to control each variant
  dimension shown. Every visual state in the Figma must be reproducible
  via props - do not hardcode any single variant.

  (Optional) Add a test harness UI that lets me toggle between all variants.

  After implementation, render each variant and provide a screenshot grid
  showing all states.
  ```
</CodeGroup>

**Attach** - Figma frame URL(s) showing each variant/state of the component

## Existing Codebase

These prompts work with code you've already onboarded to Blitzy.

### 5. Reskin with Component Library

<CodeGroup>
  ```text Prompt theme={null}
  Reskin the attached page/component using [LIBRARY NAME] as the sole
  UI library. Read the existing implementation to understand the page's
  structure, layout, and behavior - then replace every UI element with
  its [LIBRARY NAME] equivalent.

  Use [LIBRARY NAME]'s default theme and standard page scaffolding.
  Adopt the library's layout idioms where they differ from the current
  implementation.

  Do not modify business logic, data flow, or API calls. Only the
  UI layer changes.

  Do not add, remove, or rearrange content - the page must contain
  the same information and controls as the original.

  After implementation, provide screenshots.
  ```
</CodeGroup>

**Replace** `[LIBRARY NAME]` with: Material UI, Ant Design, SAP Fiori, shadcn/ui, or your target library.

### 6. Add Feature to Existing Codebase

<CodeGroup>
  ```text Prompt theme={null}
  Add the feature shown in the attached Figma screens to the existing
  codebase.

  Use the existing codebase to identify:
  - File and folder conventions - place new files where expected.
  - Routing configuration - add routes for new screens.
  - Shared layouts or wrappers the new screens should use.
  - Data structures to extend (if the feature adds to an existing list,
    table, or configuration).

  Do not refactor, rename, or restructure existing code beyond the minimal insertion points.

  After implementation, provide screenshots of each new screen, plus any existing screens that now
  display the new feature.
  ```
</CodeGroup>

**Attach** - Figma frame URL(s) for the new feature

<Tip>
  **Rule available** — Add the [Enforce Code Style Patterns](/templates/rules/enforce-code-style-patterns) rule to your project on the platform to ensure generated code follows your existing architectural patterns.
</Tip>