Find and use shaders

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. Shaders can be static or animated, and can also include mouse hover interactivity. 

This article covers how to find shaders and apply them to your layers. 

Learn how to create your own shaders.

Find shaders

Find shaders to use from Figma design files you have edit access to.

1. Open a Figma design file.
2. Navigate to the Tools tab in the navigation bar on the left. Use the search bars and filters to narrow your search.
   • Narrow your search by clicking Filter by price and type and selecting Shader effect or Shader fill
   • Narrow your search by using the Source filter

You can also browse shaders in the Figma Community under the Extensibility tab. 

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—static or animated—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 also stack multiple shader fills on top of one another in the Fill and Stroke sections, 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. Some shaders are also interactive, creating effects based on where your mouse is.

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 effects. 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.

Run an animated or interactive shader

If the shader fill or effect is animated or has interactive capabilities, select the layer and click [icon play] Play above the top-right corner of the layer to run it. Only one animated or interactive shader can run on a page at a time.

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.

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.

Learn about how to use a specific shader built by Figma.

FAQ

Do shaders cost AI credits?

It does not cost AI credits to use shaders, apply them to designs, or run animated or interactive ones on the canvas. Only if you are prompting the Figma agent to building and editing shaders will you be charged AI credits.

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.

Can I use shaders with other Figma products and features?

Yes! You can use shaders with:

• Motion: Shader fills and effects can be keyframed directly in the motion timeline, making it possible to animate your fills and effects with precise timing and placement. You can also use motion to export the animation to .mp4, .webp, and .gif files. Learn more about motion in Figma.
• Figma Draw: Use the Figma agent to generate procedural shapes, patterns, or layout structures directly into your illustrations. You can build a plugin that tiles a custom botanical motif across a frame, or one that generates a stipple-dot pattern from a selected path. Or build a shader fill to wrap a noise texture or gradient mesh around your artwork. Learn more about Figma Draw.
• Figma Make: Export shaders to Make via MCP to bring your visual effects directly into a live, coded prototype. Note that exported instances won't stay connected to the original shader yet. Learn more about Figma Make.
• Design systems: Any shader fill or effect can be saved as a style and published to your team library. Shaders can also be stacked and combined. Learn how to create styles and publish styles to the team library.