Use shaders in designs

Shaders are visual effects you can apply to layers in a Figma Design file, either as fills that generate patterns, gradients, and textures, or as effects that modify how an existing layer looks. This article covers how to find shaders and apply them to your layers. 

To learn how to build your own, see the quick start guide to generative plugins and shaders.

Shader fill

A shader fill replaces a layer's standard fill with a custom visual effect that’s generated by the Figma agent. Use shader fills for standalone visuals like patterns, gradient meshes, noise textures, and procedural backgrounds.

Apply a shader fill

Shader fills can be applied to fill and stroke properties from the Design panel in the right sidebar.

You can stack multiple shader fills on top of one another in the Fill section, and combine them with solid, gradient, or image fills. Any combination of fills can be saved as a style and published to your team library.

To a fill property

1. Select the layer you want to apply a shader fill to.
2. From the Design tab in the right sidebar, find the Fill section.
3. Click the color chit to edit the existing fill, or click Add fill to add a new one.
4. Click the Shader fill icon.
5. The Shader fills panel will appear, where you can select an existing shader fill or create a new one.

To a stroke property

1. Select the layer you want to apply a shader fill to.
2. From the Design tab in the right sidebar, find the Fill section and click Add stroke.
3. Click the Shader fill icon in the pop-up panel.
4. The Shader fills panel will appear, where you can select an existing shader fill or create a new one.

Edit a layer’s shader fill

1. Select the layer.
2. From the right sidebar, go to the section for the property you want to edit and click on the shader fill’s chit.
3. Use the dropdown to choose a different shader, or click Add shader to create a new one with agent. Learn more about building plugins with the Figma agent.

Shader effect

A shader effect modifies how an existing layer renders — applying treatments like color shifts, distortions, grain, halftones, or blurs on top of the layer's existing appearance. Unlike shader fills, shader effects reference the layer's current pixels as input, so the result changes depending on what the layer looks like.

Multiple shader effects can be stacked in the Effects section and combined with other effect types. Any combination of effects can be saved as a style and published to your team library.

Apply a shader effect

1. Select the layer you want to apply a shader effect to.
2. From the Design tab in the right sidebar, find the Effects section and click Add effect.
3. From the dropdown, select the Shader effect icon.
4. The Shader effect panel will appear, where you can select an existing shader effect or create a new one.

Edit a layer’s shader effect

1. Select the layer.
2. From the right sidebar, go to the section for the property you want to edit and click on the chit.
3. Click the Shader effect or Shader fill icon.
4. Use the dropdown to choose a different shader, or click Create shader with agents. Learn more about building shaders with the Figma agent.

Receive updates on a shader

If there is an update on a shader that’s being used on a layer, you’ll see an Update to latest version icon in the shader’s control panel.

Want to see how shaders work across Motion, Figma Draw, and your design system? See the quick start guide to generative plugins and shaders.

Use shaders built by Figma

Figma provides a library of ready-to-use shader fills and effects you can apply to your designs. 

To browse and use them: 

1. From a Figma Design file, click the Tools tab in the navigation bar. 
2. Open the Source dropdown and select From Figma. 
3. Click the Filter icon next to the search bar to narrow results to Shader fill or Shader effect.

FAQ

What is clip to shape?

The Clip to shape option is available on texture and noise effects. Enabling clip to shape will contain the texture effect within the layer’s boundary. Disabling it will allow the texture to bleed outside the edges of the layer.

Clipping applies do not apply to drop shadows. If you have a drop shadow on the same layer, it will still interact with the clipped texture and produce a textured shadow at the edge.