Figma MCP Server
MCP Server for interacting with the Figma API. This server provides a complete set of Figma API methods through the Model Context Protocol. Sometimes on large figma files you might have to tell it to use depth = 1 for figma_get_file then increase when it needs more.
Tools
This server implements all Figma API methods as MCP tools:
User Methods
figma_get_me- Get the current user
File Methods
figma_get_file- Get a Figma file by keyfigma_get_file_nodes- Get specific nodes from a Figma filefigma_get_images- Render images from a Figma filefigma_get_image_fills- Get image fills in a Figma filefigma_get_file_versions- Get version history of a Figma file
Comment Methods
figma_get_comments- Get comments in a Figma filefigma_post_comment- Add a comment to a Figma filefigma_delete_comment- Delete a comment from a Figma filefigma_get_comment_reactions- Get reactions for a commentfigma_post_comment_reaction- Add a reaction to a commentfigma_delete_comment_reaction- Delete a reaction from a comment
Team and Project Methods
figma_get_team_projects- Get projects in a teamfigma_get_project_files- Get files in a project
Component Methods
figma_get_team_components- Get components in a teamfigma_get_file_components- Get components in a filefigma_get_component- Get a component by keyfigma_get_team_component_sets- Get component sets in a teamfigma_get_file_component_sets- Get component sets in a filefigma_get_component_set- Get a component set by key
Style Methods
figma_get_team_styles- Get styles in a teamfigma_get_file_styles- Get styles in a filefigma_get_style- Get a style by key
Webhook Methods (V2 API)
figma_post_webhook- Create a webhookfigma_get_webhook- Get a webhook by IDfigma_update_webhook- Update a webhookfigma_delete_webhook- Delete a webhookfigma_get_team_webhooks- Get webhooks for a team
Library Analytics Methods
figma_get_library_analytics_component_usages- Get library analytics component usage datafigma_get_library_analytics_style_usages- Get library analytics style usage datafigma_get_library_analytics_variable_usages- Get library analytics variable usage data
Installation
Installing via Smithery
To install mcp-figma for Claude Desktop automatically via Smithery:
npx @smithery/cli@latest install @thirdstrandstudio/mcp-figma --client claude
Prerequisites
- Node.js (v16 or later)
- npm or yarn
Installing the package
# Clone the repository
git clone https://github.com/thirdstrandstudio/mcp-figma.git
cd mcp-figma
# Install dependencies
npm install
# Build the package
npm run build
Setup
To use this MCP server, you need to set up your Figma API token. You can do this in one of three ways:
1. Environment Variable
Create a .env file in the project root or set the environment variable directly:
FIGMA_API_KEY=your_figma_api_key
2. Command Line Arguments
When starting the server, you can pass your Figma API token as a command-line argument:
# Using the long form
node dist/index.js --figma-token YOUR_FIGMA_TOKEN
# Or using the short form
node dist/index.js -ft YOUR_FIGMA_TOKEN
Usage with Claude Desktop
Add the following to your claude_desktop_config.json:
Using npx
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["@thirdstrandstudio/mcp-figma", "--figma-token", "your_figma_api_key"]
}
}
}
Direct Node.js (with environment variable)
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["/path/to/mcp-figma/dist/index.js"],
"env": {
"FIGMA_API_KEY": "your_figma_api_key"
}
}
}
}
Direct Node.js (with command-line argument)
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["/path/to/mcp-figma/dist/index.js", "--figma-token", "your_figma_api_key"]
}
}
}
Replace /path/to/mcp-figma with the actual path to your repository.
Examples
Get a Figma File
// Get a Figma file
const result = await callTool("figma_get_file", {
fileKey: "abcXYZ123"
});
Get Comments from a File
// Get comments from a file
const comments = await callTool("figma_get_comments", {
fileKey: "abcXYZ123",
as_md: true
});
Create a Webhook
// Create a webhook
const webhook = await callTool("figma_post_webhook", {
event_type: "FILE_UPDATE",
team_id: "12345",
endpoint: "https://example.com/webhook",
passcode: "your_passcode_here",
description: "File update webhook"
});
Development
# Install dependencies
npm install
# Start the server in development mode
npm start
# Build the server
npm run build
# Run with a Figma API token
npm start -- --figma-token YOUR_FIGMA_TOKEN
License
This MCP server is licensed under the MIT License. This means you are free to use, modify, and distribute the software, subject to the terms and conditions of the MIT License. For more details, please see the LICENSE file in the project repository.
