Shader authoring has always had a steep floor: you either learn GLSL directly, or you use a node-based editor like Shadertoy’s forks or NodeToy to assemble one visually. At Config 2026 in June, Figma added a third path — describe the effect you want in plain language, or hand it a reference image, and its AI agent builds the shader for you.
What shipped
The feature, which entered open beta on June 24 for paid Full-seat users, splits into two kinds of layers: effects, which transform whatever’s already on the layer (dithering, pixelation, frosted glass, polished chrome, halftone, particle effects), and fills, which act as an entirely new material. Both run on WebGPU under the hood. Critically, the output isn’t a static result — because the Figma agent builds the shader with parameters exposed, designers get on-canvas controls to keep adjusting the effect after it’s generated, rather than re-prompting from scratch each time they want a variation.
Where this sits next to the existing tools
This doesn’t replace Shadertoy or NodeToy so much as it lowers the floor beneath them. Shadertoy remains the place serious shader work happens and gets shared as raw GLSL; NodeToy’s node-graph approach already made shader creation accessible without code. p5.js’s own p5.strands layer, which p5 2.x is extending toward WebGPU targets, is aimed at the same accessibility problem from the creative-coding side rather than the design-tool side. Figma’s version is the most removed from the underlying code of any of them — which is exactly the trade-off worth watching. It’s a fast way to get a usable effect, and a correspondingly easy way to never learn what a fragment shader is actually doing.
The credit question
For now, applying a generated shader doesn’t consume AI credits, and building one with the agent doesn’t either while the feature is in beta — that changes once it moves to general availability, when standard AI-credit usage kicks in. Worth trying now, in other words, while it’s still free to experiment.