Prototype et animations dans Figma

1. Bande-annonce du cours: Dans ce cours Figma, vous allez tout apprendre sur les fonctionnalités de prototypage Figma et comment les exploiter pour créer un prototype réel à partir de zéro. Vous allez également découvrir les flux de travail ainsi que les astuces et fonctionnalités avancées du prototypage dans Figma. Et je suis moi-même designer UX d'interface utilisateur depuis plus de trois ans maintenant et utilise Figma depuis de nombreuses années. Et je suis passionnée par l'idée d'enseigner cela à d'autres personnes qui étaient toutes motivées. Et nous voulons faire passer leurs compétences en matière de prototypage et de Figma à un niveau supérieur. Et puis, dans la deuxième partie, bien sûr, nous allons créer un prototype à partir de zéro, dont j'ai choisi une application mobile issue de la communauté Figma. Nous allons maintenant commencer par un aperçu de base de ce qu' est le prototypage dans Figma et de son fonctionnement. Mais avant de commencer à introduire le prototypage Figma, nous allons voir le processus de conception pour mieux comprendre. 2. Processus de conception: Avant de commencer le prototypage, je souhaite vous expliquer pourquoi le prototypage est si important dans le processus d' expérience utilisateur. Qu'est-ce que l'expérience utilisateur et pourquoi le prototypage est-il si important ? L'expérience utilisateur est l' émotion et l'attitude d'une personne face à l'utilisation d'un produit, d'un système ou d'un service en particulier. Lorsque nous concevons des produits, il est très important de s'assurer que ces produits résolvent réellement un problème pour l'utilisateur et qu'ils sont utiles pour l'utilisateur. le cas contraire, l'utilisateur ne l'utilisera pas. C'est très simple, un prototype. Vous pouvez vérifier cela dès le début pour vous assurer que vous suivez le bon chemin. Si nous regardons en arrière, de nombreuses équipes de conception utilisent la méthode de la cascade. Il s'agit d'une voie à sens unique où peu de commentaires et de prototypage sont inclus. Les équipes de conception se sont donc rendu compte au cours de la dernière décennie qu'elles devaient constituer un autre meilleur moyen tester d'abord des idées et de les réaliser très tôt dans le processus si les choses aboutissent au final. Parce qu'avec la méthode en cascade, une fois qu'une application est en phase de test, il est très difficile de revenir en arrière et modifier ce qui était déjà en phase de conception. Ainsi, aucun logiciel fonctionnel n'est produit avant la fin du cycle de vie. Bonjour, quantité de risque et d'incertitude. L'approche de conception centrée sur est très différente car l'être humain est au centre de l'ensemble du processus pour l'ensemble du projet. Et il est utile de traiter les commentaires le plus tôt possible car l'utilisateur est impliqué dans chaque étape du processus. intéressant , c' est que cette approche vise à améliorer l' ensemble de l'expérience tout au long du processus, faisant des allers-retours. Vous incluez donc la recherche sur les utilisateurs en plusieurs étapes tout au long de votre projet. Il est alors très important d'écouter vraiment l'utilisateur, de comprendre ses besoins et ses souhaits, et de vraiment comprendre ce qui l' aide à effectuer une tâche spécifique ou à comprendre sa vie quotidienne en une tâche spécifique ou général. Cela vous aide finalement à concevoir quelque chose dont l' utilisateur a vraiment besoin. C'est une méthode non linéaire. Vous pouvez donc revenir au prototypage encore et encore. Dans ce cours, nous allons donc nous concentrer sur le prototypage s'il s'agit de la même méthode quel que soit le support que vous utilisez. Et je te verrai dans la prochaine partie. 3. Prototypage: Avant de commencer à construire notre prototype avec notre idée en tête. Parlons brièvement des bases du prototypage. Les prototypes vous aideront donc à démontrer et à communiquer vos idées aux autres. Il peut s'agir de vos collègues, parties prenantes ou utilisateurs pour les tests utilisateurs. Cela vous permet d'économiser du temps et de l'argent car vous n'avez pas besoin de créer l'ensemble du produit. Mais commencez par un prototype simple et peu coûteux. Vous pouvez le tester et en apprendre beaucoup avant de vraiment créer le produit. Ne vous inquiétez pas, si vous n'êtes pas designer, importe qui peut créer un prototype rapide et performant. Vous n'avez donc pas besoin de compétences particulières pour cela. Qu'est-ce que le prototypage rapide ? Le prototypage rapide est donc un processus itératif. Cela signifie que c'est répétitif. Le processus est utilisé pour visualiser à quoi ressemblera un site Web ou une application afin d'obtenir commentaires et la validation des utilisateurs, des parties prenantes, des développeurs et des concepteurs. Lorsqu'il est bien utilisé, prototypage rapide améliorera la qualité de vos conceptions en améliorant communication entre les différentes parties, réduisant ainsi le risque de créer quelque chose qui ne on veut le dire de cette façon très simple. De quoi avez-vous besoin pour le prototypage ? Un prototype n'est pas conçu pour être une version entièrement fonctionnelle d'un système, mais uniquement pour aider à visualiser l'expérience utilisateur du produit final. Donc, si la qualité est trop faible, les gens ne croiront pas vraiment que le prototype est un vrai produit. Et si la qualité est trop élevée, vous travaillerez toute la nuit et vous ne finirez probablement jamais. La qualité ne doit donc être ni trop élevée, ni trop faible, mais juste. Vous pouvez prototyper non seulement des écrans, des applications ou des sites Web, mais presque tout. Le prototypage est une excellente méthode pour tester les conceptions. Quels que soient les designs que vous concevez, vous pouvez déjà commencer à réfléchir au type d'écrans ou interfaces que vous devez intégrer dans votre prototype et tester réellement votre idée. 4. Démonstration du projet: Dans cette partie du cours, nous choisirons une application mobile de la communauté Figma pour appliquer différents types de prototypage et d' animations dans Figma. Comme vous le voyez maintenant, un exemple d'application mobile, Dr. app, que j'ai choisi pour faire notre exemple. Cet exemple inclut les différents types de prototypes, de composants interactifs, exemples et d'animations afin de préparer une démonstration complète d' une application et de devenir une véritable application installé sur un smartphone. Commençons maintenant à tester le prototype de notre application sur lequel j'ai déjà travaillé hier. Dans un premier temps, cliquez ici pour commencer à ouvrir l'application. Prochaine. Nous choisissons d'abord, oui. Vous revenez au premier écran à partir d'ici, où vous pouvez choisir l' autre bouton ici pour écrire votre e-mail et votre mot de passe. S'inscrire. Dans cette étape, nous pouvons choisir le sexe, féminin ou masculin Suivant, et sélectionner l'âge. Prochaine. Ici, l'utilisateur peut ajouter l' image de son profil, que ce soit par caméra ou par galerie. Cliquez ici pour terminer les étapes d'inscription. C'est bon. Nous avons maintenant créé un nouveau compte. Et c'est ce que nous allons construire à partir de zéro dans les prochaines parties, bien sûr, et je vous verrai dans la prochaine vidéo. 5. Ajouter un prototype: Nous allons maintenant choisir cette application parmi la communauté d'ici, c' est vrai, Dr app. Et choisissez avec cette liste de sélection Figma. Et maintenant, nous allons rechercher sur notre application. Oui, c'est exact. Cliquez ici. Procurez-vous une copie pour installer l'application sur l'espace de travail de votre compte. Alors c'est tout. Notre application est prête à y ajouter un prototype et des animations. Nous allons donc regrouper ces deux écrans pour les déplacer car nous n'en avons pas besoin dans notre exemple, nous allons choisir cette application car je vois qu'elle contient différents types d' écrans parmi lesquels nous peut appliquer plusieurs outils Figma. Et maintenant, je veux préparer l'espace de travail, l'emplacement de certains écrans. J'ai mis ceci ici et cela ici. Ensuite, nous terminons avec le reste. Et voici, nous zoomons ici. Copiez et collez pour cet écran. Nous allons le renommer en créant un compte. Et maintenant, sélectionnez les éléments et supprimez-les. Nous utiliserons cet écran pour le chargement lorsque l'utilisateur attend la création de son compte. Après avoir modifié ce texte pour créer un compte et l'avoir déplacé au centre de l'écran, je vois que cet endroit est le meilleur pour cette phrase. D'après mon expérience , l'emplacement des indicateurs de chargement est toujours au centre de l' écran. Juste ici. Réorganisez celui-ci un peu vers la gauche. Commencez dès maintenant à réaliser le prototypage du premier écran. Cliquez ici en prototype. Sélectionnez l'écran et associez-le au deuxième écran afin d'établir cette connexion entre eux. Cette fenêtre qui est apparue contient tous les détails de l'interaction. C'est ici la nature de l'interaction choisie. Et ici c'est l'action effectuée par l'utilisateur qui déclenchera l'action de l' application au toucher, au glissement tout en appuyant. Et après le délai, quand choisirai-je maintenant et changerai le délai à 1 500 millisecondes. Voici donc le type d'animation pour l'instant nous choisissons Smart Animate. C'est la fin de l'animation. Nous choisissons à nouveau cette animation linéaire et changeons ce paramètre de délai d'animation à 400 millisecondes. Mais vous pouvez choisir l'interaction dans détails de l'animation que vous souhaitez utiliser pour créer votre premier prototype. Essayons maintenant cette première interaction. Comme vous le voyez, nous passons de l' écran un à deux selon l' interaction choisie. Terminez maintenant la deuxième interaction avec la même méthode. Mais pour cette interaction, nous choisissons l'animation push et modifions le délai à 300 millisecondes. Entre ces deux écrans, nous utilisons le même type de traduction et conservons les mêmes paramètres que l'écran précédent. Maintenant, oui, nous choisissons l'écran de connexion. Ici, il suffit de vérifier les détails de l'interaction. Et comme les autres, conservez les mêmes paramètres. N pour n 0, inscrivez-vous. Ici, nous avons une connexion depuis l'écran de connexion avec ce bouton vers la page d'accueil. À ce niveau, nous effectuons les interactions entre les étapes d'enregistrement de la même manière. Et de ce bouton à l'écran suivant. Terminez ensuite pour tous les écrans avec la même méthode. À mon avis, le fait que ces paramètres aient des liens entre les écrans est particulier pour ce type d'application. Nous pouvons constater dans d'autres secteurs d' applications que le type d' animation peut être modifié pour offrir une autre expérience à l'utilisateur, par exemple dans les applications de jeu, toujours les transitions entre les écrans soient beaucoup plus rapides. De plus, nous changeons la durée à 3 000 millisecondes et choisissons le type d'animation. Animation intelligente. Et pour ce linéaire, également pour la durée de l'animation, vous devez augmenter le paramètre à 500 millisecondes renvoyées. Maintenant au centre de l'espace de travail. Pour cette interaction, changeons le type d'animation en animation intelligente. Linéaire : 500 millisecondes. Essayons maintenant le résultat de ces interactions. Cliquez ici pour tester. Prochaine. Ici, nous allons ajouter un bouton de retour. Continuez maintenant avec cette option sur l'écran d'inscription. Inscrivez-vous et résiliez. Il s'agit de l'interaction différée pour ouvrir l'écran d'accueil de l'application. Revenez à l'espace de travail et zoomez ici. Tout d'abord, nous allons ajouter l'icône de retour pour les écrans. Ici, à partir de l'icône, si je me branche directement dans ce champ, revenez à la recherche d'une icône. Voici la liste des icônes que nous pouvons choisir pour revenir entre les écrans, nous choisissons cette icône, l'icône d'importation, Super, l' icône est ajoutée avec succès. Nous allons simplement le redimensionner et le déplacer. Ici, à gauche de l'en-tête. Vous pouvez choisir d'autres types d' icônes à partir de l'icône. Si je me connecte, je recommande d' utiliser ce plugin car il contient de nombreux types d'icônes selon les besoins de votre application. À partir d'ici, changez sa couleur en blanc. Et avec le copier-coller, nous avons ajouté pour les autres. Encore une fois pour cette annonce la même icône et fermez les autres écrans pour qu'elle soit fonctionnelle et que nous puissions ajouter une interaction. Vous devez cliquer sur l'icône et choisir la sélection du cadre. Ajoutons maintenant l'interaction de retour pour les écrans qui contiennent des icônes, conservons les mêmes paramètres ici. Et pour l'animation, nous choisissons Push the duration à 400 millisecondes et continuons à ajouter une interaction pour cet écran. Mais cela n'a pas fonctionné correctement. Nous ajouterons la sélection de cadres aux autres écrans. Il est toujours nécessaire d' activer cette option pour que les composants puissent être utilisés lors des interactions entre les écrans. Nous passons maintenant à l'action de traduction et essayons à nouveau de l'ajouter. Conservez les mêmes options et passez aux écrans suivants. n'est pas nécessaire de configurer les paramètres des liens pour le reste des interactions. Figma conserve automatiquement les mêmes configurations d'écran précédentes. Encore une fois, nous testerons les progrès que nous avons réalisés. Très bien. Toutes les icônes repassent en mode design et zooment ici sur cet écran. Copiez maintenant l'écran du tableau de bord et renommez le trait de soulignement 1 du tableau de bord. Et les deux seconds, le tableau de bord en souligne deux. Ici, nous ajouterons une fenêtre contextuelle lorsque vous cliquerez sur l' image du profil. Ajoutez un rectangle en cliquant dans la zone façonnée. Afin de personnaliser une couche noire, nous allons utiliser une méthode très simple pour créer une teinte noire sur l'écran principal. Par conséquent, nous avons changé la couleur du rectangle en noir et avons diminué l'intensité de la couleur de cette manière après avoir ajusté le rectangle sur l'ensemble de l'écran. Mais ce rectangle pour la fenêtre contextuelle, nous le choisirons à cet endroit, ici à droite, en haut, juste au-dessus de l'image de profil. Ici, nous changeons le rayon de la forme. Nous choisirons une couleur blanche, bien sûr. Ajoutez maintenant les éléments de la fenêtre contextuelle, en commençant par la photo de profil. Ce lien pour accéder à l'écran de profil. Vous pouvez également personnaliser la taille de police à 25 pour qu'elle soit lisible par l'utilisateur. Ajout du deuxième lien pour entrer dans les paramètres du profil. Et enfin le bouton de déconnexion. Ici, pour le lien de déconnexion, nous pouvons choisir la couleur rouge pour le différencier des boutons des autres. Vous pouvez également ajouter une icône de déconnexion depuis le plug-in. Nous choisirons cette icône pour offrir une bonne expérience à l'utilisateur. Nous personnalisons la hauteur et la largeur de l'icône pour qu'elle soit plus lisible dans la fenêtre contextuelle. Changer à nouveau la couleur en rouge. Dans vos choix, vous devez toujours prendre en considération tout type d'utilisateur qui utilisera votre application et veiller à offrir la même expérience à tous. Nous ajoutons le prototype nécessaire pour cette fenêtre contextuelle. Nous choisirons le style d' affichage et de masquage de la fenêtre contextuelle. Lorsque vous cliquez sur l'image. Pour le bouton de déconnexion, vous devez activer la sélection du cadre pour l'utiliser dans l'interaction avec le prototype. Maintenant, nous choisissons les détails de l'interaction qui sont compatibles avec notre application. Super, essayons de photographier notre prototype à ce niveau. Sympa. La fenêtre contextuelle fonctionne bien. Revenons maintenant à notre espace de travail pour terminer le reste du prototype. Continuez maintenant, ajoutez une fenêtre contextuelle pour choisir l'option qui peut modifier votre photo de profil. Tout d'abord, changez le nom de cet écran pour changer de nom. Et copiez-le ici où nous pourrons créer notre image de changement contextuelle en guise de nom. Dans l'écran initial, nous ajouterons une icône ici, ce qui signifie que nous pouvons modifier la photo de profil. Cliquez avec le bouton droit ici. Icône des plugins de Phi. Recherchez ici une icône de caméra. Nous pouvons désormais utiliser cette icône, mais chacun peut choisir sa propre icône. Oh, c'est important dans cette partie. Nous pouvons donc le placer dans une ellipse, choisissant cette partie de l'ellipse des formes. Maintenant, déplacez l'icône vers le centre du cercle. L'icône est désormais masquée. Il se trouve en dessous du cercle. Avec cette option, Bring to Front, elle peut se déplacer au-dessus. Nous avons expliqué exactement l'utilisation de cette option dans le premier cours. Pour commencer avec Figma, nous le redimensionnons et le déplaçons comme ceci. Regrouper les deux comme ça pour les rapprocher. Maintenant, nous le déplaçons dans une photo de profil. Maintenant, dans le deuxième écran, nous allons ajouter une fenêtre contextuelle afin que l'utilisateur puisse choisir la manière de modifier sa photo de profil, quelle qu'elle soit, de choisir une image dans la galerie ou de prendre une photo avec son smartphone. Tout d'abord, nous allons ajouter une couche noire en utilisant rectangle à faible transparence de couleur noire. Nous allons configurer les paramètres d' apparence du rectangle comme dans l'écran précédent. Et maintenant, ajoute un rectangle pour papa. Changeons la couleur de la fenêtre contextuelle en blanc et ajoutons deux icônes, l'une pour la galerie et l' autre pour l'option caméra. Nous allons personnaliser ces deux icônes ici. Dans la fenêtre contextuelle. Nous allons modifier la largeur et hauteur de l'icône de la caméra à 30, et il en va de même pour l'autre icône. Suite aux commentaires de mon projet précédent, vous devez toujours utiliser les icônes pour permettre à l'utilisateur de faire rapidement son choix. Nous allons donc ajouter les mots, caméra et galerie avec la même police pour cela. Nous les avons regroupées ainsi pour les personnaliser ensemble. N'oubliez pas d'ajouter le bouton Retour à l'écran initial. Nous allons maintenant ajouter l' interaction entre ces images. Passez en mode prototype. Choisissez cette icône et associez-la à l'écran ci-dessous. Pour l'animation, nous choisissons l'instantané. Et le retour au premier écran. Ici, nous modifions un peu les champs de saisie du repas et du mot de passe. Mais d'abord, nous testerons notre dernier changement de prototype. Allons-y, commençons. Livres. Le mot caméra n'existe pas en mode prototype. Ici, sur la gauche, nous allons vérifier l'emplacement de ce mot et le comparer avec les autres. Comme vous le voyez, il doit être déplacé ici, juste en dessous de la galerie. Je ne sais pas pourquoi il est placé ici, mais chaque composant doit toujours se trouver sous l'écran correspondant. Et réessayons. Super, la fenêtre contextuelle s' est correctement affichée. Revenons maintenant à l' évolution de ce domaine. Nous allons d'abord ajuster cette saisie de texte pour la largeur 300 et pour la hauteur 40. Et nous changeons également la taille de police à 14. Avec la même méthode, nous avons changé le deuxième champ de mot de passe. Nous apportons cette modification parce que je constate que ces champs sont difficiles à lire pour l'utilisateur. Ensuite, nous ajouterons des icônes pour offrir une meilleure expérience que dans la version initiale. Je souhaite déplacer l' e-mail et le mot de passe vers la gauche afin d'ajouter des icônes ici. Donc, à partir de l'icône, si je me connecte, nous importons deux icônes, une pour le mot de passe et l'autre pour l'e-mail. Je veux choisir une icône comme personne pour le champ masculin et une clé pour le mot de passe. Après avoir importé les icônes, nous nous déplacerons vers la gauche du champ, mais nous devons avant tout le personnaliser. Maintenant, je veux changer de couleur pour attendre. Génial. Maintenant, l'écran est devenu meilleur. Mais vous devez quand même ajuster ce mot de passe oublié. Et le sous-titre de l'écran. Nous allons maintenant sélectionner toutes les modifications que nous avons apportées à copier dans l'écran ci-dessous. Avant de le supprimer pour mettre les nouveaux champs à sa place. Collez ici et placez-le au centre de l'écran. Contrairement aux autres, nous changeons cela. Génial. Nous avons maintenant terminé avec cet écran, et je vous verrai dans la prochaine partie. 6. Ajouter une animation intelligente: Nous commençons maintenant avec cet écran pour ajouter une animation à cette image, passée en mode design. Tout d'abord, nous faisons une copie pour l'écran. Nous le copions juste en dessous de l'autre. Lorsque vous souhaitez ajouter une animation sur un écran, vous devez toujours dupliquer l'écran initial et apporter les modifications sur le second. Ensuite, nous choisissons la meilleure configuration et le type de transition entre elles. Et nous avons changé le nom en onboarding pour pointer vers. Maintenant, qu'allons-nous faire ? Nous faisons glisser l'image légèrement vers le haut, cette façon pour qu'une animation animée apparaisse à l'utilisateur lorsque la souris passe sur l'image. Ajoutons maintenant le lien entre ces deux écrans. Donc, juste l'image du premier écran est noire et liée au deuxième écran comme ceci. Vous devez maintenant changer l'option pendant le survol et changer l' effet d'animation en animation intelligente. Et nous pouvons également modifier le délai d' animation à 500 millisecondes. N'oubliez pas de supprimer ce lien. Nous n'avons laissé que les anciens liens de l'écran initial. Essayons les modifications apportées. Comme vous le voyez maintenant, lorsque vous passez la souris sur l'image, l' animation démarre. Nous passons à l'autre animation sur ce bouton, lancez-vous. Nous ferons de même pour les autres animations. Copiez l' écran initial et collez-le ici. Changez le nom en Onboarding 2.3. Juste pour différencier les écrans. Nous allons changer la couleur ou augmenter la saturation du bleu. Comme ça. De la même manière, la suppression des liens provient de l'écran initial. Nous supprimons les liens entre les écrans afin de faire notre choix d'animation. Et ajoutez une nouvelle interaction entre ce bouton et l'écran ci-dessus. Nous laissons les paramètres comme première animation. Mais vous devez ajouter le lien principal lorsque vous cliquez dessus, Get Started pour passer à l'écran suivant. Très bien. Même les paramètres sont correctement configurés. Il suffit de changer le type d'animation pour pousser et de réduire la durée de l'animation à 300 millisecondes. Ici, chacun de vous peut choisir sa propre configuration pour créer un autre type d'animation. Essayons maintenant les modifications apportées au bouton. Super. L'animation est bien configurée. Lorsque vous passez la souris sur le bouton. Et après quelques millisecondes, la couleur change avec une animation fluide. Juste, j'ai remarqué qu' il était nécessaire de diminuer un peu le délai de cette animation. Pour cette animation à 300 millisecondes. Nous essaierons une autre fois. Bien, c'est mieux maintenant avec les derniers changements. Maintenant, nous recommençons avec le deuxième écran, l' animation des boutons et l'image. C'est bon maintenant, après avoir ajouté les animations nécessaires pour cet écran, elles sont similaires aux animations du premier écran. Essayons en mode prototype. Ici, nous avons changé le type d' animation par rapport à l'autre écran. Oups, j'ai oublié d'ajouter le lien. Quand je clique sur le bouton. Nous revenons ici en mode prototype. Nous l'ajoutons simplement comme pour les autres interactions. Nous le laissons comme s'il était bien configuré par défaut. Juste une remarque. Les paramètres des interactions restent toujours tels que la dernière configuration ajoutée. Nous vérifions maintenant le reste des liens. Et réessayons. Bien, toutes les interactions sont paramétrées. À l'étape suivante, nous ajouterons différentes animations sur ces boutons. Copiez, inscrivez-vous sur l'écran et collez ici juste en dessous de l'écran initial. Et il a changé de nom pour s'inscrire ? Oui. De la même manière, passez sur un autre écran et déplacez-le en dessous. Ici, nous avons changé le nom pour m'inscrire. Non. L'un des écrans pour l'animation lorsque l' utilisateur souhaite choisir ? Oui. Et l'autre écran pour l'animation de NO choice. Comme le montre la démonstration du prototype au début du cours, lorsque l'utilisateur passe la souris sur l'un des boutons « oui » ou « non », la couleur passe du bleu au blanc. Donc, pour commencer, vous devez changer la couleur de deux boutons en bleu. Ici, nous choisissons la même couleur de boutons oui, avec ce sélecteur de couleurs. Mais le mot NON a disparu car elle était de la même couleur, le bleu. Vous devez donc changer sa couleur en blanc et activer cette vente aux enchères. Mettez-le au premier plan. Nous avons maintenant terminé cet écran. Nous passons à la suivante. Pour cet écran, nous ajoutons l'animation des boutons. Oui. Je vais changer la couleur en blanc pour cela. Et ajoutez ce trait d'option pour personnaliser un contour, comme l'autre bouton, change de couleur en bleu avec la couleur du sélecteur. Encore une fois, dans le même cas, vous devez changer la couleur du mot oui. Ensuite, nous avons changé la couleur des boutons NON, en bleu. Et encore une fois, Bring to Front. Continuons avec le deuxième écran, en changeant la couleur des boutons, contrairement à l'écran précédent. Mais je vais d'abord modifier la taille de la bordure pour qu'elle soit plus claire. Par exemple, I. Correction d'un free. Cet écran est presque prêt, comme les autres boutons, je vais juste fixer la taille de la bordure à trois. Passons maintenant au mode prototype pour ajouter l'animation entre les écrans. Tout d'abord, nous supprimerons tous les liens vers ces deux nouveaux écrans. Et pour l' écran initial, nous commençons par oui, supprimé d'ici. Et liez l'écran de connexion à l'écran d'inscription Oui, écran. Nous avons choisi ce type d' animation juste pour maîtriser les différents outils Figma et découvrir d'autres techniques qui peuvent vous aider dans vos propres projets. Et maintenant, nous ajoutons le lien de l' animation d'interaction. Oui, avec l'écran juste en dessous, je choisis en survolant les enchères de déclencher l'animation et de modifier l'animation pour qu'elle se dissolve. Et il en va de même pour le bouton NON, dissociez-le de l'écran d'inscription. Faites défiler la page vers le bas jusqu'à cet écran où nous ajoutons l'interaction avec les boutons du panneau. Il reste maintenant que la connexion entre l'écran initial et l' écran ci-dessous a été enregistrée. Non. Eh bien, nous avons terminé pour ces deux animations. Essayons maintenant. Mixte. Comme vous le remarquez ici, lorsque vous passez la souris sur l'un des boutons, la couleur change. Cliquez. Oui, nous avons accédé à l'écran de connexion. Et il en va de même pour le bouton NON. Oups, nous remarquons ici que les champs e-mail et mot de passe ont disparu comme ceci dans l'écran de connexion. Nous retournons dans notre espace de travail pour corriger le problème. Changez le mode de conception. Nous choisissons toujours cette option, la sélection par groupes, afin de faciliter le déplacement des composants sans modifier les mesures entre eux. Tout d'abord, nous sélectionnons tous les composants et nous avons grandi avec cette option. Ensuite, je mettrai au centre de l'écran et je cliquerai sur placer au premier plan. Et nous réessayons. C'est bien maintenant que les champs sont apparus sur les deux écrans. Nous continuons donc à ajouter une autre animation sur les options masculines et féminines de cet écran. Ici, nous ajoutons une animation simple lorsque l'utilisateur souhaite choisir l'une de ses options, le cercle s'agrandit légèrement, comme on le voit dans la démo du prototype. Comme dans les autres exemples, nous réalisons deux copies de l'écran initial. Ici, il suffit de changer le nom des écrans pour les différencier. Nous commençons par l'option mail. Sélectionnez le bouton et modifiez la largeur et la hauteur sur 105. Nous allons maintenant ajouter un autre type d' animation que j'ai utilisé dans mes projets personnels. Et comme je l'ai dit, chacun peut inventer d'autres types d'animations et les déguiser comme il le souhaite. De plus, je peux modifier la taille de la police et les placer au centre du cercle. Sympa. Cet écran est prêt. Nous pouvons passer au suivant. Pour cela, nous ferons tout le contraire. Les modifications se feront sur le bouton féminin. la même manière, vous devez modifier la taille du bouton et la taille de la police de f. Maintenant que les écrans sont prêts, nous passons au mode prototype. Donc, à partir de l'écran initial, je sélectionne cette option et je la relie à l'écran ci-dessous, où je peux choisir en survolant les paramètres d'interaction et mode instantané pour l'animation. Nous avons terminé avec la vente aux enchères féminines. Je vais créer un lien entre l'écran initial et le deuxième écran, en conservant les mêmes paramètres pour les détails de l'interaction. Essayons maintenant ces derniers changements. Le bouton femelle ne fonctionne pas. Revenez sur l'espace de travail pour vérifier le problème. Je sélectionne le clignotement féminin. Devez-vous changer ici en survolant. Option. Super, revenez maintenant pour vérifier le prototype. Maintenant, l'application fonctionne correctement. Ici, nous allons terminer les étapes jusqu'à l'écran d'accueil. Nous allons ajouter un spinner ici dans cet écran, juste au-dessus de la création du compte. Dans l'expérience utilisateur, il est nécessaire d' ajouter un indicateur tel le spinner afin que l'utilisateur sache qu'un processus est en cours d' exécution dans l'application. Et je te verrai dans la prochaine partie. 7. Créer un Spinner: Donc, ici, je vais ajouter notre spinner. Je vais juste créer un rectangle pour voir également notre spinner. Je vais créer un cercle avec toi. Et nous utiliserons le moyen le plus simple pour préparer notre spinner. Ici, je vais changer la couleur du rectangle pour lire et le personnaliser sur une taille de cercle de 500 x 500. Vous pouvez donc voir ici que ces arcs sont là. Nous pouvons donc venir ici. Ici. Nous allons le faire passer à 65 %. Et si vous pouvez le laisser comme ça, ou si vous voulez créer un rayon de bordure ici, 43 me convient. Vous pouvez donc voir que vous pouvez le déplacer et plus tard, c'est ce que nous allons faire. Ce sera donc notre premier rendez-vous avec le spinner. Nous pouvons le renommer en Spinner en haut à droite. OK, ce sera notre premier État. Nous allons maintenant en dupliquer un autre. Donc, ce que nous allons faire dans l'état suivant, c'est effectuer une rotation vers le bas. Pour cela, nous voulions 90 degrés. Ici, nous allons changer le nom du deuxième élément en spinner. En bas à droite. Nous ajoutons les états gauches du spinner, hasty ou autre élément et le détachons comme ceci. Après, je l'ai fait pivoter à 180 digress et changé le nom en spinner left. Et nous en avons terminé avec le dernier état et changeons sa digresse comme ceci. Nous avons également changé le nom en haut à gauche. Nous allons donc créer un corps avec tous ces composants. Nous allons les combiner en tant que variante. Telle sera la position. Il est donc important que lorsque vous voulez animer quelque chose de manière intelligente, vous ayez besoin des mêmes noms. Ellipse 111. Commençons par celui-ci et passons en mode prototype. Maintenant, nous le relions à l'élément en bas à droite, ici sur les détails de l'interaction, nous choisissons l'option après le délai et modifions la durée à une milliseconde. Laisse-le en bas à droite. Mais pour le style d'animation, nous pouvons choisir l'animation intelligente et, pour cela, choisir l'option d' entrée et de sortie facilitée. Corrigez également ce paramètre à 200 millisecondes. la même manière, vous devez compléter le reste des éléments. Conservez les mêmes paramètres ici. Remplacez ce paramètre par « Après délai ». Mais je reviens au dernier état car j'ai oublié de changer la durée à une milliseconde. Nous terminons maintenant l' interaction du dernier élément. Nous ajoutons ce type d'animation pour faire tourner après chaque arc jusqu'à la fin de son cycle, puis l'autre art commence et il en va de même pour les autres. Afin d'avoir un spinner complet. Le spinner est prêt, il suffit d'aller ici sur le côté gauche et nous passons à la navigation des actifs. Mais après tout, vous devez changer la couleur des éléments en noir. Changez le mode de conception. Sélectionnez les états, et choisissez ici la couleur noire. Revenez maintenant aux actifs et zoomez ici pour accéder à l'écran de création de compte. Faites glisser le composant comme suit. Mais il y a un petit problème ici où vous devez réduire la taille de chaque composant. Nous avons maintenant terminé de réduire la taille de tous les composants. Revenons maintenant à l'écran. Comme vous le remarquez, la taille est réduite et plus cohérente avec le reste des éléments de l'écran, et nous choisissons la bonne position supérieure démarrer l'animation. Nous déplaçons le composant au centre comme ceci. Bien Essayons cette centrifugeuse. Il suffit de choisir cet écran et de cliquer ici pour commencer. Nous avons également remarqué que la taille du spinner est encore plus grande que les éléments de l'écran. Nous sommes donc revenus à l'espace de travail et vous devriez réduire la taille de tous les États de cette manière. Bien, on déplace une toupie vers le centre comme ça. Et réessayez. Ici, il ne reste plus qu'à modifier la vitesse de déplacement de chaque composant. Pour obtenir une animation fluide, vous devez ajuster le délai de chaque interaction entre les arcs. Je sélectionne le premier lien et modifie la durée de l'animation à 100 millisecondes. Et répétez la même chose pour les autres États. Je pense que ce changement nous donnera de meilleurs résultats. Bien. Maintenant, pour continuer, vous pouvez choisir d'autres types d' animation et d'autres détails d' interaction. Chacun peut adapter la centrifugeuse à son choix et il existe d'autres types d'indicateurs de charge. Tout le monde peut essayer un autre type utilisant le même principe d' animation intelligente, comme le spinner, par exemple chargeant les indicateurs de progression linéaires des acheteurs. Nous avons terminé le prototype de cette partie d'une application Dr . Nous supprimons maintenant ces deux écrans. Nous avons maintenant terminé notre projet à partir duquel nous avons utilisé plusieurs techniques de prototypage et différents types d'animations qui peuvent vous aider dans vos prochains projets. Et je vous verrai dans la dernière partie du cours où nous verrons le résultat final. 8. Aperçu final: Enfin, passez en mode prototype. Et allons essayer notre application. Cliquez et commencez et continuez à ouvrir notre application. Choisissez cette option pour passer à l'écran d'inscription. Ici, en testant cette icône de caméra, laquelle nous pouvons ajouter les écrans correspondants pour ces deux options, caméra ou galerie. Pour cette étape, le tableau de bord est ouvert où il peut se déconnecter et revenir à l'écran de connexion. Maintenant, nous avons terminé, et je vous verrai au prochain cours.