Utilisation des composants dans Adobe XD

Les composants (auparavant appelés symboles) sont des éléments de conception dotés d’une flexibilité sans égale 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 de XD :

• Systèmes de conception dans XD
• Redimensionnement réactif et contraintes

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. 

• 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 du canevas, 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.

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

• Vous créez un système de conception de composants volumineux ? 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 système de conception, veillez à créer les composants au niveau le plus atomique possible pour une flexibilité et un potentiel de réutilisation optimaux. 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.

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. 

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 le canevas ? Faites un clic droit sur le composant dans le panneau Actifs et sélectionnez Mettre en surbrillance sur le canevas.
  • Le composant principal lorsque vous travaillez sur une instance ? Faites un clic droit sur l’instance et sélectionnez Modifier le 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 :

• 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.
  

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. 

Les composants principaux fournissent la cohérence requise pour maintenir un système de conception. Toute modification apportée au composant principal se propage automatiquement à ses instances. Cependant, un système de conception n’est utile que s’il 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. 

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

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. 

• 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 un canevas plus grand ou plus petit 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.

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. 

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. 

• 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. 

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. 

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. 

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 deux types d’états pour vos composants : Nouvel état et État de survol.

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).

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.

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 :

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.

Vous pouvez lier des interactions de survol et d’appui entre des états du composant en mode Prototype. La connexion d’interactions d’états de composant est similaire à l’ajout 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 plutôt qu’un plan de travail.

Connexion des états de composant pour créer une interaction lors d’un appui. Les états sont énumérés au-dessus des plans de travail dans la liste déroulante, avec des séparateurs entre eux. 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.

• 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 et Survoler comme déclencheurs entre les états.
• XD ne propage pas les remplacements d’un état à un autre dans les instances.

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 Aucune transition ou Dissoudre comme action. Si vous animez la position ou la taille d’un état à l’autre, sélectionnez l’action Animation automatique.
• Lorsque vous créez un nouvel é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 nouvel é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.

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.

• 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. 

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

• Lorsque vous copiez-collez ou partagez des composants entre les documents, nous ne conservons 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 Survol et un déclencheur Appuyer sur un plan de travail, en le collant dans un autre document, XD conserve l’interaction avec l’état Survol 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.

« Les symboles jouaient un rôle crucial dans nos flux de travaux de conception et nous permettaient de mettre à jour de nombreuses instances avec une seule modification, mais pour passer au niveau supérieur, nous leur avons donné plus de fonctionnalités et avons transformé les symboles en composants » — Howard Pinsky, spécialiste SR pour Adobe XD.

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

Temps de visionnage : 1 minute

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