6 Considerations On Variables By Joey Banks

Summary

Joey Banks is a Figma expert and Maven teacher who can help take your product design skills to the next level with his intricate knowledge of Figma variables.

Teaching is a passion for product designer (and Maven teacher) Joey Banks. He’s committed to helping his pupils feel more confident and capable while using Figma.

Joey’s experience with Figma goes back to 2016, and it’s been a love affair with the design tool (and its high-level capabilities) ever since. In fact, he even joined the Figma team in California for a period. He was so involved in the company that he spoke at Config 2022, a global design conference for users.

Furthermore, Joey has created multiple MacOS and iOS UI kits for Figma. These were so successful they received 500,000-plus downloads in the Figma Community.

Despite his incredible success with UI kits and vast industry experience, all designers from companies of all sizes are welcome in Joey’s specialized training and mentoring classes.

Working With Variables In Figma

Unlike tools such as Canva and Photoshop, Figma is catered to professional designers needing more comprehensive prototyping features and collaboration capabilities.

The challenge with Figma is its steep learning curve. Getting a good handle on it often requires a workshop or course to use it efficiently.

Figma’s broad capabilities make it overwhelming when you start using the app. Fortunately, the Figma tips (provided by Joey) below can help shed light on one crucial feature while using the tool: variables.

Figma’s Variables Bridge Design And Engineering

Since Figma brings design and engineering closer together via the Figma component properties, it enables reusable values in designs.
These reusable values include colors, buttons, inputs, controls, and text strings. Figma will match these crucial building blocks in code.
A system’s corner radius value or color can be represented by a number.
Additionally, colors can be referenced and defined when they’ve always been intended for use as a button’s background color.

The Four Variable Types

Color variable types can be used to stroke or fill colors. They refer to any variable involved with color definition.
Numbers provide a variable’s definition with a numerical value. They can be used for text layers, minimum/maximum heights or widths, padding/gap spacing values, and corner radius values.
The Figma boolean property has a starting default value when created. This feature enables boolean values (true/false) to be assigned to variables. Benefits include the ability to hide an image when using the design tool on mobile while displaying it on desktop (or equivalent) layouts.
String types help create specific character strings to be used within designs and across components. These are applicable to all text layers, such as anything nested within instances. Any language can be used to create text strings, allowing for seamless visibility into how helpful they’ll be for content management and localization efforts in the design tool.

Variables Can Be Applied Like Styles

Variables offer more streamlined and simplified organizational methods compared to styles. They also enable you to align with code more directly.
In switching to variables from styles in your component libraries, themes (e.g., dark and light modes) will mesh appropriately. The developer no longer has to worry about switching the colors between themes–the onus is now on the product designer.

Link Variable Definitions With Aliasing

Variable definitions get linked to already existing variables with aliasing on Figma.
Design tokens can be implemented, and processes can be streamlined while managing or making updates. A single variable can be linked with a dozen of aliased items.
Aliasing applies to boolean, number, and string variables.
Right-click on an already defined variable’s value, select “create alias,” and click the ”Libraries” tab (to see all compatible variables) to create an alias.

Variable Collections And Groups

Specific sets of variables and modes are referred to as variable collections.
Use collections to organize variables and keep them closely intertwined.
Collections are crucial for variable creation since they enable different modes.
Create new collections by navigating to the variable modal and selecting the top-left dropdown menu. Then, choose “create collection.”
Variable grouping can be enhanced via variable groups. These are akin to tiny folders able to contain larger variable sets.
Say your systems have a plethora of color variables applying to all backgrounds or buttons. A larger group will keep all related variables nearby, so you can access them seamlessly.
Right-click on one or several variables, then choose “new group with selection” to create groups.

Modes Offer Contextual Versatility

Since variables have different modes, you’ll benefit from different design contexts throughout a collection of variables.
When creating a new variable, the single column will display as a variable value, not a mode. Modes require two-plus value columns to exist.
With the differing modes offered by collections, modes for various applications (e.g., light/dark themes), screen size, and differing languages are easy to create.

Become a Proficient Product Designer With Maven

The above Figma tips will help you gain proficiency in the tool while bolstering your design systems. However, we’re only scratching the surface.

Whether you’re a beginner, content designer, or design team, Joey is a tremendous teacher who’ll help vastly upgrade your knowledge and skills with Figma. Learn more about Joey (and Figma) on his YouTube page, @joeyabanks. Or, listen to this podcast to hear some of his high-level insights.

You can sign up for his Figma Level-Up course today. Get a quick look at week one’s course content, including keyboard shortcuts and other helpful techniques.

At Maven, we connect top-performing experts like Joey with passionate learners like you. We also offer a wealth of other UX design courses for you to join in 2023. It's time to supercharge your career and never look back!