Les bons outils pour construire un design system
Source image de couverture : dribbble.com
Un Design System peut être assimilé à une bibliothèque de composants de référence, dans laquelle les différents collaborateurs peuvent piocher lors du prototypage, la conception et le développement d’un projet web. Le Design System regroupe la charte ergonomique et la charte graphique propres à l’entreprise et englobe ses ‘’Libraries’’ et ses ‘’Styleguides’’.
Il vise notamment à traduire l’identité de marque de l’entreprise en centralisant les éléments graphiques, la typographie, les visuels, le branding… De ce fait, le Design System peut être utilisé en tant que bibliothèque de référence et de guide.
Il garantit une expérience utilisateur optimisée en assurant la cohérence technique et visuelle du dispositif digital.
Pour construire un bon design system, il est essentiel de miser sur une collaboration effective des différentes parties prenantes mais aussi sur des outils adéquats. Pour ce qui est du dernier point, cet article vous fournit une liste non exhaustive des meilleurs outils permettant la création de votre design system de manière efficace, selon la spécificité de votre équipe et de ses besoins.
Un design System c’est quoi?
Quel intérêt d’un design system?
Un Design System est un référentiel de centralisation au service des designers et des développeurs et utile pour tous les membres d’une équipe. Fondé sur les bases de l’Atomic Design, un design system permet de regrouper tous les éléments constitutifs du projet dans le but d’uniformiser les usages en réduisant les incohérences, les doublons, les écarts de design, etc. Plus qu’un outil, le Design system est une méthode d’industrialisation du design qui permet de comprendre et de maintenir organisé et structuré un produit digital.
Cette méthode est utile dans le cadre de l’accroissement des développements où les méthodes de conception, l’organisation des équipes et la cadence de production sont en mutation et surtout en accélération. En effet, un design system permet notamment l’harmonisation des différents projets gérés, réduire les délais d’exécution, de modification et d’évolution. Selon Brast Frost “Il s’agit d’un ensemble d’éléments en interaction concourant à la même finalité”.
Ce référentiel UX et UI sert finalement de base à la création des dispositifs digitaux. En isolant les éléments constitutifs du design, on retrouve dans un design system les éléments graphiques mais également les règles d’usage, les éléments liés au langage (le ton, les mots, le champ lexical…), les composants techniques (web, app…), ainsi que des mises en scène permettant aux utilisateurs du référentiel de comprendre les règles par le biais de cas d’usage.
Les plus grandes entreprises technologiques disposent de Design Systems: Material Design de Google Human Interface Guidelines pour Apple ou encore le Design Language de IBM. Les Startups et les agences digitales sont préconisées à construire leurs propres design systems afin d’optimiser leur travail et d’harmoniser leurs designs.
Grâce au Design System, les équipes techniques et design peuvent utiliser directement des composants prêts à l’emploi et écrits dans un langage commun.
De ce fait, un design system aide à augmenter la productivité de l’équipe et à atteindre un niveau plus élevé de cohérence du produit digital.
Design system: les bons outils
Bibliothèques visuelles et outils de prototypage
Figma: Pour un Design system evolutif
Figma est un outil spécialisé dans la conception des interfaces Web et mobiles. Basé sur la collaboration et le partage, Figma est idéal pour la construction d’un Design System partageable par une équipe de designers. Figma est aujourd’hui un outil majeur et indispensable pour la communauté de design. Il doit sa notoriété grâce à ses fonctionnalités puissantes, qui répondent parfaitement aux tendances et exigences actuelles. Grâce à une présence sur le cloud, la possibilité de partage couplé au travail collaboratif, l’outil permet de construire efficacement un Design System et de partager facilement des bibliothèques visuelles.
En utilisant les fonctions de Team, vous pourrez intégrer autant de contributeurs que vous le voulez dans l’équipe. De la sorte, les designers prenant part au projet auront accès aux bibliothèques partagées. Ceci permet de garantir, entre autres, l’utilisation des composants principaux (qu’on nomme symbole dans Sketch) par tout le monde dans la composition du design.
Figma permet de créer et partager des composants et des styles tout en assurant la collaboration entre les designers. Ces librairies permettent de créer des Design Systems et d’uniformiser au besoin les éléments graphiques et les différents styles. De la sorte, le Design System créé permet aux designers de se conformer aux chartes graphiques. Il est également possible de mettre à jour ces éléments graphiques afin de pouvoir utiliser les nouvelles versions automatiquement.
La gestion de ces bibliothèques répond facilement aux différents besoins des équipes et des projets. Il est possible de rendre certaines d’entre elles facultatives, c’est-à-dire de les désactiver lorsqu’elles ne semblent pas utiles.
Ceci peut sembler pertinents pour certains, même s’il n’est pas nécessaire. En effet, en dépit du gros volume du Design System construit sur Figma (qui est basée sur le cloud), vous ne remarquerez pas de latence dans son utilisation ni dans la recherche parmi la grande quantité de composants.
L’autre atout que tous les fichiers Figma soient dans le Cloud, c’est la sauvegarde automatique. Il n’est pas nécessaire de penser à sauvegarder le travail régulièrement ou de recourir à un outil de versionning étant donné que tout est inclus. Figma fait office de contrôle de version, d’outil de blâme, fichiers sauvegardés dans le cloud. Même en opérant en mode hors ligne, l’outil enregistrera localement votre travail une fois chargé, pour ensuite le pousser en ligne dès que votre connexion est rétablie.
Outre la collaboration entre designers, Figma est très axée autour de la communauté. Les plugins facilement intégrables et les fichiers partagés réalisés gratuitement par la communauté de designers. Ils sont disponibles en libre accès sur la plateforme et peuvent être facilement activés pour être utilisés par tous les membres de votre équipe.
En définitive, il va sans dire que Figma est un outil des plus utiles pour la construction d’un Design system grâce à des fonctionnalités pratiques et adaptées, une philosophie du partage et de la collaboration favorisant le travail en équipe et le transfert de compétences, une interface fluide et ergonomique pour une prise en main rapide.
Si Figma séduit autant, c’est parce qu’il regroupe toutes les fonctions de Sketch, Invision, Zeplin à elle toute seule et propose davantage de fonctionnalités pour les perfectionner.
De ses avantages on notera:
- Partage et travail collaboratif en direct.
- Basée directement sur le cloud: supprime les latences, la surexploitation des ressources et les étapes de sauvegardes et de partage supplémentaires.
- Bibliothèques partagées, activables et désactivables.
- Commentaires sur l’espace de travail.
- Modification et récupération facile des composants.
- Grande accessibilité et portabilité.
- Très fluide et compatible avec ZeroHeight.
Sketch
Sur Sketch, les bibliothèques vous permettent de placer votre document dans un endroit où les autres designers ont un accès en mode lecture (dans un dossier Dropbox ou un référentiel dans GitHub, etc.), Afin que les autres concepteurs puissent avoir un accès rapide et facile aux styles et symboles de ce document, il leur suffit d’ajouter le document à leurs bibliothèques dans la section Préférences. Vous recevrez également les mises à jour apportées au fichier.
Une bibliothèque Sketch n’est qu’un document ordinaire qui contient des symboles, des styles de texte et des styles de calque, que vous pouvez ensuite utiliser dans n’importe quel autre document Sketch.
Des options les plus intéressantes pour la construction d’un design system sur Sketch, c’est la possibilité de mises à jour généralisée. En effet, si vous mettez à jour l’un des symboles ou des styles dans votre fichier de bibliothèque, les documents contenant ces symboles, ou l’un de vos styles prédéfinis, recevront une notification vous indiquant qu’ils peuvent être mis à jour.
Les points forts de Sketch :
- L’outil qui présente la plus grande communauté UX
- Compatiblité avec beaucoup d’autres outils
- Librairies partagées natives (adaptées au DS).
- Nombreux plugins zeplin / marvel / material theme editor..
Adobe XD
Adobe XD présente des fonctionnalités et options similaires à celles de Figma et Sketch. Cet outil en version Bêta vous permet d’enregistrer votre travail en tant que document cloud pour le partager rapidement avec vos collaborateurs. XD met automatiquement à jour les documents cloud afin que vous ne perdiez jamais votre travail. Il permet d’importer des couleurs, des styles de caractère et des composants à partir de documents cloud partagés vers le panneau Actifs. Lorsque des modifications sont apportées à un actif lié, vous serez notifié et aurez la possibilité d’accepter les mises à jour.
Adobe XD vous permet d’accéder et d’appliquer directement au sein de l’outil des images raster, des graphiques vectoriels, des couleurs, des styles de caractères et d’autres éléments créés dans Photoshop, Illustrator et d’autres applications Adobe Creative Cloud.
Plateformes de partage de composants
ZeroHeight: Documentation, Design et code
ZeroHeight permet de créer une documentation de design system en collaboration.
L’outil permet aux designers, développeurs et toute l’équipe de construire une documentation visuelle ainsi qu’une documentation technique et de la maintenir à jour. Il offre une API puissante et synchronise les fichiers de design (les Frames, composants ou style de Figma par exemple) afin de les importer et de les documenter. ZeroHeight est un CMS doté de blocs de contenu préfabriqués qui peuvent facilement couvrir la majorité de vos besoins pour une structure et un contenu de Design System de grande qualité.
ZeroHeight est un outil :
- Accessible pour les designers.
- Permettant la visualisation d’un style guide en ligne facile à documenter.
- Rattaché aux librairies partagées Sketch Figma ou Adobe XD.
- Proposant des Design Tokens toujours à jour.
- Gardantes les assets et fichiers de Design toujours synchronisés
- Permettant l’inspection des détails des composants
Superposition: Design Tokens
Superposition permet de démarrer la création d’un Design System dans un environnement déjà existant. Cet outil dispose de plugins compatibles avec Adobe XS et Figma et vous permet de parcourir, fusionner ou simplifier vos Design Tokens existants afin de mieux estimer et d’optimiser le travail à faire.
Il suffit d’entrer l’URL de votre site web ou d’une page sur superposition pour obtenir :
- Les couleurs
- La typographie
- Les espacements
- Les valeurs d’angles arrondis
- Les valeurs d’ombrage
- La valeur de transition et animation
- Et les assets.
Ces éléments peuvent être exportés dans plusieurs formats pour CSS, Sass, JS, android…
UI kit, outils de code et de handoff
StoryBook: Outil de Handoff et bibliothèque de composants
Storybook est majoritairement dédié à la documentation des développeurs front-end et aux designers maîtrisant le code. L’outil permet de construire une bibliothèque de composants avec diverses variations, qui correspondent aux cas d’utilisation réels des projets en cours.
Cet outil a pour objectif de créer un outil technique collaboratif, qui peut également être transformé en un guide de style complet. StoryBook vous permet d’obtenir des instantanés de vos composants pour voir en live les changements visuels en fonction de l’édition de code opérée.
Proposant une bonne documentation pour ces frameworks, il fonctionne bien avec du HTML brut, React, React Native, Vue, Angular, Mithril, Marko, Ember, Riot, Svelte. Il peut également se plugger directement à Figma si vous n’avez pas de plateforme de partage.
StencilJS: Création de design systems évolutifs aux composants réutilisables
StencilJS est un outil qui permet de construire des composants réutilisables et compatibles avec un grand nombre de Frameworks.
Il offre:
- Comparaison visuelle entre l’interface utilisateur et la capture d’écran
- Documentation de composant automatique et variables CSS
- Environnement de développement : Serveur de développement intégré pour le rechargement instantané des modules.
Afin de maintenir une bonne cohérence de l’UX, cet outil permet également l’unification de l’interaction pour des composants complexes
Conclusion
Il est vrai que tous les outils ne se valent pas, mais l’outil convenable à la création de votre design system dépendra de vos préférences, de la taille des projets et des utilisations prévues. Outre les outils, il vous faut des collaborateurs maîtrisant le HTML et le CSS afin de tester les composants sur un grand nombre de navigateurs et de technologies d’assistance.
Il faut également garder en tête qu’un outil n’est qu’un outil, et que la construction d’un bon design system est basé sur la collaboration, la communication et la participation efficace de toutes les parties prenantes.
by 
