Standardisation des design tokens : le futur du design à grande échelle ?

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Bonjour @chuckn0risk • louis@specifyapp.com Co-fondateur & Développeur Front-End • Membre du W3C Design Tokens Community Group • Auteur de "Design Tokens for Dummies" Et avant Front-End Developer @ SportEasy, 5emeGauche & Ultranoir

Slide 3

Slide 3 text

1. Design tokens kézako ? 2. Qu'est-ce qu'une Design API ? 3. Pourquoi avons-nous besoin d'un standard ? 4. Le future des design tokens 5. Démo d'une Design API Au menu

Slide 4

Slide 4 text

Design Tokens kézako? 1.

Slide 5

Slide 5 text

Que sont les design tokens ? Quel problème business voulons-nous régler ?

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

Les design tokens permettent aux équipes produits de mieux collaborer et assurent la cohérence d'une marque à travers plusieurs plateformes.

Slide 13

Slide 13 text

Thanks to the Salesforce team for providing this categorization

Slide 14

Slide 14 text

Les design tokens doivent être nommés différemment selon leur contexte d'utilisation.

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

Qu'est-ce qu'une Design API ? 2.

Slide 21

Slide 21 text

La création d'expériences utilisateurs cohésives à travers plusieurs plateformes est un véritable déﬁ. Situation actuelle

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 Équipe design Équipe développement Équipe marketing Équipe d'accessibilité

Slide 26

Slide 26 text

Design API Tool #2 Tool #2 Tool #3

Slide 27

Slide 27 text

Les Design APIs sont l'évolution logique des 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

Pourquoi avons-nous besoin d'un standard? 3.

Slide 30

Slide 30 text

Pour que l'identité de marque d'une organisation puisse être appliquée facilement, ses design tokens doivent pouvoir transiter librement d'un outil à un autre.

Slide 31

Slide 31 text

Les couleurs, icons et images de Figma vers Pitch.

Slide 32

Slide 32 text

Les images de Dropbox vers Github.

Slide 33

Slide 33 text

Mettre à jour les design tokens depuis Figma créera un tiquet dans Jira.

Slide 34

Slide 34 text

Les traductions depuis Excel vers Webﬂow.

Slide 35

Slide 35 text

3. Why do we need a standard? / Prerequisite 1. Both parties must provide API writing and/or API reading access 2. Design tokens transiting from one system to another must respect the respective API data format

Slide 36

Slide 36 text

Notre marché a réellement besoin d'un standard pour les design tokens, largement utilisé aﬁn que chaque décision design puisse transiter librement à travers les outils d'une organisation.

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Le Design Tokens W3C Community Group à la rescousse!

Slide 39

Slide 39 text

DTCG | @designtokens 1. Créé en 2019 par Kaelig Deloumeau-Prigent pour rassembler la communauté des design tokens 2. Le besoin d'un standard est plus fort que jamais : un appel aux éditeurs est fait en Février 2020 3. En Juin 2020 tous les éditeurs sont trouvés et répartis sur différents modules de recherche

Slide 40

Slide 40 text

Objectif #1 Fournir un standard pour les design tokens. Il permettra aux créateurs d'outils et à leurs consommateurs d'avoir un design de qualité à grande échelle grâce aux design APIs. Dirigé par Kaelig Deloumeau-Prigent (UX Developer @ Shopify).

Slide 41

Slide 41 text

Objectif #2 Gérer la communauté des design tokens et promouvoir les meilleurs pratiques liées aux design tokens. Dirigé Jina Anne (Design System Lead @ Asana).

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Le futur des design tokens 4.

Slide 44

Slide 44 text

Interopérabilité universelle

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Interopérabilité universelle pour les design tokens : capacité de déﬁnir et de maintenir des design tokens à partir de n'importe quel outil.

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

• D'éditer nos design tokens directement depuis un simple fichier YAML/JSON • De voir, d'éditer et d'utiliser nos design tokens depuis un outil design • D'utiliser nos design tokens dans des applications tel que Google Docs/MS Word et de créer des templates ou des thèmes à partir de ces derniers • D'utiliser nos design tokens depuis un CMS ou un système tierce comme Webflow, Squarespace, Wordpress ou encore Shopify Cela nous permettrait :

Slide 49

Slide 49 text

Shaper | @hihayk

Slide 50

Slide 50 text

Le cas du multi-marques

Slide 51

Slide 51 text

Card Grid Component for Themeable Design System | @brad_frost

Slide 52

Slide 52 text

Un unique composant Card appliqué à trois marques différentes : Verywell.com, TheSpruce.com, and TheBalance.com. https://bradfrost.com/blog/post/creating-themeable-design-systems/

Slide 53

Slide 53 text

Au delà des produits digitaux

Slide 54

Slide 54 text

Merci à @AdamSedwick, @calebwilliams12 et @vlh pour leurs recherches sur le sujet.

Slide 55

Slide 55 text

Démo d'une design API 5.

Slide 56

Slide 56 text

Shoukran @chuckn0risk • louis@specifyapp.com