Figma Shaders.

Shaders are GPU-rendered visual effects you apply to a layer in Figma Design — the headline material announcement from Config 2026. They produce things that flat fills and blurs never could: dithering, halftones, frosted glass, liquid metal, fractal noise, moiré patterns, grain, and animated gradients — all rendered live on the canvas.

The twist is that you don't write the shader. You describe the effect to the Figma agent(or hand it a reference image) and it generates a parameterized shader for you, with controls that surface right on the canvas. Shaders Figma and the community have already built are free to apply on any paid plan; using the agent to author your own is the part that's rolling out in beta.

Everything in the shaders feature is one of two things, and the distinction decides where it lives in the UI and what it can do. A shader fillgenerates pixels from scratch — it's a new material with no input. A shader effect is a post-effect that samples the pixels already in the layer and transforms them.

Rule of thumb: if the layer underneath should still be visible and reworked, reach for an effect; if you want to paint something entirely new into the shape, reach for a fill.

You need edit access to the file. Both kinds start from the right-hand Design panel, just in different sections.

For a shader fill: select the layer, find the Fill section, click the colour chip (or Add fill), then click the Shader fill icon. Pick an existing shader or create a new one in the panel that opens. The same flow works on Add stroke.

For a shader effect: select the layer, find the Effects section, click Add effect, and choose the Shader effect icon from the dropdown.

No shader programming required. Open a Figma Design file, click Agents in the navigation bar to start a chat, and describe the effect — naming the controls you want up front so they land as adjustable parameters:

Building a shader is iterative — you almost never get it in one prompt. Start high-level to establish the look, then refine the details and controls turn by turn. Figma's creative technologist Anna Zhang described the workflow as "a back-and-forth dialogue between me and the agent… like a negotiation." A reference image works as a starting point too — hand the agent a picture of the effect you're after.

Once you're happy, any shader fill or effect can be turned into a style and published to your team library so the rest of the team can reuse it.

Because the agent builds them, shaders are parameterized by default. Every parameter you named — hue offset, band frequency, blend amount — becomes an on-canvas control you can drag and tune directly, no panel diving required.

Shaders are also stackable. Shader fills layer with solid, gradient, and image fills in the Fill section; shader effects combine with each other and with Figma's native effects in the Effects section. Stack a fractal-noise fill under a halftone effect and you get a compound material out of two simple shaders.

Shader parameters are keyframeable on the motion timeline — the other big Config 2026 addition. Keyframe a fill's angle or a sheen's intensity and the material animates alongside everything else in your composition, so a holographic gradient can sweep or a noise field can drift over time.

Shaders run on WebGPU. Figma began migrating its rendering backend from WebGL to WebGPU in 2023 and writes its internal shaders in WGSL (WebGPU Shading Language), a Rust-inspired language built for the standard. When you prompt the agent, what it generates is a parameterized WGSL program — the on-canvas controls are just inputs into that program.

That GPU dependency comes with one practical catch worth knowing before you share a file.

• Applying existing shaders— Figma's, a teammate's, or Community ones — is free to use across paid plans, with can edit access to the file.
• Building shaders with the agent is in open beta from 2026-06-24 for Full seats on Professional, Organization, and Enterprise plans. It is not available on Education, Government, or Starter.
• AI credits: during the beta, building shaders with the agent does not consume AI credits. Once the agent is generally available, standard AI credit usage applies.