Figma Pro MCP server

Figma MCP PRO is a professional Model Context Protocol server designed specifically for AI-optimized Figma design analysis. It provides a clean 5-step workflow for comprehensive design-to-code conversion with features like smart comment processing and asset downloads to streamline the development process.

Installation

Install the package globally using npm:

npm install -g figma-mcp-pro

Setup and Configuration

Getting Your Figma API Key

1. Go to Figma Account Settings
2. Navigate to the "Personal access tokens" section
3. Generate a new API token

MCP Configuration

Copy the following configuration and replace your-api-key-here with your actual Figma 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

Depending on your AI tool, add this configuration to:

• Claude Desktop: claude_desktop_config.json
• Claude Code (VS Code): VS Code MCP settings
• Cursor, Windsurf, TRAE: Application MCP configuration settings

Usage Guide

Figma MCP PRO follows a 5-step workflow for design-to-code conversion:

Step 1: Show Available Frameworks

Use the show_frameworks command to display all supported frameworks:

npx figma-mcp-pro@latest show_frameworks

The tool supports 10 frameworks including React, Vue, Angular, Svelte, HTML/CSS/JS, SwiftUI, UIKit, Electron, Tauri, and NW.js.

Step 2: Extract Design Data

After selecting a framework, extract AI-optimized design data:

npx figma-mcp-pro@latest get_figma_data --url "https://www.figma.com/file/your-file-id" --framework "React"

This provides structured data including layout information, CSS properties, and component hierarchy optimized for your chosen framework.

Step 3: Process Design Comments

Extract and match designer comments to specific UI elements:

npx figma-mcp-pro@latest process_design_comments --url "https://www.figma.com/file/your-file-id" --framework "React"

This creates a mapping between comments and elements with actionable implementation guidance.

Step 4: Download Design Assets

Download all required assets with their original Figma export settings:

npx figma-mcp-pro@latest download_design_assets --url "https://www.figma.com/file/your-file-id" --path "./assets"

This includes a reference image for visual context along with all exported assets.

Step 5: Analyze Reference for Development Guidance

Get framework-specific development recommendations based on the design:

npx figma-mcp-pro@latest check_reference --path "./assets" --framework "React"

Output Details

Design Data Output

The tool provides comprehensive design information including:

• Layout details (padding, margins, gaps, auto-layout properties)
• Styling properties (colors, borders, shadows, effects, typography)
• Component hierarchy and semantic roles
• Responsive design information (flexible sizing, constraints, breakpoints)

Smart Comments Output

Comments are intelligently matched to design elements:

• Coordinate-based matching links comments to specific elements
• AI-friendly instructions (e.g., "Add hover animation to Button component")
• Implementation context with element details and positioning

Asset Downloads

Assets are downloaded with:

• Respect for Figma's configured export settings
• Original node names as filenames
• Complete design context via reference.png
• Support for multiple formats (SVG, PNG, JPG, PDF)

Framework-Specific Optimizations

The tool provides optimized output for each supported framework:

• 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

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.