figma-mcp
Allows AI coding agents to access Figma files and prototypes directly, enabling interaction with Figma design data.
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-mcpget the design tokens from the main Figma 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.
Figma MCP Python
Allow your AI coding agents to access Figma files & prototypes directly. You can DM me for any issues / improvements: https://x.com/jasonzhou1993
Quick Installation with pipx
pipx install figma-mcpFor Cursor:
In settings, add an MCP server using the command:
figma-mcp --figma-api-key=your_figma_keyOR Add a
.cursor/mcp.jsonfile in your project:
{
"mcpServers": {
"figma-python": {
"command": "figma-mcp",
"args": [
"--figma-api-key=your_figma_key"
]
}
}
}For other IDEs like Windsurf, use an MCP configuration file (e.g., mcp_config.json):
{
"mcpServers": {
"figma-python": {
"command": "figma-mcp",
"args": [
"--figma-api-key=your_figma_key"
]
}
}
}Related MCP server: Framelink Figma MCP Server
Install uv and set up the environment
curl -LsSf https://astral.sh/uv/install.sh | sh
uv venv
source .venv/bin/activate
uv syncTest locally
python -m figma_mcp.mainThis server cannot be deployed
Maintenance
Related MCP Connectors
The Figma MCP server brings Figma design context directly into your AI workflow.
Connect AI coding agents to Anima Playground, Figma, and your design system.
Give AI coding agents access to your Vynix visual feedback, bug reports, and AI diagnosis.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceGives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.60,727 npmMIT
- AlicenseNot gradedqualityDmaintenanceProvides AI coding agents with access to Figma design data through the Figma API. Enables accurate one-shot implementation of designs in any framework by translating Figma files into simplified layout and styling information.5 npm1MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to interact with Figma designs using natural language commands, supporting file analysis, component extraction, asset export, comment management, and design system queries through the Figma API.1,225 npm1ISC
- AlicenseNot gradedqualityDmaintenanceEnables coding agents like Cursor to access Figma design data, fetch layout and styling information, and implement designs in any framework.60,727 npmMIT