Underbelly product design team lead Martin interviews product designer Michelle about getting started with design tokens. They cover what design system tokens are, who can use & benefit from them, & how to implement them into your design systems.
Hey everyone. My name is Martin. I’m the product design lead at Underbelly, and today we’re chatting with fellow underbelly designer Michelle—to talk about design systems and more specifically, design tokens. Hey Michelle!
Thanks, Martin. It’s true. I’m a total design systems nerd, and design tokens are the hottest topic in design systems right now. So I just wanted to share a little info about ’em.
Yeah, let’s get into some of that information. To begin, what is a design token design system?
Design System Tokens are the style values of UI elements, like color typography, spacing, shadows. Basically, everything and they’re used across products and can be converted to any platform. So basically, tokens are the building blocks to a design system. They’re the smallest pieces of style values.
Yeah. It’s crazy that something so small can actually, you know, have such a huge impact, especially when you put them all together. What are some of these tokens you for specifically?
They allow for a flexible design to create a unified look across products and simplify the development process.
So for designers, we can use tokens to ensure our designs are implemented correctly. We can handle a design decision from definition to deployment and have ownership over that. And then also just ensure that all of our product information and interfaces have the same look and feel.
Nice, thanks for sharing that, Michelle. Outside of designers, are there other groups that might be interested in learning about tokens for implementation, design decisions, deployment, etc.?
Absolutely, yeah! Developers can use tokens to improve their experience using and refactoring styles. They can use them to quickly switch between light and dark modes, and they can use them to stop wasting time manually updating style values. And then, product managers can also use tokens to minimize styling bug tickets, to support designers and developers collaborating, and easily scale teams.
That’s awesome to hear that it’s designers, developers, and PMs that can take advantage of these tokens. Now stepping back a bit, how would someone in this group kind of get started on learning about these tokens?
Yeah, the first step is learning more about them. So check on that. And then, once you’re kind of ready to dive into actually implementing them, I would recommend conducting an inventory of all of the large and small UI elements used in your product. And for any styles that are repeating often, you can make tokens for them by picking a naming convention, a sizing scale, and making sure your tokens are accessible, and assigning someone on your team to be the gatekeeper to review and approve tokens.
Michelle, thanks again for sharing that. It does sound like super useful information for everyone, really. So for you specifically, what resources do you like to use to learn more about tokens or design systems or both?
There’s so much information and resources online. We’ll share some links in the description, but I would definitely recommend starting out looking at the Figma plugin, Figma tokens; it’s free. There is so much documentation out there and tutorials on that plugin specifically. So I would definitely recommend checking that out.
Great! Well, there we go. Thanks so much, Michelle, for the resources and just for taking the time to teach us a bit about design tokens and some of the different groups that can implement this.
Yeah. You’re welcome. Martin. Happy tokenizing, everyone!
Learning Resources:
https://uxdesign.cc/creating-design-systems-with-figma-tokens-31686b8d672e
https://www.youtube.com/watch?v=G1xmkQeExJo
https://medium.com/@uxlord/what-the-are-design-tokens-2020-f3c4f1258349