Property Types

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

Overview

In the Universal Design System (UDS), property types help define and control how components behave, look, and adapt across contexts. These properties are powered by Figma variables, which allow us to build flexible, responsive, and accessible components using reusable tokens.

Property types allow us to define rules around appearance, behavior, content, and structure — keeping components consistent and scalable without hardcoding values.

🎨 What Are Variables?

Variables are raw values — like colors, numbers, or text — that can be reused and adjusted depending on the design context (e.g. light vs. dark mode, mobile vs. desktop).

When used in components, variables:

  • Ensure consistency across projects

  • Enable theme-aware styling (like dark mode)

  • Allow quick updates across files

  • Support localization, accessibility, and responsive behavior

📂 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
PreviousComponent PropertiesNextColor Values

Last updated

Was this helpful?