---
title: "Figma Shaders 是什麼？一句話生成全息箔、噪點質感的 AI 材質完整教學"
slug: figma-shaders-guide
url: https://rar.design/posts/figma-shaders-guide
published_at: 2026-07-04
modified_at: 2026-07-18
author: "設計師 Riven"
category: "UI/UX 設計"
tags: ["設計系統", "UI 設計", "shader", "AI 設計工具", "Config 2026", "Figma Shaders", "figma"]
access: public_access
---

# Figma Shaders 是什麼？一句話生成全息箔、噪點質感的 AI 材質完整教學

> Config 2026 材質革命：fill 與 effect 兩型態、官方 Prompt 四技巧、設計系統整合一次看懂

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-07-04

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 全解析〉整理過，這裡專心講材質。 ▲ 同一張卡片，左邊平面、右邊套上 shader——差別不在顏色，在光線、表面與深度。 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 的〈generative plugins 與 shaders 快速上手指南〉裡。 ▲ 不知道從哪開始就照這個順序：先風格、後特效、最後才是修飾。 真正決定成果好壞的是 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，整個產品的「觸感」就有了一致的來源。 ▲ 不是每個版面都要用：主視覺越重要的地方，shader 越有發揮空間。 畫插畫的人也有份：Figma Draw 裡可以用 shader fill 替向量作品包上噪點紋理或 gradient mesh，程序化圖樣直接長進你的插畫。至於搭配 Motion 讓材質動起來——會呼吸的漸層、流動的全息光——那是提案簡報裡最便宜的驚嘆號。 ▲ 把效果放對地方：Hero 大膽用、卡片節制用、按鈕微量用、背景只擺角落。 如果你暫時不想自己生，Figma 官方做了幾十顆現成的 shader 跟外掛，所有方案免費用：開檔案點 Tools，來源篩「From Figma」，還能按 shader fill、shader effect、plugin 分類過濾。先拿現成的玩熟手感，再開始生自己的。 CHAPTER 06 · LIMITS 開玩之前，先把限制看清楚 照慣例，優點講完講現實。第一道門檻是資格：自己生 shader 需要付費方案的 Full seat，免費帳號能用的是官方現成那批。第二是環境：shader 靠 WebGL 渲染，機器跟瀏覽器要符合 Figma 的系統需求，太老的裝置會跑不動。第三是狀態：整個功能還在開放 Beta，官方自己就說可能遇到效能問題，複雜的 shader 疊多了，畫布會有感。 功能面也有幾個「還沒」要記住：shader 目前不能匯出成程式碼（官方說在做了）；能回應使用者操作的互動式 shader——讓參數跟著滑鼠或狀態即時變化——也還在 coming soon，官方說要先把效能調到位；發布到 Community 給大家用，同樣還沒開；經 MCP 送進 Make 的效果，匯出後不會跟原 shader 保持連動。還有計費——beta 期間用 agent 建立與迭代免 AI credits，但這是限時的，之後建立與編輯會照 agent 的標準計費，執行則永遠免費。空窗期的意思就是：現在練，最划算。 ▲ Shader 很好看，但一失手就容易變髒——這四個雷，新手幾乎都會踩。 CHAPTER 07 · TAKEAWAYS 質感民主化之後，值錢的是什麼 全息箔、霧面玻璃、程序化大理石——這些過去按小時計價的質感，門檻現在降到一句話。跟這系列前兩篇的結論一樣，門檻降下去，稀缺就換位置：當人人都生得出質感，值錢的是知道這個品牌該有什麼質感的判斷，和一眼看出「這版對了」的眼睛。 還有一個更具體的新資產藏在 prompting 技巧裡。官方說，一個準的真實世界參照勝過一段形容詞——「像 risograph」「像 CRT 螢幕」「像熱氣的晃動」。這意味著設計師平常累積的視覺參照庫，那些你逛展、翻書、存 Pinterest 攢下來的「我知道那是什麼感覺」，突然全部變成了可執行的語言。品味這件事，第一次可以直接下指令。你的眼睛看過多少東西，你的 prompt 就有多準。 所以我的建議很簡單：趁 beta 免 credits 的空窗，把你存了很久的那些質感 reference 一個一個丟給 agent 試。生得像不像是其次，這個過程會逼你把模糊的「感覺」翻譯成精準的語言——而那個翻譯能力，工具拿不走。 ▲ 把這四句記住：好的 shader 讓設計說出感覺，而不只是裝飾。 COURSE · FIGMA 100 種 Figma 設計的方法 質感用講的就能生，但判斷質感該用在哪，還是從 Figma 的一百種實作練起。 看課程 → SUBSCRIPTION · AIWAKEN AI 覺醒設計應用攻略 AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。 了解訂閱 → 常見問題 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：目前還不行，官方表示正在開發中；shader effect 目前在 Dev Mode 裡也還看不到，官方說產品團隊正在研究。現階段的出口是：存成 style 發布到 team library、在 Motion 時間軸上打 keyframe 輸出影片，或經 MCP 送進 Figma Make 的程式碼原型（匯出後暫不與原 shader 連動）。 Q：下 prompt 有什麼技巧？ A：官方四條：明講「shader」這個詞、描述你想看到的畫面而非技術術語、先點名你要的控制項（例如模糊量滑桿）、給真實世界的參照（像 risograph 印刷、像 CRT 螢幕）。其中參照最有效——一個準的參照勝過一段形容詞。