Composants Figma : Création Efficace de Systèmes de Design Réutilisables

Éléments d'interface utilisateur réutilisables garantissant la cohérence et permettant des mises à jour rapides dans les projets de design. Les composants peuvent être créés à partir de calques, de groupes ou de cadres.

Créer un composant

Sélectionner un cadre ou un élément, faire un clic droit et choisir Créer un composant ou utiliser le raccourci Ctrl + Alt + K (Windows) ou Cmd + Option + K (Mac).

Composants principaux

Les composants principaux sont affichés en violet dans le panneau Calques et identifiés par une icône de losange quadruple.

Instances

Les instances sont des duplicatas du composant principal, identifiées par une icône de losange simple. Pour créer une instance, faire glisser depuis le panneau Ressources, dupliquer le composant principal (Ctrl/Cmd + D), ou le copier-coller.

Modifications et remplacements

Les modifications apportées au composant principal mettent automatiquement à jour toutes ses instances. Les remplacements, tels que les changements de couleur ou de texte, n'affectent que l'instance. Pour réinitialiser les remplacements, faire un clic droit sur une instance et sélectionner Réinitialiser toutes les modifications. Pour appliquer les modifications d'une instance au composant principal, utiliser Appliquer les modifications au composant principal dans le panneau Design.

Détacher une instance

Pour détacher une instance de son composant principal et la rendre autonome, faire un clic droit et sélectionner Détacher l'instance, aller dans le panneau Design et sélectionner Détacher l'instance, ou utiliser le raccourci Ctrl + Alt + B (Windows) ou Cmd + Option + B (Mac).

Restaurer un composant principal supprimé

Sélectionner une instance, aller dans le panneau Design et cliquer sur Restaurer le composant.

Partager des composants

Les composants sont enregistrés localement par défaut. Pour les partager, faire un clic droit sur un composant principal et sélectionner Publier les composants sélectionnés, ou déplacer le composant dans un projet d'équipe pour permettre l'accès aux autres.