Si vous avez une question à poser ou une idée à partager, rejoignez la communauté Adobe XD. Nous aimerions connaître vos commentaires et découvrir vos créations.
Dernière mise à jour le
7 févr. 2023
Découvrez comment consulter et inspecter des attributs tels que les couleurs, le texte, les mesures, les états des composants ou encore les mises en évidence d’interactions, dans une spécification technique.
Un lien de spécification technique partagée permet de voir et de tester le prototype, d’ajouter des commentaires en contexte et de choisir d’afficher les mesures et données techniques du design.
Un lien de spécification technique s’ouvre par défaut en mode prototype. Pour connaître les propriétés et les spécifications du fichier, ouvrez l’onglet des spécifications techniques en cliquant sur l’icône 
dans le rail de droite.
Lorsque vous passez dans l’onglet des spécifications techniques, vous pouvez sélectionner des éléments et les inspecter sur la zone de travail pour connaître leurs attributs, tels que les couleurs, le texte, les mesures, les états et d’autres propriétés affichées dans l’Inspecteur Propriétés.
Cliquez sur l’icône {} pour passer à l’onglet des variables. Cet onglet est disponible lorsque le designer publie un lien de spécification technique pour le web. Lorsque le designer définit des noms de variable pour des couleurs et des styles de caractères dans une conception, vous pouvez consulter les informations du jeton de conception dans l’onglet des variables.
Lisez ce qui suit pour savoir comment afficher et faire correspondre les attributs dans une spécification technique.
Vue Détails de l’écran
Lorsque vous cliquez en dehors d’un plan de travail, vous arrivez dans la vue Détails de l’écran. Dans cette vue, vous pouvez inspecter l’écran et obtenir des détails tels que la mise en évidence des interactions.
Détails de l’écran et propriétés
A. Détails de l'écran : Affichez les dimensions de l'écran.
B. Couleurs : Affichez les couleurs marquées pour l'export.
C. Propriétés de la grille de mise en page : Basculez pour afficher les grilles.
Pour contrôler la transparence des couleurs, utilisez le curseur Opacité.
Annotation
Si vous marquez un calque pour exportation dans l’application XD, les couleurs utilisées dans ce calque n’apparaîtront pas dans la vue de détails de l’écran.
Superpositions
Cliquez sur Mise en évidence des interactions pour afficher les détails d’un plan de travail, les styles, le design, la taille de la fenêtre d’affichage, la position des superpositions, les couleurs, les styles de caractères et les informations cible de la superposition concernée.
Mise en évidence des interactions
Pour mettre en évidence les interactions, maintenez la touche Maj enfoncée. Pour les inspecter, cliquez sur l’artefact affiché dans la section Interactions ou cliquez sur plusieurs interactions en maintenant la touche Maj enfoncée.
Vue des détails de calque
Lorsque vous sélectionnez un calque sur un plan de travail, vous arrivez dans la vue des détails de calque. Dans l’Inspecteur Propriétés, vous pouvez voir le nom du calque, ainsi que diverses propriétés telles que les dimensions et l’apparence.
Texte et aspect
A.Propriétés du texte : Sélectionnez une ligne de texte pour afficher les propriétés du texte accompagnées des unités par défaut telles que px, pt et dp.
B. Apparence : Affichez les couleurs utilisées dans un objet ou un texte dans la section Apparence.
Formes
Sélectionnez une forme pour inspecter ses attributs suivants :
- Largeur, hauteur et rotation.
- Attributs d’apparence, tels que les couleurs, la taille de la bordure, les tirets, l’espace, les traits et l’opacité.
Images
Sélectionnez une image pour inspecter ses attributs suivants :
- Largeur, hauteur et rotation.
- Opacité.
Vidéos
Sélectionnez une vidéo pour inspecter ses attributs suivants :
- Largeur, hauteur et rotation.
- Nom de l’image de l’affiche.
- Lecture automatique, lecture en boucle et paramètres audio.
- Si la vidéo doit être coupée, elle indique l’heure à laquelle le clip vidéo doit commencer et se terminer.
- Opacité.
Portion de texte
Passez la souris sur une portion de texte pour mettre en évidence d’autres portions similaires dans l’élément de texte.
Hyperliens
Hyperliens d’objet
- Lorsque vous sélectionnez un objet sur un plan de travail, tous ses hyperliens s’affichent dans la section Interactions de l’Inspecteur Propriétés.
- Survolez un hyperlien dans la section Interactions pour identifier l’objet associé sur le plan de travail.
- Pour copier l’URL d’un hyperlien dans le presse-papiers, cliquez sur l’hyperlien dans la section Détails de l’objet.
- Lorsque vous cliquez sur un hyperlien dans la section Interactions, le lien s’ouvre. Pour copier l’URL de l’hyperlien dans la section Interactions, faites un clic droit dessus.
- Dans la section Interactions, lorsque vous cliquez sur un hyperlien dont le protocole n’est pas https ou mailto, qui n’a pas de protocole ou dont le domaine n’est pas valide, l’URL ne s’ouvre pas. Un message d’erreur s’affiche alors au bas de l’écran.
- Si plusieurs interactions d’hyperliens sont définies sur un objet, vous ne pouvez pas les copier à partir de la section Détails de l’objet. Faites un clic droit sur les hyperliens de la section Interactions pour les copier.
Hyperliens de texte
- Lorsque vous sélectionnez un objet texte sur un plan de travail, l’inspecteur Propriétés (sections Interactions et Détails de l’objet) affiche toutes les interactions d’hyperliens associées à l’ensemble de cet objet.
- Vous pouvez inspecter les interactions des hyperliens définis pour l’objet texte comme vous le faites pour n’importe quel hyperlien d’objet.
- Lorsque vous sélectionnez du texte (portion de texte) dans l’objet et si ce texte comporte un hyperlien distinct, la section Détails de l’objet reflète l’URL de cet hyperlien. Cependant, la section Interactions continue d’afficher l’hyperlien et les autres interactions définies pour l’objet.
- Pour copier l’URL d’un hyperlien d’une portion de texte dans le presse-papiers, cliquez dessus dans la section Détails de l’objet.
Pour en savoir plus sur les hyperliens dans XD, reportez-vous à la section Création d’hyperliens.
Fragments de code
Code CSS
- Pour générer le code CSS, dans l’application XD, sélectionnez Exporter pour le Web dans Partager > Développement, et publiez les spécifications techniques.
- Vous pouvez consulter et copier le code CSS de votre design à partir de la section Fragments de code CSS.
- Pour copier et coller un fragment de code, appuyez dessus, faites-le glisser, passez dans votre éditeur de code et collez-le.
Code HTML
- Pour générer le code HTML des fichiers Lottie et vidéo, dans l’application XD, sélectionnez Exporter pour le Web dans Partager > Développement, et publiez les spécifications techniques.
- Vous pouvez copier le code HTML à partir de la section HTML de l’Inspecteur Propriétés.
- Pour copier et coller un fragment de code, appuyez dessus, faites-le glisser, passez dans votre éditeur de code et collez-le.
États des composants
- Sélectionnez un objet dans le plan de travail et, si l’objet sélectionné est un composant, vous pouvez inspecter ses différents états.
- Pour afficher les différents états du composant sélectionné dans le plan de travail, cliquez sur les options sous la liste Composant dans l’inspecteur Propriétés.
- Dans la section Interactions, vous pouvez afficher toutes les interactions associées à l’état actif du composant sélectionné.
- Cliquez sur l’état inactif du composant dans la liste pour afficher les états sur le plan de travail ainsi que les interactions qui y sont associées.
- Si le nom du composant est long et que vous n’arrivez à en lire qu’une partie, sélectionnez ce nom dans l’Inspecteur Propriétés pour le copier.
Annotation
Vous pouvez télécharger tous les états d’un composant téléchargeable. Dans l’application XD, si le designer marque plusieurs instances d’un composant pour exportation, seule la dernière instance du panneau Calques est exportée.
Calques masqués
- Passez la souris sur une zone précise et cliquez dessus avec le bouton droit de la souris pour afficher la liste des calques et leurs détails contextuels au niveau des pixels concernés.
- Si le nom du groupe est long et que vous n’arrivez à en lire qu’une partie, sélectionnez ce nom dans l’Inspecteur Propriétés pour le copier.
En savoir plus
Pour En savoir plus sur l'inspection des spécifications techniques dans XD, regardez cette vidéo.
Durée de visionnage : 8 minutes
Et après ?
Nous vous avons expliqué comment consulter et inspecter une spécification technique. Allez plus loin et découvrez comment examiner une spécification technique et extraire les actifs de la spécification technique.
Vous avez une question ou une suggestion ?
Concevoir des prototypes UX avec Adobe XD
Créez des maquettes interactives pour sites web et applications mobiles.
