Guide d'utilisation Annuler

Utilisation de composants

  1. Guide de l’utilisateur d’Adobe XD
  2. Introduction
    1. Nouveautés d’Adobe XD
    2. Questions fréquentes
    3. Design, création de prototypes et partage avec Adobe XD
    4. Gestion des couleurs
    5. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    6. Notions de base concernant l’espace de travail
    7. Changement de langue dans l’application Adobe XD
    8. Accès aux kits de conception d’interface utilisateur
    9. Accessibilité dans Adobe XD
    10. Raccourcis clavier
    11. Conseils et astuces
  3. Conception
    1. Plans de travail, repères et calques
      1. Prise en main des plans de travail
      2. Utilisation des guides et des grilles
      3. Création de plans de travail défilants
      4. Utilisation de calques
      5. Création de groupes de défilement
    2. Formes, objets et chemins
      1. Sélection, redimensionnement et rotation d’objets
      2. Déplacement, alignement, répartition et disposition d’objets
      3. Regroupement, verrouillage, duplication, copie et retournement d’objets
      4. Application d’un contour, d’un fond ou d’une ombre portée à un objet
      5. Création d’éléments répétés
      6. Création de designs en perspective avec des transformations 3D
      7. Modification d’objets à l’aide d’opérations booléennes
    3. Texte et polices
      1. Utilisation d’outils de dessin et de texte
      2. Polices dans Adobe XD
    4. Composants et états
      1. Utilisation de composants
      2. Utilisation de composants imbriqués
      3. Ajout de plusieurs états aux composants
    5. Masquage et effets
      1. Création d’un masque avec des formes
      2. Utilisation des effets de flou
      3. Création et modification de dégradés
      4. Application des effets de fusion
    6. Mise en page
      1. Redimensionnement réactif et contraintes
      2. Définition d’un remplissage fixe pour des composants et des groupes
      3. Création de conceptions dynamiques avec des piles
    7. Vidéos et animations Lottie
      1. Utilisation de vidéos
      2. Création de prototypes avec des vidéos
      3. Utilisation d’animations Lottie
  4. Prototypage
    1. Création de prototypes interactifs
    2. Animation des prototypes
    3. Propriétés d’objet prises en charge pour l’animation automatique
    4. Création de prototypes avec clavier et manette de jeu
    5. Création de prototypes à l’aide de la lecture et des commandes vocales
    6. Création de transitions temporisées
    7. Ajouter des incrustations
    8. Conception de prototypes de voix
    9. Création de liens d’ancrage
    10. Création d’hyperliens
    11. Aperçu de designs et de prototypes
  5. Partage, exportation et révision
    1. Partage des plans de travail sélectionnés
    2. Partage de conceptions et de prototypes
    3. Définition des autorisations d’accès pour les liens
    4. Utilisation de prototypes
    5. Révision de prototypes
    6. Utilisation des spécifications techniques
    7. Partage de spécifications techniques
    8. Inspection de spécifications techniques
    9. Navigation dans les spécifications techniques
    10. Révision des spécifications techniques et commentaires
    11. Exportation de ressources de design
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
    14. Sauvegarde et transfert de ressources XD
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation de ressources de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration de ressources liées vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation de ressources provenant de bibliothèques Creative Cloud
  7. Documents en ligne
    1. Documents en ligne dans Adobe XD
    2. Collaboration et cocréation de conceptions
    3. Cocréation de documents partagés
  8. Intégrations et plug-ins
    1. Utilisation de ressources externes
    2. Utilisation de ressources de design provenant de Photoshop
    3. Copier-coller de ressources depuis Photoshop
    4. Importation ou ouverture de conceptions Photoshop
    5. Utilisation des fichiers Illustrator dans Adobe XD
    6. Ouverture et importation de conceptions Illustrator
    7. Copie de vecteurs d’Illustrator vers XD
    8. Plug-ins pour Adobe XD
    9. Création et gestion des plug-ins
    10. Intégration Jira pour XD
    11. Plug-in Slack pour XD
    12. Plug-in Zoom pour XD
    13. Publication de designs depuis XD vers Behance
  9. XD pour iOS et Android
    1. Aperçu sur appareils mobiles
    2. FAQ concernant Adobe XD pour mobile
  10. Résolution des problèmes
    1. Problèmes connus et résolus
      1. Problèmes connus
      2. Problèmes résolus
    2. Installation et mises à jour
      1. XD semble incompatible avec Windows
      2. Code d’erreur 191
      3. Code d’erreur 183
      4. Problèmes d’installation des modules externes XD
      5.  Invitation à désinstaller et réinstaller Adobe XD sur Windows 10
      6. Problèmes liés à la migration des préférences
    3. Lancement et blocage
      1.  XD se bloque au lancement sur Windows 10
      2.  XD se ferme lorsque vous vous déconnectez de Creative Cloud
      3. Problème lié à l’état d’un abonnement sur Windows
      4. Avertissement d’application bloquée lors du lancement de XD sur Windows
      5. Génération du fichier de vidage sur Windows
      6. Collecte et partage de journaux d’incidents
    4. Documents en ligne et bibliothèques Creative Cloud
      1. Problèmes liés aux documents en ligne XD
      2. Problèmes relatifs aux composants liés
      3. Problèmes relatifs aux bibliothèques et aux liens
    5. Prototype, publication et révision
      1. Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
      2. Problèmes liés aux workflows de publication
      3. Les liens publiés n’apparaissent pas dans les navigateurs
      4. Les prototypes ne s’affichent pas correctement dans les navigateurs
      5. Le panneau de commentaires s’affiche soudainement sur les liens partagés
      6. Impossible de publier des bibliothèques
    6. Importation, exportation et utilisation d’autres applications
      1. Importation et exportation dans XD
      2. Fichiers Photoshop dans XD
      3. Fichiers Illustrator dans XD
      4. Exportation dans After Effects à partir de XD
      5. Fichiers Sketch dans XD
      6. ++Applications tierces non visibles lors de l’exportation

Découvrez comment utiliser les composants dans plusieurs chartes graphiques dans Adobe XD.

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.

Composants

Vous débutez dans XD ?

Télécharger XD

Découvrez les bases de l’application

Vous utilisez déjà XD ?

Mettre à jour votre application

Découvrez les nouveautés

C’est à vous !

Obtenir un exemple de kit d’interface utilisateur

.xd ; 80 Mo

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 :

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 (Ctrl/Cmd+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

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.

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

Menu contextuel
Dans le menu contextuel sur la zone de travail

Faites un clic droit sur une instance dans la zone de travail et sélectionnez Modifier le composant principal (Maj + Ctrl/Cmd + K).

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’attribut État par défaut dans la section Composant.

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

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 :

  • 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 structure et de disposition
Types de remplacements : texte, bitmap, taille, apparence et disposition

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

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. 

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

Nouvel état
Nouvel état

En mode Conception, cliquez sur le bouton + en regard de l’attribut É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’attribut É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. 

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. 

État de bascule
État de bascule

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

Une fois l’état de bascule créé, par défaut, XD crée automatiquement deux interactions bidirectionnelles entre l’état par défaut et l’ état de bascule, ce qui le rend entièrement interactif.

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 utiliser les déclencheurs Appuyer, SurvolerTouches/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.

Création d’une interaction tactile
Connexion des états de composant pour créer une interaction lors d’un appui

  1. Passez à l’onglet Prototype.

  2. Sélectionnez l’état du composant à partir duquel vous souhaitez créer l’interaction. 

  3. Cliquez sur l’icône > de l’état du composant ou sur le + dans la section Interaction de l’Inspecteur Propriétés pour ajouter une interaction.

  4. Choisissez Appuyer (pour les clics), Survoler (pour les actions de passage de la souris), Touches et manette (pour la navigation et l’accessibilité) ou Voix (pour la navigation et l’accessibilité) comme déclencheur.

  5. Choisissez un type d’action (par exemple, Animation automatique ou Transition).

  6. Choisissez un état en tant que destination.

  7. Basculez vers la fenêtre d’aperçu et testez l’interactivité de votre composant.

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

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 la zone de travail 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 la zone de travail. 
Pour localiser les composants dans le panneau Actifs, faites un clic droit sur une instance de composant sur la zone de travail et sélectionnez Faire apparaître le composant dans le panneau Actifs

Modification, renommage ou suppression

Menu contextuel du panneau Actifs
Menu contextuel du panneau Actifs

Faites un clic droit sur un composant dans le panneau Actifs ou sélectionnez une instance sur la zone de travail 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établissement de l’é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.

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 ?

Questions à la communauté

Vous avez une question à poser ou une idée à partager ? Venez participer à la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations !

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Du 14 au 16 octobre à Miami Beach et en ligne

Adobe MAX 2024

Adobe MAX

The Creativity Conference

Du 14 au 16 octobre à Miami Beach et en ligne