In the Input Fields view, you decide how users change a color in your template, for example the fill or stroke of a shape or the color of a text. Users choose any color in the design generator, or only colors from your palette. How to create a color input field is explained in Create a color input field: make a color changeable.
You open the settings in the Input Fields view with the gear on the right of the input field and close them with Done. Title, Description and Variable name are the same for all input fields. They are explained in Input field settings.
There are two field types:
- Color: users choose any color. In the Create Input Field popup, Fill Color and Stroke Color create this field type.
- Color Selection: users choose a color from your palette. Select Fill Color and Select Stroke Color create this field type.
Color
Color has no settings of its own. The default value is the color the element had before.
In the design generator, users see a full color picker: a color area, a hue slider, an opacity slider, the color value as HEX, RGB or HSL to type in, and an eyedropper.
Color Selection
Users only choose from the colors you set. How to set up the palette is explained in Create a color input field: make a color changeable.
- Color options: the colors of your palette. At first, these are the previous color, white and black. Each color is one row:
- Drag the handle on the left to move the color.
- Clicking the swatch opens a color picker.
- The trash can deletes the color. One color always has to stay.
- Add option: adds a color. It is a copy of the last color.
- Type: Dropdown, Button Grid or Carousel. Button Grid by default.
- Size: the size of the swatches, Small, Medium or Large. Medium by default. No effect with Dropdown.
You can't give a color a label of your own. With Dropdown, every color gets one automatically: its color value or "Color 1", "Color 2" and so on.
In the design generator, users see the colors as a grid (Button Grid), as a row to browse (Carousel) or in a dropdown menu. On a phone, the design generator shows a Button Grid as a Carousel.