figma-ui-mcp
figma-ui-mcp is an MCP bridge that draws interfaces on the Figma canvas through code and reads designs back, no API key.
- 265 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent writes into open Figma files through code, so a wrong operation changes the design.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/figma-ui-mcpDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent writes into open Figma files through code, so a wrong operation changes the design.
This is third-party code. Review the repository files before installing.
What it does
figma-ui-mcp links an agent to Figma Desktop through a local HTTP bridge on `localhost:38451`. The agent calls `figma_write` to draw frames, shapes, text and prototypes through code, and `figma_read` to fetch node trees, colors, typography, screenshots and CSS. There is also `figma_status` to check the connection, `figma_docs` with an API reference and `figma_rules` with a summary of tokens and components. No Figma API key is needed and traffic stays on the machine. A Figma Desktop plugin installs alongside the MCP server.
Who it is for. Designers and frontend developers who ask an agent to draw a screen in Figma or carry an existing design into code.
Good fit when
- An agent builds a draft screen on the Figma canvas from a description.
- CSS and tokens are needed from a selected design.
- Design-system rules must be gathered into one sheet before editing a UI.
- Several Figma files are open at once and operations must reach the right one.
Not a fit when
- You work in the Figma web app: Figma Desktop is required.
- You need a connection to the cloud Figma API with a key.
- Files would be edited without checking the canvas result.
Example request
Connect to figma-ui-mcp, draw a sign-in screen on the canvas and take a screenshot to check it.MCP
- Transport
- stdio
- Authentication
- not required
Limitations
Figma Desktop is required because the web app blocks localhost. The Figma plugin does not update itself and must be re-linked through a `manifest.json` import after each new version. Restart the client after adding the server, because saving the config alone does not load it. The author lists Claude Code and Antigravity as tested, with Cursor, VS Code, Windsurf and Zed as compatible but not tested. The agent draws through code, so check results on a screenshot and keep important files under Figma version history.
How to disable. Remove the server with `claude mcp remove figma-ui-mcp` or delete the client config entry, and close the plugin in Figma Desktop.
FAQ
Is a Figma API key needed?
No. The bridge runs over local HTTP between the MCP server and the plugin in Figma Desktop. No traffic leaves the machine.
How do I connect the plugin?
Download `plugin.zip`, unzip it, choose Plugins, Development, Import plugin from manifest in Figma Desktop and pick `manifest.json`. A green dot in the plugin window means the server is connected.
Which tools exist?
`figma_write` draws, `figma_read` reads, `figma_status` checks the link, `figma_docs` returns the reference and `figma_rules` gathers design-system rules.
Can I work with several files?
Yes, since version 2.3.0 several files connect at once. Target one with the `sessionId` parameter in `figma_write` and `figma_read`.
How do I update the plugin?
The plugin does not update itself. Get the path with `npx figma-ui-mcp@latest --version`, restart the client and re-import `manifest.json` in Figma Desktop.
Discussion
No questions or reviews yet.
Related
MCP serversFigma MCP Bridge
figma-mcp-bridge
A Figma Desktop plugin and an MCP server: an agent reads tokens, styles and components without the Figma REST API and its limits. Not from Figma
An MCP server that lets an agent read and edit Figma designs: colors, typography, components and export
An MCP server that gives the agent simplified Figma layout data from a link so it can build the screen more accurately than from a screenshot
MCP bridge between an agent (Cursor, Claude Code, Codex) and Figma for reading designs and editing them on the canvas
An MCP server and a Figma plugin that let an agent read and draw on the canvas safely: with layout checks and no broken screens.
Figma MCP Server (Antonytm)
Figma MCP Server
A community MCP server with a Figma plugin: the agent creates frames, text and components in the open file, not just reads them
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| figma-ui-mcp (this card) | no | not required | 265 | |
| Claude Talk to Figma MCP | no | not required | 678 | links the agent to Figma over a WebSocket channel; figma-ui-mcp uses a local HTTP bridge with no key |
| Figma MCP Bridge | no | not required | 914 | another Figma bridge; figma-ui-mcp adds `figma_rules`, `get_css` and multiple sessions |
README in short
The README covers a two-way bridge between an agent and Figma, four install steps and a reference of write and read operations. Plugin updating is covered separately.