Dans l’univers du design, on utilise davantage d’outils qui nous facilitent le travail comme Figma qui se présente comme l’un des logiciels de référence en matière de conception des interfaces utilisateur. L’outil brille par son accessibilité et la possibilité d’y créer des prototypes directement sur le navigateur à partir du cloud, même sur la version gratuite.
De plus, Figma dispose de nombreuses fonctionnalités techniques qui optimisent et accélèrent le travail du designer comme les composants. Ces derniers désignent un élément de l’interface utilisateur (bouton, bloc, formulaire, etc.) destiné à être exploité à plusieurs reprises tout au long du processus de conception.
Si vous êtes curieux de connaître le mode d’emploi des composants dans Figma, cet article est alors pour vous.
Quelle est l’utilité des composants dans Figma ?
Comme nous venons de l’expliquer, les composants sont un ensemble d’éléments essentiels et réutilisables dans la conception d’une interface utilisateur. Leur objectif est d’harmoniser l’ensemble de vos designs de manière à ce que tout soit identique à la fois du point de vue fonctionnel et esthétique.
Apprendre à créer des composants est un must-have lorsqu’on vous forme au design avec Figma. Cela dit qu’il est logique de se poser la question : pourquoi créer des tonnes de composants pour les utiliser dans un projet plutôt que de créer chaque élément et le copier lorsqu’on en a besoin ? La réponse se résume en deux points :
- : une fois un composant est créé, vous n’avez plus à le refaire et à le replacer dans chaque canevas que vous réalisez. D’ailleurs, lorsque vous désirez apporter une modification sur l’élément en question (changement de couleur, de typographie, etc.), la modification se répercute automatiquement sur toutes les conceptions comportant ledit élément.
- : Imaginez que vous désirez ajouter un bouton dans plusieurs pages de votre design. Si vous le faites sur chaque page à part, vous allez certainement vous retrouver avec des incohérences au niveau du positionnement. En créant ce bouton dans un composant, le remplacement et la modification se feront d’eux-mêmes sur tous vos designs.
Ce que vous devez savoir sur ces composants
Une fois que vous avez compris le rôle des composants dans la conception d’une interface utilisateur et comment les créer, vous devez garder en tête certaines informations clés.
Le type des composants
Figma dispose de deux types de composants, à savoir :
- est créé lorsque vous transformez pour la première fois un élément d’interface utilisateur en composant et que vous définissez ses propriétés. Il est représenté par une icône de 4 losanges.
- est une copie du composant maître que vous pouvez réutiliser dans plusieurs conceptions. Il est représenté par une icône à un seul losange.
Il est à noter que les instances sont liées aux composants maîtres. Ainsi, lorsque vous apportez des modifications à un composant maître, ces modifications sont appliquées à l’instance. Si vous désirez creuser davantage le sujet, découvrez le guide vidéo réalisée par Figma à ce sujet :
Les propriétés à définir dès le début
La création d’un composant ne se complète qu’avec la définition de ses propriétés dont principalement les contraintes et la grille de mise en page. Ces deux propriétés sont essentielles pour permettre aux autres membres de votre équipe de comprendre le comportement du composant lorsqu’il est redimensionné. Cela vous fera gagner du temps lorsque vous travaillerez sur des comportements réactifs dans votre produit.
Les propriétés du texte en cas de changement d’une instance
L’un des avantages de Figma est qu’il est possible de préserver les propriétés de texte lorsque vous changez des instances. Pour ce faire, assurez-vous que le calque de texte de chaque composant porte le même nom (par exemple, « Button Text »). Si vous ne le faites pas, vos remplacements de texte ne persisteront pas et vous devrez mettre à jour manuellement le texte après avoir changé les instances.
La dénomination des composants
Lorsque vous créez davantage de composants, il sera utile d’adopter un bon système de dénomination pour pouvoir trouver facilement les composants dans le panneau des ressources. Cela facilitera éventuellement leur partage entre les différents membres de l’équipe de design.
Pour cela, vous pouvez utiliser la désignation conventionnelle par barre oblique, à l’instar des adresses web, pour créer une hiérarchie organisée pour vos composants. A titre d’exemple, vos fichiers seront désignés de la sorte : « donné/champ/texte- Actif », « donné/champ/Texte – Affichage seulement », etc.
Dénomination des composants par barre oblique
La documentation sur les composants
Les composants maîtres sont dotés d’un champ de description dans lequel vous pouvez ajouter des informations sur l’utilisation du composant, son comportement et tout ce que vous jugez pertinent. La description d’un composant apparaît lorsque vous le survolez dans le panneau des ressources.
L’objectif de la documentation des composants est de fournir des informations pertinentes et nécessaires pour donner aux membres de l’équipe un contexte suffisant pour comprendre le fonctionnement du composant et comment l’intégrer à un design. Il est donc important de ne pas louper cette case et de documenter tous vos composants pour éviter de ralentir le travail collaboratif.
Le « Swap Instance »
À mesure que le nombre de vos composants augmente, il peut être fastidieux de rechercher le bon composant dans le panneau des ressources. Heureusement que Figma propose un raccourci pour vous aider à permuter des composants. Lorsque vous voulez échanger une instance, il suffit de la sélectionner, de cliquer sur le bouton droit de la souris et d’aller à l’élément « Swap Instance ». Un sous-menu apparaît avec une liste de composants connexes et vous pouvez ainsi choisir l’instance désirée.
Le mot de la fin
Comprendre l’usage des composants de Figma vous facilite le choix UI kits pour créer des designs system et des prototypes à travers ce logiciel. Cet article a été consacré à l’énumération de quelques concepts fondamentaux que vous devez maîtriser pour savoir tirer profit de l’un des atouts forts de conception chez Figma. Il existe, toutefois, plusieurs autres éléments à prendre en considération pour perfectionner votre apprentissage de l’outil, des informations que vous pouvez mieux assimiler durant votre programme de formation.
Autres questions posées par les lecteurs :