Variables allow designers to create consistent and cohesive designs using predefined values for colors, fonts, spacing, and more. It is a time-saver by providing systematic and consistent updates across your project.
What are variables?
A variable is a named value that can be reused throughout your project while managed and maintained in one place. Updating a variable's value will automatically update all instances where the variable is used. This ensures consistency and streamlines your design process.
Types of variables
Vev currently offers three types of variables:
Number with units like px,%, or vw.
Font family
Color HEX codes
How to use variables
Creating variables
From the left panel:
Open the Variables panel.
Click the 'Add new variable' button.
Select the variable type.
Provide a name and a value for the variable.
The variable is now saved and ready to be linked to its respective style properties. Learn how to link variables.
From the right panel:
Hover over a field with a value you want to save as a variable.
Click the dot with a '+' icon in the top left corner of the field.
Click the '+' button in the top right corner of the dropdown.
Input the name of your variable.
Press the 'return' key on your keyboard to save.
The variable is now saved and linked to the field from which you created it.
Editing variables
To edit a variable:
Open the variables panel from the left side.
Hover over the respective fields in the list to edit the name and value directly or click the 'cog' button to open the variable settings panel.
If a variable is already linked to a field in the style panel:
Click on the field to open the variable dropdown.
Hover over the variable you want to edit.
Click the 'cog' button to edit that specific variable.
Deleting variables
To delete a variable:
Open the variable settings panel from where you edit the variable.
Click the 'delete' button in the bottom left corner.
Linking variables
To link a variable:
Ensure the variable is already created.
Hover over the field you want to link to and click the '+' button on the top left corner of the field.
Select the desired variable from the dropdown.
To unlink a variable, hover over the top left corner of the field and click the pink dot to unlink it.
Using variables in interactions
To use variables with interactions:
Open the interactions tab in the right-side panel.
Select the desired trigger.
When selecting the target, find and select the appropriate variable from the list.
Set the action to 'Set variable' and specify the value to trigger.
Using variables for different devices
In your project variables, you can create variables meant to be used for specific devices and breakpoints, such as text size variables. For each device, you can change the variable to the preferred one that fits better for that breakpoint.
For example, you create a number variable named text-h1-desktop containing the value 42 px, while for mobile you create a separate variable named text-h1-mobile containing the value 28 px. When applying the text size variable for desktop, you select text-h1-desktop, then go to your mobile breakpoint and update the variable to text-h1-mobile instead.
Best practices
When using variables, following the best practices helps your project to be more scalable, consistent, and easier to maintain. Using a shared design language, and keeping them organized and documented ensures your design is adaptable and consistent across your project.
Naming convention
When naming design variables, it's essential to use meaningful names that convey their purpose. This helps collaborators understand when and how to use the variable. For example, if you have a variable for text size, a good name could be text-h1, which indicates that it's for heading 1 text. On the other hand, a name like text-32 is not as clear and can confuse.
Consistent use
If you have multiple designers on the same project, it's crucial to agree on a system or framework so the whole team creates and uses them the same way. A well-organized system makes it easier for designers to find and use correct variables, especially when working on a large project with many variables. There's no right or wrong way to do this; the team must decide on a workflow that works best for them.
Documentation
Keeping a clear and up-to-date file of your design variables can play an important part in your team's success using variables. The documentation should provide an overview of your variables and describe how each should be used, and when to use them.
This documentation is especially useful when new collaborators join the project. It allows for quickly getting up to speed with the project's design variables. Additionally, if any changes are made to the variables, documenting them helps keep everyone on the same page.