Créer un carrousel interactif dans Adobe XD peut être complexe.
Une mauvaise gestion des calques et des outils d’alignement peut entraîner des animations non fluides et des erreurs dans le prototypage.
Cet article vous guide pour surmonter ces défis en utilisant efficacement Adobe XD pour un carrousel fluide.
Maîtrisez les fonctionnalités de base d'Adobe XD-UX Designer et créez des prototypes d'interface utilisateur interactifs
Maintenant, on va modifier notre carrousel pour que plus tard, on pourra y appliquer un effet qui tourne en fonction du cornet choisi.
Il est important de préciser que dans cette partie, il est important de suivre étape par étape tout ce qui est montré pour éviter de vous déborder.
Il est crucial de ne pas ajouter d’autres éléments à notre page. Tout d’abord, on va renommer les calques du carrousel. N’oublions pas que pour renommer un calque, il suffit de double cliquer sur son nom et on change. On va les renommer avec un nombre successif en partant du bas en suivant les rangs montrés dans la figure ci-dessous.
Pour arriver à notre fin, on peut utiliser deux méthodes. D’abord, on va voir comment on pourrait travailler sans les outils d’alignement .
On va commencer par dupliquer le Cornets 1 . On clique sur le calque Cornets 1 et on fait CTRL+C et CTRL+V .
Si vous n’avez pas eu le même résultat, il faut vérifier que vous avez la même disposition des calques présentées dans les figures, et bien suivre les étapes.
Pour les prochaines étapes, on va avoir besoin de supprimer des calques. Pour cela, on doit utiliser le bouton SUPPR ou DELETE . On clique sur le calque et on appuie sur cette touche.
On va continuer avec Cornets 3 . On commence par le dupliquer.
On va s’attaquer aux deux images restantes : Cornets 4 et Cornets 5.
Le Cornets 4 est caché en dessous de Cornets 3 qui est le calque qui se trouve en tête de la liste des calques , donc il va falloir supprimer ce Cornets 3 pour que Cornets 4 apparaisse.
On a fini de la modification sur les images de notre Footer. Si vous avez bien suivi, vous devriez avoir le même résultat qui est présenté ci-dessous.
Maintenant, on va s’occuper des noms des cornets. Tout d’abord, on va faire bouger le texte Gaufrette Nature qui est déjà là. On va commencer par le dupliquer.
Après cela, on va déplacer ce texte Gaufrette Nature .
Maintenant, on va copier le texte Gaufrette Chocolat dans la page précédente. On va faire une copie et on va le coller sur la page précédente.
On doit modifier les noms des autres cornets. Ici, on va utiliser une autre méthode pour faire bouger les images du carrousel. On va utiliser les outils d’alignement.
Pour cela, on va d’abord dupliquer la dernière page.
Pour modifier les images de la page qu’on vient de créer, on commence toujours par l’image du milieu. On sélectionne l’image dans les calques ou directement en double cliquant sur l’image jusqu’à ce qu’on arrive à la sélectionner. Et on fait CTRL+C et CTRL+D .
On va aligner ces éléments qu’on vient de sélectionner. En utilisant les outils d’alignement, on va d’abord les aligner à gauche puis en haut.
Après, on démasque la copie du calque Cornets 3 qu’on a caché et masque l’original qu’on vient d’aligner.
Maintenant, on va modifier les cornets qui se trouvent au bord : Cornets 1 et Cornets 2 . On commence par les sélectionner. Puis on va les aligner avec les outils d’alignement.
Après cela, on va démasquer le calque Cornets 3 qu’on vient de cacher.
Puis on passe aux autres cornets. On commence par dupliquer Cornets 4 . Et on fait monter la copie tout en haut du calque et on va la masquer.
Après cela, on va s’occuper du Cornets 5 . On va sélectionner le calque Cornets 4 qui se trouve en haut et le calque Cornets 5 , on peut aussi sélectionner directement sur les éléments sur le plan de travail.
Maintenant, on va s’occuper du texte Gaufrette Chocolat qui se trouve au milieu de notre page. On va commencer par le dupliquer avec la commande CTRL+D. Et on va masquer l’un des textes.
Après cela, on va copier le texte Nature trempé au chocolat et on va coller la copie sur le bord de la page précédente.
On a fini de travailler sur le carrousel des pages pour le choix des cornets. On a fait défiler le carrousel.
Maintenant, on va créer un bouton de validation.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment renommer efficacement les calques dans Adobe XD ?
Quels outils utiliser pour aligner les éléments dans Adobe XD ?
Comment éviter les erreurs courantes lors de la création d'un carrousel ?
Pourquoi est-il important de suivre les étapes dans Adobe XD ?
Comment gérer les calques cachés dans Adobe XD ?
Conclusion
En maîtrisant la gestion des calques et les outils d’alignement dans Adobe XD, vous pouvez créer des carrousels interactifs fluides et intuitifs. Quelles autres techniques d’Adobe XD aimeriez-vous explorer pour améliorer vos projets de design ?
