Design Tokens: To Infinity and Beyond

Slide 1

Slide 1 text

Design Tokens: to inﬁnity and beyond

Slide 2

Slide 2 text

Bonjour @chuckn0risk • louis@specifyapp.com Co-founder & Front-End Developer • W3C Design Tokens Community Group Member • Author of "Design Tokens for Dummies" Previously Front-End Developer @ SportEasy, 5emeGauche & Ultranoir

Slide 3

Slide 3 text

1. Design tokens kézako? 2. What is a Design API? 3. Why do we need a standard? 4. Future of design tokens 5. Demo of a Design API Summary

Slide 4

Slide 4 text

Design Tokens kézako? 1.

Slide 5

Slide 5 text

What are design tokens? What business issue do we want to address?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

"Design tokens are cross platform variables that deﬁne key design data" — Sarah Federman | @sarah_federman

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Design tokens allow product teams to better collaborate and ensure brand consistency across any platform.

Slide 13

Slide 13 text

Thanks to the Salesforce team for providing this categorization

Slide 14

Slide 14 text

Design tokens should be named differently according to their context of usage.

Slide 15

Slide 15 text

Design option Design decisions

Slide 16

Slide 16 text

text-body-large Text style purple-500 Color Design options Design decisions button-text-default background-button-primary-default Color Text style base-space-3 Spacing button-side-padding Spacing

Slide 17

Slide 17 text

button-text-default background-button-primary-default button-side-paddi ng

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

"Design tokens are useful for describing core design values, but their full power emerges when used to describe the specs of UI components." — Cristiano Rastelli | @areaweb

Slide 20

Slide 20 text

What is a Design API ? 2.

Slide 21

Slide 21 text

Crafting cohesive user experiences across several platforms is a real challenge. Current situation

Slide 22

Slide 22 text

"A design system isn’t a project. It’s a product, serving products." — Nathan Curtis | @nathancurtis

Slide 23

Slide 23 text

Design tokens

Slide 24

Slide 24 text

Design system Design tokens

Slide 25

Slide 25 text

Design System Design team Engineering team Marketing team Accessibility team

Slide 26

Slide 26 text

Design API Tool #2 Tool #2 Tool #3

Slide 27

Slide 27 text

Design APIs are the logical evolution of design systems.

Slide 28

Slide 28 text

"An interoperable, guessable design API is the foundation of a fully networked design system, [...]. It’s the next step in the evolution of design systems." — Matthew Ström | A design API in practice

Slide 29

Slide 29 text

Why do we need a standard? 3.

Slide 30

Slide 30 text

As an organization's brand identity must be used and applied as easily as possible, its design tokens must be able to transit freely from one tool to another.

Slide 31

Slide 31 text

Colors, icons and images from Figma to Pitch.

Slide 32

Slide 32 text

Images from Dropbox to Github.

Slide 33

Slide 33 text

Updating design tokens in Figma will create a ticket in Jira.

Slide 34

Slide 34 text

Locales from Excel to Webﬂow.

Slide 35

Slide 35 text

Our market direly needs a design tokens standard widely spread so that design decision can transit freely across an organization tools ecosystem.

Slide 36

Slide 36 text

"Systems should support how creators work." — Danny Banks | An Introduction to Multi-Platform Design Systems

Slide 37

Slide 37 text

Design Tokens W3C Community Group to the rescue!

Slide 38

Slide 38 text

DTCG | @designtokens 1. Created in 2019 par Kaelig Deloumeau- Prigent & Jina Anne to gather the design tokens community 2. The need for a standard is now stronger than ever: a call for editors is made in February 2020 3. In June 2020 all editors are found and officially spread across different design tokens modules

Slide 39

Slide 39 text

Objective #1 Provide a standard for design tokens. It will alIow tool creators and tool consumers to have quality design that scales thanks to design APIs. Lead by Kaelig Deloumeau-Prigent (UX Developer @ Shopify).

Slide 40

Slide 40 text

Objective #2 Manage the design tokens community and promote design tokens best practices. Lead by Jina Anne (Design System Lead @ Asana).

Slide 41

Slide 41 text

Design Tokens Community Group modules: Format Colors Spacing Animation ...

Slide 42

Slide 42 text

The future of design tokens 4.

Slide 43

Slide 43 text

Universal interoperability

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Universal interoperability for design tokens: ability to deﬁne and maintain design tokens from any tool.

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

• Edit all design tokens directly from a simple YAML/JSON file • See, edit and use all design tokens from a design tool • Use design tokens from apps like Google Docs/MS Word and create templates or themes from them • Use design tokens from a CMS or a third-part system like Webflow/Squarespace/Wordpress/Shopify This would allow us to:

Slide 48

Slide 48 text

Shaper | @hihayk

Slide 49

Slide 49 text

The multi-brand use case

Slide 50

Slide 50 text

Card Grid Component for Themeable Design System | @brad_frost

Slide 51

Slide 51 text

A unique Card component is applied to three different brands : Verywell.com, TheSpruce.com, and TheBalance.com. https://bradfrost.com/blog/post/creating-themeable-design-systems/

Slide 52

Slide 52 text

Beyond digital products

Slide 53

Slide 53 text

Thanks to @AdamSedwick, @calebwilliams12 and @vlh for their thorough research on the subject.

Slide 54

Slide 54 text

Demo of a design API 5.

Slide 55

Slide 55 text

Shoukran @chuckn0risk • louis@specifyapp.com