Utilisation de composants

Les composants sont des éléments de conception dotés d’une flexibilité sans égal qui vous aident à créer et à gérer des éléments répétés tout en modifiant leurs instances pour différents contextes et dispositions, comme pour l’utilisation d’un bouton dans différents contextes.

Continuez à lire pour apprendre comment utiliser les composants pour gérer facilement plusieurs versions du même élément de base.

Familiarisez-vous avec ces concepts avant de poursuivre dans XD :

Création d’un composant

Pour créer un composant, sélectionnez Objet>Créer un composant. Vous pouvez également sélectionner un objet ou un groupe d’objets et utiliser l’une des options suivantes :

La première fois que vous créez un composant dans XD, il devient un composant principal, ce qui est indiqué par un losange vert dans le coin supérieur gauche. Vous pouvez modifier un composant comme vous le feriez pour tout autre élément. 

Lorsque vous sélectionnez un composant, vous pouvez afficher son nom dans l’inspecteur Propriétés. Pour renommer un composant, cliquez deux fois sur son nom dans l’Inspecteur Propriétés.

Informations à prendre en compte

• XD ne dispose pas d’une vue dédiée pour modifier les composants principaux. Lorsque vous modifiez un composant principal, vous le modifiez sur la zone de travail.
• Si vous supprimez un composant principal sur la zone de travail, vous pouvez toujours sélectionner une instance et accéder à l’option Modifier le composant principal dans le menu contextuel. XD génère un composant principal sur la zone de travail.
• Si vous souhaitez dissocier une instance de composant unique, utilisez l’option Dissocier le composant dans le menu contextuel. Cependant, si vous souhaitez dissocier toutes les instances de la zone de travail, utilisez l’option Supprimer du panneau Actifs.
• Pour vous assurer que vous modifiez le composant principal, vérifiez que le losange vert se trouve dans le coin supérieur gauche du cadre de sélection.

Bonnes pratiques

Voici quelques bonnes pratiques relatives à l’utilisation des composants :

• Vous créez une importante charte graphique de composants ? Veillez à organiser les composants principaux associés sur des plans de travail distincts. Par exemple, les boutons sur un plan de travail et les barres de navigation sur un autre.
• Lors de la création de votre charte graphique, veillez à créer les composants au niveau le plus atomique possible pour une flexibilité maximale et un potentiel de réutilisation optimal. Par exemple, lors de la création d’un composant de boîte de dialogue, assurez-vous que les boutons de la boîte de dialogue sont des instances imbriquées dans le composant de boîte de dialogue.

Utilisation d’instances de composant

Chaque copie du composant principal est appelée une instance. Les instances de composant sont indiquées par un losange vert dans l’angle supérieur gauche. Lorsque vous apportez des modifications au composant principal, les mêmes modifications sont appliquées à toutes les instances.

Les remplacements sont des modifications uniques qui s’appliquent uniquement à cette instance et non au composant principal. Si vous modifiez une propriété dans une instance, XD marque cette propriété comme un remplacement. Vous pouvez remplacer les propriétés d’une instance sans rompre sa connexion au composant principal. 

Bonnes pratiques

Voici quelques bonnes pratiques relatives à l’utilisation des instances de composants :

• Voulez-vous tester une variation de composant ? Sélectionnez Dissocier le composant dans le menu contextuel pour détacher l’instance du composant principal.
• Essayez-vous de localiser :
  • toutes les instances d’un composant sur la zone de travail ? Faites un clic droit sur le composant dans le panneau Actifs et sélectionnez Mettre en évidence dans la zone de travail.
  • Le composant principal lorsque vous travaillez sur une instance ? Faites un clic droit sur l’instance et sélectionnez Modifier le composant principal.
  • L’instance de composant précédente après avoir modifié le composant principal ? Faites un clic droit sur le composant et sélectionnez Retour à l’instance précédente. 

Modification d’un composant principal

Lorsque vous modifiez un composant principal, toutes les instances sont mises à jour, sauf si elles contiennent des remplacements pour la propriété spécifique modifiée. 

Pour modifier un composant principal, sélectionnez une instance ou un composant sur la zone de travail, puis utilisez l’une des options suivantes :

Pour revenir à l’instance précédente une fois que vous avez terminé de modifier le composant principal, cliquez avec le bouton droit sur le composant et sélectionnez Retour à l’instance précédente.

À savoir

• Les propriétés de rotation et d’opacité ne se propagent pas du composant principal aux instances.
• Pour vous assurer que vous modifiez le composant principal, vérifiez que le losange vert se trouve dans le coin supérieur gauche du cadre de sélection.
  

Bonnes pratiques

Lors de la modification des composants principaux, la bonne pratique est de procéder comme suit :

• Si vous supprimez un composant principal de la zone de travail, faites un clic droit sur une instance et sélectionnez Modifier le composant principal. XD génère un composant principal sur la zone de travail.

Remplacement d’une instance de composant

Les composants principaux fournissent la cohérence requise pour maintenir une charte graphique. Toute modification apportée au composant principal se propage automatiquement à ses instances. Cependant, une charte graphique n’est utile que si elle a un certain degré de flexibilité. Vous pouvez commencer avec le même élément d’origine, mais vous devez le personnaliser en fonction du contexte dans lequel il est utilisé. C’est là qu’interviennent les instances.

Les remplacements sont des modifications uniques qui s’appliquent uniquement à cette instance et non au composant principal. Si vous modifiez une propriété dans une instance, XD marque cette propriété comme un remplacement. Les propriétés de remplacement sont toujours conservées, même si vous modifiez la même propriété à partir du composant principal. 

Pour effacer les remplacements et rétablir le composant principal, faites un clic droit sur cette instance et sélectionnez Rétablir l’état principal. 

Types de remplacements

Voici quelques types de remplacement et leurs scénarios d’utilisation :

Remplacements de taille

Les composants sont également redimensionnables et équipés des puissantes fonctionnalités de redimensionnement réactif. Si vous redimensionnez le composant principal, les instances qui n’ont pas été redimensionnées avec un remplacement sont redimensionnées automatiquement. Par conséquent, les instances redimensionnées conservent leur position redimensionnée en tant que remplacement. 

Comment fonctionne le redimensionnement dans un composant principal ou dans ses instances ?

• Vous pouvez redimensionner une instance indépendamment sans affecter le composant principal.
• Vous pouvez redimensionner un composant entier et modifier la disposition des éléments qu’il contient.
• Vous pouvez modifier les instances de composant, quelle que soit la taille à laquelle vous les avez adaptées.

Comme avec le redimensionnement réactif, XD recrée le placement de vos éléments sur une zone de travail plus grande ou plus petite lorsque vous les redimensionnez.

Dans l’Inspecteur Propriétés, vous pouvez faire passer le redimensionnement réactif de Automatique à Manuel afin de modifier les contraintes et obtenir un contrôle accru.

Remplacements d’apparence

La modification de vos éléments d’origine en fonction du contexte est importante lors de la création d’éléments réutilisables. Par conséquent, vous pouvez remplacer toutes les propriétés de style et d’apparence d’une instance. Les remplacements permettent toute une gamme de variations, tout en conservant les liens avec le composant principal. 

Remplacements de disposition et de structure

Vous pouvez non seulement remplacer la taille d’un composant ou la disposition des éléments qu’il contient, mais également remplacer structurellement les composants. Cela signifie que vous pouvez ajouter ou soustraire des éléments dans le composant principal et dans ses instances.

Si vous ajoutez un objet au composant principal, il est également ajouté à ses instances respectives. Lorsque vous ajoutez un objet, XD applique l’algorithme de redimensionnement réactif et applique automatiquement les contraintes à l’objet. Cela dépend de la position du nouvel objet par rapport à son conteneur. Lorsqu’un objet est supprimé du composant principal, il est également supprimé dans toutes les instances.

Des éléments peuvent également être ajoutés ou supprimés d’une instance et des contraintes sont automatiquement placées sur un objet lors de son ajout. Lorsqu’un élément d’une instance est supprimé, seul l’élément de cette instance est supprimé. Le même élément continue d’exister dans le composant principal. 

Informations à prendre en compte

• Vous pouvez réinitialiser tous les remplacements, mais pas les remplacements individuels, sur le composant principal. 
• Si vous avez marqué une propriété comme étant un remplacement sur une instance, sélectionnez Rétablir l’état principal pour la resynchroniser avec le composant principal. 

Bonnes pratiques

Voici quelques bonnes pratiques relatives à l’utilisation des remplacements des instances de composants :

• Pour créer une variante du composant afin de la réutiliser, créez un état dans le composant principal plutôt qu’une instance avec remplacements.
• Lorsque vous remplacez des instances, veillez à remplacer la propriété qui n’a pas besoin d’être mise à jour à partir du composant principal. Par exemple, dans un composant de bouton, remplacer du texte garantit que le libellé peut être différent, mais que la taille et la couleur restent synchronisées avec le composant principal. 

Ajout d’états aux composants

Les états de composant vous permettent d’enregistrer différentes variations du composant pour chaque réutilisation. Une fois les remplacements effectués sur le composant principal, vous pouvez créer un état à partir de ces remplacements afin de pouvoir le réutiliser facilement.

Par exemple, vous pouvez créer un composant de bouton avec différentes variations, telles qu’une principale et une secondaire. Les états vous permettent de créer des variations à l’aide de remplacements sur le composant principal. 

Lorsque vous utilisez des états et des composants, tenez compte des éléments suivants :

• Les états créés sur le composant principal sont disponibles pour toutes les instances de ce composant. Cela vous permet de créer des composants avec plusieurs instances et de changer facilement d’état.
• Vous pouvez les renommer et les supprimer à partir du sélecteur d’état dans l’Inspecteur Propriétés.
• Vous pouvez ajouter un déclencheur avec une action pour passer d’un état d’un composant à un autre. Par exemple, vous pouvez passer de l’état par défaut à l’état de survol lorsque vous passez la souris sur un composant de bouton. 

Ajout d’états

Une fois que vous avez créé un composant, l’Inspecteur Propriétés comporte une nouvelle section qui répertorie le composant avec un état par défaut. Vous pouvez maintenant ajouter trois types d’états pour vos composants : Nouvel état, État de survol, et État de bascule.

Création d’un nouvel état

Utilisez Nouvel état pour les scénarios dans lesquels vous souhaitez montrer des variantes d’un composant (telle que la version désactivée ou sur laquelle vous avez cliqué d’un composant).

Création d’un état de survol

Utilisez l’état de survol si vous souhaitez que le composant change et affiche un état différent lorsque vous passez la souris sur le composant lors de l’interaction avec votre prototype.

Création d’un état de BASCULE

L’état de bascule permet de créer des composants avec un comportement de bascule interactif tel qu’un commutateur, un bouton radio, une case à cocher, etc. 

Affichage et gestion des états

Après avoir créé les états de votre composant, vous pouvez en modifier les propriétés et visualiser son apparence quand vous interagissez avec lui. Voici quelques flux de travaux associés aux états :

Remplacements dans les états

Toutes les modifications apportées à l’état par défaut dans le composant principal sont propagées à l’état par défaut dans toutes les instances. De même, en modifiant un état spécifique dans le composant principal, toutes les instances reçoivent les modifications pour cet état spécifique. Assurez-vous de toujours modifier l’état dans le composant principal pour qu’il soit mis à jour sur toutes les instances.

Avec les états, vous pouvez remplacer des propriétés telles que le texte, le bitmap, la taille, la disposition et l’apparence. Une fois que vous remplacez une propriété d’état dans une instance, celle-ci ne reçoit plus de mises à jour de ces propriétés de la part du composant principal.

Si le résultat de vos remplacements ne vous convient pas, rétablissez les propriétés du composant principal d’origine en faisant un clic droit sur une instance et en sélectionnant Rétablir l’état principal. Cela efface tous les remplacements effectués sur une instance et la réinitialise par rapport au composant principal.

Ajout de l’interactivité

Vous pouvez utiliser les déclencheurs Appuyer, Survoler, Touches/Manette et Voix pour établir des interactions entre des états du composant en mode Prototype. La connexion d’interactions d’états de composant est similaire à la connexion d’interactions entre des plans de travail. La principale différence est que lors de la connexion d’interactions d’états de composant, vous choisissez un état comme destination et non un plan de travail.

Vous pouvez définir plusieurs interactions pour le même état de composant. Par exemple, si vous avez un bouton commutateur comportant à la fois des états de survol et d’appui, vous pouvez définir ces interactions en répétant les étapes 4 à 7 deux fois pour définir les états d’appui et de survol. Une fois que vous avez créé plusieurs interactions, celles-ci s’affichent dans la section Interaction. Basculez entre ces interactions et modifiez leurs propriétés en fonction de vos besoins. 

Si vous souhaitez créer des interactions de survol imbriquées, telles que des menus déroulants ou des fenêtres contextuelles avec des boutons à plusieurs états, vous pouvez également imbriquer des composants avec des états de survol.

Informations à prendre en compte

• Lorsque vous double-cliquez sur un composant, le sélecteur d’état dans l’Inspecteur Propriétés disparaît.
• XD ne prend en charge que les commandes Appuyer, Survoler, Touches/Manette et Voix comme déclencheurs entre les états.
• XD ne propage pas les remplacements d’un état à un autre dans les instances.

Bonnes pratiques

Voici quelques bonnes pratiques relatives à l’ajout d’états aux composants :

• Créez toujours des états pour vos composants pour pouvoir en réutiliser différentes variantes.
• Vous pouvez passer en mode prototype et modifier manuellement les interactions entre les différents états.
• Lorsque vous ajoutez de l’interactivité entre les états, si vous modifiez des propriétés comme la couleur, sélectionnez l’action Aucune transition ou l’animation Dissoudre. Si vous animez la position ou la taille d’un état à l’autre, sélectionnez l’action Animation automatique.
• Lorsque vous créez un état, vous pouvez commencer par répliquer l’état par défaut ou un état existant. En fonction de votre objectif final, vous pouvez sélectionner l’état par défaut, puis cliquer sur + pour le dupliquer afin d’obtenir un nouvel état, ou sélectionner un état existant, puis cliquer sur + pour le dupliquer. Lorsque vous créez un état à partir d’un état existant, le nouvel état aura également les mêmes remplacements. Cela signifie que les propriétés remplacées ne recevront aucune mise à jour de l’état par défaut. Dans la plupart des cas d’utilisation, il est recommandé de créer de nouveaux états en cliquant sur + pour l’état par défaut. En commençant par l’état par défaut, vous vous assurez qu’il est synchronisé avec le composant principal et qu’il ne contient aucun remplacement.

Gestion des composants

Ajout d’interactivité aux composants

Vous pouvez ajouter de l’interactivité aux composants et entre les états. Lorsque vous créez une interaction sur le composant principal, toutes les instances de ce composant reçoivent cette interaction. Toute modification des interactions sur le composant principal met automatiquement à jour ces interactions sur les instances.

Vous pouvez également remplacer les interactions sur les instances, et elles ne recevront alors plus de mises à jour du composant principal. Tout comme les remplacements de conception, vous pouvez remplacer les propriétés d’interaction d’un composant.

Informations à prendre en compte

• Il n’existe aucun moyen d’empêcher la propagation des interactions du composant principal aux instances.
• Il n’existe aucun moyen de distinguer une interaction ajoutée à une instance (en tant que remplacement) d’une interaction héritée du composant principal.
• Un ensemble limité d’actions et de déclencheurs est pris en charge pour les états. 

Bonnes pratiques

Voici une bonne pratique à adopter lors de l’ajout d’interactivité à un composant :

• Lorsque vous copiez-collez ou partagez des composants entre les documents, XD ne conserve pas les interactions entre le composant et le plan de travail, car nous ne pouvons pas garantir que des plans de travail de destination seront toujours disponibles. Cependant, XD conserve les interactions entre les états pour chaque composant. Cela signifie que pour un composant qui a un état Survoler et un déclencheur Appuyer sur un plan de travail, en le collant dans un autre document, XD conserve l’interaction avec l’état Survoler et ignore le déclencheur Appuyer sur le plan de travail. 
• Choisissez quand vous ajoutez une interaction au composant principal plutôt qu’à l’instance.
• Si toutes les instances partagent la même destination, alors il est plus efficace de relier le composant principal car ses propriétés se propagent automatiquement à toutes les instances. Par exemple, prenons un bouton Accueil qui envoie à l’écran d’accueil.
• Si toutes les instances, ou certaines d’entre elles, ont des destinations différentes, il est plus facile de relier les instances individuelles plutôt que le composant principal. Par exemple, pour un bouton principal utilisé sur l’ensemble du projet et dont les destinations sont différentes selon son utilisation et son contexte.

En savoir plus

Pour en savoir plus sur l’utilisation des composants, regardez cette vidéo.

Temps de visionnage : 9 minutes

Et après ?

Nous vous avons initié à l’utilisation des composants dans XD. Allons plus loin et découvrez comment utiliser les composants imbriqués dans XD.

Vous avez une question ou une suggestion ?