figma-design-handoff

# 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`): | T...