Créer un design system sur Figma
Source image de couverture : dribbble.com
Figma est une solution multiplateforme et entièrement web, dédiée à la conception et la création des interfaces utilisateurs, des wireframes et des prototypes, pour les sites internet et les applications web et mobiles.
C’est un outil collaboratif en ligne qui assure un travail agile et une collaboration solide entre les développeurs, les designers et les différentes parties prenantes. Ces professionnels peuvent exploiter en temps réel les mêmes composants graphiques, qui sont définis dans le design system de Figma.
Le design system désigne une bibliothèque de composants que les membres de l’équipe peuvent employer, réutiliser et partager en toute cohérence et fiabilité.
Qu’est-ce qu’un design system ?
Le design system est une librairie de composants complète, qui rassemble : les couleurs, les textures, les polices de caractères, les icônes…. Outre toutes les autres données qui permettent aux différents départements d’accomplir des projets de conception d’envergure. Notamment, le design system contient :
- Les éléments du branding et de l’identité visuelle de l’entreprise, tels que : le logo, la typographie, les formes, etc.
- Le ton et la voix de la marque. Cela concerne sa manière de communiquer avec son public cible, à travers son langage naturel, ou en adoptant un ton formel ou informel.
- Une bibliothèque de patterns et d’interfaces graphiques.
- Un guide de style visuel et une bibliothèque UI qui rassemble par exemple, les éléments de navigation, les composants d’un formulaire, etc.
- Une documentation des composants UI.
- Toutes les ressources matérielles et immatérielles nécessaires pour mettre en œuvre les objectifs du projet.
Cette librairie de composants permet de créer un référentiel UX/UI unique et de favoriser l’agilité des designers, des développeurs et de tous les professionnels impliqués dans le projet. Cela dans l’objectif d’optimiser et d’accélérer le processus de design. C’est ce qui assure de diffuser une image de marque positive, à travers tous les produits digitaux de l’entreprise : sites ou applications.
Cette banque de données sert de guideline pour ces professionnels, afin d’unifier leur compréhension et connaissances des différentes ressources à employer dans le projet et la manière avec laquelle ils peuvent les intégrer dans leur travail.
L’avantage le plus important apporté par ce système de conception est la réutilisation des composants. Cette technique permet aux utilisateurs d’intégrer des éléments UI prêts à l’emploi directement dans leurs projets de conception et de les modifier selon les exigences de leurs cahiers de charges.
La réutilisation permet aux designers de se concentrer sur leur cœur de métier et leur épargne de tout reconstruire à partir de 0. De ce fait, ils peuvent avancer plus rapidement dans leur travail.
Il convient de signaler aussi que le design system est un système de conception dynamique et adaptatif, qui s’oppose à une normalisation figée de la conception des interfaces utilisateur. Il est toujours maintenu à jour pour s’adapter convenablement aux besoins évolutifs de l’entreprise et parvenir par conséquent à réduire la dette de design.
Il est recommandé d’intégrer dans le design system des composants ou des interfaces dans un état testé et finalisé. Cela dans le but d’éviter d’incorporer des éléments indécis qui peuvent induire l’équipe prenante en erreur.
L’apport du design system aux utilisateurs de Figma
Le design system est une boîte à outils pratique pour les concepteurs et les développeurs. Ce référentiel UI/UX renferme des composants identifiés de façon unique. De cette manière, toute modification est réalisée une seule fois sur le même élément. Ainsi chaque mise à jour sera perçue par tous les membres de l’équipe de la même manière.
Pour plus de praticité, Figma offre un tableau de bord qui récapitule tous les composants du design system. De ce fait, tous les développeurs, les designers, les techniciens, etc, peuvent avoir une vue holistique de tous les éléments présents dans la bibliothèque.
Chaque design system est muni d’un panel d’administration pour gérer les différents composants, à travers plusieurs sections et sous-sections : Assests (brand, boutons, composants UI, etc), Avatar (visages, silhouettes, espaces, etc), …
A travers un simple geste de glisser-déposer, le concepteur peut personnaliser le composant UI, selon ses besoins. Le design system offre aussi une documentation consistante pour décrire les différents usages, caractéristiques et variations d’un élément UI. Par exemple, grâce à cette description, l’utilisateur peut distinguer le composant en cours d’utilisation et celui en instance.
Cet outil de conception optimise la communication entre les différents intervenants et engage leur collaboration dans la même voie. Ce qui réduit considérablement les malentendus et le temps gaspillé qui peut en découler. Cela conduit par conséquent à une collaboration plus étroite et une meilleure productivité.
Comment créer un design system sur Figma ?
Réaliser un audit visuel
Dans le cas de réutilisation de composants, il est important d’effectuer un audit visuel et de faire un inventaire exhaustif de leurs caractéristiques et usages, outre tous les wireframes et les parcours utilisateurs élaborés. Cela dans l’objectif de déterminer les composants qui peuvent être intégrés dans le nouveau projet.
Pour effectuer cette mission plus rapidement, il est recommandé de s’adresser directement aux bonnes personnes, tels que les chefs des départements, si le besoin s’impose. Cela favorise la collecte d’informations plus justes et plus fiables.
Cet audit permet aux concepteurs d’identifier les composants manquants ou qui doivent être modifiés pour s’aligner sur les impératifs du nouveau projet. Il aide aussi à soulever les incohérences et les freins à une expérience utilisateur engageante.
Développer un Atomic Design
L’atomic Design est une méthode de conception d’interface utilisateur modulaire, énoncée par Brad Frost. Elle permet de concevoir des interfaces utilisateur fonctionnelles d’une manière structurée, permettant d’organiser les composants UI du plus petit au plus grand. Cela offre une meilleure flexibilité dans l’intégration de ces éléments dans les différents projets.
La conception atomique est une méthode de développement de design system. En effet, la construction de cette librairie de composants se base sur la design atomique pour créer un guideline de conception compréhensible par tous les utilisateurs. Ces styles guides serviront de référence pour mener à bien le processus de design.
L’architecture modulaire de l’atomic design se base sur cette décomposition :
- Les atomes représentent les composants UI les plus basiques et les plus indivisibles, tels que : les boutons, les couleurs, les polices de caractères, etc.
- Les molécules : désignent un groupe d’atomes. Tel est l’exemple d’un composant d’un formulaire qui renferme un libellé, un champ de saisie et un bouton.
- Les organismes : sont des groupes de molécules. Ils rassemblent consécutivement des groupes d’atomes.
- Les templates : représentent la hiérarchisation des molécules et des atomes. Il s’agit d’une représentation très basique du squelette de l’interface numérique, sans inclure les textes et les images. Le template peut être utilisé pour tester cette maquette en mode responsive.
- Les pages : représentent les interfaces ihm axées sur les templates établis.
Le design modulaire permet de fluidifier les modifications, car il permet de réduire le temps et l’effort engagés pour effectuer une rectification. Chaque modification appliquée sur un élément UI sera reproduite, en toute cohérence, dans l’ensemble des composants : atomes, molécules, organismes, …
L’approche modulaire conduit à une réutilisation plus délibérée des éléments de l’interface ihm. Il est plus facile de déterminer quels composants UI peuvent être réutilisés dans le cadre d’une refonte ou d’une nouvelle conception d’une interface UI, ou carrément d’un nouveau système atomique.
Créer une librairie de composants
Figma offre une interface d’administration conviviale pour créer les différents composants de la bibliothèque de design system : la typographie, les contrôles, les espaces, la navigation, les composants imbriqués, etc. Tous ces éléments peuvent être partagés entre les parties prenantes. Il suffit que chaque utilisateur active le composant et les styles qu’il envisage d’employer et de les importer dans son design.
Les collaborateurs (développeurs, designers, product manager, etc) peuvent travailler ensemble et en temps réel sur la création et la modification du même élément UI. Tout ajustement est immédiatement répercuté dans toutes les variations du composant en question (que ce soit dans Figma ou dans le code).
Les designers et les développeurs de l’équipe agile accèdent à un référentiel UX/UI unique qui définit un langage de design unifié et axé sur plusieurs catégories, telles que la typographie, les composants graphiques (les boutons, les cartes, les bannières, les fenêtres de dialogues, les séparateurs, les sélecteurs de date, etc), l’iconographie, les layouts (mises en page) basiques ou responsives, etc.
Figma fournit une boîte à outils complète pour créer et gérer les composants graphiques vectoriels comme les formes, à l’aide de sa fonctionnalité inédite : vector network (le réseau vectoriel). Cette fonctionnalité est plus souple que la technique vector paths (les chemins vectoriels).
Vector network permet de connecter facilement deux points, sans avoir besoin d’une direction à suivre pour joindre le point d’origine, comme c’est le cas pour les stylos de dessin classiques. Vector network permet de créer consécutivement des formes plus complexes, telles que celles utilisées dans la création des icônes.
Définir les différentes variantes des composants UI
Le fait de créer des variantes des composants UI permet de faciliter l’identification et l’utilisation des ces éléments. Notamment, le concepteur peut classer ces éléments selon des catégories, comme cet exemple, le composant hero peut rassembler les sous-éléments suivants : image d’arrière-plan, texte+bouton, bouton, etc.
La méthode décomposition en variantes permet de simplifier la création des éléments composites, à l’instar d’un formulaire composé de plusieurs champs de différents types. Donc, au lieu de parcourir tous les champs, un par un, pour préciser leurs types, il suffit de les organiser selon des variantes et de les associer en groupes. Par conséquent, l’utilisateur effectue la modification une seule fois pour chaque groupe de composants.
Concevoir des composants flexibles
La propriété de mise à jour automatique : auto layout, proposée par Figma, permet d’agrandir ou de rétrécir un composant, selon la taille du contenu que l’utilisateur y introduit. Cela concerne notamment :
- La taille d’un bouton qui augmente ou diminue en fonction de la taille de son libellé.
- Les accordéons qui s’adaptent au nombre de sections que l’utilisateur ajoute ou supprime.
- La taille des listes déroulantes qui s’accorde au nombre des éléments qui la compose.
- Une mise en page adaptative qui s’accorde à la variation de la taille de ses composants.
Nommer tous les composants
Il est indispensable de nommer tous les composants UI et leurs couches (layers) afin de faciliter la gestion de leurs propriétés. Il faut mettre en place un système de nommage clair afin de faciliter la navigation des utilisateurs entre les différentes couches d’un composant et d’éviter les risques de confusion et d’erreur.
Des exemples d’outils inédits pour renforcer le travail collaboratif sur le design system
Figma ajoute à son système un nouvel outil : FigJam (il est encore en version beta). Cet outil sert à organiser les ateliers de co-conception et toutes les activités collectives. Il s’agit d’un espace collaboratif en ligne qui permet aux designers de collaborer à distance.
FigJam offre les services de système de notes, de live chat et d’insertion d’éléments graphiques dans un design system déjà existant. C’est ce qui permet aux concepteurs de gagner du temps sur la conception de ces composants et accélère leur processus de conception.
Figma propose un autre outil innovant de branching, permettant aux designers de créer leurs branches, de les réviser et de les fusionner, exactement comme Github. Cette fonctionnalité est très avantageuse dans le cadre du développement d’un design system.
Pour un maximum de fiabilité, Figma renforce son système de gestion de versions pour permettre à l’utilisateur de visualiser l’historique de versions et de les gérer à partir de la page sur laquelle il travaille.
Mot de la fin
La création d’un design system avec Figma est un grand exploit. Cela renforce l’agilité de l’équipe prenante et améliore le processus de conception. Il s’agit d’une méthode de co-création efficace qui simplifie le travail des concepteurs et rend leur collaboration avec les autres intervenants : développeurs, product managers, etc, plus solide et plus cohérente.
Figma assure un développement plus souple du design system, par le biais d’interfaces de dialogue élégantes, simples, conviviales et faciles à comprendre. Ce qui réduit la complexité de design et aide à améliorer la productivité des membres de l’équipe. Cela conduit à créer des interfaces et des prototypes efficaces, d’une manière rapide.
by 
