Le cours ultime de prototypage et d'animation Figma

1. 01 Introduction: Les designs statiques sont ennuyeux. Si vous voulez donner vie à votre interface utilisateur, apprenez à créer rapidement un prototype interactif fluide dans Figma Dans ce cours, vous apprendrez la micro-interaction, créerez des animations de boutons attrayantes, des transitions de page, concevrez des flux de navigation fluides, animerez intelligemment et donnerez vie aux éléments de votre interface utilisateur Apprentissage pratique par projet en construisant de vrais prototypes, sans fioritures, compétences pratiques, que vous soyez débutant ou concepteur UIUX, ce cours fera de vous un pro du prototypage et de l' animation en un prototypage et de l' animation en Améliorez vos compétences en conception d'interface utilisateur, inscrivez-vous dès maintenant et commencez à animer dès 2. 02 Prototypage de base dans Figma: Si vous souhaitez commencer à concevoir dans Figma, mais ne savez pas par où commencer, laissez-moi télécharger et installer Figma en quelques étapes Ouvrez votre navigateur et rendez-vous sur figma.com. Pour utiliser Figma sur votre ordinateur de bureau, rendez-vous sur la page de téléchargement et installez l'application ou le fabricant ou la fenêtre de bureau Figma C'est ça. Ouvrez maintenant Figma créez un nouveau fichier et commencez à concevoir Bon, comme nous pouvons le voir, nous sommes à l'intérieur de FigMA. Dans ce cours, nous ne nous concentrerons pas sur la conception de l'interface utilisateur Nous nous concentrerons uniquement sur le prototypage et l'animation. s'agit donc que d'une courte vidéo de préchauffage pour le prototypage dans Pigma Si vous débutez dans le prototypage, cette vidéo est parfaite pour vous permettre de comprendre comment fonctionne exactement le prototypage Pigma Dans la prochaine vidéo, nous allons démarrer un projet pratique de prototypage Commençons donc. Tout d'abord, nous devons sélectionner le cadre. Cliquons donc sur ce cadre. Et comme vous pouvez le voir sur le côté droit, nous avons plusieurs préréglages ou cadres fournis par Pigma, ce qui nous permet de sélectionner l'iPhone 16 Et comme nous pouvons le voir, notre cadre est créé, nous devons d' abord le renommer, il s'agit donc de l'écran 1 D'accord. Maintenant, il suffit de créer quelques éléments ici. Sélectionnons donc notre rectangle et dessinons un rectangle. Comme vous pouvez le voir, c'est ainsi que nous pouvons créer une ligne centrale de rectangle, et ensuite, nous devons changer la couleur du rectangle. Maintenant, sélectionnons notre premier cadre, appuyons sur la commande D sur le clavier et comme nous pouvons le voir, le deuxième écran est créé. Dans le deuxième écran, modifions-le rapidement et changeons la couleur de ce rectangle en vert. Maintenant, sélectionnons notre premier prime, cliquez sur prototype, et comme nous pouvons le voir, nous devons d' abord sélectionner Afficher les paramètres de prototypage Et ici, comme on peut le voir, il s'agit de l'iPhone 16. Donc, Figma, par défaut, sélectionne iPhone 16, maquette pour nous D'accord. Ici, nous pouvons changer de couleur. Donc, comme nous pouvons le voir, coloriez le fond, et nous pouvons simplement le changer. Laissons donc cette couleur bleue, et nous pouvons utiliser le portrait et le paysage. Et changeons la couleur du téléphone. Alors faisons-le bleu sarcelle ou utilisons peut-être cette couleur rose. Et ici, nous pouvons simplement passer aux autres appareils si vous le souhaitez. Nous avons donc déjà créé notre taille de jeu de mots, alors restons-en à l'iPhone 16 Ensuite, nous devons cliquer à nouveau sur notre cadre en pus, comme nous pouvons le voir ici, nous voyons le plus avec le cercle. Créons donc notre clic sur les nouilles au pus et, comme nous pouvons le voir, Figma crée ce lien, appelé Faisons donc glisser les nouilles et les connectons à l'écran. Maintenant, c'est le début de la partie amusante Comme nous pouvons le voir, la première option est le déclencheur, puis l'action, puis la destination, l'animation, la courbe et la durée. Ce sont les principaux éléments magiques du prototypage Pigma. Tout d'abord, sélectionnons Bdpart this on tape et voyons ce qui se passe Sélectionnons-le et comme nous pouvons le voir il s' agit du flux 1 et voici notre flux 1. Sélectionnons-le et renommez-le en prototype. Et voici l'interaction, et comme nous pouvons le voir, nous pouvons simplement changer cela à partir d'ici, et cela est disponible si vous souhaitez changer quoi que ce soit. Cliquons rapidement sur cette icône de lecture, et comme nous pouvons le voir, notre téléphone apparaît lorsque je tape et cela passe à cet écran. Il s'agit du prototypage de base. Maintenant, cliquons dessus et utilisons-en une à la place de la cassette. Pour l'ORG, encore une fois, nous allons simplement cliquer sur l'aperçu et simplement le faire glisser pour qu'il passe à l'écran. Maintenant, changeons cela while hooring » et c'est intéressant Vérifions-le. Comme nous pouvons le voir, Hering au deuxième état et maintenant au premier état, alors qu'il passe au deuxième état et au premier Cela changera donc au fil des heures. C'est donc mieux pour l'effet horaire des boutons ou pour toute autre animation que nous voulons, afin que nous puissions créer du wiling. OK, voyons maintenant rapidement les autres propriétés lorsque vous appuyez sur Alors, cliquons et prévisualisons, et une fois que j'appuierai, comme vous pouvez le voir, cela changera. Passons donc rapidement à la touche et à la manette de jeu. Bien, parlons de la manette de jeu Key Slash. Pour cela, nous devons attribuer une touche de clavier et cela déclenchera l'animation. Disons donc que si j' appuie sur la barre d'espace, comme nous pouvons le voir, l'espace est là, cela déclenchera l'animation. Cette fois, cliquons sur cette pièce. Nous pouvons également créer une fenêtre séparée qui affichera notre prototype. Et comme nous pouvons le voir, c'est couleur que nous attribuons à l'arrière-plan, et c'est notre téléphone dans une fenêtre séparée. Nous pouvons prévisualiser en deux types. L'un est comme ceci, mode actuel, qui est une page séparée, et ici nous pouvons prévisualiser, et l'autre est comme un aperçu, et celui-ci est présent. Comme vous pouvez le voir, je clique et cela ne fonctionne pas, mais une fois que j'appuie sur la barre d'espace, cela fonctionne D'accord. Voici donc comment fonctionne la manette de jeu, et changeons cela en entrée de souris, souris, sortie, retouche, toucher, bas Ce sont les mêmes fonctions que ci-dessus, vous pouvez les tester et voir comment elles fonctionnent. Mais le plus important, c'est après le délai. C'est cette fonctionnalité que nous utiliserons le plus. Révélons-le rapidement et cliquez sur Sélectionner après le délai. Et ici, nous devons attribuer du temps. Comme le temps dont nous aurons besoin après cette période, terminez le jeu d'animation OK. Ainsi, par exemple, nous définissons le déclencheur et le sélectionnons après le délai, et nous attribuons ici le temps 800 millisecondes Supposons que nous atteignons 1 000 millisecondes, ce qui équivaut à 1 seconde, et que maintenant notre action consiste à passer ce qui équivaut à 1 seconde, à l'écran deux et que Smart Animate est en direct, nous en discuterons sous peu, mais testons-le rapidement Je vais donc utiliser à nouveau cette fenêtre. Et comme on peut le voir, au bout d'une seconde, l'animation joue, c'est une fonctionnalité vraiment cool. Maintenant, voyons voir, nous avons découvert toutes ces fonctionnalités du déclencheur, et maintenant il est temps de regarder l'action. Donc, pour ce qui est de l'action, nous ne discuterons pas de ces fonctionnalités. Nous n'utiliserons cette navigation que pour faire une fonctionnalité. Et c'est essentiellement la destination. Nous voulons donc que Fegma précise la destination. Il s'agit donc du premier écran et la destination sera le deuxième écran. Il est donc automatiquement sélectionné lors de la création de notre OK. Ensuite, nous devons définir l'animation. Donc, pour l'animation, disons que je sélectionne d'abord Instant. D'accord. Commençons donc par l'instant. Et passons rapidement en revue cela. Ainsi, au bout d'une seconde, instantanément, l'état B apparaît comme sur le deuxième écran. OK, revoyons-le à nouveau. Au bout d'une seconde et rapidement, rien ne s'est passé et l'écran 2 apparaît instantanément si vous souhaitez rejouer notre action Il suffit donc d'appuyer sur R sur le clavier, et comme vous pouvez le voir, il se recharge Nous utiliserons beaucoup D yard cut, donc pas de problème, vous apprendrez très facilement. D'accord. Alors maintenant, comme nous pouvons le voir, faisons-le dissoudre. Prévisualisez rapidement ceci. Et comme nous pouvons le constater, cela ressemble à un effet de dissolution. Passons maintenant à Smart Animate. C'est la fonctionnalité la plus utilisée, et c'est la fonctionnalité la plus avancée si vous souhaitez créer une animation sympa, et sélectionnons-la rapidement, voyons-la. D'accord ? Cliquons donc sur ce bouton de lecture, et comme vous pouvez le voir, après 1 seconde, animer intelligemment Ainsi, l'animation intelligente crée essentiellement un lien entre le premier état et le second état, et cela se voit comme une méthode fluide Donc, comme nous pouvons le voir, appuyez à nouveau sur R pour recharger notre animation, ça a l'air génial Il semble donc que le rectangle soit petit, puis qu'il s'agrandisse. Et voilà à quel point Animate Okay est intelligent, mais assurez-vous que nous n'avons pas besoin changer de couleur, désolé, le nom après le rectangle Comme, par exemple, dans le rectangle 1 de l'État A, ici, comme nous pouvons le voir dans le rectangle 1 et dans l'État B, voici également le rectangle 1. Si nous changeons ces deux, disons le rectangle deux. Donc maintenant, comme nous pouvons le voir, le lien entre ces deux rectangles est rompu. Nous avons un lien vers la page, mais Smart Animate ne fonctionnera pas Comme vous pouvez le constater, il n'y a aucun mouvement entre deux rectangles Assurez-vous donc d'avoir le même nom pour les deux rectangles et faisons-en un rectangle pour les deux. Cela va fonctionner. Et comme vous pouvez le constater, nous pouvons simplement changer cela comme, par exemple, si je fais un tour complet, passe à 99 et maintenant cliquons sur Prototype. Et cette fois, je vais utiliser raccourci Shift spacebr cliquons sur Shift (barre d'espace) pour une belle apparence Du cercle au rectangle. C'est ainsi que cela fonctionnera. Maintenant, sélectionnez à nouveau et ici, changeons cela pour que nous connaissions l'animation intelligente et que vous puissiez également consulter ces fonctionnalités, vous pouvez vous entraîner et OK Passons maintenant à cette fonctionnalité. D'accord ? Ce sont les plus importants. Commençons donc par le linéaire et vérifions-le rapidement. Comme vous pouvez le constater, le linéaire est comme une animation fluide du début à la fin. y aura donc pas de rebond ni de premier état ni de second état, les deux animations fonctionneront dans le même flux Maintenant, vérifions d'abord la fonctionnalité es in. Passons donc rapidement en revue es in et cela commence lentement puis redevient normal. C'est donc comme ça que je travaille. Cela va maintenant s'assouplir, donc assouplir, par exemple, cela transférera la charge et deviendra plus facile à la fin. Vérifions-le rapidement et, dans la mesure du possible, dans certains cas, nous en utiliserons différents selon nos besoins. Nous utiliserons donc cette fonctionnalité de manière beaucoup plus facile à entrer et à sortir. Il se chargera facilement et au centre, il restera constant, et à la fin, il se déchargera plus facilement. Vérifions-le donc rapidement. Oui dedans, oui dehors. Vous pouvez rapidement vérifier ces fonctionnalités, et plus tard dans le cours, nous les apprendrons de manière pratique. Vous pouvez donc vous entraîner. Et c'est ainsi que les bases du prototypage et restez à l'affût du cours. D'accord ? 3. Animation Figma 03: OK, maintenant il est temps de travailler sur le vrai projet, et il s'agit essentiellement d'un processus d' inscription lent, et commençons. Nous devons donc d' abord sélectionner ces quatre cadres, puis cliquer sur ce 90 degrés et le mettre à zéro. Et dans l'espacement intérieur, tapons 200. Alors maintenant, comme nous pouvons le voir, notre mise en page est au format vertical, et cela semble parfait. Commençons maintenant à créer notre première animation d'écran. Pour cela, nous devons dupliquer cet écran. Sélectionnons donc l'écran et actualisons Fk sur le clavier. Ce cercle bleu apparaît donc. Alors maintenant, cliquons sur ce plus. Et comme nous pouvons le constater, nous dupliquons ou dupliquons à l'écran une fois de plus. C'est donc essentiellement pour le fond, c' est pour le logo. C'est pour le titre, pour la barre de progression et le bouton. D'accord, voici comment nous devons créer une copie du même écran. Et maintenant, renommons-le rapidement pour que celui-ci soit en arrière-plan La seconde sera Faisons en sorte que celle-ci soit une barre de progression, et celle-ci soit un logo. OK, comme nous pouvons le voir, nous avons créé plusieurs copies de l'écran de démarrage. Commençons donc par le contexte. Nous supprimerons tous les éléments, sauf l'arrière-plan. Supprimons donc tous ces éléments et nous n'avons besoin que de l' arrière-plan ici. D'accord, dans cet écran, nous allons également supprimer tous les éléments sauf la barre de progression. Et pour le logo, nous allons reprendre le même processus Maintenant, nous devons travailler sur le fond Ici, comme nous pouvons le voir, il s'agit du cadre et nous avons créé Ellips . Pour l'ellipse, nous appliquons cette couleur bleue et voici la propriété du flou Donc, dans ce cadre pour l'animation d' arrière-plan, nous allons apprendre à animer le flou d'arrière-plan Nous allons également ajuster l'opacité. Nous allons découvrir ces deux propriétés dans cette animation de fond. OK. Sélectionnons donc arrière-plan et appuyons sur la commande Option K sur le clavier pour créer un composant. Nous pouvons également utiliser le raccourci. D'accord, nous allons maintenant créer un composant d'arrière-plan, afin de sélectionner le cadre d'arrière-plan et de cliquer ici sur cette icône ou d' utiliser le raccourci clavier. Utilisons donc la commande d' option K. Comme nous pouvons le voir, nous la convertissons en composant, et nous allons maintenant créer une variante du même composant. Nous allons donc sélectionner l'arrière-plan et cliquer sur ce plus pour créer une variante. Et il s'agit de la variante 2. Appuyez maintenant sur la commande D sur la troisième variante du clavier et dupliquez une fois de plus. Comme vous pouvez le constater, nous avons créé quatre variantes du même arrière-plan. Maintenant, cliquons sur le cadre principal d'arrière-plan et ajoutons un peu d'espacement, donc 100 c'est bien Et cliquons sur l'option Redimensionner pour l'adapter. Nous devons donc voir tout le cadre à l'intérieur ou le cadre du composant. Nous allons donc maintenant commencer par la première image. Double-cliquez donc et sélectionnons Ellipse. Sortons-le légèrement du cadre, quelque chose comme ça. OK. Et comme nous pouvons le voir, le cadre Ellipse est ici à l'extérieur du cadre. Dans le deuxième cadre, nous voulons que l'ellipse soit sur le côté gauche. Quelque chose comme ça. Dans le troisième cadre, nous voulons que notre ellipse soit en bas dans ce coin. Enfin, dans le quatrième cadre, nous avons besoin que l'ellipse se trouve quelque part ici C'est ainsi que nous créons la position de l'ellipse d'arrière-plan et modifions maintenant la propriété de l'ellipse. Sélectionnons l'ellipse et cliquons sur le flou du calque Ici, nous allons le rendre flou à 500. En même temps, modifions l'ovacité en appuyant sur la touche numérique du clavier. Essayons 70 % ou 60 % pour la deuxième image, pour la troisième, changeons d' abord la propriété de flou Faisons en sorte que 400 changent également l'opésité. Alors, faisons-le à 50 %. Et ici, nous devons changer les propriétés du sang. Essayons donc 700 OK. Maintenant, connectons toutes ces images dans le prototype, puis nous passerons en revue l'animation. Cliquons sur le prototype et à l'intérieur du prototype, cliquons sur le signe plus et faisons glisser la nouille la deuxième image, changeons le déclencheur après un certain délai sur la deuxième image, changeons le déclencheur après un certain délai et passons d'une milliseconde à la variante de propriété 2 et à l' animation intelligente. Nous utiliserons Smart Animate Nous utiliserons Au lieu d'assouplir es, nous utiliserons le linéaire, nous voulons donc une animation linéaire. Et pendant cette durée, essayons 300, alors nous verrons la différence et nous la mettrons à jour. OK. C'est donc la propriété de base pour la première et la deuxième image. Créons un autre nouille et connectons le troisième écran, qui est la variante 3, et ce sera également le cas après un délai Une milliseconde, nous voulons un instant sans délai, et faisons en sorte que ce soit intelligent, animate Et maintenant, créons un quatrième écran, et faisons-le après délai. Une milliseconde change de propriété variante 4, smart Nous devons maintenant le recopier pour le prévisualiser. Sélectionnons donc BGroundPFrame et appuyons sur la touche Option du clavier pour en créer une copie Il est maintenant temps de prévisualiser notre animation et de la modifier si des modifications sont nécessaires. Appuyez donc sur Shift et sur la barre d'espace du clavier, appuyez à nouveau sur R pour rejouer, appuyez à nouveau sur R. Maintenant, notre animation semble bonne, mais nous devons réduire la vitesse. Pour réduire la vitesse de l'animation, cliquons à nouveau sur la cassette prototype , cliquez après délai, et nous devons la créer au lieu de 300, essayons 3 000 millisecondes Sélectionnez le même. Pour le second, nous en ferons 3 000. Et passons pour celui-ci à 3 000. OK. Vérifions-le. Je pense que nous n'avons pas connecté la dernière à la première pour l'animation en boucle une fois que nous avons atteint la dernière image Elle redémarre donc à nouveau. Cliquons donc sur le dernier cadre et connectons-le à nouveau au premier cadre. OK ? Donc, après un délai, une milliseconde et 3 000 OK. Maintenant, sélectionnons à nouveau le cadre, libérez la barre d'espace sur le clavier. Et comme nous pouvons le constater, notre animation est très fluide et douce et notre arrière-plan bouge. Voici une animation floue. Dans ce contexte, nous apprenons deux types d'animation comme la propriété de flou et l'opacité Changez l'opacité et le flou dans cet arrière-plan, et nous avons créé cet effet cool. Maintenant, sélectionnons, cliquez sur le ruban adhésif et sélectionnez ce cadre, appuyez sur la commande X du clavier, et remplacons-le par celui-ci, cliquez sur le rythme pour le remplacer. Et la ligne centrale est à la fois verticale et horizontale. Maintenant, sélectionnez ce cadre et appuyez sur la barre d'espace Shift sur le clavier appuyez sur la barre d'espace Shift sur le clavier. Comme nous pouvons voir que notre arrière-plan s'anime et qu'il regarde, il est temps de travailler sur la barre de progression, et nous allons faire de même pour la barre de progression Appuyez sur la commande Option K pour la convertir en composant, et maintenant cliquons sur la propriété Ed variant Ici, nous devons créer trois variantes. Appuyez donc à nouveau sur la commande D pour dupliquer une fois de plus, donc variante trois. Et maintenant, ajoutons un peu d' espacement entre les cadres. Cliquons donc sur le cadre principal et ici, dans l'espacement, tapons 100 comme nous l'avons fait pour le cadre précédent Comme nous pouvons le voir, notre troisième cadre est découpé à l'intérieur de ce cadre. Cliquons donc sur ce cadre principal et sélectionnons l'option de redimensionnement pour qu'il révèle le troisième cadre Et maintenant, dans la mesure du possible, nous allons faire la barre de progression comme si elle partait de cette position ici. Dans ce cadre, nous allons compléter notre barre de progression. Dans le troisième cadre, nous allons lui donner de la hauteur. Pour cela, sélectionnons le deuxième cadre. Maintenant, vérifions d'abord la taille. Ici, nous devons simplement le faire 180 pour simplifier les choses. Passons donc à la ligne médiane, et nous ferons la même chose ici, 180 pour celui-ci, pour qu'il soit facile de s'en souvenir, et 180 ici, désolé, ici, 180. Bon, maintenant nous passons à 180 pour la seconde, comme si la première position était ici, et dans la seconde, nous devons augmenter la largeur de ce rectangle. Passons donc à 180. Ici, notre barre de progression est terminée, et ici nous devons la rendre nulle opacité. OK ? Nous avons donc besoin d'une opacité nulle pour terminer notre barre de progression. Maintenant, cliquez sur le prototype et sélectionnez la première image, faites glisser Noodle vers la seconde et sélectionnez après le délai, passez à une milliseconde et passez à cette linéaire d' animation intelligente, c' passez à cette linéaire d' animation intelligente Essayons 3 000 millisecondes ici et faisons-le après délai, une milliseconde, animez intelligemment, et faisons-le après délai, une milliseconde, animez intelligemment, et rendons-le instantané. Nous n'avons pas besoin d' animation intelligente pour l'option de masquage. Nous avons besoin d'un instant rapide. Fermons ça. Maintenant, appuyons sur la touche Option du clavier et faisons glisser la copie du composant et de barre d'espace du navire sur le clavier. Maintenant, prévisualisons rapidement la valeur parfaite et haute, ce qui semble bien Maintenant, répétons-le à nouveau en appuyant sur l'arc du clavier. Terminé et terminé. Maintenant, sélectionnons notre barre de progression, cliquons sur le ruban de dessin, appuyons sur la touche Commande X du clavier, puis appuyons pour remplacer. Maintenant, en ligne centrale, comme nous pouvons le voir ici, sélectionnons notre barre de progression et appuyons sur les touches Entrée et Retour, supprimons l'arrière-plan Retirez le remplissage, nous le rendrons transparent. Ici, nous n'avons pas besoin de contexte. Passons maintenant en revue rapidement. Donc, comme nous pouvons le voir , si l'arrière-plan bouge ou si la barre de progression s'anime également, redémarrons-le. Et comme si c'était parfait, nous ajusterons également le timing de chaque animation plus tard . OK, il est maintenant temps de travailler sur le logo et de créer une animation pour le logo. Nous allons donc faire de même. Sélectionnez le cadre du logo, appuyez sur la touche de commande Option pour les convertir en composant. Cliquons sur le signe plus, et je pense que nous allons créer quatre variantes pour le logo. Comme nous pouvons le constater, nous avons créé quatre copies du même cadre. Ajoutons maintenant un peu d'espacement entre les cadres. Sélectionnez donc le cadre du logo et cliquez sur 100 et comme nous pouvons le voir, notre quatrième cadre est coupé. Cliquons donc sur l' option redimensionner pour ajuster pour voir les quatre cadres ici OK. Maintenant, zoomons et commençons par le champ Ici, nous devons sélectionner ce premier cadre de logo, et ici, nous devons activer notre fond blanc. C'est une forme vectorielle, comme on peut le voir. Il s'agit d'un cadre vectoriel, et il est également classé ici, mais il n'est pas visible ici. Allons-y, et ici nous allons créer un rayon d'angle de 99 pour l'arrondir complètement. C'est un cercle. Au lieu du logo, nous pouvons simplement le faire glisser à l'extérieur du cadre. Notre animation partira donc de et bloquera également le ratio attendu ici. Essayons d'utiliser 24 pour la largeur, Essayons d'utiliser 24 la hauteur et la ligne médiane. Il est important de placer la ligne centrale et nous allons réduire la largeur et la hauteur. Passons à 24 et sélectionnons maintenant la deuxième image. Et ici, nous allons également faire la même chose ici et le rendre complètement arrondi, faire 99, l'aligner vers le bas et nous en avons fait 16, je crois, 24. Doublons donc la taille. Alors faisons-en 40 ou 48. Je pense que 40 c'est bien, alors faisons-en 40. Et dans cet écran, le troisième, nous allons lui donner la même propriété, comme activer la couleur de remplissage, et aussi l'arrondir complètement, faisons-le légèrement et dans le quatrième cadre, le logo sera en position finale. Nous allons donc ajouter une propriété supplémentaire et essayer de transformer. Passons donc à 180. Maintenant, relions rapidement images afin de pouvoir prévisualiser l'animation. Cliquez sur Prototype, sélectionnez la première image, faites glisser Noodle vers la seconde, et faisons-le après un certain délai, une milliseconde au lieu de l'instance. Essayons d'utiliser Smart Animate et cette fois, nous utiliserons l'entrée et Il entre et sort et rendons l'animation fluide. Essayons donc 600, sélectionnons la deuxième image, connectons-la à la troisième image. Après un délai d'une milliseconde, Après un délai d'une milliseconde out Smart Animate Passons rapidement au after a delay, à une milliseconde et in E out Smart Animate et à Smart Animate et Maintenant, prenons rapidement des copies en appuyant sur touche Option, dupliquons notre écran, appuyons sur la barre d'espace Shift. Comme nous pouvons le voir, tout va bien. Nous allons faire de même pour le logo en appuyant sur Entrée pour sélectionner le sous-châssis de cet ordinateur central et supprimer l'arrière-plan Sans arrière-plan, nous voulons que l'animation du logo soit transparente. Appuyez sur la commande X sur le clavier ici, nous allons simplement sélectionner notre logo. D'accord, comme nous pouvons le voir, nous devons légèrement ajuster notre arrière-plan et voici notre barre de progression Faisons glisser la barre de progression en haut de l' arrière-plan et maintenant nous pouvons sélectionner notre logo et le coller pour le remplacer. Également sur la ligne centrale, apportez le logo. Maintenant, une fois que nous avons cliqué sur la barre d'espace, toutes les animations sont jouées en même temps car nous avons défini un délai d'une milliseconde chaque élément commence à s' animer en Nous l'ajusterons ultérieurement. Mais maintenant, nous allons nous concentrer uniquement sur l'animation. Il est maintenant temps de créer une animation de titre Cliquez sur le cadre de titre et appuyez sur la touche Shift du clavier pour zoomer sur la sélection. La première chose que nous allons faire est de le convertir en composant par la commande d'option K pour le convertir en composant. Et avant de créer des variantes, apportons quelques modifications, puis nous créerons des variantes. OK ? Double-cliquez donc ici pour voir l'espacement d'origine, et il s'agit essentiellement d'Autolyo Alors augmentons-le jusqu' à ce qu'il soit réduit. OK ? Essayons donc la ligne centrale -48 Alors maintenant, comme vous pouvez le voir, nous supprimons l'espacement, et c'est l'état initial, et nous allons faire un autre changement OK, alors dessinons un rectangle. Ligne centrale. Maintenant, cliquons sur les effets dans le menu déroulant pour sélectionner le flou des calques Faisons en sorte que ce soit flou à 50 %. Maintenant, changeons rapidement la couleur pour augmenter le flou. Faisons en sorte qu'il en soit de même pour la couleur de fond, sombre. Maintenant de Cindy à B, nous avons besoin de ce cadre en haut, un rectangle en bas Sélectionnez maintenant les deux et créez un masque. Maintenant, sélectionnez le rectangle, placez-le en dehors de l'ordinateur central, quelque chose comme ça Nous devons maintenant sélectionner notre cadre et créer une variante. Créons maintenant la deuxième variante. Créons rapidement une troisième variante et une quatrième. Nous devons maintenant sélectionner le mainframe et nous allons ajouter un peu d'espacement Faisons en sorte que ce soit 100. Nous pouvons maintenant animer ou deuxième image. Ajustons maintenant le deuxième cadre. Dans le deuxième cadre, nous devons sélectionner le rectangle et la ligne centrale. De plus, nous en ferons 32 lignes centrales. Maintenant, dans le troisième cadre, nous devons faire le même processus en ligne centrale. La précédente en date de 32 et dans celle-ci, nous allons en faire une animation rebondissante Essayons huit lignes centrales. Et ici, dans la variante 4, nous pouvons simplement l'aligner au centre, et aussi lui donner la taille d'origine, qui est 16 et une ligne centrale. OK. Maintenant, connectons cela en prototypant et en créant une animation Cliquons donc sur le prototype de cassette. Connectons-le maintenant à la deuxième image. Comme nous le savons, nous en ferons une animation. Donc, après le délai, cela fonctionnera. Donc, une milliseconde, une animation intelligente entre 600 millisecondes et millisecondes. OK ? Lions donc rapidement cela et faisons-le après un délai d'une milliseconde, et Smart Animate entre en fonction et en sort Et créons un troisième et un quatrième lien. Et voilà, après un délai d'une milliseconde, Smart passe à IO et D'accord, alors créez rapidement une copie. Appuyons donc sur la touche Option et créons une copie. OK. Passons en revue cela, appuyez sur la barre d'espace Shift et voici à quoi ressemblent les animations Avant de placer le titre, nous devons sélectionner l'ordinateur central, appuyer sur la touche Entrée et Retour et supprimer l'arrière-plan D'accord, nous n'avons pas besoin de contexte pour le titre. Maintenant, appuyez sur la commande X sur le clavier et changeons le titre, cliquez avec le bouton droit de la souris sur le rythme pour remplacer la ligne centrale. Maintenant, appuyez sur la barre d'espace Shift et passons rapidement en revue notre animation Maintenant, tout semble parfait. OK, comme nous pouvons le voir, nous avons terminé tout cela, il est donc temps de créer une animation ou de créer une animation. Donc pour le bouton, encadrez le bouton et appuyez sur Shift 2 sur le clavier pour zoomer, et nous ferons de même pour le bouton. Convertissez-le en composant en appuyant sur la commande Option K, et nous allons maintenant créer une variante. Pour la variante, nous allons cliquer dessus, et comme vous pouvez le voir, nous avons créé des variantes. Créons maintenant 34 variantes pour le bouton, et nous verrons pour l'animation. Alors maintenant, travaillez sur l' espacement, faites-en 100. De plus, comme nous pouvons le voir, cadre est découpé, nous allons donc le redimensionner pour l'adapter OK, alors commençons. abord, nous devons sélectionner dans ce premier état, nous avons besoin que le bouton soit en dehors de la page. Appliquons d'abord l'effet. OK, cliquons sur les effets et rendons les couches floues. Et ici, nous allons atteindre 50 %. Ce sera donc complètement flou, également en dehors de l'écran, quelque chose comme ça Dans cet état, le bouton se trouve en dehors de l'écran. Maintenant, le bouton apparaît, d'accord ? Comme celui-ci, ce sera votre état. Donc, pour ce qui est de l'état Her, je pense que nous pouvons augmenter l' ombre du bouton. Donc, une fois que les heures d'utilisateur sont enregistrées, en gros, c'est mobile, donc il n'y a plus d'heure, mais une partie du cours, imaginons que c'est comme un Web. Faisons donc en sorte que 16 et 32 augmentent également légèrement l'ombre de 60 %. OK. Comme nous pouvons le voir, une fois que l'utilisateur passe le pointeur de la souris, cela augmente l'ombre, et cela fonctionne comme un bouton Et je pense que nous n'avons pas besoin de rester ici. Supprimons donc la quatrième variante de l'état quatre, et cliquons sur redimensionner pour ajuster pour redimensionner le cadre OK. Et maintenant, il suffit de lier ceci pour que nous puissions voir s' il fonctionne ou non. Ainsi, la première image sera liée à la deuxième variante après un délai d'une milliseconde Et Smart Animate est en Es out et 600, ce qui est très bien. Et maintenant, pour cet état, je pense que nous n'avons pas besoin de lier la page entière. Nous allons simplement sélectionner un élément spécifique comme ce bouton et maintenant cliquer sur le bouton Plus pour créer des nouilles au troisième état et, ici, fabriquer en thésaurisant Encore une fois, cela ne s'applique pas au mobile, mais ça va. Nous pouvons d'accord, alors laissons-le Smart Animates dans Is out 600, et comme nous pouvons le voir maintenant, cliquons sur l' option de conception et créons une copie Appuyez maintenant sur Shift Enter. Désolé, déplacez la barre d'espace. Et comme nous pouvons le voir dans l' animation, rejouons-le maintenant. Voici donc comment le bouton se charge. Et une fois que j'ai appuyé sur le bouton, tu peux voir l'ombre Nous pouvons également augmenter la taille du texte et la hauteur des boutons. Nous pouvons faire beaucoup de choses, comme arrondir les boutons, mais c'est ainsi que vous pouvez animer les boutons. OK. Et nous allons faire la même chose ici, cliquez sur ce cadre principal appuyez sur Entrée et supprimez l'arrière-plan. D'accord, nous n'avons pas besoin d'arrière-plan, et sélectionnons ce cadre, Command X, et nous devons le remplacer par le bouton. Cliquons donc sur le bouton et passons à remplacer. OK. Et maintenant, passons à la ligne médiane. Alors maintenant, comme vous pouvez le voir, alignons rapidement la couche. Donc, la première chose doit être comme Tatus Bar. Voici donc le logo de la barre de progression en haut et en arrière-plan. Appuyez sur la barre d'espace expédiée, et comme vous pouvez le voir, tout bouge maintenant une fois que je clique, maintenant nous devons créer des heures. Donc, nous devons d'abord créer une animation d' arrière-plan, puis une barre de progression, puis un logo , un titre, et enfin, nous avons besoin de boutons ici. C'est ainsi que nous devons créer. OK, maintenant c'est l'heure du projet de classe, et le projet de classe consiste à animer la barre d'état et l'indicateur d'accueil, partager avec moi pour que je puisse le revoir. Travaillez certainement sur ces deux-là et animez-le, à bientôt dans la vidéo suivante OK, donc je suppose que vous avez fait le projet de classe, et je l'ai fait aussi parce que si vous ne savez pas comment créer et faire de l'animation, c'est ce que j'ai fait, et laissez-moi partager ce que j'ai fait. OK ? Sélectionnons donc le cadre et appuyons sur la barre d'espace Shift. Donc, comme vous pouvez le voir, il s'agit d' une animation légèrement animée de l'extérieur vers le cadre, et cette animation rebondit légèrement Donnons-en un aperçu une fois de plus, car nous pouvons voir cette animation rebondissante et cette diapositive OK ? Remplaçons-la donc par la barre d'état réelle. Nous devons donc maintenant sélectionner l'ordinateur central, appuyer sur Et sélectionner le cadre intérieur, supprimer l'arrière-plan Nous n'avons pas besoin d'arrière-plan. Maintenant, sélectionnez le cadre et nous le remplacerons par l'original. Supprimons donc celui-ci et faisons un clic droit sur Pace pour le remplacer. OK, jusqu'ici tout va bien. Passons maintenant en revue rapidement notre animation, et comme nous pouvons le voir, cliquons sur cette image et appuyons sur Shift to Zoom pour la sélectionner, puis sur barre d'espace Expédier pour la revoir rapidement. Et comme nous pouvons le constater maintenant, nous avons un problème. Tout semble parfait, mais chaque élément est chargé, nous n'avons donc pas besoin, par exemple, de cette action immédiate uniquement pour l'arrière-plan et l'indicateur de progression, ainsi que pour la barre d'état. Une fois celles-ci terminées, nous devons charger l'animation du logo, et après le logo, nous devons charger l'animation du titre, et une fois toute l' animation terminée, nous avons besoin d'un bouton à la fin. OK. Précisons donc tous les éléments dans le temps. Commençons. Tout d'abord, nous devons vérifier le contexte. Donc, l'arrière-plan est comme cliquiez sur le prototype et, comme nous pouvons le voir, réglez l'arrière-plan à une milliseconde, ce qui est bien, et l' animation d'arrière-plan sera immédiatement chargée , ce qui Et aussi pour la barre de progression, je pense qu'une milliseconde, c'est bien. Laissons-le donc. Pour le logo, disons maintenant, par exemple, qu'une fois cette animation terminée, il faut que l' animation du logo commence. Voyons donc si je fais 2 002 secondes. Donc, vérifions-le et revoyons, appuyez sur la barre d'espace Shift, et comme nous pouvons le voir, le logo est rapidement chargé. Au fur et à mesure de la progression, nous pouvons également faire une chose : cliquer dessus et nous pouvons spécifier, comme si nous n'avions pas besoin de bouton, nous pouvons donc masquer le bouton. Nous pouvons masquer le titre. Nous ne pouvons nous concentrer que sur ces éléments tels que le logo, barre de progression et l'arrière-plan. Passons donc rapidement en revue et, comme nous pouvons le voir, chargeons un peu rapidement. Augmentons donc la durée du logo. Cliquez sur le prototype après avoir tardé, et nous allons en faire 3 000. Maintenant, encore une fois, examinons cette charge d'animation, et le logo commence à bien paraître. Maintenant, activons le titre. Il suffit de 3 secondes pour le logo. Donc, pour le titre, doublons ce montant. Passons à 6 000, appuyez sur Entrée, et revoyons-le rapidement. Barre de progression, logo, pourquoi ça ne marche pas. OK, alors essayons d'en faire six au lieu de six. Essayons cinq secondes, et voyons si cela fonctionne ou non. Ça a l'air bien. Faisons donc 5 000 pour le titre, et passons maintenant au bouton spécifique. Maintenant, c'est un problème, je ne sais pas pourquoi cela se produit. Faisons donc sept secondes, et voyons voir. Et ça marche bien. Tout semble parfait l'heure fonctionne bien et l' arrière-plan s'anime. C'est ainsi que nous créons notre animation de base pour notre projet UIUX Il est maintenant temps de travailler sur le deuxième écran. Passons donc rapidement en revue notre deuxième écran, cliquez et appuyez sur une barre d'espace en forme de barre d'espace. Et maintenant, comme vous pouvez le voir sur cet écran, nous pouvons animer cet état actif et ce curseur, qui clignotera pour que l'utilisateur puisse sentir qu'il s' agit d'un état actif De plus, une fois que l' utilisateur aura tapé sur cette icône I, elle masquera l'icône non masquée, il changera notre échange avec l'icône Masquer et afficher elle masquera l'icône non masquée, il changera notre échange avec l'icône Masquer et afficher et il collera également dessus pour cocher Commençons donc. Nous devons sélectionner cet écran et appuyer sur la commande C du clavier, puis le coller ici. Commençons par le premier état actif. Double-cliquez et sélectionnons ce groupe spécifique qui comprend les étapes et le cadre intérieur. Copions-le et collons-le ici, appuyez sur la touche Shift 2 du clavier pour zoomer sur la sélection. Maintenant, comme vous pouvez le voir dans ce cadre, développons-le et voyons ce qu'il contient. Voici donc ce cercle blanc, ce cercle bleu et ce cercle bleu transparent à 20 % , légèrement plus grand que P deux. Alors maintenant, voyons simplement ce que nous pouvons faire, nous pouvons ajouter un cercle supplémentaire. Sélectionnons donc ce cercle d'ondes et dupliquons simplement. Maintenant, nous allons simplement faire celui-ci et l'agrandir la même taille que ce cercle blanc et celui-ci sera de 32. Sélectionnez maintenant le mainframe et convertissez-le en composant par l'option Command K et créons rapidement une variante La variante 2 est créée. Sélectionnez maintenant ce cadre de composants, augmentez poids et la hauteur et alignez-le au centre. Maintenant, augmentons la taille de cette couche d'ondes qui est de 32, alors essayons de la faire 64. Maintenant, comme nous pouvons le voir, c'est 64, et nous devons réduire l'opacité à zéro Cliquons donc sur l' opacité et mettons la valeur à zéro. Sélectionnez cette couche d'ondes et augmentez-la à 32. Maintenant, il suffit de le connecter, de cliquer sur le prototype, de sélectionner ce cadre et de le connecter à celui-ci. Nous allons également le faire après un délai de modification d'une milliseconde, et faisons en sorte que celui-ci soit animé de manière intelligente et linéaire, c'est animé de manière intelligente et Nous pouvons également le faciliter, mais cela ne fonctionnera pas. Faisons donc en sorte que ce soit linéaire. Nous voulons un effet linéaire. Essayons aussi 300 pour le moment, puis nous passerons à OK, et nous connecterons à nouveau le second au premier pour créer une animation en boucle. Alors, cliquons et, après un délai d'une milliseconde, passons à Animate 300 intelligent par défaut OK. Et maintenant, il suffit de cliquer sur le dessin, créer une copie à l'aide de la touche Option et de créer un cadre autour de cet élément. OK, ligne centrale, cliquez sur ce cadre blanc et cette barre d'espace de forme libre, comme nous pouvons le voir. Maintenant, nous devons également modifier légèrement l'état, alors laissez-le fermer, cliquez sur le deuxième état, cliquez sur Prototype. Au lieu de Smart Animate, nous devons le rendre instantané OK. Passons maintenant en revue ce niveau de travail, mais nous devons réduire légèrement la vitesse. Sélectionnez donc le premier et essayons 600 pour le ralentir. Et je trouve que ça a l'air génial. Et appuyons sur Commande X, double-cliquez, cliquez avec le bouton droit de la souris pour remplacer. Et maintenant, sélectionnez l'écran, barre d'espace expédiée, et comme nous pouvons le voir, cela fonctionne très bien. Travaillons maintenant sur le fait de masquer le curseur. D'accord, nous devons donc sélectionner ce curseur, qui se trouve dans un cadre séparé. Et comme on peut le voir à l'intérieur du cadre, voici un texte avec le symbole du tuyau. OK, alors maintenant sélectionnez ce cadre entier, Commande C, passez ici, convertissez-le en composant par l'option Commande K, créez une variante, la variante deux convient. Appuyons donc sur Entrée pour sélectionner l'élément intérieur, qui est ce texte, et appuyons sur zéro sur le clavier ou nous pouvons lui donner une opacité nulle ici Maintenant, il suffit de sélectionner le premier, cliquer sur Prototype et de le lier au second, faire plus tard. Une milliseconde, et faisons en sorte que l'animation soit intelligente, et essayons 600, c'est peut-être bien, était le cas auparavant Essayons de reconnecter celui-ci après un certain délai, une milliseconde, une animation linéaire intelligente qui a l'air superbe OK. Maintenant, il suffit de cliquer et, avec l'option, de créer une copie, appuyer sur la commande X, de double-cliquer, de cliquer le bouton droit de la souris et de coller pour remplacer. Et maintenant, prévisualisons rapidement. Je pense qu'il faut réduire légèrement, peut-être 400 ou 500, ce qui fonctionnera très bien. Cliquons donc sur Prototype, faisons glisser le pointeur pour sélectionner les deux. Faisons-en 400. Maintenant, sélectionnez. Je pense que ça a l' air plus naturel. Travaillons sur l'enregistrement des icônes d' affichage et de masquage. OK. Bon, maintenant, comme nous pouvons le voir, nous avons ces deux icônes. Maintenant, sélectionnons les deux, et ici nous devons cliquer sur cette flèche et sélectionner Créer des ensembles de composants. OK ? Maintenant que nous pouvons voir que l'ensemble de composants est créé, nous pouvons simplement cliquer dessus et sélectionner le prototype et cette fois, nous devons sélectionner Click. OK ? Sélectionnons donc Click and Smart Animate is in is out, et passons à 300 et sélectionnons à nouveau une cassette utilisateur dessus et sélectionnons à nouveau une cassette utilisateur Il passera donc à State one tape, masqué et intelligent animate in is out, et testons rapidement Faisons donc glisser une icône avec la touche d'option et créons un cadre. Passons de la couleur du cadre à la ligne centrale. Cliquez sur la barre d' espace de décalage du cadre, comme vous pouvez le voir, une fois que j'ai fait, cette icône de curseur est modifiée. Maintenant, scotchez-le, montrez et bonjour. OK, maintenant nous devons simplement sélectionner notre icône avec la commande X. Remplaçons-la ici, passons à remplacer. Et maintenant, passez rapidement en revue cela, car vous pouvez voir ce curseur d'animation de vague clignote et une fois que j'ai tapé dessus, il affichera le passe. OK, donc maintenant, comme nous pouvons le voir, nous avons créé cet état de clic Je pense que c'est légèrement différent. Par exemple, si j'utilise du ruban adhésif dessus, passe s'affichera. Créons donc rapidement cet état. OK. Maintenant, cliquons sur le ruban adhésif, sélectionnons-le dans le champ de pied de page, copiez-le et collez-le ici. Maintenant, créons simplement un composant, cliquez et créez une variante. OK, c'est donc la variante 2. Pour la deuxième variante, nous devons le rendre entièrement blanc, il est donc maintenant de 50 %, et appuyons sur zéro pour qu'il passe à 100 %. Même chose pour le mot de passe. Modifions-le comme suit , par exemple, c'est mon mot de passe, et maintenant nous avons besoin d'une icône différente. Donc, celle-ci est l'icône par défaut, et celle-ci sera Afficher le mot de passe. Pour cela, nous devons sélectionner les deux icônes avec la touche d'option, faire glisser, supprimer celles dont nous n'avons pas besoin, puis simplement sélectionner les deux et cliquer sur la position DTH Sélectionnez maintenant le premier. Double-cliquez ici et collez pour remplacer et sélectionnez celui-ci, Commandes, double-cliquez et collez pour remplacer Nous devons maintenant sélectionner cette icône, cliquer sur Prototype. Une fois que l'utilisateur tape sur cette icône, elle se déclenche au clic et Smart Animate est dans IO et 300, ce qui correspond à l'animation précédente Essayons de sélectionner celui-ci. Cliquez sur Smart Animate E dans Es out. Maintenant, cliquons sur le ruban de dessin et appuyons sur la touche Option, créons la commande de copie X, créons la commande de copie X, il suffit de double-cliquer avec le bouton droit de la souris sur Coller pour la remplacer. Maintenant, vérifions-le à nouveau car nous pouvons voir que tout s'anime et une fois que j'ai cliqué dessus, le mot de passe s'affiche, cliquez à nouveau et il s' affichera et se masquera Allons-y. OK, donc c'est 300. Portons-en à 200. Essayons de dissoudre et de linéariser. Faisons en sorte que ce soit instantané. Donc pour l'instant, comme nous pouvons le voir, oui, je pense que l'instant semble parfait, et nous devons nous en tenir à l'instant. OK. Et maintenant, créons du ruban adhésif. Il va décocher et vérifier. Maintenant, appuyez sur la commande C, copiez cette vérification et collez-la ici, dupliquez-la, supprimons la vérification et copions les propriétés à partir de celle-ci. Il s'agit essentiellement de l'état par défaut, et les informations sont de 10 % blanc et 20 % de blanc par bordure. Faisons donc du blanc, 10 %, et pour le trait, faisons-le blanc et essayons 20 %. OK ? Il s'agit donc de l'état par défaut, état actif et de la case à cocher décochée Faisons donc maintenant en sorte de sélectionner les deux, créer un ensemble de composants et de créer une copie de la commande X, puis de cliquer avec le bouton droit de la souris sur la page pour remplacer. Maintenant, vérifions-le encore une fois, tout va bien. Nous pouvons voir le mot de passe. OK, nous n'avons pas connecté les deux ensemble, alors cliquons sur Prototype , puis sur Click and on tape, ce qui revient à dire, OK, essayons Smart Animate. Utilisons dans IO, 200. Même chose dans cet état, la BI connectée est hors service. Vérifions-le rapidement. Fonctionne très bien. Et voici à quoi ressemblera cette page. Essayons aussi d'enregistrer, nous pouvons animer l'ombre Créons donc rapidement. OK, donc pour le bouton, dupliquons-le. OK. OK, alors créons à nouveau le composant et créons une variante. Ajoutons un peu d'espacement. Donc 100 et redimensionnez pour l'adapter. OK, donc celui-ci est l'état par défaut et celui-ci est l'état du clic. OK ? Augmentons-le. OK, donc pour le clic, cliquons sur l'ombre, 16 et 32, et essayons 60 %. OK. Maintenant, cliquons sur le prototype, puis sur Is in Iso. Créons maintenant une copie avec la touche Option Commandex et collons pour la remplacer OK, comme nous pouvons le voir, nous avons terminé notre première étape et prévisualisons-la rapidement. Tout semble parfait et nous avons changé notre mot de passe et cela fonctionne également. J'ai changé cet état pendant que je créais maintenant, comme nous pouvons le voir, car nous allons le tester sur un ordinateur de bureau avec une souris, nous avons besoin de votre effet J'ai donc changé ça en hoor et tout semble parfait Maintenant, appuyons sur Commande. C'est ici. OK ? Il s'agit de la version finale de cet écran Nous devons maintenant passer à la deuxième étape et analyser rapidement l'écran deux. OK. Donc, la barre d'espace en forme de préfixe copiez-collez l'état actif ici Il s'animera donc lorsque l'utilisateur cliquera sur le plus, il affichera ainsi la photo de l'utilisateur, et nous garderons cette entrée sur bande magnétique Donc, sur cassette, les données réelles seront affichées, ainsi que le numéro de téléphone sélectionné Nous remplacerons le bouton par HRingt pendant que nous procéderons à la deuxième étape Commençons donc rapidement et créons notre deuxi 4. 04 Prototypage: OK, jusqu'ici tout va bien. Comme nous pouvons le voir, nous avons terminé notre animation écran par écran, et maintenant, récapitulons rapidement Il s'agit donc de la première animation d' écran. Et comme nous pouvons le voir, c'est notre page de démarrage et tout semble parfait. Passons maintenant en revue notre deuxième écran, qui est la première étape et tout semble parfait. Nous pouvons activer et désactiver et vérifier. Et maintenant, voyons notre écran 3. Comme nous pouvons le constater, tout va très bien. Image, naissance des données, et aussi quel effet. Waouh, ça a l'air super. Et maintenant, prévisualisons rapidement notre troisième et dernière étape. OK, donc ça a l'air super aussi. Et maintenant, commençons rapidement le prototypage. Donc, pour le prototypage, comme vous pouvez le voir, ce bouton d'écran ressemble à une animation . Nous devons donc d'abord cliquer sur le prototype de cassette, puis sur le bouton spécifique Zoomons donc et double-cliquons pour sélectionner le bouton. Nous devons maintenant cliquer sur ce signe plus, le lier à la page de la première étape. OK. Ce sera donc en un clic. De plus, la destination est correcte, et au lieu de l'animation push, faisons-en une animation intelligente et nous pouvons utiliser Dissolve Et je pense que normalement, l'application par défaut se dissout très bien. Faisons en sorte qu'il se dissolve et qu'il en sorte facilement 300. Regardons donc rapidement notre ancien lien, et comme vous pouvez le voir, notre écran se charge et le logo anime le texte et le bouton OK, voyons maintenant l' effet HR et une fois que j'ai cliqué, dissolvez et nous sommes maintenant à la première étape. OK, c'est ainsi que nous devons lier chaque page. Maintenant, cliquons sur cette première étape et lions-la simplement à la deuxième étape. OK, maintenant vérifions la propriété. Donc, en cliquant et au lieu de dissoudre, essayons de pousser. Donc, comme vous pouvez le voir, entrez et sortez, appuyez et faites glisser OK. Essayons donc push et vérifions également cette couche correspondante Animate Et la courbe 300 convient également. Et testons rapidement. Alors, cliquons dessus. Et comme vous pouvez le voir, une fois que j'ai cliqué, je passe maintenant à l'écran deux. Cliquez maintenant sur ce bouton et liez-le au quatrième, comme vous pouvez le voir, naviguer en mode push. Et pour le processus par étapes, c'est génial. Nous pouvons également utiliser move in, move out. Passons à cela et nous verrons lequel fonctionne, alors nous l'appliquerons. OK, alors cliquons et comme nous pouvons le voir, partons. Je pense donc que nous allons nous en tenir à la poussée. D'accord, et tout va bien. Maintenant, reprenons rapidement un aperçu, comme nous pouvons le voir, notre écran d'accueil est en cours de chargement. Le bouton fonctionne, et cliquons sur le bouton. Nom et mot de passe superbes. Cochez, décochez, cliquez sur l' image, puis sur Célébrez. OK, mettons rapidement à jour légèrement. Comme nous pouvons le voir ici, nous avons une barre d'état. Donc, pour la barre d'état, créons une copie. Comme vous pouvez le constater, nous créons une copie. Donc, Command X. Sélectionnons notre barre d'état et notre indicateur d'accueil. Peut-être que nous pouvons simplement le supprimer et cliquer avec le bouton droit sur la page de la barre d'état pour le remplacer, et l'envoyer à B. Maintenant, déplaçons la barre d'espace, afin que nous puissions voir que notre barre d'état et notre indicateur d'accueil s'animent également Passons donc au reste de la page, page à remplacer, envoyez-la Beck et comme vous pouvez le voir s' animer, elle a l'air superbe Essayons donc de faire en sorte que cela fonctionne bien car ici, comme nous pouvons le voir, il y a du flou Alors OK, super. Passons d'abord, nous devons supprimer l'indicateur d' accueil, et maintenant cliquer avec le bouton droit sur Coller pour remplacer la barre d'espace Shift Comme nous pouvons le voir, notre barre d'état et notre indicateur d'accueil s'animent OK, donc pour cet écran, je pense que nous pouvons peut-être animer ce titre et ce bouton OK. Comme vous pouvez le voir, nous avons ces deux éléments, alors copions-les ici, et nous devons copier l'écran exact. Commençons donc créer l'animation du titre de cette animation, puis nous suivrons l'animation du bouton. OK, donc pour l'animation du titre, double-cliquons ou développons-la. Bon, comme nous pouvons le voir ici, nous avons le titre et le sous-texte OK, alors copions ce texte, sélectionnons le titre et collons-le. Maintenant, pareil pour cet écran, sélectionnez le titre et le texte passé, sélectionnez le titre et le texte précédent. Comme vous pouvez le constater, cela fonctionne très bien. Maintenant, sélectionnons cette copie de sous-texte. Et pour cet écran, voici du texte, et passons le texte pour cet écran, collons du texte Pour ce texte en vert, collez le texte. Maintenant, nous allons simplement sélectionner avec la touche d'option et simplement faire glisser la copie. Passons maintenant à Command X, envoyons la barre d'état au sac et Bground sélectionne maintenant le texte et le collé à remplacer. OK. Et maintenant, voici notre titre. Vérifions le chronométrage, cliquons sur le prototype, et vous pouvez en voir 5 000, ce qui est trop. Essayons donc 1 000 et prévisualisons rapidement un aperçu en bon état. Et nous ferons la même chose pour le bouton. Sélectionnez donc le bouton et voici le bouton. Maintenant, cliquons sur ce bouton, cliquez sur le design. Et ici nous allons changer le texte, aller au tableau de bord. OK, copiez le texte, sélectionnez maintenant ce bouton et appuyez sur le texte ici, Tableau de bord. Nous allons maintenant faire la même chose avec la touche option, copier la commande X, sélectionner le bouton, passer pour remplacer l'axe central OK, maintenant revoyons-le à nouveau. Les choses ont l'air géniales. OK, donc les boutons prennent trop de temps. Réduisons rapidement le temps. OK, alors écrivons 3 000. Désolé, trois secondes. OK. Voyons maintenant l'aperçu. Et d'accord, essayons 2000. Déplacez la barre d'espace et comme nous pouvons le voir, elle est superbe et nous avons une animation confite. OK. Alors maintenant, sélectionnons-le simplement, et asseyons-nous ici. OK. Alors maintenant, rejouons rapidement Et comme vous pouvez le voir, voici notre écran de démarrage. air super. Cliquez. Il s'agit l'écran d' accueil. Désolé, première étape. Tout va très bien. Tout fonctionne. Vérifiez et photographiez. Tout semble parfait. Troisième étape, félicitations. Et nous voici avec notre flux passionnant. OK ? C'est ainsi que nous avons réalisé prototypage et la micro-animation, tout en nous concentrant sur l'interaction et le prototypage 5. 05 Conception de projet de portfolio de niveau PRO: D'accord, pour l'instant tout va bien, nous avons appris à créer des projets interactifs et animés dans Figma, et c'est la meilleure approche pour présenter votre travail à l'équipe de développement, client ou aux parties prenantes N'importe qui, c'est le meilleur moyen de montrer votre travail plutôt que des images statiques En tant que concepteur UIUX, il est de votre responsabilité de montrer toute l'interactivité et toutes les animations, ce que vous pensez de ce projet, que vous pouvez présenter, et vous pouvez également , par exemple , leur indiquer comment ce bouton va déclencher cet effet C'est ainsi que je pense au chargement de microanimations de page. C'est donc la meilleure approche pour présenter votre travail et faire bonne impression sur tout le monde. D'accord ? Je recommande donc vivement de le rendre entièrement interactif au lieu d'images statiques. Une fois que nous aurons satisfait tous les membres de notre équipe et tout le monde, le moment est venu de récompenser notre dur labeur, de présenter notre travail sur les réseaux sociaux et de créer portfolio entièrement animé et interactif, décrocher un autre client bien rémunéré. OK, c'est donc le moment idéal. Alors appuyons sur FK sur le clavier et sélectionnons un préréglage pour les réseaux sociaux. Et ici, comme vous pouvez le voir, nous avons des préréglages pour les réseaux sociaux. Je pense plutôt au modèle carré, alors sélectionnons Dpleht HD, qui mesure 800 x 600 Commençons donc par la prise de vue HD. Appuyez sur K sur le clavier et passez à deux X. Maintenant, renommez-le rapidement, nous utiliserons donc un, deux, trois, quatre, et le numéro est correct Ensuite, nous devons sélectionner ou encadrer et appuyer sur I sur le clavier, sélectionner I drople two et sélectionner ce noir OK, alors nous devons sélectionner notre logo, appuyer sur la commande C et le coller ici, appuyer sur l'option V H sur la ligne centrale. Changeons rapidement la couleur de notre logo. Dissocions et cliquons sur sélectionner cette couleur bleue. Voici notre logo. Ensuite, nous devons dupliquer ce cadre par la commande D et simplement le placer ici. OK, nous devons maintenant sélectionner le logo du deuxième cadre appuyer sur K sur le clavier et en faire deux x. Voici donc notre logo dans le second état. Dans le premier état, modifions-le rapidement. Donc, au lieu d'un vrai logo, nous devons activer le remplissage, cliquer et le rendre bleu. Cercle rond Donc, comme vous pouvez le voir, 99 angles de rayon , c' est l'état initial, et prévisualisons rapidement, cliquons sur le prototype et lions-le au deuxième état en cliquant sur Smart Animate Is in Is out D'accord. Et prévisualisons rapidement. Cliquez donc sur Play Present. OK, comme vous pouvez le voir, l'aperçu est assez volumineux, alors cliquons dessus et changeons-le en écran de remplissage , parce que deux semaines assez long, alors faisons-le remplir. Et maintenant, appuyez sur R sur le clavier. Comme vous pouvez le constater, c'est comme si nous n'avions ni défini ni diffusé Modifions-le rapidement, cliquez sur Prototype, puis sur ce point de départ du flux en plus. Voici donc notre point de départ et voici le premier écran. Passons donc à portfolio. Voici donc notre portefeuille. Maintenant, appuyons rapidement sur R sur le clavier. Nous avons donc défini notre point de départ et il partira d'ici. D'accord ? Il suffit donc de cliquer et comme vous pouvez le voir cela permettra de changer rapidement l'état initial. Nous devons maintenant le transformer à 180 degrés. Testons-le à nouveau, appuyez sur R, et il se rechargera et aura une belle apparence Supprimons maintenant l'opacité. L'état initial sera donc un écran vide, et rechargeons rapidement l'écran, cliquez, et ça a l'air génial Maintenant, il suffit de cliquer sur Prototype, sélectionner ou encadrer. Dupliquons cela, cliquez sur Design et dupliquez le deuxième écran. D'accord. Et maintenant, sélectionnons à nouveau notre logo, faisons la même chose, mettons-le en couleur, sélectionnons cette couleur bleue complètement ronde. Donc 99, c'est parfait. Appuyez à nouveau sur K pour l'outil d'échelle et réduisons-le à cette taille, ligne centrale 32 x 32, puis cliquez sur le lien Prototype deuxième à la troisième étape. Donc, ce clic sur Smart Animates in est sorti. Et vérifions-le rapidement. Appuyez donc sur R pour recharger et cliquez à nouveau, cliquez, et ça a l'air génial Maintenant, faisons rapidement des progrès. Sélectionnez donc l'écran deux. Alors, passez à l'écran trois et appuyez sur la commande D. Faisons et établissons un espacement égal ici D'accord. Et cette fois, nous devons agrandir et remplir le cadre entier avec cette couleur bleue. OK, alors appuyez à nouveau sur K et essayons d'utiliser Tenex, cliquez et sélectionnez à nouveau, définissez-le Tenex, et essayons-en OK, alors augmentons-le légèrement. OK, donc ça a l'air bien. Et maintenant, cliquons sur Prototype. Lions-le à l'écran quatre et simplifions-le. OK, rechargeons rapidement. Alors cliquez, cliquez, cliquez. Ce look. OK, alors zoomons sur une typographie sur cet écran. Cliquez donc sur Tapons le sinus du flux. Et comme vous pouvez le voir, il est placé à l'intérieur du cadre du logo. Supprimons donc cela du groupe de logos, enregistrons-le et sélectionnons notre texte. D'accord. Utilisons 128, en gras et en ligne centrale. OK, donc c'est le premier état, et nous voulons également ne pas le remplir, et passer au trait blanc. Le poids, essayons-en deux. Supprimons maintenant l' opacité, ramenons-la à zéro. Donc, dupliquons simplement cet écran à cinq, et ici ce sera 100 %. Rendons donc l'opacité à 100 % et cliquons rapidement sur le prototype Lions-le à cet écran et cliquez sur Smart Animate Es in eso Passons rapidement en revue. Appuyez donc sur R, cliquez, et comme nous pouvons le voir, cela semble indiquer que nous devons maintenant créer un effet de masquage Nous allons donc simplement dupliquer à nouveau cet écran, et nous allons apporter ici quelques modifications. Nous devons donc d'abord dupliquer ce texte, puis augmenter ce trait, faire en sorte que celui-ci soit rempli. Essayons de le remplir et de le rendre blanc. Et maintenant, nous devons sélectionner l'outil rectangle, placer sous la ligne centrale du texte. Maintenant, cliquez sur Effets, étiqueteuse, et essayons 100 pour en faire du savon Et sélectionnons à la fois le texte et le rectangle que vous pouvez utiliser en cliquant avec le bouton droit de la souris comme masque. Donc, dans cet état, nous voulons que le masque soit à l'extérieur. Voilà, d'accord. Activons maintenant notre texte de contour, et voici notre texte masqué. OK, maintenant dupliquons simplement cela par la commande D, et ici nous devons l'aligner. Sélectionnez le rectangle et la ligne centrale. OK, alors maintenant c'est complètement centré. Dupliquons cela à nouveau, sélectionnons le rectangle et faisons-le disparaître du remplissage Nous allons donc utiliser cette direction du côté gauche. Il se termine donc du côté droit et sort du côté gauche. D'accord ? De plus, nous devons rendre l'opacité nulle pour cette couche Essayons donc d'utiliser l'opacité zéro et de cliquer sur Prototype. Lions rapidement notre écran cliquant sur Animation intelligente, c'est dans Is out, sélectionnez cet écran et le texte se remplit Martinimate est dans eso, associez-le rapidement à ceci OK Et maintenant, nous devons prévisualiser cela, appuyer sur R sur le clavier pour recharger et cliquer sur les logos Charger, texte et hauteur Je remarque donc que nous avons créé une étape supplémentaire, mais ça va. Nous pouvons supprimer cette étape sélectionner le prototype et le lier à l'écran. OK, en cliquant sur Animation intelligente, rechargeons rapidement. Et comme vous pouvez le voir, cliquez sur Charger et tout semble parfait. Poursuivons maintenant notre parcours d'animation et cliquons sur ce cadre, dupliquons-le simplement à nouveau, alignons-le au centre. Supprimons d'abord notre zone de texte et sélectionnons notre logo pour le logo . Appuyez sur K sur le clavier, déverrouillez la couche du logo. C'est verrouillé. Nous pouvons maintenant modifier la taille. Sélectionnons cette taille de molest et nous allons maintenant convertir ce rond en nouveau cercle Lions rapidement ceci en cliquant sur 300. Cliquons sur l'aperçu. Faisons-le simplement remplir, rechargez-le à nouveau, puis vérifions-le à nouveau, rechargez-le Alors maintenant, ça a l'air génial et nous avons besoin de notre balisage d'écran Nous devons donc sélectionner notre premier écran, qui est cet écran, le sélectionner et appuyer sur la commande C. Nous allons le coller ici. Tout d'abord, nous devons préparer notre écran. D'accord, comme nous pouvons le voir, le coin est net, donc arrondissons d'abord le coin, en faisant 50. Maintenant, nous devons le rendre JP. Nous n'avons pas besoin de couches modifiables pour cela. Essayons donc de faire en sorte que JP appuie sur la commande forward slash, et saisissons stis selection. OK, ici, nous devons le rendre JPEG, comme vous pouvez le voir, c'est maintenant du JPEG. Cliquons sur ce ratio d'attente pour débloquer. Maintenant, changeons la transformation. Faisons donc 30 degrés. Cliquez maintenant sur Commande G pour le regrouper et, à l'intérieur de la hauteur, assurons-nous qu'il est déverrouillé et tapons 577 3% D'accord. Et c'est ainsi que nous prenons du recul. Maintenant, dupliquons simplement le JPEG. Pour celui-ci, renommons-le en shadow. Effects, mais ça fait 100. Sélectionnez maintenant ce groupe Command X, placez-le ici sur cet écran, mettez l'opacité à zéro en appuyant 02 fois sur le clavier, et ici c'est zéro, et ici ce sera 100% Mais sélectionnons et assurons-nous qu'il s'agit d'une ligne centrale. De plus, celui-ci est une ligne centrale. D'accord ? Maintenant, vérifions qu'il s'agit lien et appuyons sur la barre d'espace Shift du clavier pour un aperçu rapide, puis cliquez sur Look great. Nous pouvons également prévisualiser à partir d'ici, barre d'espace expédiée, cliquer à nouveau. Ça a l'air super. Cliquons sur le ruban adhésif et dupliquons-le. Maintenant, nous devons simplement sélectionner ce mouvement JP légèrement vers le haut et également la teinte légèrement vers le bas. D'accord. Sélectionnons ce flou et faisons-le 200, sélectionnons le logo, réduisons l' opacité à 50 % et réduisons-le légèrement D'accord ? Alors maintenant, relions ceci. Prévisualisons ceci. D'accord ? Cliquez sur Recharger. Nous devons donc maintenant le remettre à son état d'origine. Pour cela, nous devons cliquer sur le design et simplement copier cet écran et le coller ici. OK, et cliquez sur Prototype. Lions donc ceci à cet écran. D'accord, et faites simplement en sorte que celui-ci soit 300 Es animés intelligents par an . Alors rechargeons Ça a l'air super. Et maintenant, nous devons montrer deux autres écrans ici. OK, nous devons maintenant sélectionner ces deux écrans et suivre le même processus. Collons-le ici. abord, nous devons arrondir le coin, le porter à 50, puis les redimensionner. Passons donc à la barre oblique, et comme vous pouvez le voir, voici la sélection. Faisons cette sélection en une seule étape. Et maintenant, sélectionnons les deux. D'accord ? Débloquez le ratio attendu, faites-le d'abord sélectionner à 30 degrés, faites-le rainurer, sélectionnez celui-ci et faites-en la commande de groupe G. Maintenant, nous devons vérifier que tout va bien, et maintenant sélectionner la hauteur intérieure des deux groupes. Tapons 57,73 %. Et c'est maintenant une forme d'angle, sélectionnez à la fois le JPEG avec la commande et la forme, dupliquez et sélectionnez cette sous-couche , renommez-la, faites-en une ombre Sélectionnez Cliquez sur l'effet. Layer Bler en fait cent. OK, maintenant sélectionnez la ligne centrale des deux couches appuyez sur la commande X et collez-la ici. OK, alors maintenant, comme vous pouvez le voir ici, nous avons un, deux, trois groupes. D'accord. Sélectionnez donc également la ligne centrale et sélectionnez cette ligne centrale de groupe. OK, maintenant sélectionnez les deux groupes et réduisez l'opacité à 0 %, et maintenant nous devons simplement dupliquer cette couche Nous allons faire un peu de magie et sélectionner ces deux groupes, pour qu'ils soient 100 %. Vérifions-le. OK, c' est donc l'écran de confirmation, il doit donc être sur le bon côté. L'écran de création de compte doit se trouver sur le côté gauche. Et sélectionnez le logo, appuyez sur K sur le clavier , faites deux X, et réduisez l'opacité à 20 % Ici, nous avons les mêmes couches. Bon, comme nous pouvons le voir, nous l'avons déjà lié, mais connectons cela au dernier écran et en cliquant sur Eso Smart Animate, cela aura l'air parfait Et passons simplement en revue cela à partir d'ici, déplaçons la barre d'espace et, comme vous pouvez le voir, tout va bien Nous allons maintenant le réduire à nouveau, puis revenir au cercle d'origine , puis au logo de vos statistiques. C'est ainsi que nous allons créer d'autres animations. Dupliquons donc cet écran. Cela reviendra à son état d'origine. Supprimons donc ce lien et relions-le à celui-ci, car tous les groupes sont cachés ici. Maintenant, passons rapidement en revue cela à partir d'ici, cliquez à nouveau et revenez à l'original. Bon, comme nous pouvons le voir, nous avons créé cette magnifique animation, et maintenant je pense qu' il faut revenir à son état d'origine masquer l'écran dans l'image suivante, puis reconvertir le cercle en logo. Créons donc rapidement. Répliquons cela. Dans ce cadre de 14, nous avons besoin que ces cadres soient nuls ou supprimons-le et sélectionnons le logo, appuyons sur k sur le clavier et réduisons-le. Sélectionnons donc à nouveau un peu plus petit. OK, donc cette taille, et maintenant dupliquons-la à nouveau. Et ici, nous devons à nouveau appuyer sur K, et cette fois, nous devons l'agrandir légèrement. D'accord. De plus, nous devons supprimer le remplissage et ramener le rayon d' angle à zéro. Et ici, nous devons changer la transformation à 180 degrés, désolé à 180 degrés. Comme nous pouvons le voir, associons rapidement cet onclick : Smart Animate est dans ESO et Smart Animate est Passons rapidement en revue OK, donc une dernière chose, comme nous pouvons le voir, nous avons réglé tout ce déclencheur sur clic et nous devons le faire après un délai. Disons 800, puis changeons celui-ci en after delay et fixons-le puis changeons celui-ci en after delay et fixons-le à une milliseconde Cliquons sur celui-ci. Après un délai. OK, alors passons en revue rapidement les choses, cliquez sur la cassette d'aperçu et rechargeons en appuyant sur R, donc rechargeons et tout ira si vite que nous devons ajuster le timing Donc, après le délai, disons, si nous le fixons à 300 et le définissons à 300. OK, essayons de sélectionner OK, donc ici dans Interaction, cliquons, et essayons 300 pour tout cela. Maintenant, passons rapidement en revue reload. Ça a l'air génial Nous pouvons également augmenter après un délai, par exemple, si nous changeons ces deux points au lieu de 300, nous passons à 600 et si nous animons intelligemment Es in ese out Et nous pouvons également changer. Faisons en sorte que ce soit 300 et augmenter la durée à 600. Vérifions-le rapidement sur cette icône actuelle. Remplissons d'abord l'écran, appuyez sur R pour le recharger Modifions-le à 100 et assouplissons-le. Essayons donc 500 et revoyons rapidement.