Skip to main content

Code layers, components, and instances

Code components and code layers are the two methods for adding custom code to pages in your site.

Code layers are individual objects that exist on the canvas of the Figma Sites editor. Like other layers in your site, they can be applied to all of a page's breakpoints simultaneously, or only a single breakpoint. You can copy and paste code layers to apply them in different places.

Generally, you'll use code layers where you need individual areas of functionality or animation, such as a single instance of animated text or an interactive chart. If you want to reuse the code in multiple places, a code component may be more useful.

Code components are high-level React components that are designed to be reused multiple times in your site. For example, suppose you want to animate text in a consistent way, such as a typewriter effect, but you don't want the same string on each of your pages. You'd create a code component with a text content property, insert instances of that component on the desired pages, and then change the text property for each instance.

Code components function similarly to design components. After you create a code component, you’ll add instances of the code component to the canvas where you want to use it. Instances of code components are a type of code layer. In the same way that changes to a design component are inherited by instances of that component, instances inherit changes to the code component. Also similarly, you can change the props of an instance or a component without detaching the instance. You can also detach component instances. A detached component instance becomes an individual code layer.

When you have multiple React components in a code component, that code component is represented as a code file with a .tsx extension. Other than containing multiple React components and featuring the extension, there are no functional differences between a code file and a code component. You can add instances of each React component in a code file to a canvas in the same way you do instances of code components.

To learn more about working with code in Figma Sites: