Native shaders in Figma, end to end: describe an effect in one sentence, and the code is still yours to take.
Figma deep dive: Generative shader effects | Config 2026 · Georgia
33 min total·Actually worth watching closely: ~25 min·3 must-watch clips
- 0:15 – 3:10Watch
The self-described Shader Boys and their opening flex
The three speakers introduce themselves pretty loosely — a designer and chaos animal, an engineering lead, a manager who DJs — then go straight to the first demo they teased internally: a Figma motion clip with a 3D ribbon shader effect.
That opening ribbon isn't a rendered video — it's motion and a shader effect running together, which is the whole point.
The intros are slide text, but the ribbon right after is pure picture — you can't feel the texture from narration alone.▶ Jump to 0:15Speaker · Pierce - 3:10 – 10:56Listen
Origins: from a community ask for progressive blur to a cold DM to the CEO
Where the feature came from — the community really wanted progressive blur, a few nerds got decent headway on it, and instead of shipping another one-off the team decided to hand over the ability to make effects. It stayed stuck until WebGPU landed at Figma. The project itself started when they cold-messaged Dylan in March and got a "fuck yeah" back from the plane.
The product call: don't service effect requests one at a time — give people the tool to build effects.
All narrative and product thinking here, with the picture parked on the speakers and title slides. Fine to listen to while doing something else.▶ Jump to 3:10Speaker · Pierce - 10:56 – 15:20Watch
Getting started: generating an effect from one sentence, and what the new entry points look like
Rather than the mind-blowing keynote demos, this gets grounded in the new UI: he asks the agent for a threshold pixelization effect live, then tours the Tools area — filter down to Plugins, Shader Effects, Shader Fill, or browse Figma's templates. The agent even asks back which pixel size he wants.
Shader fill is a new fill type, and fills work the way fills always work in Figma — text, strokes, brushes, copy-paste and all.
From where things live in the menus to the generated result, it's all interface demo — you have to watch to see which knobs land on the panel and what the effect looks like.▶ Jump to 10:56Speaker · Raji - 15:20 – 19:40Watch
On-canvas handles and a tour of the built-in effects
He keeps iterating on an existing effect with Edit with Agent until it grows control points you can drag right on the canvas, then runs quickly through what a shader effect can expose — sliders, numbers, gradients, selects, switches, colors — and the ready-made effects Figma ships.
The real fun ones aren't the sidebar sliders — they're canvas controls: ask for a point, a line, a radius, and drag it on the canvas.
How the handles drag, what they produce, and the differences between presets are purely visual — a text description loses most of it.▶ Jump to 15:20Speaker · Raji - 19:40 – 22:22Watch
Brand work: stacking effects and still being able to edit
A teardown of how a real brand visual is built — the same corner-peel effect from the keynote, now on a brand use case. At the base it's just a text layer wrapped in a component, with motion and a series of effects stacked on top, including a shape effect that follows the peel as it peels back.
However tall the stack, the base is still editable text and components — edit the text and everything updates, grab the gizmo and it updates in every downstream component.
The point is the live reaction the moment something changes; you have to be watching the screen to feel how far the update propagates.▶ Jump to 19:40Speaker · Pierce - 22:22 – 29:23Watch
Many looks from one source, plus the limits you need to know
Starting from just the Figma logo with lens distortion and an animated center point, three copies each get different effects stacked on top — completely different expressions of one core idea. He notes someone on the brand team threw one of them together with the agent, with controls as fine as misregistration. Then the boundaries: raster effects, rendered at the frame size, a maximum render size, no infinite zoom, and a low-resolution indicator when a layer gets too small.
By stacking and recombining effects on a base input you get outcomes that are genuinely interesting and surprising — more than you planned for.
Most of it is a side-by-side of several versions where the whole difference is in how they look; the limits section at the end goes static, so you can speed through that.▶ Jump to 22:22Speaker · Pierce - 29:23 – 33:07Watch
Closing: your code is yours, from design file straight to the web
The export story — get design context hands back a custom effect wrapper with the shaders, a setup function, a render function, all the parameters and a runtime, ready to use in HTML. Then the raw shader fill source, walked through line by line. He closes with what's available today and what's still coming.
Effects aren't a black box locked in the design file: your code is your own, free to take whenever you'd like.
The moment the design and the web page sit side by side is the densest frame of the talk, and the raw code section needs a clear look at the structure too.▶ Jump to 29:23Speaker · Angel