Introduction to Design Tokens

Whether you're a designer, a developer, a manager, or a curious executive wanting to scale your organization's branding with consistency: this presentation is for you.

After reading this, you'll have a clear idea of what design tokens are and how they can help your organization manage its branding at scale.

Let's dive in. 🤿

So, you're ready to get started?

Sync your design tokens and assets in minutes 👉 specifyapp.com

Transcript

1. Introduction to Design Tokens @specifyapp
2. @specifyapp Whether you're a designer, a developer, a manager, or a curious executive wanting to scale your organization's branding with consistency: this presentation is for you.
3. After reading this, you'll have a clear idea of what design tokens are and how they can help your organization manage its branding at scale. Ready? Let's dive in. 🤿 @specifyapp
4. The underlying business issue In the past, when print was king, a branding was defined in a graphical charter. Nowadays, this set of graphical rules has evolved to take into account the myriad of screens surrounding us. Your branding must be applied consistently everywhere, whatever the channel you're communicating on. Design systems are the logical evolution of graphical charters. They help everyone involved in the creation, maintain and usage of a branding work together. To present you what design tokens are, I will emphasise first on the business issue they solve. All organisations in the world share one thing in common: they have a branding. This branding allows them to communicate and differentiate from one to another. To make a long story short, your organisation's branding is the backbone of its communication. @specifyapp
5. Your branding is part of the trust your audience has in your organisation. Cherish it to keep your audience with you. How would you react if you received an email from your bank with an outdated logo? How would you feel if your bank website and mobile application didn't share the same branding? What would you think at night with a full light mode interface burning your tiny eyes? @specifyapp
6. Let me tell you a story. It's about a simple rebranding of the ACME organisation. We'll be in the shoes of a designer trying to apply a design decision at scale. @specifyapp
7. That's it. You're the new Head of Design at ACME Corp. You can't wait to start the rebranding you've been hired for. This rebranding consists in replacing the main color of your organisation by a new one. One single color replacement. 🎉 @specifyapp
8. You're finally satisfied with the new branding. It "just" has to be applied in every interface of every product your organisation provides. You decide to personally ask the engineering team lead to update the codebase. @specifyapp 👍
9. You 9:40 Hey Steve, I've updated our main brand color. The old one is rgb(237, 200, 078). The new one is rgb(187, 45, 23). Can you update your codebase with the new value please? Cheers @specifyapp
10. You think this will be a no brainer? Spoiler alert: You're wrong. @specifyapp
11. You 9:40 Hey Steve, I've updated our main brand color. The old one is rgb(237, 200, 078). The new one is rgb(187, 45, 23). Can you update your codebase with the new value please? Cheers Steve 9:41 Thanks for the new color value. Do you have the HEX value? You 9:42 This is #EDC840. I think so... 😬 Steve 9:43 Are you sure? I'm not really confident about this and have a lot of work to do. @specifyapp
12. And you didn't even receive the answer from the managers of the Android and iOS teams. By the way, as you may have guessed, these platforms handle color in different formats. @specifyapp
13. Communicating design decisions and making sure they are correctly applied is a tedious task. In other words, your organisation doesn't have a "design language" designers and developers can use. @specifyapp
14. Humans. We are human beings. Not machines. Absolute values like a RGB or a HEX color code don't speak for themselves. Machines. @specifyapp
15. Applying a new color on several platforms shouldn't take months. In 2015, Spotify was rebranded and by extension updated its brand guidelines. It took them several months to propagate the new green color to all of their platforms. Now, thanks to their design system foundation based on design tokens, it would take them only several minutes. @specifyapp
16. Updating a typeface across many websites shouldn't cost millions. Matthew Ström is a designer who previously worked at the Wall Street Journal. They had to update the typeface on the main website and all its sub brands. It took them 2 years and 100 people to change it. And even now some pages are still using the old typeface. As a front-end developer, I assume designers are responsible for taking design decisions. Updating a color, a font-size or any "core style" and seeing the result in whatever platform should be effortless for them. Unfortunately, this is not currently the case. @specifyapp
17. What if... What if designers could make a design decision and see it applied correctly everywhere, automatically? @specifyapp
18. Introducing design tokens. Design tokens are names used to express design decisions in your organisation's design language. Those names are meant to be used and understood by humans like you and me. Design decisions can be a color, a typeface, a border radius, an icon, a font size, a gradient or even an animation duration. @specifyapp
19. @specifyapp Design tokens are the foundations of Spotify's design system — Encore.
20. Design tokens are a language for communicating intent between disparate parts of a system. – Ethan Marcotte, Design-ish systems “ @specifyapp
21. The design system is your land, and your design tokens are the language people use to communicate. Aside from using design tokens in conversations, you'll mostly use them in your products. Design tokens are literally everywhere, this page included. @specifyapp
22. @specifyapp If you are familiar with the Atomic Design taxonomy, Design tokens are what atoms are made of.
23. @specifyapp Here's the anatomy of a button component showing every design tokens composing it.
24. @specifyapp Design decisions are transformed in design tokens to be used in specific platforms.
25. Design tokens secure your organisation's branding and ease its management. They help you reach: Easier management of themes and white-labelling features Proper methodology to collaborate between teams Design consistency across any product UI Improved management of your design system Unique source of truth for your branding Better translation from design to development @specifyapp
26. For designers Use design tokens if: • You're tired of seeing that design is sacrificed because developers don't or fail to correctly implement your work • You want the power to handle a design decision from its definition to its deployment • You want every part of the app interface and all the elements to have the same look and feel @specifyapp
27. For developers Use design tokens if: • You want to spend more time working on valuable business features and not manually updating design tokens values • You want to improve your experience when using and refactoring your styles • You want to use dark/light themes and/or multi brand products @specifyapp
28. For managers Use design tokens if: • You're tired of seeing tickets about styling bugs stacking up • You want designers and developers to find a common ground and collaborate seamlessly • You need to ease the scaling of your teams @specifyapp
29. Design tokens allow product teams to better collaborate and ensure brand consistency across any platform. This is truly an exciting time to be designing and building consistent UIs at scale. Design tokens are here to last. Our ecosystem is embracing them and so should you. Let’s make styling fun again. @specifyapp
30. Specify — Design Data Platform @specifyapp CLICK TO TWEET 10 21 15 Want to know more about design tokens? We got you covered 💪 ℹ️ Learn about what design tokens are and how they can help you scale your branding with confidence. Thanks for reading ✌️ Your retweets are always appreciated! Just click the image to do so → @specifyapp
31. We care about protecting your data. Read our Privacy Policy. Your work email Apply for early access email@yourcompany.com Stay in control of your design tokens with Specify We're currently in invite-only access and prioritizing teams willing to make evolve their token setup.