Apprenez à créer des micro-interactions à l’aide de l’animation automatique.

Avec l’animation automatique, vous pouvez créer des transitions immersives pour visualiser le mouvement de contenu entre des plans de travail.

Combinée avec le pouvoir des déclencheurs Faire glisser et Temps, l’animation automatique vous aide à créer une large gamme d’effets, comme un balayage et un glissement YouTube pour mieux rendre une story de prototype.

Interactions de type ondulations sur un site web
Effet d’ondulations sur un site web
Effet glissage/balayage sur un appareil tactile
Effet glissage/balayage sur un appareil tactile

Pour créer un prototype animé, procédez comme suit :

  1. Avant de commencer, utilisez ces règles simples pour comprendre comment les objets sont gérés lors de l’animation :

    • Si un objet n’est pas présent sur le plan de travail cible, il apparaît en fondu.
    • Si un objet n’est pas présent sur le plan de travail source, il disparaît en fondu.
    • Si un objet a une correspondance en termes de nom du calque et de groupe, les attributs sont animés. Pour une liste complète des propriétés et des transitions prises en charge, lisez les Propriétés d’objet.
  2. Reliez les plans de travail en mode Prototype. 

  3. Cliquez sur le connecteur pour afficher le panneau d’interaction qui figure dans l’inspecteur Propriétés et définissez les options suivantes :

    • Déclencheur : sélectionnez une option pour déclencher une animation. Par exemple, pour simuler une expérience de saisie de carte, sélectionnez Appuyer. 
    • Action : sélectionnez Animation automatique.
    • Destination : sélectionnez le plan de travail cible vers lequel l’animation doit permettre d’effectuer la transition.
    • Rythme : sélectionnez une option pour simuler des effets de type accélération/décélération. Par exemple, sélectionnez Décélération si vous voulez que vos animations disparaissent de votre prototype au ralenti.
    Le processus d’animation automatique
    Le processus d’animation automatique

    A. Sélectionnez le type de déclencheur. B. Sélectionnez l’action à animer automatiquement. C. Sélectionnez le plan de travail cible. D. Sélectionnez les options de rythme. 
  4. Sélectionnez l’aperçu de vos animations dans les navigateurs pris en charge. Pour partager votre prototype avec vos parties prenantes, cliquez sur Partager > Partager pour révision

    Remarque :

    XD ne prend pas en charge le défilement lors de l’aperçu des plans de travail animés avec l’animation automatique.

Exemples et exemples de fichiers

Voulez-vous connaître les rudiments de l’animation automatique ? Commencez avec ce kit d’interface utilisateur qui inclut des interactions de base, des éléments d’interface utilisateur, des exemples de type glisser et bien plus encore.

Vous pouvez également utiliser d’autres exemples de fichiers de ce type pour tester l’animation automatique.

Vous souhaitez obtenir un effet de balayage YouTube sans vous soucier des durées et des images clés ?

Reliez vos plans de travail et sélectionnez ces options dans l’Inspecteur Propriétés du prototype :

  • Déclencheur : sélectionnez Faire glisser. 
  • Action : sélectionnez Animation automatique.
  • Destination : sélectionnez le plan de travail cible vers lequel l’animation doit permettre d’effectuer la transition.
  • Rythme : sélectionnez une option pour créer des effets de type accélération/décélération. Par exemple, sélectionnez Accélération-Décélération pour que vos animations apparaissent et disparaissent de votre prototype au ralenti.

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

Temps de visionnage : 1 minute.


Vous voulez savoir comment créer un menu mobile animé avec un effet d’accélération ? 

  1. Téléchargez les exemples de fichiers.
  2. En mode Prototype, reliez le menu hamburger au plan de travail home_expanded et sélectionnez les options suivantes dans l’Inspecteur Propriétés du prototype :
  • Déclencheur : sélectionnez Appuyer. 
  • Action : sélectionnez Animation automatique.
  • Destination : sélectionnez le plan de travail cible vers lequel l’animation doit permettre d’effectuer la transition.
  • Rythme : sélectionnez l’effet Accélération.
  • Durée : définissez une durée de 0,8 secondes.

Vous souhaitez ajouter des animations avancées à vos conceptions ? Regardez cette vidéo pour savoir comment travailler avec After Effects. 

Exportation d’Adobe XD vers After-Effects (Temps de visionnage : 1 minute)


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

Bonnes pratiques

Saviez-vous que vous pouvez jouer avec les différentes options de rythme pour changer l’expérience client de vos prototypes animés ? Lisez ce qui suit pour connaître les bonnes pratiques et regardez Talin Wadsworth, concepteur principal d’Adobe XD, partager quelques astuces intéressantes sur l’utilisation de l’animation automatique.

Temps de visionnage : 1 minute.


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