Make your site interactive with code layers

There's no limit to what you can build on the web, but bringing those ideas to life often hinges on technical know-how. Taking a custom website from design to production (or prototype) means translating static designs into dynamic, responsive experiences-a process that requires working within the constraints of built-in interactions, being able to edit code directly, or passing work off to a developer.

We built code layers-interactive elements backed by custom React code-in Figma Sites to help you experiment with interaction and motion without additional technical knowledge or outside help. Whether you're creating an element from scratch or riffing on an existing design, code layers allow you to add dynamic functionality to your site-from flyouts and dropdowns to shaders and maps-by converting components to code layers, chatting with AI to build and tweak them, or editing directly in Figma's code composer. And, you can generate multiple code layer variations to compare your ideas side-by-side and experiment freely-all in the Figma canvas.

We launched Figma Sites with a number of pre-built responsive web elements and ready-made interactions-like the ability to drag objects and shuffle text-so you can easily spin up expressive designs. These features offer a jumping off point, and code layers let you customize them even further. By creating a code layer for a component, you can add dynamic behavior simply by prompting the built-in AI chat-powered by Figma Make.

For example, imagine you run a flower shop and want to give your customers the ability to design custom arrangements right from your website. With preset interactions like Draggable, you could design a way to move individual flowers across the page freely. But this feature alone wouldn't support the full scope of what you're trying to build-you'd need custom development work to create copies of flowers to drag infinitely, and to be precise on exactly how each flower is arranged.

With code layers, you could simply prompt the AI to enable copying and dragging floral components into the vase, then experiment further by playing with rotation or layering effects. A starting prompt for this interaction could read:

There are a number of ways to make a WIP design more dynamic with code layers. Here are just a few:

• Add a custom animation like spinning or bouncing to your feature cards.
• Create the perfect text effect, like a counter that highlights an important statistic in your portfolio.
• Build useful components like a working loan calculator or a price estimator for a product page.
• Add interactivity to a static image by adding hover animations like a ripple or color change.

When you're ready to experiment with code layers in an existing design:

• Open your design in Figma Sites.
• Select the element you'd like to edit and click the Figma Make icon in the Design tab of the properties panel. This will turn the element into a code layer.
• Describe the animations or effects you want in the AI chat.
• Test multiple ideas at once by duplicating a code layer using on the canvas and describe the variations you're looking for in the AI chat.

If you're not working with an existing design, you can quickly test a new idea for an interactive element by creating a standalone code layer from a blank canvas.

To get started: use the Make tool (or the shortcut ) to draw a code layer shortcut on your canvas, just like you'd draw out a frame. This will automatically open a modal that allows you to populate the frame using the AI chat or by writing code. You can even plug in this sample prompt:

If you're looking for more jumping off points, suggested AI prompts can help you define the interaction you're trying to build. You can also lean on starter components from the Make tab, like buttons, image galleries, and navigation menus-each with pre-written code-that you can drop into your site as-is or customize to fit your design.

In addition to helping you experiment and iterate with interactive elements, code layers can make future work easier by allowing you to reuse logic and patterns.

Code layers include customizable properties-strings, numbers, and references to other components-that allow you to modify the layer's behavior and appearance without editing the underlying code. These properties make it easy to adapt the code layer to different contexts. AI chat will automatically generate properties based on your prompt, and you can also request specific properties as needed.

Just like you can turn a frame into a component in Figma, you can turn a code layer into a reusable component. You can use these components across multiple pages, share patterns with your team, and implement them in future designs.

With code layers, you can import Node package manager (npm) packages like and that provide pre-built functionality for animation, 3D elements, and more.

Code layers are available today for all users in Figma Sites. We hope that by making it easier to experiment and implement interactive components on your own, you'll be able to push your designs further and take your ideas from imagination to reality.