【設計師的 AI 秘笈】全網最簡教學！用 Codex + Figma MCP 自動搭建設計系統與整理圖層

設計師必看！教你如何將 Codex 結合 Figma MCP ，讓 AI 自動幫你提取Variables、命名圖層並搭建基礎設計系統。內附「最省 Token 額度 4 招」與「5 步標準工作流」，大幅提升設計效率！

讓 AI 成為你的 Figma 專屬助理

還記得之前我教過大家用 Claude 串接 Figma 直接「生成設計稿」嗎？現在 AI 更強大了，連設計師最頭痛的 Design System 都能一手搞定！

面對滿天飛的「Frame 123」、手動整理圖層、提取Variables，這些枯燥的體力活總會耗盡我們的耐心。但現在透過 MCP，這一切都能自動化。

那如果有不懂的朋友，我簡單說一下，MCP 就像給 AI 配備了「眼睛」和「手」。它能直接讀取你的 Figma 檔案連結，並實際替你代勞，我這邊做的案例是：

• 一鍵提取並寫入 Variables
• 自動重新命名混亂圖層
• 快速搭建初版（v1）設計系統（我這次做的是初版）

今天這篇教學，我會用最精簡的步驟，帶你實作 AI 結合 Figma MCP 的完整流程，並分享「最省額度」的基礎工作流，幫你徹底解放生產力！

第一階段：環境建置與連線測試（3 步驟快速搞定）

要讓 AI 幫忙做事，第一步就是要幫這位「虛擬實習生」辦理入職。整個設定過程非常直覺，只需要以下三個步驟：

Step 1. 下載並登入 AI 客戶端

首先，前往 Codex 官網（或使用 Claude 桌面版、Cursor 等支援 MCP 的工具）下載對應作業系統的客戶端。以 Mac 為例，下載並安裝完成後，請先將你的帳號登入準備好。

Step 2. 安裝與連接 Figma MCP

進入軟體後，不需要懂複雜的程式碼。你可以直接在對話框輸入指令：「幫我連接 Figma 的 MCP」；或者在外掛程式中直接搜尋「Figma MCP」。接著，AI 就會一步一步引導你完成授權與安裝。這一步，等於是正式把進入 Figma 工作室的「鑰匙」交給了 AI。

個人小心得：連接MCP的動作相較Claude，真的簡單多了。

Codex 更新後，為什麼越來越多人放棄 Claude Code？3 個讓你「無痛自動化」的實戰教學

Codex 大更新後，越來越多人開始放棄 Claude Code。原因不是模型，而是使用體驗。從定時任務、自動操作電腦，到多 Thread 工作流管理，Codex 正在從 AI 編程工具，進化成真正的 AI 桌面助理。本文帶你完整解析，為什麼非工程師也開始全面轉向 Codex。

AI郵報Joanna Chang

Step 3. 丟連結測試連線狀態

安裝好 MCP 後，我們得先確認是不是真的接通了。這個測試步驟非常關鍵：

1. 取得連結：先在 Figma 裡面隨便找一個設計稿，把網址複製下來。
2. 發送給 AI：把這個連結直接貼到 Codex 的對話框裡，並詢問：

[link]你能看到這個設計稿裡面的圖層和畫面嗎？

第二階段：實戰演練！讓 AI 自動搭建設計系統

環境設定好後，我們直接拿一份在community 的 Figma 設計稿來實戰。只要對 AI 下達明確的指令，它就能一步步幫你把亂糟糟的設計稿變成有條理的系統。

1.提取 Variables並寫入 Figma

把你要整理的設計稿連結貼給 AI，並下達指令：

[link]
請幫我提取當前這個 Figma 頁面設計稿的 Variables，並透過 MCP 寫入 Figma 中。接著，幫我重新命名混亂的圖層，並把剛才的變數綁定到具體的圖層上。

這時候，AI 就會自動分析你的設計稿，幫你把顏色、間距等數值抓出來，並在 Figma 後台建好 Variables，並將圖層重新命名。

2.基於Variables，自動搭建初版 設計系統

最後，我們下達終極指令：

根據剛才訂好的 Variables，幫我在這個 Figma 檔案中新建頁面，搭建一套基礎版的設計系統（包含核心組件與封面）

這個步驟 AI 會需要運算久一點。它會開始抽象化畫面上重複的元素，並在你的 Figma 檔案中「新建頁面」，甚至連 design system 的封面都幫你做出來。

因為此篇文章只是想告訴各位可行性，所以是用簡易的system及畫面去做出呈現，如果要在新增的話，務必一段段新增，各位可以再自行去玩玩看。

最省 AI 額度的 4 個溝通秘訣

AI 雖然聰明，但如果讓它漫無目的地運算，可是會狂燒你的 Token 額度！為了最高效地交流，請務必記住以下 4 個秘訣：

• 一次只給明確範圍：千萬別一上來就丟整個檔案連結！請優先給「具體 Frame的連結」，例如明確指示「幫我處理這頁裡的新增組件」。如果丟整份文件，AI 會先把全檔案掃一遍去尋找代表性頁面，非常浪費Token。
• 明確指定目標類型：你要清楚告訴 AI 這次任務的目的是什麼。是提取設Variables？做出 Component？還是單純整理圖層？指令越具體，AI 的動作越精準。
• 明確告知優先級：告訴 AI 執行的先後順序。例如：「先做可複用的Component，不用整理圖層。」讓額度花在刀口上。
• 提前提供品牌規範：如果你們已經有官方標準的字體、顏色、圓角或間距數值，記得「提前」提供給它。這樣 AI 就不會自己瞎猜，省去反覆修改、重新運算的成本。

設計師必備：與 AI 協作的 5 步基礎工作流

結合上述的省錢秘訣，我為大家總結了一套與 AI 搭配的最佳 SOP，照著做絕不翻車：

Step 1. 先選 1 到 2 個最成熟的頁面：挑選元件最齊全、最具代表性的頁面作為基準，切忌一開始就讓 AI 處理一整包產品設計。（就像我剛剛教學那樣）

Step 2. 讓 AI 製作核心組件與設計系統：基於選定的頁面，讓 AI 先跑出第一版的基礎建設。

Step 3. 人工確認命名與結構方向：AI 做完這一小部分後，先喊暫停。設計師親自介入，檢查圖層命名邏輯與檔案結構是否符合團隊習慣。

Step 4. 確認無誤後，再逐頁增量擴展：當這 1~2 頁的核心組件大家都確認沒問題了，再把其他頁面「增量」餵給 AI 去擴充。

Step 5. 全局清理與文檔化：最後一步，基於 AI 幫你打好的地基，進行全盤的人工清理與微調，並寫上說明文件，完美收尾。

結語與下一步行動

透過 AI 客戶端結合 Figma MCP 協議，過去那些十分耗費時間的設計系統建立，現在都能輕鬆發包給 AI 代勞了。這相當於為自己免費請了一位不知疲倦的設計助理！

希望這篇教學能幫大家解放雙手，把寶貴的時間留給真正需要動腦的「設計思考」。現在就打開你的電腦，去下載安裝測試看看吧！