Figma Context MCP server for AI agents

Figma Context MCP is a server that connects your Figma designs with AI coding assistants like Cursor, Windsurf, and Cline. By providing direct access to Figma design data, AI tools can generate more accurate code on the first try, eliminating the limitations of screenshots.

Installation

Prerequisites

Node.js >= 18.0.0
A Figma account with API access

Getting Started

Via Smithery (Recommended)

npx -y @smithery/cli install @1yhy/Figma-Context-MCP --client claude

Via npm

npm install -g @yhy2001/figma-mcp-server

From Source

git clone https://github.com/1yhy/Figma-Context-MCP.git
cd Figma-Context-MCP
pnpm install
pnpm build

Configuration

1. Get Figma API Token

Go to Figma Account Settings
Scroll to "Personal access tokens"
Click "Create new token"
Copy the token

2. Configure Your AI Tool

Cursor / Windsurf / Cline

Add to your MCP configuration file:

{
  "mcpServers": {
    "Figma": {
      "command": "npx",
      "args": ["-y", "@yhy2001/figma-mcp-server", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "your-figma-api-key"
      }
    }
  }
}

HTTP/SSE Mode (Local Development)

# From source (development)
cp .env.example .env  # Add FIGMA_API_KEY to .env
pnpm install && pnpm build
pnpm start            # Starts on port 3333

# Or with environment variable
FIGMA_API_KEY=<your-key> pnpm start

# Or via global install
figma-mcp --figma-api-key=<your-key> --port=3333

# Connect via SSE
# URL: http://localhost:3333/sse

Usage

Once configured, you can ask your AI assistant to implement designs by providing the Figma link:

Please implement this Figma design: https://www.figma.com/design/abc123/MyDesign?node-id=1:234

Use React and Tailwind CSS.

MCP Capabilities

Tools

Tool	Description	Parameters
`get_figma_data`	Fetch simplified design data	`fileKey`, `nodeId?`, `depth?`
`download_figma_images`	Download images and icons	`fileKey`, `nodes[]`, `localPath`

Prompts

The server includes built-in professional prompt templates:

Prompt	Description	Parameters
`design_to_code`	Complete design-to-code workflow	`framework?`, `includeResponsive?`
`analyze_components`	Analyze component structure	-
`extract_styles`	Extract design tokens	-

Resources

Lightweight data access options:

# Get file metadata (~200 tokens)
figma://file/abc123

# Get design tokens (~500 tokens)
figma://file/abc123/styles

# Get component list (~300 tokens)
figma://file/abc123/components

# Get asset inventory (~400 tokens)
figma://file/abc123/assets

Command Line Options

Option	Description	Default
`--figma-api-key`	Figma API token	Required
`--port`	Server port for HTTP mode	3333
`--stdio`	Run in stdio mode	false
`--help`	Show help	-

Key Features

Smart Layout Detection: Automatically infers Flexbox/Grid layouts
Icon Merging: Intelligently combines vector layers into exportable icons
CSS Generation: Converts Figma styles to clean CSS
Image Export: Downloads images and icons with proper naming
Multi-layer Caching: Reduces API calls with memory and disk caching
Design-to-Code Prompts: Professional templates for AI code generation
Lightweight Resource Access: Low-token data access options

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "Figma-MCP" '{"command":"npx","args":["figma-mcp","--figma-api-key=<your-figma-api-key>","--stdio"]}'

See the official Claude Code MCP documentation for more details.

For 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 > Tools & Integrations and click "New MCP Server".

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

{
    "mcpServers": {
        "Figma MCP": {
            "command": "npx",
            "args": [
                "figma-mcp",
                "--figma-api-key=<your-figma-api-key>",
                "--stdio"
            ]
        }
    }
}

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 explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "Figma MCP": {
            "command": "npx",
            "args": [
                "figma-mcp",
                "--figma-api-key=<your-figma-api-key>",
                "--stdio"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect