Last updated: October 23, 2026
Key Takeaways
- Figma Variables let you reuse design values across frames, components, and modes.
- A workable setup needs stable names, enough reuse to justify it, and clear mode choices.
- You create a collection, add the right variable types, then apply them to fills, strokes, text, and layout values.
- Modes let one collection store Light and Dark, or Comfortable and Compact, versions of the same value.
Figma Variables for Colors, Spacing, and Modes let you control colors, spacing, and mode-based UI changes from one place, so a button, card, or layout can update without hunting through dozens of layers. They suit product teams that need light and dark themes, density changes, or token-like consistency in Figma, but they are not the right answer if you only need a few one-off values.
What Figma Variables do for a real UI system
Figma Variables turn repeated design values into named values you can reuse across frames, components, and modes. That means a fill can point to a color variable, a padding value can point to a number variable, and text or logic can read from a string or boolean variable when needed.
The useful part is not the feature list. It is the control. If your interface has a default mode, a dark mode, and a compact density, variables let the same component change appearance or spacing without duplicating the component 3 times. Figma’s Variables and Modes documentation is the right place to verify the current UI and terminology: https://help.figma.com/hc/en-us/articles/14562728344215-Variables-and-modes
This is a practical fit for people who already work with design tokens, or who want a token-like workflow inside Figma before handoff. It is less useful if the design is still changing every hour and the team has not settled on names like color/bg/default or space/16. In that case, the overhead of naming, grouping, and aliasing can slow you down more than it helps.
The trade-off against plain styles is simple: styles are quick for a small set of paints and text settings, while variables scale better when the same value needs to change by mode or by semantic meaning. If the goal is “make this blue everywhere,” a style may be enough. If the goal is “make this surface color adapt across 2 modes and 3 product areas,” variables are the better fit.
What you need first before you start
You need a stable naming plan, a file with enough components to justify reuse, and a decision about which values should vary by mode. Without those 3 things, variables become a neat storage box for chaos.
Start by deciding the first 3 groups you want to control: color, spacing, and mode behavior. For most product UI, color variables deliver the biggest payoff first. Spacing variables come next if you have repeated 4 px, 8 px, 12 px, 16 px, and 24 px patterns. Boolean and string variables usually come later, when you need on/off states or labels that change by context.
A simple naming pattern helps more than a clever one. Use names that tell you the role of the value, not just its appearance. For example, color/bg/default is easier to maintain than blue-500, because the same color can move between themes while keeping its job. This matters as soon as you have 2 collections or 2 modes.
Before creating anything, decide where each variable lives. Color variables often belong in a collection such as “Core” or “Semantics,” while spacing variables often belong in a separate collection so they are not mixed with palette values. Keeping them apart reduces accidental edits and makes aliasing easier.
How do I set up Figma Variables for colors and spacing?
You set up Figma Variables by creating a collection, adding variables of the right type, then applying them to fills, strokes, text, and layout values. The result should be that one variable can drive many properties, and mode changes update all linked places at once.
- Open the Variables panel and create a collection for the system you want to control. Name it something like “Core UI” or “Marketing UI,” not “New Collection.” When this works, the collection appears as a container for related values rather than a loose list.
- Add color variables for semantic roles first, such as background, surface, text, border, and accent. If you already know the palette, keep the palette in one place and the semantic names in another. When this works, you can pick a variable like `color/text/default` instead of a raw hex value.
- Add number variables for spacing values such as 4, 8, 12, 16, and 24. Use these for padding, gap, corner radii, and sizing rules where Figma accepts numbers. When this works, spacing fields show the variable name instead of a hardcoded number.
- Assign the variables to real layers: fill a frame with a color variable, set a component’s padding or gap to a number variable, and bind borders or text colors where needed. When this works, the layer still looks the same, but the source value now lives in the collection.
- Test a single update by changing one variable value and checking every linked object. If you change `color/bg/default`, all linked surfaces should shift together; if you change `space/16`, every linked spacing field should reflect the new value. When this works, you have confirmed the binding, not just created names.
The common mistake here is creating variables before deciding whether they are semantic or literal. If you store #FFFFFF as the only white in the file, you leave little room to change theme behavior later without renaming half the system. A semantic layer gives you room to shift meaning while keeping components stable.
Another common mistake is using variables for every value in the file. That creates noise. A button label that changes once a year does not need a variable. Save variables for values that repeat, shift by mode, or need coordinated updates.
How do modes work in Figma Variables?
Modes let one variable collection hold multiple versions of the same value, such as Light and Dark, or Comfortable and Compact. That means the same component can read a different color or spacing value depending on the active mode.
The easiest way to think about modes is as named states inside a collection. A color variable might have one value for Light mode and another for Dark mode. A spacing variable usually does not need mode changes, but it can if your density system changes padding or gaps between a comfortable and compact layout.
This is where variables become more than a token list. A card can keep one fill binding while the collection decides which actual color appears. If the mode changes, the card does not need a separate duplicate. That saves maintenance, especially in files with many repeated components.
The trade-off is that modes can hide complexity. A file with 3 collections and 4 modes can become hard to read if naming is vague. If you cannot tell whether a value is a palette color, a semantic surface color, or a mode override, the system will slow down instead of speeding up.
Use modes where behavior changes, not where preference changes. A light/dark split is a strong use case. A one-off visual experiment is not. If the team has not agreed on the system behind the modes, the feature will expose that weakness very quickly.
Which variable types should I use for UI behavior?
Use color variables for paint, number variables for measurable UI values, string variables for text-like values, and boolean variables for on/off behavior. The right type keeps the system predictable and avoids forcing one kind of data into another.
Color variables fit fills, strokes, shadows, and any property that expects a color. They are the core of light and dark mode work. Number variables fit spacing, opacity-like numeric fields where supported, sizing rules, and radii. If you want a compact density mode, number variables are the obvious choice.
String variables are useful when the label itself changes by mode or context, such as a platform-specific word, a status label, or a product name used in multiple places. They are not a substitute for content management. If the text changes daily, keep it out of the design system.
Boolean variables are for switches: show or hide, enabled or disabled, true or false. They help when a component needs different behavior in different contexts, but they should stay rare. Too many booleans create branching logic that is difficult to scan inside a design file.
A good test is this: if the value represents a measurable quantity, use a number. If it represents a visual paint, use a color. If it represents a phrase, use a string. If it represents a state, use a boolean. That rule is simple enough to teach and strict enough to keep the system clean.
How do aliasing and variable collections keep things maintainable?
Aliasing lets one variable point to another variable, and collections keep related variables grouped so you can manage them without losing track. Together, they let you build a layered system instead of a flat pile of values.
A common pattern is to keep raw palette values in one collection and semantic UI values in another. For example, a semantic variable like color/surface/default can alias a base palette variable such as gray/0 in Light mode and gray/900 in Dark mode. That gives you two benefits at once: the design system speaks in interface language, and the underlying palette can change later without a full rewrite.
Collections also help separate concerns. Put color in one collection, spacing in another, and state-driven values in a third if the file is large enough to need it. That separation makes it easier to hand off work, because a spacing edit does not sit next to a theme edit.
The mistake to avoid is aliasing everything to everything. If every semantic variable points through 3 layers of indirection, nobody will know which value actually drives the UI. The point is clarity with reuse, not a maze. A short chain is useful; a deep chain is a tax on every future edit.
This structure is also what makes Figma Variables fit into a larger automation workflow. If you are building a repeatable file process, the hub on Figma Workflow Automation is the right place to connect variables to broader file operations without turning the design file into a manual maintenance job.
Common mistakes with Figma Variables and how to avoid them
Figma Variables fail when the system is too literal, too flat, or too crowded with exceptions. The fix is to separate raw values from semantic meaning, limit collections, and use modes only where the interface truly changes.
The first mistake is binding a component directly to a palette swatch. That works for a demo and breaks for a real product. The cost is simple: changing the theme becomes a search-and-replace exercise. Instead, bind components to semantic variables such as surface, text, or border, then let those semantic values map to the palette underneath.
The second mistake is mixing spacing and color in the same naming pattern without a clear system. A collection full of blue-100, 16, 24, and surface values is hard to scan. The cost is confusion during edits, especially when another designer joins the file. Put related kinds of values into separate collections or at least separate naming families.
The third mistake is using modes for everything. If a value does not change by context, a mode adds noise. The cost is a file that looks flexible but behaves unpredictably. Use modes for Light and Dark, or Comfortable and Compact, not for every small preference.
The fourth mistake is skipping a naming standard. That usually shows up as bg, background, surface-1, and primary-bg all meaning roughly the same thing. The cost is drift. The next person cannot tell which variable should be reused. Pick one naming pattern and stick to it for the whole collection.
What should a good Figma Variables setup look like at the end?
A good Figma Variables setup looks boring in the best way: one collection for each job, clear semantic names, a small number of modes, and components that update when the source value changes. If changing one variable forces you to touch 12 layers, the system is not doing its job.
You should be able to answer 4 questions at a glance: what is the base palette, what is the semantic layer, which values change by mode, and which variables are numbers versus colors versus booleans. If the answers are buried, the structure is too loose.
A practical end state for many files is this: colors split into palette and semantic collections, spacing handled by number variables, and modes kept to the smallest useful set, often 2. That is enough to support a light/dark color system and a simple density adjustment without turning the file into a puzzle.
This is also where restraint matters. Figma Variables are strong for controlling repeated UI behavior, but they are not a cure for an unclear design system. If the underlying naming and mode choices are bad, variables will preserve the mess more efficiently.
What are figma variables used for?
Figma Variables are used to control repeated design values such as colors, spacing, and state-driven settings from one source. They are especially useful for modes like light and dark, or comfortable and compact layouts, because one variable can return different values depending on context. They are less useful for one-off visual tweaks.
How do variables differ from styles in figma?
Variables differ from styles because they can drive more than appearance and can change by mode. Styles are good for grouping a paint or text choice, while variables can also hold numbers, strings, and booleans. That makes variables better for systems that need reusable behavior, not just reusable looks.
can figma variables support dark mode?
Yes, Figma Variables can support dark mode by assigning different values to the same variable in different modes. A color variable can map to a light surface in one mode and a dark surface in another. The weak point is naming: if semantic names are unclear, dark mode becomes hard to maintain.
Drafted with AI; not yet reviewed by a person.
