Figma | Generative Plugins and Shaders Gain New Controls
Figma has expanded its generative plugins and shaders with new options for publishing, motion, interactivity, code access, and agent-assisted editing. Designers can create custom tools directly on the canvas, share them through the Figma Community or inside an organization, and move their underlying code into external development workflows when more control is required.
Custom design tools can now move beyond a single file
Generative plugins allow designers to describe a tool to the Figma design agent and receive a reusable plugin directly on the canvas. These tools can generate layouts, organize assets, visualize data, automate repeated actions, or support another workflow that is not already available as a native Figma feature.
The latest update adds a clearer path for distributing those creations. A generative plugin or shader can be published to the Figma Community, while customers on Organization and Enterprise plans can make tools available privately within their organization.
Shaders gain animation and interactive behavior
Figma shaders are small programs that control how pixels are rendered inside a layer. They can act as fills or effects, producing treatments such as distortion, dithering, liquid surfaces, patterns, light leaks, outlines, and procedural textures with adjustable properties.
The design agent can now add motion and interactivity to these effects. A shader can respond to time, pointer position, or another defined control, turning it from a static visual treatment into an effect that changes while the viewer or designer interacts with it.
Community publishing makes generated tools reusable
Designers with access to the Figma agent can submit their generative plugins and shaders to the Community. Published tools receive their own listings, where other users can discover and install them instead of recreating the same functionality through another prompt.
Community plugins and shaders must pass Figma's respective review process before becoming publicly available. Private tools shared inside an organization do not follow the same Community review, so teams remain responsible for checking their behavior and suitability before wider internal use.
Code access connects canvas experiments with development
Creators can now view and download the code behind generated plugins and shaders. This makes the agent's output inspectable and gives technically experienced users a way to revise the implementation with an external editor or third-party coding agent.
Figma MCP adds another connection between the canvas and code. Compatible agents can inspect and modify generative plugins or shaders, while shader effects can be exported so an agent can reproduce them in React. Figma has also made shaders exportable through HTML-based workflows.
Working prototypes helped shape the final tools
The project began with an experimental WebGPU environment where shader effects could be prompted and adjusted through dynamically generated controls. Figma later replaced the early rendering approach with a WebGPU pipeline that could isolate user-generated graphics scripts inside separate sandboxes.
Working prototypes helped the team explore the experience quickly, but they were not enough to communicate every interface state to engineering and product stakeholders. The process eventually combined static Figma mockups for alignment with coded prototypes for testing behavior and performance.
Generated tools still follow different technical boundaries
Generative plugins use Figma's existing plugin API and PropsKit components so their controls follow familiar interface patterns. They are intended for tools that operate within Figma Design and can be created without setting up a conventional plugin development environment.
Classic plugins remain necessary when a tool needs to communicate with external AI services or third-party APIs. Generative tools therefore expand what designers can build through prompts, but they do not replace every established plugin architecture or development requirement.
IMPORTANT: The Figma design agent is in open beta for Full seat users and can also be used in drafts with Collab, Dev, and View seats. Agent use is free during the beta, but Figma plans to begin charging AI credits; using existing plugins and shaders remains free across plans.{alertWarning}
Daisuki's Take: What This Means for Designers
The most valuable part of this update is not simply that an agent can generate code. Designers can turn a specific visual need into a reusable canvas tool, test it through real controls, and share the result with people who may never need to inspect the implementation.
Code access prevents that convenience from becoming a closed workflow. A generated plugin or shader can serve as a starting point, while developers retain the option to review, correct, extend, or reproduce the underlying behavior outside the original Figma file.
We would still test every generated tool with different layers, files, and collaborators before treating it as production-ready. Prompted functionality can accelerate experimentation, but reliable shared tools also need predictable controls, acceptable performance, clear documentation, and careful review of what their code changes.
Sources and Recommended Links
- Behind the Build: Generative Plugins and Shaders at Figma | Figma Official Blog
- Create Shaders with the Figma Agent | Figma Official Help Center
- View Code for Generated Plugins and Shaders | Figma Official Help Center
