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-fileandlist-filestools 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
Configuration
- Create a
.envfile based on.env.example:
- 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
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
Available Tools
- get-file
- list-files
- create-variables
- create-theme
API Documentation
Server Methods
startServer(figmaToken: string, debug?: boolean, port?: number)
Tool Schemas
All tool inputs are validated using Zod schemas:
Error Handling
The server provides detailed error messages and proper error codes:
- Invalid token: 403 with specific error message
- Rate limiting: 429 with reset time
- Validation errors: 400 with field-specific details
- Server errors: 500 with error tracking
Limitations & Known Issues
API Restrictions
- Read-Only Operations
- Rate Limiting
- Cache Management
- Authentication
- Technical Implementation
Contributing
- Fork the repository
- Create a feature branch
- Make your changes with tests
- Submit a pull request
Please follow our coding standards:
- TypeScript strict mode
- ESLint configuration
- Jest for testing
- Comprehensive error handling
License
MIT License - See LICENSE file for details
Troubleshooting
See TROUBLESHOOTING.md for a comprehensive troubleshooting guide.
Common Issues
- JSON Connection Errors
- Authentication Issues
- Server Not Starting
For more detailed debugging steps and solutions, refer to the troubleshooting guide.
Support
- GitHub Issues: Report a bug
- Documentation: Wiki
- Discord: Join our community
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-fileandlist-filestools 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
Configuration
- Create a
.envfile based on.env.example:
- 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
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
Available Tools
- get-file
- list-files
- create-variables
- create-theme
API Documentation
Server Methods
startServer(figmaToken: string, debug?: boolean, port?: number)
Tool Schemas
All tool inputs are validated using Zod schemas:
Error Handling
The server provides detailed error messages and proper error codes:
- Invalid token: 403 with specific error message
- Rate limiting: 429 with reset time
- Validation errors: 400 with field-specific details
- Server errors: 500 with error tracking
Limitations & Known Issues
API Restrictions
- Read-Only Operations
- Rate Limiting
- Cache Management
- Authentication
- Technical Implementation
Contributing
- Fork the repository
- Create a feature branch
- Make your changes with tests
- Submit a pull request
Please follow our coding standards:
- TypeScript strict mode
- ESLint configuration
- Jest for testing
- Comprehensive error handling
License
MIT License - See LICENSE file for details
Troubleshooting
See TROUBLESHOOTING.md for a comprehensive troubleshooting guide.
Common Issues
- JSON Connection Errors
- Authentication Issues
- Server Not Starting
For more detailed debugging steps and solutions, refer to the troubleshooting guide.
Support
- GitHub Issues: Report a bug
- Documentation: Wiki
- Discord: Join our community