How to navigate and organize your design with Layers

How to navigate and organize your design with Layers

Use the Layers panel to view every object on your board, understand how elements are nested, and quickly select or organize complex designs.

Before you start

Make sure you have permission to edit the board and are in design editing mode.

Access the Layers panel

Open the Layers panel from the board sidebar. 

The panel displays the screens, containers, groups, and individual elements on your board. Each object appears as a layer in the board’s layer tree. Elements inside screens, containers, and groups appear as child layers under their parent.

Understand the layer hierarchy

The layer hierarchy shows how objects are structured within your design:
  1. Parent layers: Screens, containers, and groups that contain other elements.
  2. Child layers: Elements placed inside a parent layer.
  3. Layer order: Determines which objects appear in front of or behind others. The most recently added object appears at the top of its layer stack.
Select the arrow next to a parent layer to expand or collapse its child layers.
Use the Layers panel to quickly find and select objects, especially when elements are nested or overlap on the canvas.
  1. Select a layer to select its corresponding object on the canvas.
  2. Select an object on the canvas to locate its layer in the panel.
  3. Expand screens, containers, or groups to view their child elements.
  4. Collapse parent layers to simplify the panel when working with a large design.
  5. Use the panel to select an element that is difficult to access directly on the canvas.
Info
Users with view-only access can also open the Layers panel and use it to navigate the design.

Rename layers

Give layers clear, descriptive names to make your design easier to understand and manage. Double-click a layer to update the name. Use names that describe the element’s purpose, such as Navigation, Profile image, Submit button, etc.

Idea
You can also select multiple layers and use Rename Layers with AI to generate relevant names automatically.

Reorder layers

Drag a layer up or down within its parent to change its position in the layer stack. Objects can only be reordered within their immediate parent screen or container.
Layers higher in the stack appear in front of layers below them. Reordering a layer changes its visual stacking order without changing its position on the canvas.

Review prototype behaviors

In Prototype mode, the Layers panel helps you identify screens and elements with scrolling or fixed-position behavior, making scrollable prototypes easier to review and manage.


Idea
Tips for organizing layers
  1. Rename important layers as you build your design.
  2. Use consistent naming patterns across related screens.
  3. Group elements that should be managed together.
  4. Use containers when elements need a clear parent-child relationship.
  5. Collapse sections you are not currently editing.
  6. Keep related layers close together in the layer stack.

Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.