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

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

    View Slide