figma-design-handoff
Installation
SKILL.md
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.