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.

Navigate your design with 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.
   

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.

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.

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.

• Related Articles

• How to rename design layers with AI

  Use Rename Layers with AI to replace unclear or generic layer names with relevant, descriptive names. This helps keep complex designs organized and makes layers easier to find, understand, and manage. Before you start Make sure you have permission to ...

• How to group and lock elements

  Group related elements so you can move, resize, and organize them together. You can also lock elements or groups to prevent accidental changes while editing other parts of your design. Before you start Make sure you have permission to edit the board ...

• How to use Menus and Navigation Components

  Use menu and navigation components to organize links and help users move between screens, pages, or sections of an interface. Before you start Make sure you have permission to edit the board and are in design editing mode. You can access menu ...

• How to use the Visily AI Chat Assistant to generate your design

  Meet the new agentic Visily AI, your smarter way to turn ideas into polished designs! With the Visily AI Chat Assistant, you can generate screens, components, diagrams, and images from prompts, plans, references, and design instructions. Even better, ...

• How to inspect design details

  Inspect Mode lets you review design properties, measurements, CSS details, and assets from your Visily board. This is useful when preparing designs for developer handoff. What you can inspect You can inspect design and CSS properties in Visily, with ...