Figma Handoff Spec

figma-handoff-spec

turn a design into a structured spec engineers can implement without round-trips.

inputs

• figma file or detailed design description
• target stack (react / vue / svelte / native / web components)
• design system in use, if any

what a complete handoff includes

1. component inventory

list every distinct component in the design. for each:

• name (using the team's naming convention)
• variants present (sizes, states, themes)
• whether it exists in the design system or is new

2. tokens used

extract every token referenced:

• colors with token names
• spacing with token names
• type styles with token names
• radii, shadows, z-indices

3. layout spec

per screen or component:

• container: max-width, padding, margin
• grid: columns, gaps, breakpoints
• alignment rules

4. interaction spec

• states: default, hover, focus, active, disabled, loading, error, empty
• transitions: duration, easing, properties
• micro-animations: trigger, behavior

5. responsive behavior

• breakpoints with intent (mobile-first or desktop-first)
• what changes at each breakpoint (layout, sizes, hidden elements)

6. content rules

• min and max character counts for text fields
• truncation rules
• localization considerations

7. data shape

• what data each component needs
• loading and empty states with sample data

output

a single markdown file per screen or major component, structured as above.

what this does not produce

• the code itself (that's a separate task)
• visual design decisions (those happen before handoff)
• placeholder content (use real strings or labeled stand-ins)