Découvrez comment créer des 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. 

Plan de travail défilant

Création d’un défilement vertical

  1. Sur des plans de travail prédéfinis : Faites glisser le point le plus bas du plan de travail afin qu’il soit plus long que l’écran de l’appareil. Le début du contenu défilant est indiqué par une ligne en pointillé. 

    Ligne pointillée et contenu défilant
    Ligne pointillée et contenu défilant
  2. En mode Design, sélectionnez les options suivantes sous Inspecteur Propriétés :

    • Défilement : sélectionnez Vertical ou Aucun
    • Position fixe lors du défilement : cette sélection épingle les éléments dans une position fixe afin d’éviter le défilement avec le contenu. 
    • Hauteur de la fenêtre : spécifiez la hauteur de la fenêtre dans laquelle vous pouvez visualiser le plan de travail. 
    Défilement vertical sur un plan de travail avec taille personnalisée
    Défilement vertical sur un plan de travail
  3. Reliez les plans de travail en mode Prototype.

  4. En mode Prototype, sélectionnez les options suivantes sous Inspecteur Propriétés :

    • Conserver la position de défilement : les transitions permettent de passer au plan de travail suivant tout en conservant la position du plan de travail précédent. Consultez cette publication Twitter pour plus de détails. 
    • Position fixe lors du défilement : épingle les éléments de la conception dans une position fixe afin d’éviter le défilement avec le contenu. 
    Conservation de la position de défilement
    Conservation de la position de défilement
    Position fixe lors du défilement
    Position fixe lors du défilement
  5. Pour prévisualiser le plan de travail, sélectionnez Aperçu sur ordinateur . Faites glisser la fenêtre d’aperçu pour afficher le défilement vertical.

Exemples et exemples de fichiers

Vous souhaitez utiliser des paramètres de plans de travail prédéfinis pour créer une liste déroulante avec un défilement vertical ?

  1. Utilisez l’outil Sélectionner pour cliquer sur le nom du plan de travail ou faire glisser sur les plans de travail. Vous pouvez également cliquer sur un nom de plan de travail dans le panneau Calques pour le sélectionner dans la fenêtre de document.
  2. Pour allonger le plan de travail sélectionné, faites glisser le point inférieur du plan de travail vers le bas. Une ligne en pointillés indique la hauteur initiale du plan de travail.
  3. Vous pouvez prévisualiser directement le défilement d’un plan de travail dans XD à l’aide de l’option Aperçu sur ordinateur.

Téléchargez les exemples de fichiers et testez-les, ou regardez cette vidéo pour plus d’informations.

Temps de visionnage : 1 minute.


Lorsque vous créez vos conceptions pour ordinateur ou appareil mobile, souhaitez-vous voir des parties de votre site Web uniquement lorsque vous faites défiler et épingler les éléments de conception sans qu’ils soient flottants ? Regardez cette vidéo pour en savoir plus sur les plans de travail défilants et les éléments fixés. 

Temps de visionnage : 1 minute.


Vous pouvez également consulter la communauté XD pour obtenir d’autres tutoriels et exemples de fichiers.

Conseils et astuces

Vous voulez simuler un défilement horizontal dans votre prototype ?

XD ne prend pas en charge le défilement horizontal. Pour y remédier, vous pouvez utiliser l’animation automatique avec un déclencheur Faire glisser afin de simuler un défilement horizontal.

  1. Regroupez les éléments que vous souhaitez faire défiler horizontalement sur le plan de travail, puis dupliquez le plan de travail.
  2. Sur le nouveau plan de travail, copiez et déplacez le groupe d’éléments vers la position souhaitée en fin de défilement.
  3. Reliez les prototypes et remplacez le déclencheur Appuyer par Faire glisser, et définissez l’action Animation automatique.
  4. Faites glisser la fenêtre d’aperçu pour afficher l’effet de défilement horizontal simulé.

Bonnes pratiques

« Les en-têtes et autres éléments fixes ressemblent à des panneaux de signalisation de circulation. Ils nous permettent de fournir des informations pertinentes sur une section correspondante ou à aider les clients tout au long de leur travail via des appels à l’action. » a déclaré Oliver Lindberg. Découvrez le blog sur les meilleures pratiques pour la conception d’en-têtes et d’autres éléments fixes.

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