Key Challenges in Using Variables in Figma: What You Need to Know

We live in a world where everything is happening fast-forward. We are used to finding quick solutions with the help of technology. Imagine if you needed to write an article or do research on a subject – before technology this simply would have taken ages. However, with time, we integrated technology into our lives and routines to make everything easier. And, when it comes to UI/UX design, every one of us knows that for a design to be ready it takes more than one try. Changing colors, fonts, and styles takes more time than we have, so, variables were introduced. 

Variables help us step us of the game. They are the tools that help UI/UX designers make changes faster and deliver better results to their customers. Variables have the ability to store data with the help of tokenization. Variables make tasks simpler, they can provide solutions that can happen faster, helping us save time when creating a design, managing one, or building complex prototypes.

But for variables to function properly we need tokens. UI/UX design tokens help you create collections that share the same variables. So, you can organize your work better and have it classified using common variables, such as color, number, string, and boolean.

These are further divided into more complex fields and groups. Think about classifying color variables. For example, they can be further divided into primary color variable groups or secondary color variable groups. And tokens help you organize your work. 

As with any beta version, when it comes to Figma variables there are some limitations that make your work more challenging. Variables are mainly raw values, so without tokens, we can’t really make changes to the whole design. 

When it comes to variables, it is important to pay attention.

‍When we implement a change, we need to be certain about the fact that it will fit our design goal. One of the limitations that I have encountered when using variables in Figma is the impossibility of swapping a group that I have created in a collection into another collection. So, if you do make a mistake and create a group in the wrong collections you will just have to start it over in the right collection, as Figma doesn't provide you with the option of switching. 

When building a UI component we can choose the properties we want, based on the state, color, outline, size, if it has or doesn’t have an icon, and based on.

Figma gives you the opportunity to use variables to better organize your new elements, but limitations can occur in any beta version, and variables are no exception. So, to better understand what those limitations mean, let’s talk about the following example – corner radius.

Think about the situations when you are designing new buttons. It is a known fact that when designing a button a single version won’t cut it, and we want to be efficient. So we need variables to come and save the day and help us deliver solutions faster. Some buttons have rounded corners, some need to have rough edges, and sometimes you just try and see what will look better in your design. 

However, let’s say you selected a variable for Corner radius 10 and you don’t really like how the buttons you have created look like. So, you try and change the property of the component from 10 to 6, to make them less rounded. And here is where the limitation happens and the new settings can’t occur everywhere the button was placed. 

‍

Prototyping when using variables.

Prototyping helps you bring to life your design while helping your client reach lower costs and get a first look at how your designs look like. It is an external process that offers a first insight into how users are interacting and experiencing a design. “Design is not just what it looks like and feels like. Design is how it works.”, and Steve Jobs was right.  When prototyping, we can see if what we created is deductible, if it’s easy to interact with, and if it helps us present our ideas to clients. 

Think about instant soup. It is nothing compared to homemade soup, but it gets the job done. It looks similar and has the same properties so you can experience the insights, and take a first look at what is like. And, the same happens with prototyping versus the coded version of your design, helping you understand and see how a design will act and be interpreted.

But, prototyping is no easy task, and variables make it even more overwhelming.  When creating prototypes using variables we need to have in mind that if’s will become our best friend.

Conditions help anticipate possible problems in your design, so, you need to have them all in mind to create the best prototype available. And if multiple instances are required we will need to use imbricate if (multiple conditions using the same if). So, using variables while creating prototypes can get challenging.

Variables are here to help us be more productive and deliver solutions faster than ever before. However, using them implies certain limitations that can be frustrating. So, take it slow and first understand how they work and how they can improve your work quality.

We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.  

“You press the button, we do the rest,” – Kodak.

Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.

Our design system includes components, icons, variables, cards, buttons, and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!