Créer et insérer des instances de composant

Qui peut utiliser cette fonctionnalité

Disponible avec tous les forfaits

Quiconque disposant d'un accès peut modifier au niveau d'un fichier dans une équipe payante a accès au playground des composants.

Quiconque disposant d'un accès peut voir au niveau d'un fichier peut utiliser les composants de cette bibliothèque.

Vous découvrez les composants ? Guide des bibliothèques de styles et de composants →

Les composants sont des éléments d'UI que vous pouvez réutiliser dans vos designs.

• Le composant principal définit les propriétés de l'élément.
• L'instance est un exemplaire du composant que vous pouvez réutiliser dans vos designs.

Il existe plusieurs façons de créer et d'insérer des instances de composants dans vos designs :

• À partir du panneau des ressources dans la barre latérale gauche
• À partir de la fenêtre modale des détails du composant, accessible dans le panneau des ressources
• Utiliser l'onglet des ressources du menu des actions
• En copiant ou dupliquant une instance

Panneau des ressources

Situé dans la barre latérale gauche, le panneau des ressources vous permet de rechercher des composants à ajouter à votre fichier. Vous pouvez choisir les bibliothèques disponibles dans le panneau des ressources.

Pour ouvrir le panneau des ressources, procédez comme suit :

1. Sélectionnez l'onglet Assets dans la barre latérale gauche, ou utilisez le raccourci suivant :
   • Mac : ⌥ Option 2
   • Windows : Alt 2
2. Sélectionnez une bibliothèque avec le composant que vous souhaitez utiliser
3. Recherchez le composant que vous souhaitez utiliser
4. Cliquez sur le composant et faites-le glisser sur le plan de travail pour en créer une instance.

• Gérer les bibliothèques pour vos brouillons
• Gérer les bibliothèques dans les fichiers de design
• Gérer les bibliothèques dans les équipes
• Gérer les bibliothèques d'organisation par défaut

Fenêtre modale des détails du composant

La fenêtre modale des détails du composant fournit les informations suivantes :

• Documentation du composant
• Bibliothèque contenant le composant
• Aperçu de l'état par défaut du composant

Si vous disposez d'un accès en édition à une bibliothèque dans une équipe payante, vous disposez d'un accès supplémentaire à un playground de composants. 

Depuis le playground de composants, vous pouvez :

• Afficher un aperçu des variantes du composant
• Voir et définir les propriétés des composants
• Voir et définir les propriétés des composants imbriqués, si les instances imbriquées sont exposées
• Voir et modifier les modes de variable pour toutes les variables appliquées au composant
• Insérer le composant sur le plan de travail

1. Sélectionnez l'onglet Assets dans la barre latérale gauche ou utilisez le raccourci suivant :
   • Mac : ⌥ Option2
   • Windows : Alt2
2. Recherchez le composant et sélectionnez-le pour ouvrir la fenêtre modale des détails du composant.
3. Configurez votre composant à l'aide des commandes.
4. Pour insérer l'instance, cliquez sur Insert instance ou faites glisser l'aperçu sur le canevas.

Insertion rapide depuis le menu des actions

Insérez des instances de composants depuis votre clavier en utilisant l'insertion rapide. L'insertion rapide ouvre le menu Actions, où vous pouvez trouver et voir des composants provenant des bibliothèques ajoutées au fichier.

1. Utilisez le raccourci Maj I pour accéder à l'insertion rapide.
2. Utilisez la barre de recherche pour trouver un composant spécifique.

Copier ou dupliquer une instance sur le plan de travail

Dupliquer à l'aide du raccourci clavier

Si vous travaillez dans le même fichier, vous pouvez dupliquer un composant pour créer une instance, à l'aide du raccourci suivant :

• Mac : ⌘ Commande D
• Windows : Ctrl D

Copier par glisser-déposer

Vous pouvez également faire glisser un composant à l'intérieur d'un fichier pour le copier :

1. Maintenez la touche ⌥ Option (Mac) ou Alt (Windows) enfoncée et faites glisser pour créer une instance.
2. Relâchez le bouton de la souris avant la touche du clavier. Sinon, Figma déplace le composant d'origine au lieu de le dupliquer.

Copier et coller

Vous pouvez copier-coller un composant au sein d'un même fichier pour créer une instance.

Vous pouvez copier-coller d'un fichier à un autre des instances de composant et des composants principaux publiés.

• Mac : ⌘ CommandeC et ⌘ CommandeV
• Windows : CtrlC et CtrlV