In the realm of product design, especially for Software as a Service (SaaS), it's imperative to keep consistency and ease of use at the forefront. While working on complex B2B products, I have made these qualities paramount in our work for the clients. One framework that has proven invaluable in achieving this balance is the use of design tokens. Through the amazing Figma Tokens plugin, we've helped countless clients streamline their design systems and amplify their products' visual appeal.

What Are Design Tokens?

Design tokens can be thought of as the atomic elements of a design system. They are small, individual pieces of design information used to define and communicate the style properties of a design system. They encapsulate visual design attributes such as colour, typography, spacing, shadows, and others. These tokens can then be utilized across all components of a product's design, ensuring consistency, and simplifying updates and changes.

I use the Figma Tokens (Tokens Studio) plugin pretty much every day to manage design tokens. This tool enables us to define a set of tokens within Figma that can be applied to various design components. It allows for seamless, centralized control of design attributes and makes us, designers, feel closer to the front-end world by forcing us to be consistent and design logically. We wrote more about how we apply design tokens here.

Prerequisite: Do You Have a Proper Design System?

Many of our clients used to tell us at the beginning of our relationship that they already had a Design System. Upon closer inspection, it would always be clear that it's not a real design system, but rather a style guide or a component library that has only been used by their previous designer.

Before starting with design tokens, you should first have a detailed design system with explicit documentation, consisting of various levels of components and style guides, starting with colors and typography, and ending with reusable organisms such as tables, calendars, sidepanels, etc. Read our guide on creating design systems.

The Problem Tokens Solve

If you already have a Design System with Atoms, Molecules and Organisms, we can start looking into applying Design Tokens on top.

SaaS products, by their nature, tend to have extensive design systems due to their inherent complexity and the broad range of functionalities they offer. Managing such comprehensive systems can become challenging, especially when changes need to be implemented across multiple components or when scaling the product.

This is where design tokens come in. For every Design System, we establish a system where a single change updates the corresponding attribute across all components. It facilitates a smooth and efficient way to maintain an extensive design system, reducing manual labour and minimizing errors.

Theming: Light, Dark Themes, and More

Theming is a crucial aspect of SaaS product design. Today's users expect the ability to switch between light and dark themes, or even customize themes to their liking. Using design tokens, theming becomes a straightforward process. It's also possible to do theming with Figma's native variables, but Variables are still at the early stage and have quite a few limitations, hence we only recommend using them for smaller projects like web design, but not design systems.

We can define separate groups of design tokens for different themes, each containing specific values for colours, typography, and other style attributes. Switching between themes becomes as simple as pressing a few buttons and waiting for everything to load. Furthermore, creating a new theme is as easy as defining a new set of tokens, which dramatically simplifies the process compared to traditional theming methods.

Update Components With a Few Clicks

Without design tokens, changing a design attribute like colour or font could require individually updating every component that uses this attribute. What if you want to change the background of a dropdown list item component? Figma almost always fails to update it, especially in bigger design systems.

With Design Tokens, updating components is as simple as modifying one value in one central place. The change automatically propagates to all components using that token, ensuring the update is implemented consistently across the entire design. This functionality significantly reduces the time and effort needed for design updates, which translates into quicker product iterations and lower costs for our clients.

Closing the gap between Design and Development

Maintaining consistency is paramount in product design. Inconsistencies can negatively impact the user experience, making the product appear unprofessional and confusing to users. Design Tokens help bridge the gap between designers and front-end developers. Tokens map perfectly to variables in CSS or other styling languages, which makes the design-to-development handoff smoother. By using Figma Tokens, designers think in terms of the same style variables that developers use, making the entire process more collaborative and efficient. We wrote an article on how design tokens help designers handover designs more easily here.

Consistent Throughout Different Products

When your organization has multiple offerings, maintaining a consistent look and feel across all products can be a challenge. Design tokens are the perfect solution to this issue.

By defining a set of tokens for the entire organization, you can ensure that the same design attributes are applied across all products. This provides a consistent user experience and strengthens your brand identity. Moreover, when it's time to update your design, changes can be implemented across all products simultaneously by updating the design tokens.

Conclusion

To sum it up, design tokens have revolutionized the way product designers approach SaaS design and design scaling. They provide an efficient and reliable way to manage extensive design systems, allow for easy theming, simplify design updates, enforce consistency, and ensure a smoother collaboration between design and development. If you're looking to streamline your SaaS product's design process and enhance its user experience, design tokens, specifically Figma Tokens, might just be the game-changer you need.