Introduction

La bibliothèque de composants UI a été développée pour faciliter la création et la gestion des interfaces utilisateur au sein de notre équipe de design. Elle comprend une collection de composants réutilisables, bien définis et cohérents qui respectent nos normes de design. Son objectif est de garantir une expérience utilisateur fluide, de réduire le temps de design et d’assurer une uniformité.

Contenu de la bibliothèque

La bibliothèque de composants UI comprend plusieurs composants clés qui peuvent être utilisés à travers tous les projets de l’équipe. Voici quelques-uns des composants principaux :

1. Boutons : Différents style de bouton configurable avec différentes tailles et couleurs.
2. Icônes : Une banque d’icônes n/b personnalisables.
3. Tuiles (Card) : Différents styles de tuiles de navigation et d’avantages.
4. Menu / Footer : Suggestions de menus et de footer pour desktop et mobile.
5. Formulaires :  Plusieurs formulaires avec des styles différents où les champs de saisie peuvent être stylisés.
6. Composants classiques d’application IOS : Kit de boutons et autres composants qui sont fréquemment utilisés dans le design d’applications mobiles ios.
7. Autres : Autres composants intéressants à utiliser (Menu accordions, Fil d’Ariane, Strate témoignage, Google review, Schéma d’étapes, etc,).

Installation

Activer le fichier XD qui a été partagé par un membre de l’équipe design.

Pour ouvrir la bibliothèque :

1. Ouvrir XD (n’importe quel document)
2. Aller dans l’onglet bibliothèque (coin inférieur gauche). 
3. À cette étape-ci, on se trouve dans la bibliothèque du document actuel. Pour accéder à une bibliothèque externe et faut revenir en arrière en cliquant sur «< Actifs du document» dans le coin supérieur gauche.
4. À cette étape, on devrait voir les bibliothèques qui ont été partagés avec nous. Ouvrir «Bibliothèque-UI_Effet-Fute (3)»

Lorsque l’on veut ajouter des composants à la bibliothèque :

1. Clic droit sur un composant de la bibliothèque à gauche > Ouvrir le document source
2. Dans le document source, créer un nouvel élément et l’ajouter comme composant (menu de droite). De cette façon le composant sera ajouté à la bibliothèque.
   * Attention de bien le renommer et le classer dans un groupe ou sous-groupe approprié.
   * Attention de bien redimensionner les icônes pour qu’elles aient environ 23px de largeur.
   * Attention de classer le composant dans le plan de travail approprié (en lien avec la thématique du composant (bouton, formulaire, tuiles, etc.))
3. Lorsque tous les composants ont été ajoutés, il est important de mettre la bibliothèque à jour en cliquant sur l’icône dans le coin supérieur gauche là où un petit point bleu s’affiche. La fenêtre ci-dessous devrait s’ouvrir. Cliquer sur «Mettre à jour»

   ** Il est également possible de faire la demande au département design de créer un nouveau composant.

Utilisation

Dans n’importe quel document, lorsque la bibliothèque est activée et ouverte, il suffit de drag-drop le composant sur le plan de travail et de le personnaliser (typographie, la couleur) en fonction du branding du client.

Conclusion

En utilisant cette bibliothèque de composants UI, vous garantissez une interface cohérente et accessible pour tous vos projets, tout en réduisant le temps de développement.