Figma MCP PRO
Professional Model Context Protocol (MCP) server for AI-optimized Figma design analysis. Clean 5-step workflow for comprehensive design-to-code conversion with smart comment processing and asset downloads.
🚀 Key Features
- 5-Step Workflow: Framework selection → Design data → Comments → Assets → Reference analysis
- AI-Optimized: Structured data specifically formatted for AI code generation
- 10 Framework Support: React, Vue, Angular, Svelte, HTML/CSS/JS, SwiftUI, UIKit, Electron, Tauri, NW.js
- Smart Comments: Coordinate-based matching of designer comments to UI elements
- Asset Downloads: Batch download with original Figma export settings
- CSS Generation: Automatic CSS from Figma properties (padding, margins, borders, effects)
📦 Installation
npm install -g figma-mcp-pro
⚙️ Quick Setup
1. Get Your Figma API Key
Get your API token from Figma Account Settings → Personal access tokens
2. Copy & Paste MCP Configuration
📋 Use the copy button on the code block below, then replace your-api-key-here with your actual API key:
{
"mcpServers": {
"Figma MCP PRO": {
"command": "npx",
"args": ["figma-mcp-pro@latest", "--figma-api-key", "your-api-key-here"],
"env": {
"DEBUG": "true"
}
}
}
}
Configuration File Locations:
- Claude Desktop:
claude_desktop_config.json
- Claude Code (VS Code): VS Code MCP settings
- Cursor, Windsurf, TRAE: Application MCP configuration settings
📝 Tool Reference
Core Tools
show_frameworks
Shows available frameworks. Call first to choose target framework.
get_figma_data
Extracts AI-optimized design data with framework-specific processing.
- Input: Figma URL + framework
- Output: Design structure, CSS properties, layout data
process_design_comments
Matches designer comments to design elements with AI implementation prompts.
- Input: Figma URL + framework
- Output: Comment-to-element mapping with actionable instructions
download_design_assets
Downloads export-ready assets with original Figma settings + reference image.
- Input: Figma URL + local path
- Output: Asset files + reference.png for visual context
check_reference
Analyzes reference.png for design understanding and development guidance.
- Input: Assets folder path + framework
- Output: Design analysis and framework-specific development recommendations
🎯 What You Get
Design Data
- Layout: Padding, margins, gaps, auto-layout properties
- Styling: Colors, borders, shadows, effects, typography
- Structure: Component hierarchy, semantic roles
- Responsive: Flexible sizing, constraints, breakpoints
Smart Comments
- Coordinate Matching: Comments linked to specific design elements
- AI Instructions: "Add hover animation to Button component"
- Implementation Context: Element details + positioning
Asset Downloads
- Export Settings: Respects Figma's configured export settings
- Original Names: Uses actual node names as filenames
- Visual Reference: reference.png shows complete design context
- Multiple Formats: SVG, PNG, JPG, PDF support
🌟 Framework Optimizations
- React: TypeScript, Hooks, Custom Hooks, Performance optimization
- Vue: Composition API, TypeScript, Pinia stores, Composables
- Angular: Standalone components, Signals, Modern templates, TypeScript
- Svelte: Svelte 5 runes, TypeScript, SvelteKit, Stores
- HTML/CSS/JS: Design tokens, Modern CSS, Accessibility-first
- SwiftUI: State management, MVVM, Accessibility, Modern patterns
- UIKit: Modern concurrency, SwiftUI interop, Auto Layout
- Electron: Security hardening, IPC patterns, Native integration
- Tauri: Rust commands, Event system, Security, WebView
- NW.js: Unified context, Node.js integration, Chromium APIs
📄 License
MIT License
🆘 Support
