Figma Dev Mode HandoffVerified Creator

• references/
• SKILL.mdopen
• README.mdopen

name:

Figma Dev Mode Handoff

slug:

figma-dev-mode-handoff

version:

v1.2.0

license:

MIT

author:

@figma-craft

categories:

FigmaDesignerFrontend

tags:

#figma#dev-mode#handoff#code-connect#design-to-code

description:

Ship clean Figma Dev Mode handoffs — specs, tokens, code snippets, annotations devs don't have to guess at.

// What you can do with it

• Marks status: flips frames to Ready for dev in Dev Mode so engineers can filter the file to only what's shippable, and flags sections still in flux.
• Writes annotations: adds Dev Mode annotations on layers for behavior, constraints, interaction states, and edge cases the visuals don't convey.
• Maps variables to tokens: pairs Figma variables with your code token names (e.g. color/bg/subtle → --color-bg-subtle) so the generated CSS/Tailwind reads in your vocabulary, not hex soup.
• Sets up Code Connect: links Figma components to their real implementations via figma.connect() in *.figma.tsx files, so the Code panel surfaces your instead of a div tree. Pushes mappings with figma
• Produces the spec: a per-section summary of components used, token references, redlines, and open questions.