What are design files?

Design files give you the tools you need to create, share, and add prototypes to your designs. You can create individual files to explore solutions to specific problems, or use a single file to manage the entire design process.

Tour the Figma Design editor

The Figma Design editor consists of four main areas: the toolbar, the left and right sidebars, and the canvas.

The toolbar

The toolbar is where you’ll find tools that let you move around the canvas, create layers like frames, shapes, and text, and leave comments for collaborators.

The left sidebar (navigation panel)

The left sidebar, also called the navigation panel, gives you access to the layers, pages, and components in your file, as well as the Main menu and the File menu. Use the Main menu to access your preferences and other settings and the File menu for file-specific actions such as renaming the file, moving it to a different project, or viewing the version history.

It’s a good idea to give your files a descriptive name so they’re easier to find in the future. To rename a file, select Rename from the File menu or double-click on the file name in the left sidebar and enter a new name.

The left sidebar has two tabs: File and Assets. The File tab gives you access to the pages and layers in your file. Use the Pages section to move between pages or add new ones. The Layers section displays every layer on the canvas, allowing you to quickly rename, reorder, view the layer hierarchy.

The Assets tab provides access to your components. Components are reusable design elements and a powerful feature in Figma Design. We’ll learn more about components and create a few of our own in an upcoming lesson.

The right sidebar (properties panel)

The right sidebar, also called the properties panel, is where you can access information about your designs.

The right sidebar has two tabs: Design and Prototype. The Design tab lets you view, add, remove, or change object properties within your design. If you don’t have anything selected, you can change the background color of the canvas or export all the content on your current page.

You can also access your local styles and variables, and the export settings from the right sidebar. We won’t cover these features in this course, but you can check out our Help Center for more information.

When you select a layer, you can view and modify the layer’s properties using the settings in the right sidebar. The type of layer you select determines which property settings you’ll see.

Next to the Design tab is the Prototype tab. This is where you’ll add prototype connections when you’re ready to make your designs interactive. We’ll learn more about prototyping later in the course.

The canvas

The canvas is where you’ll create, refine, and organize your designs.

To move around the canvas, hold Space while clicking and dragging your cursor. Or, slide two fingers on your trackpad in any direction. You can also press H to enable the Hand tool, which lets you move around the canvas without selecting anything.

To zoom in or out, pinch two fingers together or stretch them apart on your trackpad. You can also hold down ⌘ Command Space (Mac) or Ctrl Space (Windows) and scroll up and down on your mouse.

Add some pages to your file

The canvas gives you a ton of room to create and explore different ideas, so you don't need to worry about running out of space. To prevent clutter, we can add some pages to help keep things organized.

Use pages to track each stage of the design process, explore different layouts, store components, keep a scratchpad of ideas for inspiration, or archive older designs.

To add some pages to your file:

1. Click the plus next to Pages and add two additional pages.
2. Double-click on the first page name and rename it to Explorations. We’ll use this page as our design playground as we build out the elements of our portfolio.
3. Name the second page Designs. This is where we’ll put our final designs together.
4. Name the third page Components. We’ll use this to organize our main components as we build them throughout the course.

Check your knowledge