Figma MCP Server

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  # Widget development mode
bun run dev:plugin  # Plugin development mode

许可证

MIT