UI / UX Figma - Conception d'une application Web Messenger UI/UX (projet complet)

1. Introduction: Bienvenue dans ce cours. Je m'appelle hier, Chelsea et Albert instructeur dans ce cours. Dans ce cours, vous allez concevoir une application Web Messenger complète, UI UX, à l'aide de Figma. Pendant que vous concevez ce messager comme une application Web, vous aurez une interface utilisateur et différents types de fonctionnalités et les meilleures pratiques de Figma. Je vais vous montrer comment utiliser différents types d' outils de Figma pour différentes fonctionnalités de conception. Vous apprendrez comment faire des groupes, créer un système de grille de rétroaction de composants, comment utiliser Figma, plug-in, prototypage figma avec n'importe quel maillage, comment faire un prototype, offrir des fonctionnalités en direct et différentes types d'animaux illustrés. À la fin, vous apprendrez comment partager votre design et comment l'exporter. Après avoir terminé ce cours, vous aurez un projet réel complet que vous pourrez ajouter à votre portfolio. Je vous encourage donc vivement à profiter de ce cours. 2. Créer un projet et une conception de mise en page: Bienvenue dans cette conférence. Dans cette partie, nous allons commencer à travailler sur nos projets. Ainsi, dès que vous vous connectez à votre compte Figma, vous pouvez voir ce type d'interface utilisateur et à partir de là, vous devez cliquer sur un nouveau fichier de conception. Je vais donc cliquer dessus. Ensuite, il va ouvrir un nouveau fichier de projet pour nous. Et à partir de là, nous allons devoir créer notre cadre. Nous allons donc travailler sur l'application Web. Je vais donc sélectionner un cadre. Et à partir de là, vous pourrez vous asseoir sur le pont et l'arrêt de pont, il y aura deux options ici. D'accord, à partir de là, je vais choisir ce magasin DIG, 14401024. Dès que je sélectionne celui-ci, nous avons cette mise en page. D'abord et avant tout, je vais changer le nom de celui-ci. Je vais dire « chez moi ». Maintenant, nous devons concevoir notre en-tête ici. Et dans l'en-tête, nous allons avoir notre photo de profil, puis le nom. Ensuite, nous allons avoir deux sections ici. L'un sera ici et l' autre sera là. D'accord, donc avant cela, je vais sélectionner la grille ici et cliquer sur la grille de disposition de la grille. Et au lieu de cette grille, je vais sélectionner la colonne. Ensuite, je vais sélectionner 20 colonnes. Ça va ? Cela nous aidera beaucoup à concevoir. Ok ? Maintenant, à partir de là, je vais concevoir notre section d'en-tête ici. Je vais donc cliquer sur ce rectangle et dessiner ici. Pour l'instant, je vais juste, très bien. Nous avons donc maintenant notre en-tête ici. Et maintenant, en cliquant sur ce champ, nous pouvons ajouter une couleur différente. Pour celui-ci, ici. Nous pouvons ajouter une couleur différente. Mais pour l'instant, laisse-moi cacher celui-ci afin que nous puissions voir notre lymphocyte T. Donc c'est notre couleur que nous avons maintenant, je pense que cette couleur est bonne. J'ai bien aimé. Et maintenant, après ça, je vais à nouveau montrer cette chronique. Et ici, je vais avoir une section supplémentaire pour afficher nos informations utilisateur, la liste des utilisateurs. Ok, donc pour cela je vais sélectionner notre rectangle ici. Et après ça, jusqu'à cette colonne, je vais mettre ce rectangle peut-être à partir d'ici. Je vais mettre cette colonne. Je vais prendre cette chronique à partir de là. Et après ça, je vais définir notre, je vais définir notre trait ici. Maintenant, cachons ce prétendu système de grille. Regarde à quoi ça ressemble. Donc ça ressemble à ça. Je veux aussi avoir une couleur blanche. À partir de là, je vais prendre peu de place ici. Très bien, donc je pense littéralement « espace à partir d'ici ». Maintenant. Que pouvons-nous faire ? Je veux avoir de la couleur blanche ici et aussi avoir un petit rayon de bordure ici. Je vais donc mettre border-radius ici, avoir tendance à pixelliser, puis je vais changer la couleur d'arrière-plan. Je vais choisir la couleur blanche, la couleur fond que nous avons ici. Donc ça ressemble à ça maintenant. Mais ce serait bien si nous le montrions cette façon et que nous prenions peu de place à partir d'ici, du côté gauche et du côté droit. Ce sera donc notre panier principal et la zone principale où nous mettrons notre liste d'utilisateurs. Très bien, et maintenant voici juste là. Je souhaite avoir une autre section pour afficher les messages. Permettez-moi donc d'activer le système de grille. Voici donc notre système de réseau. Mettons celui-ci ici. Pas d'ici. Je parlais de celui-ci. Nous allons le mettre sur cette grille et nous allons commencer nos masses à partir d'ici. Je vais sélectionner un autre rectangle ici. Et à partir de là, de là, je vais commencer la section de messagerie de notre application et m' assurer que nous avons la même taille et le même poids. Et on y va. C'est notre point de départ et c'est notre point de départ. Également. Vous pouvez voir le symbole de la petite croix sur le côté gauche. Cela signifie qu'il est démarré à partir de la même taille, du même endroit. Donc, si nous masquons notre grille, nous devrions également être en mesure de voir ce genre de choses ici. Ici, nous pouvons également voir ce genre de choses. Lisez maintenant que nous avons mis le rayon de la bordure de dix pixels pour celui-ci. Je vais donc mettre border-radius dix pour celui-ci , puis ajouter le trait. Si je clique sur cette discussion, elle va nous donner la frontière. Et puis en cliquant dessus, je vais ajouter la couleur blanche afin que nous ayons même couleur pour ces deux éléments. Bon, maintenant nous avons ce petit espace. Et à partir de là, nous n'avons pas besoin de cet espace modèle, donc je vais augmenter cet espace à partir d'ici, un peu d'espace à partir d'ici. Très bien, ce sont donc les deux sections principales où nous allons avoir notre contenu principal. Donc ici, nous allons mettre nos informations d'utilisateur comme notre photo de profil pour cela, pour l'utilisateur connecté, puis le nom. Et ici, nous allons mettre tous les messages de chat, puis voici tous les utilisateurs, puis ici tous les messages de chat ici. Je vais donc arrêter cette vidéo ici et nous continuerons avec la prochaine conférence. Rendez-vous à la prochaine conférence. 3. Liste d'utilisateurs Conception d'éléments: Bon retour, une fois de plus. Dans cette partie, nous allons essayer de concevoir notre en-tête et notre barre latérale. Pour cela, je vais d'abord sélectionner l'ellipse ici. Et dans cette ellipse, je vais concevoir cet outil d'ellipse ici. Nous allons donc mettre nos e-mails ici et nous assurer que nous avons exactement la même hauteur et le même blanc. Donc je vais mettre 60 par 60 et le mettre ici. Ensuite, nous voulons avoir notre rayon de frontière ici. Donc pas d'idées dérangées. Je veux avoir une bordure ici et changer la taille de la bordure à cinq. Et je vais le faire en blanc. Donc ça va ressembler à ça. Si cela est nécessaire, nous apporterons des modifications. Et maintenant, je voulais avoir un nom ici. Je vais donc cliquer sur l'outil de texte. Et je vais dire John Doe. Et je vais sélectionner la taille de la police à 16 pixels. Voici, peut-être que nous pouvons en choisir 20 et le mettre au milieu. Et maintenant, à partir de là, je peux choisir une famille de polices différente ici, il suffit de cliquer dessus, de prendre le texte. Et vous pourrez voir quelques familles de polices qu' ils ont ajoutées. Et je vais choisir un nom au hasard ici. Il ne s'affiche pas ici. Peut-être que nous pouvons choisir celui-ci, pas celui-ci. Nous pouvons choisir celui-ci en fait. Ou s'il y a quelque chose de mieux. Et ça va ressembler à ça. Ça va ressembler à ça. Ce n'est pas tout petit. Ça, et ça. Et ça. Je vais choisir, je pense que celui-ci était meilleur. D'accord, mais il n'y a aucun changement ici. Je vais donc choisir ce tilleul ou nous avons eu quelque chose qui s'appelle, d' accord, celui-ci. Maintenant, je vais mettre notre image pour mettre un EMS. Ils ont fait une erreur ici, alors mettez le bordel. Vous devez donc sélectionner, vous devez sélectionner l'outil Image. Et à partir de là, il vous suffit de télécharger votre photo de profil, télécharger la photo que vous souhaitez montrer. Par exemple, je vais choisir celui-ci ici. Et cela montre que l'ajout de MS et après une chute, alors que vous pourrez voir cette image dans votre bouche, suffit de sélectionner celle-ci, puis il ajoutera votre outil ellipse. Bon, maintenant je ne veux pas en avoir cinq pour la photo de la bordure. Je vais en prendre trois. Ok, maintenant ça a l'air bien. Parfait. Et ici, nous voulons avoir notre liste de messages. Mais avant cela, nous avons besoin d'une barre de source ici. Je vais donc définir un rectangle ici. Et mettez ce rectangle, ou rayon de bordure. Je vais dire rayon de bordure de dix pixels et ajouter à bordé ici, changer la couleur d'arrière-plan en couleur blanche. Et ici, juste ici , nous pouvons le faire. Donc ici nous pouvons, nous pouvons, nous pouvons, nous avons également besoin d'un bouton ici. Nous avons également besoin d'un bouton de la même taille. Je vais donc dupliquer celui-ci, puis le faire glisser ici, puis redimensionner celui-ci pour le bouton. Nous pouvons simplement le mettre ici de cette façon. Alors je peux augmenter celui-ci. Ici. Nous allons mettre notre icône et ici nous pouvons simplement la payer. Nous pouvons simplement ajouter une texture. Nous pouvons dire, nous pouvons dire sars, nom d'utilisateur sars ici. Et je vais changer la taille de la police à 15 pixels. Et peut-être de la couleur, ou je peux faire un peu de couleur pour celui-ci. La couleur de l'ombre. Très bien, maintenant ça a l'air bien. Maintenant, je vais mettre nos e-mails. Je vais mettre une icône ici pour cela. J'ai déjà installé un PECC qui s' appelle objectif pour accéder aux plugins. Et ici, vous pouvez voir que notre icône de chargeur. Donc, si vous ne l'avez pas encore installé, vous pouvez simplement cliquer sur le plug-in Find More, puis simplement rechercher cette icône de filtre ou vous pouvez utiliser n'importe quel autre plug-in pour afficher l'icône ici. Je vais donc cliquer sur l'icône du dossier. Ici. Je vais ajouter le SRAS. SRAS. Ils ont donc une icône de sars. Je vais juste le mettre là. Voici donc l'icône de recherche. Je vais donc simplement sélectionner cette option ici, icône sars, et la mettre ici. Au centre de celui-ci. Vous pouvez maintenant voir que celui-ci est en dehors du cadre. Notre ordinateur central est à la maison, donc je vais simplement le faire glisser à l'intérieur de ce cadre. Très bien, donc c' est notre icône de recherche, et maintenant après ça, je veux avoir nos deux options ici. Ça vient ici. Je vais supprimer celui-ci. Nous allons donc afficher ici notre liste d'utilisateurs. Très bien, alors comment nous allons afficher une liste d'utilisateurs, nous allons prendre un rectangle sain ici. Je vais dessiner un rectangle ici. Et puis ce rectangle ici. Je vais dessiner ce rectangle. Et je vais ajouter dix pixels pour ce rectangle, pour cette voiture, pour cet article, pour ce rectangle. Et puis je veux avoir une couleur blanche, comme la même couleur que celle que nous maintenons, mais je veux avoir un trait ici. Sélectionnez donc un trait ici. Maintenant, cela ressemble à ça et ici, je pense que nous pouvons l'augmenter. Nous devons mettre notre icône, puis le nom et le message, et la durée, puis un petit point ici. Alors, comment allons-nous procéder ? Qui pouvons-nous dupliquer celui-ci parce que nous avons besoin du même design. Ok ? Je vais donc dupliquer celui-ci. Donc Command D, Control D et mettez-le simplement ici. Mais on ne le voit pas ici. Il semble que notre rectangle et notre EMS, EMS, mais cela ne s'affiche pas ici. Voici donc notre ellipse. L'ellipse vers, laisse-moi la placer devant. On peut dire qu'il n'y a rien trouvé. Je vais donc supprimer celui-ci. Et refaisons un doublon. Puis faites-le glisser ici de cette façon, puis suivez-le ici. Le problème, c'est que ce n'est pas au premier plan. Il faut donc nous le montrer. Vous pouvez voir Placer au premier plan, cliquez sur le bouton Amener au premier plan. Et maintenant c'est au premier plan. Je vais donc simplement le mettre ici. Ensuite, je vais ajouter notre nom ici. Voici donc notre outil d'ellipse. Je vais en faire un nom. Je vais donner un nom ici, donc je vais dire Renommer. Voici notre ellipse, celle-ci. Je vais donc renommer celui-ci. Je vais ajouter cette façon de procéder ici. Cette ellipse sera donc notre nom. Appuyez sur Ctrl R, ici. Je vais dire ici l'icône utilisateur, liste et la liste des utilisateurs. Ensuite, je vais ajouter notre nom ici. Disons que nous pouvons dire, nous pouvons dire Francisco. Francisco. Et vous pouvez voir qu'elle prend la famille de polices précédente que nous avons utilisée. Donc pour la famille de polices, pour le, car le nom prend celui-ci. Et j'en suis content. Si vous le souhaitez, vous pouvez simplement modifier le nom de la famille de police ici. Et après cela, donc et prend un pixel 15 comme ils doivent la taille de la police. Ensuite, j'ai besoin d'un texte de plus pour les masses. Nous pouvons dire « Bonjour, comment allez-vous ? » Mais pour cela, je veux avoir 12 pixels. Ici. Je veux avoir 12 pixels. Et maintenant, je veux mettre ici notre durée. Je vais donc fixer une heure ici. Je vais dire, disons 9 h d'ici 19 h 15. C'est le moment que nous montrons. Mais prend la couleur blanche. Pourquoi est-ce que c'est ? Il doit être de couleur blanche. Où ça prend de la couleur blanche. Cela ne devrait pas être le cas. Permettez-moi de supprimer celui-ci. Replaçons le texte ici . Nous sommes toujours en train de travailler. Mettons donc un 90915, 15h juste à l'heure du message que l'utilisateur a envoyé. Et ici, je veux avoir trois points pour cela. Je veux dessiner un point T ici, comme un point de petite taille à l'aide d'Elasticsearch, disons cinq pixels par cinq pixels et changer simplement la couleur en noir. Maintenant, ça ressemble à ça. Je pense que nous pouvons faire avec trois pixels par la hauteur, et la hauteur est de trois par trois. C'est pas bon. Je vais donc le faire quatre par 44 par quatre. Et puis je vais le dupliquer Command D et prendre un espace et le dupliquer une fois de plus. Ce sont donc les trois points que je viens d'ajouter. Ce serait donc bien si je réduisais la distance entre ces deux. Ok, donc ça a l'air bien. Nous avons donc ici cette ellipse, un outil d'ellipse dans Illustrator, qui en fait un groupe. Je vais donc appuyer sur Commande G. Et ensuite je vais le mettre ici. Et le centre de celui-ci. Maintenant nous avons ce point t et je vais diminuer la hauteur de celui-ci parce que nous n'avons pas besoin de ce nombre de hauteur. Très bien, maintenant, très bien, encore un peu plus ici. Nous avons donc ce design ici. Maintenant, ce que nous allons devoir faire, nous allons devoir ajouter plusieurs éléments de celui-ci. Donc, ce que nous allons faire en gros va en faire un groupe, puis nous allons ajouter plusieurs éléments , puis nous allons ajouter des options de défilement. Je vais donc arrêter cette vidéo ici et nous continuerons avec la prochaine conférence. Rendez-vous à la prochaine conférence. 4. Défilement de groupe et vertical: Bon retour, une fois de plus. Dans cette partie, nous essaierons d'ajouter plusieurs listes, plusieurs éléments utilisateur, puis nous essaierons d'ajouter une option d'échelle. Nous avons maintenant ce design et nous pouvons le réutiliser. Il va donc falloir en faire un groupe. Donc ce rectangle, puis c'est une liste ou EMS et que nous avons créé ensuite ce texte, ce texte et celui-ci, et ce groupe un pour cette icône enseignée. Ce sont donc les éléments qui contiennent cet élément intégral ici. Je vais donc en faire un groupe. Sélectionnez donc tout cela dans la barre latérale gauche. Assurez-vous d' avoir sélectionné chaque élément. Je vais donc sélectionner Command C, puis je vais renommer le groupe sensible int pour appuyer sur Control R. Ou vous pouvez également le faire en cliquant ici. Vous pouvez donc voir votre contrôleur de nom. Je vais donc dire liste d'utilisateurs. Ainsi, lorsque vous travaillez dans un grand projet, essayez toujours de donner un nom significatif afin que vous puissiez le découvrir facilement plus tard lorsque vous apportez des modifications . C'est donc toujours une bonne pratique. Nous avons maintenant ce design et que pouvons-nous faire maintenant ? Je vais donc appuyer sur Ctrl D pour celui-ci. Ensuite, je vais le faire glisser ici. Et maintenant je n'ai plus qu' à le faire glisser une seule fois. Et après ça, je vais juste dire, j' ai juste besoin de le faire glisser une fois et je l'ai mis, je vais juste appuyer sur Ctrl D, puis ça va automatiquement. Appuyez donc sur Control D, Control D, Control D, Control D jusqu'à la fin, Control D. Voici donc la liste des utilisateurs que je veux avoir. Maintenant, voyons comment ça a l'air. Ok, vous pouvez, une chose, vous pouvez remarquer qu' il y a des icônes, il y a une liste qui va au-delà de notre mainframe, donc, nous ne serons pas en mesure de le faire. C'est donc là que ça vient. C'est là que ça sort, est ce que l'on appelle des fonctionnalités que nous allons apprendre ici. Ça va ? Nous allons donc maintenant devoir en faire une option évolutive afin que nous puissions voir le reste de la pièce et que nous puissions l'appeler verticalement. Ok ? Alors, comment nous le faisons exactement. Nous avons donc maintenant toutes ces listes d'utilisateurs. Voici donc la liste qui contient l'ensemble de nos affaires. Ok ? Ce sont donc les listes qui contiennent, vous pouvez voir si je sélectionne celle-ci, il y en a une autre, mais nous pouvons la voir. Maintenant. Faites une chose, sélectionnez à nouveau toutes les listes d'utilisateurs et faites-en un seul groupe. Sélectionnez donc tout cet élément. Maintenant, ce contenu est le tout. Maintenant, je vais en faire un groupe. Ok ? Maintenant, changez de nouveau le nom. Nous pouvons dire toutes les listes d'utilisateurs pour un parchemin, juste un nom significatif. Maintenant, ce groupe contient l' ensemble de notre liste d'utilisateurs. Et le plus simple tout ce contenu dans ce design unique est un design spécifique. Ok ? Maintenant, il suffit d'entrer dans le côté droit, vous pourrez voir les options de mise en page automatique ici. Il suffit de cliquer dessus. Dès que vous cliquez dessus, vous verrez le contenu du clip. Il vous suffit donc de cliquer sur le contenu de ce clip. Une fois que vous aurez cliqué sur le contenu de ce clip, vous pourrez voir que ce groupe aura ce type de forme. Maintenant, nous pouvons le faire glisser et ensuite nous pouvons l'ajuster avec notre mainframe, c' est-à-dire qu'il y avait cette maison à partir de cette prémisse de formulaire toujours là, mais notre groupe est toujours là maintenant. Donc ce que je vais faire, je vais juste l'ajouter ici. Très bien. Maintenant, nous voulons être en mesure de voir toutes les options scolaires. Donc, si je l'actualise, nous verrons simplement ces options. Ok, donc le truc c'est que je vais te montrer ce que je veux dire par là. Maintenant, nous pouvons toujours voir les options de crâne, nous avons toujours cette fonctionnalité ici, comme ici. Je peux aussi, encore une fois, faire glisser ici. Ça va ressembler à ça. Donc nous avons toujours cette option ici, accord, nous pouvons simplement appeler cet article. Tu peux voir qu'on peut le faire défiler vers la droite ? Notre liste d'utilisateurs est brisée jusqu'ici. Maintenant, il suffit de sélectionner cette liste d'utilisateurs , puis d'aller dans la section prototype. Cliquez sur le prototype. Ici, vous pouvez voir le défilement de débordement. Par défaut, il est sélectionné sans défilement. Nous devons apporter des modifications ici. Donc, au lieu de ne pas faire défiler, nous allons sélectionner le défilement vertical de cette âme. Maintenant, nous devrions être en mesure de voir notre liste. Ici. Vous pouvez voir que nous pouvons faire défiler notre article. Nous pouvons faire défiler notre liste. C'est ainsi que nous pouvons apporter des changements, mais c'est ainsi que nous pouvons ajouter nos options scolaires. Nous avons donc maintenant ces options ici. Cool. Vous avez maintenant appris à faire défiler. Faisons une chose. Maintenant. Je peux me changer. Ce sont des images comme des images différentes. Je vais donc sélectionner à nouveau Plessy mess. Ensuite, je vais sélectionner toutes ces images. Le téléchargement de ces images va prendre quelques secondes . Et dès que le téléchargement sera terminé, nous devrions être en mesure de voir nos images dans notre bouche lorsque nous les déplacerons. L'image est donc redimensionnée, donc elle reste immobile, cela prend du temps. Ça ne s'affiche pas. Allez-y. Vous pouvez voir que nous avons reçu huit e-mails. Maintenant, je vais sélectionner celui-ci. Je vais appuyer, donc nous avons déjà celui-ci. Je vais en appuyer une ici. Je vais appuyer sur le second ici. troisième est là, le quatrième est là. De cette façon, vous pouvez simplement, vous pouvez simplement vous montrer, vous pouvez simplement mettre plusieurs images ici. Tu peux voir ça. Nous avons maintenant des images différentes. Il faut un certain temps pour le rafraîchir. Nous avons donc maintenant une image différente pour chaque article. Donc ce que j'ai fait en gros, j'ai juste cliqué sur les e-mails de cet endroit et j'ai sélectionné toutes les images. Cela prend quelques secondes dès qu'il est téléchargé, puis vous pourrez voir toutes les images avec un chiffre avec votre souris. Ensuite, il vous suffit d'y aller et de cliquer dessus un par un, puis il sera automatiquement collé ici. Allons-y. Maintenant, nous avons un médicament de Fannie Mae's pour une autre carte. Vous pouvez le voir et nous pouvons également le faire défiler. Et nous pouvons également faire défiler celui-ci. Ainsi, si vous le souhaitez, vous pouvez également modifier toutes les images ici. Tu peux le faire toi-même. C'est le même processus. Nous avons donc maintenant ces fonctionnalités de défilement et différentes icônes sous différentes images. C'est ainsi que vous pouvez le faire. Très bien, donc je vais nourrir celui-ci. Vous avez donc appris à faire du défilement et comment le regrouper et comment puis-je le faire ici de cette façon ? Dans la partie suivante, nous allons travailler sur cette icône. Lorsque vous cliquez sur l'icône, nous allons afficher notre modèle fonctionne pour supprimer la liste. Rendez-vous à la prochaine conférence. 5. Liste de déroulants Prototype de superposition ouverte: Bon retour, une fois de plus. Dans cette partie, nous allons ajouter un élément individuel ici. Lorsque vous cliquez sur celui-ci pour supprimer cette liste, comment nous allons le faire pour cela, encore une fois, nous devons définir un cadre. Je vais donc cliquer sur le cadre, et cette fois je vais dessiner un cadre personnalisé, comme le faire glisser de cette façon. Très bien, donc au lieu de l'image un, je peux dire, je peux dire supprimer le cadre. Très bien, vous pouvez donner n'importe quel nom et je veux avoir un petit rayon de bordure ici. Je vais donc économiser cinq pixels. Et à l'intérieur de cette monture Dillard, je veux avoir deux boutons. L'un est pour retardé, l'autre est carré sans cadre. Qu'est-ce que je peux faire ? Je peux définir un rectangle ici. Et je peux définir notre rectangle ici. Pour ce rectangle, je vais donner 95e cellule border-radius pour qu'elle soit belle. Et je vais ajouter la couleur rouge et cette couleur ici que nous utilisons ici. Ensuite, je vais mettre un texto ici. Et je vais dire, mets-le au centre. Le texte au lieu de 15, devrait être 12 parce que c'est juste un texte de bouton normal. Qu'est-ce que je peux faire maintenant ? Fais-en un groupe, ces deux-là. Maintenant, je vais dupliquer ce groupe afin de pouvoir l'utiliser, je peux ajouter un autre bouton. Et ce bouton sera ce nom de bouton sera sur un ami. Je peux le dire. Et le bouton Ami. Laisse-moi le mettre au centre. Très bien, nous avons maintenant ce cadre. Maintenant, que devons-nous faire ? Nous devons relier ce cadre à ce point. Ainsi, lorsque vous cliquez sur ce haut, nous pouvons afficher celui-ci. Allez ici, cliquez sur ce prototype, et maintenant cliquez sur ce groupe, sur ce groupe de points. Pas exactement dans le sol. Tu peux le voir. Vous souvenez-vous que pour ces trois points, nous avons un sillon. Il vous suffit donc de cliquer sur le groupe. Et puis, ici, nous verrons les interactions. Cliquez dessus et cliquez ici. Ici, il est dit que comment vous voulez interagir, nous voulons l'avoir sur clic ou sur la bonne voie ou sur, eh bien, nous voulons l' avoir en onclick. Et puis au lieu de naviguer vers, je vais m'afficher et recommencer. Laissez cette superposition ouverte nous aider à ajouter notre type de boîte de modèle. Donc maintenant où nous voulons faire cette superposition ouverte, nous voulons le faire avec ce cadre de suppression. Ce nœud est maintenant connecté à ce cadre Gillette. Maintenant, il est dit d'ajouter un arrière-plan derrière la superposition. Je ne veux pas avoir de formation, donc je ne vais pas sélectionner ici. Et puis il est dit fermé lorsque je clique à l'extérieur, je veux le fermer lorsque l'utilisateur clique sur l'extérieur. Est-ce que je vais vous montrer ce que cela signifie ? Et maintenant, il y a ce système d'animation où vous voulez montrer celui-ci ou d'où vous voulez le faire, ou vous voulez le faire instance. Ajoutons donc d'abord cette animation, emménageons et détendons afin que vous compreniez ce que je veux dire. Maintenant, si je lance celui-ci, si je suis là et que je clique dessus, c'est parti. Notre suppression, je suis le lead frame va venir ici par défaut si je clique en dehors. Maintenant, nous devons le mettre manuellement ici. Je veux le montrer lorsque vous cliquez dessus, au lieu d'entrer au centre, il devrait venir ici. Alors, comment vais-je m'y prendre ? Ici, ils ont une option appelée centrée par défaut. Et voici en haut à gauche du centre, en haut à droite, en bas à partir de l'endroit où vous voulez le montrer. Disons en bas à gauche. Cliquez dessus. Il va s'ajouter ici en bas à gauche. Mais nous voulons le montrer ici. Par conséquent, vous pouvez simplement jouer avec celui-ci. Supposons que vous vouliez l' afficher en haut à droite. Maintenant, si je clique dessus, il va apparaître en haut à droite. Ok, tu peux juste le dire. Mon objectif est donc de t'apprendre. Je ne fais donc que vous montrer les anciennes options que vous pouvez utiliser plus tard en fonction de vos besoins. Mais pour celui-ci, je vais sélectionner. En attendant, dès que je dors avec le minéral, je peux le traîner ici juste après celui-ci. Je peux juste le faire glisser ici. Maintenant. Maintenant, si je le rafraîchis, il devrait venir ici parce que nous l'avons édité ici. Maintenant, cliquez dessus et c'est ici. Ça va ? Donc comme nous avons un fond de col blanc et nous avons aussi celui-ci. Je vais donc ajouter une couleur différente pour celui-ci afin qu' il soit facilement visible. Alors au lieu de ça, mettons cette couleur grise. Maintenant. Il est facilement visible ici et nous pouvons le mettre ici. Mais si nous le voulons, nous pouvons également ajouter une couleur différente pour celui-ci, peut-être celui-ci, et cette couleur, maintenant elle est belle, est facilement visible. Je clique à l'extérieur, ça va, mais je ne veux pas en avoir mesure parce que ce n' est pas convivial, parce que nous ne voulons pas montrer à notre utilisateur. Ça vient du bas. Que voulons-nous avoir ? Nous voulons afficher lorsque vous cliquez sur le degré affiché ici. Très bien, alors comment allons-nous faire ? Maintenant, passez à cette section prototype. Et c'est ici que nous avons eu notre interaction. C'est ce que nous avions ici. Ok, il faut donc cliquer dessus. Ensuite, nous pouvons voir celui-ci ici, notre précédent, et ici ils ont des options. Donc au lieu de morphine d'animation, je vais sélectionner Instantané leurs sièges. Dans ce cas, il ne donnera aucune mesure. Tu peux voir à la place maintenant. Tu peux voir à la place maintenant. Très bien. Cliquez dessus, il va venir maintenant lorsque vous cliquez sur le bouton Supprimer et sur le bouton Unfun, je veux également rejeter celui-ci. Je veux supprimer celui-ci. Alors, comment je m'y prends ? Maintenant, cliquez sur ce bouton, cliquez ici, puis affichez cette indirection ici. Cliquez sur le onclick et vous obtenez, vous suffit de cliquer sur ce fil brillant parce que nous avons eu un, nous avons un chevauchement. Je veux donc simplement fermer cette superposition. Ainsi, lorsque les utilisateurs cliquent dessus, vous cliquez dessus, nous voyons cette superposition. Cliquez maintenant sur le bouton Supprimer. Ça va se passer de cette façon. la même manière, nous pouvons également ajouter pour cela injuste et hors de Sean's. Alors sélectionnez ceci et un ami et venez ici, sélectionnez celui-ci, cliquez sur Aucun, puis cliquez sur Fermer la superposition. Celui-ci est également connecté. Maintenant que je clique dessus, il va se fermer. Je clique ici. Il montre ces deux options. Ensuite, cliquez dessus, c'est parti. C'est ainsi que vous pouvez ouvrir la superposition des spectacles, section de travail du modèle de cette façon. Et puis vous pouvez également faire ce genre de liste. J'espère que vous avez appris quelque chose de nouveau aujourd'hui. Rendez-vous à la prochaine conférence. 6. Conception d'envoi de messages: Bienvenue encore une fois. Dans cette partie, nous allons essayer concevoir la mise en page de notre message principal. Je veux donc, dans la partie précédente, avoir terminé toutes ces fonctionnalités. Et puis celui-ci fonctionne également. accord, donc nous pouvons également faire peu de réparations ici, par exemple, que je pense que nous pouvons simplement réduire la hauteur du cadre, un peu moins de réglage. Et peut-être que je ne peux pas, pas celui-ci comme le mainframe. Je parle de cet ordinateur central. Alors glissez ce mainframe et minimisez, diminuez la hauteur de celui-ci. Maintenant, nous pouvons voir que c'est réparé. Bon, maintenant je vais en faire un peu plus. Ok, donc, OK, donc augmentons-le un peu plus. Maintenant, sélectionnez celui-ci et mettez-le juste ici. Et aussi celui-ci, le chariot principal qui contient notre design principal ici. Et nous devons également ajuster notre cadre à nouveau. Cliquez donc sur cliquez sur ce cadre que nous avons fait ici. Ensuite, nous pouvons juste l' ajuster jusqu'ici. Maintenant, ça a l'air bien. Nous pouvons voir maintenant que nous n' avons pas ce parchemin. Je veux dire, comme nous tout d'abord, notre Haida était plus grand que la taille de mon écran. Mais si vous ne voulez pas apporter modifications, c'est très bien. Nous avons donc maintenant ce point de départ pour cette mise en page à partir d'ici, et celui-ci vient d'ici. Et maintenant, nous pouvons simplement l'appeler, maintenant il est plus beau que le précédent, le précédent. Très bien, donc ce que j'ai fait ne se confond pas ici. Donc ce que j'ai fait, j'ai juste diminué la hauteur de ce mainframe, qui est notre cadre principal, puis j'ai juste ajouté dans ce cadre et ensuite j'ai juste ajusté ce cadre qui contient tout cela. Et puis tout le cadre de la liste des utilisateurs, ajustez-le simplement pour qu' il soit meilleur maintenant. Et auparavant, c'était comme si nous avions un petit rouleau. Très bien, maintenant je vais ajouter l'option d alors ici. Donc ce que je vais avoir ici, je vais avoir un émeus et puis à côté de cet EMS, le nom, puis l' heure et puis le message. Donc ce que je vais faire, je vais juste dupliquer ça, ces émeus. Ensuite, je peux juste le mettre ici. Et quatre ici. Je vais ajouter une couleur de trait différente car notre fond est blanc. Donc, si je choisis cette largeur, ça va mal paraître. Pas mal exactement. Nous avons même possédé comprendre celui-ci. Tu ne veux pas être visible. Maintenant je pense qu'il est visible en rouge, donc je vais sélectionner celui-ci, et après cela, je vais devoir ajouter un nom ici. Je vais donc lui envoyer Francisco. Francisco va ici et je vais mettre le nom ici, 14 pixels. Et mets-le au centre. Et au même centre, je vais tirer le texte et ce sera notre heure. Ou nous pouvons également mettre l'heure ici ou au milieu. Si je le mets ici, nous aurons encore un texte. Non. Ça aura l'air bien au centre. Je vais dire den, den 12h. Ensuite, je vais faire ce truc ici et au centre. Et après ça, ce que j' aurai après ça, je vais avoir le message ici, la boîte de message. Donc pour ça, pour la boîte de message, je vais, je vais dessiner un rectangle ici. Je vais ajouter le message d'ici à ici. Les carnets de messages ressembleront à ceci. Et je vais ajouter un rayon de bordure ici. Ajoutez donc border-radius dix. Et la couleur de fond de Jen ou sans couleur de fond, si elle est belle, alors nous pouvons également garder celle-ci. Laisse-moi essayer. Celui-ci sera la meilleure solution. Voici donc notre boîte de message. Et je veux avoir un peu d'ombre ici, comme au lieu de 100%, disons 50 contre n. Ensuite, si j'utilise une couleur différente et que ça n'a pas l'air bon dans 50%, peut-être 70%, 70% pour cent. Ça va ressembler à ça. Mets-le à 80 %. Nous aurons cette couleur claire et celle-ci n'a pas l'air bien. Je vais donc essayer de générer d'autres couleurs. Peut-être cette couleur, cette couleur, celle-ci. Ensuite, placez un dégradé linéaire ici. Le dégradé linéaire ne sera donc pas visible ici. Je peux donc simplement le mettre ici. Au lieu de cette couleur, je vais choisir la couleur blanche. Et puis je vais choisir l'eau c'est parce que dans le message, nous avons toujours la couleur normale, normale afin que l'utilisateur puisse regarder l'écran pendant longtemps. Mais si nous utilisons une couleur colorée dans un message coloré, alors cela ne peut pas être très mauvais. Ce n'est pas convivial. Mais si vous avez une chose différente, une équipe différente, par exemple une équipe noire ou tout autre thème, vous pouvez essayer d' utiliser une couleur différente. Mais pour l'équipe blanche, pour le fond des cols blancs, il est toujours préférable de garder les masses dans une ombre blanche. Je vais donc minimiser cette hauteur. Et à l'intérieur de ceux-ci, je peux simplement taper en substance ici, je peux dire, Hey, Hi, Comment allez-vous ? Comment vas-tu ? Est-ce que tout va bien ? Est-ce que tout va bien ? Très bien, voici la boîte de message que nous avons ici. Nous aurons donc besoin de la même chose ici. Bon, maintenant je vais dupliquer, OK, donc dupliquons un autre, comme celui-ci, ce message, cette image. Je vais donc dupliquer celui-ci. Et je vais le mettre ici. Je vais donc simplement dupliquer celui-ci ici. Désolé. Ok, donc je l'ai mal fait. Donc au lieu de faire ça, je vais en faire un composant. Donc, créez un composant, puis nous pouvons simplement l'utiliser à partir d'ici. Si vous voulez créer un composant, sélectionnez simplement le désordre ou n'importe quel composant. Cliquez ensuite avec le bouton droit, cliquez avec le bouton droit, puis cliquez sur le composant, créez un composant. Par exemple, celui-ci. Puis cliquez sur Créer un composant, puis il apparaîtra ici. Ensuite, vous pouvez l'utiliser autant de fois que vous le souhaitez sans aucun problème. Alors maintenant, je vais mettre ce truc ici. Et je vais dupliquer celui-ci, commande D. Donc au même niveau, ça devrait l'être. Ici, nous pouvons voir que c'est le milieu. Très bien, voilà, maintenant je vais changer l'heure. On peut le dire. Nous pouvons alors dire cinq. Et puis ici, ici même, nous devrons écrire le nom. Je vais donc prendre et ajouter le texte et je vais le mettre ici. Je vais dire Jessica. Et je vais le mettre ici comme au même niveau, mais proche de celui-ci. Bon, Jessica envoie des messages à Francisco. Et laissez-moi vérifier si nous avons la même hauteur ou les mêmes polices. Taille de police 1414. Nous aurons maintenant besoin du même design ici. Alors ce que je vais faire, je vais en faire un groupe ensemble. Ces deux éléments par élément, sélectionnez ce rectangle sous ce texte. Faites-en un groupe, puis je vais le dupliquer. Ensuite, je vais le mettre ici. Et pour ce message, je vais le mettre ici et le côté droit, dans le côté droit. Ensuite je vais le mettre ici. Je vais réduire la taille. C'est le blanc de celui-ci. Et voilà. Donc les licenciements viennent de Francisco. Celui-ci vient de Jessica. Ensuite, ensemble, nous pouvons simplement le déplacer ici. Oui, mais tout va bien ici. Mais regroupons ces deux éléments comme celui-ci, puis cette Jessica, et cette fois ces deux-là et cette liste d'utilisateurs. Je vais donc en faire un groupe, séparer toutes ces choses. Et nous devons le mettre en bas. D'ici. Je vais dupliquer encore une fois ce message ici. Ensuite je vais le mettre ici. Ce sont donc les deux messages qui ont été envoyés par Jessica d'ici. Ce message vient donc de Jessica. Et là, je vais mettre encore une chose ici. Donc je vais, je vais avoir notre ligne ici, ainsi de suite pour ajouter une ligne. Nous pouvons prendre l'outil ligne ou l'outil rectangle. Je préfère donc utiliser cet outil rectangle afin de pouvoir le personnaliser facilement. Ensuite, je vais diminuer la hauteur de celui-ci. Mettons-le à, puis ajoutons border-radius et 90 click cell. Et on y va. Voyons à quoi ça ressemble. Ça ressemble à ça. Et je vais sélectionner celui-ci. La couleur de celui-ci est un bloc, je crois. Nous pouvons donc choisir cette couleur au noir. Et pas exactement un blog. Un peu de gris serait bien ici. Oui, donc ça ressemble à ça et à la même chose. Ce message vient de Francisco et le rejet vient de Jessica. Permettez-moi de modifier le message ici. Je peux dire envoyé ici. On peut dire, je vais ajouter différentes masses ici. Je peux dire que c'est Jessica de vos collègues de votre université. Ensuite, le deuxième message, Comment allez-vous ? Juste un S au hasard pour qu'il soit beau ? Et de la nourriture ? Et cela devrait commencer par le même poème, même position ici, comme ce point de départ à partir d'ici. Très bien, voici les deux messages qui ont été envoyés par Jessica et Francisco. Et après ça, juste ici, je veux avoir une boîte de message ici. Je vais donc créer une boîte de message ici. Je vais ajouter une boîte de message ici, juste ici. Ensuite, il devrait partir de la même position qu'il a commencé à partir de cette image. Donc, lorsque vous le faites glisser de cette façon, vous pouvez voir cette chose ici. Ensuite, je vais mettre ce rayon de bordure de 90 pixels, pas de 90 pixels. Ce serait bien si nous sélectionnons le pixel du parti peut-être pas étroitement pixel, neuf pixels. accord, maintenant je vais mettre, je vais ajouter un trait et changer la couleur d'arrière-plan en blanc. Et ici, nous allons devoir définir un autre bouton pour cela. Je vais dupliquer celui-ci. Et juste pour diminuer ce blanc. Et celui-ci sera destiné à notre bouton Envoyer. Ok ? Donc, il faut partir de la même position qu'à partir d'ici. Maintenant, ces deux autres boutons ici, les deux champs que nous avons ici. Alors celui-ci, je vais lui donner une couleur différente. Je vais donc ajouter une couleur, une couleur de trait que j'ai malheureusement aléatoire. Donc en fait, nous n'avons pas besoin d'un AVC ici. Nous avons besoin d'une couleur de fond ici. Et puis sa cible n'est plus visible ici. Et ici je vais ajouter notre icône appelée envoyé avec notre texte. Donc ici, nous devons d'abord modifier le texte ici. Nous pouvons dire ici, nous pouvons taper ici, nous pouvons dire parfum et le mettre au centre. Et juste après cela, je veux avoir notre icône appelée icône du chargeur. Ici, je vais ajouter envoyé. Et je vais sélectionner cette icône. Et il suffit de le mettre ici. Et je vais changer la couleur pour que vous puissiez voir les couleurs de sélection ici et le hasard du noir au blanc. Cool, c'est vraiment sympa, mais vous pouvez voir que cette icône d'envoi apparaît en dehors de notre cadre. Nous voulons donc pouvoir le voir ici. Donc ce que je vais faire, je vais juste le faire glisser à l'intérieur du cadre. Ensuite, nous pouvons voir notre bouton Envoyer. Je pense que nous devons le mettre au milieu. De cette façon. Oui, c'est le milieu. Et c'est ce que nous avons ici. D'accord, donc c'est notre spectacle désordonné juste ici. Je souhaite ajouter un texte. Je vais vous dire de taper votre teinture, votre message. Et je vais ajouter ce point en T. Et puis je vais, ce que je vais avoir, je vais ajouter une ombre ici. On peut changer le fond, on peut changer la couleur de celui-ci. Comme ce genre de couleur. Nous pouvons choisir la couleur de la petite ombre de la jambe, cette couleur. D'accord, donc tout va bien maintenant c'est vraiment beau. Nous avons donc conçu nos sections de message. Je vais donc arrêter cette vidéo ici et nous continuerons à partir de la prochaine conférence. Rendez-vous au prochain cours. 7. Inscrivez-vous et connectez-vous à la conception de la page: Bienvenue encore une fois. Nous avons donc rédigé notre message de système de messagerie. Mais j'ai encore besoin de régler quelques problèmes. Par exemple, vous pouvez voir ici que nous n' avons pas cette frontière que nous avons ici. Je vais donc résoudre rapidement ce problème. Et nous avons cette frontière. L'AVC est de trois. Je vais donc choisir le trait ici. Et je vais mettre ce trait. Très bien, j'ai fait une erreur. Je dois uniquement sélectionner cet élément. Ici je vais ajouter le trait. Le trait va atteindre C. Et une couleur de trait sera la couleur que nous avons ici. Et nous, très bien, nous avons déjà un accident vasculaire cérébral ici. Il semble que je vais supprimer celui-ci ici. Donc ici, double-cliquez dessus, puis je vais changer la couleur du trait. Parce que vous avez déjà un accident vasculaire cérébral, parce que nous venons de le rencontrer. Et dans notre composant, dans notre conception précédente, nous avions déjà eu leur coup. Il suffit donc de double-cliquer dessus. Ensuite, vous voyez l'icône, puis vous voyez la couleur, puis vous changez la couleur ici. Vous n'avez pas besoin d'ajouter un autre trait ici, car nous avons déjà une bordure pour celui-ci. Très bien, ce sont donc les quelques éléments. Maintenant, je veux concevoir notre inscription et la connexion paie pour cela. Je vais créer un cadre ici. Nous allons donc créer un cadre ici. Je vais simplement le faire de cette façon. C'est ce petit cadre. Et je vais ajouter un rayon de bordure ici. Nous pouvons donc dire ici, changez d'abord le nom. Je vais vous dire de signer ici. Et là, je vais ajouter, je vais le garder au pixel Cyprien à la frontière et au rayon. Donc pixel de retournement de rayon de bordure. Et ici, nous devrons ajouter un texte puis un champ de saisie. Je vais donc ajouter inscrivez-vous ici. Signez ici. Voici donc le texte d'inscription. Et voilà, nous avons des hausses de design au milieu. Et je vais changer la police à 20 pixels. Je pense. On peut, on peut, on peut en sélectionner deux en pixels. Et ici, je veux avoir à saisir le remplissage pas exactement trois champs de saisie. L'un d'eux va ressembler à ça. Et je vais mettre un rayon de bordure de 22 pixels et ajouter un trait ici et changer la couleur d'arrière-plan en couleur blanche. Ici, je vais ajouter un espace réservé. Je vais envoyer mon nom. Ou on peut mettre ce nom juste ici. Ce serait donc bien si nous pouvions donner le nom de cette façon. Ok. Et laisse-moi le traîner un peu plus. Et puis ça va être un nom. Ce sera un champ de nom. Ensuite, créons-en un groupe afin que nous puissions le dupliquer. Donc groupe puis commande D. Je vais ajouter celui-ci sera un e-mail. Il suffit donc de changer le nom en e-mail ici. Donc nous allons dire « e-mail ». Et après ça, je vais avoir ce D. Et celui-ci sera mot de passe. Donc celui-ci va être un champ de mot de passe. Il semble que je doive augmenter la hauteur de celui-ci car nous devons encore ajouter notre bouton ici. Donc et aussi besoin d'ajuster celui-ci de cette manière afin qu'il commence à partir de la même position. Très bien, cool. Nous devons maintenant ajouter nos boutons. Pour cela, je vais dessiner un rectangle ici et notre bouton ici. Donc je vais le mettre 20 ici. Mettons-le en 90. Ensuite, je vais donner notre couleur de fond à celle-ci, peut-être cette couleur. Nous avons donc celui-ci et maintenant je dois mettre notre texte ici et le centre appelé sign up. Et je vais l'ajouter ici et au centre. Très bien. Donc ça a l' air bien maintenant, mais je veux quand même avoir un peu plus de design ici. Donc, ce que je vais faire ici, je vais sélectionner l'outil Ellipse ici. Et je vais ajouter ce genre d'ellipse ici. Laissez-moi vous montrer exactement ce que je veux ajouter ici. Je souhaite ajouter ici plusieurs couleurs et le site. Donnons-lui une couleur. Juste une couleur aléatoire, celle-ci. Et voici maintenant notre configuration. Celui-ci est monté sur ce cadre, donc je vais le mettre à l'intérieur du cadre. Nous pouvons donc maintenant voir ce genre de forme. Je vais donc en dessiner un de plus ici. De cette façon. Nous pouvons en ajouter autant que vous le souhaitez et nous pouvons juste le faire deux souris plus tard. Maintenant je vais donner une autre couleur à celui-ci. Peut-être cette couleur. Mais encore une fois, je dois le mettre dans ce cadre. Ça va ressembler à ça, mais je n'ai pas aimé cette couleur. Alors ce que je veux faire, Essayons une autre couleur. Maintenant. Ça va ressembler à ça. Il est plus beau que le précédent. Maintenant, nous avons ces deux modèles ici dans le coin et le coin droit. Et que pouvons-nous faire d'autre ? Laissez-moi le faire glisser de cette façon. Peut-être que nous pouvons ajouter un peu plus de design ici si vous le souhaitez. Essayons d'ajouter un rectangle ici. Bon, dessinons un rectangle en dehors de celui-ci, lui donnons 90 pixels et ajoutons une couleur à ce rectangle. Ce rectangle et cette couleur. Très bien, maintenant je peux juste faire glisser ce rectangle et ça, je peux juste faire pivoter ce rectangle cette façon et le mettre à l'intérieur de celui-ci. Donc ce que je vais faire, je vais ajouter un dégradé linéaire à celui-ci et changer la couleur de cette façon. Et nous avons maintenant ce chef linéaire. Très bien, que puis-je faire maintenant ? Laissez-moi changer la couleur ici. Maintenant, ça ressemble à ça. Et je vais, je vais dupliquer celle-ci pour ajouter une option supplémentaire ici, pour ajouter une autre option ici. Donc c'est vraiment beau maintenant. Donc maintenant, si je lance celui-ci, je devrais pouvoir te voir encore une fois. Je devrais être capable de voir ce cadre. Et voyons à quoi ça ressemble. Donc ça ressemble à ça. Donc ça a l'air vraiment bien. Très bien, donc lorsque vous cliquez sur le bouton S'inscrire, nous les enverrons vers une page de connexion. Nous devrons donc également concevoir une page de connexion. Et encore une chose que je veux ajouter, je veux ajouter un texte ici. Je vais dire que vous avez déjà un compte. Vous avez déjà un compte, vous avez déjà un compte Connectez-vous ici. Je vais donc réduire cette taille de police à 14 pixels. Pas en pixels comme la taille de la police. Mettez-le ici comme ce point de départ. Maintenant tu peux voir ces choses. Maintenant, nous devons dupliquer celui-ci. Nous pouvons donc dupliquer celui-ci et ajouter le même design pour notre page de connexion, mais nous devrons apporter quelques modifications ici. Je vais donc cliquer dessus. Je vais dupliquer celui-ci. Et changez rapidement le nom pour vous connecter au lieu de vous déconnecter. Maintenant, ici, changez le nom pour vous connecter. Ensuite, nous n'avons pas besoin savoir quand l'utilisateur se connectera. Donc, ce que je veux faire, je veux simplement réorganiser celui-ci de cette façon. À partir de ce point de départ. En fait, nous pouvons annuler celui-ci ici. Laisse-moi annuler celui-ci. Et c'est le point de départ. Et c'est le cas, je vais simplement supprimer ce mot de passe ici et changer le nom en e-mail. Et celui-ci sera un mot de passe. Ensuite, je vais faire glisser ce bouton pour entendre. Ok, donc il semble que sur cette inscription, changez si vite le nom pour vous connecter. Et nous devons en faire un groupe. Je vais donc en faire un groupe et le mettre ici pour la connexion. Ensuite, je vais faire glisser ce texte ici. Et cette fois, je peux dire que je n' ai pas de compte, puis inscrivez-vous. Je peux dire que je n'ai pas de compte , puis je vais vous demander de vous inscrire, de vous déconnecter et de vous connecter. C'est bon. Donc maintenant, tout ce que nous avons signé, nous avons une connexion jusqu'à ce qu'il puisse l'exécuter à nouveau, cela devrait fonctionner. Nous avons donc conçu notre page d' inscription et de connexion. Dans la partie suivante, nous essaierons de connecter ces deux éléments ou d' utiliser le prototypage. Très bien, nous avons donc celui-ci, accord, nous devons donc sélectionner celui-ci. Ensuite, je pourrai le lancer. Alors inscrivez-vous, connectez-vous à notre page d'accueil principale. Et voilà. C'est donc le mot « connexion ». Donc c'est vraiment beau. Très bien, je vais arrêter cette vidéo ici et nous continuerons à partir de la prochaine conférence. Rendez-vous au prochain cours. 8. Prototypage avec l'animation: Bon retour, une fois de plus. Dans cette partie, nous allons essayer d'ajouter notre prototypage, mais avant cela, je veux avoir un bouton ici. Ensuite, je veux commencer le prototypage comme nous allons devoir le faire. J'ai besoin de ce type de design ici pour un verrouillage. Donc, lorsque vous cliquez sur ce bouton, nous affichons un menu déroulant pour avoir beaucoup de déconnexion. Ensuite, à partir de la déconnexion, nous les envoyons à la page de connexion. Et à partir de là, nous pouvons faire tout ce prototypage. Ajoutons donc un cadre ici. L'un est un cadre de petite taille ici. Je vais donc donner le nom ici, déconnecter. Très bien, maintenant c' est notre cadre de déconnexion. Je vais lui donner un rayon de frontière. Et ici, je vais créer notre bouton ici. Je vais donc ajouter un rectangle ici. Je vais dessiner un rectangle ici. Et puis je vais ajouter, je vais lui donner 90 et lui mettre une couleur rouge. Et ici, je veux ajouter le texte ici. Le texte va donc être verrouillé. Je vais dire « déconnecter » et mettre ce texte au centre. Nous avons donc maintenant ce cadre de déconnexion , puis nous avons celui-ci. Donc, lorsque l'utilisateur cliquera ici, ajoutons une icône ici. Je vais donc ajouter une icône de filtre. Je vais dire Arrow. Je cherchais dans ce genre d' icône avec la flèche, celle-ci. Je vais donc faire glisser cette icône ici, juste ici. Et je vais mettre cette couleur sur la couleur blanche. Ok ? Où se trouve cette icône ? Cette icône est maintenant « Connexion, déconnexion ». Bon, nous avons déjà vu l'intérieur du cadre. Laisse-moi vérifier. Alors allons-y. Nous avons cette icône. Ainsi, lorsque nous cliquons sur cette icône, nous affichons ce cadre de déconnexion la même manière que nous l'avons fait pour celui-ci. Donc pour cela, sur quoi je vais cliquer sur le prototypage, cliquez sur cette icône. Et puis aux interactions ici, et cliquez dessus. Au clic, nous voulons avoir, puis nous voulons avoir notre superposition ouverte. Et ce terme, nous voulons afficher notre cadre de déconnexion. Et comment nous voulons le montrer. Nous ne voulons pas avoir besoin de celui-ci en cas de perte d'utilisateur, lorsque vous cliquez à l'extérieur. Donc au lieu de centrer cette fois, nous voulons le faire manuellement. Nous voulons donc le montrer. Nous voulons le mettre juste ici. Nous voulons le mettre juste ici. Mais avant cela, laissez-moi lui donner une couleur de fond. Sinon, il ne sera pas visible. Nous ne pouvons pas le rouge, comme la couleur que nous avons utilisée. Ici. Je pense que celui-ci ne va pas être beau. Nous pouvons donc choisir cette couleur, je pense. Ou quel code couleur nous avons pour celui-ci. Je vais copier celui-ci, ce code couleur, puis je vais le mettre ici. Et tu y vas. Donc celui-ci sera notre déconnexion, ou nous pouvons faire une dernière chose. On peut le garder blanc. Ensuite, nous pouvons ajouter une ombre ici. Gardons-le en blanc et ajoutons de l'effet. Ensuite, il sera visible. Maintenant, si nous sommes en mode prototype, alors nous avons cette ombre ici et nous voulons qu'elle soit instantanée au lieu d' ajouter la navigation. Ok ? Et dès que je vais essayer. Alors cliquez dessus. Cliquez dessus. Nous pouvons voir ce bouton de déconnexion. Et au fur et à mesure que j'ai ajouté l'ombre, nous pouvons voir cette déconnexion. On peut voir cette petite ombre ici. Mais si vous le souhaitez, vous pouvez également choisir cette couleur de fond. Je pense que ce serait bien si nous utilisions cette couleur de fond. Donc, je vais changer à nouveau la couleur de fond pour ce code de couleur que nous avons. Très bien, je l'ai fait au mauvais endroit. Nous devons donc changer le code couleur. Ici. Et maintenant, si je viens ici, je peux voir celui-ci. Cliquez sur notre site, c'est parti. Maintenant, revenons à ce prototype. Et ici, lorsque l'utilisateur cliquera sur le bouton, nous voulons fermer notre modèle. Cliquez donc sur cette indirection et cette fois cliquez sur Fermer la superposition, puis cliquez dessus. Cliquez sur ce bouton de déconnexion et c'est parti. Ok ? Donc, au lieu de griffes ici, lorsque vous double-cliquez sur le bouton de déconnexion de verrouillage, nous les enverrons au cadre de connexion. Je vais donc supprimer celui-ci d'ici. Donc, au lieu de la superposition brillante, nous voulons maintenant nous déplacer pour naviguer vers l'endroit où nous voulons naviguer. Nous voulons accéder aux paires de connexion. Très bien, en assignant des paires au lieu de l'instantané, je veux avoir une animation de morphing comme ça. Et voyons maintenant ce que nous avons Glick autre lock-out. Et nous y sommes maintenant. Nous sommes maintenant dans ce rythme de signature. Nous sommes en paires de connexion. Et à partir de la signature payante, lorsque l'utilisateur cliquera sur le rythme de connexion, nous l'enverrons à notre page d'accueil. Donc ce que j'ai fait ici ne s'embrouille pas. Lorsque nous cliquons sur ce bouton, ouvrirons celui-ci. Et quand vous cliquez sur le bouton Connexion, je viens d'ajouter le bouton de connexion onclick navigate to, au lieu de claws overlay, naviguez pour naviguer. Deux signifie que nous voulons passer à un nouveau cadre ou à un nouveau rythme, peu importe ce que vous voulez dire. Alors cliquez sur le neveu, allez de là. De qui sont amis ? Je veux dire, de la navigation de la déconnexion à qui est le cadre. Vous voulez y aller, je veux accéder à la page de connexion. Et ici, vous aurez la possibilité d'ajouter votre animation. Par exemple, j'ai sélectionné morphine et il va venir du côté gauche si vous voulez. Vous pouvez faire avec le côté droit, le haut, le bas. Et ici, vous pouvez également ajouter un budget de costume facile à entrer et à sortir, ou ils ont de nombreuses fonctionnalités ici. Tu peux simplement le faire. Dès que l' utilisateur cliquera sur la page de connexion, cliquez sur le bouton de connexion ici. Nous les enverrons sur la page d'accueil. Cliquez donc à nouveau sur cette indirection. Ici. Onclick, naviguez jusqu'à, naviguez jusqu'à où, accédez à notre page d'accueil. Et ici, au lieu de l'instant, je veux avoir une animation de morphing. Donc maintenant, si je clique sur la connexion, je suis dans ces pages d'accueil. Cliquez à nouveau sur ce bouton de déconnexion. Je suis sur la page de connexion. Cliquez sur la page de connexion. Je suis dans la zone de connexion. Oui, il va travailler seul. Cela va également fonctionner ici. Très bien. Déconnectez-vous ici et nous sommes sur la page de connexion . Cliquez sur la connexion. Nous sommes dans ce cas, nous sommes dans cette page d'accueil principale, nous avons autre chose. Je n'ai pas de compte ouvert, donc si vous n' avez pas de compte, nous devrions les envoyer au rythme d'inscription. Sélectionnez donc celui-ci et ajoutez l'indirection ici. Et à partir de là, sélectionnez Aucun pour accéder à l'endroit où vous souhaitez envoyer la base d'inscription. Et ici, au lieu d'exemple, vous pouvez dire move dans cette animation ou vous pouvez simplement choisir celle-ci juste à titre d'exemple. OK, maintenant cliquez ici, déconnectez-vous. Vous n'avez pas de compte, inscrivez-vous ici. Voici donc le bouton d'inscription. Et à partir du bouton d'inscription, nous devons les envoyer sur la page de connexion. OK, donc s'ils réussissent, c'est signer ici, puis après l'approbation de l'école de football, nous les enverrons à la page de connexion, à la page de connexion pour se connecter. Je vais donc sélectionner pour accéder à notre rythme de connexion. Et au lieu de l'exemple ici, nous voulons l'envoyer au déménagement. Ensuite, nous pouvons sélectionner cette animation. Maintenant, déconnectez-vous, ne portez pas de page de connexion. L'attribution de paires était dans l'application principale depuis l'approbation ici. Voici donc déjà un compte de connexion. Je dois également ajouter ce prototypage. Donc, si vous n' avez pas encore de compte, nous les enverrons sur la page de connexion. Ajoutez donc cette indirection ici, cliquez dessus. Onclick, naviguez jusqu'à. Cette fois, je vais signer. Au lieu de l'instance. Ajoutons une dimension intelligente comme ce type de choses. Au lieu de faciliter l'entrée et la sortie, je vais dire gentiment savoir que vous avez déjà un compte de connexion. Ça ressemble à ça. Signer, s' inscrire, se connecter, se connecter. Donc, si vous vous connectez avec succès, déconnectez-vous. OK. Donc, à partir de celui-ci, je veux avoir une jambe émotionnelle différente bouge du côté gauche pour noter ce modèle. Alors cliquons dessus. Nous avons celui-ci. Coller de connexion. Vous n'avez pas de compte, inscrivez-vous ici. Vous n'avez pas de compte déjà un compte. payeurs de connexion ont déjà une page de connexion au compte et des paires de connexion. Donc, lorsque vous cliquez sur le bouton de connexion, je souhaite modifier l'animation. Alors quand ils iront à la maison ici, nous allons sélectionner cette petite animation. Notez ici, comme ici, sélectionnez une petite animation. Et au lieu d'une note facile, réglez doucement. Voyons à quoi ça ressemble. Alors déconnectez-vous, puis cliquez sur la connexion. Donc ça ressemble à ça. Donc ça a l'air bien. Je vais cliquer dessus. Alors ça va ressembler à ça. C'est donc notre page d'accueil et nous avons également ce qu'on appelle des fonctionnalités. Signature. Et nous avons cette animation. Ou sélectionnons le Quick plutôt que son apparence. Verrouillez l'econ it. Et puis nous avons cela montré. Mais ce n'est pas ce à quoi je m'attendais. Je vais donc sélectionner la glissière. Je vais le verrouiller et cliquer sur la connexion. Donc ça a l'air bien. Et tout est parfaitement fonctionnel. J'espère que ce cours vous a beaucoup appris. Et celui-ci va également fonctionner avec ceci, ces choses, elles fonctionnent également avec l'approbation. Ils n'ont pas tous de compte. avez déjà un compte. Cela fonctionne parfaitement. Je pense qu'il y a une petite solution ici, donc je pense que je n'ai pas besoin de corriger la grammaire ici. Vous n'avez donc pas encore de compte, connectez-vous ici. C'est bon, cool. Donc tout va bien. Notre application fonctionne parfaitement. Nous pouvons simplement l'appeler, nous avons ce système de messagerie, nous avons ces fonctionnalités de connexion et la connexion et la signature sur tout fonctionne parfaitement. J'espère que vous avez apprécié. 9. Partagez et exporter notre design: Bienvenue encore une fois. Dans cette partie, nous allons exporter nos designs. Jusqu'à présent, nous avons conçu notre application, nous avons fait du prototypage, et tout fonctionne de manière fonctionnelle, entièrement fonctionnelle. Il est maintenant temps d' apprendre comment partager notre projet avec une équipe et comment Exporter notre projet ? C'est très important. Laissez-moi d'abord discuter de vous. Comment partager ce fichier avec les membres de votre équipe ? Vous pouvez maintenant voir que sur le côté droit il y aura un bouton appelé bouton Partager. Ici, vous pouvez ajouter l'adresse e-mail. Ensuite, vous pouvez également sélectionner le candidat au rôle ou voir. Si vous sélectionnez, pouvez modifier, puis toute l'adresse e-mail que vous allez mettre ici, ils auront une option pour manger et même simplement cliquer dessus peut voir. Ensuite, ils n'auront que la possibilité de le voir ici. Et ici, vous pouvez également ajouter une condition uniquement aux personnes invitées à ce fichier de lien ou à toute personne disposant du lien. Donc, si vous partagez, si vous partagez le lien, n'importe qui pourra accéder à votre fichier. Mais si vous sélectionnez uniquement les personnes invitées à ce fichier, je veux dire, l'élève, vous saisirez uniquement par e-mail. Ils auront la possibilité d'accéder à votre design. Donc pour l'instant, il suffit de cliquer sur n'importe qui avec le lien ici. Il suffit de le mettre ici et ensuite de le faire ici. Vous pouvez voir ce lien de copie. Je vais donc cliquer sur le lien Copier. Et maintenant je vais ouvrir un nouveau navigateur ici. Le navigateur privé sur lequel je ne suis pas connecté à mon Figma. Maintenant, je devrais pouvoir voir tout le design, d'accord ? Et je ne pourrai pas le modifier. Vous pouvez voir qu'il me demande de me connecter, mais je peux quand même accéder à tous les designs ici. Il s'agit donc d'une image descendante indésirable. Nous avons donc ce cadre d' inscription, ce cadre de connexion et cet ordinateur central ici. J'ai donc cette option, mais je ne pourrai pas apporter de modifications ici. C'est très important. Je ne pourrai donc pas apporter modifications ici parce que je n'ai pas d'excès ici. Et ici, je peux voir cette connexion de prototypage, et c' est notre page d'accueil. Permettez-moi de le montrer en plein écran. Et je clique dessus. Déconnexion, déconnexion, inscription, connexion. Tout fonctionne parfaitement. Et je n'ai pas de compte. Cliquez sur le bouton S'inscrire. Sign-On. Vous avez déjà un compte. Tout fonctionne parfaitement, fonctionne. Après avoir travaillé à la réalisation de votre projet, vous devrez partager votre fichier avec les membres de l'équipe. Peut-être travaillez-vous dans une équipe de développement, puis le membre de votre équipe suivra vos conceptions vers ce lien, d'accord, donc c' travaillez-vous dans une équipe de développement, puis le membre de votre équipe suivra vos conceptions vers ce lien, d'accord, est comme ça que vous pouvez partager votre lien, le lien de votre projet, avec votre équipe membres ou n'importe qui sur si vous voulez donner accès au courrier électronique, il suffit mettre l'e-mail et de cliquer sur le bouton. C'est ainsi que vous pouvez partager votre projet. Et il y a autre chose. Sélectionnons celui-ci ici si je le souhaite. Ok, donc ici vous pouvez en voir un autre appelé Inspecter. Dans l'inspection, normalement vous voyez tout le design, toute la mise en page, toutes les jambes, la distance, le masque et code blanc et couleur que vous avez utilisé. Ce sont des types de propriété CSS. membre de votre équipe va également venir chercher de l'aide pour celui-ci. Ils ont donc juste besoin d' en inspecter un, par exemple, si je sélectionne celui-ci, et ici je peux voir que le blanc de ce rectangle particulier mesure 493 pixels de haut, code de bordure de rayon en haut à gauche. Et ce sont toutes les propriétés CSS. Les membres de votre équipe peuvent donc simplement copier ce code et l'utiliser ensuite dans leur application Web. Voici comment vous pouvez inspecter celui-ci. Ça va ? C'est donc l' avantage de celui-ci. Vous pouvez voir ici le code CSS de cet élément. Maintenant, exportons notre design. C'est donc notre cadre. Maintenant, venez au clic sur la conception et en bas, vous pourrez voir l'option Exporter. Cliquez dessus. Et ici, vous pouvez voir le format que vous souhaitez. Vous avez besoin du format PNG, du format JPEG ou du format occupé ou du format PDF. Sélectionnons le format JPEG et cliquons dessus. Ici. Vous pouvez simplement indiquer combien vous voulez. J'en veux donc un et je clique sur cette page d'accueil d'exportation. Et il a été téléchargé. Laisse-moi cliquer dessus. Et voilà. C'est notre design. Nous pouvons maintenant exporter notre design. Maintenant, je veux exporter, je veux aussi exporter cette base d'inscription. Je vais sélectionner la signature. Cliquez sur cette exportation, cliquez sur JPEG. Et on y va. Nous avons ces paires d'inscription. C'est ainsi que nous pouvons exporter. Maintenant, sélectionnez ces paires de connexion et cliquez sur cette exportation. Cliquez sur ce fichier JPG et exportez une connexion. Si je clique sur la connexion, c'est parti. Nous avons ce signe par paires. Vous avez donc appris à exporter l'inscription, connexion et la base d'accueil. Ainsi, vous pouvez simplement exporter chacune de vos images. Ce sont également des cadres indépendants. Donc, vous pouvez également, si vous le souhaitez, vous pouvez également exporter ces petits laissez-moi exporter un pour vous. Cliquez dessus et le téléchargement est terminé. C'est notre cadre. Très bien, voici les quelques choses que je voulais te montrer. J'espère que cela vous a plu.