{"enrichment":{"faq":[{"a":"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.","q":"How does figma-design-handoff convert Figma designs to code?"},{"a":"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.","q":"What is the figma to react component handoff workflow?"},{"a":"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.","q":"How does figma-design-handoff handle design tokens and variables?"},{"a":"Yes. figma-design-handoff analyzes Figma Auto Layout properties\u2014direction, spacing, alignment, and wrapping\u2014and 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.","q":"Can figma-design-handoff map Auto Layout to CSS Flexbox and Grid?"},{"a":"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.","q":"How does figma-design-handoff perform visual regression testing?"},{"a":"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.","q":"What component specs can figma-design-handoff extract from Figma?"}],"shadow_tags":["design-to-code-automation","token-generation-pipeline","component-extraction","layout-mapping","visual-qa-testing","design-system-workflow","dev-mode-inspection","design-drift-prevention"],"summary_rewrite":"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."},"files":[{"bytes":10984,"path":"src/skills/figma-design-handoff/SKILL.md","sha256":"a40e42f2214a5d9924e7f8e0af4fcb3f4061fcded2979da12280f193d9d7eba3","url":"https://skillfed.io/files/yonatangross/orchestkit/figma-design-handoff/e353e574/SKILL.md"}],"id":"yonatangross/orchestkit/figma-design-handoff","links":{"html":"https://skillfed.io/yonatangross/orchestkit/figma-design-handoff","md":"https://skillfed.io/yonatangross/orchestkit/figma-design-handoff.md","repo":"https://github.com/yonatangross/orchestkit"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":20,"language":"TypeScript","last_updated":"2026-07-28","license":"MIT","name":"figma-design-handoff","publisher":"yonatangross","stars":208},"relations":{"similar":[{"id":"yonatangross/orchestkit/design-system-tokens"},{"id":"alekspetrov/navigator/product-design"},{"id":"yonatangross/orchestkit/design-context-extract"},{"id":"plugin87/ux-ui-agent-skills/token-build"},{"id":"modu-ai/moai-adk/moai-domain-uiux"},{"id":"mateaix/mateclaw/design-md"},{"id":"NousResearch/hermes-agent/design-md"},{"id":"dembrandt/dembrandt-skills/extract-design"},{"id":"yonatangross/orchestkit/ui-components"},{"id":"xtone/ai_development_tools/figma-design-analyzer"}]},"slug":{"owner":"yonatangross","repo":"orchestkit","skill":"figma-design-handoff"},"version":"e353e574"}