Toggle navigation

The Navigator Panel

The navigator panel on the left shows the list of wireframes, assets or Symbols in your project. The currently selected object is highlighted.

You can select multiple objects in the navigator panel by holding down CTRL or SHIFT and clicking on them. Wireframes and assets can be viewed as a text-only list or as thumbnail previews.

You can hide the navigator panel by clicking the navigator toggle icon above the panel (keyboard shortcut: CTRL/+J). Hiding it will show additional icons in the toolbar (shown above) for navigating between wireframes or assets (depending on which one is selected). The panel can be resized by placing your mouse cursor over the line separating the navigator panel from the canvas and dragging left or right. You can double-click on the separator line to reset it to the default width.

You can jump between wireframes or assets using your keyboard via CTRL+TAB or by clicking on one in the navigator and using and .

Wireframes can be reordered by dragging them up and down in the navigator panel. This can be useful when exporting to PDF, for example. The order of your wireframes will be remembered when you close and reopen your project, even if opened on a different computer.

Using a Hierarchy

The navigator panel also offers a hierarchical structure to better organize your wireframes.

To use it, select the wireframe you wish to be the child and press TAB. The child wireframe will be placed in a tree hierarchy below the wireframe above it.

You can then use the arrows to the left of the parent wireframe to show and hide the wireframes under it.


To restore it to the top level, use SHIFT+TAB. The animation below shows nesting wireframes in action.


Context Menu Actions

A context menu is also available for the objects that are open in the navigator panel. You can either right-click on the selected object or click the small arrow that appears when you hover over it to open the menu.

The contents of this menu vary depending on which type of object is selected (wireframe, asset, symbol, or trash) but it generally contains options such as rename, move to trash, and duplicate. In the Wireframes view it also contains actions for working with alternates.

Renaming Wireframes

Renaming wireframes can be done via the context menu or by double-clicking on the name of the wireframe in the navigator panel. Wireframes with links will automatically be updated when a linked wireframe name changes.