CATALOGUE Design et Infographie Formation Figma Atelier Figma - Design d'application Créer des Animations de Prototype Avancées

Créer des Animations de Prototype Avancées

Autres animations & conseils
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Atelier Figma - Design d'application
Revoir le teaser Je m'abonne
4,5
Transcription
159,00€ 63,60€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
159,00€ 63,60€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Étapes pour une Animation de Prototype Réussie

Objectifs

Les objectifs de cette vidéo sont d'apprendre à créer des animations de prototype avancées, de comprendre l'importance de l'utilisation des animations dans le design d'interaction et de savoir comment configurer des transitions fluides avec Smart Animate et des effets comme l'ease out back.

Résumé

Apprenez à réaliser une animation de prototype avancée en utilisant Smart Animate pour améliorer l'expérience utilisateur.

Description

Dans cette vidéo, nous explorons comment créer une animation de prototype plus sophistiquée. Vous apprendrez à passer d'un écran de recherche à un autre en utilisant Smart Animate. Nous examinerons un scénario où un panneau de recherche se déploie lorsque l'utilisateur clique sur un champ de recherche, rendant l'interaction plus intuitive et fluide.

La vidéo vous guide étape par étape pour configurer cette animation, en utilisant des transitions avec des effets ease out back pour rendre l'animation plus naturelle. Nous aborderons également l'importance d'utiliser les animations à bon escient pour éviter de surcharger l'utilisateur avec des effets déplaisants, et comment les utiliser dans une logique de design d'interaction pertinente.

Cet exemple sur une application fictive appelée RainAlert illustre comment une liste déroulante peut bénéficier d'animations bien pensées, améliorant ainsi l'expérience utilisateur et la clarté de l'interface.

Voir plus

Questions - réponses

Quel est l'intérêt d'utiliser l'animation Smart Animate dans un prototype?
L'animation Smart Animate permet de créer des transitions fluides entre les écrans, améliorant ainsi l'expérience utilisateur en rendant les interactions plus naturelles.
Pourquoi est-il important de ne pas abuser des animations dans un prototype?
Un usage excessif des animations peut distraire l'utilisateur et rendre l'interface difficile à naviguer, créant un effet sapin de Noël qui nuit à l'expérience utilisateur.
Quel effet de transition est utilisé dans la vidéo pour l'animation du champ de recherche?
L'effet de transition utilisé est le 'ease out back', qui rend l'animation plus naturelle en ralentissant la fin du mouvement pour une transition douce.

Programme détaillé

8 commentaires
4,5
8 votes
5
4
3
2
1
pa12
Il y a 1 year
Je viens de débuter la formation mais quel dommage de ne pas avoir le fichier de travail avec... Une grosse perte de temps pour les images, les icones...etc. Pouvez-vous svp ajouter ce fichier à télécharger?
jc.mosca
Il y a 1 year
Comme dit plus haut, mise à part les centaines de "du coup" et "en fait" plutôt agaçants, c'est comme d'habitude chez Elephorm une formation enrichissante. J'ai mis seulement 4 étoiles car il manque la démonstration des overlays, des contraintes, des listes à puces et pas mal d'autres. Ce serait bien qu'Elephorm fasse des mises à jour de ses formations.
ousmane.ndia
Il y a 1 year
Bien pour apprendre les bases, mais manque les nouveautés de 2022.
nicolas.dessis
Il y a 2 years
Merci !
pioupiou06
Il y a 2 years
Super formation ! très bien expliquée !
pulpozien
Il y a 2 years
Très bonne formation.
Trop de "du coup" et du coup ça agace mais sinon super
maellechancerelle
Il y a 3 years
Super formation!!
stephanehugon
Il y a 3 years
Cette formation est vraiment au top ! Je ne connaissais rien de Figma (étant "seulement" développeur à la base) et j'ai appris beaucoup de choses, je recommande donc cette formation; le formateur est très sympathique et professionnel dans sa pédagogie, c'est très agréable à suivre. Je recommande par contre d'avoir au moins deux écrans (voir trois) pour suivre la vidéo et pratiquer/prendre des notes en même temps.

Seul bémol par contre, pitié Elephorm, mettez les fichiers de travail avec la formation... (Ce n'est pas la seule sur laquelle il manque les fichiers d'ailleurs); mais mettez-les, ça évite d'aller chercher à droite et à gauche des SVG que l'on doit convertir, des images, etc...

A part ça, super formation !