Layers panel
Navigate the layer hierarchy, manage visibility, and organize layers from the Layers panel.
What the Layers panel shows
The Layers panel displays the complete hierarchy of all layers in the current project — frames, groups, stacks, components, and individual shape, text, image, and vector layers. Layers higher in the list appear in front of layers lower in the list.
The panel is located in the left sidebar.
Navigating the layer hierarchy
- Expand a frame, group, or stack by clicking the ▶ arrow to see its children.
- Collapse it to hide the children and reduce visual clutter.
- Use the panel controls to collapse expanded layer groups when available.
Layers are indented to show nesting depth.
Selecting layers
- Click a layer row to select it on the canvas.
- ⌘+click / Ctrl+click to add more layers to the selection.
- Shift+click to select a range.
Renaming layers
Double-click a layer name in the panel to rename it inline. Press Enter to confirm.
Clear names like Hero frame, Product image, CTA button make the hierarchy much easier to navigate than default names like Rectangle 5.
Layer controls
Hover over a layer row to reveal quick-access controls:
| Control | Action |
|---|---|
| Eye icon | Toggle layer visibility |
| Lock icon | Toggle layer lock (prevents canvas selection) |
Hidden layers do not appear in exports.
Reordering layers
Drag a layer row up or down within the panel to change its stacking order on the canvas.
Tips
- Use the Layers panel to select layers that are hidden behind other layers on the canvas — click them directly in the panel.
- Nested layers inside frames are only visible when the frame is expanded — expand it if you can't find a layer.
- Clear layer names make long layer lists easier to scan.