If you haven’t come across Figma’s shaders yet, you’re not alone. They launched at Config in June, mostly overshadowed by Motion and code layers, and got a big but quiet update on September 1. The short version: you describe a visual effect to the Figma agent in plain language, and it builds a GPU shader you can apply to any layer as a fill or an effect, with real controls in the Design panel. Since September, shaders can also animate and react to the cursor.

This workflow is synthesized from Figma’s documentation, several independent write-ups, and Figma forum threads, plus general Figma knowledge, not from any one person’s process, and we haven’t tested it hands-on end to end. Shaders are still in open beta, so expect some of this to change.

  1. Check that you can actually see and build them. Shaders render with WebGPU, so your browser and machine need to support it. Browser support for WebGPU is still uneven and changing, so check Figma’s minimum requirements if shaders don’t appear. On access, sources disagree. Write-ups from Config described shaders as a paid-plan, Full seat feature. Figma’s current help center says shaders are available in Figma Design on all plans to anyone with access to the Figma agent, and Figma’s blog describes the agent as open to Full seat users on all plans. Figma’s help center also says anyone with edit access to a file can find and use shaders, which matches one independent write-up’s split: anyone can apply Figma-made shaders, while building new ones takes agent access. If the agent isn’t available to you, start with step 2.

  2. Start with the built-in shaders before you prompt anything. Figma ships its own shaders, and you’ll find them in the Tools tab by filtering the source to From Figma. They’re the fastest way to understand the two types: shader fills generate patterns, gradients, and textures from scratch, while shader effects change how an existing layer renders, with things like grain, halftone, distortion, color shifts, or blur. Apply one through the Fill section (or Stroke) or through Add effect in the Effects section, then play with its controls.

  3. Prompt your own. Open Agents in the navigation bar, start a chat, and begin with “Build me a shader” followed by what you want. Figma’s prompting guidance and the independent write-ups line up well here. Describe it with a real-world comparison, such as a worn screen-print texture or sunlight through ripples in a pool, rather than abstract terms. Say what you want to see instead of what you don’t. Say what must stay unchanged, like keeping text readable or staying inside brand colors. And if you can’t put a look into words, attach a reference image and ask the agent to describe the effect, then refine that description.

  4. Ask for the controls you’ll want later. The agent returns shaders with parameters that show up as normal properties in the Design panel. You can steer which ones exist. Asking up front for controls like color inputs, intensity, scale, or animation speed makes the shader reusable across projects instead of a one-off. This is general advice drawn from how parameterized tools work, not a step any single source spells out, but it’s what makes step 7 worth doing.

  5. Stack and combine. Multiple shader fills can sit on top of each other in the Fill and Stroke sections, and the independent write-ups lean on this heavily: a gradient map over noise, a print-style texture over a photo. Treat shaders like layer styles you can mix rather than finished looks.

  6. Add motion and interaction when it earns its place. Since the September update, the agent can build shaders that move on their own or respond to the mouse. Select the layer and click Play to run them on the canvas. Only one animated or interactive shader can run on a page at a time. If you’re working in Figma Motion, you can keyframe individual shader settings, which turns a static effect into an animated transition.

  7. Save the good ones as styles. Any shader fill or effect can be saved as a style and published to a team library, which is the natural home for a signature brand texture. You can also publish a shader to the Figma Community, and on Organization and Enterprise plans, share it privately within your org.

  8. Decide how it ships before you show a client. This is where the sources are most cautious. At the time of the independent write-ups, shaders didn’t appear in Dev Mode, so a developer couldn’t inspect them through normal handoff, and one write-up’s advice was to plan on shipping them as flat images. Since then, Figma has added a code viewer where you can see and download a shader’s code, and says that when you send a frame with shaders to an external coding agent through its MCP server, the shaders render correctly in the generated React code. Your realistic options are now: export a still (PNG), export video from Motion (MP4, WebM, or GIF), or hand over the code. Pick one with your developer early, because a cursor-reactive hero that ends up as a flat PNG is a different design.

Why it matters for designers

For years, effects like dithering, halftones, animated gradients, or a convincing chrome finish meant hunting for a plugin, building it in another tool, or asking a developer. Shaders bring that onto the canvas, as editable, reusable properties rather than flattened images. The best early use cases the write-ups point to are textured hero backgrounds, marketing screens, and brand textures saved as styles.

They also blur a line designers are used to. A shader is real code running on the GPU. When it works, the thing you designed can be the thing that ships, not an approximation someone rebuilds by eye.

What to watch out for

It’s a beta, and the forum shows it. Several threads describe shaders that appear in the panel but don’t render on the canvas, and others report a “Shaders having issues” warning that Figma staff logged as a reproducible bug. If a shader doesn’t show up, check browser and GPU support first.

Figma Make support is newer than most write-ups. Early forum threads said shaders didn’t carry over to Make at all, but Figma’s help center now says you can export shaders to Make through its MCP server to use them in a coded prototype. The catch: exported copies don’t stay linked to the original shader, so changes you make later in Figma Design won’t follow them.

Performance matters once it ships. A full-screen animated shader is GPU work on every frame, on every visitor’s device. Test the generated code on modest hardware, and plan for a reduced-motion fallback, which nothing in Figma’s docs handles for you.

Credits and access are covered in the sidebar.