View code for generated plugins and shaders

The code viewer in Figma Design shows you code behind a shader or plugin that Figma agent generated for you. You can use the code viewer to:

• Understand how a shader or plugin works by reading the code that the Figma agent generated for it
• Troubleshoot unexpected behavior by inspecting what the code does
• Review code before publishing to the Figma Community or to your organization
• Copy or download the code to reuse in a different shader, plugin, or environment
• Learn from an existing shader and remix it to better suit your specific needs

View code for a shader

You can access the code to any shader you’ve created, saved, or have access to, including shaders that you did not create.

To view the code behind a shader:

1. Open a Figma Design file where you have access to the shader.
2. Open the Tools tab from the navigation bar on the left.
3. Find your desired shader and click > View code.

View code for your generated plugin

You can access the code only to generated plugins that you created.

To view the code behind a generated plugin:

1. Open a Figma Design file where you have access to the shader.
2. Open the Tools tab from the navigation bar on the left.
3. Find your plugin and click > View code.

Copy and download code

Once you have the code viewer open for your plugin or a shader, you can copy the code or use the Download all files button to save the code files locally to your computer.

Update the code

To edit the code for a shader or your generated plugin, you can describe the changes to the Figma agent or use Figma’s MCP to make changes.

Learn how to use the Figma MCP to update your generative plugin or shader.