Config 2026 回顧 — 程式碼不是設計的對立面，而是設計的材料

本文整理自 Figma 在 2026 年舉辦的年度大會 Config 2026 主題演講（keynote）。主講人包含 Figma 共同創辦人暨 CEO Dylan Field，以及 Nico、Itai、Georgia、Rajie、Piers、Dave 等多位產品團隊成員，這是 Figma 第十屆 的 Config，也是這幾年來資訊量最密集、野心也最明顯的一場發表。

過去十幾年，設計圈一直在爭論一件事：

設計師到底該不該寫 Code？

這個問題沒有標準答案，但卻像一道隱形的牆，把「會設計的人」和「會寫程式的人」分成兩邊。Config 2026 的這場 keynote，Figma 做的不是回答這個問題，而是直接宣布這個辯論本身已經過時，他們想把 Code 從「設計的對手」變成「設計的一種材料」，跟顏色、向量、字體一樣，是設計師手上可以隨意揉捏變化的東西。

Config 2026 Keynote with Dylan Field (CEO & Co-founder, Figma)

這篇文章會帶你走過這場 keynote 最關鍵的幾個發表，以及它們背後真正想解決的問題，同時，以下是完整的官方文章回顧，歡迎閱讀：

Config 2026: New Materials, New Tools and a More Expressive Canvas | Figma Blog

Code 不該是設計的對立面，Figma 想終結的一場舊辯論

Dylan Field 一上台，先講的是情感面，這是第十屆 Config，從 2020 年第一屆只是在 canvas 上介紹超連結功能，到今天已經是全球設計與創意人才聚集的場合。

他甚至在開場請所有人做一件事：勇敢走出舒適圈，看到有人落單就去打招呼，看到欣賞的人就上前問一句「你最近在想什麼？」對他來說，在這個變化劇烈的時刻，Community（社群）比以往任何時候都重要。

但很快他就切入這場 Keynote 的核心命題，他提到自己幾年前在 Config 講過一句話：AI 會降低門檻、提高天花板（lower the floor and raise the ceiling），他坦白承認，這幾年下來，AI 確實把門檻降低了，但天花板有沒有被提高，他自己其實並沒有那麼確定。

於是他丟出整場演講的主軸，多年來設計產業不斷在討論「design versus code」，把設計跟程式碼當成對立的兩件事。

Dylan 直接把話講白：

Code 不是設計的對立面，Code 是設計的材料

這句話聽起來很簡單，但卻是整場 keynote 所有發表的基礎，長期以來，工具逼著設計師二選一 ，你要不是在設計工具裡畫圖，就是到另一個環境寫程式，兩個世界中間隔著一道很深的鴻溝 (Gap)，而 Dylan 認為這種「強迫選擇」本身就是錯的，而 Figma 接下來要做的，就是不再讓你選。

他把這次的更新整理成兩個方向：

1. 提供新的「材料」（materials），讓你能表達任何想像得到的東西
2. 提供新的「工具」（tools），讓你去形塑這些材料、把它們推得更遠。

接下來的每一個功能發表，其實都可以放回這個框架裡去理解。而我覺得值得注意的是，這個定調其實滿聰明的，它把「AI 會不會取代設計師」這種焦慮，巧妙地轉換成「設計師手上多了哪些新材料」

焦點從「誰被取代」變成「你能創造什麼」

Code Layers：當程式碼變成可以在畫布上拖拉的圖層

第一個被搬上台的材料，就是 Code，負責 demo 的 Nico 用了一個很個人的故事開場：他在德國念互動設計時，曾經為了用程式碼視覺化日出與日落的漸層，連續好幾晚寫了上千行 code。對他來說，code 從來不是冷冰冰的東西，而是一種可以深深鑽進去探索的材料。

他也回顧八年前剛加入 Figma 當實習生時，當時還有人在 Reddit 上吐槽「瀏覽器裡的設計工具，就像一台有三個方向盤的車」，但他真正被打動的，是設計從「一個人孤獨地畫」變成「一群人並肩一起 jam （討論發想）」的那種協作感，而他相信 code 也即將經歷同樣的轉變。

而問題在於現在用 AI agent 寫 code 雖然容易了，但圍繞 code 的工作流程根本不是為「一起探索新想法」設計的，大家其實都在各自的 silo（穀倉、小房間）裡，每個人都跟自己的 agent 對話到上百個 prompts 之後，才抬起頭把一段 prototype 錄影丟給對方看，結果發現大家根本不算是在真正在一起工作。

Figma 的解法，就是把 code 搬上 canvas，他們稱之為 Code Layers（程式碼圖層），這個功能的細節非常多，例如：

• 直接在畫布上互動：code layer 就是一個可以在 canvas 上拖拉、縮放、直接點擊操作的圖層，Nico 在台上 demo 了一個會切換不同城市天氣的介面，放大後就能直接玩。
• 兩種建立方式：你可以選一個既有的 design layer，按下「build this with code」讓它變成 code；也可以用工具列上新增的 code 工具，直接開一個空白的 code layer 開始 prompt。
• 匯入既有的 repo：這是很多工程背景的人會在意的點，你可以從 GitHub 匯入 repository，或直接把本地資料夾拖上 Figma canvas。
• 多個 codebase 並排比較：你可以同時選取多個 code 探索版本，一次按 enter 全部跑起來，讓好幾個獨立的 codebase 同時在你面前運作，直接做側邊對比，Nico 強調這件事的意義在於「把爛點子先丟出來，才找得到好點子」，而探索需要空間。
• 共享的對話紀錄：因為 code 活在 canvas 上，連 agent 的 chat 也是共享的。Nico 在 demo 中點開一個圖層，直接看到同事 Pete 在問問題、G 在解釋某個 S 曲線是怎麼做的，等於你能看見同事是怎麼用 code 跟 agent 一起創作的。
• 用熟悉的動作開分支：想 riff 出一個版本？按住 option 鍵拖一下圖層就建立了一個 branch，這是設計師每天做過上百萬次的動作，Figma 直接把它接到 code 上。

整段 Demo 裡最能打中設計師痛點的，其實是「extract design(抽取設計)」這個功能，Nico 點了錄影流程 record flow，實際操作一遍 app 的流程，系統就會自動把所有畫面狀態抽出來，給你一個鳥瞰式的全貌。

他講出了一個關鍵洞察：code layer 可以做得很深，但人類是用空間在思考的，我們需要把整個 flow 一眼看完，才能對「使用者該有什麼體驗」做出正確判斷。

更關鍵的是回推，當你在 canvas 上改完設計，可以按下「update code layers」，系統會分析「到底改了什麼」，讓 coding agent 用最少的工作量去同步；而因為 code layers 連著 GitHub，這些改動可以直接推回 repository，你的同事再從任何地方 pull 下來，設計與工程的 handoff（交付），在這個流程裡幾乎算是沒有摩擦力。

Figma 等於是把「prototype → 真實 codebase」這個過去最斷裂的環節，變成在同一個畫布裡的連續動作。Code Layers 由 Figma 的 Make 功能驅動，目前以 closed beta（封閉測試）推出，預計 7 月開始陸續開放。

Weave：把節點式創意工作流變成隨手可用的工具

如果說 Code Layers 處理的是「可互動的產品」，那 Weave 處理的就是「視覺創意的量產」。負責這段的 Itay，是 Weave 的共同創辦人，團隊在去年秋天加入 Figma。他在 post-production（後期製作）領域待了 25 年，從 VFX 視覺特效藝術師一路做到創意總監，而真正讓他著迷於 AI 的瞬間，是 AI 終於能生成出他自己的臉的那一刻。

但他很快就撞上一個所有創意人都熟悉的牆：用 AI 做出「有趣」的東西很容易，做出「真正能用在專案裡」的東西卻很難。因為真實的創意工作不是單次 prompt 就能解決的，它需要 reference（參考）、iteration（迭代）、consistency（一致性）跟 feedback（回饋）。

這就是 Weave 誕生的原因，一個讓專業創作者可以打造自己的創意工作流、自己的工具的平台。

Weave 用的是 node-based（節點式）介面。Itai 解釋，每個 node 可以裝資訊（圖片、影片、3D 模型），也可以透過 AI 模型或更手動的控制（調色、時間軸等）執行一個動作。

他現場也 demo 了幾個讓人印象深刻的工作流：

• 360 度產品影片：輸入產品的正面與背面照片，跑過一段確保一致性的流程，就能輸出一支平順的環繞影片。重點是這個 workflow 建好之後，可以一次套用到所有產品，得到一致的結果。
• 快速 render 引擎：把 low-fi 的動畫、logo 動態、加上一張風格參考圖丟進去，就能快速得到風格化的 render；換一張參考圖再跑一次，同一段動畫立刻換上全新風格。
• 風格轉換（style transfer）：想像你從不同廠商收到的產品照，光線、品質都不一樣，根本是一團亂。透過 Weave 可以建一個風格轉換工作流，分析每張產品照，套上同一套視覺語言，帽子、鞋子、襯衫，原本風格迥異，但最後看起來像是同一個系列的。

而這次 Config 的重點，是這些 Weave 工作流現在變成 Figma canvas 上的「工具」。Itay 示範把最熱門的幾個 workflow，只把 input 跟 output 暴露出來，你不用再面對背後那一團複雜的 node「麵條」，直接在工具列點選使用就好。從替換背景、加材質、把 logo render 到產品上、生成 mockup，到他那套只能用他本人照片生成的「kawaii 貼圖」，都變成幾秒就能完成的小工具。

但 Itay 認為最令人興奮的，是「自己打造的工作流」，很快使用者就能把自己的創意 workflow 打包成工具，在工具面板裡分享給整個團隊，這背後的邏輯其實跟 Code Layers 一致：Figma 不只是給你做好的工具，而是給你「做工具的能力」。

用一句話做出符合自己需求的外掛：Generative Plugins 的意義

接下來上台的 Georgia 跟 Rajie，帶來的是這場 keynote 裡最「接地氣」的發表之一：Generative Plugins（生成式外掛），現在開始你可以直接用 Figma 的 agent 生成 plugin，不用寫任何一行 code，不用安裝桌面版，幾個 prompt 就能做出來，而且這些 plugin 就活在你的檔案裡。

Generative plugins, now in Figma

Georgia 現場示範了一個很好懂的需求：她畫了一堆矩形當作音訊波形，但太平了，想讓它們看起來更有機、更動態一點，她直接請 agent「做一個隨機調整 frame 內容高度的 plugin」，讓波形看起來像真的音浪。幾分鐘後，一個波形隨機生成器就出現在屬性面板裡，按下去就能用。

但真正讓人看見價值的，是幾個更具體的故事：

• Miggy 的 Bento 生成器：Miggy 是一位熱愛 layout 的設計師，每天要做大量 bento grid（便當盒式排版），過去得手動微調 grid、顏色、間距、內容。他做了一個 plugin，選取圖層就能瞬間生成符合他個人風格的 bento，還能隨機重排版面、換圖，直到滿意為止。
• Alba Racing 的賽道生成器：Athletics 這家 agency 為客戶做了一個用「真實資料」繪製全球賽道的 plugin。Georgia 在台上把賽道換成摩納哥、調整彎道、微調視覺風格，而因為底層是真實數據，畫出來的賽道都符合實際的版圖。最妙的是，專案交接時，plugin 會跟著一起交出去，客戶拿到的不只是設計檔，還有設計師當初用來做這件事的工具。
• Lauren 的美甲設計器：Figma 一位工程師 Lauren 同時也是美甲控，她為 Config 做了一個能生成 Config 風格美甲的 plugin，可以調整指甲的形狀、樣式。而如果你想知道她是怎麼做的，還能回到 agent 的對話紀錄，看她當初是怎麼一步步把這個工具建出來的。

Georgia 點出了這件事最動人的地方：很多人腦中都有「好希望 Figma 有這個功能」的念頭，但因為覺得「自己做太麻煩了」就把自己勸退了。Generative Plugins 的意義，就是讓你能對這些念頭說「Yes」，那個只屬於你個人工作流的怪點子、那個能幫同事一週省下五分鐘的小工具、那個聽起來蠢到不敢做的想法，現在你都可以直接試試看，看看會發生什麼。

某種程度上，這呼應了整場 keynote 的底層精神：工具的價值不只在於「Figma 幫你做了什麼」，而在於「你能不能輕鬆地為自己打造工具」。

Shaders 終於走出陰影：讓設計師也能玩光影魔法

而 Rajie 帶來了一個他自己等了「四年半」的功能 Shaders（著色器）。如果你沒聽過 shader 這個詞，Rajie 的解釋很貼心：你其實早就看過它了。看起來像簡單漸層的東西，其實是 shader；progressive blur（漸進式模糊）是 shader；玻璃效果也是 shader。它們在彎曲像素、創造視覺效果上威力非常強大，但前提是你得知道怎麼駕馭。

Shader effects and fills, now in Figma

問題就在這裡。Shaders 其實一直存在於 Figma 核心 canvas 的渲染底層，只是「躲在陰影裡」，因為要自己做出來太難了，用 Rajie 的話說，難到要「鑽研數學鑽四年」。但從今天開始起，你可以直接用 Figma agent 來生成自己的 shader。

他把 shader 拆成兩種，概念上很清楚：

1. shader fills（著色器填色）。fill 就是材料本身、實際的顏色來源，你可以把它想成跟 Figma 既有的純色、漸層、圖片一樣的填色，只是更強大。Rajie demo 了一個水波光影（water caustic）的 shader fill，透過拉 slider 看到不同相位，還能用畫布上的 on-canvas handle（畫布操控點）直接移動、調整 — 因為「設計師就是想動手摸」。 他也展示了 mesh gradient（網格漸層），用 3D 數學跟幾何去生成，而這正是 Figma 過去一直被使用者敲碗、卻一再延後的功能。
2. 第二種是 shader effects（著色器效果）。effect 疊在材料之上，把底下的顏色抽出來、加以變形 — 它可以彎曲、塑形、扭曲畫面。他一路展示了好幾種：用 lens distortion（鏡頭扭曲）做出科幻感的玻璃氣泡視角、page curl（翻頁）效果露出背面、把幾個角色 gooey merge（黏稠融合）在一起、還有會追蹤滑鼠互動的 interactive particles（互動粒子）。 最關鍵的是，這些 effect 是可以重新堆疊的，光是調整堆疊順序，就能組合出截然不同的效果。

而且這些 effect 可以直接套在真實的 Figma 圖層、甚至影片圖層上，不是貼一張圖上去而已。Rajie 在 demo 中反覆強調這點：你看到的不是靜態圖片，是 shader。

對許多設計師來說，shader 一直是那種「很想要但碰不到」的東西，Figma 這次的做法，等於把一個原本需要深厚數學與圖學背景的領域，變成可以用自然語言 prompt、再用滑桿微調的日常工具，Generative Plugins 與 shader 都在發表當天推出，先支援滑桿可調的 shader fills 與 effects，互動式 shader 則會稍晚上線，因為團隊還在把效能調到位。

Figma Motion：把時間軸變成設計的基本元件

最後一個重磅材料，是動態。負責這段的 Piers 跟 Dave 來自 Modify 團隊，一年前加入 Figma。當兩個英國人都說自己很興奮的時候，代表這件事真的相當值得期待，他們帶來的是 Figma Motion。

Introducing Figma Motion: Your canvas now has a timeline

Modify 過去是一群創意人與工程師組成的小團隊，背景橫跨視覺設計、音樂、聲音與即時圖學。他們相信創意工具的未來可以長得不一樣：一個既能協作、又高度視覺化、能達到全新表達層次的 canvas。而他們花了一年才想清楚，Figma 的 canvas 真正缺的，是一個新的維度：時間。

Figma Motion 把 timeline（時間軸）變成一個全新的設計 primitive（基本元素）。keyframe（關鍵影格）、preset（預設）等等都直接在你指尖，而且會貫穿整個 design system（設計系統）。

Piers 的 demo 很能說明它使用上有多自然：

• 進入動態模式只要一個切換：按下切換鍵、空白鍵，靜態的設計就活了起來，而且這些動畫都是用 Figma Motion 做的，當天就能在 beta 裡使用。
• 加動畫只要幾個動作：點選物件，按 shift + K 啟動 auto-key，拖動物件、加一點旋轉跟縮放，按下播放就動了。你還能在動畫播放的當下，即時調整 easing（緩動）曲線 — 因為動畫這種東西，timing、節奏、收尾都得「憑感覺」反覆抓。
• 用 agent 一句話生成動畫：Piers 一次選取三個設計，請 agent「讓所有圖片淡入、文字同時滑入並淡入、最後再淡出形成完美循環」。他坦言一開始 agent 生成的版本「淡出有點太慢」，但重點是 agent 產生的所有東西都是完全可編輯的，他直接跳進 timeline 選取 keyframe、調整時間，就讓動畫變得俐落許多。
• Plugin 也能搭配 Motion：Dave 示範了一個自己做的 timeline keyframe stagger（交錯）plugin，過去要手動把一堆方塊在時間軸上一個個錯開非常繁瑣，現在選好選項按下去就完成，甚至可以畫一條 bezier 曲線，讓物件依照那條曲線的節奏依序進場。他說這個工具大概花了四五個 prompt 就做出來。

Piers 也預告了正在開發中的 3D transforms：x、y、z 三軸屬性都能做動畫。雖然只是 preview，但他說「實在太酷了不分享不行」。

最重要的是，是把 Motion 跟前面的 shaders 疊在一起，因為 Figma Motion 是建在整個 Figma 平台之上，每一個 effect 跟 fill 的屬性都能被動畫化。Dave 示範把 shader effect 套在「正在動的內容」上，讓 outline 效果動態地跟著底下物件的運動走；甚至能在 timeline 上替某個 shader 屬性（例如間距）設 keyframe，做出會呼吸、會變形的效果。他說自己「光是玩這個組合就花了好幾天」，有時候真的很難相信這還是在 Figma 裡。

即時協作的部分同樣非常重要，例如留言會出現在 timeline 上、帶動畫的 component（元件）可以巢狀嵌套、同事的編輯會即時顯示在場景，你甚至能 spotlight 某個同事、直接看到他在時間軸上的位置 ，這在過去的動態設計工具裡是不存在的。

那做完之後怎麼進到 production？

切到 dev mode，直接抽出 code，或透過 Figma MCP 送給你的 LLM 或 Figma Make；如果不想走 code，也能輸出成 MP4、WebM、animated SVG 或 GIF。Figma Motion 當天就以 beta 形式在所有方案上線。

真正的重點不是工具，而是「降低門檻、提高天花板」

Dylan 回到台上收尾時，先補充了 Figma agent 本身的進化，它現在支援 attachments（附件）與 connectors（連接器），可以從 Notion、Slack、Granola、Hex、GitHub、Atlassian 等工具把 context 拉進設計裡。

更值得注意的是 custom skills（自訂技能），你可以把那些反覆使用的 prompt，變成可重複使用的 slash command（斜線指令），無論是檢查合規、生成合成的使用者測試，還是把某個常做的流程自動化。Dylan 說他甚至覺得「光是 skills 就能辦一整場 keynote」，他也預告了即將登場的 FigJam agent 與 Slides agent。

但如果只把這場 keynote 看成一堆功能的發表，其實會錯過重點。把所有東西串起來看，Figma 真正在做的，是回應 Dylan 開場拋出的那個命題：

AI 把門檻降低了，但天花板呢？

他的答案是，天花板不該由工具來定，而是由使用者來推。Code Layers、Weave 工具、Generative Plugins、Shaders、Figma Motion，這些發表共同的精神不是「Figma 幫你把事情做完」，而是「Figma 把材料跟做工具的能力都交給你」。從探索到實作、從設計到 code、從靜態到動態，全部活在同一個 canvas 裡，第一次連在一起。

Dylan 最後說的那句話，某種程度上總結了整場演講：AI 可以降低門檻，但提高天花板，是所有人的事。

這對設計師的意義其實滿深的，當 code、shader、motion 都變成可以隨手揉捏的材料，設計師被卡住的環節變少了，但需要做判斷的地方反而變多了，哪個版本更好、哪種節奏對、什麼樣的體驗才是對的。工具把執行的門檻拉低之後，真正的差異會回到「你想做什麼，以及你的判斷力夠不夠好」。這也是為什麼，在這樣一個工具大爆發的時代，craft（手藝）跟判斷反而更值錢，而不是更廉價。

Key Takeaways

1. Figma 的核心宣言是「code 不是設計的對立面，而是設計的材料」，終結了設計圈長年的 design vs code 之爭。
2. Code Layers 把程式碼變成 canvas 上可拖拉、可並排比較、可推回 GitHub 的圖層，讓設計到工程交接幾乎變成同一條線。
3. Weave 與 Generative Plugins 的真正價值不是「現成工具」，而是把「打造自己工具的能力」交到設計師手上。
4. Shaders 與 Figma Motion 把過去需要深厚技術門檻的光影與動態，變成能用自然語言生成、再手動微調的日常材料。
5. AI 降低了執行門檻，但天花板要靠人來推 — 工具越強，設計師的判斷力與品味反而越是關鍵差異。