---
name: figma-design-to-code-handoff
description: "Translates a design file into a component list, design tokens and every UI state, with the open questions for the designer written down. Use when a design file is ready for developers and needs components, tokens, states and open questions listed before any code is written. Do not use for generating finished code or critiquing the visual design. Related topics: design, coding."
---

# Figma Design to Code Handoff

Translates a design file into a component list, design tokens and every UI state, with the open questions for the designer written down.

## When to use

Use this skill when a design file is ready for developers and needs components, tokens, states and open questions listed before any code is written. Do not use it for generating finished code or critiquing the visual design.

## Workflow

1. Ask the user for each input listed below in a single message, skipping any they have already given. Where options are listed, offer them, but accept other answers too.
2. List the components in the design with names, props and where they repeat, so each is built once.
3. Extract the tokens and match each to an existing library value before proposing a new one.
4. Enumerate every state per component and mark the ones the design never shows as Missing.
5. Describe layout rules and how they change at each chosen screen size, plus accessibility requirements.
6. Write the open questions for the designer, each with a default the developer can use meanwhile.

## Inputs

- **Design description** (longer free text)
- **Screen or flow** (free text, e.g. "Name of what is being built")
- **Target framework** (choose one: React, Vue, Flutter, SwiftUI, Plain HTML and CSS)
- **Existing component library** (free text, e.g. "Name or none")
- **Token values** (longer free text)
- **Responsive targets** (choose any: Mobile, Tablet, Desktop)

## Output

A handoff document with components, a token table, a state matrix, responsive notes, accessibility notes and a list of open questions with proposed defaults.

## Prompt template

Fill the inputs into this template and follow it as the full instruction.

### Figma Design to Code Handoff

Prepare a developer handoff from this design.

- Design description: {{Design description}}
- Screen or flow: {{Screen or flow}}
- Target framework: {{Target framework}}
- Existing component library: {{Existing component library}}
- Token values: {{Token values}}
- Responsive targets: {{Responsive targets}}

Read the design as a set of reusable parts, not as pictures. List the components with a name, its props and where it repeats. Extract tokens for colour, type, spacing, radius and shadow, and use the existing library value when one matches instead of adding a near duplicate. For every component list all states: default, hover, focus, active, disabled, loading, empty and error, and mark any state the design does not show as Missing. Describe layout with rules such as stack, grid, gap and alignment, and say how it adapts at each chosen size. Note the accessibility needs: focus order, labels, contrast and touch target size. End with Open questions for the designer, each with a proposed default so work can continue.

## Pitfalls

- Copying exact pixel values into code instead of naming tokens, which scatters one-off numbers across the codebase.
- Building only the default state, then discovering loading, empty and error states at review.
- Guessing at a missing state silently instead of asking, so the designer finds the guess in production.