Figma MCP Server

Figma MCP服務器是一個通過Model Context Protocol提供Figma API集成的服務，支持文件操作、評論管理、項目團隊功能和Webhook管理等功能。

開發者工具圖像與視頻處理 #Figma集成 #設計協作 #API服務本地 .TypeScript

評分 : 2分

下載量 : 14

更新時間 : 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"}'