FindMCP Logo FindMCP.info
Figma MCP Server

Figma MCP Server

site icon
2025.03.30 20
TypeScriptFigma API设计协作设计系统开发效率
mcp-figma 是一个基于 Model Context Protocol (MCP) 的 Figma API 交互服务器，提供了一套完整的 Figma API 方法。该服务器允许开发者通过 MCP 协议与 Figma 平台进行交互，包括获取用户信息、文件操作、评论管理、团队项目管理、组件和样式管理、Webhook 设置以及库分析等功能。
View on GitHub

Overview

基本能力

产品定位

mcp-figma 是一个专门为 Figma 设计的 MCP 服务器，旨在通过 MCP 协议提供完整的 Figma API 功能，方便开发者集成 Figma 功能到自己的应用中。

核心功能

  1. 用户方法：获取当前用户信息。
  2. 文件方法：获取 Figma 文件、节点、图像、图像填充和文件版本历史。
  3. 评论方法：管理 Figma 文件中的评论和评论反应。
  4. 团队和项目管理：获取团队项目和项目中的文件。
  5. 组件方法：管理团队和文件中的组件和组件集。
  6. 样式方法：管理团队和文件中的样式。
  7. Webhook 方法：创建、获取、更新和删除 Webhook。
  8. 库分析方法：获取组件、样式和变量的使用分析数据。

适用场景

  1. 设计协作：在团队中管理 Figma 文件和评论。
  2. 设计系统集成：将 Figma 组件和样式集成到开发流程中。
  3. 自动化工作流：通过 Webhook 实现 Figma 文件更新的自动化通知和处理。
  4. 设计分析：分析 Figma 库中组件和样式的使用情况。

工具列表

  1. figma_get_me - 获取当前用户信息
  2. figma_get_file - 获取 Figma 文件
  3. figma_get_file_nodes - 获取文件中的特定节点
  4. figma_get_images - 渲染文件中的图像
  5. figma_get_image_fills - 获取文件中的图像填充
  6. figma_get_file_versions - 获取文件的版本历史
  7. figma_get_comments - 获取文件中的评论
  8. figma_post_comment - 添加评论
  9. figma_delete_comment - 删除评论
  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 - 获取样式
  24. figma_post_webhook - 创建 Webhook
  25. figma_get_webhook - 获取 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 - 获取变量使用分析

常见问题解答

  1. 如何处理大型 Figma 文件？ 对于大型 Figma 文件，建议先使用 depth = 1 获取文件，然后在需要时增加深度。

使用教程

使用依赖

  • Node.js (v16 或更高版本)
  • npm 或 yarn

安装教程

通过 Smithery 安装

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

手动安装

# 克隆仓库
git clone https://github.com/thirdstrandstudio/mcp-figma.git
cd mcp-figma

# 安装依赖
npm install

# 构建包
npm run build

调试方式

设置 Figma API 密钥

  1. 环境变量 创建 .env 文件或在环境中设置： FIGMA_API_KEY=your_figma_api_key

  2. 命令行参数 ```bash # 使用长格式 node dist/index.js --figma-token YOUR_FIGMA_TOKEN

# 或使用短格式 node dist/index.js -ft YOUR_FIGMA_TOKEN ```

与 Claude Desktop 一起使用

在 claude_desktop_config.json 中添加配置：

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

开发模式

# 启动开发服务器
npm start

# 使用 Figma API 令牌运行
npm start -- --figma-token YOUR_FIGMA_TOKEN

许可证

该项目遵循 MIT 开源许可条款，请参阅 MIT 了解完整条款。