Pages & Layers

Every Piko document is organized into pages, and every page contains a tree of layers. The Document Panel on the left side of the workspace is where you manage both. Understanding this structure early will save you time as your designs grow more complex.

Pages

Pages let you keep multiple screens, variations, or artboards inside a single document. Each page has its own scene graph and remembers its own viewport state, so your pan and zoom position is preserved when you switch between them.

1. Add a page — Click the + button in the pages header, or right-click and choose Add Page from the context menu.
2. Switch pages — Click on a page name to jump to it. Your previous page’s viewport is saved automatically.
3. Rename a page — Double-click the page name, type a new name, then press Enter to confirm or Escape to cancel.
4. Delete a page — Hover over the page to reveal the x button, or use the context menu. Your document must always have at least one page, so the last remaining page cannot be deleted.

Tip

Use pages to organize related designs — for example, one page per screen of your app, or separate pages for light and dark theme variants.

Layers

The Layers section sits below the pages list and displays every object on the current page as a hierarchical tree. The order is reverse z-order: the layer that appears at the top of the list is drawn on top visually.

• Expand and collapse containers (groups, frames, boolean groups) by clicking the disclosure triangle next to their name.
• Auto-reveal — When you select an object on the canvas, its ancestors automatically expand and the layer scrolls into view.
• Virtual scrolling keeps the panel responsive even in documents with hundreds of layers.

Layer operations

Renaming

Double-click a layer name in the panel to rename it. Press Enter to confirm or Escape to cancel.

Reordering

You can change a layer’s position in the stack using the context menu or keyboard shortcuts:

Action	Shortcut
Move forward one step	Ctrl + ]
Move backward one step	Ctrl + [
Move to front	Ctrl + Shift + ]
Move to back	Ctrl + Shift + [

macOS users

Wherever this guide says Ctrl, use Cmd instead.

Visibility and locking

Right-click a layer and choose from the context menu:

• Hide / Show — Hidden layers are not rendered on the canvas and cannot be selected.
• Lock / Unlock — Locked layers are still visible but cannot be selected or modified, which is useful for background elements you don’t want to move accidentally.

Deleting

Select one or more layers and press Delete, or right-click and choose Delete from the context menu.

Groups and frames

Groups and frames are container layers that help you organize related objects.

Groups

Select multiple objects and press Ctrl + G to group them. A group moves, scales, and rotates as a single unit. To break a group apart, select it and press Ctrl + Shift + G.

Tip

Double-click a group on the canvas (or press Enter) to edit its children directly. Press Escape to step back out to the parent.

Frames

Frames work like groups but also act as a clipping boundary — anything that extends beyond a frame’s edges is visually cropped. They are ideal for designing screens, cards, or any component with a fixed size.

To wrap the current selection in a frame, press Ctrl + Alt + G.

Quick reference

Action	Shortcut
Group selection	Ctrl + G
Ungroup	Ctrl + Shift + G
Frame selection	Ctrl + Alt + G
Move forward	Ctrl + ]
Move backward	Ctrl + [
Move to front	Ctrl + Shift + ]
Move to back	Ctrl + Shift + [
Delete layer	Delete
Rename layer	Double-click name

For a full list of keyboard shortcuts, see the Keyboard Shortcuts reference.