Figma handoff spec

Skill Dragoon0x/studio/skills/figma-handoff-spec

Generate a developer handoff spec from a Figma file or design. Use whenever the user mentions handoff, dev handoff, figma handoff, design to code, or needs a structured spec for engineers to implement a design.From its SKILL.md

Install

npx -y skills add Dragoon0x/studio --skill figma-handoff-spec

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.9 KB, as published. Nobody here has run it

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)