Agent skill · design visual · yonatangross
figma-design-handoff
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.
Why this skill is useful
Provides specific design-to-code handoff patterns and tools that streamline the conversion process from Figma to code, which the AI wouldn't reliably generate on its own.
What it needs
Requires style-dictionary installed locally. Requires figma account access. About 6k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/figma-design-handoff--cf245c