Canvas, Meet Code: Building Figma’s Code Layers | Figma Blog (opens in new tab)
Figma’s code layers bridge visual design and web development by making React code behave like editable objects on the Figma canvas. They preserve the canvas’s flexibility—moving, resizing, nesting, duplicating, and comparing layers—while enabling advanced interactions, APIs, shaders, and forms. The approach combines a new canvas primitive, an integrated web IDE, AI-assisted coding, and multiplayer collaboration. ## Reconciling Design and Code - Figma’s canvas is spatial, flexible, and designed for rapid experimentation. - Code is traditionally organized in a hierarchical filesystem with strict syntax and structure. - This difference raises workflow questions about duplication, source of truth, and how canvas objects should map to files. - Figma identified three major challenges: - Integrating code layers with Figma’s existing ecosystem and components - Building an accessible but powerful browser-based IDE - Supporting collaboration between designers and developers ## Code as a Canvas Material - Code layers are implemented as a new Figma canvas primitive. - Like regular layers, they can be: - Moved, resized, and reparented - Nested inside frames - Used in layouts and components - Duplicated and arranged side by side - Option-dragging creates a fork of the source code, making experimentation comparable to creating Git branches but faster and more visual. - Figma chose React because its reusable component model aligns with Figma components. - React props connect to Figma component properties, allowing users to edit code-defined values through visual controls such as toggles, sliders, and dropdowns. ## AI and Direct Code Editing - Code layers can be created and modified using AI, including the model behind Figma Make. - Users can also edit the underlying code directly when they need complete control. - Designs can be converted into code layers with a single click, after which developers or designers can add behavior and interactivity. ## A Web-Based IDE - Figma built an integrated coding environment rather than requiring users to leave the canvas. - The editor uses CodeMirror as its extensible foundation. - CodeMirror supports features including: - Syntax editing and extensions - Themes - Find-and-replace - Line numbers - Figma customized default editor behavior to fit its own systems, including replacing CodeMirror’s undo and redo with Figma’s multiplayer-aware undo stack. Code layers are designed to make code feel like another creative material: structured enough for developers, but flexible enough to support the visual experimentation that defines Figma’s canvas.