Figma

by Tim Holden

115 stars

1.1k downloads

Not rated

GitHub Website

About

Enables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.

Details

Author: Tim Holden
Repository: TimHolden/figma-mcp-server
GitHub stars: 115
Downloads: 1,090
Categories: Developer Tools, Other, Design, Workplace, Media

- Secure authentication with Figma API
- Read file details and list project files
- Performance optimised with LRU caching and rate‑limit handling
- Health checks, usage statistics, and error tracking
- Both stdio and SSE transport protocols supported
- Designed for future variable, theme, and reference management

Setting up with Highlight

Follow these steps to add this server as a custom Highlight plugin:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below
Plugin Name Figma

Command (node, npx, python, etc.) node
Arguments
- Argument 1 /ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js
Environment
- FIGMA_ACCESS_TOKEN your_token_here
Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

JSON

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

From the repository

Install the npm package, create a .env file with your FIGMA_ACCESS_TOKEN and optionally set MCP_SERVER_PORT and DEBUG flags, then start the server. For Claude Desktop, add an entry in the claude_desktop_config.json using an absolute path to the compiled dist/index.js. Invoke tools like get-file, list-files, create-variables, or create-theme through MCP client requests. (Note: write operations are limited by Figma API restrictions – personal access tokens only support read operations.)

`get-file`

Retrieve Figma file details. Parameters: fileKey (string)

`list-files`

List files in a Figma project. Parameters: projectId (string)

`create-variables`

Create design system variables. Parameters: fileKey (string), variables (array of objects with name, type, value)

`create-theme`

Create and configure themes. Parameters: fileKey (string), name (string), modes (array of objects with name and variables)

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "figma": {
            "env": {
                "FIGMA_ACCESS_TOKEN": "your_token_here"
            },
            "args": [
                "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
            ],
            "command": "node"
        }
    }
}

Linux

{
    "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
    },
    "args": [
        "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
    ],
    "command": "node"
}

Macos

{
    "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
    },
    "args": [
        "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
    ],
    "command": "node"
}

Windows

{
    "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
    },
    "args": [
        "/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"
    ],
    "command": "node"
}

Figma MCP Server

A Model Context Protocol (MCP) server that provides integration with Figma's API through Claude and other MCP-compatible clients. Currently supports read-only access to Figma files and projects, with server-side architecture capable of supporting more advanced design token and theme management features (pending Figma API enhancements or plugin development).

Project Status

Current Progress

- ✅ Core Implementation: Successfully built a TypeScript server following the Model Context Protocol (MCP)
- ✅ Claude Desktop Integration: Tested and functional with Claude Desktop
- ✅ Read Operations: Working get-file and list-files tools for Figma file access
- ✅ Server Architecture: Caching system, error handling, and stats monitoring implemented
- ✅ Transport Protocols: Both stdio and SSE transport mechanisms supported

Potential Full Functionality

The server has been designed with code to support these features (currently limited by API restrictions):

- Variable Management: Create, read, update, and delete design tokens (variables)
- Reference Handling: Create and validate relationships between tokens
- Theme Management: Create themes with multiple modes (e.g., light/dark)
- Dependency Analysis: Detect and prevent circular references
- Batch Operations: Perform bulk actions on variables and themes

With Figma plugin development or expanded API access, these features could be fully enabled.

Features

- 🔑 Secure authentication with Figma API
- 📁 File operations (read, list)
- 🎨 Design system management
- Variable creation and management
- Theme creation and configuration
- Reference handling and validation
- 🚀 Performance optimized
- LRU caching
- Rate limit handling
- Connection pooling
- 📊 Comprehensive monitoring
- Health checks
- Usage statistics
- Error tracking

Prerequisites

- Node.js 18.x or higher
- Figma access token with appropriate permissions
- Basic understanding of MCP (Model Context Protocol)

Installation

npm install figma-mcp-server

Configuration

1. Create a .env file based on .env.example:

```env

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

get-file

list-files

create-variables

create-theme

Claude Desktop / Cursor

Linux

Macos

Windows

Figma MCP Server

Project Status

Current Progress

Potential Full Functionality

Features

Prerequisites

Installation

Configuration

Install

More like this

Sequential Thinking

Sentry

Github

Filesystem

EverArt

Google Drive

`get-file`

`list-files`

`create-variables`

`create-theme`