Figma adds AI motion graphics, shader tools, and code layers

Figma announced a suite of AI-enhanced design and development tools at its Config 2026 conference on June 24, introducing capabilities that blur the line between design and code within a single workspace.

The updates center on what Figma describes as a reimagined canvas optimized for full-stack development, bringing design teams, AI agents, and development tools into one environment.

Code layers bring development to the design canvas

The most significant addition is code layers, which allow designers and developers to work directly with code inside Figma Design. Users can clone repositories, generate new code directions using Figma's AI agent, extract user flows into editable design layers, and sync changes back to the codebase — all without switching between applications.

This integration aims to reduce context-switching for teams that previously needed separate tools for design mockups and code implementation.

AI-generated motion graphics and animations

Figma's new Motion feature enables users to create animations, transitions, and 3D transforms collaboratively within the platform. Designers can describe desired animations to Figma's chatbot interface, which then generates the motion graphics automatically. Alternatively, users can apply preset styles or manually adjust animations on a timeline.

The Motion system connects to design systems, generates code-backed output, and produces production-ready animations — addressing a workflow gap where animation specs often required separate tools or manual developer translation.

Shader effects powered by WebGPU

Figma introduced prompt-based shader creation, allowing users to build custom visual effects and fills powered by WebGPU. Effects previously unavailable in Figma — including dither, pixelate, and various blur types — can now be created directly on the canvas through natural language prompts.

This capability extends Figma's visual toolkit beyond standard filters into programmable graphics effects that traditionally required specialized coding knowledge.

Weave workflows for AI-generated visuals

The platform integrated over 20 Weave tools designed to generate consistent, high-quality visuals within Figma. These tools convert complex AI workflows into accessible canvas functions, making advanced AI image generation more approachable for designers without machine learning expertise.

Why it matters

Figma's updates represent a strategic push to become a complete design-to-development platform rather than just a prototyping tool. By embedding AI-powered animation, shader programming, and direct code manipulation into the design canvas, Figma is positioning itself to capture more of the product development workflow — potentially reducing the number of specialized tools teams need to license. For enterprises, this consolidation could streamline collaboration between design and engineering teams while reducing handoff friction that typically slows product iteration cycles.

The details were first reported by The Verge, with additional information available on Figma's website.