What Just Happened
Figma just shipped a major update to its generative plugins and shaders, and this one changes what you can actually make on the canvas. You can now build animated, interactive shader effects that respond to mouse movement and time. You can publish your custom plugins and shaders to Figma Community for anyone to use. And the MCP server now lets external AI agents like Claude Code read, modify, and implement your shader code directly in React.
This is not a Config recap. This is what dropped on September 1, and it is genuinely new capability that was not available before.
Animated and Interactive Shaders
Before this update, shaders in Figma were static visual effects. You could prompt the agent to create a blur, a colour shift, a distortion, but it sat there. Motionless. Now you can describe a shader that moves, pulses, ripples, or reacts to your cursor, and the Figma agent builds it live on the canvas using WebGPU.
What this actually looks like:
- A shader that creates a fluid distortion effect across a layer, reacting to mouse position in real time
- A particle system that drifts across a background panel
- A progressive blur that shifts based on scroll or interaction
- A 3D rotation effect on a card layer that responds to cursor angle
These are not mockups or prototypes rendered elsewhere and imported. They run directly on the Figma canvas. You can save them, share them, and stack them composably so one shader output feeds into the next.
Community Publishing for Plugins and Shaders
You can now publish generative plugins and shaders you create with the Figma agent to Figma Community. Anyone can find, install, and use them in their own files. If you are on an Organization or Enterprise plan, you can publish privately within your org.
This turns every custom tool you vibe-code into a shared resource. Build a layout generator that matches your design system. Create a shader that gives every section header the same glass-morphism effect. Publish it. Your whole team gets it. The community gets it.
You also get full code access now. View and download the code behind any shader or plugin you create, which means you can take it into any external editor and refine it beyond what the agent generated.
MCP Server: Your Agent Can Now Build and Ship Shaders
This is the part that connects design to production code. The Figma MCP server lets external AI agents, like Claude Code or Cursor, read and write the source code behind your generative plugins and shaders.
What this means in practice:
- Prompt the Figma agent to create a shader effect on the canvas
- Use Claude Code via MCP to pull that shader code out, refine it, and implement it precisely in React
- Ship the same visual effect from your Figma prototype directly into production
The gap between “this looks cool in my design file” and “this is live in the product” just got narrower. No manual translation. No guessing at CSS filter values. The agent wrote the code. Another agent can now deploy that code.
What to Try Right Now
If you have access to Figma (Professional plan or above), here is what to do:
- Open a design file and prompt the agent: “Create an animated gradient shader that follows my cursor position across this frame.” Watch it build a WebGPU effect with adjustable handles right on the canvas.
- Try a composable stack: Ask the agent to build a noise-based distortion shader, then ask it to add a second shader on top that applies a progressive blur. Both effects stack and both respond to time.
- Publish something: After you create a plugin or shader you like, go to Resources, find it, and click Publish to Community. Give it a name and description. It is now findable by anyone.
- Connect via MCP: Open Claude Code, connect the Figma MCP server, and ask it to pull a shader from your file and implement it in React. Watch the translation happen in real time.
Why This Unlocks Something Real
Figma has been moving toward agent-assisted design for a while. Config gave us the first version: prompt the agent, get a static shader or plugin. This update makes those outputs alive. They move. They react. They compose. And they can leave Figma and ship.
For anyone making digital products, this is the difference between describing a visual effect and actually having one that works. Animated shaders turn a static mockup into something a stakeholder can see and feel. MCP export turns a prototype into production code without the handoff gap.
The creative tools just got more creative. Go build something that moves.
Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.
