Affichage et inspection de spécifications techniques

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 de la conception.

Onglets du lien de spécification technique
Onglets du lien de spécification technique

Un lien de spécification technique s’ouvre par défaut en mode prototype. Pour accéder aux propriétés et aux données de la spécification, cliquez sur l’icône  dans le rail de droite.

Lorsque vous passez dans l’onglet de la spécification, vous pouvez survoler les éléments et les inspecter sur le canevas pour consulter 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.

 

Détails de l’écran et propriétés

A. Détails de l’écran : sélectionnez un objet pour inspecter ses mesures et l’espacement défini.

B. Couleurs : consultez les couleurs marquées pour exportation.

C. Propriétés de la grille de mise en page : activez cette option pour afficher les grilles.

Texte et aspect

A. Propriétés du texte : sélectionnez une ligne de texte pour consulter ses propriétés avec les unités par défaut telles que px, pt ou dp.

B. Aspect : découvrez les couleurs utilisées dans un objet ou un texte dans la section Aspect. 

Pour contrôler la transparence des couleurs, utilisez curseur Opacité.

Calques masqués

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. 

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.

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 les interactions en maintenant la touche Maj enfoncée. 

Fragments de code CSS

  • Pour générer le code CSS, sélectionnez la destination de sortie Web dans la fenêtre « Partager pour le 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.

États des composants

États des composants dans les spécifications techniques
États des composants dans les spécifications techniques

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

Actuellement, si vous marquez un composant pour l’exportation, seul l’état actif du composant peut être téléchargé. Pour contourner le problème, vous pouvez exporter et partager les actifs à partir de XD.

En savoir plus

Pour en savoir plus sur l’inspection des spécifications technique dans XD, regardez cette vidéo.
Temps 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 idée ?

Questions à la communauté

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.

Logo Adobe

Accéder à votre compte