The Layers Panel, on the left-hand side of the Canvas, is a hierarchical list of all of the frames, groups, and layers you have added to your file. When you open a file in Figma the layers tab is highlighted by default. 

Anything you add to the canvas will appear in the layers panel. 

Overview

There are a number of things you can do with layers on your canvas. Here are a few:

Reordering Layers

You can click and drag layers up or down in the list as well as in or out of frames and groups. 

  • Dragging a layer up moves it to the front of the canvas
  • Dragging it down pushes it to the back

Locking and Visibility

Hover over a layer’s name and an eye and a lock appear. 

  • Click the eye to toggle on/off the layer's visibility, 
  • Select the lock to lock a layer in place

Hiding the Layers Panel

Use the Shift + Command + \  shortcut to hide and reveal the layers panel. 

Adjusting the Width of the Layers Panel

Adjust the width by hovering your cursor over the line between the panel and the canvas to reveal the bidirectional arrow. 

Highlighting Layers

By default, a menu setting called Highlight Layers on Hover is enabled. You can deselect that if you prefer.

Pages

At the top of the layers panel you'll see Page 1. Just like a spreadsheet in Google Sheets is a single file that can have multiple tabs across the bottom, each Figma file can have multiple pages. 

This allows you to:

  • Store your local Components on a specific page, or
  • Use a specific page of the file for testing some preliminary ideas, or
  • Have specific pages for each screen you're designing

Breaking up particularly large files into several pages can help with overall performance as well. 

In the example image below we have a single file called "Music App". There are three specific pages for "Play Screen", "Stop Screen" and "Icons".

Click New Page to add as many pages as you need to your files.

  • If you click to select a Page all your pages will collapse when you mouse away from the layers panel
  • If you haven't clicked on a Page your pages will collapse when you click on the canvas

If you prefer to see all the pages you have in a given file, right click on any page and select Keep Pages Panel Open.

Move to Page

Easily move elements between pages with the steps below:

  1. Drag select objects on your canvas
  2. Right click to open the context menu
  3. Choose Move to Page
  4. Select the proper page 

Pages and Prototypes

It's possible to create a prototype in each Page in your file. When you click Play in the upper right corner of the toolbar, the presentation will open in a separate window. You can share this unique URL to the prototype in this page of the file. 

You can also share a specific page of the design via the Share button:

  1. Select the Page
  2. Click the Share button
  3. Invite someone and give them view or edit permissions
  4. Select the box for Link to selected page

Be sure to read "Introducing: Figma Pages" on our blog to learn more about this feature.

At the bottom of the layers panel you'll notice a couple additional tabs:

  1. Components Tab
  2. Team Library Tab

Components Tab

Any local components you create in a file can be found in the components tab. 

Team Library Tab

If you are paying for a Professional Team, you have access to the Team Library feature. When you're ready, you can publish your local components to the team library. 

This means that other team members can use instances of those components in their files as well. When the master components update, notifications are sent alerting others who are using instances of these components.

They can review and accept the changes and their instances will update accordingly.  

To learn more about these tabs, check out our "Team Library" article and watch this video

You will only see these tabs if you are part of a Team in Figma. If you are an individual user, these will not appear. Check out our pricing page and Pricing FAQ for additional details about upgrading to a Starter or Professional Team. 

Did this answer your question?