Figma Design | Code Layers Connect Canvas and Production Workflows
Figma is bringing code directly onto the canvas with code layers in Figma Design. Published on June 24, 2026, the update gives teams a way to explore working interface ideas beside design frames, move between code and editable design layers, and collaborate on interactive directions without separating the design conversation from the build process.
Figma brings working code into the design canvas
Code layers are designed to make interactive code feel like another material on the Figma canvas. Instead of treating code as something that only appears after design handoff, teams can place working experiences inside the same shared file where they already review layouts, frames, comments, and visual directions.
For web designers, this is important because many interface decisions cannot be judged from static screens alone. A card layout, form flow, dashboard state, or landing page interaction may look fine as a mockup but feel different once it becomes responsive and interactive. Code layers give teams another way to test those decisions earlier.
How code layers can start from different places
Figma gives teams several ways to create a code layer. A designer can add one from the toolbar, create one from an existing frame, or ask the Figma agent to generate one. Teams can also bring in an existing codebase by importing a GitHub repository or uploading a local folder.
Work created in Figma Make can also be brought onto the canvas as a code layer. That makes the feature useful for teams that want to compare generated ideas, production-oriented experiments, and visual design alternatives in one place instead of keeping them scattered across different tools.
Why this matters for UI and template work
Template creators often need to compare several directions before deciding what should become the final layout. Code layers can support that process by letting teams duplicate working experiences, test alternatives side by side, and review how an interaction actually behaves instead of only judging how it looks.
This can be useful for landing pages, pricing sections, onboarding flows, content cards, menus, booking forms, dashboards, and other interface patterns where interaction quality matters. It also makes collaboration more direct because teammates can comment, review, and prompt against the same layer inside the shared Figma file.
Moving between code and editable design layers
One of the most practical details is the ability to extract designs from code layers. Figma describes this as a way to convert the current code state into editable Figma layers, whether the team needs a single screen, a specific state, or a larger flow.
That matters because design and code rarely move in a perfect straight line. A team may start from a visual frame, generate code, adjust the interaction, extract the result back into editable layers, and then keep refining. For frontend workflows, that kind of loop can reduce the distance between experimentation and implementation.
IMPORTANT: Code layers are rolling out in closed beta. Check Figma's official access and rollout details before planning production work around this feature.{alertWarning}
Daisuki's Take: What This Means for Web Designers
For web designers, code layers point to a more practical design-to-build workflow. The value is not only that Figma can show code on the canvas, but that teams can compare working interface ideas earlier, while the design direction is still flexible.
We think this is especially relevant for template creators and frontend teams because static mockups are often not enough to validate a real user experience. A layout may need to respond to content changes, hover states, form behavior, animation, and screen size differences before it can be judged properly.
The practical takeaway is to treat code layers as a collaboration tool, not a replacement for design judgment or frontend review. They can help teams explore faster, but the final work still needs accessibility checks, responsive testing, clean code review, and careful decisions about what should actually ship.
Sources and Recommended Links
- Code on the Figma canvas | Figma Official Blog
