Figma adds code layers, support for animations, more AI features in new update

2026-06-24 · Source: AI News & Artificial Intelligence | TechCrunch · Field: Technology & Digital — Software Development & Engineering, Artificial Intelligence & Machine Learning · Depth: Intermediate, quick

Summary

Figma has released a significant update introducing new code layers, direct support for animations, transitions, and 3D transforms, and expanded AI capabilities. The code layers allow teams to clone repositories and extract code flows onto the collaborative canvas for design testing, fostering rapid iteration over production-ready code. Designers can now integrate animations directly within Figma, eliminating the need for external software. Enhanced AI features include support for shader effects and fills, deeper integration with the acquired Weavy tool for workflow generation, and new skills for its AI assistant, enabling users to create repeatable AI agent skills via text prompts and connect external tools like Notion and GitHub for context. The update also adds a feature for creating custom AI-powered plug-ins.

Key takeaway

For product designers and software engineers collaborating on UI/UX, this Figma update streamlines the design-to-code hand-off and accelerates prototyping. You can now iterate on design ideas directly with code layers, integrate complex animations without external tools, and leverage AI to generate assets or automate repetitive tasks. Explore the new AI assistant skills and custom plug-in creation to significantly enhance your workflow efficiency and reduce friction between design and development cycles.

Key insights

Figma's update deepens design-code integration and expands AI for asset creation, workflow automation, and rapid prototyping.

Principles

• Multiplayer canvas supports rapid exploration over pristine code.

Method

Users can write text prompts to create repeatable skills for AI agents, connecting tools like Notion, Granola, Excel, and GitHub, or attaching files for context.

In practice

• Clone repositories and extract code flows to design layers for testing.
• Integrate animations and transitions directly into Figma.
• Create custom plug-ins like layout generators with AI prompts.

Topics

• Figma
• Design Tools
• Code Integration
• AI in Design
• Prototyping
• Animation

Best for: Product Manager, Product Designer, Software Engineer, AI Product Manager

Related on AIssential

• Turning Figma designs into code collapses the handoff gap — Automating Figma-to-code conversion drastically reduces design handoff friction and development costs.
• OpenAI Codex and Figma launch seamless code-to-design experience — The new OpenAI Codex and Figma integration enables seamless roundtrip workflows between code and design canvases.
• I’ve tested every tool for going from Figma to code with AI. None of them work alone. — No single AI tool currently bridges high visual fidelity and creative flexibility for Figma-to-code conversion.
• Figma bets on human judgment at Config 2026 while the AI powering its canvas belongs to someone else — Figma integrates AI into its design canvas to retain users and manage costs, emphasizing human judgment over proprietary foundation models.
• Build your own AI tools to fill specific workflow gaps — Custom AI tools can bridge workflow gaps by enabling AI models to interpret and generate structured visual designs.
• 🔵 Claude Code to Figma and the new era of Product Taste — Product taste and context curation are emerging as critical differentiators in an AI-driven product development landscape.

Open in AIssential →

Editorial summary, takeaway, and curation by AIssential. Original article published by AI News & Artificial Intelligence | TechCrunch.