Figma has opened generative plugins and shaders: what can now be transferred from canvas to React

On September 1, Figma talked about the development of generative plugins and shaders - tools that its design agent creates right on the canvas according to the description. The main change is not that the agent is able to “draw the effect” again, but that the result can be published, edited as code and transmitted further to the engineering circuit.

This brings the design tool closer to the “idea → working prototype → verifiable implementation” cycle. But it is important not to confuse a comfortable start with finished production: Figma does not cancel the review, availability requirements and performance testing.

## What's changed

Figma announces four new features for agent-created plugins and shaders:

• **Publication.**Plugin or shader can be sent to Figma Community or distributed privately within the organization at Organization and Enterprise rates.
• Animation and interactivity. Shaders can take into account the time, movement and actions of the user, not just a static layer filter.
• Access to the source. The code of the created effect can be viewed and downloaded to be modified in a third-party agent or conventional editor.
• Working through MCP. An agent connected to Figma MCP can view and change generative plugins and shaders; a shader can be exported as a reference point for accurate implementation in React.

By shaders, Figma means GPU programs that change the pixels of the layer in real time – for example, create distortion, grain, light effect or reaction to the cursor. Inside the product, the Figma team moved to a WebGPU-pipeline and isolated sandboxes for such graphical scenarios.

## Why it’s important not just for design

Previously, the expressive effect often remained in one of two states: either a beautiful but disposable layout, or a separate engineering task with a long transfer of context. Now, the designer can quickly assemble a controlled version of the effect on the real layer, and the developer can get the code and parameters instead of saying “do something like this”.

The approach is especially useful for the product, where visual behavior is part of the interface: loading states, reaction to action, data visualization, brand transitions, game and educational scenarios. Publication in Community also makes good workpieces reusable rather than tied to a single file.

## Practical scenario for the team

1. The designer formulates the problem not as “do beautifully”, but as observable behavior: what layer changes, from what action, with what limitations.
2. The agent creates a draft plugin or shader on the canvas; the designer adjusts the parameters and checks it in the context of the screen.
3. The team captures permissible states, disabling animations and behavior on small screens.
4. The effect code is uploaded to the repository or transmitted to the engineer via MCP as the original specification, rather than as an unconditional artifact to be inserted.
5. The developer checks performance, availability, browser compatibility, security, and licensing restrictions, and then accepts, reworks, or rejects the implementation.

This process leaves the AI strong in the zone of rapid experimentation, but does not give it a decision about the quality of the release.

## Where the border runs

Exporting to HTML or React does not guarantee that the effect is suitable for the real interface. Generative code may be redundant, misbehave on a weak GPU, disrupt contrast, or lack reduced motion mode. And an interactive effect that looks good in a single layout can conflict with keyboard input, screen reader, or content on localized screens.

So the correct wording for the team is not "Figma is now writing the frontend," but "Figma shortens the distance between visual behavior research and engineering testing." The working circuit needs the same criteria as any UI code: a measurable performance budget, an affordable alternative, tests on target devices, and a clear support owner.

## Who's available

According to Figma, the design agent is in open beta. Full seat users can create generative plugins and shaders on all plans; Collab, Dev and View seat users can use the agent in their drafts. During the beta, the feature is free, but Figma warns it will start spending AI credits in a few weeks. Before you build it into an ongoing process, the team should clarify its tariff, limits and cost model.

## Conclusion

The most mature part of the update is not the spectacular shader itself, but the appearance of a verifiable bridge between the canvas, code, and command library. This is a good reason to revise the handoff: to transfer to the development not a screenshot of the animation, but its parameters, conditions and limitations. But the result should be released only after the usual product review - AI-generation reduces the price of the experiment, not the cost of error.

Source: Figma — Behind the build: Generative plugins and shaders at Figma (1 September 2026).