Design System • Using variables
Revolutionizing the way we approach design models using the new powerful tool in Figma: variables.
Insurance provider*
Client
*Confidential
Role
UI/UX
Tools
Figma
2023
Year
Why using variables?
THE PROBLEM
The insurance company we worked for is the largest insurance company in Italy and has multiple subsidiaries each with its own specific design.
In the past the design team used to have specific Design Systems for each branch: a tedious chore!
THE SOLUTION
Thanks to variables we can have just one Design System, because of their dynamic nature allowing them to change when used in different contexts and brands.
Before
After
Method
The first collection we created was the Shades collection. For each branch we identified the colors used and made them into variables.
1. The first collection
Creating the Brand collection : variables that reference the shades values, giving those variables semantic names and use them in designs. Organizing them in groups based on the usage: action, content, background, status, border, data visualization.
All the variables are organized in different modes for each brand.
2. The second collection
The last collection we created was the Themes collection: setting up light and dark mode with a new variable mode.
The collection is organized in the same way as the Brand one, ensuring the correct switch between light and dark mode for all brands.
3. The third collection
Results
Taking into consideration that the client’s approach is White Label, when a change to the design was requested the team had to find and select every frame for each brand and update it; a tedious chore with a higher chance for human error.
Instead using variables we can change the definition of the variable to a different shade, apply the change to one frame and just change the value accordingly to the branch.
It only takes a few seconds now!
Instant swap for each branch
Instant swap for light and dark mode
Just by clicking the change variable mode button we can set the theme by selecting light or dark, and the entire frame/section changes to the values we set as Dark mode.