CATALOGUE Design et Infographie Formation Figma Atelier Figma - Design d'application Prototypage des interactions dans Figma

Prototypage des interactions dans Figma

Prototypage des écrans et test
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€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
159,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Lier des écrans et naviguer entre eux

Objectifs

L'objectif de cette vidéo est de vous enseigner comment créer des interactions fluides entre les différents écrans de votre prototype Figma. Vous apprendrez à configurer des liens interactifs et à tester ces interactions pour assurer une navigation intuitive.

Résumé

Apprenez à lier les écrans de votre prototype dans Figma en utilisant des interactions simples et efficaces.

Description

Dans cette leçon, nous allons approfondir le prototypage d'écran en reliant différentes interfaces à l'aide de Figma. Nous commencerons par couvrir la méthode de transition d'un écran à un autre par le biais d'interactions spécifiques comme un clic. Vous découvrirez également l'importance de la navigation instantanée entre des états quasi identiques afin d'offrir une expérience utilisateur fluide. Ensuite, nous aborderons la façon de naviguer entre différentes vues comme la prévision et la carte, en utilisant des composants réutilisables pour minimiser les efforts manuels. Enfin, nous mettrons en évidence l'importance de tester chaque interaction pour s'assurer qu'elles reflètent fidèlement les attentes des utilisateurs et éliminer toute incohérence potentielle dans le prototype.

Nous explorerons également la fonctionnalité de recherche et la manière d'intégrer un bouton d'annulation pour revenir à l'écran précédent. Cette méthodologie est essentielle pour garantir une navigation bidirectionnelle cohérente. Bien que les animations complexes ne soient pas l'objet de cette leçon, une démonstration simple des interactions sera réalisée pour valider notre prototype.

Voir plus

Questions - réponses

Comment passer d'un écran à un autre dans un prototype Figma?
Pour passer d'un écran à un autre, créez un lien interactif en sélectionnant un élément cliquable et en le pointant vers l'écran cible. Configurez l'interaction sur un événement de clic avec une transition instantanée.
Pourquoi utiliser la transition instantanée entre deux états similaires?
La transition instantanée est utilisée pour des états quasi identiques, comme passer de midi à 15 heures, car elle permet une navigation rapide sans animations inutiles qui pourraient perturber l'expérience utilisateur.
Quelle est l'importance de tester les interactions dans un prototype?
Tester les interactions dans un prototype permet de valider le flux de navigation et de s'assurer que toutes les interactions fonctionnent comme prévu, évitant ainsi des incohérences et améliorant l'expérience utilisateur globale.

Programme détaillé

8 commentaires
4,5
8 votes
5
4
3
2
1
pa12
Il y a 1 year
Commentaire
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
Commentaire
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
Commentaire
Bien pour apprendre les bases, mais manque les nouveautés de 2022.
nicolas.dessis
Il y a 1 year
Commentaire
Merci !
pioupiou06
Il y a 2 years
Commentaire
Super formation ! très bien expliquée !
pulpozien
Il y a 2 years
Commentaire
Très bonne formation.
Trop de "du coup" et du coup ça agace mais sinon super
maellechancerelle
Il y a 3 years
Commentaire
Super formation!!
stephanehugon
Il y a 3 years
Commentaire
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 !