Claude Talk To Figma MCP

🚀 Claude Talk to Figma MCP

Claude Talk to Figma MCP 是一款模型上下文協議（MCP）插件，它允許 Claude Desktop 以及其他 AI 工具（如 GitHub Copilot、Cursor 等）直接與 Figma 進行交互，從而實現強大的 AI 輔助設計功能。

⚠️ 重要提示

本項目基於 Sonny Lazuardi 的 cursor-talk-to-figma-mcp 開發。它已適配 Claude Desktop 並擴展了其他工具。原作者為 Sonny Lazuardi，在此表示感謝 ❤️

🚀 快速開始

本插件能讓 AI 工具與 Figma 無縫對接，實現高效的設計協作。下面為你詳細介紹使用前的安裝和配置步驟。

⚡ 安裝指南

前提條件

• 安裝 Claude Desktop 或 Cursor、Figma Desktop 以及 Bun。

安裝步驟

git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
cd claude-talk-to-figma-mcp
bun install

• macOS/Linux：bun run build
• Windows：bun run build:win

AI 客戶端配置

選項 1：DXT 包（僅適用於 Claude Desktop）

1. 下載：從 releases 下載最新的 claude-talk-to-figma-mcp.dxt 文件。
2. 安裝：雙擊 .dxt 文件，Claude Desktop 會自動完成安裝。

選項 2：JSON（適用於 Claude Desktop 和 Cursor）

• Claude Desktop：運行 bun run configure-claude，然後重啟 Claude Desktop。
• Cursor：
  1. 打開 Cursor 設置 → 工具與集成。
  2. 點擊“New MCP Server”打開 mcp.json 配置文件（截圖）。
  3. 添加以下配置：

  {
    "mcpServers": {
      "ClaudeTalkToFigma": {
        "command": "bunx",
        "args": ["claude-talk-to-figma-mcp@latest"]
      }
    }
  }
  

  4. 保存文件（截圖）。

配置 Figma 插件（所有方法均需此步驟）

在 Figma 中導入 src/claude_mcp_plugin/manifest.json 文件，路徑為：菜單 → 插件 → 開發。

首次連接

1. 啟動服務器：運行 bun socket，並在 http://localhost:3055/status 驗證服務器狀態。
2. 連接插件：在 Figma 中打開 Claude MCP 插件，複製頻道 ID。
3. 測試連接：向你的 AI 客戶端發送指令：“Talk to Figma, channel {channel-ID}”。

✅ 連接成功：AI 會確認連接成功，此時你就可以開始設計啦！

✨ 主要特性

工作原理

Claude Desktop ↔ MCP Server ↔ WebSocket Server ↔ Figma Plugin

簡單易用：Claude 發送設計指令，Figma 實時執行。
雙向交互：從 Figma 獲取信息，創建/修改元素，管理組件。

核心能力

• 文檔交互：分析設計、獲取選擇內容、導出資源。
• 元素創建：創建形狀、文本、框架，並可完全控制樣式。
• 智能修改：調整顏色、效果、自動佈局和響應式設計。
• 文本處理：支持高級排版、字體加載和文本掃描。
• 組件集成：集成本地和團隊庫中的組件。

💻 使用示例

開啟 AI 設計之旅

1. 讓 Claude 成為 UX 專家：使用 此提示 🎨
2. 連接到項目：發送指令“Talk to Figma, channel {channel-ID}”。
3. 開始設計：例如，發送指令“Create a mobile app login screen with modern styling”。

有效提示示例

✅ 推薦："Create a dashboard with a sidebar navigation, header with user profile, and main content area with card-based metrics"

✅ 推薦："Redesign this button component with hover states and better contrast ratios"

❌ 避免："Make it look nice"（過於模糊）

📚 詳細文檔

📄 文檔工具

🔧 創建工具

✏️ 修改工具

📝 文本工具

🎨 組件工具

構建 DXT 包（開發者適用）

若要創建自己的 DXT 包，可運行以下命令：

npm run build:dxt    # 構建 TypeScript 並打包 DXT

此命令會生成 claude-talk-to-figma-mcp.dxt 文件，可用於分發。

🔧 技術細節

自動化測試

bun run test            # 運行所有測試
bun run test:watch      # 監聽模式
bun run test:coverage   # 生成測試覆蓋率報告

集成測試

bun run test:integration  # 進行端到端的引導式測試

手動驗證清單

• [ ] WebSocket 服務器在端口 3055 啟動。
• [ ] Figma 插件成功連接並生成頻道 ID。
• [ ] AI 工具識別 “ClaudeTalkToFigma” MCP（如 Claude Desktop、Cursor 等）。
• [ ] 基本命令能正常執行（如創建矩形、更改顏色）。
• [ ] 錯誤處理正常（如處理無效命令、超時等情況）。
• [ ] AI 工具與 Figma 之間的頻道通信正常。

🐛 故障排除與支持

連接問題

• “無法連接到 WebSocket”：確保 bun socket 正在運行。
• “未找到插件”：檢查 Figma 開發設置中插件的導入情況。
• “MCP 不可用”：
  • Claude Desktop：運行 bun run configure-claude 並重啟 Claude。
  • Cursor IDE：檢查 mcp.json 文件中的 MCP 配置。
  • 其他 AI 工具：驗證 MCP 集成設置。

執行問題

• “命令執行失敗”：查看 Figma 開發控制檯的錯誤信息。
• “未找到字體”：使用 load_font_async 驗證字體可用性。
• “權限不足”：確保你有編輯 Figma 文檔的權限。
• “超時錯誤”：複雜操作可能需要重試。

性能問題

• 響應緩慢：大型文檔可能需要更多處理時間。
• 內存使用過高：關閉未使用的 Figma 標籤頁，必要時重啟。
• WebSocket 斷開連接：服務器會自動重連，若問題持續，可手動重啟。

常見解決方案

1. 重啟流程：停止服務器 → 關閉 AI 工具 → 重新啟動兩者。
2. 徹底重裝：刪除 node_modules 文件夾 → 運行 bun install → 運行 bun run build。
3. 查看日誌：服務器終端會顯示詳細的錯誤信息。
4. 更新字體：部分團隊字體需要在 Figma 中手動加載。
5. 檢查配置：驗證 AI 工具設置中的 MCP 配置。
6. 解決端口衝突：確保端口 3055 未被其他應用佔用。

🏗️ 高級主題

架構深入解析

+----------------+     +-------+     +---------------+     +---------------+
|                |     |       |     |               |     |               |
| Claude Desktop |<--->|  MCP  |<--->| WebSocket Srv |<--->| Figma Plugin  |
|   (AI Agent)   |     |       |     |  (Port 3055)  |     |  (UI Plugin)  |
|                |     |       |     |               |     |               |
+----------------+     +-------+     +---------------+     +---------------+

設計原則：

• MCP 服務器：處理業務邏輯、驗證和設置默認值。
• WebSocket 服務器：負責消息路由和協議轉換。
• Figma 插件：在 Figma 環境中執行命令。

優勢：

• 職責清晰分離。
• 易於測試和維護。
• 可擴展架構，便於添加其他工具。

項目結構

src/
  talk_to_figma_mcp/     # MCP 服務器實現
    server.ts            # 主入口文件
    tools/               # 按功能分類的工具
      document-tools.ts  # 文檔交互工具
      creation-tools.ts  # 形狀和元素創建工具
      modification-tools.ts # 屬性修改工具
      text-tools.ts      # 文本處理工具
    utils/               # 共享工具函數
    types/               # TypeScript 類型定義
  claude_mcp_plugin/     # Figma 插件
    code.js              # 插件實現代碼
    manifest.json        # 插件配置文件

貢獻指南

1. Fork 倉庫並創建分支：運行 git checkout -b feature/amazing-feature。
2. 遵循代碼規範：遵循現有的 TypeScript 代碼模式。
3. 添加測試：為新功能添加測試用例。
4. 更新文檔：更新相關文檔內容。
5. 提交拉取請求：清晰描述所做的更改。

近期貢獻者

• Taylor Smits - 實現 DXT 包支持、自動化 CI/CD 工作流和改進測試（PR #17，PR #13，PR #14）。
• easyhak - 修復了在 Windows 操作系統上構建腳本無法正常工作的問題（PR #10）。

📋 版本歷史

當前版本：0.6.0

• 🚀 支持 DXT 包：可通過 Claude Desktop 的擴展管理器一鍵安裝（感謝 Taylor Smits - PR #17）。
• 📦 自動化分發：使用 GitHub Actions 工作流自動生成 DXT 包並上傳發布。
• ⚡ 提升用戶體驗：將最終用戶的安裝時間從 15 - 30 分鐘縮短至 2 - 5 分鐘。
• 🔧 開發者工具：新增用於 DXT 打包的構建腳本（npm run build:dxt，npm run pack）。

完整的版本歷史請查看 CHANGELOG.md。

📄 許可證

許可證：本項目採用 MIT 許可證，詳情請查看 LICENSE 文件。

作者：

• Xúlio Zé - Claude 適配 - GitHub
• Sonny Lazuardi - 原始實現 - GitHub

致謝：

• Anthropic 團隊開發的 Claude 和模型上下文協議。
• Figma 社區提供的優秀插件 API。
• Bun 團隊開發的快速 JavaScript 運行時。