Guide d'utilisation Annuler

Utilisation d’outils de dessin et de texte

  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. Gestion des couleurs
    5. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    6. Notions de base concernant l’espace de travail
    7. Changement de langue dans l’application Adobe XD
    8. Accès aux kits de conception d’interface utilisateur
    9. Accessibilité dans Adobe XD
    10. Raccourcis clavier
    11. Conseils et astuces
  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 de ressources de design
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
    14. Sauvegarde et transfert de ressources XD
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation de ressources de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration de ressources liées vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation de ressources 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 de ressources externes
    2. Utilisation de ressources de design provenant de Photoshop
    3. Copier-coller de ressources 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 créer des graphismes à l’aide des outils de forme et de l’outil Plume dans Adobe XD.

Outils de dessin

Vous pouvez rapidement dessiner des icônes et des images simples dans Adobe XD grâce aux outils de dessin accessibles dans la barre de gauche : rectangle, ellipse, polygone ligne et plume. L’outil de sélection vous permet de sélectionner des lignes, des formes ou des objets spécifiques afin de les modifier.

Vous pouvez ensuite combiner ces formes de différentes manières afin de créer des formes et objets complexes ou de masquer certaines parties d’une forme. Pour en savoir plus sur les techniques de combinaison et de masquage, reportez-vous à la section Modification d’objets à l’aide d’opérations booléennes et de techniques de masquage.

Dessin de rectangles et de carrés

  1. Sélectionnez l’outil Rectangle .

  2. Effectuez l’une des opérations suivantes :

    • Pour dessiner un rectangle, faites glisser le curseur en diagonale jusqu’à ce que le rectangle prenne la taille souhaitée.
    • Pour dessiner un carré, maintenez la touche Maj enfoncée tout en faisant glisser le pointeur en diagonale jusqu’à ce que le carré atteigne la taille souhaitée.
  3. Pour dessiner un rectangle arrondi, tracez un rectangle, puis cliquez dessus pour faire apparaître des poignées permettant de modifier le rayon des angles. Cliquez sur l’une des poignées et faites-la glisser vers le centre du rectangle. Vous pouvez également utiliser l’Inspecteur Propriétés afin de saisir une valeur de rayon spécifique pour un ou plusieurs angles.

    Dessin de rectangles et de carrés arrondis
    Dessin de rectangles et de carrés arrondis

  4. Pour personnaliser davantage votre carré ou rectangle, vous pouvez modifier les rayons des angles.

    • Pour ajuster le rayon d’un seul angle à la fois, effectuez l’une des opérations suivantes :
      • En maintenant la touche Option (Mac) ou Alt (Windows) enfoncée, cliquez sur la poignée de l’angle souhaité et faites glisser la souris.
      • Sélectionnez l’icône  dans l’Inspecteur Propriétés, puis modifiez la valeur du rayon de chaque angle individuellement.
    • Pour ajuster le rayon de tous les angles simultanément, effectuez l’une des opérations suivantes :
      • Cliquez sur un rayon et faites glisser la souris. 
      • Après avoir sélectionné l’icône  dans l’Inspecteur Propriétés, modifiez la valeur du rayon.
    Ajustement des angles un à un
    Ajustement des angles un à un

    Ajustement des quatre angles simultanément
    Ajustement des quatre angles simultanément

Dessin d’ellipses et de cercles

  1. Sélectionnez l’outil Ellipse .

  2. Effectuez l’une des opérations suivantes :

    • Faites glisser la souris en diagonale jusqu’à obtenir la taille qui convient.
    • Pour créer un cercle, maintenez la touche Maj enfoncée tout en faisant glisser la souris.
    Maintenez la touche Maj enfoncée et faites glisser le curseur pour redimensionner le cercle.

Dessin de polygones

L’outil Polygone vous aide à créer une gamme de nouvelles formes, des triangles aux losanges, en passant par des pentagones, des étoiles ou des cœurs.

Outil Polygone
Outil Polygone

  1. Pour commencer à dessiner un polygone, cliquez sur « Y » sur le clavier ou sélectionnez l’icône en forme de triangle dans la Barre d’outils.

  2. Cliquez et faites glisser pour dessiner la forme de la taille souhaitée sur la zone de travail. Vous remarquerez que la forme par défaut est un triangle.

    • Maintenez la touche Majuscule enfoncée tout en dessinant pour créer une forme équilatérale.
    • Utilisez les touches fléchées gauche et droite pendant le dessin pour remplacer le polygone par une forme en étoile.
    • Utilisez les flèches haut et bas du clavier pendant que vous dessinez pour augmenter ou diminuer le nombre de côtés du polygone.
  3. Après avoir créé la forme, vous pouvez modifier le nombre de côtés du polygone à partir de l’Inspecteur Propriétés. Sélectionnez la forme, cliquez sur le champ Nombre de côtés dans l’Inspecteur Propriétés et indiquez le nombre de côtés souhaité.

    Propriétés du polygone
    Propriétés du polygone

    A. Nombre de côtés B. Rayon C. Nombre d’étoiles 

  4. Pour créer une forme d’étoile à l’aide de l’outil Polygone, commencez par dessiner un polygone sur le plan de travail.  Cliquez ensuite sur la poignée du nombre d’étoiles dans le coin supérieur droit du polygone et faites-la glisser vers le rayon. Vous pouvez également ajuster le nombre d’étoiles en cliquant sur le champ Nombre d’étoiles () sous Inspecteur Propriétés. Le nombre d’étoiles peut être une valeur comprise entre 1 et 100. Utilisez le champ Nombre d’angles pour définir le nombre de côtés que vous souhaitez avoir pour le polygone. Vous pouvez dessiner un polygone en étoile à partir d’un triangle régulier et monter jusqu’à un polygone à cent côtés. 

    • Maintenez la touche Maj enfoncée tout en faisant glisser la poignée du nombre d’étoiles pour la modifier par incréments de 10 %. Vous pouvez également placer le curseur sur le champ Nombre d’étoiles et appuyer sur les touches fléchées haut et bas pour contrôler les proportions.
    Propriétés du polygone

  5. Pour créer une forme de cœur, dessinez un polygone sur le plan de travail. Cliquez ensuite sur le champ Nombre d’angles ()
    dans l’Inspecteur Propriétés et tapez <3

  6. Pour modifier le rayon du polygone, cliquez sur la poignée de décoration du rayon et faites-la glisser depuis l’angle supérieur de la forme. Vous pouvez également cliquer sur le champ Rayon dans l’Inspecteur Propriétés et indiquer la valeur souhaitée.

     Chaque forme a une poignée de décoration pour le rayon. Vous ne pouvez pas modifier le rayon sur chaque côté de la forme.

  7. Définissez les propriétés de la forme (Couleur de fond, Épaisseur de la bordure et Couleur, Ombre interne, Ombre portée et Flou d’arrière-plan) pour le polygone. Ces propriétés sont préservées lorsque vous modifiez le nombre de côtés de la forme. 

  8. Double-cliquez sur un polygone pour afficher tous les points d’ancrage de la forme. Vous pouvez créer de nouveaux points d’ancrage en cliquant n’importe où sur le tracé de la forme. 

     Si vous créez ou modifiez les points d’ancrage d’une forme, celle-ci est transformée en tracé et perd alors ses capacités de polygone.

Tracé de lignes

  1. Sélectionnez l’outil Trait .

  2. Placez le curseur à l’endroit où vous souhaitez faire commencer la ligne, puis faites-le glisser jusqu’à l’endroit où vous souhaitez qu’elle se termine.

    Tracé de lignes avec l’outil Trait
    Tracé de lignes avec l’outil Trait

Dessin avec l’outil Plume

La ligne droite est le tracé le plus simple à réaliser avec l’outil Plume. Il suffit de cliquer sur l’outil Plume pour créer deux points d’ancrage. Si vous continuez à cliquer, vous créez un tracé composé de segments rectilignes reliés par des sommets.

  1. Sélectionnez l’outil Plume .

  2. Placez l’outil Plume à l’endroit où vous souhaitez faire commencer le segment rectiligne, puis cliquez pour définir le premier point d’ancrage.

  3. Cliquez de nouveau à l’endroit où doit se terminer le segment (maintenez la touche Maj enfoncée pour contraindre l’angle du segment à un multiple de 45°).

  4. Continuez de cliquer pour définir les points d’ancrage des autres segments rectilignes.

     Pour convertir un point d’ancrage afin d’obtenir une courbe plutôt qu’une ligne droite, ou inversement, double-cliquez sur le point d’ancrage.

    Le dernier point d’ancrage que vous ajoutez apparaît toujours sous la forme d’un cercle plein, ce qui indique qu’il est sélectionné. Les points d’ancrage définis au préalable sont évidés et désélectionnés au fur et à mesure que vous ajoutez d’autres points d’ancrage.

  5. Terminez le tracé en procédant de l’une des façons suivantes :

    • Si vous ne souhaitez pas fermer le tracé, appuyez sur Echap.
    • Pour fermer le tracé, placez à nouveau l’outil Plume sur le premier point d’ancrage (vide). Cliquez ou faites glisser le curseur pour fermer le tracé.
    • Pour sélectionner et faire glisser le point de départ sans fermer le tracé, maintenez la touche Cmd/Ctrl enfoncée.
    Tracé de lignes droites à l’aide de l’outil Plume

Tracé de courbes

Pour créer une courbe, ajoutez un point d’ancrage à l’endroit où la courbe change de sens et faites glisser les lignes directrices contrôlant la forme de la courbe. La longueur et la pente des lignes directrices déterminent la forme de la courbe.

Les courbes se modifient plus facilement, et s’affichent et s’impriment plus rapidement si vous les dessinez avec le moins de points d’ancrage possible. De plus, si vous utilisez trop de points, la courbe risque de présenter des irrégularités non désirées. Vous avez donc plutôt intérêt à espacer autant que possible les points d’ancrage et à modeler la courbe en agissant sur la longueur et l’inclinaison des lignes directrices.

  1. Sélectionnez l’outil Plume .

  2. Placez l’outil Plume à l’endroit où vous souhaitez faire commencer la courbe et maintenez le bouton de la souris enfoncé.

  3. Faites glisser le curseur pour définir l’inclinaison de la courbe tracée, puis relâchez le bouton de la souris.

     Maintenez la touche Maj enfoncée pendant que vous faites glisser le curseur pour que l’outil se limite à des multiples de 15°.

  4. Placez l’outil Plume à l’endroit où la courbe doit se terminer, puis procédez de l’une des façons suivantes :

    • Pour créer une courbe en forme de « C », faites glisser la souris dans la direction opposée à la ligne directrice précédente, puis relâchez le bouton de la souris.
    • Pour créer une courbe en forme de « S », faites glisser la souris dans la même direction que la ligne directrice précédente, puis relâchez le bouton de la souris.
    Tracé de courbes à l’aide de l’outil Plume
    Tracé de courbes à l’aide de l’outil Plume

  5. Pour créer une série de courbes lisses, continuez à faire glisser l’outil Plume vers d’autres endroits.

     Vous pouvez également faire glisser les lignes directrices pour les séparer d’un point d’ancrage.

  6. Terminez le tracé en procédant de l’une des façons suivantes :

    • Pour fermer le tracé, placez à nouveau l’outil Plume sur le premier point d’ancrage (vide). Cliquez ou faites glisser le curseur pour fermer le tracé.
    • Si vous ne souhaitez pas fermer le tracé, appuyez sur Echap.

Dessin de droites suivies de courbes

  1. À l’aide de l’outil Plume (), cliquez pour créer des sommets à deux emplacements et dessiner un segment rectiligne.

  2. Placez l’outil Plume sur l’extrémité sélectionnée. Pour définir l’inclinaison du segment incurvé que vous allez ensuite créer, cliquez sur le point d’ancrage et faites glisser la ligne directrice qui apparaît.

  3. Positionnez l’outil Plume à l’endroit où vous souhaitez placer le point d’ancrage suivant, puis cliquez (et faites glisser le curseur si vous le souhaitez) pour créer le nouveau point d’ancrage et terminer la courbe.

Dessin de courbes suivies de droites

  1. Faites glisser la souris avec l’outil Plume () pour créer le premier point d’inflexion de la courbe, puis relâchez le bouton de la souris.

  2. Placez ensuite l’outil Plume à l’endroit où vous souhaitez terminer la courbe, faites glisser le curseur afin de la terminer, puis relâchez le bouton de la souris.

  3. Placez l’outil Plume sur l’extrémité sélectionnée.

  4. Repositionnez l’outil Plume à l’endroit où vous souhaitez que le segment rectiligne se termine, et cliquez pour le finaliser.

    Dessin de courbes suivies de droites
    Dessin de courbes suivies de droites

Dessin de deux segments incurvés reliés par un sommet

  1. À l’aide de l’outil Plume (), faites glisser le curseur pour créer le premier point d’inflexion d’un segment incurvé.

  2. Pour créer une courbe avec un deuxième point d’inflexion, repositionnez l’outil Plume et faites-le glisser.

  3. Repositionnez l’outil Plume sur le point où vous souhaitez que le second segment incurvé se termine et faites glisser un nouveau point d’inflexion pour finaliser ce segment incurvé.

Mode Dessin ou Édition

Pour basculer entre le mode Dessin et le mode Édition, appuyez sur la touche Echap.

Vous pouvez également accéder au mode d’édition de tracé en double-cliquant sur la forme ou le tracé. Dans ce mode, les points d’ancrage de la forme sont visibles, mais lorsque vous déplacez la souris, cela ne crée pas de dessin. Ainsi, vous pouvez manipuler les points d’ancrage ou de contrôle existants, mais aussi insérer de nouveaux points d’ancrage sur des segments existants du tracé.

Lorsque vous dessinez avec l’outil Plume, vous pouvez effectuer toutes les modifications décrites ci-dessus, mais aussi tracer de nouveaux segments.

Prolongation de tracés existants

Lorsque vous sélectionnez l’outil Plume, des poignées s’affichent au niveau des extrémités de tous les tracés du plan de travail sur lequel se trouve la souris. Pour poursuivre le tracé à partir de ce point, cliquez sur l’une des poignées.

Si vous choisissez de prolonger une figure fermée, le tracé est rouvert, puis l’outil Plume passe en mode dessin pour ce tracé.

Sélection de points d’ancrage

Double-cliquez sur le dessin pour afficher ses points d’ancrage. Vous pouvez alors cliquer sur un point d’ancrage afin de le sélectionner. Pour sélectionner plusieurs points d’ancrage, maintenez la touche Maj enfoncée et sélectionnez les points concernés, ou utilisez un rectangle de sélection afin d’inclure tous les points d’ancrage souhaités.

Vous pouvez déplacer les points d’ancrage sélectionnés à l’aide du clavier, les faire glisser en utilisant la souris, ou encore modifier leurs propriétés (abscisses et ordonnées) dans l’Inspecteur Propriétés.

Désactivation de l’alignement des points d’ancrage

Lorsque vous placez un nouveau point d’ancrage ou en faites glisser un existant, des lignes d’alignement vertical ou horizontal apparaissent lorsqu’il se trouve à proximité d’un autre point d’ancrage. Pour désactiver l’alignement des points d’ancrage, maintenez la touche Cmd /Ctrl enfoncée.

Ajout et modification de points d’ancrage

Double-cliquez sur le dessin pour le sélectionner et afficher les points d’ancrage existants. Cliquez sur le tracé pour ajouter de nouveaux points d’ancrage au niveau du curseur.

Ajout et modification de points d’ancrage
Ajout et modification de points d’ancrage

Suppression de points d’ancrage

Sélectionnez les points d’ancrage concernés, puis appuyez sur la touche Suppr.

Raccourcis de dessin

Outil de dessin

Raccourci clavier sous MacOS

Raccourci clavier sous Windows

Sélection

V

V

Rectangle

R

R

Ellipse

E

E

Polygone

Y

Y

Ligne

L

L

Plume

P

P

Zoom

Passer en mode Zoom : Z

  • Zoom avant : cliquez n’importe où dans la zone de travail d’Adobe XD, ou cliquez sur le plan de travail souhaité. Vous pouvez également utiliser le rectangle de sélection pour zoomer sur une zone précise.
  • Zoom arrière : cliquez tout en maintenant la touche Option enfoncée.

Pour activer temporairement les fonctions de zoom avant et arrière :

  • Appuyez sur Espace+Commande, puis cliquez sur la zone du plan de travail ou appliquez un rectangle de sélection sur la partie que vous souhaitez agrandir.
  • Appuyez sur Espace+Commande+Option pour dézoomer.

Passer en mode Zoom : Z

  • Zoom avant : cliquez n’importe où dans la zone de travail d’Adobe XD, ou cliquez sur le plan de travail souhaité. Vous pouvez également utiliser le rectangle de sélection pour zoomer sur une zone précise.
  • Zoom arrière : cliquez tout en maintenant la touche Alt enfoncée.

Pour activer temporairement le zoom avant :

  • Appuyez sur Espace + Ctrl, puis cliquez sur la zone du plan de travail ou appliquez un rectangle de sélection sur la partie que vous souhaitez agrandir.

Zoomer sur la sélection

⌘3

Ctrl + 3

Mesure de distances

Pour mesurer la distance entre un objet et le bord du plan de travail, ou entre plusieurs objets, cliquez sur l’objet concerné et appuyez sur la touche Option (sous Mac) ou Alt (sous Windows). 

 Si l’objet sélectionné n’est pas de forme carrée ou rectangulaire, XD trace un cadre de sélection autour de cet objet. Les mesures affichées correspondent à la distance par rapport au cadre de sélection.

Pour mesurer la distance entre un objet et les bords du plan de travail :

Il vous suffit de cliquer sur l’objet et d’appuyer sur la touche Option (sous Mac) ou Alt (sous Windows).

Adobe XD mesure les distances et affiche les résultats aussi longtemps que vous gardez la touche Option ou Alt enfoncée.

Mesure de la distance entre un objet et le bord d’un plan de travail
Mesure de la distance entre un objet et le bord d’un plan de travail

Pour mesurer la distance entre un objet et d’autres objets du plan de travail :

Cliquez sur l’objet, appuyez sur la touche Option (sous Mac) ou Alt (sous Windows) et faites passer la souris sur les autres objets.

Adobe XD mesure la distance entre les contours les plus proches des deux objets et affiche les résultats aussi longtemps que vous gardez la touche Option ou Alt enfoncée.

Mesure de la distance entre deux objets
Mesure de la distance entre deux objets

Outils de texte

Saisie de texte à partir d’un point

Sélectionnez l’outil Texte, puis cliquez à l’endroit où vous souhaitez faire commencer votre texte. Saisissez le texte, puis appuyez sur la touche Echap pour valider vos modifications ou sur la touche Retour pour passer à la ligne suivante.

Lorsque vous tapez du texte en sélectionnant un point sur la zone de travail, vous obtenez une ligne de texte horizontale, commençant à l’endroit où vous avez cliqué et s’allongeant à mesure que vous tapez. Chaque ligne de texte est indépendante : elle s’allonge ou se réduit à mesure que vous la modifiez, sans toutefois passer à la ligne suivante. Cette méthode de saisie des données est pratique lorsque vous souhaitez, par exemple, ajouter un commentaire à une illustration.

Saisie de texte à partir d’un point

Vous pouvez saisir du texte superposé sur d’autres objets ; pour vous assurer qu’il sera au premier plan, utilisez les options proposées sous Objet > Disposition.

Saisie de texte dans une zone

Sélectionnez l’outil Texte, puis cliquez à l’endroit de la zone de travail où vous souhaitez placer le texte. Faites glisser le curseur afin de définir la zone de texte. Ensuite, cliquez à l’intérieur de la zone pour commencer à taper le texte.

Quand vous définissez une zone de texte, ce sont les contours de l’objet qui déterminent la disposition des caractères, verticalement ou horizontalement. Lorsque le texte atteint une limite, il s’adapte automatiquement à la zone définie en passant à la ligne. Ce mode de saisie est utile pour créer un ou plusieurs paragraphes, par exemple pour une brochure.

Cliquez sur l’outil Texte et commencez à saisir du texte.

Vérification orthographique

À partir du menu Édition, sélectionnez Activer le correcteur d’orthographe. La fonctionnalité de vérification orthographique fonctionne uniquement sur le texte incorrect dans le conteneur de texte. Les mots mal orthographiés sont soulignés en rouge et les mots corrigés automatiquement sont soulignés en bleu. Les erreurs grammaticales sont surlignées en vert.

Activation de l’option d’orthographe et de grammaire
Activation de l’option d’orthographe et de grammaire

Cliquez avec le bouton droit sur le mot mal orthographié et sélectionnez l’orthographe correcte dans la liste proposée.

Sélectionner le mot correctement orthographié
Sélectionner le mot correctement orthographié

Pour annuler la correction automatique et rétablir l’orthographe que vous avez initialement saisie, appuyez sur Cmd + Z sous Mac OS et Ctrl + Z sous Windows OS.

Annuler la correction automatique
Annuler la correction automatique

Ajouter l’orthographe
Ajouter l’orthographe

Importation de texte depuis des fichiers texte

Vous pouvez facilement insérer du texte écrit à l’avance sur votre plan de travail en optant pour l’une des méthodes suivantes :

  • Faites glisser un fichier texte sur le plan de travail.

Vous pouvez facilement insérer du texte écrit à l’avance dans votre design en faisant glisser un fichier de texte brut vers le plan de travail. Cela crée une zone de texte sur le plan de travail, dont le contenu correspond à celui du fichier texte.          

  • Faites glisser un fichier texte sur une grille de répétition.

Vous pouvez également faire glisser un fichier texte (incluant des retours à la ligne) sur un élément de texte dans une grille de répétition. Tous les éléments de texte sont alors complétés avec le texte provenant de ce fichier.

Pour en savoir plus, reportez-vous à la section Déplacement d’un fichier texte séparé par des retours à la ligne sur un objet de texte dans une grille de répétition

  • Copiez et collez du texte sur le plan de travail.

Vous pouvez aussi copier et coller du texte sur le plan de travail : cela crée une zone de texte que vous pouvez facilement déplacer et modifier dans Adobe XD.

Options de redimensionnement du texte

XD propose trois options de redimensionnement du texte qui vous permettent de développer la largeur de la zone de texte pour l’adapter au contenu d’une seule ligne, d’ajuster dynamiquement la hauteur de la zone de texte et de contrôler la largeur et la hauteur de la zone de texte.

Selon vos besoins en matière de conception, sélectionnez un objet de texte et choisissez entre les options Largeur automatique, Hauteur automatique et Taille fixe dans l’Inspecteur des propriétés.

Basculement entre texte de point et texte de zone
Options de redimensionnement du texte

Largeur automatique

Lors de l’ajout de texte dans des cadres, des images et des objets, vous pouvez étendre la largeur de la zone de texte au maximum et ajuster le texte sur une seule ligne.

Pour activer la largeur automatique, sélectionnez l’icône  dans l’Inspecteur des propriétés.

Largeur automatique

Hauteur automatique

Lors de la conception d’une application contenant une grande quantité de texte ou lors de la création de designs réactifs en combinaison avec des piles, vous pouvez ajuster dynamiquement la hauteur du texte de la zone sans modifier sa largeur.

Le texte à hauteur automatique permet au texte de la zone d’ajuster automatiquement sa hauteur en fonction du contenu. Lorsque vous dessinez un texte de zone, cette option est activée par défaut. 

Texte à hauteur automatique

Pour activer manuellement le texte à hauteur automatique, vous pouvez soit double-cliquer sur la poignée de redimensionnement du bas, soit sélectionner l’icône dans l’inspecteur Propriétés.

Taille fixe

Lorsque vous ajoutez du texte dans vos conceptions (brochures, sites web, par exemple), vous pouvez ajouter un ou plusieurs paragraphes et contrôler la largeur et la hauteur de votre zone de texte. La taille fixe vous permet de placer le texte à l’intérieur de la zone de texte et de le recadrer automatiquement lorsqu’il dépasse la hauteur. 

Pour activer la taille fixe, sélectionnez l’icône  dans l’Inspecteur des propriétés. Cliquez et faites glisser les poignées de redimensionnement de tous les côtés pour redimensionner le texte d’une zone. Lorsque le texte à l’intérieur d’une zone de texte ne tient pas, XD le signale avec une poignée de redimensionnement inférieure rouge.

Pour redimensionner rapidement la zone de texte de façon à l’adapter au contenu, double-cliquez sur la poignée de redimensionnement inférieure de la zone de texte.

redimensionner-poignée

Mise en forme du texte

Cliquez sur le texte, puis spécifiez le type, la taille de police et l’alignement du texte à l’aide de l’Inspecteur Propriétés.

Vous pouvez également sélectionner quelques mots ou caractères au sein d’un bloc de texte pour mettre en forme ces parties uniquement.

Mise en forme d’un objet texte dans son ensemble ou de différentes parties du texte
Mise en forme d’un objet texte dans son ensemble ou de différentes parties du texte

Modification de l’espacement des caractères, lignes et paragraphes

Pour modifier l’espacement des caractères (interlettrage), cliquez sur l’objet de texte, puis indiquez la valeur de votre choix via l’option Interlettrage de l’Inspecteur Propriétés.

Pour modifier l’interlettrage d’une partie du texte seulement, sélectionnez ce texte et modifiez le paramètre en millimètres via l’Inspecteur Propriétés.

Modification du caractère et de l’interligne du texte dans un objet texte
Modification du caractère et de l’interligne du texte dans un objet texte

Pour modifier l’interligne, cliquez sur la zone de texte, puis indiquez la valeur de votre choix via l’option Interligne de l’Inspecteur Propriétés.

Pour rétablir la hauteur de ligne par défaut, saisissez 0 au niveau de l’option Interligne de l’Inspecteur Propriétés.

Tout comme Photoshop et InDesign, Adobe XD vous permet de modifier l’espace avant et après les paragraphes compris dans le même élément de texte.

Pour modifier l’espacement des paragraphes, sélectionnez un paragraphe et cliquez sur l’icône de paragraphe dans le panneau Mise en forme. Modifiez la valeur de l’espacement selon les besoins.

 

Transformations de texte

Pour appliquer l’une des transformations de texte, sélectionnez le texte que vous souhaitez modifier. Dans l’Inspecteur Propriétés, sélectionnez l’une des options suivantes :

  • Icône Majuscules (TT) pour mettre le texte en majuscules.
  • Icône Minuscules (tt) pour mettre le texte en minuscules.
  • Icône Première lettre des mots en majuscules (Tt) pour appliquer une majuscule à la première lettre des mots. 
  • Icône Texte en exposant pour mettre le texte en exposant.
  • Icône Texte en indice pour mettre le texte en indice.
Transformations de texte
Transformations de texte

Soulignement de texte

Pour souligner du texte, cliquez sur la zone de texte, puis sur l’icône Souligner dans l’Inspecteur Propriétés. XD trace un trait de soulignement continu qui passe derrière les jambages des lettres (pour un résultat plus esthétique).

Texte barré

Pour barrer du texte, sélectionnez la zone de texte puis, dans l’Inspecteur Propriétés, cliquez sur l’icône Barré. Une ligne régulière est tracée au centre du texte, ce qui donne l’impression qu’il a été barré.    

Modification des style globaux

Pour modifier facilement les styles globaux, appliquez une transformation de texte ou un texte barré aux Styles de caractère.

Dans le panneau Actifs, enregistrez un style que vous utilisez dans tout document en tant que style de caractère. Ensuite, faites un clic droit sur le style de caractère et sélectionnez l’option Modifier dans le menu déroulant. Choisissez l’une des options suivantes : Majuscules, Minuscules, Première lettre des mots en majuscules ou Barré. Le texte utilisant ce style de caractère sera alors modifié dans tout le document. 

Création de designs précis à l’aide de calculs mathématiques

Utilisez des calculs mathématiques pour créer des designs avec une plus grande précision, pour déplacer des objets vers un nouvel emplacement ou pour modifier la largeur et la hauteur.

Sélectionnez un ou plusieurs objets. Dans l’Inspecteur Propriétés, vous pouvez réaliser des opérations mathématiques simples dans tous les champs qui acceptent les valeurs numériques. Adobe XD prend en charge les opérateurs mathématiques +, -,/, * pour calculer les modifications.

Par exemple, si vous voulez déplacer l’objet sélectionné de 3 unités vers la droite en utilisant les unités de mesure actuelles, entrez +3 après la valeur actuelle.


Dans une zone de texte de l’Inspecteur Propriétés acceptant les valeurs numériques, effectuez l’une des opérations suivantes :

  •   Pour remplacer l’ensemble de la valeur actuelle par une expression mathématique, sélectionnez la valeur.
  •   Pour utiliser la valeur actuelle dans une expression mathématique, cliquez avant ou après cette valeur.

 

 Adobe XD ne peut effectuer qu’une seule opération à la fois. Autrement dit, il peut gérer « 4in + 2p », mais pas « 4in + 2p-1p » car ce calcul contient deux opérations différentes.

Vidéo : Comment utiliser le texte à hauteur automatique ?

« Le conteneur du texte à hauteur automatique ajuste automatiquement la hauteur, en fonction de la quantité de texte qu’il contient. Cette fonctionnalité s’adapte également à merveille avec les fonctionnalités de mise en page sensibles au contenu, comme les piles et le remplissage » – Dani Beaumont, responsable produit principal, Adobe XD.

Regardez cette vidéo pour en savoir plus sur l’utilisation du texte à hauteur automatique.

Temps de visionnage : 3 minutes.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?