Add a code layer to a site
Code layers are rolling out over the next few weeks to people with a Full seat on paid plans. If you don't have access yet, hang tight; this feature will available in your account soon.
Who can use this feature
Available on all paid plans
Requires edit access to the site file
AI features must be enabled to chat with AI
Code layers are a powerful way to add interactivity to your site, whether you’re building collaboratively with AI, or writing code yourself.
There are three different ways to create a code layer, depending on what you’re looking to make:
| Method | Benefit |
|---|---|
| Add a code layer using the Make tool | Bring any idea to life by describing what you’d like to make, or writing the code yourself. Create carousels, mini-games, text effects—whatever feels right. |
| Make a code layer from an existing design | Use an existing design as the foundation for the code layer. This is useful when you have a specific design and want to explore ways to add interactivity. |
| Create a new component in Make | Create reusable code components whose instances can be placed throughout your site. When you update the component, all instances update automatically. |
Add a code layer using the Make tool
Use the Make tool in the toolbar—or use the keyboard shortcut E—to draw a code layer on the canvas or in a webpage. You can place the code layer anywhere, including inside an existing design or a webpage.
Tip: When creating a code layer directly in a webpage with multiple breakpoints, check which breakpoint you're adding it to:
- If you create it in the primary breakpoint, it is automatically added to all secondary breakpoints.
- When you create a code layer in a secondary breakpoint, it is visible only on that specific breakpoint and hidden in the others.
Make a code layer from an existing design
You can turn any design into a code layer when you want to add interactivity to it. This action converts all the layers in the design to their corresponding code representations, making it easier to build out your idea.
You can also copy out or restore the original design in place if you need.
Note: Once a design is converted to a code layer, you won’t be able to access its child layers in the layers panel any more.
- Select a design on the canvas. It can have as many child layers as you like.
- In the right sidebar, click Make code from design.
Note: It’s not possible to create a code layer from a main component, a component set, or a variant within a component set.
Copy out or restore the original design
If you still need to access the original design, select the code layer and click the More menu in the right sidebar.
- Copy out original design: Keep the code layer and create a copy of the original design with all its layers to the side.
- Restore design: Restore the original design in place. This option is useful if the design is already positioned in a webpage and you don’t want to reposition it.
Create a code component in Make
If you want to build for reusability from the start, create a code component in the Make view. You can then place instances of the component directly on the canvas wherever you want to use it in your designs.
- Click Make in the left navigation bar.
- Click Add new code component.
When you’re component is ready for use, click Add to canvas to place an instance on the canvas or in a webpage.
Why create a code component first?
Here’s an example of when a code component might be useful: Let’s say you want certain sections on your website to have a subtle gradient animation as a background—and you want the animation to look consistent wherever it is used.
By creating a component, you can dial in your animation timing and color scheme so its consistent everywhere you use it. You can then use instances of this component all over your site.
If you decide to change the component later, the changes will automatically apply to all instances on the canvas.
Tip: You can also turn a code layer into a component from the canvas by selecting it and clicking Create component.