Prototypage avancé et design d’interaction dans Figma pour les designers d’interface utilisateur/UX

1. Introduction: Si vous êtes un concepteur d'interface utilisateur et que vous souhaitez améliorer vos compétences en matière de conception d' interface utilisateur en maîtrisant le prototypage et la conception d' interactions, ce cours est fait pour vous. Bonjour, je m'appelle Arash et je suis designer UI UX. J'enseigne également le design UI UX à l'université d'économie et de sciences humaines de Varsovie. Ces dernières années, j'ai aidé plus de 40 000 étudiants du monde entier à devenir designers et à lancer leur carrière en design. J'ai réalisé que de nombreux designers juniors aiment les compétences en matière de prototypage et de design d' interaction. Qui sont essentiels pour tout projet de nos jours. C'est pourquoi j'ai créé ce cours pratique de conception spécialement pour vous aider à apprendre à prototyper et à concevoir des éléments interactifs dans Figma comme un pro. Nous commencerons par les bases du prototypage et l'animation, notamment ce que c' est et pourquoi c'est important, comment les animations sont créées dans Figma et les différents types d'animation d'interface utilisateur. Nous passerons ensuite à des sujets plus avancés et vous découvrirez les meilleures pratiques de prototypage dans Figma, comment créer des micro-interactions complexes et comment rendre les éléments de votre interface utilisateur interactifs. De plus, nous créerons des animations et des interactions avancées populaires inspirées des produits Apple. À la fin de ce cours, vous serez capable de créer plus de 20 types de micro-interactions et animations pour différents cas d'utilisation. Si vous êtes prêt à maîtriser prototypage et la conception d' interactions, je vous verrai en classe. 2. Structure du cours: [MUSIQUE] Bonjour, bienvenue à la première leçon de ce cours. Dans cette vidéo, je vais vous expliquer la structure du cours afin que vous sachiez à quoi vous attendre et comment en tirer le meilleur parti. Le cours est divisé en trois sections pratiques : base, intermédiaire et avancée. Nous commencerons par les bases du prototypage, comme ce que c' est et pourquoi c'est important, comment les animations sont créées, etc. Vous découvrirez les différents types de prototypage et nous commencerons à créer des prototypes de base dans Figma. Nous passerons ensuite au niveau intermédiaire où vous découvrirez les meilleures pratiques de prototypage en matière de conception UI/UX. À la fin de cette section, vous serez en mesure de créer différents types de prototypes, y compris des micro-interactions. Une fois que vous aurez appris les bases du prototypage, il sera temps de passer à la section avancée. Dans cette partie du cours, vous apprendrez à créer des prototypes complexes et des micro-interactions qui feront passer vos projets de conception de bons à incroyables. Si vous connaissez Figma et ses outils de prototypage, vous pouvez sauter la section de base et passer aux sections intermédiaire et avancée. Pour tirer le meilleur parti de ce cours, assurez-vous de mettre en pratique ce que vous apprenez dans les vidéos sinon vous ne pourrez pas maîtriser vos compétences en matière de prototypage. Je sais que pour certaines personnes, prototypage peut être un peu compliqué, mais il n'y a pas de quoi s'inquiéter, car vous pouvez toujours me contacter et je vous aiderai à le comprendre. Si vous êtes prêt, allons-y. 3. Qu'est-ce que le prototypage: [MUSIQUE] Avant de nous lancer dans la création de prototypes, il est essentiel de savoir ce que signifie réellement le prototypage. Le prototypage est un processus que les concepteurs d'UI UX utilisent pour tester rapidement des idées d'interfaces et d'expériences utilisateur. Cela leur permet de créer des maquettes ou des maquettes interactives afin de recueillir les commentaires des utilisateurs avant de se commentaires des utilisateurs avant de dans des travaux de développement coûteux, mais pourquoi s'embêter à prototyper ? Les tests de prototypes peuvent vous faire gagner du temps et l'argent en éliminant le temps de codage coûteux et le risque de lancer un produit ou une fonctionnalité dont personne ne veut. Cela permet également de présenter vos idées de manière interactive afin que vous puissiez obtenir commentaires précieux de la part des parties prenantes, clients potentiels et d'autres décideurs importants avant d'investir trop de temps et d'argent dans le développement. Quelle est la meilleure façon de procéder au prototypage ? En général, nous avons deux types de prototypage. Numéro 1, le prototypage sur papier. Il s'agit d'un moyen peu coûteux et rapide tester rapidement des idées, dessiner chaque écran de votre interface sur papier, puis de l'utiliser comme base pour les tests utilisateur. Il est idéal pour générer des commentaires dès le début du processus de conception, mais il n'est pas toujours assez réaliste lorsqu'il s'agit simuler des scénarios d'utilisation réels. Numéro 2, le prototypage numérique. Ce type de prototypage utilise des outils tels que Figma ou ProtoPie pour créer des maquettes numériques qui ressemblent véritables interfaces utilisateur. Ils sont beaucoup plus réalistes que les prototypes en papier. Ils permettent de tester plus facilement la convivialité et d'obtenir des informations de la part des utilisateurs. Dans ce cours, nous nous concentrerons sur le prototypage numérique car il est essentiel pour tout projet de conception UI UX. Dans la vidéo suivante, nous parlerons des différents types d' animation d'interface utilisateur. On se voit là-bas. 4. Types d'animation d'interface utilisateur: [MUSIQUE] Dans cette vidéo, nous allons parler de différents types d'animation d'interface utilisateur. agisse de l'animation sudiste que vous pouvez voir sur Instagram l'animation de défilement avancée vous pouvez voir sur le site Web d'Apple, animation joue un rôle important dans la conception de l'interface utilisateur, car elle permet non seulement d'attirer attention et de guider les utilisateurs à travers l'interface, mais elle contribue également à créer une expérience utilisateur plus mémorable et plus agréable. En général, nous avons quatre types d'animation d'interface utilisateur chargement et progression, changements d'état, navigation et micro-interactions. Commençons par le chargement et la progression. Ce type d'animation indique qu'un processus se déroule en arrière-plan et peut être un bon moyen de garder l'utilisateur engagé et conscient de ce qui se passe. Il peut être utilisé lorsque l' utilisateur attend une réponse du serveur ou lorsqu'il exécute une tâche longue. Passons maintenant à l'animation de changement d' état. Les éléments de l'interface utilisateur peuvent avoir plusieurs états, tels que survoler un bouton, appuyer, désactiver, etc. L'animation d'état indique quand un utilisateur effectue une action, comme survoler un bouton ou cliquer sur un bouton. Considérez ce bouton. Ce que vous voyez est l'état par défaut. Mais regardez ce qui se passe quand je le survole. Tu vois, c'est devenu plus clair. Nous avons donc eu ici une transition de l'état par défaut à l'état de survol. Ensuite, nous avons le type de navigation. L'animation de navigation est utilisée pour aider les utilisateurs à naviguer dans l'interface. Il sert de repère visuel et contribue à créer une expérience plus fluide lorsque vous naviguez dans les différentes sections d'une application ou d'un site Web. Jetons un coup d'œil à un exemple. Ici, nous avons l'App Store, et nous avons quelques cartes ici. Regardez ce qui se passe lorsque je tape sur une carte. Vous voyez, j'ai été redirigé vers la page détaillée, mais la transition s'est faite en douceur. Imaginez que nous n'ayons pas eu cette transition en douceur. Nous pourrions toujours trouver ce que nous cherchons, mais l'expérience ne serait pas très agréable. Enfin, nous avons les micro-interactions. L'animation de micro-interactions est utilisée pour indiquer un retour d'information à l' utilisateur pour certaines actions. Il peut s'agir d' une animation pulsée lorsque vous cliquez sur un bouton ou d'une animation de glissement lorsque vous essayez de supprimer un élément d'une liste. Pour vous donner un exemple, examinons ce bouton. Lorsque je clique dessus, sa forme change et nous voyons ce spinner de chargement, et enfin cette icône apparaît. Cette séquence d'animations est une animation de micro-interaction. Maintenant que vous avez une meilleure compréhension des différents types d'animation d'interface utilisateur, nous pouvons commencer à parler du processus de prototypage. Rendez-vous dans la vidéo suivante. 5. Les bases de prototypage dans Figma: Dans cette vidéo, nous allons commencer à parler du processus de prototypage dans Figma. Mais avant de créer notre tout premier prototype dans Figma, voyons comment les animations sont créées sur des ordinateurs. En quoi consiste essentiellement l'animation ? Eh bien, il s'agit d'une série d' images fixes affichées les unes après les autres en succession rapide qui nous emmène d'un point à un autre et nous donne l'illusion d'un mouvement. Pour obtenir cet effet d'animation, les ordinateurs utilisent ce que l' on appelle des images-clés, qui sont essentiellement des instantanés de différents moments ou états du processus d'animation. Dans le passé, les animateurs devaient dessiner manuellement chacune de ces images, ce qui prenait beaucoup de temps. Mais désormais, les images-clés peuvent être créées rapidement et facilement dans le logiciel de conception. De nombreux animateurs dessinent toujours chaque image de l'animation, et c'est ce que l'on appelle la technique stop-motion. Permettez-moi de vous donner un exemple. Supposons que nous voulions déplacer cette voiture d' un point A à un point B en deux secondes. La seule chose à faire est de créer deux images-clés pour indiquer le point de départ et le point d'arrivée. Toutes les images-clés intermédiaires seront générées automatiquement. C'est aussi simple que cela. J'aime l'appeler le concept de voyage. Mais pourquoi parle-t-on de tout cela ? Parce que le même concept peut être appliqué lors de la création de prototypes dans Figma. Jetons un coup d'œil à ces deux écrans. Ce que nous voulons réaliser, c'est rendre ce bouton interactif afin que lorsque je clique dessus, je sois redirigé vers la page suivante. Utilisons le concept de voyage ici. De quoi avons-nous besoin ? Nous avons besoin du point de départ, qui se trouve être l'écran gauche. Nous avons également besoin du point final ou de la destination, qui est le bon écran. Enfin, nous devons préciser la durée de cette transition et c'est terminé. Maintenant, lorsque je clique sur ce bouton, je suis immédiatement redirigé vers le point final. Il s'agit de la forme d'animation la plus simple. Si vous comprenez vraiment ce concept de voyage, je vous assure que vous pouvez créer facilement des prototypes complexes. Créons maintenant un nouveau fichier de conception dans Figma et voyons comment créer un prototype simple. Comme l'objectif principal de ce cours n'est pas de vous enseigner la conception de l'interface utilisateur, j'ai déjà préparé les fichiers de conception, afin que nous puissions nous concentrer uniquement sur le processus de prototypage. Pour poursuivre le cours, vous devez télécharger le projet que j'ai préparé pour vous et l'importer dans Figma. Pour cela, il vous suffit de faire glisser ce fichier et de le déposer dans votre tableau de bord Figma. Maintenant, ouvrons-le et voyons ce que nous avons ici. Pour chaque leçon, il y a une page ici, et à l'intérieur de chaque page, vous pouvez trouver les ressources requises pour cette leçon. Dans ce fichier de projet, si vous vous rendez dans la section Pages et que vous ouvrez cette page, les bases du prototypage dans Figma, vous pouvez trouver ces cadres dans cette page que j'ai déjà préparée pour vous. Ici, en bas, nous avons un autre cadre. Mais en gros, nous allons utiliser ces cadres pour créer un prototype simple. Une chose que vous devez garder à l'esprit lorsqu'il s'agit de créer des prototypes dans Figma, c'est que vous pouvez créer des prototypes en utilisant des cadres. Vous ne pouvez pas simplement connecter une forme simple à une autre forme dans Figma. Cela ne marchera pas, car c'est ainsi que Figma crée des prototypes. Chaque fois que vous souhaitez créer un prototype, vous devez vous assurer d'avoir un cadre. Comme vous pouvez le voir, j' ai un cadre de page d'accueil et cette icône dans la liste des couches indique qu' il s'agit d'un cadre et non d'un rectangle. Commençons par créer un prototype très simple, un prototype de navigation. C'est très populaire. Imaginez que vous concevez ce site Web et que vous avez ici quelques cartes, ici vous avez cette barre de navigation, et vous avez ces liens, et vous voulez relier ces pages entre elles. Dans ce cas, vous pouvez créer un prototype de navigation, et c'est très simple. La seule chose que vous devez faire est d'utiliser le concept de voyage. Vous devez connaître votre point de départ et destination et créer une connexion entre ces deux points. Ici, nous avons ce bouton Contactez-nous, directement dans la barre de navigation. La façon dont il devrait se comporter est la suivante. Lorsque je clique dessus, je suis redirigé vers cette page Contactez-nous. Créons cette interaction simple. abord, nous devons sélectionner ce bouton comme déclencheur, car la plupart des interactions ont besoin d'un déclencheur. Il y a quelques exceptions dont nous parlerons dans les prochaines vidéos, mais la plupart du temps, nous avons besoin d'un déclencheur. Dans ce cas, ce bouton Contactez-nous sera actionnable. Ce sera notre déclencheur. Je vais le sélectionner ici. Ensuite, je vais passer à l'onglet Prototype juste ici. Dès que vous accédez à l'onglet Prototype, si vous passez la souris sur la limite de cet élément, vous voyez cette icône plus apparaître. Cette icône plus vous permet de créer une connexion entre le point de départ et la destination. Maintenant, je vais dézoomer. Notre point de départ ici est ce cadre de page d'accueil. Nous n'avons rien à changer et notre destination sera cette page Contactez-nous. Lorsque ce bouton est sélectionné, je vais le survoler. Je vais cliquer sur cette icône plus et la faire glisser comme ça. Dès que vous faites cela, cette flèche apparaît et vous permet de connecter ces deux cadres ensemble. Maintenant, si je passe la souris sur ce cadre, comme vous pouvez le voir, ils sont connectés comme ça. Dès que je l'y dépose, cette fenêtre de détails de l'interaction apparaît. Je vais le fermer pour le moment. Nous y reviendrons dans quelques minutes. Nous venons de créer une interaction très simple. Comme vous pouvez le voir maintenant, juste à côté du nom de ce cadre, nous avons cette boîte et à l'intérieur, nous avons le flux 1. Nous avons créé un flux, mais qu'est-ce qu'un flux ? Imaginez que vous avez un design complet, qu'il s'agisse d'un site Web ou d'une application, et que vous souhaitez connecter toutes les pages entre elles. En général, nous créons différents flux dans notre prototype afin de pouvoir jouer un flux spécifique chaque fois que nous en avons besoin. Un flux est essentiellement un réseau de trames connectées entre elles. Imaginez que vous avez conçu une application et que vous souhaitez prototyper le processus de connexion et d'enregistrement. Vous souhaitez prototyper l'ensemble du parcours utilisateur pour ce flux particulier. Dans ce cas, vous créez un flux pour créer un compte pour vous connecter, pour vous déconnecter. Pour une autre partie de cette application, vous pouvez créer un autre flux, par exemple, lorsque l'utilisateur clique sur un produit et qu'il doit être redirigé vers la page détaillée de ce produit. Il pourrait s'agir d'un flux totalement différent. C'est dans ce prototype, mais vous avez des flux différents. Si vous souhaitez simplement prévisualiser un flux spécifique, vous n'avez pas besoin de partir du point de départ de votre prototype et de parcourir toutes les pages. C'est pourquoi nous avons ces flux. Maintenant, je vais appuyer sur ce bouton Play, et nous serons redirigés vers la page d'aperçu. Maintenant, si je passe la souris sur ce bouton, comme vous pouvez le voir, mon curseur se transforme en cette icône de pointeur, qui signifie que cet élément est désormais actionnable. C'est interactif. Voilà, je vais cliquer dessus. Nous y voilà. J'ai été redirigé vers la page Contactez-nous. Il s'agit de la forme de prototype la plus simple de Figma. Nous venons de créer ce lien entre ces deux pages. Mais que se passerait-il si nous voulions passer au niveau supérieur ? Et si nous voulions l'animer ? Parce que pour le moment, il n'y a aucune animation ici. Écoutez, comme vous pouvez le constater, dès que je clique dessus, je suis redirigé instantanément vers cette page Contactez-nous. Pour ce faire, nous devons ajuster les préférences de notre interaction. Ici, nous avons créé cette interaction et il est maintenant temps d' ajuster les préférences. Pour cela, il vous suffit de sélectionner ce bouton, ce bouton Contactez-nous. Très bien, assurez-vous qu'il est sélectionné dans la liste des couches. Ici, sur le côté droit, comme vous pouvez le voir, nous avons cette section d'interaction. Juste en dessous, nous avons cette interaction par clic que nous venons de créer. Si je clique simplement dessus, cette fenêtre de détails de l'interaction apparaît. Sinon, vous pouvez simplement cliquer sur cette flèche pour faire apparaître cette fenêtre. Cela dépend entièrement de vous. Voyons ce que nous avons ici. Tout en haut, nous avons ce menu déroulant qui nous permet de spécifier le type de déclencheur que nous recherchons. Nous avons différents types de déclencheurs. Nous avons un clic, glissement, un survol, une manette de jeu, une souris, une entrée, une sortie de la souris, etc. Ici, nous avons ce déclencheur après délai qui n'est pas activé par défaut. Nous en reparlerons dans les prochaines vidéos. Ne t'inquiètes pas. Pour cette interaction, nous avons besoin de ce déclencheur en un clic, car nous voulons nous assurer que ce bouton est cliquable. Nous ne voulons pas régler le déclencheur Pendant le survol, car si je le règle sur Pendant le survol, dès que je survole ce bouton, je suis redirigé vers la page Contactez-nous, ce n'est pas ce que je veux. Le déclencheur est On Click. Nous avons ici le type de transition. Comme vous pouvez le voir, il est indiqué Naviguer vers, nous avons à nouveau différents types de transitions. La plupart du temps, nous devons le régler sur Naviguer vers, car nous voulons être redirigés vers la destination depuis le point de départ et, comme vous pouvez le voir, la destination est spécifiée sur la page Contactez-nous. Vous pouvez l'ajuster si vous le souhaitez, mais comme nous avons connecté ce bouton à cette page Contactez-nous, nous avons ici Contactez-nous. Jusqu'ici, tout va bien. Ici, en bas, nous avons cette section d'animation, qui est très importante. Cette section vous permet d' ajuster le type d'animation que vous recherchez. Ici, par défaut, il est défini sur Instant. C'est pourquoi, lorsque j'ai cliqué sur ce bouton Contactez-nous, j'ai été redirigé instantanément vers cette page, car le type d'animation ici est défini sur instantané. Si je l'ouvre, vous pouvez voir que nous avons différents types d'animation. Nous avons dissous, nous avons une animation intelligente, nous déplaçons, nous déplaçons vers l'extérieur, poussons, nous glissons vers l'intérieur et vers l'extérieur. Eh bien, changeons-le pour le dissoudre pendant une seconde. Dès que je fais cela, ces deux options apparaissent. Nous avons ici la méthode d'accélération ou la vélocité de notre animation. Nous allons en parler dans quelques minutes. Pour l'instant, je ne vais pas le modifier, et voici la durée. Lorsqu'il s'agit de créer des micro-interactions, l'unité est généralement de millisecondes Nous avons donc ici 300 millisecondes. Si vous le souhaitez, vous pouvez l'augmenter ou le diminuer. Si je veux que cette transition se produise en une seconde exactement, je dois augmenter cette valeur à 1 000 millisecondes, juste comme ça. Maintenant, si je rejoue ce flow, regardez ce qui se passe. Je vais cliquer sur ce bouton Contactez-nous et c'est parti. Nous voyons maintenant cette animation de dissolution, qui s'est produite en une seconde exactement. La durée de cette transition était d'une seconde. En fonction de la rapidité ou de la lenteur de votre animation, vous pouvez ajuster cette valeur ici. Changeons maintenant le type d' animation ici pour passer à autre chose. Dès que je le fais, comme vous pouvez le voir, nous avons ces flèches. Cela vous permet de spécifier la direction de cette animation. Dans cette fenêtre, vous pouvez prévisualiser votre animation. Comme vous pouvez le voir, cela montre que B se déplace dans l'écran A de droite à gauche. Vous pouvez le régler sur, de gauche à droite, de haut en bas et de bas en haut. Je vais le laisser tel quel, et maintenant, si je clique simplement sur ce bouton Contactez-nous, regardez ce qui se passe. Nous y voilà. Cette deuxième page passe à la première page. Nous pouvons également le configurer pour qu'il se déplace, pousse, glisse et glisse vers l'extérieur, mais ce n'est pas si important. Vous pouvez les essayer. Créons maintenant une autre interaction simple. Comme vous pouvez le voir, nous avons cette page de projet, et ici, sur la page d'accueil, nous avons ces projets récents. Imaginez que vous vouliez rendre cette carte, ce projet, une carte interactive. Pour ce faire, comme vous le savez, vous suffit de sélectionner ce groupe, Projet 1, et pendant que vous êtes dans l'onglet Prototype, vous devez simplement créer une interaction simple et connecter à la page de votre projet, comme ceci. Ici encore, vous devez spécifier le déclencheur. Je vais le configurer pour qu'il se déclique. C'est très bien. Le type va être instance. Je ne vais pas l'animer maintenant. Ici, si je clique simplement sur cette carte maintenant, comme vous pouvez le voir, c'est une carte interactive. Jusqu'à présent, vous avez appris à créer une connexion simple entre deux cadres différents. Nous allons maintenant parler d' une autre fonctionnalité de Figma , à savoir cette option d'animation intelligente. C'est très puissant. Il vous permet de créer des micro-interactions complexes en quelques secondes. Allons-y et voyons comment cela fonctionne. Eh bien, je vais faire défiler la page vers le bas, et comme vous pouvez le voir, j'ai déjà préparé ce cadre. À l'intérieur, nous avons ce cercle, et nous avons également deux couches de texte, A et B. Rien d'extraordinaire ici. Eh bien, voyons ce que nous devons accomplir. Imaginez que vous vouliez déplacer ce cercle d'un point A à un point B. Comment devons-nous procéder ? Eh bien, pensez simplement au concept de voyage dont nous avons parlé tout à l'heure. Pour toute animation, vous devez avoir le point de départ et le point d'arrivée, et enfin, vous devez les connecter et spécifier la durée, ou disons la vitesse de votre animation. Eh bien, nous avons ici notre point de départ. Ce cercle est placé juste ici, au point A. Maintenant, nous avons besoin de la destination. Pour cela, je vais sélectionner ce cadre, ce cadre animé intelligent et je vais le dupliquer. Appuyez sur Control D ou Command D. Ici, nous avons deux images identiques, maintenant. Maintenant, sur cette deuxième image de cette image dupliquée, je vais sélectionner ce cercle et le déplacer vers le point B. Maintenez la touche Shift enfoncée et déplacez-le vers la droite, comme ceci. Nous avons maintenant notre point de départ et notre destination, notre point d'arrivée, et la prochaine chose à faire est de simplement connecter ces deux cadres ensemble. Mais quel devrait être le déclencheur de cette animation ? Pour l'instant, je vais sélectionner ce cercle comme déclencheur. Une fois que j'ai cliqué dessus, il devrait être déplacé vers le point B. Maintenant, je vais le sélectionner et je vais accéder à l'onglet Prototype et connecter ces deux cadres ensemble. Pour le comprendre facilement, je vais sélectionner ce cadre ici, et juste dans la liste des couches, je vais le renommer A comme point de départ et celui-ci s'appellera B. Nous avons créé cette interaction. Le déclencheur est le déclic, c'est bien, mais le type d'animation est réglé sur Instant. Je vais le changer en Smart Animate. Cette animation intelligente fonctionne comme si elle prenait votre point de départ et votre destination et créait automatiquement les images clés intermédiaires. Vous n'avez pas à vous soucier de ce qui se passe entre les deux. Tu dois juste dire à Figma que ce sera notre point de départ et ce sera ma destination. Amenez simplement ce cercle à ce point en une seconde, par exemple ou moins. Ici, je ne vais pas modifier la durée, c'est bon. Nous avons maintenant le deuxième flux. Je vais appuyer sur Play, et voyons comment cela fonctionne. Comme vous pouvez le voir ici, vous disposez d'une liste de flux, ce qui vous permet de passer facilement d'un flux à l'autre si vous le souhaitez. Ici, si je clique sur ce cercle, regardez ce qui se passe ? Et voilà, il est passé d' un point A à un point B. Il fonctionne parfaitement. Maintenant, imaginez que vous souhaitiez accélérer cette animation. Pour cela, il vous suffit de sélectionner votre interaction et d' ajuster cette durée ici. Je vais réduire ce montant à 500 millisecondes. Essayons-le. Nous y voilà. C'est beaucoup plus rapide maintenant. Il y a un point important que vous devez garder à l'esprit à propos de cette fonctionnalité d'animation intelligente. Eh bien, lorsque vous utilisez Smart Animate, le nom de vos couches est important. Voici pourquoi, sur ce cadre A, comme vous pouvez le voir, nous avons le cercle, nous avons ces deux couches de textes. Sur cette deuxième page, nous avons également les cercles A et B. C'est pourquoi l'animation fonctionne correctement. Si je change le nom de ce cercle sur ce deuxième écran, sur ce cadre B, en quelque chose d'autre, changeons-le en, disons Circle 2. Maintenant, nous venons de rompre le lien entre ces deux éléments. Figma pense maintenant que ces deux cercles sont deux cercles distincts, et ce n'est pas ce que nous voulons. Regardez ce qui se passe si je joue cette animation maintenant. Je vais cliquer dessus. Vous voyez, nous n'avons plus cette animation parce que nous venons de rompre la connexion entre ces deux écrans. Vous devez garder ce point à l'esprit. Beaucoup de gens commettent cette erreur. Ils créent leur point de départ, ils créent leur point d'arrivée et ils connectent tout correctement, mais l'animation ne fonctionne pas. C'est parce qu'ils n'ont pas les mêmes noms de couches sur ces deux écrans. Gardez ce point à l'esprit, c'est très important. Maintenant que vous avez appris comment fonctionne Smart Animate. Parlons de la méthode d'assouplissement, ici, de cette option que nous avons ignorée. Si j'ouvre ce menu déroulant, comme vous pouvez le constater, nous avons de nombreuses options différentes et celles-ci sont très importantes, en particulier lorsque vous souhaitez créer une micro-interaction réaliste. Mais pourquoi sont-ils si importants ? Eh bien, par défaut, il y a de fortes chances cette option linéaire soit sélectionnée pour vous. Eh bien, ces méthodes d'accélération définissent l'accélération de votre animation, mais qu'est-ce que cela signifie ? C'est tellement confus. Laisse-moi t'expliquer. Ici, si je le mets sur linéaire et que je joue maintenant, maintenant je vais cliquer sur ce cercle. Nous avons oublié de changer le nom ici, alors laissez-moi supprimer ces deux noms ici, juste comme ça, et je vais cliquer à nouveau dessus. Nous y voilà. Je ne sais pas si vous l'avez remarqué ou non, mais nous avions maintenant un mouvement linéaire. Qu'est-ce que cela signifie ? Cela signifie que la vitesse de cette animation est constante et qu'elle n'est pas réaliste car les objets ne se déplacent pas à une vitesse constante. C'est pourquoi nous avons toutes ces autres options. Si je sélectionne simplement cette interaction, nous avons ici la facilité d'entrée, sortie, d'entrée et de sortie, etc. Ici, nous avons un ressort doux, rapide, rebondissant, lent et personnalisé. Ces différentes méthodes d'assouplissement nous permettent de rendre notre animation beaucoup plus réaliste. Si je change cette méthode d'accélération en mode facile maintenant, la façon dont cette animation se déroule est la suivante elle commence par une vitesse plus faible, puis l'approche de la destination, elle s'accélère. Juste comme ça, vous voyez, c'est beaucoup plus réaliste, n'est-ce pas ? Si vous changez la méthode d'assouplissement de l'entrée à la méthode d'assouplissement, vous obtiendrez le contraire. Ça démarre vite , puis ça ralentit. Essayons-le. Nous y voilà. Évidemment, vous pouvez commencer et vérifier chacune d'entre elles en fonction du cas d'utilisation Vous pouvez modifier cette méthode d'assouplissement en fonction de votre choix. Dans les prochaines vidéos, je vais en utiliser quelques-unes pour vous montrer comment les utiliser correctement et rendre vos micro-interactions plus réalistes. Mais si vous souhaitez obtenir la définition de chacune de ces méthodes d'assouplissement, vous pouvez vous rendre sur le site Web de Figma. Ici, ils ont un article de blog et ils ont expliqué chacune de ces méthodes d'assouplissement. Comme vous pouvez le voir, nous avons ce mouvement linéaire. Nous sommes à l'aise, comme ça. Ensuite, il y a la facilité et ainsi de suite. Vous pouvez consulter cette page, si vous le souhaitez. Je vais mettre le lien dans la section des ressources à titre de référence, et tout tourne autour des animations intelligentes. Dans les prochaines vidéos, vous apprendrez à utiliser correctement cette animation intelligente pour créer des animations complexes. Je te verrai dans la prochaine vidéo. 6. Bouton animé comme bouton: [MUSIQUE] Bon retour. Dans cette vidéo, nous allons créer ce bouton Like animé dans Figma. C'est ce que nous allons réaliser. Je veux animer cette icône. Quand je clique dessus, cette animation se joue comme ça. Allons-y. Dans le fichier de projet, que vous avez déjà importé dans Figma, j'aimerais que vous trouviez cette page Animated Like Button. À l'intérieur, vous pouvez trouver deux icônes différentes. Nous avons ici deux types d'icônes : une icône en forme de contour et une icône solide. Nous avons besoin de ces deux icônes pour cette animation. Pourquoi ? Parce que nous avons besoin de deux états différents. Allons-y et créons un cadre. Je vais appuyer sur la touche A mon clavier pour sélectionner l'outil de cadrage. Ici, je vais créer un cadre de taille personnalisée, quelque chose comme celui-ci devrait fonctionner. Permettez-moi de renommer ce cadre en A, comme point de départ. Je vais procéder à la duplication cette icône et la placer dans ce cadre. Assurez-vous qu' il est placé à l'intérieur votre cadre lorsque vous consultez votre liste de couches. Je vais continuer et l'aligner au centre dans la section d'alignement, comme ça. Ce sera notre point de départ. Maintenant, si vous pensez au concept de voyage dont nous avons parlé tout à l'heure, vous savez que nous avons également besoin d'une destination. Pour la destination, je vais sélectionner ce cadre. Je vais appuyer sur Control D ou Command D pour le dupliquer. Ici, dans la destination, nous avons besoin de cette icône solide. Je vais le dupliquer et l'apporter ici. Je vais m'assurer qu'il est placé juste au-dessus de cette icône de contour dans la liste des couches. Dans la liste de vos couches, vous devez avoir quelque chose comme ceci. Cœur solide, placé au-dessus du cœur délimité. Je vais nommer ce cadre B. Nous avons notre point de départ, nous avons également notre destination. Voilà le truc. Si je sélectionne cette icône et que je la rends interactive, nous n'obtiendrons pas cette animation comme celle-ci. Pourquoi ? Parce qu'ici, dans notre point de départ, nous n'avons pas cette icône solide. Nous n'avons que cette icône de contour. Je vais vous montrer comment cela fonctionne. Si je crée simplement cette icône de plan interactive, je vais la sélectionner Accédez à l'onglet Prototype ici. Je vais passer la souris au-dessus de cette limite et essayer de connecter ces deux cadres comme ça. Une fois que cette fenêtre de détails de l'interaction apparaîtra, je vais m'assurer que le déclencheur est réglé sur On click. Parce que je veux que cette icône soit cliquable. Ici, il est indiqué de naviguer vers. Nous avons ici notre cadre de destination B. C'est bon. Le type d'animation doit être Smart Animate. Mais voilà, si je me contente jouer ce flow, je regarde ce qui se passe. Permettez-moi de l'agrandir un peu. Je vais m' assurer qu'il remplit l'écran comme ça. Je vais cliquer dessus. Vous voyez que ça s'estompe. Parce que nous n'avons pas cette couche solide dans notre point de départ. Comment pouvons-nous résoudre ce problème ? Pour résoudre ce problème, nous devons d'abord saisir l'icône solide, la copier, appuyer sur Contrôle C. Je vais sélectionner ce cadre et le coller ici, appuyer sur Contrôle V ou Commande V. Mais nous ne voulons pas qu'il soit visible sur cette page. Que pouvons-nous faire ? Nous devons le faire disparaître d'une manière ou d'une autre. Si vous regardez cette animation ici, vous verrez que notre icône solide s'agrandit rapidement, puis nous verrons cet état. Je vais sélectionner cette icône solide ici. Je vais appuyer sur K sur mon clavier pour sélectionner l'outil de mise à l'échelle. Si je reviens à l'inspecteur de conception, vous verrez cette section d'échelle apparaître ici. Je vais régler l'échelle ici sur 0,01 pour m'assurer que cette icône solide n'est pas visible. Vous devez vous assurer que les noms de vos couches sont identiques sur les deux pages. Vous voyez, ici j'ai le cœur solide, ici aussi, j'ai le cœur solide. Cœur esquissé et cœur dessiné. C'est tellement important. Sinon, Figma ne peut pas le comprendre. Maintenant, vérifions-le et voyons comment cela fonctionne. Je vais cliquer dessus, jusqu'ici tout va bien. Notre icône solide s' agrandit comme ça. Mais ici, nous avons quelques problèmes. Tout d'abord, c'est tellement lent. Lorsqu'il s'agit de micro-interactions, la rapidité est importante. Sinon, au lieu de créer un bon élément interactif, vous allez créer une mauvaise expérience utilisateur car personne ne veut attendre que cette icône s'anime lentement. Ça devrait être rapide. Réglons d'abord la vitesse. Je vais sélectionner ceci, passer au prototype. Je vais cliquer sur mon interaction ici et me permettre de modifier la vitesse ici à 100 millisecondes au lieu de 300 millisecondes. Essayons-le encore une fois. Bien, beaucoup mieux. Mais si vous regardez cette icône que je vous ai déjà montrée, il y a une différence entre cette icône et celle que nous venons de créer. Si vous y prêtez suffisamment attention, vous pouvez voir que cette icône s'agrandit puis qu'elle diminue légèrement pour obtenir cet effet de rebond. Comment pouvons-nous créer cela ? Eh bien, pour créer cela, vous pouvez dire que nous pouvons procéder et modifier la vitesse ici. Au lieu de vous détendre. Vous pouvez dire que nous pouvons le régler sur Bouncy. Voyons si cela fonctionne. Vous voyez le problème. Nous obtenons notre effet de rebond. Cependant, comme vous pouvez le constater, cet effet de rebond se répète quelques fois rapidement. Ce n'est pas ce que nous voulons. Je ne veux pas que ça se répète plusieurs fois. C'est ce que je veux atteindre. Si je clique dessus, il augmente et diminue. Nous ne pouvons pas vraiment utiliser ces effets d'équilibre ici. Je vais le remettre en place pour me détendre. Voici ce que nous pouvons faire. Nous pourrions avoir une troisième page ici, un troisième état. Je vais sélectionner cette image B, dupliquer, appuyer sur Contrôle D ou Commande D, et je vais l'appeler C. Vous devez vous assurer qu'il n' y a aucun lien entre cette page et cette page C. Nous voulons passer d'un point A à un point B. Ensuite, dans le cadre B, je vais agrandir cette icône solide. Je vais sélectionner cette icône solide, appuyer sur K et l'agrandir ici, peut-être à 54, quelque chose comme ça. Ensuite, nous allons passer rapidement d'un point B à un point C. Nous cliquons dessus, notre icône solide s' agrandit et la dimension sera modifiée à 54 par 54. Ensuite, nous passons d'ici à ici, et la taille est réduite à 44 x 44 pixels, notre dimension initiale. Pour que cela se produise correctement, nous avons besoin d'un déclencheur après délai. Pour ce faire, je vais sélectionner tout ce cadre à l'intérieur de cette icône. Je vais passer au prototypage, puis connecter ces deux cadres ensemble comme ceci. Ici, par défaut, le déclencheur est réglé sur On click. Je vais le remplacer par Afterdelay. Cela devrait être Smart Animate et la durée sera de 100 millisecondes. Maintenant, cela devrait fonctionner correctement. Essayons-le. Je vais cliquer dessus. Ici, nous avons un problème. Le problème, c'est qu'après un certain délai. Nous devons le régler sur une milliseconde car nous voulons passer instantanément de cet état à cet état. Nous n'avons pas besoin de délai entre les deux. Essayons-le encore une fois. On y va, mais c'est encore trop lent, tu ne trouves pas ? Réglons ça. Je vais sélectionner cet élément de plan ici , accéder aux interactions, cliquer dessus. Nous avons ici 300 millisecondes. Je vais le réduire à 100 millisecondes. Voyons si cela fonctionne bien. Maintenant, cela fonctionne très bien. Mais je veux que ça fonctionne dans les deux sens. Lorsque je clique sur cette icône solide, je veux pouvoir revenir à mon point de départ. Je vais sélectionner ce solide et nous avons juste besoin de créer une connexion de C à A. Ce sera On click, Smart Animate et 100 millisecondes. Je pense que nous en avons terminé. Je vais cliquer dessus. Nous y voilà. Cela fonctionne très bien. C'est essentiellement ainsi que vous pouvez créer un bouton J'aime animé. Mais voici le truc. Nous avons rendu cette icône interactive. Mais comment réutiliser cet élément interactif ? Parce que si vous voulez utiliser cette approche, chaque fois que nous voulons utiliser cette icône, nous devons l' animer encore et encore chaque fois que nous voulons l' utiliser dans notre projet, ce qui est très fastidieux et fastidieux et cela n'a aucun sens. Nous devons plutôt trouver un moyen de le rendre interactif une seule fois et pouvoir réutiliser cet élément interactif plusieurs fois. Pour ce faire, nous devons utiliser ce que l' on appelle des composants interactifs. Si vous ne savez rien des composants, la variance et des composants interactifs, ne vous inquiétez pas. Dans la vidéo suivante, je vais vous montrer quelles sont les variantes et comment vous pouvez rendre vos composants interactifs. Je te verrai dans le prochain. 7. Variantes et composants interactifs: [MUSIQUE] Nous y voilà. J'ai créé un nouveau fichier de conception et je vais créer un bouton. Mais avant de créer notre bouton, je vais mentionner que nous avons en fait deux types de variance différents. Nous avons une variance unidimensionnelle et des variantes bidimensionnelles. Nous allons commencer par des exemples de variantes unidimensionnelles. Ensuite, au fur et à mesure que vous vous habituerez aux variantes, nous parlerons également des variantes les plus avancées et bidimensionnelles. Pour créer un bouton, vous pouvez avoir tendance à créer un rectangle, puis à y ajouter une étiquette et à lui donner un style. C'est très bien. Cependant, il existe un meilleur moyen de le faire, et c'est de créer un cadre. Tout d'abord, je vais appuyer sur la touche T de mon clavier pour sélectionner l'outil Texte. Je vais créer une couche de texte ici. Laisse-moi zoomer et je vais écrire le bouton. Permettez-moi de passer à la section de texte sur le côté droit. Ici, je vais régler le poids à probablement moyen et la taille à 17 points. Ici, je peux régler la taille à 100 pour cent pour le moment. Je vais modifier l'alignement pour l' aligner au milieu. Maintenant que notre étiquette est prête, je vais ajouter la mise en page automatique pour la rendre réactive. Pour ce faire, je vais appuyer sur Shift et A sur mon clavier. Dès que je le ferai, cette étiquette sera encadrée. Comme vous pouvez le voir ici, il s'agit de l'image 1 et ici, nous avons également cette image 1 dans la liste des couches. Eh bien, dans la section de mise en page automatique sur le côté droit, je vais modifier l' alignement au centre gauche. Ici aussi, nous pouvons ajuster le rembourrage horizontal, rembourrage vertical et également l' espacement entre les éléments. Eh bien, d'abord, permettez-moi d' ajouter un champ à ce cadre. Je vais ajouter un champ ici et me laisser ajuster la couleur à quelque chose comme le violet. Peut-être que quelque chose comme ça devrait fonctionner, bien. Ensuite, je vais changer la couleur des couches de texte ici. Je vais le régler en blanc pour avoir un meilleur contraste. Enfin, je vais sélectionner mon cadre et augmenter le rayon des coins pour le rendre un peu arrondi, probablement environ quatre pixels. Permettez-moi de renommer ce cadre en bouton. Parfait. Maintenant, allons-y et ajustons le rembourrage ici. Je vais régler le rembourrage vertical à 16 pixels et le rembourrage horizontal à 32 pixels. Notre bouton est prêt et il est totalement réactif. Je peux procéder à l' ajustement de l'étiquette. Cependant, je vais le garder tel quel pour le moment. Imaginez maintenant que vous souhaitez créer différents états de ce bouton et que vous souhaitez tout organiser. Pour ce faire, afin de pouvoir réutiliser ce bouton, nous devons d' abord le convertir en composant. Pour ce faire, nous devons le sélectionner et nous pouvons cliquer sur l'icône de ce composant ici, juste comme ça. Maintenant, comme vous pouvez le voir, le cadre, cette limite, est devenu violet. Vous pouvez voir ici, dans la liste des couches, que nous avons également cette icône à quatre losanges, indiquant qu'il s'agit désormais d'un composant et que vous pouvez facilement accéder à Assets et rechercher vos composants locaux. Nous pouvons réutiliser des instances de ce composant. Mais comment créer des variantes ? Eh bien, il existe de nombreuses façons de créer des variantes. Tout d'abord, vous pouvez créer différents composants, les nommer, puis les transformer tous en un ensemble de composants. Ou vous pouvez simplement sélectionner votre premier composant ici et cliquer sur ce bouton, Ajouter une variante, directement dans la barre d'outils. Laisse-moi le faire. Dès que j'ai cliqué sur ce bouton, vous pouvez voir que cet ensemble de composants a été créé. Nous avons ici cette limite en pointillés indiquant qu'il s' agit d'un ensemble de composants. Ici, dans la liste des couches, vous pouvez voir que le nom de notre ensemble de composants est button. À l'intérieur, nous avons deux variantes. Nous avons une valeur par défaut. Il s'agit de notre variante de base. De plus, nous avons la variante 2. Il a été dupliqué pour nous parce que nous avons cliqué sur ce bouton ici, Variant. Nous pouvons maintenant procéder à l'ajustement du style de cette deuxième variante. Mais avant cela, je vais vous expliquer comment fonctionnent les variantes. Eh bien, un ensemble de composants, si vous le sélectionnez simplement, a des propriétés différentes. Si vous regardez simplement le bon inspecteur, vous pouvez voir cette section Propriétés, et nous avons ici la Propriété 1. Si vous le souhaitez, vous pouvez le renommer, et nous allons le faire pour que tout reste organisé. Mais le fonctionnement de la variance consiste à créer différentes propriétés, puis à définir des valeurs différentes pour ces propriétés. Supposons que vous souhaitiez créer différents états pour ce bouton. Par défaut, survol, pression, désactivée, etc. Le nom de notre propriété sera State. Maintenant que mon ensemble de composants est sélectionné, je vais passer à ces propriétés ici. Nous avons déjà cette propriété 1. Figma l'a déjà créé pour nous. Je vais double-cliquer dessus et le renommer State. Le nom de la propriété est État. Si je clique simplement sur cette icône ici, Modifier la propriété, vous pouvez voir que le nom de cette propriété est state et que nous avons deux valeurs à l'intérieur, par défaut ici, la première et la variante 2. Une propriété peut avoir plusieurs valeurs, par exemple, default, hover, presser, désactiver, etc. Maintenant, comme vous pouvez le deviner, nous devons sélectionner notre deuxième variante. Ici, au lieu de la variante 2, je vais la renommer en Pressed, juste comme ça. Je vais procéder à l'ajustement de sa couleur. Je vais y ajouter une couche de superposition. L'opacité est fixée à 20 %. C'est très bien. Nous avons maintenant deux variantes différentes. Mais que faire si vous souhaitez en ajouter d'autres ? Eh bien, vous pouvez simplement sélectionner ces ensembles de composants et cliquer sur ce bouton plus ici. Vous pouvez également sélectionner l'une de ces variantes et appuyer sur Commande D ou Contrôle D sur votre clavier pour la dupliquer. C'est à vous de décider. Nous avons maintenant l'État 3. Vous voyez, je vais le sélectionner et ajuster sa valeur sur Hover. Alors laissez-moi procéder et modifier le champ ici. Je vais changer la couleur de cette couche de superposition en blanc. Ce sera notre état de survol. Je vais en créer un de plus. Je vais appuyer sur Control D pour dupliquer. Ici, cette fois, je vais créer une variance désactivée. Je vais le sélectionner. Permettez-moi de changer sa valeur en désactivé. Ensuite, je vais changer sa couleur en gris clair , quelque chose comme ça devrait fonctionner. Maintenant, si je sélectionne cet ensemble de composants et si je clique sur cette icône, vous pouvez voir que cet état de propriété a quatre valeurs différentes : default, pressé , survol et désactivé. Mais comment utiliser ces variantes ? C'est tellement simple. Tout comme si vous utilisiez un composant, vous pouvez simplement accéder à Assets. À partir de là, vous allez créer une instance de votre composant comme ça. Ici, nous avons notre bouton et sur le côté droit, vous pouvez voir que nous avons cette propriété d'état, et ici nous avons ce menu déroulant. Nous pouvons le changer en pressé, survolant ou en le désactivant. Pouvez-vous voir à quel point il est facile de créer des variantes dans Figma ? C'est génial. C'était un exemple de variantes unidimensionnelles. Mais comment créer des multidimensionnelles ou des variantes bidimensionnelles ? Je vais déplacer ces composants vers la gauche et les agrandir un peu. Imaginons maintenant que vous souhaitiez créer une nouvelle version de ces boutons. Cependant, cette fois, vous devrez peut-être y ajouter une icône. Voici ce que je vais faire. Je vais tous les sélectionner. Bien sûr, vous pouvez le faire un par un, mais je préfère les sélectionner tous. Ensuite, je vais les dupliquer, appuyer sur Contrôle D ou Commande D, et les déplacer juste ici. Maintenant, nous avons besoin d'une icône. Vous pouvez utiliser l' icône de votre choix. Je vais lancer le plug-in Contents Real ici. Laisse-moi le faire rapidement. À l'aide de ce plug-in, je vais ajouter quelques icônes à mon projet. Passons au champ Icône. Je pense que cette icône a l'air bien. Je vais le glisser-déposer ici. Je vais glisser-déposer une autre icône pour notre prochain exemple. Laisse-moi juste chercher une bonne icône. Cherchons l'icône d'accueil, celle-ci, elle est très belle. Génial. Imaginons maintenant que vous souhaitiez ajouter une icône à ce bouton. Comme nous avons créé ce bouton en utilisant la mise en page automatique, nous pouvons facilement sélectionner ce cadre et nous pouvons simplement le faire glisser et le déposer dans notre bouton. Mais je vais d'abord le dupliquer parce que je vais avoir besoin ces icônes pour notre prochain exemple, puis je vais le faire glisser et le déposer ici. Dès que je fais cela, vous pouvez voir que la hauteur de mes boutons a également été ajustée. Ce n'est pas ce que je veux, je veux juste que ce bouton s' agrandisse horizontalement. Pour résoudre ce problème, nous devons sélectionner ce bouton et à partir de là, je vais changer l' option de redimensionnement vertical en hauteur fixe. Ainsi, lorsque j'ajoute composants ou des éléments à ce bouton, il ne s'agrandit qu'horizontalement, non verticalement, et c'est exactement ce dont j'ai besoin. Maintenant, si je le fais simplement glisser et déposer dans ce motif, comme vous pouvez le voir, la hauteur reste la même, et faisons de même pour ces boutons. Je vais tous les sélectionner, changer cette option en hauteur fixe. Maintenant, sélectionnons cette icône, changeons sa couleur en blanc Je vais également sélectionner ce bouton et définir cet espacement entre les éléments à huit pixels. Je peux sélectionner tous ces boutons et régler cette valeur sur huit. Maintenant, je vais sélectionner cette icône, copier, appuyer sur « Ctrl », « C » ou « Commande » « C ». Sélectionnez ce bouton, maintenez la touche « Shift » enfoncée et sélectionnez les deux. Appuyez ensuite sur « Ctrl », « V » ou « Commande », « V ». Cependant, nous devons ajuster leur position. Pendant qu'ils sont sélectionnés, je vais appuyer sur la touche flèche gauche de mon clavier pour les placer l'autre côté de mon étiquette et, comme vous pouvez le voir, mes boutons sont prêts. Cependant, nous n'en avons pas terminé. Nous devons créer une autre propriété pour cet ensemble de composants, car nous avons créé la propriété d'état. Nous devons maintenant créer une autre propriété pour les icônes. Comment pouvons-nous le faire ? Comme je l'ai déjà mentionné, pour créer une propriété, vous devez d'abord sélectionner votre ensemble de composants, puis ici, je vais cliquer sur ce bouton plus, et ici, il est question de créer une nouvelle variante de propriété. Je vais cliquer sur cette option « Variante » et cette fenêtre apparaît. Je vais le nommer avec une icône, puis pour la valeur, au lieu de le nommer par défaut ou quoi que ce soit d'autre, je vais le nommer vrai, puis créer cette propriété. Je vais vous expliquer dans une seconde ce que cela signifie. Maintenant que nous avons créé cette nouvelle propriété, nous devons sélectionner notre variance, ces boutons, et définir la valeur correcte pour cette nouvelle propriété. Ces quatre boutons n'ont aucune icône. Je vais maintenir la touche « Shift » enfoncée et les sélectionner toutes, et régler cette valeur avec la valeur de l'icône sur false. Pour ces boutons, ils sont déjà définis sur true, mais nous avons ici un autre problème. Comme vous pouvez le constater, dès que je sélectionne ce bouton pour la propriété d'état, la valeur est définie sur State8. Nous devons le régler par défaut. Sur celui-ci, nous devons le mettre en position pressée. Celui-ci, nous devons le mettre en survol et enfin, celui-ci doit être désactivé. Maintenant, laissez-moi vous montrer comment fonctionnent ces vraies fausses valeurs. C'est ce que l'on appelle des valeurs booléennes, et leur fonctionnement est le suivant. Si je sélectionne cette instance de ce bouton, vous pouvez maintenant voir que j' ai deux propriétés. J'ai l'état, je peux le régler par défaut. Maintenant, je l'ai avec la propriété d'icône, et ici, au lieu d'un menu déroulant , j'ai ce bouton. La raison pour laquelle j'ai ce bouton est que j'ai nommé la valeur true et false. Figma comprend automatiquement que vous pourriez avoir besoin d'un interrupteur pour ces valeurs vraies et fausses, ces valeurs booléennes C'est très utile car ici, je peux simplement l'activer et le désactiver comme ça, et cela fonctionne pour tous ces états. Tu vois ? C'est ainsi que vous pouvez créer une variance multidimensionnelle dans Figma. Permettez-moi maintenant de vous montrer un autre exemple. Supposons que vous souhaitiez créer un bouton radio. En fait, faisons-le ensemble. Je vais commencer par créer un cadre. Si j'appuie sur « A » de mon clavier, je peux sélectionner l'outil de cadrage. Je vais maintenir la touche l'outil de cadrage « Shift » enfoncée, cliquer avec le bouton gauche de la souris et faire glisser la souris pour créer un cadre. Je vais régler la taille du cadre à 16 x 16 pixels, comme ça, je vais zoomer, puis je vais l'arrondir complètement. Je vais augmenter la valeur du rayon d' angle et renommer en bouton radio. Maintenant, je vais y ajouter un trait et me permettre changer sa couleur en violet. Ce sera la variante non cochée. Je vais le dupliquer, le sélectionner, appuyer sur « Ctrl » « D » ou « Commande » « D » pour le dupliquer. Maintenant, je dois créer la version cochée peut donc que j'aie besoin d'une ellipse. Je vais maintenir les touches « Alt » et « Shift » enfoncées pour créer une ellipse proportionnellement, et je vais simplement l'aligner juste au centre, comme ça. Je vais l'agrandir un peu , puis je vais également changer sa couleur en violet. Je vais maintenant vous montrer l'autre façon de créer un ensemble de composants. Permettez-moi de sélectionner ce bouton radio, et je vais le renommer ici. Ici, nous avons un bouton radio puis une barre oblique non cochée. Pour l'autre, je vais cocher la barre oblique du bouton radio. En utilisant cette convention de dénomination, vous pouvez facilement créer différents composants, puis les transformer en ensemble de composants et Figma créera automatiquement des propriétés pour vous. Je vais vous montrer comment cela fonctionne. Je vais sélectionner celui-ci, transformer en composant, celui-ci également, le transformer en composant, donc maintenant nous avons deux composants différents ici. Maintenant, si je les sélectionne tous les deux, vous verrez ici cette option. Il dit combiner comme variance. Si je clique dessus, regardez ce qui se passe, ça y est. Nous avons maintenant un ensemble de composants contenant deux variantes. Le nom de notre ensemble de composants serait celui que nous avons écrit avant la barre oblique. Comme vous vous en souvenez, nous avons coché la barre oblique du bouton radio , puis la barre oblique avant du bouton radio, décochée. Le bouton radio sera le nom de notre ensemble de composants et tout ce que nous écrirons après la barre oblique sera la valeur de notre propriété. Nous n'avons créé aucune propriété, mais Figma l'a fait automatiquement. Si je sélectionne ces ensembles de composants , vous pouvez voir que nous avons propriété 1 et que nous avons deux valeurs, cochées et désactivées. Ici, je peux simplement le renommer en state et maintenant je peux simplement créer une instance de ce bouton radio et nous avons ici deux états différents, coché et non coché. C'est incroyable, n'est-ce pas ? Mais vous vous demandez peut-être si nous pouvons également utiliser ce bouton ici ? Oui, si nous changeons les valeurs de notre propriété en true et false, vous pouvez également obtenir exactement le même bouton ici. Laisse-moi te le prouver. Si je sélectionne celui-ci et que je définis la valeur d'état sur false, puis que je sélectionne celui-ci et définis la valeur de l'état sur true, maintenant je peux sélectionner cette instance, et voilà, nous obtenons ce bouton à bascule. Maintenant que vous comprenez comment fonctionnent les variantes, je vais parler des situations dans lesquelles vous ne devez pas utiliser de variantes. Eh bien, je peux constater que de nombreux designers commettent l'erreur de créer des centaines de variantes avec des icônes différentes. Supposons que vous créiez ce bouton avec cette icône, puis que vous décidiez d'avoir différentes variantes de ce bouton avec 5, 10, 20 icônes différentes. Dans ce cas, ce n'est pas une bonne idée d'utiliser des variantes, car au lieu de résoudre un problème, vous en créez un nouveau. De cette façon, il sera si difficile de tout organiser. Au lieu de cela, vous pouvez utiliser une propriété de composant car nous avons des propriétés de variante et également des propriétés de composants. Nous avons parlé des propriétés des variantes, nous en avons créé quelques-unes ici Comme vous vous en souvenez, parlons maintenant des propriétés des composants. Supposons que vous souhaitiez utiliser ces deux icônes. Il peut y avoir autant d' icônes que vous le souhaitez, mais dans cet exemple, deux suffisent. Je vais sélectionner celui-ci. Permettez-moi de le renommer en icône/coche. Celui-ci, je vais le renommer en icon forward slash home. Maintenant, je vais les sélectionner tous les deux, et je vais également changer leur couleur en blanc. Ensuite, je vais les transformer en composants. Je vais sélectionner celui-ci, transformer en composant, celui-ci également. Si je passe aux actifs, j'ai maintenant aussi cette icône, cette catégorie d'icônes. Je vais maintenant utiliser ces composants à l'intérieur de mon bouton. Je vais procéder et supprimer ces cases de mes boutons comme ça. Permettez-moi de sélectionner l'une d' entre elles, probablement celle-ci, de la dupliquer pour créer une instance, puis de la faire glisser et de la déposer dans notre bouton. Maintenant, je vais double-cliquer sur cette icône, et je vais me diriger vers cette section. Si je clique simplement sur ce bouton, cette fenêtre apparaît et indique « Créer une propriété de composant ». Je vais l'appeler icône. Ici, pour la valeur, vous pouvez voir que nous avons déjà ce menu déroulant. Il y a une coche et une page d'accueil. Si je clique sur ce bouton « Créer une propriété », vous verrez ici ces balises violettes. Ça dit icône. Maintenant que cette icône est sélectionnée, je vais appuyer sur « Control-C ou commande C », puis je vais sélectionner tous ces boutons, maintenir la touche Shift enfoncée pour les sélectionner simultanément, appuyer sur « Contrôle V ou commande V », puis appuyer sur la touche flèche gauche de votre clavier pour modifier la position de ces coches. Laissez-moi vous montrer quelle est la différence maintenant. Si je sélectionne cette instance de notre bouton que nous avons déjà créée, ici, sur le côté droit, nous avons une autre propriété. Il s'agit d'une propriété de composant. Si je souhaite modifier l' icône de ce bouton, je peux simplement l' ajuster ici à l'accueil. Vous voyez, je n'ai pas créé quatre autres variantes dans mon ensemble de composants avec cette nouvelle icône. Cela n'a aucun sens. Gardez cet exemple à l'esprit chaque fois que vous souhaitez créer un énorme système de conception. Cela va être très utile. Vous avez créé ces différents ensembles de boutons. Maintenant, vous voulez les animer. Nous le faisons habituellement en dupliquant notre écran, en ajustant notre bouton et en connectant ces écrans ensemble. Mais ce n'est plus le cas, car nous avons cette fonctionnalité géniale ou Figma appelée composants interactifs. Je vais vous montrer comment cela fonctionne. Ici, dans notre ensemble de composants, je vais sélectionner mon bouton de base, celui-ci. Ensuite, je vais accéder à l'onglet Prototype. À partir de là, je vais créer une connexion entre ces deux boutons comme ça. Ici, sur cette page de détails de l' interaction, je vais régler le déclencheur sur clic, car il s'agit de la variante sur laquelle nous appuyons. Comme vous pouvez le constater, vous avez également accès aux propriétés que vous venez de créer ici. C'est génial, n'est-ce pas ? Passons ensuite à l'animation, et je vais la régler sur Smart Animation. Ici, je vais le régler pour entrer et sortir facilement, 300 millisecondes, c'est bien. Maintenant, je vais créer une autre interaction. Je vais connecter ce bouton de base à notre bouton de survol. Cette fois, je vais régler la gâchette sur, tout en survolant, parce que c'est notre état de survol, et l'animation va être intelligente, et nous sommes prêts à partir. Maintenant, je vais sélectionner ce bouton ici. Je vais changer son état par défaut. L'icône va être cochée. Maintenant, allons-y et voyons comment cela fonctionne. Mais avant cela, pour pouvoir prévisualiser ce composant, nous devons d' abord le placer dans un autre cadre. Je vais appuyer sur « A » sur mon clavier, créer un cadre et le placer à l'intérieur, comme ça. Maintenant, je vais sélectionner ce bouton et supprimer son icône car nous n'avons pas encore prototypé ces variantes. Je vais tester ce bouton. Sélectionnons ce cadre maintenant et appuyons sur le bouton Play juste ici. Voyons maintenant ce qui se passe si je passe la souris sur ce bouton. Vous voyez que nous avons maintenant ce bouton interactif. Maintenant que vous avez découvert les composants interactifs et la variance, laissez-moi vous montrer comment animer cette icône à l'aide composants interactifs au lieu d'utiliser cette approche, qui n'est pas bonne du tout. Je vais me débarrasser de tous ces cadres. Au lieu de cela, nous allons simplement utiliser ces deux icônes ici. Voici ce que nous allons faire. Je vais sélectionner cette icône de plan, puis accéder à ma barre d'outils et cliquer simplement sur cette petite icône qui dit « Créer des composants ». Maintenant, j'ai un composant. Si vous regardez la liste des couches, vous verrez que son icône a changé. Nous avons également cette couleur violette, ce qui indique que nous avons maintenant un composant. Si je sélectionne ce composant et que je me dirige vers la barre d'outils, vous verrez que nous avons cette nouvelle icône avec cette icône plus au milieu. Il est écrit « Ajouter une variante ». Nous allons maintenant ajouter une variante à ce composant. Maintenant, nous avons cet ensemble de composants. Le nom de notre composant est cœur, c'est très bien. Nous avons une propriété ici. Nous avons la propriété 1, et sa valeur est indiquée. Nous avons alors la propriété 1 et sa valeur est la variante 2. Je vais maintenant renommer ces propriétés et leurs valeurs. Je vais commencer par celui-ci. Si je double-clique simplement sur le nom de cette couche, je vais la changer en état égal à la valeur par défaut. Pour le suivant, je vais taper state égal à pressed. Nous avons besoin d'une autre variante, comme nous le faisions auparavant. Je vais simplement sélectionner celui-ci, par exemple, et cliquer sur cette petite icône. Vous pouvez également appuyer sur « Control D » pour le dupliquer. Je vais renommer cet état ici ou ici. Peu importe de terminer. Ce sera notre destination. Que devons-nous faire ? Tout comme nous le faisions avant d'utiliser trois cadres différents, nous allons ici aller de notre point de départ à notre destination. Je vais devoir mettre cette icône solide à l'intérieur de chacun d'entre eux. Permettez-moi de le faire glisser et de m'assurer de le déposer dans cette variante ici et de l'aligner au centre. Il a été placé ici. Je vais appuyer sur « Control C » pour le copier, sélectionner cette variante pressée et appuyer sur « Control V » ici pour la coller à l'intérieur. Mais dans cet état, nous devons l'agrandir un peu. Je vais appuyer sur « K » pour sélectionner l'outil de mise à l'échelle et agrandir beaucoup, quelque chose comme ça. Collons-le également dans cette variante par défaut. Je vais le réduire. Tant qu'il est sélectionné, tapez simplement 0.01 ici pour le faire disparaître. Maintenant, si vous vous rendez sur les actifs, vous pourrez trouver ce composant central sous ce bouton J'aime animé ici. Vous pouvez commencer à l'utiliser. Pour cela, il suffit de disposer d'un cadre. Appuyez simplement sur « A » et créez un cadre comme celui-ci. Faites-le glisser et déposez-le à l'intérieur. Mais ce n'est pas encore interactif. Si je sélectionne ce cadre et que je clique « Play », vous pouvez constater qu' il n'est pas interactif. Si je clique dessus, rien ne se passe car nous n'avons établi aucune connexion entre ces états. Allons-y et faisons-le. Il suffit de sélectionner cette option par défaut , de passer au prototype, et de la connecter à cette deuxième variante, celle-ci étant enfoncée. Assurez-vous que l'état est réglé sur Appuyé. Ne le connectez pas à ce cœur, solide, sinon il ne fonctionnera pas correctement. Ici, vous devez avoir un état, pression et une animation intelligente 100 millisecondes. C'est très bien. Maintenant, je vais le sélectionner en appuyant dessus, créer une connexion entre les deux. Maintenant, ici, nous avons l'état complet. C'est très bien. Animation intelligente, 100 millisecondes. Mais le déclencheur doit être remplacé par un clic par un délai après un délai, et le délai doit être réglé à une milliseconde. Enfin, nous devons sélectionner cet état complet et le reconnecter à notre état par défaut. Il doit être cliqué, par défaut, 100 millisecondes. Maintenant, si vous essayez de le prévisualiser, cela devrait fonctionner correctement. Tu vois ça ? Désormais, chaque fois que vous utiliserez une instance de ce composant n'importe où dans votre projet, elle sera interactive par défaut. C'est tout pour cette leçon. Je te verrai dans le prochain. 8. Boutons animés: [MUSIQUE] Dans cette vidéo, nous allons créer ensemble un bouton interactif. Bien que vous ayez déjà appris comment rendre vos boutons interactifs dans la vidéo sur les composants interactifs, nous ne nous sommes pas vraiment penchés création d'un bouton interactif avancé, comme celui que nous avons ici. Dans la vidéo sur les composants interactifs, vous avez appris à modifier l' état de votre bouton par défaut à celui du survol simplement en modifiant la couleur de votre bouton. Mais dans cette vidéo, nous allons passer au niveau supérieur. Voici ce que nous allons construire. Dès que je passe la souris sur ce bouton, un cercle s'agrandit pour combler l'espace disponible dans ce bouton, et la couleur du texte doit également être modifiée. Si je clique dessus, je vois l'état pressé. C'est exactement ce que nous allons créer. Si vous accédez à la page Boutons animés dans le fichier de projet, vous pouvez trouver ce bouton. Je n'ai pas utilisé la mise en page automatique pour cela, car je vais d'abord vous montrer la forme la plus simple de création d'un bouton interactif. Ensuite, je vais vous montrer comment créer un cadre de mise en page automatique interactif. Voyons d'abord ce dont nous avons besoin. Si je passe la souris sur ce bouton, vous pouvez voir qu'un cercle s' agrandit rapidement. Nous avons besoin d'un cercle dans l'état par défaut, mais il ne devrait pas être visible. Ensuite, en mode survol, nous avons besoin de ce cercle pour agrandir et remplir tout l' espace disponible dans ce bouton. Voyons comment nous pouvons le faire. Tout d'abord, je vais transformer ce groupe en un composant. Si je clique simplement sur ce bouton « Créer un composant » dans la barre d'outils, je clique ensuite sur ce bouton plus pour y ajouter une variante et créer un ensemble de composants. Nous avons ici une propriété avec deux valeurs différentes. Je vais continuer et renommer cette propriété 1. Je vais simplement la renommer en State equals to Default. Ensuite, pour le second, je vais avoir State égal à Hover. Jusqu'ici, tout va bien. Nous avons besoin d'une autre variance pour nos états pressés, mais nous allons la créer en quelques secondes. Tout d'abord, allons-y et créons ce cercle. Pour ce faire, je vais simplement créer un cercle parfait en dehors de cet ensemble de composants. Maintenez la touche Shift enfoncée pour créer un cercle parfait. Juste comme ça. Alors je vais le rendre blanc. Ensuite, dans la liste des couches, je vais le faire glisser et le déposer dans mon état par défaut. Juste comme ça. Nous ne pouvons pas le voir parce que nous devons le déplacer ici. Comme vous pouvez le constater, ce cercle se trouve à l'intérieur de cette variance. Cependant, il n'est pas masqué à l'intérieur de ce bouton. Ce n'est pas ce que nous voulons. Nous voulons qu'il soit masqué à l'intérieur de ce bouton. Nous n'avons pas besoin de voir cette zone en dehors de ce bouton. Pour résoudre ce problème, il suffit de sélectionner cette variante dans la liste des couches et de passer à l'inspecteur de conception. Comme vous pouvez le voir ici, nous avons une case à cocher qui indique Contenu du clip. Si je le vérifie, on y va. Nous avons maintenant ce cercle masqué à l'intérieur de ce bouton. C'est exactement ce dont nous avons besoin. La prochaine chose à faire est de réduire considérablement ce cercle pour le faire disparaître Je vais appuyer sur « K » de mon clavier pour sélectionner l'outil de mise à l'échelle. Sur le côté droit, je vais simplement commencer à taper 0.01. Appuyez sur « Enter ». Comme vous pouvez le constater, il n'est plus visible. Ensuite, je vais sélectionner cette couche Ellipse 1, appuyer sur « Contrôle C ou Commande C ». Sélectionnez cet état de survol, cette variante de survol, et collez-la là, appuyez sur « Contrôle V ou Commande V ». C'est juste là, mais on ne le voit pas. Maintenant, dans cet état, je vais appuyer sur « K » mon clavier pour sélectionner l'outil de mise à l'échelle. Je vais l'agrandir comme ça , jusqu'à ce qu'il occupe tout l' espace disponible dans notre bouton. Mais n'oubliez pas de sélectionner votre variante et de cocher la case relative au contenu de ce clip. Nous avons ici un problème. Ce cercle est placé au-dessus de notre couche de texte. Ce n'est pas bien. Je vais continuer et ici, je vais sélectionner ce cercle, le faire descendre et le placer sous notre couche de textes dans la liste des couches, la même chose ici également. Mais nous ne pouvons toujours pas voir nos textes et c' est parce que nos textes ici sont également blancs. Maintenant, à l'état de survol, comme vous pouvez le voir, notre texte doit être gris foncé. Je vais juste aller dans la section de terrain et le rendre très gris foncé, juste comme ça. Jusqu'ici, tout va bien. Mais qu'en est-il de l'état pressé ? Pour l'état pressé, nous avons juste besoin d'une version plus sombre de notre état de survol. Pour ce faire, je vais simplement sélectionner cet état de survol, appuyer sur « Contrôle D ou Commande D » pour le dupliquer. Ensuite, ici, je vais changer la valeur de cette propriété d'état en pressed. Ensuite, je vais simplement double-cliquer dessus pour sélectionner notre cercle, cette couche Ellipse 1, à la section des champs, appuyer sur ce bouton plus pour ajouter une couche de superposition à cette variante particulière. Assurez-vous ici que le nouveau champ qui a été ajouté à cette variante particulière est noir et augmentez simplement l'opacité à 30 pour cent. Nous avons maintenant trois états différents. Nous avons par défaut, survolez et appuyez sur. ne reste plus qu'à connecter ces trois états différents. Je vais commencer par la valeur par défaut. Je vais le sélectionner, accéder à l' onglet Prototype et connecter simplement les deux comme ça. Ici, il est dit passage à l'état survol, animation intelligente. Si je le réglais à 100 millisecondes, ce serait trop rapide. Il serait assez difficile de vraiment voir l'animation et de voir ce qui se passe. Je pense que 200 millisecondes sont un bon endroit pour cela. Je vais le garder tel quel. Ensuite, je vais sélectionner la variante de survol connecter à la variante pressée. Ici encore, les mêmes préférences, et cliquez sur Modifier pour appuyer sur Smart Animate. Maintenant, pour voir si ce bouton fonctionne comme prévu ou non, nous devons simplement créer un cadre ici. Je vais appuyer sur « A » sur mon clavier, créer un cadre simple. Accédez à l'onglet Ressources, faites simplement glisser et déposez ce composant dans ce cadre. Je vais l' aligner au centre. Je vais sélectionner ce cadre, appuyer sur le bouton Play pour prévisualiser cette interaction particulière. Je vais le survoler. Comme vous pouvez le constater, rien ne se passe. Je suppose que nous n'avons pas changé le déclencheur pour le placer ici. Permettez-moi de sélectionner ceci. Oui, il devrait être remplacé par « en survolant » et maintenant cela devrait fonctionner correctement. Cool. Mais comme la couleur de fond est blanche, nous ne pouvons pas la voir correctement. Je vais sélectionner ce cadre et le rendre noir. Maintenant, il devrait être beaucoup plus facile pour vous de voir ce qui se passe. Jusqu'ici, tout va bien. Nous avons notre état par défaut, nous avons notre état de survol. Si je clique dessus, c'est parti. Nous sommes également dans un état de pression. Mais voilà, si je laisse ce bouton comme ça, si mon curseur quitte ce bouton, rien ne se passe. Ce n'est pas ce que je veux. Lorsque mon curseur quitte ce bouton, je souhaite que ce bouton revienne au point de départ, qui est son état par défaut. Malheureusement, le déclencheur On Click ne fonctionne pas la même manière que lorsque vous survolez. Parce qu'ici, comme vous pouvez le voir, si je reviens à l'état par défaut pendant une seconde, vous pouvez voir que cela fonctionne dans les deux sens. Mais ce n'est pas le cas avec le déclencheur On Click. Voici une astuce que j'utilise pour mes projets. Je vais reconnecter cet état pressé à l'état par défaut. Je vais changer les trois ici, de On clique à gauche de la souris. Maintenant, Figma sait que lorsque mon curseur quitte cet élément, il doit être remis à l'état par défaut. Voyons si cela fonctionne correctement ou non. Je vais le survoler. Je vais cliquer dessus. Bien. Maintenant, je vais déplacer ma souris comme ça. Nous y voilà. Nous venons de revenir à l'état par défaut. Jusqu'ici, tout va bien. Vous avez appris à créer cette interaction. Mais généralement, lorsque nous voulons créer un bouton, nous utilisons la mise en page automatique, pour le rendre réactif. Nous n'utilisons généralement pas de groupe et de rectangle à l'intérieur. Il peut être un peu difficile de créer une telle interaction lorsque vous avez une mise en page automatique. Je vais vous montrer comment créer une telle interaction lorsque vous disposez d'un cadre de mise en page automatique. Je vais créer ce bouton en utilisant la mise en page automatique. Je vais juste créer une couche de texte ici, et laissez-moi simplement taper pour commencer. Pour y ajouter une mise en page automatique, je vais appuyer sur « Shift and A ». Permettez-moi de régler le rembourrage à 16 pour mon rembourrage vertical et à 32 pour le rembourrage horizontal. Je vais y ajouter un remplissage. Il devrait être exactement comme ce bleu. Ici, nous avons juste une couche de texte et ce n'est qu'un bouton réactif. Maintenant, laissez-moi simplement le renommer en bouton et je vais le transformer en composant. Permettez-moi d'ajouter une variante. Jusqu'à présent, tout a parfaitement fonctionné. Mais maintenant, allons-y et ajoutons-y ce cercle. Je vais juste créer un cercle comme celui-ci et le rendre blanc. Regardez ce qui se passe lorsque j'essaie de le placer dans l'une de ces variantes, peut-être celle par défaut. Regarde ce qui se passe. Tu vois, ça a détruit notre bouton. Nous allons régler ce problème, ne vous inquiétez pas. La raison pour laquelle il se comporte de cette manière est que lorsque nous avons une mise en page automatique ou disons, un élément réactif, lorsque nous y ajoutons quelque chose d'autre, il essaie de prendre de la place, mais ce n'est pas ce que nous voulons. Nous ne voulons pas que ce cercle prenne de la place ici. Nous voulons qu'il flotte. Pour que cela se produise, il suffit de le sélectionner ici. Dirigez-vous vers l'inspecteur de conception et vous verrez ce bouton plus ici. Il est écrit « Position absolue ». Si je clique dessus, regarde ce qui se passe. Maintenant, ce cercle ne prend pas de place ici, et c'est exactement ce dont nous avons besoin. N'oubliez pas de sélectionner votre variante et de cocher les cases correspondant au contenu de ce clip. Tout le reste doit être fait exactement comme nous venons de le dire. Je ne vais pas répéter toutes les étapes. C'est tout pour cette vidéo, et je vous retrouve dans la prochaine. 9. Commutateurs animés: [MUSIQUE] Bon retour. Dans cette vidéo, je vais vous montrer comment créer un commutateur interactif comme celui-ci. Allons-y. Rendez-vous sur la page des commutateurs animés dans le fichier de conception. Comme vous pouvez le constater, j'ai déjà conçu deux commutateurs, avec deux états différents. C'est tellement simple. J' utilise juste le rectangle comme arrière-plan et un cercle ici. ai également rendu réactif en utilisant la mise en page automatique. Si je sélectionne ce commutateur hors tension, vous pouvez voir que l' alignement est réglé sur la gauche. Si je sélectionne celui-ci, l'alignement est réglé sur la droite. Mais l'important est que le nom de ces éléments, ce cercle et de ce cercle soit le même pour les deux couches. Sinon, ça ne marchera pas. L'autre différence est que pour ce cercle, j' ai utilisé un trait et j'ai également changé la couleur de l' arrière-plan. Ici, pour le rendre interactif, la seule chose que nous devons faire est la suivante. Il suffit de sélectionner ces deux commutateurs et de nous rendre dans la barre d'outils, cliquer sur cette petite flèche et créer un ensemble de composants comme celui-ci. Dans notre ensemble de composants, nous avons maintenant deux variantes avec une seule propriété. Nous avons une propriété allumée et éteinte. Permettez-moi de les renommer. Je vais le renommer en État. Ici, nous avons State Off. La prochaine chose à faire est de les connecter. Je vais sélectionner le premier et passer au prototype, le connecter au second et m' assurer que le déclencheur est réglé sur un clic. Comme nous l'avons utilisé ici, nous avons également cet interrupteur ici . C'est incroyable. Ce sera une animation intelligente et je vais la laisser à 200 millisecondes. Nous allons l' essayer et, si nécessaire, nous pourrons simplement apporter quelques ajustements plus tard. Maintenant, je vais créer une autre connexion pour revenir à l'état inactif. Je vais créer une nouvelle connexion. Essayons-le. Je vais créer un cadre. Je vais changer la couleur du fond. De plus, à partir des ressources présentées ici, je vais glisser-déposer ce commutateur comme suit. Nous allons sélectionner ce cadre. Appuyez sur Play, et ça devrait très bien fonctionner. Je vais cliquer dessus. Nous y voilà. Vous savez maintenant également comment créer un commutateur interactif. Je te verrai dans le prochain. 10. Slider animé: Dans cette vidéo, nous allons créer ensemble un slider interactif, comme vous le voyez ici. Comme vous pouvez le constater, nous pouvons facilement interagir avec ce slider. Sur le côté droit, vous voyez ce numéro qui est connecté à notre curseur, juste comme ceci. Commençons par voir comment vous pouvez en créer un. Allez-y et recherchez cette page de slider animée dans le projet Figma. Ici, comme vous pouvez le voir, j'ai créé deux sliders différents. Tout d'abord, laissez-moi vous expliquer les choses. Je n'ai pas de rectangle arrondi ici. Mon arrière-plan est complètement arrondi , et de plus, si je déplace simplement cette ellipse, vous verrez que j'ai une couche dupliquée de mon arrière-plan ici, et j'ai simplement réduit sa largeur à cinq. Cette couche est essentiellement ce que nous allons animer pour obtenir quelque chose comme ça. Nous avons donc ici deux rectangles superposés. Mais celui-ci, qui s' appelle le slider, a une largeur beaucoup plus petite. C'est tellement simple. Lorsque vous souhaitez créer ce curseur, vous devez vous assurer que ce cercle est parfaitement aligné avec les autres éléments. Sinon, ça ne marchera pas. Pour ce second curseur, les seules choses qui ont été modifiées sont la position de ce cercle et la largeur de cette couche de curseur a été modifiée à 237 pour atteindre le point final ici. Mais nous devons également avoir un numéro ici. Alors, comment pouvons-nous créer cela ? Laissez-moi vous montrer comment procéder. abord, je vais créer une couche de texte, appuyer sur T et créer une couche de texte. Ici, je vais avoir des valeurs différentes. Je vais passer de 0 à 10 à 20 , jusqu'à 100. Voici ce que je vais faire. Je vais taper zéro. Je vais appuyer sur Entrée pour créer une nouvelle ligne. Ensuite, je vais taper 10 et continuer à le faire. Je vais accélérer ce processus. Nous y voilà. Nous avons un 0, 10, 20 allant jusqu'à 100, et nous veillons à ce que vous aligniez votre texte pour écrire ici. Donc, tout comme notre curseur, nous devons avoir deux états différents pour ce numéro ainsi que pour cette couche de texte. Ici, dans notre premier slider, nous devrions voir zéro. Ici, nous devrions en voir 100 et tout le reste sera automatiquement animé par Figma. Pour ce faire, il suffit de transformer cette couche de texte en cadre, afin de pouvoir masquer ces chiffres. Je vais cliquer dessus avec le bouton droit de la souris, et je vais cliquer sur la sélection du cadre. Maintenant, comme vous pouvez le voir dans la liste des couches, cette couche de texte se trouve à l'intérieur de ce cadre 1, et je vais renommer ce texte du cadre 2. Ensuite, je vais diminuer la hauteur de ce cadre comme ceci, et pour masquer ce chiffre, comme vous le savez, il suffit de cocher les cases du contenu de ce clip comme ça. Maintenant, je vais aligner ce cadre avec ce curseur, et je vais le dupliquer, appuyer sur la commande D, le faire descendre ici et l'aligner également sur ce curseur. Assurez-vous d'avoir la même marge entre les curseurs dans ce texte. Ici, si je maintiens simplement la touche Alt de mon clavier ou la touche Option enfoncée, je peux voir que la marge est réglée sur 12. Ici, je dois m'assurer que j'en ai 12 également. Il fait huit, donc je dois le déplacer vers le haut Maintenant, je peux sélectionner ces deux éléments, ce curseur et cette couche de texte, et appuyer sur Ctrl G pour les regrouper et les sélectionner également. Appuyez sur Control G pour les regrouper. Maintenant, je vais étendre ces groupes et m' assurer que mes couches portent le même nom dans les deux groupes. Ici, j'ai Slider 100, Slider 0. Je vais le changer en curseur pour ces deux groupes. Je ne veux pas rencontrer de problèmes lorsque je crée des connexions. Ensuite, nous avons du texte et du texte, et tout le reste semble parfait. Avant de transformer ces deux groupes en un ensemble de composants, je vais sélectionner cette couche de texte dans ce cadre particulier, et je vais la déplacer vers le haut car ici, nous devons voir 100, et non zéro. Vous pouvez donc maintenir la touche Shift enfoncée et utiliser les touches fléchées de votre clavier pour la déplacer vers le haut. Juste comme ça, quelque chose comme ça devrait fonctionner et nous sommes prêts à partir. Maintenant, je vais sélectionner ces deux groupes et créer un ensemble de composants comme celui-ci . Nous pouvons maintenant connecter les deux. Voici ce que vous devez garder à l'esprit. Lorsque vous souhaitez connecter ces deux éléments, vous devez vous assurer de sélectionner ce cercle ici à l'intérieur de ce curseur. Dans mon cas, c'est Ellipse 1, sinon ça ne marchera pas. Assurez-vous de sélectionner cet élément ici, puis passez au prototype, créez une connexion et connectez-la à ce groupe 2. Le déclencheur doit être remplacé par « clic glisser-déplacer », car nous devrions pouvoir faire glisser cet élément, animer intelligemment, et 300 millisecondes semblent bonnes. Je vais faire la même chose pour cet élément ici, Ellipse 1 ici, et simplement créer une connexion avec notre premier groupe ici, et le faire glisser, et tout le reste devrait être intact. Essayons-le maintenant. Cela devrait très bien fonctionner. Je vais créer un cadre ici. Faisons en sorte que l'arrière-plan soit noir, juste comme ça. Accédez à Ressources, faites glisser et déposez ces composants. Bien. Je vais simplement sélectionner le cadre et appuyer sur Play. D'accord, voyons si ça fonctionne. Nous y voilà. Vous voyez que tout fonctionne comme prévu. Si vous vouliez vous arrêter quelque part par ici, peut-être à 20, puis à 40 ou 60, etc., vous devez vous assurer d'avoir une variance différente. Ainsi, au lieu de zéro et 100, vous devez avoir quelques variantes entre ces deux valeurs. Vous pouvez peut-être ajouter deux autres variantes et passer 0 à 30, puis de 30 à 70 et de 70 à 100, selon vos besoins. Les gars, c'est tout pour cette vidéo, et je vous verrai dans la prochaine. 11. Carte animée: [MUSIQUE] Bon retour. Si vous accédez à l'App Store, vous verrez généralement quelques cartes liées à différentes applications. Si vous touchez l'une de ces cartes, vous verrez cette transition en douceur. Les limites de cette carte s'étendent pour occuper toute la largeur disponible de l'écran, puis tous les éléments, y compris l'image et les couches de texte, se déplacent vers le haut et réorganisent l' ensemble de la disposition de l'écran. Lorsque vous souhaitez le fermer, vous pouvez simplement le faire glisser vers le bas et il sera réduit. Dans cette vidéo, je vais vous montrer comment reproduire exactement la même interaction dans Figma. Plongeons-nous dedans. Ici, j'ai conçu cette application et voici quelques cartes. Quand je clique dessus, regarde ce qui se passe. Vous voyez, nous aurons exactement la même interaction ici. Lorsque je clique dessus, il s'agrandit. Ensuite, le texte et l' image se déplacent vers le haut. Si je clique sur cette icône en forme de flèche gauche, elle sera réduite. De plus, si je le fais glisser ici, je peux simplement le réduire moi-même. C'est si fluide et si facile à créer. Allons-y. Ici, si vous allez sur la page de la carte animée, vous verrez que j'ai préparé ces deux écrans pour vous. Ici, sur la page d'accueil, nous avons cette carte, et dans ce groupe de cartes, nous avons quelques éléments. Nous avons ce groupe 2, qui est ce groupe de texte. Nous avons également cette couche de texte, puis nous avons notre forme, notre image et l'ombre derrière cette image. La seule chose que vous devez faire ici est d'avoir exactement les mêmes couches sur ces deux pages. Ici, sur la page de détails, j'ai également le groupe de cartes, et à l'intérieur, j'ai aussi ce groupe. Mais je supprime ce texte de prix, et tout le reste est exactement le même. J'ai le rectangle 4, le rectangle 3, le rectangle 5. Il est très important de conserver les noms intacts, sinon cela ne fonctionnera pas et le reste sera géré par Figma. Il ne nous reste plus qu'à sélectionner cette carte , à accéder à l'onglet Prototype et à connecter ces deux écrans. Le déclencheur se fera au clic. Ce sera plus intelligent d'Animate. Je vais laisser la vélocité ici pour l'instant, plus tard, nous devrons peut-être l'ajuster. Ensuite, je vais sélectionner ce bouton ici et le reconnecter à ma page d'accueil. Encore une fois, décliquez sur Smart Animate. Si j'appuie simplement sur ce bouton Play pour écouter mon flux, prévisualisons-le et voyons comment il fonctionne. Je vais cliquer sur cette carte. Cela fonctionne très bien. Mais pour passer au niveau supérieur, je veux y ajouter cet effet de rebond, juste comme ça. C'est si doux et si satisfaisant. Pour ce faire, il suffit de sélectionner cette carte ici. Je vais cliquer sur cette interaction. Au lieu de le simplifier, je vais le changer rapidement. Je vais faire la même chose pour cette interaction. Je vais sélectionner ce bouton et le changer en mode rapide. Essayons-le encore une fois. Je vais cliquer dessus. Nous y voilà. Ça a l'air beaucoup mieux. Mais qu'en est-il de l'interaction avec le glissement ? Pour le moment, cela ne fonctionne pas. Créons-le. Il suffit de sélectionner cette carte ici sur la page détaillée. Je vais créer une connexion vers ma page d'accueil. Mais cette fois, le déclencheur doit être remplacé par On Drag. De plus, cela devrait être rapide pour ne pas avoir à toucher à autre chose. Maintenant, cela devrait très bien fonctionner. C'était assez facile, n'est-ce pas ? Très bien, les gars, terminons cette vidéo et je vous verrai dans la prochaine. 12. Texte animé: Avez-vous déjà eu envie de créer une animation de texte d'aspect professionnel dans Figma ? Si c'est le cas, vous avez choisi la bonne vidéo, car dans cette vidéo, je vais vous montrer comment créer cette animation de texte avancée dans Figma en seulement cinq minutes. Nous allons commencer. Pour créer cet effet, nous avons besoin de deux couches de texte différentes. Nous avons besoin de la couche de texte comme texte statique, et nous avons besoin d'une autre couche de texte comme texte en mouvement. Je vais créer une couche de texte. Laissez-moi écrire, gérez vos projets comme ça. Je vais le mettre en gras, puis je vais diminuer sa largeur comme ceci et nous allons mettre ici nos textes en mouvement. Maintenant, je vais dupliquer ce texte, le déplacer vers la droite et ici je vais écrire plus vite comme ça. Cette fois, nous pouvons modifier le type de ce texte en largeur automatique comme ça. Permettez-moi de faire descendre ce texte, alignez-le simplement sur votre autre couche de texte. Ensuite, laissez-moi changer de couleur. Je vais créer un dégradé pour ce texte. Permettez-moi de créer rapidement un dégradé. Je vais utiliser du violet et ce violet clair, juste comme ça. Ne t'inquiète pas pour la couleur. Vous pouvez toujours l'ajuster ultérieurement. Quelque chose comme ça devrait très bien fonctionner. Je vais maintenant double-cliquer sur ce texte. Je vais appuyer sur Entrée pour créer une nouvelle ligne et écrivons notre deuxième mot. Écrivons en toute simplicité. Appuyez sur Entrée et écrivons efficacement. Nous devons maintenant créer un masque ici d'une manière ou d'une autre. Nous pouvons utiliser un masque, mais à la place, je vais vous montrer une bonne astuce. Au lieu d'utiliser un masque, nous pouvons simplement cliquer avec le bouton droit sur ce texte et cliquer sur la sélection du cadre. Nous allons essentiellement placer ce texte dans un cadre. Vous voyez maintenant que nous avons le premier cadre ici. Ensuite, je vais diminuer la hauteur de ce cadre comme suit et cocher cette case qui indique Contenu du clip ici. En gros, nous masquons les deux autres mots ici, et c'est exactement ce dont nous avons besoin. Maintenant, je vais sélectionner ces deux textes. En gros, nous avons un cadre et une couche de texte. Cliquez ici avec le bouton droit de la souris et cliquez à nouveau sur cette sélection de cadre pour créer un autre cadre. Renommez-le en cadre 1. Nous pouvons maintenant le dupliquer. Appuyez sur Contrôle D ou Commande D, dupliquez-le à nouveau. Ensuite, voici ce que nous devons faire. Nous devons double-cliquer sur notre couche de texte à l'intérieur ce cadre que nous avons créé et nous devons simplement la déplacer vers le haut. Je peux utiliser les touches fléchées de mon clavier pour déplacer ce texte vers le haut comme ceci. Si vous souhaitez l'aligner parfaitement sur cette couche de texte, vous pouvez simplement le placer en dehors ce cadre, l'aligner sur la ligne de base de cet autre texte et le remettre à l'intérieur, comme ça. Faisons de même pour les autres textes. Je vais le sélectionner et le déplacer vers le haut comme ça. Permettez-moi de l'aligner rapidement. Il est parfaitement aligné et je vais le mettre dans ce cadre. , jusqu'ici, tout va bien. Nous devons maintenant sélectionner ces trois cadres. Nous devons nous rendre dans la barre d'outils et cliquer sur cette petite flèche. Ce menu déroulant s'ouvre et nous devons cliquer sur Créer un ensemble de composants. Dès que je le ferai, cet ensemble de composants sera créé et à l'intérieur, nous aurons nos variantes. Si vous ne savez pas ce que sont les variantes, oubliez pas de regarder ma vidéo sur les variantes. Vous trouverez le lien en haut à droite. Mais pour l'instant, nous devons simplement nous rendre dans l'onglet Prototype, et nous devons les rendre interactifs. Nous devons créer une interaction ici. Comment pouvons-nous le faire ? C'est très simple. Je vais sélectionner le premier. Je vais cliquer avec le bouton gauche sur ce bouton plus et essayer de le connecter à la variante suivante ici. Ce menu contenant les détails de l'interaction s'affiche. À partir de là, je vais remplacer le déclencheur par After Delay. La durée est fixée à 800 millisecondes. C'est bon. Je vais passer du type d'animation instantanée à l'animation intelligente. Ici, je vais le régler pour qu'il soit facile d'entrer et de sortir de l'arrière. Vous pouvez choisir l' option de votre choix ici. Vous pouvez choisir par exemple Bouncy Quick, cela dépend totalement de vous, mais je préfère vraiment celui-ci. Ça a l'air très bien. Permettez-moi d'ajuster la durée à peut-être 600 millisecondes. Maintenant, nous devons répéter ce processus pour les autres variantes, je vais maintenant sélectionner ce cadre. Je vais créer une nouvelle interaction comme celle-ci. Ici, remplacez le déclencheur par After Delay. Ne modifiez pas cette durée ici car nous voulons qu'elle soit la même. Nous n'avons pas besoin de changer quoi que ce soit d'autre. Enfin, je vais sélectionner celui-ci, le dernier, et le connecter à notre premier cadre. Juste comme ça, remplacez le déclencheur par After Delay et le reste est bon, et nous avons pratiquement terminé. Maintenant, laissez-moi vous montrer comment vous pouvez l'utiliser. Je vais passer à Assets. À partir de là, je vais glisser-déposer mon composant directement dans mon design. Si vous souhaitez modifier les couleurs ici, vous pouvez simplement accéder aux couleurs de sélection ici et ajuster la couleur comme vous le souhaitez. Vous pouvez également modifier le dégradé. Permettez-moi de modifier rapidement le dégradé. J'aime beaucoup celui-ci. Essayons-le maintenant et voyons à quoi il ressemble. Je vais sélectionner mon cadre et le prévisualiser. Nous y voilà. Voici notre animation magnifique et fluide. 13. Menu déroulant interactif: [MUSIQUE] Bon retour. Dans cette vidéo, je vais vous montrer comment créer ce menu déroulant interactif. Ici, dès que je clique sur ce menu déroulant, il s'ouvre et nous verrons ces options, cela nous permet de sélectionner entre ces langues. Nous avons besoin d'un drapeau et d' une simple couche de texte, et comme vous pouvez le constater, nous avons différents états de ces options. Nous avons l'état de survol et nous pouvons également sélectionner ces langues. Si je clique simplement sur cet anglais, nous y voilà, notre texte réservé a été modifié et nous obtenons également ce drapeau ici. Il est entièrement interactif et il est très utile d' apprendre comment créer un composant interactif aussi complexe dans Figma. Si vous êtes prêt, allons-y. Pour cet élément, j'ai décidé de vous montrer comment le créer à partir de zéro. Parce que si vous ne comprenez pas comment ce menu déroulant est créé, il vous sera assez difficile de comprendre comment nous le rendons interactif. Nous allons le créer à partir de zéro. Mais si vous vous rendez simplement sur la page du menu déroulant interactif du projet Figma, vous verrez que j'ai déjà préparé ces drapeaux pour vous. Nous avons quatre drapeaux différents avec des noms différents. La première étape consiste à transformer ces drapeaux en composants. Je vais simplement les sélectionner tous et je vais me rendre dans la barre d'outils ici, et je vais cliquer sur cette flèche vers le bas pour ouvrir ce menu déroulant. Ici, je vais cliquer sur Créer plusieurs composants, juste comme ça. Désormais, chacun de ces drapeaux est un composant. C'est bien. L'étape suivante consiste à créer l'article. Ce que vous voyez ici, chacune de ces options est appelée élément dans notre menu déroulant. Pour cela, nous avons juste besoin d' une simple couche de texte, d'un drapeau à côté, et elle doit être rectangulaire. Je vais appuyer sur « T » sur mon clavier et la taille de police peut être de 18 points, et je vais taper en anglais. Ensuite, je vais y ajouter une autre mise en page pour le rendre réactif. Appuyez sur Shift et sur A, et comme vous pouvez le voir maintenant, il a été remplacé par Frame 1, il est donc réactif maintenant. Nous avons besoin d'une couleur de fond pour cela, donc je vais également y ajouter un remplissage. Il peut être blanc ou très légèrement teinté de bleu ou autre chose. Je vais opter pour le bleu. Permettez-moi simplement de changer la couleur en une teinte de bleu très claire, comme ceci, et nos textes devraient être d'une teinte très foncée de ce bleu. Je vais choisir la même couleur ici, et je vais la rendre assez foncée, juste comme ça. Laissez-moi sélectionner ce cadre et je vais l'appeler article. De quoi d'autre avons-nous besoin ? Nous avons besoin d'un drapeau ici, nous allons donc utiliser des composants imbriqués. Si je vais dans l' onglet Ressources et que je passe au menu déroulant animé, je vois cette catégorie d'indicateurs et nous verrons tous les composants de notre drapeau. Je vais simplement glisser-déposer ce drapeau anglais dans mon article, comme ceci. Comme vous pouvez le constater, notre article est responsive car nous y avons ajouté une autre mise en page. Il ne nous reste plus qu'à modifier l'alignement. Je vais sélectionner le cadre de cet élément, et je vais modifier l'alignement ici vers la gauche et le centre, comme suit. La marge entre ces éléments pourrait être réduite. Je vais le réduire à quatre pixels, juste comme ça. Mais je vais également modifier le rembourrage horizontal et vertical ici. Je vais régler le rembourrage horizontal sur 16 et le rembourrage vertical sur 16 également, comme ceci. Mais voici le truc. Je vais sélectionner cet article et augmenter légèrement sa largeur. Quelque chose comme ça devrait fonctionner, peut-être 170. Ne vous inquiétez pas pour la dimension car nous la modifierons plus tard. Pour l'instant, je veux juste avoir un exemple d'article ici. Bien. Maintenant que notre article est prêt, je vais en faire un composant. Je vais cliquer sur cette icône ici. Nous y voilà. Il s'agit maintenant d'un composant d'article, et il est temps d'ajouter différents états à ce composant. Pour cela, nous avons besoin d'une variante. Une fois sélectionné, je vais cliquer sur cette petite icône pour y ajouter une variante. Nous devons avoir une propriété dans notre ensemble de composants et elle s' appellera state. Si vous souhaitez modifier le nom de la propriété, il vous suffit de sélectionner l'ensemble complet de composants , de vous rendre dans la section Propriétés et de double-cliquer sur son nom. Ici, le premier sera utilisé par défaut. Nous n'avons pas besoin de changer cela. Le second sera survol, donc je vais taper hover ici, et pour cet état de survol, je vais légèrement modifier la couleur. Je vais y ajouter un autre champ, et je vais changer la couleur en bleu clair, et le rendre un peu plus saturé comme ça. Jusqu'ici, tout va bien. Maintenant, je vais le dupliquer, appuyer sur Contrôle D ou Commande D et celui-ci sera notre état sélectionné. Parce qu'ici, lorsque nous ouvrons ce menu déroulant, nous devons avoir l'état par défaut. Comme vous pouvez le constater, l'italien est désormais l'état par défaut. Si je le survole, nous verrons l'état de survol, et si je clique dessus ici, nous avons maintenant l'état sélectionné. Pour cela, je vais modifier sa valeur ici pour la sélectionner et je vais modifier ce nouveau champ que nous venons d'ajouter à cet état de survol. Je vais juste le rendre un peu plus saturé, juste comme ça. L'autre chose que nous pouvons faire est sélectionner ce texte et de simplement changer son poids de normal à moyen afin de pouvoir facilement distinguer ces différents états. Mais nous n'avons pas terminé , car une fois cet état sélectionné, nous devons également avoir un état de survol pour cet état sélectionné. Je sais que cela semble compliqué, mais voici le truc. Nous avons un état de survol pour ces états par défaut. Mais nous avons également besoin d'un état de survol pour cet état sélectionné. Vous voyez, lorsque je survole cet état sélectionné, il devient un peu plus sombre, je vais juste sélectionner celui-ci, le dupliquer, et je vais changer sa valeur ici en survol sélectionné. La seule chose à faire est de changer légèrement sa couleur ici. Quelque chose comme ça devrait fonctionner. Jusqu'ici, tout va bien. Nous avons notre article avec différents états et nous pouvons maintenant passer à l'étape suivante qui consiste à créer une liste. Nous devons créer cette liste ici. Pour cela, il suffit d' utiliser ce composant. Si je vais dans Assets, je peux rechercher le composant de l'objet et je vais le glisser-déposer ici. Pour la liste, je vais dupliquer cet élément, déplacer vers le bas et m' assurer qu'il n'y a pas de marge entre ces deux éléments. Je vais le dupliquer deux fois, donc au total, nous devons obtenir quatre objets différents, comme celui-ci. Nous allons maintenant modifier le contenu de chaque élément. Par exemple, le second sera italien et comme nous avons transformé les drapeaux en composants, je peux simplement sélectionner cette instance, inspecteur de conception, et à l' aide de ce menu déroulant, je peux la changer en italien comme ça. Le prochain sera polonais et je vais également changer le drapeau de la Pologne comme ça. Ensuite, nous devons avoir l'espagnol, et je vais également changer le drapeau pour l' Espagne, comme ça. Nous avons maintenant quatre éléments différents et je vais également rendre cette liste réactive. Je vais tous les sélectionner et leur ajouter une mise en page automatique. Je vais appuyer sur Shift et A. Et voilà, et nous allons renommer ce cadre en liste. Mais notre liste ne répond pas. Vous voyez ici que nous avons ce problème si j' essaie de modifier la largeur ici, rien ne se passe, et c'est un problème car nous devons nous assurer que notre liste est réactive. Pour résoudre ce problème, il suffit de sélectionner les éléments de notre liste et de modifier l'option de redimensionnement ici. Si je me dirige vers l'inspecteur de conception et que j' ouvre ce menu déroulant par défaut, il est configuré pour fixer la largeur. Je vais le régler pour qu'il remplisse le récipient. Maintenant, si je sélectionne ma liste ici, vous pouvez voir qu'elle est entièrement réactive. L'étape suivante consiste à transformer également cette liste complète en un composant. Je vais cliquer sur ce bouton Créer un composant ici pour le transformer en composant et nos principaux éléments sont prêts. De quoi d'autre avons-nous besoin ? Pour ce menu déroulant, nous avons également besoin de ce menu avec cet espace réservé, indique « Sélectionnez la langue », puis nous avons besoin de cette icône en forme de flèche vers le bas. Créons-en un. Je vais juste appuyer sur « T » sur mon clavier et je vais commencer à taper la langue sélectionnée. Permettez-moi de changer sa couleur pour quelque chose d'autre, peut-être ce bleu. Ensuite, tout comme ces éléments, je vais y ajouter une autre mise en page. Appuyez sur « Shift and A ». Nous avons ici un cadre. Renommons-le en menu, et ce menu n'a pas besoin d'être compris. Je vais plutôt y ajouter un trait. Il suffit d'y ajouter un trait comme ça, et je peux aussi le rendre un peu arrondi. Je peux peut-être augmenter le rayon d'angle à environ 16 pixels. Je vais changer la couleur du trait en lui donnant la même couleur de bleu. De quoi d'autre avons-nous besoin ? Nous avons également besoin de cette flèche vers le bas. Pour cela, je peux utiliser un plugin. Ici, nous avons Iconsax. Si je le lance et que je cherche Arrow. Ici, je vais glisser-déposer cette icône en forme de flèche dans mon projet. Nous y voilà et maintenant je vais le glisser-déposer dans mon menu, comme ceci. Mais c'est trop grand pour ce menu. Je vais le réduire un peu. Je vais appuyer sur « K » sur mon clavier pour sélectionner l' outil de mise à l'échelle et essayer réduire sa largeur et sa hauteur à probablement 18 pixels. Je trouve que 18 ans, c'est bien. Ensuite, je vais modifier leur alignement Je vais donc sélectionner ce menu et modifier l'alignement vers le centre gauche. En ce qui concerne le rembourrage, je vais régler le rembourrage vertical sur 16, car ici, pour ces éléments, nous en avons utilisé 16 également, et le rembourrage horizontal à 16 également. Permettez-moi de changer la couleur de cette icône en lui donnant le même bleu. Nous y voilà. Mais voilà, ce menu n'est pas réactif, nous devons donc y remédier. Pour résoudre ce problème, je vais simplement sélectionner ce menu, passer à l' autre section de mise en page. Cliquez sur cette petite icône, les paramètres de mise en page avancés, et ici, comme vous pouvez le voir, le mode d'espacement est réglé sur Emballé. Je vais le changer en espace entre les deux, comme ça. Notre menu est désormais réactif. Quelle est la prochaine étape ? Eh bien, la prochaine étape consiste également à y ajouter un drapeau. Mais pourquoi ? Parce qu'ici nous n'avons pas de drapeau. Oui, nous n'avons pas de drapeau ici pour cet espace réservé. Mais dès que nous sélectionnons l'une de ces options, comme vous pouvez le constater, ce drapeau apparaît. Voici ce que nous devons faire Je vais simplement accéder aux ressources, et je vais glisser-déposer l'un de ces drapeaux dans ce menu. Ensuite, comme je vais réduire la marge entre ces deux éléments, je vais sélectionner ce drapeau maintenir la touche Shift enfoncée, sélectionner ce texte, puis appuyer sur Shift et A. heure actuelle, nous pouvons spécifier cette marge ici sans affecter la marge entre ces éléments. Je vais le régler à quatre, car nous en avons utilisé quatre ici également. Nous devons faire en sorte que tout soit cohérent. Mais voilà, pour ce texte réservé, nous n'avons pas besoin de ce drapeau. Pour l'instant, je vais simplement sélectionner ce drapeau comme celui-ci et le masquer. Il est là chaque fois que nous en avons besoin, mais pour le moment, nous devons le cacher. L'étape suivante consiste à transformer ce menu en composant. Je vais renommer ce menu en menu déroulant, juste comme ça, et je vais en faire un composant. Pour cela, nous avons besoin de deux variantes différentes. Deux variantes principales, fermée et ouverte. Je vais y ajouter une autre variante, juste comme celle-ci. Pour ces variantes, nous avons besoin de deux propriétés. Je vais sélectionner cet ensemble de composants du menu déroulant , accéder à la section Propriétés et remplacer la première propriété par state. Nous avons besoin d'une propriété supplémentaire ici Je vais donc cliquer sur ce bouton « Plus » et cliquer sur « Variante ». Je vais l'appeler placeholder. Cela crée des propriétés, donc au total, nous avons deux propriétés, l'état et l'espace réservé. Pour le premier, je vais définir l' état sur Fermé, et le texte de l'espace réservé doit être défini par défaut. Pour celui-ci, l' état doit être ouvert et l'espace réservé doit également être utilisé par défaut, car nous devrons le modifier ultérieurement. De quoi d'autre avons-nous besoin pour cet État ouvert ? Nous devons faire pivoter cette icône de 180 degrés, donc je vais la sélectionner, et ici je vais définir la valeur de rotation à 180, comme ceci. Nous devons également placer cette liste dans cette variante ouverte. Je vais accéder aux actifs, et à partir de là, je vais glisser-déposer cette liste ici. Dans notre liste de couches, je vais m' assurer qu'ils placent cette instance de liste dans ma variante ouverte, comme ça. Ça n'a pas l'air correct. C'est parce que ça prend de la place ici. Comme vous vous en souvenez peut-être, lorsque vous ne souhaitez pas qu'un élément occupe de place, vous pouvez simplement le sélectionner et cliquer sur cette position absolue de l'icône plus. Maintenant, il ne prend plus de place et nous pouvons spécifier sa position. Permettez-moi simplement d'agrandir cet ensemble de composants. Je vais sélectionner cette liste à l'aide des touches fléchées, je vais modifier sa position. Nous devons nous assurer qu'il est parfaitement aligné avec ce menu déroulant. Je peux sélectionner cet élément de liste, maintenir la touche Alt de mon clavier enfoncée et, comme vous pouvez le voir, la marge gauche est réglée sur 21. Je vais le déplacer vers la gauche pour obtenir une marge gauche de 20 pixels. Ici, nous avons également une marge gauche de 20 pixels. Ensuite, nous devons ajuster sa largeur Je vais donc sélectionner cette liste et modifier également sa largeur à 250. Juste comme ça. Maintenant que nous avons des coins arrondis pour ce menu, nous pouvons également modifier le style de notre liste. Pour ces éléments, j'ai utilisé une valeur de rayon d'angle de 16 pixels. Nous devons également utiliser la même valeur pour cette liste. De quoi avons-nous besoin ? Nous avons besoin que ces coins soient arrondis. Je vais sélectionner ce premier élément dans cette liste. Nous devons avoir accès à des coins individuels Je vais donc cliquer sur cette petite icône qui indique des coins indépendants. Ici, nous devons modifier ces deux valeurs. Je vais les régler à 16, celui-ci à 16 également. Ensuite, nous devons sélectionner cet élément inférieur, diriger vers des coins indépendants. Cette fois, nous devons modifier ces deux valeurs. Réglons-les à 16, et c'est parti. Nous avons maintenant un style cohérent. Nous avons maintenant deux variantes, nous pouvons donc fermer et ouvrir ce menu déroulant. Mais que se passe-t-il si je clique sur l'une de ces options ? Si je sélectionne l'une de ces options, ce texte réservé doit être remplacé par l' option que j'ai sélectionnée, et le drapeau doit également apparaître. Voici ce que je vais faire je vais sélectionner cette option fermée. Je vais appuyer sur Control D ou Command D pour le dupliquer. Il est placé ici, mais ne vous inquiétez pas. Nous allons simplement le déplacer, qu'il soit juste ici. Je vais le sélectionner, et à l'aide des touches fléchées, je vais le déplacer vers la droite. Permettez-moi d'agrandir considérablement cet ensemble de composants, nous avons besoin de plus d'espace, et je vais le placer ici. Au total, nous devons avoir quatre options. Nous devons en avoir un pour l'anglais, un pour l'italien, un pour le polonais et un pour l'espagnol. Ici, je vais double-cliquer sur ce texte, et je vais le changer en anglais, et je dois également afficher ce drapeau. Je vais changer la valeur de cet espace réservé en anglais, comme suit. Ensuite, je vais le dupliquer pour obtenir quatre éléments différents, et je vais modifier leurs textes un par un. Le second sera italien. De toute évidence, le drapeau devrait également être changé. Le troisième sera polonais, permettez-moi également de changer le drapeau. Le dernier sera espagnol, et je vais changer le drapeau ici pour celui de l'Espagne. L'étape suivante consiste à créer nos interactions. Je vais sélectionner ce menu déroulant fermé. Je vais passer au prototype, et je vais juste le connecter à cet état ouvert. Cela devrait être On click, et l'animation sera Smart Animate. Ensuite, je vais sélectionner celui-ci et reconnecter à notre état fermé. Il n'est pas nécessaire de modifier aucune de ces options. Mais qu'en est-il de ceux-ci ? Je vais sélectionner cet élément en anglais et le connecter à cette variante anglaise. Je vais faire la même chose pour toutes ces options, une par une, et une de plus. Nous avons presque terminé, mais il reste encore une chose à faire. Si j'ouvre simplement ce menu déroulant, vous voyez quand une option est sélectionnée, lorsque je l'ouvre, je vois toujours cette option sélectionnée. C'est exactement ce que je veux. Je ne veux pas qu'il revienne à l'état par défaut. Chaque fois que je sélectionne l' anglais, par exemple, et que je l'ouvre, l'anglais doit être sélectionné par défaut. Pour cela, nous devons sélectionner ces variantes, maintenir la touche Shift enfoncée pour toutes les sélectionner. Dupliquez-les, appuyez sur Contrôle D ou Commande D, déplacez-les vers le bas. Ensuite, nous devons sélectionner cette liste, la copier, appuyer sur le contrôle C ou la commande C, et nous devons la coller dans ces variantes. Je vais sélectionner l'anglais, appuyer sur Control V ou Command V, italien également, le polonais et l'espagnol. Ce que nous devons faire, c'est modifier l'état de ces options. Par exemple, pour cet anglais, je vais le sélectionner , passer au design, et ici je vais changer l'état de défaut à sélectionné. Je vais faire la même chose pour l'italien ici, je vais le changer en sélectionné. Pour le polonais, changeons-le en sélectionné. Enfin, pour l'espagnol, je vais le changer en sélectionné. La dernière étape consiste également à connecter ces variantes. Tout comme nous l'avons fait avec ces deux options de menu déroulant, je vais faire la même chose pour cela. Je vais sélectionner celui-ci, au prototype, le connecter à cette variante ouverte. Fais la même chose pour celui-ci, connecte-le à l'anglais. Je vais le faire pour toutes ces options, car cela devrait fonctionner dans les deux sens. Nous y voilà. Maintenant que nous avons terminé, notre menu déroulant interactif devrait fonctionner parfaitement. Essayons-le et voyons si cela fonctionne comme prévu. Je vais créer un cadre ici, appuyer sur A et créer un cadre de taille personnalisée. Ensuite, je vais passer aux actifs. À partir de là, je vais simplement glisser-déposer ce menu déroulant. Alignons-le au centre, et je vais sélectionner ce cadre, appuyer sur Play. Maintenant, je vais cliquer dessus. Nous y voilà. Notre menu déroulant s'ouvre, mais nous avons ici un problème. Comme vous pouvez le constater, lorsque je survole ces options, rien ne se passe. C'est parce que nous n'avons pas connecté ces états au sein de cet ensemble de composants. Faisons-le rapidement. Je vais sélectionner cette valeur par défaut, accéder au prototype, la connecter au survol. Cela devrait être While survoing et Smart Animate. Bien. Pour le suivant, je vais le sélectionner, le connecter à la sélection. Il doit s'agir de On click, Smart Animate. Ensuite, pour cette option sélectionnée, je vais sélectionner celle-ci, connecter comme ça, et elle devrait être Pendant le survol. Maintenant, ça devrait fonctionner. Ouvrons ce menu déroulant. Je vais passer la souris sur ces objets. Comme vous pouvez le constater, cela fonctionne parfaitement. Je vais maintenant sélectionner l'anglais. Nous y voilà. Lorsque j'ouvre ce menu déroulant, cet anglais est sélectionné par défaut. Mais nous avons ici un autre problème. Lorsque je sélectionne une option, cette icône ne pivote pas. C'est parce que nous avons oublié de faire pivoter ces icônes ici. Permettez-moi de les sélectionner toutes, maintenez simplement la touche Shift enfoncée et double-cliquez sur ces icônes. Accédez à Design, et ici je vais les faire pivoter de 180 degrés. Maintenant, tout devrait bien fonctionner. Actualisons la page. Je vais l'ouvrir. Je vais le mettre en italien, et c'est parti. Tout fonctionne comme prévu. Très bien les gars, c'est tout pour cette vidéo. J'espère que vous l'avez apprécié, et à la prochaine. 14. Notification animée: Dans cette vidéo, je vais vous montrer comment créer une notification animée dans Figma. Je vais pouvoir interagir avec elle. Si je le fais simplement glisser vers la gauche, comme vous pouvez le voir, ce bouton transparent apparaît et si je clique sur ce bouton transparent, il disparaîtra. Voyons comment créer un tel élément interactif. Dans le projet Figma , recherchez la page de notification animée. Comme vous pouvez le voir, j'ai déjà préparé cette page détaillée pour vous , cette carte de notification et cette carte à boutons transparents. Voici comment cela devrait fonctionner. Une fois que nous aurons prévisualisé cette page détaillée , au bout de trois secondes , cette carte de notification devrait apparaître, puis lorsque je la fais glisser vers la gauche, ce bouton transparent devrait apparaître et il devrait également être interactif. Que devons-nous faire ? Tout d'abord, je vais sélectionner cette carte de notification ici. Comme vous pouvez le voir, c'est un cadre réactif, mais je vais le placer dans un autre cadre. La raison en est que, comme point de départ, nous devons faire disparaître cette carte de notification. Nous devons le masquer d'une manière ou d'une autre et pour le masquer correctement, nous avons également besoin d'un cadre. Je vais cliquer dessus avec le bouton droit de la souris, et je vais cliquer sur la sélection du cadre. Renommons-le en notification. Nous y voilà. Ensuite, je vais en faire un composant comme d'habitude, et nous avons également besoin de quelques variantes. Mais avant de créer une variation, je vais modifier la hauteur de ce cadre car, comme je l'ai dit, à notre point de départ, nous ne devrions pas du tout pouvoir voir cette notification. Avant de créer la variance, je vais augmenter la hauteur de ce cadre, quelque chose comme ceci. Cela devrait fonctionner et ensuite je vais y ajouter une variante comme celle-ci. Nous avons ici deux variantes. Pour ce composant, nous devons avoir deux propriétés différentes. Nous devons avoir la propriété visible et la propriété claire. Pourquoi avons-nous besoin de ces deux propriétés ? Donc, comme je l'ai déjà dit, cette carte de notification ne devrait pas être visible et elle devrait apparaître au bout de quelques secondes. Comme point de départ, nous devons le cacher. C'est pourquoi nous avons besoin de la propriété visible et la propriété clear est utilisée lorsque nous devons faire apparaître ou disparaître ce bouton. Allons-y et créons ces propriétés. Je vais sélectionner cet ensemble de composants de notification et accéder à la section des propriétés de l'inspecteur de conception. Ici, renommons cette propriété 1 en visible, puis je vais appuyer sur ce bouton « Plus » pour créer une nouvelle propriété et je vais la nommer clairement, comme ça. Au total, nous avons deux propriétés. Maintenant, en ce qui concerne le point de départ, qui est cette variance, je vais changer la valeur de cette propriété visible en false car elle ne devrait pas être visible. Pour celui-ci, je vais changer la propriété visible en true car elle sera visible. Je vais maintenant sélectionner ces deux variantes et définir la valeur claire false car à ce stade, nous ne devrions pas pouvoir voir ce bouton du tout. Jusqu'ici, tout va bien. L'étape suivante consiste à masquer d'une manière ou d'une autre cette carte de notification. La façon dont nous procédons est la suivante. Puisque nous avons placé cette carte de vacances en forme de nœud dans un autre cadre, nous pouvons simplement la sélectionner ici dans notre variante, et en utilisant les touches fléchées, je peux simplement la déplacer vers le haut comme ça. Cependant, il est toujours visible. C'est parce que nous devons sélectionner notre variance ici et cocher la case relative au contenu de ce clip. Dès que je le fais, comme vous pouvez le voir, il disparaît, alors nous le masquons d'une manière ou d'une autre. Je vais accéder à l'onglet prototype et je vais connecter cette variante à cette variante. Le déclencheur doit être réglé sur Afterdelay. Je vais le régler sur 3 000 millisecondes ou trois secondes et nous avons besoin d'une animation intelligente. Allons-y, utilisons ce composant de notification et voyons comment cela fonctionne. Je vais en glisser-déposer une instance ici. Alignons-le sur le bord supérieur de notre écran, comme ceci. Je vais sélectionner cette page détaillée et cliquer sur « Play ». Ici, nous avons un problème et je pense que c'est parce que nous avons oublié de cocher cette case pour cette variante également. Je vais extraire le contenu ici et actualiser la page. Nous y voilà. Maintenant, cela fonctionne correctement. Cependant, nous avons besoin d'une marge supérieure. Nous n'avons aucune marge pour le moment. Voici ce que je vais faire je vais sélectionner cette carte ici dans ma deuxième variante, et je vais l'aligner vers le bas plutôt que vers le haut. Si je l'actualise maintenant, cela fonctionne très bien, mais ici, nous avons trop de marge , donc je pourrais peut-être l'aligner au centre à la place. Je pense que nous avons maintenant une marge supérieure suffisante. La première étape est terminée, mais qu'en est-il de l'interaction avec le glissement ? Pour cela, je vais intégrer ce bouton clair à l'intérieur de cette variante. Il suffit de le mettre à l'intérieur , de l'aligner au centre et de le déplacer vers la droite. Ensuite, je vais réduire son opacité à zéro pour cent pour le rendre invisible, car ici, comme vous pouvez le voir, la propriété clear est définie sur false nous ne devrions donc pas pouvoir voir ce bouton en particulier. Maintenant, nous avons besoin d'une autre variante. Je vais sélectionner celle-ci, cliquez sur l'icône « Plus » ici pour ajouter une autre variante. Voici ce que je vais faire maintenant. Je vais sélectionner ces deux éléments, la carte de notification et ce bouton clair, et à l'aide des touches fléchées, je vais tout déplacer vers la gauche, comme ça. Permettez-moi de sélectionner ce bouton transparent et d'augmenter l'opacité à 100 % pour le rendre à nouveau visible Nous devons le déplacer vers la gauche. Ça a l'air bien. Maintenant, créons une interaction entre cette variante et celle-ci. Pour le faire correctement, il est très important de sélectionner cette carte de notification, et non cette variante. Pourquoi ? Laisse-moi te montrer pourquoi. Si je sélectionne cette variante ici et que j' essaie de la connecter à cette variante je passe du déclencheur de « déclic » à « déglisser-déplacer  », regardez ce qui se passe. Vous voyez que dès que je la fais glisser un peu, cette animation sera jouée et c'est terminé. Ce n'est pas ce que nous voulons. Je veux vraiment pouvoir contrôler cette interaction par moi-même. C'est pourquoi j'ai dit que nous devions ajouter cette interaction à cette carte de notification elle-même, non à la variance. C'est un point très important à garder à l'esprit. Je vais supprimer cette interaction et, à la place, sélectionner cette carte de notification et la connecter à cette variante. Maintenant, si je le mets sur Undrag, tout devrait fonctionner correctement. Je peux le faire dans les deux sens. Je peux également sélectionner celui-ci, le reconnecter à celui-ci et régler le déclencheur Undrag et lancer une animation intelligente. Voyons si cela fonctionne correctement maintenant. Maintenant, je peux le faire glisser vers la gauche ou la droite, comme ça. Cela fonctionne très bien. Cependant, nous avons un problème ici. Comme vous pouvez le constater, il est en quelque sorte masqué à la fois sur le côté gauche et sur le côté droit. Nous devons régler ce problème. Si je sélectionne simplement cette instance et que j'essaie d'augmenter la largeur comme ça, voyons si cela résout le problème. Cela fonctionne très bien, mais nous avons maintenant ce problème. Comme vous pouvez le constater, il n'y a aucune marge entre les deux. C'est à cause de nos contraintes. Ici, je vais sélectionner ce bouton clair et, comme vous pouvez le voir, les contraintes sont définies en haut et à gauche. Si je le mets plutôt en haut et à droite, pour celui-ci également, je vais le régler en haut et à droite. Voyons si cela fonctionne. Cela fonctionne, mais maintenant nous avons trop de marge. Permettez-moi de le déplacer légèrement vers la gauche. Maintenant, cela semble beaucoup mieux, mais il nous reste encore une dernière étape à franchir. Nous devons également rendre ce bouton clair interactif. Allons-y. La seule chose à faire est de sélectionner cette variante, appuyer sur ce bouton de variantes publicitaires. Ensuite, je vais sélectionner les éléments qu'ils contiennent pour appuyer sur « K » pour sélectionner l' outil de mise à l'échelle et je vais simplement le réduire comme suit. Je vais fixer la valeur à 0,01. De plus, je vais réduire leur opacité à zéro pour cent pour les faire disparaître complètement. Maintenant, si je sélectionne ce bouton transparent ici, passe au prototype et que le connecte à cette dernière variante ici, le déclencheur devrait être décliqué, Smart Animate. Maintenant, ça devrait fonctionner. Essayons-le. Nous y voilà. Tout fonctionne comme prévu. Essayons-le encore une fois. Notre notification interactive est également prête. Terminons cette vidéo et je vous verrai dans la prochaine. 15. L'île dynamique de l'iPhone: Dans cette vidéo, je vais vous montrer comment créer cette île dynamique interactive pour iPhone. Sans plus tarder, allons-y. Veuillez rechercher la page dynamique de l'île de l'iPhone dans le fichier de conception Figma. Comme vous pouvez le voir, je vous ai déjà préparé une maquette. Nous avons également deux variantes de notre île dynamique. En gros, nous avons une île dynamique proche et une île dynamique ouverte. Que devons-nous accomplir à cet égard ? Par défaut, nous devrions pouvoir voir cette version fermée. Lorsque je clique dessus, son arrière-plan devrait s'agrandir et nous devrions également pouvoir voir tous ces éléments à l'intérieur. Ici, comme vous pouvez le voir, nous avons un cadre et à l'intérieur, nous avons deux éléments principaux. Nous avons cette caméra selfie. Je ne sais pas si tu peux le voir ou non, c'est tellement petit. Nous avons également ce wrapper qui rassemble tous ces éléments, tels que cette image de profil et tous ces éléments à l'intérieur. Comme d'habitude, nous devons en faire un composant, mais avant cela, je voudrais le placer dans un autre cadre. C'est tellement important. Si vous ne le placez pas dans un autre cadre, vous ne pourrez pas tout aligner parfaitement. C'est le point le plus important ici. Je vais cliquer dessus avec le bouton droit de la souris et cliquer sur «  Sélection du cadre » pour le placer dans un autre cadre. Appelons-la île. Parfait. Maintenant, je vais le transformer en un composant comme celui-ci et nous avons besoin d'une autre variante. Nous avons besoin d'une ouverture et d'une fermeture. Cet ensemble de composants doit avoir une propriété. Je vais renommer cette propriété en state, et je vais sélectionner ces variantes, et je vais changer cette valeur d'état de la valeur par défaut à ouverte. Je vais sélectionner cette variante et je vais changer la valeur de l'état en fermé. Maintenant, la seule chose que je vais faire est de sélectionner ce cadre d'îlot dynamique dans cette variante fermée. Je vais cocher les cases du contenu de ce clip. Maintenant, je peux continuer et modifier sa dimension. Comme vous pouvez le constater, cette enveloppe à l'intérieur est désormais masquée. Pourquoi ? Parce que nous cochons la case relative au contenu de ce clip. Quelle devrait être la dimension ? Laissez-moi le vérifier ici. La dimension doit être de 125 x 37. Je vais le sélectionner à nouveau, et je vais régler la largeur à 125 et la hauteur à 37, comme ça, mais nous n'avons pas terminé. Tout d'abord, pendant que ce cadre est sélectionné, je vais l'aligner au centre. Il doit être placé au milieu de tout ce cadre. Tu vois ce cadre ? Ensuite, nous devons modifier la caméra selfie car nous venons de la détruire. Nous avons ici la caméra selfie. La taille devrait être de 13 sur 13. Je vais changer sa dimension à 13 x 13. Nous y voilà. Nous devons également modifier son alignement. Ici, si je sélectionne cette option et que je maintiens la touche Alt ou la touche Option de mon clavier enfoncée, vous pouvez voir que le rembourrage supérieur est réglé sur vous pouvez voir que le rembourrage supérieur est réglé 12 et le rembourrage droit est réglé sur 133. Ici, je vais sélectionner ceci et je vais m' assurer d'obtenir exactement le même rembourrage. Laisse-moi le démonter. Ici, comme vous pouvez le voir, nous avons une décimale, je vais simplement la supprimer pour ce y également. Maintenant, je peux facilement régler le rembourrage sur 12 et le bon rembourrage doit être mesuré par rapport à l'ensemble de ce cadre, ce cadre extérieur, et il doit être réglé sur 133. Nous y voilà. Permettez-moi maintenant de sélectionner cette île dynamique ici. Je vais passer au prototype et le connecter à celui-ci. Le déclencheur doit être décliqué et l'animation doit être Smart Animate. Je vais sélectionner celle-ci, cette variante et la reconnecter à cette version fermée, comme celle-ci et Smart Animate. Essayons-le et voyons à quoi il ressemble. Je vais passer à Assets. À partir de là, je vais me rendre sur l'île dynamique de l'iPhone. Apportez-le ici. Permettez-moi de l'aligner au centre et il devrait être placé ici. Je vais changer son état par défaut en fermé. Maintenant, je vais sélectionner cette maquette et appuyer sur « Play ». Maintenant, je peux cliquer dessus. Regarde ce qui se passe. L'arrière-plan est une propriété animée. C'est ce que nous voulons. Nous voulons qu'il s'étende et s'effondre, juste comme ça. Cependant, je souhaite que les éléments de cet emballage soient réduits et disparaissent lorsque nous essaierons de fermer cette île dynamique. Je ne veux pas qu'il se déplace vers la droite. Ce n'est pas ce que je veux. Allons-y et réparons ça. Ici, à l'intérieur de cette variante fermée, je vais chercher un emballage et, comme vous pouvez le voir, il est placé juste ici. Je vais le réduire. Appuyons sur K sur mon clavier pour sélectionner l'outil de mise à l'échelle. Alors ici, je vais définir la valeur à 0,01. Je veux aussi qu'il se déplace ici , au centre, puis qu'il disparaisse. Je vais le déplacer juste là. La dernière étape consiste à réduire l' opacité de la couche jusqu'à zéro. Essayons-le encore une fois et voyons comment cela fonctionne. Nous y voilà. Tu vois la différence maintenant ? C'est ce que je voulais. Nous avons presque terminé. Cependant, je ne suis pas satisfait de l'animation. Nous n'avons aucun effet de rebond. Si vous regardez simplement celui-ci, vous verrez que nous avons cet effet de rebond, qui rend l'animation bien meilleure. Corrigons rapidement ce problème également. Je vais sélectionner celui-ci. Rendez-vous sur Prototype, cliquez sur cette interaction. Je vais changer la vélocité de Ease out à Quick et il en va de même pour cette variance. Je vais le sélectionner et changer la vélocité de Ease out à Quick. Maintenant, si on le vérifie, tout devrait fonctionner. Nous y voilà. Vous voyez, nous avons maintenant cet effet de rebond. C'est tout pour cette vidéo. J'espère que vous l'avez apprécié et je vous verrai dans le prochain. 16. Animation 3D dans Figma: Dans cette vidéo, nous allons créer une animation 3D ensemble dans Figma. Comme vous pouvez le voir, nous avons une carte de crédit et regardez ce qui se passe lorsque je souris sur cette carte. Tu vois ça ? Dès que je survole cette carte sa perspective passe à cette perspective éasométrique, puis deux autres cartes apparaissent. Ne vous inquiétez pas, ce sera beaucoup plus facile que vous ne le pensez. Analysons-le une fois de plus. abord, comme point de départ, nous devons voir une seule carte, cette carte bleue, et lorsque je la survole, sa perspective change comme ça. Ensuite, nous verrons apparaître ces deux cartes. Nous avons besoin de trois étapes différentes. Nous avons besoin de notre point de départ ou point A, puis du point B, qui est ici, et puis du point C, qui est la destination finale. Commençons maintenant à le créer. Si vous recherchez cette page d'animation 3D dans le fichier de conception Figma, vous pouvez voir que j'ai déjà préparé ce projet pour vous. Nous avons ici une section consacrée aux héros d'un site Web, et j'ai préparé trois cartes de crédit différentes. De toute évidence, nous pouvons aller de l'avant et créer cette interaction en utilisant des composantes et de la variance. Cependant, je vais vous montrer comment procéder ici en utilisant différents cadres pour vraiment comprendre les étapes à suivre. Je vais sélectionner ces trois cartes et les déplacer vers la première page d'accueil de mon ordinateur. Jusqu'ici, tout va bien. Maintenant, laissez-moi les aligner horizontalement comme ça. Qu'en est-il de l' ordre de nos cartes ? abord, nous devons voir cette carte bleue, puis la carte violette au milieu, et enfin la carte argentée en bas. Je vais voir la carte 3 ici en haut et la carte 1, qui était la carte argentée, se trouvera en bas. Maintenant, je vais sélectionner ces trois éléments, puis les aligner. Ce sera notre point de départ. Maintenant que ces trois cartes sont sélectionnées, je vais appuyer sur Ctrl+C ou Commande+C, sélectionner cette deuxième page d'accueil, appuyer sur Ctrl+V ou Commande+V pour les coller ici et maintenant il est temps de changer la perspective de ces cartes en perspective éasométrique. Je ne sais pas si vous connaissez le terme éasométrique ou non, mais laissez-moi vous montrer comment vous pouvez le faire. Pour changer la perspective de ces cartes, nous allons utiliser un plugin appelé asymétrique. Ici, si je vais dans Ressources et si je vais dans l'onglet Plugins, vous pouvez trouver de nombreux plug-ins ici. Nous avons différents types de plugins. Nous avons le plugin easometric ou easometric. Si vous ne voyez pas ces plugins, c'est très bien car je les ai déjà recherchés. Mais ici, vous pouvez rechercher easometric. Nous y voilà. Voici le plugin que nous allons utiliser. Ce plugin vous permet de changer la perspective de vos éléments, quelle qu'elle soit, vers une perspective éasométrique. Il vous suffit de cliquer sur Exécuter ici et d'appuyer sur Ouvrir Easometric. Mais pour pouvoir utiliser ce plugin, vous devez vous assurer de ne sélectionner qu'un seul cadre à la fois. Je vais sélectionner la carte 1 ici. Je vais accéder à un Easometric, appuyer sur Exécuter, ouvrir Easometric ici, et cette fenêtre apparaît. Nous avons ici différentes options à choisir. Nous avons la gauche, nous avons le coin supérieur gauche, nous avons le coin supérieur droit. Je pense que nous allons avoir besoin du haut à droite. Comme vous pouvez le voir maintenant, nous avons cette perspective éasométrique pour cette carte 1. C'est exactement ce dont nous avions besoin. Ensuite, je vais sélectionner cette carte 2 et faire de même. Vous pouvez simplement l'ouvrir ici et le sélectionner en haut à droite. Enfin, faisons-le pour cette carte 3. Nous y voilà. Nous avons maintenant trois cartes éasométriques et je vais toutes les sélectionner et modifier leur alignement comme je le souhaite. Comme dernière étape, nous allons sélectionner ces cartes ici, les copier, appuyer sur Ctrl+C, les coller ici, appuyer sur Ctrl+V ou Commande+V. Ensuite, appuyer sur Ctrl+V ou Commande+V. nous devons simplement sélectionner cette carte 3, maintenir la touche Shift enfoncée et utiliser les touches fléchées pour la déplacer vers le haut ou vers le bas. En gros, je l'ai déplacée de 80 pixels vers le haut. Maintenant, je vais sélectionner cette carte et la déplacer d'un pixel vers le bas. Maintenez la touche Shift enfoncée et déplacez-la vers le bas comme ceci. Nous devons maintenant créer nos interactions. Oui Je vais d'abord créer un délai supplémentaire, puis nous créerons également ce déclencheur de survol. Je vais sélectionner cette page d'accueil de bureau , accéder au prototype et la connecter à la page suivante. Le déclencheur sera After Delay, Smart Animate, et il devrait être Ease out. Je vais augmenter la durée ici, sinon ce serait trop rapide. Permettez-moi de l'augmenter à 1 000 millisecondes. Je vais cliquer sur Play ici pour en avoir un aperçu pendant une seconde. Nous y voilà. Nous sommes passés du point de départ au point B, et maintenant nous devons également atteindre le point C. Ici, je vais sélectionner cet écran et créer une interaction comme celle-ci. Ce sera après un certain temps, Smart animate 1 000 millisecondes. Pour cette étape, lorsque nous voulons passer de cette page à la destination, aucun délai n'est nécessaire. Je vais fixer ce délai à une milliseconde. Maintenant, je vais rafraîchir la page. Maintenant, cela semble plutôt bon, mais nous pouvons passer au niveau supérieur en ajoutant l'ombre à ces cartes pour essayer de le rendre plus réaliste. Je vais commencer par sélectionner ces cartes les passe toutes à la conception et je vais y ajouter des effets. Je vais m' assurer que j'ai l'effet Drop Shadow et me laisser modifier ses préférences. Ici, je vais régler le niveau de flou à 100 et ici le Y sera de 50, juste comme ça et l'opacité pourrait être réduite à 20 pour cent, quelque chose comme ça. Voyons maintenant à quoi ça ressemble. Tu vois que ça a l'air beaucoup mieux. Vous avez appris à créer cette animation, mais nous n'avons pas ce déclencheur. Maintenant, changeons un peu les déclencheurs. Ici. Je vais sélectionner cette page et supprimer cette interaction ici également. Maintenant, je vais sélectionner cette troisième carte et passer à la page suivante. Pour le déclencheur, je vais sélectionner en survolant la souris et il devrait être intelligent, mais d'ici à là, nous aurons besoin du déclencheur après délai. Nous n'avions pas du tout besoin de le supprimer , mais laissez-moi le créer à nouveau. Cela devrait se faire après un délai et une milliseconde, puis nous avons également besoin d'un déclencheur. Quel genre de déclencheur ? Pour cela, nous pouvons utiliser le déclencheur de sortie de la souris. Donc, voici ce que je vais faire. Je vais sélectionner ces trois cartes et ajouter un déclencheur à chacune d'elles. Voyons si cela fonctionne ou non. Pendant qu'ils sont sélectionnés, créez une connexion avec le premier écran et déclencheur sera le départ de la souris. Je vais rejouer ce flow. Je vais le survoler. Nous y voilà, et maintenant, regardez ce qui se passe. Tu vois ça ? Cela fonctionne très bien. Cependant, c'est assez lent. Je vais réduire la durée ici. Permettez-moi de sélectionner celui-ci et de changer la durée de 1 000 millisecondes à peut-être 500 millisecondes Pour ces déclencheurs également, je vais la régler sur 500, celui-ci sur 500 également et enfin, pour celui-ci, je vais la régler sur 500. Essayons-le encore une fois. Je vais le survoler, et c'est parti. Je vais m'en aller. C'est magnifique, n'est-ce pas ? Maintenant, en guise de défi, je vous invite à recréer cette interaction à l'aide de composants interactifs. Je te verrai dans la prochaine vidéo. 17. Chargement de l'animation: [MUSIQUE] Bon retour. Dans cette vidéo, je vais vous montrer comment créer un bouton interactif avec une animation de chargement. Regardez ce qui se passe lorsque je clique sur ce bouton de paiement. Tu l'as vu ? Lorsque j'ai cliqué sur ce bouton de paiement, une animation est apparue mais une fois le traitement terminé, cette icône de ticker animée est apparue. Laisse-moi le jouer encore une fois. Je vais cliquer dessus. Nous voyons cette toupie et enfin cette animation en forme de tique. Plongeons-nous dedans et créons-le. Dans le fichier de projet Figma, rendez-vous sur la page de chargement de l'animation et, comme vous pouvez le voir, rien ne s'y trouve car je veux vous montrer comment créer rapidement le spinner à partir de zéro. Pour ce faire, nous n' avons besoin que d'une ellipse. Je vais choisir l'outil Ellipse, maintenir la touche Shift enfoncée, cliquer avec le bouton gauche de la souris et faire glisser la souris pour créer un cercle parfait. La taille n'a pas vraiment d'importance, mais je vais la maintenir à 24 x 24 pixels. Ensuite, je vais zoomer comme ceci et lorsque vous passez la souris dessus, vous voyez ce petit cercle qui indique Arc. Je vais cliquer dessus. Maintenant que c'est sélectionné, je vais passer à l'inspecteur de conception et, comme vous pouvez le voir ici, nous avons quelques propriétés à modifier. Vous voyez ce ratio de zéro pour cent, je vais l'augmenter. Ici, si je l'augmente à 20, regardez ce qui se passe. Vous voyez maintenant que nous avons un trou au milieu et nous pouvons facilement contrôler ce ratio. Je vais changer l'épaisseur pour quelque chose comme ça. Je pense que 75 % semblent bons et ensuite je vais y ajouter un dégradé. Je vais me diriger vers Feel et ici je vais changer le type de Solid à Angular. Je ne vais pas utiliser le linéaire, je vais utiliser Angular pour obtenir ce dégradé. C'est exactement ce dont nous avons besoin pour une centrifugeuse. Maintenant, je vais changer la direction de ce dégradé comme ceci car le point de départ devrait être ici et nous avons pratiquement terminé. Ce sera notre spinner. Je vais l'appeler Spinner. Il est maintenant temps de créer cette animation. Cette animation de spinner. Pour ce faire, comme toujours, nous allons utiliser un jeu de composants. Permettez-moi d'en faire un composant comme celui-ci, puis nous aurons besoin de quelques variantes. Je vais cliquer sur ce bouton plus pour ajouter une variante. De quoi avons-nous besoin ? Nous devons sélectionner le spinner à l'intérieur et le faire pivoter, mais nous ne pouvons pas le faire pivoter de 360 degrés. n'est pas ainsi que cela fonctionne, car de cette façon, Figma ne peut pas créer cette animation de spinner, cette animation en boucle que nous recherchons. Alors, que devons-nous faire ? Eh bien, nous devons le faire pivoter de 90 degrés dans le sens des aiguilles d'une montre. Je vais maintenir la touche Shift enfoncée et m'assurer que vous sélectionnez cette couche de spinner dans votre variante. Ne sélectionnez pas votre variante elle-même. Je vais sélectionner ce spinner et ici je vais changer la valeur de rotation à moins 90 pour le faire pivoter dans le sens des aiguilles d'une montre. Ensuite, je vais également sélectionner cette variante, et je vais la dupliquer à nouveau. Ici, je vais double-cliquer pour sélectionner le spinner et le faire pivoter de 90 degrés. Nous devons obtenir moins 180. Ici, vous verrez 180 parce que lorsque vous avez 180 sur 360, peu importe que vous ayez moins ou plus. C'est pourquoi Figma le change automatiquement en 180. La seule chose importante est que vous voyiez cette forme. Ensuite, je vais sélectionner cette variante, appuyer sur Plus, double-cliquer pour sélectionner le spinner et faire pivoter de moins 90 degrés. Ici, nous devons en avoir 90. Nous avons quatre variantes différentes et nous pouvons maintenant commencer à les connecter. Je vais sélectionner cette variante par défaut , accéder à l'onglet Prototype et la connecter à celle-ci. Cela devrait être après un délai, et le délai sera d'une milliseconde. Ici, je vais changer la durée à 300, et je vais répéter la même chose après un délai, une milliseconde, et je vais le faire également pour celle-ci, après un délai, une milliseconde et enfin, je vais reconnecter cette dernière variante à notre première variante. Parce que nous voulons mettre cette animation en boucle. Après un délai d'attente, une milliseconde et c'est terminé. Testons rapidement cette animation. Je vais créer un cadre comme celui-ci. Permettez-moi de changer la couleur de l' arrière-plan en noir, passer aux ressources, et à partir de là, de passer au chargement de l'animation et de glisser-déposer une instance de ce composant ici. Parfait. Sélectionnez ce cadre et jouez-le. Cela fonctionne, mais je ne suis pas satisfait de sa durée, de sa rapidité. Je vais faire en sorte que ce soit un peu plus rapide. Je vais sélectionner toutes ces variantes, au prototype et changer cette valeur de 300 millisecondes en 150 à la place. Voyons si cela fonctionne beaucoup mieux. Ça a l'air beaucoup mieux maintenant. Notre centrifugeuse de chargement a l'air bien. Il est maintenant temps de créer ce bouton. Pour cela, je vais simplement appuyer sur T sur mon clavier, créer une couche de texte et la taille de police sera 17 points. Tapons Pay parce que nous allons créer un bouton de paiement, appuyer sur Shift et A pour y ajouter une mise en page automatique et je vais l' aligner au centre. Ce bouton doit avoir une couleur de fond noire. Juste comme ça et aussi le rembourrage vertical sera de 16 et ici je vais augmenter le rembourrage horizontal à environ 70 pour le moment. Ça a l'air très bien. Plus tard, nous pourrons simplement modifier la taille lorsque nous créerons une instance de ces composants. Ce sera notre variante par défaut. Je vais le renommer par défaut, et je peux aussi le rendre un peu arrondi. Je vais régler le rayon d'angle à quelque chose comme 12 et transformons-le en un composant. Nous avons maintenant besoin de quelques variantes. Je vais y ajouter une variante et cette deuxième variante s' appellera loading. Parfait, et c'est ici que nous devons ajouter cette centrifugeuse de chargement. Je vais accéder à Assets et à partir de là, je vais simplement glisser-déposer ce spinner de chargement dans mon bouton ici. Mais là, nous avons un problème. Comme vous pouvez le constater, la largeur de ce bouton a été modifiée. C'est parce que l'option de redimensionnement de ce bouton est configurée pour klaxonner. Je vais le changer en largeur fixe, et simplement diminuer la largeur à 170, comme ceci, assurez-vous que vous l' avez également fixée et en ce qui concerne la marge entre ces deux éléments, je vais la régler à peut-être huit pixels. Nous avons notre état par défaut, nous avons notre état de chargement. Allons-y, connectons-les et voyons comment cela fonctionne. Je vais créer un prototype, créer une interaction comme celle-ci et le déclencheur doit se faire en un clic, animation intelligente et une durée peut être de 150, c'est très bien. ne reste plus qu'à créer un cadre et à l'essayer. Nous avons ici ce bouton par défaut. Je vais sélectionner ce cadre. Appuyez sur Play. Laisse-moi cliquer dessus. Nous y voilà. Cela fonctionne, mais nous avons ici un autre problème. La hauteur de notre bouton a également été modifiée. Nous devons également résoudre ce problème. Tu sais quoi faire ici. Comme vous pouvez le constater, la hauteur est fixée à 53. Je vais changer son option de redimensionnement en hauteur fixe et ici je vais également la changer en hauteur fixe et la hauteur sera de 53. Permettez-moi de rafraîchir la page une fois de plus. Ça a l'air très bien. Quelle est la prochaine étape ? Lorsque nous cliquons sur ce bouton de paiement, une fois que nous voyons ce spinner en cours de chargement, nous devons également voir cette animation. Nous pouvons créer cette animation de tiques dans Figma, mais cela va prendre beaucoup temps et ce n'est pas idéal. Au lieu de cela, nous allons utiliser un plugin qui s'appelle Lottie animation. Lottie met à votre des éléments animés que vous pouvez utiliser dans vos projets. En gros, cela vous permet de convertir une animation en fichier GIF et de l'utiliser dans votre projet, car Figma lit les fichiers GIF. Ici, je vais ajouter une autre variante, puis je vais aller dans Ressources, Plugins et chercher Lottie. Vous voyez, ici, nous avons les dossiers de Lottie. Je vais le lancer. Je suis déjà connecté. Assurez-vous de créer un compte et de vous connecter à votre compte. Ici, dans la barre de recherche, je vais chercher une coche. Comme vous pouvez le constater, vous avez plusieurs options. Vous pouvez passer à la page suivante et explorer les différentes options ici. Je vais simplement passer à la page précédente et pour cette interaction, je vais utiliser celle-ci. Je pense que ça a l'air plutôt bien. Ici, nous pouvons prévisualiser l'animation et vous pouvez également la personnaliser. Si vous le souhaitez, vous pouvez personnaliser la couleur, la couleur de fond, comme vous le souhaitez. Ici, comme mon bouton est noir, je vais également changer la couleur de l'arrière-plan en noir, puis je vais l'insérer au format GIF, comme ceci. Je pense que leur petite taille fonctionnerait. Appuyez sur Insérer et comme vous pouvez le voir, j'obtiens ce fond noir. Dans votre cas, vous pouvez voir cette icône en forme de coche, mais voici comment modifier l'aperçu ici. Si vous sélectionnez cette option et que vous accédez à la section des champs, cliquez simplement ici et vous verrez cette option en bas. Si vous utilisez ce curseur, vous pouvez simplement sélectionner l' aperçu car je vais pouvoir prévisualiser la dernière image ici, puis je vais la réduire. Ici, la largeur et la hauteur de cette centrifugeuse sont réglées sur 24 par 24. Je vais sélectionner celui-ci et régler la largeur et la hauteur sur 24 également , puis je vais le remplacer par ce spinner, comme celui-ci. Ici, laissez-moi sélectionner ce spinner et le supprimer. La seule chose que nous devons faire maintenant est de créer un lien entre les deux. Je vais sélectionner cette variation. Je vais passer au prototype et le connecter à celui-ci. Il devrait apparaître après un certain délai. Ici, je vais le régler après un délai. Huit cents millisecondes, c'est bien, et ce sera Smart Animate. Je veux aussi me débarrasser de ce texte, je vais également supprimer ce texte et maintenant essayons-le et voyons comment cela fonctionne. Je vais toucher mon salaire. Nous y voilà. Cela fonctionne très bien. Mais ici, nous avons ce problème, comme vous pouvez le voir, il revient en boucle encore et encore. C'est le problème avec Lottie Animation. Malheureusement, je n'ai pas trouvé d'option pour désactiver ce comportement en boucle. Cependant, j'ai pu résoudre ce problème à l'aide d'une astuce. Voici ce que je veux faire je vais sélectionner celle-ci et simplement ajouter une autre variante , puis je vais revenir aux fichiers Lottie ici et rechercher cette animation en particulier. Je vais chercher une tique. Et voilà, ouvrez-le, changez la couleur de fond. Mais cette fois, je ne veux pas l'insérer au format GIF. Je vais l'insérer au format SVG. Lorsque vous l'insérez au format SVG, vous obtenez en gros une icône statique et c'est exactement ce dont j'ai besoin maintenant, je vais l'insérer au format SVG. Nous y voilà. Débarrassons-nous de celui-ci et je vais simplement le sélectionner, le réduire. Je vais appuyer sur K sur mon clavier pour sélectionner l'outil de mise à l'échelle et régler la largeur et la hauteur sur 24, comme ceci et maintenant je vais sélectionner celui-ci et le connecter à la dernière variante. Ici, nous avons besoin d'une animation après délai et cela ne devrait pas être intelligent. Je vais le mettre en instance car une fois l' animation terminée, je veux voir instantanément cette icône statique. Maintenant, je pense que ça devrait très bien fonctionner. Je vais y jouer encore une fois. Appuyez sur Pay. Nous y voilà. Cela a très bien fonctionné et d'ailleurs, ce bouton est réactif. Maintenant, si je veux modifier sa taille, je peux simplement sélectionner cette instance ici et je peux simplement ajuster sa largeur à ma guise. Je peux également régler sa hauteur et cela fonctionnerait très bien. Très bien, les gars, terminons cette vidéo. J'espère que vous l'avez apprécié, et je vous verrai dans le prochain. 18. Gradient en maille animé: Dans cette vidéo, nous allons créer un dégradé de maillage animé dans Figma. En gros, un dégradé de maillage est ce que vous voyez ici. Quelques dégradés sont mélangés les uns aux autres. Comme vous pouvez le constater, toutes ces couleurs bougent constamment. Voyons comment recréer ce dégradé de maillage animé dans Figma. Si vous accédez à la page de dégradé de maillage animée dans le fichier de projet Figma, vous pouvez voir que j'ai déjà préparé cette capture d'écran de ce site Web de Stripe comme référence. Pour créer ce dégradé de maillage animé, nous devons d' abord créer ce dégradé de maillage. Pour ce faire, nous avons besoin d'un cadre. Je vais appuyer sur « A » sur mon clavier et je vais choisir ce cadre de bureau ici, et créer ce dégradé. Ce dont nous avons besoin, c'est de quelques formes aléatoires, de quelques blobs aléatoires pour créer ces blobs, je vais utiliser un plugin appelé blob. Ici, je vais accéder à l'onglet plugins, et à partir de là, je vais chercher un blob. Nous y voilà. C'est le plug-in que je vais utiliser. Vous pouvez utiliser n'importe quel autre plug-in de votre choix, ou vous pouvez même créer des formes aléatoires à l'aide de l'outil à stylet qui vous convient. Mais je préfère utiliser ce plug-in pour accélérer le processus. Je vais le lancer. Ici, comme vous pouvez le constater, cela nous permet de contrôler la complexité et le caractère unique de ce blob. Je vais appuyer sur « Insérer » pour ajouter un blob. Nous y voilà. Je vais modifier la complexité pour la rendre un peu plus unique. Cela s'insère, et je vais répéter ce processus encore et encore et simplement modifier ces deux variables pour créer des formes nouvelles et uniques. Laisse-moi le faire rapidement. Je pense que c'est suffisant pour le moment. Nous avons de nombreux blobs différents. Maintenant, je vais toucher tout ce cadre de bureau avec ces taches. Je vais en mettre un ici. Ce n'est pas dans notre cadre, ne vous inquiétez pas, nous les déplacerons à l'intérieur plus tard. Je vais en mettre un juste là, peut-être le réduire un peu. Mettez-le ici, et faites la même chose pour l'ensemble du cadre. Je vais accélérer ce processus. Nous y voilà. Notre cadre est rempli de ces taches. Je vais tous les sélectionner dans ma liste de couches. Je vais m'assurer qu' ils sont dans mon cadre. Juste comme ça. L'étape suivante consiste à changer la couleur de ces blogs un par un. Je vais sélectionner celle-ci, la toucher et en utilisant cette pipette, je vais choisir cette couleur rouge et je vais faire de même pour toutes les autres taches. Peut-être du violet pour celui-ci, pour celui-ci je vais choisir du jaune. Je vais accélérer ce processus. Nous y voilà. Nous avons maintenant des couleurs aléatoires pour ces blobs. Maintenant, nous devons les mélanger. Je vais tous les sélectionner, appuyer sur « Control G » ou « Command G » pour les regrouper. Ensuite, rendez-vous dans la section des effets, cliquez sur ce bouton plus et je vais y ajouter l'effet de flou de couche, comme suit. Maintenant, à partir des paramètres avancés, je vais augmenter considérablement le niveau de flou et m' assurer qu'ils se fondent parfaitement. Juste comme ça. Je vais l'augmenter encore. Quelque chose comme ça devrait fonctionner. Je peux maintenant modifier la taille de ces blobs et également changer leur ordre ici en fonction de mes besoins. Quelque chose comme ça devrait fonctionner. Nous avons presque terminé. Cependant, ce dégradé semble assez plat. Il n'a aucune texture. Je vais y ajouter du bruit pour ce faire, je vais utiliser un autre plugin appelé noise. Laisse-moi le chercher ici. Nous y voilà. Je vais le lancer. Ici, vous pouvez régler ce bruit comme vous le souhaitez. Vous pouvez modifier la densité, le contraste, etc. Pour l'instant, je vais juste modifier la densité. Je pense que quelque chose comme ça devrait fonctionner. Je vais appuyer sur cette icône en forme de coche comme ceci. Comme vous pouvez le voir maintenant, ce bruit a été ajouté à ma toile. Il n'est pas encore dans le cadre. Je vais le déplacer à l'intérieur comme ça. Je vais l'étendre comme ça. Mais c'est noir. Ça n'a pas l'air bien. Voici ce que je vais faire je vais réduire l' opacité de façon spectaculaire. Je vais le régler à peut-être 10 %. Je peux même le réduire à six pour cent, ça a l'air bien. Je vais le déplacer dans ce groupe. Permettez-moi d'appeler ce groupe gradient. Maintenant que notre dégradé de maillage est prêt, il est temps de l'animer. La seule chose que nous devons faire est la suivante. Nous devons simplement sélectionner ce bureau, le dupliquer, puis sur l'écran suivant, comme destination, nous devons déplacer ces blobs. Je vais sélectionner celui-ci, par exemple ce vecteur, le déplacer vers le bas et déplacer ce violet vers le haut et l' agrandir. Juste comme ça. Je peux aussi déplacer le jaune vers le haut. Je peux modifier son ordre et l'agrandir beaucoup, comme ça. Ensuite, je vais déplacer tout le reste un par un. Nous voulons juste faire savoir à Figma que ces blobs doivent être déplacés et redimensionnés. Je vais sélectionner celui de bureau, accéder à l'onglet prototype et créer simplement une connexion entre ces deux cadres. Le déclencheur se fera après un délai. De toute évidence, le délai sera d'une milliseconde et le type d'animation doit être Smart Animate. Ici, la durée devrait être de 10 000 millisecondes car nous voulons que ces blobs se déplacent si lentement. Juste comme ça, et pour boucler cette animation, je vais sélectionner cette deuxième image et reconnecter à cette première image. Tout le reste doit être intact. Maintenant, laissez-moi appuyer sur ce bouton Play et voyons le résultat. Toutes ces couleurs se déplacent en douceur. Si vous le souhaitez, vous pouvez ajouter d' autres couleurs à ce dégradé et même ajuster la quantité de flou. Voyons maintenant si nous pouvons d'une manière ou d'une autre masquer ce dégradé, comme ce que nous avons ici sur ce site Web à rayures. C'est tellement simple. Je vais créer un rectangle ici, comme celui-ci, comme celui-ci, et pendant qu'il est sélectionné, je vais appuyer sur « Entrée » pour entrer en mode édition. Je vais saisir ce nœud en bas à droite, Je vais saisir ce nœud en bas à droite maintenir la touche Shift enfoncée et le déplacer vers le haut comme ceci. Je peux aussi prendre celui-ci et le déplacer vers le bas. Cliquez ensuite sur « Terminé » dans la liste des couches Je vais déplacer ce rectangle et le placer sous notre groupe de dégradés. Nous ne devrions pas être en mesure de le voir. Avant de masquer ce dégradé, je vais sélectionner ce rectangle, appuyer sur « Control C », sélectionner cette deuxième image appuyer sur « Control V » et la faire descendre également, car nous avons besoin de cette couche sur les deux écrans. Ensuite, je vais sélectionner ces deux couches, le groupe de dégradés et ce rectangle que nous venons de créer Accédez à la barre d'outils et cliquez sur ce bouton comme suit. Maintenant, comme vous pouvez le voir, nous avons ce masque. Faisons la même chose pour cet écran, c'est bien. Si je sélectionne simplement celui de bureau et que je clique sur « Play », comme vous pouvez le voir, nous avons ce dégradé de maillage animé masqué à l'intérieur de cette forme. Les gars, c'est tout pour cette vidéo. J'espère que vous l'avez apprécié et je vous verrai dans le prochain. 19. Animation de défilement: [MUSIQUE] Le site Web d'Apple a été une excellente source inspiration en matière de conception et d' interaction pour de nombreux concepteurs d'UI UX, en raison de ses incroyables pages d'apprentissage dotées d'animations fluides. Dans l'épisode d'aujourd'hui, je vais vous montrer comment recréer la page d'apprentissage d'Apple Studio Display, y compris cette animation fluide dans Figma. Plongeons-nous dedans. Si vous accédez au site apple.com et que vous ouvrez le menu Mac ici, vous pouvez ouvrir le menu de l' écran. À partir de là, si vous sélectionnez Studio Display, cette page d'apprentissage se charge. Si je fais défiler la page vers le bas, vous verrez que cette animation se joue. C'est très doux. Enfin, nous en viendrons à ce point. Si je continue à faire défiler la page vers le bas, regardez ce qui se passe. Le Studio Display apparaît en douceur et finalement ces deux couches de texte s'estompent. Analysons-le d'abord. Nous devons nous assurer que nous avons cette image, donc je l'ai déjà téléchargée. De plus, cette image Studio Display devrait occuper toute la largeur et la hauteur disponibles de notre écran, comme ce que nous voyons ici. Juste au milieu, nous avons besoin de cette couche de texte. Une fois cette transition effectuée, cette couche de texte devrait disparaître et ce Studio Display devrait être réduit, et enfin, ces deux couches de texte devraient disparaître. Laissez-moi vous montrer comment vous pouvez le faire rapidement dans Figma. Ici, j'ai déjà préparé cette image Apple Studio Display et j'ai également préparé ces deux couches de texte. Pour cette animation, je vais appuyer sur A et je vais créer un cadre de taille personnalisée. Ici, je vais régler la largeur et la hauteur à 1920 x 1080 respectivement, juste comme ça. Ensuite, je vais glisser-déposer cette image dans ce cadre, comme ceci. Vous devez vous assurer qu'il est agrandi comme ça , car nous voulons juste voir le fond d'écran pour le moment. Ensuite, nous devons apporter ce texte ici même. Laisse-moi le glisser-déposer. Je vais le rendre blanc comme ça et je vais l'aligner au centre à la fois horizontalement et verticalement. C'est la première étape. Ensuite, je vais sélectionner cette image 1, je vais la dupliquer, appuyer sur Contrôle D ou Commande D, faire tomber comme ceci. Dans cette étape, nous devons réduire la taille de ces deux couches. Je vais maintenir la touche Shift enfoncée et les sélectionner tous les deux. Maintenant, je vais appuyer sur K pour sélectionner l'outil de mise à l'échelle, maintenir les touches Shift et Alt enfoncées pour les réduire proportionnellement, comme ça. Je vais les réduire et les augmenter. Ensuite, je vais sélectionner cette couche de texte et régler son opacité à zéro pour cent car elle doit disparaître. Ensuite, je vais dupliquer à nouveau ce cadre , le démonter. Cette fois, je vais déplacer ce cadre vers le haut comme ceci. Ici, nous devons placer ces deux couches de textes. Je vais donc les apporter ici. Ça a l'air bien. Mais pour animer ces couches de texte, comme nous le voyons ici, nous devons nous assurer que ces deux couches de texte sont également placées sur la deuxième image. Je vais appuyer sur Contrôle C ou Commande C, sélectionner l'image 2, appuyer sur Contrôle V ou Commande V, mais ces deux couches de texte doivent être masquées d'une manière ou d'une autre. Je vais maintenir la touche Shift et la barre d'espace mon clavier enfoncées et les faire baisser comme ça. Maintenant, ils sont toujours dans le cadre 2 mais nous ne pouvons pas le voir. Nous avons presque terminé. Il suffit d'ajouter les interactions. Je vais sélectionner ce cadre 1, je vais me rendre dans l'onglet prototype juste ici. Maintenant, je peux simplement connecter ces deux écrans comme ça. Je vais régler la gâchette sur touche. Ici, je vais appuyer sur la touche flèche droite de mon clavier et l'animation va être intelligente, facile à utiliser. Réglons ça à 1000 millisecondes, ça va suffire, je pense. Faisons de même pour cet écran. Je vais les connecter. Ce sera clé, Smart Animate et 1000 millisecondes. Essayons-le et voyons à quoi il ressemble. Bien. Je vais appuyer sur la flèche droite de mon clavier. Agréable. Comme vous pouvez le constater, nous avons de nouveau eu cette animation fluide. Ici, nous avons un problème. Ces couches de textes apparaissent , mais elles doivent s'estomper. Nous devons faire un ajustement ici. Si vous passez simplement à l'image 2 et que nous sélectionnons ces deux couches de texte ici, nous pouvons réduire l' opacité à zéro pour cent. Maintenant, cela devrait très bien fonctionner. Essayons-le encore une fois. Bien. Nous y voilà. Nous avons maintenant cette belle transition en douceur. 20. Barre d'onglet animé: [MUSIQUE]. Dans cette vidéo, nous allons créer ensemble une barre d'onglets animée, comme celle que vous voyez ici. Affirmons-nous. Donc, ici, dans le fichier de projet Figma, vous devez poursuivre et rechercher la page animée de la barre d'onglets. Et à l'intérieur, vous pouvez voir que j'ai déjà préparé quelques icônes pour vous. Donc, généralement, pour un onglet, ou si nous avons besoin de deux états différents pour nos icônes, nous devons avoir l' état par défaut et l'état sélectionné. C'est pourquoi j'ai préparé ici deux signes différents pour ces icônes, le signe de contour et le style uni. Puisque nous allons les transformer en composants, il est très important de savoir comment les nommer correctement, car Figma va les classer en fonction de leurs noms. Nous avons donc Home forward slash Solid. Pour celui-ci, nous avons la page d'accueil Forward slash Outline. Il en va de même pour toutes ces autres icônes. La première étape consiste donc à transformer nos icônes en composants. Je vais donc tous les sélectionner, accéder à la barre d'outils et à partir de là, sélectionner Créer plusieurs composants. Ensuite, je vais sélectionner ces icônes de plan, les dupliquer pour simplement créer une instance de ces composants. Je vais maintenir la touche Shift de mon clavier enfoncée et, à l'aide des touches fléchées, je vais les déplacer vers le bas comme ceci. Comme vous pouvez le constater, les icônes sont différentes ici, ce qui indique qu'il s'agit des instances de ces composants car nous ne souhaitons pas utiliser les composants principaux dans notre conception. Pendant qu'ils sont sélectionnés, je vais leur ajouter une autre mise en page. Alors appuyez sur Shift et A. Et voilà. Je vais l'appeler barre d'onglets. Pour cette barre d'onglets, utilisons une couleur de fond. Je vais y ajouter un remplissage. Il va être blanc. Alignons tout au centre. Modifions également le rembourrage ici. Je vais régler le rembourrage vertical sur 24. En ce qui concerne le rembourrage horizontal, réglons-le à quelque chose comme 66. C'est très bien. Je vais augmenter l'espacement entre environ 54. Jusqu'ici, tout va bien. Maintenant, je vais aller de l'avant et arrondir complètement cette barre d'onglets. Plus tard, nous pourrons changer son style, mais pour l'instant, je préfère avoir une barre d'onglets arrondie ici. Prévisualisons à nouveau notre barre d' onglets, voyons ce dont nous avons besoin. Lorsqu'un onglet est sélectionné, l'icône doit être remplacée par une icône solide. Nous devons également voir ce cercle derrière cet onglet. Je vais commencer par créer un cercle ici. Laisse-moi créer un cercle. Juste comme ça. Ne t'en fais pas pour ça. Cela prend de la place. Nous allons régler ce problème. Nous avons juste besoin de changer la couleur également. Je vais le changer en bleu, quelque chose comme ça. Tant qu'il est sélectionné, je vais appuyer ce bouton plus juste ici, qui indique la position absolue. Nous y voilà. Il ne prend plus de place. Je vais m'assurer qu'il est placé au-dessus de tous ces onglets. Sinon, nous ne pouvons pas voir nos onglets. Changeons sa dimension à 40 x 40. Je vais m'assurer qu'il est aligné avec mon onglet ici. Je vais le déplacer vers la gauche. Si je maintiens la touche Alt ou la touche Option de mon clavier enfoncée, vous pouvez voir que nous avons une marge de huit sur tous les côtés. Ensuite, nous devons changer cette icône de contour en solide. Cela va être si simple puisque nous avons transformé toutes nos icônes en composants, je vais sélectionner celle-ci, Home Outline, et passer à l'inspecteur de conception. Comme vous pouvez le voir, nous avons ce menu déroulant, et je vais l'ouvrir. Je vais le changer en solide. Nous y voilà. Ensuite, nous devons changer sa couleur en blanc et notre barre d'onglets est prête. Maintenant, nous devons transformer tout cet onglet en un composant, car nous allons y ajouter plusieurs variantes. Je vais sélectionner la barre d'onglets et cliquer simplement sur ce bouton pour en faire un composant et appuyer sur ce bouton pour y ajouter quelques variantes. Au total, nous avons besoin de quatre variantes car nous avons quatre onglets différents. Bien. Pour cet ensemble de composants, nous devons avoir une propriété, et je vais la nommer tab. Ensuite, sélectionnons cette première variante et changeons la valeur en home, ce qui signifie que l'onglet d' accueil est sélectionné. Je vais sélectionner celui-ci et le changer en favori. Bien. Sélectionnons celle-ci et changeons la valeur de cette propriété d'onglet en notification. Enfin, pour celui-ci, changeons-le en message. Nous devons maintenant modifier ces variantes une par une. Je vais donc commencer par le cercle. Je vais le sélectionner ici. Maintenez la touche Shift enfoncée et déplacez-la vers la droite. Juste comme ça. Alignez-le avec cette icône de signet. Maintenant, je vais sélectionner l'icône Ma maison ici, changer son type de plein à contour. Ici, pour ce signet, je vais le sélectionner, changer son type en solide et changer sa couleur en blanc. Je vais faire la même chose pour tous ces onglets. Pour celui-ci, je vais sélectionner l'ellipse, maintenir la touche Shift enfoncée, la déplacer vers la droite et la placer derrière cette icône en forme de cloche. Nous y voilà. Sélectionnez cette icône d'accueil et remplacez son type par un contour. Je vais sélectionner cette icône en forme de cloche, la changer en solide et la rendre blanche. Enfin, pour celui-ci, sélectionnez-le, maintenez la touche Shift enfoncée et placez-le derrière une icône de message. Juste comme ça, assurez-vous qu'il est parfaitement aligné avec votre icône. Changez le type de cette icône d' accueil en plan. Je vais sélectionner cette icône de message, transformer en icône fixe et la rendre blanche. Nous avons donc nos barres d'onglets. Il est maintenant temps de créer des liens. Voici comment je vais m'y prendre. Je vais commencer par cette icône d'accueil. Nous devons sélectionner cette icône d'accueil et connecter à cette première variante pour les trois. Alors, pendant qu'il est sélectionné, allez dans l'onglet Prototype et connectez-le simplement à celui-ci, le premier. Ici, le déclencheur doit être activé sur Click Smart Animate. Je vais régler la durée à 300 millisecondes. Faisons la même chose pour celui-ci. Nous n'avons pas besoin de changer quoi que ce soit d'autre et celui-ci également. Ensuite, je vais le faire pour le signet. Je vais sélectionner celle-ci, la connecter à la deuxième variante. Sélectionnez également celle-ci, connectez-la enfin à la deuxième variante, sélectionnez celle-ci, connectez-la à la deuxième variante. Faisons-le maintenant pour l'icône en forme de cloche. Je vais le connecter à la troisième variante, celle-ci également. Enfin, celui-ci. Enfin, sélectionnons cette icône connectée à la dernière variante, celle-ci également et celle-ci, comme celle-ci. Il est maintenant temps d'y jeter un coup d'œil. Je vais créer un cadre ici. Vous pouvez créer un cadre de téléphone. Je vais créer un cadre de taille personnalisée pour le moment. Faisons en sorte qu'il soit noir, juste comme ça. À partir des ressources, je vais accéder à barre d'onglets animée et simplement glisser-déposer une instance de cette barre d'onglets ici, comme ceci, et l' aligner au centre. Je vais sélectionner ce cadre. Appuyez sur Play et voyons si tout fonctionne bien ou non. Ici, nous avons notre État Home Selected. Je vais cliquer sur celui-ci. Nous y voilà. Il est entièrement réactif et interactif. C'est pas cool, ça ? C'est tout pour cette vidéo. Je te verrai dans le prochain. 21. Carrousel d'image animé: [MUSIQUE] Dans cette vidéo, je vais vous montrer comment créer ce carrousel d'images animées dans Figma, comme ceci. Si vous êtes prêt, commençons. Je veux que vous ouvriez cette image animée, une page de carrousel dans le cadre du projet Figma. À l'intérieur, vous pouvez voir que j'ai déjà préparé ces images pour vous. Ici, nous avons quelques montres Apple, et ici aussi j'ai ce groupe de texte. Comme vous pouvez le constater, nous avons un titre simple et un sous-titre ici. La première chose à faire est de créer un cadre. Je vais appuyer sur A sur mon clavier et je vais créer un cadre de taille personnalisée. Réglons la largeur et la hauteur à 500 pixels, comme ça. Maintenant, je vais sélectionner toutes ces images et les placer dans ce cadre. Laisse-moi les déplacer vers le bas comme ça. Mais le fait est que nous ne devrions voir qu'une seule montre à la fois. Je vais sélectionner cette image 1 ici et je vais m' assurer que la case à cocher pour le contenu de ce clip est cochée. Sinon, nous pourrons voir ces montres. Assurez-vous de cocher ces cases. Je pense que nous pouvons déplacer cette image un peu vers le haut. Partout où vous souhaitez déplacer cette image vers le haut, vous devez vous assurer de sélectionner également toutes les autres images. Je vais tous les sélectionner et les déplacer vers le haut. De quoi avons-nous besoin ici ? Juste en dessous de cette image, nous avons besoin de cet indicateur. Vous pensez peut-être que nous avons besoin quelques cercles et d'un rectangle, mais c'est faux. Pourquoi ? Parce que regardez ce qui se passe ici. Lorsque je fais glisser cette image, vous voyez ce qui se passe. Ce premier indicateur devient un cercle et ce second un rectangle. Pour créer un tel indicateur, nous devons utiliser un rectangle dès le début. Nous n'avons pas besoin de cercle. Permettez-moi de créer un rectangle ici, comme ceci. Faites-le très petit, peut-être 28 x 8, quelque chose comme ça. Rendez-le complètement arrondi. Mais je vais le mettre ici, puis je vais le dupliquer, appuyer sur Contrôle D ou Commande D. Déplacez-le vers la droite. Maintenant, celui-ci devrait être un cercle. Pour ce faire, il suffit de s'assurer que la largeur et la hauteur sont identiques. Je vais réduire la largeur à huit. Maintenant, je vais le dupliquer une fois de plus et le mettre là. Maintenant, je vais tous les sélectionner et leur ajouter une mise en page automatique, alors appuyez sur Shift et A. Et voilà. Permettez-moi de le renommer en indicateur, comme ceci. Le premier, celui sélectionné, devrait être un peu plus sombre. Je vais aussi le rendre un peu plus sombre , juste comme ça. Notre indicateur est également prêt. Laisse-moi l'aligner au centre. Je peux le déplacer un peu plus haut. La prochaine chose dont nous avons besoin, ce sont les couches de textes. Je vais les amener ici. Alignons-le au centre et je vais le déplacer légèrement vers le haut. Nous avons créé notre cadre principal. Il est maintenant temps d' animer ce cadre. Pour ce faire, nous allons utiliser la variance et des composants interactifs, comme d'habitude. Je vais sélectionner ce cadre 1 et transformer en un composant, et je vais y ajouter une variante, comme ceci. Permettez-moi de sélectionner cet ensemble de composants et remplacer le nom de la propriété par slide. Cette première variante va en être une. Ce second va être deux. Nous en ajouterons un autre dans quelques secondes. Mais d'abord, voyons ce que nous devons faire ici. Si je prévisualise ce carrousel, vous pouvez voir que lorsque je fais glisser cette image vers la gauche, elle commence à pivoter comme ça. Ensuite, la montre suivante entre également dans le cadre en tournant, comme ceci. Voici ce que nous devons faire. Nous avons notre point de départ ici et c'est bon. Pour cette deuxième variante, je vais sélectionner toutes ces images, même celles qui se trouvent en dehors de ce cadre. Je vais maintenir la touche Shift enfoncée et, à l'aide des touches fléchées, les déplacer vers la gauche, comme ceci, jusqu'à ce que nous voyions notre deuxième montre. Ensuite, je vais sélectionner celui-ci, l' aligner horizontalement au centre. Bien. Mais maintenant, nous les déplaçons sans aucune rotation. Pour que cet effet de rotation se produise, je vais sélectionner ce premier. Je vais le faire pivoter de 30 degrés. Maintenez la touche Shift enfoncée et essayez de faire pivoter de 30 degrés. Vous pouvez également simplement spécifier la valeur ici. Mais qu'en est-il de celui-ci ? Ici, comme vous pouvez le voir, lorsque j'ai essayé de la faire glisser vers la gauche, la montre rose pivote également. Pour que cela se produise, je dois passer à ma première variante ici. Je vais sélectionner cette seconde montre, qui est notre montre rose, et je vais la faire pivoter à moins 30 degrés, comme ça. Nos première et deuxième variantes sont prêtes. Maintenant, nous avons besoin d'une autre variante. Je vais sélectionner cette seconde variante et appuyer ce bouton Plus pour ajouter une autre variante. Celui-ci sera le numéro 3. Je vais répéter la même chose. Je vais sélectionner toutes ces images comme ça. Maintenez la touche Shift enfoncée et déplacez-les vers la gauche. Nous y voilà. Maintenant, je vais sélectionner cette montre jaune et la placer au centre. Sélectionnez cette montre rose ici, numéro 2 et faites-la pivoter de 30 degrés. Comme vous pouvez le voir ici, nous en avons 30 et dans la deuxième variante, nous devrions également faire pivoter cette troisième montre. Nous devons le faire pivoter à moins 30 degrés. Mais qu'en est-il de notre indicateur ? La première est déjà terminée. Je vais zoomer ici. Pour le second, ce que je vais faire, c'est que nous ne pouvons pas simplement déplacer celui-ci vers la droite. Pourquoi ? Parce qu'ici, comme vous pouvez le voir lorsque j' essaie de faire glisser cette montre vers la gauche, juste comme ça, cet indicateur, le premier, se transforme en cercle. Je ne vais pas changer leur position ici et c'est exactement ce que nous devons faire. Je vais sélectionner ce second. Je vais aller dans Design et je vais régler sa largeur à 28, comme c'est le cas ici. Je vais changer sa couleur en gris foncé. Ensuite, je vais sélectionner celui-ci, le premier, régler sa largeur sur huit et changer sa couleur en gris clair. Nous devons faire la même chose ici également. Je vais sélectionner cet indicateur et je vais sélectionner ce troisième, augmenter la largeur à 28, juste comme ça. Changez sa couleur en gris foncé. Sélectionnez celui-ci, réglez sa largeur sur huit et reprenez simplement sa couleur en gris clair. Cool. Pour cet exemple, je ne vais pas modifier ces couches de texte telles que la couleur. Ce sera si simple, vous pouvez simplement le régler en rose, vert et jaune. Le point principal que vous devez apprendre ici est de savoir comment animer cette montre ainsi que cet indicateur. Si vous rencontrez des difficultés déplacer ces montres, en particulier si vous ne pouvez pas les voir à l'extérieur, vous pouvez appuyer sur Shift et O pour accéder à la vue d'ensemble. Comme vous pouvez le constater, même les montres situées en dehors de ce cadre sont visibles pour vous et cela vous sera très utile lorsque vous souhaiterez les déplacer. Pour revenir au mode normal, vous pouvez appuyer à nouveau sur Shift O. Mais qu'en est-il des connexions ? Voici ce que vous devez faire. Beaucoup de gens, lorsqu'ils souhaitent créer cette animation par glisser-déposer, commettent une erreur très courante. Ils sélectionnent leur variante ici, par exemple celle-ci, la variante 1. Ensuite, ils essaient de le connecter au suivant et ils changent simplement le déclencheur pour le faire glisser. Ça ne marchera pas. Si vous connectez simplement ces deux variantes de cette manière, l'animation par glisser-déposer ne fonctionnera pas comme prévu. Au lieu de cela, vous devez sélectionner cette image, celle-ci, puis essayer de créer une connexion entre les deux. Maintenant, je vais régler le déclencheur sur On Drag. Ça va être intelligent, animez 300 millisecondes, ça a l'air bien. Faisons la même chose ici. Je vais sélectionner celle-ci, la reconnecter à la première variante. Ça va recommencer à traîner. Connectons celui-ci au troisième glissant et le troisième au second, il sera en traînée et nous avons terminé. Essayons-le et voyons à quoi il ressemble. Je vais créer un cadre de taille personnalisée ici, 500 x 500 pixels, comme ceci. À partir des ressources, je vais rechercher un carrousel d'images animées, le glisser-déposer dans ce cadre, aligner à la fois horizontalement et verticalement. Vous pouvez le placer dans le cadre de votre choix. Mais pour cet exemple, je préfère le placer dans ce cadre et le prévisualiser. Voyons si cela fonctionne. Nous y voilà. Cela fonctionne très bien. Notre indicateur est animé et nous avons également cet effet de rotation ici pour ces montres. Si vous souhaitez utiliser ce carrousel d'images sur un téléphone portable. Voici ce que tu peux faire. Vous pouvez créer un cadre de téléphone portable ici, par exemple, un iPhone 14, comme ça. Ensuite, glissez-le et déposez-le à l'intérieur, appuyez simplement sur K et réduisez-le comme suit. Cela fonctionnerait parfaitement si je sélectionnais simplement ce cadre mobile et que je le prévisualisais. Vous pouvez voir que cela fonctionne très bien. C'est la beauté de l'utilisation de composants interactifs. Les gars, j'espère que vous avez apprécié cette leçon. Je te verrai dans le prochain. 22. Bouton d'action flottante animé: Dans cette vidéo, je vais vous montrer comment créer un bouton d'action flottant animé comme celui-ci. Si vous êtes prêt, allons-y. Ici, dans le fichier de projet Figma, j'ai déjà préparé ces boutons pour vous. Pour créer cette interaction, nous avons besoin de deux variantes différentes, nous avons besoin de cette variante fermée et également de cette variante ouverte. Voici ce que je vais faire, je vais sélectionner ce bouton plus et le transformer en un composant comme celui-ci et je vais également ajouter une variante pour créer un ensemble de composants. Cet ensemble de composants sera nommé bouton et sa propriété sera également nommée état. La valeur de cette propriété pour la première variante va être fermée et pour celle-ci elle va être ouverte. Alors, de quoi avons-nous besoin ? Dans ces deux variantes, nous avons également besoin de ces boutons. Je vais sélectionner ces ensembles de composants et les agrandir. Mais regardez ce qui se passe, le problème ici est que les contraintes pour ces deux boutons ne sont pas correctement définies. Je vais sélectionner celui-ci et je vais modifier les contraintes en haut et à gauche et je vais m' assurer que celui-ci a également les mêmes contraintes. Maintenant, nous pouvons facilement agrandir cet ensemble de composants. Permettez-moi de déplacer ces variantes, quelque part ici et maintenant je vais sélectionner ces boutons et les placer dans cette variante fermée. Assurez-vous de les placer à l'intérieur de cette variante. Maintenant, je vais tout aligner verticalement, comme ceci et horizontalement, et m'assurer de les placer ici. Vous devez l' aligner sur votre bouton Plus. Ensuite, je vais les déplacer et les placer sous notre icône plus et notre bouton plus, afin de pouvoir les masquer. Maintenant que vous êtes sélectionné, je vais les copier, appuyer sur Contrôle C ou Commande C, et je vais également les coller dans cette variante ouverte. Je vais sélectionner cette variante ouverte et appuyer sur Control V ou Command V et les déplacer juste ici. Voyons ce dont nous avons besoin . Quand elle est fermée, nous devons voir cette icône plus, mais lorsqu'elle est ouverte, nous devons plutôt voir cette icône de rejet et ces boutons devraient apparaître. Je vais déplacer légèrement cette variante fermée vers le haut pour avoir plus de place ici . La première chose que je vais faire est de sélectionner cette icône, de maintenir la touche Shift enfoncée et de la faire pivoter de moins 45 degrés pour obtenir cette icône de rejet. C'est la première étape. L'étape suivante consiste à afficher ces boutons, les boutons de musique du dossier et de vidéo. Laissez-moi voir l'ordre ici, nous avons besoin du dossier ici, la musique et de la vidéo juste là. Je vais commencer par le dossier, laissez-moi le sélectionner ici, maintenez la touche Shift enfoncée, et en utilisant les touches fléchées, je vais le déplacer vers le haut comme ceci. Je vais maintenir la touche option de mon clavier ou la touche Alt enfoncée pour voir la marge ici. Je vais fixer la marge à 16. Ensuite, sélectionnons ce bouton de musique, maintenons la touche Shift enfoncée et déplacons-le vers la gauche, comme ça et la marge sera de 16. Enfin, je vais sélectionner ce bouton vidéo, maintenir Shift enfoncée et le déplacer vers le bas comme suit. Jusqu'ici, tout va bien, mais ce n'est pas exactement ce dont nous avons besoin. Comme vous pouvez le voir ici, nous avons un arc. Je vais déplacer ça ici et les placer comme ça. Nous avons notre variante ouverte, nous avons également notre variante fermée, il est maintenant temps de créer nos connexions. Je vais sélectionner cette première variante, passer au prototype, et je vais la connecter à cette deuxième variante, qui est cette variante ouverte. L'arbre ici devrait être animé intelligemment en un clic dans 300 millisecondes. Je vais maintenant créer une connexion vers cette variante fermée. Prévisualisons-le et voyons si c'est ce que nous voulions ou non. Je vais créer un cadre de taille personnalisée ici, comme celui-ci et à partir des ressources, je vais glisser-déposer une instance de ce bouton directement là. Permettez-moi de l'aligner au centre, sélectionner ce cadre et de cliquer sur Play. Je vais cliquer dessus et regarder ce qui se passe. Quelque chose ne va pas, nous avons notre icône animée ici. Ce bouton apparaît, mais qu'en est-il des autres, voyons ce qui ne va pas ici. Voici le problème, lorsque je déplace ces boutons, je les ai accidentellement placés en dehors de cette variante. Je vais les remettre à l'intérieur, et maintenant ça devrait fonctionner. Je vais cliquer dessus, c'est parti. Nous voyons que nous avons cette animation, mais il nous reste encore une chose à faire. Comme vous pouvez le voir ici, nous avons cet effet de rebond. Je pense que c'est une bonne idée d'ajouter également cet effet de rebond à ce bouton. Pour ce faire, il suffit de sélectionner celui-ci, de se rendre sur Prototype, cliquer sur votre interaction, et à partir de là, je vais passer de la vitesse facile à la vitesse rapide. Je veux juste que cette interaction ait cet effet de rebond. Pour cette variante proche de cette interaction, je souhaite la garder telle quelle. Essayons-le. Nous y voilà. Les gars, c'est tout pour cette vidéo, je vous retrouve dans la prochaine. 23. Accordion Effet: Dans cette vidéo, je vais vous montrer comment créer un effet accordéon animé pour ces cartes, comme vous le voyez ici. Ici, sur cette page d'effet accordéon, je vous ai déjà préparé cette carte. C'est une carte simple que j'ai créée en utilisant une autre mise en page. Voyons ce qu'il y a dedans. À l'intérieur, nous avons ce cadre. Comme vous pouvez le constater, il est également réactif. J' y ai également ajouté une autre mise en page et à l'intérieur , nous avons cette icône et cette couche de texte. L'important ici est que l'option de redimensionnement de ce cadre soit réglée sur Hog pour que cette carte soit réactive, comme vous le voyez ici. En dehors de cela, nous avons ce diviseur. Il s'agit d'une simple ligne et d' une autre couche de texte. Pour obtenir cet effet accordéon, il suffit d'avoir deux états différents : fermé et ouvert. Voyons comment nous pouvons en créer un. Nous avons cet État ouvert. Je vais en faire un composant comme celui-ci et ajouter une variante. Je vais sélectionner cet ensemble de composants et changer le nom de la propriété en state. Je vais maintenant sélectionner cette première variante. Il faut l'ouvrir. C'est très bien. Je vais sélectionner ce second et il devrait être fermé. Pour cette variante fermée, nous devons masquer ce séparateur ainsi que ce texte. Enfin, nous devons faire pivoter cette flèche de 180 degrés. Comme j'ai utilisé une autre mise en page pour cette carte, c'est assez simple. Je vais juste le sélectionner et le masquer dans la liste des couches. Nous y voilà. Je vais également sélectionner celui-ci et le masquer. Vous pouvez constater que lorsque vous utilisez une autre mise en page, puisque votre élément est réactif, il est très facile de créer des composants interactifs. Ensuite, je vais sélectionner cette icône, maintenir la touche Shift enfoncée et la faire pivoter de 180 degrés, et nous avons terminé. Nous avons juste besoin de relier ces deux variantes maintenant. Je vais sélectionner celui-ci, au prototype, connecter à celui-ci, et il devrait être accessible et animé intelligemment. Je vais le régler trop « Rapide » pour obtenir cet effet de rebond, comme vous pouvez le voir ici. Faisons maintenant la même chose pour cette variance. Je viens de me connecter à la variation des vêtements et nous n'avons rien à changer ici. Il est maintenant temps de l'essayer. Je vais créer un cadre ici. Permettez-moi de modifier la couleur de l' arrière-plan. Permettez-moi de le changer en bleu clair, quelque chose comme ça. Je vais aller dans « Actifs » et à partir de là, je vais chercher ma carte. Faites-le glisser et déposez-le à l'intérieur comme ça et je vais le changer en fermé. Maintenant, sélectionnons ce cadre, cliquez sur « Play ». Je vais cliquer dessus. Et voilà, ça marche comme prévu. Mais voici l'avantage d'une autre mise en page. Maintenant, je peux simplement dupliquer cette carte, appuyer sur Contrôle D ou Commande D, déplacer vers le bas, la dupliquer plusieurs fois comme ceci. Peut-être encore une fois, déplacez-le vers le bas. Maintenant, je vais tous les sélectionner comme ceci et je vais ajouter une autre mise en page à chacun d'eux. Appuyez sur Shift et A. Si je continue et que j' agrandis un peu ce cadre, comme ceci, et que j'essaie de le prévisualiser, regardez ce que nous obtenons. Nous y voilà. Nous avons une liste réactive de cartes avec cet effet accordéon. C'est cool, ça. C'est bon, les gars. C'est tout pour cette vidéo. Je te verrai dans le prochain. 24. Prochaines étapes: Félicitations pour avoir terminé le cours avec succès. Vous avez parcouru un long chemin et je suis tellement fière de vous, mais vous vous demandez peut-être quelle est la prochaine étape pour vous ? abord, assurez-vous de soumettre les projets que vous avez réalisés sur Skillshare, car j'adorerais voir ce que vous avez créé. Ensuite, j'apprécierais que vous laissiez une critique honnête du cours afin que je puisse l'améliorer pour vous. Si vous souhaitez être informé des dernières mises à jour des cours, assurez-vous de me suivre sur Skillshare. Si vous souhaitez en savoir plus sur conception et le prototypage UI/UX, vous pouvez également consulter ma chaîne YouTube, où je publie des vidéos liées au design chaque semaine. Ce fut un honneur d'être votre professeur dans ce cours, et j'espère vous voir dans mes autres cours. Passe une belle journée et au revoir.