Figma Mcp Pro
About
Professional MCP server for seamless Figma design analysis with intelligent comment processing and automated asset downloads.
Details
- Author
- artemsvit
- Downloads
- 359
- Categories
- Media
Jump to
- Five‑step workflow: framework selection, design data, comments, assets, reference analysis.
- Data structured specifically for AI code generation.
- Supports ten frameworks: React, Vue, Angular, Svelte, HTML/CSS/JS, SwiftUI, UIKit, Electron, Tauri, NW.js.
- Smart coordinate‑based comment matching to UI elements.
- Batch asset downloads preserving original Figma export settings.
- Automatic CSS generation from Figma properties (padding, margins, borders, effects).
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Figma Mcp ProCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Install globally via npm (npm install -g figma-mcp-pro), obtain a Figma API token, then add the provided MCP configuration (with your API key) to your MCP client’s settings file (e.g., claude_desktop_config.json for Claude Desktop, VS Code MCP settings for Claude Code, or the MCP configuration in Cursor, Windsurf, or TRAE). The server exposes five core tools: show_frameworks, get_figma_data, process_design_comments, download_design_assets, and check_reference.
show_frameworks
STEP 1: Show available frameworks to user. Call with empty object {}. Shows options, then STOP and wait for user to tell you their choice. DO NOT make further tool calls until user provides their framework preference.
get_figma_data
STEP 2: Get well-structured, AI-optimized Figma design data with framework-specific optimizations. Analyzes layout, components, coordinates, visual effects (shadows, borders), design tokens. PURE DESIGN DATA ONLY - no comments. Use AFTER user chooses framework. Can accept full Figma URL to automatically extract file and node selection. If getting unintended content, select a more specific element in Figma.
process_design_comments
STEP 3: Process designer comments with smart coordinate matching. Use AFTER get_figma_data when you want to analyze designer instructions. Converts comments into actionable AI prompts for implementation.
download_design_assets
STEP 4: Automatically scan selected area for ALL export-ready assets and download them with reference.png. Takes Figma URL, finds all nodes with export settings in selected area, downloads them with Figma export settings, plus creates reference.png of whole selection.
check_reference
STEP 5: Analyze reference.png file for design understanding. Provides design context, layout analysis, component structure guidance, and framework-specific development recommendations before starting code implementation.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"figma mcp pro": {
"Figma MCP PRO": {
"command": "npx",
"args": [
"figma-mcp-pro@latest",
"--figma-api-key",
"your-api-key-here"
],
"env": {
"DEBUG": "true"
}
}
}
}
}McpServers
{
"Figma MCP PRO": {
"command": "npx",
"args": [
"figma-mcp-pro@latest",
"--figma-api-key",
"your-api-key-here"
],
"env": {
"DEBUG": "true"
}
}
}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 tokens2. Copy & Paste MCP Configuration
📋 Use the copy button on the code block below, then replaceyour-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, breakpointsSmart Comments
- Coordinate Matching: Comments linked to specific design elements - AI Instructions: "Add hover animation to Button component" - Implementation Context: Element details + positioningAsset 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
- Issues: GitHub Issues
- NPM: figma-mcp-pro
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
