Keyboard and modifiers

The modifier convention

One convention everywhere a value has sides — spacing, corners, borders. None of them has to be learnt twice.

drag	this one edge, or this one corner
⌥	the opposing pair — the diagonal, on a corner
⇧	leave the scale and set the measurement under your hand
⌘	all four

The three are orthogonal, so they combine: ⇧⌘ is all four sides, off the scale. That matters more than it sounds — while ⇧ and ⌘ were one gesture, stepping off the rails was possible on a single edge and impossible on all four.

⇧ is held rather than pressed, and it says so while it happens: the hint reads off the rails, and the panel marks the value with a dot afterwards. The rails are the product; leaving them should be a decision rather than something you can do by accident.

Sizing type on the canvas

drag a corner	scale the type, settling on the nearest size in the scale
⇧	keep the size you leave it at

A plain drag snaps, which is why a heading will not grow past the largest token: there is nothing above it to land on, so it returns to it. ⇧ is how you get past that, and it is the same ⇧ as everywhere else.

Dragging a value

Anywhere a scale has a value — the number on a panel row, the icon on the editing bar — the value itself is a drag.

drag sideways	step through the scale, in size order
⇧	leave it and set the measurement under your hand

This is how type gets off the rails. Type is not dragged on the canvas the way a padding is, so until the value became a drag there was no gesture for ⇧ to modify, and the only route past the scale was typing a number into the Custom field. Both still work; the field is where you go for an exact number and the drag is where you go to find one.

It is on every scale whose values are a measurement — type, gap, each padding and margin side, every corner, opacity, z-index. Not on box-shadow or transition, which are not measurements.

Everywhere

⌘Z / ⇧⌘Z	Undo, redo — on whichever canvas is in front
⌘S	Save
⌘G / ⇧⌘G	Group the selection, or take it apart
⌫	Delete what is selected
Esc	Deselect, or finish the path you are drawing

The design canvas

V	Move — select, drag, resize
C	Corner — drag a corner to round it
S	Spacing — inner four handles pad, outer four are margin
G	Gradient — drag across a box to set the direction
⇧ click	Add to the selection, or take it out. Siblings only
⌘D	Duplicate
double-click	Type on the thing itself

Corner drags snap to your radius scale, spacing drags to your spacing scale, and a resize snaps to a real width — a free drag still lands on the rails.

The artboard

V	Move — select, drag, scale by the corners
A	Node — drag the points a path is made of
P	Pen — click for a corner, drag for a curve
N	Pencil — freehand, one even line
B	Brush — a mark rather than a line
R / E	Rectangle, Ellipse
G / S / O / W	Polygon, Star, Pie, Arrow
T	Text — click, then type
D	Gradient — drag across a shape
C	Crop — drag a box over a picture
X	Erase — click a shape, or a point

While drawing

⇧	Square, circle, or hold an angle to an eighth
⇧ on rotate	Hold to 15°
⌘ drag a pen handle	Reshape it, while drawing or after
⌥ drag a node handle	Break the pair, so a smooth point becomes a corner
double-click a node	Curve a corner, or straighten a curve
⌃ while dragging	Turn snapping off for that drag
double-click a path	Go into its points
double-click inside a group	Step into it

Zoom

⌘ scroll	Zoom the artboard
Fit	Fit the whole thing in the window

Zoom — both canvases

Keys	Does
⌘+ (or ⌘=)	Zoom in
⌘-	Zoom out
⌘0	Fit

The step is proportional, so it is the same amount of zoom at 30% as at 400%, and the buttons on the bar do exactly what the keys do.

These keys zoom the CANVAS, not the window. The application menu deliberately has no Zoom In, Zoom Out or Actual Size: those are Electron’s defaults, they scale the whole interface, and they would answer the same three keys.

Saving

⌘S saves, in both modes — the project in Design, the drawing in Canvas.

Tool letters

The two canvases have their own sets, because they hold different tools. Where they share a letter they mean the nearest thing to each other: V is Move in both, C is Corner in Design and Crop in Canvas, S is Spacing and Star.

One to know: the gradient is G in Design and D in Canvas, because G on the artboard is already the polygon.