design-to-code 這個題目的行銷噪音特別大，因為它的 demo 效果好而實際導入困難——選一個乾淨的 frame 生出漂亮的程式碼，拍成影片非常有說服力；而在一個圖層叫 Frame 1268、顏色是硬刻的真實專案裡，同一個工具的產出會讓人失望。本篇把本專欄的每一類陳述按證據強度分開，並明確標出官方沒有說明的部分。
所有查證的日期為 2026-11-01，主要來源為 developers.figma.com 與 Figma help center。
📖 A 級：官方文件所載（可覆核）
架構與定位
- MCP 的定義：「a standard interface that lets AI agents interact with data sources」
- 分工：MCP server 提供結構化設計脈絡，agent 寫出最終程式碼
- 結果取決於脈絡品質、模型、提示清晰度三者
- 遠端端點
https://mcp.figma.com/mcp（HTTP transport ＋ OAuth，不需桌面 App）；本機端點http://127.0.0.1:3845/mcp - 官方建議使用遠端伺服器；本機版定位為「for specific organization and enterprise needs」
- 只有 Figma MCP catalog 內的 client 能連遠端伺服器
- 官方 client 對照表有四欄：桌面、遠端、寫回畫布、plugin 或 skills
工具
- 完整工具清單、參數與 Remote only 標註（見 第三篇）
get_design_context以「看起來像 React 與 Tailwind」的格式描述設計download_assets至多 20 個 node- 寫入工具每次呼叫最多回傳 20 KB
create_design_system_rules為 MCP prompt，無參數- skills 清單；「Skills don’t replace the MCP connection or add new capabilities」
- 四個 shader 工具已棄用
限額與方案（見 第九篇）
- Professional 200／日、10／分；Organization 200／15；Enterprise 600／20；Education 200／10；Starter 不可用
- View／Collab 席次：所有方案每月 20 次
- 每分鐘限制額外疊加
- 不計入限額的四個寫入工具：
add_code_connect_map、create_new_file、generate_figma_design、whoami - Code Connect 需 Professional 以上 ＋ Full／Dev 席次
- Figma for Government 只支援本機伺服器且工具受限
- 企業託管授權目前只支援 Claude 透過 Okta XAA
- 存取仍受既有檔案權限約束
Code Connect
- 輸出包在
<CodeConnectSnippet>標記內，含設計屬性、import、用法片段、自訂指示 - CLI 版的片段是你寫的；UI 版由機器生成，官方評價「more basic」
- 多框架：遠端用
clientFrameworks，本機用 Dev Mode 選定的連接 - Professional 方案一次只能啟用一個框架，管理員於 Admin → Settings → Resources → Code Connect 切換
寫回畫布
- 可建立 frames、components、variants、variables、auto layout
- 核心工具
use_figma（透過 Figma Plugin API） - 要求：遠端伺服器、Professional 以上、編輯權限、草稿外需 Full 席次
- 限制：20 KB、
use_figma無法自行加圖、不支援含圖片影片的元件匯入與 GIF、字型須已上傳帳號、元件須手動發布才能完成 Code Connect - beta 品質，官方自述「may need manual review and cleanup」
- 官方警告：先在複本或草稿測試，保留備份
- beta 期間免費，之後變成按用量計費
官方建議的檔案結構
- 重複的做成元件；用 Code Connect 連到程式碼（「the most effective way」）；用變數管間距、顏色、圓角、字體；語意化圖層名稱（不要
Frame1268、Group5）；用 auto layout 避免絕對定位，生成前縮放 frame 確認；加註解說明難以視覺表達的行為；掛 dev resources
官方範例提示（逐字）
- 「Generate iOS SwiftUI code from the selected Figma frame.」
- 「Implement the selected frame using Chakra UI components.」
- 「Generate this using components from src/components/ui.」
- 「Add this component to src/components/marketing/PricingCard.tsx.」
- 「Implement this using our Stack layout component.」
- 「Get the variable names and values for this selection.」
各 client 的設定指令——Claude Code、Cursor、VS Code、Codex、Xcode 的完整指令與設定片段（見 第二篇）
📖 B 級：官方載明的「問題與緩解」
這些是官方自己承認的限制，可靠度等同 A 級，但性質是負面陳述，單獨列出以免被忽略。
- agent 會挑錯工具——官方的緩解是把要求講明確
- 大型選取會變慢、出錯或回傳不完整——官方未給具體門檻，建議選小範圍並先用
get_metadata - 伺服器會回傳網頁程式碼——因為中介格式是 React／Tailwind 風格；緩解是在提示指定框架、用 Code Connect 多框架、檢查方案設定
- 變數可能沒有正確帶入——官方只處理了「挑錯工具」這一個成因
- 官方另有疑難排解頁：工具載不出來、500 錯誤、卡住或變慢、圖片停止載入、client 相關問題
📖 C 級：官方沒有說明的部分
這些是我查了但找不到官方說法的，本專欄因此不寫死。
忠實度沒有任何量化指標。 官方與社群都主張「產出貼近設計」，但我找不到官方或第三方的量化評估（像素差異、token 命中率等）。第四篇 的忠實度分維度表是我的歸納，不是測量結果。
get_variable_defs 的輸出格式未載明。 我無法確認它回傳的結構，也無法確認多 mode（淺色／深色）變數是否會一併帶出。第六篇 的「動手做」就是為了讓讀者自行實測這一點。
變數名稱與 codebase token 名稱不一致時怎麼辦，官方沒有處理。 官方的「變數沒有正確帶入」頁只談了 agent 挑錯工具。這是實務上的常態問題，本專欄給的三種對應策略全部是我的設計。
Code Connect 的對應演算法未公開。 官方只描述輸出格式，沒有說明它如何判定某個 Figma 元件對應到哪支程式碼元件。
大型 frame 沒有具體門檻。 沒有 node 數、尺寸或位元組上限，只有定性描述。
credits 沒有公布金額。 generate_image、send_prompt、Weave 工具都消耗 credits，但官方未公布每單位價格；寫回畫布 beta 後的計費方式也未公布。
各 client 的功能支援差異沒有統一說明。 官方有對照表但內容會變，且部分功能標為「select clients」而未列出是哪些。
本機伺服器的未來不明朗。 官方把它描述為特定組織需求，Figma for Government 則只支援它。是長期並存還是逐步收斂，沒有官方說法。
📖 D 級：我的判斷與設計（並非事實）
以下全部是我的歸納，未經官方確認，亦未經實驗驗證。
框架與分級
- 能力四階段（讀取 → 對上設計系統 → 固化工作流 → 雙向同步）及其投報率排序——我的分級
- 「第一階到第二階的落差是最值得投入的地方」——由官方對 Code Connect 的描述推出，推論合理但官方未如此表述
- 忠實度分維度表（哪些維度會準、哪些不會）——我的歸納
- 「互動、響應式、無障礙是資訊問題不是能力問題」——機制上成立，但這個框架是我提出的
- 風險對照表與「可控／不可控」分類——我的分類
流程設計
- 第七篇 的三條流程全部是我的設計。官方提供了零件，沒有提供這樣的組裝方式
- 「誰做什麼」的分工對照表——我的歸納
- Code Connect 的導入順序（盤點 → 確認 codebase → 前 10 個 → 自訂指示 → 驗證 → 擴大）——我的設計
- 「連到淘汰元件是最大風險」——我的判斷，官方未提及
- 「
search_design_system是避免重生的第二道防線」——我的框架
實務建議
- 三種 token 命名對應策略——我的設計
- 三種指示機制（規則檔／Code Connect 自訂指示／skills）的分工表與「適用所有元件就寫規則檔，只適用某一個就寫 Code Connect」這條準則——我的歸納
- 其他 MCP 的搭配建議與「不要一次接太多」——我的判斷
- 「用連結而非選取」——由官方對兩種方式的描述推出的實務建議，官方未做此比較
- 「本機版是以功能換部署模式，不是免費的安全升級」——由 Remote only 標註推出，推論穩固但官方未如此表述
- Claude Code
--scope user的取捨建議——我的判斷 - 全部的「動手做」實驗設計
📖 E 級：行銷與社群說法，證據薄弱
- 「design to code 一鍵完成」——所有 demo 都成立，而它們都用乾淨的示範檔案。官方自己的文件花了大量篇幅講檔案結構、Code Connect 與規則檔，這本身就說明了產出品質不是開箱即得的。
- 「不用再寫 UI 程式碼了」——與官方的分工說明矛盾：agent 才是寫程式的那一方，而它的輸出取決於你給的脈絡與規則。而互動、響應式、無障礙三類資訊本來就不在設計檔裡。
- 「比截圖餵圖準很多」——方向正確，但幅度取決於你的檔案品質。一個沒有變數、沒有元件、圖層名稱是預設值的檔案，MCP 的優勢會小得多。這一點在推廣內容裡幾乎不會提到。
- 大量 2025 年的教學仍在流傳，教你去偏好設定開啟「Dev Mode MCP server」本機版。判斷一篇是否過期的最快方法：看它用哪個名稱、建議本機還是遠端、有沒有提到寫回畫布。
📖 總結：本專欄的正確用法
可以直接採信的：A 級與 B 級的全部——端點、工具清單與參數、限額數字、方案門檻、Code Connect 的輸出格式、寫回畫布的限制、官方範例提示。這些可以回官方文件覆核。
需要自行實測的：get_variable_defs 的實際輸出、你的檔案在大型選取下的實際表現、忠實度在你的專案裡的真實水準。C 級各項的「動手做」就是為此設計的。
應視為建議而非答案的：全部的流程設計、命名策略、導入順序、分工表（D 級）。它們是有根據的起點，不是標準做法。
最會過期的：client 支援表、限額數字、beta 功能的計費方式。超過數週之後閱讀，請先核對 developers.figma.com。
🔗 延伸資源
官方（一手）
- Figma MCP server 總覽 — 入口、能力列舉、client 對照表
- 工具與提示 — 完整工具清單
- 遠端伺服器安裝 — 各 client 設定指令
- 本機伺服器安裝
- Code Connect 整合
- 限額與存取
- 寫回畫布、code to canvas
- 組織 Figma 檔案
- 加入自訂規則
- 撰寫有效的提示
- MCP server vs 你的 agent
- 問題排解：避免大型 frame、回傳網頁程式碼、變數沒帶入、工具載不出來、500 錯誤、卡住或變慢、圖片停止載入
- 進階：建立 skills、指定觸發工具、把 Make 脈絡帶給 agent
- Figma Help Center — Guide to the Figma MCP server
站內相關
- 設計→工程交接 — 「交接品質＝資訊損耗率」的框架
- Engineering AI Coding Methodology — 方法論勝於生成物
- Light／Dark 主題 — 變數落到主題架構的實作
- MCP 與工具整合 — MCP 協定通識
- Problem Framing ＋ Spec-Driven Development — 設計之外的需求脈絡
- 全響應式 — 響應式實作的完整考量
查閱資料的建議：這個題目的二手內容大量過期，因為產品在 2026 年經歷了「本機 → 遠端」與「唯讀 → 雙向」兩次結構性改變。最快的過期判斷法：文章稱它為「Dev Mode MCP server」、教你在偏好設定開本機伺服器、完全沒提到寫回畫布——符合任一項就該回官方文件核對。遇到忠實度的百分比宣稱，直接當成行銷，因為官方自己都沒有公布任何量化指標。