Changing a brand color across 200 screens used to mean hunting through layers or hoping a style update caught everything. Figma variables solve that problem. They store reusable values, such as colors, spacing, text, and true/false switches, and let you apply them across a whole file or design system.

This Figma variables guide explains what variables are, how collections and modes work, how to structure them, and how to avoid common mistakes.

What Are Figma Variables?

Variables are named values you can reuse in designs and prototypes. Instead of typing a hex code or a spacing number every time, you bind a property to a variable. Change the variable once, and every connected element updates.

With variables, you can:

• Store design tokens for color, spacing, radius, and typography values
• Switch themes such as light and dark mode in one click
• Support multiple brands or languages in a single file
• Add logic to prototypes with conditions and state
• Keep design and code closer through shared naming

Styles vs. Variables

Styles still have a role, especially for text and effects. Many teams use both together.

Why Variables Matter

Modern products need to adapt to themes, brands, devices, and languages. Variables make that practical without duplicating screens.

Using variables helps teams:

• Save time on global updates
• Improve consistency across files and platforms
• Build theme-ready design systems faster
• Reduce handoff confusion with clear, named tokens
• Prototype more realistically with interactive states

The Four Variable Types

1. Color Variables

Store colors for fills, strokes, and effects.

• Examples: brand/primary, text/default, surface/background
• Best for theme switching and brand systems
• Combine with modes for light and dark versions

2. Number Variables

Store numeric values used in layout and shape properties.

• Examples: spacing/md, radius/card, font-size/body
• Apply to padding, gap, corner radius, width, and height
• Useful for responsive and density variations

3. String Variables

Store text values.

• Examples: button/label, brand/name, greeting/message
• Useful for localization and content variations
• Great for testing short vs. long text in components

4. Boolean Variables

Store true or false values.

• Examples: show-badge, is-logged-in, has-error
• Control layer visibility and component states
• Useful for prototype conditions and variant toggles

Collections and Modes

What Are Collections?

A collection is a group of related variables, such as “Colors,” “Spacing,” or “Typography.” Collections keep files organized and make modes easier to manage.

What Are Modes?

Modes are alternate sets of values within a collection. Each variable has a value per mode.

• A Colors collection with Light and Dark modes
• A Brand collection with Brand A and Brand B modes
• A Language collection with English, Spanish, and German modes
• A Density collection with Compact and Comfortable modes

Switch a frame’s mode, and every bound element updates instantly.

Example: Light and Dark Mode

How to Create Your First Variable

Step-by-Step

• Open the Local variables panel from the right sidebar with nothing selected
• Click Create variable and choose a type, such as Color
• Name it clearly, such as surface/background
• Enter a value, then add modes if needed
• Select an element and apply the variable to a fill, stroke, padding, or other property

Applying Variables

• Click the variable icon next to a property
• Choose the variable from the list
• Detach it later if you need a one-off value
• Use scoping to limit where a variable appears, such as color variables only for fills

Naming and Structuring Variables

Good structure keeps files understandable as they grow.

A Common Two-Layer Approach

• Primitive variables: raw values such as blue/500 or gray/100
• Semantic variables: purpose-based names such as button/background or text/muted
• Use aliases so semantic variables point to primitive ones

This means a theme change only needs a new alias, not a rewrite of every component.

Naming Tips

• Use slashes to create groups, such as color/text/primary
• Name by purpose, not appearance, for example surface/error instead of red-light
• Keep consistent patterns across collections
• Avoid abbreviations only you understand
• Match names with code tokens where possible

Variables in Prototyping

Variables also bring logic to prototypes.

• Create boolean variables for states such as logged in or out
• Use conditionals to change what happens when a button is clicked
• Set variables on interactions, such as toggling a switch
• Show or hide elements based on variable values
• Build realistic flows, such as a form with validation or a cart with counters

This helps teams test ideas before handing them to developers.

Real-World Use Cases

Variables Examples Worth Studying

The design systems below are widely known for using tokens and structured values.

Key Takeaways from These Examples

• Semantic names scale. Roles outlast specific colors.
• Documentation matters. Teams adopt tokens they understand.
• Themes need planning. Start with modes in mind, not as an afterthought.

Best Practices for Figma Variables

• Start small. Begin with color and spacing before adding every type.
• Separate primitives from semantics using aliases.
• Use scoping so designers only see relevant variables for each property.
• Keep collections focused, such as one for color and one for spacing.
• Document usage with short descriptions inside the variable panel.
• Audit regularly for unused or duplicate variables.
• Align with developers on names and values.
• Publish libraries so teams use the same variables across files.

Common Figma Variables Mistakes to Avoid

• Naming by appearance, such as “light-blue,” which breaks in dark mode
• Skipping aliases, which forces repeated manual updates
• Creating too many variables without a clear structure
• Mixing purposes in one collection
• Hard-coding values next to variables in the same component
• Ignoring contrast checks across modes
• Not testing components in every mode

How to Build Variables Skills

Variables become easier with practice and real projects.

Audit an Existing File

A structured UI UX audit mindset helps you find hard-coded colors, inconsistent spacing, and missing theme support. Turning those findings into variables is a strong first project.

Practice with a Small System

• Create a color collection with light and dark modes
• Build a spacing scale using number variables
• Apply them to a button, card, and form
• Switch modes and test every component
• Add a boolean variable to toggle an error state

Scale with Expert Guidance

As projects grow, working with a team that offers UI/UX design services shows how variables connect research, components, and production-ready screens. For long-term consistency, a documented design system turns variables, components, and rules into a shared source of truth for designers and developers.

Measure Your Progress

• Can you switch themes without editing individual elements?
• Do your variables use clear, semantic names?
• Are your components fully bound to variables?
• Can developers map your variables to code easily?
• Do you test every mode before handoff?

Frequently Asked Questions

What are variables in Figma?

Variables are reusable named values, such as colors, numbers, text, and true/false switches, that you can apply to designs and prototypes and update globally.

What is the difference between Figma styles and variables?

Styles save groups of properties like text or effects. Variables store single values, support modes such as light and dark, and can power prototype logic.

What are modes in Figma variables?

Modes are alternate sets of values inside a variable collection, such as light and dark themes, different brands, or different languages.

Should I replace all styles with variables?

Not necessarily. Many teams use variables for color, spacing, and other single values, and keep styles for text and effects.

Final Thoughts

Figma variables turn design files into flexible, theme-ready systems that stay consistent as products grow. When you combine clear naming, aliases, collections, and modes, global changes become simple and handoff becomes smoother.

Start with color and spacing, build a small system, and test it in every mode. Then expand step by step. The result is a design workflow that is faster, cleaner, and easier to scale.