Guide d'utilisation Annuler

Affichage et inspection de spécifications techniques

Rechercher
  1. Guide de l’utilisateur d’Adobe XD
  2. Introduction
    1. Nouveautés d’Adobe XD
    2. Questions fréquentes
    3. Design, création de prototypes et partage avec Adobe XD
    4. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    5. Notions de base concernant l’espace de travail
    6. Changement de langue dans l’application Adobe XD
    7. Accès aux kits de conception d’interface utilisateur
    8. Accessibilité dans Adobe XD
    9. Raccourcis clavier
    10. Conseils et astuces
    11. Options d’abonnement à Adobe XD
    12. Modifications apportées à la formule de lancement d’Adobe XD
  3. Conception
    1. Plans de travail, repères et calques
      1. Prise en main des plans de travail
      2. Utilisation des guides et des grilles
      3. Création de plans de travail défilants
      4. Utilisation de calques
      5. Création de groupes de défilement
    2. Formes, objets et chemins
      1. Sélection, redimensionnement et rotation d’objets
      2. Déplacement, alignement, répartition et disposition d’objets
      3. Regroupement, verrouillage, duplication, copie et retournement d’objets
      4. Application d’un contour, d’un fond ou d’une ombre portée à un objet
      5. Création d’éléments répétés
      6. Création de designs en perspective avec des transformations 3D
      7. Modification d’objets à l’aide d’opérations booléennes
    3. Texte et polices
      1. Utilisation d’outils de dessin et de texte
      2. Polices dans Adobe XD
    4. Composants et états
      1. Utilisation de composants
      2. Utilisation de composants imbriqués
      3. Ajout de plusieurs états aux composants
    5. Masquage et effets
      1. Création d’un masque avec des formes
      2. Utilisation des effets de flou
      3. Création et modification de dégradés
      4. Application des effets de fusion
    6. Mise en page
      1. Redimensionnement réactif et contraintes
      2. Définition d’un remplissage fixe pour des composants et des groupes
      3. Création de conceptions dynamiques avec des piles
    7. Vidéos et animations Lottie
      1. Utilisation de vidéos
      2. Création de prototypes avec des vidéos
      3. Utilisation d’animations Lottie
  4. Prototypage
    1. Création de prototypes interactifs
    2. Animation des prototypes
    3. Propriétés d’objet prises en charge pour l’animation automatique
    4. Création de prototypes avec clavier et manette de jeu
    5. Création de prototypes à l’aide de la lecture et des commandes vocales
    6. Création de transitions temporisées
    7. Ajouter des incrustations
    8. Conception de prototypes de voix
    9. Création de liens d’ancrage
    10. Création d’hyperliens
    11. Aperçu de designs et de prototypes
  5. Partage, exportation et révision
    1. Partage des plans de travail sélectionnés
    2. Partage de conceptions et de prototypes
    3. Définition des autorisations d’accès pour les liens
    4. Utilisation de prototypes
    5. Révision de prototypes
    6. Utilisation des spécifications techniques
    7. Partage de spécifications techniques
    8. Inspection de spécifications techniques
    9. Navigation dans les spécifications techniques
    10. Révision des spécifications techniques et commentaires
    11. Exportation d’actifs de conception
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation d’actifs de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration d’actifs liés vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation d’actifs provenant de bibliothèques Creative Cloud
  7. Documents en ligne
    1. Documents en ligne dans Adobe XD
    2. Collaboration et cocréation de conceptions
    3. Cocréation de documents partagés
  8. Intégrations et plug-ins
    1. Utilisation d’actifs externes
    2. Utilisation d’actifs de création provenant de Photoshop
    3. Copier-coller d’actifs depuis Photoshop
    4. Importation ou ouverture de conceptions Photoshop
    5. Utilisation des fichiers Illustrator dans Adobe XD
    6. Ouverture et importation de conceptions Illustrator
    7. Copie de vecteurs d’Illustrator vers XD
    8. Plug-ins pour Adobe XD
    9. Création et gestion des plug-ins
    10. Intégration Jira pour XD
    11. Plug-in Slack pour XD
    12. Plug-in Zoom pour XD
    13. Publication de designs depuis XD vers Behance
  9. XD pour iOS et Android
    1. Aperçu sur appareils mobiles
    2. FAQ concernant Adobe XD pour mobile
  10. Résolution des problèmes
    1. Problèmes connus et résolus
      1. Problèmes connus
      2. Problèmes résolus
    2. Installation et mises à jour
      1. XD semble incompatible avec Windows
      2. Code d’erreur 191
      3. Code d’erreur 183
      4. Problèmes d’installation des modules externes XD
      5.  Invitation à désinstaller et réinstaller Adobe XD sur Windows 10
      6. Problèmes liés à la migration des préférences
    3. Lancement et blocage
      1.  XD se bloque au lancement sur Windows 10
      2.  XD se ferme lorsque vous vous déconnectez de Creative Cloud
      3. Problème lié à l’état d’un abonnement sur Windows
      4. Avertissement d’application bloquée lors du lancement de XD sur Windows
      5. Génération du fichier de vidage sur Windows
      6. Collecte et partage de journaux d’incidents
    4. Documents en ligne et bibliothèques Creative Cloud
      1. Problèmes liés aux documents en ligne XD
      2. Problèmes relatifs aux composants liés
      3. Problèmes relatifs aux bibliothèques et aux liens
    5. Prototype, publication et révision
      1. Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
      2. Problèmes liés aux workflows de publication
      3. Les liens publiés n’apparaissent pas dans les navigateurs
      4. Les prototypes ne s’affichent pas correctement dans les navigateurs
      5. Le panneau de commentaires s’affiche soudainement sur les liens partagés
      6. Impossible de publier des bibliothèques
    6. Importation, exportation et utilisation d’autres applications
      1. Importation et exportation dans XD
      2. Fichiers Photoshop dans XD
      3. Fichiers Illustrator dans XD
      4. Exportation dans After Effects à partir de XD
      5. Fichiers Sketch dans XD
      6. ++Applications tierces non visibles lors de l’exportation

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.

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 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 un design, 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.

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

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. 

 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.

Formes

Inspecter les 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

Inspecter les images

Sélectionnez une image pour inspecter ses attributs suivants :

  • Largeur, hauteur et rotation.
  • Opacité.

Vidéos

Inspecter la vidéo

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

Animations Lottie

Inspecter la vidéo

Sélectionnez une animation Lottie pour en inspecter les attributs suivants :

  • Largeur, hauteur et rotation.
  • Lecture automatique et paramètres audio.
  • Opacité.
  • Propriétés CSS.
  • Interactions.

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

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

Hyperliens

Hyperliens d’objet

Examen des 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

Examen des 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

Examen du 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

Examen du code HTML Lottie et vidéo

  • 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

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

 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.

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 suggestion ?

Questions à la communauté

Si vous avez une question à poser ou une idée à partager, rejoignez la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations.

Logo Adobe

Accéder à votre compte

Liens rapides

Voir toutes vos formules Gérer vos formules

Informations juridiques    |    Politique de confidentialité en ligne

[Feedback V2 Badge]