- Home
- MCP servers
- Figma
Figma
- typescript
65
GitHub Stars
typescript
Language
6 months ago
First Indexed
2 months ago
Catalog Refreshed
Documentation & install
Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.
Installation
Add the following to your MCP client configuration file.
Configuration
View docs{
"mcpServers": {
"thirdstrandstudio-mcp-figma": {
"command": "npx",
"args": [
"-y",
"@thirdstrandstudio/mcp-figma",
"--figma-token",
"YOUR_FIGMA_TOKEN"
],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
}
}
}
}You can use this Figma MCP Server to access the Figma API through a unified set of MCP tools. It enables you to retrieve files, nodes, images, comments, team data, components, styles, webhooks, and analytics by issuing MCP calls from your client. This server is designed to work with a Figma API token and is structured to handle large files by adjusting depth when needed.
How to use
To work with this MCP server, connect your MCP client to the local or remote server and start issuing tool calls that correspond to Figma API methods. You can fetch files, render images, read and post comments, manage webhooks, and access components, styles, and analytics. Use the provided tool names such as figma_get_file, figma_get_comments, figma_post_comment, figma_post_webhook, and more to perform the corresponding Figma operations. If you deal with large Figma files, you may need to increase depth for certain calls and then adjust as the data retrieval demands.
How to install
Prerequisites: Install Node.js (version 16 or later) and a package manager such as npm or yarn.
# 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
Additional setup and usage notes
You must provide a Figma API token to authenticate requests. There are multiple ways to configure the token depending on your workflow.
Environment variable method: create a .env file at the project root or export the token in your shell using FIGMA_API_KEY=your_figma_api_key.
Command line argument method: when starting the server, pass the token as a command-line argument using either the long form or the short form.
Claude Desktop integration examples show two local MCP configurations you can use to run the server from your Claude environment. One uses npx to run the package with the token, and the other runs Node.js directly with an environment variable or command-line token.
Examples
Get a Figma file by key using an MCP client: use the figma_get_file tool with the appropriate fileKey.
Development
Development commands include installing dependencies, starting in development mode, and building the server. You can run the server with a Figma API token to begin making calls.
Available tools
figma_get_me
Get information about the current authenticated user.
figma_get_file
Retrieve a Figma file by its key.
figma_get_file_nodes
Fetch specific nodes from a Figma file by node IDs.
figma_get_images
Render images from a Figma file for specified nodes/pages.
figma_get_image_fills
Retrieve image fill data for a file.
figma_get_file_versions
Obtain the version history of a Figma file.
figma_get_comments
Get comments from a Figma file.
figma_post_comment
Add a comment to a Figma file.
figma_delete_comment
Delete a comment from a Figma file.
figma_get_comment_reactions
Get reactions for a specific comment.
figma_post_comment_reaction
Add a reaction to a comment.
figma_delete_comment_reaction
Remove a reaction from a comment.
figma_get_team_projects
List projects within a team.
figma_get_project_files
List files within a project.
figma_get_team_components
List components in a team.
figma_get_file_components
List components in a file.
figma_get_component
Get a component by key.
figma_get_team_component_sets
List component sets in a team.
figma_get_file_component_sets
List component sets in a file.
figma_get_component_set
Get a component set by key.
figma_get_team_styles
List styles in a team.
figma_get_file_styles
List styles in a file.
figma_get_style
Get a style by key.
figma_post_webhook
Create a webhook.
figma_get_webhook
Retrieve a webhook by ID.
figma_update_webhook
Update a webhook.
figma_delete_webhook
Delete a webhook.
figma_get_team_webhooks
List webhooks for a team.
figma_get_library_analytics_component_usages
Get library analytics component usage data.
figma_get_library_analytics_style_usages
Get library analytics style usage data.
figma_get_library_analytics_variable_usages
Get library analytics variable usage data.