Variables & Modes

Figma variables are a game-changer for design system management. They let you define values once and reference them everywhere, with the ability to switch between different sets of values — called modes — for theming, responsive design, and more. If you have used CSS custom properties or design tokens, variables will feel familiar.

What Are Variables

Variables are named values that can be applied to design properties. Instead of hardcoding a hex color or pixel value directly on a layer, you reference a variable that holds that value. When the variable changes, every layer referencing it updates automatically.

Variable types in Figma:

• Color — Hex values, RGB, or RGBA. Used for fills, strokes, and effects.
• Number — Numeric values. Used for spacing, padding, corner radius, stroke width, and opacity.
• String — Text values. Used for text content in prototypes and conditional text.
• Boolean — True/false values. Used for toggling visibility in prototypes.

Practical example: Instead of applying #1E1E1E to every text layer, create a variable called text/primary set to #1E1E1E. If the brand color changes or you need a dark mode version, you update the variable once and every instance follows.

Setting Up Color Variables

Organize your color variables with a clear naming hierarchy. A recommended structure:

Primitive colors (raw values):

• gray/50 = #FAFAFA
• gray/100 = #F5F5F5
• gray/900 = #1E1E1E
• blue/500 = #3B82F6

Semantic colors (references to primitives):

• bg/primary = gray/50
• bg/secondary = gray/100
• text/primary = gray/900
• text/link = blue/500

This two-tier approach separates your raw palette from how colors are used. The semantic layer is what designers apply to their work. The primitive layer is where color values are defined.

Practical tip: Use Figma's variable groups (created with / in names) to organize variables into collapsible sections. bg/primary, bg/secondary, and bg/surface will all appear under a "bg" group.

Spacing Variables

Consistent spacing is one of the strongest indicators of design quality. Define a spacing scale as number variables:

• spacing/xs = 4
• spacing/sm = 8
• spacing/md = 16
• spacing/lg = 24
• spacing/xl = 32
• spacing/2xl = 48

Apply these variables to auto layout padding, gap, and margin properties. When you need to tighten or loosen the overall spacing of your design, adjusting these variables ripples changes throughout your entire file.

Modes for Theming

Modes are the killer feature of Figma variables. A mode is an alternative set of values for the same variables. The most common use case is light and dark themes.

Setting up light/dark modes:

1. Create a variable collection called "Theme"
2. Add two modes: "Light" and "Dark"
3. Define your semantic color variables with different values per mode:

4. Apply these variables to your designs
5. Switch between modes at the frame level — select any frame and change its mode in the design panel

The beauty of modes is that you design once and switch themes instantly. No duplicate frames, no manual color overrides.

Responsive Modes

Modes are not limited to theming. You can use them for responsive design by creating modes for different breakpoints:

Example: Spacing modes

Apply a mode to a top-level frame, and all child elements using those variables adapt automatically. This is far more efficient than manually adjusting spacing on every component for each breakpoint.

Scoping Variables

Figma lets you scope variables to specific properties, controlling where they appear in the interface. Scope a color variable to "Fill" only, and it will not clutter the stroke color picker. Scope a number variable to "Gap" only, and it will not appear when setting corner radius.

Proper scoping keeps the variable picker clean and prevents accidental misuse.

Key Takeaways

• Variables replace hardcoded values with named, reusable references
• Use a two-tier system: primitive values and semantic references
• Modes let you switch between themes or breakpoints on any frame
• Scope variables to specific properties to keep the interface clean
• Spacing variables enforce consistency across your entire design