Figma integrates code editing, motion design, and AI-powered plugins into collaborative canvas
Figma's June 2026 update brings native code layers, animation support, and AI-assisted custom plugin generation to its design platform.
Last verified:
Figma bridges design and engineering with embedded code editing
Figma rolled out a suite of updates on June 24 that embed software development workflows into its collaborative design environment. According to TechCrunch AI, the platform now allows teams to import Git repositories as code layers, extract control flows into visual design components, and iterate on prototypes without enforcing production-grade code quality. The move signals Figma’s strategy to consolidate design-to-code handoffs and reduce friction between product, design, and engineering disciplines.
Native animation and shader support eliminates external tooling
The update adds first-party support for motion transitions, 3D spatial transforms, and procedural shader effects—capabilities that previously required designers to craft animations in dedicated software, convert them to code, and re-import them into Figma. According to the source, users can now generate both animations and shader fills using AI assistance directly within the canvas. This addresses a long-standing workflow bottleneck, particularly for teams building interactive prototypes.
Weavy integration and AI-powered plugin generation
Figma acquired the node-based design tool Weavy in 2025 to help teams run design assets through multiple generative models and compare outputs. TechCrunch reports that later this year, Weavy workflows will become embeddable within Figma itself. Separately, the platform is expanding its AI assistant to support prompt-driven custom plugin creation—enabling designers to write natural-language specifications for layout generators, path tracers, or other utilities. Teams can connect external services like GitHub, Notion, and Excel to give the AI bot richer context about project requirements.
Why This Matters
Figma’s code-layer feature narrows the gap between design mockups and functional prototypes, potentially reducing the number of handoff cycles between disciplines. For organizations using Figma as a single source of truth for product specifications, embedding code and animation natively removes friction points that currently force round-trips to Figma Make, Claude Code, or other specialized tools. The AI-assisted plugin creation lowers the barrier to automating repetitive design tasks for non-technical team members, which could amplify adoption among smaller teams without dedicated developer-in-residence roles. However, the effectiveness of these features depends on adoption—if engineers continue preferring their own code editors, code layers risk becoming a visualization layer rather than a true collaboration surface.
Frequently Asked Questions
What are code layers in Figma?
Code layers let teams embed working code directly on the design canvas, pull Git repositories into projects, and convert code flows into design assets—without exporting to external editors.
Can I generate animations in Figma now?
Yes. Figma now supports native animations, transitions, and 3D transforms. Users can also generate shader effects and fills using AI, eliminating the need for separate motion-design software.
How do the new AI plugin features work?
Teams write text prompts to define repeatable AI skills, then connect external tools like GitHub, Notion, or Excel to give the assistant context for generating custom plugins—such as layout generators or vector tracers.