Make your site interactive with code layers | Figma Blog (opens in new tab)

Figma’s new code layers let designers add custom React-powered interactions directly within Figma Sites. They bridge the gap between static canvas designs and production-like experiences by combining AI-assisted coding, direct code editing, and reusable components. The feature is intended to make advanced interactions—such as drag-and-drop systems, animations, calculators, maps, shaders, and 3D effects—accessible without external developer support.

Customizing Existing Designs

• Code layers extend Figma Sites’ built-in responsive elements and interactions.
• Designers can convert an existing element into a code layer through the Figma Make icon in the Design panel.
• AI chat can then generate or modify behaviors such as:
  • Spinning or bouncing animations
  • Animated counters and text effects
  • Loan calculators and price estimators
  • Hover effects, ripples, and color changes
• Code layers can be duplicated with Command D to create and compare multiple interaction variations.
• Example use case: a flower shop could let visitors duplicate, drag, rotate, and layer flower images to create custom bouquets.

Creating Code Layers from Scratch

• Designers can use the Make tool or press E to draw a standalone code layer on a blank canvas.
• A modal opens for generating the layer through AI prompts or writing code directly.
• Suggested prompts and starter components—such as buttons, image galleries, and navigation menus—provide ready-made starting points.
• These components can be used as-is or customized to match an existing design.

Reusable and Extensible Components

• Code layers support customizable properties, including strings, numbers, and references to other components.
• AI can generate these properties automatically, or users can request specific controls.
• A code layer can be converted into a reusable Figma component for use across pages, projects, and team design systems.
• Designers can import npm packages such as motion and @react-three/fiber to add advanced animation, 3D rendering, and other functionality.

Code Layers Compared with Figma Make

• Figma Make is suited to building a functional app from a prompt without relying heavily on precise canvas design.
• Code layers in Figma Sites are designed for adding custom interaction and motion to an existing visual design.
• Together, the tools support both prompt-first development and design-first experimentation.

Code layers are available to all Figma Sites users, offering a practical way to prototype and publish richer web experiences directly from the Figma canvas.