Design Editor Shortcuts

The Design editor is fully usable with the mouse, but its shortcuts make layout work much faster. In the tables below, Mod means ⌘ on macOS and Ctrl on Windows/Linux, and Alt is Option on a Mac. Shortcuts work when the canvas is active; typing in a text, number, or other input keeps the normal typing behavior.

Press ? at any time in the editor to open or close its on-screen shortcut sheet. You can also open it from Help & tutorials → Keyboard shortcuts at the foot of the sidebar.

Save, history, and view

The editor also saves on its own shortly after each change, so Mod S is there for peace of mind rather than something you must remember. Zoom, rulers, the left panel and panning change only your working view. They never change the component's printed dimensions or another collaborator's layout.

In Preview mode, step between cards with the ‹ and › buttons under the canvas, or click the card number and type the one you want. With nothing selected, ← and → step to the previous and next card. With an element or slot selected, the arrow keys nudge it instead, so press Escape to clear the selection first.

Select, copy, and organize

Mod A inside a group you have entered selects that group's members only. Copy style picks up the selected element's look, and paste style applies it to whatever you select next.

Escape works in a set order: it first puts down the style brush (or cancels a slot you were about to draw), then closes the full-window layout browser, then steps out of a group you entered, and only then clears the selection. If something seems to remain selected, press it once more rather than clicking blindly on the canvas.

Mouse and modifier keys

Images, icons and text keep their proportions on a corner drag by default. Hold Shift on a corner to let go of that; on text it also stops the type scaling with the box, so the text re-wraps instead. Alt used to bypass snapping and now makes a copy, so use Mod when you want a free placement.

Paste a picture

Mod V with a picture on your clipboard (copied from a browser or a screenshot tool) uploads it to your Library and places it on the canvas. With no picture on the clipboard, Mod V pastes the elements you copied.

Position, size, and rotation

Holding a key down counts as one step for undo, so a long nudge comes back with a single Mod Z.

Text

These act on a selected text box, and on every text box in a multi-selection. While you are typing inside a box, Mod B, Mod I and Mod U apply to the words you have highlighted instead.

Chrome keeps Mod Shift C, Mod Shift R and Mod Shift B for itself, so in Chrome use the toolbar's alignment and spacing controls for those three.

While typing in a text box

Double-click a text box to type in it. These keys then work on the words you have highlighted, or on the paragraph the cursor is in:

A text box connected to a column is styled as a whole, so word-level bold, colour and highlight only stay on static text. If a popover or the icon picker is open, the first Escape closes that and the second ends the edit.

In panels, fields and lists

Slots on boards and mats

When you are designing a board or mat, a selected slot answers the same keys an element does: arrow keys nudge it (with Shift for 10 pixels), Mod + arrow keys resize it, and Delete removes it. Escape cancels a slot you are about to draw.

View-only designs and phones

If you only have view access to a design, the keys that change it are switched off. Escape, Tab, ?, Space panning and Mod / still work so you can look around.

The phone editor has no keyboard shortcuts. It uses buttons instead: undo and redo in its header, and nudge arrows (1 or 10 pixels a tap) in each layer's controls.

Add elements without leaving the canvas

These shortcuts add a sensible new element at the canvas center. They do not replace the asset pickers: use Elements for images, frames, other shapes, Game art, custom uploads and icons.

A fast, safe editing loop

1. Select the elements you are changing, then use Mod G for a reusable cluster such as a title panel and its badge.
2. Align with the multi-select toolbar or the right-click Align submenu; use arrow keys only for the last pixel-level adjustment.
3. Duplicate with Mod D (or Alt-drag), change the duplicate, and use the layer shortcuts to check its stacking order.
4. Enter Preview mode and step through the cards to inspect long values and edge cases.
5. Save with Mod S before switching collection, layout face, or project.

For the controls behind these shortcuts, including multi-select alignment, groups, snapping, and element-specific options, read Advanced Editor Controls.