A new canvas primitive
Code layers in Figma Sites introduce a hybrid model that merges two fundamentally different ways of thinking: the spatial, iterative nature of design and the structured, hierarchical nature of code. Traditional code lives in a filesystem tree, but that model clashes with Figma's open 2D canvas, where objects can exist anywhere. This raised practical questions early on: if a layer maps to a specific file path, where does the source of truth live, and what happens when you duplicate a code layer?
Rather than forcing a filesystem metaphor onto the canvas, we implemented code layers as a new canvas primitive. They behave like any other Figma layer—free to move, resize, reparent, and nest inside autolayout stacks. Critically, duplicating a code layer creates a fork rather than an instance, preserving Figma's experimental workflow. This lets you riff on variations side by side with a simple ⌥-drag, instead of creating git branches to compare versions.
React was the natural foundation because its component model maps directly onto Figma's. A React component mirrors a Figma component: reusable, flexible, and composable. Even better, React props translate to Figma's component properties, so you can define a prop in code and immediately control it with visual toggles, sliders, or dropdowns in the canvas.
The IDE under the hood
Code layers can be generated entirely through AI, but direct editing is essential for full control. The editing experience is built on CodeMirror, chosen for its extensible web-based architecture. We customized everything from themes and line numbers to find-and-replace, and even swapped CodeMirror's default undo/redo for a custom stack integrated with Figma's own multiplayer undo system.
Performance was a major concern from the start. Bundling and typechecking are heavy tasks, and JavaScript's single-threaded nature means they can block the UI. To keep things responsive, most of the development toolchain runs inside a Web Worker. That worker leverages esbuild—created by Figma co-founder Evan Wallace—for rapid bundling, plus Tailwind v4 with Lightning CSS for style compilation. Both tools are native code compiled to WebAssembly, offering a significant speed advantage.
Dependency management is deliberately minimal. Import anything from NPM or an ESM URL and it installs automatically; there's no need to create a package.json. Everything runs in a secure sandbox, and most popular packages—like Motion and React-Three-Fiber—work out of the box.
Multiplayer for source code
Figma's multiplayer technology syncs node fields like position and color in real time, but source code is a different beast entirely. A single file can span thousands of lines, and the simplest sync strategy—last-write-wins—quickly falls apart when multiple people (or AI models) edit concurrently.
We evaluated the classic collaborative editing algorithms. Operational Transformation (OT) handles conflicts by transforming concurrent operations, but it degrades when merging many conflicting edits. CRDTs treat each character independently, making merges easier but rebuilding the full document history in memory for every update, even when edits are purely sequential. That memory overhead hurts performance for the common case.
A paper from last year presented a middle path: the Event Graph Walker (Eg-walker) algorithm. It represents edits as a directed acyclic causal event graph and resolves them similarly to a git rebase, linearizing divergent branches. During conflict resolution, Eg-walker temporarily constructs a CRDT structure, then discards it once merging completes. For sequential, non-conflicting edits, updates are nearly free. The result combines CRDT-like merge speed with OT-like memory efficiency.
We built the code layer multiplayer service around Eg-walker. When a user edits a file, the client sends a list of edits to the server, which reconciles simultaneous changes from all active clients and returns a resolved edit list. Shifting the computationally expensive merging work to the server keeps initial load times fast and the experience smooth, even for large filesystems.
What's Next for Code and Design
Bret Victor, an influential writer, researcher, and interface designer, is known for his principle that "creators need an immediate connection to what they're creating...if you make a change, or make a decision, you need to see the effect of that immediately." This idea is guiding Figma as it expands code layers.
Code layers are just the beginning for code within Figma. The team anticipates bringing even more direct manipulation to these layers, aiming to close the gap between code and design workflows. The goal is to enable users to seamlessly switch between the two mediums depending on what they need at any given moment, rather than siloing them into separate tools.
Code layers are in beta now in Figma Sites—an all-in-one tool for designing and building custom, responsive websites, taking designs from concept to production.
