Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Design Tokens

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

Florent Merian
PRO

October 11, 2022
Tweet

More Decks by Florent Merian

Other Decks in Design

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 protected] 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.