使用说明

项目简介

MCP Figma Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在通过标准化的 MCP 协议，向大型语言模型 (LLM) 客户端提供访问和操作 Figma API 的能力。该服务器将 Figma API 的各种方法封装成易于 LLM 调用的工具，使得 LLM 能够理解和操作 Figma 设计文件，实现设计协作、自动化工作流等应用场景。

主要功能点

全面的 Figma API 工具集: 实现了 Figma API 几乎所有的方法，包括用户、文件、节点、评论、团队、项目、组件、样式、Webhook 以及 Library Analytics 等模块，覆盖了 Figma 设计操作的各个方面。
MCP 协议标准支持: 完全遵循 MCP 协议，通过 JSON-RPC 与客户端通信，提供标准的工具列表和工具调用接口。
灵活的部署方式: 支持通过 Smithery 快速安装，也提供手动安装和配置方式，方便用户根据自身环境选择合适的部署方案。
多种身份验证方式: 支持环境变量和命令行参数两种方式配置 Figma API Token，满足不同场景下的安全需求。
详细的工具描述和参数: 每个工具都提供清晰的描述和参数定义，方便 LLM 理解和正确调用。

安装步骤

克隆仓库:

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

安装依赖:
```
npm install
```
构建项目:
```
npm run build
```

服务器配置 (Claude Desktop)

要将 MCP Figma Server 集成到 Claude Desktop 等 MCP 客户端，您需要在客户端的配置文件中添加服务器配置信息。以下是针对 Claude Desktop 的 'claude_desktop_config.json' 配置示例：

配置示例 (使用 npx 启动，推荐 Claude Desktop 用户使用):

{
  "mcpServers": {
    "figma": {  // 服务器名称，可以自定义，例如 "figma"
      "command": "npx", // 启动命令，使用 npx 运行 npm 包
      "args": [  // 启动参数
        "@thirdstrandstudio/mcp-figma", //  npm 包名
        "--figma-token", //  Figma API Token 参数
        "YOUR_FIGMA_API_KEY" //  请替换为您的 Figma API Token
      ]
    }
  }
}

配置示例 (直接使用 Node.js 启动，需要指定项目路径):

{
  "mcpServers": {
    "figma": {  // 服务器名称，可以自定义，例如 "figma"
      "command": "node", // 启动命令，使用 node 运行 JavaScript 文件
      "args": [  // 启动参数
        "/path/to/mcp-figma/dist/index.js", //  MCP Figma Server 入口文件路径，请替换为您的实际路径
        "--figma-token", // Figma API Token 参数
        "YOUR_FIGMA_API_KEY"  //  请替换为您的 Figma API Token
      ]
    }
  }
}

注意:

'"server name"': 您可以自定义服务器名称，例如 "figma"，客户端将使用此名称来引用该服务器。
'"command"': 指定启动 MCP Figma Server 的命令，通常为 '"npx"' (推荐) 或 '"node"'。
'"args"': 包含启动命令的参数，例如 npm 包名、入口文件路径、Figma API Token 等。
'"YOUR_FIGMA_API_KEY"': 务必替换为您自己的 Figma API Token。 您可以在 Figma 开发者设置中创建 Personal Access Token。
'"/path/to/mcp-figma"': 如果您选择直接使用 Node.js 启动，请将此路径替换为 MCP Figma Server 项目在您本地文件系统中的实际路径。

基本使用方法

成功配置并启动 MCP Figma Server 后，您可以在 MCP 客户端中使用 'callTool' 等方法调用 Figma API 工具。例如，获取 Figma 文件信息的示例代码如下：

// 获取 Figma 文件
const result = await callTool("figma_get_file", {
  fileKey: "您的_Figma_文件_Key" //  请替换为您的 Figma 文件 Key
});

console.log(result); //  打印文件信息

更多工具的使用方法和参数说明，请参考仓库 'README.md' 文件中 "Tools" 部分的详细描述。

MCP Figma Server