# Canvas, meet code: Building Figma's code layers

DevFeed: [Canvas, meet code: Building Figma's code layers](<https://devfeed.tech/articles/canvas-meet-code-building-figma-s-code-layers-9558.md>)

Original publisher: [Read original article](<https://www.figma.com/blog/building-figmas-code-layers/>)

Author: Darragh Burke; Alex Kern

Published: 2025-06-25T00:00:00Z

Content type: article

Language: en

Sources: [Figma Blog](<https://devfeed.tech/sources/figma-blog.md>)

Topics: [Figma](<https://devfeed.tech/topics/figma.md>), [Code](<https://devfeed.tech/topics/code.md>), [ide](<https://devfeed.tech/topics/ide.md>), [Software Engineering](<https://devfeed.tech/topics/software-engineering.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [collaboration](<https://devfeed.tech/tags/collaboration.md>), [components](<https://devfeed.tech/tags/components.md>), [design](<https://devfeed.tech/tags/design.md>), [figma](<https://devfeed.tech/tags/figma.md>), [filesystem](<https://devfeed.tech/tags/filesystem.md>), [ide](<https://devfeed.tech/tags/ide.md>)

## AI overview

Figma describes how it built code layers, a hybrid canvas primitive that brings design and code together in Figma Sites. The article explains the challenges of reconciling Figma's spatial, exploratory canvas with code's hierarchical filesystem model, while supporting code customization and multiplayer collaboration.

## Source excerpt

What if you could design and build on the same canvas? Here's how we created code layers to bring design and code together.