A Model Context Protocol (MCP) server that provides Figma REST API automation capabilities. This server enables AI assistants like Claude/Cursor/ChatGPT to manage and interact with Figma files, retrieve design data, and export assets.
This package minimizes the amount of tools to help AI Agents pick the right tool for a given prompt.
- 🎨 File Management - List and inspect Figma files and projects
- 📊 Design Data Access - Get comprehensive file and node information
- 🖼️ Asset Export - Export nodes as images (SVG, PNG, JPG)
- 🚀 Dual Transport - HTTP and stdio (for Claude Code)
For detailed information about available tools, see tools.md.
- Figma REST MCP Server
- Node.js 18 or higher
- Figma Access Token (Personal or OAuth)
- npm or yarn
Configure the server behavior using environment variables:
| Variable | Description | Default | Options |
|---|---|---|---|
FIGMA_ACCESS_TOKEN |
Figma API access token (required) | None | Any valid token |
FIGMA_BASE_URL |
Figma API base URL | https://api.figma.com |
Any valid URL |
PORT |
HTTP server port | 4202 |
Any valid port number |
MCP_AUTH_TOKEN |
Authentication token for HTTP server (optional) | None | Any string |
To use this server with Cursor/Claude Code/Claude Desktop, add it to your MCP settings file.
Configuration:
{
"mcpServers": {
"figma-rest": {
"command": "npx",
"args": [
"figma-rest-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_xxxxxx_your_figma_token_here"
}
}
}
}To get your Figma Access Token: https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
Note: After updating the configuration, restart Claude Code/Desktop for changes to take effect.
Important: Ensure you have a valid Figma Access Token set in the environment variables.
Note: After updating the configuration, restart Cursor for changes to take effect.
Important: Never commit your Figma Access Token to version control.
Start the HTTP server:
npm install
FIGMA_ACCESS_TOKEN=your_token npm start
# or with custom port
FIGMA_ACCESS_TOKEN=your_token PORT=4202 npm start
# With authentication (recommended)
FIGMA_ACCESS_TOKEN=your_token MCP_AUTH_TOKEN=your-secret-token npm startThe server will listen on http://localhost:4202/mcp (or your custom port).
Authentication (Optional):
You can secure the HTTP server with token-based authentication by setting the MCP_AUTH_TOKEN environment variable. If set, all requests must include the token in the Authorization header.
Example HTTP Request (with authentication):
curl -X POST http://localhost:4202/mcp \
-H "Content-Type: application/json" \
-H "Authorization: Bearer your-secret-token" \
-d '{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "list_files",
"arguments": {}
}
}'# Install dependencies
npm install
# Start HTTP server with auto-reload
npm run dev
# Start stdio server with auto-reload
npm run dev:stdio
# Build TypeScript to JavaScript
npm run build1. Missing Figma Access Token
Error: FIGMA_ACCESS_TOKEN environment variable is required
Solution: Set your Figma Access Token in the environment variables or configuration file.
2. Invalid Figma Access Token
Error: Figma API error: 403 Forbidden
Solution: Verify your token is valid and has the necessary permissions. Generate a new token if needed.
3. Node.js version too old
Error: Node.js 18 or higher required
Solution: Update Node.js to version 18 or higher.
4. File not found
Error: Figma API error: 404 Not Found
Solution: Verify the file key or URL is correct with get_file_info.
5. Port already in use (HTTP mode)
Error: listen EADDRINUSE: address already in use :::4202
Solution: Change the port with PORT=3001 npm start
6. Rate limiting
Error: Figma API error: 429 Too Many Requests
Solution: Wait a moment before retrying. Figma has rate limits on API requests.
For stdio mode, logs are written to stderr and appear in Claude Code logs:
- macOS:
~/Library/Logs/Claude/mcp-server-figma-rest.log - Linux:
~/.config/Claude/logs/mcp-server-figma-rest.log
For HTTP mode, logs appear in the terminal where you started the server.
Contributions are welcome! Please:
- Fork the repository
- Create a feature branch
- Make your changes
- Run
npm run buildto ensure it compiles - Test your changes
- Submit a pull request
MIT
Built with:
- Figma REST API - Figma API
- Model Context Protocol SDK - MCP implementation
- Zod - Schema validation
- Express - HTTP server
