Allows AI coding agents to access Figma files and prototypes directly, providing capabilities to retrieve components, specific nodes, and workflow connections from Figma designs using the Figma API.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@figma-mcp show me all components in the design system file"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Allow your AI coding agents to access Figma files & prototypes directly. You can DM me for any issues / improvements: https://x.com/jasonzhou1993
pipx install figma-mcpIn settings, add an MCP server using the command:
figma-mcp --figma-api-key=your_figma_keyOR Add a .cursor/mcp.json file in your project:
{
"mcpServers": {
"figma-python": {
"command": "figma-mcp",
"args": [
"--figma-api-key=your_figma_key"
]
}
}
}mcp_config.json):{
"mcpServers": {
"figma-python": {
"command": "figma-mcp",
"args": [
"--figma-api-key=your_figma_key"
]
}
}
}Related MCP server: figma-developer-mcp
curl -LsSf https://astral.sh/uv/install.sh | sh
uv venv
source .venv/bin/activate
uv syncpython -m figma_mcp.mainGet components available in a Figma file
Args:
file_key (str): The file key found in the shared Figma URL
Returns:
list[dict]: List of components found in the Figma file
Inputs: file_key (required).
Get a specific node from a Figma file
Args:
file_key (str): The file key found in the shared Figma URL, e.g. if url is https://www.figma.com/proto/do4pJqHwNwH1nBrrscu6Ld/Untitled?page-id=0%3A1&node-id=0-3&viewport=361%2C361%2C0.08&t=9SVttILbgMlPWuL0-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=0%3A3, then the file key is do4pJqHwNwH1nBrrscu6Ld
node_id (str): The ID of the node to retrieve, has to be in format x:x, e.g. in url it will be like 0-3, but it should be 0:3
Returns:
dict: The node data if found, empty dict if not found
Inputs: node_id (required), file_key (required).
Get workflows available in a Figma file
Args:
file_key (str): The file key found in the shared Figma URL, e.g. if url is https://www.figma.com/proto/do4pJqHwNwH1nBrrscu6Ld/Untitled?page-id=0%3A1&node-id=0-3&viewport=361%2C361%2C0.08&t=9SVttILbgMlPWuL0-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=0%3A3, then the file key is do4pJqHwNwH1nBrrscu6Ld
Returns:
list[dict]: List of workflow connections found in the Figma file
Inputs: file_key (required).
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 3 tools
Each tool targets a distinct Figma element: components, nodes, and workflows. There is no overlap in their purposes, making it easy for an agent to select the correct tool.
All tools follow a consistent 'get_' + singular noun pattern (get_components, get_node, get_workflow), which is predictable and easy to follow.
With 3 tools, the server is tightly scoped for retrieving key Figma file elements. This number is appropriate for a focused MCP server without being too sparse or excessive.
The tools cover retrieval of components, nodes, and workflows, which are important aspects of a Figma file. However, it lacks tools for pages or styles, which are common use cases, so minor gaps exist.
Connect AI coding agents to Anima Playground, Figma, and your design system.
The Figma MCP server brings Figma design context directly into your AI workflow.
Give AI coding agents access to your Vynix visual feedback, bug reports, and AI diagnosis.
Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.
