Ajouter des incrustations

Découvrez comment ajouter des incrustations pour simuler des effets de transition interactifs.

Adobe XD vous permet d’empiler du contenu sur un autre plan de travail plutôt que de le dupliquer sur plusieurs plans de travail, afin de simuler des effets tels que des listes déroulantes, des claviers coulissants, etc. 

Le clavier apparaît en incrustation sur le plan de travail
Le clavier apparaît en incrustation sur le plan de travail

  1. En mode Design, sélectionnez un plan de travail source, puis celui qui s’y incrustera. Vous pouvez réutiliser plusieurs fois un plan de travail incrusté. 

  2. En mode Prototype, glissez et déposez le connecteur du plan de travail source vers celui avec le contenu incrusté. Cliquez sur le connecteur pour afficher le panneau Interaction qui figure dans l’Inspecteur Propriétés et définissez les options suivantes :

    • Déclencheur : choisissez une option.
    • Action : sélectionnez Incrustation. Si vous souhaitez affecter deux actions dans un seul déclencheur tel que Appui, réglez le premier bouton Action + dans l’Inspecteur Propriétés sur Incrustation et réglez le deuxième bouton Action + sur une action non transitoire, comme Lecture audio ou Lecture vocale.
    • Animation : sélectionnez le type d’animation. Si vous sélectionnez Glisser vers le haut ou Glisser vers le bas, XD positionne automatiquement l’incrustation sur le bord du plan de travail source.
    • Rythme : sélectionnez une option pour simuler des effets de type accélération/décélération.
    • Durée : saisissez une durée. La durée maximale que vous pouvez définir pour la transition entre deux plans de travail est de cinq secondes. 
    Ajout d’un clavier en incrustation sur un plan de travail source
    Ajout d’un clavier en incrustation sur un plan de travail source

  3. Pour régler la position d’une incrustation sur le plan de travail source, cliquez sur le curseur de position (+), faites-le glisser et déposez-le.

  4. Pour prévisualiser vos incrustations dans les navigateurs pris en charge, cliquez sur 

Incrustations imbriquées

Adobe XD ne prend pas en charge les incrustations imbriquées dans lesquelles une incrustation est appliquée par-dessus une autre incrustation. Dans cette situation, lorsque le premier plan de travail incrusté est connecté à un autre plan de travail, il disparaît avant d’effectuer la transition vers la seconde incrustation. 

Exemples et exemples de fichiers

Vous voulez créer des incrustations interactives à l’aide d’effets de flou en arrière-plan ? 

  1. Choisissez un plan de travail source et un plan de travail incrusté avec un flou en arrière-plan. Pour en savoir plus sur l’ajout d’un arrière-plan flou, consultez la rubrique Utilisation des effets de flou dans XD
  2. Basculez en mode Prototype pour associer le plan de travail source au plan de travail incrusté.
  3. Sélectionnez l’une des options suivantes dans l’Inspecteur Propriétés : 
    • Déclencheur : sélectionnez Appuyer.  
    • Action : sélectionnez Incrustation.
    • Animation : sélectionnez Dissoudre. 
    • Rythme : sélectionnez Décélération.
    • Durée : saisissez 0,2 s.
  4. Associez autant de plans de travail source que souhaité au plan de travail incrusté. 
  5. L’option Aperçu sur ordinateur vous permet de prévisualiser l’effet.

Si vous souhaitez obtenir un tutoriel poussé et télécharger des exemples de fichiers, consultez la page Création d’une incrustation interactive.

Vous voulez apprendre à utiliser des incrustations pour créer un effet de liste déroulante coulissante ? Regardez le tutoriel à la fin de cet exemple et suivez ces étapes :

  1. Choisissez un plan de travail source et un plan de travail incrusté comportant une liste déroulante d’éléments.  
  2. Basculez en mode Prototype pour associer le plan de travail source au plan de travail incrusté. 
  3. Sélectionnez l’une des options suivantes dans l’Inspecteur Propriétés : 
    • Déclencheur : sélectionnez Appuyer.  
    • Action : sélectionnez Incrustation.
    • Animation : sélectionnez Glisser vers la droite.
    • Rythme : sélectionnez l’effet Décélération.
    • Durée : saisissez 0,3 s.
  4. Associez autant de plans de travail source que souhaité au plan de travail incrusté. 
  5. L’option Aperçu sur ordinateur vous permet de prévisualiser l’effet.

En savoir plus

Regardez cette vidéo pour en savoir plus sur les incrustations dans XD.
Temps de visionnage : 10 minutes

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

Bonnes pratiques

« L’incrustation est une fonctionnalité puissante et très populaire. Les utilisateurs cherchent à réaliser des tâches toujours plus complexes, et les incrustations leur facilitent grandement le travail. » déclare Oliver Lindberg. Découvrez son blog sur les bonnes pratiques en matière de conception d’incrustations.