Figma adds code layers, built-in animations, and more AI tools

In short: Figma released an update that brings code, animations, and new AI features into its design workspace.

What happened

Figma, a popular tool for designing apps and websites, showed an update that adds a new “code layer.” A code layer lets teams place and view software code right alongside design mockups, on the same shared canvas.

Figma said this should help designers, product managers, and programmers work on ideas together earlier, instead of waiting for a handoff at the end. The company also said teams can clone code repositories (a repository is like a shared project folder for code) and pull pieces of an app’s structure into design layers for testing.

The update also adds built-in support for animations, transitions, and 3D transforms. Before this, many designers had to make animations in another tool, then convert them into code that Figma could use. Now they can create and adjust motion directly inside Figma.

On the AI side, Figma is adding more ways to generate assets and visual effects, including “shaders” (effects that change how something looks, like making it glossy or lighting it differently). Users can also write simple text instructions to create repeatable “skills” for Figma’s AI assistant, and connect tools like Notion, Excel, and GitHub to give it more context. Figma also added a way to create custom plugins with prompts, such as layout helpers.

Why it matters

For many teams, design and coding can feel like two separate rooms. Figma is trying to put them in the same room, like editing a document together with notes and the source material side by side, which could reduce back-and-forth and speed up testing ideas.

Source: TechCrunch AI