Comment créer un composant sur Figma ?

Qu'est-ce qu'un composant dans Figma ?

Un composant dans Figma est un élément réutilisable qui permet d'assurer la cohérence visuelle et fonctionnelle d'une application ou d'un site web. Il s'agit d'un élément maître que vous pouvez dupliquer sur plusieurs pages, facilitant ainsi la gestion de modifications globales.

Pourquoi utiliser des composants ?

Les composants permettent de :

• Éviter de répéter le même élément plusieurs fois.
• Faciliter les mises à jour en centralisant les modifications.
• Assurer une uniformité visuelle à travers toute l'interface.

Comment créer un composant dans Figma : étapes détaillées

Étape 1 : Sélectionner l'élément à convertir

Sélectionnez l'élément que vous souhaitez transformer en composant. Cela peut être une barre de navigation, un bouton ou toute autre interface graphique que vous utilisez fréquemment.

Étape 2 : Transformer en composant

Cliquez sur l'icône losange située dans la barre supérieure de Figma ou utilisez le raccourci clavier (Ctrl+Alt+K sur Windows ou Cmd+Option+K sur Mac). L'élément devient alors un composant principal reconnaissable grâce au losange plein.

Étape 3 : Dupliquer le composant

Copiez-collez le composant (Cmd+C, Cmd+V sur Mac ou Ctrl+C, Ctrl+V sur Windows) pour créer des instances (composants enfants). Ces instances sont reconnaissables par un losange vide.

Exemple pratique : application mobile

Imaginons une application mobile avec une barre de navigation (Tab Bar). Si cette barre n'est pas un composant, chaque changement doit être effectué individuellement sur chaque écran, ce qui peut devenir très chronophage.

En transformant cette barre en composant principal, tout changement réalisé sur celui-ci, comme inverser des icônes ou modifier des couleurs, s’applique automatiquement à toutes ses instances sur les différents écrans.

Modification globale

Lorsque votre client souhaite inverser deux icônes ou changer une couleur, effectuez simplement la modification sur le composant principal. Toutes les autres instances seront automatiquement mises à jour.

Retrouver facilement ses composants

Pour organiser vos composants, créez une page dédiée à votre Design System où tous vos composants principaux seront stockés.

Pour insérer rapidement un composant sur une autre page :

1. Rendez-vous dans l'onglet « Assets » situé à gauche de l'écran.
2. Faites glisser le composant souhaité directement sur votre page.

Cela évite le copier-coller et assure que vous utilisez toujours les versions à jour des composants.

‍

La maîtrise des composants dans Figma est essentielle pour tout designer souhaitant optimiser son temps et assurer une cohérence visuelle à travers ses designs. Prenez l’habitude d’utiliser cette fonctionnalité puissante pour créer des interfaces professionnelles, facilement modifiables et évolutives.