Working With Variables In Figma
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
Design System Bootcamp
5-week Bootcamp to build a design system & become a Figma expert.
Advanced Figma Training Program
Introducing 👉 ❖ Figma Academy 2.0 ❖ Where teams like Stripe and Shopify have sent 4,000+ designers to learn advanced design tactics
Launch Your Product Management Career
Land a great PM job and level up your product skills with my lessons from 10+ years at top tech companies
Learn how to work with Figma’s powerful new variables and advanced prototyping features.
Learn the art of Game Production from a AAA Game Producer
Level Up with Figma
Learn all you need to get started and excel with one of the industry's most widely used design tools.