Layers & Z-Ordering
Every object on the canvas sits at a specific depth — this is called its z-order. Objects added later sit on top of earlier ones by default. When objects overlap, the one higher in the stack appears in front.
Understanding z-ordering is essential when building designs with overlapping elements — for example, a text label sitting on top of a coloured background shape.
Reading the stack in the timeline
The layer list on the left of the timeline shows every object in the design, ordered by depth. The top row is the front-most object; the bottom row is the furthest back — the same top-to-front convention as most design tools.
Each row shows a small layer number on the right. The front-most object has the highest number and it counts down towards the back, matching the "bring to front = higher" mental model. In a scene with five objects, the top row reads 5 and the bottom row reads 1.
The layer number updates live whenever you reorder — use it to confirm an object landed where you expected, especially in busy scenes where several elements overlap.
Changing the stack order
There are two ways to reorder objects.
Drag in the timeline
Grab any object row in the timeline layer list and drag it up or down to restack it. A line shows where it will land, and the canvas updates as soon as you drop. This is the fastest way to reorder several objects.
Right-click on the canvas
Right-click an object to open its context menu, then choose a layer-order action:
| Action | Effect |
|---|---|
| Bring to Front | Moves the object above all others — nothing will overlap it |
| Bring Forward | Moves the object one step closer to the front |
| Send Backward | Moves the object one step closer to the back |
| Send to Back | Moves the object below all others — everything sits on top of it |
A common pattern in broadcast graphics is to build layers from back to front: background shape → image or logo → text labels. Use Send to Back on the background shape first to get the order right, rather than re-adding objects.
Objects inside a Frame
Wrapping objects in a Frame makes them behave as a single object in the stack — you can Bring to Front, Send to Back, or drag the whole Frame just like any other object.
You can also reorder objects within a Frame without unwrapping it:
- Expand the Frame's row in the timeline (click the chevron) to reveal its children. They follow the same convention — front-most child at the top, with its own within-frame layer number.
- Drag a child up or down inside the Frame to restack it there, or select it on the canvas and use the right-click layer actions — the change stays contained in the Frame.
- A child can't be dragged out of its Frame this way. To move an object out of a Frame, unwrap the Frame first.
A Frame always keeps its dashed background boundary at the very back of its own stack, so your content never disappears behind it.