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

1. View Slide

2. 2
   Merci Pernod-Ricard
   d'accueillir la communauté
   Design Systems France ❤
   

   View Slide

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
   󰏃
   

   View Slide

4. 15
   Programme de la soirée
   19h00 : Introduction
   19h15 : Présentation
   20h00 : Questions/Réponses
   20h30 : Clôture
   20h45 : Apéro !
   

   View Slide

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
   

   View Slide

6. 18
   Design Systems France
   Un coup de pouce ?
   Soutenez le collectif et
   ses projets
   

   View Slide

7. 19
   Améliorer la collaboration
   design <> tech
   grâce aux design tokens
   

   De la théorie à la pratique
   DSF Meetup - 09/03/2023
   

   View Slide

8. 20
   Christophe de Canteloube
   Staff Frontend Engineer - 100% sur le design system
   

   View Slide

9. 21
   Catherine Vallet
   Senior Product Designer - 50% sur le design system
   

   View Slide

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.
    

    View Slide

11. View Slide

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 ?
    

    View Slide

13. 34
    Les bases
    de l’Atomic Design
    

    View Slide

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
    

    View Slide

15. 36
    Exemple d’Atomic design
    

    View Slide

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
    

    View Slide

17. 39
    Définir une nomenclature
    de tokens
    

    View Slide

18. 40
    Option
    vs
    Décisions
    

    View Slide

19. 41
    royal purple
    

    View Slide

20. 42
    royal purple
    primary
    interaction.enabled
    form.field.border.focus
    Option
    Décisions
    

    View Slide

21. 43
    Méthodologies
    

    View Slide

22. Style dictionary
    Méthodologie
    44
    Category
    Type
    Item
    Sub-item
    State
    

    View Slide

23. 45
    Nathan Curtis
    25K Followers
    Founded UX firm @eightshapes, contributing to the
    design systems field through consulting and
    workshops. VT & @uchicago grad.
    

    View Slide

24. Namespace Object Base Modifier
    

    View Slide

25. SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CATEGORY CONCEPT PROPERTY VARIANT STATE SCALE MODE
    Namespace Object Base Modifier
    

    View Slide

26. CATEGORY
    Namespace Base
    color
    SYSTEM THEME DOMAIN GROUP COMPONENT ELEMENT CONCEPT PROPERTY VARIANT STATE SCALE MODE
    Object Modifier
    primary
    brand
    clf
    

    View Slide

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
    

    View Slide

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
    • …
    

    View Slide

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
    

    View Slide

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
    • …
    

    View Slide

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
    

    View Slide

32. 54
    OnDark
    

    View Slide

33. 55
    OnDark
    

    View Slide

34. Material Design
    56
    

    View Slide

35. 57
    OnPrimary
    

    View Slide

36. 58
    OnPrimary
    

    View Slide

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
    

    View Slide

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
    • …
    

    View Slide

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
    • …
    

    View Slide

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
    • …
    

    View Slide

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
    • …
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

49. 71
    SYSTEM CATEGORY
    clf spacing 1-x
    SCALE
    clf spacing 2-x
    clf spacing 3-x
    

    View Slide

50. 72
    SYSTEM CATEGORY
    clf breakpoint s
    SCALE
    clf breakpoint m
    clf breakpoint l
    

    View Slide

51. 73
    Et le dark mode ?
    

    View Slide

52. 74
    Dark mode
    Light mode
    clf.layout.background.main
    

    View Slide

53. 75
    Organiser les tokens
    sur Figma
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

56. Avant/Après - Typographie
    82
    36
    Tokens de décision
    56
    Styles de texte
    

    View Slide

57. Avant/Après - Typographie
    83
    

    View Slide

58. 84
    234
    Tokens de décision
    75
    Styles de couleurs
    Avant/Après - Couleurs
    

    View Slide

59. Avant/Après - Couleurs
    85
    

    View Slide

60. Avant/Après - Ombres
    86
    11
    Tokens de décision
    10
    Styles d’effets
    

    View Slide

61. Avant/Après - Ombres
    87
    

    View Slide

62. Avant/Après - Radius
    88
    11
    Tokens de décision
    0
    Documentés
    

    View Slide

63. 89
    22
    Tokens de décision
    0
    Documentés
    Avant/Après - Spacing
    

    View Slide

64. 90
    Questions
    

    View Slide

65. 91
    Former les designers
    aux tokens
    

    View Slide

66. 92
    !"
    Mauvaise utilisation des styles
    

    View Slide

67. 93
    Mauvaise utilisation des tokens
    Avant rebranding Après rebranding
    

    View Slide

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 ?
    

    View Slide

69. 95
    Styles non publiés
    

    View Slide

70. 96
    Forcer des choix UX
    #
    

    View Slide

71. Documentation des tokens
    97
    

    View Slide

72. Monitorer l’usage
    98
    25%
    des designers
    savent toujours quels
    tokens utiliser
    75%
    des designers
    hésitent parfois
    

    View Slide

73. Monitorer l’usage
    99
    100%
    des designers seraient intéressé(e)s
    par des séances ponctuelles de révisions des tokens
    

    View Slide

74. 100
    Automatiser les
    tokens
    

    View Slide

75. Automatiser les tokens
    De Figma au code
    102
    

    View Slide

76. View Slide

77. View Slide

78. Automatiser les tokens
    De Figma au code
    106
    

    View Slide

79. Télécharger les tokens
    Automatiser les tokens
    107
    

    View Slide

80. View Slide

81. 110
    JS
    TS
    CSS
    Swift
    JSON
    Style Dictionary
    

    View Slide

82. Formater
    Automatiser les tokens
    112
    

    View Slide

83. Formater
    Automatiser les tokens
    114
    

    View Slide

84. Formater
    Automatiser les tokens
    115
    .form/selection/icon/selected
    

    View Slide

85. Formater
    Automatiser les tokens
    116
    form: {
    selection: {
    icon: {
    selected: “#7451eb”
    }
    }
    }
    

    View Slide

86. Automatiser les tokens
    De Figma au code
    118
    @classify
    design-tokens
    

    View Slide

87. View Slide

88. Copier facilement
    De Figma au code
    121
    

    View Slide

89. Copier facilement
    De Figma au code
    122
    .form/selection/icon/selected
    

    View Slide

90. Copier facilement
    De Figma au code
    123
    form.selection.icon.selected
    

    View Slide

91. 124
    Et maintenant ?
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

95. 130
    À retenir
    

    View Slide

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
    

    View Slide

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
    

    View Slide

98. 133
    Questions
    

    View Slide