Figma Shaders 是什麼？一句話生成全息箔、噪點質感的 AI 材質完整教學
2026年7月4日 上午 2:57
UI/UX 設計FIGMA · SHADERS · CONFIG 2026
QUICK ANSWER
Figma Shaders 是 Config 2026 推出的 AI 材質功能：用文字描述，Figma agent 就生成全息箔、噪點、等高線這類質感，分成獨立視覺的 shader fill 與改造既有圖層的 shader effect 兩型態，生成後附可調滑桿、可互相堆疊、可存成 style 進設計系統。目前開放 Beta，付費方案 Full seat 可自建；官方也做了數十個現成 shader，所有方案免費使用。
先講一個你可能沒想過的事：你其實天天在用 shader。
每次你在 Figma 裡加一層 blur、調一個 blend mode、疊一個玻璃感的 distortion，背後跑的都是 shader——一種直接對螢幕上每個像素下指令的微型程式，遊戲、AR、建築視覺化全靠它。它一直在那裡，只是藏在引擎室，設計師摸不到方向盤。
六月底的 Config 2026 把方向盤交了出來。現在你可以直接對 Figma agent 講一句「幫我做一個像燙金全息箔的效果」，它交回來的不是一張圖，是一個附著滑桿、可以一直調、可以存進設計系統的材質工具。這篇把它拆開來講：兩種型態、怎麼下 prompt、以及它對設計系統意味著什麼。
CHAPTER 01 · WHAT IS IT
Shader 是什麼，fill 跟 effect 差在哪
Shader 的本體是一小段跑在繪圖晶片上的程式，專門負責「畫面長什麼樣子」——它算得極快，所以能即時做出擬真的火焰、水波、扭曲這種複雜視覺。Figma 的畫布渲染一直是靠它撐的，這次的差別是：Figma 讓你用講的，生一顆自己的。
生出來的 shader 分兩種型態，理解這個分法，後面下 prompt 才會準：
SHADER FILL
自己就是一塊視覺
獨立存在的圖樣與材質：等高線、Voronoi 圖樣、程序化的大理石、火焰、水面。它像一種會自己生長的填色，鋪上去就是完整畫面。
SHADER EFFECT
改造你已有的圖層
疊加在既有內容上的處理：模糊、扭曲、噪點、像素化、半色調、全息箔、調色。你的 logo 還是你的 logo，只是換了一層皮膚。
一個是「無中生有的材質」，一個是「既有圖層的濾鏡」。等高線那種鋪滿背景的是 fill，讓 logo 變液態鉻的是 effect。這次 Config 的六件套裡它跟 Generative Plugins 同屬一組——都是對 agent 講一句話、換回一個工具，差別只在外掛管行為、shader 管外觀。六件套的全貌我在〈Config 2026 全解析〉整理過，這裡專心講材質。
CHAPTER 02 · WHY IT MATTERS
質感一直很貴，貴在取得路徑
回想這幾年輪流刷屏的視覺趨勢：玻璃擬態、噪點顆粒、Y2K 金屬、全息漸層。每一波流行起來，設計師的取得路徑都是同一套——去素材庫刷卡買紋理，或翻遍 Community 找一個半合用的外掛，再不然開 After Effects 為一張靜態圖架一條合成流程。質感從來不難「想」，難的是拿到手的那段路。
而且買來的素材有一個天生的缺陷：它是死的。色相偏一點、顆粒粗一點、角度歪一點，你只能回去重買或重算。這就是為什麼 shader 這次的「附滑桿」比「能生成」更關鍵——你拿到的不是一張圖，是一個還握在你手上的參數空間。想調 hue、調密度、調光澤，滑桿就在畫布旁邊。
如果你讀過我寫 Generative Plugins 那篇，會認出這是同一個哲學：AI 給你的是工具，不是成品。Shader 是這個哲學最好懂的示範，因為「滑桿」這個東西，設計師一看就知道意味著什麼——控制權。
CHAPTER 03 · HOW IT WORKS
怎麼生一顆自己的 shader
操作本身沒有懸念：開一個 Figma Design 檔案，點導覽列的 Agents 開新對話，打「Build me a shader」加上你要的描述，agent 會回你一顆完整寫好程式的 shader，跑一下、不滿意就繼續跟它來回改。Beta 期間用 agent 建立與迭代不扣 AI credits，跑 shader 則永遠免費——這個空窗期，是現在就該玩起來的理由。
真正決定成果好壞的是 prompt 怎麼下。Figma 官方給了四條技巧，每一條都在講同一件事：把腦中的畫面翻譯成 agent 聽得懂的語言。
01
明講「shader」兩個字
只說「幫我做 mesh gradient」可能拿到一張沒有控制項的普通填色。說「build me a shader」，才會拿到工具。
02
描述你想看到的
「一團往邊緣淡出的粉色柔光」勝過「radial gradient 加 blur」。你不需要懂技術詞，agent 需要的是畫面。
03
先點名你要的控制項
「附一個模糊量滑桿和一個色彩選擇器」——先講清楚，省掉一輪來回。
04
給真實世界的參照
「像 risograph 印刷」「像 CRT 螢幕」「像熱氣的晃動」。一個準的參照，勝過一整段形容詞。
看一個官方範例就懂了。想要地圖等高線的背景，prompt 是這樣下的：等高線構成的 shader fill、像登山地圖的海拔圈，要能控制線距、線的粗細、地形起伏程度，線色與底色分開設定，圖樣要無縫，鋪大面積不能穿幫。行為、控制項、參數，一次講齊。
實際生成的過程與更多花樣，官方這支影片一次示範了 shader 跟 generative plugins 兩兄弟：
CHAPTER 04 · THE REAL SHIFT
材質，正式升格為設計系統的一級材料
單顆 shader 好玩，但真正值得設計師坐直的，是它生成之後能去哪裡。
存成 style，發布進團隊 library
任何 shader fill 或 effect 都能存成樣式、發布到 team library——跟色票、字體樣式平起平坐。
互相堆疊，疊完再存
噪點疊在漸層上、半色調疊在調色上，組合出來的複合質感一樣能收進樣式。
進 Motion 時間軸，打 keyframe
shader 的參數可以直接在動效時間軸上打關鍵影格——材質會動，還能出成 MP4、GIF。
經 MCP 送進 Figma Make
把視覺效果帶進 live 的程式碼原型（匯出後暫不與原 shader 保持連動）。
看出來了嗎？這四個出口拼起來是一句話：質感不再是一次性的視覺處理，它變成了設計系統裡會傳播、會複用、會動的資產。
先是動效，現在是質感——Figma 正在把過去要出走才拿得到的東西，一樣一樣收編成系統資產。
這跟 Figma Motion 是同一步棋的兩隻腳。Motion 讓動效像色票一樣跟著元件傳播（我在〈Figma Motion 完整解析〉拆過），Shaders 讓質感也走同一條路。品牌的「動的方式」跟「摸起來的感覺」，過去散落在 AE 專案檔和素材資料夾裡，現在都能住進同一套 library——這對維護品牌一致性的團隊來說，是結構性的差別。
CHAPTER 05 · IN PRACTICE
設計師現在可以拿它做什麼
落到日常，我會從這幾個場景開始。品牌與行銷視覺最直接——hero 區的背景質感、活動主視覺的金屬光澤、社群圖卡的噪點顆粒，這些過去要買素材的地方，現在描述一句就有，而且色相跟著品牌色走，用滑桿對齊就好。再來是 UI 表面材質：卡片的霧面玻璃、按鈕的微噪點，生成之後存成 style，整個產品的「觸感」就有了一致的來源。
畫插畫的人也有份：Figma Draw 裡可以用 shader fill 替向量作品包上噪點紋理或 gradient mesh，程序化圖樣直接長進你的插畫。至於搭配 Motion 讓材質動起來——會呼吸的漸層、流動的全息光——那是提案簡報裡最便宜的驚嘆號。
如果你暫時不想自己生，Figma 官方做了幾十顆現成的 shader 跟外掛，所有方案免費用：開檔案點 Tools，來源篩「From Figma」，還能按 shader fill、shader effect、plugin 分類過濾。先拿現成的玩熟手感，再開始生自己的。
CHAPTER 06 · LIMITS
開玩之前，先把限制看清楚
照慣例，優點講完講現實。第一道門檻是資格：自己生 shader 需要付費方案的 Full seat，免費帳號能用的是官方現成那批。第二是環境：shader 靠 WebGL 渲染，機器跟瀏覽器要符合 Figma 的系統需求，太老的裝置會跑不動。第三是狀態：整個功能還在開放 Beta，官方自己就說可能遇到效能問題，複雜的 shader 疊多了，畫布會有感。
功能面也有幾個「還沒」要記住：shader 目前不能匯出成程式碼（官方說在做了）；發布到 Community 給大家用，也是 coming soon；經 MCP 送進 Make 的效果，匯出後不會跟原 shader 保持連動。還有計費——beta 期間用 agent 建立與迭代免 AI credits，但這是限時的，之後建立與編輯會照 agent 的標準計費，執行則永遠免費。空窗期的意思就是：現在練，最划算。
CHAPTER 07 · TAKEAWAYS
質感民主化之後，值錢的是什麼
全息箔、霧面玻璃、程序化大理石——這些過去按小時計價的質感，門檻現在降到一句話。跟這系列前兩篇的結論一樣，門檻降下去，稀缺就換位置：當人人都生得出質感，值錢的是知道這個品牌該有什麼質感的判斷，和一眼看出「這版對了」的眼睛。
還有一個更具體的新資產藏在 prompting 技巧裡。官方說，一個準的真實世界參照勝過一段形容詞——「像 risograph」「像 CRT 螢幕」「像熱氣的晃動」。這意味著設計師平常累積的視覺參照庫，那些你逛展、翻書、存 Pinterest 攢下來的「我知道那是什麼感覺」，突然全部變成了可執行的語言。品味這件事，第一次可以直接下指令。你的眼睛看過多少東西，你的 prompt 就有多準。
所以我的建議很簡單：趁 beta 免 credits 的空窗，把你存了很久的那些質感 reference 一個一個丟給 agent 試。生得像不像是其次，這個過程會逼你把模糊的「感覺」翻譯成精準的語言——而那個翻譯能力，工具拿不走。
常見問題
Q：Figma Shaders 是什麼？
A：Config 2026 推出的 AI 材質功能。你用文字描述想要的視覺質感，Figma agent 就生成一顆完整寫好程式的 shader，附可調滑桿，可堆疊、可存成 style 進設計系統。分成獨立視覺的 shader fill 與改造既有圖層的 shader effect 兩種型態。
Q：shader fill 跟 shader effect 差在哪？
A：fill 是自成一塊的視覺——圖樣、漸層、大理石或火焰這類程序化材質；effect 是疊在既有圖層上的處理——模糊、扭曲、噪點、像素化、半色調、調色。要鋪背景選 fill，要幫 logo 換皮膚選 effect。
Q：免費帳號可以用 Figma Shaders 嗎？
A：分兩層。自己用 agent 生成 shader，需要付費方案的 Full seat；但 Figma 官方做的數十顆現成 shader 與外掛，所有方案所有席次都免費使用——開檔案點 Tools，來源篩「From Figma」就能取用。
Q：生成 shader 要花 AI credits 嗎？
A：Beta 期間用 agent 建立與迭代 shader 不扣 credits；beta 結束後，建立與編輯會依 agent 的標準計費。執行 shader 則不論何時都不消耗 credits。
Q：shader 可以匯出成程式碼給工程用嗎？
A：目前還不行，官方表示正在開發中。現階段的出口是：存成 style 發布到 team library、在 Motion 時間軸上打 keyframe 輸出影片，或經 MCP 送進 Figma Make 的程式碼原型（匯出後暫不與原 shader 連動）。
Q：下 prompt 有什麼技巧？
A：官方四條：明講「shader」這個詞、描述你想看到的畫面而非技術術語、先點名你要的控制項（例如模糊量滑桿）、給真實世界的參照（像 risograph 印刷、像 CRT 螢幕）。其中參照最有效——一個準的參照勝過一段形容詞。