用 AI 寫程式的朋友可能不少都已經習慣用 Antigravity、Claude Code、Codex 等工具來自動化完成功能，而如果你要設計的話，其實也可以透過 Figma MCP 來直接從 Claude Code 或 Codex 等工具來操作 Figma 喔，以下就用這篇文章來教大家該怎麼做。
這邊用 Codex 來做示範，如果你是習慣 Claude Code 的話，可以問問 AI 看該怎麼做。
一、連結 Figma MCP
打開 Codex，在訊息處輸入：
codex mcp add figma --url https://mcp.figma.com/mcp
這個就會幫你設定 MCP，接著應該會跳一個授權的連結像這樣。
同意後就會看到這個訊息，這樣就代表連結完成了。
二、測試 Figma MCP
接著來測試是否可以從 Codex 抓到 Figma 上的資料，我這邊從一個之前設計完的專案，請他幫我列出設計系統：
輸入以下提示詞：
請解析這個 Figma 設計，列出：
1. 字體系統
2. 顏色變數
3. spacing 規則
4. 使用到的 component
[Figma frame 連結]
一段時間之後，應該就能看到以下內容，也代表成功了。
三、從 Codex 操作 Figma
接著我們就來從 Codex 操作 Figma 啦，我這邊準備一個簡單的 UI 設計，再請 Codex 去呼叫 Figma 修改內容。
指令如下：
Use the Figma MCP use_figma tool.
請修改這個 Figma 選單：
[貼 link]
需求：
- 新增一個「聯絡我們」
- 放在「關於我們」後面
- 保持 spacing 與 style
其中那個 link 你要把你要修改的元素點選，再按
⌘ + L （Mac）
Ctrl + L（Windows）
就會取得區塊的連結，這樣就可以指定 Figma 修改那一塊。
照理說等一段時間就會看到照你的意思修改了，但我在測試時感覺是第一個建立設計系統時用掉太多 Quata 了，系統顯示被限流，看起來免費能用的額度很有限，不過這個也是給有可能會需要給 AI 直接做設計的朋友參考喔。
![[VS Code 擴充套件] Buildt AI 透過文字描述搜尋，找到專案中的該功能的原始碼](/assets/upload/1675741324437_0.jpg)
