Figma MCP Server

Figma MCP 服务

用于与 Figma API 交互的 MCP 服务。此服务通过 Model Context Protocol 提供一套完整的 Figma API 方法。有时，对于较大的 Figma 文件，你可能需要让它在调用 figma_get_file 时使用 depth = 1，然后在需要更多内容时再逐步增加。

工具

此服务将所有 Figma API 方法实现为 MCP 工具：

用户方法

1. figma_get_me - 获取当前用户

文件方法

2. figma_get_file - 按键获取 Figma 文件
3. figma_get_file_nodes - 获取 Figma 文件中的指定节点
4. figma_get_images - 渲染 Figma 文件中的图像
5. figma_get_image_fills - 获取 Figma 文件中的图像填充
6. figma_get_file_versions - 获取 Figma 文件的版本历史记录

评论方法

7. figma_get_comments - 获取 Figma 文件中的评论
8. figma_post_comment - 向 Figma 文件添加评论
9. figma_delete_comment - 删除 Figma 文件中的评论
10. figma_get_comment_reactions - 获取评论的反应
11. figma_post_comment_reaction - 为评论添加反应
12. figma_delete_comment_reaction - 删除评论的反应

团队和项目方法

13. figma_get_team_projects - 获取团队中的项目
14. figma_get_project_files - 获取项目中的文件

组件方法

15. figma_get_team_components - 获取团队中的组件
16. figma_get_file_components - 获取文件中的组件
17. figma_get_component - 按键获取组件
18. figma_get_team_component_sets - 获取团队中的组件集
19. figma_get_file_component_sets - 获取文件中的组件集
20. figma_get_component_set - 按键获取组件集

样式方法

21. figma_get_team_styles - 获取团队中的样式
22. figma_get_file_styles - 获取文件中的样式
23. figma_get_style - 按键获取样式

Webhook 方法（V2 API）

24. figma_post_webhook - 创建 webhook
25. figma_get_webhook - 按 ID 获取 webhook
26. figma_update_webhook - 更新 webhook
27. figma_delete_webhook - 删除 webhook
28. figma_get_team_webhooks - 获取团队的 webhook

库分析方法

29. figma_get_library_analytics_component_usages - 获取库分析中的组件使用数据
30. figma_get_library_analytics_style_usages - 获取库分析中的样式使用数据
31. figma_get_library_analytics_variable_usages - 获取库分析中的变量使用数据

安装

通过 Smithery 安装

通过 Smithery 自动为 Claude Desktop 安装 mcp-figma：

npx @smithery/cli@latest install @thirdstrandstudio/mcp-figma --client claude

先决条件

• Node.js（v16 或更高版本）
• npm 或 yarn

安装软件包

# Clone the repository
git clone https://github.com/thirdstrandstudio/mcp-figma.git
cd mcp-figma

# Install dependencies
npm install

# Build the package
npm run build

设置

要使用此 MCP 服务，你需要设置 Figma API 令牌。可以通过以下三种方式之一进行设置：

1. 环境变量

在项目根目录中创建 .env 文件，或直接设置环境变量：

FIGMA_API_KEY=your_figma_api_key

2. 命令行参数

启动服务时，可以将 Figma API 令牌作为命令行参数传入：

# Using the long form
node dist/index.js --figma-token YOUR_FIGMA_TOKEN

# Or using the short form
node dist/index.js -ft YOUR_FIGMA_TOKEN

在 Claude Desktop 中使用

将以下内容添加到 claude_desktop_config.json：

使用 npx

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@thirdstrandstudio/mcp-figma", "--figma-token", "your_figma_api_key"]
    }
  }
}

直接使用 Node.js（通过环境变量）

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js"],  
      "env": {
        "FIGMA_API_KEY": "your_figma_api_key"
      }
    }
  }
}

直接使用 Node.js（通过命令行参数）

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/path/to/mcp-figma/dist/index.js", "--figma-token", "your_figma_api_key"]
    }
  }
}

将 /path/to/mcp-figma 替换为你的仓库实际路径。

示例

获取 Figma 文件

// Get a Figma file
const result = await callTool("figma_get_file", { 
  fileKey: "abcXYZ123"
});

获取文件中的评论

// Get comments from a file
const comments = await callTool("figma_get_comments", { 
  fileKey: "abcXYZ123",
  as_md: true 
});

创建 Webhook

// Create a webhook
const webhook = await callTool("figma_post_webhook", {
  event_type: "FILE_UPDATE",
  team_id: "12345",
  endpoint: "https://example.com/webhook",
  passcode: "your_passcode_here",
  description: "File update webhook"
});

开发

# Install dependencies
npm install

# Start the server in development mode
npm start

# Build the server
npm run build

# Run with a Figma API token
npm start -- --figma-token YOUR_FIGMA_TOKEN

许可证

此 MCP 服务采用 MIT 许可证授权。这意味着你可以自由使用、修改和分发此软件，但须遵守 MIT 许可证的条款和条件。详情请参阅项目仓库中的 LICENSE 文件。