Comment Talend centralise son Design System avec Storybook

Dans ce 12e évènement, Monia et Fabien de Talend nous expliquent et montrent en live leur workflow pour centraliser leur design system dans un seul et même outil : Storybook.

On y parle de leur contexte et organisation avec une démo en direct du workflow, l'utilisation de Storybook pour centraliser le tout dans le Design System et aussi des tests via Chromatic.

Chapitres de la vidéo
1:58 - Contexte
11:03 - Focus Storybook
15:38 - Workflow @Talend
52:59 - Questions/Réponses

Ressources
➡️ Pour retrouver le GitHub de la demo d’aujourd’hui, où vous retrouvez tous les détails allant de l’initialisation du projet à la personnalisation de sections.
https://github.com/frassinier/dsf-sto...

💬 Pour toutes questions ou retours sur http://design.talend.com/ vous pouvez nous contacter sur:
- Le Slack de Design System France
- Sur Twitter: @mo_n_ia et @frassinier
- Par email: mhuet@talend.com et frassinier@talend.com
Et si vous êtes de Nantes, il sont toujours partants pour boire un verre et discuter de vive-voix 🎉

Liens
- https://storybook.js.org/
- https://www.chromatic.com/
- https://github.com/atlassian/changesets

Questions posées par les participants
- Qu'est ce qui a guidé votre choix d'aller plus sur Storybook que sur Zeroheight ?
- Est-ce que le design des UI des Talend Open Studio vont bénéficier à un moment de ce Design System (sous réserve de ce que Talend décide de faire avec TOS dans sa gamme produit) ?
- La gouvernance est partagée ou centralisée ?
- sur quoi vous êtes-vous appuyés pour trouver les sources chiffrées pour convaincre vos dirigeants ?
- Avez-vous testé Gatsby pour la liberté de documentation ?
- Pourquoi Zeroheight ne vous a pas convaincu ? On le trouve souvent associé avec Storybook.
- Storybook est-il aussi votre outil de TU ?
- Quelle est la source de vérité ultime? Figma? Le code dans Storybook? Comment est-ce que vous assurez la synchro?
- Les designers doivent donc attendre la doc sur Storybook pour composer de nouveaux composants et pages. Ce n'est pas un frein pour vos productions ?
- Une question pratico-légale : est-ce que le design system pourrait être utilisé par un éditeur de solution (indépendant) mappant les APIs Talend pour exécuter les jobs ETL dans un ordonnanceur par exemple ?
- Est-ce que vous avez du coup des designers qui créent des prototypes HTML plutôt que passer par la case Figma?
- Quel est votre modèle de contribution par la communauté de Talend (design & dev)? Ou est-ce que tout est ajouté par l'équipe design system?
- Si tes composants consomment des API tu le documentes dans Storybook aussi ou tu le gardes dans le git ?
- Possible d'avoir la config pour mdx ? 🙂
- Comment conciliez-vous les tests unitaires et visuels (code + visuel) et des test AB par exemple ?
- Est-ce que vous avez des choses spécifiques à l'accessibilité dans le système (documentation ou éléments techniques comme des tests automatisés)?
- Est-ce que les produits utilisent aussi Storybook pour leurs composants spécifiques dans leur propre app ?
- Est-ce que vous avez eu des plaintes pour le forçage de version? Vous avez qqchose sur la roadmap pour offrir plus de flexibilité? (c'est mon problème du moment :D)
- et quand vous modifiez un composant, t'appuies sur un bouton et bim c'est mis à jour sur tous les products ?
- Comment sont publiés/utilisés les composants ? npm ? Et si oui sont-ils publiés tous ensemble ou de manière séparée (@coral/all/button ou @coral/button) ?
- Pour les référents DS comme vous deux, en terme de temps dédié au DS à quoi cela équivaut ?
- TOUS vos composants sont gérés sur storybook ? Ou alors vous autorisez du code brut
- Question qui va avec, comment gérez vous les versions (patch minor major) ?
- Est-ce que vous avez du coup des designers qui créent des prototypes HTML plutôt que passer par la case Figma?

Sondages
Est-ce que vous connaissez Storybook ?
Oui - 11 votes
Non - 5 votes

Quel outil utilisez-vous pour héberger vos composants codés ?
Storybook - 4 votes
Direct dans la code base - 2 votes
Autre - 1 vote
Solution custom - 0 vote

Verbatims

Christophe : Bravo c'était cool de voir votre travail ! 👏
Kevin : Ici on etait a la frontiere entre design et dev, vraiment un bon format pour détruire les silos :)
Dimitri : Convaincu par l'approche de Talend et Storybook. Merci à tous, bonne soirée!
Charles-Antoine : Merci pour la démo, c'était très intéressant ✌️

Design Systems France
La communauté dédiée aux concepteurs de Design Systems dans l'éco-système français.
Website : https://designsystems.fr
Meetup : https://www.meetup.com/fr-FR/DesignSy...
Slack : https://airtable.com/shr8ucokQGSKSw5P4

Transcript

1. Design Systems France | Meetup #12
   Comment Talend centralise
   son Design System avec
   Storybook ?
   Pour faire en sorte que le talk soit le plus audible possible, n'oublie pas d'éteindre ton micro 👍
   

   View Slide

2. Design Systems France,
   c’est :
   Une communauté Slack
   de + de 400 passionné⸱es
   de design systems
   🙌
   Une dizaine d’événements
   à son compteur
   🎤
   Presque 100 design systems
   français référencés
   󰏃
   

   View Slide

3. Informations pratiques
   - Posez vos questions au cours de
   l'événement via la fonctionnalités
   Question, dans Activités
   - Votez pour vos questions préférées
   - Participez aux sondages, toujours dans
   Activités
   

   View Slide

4. Monia Huet
   Design System Designer
   ℹ @Mo_n_ia
   Fabien Rassinier
   Design System Engineer
   ℹ @frassinier
   

   View Slide

5. ● Contexte @Talend
   ● Focus Storybook
   ● Workflow @Talend
   ● Questions / Réponses
   

   View Slide

6. 1⃣. Contexte
   

   View Slide

7. Éditeur de logiciels
   󰟲
   8+ produits Cloud
   ☁ 🌍
   C’est quoi Talend ?
   1500+ employés
   

   View Slide

8. Quelle organisation ?
   Talend (1500+)
   R&D (500+)
   UX (12)
   UX Design (8)
   UX Research (2)
   Design System
   (2+1)
   PM (30+) Dev (200+)
   Front (30+)
   Autres (250+)
   Doc,
   QA,
   DevOps,
   SCRUM masters,
   PO,
   ...
   

   View Slide

9. Une idée
   ➡ Des constats (travail en silos, manque de cohérence entre les apps, lenteur de
   livraisons des features dans les produits …)
   ➡ Ça a généré des frustrations (pour nous deux au moins)
   📆 Octobre 2019 📍Casablanca
   ➡ On a vite identifier le potentiel d’un design system pour répondre facilement à
   certains problèmes
   ➡ On a ensuite commencé à essayer de faire changer les choses
   🍻 Autour d’un verre
   ➡ S'enchaînent alors de longs meetings, de longues présentations, pour convaincre...
   

   View Slide

10. Coral, notre Design System design.talend.com
    Débuté officiellement en Juin 2020,
    et public depuis Février 2021
    ● Nos design tokens, garants de la
    cohérence
    ● Les composants, documentés et
    implémentés
    ● Du theming, pour pouvoir passer
    du light au dark mode
    🛠 Nos outils: Design: Figma | Développement: React | Documentation: Storybook
    

    View Slide

11. Notre credo
    Un Design System se construit
    à plusieurs mains !
    Il faut plusieurs compétences complémentaires.
    Le contenu ne vient se rajouter que si tout le monde
    s’entend dessus.
    

    View Slide

12. Comment centralise-t-on
    notre Design System via
    Storybook ?
    

    View Slide

13. 2⃣. Storybook
    

    View Slide

14. Storybook
    En utilisant Storybook [livre d’histoires], vous
    devenez un.e conteur.se.
    Chacune de ces histoires commence logiquement par
    “Je vais vous montrer ce qu’il se passe si…” !
    

    View Slide

15. Storybook
    Une vitrine où vous pouvez exposer vos composants vivants, en illustrant tous leurs états.
    

    View Slide

16. Pourquoi Storybook ?
    Les points ✚
    ● Le code et la documentation vivent
    au même niveau
    ● Une liberté de documentation que
    n’ont pas les CMS
    ● Beaucoup de modules
    complémentaires, pas besoin de
    tout construire from scratch
    ● Une communauté et des mises à
    jours régulières
    ● Assure la non-régression de ce
    qu’on montre (par le biais de tests)
    ● Possibilité d'agréger les Storybooks
    Les points −
    ● Besoin de compétences techniques
    ● C’est assez lourd, ça met du temps
    à charger
    

    View Slide

17. 3⃣. Workflow
    

    View Slide

18. Idéation Design Documentation
    Développement
    Intégration Test
    Cycle de vie d’un élément du DS
    D E M O
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. Et après ?
    󰜣On force à utiliser une version, pour des soucis de cohérence, en utilisant un CDN
    󰜣On les accompagne, en fournissant du support
    󰜣Les produits viennent picorer dans le Design System
    

    View Slide

26. 4⃣. Conclusion
    

    View Slide

27. Si on résume :
    󰜣Storybook est un bon outil de centralisation pour le Design System
    󰜣Avoir un Design System sur Storybook ça permet de faire de la non-régression
    󰜣La collaboration est essentielle pour construire un Design System
    

    View Slide

28. C’est l’heure
    de vos questions !!
    

    View Slide

29. Design Systems France,
    c’est aussi :
    Une communauté Slack 🙌
    Rejoindre la communauté
    Une liste des Design Systems français 󰏃
    https://www.designsystems.fr/ds
    

    View Slide

30. 👋 à bientôt
    

    View Slide