A
securityF
licenseA
qualityEnables seamless interaction with Figma via the Model Context Protocol, allowing LLM applications to access, manipulate, and track Figma files, components, and variables.
Last updated -
160
142
The Figma MCP Server enables AI assistants to interact with Figma files through the ModelContextProtocol. With this server, you can:
Add Figma files: Incorporate Figma files into the chat context by providing a URL
View nodes: Retrieve thumbnails for specific nodes using node IDs and file keys
Read comments: Access all comments on a Figma file
Post comments: Add comments to nodes at specified coordinates
Reply to comments: Respond to existing comments using comment IDs
Enables AI assistants to interact with Figma files, providing tools for viewing file content, reading and posting comments, replying to comments, and viewing specific nodes in Figma designs.
Mentioned in a demo link, suggesting integration for sharing visual demonstrations of the MCP server's functionality with Figma files.
Figma MCP Server
A ModelContextProtocol server that enables AI assistants to interact with Figma files. This server provides tools for viewing, commenting, and analyzing Figma designs directly through the ModelContextProtocol.
Features
Add a Figma file to your chat with Claude by providing the url
Read and post comments on Figma files
Setup with Claude
Download and install Claude desktop app from claude.ai/download
Get a Figma API Key (figma.com -> click your name top left -> settings -> Security). Grant
File contentandCommentsscopes.Configure Claude to use the Figma MCP server. If this is your first MCP server, run the following in terminal.
echo '{
"mcpServers": {
"figma-mcp": {
"command": "npx",
"args": ["figma-mcp"],
"env": {
"FIGMA_API_KEY": "<YOUR_API_KEY>"
}
}
}
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json
If it's not, copy the figma-mcp block to your claude_desktop_config.json
Restart Claude Desktop.
Look for the hammer icon with the number of available tools in Claude's interface to confirm the server is running.
Example usage
Start a new chat with claude desktop and paste the following
What's in this figma file?
https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC
Demo of a more realistic usage
https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3
Development Setup
Running with Inspector
For development and debugging purposes, you can use the MCP Inspector tool. The Inspector provides a visual interface for testing and monitoring MCP server interactions.
Visit the Inspector documentation for detailed setup instructions and usage guidelines.
The command to test locally with Inspector is
npx @modelcontextprotocol/inspector npx figma-mcp
Local Development
Clone the repository
Install dependencies:
npm install
Build the project:
npm run build
For development with auto-rebuilding:
npm run watch
Available Tools
The server provides the following tools:
add_figma_file: Add a Figma file to your context by providing its URLview_node: Get a thumbnail for a specific node in a Figma fileread_comments: Get all comments on a Figma filepost_comment: Post a comment on a node in a Figma filereply_to_comment: Reply to an existing comment in a Figma file
Each tool is designed to provide specific functionality for interacting with Figma files through the ModelContextProtocol interface.
Related MCP Servers
- AsecurityFlicenseAqualityA Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.Last updated -184234
- AsecurityFlicenseAqualityA Model Context Protocol server that integrates with Figma's API, allowing interaction with Figma files, comments, components, projects, and webhook management.Last updated -5510
- -securityFlicense-qualityA Model Context Protocol server that connects AI tools and LLMs to Figma designs, enabling them to extract design data, analyze design systems, and generate development documentation.Last updated -1602