Use design tools in Figma Sites

Figma Sites lets you create and publish websites using the same powerful tools found in Figma Design.

Create designs in Figma Sites

When working in Figma Sites, you can design directly inside a webpage or use the canvas as a space to explore ideas.

1. Create design elements. Just like you would in a design file, start by adding frames, shapes, text—or any design elements—to the file.
2. Make them responsive. Use auto layout and constraints to make your site adapt to different screen sizes.
3. Reuse design elements. Keep your site consistent by creating components, styles, or variables—or by using existing assets from a library.
4. Publish a library. Share components, styles, or variables so people can access them in other files.
5. Add interactivity. Like prototyping in Figma Design, use interactions to add movement and animations to design elements.

Once you’ve added designs into a webpage, you can preview and publish it—no coding required.

What happens when I copy and paste between Figma Design and Sites?

In general, moving your work back and forth between Figma Design and Figma Sites should be a smooth and quirk-free experience.

Designs appear exactly the same across both products—and more complex features are automatically translated between them. For example, prototyping connections in Figma Design are automatically converted to their corresponding interactions in Figma Sites.

Learn more about moving between the two products.

Supported tools between Figma Design and Figma Sites

When designing in Figma Sites, you’ll have access to most of the features found in Figma Design. You can find documentation for how to use each feature at the links below.

Design tools

Collaboration tools

Design systems and publishing

Supported properties between Figma Design and Figma Sites