Figma Code Layers: Executable Code on the Design Canvas
FigmaFigma introduced Code Layers, a feature that brings executable code directly onto the collaborative design canvas, allowing teams to explore interactive code and design side by side in the same file. Any design layer can be converted into an interactive code layer with a single click or a text prompt, and code layers support importing GitHub repositories and local folders, editing via AI chat or Figma's built-in code composer, and converting back to editable design layers at any time. The feature supports npm packages including motion libraries and 3D frameworks, and works within Figma Sites backed by custom React code. Code Layers rolls out starting in July 2026 with early access via waitlist.
Sources & Mentions
4 external resources covering this update
Figma adds code layers, support for animations, more AI features in new update
TechCrunch
Figma adds code layers to the canvas and lets users build custom AI plugins at Config 2026
The Next Web
Figma Launches Code Layers & Motion at Config 2026
CMSWire
Figma bets on human judgment at Config 2026 while the AI powering its canvas belongs to someone else
The Decoder
Figma Code Layers: Design and Code Now Live on the Same Canvas
The handoff between design and development has long been one of the most friction-filled moments in the product workflow. Designers finalize frames in Figma, export specs, and developers rebuild the same work in code, often losing detail in the translation. At Config 2026, Figma announced Code Layers, a feature that removes that handoff by bringing executable, interactive code directly onto the collaborative design canvas.
Code Layers rolls out starting in July 2026. Early access is available via waitlist at figma.com/config-betas.
Code as a Design Material
The central idea behind Code Layers is that code should be treated like any other design material on the canvas. Rather than living in a separate IDE or repository, code can now exist as a layer within a Figma file, positioned and organized alongside frames, components, and variables.
On the canvas, any design layer can be converted into an interactive code layer with a single click or a text prompt directed to the Figma agent. The result is a live, interactive element that the team can comment on, duplicate to explore multiple directions, and iterate on together without needing production-quality code.
Importing and Editing Code
Code Layers is not limited to AI-generated code. Teams can bring in an existing codebase by importing a GitHub repository or uploading a local folder directly into Figma. From there, code flows are extracted and rendered as design layers for testing and exploration.
Editing code layers is possible through three pathways: using AI chat to build and modify the code through prompts, editing directly in Figma's built-in code composer, or converting back to editable design layers for visual adjustments. Once design changes are finalized, one click updates the code layer to reflect what has changed.
Technical Capabilities
Code Layers within Figma Sites are backed by custom React code and support npm packages, including motion libraries and 3D frameworks. This means interactive elements ranging from dropdown menus and form inputs to shader effects and 3D transforms can be embedded directly on the canvas. The system is designed to support the full breadth of modern web component patterns, not just static UI elements.
CPO Yuhki Yamashita described the feature as designed for a "multiplayer canvas" moment where designers, product managers, and engineers can rapidly explore ideas without the pressure of writing production-ready code.
Availability
Code Layers enters early access starting in July 2026. Interested teams can join the waitlist at figma.com/config-betas. The feature works within Figma Sites and requires a Full seat on a paid plan (specific plan requirements to be confirmed at general availability).