As Debbie Millman, writer of the bestseller “Why Design Matters” said, “Design is one of the few disciplines that is a science as well as an art.”. Design can make our lives easier and can put into practice what we think. And when it comes to the scientific part, a design gives you the ability to create automatization with the help of variables.
Creating good UI/UX design can take up countless hours of work and dedication, but as we all know, loving one of your designs is one of the biggest mistakes a UI/UX designer can make. This is one of the most important principles in UI UX design. Clients want original content, they want fast changes and want the design to be ready in a split second. So, using variables seems the best way to be productive and stay ahead of your deadlines.
Variables have the purpose of storing values that can be reused in a design system. The value gathered by the variables can be reused across your design when changing design properties and prototyping certain actions. The reason they were created is to make our lives easier. 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.
However, if you are looking to make your work as efficient as you can you might also be interested in tokens. As Steve Jobs once said,
Design is not just what it looks like and feels like. Design is, and tokens can help you achieve that.
Design tokens help you create collections that share the same variables integrated into a design system. 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.
For a better understanding, let’s say you want to change the primary color in your design. We both know that doing this manually will take up a lot of time and prolong the design process. So, we use tokenization instead. Think of it as a real-life token that is introduced into a machine to deliver you the outcome you wanted. In this situation, the outcome changes the primary color in your design. So, a token is a setting that can help you deliver the right automatization based on the collections and groups you have created.
Variables vs Styles
Variables and styles both have the ability to be shared across multiple projects from the same team or organization in common.
Variables are single values and can hold single color values on the other hand styles have multiple colors involved and this usually happens when using gradient fills, images, GIFs, videos, and even blend modes. This can be helpful when starting similar projects or when designing the web versus the app design for the same client or product.
For example, you can also think of variables as shampoo, and can only do one task at a time. But, on the other hand, we have 3 in one shampoo, which can do several tasks at once, as styles do. So when choosing the right tool for you, keep in mind that variables offer you the possibility of reusable colors that have the capability of responding to different modes. And you should think of styles when you want reusable gradients, or when you want to combine modes or blend multiple files.
1. Color
When it comes to choosing the right color, the journey can become really overwhelming. Colors are one of the primary features that catch the eye of the user when opening up a design and can also dictator a specific atmosphere. Some colors dispatch certain feelings. Think about how royal blue makes you feel, or about how purple can step up your design game, or how red used in a design can catch anybody’s attention. So having color variables is a must that will help you get your work done more easily and do the necessary changes with ease, whenever it’s the case.
- Fill colors. These refer to the color that is used within the layer’s bound. When it comes to a design there can be found from one fill to none, depending on the UI/UX designer’s preferences.
- Stroke colors. This refers to the outline or edge color that is attributed to an element or particular object.
2. Number
Numerical values are used to change the size of different variables like text layers, corner radius, minimum and maximum width/ height, padding, and the gap between.
- Text layers. Layers are the constituents of Figma. They help in the design process and provide more variants available, such as images, vector objects, or text.
- Corner radius. It refers to the intersections of two lines that are rounded. A corner radius helps create shapes that have rounded corners.
- Minimum and maximum width/ height. Variables can help change the full width/height with the help of auto-layout.
- Padding and the gap between. Padding is responsible for the gap or the white space that can be found between the boundaries of an auto layout. Even more so, the padding can be set vertically, horizontally, and uniformly and attribute different values for each side, left, right, top, and bottom.
3. String
String variables have focus text strings and variant names. These variants are also known as alphanumeric or character variables and can be used to link certain images or objects with different text layers. Enabling the use of reusable text strings and ensuring consistency and efficiency.
- Text layers. As mentioned above, layers are the constituents of Figma. They help create a design and provide more variants available, such as images, vector objects, or text.
- Variant instances. This term is as intuitive as it can be. It represents the variants available that you can create when designing an element in more than one style.
4. Boolean
Boolean can be understood as a true or false variant property. The boolean feature gives the user the ability to toggle different attributes or values on and off. Making different elements like buttons or certain input fields visible or not, depending on the toggle used.
- Layer visibility. With the help of a boolean, you can organize better your layers and make them more visible.
- Variant instances with true/false values. By using this, you have the option of switching different attributes on or off. Think about different elements, like an icon, that can be toggled on or off depending on your choice.
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 UI 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!
