Figma adds code layers to collaborative design canvas

2026-06-25 · Source: Dataconomy · Field: Technology & Digital — Software Development & Engineering, Artificial Intelligence & Machine Learning · Depth: Intermediate, quick

Summary

Figma announced a significant update on Wednesday, introducing a new code layer, support for motion and shaders, and the ability to create custom AI plug-ins. This builds on recent initiatives like Figma Make, an AI prompt-based prototyping tool, and integrations with Claude Code and Codex. The new code layers enable teams to clone repositories and extract workflows, fostering rapid iteration among designers, product managers, and programmers by focusing on idea exploration over production code quality. Additionally, the platform now directly supports animations, transitions, and 3D transforms, eliminating the need for external software conversions. Enhanced AI capabilities allow for asset creation with shader effects and fills, with future integration of Weavy workflows. The AI assistant will also gain new skills, connecting with tools like Notion, Granola, Excel, and GitHub for automated actions and custom plug-in generation.

Key takeaway

For product designers and AI engineers focused on accelerating design-to-development cycles, you should explore Figma's new code layers and AI capabilities. These features allow you to rapidly iterate on ideas without concern for production code, directly integrate complex animations, and automate tasks by creating custom AI plug-ins, significantly streamlining your collaborative workflows and reducing handoff friction.

Key insights

Figma's update bridges design and code workflows using AI for enhanced collaboration and rapid iteration.

Principles

• Multiplayer canvas enables rapid idea exploration.
• Direct integration streamlines animation workflows.

Method

Code layers allow cloning repositories and extracting workflows from code to design, facilitating iterative exploration without focusing on production code quality.

In practice

• Create custom AI plug-ins via prompts.
• Generate assets with shader effects.
• Automate tasks using AI assistant with GitHub context.

Topics

• Figma
• Design Collaboration
• AI in Design
• Code Integration
• Prototyping
• UI/UX Tools

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

Related on AIssential

• Figma adds code layers, support for animations, more AI features in new update — Figma's update deepens design-code integration and expands AI for asset creation, workflow automation, and rapid prototyping.
• 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.
• 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.
• 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.
• Turning Figma designs into code collapses the handoff gap — Automating Figma-to-code conversion drastically reduces design handoff friction and development costs.
• 🔵 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 Dataconomy.