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.
- License
- MIT
- Compatibility
- Claude Code 2.1.220+.
Pinned to revision 1ff988bd66da, so it is the text this page describes rather than whatever the author pushed since.
Pre-approved tools experimental
Experimental field. Support varies between clients, so this list is what the author declared, not what your client will enforce.
- Read
- Glob
- Grep
- WebFetch
- WebSearch
Files
- skills/figma-design-handoff/SKILL.md
- skills/figma-design-handoff/references/applitools-figma-plugin.md
- skills/figma-design-handoff/references/design-dev-communication.md
- skills/figma-design-handoff/references/figma-to-code-workflow.md
- skills/figma-design-handoff/rules/_sections.md
- skills/figma-design-handoff/rules/_template.md
- skills/figma-design-handoff/rules/figma-auto-layout.md
- skills/figma-design-handoff/rules/figma-component-specs.md
- skills/figma-design-handoff/rules/figma-dev-mode.md
- skills/figma-design-handoff/rules/figma-variables-tokens.md
- skills/figma-design-handoff/rules/figma-visual-regression.md
- skills/figma-design-handoff/test-cases.json
Every link opens the file at its source, pinned to the revision this page describes.