Découvrez comment utiliser les composants imbriqués dans plusieurs systèmes de conception dans Adobe XD.

La création d’un système de conception nécessite la capacité de créer des composants aux niveaux moléculaires pour un potentiel de réutilisation et une flexibilité optimaux. 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 basées sur des cartes, etc.

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

Composants

Vous débutez dans XD ?

Obtenir XD

Découvrez les bases de l’application

Vous utilisez déjà Adobe XD ?

Mettez à jour votre application

Découvrez les nouveautés

Avant de commencer

Familiarisez-vous avec ces concepts :

Créer un composant imbriqué

Les composants imbriqués vous permettent de créer davantage de systèmes de conception robuste. Lorsque vous mettez à jour un composant principal, toutes ses instances reçoivent cette mise à jour, même si celle-ci se trouve dans son 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.

Approche B
  1. Créer un composant principal de bouton.
  2. Copier-coller une instance du composant de bouton dans le 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 du composant de bouton dans un composant.

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

Approche B
  1. Créez un composant de dialogue principal.
  2. Accéder à une partie du composant.
  3. Convertir le bouton en composant.

Exemple

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

Création d’un composant de bouton

Création d’un composant de bouton

Création du composant de bouton pour la boîte de dialogue.

Création du conteneur de dialogue

Conteneur de la boîte de dialogue

Créez le conteneur de la boîte de dialogue avec le texte et d’autres objets en tant que groupe..

Coller l’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.

Bonnes pratiques

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

  • Vous pouvez créer un composant avec plusieurs instances de composant imbriquées à 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.

Coller une instance du composant de bouton dans le groupe
  1. Créez un bouton en tant que premier composant principal.
  2. Imbriquez le bouton dans un menu de bascule.
  3. Imbriquez le menu de 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.

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 ont changé de couleur en bleu.

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 occurrence, et non sur un composant principal, en tant que contournement. 

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

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 permuté, le fait de Réinitialiser à l’état principal sur le composant imbriqué principal ne changera pas l’occurrence avec le composant permuté. 

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 vous aident à distribuer les styles et composants de votre système de conception à réutiliser de manière cohérente sur l’ensemble de vos documents. Pour créer et distribuer un système de conception par le biais de bibliothèques, traitez les actifs de votre système de conception 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

Travailler avec des composants imbriqués créés dans les versions antérieures de XD

Dans les versions précédentes de XD, les modifications apportées à un composant imbriqué ne sont 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, XD migre automatiquement ces composants vers le nouveau modèle pour vous permettre de démarrer le plus rapidement possible.

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 canevas. 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 le canevas, vous pouvez transférer les remplacements nécessaires de votre instance vers le composant principal. 

Pour obtenir des mises à jour, ouvrez les documents liés dans la dernière version de XD. Tous les documents liés à l’avenir doivent é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 faites quelque chose qui aurait précédemment créé un composant principal imbriqué, le composant interne est remplacé par une instance.

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 parties prenantes pour obtenir des commentaires.

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 !