Outline

Macaw's Outline panel is much like the layers palette found in other design tools. It shows you all the elements on the current page, how those elements are structured and it also displays the z-index of elements in your document. Elements that are higher in the outline will be displayed on top of elements below it. The outline is not just a visual tool. It can also be used to quickly structure your document, select elements, set element tags/classes (Renaming) and more.

The Outline panel can be shown using the "Outline" button in the top right corner of the app or using theO key.

Moving Elements

Elements can be moved by selecting the layers you wish to move and dragging them to the desired position. While dragging a blue indicator bar will represent where the elements will be placed. If the indicator bar is inside a container all moving elements will become children of that container.

While moving elements you can also get a blue indicator box. When this indicator box is displayed it means that the element that is highlighted will become a container and all moving elements will be placed inside it.

Expanding/Collapsing Containers

Layers for container elements can be expanded/collapsed to display/hide children elements for easier traversal of the outline. Click the arrow icon to expand/collapse layers.

Toggle Layer Visibility

See the Display section of the documentation for info on toggle element visibility and display.

Locking Layers

In some situations you may want to lock layers to make them uneditable. This allows you to edit other parts of your document without having to worry about making unintended changes.

Layers can be locked/unlocked by clicking the icon to the right of the Visibility icon. When layers are locked the icon will be displayed as a lock. When layers are unlocked the icon will be a dot.

Renaming Layers

The Outline can be the quickest way to set element tags and classes. To rename anThen you can start typing tags and classes. As you type, a code hint dialog will popup giving you suggestions for tags and classes you have used elsewhere in your document.

Outline Pro Tips

Here are a few shortcuts/features for using the Outline.

Tab Renaming

When renaming elements you can quickly jump and rename the element below it by using the TAB key. You can jump to the element above it by using Shift+TAB. This allows you to quickly rename multiple elements just by using the keyboard.

Quickly Move Elements Forward/Backward

You can quickly move elements forwards and backwards in the Outline using Edit > Move BackwardsCmd+[ Ctrl+[ or Edit > Move Forwards Cmd+] Ctrl+]. When moving an element in this way the element will be moved into containers as it hits them. Any collapsed layers will be skipped.

You can also move elements to the front or to the back by using Edit > Send to Back Shift+Cmd+[Shift+Ctrl+[ or Edit > Send to Front Shift+Cmd+] Shift+Ctrl+].

Quickly Scroll Canvas to Element

You can quickly scroll the canvas to a specific element using the Outline. This can be done by clicking the icon next to the element's name.