Figma held its annual Config conference on June 24, 2026, and announced what it calls the biggest update to its platform since launch. The headline features: code layers that let developers write and execute code directly inside the Figma canvas, AI agents that build custom plugins from plain language descriptions, and a new motion graphics system with shader support.
Code Layers Change the Design-Development Gap
The new code layers feature adds a coding environment directly into Figma’s design canvas. Designers and developers can now write JavaScript or TypeScript inside Figma, attach it to design elements, and see the code execute in real time. A button designed in Figma can have event handlers, API calls, and state management logic written and tested without leaving the application.
This is Figma’s most direct move yet into territory traditionally held by tools like Webflow, Framer, and even traditional IDEs. The company is positioning code layers as the bridge between design and production, rather than trying to replace frontend development entirely.
Code layers support hot module replacement, so changes to code appear instantly on the canvas. The TypeScript compiler runs in the browser, and the code can reference Figma’s existing design tokens, variables, and component APIs. Exports can generate either static HTML/CSS or React components with the embedded logic intact.
AI Agents for Plugin Creation
Figma also launched AI agents that let users create custom plugins using natural language. Instead of writing the plugin API code, you describe what you want: “Create a plugin that checks color contrast ratios against WCAG AA standards and highlights failing elements.” The AI agent generates the plugin code, installs it in your workspace, and makes it available to your team.
The AI agents can also modify existing plugins. You can tell the agent to add features, change behavior, or fix bugs in plugins that are already installed. Figma says the agents run locally in the browser and do not send design data to external servers for processing.
This approach is different from competitors like Adobe, which has focused its AI efforts on generative image creation. Figma’s AI strategy centers on extending the tool itself rather than generating assets within it.
Motion Graphics and Shaders
The motion system lets designers create animations directly in Figma without external tools like After Effects or Lottie. Keyframe-based animation, easing curves, and timeline controls are built into the canvas. Animations can be previewed in real time and exported as CSS, Lottie JSON, or native code for iOS and Android.
Shader support is the more unusual addition. Designers can write GLSL shader code inside Figma and apply it to any design element. This enables real-time visual effects: gradient animations, noise-based textures, and physics simulations that update on every frame. While shader support is unlikely to be used by most designers daily, it opens up possibilities for interactive prototyping and visual experimentation.
Competitive Landscape
Figma’s updates arrive as its competitors double down on different bets. Adobe has integrated Firefly AI across Creative Cloud for image and layout generation. Sketch, once Figma’s primary rival, has pivoted to a subscription model and focuses on macOS-native performance. Canva has expanded into enterprise document editing.
By adding code execution, AI-powered tooling, and motion graphics, Figma is expanding from a design tool into what it hopes becomes a full product development platform. Whether that expansion dilutes the focused experience that made Figma popular in the first place remains an open question.
Frequently Asked Questions
What are Figma code layers?
Code layers let you write and execute JavaScript or TypeScript directly inside the Figma canvas. Code is attached to design elements and runs in real time, enabling interactive prototypes without external tools.
Can Figma AI agents create plugins from scratch?
Yes. You describe the plugin you want in natural language, and the AI agent generates the code, installs it, and makes it available in your workspace. The agents also support modifying existing plugins.
What shader formats does Figma support?
Figma supports GLSL shaders that can be applied to any design element. The shaders run in real time in the browser and can create noise textures, gradient animations, and physics-based visual effects.
Is Figma replacing frontend developers with these updates?
No. Code layers are positioned as a prototyping and bridging tool, not a replacement for production frontend development. The exported code is meant to give developers a starting point, not a finished product.
When are these Figma features available?
Code layers and AI agents are available now in beta for Figma Professional and Enterprise plans. Motion graphics and shader support will roll out to all plans by the end of July 2026.
