Concevoir une application avec des animations de conception de fluides en utilisant Figma - Cours des débutants

1. Bienvenue dans mon cours Figma sur la conception UX pour débutants: Bonjour, bienvenue dans mon cours Figma sur Skillshare, où nous allons regarder le monde merveilleux du design UX. Maintenant, souvent, lorsque les gens entrent dans l'espace de conception UX, ils voulaient vraiment commencer à créer des applications, à absolu vos téléphones et à devenir vraiment créatifs avec leurs concepts de conception. Et souvent, l'une des choses les plus négligées en ce concerne la conception UX ou les micro-animations ou les petits changements esthétiques que les concepteurs UX ajoutent à leurs applications pour vraiment ajouter un peu de touche. Et l'une des choses que nous pouvons faire dans cette classe en général est de passer par différentes techniques que les utilisateurs peuvent mettre en œuvre pour améliorer réellement l'expérience de conception UX. agit d'un cours ouvert, ce qui signifie que j' ajouterai régulièrement de nouvelles vidéos chaque semaine en fonction des commentaires et des questions qui se posent. Et jusqu'à présent, j'ai rassemblé trois cours dans le cadre de cette leçon de figma. Et ils vont examiner trois composantes principales. Donc, en ce moment, nous avons comment créer des boutons hamburger, qui sont essentiellement des options de menu qui se nous avons comment créer des boutons hamburger, qui sont essentiellement des options de menu qui transforment en boutons de fermeture circulaires. Donc, en cliquant dessus, cela deviendra cette icône. Nous sommes en train de regarder des curseurs. Donc, lorsque vous cliquez sur un interrupteur d'arrêt, il s'agit de diapositives sur on et etc. Enfin, nous avons cette belle interface mobile que j'ai créée appelée picturale pour les besoins de cette classe. Et comment créer des liens de réseautage social de style messager horizontal . conséquent, un exemple comme celui-ci serait ici où vous pouvez faire défiler et voir quels amis peuvent être en ligne. C'est donc ce que nous avons à l'étoile. Et pendant ce cours, par la suite, j'ai l'intention que vous puissiez recréer ce que vous voyez ici est une vue amicale. Et de toute évidence, à mesure que je ferai plus de cours, d'autres choses seront ajoutées. Alors, si vous choisissez de vous inscrire à ce cours, assurez-vous choisissez de vous inscrire à ce cours rester et de faire attention aux e-mails. Je l'affiche dans les discussions. Encore une fois, si vous aimez ce que vous voyez et que vous souhaitez vous joindre à moi dans ce cours. Inscrivez-vous définitivement maintenant et je vous verrai de l'autre côté. 2. Créer le bouton hamburger de menu: Bonjour. Dans cette courte classe, nous allons utiliser le logiciel de conception UX connu sous le nom de Figma. Il s'agit d'un outil très polyvalent et complet qui vous permet de créer des prototypes, des cadres filaires et différentes interfaces de conception utilisateur pour vos applications, votre ordinateur de bureau, votre mobile, etc. Ça va être court. Et nous allons cibler spécifiquement les micro-animations. Maintenant, les quatre images que vous voyez devant vous sont essentiellement deux flux comme le code et Figma. Et ce sont des types de boutons. Le premier est donc ce que vous connaîtrez tous, qui est un style typique de menu de hamburgers. Et puis l'habitude s'ouvre lorsque vous cliquez dessus, nous voulons qu' elle soit modifiée et déplacée dans le bouton de fermeture circulaire. Et il en va de même ici en bas où nous avons un de ces boutons de curseur classiques où vous cliquez sur le bouton désactivé à l'allumage, cliquez sur le bouton Activé et s'éteint. Donc ces curseurs inversent la tuile. Ils peuvent souvent être utilisés dans différentes applications mobiles ou interfaces de tableau de bord pour les logiciels et services modernes. Juste pour aller de l'avant, commençons par une démonstration pour vous montrer à quoi elles ressemblent. Accédez à la première page, qui consiste essentiellement cliquer sur le bouton Plus en haut à droite. Vous verrez les deux flux ici. Donc, si je clique dessus, vous verrez comment il anime les va-et-vient d'un off à un on. Et il en va de même pour celui-là aussi, sans relâche. Maintenant, une fois que vous aurez créé ces derniers, vous pourrez les placer dans vos propres interfaces de tableau de bord ou applications mobiles dans Figma. Ou si vous utilisez un autre logiciel comme Adobe XD ou Sketch, il s'agira également de processus similaires. Mais une vidéo plus tard. Décomposons ce que nous avons ici. Donc, ce que nous allons faire, c'est commencer par les systèmes de menu de hamburgers. Débarrassez-vous de ces deux boutons et concentrez-vous uniquement sur ces deux-là. Dans le coin supérieur gauche, vous verrez différentes icônes. Si vous avez le cadrage de l'outil Déplacer, vous disposez du panneau des ressources dans lequel vous pouvez évidemment choisir les différents types de formes. Texte au stylet, déplacement à la main pour vous permettre de parcourir le canevas et d'ajouter des commentaires. Dans ce cas particulier, nous allons commencer par recréer ces boutons et les flux d'animation. Commençons donc par le faire. Le ferons-nous ? Tout d'abord, nous allons commencer par un beau rectangle et nous voulons un joli carré. En maintenant le quart de travail, vous pouvez obtenir un joli cube. Et nous allons faire cela ici automatiquement. Vous verrez, mais Tango trois pop-up ici en haut à gauche. Et ce sera essentiellement notre nouveau bouton. Nous allons maintenant travailler sur le CSS ou l'esthétique du carré. Sur le côté droit ici, ce que nous voulons faire, c'est essayer de garder ces chiffres entiers. Je vais donc mettre ça à 130. Et cela va automatiquement passer à 130 car nous avons changé de lien à cela. Nous allons donner une frontière. Sur ce point particulier. Nous avons un conseil d'administration d'une valeur de 27. Faisons la même chose ici. Nous allons donc cliquer sur ce carré, ce rectangle, cliquer ici et le mettre comme 2772, désolé, 27. Nous avons maintenant une belle courbe, un bord carré, arrondi, en quelque sorte en forme de cube. Maintenant, changeons la couleur pour que nous voulons la rendre belle et blanche. Et pour lui donner cet effet standard, nous allons lui donner une ombre portée. Donc, si je vais dans Effets, cliquez dessus et, par défaut il vous donnera toujours une ombre portée, que vous pourrez ensuite modifier en cliquant sur cette icône Sunburst qui a les paramètres d'effet. Je clique dessus. Nous voulons nous assurer que ce bouton a une ombrage égale sur tous les côtés. Nous allons donc faire en sorte que cet axe Y 0, que vous pouvez voir ici, profite. Maintenant, ce que nous allons faire, c'est que nous allons convertir ce bouton en son propre cadre. Maintenant, un cadre vous permet d'effectuer des animations de flux prototypes dans une autre image, soit en cliquant, en faisant glisser, surmontant, en entrant une souris, déplaçant la souris autour du port. Cela vous permet essentiellement de créer l'animation où vous cliquez dessus et elle se dirige vers cette image ici. Vous pouvez donc cliquer ici, cliquer avec le bouton droit de la souris sur la sélection du cadre On va appeler ce hamburger. Ensuite, nous allons ajouter quelques lignes. Passons donc ici à l'outil Formes choisir la ligne. Ensuite, nous allons faire glisser ça par ici. Nous pouvons essentiellement faire en sorte que ces derniers émergent au centre. Ensuite, copiez le collage trois fois. Et nous allons faire passer ça ici en tant que tel. Maintenant, nous avons trois lignes et juste pour les rendre un peu plus audacieuses, augmentons le niveau de poids à environ cinq, puis déposons-les vers le centre. Parfait. Maintenant, pour correspondre à cela, nous allons rendre cela un peu plus petit. Maintenez la touche Maj enfoncée pour maintenir la ligne. Et on va le mettre à mi-chemin. Maintenant, ce que nous avons, c'est une icône de menu hamburger. Maintenant, ce que nous allons faire maintenant, c'est faire, pour s'assurer que lorsque vous le faites dans l'animation, dans le paramètre prototype, que cela fait cet effet de transformation c'est que nous allons copier et coller tout ce cadre hamburger. Alors copiez le collage, puis faites-le glisser sur le côté que nous ayons une zone claire entre eux. Maintenant, nous allons modifier celle-ci pour que Figma reconnaisse automatiquement que vous utilisez les mêmes formes et lignes et que vous voudrez les animer et les déplacer vers le bas de la ligne. Si je vais ici et que je renomme cette icône pour fermer, maintenant ce cadre est appelé icône de fermeture. Maintenant, la partie amusante. Maintenant, nous arrivons à jouer avec ce cadre et à le changer. Donc, si je verrouille le hamburger, cette façon, nous n'allons pas toucher accidentellement ce bouton et nous commencerons à travailler ici. Faisons donc de cela un cercle. Nous pouvons le faire en faisant simplement glisser ce rayon d'angle jusqu'à l' infini rarement, car ce sera toujours un beau cercle. Nous allons maintenant nous assurer que ces croix se transforment en croix. L'un des moyens les plus simples de le faire consiste à sélectionner les trois et à cliquer sur centre centralisé et en ligne. Mais de toute évidence, nous savons que celui-ci était du côté gauche. Donc, si nous ajoutons des angles, ces lignes, elles ne s'aligneront pas correctement. Nous devons nous assurer de les envoyer également. Maintenant, ce que nous faisons, c'est que nous ajoutons des angles un par un. Faisons donc ce 45 degrés, faisons encore 145 degrés. Et puis faites cela moins 45 que nous avons traversé. Nous pouvons donner de la couleur à ces icônes. Donc, si nous allons à l'outil hamburger, maintenez, décalez et cliquez, nous pouvons en faire une belle couleur verte. Et nous pouvons faire de cette croix une couleur rouge. Nous avons donc maintenant le vert et le rouge, et nous ne pouvons pas accéder au processus d'animation. Cliquons sur ce cadre pour hamburger. Accédez à Prototype, cliquez surclic. Nous voulons naviguer pour fermer l'icône. Cliquez sur Smart Animate car il donnera automatiquement un effet de morphing vraiment agréable , puis choisissez la facilité d'entrée et de sortie. Cela permettra à l'icône d'avoir cette animation élastique avant qu'elle ne se transforme en cercle que vous verrez dans un instant. Faisons ce 650 millisecondes. De cette façon, nous lui donnons suffisamment de temps pour avoir une animation fluide et vous ne le manquez pas lorsque vous cliquez dessus. Et nous pouvons répéter le même processus pour l'icône. Vous avez maintenant la possibilité d'accéder à un prototype et de cliquer ici sur Ajouter plus. Mais une autre façon de le faire consiste à faire glisser la flèche vers le cadre précédent et il cliquera automatiquement sur le hamburger. Choisissez mon animateur. Il est dans une application de 650 MS Ensuite, vous l'avez. Donc, si vous allez vérifier cela, agréable fluide, il se transforme, a l' air beau et a l'air moderne et veille pour vos applications et vos interfaces de tableau de bord. C'était le premier. Nous allons le faire, c'est se concentrer sur le second qui a un bouton curseur. 3. Faire le bouton de curseur et les remarques de clôture: Maintenant, si je les ai cachés et que nous les avons regardés ici, il s' agit essentiellement d'une série de rectangles avec des bords et des cercles incurvés et de petites animations. Maintenant, en regardant évidemment le premier, vous pouvez voir à quel point celui-ci sera aussi facile. Vous pouvez obtenir des micro-animations plus complexes, ce que nous ferons dans un cours ultérieur. Mais pour celle-ci, nous allons nous en tenir à des animations de sourire de base juste pour vous initier et vous sentir bien. Maintenant, nous allons reproduire le verrou afin de ne pas les toucher et de recréer cela. La première chose que nous allons faire, c'est de mettre dans une nouvelle place. Je vais essayer de les rendre identiques dans l'objectif, mais c'est bon si ce n'est pas le cas. Et nous allons passer à Design et, à l'instar du bouton précédent, nous allons donner un rayon. Et dans ce cas, nous allons le faire à 100% parce que nous voulons un joli cylindre. Alors, regardez. Changeons la couleur. Faisons le blanc et un menu déroulant. Maintenant, pour celui-ci, je vais garder le menu déroulant ci-dessous car normalement les boutons et curseurs, boutons, ils ont un effet d'ombre déroulant sur la moitié inférieure. Pour vraiment l'élever de l' interface du tableau de bord sur laquelle ils se trouvent. Maintenant, nous allons ajouter un cercle, qui sera le bouton ou l'interrupteur. Si vous maintenez la touche Maj, sauf que vous pouvez voir ici qu'elle fait, cela fait un beau cercle entier. Et nous allons placer ça ici. Contrôle du zoom. Parfait. Ce que nous allons faire, c'est rendre cela rouge parce que c'est l'interrupteur d'arrêt. C'est vraiment, vraiment lumineux. Allons en faire un peu moins. On y va. Si vous le souhaitez, vous pouvez utiliser l'outil pipette, mais nous allons supposer que vous n'en avez pas fait auparavant. Nous allons également insérer une zone de texte. Donc, arrêtons ça et mettons au centre ici. C'est notre interrupteur d'arrêt. Pour faciliter rapidement ce processus. C'est copier-coller, faire glisser. Nous avons le cercle qui passe à une belle couleur verte. Cela va donc représenter évidemment l'interrupteur de marche. Et si je ferme ces deux-là, alors nous pourrons travailler avec ces deux options ici. Nous allons les animer maintenant en conséquence. Tout d'abord, nous devons les transformer en images pouvoir les animer bien. Je vais donc sélectionner tous ces cadres avec le bouton droit. C'est le curseur hors tension. Il en va de même pour cette sélection de cadre avec le bouton droit. Je vais appeler ça sur Slider. Comme nous l'avons fait auparavant. Ils vont cliquer ici, avoir un prototype. Faites glisser cette flèche vers ce cadre. Et vous verrez que parce que nous travaillons dans le même canevas, cela sauvegardera l'animation précédente. Et nous allons faire la même chose ici, chercher cette flèche et la remettre en place. De toute évidence, nous ne voudrions peut-être pas avoir de petites animations. Nous voudrions peut-être que l'animation linéaire soit des animations très simples. Nous ne voudrions peut-être pas avoir l'aisance d'entrer et de sortir facilement. Donc, pour un bouton, il n'est pas très logique d'avoir un bouton élastique avant qu'il ne glisse vers la gauche ou vers la droite. Faisons donc simplement en sorte que celui-ci ait le même effet. Maintenant, si vous effectuez une séance d'entraînement, il s'agit d'un flux de flux pour. Cliquez dessus. Vous verrez comment ça a fonctionné. Mais le bouton n'a pas bougé. Il suffit donc de revenir au décalage de la zone de conception et de déplacer ce texte vers la gauche et de le déplacer vers la droite. De cette façon, le bouton aura désormais un effet de morphing. C'est une facilité qui fonctionne très bien lorsque vous recherchez évidemment un changement d'une sorte et d'une icône. Mais vous remarquerez probablement parce qu'il a juste une facilité, il n'a pas cet effet de balayage de la même manière que celui-ci. Donc, si je verrouille ça, numéro deux, vous verrez comment cela se déplace. C'est uniquement parce que nous avons choisi un autre type d'animation. Dans celui-ci, vous verrez ici comment nous avons choisi d'avoir petites animations et de retour. C'est pourquoi nous avons cet effet de bouton. Alors que l'entrée n' était qu'une glissade. C'était, je n'ai pas eu cet effet, donc on peut l'ajouter. Donc, si nous venons ici pour quatre, venez ici, choisissez ceux-ci, sortez aisément. Et puis, pour celui-là, allez ici, le flux, écoulez quatre. Vous verrez comment cela fonctionne très bien. Ensuite. Encore une fois, ce ne sont que deux options que vous devez créer pour créer des boutons et les différents styles d'animation. Oui, j'espère que vous avez trouvé cette leçon intéressante. Dans les prochaines leçons, nous allons en fait travailler sur la création d'une interface utilisateur vraiment excitante. Et j'espère vous y voir. Et si vous avez des questions, laissez-les certainement dans la section commentaires de ce cours. Et j'ai hâte de voir vos projets comme l'un des livrables que j' aimerais voir dans cette classe c'est que vous avez votre propre interface, ou du moins à un niveau de base, simplement avoir un avec tous ces boutons et me donnant le fichier Figma et je peux les ouvrir ou vous pouvez poster une vidéo et nous pouvons le parcourir et je vous donnerai quelques commentaires. Si vous avez des questions, n'hésitez pas à les laisser dans la section commentaires ci-dessous. Merci beaucoup et prenez soin de vous. 4. Créer une barre de portrait sociale à défiler horizontale et de message: Bonjour. Dans cette classe, nous allons envisager de créer une barre de défilement horizontale interactive sur une application, un service ou un tableau de bord. Et il va y avoir des icônes des électeurs portraiteurs. Et comme vous pouvez le voir ici dans l'animation fluide, vous pouvez voir à quel point différentes personnes se trouvent dans cette partie du haut. L'une des choses vraiment utiles ce sujet est qu'elle vous permet de vraiment gérer suffisamment vos biens immobiliers de votre application. Pour commencer, nous allons créer un cadre et nous allons choisir l'iPhone 13 Pro Max car il s'agit d'un téléphone assez courant ces jours-ci. Et nous allons ajouter des bords arrondis autour de ça. Maintenant, la prochaine chose que nous allons faire, c'est que nous allons mettre une sorte de lignes en haut. Cela va donc reproduire le bouton du menu hamburger que nous avons créé dans les vidéos précédentes. Vous pouvez donc l'importer et si vous le souhaitez. Mais dans le cadre de cet exercice, nous allons simplement créer une option de menu en doublons statiques, qui n'a évidemment aucune animation de flux avec eux. Imaginons que nous allons augmenter un peu le volume du trait pour qu'il soit beau et visible de plus en plus loin. La prochaine chose que nous allons faire est créer une barre de recherche. Les barres de recherche, évidemment très courantes dans les applications mobiles, ajouteront des coins arrondis. Il fait donc comme un long cylindre en forme de saucisse. Nous allons modifier les couleurs pour qu'elles ressemblent davantage à une barre de recherche. Donc, dans ce cas, avoir de belles ombres tombées, qui sont très courantes, donc elles se distinguent au-dessus de la page. Ensuite, nous allons ajouter quelques lignes de démarcation. Ils sont donc évidemment très bons pour aider à séparer les différentes palettes d'un tableau de bord. Et la raison pour laquelle nous réalisons toutes ces choses est pour rendre que pour rendre cette expérience de défilement horizontal agréable, nous voulons lui donner au moins un certain contexte. Nous allons maintenant commencer à faire le défilement horizontal réel. Nous allons donc créer une série de cercles tous les mêmes loyers et distances les uns des autres. Et nous allons créer quelques-uns d'entre eux qui sortent de la page que nous pouvons réellement avoir cet effet de défilement. Maintenant, l'une des choses que j'aime faire est de les regrouper complètement que nous sachions où ils se trouvent et où ils vont s'asseoir hors de la page. Mais plus important encore, nous allons les placer dans des images que nous pourrons ajouter un prototype d'animation de défilement à cette image particulière. Pour le moment, vous pouvez voir que nous avons coupé et que nous allons chercher le cadre. Je le fais glisser vers la zone du téléphone pour que tous les autres cercles qui trouvent dans ce cadre au-delà de celui-ci soient coupés. Et au fur et à mesure que nous avançons horizontalement, ils le montreront. La première chose est que nous allons faire, c'est aller dans la zone des plugins. Si vous ne l'avez pas, allez sur les plugins gérés par le marché et trouvez tous les plugins que j'utilise Unsplash car c'est juste très bon endroit pour obtenir des photos gratuites, ce qui est déjà gratuit. Nous pouvons choisir deux images ici. Je vais juste choisir des images de portrait aléatoires qui seront utiles et agréables pour ce défilement horizontal particulier dans l'état ou l' interface de profil en ligne que nous réalisons. L'une des choses à réaliser, c'est que nous fabriquons une version horizontale ici. Mais si vous deviez créer une option de défilement vertical, le processus est pratiquement le même lorsque vous avez un cadre. Dans un cadre, vous pouvez indiquer toutes les ressources, les formes, les images, les lignes, le texte, où que vous souhaitez inclure dans ce cadre. Ensuite, vous pouvez choisir de le faire défiler horizontalement ou faire défiler vertical. Ce qui est évidemment l'objectif principal de la classe actuelle. Si vous n'avez pas fabriqué les outils pour hamburgers ou vous n'avez pas fait de boutons auparavant. Regardez les deux autres vidéos de cette classe pour en savoir plus à ce sujet. Maintenant, ce que nous allons faire, c'est que nous allons rendre les images les plus petites que nous puissions réellement travailler avec celles-ci et masquer les images. Vous placez donc une image au-dessus de la forme, les sélectionnez-les ensemble et vous allez l'utiliser comme masque. Vous pouvez ensuite faire glisser l'image et la placer au centre. Et ce que nous allons faire, c'est que nous allons répéter ce processus pour les images restantes. Comme évidemment, il donne une ambiance vraiment agréable, presque comme Messenger, Facebook. Des histoires Instagram, où que vous soyez cet automne. Il s'agit de s'assurer que les images s' intègrent bien dans le cercle, les formes. Au fur et à mesure que nous parcourons cela, vous verrez comment cela commence lentement à ressembler à l'une de ces applications sociales, ce qui est honnête, est très courant ces jours-ci d' avoir ce genre de défilement barres horizontales circulaires, qui représentent soit des histoires, des flux, en ligne, des utilisateurs et des choses de ce genre. Vous verrez à gauche ici comment nous avons différents groupes de masques. Maintenant, les groupes de masques sont évidemment que vous pouvez les créer dans n'importe quelle forme. Nous avons choisi une forme circulaire ici. Mais vous verrez comment les masques sont actuellement cachés derrière ce cadre. Sortons-les du cadre. Et. Massez et non encadrés. Désolé, qu'est-ce que tu viens d'aplatir ? Si vous les dissociez tous, ils sortiront. Et ce que nous allons faire, c'est que nous obtenons un masque, ces deux cercles qui sont hors écran, puis nous les remettons dans le cadre d'origine. Utilise donc un masque, faites glisser ça. Faisons en sorte qu'il s'intègre bien. Et maintenant, nous allons faire glisser ces deux cercles, ces deux masques et les remettre dans l'iPhone 13. Et juste pour vous assurer que tous ces objets massés sont encadrés, cliquez avec le bouton droit de la souris sur la sélection de cadre, puis assurez-vous que j'ai coupé qui donne juste un joli nom d' arrière-plan leur contenu. Raccourcissez le cadre jusqu'à l' étendue de la fenêtre visible, puis alignez-le en bas pour l'afficher sous forme de séparateur. Et puis Wallah, vous avez une région à l'écran qui représente une division horizontale de la barre. Maintenant, évidemment, pour le moment, il n'y a pas d'animation et cela coule ensuite. Donc, juste pour que tout le reste soit légitime, ajoutez-y rapidement une case ci-dessous. Imaginez donc que c'est comme un post Instagram ou quelque chose où nous voulons simplement avoir une image là-bas. Maintenant, nous allons revenir à ce cadre. Nous allons passer au prototype. Et nous pouvons choisir une méthode de défilement, et nous allons choisir le défilement horizontal. Cela permettra à ce cadre de se déplacer vers gauche et vers la droite de l'écran, tant qu'il est coupé et le cadre se trouve dans la fenêtre, cela fonctionnera parfaitement. Nous vous montrerons donc que dans une seconde lorsque nous cliquerons sur le bouton Lecture et laissez-moi venir ici et vous verrez comment vous donner un moment. On y va. Nous avons une barre qui a une belle animation de défilement. Maintenant, il s'agit évidemment de la barre de défilement la plus basique. Vous pouvez créer différents effets d'animation. Vous pouvez ajouter autant de flux que vous le souhaitez. Mais en un mot, c'est vraiment comment faire une barre de défilement verticale ou horizontale, dans ce cas. Ceux-ci sont évidemment très utiles dans toutes sortes de parties. Maintenant, si nous essayions de faire cela une fonction de discussion ou une fonction d'état, vous pourriez faire petits cercles et les mettre en haut. C'est donc quelque chose comme ce que fait Messenger. Porter. Le vert signifie évidemment qu'ils sont actifs. Et l'orange ou le rouge signifie qu' occupés ou dans l'autre sens ou gris signifie normalement s'ils sont hors ligne. Vous pouvez voir ici en les regroupant avec les cercles, vous pouvez créer une petite grille d'icônes colorées pour refléter le fait que celles-ci utilisent cela soit en ligne, soit dans ce cas en ce moment. Cela va être un moyen en changeant simplement la couleur pour quelque chose qui ressemble un peu plus au système de feux de signalisation. Vous pouvez voir ici comment ils fonctionnent. Maintenant, un autre objet que vous pouvez faire est d'ajouter des fonctions d'infobulle. Les infobulles sont donc essentiellement des effets de survol où si vous survolez quelque chose, lorsque vous cliquez sur quelque chose, il créera une infobulle contextuelle. Donc, dans ce cas particulier, nous pouvons mettre quelque chose comme en ligne. Donc, si quelqu'un survole ou clique sur l'utilisateur, il sera essentiellement esclave. On dira essentiellement s' ils sont en ligne ou non. Ce qui, encore une fois, est vraiment utile si vous essayez de créer une application sociale qui a interactivité, du chat social et de la messagerie. Vous n'avez peut-être pas cela. Donc, cette partie de la classe peut être tout à fait pertinente, mais il est toujours bon de savoir comment faire ces choses et comment incorporer des animations prototypes et les connecter à des animations en mouvement sont déplacer les barres de défilement, comme vous pouvez le voir dans l'application à l'écran. Ici, il suffit de faire le texte et la forme à gauche, la bonne taille, en lui donnant une belle ombre portée et centre et en alignant tout. Et c'est peut-être un peu petit. Potentiellement Nous l' avons peut-être agrandi, mais nous le pouvons, nous pouvons vérifier et voir à quoi cela ressemble. Dans la zone de visualisation du prototype. Nous allons encadrer cela pour que nous puissions réellement les fabriquer. Dans ce cas particulier, créons-en composants car nous voudrions peut-être dupliquer ce composant sur toutes les autres images plus tard en bas de la ligne. Et ce que nous allons faire, c'est faire une introduction sur la barre verte, où le cercle vert pendant que nous planons ou pendant que nous touchons dans ce cas particulier, ouvrez la superposition et nous allons choisir cette info-bulle en ligne. Ensuite, nous allons le rendre manuel afin que nous puissions choisir où vient cette info-bulle lorsque vous la survolez ou que vous cliquez dessus et que vous la dissolvez, ce qui fait un fondu lent lent dans l'animation de fondu sortant. Vous pouvez cliquer dessus et vous verrez comment il s'ouvre maintenant, comme nous l'avons dit, trop petit. Faisons donc un peu plus grand pour que l'utilisateur puisse réellement voir ce qui se passe. C'est joli, gros là-dessus. Et puis passons à l'onglet Design et changeons ceci en, disons 11 parce que ce travail, oui, ça a l' air assez joli. Il se peut que vous deviez aligner cela au centre. Parce que la ligne est un peu trop haute en haut. Vers le bas. Encore une fois, cela peut parfois être un peu agité, mais ce sera maintenant beaucoup plus grand. Vous pouvez donc voir ici. Mais actuellement, nous avons toujours ce que nous devons faire est activer l'utilisateur une fois qu' clique loin de ce bouton vert. Cette fermeture lorsque vous cliquez sur l'extérieur. Cela signifie que lorsque quelqu'un clique sur l'extérieur, il disparaîtra. là que tu l'as. Vous disposez d'une jolie barre de défilement avec des animations hors ligne en ligne. Vous ne pouvez pas retarder des effets et des choses semblables à cela. Mais dans ce cas particulier, nous voulions simplement créer une barre de défilement. Et nous avons ajouté quelques petits morceaux supplémentaires pour que cela ressemble davantage à une application d'expérience sociale. De toute évidence par la suite, ce que nous allons faire c'est passer au morphisme du verre, c'est le terme. Donc, en gros, vous remarquez probablement à gauche en tant qu' application avec toutes ces images que j'ai maintenant supprimées. Mais en arrière-plan, vous pouvez voir ce bel effet bleu violet flou où toutes les ressources et les calques sont au-dessus. Et ça a l'air plutôt cool. Attention donc à la prochaine vidéo cette classe où nous allons parler morphisme du verre et de la façon de rendre cela très facile. Et prenez soin de vous. 5. Créer des arrière-plans Glassmorphic pour les applications: Bonjour, bienvenue dans le prochain cours de cette classe Figma Skillshare. Nous avons déjà envisagé créer des barres de défilement horizontales, et aujourd'hui, nous allons examiner le morphisme du verre. Enfin, le morphisme est cet effet que de nombreuses applications et logiciels sont utilisés ces jours-ci pour aider à ajouter une couche de profondeur à un logiciel ou à une application. Dans ce cas particulier, nous pouvons voir ici que nous avons notre application de type Instagram appelée pictorial. Et nous avons ce joli fond bleu et violet, qui a un bel effet flou ou morphique de verre. Et cela aide vraiment à faire ressortir les images et le profil sur cette application. Ce que nous allons faire, c'est de nous concentrer sur la création de cela aujourd'hui. Et c'est une technique très simple et elle aide vraiment à faire ressortir et à rendre votre application plus créative. Donc, si je l'éteins ici, vous verrez que nous avons ce cadre de cet iPhone 13 Max Pro. Et vous pouvez voir comment l'ajout de cet effet morphique de verre peut vraiment ajouter cette profondeur supplémentaire à l'image. Ce que nous allons faire, c'est que nous allons ouvrir ce que nous avons fait notre précédent téléphone, qui comportait tous les boutons hamburger et les boutons de la barre de défilement . Et nous allons appliquer un effet morphique de verre sur ce téléphone. Plongeons directement et je vais vous montrer que ce n'est pas un tutoriel très complexe. En fait, c'est très facile à faire. Et je vais vous montrer exactement comment le faire maintenant. L'une des premières choses que nous voulons faire est d'apporter une image qui, selon nous, sera vraiment cool pour l' arrière-plan de ce téléphone. Donc, si nous allons ici et que nous allons aux plug-ins, j'utilise Unsplash. Il y a beaucoup d'autres plugins que vous pouvez utiliser, donc je peux toujours faire une vidéo plus tard sur façon de le faire et comment y ajouter des plugins. Mais nous allons utiliser Unsplash, qui contient des images gratuites que vous pouvez utiliser et vous pouvez également les réutiliser commercialement. Considérant que nous créons une application qui est axée sur l'utilisateur et qui est une expérience sociale. Nous voulons nous assurer que l'image n'est pas trop distrayante à l'arrière. Normalement, des choses comme l'architecture abstraite, l'espace, les papiers peints, nos textures sont vraiment bonnes. Jetons un coup d'œil et voyons quels papiers peints nous avons. Ils sont donc géniaux. Mais vous pouvez voir comment la plupart d'entre eux se situent davantage vers une expérience de bureau. Je ne suis donc pas trop sûr personnellement de celui-là. Passons donc aux textures. On y va, ils ont l' air un peu mieux, mais nous voulons trouver quelque chose qui a beaucoup de vibrance là-dedans. Si nous continuons à faire défiler vers le bas, nous pourrions trouver quelque chose de vraiment utile. Je mettrai cette image dans le dossier projet de la classe également au cas où vous voudriez les réutiliser. Mais si ce n'est pas le cas, vous pouvez utiliser n'importe quelle image de votre choix. Et évidemment, cela vous aide à rendre les choses un peu plus personnalisées. Pourquoi essayons-nous celui-ci ? Celle-ci, évidemment, il se passe beaucoup de choses. Cliquons donc là-dessus et apportons-le. L'une des premières choses que nous allons faire est de le réduire. Alors maintenez la touche Maj et redimensionnez-la en conséquence pour qu'elle corresponde au diamètre et aux dimensions de l'écran mobile. La prochaine chose que nous allons faire, c'est de créer un triangle. Triangle, désolé, un rectangle. Nous allons masquer cela dans la zone immobilière iPhone 13 Pro Max. Faisons donc un rectangle et faisons-le juste s' aligner avec cela et l'étirer. Donc, si nous revenons au prototype, nous verrons que nous avons un rayon de frontière de 34. Donc, si je clique sur ce rectangle et que je fais ce 34, vous verrez comment maintenant il s'intègre bien dans ce pivot de zone. Maintenant, ce que nous pouvons faire, c'est le faire sortir du cadre et nous allons le masquer. On va le masquer avec ça. Mais avant de le faire, nous allons vouloir le copier et le dupliquer. Je vais mettre ça de l'autre côté et je vais le rendre blanc. Comme ça va être une superposition sur l'image masquée. Revenons ici et sélectionnons cette image abstraite et l'image derrière elle avec Maj et maintenez-la enfoncée avec le bouton droit de la souris, utilisez comme masque. Si vous cliquez à nouveau, il vous permettra de déplacer l'image n'importe où dans cette image masquée. Ça a l'air plutôt cool. Maintenant, ce que nous allons faire, c'est que nous allons obtenir cette image et la faire glisser au-dessus de cette image masquée. Nous avons donc le rectangle 18 ici. Appelons ce panneau morphique en verre. Et nous allons faire glisser ça au-dessus de cette image masquée et l'extraire. Maintenant, ce que nous allons faire, c'est passer aux effets et changer l' ombre portée en arrière-plan flou. Maintenant, nous l'avons fait, mais rien ne se passe encore ici. C'est ici que nous allons voir cette image ici. Et nous changeons le remplissage à environ 25 %. Maintenant, vous pouvez voir ici que nous avons une superposition. Ce qui est si agréable et translucide, mais s'adapte parfaitement à l'image. Mais vous vous demandez probablement, c'est un peu floue, mais pas assez floue. Si nous cliquons sur le panneau morphique de verre, allez sur cette icône ici et modifiez cela et augmentez le flou. Disons que nous l'appelons 50. Vous pouvez maintenant voir comment elle est floue, essentiellement l'image derrière elle. Et il donne un très bel effet de verre opaque ou translucide, c'est pourquoi nous l' appelons morphisme du verre. Maintenant, ça a l'air cool, génial, génial. Mais que se passe-t-il si nous voulions ajouter de la complexité ? Et si nous voulions ajouter d'autres images à ce sujet ? La première chose que nous allons faire, c'est que nous allons regrouper ça ou l'encadrer. Nous pouvons le faire ensemble. Et nous allons appeler cette douleur morphique du verre. Un. Nous allons faire glisser ceci à l'intérieur de l'iPhone juste derrière et le faire glisser , puis le placer à l'arrière. De cette façon, nous avons un bel effet de fond. Termes de base. C'est ça, c'est le verre, l'effet morphique du verre. Si je me dirige vers l'iPhone précédent, vous verrez à quel point il a le même aspect et la même sensation. Naturellement, cette image présente un panneau blanc blanc en haut, ce qui donne évidemment une belle rupture distincte entre la zone de menu en haut. Mais en réalité, c'est essentiellement la même chose. Et une fois que vous avez appris à réaliser cet effet morphique de verre, vous pouvez ajouter de plus en plus de couches à cela. Évidemment, si vous vouliez avoir un calque qui sépare ce calque en haut. Par exemple, nous pouvons aller ici et aller sur Unsplash et en trouver un autre. Trouvons une autre image rapide. Ce qui pourrait bien se passer avec ça. Apportons donc cette image. L'une des choses intéressantes que vous pouvez faire est de modifier l'image dans laquelle elle est mélangée. Si on va ici et qu'on fait un carré comme avant. Nous modifions le volet ici. Mettons ça ici et mettons ça ici et faisons-le plier. Ce que nous pouvons faire, c'est masquer cela de cette mauvaise façon, arrondir, le mettre au premier plan. Cliquez avec le bouton droit de la souris, je clique avec le bouton droit et le centre devant et la mascotte. Même processus qu'avant. Et maintenant, vous pouvez voir ici ce que nous avons fait, c'est que nous avons ajouté, étant donné cette dimension supplémentaire, un calque supplémentaire. Et ce que nous allons faire, c'est obtenir un autre rectangle carré, comme avant. Dessinez sur cet iPhone. Assurez-vous qu'il s'agit de la bonne largeur, de la bonne échelle. C'est 34. Assurez-vous que ce rectangle est également 34. Ensuite, nous allons mettre ça au-dessus de cette image ici. Incroyable. Et nous allons ajouter un flou d'arrière-plan, faire 50, puis faire 25, puis le rendre blanc. Maintenant, évidemment, vous pouvez voir ici comment cela ne se passe pas exactement sur les bords car bien sûr, nous ne l'avons pas fait. Je peux aussi en faire 34. C'est essentiellement faire en sorte que le rectangle du masque ait également un bord. Et je reprends ça comme ça. Maintenant, ce que nous pouvons faire, c'est regrouper cela. Je sais que j'ai vécu ça assez rapidement, mais c'est juste récapituler ce que j'ai déjà fait. Et nous allons ajouter cela à la forme. Nous le voudrons peut-être, nous voudrions peut-être faire glisser cela un peu plus bas. Excuses. Parce que nous pouvons toujours faire glisser cela vers le bas, mais pour cela, nous pouvons faire glisser cette forme ici, puis la faire glisser vers le bas. Nous avons donc maintenant deux effets morphiques de verre. Ce que nous pouvons faire alors, c'est le travail et la classe morphique deux. Et maintenant, nous avons ces deux peintures. Nous pouvons réellement travailler sur eux différemment. Nous avons donc ce panel ici, que nous pouvons changer afin de rendre celui-ci plus translucide ou moins translucide. Il peut donc être 15 % et ensuite rendre cela flou. Vingt-cinq de cette façon où l'accent est mis sur la première page par rapport à la précédente. Mais encore une fois, ça ne semble pas forcément le plus grand. Mais le but de cette classe est simplement de vous montrer ce que vous pouvez et ne pouvez pas faire et vous pouvez devenir vraiment créatif avec le morphisme du verre. Ce que j'aimerais que vous fassiez, c'est que je vais placer ces deux images dans la zone du fichier du projet. Et je vous exhorte à trouver vos propres images, mais essayez définitivement cet effet et voyez à quoi il ressemble dans vos applications et vos tableaux de bord et que vous créez dans Figma. J'espère que ce cours vous a plu. Très facile, très simple. Seulement dix minutes, mais j'espère que vous avez trouvé des techniques utiles. Et j'ai hâte de vous voir au prochain cours, qui aura lieu la semaine prochaine. Merci.