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 👍
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 󰏃
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
4. Monia Huet Design System Designer ℹ @Mo_n_ia Fabien Rassinier Design System Engineer ℹ @frassinier
5. • Contexte @Talend • Focus Storybook • Workflow @Talend • Questions / Réponses
6. 1⃣. Contexte
7. Éditeur de logiciels 󰟲 8+ produits Cloud ☁ 🌍 C’est quoi Talend ? 1500+ employés
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, ...
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...
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
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.
12. Comment centralise-t-on notre Design System via Storybook ?
13. 2⃣. Storybook
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…” !
15. Storybook Une vitrine où vous pouvez exposer vos composants vivants, en illustrant tous leurs états.
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
17. 3⃣. Workflow
18. Idéation Design Documentation Développement Intégration Test Cycle de vie d’un élément du DS D E M O
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
26. 4⃣. Conclusion
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
28. C’est l’heure de vos questions !!
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
30. 👋 à bientôt