Apprenez à concevoir des designs adaptés à différents appareils et écrans sur des plans de travail. Servez-vous des grilles des plans de travail pour positionner vos éléments de design.

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 personnaliser la taille, 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

Vous pouvez créer des plans de travail défilants, dotés d’une barre de défilement verticale.

Remarque :

Cette version d’Adobe XD ne prend pas en charge le défilement horizontal.

Pour créer un plan de travail défilant :

Plans de travail créés à partir de tailles prédéfinies : si le contenu dépasse la longueur prévue pour le plan de travail, faites glisser la partie inférieure du plan de travail vers le bas selon la longueur souhaitée et poursuivez votre design. Le début du contenu défilant est indiqué par une ligne en pointillé sur le plan de travail.

Pour désactiver le défilement, sélectionnez le plan de travail et cliquez sur Aucun dans la section Défilement de l’inspecteur Propriétés.

Plans de travail avec dimensions personnalisées : pour activer le défilement d’un plan de travail personnalisé, sélectionnez-le, puis cliquez sur Vertical dans la section Défilement de l’inspecteur Propriétés.

Indiquez également une hauteur de fenêtre d’affichage, qui correspond à la taille de la fenêtre sur laquelle le plan de travail est affiché. Pour que le défilement devienne actif, la hauteur de la fenêtre d’affichage doit être inférieure à celle du plan de travail. Vous pouvez également spécifier la hauteur de la fenêtre d’affichage en déplaçant le haut de la ligne en pointillé sur la zone de dessin jusqu’à la position souhaitée.

Modification de la hauteur de la fenêtre d’affichage
Modification de la hauteur de la fenêtre d’affichage

Pour désactiver le défilement, cliquez sur Aucun dans la section Défilement de l’inspecteur Propriétés.

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

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

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 (de la même manière que sur la grille quadrillée). 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 de façon individuelle, cliquez sur l’icône Marges différentes de chaque côté, puis modifiez la valeur de 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 Définir comme valeur 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.

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