---
title: "Figma Code Layers 是什麼？程式碼變成設計素材的完整教學"
slug: figma-code-layers-guide
url: https://rar.design/posts/figma-code-layers-guide
published_at: 2026-07-28
author: "設計師 Riven"
category: "UI/UX 設計"
access: public_access
---

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

> Config 2026 最重磅更新：設計一鍵轉 code、GitHub repo 攤上畫布、Extract designs 雙向互轉，設計與工程的翻譯成本正在消失

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

FIGMA · CONFIG 2026▲ 設計稿、生成介面、React 程式碼，第一次並排出現在同一個 Figma 畫布上（圖片來源：Figma 官方）QUICK ANSWER Code Layers 是 Figma 在 Config 2026（2026 年 6 月 24 日）發表的新功能：把可執行的 React 程式碼變成畫布上的一種圖層。任何設計圖層可以一鍵（或一句 prompt）轉成互動 code layer，也能匯入整個 GitHub repo，再用 Extract designs 把程式碼轉回可編輯的設計圖層。目前採 closed beta 名單制，2026 年 7 月起陸續開放。 design 跟 code 誰重要，這題設計圈吵了十年。上個月 Config 2026 一結束，Figma 用一個功能宣布這題不用再吵了——因為在他們的定義裡，程式碼從此是「素材」，跟向量、圖片、元件同一個位階。素材沒有立場，素材只等著被用。這個功能叫 Code Layers。它是 Config 2026 全部發表裡最不炫、卻最動搖行業結構的一個。這篇文章我會拆完它的運作機制、四種建立方式、Extract designs 的雙向循環、現在怎麼搶先玩到，以及設計師實際能拿它做什麼。連 code 都沒碰過的人也讀得完——這正是它的設計初衷。CHAPTER 01 · WHAT IS ITCode 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 自己）逼大家在兩者之間選邊，而這是一場假辯論。TIMELINE · CODE LAYERS 演進史2025.05Config 2025 發表 Figma Sites 與 Figma Make，設計工具第一次內建「會跑的產出」2025.06code layers 登場，但只活在 Figma Sites——給網站頁面加自訂 React 互動元件2026.06Config 2026（6 月 24 日）：Code Layers 進入 Figma Design 本體，任何圖層一鍵轉 code、可匯入 GitHub repo2026.07closed beta 名單制陸續開放中，waitlist 申請入口已上線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 寫得漂不漂亮。它是拿來想事情的空間，收斂成乾淨的生產程式碼是後面的事。“程式碼第一次可以像 frame 一樣，被複製、被比較、被圍觀。對設計師來說，這裡藏著一個更實際的權力轉移：迭代權。以前一個互動要試三個方向，你得排工程師的時間，或者自己在原型工具裡做三個「假的」。現在探索階段整段搬進畫布，用真的元件試、真的動效比，工程師的時間留給真正該花的地方——把選定的方向做穩。省下的成本、以及畫布跟工程之間的協作介面怎麼接，我在 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 官方）FLOW · 雙向循環STEP 1設計圖層frame、元件、或整個 GitHub repoSTEP 2Code Layer一鍵或 prompt 轉換，畫布上直接跑STEP 3Extract designscode 狀態抽回可編輯圖層修改STEP 4回寫與收斂一鍵更新 code layer，滿意後 push 回 repoSTEP 3 與 STEP 4 可無限來回——設計與程式碼在同一個檔案裡輪流演化，不再是單向交付。機制四：收斂，然後推回 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 工具，很多人第一反應是「到底差在哪」。一張表講清楚：COMPARISON · 四種寫 CODE 的地方工具定位適合的時刻Code Layers畫布上的多人 code 探索空間比較方向、團隊迭代、設計與 code 互轉Figma Makeprompt-to-app 生成環境從零快速做出完整可用的原型或工具Sites code layers網站頁面的互動元件landing page 微互動、動態內容IDE 系 AI 工具單人生產環境（Cursor、Codex、Claude Code）真的要上線的程式碼、工程級收斂記一個簡單的分法就好：想事情，上畫布；做出來，進 Make；上線前，回 IDE。三者是接力，你會在不同階段用到不同棒次。CHAPTER 08 · TAKEAWAYS素材的邊界，決定表達的邊界設計工具的歷史，其實就是一部素材擴張史。先是向量，然後是元件，然後是變數與 token；每一次「素材清單」被擴充，設計師能表達的東西就多一個維度。Config 2026 這次加進清單的，是會自己動的程式碼。所以我對 Code Layers 的判斷是：短期看，它是個很好的原型升級；長期看，它動的是行業的分工結構。當 code 可以被一鍵抽回圖層、圖層可以被一鍵轉回 code，「交付」這個動詞會慢慢失去意義——沒有人在交付誰，大家在同一塊材料上輪流動手。畫布這次吃掉的從來就不是工程師的工作，而是設計與工程之間那段最貴的翻譯成本。翻譯消失之後，剩下的差異只有一個：品味。而品味，正好是你一直在練的東西。RELATED READS · 延伸閱讀Figma Motion 是什麼？Config 2026 原生動效完整解析與設計師實戰 →Config 2026 三大新素材之二：時間軸與 keyframe 直接進畫布Figma Shaders 是什麼？一句話生成全息箔、噪點質感的 AI 材質完整教學 →三大新素材之三：用描述生成 shader 填色與效果Figma Generative Plugins：用一句話做出專屬外掛 →同場發表的另一個殺手級功能，把重複操作變成自製工具Figma Weave 工具是什麼？20+ AI 圖像工作流一鍵進 Figma 的完整解析 →生成式圖像工作流與畫布的整合，Config 2026 的另一條主線設計師可以用 Codex 做什麼？Codex × Figma 雙向工作流完整解析 →IDE 那一端的視角：AI coding 工具怎麼接上設計流程Framer vs Figma Sites：網站設計工具怎麼選 →code layers 的發源地 Figma Sites，跟 Framer 的正面對決EXTRA · LINKS 官方資源Code Layers closed beta waitlist 申請官方部落格：Code on the Figma canvas官方 Config 2026 全發表 recapFigma Sites code layers 官方指南Figma 開發者文件：Code in FigmaCOURSE100 種 Figma 設計的方法AI 把 code 搬上畫布之前，你得先把畫布用熟。從 Auto Layout 到元件系統，一百種方法把 Figma 基本功練成直覺。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略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、測試仍然需要工程專業。它取代的是設計與工程之間的翻譯成本，而非任何一方的專業。