Figma Code Layers 是什麼？程式碼變成設計素材的完整教學

FIGMA · CONFIG 2026

▲ 設計稿、生成介面、React 程式碼，第一次並排出現在同一個 Figma 畫布上（圖片來源：Figma 官方）

design 跟 code 誰重要，這題設計圈吵了十年。上個月 Config 2026 一結束，Figma 用一個功能宣布這題不用再吵了——因為在他們的定義裡，程式碼從此是「素材」，跟向量、圖片、元件同一個位階。素材沒有立場，素材只等著被用。

這個功能叫 Code Layers。它是 Config 2026 全部發表裡最不炫、卻最動搖行業結構的一個。這篇文章我會拆完它的運作機制、四種建立方式、Extract designs 的雙向循環、現在怎麼搶先玩到，以及設計師實際能拿它做什麼。連 code 都沒碰過的人也讀得完——這正是它的設計初衷。

CHAPTER 01 · WHAT IS IT

Code Layers 是什麼

一句話定義：code layer 是 Figma 畫布上的一種圖層類型，跟 frame、shape 並列——差別在於它的內容物是一段真的會跑的 React 程式碼。你可以移動它、縮放它、複製它、對它留言，就像對待任何一個 frame；但你也可以雙擊進去改 code、下 prompt 請 AI 重寫、把它推回 GitHub。

▲ Code Layers 的定位：程式碼是能直接放上畫布的 UI 素材——而且是雙向的，設計一鍵轉 code、code 也能抽回圖層

這個概念有前傳。2025 年 6 月，code layers 先出現在 Figma Sites，當時的定位是「幫網站加自訂互動元件」——下拉選單、shader 背景、互動地圖這類靠內建互動做不出來的東西。一年後的 Config 2026，Figma 把它從 Sites 的配件升格成 Figma Design 本體的第一級素材。官方在 recap 文章裡把話說得很直白：設計是流程，程式碼是素材，過去的工具（包括 Figma 自己）逼大家在兩者之間選邊，而這是一場假辯論。

Config 2026 這場一口氣端出三種新素材——code、motion、shader——外加 generative plugins、Weave 工具跟升級版 agent。Motion 最搶眼，Shaders 最好玩，但如果十年後回頭看，真正改變工作方式的大概率是 Code Layers。原因下一章講。

CHAPTER 02 · WHY IT MATTERS

為什麼這件事重要

過去一年 AI coding 工具大爆發，人人都能生 code 了，但 code 一直活在單人環境裡：IDE 是單人的、AI 對話視窗是單人的、terminal 更是單人的。你在 Cursor 裡改出一個很棒的互動，要給團隊看，得先部署、丟連結、開會口述。探索的過程被鎖在一個個孤島裡。

Code Layers 把這件事搬進多人畫布。你複製一個 code layer 出三個版本並排，就像設計師複製 frame 比稿一樣；隊友滑過來，直接在某一版上留言，或對著同一個 layer 下 prompt 改出第四版——agent 會開新版本、保留原版。Figma 產品長 Yuhki Yamashita 在 TechCrunch 的訪談裡講了一個很誠實的定位：多人畫布最強的地方，正是在這個環境裡沒有人在乎 code 寫得漂不漂亮。它是拿來想事情的空間，收斂成乾淨的生產程式碼是後面的事。

對設計師來說，這裡藏著一個更實際的權力轉移：迭代權。以前一個互動要試三個方向，你得排工程師的時間，或者自己在原型工具裡做三個「假的」。現在探索階段整段搬進畫布，用真的元件試、真的動效比，工程師的時間留給真正該花的地方——把選定的方向做穩。省下的成本、以及畫布跟工程之間的協作介面怎麼接，我在 Figma MCP 進階教學那篇拆過另一半的拼圖，兩篇合起來看會更完整。

▲ 值得學的四個理由：落差變小、重用變輕、原型變快、協作變直覺

CHAPTER 03 · HOW IT WORKS

四個核心機制

▲ 一圖看懂 Code Layers：程式碼進畫布、變成圖層、像設計元素一樣被編輯與重用

機制一：把東西變成 code

建立 code layer 有四條路。最直接的是工具列新增一個空白 code layer，從模板或一句描述開始；最順手的是選中任何一個既有 frame，點 Build this with code，讓 agent 把靜態設計直接做成會動的版本；你也可以在對話框叫 Figma agent 憑空生一個。第四條路最狠：匯入整個 GitHub repository，或直接上傳本機資料夾——你既有的專案就這樣攤在畫布上。

▲ 選中任何 frame，一個「Build this with code」就把靜態設計交給 agent 做成真的（圖片來源：Figma 官方）

機制二：像比稿一樣比 code

設計師比稿的方式從來沒變過：複製 frame、改一版、並排看。code layer 完全沿用這套肌肉記憶。複製一個 code layer，對副本下不同的 prompt，兩個「會動的方案」就並排在那裡讓你玩；你拖動、縮放裡面的元素，code 即時跟著變。感受方案的差異，取代想像方案的差異——這是靜態比稿給不了的。

機制三：Extract designs，把 code 變回圖層

這是整個功能裡我認為最被低估的一步。Extract designs 把 code layer 的當前狀態轉回可編輯的設計圖層——你自己決定抽出來的範圍：單一畫面、某個特定狀態，或一整條 flow。抽出來改，改完一鍵，變更回寫進 code layer。過去十年所有 design-to-code 工具都在解單向題，Figma 把箭頭畫成了雙向。

▲ Extract designs 把 code 的關鍵畫面與狀態抽成可編輯圖層，改完再一鍵回寫（圖片來源：Figma 官方）

機制四：收斂，然後推回 repo

探索完總要落地。打開 code editor，你可以直接在程式碼上標註、請 agent 改到位，或自己動手修；確定方向之後，把變更 push 回 repository，source 反映的就是團隊最後拍板的版本。整條路從發想到進版控，沒有離開過同一個檔案。

▲ code editor 就開在設計旁邊，標註、改 code、push 回 repo 一氣呵成（圖片來源：Figma 官方）

CHAPTER 04 · GETTING STARTED

現在怎麼開始玩

先講殘酷的部分：Figma Design 裡的 Code Layers 目前是 closed beta 名單制，2026 年 7 月起分批開放。想搶先體驗，去 figma.com/config-betas 排 waitlist（連結我放在文末官方資源）——這種名單制通常越早排越早進，看到這篇就先去填。

等不到 beta 的人有平替：Figma Sites 裡的 code layers 已經開放一年，介面邏輯是同一套。在 Sites 畫布上加一個 code layer，雙擊打開 composer 視窗，接著兩條路任選——用對話描述你要的東西讓 AI 寫，或直接用 React、TypeScript、Tailwind CSS 自己動手。兩條路也能混著走：AI 起頭、自己收尾。唯一要注意的是 AI 對話功能需要你的團隊開啟 AI 權限。

▲ 基本使用流程：把元件帶進檔案、調整 props、放進版面、跟既有系統一起運作

另一個入口是 Figma Make。Make 是 prompt-to-app 的生成環境，你在裡面生好、改好的 code，可以直接帶上畫布變成 code layer，跟團隊一起繼續磨。Config 2026 的官方場次把這兩條路的銜接示範得很完整，這支影片值得完整看一遍：

▲ Figma 官方 Config 2026 場次「Designing in code」：Make 接本機 codebase、Code Layers 上畫布的完整示範

CHAPTER 05 · IN PRACTICE

設計師的四個實戰場景

▲ 四種最能吃到甜頭的情境：設計系統元件、產品介面 mockup、互動 demo、跨團隊協作

場景一，原型不用再演戲。過去 prototype 裡的下拉選單是假的、輪播是假的、輸入框點了沒反應，你在旁邊配音「想像一下這裡會彈出來」。現在直接放一個真的 React 元件進畫布，客戶點到的行為就是上線後的行為。usability testing 的可信度直接換了一個量級。

場景二，提案帶三個活的版本。同一個互動做三個 code layer 並排，會議上讓客戶自己玩，十分鐘的體感勝過三十頁的說明。決策從「聽起來哪個好」變成「摸起來哪個好」，來回修改的輪次會肉眼可見地變少。

場景三，接手舊專案。客戶丟給你一個既有網站要改版，以前你得在 IDE 裡逐檔案摸清結構。現在把 repo 匯進畫布，用 Extract designs 把關鍵 flow 抽成圖層來讀——畫布變成閱讀 code 的空間，而閱讀圖層，本來就是設計師最強的技能。

場景四，這是我私心最推的：把它當學 code 的入口。在 composer 裡看 AI 怎麼把你的一句描述翻譯成 React，改一個參數看畫面怎麼變——這種「有畫面回饋的閱讀」比啃文件直觀太多。設計師不需要變成工程師，但看得懂素材的人，永遠比看不懂的多一層掌控力。

▲ 上手三原則：從小元件開始、先做高重用項目、把它當協作橋梁

CHAPTER 06 · LIMITS

限制與注意事項

第一個限制就是門票本身：closed beta 名單制，多數人此刻還在排隊，而且 beta 期間功能邊界隨時會變，這篇寫的細節以你實際拿到的版本為準。

從 Sites 版已知的邊界也值得先記著，Design 版大概率沿用同一套邏輯：code layer 的子元素活在程式碼裡，你沒辦法在畫布上把它們當一般圖層直接拖動——要動內容，走 prompt 或 code editor；另外 Sites 的 code layers 目前還不能發佈進 library 共用。再來是一條官方明文的安全鐵則：API key 絕對不要寫進 code layer，任何金鑰進了畫布就等於進了共享空間。

最後是心態上的限制，我覺得反而是最重要的一條：畫布上的 code 定位是草稿。Figma 自己都說這是個不用在乎 code 品質的環境——它換來的是探索速度，代價是這些程式碼要進 production，收斂、review、測試那段路一步都不能少。把 Code Layers 當探索引擎，別當部署工具，期待值放對，它才會一直好用。

CHAPTER 07 · COMPARED TO

跟其他工具怎麼分工

Figma 自己的生態裡現在有三個地方會出現 code，加上外面的 AI coding 工具，很多人第一反應是「到底差在哪」。一張表講清楚：

記一個簡單的分法就好：想事情，上畫布；做出來，進 Make；上線前，回 IDE。三者是接力，你會在不同階段用到不同棒次。

CHAPTER 08 · TAKEAWAYS

素材的邊界，決定表達的邊界

設計工具的歷史，其實就是一部素材擴張史。先是向量，然後是元件，然後是變數與 token；每一次「素材清單」被擴充，設計師能表達的東西就多一個維度。Config 2026 這次加進清單的，是會自己動的程式碼。

所以我對 Code Layers 的判斷是：短期看，它是個很好的原型升級；長期看，它動的是行業的分工結構。當 code 可以被一鍵抽回圖層、圖層可以被一鍵轉回 code，「交付」這個動詞會慢慢失去意義——沒有人在交付誰，大家在同一塊材料上輪流動手。

畫布這次吃掉的從來就不是工程師的工作，而是設計與工程之間那段最貴的翻譯成本。翻譯消失之後，剩下的差異只有一個：品味。而品味，正好是你一直在練的東西。

COURSE

100 種 Figma 設計的方法

AI 把 code 搬上畫布之前，你得先把畫布用熟。從 Auto Layout 到元件系統，一百種方法把 Figma 基本功練成直覺。

了解課程 →

SUBSCRIPTION

AI 覺醒設計應用攻略

AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。

了解訂閱 →

常見問題

Q：Figma Code Layers 是什麼？

A：Code Layers 是 Figma 在 Config 2026 發表的功能，把可執行的 React 程式碼變成畫布上的一種圖層。你可以把任何設計圖層一鍵轉成 code layer、匯入 GitHub repo，也能用 Extract designs 把程式碼轉回可編輯的設計圖層，設計與 code 在同一個檔案裡雙向流動。

Q：Code Layers 什麼時候可以用？

A：Figma Design 版目前是 closed beta 名單制，2026 年 7 月起分批開放，可到 figma.com/config-betas 排 waitlist。等待期間可以先用 Figma Sites 裡的 code layers，操作邏輯是同一套。

Q：不會寫程式的設計師用得到嗎？

A：用得到。建立與修改 code layer 都可以全程用自然語言描述，由 Figma agent 代寫程式碼；懂 React 的人則可以隨時打開 code editor 直接動手。code 是可選的深度，門檻不在會不會寫。

Q：Code Layers 跟 Figma Make 差在哪？

A：Make 是 prompt-to-app 的生成環境，適合從零快速做出完整原型；Code Layers 是把 code 當成畫布上的素材，適合多人比較方向、與設計圖層互轉。兩者相通：Make 產出的 code 可以直接帶上畫布變成 code layer 繼續協作。

Q：可以匯入自己既有的專案嗎？

A：可以。Figma Design 的 Code Layers 支援匯入 GitHub repository 或上傳本機資料夾，改完還能把變更 push 回 repo，讓 source 反映團隊拍板的版本。

Q：Code Layers 會取代工程師嗎？

A：定位上它是探索空間的草稿引擎，官方也強調這是個不用在乎 code 品質的環境。程式碼要進 production，收斂、review、測試仍然需要工程專業。它取代的是設計與工程之間的翻譯成本，而非任何一方的專業。