My shaders file deep dive | Show Your Work
Summary
Figma shaders—GPU-powered effects added in June—transform basic designs into visually differentiated work by layering multiple shaders and animating their properties. Designers can stack up to 4 shaders, keyframe shader parameters for motion effects, and use AI to generate custom shaders without coding.
Key Takeaways
- Wrap content in a frame before applying blur if you want the blur to process before shaders execute—this creates soft edge regions that allow shaders to generate richer colors and shapes in fringe areas.
- Stack multiple shaders (2-4) to achieve complex visual effects: use one for style (risograph), one for distortion (lens distortion), one for blur (bokeh), and one for color adjustment—each serves a distinct compositional purpose.
- Keyframe shader properties like lens distortion center point coordinates to create motion effects—animate the x/y coordinates over time to make designs oscillate or shift without manually repositioning underlying content.
- Use Figma's AI agent (Claude) to generate custom shaders with specific controls—specify parameters like strength, frequency, and direction, then copy and paste the shader across your file or share with team via Figma Community.
- Apply shaders selectively to specific elements (just text, just a frame) rather than entire designs—this lets you control where effects appear and animate shader strength via keyframes at specific animation points.
Related topics
Transcript Excerpt
In this video, I'll show you how I stack and animate shaders on top of designs like this, this, this, and this. This is Show Your Work, the series where designers nerd out in the file and show you how they're using Figma. Shaders were added to Figma recently, at the same time that we introduced Figma Motion back in June. They use your GPU to apply really wild effects to your designs and can be used for both static design and motion design. One pattern I find myself reaching for over and over again is to start a design with a simple piece of typography and then layer shaders on top to create something interesting and differentiated. In this design, we have just [music] one shader and it's doing all the heavy lifting to turn this basic crossfading letters animation into something interesting…