Apparus à la fin de la dernière décennie, les design systems s’imposent peu à peu aux grandes organisations. Adaptables et évolutifs, ils se positionnent comme le chainon manquant entre les équipes design et développement.
Historique et définition du design system
Comme souvent lorsqu’il s’agit d’innovation web, le nom de Google apparaît. Avec son guide Material Design, Google a révolutionné la manière de penser, concevoir et communiquer le design digital. Énorme kit UI, UX et motion, illustré en langage informatique, le guide qui en est à sa troisième version, est considéré par beaucoup comme le premier design system d’envergure à avoir vu le jour.
Mais un design system est plus qu’un kit ou un guide de bonnes pratiques. En branding, on connaît la charte graphique, document synthétique listant et harmonisant tous les éléments graphiques d’une marque. Mais elle reste un outil créé pour le print et oublie beaucoup de notions propres au digital. Le design system est quant à lui un organisme vivant, accessible et connecté, qui comprend tous les éléments de langages pour les designers ET les développeurs, voire les structures qui gravitent autour, comme les prestataires externes par exemple. Il apporte ainsi au sein des entreprises de la cohérence dans le design digital en simplifiant la collaboration entre les parties.
Si cette définition s’attarde plus sur les usages que les fondements du concept, c’est qu’il peut exister autant de design systems qu’il existe de marques. Chacun construisant le sien en fonction de ses besoins et de son organisation interne.
À quoi sert un design system ?
Avant les design systems, lorsqu’un changement s’opérait sur un élément graphique, toutes les personnes utilisant cet élément devaient en être informées afin de bien prendre en compte ce changement dans leur environnement de travail. Avec le développement des produits digitaux et web, cette chaine de communication est vite devenue intenable. L’objectif premier d’un design system est ainsi de centraliser et d’automatiser l’information en une seule interface.
Pour ce faire, plusieurs outils sont nécessaires.
En amont, on retrouve le logiciel de création. Rangez Photoshop, des outils comme Sketch ou XD sont venus révolutionner le design digital. Chez Keley, nous utilisons beaucoup Figma, qui porte la discipline à un niveau sans précédent. Comme d’autres, il permet de designer les interfaces, les animations et tous les composants nécessaires (boutons, hover, cartes, etc…), mais il ajoute la dimension librairie qui en fait un des outils les plus actuels.
En aval, il y a la correspondance code à tous ces éléments, où sont répertoriées les traductions en langage informatique des éléments graphiques. Storybook est un exemple d’outil remplissant cette fonction.
Et au milieu, on retrouve l’interface qui répertorie tous les éléments graphiques en temps réel, les rend consultables, et y associe si besoin un code par exemple en CSS ou JavaScript. L’outil le plus célèbre, notamment en France, est Zeroheight, sans doute parce qu’il est utilisé par les design systems les plus renommés. C’est une interface web en deux parties : brand et digital. Dans la première on retrouve les éléments classiques d’une charte graphique, et dans la deuxième les éléments de design digital de manière exhaustive. Par exemple, on y retrouve l’accessibilité, le responsive, les animations, les micro-interactions, etc.
Tout l’intérêt de ces 3 types d’outils est qu’ils sont évidemment reliés, et se mettent à jour en temps réel. Par exemple, une modification sur le radius d’un bouton sur Figma sera instantanément traduit en code dans le design system publié sur Zeroheight. Chaque évolution apportée par un designer sera alors connue par l’ensemble des développeurs.
Pourquoi créer son design system ?
Mieux encore, il existe des passerelles directes vers les CMS. On atteint ici une limite dangereuse qui voudrait qu’un designer puisse engager un changement en production. Mais l’automatisation peut parfois se révéler utile. Il y a quelques années, Amazon apportait de nombreuses et successives modifications à sa charte graphique, ce qui impliquait pour les développeurs d’être constamment en alerte de ces modifications, ralentissant grandement la production.
Le lead design s’est alors penché sur le moyen d’apporter de la transparence et de l’automatisation, lorsque l’expertise du développeur n’était pas nécessaire. En échangeant avec ses pairs rencontrant la même problématique – Spotify et plus encore The Wall Street Journal, qui venait de passer deux ans à mettre à jour son site suite à un changement de typographie – un collectif de designers a mis en place des tokens. Ces tokens sont un format de données particulier qui permet ainsi l’export vers le code de manière agnostique, légère, complète et universelle. On venait d’assister à la naissance du premier Git de designers, et ainsi à un bon en avant dans la collaboration entre designers et développeurs.
Ces exemples ne sont cependant pas une injonction au design system pour tous. En effet, dans les petites structures, un kit UI peut être suffisant. Un design system nécessite au minimum une personne à plein temps pour le gérer, et cela peut aller jusqu’à 10 ETP pour les entreprises les plus avancées. C’est donc une charge lourde qui ne peut pas être supportée par toutes les organisations.
Il faut donc réfléchir en termes de besoins. Si le design est un pilier du produit ou de la marque, et qu’il implique un grand nombre de parties prenantes (filiales à l’étranger, prestataires externes, etc.), alors le design system sera un passage obligé. Quant à la question : faut-il un design system par entreprise ou par marque/produit, là encore, tout dépend de l’organisation de l’entreprise et de ses besoins. Le design system est une solution encore jeune aujourd’hui, et elle reste plus pragmatique que théorique, c’est ce qui fait que son adoption est exponentielle.
En France, nous avons la chance d’avoir des références mondiales de design systems, notamment Decathlon et Doctolib qui sont pris en exemple partout, parce que qualitatifs, exhaustifs et en open source. Ainsi, le design system devient un moyen de communication, valorisant la marque, mais aussi servant au recrutement des équipes design et développement.
Sources :
https://www.youtube.com/watch?v=RPHOwvDIlSE
https://www.designsystems.fr/liste-des-designs-systems-francais
https://www.decathlon.design/726f8c765/p/71b8e3-decathlon-design-system
https://oxygen.doctolib.design/60b411768/p/77fd2d-doctolib-design-system
