Consultez les spécifications techniques publiées à partir d’Adobe XD pour contrôler et commenter en temps réel les flux, les mesures et les styles.

La fonctionnalité Spécification technique permet de partager un document en avant-première, améliorant ainsi la communication entre les designers et les développeurs. Un designer peut générer une URL publique dans XD afin de la partager avec un développeur. En cliquant sur ce lien, le développeur peut ainsi contrôler et commenter les flux, les mesures et les styles composant le design.

Avant de commencer

Pour afficher une spécification technique, vous avez besoin des éléments suivants :

  • Lien vers la spécification technique (reçu de la part du designer)
  • Navigateur de bureau et connexion Internet. Pour connaître les versions de navigateur prises en charge, reportez-vous à la section Configuration requise.

Remarque : pour consulter une spécification technique, il est déconseillé d’utiliser un navigateur mobile car ceux-ci ne sont pas correctement pris en charge.

Remarque :

Les liens vers les spécifications techniques sont publics et accessibles à tous les utilisateurs. Pour que l’accès aux spécifications technique soit encore plus simple, depuis le 21 mars 2018, il n’est plus obligatoire de se connecter avec un Adobe ID pour pouvoir consulter une spécification technique publiée.

Pour en savoir plus, reportez-vous à la section Activation du mode Spécification technique pour Adobe XD.

Affichage des différentes étapes de l’utilisateur final

Chaque développeur peut voir la séquence et le flux des plans de travail dans la vue Flux UX.

Cet aperçu de l’ensemble des écrans de la spécification technique est très utile. Cela permet au développeur de connaître :

  • Le nombre d’écrans qui doivent être développés (utile pour planifier le travail de développement). 
  • Les séquences et les flux au sein de la spécification technique (utile pour comprendre le workflow de l’utilisateur final).
  • La date à laquelle la spécification technique a été mise à jour pour la dernière fois.
Affichage du flux UX qui fournit une vue d’ensemble du projet
Affichage du flux UX qui fournit une vue d’ensemble du projet

Dans cette vue, vous pouvez également effectuer les actions suivantes : 

  • Rechercher un écran spécifique par nom et l’afficher. Si l’écran se trouve dans la fenêtre d’affichage, il est mis en évidence. S’il ne s’y trouve pas, la spécification technique défile automatiquement jusqu’à l’écran concerné.
  • Placer le curseur sur les différents écrans pour voir comment ils sont reliés les uns aux autres. 
  • Effectuer un zoom et un balayage pour afficher des détails spécifiques. Dans la vue Flux UX, une fois que tous les écrans de la spécification technique sont affichés, il n’est pas possible d’aller plus loin. 
    Raccourcis clavier de zoom :
    • CMD/Ctrl + Molette de la souris
    • CMD/Ctrl + touches +/- pour zoomer/dézoomer
    • CMD+0 pour réinitialiser le zoom

Raccourcis clavier de balayage :
Espace + cliquer et faire glisser, ou Maj + flèche (pour un balayage plus rapide).

  • Autres raccourcis clavier que vous pouvez utiliser :
    • Placer le focus sur un écran et utiliser les flèches gauche et droite pour parcourir les écrans dans la vue Flux UX.
    • Appuyer sur Entrée pour accéder à la vue Spécification. Appuyer sur Echap pour revenir à la vue Flux UX.
  • Cliquer sur le plan de travail pour afficher sa vue détaillée.
  • Cliquer sur Afficher les commentaires pour voir les commentaires de l’utilisateur sur l’écran de spécifications techniques.

Des messages d’aide intégrés à l’application sont là pour vous guider lorsque vous utilisez les spécifications techniques. Les notifications apparaissent au bas de l’écran, avec des conseils sur les fonctions de zoom et balayage, de clic pour copier et de conservation des connexions. 

Inspection des spécifications techniques

La vue par défaut affiche les détails de l’écran, les couleurs, les styles de caractères et les cibles utilisés sur l’écran. Vous pouvez utiliser la flèche réductible pour développer et réduire chaque section.

Vous pouvez aussi cliquer sur le plan de travail pour connaître ses dimensions. 

Dans le panneau Propriétés situé dans la partie droite de l’écran, vous pouvez :

  • Afficher les détails de l’écran, les couleurs uniques et les styles de caractère utilisés sur cet écran, ainsi que le plan de travail cible auquel ils sont liés.
  • Développer ou réduire les options répertoriées dans le panneau Propriétés
  • Lorsque vous placez le curseur sur des couleurs ou des styles de caractères dans le volet droit, vous pouvez voir où ils sont utilisés sur cet écran.
  • Afficher les codes de couleurs hexadécimales et les étiquettes personnalisées pour les couleurs utilisées à l’écran.
  • Afficher sur l’écran les détails des différentes interactions telles que les transitions, les superpositions, la voix et l’animation automatique.
  • Vous pouvez cliquer sur Afficher les commentaires pour voir les commentaires liés au plan de travail. Cliquez sur une couleur ou un style de caractères pour le copier.

Remarque :

Vous ne pouvez afficher les étiquettes personnalisées que si le designer a renommé les noms des étiquettes de couleur dans le panneau Actifs.

Inspection des propriétés du texte, copie de styles de caractère et de contenu, et affichage de mesures
Inspection des propriétés du texte, copie de styles de caractères et de contenu, et affichage de mesures

Révision des spécifications techniques et commentaires

À partir de la version XD 10.0, les spécifications techniques offrent les mêmes fonctionnalités de commentaire que les prototypes. Vous pouvez commenter des spécifications techniques, utiliser une épingle de commentaire pour indiquer l’emplacement exact du commentaire, puis déplacer l’épingle si nécessaire. Lorsque vous y accédez à l’aide d’un lien, le commentaire et ses réponses sont conservés dans leur contexte. L’e-mail de notification de commentaire envoyé à l’auteur fournit également un lien contextuel direct vers le plan de travail. Vos réponses sont visibles lorsque le développeur actualise son navigateur. 

Vous pouvez également épingler ou déplacer vos commentaires pour indiquer des endroits précis dans le plan de travail. Pour épingler un commentaire, cliquez sur Placer une épingle, puis cliquez sur un emplacement sur le plan de travail. Saisissez ensuite votre commentaire, puis cliquez sur Envoyer pour envoyer le commentaire.

 Vous pouvez aussi utiliser Annuler pour supprimer un commentaire ajouté dans le champ de commentaire.

Vous pouvez également passer d’un commentaire ordinaire à un commentaire épinglé. Les e-mails de notification de commentaire fournissent un lien direct vers le plan de travail où se trouve le commentaire, et pas simplement vers le plan de travail de départ.

Options relatives aux commentaires
Options relatives aux commentaires
Commentaires
Options relatives aux commentaires

XD affecte un numéro à chaque commentaire épinglé. Ces numéros sont repris dans le panneau Commentaires, pour que les designers voient facilement à quoi chaque commentaire se rapporte.

L’auteur peut lire les commentaires et les marquer comme résolus lorsqu’il a terminé. Pour consulter vos commentaires résolus, cliquez sur Afficher les commentaires résolus.  Si vous pensez qu’un commentaire n’aurait pas dû être marqué comme résolu, vous pouvez cliquer sur Déplacer vers Non résolus afin qu’il reste ouvert.

Modification des formats de couleur

Vous pouvez modifier les formats de couleur. 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 écrans.

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

Inspection des mesures

Vous pouvez inspecter les mesures des éléments à l’écran. Sélectionnez un élément à l’écran et affichez ses coordonnées de hauteur et de largeur.

Pour déterminer l’espacement entre différents objets, sélectionnez un élément, puis passez le curseur sur d’autres éléments de l’écran pour afficher les distances relatives.

Inspection des mesures des objets
Inspection des mesures des objets

Inspection des propriétés de texte

Vous pouvez également inspecter les propriétés du texte à l’écran. Sélectionnez une ligne de texte et consultez ses styles de caractère. Vous pouvez également copier des styles de caractère, des valeurs de couleur et du contenu à partir des spécifications techniques.

Adobe XD fonctionne sans unités, se concentrant plutôt sur les relations entre les éléments. Par exemple, si vous concevez un plan de travail pour iPhone 6/7 de 375x667 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, la spécification technique ajoute les unités par défaut (comme px, pt ou dp) définies pour la plate-forme aux mesures de base sans unité, 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 vérification des propriétés d’une grille de mise en page

Si le designer a décidé d’utiliser des grilles de mise en page dans sa composition, celles-ci sont visibles lorsque vous consultez un écran en mode Spécification technique. 

Les valeurs indiquées sont celles définies par le designer. Si vous passez la souris sur le libellé d’une propriété, celle-ci est mise en évidence dans l’écran affiché.

Pour faire apparaître les grilles de mise en page, déplacez le curseur correspondant vers la droite. Cette option active les grilles de mise en page pour tous les écrans de la spécification technique. Pour désactiver les grilles de mise en page, redéplacez le curseur vers la gauche. Vous pouvez également contrôler la transparence d’une grille de mise en page à l’aide du curseur Opacité.

Avant de publier le lien des spécifications techniques, veillez à laisser les grilles de mise en page activées dans les plans de travail dans lesquels vous souhaitez que le développeur les voie. Par défaut, si vous n’avez pas utilisé de grilles de mise en page dans votre design, elles n’apparaissent pas dans le lien des spécifications techniques.

Vérification des superpositions

Dans la vue Spécifications techniques, les développeurs peuvent vérifier les connexions superposées dans l’écran de flux UX et appeler la superposition sur l’écran ou le plan de travail d’origine.

Lorsque vous passez la souris sur les plans de travail ou lorsque vous appuyez sur Maj et cliquez sur un plan de travail ou sur un écran, une connexion en pointillés apparaît dans le flux UX pour indiquer que des superpositions ont été appliquées.

Vérification des superpositions
Vérification des superpositions
Connexion en pointillés pour identifier les superpositions
Connexion en pointillés pour identifier les superpositions

Pour vérifier les superpositions appliquées, accédez à la section Superpositions dans le panneau Propriétés et cliquez sur la vignette dans cette section, ou appuyez sur Maj et cliquez sur la zone réactive dans les spécifications techniques. 

Superpositions appliquées
Superpositions appliquées

Vous pouvez vérifier et déduire des informations sur l’écran, les styles et la cible pour la superposition spécifique qui a été 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 la composition pour l’écran.
  • Position de la superposition : affiche la position de la superposition en référence à l’écran d’origine sur le plan de travail de base aux formats px, pt et dp. 
  • Couleurs : affiche les couleurs utilisées aux formats RGBA, 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.
  • Cibles : affiche des informations sur les plans de travail cibles.

Appuyez sur Echap ou sur Fermer la superposition pour revenir au plan de travail d’origine.

Vérification des éléments fixes

Pour vérifier les éléments fixes d’un design, cliquez sur l’icône en forme d’épingle dans le coin supérieur gauche des spécifications techniques. Cette icône indique que des éléments de design ont été fixés sur le plan de travail. 

Vérification des éléments fixes
Vérification des éléments fixes
Position fixe
Position fixe

Affichage et vérification des zones réactives

Pour vérifier les zones réactives dans les spécifications techniques, cliquez sur l’élément affiché dans les sections Superpositions ou Cible, ou appuyez sur Maj et cliquez sur la zone réactive dans les spécifications techniques.

Dans la vue Flux UX, vous avez accès à une vue d’ensemble de tous les écrans qui composent la spécification. À partir de cette vue, vous pouvez cliquer sur les différents écrans et naviguer entre eux.

Navigation entre les écrans
Navigation entre les écrans

Au bas de l’écran, cliquez sur l’icône d’accueil pour revenir à l’écran d’accueil. Vous pouvez également utiliser les flèches gauche et droite pour passer d’un écran à un autre. 

En cliquant sur des objets liés à l’écran, vous pouvez afficher l’écran de destination sur la droite. Cliquez sur l’écran cible pour y accéder.

Pour revenir à la vue Flux UX à partir de la vue Spécification, appuyez sur la touche Echap du clavier.

Extraction d’actifs pour des spécifications techniques

Vous pouvez gagner du temps en permettant aux développeurs d’extraire et de télécharger des actifs à partir des spécifications techniques. Utilisez cette fonctionnalité pour marquer des calques en tant qu’éléments à exporter et les envoyer sous forme de lien de spécifications techniques. Les développeurs peuvent télécharger tous les éléments vectoriels aux formats SVG, PNG, PDF et les éléments bitmap aux formats PNG et PDF.

Marquage de vos actifs dans les spécifications techniques

  1. Ouvrez le panneau Calques et sélectionnez un plan de travail. Placez le curseur de la souris sur un calque et cliquez sur l’icône Marquer pour l’exportation par lot

    Sélection pour l’exportation par lot
    Sélection pour l’exportation par lot

    Remarque :

    Si vous souhaitez sélectionner des actifs spécifiques à partir de certains groupes, cliquez sur l’icône du groupe pour développer le contenu correspondant, puis sélectionnez les actifs.

Partage et téléchargement d’actifs sur le web

Dans les spécifications techniques, vous pouvez fournir aux développeurs un emplacement centralisé pour télécharger tous les actifs sélectionnés et d’autres détails de votre plan de travail. Vous pouvez choisir les actifs afin de partager uniquement cette sélection. Lorsque vous partagez un lien de spécifications techniques avec le développeur, tous les actifs que vous marquez pour l’exportation sont disponibles sur le web pour le développeur. Les spécifications techniques incluent à la fois des éléments bitmap et des images vectorielles.

  1. Suivez les instructions dans la section Marquage de vos actifs dans les spécifications techniques.

  2. Cliquez sur l’icône Partager dans le coin supérieur droit de l’écran et sélectionnez Publier la spécification technique.

    Sélection de l’option Publier la spécification technique
    Sélection de l’option Publier la spécification technique
  3. Dans la boîte de dialogue Publier, sélectionnez l’option Inclure des actifs et affichez le nombre d’actifs marqués. Dans le menu déroulant Exporter pour, sélectionnez la plate-forme vers laquelle exporter la conception, puis cliquez sur Créer un lien public.

    Paramètres de création d’un lien public
    Paramètres de création d’un lien public

    Adaptez en fonction de la plate-forme pour laquelle vous créez ce design : chaque plate-forme dispose d’un ensemble de paramètres de résolution distinct :

    • Web : les actifs sont exportés avec les résolutions 1x et 2x.
    • iOS : les actifs sont exportés avec les résolutions 1x, 2x et 3x. 
    • Android : les actifs sont optimisés et exportés pour les densités d’écran Android suivantes :
      • ldpi - Faible densité (75 %)
      • mdpi - Densité moyenne (100 %)
      • hdpi - Haute densité (150 %)
      • xhdpi - Extra haute densité (200 %)
      • xxhdpi - Extra extra haute densité (300 %)
      • xxxhdpi - Extra extra extra haute densité (400 %)
  4. Cliquez sur l’icône Ouvrir dans le navigateur pour ouvrir le projet dans le navigateur. Sélectionnez un plan de travail pour afficher les actifs. Le navigateur affiche les actifs sélectionnés avec d’autres détails du plan de travail.

    Affichage des actifs sélectionnés dans le navigateur
    Affichage des actifs sélectionnés dans le navigateur

    Lorsque vous survolez les actifs, la sélection contextuelle met en surbrillance l’actif sélectionné en bleu.

    Sélection contextuelle
    Sélection contextuelle
  5. Pour télécharger, sélectionnez un ou plusieurs actifs. Vous pouvez également utiliser Cmd/Ctrl+A pour sélectionner tous les actifs ou utiliser la touche Maj pour en sélectionner plusieurs. Au bas de l’écran, les actifs sont classés comme éléments bitmap et images vectorielles.

    Téléchargement des actifs sélectionnés
    Téléchargement des actifs sélectionnés
  6. Vous pouvez changer le format des images vectorielles en SVG, PDF et PNG, et le format des éléments bitmap en PNG et PDF. Les actifs sont téléchargés sous forme de fichier .zip dans le dossier des téléchargements de votre ordinateur.

  7. Pour télécharger des actifs individuels, lorsque vous sélectionnez un calque marqué en tant qu’actif, utilisez le panneau web Spécifications techniques qui comprend une section Actifs fournissant une option de téléchargement.

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