PARSED
← HOME
產品介紹

Config 2026:六項更新,如何改變設計工作?

觀點文章2026-09-13Figma

Config 2026 的更新有一個共同方向:讓程式碼、動態與製作流程,都能在 Figma 畫布裡被編輯、討論和重用。 對設計師來說,值得關注的是這些能力如何改善日常工作。

1. Code layers:直接比較互動體驗

Code layers 讓互動程式碼成為畫布上的圖層,可以像 Frame 一樣並排探索不同版本,也能擷取成設計圖層,修改後再更新程式碼。官方介紹

例如搜尋篩選要「立即生效」還是「按下套用」,實際操作會比靜態截圖更容易比較。但設計稿與正式程式庫的版本管理,仍需要團隊定義清楚。

Code layers:設計畫面、互動介面與程式碼並列。圖片來源:Figma 官方原文。
Code layers:設計畫面、互動介面與程式碼並列。圖片來源:Figma 官方原文。

2. Figma Motion:讓動態可以被檢查與重用

Motion 加入時間軸、關鍵影格與預設動畫,Dev Mode 能查看時間與緩動設定,並提供程式碼交付能力。官方介紹

這讓「面板出現得順一點」能變成具體規格,也有助於統一元件的動態。實際上線前,仍要檢查連續操作、裝置效能與降低動態效果的需求。

3. Shader:把效果變成可調整的材料

Shader fills 提供填色材料,effects 則改變既有圖層的呈現;agent 能協助建立效果與可調參數。官方介紹

對品牌視覺而言,可以把顆粒、紋理等效果整理成共用材料,減少每張圖重新製作的工作。用在介面時,則要先確認不會干擾文字閱讀。

Shader 效果與參數控制介面。圖片來源:Figma 官方原文。
Shader 效果與參數控制介面。圖片來源:Figma 官方原文。

4. Generative plugins:把重複操作做成工具

描述行為與控制項,就能請 agent 協助建立可重用外掛。涉及外部服務或第三方 API 的需求,官方仍建議使用傳統外掛。官方介紹

可以從素材排列、元件狀態展示等小任務開始。工具需求要說清楚輸入、修改範圍與例外處理,完成後也要用真實檔案驗證。

5. Weave:重用整套素材製作流程

Weave 用節點串接模型與素材處理步驟,可以比較分支、調整結果,並分享流程範本。官方介紹

它適合思考「一系列圖片怎麼做」:例如活動主視覺延伸成社群圖、橫幅與簡報封面。流程能重跑,重要文字、品牌標誌與商品細節仍需要檢查。

Weave 風格轉換:輸入素材、參考風格與生成結果。圖片來源:Figma 官方原文。
Weave 風格轉換:輸入素材、參考風格與生成結果。圖片來源:Figma 官方原文。

6. Skills:讓 agent 理解團隊的做法

Skills 把常用指令整理成可分享的工作方式;connectors 與附件則補足專案脈絡。官方介紹

例如整理元件時,可以要求先讀流程、優先重用既有元件,再檢查文字、尺寸與狀態。規則越具體,團隊越容易對「完成」有相同理解。

我自己的看法

目前實戰的工作上雖然你要自己用prototype去做一些交互動畫設計是沒有問題的,但是做久了你我也知道他是有一個即現在的,而且這個很好的點是你不需要再去向外去付費時間的東西去買動畫插件,現在一次就包給你做,另外現在還有figma ai agent,最方便的是他可以直接在你的frame去做你想要的動畫,超級方便,做到很多做不到的事情還很省力。

閱讀 Figma 官方原文與圖片來源