Create shaders with the Figma agent

Extend what's possible in your design files by building shaders through prompting the Figma agent. No need to understand code or technical terminology—you explain it, the Figma agent will build it.

What are shaders?

If you've ever added a blur, blend mode, gradient overlay, or glassy distortion effect in Figma, shader technology is what make those effects possible. Learn more about effects in Figma Design.

Shaders give you precise control of how a layer is rendered, allowing you to produce complex visual effects—like distortions or realistic animated fire—efficiently and at scale. This makes them a popular tool across industries, ranging from web design and augmented reality to game development and architectural visualization.

Types of shaders in Figma

There are two types of shaders that the Figma agent can help you build: Shader fills and shader effects.

Make your own shader

Step 1: Prompt the agent

To build your own shader using the Figma agent:

1. Open a Figma Design file.
2. Click Agents in the navigation bar to open the Figma agent and start a new chat.
3. In the prompt box, type Build me a shader and describe what you want the shader to do. If you’re not sure where to start, try out one of the prompts below to start!
4. Test your shader, and iterate with the agent as needed.

Try these prompts

Topographic contours: Build me a shader fill made of topographic contour lines, like the elevation rings on a hiking map. I want controls for line spacing, line thickness, and how rugged or smooth the terrain looks, plus separate line and background colors. Keep the pattern seamless so it tiles cleanly across large frames.

Holographic foil: Create a holographic foil shader effect with a liquid chrome style. Colors should flow along the edges and contours of the layer using luminance gradients, not a flat directional sweep. Controls: hue offset, color range, angle (rotates the gradient direction), band frequency, sheen intensity, saturation, and blend amount.

Basic tips for prompting

Whether you are a seasoned builder or you're writing your very first prompt, getting a great shader usually comes down to describing what you want to the Figma agent and iterating as you go.

• Be explicit that you want to "build a shader." If you tell the agent to “make you a mesh gradient,” you might end up with a standard image fill without the controls to customize it.
• Describe what you want to see. You don't need to know how shaders work or any technical terminology—just describe what you want to see. "A soft pink glow that fades toward the edges" typically works better than "use a radial gradient blur."
• Name the controls you want. If you know you'll want to adjust a specific property, specify that to the agent. For example, "I want to be able to customize the intensity of the glow" or "include a slider for blur amount and a color picker."
• Use real-world references. "Like a risograph print," "like a CRT monitor," "like heat haze" is more concrete to the agent than abstract adjectives. One strong reference often beats a paragraph-long description.

Get even more prompting tips.

Step 2: Apply and test your shader

Shader fills can be applied to Fill and Stroke properties. Shader effects can be applied from the Effects section of the right sidebar. Learn how to apply shaders to your designs.

Test your shader on a variety of layers to confirm it works the way you expect. If you’re working with an animated or interactive shader, 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.

Tip: View the code behind your shader to see how it works, or use it to troubleshoot issues or changes you’re trying to make. Learn how to view the code for your shader.

Step 3: Iterate

The path to building something is iterative and almost always requires refinement. You don’t have to get it right in one prompt. A brief, high-level prompt that explains the general effect that you want is an effective way to begin. After that, you can move into refining the details and controls.

A few iterating tips:

• If you already know there are multiple changes you want to make, consider bundling them in one message to save time.
• Make sure to test as you go. Test the tool on a variety of inputs early and often. Make sure to use a duplicate of the design to test your shaders on.
• When to start fresh: If after a few prompts you’re not getting closer to what you envisioned, you can take your learnings and start fresh with more specificity.

Share your shader

If you’d like to share your shader with others, there are a few ways to do this:

• Any shader fill and shader effect can be turned into a style and published to team libraries. Shaders can also be stacked on top of another and turned into a style.
• Publish the shader to the Figma Community for others to discover and use
• Publish the internal shader to share it privately to your organization

Before you share your shader, make sure to thoroughly test it and ensure that it works properly in a variety of environments and situations.

Extend to other Figma surfaces

Shaders are not limited to just UI frames that you’re working on—you can also extend them to other surfaces in Figma, such as:

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. For example, 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.

Continue your learning journey

Playground file

Want more hands on practice with shaders? Grab a copy of the Config 2026 playground file and check out the Generative plugins and shaders page:

Help center articles

For more information on shaders, check out:

• Find and use shaders in designs
• Manage shaders as a creator
• Prompting tips for generative plugins and shaders
• AI collection: Build your own shaders fills and effects

FAQ

Do shaders cost AI credits?

Only when you are building and editing them using the Figma agent will you be charged AI credits. It does not cost AI credits to run shaders.

How do I export shaders using the MCP?

To learn more about how to export shaders via the Figma MCP, check out the Tools and prompts article from Figma’s developer docs.

Can I monetize shaders?

It’s currently not possible to monetize shaders.