Figma Variables: A Beginner's Guide (That Finally Makes Sense)

The first time you open Figma Variables, it feels like someone handed you a spreadsheet and a brand new vocabulary at the same time: collections, modes, scopes, aliases. You poke at it for ten minutes, nothing clicks, and you quietly go back to copy-pasting hex codes by hand. I did exactly that for way too long.

Figma Variables aren't actually hard, they are just explained badly. Once the core idea clicks, you'll wonder how you ever designed without them. In this guide I'll walk you through Variables the way I wish someone had walked me through them, in plain English with real examples and none of the jargon you don't need.

So what are Figma Variables, really?

Strip away the fancy words and a variable is just a saved value with a name.

Instead of typing the hex code #2B67E6 into forty different layers, you save it once as a variable called primary and reuse that everywhere. Change the variable, and all forty layers update at the same time.

Variables hold four kinds of values, and you'll use all of them:

• Color for fills, strokes, and text.
• Number for spacing, sizing, corner radius, and font size.
• String for text content, like button labels or status words.
• Boolean for true or false, which you can use to show or hide things.

If you have written variables in code this will feel familiar, and if you have not, just remember that a variable is a nickname for a value.

What variables actually save you

Setting variables up takes a little work upfront, and here is what you get back for it:

• Consistency. Every blue is the same blue. Every gap is on the same scale. Your designs stop drifting.
• Speed. Rebrand from blue to green in seconds, not hours.
• Theming. Light mode and dark mode from a single set of variables (more on this below, it's the best part).
• Cleaner handoff. Variables map almost one to one to the design tokens developers use in code, so handoff hurts a lot less.

Once a file grows past a few screens, doing all of this by hand is a tax you pay over and over. Variables stop the bleeding.

Collections: where your variables live

A collection is just a folder for related variables. When you open the Variables panel (we'll get there in a second), everything sits inside a collection.

For most projects, two collections will take you a long way:

• Primitives. Your raw values. Every shade of every color, your spacing scale, your radius sizes. Think blue/500, gray/100, space/16.
• Semantic. Values with a job. text/primary, background/surface, border/subtle. These point at the primitives (we'll cover that under aliases).

Don't overthink this at the start. One collection is fine while you are learning, as long as you know the folder is there.

Modes: the part that makes everything click

This is the feature people miss, and it's the one that makes Variables worth learning.

A mode lets a single variable hold different values in different contexts.

Picture a variable called background/surface. It is white in your Light mode and near-black in your Dark mode, one name holding two values. Flip the mode and your entire design re-themes in a single click, with no duplicate frames and no find-and-replace.

Modes aren't just for dark mode either. You can use them for:

• Brand A versus Brand B in a white-label product.
• Comfortable versus compact spacing.
• Different languages that need different text.

If you only take one thing from this guide, take this: modes are how you theme a design without rebuilding it.

How to create your first variable (step by step)

That covers the theory, so let's make one.

1. Open the Variables panel. With nothing selected, look at the right-hand sidebar and find the Local variables section, then click to open the panel. (You can also right-click the canvas and choose the variables option.)
2. Create a collection. Hit the create button and name it Primitives.
3. Add a variable. Click the plus, choose Color, and name it something clear like blue/500. Set its value to your hex code.
4. Add a few more. Add your grays and a couple of spacing numbers. Naming tip: use slashes to group, like space/8, space/16, space/24. Figma turns those into tidy nested folders.
5. Apply it. Select a layer, click the fill color, and instead of picking a raw color, click the little variable icon and choose your blue/500. That layer is now connected.

That's the whole loop: define a value, give it a name, apply it. Everything else is just doing more of this, more cleverly.

Aliases: the move that separates beginners from pros

Aliases are where variables get genuinely powerful. An alias is a variable that points at another variable instead of holding a raw value.

So you create blue/500 = #2B67E6 in your Primitives collection. Then in your Semantic collection you create text/link and set its value to blue/500. Now text/link doesn't store a color. It stores a reference.

Splitting it this way gives you two layers:

• The primitive layer is your palette. The actual colors.
• The semantic layer is your intent. What each color is for.

When you redesign, you change the primitive once and every semantic variable pointing at it updates. And in your designs you only ever apply the semantic ones (text/primary, surface/raised), so your work reads like plain English. This is exactly how design tokens work in real codebases, which is why developers love it. Set it up once and theming, rebrands, and dark mode become almost free.

Scoping: keep your variable menu sane

As your list grows, the dropdown of variables you can apply gets long. Scoping fixes that.

Scoping lets you say where a variable is allowed to be used. You can tell text/primary to only show up when you're choosing a text color, not a background. Open a variable, find the scope options, and uncheck the places it doesn't belong. It's a small feature, but on a big file it's the difference between a clean menu and a mess.

Common mistakes (I made most of these)

• Applying primitives directly. blue/500 is a fine name for a primitive, but don't apply it to a button. Apply action/primary, which points at it. Otherwise a rebrand means touching every layer again.
• Skipping the primitive-to-semantic split. It feels like extra work on day one. It saves you days later.
• One giant collection with two hundred variables. Group with slashes and split into collections so future-you can find anything.
• Forgetting to add a mode. If you ever want dark mode, set up the second mode early. Retrofitting it later is painful.
• Leaving hardcoded values behind. If you typed a raw hex into a layer, it isn't connected. Quietly check your designs for stragglers.

The honest truth about Figma Variables

Variables are genuinely great. They're also a lot of manual setup. You're building a small system by hand: every color, every spacing step, every semantic alias, every mode, every scope. For a real product, that's hundreds of decisions before you've designed a single screen. And then you still have to translate all of it into code.

That's fine if you love building design systems. Plenty of designers don't, and they just want a product that looks good and ships.

Or skip the setup entirely

Instead of wiring up variables, collections, and tokens by hand and then handing them to a developer, you can download a complete design system as code and let your AI coding agent drop it straight into your project. Dashboards, tables, settings, billing, auth, and onboarding. Real React, Vue, or HTML. Tokens already set up, components already built.

It's the same end result you're chasing with Variables (a consistent, themeable, production-ready system), except you skip the spreadsheet phase and your code is done at the same time. If you're designing a SaaS, that's worth a look. There's more on it in the box on this page.

Wrapping up

Let's recap the whole thing in plain terms:

• A variable is a named value you reuse.
• A collection is a folder for variables.
• A mode lets one variable hold different values, which is how you theme.
• An alias is a variable pointing at another variable, which is how you build primitive and semantic layers.
• Scoping keeps your menus clean.

Start small, with a handful of color and spacing variables. Apply them to one screen, add a dark mode, and watch the whole thing re-theme in a click. That single click is usually the moment Variables finally make sense. If you would rather skip the manual setup altogether, you already know where the shortcut is.