Figma Revolutionizes Design with Code, Animations, and AI

Figma Integrates Code and Animations in Its Latest Update

Figma recently unveiled a major update that transforms its design tool by adding a new dimension: that of code. This update includes not only code layers but also support for animations and shaders, as well as the ability to create custom plug-ins using artificial intelligence.

For some time, Figma has been working to integrate coding features into its design environment. Last year, the platform launched Figma Make, a prototyping tool based on AI prompts, and also integrated solutions like Claude Code and Codex to facilitate the transition between design and coding.

Code Layers for Collaborative Design

With this new update, Figma introduces code layers directly on its collaborative canvas. This feature allows teams to clone repositories and extract code flows into design layers for testing. According to Yuhki Yamashita, product director at Figma, these code layers are designed to simplify the workflow for designers, product managers, and programmers, enabling them to focus on iterating ideas rather than producing perfect code.

Yamashita emphasizes that Figma's multiplayer canvas is particularly powerful because it provides a space where code quality is not paramount. This allows users to quickly explore new directions spatially, positively influencing not only designers but also engineers and product managers.

Enhanced Support for Animations and 3D Transformations

Figma is also improving its support for animations, transitions, and 3D transformations. Previously, designers had to resort to other software to create animations, which they then had to convert into code compatible with Figma. Now, these elements can be integrated directly into the application, streamlining the creative process.

Artificial intelligence also plays a key role in this update, enabling the creation of animations and shader effects. Designers can now use AI to enrich their projects with more sophisticated visual elements.

Integration of Weavy and Improved AI Assistant

Last year, Figma acquired Weavy, a node-based tool that helps designers execute workflows across different templates to compare results. Figma is currently working on better integrating Weavy into its application. An update scheduled for later this year will allow users to generate Weavy workflows directly within Figma.

Additionally, Figma is enhancing the capabilities of its AI assistant to make it more useful on its collaborative canvas. Users can now write text prompts to create repeatable skills that the AI can utilize. It is also possible to connect tools like Notion, Granola, Excel, and GitHub, or attach files to provide the AI with richer context on the tasks to be accomplished.

Creating Custom Plug-ins with AI

Finally, Figma is introducing a feature that allows users to create custom plug-ins. These plug-ins, such as layout generators or vector path tracers, can be developed using prompts, providing designers with greater flexibility to tailor the tool to their specific needs.