The official Figma MCP server has only read-only tools. You can not change anything in the Figma document using the official Figma MCP server. You can use AI Agent in Figma Make. But, it is not convenient to chat in Figma Make and then move result to Figma to continue.
The goal is to enable AI Agents to work with your Figma documents.
You are able to ask you AI agent to implement the design in Figma that you want with this MCP server!
- Install
Node.jsif you don't have it - Clone this repository
- Switch to plugin directory:
cd plugin - Install dependencies:
npm i - Build Figma Plugin
npm run build - Open Figma, open document you want to work with
- Add Figma Plugin Plugins > Development > Imprort Plugin from manifest, select
/plugin/manifest.json - Start the Figma MCP Server plugin
- Expected result: Message Not connected to MCP server should be shown
- Do not close Plugin window. It will show message Connected to MCP server when it is started.
Next time you can start plugin from: Plugins > Development > Figma MCP Server. And do 1-3 steps only when you want to get latest changes.
- Switch to MCP directory:
cd mcp - Install dependencies:
npm i - Start the server:
npm run start - Expected result: Messages
Server listening on http://localhost:38450anda user connected: .............in the console
- Use Streaming HTTP transport and
http://localhost:38450/mcpURL - Turn off tools that you don't need
Now you should be able to ask your AI Agent to do something in Figma. For example:
We are working on publishing it as Figma plugin. Figma reviewers haven't accepted it so far. Once Figma accept it as plugin, the configuration and start will be simplified a lot!
TBD
Contributions to the project are welcome!
cd mcpnpm inpm run dev
cd pluginnpm inpm run dev- Open Figma
- Plugins > Development > Import plugin from manifest ...
- Select
manifest.jsonfromplugin\manifest.json - Start plugin
- You should see Connected to MCP server message
- Open Figma
- Add Figma Plugin Plugins > Development > Imprort Plugin from manifest, select
/plugin/manifest.json
cd mcpnpm run inspector- Use
http://127.0.0.1:38450/mcpto connect
WebSockets server is used as a medium to transfer messages between MCP Server and Figma Plugin.
MCP server starts Express.js server with MCP endpoints and WebSockets socket.io server for communication with Plugin. MCP server save tool calls into the queue and send message to WebSockets server.
Figma Plugin listen to the WebSocket server. And if there are any tasks to do, it takes them, do required actions, and return the result.
MCP server listen to the WebSockets server. If there are any messages from Figma plugin then it processes them. It found the apropriacte tool call in the queue. And executes the promise with the result from Figma plugin. If any of tool calls are executed for too long then it returns timeout wihtout waiting for the response.
Plugin gives access to your design document for external systems: AI Agents that you will connect. It acts as a bridge in the similar way as the official Figma MCP server. And, similar to the official MCP server it works on local machine and do not expose any information to the networks.
If you want to use it in the network, please do it on your own risk.
If you found any security issue, please report it via GitHub issue.
If your tasks could be done by official Figma MCP server, please use it.
Before starting this project, I made a search for my idea to implement Figma MCP server using Figma plugin and sockets as protocol for communication. And I found this one. Initially, I thought to fork it and change for my needs. But, there are few things that I don't like: requirement to run separate server for socket, everything located in one file, very hard to maintain, JavaScript(not TypeScript or Python). But, you always can consider that server as an alternative.
