Figma is rolling out code layers for interactive design
Figma introduces code layers — a powerful new feature in Figma Sites that enables designers to create fully interactive elements for websites directly within the Figma interface. This feature is designed to bridge the gap between design and development, allowing users to build dynamic, production-ready experiences without requiring deep coding knowledge or external developer support.
Code layers are interactive elements that allow users to insert code into Figma designs. This feature offers full customization through a built-in AI-powered chat and a code editor. The AI can generate or refine code based on user prompts, while the editor gives users the flexibility to write and adjust code using React, TypeScript, and Tailwind. With dynamic properties, users can easily adjust a layer’s behavior without having to modify the underlying code.
Figma Sites already provides pre-built components, such as draggable objects and animated text. However, code layers take things a step further. Designers can start with a basic element, convert it into a code layer, and use AI to enhance its behavior.
What can be built with code layers?
Designers can animate feature cards — making them bounce, spin, or respond playfully to user interaction — and add real-time stats and progress bars to dynamically display data.
Code layers also make it possible to create tools like loan calculators or product price estimators, as well as interactive UI elements such as draggable lists and sortable components. They can be used to add polished visual touches like ripple hover effects, smooth color fades, or even complex shader-based visuals for a high-end look
GIF: Figma
GIF: Figma
Each code layer can include editable properties, making it highly flexible and reusable. The AI chat will suggest properties based on user intent, or users can define them manually. It’s also possible to generate multiple versions of a code layer, compare them side by side, and experiment freely.
Code layers are rolling out this week to Full seat users on paid plans.