Last week’s beta release of Code Layers introduces React-based rendering to the Figma Sites ecosystem. This layer type empowers creators to integrate sophisticated web functionality—such as API calls and custom shaders—without leaving the visual environment. These layers maintain full spatial flexibility within the canvas, supporting nesting and component overrides. To streamline the transition from static to functional, users can now auto-convert designs into code layers and leverage Figma’s integrated AI models to automate interaction logic.
Uniting the fluid world of design with the rigid structure of development required a fundamental rethink of how software is built. Figma’s canvas has always thrived on boundless exploration and rapid iteration, whereas code demands strict hierarchies and syntactical precision. To bridge this gap, we engineered a hybrid environment that preserves the "sandbox" feel of design while granting creators the raw power of a live codebase.
Realizing this vision meant overcoming three pivotal hurdles:
- Native Synergy: Embedding code-driven layers and components so they feel like a natural extension of the Figma ecosystem.
- Accessible Power: Developing a high-performance IDE that simplifies complex code customization without a steep learning curve.
- Unified Workspace: Pioneering a multiplayer experience where designers and engineers can build in tandem, in real time.
While AI offers a powerful shortcut for generating Code Layers, true creative control requires getting under the hood. To provide that level of precision, the Figma team integrated a professional-grade development environment directly into the Figma interface. Chosen CodeMirror as engine, leveraging its modular architecture to build out essential tools like custom syntax highlighting, global search, and line numbering. However, this wasn't a "plug-and-play" integration; to ensure the editor felt like a native part of the Figma experience, it bypassed CodeMirror’s standard history management, tethering it instead to Figma’s proprietary undo/redo stack for a unified workflow.
The future of code and design
Beyond simple rendering, Figma is exploring ways to make code truly bidirectional. Imagine a workspace where adjusting a slider in a design panel doesn't just change a visual property, but intelligently refactors the underlying React props in real time. This "semantic synchronization" would ensure that the source of truth isn't just a static mockup or a hidden file, but a living, breathing component that responds to both mouse clicks and keystrokes.
Currently, APIs bring code layers to life, but the next step is making that data discoverable and "pluggable" for non-developers. By creating a visual interface for complex data structures, you can empower designers to map live production data to their layouts with the same ease they currently use to swap a color variable.
Ultimately, the goal is to transform Figma from a design tool that outputs code into a unified development environment where the canvas is the code. By lowering the barrier to entry for technical implementation, we are opening the door for a new breed of "design-engineers" to build the next generation of the web, moving from concept to high-fidelity, interactive reality faster than ever before.
