figma-desktop
CommunityTransform Figma designs into code.
Design & Creative#typescript#screenshots#react#figma#design tokens#component generation#design-to-code
AuthorVitorAndTxr
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill bridges the gap between design and development by automating the extraction of design data from Figma, streamlining the process of translating visual designs into functional code.
Core Features & Use Cases
- Design-to-Code: Generate React/TypeScript code directly from Figma designs (MCP only).
- Asset Extraction: Extract screenshots, design tokens (colors, typography), and node metadata.
- Handoff Information: Retrieve annotations and component mappings for smoother developer handoffs.
- Use Case: A designer creates a new button component in Figma. This Skill can generate the corresponding React component code, extract its color and text styles, and provide a screenshot for documentation, saving developers significant time and ensuring design fidelity.
Quick Start
Use the figma-desktop skill to generate a React component for the Figma node '6804:13742' using code generation.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 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-desktop Download link: https://github.com/VitorAndTxr/Bioteca.Prism.InteroperableResearchInterfaceSystem/archive/main.zip#figma-desktop Please download this .zip file, extract it, and install it in the .claude/skills/ directory.