Figma MCP Server
About
The Figma MCP Server is a Model Context Protocol (MCP) server that integrates with Figma’s API, enabling users to interact programmatically with Figma files, comments, components, projects, styles, and webhooks. It is built for developers and designers who want to automate…
Explore
- File Operations
- Get file information
- Get file version history
- Get file components
- Comment Management
- List comments in files
- Add new comments
- Delete comments
- Project & Team Features
- List team projects
- Get project files
- Get published styles
- Webhook Management
- Create webhooks
- List existing webhooks
- Delete webhooks
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
Figma MCP ServerCommand (node, npx, python, etc.)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
From the repository
1. Clone the repository
2. Install dependencies:
npm install
3. Build the server:
npm run build
// Example using the MCP tool to get file information
<use_mcp_tool>
<server_name>figma</server_name>
<tool_name>get_file</tool_name>
<arguments>
{
"file_key": "your-file-key"
}
</arguments>
</use_mcp_tool>
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"figma mcp server": {
"figma": {
"command": "node",
"args": [
"path/to/figma-server/build/index.js"
],
"env": {
"FIGMA_ACCESS_TOKEN": ""
}
}
}
}
}McpServers
{
"figma": {
"command": "node",
"args": [
"path/to/figma-server/build/index.js"
],
"env": {
"FIGMA_ACCESS_TOKEN": ""
}
}
}A Model Context Protocol (MCP) server that provides integration with Figma's API, allowing you to interact with Figma files, comments, components, and more.
Features
- File Operations
- Get file information
- Get file version history
- Get file components
- Comment Management
- List comments in files
- Add new comments
- Delete comments
- Project & Team Features
- List team projects
- Get project files
- Get published styles
- Webhook Management
- Create webhooks
- List existing webhooks
- Delete webhooks
Installation
1. Clone the repository
2. Install dependencies:
npm install
3. Build the server:
npm run build
Configuration
Configure the server in your MCP settings file with your Figma access token:
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["path/to/figma-server/build/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "your-access-token-here"
},
"disabled": false,
"alwaysAllow": []
}
}
}
Available Tools
File Operations
get_file
Get information about a Figma file{
"file_key": "string"
}
get_file_versions
Get version history of a file{
"file_key": "string"
}
get_file_components
Get components in a file{
"file_key": "string"
}
Comment Management
get_file_comments
Get comments from a file{
"file_key": "string"
}
post_comment
Post a comment to a file{
"file_key": "string",
"message": "string"
}
delete_comment
Delete a comment from a file{
"file_key": "string",
"comment_id": "string"
}
Project & Team Operations
get_team_projects
Get projects for a team{
"team_id": "string"
}
get_project_files
Get files in a project{
"project_id": "string"
}
get_component_styles
Get published styles{
"team_id": "string"
}
Webhook Management
create_webhook
Create a webhook{
"team_id": "string",
"event_type": "string",
"callback_url": "string"
}
get_webhooks
List webhooks{
"team_id": "string"
}
delete_webhook
Delete a webhook{
"webhook_id": "string"
}
Usage Example
// Example using the MCP tool to get file information
<use_mcp_tool>
<server_name>figma</server_name>
<tool_name>get_file</tool_name>
<arguments>
{
"file_key": "your-file-key"
}
</arguments>
</use_mcp_tool>
License
MIT
Contributing
1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
