Avec Figma, vous avez un outil collaboratif en ligne qui garantit un travail agile et une bonne collaboration entre toutes les parties prenantes d’un projet de conception graphique. Il permet notamment de réaliser un design system, un élément désignant une bibliothèque de composants qu’on peut employer, réutiliser et partager pour développer un produit digital. Découvrez comment faire cette conception avec Figma.
Faire un audit visuel
Il est recommandé de faire un audit visuel avant de réaliser un design system avec Figma. Le but est de déterminer les composants pouvant être intégrés dans le futur projet. Pour faire cet audit, il est conseillé de s’adresser aux bonnes personnes. Cela permet de collecter les informations les plus justes et les plus fiables. Aussi, cela donne la possibilité aux concepteurs d’identifier les composants qui manquent ou devant être modifiés afin de s’aligner sur les exigences du nouveau projet. En outre, l’audit est essentiel pour détecter les incohérences et les éléments pouvant freiner une expérience utilisateur qui engage.
Mettre en œuvre d’un atomic design
Pour faire un design system avec Figma, la mise en œuvre d’un atomic design est souhaitable. C’est une méthode de conception d’interface modulaire. Elle est essentielle pour la conception d’interfaces utilisateurs fonctionnelles, et ce, de façon structurée. Les composants UI sont ainsi organisés du plus petit au plus grand. Cela permet d’offrir une bonne flexibilité dans l’intégration de ces différents éléments dans les projets.
L’atomic design assure la fluidification des modifications, ce qui réduit le temps et les efforts à consentir pour faire des rectifications. Et chaque modification appliquée sur un élément UI sera reproduite dans l’ensemble des composants.
Concevoir une librairie de composants
Une interface d’administration conviviale est offerte par Figma pour créer les différents composants de la bibliothèque du design system, tels que la typographie, les espaces, la navigation, les contrôles et les composants imbriqués. Le partage de ces différents éléments peut se faire entre les parties prenantes. Chaque utilisateur doit simplement activer le composant et les styles qu’il a l’intention d’employer et de les importer dans son design.
Il est possible pour les collaborateurs, comme les développeurs et les designers, de travailler ensemble et en temps réel pour la création et la modification du même élément UI. Lorsqu’un ajustement est fait, celui-ci est répercuté immédiatement dans toutes les variations du composant concerné.
Avec Figma, est fournie une boite à outils complète permettant la création et la gestion des composants graphiques vectoriels, tels que les formes. C’est la fonctionnalité inédite « vector network », qui entre en jeu à ce niveau.
Créer des variantes des composants UI
La création des variantes des composants UI facilite l’identification et l’utilisation de ces composants. Il est possible notamment que le concepteur classe ces éléments en fonction de catégories.
En mettant en pratique la méthode de décomposition en variantes, la création des éléments composites est simplifiée, comme dans un formulaire fait de plusieurs champs de différents types. Au lieu donc de parcourir tous les champs un par un pour la précision de leurs types, on les organise simplement en fonction de variantes et on les associe en groupes. L’utilisateur effectue par conséquent la modification en une seule fois pour chacun des groupes de composants.
Mettre en place des composants flexibles
En outre, pour faire un design system avec Figma, il est bon de mettre en place des composants flexibles. À cet effet, l’auto layout, la propriété de mise à jour automatique de l’application, peut être utilisée. Elle permet de rétrécir ou d’agrandir un composant en fonction du contenu que l’utilisateur y a introduit. Cette possibilité peut concerner la taille d’un bouton pouvant augmenter ou diminuer selon la taille de son libellé et le fait d’accorder la taille des listes déroulantes au nombre d’éléments la composant.
Autres questions posées par les lecteurs :