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

Slide 1

Slide 2

Bonjour 👋 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 @chuckn0risk • louis@specifyapp.com

Slide 3

Au menu

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

Slide 4

Design Tokens kézako?

Slide 5

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

Slide 6

Slide 7

Slide 8

“Design tokens are cross platform variables that define key design data” — Sarah Federman | @sarah_federman

Slide 9

Slide 10

Slide 11

Slide 12

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

Slide 13

🙏 Thanks to the Salesforce team for providing this categorization

Slide 14

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

Slide 15

Design option Design decisions

Slide 16

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

Slide 17

background-button-primary-default button-text-default button-side-padding

Slide 18

Slide 19

“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

Qu’est-ce qu’une Design API ?

Slide 21

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

Slide 22

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

Slide 23

Design tokens

Slide 24

Design system Design Tokens

Slide 25

Équipe d’accessibilité 👩 Équipe design Design System Équipe marketing Équipe développement

Slide 26

Tool #2 Design API Tool #3 Tool #2

Slide 27

Les Design APIs sont l’évolution logique des design systems.

Slide 28

“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

Pourquoi avons-nous besoin d’un standard?

Slide 30

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

Les couleurs, icons et images de Figma vers Pitch.

Slide 32

Les images de Dropbox vers Github.

Slide 33

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

Slide 34

Les traductions depuis Excel vers Webflow.

Slide 35

Why do we need a standard? / Prerequisite
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

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

Slide 37

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

Slide 38

Le Design Tokens W3C Community Group à la rescousse!

Slide 39

DTCG | @designtokens

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

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

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

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

Slide 43

Le futur des design tokens

Slide 44

🏆 Interopérabilité universelle

Slide 45

Slide 46

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

Slide 47

Slide 48

Cela nous permettrait : • 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

Slide 49

Shaper | @hihayk

Slide 50

🌓 Le cas du multi-marques

Slide 51

Card Grid Component for Themeable Design System | @brad_frost

Slide 52

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

🚀 Au delà des produits digitaux

Slide 54

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

Slide 55

Démo d’une design API

Slide 56

Shoukran 🙏 @chuckn0risk • louis@specifyapp.com