Figma Unleashes Powerful New Features: Code Layers, Animation Support, and AI Enhancements

TL;DR

• Figma has introduced Code Layers for Figma Sites, enabling developers and designers to embed custom React code directly into the design canvas to create interactive, live elements.
• The platform now offers native support for animations, transitions, and 3D transforms, alongside new AI-powered shader tools that generate effects like dithering and blurs via simple prompts.
• Users can leverage AI to build custom plugins (such as layout generators) and automate asset creation, significantly streamlining the workflow from concept to a fully functional, interactive site.

Figma Unleashes Powerful New Features: Code Layers, Animation Support, and AI Enhancements

The design world is witnessing a major shift as Figma rolls out its most ambitious update to date, fundamentally blurring the line between static design and live development. On Wednesday, the company showcased a suite of features centered on Code Layers, enhanced animation and shader support, and a new generation of AI-powered tools. This update is not just about making things look better; it's about making them work better, transforming Figma from a prototyping tool into a platform for building interactive, production-ready web experiences.

Code Layers: Bridging Design and Development

The headline feature of this update is the introduction of Code Layers for Figma Sites. Previously, designers had to create interactive elements in separate software and export them as code, a process that often broke the connection between the visual design and the final implementation.

Code Layers allow users to turn any design element into a live, interactive component backed by custom React code. By selecting an element and clicking the "Figma Make" icon, designers can instantly transform it into a code layer. They can then describe the desired animations or logic in the AI chat, and Figma will generate the corresponding code.

This feature empowers teams to:

• Clone repositories and explore new directions directly within the design canvas.
• Transform flows into editable design layers that synchronize modifications back to the original code.
• Experiment with interaction without needing deep technical knowledge, as the AI handles the syntax for React, TypeScript, and Tailwind.

Code Layers are available today for all users in Figma Sites, democratizing access to interactive web development.

Native Animation and Shader Support

For years, animating complex transitions and 3D effects in Figma required exporting to tools like After Effects or Lottie, then converting back to code. Figma's new update ends this workflow bottleneck by introducing native support for animations, transitions, and 3D transforms.

Designers can now collaboratively design animations directly on the canvas, applying preset styles or manually adjusting them on a timeline. The platform now supports:

• Smooth transitions between states.
• 3D transformations for depth and perspective.
• Timeline-based editing for precise control over motion.

Complementing this motion engine is a new suite of AI-powered shader tools. Users can now prompt the AI to create complex visual effects such as dithering, pixelation, and various types of blurs. These effects, powered by WebGPU, were previously unavailable in Figma but can now be generated instantly on the canvas. This allows for custom visual treatments that elevate the user experience without the need for external image editors.

AI: The Engine for Custom Plugins and Automation

The update takes a significant leap in AI integration, moving beyond simple content generation to automated workflow creation. A standout feature is the ability to create custom plugins powered by AI.

Users can now prompt the AI to generate bespoke tools, such as:

• Layout generators that automatically structure complex grids.
• Vector path tracers for refining illustrations.
• Interactive widgets that respond to user input.

Furthermore, the AI assistant has been enhanced with new skills to make it more useful within the collaborative canvas. Whether a user needs to "Make an image" using specific models like gpt-image-1, Gemini Imagen 3, or Titan V2, or simply generate assets from a text prompt, the process is now seamless. The AI beta is now available for Professional, Organization, and Enterprise plans, ensuring that teams at every scale can leverage these advancements.

Transforming the Workflow and Elevating User Experience

The convergence of Code Layers, native animation, and AI plugin generation represents a paradigm shift for the design industry. By enabling designers to build interactive, code-backed elements directly within their design environment, Figma is eliminating the traditional "handoff" friction between design and engineering.

This transformation leads to:

1. Faster Iteration: Teams can test interactive ideas in minutes rather than days.
2. Higher Quality: The direct link between design and code ensures that the final product matches the original vision perfectly.
3. Enhanced UX: Native support for complex animations and shaders allows for richer, more engaging user experiences that were previously too difficult to prototype.

As Figma continues to evolve, these new features position the platform not just as a tool for drawing, but as a comprehensive environment for building the future of the web. With Code Layers, animation support, and AI enhancements, the barrier between a concept and a live application has been effectively removed.

AndroGuider Team

Articles written by the AndroGuider team. We try to make them thorough and informational while being easy to read.