Figma Sites collection: Use Design tools in Figma Sites

Toolbar in Figma Sites

In the previous lesson, we learned how to copy designs from Figma Design and paste them into Figma Sites so you don't need to start from zero. Of course, you can also start from scratch and design directly in Figma Sites.

The toolbar at the bottom of the canvas is where you can add new webpages and use other tools you may be familiar with if you’ve used Figma Design. You’ll find:

• Region tools like frames, sections, and webpages
• Shape tools to create vector shapes
• The pen tool to draw custom vector paths, icons, and illustrations
• The image tool, to add images and videos to your website
• The text tool to add text layers
• The comment tool for when you’re collaborating with a team
• And the actions menu, which is where you can find handy actions and AI-powered features to speed up your workflows

Learn how to design webpages with Figma Design for beginners

Creating beautiful website designs is a skill that takes time to develop, and is a constant journey filled with learning that can take time to master. That’s why we recommend building in Figma Sites with templates and blocks.

We’re not going to teach you the skills you need to create amazing designs in this short lesson, but if you’re curious how to create a website design from scratch, check out the Figma Design for beginners course for everything you need to know.

Design workflow tip

We recommend designing each section of your webpage on the canvas, then dropping it into the relevant breakpoint when you’re ready. You can think of this like building your own blocks and adding them to the primary breakpoint like we did with inserts earlier.

Here’s a quick example:

1. Create a webpage with a Desktop and Mobile breakpoint (a new, blank Figma Sites file will already have these two breakpoints).
2. Apply auto layout to your breakpoints by selecting the primary breakpoint, and choose the vertical layout from the right sidebar. We recommend choosing vertical layout since most websites are experienced from top to bottom.
3. Now create a frame on the canvas, just make sure it has a smaller width than your primary breakpoint.
4. Add a color fill to the frame, choose any color other than white.
5. Now drag that frame into the breakpoint.
6. The frame will not stretch to fill the full width of the breakpoints automatically.
7. To fix this, select the frame and set the width to Fill container. This setting ensures each section will always span the full width of the breakpoint, which is ideal when designing for different screen sizes.

Check your knowledge

Up next: Add interactions to a website

In the next lesson, we'll learn about adding interactions to your websites in Figma Sites. If you're familiar with interactions in Figma Design, you'll be excited to learn about some new interactions unique to Figma Sites. We'll see you there!