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
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   👍
   

   View Slide

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
   

   View Slide

10. You think this will be a no brainer?
    Spoiler alert: You're wrong.
    @specifyapp
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. What if...
    What if designers could make a design decision and
    see it applied correctly everywhere, automatically?
    @specifyapp
    

    View Slide

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
    

    View Slide

19. @specifyapp Design tokens are the foundations of Spotify's design system — Encore.
    

    View Slide

20. Design tokens are a language for communicating intent
    between disparate parts of a system.
    – Ethan Marcotte, Design-ish systems
    “
    @specifyapp
    

    View Slide

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
    

    View Slide

22. @specifyapp If you are familiar with the Atomic Design taxonomy, Design tokens are what atoms are made of.
    

    View Slide

23. @specifyapp Here's the anatomy of a button component showing every design tokens composing it.
    

    View Slide

24. @specifyapp Design decisions are transformed in design tokens to be used in specific platforms.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide