Figma announced a major update on June 24 that closes the gap between design and code more aggressively than anything the platform has done before. Three features stand out: Code Layers, native animation and shader support, and an AI-powered custom plugin builder.
The update arrives as Figma continues to compete in a landscape where AI coding tools (Claude Code, OpenAI Codex, Cursor) can already generate UI from screenshots or prompts. Figma's response: instead of trying to replace engineers, give designers and engineers a shared canvas where code and design coexist.
Code Layers: Code That Lives Inside Design Files
The headline feature is Code Layers. Previously, designers worked in Figma, exported specs, and engineers recreated everything in code. Code Layers flips this: teams can clone repositories directly into a Figma canvas, extract flows from code, and iterate on design *with live code elements* in the same spatial environment.
Figma's chief product officer Yuhki Yamashita explained the thinking: "We think the multiplayer canvas is really powerful because this is an environment where you don't really care about the quality of the code. If you're rapidly exploring or need to explore a bunch of new directions, you can do that in this spatial way."
For teams this means:
• Designers can see how their designs translate into real component structures
• Engineers can prototype UI in code and have designers tweak the visual layer
• Product managers can explore interaction flows without waiting on either side
This builds on Figma's earlier integrations with Claude Code and OpenAI Codex, but Code Layers goes further by making code a first-class canvas element rather than an export target.
Animations, Transitions, and 3D Transforms
Figma has also added native support for motion design. You can now define animations and transitions directly in Figma files — including 3D transforms — without relying on plugins like Lottie or Protopie for basic motion prototyping.
The animation engine supports:
• Timeline-based transitions between states
• Spring and easing presets
• 3D transforms on canvas elements
• Shader effects for advanced visual treatments
For UI/UX teams, this means interaction design stays inside the same tool as visual design, reducing handoff friction. For motion designers, it means Figma now competes more directly with specialized prototyping tools.
AI Plugin Builder: Natural Language to Custom Design Tools
Perhaps the most forward-looking feature is the AI plugin builder. Instead of writing TypeScript to create a Figma plugin, you describe what you want in natural language, and Figma generates a working plugin.
Yamashita described it as making plugin creation accessible to non-developers: a designer who needs a bulk layer rename tool or an accessibility checker can build it in minutes without engineering support.
The AI handles:
• Plugin scaffolding and UI generation
• Mapping natural language descriptions to Figma's plugin API
• Iterating on existing plugins via chat
This lowers the barrier for teams to create internal design tools. The long tail of small specific workflows — audit a color palette, batch-export components, generate variants from a pattern — no longer requires a dedicated plugin developer.
What This Means for Design Workflows
Taken together, these three features suggest Figma is betting that the future of design tools isn't about pixel-perfect exports to engineers. It's about a shared workspace where design intent, code implementation, and custom automation coexist.
For independent builders and small teams, the AI plugin builder is the most immediately useful feature. If you're building a product solo or with a small team, being able to create design automation tools by describing them in English saves real hours each week.
For larger orgs, Code Layers changes the collaboration dynamic. Teams that already use Claude Code or Codex for UI generation can bring those outputs back into Figma for visual refinement, creating a tighter iteration loop.
Availability
All three features are rolling out now. Code Layers is available in beta for Figma Professional, Organization, and Enterprise plans. Animation support is generally available. The AI plugin builder is in public beta.
Sources:
• Figma adds code layers, support for animations, more AI features (TechCrunch, June 24, 2026)
• Figma Blog (Official)