How do I reorder layers and elements?
Layers control which elements appear in front of or behind other elements on a design screen.
Use layer order when you want to bring an element forward, send it backward, or organise overlapping elements such as text, devices, images, shapes, badges or doodles.
Reordering vs moving an element
Reordering an element changes whether it appears in front of or behind other elements.
Moving an element changes where it sits on the design screen.
For example:
Goal | What to use |
|---|---|
Move a title higher on the design screen | Drag-and-drop on the canvas |
Make a shape sit behind text | Reorder the element |
Bring a badge in front of a device | Reorder the element |
Move a device left or right | Drag-and-drop on the canvas |
Enter drag-and-drop mode
To reorder elements, first enter drag-and-drop mode.
You can enter drag-and-drop mode in any of these ways:
hover over an element on the canvas and click the move icon
open Layouts & Elements and click the move icon next to the heading
click Drag and drop inside Layouts & Elements
click the right-angle ruler icon for an element, then click Drag & drop
on Mac, use β + K
Reorder elements from Layouts & Elements
The easiest way to reorder multiple elements is from Layouts & Elements.
To reorder elements:
Click the design screen you want to edit.
Open Layouts & Elements in the edit panel.
Enter drag-and-drop mode.
Drag elements up or down in the list to change their layer order.
Click Save positions when you are finished.
Elements higher in the layer order appear above elements lower in the layer order.
Reorder an element from the canvas
You can also reorder an element directly from the canvas.
To do this:
Hover over the element you want to reorder.
Click the move icon.
Use the up and down arrows in the element toolbar to move the element forward or backward in the layer order.
Click the green tick or Save positions when you are finished.
This is useful when you are already working visually on the canvas and only need to move one selected element up or down.
Reorder elements in Exact Dimensions
Use Exact Dimensions when you want more precise control over the layout structure.
To open full Exact Dimensions:
Click the design screen you want to edit.
Open Layouts & Elements in the edit panel.
Click Exact Dimensions.
The full Exact Dimensions view shows the selected design screenβs layers, padding and elements. You can use it to understand how the design screen is structured and move elements between layers when needed.
This is helpful when you want to reorganise the layout more carefully than simply moving an element forward or backward.
What if an element is hidden behind another element?
If an element is hard to click, hidden behind another element, or partly off the edge of the design screen, use Layouts & Elements instead.
The list shows all elements on the selected design screen, so you can select and reorder the correct item more easily.
Tips for working with layers
Put background-style shapes and decorative assets behind important text.
Bring text forward if it is being covered by another element.
Use Layouts & Elements when overlapping elements are hard to select.
Use Exact Dimensions when you need to move elements between layers or review the design screen structure.
Use drag-and-drop for visual positioning, and layer controls for front/back order.