🚀 Figma MCP 服务器

Figma MCP 服务器是一个基于 Model Context Protocol (MCP) 的 Figma API 服务器实现，它支持 Figma 插件和小部件集成，为 Figma 开发提供了强大的功能和便捷的操作。

🚀 快速开始

Figma MCP 服务器允许您通过 MCP 与 Figma API 进行交互，支持 Figma 插件和小部件开发。以下是使用该服务器的基本步骤：

# 克隆仓库
git clone <repository-url>
cd figma-mcp
# 安装依赖项
bun install
# 构建项目
bun run build
# 运行开发服务器
bun run dev

✨ 主要特性

• MCP 交互：通过 MCP 与 Figma API 进行交互，实现高效通信。
• 插件通信：带有 WebSocket 服务器，方便与 Figma 插件进行通信。
• 小部件支持：支持 Figma 小部件开发，拓展 Figma 功能。
• 灵活配置：可通过命令行参数配置环境变量，满足不同需求。
• 丰富工具集：提供丰富的 Figma 操作工具，涵盖文件、节点、评论等操作。

📦 安装指南

克隆仓库

git clone <repository-url>
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 访问令牌

1. 登录到 Figma
2. 转到账户设置 > 个人访问令牌
3. 创建一个新的访问令牌
4. 将令牌复制到 .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 插件的示例：

1. 安装插件：在 Figma 账户中下载并安装所需的插件。
2. 配置插件：根据插件要求设置必要的参数和权限。
3. 使用插件：在设计项目中调用插件功能，如自动布局、数据绑定等。

插件开发步骤

1. 创建新插件：

   • 打开 Figma 账户，进入插件市场。
   • 点击“创建插件”按钮，开始构建新的插件项目。

2. 编写代码：

   • 使用 JavaScript 或 TypeScript 编写插件逻辑。
   • 定义插件功能，如事件监听、数据处理等。

3. 测试插件：

   • 在 Figma 中打开测试文件，加载开发中的插件。
   • 测试各项功能，确保插件按预期工作。

4. 发布插件：

   • 完成测试后，填写插件描述和使用说明。
   • 提交插件到 Figma 市场，供其他用户下载使用。

在 Figma 中加载插件

1. 打开 Figma 应用，进入您要使用的项目。
2. 点击右上角的“插件”图标，选择“从我的电脑加载”或“从 URL 加载”。
3. 选择已下载的插件文件或输入插件链接，点击“打开”。

开发

构建小部件和插件

# 构建 widget
bun run build-widget
# 构建 plugin
bun run build-plugin

运行开发模式

# 启动 widget 开发服务器
bun run dev-widget
# 启动 plugin 开发服务器
bun run dev-plugin

📄 许可证

本项目采用 MIT 许可证。