figmaJun 24, 2025

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.

code-editorreactmultiplayer-collaborationcodemirror+2

figmaSep 18, 2024

The VS Code Method: Tightening a developer’s inner loop | Figma Blog (opens in new tab)

The post argues that developers are most productive when they can sustain the “inner loop”: writing, compiling, debugging, and iterating without disruptive context switching. VS Code’s approach is to bring more outer-loop activities—collaboration, project management, design inspection, and AI assistance—into the editor. The result is not only faster development, but better code quality, greater energy, and improved developer satisfaction. ## The Inner Loop and Flow - The inner loop is the repeated cycle of writing code, compiling, debugging, and continuing in the code editor. - The outer loop includes activities outside the editor, such as: - Checking bug trackers - Updating tickets - Responding in Slack or Teams - Reviewing documentation - Switching between projects and terminals - Staying in the inner loop builds “inertia,” increasing speed and productivity over time. - Interruptions also cause developers to lose mentally loaded context, including edge cases and future plans for the code. ## Reducing Distractions in VS Code - VS Code uses features and extensions to help developers remain focused inside the editor. - Zen Mode hides interface elements and creates a distraction-free workspace. - Even small UI changes, such as collapsing a sidebar, can interrupt concentration as the brain recalibrates. - Developers can customize VS Code with extensions that match their preferred workflows. ## Bringing Outer-Loop Work into the Editor - The broader goal is to move as many tasks as possible into the developer’s existing workflow. - Integrations can reduce switching between: - VS Code and GitHub - Code and project-management tools - Development tools and design platforms - The Figma for VS Code extension lets developers access and inspect designs without leaving the editor. - AI tools such as GitHub Copilot provide proactive, non-intrusive code suggestions. - GitHub reports that Copilot increases coding speed by 55%, while 75% of AI-using developers report greater fulfillment. ## Collaboration Without Breaking Focus - Collaboration is essential but often disruptive when it requires meetings or prolonged chat exchanges. - VS Code integrates GitHub features so developers can manage issues, review code, and submit pull requests from the editor. - The ideal collaboration model lets multiple people remain in their own inner loops rather than requiring constant synchronous interaction. - Direct comments and embedded collaboration can preserve focus while keeping teams connected. ## A More Connected Developer Workflow The VS Code team envisions an inner loop that eventually includes all the tools developers need. Until then, teams should prioritize integrations that eliminate unnecessary switching and tedious manual work. Keeping developers in flow improves productivity, code quality, energy, and overall happiness.

code-editorfigmagen-aigithub+3