TL;DR
Figma has launched a major update introducing code layers, animation support, shader effects, and AI-driven plugin creation. These features aim to improve collaboration among designers, developers, and product managers, and integrate AI more deeply into the design process.
Figma has announced a major update that introduces code layers, support for animations and shaders, and new AI-powered plugin creation features. These enhancements aim to streamline collaboration among designers, developers, and product managers, allowing for more dynamic and integrated workflows.
The update makes it possible to add code layers directly onto the Figma canvas, enabling teams to clone repositories and extract code flows for testing and iteration. According to Figma’s chief product officer, Yuhki Yamashita, these code layers facilitate rapid exploration without the need for pristine production-ready code, fostering a more flexible environment for cross-disciplinary teams.
Additionally, Figma now supports animations, transitions, and 3D transforms within its platform. Previously, designers had to create animations externally and import them, but the new support allows for direct integration, simplifying the process. The update also introduces AI-driven features, including shader effects and fills, and the ability to generate custom plug-ins through text prompts. Figma has been working on deepening its AI capabilities, including integrations with models like Claude Code and Codex, and recently acquired the node-based workflow tool Weavy, which it plans to integrate more closely later this year.
Furthermore, users can now write prompts to create repeatable AI skills, connect Figma with tools like Notion, Excel, GitHub, and attach files to give AI agents more context. These features aim to make AI assistance more collaborative and customizable within the design process.
Enhanced Collaboration and AI Integration in Figma
This update signifies a substantial shift in Figma’s platform, emphasizing integration of code, animation, and AI to facilitate more seamless collaboration among cross-disciplinary teams. By enabling direct code editing and animation support, Figma reduces the need for external tools, streamlining workflows. The AI features further position Figma as a more intelligent, adaptable design environment, potentially accelerating product development cycles and enhancing creative exploration.
Figma compatible animation plugins
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Figma’s Ongoing AI and Code Integration Efforts
Figma has been progressively integrating code and AI features over the past year. Last year, it launched Figma Make, an AI prompt-based prototyping tool, and integrated with AI models like Claude Code and Codex to improve design-to-code handoff. The addition of code layers and AI plugin creation tools continues this trajectory, reflecting a broader industry push toward more intelligent, integrated design platforms.
The company’s acquisition of Weavy, a node-based workflow tool, and plans to integrate it within Figma later this year, demonstrate its focus on workflow automation and AI-driven process optimization. These developments align with industry trends toward more collaborative, AI-assisted design environments.
“Code layers make it easier for designers, product managers, and programmers to iterate on ideas rather than focus on creating pristine code that goes into production.”
— Yuhki Yamashita, Figma’s chief product officer
AI-Powered UX: Design Smarter, Faster, and More Ethically in the Age of AI
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Details on User Adoption and Future Enhancements
It is not yet clear how widely these new features will be adopted by Figma’s user base or how they will impact existing workflows. Specific details about rollout timelines for some AI integrations and how teams will leverage code layers in practice are still emerging.
code layers for Figma
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Next Steps for Figma’s AI and Code Features
Figma is expected to roll out these features gradually over the coming months, with further updates to enhance AI capabilities and workflow integrations. The company may also release tutorials and user guides to facilitate adoption and gather feedback for future improvements.
Figma shader effects
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Key Questions
How will code layers improve the design process in Figma?
Code layers allow teams to embed and test code directly within the design canvas, enabling faster iteration, easier cloning of repositories, and more seamless collaboration between designers and developers.
Can I create custom plugins using AI prompts in Figma?
Yes, the latest update introduces features that let users generate custom plug-ins through text prompts, making it easier to develop tailored tools for specific workflows.
Will these new features be available to all Figma users immediately?
The rollout will be gradual, with some features initially available to select users or through beta programs. Full availability is expected later this year.
How does the AI integration enhance Figma’s capabilities?
AI integration enables the generation of shader effects, fills, and custom plugins, as well as improving workflow automation and collaboration with tools like Notion and GitHub.
Source: TechCrunch
