| name | figma-design-handoff |
| license | MIT |
| compatibility | Claude Code 2.1.220+. |
| description | Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction, Dev Mode inspection, Auto Layout to CSS Flexbox/Grid mapping, and visual regression with Applitools. Use when converting Figma designs to code, documenting component specs, setting up design-dev workflows, or comparing production UI against Figma designs. |
| tags | ["figma","design-handoff","design-to-code","figma-variables","dev-mode","auto-layout","component-specs","visual-regression","applitools","design-tokens"] |
| context | fork |
| agent | frontend-ui-developer |
| version | 1.1.0 |
| author | OrchestKit |
| user-invocable | false |
| disable-model-invocation | true |
| complexity | medium |
| persuasion-type | guidance |
| targets | [{"library":"style-dictionary","version":">=5.3.0"}] |
| metadata | {"category":"document-asset-creation","figma-mcp-tool-count":16} |
| allowed-tools | ["Read","Glob","Grep","WebFetch","WebSearch"] |
Figma Design Handoff
Figma dominates design tooling in 2026, with the majority of product teams using it as their primary design tool. A structured handoff workflow eliminates design drift — the gap between what designers create and what developers build. This skill covers the full pipeline: Figma Variables to design tokens, component spec extraction, Dev Mode inspection, Auto Layout to CSS mapping, and visual regression testing.
Quick Reference
| Rule | File | Impact | When to Use |
|---|
| Figma Variables & Tokens | rules/figma-variables-tokens.md | CRITICAL | Converting Figma Variables to W3C design tokens JSON |
| Component Specs | rules/figma-component-specs.md | HIGH | Extracting component props, variants, states from Figma |
| Dev Mode Inspection | rules/figma-dev-mode.md | HIGH | Measurements, spacing, typography, asset export |
| Auto Layout → CSS | rules/figma-auto-layout.md | HIGH | Mapping Auto Layout to Flexbox/Grid |
| Visual Regression | rules/figma-visual-regression.md | MEDIUM | Comparing production UI against Figma designs |
Total: 5 rules across 1 category
Figma Dev Mode MCP Server (2026 default path)
The Figma Dev Mode MCP Server replaces most manual REST + Dev Mode inspection. Configure it once and any Claude Code session with Figma access can pull design context, tokens, and code mappings directly.
Key tools (16 documented — developers.figma.com/docs/figma-mcp-server/tools-and-prompts):
| Tool | Returns | Use for |
|---|
get_design_context | Component tree + layout + typography + spacing | First call on any Figma node → grounds every other tool |
get_variable_defs | Token collections (variables + modes + aliases) | Straight export to W3C DTCG JSON — skip the REST pipeline |
get_code_connect_map | Figma node → codebase component mapping | Linking generated code to existing repo components |
