Skip to main content

Create your first code layer

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.

This page describes a quick way to get started with a code layer. For a detailed explanation of creating code components and layers in Figma Sites, check out our Help Center.

To create your first code layer:

  1. In the toolbar of your Figma Sites file, click Make.

  2. On the canvas, click where you want to place the code layer. If you add the layer to your primary breakpoint, it'll also be added to the other breakpoints for the page. The composer window, where you can chat with the AI and edit the code, appears.

  3. In the composer window, prompt the AI by describing the animation or interactive UI element that you want to generate. If preferred, you can alternatively click the Code tab and directly edit the React code there. For example:

    Create a typewriter animation with the text "Welcome to my site"

  4. Iterate in the AI chat to improve the result. For example:

    Add props to let me control the text string, text size, color (hex), and font weight

  5. Optionally, apply variables to the props for your code layer. For example, following the previous example, you can apply a string variable to the prop that controls the content of the layer, and number variables to the props that control text size and font weight.

You can preview the code layer directly in the composer window. When you're ready to preview the code layer in the context of your whole site, at the top of the right sidebar of the main canvas, click Full preview.

For best practices and examples of working with code layers, such as how to get the model to define editable props for you, check out How to write great prompts.