TimHolden/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
bash
npm install figma-mcp-server
## Configuration
1. Create a .env file based on .env.example:
env
# Figma API Access Token
FIGMAACCESSTOKEN=yourfigmatoken
# Server Configuration
MCPSERVERPORT=3000
# Debug Configuration
DEBUG=figma-mcp:
2. For Claude Desktop integration:
The server can be configured in your Claude Desktop config file:
macOS: ~/Library/Application Support/Claude/claudedesktopconfig.json
Windows: %APPDATA%\Claude\claudedesktopconfig.json
json
"mcpServers": {
"figma": {
"command": "node",
"args": ["/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"],
"env": {
"FIGMAACCESSTOKEN": "yourtokenhere"
Important Notes:
Use ABSOLUTE paths, not relative paths
On Windows, use double backslashes (\\\\) in paths
Restart Claude Desktop after making configuration changes
## Usage
### Basic Usage
javascript
import { startServer } from 'figma-mcp-server';
const server = await startServer(process.env.FIGMAACCESSTOKEN);
### Available Tools
1. get-file
Retrieve Figma file details
javascript
"name": "get-file",
"arguments": {
"fileKey": "yourfilekey"
2. list-files
List files in a Figma project
javascript
"name": "list-files",
"arguments": {
"projectId": "yourprojectid"
3. create-variables
Create design system variables
javascript
"name": "create-variables",
"arguments": {
"fileKey": "yourfilekey",