Découvrez comment utiliser les composants dans plusieurs systèmes de conception 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.

Composants

Vous débutez dans XD ?

Installez XD

Apprenez les bases de l’application

Vous utilisez déjà XD ?

Mettez à jour votre application

Découvrez les nouveautés

C’est à vous !

Obtenir un exemple de kit d’interface utilisateur

.xd ; 27 Mo

Avant de commencer

Familiarisez-vous avec ces concepts de 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 :

Inspecteur Propriétés
Dans l’Inspecteur Propriétés

Cliquez sur l’icône + dans la section Composant de l’Inspecteur Propriétés..

Panneau Actifs
Dans le panneau Actifs

Cliquez sur le bouton + dans la section Composants du panneau Actifs.

Menu contextuel
Dans le menu contextuel

Cliquez sur un objet avec le bouton droit et sélectionnez Créer un composant (CMD/CTRL+K).

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. 

Créer des composants
Composant principal

Les choses auxquelles faire attention

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

Bonnes pratiques

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.

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.

Remplacement d’instance
Remplacement d’instance

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. 

Composant principal
Composant principal
Instance
Instance
Instance avec remplacements
Instance avec remplacements

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

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 :

Menu contextuel
Dans le menu contextuel sur le canevas

Faites un clic droit sur une instance dans la zone de travail et sélectionnez Modifier le composant principal.

Panneau Actifs
Dans le panneau Actifs

Faites un clic droit sur un composant dans le panneau Actifs et sélectionnez Modifier le composant principal.

Inspecteur Propriétés
Dans l’Inspecteur Propriétés

Sélectionnez l’icône de crayon en regard de l’état par défaut dans la section Composant.

Les choses auxquelles faire attention

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

Remplacement d’une instance de composant
Remplacement d’une instance de composant

Types de remplacements

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

Remplacements de structure et de disposition
Types de remplacements : texte, bitmap, taille, apparence et disposition
  • Texte : vous pouvez modifier le contenu du texte dans une instance de composant, par exemple, lorsque vous modifiez le libellé d’un composant de bouton. 
  • Bitmap : vous pouvez remplacer le contenu bitmap dans une instance de composant, par exemple, lorsque vous remplacez une image dans un composant de photo de profil.
  • Taille : vous pouvez redimensionner une instance lorsque vous appliquez un remplissage et un redimensionnement réactif, par exemple lorsque vous modifiez la taille des champs de texte d’un formulaire.
  • Apparence : vous pouvez modifier les propriétés d’apparence telles que la couleur de remplissage, la bordure et le flou, par exemple, lorsque vous modifiez la couleur d’arrière-plan des notifications.
  • Disposition et structure : vous pouvez ajouter, supprimer et déplacer des objets dans une instance de composant, par exemple, lorsque vous modifiez les menus déroulants en ajoutant des entrées de menu supplémentaires.

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

Remplacements d’apparence

Remplacement d’apparence
Remplacement 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.

Remplacement de disposition et de structure
Remplacements de disposition et de structure

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. 

Les choses auxquelles faire attention

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

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

Nouvel état
Nouvel état

En mode Conception, cliquez sur le bouton + en regard de l’État par défaut du composant principal dans l’Inspecteur Propriétés, puis sélectionnez Nouvel état.

Par défaut, le nouvel état n’a pas d’interactivité intégrée. Pour plus d’informations sur la façon de lier une interaction à des composants, voir Ajouter l’interactivité aux composants.

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.

État de survol
État de survol

 En mode Conception, cliquez sur le bouton + en regard de l’état par défaut du composant principal dans l’Inspecteur Propriétés, puis sélectionnez État de survol.

Par défaut, l’état de survol comporte une interactivité intégrée. 

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 :

Changement d’état

Changement d’état
Changement d’état

Sélectionnez le composant et, dans l’Inspecteur Propriétés, basculez entre les différents états.

Renommage d’états

Renommage d’états
Renommage d’états

Double-cliquez sur le nom de l’état du composant dans l’Inspecteur Propriétés et entrez un nouveau nom. Vous pouvez renommer et supprimer des états uniquement dans le composant principal. Vous ne pouvez pas renommer l’état par défaut.

Suppression d’états

Suppression d’états
Suppression d’états

Cliquez sur l’état du composant avec le bouton droit et sélectionnez Supprimer. Lorsque vous supprimez un état de composant dans le composant principal, les instances du composant qui comportent l’état actif reviennent à l’état par défaut.

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

Interactivité
  1. Sélectionnez un composant et passez en mode Prototype.
  2. Cliquez sur l’icône > du composant ou sur le + dans la section Interaction de l’Inspecteur Propriétés pour ajouter une interaction.
  3. Sélectionnez l’état auquel vous souhaitez ajouter l’interaction. 
  4. Choisissez Appuyer (pour les clics) ou Survoler (pour les actions de passage de la souris) comme déclencheur.
  5. Choisissez un type d’action (tel que Animation automatique ou Transition).
  6. Choisissez un état comme destination.
  7. Basculez vers la fenêtre d’aperçu et testez l’interactivité de votre composant.

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.

Les choses auxquelles faire attention

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

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

Gestion des composants

Affichage 

Faire apparaître les composants dans Actifs
Faire apparaître les composants dans le panneau Actifs

Vous pouvez afficher ou faire glisser de nouvelles instances vers le canevas depuis le panneau Actifs.
Pour localiser toutes les instances, faites un clic droit sur un composant dans le panneau Actifs, puis sélectionnez Mettre en surbrillance sur le canevas. 
Pour localiser les composants dans le panneau Actifs, faites un clic droit sur une instance de composant sur le canevas et sélectionnez Faire apparaître le composant dans le panneau Actifs

Modification, renommage ou suppression

Modifier le composant principal
Menu contextuel du panneau Actifs

Faites un clic droit sur un composant dans le panneau Actifs ou sélectionnez une instance sur le canevas et utilisez les options du menu contextuel pour la modifier ou la supprimer. Pour renommer des composants, faites un clic droit et sélectionnez Renommer. 

Rétablir un état principal

Rétablir l’état principal
Rétablir l’état principal

Faites un clic droit sur une instance et sélectionnez Rétablir l’état principal pour effacer les remplacements et rétablir le lien au composant principal.
Pour détacher une instance du composant principal, faites un clic droit sur une instance et sélectionnez Dissocier un composant.
 

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.

Les choses auxquelles faire attention

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

Vidéo : comment utiliser les composants ?

« 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


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 idée ?

ask the community

Vous avez une question à poser ou une idée à partager ? Venez participer à la communauté Adobe XD. Nous avons hâte d’avoir de vos nouvelles et de découvrir vos créations !