Figma adds code layers, support for animations, more AI features in new update
TechCrunch
β’Wed, 24 Jun 2026 16:15:00 +0000
π° What Happened
Figma announced a major update on Wednesday, June 24, 2026, that introduces code layers directly onto the collaborative canvas, adds native support for animations and 3D transforms, and expands its AI capabilities. The code layer feature allows teams to clone repositories and extract code-to-design flows directly within Figma, bridging the gap between design and engineering. Figma's Chief Product Officer Yuhki Yamashita explained that code layers enable designers, product managers, and engineers to rapidly iterate on ideas in a spatial canvas environment where code quality is not the primary concern β encouraging creative exploration rather than production-ready output.
The update also brings native animation, transition, and 3D transform support to Figma, eliminating the need for designers to create animations in external software and then convert them to code. Additionally, Figma expanded its AI capabilities, building on last year's launch of Figma Make (an AI prompt-based prototyping tool) and integrations with Claude Code and Codex. Users can now create custom AI-powered plug-ins for various design tasks directly within the platform.
π The Backstory
Figma, the collaborative design platform, has evolved from a simple vector editing tool into a comprehensive product design ecosystem since its founding in 2012. Adobe's failed $20 billion acquisition attempt in 2022 was blocked by regulators, after which Figma continued on an independent path, deepening its capabilities. The company has been aggressively adding AI features to compete with emerging AI-powered design tools and to integrate more deeply into the software development lifecycle. The addition of code layers represents a strategic move beyond design into the broader product development workflow, positioning Figma as a bridge between designers and engineers rather than just a design tool. The integrations with AI coding assistants like Claude Code and Codex reflect the growing convergence of design and development tools.
π― Why It Matters
Figma's code layer feature blurs the traditional boundary between design and engineering, potentially transforming how product teams collaborate. By allowing code and design to coexist on the same canvas, Figma is positioning itself as a central hub for the entire product development process, not just the design phase. The addition of native animations and AI-powered plug-ins further strengthens its competitive position against rivals like Sketch, Framer, and emerging AI-first design tools, while deepening its moat as the industry standard for collaborative product design.
Figma announced a major update on Wednesday, June 24, 2026, that introduces code layers directly onto the collaborative canvas, adds native support for animations and 3D transforms, and expands its AI capabilities. The code layer feature allows teams to clone repositories and extract code-to-design flows directly within Figma, bridging the gap between design and engineering. Figma's Chief Product Officer Yuhki Yamashita explained that code layers enable designers, product managers, and engineers to rapidly iterate on ideas in a spatial canvas environment where code quality is not the primary concern β encouraging creative exploration rather than production-ready output.
The update also brings native animation, transition, and 3D transform support to Figma, eliminating the need for designers to create animations in external software and then convert them to code. Additionally, Figma expanded its AI capabilities, building on last year's launch of Figma Make (an AI prompt-based prototyping tool) and integrations with Claude Code and Codex. Users can now create custom AI-powered plug-ins for various design tasks directly within the platform.
Figma, the collaborative design platform, has evolved from a simple vector editing tool into a comprehensive product design ecosystem since its founding in 2012. Adobe's failed $20 billion acquisition attempt in 2022 was blocked by regulators, after which Figma continued on an independent path, deepening its capabilities. The company has been aggressively adding AI features to compete with emerging AI-powered design tools and to integrate more deeply into the software development lifecycle. The addition of code layers represents a strategic move beyond design into the broader product development workflow, positioning Figma as a bridge between designers and engineers rather than just a design tool. The integrations with AI coding assistants like Claude Code and Codex reflect the growing convergence of design and development tools.
Figma's code layer feature blurs the traditional boundary between design and engineering, potentially transforming how product teams collaborate. By allowing code and design to coexist on the same canvas, Figma is positioning itself as a central hub for the entire product development process, not just the design phase. The addition of native animations and AI-powered plug-ins further strengthens its competitive position against rivals like Sketch, Framer, and emerging AI-first design tools, while deepening its moat as the industry standard for collaborative product design.