Figma MCP Server
2025.04.13
2
TypeScriptFigma API 服务器插件开发小部件开发开发效率
Figma MCP Server 是一个基于 Model Context Protocol (MCP) 的 Figma API 服务器实现，支持 Figma 插件和小部件的集成。它提供了丰富的 Figma 操作工具，通过 MCP 与 Figma API 交互，支持 WebSocket 服务器用于 Figma 插件通信，并支持 Figma 小部件开发。
View on GitHub
Overview
基本能力
产品定位
Figma MCP Server 是一个用于 Figma 插件和小部件开发的 API 服务器，通过 MCP 协议与 Figma API 交互，提供丰富的操作工具和开发支持。
核心功能
- 通过 MCP 与 Figma API 交互
- WebSocket 服务器用于 Figma 插件通信
- 支持 Figma 小部件开发
- 通过命令行参数配置环境变量
- 提供丰富的 Figma 操作工具
适用场景
- Figma 插件开发
- Figma 小部件开发
- 复杂数据处理和外部 API 集成
- 跨会话数据持久化和 AI 功能集成
工具列表
- 文件操作：获取文件、版本等
- 节点操作：获取和操作 Figma 节点
- 评论操作：管理 Figma 文件中的评论
- 图像操作：将 Figma 元素导出为图像
- 搜索功能：在 Figma 文件中搜索内容
- 组件操作：管理 Figma 组件
- 画布操作：创建矩形、圆形、文本等
- 小部件操作：管理 Figma 小部件
常见问题解答
- 如何获取 Figma 访问令牌？
- 登录 Figma，进入账户设置 > 个人访问令牌，创建新令牌并复制到
.env文件或通过命令行参数传递。 - 如何加载插件到 Figma？
- 右键点击 Figma，选择插件 > 开发 > 从清单导入插件，选择插件的
manifest.json文件。
使用教程
使用依赖
- 克隆仓库：
git clone <repository-url>
cd figma-mcp
- 安装依赖：
bun install
安装教程
- 创建
.env文件并设置环境变量：
FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development
- 构建项目：
bun run build
- 运行开发服务器：
bun run dev
调试方式
- 使用命令行参数设置环境变量：
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
插件开发
- 构建插件：
bun run build:plugin
- 开发模式运行：
bun run dev:plugin
小部件开发
- 构建小部件：
bun run build:widget
- 开发模式运行：
bun run dev:widget