---
title: "設計師可以用 Codex 做什麼？Codex × Figma 雙向工作流完整解析"
slug: openai-codex-figma-designer-guide
url: https://rar.design/posts/openai-codex-figma-designer-guide
published_at: 2026-07-10
author: "設計師 Riven"
category: "AI 設計"
tags: ["Design to Code", "設計工作流", "AI 工具", "Figma MCP", "figma", "OpenAI", "Codex"]
access: public_access
---

# 設計師可以用 Codex 做什麼？Codex × Figma 雙向工作流完整解析

> 貼一條 frame 連結，設計稿變成程式碼；跑起來的介面，再走回你的畫布

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-07-10

AI TOOLS · 2026▲ Codex × Figma 官方主視覺：程式碼與畫布，第一次真正接在同一條線上（圖片來源：Figma）QUICK ANSWER Codex 是 OpenAI 的 coding agent，能自己讀專案、寫程式、開瀏覽器驗證結果。設計師最該關注的是它與 Figma MCP server 的雙向打通：貼一條 frame 連結，設計稿就變成吃你設計系統 tokens 的程式碼；反過來，跑起來的介面一個指令就能變回可編輯的 Figma 圖層。設計交付，正在從「文件」變成「往返」。 CONTENTS01Codex 是什麼：2026 年版02為什麼設計師該關心一個工程師的工具03Design to Code：把設計稿變成程式碼04Code to Canvas：把跑起來的介面帶回畫布05設計師的五個實戰場景06十分鐘接起來：設定教學07限制、費用與踩坑提醒08重點整理與觀點CHAPTER 01 · WHAT IS CODEXCodex 是什麼：2026 年版2026 年的 Codex，已經跟你印象中「幫忙補全程式碼」的那個 Codex 沒有關係。它現在是 OpenAI 的 coding agent——你給它一個目標，它自己讀懂整個專案、規劃步驟、動手寫碼、開瀏覽器驗證結果，做完回來找你驗收。入口也早就長成一個全家桶：終端機的 CLI、VS Code 與 Cursor 都能裝的 IDE 擴充、獨立的桌面 App、跑在雲端的代理，以及手機上的遠端遙控。七月開始，桌面版 Codex 更直接併進了 ChatGPT 桌面 App，變成訂閱裡的預設成員——這次合併的來龍去脈，我在〈ChatGPT Work 是什麼〉那篇拆過。引擎也剛換代。這週開始預覽的 GPT-5.6 系列，第一批開放入口之一就是 Codex——OpenAI 把最新的模型能力，優先灌進了這個 agent。訊號很明確：Codex 是他們押注的主戰場。費用方面，Codex 附在 ChatGPT 的付費方案裡（Plus、Pro、Business、Enterprise、Edu 都有），免費帳號目前是限時開放部分額度，重度使用可以另外加購 credits。對設計師來說，一個 Plus 就能開始玩。CHAPTER 02 · WHY IT MATTERS為什麼設計師該關心一個工程師的工具設計師這十年學會的第一件協作技能，是把設計稿「交出去」。從紅線標註、Zeplin，到 Figma 的 Dev Mode，我們把交付文件做得越來越精緻——但它終究是文件，工程師還是得看著它重新蓋一次。2026 年 2 月 26 日，Figma 跟 OpenAI 正式把 Codex 接上 Figma MCP server。這件事改變的是交付的物理性質：agent 不再看著你的截圖用猜的，它直接讀你檔案裡的 design tree——圖層結構、auto layout 規則、variables、元件對應——然後在真實的 codebase 裡動工。方向反過來也成立：跑起來的介面，能一鍵回到畫布變成可編輯圖層。TIMELINE · FIGMA MCP × AI AGENTS2025/06Figma MCP server Beta從 Dev Mode 起家，設計資料首次結構化開給 LLM2025 下半Remote server 上線mcp.figma.com 託管端點，全席次全方案可接2026/02/17Claude Code to Figma程式碼回畫布的方向首度打開2026/02/26Codex × Figma 對接官方合作發布，雙向工作流成形2026/07寫入畫布 Beta 期生成畫布功能免費開放中，多 client 百花齊放 「交付不再是一份文件，是一趟往返。」 RIVEN · 2026這也解釋了為什麼 Figma 今年整場 Config 2026 都在講程式碼跟畫布的縫合。設計工具的下一個十年，賭的就是這條線。CHAPTER 03 · DESIGN TO CODE把設計稿變成程式碼流程本身簡單到有點反高潮。在 Figma 裡選一個 frame，右鍵「Copy link to selection」，把連結貼進 Codex，加一句話：照這個設計實作，盡量用我現有的設計系統元件。接下來發生的事才是重點。Codex 會呼叫 Figma MCP server 的 get_design_context 工具，拿到的是這個 frame 的結構化資料——排版階層、auto layout 規則、樣式、元件資訊——而非一張讓模型用猜的圖片。如果團隊有設 Code Connect，get_code_connect_map 會把 Figma 元件對應回 codebase 裡真正的元件路徑與 import 寫法；get_variable_defs 則把你掛在選取範圍上的 variables——顏色、間距、字級——原封不動抓出來。三個工具疊起來，產出的程式碼吃的是你的 tokens、用的是你的元件，而非另一套長得很像的平行世界。來源也不限設計檔：get_design_context 同時支援 Figma Design、FigJam 與 Figma Make 的選取內容。白板上畫的 flow，一樣能餵。1選 frame，複製選取連結在 Figma 裡右鍵「Copy as」→「Copy link to selection」，這條 URL 直接指向畫布上的節點。2貼進 Codex，講清楚約束連結加一句指令：照這個設計實作、優先用現有元件、間距對齊 variables、輸出什麼框架。3Agent 讀 design tree 與 tokensget_design_context 抓結構、get_code_connect_map 對元件、get_variable_defs 抓 tokens，全是結構化資料。4在你的 codebase 裡實作、跑起來驗收Codex 直接改真專案的檔案，跑起來讓你在瀏覽器裡對稿，來回修到收工。CHAPTER 04 · CODE TO CANVAS把跑起來的介面帶回畫布真正的新東西在反方向。generate_figma_design 這個工具，能把一個正在跑的網頁介面——本機的、staging 的、正式站的都行——直接轉成 Figma 裡完全可編輯的 frames。官方流程長這樣：先把應用跑起來，然後叫 Codex 生成 Figma 檔案。它會問你要開新檔還是用舊檔、放進哪個工作區，接著開一個瀏覽器分頁，頁面上方出現一條擷取工具列，讓你抓整個畫面、或只抓你點的某個元素，抓完直接開 Figma 檔案檢查圖層。回到畫布之後，就是設計師的主場了：套設計系統元件、把顏色字級掛回 variables、調 layout、做互動與空狀態、拉幾個變體出來比較。改完再走一次上一章的流程，把畫布上的決定送回程式碼。這一來一回，官方叫它 roundtrip——我覺得更貼切的說法是，畫布終於變成了程式碼的鏡子。另外有一支 use_figma 工具走得更遠：它讓 agent 直接在畫布上動手，建 frames、開 variables、調 auto layout——等於用一句話，請 Codex 當你的 Figma 操作員。MCP 工具做什麼什麼時候用get_design_context讀取選取範圍的結構化設計資料設計稿要變程式碼時get_code_connect_map把 Figma 元件對回 codebase 真元件有設計系統的團隊get_variable_defs抓出顏色、間距、字級 variables要 token 對 token 落地時generate_figma_design把跑著的網頁變成可編輯圖層程式碼要回畫布時use_figma直接在畫布建立與修改內容批次整理設計系統時▲ Figma 官方直播：Figma MCP × OpenAI Codex，完整走一次雙向工作流（來源：Figma YouTube）CHAPTER 05 · IN PRACTICE設計師的五個實戰場景場景一，side project 不用再排工程師的隊。作品集改版、活動 landing page、給客戶看的互動 demo——貼設計稿連結給 Codex，它在真的專案裡實作，你在瀏覽器裡驗收。從「等下個 sprint」變成「等一杯咖啡」。場景二，設計系統的大掃除。用 use_figma 批次開 variables、統一命名、把散落的樣式收斂成 collections。這種一做就是一下午的體力活，是 agent 最擅長的題型。場景三，對稿。把 staging 的頁面用 generate_figma_design 抓回畫布，跟原始設計稿並排，走查間距、字級、色彩的落差。Codex 與 Figma 兩邊帶設計的主管都公開分享過：他們團隊的設計師已經直接在 staging 上工作——在半成品上改，而非在稿子上留言等人改。場景四，把網路上的靈感抓成圖層。任何跑在瀏覽器裡的頁面都能變成可編輯 frames——研究競品的版型結構、拆解你喜歡的網站怎麼排字，從「截圖貼參考板」升級成「直接拿到圖層」。當然，拿到圖層是為了研究，抄是另一回事。場景五，用圈選代替需求文件。Codex 的內建瀏覽器支援註記：介面哪裡不對，直接在畫面上圈起來寫一句，agent 照著改。給前端回饋這件事，第一次比開會快。RIVEN’S TAKE五個場景的共同點：都是「你早就知道該做、但成本高到一直沒做」的事。Agent 沒有給你新的能力，它給的是把舊待辦清單清空的速度。CHAPTER 06 · GETTING STARTED十分鐘接起來設定沒有想像中工程。裝好 Codex 桌面版（或直接用 ChatGPT 桌面 App 裡的 Codex），左上角開 Plugins 面板，找到 Figma 按安裝，跳出授權畫面按 Allow access，完成。回到 Codex，Figma 的工具就在了。▲ Codex 桌面版的 Plugins 面板：Figma 外掛一鍵安裝，OAuth 授權後即接上 remote MCP server（圖片來源：Figma）背後接的是 Figma 的 remote MCP server（mcp.figma.com/mcp），這是官方建議所有人用的版本——全席次、全方案可用，功能也最完整。另外有一個跑在 Figma 桌面 App 裡的 desktop 版 server，主要留給組織與企業的特殊場景，需要付費方案的 Dev 或 Full seat。CLI 與 IDE 版的 Codex 也能透過 MCP 設定接上同一個 server，工具面完全一致。Figma 還針對 agent 出了 skills——一組教 agent 怎麼把 Figma 用好的說明包，跟 MCP 工具一起裝，產出品質會再上一階。CHAPTER 07 · LIMITS AND COSTS限制、費用與踩坑提醒第一，垃圾進垃圾出。get_design_context 回傳的是你檔案裡實際存在的東西：圖層叫 Group 5、元件全是 detach 過的孤兒、顏色全寫死 hex——那 agent 拿到的就是這些，產出自然是一次性的近似碼。語意命名、元件掛好、variables 掛滿，這些老生常談的檔案衛生，現在直接決定程式碼品質。第二，選取範圍別貪心。一整頁複雜介面的 design tree 可能大到塞爆 agent 的 context，一次選一個區塊，產出反而更準。這跟給人類工程師切 ticket，是同一個道理。第三，錢的事。Codex 本體要 ChatGPT 付費方案；Figma 這邊，remote server 的讀取類功能全方案可用，但寫入畫布類（generate_figma_design、use_figma）目前是 beta 免費，官方已預告之後會改成用量計費。現在是把工作流建起來的甜蜜期，但別把「免費」寫進長期預算。第四，權限意識。你給 agent 的是真實檔案的寫入權——codebase 跟 Figma 檔都是。開始前想清楚它能碰哪個專案、哪個工作區，跟帶新同事是同一個道理：先給小案子，做得好再放大。CHAPTER 08 · TAKEAWAYS重點整理與觀點最後說點工具表之外的事。這波整合真正的主角是 MCP 這條匯流排——同一個 Figma MCP server，接的還有 Claude Code、Cursor、VS Code、Windsurf。Figma 二月也發布了 Claude Code to Figma 的對接，如果你的 agent 主力是 Claude 這一系，這套雙向工作流一樣成立。Codex 的優勢在產品面的完整度：桌面 App 的多 agent 管理、內建瀏覽器與註記、跟 ChatGPT 訂閱綁在一起的低門檻。而 Figma Make 是另一個象限的東西：它在畫布裡生成品，適合探索；Codex 接的是你真實的 codebase，適合出貨。兩個都會留下來，用途本來就不同。設計師該做的判斷，我在〈設計師到底該怎麼用 AI〉畫過一張分工地圖：發散與執行交給 agent，收斂與拍板留給自己。Codex × Figma 把執行層的摩擦降到了歷史新低，這反而讓另一件事變得更值錢——你知不知道自己要什麼。TAKEAWAYS→Codex 是 OpenAI 的 coding agent 全家桶，附在 ChatGPT 付費方案裡，設計師從 Plus 就能開始。→與 Figma 的打通是雙向的：設計稿變程式碼靠 get_design_context 讀 design tree，跑起來的介面回畫布靠 generate_figma_design。→檔案衛生直接決定產出品質——語意命名、Code Connect、variables 是新的基本功。→寫入畫布功能 beta 期免費是甜蜜期：工作流先建起來，預算另外算。RELATED READS · 延伸閱讀Claude Code Artifacts 開放 Pro／Max 了嗎？設計師該怎麼用完整解析另一條 coding agent 給設計師的路，session 直接變 live 網頁→Figma Weave 工具是什麼？20+ AI 圖像工作流一鍵進 Figma 的完整解析Figma 把 AI 圖像任務包成一鍵工具的另一條線→Figma Motion 怎麼用？核心能力、製作流程與把動效做好看的實戰原則動效進 Figma 之後，設計檔離出貨又近了一步→Framer vs Figma Sites 怎麼選？2026 設計師建站工具完整對比如果你要的只是把網站推上線，這兩條路先看過→當 Claude 額度還有剩，可以拿來幹嘛？設計師的 7 種高價值用法訂閱額度用不完不會累積，這 7 招把它變成長期資產→EXTRA · LINKS 官方資源Figma 官方公告：Building Frontend UIs with Codex and FigmaFigma MCP server 官方總覽指南Codex × Figma 官方設定教學Figma MCP 工具與提示開發文件OpenAI Codex 官方開發者文件與更新日誌SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →常見問題Q：Codex 要付費嗎？設計師該從哪個方案開始？A：Codex 附在 ChatGPT 的 Plus、Pro、Business、Enterprise 與 Edu 方案裡，免費帳號目前是限時開放部分額度，用量吃完可以在 Codex 裡加購 credits。設計師從 Plus 起步就夠用了。Q：不會寫程式的設計師，用得動 Codex 嗎？A：可以。整個互動介面就是自然語言，你負責講清楚要什麼、驗收像不像，程式細節它自己處理。真正的門檻在描述能力與驗收眼光——而這兩件事，本來就是設計師的強項。Q：Figma MCP server 需要什麼 Figma 方案？A：remote 版全席次、全方案都能用，這也是官方建議的版本；desktop 版要付費方案的 Dev 或 Full seat。寫入畫布類功能在 beta 期間免費，Figma 已預告之後會改採用量計費。Q：Codex × Figma 跟 Figma Make 有什麼不同？A：Figma Make 在畫布裡用 prompt 生成品，適合快速探索；Codex 接管的是你真實的 codebase，產出能進版本控制、吃你設計系統的程式碼，還能把跑起來的結果送回畫布。一個管探索，一個管出貨。Q：get_design_context 產出的程式碼可以直接上線嗎？A：取決於你檔案的衛生程度。圖層語意命名、元件掛好 Code Connect、樣式掛滿 variables，產出就會對回你的真元件與 tokens；反之就會是一次性的近似碼，還是得人工整理。Q：Claude Code 也能接 Figma MCP 嗎？A：可以。同一個 Figma MCP server 支援 Codex、Claude Code、Cursor、VS Code、Windsurf 等多個 client，Figma 在 2026 年 2 月也發布了 Claude Code to Figma 的對接，雙向工作流同樣成立。