Figma's AI agent now generates WebGPU shaders natively inside the design tool, splitting into two distinct systems: shader effects and shader fills.
Shader effects behave like Figma's built-in effect layer but are fully custom-built, covering things like lens distortion, particle stretch, and color outlines. They stack, expose adjustable properties, and combine with native Figma effects. Shader fills replace static colors and gradients with generative visuals: watercolor, moiré, pattern grids. Both run on WebGPU, meaning real rendering logic, not filters or SVG tricks.
The full video is worth watching for how the agent actually constructs these shaders and what the property controls look like in practice. The line between design tool and creative coding environment is getting thin fast.
[WATCH ON YOUTUBE →]