Gestion des actifs et des composants

Pour gérer de manière centralisée des actifs tels que les couleurs, les dégradés et les styles de caractères des objets utilisés dans votre projet, vous pouvez les ajouter au panneau Actifs.

Par ailleurs, le panneau Actifs affiche automatiquement tous les composants que vous créez dans XD. Pour plus d’informations sur les composants, voir Composants.

Pour ouvrir le panneau Actifs, cliquez sur  dans la barre d’outils ou appuyez sur Cmd + Maj + Y (sous Mac) ou Ctrl + Maj + Y (sous Windows).

Ajout et suppression d’actifs

Pour ajouter des couleurs et des dégradés (linéaires ou radiaux) au panneau Actifs : sélectionnez un objet ou un groupe d’objets sur le plan de travail, puis cliquez sur l’icône + en regard de Couleurs dans le panneau Actifs. Pour en savoir plus, consultez la section Ajout et utilisation de couleurs en tant qu’actifs.

Pour ajouter des styles de caractères au panneau Actifs : sélectionnez du texte ou une zone de texte sur le plan de travail, puis cliquez sur l’icône + en regard de Styles de caractères dans le panneau Actifs. Pour en savoir plus, consultez la section Ajout et utilisation de styles de caractères en tant qu’actifs.

Pour supprimer un actif du panneau Actifs : sélectionnez l’actif dans le panneau Actifs, cliquez avec le bouton droit de la souris (sous Windows) ou cliquez en maintenant la touche Ctrl enfoncée (sous Mac), puis sélectionnez Supprimer dans le menu contextuel.

Vous pouvez également sélectionner un plan de travail ou un groupe de plans de travail et cliquer sur l’icône + pour ajouter l’ensemble des couleurs et styles de caractères présents dans les plans de travail au panneau Actifs. 

Ajout et utilisation de couleurs en tant qu’actifs

1. Sélectionnez l’objet correspondant sur la zone de dessin et appliquez la couleur dont vous avez besoin à partir de l’inspecteur Propriétés.
2. Pour ajouter la couleur en tant qu’actif, sélectionnez l’objet mentionné ci-dessus et cliquez sur l’icône + en regard de Couleurs dans le panneau Actifs.
3. Pour appliquer la couleur à un objet, sélectionnez-la sur la zone de dessin et suivez l’une des étapes ci-dessous :
   • Pour appliquer une couleur en tant que remplissage, cliquez sur la couleur dans le panneau Actifs ou effectuez un clic droit sur la couleur et choisissez Appliquer comme fond.
   • Pour appliquer un contour de couleur (bordure), faites un clic droit sur une couleur dans le panneau Actifs, puis sélectionnez Appliquer comme bordure. 
4. Modifiez les couleurs de manière centralisée en cliquant dessus avec le bouton droit de la souris dans le panneau Actifs. Les changements sont appliqués à l’ensemble du document.

Ajout et utilisation de styles de caractères en tant qu’actifs

1. Sélectionnez le texte sur la zone de dessin et appliquez les styles à partir de l’inspecteur Propriétés.
2. Pour ajouter des styles en tant qu’actifs, sélectionnez le texte présentant le style et cliquez sur l’icône + en regard de Styles de caractères dans le panneau Actifs. Si vous sélectionnez un texte avec plusieurs styles, cliquez sur l’icône + pour créer plusieurs styles de caractères. 
3. Pour appliquer des styles de caractères à du texte, sélectionnez ce texte sur la zone de dessin et cliquez sur les styles de caractères dans le panneau Actifs.
4. Sélectionnez les styles de caractères et cliquez dessus avec le bouton droit de la souris pour les modifier. Les changements sont appliqués en temps réel dans le document.

Actifs libellés

Vous pouvez ajouter des étiquettes personnalisées aux actifs que vous ajoutez dans le panneau Actifs. Dans le panneau Actifs, passez en mode liste et cliquez sur l’étiquette de l’actif à renommer. Par exemple, vous pouvez personnaliser le nom d’une couleur pour remplacer la valeur hexadécimale par la couleur d’arrière-plan.

Lorsque vous renommez un composant, la modification s’applique à toutes les instances de ce composant dans le panneau Calques pour une meilleure identification.

XD vous permet aussi d’ajouter des émoticônes aux étiquettes.

Réorganisation d’éléments dans le panneau Actifs

Vous pouvez réorganiser les éléments dans le panneau Actifs. Vous pouvez déplacer les actifs fréquemment utilisés en haut de la liste ou les organiser en groupes.

Comment résoudre les problèmes de polices manquantes ?

Lorsque votre document XD contient des polices qui ne sont pas installées sur votre ordinateur, XD les répertorie dans la liste Polices manquantes du panneau Actifs, ce qui vous permet de les mettre en évidence sur le canevas, d’évaluer leur utilisation dans les dessins et de les remplacer tout au long de votre composition. Pour les polices manquantes disponibles dans la bibliothèque Adobe Fonts, XD les active automatiquement afin d’offrir une expérience client transparente.

Utilisation des polices Adobe

Pour rendre votre expérience des polices Adobe aussi simple que possible, XD active automatiquement les polices manquantes disponibles dans la bibliothèque d’Adobe Fonts sur votre ordinateur sans intervention de votre part.

Lorsque vous êtes en ligne et que vous ouvrez un document contenant des polices manquantes disponibles dans Adobe Fonts (produit auquel vous avez accès via votre abonnement Creative Cloud), XD les active automatiquement sur votre ordinateur.

Les polices activées à partir d’Adobe Fonts sont mises en évidence par une icône d’activation bleue. Dès qu’elles sont prêtes à être utilisées, elles sont disponibles dans votre document, sans aucune intervention de votre part.

Identification et remplacement des polices manquantes

Si votre document utilise des polices manquantes, un point d’exclamation apparaît en regard de celles-ci dans le panneau Actifs. Pour remplacer la police manquante :

1. Cliquez avec le bouton droit sur la police manquante et sélectionnez Remplacer la police afin de choisir une police de remplacement. XD affiche automatiquement un aperçu de la police de remplacement suggérée sur le canevas. Vous pouvez également utiliser l’option Mettre en évidence dans la zone de travail pour signaler la police manquante dans vos dessins avant de la remplacer.
2. Sélectionnez OK pour remplacer la police sur le canevas, ainsi que dans les styles de caractères définis.

Que sont les composants et comment puis-je les créer, les modifier et les supprimer ?

Un composant est un objet ou un groupe d’objets qui peut être réutilisé plusieurs fois sur les plans de travail de votre projet. Toutes les instances d’un composant utilisé dans votre projet sont liées, ce qui signifie que toute correction apportée à une instance se répercute immédiatement sur toutes les autres instances.

Pour convertir un objet en composant, effectuez l’une des opérations suivantes :

• Cliquez sur l’object avec le bouton droit et sélectionnez Créer un composant.
• Sélectionnez l’objet et appuyez sur Cmd + K (sous Mac) ou Ctrl + K (sous Windows).
• Sur un Mac, sélectionnez l’objet, puis sélectionnez Objet > Créer un composant.
• Sélectionnez l’objet et cliquez sur + dans la bibliothèque Composants au sein du panneau Actifs.

Tous les composants que vous créez dans votre projet sont automatiquement affichés dans la bibliothèque Composants au sein du panneau Actifs.

Modification et suppression de composants

Pour modifier l’ombre et le flou d’arrière-plan d’un composant, vous devez double-cliquer sur ce composant dans le plan de travail, contrairement à ce que vous faites pour les objets ordinaires. Lorsque vous double-cliquez sur un composant sur le plan de travail, il apparaît avec une bordure plus épaisse. Si votre composant est un groupe d’objets, lorsque vous double-cliquez dessus, vous pouvez modifier chacun des objets du groupe. 

Pour supprimer un composant de la bibliothèque Composants, faites un clic droit sur le composant et sélectionnez Supprimer le composant.

Réutilisation des composants

Pour réutiliser un composant, faites-le glisser de la bibliothèque Composants vers le plan de travail. Vous pouvez également copier et coller un composant à l’intérieur d’un même plan de travail ou d’un plan de travail à un autre. Toutes les instances liées d’un composant sont signalées par une bordure verte. Vous pouvez également copier et coller les composants d’un document XD vers un autre. 

Pour modifier le style d’une instance de composant sans affecter les autres, faites un clic droit sur l’instance en question et sélectionnezDissocier le composant. Vous pourrez alors effectuer les modifications souhaitées. 

Pour modifier le texte ou les images bitmap d’une instance de composant, vous n’avez pas besoin de dissocier le composant. Pour plus d’informations, reportez-vous à la section Remplacement du texte et des images bitmap pour les instances de composant.

Remplacement du texte et des images bitmap pour les instances de composant

Vous pouvez modifier le texte et les images bitmap de certaines instances d’un composant sans que cela n’affecte le composant d’origine. Ainsi, vous pouvez réutiliser un même composant dans plusieurs documents XD tout en ayant du texte ou des images bitmap uniques pour chacune de ses instances.

La fonction de remplacement est particulièrement utile lorsque vous créez des boutons ou d’autres éléments de navigation qui possèdent le même design graphique, mais pour lesquels vous avez besoin d’images ou de blocs de texte différents.

Pour remplacer le texte ou l’image bitmap d’une instance de composant, il vous suffit de sélectionner le texte existant et de taper le nouveau texte à la place, ou de remplacer l’image bitmap par une autre.

La modification du texte ou de l’image ne s’applique qu’à cette instance en particulier, elle n’a pas d’incidence sur le composant d’origine.

Pour propager les changements de texte ou d’image bitmap d’une instance aux autres composants liés, faites un clic droit sur le plan de travail et sélectionnez Appliquer les remplacements.

Remplacement de composants

Vous pouvez remplacer toutes les instances d’un composant par un autre composant. Pour cela, faites glisser un composant du panneau Actifs sur un autre composant. Lorsque vous le placez dessus, l’icône se transforme en une flèche indiquant que le composant et toutes ses instances sont remplacés.

Que sont les actifs associés ?

Avec les actifs liés, vous pouvez 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. Quand vous modifiez un actif lié dans le document source, XD envoie une notification des instances de ces actifs liés avec toutes les mises à jour. De là, vous pouvez prévisualiser et accepter les mises à jour.  

Comment ajouter des actifs liés au panneau Actifs ?

Pour ajouter des actifs liés au panneau Actifs, effectuez l’une des opérations suivantes :

• Cliquez sur l'icône + à côté du panneau Actifs si le panneau Actifs est peuplé

ou

• Cliquez sur le badge Lier les actifssi le panneau des actifs est vide.

La fenêtre Lier les actifs s'ouvre avec deux onglets ; Documents en ligne et Partagés avec vous. Vous pouvez trier les documents dans les onglets Documents en ligne et Partagés avec vous par nom, date de modification, date de création et taille. Sélectionnez cette option pour ajouter un document en ligne XD à votre projet de conception.

Les actifs du document en ligne source lié sont ajoutés au panneau Actifs sous leur propre filtre nommé selon le nom du document en ligne. Par exemple, CodeBrown_Tractiv_UI_kit.

Si vous avez défini un filtre dans le panneau Actif, passez à l'affichage Tous les actifs pour consulter les actifs nouvellement ajoutés à partir du document en ligne dans le navigateur des actifs. Notez que les couleurs, les styles de caractère et les composants sont automatiquement importés à partir du document lié.

Pour plus d’informations sur l’utilisation des actifs liés, reportez-vous à la section Utilisation d'actifs liés.

Que sont les composants liés ?

Grâce aux composants liés, vous pouvez partager des composants d’un document à l’autre et conserver une seule version pour les kits d’interface utilisateur, les guides de style et les autocollants. Lorsque vous mettez à jour un composant lié dans le document source et enregistrez les modifications, XD vous informe de cette mise à jour dans le document de destination.

Pour plus d’informations sur l’utilisation des composants liés, reportez-vous à la section Utilisation de composants liés.

Comment rechercher et filtrer des actifs et des composants dans le panneau Actifs ?

Filtrage des actifs selon leur type

Par défaut, tous les actifs sont ajoutés dans le panneau Actifs et y apparaissent. Vous pouvez les filtrer par type en cliquant sur la liste déroulante disponible dans le panneau Actifs, en regard du champ de recherche. Dans la liste déroulante, vous pouvez sélectionner l’un de ces types d’actif suivants : Couleur, Style de caractères ou Composants. 

Recherche d’actifs

Vous pouvez rechercher des couleurs, des styles de caractères et des composants dans le panneau Actifs. Par exemple, pour rechercher une couleur, tapez simplement son code hexadécimal ou son étiquette personnalisée. De même, pour rechercher des styles de caractères et des composants, tapez la chaîne correspondant au nom de l’actif. En fonction de la chaîne de recherche saisie, XD affiche les résultats correspondants dans le panneau Actifs. 

XD mémorise les cinq dernières recherches pour chaque session. Elles apparaissent dans l’historique de recherche.

Comment trouver des actifs et des composants sur le canevas à l’aide du panneau Actifs ?

XD vous permet de trouver rapidement des actifs sur la zone de dessin. Pour repérer tous les endroits où un actif a été placé sur la zone de dessin, 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 dessin.

Si un composant ne figure pas du tout dans le projet, XD affiche le message suivant : « Aucune copie de ce composant trouvée ».

Mise en surbrillance des actifs dans le panneau Actifs pour des objets sélectionnés sur la zone de dessin

XD vous permet également de mettre en évidence dans le panneau Actifs les actifs utilisés pour un objet sélectionné sur la zone de dessin. Lorsque vous sélectionnez un objet sur le canevas, il est très facile de connaître la couleur, le style de caractère ou le composant utilisé pour cet objet.

Pour mettre en évidence les actifs utilisés pour un objet dans le panneau Actifs, sélectionnez l’objet dans le plan de travail, faites un clic droit dessus et sélectionnez l’une des options suivantes :

• Faire apparaître la couleur : dans le panneau Actifs, met en évidence la couleur qui a été utilisée.
• Faire apparaître le style de caractère : met en évidence le style de caractères utilisé dans l’élément.
• Faire apparaître le composant : renvoie au composant déjà ajouté au panneau.

XD met en évidence les actifs utilisés pour l’objet sélectionné.