2026 年 11 月 2 日，Figma 在 Release Notes 里宣布 Shader（着色器）正式向所有用户开放，同时支持以最高 4096px 的分辨率渲染和导出，并能带进代码图层（code layer）。过去要做流动渐变、金属质感、噪点颗粒、像素化这类效果，通常得靠插件或者到 After Effects、Shadertoy 里做完再贴图；现在在 Figma 设计文件里就能直接挂一个 Shader 上去，参数还能随时调。本文按官方帮助中心的说明，把 Figma Shader 怎么用 拆成可照做的步骤：先用现成的，再用 agent 自己做一个，最后讲动画、样式复用和排障。

先说结论

• Figma 里的 Shader 分两种：着色器填充（Shader fill） 生成独立的图案、渐变、纹理；着色器效果（Shader effect） 读取图层现有像素再加工，比如颗粒、扭曲、半调、模糊。
• 填充在右侧栏 Fill / Stroke 里加，效果在 Effects 里加；现成的 Shader 在左侧导航栏 Tools 标签里找。
• 使用 Shader 不消耗 AI 积分；用 Figma agent 创建或修改 Shader 才会消耗。
• 渲染依赖 WebGPU，浏览器或显卡不支持、或者 WebGPU 处于兼容模式时会用不了。

Shader 是什么，和普通渐变、效果有什么不同

Shader（着色器）本质上是一段在 GPU 上运行的小程序，决定图层每个像素怎么显示。Figma 帮助中心的说法是：模糊、混合模式、渐变叠加、玻璃折射这些效果背后用的都是着色器技术，而新功能让你可以把“自定义着色器”直接挂到图层上。

和普通渐变、阴影相比，Shader 的区别在于：

对比项	普通填充 / 效果	Shader
能做的视觉	纯色、线性/径向渐变、图片、投影、模糊等固定类型	程序化纹理（大理石、火焰、水波）、网格渐变、噪点、像素拉伸、金属、全息等
是否可动	静态	可以是静态、动画，也可以响应鼠标悬停
参数	固定几项	由 Shader 作者定义的控件（滑块、颜色等）
来源	Figma 内置	Figma 官方出品、社区发布、组织内部发布，或者自己用 agent 做

两种类型的分工记住一句话就够：填充不依赖下面有什么，效果依赖图层本身长什么样。同一个“噪点”需求，想要一块独立的噪点背景用填充；想给已有照片加颗粒感用效果。

普通效果的基础用法可以先看本站的 Figma 效果（Effects）指南 和 填充与颜色指南。

谁能用、需要什么环境

根据帮助中心“Find and use shaders”页面：

项目	要求
方案	Starter（免费版）、Professional、Education、Organization、Enterprise
权限	需要文件编辑权限
渲染	系统和浏览器需支持 WebGPU，且不能处于兼容模式
用 agent 创建 / 修改	不对 K-12（中小学）教育用户开放

也就是说免费版也能用现成的 Shader；但自己用 agent 生成需要消耗 AI 积分，免费版积分很有限，具体额度见 Figma AI 积分（AI credits）额度与消耗。

第一步：找到现成的 Shader

不想自己写提示词的话，先从现成的开始。Figma 团队已经做了几十个 Shader（比如像素拉伸图片、给图层加金属质感），官方出品的免费使用。

1. 打开任意一个 Figma Design 文件。
2. 点左侧导航栏的 Tools 标签。
3. 打开 Source（来源） 下拉，选 From Figma 只看官方出品；也可以不筛选，连社区和组织内部的一起看。
4. 点搜索框旁的 筛选 图标，勾选 Shader fill 或 Shader effect。

另外，在 Figma Community 的 Extensibility 标签下也能浏览别人发布的 Shader。社区资源的整体用法可以参考本站的 Figma 社区使用指南。

第二步：给图层加着色器填充

着色器填充会替换图层的常规填充，适合做独立背景、图案、网格渐变、噪声纹理。

加到填充上：

1. 选中图层（矩形、Frame、文字都可以）。
2. 右侧栏 Design 标签里找到 Fill。
3. 点已有填充的色块编辑它，或者点 + 新增一层填充。
4. 在弹出的面板顶部点 Shader fill 图标。
5. 在 Shader fills 面板里选一个现成的，或者新建一个。

加到描边上： 在 Stroke 区域点 + 添加描边，弹出面板里同样点 Shader fill 图标即可。用它做流光边框、渐变描边按钮很方便。

几个实用点：

• 一个图层可以叠多层着色器填充，也能和纯色、渐变、图片填充混合，顺序决定上下关系。
• 想换成另一个 Shader：点该填充的色块，在下拉里换；或者点 Add shader 让 agent 新做一个。
• 填充组合可以存成样式（Style），发布到团队库，详见下文“复用”。

小练习： 画一个 1440×800 的 Frame 做落地页首屏背景，加一层官方的渐变类着色器填充，再在上面叠一层 20% 透明度的纯黑填充压暗，标题文字的对比度会更稳。

第三步：给图层加着色器效果

着色器效果读取图层当前的像素作为输入，在上面做色彩偏移、扭曲、颗粒、半调网点、模糊等处理。部分效果还是交互式的，会根据鼠标位置变化。

1. 选中图层，比如一张产品图。
2. 右侧栏 Effects 区域点 +（Add effect）。
3. 在下拉里选 Shader effect 图标。
4. 在 Shader effect 面板里选一个现成效果，或者新建。

效果同样可以和投影、模糊等其他效果叠加，堆叠顺序会影响结果。

“Clip to shape” 是什么

纹理、噪点类效果会多一个 Clip to shape（裁切到形状） 选项：开启后纹理只在图层边界内；关闭后纹理会溢出到边缘外。注意裁切对投影不生效——同一图层有投影时，阴影边缘仍会带上纹理。如果你希望噪点一直延伸到投影边缘，帮助中心给的办法是在效果堆栈里，把一个图层模糊（Layer blur）或未裁切的纹理放在噪点效果和投影之间。

第四步：用 Figma agent 自己做一个 Shader

现成的不够用时，可以直接让 agent 写一个。不需要懂代码，描述清楚想要的样子即可。

1. 在设计文件里点导航栏的 Agents，开一个新对话。
2. 输入框里明确写 “Build me a shader”（一定要明确说是“做一个 shader”），再描述效果。
3. 等待生成——agent 写的是完整代码，需要一点时间。
4. 把生成的 Shader 挂到几种不同图层上测试，再继续对话迭代。

提示词怎么写

帮助中心总结的经验很实用，归纳成四条：

• 明确说要做 shader。只说“给我做个网格渐变”，可能得到一张普通图片填充，没有可调控件。
• 描述你想看到的画面，不用术语。“一团从中心向边缘淡出的柔和粉色光晕”比“用径向渐变模糊”更好用。
• 点名要哪些控件。比如“我要能调光晕强度”“给模糊量加一个滑块，再加一个取色器”。
• 用现实参照物。“像 Risograph 印刷”“像 80 年代的 CRT 显示器”“像热浪扭曲”，一个具体参照往往胜过一段抽象形容。

官方给的公式是：“Build me a shader that” + 想要的画面或现实参照 + 出现在图层的什么位置 + 需要的控件。照这个思路，一个中文场景的示例：

Build me a shader fill：像青花瓷釉面一样的蓝白流动纹理，纹理缓慢流动。
需要的控件：主色、背景色、流动速度、纹理密度。
要求无缝平铺，放在大尺寸 Frame 上不出现接缝。

如果脑子里有画面但说不清，可以把参考图拖进 agent 对话，让它先“描述这张图里的视觉效果，方便我写成 shader 提示词”，再基于它的描述修改。

迭代时的注意事项

• 已经知道要改好几处时，合并成一条消息发，省时间也省积分。
• 先复制一份设计稿再测试，避免把正式稿弄乱。
• 连续几轮都没接近目标，就带着这几轮的经验，用更具体的描述重开一个对话。
• 想看原理或排查问题，可以查看 Shader 背后的代码。

第五步：播放动画，并在 Motion 里打关键帧

播放动画或交互式 Shader

动画或交互式的 Shader 默认不会一直跑。选中图层，点图层右上角上方的 Play（播放） 按钮才会运行。同一页面同一时间只能运行一个动画或交互式 Shader，如果你发现另一个停了，这是正常的。

用 Figma Motion 控制节奏

Shader 的单个参数可以在 Figma Motion 里打关键帧，精确控制动画时间：

1. 把工具栏切换到 Motion。
2. 右侧栏选中要做动画的 Shader。
3. 把时间轴播放头移到起点，点对应参数旁的 Add keyframe 添加初始关键帧。
4. 移动播放头，修改参数值，自动生成新关键帧；重复直到完成。

Motion 会补齐关键帧之间的过渡，可以直接在画布上预览，并导出为 .mp4、.webp、.gif。Motion 的完整用法见本站的 Figma Motion 物理动效与高级动画实战；Shader 也可以和 Figma 3D 变换 一起使用（3D 变换会把 Shader 填充一起渲染）。

复用与交付：样式、团队库、代码图层

存成样式发布到团队库

任意着色器填充或效果——包括多个叠在一起的组合——都可以存成样式，发布到团队库，团队成员就能像用颜色样式一样一键套用。操作和普通样式一样，参考 创建样式 与 管理和共享样式。

Shader 作者发布更新后，用到它的图层会在控制面板里出现 Update to latest version 图标，点一下即可同步。

分享自己做的 Shader

除了样式，还可以把 Shader 发布到 Figma Community，或者在组织内部私有发布。目前 Shader 不能收费。

带进代码图层和 Make

代码图层是画布上由真实代码驱动的可交互原型。因为 Shader 本身也是代码，把设计转成代码图层时会被保留。按 11 月 2 日的 Release Notes，在代码图层右上角设为 Play 才能正确渲染，当时仅支持 Chrome 157 浏览器端。另外可以通过 Figma MCP 把 Shader 导出到 Figma Make，但导出的实例暂时不会再和原 Shader 保持关联。MCP 配置可参考 Figma MCP 指南。

常见问题

用 Shader 要消耗 AI 积分吗？

使用、应用、在画布上播放 Shader 都不消耗；用 Figma agent 创建或修改 Shader 会消耗 AI 积分。

为什么 Shader 显示不出来或提示不支持？

Figma 用 WebGPU 渲染 Shader。先确认浏览器和系统满足 WebGPU 最低要求，且 WebGPU 没有处于兼容模式；老显卡、虚拟机、远程桌面环境更容易遇到这个问题。也可以换用最新版 Chrome 或桌面客户端再试。

为什么我的动画 Shader 不动？

需要选中图层点 Play；同一页面只能有一个动画或交互式 Shader 在运行。

免费版能用吗？

可以使用 Shader，帮助中心列出的方案包括 Starter。用 agent 自制则受 AI 积分额度限制。

导出图片会不会糊？

11 月 2 日起 Shader 支持最高 4096px 渲染与导出。导出设置可参考 Figma 导出与切图指南。

更多 Figma 新功能的中文摘要见本站 Figma 更新日志，术语不熟可以查 Figma 术语表，常用插件和素材见 资源导航。

参考来源

• Figma Release Notes：Export shaders at higher resolutions and bring them into code layers（2026-11-02） (opens new window)
• Figma 帮助中心：Find and use shaders (opens new window)
• Figma 帮助中心：Create shaders with the Figma agent (opens new window)
• Figma 帮助中心：AI workflows collection: Build your own shaders and effects (opens new window)