使用说明

项目简介

Figma 编辑 MCP 服务器是一个基于 Model Context Protocol (MCP) 构建的后端应用，旨在通过标准化的 MCP 协议，为大型语言模型 (LLM) 客户端提供编辑 Figma 设计文件的能力。该服务器允许 LLM 通过调用预定义的工具，在 Figma 文件中创建和修改各种设计元素，例如文本、形状、框架、图片和组件，从而实现 Figma 设计的自动化和智能化。

主要功能点

资源管理 (Resources): 虽然仓库信息中没有明确提及资源管理，但 MCP 服务器的核心是管理资源，这里 Figma 文件可以被视为一种资源，服务器负责处理对 Figma 文件的操作请求。
工具注册和执行 (Tools): 实现了 'update_file'、'get_file' 和 'get_mcp_tool_usage' 三个工具，允许 LLM 客户端调用这些工具来更新 Figma 文件内容、获取文件信息以及查询工具使用方法。
通过 MCP 协议与客户端通信: 服务器使用 '@modelcontextprotocol/sdk' 库构建，并通过标准输入/输出 (stdio) 作为传输协议，符合 MCP 协议的要求。
Figma 文件编辑能力: 支持创建多种 Figma 设计元素，包括框架 (Frame)、文本 (Text)、矩形 (Rectangle)、椭圆 (Ellipse)、线条 (Line)、图片 (Image) 和组件 (Component)。

安装步骤

克隆仓库:

git clone https://github.com/asamuzak09/figma-edit-mcp.git
cd figma-edit-mcp

安装依赖:
```
npm run install-all
```
此命令会安装 'figma-mcp-server' 和 'figma-plugin' 两个目录下的依赖并进行构建。
配置 Figma 个人访问令牌: 你需要一个 Figma Personal Access Token 来授权服务器访问你的 Figma 文件。
- 登录 Figma
- 点击右上角个人头像 -> Settings -> Personal access tokens -> Create a new personal access token
- 复制生成的 Token，并将其设置为环境变量 'FIGMA_ACCESS_TOKEN'。例如，在终端中可以执行 'export FIGMA_ACCESS_TOKEN=你的Figma个人访问令牌'。

服务器配置

要将此 MCP 服务器与 MCP 客户端（如 Cline 或 Cursor）集成，你需要配置 MCP 服务器的启动命令。以下是配置示例，请根据你的实际路径进行调整。

Cline 配置示例:

"mcpServers": {
  "figma-mcp-server": {
    "command": "node",
    "args": ["/path/to/figma-edit-mcp/figma-mcp-server/build/index.js"],
    "env": {
      "FIGMA_ACCESS_TOKEN": "your_figma_personal_access_token" // 你的 Figma 个人访问令牌，也可以设置为环境变量
    }
  }
}

Cursor 配置示例:

Type: 'command'

Command:

env FIGMA_ACCESS_TOKEN=your_figma_personal_access_token node /path/to/figma-edit-mcp/figma-mcp-server/build/index.js

请替换 '/path/to/figma-edit-mcp' 为你克隆仓库的实际路径，并替换 'your_figma_personal_access_token' 为你的 Figma 个人访问令牌。

基本使用方法

启动 MCP 服务器: 在 'figma-mcp-server' 目录下，运行命令 'npm start' 启动服务器。
在 Figma 中安装并运行插件 (figma-plugin):
- 打开 Figma 桌面应用
- 选择 "Plugins" -> "Development" -> "Import plugin from manifest..."
- 选择 'figma-plugin/manifest.json' 文件安装插件。
- 在 Figma 中，选择 "Plugins" -> "Development" -> "Figma MCP Plugin" 运行插件。插件会连接到 MCP 服务器。
使用 MCP 客户端 (如 Cline 或 Cursor) 调用工具: 配置好 MCP 服务器后，你可以在 MCP 客户端中使用 '<use_mcp_tool>' 标签调用 'update_file'、'get_file' 或 'get_mcp_tool_usage' 工具，并传入相应的参数，以实现 Figma 文件的编辑和信息获取。具体的工具参数和使用示例可以参考 'figma-mcp-server/src/tools/update-file/metadata.ts'、'figma-mcp-server/src/tools/get-file/metadata.ts' 和 'figma-mcp-server/src/tools/get-tool-usage/metadata.ts' 文件中的定义和示例。

注意: Figma 插件 ('figma-plugin') 是作为 MCP 服务器的辅助组件，用于接收服务器发送的 Figma 更新指令并实际操作 Figma 文件。MCP 客户端 (如 Cline, Cursor) 通过 MCP 协议与 'figma-mcp-server' 通信，而不是直接与 Figma 插件通信。

关键词