Figma adds AI animation tools and code editing inside its canvas

In short: Figma announced new features at Config 2026, including AI tools for making animations and visual effects, plus a way to edit code directly on the design canvas.

What happened

Figma, a popular app used to design websites and apps, shared a set of updates at its annual Config conference. The company says the main goal is to help teams do more work in one place and reduce repetitive tasks.

One big change is “code layers.” This lets people view and adjust a project’s code without leaving the Figma Design canvas. Code is the instructions that make an app or website work, like the wiring behind a wall. Figma says teams can also copy a code project from a repository (a shared storage folder for code), turn parts of it into editable design layers, and then sync changes back to the code.

Figma also introduced “Motion,” which helps teams create animations and transitions. Users can describe an effect in a chat-style tool and let AI generate it, or they can edit it manually using a timeline (like a video editor track).

Another new feature is “Shaders,” which are visual effects for fills and textures. Figma says these can be made by prompting AI, including effects like pixelation and different blur styles, and they are powered by WebGPU (a web technology that helps a computer’s graphics hardware draw effects faster).

Why it matters

For many teams, design and coding happen in separate tools, which can lead to slow handoffs and misunderstandings. Figma is trying to make the process feel more like one shared workspace, where you can adjust the “look” and the “how it works” side by side.

Source: The Verge AI