Quick start guide to generative plugins and shaders

Extend what's possible in your design files by prompting the Figma agent to build custom plugins and shaders. No need to understand code or technical terminology—you explain it, the Figma agent will build it.

In this quick start guide, we’ll give you an overview of what generative plugins and shaders in Figma are, show you were to try them out, and walk you through how to ask the Figma agent to build you a resource.

What are generative plugins?

Plugins are applications that extend the functionality of Figma’s products using Figma’s Plugin API. Generative plugins are as their name suggests—they are built by prompting the Figma agent and the agent writes the code for you so that you don’t have to. You can even build plugins for Figma Draw and Motion.

Similar to classic plugins, there are three types of generative plugins that you can generate:

Try out plugins from Figma

Figma has built numerous plugins available to everyone use in their design files. To browse Figma's full plugin offering, open the Tools tab from your design file and filter the source by From Figma. 

Plugins built by Figma are free to use.

Make your own plugin

To build your own plugin using the Figma agent:

1. Open a Figma Design file.
2. Click Agents in the navigation bar to open the Figma agent and start a new chat.
3. In the prompt box, type Build me a plugin and describe what you want the plugin to do. If you’re not sure where to start, try out one of the prompts below to start!
4. Test your plugin, and iterate as needed.

Try these prompts

 
 Density mode switcher: Build a plugin that takes my selected frames and produces compact, default, and spacious versions—scaling spacing tokens proportionally so I can present three density options to stakeholders without duplicating the work manually.

Layer hygiene linter: Build a plugin that audits all layers in my file for unnamed layers, hidden orphan layers, empty groups, redundant nesting, near-duplicate components, and file complexity. Before scanning, let me choose which categories and which pages to audit. Show results as collapsible sections with an Ignore button per row, and let me return to settings to re-configure and re-scan.

Accessibility checks: Build a plugin that audits designs for WCAG contrast failures (with AA/AAA toggle, selection vs. page scope, and a show-only mode) and suggests fixes from the file's local color variables. Each failing layer should show two fix options—one for the text fill and one for the background fill — each with a color swatch preview, a Fix button, and a "Browse variables…" fallback picker if no compliant variable exists. After the first audit, re-audit automatically in real time whenever a fill changes.

Note: The Figma agent is building you a fully coded plugin and may take a few moments to finish.

What are shaders?

Shaders are miniature customizable programs that give you precise control over the visual appearance of everything rendered on a screen. They’re incredibly fast at producing complex visual effects, like realistic fire and distortions, and are widely used across industries, web design and augmented reality to game development and architectural design.

If you've ever added a blur, blend mode, gradient overlay, or glassy distortion effect in Figma, shader technology is what make those effects possible.

In Figma Design, you can also chat with the Figma agent to build two types of shaders: shader fills and shader effects.

Try out shaders from Figma

Here are a few shader examples created by Figma to help you get a sense of what is possible in the world of shaders. You can access them from your design file by navigating to the Tools tab and selecting the source From Figma.

Shaders built by Figma are free to use.

Make your own shader

To build your own shader using the Figma agent:

1. Open a Figma Design file.
2. Click Agents in the navigation bar to open the Figma agent and start a new chat.
3. In the prompt box, type Build me a shader and describe what you want the plugin to do. If you’re not sure where to start, try out one of the prompts below to start!
4. Test your plugin or shader, and [iterate](link to iteration article) as needed.

Try these prompts

Topographic contours: Build me a shader fill made of topographic contour lines, like the elevation rings on a hiking map. I want controls for line spacing, line thickness, and how rugged or smooth the terrain looks, plus separate line and background colors. Keep the pattern seamless so it tiles cleanly across large frames.

Holographic foil: Create a holographic foil shader effect with a liquid chrome style. Colors should flow along the edges and contours of the layer using luminance gradients, not a flat directional sweep. Controls: hue offset, color range, angle (rotates the gradient direction), band frequency, sheen intensity, saturation, and blend amount.

Basic prompting tips

1. Always say "plugin" or "shader" explicitly.

Say “Create a plugin” or “build me a shader” explicitly. If you tell the agent to “make you a mesh gradient,” you might end up with a standard image fill without controls to customize it.

2. Describe what you want to see.

You don't need to know how shaders and pluginswork — just describe what you want to see. "A soft pink glow that fades toward the edges" is better than "use a radial gradient blur."

3. Name the controls you want.

If you know you'll want to adjust color or intensity, say so upfront. "With a slider for blur amount and a color picker" saves a round of back-and-forth.

4. Use real-world references.

"Like a risograph print," "like a CRT monitor," "like heat haze" — these land better than abstract adjectives. One strong reference beats a paragraph of description.

Get more prompting tips.

Extend to other Figma surfaces

Plugins and shaders are not limited to just UI frames that you’re working on—you can also extend them to other surfaces in Figma, such as:

• Motion: Shader fills and effects can be keyframed directly in the motion timeline, making it possible to animate your fills and effects with precise timing and placement. You can also use motion to export the animation to .mp4, .webp, and .gif files. Learn more about motion in Figma
• Figma Draw: Use the Figma agent to generate procedural shapes, patterns, or layout structures directly into your illustrations. You can build a plugin that tiles a custom botanical motif across a frame, or one that generates a stipple-dot pattern from a selected path. Or build a shader fill to wrap a noise texture or gradient mesh around your artwork. Learn more about Figma Draw.
• Figma Make: Export shaders to Make via MCP to bring your visual effects directly into a live, coded prototype. Note that exported instances won't stay connected to the original shader yet. Learn more about Figma Make.
• Design systems: Any shader fill or effect can be saved as a style and published to your team library. Shaders can also be stacked and combined. Learn how to publish styles.

Resources

Help center articles

For more information on how to build generative plugins and shaders, check out:

• About building plugins
• Prompting tips for generative plugins and shaders
• Manage and update generated plugins and shaders
• AI collection: Build your own shaders fills and effects

For information on how to use plugins and shaders in your designs, check out:

• Use plugins in files
• Use shaders in designs

Created by Figma

Figma built dozens of generative plugins and shaders for everyone to try. These are available to all seats and plans, and are free to use. To find them:

1. Open a Figma design file, click Tools from the navigation bar.
2. Open the Source dropdown and select From Figma.
3. (Optional) Click the Filter icon and select Shader fill, Shader effect, or Plugin.

Learn about how to use a specific plugin or shader built by Figma.

Playground file

Want more hands on practice with generative plugins and shaders? Grab a copy of the Config 2026 playground file and check out the Generative plugins and shaders page:

More prompts

Here is additional inspiration for different prompts you can try out:

"Build a shader fill that looks like crumpled paper or fabric."

"Make a duotone shader effect that remaps my layer to two colors I pick—one for shadows, one for highlights—like a screen-printed poster."

"Build a plugin that finds all text layers with missing or mismatched font styles (text using a font not in my local library) and highlights them with a colored overlay." 

"Create a Voronoi pattern shader fill where I can control cell density, edge thickness, and whether it looks organic or geometric."

FAQ

What is the difference between generative plugins and classic plugins?

There are a few differences between generative plugins and classic plugins such as environment in which their built, third-party API support, and UI customization. Using the agent to build plugins is a great option if you don’t want to write the code yourself, while the classic way of building plugins is great if you want more control over the code.

To learn more, check out the article About building plugins in Figma.

What does this mean for creators of classic plugins?

You do not need to change the way you build or host plugins today. We don’t expect the introduction of generative plugins to change the usage of your plugins.

We’re continuing to invest in APIs and developer resources for partners and individuals who want to build plugins in their individual development environment and host plugins locally.

If you would like to migrate your plugin to be hosted by Figma and maintained through the agent, we will make this option available soon.

Do generative plugins and shaders cost AI credits?

Only when you are building and editing them using the Figma agent will you be charged AI credits. It does not cost AI credits to run plugins and shaders.

How do I share an generative plugin?

Generative plugins live in your file and travel with it. If you run a plugin, editors in the file can also run the plugin from the Tools section of the right sidebar when nothing is selected.

Publishing to the Figma Community and private generative plugins for organizations are coming soon.

How do I share a shader?

Any shader fill and shader effect can be turned into a style and published to team libraries. Shaders can also be stacked on top of another and turned into styles.

Publishing shaders to the Figma Community is coming soon.

Can I export to code?

Not yet, but we are actively working on making this available.

Can I monetize plugins and shaders?

You can monetize classic plugins in the Community, but it’s not yet possible to monetize generative plugins and shaders.

How do I export shaders using the MCP?

To learn more about how to export shaders via the Figma MCP, check out the Tools and prompts article from Figma’s developer docs.