【技术文档摘要】：

Figma MCP 服务器

基于模型上下文协议（MCP）实现的 Figma API 服务器，支持 Figma 插件和小部件集成。

特性

• 通过 MCP 与 Figma API 进行交互
• 用于 Figma 插件通信的 WebSocket 服务器
• 支持 Figma 小部件开发
• 通过命令行参数进行环境变量配置
• 丰富的 Figma 操作工具集

安装

1. 克隆仓库：

git clone <repository-url>
cd figma-mcp

2. 安装依赖：

bun install

配置

环境变量

创建一个 .env 文件并设置以下环境变量：

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development

获取 Figma 访问令牌

1. 登录到 Figma
2. 前往账户设置 > 个人访问令牌
3. 创建一个新的访问令牌
4. 将令牌复制到你的 .env 文件中或通过命令行参数传递

使用

构建项目

bun run build

运行开发服务器

bun run dev

使用命令行参数

支持通过 -e 参数设置环境变量：

bun --watch src/index.ts -e FIGMA_PERSONAL_ACCESS_TOKEN=your_token -e PORT=6000

也可以使用专用的令牌参数：

bun --watch src/index.ts --token your_token

或者它的简写形式：

bun --watch src/index.ts -t your_token

在 Cursor 中配置 MCP

添加到 .cursor/mcp.json 文件：

{
  "Figma MCP": {
    "command": "bun",
    "args": [
      "--watch",
      "/path/to/figma-mcp/src/index.ts",
      "-e",
      "FIGMA_PERSONAL_ACCESS_TOKEN=your_token_here",
      "-e",
      "PORT=6000"
    ]
  }
}

可用工具

服务器提供以下 Figma 操作工具：

• 文件操作：获取文件、版本等。
• 节点操作：获取和操作 Figma 节点
• 评论操作：管理 Figma 文件中的评论
• 图像操作：将 Figma 元素导出为图像
• 搜索功能：搜索 Figma 文件中的内容
• 组件操作：管理 Figma 组件
• 画布操作：创建矩形、圆形、文本等
• 小部件操作：管理 Figma 小部件

Figma 插件开发

插件简介

Figma 插件是扩展 Figma 功能的定制工具，能够实现工作流程自动化、增加新特性或与外部服务集成。此 MCP 服务器提供了一种方便的方式来开发、测试和部署 Figma 插件。

构建和测试

构建插件：

bun run build:plugin

在开发模式下运行：

bun run dev:plugin

在 Figma 中加载插件

1. 在 Figma 中右键打开菜单 -> 插件 -> 开发 -> 从清单导入插件...
2. 选择插件的 manifest.json 文件
3. 你的插件现在将出现在 Figma 的插件菜单中

插件与 MCP 服务器的交互

插件可以通过 WebSocket 与 MCP 服务器通信以实现：

• 复杂的数据处理
• 外部 API 集成
• 跨会话数据持久化
• AI 功能集成

开发

构建小部件

bun run build:widget

构建插件

bun run build:plugin

开发模式

bun run dev:widget  # 小部件开发模式
bun run dev:plugin  # 插件开发模式

许可证

MIT