Typing values

Every number field in the Design and Prototype tabs does more than take a number. You can type a small sum, write a value in another unit, pick a variable, nudge it with the arrow keys or drag it. This page covers how.

Do the maths in the field

Type a sum and the field keeps the answer. 8*2 becomes 16, 24 + 4 becomes 28, (1440 - 48) / 3 becomes 464.

• You can use +, -, *, / and brackets. x, × and ÷ work too.
• A comma is read as a decimal point, so 1,5 is 1.5.
• A sum that does not make sense (or divides by zero) is ignored, and the field goes back to its value.

Enter, Tab and Escape

• ↩ applies the value and keeps the field selected, so you can type again or move on.
• ⇥ goes on to the next field.
• Esc forgets what you typed and leaves the field.

Arrow keys

In a field, ↑ and ↓ change the value by 1, and with ⇧ by 10. Each press applies at once. In a field shown in rem or em, the steps are 0.1 and 1.

Drag to change a value

Drag the icon or letter at the start of a field (the W, the X, the radius icon) left or right to change the value. Hold ⇧ while you drag for steps of 10. The whole drag is one undo.

Units for type

Font size, Line height and Letter spacing show a unit at the end of the field. Press it to switch:

Field	Units
Font size	px, rem, em
Line height	px, %, em
Letter spacing	%, px, em, rem

You can also type the unit with the number. In a field that offers it, the field switches to that unit (-1px in letter spacing shows -1 px). A unit the field does not offer is converted into the field’s own unit. rem and em are measured against 16 px.

Units change only how the value reads: the layer keeps the same size whichever you look at, and your choice of unit stays for the next layers you select. Line height also takes the word auto.

Use a variable

Type = in a number field to open the variables that fit it, or press the hexagon button (Apply variable) at the end of the field. From the picker you can:

• pick a variable, and the field follows it from then on;
• Search variables by name;
• Create variable from the value the field shows now;
• Detach variable, keeping its current value.

A field that follows a variable shows its name. The button only appears where the file has variables that fit, or where one can be made. See Variables and modes.

Several layers at once

With several layers selected, a field whose value differs between them reads Mixed. Type a number and every layer takes it. See Edit several layers at once.

Catches

• Sums use the field’s unit. A plain number in a sum is read in the unit the field shows, so in a font size shown in rem, 1.5*2 gives 3 rem.
• Two units in one sum (1rem + 4px) keep the field’s unit and convert both.
• Only numbers and the signs above. Words, percentages of a parent or CSS functions are not understood; the field goes back to its value.
• The unit you choose belongs to this browser. On another computer, the fields start in px (or % for letter spacing).