Formsort
Search…
Building flows
Handling data
Color and dimension variables
There are two main style variables that are helpful building blocks in Formsort: color variables and dimension variables.
Color variables
Color variables are definable in Style Tab -> Variables -> Colors.
Setting color variables lets you enforce a consistent palette across your flow and simplifies the process of changing the colors in your theme in the future.
Setting a color variable
Creating a color variable is as simple as adding a name and adding the color value. When setting the color, the menu can accept hex values and rgba values. You can also use the palette interface to find a color you like, which will automatically update the hex and rgba values for you.
Add name -> add color -> Save
Using the color variable
Color variables are accessible when styling the color of components in your flow. You will see your available colors variables at the bottom of any color menu.
Setting the background color of a button, using our color variables at the bottom of the menu
Dimension variables
Dimension variables let you create re-usable units that can be made responsive across viewport sizes. Dimension variables are definable in Theme tab -> Variables -> Dimensions. Each dimension variable lets you input a CSS Length Unit for the three major platforms users will view your content in: mobile, tablet and desktop. When you use the dimension variables anywhere in the studio (setting content widths, max image widths, etc.), you will the ability to control the dimensions of a component for each specific viewport.
Using dimension variables provides consistent spacing across your design system and enables responsive design.
Creating the dimension variable
Creating a dimension variable is simple: click add variable, give the the variable a name that makes sense, click save, and then add in the dimensions for the different viewport sizes.
In the below example, we are creating a padding variable that will have a value of 16px on mobile and tablet, and a value of 24px when viewed on desktop.
Add the name of the variable, then click "Save", then add the dimensions. The variable values will be saved automatically.
Accessing the dimension variable
At some point you're going to want to apply these variables to different properties. Following the above example, we are adding the padding dimensional variable to the left and right padding values of our Content box by clicking the drop-down menu in the Content Padding section. This will ensure that the padding applied is responsive to the viewport our users are viewing the flow from.
Click the drop-down to access your list of dimension variables
The dimension variables can be re-used in as many places as you need, based on what makes sense with the length values they will apply.
Last modified 3mo ago