Before you start
Who can use this feature
Users on any team or plan.
Users with can edit access can interact with all aspects of the Layers panel
Users with can view access can only view the Layer list
When you're in the Editor, you will see a sidebar on each side of the canvas. Along with the toolbar, these sidebars make up the Figma UI.
The Figma UI allows you to access, create and adjust elements of your design.
- The sidebar on the Right allows you to view and adjust the properties of any object. You can also access the file's prototype settings and view the code of any selected object(s). We refer to this as the Properties panel. You can learn more about the Properties panel.
- The sidebar on the Left gives you access to the layers, assets and pages included in your file. We call this the Layers panel.
In this article, we're going to get you up to speed using the sidebar on the left: the Layers panel.
Open the Layers panel
There are three heading at the top the Layers panel. You can use these to switch between each tab, or use the keyboard shortcuts:
- Layers panel and Page List: ⌥ Option - 1
- Assets panel: ⌥ Option - 2
- Layers panel and Page List: Alt + 1
- Assets panel: Alt + 2
Tip! You can toggle visibility of the Layers panel using the keyboard shortcut:
- Mac: ⌘ Command - Shift - \
- Windows: Ctrl + Shift + \
You can also toggle the visibility of the entire Figma UI by using the Show/Hide UI keyboard shortcut:
- Mac: ⌘ Command - \
- Windows: Ctrl + \
This allows you to view your designs in the canvas, without the Figma UI.
Any Frames, Groups or Objects you add to the canvas will be visible in the Layers panel. You can determine if a Layer is a Frame, Group or a specific type of Object by the icon next to it:
Figma nests any child objects within their parent Group or Frame. This allows you to collapse and expand layers within a group or Frame.
New Layers will be added to the top of the list, or the top of the Group or Frame it is contained within. Or, just above the layer you currently have selected.
There are lots of interactions you can have in the Layers panel:
- Select layers, groups and Frames
- Adjust the z-index with layer order
- Rename layers
- Toggle layer visibility
- Lock and unlock layers
Tip! You can adjust the width of the Layers panel:
- Hover your cursor over the right-edge of the sidebar. A bidirectional arrow will appear.
- Click and drag to adjust the width of the panel.
- Release to set the sidebar width.
Tip! You can enable or disable the Highlight Layers on Hover setting. Search for Highlight in the menu. Or head to Menu > Preferences > Highlight Layers on Hover
Components are aspects of your designs that you can reuse. These could be buttons or icons, or more complex UI elements like navigation menus or status bars.
The Assets panel is where you can find all of your Components. You can drag any Component from the Assets panel into the canvas to create an Instance.
To open the Assets panel, click on the Assets heading in the Layers panel.
Or, use the keyboard shortcut:
- Mac: ⌥ Option - 2
- Windows: Alt + 2
Once you've opened the Assets panel, you can:
- Use the Search field to find a specific Component. We look for Components in the current file, as well as any Libraries you have access to.
- Switch between a Grid and List view of Components
- Open the Team Library modal
- View Local Components that were created in the current file
- View Components that are Private to this file
- View Components that are Used in the file
- Explore Enabled Libraries
Note: We group Components in the Assets panel by heading. If you have many Components, we present them as a path: file > page > Frame
- Explore a file, page or Frame by clicking on the arrow to expand it
- Collapse each heading to create more space in the Assets panel
- We list enabled Team Libraries in the Assets panel
- Create a Component Instance by dragging a Component from the Assets panel over the canvas
Team Library allows you to publish Components from your files to your Library. You can then create Instances of your Components and use these in other files.
If you are in a Professional Team, you can also access the Team Library from the Assets panel. Click the icon to open the Library modal.
Learn more in our Getting started with Team Library article.
Within a file, you can create as many Pages as you need.
Each page has its own Canvas, where you can explore and iterate on your designs. You can even create separate Prototypes on each page.
Learn more about using pages in our Create and manage pages article.