Figma Config 2026 重點整理：Figma Motion、Weave 與 AI Agent 如何改變設計工作流？
Figma 於 2026 年 Config 大會發表 Code Layers、Figma Motion、Shaders、Generative plugins、Weave tools 與 Figma Agent 等更新，強化設計、開發、動畫與 AI 工作流整合，從設計工具走向創作與交付一體化平台。
內容目錄
隱藏
Figma Config 2026 是什麼？
Config 是 Figma 每年最重要的產品發表大會，聚焦設計工具、產品協作、開發交付與 AI 工作流。今年 Figma 發表的重點功能包含 Code Layers、Figma Motion、Shader fills and effects、Generative plugins、Figma Weave tools，以及更懂團隊工作方式的 Figma Agent。
Figma CEO Dylan Field 在 keynote 中提到，過去 Config 談的是 AI 如何降低創作門檻、提高上限。但在他看來，AI 確實降低了門檻，真正提高上限的力量，仍來自設計師、創作者與建造者本身。
這也是 Figma Config 2026 的主軸：讓畫布成為「無限表達」的空間。Figma 希望提供更多新的創作材質與工具，讓設計師能用接近思考速度的方式，把想法快速轉成可互動、可動畫化、可開發、可分享的作品，開發者也能更早進入設計脈絡，減少設計與工程交接時的落差。
Figma Config 2026 五大更新
Code Layers：把程式碼帶進畫布
Code Layers 是本次 Config 最具代表性的更新。Figma 將程式碼帶進畫布，把 code 視為圖片、向量與設計圖層之外的另一種創作材質，讓設計與開發能在同一個工作空間中協作。
使用者可以透過一次點擊或提示詞，將任何設計圖層轉換為互動式 Code Layer；也能像複製設計 Frame 一樣，快速複製多個 Code Layer，並排比較不同介面方向與互動邏輯。團隊則能在同一個檔案中發想、留言、修改與迭代。
Code Layer 也支援與設計圖層來回轉換。設計師可以從 Code Layer 提取出可編輯的設計圖層，完成調整後再一鍵同步回 Code Layer，降低設計稿、互動原型與實際開發版本之間的溝通落差。
💡 Code Layers 預計 7 月開始開放早期存取，使用者可至 figma.com/config-betas 加入等候名單。
Figma Motion：動畫成為設計系統的一部分
Figma Motion 是本次 Config 最受關注的新功能之一，讓設計師可以直接在 Figma Design 中製作動畫與互動效果，減少在 Figma、After Effects、Lottie 或前端工具之間切換。
Figma Motion 將 Timeline 帶進畫布，支援 Keyframes、預設動畫樣式，以及位置、縮放、旋轉、不透明度等屬性調整。設計師可以從零建立動畫，也能透過 Figma Agent 生成初始版本，再進一步微調。
這項功能的關鍵，是讓 Motion 成為設計系統的一部分。動畫可以附加在 Component 上，隨著元件套用到不同畫面與協作者檔案；搭配 Motion Variables，也能將 Easing 等動畫規則系統化管理。
在 Dev Mode 中，開發者可以檢視完整 Timeline、時間設定、Easing curve 與 Keyframes，並直接複製 CSS、JSON 或 React 程式碼。Figma Motion 也支援輸出 MP4、WebM、Animated SVG 與 GIF，方便用於原型展示、行銷素材與開發交接。
Figma 預告，未來 Motion 將結合 3D Transforms，讓設計師能在畫布中製作更具空間感的互動效果。
Shader 填充與效果：用 AI 生成進階視覺材質
Shader 填充與效果讓 Figma 進一步強化視覺表現力。Shader 可理解為一種控制圖層視覺效果的技術，能讓畫面呈現金屬、水波、顆粒、模糊、像素化或漸層光影等材質與特效。
過去製作 Shader 通常需要較高技術門檻，也不容易在團隊中共享。Figma 這次將 Shader 帶進可協作的設計畫布，讓設計師可以透過文字描述，或上傳圖片作為參考，由 Figma Agent 自動生成自訂 Shader。其中，「填充」可以作為新的視覺材質套用在圖層上；「效果」則能改變既有圖層的外觀。
生成後的 Shader 預設支援參數化控制，設計師可以直接在畫布上調整細節、堆疊其他效果，並轉換為程式碼與常用格式。這讓原本常見於 Photoshop、After Effects、WebGL 或其他影像工具中的特殊視覺效果，也能在 Figma 中完成視覺探索、團隊協作與開發交付。
Figma 表示，互動式 Shader 正在開發與效能優化中，未來將進一步拓展動態視覺與互動體驗的應用。
Generative plugins：用文字建立自己的 Figma 工具
Generative plugins 讓設計師可以用文字建立自己的 Figma 插件。使用者只要描述想要的工具功能、操作方式、控制項與參數，Figma Agent 就能生成可直接在畫布中使用的插件，無需設定本地開發環境，也不需要理解 Plugin API。
這項功能的重點，是把設計師個人的工作流程工具化。每個團隊都有不同的設計規範、版型需求與重複性操作，Generative plugins 讓設計師可以把這些流程變成可重複使用的工具，並分享給同一個檔案中的協作者。
Figma 未來使用者將能把這些工具發布到團隊、組織或更大的社群中，讓設計工作流從個人自動化，進一步走向團隊與社群共享。
Figma Weave：把節點式生成工作流帶進畫布
Figma Weave 工具則將同樣的思路延伸到視覺內容創作。Weave 是一種節點式畫布工具，使用者可以串接不同模型、轉換素材、優化輸出結果，並比較多種生成方向。
和單次輸入 Prompt、等待一張結果不同，Weave 更像是在建立一套可檢查、可迭代、可重複使用的生成工作流。設計師可以把腦中的視覺想法拆解成明確流程，透過多模型協作逐步調整，讓生成結果更穩定，也更適合團隊使用。
目前使用者可以在 Weave 中建立 Workflows，並發布為 Templates 供他人使用或改作。Figma 也已將多個 Weave 工具帶進 Figma 畫布，未來還將支援發布為團隊、組織或社群可使用的工具。
更懂團隊工作方式的 Figma Agent
Figma Agent 的重點，是讓 AI 更理解設計畫布與團隊工作流程。透過 Skills，團隊可以把常用流程、設計規範與工作慣例打包成可重複使用的指令，讓 Agent 依照既有方法協助完成任務。
Connectors 則讓 Agent 連接團隊已在使用的工具，例如 Notion、Slack、GitHub、Atlassian 等，取得更多專案脈絡，並將更新回傳到相關工具中。Attachments 也能匯入研究資料、brief 或其他參考文件，讓 Agent 在處理設計任務時擁有更完整的背景資訊。
Figma 也強化了 Agent 的團隊協作屬性。Agent chats 預設對同檔案協作者可見，團隊成員可以看到彼此正在探索的方向，並接續討論與迭代；需要時也能設為私人對話。未來 Figma Agent 還會延伸到 FigJam 與 Slides，目前可透過 figma.com/config-betas 加入早期存取等候名單。
Figma Config 2026 更新重點整理
| 更新項目 | 核心功能 | 對團隊的影響 |
|---|---|---|
| Code Layers | 在畫布中建立、比較與更新互動式程式碼圖層 | 縮短設計與開發之間的交接距離 |
| Figma Motion | 原生時間軸、關鍵幀、元件級動畫、Motion Variables | 讓動畫成為設計系統的一部分 |
| Shader fills and effects | 用文字或圖片參考生成材質與視覺效果 | 提升 Figma 的視覺表現力與創作自由度 |
| Generative plugins | 用文字生成可重複使用的 Figma 插件 | 降低團隊建立自訂工具的門檻 |
| Figma Weave | 整合節點式 AI 生成工作流 | 讓品牌與行銷素材產出更可控、更一致 |
| Figma Agent | Skills、Connectors、Attachments 與團隊可見聊天 | 讓 AI 更理解團隊流程與專案脈絡 |
Figma Config 2026 常見問題
Figma Config 2026 發表了哪些重點功能？
Figma Config 2026 發表 Code Layers、Figma Motion、Shader fills and effects、Generative plugins、Figma Weave tools，以及更強化的 Figma Agent。
Code Layers 是什麼？
Code Layers 讓設計師可以在 Figma 畫布中建立與操作互動式程式碼圖層，也能從設計轉為 code，或從 code 提取回可編輯設計圖層。
Figma Motion 可以做什麼？
Figma Motion 提供原生時間軸、關鍵幀、預設動畫樣式、元件級動畫與 Motion Variables，並支援匯出 MP4、WebM、Animated SVG、GIF，也能在 Dev Mode 複製 CSS、JSON、React 與 motion.dev 程式碼。
Shader fills and effects 適合哪些設計情境？
Shader fills and effects 適合用於品牌視覺、互動網頁、行銷素材、產品介面與動態設計，可產生液態金屬、網格漸層、dithering、pixelate、blur 等進階視覺效果。
Generative plugins 有什麼用途？
Generative plugins 可以讓使用者用文字描述建立 Figma 插件，將重複性設計任務、品牌流程或批次處理工作工具化，降低自訂插件開發門檻。
Figma Weave 是什麼？
Figma Weave 是整合進 Figma 畫布的節點式 AI 生成工作流工具，可建立可重複使用的生成流程，並發布為模板或工具。
Figma Agent 這次升級了哪些能力？
Figma Agent 新增 Skills、Connectors、Attachments 等能力，能理解更多團隊流程與外部工具脈絡，並將 AI 協作擴展到更完整的產品工作流。
新手閱讀：
- Figma AI 功能總整理｜設計自動化、網站建置、品牌內容生成 + 訂閱方案比較
- 2026 必收！ChatGPT Image 2.0 指令大全：16 種實測應用範例（IP 角色、繁體中文海報、UI 設計、髮型分析卡）
- 2026 ChatGPT、AI 訂閱信用卡回饋？怎麼刷最省？完整省錢指南
加密貨幣屬於高風險投資，本網站內容均不構成任何投資建議與責任。
掌握虛擬貨幣、區塊鏈大小事
