Figma MCP server

This Node.js-based MCP server provides a bridge between Figma designs and AI assistants, converting Figma designs into a pseudo-code structure that is optimized for LLMs to understand design context.

Installation

Prerequisites

• Node.js (v22)
• npm
• Figma Personal Access Token

Quick Setup in MCP Clients

Add the server to your MCP client configuration:

"Figma MCP Server": {
  "command": "npx",
  "args": ["-y", "figma-codegen-mcp", "--figma_api_key=<YOUR-FIGMA-PERSONAL-ACCESS-TOKEN>"]
}

Manual Installation

If you want to run the server locally:

# Clone the repository
git clone <repository-url>
cd figma-mcp-server

# Install dependencies
npm install

# Create and configure environment variables
cp .env.example .env
# Edit .env file to add your FIGMA_API_TOKEN

# Build the project
npm run build

# Start the server
npm start

For development with hot reloading:

npm run dev

Usage

The Figma MCP Server provides two main tools for interacting with Figma designs:

1. Fetch Figma Node Image

This tool fetches a PNG image of any Figma node or frame and returns it as base64 data.

Parameters:

• fileKey (string, required): The key from the Figma file URL
• nodeId (string, required): The ID of the specific node to capture

Returns: Base64-encoded PNG image with MIME type

Use Cases:

• Getting visual context of design components
• Creating documentation with actual design screenshots

2. Generate Pseudo-Code From Figma Frame

This tool analyzes Figma design elements and generates corresponding pseudo HTML and CSS code.

Parameters:

• fileKey (string, required): The key from the Figma file URL
• nodeId (string, required): The ID of the frame/component to convert

Returns: Formatted text containing:

• CSS styles
• JSX component structure
• Semantic HTML elements
• Clean, readable code formatting

Use Cases:

• Converting Figma designs to pseudo-React components
• Providing better code-like representation of Figma designs to LLMs
• Integrating with design systems
• Rapid prototyping
• Design-to-code workflow automation

Understanding Figma URLs

When sharing Figma designs, the URL contains the required parameters:

https://www.figma.com/design/ABC123XYZ/My-Design?node-id=1200%3A23&t=randomstring
                          ↑                        ↑
                      fileKey                    nodeId (URL encoded)

• File Key: ABC123XYZ (the part after /design/ or /file/)
• Node ID: 1200:23 (from the node-id parameter, URL decoded)

The MCP client can automatically extract these parameters from a Figma URL to call the appropriate tools.

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-Server" '{"command":"npx","args":["-y","figma-codegen-mcp","--figma_api_key=<YOUR-FIGMA-PERSONAL-ACCESS-TOKEN>"]}'

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 Server": {
            "command": "npx",
            "args": [
                "-y",
                "figma-codegen-mcp",
                "--figma_api_key=<YOUR-FIGMA-PERSONAL-ACCESS-TOKEN>"
            ]
        }
    }
}

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 Server": {
            "command": "npx",
            "args": [
                "-y",
                "figma-codegen-mcp",
                "--figma_api_key=<YOUR-FIGMA-PERSONAL-ACCESS-TOKEN>"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect