Animations Figma faciles à faire pour se démarquer sur les réseaux sociaux

1. Introduction aux cours: Nous savons tous que le contenu est roi. Dans le monde d'aujourd'hui, les gens sont bombardés de tonnes de photos, par exemple sur Instagram Nous devons donc attirer leur attention. Nous avons besoin de quelque chose qui arrête le défilement et les maintient engagés. C'est là qu'interviennent les animations et les vidéos. Comment l'apprendre ? Eh bien, je m'appelle Aga, je suis designer, et je vais vous montrer que ce n'est pas aussi difficile que vous le pensiez. Dans ce cours, je vais vous expliquer l'ensemble du processus étape par étape Vous le terminerez donc avec au moins trois animations prêtes à l'emploi que vous pourrez publier sur votre plateforme Instagram sous forme story Instagram ou même de publication Instagram animée. Et la bonne nouvelle, c'est que vous n'avez pas à vous soucier des After Effects ou autres, ce qui nécessite des connaissances en design. Avec Smart Animate dans Figma, nous pouvons très rapidement prototyper des idées intéressantes pour nos animations, puis nous pouvons les enregistrer et préparer le fichier pour publier ce que vous voulez Alors, êtes-vous prêt à commencer votre voyage avec des animations ? Commençons. 2. Projet de classe: En quoi consiste le projet de classe ? Eh bien, vous devez soumettre au projet de classe au moins une des animations que nous allons réaliser pendant le cours. Bien entendu, si vous souhaitez expérimenter, si vous souhaitez faire quelque chose de différent, vous êtes le bienvenu N' oubliez pas de soumettre le projet dans cette section. Et heureusement , j'ai préparé un prix spécial pour les trois premières personnes. Ces personnes qui soumettront leur projet en premier auront trois, une et une consultations avec moi, qui dureront une demi-heure. Donc, si vous souhaitez discuter de votre carrière, votre créativité, de vos idées, mes autres cours sur le codage, n'hésitez pas à déposer rapidement votre projet dans la section des projets destinée personnes qui ne pourront pas en obtenir le prix. Je voulais juste vous dire que c'est génial de montrer votre travail. C'est bien de demander des commentaires. Ainsi que les autres membres de la communauté. Je vous encourage donc totalement à faire les exercices et à montrer ensuite au monde ce que vous avez préparé. 3. Commencer par Figma: C'est bon. Passons donc à Figma dans le tout premier exercice Mais avant cela, permettez-moi vous parler rapidement des plans de Figma La bonne nouvelle est que vous n'avez pas besoin de mise à niveau ou que vous n' avez pas besoin d'acheter un abonnement. Il est tout à fait normal d'utiliser le plan gratuit Figma, le starter, un soi-disant starter, et cela sera totalement suffisant pour nos expériences et également pour exporter le fichier que vous créez Passons donc à l'application Figma. Je vous recommande vivement d'utiliser FGMA dans l'application autonome, pas dans le navigateur Parce que l'installation des fonds externes peut poser des problèmes . Je pense que l'application est plus optimisée, alors profitez-en certainement. Vous pouvez télécharger Figma Four Windows, vous pouvez également télécharger FMF MAC Vous pouvez le faire depuis figma com. Je passe donc à l'application que je suis en train de télécharger. Et ce que vous pouvez voir ici, c'est l'état vide Disons que j'ai créé le projet d'équipe, mais cela n'a pas d'importance. Le plus important est que vous deviez créer le fichier de conception, pas la carte Fike JM Mais bien sûr, vous pouvez consulter FikJM par la suite. C'est super cool. C'est le tableau blanc Vous pouvez l'utiliser pour des ateliers, pour des réunions avec d'autres personnes en ligne. C'est vraiment cool. Mais aujourd'hui, nous allons nous concentrer sur la conception dans FIG Map, nous devons donc cliquer sur Design. Dossier. Et ce que nous pouvons voir ici, c'est que nous pouvons donner un titre à nos fichiers, par exemple, l'exercice 1. Et nous allons commencer par créer le tout premier cadre. Pour mes besoins, je vais passer au fichier que j'ai déjà créé, et je vous demande également de le dupliquer. Il sera donc plus facile pour nous de travailler sur un dossier qui possède déjà certains actifs ; il serait beaucoup plus efficace d'y être. Donc, actuellement, je suis dans mon dossier Figma. Et ce que je vais vous demander de faire, c'est de dupliquer ce fichier dans votre espace de travail. Cela signifie que vous pouvez facilement modifier tout ce que vous voulez et que les modifications ne seront visibles que pour vous. Donc uniquement pour votre compte. Bien entendu, si vous souhaitez partager ce fichier avec d'autres personnes invitez d'autres co-auteurs ou collaborateurs, ils pourront également le modifier. Mais je ne veux pas que ce fichier soit ouvert à tout le monde, car tous les projets seront là. Assurez-vous donc de créer votre fichier individuel en dupliquant notamment ce fichier provenant de moi Donc, une fois que vous l'avez dupliquée , nous sommes prêts à démarrer et à créer notre toute première image. Avant de passer au tout premier exercice et à la première étape, voyons à quoi ressembleront les animations sur lesquelles nous allons travailler aussi basiques qu'au départ. Je clique donc sur Play. Ne t'inquiète pas pour, tu sais, tout ce que je fais ici. Oui Voici l'animation. Vous voyez donc que certaines images sont en rotation. Ils changent également de position. Nous allons donc commencer par cela. Je dois fermer le prototype, et j'en suis à mon dossier de conception. Vous pouvez voir ici que j'ai déjà créé tous les actifs pour vous. Vous pouvez facilement l' utiliser selon vos besoins, et nous sommes prêts à créer notre premier cadre. Les cadres sont donc comme une toile. C'est quelque chose que vous utilisez simplement comme élément principal dans lequel vous allez créer d'autres éléments, puis les exporter. C'est donc un peu comme un plan de travail, si vous connaissez Illustrator ou Photoshop Je navigue donc en haut à gauche de l'interface, et je vois qu'il y a un cadre. Donc, une fois que j'ai cliqué dessus, je verrai que sur ma droite, j'ai la liste de tous les formats disponibles qui sont prédéfinis pour moi. Et ce qui m' intéresse particulièrement , ce sont les formats des réseaux sociaux, et je recherche une story Instagram parce que nous allons nous concentrer sur la story Instagram. Et une fois que je clique dessus, je vois que mon cadre est créé. Je peux changer sa position très facilement. Donc, une fois à l'intérieur, je peux commencer à recréer ce que j'ai déjà ici Je change donc l'onglet pour concevoir. Et la toute première chose à faire est changer la couleur de fond du jaune, désolé, du blanc au jaune. C'est donc la couleur que je vous ai déjà préparée. 4. Animer intelligent: Nous allons utiliser massivement dans les cours la fonctionnalité Smart Animate Cela signifie que je vais peut-être utiliser les définitions que j'ai prises sur le site Web, sur le site Web de FigMA, selon lesquelles Smart Animate recherche les couches correspondantes, reconnaît les différences et anime les couches entre les images et Cela peut sembler un peu compliqué pour certains d'entre vous qui ne l'ont pas encore essayé, mais ne vous inquiétez pas. Je vais tout te montrer. Nous en tirons donc parti du fait que Smart Animate est intelligent et qu'il recherche certaines différences Donc, une fois que nous aurons deux cadres et que nous les aurons connectés en mode prototype, vous verrez ce qui se passera. Imaginons donc que nous ayons un rectangle. Je dessine juste un rectangle ici. Il peut être rouge tout comme celui-ci. Nous pouvons bien sûr le centrer à l'aide la fonction d'alignement des éléments OK. Il est centré horizontalement et il est centré. Verticalement. C'est bon. Copions donc le même élément dans mon cadre. Donc, ce que je fais, c'est que je clique sur Command C sur Mac. Vous pouvez cliquer sur Control C sur PC. C'est le rectangle. Je peux le voir dans le panneau de gauche, qui montre toutes les couches que j'ai. J'ai donc copié mon rectangle. Je marque le cadre dans lequel je veux coller ce rectangle, puis je clique sur Commande V ou Contrôle V pour le coller. Et vous verrez qu'il aura la même position. Imaginons donc que j'aimerais que ce rectangle soit plus petit. Je change donc sa taille, mais en faisant glisser sa hauteur. Et je veux animer ces deux cadres. Je dois donc cliquer sur le tout premier. Changez l'onglet de conception à prototype. Il suffit de faire glisser le pointeur du pointeur vers le cadre que je souhaite combiner. Ensuite, la partie de l'interface chargée de définir l'animation apparaîtra. Donc, ce que je peux voir ici, c'est que l'option Animation intelligente (fonction d' animation intelligente) est cochée L'animation instantanée serait probablement celle par défaut Vous devez donc cliquer dessus et passer à Smart Animate. Vous verrez la démo de cette animation et du chronométrage. Donc, si nous prenons par exemple une seconde, soit 1 000 millisecondes, ce sera un Nous avons Smart Animate. Je clique donc ici, je vois que le nouveau flux est créé. Je clique sur l'icône Play et je vois mon animation. Eh bien, ça ne va pas, ça ne bouge pas parce que nous devons cliquer. Une fois que j'ai cliqué, je vois que Smart Animate démarre. Smart Animate recherche donc les différences, et la différence entre ces deux images réside la hauteur de ce rectangle, n'est-ce pas ? Parce que nous changeons sa hauteur. Si nous avons un rectangle totalement différent, et que par exemple, nous aimerions, vous savez, nous aimerions, vous savez, avoir les animations de ce rectangle vers celui-ci, vous verrez que cela ne fonctionnera pas comme ça parce que ce rectangle gris est un nouvel élément qui n'apparaît pas. C'est donc celui appelé rectangle dix, et il n'apparaît pas dans le premier cadre. Smart Animate recherche donc uniquement les mêmes objets dans deux cadres C'est pourquoi il recherche les couches correspondantes, et le rectangle dix n'est pas une couche qui correspond à la première image. Si nous voulons également l'avoir dans le premier cadre, il suffit de le copier-coller au même endroit, nous pouvons, par exemple, modifier sa hauteur et sa position, et vous verrez ce qui se passera. Ça a l'air sympa. Je veux dire, séduisant au moins pour quelque chose que nous pouvons faire en une minute. Et je veux vous montrer par cet exercice que vous pouvez beaucoup expérimenter avec cette fonctionnalité car elle est vraiment cool. Vous n'avez donc pas besoin de créer tous les états de l'animation, uniquement celui d'entrée et le dernier, et tout ce qui se trouve entre les images sera automatiquement effectué par Figma Pensez donc à avoir les objets correspondants. C'est important. Et l' autre point, c'est que j'ai dû cliquer sur le cadre ici, deux pour démarrer l'animation. Et c'est ainsi que nous pouvons le changer. Une fois que vous avez cliqué dessus, dans les paramètres de l'animation, vous verrez que nous avons une option de clic. Nous pouvons le changer. Et il existe différentes options. Ils sont parfaits pour simuler le comportement du tapotement ou du changement cap sur le site Web. Par exemple, vous pouvez entrer la souris, sortir de la souris, mais nous pouvons également passer automatiquement d' une image à l'autre en choisissant après le délai Ainsi, après un certain temps, le cadre sera automatiquement transféré au suivant Nous pouvons bien entendu passer à 0 seconde, donc cela se fera instantanément. Nous avons la configuration intelligente de l'animation, le timing, et voyons ce qui va se passer Une fois que j'ai joué, l' animation démarre. C'est donc vraiment très sympa, et nous pouvons en profiter pour configurer notre vidéo, notre animation en conséquence. Très bien, donc c'est quelque chose de très, très simple. Je voulais juste vous expliquer ce qu' est Smart Animate, comment cela fonctionne Mais revenons à l' animation que j'ai ici. Donc, ce mouvement des images, permettez-moi de retirer les rectangles que j'ai, et commençons 5. Premiers pas avec l'animation dans Figma: Je vais donc prendre les objets, les éléments que j'ai et les éléments que j'ai réellement créés pour vous. Je dois cliquer sur le groupe, puis je vois que j' ai des cadres. Vous avez donc déjà reconnu que le panneau est un cadre, et nous avons des photos gratuites. Je peux les marquer. J'utilise Shift. Et avec un shift, je peux marquer une liste plus longue de fichiers. Je clique sur Common C pour les copier, puis je les colle dans mon cadre, et j'ai des photos gratuites. Je pense qu'ils devraient être plus grands. Permettez-moi donc de cliquer sur Shift. Et avec Shift, je suis juste ça ne marche pas comme ça. Oh, parce qu'ils sont encadrés. Ils ne sont pas l'image elle-même. Dans chaque image, il y a une photo. Très bien, donc pour agrandir les éléments qui se trouvent dans des cadres, nous devons utiliser l'option de lien de mise à l' échelle Je vais vous montrer comment l'utiliser. Vous devez donc cliquer sur K, appuyer sur la lettre K de votre clavier. Et vous verrez que les flèches ont changé. Les flèches doubles. Et une fois que j'aurai cliqué sur Shift et que j'aurai commencé à redimensionner le cadre, je veillerai à ce qu'il conserve les proportions C'est également indiqué ici. Si je change pour me déplacer, démarrer et commencer à utiliser simplement le bouton de redimensionnement sans décalage Cela me permettra simplement de manipuler la hauteur et la largeur, mais comme elles ne seront pas connectées, elles ne garderont pas les proportions que j'ai définies. Je peux donc l'agrandir avec le k un cyclique, il change ici, à gauche Alors laissez-moi juste l' agrandir un peu et voir si c'est bon, peut-être que cette taille serait bien. Et je dois le changer avec la même chose. Je peux donc commencer le redimensionnement, mais nous voulons conserver les mêmes tailles. Alors peut-être, pour faciliter les choses, je vais le remplacer par cent 9 590, afin que je puisse simplement changer cette taille et nous aurons les mêmes tailles OK Si je clique dessus comme ça, vous verrez que le cadre est agrandi, mais pas l'image qu' il contient. Nous devrons donc probablement le modifier également. Et nous sommes presque prêts parce que je vois que cela ne remplit pas tout le cadre Nous pouvons donc cliquer sur l' image et l'agrandir un peu. Oh, oui, super. Nous pouvons naviguer dans le cadre et voir comment il est positionné, mais je suis satisfait de celui-ci. OK, alors voyons si tout est pareil. Nous avons donc une, deux et trois photos. Chacun d'eux se trouve dans un cadre distinct, et nous avons le cadre de l'histoire. Donc, ce que nous allons faire, c'est tout empiler. Je vais empiler, par exemple, cette image ici. Je vais vérifier si c'est au centre. Je vais empiler cette image au même endroit. Mais ce que vous devez savoir, c'est que généralement, si vous placez un élément sur l'autre élément, qu'il s'agit d'un cadre, le cadre va sauter dedans. Et nous ne voulons pas avoir un tel effet. Je dois donc le prendre et le mettre dans une autre couche. Il s'agit donc toujours d'un cadre distinct. Et j'ai la photo numéro un, et ça va arriver. La chose qui va arriver est en fait la même chose. Mais je ne veux pas avoir la première photo sur le devant. Alors je le change. C'est mon point d'entrée. Laisse-moi juste retirer ce cadre. Ce qui est plus facile à jouer avec Smart Animate, c'est créer la toute première image terminée, puis de la copier et de la coller rapidement Command C et Comm pour Mac, et je peux jouer avec les deux cadres, sont en fait identiques. Alors que je cherche ce aide-mémoire, disons, je vois que les images ont changé de position Alors laisse-moi prendre la troisième photo. Et changez-le. Permettez-moi de cliquer sur la première photo et de la modifier quelque part ici, d'accord ? Nous avons donc la position de ces éléments, et nous allons les connecter dans l'onglet Prototype. J'en suis donc au prototype. Je le fais juste glisser. Cliquez sur Naviguer deux. Oui, c'est vrai, smart animate. Gardons-le pendant une seconde. C'est bon Mais nous voulons qu'il soit activé après un certain temps. Donc, après 0 secondes, commencez. En fait, nous devons donner quelque chose de plus que zéro, mais une milliseconde, Donc c'est toujours bon pour nous. Et voyons l'animation. Sympa. Nous avons donc les photos en mouvement. Nous avons donc une photo , la photo principale au recto, puis l'autre apparaîtra. D'accord, passons à l'autre étape, qui consiste à changer la position des images situées en haut et en bas. Je fais de même, donc je copie simplement le cadre. Et pour garder la même position, et je vais juste, tu sais, changer, tu peux y aller comme ça. Vous devez savoir que si vous le faites glisser trop loin, il sortira du cadre d'origine. Donc, si vous voulez le garder à l'intérieur, il vous suffit de le mettre ici et il sera découpé. Je vais juste te montrer une chose. Si le contenu de ce clip est activé. Cela ne montrera pas tout ce qui se trouve en dehors du cadre. Mais une fois que nous l'avons décochée, elle s'affichera comme ceci Mais pour nos besoins, nous voulons que le contenu des clips soit vérifié. C'est bon. Nous voulons donc également faire pivoter ces images un peu comme ça, et bien sûr, passer en mode prototype. Et oui, naviguer, c'est bien. Après un délai, amende d'une milliseconde. Animation intelligente Génial. Et jouons à Cool. Ce qui est également intéressant dans le panneau d'animation, c'est que vous pouvez modifier la dynamique de l'animation, qu'elle soit rebondissante, par exemple Voyons comment cela va se passer. Oui Vous pouvez donc voir que cette image est simplement rebondie Oh, gardons-le juste pour ajouter quelque chose de nouveau. Peut-être que cette photo serait cachée comme ça. Et le mouvement suivant consiste à prendre les photos du haut et du bas vers la position centrale. Donc encore une fois, je fais du copier-coller. Et laissez-moi mettre ce cadre en haut. Oh, nous voulions vraiment garder la version différente. Donc, si vous voulez conserver l'autre, il vous suffit de changer la position du cadre, et il se trouve sur le devant. Donc, quelque chose comme ça. Ensuite, nous devons prototyper ici. Si cette option ne s'affiche pas, vérifiez simplement si vous êtes passé en mode prototype. C'est bon. Donc, je fais glisser la flèche, animer intelligemment, peut-être passons à l'animation douce Cela va se produire après un délai, 1 seconde, une milliseconde, désolé. Voyons voir. Tirez. Oui, c'est comme ça. Vraiment sympa. Et nous voulons le faire pivoter. Alors, prochaine étape, copier. En fait, j'ai copié la barre de cadre précédente en cliquant dessus et en cliquant sur Option sur Mac sous Windows. Option A. En faisant glisser le pointeur, je copie le message que j'ai choisi tout à l'heure. Nous avons donc le même cadre qu'avant. Et maintenant, nous sommes prêts à le modifier un peu, afin, par exemple, de le faire pivoter. Et bien sûr, nous devons le connecter après un délai d'une milliseconde Et voyons voir. Cool. Bien sûr, vous pouvez en faire plus. Je veux dire, vous pouvez, par exemple, changer sa taille, nous sommes sur le P 3. Mais n'oubliez pas de conserver l'échelle si vous souhaitez modifier à la fois le cadre et les proportions de l' image qui se trouve à l'intérieur. Nous pouvons donc faire quelque chose comme ça. Et vous pouvez ajouter du texte. Par exemple, Hello. Rien d'original ici, mais oui, j'utilise la police de test Clash Grow, et donne-moi juste une seconde. Je vais m'y intéresser. Vous devez le télécharger et l'installer sur votre système. OK. Essayons quelque chose de plus grand. Bonjour Comme vous pouvez le voir, le texte se trouve dans le cadre P trois. C'est pourquoi il est masqué. Mais une fois que nous l'avons fait glisser hors d'ici et que nous l'avons maintenu dans l' espace général du cadre sept, il apparaîtra comme ça. Nous avons donc un bonjour. Nous pouvons modifier sa couleur de remplissage en utilisant le curseur Color P. Je clique sur la couleur que j'ai préparée pour vous, et nous avons le signe « Bonjour ». OK, combinons le switch au prototype. Après un délai d'une seconde, Milk, seconde. Le suivant. Et voyons voir. Oh, j'avais besoin de cliquer dessus. Oui, probablement, oui, ça devrait être après délai. Ouais C'est donc très simple. Vous savez peut-être que nous pouvons faire plus pour le rendre encore meilleur, mais je voulais vous montrer qu' minutes, quelques minutes, nous pouvons faire quelque chose qui ne nécessite pas de nous pouvons faire quelque chose qui ne nécessite pas compétences de notre part, des compétences avancées. Soit dans Figma dans les animations en général. 6. Créer une première animation: C'est bon. Voyons donc quoi ressemble l'animation que nous visons. Je clique ici sur l'option de jeu, et voici ce que vous voyez. J'espère qu'il vous plaira. Je voulais juste vous montrer que vous pouvez également modifier la taille de cette fenêtre car je ne l'ai pas fait auparavant. Encore une fois, une fois que j'ai cliqué sur Play dans le flux, vous verrez l'animation que nous allons préparer. J'espère que vous êtes également enthousiaste. Très bien, recréons donc l'effet que nous avons. Tout d'abord, pensons à ce qui vient de se passer. Peut-être pouvons-nous ralentir un peu l' animation, par exemple, à 20 secondes, ce qui est un peu long, pour voir ce qui se passe. L'image se rétrécit donc et le texte, en haut comme en bas, change de position Et on peut voir le jaune se briser. Alors, que devons-nous faire ? Je prends un nouveau cadre et une nouvelle story Instagram. Le cadre est prêt. Faisons-le en bas ici et changeons le fond en jaune. Complétez, j'ai déjà jaune jaune dans la couleur du document, donc je peux le sélectionner. Mon cadre de story Instagram est prêt. Bien sûr, vous pouvez le conserver, par exemple, remplacer par Guide to Million Animation afin de le rendre plus facilement reconnaissable pour vous Bien sûr, il est très important de conserver l'ordre et les noms propres des couches. Je ne vais pas tout montrer ici car ce n'est pas le sujet. Ce n'est pas le sujet de la figma, mais je pense qu'il vaut la peine de suivre les bonnes pratiques, même si vous expérimentez Très bien, nous avons donc le cadre, et nous voulons utiliser la photo que nous avons. Copions donc celui du cadre supérieur. Mais il faut le changer un peu. Je clique donc sur K pour le redimensionner légèrement afin de l' afficher en plein écran. Comme ça. Et je veux me limiter à la suivante. Donc, avec K, je change quand même la taille de l'image. Je regarde juste plus ou moins les proportions de l'animation. Oui, cela peut être quelque chose comme ça, et nous voulons le centrer. Génial. Connectons donc le passage au prototype. Choisissez Smart Animate. Peut-être que nous pouvons continuer à cliquer. Il nous reste 10 secondes. C'est bon. Alors, cliquons sur Play pour voir. Je clique et l' image se rétrécit. Je vois un peu d'espace ici. Voyons quel type d' animation est utilisé ici, doucement. Je ne me souviens pas lequel j'ai utilisé ici. Alors permettez-moi de vérifier rapidement. Vous n'aurez pas les solutions ici. Donc oui, doux aussi. Je suppose donc que nous devions le faire parce qu' il y a un petit décalage entre ces bords. Alors je le fais comme ça. Le cadre serait donc un peu plus grand. Mais c'est ce que l'on dirait sur la photo. C'est bon. Génial. Et allons-y encore une fois. Je clique et l' image se rétrécit. C'est vrai. C'est un peu plus lent que dans la version originale, mais ne vous inquiétez pas, nous modifierons le chronométrage par la suite. OK, la prochaine étape est le texte. Et ce que vous devez faire c'est télécharger le fonds Clash Grotesque C'est gratuit. C'est open source. Une fois que vous avez accédé au texte et cliqué, le navigateur devrait être ouvert et vous avez la possibilité de télécharger Clash Grotesque Donc, par exemple, vous pouvez le tester, mais nous ne voulons pas le faire pour le moment. Oui, vous devez cliquer dessus et vérifier que vous pouvez tout ajouter tout parce que je trouve que chaque style est sympa. Et une fois que nous les avons tous sélectionnés, vous les sélectionnez tous. Je suis juste en train de vérifier si vous avez la possibilité de tout sélectionner en une seule fois. Mais je ne le vois pas, malheureusement. Vous devez donc sélectionner style par style, puis télécharger la famille. Une fois que vous avez téléchargé Family, vous devez installer les fonds. Si vous avez déjà l'application Figma, c'est génial. Mais si vous ne le faites pas, installez plutôt l'application FDMA au lieu de jouer avec elle dans le navigateur Web, car sinon, il pourrait y avoir des problèmes de fonds Et aussi, ce qui est important, c'est de vérifier l'agent Figma. Installateur. C' est donc l'application que vous devez également télécharger et installer. Oui, vous voyez des installateurs de polices. Veuillez donc installer le programme d'installation du fonds, grâce à eux. Grâce à l'installateur, vous pourrez utiliser les fonds externes, pas les fonds habituels du système, mais certains fonds que vous avez téléchargés à partir de fonds Google ou de toute autre source. Passez donc à Mac OS ou Windows en fonction de votre système et installez-le après, avant d'installer nos fonds, il serait probablement préférable. Je prends donc également ce lien, et je vais l'ajouter à Figma Je peux ajouter un lien ici. Et oh, pourquoi ça ne marche pas. Par Yes, comme ça. Ouais. Et vous vous amusez aussi à installer. Génial. Alors, s'il te plaît, fais-le. Installation et programme d' installation amusant de Figma. C'est bon. Donc, une fois que vous avez installé le fonds, et que nous pouvons vérifier s'il est reconnaissable par la FGMA à partir du texte, vous devez taper. Et je suis en train de taper un guide, peut-être deux M, restons-en au texte de notre exemple. Si Clash Grotesque ne figure pas dans votre liste, fermez l'application, fermez l'application Figma Installez le programme d'installation des polices depuis Figma. Vérifiez si la tâche Clash Grow se trouve dans les fonds de votre système, puis lancez à nouveau le Figma, et le fonds devrait être là Les problèmes apparaissent généralement si vous utilisez un navigateur Web ou si vous pensez parfois que la police est déjà installée, mais ce n'est pas le cas, ou si vous n'avez pas installé ce programme d'installation de police. Très bien, j'ai donc mon guide de texte sur Million. Je veux l'agrandir, alors je clique sur K et je l'agrandis Je veux également changer son remplissage en rouge, et je pourrais le placer en taxe quelque part. Essayons avec 160 peut-être même 300. Oui, quelque chose comme ça. Donc, ce qui se passe ici, c'est que nous avons, par exemple, un texte indiquant que c'est une transition, comme ça Et le même texte, je l'ai copié avec l'option avec l'ancienne clé. Et nous pouvons avoir un guide comme celui-ci. Quelque chose comme ça. OK. Nous avons donc deux lignes de texte, et voyons ce qui va se passer. Une fois que je passe en mode prototype et que je change d'animation. Le texte s'estompe simplement. C'est un peu différent de ce que je t'ai montré. Revenons donc à l'original. Le texte apparaît donc ici. Comme nous le savons grâce à l'animation intelligente, nous devons avoir les mêmes objets Les objets doivent correspondre les uns aux autres, en comparant les deux cadres. Comme vous pouvez le voir, nous avons du texte de gym, mais nous ne l'avons pas dans nos premiers cadres. Arrêtons-nous donc ici un moment. Si nous voulons que ce texte fasse des transitions de gauche à droite et de droite à gauche, nous devons copier exactement les mêmes objets et les avoir dans le tout premier cadre. Donc, pour faciliter l' identification de ces objets et cadres, je vais le renommer Donc, désolé, c'est le deuxième, non ? Et ça devrait être le premier. Je change donc le nom des couches, et je vais faire de même avec le texte. Voici donc du texte en haut, et celui-ci en bas, et je copie deux des objets en cliquant sur ce premier cadre. Et je suis juste en train de suivre le rythme. Je vois donc le texte. Et c'est génial. Voyons donc, par exemple, en maintenant la touche Shift enfoncée, je maintiens la touche Shift enfoncée pour que le texte ne puisse être transféré que de gauche à droite et sur l'axe X. Donc, si je maintiens la touche Maj enfoncée, il me sera plus facile de conserver la même position en termes de position verticale, et je pourrai la faire défiler horizontalement avec Shift. Alors laissez-moi faire la transition. OK. Et je vois qu' il est sorti de la deuxième image, non ? Il s'agit du deuxième cadre et le texte se trouve à l'extérieur. Je dois donc y remédier. Génial. Et en fait, je ne sais pas pourquoi nous en avons deux. Oh , désolée, je les ai mises dans le mauvais cadre. Oui C'est le premier, je dois donc le mettre dans le guide supérieur de la première image. J'espère que c'est clair pour toi. Nous avons donc le texte dans le premier cadre. Il a changé de position. Voyons donc à quoi cela ressemblera. Désolé, je vais peut-être le remplacer par After delay, il me reste 7 000 secondes. Nous pouvons ajouter deux millisecondes et C. Oui. Cela ressemble au tout premier exercice la toute première vidéo que je vous ai montrée, revenons-y. Ce sont les démonstrations. C'est bon. Sympa. Nous pouvons donc faire de même, mais nous devons changer de position. Il doit être caché. Ouais. Nous devons donc le prendre vers la droite. Encore une fois, il est arrivé qu'il soit sorti du cadre, nous devons donc le placer dans le premier, et nous devons nous contenter du texte du bas. Il va donc de droite à gauche, je dois donc changer de position. Et encore une fois, il est sorti, donc je dois le mettre en dessous juste pour garder le même ordre des couches. Voyons voir. C'est exactement ce que je voulais réaliser. Nous sommes donc heureux que cette animation ressemble l'animation originale que je vous ai montrée, et maintenant il est temps d' enregistrer cette animation pour pouvoir ensuite exporter cette vidéo et la publier sur des stories Instagram. Voyons comment nous pouvons le faire. 7. Utilisateurs de Mac : exporter l'animation en tant que vidéo avec QuickTime: OK, alors comment enregistrer l'animation, comment exporter la vidéo. Je suis un utilisateur de Mac, donc cela simplifie un peu les choses car je n'ai pas besoin d'installer d'autre application externe. Donc, si vous utilisez un Mac, nous allons utiliser Quick Tim. Et pour les utilisateurs de Windows, je recommande vivement d'utiliser description du projet de la classe Lom Ida, dont vous trouverez le lien et également dans Figma C'est vraiment sympa car ce que j'aime dans cet outil, c'est qu'on peut enregistrer une partie de l'écran. Alors plus tard, je vous montrerai comment faire. Mais passons maintenant à l' enregistrement de l'écran pour les utilisateurs de Mac. Donc enregistrement et Quicktime. Nous voulons enregistrer la taille précise des stories Instagram. Voyons donc comment nous pouvons le faire avec Quick Time. Je vais donc me prélasser avec QuickTime. Et je m'en sors avec la bonne clé. Je fais un nouvel enregistrement d'écran. Et ce que je vois, c'est que j'ai déjà une certaine taille. Je peux donc cliquer sur Enregistrer. En attendant, je peux également cliquer sur l'animation. Eh bien, laissez-moi arrêter d'enregistrer. Parce que je vois que j' avais un réglage différent dans mon prototype. Je veux dire, l'onglet prototype. Et ce que je voudrais faire, c'est modifier les paramètres. Je ne veux donc pas avoir cet appareil, mais uniquement le mode présentations, c'est bon. Génial. Donc, ce que je vais faire, c'est vérifier si les proportions du quick time correspondent à mes graphismes, mon animation. Je vois qu'il devrait être plus grand, je prends la taille réelle des graphismes. OK. Et je peux l'enregistrer. Mais comme vous le savez, l'animation a déjà disparu car elle n' a été jouée qu'une seule fois. Donc, ce que nous pouvons faire, c'est économiser l'espace donné, afin que nous puissions cliquer sur Enregistrer et arrêter sans nous inquiéter pour le moment. Mais nous devons définir une sorte de délai une fois que nous avons activé le QuickTime. Nous avons besoin d'une sorte de délai avant le début de l' animation. Permettez-moi donc d'ajouter ici un temps plus long, par exemple 4 secondes. OK. Donc, je fais un nouvel enregistrement d' écran , j' enregistre, et je joue l'animation. Je pense que ça devrait être le cas, comme ça. Et l'animation est enregistrée. Voyons voir. Il s'agit du fichier enregistré par Quicktime. Jouons. Bien entendu, c'est également la partie de l'interface que nous étions en train d'enregistrer. J'étais en train de changer, mais la position de la fenêtre est bonne. La vidéo est prête. La fonctionnalité intéressante de QuickTime est que nous pouvons découper la vidéo afin de pouvoir en faire la première partie Oui, je pense que ce serait celui-ci. Je peux donc maintenant exporter le fichier, donc exporter le fichier au format 1 000 ADP, c'est tout à fait normal. Et nous pouvons appeler ce guide de Milan, et je le garde. Ce fichier, je peux le transférer sur mon mobile, puis le publier sur Instagram. 8. Utilisateurs de Windows: exporter l'animation dans Vdeo avec Loom: OK. Très bien, j'ai donc installé Loom en tant qu'application Je vous recommande vivement de le faire car c'est facile. Je viens d'ouvrir Loom et j'ai l'interface. Ce que je peux faire ici, c'est que je peux enregistrer soit pour l'écran, soit pour une taille personnalisée, ce qui est le plus important pour nous, car nous devons ajuster la taille de l' enregistrement à celle de notre prototype. Alors laissez-moi d'abord le prototype. Et grâce à cela, je pourrai personnaliser la taille de la zone pour l'enregistrement. Oui, comme ça, et je peux enregistrer cette partie de l'animation. Comme vous pouvez le constater, il reste 3 secondes avant que l'écran ne soit enregistré, et c'est le moment. Je peux, bien sûr, l'arrêter. Et c'est ici que mon métier à tisser sera généré. Je peux télécharger ce fichier ou le conserver dans le cloud. Mais faisons-le encore une fois. Je vais peut-être ajouter une image supplémentaire pour faciliter le démarrage de l'enregistrement, juste comme image de départ, afin que je puisse la donner au clic, le flux démarrera ici, et après le délai, pourra démarrer après 15 millisecondes Alors, laissez-moi le prototype. Une fois que j'ai cliqué à l'intérieur, l'animation démarre. Encore une fois, je cherche un métier à tisser sur mesure, commencez à enregistrer OK. Je dessine la taille personnalisée. C'est bon. Lancez l'enregistrement. Il comptera trois contre un, puis je pourrai cliquer sur le prototype, et l'animation sera prête. Oui, je passe à ce compte pour que vous puissiez voir l'option d'édition, découper et coudre C'est quelque chose que vous aimeriez utiliser, puis nous pourrons découper la vidéo. Cela partira donc de l'animation donnée. Ensuite, vous pouvez exporter le clip, enregistrer le clip existant, puis l'exporter, disons que c'est terminé. Et je peux télécharger la vidéo simplement en cliquant sur Plus d'actions et ici télécharger la vidéo. OK. 9. Créer une deuxième animation – partie 2: C'est bon. Passons donc au deuxième exercice, qui sera également passionnant. Nous devons donc passer à Figma. Très bien, nous sommes donc à Figma. Et laissez-moi vous présenter l'animation sur laquelle nous allons travailler maintenant. Comme vous pouvez le constater, il existe de nombreuses couleurs et de nombreuses animations différentes. Je suis très heureuse de vous montrer quelques astuces. Comme d'habitude, vous avez créé tous les actifs, et nous devons télécharger et installer un nouveau fonds. Il s'agit du téléphone qui peut être téléchargé depuis G Road. Oui, de GM Road. Désolée, je me demandais si c'était la bonne adresse, mais oui. Donc Kina, et tu dois télécharger ce fonds téléphonique sur ce marché. Bien sûr, vous pouvez payer pour cela. Vous pouvez également saisir zéro. Si vous voulez l'avoir gratuitement, c'est gratuit pour un usage personnel et commercial, ce qui est super sympa. J'aime beaucoup ce type de phase, alors n'hésitez pas à le télécharger. Ensuite, installez-le et vérifiez s'il fonctionne dans Figma. Sinon, veuillez désactiver l'application, l'application Figma, puis la lancer à nouveau. Parfois, j'ai de tels problèmes, alors je suis juste, tu sais, en train de te donner ce conseil. Nous avons un ensemble de couleurs, ainsi que cette icône, que nous allons utiliser dans certains cadres. C'est bon. Commençons donc. Tu sais déjà par où commencer. Nous devons passer à la conception du cadre et créer l'histoire Instagram. Modèle. Pour votre remplissage, nous allons utiliser l'arrière-plan de base. Et au moment de jeter un œil, nous avons des conseils pour les créatifs. Donc je fais ce texto pour donner des conseils à Yakhina. Je l'ai déjà choisi sur ma liste dans la liste des fonds. Agrandissons-le avec K. Tips. Nous verrons si c'est Create is. Je ne me rappelle pas comment j'ai divisé ce mot. Voyons voir. Créatifs. Ouaip. Je pense que cette taille est correcte, et nous voulons les regrouper et avoir les mêmes espaces entre eux, afin de pouvoir utiliser l'espacement vertical distribué Oh, je ne sais pas. Ça n'a pas l'air. C'est pareil. Alors fais-le encore une fois. Je vais prendre ce cadre juste pour l'avoir de la même manière. Je pense que les fonds devraient être plus importants, alors je les augmente un peu pour quatre créatifs. Permettez-moi de vérifier quel fonds j'ai utilisé à des fins de démonstration. C'est moyen, c'est bon. C'est bon. Ce soit quelque chose comme ça. Créatifs et rangeons un peu. C'est bon. Je pense que le top 4 est un peu plus large ici. Alors oui, faisons quelque chose comme ça. La composition est donc plus ou moins bonne. Et ce que nous pouvons faire ici, c'est créer un composant. Donc, chaque fois que nous déciderons que je ne sais pas, que nous voulons rendre ce composant encore plus amusant, cela changera dans toutes les instances de ce composant. Créons donc d'abord le composant, et vous verrez ce que je veux dire. Je sélectionne tous les éléments qui doivent figurer dans le composant, puis vous pouvez le faire rapidement avec ce composant en béton. Et nous pouvons l'appeler section de conseils, par exemple, et une fois que j'ai copié, vous savez, le cadre pour les prochaines étapes de l'animation. Mais en attendant, je déciderai que, en fait, ces fonds devraient être plus importants. Vous savez, je peux avoir une influence sur mon composant, je peux changer quelque chose dans mon composant, et cela se reflétera dans toutes les instances de ce composant. Je pense donc que c' est très utile, surtout si vous expérimentez beaucoup. Et en général, il est très utile de conserver des éléments répétitifs dans les composants de Figma Très bien, j'ai donc des conseils pour les créatifs. Je peux supprimer ces cadres pour le moment. Je veux copier l'icône en forme de flèche et l' agrandir un peu. D'accord. Nous avons donc des conseils pour les créatifs. Et comme vous vous en souvenez dans l'animation, nous avons différentes bandes de carburant de couleur qui apparaîtront sur différents sites. Nous devons donc créer les bandes, et je le fais, je le fais avec un cadre, donc je clique sur le cadre, et je vais le dessiner, mais attention. Cela se produit à l'intérieur du composant, nous devons donc le faire glisser et le retirer du composant. Vérifie la hauteur car plus tard, ces bandes recouvriront le texte. Alors allons-le un peu plus, donc je dirais 180. Et nous voulons remplir ce cadre d'une couleur. La première couleur sera le jaune, celui-ci. Vous pouvez également le consulter ici. Vous pouvez utiliser le sélecteur de couleur, et nous voulons le rendre arrondi Donc ici, on peut en prendre 100, par exemple, pour voir si c' est beau, c'est complètement arrondi. Nous avons donc la première bande. Mais nous devons le reproduire pour d'autres articles. Nous en avons donc un autre, le bleu. Cela devrait se situer dans ce cadre. Renommons-le en Conseils pour les créatifs et changeons la couleur Je clique dessus et avec l'ancienne touche ou la touche option, nous devons changer la couleur en rose, c'est vrai. Encore une fois, en le modifiant en l'ajoutant au cadre. On peut l'appeler rose. Celui-ci, on peut l'appeler bleu et jaune. C'est bon. Et je pense que ce serait le dernier. Le vert. Oui OK. Oh, non En fait, ce n'est pas le dernier, désolé. C'est orange, c'est vrai. Et le dernier serait quelque part ici. Il sera vert. Voici donc l'étape de l'animation, une étape. Mais en fait, c'est le milieu. Nous voulons donc avoir le point de départ. Cela ressemblera à ça. Je vais le copier. Tous ces cadres seraient donc cachés. Assurez-vous qu'ils restent bien dans le cadre. Au fait, je ne l'ai pas renommé. Je suis désolée pour ça. C'est bon. Nous sommes donc en train de créer un prototype. Non, celui-ci aussi. Désolée. OK. Hein ? Et ce serait l'une des étapes ultérieures de l'animation. Et copions. Copions. C'est bon. Tellement jaune. Jaune. Je vais passer au design. Du jaune apparaîtra. L'étape suivante. Lequel est le suivant. Ça devrait être quatre, donc le bleu, non ? Assurez-vous que vous modifiez le cadre approprié. OK. Donc bleu, puis rose, je suppose, ou c'est rose. C'est ici. Et la prochaine étape est verte. Orange. Désolée. Désolée. Ouais. C'est orange. Bien entendu, pour avoir un contenu plus nombreux et mieux organisé, je vous recommande vivement de renommer les cadres 10. Créer une deuxième animation – partie 1: C'est bon. Je pense donc que nous pouvons essayer de les connecter dans le prototype et voir comment se déroulera l'animation. C'est bon. Animation intelligente Je serais bref, peut-être 600 millisecondes Après un délai, restons très rapides, 50 millisecondes, et faisons de même avec l'autre. En fait, nous pouvons en faire un tas. Je ne fais donc que combiner, puis je sélectionnerai. Mmm, hum. Je vais sélectionner toutes les flèches avec Shift. Et puis je peux changer, désolé, pas celui-ci, mais ici, mais ici, après un délai de 50 millisecondes, C'est correct. Et voyons voir. Cool. Je vais utiliser celui-ci pour recréer le précédent car j'ai vu qu'il y avait quelques incohérences, donne-moi un sac Nous prenons le vert du numéro sept. Je passe au design pour pouvoir en modifier la longueur. Et je pense qu'il vaudrait mieux le rendre plus dynamique. C'est ce que j'ai vu. Mais redisons-le encore une fois. Ouais Nous devons attendre encore un peu pour le rose. Je ne sais pas pourquoi. Donc, celui-ci est pour le rose. Oh, parce que ça n'est pas passé à 50 millisecondes et probablement pareil Parfois, cette modification groupée ne fonctionne pas très bien. C'est bon. Et voyons voir. Sympa. Cela peut être plus rapide dans l'ensemble. Peut-être pas 600, mais 400. Faisons-le pour les différents. Ouaip. Et voyons voir. Ouais C'est plus dynamique. C'est. Dans l'image suivante, la flèche a tourné. On peut aussi faire tourner le Ron, mais il y avait aussi d' autres bandes. Je recommande donc faire quelque chose comme ça, car si nous changeons le souci, je dois me rendre dans la zone. Pour le bas de page, nous aborderons le monde des astuces. Je voudrais donc le texte des conseils, collé de la même manière Pour effectuer cette transition en douceur entre les cadres. Nous ne pouvons pas faire d' animation intelligente cette fois, mais juste une connexion instantanée n'est donc pas une animation intelligente, mais instantanée ici, et cela peut être assez rapide Donc pas en cliquant, mais après un délai d' une milliseconde, nous avons copié celui-ci parce que nous voulions en faire un nouveau Donc, j'aime les pourboires, non ? Je suis juste en train de vérifier si oui, conseils seront dans le Oh, comme vous pouvez le voir, je n'ai pas réussi à couvrir le texte ici non plus. J'espère donc que nous pourrons ajouter le composant, le composant principal, afin que ces lettres soient un peu plus petites, par exemple, comme ceci. Et cela a-t-il changé quelque chose ? Et je pense que dans cette situation, je dirais les choses un peu, oui, parce que c' est la deuxième rangée. Je l'ai donc mis un peu par deux ou trois pixels. Quatre. Ouais Et maintenant c'est caché. Je dois également copier celui-ci une fois de plus et le coller ici afin que leurs positions soient les mêmes en le collant également et en ajoutant la connexion Donc, connecter. Et maintenant, je peux ajouter « désolé, smart animate Après un délai d'une milliseconde, voir. Sympa. Et après cela, je veux que cette flèche affiche les astuces. Un autre que j'ai besoin de connecter à Smart Animate après un délai d'une milliseconde Mais en fait, cela peut être plus rapide. Et cela aussi, parce que c'était trop long. D'accord. Et ce qui se passe, c'est que certains mots apparaissent, voyons voir. Cela peut être fait de telle manière que nous couvrons un mot, puis que nous modifiions la taille du rectangle dans lequel il recouvre le Créons maintenant les autres mots. Alors jetez un œil à ceci. Nous avons ce cadre. Mais nous devons dissimuler ces mots. J'ai donc copié le dirtungle mais je dois le mettre au premier plan. Copiez également un rose. Je dois copier celui-ci en bleu et le coller à nouveau. Si vous souhaitez en faire la première couche, sélectionnez simplement le cadre, puis collez-le. De même pour le rose sélectionnez le cadre, et le texte est. Et de l'orange aussi. Génial. Dans les prochaines étapes, nous allons modifier la hauteur de ce rectangle. Il diminuera donc presque à zéro. Pareil pour le rose, pareil pour l'orange, et nous l'avons obtenu. Génial. Nous pouvons donc maintenant le connecter en mode prototype, Check et Smart Animate. Peut-être aller un peu plus vite. Oh, j'ai oublié de le changer aussi. Après un certain temps, il en va de même pour celui-ci. Après un délai d'une milliseconde. Et avec celui-ci. Après un délai, une milliseconde. D'accord. Je suis très curieux de connaître cette animation. Alors voyons voir. Cool. Mais je pense que c'est trop rapide, non ? Cela devrait être un peu plus lent. Laissez-moi vérifier celui-ci. Alors peut-être que nous passerons à 600. Et nous serons meilleurs. Vous savez, le timing et l'animation sont très importants car tout dépend de l'expérience. Nous ne voulons pas nous blesser. D'accord. Il y a donc un problème ici, je vois. Je pense que c'est une question d'ici, nous avons Smart Animate. Et à mon avis, voyons si c'est bon. J'ajouterai un délai plus long. Si vous souhaitez vérifier quelque chose, vous pouvez ajouter un délai plus long. Et celui-ci est Smart Mate. Et celui-ci devrait aussi être intelligent, Mate. D'accord. Je vais donc vérifier ce qui se passe ici. Rejouons-y une fois de plus. Ça a l'air bien. Ça a l'air bien aussi. OK, nous avons donc eu un problème, je suppose, après ce cadre. T ou celui-ci. Parce que je ne suis pas sûr que ce cadre correspond. Nous avons des conseils ici en haut. Mais les pointes des dix images sont à un endroit différent. Tu dois faire très attention à ce sujet. Bien sûr, vous savez, il s'agit de rechercher les erreurs ou les points à améliorer. Donc oui, je pense que nous devons passer à l'instant. De plus, cette icône doit être la même. Et voyons si cela fonctionne. D'accord. Oui, c'est mieux. C'est définitivement mieux. Génial. Nous avons donc des conseils. Jetez un œil à ceci. Et la dernière étape de l'animation, la dernière étape que nous avons faite. Oh, en fait, c'est vérifier. D'accord. Je vais le corriger. Nous avons des antécédents différents, mais comme vous pouvez le constater, ils changeront immédiatement, et il y a une transition. Peut-être que je vais vous le montrer dans 2 secondes, disons. Il y a la bande ronde qui va du haut vers le bas. Faisons-le. 11. Créer une deuxième animation – partie 3: Nous devons copier ce cadre et en ajouter un nouveau, ce serait dommage. Faisons en sorte que ce cadre extérieur soit la bande bash qui figure sur le texte Il devrait également être autour de lui. Cool. Ça peut être plus long, et on l'a mis dans le cadre 14, ça ressemble à ça, j'appellerais la rayure Donc pour le moment, on peut la cacher. Mais dans l'image suivante, la meilleure bande descend jusqu'en bas. OK. Connectez. Juste pour vous montrer pourquoi j'ai ajouté cette meilleure bande telle sorte qu'elle soit masquée en haut, puis qu'elle apparaisse parce que nous voulons réutiliser l' animation intelligente ici Et entre ces images, parce que nous ne voulons pas, vous savez, ajouter cette bande bash à toutes les images auparavant, parce que nous voulons avoir les couches correspondantes afin que l' animation intelligente fonctionne correctement Je veux juste avoir une transition instantanée, sans qu'il soit nécessaire de faire correspondre les couches entre deux images. C'est bon. Après le délai, cela peut être l'un, à droite, puis le suivant , Smart Animate. On peut le rallonger un peu . Voyons voir. Oh. Ouais. Désolée. Oui, j'ai oublié d' ajouter entre les cadres, c'est après un délai, donc c'est bon. Après le délai, c'est bon. J'avais besoin de cliquer sur une couche, alors je me demande. Après un certain délai. Je ne sais pas pourquoi ce flux est apparu. Je viens de supprimer ce flux. Et pour moi, celui-ci devrait être plus long, alors ajoutons 2 secondes. Je vois. OK. OK. Je pense donc que c'est à cet endroit que nous avons After Delay. Tout devrait fonctionner ici. Je ne sais pas pourquoi je dois cliquer. C'est peut-être Bog ou quelque chose comme ça. J'espère que non. Ici, il n'y a aucun clic. Désolée. Nous devons donc changer après un délai d'une milliseconde Et il y a encore une chose que je voulais vérifier, mais laissez-moi la lancer une fois de plus. OK, ça a l'air cool. Nous voulions avoir le mot « eux ». C'est donc également une bonne pratique de créer des composants de ce mot afin d'avoir plus de flexibilité, car comme vous pouvez le constater, je voulais les modifier, et, comme ce n'est pas un composant, j'ai dû les modifier à trois endroits dans trois cadres. C'est bon. Alors maintenant, il ne nous reste plus qu'à copier ce dernier cadre et à changer de couleur, il suffit de changer la couleur de la bande. Il serait donc jaune. Oui, bash stripe, bash stripe, devient jaune, puis bleu Oups. Désolée. Je dois marquer la bande Bash. Ouais. Assurez-vous que vous avez sélectionné le bon cadre. Et d'ailleurs, je vois que c'est à cause des rondes, il faut l'étirer un peu. Je vais donc aussi l'étirer. La meilleure rayure. Ça devrait baisser et ça aussi, non ? Puis rose, je suppose. Et orange et vert. OK. OK. La dernière chose à faire est donc connecter le reste des images, de les animer intelligemment En fait, peu importe qu'il s'agisse d'une animation intelligente. Il peut être dissous parce que nous, vous savez, aucun objet ne bougera, n'est-ce pas ? Il ne s'agit pas de changer de lieu, mais de position. Il s'agit simplement de changer la couleur, donc il suffirait, vous savez, de passer d'une couleur à l'autre. Nous pouvons en laisser 600 après délai. Une milliseconde. Je ferais de même pour chacun d'entre eux. Après délai après délai. Et après un certain délai. Mais ça devrait être 600. Ouais. OK. Voyons ce que nous avons. OK, donc celui-ci devrait être certainement plus rapide car cela nous a pris certain temps après un certain temps, peut-être 200. OK, je pense qu' il y a encore un endroit. Nous devons changer cela pour eux car si nous cachons cette bande rose. Nous l'avons et maintenant nous avons DM et ça devrait aller. C'est pourquoi il est préférable d'avoir des composants, car dans de telles situations, toutes les modifications seront répliquées dans toutes les autres images C'est bon. Voyons donc l'animation. OK. Je pense qu'il y a encore un endroit. C'est la dernière image dont nous disposons. Nous les avons ici ou peut-être celui-là. Oui. Laissez agir une seconde. Sur cette image 15, cachons Bart et nous avons ceci. Nous devons donc le vérifier, le cacher et recommencer à prototyper. OK. Ça a l'air bien. Ouais. C'est cool, mais je pense qu'il faut attendre un peu. Nous avons 2 secondes ici, alors passons à 200 et maintenant tout ira bien. Oh, non, je pense que c'est trop rapide. C'est définitivement trop rapide. Alors peut-être 1 seconde. Et pour ce 600 600 instant 600. OK. La finale finale. Oui, je pense que ça devrait être plus rapide, en fait. Passons à 300 et ce serait parfait. OK. Et maintenant, encore une fois, nous pouvons créer l'enregistrement. Donc, ce qui est important ici, c'est que la première animation commence après, je ne sais pas. Disons 5 secondes ou 7 secondes. OK. Nous en avons donc 400 mais nous devons copier et modifier la connexion. Cela peut prendre quelques secondes de dissolution instantanée et j'ajoute un nouveau record d'enregistrement d' écran à Quick Time Player, et moi, c'était assez rapide, non ? Alors laisse-moi arrêter et vérifier. Oh, nous devons changer la position de départ du flux car il est parti de ce cadre, pas de celui-ci. Et faisons-le encore une fois. Enregistrer Eh bien, attendez un peu et il commencera à s'animer OK. Nous pouvons maintenant l'arrêter et le couper en un rien de temps. J'espère que vous avez également, comme un moyen simple de couper la vidéo sous Windows. C'est bon. OK, découpons et exportons le fichier. Et nous pouvons le montrer sur notre Instagram. Bien sûr, vous pouvez refaire cet exemple, faire quelque chose de différent, changer les couleurs, changer le texte C'est l'un de vos projets de classe, je serais donc heureuse de voir votre art. 12. Créer une troisième animation – partie 1: OK. C'est bon. Passons donc au troisième exercice. Nous allons à Figma. Mais avant, je vais vous demander de télécharger la fonte ZT Chins. Le lien devrait donc être dans le Figma que j'ai préparé pour vous. Et il y a aussi des vidéos à télécharger que nous allons utiliser dans l'exercice. Bien entendu, vous avez l'espace à utiliser pour les expériences. Et il est grand temps de vous montrer sur quoi nous allons travailler. Je commence donc l'animation. Allons-y. OK. Comme vous pouvez le constater, il s'agit de masquer la vidéo, ce qui nous donne de nouvelles opportunités et de nouvelles idées pour présenter notre travail ou pour présenter le travail de nos clients, tout ce que nous voulons faire sur les stories d'Insygram Examinons donc en profondeur ce qui se passe ici. Nous devons donc, comme toujours, créer un nouveau cadre, en cliquant sur le cadre, reprenant l'histoire d'Insygram, et nous prenons la couleur bleu ciel Nous avons également le titre ABC of Ceramics utilisant la police Zenz. ABC de la céramique Let's Essay Tins Font. Je veux qu'il soit fin et un peu plus grand. Je vais donc utiliser K pour la mise à l'échelle. Et je pense que nous devons changer la hauteur de la ligne pour peut-être celle-ci. Et j'ai aussi utilisé dans l'exemple quelques variantes de la police pour l'italique pour O, E et I et, je suppose Jouons donc un peu avec. Je vais accéder à mon fichier, donc je marque C et j'utilise un italique légèrement fin Peut-être F, voyons si ça a l'air sympa. Vous savez, juste pour jouer un peu avec la typographie également. Quelque chose comme ça. On peut l'agrandir un peu. Et je suppose que ce n' est peut-être pas super lisible, alors je vais passer à la lumière. Peut-être que tu ferais mieux. Peut-être R, ouais, ça a l'air sympa. OK, nous avons donc le titre, et ce qui se passe ici, c'est que nous ajoutons des vidéos. Je dois ajouter la vidéo. Laisse-moi aller dans le dossier contenant les vidéos, et j'ajoute la première. L'intro de la première C'est bon. Et par exemple, je l'ajoute ici. Si nous cliquons sur Prototypage, rien ne se passera car il n'y a pas d'autre écran. Faisons-en donc une autre juste pour le plaisir de nous connecter aux écrans. Et ce que vous verrez, c'est que nous avons le son de la vidéo, n'est-ce pas ? Et cela figure dans le prototype. C'est donc une bonne pratique. Bien sûr, selon ce que vous voulez faire pour désactiver la vidéo, vous pouvez le faire en activant cette icône C'est bon. La vidéo est donc coupée et nous devons créer le masque Notre masque est donc un rectangle. Avec les coins arrondis. Imaginons que c'est notre masque, que nous voulons arrondir les coins. Mon seul angle arrondi en haut et en bas restera un échantillon comme celui-ci. Ce sera notre masque. Comment faire, nous devons avoir une forme, puis cliquer puis cliquer sur l'utilisation comme masque. Actuellement, c'est un masque, mais la vidéo n'est pas masquée. Nous devons donc le prendre, le faire glisser et le placer après le masque dans son groupe. Maintenant, ça a l'air sympa. Laissez-moi vérifier à quoi cela ressemblait. OK, donc c'était plus épais. Le masque était plus grand pour que nous puissions l'étirer un peu. Mais nous devons également étirer la vidéo en cliquant sur Shift pour qu'elle puisse être masquée correctement. OK. Nous créons donc un autre cadre et nous modifions la taille du masque. Nous devons donc passer au rectangle. Il serait peut-être préférable de le renommer en masque. Nous essayons donc de maintenir l'ordre. Le masque va changer, il sera plus petit et les deux. Peut-être faisons-le et voyons le mode prototype, à quoi il ressemble. Bien sûr, animez intelligemment. Voyons voir. Sympa. Nous pouvons le rallonger un peu pour que vous puissiez voir la différence. Je clique. Et ce que j'ai beaucoup aimé dans cette technique, c'est que la vidéo est diffusée et que le masque s'anime, ce qui donne un effet vraiment intéressant OK. Créons maintenant le troisième cadre. Et nous allons changer le masque. Nous pouvons donc le réduire. De plus, nous pouvons également modifier la dynamique, le fonctionnement de l'animation intelligente, la dynamique de l'animation Et je suggère des modifications trop rapides. Passons donc à la suivante. Ce sera rapide, c'est vrai. Et vérifions-le. J'aime bien cet effet qui fait légèrement rebondir ce masque. Nous pouvons donc le remplacer par after after a delay. Après 100 mélisecondes. Voyons voir. Cool. L'étape suivante consiste à passer d'un rectangle aux coins arrondis à un véritable cercle. C'est donc vraiment cool qu' avoir un masque ne signifie pas toujours la même forme. Nous pouvons donc en ajouter 500 en haut et en bas. Cela deviendra donc un cercle. Et puis ce masque peut également changer de position, sorte qu'il puisse aller vers le haut et être un peu plus petit. Oh, en fait, il est devenu plus petit en bas. Mais il faut que ça reste comme ça. Nous verrons ce qui est le plus intéressant. Qu'est-ce qui semble mieux. Donc un prototype. Nous pouvons vivre en cliquant pour le moment et le modifier par la suite. Alors voyons voir. OK. Ici, c'est sûr. C'est rapide. Mais peut-être que je changerais de position. Je changerais la position de ce masque, par exemple, vers le haut, comme ça. Et ce serait plus petit, comme ça. Et puis on pourra rejouer avec la forme de ce masque. Nous pouvons créer quelque chose comme ça , puis l'agrandir des deux côtés. J'espère que c'est au centre. Ouais. Bon, maintenant nous devons le connecter et voir à quoi il ressemble. Cool. J'aime bien quand la vidéo zoome et que le masque change en même temps D'accord, nous pouvons donc le passer en mode After Delay. Par exemple, celui-ci peut se produire après 300 millisecondes. Après un délai 200. Ensuite, certains éléments de texte apparaissent. Créons-le donc rapidement. Je suis le cadre et je prends, par exemple, participer à des cours. Et changeons le texte par la police à saisir, peut-être que 50 ou 50 suffiront, mais je le changerais en minuscules. Et comme vous avez pu le constater, cela ressemblait à un petit bouton, un élément rond et arrondi. Nous pouvons donc l'encadrer par un clic droit. Sélection de la section du cadre. OK. Et nous pouvons ajouter une mise en page. Il définira donc dynamiquement la largeur et la hauteur de ce bouton. Si nous ajoutons du remplissage, vous verrez que, vous savez, la marge, la pagaie réelle à l'intérieur de ce cadre est de 100 pixels, mais nous voulons qu'elle ne soit pas trop grande, plutôt petite Et ici, j'en garderais 15, disons, en les arrondissant aux coins. Et je le passerais à 40. Participez à des cours. Je ne me souviens pas de la couleur. Désolée. J'ai oublié de les préparer ici. C'est donc un homme gris et gentil. Participez à des cours. Tous les mardis, maintenant, je change le texte. Je peux utiliser ce que tu veux. Et pour celui-ci, nous allons changer la couleur pour celui-ci. Et ça pourrait être gris. Je vais peut-être faire le ménage. OK. Et voyons voir. Revenons-en à l'original car je voulais vérifier quelle était l'idée derrière le texte. Alors, comment cela va-t-il apparaître ? D'accord, peu importe car le texte venait juste d'apparaître. Animation intelligente. Nous verrons ce qui va se passer. Vérifions-le. Euh, hein. 13. Créer une troisième animation – partie 2: Si vous voulez faire quelque chose de plus sophistiqué. Nous pouvons copier le texte. Il est déjà à l'intérieur du masque, nous pouvons donc également le coller sur ce masque et modifier sa position. Bien sûr, nous devons le faire glisser à nouveau dans le masque, donc il est là, non ? C'est dans ce masque. Et il correspond également à l'image suivante. Il y a donc un fait intéressant . Ouais. Ça me plaît. Et nous aussi, dans la version précédente, l'originale, j'ai ajouté une autre vidéo pour vous montrer que, vous savez, nous pouvons mixer les vidéos. Nous pouvons les modifier. J'en ajoute donc un autre. Et par exemple, je peux l' appliquer sur le masque et nous verrons ce qui va se passer. OK. Je peux voir cette vidéo. Ce n'est probablement pas connecté. OK. Donc encore une chose, nous devons le connecter, non ? Animation intelligente. Allons-y en un clic ou peut-être après un certain temps. OK. Voyons voir. Je vais juste en parler rapidement ici, juste pour voir la modification de ces deux cadres. OK. Ce n'est rien de spectaculaire, disons. Si vous voulez que ce soit plus intéressant, je mettrais la même vidéo ici, en changerais la position. Mais oui, c'est quelque chose que nous pouvons laisser ou. Nous pouvons copier ce cadre. Ajouté ici. Je veux dire, tout le masque. C'est pas mal, donc on peut jouer un peu. Nous pouvons également fabriquer ce masque. Entrer dans plus de zone, donc grossir. Mais attention à ce que votre vidéo soit coupée ici, il faut que sa position soit modifiée. Nous verrons à quoi cela ressemble dans le prototype. Ce n'est pas connecté. Oublie ça. Attends une seconde. Sympa. Ça me plaît. Je pense donc que nous pouvons faire masque encore plus grand qui puisse pousser comme ça, comme ça. Et la vidéo peut être diffusée comme ici. Voyons voir. Cool. Comme ça. Donc, à la fin, nous pourrons partir comme une courte taxe. Vous attend, quelque chose de petit qui ajoutera également une touche visuelle agréable. Nous pouvons faire en sorte que ce soit super rapide. Et changez après délai, remplacez toutes les sections précédentes par After Delay. OK. Oh, nous avons de très nombreux cadres, mais je pense que cela ne fait que du bruit. Après un délai. OK. Celui-ci est une question de retard, par exemple nous allons commencer le flux. Je le remplace par le tout premier cadre. OK. Cool. J'aime vraiment ça. J'espère qu'il vous plaira aussi. Donc, bien sûr, vous pouvez utiliser les vidéos de couverture si vous le souhaitez, mais les deux vidéos se trouvent dans le dossier de la boîte de dépôt. Alors maintenant, je l'enregistre rapidement, du moins pour mon cas. Et pour celui-ci, commençons au bout de 6 secondes. OK. Votre tâche consiste donc maintenant à créer la vidéo. Je peux rapidement vous aider avec une chose. Veuillez recopier le premier cadre. Nous avons donc une marge de temps une fois que nous commençons à enregistrer l'écran. Je dirais la moitié de la seconde et le prototype. Oui, je vais commencer par là. Aperçu. Je ne sais pas pourquoi l'aperçu vient d' échapper à mon prototype. Mais j'ai ajouté un nouveau point de départ pour le flux. Essayons donc de l'enregistrer. Je clique sur Quick Time, nouvel enregistrement d'écran. Le prototype, et il est en cours d'animation. Génial OK. Dans la dernière vidéo, j'ai oublié de désactiver le son. Permettez-moi donc de corriger cela. Peut-être que tu peux l'entendre parce que je change, je baisse le volume. Mais une fois que vous entrez dans le prototype et que vous cliquez sur la vidéo, vous verrez que le son est activé. Et vérifions également les images précédentes. Ouais. Seulement trois images, espérons-le. Pas beaucoup de travail. OK. Et nous sommes prêts. L'animation devrait être prête. J'espère que vous avez aimé jouer avec le masquage et la vidéo. C'est une arme vraiment puissante. J'espère que vous ferez quelques expériences, en particulier avec cette approche des techniques, et je veux les voir toutes dans le projet de classe. 14. Bonus – Un autre type d’animation: J'ai également préparé une vidéo bonus, un type d'animation bonus. Voyons donc de quoi il s'agit. Permettez-moi de passer au prototype et de jouer. Je peux réellement créer le point de départ. Vous pouvez donc le voir, et c'est parfois la charge. Et comme vous le voyez, nous avons la vidéo masquée et aussi une autre vidéo, et voici l'enregistrement d'écran à partir de la note sur mon Mac Et j'écris quelque chose, je tape quelque chose. Et je trouve que ça a l'air vraiment cool. Et j'ai vu des stories Instagram et ce type d'animations. Je pense donc que cela attire l'attention des gens parce qu'ils veulent voir ce que vous allez transmettre. Quel est ton message ? Alors, comment le faire. Eh bien, ce n'est pas si difficile. En fait, nous pouvons regarder ce qui se passe dans ce cadre. Nous avons donc différents cadres comme des autocollants, non ? Désirez donc les autocollants créés dans un autre cadre. Donc, tu sais, j'y ai juste ajouté quelques couleurs. Si nous entrons à l'intérieur, vous verrez que nous avons le texte, et chaque cadre a un remplissage différent, couleur de fond différente, et il est également arrondi. Nous avons donc certains autocollants. Et aussi un autre avec le sourire. Mais je pense que les deux éléments sont les plus intéressants. Donc le groupe qui est masqué. Nous avons donc un rectangle aux coins arrondis et à l'intérieur, nous avons quelques groupes. En fait, il n'est pas nécessaire que ce soit un groupe, peu importe. Ce n'est qu'une pure vidéo. Alors peut-être désolée. Je vais retirer cette vidéo de ce groupe pour qu'elle soit plus claire. Et comme vous le voyez, je peux manipuler avec cette vidéo, je peux la réduire. Je peux changer sa position. Une fois que vous passez en mode prototype, une fois que vous avez lancé l'animation, vous verrez que la vidéo est en cours de lecture. Et il en va de même cette note, cette animation de saisie. Nous avons un rectangle arrondi, car je vais vous montrer que, vous savez, nous pouvons facilement en changer la forme. C'est donc arrondi, et nous avons la vidéo que j'ai enregistrée avec QuickTime sur mon Mac Si vous voulez le recréer, vous savez, passez simplement à votre application de notes préférée sur Mac, j'utilise QuickTime Et en choisissant le nouvel enregistrement d' écran. Bien sûr, nous pouvons en modifier la taille comme ceci. Je peux changer de position, cliquer sur Enregistrer et accéder aux notes, et je peux commencer à taper. Ma journée a été terrible. Permettez-moi de partager mon histoire avec vous. Peu importe. Ensuite, nous enregistrons simplement cette vidéo. OK, je suis prêt à enregistrer la vidéo, à l'exporter. Cette résolution devrait être bonne. Ajoutons-le au bonus. Je vais l'appeler dactylographie. C'est bon. Il est donc en train d'être sauvegardé. Et je peux rapidement ajouter le nouveau cadre. Donc dans l'histoire, je peux ajouter un arrière-plan, je peux créer un rectangle. Essayons avec différentes couleurs pour qu'il soit plus reconnaissable, peut-être plus grand. OK, je suis donc prêt à ajouter ma vidéo. Il est également déjà taillé. Je n'ai donc enregistré que cette écriture et ces notes. Je fais donc simplement glisser-déposer la vidéo, et nous voulons la conserver dans ce masque J'utilise donc cette fonctionnalité comme masque. Vous pouvez également utiliser les raccourcis et ma vidéo est un masque, ce qui est génial. Je peux modifier un peu la taille. Pour l'adapter à la taille du masque. Ou je peux aussi faire une autre opération. Je peux me débarrasser du masque. Je peux donc simplement récupérer la vidéo, retirer le masque et modifier le remplissage de couleur de l'arrière-plan pour qu'il corresponde au fond de la vidéo. Nous avons donc cet effet de visibilité de toute la fenêtre. Mais il y a une ombre provenant d'un autre objet, je suppose, et du viseur. Donc, je pense qu'il serait préférable d'ajouter une sorte de masque Grâce à cela, nous allons réduire un peu l'ombre. C'est donc un masque et un t-shirt. Ça a l'air mieux. Voici donc l'ensemble de notre cadre. Et vous pouvez en ajouter un autre, par exemple arrondi à un masque. Nous devons donc le prendre du groupe de masquage existant, et peut-être que je vais le regrouper et le placer sous cette ellipse Et à cette ellipse, je peux ajouter une autre vidéo me présentant, par exemple Je l'ai déjà enregistré. Je traite donc cette ellipse comme un masque. Eh bien, cela semble étrange. Mais peut-être. Peut-être peut-être. Et je peux, bien sûr, modifier la taille de la vidéo, et je peux également changer la position du masque. Je peux marquer deux de ces couches, les regrouper et en mettre quelques-unes quelque part ici, en fonction de ce que vous voulez réaliser. Et voyons ce que nous avons. Je vais aller voir le prototype. Oui, celui-ci est en fait un peu plus grand. Je voulais donc vous montrer à quoi cela ressemble. Oui, c'est quelque chose d'intéressant, non ? Parce que vous voyez le visage d'une personne et que vous voyez un message. Donc, pour moi, cela attire l'attention de l'utilisateur. C'est quelque chose qui m'attire. Et je pense que sur les stories Instagram, ce type de contenu, ce type d'animation peuvent être utiles. Et bien sûr, vous pouvez ajouter, par exemple, j'utilise les autocollants ici. ai donc simplement copiés-collés pour les ajouter comme quelque chose de plus coloré Mais la seule chose que vous devez savoir, c'est que nous faisons actuellement partie du groupe de masquage Nous voulons donc le reprendre, l'intégrer dans notre hiérarchie de couches Et encore une fois, nous pouvons voir qu'il faut peut-être créer le point de départ le plus bas. Nous n'avons aucune interaction ici. Mais ce que je voulais vous montrer en prime, c'est que vous pouvez également utiliser le prototype de l' appareil, le cadre de l'appareil, qui est vraiment joli. Donc, par exemple, P, d'accord, et ce serait quelque chose comme ça. Et ici, vous pouvez imaginer à quoi ressembleraient vos stories Instagram. Je vous recommande également vivement de vérifier paramètres de ce prototype car vous pouvez facilement jouer avec différents arrière-plans. Je veux dire, les différentes simulations de l'appareil, même la couleur de l'iPhone, qui ne sont que de très petits détails. Si vous voulez ajouter quelque chose de beau à votre portfolio ou présenter votre travail à la manière d'un mobile Vous pouvez également utiliser l' option pour l'enregistrer, ce me permet de prendre rapidement du temps, et de l'ajuster pour que je puisse enregistrer toute cette image avec un mobile comme celui-ci, et que je puisse commencer à enregistrer et nous aurons des animations comme ça. J'espère que ces cours vous plairont. J'espère que vous apprendrez quelque chose de nouveau et j'ai hâte de voir votre projet de classe. 15. Récap: Récapitulons donc rapidement ce que vous avez appris et ce que vous avez fait pendant les cours Tout d'abord, vous avez déjà les connaissances de base de l'interface FINMA Peut-être que vous ne savez pas exactement comment vous y prendre et où se trouvent toutes les fonctionnalités, mais avec mon exercice, vous serez en mesure de créer des stories Instagram La deuxième chose est que vous savez que Smart Animate une fonctionnalité Figma vraiment intéressante car elle vous aide à animer tout ce qui se passe Ainsi, par exemple, si nous avons une image A et une image libre B, tout ce qui se trouve entre les deux sera automatiquement effectué par Figma sur la base de la comparaison de ces deux images Nous savons donc tous que Smart Animate recherche les différences et les similitudes en termes de couches C'est pourquoi, tout au long du cours, je vous ai montré que, vous savez, l'ordre des couches est important et, vous savez, la duplication de certains éléments Passer d'une image à une autre est important. Et nous savons également comment créer des composants, ce qui est très important, surtout lorsque vous avez des animations plus complexes, alors n'ayez pas peur de cela. Et bien entendu, je vous invite vivement à consulter les autres cours de la FINMA Et si vous avez des demandes spéciales pour les prochains cours de ma part, faites-le moi savoir dans la section des commentaires, je serais très heureuse de toutes les consulter. Vous pouvez également me contacter sur Instagram à h5d awesome ou consulter mon compte Twitter, qui est Agana Ploha C'est Et j'espère vous y voir. Merci de votre participation, et je croise les doigts pour votre projet de classe. Pour rappel, votre projet de classe consiste à recréer l'une des animations que je vous présentais ou à créer quelque chose de totalement nouveau, basé sur les techniques que vous avez apprises avec moi Veuillez applaudir le travail que vous avez préparé dans la section des projets de classe Vous pouvez soit coller le lien vers la vidéo, soit intégrer la vidéo Si vous avez des questions, n'hésitez pas à me le faire savoir. Donc, dans un premier temps, trois personnes qui soumettront leur travail dans les sections des projets de classe auront une séance individuelle exclusive avec moi qui leur sera utile pendant une demi-heure. Donc, si vous souhaitez parler votre carrière ou peut-être des techniques Figma ou de différents sujets liés au codage ou au design, je serai heureuse de répondre à vos questions Alors n'oubliez pas, d'abord, libérez les gens, je vous attends, et j'espère que vous apprécierez le processus de création des animations.