UX Drill 14 — What is a “Variable,” and why must we use this well?
Variable vs. Style in design system
In my last article, I wrote about “design tokens” and how they are invaluable in collaboration and scalability.
That’s how designers and engineers can work together, and finally, it became clear why we must be fluent in “variables.”
As a design student, there is a lack of opportunity to actually “use” variables on school projects. Surely, we often run out of time to finish our design crafts for school projects and focus more on creating a visually appealing “look and feel” for mock-ups.
Even if I graduated from the famous and notorious design school at CMU, I still didn’t understand how to use variables in my design practice. ughhh…
But, from my experience, I know how important it is at companies.
In the previous startup I worked for, I learned that a “well-made design system” is worth a thousand designers.
This one lead designer built up the entire design system for the brand.
When I joined the team, I was impressed by all the documentation and consistent design system she had created. I was shocked to realize how a single designer can contribute to a small company, and she became my role model.
Because this system was very well communicated throughout the company, there wasn’t a big problem until another designer and I were hired to relieve her heavy workload. (Yes, we helped her finally get some good night's sleep..LOL)
TL;DR
You must speak “design tokens” to create a design system.
And “Variables” are crucial in making these “tokens.”
Design tokens are a language everyone speaks, including PMs, designers, engineers, and C-levels. They are created with alphabet pieces, the “variables.”
Let’s move on to Figma to try them out.
It was my long, dusty goal to master the variables, and this summer, I finally got the hang of it.
So, what is the key difference between “variables” and “styles”?
1. Variable is a style with “context and purpose.”
- This purpose part is crucial. Thus, a variable is not just a value but a value “for A/B/C”
2. Variable is utilized for design tokens and advanced prototyping
- That is why we need to master it and I will continue writing about them
3. Variable can be “scoped”
- So its use is limited to specific categories, such as stroke, fill, radius, etc.
In the image above, each variable 1, 2, and 3 represents a unique “style.” Background color represents the brand color purple, and text and icon colors are defined as “interactive-inverse,” which describes their purposes, not the raw HEX code #FFFFFF.
They are named with distinct purposes. Thus, they can be put together to form a CTA button with icons.
We need reusable and referenceable variables(bricks) to build a system(a house). I will continue with designing with variables on Figma next time!
Thank you for reading this; your support and applause motivate me to keep working! :)
