Figma
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
- Repository
- TimHolden/figma-mcp-server
Explore
- 🔑 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
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- 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
FigmaCommand (node, npx, python, etc.)nodeArguments-
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.
-
Argument 1
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
- Node.js 18.x or higher
- Figma access token with appropriate permissions
- Basic understanding of MCP (Model Context Protocol)
MCP_SERVER_PORT=3000
DEBUG=figma-mcp:*
2. For Claude Desktop integration:
The server can be configured in your Claude Desktop config file:
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "your_token_here"
}
}
}
}
Important Notes:
- Use ABSOLUTE paths, not relative paths
- On Windows, use double backslashes (\\\\) in paths
- Restart Claude Desktop after making configuration changes
import { startServer } from 'figma-mcp-server';
const server = await startServer(process.env.FIGMA_ACCESS_TOKEN);
```
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)
1. get-file
- Retrieve Figma file details
{
"name": "get-file",
"arguments": {
"fileKey": "your_file_key"
}
}
2. list-files
- List files in a Figma project
{
"name": "list-files",
"arguments": {
"projectId": "your_project_id"
}
}
3. create-variables
- Create design system variables
{
"name": "create-variables",
"arguments": {
"fileKey": "your_file_key",
"variables": [
{
"name": "primary-color",
"type": "COLOR",
"value": "#0066FF"
}
]
}
}
4. create-theme
- Create and configure themes
{
"name": "create-theme",
"arguments": {
"fileKey": "your_file_key",
"name": "Dark Theme",
"modes": [
{
"name": "dark",
"variables": [
{
"variableId": "123",
"value": "#000000"
}
]
}
]
}
}
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"
}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
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
