In the design generator, a number input field lets users set a number in the design. They do it with a slider.
What it controls
You connect a number input field to a property that has a number, for example:
- Opacity and Rotation
- position and size (X, Y, W, H)
- the Max Font Size of a text
- spacing
You connect it with Select Custom Property: with the Create Input Field tool, you click the element, and then Select Custom Property on the left of the popup.
Then you click the number in the properties panel, and a Create Field popup opens. There you choose Number. The single steps are in Create a checkbox input field: let users show or hide an element. There you click the number instead of Visibility and choose Number instead of Checkbox.
Settings
You open the settings in the Input Fields view with the gear on the right of the input field. Three settings decide which numbers users can choose:
- Min value: the lowest number. The slider starts here.
- Max value: the highest number. The slider ends here.
- Increment: how much the number changes with each step. With 5, for example, the slider jumps from 0 to 5, 10, 15.
When it is created, the input field gets a range that fits the property, for example −360 to 360 for Rotation and 0 to 100 for Opacity. If a property has no range of its own, it is 0 to 100 in steps of 1. A narrower range is often worth it, so that users can't, for example, make a logo so small that it disappears.
Every input field also has the settings Title, Description and Variable name. They are explained in Input field settings.
What users see
In the design generator, the input field's heading is at the top. New number input fields are called Select Value. Users understand a heading that says what it is about more easily, for example "Logo size".
Below it there is always a slider. Users drag it left or right, and the design changes with it. They don't see the number itself, only its effect on the design. At first the slider is at the default value: the value the property had when you connected it.