Figma Evolution: Code Layers, AI Plugins, and Motion Support

Figma is fundamentally redefining the boundary between design and development with its latest massive update. By integrating code layers and generative AI capabilities directly into its collaborative canvas, the platform is transforming from a static prototyping tool into a dynamic, multi-disciplinary environment.

Bridging the Gap with Code Layers

In a significant move toward "design-to-code" parity, Figma has introduced code layers directly onto its multiplayer canvas. This feature allows engineering teams to clone repositories and extract existing code flows back into design layers for rapid testing and iteration.

Unlike traditional workflows where designers hand off static files to developers, Figma Chief Product Officer Yuhki Yamashita emphasizes that this environment is built for exploration rather than production-ready perfection. By allowing designers, product managers, and engineers to interact with code in a spatial, non-linear way, Figma aims to accelerate the discovery phase of product development, reducing the friction often found during the hand-off process.

Advanced Motion, Shaders, and 3D Transforms

For years, high-fidelity motion design required designers to jump between Figma and specialized animation software, often resulting in complex conversion processes. Figma is stripping away this complexity by adding native support for animations, transitions, and 3D transforms.

The update also expands the visual toolkit by introducing support for shader effects and fills. This allows for more sophisticated, high-performance visual elements to be prototyped within the tool itself, ensuring that the "feel" of a product is captured much earlier in the lifecycle.

Generative AI and Custom Plugin Creation

Figma is doubling down on its AI roadmap by turning the canvas into a programmable workspace. Users can now use text prompts to create repeatable "skills" for AI agents, making the AI assistant a customized collaborator rather than a generic tool. To increase accuracy, the AI can now ingest context from external tools like Notion, Excel, GitHub, Granola, and various uploaded files.

Perhaps most groundbreaking for the developer community is the ability to create custom plugins through simple prompts. Whether a user needs a specific layout generator or a complex vector path tracer, they can now build bespoke functional tools within Figma without writing traditional code.

Integrating Weavy for Model-Driven Workflows

Building on its acquisition of the node-based tool Weavy, Figma is working to integrate advanced model-driven workflows. Later this year, users will be able to generate Weavy workflows directly within the Figma interface. This will allow design teams to run complex workflows through different AI models to compare outputs, ensuring that the chosen design direction is optimized across various generative parameters.

Key Takeaways

• Code-to-Design Parity: The new code layers allow teams to pull repository data into the canvas, making the design environment a truly collaborative space for engineers and designers.
• Native Motion & Shaders: Figma now supports 3D transforms, transitions, and shader effects, reducing the need for external animation software.
• AI-Driven Extensibility: Users can now generate custom plugins and repeatable AI "skills" via text prompts, integrated with external data from GitHub and Notion.