Figma Config 2026 有什麼新功能?Generative Plugins 用一句話做出專屬外掛

從 Generative Plugins、Code Layers 到 AI shader,設計師最該知道的 Config 2026 五大更新
設計師 Riven

設計師 Riven

2026年6月25日 上午 3:11

UI/UX 設計

AI 工具 · FIGMA · CONFIG 2026

Figma Config 2026 keynote 展示畫面,畫布上一句提示「Create a circular image array plugin」正在生成專屬外掛,旁邊還有 Risograph 濾鏡的滑桿控制項、Code 程式碼面板與 Motion 動畫時間軸

▲ Config 2026 keynote 的主視覺:一句「Create a circular image array plugin」就生出一個專屬外掛,旁邊是可調的濾鏡滑桿、Code 面板與動畫時間軸。圖片來源:Figma

QUICK ANSWER

Figma 在 Config 2026 keynote 推出 Generative Plugins(生成式外掛):你用自然語言描述想要的工具——它的行為、控制項、參數——Figma agent 就幫你生出一個可重複使用的外掛,全程不寫 code、不開發環境。這也是這次一連串更新(Code Layers、Motion、AI shader、Agent Skills)共同的主軸——AI 把一次性的「成品」,升級成可以一直調、能存起來、能丟給整個團隊共用的「工具」。對設計師來說,過去要有工程能力才跨得過的那道牆,這次用一句話就拆了。

這兩天打開社群,半個設計圈都在傳 Figma Config 2026 的畫面。其中傳最兇的一張,是一個白色輸入框,游標停在中間,上面寫著一行字:描述你需要的工具,行為、控制項、參數,然後得到一個正好對著你工作流的東西。

那是 Generative Plugins。它聽起來只是「又一個 AI 功能」,但如果你做過設計、又曾經想替自己的重複工作寫個小外掛卻卡在「我不會寫 code」,你會知道這一格輸入框的份量。

Config 2026 到底發生了什麼

CHAPTER 01 · WHAT HAPPENED

Config 是 Figma 一年一度的開發者大會,今年(2026)在舊金山 Moscone Center 舉行,6 月 23 到 25 號三天,現場票早早就賣光。產品 keynote 由執行長 Dylan Field 主講,把這一年押在畫布上的賭注一次攤開。

攤開的東西很多,但設計師真正要記住的是五個:Code Layers(程式碼圖層直接上畫布)、Motion(原生動畫與時間軸)、AI shader(用講的做出材質與光效)、Agent Skills(把常用流程存成指令分享給團隊),還有這次的頭條——Generative Plugins。

五個功能長得不一樣,骨子裡卻是同一句話:AI 丟給你的東西,從一張做好的圖,變成一個能繼續調的工具。這句話我們留到後面拆,先看頭條。

▲ Figma 官方釋出的 Config 2026 完整 keynote。圖片來源:Figma 官方 YouTube

Generative Plugins:用一句話做出你自己的外掛

CHAPTER 02 · THE HEADLINE

先講它是什麼。Generative Plugins 讓你直接描述「我想要一個什麼樣的工具」,Figma agent 就把那個外掛做出來,而且是一個可以重複使用、可以存起來、之後隨時叫出來再跑的工具——不是跑完就消失的一次性結果。

Figma 官方舉的例子很接地氣:一個在金融科技團隊的設計師,三天兩頭就要畫某種特定的流程圖或資料圖表。過去他要嘛手刻,要嘛去外掛市集翻一個半合用的回來將就。現在他可以描述自己要的那種圖表邏輯,讓 agent 捏一個專屬工具,以後每次要畫就叫它出來。Figma 說,這個功能他們內部已經自己用了好幾個月。

官方在 keynote 給的描述更直白:你可以做一個「版面產生器」,也可以做一個「向量路徑描繪工具」,講出來,Figma 就幫你蓋。原本要寫 code、要懂 Plugin API、要架開發環境才生得出來的東西,現在的門檻是——你會不會把一句話講清楚。

外掛的兩種做法

過去

想法 → 學 JavaScript → 讀 Plugin API 文件 → 架開發環境 → 寫、測、debug → 上架。中間任何一關卡住,這個想法就死在腦袋裡。

現在

想法 → 描述行為、控制項、參數 → agent 生出工具 → 試跑、調整、存起來重複用。從「想法」到「能用的工具」之間,只剩一句話的距離。

為什麼這對設計師是一道牆被拆掉

CHAPTER 03 · WHY IT MATTERS

Figma 的外掛生態本來就大,市集上有上千個社群做的工具。但這個生態一直有一條隱形的階級線:能寫外掛的是工程師,會用外掛的是設計師。你有再多對工具的想法,只要不會 code,你就永遠在「用別人做的」那一邊。

這條線卡掉的,常常是最懂痛點的那群人。真正知道「這個重複動作每天浪費我二十分鐘」的,是天天在拉版面、對齊、改間距的設計師本人;但他們最沒有能力把那二十分鐘變成一個外掛。需求和能力,剛好錯開在兩種人身上。

Generative Plugins 做的事,就是讓「最懂痛點的人」直接變成「能做出工具的人」。你不用去找工程師排需求、不用等下個 sprint、不用解釋半天對方還聽不懂你要的對齊邏輯。你描述,它生成。與其說它讓外掛變多,不如說它重新定義了「誰能做外掛」這件事。

過去外掛市集是工程師的地盤,設計師只能逛。現在,逛街的人也能自己開店了。

Config 2026 另外四個重點,一樣是這個邏輯

CHAPTER 04 · THE REST

把頭條放下,看其他四個。你會發現它們其實是同一個想法的不同切面。

Code Layers。去年 Config,Figma 用 Figma Make 第一次把 code 帶上畫布。今年更進一步,程式碼圖層直接和設計圖層並排在同一個空間:你可以從設計生成 code、用 agent 改它、從 GitHub 匯入整個 repo,再從一個 code 圖層拉出可編輯的設計圖層,調完再轉回 code。設計到開發那道交接,被壓進了同一張畫布。想深入看這條線,可以讀我先前寫的〈Figma Make 接本地程式碼〉。

Motion。動畫、轉場、時間軸過去都要丟去外部軟體做,再轉成 code 餵回來。現在它直接內建在設計系統裡,可以多人協作、可以用 agent 生成,還能順著 Dev Mode 與 MCP 一路推到正式產品。連動畫都能在時間軸上互留註解、一起調。想看 Motion 怎麼用,我也單獨寫了一篇〈Figma Motion 完整解析〉。

AI shader。這個最能體現「給你工具不給你成品」的精神。新的 shader 用 WebGPU 做出抖動、像素化、各種模糊,還有霧面玻璃、拋光金屬這種表面質感。過去這需要圖學程式底子,現在你描述你要的效果,agent 生出來的不只是一張圖,而是一組「附帶可調滑桿」的效果——你還能再轉動參數,調到剛好。

Figma 的 Shader fills 面板,「Created by you」區塊裡有使用者自己生成的四個 shader:Dither waves、Fluid halftone、Particle web、Magnetic field,畫布上一個 MS logo 被套上橘色半色調網點效果

▲ Shader fills 面板裡「Created by you」的自製效果——描述一句,生出一個可重複套用、可再調參數的工具,不是一次性的圖。圖片來源:Figma

Agent Skills。你可以把常用的工作流程存成一個指令,例如 /contrast-improvements,叫一次,agent 就把整份設計裡對比度不足、不合無障礙標準的配色換成設計系統裡合格的替代色。存好之後還能發布給整個團隊,大家共用同一套技能。agent 也能透過第三方連接器、網路搜尋、檔案附件,抓進更多上下文。

Figma 的 Skills and commands 面板,列出 /clay-morphism、/comment-synthesis、/crit-recap、/contrast-improvements 等自訂指令,右側顯示這個技能會把低對比配色換成符合 WCAG AA 或 AAA 的設計系統色,並已發布給 Growth Team

▲ Agent Skills:把一套常用流程存成斜線指令,整份設計一鍵套用,還能發布給團隊共用。圖片來源:Figma

另外還有一個 Weave——Figma 去年併購來的節點式 AI 工作流工具,這次以「AI 材料」的身分接進畫布,能把多個模型、多種素材串成一個一致的設計方向,首批超過二十個工具上線,完整整合預計今年稍晚。它走的也是同一條路:可組裝、可重複、可分享。

五個更新,一個共同的轉變

CHAPTER 05 · THE PATTERN

把五個攤在一起看,那條主軸就浮出來了。過去這一年,我們對 AI 設計工具的體感是這樣的:你下一個 prompt,它吐一個結果,你只能選擇接受、或重 prompt 一次。生成、賭運氣、再生成。結果是好是壞,你沒有中間地帶可以微調。

Config 2026 這批功能想翻的,就是這個體感。AI 生出來的東西,從一個句點,變成一個你可以一直按的把手。Shader 附滑桿、外掛能存起來重跑、技能能發布共用、動畫能在時間軸上繼續調——共同點是「結果交付之後,控制權還在你手上」。

生成「成品」

一次性、不可調、要嘛接受要嘛重來。好壞靠運氣,改不動細節。

生成「工具」

可調參數、可存起來、可重複用、可分享。交付之後,你還握著方向盤。

這個轉變很重要,因為它把設計師從「驗收 AI 的成品」拉回到「操作 AI 的工具」。前者你是個被動的審稿人,後者你是個拿著新工具的師傅。差別不在功能多寡,在於誰在主導這場合作。

為什麼 Figma 是帶著壓力上台的

CHAPTER 06 · THE TENSION

講完亮點,講點現實。這場 keynote 風光,但 Figma 的處境其實很微妙。

這一兩年崛起的一批工具——像 Anthropic 的 Claude Design——能直接從一句話生出一個還算像樣、點得動的介面。這類「氛圍編碼」工具挑戰的,正是 Figma 商業模式的根本前提:一個數位產品,是從一個設計檔開始的。如果產品可以直接從 prompt 長出來,那設計檔這一站,會不會被跳過?

更尷尬的是,Figma 自家 AI 功能跑的模型,是跟 OpenAI、Anthropic、Google 這些供應商租來的。而 Claude Design 正是出自 Anthropic——供應商,同時是競爭對手。租來的智慧,還直接吃掉利潤:Figma 的毛利率在 2025 一年間從約 92% 掉到 86%,主因就是大規模 AI 推論的成本。

+46%

Q1 營收年增

92→86%

毛利率(2025)

95%

財星 500 大用 Figma

所以 Code Layers、Motion、Shader、Weave 這些把 AI 生成拉「進」畫布的功能,與其說是炫技,更像防守。Figma 的算盤是:反正你都要用 prompt 生東西了,那就讓這件事發生在 Figma 裡面,而不是繞過 Figma 在外面發生。把生成留在自家畫布上,你就還在它的地盤。

Dylan Field 在會上講了一句我很喜歡的話。他說,每次有人炫耀自己用 AI 生出一個設計,他都想問:花了多久?燒了多少 token?拿人類的工時去比,結果常常「完全不合理」。機器讓「做」變便宜了,但該不該、好不好,這個判斷得留給人。

設計師該怎麼看這件事

CHAPTER 07 · TAKEAWAYS

我自己的看法是這樣的。Generative Plugins 把「做工具」的門檻降到一句話,這當然是好事——它把能力還給了最懂痛點的人。但門檻降低之後,真正稀缺的東西也跟著換了位置。

當「做一個外掛」變得不值錢,值錢的是「知道自己該做哪個外掛」。當生成一個 shader 只要一句話,值錢的是「看得出哪一版才對」的眼睛。工具自動化了,需求判斷和品味判斷沒有。Field 那句「判斷留給人」,講的就是這個——這也是為什麼我一直說,AI 是設計師的加速器,不是替代品。它讓你跑得更快,但往哪跑、跑得對不對,還是你說了算。

所以這次更新對你的實際意義,與其說是「設計師要被工具取代」,不如說是「設計師手上多了一套自己造工具的能力」。你愈知道自己的工作流哪裡卡、愈說得清楚自己要什麼,這套能力對你愈值錢。反過來,如果你連自己每天在重複什麼都講不清楚,再強的 agent 也幫不了你。

這條「工具會了、判斷才是門檻」的線,我之前在〈AI 時代的設計判斷地圖〉裡畫得更完整;如果你還在糾結「AI 到底會不會取代我」,那篇〈AI 會取代 UI/UX 設計師嗎〉也許能幫你把焦慮整理成方向。

延伸學習

100 種 Figma 設計的方法 UI/UX 線上課程封面

COURSE · FIGMA

100 種 Figma 設計的方法

從零到上手,系統學會用 Figma 做 UI/UX 設計的一百種方法。

看課程 →
AI 覺醒設計應用攻略

SUBSCRIPTION · AIWAKEN

AI 覺醒設計應用攻略

每週幫你過濾 AI 工具雜訊,只留對設計師真正有用的應用。

了解訂閱 →

常見問題

Q:Figma Generative Plugins 是什麼?

A:Config 2026 推出的功能,讓你用自然語言描述想要的工具——它的行為、控制項、參數——Figma agent 就幫你生出一個可重複使用的外掛,全程不用寫 code、不用架開發環境。例如做一個版面產生器、或一個固定格式的圖表工具,描述出來就能用。

Q:Generative Plugins 需要會寫程式嗎?

A:不用。這正是它的重點——過去做 Figma 外掛要懂 JavaScript、讀 Plugin API、架開發環境,現在只要把需求講清楚。門檻從「會不會 code」變成「能不能把一句話講明白」。

Q:Config 2026 還有哪些重點更新?

A:除了 Generative Plugins,還有 Code Layers(程式碼圖層上畫布)、Motion(原生動畫與時間軸)、AI shader(用描述生成可調的材質與光效)、Agent Skills(把流程存成斜線指令分享給團隊),以及 Weave 工作流接進畫布。五個功能的共同主軸是:AI 給你的是可調的工具,不是一次性的成品。

Q:這些功能現在可以用了嗎?

A:Generative Plugins 與 shader 等 AI 功能在 Config 期間陸續開放;Code Layers、Make 接本地程式碼等部分以 beta 形式推出;Weave 的完整整合預計今年稍晚才會到位。實際開放範圍依方案(Professional、Organization、Enterprise)而定,建議以 Figma 官方公告為準。

Q:AI 把做外掛、做 shader 都變簡單了,設計師會被取代嗎?

A:會被換掉的是「執行」,判斷不會。當做一個工具只要一句話,稀缺的就變成「知道該做哪個工具」與「看得出哪一版才對」。工具會自動化,需求判斷和品味判斷不會。設計師該做的是把 AI 當加速器,用更省下來的時間去想得更深、做得更挑。

Q:為什麼說 Figma 這次是帶著壓力發表?

A:因為像 Claude Design 這類能直接從 prompt 生介面的工具,挑戰了「產品從設計檔開始」這個前提;而 Figma 自家 AI 又得跟 Anthropic 這些供應商租模型,等於供應商同時是對手,租金還直接壓低毛利。把 AI 生成拉進自家畫布,是 Figma 的防守。