Composants Figma : Création Efficace de Systèmes de Conception 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 apparaissent en violet dans le panneau Calques et sont 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, faites-la glisser depuis le panneau Ressources, dupliquez le composant principal (Ctrl/Cmd + D), ou copiez-collez-le.

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, faites un clic droit sur une instance et sélectionnez Réinitialiser toutes les modifications. Pour appliquer les modifications d'une instance au composant principal, utilisez 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, faites un clic droit et sélectionnez Détacher l'instance, allez dans le panneau Design et sélectionnez Détacher l'instance, ou utilisez le raccourci Ctrl + Alt + B (Windows) ou Cmd + Option + B (Mac).

Restaurer un composant principal supprimé

Sélectionnez une instance, allez dans le panneau Design et cliquez sur Restaurer le composant.

Partager des composants

Les composants sont enregistrés localement par défaut. Pour les partager, faites un clic droit sur un composant principal et sélectionnez Publier les composants sélectionnés, ou déplacez le composant dans un projet d'équipe pour que d'autres puissent y accéder.