Découvrez comment utiliser les actifs liés dans les documents en ligne pour améliorer les flux de travaux de productivité.

En raison des surfaces de conception en constante augmentation, les concepteurs ont besoin d’un moyen simple de créer et de maintenir des conceptions cohérentes à l’échelle. 

Avec les actifs liés, vous pouvez facilement partager et consommer non seulement des composants (précédemment appelés symboles), mais également des couleurs et styles de caractère. Cela est extrêmement pratique si vous partagez une feuille d’autocollants avec votre équipe ou réutilisez des éléments de conception dans des projets.

Les actifs liés complètent le flux de travaux des composants liés. Lorsque vous modifiez un actif lié dans le document source, tous les documents consommateurs avec ces actifs liés reçoivent des notifications de mise à jour. De là, vous pouvez choisir de prévisualiser et d’accepter les mises à jour.

Voici un support visuel qui explique comment utiliser les actifs liés dans Adobe XD.

Actifs liés
Actifs liés

Créer et partager des actifs réutilisables

Le panneau Actifs fournit un moyen de gérer les couleurs, les styles de caractère et les composants utilisés dans votre document. Dans le cadre d’un système de conception, vous pouvez désormais utiliser le panneau Actifs pour gérer la collection d’éléments réutilisables que vous souhaitez mettre à la disposition des autres concepteurs de votre équipe.

Pour créer une ou plusieurs sources fiables pour les actifs réutilisables (couleurs, styles de caractère et composants) dans les documents en ligne, procédez comme suit :

  1. Dans le document source, ajoutez les couleurs, les styles de caractère et les composants requis via le panneau Actifs, puis enregistrez-le en tant que document en ligne XD.

  2. Cliquez sur Partager > Inviter à modifier. Dans l’onglet Inviter, ajoutez l’adresse e-mail des personnes à inviter et un message facultatif (le cas échéant), puis cliquez sur Inviter.

Lier des actifs à partir d’un document source en ligne

Pour utiliser les couleurs, les styles de caractère et les composants que vous avez créés dans un autre document source ou qui ont été partagés avec vous, liez votre projet de conception à ces documents en ligne. L’ensemble des couleurs, styles de caractère et composants du document source sont ajoutés à votre document en ligne en tant qu’actifs liés.

Au fur et à mesure que vous mettez à jour le document source, XD indique que les mises à jour sont disponibles. Vous pouvez ensuite choisir d’accepter les mises à jour et vous assurer ainsi que tout le monde utilise les derniers actifs.

Pour lier des actifs à partir d’un document source en ligne, procédez comme suit :

  1. Si vous créez un nouveau projet, cliquez sur le bouton Lier les actifs dans le panneau Actifs Si vous travaillez sur un document existant comportant des actifs renseignés, sélectionnez l’icône dans l’angle supérieur droit du panneau Actifs.

  2. Recherchez les documents en ligne que vous avez créés ou qui ont été partagés avec vous. Lorsque vous sélectionnez le document en ligne XD requis, tous les actifs (couleurs, styles de caractère et composants) du document source sont ajoutés en tant qu’actifs liés dans le panneau Actifs. Vous pouvez identifier les actifs liés par l’icône .

    Actif lié
    Lier des actifs à partir d’un document en ligne XD

Filtrer et rechercher des actifs liés dans des documents en ligne liés

Filtrer des actifs dans le panneau Actifs

Lorsque vous liez un document en ligne à votre fichier de conception, un filtre pour le document source lié est ajouté dans la liste déroulante du panneau Actifs. Adobe XD dispose de trois mécanismes de filtrage pour affiner les actifs que vous souhaitez utiliser dans votre projet. Vous pouvez filtrer les actifs dans le panneau Actifs par type d’actif, actifs de document créés localement ou actifs liés provenant d’autres documents source.

Filtrer par type d’actif

Lorsque vous filtrez le panneau Actifs par type d’actif (couleurs, styles de caractère ou composants), vous pouvez voir à la fois les actifs locaux et liés.

Filtrer par actifs de document

Si vous souhaitez utiliser uniquement les actifs du document local, sélectionnez le filtre Actifs du document dans le panneau Actifs.

Filtrer par actifs liés

Si vous avez lié des actifs provenant de plusieurs documents en ligne et que vous souhaitez utiliser des actifs d’une source spécifique, sélectionnez le document source lié dans la liste déroulante du filtre du panneau Actifs.

Rechercher les actifs dans le panneau Actifs

Au fur et à mesure que votre système de conception et vos kits de marque augmentent avec un grand nombre d’actifs à gérer, XD facilite la recherche de vos actifs à l’aide de la fonction de recherche du panneau Actifs. Au fur et à mesure que vous commencez à taper le terme recherché, XD affichera les actifs locaux et liés correspondant à vos critères de recherche.

Vous pouvez rechercher des couleurs par nom ou par code HEX, tandis que vous pouvez rechercher des styles de caractère et des composants par nom.

Utiliser des couleurs liées et des styles de caractère liés

Les couleurs liées et les styles de caractère liés fonctionnent de manière similaire aux couleurs et aux styles de caractère locaux, à une exception près : ils ne peuvent être modifiés qu’à partir du document lié source.

Utilisez ces flux de travaux pour exploiter des couleurs liées ou des styles de caractère liés dans des fichiers de conception :

Appliquer une couleur liée et un style de caractère lié

Vous pouvez appliquer des couleurs liées à n’importe quel objet ou composant sur la zone de travail. Pour appliquer une couleur liée ou des styles de caractère à des objets ou des composants sélectionnés sur la zone de travail, procédez comme suit :

  • Cliquez sur une couleur liée dans le panneau Actifs ou effectuez un clic droit sur la couleur et choisissez Appliquer comme fond.
  • Pour appliquer une couleur liée en tant que trait (bordure), faites un clic droit sur une couleur dans le panneau Actifs, puis sélectionnez Appliquer comme bordure.
Appliquer comme fond
Appliquer des couleurs liées comme couleur de fond et de bordure

Pour appliquer un style de caractère lié, sélectionnez le texte sur la zone de travail et cliquez sur les styles de caractère liés requis dans le panneau Actifs.

Mettre en évidence des actifs sur la zone de travail

XD vous permet de trouver rapidement des actifs sur la zone de travail. Pour repérer tous les endroits où un actif a été placé sur la zone de travail, sélectionnez cet actif dans le panneau Actifs, faites un clic droit, puis sélectionnez Mettre en évidence dans la zone de travail. Toutes les occurrences de l’actif sont ainsi mises en évidence sur la zone de travail.

Modifier des composants, des couleurs et des styles de caractère liés dans le document source

Vous pouvez modifier des composants, des couleurs et des styles de caractère liés dans le document source. Tous les documents consommant les fichiers liés sont informés des modifications.

  • Faites un clic droit sur le composant, la couleur ou le style de caractère lié dans le panneau Actifs et sélectionnez Modifier dans le document source. Le fichier est mis en évidence dans le panneau Actifs (liste Affichage par défaut) du document source. 
  • Modifiez les composants, les couleurs et les styles de caractère liés dans le document source, et tous les documents consommateurs reçoivent des notifications de mise à jour.

  • Ajoutez ou supprimez des composants, des couleurs et des styles de caractère dans le document source. Cela déclenchera une notification de mise à jour pour tous les documents liés à ce document source.

Modifier la couleur liée ou le style de caractère lié dans le document source
Modifier le composant, la couleur ou le style de caractère lié dans le document source

Remarque :

Pour que la convention de nommage des actifs soit cohérente pour tous les concepteurs utilisant des actifs liés, les actifs liés ne peuvent être renommés que dans le document source en ligne. Si vous renommez un actif lié dans le document source, tous les documents consommateurs comportant cet actif lié sont informés de cette mise à jour pour refléter le nouveau nom d’actif. 

Pour renommer ou modifier la valeur d’un composant, d’une couleur ou d’un style de caractère lié dans le document source dans l’affichage en liste, effectuez l’une des opérations suivantes :

  • Double-cliquez sur le composant, la couleur ou le style de caractère lié.
  • Faites un clic droit sur le composant, la couleur ou le style de caractère lié et sélectionnez Renommer.

Prévisualiser des mises à jour de composant, de couleur ou de styles de caractère liés

Lorsqu’un composant, une couleur ou un style de caractère lié est modifié dans le document source, le document consommateur reçoit une notification de mise à jour indiquée par une icône en forme de badge bleu  dans le panneau Actifs

Lorsque vous ouvrez le panneau Actifs, chaque actif lié mis à jour est doté d’une icône de mise à jour bleue pour indiquer une mise à jour disponible.

Survolez l’icône de mise à jour bleue pour prévisualiser les modifications de composant, couleurs ou styles de caractère mis à jour dans le panneau Actifs et dans le canevas pour tout objet ou composant auquel ces fichiers liés mis à jour ont été appliqués :

  • Prévisualisez les mises à jour et affichez la date de dernière modification ainsi que les détails du document source avant de valider les modifications.
  • Affichez les modifications mises à jour sur les miniatures du panneau Actifs (affichage en liste et en grille) et sur la zone de travail dans le contexte de vos conceptions.

Accepter des mises à jour d’un composant, d’une couleur ou d’un style de caractère lié

Une fois que vous avez prévisualisé les modifications des fichiers liés, vous pouvez accepter une ou plusieurs mises à jour pour un composant, une couleur ou un style de caractère lié.

Pour accepter une seule mise à jour de composant, de couleur ou de style de caractère lié, procédez comme suit :

  • Cliquez sur l’icône bleue de mise à jour  du panneau Actifs
  • Faites un clic droit sur le fichier, puis cliquez sur Mise à jour.
Accepter les mises à jour d’une couleur liée
Accepter les mises à jour d’une couleur liée

Pour accepter plusieurs mises à jour, effectuez l’une des opérations suivantes :

  • Cliquez sur Tout mettre à jour pour accepter toutes les mises à jour de composant, de couleurs et de styles de caractère et des composants liés. Cela inclut l’ajout des nouvelles couleurs et des nouveaux styles de caractère et composants ajoutés au document source.
  • Sélectionnez plusieurs composants, couleurs, styles de caractère liés et faites un clic droit sur Mettre à jour.
Accepter toutes les mises à jour
Accepter toutes les mises à jour

Supprimer les actifs liés dans le document source

Lorsque vous supprimez des éléments liés (couleurs, styles de caractère ou composants) dans le document source, la pastille de lien devient rouge, indiquant que les actifs liés ont un lien rompu et sont absents du document source.

Vous pouvez convertir des actifs ayant un lien rompu en des actifs locaux. Faites un clic droit sur les fichiers aux liens rompus dans le panneau Actifs et sélectionnez Créer un composant localCréer une couleur locale ou Créer un style de caractère local. Tous les objets qui étaient auparavant liés au composant, à la couleur ou au style de caractère dont le lien a été rompu sont maintenant liés au composant, à la couleur ou au style de caractère local mis à jour.

Créer une couleur locale
Convertir une couleur dont le lien a été rompu en une couleur locale

Remarque :

Vous pouvez supprimer les actifs liés uniquement dans le document source. Cela garantit que tous les documents utilisant les actifs liés provenant du document source sont toujours synchronisés avec les modifications.

Utiliser des composants liés

Les composants remplacent les anciens symboles. Ils rationalisent la tâche de construire des éléments de conception répétés, lui conférant plus de puissance. 

Les composants liés vous permettent de créer et de gérer un seul kit principal pour tous les composants réutilisables que vous souhaitez utiliser dans vos propres projets ou partager avec d’autres. Cela garantit que votre équipe travaille à partir d’une source fiable unique et que ses conceptions sont toujours synchronisées. Comme pour les couleurs et les styles de caractère liés, lorsque vous modifiez un composant lié dans le document source, Adobe XD notifie les documents contenant des occurrences de ce composant en indiquant quelles sont les mises à jour. À partir de là, vous pouvez prévisualiser les modifications et choisir de les accepter ou de les ignorer.

Pour obtenir des informations sur les composants liés, consultez la section Utilisation des composants dans XD.

Utilisez ces flux de travaux pour utiliser des composants liés dans les fichiers de conception :

Créer des composants liés

Pour créer des composants liés, utilisez l’une des options suivantes :

  1. Pour utiliser un ensemble de composants de votre document source XD, copiez les composants du document XD source enregistré et collez-les dans votre propre projet. Survolez l’icône pour afficher les composants collés sur la zone de travail et l’icône dans le panneau Actifs.
  2. Pour accéder à tous les composants de votre document source ainsi qu’aux couleurs et aux styles de caractère, utilisez le flux de travaux des actifs liés pour importer tous les composants du document source en tant que liens.
Créer des composants liés
Créer des composants liés

Remplacer les propriétés de composants liés

Lorsqu’une instance de composant lié est utilisée dans un document consommateur, vous pouvez remplacer le style, l’apparence et la disposition pour personnaliser les instances locales dans le document consommateur. Pour en savoir plus sur les substitutions de composants, consultez la section Utilisation des composants dans XD.

Modifier le composant lié dans le document source

Pour modifier le composant principal dans le document source, cliquez avec le bouton droit sur le panneau Actifs ou sur la zone de travail et sélectionnez Modifier le composant principal dans le document source. Le document source s’ouvre et le composant principal est mis en surbrillance dans la zone de travail.

Si vous modifiez et enregistrez le composant principal dans le document source, une icône bleue de mise à jour en regard de chaque instance du composant dans le document consommateur s’affiche dans le panneau Actifs.

Remarque :

Utilisez le raccourci CMD + 3 (Mac) ou Ctrl + 3 (Win) pour zoomer sur le composant principal.

Modifier le composant lié dans le document source
Modifier le composant lié dans le document source

Prévisualiser et accepter les mises à jour de composant lié

À l’instar des couleurs liées et styles de caractère liés, vous pouvez survoler l’icône bleue de mise à jour pour un composant lié mis à jour afin de prévisualiser les mises à jour au sein du panneau Actifs, et si visible, sur la zone de conception.

Cliquez sur l’icône bleue de mise à jour pour accepter la mise à jour d’un composant individuel, puis cliquez sur le bouton Tout mettre à jour situé au bas du panneau Actifs pour mettre à jour toutes les instances du composant dans le document.

Remarque :

Si les occurrences du composant ont des remplacements, les propriétés remplacées sont toujours conservées, même si vous modifiez cette même propriété à partir du composant principal. Les propriétés qui ne sont pas remplacées sont mises à jour pour refléter les modifications apportées au composant principal.

Prévisualiser et accepter les mises à jour de composant lié
Prévisualiser et accepter les mises à jour de composant lié

Convertir un composant lié en un composant local

Pour expérimenter et modifier les propriétés d’un composant lié sans impacter ses instances dans d’autres documents, convertissez ce composant lié en un composant local.

Si vous souhaitez modifier les propriétés d’apparence du composant lié sans affecter les autres documents contenant ce même composant lié, convertissez le composant lié en un symbole local. Vous pouvez modifier ou remplacer les propriétés d’un composant local. Les mises à jour apportées à un composant local sont limitées à son propre document.

Pour convertir un composant lié en composant local, cliquez avec le bouton droit sur le composant lié dans le panneau Actifs et sélectionnez Créer un composant local.

Remarque :

Si vous convertissez un composant lié en un composant local, vous ne recevez plus de notifications concernant les modifications apportées au composant dans le document source. Les autres documents XD contenant le composant lié continuent à recevoir des mises à jour.

L’option Créer un composant local ne fonctionne que si vous copiez/collez un composant lié dans plusieurs documents ou si vous avez un composant dont le lien est rompu.

Supprimer un document en ligne lié

Pour supprimer un document en ligne lié de votre document XD, passez la souris sur le document en ligne lié dans le filtre du panneau Actifs et cliquez sur le bouton .

Une fois qu’un document en ligne lié est supprimé :

  • Les actifs liés du document en ligne sont supprimés du panneau Actifs.
  • Le filtre du document en ligne lié est supprimé du panneau Actifs.
  • Tous les composants liés de la zone de travail sont convertis en groupes normaux.

Lorsque vous supprimez un document source en ligne XD, tous les documents consommateurs sont notifiés des liens rompus. Cliquez sur Relier dans le menu contextuel du panneau Actifs.

Si vous sélectionnez un document XD en ligne qui contient les mêmes actifs, XD lie à nouveau les actifs rompus au nouveau document et le nouveau document source relié est ajouté en tant que filtre.

Si le document XD en ligne relié ne contient pas d’actifs liés rompus ou s’il en contient certains, seuls les actifs disponibles sont liés et les actifs restants continuent d’avoir un lien rompu.

Relier les actifs liés manquants
Relier les documents en ligne manquants

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