ByFigma shader fills let you turn any layer into a live, GPU-rendered material by describing it in plain text or handing Figma a reference image, instead of faking gradients and noise with stacked blend layers. Figma announced the feature at Config 2026, and it is rolling out in open beta now. This guide covers exactly how to create one, where it differs from a shader effect, which plans can use it, real use cases, and what still breaks in production work.
What Are Figma Shader Fills?
Figma shader fills are a new canvas material that renders a native WebGPU shader directly inside a layer, generated from a text description or a reference image rather than hand-written code. According to Figma’s own Config 2026 recap, the Figma agent writes the shader for you: you describe a look — “liquid chrome,” “grainy film noise,” “aurora gradient” — and the agent builds a working WebGPU program behind the scenes and attaches it to the layer as a fill.
The result behaves like any other fill. It sits in the Fill section of the right-hand panel, it can be reordered, duplicated, and swapped between layers, and it renders live on the canvas instead of as a flattened preview image. That matters for prototyping motion-heavy interfaces, textured backgrounds, or product shots where a static gradient or a stock texture always looked slightly fake next to real material.
Figma ships a library of first-party shaders alongside the agent-built ones, so you do not have to write a prompt every time you want a shader fill. Those presets cover common looks — noise, glass, chrome, fabric, liquid — and they are editable through the same drag controls as an agent-generated shader, so a non-technical teammate can still tune the result without touching a prompt box at all.
It helps to think of a Figma shader fill as a small, self-contained program rather than an image. A gradient fill stores a handful of color stops; a shader fill stores logic that calculates color, motion, and distortion on every frame, which is why it can animate, respond to parameters, and look different at every zoom level without pixelating.
How Do You Create a Shader Fill in Figma?
You create a Figma shader fill by selecting a layer, opening the Fill panel, choosing the shader option, and either picking a first-party preset or describing one to the Figma agent. The steps below cover the agent-generated path, which is the one most people mean when they talk about building a Figma shader fill from scratch.
- Select the shape, frame, or text layer you want to apply the shader to.
- Open the Fill section in the right-hand properties panel and click the “+” next to Fill.
- Choose the shader material option instead of solid, gradient, or image.
- Type a plain-language description of the look you want, or drop in a reference image for the agent to interpret.
- Wait for the agent to generate the WebGPU shader — this typically takes a few seconds and renders a live preview on the layer.
- Adjust the shader using the on-canvas drag controls (speed, scale, color, distortion) until it matches what you need.
- Stack an additional effect or a second shader layer on top if you need more depth, since shaders can layer on existing fills and effects.
- Rename the layer and the fill so teammates can find the Figma shader fill later without reopening the agent panel.
Every parameter the agent exposes shows up as a draggable handle directly on the canvas, not buried in a settings modal. That is the detail most coverage of Figma shader fills glosses over: you are not prompting once and accepting the output, you are prompting once and then art-directing the result by hand, the same way you would nudge a gradient’s angle or a blur’s radius.
If the first result is close but not right, re-prompting in place is usually faster than starting over. Describing the adjustment you want — “make it slower,” “cooler color temperature,” “less noise” — regenerates the shader fill with your existing parameters as a starting point instead of discarding your drag-control tweaks.
What’s the Difference Between a Shader Fill and a Shader Effect?
A Figma shader fill replaces what is inside a layer, acting as a new material in the same slot a solid color or gradient would occupy. A shader effect, by contrast, changes whatever is already inside the layer — it reads the existing pixels and transforms them, the way a blur or a noise effect already does in Figma today.
Practically, that means you reach for a shader fill when you are building a background, a texture, or a decorative surface from nothing. You reach for a shader effect when you want to distort or stylize content that already exists on the layer — a photo, a logo, or a block of text — without replacing it outright. Confusing the two is the most common first mistake people make when they start experimenting with Figma shader fills.
Both are described as part of the same shader system in Figma’s Config 2026 recap, and both are stackable: you can put a shader effect on top of a shader fill, or layer two shader fills in a single frame, since Figma treats each one as an independent, reorderable layer property rather than a baked-in image.
Which Figma Plans Can Use Shader Fills?
Figma’s first-party shader presets are available on every plan, including the free tier, but generating a brand-new shader with the agent from a text prompt requires a full seat on a paid plan. That split matters if your team is mostly on viewer or collaborator seats, because those seats can use existing shaders but cannot generate new ones from scratch.
| Capability | Free Plan | Paid Plan, Full Seat |
|---|---|---|
| Use first-party shader presets | Yes | Yes |
| Adjust shader parameters with drag controls | Yes | Yes |
| Generate a custom shader from a text prompt | No | Yes |
| Generate a shader from a reference image | No | Yes |
| Build a generative plugin with the agent | Limited | Yes |
| Interactive shaders (coming soon) | Not yet released | Not yet released |
Interactive shaders — ones that respond to cursor position or scroll — were announced alongside Figma shader fills but are listed as “coming soon” rather than shipped, so do not plan a production handoff around them yet. If a client or stakeholder asks for cursor-reactive shader fills specifically, set the expectation now rather than after the file is built.
How Do Generative Plugins Work Alongside Shader Fills?
Generative plugins are a separate Config 2026 feature that uses the same agent chat interface as shader fills: you describe a small tool — a color contrast checker, a random layout generator, a unit converter — and the agent builds a hosted plugin scoped to your current file, with no local setup and no Plugin API code required.
The connection to shader fills is workflow, not code. Both features move the same kind of task — something you used to need a developer or a plugin author for — into a conversation with the Figma agent. A designer building a textured hero section might generate the texture with a shader fill and then generate a small plugin that randomizes the shader’s seed value across a batch of frames, all without leaving the canvas.
Classic plugins built on the existing Plugin API are unaffected and continue to work exactly as before. Generative plugins are additive, and publishing one beyond your own file — to a team or an organization — is on Figma’s roadmap rather than available today, so treat anything you build as a personal or single-file tool for now.
What Are Good Real-World Uses for Figma Shader Fills?
Figma shader fills are strongest wherever a design previously leaned on a stock texture, a looping video background, or a hand-tuned gradient mesh to look alive. Marketing landing pages, app splash screens, and onboarding flows are the three cases coming up most often in early coverage of the feature.
- Hero backgrounds: replace a looping video or a large stock photo with a lightweight shader fill that still feels dynamic without the file-size cost of video.
- App splash and loading screens: a subtle animated shader fill communicates “still working” better than a static spinner, without extra animation handoff work.
- Brand exploration: generate several shader fill variations from the same prompt to compare material options quickly during a pitch, instead of commissioning separate texture renders.
- Empty states and placeholders: a shader fill fills visual space in a dashboard or empty list without implying real data, which flat illustrations sometimes do by accident.
None of these uses require the generative-plugin or interactive-shader pieces of Config 2026 — they work with the basic Figma shader fills workflow available today, which is part of why Figma shader fills are getting adopted faster than some of the other announcements from the same event.
How Do You Decide Between a Shader Fill and a Static Image Fill?
Choose a Figma shader fill when the surface needs to look alive, respond to tuning in real time, or get regenerated in several variations quickly, and choose a static image fill when the exact pixels need to stay fixed for approval, print, or brand compliance reasons. Figma shader fills are generative and parametric, so two people describing “ocean gradient” to the agent will get two different results, while an uploaded image fill is identical every time it is placed.
File weight is a smaller but real factor. A Figma shader fill stores a short program rather than pixel data, so a frame full of shader fills can stay lighter than the same frame built with several high-resolution background photos, which helps keep large files responsive as a project grows.
A reasonable default for teams just adopting Figma shader fills: use them for exploration, internal reviews, and any surface meant to feel dynamic, and convert to a flattened image fill only once a client or stakeholder has signed off on the exact look.
What Mistakes Do People Make With Figma Shader Fills?
The most common mistake is treating a shader fill like a finished asset the moment the agent generates it, instead of treating the first result as a starting point. Early coverage of Figma shader fills consistently notes that the drag controls exist precisely because the first generation rarely matches the brief exactly — skipping that tuning step is why some teams report shader fills looking “off-brand” compared to presets used elsewhere in the same file.
A second mistake is applying a shader fill to a layer that will later need pixel-perfect, static export for a style guide or a brand book. Because a shader fill is a live program and not a bitmap, its appearance can shift slightly between sessions or software updates while it is in beta. If a client needs an exact, locked reference image, flatten the shader fill to a PNG at the moment you approve it, and keep that flattened copy as the source of truth rather than the live shader layer.
The third mistake is skipping the plan check before promising a client or stakeholder that they can edit the shader themselves. Because custom generation is limited to full seats on paid plans, a viewer or free-plan collaborator who opens the file can see and nudge an existing shader fill’s parameters but cannot generate a new one from a prompt, which causes confusion if nobody flags the seat requirement up front.
Finally, teams sometimes stack too many shader fills in one frame purely because the tool makes it easy, not because the design calls for it. A single well-tuned shader fill usually reads better than three competing ones layered on top of each other, and it keeps the file lighter for everyone else working in it.
What Else Did Figma Announce at Config 2026 That Pairs With Shader Fills?
Figma shader fills shipped as one of several Config 2026 materials, alongside Figma Motion, a timeline-based animation tool that exports to CSS, JSON, React, and video formats, and code layers, which turn a design layer into interactive React code pulled from an existing repository.
The common thread across all three is the Figma agent doing the heavy lifting that used to require a specialist. If you have already used the agent inside Figma Weave for AI-assisted workflows or explored what the updated Figma agent can do with custom skills, shader fills will feel like the same conversational pattern applied to visual texture instead of logic or layout.
That pattern is also reshaping what designers are expected to know. For a broader look at where that is heading beyond Figma specifically, see our rundown of UX design trends for 2027, several of which assume AI-generated materials like shader fills are a normal part of the toolkit rather than a novelty.
Is Figma Shader Fills Ready for Production Work?
Figma shader fills are usable today but still carry beta limitations worth knowing before you hand off a file built around them. The feature is in open beta, which means the underlying shader generation can change behavior between releases, and a shader your teammate opens next month may not render identically to how it looked when you built it.
Export is the other practical limit. A Figma shader fill renders live on the canvas and in Figma’s own preview, but handing it to a developer still means exporting a flattened image or asking engineering to recreate the look in actual WebGPU or CSS, since Figma does not yet export shader fills as portable code the way it does with Figma Motion’s CSS and React output.
Performance is worth testing before you commit, too. A frame with several stacked shader fills can slow canvas scrolling on lower-powered machines, since each one renders a live WebGPU program rather than a cached bitmap. For a hero image or a handful of accent textures, that cost is unnoticeable; for a file with dozens of shaded layers, it is not, and you should flatten older passes to an image once you have settled on a final look.
Figma Shader Fills: Frequently Asked Questions
Do I need to know how to code to use Figma shader fills?
No. The Figma agent writes the underlying WebGPU shader for you from a text description or reference image, so no coding knowledge is required to generate or adjust a shader fill.
Can I use Figma shader fills on the free plan?
You can apply and adjust Figma’s first-party shader presets on a free plan. Generating a brand-new shader fill from a text prompt or a reference image requires a full seat on a paid plan.
Can a shader fill be exported as working code?
Not yet. Figma shader fills render live inside Figma, but there is no built-in export to portable WebGPU or CSS code; a developer currently needs to rebuild the effect or work from an exported flattened image.
Is a shader fill the same thing as a shader effect in Figma?
No. A shader fill is a new material that replaces a layer’s contents, while a shader effect transforms the content that is already inside the layer, such as a photo or block of text.
Will stacking multiple shader fills slow Figma down?
It can on lower-powered machines. Each Figma shader fill renders a live WebGPU program rather than a cached image, so a file with many stacked Figma shader fills can scroll more slowly than one with flat fills.
Where can I find Figma’s own documentation on shader fills?
Figma’s Config 2026 recap and its help center article on shaders both cover shader fills directly, including setup steps and current plan restrictions, and are the most reliable sources since the feature is still in active beta.
Subscribe for Newsletter
