Code layers: bringing custom React interactions to Figma Sites

Figma has announced code layers, a new feature for Figma Sites that lets you build custom interactions without leaving the design canvas. Code layers are interactive elements powered by custom React code, designed to help you experiment with motion and dynamic behavior even if you don't have a development background.

The feature is aimed at closing the gap between static design and functional web interaction. With code layers, you can add everything from flyouts and dropdowns to shaders and maps by converting existing components, using AI chat to generate code from a prompt, or editing code directly in Figma's code composer. You can also create multiple variants of a code layer to compare ideas side-by-side.

When to reach for code layers vs. Figma Make

Figma Make remains the right choice when you want to build a functional app entirely from a prompt and don't need precise canvas-based design. Code layers in Figma Sites are better suited for projects where you're adding interactivity to an existing website design and prefer to design visually first, bringing in custom interactivity or motion as a layer on top.

Adding dynamic behavior to existing designs

Figma Sites already shipped with a set of pre-built responsive elements and interactions, such as drag-and-drop and text shuffle. Code layers extend those built-in affordances. You can create a code layer for a component and then describe the behavior you want in the built-in AI chat, which is powered by Figma Make.

For instance, a flower shop that wants to let customers drag flowers into a vase to arrange a bouquet can go beyond the preset Draggable interaction. Instead of being limited to moving a single flower image, you could prompt the AI to enable copying and dragging a flower into position, as many times as needed. A starting prompt might read:

I want to create a DIY floral bouquet arrangement. I want to be able to drag and drop a copy of each flower, as many times as I want, anywhere on the canvas. The copy of the flowers should be the exact same size as the original flower image.

Common use cases for existing designs include custom animations like spinning or bouncing on feature cards, text effects such as a counter that highlights a statistic, functional components like a loan calculator or price estimator, and hover animations like ripples or color changes on static images.

Working with code layers on your canvas

To convert an existing element into a code layer, open your design in Figma Sites, select the element, and click the Figma Make icon in the Design tab of the properties panel. From there, describe the animations or effects you want in the AI chat. To test variations, duplicate the code layer using Command D and describe a different effect for each copy.

If you're starting from a blank canvas, use the Make tool or the E shortcut to draw out a code layer as you would a frame. This opens a modal where you can populate the code layer using AI chat or by writing code directly. A sample prompt is Create floral confetti that spans the width of the layer using flower emojis. For more jumping-off points, Figma offers suggested prompts in the Make tab, plus starter components like buttons, image galleries, and navigation menus that ship with pre-written code ready to drop into a site.

Reusability and extensibility

Code layers are designed to carry forward into future work. Each code layer exposes customizable properties—strings, numbers, and references to other components—that let you adjust behavior and appearance without touching the underlying code. The AI chat generates properties automatically from your prompt, but you can also request specific ones.

Like frames, code layers can be turned into reusable components. Those components can be shared across pages, used by teammates, and carried into future designs. Code layers also support importing packages from the Node package manager (npm), including motion for animation and @react-three/fiber for 3D rendering, so you can lean on pre-built functionality rather than writing everything yourself.

Code layers are available today for all Figma Sites users.