Figma handoff
Pull a Figma design via the Figma connector and produce a developer handoff - tokens, specs, redlines, asset list, and component notes. Use when handing a design to engineering or auditing a Figma file.From its SKILL.md
npx -y skills add m-binimran/design-pack --skill figma-handoffAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 3 stars3 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.3 KB, 273 tokens by cl100k_base, as published. Nobody here has run it
figma-handoff
Turn a Figma file into a clean, accurate handoff using the Figma connector (never guess values).
Process
- Read the design via Figma: frames, variables/tokens, text styles, components, screenshots. If Figma isn't connected, say so - don't invent frame names or values.
- Extract tokens (hand to
design-tokens): colours, type scale, spacing, radius, shadows - from Figma variables, not eyeballed. - Spec the screens: spacing, sizes, breakpoints, states (hover/active/disabled/empty/error), interactions.
- List assets to export with names + formats + densities (hand to
asset-export). - Flag issues: contrast misses (the
contrast-guardhook +accessibility-contrast), inconsistent spacing/type, missing states.
Output
- A handoff doc: tokens, per-screen specs, asset export list, component notes, and an issues list. Every value
sourced from Figma or marked
[verify].
Guardrails
- All measurements come from the Figma connector or are flagged - no fabricated pixels.
- Don't claim a file was read if the connector didn't return it.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.