Design templates
Working on the canvas
Selecting, moving, resizing, rotating, snapping and measuring.
The canvas is a 1280 × 720 frame, the shape of a video call. It always fits the window, so there’s no zooming or scrolling to do.
Selecting
- Click a piece to select it. A click on anything inside a group selects the whole group.
- Double-click inside a group to reach the piece you clicked. After that, single clicks pick between that piece and its neighbours in the same group.
- Double-click a text piece to jump to its text: the Details field it follows, or the inspector’s Text box for custom text.
- ⇧-click or ⌘-click adds a piece to the selection, or removes it.
- Drag across empty canvas to select every piece whose centre falls inside the box. Hold ⇧ or ⌘ to add them to what’s already selected.
- ⌘A selects everything. Esc clears the selection.
Hidden and locked pieces can’t be clicked on the canvas. Select them from the Layers panel.
Moving
Drag to move the selection, or use the arrow keys to nudge it: 1 pixel per press, or 10 with ⇧.
Snapping and guides
While you drag, pink guides show what the piece is lining up with:
- The frame. Edges snap to a safe margin around the frame, and centres snap to its middle lines.
- Equal spacing. A piece snaps to sit exactly halfway between its neighbours, or to repeat the gap between two other pieces. The matching gaps are drawn so you can see them.
Measuring
While you drag, pink lines with pixel labels show the distance to the nearest piece on each side.
Hold ⌥ while dragging to also see the distance to the edges of the frame, or of the group the piece is in, on any side with no neighbour.
Resizing
Text and images have eight handles.
- Images: corner handles keep the picture’s proportions. Hold ⇧ to stretch it freely.
- Text: corner, top and bottom handles scale the type size. Side handles only make the text box wider or narrower, which matters for left, centre or right alignment. Hold ⇧ on a corner to keep proportions.
Groups have no resize handles, because a group’s size follows what’s inside it. Resize the pieces inside instead, or change the group’s Padding.
Rotating
Drag the round grip above a selected piece. Hold ⇧ to turn in 15° steps. Rotating a group turns everything in it together. For an exact angle, type it into Rotation in the inspector.
Lining things up
The inspector’s Align buttons line up the selection:
- One piece lines up with the frame, or with its group if it’s in one.
- Several pieces line up with each other.
With three or more selected, Distribute spaces them evenly.
Undo
⌘Z undoes and ⇧⌘Z redoes. A whole drag counts as one step, and up to 100 steps are kept. Typing in the Details panel isn’t recorded; everything else is.
Preview
Click Preview in the top bar to hide the handles, guides and hover outlines and see the design clean. Press Esc or click Edit to go back.