Figma MCP 進階教學：七大工具解析、Code Connect 與雙向工作流完整攻略
2026年3月4日 上午 3:36
UI/UX 設計
📌 目錄
如果你看過我之前那篇 Claude Code to Figma 教學，應該已經知道怎麼把 AI 生成的介面丟到 Figma 畫布上。但老實說，那只是 Figma MCP 能力的冰山一角。
MCP（Model Context Protocol）不只是一個「擷取畫面」的工具，它是一整套讓 AI 讀懂你設計檔、理解你的 Design System、甚至反向從 Figma 生成程式碼的協議。這篇文章要帶你走完整個進階流程——從七大 MCP 工具的用法，到 Code Connect 設定、雙向工作流的完整循環，再到怎麼優化你的 Figma 檔案結構讓 AI 更精準地輸出。
這不只是給工程師看的。如果你是設計師，了解這些機制會讓你的設計檔本身變成一種「可被 AI 執行的規格書」——這在 2026 年的設計工作流裡，是一個巨大的競爭優勢。
為什麼需要進階篇？
上一篇文章聚焦在 Code to Canvas 功能——用 Claude Code 建介面，然後送到 Figma。但 Figma MCP 的完整能力遠不止於此：
🔽 Design → Code（設計轉程式碼）
選取 Figma 裡的 Frame，AI 直接讀取結構、變數、元件關係，生成符合你 codebase 的程式碼。
🔼 Code → Design（程式碼轉設計）
用 Claude Code 建好的網頁，直接擷取成可編輯的 Figma Frame，在畫布上協作。
🔄 雙向同步（Roundtrip）
設計 → 程式碼 → 擷取回 Figma → 修改 → 再推回程式碼。每個循環都保留 context，不會從零開始。
要玩轉這整個循環，你需要搞懂 MCP 底下的每一個工具、Code Connect 怎麼設定、以及怎麼讓你的 Figma 檔案結構「對 AI 友善」。這就是這篇要講的。
兩種 MCP Server 的差異
Figma 現在提供兩種 MCP Server，功能和使用方式不太一樣，選錯了你會踩坑。先搞清楚：
| 比較項目 | Desktop MCP Server | Remote MCP Server |
|---|---|---|
| 運行位置 | 本地端（127.0.0.1:3845） | Figma 雲端（mcp.figma.com） |
| 需要桌面 App？ | ✅ 必須 | ❌ 不需要 |
| 設計取用方式 | 選取 Frame（Selection-based） | 貼上 Figma 連結（Link-based） |
| Code to Canvas | ❌ 不支援 | ✅ 支援 |
| 支援的 AI 工具 | VS Code、Cursor、Windsurf、Claude Code | Claude Code、Codex（OpenAI） |
| 圖片資源處理 | 可下載到本地 / localhost 連結 | 透過雲端 API |
| 適合場景 | 日常開發、快速選取實作 | 遠端協作、Code to Canvas |
💡 實務建議
如果你主要用 Claude Code，建議兩個都設定。Desktop Server 適合快速從 Figma 選取 Frame 生成程式碼（Design → Code），Remote Server 則是做 Code to Canvas（Code → Design）的唯一選擇。兩者可以同時運行，不衝突。
MCP 工具全解析：七大核心指令
Figma MCP Server 不是一個單一功能，它底下有一組工具（tools），每個工具負責提供不同類型的 context 給 AI。搞懂這些工具，你才能下對 prompt、拿到精準的輸出。
1
get_design_context
讀取設計結構
這是最常用的工具。它會回傳你選取的 Figma Frame 的完整結構——圖層、Auto Layout、元件、變數引用，預設以 React + Tailwind 格式輸出。你也可以在 prompt 裡指定其他框架。
2
get_variable_defs
提取 Design Token
回傳選取 Frame 中使用的變數和樣式——顏色、間距、字型。這讓 AI 不是隨便猜一個 #ff0000，而是用你 Design System 裡定義好的 Token 名稱。
3
get_screenshot
擷取視覺參考
回傳選取 Frame 的截圖。AI 可以用這個截圖作為視覺參考，搭配 get_design_context 的結構資料一起判斷。特別適合有互動元素（地圖、動畫、影片嵌入）的設計。
⚡ 進階技巧：Figma 官方建議的最佳實作流程是先跑 get_design_context，再跑 get_screenshot，兩者結合才能讓 AI 同時理解結構和視覺意圖。
4
get_code_connect_map
元件對應查詢
回傳 Figma 元件和程式碼元件之間的映射關係。例如：Figma 裡的「Primary Button」對應到你 codebase 裡的 <Button variant="primary" />。這就是 Code Connect 的核心能力。
5
generate_figma_design
Code to Canvas 核心指令
就是上一篇介紹的 Code to Canvas 功能。把你瀏覽器裡正在跑的 UI 擷取成 Figma 可編輯的設計圖層。目前只有 Remote MCP Server 支援，且僅限 Claude Code 和 OpenAI Codex。
6
get_figjam
讀取 FigJam 圖表
把 FigJam 裡的流程圖、架構圖轉換成 XML 格式，讓 AI 可以理解圖表內容。你可以把早期規劃階段的 FigJam 白板直接作為開發 context。
7
generate_diagram
AI 生成 FigJam 圖表
反過來：讓 AI 根據你的描述或文件，直接在 FigJam 裡生成流程圖、序列圖、甘特圖。用 Mermaid 語法驅動，但輸出是可編輯的 FigJam 圖表。
Code Connect：讓 AI 用你的元件寫程式
如果 MCP 是橋樑，Code Connect 就是橋上的路標。它告訴 AI：「Figma 裡的這個元件，對應到 codebase 裡的哪個檔案、哪個 component。」
沒有 Code Connect 的時候，AI 看到你設計裡的一個按鈕，它只能根據樣式猜測，然後從零寫一個新的 Button 元件。有了 Code Connect，AI 會直接引用你已經存在的 <Button /> 元件，包含正確的 import 路徑、props、variant。
Code Connect 怎麼運作？
在 Figma 元件庫建立映射
透過 Figma 的 Code Connect 功能，把每個 Design System 元件跟對應的程式碼檔案連結。例如把 Figma 的「Button/Primary」連到你專案裡的 src/components/Button.tsx。
MCP 讀取映射資訊
當你用 get_design_context 取得設計結構時，MCP 會同時回傳 Code Connect 的映射資料，告訴 AI 每個元件在你 codebase 裡的確切位置。
AI 生成引用既有元件的程式碼
AI 不再從零創建元件，而是 import 你現有的元件，用正確的 props 組合出頁面。結果更乾淨、更符合你的 codebase 規範。
🔮 自動偵測功能
MCP 現在還有 get_code_connect_suggestions 工具，可以自動掃描你的 codebase 和 Figma 元件庫，建議可能的映射關係。你確認之後，用 send_code_connect_mappings 寫入。不用手動一個一個對。
同理，你也可以在 Figma Variables 裡加上 Code Syntax，讓每個 Design Token 帶有程式碼語法。例如一個顏色 Token 叫做 brand/primary，你可以設定它對應的 CSS 變數是 var(--color-brand-primary)。MCP 會把這個資訊一併傳給 AI。
雙向工作流實戰：完整循環教學
這是整篇文章的核心。我把完整的雙向工作流拆成一個循環，從設計到程式碼再回到設計，每一步都有具體的操作方式：
🔄 Figma MCP 雙向工作流循環
在 Figma 完成設計
確保用了 Variables、Auto Layout、元件化結構。圖層命名清楚。
用 MCP 讀取設計 → 生成程式碼
在 Claude Code 裡：「用 Figma MCP 讀取這個 Frame，生成 React 元件」。AI 會呼叫 get_design_context + get_screenshot。
在本地測試、調整、迭代
跑起 dev server，用 Claude Code 持續調整互動邏輯、動效、responsive 等。
用 Code to Canvas 送回 Figma
「啟動 local server，把 UI 擷取到 [Figma 檔案 URL]」。可以一次擷取多個頁面狀態。
團隊在 Figma 畫布上 Review
把多個方案並排比較、標註、討論，不需要看程式碼就能參與。
根據回饋修改 → 重複循環
在 Figma 確認修改方向 → 回到 Claude Code 調整 → 再送回 Figma。每次循環都保留 context。
多畫面擷取技巧
Code to Canvas 支援在同一個 session 裡擷取多個頁面。比如你做了一個完整的 onboarding flow，可以這樣操作：
Prompt 範例
→ 擷取完成
"接著也擷取註冊頁到同一個檔案"
→ AI 會推斷你要用同一個 Figma 檔案
"再把 Dashboard 也加進去"
→ 三個頁面都在同一個 Figma 檔案裡，保留順序
設計檔案優化：讓 MCP 讀懂你的設計
MCP 的輸出品質，直接取決於你 Figma 檔案的結構品質。把設計檔做好，等於是在寫一份 AI 可以執行的規格書。以下是具體的優化方向：
1. 圖層命名要語意化
MCP 會讀取圖層名稱作為 context。Frame 47 對 AI 毫無意義，但 hero-section/cta-button 就非常清楚。
2. 善用 Figma Variables
別直接在元件上寫死顏色值。用 Variables 定義 Primitive Token（基礎色、間距、圓角），再用 Semantic Token 引用它們。MCP 的 get_variable_defs 會直接提取這些 Token，讓 AI 生成的程式碼自動使用正確的 CSS 變數或 Tailwind class。
3. 用 Auto Layout，不要絕對定位
Auto Layout 的結構會被 MCP 轉譯成 Flexbox/Grid，AI 可以精準地重建你的排版邏輯。手動定位的圖層只會變成一堆 absolute positioning，完全不可維護。
4. 元件化一切可重複的東西
如果你的設計裡有重複出現的卡片、按鈕、導航列，一定要做成 Figma Component（而不是 copy-paste 的獨立 Frame）。MCP 會辨識出它們是同一個元件，生成的程式碼也會共用同一個 component。
5. 加上 Annotations（標註）
Figma 的 Annotations 功能可以在元件上加上額外的 context——accessibility 要求、互動行為、內容說明。MCP 會把這些標註一併傳給 AI，讓生成的程式碼考慮到無障礙設計和互動邏輯。
FigJam × Claude：圖表生成新玩法
2026 年 1 月，Figma 推出了 Claude × FigJam 的整合。這不是設計轉程式碼，而是讓 AI 直接在 FigJam 裡生成可編輯的圖表。
你可以在 Claude 對話裡丟一份 PRD、一張截圖、一段文字描述，AI 就會用 Mermaid 語法生成 FigJam 圖表。支援的圖表類型包括：
USER FLOW
流程圖
用戶旅程、操作路徑
GANTT CHART
甘特圖
專案時程、里程碑
SEQUENCE
序列圖
API 呼叫、系統互動
ARCHITECTURE
架構圖
系統元件、資料流
這對設計師的價值在於：你不用手動畫 User Flow 了。描述你的功能邏輯，Claude 幫你在 FigJam 裡生成初稿，你再在白板上跟團隊一起修改。而且這些 FigJam 圖表也可以透過 get_figjam 工具被 AI 讀取，作為後續開發的 context。
💡 使用方式
在 Claude 瀏覽器版或桌面版加入 Figma Connector（在 Claude Opus 4.5 和 Sonnet 4.5 上可用）。連接後，在對話中直接請 Claude 生成 FigJam 圖表即可。
Skills 系統：給 AI 一份工作說明書
Figma MCP 最近引入了一個叫 Skills 的概念。簡單來說，Skills 就是一組預設的指令，告訴 AI 在處理 Figma 設計時應該遵循什麼流程、用哪些工具、怎麼組合結果。
你可以把它想成是新人到職時的 onboarding 文件——不是給他新的工具，而是告訴他「用這些工具的時候，流程是什麼、優先順序是什麼」。
Figma 官方提供了幾個內建 Skills，包括：實作設計（先 get_design_context 再 get_screenshot）、建立 Code Connect 映射、生成 Design System Rules 等。你也可以在你的 MCP 設定裡加入自訂的 Rules 檔案，定義你團隊的實作規範。
自訂 Rules 範例（放在專案根目錄的 .cursor/rules 或 .claude/rules）
1. 先跑 get_design_context 取得結構
2. 再跑 get_screenshot 取得視覺參考
3. 下載必要的圖片資源
4. 把 React + Tailwind 輸出轉換成本專案的框架
5. 用專案的 Design Token 替換 Tailwind 值
6. 對照截圖確認 1:1 視覺一致性
另外，MCP 現在還能自動掃描你的 codebase，生成一份結構化的 Design System Rules 檔案——包含 Token 定義、元件庫、樣式階層、命名規範。這份檔案讓 AI 在生成程式碼時，自動遵循你團隊的標準。
常見問題與限制
Figma MCP 很強，但不是完美的。在你投入之前，這些限制你應該先知道：
⚠️ 授權門檻
Code Connect 等進階功能需要 Figma Organization 或 Enterprise 方案（$45/editor/月）。免費和 Professional 方案的使用者功能受限。Desktop MCP Server 的免費用量是每月 6 次工具呼叫。
⚠️ Code to Canvas 目前限制
generate_figma_design 只有 Remote MCP Server 支援，目前只能在 Claude Code 和 OpenAI Codex 上使用。Cursor、Windsurf 等工具暫時還不行。
⚠️ 精確度需要人工覆核
AI 生成的程式碼是一個很好的起點，但間距、動效、互動邏輯通常還需要手動調整。特別是複雜的多畫面 flow，每個 Frame 需要個別擷取再組合。
⚠️ Desktop Server 只能選一個圖層
Desktop MCP Server 一次只能讀取一個選取的圖層。如果你的設計有很多 Frame，需要逐一處理或用 Remote Server 搭配連結。
重點整理
📝 重點整理
→
Figma MCP 有兩種 Server：Desktop（選取式、本地端）和 Remote（連結式、雲端）。建議兩個都設定。
→
七大 MCP 工具各有用途：get_design_context（結構）、get_variable_defs（Token）、get_screenshot（視覺）、get_code_connect_map（元件映射）、generate_figma_design（Code to Canvas）、get_figjam（讀圖表）、generate_diagram（生成圖表）。
→
Code Connect 讓 AI 引用你既有的元件，而不是每次從零寫。搭配 Variable Code Syntax 效果更好。
→
雙向工作流是完整的循環：設計 → 生成程式碼 → 測試 → 送回 Figma → Review → 修改 → 重複。
→
設計檔案的品質直接影響 MCP 輸出品質。語意化圖層命名、Variables、Auto Layout、元件化是基本功。
→
FigJam × Claude 可以從文件自動生成流程圖、甘特圖，大幅加速規劃階段的工作。
