Et maîtresse de Figma : créer des animations professionnelles de l'UI pour les utilisateurs

1. : ce que vous allez construire.
: Bonjour et bienvenue à la Master Class de Figma Motion. Si vous avez déjà conçu belles interfaces et avez souhaité pouvoir leur donner vie avec des animations et des interactions fluides, alors ce cours est fait pour vous. Bonjour. Je m'appelle Ahmed Al Hassan et je suis un concepteur UIUX avec plus de cinq ans d'expérience dans la conception de produits numériques, interfaces interactives et de systèmes de conception Tout au long de ma carrière, j'ai appris une chose très importante, c'est que les interfaces de qualité ne sont pas seulement attrayantes visuellement. Ils sont intuitifs et interactifs grâce à un motion design bien pensé. Et c'est exactement ce que je vais vous montrer dans ce cours. abord, nous allons commencer par comprendre ce qu'est réellement Figma Motion et comment il peut s'intégrer dans un processus de conception ou un flux de travail moderne, impliquant la création de fichiers, la préparation de couches , leur organisation et leur configuration afin que nous puissions créer nos animations pour eux. À partir de là, nous allons commencer par créer nos animations étape par étape, compris des animations liées à la taille, à la position et à l'opacité Cela va être lié au timing, à l'assouplissement. Nous aborderons également erreurs les plus courantes en matière de motion design et la façon dont le moindre ajustement peut contribuer à améliorer considérablement ces animations et à leur donner un améliorer considérablement ces animations aspect plus raffiné et plus naturel. Enfin, vous apprendrez à exporter vos fichiers et vos vidéos dans différents formats tels que les cadeaux, les MP4, le Web et le SVG Plus important encore, vous pouvez les utiliser dans votre portfolio pour des présentations, pour le développement ou pour tout autre usage que vous souhaitez. À la fin de ce cours, vous apprendrez à concevoir animations d' interface utilisateur de qualité professionnelle qui apportent personnalité, clarté et raffinement à vos conceptions. Commençons. 2. Qu'est-ce que Figma Motion ?: Bonjour et bienvenue au tout premier cours de Figma Motion. Je vais donc juste vous donner une brève idée de ce qu' est le mouvement figma à travers ce mouvement très rapide, d'accord ? Voyons donc à quoi ressemble ce motion design , et c'est tout. Ça va juste tourner un peu en boucle, mais c'est Figma Motion Et ce que vous venez de voir, si vous connaissez le moins du monde, Figma est probablement révolutionnaire Il s'agit d'une fonctionnalité extrêmement nouvelle si vous l'écoutez à tout moment vers 2026, et il s'agit essentiellement d'un module complémentaire Vous le savez probablement déjà, mais au cas où vous ne le sauriez pas, Figma est un programme de conception à utiliser de manière très générale, plupart du temps utilisé à des fins de conception UIUX Il est utilisé pour la conception de sites Web, pour la conception d'applications, pour créer tout type d'écran, tout type de prototype filaire Mais ces dernières années, il s'est élargi pour inclure également de nombreuses choses différentes. Création de graphismes, de conceptions graphiques, d'affiches, ainsi que de présentations elle est désormais également utilisée pour les réseaux sociaux et bien plus encore. Avec cette nouvelle mise à jour, vous pouvez désormais créer ces graphismes, et il ne s'agit pas d'un simple gadget D'accord ? Laisse-moi te le dire. Figma Motion est une toute nouvelle fonctionnalité. dirais qu'elle n'en est qu' à ses Je dirais qu'elle n'en est qu' à ses débuts, mais elle va être étendue, travaillée et étendue pour devenir une fonctionnalité plus complète. Revenons donc un peu en arrière et discutons de son utilité. Donc, si vous ne connaissez pas ce qu'est le motion design, ce que nous venons de voir ici, cela vous donne essentiellement une chronologie et vous permet de créer différentes animations. Non seulement vous travaillez avec visuels tels que ces éléments de texte, mais ces éléments de texte eux-mêmes peuvent être animés au fil du temps Ce n'est pas quelque chose de complètement nouveau, je dois dire. C'est ce que nous avons constaté avec d'autres programmes tels que Photoshop. Il dispose également d'une chronologie. Ce n'est pas vraiment un logiciel de montage vidéo. Il s'agit plutôt d'un logiciel de retouche photo. Il s'appelle Photoshop, mais cette fonctionnalité est intégrée. C'est quelque chose qu' Adobe fait beaucoup. Il intègre de nombreuses fonctionnalités à leurs programmes. Vous pouvez faire trois D dans presque tous leurs programmes, vous pouvez faire une modélisation en trois D. Vous pouvez faire des animations et ainsi de suite, il y a beaucoup de profondeur Mais jusqu'à présent, FigMa a essayé de le minimiser, et maintenant le fait de proposer cette fonctionnalité a vraiment ouvert de nombreuses portes Dans ce cours, nous allons donc parler de la manière dont nous pouvons tirer parti de cette nouvelle fonctionnalité pour créer des animations magnifiques et fluides. Ces animations sont des choses que nous pouvons exporter sous forme de vidéos. Nous pouvons les exporter en cadeau. Il y a beaucoup de choses dont nous allons discuter avec le temps, et je vais vous apprendre comment vous pouvez intégrer cela dans votre histoire , juste pour vous faire savoir que c' est complètement nouveau. Les gens commencent donc tout juste à en apprendre davantage à ce sujet, et c'est pourquoi vous obtenez un avantage certain. Vous avez une longueur d'avance lorsque vous écoutez ce cours, vous suivez tout cela, et comme je l'ai dit, vous aurez l' avantage d' être un concepteur qui connaît les fonctionnalités les plus récentes et qui peut également les intégrer dans le design de son UIO Hix Sans plus attendre, commençons. 3. Comment le mouvement s'intègre dans le flux de travail de la conception: Maintenant, avant de commencer et avant vous montrer l'interface de cette nouvelle fonctionnalité, Figma Motion, j'aimerais vous expliquer comment vous pouvez utiliser cette fonctionnalité et comment vous pouvez intégrer dans votre flux de travail existant Je vais donc partir du principe que vous êtes déjà un fervent utilisateur de Figma Que vous l'utilisiez pour votre conception graphique, que vous l' utilisiez pour la conception de sites Web ou d' applications, cela n'a pas vraiment d'importance. Mais tu es là, tu sais comment ça se passe, tu sais comment ça marche. Avec ces informations, je pars du principe que vous savez que lorsque vous utilisez Figma, vous pouvez créer différents types de documents Figma Motion n'est donc pas un nouveau type de document. C'est honnêtement ce que j'ai pensé lorsqu'ils ont proposé la fonctionnalité pour la première fois lorsqu' ils l'ont annoncée pour la première fois. Je pensais qu'il aurait une interface complètement différente et qu'il serait complètement distinct des outils de conception que nous connaissons. Au cas où vous ne les connaîtriez pas, vous avez le fichier de conception ici, juste un fichier de conception normal. Vous avez un fichier FIG Jam dans lequel vous pouvez jouer avec vos collègues, vous pouvez réfléchir à différentes idées, un formulaire libre sans trop vous stresser, et vous pouvez également créer des diapositives, des présentations, essentiellement une alternative à PowerPoint Vous avez Figma Make, qui est son propre type d'IA, qui est également très intéressant Figma Buzz, qui est pour les réseaux sociaux, site Figma, je ne vais pas t'ennuyer En gros, la façon dont vous allez y accéder à partir de maintenant se fera principalement par le biais du design. Lorsque vous ouvrez un document de conception comme je l'ai déjà fait ici, vous passez naturellement en mode conception. J'espère que vous le connaissez également. Mais juste au cas où vous ne l'auriez pas fait plus tôt, cela doit être il y a quelques années, ils ont essentiellement introduit ces nouveaux modes. Donc, au lieu de simplement avoir cet ensemble d'outils, mode complètement différent avec des outils différents. Et vous aviez également le mode Dev. Pour être honnête, nous l'avons depuis longtemps. Vous avez ces fonctionnalités, ces différents modes, et maintenant Figma Motion n'est qu'un autre de ces modes Et gardez à l'esprit qu'il en est encore à sa forme bêta. Nous allons donc assister à de nombreux bugs, de nombreux problèmes. Mais revenons-y maintenant. C'est ainsi que vous y accédez, mais comment l'utilisez-vous ? Ou à quoi l'utiliseriez-vous ? Maintenant, comme je l'ai dit, dans le cadre du cours, je vais vous montrer différents exemples ou différentes créations de ce que nous pourrions en faire. Mais en gros, ce que nous faisions auparavant avec les composants et les animations de composants va maintenant être beaucoup plus simplifié avec cette nouvelle création. Ainsi, au lieu d'avoir à créer un composant puis à utiliser chaque variante de composant comme images-clés, nous allons pouvoir déplacer les choses manière plus flexible et avoir différentes utilisations Par exemple, si vous souhaitez créer une animation de notification, vous voulez qu'elle apparaisse comme si quelqu'un était sur un écran et qu'il recevait soudainement une notification. C'est ce que tu veux montrer. Peut-être souhaitez-vous partager votre prototype, non pas de la manière interactive habituelle via Figma, mais plutôt sous forme de vidéo Vous voulez l'afficher exactement comme vous le souhaitez dans le flux que vous souhaitez suivre. Ce que j'ai eu personnellement que j'ai ressenti le besoin d' utiliser personnellement avec mes propres clients c'est qu'ils ne sont parfois pas en mesure de s'y retrouver. Les clients plus âgés, les personnes qui ne sont pas très techniques, ne peuvent pas vraiment utiliser Figma Ils ne savent pas comment s'en servir. Ils sont débordés. simple fait de leur expliquer le cas d'utilisation ou le flux utilisateur en en faisant une vidéo est une façon de procéder. Mais à part cela, créer ces animations différentes et uniques n'était pas impossible. Avant, nous le faisions tous, mais maintenant c'est beaucoup plus facile de le faire. C'est une façon de le faire. Vous pouvez envoyer des notifications. Vous pouvez créer différentes animations en arrière-plan pendant que quelqu'un travaille sur un prototype. Tu pourrais faire plein de choses différentes. Vous pouvez même faire un peu comme une vidéo comme s'il s'agissait d'une vraie vidéo, mais il ne s'agit en fait que d'une animation créée sur Figma Il existe de nombreux exemples, mais la bonne nouvelle, c'est que vous n'avez pas à aller loin, vous devez faire tout votre possible pour l'intégrer à votre flux de travail, car il existe déjà. C'est disponible, c'est sur votre ordinateur, c'est sur votre fichier Figma Il n'est pas nécessaire de créer un autre fichier pour cela. Il suffit de passer dans ce mode. Voici donc un exemple que j' aimerais vous montrer de quelque chose que j'ai fait dès que j'ai vu l'annonce de cette fonctionnalité dès sa sortie, et je suis désolée qu'elle soit restée en boucle, mais c'est en gros une idée très simple Cela a l'air simple, propre et lisse, et c'est quelque chose qui aurait été si difficile à faire avec une Figma normale heure actuelle, grâce à cette fonctionnalité plus avancée, nous sommes en mesure de créer ces animations fluides sans avoir à gâcher nos documents de conception. Il se passe beaucoup de choses ici. Nous avons une animation de position, de taille, d'échelle, d' opacité, etc. Et c'est ça qui est cool. Vous pouvez faire beaucoup de choses complexes sans avoir à vous soucier de leur aspect technique Vous pouvez simplement le traiter comme un programme de montage vidéo normal. Comme je l'ai dit, pour conclure, vous n'avez pas besoin de faire tout votre possible pour intégrer cette fonctionnalité dans votre flux de travail. Il y est déjà. Il est exactement là où vous voulez qu'il soit, là où vous savez comment le trouver, et ce n'est pas si compliqué. Mais vous devez encore l'apprendre, et c' est exactement pourquoi vous êtes ici en train de regarder ce cours. Commençons. 4. : vous naviguer dans l’interface et configurer le fichier de projet.
: C'est bon. Bon retour. Dans cette leçon, nous allons nous familiariser avec l'interface et définir un fichier de projet. Maintenant, comme je l'ai mentionné dans les leçons précédentes, ce n'est pas quelque chose que vous allez faire tout votre possible, mais plutôt quelque chose que vous savez déjà où trouver. Qu'est-ce que cela signifie ? Vous allez aller de l'avant, ouvrir Figma et passer à Design Cliquez simplement sur Design, et vous allez ouvrir un fichier de projet de design classique normal. Donc, juste comme ça, nous avons un brouillon gratuit. Vous n'avez pas besoin d'un abonnement pro ou autre pour accéder à cette fonctionnalité, du moins pour le moment, d'accord ? Vous pouvez donc déjà y accéder, mais je suis sûr qu'ils vont ajouter des éléments qui seront verrouillés pour les abonnements professionnels, mais ce sera un autre sujet pour un autre jour Maintenant que tu es là, tu pourrais me dire où est Figma Motion ? C'est juste ici. Lorsque vous accédez à votre barre d'outils en bas, vous allez naviguer. Vous n'allez pas passer en mode dessin, pas en mode Dev, vous allez passer à Figma Motion Comme je l'ai déjà dit, il est toujours en version bêta, donc il est toujours en train d'y arriver. il y a très peu de façons être honnête, il y a très peu de façons de vous embrouiller à ce sujet. Avant de commencer, vous devez savoir que vous avez besoin de quelque chose sur lequel travailler. Vous avez besoin d'un fichier, d'un élément, d'une couche pour commencer. Je vais y aller et je vais ajouter un écran pour iPhone 16, juste comme ça, vous verrez les choses commencer à fonctionner juste pour vous montrer la différence. Quand j'y suis retourné et que je suis reparti, c'était vide ici et maintenant il était plein, ce qui vous indique, d'accord, qu'il y a quelque chose qui se passe, que quelque chose démarre. Allons-y et créons un article. Il peut s'agir d'un texte ou d'un objet. Je vais juste créer un carré ici et lui donner une couleur. rouge. Ensuite, en utilisant l'outil de texte, je vais écrire Hello world. C'est bon. Maintenant que nous l'avons, nous allons le centrer. C'est bon. Parfait. Maintenant, nous avons ces objets, mais ils n' apparaissent pas ici, n'est-ce pas ? C'est vraiment dommage. Eh bien, pour faciliter les choses, ils n'affichent pas tout ici. C'est uniquement pour les choses qui ont réellement du mouvement, de l'animation. Cette zone est réservée uniquement aux couches d' objets qui contiennent déjà des animations. Sinon, vous verrez les couches juste ici dans ce panneau, comme d'habitude. Donc, pour que quelque chose apparaisse ici, nous devons accéder à cette section du panneau des animations, quel que soit le nom que vous voulez, qui est nouvelle, et vous allez ajouter une animation. Et bien sûr, vous ne pouvez le voir lorsque vous êtes Figma Motion Assurez-vous donc que vous êtes en mode mouvement. Maintenant que nous l'avons ajouté , je ne vais pas encore entrer dans l' animation, mais cela nous a déjà donné une animation de position, d'accord ? Un peu comme une animation de diapositives. Et maintenant, tout à coup, nous avons un objet. Familiarisons-nous avec ce tableau de bord grâce à cette interface, d'accord ? Nous avons ici un élément qui dit, T, c'est une icône pour le texte, et nous avons Hello World. Nous pouvons donc supprimer cette animation ou supprimer le texte, tout complètement, et vous pouvez voir que la position est indiquée. Cela vous indique donc les animations ce texte. Et si nous décidions d'ajouter un autre type d'animation ? Alors maintenant, il est allé de l'avant et a ajouté une animation à l'échelle. Cela l'a donc réduit. Maintenant, vous pouvez voir sous Hello World que nous y avons deux animations différentes. Nous pouvons les fermer ou les ouvrir et les montrer. Ici, vous avez la position, vous avez l'échelle, et chacun a la sienne, je ne sais pas comment vous appelleriez cela exactement, mais il a son propre bloc, disons, avec lequel vous pouvez jouer. Voilà le blocage général. Cette zone, cet objet, déplace tout avec lui. Si nous faisons en sorte que les animations soient très courtes, fois en position et en échelle, cela va changer. Mais si vous modifiez la position de l'une d'entre elles, cela ne changera pas les autres. De cette façon, la position va changer, puis la taille va toujours changer. L'animation à l'échelle se produira en même temps, et vice versa. Nous pouvons le réduire et continuer à changer de lieu. Ça a quelque chose de cool. Vous n'avez pas d'interface très complexe. C'est un peu simplifié et une fois que vous avez terminé avec toutes ces animations multiples, vous pouvez simplement les supprimer, puis vous ne verrez plus que cet emplacement. Ici, nous avons notre chronologie, tout ce avec lequel nous étions en train de jouer, et il vous indique l'heure. Ici, je crois, 200 millisecondes, 400 millisecondes, 600, 600 En gros, vous pouvez également effectuer un zoom arrière en utilisant cette fonctionnalité ici, zoom sur la chronologie, vous pouvez simplement le réduire et le tour est joué. Vous pouvez le réduire ou l' agrandir avec cette fonctionnalité, ou vous pouvez simplement maintenir la touche Ctrl enfoncée et faire défiler l'écran vers le haut ou vers le bas, puis il le fera pour vous. Si vous êtes déjà éditeur, vous savez probablement comment vous y prendre, ce n'est pas si différent. Nous avons également cette option de réduction de la chronologie, qui supprimera tous ces éléments juste en dessous de la chronologie. Donc, si vous voulez simplement vous concentrer sur le cadre ici et que vous n'avez pas beaucoup d'espace, faites-le. Mais si vous voulez entrer dans les détails, vous voulez tout voir autour de vous. Ensuite, nous avons le bouton Play. Juste ici. Au lieu de cela, vous pouvez également simplement appuyer sur espace. C'est ce que j'aime faire. Ici, nous avons quelques options, activez les images-clés automatiques Nous en reparlerons un peu plus tard. Et voici l'heure actuelle. Expliquez très simplement. C'est l'heure à laquelle vous vous trouvez, si vous êtes à une seconde ou deux secondes. Et ici, bien sûr, vous avez votre temps maximum, la durée de toute l' animation dont vous disposez. Pour le moment, il est fixé à 2000. On peut en faire 3 000 et l'unité est la milliseconde. Vous pouvez donc soit le faire, soit le développer à partir d'ici. OK ? Maintenant, ça va le faire fonctionner. Même s'il n'y a pas d'animation, elle durera jusqu'à la fin. C'est bon. Ensuite, bien sûr, nous avons l'option loop. Il est activé par défaut, mais vous pouvez le supprimer, et une fois que vous l'avez supprimé, il ne se mettra pas en boucle. Une fois que c'est terminé, ça va simplement s'arrêter. Mais généralement, lorsque vous travaillez, vous voulez voir vos animations tourner boucle encore et encore, vous pouvez vous assurer qu'elles sont très belles Mais nous avons également une troisième option, appelée Ping Pong. C'est une option très intéressante, mais elle consiste essentiellement à jusqu'au bout et à revenir en arrière, et ainsi de suite. C'est comme jouer au ping-pong, ce qui est très intéressant. Pour être honnête, je n'ai jamais vu cela dans aucun autre programme. Je ne sais pas si c'est juste pour fun ou si cela sert vraiment à quelque chose, mais je peux imaginer que cela peut aider d'une manière ou d'une autre. Vous avez l'option de réduction des couches. Si vous avez plusieurs couches , qu'elles s'ouvrent toutes et qu'elles comportent toutes plusieurs animations, il serait très utile de pouvoir les réduire. Ce sera notre ami. Pour le reste du cours, notre calendrier. C'est ainsi que nous allons appeler l'ensemble de ce panel. Mais n'oubliez pas que cette nouvelle section d'animation est également très pertinente car c'est là que nous allons ajouter notre animation. Juste pour mieux illustrer cela, lorsque nous ajouterons une animation pour ce rectangle, nous verrons ici les deux objets. Comme vous pouvez le constater, vous pouvez les réduire, les ouvrir et afficher chaque animation en dessous, ou les ouvrir toutes les deux, nous pouvons réduire toutes les couches et nous assurer de les aligner comme nous le souhaitons et comme nous le jugeons approprié. Il y a maintenant beaucoup à apprendre et explorer à propos de cet outil, mais honnêtement, au lieu de vous raconter tout et de vous submerger, j'aimerais que vous fassiez ce voyage avec moi et que vous appreniez comme nous, car c'est la meilleure façon d'apprendre. Dans les prochaines leçons, nous aborderons plus en détail et nous en ferons beaucoup plus et nous en apprendrons davantage grâce à cela. Merci beaucoup de m'avoir écouté et je vous verrai lors de la prochaine leçon. 5. Concevoir les composants de l'interface
: Bon retour. Dans cette leçon, nous allons commencer et faire le premier pas pour créer ces animations. Mais avant de commencer et de créer des animations, nous devons d'abord configurer nos couches, notre design et notre interface utilisateur. Et bien sûr, nous devons créer notre animation d'une manière très propre et fluide afin que, lorsque nous voulons créer une animation, elle fonctionne parfaitement sans aucune complication. Aujourd'hui, nous allons donc créer une notification Toast. Il peut avoir d'autres noms, mais il s'agit d' une bannière qui affichera la notification. Je vous ai déjà montré un exemple de ce à quoi cela ressemble, d'accord ? Donc, les informations que nous devons transmettre il y aura une photo, un nom et des informations, peut-être un message, le type de notification que je déciderai en cours de route. Allons-y et commençons à le créer. Nous allons commencer par créer un cadre que j'ai déjà créé ici. Nous allons le remplir pour le moment , puis nous allons lui donner quelques coins arrondis. Maintenant, je ne m'en tiens pas à un style spécifique ou à un type de design spécifique comme le design d' Apple ou d'Android ou quoi que ce soit d'autre. Je vais créer quelque chose qui nous est propre. Gardez donc cela à l'esprit. C'est bon. Maintenant, nous avons les coins arrondis, puis ce que nous allons faire , c'est placer une photo. Je vais donc en faire également un cadre et je maintiens la touche Maj enfoncée. Je vais le remplir, un peu rougeâtre pour le moment. Je vais aussi lui donner des coins arrondis, et je vais essayer de le placer parfaitement, non ? Voilà. Ensuite, je vais obtenir un élément de texte , puis j' écris du texte. Le texte devrait donc être un peu plus petit. Alors faisons-en 16 peut-être. 14, puis nous allons taper quelque chose ici. Donc, ce truc pourrait être, je veux dire, quel type de notification recevons-nous réellement ? Disons que c'est un message de quelqu'un, donc cette personne s'appelle JACOB et elle nous envoie un message. OK ? Donc, une chose à savoir également est de quel type d'application cela est envoyé ? Donc, ce que nous pourrions faire, c'est également le noter. Nous pourrions donc écrire juste le nom qui est Wettap par exemple Et puis nous avons un message de Jacob. Nous allons changer de couleur, la rendre grisâtre, puis nous allons commencer à taper le contenu du message Donc, comme il n'y a pas assez de place, nous allons juste mettre quelques points. Voilà ce que nous avons. Allons-y, essayons de le tester et de voir à quoi il ressemble sur un vrai téléphone. Je vais mettre un appareil comme le 16, l'iPhone 16, et voilà, nous l'avons. Je vois que nous pouvons également l' étendre vers la droite et vers la gauche. Ce ne serait pas un problème. Allons-y et étendons-le. Nous pouvons donc en écrire davantage. Nous avons donc une certaine complétion, je suis point, point, point. Nous avons donc ici une jolie petite structure. Nous pourrions jouer avec, l' aligner un peu mieux et voir à quoi cela pourrait ressembler. Nous pourrions également agrandir d'autres éléments comme celui-ci. Mais je suis totalement d' accord avec le fait que ça ressemble à ça. C'est bon. Ensuite, ce que nous aimerions faire, c'est peut-être ajouter une image de Jacob ici. Donc, n'importe quel type d'image convient à n'importe quel type de personne. Nous avons donc ici une image, donc je vais juste la prendre. Je vais le copier et le coller ici. Voici Jacob, il l' envoie depuis son téléphone. Il nous envoie un message ou quelque chose comme ça. Il a cette jolie petite photo très artistique ici, peut paraître un peu effrayante, mais c'est vrai Ensuite, nous allons encore plus loin en montrant peut-être de qui provient ce message ou de quelle plateforme il est envoyé. Nous avons déjà dit WhatsApp mais peut-être pourrions-nous ajouter l'icône de WhatsApp. Nous pourrions également agrandir un peu cette photo. Cela dépend entièrement de nous. Mais ce que vous aimeriez faire, c'est vous assurer que la distance entre le haut et le bas la même, n'est-ce pas ? D'accord ? Nous avons donc ici le logo sous forme d'image au format PNG. Donc je vais le prendre. Je suis en train de le recadrer un peu. Nous y voilà. Et je vais l' amener ici, dans le cadre. Pour le rendre plus petit. Je vais le mettre dans ce cadre, mais je vais supprimer le contenu du clip. Ce serait un joli petit arrangement où nous le mettions ici, et ensuite vous pourrez voir qu'il est écrit WhatsApp juste à côté. C'est sympa. Soit ça, soit on pourrait prendre tout ça, l'emporter ici et écrire WhatsApp comme ça Peut-être réduire un peu le logo. Nous pourrions également prendre cela complètement dans cette direction vers la droite. C'est également l'une des manières dont nous pourrions procéder. Je pense que cette méthode nous permet d'économiser beaucoup plus d'espace car nous n'avons pas à empiler les choses d'une seule façon cette zone soit complètement vide. heure actuelle, nous jouons avec la mise en page, en voyant ce qui fonctionne et ce qui ne fonctionne pas dans les deux cas, nous devons aligner ces éléments. Je vais les choisir et les mettre ensemble dans une mise en page automatique, puis je vais les mettre dans une mise en page automatique avec celle-ci afin qu'ils soient alignés au même niveau. Je vais ensuite les mettre dans une mise en page automatique avec cet élément de texte, assurer qu'il ne s'agit pas de valeurs aléatoires, mais qu'elles peuvent être sur une échelle de quatre, huit, 60 et ainsi Ici, vous les avez sur une voiture, donc la distance entre eux est automatique, et ils en ont deux ou quatre. Cela dépend de nous. Mais je vais faire deux, deux, c'est bien. Au final, nous avons toute cette mise en page. Nous avons tout ce cadre. Nous pouvons également faire une mise en page automatique , puis nous avons la photo. Nous avons tout cela ensemble, et nous avons juste besoin de l' aligner correctement. Je vais donc l'aligner vers la gauche et lui en donner huit, peut-être, et c'est parti. Et juste comme ça, nous avons une jolie petite notification. Mais je ne suis pas très content de tout ce qui se passe ici Permettez-moi de modifier un peu l'espacement. Et ce que vous pouvez faire, c'est, je veux dire, vous pouvez tout réduire un peu, et ce que nous pouvons faire, c'est jouer avec. Donc, en termes d' espacement vers le haut et vers le bas, je vais en faire quatre et quatre N° 44, quatre et quatre. OK ? Et puis pour celui-ci, je vais faire en sorte qu'il bloque le format d'image, qu'il remplisse le conteneur. Ensuite, nous pouvons décider de la taille que nous voulons donner à cet objet et de redimensionner l'image avec lui J'aimerais donc maintenant aller plus loin et approfondir le design. J'aimerais donc diminuer l'opacité ici, obtenir un joli petit effet de transparence ici C'est donc vraiment sympa, et c'est ce que fait souvent Apple, et beaucoup d'interfaces utilisateur de nos jours font pour s'assurer que vous pouvez voir une partie de l'arrière-plan, mais nous ne pouvons pas le rendre totalement transparent, juste comme ça, vous savez Et puis le texte présente quelques problèmes de lisibilité Nous allons donc créer, non pas un shader, mais plutôt un effet de verre ou un effet de flou d'arrière-plan Nous pouvons essayer un effet de verre ici, même si cela peut nous poser des problèmes lors de la création de cette animation, etc. Pour l'instant, ça a l'air un peu vitreux. Nous allons le tester. Donc, comme vous pouvez le voir, c'est plutôt vitreux Ce qui est vraiment sympa. Et c'est toujours lisible dans une certaine mesure. Je dirais que ce texte ici doit être noir ou entièrement blanc, mais le rendre entièrement blanc alors l'autre texte est noir n'a également aucun sens. Je vais donc le rendre noir, mais je vais lui donner 50 ou 75 %, ce qui est un peu mieux que ce que nous avions, pas parfait, mais mieux. Très bien, alors maintenant nous l'avons. Vous pouvez également jouer, ajouter des ombres, laisser tomber des ombres comme ça. Portez-en 15. Donc on va juste faire comme si c' une notification que quelqu'un avait reçue. Disons que c'est ici au milieu et que nous écrivons l'horloge. Ce ne sont donc que quelques informations générales, puis nous avons notre notification ici. Maintenant que nous l'avons construit, nous pouvons jouer avec lui et nous assurer qu'il nous convient pour commencer à l'animer Maintenant, nous avons de quoi travailler, non ? 6. Organiser des couches pour l'animation
: Très bien, bon retour. Maintenant que nous avons ces couches, nous avons créé ces couches, ces différents éléments de conception, et nous avons une jolie petite configuration de notification Toast Toast en cours. Cela fonctionne. Ça a l'air bien. Mais il y a une chose. Lorsque nous en venons à animer cela, il se peut que nous ayons des problèmes avec une ou deux choses Et le problème réside dans la disposition et l'organisation de ces couches, je dirais. Pour mieux illustrer cela, j'ai deux versions ici. L'un d'eux a des mises en page automatiques, tandis que l'autre n' a pas de mises en page automatiques Il est essentiellement laissé de côté comme un cadre normal sans mise en page automatique. J'espère que vous le connaissez. Si vous n'êtes pas, Autolayouts nous permet de configurer certains espacements, tels que les marges, le rembourrage, et de configurer les éléments et de les organiser une certaine manière, ce qui le rend plus réactif et plus d' une certaine manière, ce qui le rend plus réactif et plus automatique. Donc, pour illustrer ce que je veux dire, si nous examinons les deux, ils semblent identiques. Ils sont exactement les mêmes, ou presque. Mais il y a une différence. L'un d'eux a une mise en page automatique et l'un d'eux a une mise en page automatique. Nous pouvons donc tester cela en modifiant la taille. Et comme vous pouvez le constater avec celui-ci, lorsque vous changez de taille, les choses se bousculent. Ils ne sont pas correctement configurés. Maintenant, bien sûr, nous pouvons le configurer correctement et proprement, mais cela peut être un peu difficile à faire, non Comme vous pouvez le constater, le texte s' enroule d'une certaine manière et il y a beaucoup de choses qui pourraient mal tourner. Si vous l'essayez vous-même, cela pourrait être encore pire. Pendant que nous le faisons avec celui-ci, il semble un peu plus organisé, non ? Nous pouvons même le configurer pour qu'il soit un peu différent. Cela pourrait même être plus beau si nous le faisions comme ça, par exemple, il semble très fluide et l'animation est fluide. Bien que celui-ci ait besoin d'un peu de travail. En particulier, nous travaillons ici avec des cadres. Si vous travaillez avec des groupes ou si vous n' aviez même aucun type de groupe, vous travaillez avec des objets, des couches , etc., cela aurait été bien pire L'essentiel ici est de créer et organiser correctement vos couches avant de commencer afin d'obtenir une animation fluide et agréable qui vous obligera pas à marcher et à courir partout juste pour vous assurer qu'elle est parfaite. D'accord ? La façon de le faire est donc, comme je l'ai dit, de créer des mises en page automatiques Alors, comment allez-vous mettre des éléments proches les uns des autres de cette manière. Vous pouvez maintenir les objets que vous souhaitez faire en cliquant avec le bouton droit de la souris , puis passer à la sélection du cadre ou ajouter directement la mise en page automatique Vous allez ajouter une mise en page automatique directement, puis vous allez ajouter une Ensuite, vous allez faire en sorte que le tout soit mis en page automatiquement en cliquant ici. Et puis ça va paraître un peu bizarre. Vous allez donc l'ajuster. Vous allez écrire huit, par exemple, vous allez ajouter un peu plus d'espacement sur la droite, et vous pouvez effectuer ce remplissage si vous le souhaitez C'est à vous de décider. Cela semble quand même un peu problématique car nous avons ajouté le remplissage ici, nous pouvons simplement le faire câlin. Et puis, comme vous pouvez le voir, vous savez, il est beaucoup plus agréable de maintenir la touche Maj enfoncée et de la redimensionner Et cela rend l'ensemble du processus beaucoup plus facile à réaliser en ce qui concerne les animations. Vous avez organisé l'ensemble de vos couches. Tu n'as pas à t'inquiéter pour eux. Et maintenant, commençons avec Animate. 7. Créer votre première animation: Bon retour. Dans cette leçon, nous allons créer notre toute première animation, je dois vous le dire, je dois vous la gâcher Ce n'est pas si excitant que ça. Ce n'est pas la chose la plus difficile au monde. Et surtout si vous connaissez les programmes de montage vidéo, ce sera une promenade dans le parc. Commençons. Comment le faisons-nous ? Maintenant, il y a de nombreuses animations différentes et différentes sources que nous allons explorer. Mais d'abord, apprenons à nous y retrouver. Maintenant, nous le savons déjà pour commencer à animer. Si vous recherchez ici quelque chose sur les animations, vous ne le trouverez pas. La première étape consiste à passer en Motion ou en mode mouvement. Une fois que vous y êtes, vous êtes maintenant dans le flux de travail ou l'espace de travail d'animation Donc tu es là maintenant. Tu as tout compris. Vous allez vous diriger vers le panneau de droite et vous allez accéder à la zone des animations ici, la section. Vous avez donc deux options. Vous pouvez accéder aux animations. Cela vous propose donc un ensemble d' animations qui ont de nombreuses options différentes. Si vous connaissez PowerPoint ou tout autre type de logiciel de création de présentations, il propose également un onglet similaire avec des animations. Ou vous pouvez continuer et simplement cliquer sur le Plus. Maintenant, le plus, revenons en arrière. Vous cliquez sur le bouton Plus. Cela va vous donner immédiatement une animation. Ce sera probablement une animation de position et ce sera une animation normale. C'est le moyen le plus simple de créer une animation. Mais comme je l'ai dit, comme je l'ai mentionné, vous pouvez également le faire en allant ici et en choisissant une animation. Maintenant, vous pouvez choisir parmi les options de base. Vous pouvez dire : « Hé, je veux en faire une concernant la position par rapport à l'échelle, la rotation, la taille, l'opacité Il y a Burstgnit, ce sont des préréglages. C'est ainsi que nous les appelons, et ce sont essentiellement des animations déjà configurées car elles ont différents types de mouvements, différents types de vitesses, etc. C'est une chose très importante que tu dois comprendre. L'animation ne consiste pas simplement à dire de passer d'un point A à un point B. Nous pourrions le traiter de cette façon, mais à ce moment-là, nous ne serions pas de bons motion designers. À ce stade, c'est ce à quoi vous devriez aspirer. Vous devriez essayer de vous lancer dans un bon motion design. ce faire, il faut comprendre que les bonnes animations ne sont rien de plus que de simples mouvements, se contentant d'aller d'un point A à un point B. Mais il s'agit de savoir comment vous rendre d'un point A à ce que vous exultez au début Est-ce que vous vous détendez à la fin ? Est-ce que tu ralentis à la fin ? Ou peut-être que tu fais tout à l'envers. Vous accélérez très vite au début, puis vous ralentissez au milieu, vous profitez du moment, puis vous accélérez à la fin. Tu le termines en beauté. Il existe de nombreuses façons de le faire. Peut-être que vous commencez lentement et que vous allez vite, puis lentement, rapidement et lentement. Il existe de nombreuses façons de s'y prendre, mais le plus important est qu'il devrait y avoir une idée, parfois il y a même un rebond C'est quelque chose que vous allez apprendre quand il s'agit d'animations, il y a un rebond, n'est-ce pas ? Il est très courant que lorsque l' animation démarre, disons que cette petite notification arrive, cette petite notification arrive qu'elle passe ensuite vers la droite, puis qu'elle revient en arrière, elle rebondit comme une balle Ça frappe et revient un peu. Tous ces facteurs donnent une impression. Si vous créez une application avec de jolis petits personnages et de jolis petits mouvements. Il est logique de le rendre rebondissant. C'est amusant de rebondir Mais d'un autre côté, la création d'une animation qui doit être élégante et de qualité devrait être plus lente. C'est exactement ce que nous allons apprendre dans la prochaine leçon. À l'heure actuelle, nous avons créé notre première animation. Dans la prochaine leçon, nous allons explorer les différents types d'animations. 8. Animer la position, l'échelle et l'opacité: O Bon retour. Tout d'abord, nous avons appris à créer une animation dans la dernière leçon, mais nous n'avons pas pu la tester, n'est-ce pas ? Allons-y donc et essayons de le tester. Je vais juste cliquer sur plus. Je vais me procurer la première animation, et je ne vais rien y changer, d'accord ? Donc, comme nous l'avons déjà appris, la façon de le tester est de suivre ce petit truc de chronométrage, et vous allez simplement cliquer sur l'espace, puis vous allez avoir un aperçu de son apparence, et tout se déroulera en boucle. Donc, comme vous pouvez le voir, c'est du mouvement. Ce n'est pas spécial. Ce n'est pas fou. Mais évidemment, ce n'est pas bon. Ça part juste d'ici. Il s'agit donc d'un type de mouvement, et lorsque nous entrons dans les détails, lorsque vous cliquez dessus, de nombreuses options s'offrent à vous . Ne vous laissez pas submerger. Ce n'est pas si compliqué. Le type de mouvement est sélectionné pour nous sous forme de diapositive. Cela signifie qu'il s'agit d'un type d'animation d'entrée de gamme. L'objet entre dans le champ de vision. Il peut également être coulissant. Il commencerait donc là où il se trouve, puis il partirait vers la gauche. OK ? C'est donc une chose que nous pouvons configurer. Il peut également être personnalisé. Cela peut aller de haut en bas, droite, à gauche, comme nous voulons. Mais revenons à la diapositive car c'est ce que nous recherchons. Vous pouvez choisir l'endroit d'où vous souhaitez le placer. Est-ce à gauche, de droite, en haut à gauche ? Mais restons-en à la gauche. La notification provient de la gauche vers la droite. Ici, là où cela devient intéressant, nous pouvons également décider de la distance. Si vous placez le pointeur de la souris ici, vous pouvez également simplement la faire glisser pour augmenter la distance Faisons-en donc un peu plus jusqu'à ce qu'il soit hors de vue. Et comme vous pouvez le constater, maintenant, cela fonctionne beaucoup mieux. C'est donc hors de vision, puis il entre dans le cadre. Très bien, nous avons donc quelques options supplémentaires que nous explorerons un peu plus tard. Pour l'instant, cela nous suffit. C'est une jolie petite animation de position. Qu'est-ce qu'on a d'autre ? Une fois que nous commençons à cliquer sur Plus, nous commençons à obtenir différents types d' animations, comme l'échelle, n'est-ce pas ? L'échelle va donc augmenter ou diminuer, voyons voir. Ainsi, lorsque nous le prévisualisons, il semble être de plus en plus petit Vous pouvez donc cliquer dessus et voir ce qu'il dit ici. Donc ça veut dire que ça prend de l'ampleur, non ? Il entre donc dans le cadre, puis il évolue. Mais il semble être de plus en plus petit. Alors testons-le et faisons-le à 200 %. Donc oui, ça veut dire que c'était 200 %. Il entre dans le cadre, puis il devient 100 %. Nous pouvons également le modifier et l'étendre à une plus grande échelle. Ensuite, il passe de 100 % et il passe à 200 %. Nous avons donc à peu près la même logique en ce qui concerne le type et le montant. Et c'est vraiment bien parce que c'est logique. Vous pouvez également simplement cliquer sur ces quatre cercles et choisir celui que vous souhaitez. Vous pouvez le faire pivoter. Voyons à quoi cela ressemble. Ça doit être amusant. Parfait. Donc, tout cela peut paraître un peu stupide en ce moment, mais il ne faut pas les utiliser comme ça Tu devrais y penser plus intentionnellement. Et pour chaque type d' animation ou pour chaque type de scénario d'utilisation, vous devriez avoir une animation différente. Vous devez donc comprendre que pour ce cas d'utilisation, rotation ne fonctionne pas vraiment, mais que pour un autre, elle pourrait le faire. Nous avons également des côtés. Alors, de quelle taille change-t-il les choses. La taille fonctionne. Vous pourriez dire : « Hé, l'échelle et la taille , c'est la même chose. Mais quand il s'agit de Figma, ce n'est pas le cas. Ce qu'il fait ici, c'est simplement étendre le cadre lui-même, non ? Alors je l' apporte et je l'étire . C'est ce qu'il fait. Ce que fait la balance, c'est qu'elle l'étend d'une manière différente. C'est comme si vous aviez cliqué sur K. Revenons à l'éditeur normal et vous cliquiez sur K. Ce que K fait, cela vous permet de le redimensionner J'ouvre un outil qui vous permet de le dimensionner tout en conservant l'échelle de tout. Tout serait redimensionné exactement de la même manière, mais juste beaucoup plus grand Mais si nous le faisons avec la souris normale, si vous appuyez sur V, vous obtiendrez la souris normale et de cette façon, vous pouvez l'agrandir, l'image peut être plus grande, mais pas le texte et il est placé maladroitement C'est là une différence. en revenir aux animations, il reste encore beaucoup à explorer. Il y a de l'opacité. Et comme je l'ai mentionné, il y a tous ces préréglages que nous avons ici Allons-y et essayons l'un d'entre eux. Je vais cacher la position où pour l'instant, et allons-y. Comme vous pouvez le constater, le simple fait d'ajouter une rafale a permis d'ajouter plusieurs animations. Il en a ajouté quatre pour être exact, et ils sont tous prédéfinis avec différents types de vitesses, d'éléments et de graphiques qui peuvent être un peu confus. J'ai ajouté l'opacité, la rotation, l'échelle et la position. Comme vous pouvez le constater, ils sont également tous différents. Et ça ressemble exactement à ça. Ce qui est bien, c'est vous fait gagner beaucoup de temps si vous n'avez pas de temps libre et que vous voulez simplement quelque chose de rapide et déjà fait. Mais si vous voulez faire quelque chose de vos propres mains, je vous recommande d'en apprendre davantage, et c'est exactement ce que nous allons faire dans les prochaines leçons. Merci de votre attention, je vous verrai dans la prochaine leçon. 9. Le rythme, la durée et l'accélération: Très bien, alors, bon retour. Maintenant que nous avons défini une animation, n'est-ce pas ? Nous avons appris à créer une animation. Nous avons appris à utiliser l'un des préréglages ou à jouer avec différents types d' animations, ainsi qu'à utiliser et à parcourir cette chronologie comprendre son fonctionnement, n'est-ce pas ? Nous avons fait tout cela, mais il est maintenant temps de parler des détails. Donc, lorsque vous prenez une position, n'est-ce pas, nous avons expliqué qu'il existe de multiples facteurs ou variables avec lesquels nous pouvons jouer, si vous le permettez. Certaines de ces variables sont le type, donc le type de mouvement, qu'il s'agisse d'un glissement vers l'intérieur, d'un glissement vers l'extérieur ou d'un mouvement personnalisé, nous avons ensuite la direction. Nous en avons parlé ainsi que de la distance. Ce dont nous n'avons pas parlé, c'est du délai, durée et de l'assouplissement. D'accord ? Et il n'est pas facile d'en parler. Maintenant, oui, bien sûr, le délai est simple. Cela signifie simplement à quel point ce type d'animation va être retardé. Nous pouvons donc changer cela. Ce n'est pas si difficile. Comme vous pouvez le constater, nous pouvons, vous savez, faire glisser vers le haut et vous pouvez voir que l'animation est retardée, n'est-ce pas ? C'est aussi simple que, vous savez, aussi simple que cela puisse paraître, c'est juste retardé, n'est-ce pas ? Rien de plus, rien de moins. Mais nous avons quelque chose, vous savez, nous avons quelque chose de plus. Donc, lorsque nous choisissons à nouveau cet élément et que nous passons à l'animation, il y a aussi la durée, qui semble également très simple, n'est-ce pas ? Vous avez donc 500 millisecondes ici. Ensuite, nous pouvons doubler ce chiffre et dire mille, puis l'animation sera simplement plus lente. Ce n'est pas une surprise. C'est également très simple. Là où cela peut devenir un peu compliqué ou difficile, c'est l'assouplissement. Heureusement, avec d'autres programmes, c'est plus difficile Avec Figma, ces préréglages ont été créés ou simplifiés pour les utilisateurs Encore une fois, vous disposez de ces différents préréglages. Maintenant, je pense que par défaut, c'est présenté comme une solution facile à utiliser, mais il en existe de nombreux types différents. Il y a le type linéaire, qui est le type de mouvement normal. C'est un mouvement linéaire. Il ne change pas, il n' accélère pas , il ne décélère pas C'est juste constant, non ? Donc, s' il y a une voiture qui 16 miles par heure, 10 kilomètres/heure, elle continue à rouler exactement à la même vitesse, n' continue à rouler exactement à la même vitesse roule 16 miles par heure, 10 kilomètres/heure, elle continue à rouler exactement à la même vitesse, n'est-ce pas ? Considère ça comme une voiture. Quand vous parlez de détente, ce qui se passe, c'est que cette voiture démarre à la même vitesse, reste à 10 kilomètres, puis à la fin, elle commence à ralentir, comme le ferait une voiture normale, n'est-ce pas ? Vous ne vous contentez pas d'appuyer soudainement sur les freins, mais vous commencez plutôt à ralentir pour décélérer, C'est donc exactement ce qui se passe. Ça s'en va, puis ça commence à s'assouplir. Désolée, c'était facile. Nous avons la possibilité de nous en sortir. Allons-y. Comme vous pouvez le voir, c'est un peu comme s'il était arrivé et avait commencé à ralentir le stationnement juste comme ça. D'accord ? Nous en avons différents types. Il y a de la facilité à entrer et à sortir. La facilité d'accès n'est donc qu'au début. Donc, lorsque vous commencez, ça démarre, la voiture commence à s'arrêter. Cela commence lentement, puis s' enivre, devient plus rapide. Et dans ce cas, ce n'est pas facile, mais nous pouvons faire les deux. Voyons donc à quoi cela ressemble. Cela ressemble donc à une voiture normale. Il commence lentement , puis prend de la vitesse, puis il se termine également lentement. C'est ainsi que cela fonctionne normalement. Maintenant, nous avons de nombreuses options différentes dans lesquelles nous introduisons ce que l' on appelle les limites Alors, détendez-vous, par exemple. Vous avez donc un petit équilibre. Il entre donc, puis il va un peu trop loin vers la droite, puis il revient en arrière. C'est une sorte d'équilibre, et c'est exactement ce qui est censé être, vous savez, ce qui est censé se passer. Vous disposez également de nombreux préréglages différents. Alors allez-y, vous savez, essayez de les explorer, essayez de comprendre ce qui est le mieux. Et ce qui est cool , c'est que vous avez ces options personnalisées. Vous pouvez donc dire « faisons du personnalisé », puis vous pouvez le personnaliser. Maintenant, je ne vous conseillerais pas de commencer à jouer avec ça pour l' instant si vous n'êtes pas familier car cela peut être un peu compliqué. Mais si vous voulez vraiment l' essayer, laissez-moi vous l' expliquer très rapidement. OK, vous avez donc deux options différentes. Vous avez une courbe et un ressort. Le ressort est davantage lié aux rebonds, etc. D'accord ? Nous allons donc le tester avec le ressort. Vous avez ce rebond très rapide. Tu peux faire la vitesse, tu peux faire plein de choses différentes. Mais en gros, vous configurez la même animation de différentes manières. Donc celui-ci a aussi un rebond, mais c'est un type de rebond différent Voyons à quoi ça ressemble avec le ressort. Cela ressemble donc à un ressort un véritable ressort qui revient. Vous avez donc différents types de mouvements. De la façon dont vous procédez, vous avez cette ligne. Une fois qu'il franchit cette ligne, il devient un rebond. Donc, si nous le maintenons en dessous de cette ligne, il y a un très, très léger rebond, comme vous pouvez le voir, très léger et c'est parce que nous ne pouvons pas le voir Donc, si nous essayons de le diminuer, c' est tout ce que nous pouvons faire . Il a donc zéro. Il n'y a presque aucune limite, d'accord ? C'est donc un peu comme un ressort. Comme je l'ai dit, il faut y penser en fonction du rebond. Le rebond s'y trouve, et vous pouvez créer des rebonds infinis comme celui-ci, par exemple, ce qui est fou, mais vous pouvez le voir graphiquement C'est donc comme un ressort. Vous pouvez donc décider du nombre de rebonds qu'il aura à droite et à gauche en augmentant ce montant Et une fois que tu en as un, c'est dingue. Maintenant, revenons un peu à la courbe. La courbe, c'est quand ça devient plus chic. Tu peux toujours avoir un rebond, mais ça devient un peu plus chic, Alors maintenant, comme vous pouvez le constater, nous avons un rebond. Tout tourne autour de ces deux courbes, non ? Et vous avez deux options ici, deux courbes. Et ils décident de beaucoup de choses, comme vous pouvez le constater. Comme je l'ai dit, la courbe passe au-dessus de la ligne, ce sera un rebond. Essayons donc de mettre ça de côté. Notez cela comme ça, par exemple, et voilà. Donc maintenant, nous ne sommes pas censés avoir de limites, mais comme vous pouvez le voir, c'est plutôt linéaire, et c'est parce que cela ressemble à une ligne droite, non ? Alors, que diriez-vous de vous détendre un peu, d'accord ? Donc, l'assouplissement signifie que c'est la vitesse à laquelle cela va s'accélérer. Il peut donc prendre de la vitesse lentement. C'est comme ça que nous facilitons les choses, d'accord ? Comme ça, puis ça prend de la vitesse. Alors voyons voir. Allons-y. Et puis ça a pris de la vitesse très rapidement. Maintenant, nous pouvons faire le contraire. Nous pouvons le précipiter en faisant le contraire. Tu vois ça ? Il en va de même ici, si nous voulons que cela s'assouplisse, nous devons le dire de cette façon. Donc, si nous voulons que cela se calme, voyons à quoi cela ressemble. Donc, comme vous pouvez le constater, il s'est levé très rapidement. Cela ne s'est pas facilité, mais cela s'est beaucoup atténué. Faisons maintenant le contraire. Maintenant, ce qui va se passer, c'est qu'il va s'arrêter très rapidement, puis ralentir au milieu, puis prendre de la vitesse jusqu'à la fin. Donc, comme vous pouvez le voir, très vite, puis lentement, puis rapidement. Et puis l' animation s'est terminée très rapidement. Je veux dire, si nous le configurons pour qu'il ne tourne pas en boucle, c'est à ça que ça ressemble. Mais c'est un peu trop rapide ici. Par exemple, faisons-le comme ça. C'est ça. Nous pouvons donc faire le contraire. Nous pouvons le faire si nous le faisons comme ceci et celui-ci comme ça. Ensuite, nous avons quelque chose qui ressemble plus à un easy in. Comme vous pouvez le voir, ce n'est pas si raide et au milieu, cela devient très raide, très vite, puis ralentit. OK. Donc tu vois. Et c'est comme ça que ça s'est passé. Tu sais, je me suis calmé et ça s'est calmé. Mettez tout cela de côté et demandez-vous à quoi cela sert. Pourquoi est-ce que je fais ça ? Quel en est le but ? Et laissez-moi vous donner la réponse. La réponse réside essentiellement dans l'effet que vous essayez de donner, l'impression. Essayez-vous de donner une impression élégante et douce ? , je vous recommande créer ces animations faciles car vous voulez montrer que les choses , car vous voulez montrer que les choses sont élégantes et éclatantes Il y a beaucoup d'innovation, de rapidité et d'action, mais il y a aussi un ralentissement. Vous savez, et cela apporte une sorte d'élégance à n'importe quelle marque, quel que soit le mouvement que vous essayez de faire ressortir. Et puis, lorsque vous optez pour le printemps, le printemps prend une tournure plutôt amusante caricaturale Ce n'est pas si mal, mais ça vous dit en quelque sorte : « Hé, nous nous amusons tous ici ». Il n'est pas nécessaire que ce soit aussi doux, agréable et doux, mais il peut plutôt être rebondissant. Cela peut être amusant. C'est comme des personnages d'animation, des dessins animés, ils sautent et rebondissent constamment, et c'est exactement ce que vous êtes Vous avez des animations gonflables. Je trouve ça vraiment cool si c'est configuré la bonne façon pour le bon client ou pour la bonne identité. Vous avez donc dû vous demander quel type de marque, quel type de marque site Web ou d' application créez-vous ? Les animations devraient-elles être drôles, caricaturales et amicales ou devraient-elles être plus douces et élégantes et, vous savez, de haute qualité ? Il faut donc en quelque sorte y réfléchir. Et bien sûr, chaque personne a son propre style. Certaines personnes se relâchent, se relâchent, autres se contentent de s'en sortir. Les gens font donc beaucoup de choses différentes. Pensez donc à créer votre propre style ou créer un style spécifique pour la marque sur laquelle vous travaillez. Et s'il existe déjà des stop motions, des vidéos et des animations liées à la marque, vous pouvez peut-être essayer de trouver le style à partir de là et continuer dans le même style. Expliquez donc très simplement comment vous pouvez modifier le mouvement en fonction de la durée, l'assouplissement, du délai de vos animations pour donner une certaine impression et un certain effet. Merci beaucoup de m' avoir écouté, et je vous verrai lors de la prochaine leçon. 10. Séquencer plusieurs éléments: Jusqu'à présent, nous avons cette petite animation que nous avons créée ici. Et nous avons déjà parlé de l'assouplissement des paramètres, etc. Nous allons essayer de ne pas faire grand-chose à ce sujet dans cette leçon. Dans cette leçon, nous allons parler plus des animations multiples au sein d'une même scène, ce que vous allez faire et que vous devriez vouloir faire, car une animation est géniale. Deux animations, c'est encore mieux. Dix animations. Ou peut-être trop. Si vous le faites correctement, vous pouvez multiplier ces animations. Vous pouvez les placer les uns sur les autres et les superposer de manière à ce qu'ils soient lisses , efficaces et professionnels. C'est donc exactement ce que nous sommes en train de faire. Et si vous pensez à n'importe quel type de système d'exploitation, quel que soit le type de système d'exploitation avec lequel vous travaillez, vous vous rendrez compte qu'ils comportent souvent ces animations en couches. Il ne s'agit pas simplement d'une notification qui arrive et ressemble à un ding, mais elle est plutôt plus complexe. Il se passe plusieurs choses en arrière-plan. OK. Je vais donc essayer de vous le démontrer et de le faire avec vous, étape par étape. Nous avons donc maintenant cette animation de position. Ça a l'air super. Allons-y et ajoutons une autre animation. Je vais donc simplement cliquer sur le bouton Plus, et cela me donnera une animation à grande échelle, ce qui ne ressemble pas vraiment à ce que je veux faire. Augmentez donc de 120 %. Au lieu de l'échelle, je vais aller de l'avant et voir ce que la taille peut faire pour moi. OK ? Nous travaillons maintenant avec la taille, et vous pouvez voir qu'elle est redimensionnée Il a donc la taille normale, puis il grossit. Nous voulons faire le contraire. Nous allons donc redimensionner. Nous allons donc avoir une taille différente. Cela va correspondre à ce que nous avons actuellement. Je sais que c'est un peu difficile à comprendre, et j'ai l'impression qu'ils devraient peut-être reformuler cela d'une manière ou d'une autre N'y pense pas trop pour le moment. Maintenant que nous l'avons, au lieu de le redimensionner, je vais le personnaliser Parce que lorsque vous personnalisez, cela vous permet de choisir si vous voulez faire à fois X et Y ou si vous voulez faire de la largeur et de la hauteur, cela vous donne ces options. Très bien, ce que nous allons faire, c'est choisir l'accès et passer à X. Cela ne changera que la largeur pour nous, c'est ce que nous voulons. Ensuite, nous allons venir ici et nous allons dire que la largeur d' avant sera de dix, et que la fin sera de 100. Voyons maintenant à quoi cela ressemble. Ce n'est pas exactement ce que nous voulons. Mettons-le donc au début ou ici au milieu. Et je vais redimensionner la largeur au début pour qu'elle soit négative, d'accord ? Et c'est parce que je pense que zéro est peut-être la taille à laquelle vous commencez. Il faut donc que ce soit bien inférieur à zéro, d'accord ? Alors maintenant, nous arrivons ici. Oups, voici l'animation de dimensionnement. C'est pourquoi il ne diffusait pas grand-chose. Nous allons donc apporter la taille de l'animation. Nous allons le mettre ici. Nous allons l'étendre. Maintenant, nous pouvons le vérifier. vous pouvez le constater, cela s'ouvre. Cela va bien au-delà de ce que nous voulons. Nous allons donc faire en sorte que la largeur soit nulle. Donc, comme je l'ai mentionné, zéro est le point où c'est déjà la largeur. C'est donc là que c'était. Donc ça va passer de moins 244 à zéro. OK ? Maintenant, je vais déplacer un peu l'animation parce que je veux qu'elle commence un peu tard, et je vais prolonger ici la durée totale de toute cette animation. Je veux donc voir comment cela s'étend à partir de ce cercle. Donc je vais peut-être l' apporter ici ou ici. OK. Et je vais le réduire encore plus au début. OK. Je zoome un peu. Je vais donc faire en sorte que ce soit moins trois, un, huit. Je pense que c'est une bonne chose. Pas parfait, mais bon. Ça va commencer ici , puis ça va s'ouvrir. Mais comme vous pouvez le constater, il y a un peu de bizarrerie parce qu' arriver ici, s'arrêter ici, puis c'est s'ouvrir Ce que nous préférons c'est qu'il arrive au milieu, d'accord ? Et puis elle s'ouvre. Alors, comment pouvons-nous faire en sorte que cela se produise ? C'est une très bonne question. Ce n'est pas facile à faire, mais nous allons essayer de trouver une solution. Donc, j'imagine que cela devrait être fait, au moment où cela arrivera ici, il devrait arriver au milieu. Alors faisons-le exactement, d'accord ? Ce cadre doit donc être au milieu. Je vais donc cliquer sur le cadre. Je vais aller voir le rédacteur en chef. Nous allons venir ici. Et nous allons essayer de le centrer. OK ? Nous allons le placer ici au milieu, mais pas en ce moment, plutôt en ce moment. OK ? Je vois que quelque chose ne va pas. Va l'ajuster un peu. Donc je vais apporter ça, choisir celui-ci et le mettre au milieu, d'accord ? Alors maintenant, voici ce qui va se passer. Il va arriver au milieu, puis il va s'ouvrir. Et d' ici là, quand l'animation se terminera et qu'elle commencera à s'ouvrir, je vais le faire. Une fois terminée, l' animation de taille commence. Et une fois qu'il commencera à s'ouvrir, ce sera comme s' il y avait une animation dans laquelle il changerait de position. Alors, comment s'y prendre ? simple, nous allons simplement cliquer et cliquer sur la position ici. Nous allons donc ajouter une autre position. Et nous allons le personnaliser, car nous voulons simplement créer une animation personnalisée. Donc ça va partir de zéro, puis ça va juste aller vers la gauche, donc moins 92. Voyons donc si ça va marcher. Nous allons nous étendre d'ici à là. Voyons voir maintenant. Comme vous pouvez le constater, c'est exactement ce que nous voulons, mais ce n'est pas le bon chiffre. Essayons donc de le faire fonctionner. Et ce n'est qu'une approximation. Nous y voilà. Alors voyons voir. C'est bon. C'est vraiment chouette. Maintenant, ce n'est toujours pas parfait, et il reste encore des choses à faire. Mais je pense que nous avons déjà fait beaucoup de progrès. Donc, ce que nous pouvons encore faire, c'est que nous pouvons, vous savez, changer les animations afin changer les animations afin de pouvoir les utiliser plus facilement. Vous pouvez le faire, vous savez, de manière plus personnalisée et vous pouvez augmenter l' assouplissement si vous le souhaitez. Et il en va de même pour la taille, vous pouvez donc le personnaliser. Et si vous le souhaitez, vous pouvez également lui donner un peu de rebond. Voyons à quoi ça ressemble. Ce n'est pas la meilleure monture, pour être honnête. Alors faisons en sorte que ce soit normal. Je dirais que c'est un peu trop lent, donc je vais aller plus vite. Ce qui est encore plus cool, c'est : et si on le faisait se chevaucher avec celui-ci ? C'est exactement là que vous pourriez commencer à gagner. Ce n'est donc pas parfait, mais cela devient plus complexe. Cela se passe en même temps. Ce n'est pas un par un, mais tout se passe en même temps. Mais à l'heure actuelle, lorsque nous faisons quelque chose comme ça, cela ne fonctionne pas très bien. Reprenons-le et voyons ce que nous pouvons en faire. Nous pouvons commencer à changer la taille, nous pouvons commencer à changer les choses à différents moments. C'est à vous de décider, mais ça doit paraître correct. Comme vous pouvez le constater, cela semble étrange. Essayez donc de vous assurer que tout se passe bien. Donc oui, maintenant nous avons une jolie petite animation en couches. Cela dépend de plusieurs facteurs. Nous pouvons aller plus loin et examiner les différents éléments qu'il contient, comme ces textes, par exemple. Ce que nous pouvons faire pour eux, c'est ajouter, par exemple, un effet d'opacité Il faudrait donc simplement l'aligner correctement, et il passerait de zéro à un peu plus d'opacité, mais comme je l'ai dit, il suffit de l' aligner correctement Cela semble donc beaucoup plus fluide, comme si le texte s'estompait et c'est vraiment sympa Vous pouvez également, vous savez, modifier beaucoup de choses dans cette animation juste pour rendre plus naturelle, en la superposant, comme je l'ai dit Plus vous y mettez, plus il a l'air sophistiqué. Et, bien sûr, en fin de compte, en essayant, nous visons la simplicité. Nous visons le minimalisme et beaucoup de design. Mais nous ne pouvons également obtenir ce look simple et épuré qu'en faisant beaucoup de choses compliquées en arrière-plan. Alors, allez-y, essayez-le vous-même et voyez ce que vous pouvez obtenir à partir du type d'animations en couches que vous pouvez créer. Essaie d'en faire autant que tu peux. Mais surtout, assurez-vous que cela semble normal. Cela semble harmonisé comme si ces animations fonctionnaient ensemble. Merci beaucoup de m' avoir écouté, je vous verrai lors de la prochaine leçon. 11. Organiser le calendrier: Bonjour, et bon retour. Dans cette leçon, nous allons parler de l' organisation de votre chronologie. Donc, ce que je veux dire à ce sujet, il ne s'agit pas seulement d'organiser votre chronologie, mais aussi de vous assurer que les durées les animations sont bien chronométrées C'est le véritable objectif de la chronologie. Il s'agit de chronométrer vos animations et de vous assurer qu'elles sont synchronisées, harmonisées de manière à ce qu' naturelles et fluides, et tout ce qu'il y a de mieux Alors maintenant, dans les dernières leçons, nous avons créé cette jolie petite animation. Et comme vous pouvez le constater, nous avons joué un peu avec les animations. D'accord ? Nous avons joué avec la durée et le type des animations Et une chose à garder à l'esprit est que, vous savez, les cadres sont organisés de cette façon. C'est une méthode très simple et intuitive sur la gauche. Donc, en gros, vous avez le cadre sur lequel vous travaillez. Imaginez-en un, par exemple, et vous aurez tous les types d' animations qui y sont liés. Et vous pouvez voir la durée maximale. Vous pouvez donc voir combien de temps cet élément, ce cadre, bouge ou change. Ensuite, vous pouvez voir que l'animation de position passe de ce moment à ici, puis vous avez l'animation de taille qui se produit en même temps qu' une autre animation de position. Même chose pour l'image 5, mais l'image 5 n'a qu' une animation d'opacité Comme vous pouvez le voir, lorsque nous modifierons l'animation de l'image 5, toutes les autres seront entraînées avec elle. Et il en va de même pour étendre toutes les autres animations. Jusqu'à présent, c'est clair. Nous savons comment ils fonctionnent. Allons-y et essayons de nous embrouiller un peu plus. Apprenons à créer des animations simultanées ainsi que des animations qui se produisent les unes après les autres. En gros, modifions-nous la chronologie. Maintenant, en termes d'animations simultanées, elles sont en quelque sorte concurrentes. Parlons donc de la création d'une animation qui se produira ensuite, vous savez, en prolongeant la scène. Donc, si vous venez ici, vous recevez un message, n'est-ce pas ? Ce qui est vraiment sympa. Ça a l'air génial. Maintenant, que se passera-t-il une fois que vous aurez reçu ce message, n'est-ce pas ? Je pense donc qu'une autre animation qui pourrait s'y adapter est peut-être qu'elle a été déplacée. Peut-être que l'utilisateur se trouve sur la gauche. D'accord ? Donc, au lieu de le glisser vers l'intérieur, je vais en faire un toboggan vers l'extérieur et je vais le prendre complètement vers la gauche. Donc, pour le moment, il ne fait aucun mouvement, et c'est parce que je suppose que l'animation se situe en dehors de la chronologie. Je vais donc étendre la chronologie ici. C'est bon. Maintenant, nous pouvons voir l'animation et je peux jouer avec. Donc, la distance, augmentons la distance pour faire disparaître, et voilà. Encore une fois, comme nous l'avons appris, nous allons aller de l'avant , choisir le poste et essayer de le rendre plus intéressant. Voyons ce que nous pouvons faire avec Bouncy. Ce rebond n'est pas très rebondissant comme nous le souhaitons Je vais juste faire de la facilité , puis je vais faire de la personnalisation. Ensuite, je vais le personnaliser. Maintenant, ce qui est intéressant, c'est que je veux que ça rebondisse dès le début Je veux que la personne le prenne vers la droite, puis vers la gauche. Voyons à quoi cela ressemble. Tu vois ça ? C'est parti un peu vers la droite, j'ai rebondi au début puis je suis reparti Et cela lui donne un peu de caractère et d'identité. Je veux dire, lorsque vous touchez l'écran, vous touchez peut-être cette notification, puis par accident, vous la prenez un peu vers la droite, puis vous l' emmenez là où vous voulez, c' est-à-dire vers la gauche. Et juste comme ça, nous avons en quelque sorte ajouté une animation différente dans la chronologie. Nous pouvons continuer, étendre la chronologie et créer une autre animation. Nous pouvons donc le faire, nous pouvons passer en mode design. Je vais prendre ça. Je vais l'apporter ici et je vais, vous savez, le centrer. Et je vais écrire OK. Maintenant, nous l'avons et restons centrés sur le sujet. Ensuite, je vais revenir à l'animation, au mode mouvement, et je vais supprimer les autres animations de celle-ci. Comme vous pouvez le voir, il a copié toutes les animations qu'il avait. Je vais tous les supprimer, créer les miens et voir ce que nous avons ici. Magnify semble intéressant. Ça a l'air vraiment cool. Mais je veux qu'il soit un peu plus court. Voyons voir. Mais nous pouvons aller de l' avant et en revenant ici, je vais les mettre au même niveau. Ensuite, je vais le copier et le mettre ici. Maintenant, cela aura également la même animation. Je vais l'ajouter ici et voyons à quoi cela ressemble. Et ce qui serait encore plus cool, c'est que je vais l'apporter ici. Je vais venir ici et lui donner une autre animation. Je vais donner une autre animation à cette image, et elle sera là. Nous allons lui donner une animation de position. Au lieu de glisser vers l'intérieur et vers l'extérieur, je voulais juste choisir le Y pour qu'il commence à zéro, puis qu'il passe à 100. Nous ne voulons donc pas baisser, mais plutôt le contraire, nous voulons passer à moins 100, disons que c'est trop. Mais je pense que vous savez où je veux en venir, je vais cliquer à nouveau dessus. Partons pour 2030. C' est plutôt bien, mais le moment n'est pas parfait. Et je pense que nous devons en faire une couche supérieure. Maintenant, je vais recommencer à simuler ma motion. Parfois, vous ne voyez pas la chronologie et vous n'avez qu'à cliquer sur n'importe quel élément. Maintenant, ça a l'air beaucoup plus beau. Nous pouvons le rendre encore plus parfait en reprenant la position et en jouant un peu avec elle Un exemple comme celui-ci. Et vous pouvez voir à quel point cette animation est belle, les toutes petites images, nous pouvons aller les examiner. Maintenant, bien sûr, je veux juste vous faire savoir que vous pouvez voir la notification arriver ici. C'est une animation différente de ce qui se passe ici. Mais c'est fait exprès. Je voulais que ça soit différent. Mais évidemment, si vous concevez quelque chose comme ça, les notifications devraient être plus cohérentes. Mais voyons à quoi ça ressemble maintenant. OK. Ça a l'air vraiment sympa. Mais laissez-moi vous donner un peu de temps. J'ai l'impression que le message s'affiche un peu trop vite. Je vais venir ici et je vais déplacer le poste ici et je vais les déplacer ici. OK. Oui, ça a l'air plutôt bien. Voilà. Salut, mec, comment vas-tu ? Puis il est supprimé, puis il dit, n'osez-vous pas supprimer mon message ? Je vois ce que tu fais. Revoyons-le encore une fois. Et c'est essentiellement ainsi que vous devriez travailler. Vous devriez considérer votre chronologie comme un terrain de jeu. Allez-y et créez différentes animations à différents moments. Ne craignez pas de faire des dégâts. Assurez-vous simplement que vous vous amusez bien. Et, vous savez, en fin de compte, vous pouvez donner à votre chronologie apparence plus organisée, je ne sais pas. Si vous vous contentez de les réduire, au lieu de les faire tous s'effondrer, vous pouvez les remettre en place, puis vous pouvez voir chaque image. Alors maintenant, nous ne voyons que les cadres. Nous ne voyons pas toutes les animations de ces images, puis nous pouvons les déplacer. Nous pouvons jouer avec eux d'une manière beaucoup plus simple. Merci de m'avoir écouté, je vous verrai dans la prochaine leçon. 12. Animations en boucle: Bienvenue, encore une fois, dans ce cours, nous allons créer des animations en boucle. Créer des animations en boucle n'est pas si difficile, mais c'est un art subtil dont tout le monde ne comprend pas le sens et que tout le monde peut réaliser facilement. Dans cette leçon, je vais vous expliquer comment vous pouvez y parvenir et à quoi cela sert-il réellement ? Bien entendu, il existe différentes applications et différents cas d'utilisation pour ce type d'animation. Cela varie donc. Je ne peux pas vous donner un aperçu de tout. Mais un exemple clair que je pourrais vous donner est, vous savez, les rouleaux ou les TikToks ou tout autre contenu abrégé que vous regardez dans lequel les vidéos Ils bouclent. Et en réalité, toutes les vidéos sont diffusées en boucle sur les réseaux sociaux. À ce stade, vous savez, à part YouTube, Instagram, Tik Tok ou d'autres plateformes de réseaux sociaux, lorsqu'une vidéo se termine, elle revient en arrière et repasse en boucle. Mais ce dont nous parlons, c'est de donner à votre vidéo un aspect fluide qui ne donne pas l' impression d'être en boucle On a l'impression que cela continue et encore si vous n'y prêtez pas attention. Il s'agit donc essentiellement de faire en sorte que la fin ressemble au début. Alors laissez-moi vous expliquer ce que je représente pour vous. Donc, à l'heure actuelle, dans cette animation que nous avons créée ensemble jusqu'à présent, nous pouvons voir un montage très dur, n'est-ce pas ? Activons donc la boucle à partir d'ici, et, vous savez, pour le moment, elle est en mode boucle Donc, lorsque nous jouerons cette animation, vous verrez des choses se passer, puis il y a une coupure dure. Comme vous pouvez le constater, le plus dur se passe ici . Donc, une fois que vous arrivez ici, les choses disparaissent brusquement Il existe un moyen très simple de s'en débarrasser, de régler ce problème Pour ce faire, nous pouvons allonger un peu la chronologie, choisir ces deux éléments et leur donner une animation. Retournons en arrière. Nous ne voulons pas d'animation de rotation. Nous voulons une animation de position. Nous allons le faire glisser vers l'extérieur, et nous allons le faire glisser vers la gauche. Choisissons-les à nouveau tous les deux. Ouvrons-les. Celui-ci et celui-là. Je vais choisir cette animation et celle-ci et/ou la distance pour qu' elles soient hors du cadre. Vous pouvez également le personnaliser si vous le souhaitez, c'est à vous de décider. C'est bon. Maintenant, nous avons cette animation qui, à la fin, ces deux qui partent, nous pouvons la personnaliser un peu de manière à ce que, par exemple, l'une d'elles parte après l'autre comme ça. Nous pouvons les allonger un peu car ils sont peut-être un peu trop courts. Nous pouvons également leur en donner un peu nous pouvons également leur faciliter la tâche. D'accord. Maintenant, regardez ce que nous avons maintenant. D'accord ? Donc, vous obtenez cette animation, vous recevez ce message, vous le supprimez, vous recevez ces messages, vous les supprimez, puis il tourne en boucle, mais vous n'avez pas l' impression qu'il tourne en boucle. Tout le secret réside dans le fait que vous faites en sorte la toute dernière image ressemble exactement à la première image. La façon dont nous l'avons fait est très simple. Nous avons simplement fait disparaître tous les cadres, tous les éléments, les éléments changeants. Maintenant, il n'y a plus rien, puis on revient à la case départ, on reçoit ce message, on le supprime, on reçoit ces messages, on les supprime, puis on revient. C'est vraiment le secret. Je veux dire, peu importe ce que tu fais ici au milieu. Tout cela n'a aucune importance tant que vous vous assurez à la fin, juste à la fin, que les cadres de fin sont les mêmes que les cadres de début. Maintenant, beaucoup le font. Si vous avez une vidéo, si vous faites une vraie vidéo, et non une animation graphique, le moyen de le faire est d'obtenir la vidéo, mettre le début de la vidéo ici, puis la suite au début. De cette façon, la vidéo commence ici, puis lorsque vous arriverez à la fin, elle se déroulera en boucle de manière très fluide. D'accord ? Mais cela parle comme si vous aviez une vidéo. Mais dans ce cas, sur Fegma, nous n'avons pas affaire à une vidéo, nous avons affaire à un motion graphic D'accord ? Peu importe les couleurs que vous avez, animations que vous avez ici, tant qu'à la fin, vous avez le même cadre. Il suffit donc d'illustrer cela un peu plus lorsque nous arrivons ici et que nous obtenons ce contexte, je choisis l'arrière-plan. Maintenant, nous pouvons donner à cela une animation de l'opacité, non ? Nous pouvons donc le faire disparaître. Alors, comment cela se produit-il ? Nous allons le faire disparaître et nous allons le ramener ici. Et nous allons faire en sorte que le fond soit noir. Et en ce qui concerne cette animation en fondu, nous allons la porter à 20 %. D'accord ? Alors regardez ce qui va se passer maintenant et nous allons le faire comme ça. Donc, dès que vous recevrez le message, il deviendra noir comme si vous vous concentriez sur le message. Et nous pouvons également aller de l'avant et, vous savez, le personnaliser. Comme ça. Mais surtout, à la fin, vous pouvez apporter cette animation, coller ici, puis nous allons la faire disparaître, puis nous allons revenir à 100 %. Et nous pouvons mettre cela à la toute fin. Maintenant, regardez à quoi ça ressemble. Eh bien, cela ne s'est pas très bien passé pour une raison ou une autre. Revenons donc ici et il est écrit : «   S'estomper en quantité à 100 % ». Wh semble avoir un problème. Essayons donc de le personnaliser, et il sera dit de commencer à zéro puis de terminer à 100, alors maintenant ça marche. Alors maintenant, regardez-le. Comme vous pouvez le constater, il ne semble pas y avoir de fin, de début ou autre Mais dans ce cas, cela peut être clair car nous n'avons mis l'opacité qu'ici au début, n'est-ce pas ? Donc, ce que nous pourrions faire à ce sujet, nous pourrions également copier cet effet, l'apporter ici. Et si nous supprimons ce message juste ici, nous pourrions faire le contraire. Nous pouvons le faire, vous savez, personnaliser de 0 à 100 % et l' apporter comme ça Et puis il se pourrait aussi que le fondu disparaisse par ici. Alors maintenant, voyons voir. Plus tôt et nous pouvons également le faire un peu plus tôt. Pendant que vous supprimez les messages, accord. Comme vous pouvez le constater, nous l'avons fait d'une certaine manière , sans donner l'impression que la vidéo est en boucle, mais qu'elle l'est en fait C'est exactement ce que vous avez envie de faire parfois. Discutons maintenant des avantages. Pourquoi ferais-tu ça ? Une chose est la fluidité, vous voulez être fluide et votre objectif est peut-être de répéter la vidéo Il existe différentes raisons pour lesquelles vous souhaiterez peut-être répéter une vidéo. Maintenant, lorsque vous êtes sur TikTok, vous êtes sur Instagram sur l'une de ces plateformes où elles ont une fonction de boucle L'une des raisons est que vous voulez que les gens regardent la vidéo encore et encore. Peut-être sans s'en rendre compte, peut-être en le remarquant, mais obtenir plus de points de vue, c' Un autre objectif est de lancer une vidéo en boucle ou de la faire répéter encore et encore. Ce n'est peut-être qu'un effet. Vous voulez que cela ressemble à un jour de marmotte si vous connaissez le film Vous voulez donner l' impression que cette journée est interminable. Cela ne cesse de se répéter et de se répéter. J'espère que cela vous a aidé d'une manière ou d'une autre et que vous avez appris à créer des vidéos en boucle Merci beaucoup de m' avoir écouté, je vous verrai lors de la prochaine leçon. 13. Utiliser des cadres-clés: Dans cette leçon, nous allons donc parler des images-clés. Une image-clé est essentiellement un point dans le temps. Vous pouvez le considérer comme un point figé dans le temps où votre cadre ou n'importe quel élément sélectionné prend une position, une opacité, etc. Maintenant, en ce qui concerne les images-clés, encore une chose à laquelle vous devez faire attention Si vous ne l'avez pas remarqué, lorsque vous passez de l'onglet de conception ou du mode de création au mouvement, vous obtenez ces symboles, ces petits carrés que vous obtenez sur la plupart des champs que vous avez. C'est ce que nous appelons des keyframes. Vous les avez déjà vus ci-dessous. Et lorsque vous cliquez sur l'un d'entre eux sur un élément, vous faites savoir à Figma que vous souhaitez ajouter une image-clé de cette propriété spécifique à cet endroit précis Alors laissez-moi vous montrer ce que cela signifie. Passons maintenant à cet objet, lorsque je clique ici, lorsque j'ajoute une image-clé, tu peux voir l'image-clé en train d'être ajoutée Et cela ajoute une propriété d'animation, qui est l'échelle. Nous n'en avions donc pas avant. Nous avions la position, la taille, la position, la position, et maintenant nous avons l'échelle. Nous pouvons donc continuer et changer directement à partir d'ici, vous pouvez voir une image-clé en cours de création C'est donc une autre façon d'utiliser les images-clés directement depuis ce panneau que vous connaissez, aimez et utilisez tous les jours. Gardez donc cela à l'esprit, images-clés ne se limitent pas à cette zone. Vous n'avez pas seulement besoin d' utiliser des images-clés automatiques, mais vous pouvez également utiliser la fonction images-clés ici. Nous allons donc procéder et activer images-clés automatiques à partir de là Un clic va l'activer. Pour ce faire, passons à l'objet ici, laissez-moi vous montrer ce que je veux dire à ce sujet. heure actuelle, cette animation est déjà en cours, il s'agit d'un ensemble d'images-clés En général, l'image-clé se trouve au début ici et à la fin Vous pouvez donc voir ici que l' opacité est quelque chose ici, puis que l'opacité change là, Mais nous ne parlons pas de cet élément. Nous parlons de l' élément ici. Maintenant que nous l'avons ici, nous pouvons aller de l' avant et changer quelque chose, n'importe quoi à propos de cet objet. Nous pouvons donc aller de l'avant et l'augmenter. Dès que nous le faisons, cela devient un mouvement enregistré, un keyframe automatique, si vous voulez Vous pouvez voir comment il est enregistré et cela fait la différence. Avant cela, il n'y avait aucun mouvement. Donc, ce que nous pouvons faire dans ce cas, nous pouvons venir ici, prendre l'objet, le centrer, ou nous pouvons simplement le déplacer légèrement, puis déplacer vers le haut, puis déplacer légèrement la chronologie, puis le redéplacer vers le bas. Voyons maintenant à quoi cela ressemble. Donc tu l'as vu. J'ai fait des montées et des descentes, et c'est essentiellement ce que nous avons fait. Maintenant, tout ce que nous allons faire, nous changions la taille ou que nous fassions une rotation, par exemple, voyons si nous pouvons faire une rotation comme celle-ci. Tout sera enregistré en tant qu' image-clé et cela aura un effet Maintenant, ça a l'air horrible. Ce n'est pas quelque chose que tu veux faire. Mais je ne fais que vous montrer les possibilités de ce que vous pourriez faire. Et si nous devions copier l'un de ces éléments, venons-en ici et copiez-en un, je vais copier celui-ci, je vais le mettre ici, prenons-le et supprimons toutes les animations qu'il contient. Et nous pouvons essayer de le faire uniquement, vous savez, en utilisant des images-clés automatiques, d'accord ? Nous allons maintenant commencer le cadrage automatique des touches. Et nous allons dire au début ce sera ici sur la gauche. Et puis au bout d'un moment, ça va arriver ici. Et voyons avec quoi nous travaillons. C'est donc ici. Vous pouvez voir les images-clés ici, non ? Supposons donc que je veuille le déposer. Je peux accéder à la première image-clé et la poser presque dans le même sens ou au même niveau Ensuite, vous pouvez voir que je suis en train de recréer l'animation similaire à celle que nous avions, puis je pourrai venir ici Je peux également ajouter l' image-clé moi-même. Je n'ai pas besoin d'activer ce mode. Je peux choisir l' image-clé ici et je peux dire qu'elle partira et partira vers la gauche accord ? Alors voyons voir. Il devrait peut-être arriver un peu plus tôt. Nous pouvons déplacer les images-clés et les amener ici. Ensuite, une fois que nous l'avons, nous pouvons cliquer ici et choisir le type de courbe que nous aimerions avoir. Par exemple, si je me souviens bien, nous avons eu un petit rebond, donc nous pouvons le faire. Tu vois ça ? C'est très similaire à l' animation que nous avions ici. Ce n'est pas exactement pareil. Ce n'est pas notre objectif. Mais je veux juste vous montrer que vous pouvez également le faire avec ce type d'images-clés, vous savez, parce que c'est plus intuitif Il s'agit simplement de déplacer le cadre, vous savez , de le placer, de le déplacer où vous voulez. Comme au début, c'est ici, puis vous le prenez ici, puis vous le redimensionnez, quel qu'il soit Et ça marche. Et faisons la même chose avec la taille, non ? Je vais le réduire maintenant. Je ne sais pas si c' est bien petit. D'accord, nous pouvons le réduire un tout petit peu. Vous pouvez donc voir qu'il y a un petit cadre ici qui a pris de la largeur. Je vais l'apporter ici. Laisse-moi te montrer. Nous n'en voulons pas, nous allons le supprimer et prendre celui-ci ici. Vous voulez juste le rendre un tout petit peu plus petit ? OK, maintenant, quand nous arriverons ici, nous commencerons à nous développer. Vous allez cliquer ici, vous pouvez voir l'animation en largeur, puis je vais l'agrandir. C'est bon. Mais maintenant, nous devons changer celle-ci, la position 1. Vous pouvez naviguer à droite et à gauche pour accéder au cadre le plus proche à droite ou à gauche. Maintenant que j'en suis arrivé à l'image-clé, je vais le placer au milieu Ensuite, je vais passer à cette image-clé et je vais également la placer au milieu Ensuite, nous pouvons choisir les deux et les rendre faciles à entrer et à sortir comme ça. Nous pouvons également modifier celui-ci. Je vais rendre cela un peu plus facile. Détendez-vous un peu plus, oui. Et c'est ainsi que nous avons recréé cette première animation. Ce n'est pas parfait. Cela se voit dans sa taille. Permettez-moi de le réduire un tout petit peu. Vous pouvez donc en voir 72. Quand nous viendrons ici, je ferai également 72 ou 73. Ce n'est toujours pas parfait. Laisse-moi voir. Faisons en 70 ou 69. C'est bon. Ensuite, je viendrai ici et j'en ferai également 69, et c'est parti. Donc, juste comme ça, vous pouvez utiliser les images-clés automatiques ou vous pouvez simplement continuer à utiliser les images-clés vous-même pour continuer et tout faire un peu plus manuellement Je sais que c'est un travail manuel, travail manuel, mais cela peut devenir beaucoup plus facile. Et pour les personnes qui ont déjà une certaine expérience du montage vidéo, c'est probablement plus intuitif et plus facile à utiliser. À noter que vous ne pourrez probablement pas voir ces images-clés à moins que vous n'activiez ce mode et que vous commenciez déjà à changer les choses. Sinon, si vous regardez l'opacité, je ne peux définir aucune image-clé Mais ici, je peux déjà jouer avec, car je change de position, je change de largeur, etc. Assurez-vous simplement d'en tenir compte lorsque vous essayez de tester cette fonctionnalité. Merci beaucoup de m'avoir écouté et je vous verrai dans le prochain fils. 14. Erreurs courantes de conception d'animation: Si vous me demandiez quelles sont les erreurs de motion design les plus courantes commises par les gens, en particulier les débutants, je dirais qu' il y a trois erreurs principales auxquelles vous devez faire attention Maintenant, bien sûr, il y a une multitude d' erreurs différentes que vous pourriez commettre, mais je vais me concentrer uniquement sur celles-ci maintenant, la première erreur et pour moi, la première erreur et pour moi, c'est un grave péché car je pense que si vous êtes dans le secteur du montage vidéo, cela devrait déjà être Ce sont les bases cruciales qu'ils auraient déjà dû avoir écrites, c'est-à-dire simplement utiliser des animations linéaires. Pour moi, c'est un péché. Maintenant, laissez-moi vous dire ce que je veux dire, mais nous en avons déjà parlé. Lorsque vous effectuez un type de mouvement comme cette position, un mouvement ici, je vous recommande toujours utiliser ces courbes et d'utiliser l'assouplissement, ressorts et le rebond ainsi que toutes ces différentes fonctionnalités, car elles sont conçues exactement dans ce but et elles sont conçues pour que vous puissiez jouer avec Et l'une des plus grosses erreurs est aller de l'avant et de choisir le linéaire. Il y a très peu de cas où le linéaire a beaucoup de sens, mais ce n'est souvent pas la solution. Maintenant, en passant au linéaire, vous pouvez probablement voir ce que je veux dire En comparant le premier, celui du haut à celui du bas, vous pouvez voir à quel point le mouvement est insensé Cela semble robotique et, dans ce cas, cela s'arrête et s'arrête, mais cela ne s'arrête pas vraiment parce qu' il y a un autre mouvement ici. Mais retirons celui-ci pour moment et vous verrez à quoi il ressemble. Ça a l'air super faux. Ça s'arrête tout à coup. Il n'y a pas de changement de vitesse, il n'y a pas d'euphorie. Et avec l'autre, vous avez simplement une bien meilleure fluidité. Vous voyez comme cela exalte, cela facilite l'entrée, la sortie et cela prend et cela Retournons en arrière. Je ne veux plus voir ça. C'est donc pour moi l'un des plus grands péchés que vous pourriez commettre est d'utiliser ces animations linéaires. Ils n'ont pas de caractère, ils n'ont pas d'âme, ils ne sont pas drôles et ils ne transmettent aucune idée Donc, s'il vous plaît, essayez comprendre ces différents mouvements et mouvements, que vous ayez besoin de rebondir , de le relâcher ou des deux Essayez de comprendre ce qui correspond à votre image de marque, ce qui correspond à la fonctionnalité ou à la vidéo que vous faites le mieux. Il existe un personnage différent ou un choix stylistique différent pour chaque vidéo Il vous suffit donc de comprendre cela et de vous assurer que vous le faites avec intention et pas simplement au hasard. Surtout, gardez-le cohérent. Ne le changez pas sans arrêt. C'est l'une des plus grosses erreurs. La deuxième erreur n' est pas la superposition. Nous avons déjà parlé de la superposition et de son importance lors de la création de motion design Ce que je veux dire par superposition, c'est jouer avec plusieurs objets différents et insérer plusieurs animations différentes dans le même Nous l'avons donc déjà vu dès le début, et je pense que nous l'avons très bien démontré , même si cela pourrait être encore mieux démontré, d'accord ? Et la façon de vous le montrer , c'est que lorsqu'une animation s'ouvre comme celle-ci, vous pouvez voir que plusieurs choses se passent. Vous pouvez donc déjà voir que la taille change. Il y a également un changement de position. Il se déplace vers la gauche ou vers la droite ou quoi que ce soit d'autre. Mais il y a du mouvement en même temps, le texte ici s'estompe N'était pas visible. Maintenant, c'est visible. Et oui, en général, il y a plusieurs choses qui circulent en même temps. D'accord ? Et nous retrouvons le même exemple ici encore une fois dans cette partie. Et la façon dont vous voyez les choses, c'est que le premier message s'affiche, que le second apparaît, qu'il arrive pour vous montrer il y a une sorte d'interaction C'est une danse délicate de salsa ou de tango ou de n'importe quelle autre danse que vous pourriez avoir envie de faire, mais c'est très délicat, c'est très agréable, et les deux personnes qui dansent doivent jouer ensemble C'est vraiment ce qui caractérise un motion design ou un motion graphic. Cela lui donne vie parce qu' on a l'impression qu'ils se parlent. Au niveau de la communication, il y a un langage magnifique où quelqu'un chante : « Hé, j'arrive, je vais apparaître de temps en temps », puis le message ci-dessus passe un peu haut pour qu'ils ne se frappent pas. C'est tout simplement parfait. Cela s'harmonise simplement bien. La plus grosse erreur est de ne pas le faire. La plus grosse erreur est d'avoir ces animations très statiques qui ne semblent pas harmonisées. Ils se sentent plus figés, timides et animés. C'est la meilleure façon de le décrire. C'est le contraire de l'animation En un mot, vous avez quelque chose d' inanimé qui ne bouge pas Peut-être qu'il n'est même pas vivant, il n'est pas vivant. C'est mort. Allez-y et essayez de vous assurer que lorsque créez du motion design , vous prêtez attention à tous les détails et que vous superposez différentes animations sur chaque objet Et dans le même calendrier. Et maintenant, pour ce qui est de la dernière erreur, à mon avis, lorsque l'on travaille avec le motion design, part créer des mouvements maladroits, etc., on ne parvient pas à atteindre la bonne vitesse Vous regardez votre motion design encore et encore et vous le révisez. À la fin de la journée, vous serez peut-être enclin à le faire très vite parce que vous avez déjà tout vu. Tu ne lis plus les messages. Tu as un texto. Tu ne le lis plus parce que tu penses : « Hé, je l'ai déjà lu, je sais exactement ce qu'il dit ». Vous serez donc peut-être plus enclin à faire en sorte que vos animations soient très rapides. Et c'est quelque chose que nous aurions pu faire dans cette animation en particulier, où vous pouvez voir que le texte arrive très vite et que nous n' avons pas le temps de le lire. Beaucoup de gens peuvent ressentir la pression de le faire spécifiquement pour les réseaux sociaux parce qu'ils comprennent, d'accord, que spécifiquement pour les réseaux sociaux parce qu'ils comprennent, d'accord, attention des gens n'est pas très bonne ou très longue, mais ce n'est pas la bonne façon de procéder, d'accord ? Assurez-vous donc que lorsque vous créez une animation, vous donnez à votre spectateur, à votre lecteur suffisamment de temps pour regarder les animations dans toute leur splendeur, toute leur beauté, pour pouvoir lire les textes et les petites notes et comprendre ce qui se passe. Sinon, vous risquez d' en faire trop. Tu fais bouger les choses trop vite. Il se passe plusieurs choses. L'opacité de l' arrière-plan change et des messages entrent et sortent, sont supprimés, etc. Cela peut donc être très déroutant. Et cela peut projeter votre spectateur dans un monde où il ne comprend pas ce qui se passe. Alors apprenez de moi, apprenez de nos erreurs et essayez de laisser suffisamment de temps à vos spectateurs pour visionner vos animations en toute tranquillité, mais en même temps, sans perdre leur attention ni s'ennuyer. Il faut donc trouver un équilibre très fin entre les deux. À mon avis, tu ne pourras jamais rendre tout le monde heureux. Mais assurez-vous simplement que cela fonctionne pour la majorité. Oui, sont essentiellement ma suggestion ou mon point de vue sur les trois plus grandes erreurs de design ou de motion design que vous pourriez commettre. Comme je l'ai dit, c'est ma propre opinion. Alors, prenez-le ou laissez-le. Vous savez, ce ne sont que des conseils pour moi et essayez de les garder à l'esprit lorsque vous créez des animations, afin ne pas avoir l'air d'un débutant, mais d'avoir l' air d'un amateur, même temps, afin de créer animations percutantes que les gens aiment vraiment et qui suscitent l'engagement, les points de vue et l'attention des gens Merci beaucoup de m' avoir écouté, je vous verrai la prochaine fois. 15. Exporter en tant que GIF, MP4, WebM et SVG: C'est bon. Maintenant que vous avez terminé et que vous avez terminé votre animation, vous en êtes très fier. Mais maintenant, vous voudriez aller plus loin et passer à la dernière étape, qui consiste à l'exporter afin de le montrer, car après tout, si nous avons créé un grand nombre de ces superbes animations, nous voulons les montrer aux gens. Nous voulons nous en servir. Sinon, cette fonctionnalité de figma, tout ce mode de mouvement est totalement inutile. C'est donc une bonne nouvelle pour toi. Nous pouvons l'exporter, et c'est très, très simple. Maintenant, la façon dont vous pouvez y arriver n'est peut-être pas très évidente, mais laissez-moi vous l'expliquer. Et je vais également vous expliquer les différents paramètres d'exportation que les différents paramètres d'exportation que vous devez utiliser pour exporter votre vidéo avec la plus haute qualité, mais pas non plus avec la plus grande taille de fichier absolue. Allons-y et accédons à ce panneau. Pour ce faire, vous devez continuer et cliquer sur le cadre que vous souhaitez exporter. Il est donc clair que vous n' exportez pas l'intégralité du fichier. Vous n'exportez pas plusieurs images à la fois. Vous exportez l'image sur laquelle vous travailliez, même si vous pouvez probablement l'exporter à partir de plusieurs images, mais il s'agira simplement d'une vidéo séparée. Regardons la vidéo de cette image. Tu vas juste le choisir, tu vas le sélectionner. Ensuite, pendant que vous êtes toujours en mode Figma Motion, vous allez faire défiler la page vers le bas jusqu'à Exporter, puis quelques options s'offriront à vous Il y a de l'animé et du statique. J'ai l'impression que les statistiques sont vides, mais ce n' est pas le cas. Il suffit de cliquer sur le signe plus. Il s'agit du panneau d'exportation normal ou classique auquel vous êtes habituellement habitué. Vous le savez probablement, vous pouvez l'exporter au format PNG, JPEG, SVG, PDF, etc. Mais ce qui nous intéresse le plus, c'est la fonction d'exportation animée. Ici, c'est très simplifié pour la plupart des gens, ce que j'apprécie vraiment car je me perds toujours dans les détails des différents paramètres d'exportation, et je ne sais pas comment exporter mes vidéos de la manière la plus optimale possible. Figma vous permet donc de comprendre et de contourner cela très facilement comprendre et de contourner Donc, tout d'abord, il va vous demander quel est le format dont vous avez besoin ? Il existe différents formats, et bien sûr, cela dépend de votre utilisation. Je ne suis pas un expert en vidéo, je ne peux donc pas vraiment vous donner tous les détails. Mais le format le plus couramment utilisé est le MP4 Avec ce format, vous ne ferez rien de mal. Maintenant, ce que je peux vous dire, c'est que le Web est plus adapté au Web. Mais bien sûr, je pense que cela convient mieux au site Web en particulier, mais je n'en suis pas sûr. Cela pourrait vous aider à réduire la taille des fichiers, même si je ne suis pas sûr. Maintenant, en ce qui concerne les cadeaux, je peux vous en parler. Vous connaissez probablement les cadeaux. Vous les avez utilisés et vous les utilisez sur les réseaux sociaux ici et là. Et les cadeaux sont de bien moindre qualité. Ils sont généralement compressés et sont censés être dépourvus de son Ce ne sont en fait pas les expériences de visionnage les plus optimales, disons. Cela ne montrera pas votre animation de la meilleure façon possible, mais cela fera en sorte que la taille soit très petite. Et comme vous pouvez le constater, il a également des fréquences d'images plus faibles. Vous pouvez évidemment l'explorer avec des fréquences d'images plus élevées, mais cela va à l'encontre de l'objectif Donc, ce que je vous recommande d'utiliser, c'est de rester simple, c'est le MP4. Si vous avez des cas d'utilisation spécifiques pour les autres types de fichiers, essayez-les. La deuxième chose est la taille, vous le savez probablement. Normalement, il suffit de le faire un X comme en une fois. Exportez-le exactement de la même taille que ce cadre. Mais si vous dites que ce cadre est trop petit, je veux qu'il soit plus grand, alors vous faites deux X, ou vous pouvez même le remplir vous-même, je crois. Il semble que ce soit une fonctionnalité professionnelle, mais gardez-le à l'esprit. Vous disposez également de différents paramètres d'exportation. Vous avez donc 1080 14 42 160. Il s'agit de différents paramètres d' exportation liés à la qualité. Vous avez donc le HD, fol HD, etc. Maintenant, vous pouvez opter pour un X. Donc, si vous savez que c'est le cadre que vous souhaitez exporter, il s'agit essentiellement d'un écran de téléphone, alors cela devrait être largement suffisant. Si cela vous inquiète, vous pouvez choisir deux options ou choisir un type de qualité très spécifique. À l'heure actuelle, nous avons également de la qualité. Maintenant, cela est également fait pour être très simple pour vous. Il est donc réglé sur faible, moyen ou élevé, et tout le monde dira : « Oui, je veux la meilleure qualité absolue, mais vous devez garder à l'esprit que cela se traduira par une plus grande taille de fichier. Maintenant, pour être honnête, deux Mo, ce n'est pas si gros. Je suppose qu'ils ont une très bonne méthode de compression. Ils sont vraiment bien installés. C'est vraiment bien pour la haute qualité, mais vous devez garder à l'esprit qu'il s'agit d'une très courte vidéo. Vous avez également une taille moyenne, et rien qu'en passant à la taille moyenne, vous pouvez voir que nous avons déjà économisé 25 % de la taille. Et si nous descendons trop bas, avons économisé plus de la moitié. OK ? Ainsi, de haut en bas, nous avons économisé plus de la moitié de la taille du fichier. Il faut donc vraiment y réfléchir, même si je ne sais pas quelle est la différence de qualité. Bien sûr, vous avez la fréquence d'images. Maintenant, la fréquence d'images est liée si vous ne le savez pas. C'est le nombre d'images que vous avez par seconde. C'est ce que signifie FPS. D'habitude, pour les réseaux sociaux, vous en avez 30, 25 ou 24, pour autant que je sache. Si vous exportez quelque chose pour les réseaux sociaux, vous ne pourrez pas obtenir six TFP cela ne sert à rien Mais si vous souhaitez le configurer pour les utilisateurs pour des sites Web ou d'autres cas d'utilisation, vous pouvez l'afficher sous forme six TFP, puis vous lancer. Pourquoi pas ? Gardez simplement à l'esprit que cela entraînera une augmentation de la taille du fichier. Nous sommes allés 50 % plus loin ici, comme vous pouvez le voir, vous devez avoir un compte professionnel pour cela. Si vous faites quelque chose comme 12 images par seconde, cela vous semblera un peu agité ou, peu importe ce que vous pourriez appeler, un peu lent, même si ce n'est pas le cas, alors gardez cela à Maintenant, allons-y et essayons de l'exporter. J'aimerais vous montrer les différences entre la qualité. Allons-y et faisons-le. Donc, un X, et passons haut. Je vais également aller de l'avant et l'exporter à bas prix. Ensuite, j'aimerais l'exporter en cadeau. Maintenant, regardons la vidéo. Nous avons d'abord un X de haut. Cela devrait ressembler plus ou moins exactement à ce que nous avons vu. Comme vous pouvez le constater, il y a beaucoup de cadres. C'est très fluide. Mais je dirais que la qualité pourrait être meilleure. Je peux donc comprendre que l'exportation se fait sous la forme de deux X. Maintenant, voyons à quoi cela ressemble à un faible niveau. Je vois déjà que la qualité de l'image est tellement différente. Je veux dire, si vous regardez également en arrière-plan, cela semble plus compressé ici. Mais je dois dire que la différence entre le haut et le bas n'est pas énorme. Maintenant, examinons le cadeau. Donc, comme je m'y attendais, vous savez, le cadeau a moins d' images par seconde, donc vous obtenez généralement une vue plus instable Mais pour être honnête, si vous voulez montrer cela à votre équipe, si vous faites preuve d'un flux très simple et que cela n'a pas besoin d' être aussi compliqué, je ne dirais pas, vous savez, que c'est vraiment une mauvaise chose. Il s'agit de faire passer l'idée et, vous savez, ils peuvent voir le mouvement général. Ce n'est pas une qualité incroyable, mais bon, ça fait passer l'idée. Enfin, j' aimerais tester son exportation sous forme de deux X de haut et voir à quoi cela ressemble. Très bien, alors allons-y. Voyons les deux X de haut. Je peux donc voir que l'image est un peu plus nette, certainement. C'est ce que je pourrais dire. Mais surtout dans les parties sombres, j'ai l'impression que nous avons toujours cette distorsion, ce que je n'aime pas vraiment, mais je suis également très, très précis à ce sujet. Mais je dis que la qualité que nous venons d'obtenir semble bien meilleure. Ça a vraiment l'air beaucoup mieux avec la version two x, mais elle est toujours là, pas là où je voulais qu'elle soit. Et voyons la taille en termes de taille. 3 mégaoctets, c'est logique. C'est le double. Mais c'est essentiellement ainsi que vous pouvez aller de l'avant et exporter votre travail afin de le présenter, le montrer aux autres et de le partager avec eux. Merci beaucoup de m' avoir écouté, je vous verrai lors de la prochaine leçon. 16. Animer un cercle de chargement: Bonjour, et bienvenue à une autre leçon du cours Figma Motion Au cours des leçons précédentes, nous avons appris de nombreuses techniques différentes, beaucoup de choses différentes lors de l'utilisation panneaux, des outils et des fonctionnalités de Figma Motion Et nous avons fait une animation. Nous nous sommes concentrés là-dessus, et il s' agissait essentiellement de recevoir des messages. Dans cette leçon, nous allons parler d' un autre type d'animation. Il s'agit d'une animation de chargement. Il existe maintenant une tonne d' animations de chargement, différentes, mais nous allons commencer par une animation très simple que nous connaissons tous : l'animation à rotation circulaire. Maintenant, bien sûr, il existe différents types pour cette animation. Ce n'est pas toujours pareil. Je peux avoir différents styles, différentes couleurs, mais nous allons essayer de rester simples et minimalistes. La première chose que nous allons faire est de copier et coller ce cadre, puis nous allons le retirer, le mettre de côté. Juste ici. Maintenant, comme vous pouvez le voir, lorsque nous ouvrons ce cadre, nous pouvons déjà voir que quelques animations y sont configurées. Donc, pour nous en débarrasser, nous allons passer à la couche. Nous allons passer au cadre, et nous allons vérifier les différentes couches. Nous allons conserver l'image. Nous allons tout supprimer, il suffit de faire une animation de chargement. Je vais faire en sorte que ce soit aussi simple que possible. Maintenant, pour créer une animation circulaire rotative, nous allons aller sur le tabouret ellipse et maintenir la touche Shift enfoncée, nous allons créer un cercle comme celui-ci, et nous allons le placer au milieu Au lieu de le remplir, nous allons le remplir et vous pourrez le rendre un peu plus épais. OK. Nous y voilà. Nous avons maintenant une chronologie vide sans animations. Nous allons cliquer. Rechargez-le. Ça a l'air plutôt bien. Maintenant, commençons. Maintenant, pour que cela fonctionne, nous devons le scinder. La boucle ne peut pas être complète. Ce que nous allons faire, c'est le toucher, passer en mode design, puis nous allons venir voir cette petite pièce ici et nous allons la découper. Tu peux créer n'importe quelle pièce. Je pense que ça pourrait être la moitié. Cela pourrait être les trois quarts. C'est vraiment à vous de décider. Faisons quelque chose comme ça. Je vais faire quelque chose de près d'un quart, 25 %, puis ce que nous allons faire, c'est passer au coup d'envoi. Vous pouvez voir qu'il existe différents types, mais ils mènent tous à la même chose. Ce que je vais faire très simplement, double-cliquer dessus , puis je vais supprimer ce point ici. Très bien, maintenant nous avons cette pièce ici, et nous pouvons commencer à faire notre animation. Nous allons donc passer à notre partie animée ici, et nous allons lui donner une animation. Maintenant, il peut s'agir d'une animation de rotation, mais il y a un problème. Vous le remarquerez probablement maintenant, c' est-à-dire qu'il tourne d'une manière assez étrange, disons, d'accord ? Il tourne donc sur lui-même. Mais comme vous pouvez le voir au centre, l' ancre n'est pas correctement installée. Donc, ce que vous voulez faire, c'est aller l'avant et en faire un cadre. Nous voulons agrandir ce cadre et nous voulons agrandir comme s'il s'agissait d' un cercle complet, et pas simplement d'une partie de celui-ci. Ce que nous allons faire, c'est arriver à cette largeur de pièce, multiplier par deux, et nous allons faire la même chose ici. Pour ce faire, vous pouvez simplement mettre un astérisque et deux après, puis Figma fera le calcul pour Ensuite, je vais le maintenir enfoncé et revenir à la section de conception, je vais l'aligner vers le bas. Hein, ok ? Alors maintenant, j'ai l'impression que la boucle est bouclée ici. Et maintenant, lorsque nous allons dans le panneau d'animation et que nous ajoutons une animation rotative, nous allons voir quelque chose d'incroyable elle va tourner comme un cercle, d'accord ? Ainsi, même sans cercle, nous l'avons fait pivoter comme s' il y avait un cercle complet, même s'il ne s'agissait que d'un quart. C'est donc très simple, très facile, mais voici ce que vous voulez faire. Il se peut que vous souhaitiez étendre un peu l'animation, car elle pourrait sembler trop lente. Mais ce que je veux que tu fasses, c'est que tu passes au panneau de rotation. Vous pouvez le faire dans le sens des aiguilles d'une montre et le faire à 360°. Voici donc ce qui va se passer. Il va juste retourner exactement au même endroit. Ensuite, venez ici pour assouplir l'éditeur Curve, puis je veux que vous le fassiez courber, juste comme ça. En fait, personnellement, je le réduirais même un peu et je le rendrais incurvé de bas en bas. Ce que cela signifie si vous ne l' avez pas encore compris, ce qui est tout à fait normal, ce n'est pas facile. Cela s'assouplit. Ce que je viens de faire, c'est de faciliter les choses, puis là, ça va beaucoup s'assouplir. Voyons à quoi ça ressemble. Très beau, très gentil. En gros, c'est à cela que beaucoup d'entre eux ressemblent à ces objets rotatifs, à des cercles de chargement. Voyons à quoi ça ressemble maintenant, je l'ai juste raccourci. C'est beaucoup plus rapide, ce que j'aime bien. Ensuite, maintenant que nous l'avons, nous pouvons le copier, le coller. Pas l'image entière, mais plutôt l'animation rotative. Nous allons le mettre ici, puis je vais le copier, coller ici, et le copier-coller là. Maintenant, regarde. Il ne cesse de se charger. C'est très simple, très beau, très soigné. Si vous voulez aller plus loin, ce que vous pourriez vouloir faire , vous pouvez également ajouter un chiffre. Par exemple, ajouter 10 %. Si vous l' agrandissez, je vais juste le placer au milieu du cadre. Pour en revenir au mode design, le centre même, nous pouvons maintenant lui donner un peu d'ombre. Nous en avons 10 % en cours. OK, cool. Comment pouvons-nous l'animer Eh bien, ce n'est pas la chose la plus simple que je dois dire, mais il existe un moyen d'y parvenir. C'est un peu difficile, alors attachez votre ceinture. Mais en gros, ce que vous voulez faire, c'est ajouter une animation pour cela, à savoir l'opacité Vous voulez donc que cela apparaisse, puis vous voulez que cela disparaisse également. Nous allons donc ajouter deux animations. La première est donc l'opacité, et au lieu de 500 millisecondes, nous pouvons en faire Ensuite, nous allons procéder à une autre animation sur l' opacité, mais celle-ci sera un fondu, et cela prendra également dix millisecondes. OK. Maintenant que nous l' avons, nous pouvons continuer, le copier et nous allons le coller ici. OK ? Alors copiez-le, vous pouvez le voir collé ici, puis je vais le faire glisser ici. OK. Maintenant que nous l'avons ici, je vais le faire passer à 23 %. Et ce serait bien si nous les gardions également tous centrés. Je vais donc venir ici et garder cela centré également. Donc ça a l'air sympa, mais il va falloir les centrer tous les deux, c'est parfait. Et maintenant, regardez à quoi ça ressemble. OK ? Mais c'est allé un peu trop vite, je dirais. Nous pouvons donc l'étendre ou en créer un autre. Faisons-en une autre. Nous avons donc maintenant les 23 %. Nous copions, collons, et nous allons le prendre ici, puis cela va devenir 49 %, puis nous allons copier-coller Ça va être 83. Enfin, copiez-le et collez-le. Et il va en falloir 99. Très bien, alors voyons à quoi ça ressemble. Très mauvais La raison en est que nous n'avons pas synchronisé les extrémités et les débuts. Alors, qu'est-ce que cela signifie ? Nous avons maintenant une fin. L'un d'eux s'est évanoui, puis l'autre s'est estompé. Maintenant, nous devons faire exactement la même chose, mais cela peut devenir un peu délicat. Nous allons donc venir ici et ajouter le fondu à peu près ici. Alors cliquez dessus et faites-le glisser jusqu'ici. Alors regarde. Il y a un fondu ici, une toute petite section. Nous pouvons bien sûr essayer de le raccourcir ou de le supprimer en le faisant glisser un peu plus loin Vous pouvez également le faire en roulant vers le haut, puis en zoomant. Vous pouvez voir un peu l' écart. Maintenant, je vais combler le vide. Comme vous pouvez le constater, il ne reste qu'une petite milliseconde. Bien, maintenant que nous l'avons, il ne nous reste plus qu'à synchroniser les autres, comme je l'ai dit. Maintenant, nous allons venir ici, nous allons apporter ceci ici. Et ça va tout faire couler. Et pareil au final. Cela ne fait que se répéter. Mais cela peut devenir un peu délicat parce qu'ils sont si courts. Tu dois faire attention à ça, pour être honnête. C'est bon. Et comme toujours, zoomez un peu plus, rapprochez-vous un peu plus. Nous y voilà. Alors maintenant, testons-le. Alors pour celui-ci, il n'est pas nécessaire qu'il disparaisse. Je peux juste y rester. Je vais donc simplement le supprimer. Pour le dernier, il peut rester à 99 %. On voit bien que ce n'est pas encore parfait. Il y en a certains que nous pouvons encore améliorer. Par exemple, je crois que le saut ici n'était pas idéal. Et voilà. pas parfait, mais c'est une jolie petite animation chargée, et c'est tout ce dont vous avez besoin parfois. Et bien sûr, vous pouvez prolonger le temps ici, pour qu'il reste à 99 % et qu'il ne se répète pas. Et, bien sûr, vous pouvez continuer sur cette lancée. Comme vous pouvez le constater, il continue de se charger à 99% et ainsi de suite. C'est essentiellement ainsi que vous pouvez le faire. C'est aussi simple que cela, pas trop compliqué, et voilà. Dans la prochaine leçon, nous allons explorer un autre type d'animation , à savoir une barre de chargement. C'est également similaire, mais cela fonctionne un peu différemment, mais en comprenant comment fonctionne celui-ci, il ne sera pas si difficile de comprendre l'autre. Je vous verrai donc dans la prochaine leçon. 17. Avancé : Animer une fenêtre de progression: Dans la dernière leçon, nous avons appris comment créer ces différents états de chargement, et l'un d'entre eux est ce cercle de chargement. Dans cette leçon, nous allons apprendre un autre type, une barre de chargement. Mais nous allons le concevoir différemment, non seulement en fonction de l' apparence de l'animation, mais aussi en essayant de comprendre l'expérience utilisateur qui la sous-tend et en quoi elle peut vous aider. Je vais donc copier et coller exactement ce cadre encore une fois et je vais le ranger juste pour ne pas nous laisser distraire Et commençons. Je vais donc en faire un point de départ pour le flux. Je vais l'installer ici pour que nous puissions le voir. Ensuite, nous allons procéder à la suppression de ces éléments que nous avons créés afin de faire table rase. Bien, maintenant que nous l'avons, commençons par notre animation. Ce que j'aimerais faire, et commençons par créer les visuels correspondants Ce que je veux faire, c'est créer une barre de progression, une barre de chargement qui va de gauche à droite. En même temps, je ne veux pas que ce soit juste ça. Au lieu de cela, je veux qu'il fournisse également des informations et des commentaires supplémentaires à l'utilisateur, lui faisant savoir à quelle étape il se en lui faisant savoir à quelle étape il se trouve et ce qui doit être fait ou ce qui est actuellement fait à cette étape et en donnant peut-être des informations ou des instructions. Plongeons-nous dans le vif du sujet, et vous comprendrez ce que je veux dire. Je vais d' abord créer un cadre, et je vais le mettre ici. Je vais le rendre blanc pour le moment, puis je vais le faire circulaire. Mais en fait, au lieu de le rendre complètement blanc, pourquoi ne pas lui donner un effet de verre, d'accord ? Nous y voilà. C'est un effet de verre vraiment chouette. Et ce que j' aime, c'est que vous n'avez pas vraiment besoin de travailler dur pour y parvenir. Je fais déjà plein d' effets différents pour toi, ce qui est vraiment sympa. Alors maintenant, après cela, nous voulons créer un bar, d'accord ? Il existe différentes manières de créer ces barres, mais je vais les créer à nouveau avec un cadre. Et je vais le donner à remplir. Je vais également faire en sorte qu'il ait des coins arrondis. Mais je vais lui donner une opacité de 20 %, d'accord ? Mettons-le donc ici. Ou voyons voir, peut-être que nous pouvons le réduire. Je vais le copier-coller et le mettre là. Ce serait donc essentiellement notre barre de progression, comme vous pouvez le voir. Et nous pouvons nous demander si nous voulons le déposer, si nous voulons le mettre en place ou si nous voulons le placer juste au milieu, n'est-ce pas ? Il peut également s'agir d'un autre type de chargement. Et nous pouvons également réfléchir à la façon dont cela peut nous aider ou nous être bénéfique de quelque manière que ce soit. Nous pouvons également le prolonger jusqu'au bout. Ce que font certaines personnes, c'est qu'elles le rendent vraiment épais ou gros ou quoi que ce soit d'autre, comme ça. Ce que font les autres, c'est qu'ils le rendent vraiment très fin. Je pense qu'Apple fait cela, par exemple, si nous revenons un peu en arrière, rendre vraiment fin comme ça. J'aime bien ce look. Il n'est pas trop gros Essayons de nous en tenir à ce look ici et je vais les mettre dans un cadre. Maintenant que nous l' avons, nous allons encore mieux, je vais coller ceci dedans. Ce sera un cadre dans ce cadre, et nous allons lui donner une opacité de 100 %, mais nous allons faire en sorte que le remplissage soit de 10 % et de cette façon, nous pourrons le voir, d'accord ? Et bien sûr, vous n'êtes pas obligé de le rendre blanc. Vous pouvez également le rendre bleu ou toute autre couleur que vous souhaitez, c'est très bien. C'est juste une couleur que j'ai choisie pour le moment. Voilà. Le bleu est plus beau. Et voyons à quoi cela ressemblerait si nous donnions à tout cela un effet de verre. C'est peut-être un peu exagéré pour être honnête avec vous, mais nous pouvons peut-être y donner un coup et le rendre vraiment fin Faites également le trait à 50 %, 20 %. Je vais donc en faire une mise en page automatique, en fait. Je vais l'étendre, et je vais réduire le cadre qu'il contient. Mais je voulais avoir un conteneur de remplissage pour la hauteur, je voulais remplir uniquement la hauteur. Donc dans ce cas, si je décide que c'est trop petit, je peux le rendre plus gros comme ça sans problème Maintenant, laissez-moi y jeter un œil et voir à quoi cela ressemble sur l'écran d'un téléphone. C'est beaucoup plus beau, un peu plus épais, pour être honnête, mais je ne suis pas très content de ce bleu. Peut-être que ce que nous pourrions en faire, c' est lui donner un dégradé, peut-être. Cela permettrait également de montrer les progrès réalisés. Et voyons à quoi ça ressemble. Ça a l'air beaucoup mieux, mais il n'y est toujours pas. Je me demande si nous pourrions lui donner un éclat. Mais à ce stade, nous parlons de détails, et pour être honnête, ce n'est pas la chose la plus importante sur laquelle vous voulez vous concentrer, n'est-ce pas ? Gardez cela à l'esprit lorsque vous concevez une telle chose, et je vais créer le contenu de ce clip à écrous, puis nous aurons une sorte d'effet de lueur ici. OK ? C'est plutôt cool, plutôt sympa. Je vais passer au verre ici et je vais avoir peu de givre qui nous aidera à améliorer la lisibilité ou à être clair Je vais juste essayer de configurer ce globe pour qu' il ne soit pas exagéré OK. Ça a l'air plutôt bien. Ça a l'air vraiment sympa. Je vais ajouter du texte maintenant. Maintenant que nous avons une base, disons que nous pouvons ajouter du texte et parler de ce que nous faisons ici. Je vais écrire un texte ici et je vais parler du transfert de données. OK. Nous pouvons donc le centrer ou le garder sur le côté. Cela dépend vraiment de nous. Mais ce que j'aimerais faire, c'est copier ceci, poser un peu, le réduire un peu. Vous savez ce que je vais faire de tout cela une mise en page automatique. OK. Et je vais rendre les espacements beaucoup plus rapprochés et surtout ceux-ci devraient être encore plus rapprochés Ce que j'aimerais ajouter, c'est ajouter une petite explication. Tenez l'utilisateur informé. Je veux qu'ils soient au courant de ce qui se passe ? Qu'est-ce qui se passe en ce moment. Je vais dire patcher des fichiers, 50 %. OK. Cela vise donc à informer l'utilisateur de ce qui se passe à ce moment précis. Donc je ne parle pas de tout, oui, nous transférons des données sur ce qui se passe ? Sommes-nous en train d'extraire ? Mettons-nous des fichiers et des fichiers zip ? Est-ce que nous les compressons ? Que faisons-nous exactement ? C'est exactement ce que nous devons dire à l'utilisateur. C'est une chose à garder à l'esprit. Une autre chose à garder à l'esprit est peut-être d'ajouter un chiffre. Nous pouvons le faire en copiant ce texte, collant ici, puis peut-être en l'ajoutant en page automatique avec celui-ci, en le mettant comme ça Mais au lieu d' avoir un texte intégral, vous pouvez simplement écrire 10 %. Ensuite, nous pouvons les centrer comme ça. Mais pour être honnête, je n'en suis pas vraiment content parce que ce n'est pas symétrique. Un pas en arrière. Tu sais quoi ? Continuons comme ça et je vais plutôt le déposer. Voyons à quoi ça ressemble maintenant. Je ne suis toujours pas très content non plus. C'est un peu mieux, mais ce n'est toujours pas le cas. Peut-être que cela a plus à voir avec l'espacement. C'est un peu mieux. Voyons voir si on le met à gauche ou à droite ? Oui, cela pourrait fonctionner un peu mieux pour moi, pour être honnête. Très bien, alors maintenant ça a l'air plutôt chouette. Allons-y et commençons à l'animer réellement Nous allons donc passer au panneau d'animation ou au panneau de mouvement, quel que soit le nom que vous voulez. Et nous allons venir ici et nous allons lui donner une animation juste pour qu'elle apparaisse. Nous voulons que cela apparaisse ou que cela apparaisse à l'écran. Je vais juste faire une petite animation à l'échelle, et je vais ajouter à cette animation d'opacité, et nous pouvons lui donner une petite animation de position Nous allons donc définir la position en partant du bas. Ça va être très léger, peut-être 50. Nous allons lui donner une opacité, un fondu, mais ce sera très bref, et l'échelle sera correcte Cela a l'air plutôt sympa, mais nous allons atteindre l'échelle de 90 %. Et nous allons choisir toutes ces options et leur donner ce type d'assouplissement. Nous allons les assouplir considérablement. Ça a l'air plutôt sympa. Ça a l'air très soigné, très doux, d'accord ? Pour être honnête, nous pouvons même aller de l'avant et lui donner un peu de rebond, même si je ne suis pas très content des rebonds et autres Voyons voir. C'est sympa. J'aime bien ce rebond. Et si nous le faisions également avec le poste ? Oui, c'est sympa aussi. Maintenant, nous pouvons raccourcir l'échelle afin que l'animation soit plus rapide, puis vous pouvez transférer les données. Et au lieu de commencer ici, nous allons le faire commencer à 5 %. Et au lieu de patcher des fichiers, je vais parler de préparer des fichiers C'est bon. Nous devons maintenant transférer des données, transférer des photos et au lieu de préparer des fichiers, nous allons clarifier les choses. Et nous nous contentons de le réduire au minimum pour le moment. Et maintenant, commençons à animer ces petits éléments Donc, je voudrais d'abord commencer par la barre de chargement elle-même. Donc, avec la barre de chargement, c'est assez simple. Ce que nous pouvons faire, c'est lui donner une animation à taille ou à échelle. Si nous lui donnons une animation à l'échelle, voyons à quoi cela ressemblerait. C'est exactement ce que nous voulons être honnêtes. Cela va être redimensionné. Rendons-le plus court. Amène-le ici. Nous obtenons cette fenêtre contextuelle, puis elle passe plus vite, mais pas si vite. C'est plutôt sympa. Nous pouvons même assouplir un peu plus si nous le souhaitons, ou nous pouvons également faciliter les choses. Non, mais j'aime bien ça sans me détendre. Quand cela se calmera, il y aura une différence avec le pourcentage OK ? Nous pouvons donc essayer de le faire de différentes manières. Nous pouvons donc faire le même truc que nous faisions en termes d'opacité Donc, comme nous l'avons fait dans la leçon précédente, nous allons simplement modifier l'opacité dans ce cas La façon de le faire est d' aller ici ou de monter ici et nous allons faire preuve d'opacité OK ? Nous allons donc le faire disparaître comme ça. OK. Mais au lieu que ce soit si long, nous allons le faire durer dix millisecondes Nous allons passer à une milliseconde. Mais pour une raison ou une autre, cela ne se produit pas. OK, c'est trop lent. Donc, ce que j'aimerais faire, c'est le raccourcir, donc je vais juste lui donner une milliseconde, soit dix, et ensuite vous pourrez voir que cela passe presque instantanément, et juste comme mesure supplémentaire, nous pouvons procéder comme suit et le faire disparaître donc je vais juste lui donner une milliseconde, soit dix, et ensuite vous pourrez voir que cela passe presque instantanément, et juste comme mesure supplémentaire, nous pouvons procéder comme suit et le faire disparaître encore plus rapidement. OK ? Alors maintenant, nous avons ceci. Et si on copiait et collait cet élément et qu'on le portait à 25 %, d'accord ? Ensuite, nous allons aller avant et lui donner un autre indice d'opacité, mais il sera atténué, et cela prendra également dix millisecondes Voyons donc à quoi cela ressemble. Déplaçons donc ce fondu vers le bas. Donc, comme vous pouvez le voir, ça ne va pas bien parce qu'ils sont l'un en dessous de l'autre. Cela nous pose plus ou moins problème, mais ce n'est pas si problématique, pour être honnête avec vous. Vous allez les aborder ensemble, et vous allez simplement les mettre dans un cadre. Donc, sélectionnez les cadres, puis vous les placez en face de l'autre, juste au-dessus de l'autre et vous allez juste les mettre comme ça. Nous allons maintenant passer à ces chiffres et nous assurer qu'ils sont tous alignés vers la droite. Ensuite, nous en ajouterons un autre, et nous l'appellerons 64 % Ensuite, nous en ajouterons un autre et l'appellerons 80 %, puis nous aurons 97 %. Je ne sais pas Je mets juste quelques nombres aléatoires , puis nous allons revenir ici et nous allons juste les aligner correctement. Voici à quoi cela devrait ressembler. Nous avons maintenant les premiers alignés ici. Ensuite, nous allons le changer, amener ceci là, ceci là. En fait, cela devrait également être ici. Ils vont tout déplacer un peu plus loin. C'est bon. Nous avons changé les titres, mais nous n'avons pas réellement changé le contenu, nous devons donc nous en occuper. Je suis juste en train de modifier le contenu en ce moment. Vous ne pouvez donc pas le voir, mais plupart du temps, vous devez faire les choses à l'aveugle. Il vous suffit de cliquer sur ce que vous souhaitez modifier. Vous cliquez sur Entrée, puis vous pouvez modifier le texte. Maintenant, voyons voir. C'est exact. Je vais juste espacer un peu plus pour que nous puissions nous amuser davantage avec eux. Ensuite, nous allons essayer de les aligner correctement, ce qui sera un défi. Ce que nous pouvons faire, c'est peut-être que je peux le supprimer. En choisissant ceci, je peux essayer de le couper, mais ça ne coupe pas. Vous pouvez simplement le faire glisser comme ceci , puis l'aligner exactement. Cela ne fait que rendre les choses beaucoup plus faciles. Il suffit donc de le tenir, de l'amener et de l'aligner exactement en dessous, et le tour est joué. Passons maintenant à la victime suivante, tenez-la, ramenez-la. Et puis pour celui-ci, nous allons juste le faire disparaître bien plus tard ou pas du tout. C'est bon. Alors maintenant, voyons voir. OK, parfait. Maintenant, cela semble fonctionner. Il nous suffit de modifier le redimensionnement des animations pour qu'elles s'y adaptent également à venir en même temps Alors voyons voir. Donc celui-ci, par exemple, nous avons ces 25 %. Cela devrait être beaucoup plus, nous allons donc lui donner une quantité , voire un peu plus. Donne-en un autre ici. Ça a l'air bien. Et le dernier ici. Celui-ci va être un peu plus long. Maintenant, vérifions-le. Voyons à quoi ça ressemble. Ce que je pourrais faire, c'est que je vais tous les déplacer un peu vers l'arrière juste pour leur permettre d'avoir leur animation avant que les chiffres ne changent. Maintenant, voyons à quoi cela ressemblait avant. Je pense qu'avant c'était mieux. Maintenant, on dirait qu'il y a du décalage, mais de cette façon, c'est parfait. Génial. Maintenant que nous l'avons après cette animation, ça va se terminer. Maintenant, normalement, je vous recommande d'avoir une fenêtre indiquant que tous les fichiers ont été transférés. Tout va bien. Mais ce n'est pas toujours ce que font les entreprises. La plupart du temps, ils finissent par dire n'importe quoi. Ce que nous allons faire, c'est ce que nous allons faire. Nous allons suivre l'exemple de ces entreprises, mais juste pour que cette leçon soit courte. Maintenant, je vais choisir ce cadre entier et je vais lui donner les mêmes animations qu'avant, mais elles vont toutes être inversées d'une certaine manière. Alors, vérifions-le. Au lieu de l'étendre, il va le faire à l'échelle supérieure. Au lieu de s'estomper, il va disparaître. Et au lieu de glisser vers l'intérieur, il va glisser vers l'extérieur. Et nous allons l'apporter ici. Voyons à quoi ça ressemble. Ou on le ramène. Nous y voilà. C'est bon. Maintenant, la seule chose que nous devons ajuster à ce stade, c'est l'assouplissement, car aujourd'hui, il ne s'agit pas assouplissement très efficace d'une certaine manière. Choisissons-les donc toutes et nous allons dire « easy in ». Au lieu d' assouplir les choses, comme nous l'avons fait, nous allons peut-être le faire cette fois-ci. Voyons à quoi cela ressemble, ou peut-être allons-nous nous détendre. Voyons à quoi cela ressemble. Ça a l'air un peu mieux. Je vais voir ce que nous pouvons faire avec cette opacité. Essayons à nouveau de nous détendre. Je trouve que c'est beaucoup plus beau. C'est bon. Ça a l'air vraiment sympa. une chose qui nous manque, c'est cette partie qui nous explique ce qui se passe en ce moment. J'aimerais changer un peu les choses, rendre un peu plus sympa. La façon dont j'aimerais procéder, c' est de me rendre ici dans cette zone de texte et de l'encadrer également. Je vais le copier et le coller à nouveau, comme nous l'avons fait avant, mais pas tout de suite, je vais lui donner une animation. Cette animation, ce sera essentiellement de l'opacité. Donc ça va s' estomper. Il va entrer par la droite. Nous allons également le rendre très minimal. Voyons à quoi ça ressemble maintenant. C'est vraiment sympa. Faisons en sorte que les choses se calment. La position est un peu trop élevée. Je vais en faire 20. C'est bon. Ça a l'air vraiment sympa. Alors je vais lui donner le contraire. C'est exactement le contraire. Copiez, collez ceci et je le ferai ici quand il sera déplacé. Alors remettons ça ici. Nous allons le mettre au tout début. Et puis ça va changer ici. Comme je l'ai dit, ça va s' estomper, ça va glisser vers l'extérieur et ça va peut-être être vers la gauche. Voyons voir. C'est bon. Nous avons donc simplement fait en haut à gauche. Il devrait être juste à gauche. C'est bon. Et voyons comment faciliter l'entrée au lieu de faciliter la sortie si cela peut améliorer les choses. Donc je vais juste faire une doublure. Oui, ça a l'air beaucoup mieux, pour être honnête. C'est peut-être trop souple, mais voyons voir. Peut-être que ce n'était pas bien. Peut-être aller un peu plus vite. OK, ça a l'air plutôt bien. Maintenant, ce que nous allons faire, c'est copier ce fichier et le coller , puis nous allons le déplacer ici, mettre un peu avant. Et nous allons lui donner un autre texte. Nous préparons donc d'abord les fichiers, puis les compressons, puis les copier-coller, mais pas à partir d'ici, mais plutôt à partir d'ici. Ensuite, nous allons le déplacer. Nous allons le mettre ici. Ensuite, nous allons parler de transfert données, puis ici, cela va également faire quelque chose. Comme je l'ai dit, copiez-le, collez-le et apportez-le ici, puis nous pourrons faire ressortir un peu ce fondu ici. Nous ne voulons pas qu'ils se chevauchent réellement, comme ça. Ensuite, pour la dernière animation, nous allons l'apporter ici. Et nous allons le faire disparaître ici. Parfait, juste comme ça. Ensuite, nous allons écrire pour terminer. Maintenant, voyons à quoi cela ressemble depuis le début. OK, c'est vraiment, vraiment, vraiment quoi ça ressemble en ce moment. Mon seul problème , pour être honnête, c'est que ça va un peu trop vite. Nous pouvons essayer de régler ce problème, mais il est peut-être un peu trop tard pour cela, mais voyons ce que nous pouvons faire pour le moment. D'accord. OK, alors maintenant nous l'avons. Il peut être un peu compliqué de naviguer dans tout cela, mais essayez de ne pas trop vous en préoccuper. Donc je vais juste les apporter ici. Alors voyons voir maintenant. Sympa. OK, je pense que cela pourrait suffire. Voyons voir maintenant. Ce n'est pas constant à 100 %, et je pense que nous avons certainement un retard au début. Nous devrions commencer à préparer les dossiers. Nous devrions peut-être y remédier un peu. Ce ne serait pas du tout faux comme ça. Voici donc le résultat, et je pense que nous avons fait un excellent travail. L'idée est de créer une animation qui n'est pas simplement aléatoire, n'est pas simplement jolie, même si elle est jolie, à mon avis. C'est aussi attentionné. Il a également une bonne expérience utilisateur , une bonne idée. Et c'est vraiment ce qui rend une telle chose riche en contenu, profondeur et en inutilisabilité Et c'est là tout le problème. J' espère donc que vous en avez appris quelque chose , allez-y, essayez-le vous-même, ce que vous pouvez trouver. Merci beaucoup de m' avoir écouté, et je vous verrai lors de la prochaine leçon. 18. Projet de cours : créez votre propre interface utilisateur animée: Il est maintenant temps pour vous de créer votre propre interface animée. Pour ce projet de classe, vous allez créer et animer une petite interface utilisateur ou une interaction en utilisant les techniques que vous avez apprises tout au long de ce cours Vous pouvez choisir n'importe quel type d' interface ou d'animation pour ce projet. Il peut s'agir d'un écran d'application mobile, d'une section de site Web, d'un composant de tableau de bord ou d'une simple animation de page de destination. C'est ton choix. Commencez par concevoir votre interface utilisateur et organisez correctement vos couches. Ensuite, donnez-lui vie à l'aide d' animations relatives à la position, à l'échelle, à l' opacité et assurez-vous d' utiliser le timing et l'assouplissement à votre avantage pour lui donner un aspect plus professionnel et un peu de caractère Maintenant, n'oubliez pas que le but ici n'est pas de créer l'animation la plus complexe qui ait jamais existé. Essayez plutôt de créer une animation propre qui améliore l' expérience utilisateur tout en restant intentionnelle, fluide et professionnelle. Vous avez terminé, exportez votre animation sous forme de cadeau ou de vidéo et téléchargez-la dans la guilde du projet. En plus de la vidéo, vous pouvez inclure une brève description de ce que vous avez fait, de la façon dont vous l'avez créée, des techniques de mouvement que vous avez utilisées pour cette animation et de la façon dont vous pensez que cette amélioration de l'expérience utilisateur a été améliorée. 19. Félicitations ! Et ensuite ?: Félicitations pour avoir terminé le cours. Vous avez maintenant appris à transformer une interface utilisateur statique transformer une interface utilisateur en une interface utilisateur plus interactive et intuitive qui améliore l'expérience utilisateur. mouvement Figma et le motion design en général ne visent pas à faire bouger les choses , à les rendre belles et brillantes, même si c'est un avantage considérable, mais à guider l'utilisateur, communiquer des commentaires et à créer des expériences généralement agréables et intuitives Tout en continuant à concevoir et à apprendre, essayez de vous concentrer sur les applications et sites Web que vous utilisez au quotidien et de comprendre comment ils utilisent et tirent parti des animations réfléchies, intuitives et intentionnelles de manière à vous guider en tant qu' utilisateur et à améliorer votre convivialité. Et si ce n'est pas déjà fait, n' hésitez ajouter vos projets à la galerie de projets J'adorerais voir quel type d' animations interactives créatives vous avez créé, comme toujours. Si vous avez apprécié ce cours, j' apprécierais vraiment que vous laissiez un commentaire. d'avoir vos commentaires nous aide toujours à nous améliorer et à créer un meilleur contenu pour vous à l'avenir, et cela aide également d'autres concepteurs à découvrir notre cours. Merci beaucoup de m' avoir rejoint, et je vous verrai au prochain cours.