從今天起，你可以在 Codex 中透過 Figma MCP 伺服器產生 Figma 設計檔案。這個 MCP 伺服器支援雙向轉換，讓你輕鬆將運作中的 UI 帶入 Figma 畫布，再轉回程式碼，持續發展最好的構想，而不只停留在最初的想法。
Codex 桌面 App 專為智慧體式程式碼編寫打造。它提供便於專注工作的介面，讓你跨專案同時管理多個智慧體、追蹤進度而不失去上下文，並整合外部工具。這種流暢感並不陌生，團隊在 Figma 中也能同樣自在地工作。Figma 畫布專為探索與反覆改進而設計，讓最好的構想有空間逐步成形。將 Figma 畫布連接到 Codex，就能把這份探索精神直接延伸至開發工作流程，為使用者提供強大的全新開發方式，從原型到正式環境中的應用程式都能打造。
從設計開始建立應用程式
Figma MCP 伺服器的核心使用案例之一，是從 Figma 檔案擷取上下文，並用於程式碼生成。Figma MCP 伺服器可以從 Figma Design、Make 和 FigJam 檔案擷取資訊，並在開發過程中將資訊傳給 Codex。
首先，開啟你打算用來建立應用程式的 Figma 檔案。在所需的畫框上按一下滑鼠右鍵，依序選取「複製為」和「複製所選項目的連結」。
這些所選項目的網址會直接連到 Figma 畫布上的畫框或節點。所選項目可以是單一元素，也可以是一組元件；它們就是智慧體用來生成程式碼的來源資料。你可以從 Figma Design、Make 或 FigJam 檔案選取項目。取得網址後，開啟 Codex 並選擇新專案或現有專案。接著，你可以用類似下方的提示詞指示 Codex：
help me implement this Figma design in code, use my existing design system components as much as possible.這類提示詞會指示智慧體呼叫 Figma MCP 伺服器的 get_design_context 工具。這個工具能從 Figma 檔案擷取版面配置、樣式和元件資訊等關鍵設計資訊，再將這些上下文提供給 Codex，用於程式碼生成。
除了擷取設計資訊，Figma MCP 伺服器還提供其他多種實用工具；如需完整清單，請參閱我們的文件。
從程式碼到畫布
反覆修改程式碼後，你會想將設計帶回畫布，比較流程、探索其他方案，並驗證你的假設。Figma MCP 伺服器讓你輕鬆將這些畫面帶回 Figma，無須再對照瀏覽器手動重建。透過 generate_figma_design 工具，你可以在幾秒內將實際運作中的介面轉換成完全可編輯的 Figma 畫框，把真正可用的 UI 直接帶到畫布上，進一步探索並與他人協作。
首先，你需要將應用程式的 UI 算繪出來，可以在本機完成，也可以透過公開可存取的網頁伺服器。接著，請 Codex 協助你產生新的 Figma 設計檔案。
接著，Codex 會引導你完成以下步驟：
- 決定要建立新的 Figma 檔案，還是使用現有檔案。
- 決定要將檔案放在哪個工作區。
- 設定應用程式，準備擷取 UI。
- 在新的瀏覽器工作階段中開啟應用程式。
應用程式重新載入後，頁面頂端會出現新的工具列，提供下列選項：
整個畫面： 擷取目前顯示的完整畫面，並傳送至 Figma 檔案。
選取元素： 選擇頁面上要擷取的特定元件或元素
開啟檔案： 開啟 Figma 檔案，查看新增的設計圖層
擷取完所有想要傳送至 Figma 的資訊後，你可以選擇開啟檔案或返回 Codex。Codex 會準備好 Figma 檔案的網址，供你使用。
往返之間：一段 MCP 旅程
現在，你已建立應用程式並準備好設計檔案，可以開始反覆改進了。你可以充分運用 Figma 畫布的各種功能，包括：
- 加入設計系統元件
- 將樣式、字型和色彩改為使用變數
- 調整版面配置並加入註解指示
- 設計各種互動與空白狀態
- 協作設計多種版本，探索不同可能
完成 UI 的改進後，你可以依照本文開頭介紹的步驟，透過 MCP 伺服器將這些變更帶回應用程式。
將程式碼與畫布連接起來，就能在實作與探索之間流暢切換。這樣的往返流程，能充分發揮 Figma MCP 伺服器與 Codex 結合的力量，讓你從任何起點出發，都能在不犧牲速度的情況下，打造有意義且高品質的應用程式體驗。
如要進一步瞭解 Figma MCP 伺服器，請參閱我們的文件，或直接在 Codex 桌面 App 中安裝 Figma MCP 伺服器，開始使用。