Figma introduces AI-powered motion graphics and shader tools
At its annual Config conference, Figma announced a series of design and coding updates, including AI-generated motion effects, code layers for editing within the design canvas, and shader tools powered by WebGPU.
Figma has unveiled several new product updates at its annual Config conference, aimed at helping creatives “push their ideas further” and automate tedious tasks with artificial intelligence.
A major highlight is a reimagined canvas now optimized for full-stack development, bringing teams, AI agents, tools, and materials “together in one place.” Notable new features include coding layers that allow users to edit the code of their projects directly within the Figma Design canvas without leaving the interface. Additionally, AI-generated motion graphics effects enable users to create animations and transition effects by simply describing them to Figma’s chatbot interface.
The following new creative materials were announced:
- Code layers: Work directly with code on the Figma Design canvas — clone repositories, generate new directions with Figma’s agent, extract flows into editable design layers, and sync changes back to code.
- Motion: Design animations, transitions, and 3D transforms collaboratively within Figma. Use prompts to generate animations with AI, apply preset styles, or manually adjust on a timeline. Motion is connected to design systems, code-backed, and ready to ship.
- Shaders: Build shader effects and fills using prompts, powered by WebGPU. Effects previously unavailable in Figma, such as dither, pixelate, and various blur types, can now be created directly on the canvas.
- Figma Weave workflows: Generate consistent, high-quality visuals in Figma using more than 20 integrated Weave tools, turning complex AI workflows into simple tools on the canvas. This is the first step toward full integration between Figma and Figma Weave, expected later this year.
New intelligent tools for teams and agents:
- Agent skills and deeper context: Turn repetitive work into skills that entire teams can use to work more precisely and consistently. Bring in more context with third-party connectors, web search, and file attachments.
- Generative plugins: Extend Figma’s capabilities by building custom, reusable plugins with the agent. Turn prompts into tools that can be tweaked and shared — no developer setup or technical skills required.
