Adobe XD : maîtriser les animations
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Adobe XD : maîtriser les animations

Axel Paris
Promo -53% Jusqu'au 18 avril, 13:59
9,00€19,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Bonjour, je m'appelle Axel et je suis UI/UX Designer.
J'utilise Adobe XD depuis 2017, et c'est devenu l'outil de design et de prototypage idéal pour tous mes projets.
Ce logiciel vous permet de concevoir des interfaces (sites web, applications mobiles, ...) mais aussi de les animer !
Et c'est justement ces fonctionnalités de prototypage et d'animations que vous allez apprendre à travers ce cours en ligne.

Au programme de ce tuto Adobe XD : maîtriser les animations

Voici les notions qui vont être abordées dans cette formation en vidéo

  • Découverte du prototyping,
  • Les éléments fixés,
  • L’incrustation (overlay),
  • Les animations automatiques,
  • Faire glisser,
  • Les délais,
  • Le retour en arrière
  • L'apparition d'une modal,
  • L'apparition d'une notification,
  • Un bouton "on/off",
  • Un formulaire de connexion,
  • Une navigation (2 techniques seront montrées, pour le même résultat).

Pour aller plus loin, vous apprendrez à créer des composants dans Adobe XD. Vous comprendrez notamment le fonctionnent de leurs états (pour des animations toujours plus performantes).
Ce cours repose sur des exemples concrets.

Rejoignez la formation et réalisez vos premières animations avant ce soir !

Fichiers sources fournis

Télécharger le fichier "Source - Maitriser les animations.xd" qui sera le projet utilisé dans le cours. Il vous permettra de suivre le cours en même temps que vous le regardez.
Vous pourrez également récupérer le fichier final "Source - Maîtriser les animations (corrigé).xd" si vous souhaitez retrouvez les animations créées dans la formation.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Premiers pas avec les animations
Chapitre 2
Maîtriser les techniques d'animation
Chapitre 3
Les composants
Chapitre 4
Exemple : formulaire de connexion
Chapitre 5
Exemple : menu de navigation
Chapitre 6
Effets supplémentaires
Chapitre 7
Conclusion

Plan détaillé du cours

Chapitre 1 : Premiers pas avec les animations
12m38s
 
Leçon 1Créer sa première animation !
Leçon 2Fonctionnement du prototyping
Leçon 3Comprendre les interactions
Chapitre 2 : Maîtriser les techniques d'animation
33m08s
 
Leçon 1Scroll & les éléments fixés
Leçon 2Incrustation (overlay)
Leçon 3Animation automatique
Leçon 4Faire glisser
Leçon 5Délai
Leçon 6Plan de travail précédent
Chapitre 3 : Les composants
13m10s
 
Leçon 1Composant : principe de fonctionnement
Leçon 2Composant : états personnalisés
Chapitre 4 : Exemple : formulaire de connexion
15m30s
 
Leçon 1Remplir les champs de connexion
Leçon 2Bouton (survol & clic)
Chapitre 5 : Exemple : menu de navigation
08m42s
 
Leçon 1Méthode 1 - Les plans de travail
Leçon 2Méthode 2 - Les états d'un composant
Chapitre 6 : Effets supplémentaires
10m35s
 
Leçon 1Slider (de cards)
Leçon 2Animation au scroll (astuce)
Chapitre 7 : Conclusion
26s
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
49
Apprenants
7
Commentaires
4,9/5
Note moyenne
5/5
6
4/5
1
3/5
0
2/5
0
1/5
0
Pascal Tafelski
Pascal Tafelski
Publié le 03/08/2022
Clair et très bien expliqué !
Françoise Bogard
Françoise Bogard
Publié le 15/03/2022
Excellente formation, pédagogique et claire. Pour la partie sur les états (état initial, appuyé, survol...etc.), j'ai trouvé beaucoup de similitude avec ceux proposés dans Adobe Muse pour la création de site. Encore merci !
Mickaël Ahouansou
Mickaël Ahouansou
Publié le 24/09/2021
Très bon cours et très bonnes explications

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

XD

Quel est le niveau requis pour suivre ce tuto ?

débutant

Ce tuto est-il compatible avec la version gratuite d'Adobe XD ?

Oui tout à fait ! La version gratuite est d'ailleurs très complète. Le seul intérêt de payer serait pour avoir plus de stockage dans le cloud principalement.

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données