Layers Panel

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 this in our Properties Panel article.
  • 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.

There are three heading at the top the Layers Panel. You can use these to switch between the following tabs:

  1. Layers Panel
  2. Assets Panel
  3. Pages List

Or, you can use the Keyboard Shortcuts:

macOS

  • Layers Panel and Page List: [Option] + [1]
  • Assets Panel: [Option] + [2]

Windows

  • Layers Panel and Page List: [Alt] + [1]
  • Assets Panel: [Alt] + [2]

Tip! You can toggle visibility of the Layers Panel using the Keyboard Shortcut:

  • macOS: [⌘] + [Shift] +  [ \ ]
  • Windows: [Alt] + [1] + [2] + [4]


You can also toggle the visibility of the entire Figma UI by using the "Show/Hide UI" Keyboard Shortcut:

  • macOS: [⌘] + [ \ ]
  • Windows: [Ctrl] + [ \ ]

This allows you to view your designs in the canvas, without the Figma UI.

Layers Panel

Any Frames, Groups or Objects you add to the canvas will be visible in the Layers Panel. 

New Layers will be added to the top of the list, or the top of the Group or Frame it is within.

The Layers Panel nests any child objects within their parent Group or Frame. You can click the arrow next to the Frame or Group to view any nested Layers:

You can determine if a Layer is a Frame, Group or Object by the icon next to it: 

Tip! You can adjust the width of the Layers Panel:

  1. Hover your cursor over the right-edge of the sidebar. A bidirectional arrow will appear.
  2. Click and drag to adjust the width of the panel.
  3. Release to set the sidebar width.

Selecting Layers

You can click on a Layer in the Layers Panel to select it.

A selected Layer will show up as blue in the Layers Panel. We will also show a blue bounding box around the Later in the canvas.

You can also highlight a Layer in the canvas by hovering over the Layer in the Layers Panel.

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

Reordering Layers

You can change the order that Layers appear in the Layer Panel.

This allows you to move specific Layers to the front or back of the canvas, as well as move Layers in or out of a Group or Frame.

Adjusting a Layer in the Layers panel won't affect its position on the canvas. It may change how you can see, select or Group the Layer in the canvas.

You can reorder your Layers in a couple of ways:

From the Context Menu:

  1. Select the Layer(s) in the canvas.
  2. Right-click on the Layer to open the Context menu:
  3. You can then choose to:
    • Bring Forward macOS: ⌘ + ] | Windows: Ctrl + ]
    • Bring to Front macOS: ⌘ + ⌥ + ] | Windows: Ctrl + Shift + ]
    • Send Backward macOS: ⌘ + [ | Windows: Ctrl + [
    • Send to Back macOS: ⌘ + ⌥ + [ | Windows: Ctrl + Shift + [

From the Layers Panel:

Click and drag the Layer to change its position in the hierarchy.

  • Moving the Layer towards the top of the list will bring the Layer to the front of the canvas.
  • Moving the Layer further down the list will push the Layer behind those layers in the canvas.

Tip! If you make a change you're unhappy with, you can Undo the action using the Keyboard Shortcut:

  • macOS: [⌘] + [Z]
  • Windows: [Ctrl] + [Z]

Toggling Layer Visibility

You can toggle a Layer's visibility in the Layers Panel. You can still change the position, or adjust the properties of a hidden layer.

You can toggle a Layer's visibility via the Layers Panel:

  1. Hover over the Layer in the Layers Panel until both an eye and a padlock icon appear:
  2. Click on the eye icon to toggle the Layer off: 
  3. The Layer will no longer be visible in the canvas. It will also appear as inactive in the Layers Panel.
  4. To make a Layer visible again, click the closed eye icon: 

Tip! You can also use the Keyboard shortcuts:

  • macOS: [⌘] + [Shift] + [H]
  • Windows: [Ctrl] + [Shift] + [H]

Locking Layers

You can lock Layers to protect them from accidental edits.

When you lock a Layer, you will not be able to interact with it, or move it around in the canvas. It's still possible to change the Properties of a locked layer in the Properties Panel.

If you lock a Frame or Group, then any child Layers of that Frame or Group will also be locked. You will have the option to unlock any child Layers individually.

You can lock or unlock a Layer in a few different ways:

By using the Keyboard shortcuts:

  • macOS: [⌘] + [Shift] + [L]
  • Windows: [Ctrl] + [Shift] + [L]

By right-clicking on the Layer and choosing Lock/Unlock:

<Image: Lock/Unlock Context menu>

From the Layers Panel:

  1. Hover over the Layer in the Layers Panel until the padlock icon appears:
  2. Click the padlock to lock the Layer:
  3. If this is a Frame or Group, then any children of that Frame/Group will also be locked.  You can click the dot next to the child Layer to unlock them individually: 
  4. You will no longer be able to edit the Layer in the canvas.
  5. To unlock the Layer, click on the padlock again: 

Tip! You can toggle Layer Visibility and Locking for multiple Layers at once.

Click on the eye/padlock icon and drag across the Layers you want to update.

Assets Panel

There are often aspects of your design that you can reuse. This could be a button or an icon, or more complex UI elements like navigation menus or status bars.

You can create Components of these elements, which you can reuse across your designs. Any changes you make to a Master Component will be available to any related Instances.

You can view all your Components from the Assets Panel:

This brings together Components from the current File, and any Files or Libraries you have access to.

You can open the Assets Panel by clicking on the Assets heading in the Layers Panel. Or, by using the Keyboard Shortcut:

  • MacOS: [Option] + [2]
  • Windows: [Alt] + [2]

Find Components

You can use the Search field to find a suitable Component: 

This looks for Components in the current File, as well as any Libraries you have access to.

You can then drag Components from the Assets Panel, on to the canvas.

Components in the Assets Panel are in the following order:

  1. Components you have created in the current File.
  2. Components that are Private to the File. This includes any Components in this File that aren't published to a Team Library.
  3. Components from other Files that you have used in the current File.
  4. Components from any enabled Team Libraries.

Tip! You can switch between Grid and List view using the view icons: 

Team Library

If you are in a Professional Team, you can also access the Team Library from the Assets Panel: 

The 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.

Learn more about the Team Library in our Using the Team Library article.

Pages

Pages allow you to create separate canvases within a single File.

There is no limit to how many Pages you can add to your File. If you're expanding beyond the original purpose of your File - or your File is getting large - you may want to consider a new File instead.

Pages are great for:

  • Storing Components and Styles related to the File
  • Testing iterations of your designs
  • Keeping versions of a design separate
  • Designing for different web or mobile platforms
  • Creating different Prototypes of your designs.

Tip! You can create more than one Prototype within a File by creating them on separate Pages. Learn more about creating Prototypes in our Getting Started with Prototyping article.

Navigating the Page List

You can find the name of the current Page at the top of the Layer's Panel.

To open the Page list, click on the arrow next to the current Page name:

This will open the Layers Panel where you can view a list of Pages in that File.

You can then:

  • Click the + icon to add a new Page to your File: 
  • Click and drag Pages to change the order: 
  • Double-click on a Page to change the name: 
  • Right-click on a Page to open the Page menu. This will give you the option to:
    • Duplicate the Page
    • Delete the Page
    • Rename the Page
    • Create a New Page

  • Click on the arrow next to the current Page to collapse or expand the Page list:

Move Layers between Pages

You can move Layers between Pages. This is handy when you want to break up a large File. This also allows you to keep any Comments associated with those Layers intact.

  1. Select an Object, Frame or Group in the canvas or Layers Panel.
  2. Right-click to open the Context menu: 
  3. Select Move to Page at the top of the menu:
  4. Select the Page you'd like to move it to:
  5. The Object, Frame or Group will move to the same coordinates on the new Page.

Glossary

  • Objects are individual elements that you add to the canvas. These can be Shapes, Vector Networks, Text objects or an Image.
  • Groups are collections of objects. They allow you to move and position objects as if they were a single layer. A Group takes on the combined dimensions of the Objects contained within them. Groups don't have any properties of their own. Any Properties you apply to a Group, will apply to the individual objects instead.
  • Like Groups, Frames are also collections of Objects. But Frames function more like Artboards, than Groups. They allow you to control the position, alignment and constraints of an Object. You can nest Frames within other Frames. Learn more about when to use Groups or Frames in our Groups and Frames article.
  • Child and Parent are terms that are usually used in web development. We use these terms to explain the relationship between a Frame (parent) and any Objects within it (children). A child's Constraints and alignment will always be in relation to its parent.
  • Components are UI elements that you can reuse across your designs. This could be a button, navigation menu, gallery, or layout. To reuse a Component you can create an Instance. Learn more about Components.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.