Découvrez comment inspecter des spécifications techniques dans XD.

Lorsque vous recevez des spécifications techniques, vous pouvez afficher et inspecter des attributs tels que les couleurs, le texte, les mesures et les zones réactives de différents objets d’un plan de travail.

Affichage et inspection de mesures

Sélectionnez un objet dans le plan de travail pour examiner ses mesures et ses styles.

Pour connaître l’espacement entre les objets, sélectionnez un objet et placez le pointeur de la souris sur d’autres objets du plan de travail.

Inspection des mesures des objets
Inspection des mesures des objets

Affichage des couleurs, styles de caractères et actifs

Lorsque vous sélectionnez un plan de travail dans le lien de la spécification technique, toutes les couleurs uniques utilisées dans ce plan de travail apparaissent dans la section Couleurs. Vous pouvez consulter les formats de couleur disponibles et utiliser la liste déroulante pour sélectionner le format de votre choix. Par exemple, si vous préférez travailler en HSLA, utilisez la liste déroulante pour convertir le format de couleur en HSLA. Cette modification persiste pendant la totalité de la session. Les mêmes formats de couleur sont utilisés lorsque vous affichez d’autres plans de travail.

De même, vous pouvez afficher tous les styles de caractères uniques d’un plan de travail dans la section Styles de caractères.

Si vous avez marqué des calques du plan de travail pour exportation, vous pouvez afficher les couleurs et les styles de caractères de ces calques dans la section Actifs.

Remarque :

Lorsque vous sélectionnez un objet d’un plan de travail, les couleurs utilisées pour cet objet sont affichées dans la section Aspect.

Conversion des couleurs d’un format à un autre
Conversion des couleurs d’un format à un autre

Affichage, inspection et copie des propriétés de texte

Pour inspecter les propriétés du texte d’un plan de travail, sélectionnez une ligne de texte. Vous pouvez également copier du texte et sa couleur à partir du panneau Propriétés.

Adobe XD fonctionne sans unités, se concentrant plutôt sur les relations entre les objets. Par exemple, si vous concevez un plan de travail pour iPhone 6/7 de 375 x 667 unités qui utilise du texte dans une taille de police de 10 unités, la relation entre ces éléments reste inchangée, quelle que soit la taille d’appareil physique à laquelle votre design s’adapte.

Cependant, les spécifications techniques ajoutent les unités par défaut (comme px, pt ou dp) aux mesures de base sans unité, en fonction de la plate-forme, afin que vous puissiez plus facilement comprendre les mesures au sein de la plate-forme pour laquelle vous développez l’application. Vous pouvez également modifier l’unité de mesure pour passer d’une unité à une autre dans les spécifications techniques.

Modification des unités de mesure
Modification des unités de mesure

Affichage et inspection d’une portion de texte

Si vous avez un élément de texte avec plusieurs styles, vous pouvez survoler les portions d’un élément de texte. Les spécifications techniques mettent ensuite en évidence les portions de cet élément de texte dotées des mêmes styles, et vous pouvez accéder à leurs propriétés individuelles depuis l’inspecteur Propriétés.  

Attributs de portions de texte
Attributs de portions dans un texte long

Affichage et copie de fragments de code CSS

Vous pouvez consulter et copier le code CSS de votre design à partir de la section Fragments de code CSS. Le code CSS est généré automatiquement lorsque vous sélectionnez Web comme destination de sortie dans la fenêtre Partager pour développement lors de la publication des spécifications techniques.

Pour copier et coller le fragment de code dans vos fichiers CSS, appuyez sur les fragments de code CSS, faites-les glisser, passez dans votre éditeur de code et collez-les.

Fragments de code CSS
Fragments de code CSS

Affichage et vérification des propriétés d’une grille de mise en page

Pour afficher les grilles de mise en page, activez Grilles de mise en page dans l’inspecteur Propriétés. Cette option active les grilles de mise en page pour tous les plans de travail de la spécification technique.

Utilisez le bouton d’activation/désactivation pour retirer les grilles de mise en page du plan de travail. Pour contrôler la transparence d’une grille de mise en page, utilisez curseur Opacité.

Si vous avez défini les paramètres dans Grilles de mise en page, passez le pointeur sur ces paramètres pour les mettre en surbrillance dans le plan de travail affiché.

Remarque :

Les spécifications techniques n’affichent pas les grilles carrées.

Avant de publier un lien vers des spécifications techniques, assurez-vous d’activer les grilles de mise en page dans les plans de travail concernés. Par défaut, si vous n’avez pas utilisé de grilles de mise en page dans vos designs, elles n’apparaissent pas dans le lien des spécifications techniques.

Propriétés de la grille de mise en page
Propriétés de la grille de mise en page

Affichage et inspection de superpositions

Dans la vue des spécifications techniques, vous pouvez inspecter les connexions de superposition dans l’écran de flux UX.

Pour vérifier les superpositions appliquées, accédez à la section Interactions de l’inspecteur Propriétés et cliquez sur l’élément affiché, ou appuyez sur Maj et cliquez sur la zone réactive dans les spécifications techniques.

Affichage et inspection de superpositions
Affichage et inspection de superpositions

Vous pouvez examiner les informations relatives au plan de travail, aux styles et au plan de travail cible pour la superposition appliquée :

  • Taille de la fenêtre d’affichage : affiche les dimensions de la zone visible, qui varient en fonction du format d’appareil utilisé pour accéder à la page.
  • Taille de la composition : affiche les dimensions de design pour le plan de travail.
  • Position de la superposition : affiche la position de la superposition en référence au plan de travail d’origine aux formats px, pt et dp
  • Couleurs : affiche les couleurs utilisées aux formats RVBA, hexadécimal et HSLA.
  • Styles de caractères : affiche les styles de caractères aux formats px, pt et dp. Le format de la position de la superposition change en fonction du style de caractères que vous avez défini.
  • Interactions : affiche des informations sur les interactions et les actions associées au plan de travail cible.

Pour revenir au plan de travail d’origine, appuyez sur Echap ou sur Fermer la superposition sur l’écran.

Affichage et inspection d’objets fixes

Dans les spécifications techniques, les objets fixes affichent une icône représentant une épingle dans leur coin supérieur gauche lorsque vous cliquez dessus dans le plan de travail. 

Vérification d’objets fixes
Vérification d’objets fixes

Affichage et vérification des zones réactives

Pour afficher les zones réactives définies dans le plan de travail, maintenez la touche Maj enfoncée. Pour inspecter une zone réactive, cliquez sur l’élément affiché dans la section Interactions ou cliquez sur la zone en maintenant la touche Maj enfoncée. 

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