How We Apply Design Tokens: a Guide

Introduction

The world of design continues to evolve at a fast pace. New methodologies and tools are continuously being introduced, and it can be quite a task to keep up. However, one methodology that has gained a lot of traction in recent years (and for a good reason) is the concept of "Design Tokens".

What are Design Tokens?

Design tokens are essentially named entities that store visual design attributes. They are the smallest pieces of your design system, such as colors, typography, spacing, border width, radii, shadows, etc. Think of them as the atomic elements of your brand that can be reused across your digital products for consistency, scalability, and maintainability. They are used to ensure a consistent design language across different platforms and devices.

During our own process, we leverage the power of design tokens using the Figma Tokens plugin (Token Studio). This tool provides a visual interface for creating and managing design tokens directly within Figma. This not only makes the process easier for designers but also allows for a more unified and efficient workflow.

Is Your Company Ready?

As with any new tool or methodology, it is crucial to assess your organization's readiness to integrate it into your workflow. Here are some prerequisites that you need to consider before diving into design tokens:

1. Size of the product: the product has to be substantial enough to see a positive ROI from this investment. A simple blog or a single-page website might not benefit much from design tokens. However, large-scale digital products with numerous components and views can significantly benefit from them.
2. Team Effort: Design tokens aren't something you just write down in some internal documentation and place in a repository. They're more than just a design principle; they are a workflow strategy. Implementing them will have to be a team effort, requiring collaboration and clear communication among various stakeholders, including designers, developers, and product managers.
3. Internal Conviction: There have to be stakeholders within the company who understand the benefits of design tokens and can advocate for them. They should be able to work with the management to find the time and resources necessary to invest in this process. Remember, adopting design tokens is not a quick fix; it is a strategic shift that will pay off significantly in the long run.

Share Your Plan with Stakeholders

Once you have assessed your readiness, it's time to bring your plan to the table. Discuss it with key stakeholders, including the main product manager, lead developers, and others who might be involved in this process. This is an important step as it helps ensure that everyone is on the same page and understands the reasons for this shift.

It's crucial to highlight the benefits of design tokens during these discussions. Explain how they will help maintain visual consistency, make the design-to-development process smoother, and save a lot of time in the long run.

Pilot Design System

Now that you have buy-in from the key stakeholders, it's time to get your hands dirty. However, instead of going all in, it's usually a good idea to start with a pilot design system.

1. Start Small: It's always a good idea to start small and then scale up. Instead of implementing design tokens for all the components at once, focus on some key reusable components. If these key components are big (they have many properties or variants), either choose simpler components or decide which variants to ignore for now.
2. Visual Specifications: Make sure that the components in your design system file have all the visual specifications that a non-designer would need. These include the component's anatomy, properties, layout, spacing and token values. These are critical in ensuring that the implementation of the design system is as smooth as possible.

Design Tokens for Your Components

With your pilot design system in place, it's time to create your design tokens.

1. Use Figma Tokens Plugin: Leveraging the power of the Figma Tokens plugin can make this process a lot easier. The Token Studio plugin provides a user-friendly interface for creating and managing design tokens, ensuring you can keep all your design tokens in one place.
2. Start with the essential ("core") design tokens: At the very least, your design tokens should include color, typography, spacing, radius, border width, and shadows. These elements form the backbone of your design language and will be repeatedly used across different components.
3. Expand core tokens into simplified semantic tokens. Semantic tokens allow us to add a variable token value (like {semantic.primary.foreground}) instead of a hardcoded hex value. And this unlocks the possibility of theming. For the Semantic Simplified set, we only include Color and Typography tokens. All the rest of the semantic tokens live in the Semantic Granular set.
4. Go into depth with Semantic Granular tokens. We have decided to create 4 levels of tokens for components: Core, Semantic Simplified, Semantic Granular and Component-level tokens. The reason for splitting semantic tokens into two groups was to have more control over typography and colors at differnet levels. While the Simplified set has {semantic.primary.fg} token, Semantic Granular set has a token for a group of components like actions ({semantic.color.actions.primary.default.border}), which point to {semantic.primary.fg}. This allows us to change colors for specific groups of components, such as actions, feedback, inputs and ui.
5. Final step - create component-specific tokens. This is where you use only semantic granular (and sometimes simplified) tokens to create detailed values of specific components. The best example would be a color token of a Button component with an example value of {button.color.primary.default.background}. It points to the semantic granular token {semantic.color.actions.primary.default.background}, which in turns points to {semantic.primary.fg}.
6. Learning Resources: If you're new to design tokens, consider reading these articles to get a head start:
   • Design Tokens 101
   • The Design System Guide
   • Creating & Crafting a Design Token System
   • 5 Benefits of Design Tokens for SaaS

Working with Developers

After creating your design tokens, it's crucial to have your developers review them. They can provide invaluable insights into the practicality of your tokens, identify any potential errors, and suggest ways to simplify things.

Having your design system live in a central repository like Github rather than your Design File can make it easier for developers to access and implement the design tokens. Once the tokens have been reviewed, start coding these components and tokens in Storybook.

As your design system grows, it can become increasingly challenging to keep track of all the different components and tokens. This is where Zeroheight can come in handy. It allows you to store all your design system knowledge in one place, serving as the single source of truth for everyone involved.

Design System Management

With your design tokens in place and your pilot design system ready to go, it's crucial to understand that this is not the end. Your design system and design tokens are now your internal product and they need to be managed as such. This includes regular updates, versioning, and release notes to keep everyone updated with the changes.

The key to a successful design system is continuous improvement. Regularly review your design tokens and update them as needed. You should also ensure that you are frequently releasing new versions of your design system and documenting these releases meticulously.

Furthermore, keep the communication lines open with your stakeholders. Regularly update them about the progress, take their feedback, and iterate on your design tokens accordingly. We wrote a more detailed article on how we handoff our designs to development teams thanks to design tokens here.

Conclusion

In conclusion, design tokens are not just a novel concept. They are a game-changer for digital product design. By incorporating them into your workflow, you are laying the groundwork for a scalable, consistent, and maintainable product design. At Outframe, we can't stress enough their potential to elevate your design process. Now that you have the roadmap, it's time for you to start your journey with design tokens.