Code layers add custom functionality to your site, enabling you to explore ideas, experiment, and enhance your designs using the power of code.

Like frames and shapes, code layers are another type of layer you can add to the canvas in Figma Sites. What makes code layers unique is how you edit content inside the layer. When you edit a code layer, you can either describe what you’d like to create with AI, or write React code yourself. Or both!

People use code layers to:

Create new site elements entirely in code

Create custom interactions

Key features

Chat with AI, or write your own code

In the code composer, you can describe what you want to make, refine it, or even roll back to previous versions. If you’d prefer to work with the code directly, use React, Typescript, and Tailwind CSS to bring your idea to life.

Learn more about working with code in Figma’s developer documentation.

Use existing designs or start from scratch

You can convert an existing design to a code layer to add interactivity and expressiveness to it. Or, you can create a new code layer on the canvas and start describing your vision without any reference designs.

Learn more about creating code layers from existing designs.

Turn code layers into components and instances

Like other layers, code layers can be turned into reusable components. You can then insert instances of the same component on the canvas.

For example, imagine you want to show live stock prices for different companies on your website. You want each of them to look the same, have the same functionality, but for different stocks.

You can create one stock ticker component, then place many instances of that component in your site.