🎨
Figma
Design to Code Developer ToolsInstall Command
npx clawhub@latest install figma
Installation Guide
1
Check Environment
Make sure Node.js 22+ and OpenClaw are installed. Run openclaw --version in your terminal to verify.
2
Run Installation
Run the install command above in your terminal. ClawHub will automatically download and install Figma to the ~/.openclaw/skills/ directory.
3
Verify Installation
Run openclaw skills list to check your installed skills and confirm Figma appears in the list.
4
Configure (Optional)
Follow the configuration instructions in the description below to add skill settings to ~/.config/openclaw/openclaw.json5.
Manual Installation: Copy the Skill folder to
~/.openclaw/skills/ or the skills/ directory in your project root. Make sure the folder contains a SKILL.md file.
Read Figma design files and component info
Extract style variables and design tokens
Convert design files to usable code structures
Detailed Description
Figma MCP Server enables AI to directly read and understand your Figma design files, seamlessly transforming design information into the foundation for code implementation.
Core Features
- Design File Reading: Directly access pages, artboards, and layer structures in Figma files, obtaining complete design hierarchy information
- Component & Style Extraction: Read component definitions, color variables, font styles, and spacing tokens from the design system, ensuring code-design consistency
- Layout Info Parsing: Parse Auto Layout, constraints, and responsive layout settings to help AI generate accurate CSS/style code
Configuration
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp"],
"env": {
"FIGMA_API_KEY": "Your Figma personal access token"
}
}
}
}
Use Cases
- Automatically generate frontend component code from Figma designs
- Extract design tokens and sync them to the codebase's style system
- Let AI understand design intent to maintain visual consistency during coding
- Quickly access design specification data during design reviews