Intro to Figma Sites

Figma Sites gives you everything you need to design, prototype, and publish high quality websites—all in one place.

Create beautiful responsive layouts for any device or screen size
Use the design tools you already know—like responsive components, text, and auto layout— to move seamlessly between Figma Design and Figma Sites
Bring your site to life with easy-to-use interactions and animations like marquee scrolling, custom cursors, and hover effects
Share fully interactive prototypes with collaborators to explore your ideas, test usability, and keep pushing your work forward

With code layers, code components, and embeds, you can introduce custom functionality to pages in your site, such as animations and interactive UI elements, as well as embedding outside pages.

Code in Sites is primarily managed using code layers and code components.

Code components are similar to design components. You can create reusable React components, then add instances of those components to your site. If you change the original component, all the instances will update.

Code layers are individual snippets of code that exist throughout the pages on your sites. Generally, you'll use these for one-off spots where you want interactivity or animation that you won't reuse elsewhere.

To get started:

Also see our reference documentation for information about implementing specific functions from our Figma React library: