App Web Figma Music Player -UI/UX. Concevoir une application Web complète de lecteur de musique

1. Introduction: Bienvenue dans ce cours de conception de figma UI UX. Je m'appelle oui, puis chaque rangée trois et instructeur Albert dans ce cours. Dans le cours Figma, vous allez apprendre à concevoir une application Web complète. Vous êtes une conception de l'interface utilisateur d'une application web complète manquer dans ce cours, Jetons un coup d'œil sur projet que vous allez concevoir dans ce cours. C'est donc la conception bancaire de notre application Web que vous allez décider dans ce cours. Vous pouvez voir que nous avons notre sympathique barre latérale. Vous allez donc apprendre à supporter différents graffitis Kw. Et ensuite, nous avons ici notre belle section, puis nous aurons notre section objets magiques. Et maintenant, si je clique sur cette icône plus , je pourrai voir cette jolie boîte de modèle. Et si je clique à l'extérieur, ça va être supprimé. Et si nous cliquons sur le cycle fermé, il sera supprimé ici. Bien que vous conceviez cette application Web, vous ou UX, vous apprendrez également à travailler avec la retypage, comment faire des prototypes. Et il peut ajouter un autre type d'animation ici. J'ai fait de mon mieux pour expliquer chaque partie de cette application que vous voulez, vous allez apprendre de cette pratique, cette composante technique, différents types d'aide à organiser votre projet pour faire bien d'autres choses. Par conséquent, je vous conseille vivement de profiter de ce cours. 2. Conception de barre latérale: Bienvenue dans cette vidéo. Dans cette partie, nous allons commencer à concevoir notre application de lecteur audio. C'est donc l'application de base que nous allons concevoir. Donc, avant tout, je vais ouvrir notre nouveau fichier de design et Figma. Cliquez donc sur ce nouveau fichier de conception. Et je vais y arriver et je suis prêt à rencontrer un lecteur audio de fichiers audio. Vous pouvez lui donner n'importe quel nom. Très bien, donc maintenant avant tout, nous devons ajouter un cadre ici. Je vais donc sélectionner ce cadre, puis ce deck s'arrête 1440 puis 24. Je vais choisir celui-là. Si vous voulez. Vous pouvez également changer le nom, mais c'est correct. Nous n'en aurons qu'un seul. Laissez-moi le changer. Nous pouvons le dire. Très bien, donc dans notre conception, nous avons la barre latérale, nous avons cette liste d'albums, puis nous avons cette liste de lecteurs de musique. Si vite, laissez-moi d'abord dessiner ce 1 et je peux le faire, d'accord, un instant. Je vais donc prendre l'aide de ce rectangle et je vais dessiner ce dessin. Cela devrait se passer exactement de cette façon. Et nous y voilà. Nous avons donc ce design. Et maintenant, nous pouvons ajouter une couleur pour celle-ci. Nous avons donc ce genre de couleur ici. Laissez-moi donc changer la couleur. Et en fait, je peux copier la couleur de ce fichier. Encore une fois, copiez cette couleur que j'ai déjà créée. Alors, que puis-je faire ? Je peux ouvrir le design précédent que j'ai déjà fait. N'importe quoi. Celui-là est ici. Ou si vous le souhaitez, vous pouvez choisir n'importe quelle couleur, comme vous le souhaitez. Mais j'aime bien cette couleur. Il y a une raison pour laquelle je vais copier cette couleur de mon précédent dessin. Et le code couleur va l'être. Il s'agit donc du code couleur de cet article. Je vais copier ce code couleur et je vais en faire un design de plaque colorée. Alors, que puis-je faire ? Je peux créer, je peux créer notre couleur ici. Appelons-le la couleur de la barre latérale. Ensuite, créez un style. Mais nous devons changer ce code couleur par ce code couleur. Maintenant, c'est exactement la même chose que celle que nous avons ici en ce moment. Et un autre code couleur que je veux copier à partir d'ici, qui sera ce cours de couleur. Je vais copier ce code couleur partir d'ici et je vais créer une autre couleur et un autre style pour cet article, puis nous l'utiliserons plus tard. Je vais donc l'appeler , je vais dire, Oh, musique, jouer aux cartes et créer un style ici. Et puis ici, je vais changer la couleur à cette couleur. Mais ne vous inquiétez pas, nous pouvons choisir cette couleur ici. Mais que s'est-il passé ici ? C'est la couleur de notre barre latérale. Bon, nous avons fait une erreur ici, ou nous devons la changer. Donc ce site par couleur, et c'est la couleur de la musique. Donc, pour la couleur de la musique, nous allons tenter celle-ci, qui va être comme ça. Et pour la couleur de la barre latérale, nous devons la changer pour cette couleur, qui est cette couleur. Je vais le copier. Et à partir d'ici, je vais changer cette couleur. Maintenant, nous pouvons facilement l'utiliser soit celle-ci, soit celle-ci. Si je sélectionne cet article à cette couleur, il va sélectionner celui-ci, mais il va sélectionner celui-ci, mais nous avons besoin de cet article ici. Très bien, nous pouvons maintenant ajouter ce cadre ici. Nous pouvons ajouter ce design ici. Nous avons ceci, nous avons ce SME et ensuite une liste d'articles pour cela. Rapidement, laissez-moi dessiner notre cercle. Nous allons donc prendre la moitié de cet outil d'ellipse ici. Et puis je vais dessiner cet outil ellipse et le rendre même durci et blanc pour qu'il ressemble à un cercle. Et avant cela, laissez-moi l' exécuter pour que nous puissions savoir à quoi il ressemble dans un appareil réel. Et ça ressemble à ça. Je vais supprimer cette icône ici. On dirait ça. Et je vais augmenter un peu plus la nature sauvage. Et puis, ici, je vais l'ajouter au centre. Et alors, que puis-je faire ? Je peux simplement ajouter un coup ici et ce discours va être trois. Et puis je vais changer la couleur du trait en blanc. Et ici, nous allons placer notre image ici. Je vais donc cliquer sur cet endroit EMS. Ensuite, je vais sélectionner, et je vais sélectionner cette image. Vous y voilà. Il va donc ajouter la sclérose en plaques et si je suis, maintenant nous avons celui-ci ici. Si je clique dessus. Pour une raison quelconque, ça n'a pas fonctionné. Ok, tellement furieux de notre image. Et maintenant, je devrais pouvoir voir cette image ici. Maintenant, nous avons notre texte ici pour que nous puissions dire que le nom va être Zhan do. Et nous allons le placer au centre. Et la taille de police de style deux chances, je vais la sélectionner à 20. Et si vous le souhaitez, vous pouvez certainement ajouter un style différent. Cela ne va pas paraître bien ici. Il peut le choisir ou vous pouvez choisir n'importe quel autre design, ce que vous voulez. Je vais choisir. On peut peut-être garder celui-là. Et ensuite, ce que nous avons, après cela, nous avons ces deux objets, musique au moins notre favori chaleureux, puis le lock-out. Donc, ce que je vais faire, je vais ajouter un texte ici et je vais dire une liste de musique. Et pour cela, j'ai d'abord besoin de changer le style du texte. Nous allons le changer pour celui-ci. Vous pouvez choisir n'importe quelle liste et n'importe quel style de texte que vous aimez. Ce n'est pas un problème, donc nous pouvons le garder, vous pouvez commencer à partir d'ici. Et ensuite, nous allons prendre la moitié de ce plugin. Donc l'icône de filtre et j'ai déjà installé ce plug-in appelé icônes de chargeur. Si vous n'avez pas celui-ci, vous pouvez simplement l'installer à partir de la communauté des plugins. Et puis je vais dire que je vais prendre cette icône ici. Celui-ci est donc maintenant en dehors du cadre principal. C'est la raison pour laquelle je vais le mettre ici. Et maintenant, c'est ici. Et je vais le mettre exactement ici. Et maintenant, je peux simplement changer la couleur en blanc. Alors, que puis-je faire maintenant ? Et nous avons juste besoin d' avoir ceci ou non, ne le faites pas, ne faites pas celui-ci. Nous avons besoin de cette liste musicale et ceci, pas cette ellipse, nous avons besoin de cette liste musicale et de celle-ci ici. Et puis, d'accord, il est déjà là. Alors, que pouvons-nous faire maintenant ? Fondamentalement, nous pouvons faire une rainure pour ces deux objets. Et une autre chose, c'est aussi rapide, laissez-moi le regrouper. Je vais appeler ça la commande Z. Et évidemment, en croissance, je vais renommer le nom du groupe. J'appuie sur Command Control R et sur le clavier. Mais vous pouvez également cliquer avec le bouton droit de la souris et le renommer. Et je vais dire un élément de la barre latérale. Et maintenant, nous devons changer de style, de taille de police de celui-ci. Nous n'avons pas besoin d'avoir cette taille de police plus grande. Alors, que puis-je faire ? Nous pouvons le faire ici. Pourquoi n'apparaît-il pas ? Nous devons donc choisir ces deux-là. Et puis au lieu de 16, au lieu de 20, je vais le sélectionner à 16. Maintenant, voyons à quoi ça ressemble. C'est beau, mais que pouvons-nous faire maintenant ? On peut 60 ans, c'est bon. Ça a l'air bien. Pas de problème. Mais je voulais juste savoir que si c'est la même taille, accord, donc c'est dans la même ligne. Cool. Nous pouvons maintenant dupliquer notre groupe. Alors, que puis-je faire ? Je vais appuyer sur la commande D pour faire un double. Et je vais l' ajouter ici de cette façon. Ensuite, je vais appuyer sur Commandement D. Je pense que nous avons trois éléments. L'une est L1, puis préférée. Ensuite, je vais ajouter que le nom va être album ici. Album. Et qu'est-ce que nous avons d'autre ? Nous avons notre préféré. Et alors, que puis-je faire ici ? Je vais écrire du tissu. C'est donc toujours une bonne idée de créer des groupes pour que vous puissiez dupliquer le même design. Maintenant, nous pouvons voir que nous avons une sorte de design et exactement de la même position qu'elle vient. Et oui, mais c' est maintenant que je pense que je dois l'ajuster parce qu' il ne va pas commencer par le centre parce que ce champ, mais le texte est un peu plus long. Il est maintenant dans la même position. Très bien, donc maintenant en bas, nous avons un autre champ appelé. Nous avons un autre domaine appelé. Ok, donc une autre chose est que je vais ajuster notre cadre car la hauteur du cadre est vraiment grande. Je vais donc ajouter un peu que nous ayons ce même design. Ok, donc maintenant en bas, nous avons une option appelée, nous pouvons également ajouter celle-ci. Avec celui-là. Nous avons maintenant une autre option appelée lock-out. Je vais donc dessiner un rectangle ici. Je vais dessiner un rectangle ici. Et puis ce que je vais faire, je vais faire un accident vasculaire cérébral ici et ici. À partir de là, vous pouvez définir à partir de l'endroit où vous voulez un trait. Vous voulez le trait de tous les côtés, du haut, du bas ou de la gauche. Donc, actuellement, notre coup sera de tous côtés, mais je ne veux avoir un coup que du haut. Et il y a une raison pour laquelle je vais choisir ce haut. Et je veux aussi ce style de course. Au lieu d'être solide, je vais l'ajouter au tableau de bord. Et maintenant, que pouvons-nous faire ? Nous pouvons changer celle-ci. Alors, comment puis-je changer cette couleur ? Nous avons donc besoin du même design, mais heureusement, nous avons déjà créé notre couleur . Notre couleur est toujours. C'est donc l'avantage de l'utilisation de la couleur, c'est dire que vous n'avez pas besoin de copier le code couleur encore et encore. Vous créez votre couleur, c'est leur dire que vous venez de la réutiliser. Maintenant, nous avons ce truc coloré. Une autre chose que nous devons apporter ici, nous devons changer la couleur de notre trait en blanc. Maintenant, ça a l'air bien. Maintenant, nous pouvons mettre notre icône et le bouton de déconnexion. Une autre chose dont vous vous souvenez ici, nous avons la barre latérale, nous avons celle-ci, et nous avons découragé si vite, laissez-moi changer le nom de celui-ci. On peut dire garde de lock-out. Et ici, nous allons ajouter notre icône. Je vais donc sélectionner une icône, me déconnecter. Ils peuvent avoir une icône de déconnexion, qui sera cette icône. Je vais d'abord le mettre à l'intérieur de la maison. Et puis je vais l'emmener ici. Et nous pouvons changer la taille et le poids à 35 par 35, puis changer la couleur en blanc. Ensuite, nous sommes déjà là. Laissez-moi le vérifier, à quoi ça ressemble. C'est joli. Mais nous pouvons également avoir commencé à partir de cette position car notre objet vient de cette position. Il a donc maintenant la même position. Et ici, nous pouvons ajouter un texte et nous pouvons dire déconnexion. Déconnexion. Maintenant, nous avons cet article et laissez-moi ajuster celui-ci. Ou nous pouvons l'ajuster. Nous pouvons y remédier de cette façon. Maintenant, nous devons faire pression, nous devons en faire un groupe. Donc, notre carte Rectangle, notre icône de verrouillage et notre texte de déconnexion. Et je vais le faire grouper. Je peux dire déconnectez-vous. Très bien, nous avons donc ce design. Jusqu'à présent, nous avons réalisé un très bon design pour notre barre latérale. Et dans la partie suivante, nous allons commencer à travailler pour le reste de la partie. Je vais arrêter cette vidéo ici. voit lors de la prochaine conférence. Au revoir. 3. Conception de liste d'albums: Bienvenue dans cette conférence. Dans cette partie, nous commencerons à concevoir notre liste d'albums. Donc, pour cela, avant tout, je vais créer cette liste d'éléments ici. Très vite, laissez-moi ajouter ce système de grille. Donc, la grille de mise en page, je vais ajouter, donc au lieu de cette grille, je vais la changer six et ensuite changer notre grille en colonne R à six. Nous devons donc avoir 1815. Il suffit d'en avoir trois. Nous devons avoir 1515 ce sera bien. Il s'agit donc de notre système de réseau. Et à partir de là, nous pouvons facilement identifier à partir de cette partie, nous commencerons à concevoir notre carte ou tout. Nous allons donc commencer à travailler à partir ici ou d'ici. Je pense que ça va bien paraître. Et nous allons suivre celui-ci. Et nous allons obtenir, nous allons avoir cet espace, ou nous pourrons partir d'ici, à partir de cette ligne et nous allons garder cet espace. Très vite, nous avons un texte ici. Je vais donc ajouter un texte ici. Je vais dire liste d' albums, liste de VM. La liste d'Adelman va donc être là. Et je vais changer le style du texte, pas dans celui-ci. On peut peut-être donner ça ou quelque chose d'audacieux. Il a presque le même design. Et pas celui-là. Je ne comprends même pas ce texte. Il a ce terme mathématique. Ce n'est pas une question. On peut peut-être donner cette liste d'albums. Et cet ancien élève que nous allons emmener ici. Et après cela, nous avons notre carte rectangulaire. Je vais donc piocher la carte à partir d'ici sur cette carte. Et nous avons un peu de rayon de frontière ici. Je vais donc le garder cinq. Et puis, nous avons ce rebut maintenant. Maintenant, je pense qu'il est très grand, plus grand. On va y arriver un petit peu. Et en plus de celle-ci, nous avons besoin d'une autre carte. Je vais donc, ce que je vais faire, je vais dupliquer cette carte ici. Et je vais le rendre plus petit. Ensuite, je peux l'ajouter à celui-ci pour que nous obtenions exactement la même chose. Ok, donc nous avons maintenant abandonné. Permettez-moi d'ajouter, laissez-moi changer la couleur d'arrière-plan pour que nous puissions comprendre. Nous avons donc maintenant une autre carte, mais elle devrait être dans le même libéral maintenant. Ce que je veux dire par là, c'est que nous aurions dû partir de ce côté-ci. Cela va ressembler à ça. Maintenant, nous avons celui-là. Maintenant, nous pouvons augmenter la taille de celui-ci et cela va ressembler à ceci. Très bien, donc maintenant nous avons cette carte, nous avons cette carte. Tellement vite. Permettez-moi de changer la couleur de fond de celle-ci. Je vais changer la couleur de fond de cet article qui va être blanche. Ensuite, nous devons ajouter un effet ici. Maintenant, ça va bien paraître. Nous avons donc cette carte, nous avons cette carte rectangulaire et cette carte est ici. Donc, après cela, nous devrons avoir raison ? Je peux changer la couleur ici, peut-être cette couleur et je vais ajouter un texte ici. Ça va être R, je ne fais pas de liste. Et on peut dire de la musique pop. Et je vais conserver la même taille de police que celle que j'utilise. Les deux musiques. Et ici, nous allons avoir un autre texte que je vais commencer à partir d' ici, à partir de cette ligne. Et je vais dire 20 chansons. Je vais dire 20 chansons. Maintenant, ça a l'air vraiment joli. Alors que pouvons-nous faire, que pouvons-nous faire d'autre ici ? Nous pouvons ajouter l'icône 01 more ici, qui sera une icône musicale. Alors, que puis-je faire, comment puis-je ajouter celui-ci ? Je vais ouvrir le plug-in des icônes de ce chargeur. Et là, je vais aller à la musique du sars, donc je vais traîner, je vais prendre celle-ci ici. Et je vais le traîner ici. Je vais le tenir ici. Et maintenant, c'est vraiment sympa que nous ayons cette musique. Donc, ce que je vais faire maintenant, je vais faire de groupe tout ce qu'il faut pour cette carte. Alors faites-les en groupe et renommez le groupe est, et nous pouvons le dire. Que pouvons-nous dire ? On peut dire, on peut dire liste d'albums, L bum, bum item ici. Donc, j'ai un article. Ensuite, nous avons jeté les cartes, donc maintenant nous pouvons créer plusieurs cartes. Je vais donc appuyer sur la commande D et nous allons y arriver de cette façon. Et je vais appuyer sur Control D pour contrôler le. Nous n'aurons donc pas besoin de cette carte ici car nous allons ajouter d'autres cartes ici, donc je vais supprimer cet article. Une autre chose est que, alors disons que je vais l'ajouter de cette façon. Bon, maintenant comment vous allez organiser celui-ci. Pour organiser celui-ci, vous pouvez simplement ce que je veux dire par organisé, je veux dire que j'aimerais dire que vous avez comme vous pouvez voir qu'il y a cette Honda qui a la même distance de ces objets, mais celle-ci a une distance vigoureuse et plus grande. Dans ce cas, nous pouvons utiliser ce modèle présenté ici. Vous pouvez voir bien rangé. Donc, ce que cela nous rangera, je vais faire pour nous, c'est organiser notre chariot. Et cela va nous donner le même poids et hauteur et le même espace de chaque carte. Vous pouvez voir maintenant que nous avons ce 19 et nous avons ce 19 d'ici. Et puis, pour cette carte, je vais devoir le faire horizontalement, comme en faire une taupe. Maintenant, si je le veux, je peux simplement modifier celui-ci. Encore une fois, je vais sélectionner celui-ci. Et si j'appuie sur cette rangée pour que nous n'ayons aucun problème ici. S'il est visible, cela signifie que vos données sont déjà présentes. Il a la même distance que vous pouvez voir en 1990. Et maintenant, si je veux changer la distance, je peux simplement le faire et il va s'ajuster automatiquement pour moi. Maintenant, nous avons la même distance, 111111111. Donc, ce que je vais faire, je vais le garder comme ça. Je vais en donner 14. Maintenant, à quoi ça ressemble. On dirait ça. Je vais donc faire un double de cet article. Nous avons cet album. Nous avons cet album. Maintenant, je vais passer à un objet de plus et dupliquer. Donc parce que nous avons besoin de la même hauteur. Et je vais le garder 14 à 14. Et maintenant, nous n'avons pas besoin d'avoir ce texte ici. Je vais supprimer ce texte. Je vais supprimer ce texte et cet élément. Je suis désolé, je dois retirer tout ça d'ici. Et aussi cette carte haut de gamme. Donc plutôt pour cela, pour ce rectangle, je vais également retirer celui-ci d'ici. Maintenant, nous n'avons qu'une seule carte, et je vais apporter des modifications à ce design. Nous avons donc besoin d'un coup pour ces objets. Je vais donc ajouter un coup ici. Et j'ai besoin de tirets, désolé, j'ai besoin d'un trait de tirets. Je vais donc changer le style de trait solide en tiret. Ça a l'air bien maintenant. Et maintenant, si je le veux, je peux aussi changer le tableau de bord à trois pour avoir plus d'espace. Et à l'intérieur de celui-ci, je vais appuyer, je vais créer un plus ou je peux simplement appuyer sur l'icône Plus qui va également fonctionner. Mais dans ce cas, je vais devoir donner beaucoup de font-style, peut-être 96 pour l'agrandir. Nous pouvons également le faire de cette façon. Nous avons donc cette icône plus ici. Cela signifie que nous pouvons, d'accord, donc nous devons nous rendre au centre. Je veux dire que nous n'avons pas besoin d'avoir ce rayon. Nous pouvons le garder au centre pour qu'il ressemble à une icône de souffle. Notre liste d'albums est donc prête. Alors, que puis-je faire maintenant ? Je peux changer l'œil contient la couleur de l'album. Nous pouvons choisir dans cette couleur, pas dans cette couleur. Vous pouvez simplement ajouter de la couleur et en fonction de votre choix, je sélectionne juste une couleur aléatoire. Et puis, à partir de là, je peux choisir celui-ci. Bon, d'accord, donc c'est joli. Alors, que puis-je faire maintenant ? Je peux simplement dire musique rock. De la musique rock. Vous pouvez simplement ajouter différents types de liste musicale ou de nom de musique. Ça n'a pas d'importance. Nous apprenons comment le concevoir, mais le texte peut être n'importe quoi. Une autre chose maintenant, je peux le changer à 60. Pour celui-ci, je peux le changer à 50, puis je peux le changer en 70607050 ou à droite. Parfait. Nous avons donc obtenu ce design et nous pouvons le rendre plus raisonnable. Je pense que nous avons fini pour cet album, cette partie ici nous devons travailler encore une chose. Nous devons ajouter notre modèle, leur amour pour cette liste d'albums publicitaires. Je vais donc arrêter cette vidéo ici et nous continuerons avec la prochaine conférence. voit lors de la prochaine conférence. Au revoir. 4. Conception de dialogue modal et prototypage de superposition: Bienvenue encore une fois. Dans cette partie, nous allons concevoir notre boîte de modèle pour celle-ci. Nous allons donc concevoir ce type de boîte de modèle pour créer un album lorsque l'utilisateur clique sur ce bouton. Pour cela, avant tout, nous devrons créer un cadre. Je vais donc sélectionner un cadre ici et je vais simplement le dessiner ici au lieu de simplement choisir parmi, nous pouvons simplement sélectionner dans ce formulaire. De cette façon, je vais aller jusqu'à dix heures de rayon. Et changeons le nom de cette famille peut dire modèle d'album. Nous allons donc avoir celui-là. Maintenant. Nous pouvons le faire de cette façon. Nous pouvons donc ajouter ce texte ici. Je vais ajouter créer un album. C'est juste un texte normal que nous pouvons ajouter. Mais si vous le souhaitez, vous pouvez modifier l'épigraphie, le style de police. Mais je vais garder votre sens de 16 ans. Je vais l'ajouter. 14, je suppose. Bon, alors mettons-le au centre. Et maintenant, nous devons concevoir notre filtre d'entrée, concevoir le remplissage d'entrée. Je vais prendre la moitié de ce rectangle et ensuite nous pourrons le concevoir de cette façon. Et passons ça à dix. Ou si vous le souhaitez, nous pouvons aussi le donner à 20. Et maintenant, je vais ajouter un AVC ici, c'est que l'AVC va en être un. Et pour cette couleur de remplissage, je vais la changer en blanc. Alors, que pouvons-nous faire ? Nous pouvons ajouter un texte réservé à l'intérieur de celui-ci. On peut dire le nom de l'album. C'est un peu un texte réservé que nous avons ici. Et à partir de là, que puis-je faire ? Je peux ajouter un bouton de plus ici, et je peux en ajouter 20 ici. Et maintenant, faisons la même taille. Si cette taille provient de cette taille, cette icône, cela signifie qu'elle est de la même taille. Mais quand même, nous pouvons ajouter une disposition, une grille de mise en page. Nous pouvons donc ajouter une colonne. La colonne va être cinq. Maintenant, nous pouvons facilement comprendre s'il est dans la même taille de nœud. Donc, si c'est ainsi, si vous voyez que ce signe apparaît, cela signifie que c'est le cas, il a commencé dans la même taille. Nous pouvons également modifier la hauteur de ce petit peu. Très bien, maintenant, nous n'avons plus besoin de voir cette grille s'afficher. Je vais donc faire la balle. Et maintenant, je vais ajouter de la couleur à ce groupe. Je vais donc le faire dans cette couleur ou peut-être cette couleur. Ensuite, nous pouvons ajouter un texte ici. Nous pouvons donc dire « Sauver ». Et nous pouvons mettre ce nom ici. Ok, donc maintenant nous ne pourrons pas le voir parce que nous n'avons pas connecté celui-ci. Et ici, je veux avoir un bouton Fermer pour que lorsque l'utilisateur clique dessus, nous puissions désactiver notre boîte de dialogue modale. Pour cela, encore une fois, nous pouvons simplement utiliser ce plug-in. Je vais dire une icône proche ici. Je vais commencer. Et ils ont cette icône proche. Nous pouvons sélectionner celui-ci. Et nous pouvons le mettre ici. Mais j'aimerais augmenter la taille de celle-ci. Peut-être cette taille. Et puis, d'accord, si vite nous devons le mettre dans ce modèle. Et ensuite, nous pourrons ajouter un peu ici. Je pense que nous allons l'ajuster ici. Cool, c'est vraiment joli. Mais une autre chose est que nous devons modifier taille de police de nos espaces réservés car dans la prison, nous avons besoin d'une taille plus petite. Nous pouvons choisir. Notre 2416 est encore plus grand, donc je vais dire 12. Je pense que pour ce modèle, nous pouvons le garder à 20. Pourtant, c'est vraiment joli. Il est donc temps d'ajouter ce prototypage pour ce modèle. Alors, comment pouvez-vous le faire ? Tellement rapide, rapide sur le prototype. Et lorsque l'utilisateur clique sur ce bouton, nous afficherons cette boîte de dialogue modale. Nous avons donc ces interactions maintenant cliquez sur celle-ci. Cliquez ici. Maintenant, sur le clic, tout va bien. Donc, au lieu d'y arriver, nous allons montrer des moyens ouverts ou ouverts trop. Nous allons montrer que le dialogue modal est un peu modal pop-up au même rythme. Donc, si je clique dessus, il va me demander où, quel modèle je veux montrer notre nom moderne est créer un modèle d'album. Maintenant, il est lié à celui-ci. Nous avons maintenant quelques options. Qu'est-ce que c'est exactement ? Donc. Fais-le avant ça, essayons ce que l'on peut voir ici ? Nous avons donc maintenant celui-ci et nous pouvons voir ce modèle, mais nous ne pouvons pas le voir modélisé correctement. Mais normalement, lorsque nous ouvrons un modèle, notre arrière-plan est un peu décibels. OK ? Une autre chose est que si je clique sur ce bouton, il ne sera pas désactivé. Si je clique dessus, il n'est pas visible. Mais nous devrions ajouter cette fonctionnalité, c'est comment pouvons-nous le faire ? Nous avons donc ici une option qui s'appelle ajouter un arrière-plan derrière les superpositions. C'est donc ce dont nous avons besoin. Maintenant, nous pouvons modifier la phrase dispersée. Maintenant, nous devrions pouvoir voir peu de couleur de fond que nous avons normalement. Mais si vous le souhaitez, si vous avez besoin de plus de couleur, vous pouvez la changer à 50%. Maintenant, nous allons pouvoir voir plus de fond gris ici. C'est comme ça que ça va fonctionner, mais il était parti. C'est donc là que nous avons, d'accord, donc maintenant nous pouvons le faire. Mais maintenant, si je clique à l'extérieur, cela ne va pas décibels, mais normalement il devrait être désactivé lorsque je clique à l'extérieur. Pour cela, il existe une autre option appelée close lors du nettoyage. Donc si je sélectionne celui-ci et que si je clique dessus, vous allez simplement désactiver va faire double, va faire double, mais notre icône ne fonctionne pas. Pour cela, ce que nous devrons faire. Cliquez maintenant sur cette icône. Ici. Nous devons cliquer sur les interactions onclick. Et ici, nous avons des vêtements et des options. Maintenant, nous n'allons nulle part. Il existe une raison pour laquelle nous n'avons pas besoin de sélectionner Naviguer ou ouvrir la superposition. Nous devrons plutôt sélectionner la brillance. Cela signifie que nous voulons fermer notre dialogue modal. Nous pouvons donc maintenant voir une superposition rapprochée. Nous avons celui-ci ici. Maintenant, si je clique dessus, il va se fermer. Si je clique sur, il va se fermer. Si je clique dessus, il va se fermer. Ok, donc maintenant une autre chose, nous avons également une option de mention ici. Nous avons donc ici l'option d'animation, comment vous voulez la montrer instantanément, dissoudre ou bouger. Donc, si je choisis la morphine, et voici ces options. Nous pouvons choisir celui-ci parmi les plus difficiles si vous voulez le faire. Et nous pouvons également changer la hauteur à 600 MS. Maintenant, voyons à quoi elle ressemble. Je vois que notre boîte modale vient du dur. C'est dur. Donc, au lieu d'entrer et de sortir facilement, nous pouvons simplement y arriver, nous pouvons simplement y arriver. Maintenant. Je pense que nous ne pourrons pas voir cela. Bon, donc je vais m'installer facilement. Et ici, nous avons celui-là à 600 mètres. Si vous voulez le faire depuis le côté gauche, vous pouvez sélectionner le côté gauche, puis il viendra du côté gauche. Vous pouvez voir qu'une voix modale vient du côté gauche et elle va vers la gauche. Voici les options que nous avons dans notre Figma. Si vous les voulez du bas et vous pouvez le faire. Cela va venir du bas et notre arrière-plan sera désactivé. C'est la beauté du prototypage figma, donc j'ai vraiment aimé ça. Je vais donc sélectionner ce haut au lieu de 34, puis je vais le sélectionner à 300. Et voyons à quoi ça ressemble. C'est vraiment joli. Et si je clique dessus, ça va se passer. Très bien, nous avons donc mis en œuvre notre système de prototypage ouvert. Et je vais arrêter cette vidéo ici. Nous continuerons à partir de la prochaine conférence. 5. Conception de lecteur de musique et de liste: Bienvenue dans cette conférence. Dans cette partie, nous allons essayer concevoir le reste des pièces. Maintenant, nous devons concevoir notre panier de musique, d'accord, afin de savoir quelle partie précédente nous avons terminé cette boîte de modèle et elle a l'air vraiment agréable. Nous avons réalisé un très bon design. Et maintenant, nous allons essayer d'ajouter cette partie. D'accord, donc pour cela, que pouvons-nous faire ? Fondamentalement, passons maintenant à la partie design. Nous allons maintenant concevoir notre chariot rapidement. Nous devrons donc concevoir notre carte à partir de là où nous allons étudier. Je vais donc prendre l'aide de cet outil de rectangle. Et à partir de là, je vais prendre ce dessin jusqu'à cette carte. Et ça devrait ressembler à ça. Et je vais ajouter ça à dix. Voyons à quoi ressemble cette carte. Il a donc ce design et il a cette couleur grise. Ce n'est pas un problème. Nous avons donc ce design de carte et dans la même taille et à la même distance, nous l'avons. Je voulais juste savoir que si nous l'avons ajouté, d' accord, nous avons donc celui-ci de la même taille et du même poids. Maintenant, nous devons concevoir notre afin que nous puissions le faire, nous pouvons changer le nom de ce rectangle. Nous pouvons le renommer et nous pouvons dire cette carte musicale. Maintenant, nous devons ajouter notre icône. Donc pour cela, je vais ajouter ce plugin puis ces icônes de remplissage. À partir de là, je peux dire musique. Ensuite, je devrais pouvoir voir toute l'icône. Nous avons donc cette icône d'outil , puis au milieu, nous avons ce 1. abord, je vais l' emmener ici. Et puis je vais l' emmener à la maison. Ensuite, nous devons changer la hauteur et le blanc sur celui-ci, peut-être 35 par 35. Maintenant, je peux faire glisser celui-ci. Je peux faire glisser ça ici. Ensuite, je vais sélectionner cette icône. Et encore une fois, nous devons le mettre à l'intérieur de cette maison. Et nous pouvons aussi, alors nous pouvons le placer au centre de celui-ci. Après cela, nous devons prendre celui-ci ou faire pivoter celui-ci. Mais il est préférable de prendre celle-ci car vous avez déjà cette icône dans le plug-in. Donc, si vous conceviez n'importe quel type de web, essayez d'utiliser différents types de branchements, cela rend votre travail rarement facile. Vous n'avez pas besoin de concevoir ce type d'icône encore et encore. Il vous suffit donc d' utiliser celui-ci pour que nous puissions concevoir votre Je vais travailler très rapidement. Ainsi, vous pouvez également comprendre que si vous avez exactement la même hauteur et la même largeur. Cool, ça ressemble donc à ça. Tout d'abord, je vais le faire, alors que puis-je faire maintenant ? Nous pouvons sélectionner ces trois icônes et ensuite jouer ceci que nous puissions nous assurer que nous avons exactement le même fil entre ces trois icônes. Vous pouvez voir qu'il s'est ajusté. Nous pouvons maintenant voir ici qu' il a la même hauteur et largeur et exactement le même espace entre les deux côtés. Donc je n'apporterai aucun changement ici je vais simplement faire d'eux un groupe. Et puis je vais dire icône de la musique ici. Cool. Nous avons maintenant la durée, le nom de l'album et cette icône. Donc, pour cela, je vais prendre l'aide de cet outil D. Ensuite, je vais mettre le texte. Nous avons donc ceci, nous l'avons. Nous avons cette taille de police plus grande. Maintenant. Laissez-moi d'abord le dire. D'abord. Je dois changer la taille de police de celle-ci à 20, je suppose. Et ensuite, nous pourrons l'ajuster ici. Et je peux simplement dire, Steve, 0,56. Et ça devrait commencer à partir d'ici. Ça a l'air bien, mais laissez-moi essayer si nous pouvons régler quelques choses ici, cela devrait commencer par la taille pour qu'il soit au centre. Non, il n'est pas au centre car nous avons cette icône est plus grande que celle-ci, donc nous devrions la garder à l'écart des résultats. De cette ligne. Je veux dire, à partir de cette ligne. Maintenant, ça a l'air bien , mais ça ne va pas être beau ici. Maintenant, c'est au centre. Nous avons donc ces contraintes montrées ici et nous pouvons faire, nous pouvons changer la couleur de la durée. Peut-être pourrons-nous choisir cette couleur et nous la réparerons plus tard. Mais avant cela, permettez-moi d' ajouter un autre texte ici, donc je vais dupliquer ce texte. Je suis désolé, ça n'a pas fonctionné. Je vais donc appuyer sur Commande D. J'ai donc juste besoin de sélectionner ce T, puis de le dupliquer. Et maintenant, je vais le mettre exactement à la même distance. Je peux peut-être le dire ici. Et ici, je vais dire le nom de la musique. On peut le dire. Nous allons dire musique rock, à quoi ça ressemble. Cela ressemble donc à ceci, mais nous devrons modifier la taille de la police. Nous n'avons pas besoin d'avoir 0,21$. Nous avons besoin de 15 tailles de police. Nous avons maintenant ce design. OK, cool. Nous avons donc ce flip en taille de police. Maintenant. Je pense que nous pouvons le changer à 14. Et ensuite, nous pouvons le garder de cette façon pour qu'il soit au centre. Il est au centre. Et encore une chose que nous pouvons faire ici, nous pouvons ajouter notre icône ici, qui sera cette icône musicale. Je vais vérifier ça 1. D'abord. Mettons-le à la maison, puis faites-le glisser ici. Et nous pouvons, nous avons ces 190 à 192 ou nous pouvons simplement r, nous pouvons le ranger afin que nous ayons la même distance. Et qu'est-ce que c'est ? Cette icône musicale, ce gland musical à l'intérieur de l'icône musicale. Et puis cette musique rock que la durée. Et maintenant, nous pouvons faire de l'ordre. Nous avons maintenant la même distance. Objectif, nous avons la même distance maintenant. Et maintenant, je vais changer la couleur de cet article. Donc, pour changer la couleur du texte. Nous pouvons y arriver de cette façon. Et pour celle-ci, nous pouvons garder cette icône. Mais une autre chose que nous pouvons faire est ici. Nous avons donc maintenant cette option. Maintenant, nous avons notre musique. Donc, pour changer cette couleur de cette carte musicale, ou nous pouvons essayer d'ajouter un peu de cette couleur. Et voyons à quoi ça ressemble. Cela ressemble à cela, mais nous pouvons quand même appliquer notre système de gradient linéaire. Donc maintenant, ça ressemble à ça, ça n'a pas l'air bien. Nous pouvons le garder de cette façon. J'essaie juste d'ajouter différents types de couleur d' arrière-plan. Et comment pouvez-vous explorer celle-ci ? Si vous en avez besoin, si vous souhaitez ajouter un dégradé linéaire, vous pouvez le faire de cette façon. OK ? Nous pouvons donc utiliser celui-ci de cette façon. Mais si on ajoute ce petit peu de noir , ça va ressembler à ça. Et ça va être eux aussi. C'est vrai ? Nous avons donc cette option ici. C'est plutôt joli. Nous pouvons conserver cette couleur. Nous pouvons donc maintenant créer tout cet article dans un groupe. Donc, tout est en groupe. Je vais en faire un groupe. Je peux dire un objet musical. Maintenant, je peux simplement me laisser vérifier si nous avons vraiment sélectionné cette couleur. Donc, ce que nous avions dans celui-ci, nous avions cette couleur. Mais maintenant j'ai ajouté ces couleurs. Je pense que c'est vraiment joli. Nous pouvons garder cette couleur, mais une chose que je peux changer ici, je peux changer la couleur de celle-ci. Au lieu de cette couleur. Peut-être que cette couleur noire serait vraiment belle ici. Bon, maintenant, nous avons cet objet musical. Et maintenant, je vais faire un double. Et puis je vais le mettre ici à cette distance. Voyons à quoi ça ressemble. C'est joli. Maintenant, je peux faire des doublons, dupliquer et plusieurs fois je peux essayer d'ajouter celui-ci. Nous avons donc cette liste de musique maintenant et ici, et la dernière icône pour celle-ci, comme je l'ai déjà sélectionnée dans ce style de couleur, je vais la garder. Et ce qui s'est passé ici, pourquoi nous avons perdu tout cet objet. Et nous avons celui-ci ici. J'ai fait une erreur ici parce que nous n'avons qu'à sélectionner celle-ci au lieu de cette couleur. Je vais donc appuyer sur Command J. Ok, donc ce que j'ai fait, j'ai choisi cette couleur de fond pour la partie intégrale plutôt, j'ai juste besoin de sélectionner cette carte. Et à partir de là, à partir de cette couleur, je vais sélectionner celle-ci. Maintenant, c'est toujours le cas, nous sommes en mesure de voir notre design. Donc, j'aime vraiment celui-là. C'est bon, une chose que je peux faire, je peux changer cette couleur noire ici en couleur blanche. Et c'est joli. Je peux également changer cette couleur en blanc pour cet article, celui-ci. Et nous pouvons également changer cette musique. Vous pouvez sélectionner ce groupe et changer cette couleur en blanc pour celui-ci, ainsi que cette icône en couleur blanche. Et une autre chose que nous devons maintenant faire , c'est que nous devons changer celle-ci. Donc, une chose que je dois faire ici, laissez-moi être pétrifié par 35 ans. Je vais retirer celui-ci d'ici, et je vais le voir ici. Très bien ? Je vais donc dire que je vais ajouter une icône différente pour ce lecteur de musique. Je vais dire cet article ici. Et je vais dire que vous avez engagé le D5. Et ensuite, il suffit de le faire glisser ici. Nous avons donc maintenant ce design. Il semble donc que nous ayons terminé notre conception avec succès. Et si je clique dessus, nous pouvons voir notre album de création ici. Une autre chose est qu' à partir de là, vous pouvez partager votre projet pour l' utiliser avec le développeur. Et si vous cliquez sur l'inspection, les développeurs pourront voir caché dans un large écran pour la carte et tout va changer ici. Vous pouvez voir le vent et vous cacher sur ce type. 1031031. Bonjour, D6 est cinq, la hauteur est six, cinq. Et tout ce que vous pouvez partager avec l'équipe. Et maintenant, exportons ce design. Pour exporter ce design, que pouvons-nous faire ? Maintenant, nous n'avons plus besoin de cette option de grille. Je vais retirer celui-ci. Exportons ce design. Alors, que puis-je faire ? Je peux cliquer sur Exporter , puis sélectionner PNG JPEG. Et puis je peux dire que l'exportation à la maison va être exportée. Et si je clique dessus, nous devrions pouvoir voir notre nouveau beau design que nous venons de faire. Très bien, je vais télécharger ce design. Je vais partager ce design. Maintenant. Si je veux exporter celui-ci, il suffit de sélectionner celui-ci. Ensuite, cliquez également sur le JPEG et exportez créer un album. Et nous avons ce design. Et pour partager le projet. Vous avez toujours ce shérif montré avec une équipe. Vous pouvez simplement tirer le nom et vous pouvez simplement l'envoyer ou vous pouvez simplement copier le lien. Très bien, nous avons fini ce beau design. Je vais arrêter cette vidéo ici. Au revoir.