Figma Adds Code Layers and Motion Tools as AI Reshapes Product Design

Figma has announced a major product update at Config 2026, bringing code, motion, AI effects, reusable workflows, and smarter design agents deeper into its design platform. The update, announced on June 24, 2026, shows Figma trying to become more than a place for static interface design. It wants the canvas to become a shared workspace where teams can design, prototype, animate, test ideas, and work closer to production code.

The biggest new feature is code layers. With this update, Figma will let teams bring interactive code directly onto the design canvas. Users will be able to clone or import codebases, test different working versions side by side, convert code states back into editable design layers, and push selected changes back toward the codebase.

Code layers are expected to roll out in closed beta over the next few weeks, with early access beginning around July.

Code Comes to the Canvas

Code layers represent one of Figma’s clearest attempts to narrow the long-standing gap between design and engineering. Traditionally, designers create mockups in Figma, while engineers rebuild those ideas separately in development tools. That handoff can create friction, especially when designs change quickly or teams need to test interactive ideas before committing to production.

Figma’s new approach brings working interface experiments into the same canvas where teams already manage frames, components, comments, and design systems. The goal is not simply to turn every design into final production code. It is to create a faster space for exploration.

Designers, engineers, and product managers can use code layers to test multiple product directions, compare working states, and decide what is worth developing further. That could make early product thinking more practical because teams can see how an idea behaves, not only how it looks.

Native Motion Tools Arrive

Figma is also adding Figma Motion, a native animation system inside Figma Design. It includes a timeline, keyframes, presets, time-based comments, and animation controls. This means designers can create transitions, movement, and interaction flows without leaving Figma or relying on separate animation software at the early stage.

The more important shift is that motion can now become part of a design system. Animated components and motion variables can move across files in the same way colors, typography, and components already do.

For developers, Dev Mode will expose timing values, easing curves, and keyframes. Animation details can also be copied as CSS, JSON, or React-ready code. That makes motion easier to inspect, discuss, and implement across teams.

AI Effects and Custom Plugins

The update also adds AI-generated shader fills and effects. Designers can describe a visual treatment or use a reference image, and Figma’s AI agent can generate shader-based effects such as blur, pixelation, dither, gradient maps, Riso-style textures, and particle-like treatments.

These effects are not fixed image outputs. They are parameterized, meaning designers can adjust controls directly on the canvas. That gives teams more control than a simple one-shot AI generation.

Figma is also introducing generative plugins. Instead of writing plugin code from scratch, users can describe the tool they need and have Figma’s agent create a reusable plugin. These could include layout helpers, vector tools, dashboard utilities, asset generators, or workflow-specific tools for individual teams.

This could make plugin creation more accessible to designers and product teams that do not have the time or technical setup to build custom tools manually.

Weave Brings Reusable AI Workflows

Figma is also bringing Weave-style tools into the platform after acquiring the node-based creative workflow tool Weavy. The new Weave tools let users connect models, transform assets, compare outputs, and build repeatable workflows instead of relying on isolated prompts.

This is an important step because many AI design tools still work like one-off generators. Figma appears to be moving toward AI systems that teams can reuse, publish, remix, and standardize across projects.

For design teams, that could make AI less random and more operational. A team could create a repeatable workflow for producing visual assets, testing interface directions, generating variants, or refining brand treatments.

A Smarter Design Agent

Figma’s design agent is also becoming more contextual. It can use reusable skills, connect with external tools such as project-management, documentation, communication, and code platforms, and work with attachments like briefs, research, and planning documents.

This points to a broader AI strategy. Figma is not only trying to help users generate a quick screen from a prompt. It wants the agent to understand a team’s workflow, design conventions, files, tools, and repeated processes.

Agent chats will be visible to teammates by default, though users can make them private. That detail reinforces the team-first direction of the update. Figma’s AI is being shaped for collaboration, not only individual experimentation.

Why This Matters

The update lands at a moment when product design is being pulled from several directions. AI coding tools are bringing product managers and designers closer to software implementation. AI design tools are generating interfaces from prompts. Creative platforms are adding brand-aware assistants, reusable assets, and automated editing workflows.

Figma’s answer is to make the canvas more powerful. Code layers bring working interfaces into the design space. Motion turns animation into a first-class design-system element. Shader effects, generative plugins, and Weave tools make AI more practical inside real workflows. The design agent then connects those pieces to the broader work happening across a team.

The risk is that the line between experiment and production may become blurry. Code layers can help teams move faster, but shipping real products still requires engineering review, accessibility checks, performance testing, security review, and maintainable code standards.

Still, the direction is clear. Figma is preparing for a design market where the winning tool is not only the one that draws the cleanest screens. It is the one that helps teams move from idea to working product direction without scattering the process across too many tools.