Figma MCP

🚀 Figma MCP 服務器

Figma MCP 服務器是一個支持 AI 助手與 Figma 文件交互的 ModelContextProtocol 服務器。它能提供一系列工具，讓用戶通過 ModelContextProtocol 直接在聊天中查看、註釋和分析 Figma 設計。

🚀 快速開始

啟動一個新的 Claude 聊天，粘貼以下內容，即可查看 Figma 文件內容：

這個 Figma 文件裡有什麼？

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

觀看更實際的使用示例：視頻鏈接

✨ 主要特性

• 通過提供 URL 將 Figma 文件添加到 Claude 聊天中
• 閱讀和發佈 Figma 文件上的評論

📦 安裝指南

在 Claude 中配置

1. 下載並安裝 Claude 桌面應用，從 claude.ai/download 獲取。
2. 獲取 Figma API 密鑰（訪問 figma.com 後點擊左上角你的名字 -> 設置 -> 安全）。授予 文件內容 和 評論 權限範圍。
3. 配置 Claude 使用 Figma MCP 服務器。
   • 如果你是第一次設置 MCP 服務器，運行以下命令在終端：

echo '{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json

- 如果不是第一次，將 `figma-mcp` 模塊複製到你的 `claude_desktop_config.json` 文件中。

4. 重啟 Claude Desktop 應用。
5. 在 Claude 的界面中查找錘子圖標（顯示可用工具數量）以確認服務器是否運行。

開發環境設置

使用 Inspector 進行調試

為了開發和調試目的，你可以使用 MCP 檢查器工具。檢查器提供一個可視化界面用於測試和監控 MCP 服務器交互。 訪問 Inspector 文檔 獲取詳細的安裝和使用說明。 在終端運行以下命令進行本地測試：

npx @modelcontextprotocol/inspector npx figma-mcp

本地開發

1. 克隆倉庫
2. 安裝依賴項：

npm install

3. 構建項目：

npm run build

4. 開發時自動重建：

npm run watch

💻 使用示例

基礎用法

啟動一個新的 Claude 聊天，粘貼以下內容：

這個 Figma 文件裡有什麼？

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

📚 詳細文檔

可用工具

服務器提供的工具包括：

• add_figma_file：通過提供 URL 將 Figma 文件添加到上下文
• view_node：獲取 Figma 文件中特定節點的縮略圖
• read_comments：獲取 Figma 文件上的所有評論
• post_comment：在 Figma 文件上的一個節點發布評論
• reply_to_comment：回覆現有評論