Figma Design to Code Handoff
By Jordan Anderson · Published · Updated
Translates a design file into a component list, design tokens and every UI state, with the open questions for the designer written down.
Prompt template
## Figma Design to Code Handoff Prepare a developer handoff from this design. - Design description: [textarea: Frames and layout and any text exported from the file] - Screen or flow: [text: Name of what is being built] - Target framework: [dropdown: React, Vue, Flutter, SwiftUI, Plain HTML and CSS] - Existing component library: [text: Name or none] - Token values: [textarea: Colours and font sizes and spacing found in the file] - Responsive targets: [multi: Mobile, Tablet, Desktop] 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.