The difference between variables and styles

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 desigs using them.

Styles and variables have key differences that make them valuable in different situations.

In this article, we’ll highlight their differences and help you decide whether to use on, or both, in your designs.

Foundational differences

There are a couple of key differences between styles and variables:

• The types of values they use
• Their appearance on canvas and use of modes

Types of values

Variables use single, raw, reusable values.

For example, raw values can include solid fills like #FFFFFF, numbers like 16 or -32.75, and boolean values true and false.

Styles use single, raw values; data with multiple values; as well as other formats. 

For example, a color style can use solid fills (single raw values), gradients (multiple values), as well as other formats (images, GIFs, videos, and blend modes).

Appearance on canvas

Styles are built to hold a combination of values, where the values get expressed all at once.

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 single, reusable values, but only one value can be expressed at a time. Each value corresponds to a different variable mode. This is true of all variable types. A variable is like a special set of cards with which you can view only one card at a time.

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.

Even though modes are built for variables, Figma allows us to apply them to styles.

Say we have a number variable for a default font size. The variable has two single, raw values: 16 for a mobile mode and 18 for a desktop mode. We apply this variable to a text style’s font family property, as well as other variables and values to other properties.

Now, we can switch the mode on any text layer using this text style, because it uses a variable with multiple modes.

Learn how to back styles with variables →

Scalability and management

One of the most powerful ways of managing and scaling a design system is through aliasing tokens.

• A design token is an industry term to refer to reusable values, meant to help design and code stay in sync.
• Aliasing is a method of organizing a design system by allowing any design token to inherit the value of another design token.

Variables allows you to do exactly this.

For example, let’s say the variable "brand-400" (which is one of our design tokens) has a value of #EAEA00. We want the variable "icon-default" (another design token) to be an alias of brand-400, meaning it will inherit whatever value brand-400 has.

If the value of brand-400 ever changes, then icon-default will follow suit, as long as it’s still bound to brand-400’s definition.

Styles don't support aliasing. In other words, they cannot be applied to variables and other styles. Variables can be applied to both.

Because variables support aliasing, it offers more robust support for complex, scalable token structures. They allow you to define primitive values that can flow through other tokens and elements of your design system. It also makes updating and managing design systems more efficient.

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.

Aliasing is supported for all variable types. Learn how to alias variables →

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 fills, 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 →

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 →

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.