Apprenez à structurer les interfaces utilisateur de manière efficace et précise. Utilisez les grilles et les repères pour accélérer la conception et gagner en précision.

Les plans de travail représentent chacun des écrans que vous souhaitez créer dans le cadre de votre site web ou application mobile.

Vous pouvez avoir plusieurs plans de travail dans un seul fichier Adobe XD. Par exemple, vous pouvez choisir de définir, au sein d’un même fichier, des plans de travail destinés à une expérience web pour mobile, tablette et ordinateur. Vous pouvez également choisir de créer, dans un seul fichier, plusieurs écrans de flux utilisateur pour une même plate-forme.

Vous pouvez opter pour une taille de plan de travail prédéfinie au début de votre projet, depuis l’écran d’accueil. Si vous ne souhaitez pas utiliser les paramètres prédéfinis, vous pouvez créer un plan de travail à la taille de votre choix. Une fois votre nouveau fichier créé avec la taille de plan de travail souhaitée, vous pouvez ajouter autant de plans de travail que nécessaire à l’aide de l’outil Plan de travail.

Plusieurs plans de travail pour divers écrans dans un seul fichier XD
Plusieurs plans de travail pour divers écrans dans un seul fichier XD

Pour voir tous les plans de travail de votre projet, ouvrez le panneau Calques (cliquez sur  dans la barre d’outils). 

Création de plans de travail

Lorsque vous créez un projet ou un fichier pour la première fois, vous pouvez choisir la taille du plan de travail parmi les formats prédéfinis dans l’écran d’accueil. Pour spécifier une taille personnalisée, sélectionnez l’option Personnalisé et indiquez la taille en pixels.

Pour ajouter des plans de travail supplémentaires à un fichier existant, cliquez sur l’outil Plan de travail. Sélectionnez ensuite l’un des paramètres prédéfinis dans le panneau de droite et cliquez à l’endroit où vous souhaitez insérer le plan de travail.

Pour personnaliser la taille du plan de travail, sélectionnez l’outil correspondant, puis dessinez le plan de travail souhaité directement dans la zone de la table de montage.

Création de plans de travail défilants

Lorsque vous créez un design XD, il arrive parfois qu’un plan de travail ne soit pas suffisamment long pour s’adapter à votre contenu. En rallongeant un plan de travail et en choisissant des options en fonction de vos besoins de conception, vous pouvez faire défiler verticalement un plan de travail pour l’adapter à différentes tailles d’appareils.

Le défilement vertical vous aide à simuler des effets de défilement lors de la conception de listes déroulantes défilantes ou de sites Web, mais le défilement horizontal n’est pas pris en charge dans XD.  Pour plus d’informations, reportez-vous à la section Création de plans de travail défilants.

Sélection de plans de travail

Pour sélectionner un plan de travail, cliquez sur l’outil de sélection et effectuez l’une des actions suivantes :

  • Cliquez sur le titre du plan de travail, ou 
  • Double-cliquez sur l’arrière-plan du plan de travail

Copie et redimensionnement de plans de travail

Sous Mac, maintenez la touche Option enfoncée et faites glisser un plan de travail pour le copier. Sur Windows, maintenez la touche Alt enfoncée et faites glisser un plan de travail.

Vous pouvez également faire un clic droit sur le nom du plan de travail dans le panneau Calques, puis sélectionner Copier. Refaites un clic droit, puis sélectionnez Coller.

Pour redimensionner un plan de travail, cliquez dessus et utilisez les poignées circulaires qui apparaissent sur les bords.

Réorganisation de plans de travail

Cliquez sur le titre du plan de travail et faites-le glisser vers le nouvel emplacement. 

Remarque :

Dans le panneau Calques, vous pouvez faire glisser les plans de travail pour les réorganiser au sein de la liste Plans de travail. Cette opération modifie seulement l’ordre de superposition des plans de travail, pas leur position (coordonnées X et Y).

Changement du nom d’un plan de travail

Par défaut, les plans de travail sont nommés d’après le paramètre prédéfini sélectionné et numérotés de manière séquentielle. Pour personnaliser le nom d’un plan de travail, cliquez deux fois sur son titre et entrez le nom souhaité.

Vous pouvez également renommer les plans de travail dans le panneau Calques. Cliquez deux fois ou cliquez avec le bouton droit sur le titre du plan de travail et sélectionnez Renommer

Alignement et répartition de plans de travail

Sélectionnez plusieurs plans de travail via le rectangle de sélection, puis cliquez sur les options d’alignement et de répartition dans l’inspecteur Propriétés.

Alignement et répartition de plusieurs plans de travail
Alignement et répartition de plusieurs plans de travail

Copie et déplacement d’éléments entre des plans de travail

Vous pouvez librement déplacer n’importe quel élément d’un plan de travail à un autre. Il suffit de le faire glisser et de le déposer sur le plan de travail souhaité.

Pour copier un élément, utilisez la combinaison Cmd+C (sous Mac) ou Ctrl+C (sous Windows). Cliquez sur le plan de travail dans lequel vous souhaitez coller l’élément et appuyez sur les touches Cmd+V (sous Mac) ou Ctrl+V (sous Windows).

Vous pouvez également faire glisser un élément tout en maintenant la touche Option (Mac) ou Alt (Windows) enfoncée pour dupliquer des éléments.

Vous pouvez également utiliser l’option Position fixe pour fixer la position des éléments tels que les en-têtes et les pieds de page sur un plan de travail défilant ou des éléments fixes flottants. En mode de création de prototype, l’icône représentant une épingle indique les éléments fixes. Vous pouvez les superposer au-dessus ou en dessous d’autres objets de la composition. 

 

Remarque :

Si la taille d’une collection d’objets n’est pas adaptée au plan de travail dans lequel vous souhaitez la coller, ces objets sont collés au centre du plan de travail cible.

Vous pouvez utiliser la zone grise autour des plans de travail comme table de montage. Vous pouvez placer n’importe quel élément dans la table de montage et le copier ou le déplacer vers les plans de travail selon vos besoins. 

Remarque :

Lorsque vous exportez tous les plans de travail, les éléments qui se trouvent dans la table de montage et n’appartiennent à aucun plan de travail ne sont pas exportés. Si un élément est partiellement placé sur un plan de travail, seule la partie qui se trouve sur le plan de travail est exportée.

Coupe, copie, déplacement, redimensionnement, zoom et suppression de plusieurs plans de travail simultanément

Pour modifier simultanément plusieurs plans de travail, sélectionnez-les à l’aide de l’outil Rectangle de sélection. 

Plusieurs plans de travail sélectionnés simultanément
Plusieurs plans de travail sélectionnés simultanément

Utilisez l’outil de sélection pour tracer un rectangle autour des plans de travail à sélectionner.

Lorsque vous sélectionnez plusieurs plans de travail, assurez-vous de bien les sélectionner entièrement. Si un plan de travail n’est que partiellement couvert, ce sont ses objets qui seront sélectionnés et non le plan de travail lui-même.

Un cadre de sélection apparaît autour des plans de travail sélectionnés. 

Redimensionner

Pour redimensionner les plans de travail sélectionnés, faites glisser les poignées du cadre de sélection.

Couper, copier et coller

 Appuyez sur la touche Ctrl et cliquez sur la sélection (sous Mac) ou faites un clic droit (sous Windows) pour ouvrir le menu contextuel permettant de couper, copier et coller tous les plans de travail sélectionnés.

Supprimer

Appuyez sur la touche Suppr du clavier, ou utilisez la combinaison Ctrl+clic (Mac) ou un clic droit (Windows) pour afficher un menu permettant de supprimer les plans de travail sélectionnés. Vous pouvez également sélectionner un ou plusieurs plans de travail dans le panneau Calques, faire un clic droit, puis sélectionner Supprimer.

Zoom Pour passer en mode Zoom, cliquez sur l’icône Zoom dans la barre d’outils ou appuyez sur la touche Z du clavier. Une fois le mode Zoom activé, vous avez deux possibilités :

  • Zoom avant : cliquez n’importe où dans la zone de travail de 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 : Option + clic (Mac) ou Alt + clic (Windows).

Pour zoomer ou dézoomer rapidement sans réellement passer en mode Zoom, vous pouvez activer temporairement ce dernier :

  • Zoom avant : appuyez sur Espace + Cmd (Mac) ou Espace + Ctrl (Windows), puis cliquez sur la zone du plan de travail ou appliquez un rectangle de sélection sur la partie que vous souhaitez agrandir
  • Zoom arrière : appuyez sur Espace + Cmd + Option

Pour zoomer sur des objets spécifiques du plan de travail, sélectionnez-les, puis cliquez sur Affichage > Zoomer sur la sélection ou appuyez sur ⌘ 3 sous Mac. Sous Windows, utilisez le raccourci clavier Ctrl+3.

Utilisation des repères personnalisés du plan de travail

Les repères personnalisés du plan de travail vous aident à positionner et à mettre en page des objets sur la zone de travail avec précision, en les alignant facilement sur les repères de plusieurs plans de travail. Vous pouvez créer des repères, ajuster leur position, les copier-coller sur plusieurs plans de travail, les supprimer, les verrouiller ou masquer leur visibilité.

Repères personnalisés du plan de travail
Repères personnalisés du plan de travail

Créer un repère : pour créer un repère à la verticale, passez la souris sur le bord gauche du plan de travail. Une flèche double apparaît. Faites glisser l’icône en forme de flèche vers le plan de travail afin de créer un repère, puis relâchez-la pour la positionner sur le plan de travail. Afin de créer un repère horizontal, faites glisser l’icône de la flèche à partir du bord supérieur du plan du travail. Lorsque vous créez un repère, la distance entre le repère et les bords du plan de travail ou les autres repères, ainsi que la position absolue du repère sur la zone de travail sont affichées.

Au moment de la création, les repères s’alignent sur les objets sélectionnés ou les objets de niveau supérieur dessinés sur la zone de travail. Pour désactiver temporairement ce magnétisme, appuyez sur Cmd (sous Mac) ou Ctrl (sous Win).

Appuyez sur la touche Maj lors de la création du repère pour le positionner sur la zone de travail par incréments de 10 px.

Copier-coller les repères : afin de copier des repères à partir d’un plan de travail, sélectionnez le plan de travail et cliquez sur l’option Affichage dans la barre de menu supérieure. Cliquez sur l’option Repères dans la liste déroulante et sélectionnez Copier les repères. Tous les repères du plan de travail sélectionné sont copiés.

Pour coller les repères, sélectionnez le plan de travail sur lequel vous souhaitez coller les repères. Cliquez sur Cmd+v (sous Mac) ou Ctrl+v (sous Win) pour coller les repères. Vous pouvez également cliquer sur l’option Affichage de la barre de menu supérieure (sous Mac), ou faire un clic droit sur le plan de travail (sous Windows), et sélectionner l’option Repères dans la liste déroulante, puis cliquer sur Coller les repères.

La copie d’un plan de travail duplique également les repères créés sur ce plan de travail.

Copier et coller les repères
Copier et coller les repères

Effacer les repères : afin de supprimer un repère, cliquez dessus et faites-le glisser hors du plan de travail. Pour supprimer tous les repères d’un plan de travail, sélectionnez le plan de travail et cliquez sur l’option Affichage de la barre du menu supérieure (sous Mac) ou faites un clic droit sur le plan de travail (sous Win). Cliquez sur l’option Repères dans la liste déroulante et sélectionnez Effacer les repères.

Masquer les repères : l’option Masquer tous les repères désactive la visibilité des repères sur tous les plans de travail et désactive la création de repères. Sélectionnez le plan de travail et cliquez sur Cmd+; (sous Mac), ou Ctrl+; (sous Win), pour masquer les repères. Vous pouvez également cliquer sur l’option Affichage de la barre de menu supérieure (sous Mac), ou faire un clic droit sur le plan de travail (sous Windows), et sélectionner l’option Repères dans la liste déroulante, puis cliquer sur Masquer tous les repères.    

Verrouiller les repères : l’option Verrouiller tous les repères vous permet de verrouiller les repères sur tous les plans de travail. Lorsque les repères sont verrouillés, vous pouvez toujours créer des repères et aligner des objets par rapport à eux, mais vous ne pouvez pas modifier la position des repères sur la zone de travail. Pour verrouiller les repères, appuyez sur Maj+Cmd+; (sous Mac) et Maj+Ctrl+; (sous Win). Vous pouvez également cliquer sur l’option Affichage de la barre de menu supérieure (sous Mac), ou faire un clic droit sur le plan de travail (sous Windows), et sélectionner l’option Repères dans la liste déroulante, puis cliquer sur Verrouiller tous les Repères.

Positionnement d’éléments sur le plan de travail à l’aide des grilles

XD vous propose deux options de grille : les grilles quadrillées et les grilles de mise en page. 

Grilles quadrillées

Les quadrillages constituent des repères sur lesquels vous pouvez aligner les objets et le texte. Lorsque vous dessinez, les objets sont automatiquement alignés sur la grille dès lors que leurs bords se trouvent dans la zone de magnétisme de la grille.

Les grilles quadrillées vous donnent aussi une idée approximative des mesures lorsque vous disposez des objets ou du texte sur vos plans de travail. 

Grilles quadrillées dans XD
Grilles quadrillées dans XD

Grilles de mise en page

Vous pouvez utiliser des grilles de mise en page pour définir des colonnes dans XD. Une grille de mise en page vous aide à définir la structure sous-jacente de votre design et la manière dont chacun de ses composants répond aux différents points d’arrêt (pour les designs réactifs).

Une fois la grille de mise en page appliquée à un plan de travail, vous pouvez y accrocher des éléments. Cependant, si le plan de travail est redimensionné ou si la grille est ajustée, les éléments épinglés ne sont pas redimensionnés ni redistribués.

Grilles de mise en page dans XD
Grilles de mise en page dans XD

Afficher ou masquer les grilles

Sélectionnez un plan de travail et effectuez l’une des opérations suivantes :

  • Sous Mac : choisissez Affichage > Afficher la grille de mise en page ou Affichage > Afficher le quadrillage.
  • Sous Mac ou Windows : dans l’inspecteur Propriétés, sélectionnez un type de grille dans la liste déroulante Grille, puis sélectionnez la case à cocher en regard.
  • Raccourcis clavier : 
    • Afficher le quadrillage : 
      • Sous Mac : ⌘ ’  
      • Sous Windows : Ctrl + ’
    • Afficher la grille de mise en page :
      • Sous Mac : ⇧ ⌘ ’
      • Sous Windows : Ctrl + Tab
Définir un quadrillage ou une grille de mise en page dans XD
Définir un quadrillage ou une grille de mise en page dans XD

Pour masquer la grille, désactivez la case à cocher Grille.

Définir les préférences de grille quadrillée

Les options de grille quadrillée permettent de modifier l’espacement d’une grille et d’ajuster sa couleur. Il est possible d’enregistrer un ensemble d’options de grille par défaut, pour pouvoir les réutiliser rapidement par la suite. Pour en savoir plus, reportez-vous à la section Préférences par défaut des grilles quadrillées ou de mise en page.

Remarque :

XD utilise un pixel virtuel pour la plupart de ses mesures et tailles de police, ce qui correspond à la même unité qu’un pixel CSS ou aux mesures sous iOS. Ce pixel virtuel équivaut à peu près à un pixel physique sur un moniteur 72 ppp. À l’heure actuelle, il n’est pas possible de modifier l’unité de mesure dans XD.

Modifier la taille de la grille

Pour modifier la taille de la grille, ajustez la valeur d’espacement dans l’inspecteur Propriétés. Plus ce nombre est petit, plus la grille est dense. 

Accrocher des objets à une grille quadrillée

Pour aligner un objet sur une grille, faites-le glisser dessus jusqu’à ce que l’un de ses bords entre dans la zone de magnétisme de la grille.

Alignement sur la grille pendant le tracé d’objets
Alignement sur la grille pendant le tracé d’objets

Si vous ne souhaitez pas que les objets soient alignés sur la grille, maintenez la touche Cmd (sous Mac) ou Ctrl (sous Windows) enfoncée pendant que vous dessinez un objet avec la souris.

Définir les préférences de grille de mise en page

Lorsque vous activez une grille de mise en page, XD affiche intelligemment des colonnes adaptées à la nature du plan de travail. Par exemple, un plan de travail pour téléphone inclura des colonnes plus étroites et moins nombreuses qu’une grille de mise en page par défaut pour tablette.

Si vous redimensionnez un plan de travail, la largeur des colonnes de la grille de mise en page s’adapte aux nouvelles dimensions du plan de travail. Les objets placés sur le plan de travail restent identiques et ne conservent pas leur relation avec les colonnes.

Comportement de la grille de mise en page lorsque vous modifiez la taille du plan de travail
Comportement de la grille de mise en page lorsque vous modifiez la taille du plan de travail

Vous pouvez définir vos préférences en matière de nombre de colonnes, largeur des colonnes, couleur des colonnes, largeur de la gouttière et tailles des marges dans l’inspecteur Propriétés.

Après avoir modifié la grille de mise en page, vous pouvez faire de vos modifications les valeurs par défaut, ou revenir à la grille de mise en page par défaut dans XD. Pour en savoir plus, reportez-vous à la section Préférences par défaut des grilles quadrillées ou de mise en page.

Modifier les propriétés des colonnes et de la gouttière

Vous pouvez modifier les propriétés des colonnes de mise en page en fonction de vos besoins.

Pour définir le nombre de colonnes d’une grille de mise en page, modifiez la valeur Colonnes de l’inspecteur Propriétés. Lorsque vous modifiez le nombre de colonnes, XD recalcule automatiquement la largeur des colonnes. 

L’espace laissé entre les colonnes sur un plan de travail s’appelle « largeur de gouttière ». Vous pouvez définir cette largeur de gouttière en modifiant la valeur par défaut Largeur de la gouttière

Pour modifier la largeur des colonnes, modifiez la valeur par défaut Largeur des colonnes.

Définition de grilles de mise en page dans XD
Définition de grilles de mise en page dans XD

Modifier les marges

Vous pouvez modifier la taille des marges lorsque vous définissez votre grille de mise en page. 

Pour ajuster les marges de gauche et de droite de manière homogène, cliquez sur l’icône Marges gauches/droites liées et modifiez la valeur de la marge.

Pour ajuster les marges des quatre côtés individuellement, cliquez sur les différentes marges pour chaque icône de côté, puis modifiez les valeurs pour chaque marge.

Modification de la taille des marges gauche et droite de manière uniforme
Modification de la taille des marges gauche et droite de manière uniforme
Modification de la taille des marges individuellement
Modification de la taille des marges individuellement

Modifier la couleur d’une grille quadrillée ou de mise en page

Pour modifier la couleur d’une grille quadrillée ou de mise en page :

  1. Cliquez sur la case en regard de Taille des carrés pour les grilles quadrillées et de Colonnes pour les grilles de mise en page. 

    Le sélecteur de couleurs apparaît.

    Modification dans la grille
    Modification dans la grille
  2. Vous pouvez :

    • Saisir les valeurs hexadécimales ou HSBA dans les champs correspondants, si vous connaissez les valeurs exactes.
    • Ajuster la couleur à l’aide du curseur et du champ de couleurs. Dans ce cas, les valeurs numériques HSBA et hexadécimales sont ajustées en conséquence.  
    • Utiliser le curseur de couleurs ou saisir une valeur en pourcentage pour définir l’opacité du fond. Si vous définissez la valeur alpha sur 0, la grille de mise en page passe en mode avec contours.
    • Utiliser la pipette pour sélectionner une couleur à partir d’un plan de travail.

    Remarque :

    Adobe XD prend également en charge les codes hexadécimaux abrégés. Par exemple, si vous tapez 0 et appuyez sur Entrée, XD affiche automatiquement la couleur avec le code #000000. De même, vous pouvez taper 0A pour #0A0A0A et 0AF pour #00AAFF.

    Vous remarquerez que la couleur de la grille change en fonction des options que vous choisissez dans la boîte de dialogue Couleurs.

  3. Une fois que vous avez choisi une couleur, enregistrez-la pour la retrouver plus facilement en cliquant sur l’icône + au bas du sélecteur de couleurs.

Préférences par défaut des grilles quadrillées ou de mise en page

Pour rétablir l’aspect par défaut de la grille quadrillée ou de mise en page, cliquez sur Utiliser les paramètres par défaut dans la section Grille de l’inspecteur Propriétés.

Vous pouvez définir vos préférences de grille personnalisées en tant que paramètres par défaut en cliquant sur Make Default (Définir par défaut). Cette option définit l’option de grille par défaut pour votre compte. Tout nouveau fichier ouvert avec XD disposera de cette nouvelle valeur par défaut.

Décalage et redimensionnement de décalage

Vous pouvez combiner ces raccourcis clavier avec les touches de direction pour contrôler avec précision la position et la taille des éléments de l’interface utilisateur par incréments de taille de grille :

  • Maj + Flèches : déplace la sélection par incréments de 10 px.
  • Cmd + Flèches : redimensionne la sélection par incréments de 1 px (l’élément est épinglé dans le coin supérieur gauche).
  • Cmd + Maj + Flèches (Mac) et Alt + Maj + Flèches (Win) : redimensionne la sélection par incréments de 10 px (l’élément est épinglé dans le coin supérieur gauche).

Lorsque la grille carrée est activée :

  • Maj + Flèches : déplace la sélection pour l’aligner sur la grille d’abord, puis augmente la taille de la grille.
  • Cmd + Maj + Flèches (Mac) et Alt + Maj + Flèches (Win) : redimensionne la sélection pour l’aligner sur la grille, puis la redimensionne par incréments de taille de grille (l’élément est épinglé dans le coin supérieur gauche).

 

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