Dessin de formes dans Adobe XD

Vous souhaitez faire appel à des outils de création de formes pour mettre au point une icône ou un élément de conception ? Alors vous êtes au bon endroit !

Avec XD, créer un visuel devient un véritable jeu d’enfant grâce aux nombreux outils de dessin disponibles dans la barre d’outils. Créez rapidement des icônes ou des graphismes simples avec l’un des outils de création de formes proposés ou, si vous préférez créer des formes ou des objets complexes, choisissez l’outil avancé Plume. 

Lisez la suite de cet article pour découvrir les possibilités infinies offertes par les outils de création de formes et imaginer les éléments de conception qui vous ressemblent.

Dessin avec les outils de création de formes dans XD

Vous débutez dans Adobe XD ?

Télécharger la version d’essai gratuite

Découvrez les bases de l’application

Vous utilisez déjà Adobe XD ?

Mettre à jour votre application

Découvrez les nouveautés

C’est à vous !

Obtenir un fichier d’exemple

Avant de commencer

Familiarisez-vous avec ces concepts de XD :

Tracé

Une forme se compose de plusieurs segments appelés tracés. Un tracé simple est constitué de deux points d’ancrage, qui fonctionnent comme des épingles chargées de maintenir un câble en place.

Points d’ancrage

Les deux extrémités opposées d’un segment sont marquées par des points d’ancrage. Vous pouvez utiliser ces points d’ancrage pour contrôler la longueur et la courbure d’un tracé. La poignée de direction d’un point d’ancrage détermine la direction du tracé.

Nombre d’angles

Nombre de côtés d’un polygone.

Rayon

Le rayon permet d’arrondir les angles d’une forme.

Cadre de sélection

Un cadre de sélection est une bordure rectangulaire autour d’une image, d’une forme ou d’un texte que vous pouvez faire glisser pour le déplacer, transformer, faire pivoter ou redimensionner.

Envie de créer une forme de base ?

Tous les outils de dessin, y compris les outils de formes, sont disponibles dans la barre d’outils du mode Design. Les options de chaque outil sont accessibles dans l’Inspecteur Propriétés sur la droite.


Barre d’outils d’Adobe XD


(Visuels fournis à titre illustratif)

Outil Rectangle (R) : pour créer un rectangle, un rectangle arrondi, un carré ou une forme personnalisée.


Outil Ellipse (E) : pour créer des ellipses et des cercles. Maintenez la touche Maj enfoncée tout en faisant glisser la souris pour que la forme reste parfaitement circulaire.


Outil Polygone (Y) : pour créer un polygone comportant au moins trois côtés (triangle) et pouvant aller jusqu’à 100 côtés (hectogone).

<Insérer image>

Outil Trait (L) : pour créer un segment rectiligne.

Tracer un rectangle ou un carré

Dessin de rectangles et de carrés arrondis
Tracer un rectangle ou un carré

L’outil Rectangle de la barre d’outils vous permet de tracer un rectangle ou un carré. Mais il peut également servir à créer des formes personnalisées.

Pour tracer un rectangle, sélectionnez l’outil Rectangle  dans la barre d’outils, puis faites glisser la souris vers la droite.

Pour contraindre la forme à un carré, il vous suffit de maintenir la touche Maj enfoncée. 

Comment arrondir les angles d’un rectangle ?

Vous pouvez ajuster précisément un rectangle en arrondissant un seul ou plusieurs de ses angles grâce à l’option Rayon.

Ajustement des angles un à un
Ajustement individuel du rayon de chaque angle

Pour modifier le rayon d’un seul angle, maintenez la touche Option/Alt enfoncée, cliquez sur la poignée de rayon  de l’angle à ajuster et tirez vers le centre de la forme.

Vous pouvez également définir une valeur précise pour cet angle dans la zone de texte Rayon différent pour chaque angle, au sein de l’Inspecteur Propriétés.

Ajustement des quatre angles simultanément
Ajustement de tous les angles selon le même rayon

Pour arrondir tous les angles à la fois, faites glisser n’importe quelle poignée de rayon  vers le centre du rectangle.

Vous pouvez également définir une valeur commune à tous les angles dans la zone de texte Même rayon pour tous les angles, au sein de l’Inspecteur Propriétés.

 Il n’est pas possible de modifier le rayon des angles lorsque vous convertissez la forme en tracé.

Tracer un cercle ou une ellipse

L’outil Ellipse permet de tracer des cercles et des ellipses.

Tracer un cercle

Sélectionnez l’outil Ellipse  dans la barre d’outils. Maintenez la touche Maj enfoncée tout en faisant glisser le curseur pour contraindre la forme à un cercle.

Tracer une ellipse

Faites glisser la souris vers la droite. Notez les données de positionnement des objets affichées dans les champs Largeur et Hauteur, ainsi que les axes X et Y dans l’Inspecteur Propriétés.

Tracer un polygone

L’outil Polygone permet de créer toute une série de formes nouvelles, des triangles aux losanges en passant par les pentagones, les étoiles ou encore les cœurs.

Dans la barre d’outils, sélectionnez l’outil Polygone tracez le triangle par défaut.

  • Maintenez la touche Maj enfoncée pour redresser et contraindre le polygone.
  • Pour continuer à modifier la forme depuis l’Inspecteur Propriétés, gardez-la sélectionnée.

Modifier le nombre d’angles et le rayon

Outil Polygone
Utilisez les flèches pour augmenter ou réduire le nombre d’angles.

Dans l’Inspecteur Propriétés associé au polygone, vous pouvez maintenant voir les options Nombre d’angles, Rayon et Nombre d’étoiles.

Utilisez la zone de texte Nombre d’angles  pour modifier le nombre de côtés du polygone. Servez-vous des flèches vers le haut et vers le bas du clavier pour augmenter ou réduire la valeur.

Vous avez besoin d’un polygone aux angles arrondis ? Faites simplement glisser la poignée Rayon  située dans l’angle supérieur du polygone vers le centre. Vous pouvez également spécifier une valeur dans la zone de texte Rayon  de l’Inspecteur Propriétés.

Créer des figures en forme d’étoile ou de cœur

Vous voulez que les utilisateurs puissent noter votre travail ? Vous pouvez ajouter des figures personnalisables en forme d’étoile ou de cœur dans votre design, sans avoir à les créer vous-même.

(Étoile)

(Cœur)

  1. Tracez un polygone sur le plan de travail.
  2. Cliquez sur la poignée Nombre d’étoiles () dans le coin supérieur droit du polygone et faites-la glisser vers le rayon.
    Autre possibilité : dans la zone de texte Nombre d’étoiles  de l’Inspecteur Propriétés, entrez une valeur comprise entre 1 et 100.
  3. Utilisez la zone de texte Nombre d’angles  pour définir le nombre de côtés. Vous pouvez créer une étoile à trois côtés en utilisant la forme triangulaire par défaut et aller jusqu’à 100 côtés.

  1. Tracez un polygone sur le plan de travail.
  2. Dans l’Inspecteur Propriétés, cliquez sur la zone de texte Nombre d’angles , puis tapez le symbole du cœur <3.

 

Tracer une ligne

L’outil Trait permet de tracer des lignes horizontales, diagonales et verticales. Pour créer une ligne diagonale ou verticale, maintenez la touche Maj enfoncée quand vous tracez la ligne.

Tracer une courbe à partir d’une ligne droite

Pour créer une courbe, tracez une ligne et double-cliquez dessus avec l’outil Sélection pour la convertir en tracé. Double-cliquez sur un point d’ancrage pour faire apparaître sa poignée de direction. À présent, faites glisser la poignée dans la direction souhaitée pour obtenir une courbe parfaite. Si vous le souhaitez, ajoutez d’autres points d’ancrage au vecteur.

Modifier des formes

Dans Adobe XD, vous pouvez modifier rapidement des formes depuis un seul et même outil : l’outil Sélection. Dans cette section, voyons ensemble comment créer une bulle de dialogue à l’aide de l’outil Ellipse (bien entendu, vous pouvez choisir la forme qui vous plaît). 

Outil Polygone
Créer une bulle de dialogue à l’aide des outils de forme (toutes les images sont fournies à titre illustratif)

  1. Tracez une ellipse sur le plan de travail.
  2. Cliquez sur l’outil Sélection et double-cliquez sur la forme pour la convertir en tracé. À ce stade, vous pouvez modifier les points d’ancrage. Continuez à modifier les points d’ancrage existants ou cliquez simplement sur le segment du tracé pour en ajouter de nouveaux.
  3. Tracez la queue de la bulle de dialogue en tirant l’un des points d’ancrage dans la direction souhaitée.
    Appuyez sur Echap pour quitter le mode d’édition du tracé. Le cadre de sélection réapparaît et les points d’ancrage sont masqués.

Vidéo : Comment créer des icônes à partir de formes de base ?

« Adobe XD propose des outils de dessin performants et efficaces pour créer toute l’iconographie dont vous avez besoin pour votre charte graphique. » – Dani Beaumont, responsable produit principal, XD.

Pour en savoir plus sur la création de votre propre iconographie à partir de zéro ou sur l’utilisation des bibliothèques d’icônes existantes, regardez cette vidéo de 4 minutes.

Pour regarder un autre tutoriel et récupérer des exemples de fichiers téléchargeables, reportez-vous à la section Création d’icônes avec des formes de base.

Conseils et astuces

Maintenant que vous savez créer des icônes dans XD, voici quelques astuces et conseils pratiques :

  • Vous pouvez modifier la forme par défaut d’un rectangle en la convertissant en tracé. Sélectionnez les deux points d’ancrage du haut en faisant glisser la souris sur les points ou utilisez la touche Maj. Faites glisser l’un des points d’ancrage vers la gauche ou vers la droite, en le gardant aligné sur la position d’origine des points d’ancrage.
  • Lorsque vous tracez des formes, maintenez la touche Option (Mac) ou Alt (Windows) enfoncée pour dessiner une figure à partir du centre.

Pour plus de conseils professionnels sur l’utilisation des outils de dessin dans XD, suivez @Elainecchao, Chef de produit XD, sur Twitter.

Et après ?

Nous vous avons expliqué les bases de la création d’icônes à l’aide des outils de forme de XD. Si vous souhaitez approfondir le sujet et découvrir d’autres fonctionnalités, regardez comment combiner des formes de base pour créer des motifs géométriques uniques.

Même si XD dispose de tous les outils de dessin nécessaires pour créer des illustrations vectorielles, vous pouvez également faire appel à Illustrator et à ses outils avancés. Lisez la suite de cet article pour découvrir les différentes méthodes permettant d’importer des actifs d’Illustrator dans XD.

Vous avez une question ou une suggestion ?

Vous avez une question ou une suggestion ?

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.

 Adobe

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?