figma-design-handoff
This skill bridges design and development by automating the Figma-to-code pipeline. It covers extracting design tokens from Figma Variables, mapping Auto Layout to CSS Flexbox/Grid, documenting component specifications, and validating production UI against Figma designs using visual regression.
Figma Design Handoff converts Figma designs to production code through design tokens, component specs, and visual regression.
AI-generated summary based on this skill's SKILL.md
Install
yonatangross/orchestkit/figma-design-handoff · repository language: TypeScript
git clone https://github.com/yonatangross/orchestkit
cp -r orchestkit/src/skills/figma-design-handoff ~/.claude/skills/figma-design-handoffnpx skillfed install yonatangross/orchestkit/figma-design-handoffFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does figma-design-handoff convert Figma designs to code?
figma-design-handoff automates the Figma-to-code pipeline by extracting design specifications directly from Figma and generating production-ready code with structured handoff. It maps Figma components to code artifacts, extracts design tokens from Figma Variables, and documents component specs to ensure developers receive complete, actionable design information rather than static screenshots.
What is the figma to react component handoff workflow?
figma-design-handoff enables a structured handoff workflow by exporting component specifications, variants, and states from Figma into documentation and code templates. The workflow captures Auto Layout constraints, typography, spacing, and color tokens, then maps them to React component props and CSS, reducing manual translation and design-to-code friction.
How does figma-design-handoff handle design tokens and variables?
figma-design-handoff automates design tokens extraction from Figma Variables into CSS, Tailwind, and W3C token JSON formats. It converts Figma's variable system into a pipeline that syncs color palettes, typography scales, spacing systems, and other design tokens directly to your codebase, eliminating manual token transcription.
Can figma-design-handoff map Auto Layout to CSS Flexbox and Grid?
Yes. figma-design-handoff analyzes Figma Auto Layout properties—direction, spacing, alignment, and wrapping—and translates them into equivalent CSS Flexbox or Grid layouts. This automation preserves design intent in code, ensuring responsive behavior and spacing rules defined in Figma are accurately reflected in production CSS.
How does figma-design-handoff perform visual regression testing?
figma-design-handoff validates production UI against Figma designs using visual regression testing. It captures Figma component screenshots and compares them against rendered production components, detecting visual drift, spacing misalignments, color deviations, and other discrepancies to ensure design fidelity throughout development.
What component specs can figma-design-handoff extract from Figma?
figma-design-handoff extracts comprehensive component specifications including variants, states, properties, constraints, typography, spacing, colors, shadows, borders, and interaction annotations. It generates structured documentation that developers can reference during implementation, covering everything needed to rebuild components accurately in code.
SKILL.md
rendered from the published skill — quoted content, verbatim
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 —
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 12 files
src/skills/figma-design-handoff/SKILL.md
src/skills/figma-design-handoff/references/applitools-figma-plugin.md
src/skills/figma-design-handoff/references/design-dev-communication.md
src/skills/figma-design-handoff/references/figma-to-code-workflow.md
src/skills/figma-design-handoff/rules/_sections.md
src/skills/figma-design-handoff/rules/_template.md
src/skills/figma-design-handoff/rules/figma-auto-layout.md
src/skills/figma-design-handoff/rules/figma-component-specs.md
src/skills/figma-design-handoff/rules/figma-dev-mode.md
src/skills/figma-design-handoff/rules/figma-variables-tokens.md
src/skills/figma-design-handoff/rules/figma-visual-regression.md
src/skills/figma-design-handoff/test-cases.json