Figma 把程式碼變成畫布圖層：每個設計版本都能並排試、即時改

過去想試一個介面的兩三種版本，設計師會複製 frame、各畫一張，然後盯著靜止的畫面想像它動起來會是什麼感覺。問題是，畫面不會告訴你按下去的手感、載入的節奏、捲動時的回饋——那些只有真的能跑的東西才講得清楚。

Figma 在 Config 2026 端出 code layers：讓「能跑的程式碼」直接變成畫布上的一個圖層，跟你的設計 frame 並排躺在同一個檔案裡。設計師可以像複製 frame 那樣複製一段可互動的程式，移動、縮放、改 prompt，當場比較哪一個版本體感對。這篇拆解它怎麼運作，以及對正在學 Figma 的你代表什麼。

agent 讓更多人能 build、也讓能做出來的東西變多了。但作者 Nikolas Klein 點出一個常被忽略的副作用：這個過程往往發生在一個人身上——各自開各自的 chat、各自跑不相連的流程、各自孤立地探索。做出來的成果很難讓團隊一起看、一起改。

code layers 想補的就是這條縫。在 Figma Design 裡，可互動的程式碼變成畫布本身的一部分。你可以從工具列新增、把現有 frame 交給 agent 生成、或直接描述要做什麼；想接既有專案，就匯入一個 GitHub repo 或上傳本機資料夾。在 Figma Make 裡生成、改好的 code，也能搬上畫布變成一個 code layer，讓團隊在同一個地方探索、比較、收斂。

設計師一直都用複製 frame 來試不同方案，code layer 沿用同一套肌肉記憶：複製一份、各自往不同方向長。差別在於，現在躺在畫布上的是「能跑的體驗」，所以這時候比的是手感——按下去的回饋、載入的節奏、捲動的反應，這些只有能跑的東西才講得清楚。

移動、調整、縮放裡面的元素，程式碼會即時回應；繼續用 prompt 往下改，agent 會生出新版本，同時把原版保留下來，方便你左右對照。因為這些 code layer 就活在共用檔案裡，隊友能直接跳進來留言、對著同一個圖層下 prompt。整個比較與分歧的過程，第一次發生在大家都看得到的同一張畫布上。

code layer 讓軟體變得「可拆解觀察」。按下 extract designs，它會把程式當前的狀態轉回可編輯的 Figma 圖層——等於把跑起來的畫面，倒回成你熟悉的設計稿來看。

要倒回多少由你決定：一個單獨的畫面、某個特定狀態、或一整段流程都行。在這些圖層上改完之後，一鍵就能把改動同步回 code layer。畫布與程式碼之間因此能來回流動——你用設計師最順手的方式調整視覺，系統幫你把改動翻譯回程式，交付從單向變成雙向。

當你要更精準的結果，可以在 code editor 裡圈出位置、用文字標註想改的地方交給 agent，或乾脆自己點進去手動改。設計師的判斷在這一步被放到最後一道關卡上，agent 沒有把它接走。

滿意之後，把它轉回 code layer，再推送到你的 repo——你最終定下來的版本，會直接反映進原始碼，整個團隊也跟著看到這次更新。值得留意的是：code layers 目前以 closed beta 形式在接下來幾週陸續開放，要先到官方頁面登記才能拿到 early access。

把 code layers 跟這屆 Config 一起端出的 Motion、3D、shaders 擺在一起看，Figma 的方向相當一致：讓畫布同時裝得下靜態畫面、動態、空間、材質，現在再加上能跑的程式碼。對設計師來說，「要去哪裡做」的選項變少了，但「能做到多深」的天花板被抬高。code layer 把工程師那邊的真實體感，提早搬到設計階段就能摸到——這對 design 與 dev 之間那條老縫，是個務實的補法。