Variables + Property Types

In the Universal Design System (UDS), property types help define and control how components behave, look, and adapt across contexts.

📂 Types of Properties

Figma supports four main variable types. Each has specific use cases within our system:

🟥 1. Color Variables

Used to define visual styling (e.g., fills, strokes, text).

• Example values: #000000, #FFCD29

• Supports light/dark themes, semantic tokens, and brand palettes

• Can be aliased for token layering (e.g., content/01 → grey-style/onyx/01)

🔗 Commonly applied to:

• Fill & stroke

• Text color

• Shadow/blur color

• Gradients

---

🔢 2. Number Variables

Used to define numeric values such as spacing, sizing, and typography.

• Example values: 16, 0, -8, 12.5

• Can be used for responsive layouts, font styles, and layout grids

🔗 Commonly applied to:

• Font size, weight, line height, letter spacing

• Padding, margins, gaps

• Corner radius

• Layout grids and alignment

---

🔤 3. String Variables

Used to define text and string-based values, including copy and font family names.

• Example values: "Hello, world!", "Inter", "Bold Italic"

• Supports localization, text-based token values, and font styling

🔗 Commonly applied to:

• Text content

• Font family or weight (by name)

• Variant values in prototyping

• Visibility toggles using string conditions

---

✅ 4. Boolean Variables

Used to toggle true/false states, often for conditional rendering.

• Example values: true, false

• Great for hiding/showing layers and toggling visual states

🔗 Commonly applied to:

• Layer visibility

• Boolean variants (e.g., show icon, outline mode, descriptive image)

---

🔁 Aliasing (Design Token Support)

A variable can reference another variable of the same type — this is called aliasing. It’s how UDS supports design tokens with layered naming (e.g., border/01 → brand-style/sun/01 → #FFCD29).

Benefits:

• Easier theme switching

• More readable token names

• System-wide updates by changing a single value

---

🗂 Collections, Groups & Modes

To manage complexity and scale, variables are organized using:

📦 Collections

• A set of variables (e.g., all spacing tokens, all brand colors)

• Each collection can contain up to 5,000 variables

• Includes all related modes

🗃 Groups

• Nested folders within collections for better organization

• Example: In a color collection, you might have groups like:

  • content/

  • surface/

  • status/

🎛 Variable Modes

Modes define contextual values for the same variable (e.g., light/dark, mobile/desktop).

Example:

content/01
  - Light Mode: #000000
  - Dark Mode: #FFFFFF
Use modes for:

Light/dark theming

Locale switching (text in different languages)

Responsive spacing for screen sizes

✨ Why It Matters
By understanding and using property types:

Designers gain more control and flexibility

Developers can reference semantic tokens rather than raw values

The system becomes more accessible, localizable, and theme-aware

UDS uses variables and property types as the foundation for all appearance layers, token logic, and component design — enabling scalability and creative freedom without sacrificing consistency.

🔍 Next: Learn more about each property type
→ Color Values
→ Number Values
→ Boolean Values
→ String Values