🚀 Figma MCP 服务器
Figma MCP 服务器是一个基于 Model Context Protocol (MCP) 的 Figma API 服务器实现，它支持 Figma 插件和小部件集成，为 Figma 开发提供了强大的功能和便捷的操作。
🚀 快速开始
Figma MCP 服务器允许您通过 MCP 与 Figma API 进行交互，支持 Figma 插件和小部件开发。以下是使用该服务器的基本步骤：
# 克隆仓库
git clone
cd figma-mcp
# 安装依赖项
bun install
# 构建项目
bun run build
# 运行开发服务器
bun run dev
✨ 主要特性
- MCP 交互：通过 MCP 与 Figma API 进行交互，实现高效通信。
- 插件通信：带有 WebSocket 服务器，方便与 Figma 插件进行通信。
- 小部件支持：支持 Figma 小部件开发，拓展 Figma 功能。
- 灵活配置：可通过命令行参数配置环境变量，满足不同需求。
- 丰富工具集：提供丰富的 Figma 操作工具，涵盖文件、节点、评论等操作。
📦 安装指南
克隆仓库
git clone
cd figma-mcp
安装依赖项
bun install
💻 使用示例
构建项目
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
📚 详细文档
配置
环境变量
创建一个 .env 文件并设置以下环境变量：
FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development
获取 Figma 访问令牌
- 登录到 Figma
- 转到账户设置 > 个人访问令牌
- 创建一个新的访问令牌
- 将令牌复制到
.env文件或通过命令行参数传递
在 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 功能的定制工具，可实现工作流自动化、添加新功能或集成外部服务。以下是如何使用 Figma 插件的示例：
- 安装插件：在 Figma 账户中下载并安装所需的插件。
- 配置插件：根据插件要求设置必要的参数和权限。
- 使用插件：在设计项目中调用插件功能，如自动布局、数据绑定等。
插件开发步骤
-
创建新插件：
- 打开 Figma 账户，进入插件市场。
- 点击“创建插件”按钮，开始构建新的插件项目。
-
编写代码：
- 使用 JavaScript 或 TypeScript 编写插件逻辑。
- 定义插件功能，如事件监听、数据处理等。
-
测试插件：
- 在 Figma 中打开测试文件，加载开发中的插件。
- 测试各项功能，确保插件按预期工作。
-
发布插件：
- 完成测试后，填写插件描述和使用说明。
- 提交插件到 Figma 市场，供其他用户下载使用。
在 Figma 中加载插件
- 打开 Figma 应用，进入您要使用的项目。
- 点击右上角的“插件”图标，选择“从我的电脑加载”或“从 URL 加载”。
- 选择已下载的插件文件或输入插件链接，点击“打开”。
开发
构建小部件和插件
# 构建 widget
bun run build-widget
# 构建 plugin
bun run build-plugin
运行开发模式
# 启动 widget 开发服务器
bun run dev-widget
# 启动 plugin 开发服务器
bun run dev-plugin
📄 许可证
本项目采用 MIT 许可证。