兩個月前，我寫了一篇關於 Model Context Protocol (MCP) 的文章 《Claude + Cursor + Figma MCP：讓 AI 讀懂，甚至直接改設計稿？》，當時主要討論的都是開源社群透過 Figma 提供的 API 開發出來的 MCP Server，但 6/4，Figma 官方終於推出了自己的 Dev Mode MCP Server！
正文開始前，也可以先去回顧一下這篇文章：
Figma MCP Server
Introducing our Dev Mode MCP server: Bringing Figma into your workflow by Figma
不知道大家還記不記得先前使用第三方 MCP 時，需要手動設定 API Token，Figma MCP Server 直接整合在 Figma Desktop 中，直接從選單列開啟並設定環境後，便可以直接使用！
為什麼需要這個工具？
Figma 提到一個核心問題：Context is everything.
現在的 AI 雖然能寫出可以跑的 code，但如果你只是丟個 prompt 給它，沒有其他脈絡，產出的東西雖然能用，但很可能跟你的 codebase 風格完全不搭。因為每個團隊的 codebase 都不一樣 — 不同的架構、framework、命名習慣、工作流程，這些累積起來就像是團隊的「指紋」，AI 很難自己猜出來。
這就是為什麼需要 MCP 這種工具來提供額外的脈絡。它可以讀取現有的 code、檢查 repository 歷史、存取文件、理解資料庫結構，然後把這些資訊餵給 AI，讓它生成的 code 更精準、更符合你的系統。而 Figma MCP Server 就是把設計的脈絡也加進來，讓工程師更了解設計師的設計意圖（Design intent）。
Figma Developer Advocate Jake Albaugh 談什麼是「將 code 和設計意圖對齊」
設計師和工程師的工作流程差異？
Figma 還提到一個有趣的觀察 🔍
工程師打開 Figma 檔案時，第一件事通常是縮放到最小來看整體結構，然後思考要怎麼把這個 feature 拆分到不同的 code 檔案裡。他們會邊做邊檢查，確保 pattern 是對的，把 placeholder 內容想像成真實的資料。
換句話說，工程師看設計稿的角度跟設計師完全不同，他們看的是「這要怎麼做」，而不是「這長什麼樣」。
Figma MCP Server 就是要幫 AI 也用工程師的角度來理解設計，提供視覺資訊之外更細緻的設計意圖，同時也從現有的 pattern 和系統中學習。
Dev Mode MCP Server 的四大類功能
根據 Figma 的官方部落格文章，Dev Mode MCP Server 主要提供四大類功能：
精準識別設計中使用的 Components 和 Variables
提供 Code Connect 映射，直接指向對應的程式碼檔案（抱歉這邊我只能直翻，我也沒有很理解）
減少 AI 搜尋 codebase 的時間，避免重複建立已存在的元件
2. Screenshots
提供設計的視覺脈絡
幫助 AI 理解整體 layout 和頁面流程
補充純 metadata 無法傳達的設計意圖
生成包含狀態邏輯的 code
理解元件的行為模式，不只是靜態 style
提供 pseudo-code 來描述複雜的互動流程
4. Content
解析 layer名稱、註解和文字內容
理解 placeholder 內容背後的資料結構
幫助 AI 推斷後端資料 model 的需求
也就是說，可以讓 AI 讀懂你的設計內容的技巧更上一層樓！
Do-re-mi-sol, 實際動手做時間 ⁽⁽٩(๑˃̶͈̀ ᗨ ˂̶͈́)۶⁾⁾
一開始我先和 Claude 宣示我想測試的雄心壯志，於是他推薦我使用 Claude Code 來實作（後來想想是不是被騙）。
Claude Code 需要完全在 terminal 環境中使用！
整個設定過程包含安裝 Claude Code、在 Figma Desktop 中啟用 MCP Server，以及透過 command 連接兩者。當連接成功後，操作的方式就非常簡單：
Step 1: 在 Figma Desktop 中選擇一個元件
我選擇 Button Navigation 來做測試
Step 2: 在 Claude Code 中對話，請求生成該選中元件的程式碼
Step 3: AI 自動讀取選中元件並生成對應的 React/CSS code
接著你就會得到 AI 生成對應的 code
從這張畫面可以發現，MCP 成功讓 AI 讀懂了選中的元件是一個有 5 個 tab 的 bottom navigation，以及有哪些 tab。
不過，以我身為設計師的小腦袋瓜，在設定的過程中不算順利，遇到了這些問題：
MCP Server 有時啟動失敗，需要重啟 Figma Desktop
Claude Code 初次無法偵測到 Figma 工具，需要多次重啟（有可能是我的資料夾設定錯位置）
Token 限制問題：如果是選擇太複雜的元件，產生程式碼時會超過 25,000 token 限制（我第一次直接貪心請他生成一個畫面的 code，跑了 180 秒後跟我說它做不到 🙂↔️）
發現重要的 AI 問題：中文字符識別錯誤
傻 vs. 僅，你發現嚕ㄇ？
在測試過程中，我發現了一個有趣的問題：我的 Figma 設計稿中原本寫著「傻子與白痴」，但 MCP Server 生成的程式碼卻變成了「僅子與白痴」 ，傻 被誤讀成 僅 。
問 Claude 後才知道，這是 OCR（光學字符識別）的問題。因為「傻」和「僅」有相似的視覺結構，AI 在處理中文字符時容易混淆，特別是在字體較小或特定字體的情況下。
技術流程是這樣的：
渲染設計元素
套用 OCR 提取文字
用提取的文字生成程式碼
特別是中文這種非拉丁文字，字符識別更具挑戰性。對台灣的設計師來說，這個問題特別需要注意，因為我們的設計稿大多包含中文內容。雖然這個工具很酷，但產出的程式碼需要進一步驗證生成的文字內容。
主要是給工程師的工具，但對設計師有用嗎？
To be honest, 不太有⋯⋯
相信讀到上面的你已經可以理解，這本質上是為了讓工程師可以寫出更貼合設計意圖的 code 的工具，實質上對設計師的影響不大。
我自己覺得如果在設計系統完善的狀態下，可能可以免去被工程師抓著問數值（雖然如果有 Dev Mode 也可以做到）。為了讓設計稿和工程端更無縫接軌，設計師也需要更嚴謹的使用 Components 和 Variables。
但說實話，這些改變對設計師的工作流程真的有限，更多是間接和工程師的溝通方式改變。
現階段還是 Beta，Figma MCP 可能適合⋯⋯
在實際試玩過後，初步的心得是這項工具比較適合大型且有成熟設計系統的團隊，特別是那些已經建立完整 Code Connect、Design Token 和 Code 對齊度高，而且設計師工程師合作緊密的團隊。
反過來說，如果你是小團隊、設計系統還不完整，或是習慣傳統工作流程的話，現階段的學習成本可能會大於實際收益。
（也歡迎工程師們和我分享你們使用的心得！(ㆆᴗㆆ)）
我是設計師，我需要理解 MCP 嗎？
雖然有很多 MCP 的討論，不過就我這幾次的嘗試還是認為不足以改變我目前的設計流程，但現階段可以做的事情是認識這項技術、試著了解它，而當真正有用的 AI 設計功能出現時，有了這些基礎概念，我會更容易判斷和使用！
Figma MCP Server 確實是個有趣的嘗試，現在的新工具也越來越多，但千萬要一直告訴自己別被新工具綁架，工具的價值在於解決實際問題，不是為了用新技術而用。如果你現在的流程很順，沒必要為了追新而改變～
最重要的是，無論工具怎麼進化，我們可以保持開放心態學新東西，但設計的核心不會變：理解問題、創造解決方案、持續改善使用者體驗，並達成我們的設計目標✨
