Figma Expands AI-Powered Design Platform With Code Layers, Native Animations, and Intelligent Plugin Creation

Figma announces big update, brings code, native animation to design canvas, AI features This week, Figma is rolling out a series of updates, the biggest of which brings code to the design canvas and new animation capabilities, in addition to extending the AI features. Here’s what’s new with the app: Bring code right into the design canvas Designers have historically been tasked with producing mockups and wireframes, that development teams have then converted into usable code. Now, that separation has narrowed significantly.

Figma’s “Code Layers” allow teams to work directly within the collaborative design app, integrating coding work with design.

You can use the code layers to pull in repositories and clone them, generate entirely new concepts via AI, or turn existing code into design layers and sync it back to developers without leaving the canvas. This is part of a broader industry trend to lessen friction between the design and developer communities. Instead of separating work, the goal is collaboration – where both designers and developers feel at home in the same space. According to Figma, the aim is more experimentation than code production.

Figma’s Motion will now let users create animations, transitions and 3D transform natively within the tool.

Most designers today will jump to a tool like After Effects to create these types of animations and then hop back into their Figma workflow, but the new feature allows for all of this to be created, and even tweaked through its timeline interface directly on the canvas. You can even let the AI create the animation for you from simple text commands. Figma’s Shaders introduce visual filters that use WebGPU (a web-based graphical API used by WebXR devices) on the design canvas itself.

Designers can use prompts to generate visual effects like pixelation, dithering and blur, amongst many others, right in the tool. In extending its suite of AI tools, Figma now enables “customizable” AI Skills. Teams can now automate workflows using repeatable prompts that AI agents will be able to carry out in a more consistent way.

The system is able to pull context from external tools, such as Notion, Google spreadsheets, files within your desktop, etc. For more intelligent outputs.

Most significantly for designers hoping to bypass some coding, Figma is also allowing users to create their own plugins using natural-language prompts. Instead of using code, designers can now simply describe what a plugin should do –, for instance, ‘create a layout for me’ or ‘ automate a design flow’, and the AI will generate a working plugin that teams can use and share across projects. The team is also working to integrate Figma Weave, its acquired workflow automation platform that compares AI model outputs, more tightly so that these workflows can be run within Figma itself. Together, the updates strengthen Figma’s ambitions to evolve from a simple design tool to a more end-to-end platform.

The company has spent the last year bringing to market tools that range from code generation to website creation and greater integration with existing coding assistance software like OpenAI’s Codex.

These new tools suggest that the end game for Figma is to serve as the workspace where ideas take shape from concept to a deployable software product - all while never leaving the collaborative canvas. As AI continues to make it easier for a wider audience to create software, a unified platform such as this one, will grow increasingly valuable not just as a design solution, but as a productivity platform where designers and developers team up with AI agents to build digital products. For the average design or dev worker, the change signifies a future where lines blur even further between designs and actual functioning software, and where collaborative canvases – rather than a code editor – are the central workplace for creating the digital experiences of tomorrow.