Le top des Design System en 2023
Lors de mon passage dans le podcast Design Journey produit par Gautier Zimmerman (vous pouvez d’ailleurs retrouver l’épisode juste ici), Gautier m’a demandé quelles étaient les ressources que j’avais envie de recommander aux auditeurs et à la communauté.
Parmi mes réponses, je cite les documentations en ligne de Design System comme étant de super références pour apprendre comment concevoir un composant, comment le nommer, comment il fonctionne et surtout comment le documenter, au mieux, selon ses besoins.
Un site en particulier que je consulte personnellement très régulièrement, c’est component.gallery. Cette plateforme recense une collection plutôt exhaustive de composants et de systèmes “de la vie réelle”. Une vraie mine d’or ! (shoutout 📣 à Iain Bean pour avoir conçu la plateforme et surtout pour la maintenir à jour de manière totalement gratuite).
Mais, force est de constater que parfois “trop de choix, tuent le choix”. Et j’avoue avoir malgré tout une liste plus restreinte de Design System de références que je consulte quasi systématiquement lorsque je me pose une question sur un composant ou sur la meilleure façon de le documenter.
J’ai donc pensé utile de partager ici mon petit top des Design Systems références en 2023, qui, je l’espère, sera utile à tous les Product Designers en quête d’inspiration et de conseils.
Un design system, c’est quoi ?
Si cette notion vous est encore complètement abstraite en 2023, je vous invite à retrouver ma définition personnelle dans cet article :
Top des Design System en 2023
Benchmarker différentes documentations est, je trouve, une excellente façon d’apprendre et de comprendre comment d’autres équipes abordent le design et le développement. Cela permet d’avoir une compréhension globale sur les usages et pattern d’un même composant (après-tout, un inputText reste un inputText). C’est aussi une très bonne façon d’argumenter auprès de votre team si jamais vous n’êtes pas alignés sur la façon de nommer un élément (est-ce que c’est alert, message, notification, banner ?).
Évidemment, il n’y a pas une meilleure documentation qu’une autre. Il ne faut pas oublier tout le contexte qu’il peut y avoir autour d’un système et d’un produit. Les réponses apportées ne sont parfois valables que pour l’usage spécifique du produit associé.
Ces documentations sont donc à pondérer avec vos propres connaissances et la réalité du produit sur lequel vous travaillez peut-être.
Bref, en matière de Design System, ce n’est pas one size fit all, loin de là, mais il y a quand même du bon à aller explorer les pratiques des autres ;-)
Carbon Design System de IBM
- Un pionnier dans l’écosystème produit. Le système a été éprouvé maintes fois (ils en sont à la v11), ce qui en fait une excellente référence.
- Un Design System open source qui met en avant l’accessibilité, l’inclusivité et la scalabilité des composants.
- IBM développant des services variés et multicanaux, le système est très complet, tant d’un point de vue documentation design que technique. Je m’y réfère quasi systématiquement lorsque je dois concevoir et/ou documenter un élément dans mes projets.
Spectrum de Adobe
- C’est une super ref pour ceux qui travaillent sur du multiproduits et du multiplateforme. En effet, Adobe proposant de nombreuses applications différentes, Spectrum veille à ce que tout l’écosystème conserve une apparence et une expérience unifiée.
- Riche en ressources, la documentation est bien écrite, claire et accessible. L’approche n’est pas technique mais plus pédagogique pour l’utilisateur du système. L’implémentation technique des composants en CSS / React est ainsi documentée sur une autre plateforme, afin de garder celle-ci la plus accessible possible.
Gestalt de Pinterest
- Gestalt, c’est un système à destination des millions d’utilisateurs de la plateforme Pinterest. Une fois de plus, l’accessibilité est vraiment mise en avant ici, ce qui en fait une très bonne référence concernant les usages et do’s & don’t’s de chaque composant.
- Il est possible de switcher entre light mode et dark mode. C’est une véritable mise en application de leur documentation sur leur documentation, puisque les composants changent en fonction du mode de couleur. C’est malin !
- Personnellement, j’aime beaucoup la façon dont ils ont nommé et organisé leur design tokens.
Nord de Nordhealth
- Bien que ne connaissant absolument pas les produits Nordhealth, je suis particulièrement fan de leur documentation. Elle est complète, simple et facile à naviguer.
- La partie template est plutôt chouette car on peut manipuler directement l’interface, ce qui est tout de même plus parlant qu’une image statique ou qu’un schéma.
Vitamin de Decathlon
- Un Design System français ! #cocorico Riche en exemples d’utilisations, Vitamin est un super exemple de Design System dans l’écosystème de la tech française !
- Polyvalent et multiplateforme, c’est un bon exemple pour voir comment documenter un produit multicanal (web, iOS & Android), et encore plus une plateforme de type e-commerce, ce qui est peu courant.
- C’est intéressant de voir aussi comment ils ont réussi à intégrer les guidelines pour les solutions physiques de retails (le design et l’identité des enseignes physique), mais aussi sur la façon dont les produits sont conçus (éco-design, packaging, etc…).
- Enfin, les fichiers Figma sont disponibles en open source sur la communauté et ça, c’est super pour aller jeter un coup d’œil à la façon dont les librairies sont conçues et organisées.
À noter, une nouvelle version de Vitamin est en cours de développement.
Polaris de Shopify
- Un autre pionnier en matière de design et de Design System, Polaris de Shopify a refait peau neuve il n’y a pas si longtemps que ça, suite à une évolution design de toute leur plateforme. Ils expliquent d’ailleurs dans cet article, leur processus pour faire évoluer un Design System à grande échelle.
- Il y a une grande communauté autour du système, qui partage volontiers leur retour d’expérience et surtout qui met à disposition un grand nombre de fichiers sur la communauté Figma.
Goldman Sachs Design System
- Comme c’est un système à destination d’interfaces “financières” parfois complexe, cela en fait bon exemple pour la documentation de composants type “visualisation de données” comme les graphiques ou les tableaux.
Oxygen de Doctolib
- Un autre Design System français auquel je me réfère souvent. Au delà de la qualité du contenu de la documentation, il est possible de lire plusieurs retours d’expérience sur les challenges rencontrés et la mise en place du système, partagées par les équipes de Doctolib.
- C’est aussi un très bon exemple de documentation réalisée via la plateforme Zeroheight.
D’autres ressources
Pour benchmarker ou pour apprendre à bien documenter son Design System, voici d’autres ressources que je consulte régulièrement :
Et vous, avez-vous des documentations de Design System en référence que vous consultez régulièrement ?
Cet article a été pensé & écrit avec amour ❤️ à la main, et n’a pas été généré par une IA.
Si vous avez trouvé cet article utile et intéressant et que vous souhaitez apporter votre soutien, n’oubliez pas de mettre un clap autant de fois que nécessaire. Je vous en serais particulièrement reconnaissante 🙏
Vous avez une question, un feedback ou bien souhaitez à votre tour partager votre avis sur le sujet ? Vous êtes libre de laisser un commentaire ici 👏 ou de me contacter via Linkedin. À bientôt 👋
