Figma Variable Modes

Variable modes let one design show many looks. A single screen can appear in light theme, dark theme, or a different brand palette. Designers change a mode setting, and every linked color, number, or text value updates at once.

The Idea in Plain Words

Picture a lamp with a dimmer switch. The lamp stays the same, and the switch changes the glow. Modes work like that switch. The design stays the same, and the mode changes the values behind it.

Variables and Collections

A variable stores a reusable value. Variables live inside collections, and each collection can hold several modes. Every variable gets one value per mode.

Collection: Theme Colors

Variable             Light Mode     Dark Mode
------------------   ------------   ------------
color/background     #FFFFFF        #121212
color/text           #1A1A1A        #F5F5F5
color/primary        #2563EB        #60A5FA
color/border         #E5E7EB        #374151

Create a Collection with Two Modes

1. Click an empty area of the canvas to deselect everything.
2. Open Local variables from the right panel.
3. Create a new collection and name it Theme Colors.
4. Add color variables with clear names.
5. Click the plus icon beside the first mode column to add a second mode.
6. Rename the modes Light and Dark, then enter a value for each.

The number of modes allowed depends on your plan. Free plans offer a small number, and higher plans offer more.

Bind a Variable to a Layer

Select a rectangle and click the four-dot icon beside its fill color. Choose a variable from the list. The fill now follows the variable instead of a fixed hex code. Apply the same step to text, borders, and backgrounds.

Apply a Mode to a Frame

Select a frame and pick a mode for the collection in the right panel. Every layer inside that frame follows the chosen mode. Place two copies of one screen side by side and assign Light to one and Dark to the other.

Same screen, two modes

Frame A (Light)              Frame B (Dark)
+-------------------+        +-------------------+
| White background  |        | Near-black        |
| Dark text         |        | background        |
| [ Blue button ]   |        | Light text        |
+-------------------+        | [ Light button ]  |
                             +-------------------+

Primitive and Semantic Variables

Professional systems use two layers of variables. Primitives hold raw values. Semantic variables describe a job and point to a primitive through an alias.

Primitive            Semantic              Layer
-----------------    -------------------   --------------
blue/500 #2563EB  →  color/primary     →   Button fill
blue/300 #60A5FA  →  color/primary     →   Button fill (Dark)
gray/900 #1A1A1A  →  color/text        →   Body text

Rebrand a product by editing only the primitives. Semantic names stay stable, and every screen updates correctly.

More Uses for Modes

• Brand palettes: Show one app in several client colors.
• Device spacing: Use number variables with Mobile and Desktop modes for padding and gaps.
• Languages: Use string variables with English and Spanish modes to test text length.
• Seasonal themes: Preview a holiday campaign without duplicating files.

Naming Tips

• Use slashes to build folders, such as color/background.
• Name variables by purpose, not by appearance. Primary beats Blue.
• Keep names short and consistent across collections.

Common Mistakes

• Binding layers to primitives directly, which breaks theme switching.
• Leaving a mode value empty or identical by accident.
• Mixing unrelated variables into one huge collection.
• Testing only the light theme and shipping a dark theme with unreadable text.