Guide d'utilisation Annuler

Utilisation des composants imbriqués dans Adobe XD

  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 imbriqués dans plusieurs chartes graphiques dans Adobe XD.

La création d’une charte graphique nécessite la capacité de créer des composants aux niveaux moléculaires pour un potentiel de réutilisation optimal et une flexibilité maximale. Lors de la création de composants, XD vous permet de les imbriquer les uns dans les autres et de créer des objets complexes tels que des menus, des mises en page de cartes, etc. 

Découvrez comment créer et utiliser des composants imbriqués pour une expérience de conception transparente.

Composants
Utilisation des composants imbriqués dans  XD

Vous débutez dans XD ?

Télécharger XD

Découvrez les bases de l’application

Vous utilisez déjà Adobe XD ?

Mettre à jour votre application

Découvrez les nouveautés

Avant de commencer

Familiarisez-vous avec ces concepts :

Terminologie des composants

Pour commencer, familiarisez-vous avec certains termes associés aux composants imbriqués :

  • Composant principal : un composant principal est le composant qui définit et contrôle toutes les propriétés du composant.
  • Instance de composant : une instance de composant est une copie du composant principal qui hérite des modifications qui lui sont apportées.
  • Composant imbriqué : un composant imbriqué est un composant à l’intérieur d’un autre composant.
  • Composant externe : un composant externe est un composant qui contient un autre composant.

Créer un composant imbriqué

Les composants imbriqués vous permettent de créer des chartes graphiques plus efficaces. Lorsque vous mettez à jour un composant principal, toutes ses instances reçoivent la mise à jour, même si celle-ci a été apportée à un composant imbriqué.

Pour créer des composants imbriqués, vous pouvez utiliser l’une des approches suivantes :

Approche A : copier-coller une instance de composant dans un groupe et le convertir en composant.

  1. Créer un composant principal de bouton.
  2. Copiez-collez une instance du composant de bouton dans un groupe.
  3. Sélectionner le groupe et le convertir en composant. 

Approche B : copier-coller une instance de composant dans un autre composant.

Coller une instance du composant de bouton dans le groupe

  1. Créer un composant principal de bouton.
  2. Copiez et collez une instance du composant de bouton dans un autre composant.

Approche C : accéder à une partie d’un composant et la convertir en composant.

  1. Créez un composant de dialogue principal.
  2. Accédez à un bouton dans le composant.
  3. Convertir le bouton en composant.

Exemple

Utilisons l’approche A pour créer un composant de dialogue.

Coller une instance de bouton

Collage de l’instance

Coller une instance du composant de bouton dans le groupe.

Convertir en composant

Créer le composant

Sélectionner le groupe et en faire un composant.

Créer un composant de bouton

Création d’un composant de bouton

Créez un composant de bouton pour la boîte de dialogue.

Créer un conteneur de boîte de dialogue

Conteneur de boîte de dialogue

Créez un conteneur de boîte de dialogue avec le texte et d’autres objets à l’intérieur, en tant que groupe.

Bonnes pratiques

Voici quelques bonnes pratiques relatives à la création de composants imbriqués :

  • Vous pouvez créer un composant avec plusieurs composants imbriqués à l’intérieur. Toutefois, lorsque des composants ont plusieurs états avec de nombreux objets, cela peut nuire aux performances. Dans ce cas, pour obtenir des performances optimales, vous pouvez imbriquer des composants de trois niveaux maximum et limiter le nombre d’états par niveau à un maximum de dix états par composant.
  • N’imbriquez pas un composant en lui-même. Cela peut entraîner un composant non valide puisque les composants se référencent eux-mêmes.
  • Si vous avez un composant imbriqué avec plusieurs états dans un composant principal externe, vous pouvez changer l’état du composant imbriqué. Le changement d’état se propage ensuite à toutes les instances du composant externe.

Synchronisation de composants imbriqués

La synchronisation des composants imbriqués permet de vous assurer que les modifications apportées aux composants imbriqués dans un composant principal se propagent à toutes les instances du composant principal. 

Voyons comment cela fonctionne. 

Exemple 1 : un bouton à l’intérieur d’un conteneur qui reçoit les modifications du bouton principal.

  1. Créez un bouton en tant que premier composant principal.
  2. Imbriquez une instance du bouton dans un menu à bascule.
  3. Imbriquez une instance du menu à bascule dans un conteneur.

Toutes les modifications apportées au composant de bouton principal se propagent à tous les boutons imbriqués dans le menu de bascule et le conteneur.

Coller une instance du composant de bouton dans le groupe

Maintenant, créez deux instances du bouton principal, deux instances du menu bascule principal et une instance du conteneur principal.

Observons quelques scénarios :

Scénario 1 :

Scénario 1

Changez la couleur du bouton imbriqué dans le menu à bascule principal en bleu. 

Tous les boutons imbriqués dans les instances du menu à bascule et à l’intérieur des conteneurs sont devenus bleus.

Cependant, les deux instances du bouton principal ne changent pas de couleur. En effet, les modifications apportées aux composants imbriqués sont contextuelles à leurs conteneurs. Le changement de couleur s’applique uniquement aux instances du bouton à l’intérieur du menu à bascule. 

Scénario 2 :

Scénario 2

Changez la couleur du bouton dans le conteneur principal en rose. Le bouton à l’intérieur de l’instance du conteneur deviendra également rose.

Notez que les autres boutons ne changent pas de couleur. En effet, les modifications apportées aux composants imbriqués sont contextuelles à leurs conteneurs. Le changement de couleur s’applique uniquement aux instances du bouton à l’intérieur du menu à bascule dans le conteneur. 

Scénario 3 :

Scénario 3

Changez la couleur du bouton imbriqué dans l’instance du conteneur en vert.

Aucun des autres boutons ne devient vert, car ce changement a été effectué sur une instance, et non sur un composant principal, en tant que remplacement. 

Scénario 4 :

Scénario 4

À partir du scénario 3, changez la couleur du bouton imbriqué à l’intérieur du conteneur principal en violet. 

Le bouton imbriqué de l’instance de conteneur ne change pas de couleur car il a déjà un remplacement.

Les choses auxquelles faire attention

  • Les composants imbriqués ne peuvent pas être des composants principaux. Donc, si vous avez besoin que la modification soit effectuée sur le composant principal, cliquez avec le bouton droit sur le composant imbriqué et sélectionnez Modifier le composant principal
  • Si un composant imbriqué dans une instance du composant externe est échangé, l’action Rétablir l’état principal sur le composant imbriqué principal ne modifie pas l’instance avec le composant échangé. 

Bonnes pratiques

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

  • 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 bibliothèques Creative Cloud vous aident à distribuer les styles et composants de votre charte graphique à réutiliser de manière cohérente dans l’ensemble de vos documents. Pour créer et distribuer une charte graphique par le biais de bibliothèques Creative Cloud, traitez les actifs de votre charte graphique en ajoutant des couleurs, des styles de caractères et des composants au panneau Actifs du document et publiez-les en tant que bibliothèque pour les réutiliser dans tout XD et dans vos autres applications Creative Cloud. Pour en savoir plus sur l’utilisation des bibliothèques Creative Cloud, reportez-vous à la section Utilisation des bibliothèques Creative Cloud dans XD.

Foire aux questions (FAQ)

Dans les versions précédentes de XD, les modifications apportées à un composant imbriqué n’étaient pas mises à jour entre les instances du composant externe. Pour bénéficier d’une expérience améliorée, ouvrez vos documents dans la dernière version de XD.

Non. Lorsque vous ouvrez un document existant avec des composants imbriqués dans la dernière version de XD, l’application migre automatiquement ces composants vers le nouveau modèle pour que vous soyez opérationnel de suite.

Lorsque XD a ouvert votre document, ces composants spécifiques ne correspondaient pas à leur version dans le panneau Actifs. Pour migrer sans perte de données, ces principaux composants ont été convertis en instances sur la zone de travail. Si vous souhaitez ramener votre composant principal sur la zone de travail, cliquez avec le bouton droit de la souris sur l’instance externe et sélectionnez Modifier le composant principal. En outre, si vous souhaitez que votre composant principal ressemble à l’instance sur la zone de travail, vous pouvez transférer les remplacements nécessaires de votre instance vers le composant principal. 

Pour obtenir les mises à jour, ouvrez les documents liés dans la dernière version de XD. Tous les documents liés par la suite devront également être ouverts dans la dernière version de XD pour s’assurer que le comportement attendu est exécuté. 

À partir de XD 34, XD ne prend plus en charge l’imbrication d’un composant principal dans un autre composant principal. Si vous effectuez une action qui, jusque là, aurait créé un composant principal imbriqué, le composant interne est remplacé par une instance. 

En savoir plus

Pour en savoir plus sur les composants imbriqués dans XD, regardez cette vidéo.
Temps de visionnage : 10 minutes

Et après ?

Nous vous avons initié à l’utilisation des composants dans XD. Allons plus loin et découvrez comment partager vos créations avec des concepteurs ou des collaborateurs pour obtenir des commentaires.

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 ?