问题

官方 Figma MCP 服务器仅支持只读工具。** 你无法使用官方 Figma MCP 服务器更改 Figma 文档中的任何内容。** 你可以在Figma Make中使用AI代理。但在Figma Make里聊天然后把结果移到Figma继续，并不方便。

目标是让AI代理能够处理你的Figma文档。

你可以让AI代理在Figma中实现你想要的设计，配合这个MCP服务器！

用途

先决条件

1. 如果你没有安装Node.js
2. 克隆该仓库

启动Figma插件

1. 切换到插件目录：cd plugin
2. 安装依赖：npm i
3. 构建Figma插件 npm run build
4. 打开Figma，打开你想处理的文档
5. 添加 Figma 插件 插件 > 开发 > Imprort 插件 从manifest，选择 /plugin/manifest.json
6. 启动Figma MCP Server插件
7. 预期结果：应显示消息*未连接到MCP服务器**
8. 不要关闭插件窗口。启动时会显示已连接到MCP服务器的提示。

下次你可以从以下插件开始：插件 > 开发 > Figma MCP 服务器。

Figma Model Context protocol server

Problem

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!

Usage

Prerequisites

1. Install Node.js if you don’t have it
2. Clone this repository

Start Figma Plugin

1. Switch to plugin directory: cd plugin
2. Install dependencies: npm i
3. Build Figma Plugin npm run build
4. Open Figma, open document you want to work with
5. Add Figma Plugin Plugins > Development > Imprort Plugin from manifest, select /plugin/manifest.json
6. Start the Figma MCP Server plugin
7. Expected result: Message Not connected to MCP server should be shown
8. 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.

Start MCP server

1. Switch to MCP directory: cd mcp
2. Install dependencies: npm i
3. Start the server: npm run start
4. Expected result: Messages Server listening on http://localhost:38450 and a user connected: ............. in the console

Configure MCP server in your client

1. Use Streaming HTTP transport and http://localhost:38450/mcp URL
2. 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!

Tools

TBD

Development

Contributions to the project are welcome!

MCP server

1. cd mcp
2. npm i
3. npm run dev

Plugin

1. cd plugin
2. npm i
3. npm run dev
4. Open Figma
5. Plugins > Development > Import plugin from manifest …
6. Select manifest.json from plugin\manifest.json
7. Start plugin
8. You should see Connected to MCP server message

Add Plugin to Figma

1. Open Figma
2. Add Figma Plugin Plugins > Development > Imprort Plugin from manifest, select /plugin/manifest.json

Inspector

1. cd mcp
2. npm run inspector