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 in Figma?
Variables are named values we can re-alias in layers that allow us to conditionally assign multiple potential values based on a series of conditional statements. We can also use them to create consistency in more simple use cases such as presets like padding values.
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
