Figma Dev Mode Handoff

Turns a finished design file into a handoff a developer can build from cold — sections marked ready-for-dev, annotations on the tricky parts, Figma variables mapped to your code tokens, and Code Connect wired up so the right component shows in Dev Mode's Code panel. Built for designers who own the handoff and for frontend engineers tired of asking "is this final?" and "what's the radius here?"

When to use it

• A feature is design-complete and you're about to throw it over the wall to engineering.
• Dev Mode shows raw CSS for every layer but none of your actual component names or token references.
• Your design system has Figma variables (colors, spacing, radii) that don't visibly line up with the values in code.
• You keep getting Slack pings about spacing, states, breakpoints, or empty/error variants.

What it does

• 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 <Button variant="primary"> instead of a div tree. Pushes mappings with figma connect publish.
• Produces the spec: a per-section summary of components used, token references, redlines, and open questions.

Usage

curl -fsSL --create-dirs -o ~/.claude/skills/figma-dev-mode-handoff/SKILL.md https://claudeskil.com/skills/figma-dev-mode-handoff/SKILL.md

# In Claude, point it at the frame and your component repo:
# "Prep the Checkout flow in <figma-url> for handoff.
#  Map variables to tokens in src/styles/tokens.css and
#  link components to src/components via Code Connect."

A generated Code Connect file looks like:

import figma from "@figma/code-connect"
import { Button } from "./Button"

figma.connect(Button, "https://figma.com/file/abc?node-id=12:34", {
  props: { label: figma.string("Label"),
           variant: figma.enum("Variant", { Primary: "primary" }) },
  example: ({ label, variant }) => <Button variant={variant}>{label}</Button>,
})

Tips & gotchas

• Code Connect requires a Figma Organization or Enterprise plan; the Dev Mode MCP server is separate and runs locally against the desktop app.
• Variable mapping only sticks if layers actually bind the variable — a hardcoded hex that merely matches a token won't surface as a token.
• Run figma connect publish after edits; mappings are file-scoped and won't appear in Dev Mode until pushed.
• Annotations live in Dev Mode, not Design mode — collaborators in Design view won't see them.

FAQ

Does this need an Enterprise plan? Code Connect and Ready for dev status need Dev Mode (paid Dev/Full seats). Reading annotations is free for the engineer.

Will it change my designs? No — it only sets status, adds annotations, binds existing variables, and writes Code Connect files in your repo.

Tailwind or CSS variables? Both. Tell it which token file and format you use and the spec matches it.