Figma Config 2026 重點功能：Code Layers、Motion、Shader、Weave、AI Plugins 與 Agent 升級
Config 2026 的重點，是 Figma 把 code、motion、shader、AI workflow 都變成畫布上的素材。這篇整理官方 Keynote、近兩天影片與公告，拆解主要功能、目前可用狀態與設計工作流影響。
作者：郭政佑 Kevin · ·
這次 Config 2026 看完，我覺得不用把每個功能都背起來。
重點可以濃縮成一句話：
Figma 正在把 code、motion、shader、AI workflow 都變成畫布上的素材。
以前我們做產品設計，大概是這樣：Figma 畫介面，切去 After Effects 或 Rive 做動畫，切去別的 AI 工具生素材，最後再交給工程師重刻一遍。
每切一次工具，資訊就掉一次。
所以今年 Figma 的方向很清楚：它想把「交付給工程師之前的那些斷點」盡量收回同一塊多人協作畫布。
上面這支是官方 Keynote。官方開場的主軸很清楚：code 從工程交付物，延伸為可以被設計操作、比較、討論的材料。
先看 1 分鐘結論
今年官方主軸可以這樣理解：Figma 想讓設計從靜態畫面，變成能直接探索動態、視覺特效、生成素材和真實互動程式碼的工作台。
官方 recap 整理了六大更新：
- Code layers
- Figma Motion
- Shader fills and effects
- Generative plugins
- Figma Weave tools
- Figma agent 升級
另外 Help Center 也列出幾個即將推出或排 waitlist 的方向：3D transforms、agent 進 FigJam / Slides、code layers 更廣泛開放。
1. Code Layers：直接影響設計交付的功能
如果只想記一個功能，我會記 Code Layers。
它的概念很清楚：code 變成 Figma canvas 上的一種 layer。
你可以在畫布上放一個真的能互動的 code layer，像複製設計 frame 一樣複製不同版本，讓團隊一起比較、留言、調整。
官方文章提到幾個重點：
- 可以從 toolbar 新增 code layer
- 可以把現有設計 frame 轉成互動 code layer
- 可以 import GitHub repo 或上傳 local codebase
- 可以把 code layer 的狀態抽回 editable design layers
- 改完後再更新回 code layer
這件事值得關注的地方，包含 code 產生能力，也包含協作方式的改變：它把原本單人、線性、工程導向的 code exploration 拉回多人協作的設計畫布。
以前設計師看 prototype，工程師看 repo，中間靠截圖、註解、規格文件溝通。Code Layers 想做的是讓「設計探索」和「可互動的真實程式」至少能在同一個場景裡討論。
但這個功能目前仍要先看開放範圍。
這個目前仍是 closed beta。官方說 7 月開始陸續 onboarding，要先排 waitlist。我的建議是：先排候補，等實際接 repo、跑真實專案後再評估它對 handoff 的影響。
2. Figma Motion：把動態製作放進設計檔
Motion 是最容易先體驗差異的更新之一。
Figma 直接把 timeline 放進設計檔裡，支援 keyframes、preset animations、easing curves、spring animations，也可以叫 Figma agent 先幫你生第一版，再手動調。
這對一般產品設計師很重要。多數團隊做 motion 的阻力，通常來自工具切換、時間成本和交付溝通。
- 設計稿裡看不到完整動態
- 工程師只能猜 easing 和 timing
- 設計師要另外錄影或開第三方工具說明
- 最後上線效果常常跟原本想像不同
Figma Motion 比較實用的地方，是它把 motion 接進 design system 和 Dev Mode，讓動態規格可以被檢視、複用和交付。
官方說 Dev Mode 裡可以檢視完整 timeline、timing、easing、keyframes，並複製 CSS、JSON、React 或 motion.dev 程式碼，也能匯出 MP4、GIF、WebM、Animated SVG。
這個現在就能開始玩：open beta，6/24 起逐步推出。但要注意，部分進階能力會綁 Full seat 或付費方案，例如高解析影片輸出、agent 生成 motion、完整 design system 整合。
3. Shader：以前是工程師和 creative technologist 的玩具，現在變成設計素材
聽到 shader 可能會覺得偏工程，但你其實每天都看得到：漸層、玻璃感、模糊、像素化、光影、流體、雜訊、dither，都跟這類技術有關。
Figma 這次把它產品化了。
你可以用 prompt 叫 agent 建 shader fill 或 shader effect，也可以用參考圖輔助描述，產出的 shader 會有可調參數，像 Figma 原生屬性一樣在畫布上控制。
官方也提到 interactive shaders 會稍晚推出，原因是他們還在把效能調到適合正式使用的狀態。
這對品牌視覺、活動頁、海報、社群素材會有用。我會把它定位成「視覺探索工具」，而非「一鍵升級工具」。
Shader 的使用重點在於控制尺度：先快速生成幾個方向，再用設計判斷保留不干擾閱讀、不破壞品牌一致性的版本。
4. Generative Plugins：把小型重複工作變成團隊工具
這個功能沒有 Code Layers 那麼大，但它偏務實。
Generative plugins 的概念是：你直接描述想要的工具，Figma agent 幫你生出一個可以在檔案內使用的 plugin。
適合處理那種「經常做，但又不值得找工程師寫一個完整 plugin」的小事。
- 批次重排圖層
- 依條件整理選取物件
- 套用一致 spacing / padding
- 批次替換文字或顏色
- 產生特定版型排列
它跟傳統 plugin 不衝突。官方也說 classic plugins 會繼續存在，只是 generative plugins 多了一條不用本機開發環境、不用 plugin API 知識的路。
如果你對 Figma 外掛和 AI 開發流程有興趣，可以延伸看我之前寫的 用 AI 製作 Figma Plugin 的完整過程，以及 Figma Plugin 上架全攻略。
5. Weave Tools：把生成流程變成可重複工作流
Weave 是這次比較容易被低估的一塊。
如果你用 AI 生圖做過真實案子，應該知道主要痛點在於穩定產出可用素材，而非只生成單張圖片。
你要參考圖、風格一致、批次變體、調整比例、替換背景、加 logo、對比版本。這些不適合每次都重新 prompt。
Weave 的方向是把這些變成 workflow。
Figma 這次把一批 Weave tools 放進 Figma Design，讓你可以在畫布內做常見 AI image 任務，例如背景替換、加 logo、改長寬比、Transfer Style。
官方也開放 Weave workflows 到 Community，讓大家可以 duplicate 別人的工作流，理解它怎麼搭，再改成自己的版本。
我的看法是：如果你常做提案視覺、活動主視覺、社群素材，Weave 會比單純「AI 生圖」更實用。它處理的是重複產出和一致性，適合放進長期素材流程。
如果你正在建立自己的設計參考與素材工作流，也可以搭配這篇 設計靈感網站完整實戰指南 一起看。
6. Figma Agent：從會聊天，變成比較懂你工作流的助手
Agent 這次補上三個關鍵能力：
- Skills：把團隊規範、常用流程、檢查規則包成可重用指令
- Connectors：透過 MCP 連 Notion、Slack、Granola、Hex、GitHub、Atlassian 等工具
- Attachments / Web search：把 PDF、brief、研究資料、網頁內容丟進上下文
這比「生成一張好看的畫面」重要。
真實工作通常包含品牌規範、產品限制、設計系統、PM brief、工程限制和客戶回饋。Agent 能否處理這些上下文，會直接影響它能不能進入日常流程。
但有一個隱私設定要注意：官方 admin guide 寫到，從 2026-06-23 開始，在 Figma Design 裡新開的 agent 對話 thread，預設會讓同組織或團隊中有 Full seat 且有檔案 edit access 的人看到。6/23 前建立的 thread 則維持 private，除非你手動公開。
這個設定有協作價值，團隊可以接續彼此探索；但如果你在 agent 裡丟客戶資料、內部策略或尚未公開的內容，記得先確認設定。
哪些現在能用？哪些先等等？
| 功能 | 狀態 | 重點限制 |
|---|---|---|
| Figma Motion | Open beta，6/24 起逐步推出 | all plans 可用，但進階輸出、agent motion、design system 整合多半要 paid / Full seat |
| Shader effects / fills | Open beta | 自訂 shader 主要給 paid plans / Full seat；Figma 內建 shader 逐步開放 |
| Weave tools in Figma | Open beta | Professional / Organization / Enterprise + Full seat |
| Weave workflows on Community | Generally available | Full seat，任何方案 |
| Figma agent 升級 | Open beta | Professional / Organization / Enterprise，AI features enabled |
| Generative plugins | Open beta | paid plans / agent 權限；生成後在檔案內使用 |
| Code layers | Closed beta | 先排 waitlist，7 月開始陸續開放 |
| 3D transforms / Agent 進 FigJam 和 Slides | Coming soon | 目前排 waitlist |
需要先觀察的限制
第一，Code Layers 還沒有大規模開放。
現在影片展示完整，概念也對，但它要面對的是真實 repo、設計系統、工程規範、權限、CI、多人協作衝突。這些都需要等實際專案驗證。
第二，好料大多綁 seat 和 paid plan。
這也合理，畢竟 motion、shader、agent、Weave 都有算力和協作成本。但如果你是免費帳號，不要期待一開就全套吃到飽。
第三，AI 功能本身只是能力，還需要設計判斷。
Shader、Weave、Plugins、Agent 都是在降低開始成本，但不會自動幫你做出好設計。尤其是視覺效果，越容易生成，越需要有人判斷什麼該留下、什麼該刪掉。
這也跟我在 AI 工具怎麼選才不踩雷 那篇講的一樣：工具的重點不在數量，而在它有沒有真的卡進你的工作流。
這對設計師代表什麼？
每次 AI 工具更新，就會有人說設計師要被取代。
但我反而覺得這次 Figma 的方向，是把更多原本不容易操作的材料交回設計師手上。
以前你要做 motion，要學另一套工具。你要做 shader，要懂圖形程式。你要測互動 code，要等工程師或自己去寫。你要做穩定 AI 圖像流程，要在一堆工具之間切換。
現在這些東西開始回到同一個 canvas。
這代表一人工作者和小團隊能做的事情會變多，但也代表差距會拉開。
差異會來自誰更會定義問題、組織流程、判斷品質，而非只看誰會按 AI 按鈕。
我的建議
- 先玩 Figma Motion：最容易立刻體驗效果。
- 再試 Shader：用在活動頁、banner、社群視覺，但要控制裝飾強度。
- 把常做的雜事寫成 Generative Plugin：這會比想像中省時間。
- 用 Weave 建立固定素材流程：尤其是提案圖、產品圖、社群圖。
- 幫常用 prompt 做成 Agent Skill：把你的工作習慣變成可重複流程。
- Code Layers 先排 waitlist：等 7 月有實際 access 再評估能不能進真實專案。
工具又升級了，但要練的其實沒有變：
你要能把腦中的畫面講清楚、把流程拆清楚，最後還要看得出好壞。
這才是 AI 和新工具都替代不了的地方。
