Figma Config 2026 發表了什麼？Code Layers、Motion 與六種材料上 canvas 全解析

Dylan Field 說 code 是設計的材料——這場大會其實在重畫設計師的職業邊界

設計師 Riven

2026年6月25日上午 6:46

AI 設計

FIGMA · CONFIG 2026 · 設計趨勢

Figma Config 2026 重點總覽：今年主軸是更有表現力的 Canvas，把 code、motion、shader、AI workflow 帶回同一張畫布，下方並列 Code Layers、Figma Motion、Shaders、Generative Plugins、Weave Tools、Figma Agent 六大更新

▲ Config 2026 一張圖看懂：今年主軸與六大更新總覽。

QUICK ANSWER

Config 2026 是 Figma 這兩天在舊金山辦的年度大會，今年只講一件事：把所有創作材料都搬上 canvas。Code Layers 讓設計圖層一鍵變成可互動的程式、Figma Motion 把時間軸動畫做進畫布，再加上 shader 效果、生成式 plugin、Weave 工具與升級後的 agent。Dylan Field 一句話收束整場——code 不是設計的對立面，而是和圖層、向量一樣的「材料」。對設計師來說，重點不在多了六個功能，而在 AI 把地板墊高之後，天花板得自己往上頂。

矽谷的設計圈這兩天沒在睡。Config 一落幕，半個科技圈的時間軸都在轉同一張圖——一塊黑色畫布，左邊是用程式畫出來的羅盤、中間是被 Risograph 濾鏡打散的橘紫色噪點、右下角還有一條跑著 Spin 跟 Scale 的動畫時間軸。Figma 把它配上一句話：「Everything we announced at Config, all in the canvas。」

我盯著那張圖看了很久。它不是一張產品截圖，是一份宣言。過去十幾年，整個設計工具產業都在問同一個問題：設計跟工程，到底誰該往誰那邊靠？Figma 今年的回答很硬，硬到有點挑釁——這題目本身就是假的。

設計是過程，code 只是材料。就像圖片是材料、向量是材料一樣。把材料跟過程分開，才是這些年大家卡住的真正原因。這句話聽起來像哲學，但它背後是六個實打實出貨的功能。我們一個一個拆。

「Code 不是設計的對立面。Code 是設計的材料。」

—— Dylan Field，Figma 共同創辦人兼 CEO，Config 2026 主題演講

CHAPTER 01 · WHAT HAPPENED

六種材料，一塊畫布

先把全貌講清楚。今年 Config 的主軸是「不設限的表達」，Figma 的做法是同時往畫布上倒進六種新材料與工具——Code Layers、Figma Motion、Shader 效果、生成式 plugin、Weave 工具、3D Transforms——而且強調它們可以彼此組合、即時試玩。下面一個一個拆。

Figma 官方公布的 Config 2026 主視覺：同一塊畫布上同時出現 Risograph shader 效果、Build with code 程式圖層、Spin 與 Scale 的 Motion 時間軸，以及生成式 plugin 排出的圓形圖陣

▲ 開頭描述的那張官方主視覺本尊——shader、程式、動畫、生成式 plugin 全在同一塊 canvas。來源：Figma 官方

如果只想看一次官方怎麼說，整場 keynote 都在這裡。Dylan Field 那段「code 是材料」的論述大概在前三分之一，後面是各功能的現場 demo。

▲ Config 2026 主題演講完整版，Dylan Field 主講。來源：Figma 官方 YouTube

CHAPTER 02 · CODE IS MATERIAL

Code Layers：交付這件事，可能要消失了

Code Layers 是今年最關鍵的一步，也是那句宣言的落地。它讓你在 Figma 畫布上，把任何一個設計圖層一鍵（或一句 prompt）轉成可互動的程式圖層。你可以複製它、並排試好幾個方向，就像平常 duplicate 一個 frame 那樣隨手。更狠的是它能直接 clone GitHub repo、用 agent 抽出畫面流程變成可編輯的設計圖層，改完再同步回 code。

Figma Config 2026 Code Layers 重點：一鍵把設計圖層變成互動 code layer、可複製多版本並排比較、可抽回可編輯圖層再同步回 code、支援團隊留言協作，預計七月推出 beta

▲ Code Layers：把互動程式碼直接放上畫布，v1、v2、v3 並排比較真實互動。

Figma 官方 Code Layers 示範：左邊是展覽頁設計稿、中間是可實際操作的 Ticket booking flow 互動畫面（含 Run 按鈕）、右邊是對應的 App.tsx React 程式碼，三者並排在同一塊畫布上

▲ 官方實機畫面：設計稿、可互動原型、React 程式碼並排，中間 Run 鍵按下去是真的會跑的。來源：Figma 官方

你想想看那個老掉牙的痛點。設計師把檔案丟過去，工程師照著重刻一遍，然後兩邊花三天爭間距、爭動畫、爭「上線的東西為什麼跟稿子長不一樣」。每個想跑快的團隊都認得這個迴圈。Code Layers 想做的，就是把這段「交付」直接從流程裡刪掉——不是文件化它，是讓它沒必要存在。

這也是為什麼它讀起來像對 Cursor、Replit 這些 AI coding 工具的正面叫陣。那些工具從 code 出發，Figma 從畫布出發，而 Figma 手上有一張別人沒有的底牌：你的設計系統，本來就在這個檔案裡。Code Layers 預計七月開始 early access。

CHAPTER 03 · MOTION & SHADER

動畫與材質，不用再出檔

Figma Motion 把時間軸搬進了畫布。keyframe、預設動畫、3D 變換，全在你平常編輯的那個檔案裡，把工具列切到 Motion 就開工。輸出格式給得很大方——CSS、JSON、React、MP4、WebM、Animated SVG、GIF 都能匯出。過去這種活通常要繞去 After Effects、Lottie 或某個 plugin，工程師才碰得到；現在它跟介面設計在同一個平面上完成。

Figma Motion 重點：內建 timeline、keyframes、presets，可在現有設計上直接加動畫，也能請 agent 先產生起點，支援時間軸留言，Dev Mode 可檢視動態並匯出 MP4、WebM、Animated SVG、GIF

▲ Figma Motion：動畫正式進到同一份設計檔，時間軸、緩動曲線、預設一次到位。

Figma 官方示範生成式 plugin 與 Motion 並用：上方是 Luminance particles 外掛參數面板、下方是時間軸，對 Grid count X 與 Y 兩個參數打 keyframe 做動畫

▲ 官方實機：生成式 plugin 生出的粒子，下方時間軸直接對它的參數打 keyframe。來源：Figma 官方

Shader 那邊更接近魔法。你不用寫 GLSL，對著 agent 描述你要的質感，它幫你生成。想要 Risograph 的顆粒、想要流動的光、想要某種說不清楚但「就是那個感覺」的填色，用講的就好。生成出來的 shader 還能透過 MCP 輸出到 Figma Make。3D Transforms 則補上最後一塊——圖層能做真正的三維旋轉，跟 Motion 串起來就是立體動態。這三個加起來，是 Figma 在替天花板加高。

Figma Shaders 與生成式 plugin 重點：可用 agent 建立可重複使用的 plugin、建立 shader effects 與 fills、做 liquid metal、dither、watercolor、particle 等效果，參數可在 canvas 直接調整與自由堆疊

▲ Shaders + 生成式 plugin：把視覺表現力直接拉滿，設計師可以自己長出工具。

CHAPTER 04 · WEAVE & AGENT

Weave 工具與長出手腳的 agent

Weave 是 Figma 去年花兩億多美金買下的 Weavy 改的名字，主打生成式影像、影片與動態。今年它的工作流正式接進 Figma 畫布，跟你的 frame 並肩坐。最直覺的是 Transfer style——丟一張來源圖、一張目標圖，把風格整包搬過去。再搭配節點式的工作流，你可以把「換 headline」「換主圖」這種步驟拉成可重複跑的管線，還能分支、比較、反覆微調，保持品牌一致。

Figma Weave 工具重點：把 AI 圖像工作流帶進 Figma，20+ AI image tasks 可在左側面板使用，含 style transfer、product shoot、material extraction、art direction，能分支、比較、反覆微調保持品牌一致

▲ Weave 工具：把生成、編修、風格延伸串成同一條工作流。

Figma 官方 Weave 工具示範：左邊 Transfer style 面板把 style source 風格套到 target image、中間節點式 Spring Campaign 生成工作流、右邊社群 Weave workflow 範本

▲ 官方實機：Weave 的 Transfer style 與節點式工作流。來源：Figma 官方

而這一切的指揮中樞，是大會前一天才全面開放的 Figma agent。它今年長出了三樣東西：Skills 把你的工作流跟慣例打包成可重用的指令、Connectors 讓它伸手去接 Notion、Slack、GitHub、Excel 這些你本來就在用的工具、Attachments 則能把 brief 跟研究資料餵進去。agent 的對話現在預設隊友看得到，你可以看別人在試什麼方向、接著往下長。需要私密時也能關起來。一句話：agent 不再只會生圖，它開始能跑流程。

Figma Agent 重點：從出圖助手變成更懂你的協作者，open beta 開放更多人使用，關鍵升級是 custom tools、更多 context 與 skills，能建立 plugin、shader、code layer 等工具

▲ Figma Agent：從出圖助手，變成會建立工具、會跑流程的協作者。

CHAPTER 05 · WHY IT MATTERS

地板被墊高了，天花板誰來頂？

Figma 自己在 keynote 裡講了一句很誠實的話：前幾年大家都說 AI 會「降低門檻、提高上限」，但這幾年 AI 確實把門檻降了，上限卻沒被推上去。降低的地板，意思是人人都能生出一個堪用的結果。沒被推高的天花板，意思是「堪用」跟「好」之間那段距離，AI 自己跨不過去。

AI 墊高的地板

人人都能生出堪用結果

prompt 一下就有版面、有動畫、有 shader。產出的下限被整個抬起來，這部分會越來越便宜。

要設計師頂的天花板

品味、判斷、跨材料的編排

知道何時該停、哪個方向對、怎麼把 code、motion、shader 編成一個有觀點的整體。這部分只會越來越貴。

Config 2026 的整套工具，本質上都在做同一件事：把更多「頂天花板」需要的材料，放到設計師伸手就拿得到的地方。以前你要動畫得求工程師、要 shader 得會寫 code、要生成式素材得開另一個 app。現在這些都在畫布上，你的設計系統也在畫布上。Figma 賭的是——當材料的取得成本降到夠低，真正稀缺的會是那個有品味、有判斷力、能把材料編成作品的人。

這也順手回答了「Figma 會不會取代工程師」這個常見的焦慮。不會。它更像是想把「從一個設計決策，到它真正影響產品實作」這段路，盡量收進自己的地盤——尤其是大多數團隊在這段最會掉時間的部分。Cursor 從 code 出發，Figma 從畫布出發，兩邊在中間相遇。

CHAPTER 06 · 上線狀態與門檻

什麼時候能用、要付多少

好消息是很多功能已經開始陸續上線，壞消息是大部分綁付費方案跟 Full seat。先別急著興奮，看一下你手上的方案吃不吃得到。

功能

狀態

方案門檻

Code Layers

七月 early access

陸續開放，先搶先用

Figma Motion

6/24 起 open beta

全方案可編輯；發布動態元件、agent 生成、高解析影片匯出需付費 Full seat

Shader 效果

6/24 起 open beta

套用全方案；用 agent 生成需付費 Full seat

Weave 工具

6/24 起陸續開放

Professional 以上 + Full seat

幾個要記在心裡的點：目前用 agent 生成 shader、motion 暫時不吃 AI credit，但 Figma 講得很清楚——等 agent 正式 GA 之後，標準的 credit 計費就會啟動。手動編輯 agent 生出來的成果不扣 credit。另外 shader 現在還不會出現在 Dev Mode，這點官方說在研究了。教育版、政府版方案不少功能被排除在外，學生族群要留意。

還有一個值得放在心上的脈絡——這是 Figma 上市後第一場 Config。它不只在對設計師說話，也在對投資人證明：把設計、code、agent 收進同一塊畫布，是它接下來十二個月的成長故事。功能是真的，野心也是真的。

CHAPTER 07 · TAKEAWAYS

你要當拉圖層的人，還是頂天花板的人

我看完整場 keynote，最有感的不是哪個 demo 多炫，而是 Figma 把職業邊界重畫了一遍。它沒有告訴你「以後設計師要學寫 code」，它告訴你的是：code、動畫、材質這些以前分屬不同職位、不同軟體的東西，現在都是你手邊的材料。能不能用得好，看的是你的判斷，不是你的工具清單。

這對台灣的設計師其實是個好消息，前提是你願意換腦袋。當生成材料變便宜，會 prompt 不再是優勢，那只是入場券。真正拉開差距的，是你能不能在一塊塞滿 code、motion、shader 的畫布上，做出一個有觀點、收得住、別人一眼認得出是你的東西。地板被 AI 墊高了，這是事實。但天花板從來不會自己長高——那一直是設計師的活。

所以與其問「Figma 又要逼我學什麼」，不如先把 Motion 跟 shader 打開玩一輪，感受一下材料變多之後，你的品味會被逼到哪裡。工具會一直變，這次也不會是最後一次。能跟著畫布一起長大的人，才頂得到那個一直在升高的天花板。

FAQ · 常見問題

關於 Config 2026，你可能想問

Q：Figma Config 2026 是什麼時候、在哪裡辦的？

A：Config 2026 於 2026 年 6 月 23 至 25 日在舊金山 Moscone Center 舉行，6 月 24 日由 CEO Dylan Field 主講產品 keynote，是 Figma 一年一度最重要的產品發表大會。全部 keynote 同日上架官方 YouTube，線上參加免費。

Q：Code Layers 到底能做什麼？

A：Code Layers 讓你在 Figma 畫布上把任何設計圖層一鍵或用 prompt 轉成可互動的程式圖層，能 clone GitHub repo、用 agent 抽出畫面流程變成可編輯圖層、改完同步回 code。核心是把「設計交付給工程」這段流程盡量抹平。預計七月開始 early access。

Q：Figma Motion 我現在就能用嗎？要付費嗎？

A：Figma Motion 從 6 月 24 日起以 open beta 形式陸續開放，所有方案在可編輯的檔案裡都能用，把工具列切到 Motion 即可。但發布動態元件、用 agent 生成動畫、匯出高解析影片這幾項需要付費方案的 Full seat。匯出格式涵蓋 CSS、JSON、React、MP4、WebM、Animated SVG、GIF。

Q：這些功能會吃 AI credit 嗎？

A：目前用 agent 生成 shader、motion 暫時不扣 AI credit，但官方明說等 Figma agent 正式 GA 之後標準 credit 計費就會啟動。手動編輯 agent 生成的成果不會扣 credit；套用 shader 也不扣。

Q：Figma 這次是不是想取代工程師、或取代 Cursor 這類 AI coding 工具？

A：取代工程師並不是它的定位，Figma 想收的是「設計決策到產品實作」這段最會掉時間的路。但對 Cursor、Replit 這類工具確實是正面競爭——差別在 Cursor 從 code 出發，Figma 從畫布出發，而 Figma 的底牌是你的設計系統本來就在檔案裡。

Q：身為設計師，我該優先學哪一個？

A：如果你想先有感，建議從 Figma Motion 跟 shader 入手，因為它們門檻最低、回饋最直接，能立刻擴張你的表達範圍。Code Layers 則建議等七月 early access 開了再認真評估，特別是有在跟工程協作的人。重點不是把功能背起來，是培養「在材料變多的畫布上做判斷」的手感。