Figma MCP Server

★ 2

from mohammeduvaiz

Connects to the Figma API, allowing AI tools to access and interact with your Figma designs.

🔥🔥🔥✓ VerifiedAccount requiredAdvanced setup

Figma MCP Server

A Model Context Protocol (MCP) server that connects to Figma's API, allowing AI tools and LLMs to access and work with your Figma designs.

Features

Design Data Extraction: Extract components, styles, and text from your Figma designs
Design System Analysis: Analyze design system consistency and patterns
UI Content Management: Extract and organize all UI copy from designs
Development Handoff: Generate comprehensive documentation for developers
Seamless AI Integration: Connect your designs to AI tools like Claude, Cursor, and other MCP-compatible clients

Connecting to Clients

Claude for Desktop

Open or create the Claude for Desktop configuration file:
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json

Add the following configuration:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/absolute/path/to/figma-mcp-server/build/index.js"],
      "env": {
        "FIGMA_API_TOKEN": "your_figma_personal_access_token",
        "TRANSPORT_TYPE": "stdio"
      }
    }
  }
}

Restart Claude for Desktop

Cursor

Global Configuration

Create or edit Cursor's MCP configuration file:

macOS: ~/Library/Application Support/Cursor/mcp.json
Windows: %APPDATA%\Cursor\mcp.json

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "your_secure_api_key"
      }
    }
  }
}

Project-Specific Configuration

Create a .cursor directory in your project root:
```
mkdir -p .cursor
```

Create an mcp.json file inside that directory:

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "your_secure_api_key"
      }
    }
  }
}

Available Tools

Tool	Description
`get-file-info`	Get basic information about a Figma file
`get-nodes`	Get specific nodes from a Figma file
`get-components`	Get component information from a Figma file
`get-styles`	Get style information from a Figma file
`get-comments`	Get comments from a Figma file
`search-file`	Search for elements in a Figma file by type, name, etc.
`extract-text`	Extract all text elements from a Figma file

Available Prompts

analyze-design-system - Analyze design system components and styles for consistency
extract-ui-copy - Extract and organize all UI copy from designs
generate-dev-handoff - Generate development handoff documentation based on designs

Environment Variables

Variable	Description	Default
`FIGMA_API_TOKEN`	Your Figma Personal Access Token	(Required)
`API_KEY`	Security key for API authentication	(Required)
`TRANSPORT_TYPE`	Transport method (`stdio` or `sse`)	`stdio`
`PORT`	Port for SSE transport	`3000`

Architecture

This MCP server:

Connects to the Figma API using your personal access token
Exposes a standardized interface following the Model Context Protocol
Provides tools, resources, and prompts that LLMs can use to interact with your Figma designs
Supports both stdio transport (local connections) and SSE transport (remote connections)

Copy & paste — that's it

npm install

Before it works, you'll need: FIGMA_API_TOKENTRANSPORT_TYPE

Getting Started

Prerequisites

Node.js 16 or higher
Figma Personal Access Token (Get it from your Figma account settings)

Installation

Clone the repository:

git clone https://github.com/yourusername/figma-mcp-server.git
cd figma-mcp-server

Install dependencies:
```
npm install
```

Create a .env file in the project root:

FIGMA_API_TOKEN=your_figma_personal_access_token
API_KEY=your_secure_api_key
TRANSPORT_TYPE=stdio

Build the server:
```
npm run build
```
Start the server:
```
npm start
```

Usage Examples

Using with Claude:

Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.

Using with Cursor:

Generate React components for the buttons from my Figma file with key abc123, using tailwind CSS.