Figma Just Got Better: Code Layers, AI, & Animations Arrive

Figma Just Got Better: Code Layers, AI, & Animations Arrive

Figma, the ubiquitous design platform that has redefined collaborative creativity, has once again pushed the boundaries with a groundbreaking update. Unveiled earlier this week, this latest release introduces a powerful suite of features, including a revolutionary code layer, native support for motion and shaders, and an impressive array of enhanced AI capabilities.

These innovations are poised to dramatically streamline workflows, fostering unprecedented collaboration between designers, product managers, and developers. By embedding more functionality directly into its shared canvas, Figma continues its mission to dissolve the traditional barriers between design and implementation, making the iterative process faster and more fluid than ever before.

Bridging Design and Development with Code Layers

Perhaps the most talked-about addition is the introduction of code layers directly onto the collaborative canvas. This isn’t just about viewing code; it’s about making it an active participant in the design process, allowing teams to seamlessly interact with live code within their design environment.

Imagine being able to clone repositories directly within Figma or extract specific UI flows from production code into design layers for rapid testing and iteration. This capability fundamentally transforms how design and engineering teams can work together, removing friction and accelerating the feedback loop.

Yuhki Yamashita, Figma’s Chief Product Officer, emphasized the transformative potential of this feature. He noted that the multiplayer canvas, now augmented with code layers, empowers teams to prioritize rapid exploration and idea generation over the meticulous creation of production-ready code in the early stages. This spatial, flexible environment encourages diverse behaviors from designers, engineers, and product managers alike, fostering a culture of experimentation.

This move isn’t entirely new territory for Figma, which has been steadily integrating code into its ecosystem. Last year saw the debut of Figma Make, an AI prompt-based prototyping tool, followed by key integrations with Claude Code and Codex, all aimed at improving the critical hand-off between design and development.

Unleashing Creativity with Dynamic Motion and AI

Beyond code, Figma’s latest update significantly elevates the platform’s animation and motion capabilities. Designers can now natively incorporate a rich array of animations, transitions, and 3D transforms directly within their Figma files.

Previously, creating dynamic user experiences often meant resorting to external animation software, then laboriously converting those creations into code compatible with the app. This integrated approach not only saves valuable time but also ensures that motion is an intrinsic part of the design process from conception.

Adding another layer of innovation, artificial intelligence now plays a crucial role in crafting these dynamic assets. The update introduces support for generating impressive shader effects and fills using AI, enabling designers to effortlessly create complex visual textures and motion graphics with simple prompts.

Supercharging Your Workflow with Advanced AI Capabilities

Figma’s commitment to AI-powered assistance extends further with enhancements across its collaborative canvas. Users can now harness the power of AI agents by writing text prompts to create personalized, repeatable “skills” for various design tasks. This allows for automation of routine actions, freeing up designers for more creative endeavors.

To provide these AI bots with even greater context and intelligence, users can now connect external tools such as Notion, Granola, Excel, and GitHub, or attach relevant files. This deeper integration ensures the AI assistant understands the nuances of a project, delivering more accurate and helpful suggestions.

The update also empowers users to create highly customized plugins using simple prompts. Imagine generating complex layout templates or intricate vector path tracers on demand – this feature makes bespoke design tools accessible to everyone.

Further bolstering its AI ecosystem, Figma is working towards a deeper integration with Weavy, a node-based tool it acquired last year. Weavy, which helps designers run workflows through different models to compare outputs, will soon allow users to generate these powerful workflows directly within Figma, expected in a future update later this year.

This comprehensive update from Figma reaffirms its position at the forefront of design and development innovation. By intricately weaving code and advanced AI directly into the collaborative design canvas, Figma is not just improving tools; it’s redefining the very methodology of how digital products are conceived, built, and brought to life.

These new features promise to unlock unprecedented levels of creativity and efficiency, ensuring that teams can iterate faster, communicate more effectively, and ultimately deliver superior user experiences. It’s a significant leap forward for anyone involved in crafting the digital future.

Source: TechCrunch – AI

Kristine Vior

Kristine Vior

With a deep passion for the intersection of technology and digital media, Kristine leads the editorial vision of HubNextera News. Her expertise lies in deciphering technical roadmaps and translating them into comprehensive news reports for a global audience. Every article is reviewed by Kristine to ensure it meets our standards for original perspective and technical depth.

More Posts - Website

Scroll to Top