Figma introduced generative plugins and shaders that let users describe and create visual effects with animation or interaction, then preview and refine them in the design tool. Unlike a workflow that produces only a static image, these artifacts include inspectable, downloadable, editable code. They can be published to the Figma community or kept within an organization when the plan supports private publishing. Read how Figma built the features.
From a prompt to a reusable visual effect
Generative plugins can help designers create interactive prototypes and effects. Shaders handle pixel-level changes such as gradients, materials, particles, and animated backgrounds. After generation, users can inspect the implementation, download it, and ask an engineer or another agent to modify it. Visual exploration can therefore become a runnable, portable asset rather than remaining a static canvas concept.
A practical creation workflow
- Describe the desired effect, trigger, runtime scope, and performance budget—for example, “subtle particles respond to pointer movement, keep contrast low, and never obscure text.”
- Inspect interaction states and source code. Test different viewport sizes, background colors, and reduced-motion settings.
- Give the exported code to an engineer or coding agent to add error handling, resource loading, keyboard access, and performance tests.
- Before publishing, check asset sources, font and dependency licenses, and whether the project can be shared publicly or must remain within the organization.
Sharing and MCP
Generated plugins and shaders can be published to the Figma community; private organization publishing requires an Organization or Enterprise plan. Figma MCP can help agents read or edit generated artifacts and can let an agent implement a shader in a React project. MCP shortens the handoff from design to code, but the final implementation still needs to run, be reviewed, and be maintained in its target application.