The difference between variables and styles
🚧 Variables is currently in open beta. We’ll continue to add more features and polish the experience during this time. Find out what’s coming next →
As Figma extends its feature set with variables, you might be wondering: What is the difference between variables and styles? When should I choose one over the other? Are styles becoming obsolete?
After all, they seem to function similarly on the surface:
- Both act as sources of truths
- Both can be published to team libraries and reused throughout designs
- Both support efficient design system management because updates to a variable or style will prompt updates for all design systems using them
In this article, we’ll answer those questions and cover the benefits of both. We’ll be primarily focused on color variables and color styles, since this is where the most overlap happens over other types.
Foundational differences
There are two main differences between styles and variables: the values they use and how the values are expressed on the canvas.
Color values
Every color in the digital color space is associated with a value. For example, white is represented as #FFFFFF
in HEX code. Some colors have specified opacities, such as #808080 at 50% opacity
. These are colors with single values.
Multiple values happen when you have two or more color values involved. The most common situation this appears in is with gradients, which require a blending of multiple colors.
Color variables can only hold single color values (solid fills).
Color styles can hold single and multiple color values (solid fills, gradient fills, image, GIF, video, and blend modes).
Both variables and styles can be applied to fill and stroke color properties.
An image variable type is coming soon →
Appearance on canvas
When styles and variables are applied to layers, the way their values appear on canvas differs because of the way they’re built.
Styles are built to hold a combination of values that are expressed all at once. This is true of all style types.
For example, looking at a color style is like looking at a “stack” of cards from above, where each card is a fill. This stack can include any combination of fill types and variables. If the color at the top is transparent enough, you can see the color below it. You can also manually rearrange fills to change what you see from the top.
Variables are built to hold one or more separate values, but only one value can be expressed at a time. This is true of all variable types. Instead of a stack of cards, a variable is more like a set of cards where you can view only one card at a time.
Additionally, each value corresponds to a different variable mode.
For example, let’s say we have a collection of variables with light and dark modes. We apply them to various layers in a frame, and set the frame to dark mode. All layers with the variables will express the values from dark mode. If we switch the frame to light mode, the variables will switch their expressed values to light mode.
While variable modes are built for variables, you can still take advantage of them through color styles. As mentioned, a style can include variables in its definition either standalone or in combination with other fills. Once this style is applied to your design, you can switch its mode just like you do for variables.
Takeaways
- If you want reusable colors that respond to different modes, you will need to create variables
- If you need reusable gradients, use blend modes, or stack multiple fills together, stick with styles
Design tokens
One of the biggest ways of managing sources of truth is through design tokens. With variables, we can implement design tokens through aliasing variables, which allows a variable to inherit another variable’s value as its own.
For example, let’s say Variable A has a value of #000000
and we want to alias it to Variable B, meaning B will inherit whatever definition A has.
If A’s value ever changes to a different value or even another variable, then B will follow suit as long as it’s still bound to A’s definition.
Aliasing is supported for all variable types. Learn how to alias variables →
Styles cannot be aliased. You can use color variables to define other color variables and color styles, but styles cannot be used to define either. This also means that styles are limited in the complexity and scalability of design tokens.
Learn how to back styles with variables →
Scalability and management
Aliasing variables opens the door to complex, scalable design token structures, which typically require more efficient updating and management processes.
For example, let’s say we create a variable that acts as a global token, and we use it to define other variables at varying levels. If the global token changes, then everything downstream changes.
If we only want some tokens to change, this structure allows us to choose the correct token upstream and change it without having to manually rework everything downstream.
Takeaways:
- Variables can be used to define other variables and styles, but styles cannot define either of those
- Aliasing variables allows for scalability and ease of management of design tokens
- Use variables for your global or primitive tokens
Supporting features
Scope variables
Scoping is fully supported for number variables but will be expanded to other variable types in the future.
Scope variables to limit which properties a variable can be applied to.
For example, you can limit a color variable to only stroke color, so you wouldn’t be able to apply the variable to any other fill properties. This gives you better control over where it can be used and cuts out the guesswork when designing.
Learn how to scope variables →
Takeaways:
- Since scoping is available to variables but not styles, use variables if you want to take advantage of scoping capabilities
- Scoping is currently available for number variables and will expand to other types in the future
Prototype with variables
In prototyping, variables are used to store object states or properties. Prototype interactions are used to modify variable values, which can change the appearance, content, or visibility of objects in a design—all in a few simple frames.
Learn how to use variables in advanced prototypes →
Code syntax with variables
Code syntax is currently in development and will be available soon.
When you open a variable’s editing modal, you’ll see a section titled Code syntax. Code syntax represents variables in code using valid variable names. This information will appear in Dev Mode and will help designers and developers create a seamless handoff experience.
Learn more about code syntax →
Takeaway: If you're looking to improve your handoff experience, you can take variables and code syntax into consideration
Final thoughts
Whether you choose to use variables or styles depends largely on your goals. You might focus solely on variables to take advantage of design token scalability. Or you might find that sticking to styles is suitable for your projects. Or you might end up using some combination of both!
Styles will remain ‌a key feature in Figma design. Despite their similarities, variables are not a replacement for styles. Rather, they are additive to Figma’s core feature set.
Variables is in open beta and will continue to grow to support additional variable types, extended collections, and more.