Connects to the Figma API to fetch design files and nodes, analyze design properties, generate HTML/CSS code from designs, and export designs as images in PNG, JPG, SVG, or PDF formats.
Figma MCP Server
A powerful MCP (Model Context Protocol) server that connects AI applications to the Figma API, enabling seamless access to Figma designs, automatic HTML/CSS generation, and screenshot capture.
🚀 Features
Available MCP Tools
Tool | Description | Use Case |
getFile | Fetch complete Figma file data | Get entire file structure and metadata |
getNode | Fetch specific node from a file | Access individual components or frames |
analyzeDesign | Extract and analyze design properties | Understand component structure and styling |
generateCSS | Generate CSS from Figma nodes | Convert Figma styles to CSS code |
generateHTML | Generate HTML structure | Create semantic HTML from designs |
generateFullDesign | Generate complete HTML/CSS file | Convert entire designs to working code |
getImage | Capture screenshots/renders | Export designs as PNG, JPG, SVG, or PDF |
What You Can Do
📊 Extract Design Data - Access complete design specifications
🎨 Generate CSS - Convert Figma styles to production-ready CSS
🏗️ Create HTML - Generate semantic HTML structure from designs
📸 Capture Screenshots - Export designs as images in multiple formats
🔍 Analyze Components - Understand design properties and hierarchy
⚡ Automate Workflows - Integrate with AI tools like Claude Desktop
📋 Prerequisites
Node.js v17 or higher
Figma Personal Access Token (not a file access token)
🛠️ Installation
1. Clone and Install
2. Configure Figma Token
Create a .env file in the root directory:
Getting Your Token:
Go to Figma Account Settings
Scroll to "Personal access tokens"
Click "Create a new personal access token"
Copy the token and add it to
.env
⚠️ Important: Use a Personal Access Token, not a file-specific token.
3. Build the Project
🎯 Usage
With Claude Desktop
Add to your Claude config file:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
With VS Code MCP
Add to .vscode/mcp.json:
📖 Tool Usage Examples
Understanding Figma URLs
For a URL like:
File Key:
YwUqmarhRx74Gb4zePtEUxNode ID:
8384-4(or8384:4- both formats work)
1. Analyze Design Structure
Returns detailed design properties including:
Component hierarchy
Colors and fills
Typography settings
Dimensions and positioning
2. Generate CSS Styles
Generates production-ready CSS with:
Colors (rgba format)
Typography (font-family, size, weight)
Layout (width, height, padding)
Effects (shadows, borders, border-radius)
3. Generate HTML Structure
Creates semantic HTML structure matching your Figma hierarchy.
4. Generate Complete HTML/CSS Page
Generates a complete HTML file with:
Inline CSS styles
Semantic HTML structure
Responsive reset styles
Proper typography and spacing
5. Capture Screenshots/Images
Format Guide:
PNG - Best for UI designs with transparency (recommended)
JPG - Smaller file size, no transparency
SVG - Vector format, scalable
PDF - Print-ready documents
Scale Options:
1- Original size (default)2- Retina/HiDPI displays (recommended)3-4- Very high resolution (print quality)0.01-0.99- Thumbnails/previews
Returns a temporary download URL (valid ~30 minutes).
🧪 Testing Tools
Run test scripts from the tests/ directory:
Test HTML/CSS Generation
Generates output.html with complete HTML/CSS from a Figma design.
Test Image Capture
Downloads a screenshot as figma-screenshot-{nodeId}.png
Test Token Validation
Validates your Figma API token and permissions.
🏗️ Project Structure
🔧 Development
Build Commands
Supported Figma Properties
Layout:
Width, height, positioning
Padding and margins
Border radius
Typography:
Font family, size, weight
Line height, text alignment
Text content
Colors:
Fill colors (solid, gradients)
Stroke/border colors
Opacity/transparency
Effects:
Drop shadows
Box shadows
Border styles
📚 Documentation
TROUBLESHOOTING.md - Common issues and fixes
CSS-IMPROVEMENTS.md - CSS generation details
IMAGE-FEATURE.md - Screenshot capabilities
🐛 Troubleshooting
"Invalid token" Error
✅ Solution: Use a Personal Access Token, not a file access token
Go to Figma Settings → Personal access tokens
Create a new token with full API access
Update your
.envfile
Node Not Found
✅ Solution: Check node ID format
Both
8384-4and8384:4workGet node ID from Figma URL or inspect panel
Class Names Not Working
✅ Solution: Already fixed in latest version
Class names are normalized (colons → dashes)
CSS selectors are valid
See docs/TROUBLESHOOTING.md for more solutions.
🔒 Security
⚠️ Never commit - Contains your Figma token
✅ Use environment variables for all secrets
🔐 For production, follow MCP Authorization Best Practices
🌟 Use Cases
Design-to-Code - Convert Figma designs to HTML/CSS automatically
Design Systems - Extract component styles for documentation
Asset Export - Batch export design elements as images
Design Review - Capture screenshots for presentations
AI Integration - Connect Figma to AI tools via MCP
Automation - Build workflows with Figma data
📖 References
📄 License
MIT
Made with ❤️ for the design-to-code community
This server cannot be installed
remote-capable server
The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.
Connects AI applications to Figma API for extracting design data, generating production-ready HTML/CSS from designs, and capturing screenshots in multiple formats.