Figma: Shaders Generally Available with 4096px Export and Code Layer Support
FigmaFigma made shaders generally available and added the ability to render and export shaders at up to 4096px. Shaders can now be included when a design is turned into code layers with "build this with code", and they render in those layers when the layer is set to Play. The code layer support currently works only in the browser on Chrome 157, which is rolling out this week.
Key Takeaways
- Shaders are now generally available, moving the prompt-built GPU effects introduced at Config 2026 out of beta.
- Shaders can be rendered and exported at up to 4096px, making them usable in large, high-density final assets.
- Shaders now carry through "build this with code" into code layers, so a static frame with a shader becomes a live, running layer.
- Shader rendering in code layers works when the layer is set to Play, including interactive and animated shaders.
- Code layer shader support is browser-only and requires Chrome 157, which is rolling out this week, and it is not supported in the desktop app or other Chromium browsers.
- Code layers remain in open beta, with code creation and editing free on paid plans through November 4, 2026 before AI credits apply.
Shaders Leave Beta
Figma announced on November 2, 2026 that shaders are now generally available. Shaders are the GPU-powered visual effects and fills that designers can create by prompting the Figma agent, such as animated gradients, holographic foils, grain and noise textures. They first arrived in beta alongside generative plugins at Config 2026. With general availability, they are no longer limited to an experimental release and can be used as a normal part of design work.
Export at Up to 4096px
Shaders can now be rendered and exported at resolutions of up to 4096px. Previously, output resolution was a limiting factor for anyone who wanted to use a shader-generated texture or background in final assets. The higher ceiling makes shader output usable for hero images, large backgrounds, and print-adjacent or high-density display work, without needing to recreate the effect elsewhere.
Shaders Inside Code Layers
The second change connects shaders to Figma's code layers. When a designer selects a static frame that contains a shader and uses "build this with code" to create a code layer, the shader is now carried into the result. Once the code layer is set to Play, the shader renders live alongside the rest of the design, including interactive and animated shaders. This lets a designer see how a shader behaves in context with the surrounding layout rather than judging it in isolation.
Browser Requirements and Availability
Shader support in code layers is currently limited to the browser and requires Chrome 157, which Figma says is rolling out this week. According to Figma's help documentation, shaders are not supported in the Figma desktop app or in other Chromium-based browsers, and the HTML-in-Canvas capability may need to be enabled in Chrome until the new version reaches users. Code layers themselves remain in a gradual open beta rollout, so access may arrive at different times for different teams. Figma's help documentation also notes that creating and editing code within code layers is free on paid plans through November 4, 2026, after which those tasks consume AI credits.
Why It Matters
Together, these changes move shaders from an experimental effect toward a production tool. Higher export resolution makes the output reusable in finished assets, and code layer support carries shader visuals into prototypes that behave like real software. Designers who work on expressive, motion-heavy interfaces get a more direct path from a prompted effect to something that runs in the browser.