Apprenez à utiliser les outils de dessin et de texte d’Adobe XD pour créer des objets graphiques ou textuels.

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, 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 quatre angles simultanément
    Ajustement des quatre angles simultanément
    Ajustement des angles un à un
    Ajustement des angles un à un

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.
    Redimensionnement d’une ellipse
    Faites glisser le curseur pour redimensionner l’ellipse.
    Faites glisser le curseur pour redimensionner le cercle.
    Maintenez la touche Maj enfoncée et faites glisser le curseur pour redimensionner le cercle.

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.

    Remarque :

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

    Remarque :

    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.

    Remarque :

    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. Repositionnez l’outil Plume et faites-le glisser pour créer une courbe avec un deuxième point d’inflexion.

  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. Cliquez sur l’une de ces poignées pour poursuivre le tracé à partir de ce point.

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
Ligne L L
Plume P P
Zoom

Passer en mode Zoom : Z

  • Zoom avant : cliquez n’importe où dans la zone de dessin 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 dessin 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). 

Remarque :

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 dessin, 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
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 dessin 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.

Saisie de texte dans Experience Design
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.

Activer le correcteur d’orthographe
Activer le correcteur d’orthographe

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

Basculement entre texte de point et texte de zone

Vous pouvez basculer entre texte de point et texte de zone d’un simple clic. 

Sélectionnez un objet texte et basculez entre les options Texte de point et Texte de zone dans l’inspecteur Propriétés.

Basculement entre texte de point et texte de zone
Basculement entre texte de point et texte de zone

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 :

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

  • Faire 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 d’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

  • Copier et coller 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.

Redimensionnement d’une zone de texte

Cliquez sur le texte et faites glisser la poignée pour modifier la taille de la police. Cette fonctionnalité est uniquement disponible pour le texte saisi à partir d’un point (et non en paragraphe).

Faites glisser la poignée pour redimensionner le texte.
Faites glisser la poignée pour redimensionner le texte.

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 de l’interlettrage dans un objet de texte
Modification de l’interlettrage dans un objet de 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.

Modification de l’interligne
Modification de l’interligne

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.

 

Définir l’espacement entre les paragraphes
Définir l’espacement entre les paragraphes

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

Soulignement dans XD
Soulignement dans XD

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.

 

Calculs mathématiques
Calculs mathématiques

Remarque :

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.

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