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é.
Dernière mise à jour le
17 févr. 2022
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.
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 voulez attribuer deux actions dans un seul déclencheur tel que Appuyer, définissez le premier bouton Action + dans l'Inspecteur de propriétés sur Recouvrement, puis définissez le deuxième bouton Action + sur une action non transitionnelle 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.
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.
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 ?
- 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.
- Basculez en mode Prototype pour associer le plan de travail source au plan de travail incrusté.
- 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 Fondu.
- Rythme : sélectionnez Décélération.
- Durée : saisissez 0,2 s.
- Associez autant de plans de travail source que souhaité au plan de travail incrusté.
- 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 :
- Choisissez un plan de travail source et un plan de travail incrusté comportant une liste déroulante d’éléments.
- Basculez en mode prototype pour relier le plan de travail source au plan de travail de recouvrement.
- 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.
- Associez autant de plans de travail source que souhaité au plan de travail incrusté.
- L’option Aperçu sur ordinateur vous permet de prévisualiser l’effet.
En savoir plus
Pour en savoir plus sur les recouvrements dans XD, regardez cette vidéo.
Durée de visionnage : 10 minutes
Vous pouvez également consulter la communauté XD pour obtenir d’autres tutoriels et exemples de fichiers.
Articles connexes
Concevoir des prototypes UX avec Adobe XD
Créez des maquettes interactives pour sites web et applications mobiles.
