Découvrez comment utiliser les composants dans des documents pour améliorer les flux de travail de productivité.

En tant que concepteur, vous créez souvent des éléments de contrôle, tels que des barres de navigation ou des boutons, qui se répètent dans toutes vos conceptions. Cependant, cela est plus difficile lorsqu'une instance d’un élément doit être personnalisée en fonction du contexte ou de la présentation. Dans ces scénarios, vous finissez souvent par créer plusieurs versions du même élément de base, ce qui complique considérablement la gestion de votre conception.

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, tels qu'un bouton, tout en modifiant les instances de ce bouton pour différents contextes et dispositions. De plus, vous pouvez :

  • Modifier l'élément principal pour qu'il se propage pour toutes les instances
  • Redimensionner une instance indépendamment
  • Échanger un composant imbriqué en tant remplacement
  • Lier et modifier des composants dans des documents
  • Remplacer :
    • Les propriétés de contenu (remplissages de texte et d'image)
    • Les propriétés d'apparence (remplissage, bordure, effets, style de texte, etc.)
    • La disposition des objets dans une instance (taille, positionnement, hiérarchie des calques, contraintes)
    • La structure d'une instance (ajout et retrait d'éléments)

Pour en savoir plus sur les composants dans XD, regardez cette vidéo.


Créer un composant principal

Un composant principal est la première instance d'un composant que vous créez. Vous pouvez manipuler ou modifier le composant principal sur un canevas et le distinguer grâce à une << icône >>> en forme de losange vert dans le coin supérieur gauche du contexte d'édition.

Pour créer un composant principal :

Sélectionnez un objet ou un groupe d'objets et utilisez l'une des options suivantes pour créer un composant principal :

À partir de l'application XD, sélectionnez Objet > Créer un composant.

ou, 

  • Utilisez le raccourci CMD + K.

    ou

  • Faites un clic droit et sélectionnez Créer un composant.

    ou

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

Créer une instance de composant

Vous pouvez copier un composant principal pour créer une instance. Lorsque des instances sont créées, elles :

  • sont une copie exacte du composant principal,
  • ont les mêmes propriétés que l'original,
  • sont intrinsèquement liées au composant principal, et
  • sont indiquées par un contour vert avec des poignées de transformation.

Pour créer plusieurs instances du composant, appuyez sur le composant principal et faites-le glisser sur le canevas tout en maintenant la touche Alt enfoncée.

Vous pouvez remplacer les propriétés de l'instance sans rompre sa connexion avec son composant principal. Si vous modifiez une propriété dans une instance, XD marque cette propriété comme un remplacement. Les remplacements sont des modifications uniques qui ne s'appliqueront qu'à cette instance et non au composant principal.

Créer une instance de composant
Créer une instance de composant

Remarque :

Pour les modifications globales que vous souhaitez affecter à toutes les instances d'un composant, apportez des modifications à l'instance principale.

Si, à tout moment, vous souhaitez annuler les modifications ou les remplacements apportés à une instance, faites un clic droit sur l'instance et sélectionnez Rétablir le composant principal.

Afficher et générer un composant principal

Si un composant principal n'est pas disponible sur le canevas de dessin :

  • Faites un clic droit sur l'instance du composant et sélectionnez l'option Révéler les composants dans les actifs qui vous emmène au composant principal dans le panneau Actifs,

ou

  • Faites un clic droit sur l'instance du composant et sélectionnez Modifier le composant principal.

Si le composant principal existe quelque part sur le canevas de conception, XD vous dirige vers son emplacement. Si ce n'est pas le cas, XD crée un composant principal et le place sur le canevas de conception. (de façon similaire à la duplication d'un plan de travail).

Mettre à jour et réinitialiser les modifications apportées au composant principal à partir d'une instance

Pour mettre un composant principal à jour à partir d'une instance, modifiez l'instance et sélectionnez Mettre à jour le composant principal dans le menu contextuel. Toutes les autres instances du composant sont mises à jour à partir des propriétés du nouveau composant principal, sauf en cas de conflits de remplacements.

Pour rétablir une instance aux paramètres du composant principal, sélectionnez Rétablir le composant principal pour ignorer les remplacements apportés à l'instance

Rétablir le composant principal
Rétablir le composant principal

Remplacer une instance de composant

Les remplacements de composants vous permettent de créer des composants principaux avec des instances pouvant remplacer n'importe laquelle des propriétés du composant principal (telles que la taille, la couleur de remplissage, le texte, le remplissage d'image, le contenu, etc.) Les modifications apportées au composant principal se répercutent sur toutes les instances, sauf si la propriété modifiée a été remplacée dans une instance. Lorsque vous modifiez une instance individuelle, la propriété modifiée pour cette instance ou son contenu devient un remplacement qui s'applique uniquement à cette instance, les autres instances et le composant principal ne sont pas affectés. À tout moment, une instance avec des remplacements peut être resynchronisée avec le composant principal. Vous pouvez également remplacer le style et l'apparence dans une instance.

Vous pouvez rétablir n'importe quelle instance avec des remplacements pour qu'elle corresponde avec le composant principal à tout moment et appliquer des remplacements à des éléments spécifiques d'une instance de composant imbriquée.

  • Pour rétablir les remplacements apportés à une instance, faites un clic droit sur cette instance et sélectionnez Rétablir le composant principal.
  • Pour inverser des remplacements apportés à une instance, sélectionnez cette instance, faites un clic droit dessus et sélectionnez Revenir au composant principal.
  • Pour transmettre les modifications apportées à un composant principal à partir d'une instance, faites un clic droit sur l'instance et sélectionnez Transmettre au composant principal.
Remplacer une instance de composant
Remplacer une instance de composant

Redimensionner un composant

Le redimensionnement de composant vous permet de redimensionner un composant sur le canevas tout en maintenant sa taille comme remplacement unique. Comme pour les groupes dans XD, vous pouvez utiliser les poignées de redimensionnement de transformation pour redimensionner ou faire pivoter les composants directement sur le canevas. Le mode de redimensionnement par défaut pour le redimensionnement de composant est un redimensionnement réactif qui peut être activé/désactivé dans l'Inspecteur des propriétés. Vous pouvez désactiver le redimensionnement réactif pour redimensionner manuellement un composant ou utiliser la touche Maj pour effectuer un redimensionnement en conservant les proportions, comme pour les autres éléments redimensionnables de l'application. Vous pouvez non seulement redimensionner un composant entier, mais également modifier la disposition des éléments qu’il contient.

Vous pouvez maintenant modifier les instances des composants, quelle que soit la taille à laquelle vous les avez adaptées. Comme le avec redimensionnement réactif, XD recrée le placement de vos éléments sur un canevas plus grand ou plus petit lorsque vous les redimensionnez.

Les composants redimensionnés se comportent comme des plans de travail et des groupes de masques, de sorte que tout élément enfant repositionné en dehors des limites du composant d'origine est masqué. Si vous redimensionnez le composant principal, toutes les instances qui ne sont pas redimensionnées sont également redimensionnées automatiquement. Par conséquent, les instances déjà redimensionnées conservent leur position redimensionnée en tant que remplacement. Vous pouvez également redimensionner une instance indépendamment sans affecter le composant principal.

Redimensionner un composant principal
Redimensionner un composant principal

Utilisation de composants imbriqués

Dans de nombreux cas, vous avez conçu un composant plus volumineux contenant des composants imbriqués, tels que des commandes modales et des barres de navigation nécessitant une mise à jour en fonction du contexte.

Pour échanger un composant :

  1. Faites glisser le composant depuis le panneau Actifs et placez-le au-dessus du composant sur le canevas avec lequel vous souhaitez l'échanger.

  2. L'icône de glissement passe d'une flèche individuelle à une flèche circulaire.

L'échange d'un composant imbriqué au sein d'un composant principal remplace l'occurrence de ce symbole imbriqué dans l'ensemble du document. L'échange d'un composant au sein d'une instance d'un composant crée un remplacement local pour cette instance uniquement.

Utilisation de composants dans des documents

Les actifs liés vous permettent de consommer des actifs (composants, couleurs et styles de caractère) à partir d'un ou plusieurs fichiers de conception disponibles sur les documents en ligne XD. Les actifs liés complètent le flux de travaux des composants liés. Lorsqu'une instance liée est utilisée dans un document consommateur, vous pouvez utiliser des remplacements (style et apparence, redimensionnement et disposition, et structure) pour personnaliser les instances locales dans le document consommateur.

Actifs liés
Actifs liés

Si vous modifiez et enregistrez le composant principal dans le document source, cela sera indiqué par un badge bleu à côté de chaque instance du composant dans le document consommateur. Vous pouvez passer la souris sur le badge bleu pour prévisualiser les mises à jour dans le panneau Actifs et, si elles sont visibles, dans le canevas de conception. Cliquez sur le badge bleu pour accepter la mise à jour d'un composant individuel, puis cliquez sur le bouton Tout mettre à jour situé en bas du panneau Actifs pour mettre à jour toutes les instances dans le document. Pour plus d’informations sur les actifs liés, reportez-vous à la section Utilisation d'actifs liés

Limitations de fonctionnalités

  • Vous ne pourrez pas étendre les limites de vos instances si elles ajoutent un objet situé en dehors des limites de leur composant principal d'origine. Si vous le faites, le contenu sera coupé. Voici une solution :
  1. Créez le composant principal à la taille de vos plus grands remplacements prévus.
  2. Ajoutez de nouveaux objets en tant qu'éléments extérieurs à l'instance de votre composant.
  • Vous ne pouvez pas déplacer votre composant principal d'un document à un autre.
  • Les options Modifier le composant principal et Rétablir le composant principal ne sont pas disponibles avec la sélection multiple.
  • Les remplacements sont supprimés si vous sélectionnez Convertir en tracé. Si vous continuez les modifications, les remplacements de cet objet sur les instances seront supprimés.
  • L'opacité n'est actuellement pas prise en charge pour la modification de propriété principale, si vous modifiez à partir du composant principal. Chaque instance a sa propre opacité.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne