Figma MCP Server

Figma MCP服务器是一个通过Model Context Protocol提供Figma API集成的服务，支持文件操作、评论管理、项目团队功能和Webhook管理等功能。

开发者工具图像与视频处理 #Figma集成 #设计协作 #API服务本地 .TypeScript

评分 : 2分

下载量 : 13

更新时间 : 2025-04-22

什么是Figma MCP Server?

Figma MCP Server是一个基于Model Context Protocol的中间服务，它作为桥梁连接您的应用与Figma设计平台。通过这个服务，您可以无需直接调用Figma API就能实现设计文件管理、团队协作和自动化工作流。

如何使用Figma MCP Server?

您可以通过简单的配置将服务器集成到您的MCP环境中，然后使用提供的工具集来与Figma平台交互。主要步骤包括安装服务器、配置访问令牌和调用相应工具。

适用场景

适用于设计团队协作、设计系统管理、设计评审自动化、设计变更通知等场景。特别适合需要将设计工作流与其他业务系统集成的组织。

主要功能

文件操作获取文件信息、版本历史和组件数据，支持设计资产的检索和管理

评论管理查看、添加和删除设计文件上的评论，促进团队协作和反馈收集

团队项目管理获取团队项目列表和项目文件，便于组织设计资源

Webhook集成创建和管理Webhook，实现设计变更的实时通知和自动化响应

优势与局限性

优势

简化Figma API集成，提供统一的MCP接口

支持多种Figma核心功能，覆盖常见使用场景

配置简单，易于部署和维护

与MCP生态无缝集成

局限性

需要有效的Figma访问令牌

不包含Figma所有API功能

性能受Figma API限制

如何使用

安装服务器

通过Smithery自动安装或手动安装服务器

配置访问令牌

在MCP配置文件中设置您的Figma访问令牌

调用工具

通过MCP工具接口调用所需功能

使用案例

获取设计文件信息设计师需要查看某个设计文件的详细信息以便进行评审

添加设计评论产品经理需要在设计稿上添加反馈意见

常见问题

如何获取Figma访问令牌?

支持哪些Figma事件类型的Webhook?

调用频率是否有限制?

🚀 Figma MCP 服务器

Figma MCP 服务器是一个与 Figma API 集成的模型上下文协议 (MCP) 服务器，可让您方便地与 Figma 文件、评论、组件等进行交互，提升工作效率。

🚀 快速开始

要使用 Figma MCP 服务器，您需要先进行安装和配置，之后就可以使用提供的工具进行各类操作。

✨ 主要特性

文件操作
- 获取文件信息
- 获取文件版本历史
- 获取文件组件
评论管理
- 列出文件中的评论
- 添加新评论
- 删除评论
项目与团队特性
- 列出团队的项目
- 获取项目的文件
- 获取已发布的样式
网钩管理
- 创建网钩
- 列出现有的网钩
- 删除网钩

📦 安装指南

通过 Smithery 安装

要通过 Smithery 自动安装 Figma MCP Server for Claude Desktop，可执行以下命令：

npx -y @smithery/cli install @deepsuthar496/figma-mcp-server --client claude

手动安装

克隆仓库
安装依赖：

npm install

构建服务器：

npm run build

📚 详细文档

配置

在您的 MCP 设置文件中使用 Figma 访问令牌配置服务器：

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["path/to/figma-server/build/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-access-token-here"
      },
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

可用工具

文件操作

get_file：获取文件信息

{
  "file_key": "string"
}

get_file_versions：获取文件版本历史

{
  "file_key": "string"
}

get_file_components：获取文件组件

{
  "file_key": "string"
}

评论管理

get_file_comments：列出文件中的评论

{
  "file_key": "string"
}

post_comment：添加文件的评论

{
  "file_key": "string",
  "message": "string"
}

delete_comment：删除文件中的评论

{
  "file_key": "string",
  "comment_id": "string"
}

项目与团队特性

get_team_projects：获取团队的项目

{
  "team_id": "string"
}

get_project_files：获取项目的文件

{
  "project_id": "string"
}

get_component_styles：获取已发布的样式

{
  "team_id": "string"
}

网钩管理

create_webhook：创建网钩

{
  "team_id": "string",
  "event_type": "string",
  "callback_url": "string"
}

list_webhooks：列出网钩

{
  "team_id": "string"
}

delete_webhook：删除网钩

{
  "webhook_id": "string"
}

💻 使用示例

基础用法

```figma
Figma 客户端 ID: your_client_id_here
Figma 客户端Secret: your_client_secret_here

要获取文件信息：

curl -X GET 'https://api.figma.com/v1/files/[file_key]'
  -H 'Authorization: Bearer [access_token]'

要获取文件版本历史：

curl -X GET 'https://api.figma.com/v1/files/[file_key]/versions'
  -H 'Authorization: Bearer [access_token]'

要添加评论：

curl -X POST 'https://api.figma.com/v1/comments'
  -H 'Content-Type: application/json'
  -d '{"file_key": "your_file_key", "message": "your_message"}'