figma-ui-mcp — Claude Code MCP server
A two-way MCP bridge for Figma: an AI client can draw UI on the canvas and read existing designs as structured data.
claude mcp add figma-ui-mcp -- npx -y figma-ui-mcpWhat figma-ui-mcp does
figma-ui-mcp connects an MCP client to Figma Desktop through a local HTTP bridge at localhost:38451. The server queues operations, while the Figma plugin applies them to the open document. Design data can travel back as node trees, colors, typography details, or screenshots.
The server exposes figma_write for frames, shapes, text, and prototypes created with JavaScript. figma_read extracts design data, while figma_status checks the plugin connection and active sessions. figma_docs provides API help, and figma_rules builds a design-system rule sheet. Read operations also cover CSS, components, variants, and resolved variable values when those exist in the file.
Figma Desktop is required because the web app cannot let the plugin reach localhost. A Figma API key is not needed; communication stays on the local machine.
What it helps with
- draw an interface screen in Figma from a prompt
- inspect the structure of an existing design
- extract CSS and design tokens from a node
- check the plugin connection and active sessions
Example prompts for the agent
- Use
figma_writeto draw a profile screen in Figma with frames, text, and buttons. - Use
figma_readto inspect the selected frame and return its node tree, colors, typography, and CSS. - Use
figma_statusto check the Figma plugin connection and active sessions.
How to install figma-ui-mcp
Platform CLI
claude mcp add figma-ui-mcp -- npx -y figma-ui-mcpPlatform CLI
codex mcp add figma-ui-mcp -- npx -y figma-ui-mcpConfig file
{
"mcpServers": {
"figma-ui-mcp": {
"command": "npx",
"args": [
"-y",
"figma-ui-mcp"
]
}
}
}Config file
{
"servers": {
"figma-ui-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-ui-mcp"
]
}
}
}Platform CLI
gemini mcp add figma-ui-mcp npx -y figma-ui-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about figma-ui-mcp
How do I install figma-ui-mcp in Claude Code?
Run claude mcp add figma-ui-mcp -- npx -y figma-ui-mcp, then open Figma Desktop and launch the plugin.
What does figma-ui-mcp do?
It passes requests between an AI client and Figma Desktop. The server can create canvas elements, inspect existing nodes, and return design data for code.
Do I need a Figma API key to use it?
No. The bridge uses local communication through localhost:38451, but it requires Figma Desktop rather than the Figma web app.
