Figma Developer
CommunityTransform Figma designs into production-ready code automatically.
Design & Creative#automation#react#figma#component-generation#design-system#design-to-code#design-tokens
Authordaffy0208
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill eliminates the manual gap between design and development by automatically converting Figma designs into working code components and design tokens.
Core Features & Use Cases
- Design Token Extraction: Automatically sync colors, typography, and spacing from Figma to code.
- Component Generation: Convert Figma components into React components with proper styling and variants.
- Asset Export: Export icons and images from Figma and generate React icon components.
- Use Case: Imagine your design team updates the primary brand color in Figma. Use this Skill to automatically sync the change across your entire codebase.
Quick Start
Use the Figma Developer skill to extract design tokens and generate React components from the Figma file 'design-system-v2'.
Dependency Matrix
Required Modules
node-fetch
Components
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Figma Developer Download link: https://github.com/daffy0208/ai-dev-standards/archive/main.zip#figma-developer Please download this .zip file, extract it, and install it in the .claude/skills/ directory.