Développer un design system
pour optimiser les opérations et
la constance du design

5 min readMar 18, 2021

“ Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions. ” — Chris Messina

image trouvée sur : https://github.com/carbon-design-system/carbon

Le défi

Lorsque j’ai débuté en tant que UX / UI designer dans mon entreprise actuelle, l’équipe de dev développait le produit de rédaction juridique automatisée depuis plusieurs mois en concentrant ses efforts au niveau fonctionnel. Tout était donc à bâtir sur le plan du design, autant au niveau des opérations qu’au niveau de l’élaboration de l’identité visuelle de l’application.

Constats

Avant d’entrer en mode solutions, j’ai d’abord fait un état des lieux et analysé la situation actuelle. Voici les constats que j’ai faits après quelques semaines de travail.

Travail collaboratif
Nous sommes maintenant 2 designers à travailler au design de la solution, nous devons donc travailler de pair afin de développer un design cohérent.

Tâches à venir
Comme plusieurs phases de développement sont prévues, nous voulons conserver la cohérence et l’uniformité des interfaces dans une solution grandissante.

Outil de conception
Les maquettes étaient produites dans Photoshop, ce qui n’est pas optimal au niveau du temps de conception, et de la lourdeur des fichiers. Photoshop ne permet pas de réutiliser des composants, il était donc difficile de scaler et d’utiliser les mêmes normes graphiques.

Organisation des fichiers
Les fichiers design étaient difficilement trouvables et comportaient plusieurs versions, ce qui créait de la confusion dans l’équipe et qui causait de la perte de temps et du travail fait en double.

Hypothèse — Un design system pour optimiser le design Op

Après avoir fait plusieurs recherches en fonction des constats que j’avais faits, j‘ai émis l’hypothèse qu’un design system pourrait avoir les bienfaits suivants pour l’entreprise:

1. Assurer la constance et l’uniformité
2. Développer un produit plus intuitif pour l’utilisateur
3. Augmenter l’efficacité de l’équipe
4. Centraliser l’information
5. Permettre la scalability
6. Faire évoluer le produit en gardant des traces

Recherche et preuve de concept

Formation

Lorsque j’ai proposé de développer un design system pour l’entreprise, j’ai d’abord été mandaté pour faire une recherche approfondie sur le sujet. J’ai donc suivi trois formations.

https://www.linkedin.com/learning/ux-foundations-style-guides-and-design-systems
https://www.linkedin.com/learning/creating-a-design-system-with-adobe-xd-2
https://www.linkedin.com/learning/adobe-xd-using-ui-kits

Présentation à l’équipe

À la suite de ma phase d’apprentissage, j’ai rassemblé le fruit de mes recherches dans une présentation qui a fait l’objet d’un « Friday file » présenté à l’équipe. J’y ai illustré les fondements et les bonnes pratiques de conception d’un design system, tout en faisant l’étude des besoins spécifiques pour l’entreprise.

Étapes de conception
Organisation et nomenclature des fichiers
Sauvegarde
Partage et synchronisation
Documentation

Voir la présentation (simplifiée)

https://docs.google.com/presentation/d/1T_2V2XPigAvIwRycvhMLJ1WxhjqNo3e4/edit#slide=id.gc54a68b143_0_8

Comment est constitué un design system?

Lorsqu’on fait une recherche sur le design system, le concept atomique de Brad Frost émerge rapidement. J’ai donc analysé le design actuel de notre application en fonction de ce système. J’ai répertorié les éléments du design qu’il y avait en place à l’époque et j’ai élaboré la logique organisationnelle en fonction de cette méthodologie.

https://bradfrost.com/blog/post/atomic-web-design/

Logique organisationnelle — Image prise du vidéo : https://www.youtube.com/watch?v=Hx02SaL_IH0

Organisation et nomenclature des fichiers dans la librairie UI

Afin de proposer une logique efficace pour l’organisation des fichiers et pour la nomenclature des composants, j’ai fait une analyse comparative de différents design systems reconnus tels que :

https://atlassian.design/
https://polaris.shopify.com/

Recommandations sur l’organisation des fichiers

Les recommandations que j’ai émises à la suite de l’analyse des différents design systems, selon les composants répertoriés dans la solution sont les suivantes :

FICHIERS DE FONDATION

Typographies et Typescale
Couleurs et ses applications
Espacements et proportions
Grids
Iconographie

FICHIERS DE COMPOSANTS

Boutons
Menus
Listes
Cartes
Éléments de formulaire
Headers

FICHIERS PAR TEMPLATE

Concevoir un fichier réutilisable par grandes sections de l’application.

Recommandations pour la nomenclature des composants

J’ai fait aussi une recherche sur les bonnes pratiques de nomenclature des composants dans une librairie UI. J’ai trouvé plusieurs éléments très intéressants dans cet article.
https://www.invisionapp.com/inside-design/naming-conventions/

Voici la nomenclature qui sera utilisée pour nomme les composants dans notre librairie UI :

Catégorie / Type / Contexte / État ou grandeur

Sauvegarde, Partage et synchronisation

Un autre enjeu était de déterminer comment nous allions sauvegarder les fichiers du design system. Nous devons d’une part être fonctionnel au quotidien ( co-création, réutilisation de composants, partage avec l’équipe de DEV) et d’autre part, nous devons sauvegarder des versions sécurisées pour ne pas perdre le travail réalisé. J’ai donc fait différentes expérimentations avec Github, Abobe Cloud et les serveurs de l’entreprise afin de déterminer la meilleure solution selon les différents critères illustrés dans le tableau.

Recommandations Sauvegarde, Partage et synchronisation

Comme la majorité des critères énumérés sont comblés lors des expérimentations faites dans d’Adobe XD, l’utilisation de cet outil se concrétise de plus en plus comme une solution viable pour la conception du design system.

Synchronisation, partage et sauvegarde
Déposer l’ensemble du design system sur Adobe Cloud et utiliser le partage de fichiers.

Versionnement
GitHub pour du versionnage périodique du design system

Documentation

Il est important de documenter le design system pour assurer une source de vérité. Selon les recherches que j’ai effectuées, voici ce que je suggère de documenter.

https://atlassian.design/foundations/color

Design philosophy
charte graphique, ligne éditoriale..

2. Répertoire des composants
États et emplacements dans l’app.

3. Fondations graphiques
Typographie et leurs applications, couleurs et leurs applications, espacements (marges et padding) et grid.

4. Design tokens
Composants, CSS, JavaScript, modèles HTML.

Où documenter le design system?

Notre entreprise utilise déjà Confluence comme outil de documentation, il va donc de soi d’utiliser le même outil dans lequel sera rédigé la documentation du design system, répertoriés les liens vers les différents fichiers, les liens vers les prototypes interactifs ainsi que les documents de requis fonctionnels que je rédige.