Figma adds code layers, native animation support, and AI-powered plugin creation

Figma has rolled out a significant update that introduces native code layers, direct animation and shader support, and expanded AI capabilities, including the ability to generate custom plugins through text prompts. The move signals the design platform’s deepening commitment to bridging the gap between visual design and functional development.

Code layers bring engineering into the design canvas

The headline feature is the addition of code layers directly onto Figma’s collaborative canvas. Teams can now clone repositories, extract flows from code, and map them to design layers for testing — all without leaving the platform. This integration reduces friction between designers, product managers, and engineers, who can now iterate on ideas in a shared environment where code quality is secondary to exploration.

Figma’s chief product officer, Yuhki Yamashita, emphasized that the multiplayer canvas is designed for rapid experimentation. “You don’t really care about the quality of the code” in this context, he explained, adding that the feature encourages different behavior across roles, not just designers but also engineers and product managers. The update builds on last year’s AI prompt-based prototyping tool, Figma Make, and recent integrations with Claude Code and Codex.

Native animation and 3D transforms eliminate external tools

Previously, designers had to create animations in dedicated software and then convert them to code for Figma. The new update embeds support for animations, transitions, and 3D transforms directly into the design tool. This streamlines the prototyping process and allows for richer, more interactive design presentations without context switching.

The update also introduces shader effects and fills, which can be generated using AI. This gives designers more creative control over visual assets without needing deep technical expertise in graphics programming.

AI agents, custom plugins, and Weavy integration

Figma is expanding its AI assistant with new “skills” — repeatable actions that users can define through text prompts. These AI agents can connect to external tools like Notion, Granola, Excel, and GitHub, or reference attached files for more contextual responses. The company is also rolling out a feature that lets users create custom plugins — such as layout generators or vector path tracers — simply by describing what they want in natural language.

Additionally, Figma is deepening its integration with Weavy, the node-based tool it acquired last year. Later this year, users will be able to generate Weavy workflows directly within Figma, allowing designers to run multiple models and compare outputs without leaving the canvas.

Why this matters for design and development teams

These updates reflect a broader industry trend: the convergence of design and engineering workflows. By embedding code, animation, and AI directly into the design environment, Figma is reducing the number of tools teams need to manage and shortening the feedback loop between concept and implementation. For product teams, this means faster iteration cycles and fewer handoff errors.

For the design community, the ability to create plugins and animations through natural language prompts lowers the barrier to customization and interactivity, potentially democratizing advanced design capabilities.

Conclusion

Figma’s latest update is a strategic step toward becoming a more integrated platform for product development, not just design. With native code layers, animation support, and AI-driven plugin creation, the company is positioning itself at the center of the collaborative design-to-development pipeline. The rollout of Weavy workflow generation later this year will further cement this direction.

FAQs

Q1: What are code layers in Figma?
Code layers allow users to bring code repositories, flows, and logic directly onto the design canvas. Teams can clone repos, extract flows from code, and test them against design layers without switching tools.

Q2: Can I create animations natively in Figma now?
Yes. The update adds native support for animations, transitions, and 3D transforms, eliminating the need to use external software and convert the output to code.

Q3: How does the AI plugin creation work?
Users can describe a plugin in natural language — for example, “a layout generator” or “a vector path tracer” — and Figma’s AI will generate the corresponding plugin code. This feature is part of the broader expansion of AI skills and agents within the platform.