View layers and pages in the left sidebar
This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →
Who can use this feature
Available on all plans
Anyone with can edit
access can interact with all panels in the left panel
Anyone with only can view
access can view layers and navigate between pages
Figma Design files have four distinct interactive areas: a toolbar, two panels, and a scrollable canvas. These areas allow you to access, create and adjust elements of your design.
In this article, we're going to cover the Navigation panel (left panel) which gives you access to layers and pages in your file. You can also use the left panel to view local components and access components from other libraries.
Open the Navigation panel
There are a two tabs in the Navigation panel: File and Assets. You can click to switch between each view in the panel, or use keyboard shortcuts:
Mac
- File tab: ⌥ Option 1
- Assets tab: ⌥ Option 2
Windows
- File tab: Alt 1
- Assets tab: Alt 2
Minimize or expand panels
To Minimize or Expand the left and right panels, click in the left panel, or using the keyboard shortcut Shift \.
If you select an object while the panels are minimized, the left panel remains minimized while the right panel expands so you can update the properties of the selected object. Once all objects are deselected, the right panel minimizes again.
Hide or show UI
Toggle visibility of the entire Figma UI to make more space to view designs. Find Hide/Show UI from Actions, or use the keyboard shortcut:
- Mac: ⌘ Command \
- Windows: Ctrl \
Tip: You can adjust the width of the left sidebar. This allows you to better see layer or asset names.
- 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.
Pages
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. Create and manage pages →
View layers
Any frames, groups, or objects you add to the canvas will be visible in the Layers section of the File tab. You can determine if a layer is a frame, group or a specific type of object by the icon next to it:
- Frame
- Group
- Component
- Instance
- Text
- Shape—Icon varies depending on the shape. Learn more →
- Image
- Auto layout—icon varies depending on the auto layout configuration. Learn more →
- Section
- Animated GIF or video
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 are added to the top of the list, or to the top of the group, frame, or section it is contained within. Or, just above the layer you currently have selected.
There are lots of interactions you can have
- Select layers, groups, and frames
- Adjust the z-index with layer order
- Rename layers individually or in bulk
- Toggle layer visibility
- Lock and unlock layers
Tip: You can enable or disable the Highlight layers on hover setting. Go to Menu > Preferences > Highlight layers on hover.
View components in the assets tab
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.
You can find all of your components in the Assets tab. You can drag any component from the assets view onto the canvas to create an instance of the component.
To open the assets view, click the Assets tab in the left sidebar, or use the keyboard shortcut:
- Mac: ⌥ Option 2
- Windows: Alt 2
Once you've opened the assets view, you can:
- Open the Libraries modal.
- Use the search field to find a specific component. Figma looks for components in the current file, as well as any libraries you can access.
- Open Libraries and settings to filter through available libraries, and to switch between Grid and List views.
- Browse through All libraries that are enabled in the file. If available, look through Local assets to view components created in the current file.
Note: Figma groups components in the assets view by heading. If you have many components, Figma will present them as a path: file > page > frame
- Explore a file, page, or frame by clicking on the arrow to expand it
- Figma lists enabled team or organization libraries and enabled UI kits in the assets view
- Create an instance by dragging a component from the assets view on to the canvas
Learn how to insert components from the assets tab →
Libraries
Libraries allow you to publish styles, components, and variables from your files as a library. You can then apply styles and variables, or create instances of your components across files. Get started with libraries →
To access your libraries from the assets view panel, click Libraries to open the libraries modal.
Who can use this feature
Available on all plans
Anyone with can edit
access can interact with all panels in the left sidebar
Anyone with only can view
access can view layers and navigate between pages
Figma Design files have four distinct interactive areas: a toolbar, two sidebars, and a scrollable canvas. These areas allow you to access, create and adjust elements of your design.
In this article, we're going to cover the left sidebar which gives you access to layers and pages in your file. You can also use the left sidebar to view local components and access components from other libraries.
Open the left sidebar
There are three headings in the left sidebar: Layers, Assets, and Pages. Use these headings to switch between each panel in the sidebar. You can also use keyboard shortcuts:
Mac
- Layers panel and Pages: ⌥ Option 1
- Assets panel: ⌥ Option 2
Windows
- Layers panel and Pages: Alt 1
- Assets panel: Alt 2
Toggle layers panel
Toggle visibility of the left sidebar 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.
Tip: You can adjust the width of the left sidebar. This allows you to better see layer or asset names.
- 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.
View layers
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:
- Frame
- Group
- Component
- Instance
- Text
- Shape—Icon varies depending on the shape. Learn more →
- Image
- Auto layout—Icon varies depending on the auto layout configuration. Learn more →
- Section
- Animated GIF or video
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.
If your layers are inside a section, the section will always be the parent-level layer.
There are lots of interactions you can have
- Select layers, groups and frames
- Adjust the z-index with layer order
- Rename layers individually or in bulk
- Toggle layer visibility
- Lock and unlock layers
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
View components in the assets panel
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:
-
1 Use the Search field to find a specific component. Figma looks for components in the current file, as well as any libraries you can access.
-
2 Open the Library modal
-
3 Switch between a Grid and List view of components
-
4 Use the dropdown to filter between libraries
-
5 View Local components that were created in the current file
-
6 Explore any enabled libraries
Note: Figma groups components in the Assets panel by heading. If you have many components, Figma will 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
- Figma lists enabled team or organization libraries in the Assets panel
- Create an instance by dragging a component from the Assets panel to the canvas
Learn how to insert components from the assets panel →
Libraries
Libraries allow you to publish styles, components, and variables from your files as a library. You can then apply styles and variables, or create instances of your components across files. Get started with libraries →
To access your libraries from the Assets panel, click to open the Library modal.
Pages
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. Create and manage pages →