Figma added shaders, and the demos are exactly what you'd expect: mesmerizing animated gradients, liquid color, textured light. It looks incredible in a clip, and that's precisely why it's worth slowing down and asking the practical question, which is not "what can shaders do" but "where do shaders actually improve a product, and where do they just look cool and cost you." This piece explains what shaders are in plain terms, shows the genuinely good uses and the tempting bad ones, and covers the performance and handoff costs the demos never mention. Because shaders are a recent addition to Figma, the specifics may keep evolving, but the judgment here holds regardless.
What shaders actually are
Figma added shaders, and the demos are exactly what you'd expect: mesmerizing animated gradients, liquid color, textured light.
A shader is a small program that runs to compute the appearance of pixels, which lets you create effects, gradients, textures, distortions, and animated color, that go far beyond a normal flat fill or a simple linear gradient. Where a standard fill is one color and a standard gradient blends between a few, a shader can generate rich, complex, sometimes animated visual surfaces procedurally.
In Figma terms, that shows up as shader fills and shader effects, GPU-powered and rendered in real time using WebGPU, which you generate by prompting the Figma agent with a plain-text description or a reference image, then adjust with on-canvas controls, save, reuse, and export to other platforms via MCP. The important mental shift is that a shader is generative and computational rather than a static image, which is both its power (rich, resolution-independent, animatable) and the root of its costs (it runs, and running has a price).
Where shaders earn their place
There's a real set of uses where shaders add genuine value rather than decoration.
Rich backgrounds on brand and marketing surfaces. A subtle animated gradient or a textured light effect behind a hero can add atmosphere and depth that a flat color can't, and on a marketing page or a brand moment, where making an impression is the point, that's legitimate craft. This is the same territory where premium products invest in surface quality, the kind of detail covered in how Stripe, Linear, and Vercel ship premium UI.
Texture and noise that fix flatness. A touch of shader-generated noise or grain can warm up an interface that feels sterile and digital, and can reduce the banding you sometimes see in large flat gradients. Used subtly, this is a quality touch, not a gimmick.
Expressive surfaces where the aesthetic is the product. For products whose whole identity is visual or playful, richer generated surfaces can be part of the brand rather than a distraction. The judgment call is whether the aesthetic serves the product's purpose or fights it, which is at the center of the broader Liquid Glass versus Material Expressive debate about how expressive an interface should be.
The pattern in the good uses: shaders live on presentational and brand surfaces, they're used with restraint, and they serve atmosphere or quality rather than demanding attention.
Where shaders go wrong
The bad uses are more common and more tempting, because they demo well.
Shaders in functional UI. Putting rich, animated, or textured surfaces behind the screens users work in daily, dashboards, forms, tools, competes with content, adds noise, and makes a working interface harder to read. Functional UI wants calm and clarity; a busy generated surface fights both.
Overuse for spectacle. Because shaders are impressive, the temptation is to use them everywhere, which produces a heavy, exhausting interface that looks like a tech demo rather than a product. Capability used because it exists, not because it's needed, is the definition of a gimmick.
Legibility damage. A rich or animated surface behind text almost always hurts readability, and the more elaborate the shader, the worse it gets. Any shader near content has to be checked against actual text legibility, which is the same discipline that makes dark mode harder than it looks: the visible flourish can quietly wreck the thing that matters, which is reading.
The costs the demos skip
Two practical costs sit under the aesthetic question, and both matter for anything that ships.
Performance. Shaders run to compute their appearance, and complex or animated shaders can be expensive, which can make a page feel sluggish on lower-powered devices and drain battery on phones. Something smooth on a designer's fast laptop can stutter on a mid-range phone, where much of the real audience is. This is the single biggest reason to use shaders sparingly: the cost lands hardest on the users least able to absorb it.
Handoff. Figma shaders can be exported to other platforms via MCP, but a shader still has to be implemented and performance-tuned to ship, and reproducing a rich generated surface faithfully, especially an animated one, is a real engineering task, not a quick style. A designer casually adding shaders is quietly adding to the build cost, the same gap between what a design tool shows and what production requires that runs through all of design-to-code work.
The verdict, and how to use them
Use shaders like a strong accent: sparingly, on presentational surfaces, in service of atmosphere or quality, and almost never behind the content users are trying to read or in the functional interfaces they work in daily. On a hero, a brand moment, or as subtle texture that warms a flat surface, a shader can be genuine craft. Everywhere else, it's a cost dressed as flair.
The tool being available is not a reason to use it. The best use of shaders is restrained and purposeful, and the fastest way to misuse them is to be impressed by the demos and reach for them everywhere.
When to just export a static image instead
A useful gut check before reaching for a shader: does this need to be generated live, or would a static exported image do the same job for less cost? A fixed, non-animated gradient or texture can often be exported once as an optimized image and used as a normal fill, which renders far cheaper than a live shader and hands off trivially. Reserve actual shaders for cases where you genuinely need what only a live shader gives, animation, resolution independence, or a surface that responds to something, and use a plain exported image for anything static. Many tempting shader uses are really just static backgrounds that don't need the computation, and choosing the image saves performance and handoff pain for no visible loss.
Start Monday
If you want to try shaders, pick one presentational surface, a marketing hero is the safest, and add one subtle effect, then do two checks the demos skip: view it on an actual mid-range phone to feel the performance cost, and confirm any nearby text is still perfectly legible. Those two checks will tell you more about whether a shader belongs than any amount of admiring it on your laptop, and they build the instinct for where shaders help versus where they hurt.
Shaders are a powerful new surface with a narrow set of genuinely good uses and a wide set of tempting bad ones. Use them where impression matters, keep them away from content and functional UI, and always weigh the performance and handoff costs the demos leave out. Restraint is the whole skill.