Figma MCP Server

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

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

评分 : 2分

下载量 : 6.1K

更新时间 : 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 API 集成的模型上下文协议 (MCP) 服务器，允许您交互 Figma 文件、评论、组件等，极大提升与 Figma 相关资源的操作便利性。

🚀 快速开始

此服务器提供与 Figma API 集成的 MCP 服务，让你能方便地对 Figma 文件、评论、组件等进行操作。

✨ 主要特性

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

📦 安装指南

通过 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"}'