Figma adds AI animation, shader and code tools for designers

Figma announced a set of design and coding updates at its annual Config conference, including tools for AI-generated animation, shader effects and direct code editing. The company says the changes are meant to bring product teams, AI agents, development tools and design materials into a shared workspace.

The centerpiece is a redesigned Figma Design canvas that Figma describes as better suited to full-stack product work. The updates extend the canvas beyond static interface design by adding code-backed motion, editable code layers and AI-assisted visual effects.

Code comes onto the design canvas

Figma says its new code layers let users work with project code inside the Figma Design canvas. The company says teams can clone repositories, use Figma’s agent to generate alternate directions, turn flows into editable design layers and sync changes back to code.

The feature is aimed at reducing the handoff between design and engineering, according to Figma’s announcement. It also gives designers and developers a way to review or change coded elements without leaving the canvas.

AI motion and WebGPU shaders

Figma also introduced Motion, a tool for creating animations, transitions and 3D transforms inside Figma. According to the company, users can describe an animation to an AI interface, apply preset styles or adjust timing and movement manually on a timeline.

Figma says Motion is connected to design systems and backed by code, with output intended to be ready for production use. The company is positioning it as a collaborative animation tool rather than a separate motion-design application.

Another new feature, Shaders, lets users create shader effects and fills on the canvas through prompts. Figma says the tool uses WebGPU and can generate visual treatments that were not previously available inside Figma, including dither, pixelate and several blur effects.

Weave tools and agent workflows

Figma is also adding more than 20 integrated Figma Weave tools to the canvas. According to the company, the tools are meant to turn complex AI workflows into reusable canvas tools for producing consistent visuals.

Figma says this is the first stage of a broader integration between Figma and Figma Weave, with a fuller connection expected later this year. The company did not provide more detail in the announcement about timing or release stages beyond that.

The Config updates also expand Figma’s agent features. Figma says teams can create agent skills for repetitive work, giving shared workflows to entire teams so they can perform tasks more consistently.

The agent can also use more outside context, according to Figma, including third-party connectors, web search and file attachments. Those additions are meant to help the agent respond with more relevant results inside team projects.

Figma also announced generative plugins, which let users build reusable plugins from prompts through the agent. The company says those plugins can be adjusted and shared without requiring a developer setup or technical skills.

This story draws on original reporting from The Verge.