How to Use Variables in Figma

Figma Variables are the closest thing to design tokens built directly into the tool. They let you define values once and reuse them everywhere — and when you change the variable, every element using it updates instantly.

What variables are

A variable stores a value — color, number, string, or boolean — and you apply that variable to properties in your design instead of typing raw values.

Color variables: Store hex/rgba values. Apply them to fills, strokes, and backgrounds.

Number variables: Store any numeric value. Apply them to width, height, padding, gap, corner radius, opacity.

String variables: Store text values. Apply them to text content — useful for prototype state management.

Boolean variables: Store true/false. Apply them to layer visibility, making elements toggle on and off in prototypes.

Creating a collection

Variables live in collections. Open the Variables panel via the local variables icon in the right panel, or go to Edit → Local variables.

Click "+" to create a new collection. Name it something meaningful — Colors, Spacing, Radius, Brand.

Inside the collection you create individual variables. Each variable has a name and a value. Good naming matters: color/brand/primary is more useful than blue1.

Modes

Modes are the feature that makes variables genuinely powerful. A single variable can have different values depending on the active mode.

The obvious use case is light/dark mode. Create a collection called Colors. Add a mode called Light and another called Dark. Now each color variable has two values — one for each mode.

Density is another use case: compact and default modes for spacing variables.

To switch modes in your design, select a frame, and in the right panel under "Variables" you'll see the collection mode selector. Switch the frame to Dark mode and every variable-bound color updates.

Setting up a semantic color system

This is the practical part. The mistake most people make is storing raw palette colors as variables and applying them directly. That works until you need dark mode.

Instead, build two layers:

Layer 1 — Primitives: The raw palette. color/palette/blue-500 = #3B82F6, color/palette/blue-700 = #1D4ED8, color/palette/neutral-900 = #111827. These don't get applied to components directly.

Layer 2 — Semantic tokens: Meaningful names that reference primitives.

Create a second collection called Semantic with Light and Dark modes. Then:

• color/bg/surface → Light: color/palette/white, Dark: color/palette/neutral-900
• color/text/primary → Light: color/palette/neutral-900, Dark: color/palette/neutral-50
• color/interactive/primary → Light: color/palette/blue-500, Dark: color/palette/blue-400
• color/interactive/primary-hover → Light: color/palette/blue-700, Dark: color/palette/blue-300

In your components, apply only semantic variables. Never apply a primitive directly to a component fill.

Now switching a frame from Light to Dark mode works automatically.

Try Figma Free

Applying variables to properties

Right-click any fill, stroke, or text property and you'll see "Apply variable." Alternatively, click the color chip next to any property and switch from the color picker to the variable library tab.

For number variables — padding, gap, corner radius — click the value field and type $ to trigger the variable picker, or right-click the field.

Using variables in prototypes

Boolean and string variables become useful in prototypes. You can set a variable on interaction — "On click, set variable modal/isOpen to true" — and use that variable to control layer visibility.

This lets you build interactive components with real state: open/closed dropdowns, filled/empty form states, selected/unselected tabs. Previously this required duplicating frames; with variables you can do it in a single frame.

Go to the Prototype tab, add an interaction, and choose "Set variable" as the action. Then use "Conditional" interactions to branch based on variable values.

Common mistakes

Using variables only for colors. Spacing variables are just as valuable. If every padding value in your components references a spacing variable, you can change your base spacing scale and everything updates.

Not using semantic naming. Variables named blue or gray-200 don't tell you where they're used. When you need to change your primary action color, you want one variable to update, not a search-and-replace.

Mixing modes incorrectly. Modes only work when the variable's collection has multiple modes defined. If you create a variable without setting up modes first, you can't add them to individual variables retroactively — you set modes at the collection level.

Variables are one of the features that makes Figma genuinely better for design systems than its competitors right now. Invest the time to set them up properly at the start of a project — it pays off every single time.