You’re only halfway through the Figma tour, and you’ve already designed low-fidelity wireframes. Groovy! Before making our designs higher fidelity, we need to make an important stop: the layers panel.
The layers panel is located on the left side of the editor. It shows a dynamic list of everything that is currently on the canvas. This list is divided into frames and layers. If a layer is on the canvas, but not in a frame, it will be listed on its own. If a layer is inside a frame, it will be listed beneath that frame.
We can press the arrow next to the frames icon to hide and reveal the list of layers that the frame contains. Within a frame, the layers are listed from front to back. For example, if text is on top of a shape, the text layer will be listed before the shape layer because it’s closer to the front.
But why does this matter? Most notably, the layers panel helps us stay organized. A design file can include dozens of frames and hundreds of layers. The layers panel allows us to see what’s on the canvas at a glance.
To gain the most value from the layers panel, we want to build the habit of naming everything. By giving each frame and layer a descriptive name, we can stay organized as the design grows.
The layers panel also provides another way to select and manipulate layers. Imagine that you can’t find an image you placed in a frame. If you can’t locate the image on the canvas, you can access it from the layers panel.
If we select a layer from the layers panel, we have several options for manipulating that layer:
Rename: Layers can be given more descriptive names by double-clicking on them in the layers panel.
Reorder: A layer can be dragged to a new spot on the list, which changes the layer’s position (from front to back) within its frame.
Lock and Unlock: Layers can be locked and unlocked by pressing the lock icon. If the layer is locked, it cannot be selected or moved on the canvas.
Hide and Unhide: Layers can be hidden and revealed by pressing the eye icon. If the layer is hidden, it will not be visible on the canvas, but it will be visible in the layers panel.
Menu: Right-clicking on a layer will open a menu with several options for manipulating the layer.
Task: Organize the layers panel of your design and test out four actions you can take from the layers panel. Follow the steps listed below, or refer to the video.
Locate the layers panel on the left side of the Figma editor.
Select the arrow next to the frame icon to reveal the layers within each frame.
Give the layers descriptive names. Note that you don’t need to rename the text layers because they inherit the text that you input — they’re descriptive enough as is! In the video, the layer called “Rectangle 1” is renamed “Button,” which clarifies what the layer represents in the design.
Test out four actions you can take from the layers panel:
- In the layers panel, the layers are listed from front to back. The layer at the top of the list is at the front of the frame, and the layer at the bottom of the list is at the back of the frame.
- Select a layer from the layers panel and drag it to a new spot on the list.
- Check the canvas to see how this change is reflected on the frame. The change will be most obvious for layers that overlap.
Lock and Unlock
- Hover over a layer in the layers panel.
- Select the lock icon.
- Try to select the locked layer on the canvas. You won’t be able to!
- Select the lock icon again to regain access to the layer on the canvas.
Hide and Unhide
- Hover over a layer in the layers panel and select the eye icon.
- Check the canvas. The layer will no longer be visible!
- Select the eye icon again to restore it to the canvas.
- Right click on a layer in the layers panel.
- Review the various actions you can take by selecting an option on the menu, or using one of the keyboard shortcuts.
- Note that the menu will also open if you right click on a layer from the canvas.