Figma MCP Pro

🚀 Figma MCP PRO

Figma MCP PRO is a professional Model Context Protocol (MCP) server tailored for AI-optimized Figma design analysis. It offers a streamlined 5-step workflow for comprehensive design-to-code conversion, featuring intelligent comment processing and asset download capabilities.

🚀 Quick Start

Figma MCP PRO simplifies the process of converting Figma designs into code. With its AI-optimized features and structured workflow, you can efficiently transform your designs into high-quality code.

✨ 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

Retrieve 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

💻 Usage Examples

Basic Usage

The following steps demonstrate how to use Figma MCP PRO:

1. Install the tool using the npm install -g figma-mcp-pro command.
2. Obtain your Figma API key and configure it in the MCP configuration file.
3. Use the core tools to extract design data, process comments, download assets, and perform reference analysis.

Advanced Usage

For more advanced scenarios, you can leverage the framework-specific optimizations provided by Figma MCP PRO. For example, if you are using React, you can take advantage of TypeScript, Hooks, and performance optimization features.

📚 Documentation

Core Tools

show_frameworks

Displays the available frameworks. Call this first to select the 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

This project is licensed under the MIT License.

🆘 Support

• Issues: GitHub Issues
• NPM: figma-mcp-pro