接通 Figma：用 MCP 抓 metadata，意外好用但缺了元件庫的細節

設計稿很完整該有的都有，但是⋯

同上一篇，這份FFigma設計稿很完整該有的都有，但對機器和整理的人來說，這樣的結構會讓產生出來的程式碼嚴重失真。接通 REST API 後發現無法讓 Agent 自動讀取設計稿，於是試著使用 Figma MCP。

先用 Figma MCP 連檔案，挑 1–2 個核心元件（例如 primary button），看看在「不清理 Figma」的前提下能抽出多乾淨的 metadata。這個實驗結果會直接告訴你需不需要清理、要清理多少——如果結果意外可用，整個 cleanup 階段就能跳過；如果完全慘不忍睹，再決定範圍。

---

Step 1｜選一個元件

從 Figma file 裡挑一個最核心、最常被使用的元件——通常是 primary button（因為它牽涉 color、typography、spacing、radius、state 五種 token）。挑一個就好，不要多。

Step 2｜用 Figma MCP 抓 metadata

透過 Agent + Figma Dev Mode MCP 直接讀那個元件，把實際抓到的資料 dump 出來，可以看到三件事：

1. 原始 metadata 長什麼樣（layer 名稱、styles、variables）
2. Figma 在它能力範圍內已經正規化了哪些東西（例如有沒有用 variable）
3. 哪些東西需要在 code 端清洗

Step 3｜決定清理範圍

看完真實資料後再回來判斷：是「Figma 雖然亂但 metadata 還算可用，可以直接萃取」，還是「連 MCP 都讀不出像樣的東西，至少要修這幾個元件」。這個判斷不能靠想像，只能看資料說話。

要跑這個實驗，需要兩樣東西：

1. 元件在 Figma 裡的連結（點該元件 → 右鍵 → Copy link to selection；或直接給整個 file 的 URL 加上 node-id）
2. 確認 Figma Dev Mode MCP 是開著的

---

設置 Figma MCP server

官方教學：

• Codex and Figma
• Claude Code and Figma

開始前先確認以下項目：

1. 安裝並開啟Figma 桌面應用程式

2. 設計稿必須是 Dev Mode，先確認團隊方案

   • 確認原始檔所在團隊方案不是免費（Starter）方案
   • Figma 的 Dev Mode（以及 Dev Mode MCP）需要 Professional 以上才能用

3. Enable Dev Mode MCP server

   這個功能超級難找，還好有搜尋功能

   1. 點左上角像葡萄的 Figma icon，用 Actions 搜尋 Dev
   2. Switch to Dev Mode

---

MCP server 連接到 Agent

Codex 無法用 CLI 連結，需要透過 APP；想要快速接通，改回使用 Claude Code。

1. 安裝 plugin

1. 終端機執行：claude plugin add figma@claude-plugins-official
2. 按下 Enter 開始安裝。
3. 如果 Claude Code 正在運行，重新啟動它。
4. 輸入 /plugin 並按 Enter 開啟插件市場。
5. 用方向鍵導覽至**已安裝（Installed）**標籤。
6. 導覽至 figma 伺服器，按 Enter 啟動授權頁面，再按一次 Enter 開始身份驗證——會開啟一個外部頁面。
7. 點一下**「允許存取」**完成身份驗證，讓 Claude Code 存取 Figma 帳戶。完成後回到終端機，再次輸入 /plugin。

2. 新增 MCP

1. 終端機執行：claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
2. 重新啟動後輸入 /mcp 確認連線狀態

---

撈到的資料長什麼樣

這次選取卡片，輸入 /mcp__figma-desktop__get_code_for_selection。

花了將近一小時，但只消耗 7% 的 token——意外的省，結果也讓人驚訝。

抓回來的不只是卡片的 raw metadata，Agent 還直接幫忙整理進我的程式碼裡。雖然缺少很多東西，但比之前用 REST API 好太多了。

後續開始調整成想要的元件庫模樣，重視的項目有以下：

1. 可規則化：透過 props 參數就能調整
   • 類型 variant
   • 大小 size
   • 滑鼠 hover 和 disabled 效果
   • 其它（block、是否有 icon）
2. 可預覽：透過互動模式驗證，並在三種主要底色上呈現
3. 可重複使用：組件使用方法清楚

但這一輪還是少了我想要的元件庫樣貌——像是 card1、2、4、card7、card5、6、card3 應該可以歸併成同一個組件，最終只要四種就夠。

截至 2026 年六月，Agent 真的像一個很會做表面的新人員工，但深思一下原因根本都是溝通問題——果然不管是和人類還是和 AI，都還是得把話講清楚 😃

---

經過兩個小時的調整，終於變成我要的東西了。

在這個階段調整了以下事項：

1. 新增 Figma → code 的流程
2. 把原本的 CSS 改成 SCSS 架構
3. 新增檢查 SCSS 寫法的流程：後續只要執行 /check-style 就會開始
4. 增加版本控制：git init

接下來想直接在正式環境驗證封裝好的組件是否成立（好用），下一篇就來記錄這個成效。