Figma 噪点颗粒感教程：用自带 Noise 与 Texture 效果，再看 7 款噪点插件

给海报背景、卡片或渐变加一层颗粒感，现在在 Figma 里大多数情况不用装插件：Figma 自带了 Noise（噪点）和 Texture（纹理）两种效果，还能存成效果样式复用。自带效果调不出的木纹、半调、像素化这类特殊纹理，再交给插件。

这篇按「自带能力 → 新的 Shader → 插件」的顺序讲清楚，每一步都标了官方出处。

一、自带 Noise 效果：给任何图层加颗粒

据 Figma 官方帮助《Apply effects to layers》，Noise 效果会在图层上加随机像素，做出类似胶片的颗粒质感，任何类型的图层都能加。

操作步骤：

1. 选中图层。
2. 在右侧 Effects 区域点加号，新增一个效果。
3. 在下拉菜单里选 Noise。
4. 打开效果设置调参数：
   • Number of colors：Mono（单色）、Duo（双色）、Multi（多色）三选一；
   • Noise size：噪点颗粒在 X、Y 方向的大小；
   • Density：噪点的密集程度；
   • Color（Mono 和 Duo 才有）：噪点颜色和不透明度；
   • Opacity（Multi 才有）：噪点不透明度。

要注意的边界：同一个对象最多只能加两个 Noise 效果。

实用建议：做「渐变 + 细颗粒」背景时，先用 Mono 单色、调低 Density，从很淡的颗粒开始加，比一上来就重颗粒更耐看。

二、自带 Texture 效果：把边缘做旧、做粗糙

Texture 和 Noise 不是一回事。官方说明里，Texture 是把对象边缘做出粗糙、磨损感。同一个对象只能加一个 Texture。

步骤同样是选中图层 → Effects 点加号 → 选 Texture，可调参数：

• Size：纹理在 X、Y 方向的尺寸；
• Radius：效果超出图层边界扩散多远；
• Clip to shape：勾上后纹理只留在图层边界内；不过同图层的投影仍会和纹理相互作用，形成带纹理的阴影。

适合：手绘感按钮、做旧标签、贴纸风插画的描边。

三、噪点「出不去边」怎么办：效果的叠放顺序

很多人遇到过：加了投影，噪点却只铺在形状里面，没盖到阴影上。官方给了原因和办法：

• 图层上效果的渲染顺序从上到下大致是：图层模糊、Noise、Texture（按你排列的顺序）→ 描边 → 内阴影 → 填充 → 投影。
• Noise 和勾选了 Clip to shape 的 Texture，默认不会超出图层边界。
• 想让噪点盖到投影边缘，可以在 Effects 列表里，在 Noise 和投影之间放一个图层模糊（Layer blur）或不裁切的 Texture。

另外一个坑：图层上一旦有图层模糊或不裁切的 Texture，填充和描边上的混合模式就只会和本图层自己的内容混合。想让混合模式影响画布上的其他内容，要把混合模式设在右侧 Appearance 区域的图层本身上。

四、存成样式，整套设计统一颗粒感

据官方帮助《Create and edit styles》，效果样式（Effects）支持投影、内阴影、图层模糊、背景模糊、Texture、Noise 和 Shader 效果。也就是说调好一组噪点参数后，可以存成效果样式，发布到团队库，整套页面用同一种颗粒，改一处全改。

这是插件做不到的地方：下面提到的不少插件是把纹理生成成图片或额外图层，后期统一改参数就麻烦得多。

五、Shader：更复杂的颗粒、半调和动态纹理（公测中）

Figma 还在公测 Shader 功能。据官方帮助《Find and use shaders》：

• Shader fill（着色器填充）替换图层原有填充，可生成图案、渐变网格、噪点纹理、程序化背景，可以是静态也可以是动画；
• Shader effect（着色器效果）在图层现有外观上加处理，比如颜色偏移、扭曲、颗粒、半调、模糊。
• 找现成的：在设计文件左侧导航的 Tools 标签里搜索，用 Filter by price and type 筛 Shader effect 或 Shader fill；Source 下拉选 From Figma 可以看 Figma 官方做好的 Shader。
• 使用和播放 Shader 不消耗 AI 额度；用 Figma agent 新建或修改 Shader 才消耗 Figma AI 额度。
• Shader 用 WebGPU 渲染，对系统和浏览器有最低要求；公测期间功能可能变化，也可能有性能问题。

如果你只是要一层细颗粒，第一节的 Noise 就够了；要半调网点、扭曲、动态颗粒，再考虑 Shader。

六、自带效果不够时，再看这些插件

觅件插件库的「🌫 噪点纹理」分类目前收录 7 款插件，其中库内标为免费的 6 款、付费 1 款。（数据来自觅件插件库，统计于 2026 年 10 月）

以下按用途分组，说明来自插件作者的介绍；是否收费、具体功能以安装时提示为准。

需要更多纹理种类（木纹、大理石、半调、像素化）

• Noise & Texture丨噪点和纹理（作者 Rogie King）：生成可无缝平铺的噪点、纹理、图案和渐变，支持 Halftone、Dither、Pixelate、CMYK 半调等效果，还有木纹、大理石、纸张、Glitch 等纹理，改参数时实时更新选中图层。适合自带效果调不出的「材质感」。

只想快速出一层透明噪点

• Simple Noise丨噪点（作者 Nitish Khagwal）：调密度、尺寸，方形或圆形颗粒，可反相，生成透明背景的噪点叠在设计上。
• Shumi noise丨纹理（作者 Egor Borschevsky）：可调噪点颜色、数量、透明度、缩放和混合模式，参数改动自动应用到选中对象，支持小于 1 像素的超细颗粒。
• SVG Noise丨SVG噪点：生成自定义 SVG 噪点图案，SVG 格式方便后续缩放。

想要暗角、拉丝、云雾等变化

• Noise丨噪点（作者 Dustin Mierau）：作者介绍里提到可以用噪点减轻渐变色带，支持暗角、拉伸出刷纹、平滑出云雾和磨损效果，噪点会作为图片填充加到选中对象上。觅件库里标为付费插件。

做生成式图案，而不是颗粒

• Noise Grid Generator丨噪声网格生成器（作者 G3N0M4）：用任意元素或组件按噪声做随机位移、旋转的网格，适合抽象图案和生成式排版。
• Looper丨纹理（作者 Kuldar）：把矢量、形状或文字连续复制，逐次改变位置、旋转、缩放、透明度和颜色，做重复和迷幻图形；作者说明项目在 GitHub 开源。

七、怎么选：一张速查

需求 先用 渐变、卡片加细颗粒 自带 Noise 边缘粗糙、做旧感 自带 Texture 全站统一颗粒 Noise / Texture 存成效果样式 半调、扭曲、动态颗粒 Shader（公测）或 Noise & Texture 插件 木纹、大理石、纸张材质 Noise & Texture 插件 随机网格、重复图形 Noise Grid Generator、Looper

做不到和要注意的

• 自带 Noise 每个对象最多两个、Texture 每个对象只能一个。
• 据 Figma 插件 API 文档，接口中的 Noise 与 Texture 效果仍标注为 beta，暂不支持绑定变量，参数没法跟着变量模式切换。
• Shader 处于公测，需要 WebGPU，旧电脑或浏览器可能用不了。
• 插件生成的纹理多半是图片或额外图层，改尺寸后可能要重新生成；插件功能和收费随版本变化，以安装时提示为准。

想按中文场景找更多 Figma 插件，可以在觅件里直接用中文搜「噪点」「纹理」「渐变」。