Comment les Design Tokens améliorent la collaboration entre product designers et développeurs ?

Christophe de Canteloube, Staff Front-end dev et Catherine Vallet, Senior Product Designer, nous partage leur expérience de mise en place et l'application des Design Ttokens chez @OpenClassrooms , à travers leur Design System, Clarify.

Retrouvez la vidéo de la conférence sur Youtube : https://youtu.be/BGz7cGGViXk

🌐 Ressources et liens des sources citées pendant la conférence
--------------------------------------------------------------------------------------------------
- https://www.figma.com/fr/
- https://storybook.js.org/

💬 Pour toutes questions ou retours sur le sujet vous pouvez contacter Catherine et Christophe sur:
- Le Slack de Design System France : https://designsystems.fr

🇫🇷 Design Systems France

La communauté dédiée aux concepteurs de Design Systems dans l'éco-système product et tech français.
https://designsystems.fr

#designtokens #designsystem #collaboration

Transcript

2. 2 Merci Pernod-Ricard d'accueillir la communauté Design Systems France ❤
3. 14 Design Systems France, c’est : Une communauté Slack de près de 1000 passionné⸱es de design systems 🙌 Des événements pour discuter et partager le savoir-faire FR. 🎤 Presque 100 design systems français référencés 󰏃
4. 15 Programme de la soirée 19h00 : Introduction 19h15 : Présentation 20h00 : Questions/Réponses 20h30 : Clôture 20h45 : Apéro !
5. 16 Et n’oubliez pas Une communauté Slack 🙌 https://www.designsystems.fr/ Une liste des Design Systems français 󰏃 https://www.designsystems.fr/ds
6. 18 Design Systems France Un coup de pouce ? Soutenez le collectif et ses projets
7. 19 Améliorer la collaboration design <> tech grâce aux design tokens 
 De la théorie à la pratique DSF Meetup - 09/03/2023
8. 20 Christophe de Canteloube Staff Frontend Engineer - 100% sur le design system
9. 21 Catherine Vallet Senior Product Designer - 50% sur le design system
10. 22 À propos d’OpenClassrooms Acteur majeur de la formation en ligne sur les métiers du numérique. -> Communauté de plus de 300 000 utilisateurs par mois à travers le monde. -> Pédagogie autour de projets professionnalisants menant à un diplôme.
12. Agenda 33 1. Un peu de théorie
 2. Définir une nomenclature de tokens
 3. Organiser les tokens dans Figma
 4. Former les designers aux tokens
 5. Automatiser les tokens
 6. Et maintenant ?
13. 34 Les bases de l’Atomic Design
14. 35 L’Atomic design L’Atomic Design est une approche de conception permettant de réduire un site à ses plus petits composants afin de créer des Design Systems et d’optimiser la création d’interfaces responsives et fonctionnelles. Créée par Brad Frost
15. 36 Exemple d’Atomic design
16. 37 Et les tokens ? Décisions sémantiques autour des variables qui composent l’identité visuelle d’un produit. → Ils remplacent les valeurs statiques (ex: hex) par des noms explicites. → Ils peuvent (rarement) vivre seuls dans un produit. Ils doivent être rattachés à un atome. Pour aller plus loin : Brad Frost
17. 39 Définir une nomenclature de tokens
18. 40 Option vs Décisions
19. 41 royal purple
20. 42 royal purple primary interaction.enabled form.field.border.focus Option Décisions
21. 43 Méthodologies
22. Style dictionary Méthodologie 44 Category Type Item Sub-item State
23. 45 Nathan Curtis 25K Followers Founded UX firm @eightshapes, contributing to the design systems field through consulting and workshops. VT & @uchicago grad.
24. Namespace Object Base Modifier
25. SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CATEGORY CONCEPT PROPERTY VARIANT STATE SCALE MODE Namespace Object Base Modifier
26. CATEGORY Namespace Base color SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Object Modifier primary brand clf
27. CATEGORY Base color THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Object Modifier primary brand SYSTEM Namespace clf SYSTEM • ds • clf • msl
28. Namespace SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Object Modifier primary brand clf CATEGORY Base color CATEGORY • color • font • shadow • space • radius • …
29. CATEGORY Namespace color SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT PROPERTY VARIANT STATE SCALE MODE Object Modifier primary clf Base CONCEPT brand • brand • heading • visualisation • feedback • action • cta • … CONCEPT
30. CATEGORY Namespace Base color SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY STATE SCALE MODE Object brand clf VARIANT Modifier primary VARIANT • primary • secondary • info • tertiary • warning • success • …
31. CATEGORY Namespace Base color color SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Object Modifier primary on-primary brand brand clf clf
32. 54 OnDark
33. 55 OnDark
34. Material Design 56
35. 57 OnPrimary
36. 58 OnPrimary
37. CATEGORY Namespace Base color color color SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Object Modifier primary on-primary brand brand clf clf clf form border field focus
38. CATEGORY Namespace Base color color color SYSTEM THEME DOMAIN COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Modifier primary on-primary brand brand clf clf clf border field focus GROUP Object form GROUP • form • notification • …
39. CATEGORY Namespace Base color color color SYSTEM THEME DOMAIN ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Modifier primary on-primary brand brand clf clf clf border focus GROUP form Object COMPONENT field COMPONENT • button • icon • label • …
40. CATEGORY Namespace color color color SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT VARIANT STATE SCALE MODE Object Modifier primary on-primary brand brand clf clf clf form field focus Base PROPERTY border PROPERTY • background • border • size • letter-spacing • weight • …
41. CATEGORY Namespace Base color color color SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT SCALE MODE Object primary on-primary brand brand clf clf clf form border field STATE Modifier focus STATE • active • disabled • enabled • error • focus • hover • visited • …
42. CATEGORY Namespace Base color font color color SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Object Modifier primary weight m on-primary brand brand clf clf clf clf form border field focus
43. CATEGORY Namespace Base color font color color SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE MODE Object primary on-primary brand brand clf Weight clf clf clf form border field focus SCALE Modifier m SCALE • 1/2/3/4/… • half-x/1-x/2-x/3-x/… • 100/200/300/… • s/m/l/xl
44. CATEGORY Namespace Base color font color color SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Object Modifier primary weight m on-primary brand brand clf clf clf clf form border field focus
45. CATEGORY Base color font color color SYSTEM DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Object Modifier primary weight m on-primary brand brand clf clf clf clf form border field focus Namespace THEME THEME • ocean • mountain • sands
46. CATEGORY Base color font color color SYSTEM GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Object Modifier primary weight m on-primary brand brand clf clf clf clf form border field focus THEME Namespace DOMAIN Domain • student • business
47. CATEGORY Namespace Base color font color color SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE Object Modifier primary weight m on-primary brand brand clf clf clf clf form border field focus
48. SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CATEGORY CONCEPT PROPERTY VARIANT STATE SCALE MODE Namespace Object Base Modifier color primary color on-primary brand brand clf clf clf clf form color border field focus font weight m
49. 71 SYSTEM CATEGORY clf spacing 1-x SCALE clf spacing 2-x clf spacing 3-x
50. 72 SYSTEM CATEGORY clf breakpoint s SCALE clf breakpoint m clf breakpoint l
51. 73 Et le dark mode ?
52. 74 Dark mode Light mode clf.layout.background.main
53. 75 Organiser les tokens sur Figma
54. 78 Par où commencer ? → Quelle variable pour quel usage aujourd’hui ? → Pour quel usage créer des tokens ? → Qu’est-ce qu’on aimerait changer au passage ? #BoyScoutRule
55. 81 Embrasser la cause Tokens 1. Travailler les tokens par usages (Actions, Formulaires, Progression, etc). 2. D’innombrables discussions et tests pour trouver la bonne nomenclature pour chaque. 3. Des changements contrôlés.
56. Avant/Après - Typographie 82 36 Tokens de décision 56 Styles de texte
57. Avant/Après - Typographie 83
58. 84 234 Tokens de décision 75 Styles de couleurs Avant/Après - Couleurs
59. Avant/Après - Couleurs 85
60. Avant/Après - Ombres 86 11 Tokens de décision 10 Styles d’effets
61. Avant/Après - Ombres 87
62. Avant/Après - Radius 88 11 Tokens de décision 0 Documentés
63. 89 22 Tokens de décision 0 Documentés Avant/Après - Spacing
64. 90 Questions
65. 91 Former les designers aux tokens
66. 92 !" Mauvaise utilisation des styles
67. 93 Mauvaise utilisation des tokens Avant rebranding Après rebranding
68. “ 94 Comment faire gagner du temps aux designers et leur proposer seulement les tokens utiles aux décisions UX dans leurs projets sur Figma ?
69. 95 Styles non publiés
70. 96 Forcer des choix UX #
71. Documentation des tokens 97
72. Monitorer l’usage 98 25% des designers savent toujours quels tokens utiliser 75% des designers hésitent parfois
73. Monitorer l’usage 99 100% des designers seraient intéressé(e)s par des séances ponctuelles de révisions des tokens
74. 100 Automatiser les tokens
75. Automatiser les tokens De Figma au code 102
78. Automatiser les tokens De Figma au code 106
79. Télécharger les tokens Automatiser les tokens 107
81. 110 JS TS CSS Swift JSON Style Dictionary
82. Formater Automatiser les tokens 112
83. Formater Automatiser les tokens 114
84. Formater Automatiser les tokens 115 .form/selection/icon/selected
85. Formater Automatiser les tokens 116 form: { selection: { icon: { selected: “#7451eb” } } }
86. Automatiser les tokens De Figma au code 118 @classify design-tokens
88. Copier facilement De Figma au code 121
89. Copier facilement De Figma au code 122 .form/selection/icon/selected
90. Copier facilement De Figma au code 123 form.selection.icon.selected
91. 124 Et maintenant ?
92. 125 Amélioration continue → Permettre aux tokens de vivre et d’évoluer en fonction des besoins. → Rendre la documentation plus digeste et visuelle. → Continuer à accompagner les utilisateurs.
93. 128 Le crash test : le rebranding → 95% des changements automatisés sur les librairies Figma du design system. → 60% des changements automatisés sur les maquettes des projets. → 556 changements dans la plateforme côté code. → 550 changements dans l’application côté code.
94. 129 Prochaines étapes → (re)tester des plugins Figma pour aller plus loin dans l’utilisation et la maintenance des tokens. → (re)donner la responsabilité des tokens aux équipes.
95. 130 À retenir
96. Pourquoi se lancer dans la “cause tokens” ? 131 Une qualité de delivery améliorée Des décisions de design plus objectives Un gain de temps
97. Et la collaboration dans tout ça ? 132 Un même language pour les variables Optimisation des hand-offs design <> dev Meilleure synchronisation des changements Décisions design plus facilement comprises par la squad
98. 133 Questions