3 Things I Learned Using Design Tokens in UX/UI Design

Gerald Canario
2 min readMay 22, 2024
  1. Consistency Across Platforms

I’ve learned that design tokens ensure design properties like colors, typography, and spacing remain consistent across various platforms and devices. This means that whether I’m designing for web, iOS, or Android, I can rely on a unified look and feel.

In my projects, I use design tokens to define key design properties. For instance, by setting a primary color token, I ensure that this color is consistently applied to buttons, headers, and links across all platforms. This consistency helps create a cohesive user experience regardless of the device or platform.

2. Easy Theming and Customization

I discovered that design tokens make theming and customization quickly. By adjusting token values, I can switch between different themes or apply brand-specific styles without altering the underlying components (faster).

For a recent project, by using design tokens from the beginning, I updated properties for the whole project with just a few clicks and saved the deadline.

3. Scalability and Maintenance

I’ve found that using design tokens greatly enhances the scalability and maintenance of design systems. When I update a token, the changes automatically propagate to all linked components, making it easy to manage and update designs consistently across large projects.

In a large-scale application, I utilized design tokens for fundamental design elements like spacing and typography. When it became necessary to adjust the overall spacing for better readability, I only needed to update the token values. This change was then automatically reflected in all components, ensuring a consistent and efficient update process across the entire design system.

--

--

Gerald Canario

UI/UX Designer creating meaningful experiences based on data analysis.