What is figma-ui-mcp?
figma-ui-mcp is a two-way MCP bridge for Figma. An AI coding agent writes frames, shapes and text onto the canvas through a Figma Desktop plugin, and reads node trees, colors, typography and CSS back out. It needs no Figma API key.
It is a bidirectional Figma bridge for Model Context Protocol clients. The agent can write to Figma, drawing frames, shapes, text and prototypes, and read from it, pulling node trees, colors and typography. A plugin inside Figma Desktop does the actual work.
How the bridge works
The MCP server runs a small HTTP server on localhost port 38451. The Figma plugin long-polls it for work, runs the operations against the open document, and sends results back. Because everything stays on localhost, no Figma API key is needed.
Figma Desktop is required. Figma's web app does not allow localhost network access, so the plugin cannot talk to the server from a browser tab.
What you can do with it
- Draw a screen from a prompt, then refine it in Figma.
- Read a design as AI-ready context, including flex layout, token-resolved colors and component variants.
- Export ready-to-paste CSS for a node.
- Generate a rule sheet of tokens, typography and components for your project.
Best for
- Designers and developers who want an agent working directly on a Figma file.
- Teams moving a finished design toward code. If you prefer a different bridge, compare Figma Unified MCP and Figma Relai MCP.
Use it with UiChemy
After the design is settled in Figma, UiChemy's Figma to WordPress converts the frames into editable Elementor or Gutenberg pages. Get Started at uichemy.com.
Connect figma-ui-mcp: Draw and Read Figma with an AI Agent to your AI client
claude mcp add figma-ui-mcp -- npx figma-ui-mcpAdd the server
Run the claude mcp add command above, or paste the JSON config into your client's MCP settings.
Install the plugin
Load the Figma plugin in Figma Desktop so it can reach the localhost bridge.
Check the connection
Ask the agent to run figma_status to confirm the plugin is connected and see active sessions.
Client configuration
{
"mcpServers": {
"figma-ui-mcp": {
"command": "npx",
"args": ["-y", "figma-ui-mcp"]
}
}
}Endpoints and ports
http://localhost:38451HTTP long polling between the server and the Figma pluginWhat you can do with it
- Write to the canvasCreate frames, shapes, text and prototypes from code the agent writes.
- Read designs backPull node trees, colors, typography and screenshots as structured data.
- Design context for codeget_design_context returns flex layout, token-resolved colors and component instances in one call.
- Component mapList every component instance in a frame with its set name, variant label and suggested import path.
- CSS exportget_css returns a CSS string for a node covering layout, typography, fill, border and shadow.
- Multiple files at onceSeveral Figma files can connect together, each routed by session ID.
Tools it exposes
figma_write
Draws frames, shapes, text and prototypes by running JavaScript against the Figma API.
figma_read
Extracts node trees, colors, typography and screenshots.
figma_status
Checks plugin connection and lists active sessions.
figma_docs
Returns the API reference with examples.
figma_rules
Builds a design system rule sheet covering tokens, typography and components.
Frequently asked questions
What is figma-ui-mcp?
It is an open-source MCP server and Figma plugin that let an AI coding agent both draw on the Figma canvas and read existing designs back as structured data. It works with Claude Code, Cursor, VS Code, Windsurf and other MCP clients, and needs no Figma API key.
Does figma-ui-mcp need a Figma API key?
No. The plugin and server talk over a localhost HTTP connection, so there is no API key and no Figma REST rate limit involved. The trade-off is that Figma Desktop must be running, because the browser version blocks localhost access.
Does it work with Figma in the browser?
No. The plugin communicates with the server over localhost, and Figma's web app does not allow localhost network access. You need the Figma Desktop app with the plugin running in the file you want the agent to work on. Open the file you want the agent to edit first.
How do I install figma-ui-mcp in Claude Code?
Run claude mcp add figma-ui-mcp -- npx figma-ui-mcp, or add --scope user to make it available in every project. Then load the Figma plugin in Figma Desktop and ask the agent to check figma_status. Run the plugin in each file you want to use.
Which AI coding agents does it support?
The README lists Claude Code and Antigravity as tested, and Cursor, VS Code, Windsurf and Zed as compatible. Any MCP client that supports stdio servers should be able to run it with the npx command. Check the README for the current tested client list.
Can it handle more than one Figma file?
Yes. From version 2.3.0 several Figma files or tabs can connect at once. Each plugin instance sends a session ID and the bridge routes operations to the right file. You can target a session with the optional sessionId parameter. Use the sessionId parameter to target one file.
Is figma-ui-mcp free to use?
Yes. It is released under the MIT licence and runs locally with npx, so there is no hosted service or subscription. You still need Figma Desktop and an MCP-compatible AI coding agent, which carry their own pricing. Pair it with a design system synthesizer for token work.