Imagine you're designing an app. You pick the perfect shade of blue for your main button. You use it for links, icons, and backgrounds. A week later, you decide to use a slightly different blue. Now you have to hunt down every single instance of that old color and change it manually. It's tedious and easy to miss one.

This is where variables come in. Think of a variable as a labeled container for a design choice. Instead of applying a specific color hex code like #0A74FF everywhere, you create a variable called brand-primary, put that hex code inside it, and then apply brand-primary to your elements.

Now, if you want to change the color, you just update the value inside the brand-primary container. Every element linked to it will update instantly. This saves time and ensures consistency across your entire design.

This concept, often called 'design tokens', is the foundation of building scalable and maintainable design systems. It bridges the gap between design and code, as developers use variables in the same way.

Figma supports four types of variables. Each one is a container for a different kind of information.

1. Color: This is the most common use case. Store your brand palette, text colors, background shades, and border colors. You can apply these variables to fills, strokes, and text.

2. Number: Use this for any numerical value. Think spacing (8px, 16px), corner radius (4px), font sizes (16pt), or stroke widths (2px). It helps maintain a consistent rhythm and scale in your designs.

3. String: This variable holds text. It's perfect for things that appear in multiple places, like a button label ("Sign Up Free"), a company tagline, or a legal disclaimer. Change it once in your variables list, and it updates everywhere.

4. Boolean: A boolean variable can only be true or false. This is useful for controlling the visibility of layers or components. For example, you could have a boolean variable called show-icon. When it's true, an icon appears; when it's false, it's hidden.

As you create more variables, you'll need a way to keep them organized. Figma provides two powerful features for this: Collections and Modes.

Organizing variables into collections keeps your design system neat and makes it easier to find what you need. For example, you could group all primitive values (like raw hex codes) in one collection and all semantic values (like color-background-button-primary) in another.

Modes are different states or contexts for your collections. A mode allows a single variable to have different values depending on the context. The most common example is creating light and dark themes.

In this example, the color-background variable has two different values. When a frame is set to "Light Mode", it will use #FFFFFF. When it's set to "Dark Mode", it will automatically switch to #1E1E1E. You don't need to create separate variables like color-background-light and color-background-dark.

Modes aren't just for themes. You can use them for different device sizes (e.g., compact vs. spacious layouts), languages, or brands within the same design file. This makes variables an incredibly flexible tool for building complex and dynamic designs efficiently.

Ready to test your knowledge? This quiz will cover the basics of what variables are and how they're used.

By using variables, you create a single source of truth for your design decisions. This simple but powerful feature is a key step toward building more professional, consistent, and scalable designs.