The difference between variables and styles – Figma Learn - Help Center

🚧 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.

variables section with single color fill examples, styles section with single and multiple color fill examples

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.

Edit color style modal with cursor reordering stack of color fills

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.

switching frame between light and dark modes from the right sidebar

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.

Variable A aliased to Variable B with black color

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.

Variable A aliased to Variable B with pink color

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.

two flow charts with checkmark over one and x over the other

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.

cursor changes global token from pink to coral and all tokens downstream change

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.

token changes from pink global token to purple token and all tokens downstream change

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.

Learn what’s coming soon to variables →

···