Home

Figma MCP 與 Claude Code 串接指南

使用 Figma MCP Server 將設計稿、元件與 FigJam 內容帶入 Claude Code，並完成 OAuth 授權與基本驗證。

Figma MCP Server 可以讓 Claude Code 讀取 Figma 的設計上下文，例如元件、變數、版面資料與 FigJam 內容，再用這些資訊產生或修改程式碼。Figma 目前建議一般使用者採用 remote MCP server；desktop server 適合需要本機 Figma App 的特定情境。

前置需求

  • 已安裝 Claude Code。
  • 擁有可存取目標檔案的 Figma 帳號。
  • 使用 remote server 時，可從瀏覽器開啟 Figma；不必常駐 Figma desktop app。

1. 安裝 Figma Plugin

在終端機執行官方建議的 plugin 安裝指令：

demo.sh
claude plugin install figma@claude-plugins-official

若 Claude Code 正在執行，完成安裝後重新啟動它。

2. 完成 OAuth 授權

  1. 在 Claude Code 輸入 /plugin。
  2. 開啟 Installed 分頁，選擇 figma。
  3. 開始授權流程，瀏覽器出現 Figma 授權頁後按 Allow access。
  4. 回到 Claude Code，再次執行 /plugin，確認 Figma server 狀態為 connected。

授權只會讓 MCP 依你的 Figma 帳號權限存取檔案；不要把 OAuth token 或任何個人設定檔提交到 Git。

3. 讀取 Figma 設計稿

  1. 在 Figma 選取要分析的 frame、layer 或 component。
  2. 右鍵選擇 Copy link to selection。
  3. 將連結貼到 Claude Code 對話中。

Prompt 例如：

請讀取這個 Figma frame，整理尺寸、間距、顏色、字型與互動狀態，並產生對應的元件規格。
<FIGMA_SELECTION_URL>

Claude 會依連結取得設計上下文或畫面截圖；能讀取的內容取決於 Figma 帳號對該檔案的權限。

4. 寫入 Figma 設計

若帳號與方案支援 write-to-canvas 功能，可以用自然語言要求 Claude 建立或更新原生 Figma 內容

Prompt例如：

請在這個 FigJam board 建立一張登入流程圖：<FIGJAM_BOARD_URL>

寫入共享檔案前，先確認目標檔案與節點，避免覆蓋其他人的修改；必要時先在複本或 draft 中操作。

可建立或修改的內容包括：

  • Figma Design 的 frame、component、auto layout、variables 與 styles。
  • FigJam 的 section、sticky、shape、connector 與 text。
  • 依現有 design system 產生新的 UI 畫面或元件。

5. Figma URL 格式

類型 URL 格式
Design https://www.figma.com/design/:fileKey/...
FigJam https://www.figma.com/board/:fileKey/...
Slides https://www.figma.com/slides/:fileKey/...

連結中的 fileKey 是檔案識別碼；node-id 是選取的節點。例如：

https://www.figma.com/board/<fileKey>/project?node-id=4-2

這裡的 node-id=4-2 通常對應 MCP 使用的 4:2。

6. Desktop MCP Server（可選）

只有需要使用本機 Figma App 或特定 desktop-only 流程時才需要這個方式：

  1. 開啟 Figma desktop app 與一個 Design file。
  2. 切換至 Dev Mode，並在右側啟用 MCP server。
  3. 複製本機 MCP URL。
  4. 在 Claude Code 執行：
demo.sh
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
  1. 重新啟動 Claude Code，執行 /mcp 確認連線。

一般情況優先使用 remote MCP，不必同時設定兩種 server。

疑難排解

Plugin 安裝失敗

確認組織管理員沒有封鎖 plugin 安裝；若是個人帳號，重新執行安裝指令並檢查 Claude Code 版本。

Figma server 沒有顯示 connected

重新啟動 Claude Code，再從 /plugin 的 Installed 分頁重新開始授權。

Claude 找不到設計檔

確認使用的是 Figma 的 Copy link to selection，而且登入的帳號具備該檔案存取權限。

寫入操作出現權限錯誤

讀取功能與 write-to-canvas 的可用性可能不同；確認帳號 seat、方案與目標檔案權限，必要時先在 draft 檔案測試。

參考資料: