Concevoir une interface utilisateur interactive pour application téléphonique dans Figma

1. Intro: Pensez à votre application mobile préférée. Est-il facile à utiliser ? Qu'est-ce qui le rend facile à utiliser ? Qu'est-ce qui en fait votre application préférée ? Comment a-t-il été fabriqué ? Vous êtes-vous déjà arrêté pour réfléchir à la façon dont l'entreprise l'a conçu ? Avant qu'une ligne de code ne soit écrite pour cette application mobile, quelqu'un s'est assis et a conçu chaque partie de celle-ci, chaque écran, chaque bouton, chaque image. Quelqu'un l'a conçu. Dans ce cours, je vais vous montrer exactement comment procéder, et nous le ferons étape par étape. Je vais vous montrer comment concevoir votre propre application d' achat multi-fournisseurs magnifique et interactive dans Figma Figma est l'une des meilleures, sinon la meilleure plateforme de conception UIUX du marché aujourd'hui Ce cours est destiné à être facile pour les débutants. Même si vous débutez dans le domaine de la conception d'interface utilisateur, ce cours est destiné à tout le monde, y compris aux débutants. À la fin de ce cours, vous disposerez d'une interface utilisateur d'application mobile entièrement conçue qui comprend une barre de démarrage élégante, une navigation fluide dans les onglets inférieurs, écrans d'authentification propres, un magnifique écran d'accueil, un écran de vendeur unique, un écran de discussion et d'autres éléments intéressants d'une puissante application quotidienne. Nous travaillerons sur la conception de chaque écran étape par étape, en commençant par les éléments essentiels de l'interface utilisateur tels que la barre de démarrage et la barre d'onglets Ensuite, nous développerons des fonctionnalités réelles, notamment la page ou l'écran des vendeurs en vedette, catégories de produits, un écran de vendeur unique, un écran de discussion en temps réel, et bien plus encore. Vous apprendrez également à affiner et à améliorer vos designs à l'aide de la hiérarchie visuelle, espacement et des choix de couleurs Une fois la mise en page terminée, nous allons tout nettoyer et ajouter l'interactivité pour donner vie au projet Ce cours est parfait pour les débutants ou les utilisateurs intermédiaires de Figma qui souhaitent affiner leurs compétences en travaillant sur un projet concret qu'ils peuvent ajouter à Il est pratique, pratique et regorge de conseils et astuces que vous pouvez appliquer immédiatement à votre flux de travail. Donc, si vous êtes prêt à améliorer vos compétences en matière de Figma en travaillant sur une interface utilisateur d'application mobile à l'apparence professionnelle, ce cours est fait pour vous La leçon suivante, allons-y et examinons la démo de l'application que vous allez créer. Je te verrai donc bientôt. 2. Démonstration du projet: Nous voici donc à l'intérieur de Figma, et voici une fenêtre de présentation pour Figma Je veux donc vous montrer une démo du projet que vous allez construire dans cette classe. Ainsi, lorsque quelqu'un charge l'application mobile pour la première fois, voici ce qu'il voit sur son téléphone. Et maintenant, une fois le chargement terminé, ils accèderont à l'écran d'authentification où ils pourront s'inscrire ou se connecter Maintenant, c'est l'écran d'inscription, et s'ils ont déjà un compte, ils peuvent se connecter au lieu de s'inscrire. Donc, si je clique sur Se connecter, ils vont simplement fournir leur nom d'utilisateur, leur e-mail et leur mot de passe, puis se connecter. Si, pour une raison ou une autre, ils se trouvent sur cet écran et qu'ils n'ont pas de compte, ils peuvent revenir à l'écran d'inscription. Cela dit, nous pouvons passer à la supposition qu'ils ont fini de s'authentifier et qu' il est maintenant temps d'accéder à l'application mobile Donc, si je clique sur ce logo, nous sommes redirigés vers l'écran d' accueil, et comme vous pouvez le voir, nous avons une belle barre de recherche. Nous avons les informations de connexion de l'utilisateur. Nous avons de belles icônes, des notifications ici. Nous avons la barre d'état. Nous allons voir comment créer cela. Nous avons une section consacrée aux vendeurs en vedette. Nous avons une section de catégories de produits populaires. Chacune d'entre elles est cliquable, et nous avons une section sur d'autres catégories de produits Désormais, s'ils veulent voir tous les vendeurs en vedette et pas seulement ces trois vendeurs, ils peuvent cliquer sur Afficher tout à l'écran des vendeurs en vedette, et ils peuvent faire défiler la page vers le haut pour voir le reste des vendeurs. Supposons maintenant que nous souhaitions en savoir plus sur Police Kicks Nous voulons visiter la boutique. Nous pouvons simplement cliquer dessus. Nous sommes emmenés dans la boutique et nous pouvons en savoir plus sur Police Kicks, les détails à ce sujet, nous pouvons cliquer dessus pour voir leurs produits, ou nous pouvons cliquer sur ce bouton de discussion pour discuter avec eux. Donc, si je dis chat, nous pouvons aller dans la zone de discussion où nous discutions avec la boutique Police Kicks Nous pouvons toujours faire des allers-retours. Maintenant, cela devrait ouvrir l'application téléphonique sur leur téléphone s'ils veulent appeler. Donc, pour revenir en arrière, si nous sommes ici, nous pouvons toujours cliquer sur l'icône d'accueil pour revenir à l'écran d'accueil et commencer directement là. Donc, à la fin, vous vous retrouverez avec une interface utilisateur mobile interactive comme celle-ci. Et c'est quelque chose que vous pouvez partager avec votre équipe ou clients potentiels pour leur montrer ce que vous avez pu concevoir pour eux. C'est également un avantage supplémentaire pour vous au cas où vous souhaiteriez créer une véritable application mobile. Vous pouvez partager votre design avec les personnes qui développeront l'application mobile. Cela signifie que s'ils partagent un devis pour la création de cette application avec vous, ils ne doivent pas inclure le design UIUX car vous l'avez fait vous-même Ils peuvent proposer des devis pour le codage et la programmation, mais vous avez fait la partie conception vous-même. C'est donc un avantage supplémentaire. Vous ne pouvez pas payer quelqu' un pour concevoir votre UIUX Je pense donc que c'est une bonne introduction à conception de l'interface utilisateur mobile FIGMA Donc, si vous êtes prête et impatiente de commencer, je suis très heureuse de vous montrer comment procéder. Alors sans perdre plus de temps, allons-y et commençons. Rendez-vous dans la prochaine leçon. 3. Barre d'état: Nous voici maintenant dans notre simulateur, et nous voulons commencer par créer notre barre d'état. C'est ce qu'on appelle la barre d'état. Et je peux rapidement revenir ici à mon éditeur. C'est ici que j'ai créé l'exemple d'application de référence auquel nous allons nous référer. Mais je peux aller ici et revenir aux dossiers. Cela m'amènera directement à l'équipe actuelle qui gère mes projets pour cette équipe spécifique. Mais je peux aussi venir ici, et l'équipe s'appelle Kyoko Je peux donc venir ici et dire « créer du nouveau ». Et j'avais déjà créé une nouvelle équipe appelée New Skillshare Je vais donc cliquer sur New Skillshare Class. Ou laissez-moi simplement créer une toute nouvelle équipe. Donc, Mobile Shop Team, et je vais créer TIM. Et au cas où c'est la première fois que vous utilisez Figma, nous allons examiner cela Si c'est la première fois que vous utilisez Figma et que vous ne comprenez pas ce qu'est une équipe, ce qu'est un fichier, ce qu'est une page, vous devriez peut-être consulter mon précédent cours Figma où j'en ai parlé en détail Mais pour le moment, nous allons simplement sauter pour le moment parce que nous sommes en train de créer une équipe, et je vais choisir Starter, le plan gratuit. Et maintenant, nous faisons partie de l'équipe de la boutique mobile. Au sein de l'équipe de la boutique mobile, nous avons un projet. Nous ne pouvons pas créer plus d'un projet. Mais au sein d'un même projet, nous pouvons créer plusieurs fichiers de projet. Je peux donc le renommer, donnons-lui un autre nom. Application mobile. Disons Mobile App, Enter, et maintenant cela s' appelle Mobile AppAir. Si je double-clique dessus, nous n'avons aucun fichier. Je vais donc créer un nouveau fichier de conception, donc je vais simplement dire design. Et maintenant, nous voici dans notre éditeur Figma. Nous avons un fichier de conception qui n'a pas encore de nom. Nous pouvons lui donner un nom Mobile UI, et c'est parti. Je vais donc créer un cadre. Lorsque vous cliquez dessus, nous aurons différents modèles que nous pourrons commencer à utiliser. Je vais juste utiliser l'iPhone 16 Pro max. Allons-y. Et je veux lui donner une couleur de fond. Donc, tant qu'il est encore sélectionné, je vais le sélectionner, et je veux lui donner une couleur foncée, peut-être jusqu'à cet endroit. Nous voulons lui donner un thème sombre, juste comme ça. Ensuite, si vous regardez ça, nous avons le temps. Nous avons quelques icônes ici. Je vais donc sélectionner l'outil de texte et taper 12 heures. Je vais le mettre là. Et maintenant, vous remarquerez que si je passe ici, nous avons plusieurs icônes. Maintenant, j'avais déjà téléchargé plusieurs images que nous allons utiliser. Permettez-moi de développer cela. Toutes ces icônes sont des icônes que j'ai téléchargées à partir d'une icône plate. Et je vais partager ce dossier juste en dessous de ce lecteur vidéo. Vous pouvez télécharger toutes ces icônes pour pouvoir suivre. Donc, en ce moment, nous travaillons sur le Sara Spar, nous avons donc les icônes Starter Spar Je vais l'ouvrir. D'accord. Et je vais juste les glisser-déposer là-dedans, juste comme ça, aussi simple que ça. Alors maintenant, laissez-moi simplement le mettre là. La batterie se trouve quelque part là-bas, et le Wi-Fi y vient. Pour me déplacer, je tiens la molette de la souris enfoncée. Pour zoomer ou dézoomer, je maintiens la touche Ctrl enfoncée et je fais défiler la molette de la souris Je veux donc sélectionner cette touche de maintien pour en sélectionner plusieurs. Tout en maintenant la touche Maj enfoncée, je vais réduire la taille jusqu'à cet endroit. Et faisons-le glisser jusqu'à ce point. Je vais mettre ce VPN juste là parce que je suppose que l'utilisateur a un VPN actif sur son téléphone en ce moment. Je pense que ces deux-là sont plus grands que ce que nous voulons, donc je vais juste les redimensionner comme ça. Sélectionnez-les tous. Contrôlez G pour les regrouper. Maintenant, lorsque nous les avons regroupés, on leur a donné le nom de groupe 1. Je vais les appeler start aspaEnter maintenant chacun d'eux porte le nom qu'il portait lorsque nous l'avons importé , sauf l'heure Nous pouvons donc simplement l'appeler l'heure ou simplement le laisser comme ça Nous avons donc maintenant la barre d'état. Nous sommes prêts à passer à la partie suivante, qui est la barre de navigation inférieure. Dans la leçon suivante, voyons comment créer cette barre d'onglets. C'est ce qu'on appelle la barre d'onglets ou la barre d'onglets inférieure. 4. Barre d'onglets: Il est maintenant temps de créer la barre d'onglets ou la barre de navigation inférieure. Revenons donc à notre dossier. Maintenant, avant de passer à autre chose, souvenez-vous que nous avions ceci. Laisse-moi juste faire un zoom arrière. Il s' agit de l'écran de bienvenue. C'est donc ce sur quoi nous travaillons actuellement, et nous allons travailler sur le reste. Pour en revenir à nos illustrations, je vais appeler cela l'écran de bienvenue. Et à l'intérieur de l'écran de bienvenue, nous avons la barre de démarrage , que nous avons créée ici. Je peux le cacher et le dévoiler. Je vais donc maintenir la touche Ctrl enfoncée, zoomer avec la molette de la souris et me laisser créer cette forme. Laisse-moi dessiner n'importe où. Dimensionnez-le en conséquence. Permettez-moi de garder le contrôle et de faire un zoom arrière avec la molette de la souris pour voir la taille relative. Allons-y. Et maintenant, en sélectionnant ceci, je vais lui donner une couleur relativement plus claire par rapport à l'arrière-plan. Laisse-moi juste insister sur ce point. Oui, quelque part là-bas. Je fais juste du freestyle, mais tu dois utiliser les couleurs de ta marque Gardez donc cela à l'esprit. Nous avons maintenant ce rectangle, et comme vous pouvez le voir, il s' appelle le rectangle. Je peux l'appeler l' onglet, mais l'arrière-plan. Maintenant, je vais retourner à notre dossier. Et dans le dossier ici, le dossier Assets, nous avons des icônes de barre d'onglets. Je vais tous les sélectionner et les déposer ici. Lorsque je les dépose, ils ne se trouvent pas dans notre écran de bienvenue Je peux donc les glisser-déposer dans l'écran de bienvenue. Je peux également faire de même pour l'arrière-plan de l'onglet. Ceci. Maintenant, nous avons la barre de départ. Laisse-moi juste le cacher. Maintenant, ils ne sont pas visibles car une fois que nous les avons placés dans le cadre de l'écran de bienvenue, et qu'ils sont en dehors de ce cadre, nous ne pouvons pas les voir. Donc, si je les sélectionne tous en le sélectionnant, puis en maintenant la touche Shift enfoncée, je peux les faire glisser et les rendre visibles accueil (le cadre de l'écran d'accueil). Maintenant, je souhaite également les réduire en maintenant la enfoncée pour m'assurer que nous les redimensionnons proportionnellement. En fait, je vais les sélectionner puis contrôler G pour les regrouper et les appeler la barre d'onglets. Alors maintenant, dans la barre d'onglets, nous avons les icônes. Je vais le sélectionner jusqu' aux icônes Control G. Tab. À l'intérieur de la barre d'onglets, nous avons l'arrière-plan de la barre d'onglets. Permettez-moi de le mettre ci-dessous. Arrière-plan de la barre d' onglets et icônes de la barre d'onglets en tant que groupe. Si j'élargis le groupe, nous les aurons tous. Maintenant, je vais simplement sélectionner l'icône d'accueil, puis la placer au centre comme ça. Sélectionnez le portefeuille, placez-le ici. Icône des paramètres. Le menu des hamburgers. Et enfin, l'icône de messagerie ou de chat. Comme vous pouvez le constater, Figma propose jolis surligneurs à vous montrer lorsque vous vous déplacez en ligne droite Si je sélectionne l' icône d'accueil puis que je la fais glisser, comme vous pouvez le voir, cela m'aide à voir que je me déplace en ligne droite. Maintenant, si vous essayez de sélectionner cette option, vous allez sélectionner l'ensemble du groupe. Si vous souhaitez sélectionner l'un de ces éléments individuels, vous pouvez maintenir la touche Ctrl enfoncée , puis sélectionner. Ensuite, vous pouvez le faire glisser. Maintenez la touche Ctrl enfoncée, sélectionnez-la, faites-la glisser, maintenez la touche Ctrl enfoncée. Maintenez le contrôle enfoncé. Je peux le déplacer avec les flèches du clavier. Et je pense que nous sommes très bien placés. Maintenant, laissez-moi sélectionner le groupe d'icônes de la barre d'onglets et le pousser vers le haut avec la touche haut du clavier. Je le veux quelque part là-haut. Maintenez la touche Ctrl enfoncée et effectuez un zoom arrière. Et maintenant, nous avons une belle barre d'onglets. Laisse-moi ouvrir la barre des étoiles, et c'est parti. Donc, pour terminer, je pense que nous pouvons simplement ajouter le logo et cette icône de chargement. Donc, pour en revenir à notre dossier, dossier Assets, aux autres icônes, je pense que c'est là que nous en étions. Je ne pense pas avoir cette icône de chargement, donc je peux simplement la télécharger d'ici, mais je vais l' inclure pour vous. Vous le trouverez dans le dossier. y revenir, je vais sélectionner cette exportation au format PNG. C'est bon. Chargement des exportations. Maintenant, nous allons le chercher. Allons-y. Arrête ça. Je vais le mettre dans les autres icônes et le coller là. Maintenant, pour y revenir, je peux le glisser-déposer et le mettre dans l'écran de bienvenue, comme vous pouvez le voir, en cours de chargement. En y retournant, je peux prendre le logo et le déposer ici également. Et nous y voilà. Nous en avons terminé avec l'écran de bienvenue. Je pense que nous faisons des progrès dans ce domaine. Dans la leçon suivante, nous allons créer l'écran d'inscription. L'écran d'inscription. Je te verrai bientôt. 5. Écran de participation: R, bon retour. Il est donc temps de créer l'écran d'inscription. Jetons un coup d'œil à notre écran d'inscription ici. C'est ce que nous avons. Allons-y et revenons à notre espace d'équipe. Maintenant, avec ça, permettez-moi de résumer tout ce que nous avons au sein de ce groupe. C'est l'écran de bienvenue. Maintenant, pour créer un nouvel écran, je peux tout recommencer à zéro et créer toutes les couleurs et tout le reste, ou je peux sélectionner ceci. Ou laissez-moi simplement sélectionner cette option dans le menu des couches, puis maintenez la touche Alt enfoncée et faites glisser le pointeur en maintenant la touche Shift enfoncée pour me déplacer en ligne droite. Donc, sortez, puis changez de poste. Juste comme ça. Nous avons donc maintenant deux écrans. C'est le second. Permettez-moi faire glisser et de le mettre juste en dessous. Je veux qu'ils se déplacent vers le bas comme nous nous déplaçons vers la gauche ou vers la droite. Je vais donc appeler cela l'écran d'inscription. Si je l'agrandis, il contient tout ce que possède cet autre, mais je veux me débarrasser de la barre d'onglets car l'écran d'inscription ne l'a pas. Je vais laisser le logo mais supprimer le chargement. Poussez ça vers le haut. Control et Musewel pour faire défiler et zoomer. Et maintenant, créons notre formulaire d'inscription, créons un compte pour commencer, copiez-le . Tu vas devoir taper. Je vais donc sélectionner du texte, le coller dedans. Je vais le choisir et le déposer au centre. Je vais le sélectionner et le réduire en maintenant touche Shift enfoncée. Ensuite, je vais le faire glisser vers le centre comme ça. Ensuite, bien sûr, utilisons un outil rectangulaire pour créer les champs du formulaire. Permettez-moi de me rendre à cet endroit. Maintenant, je peux le choisir et faire glisser pour m'assurer qu'il est au centre. Sélectionnez-le ensuite en zoomant. Nous pouvons modifier le rayon d'angle, accéder ici à l'apparence, puis au rayon d'angle. Donnons-lui dix. Oui, dix c'est bien. Je vais choisir le type d'outil de texte à l'intérieur ici. Utilisez un nom. Poussons-le, positionnons-le correctement. Ensuite, je vais sélectionner une couleur claire pour le texte pendant qu'il est encore sélectionné. Utilise un nom, juste comme ça. Sélectionnez maintenant ceci et cela et regroupez-les. N'oubliez pas que nous travaillons de l'intérieur car nous avons dessiné à l'intérieur de cet écran, le texte et le champ ont été placés automatiquement à l'intérieur de l'écran. Et maintenant, nous les avons regroupés. Je vais appeler ça Warm field. Permettez-moi de l'appeler simplement nom d'utilisateur. C'est bon. Je vais donc sélectionner le groupe, maintenir la touche Alt enfoncée et faire glisser le pointeur, maintenant la touche Shift enfoncée pour me déplacer en ligne droite. Et maintenant, donnons-lui cet espacement. Déposez-le là. Ensuite, contrôlez D pour répéter le même mouvement que vous avez fait le dernier. Avec Control D, vous refaites ce que vous venez de faire. Alors maintenant, envoyez le nom de l'entreprise par e-mail et le mot de passe, maintenez la touche Ctrl enfoncée pour le saisir directement. Contrôle des e-mails. Nom de l'entreprise. Contrôle, mot de passe, maintien du contrôle. Entrez à nouveau le mot de passe. Nous y voilà. Ça me plaît. Pour en revenir, nous avons le bouton d'inscription et nous avons déjà un compte ouvert allons le sélectionner et le déplacer, puis l'espacer un peu plus que le reste parce que c'est le bouton. Et bien, il va falloir les renommer tous, mais pas de problème Je vais double-cliquer dessus et dire « inscrivez-vous ». Et je vais le mettre au centre comme ça. En fait, je vais aligner le texte au centre comme ça. Maintenez la touche Ctrl enfoncée pour sélectionner directement l'arrière-plan, et donnons-lui une couleur. Je vais sélectionner l'outil compte-gouttes et le prélever quelque part ici Disons cela. Maintenez la touche Ctrl enfoncée pour la sélectionner directement. Je vais le sélectionner et lui donner cette couleur de fond. Je pense que c'est la couleur de fond, juste comme ça. Je vais également dire Control B pour le rendre audacieux. Maintenant, je vais sélectionner ce texte, le maintenir et le déplacer pour me déplacer en ligne droite. Et ici je vais le copier. Bien sûr, n'oubliez pas que je vous ai dit que vous allez devoir taper ceci à l'intérieur. Maintenant, en fait, je veux en faire un texte distinct. Je vais donc faire glisser le pointeur pour le dupliquer, maintenir la touche Shift enfoncée pour le déplacer en ligne droite, puis coller dedans parce que je veux qu'il soit séparé et vous verrez pourquoi plus tard. Donc, en tenant ceci et cela, je vais les regrouper et les appeler « have count ». Très bien, en sélectionnant ce groupe, renommons-le en e-mail Un seul champ, sélectionnez cette entreprise. Un champ, Entrez, sélectionnez ce mot de passe, un champ Nous, et enfin un champ de formulaire Password deux Maintenant, je vais également tous les sélectionner. Ensuite, contrôlez G pour les regrouper, et j'appellerai ce groupe Fm fields. Je vais détruire le groupe , le compte Han. Ensuite, voici le bouton d'inscription. Entrez. Avoir un compte, créer un compte, logo Sharp. Maintenant, nous pouvons toujours les réorganiser en fonction de la façon dont ils sont disposés à l'écran Créer un compte se trouve sous le logo, puis nous avons le bouton d'inscription, puis les champs du formulaire Zoomer en arrière, en maintenant la touche Ctrl enfoncée. Nous y voilà. Alors maintenant, je peux tous les sélectionner et les pousser vers le haut avec la flèche vers le haut du clavier. Et je pense que là, ils sont très bien centralisés. Voilà pour l'écran d'inscription. Dans la leçon suivante, en fait, passons simplement à l'écran de signature, car il s'agit d'une réplique de celui-ci. Je vais donc sélectionner ceci. En maintenant la touche Ctrl enfoncée, je vais sélectionner l'écran, puis je peux faire glisser le pointeur, puis maintenir la touche Maj enfoncée pour me déplacer en ligne droite. Et lorsque cette deuxième mesure qui montre que l'espacement est égal apparaîtra, je vais lâcher prise, afin que nous puissions avoir un espacement uniforme entre toutes Et bien sûr, il s'agit maintenant la commande de maintien enfoncée pour sélectionner le cadre. Voici l'écran de connexion, entrez. Si je le réduis et que je l'élargis. En fait, je vais le faire glisser ci-dessous. C'est donc le troisième. Je vais développer cela. Maintenant, voyons voir, nous devons obtenir le nom d' utilisateur et le mot de passe uniquement. Supprimez le double-clic, supprimez-le. Maintenez la touche Shift enfoncée pour vous déplacer par petits incréments et en ligne droite Double-cliquez pour le supprimer. Nous pouvons donc laisser ces trois points, et je vais les sélectionner en maintenant la touche Maj enfoncée. Maintenez la touche Shift enfoncée pour les sélectionner, poussez-les vers le haut, et c'est parti. Alors maintenant, en gros, voici comment créer les écrans d'inscription et de signature Dans la leçon suivante, voyons comment créer la page d'accueil, cette page d'accueil. Je te verrai bientôt. 6. Écran d'accueil: Voyons comment créer la page d'accueil. Retourner à notre espace de travail. Avant de passer à autre chose, je pense que je devrais tous les sélectionner et les pousser un peu vers le bas après cet endroit Je ne fais que le regarder. L'objectif ici est de comprendre comment utiliser les outils. Vous devrez prendre le temps de comprendre les principes de conception si vous souhaitez créer une véritable application. Maintenant, je vais maintenir la touche Ctrl enfoncée pour double-cliquer dessus, bien sûr, pour modifier cela afin de me connecter à votre compte. Laissez-moi simplement le mettre pour l' aligner au centre, puis laissez-moi le pousser comme ça. Ils devraient également modifier le maintien du contrôle enfoncé. J'ai déjà un compte, je n'en ai pas encore. Je n'ai pas de compte, créez-vous un compte. Je vais le rapprocher juste comme ça. Maintenant, allons-y et créons l'écran d'accueil. Je vais donc le réduire. Maintenez la touche Ctrl enfoncée , puis maintenez faites glisser et alignez-la simplement en dessous. Et vous pouvez double-cliquer dessus ou double-cliquer dessus pour le renommer en écran d'accueil Et je vais le faire glisser et le placer sous l'écran de signature. Développe-le comme ça. En fait, c'est très drôle, mais nous n'aurions pas dû le mettre ici même sur l'écran d'accueil, d'ailleurs, je ne sais pas pourquoi je l'ai mis là. Je pense que c'est parce qu' au départ, je voulais vous montrer comment créer cette barre d'onglets. Mais ensuite, nous avons fini par le mettre là. Nous sommes censés le supprimer à partir de là, donc Control X. Et je vais le sélectionner en maintenant la touche Ctrl enfoncée. Alors maintenant, collez-le juste là. Il va le coller en place, exactement là où il se trouvait dans l'autre écran. Maintenant, je veux me débarrasser de tout cela parce que nous n'en avons pas besoin. C'est donc à cela que devrait ressembler l'écran de bienvenue. Alors, en allant ici, jetons un coup d'œil à ce que nous avons ici. Nous avons donc cette zone de navigation. Allons-y et créons la barre de recherche. Je vais donc simplement sélectionner cet outil rectangulaire et dessiner notre barre de recherche, peut-être de cette taille. Donnons-lui un rayon de dix angles, juste comme ça. Nous avons ces trois icônes, alors importons-les. Je vais passer à notre dossier. Donc, en fait, laissez-moi simplement les sélectionner dans les autres icônes du dossier des autres icônes. Permettez-moi de les glisser dans notre espace de travail ici. Je vais donc les mettre ici de côté. Comme nous ne les avons pas placés à l'intérieur d'un écran, ils ne figurent dans aucun écran, ici même dans les couches. Maintenant, nous pouvons simplement aller de l'avant et les organiser de manière relative. Laisse-moi juste le mettre là. Nous avons l'utilisateur. Nous avons les notifications. Pour l'instant, utilisons-les, maintenez la touche Shift enfoncée pour les redimensionner par petits incréments Mets-les là. Maintenez la touche Ctrl enfoncée pour zoomer avec la molette de votre souris. Maintenez la touche Shift enfoncée pour continuer à les redimensionner. Tirez ça jusqu'au bout. Très bien, laissez-moi juste mettre ça de côté parce que nous n'en avons pas besoin pour le moment. Et n'oubliez pas que si nous pouvons le voir ici, c' est parce qu'il ne fait pas encore partie de ce cadre. N'oubliez pas que nous les déposons simplement ici. Alors maintenant, zoomons. Je vais développer cela. Et ici, nous pouvons simplement contrôler et sélectionner cette copie, zoomer. Je vais le coller dedans. Rechercher des produits. Je vais le sélectionner, les regrouper, contrôler G, et les renommer dans la barre de recherche. Je peux appeler ça. Je vais sélectionner ces trois éléments et peut-être les regrouper sous le nom de Control G, et je les appellerai Context Nerf parce que vous naviguez avec celui-ci en fonction du contexte. Double-cliquez dessus et poussez-le peut-être vers la gauche. Je pense que c'est maintenant bien équilibré. Je peux également prendre ce texte. Maintenez le bouton enfoncé, faites-le glisser et placez-le ici car, comme vous pouvez le voir ici, nous avons le nom de la personne connectée. Maintenez donc la touche Ctrl enfoncée et double-cliquez dessus. Bienvenue Kim, sélectionnez-le et supprimez-le. Oh, maintenant, remplaçons cela par ceci parce que Kim est une utilisatrice. Juste comme ça. Ensuite, nous allons créer les vendeurs en vedette. Je vais donc sélectionner cet outil rectangulaire et dessiner quelque part dedans. Nous allons lui donner un rayon de 20, juste comme ça. Maintenant, nous pouvons en dessiner un autre ou nous pouvons le sélectionner et faire glisser. Je vais lui donner une couleur différente pour le moment, puis redimensionnons-le peut-être jusqu'à cet endroit Nous pouvons en faire un carré en lui donnant peut-être 121 x 121. Et maintenant c'est un carré. Et pour le rayon de la frontière, fixons-le à dix. Mettons-le quelque part là-bas. Tous ces coups Et en fait, c'est censé être une image, mais pas de problème. En maintenant la feuille enfoncée, nous pouvons la redimensionner. Choisissons le texte. La police donne un coup de pied au centre pour aligner le texte, et mettons-le juste en dessous. Maintenant, je vais passer à notre dossier de ressources ici et je vais passer aux miniatures Disons des coups de pied. Je vais le déposer là. Nous y voilà. en maintenant la touche Shift enfoncée, je vais le redimensionner J'avais préfabriqué les images pour qu'elles soient quadrillées, elles mesurent donc 512 x 512 pixels Je peux le mettre juste là, puis maintenir Shift enfoncée pour le redimensionner proportionnellement, puis nous pouvons lui donner un rayon de bordure de 20 Avant cela, laissez-moi simplement le mettre de côté et le supprimer. C'était juste un guide. Maintenant, nous pouvons prendre cela et lui donner un rayon de 20. Non, dix. Et voilà, la police donne des coups Nous pouvons le pousser vers le haut comme ça. Maintenant, en maintenant la touche Maj enfoncée, je peux sélectionner ces deux options, maintenir la touche enfoncée et la touche Shift enfoncée pour me déplacer en ligne droite jusqu' à cet endroit, puis Ctrl D pour répéter cette opération. Ensuite, en maintenant la touche Maj enfoncée, je peux toutes les sélectionner. Maintenez la touche Shift enfoncée pour redimensionner proportionnellement. Nous avons maintenant trois objets parfaitement ajustés. Je vais maintenant l'étendre pour assurer qu' il est correctement aligné sur l'image. Sélectionnez-le, redimensionnez-le en conséquence. Et maintenant, donnons ces deux noms différents, moteurs Eagle. Collez ça. Et chez les vêtements pour hommes. Copiez ça. Coller. Je pense que j'avais donné cette taille 14. Oh, c'est la taille 10. C'est bon. Donc, en sélectionnant ceci, je vais lui donner une taille dix. Sélectionnez les noms, poussez-les vers le bas. C'est bon. Alors maintenant, je veux donner la même couleur que cette barre d'onglets. Maintenez donc la commande enfoncée pour effectuer un zoom arrière. Lorsque cette option est sélectionnée, je vais sélectionner la couleur, puis la couleur pico deux. Ensuite, je vais le sélectionner. Alors laisse-moi lui donner la couleur blanche. Juste comme ça. Ensuite, je peux double-cliquer dessus et télécharger depuis un ordinateur. Nous passons à Assets, vignettes. C'est censé être l'Eagle Motors. Double-cliquez ensuite sur ce téléchargement depuis un ordinateur. Ce sont les chaussures que portent les ados. Nous pouvons double-cliquer sur le nom Control B pour le mettre en gras. Nous pouvons également lui donner une couleur différente. C'est cette couleur que nous avons sélectionnée pour le logo. revenant ici, nous pouvons également créer les vendeurs en vedette et le bouton Afficher. Alors maintenant, je veux sélectionner tout cela et l' appeler Control G. Vendeurs en vedette, Enter. Et je vais le pousser vers le bas avec la touche fléchée. Ensuite, je vais le sélectionner, en maintenant la touche Alt enfoncée. Et je dirais vendeurs en vedette. Je pense, laissez-moi simplement faire glisser ce bouton ici. Maintenez la touche Ctrl enfoncée pour sélectionner l'arrière-plan lui-même. Et donnons-lui un rayon de bordure de 50 pour qu'il soit arrondi. Afficher. Réduis-le plus petit. Je peux le placer juste là. Maintenez la touche Shift enfoncée pour réduire la taille. Maintenez la touche Ctrl enfoncée pour sélectionner directement le texte et réduire la taille à peut-être neuf. Contrôle pour sélectionner l' arrière-plan lui-même. Maintenez la touche Maj enfoncée pour réduire la taille, puis sélectionnez le texte. Je pense que maintenant tout va bien. Enfonçons-le vers l'intérieur. Enfonçons le texte vers l'intérieur. Je pense que c'est le bon endroit pour y mettre fin. Nous ne voulons pas prolonger cette leçon trop longtemps. Dans la leçon suivante, voyons comment créer la section des catégories populaires et peut-être cette autre section. Je te verrai donc bientôt. 7. Affiner des cartes de vendeurs vedette: Sachez simplement qu'il y a quelque chose que nous avons oublié dans la leçon précédente. Si nous revenons à notre modèle de référence ici, comme vous pouvez le voir, nous avons une miniature qui se trouve à l'intérieur d'une carte C'est ce qu'on appelle une carte, la partie blanche, et cette carte contient la miniature et le Mais dans notre implémentation, nous n'avions pas de carte pour chaque boutique. Créons une carte. Ce que nous voulons faire, c'est que je peux maintenir Ctrl enfoncée pour sélectionner l'arrière-plan, puis le dupliquer. Alors laissez-moi juste lui donner une couleur de fond blanc, juste comme ça. Fermez ça. Pour le rayon de la frontière, donnons-lui dix. Et maintenant, laissez-moi simplement le faire glisser et le placer là où l' image rencontre les coins de l'image. Et je veux le faire glisser et aussi lui donner la même taille que l'image en bref. Maintenant, si je développe cela, nous avons une carte. Maintenant, je peux sélectionner le texte, la couleur du texte, choisir le collyre ou deux. Et puis nous y voilà. Contrôlez pour le sélectionner directement, puis redimensionnez-le juste pour vous assurer que nous avons le même espacement qu'ici Nous pouvons simplement sélectionner ceci, ceci et cela et le positionner comme ça. L'image doit être beaucoup plus petite. Permettez-moi donc de sélectionner directement l'image. Maintenez les touches Shift et Out enfoncées pour le redimensionner depuis tous les coins, Shift et Out tout en sélectionnant et en faisant glisser Et je veux lui donner un rayon limite de cinq. Juste comme ça. Nous pouvons maintenant sélectionner l'image ici et ici, sélectionner toutes ces images et les supprimer. Maintenez la touche Ctrl enfoncée pour sélectionner directement l'image. Maintenez la touche Shift enfoncée pour la sélectionner et maintenant vous les avez toutes sélectionnées. Maintenez la touche enfoncée et déplacez-vous. Déplaçons-le peut-être à cet endroit. Ensuite, contrôlez D. Maintenant, je vais maintenir la touche enfoncée. En fait, avant cela, pendant que nous avons sélectionné ces trois options, groupons-les et appelons-les Featured Seller Card ». Maintenant, nous avons des vendeurs vedettes, et parmi les vendeurs vedettes, nous avons une carte. Ce rectangle peut être l'arrière-plan du vendeur en vedette. C'est le contexte. Ensuite, nous avons la carte. Nous pouvons simplement contrôler D pour le dupliquer, puis faire glisser Remember, we have controlled deed pour les dupliquer. Et maintenant, comme vous pouvez le voir, les deux sont bien espacés, régulièrement espacés. pas sélectionnée, je peux maintenir la touche Maj enfoncée pour sélectionner ces autres éléments afin de les positionner au centre comme ça lorsque vous voyez ces reflets rouges. Maintenant, en maintenant la touche Ctrl enfoncée, je peux sélectionner cet arrière-plan et le redimensionner car en haut, il semble un peu décalé en bas Je pense qu'ils sont bien placés maintenant. Control Shift en sélectionne plusieurs. Est-ce que c'était là ? Contrôlez, double-cliquez dessus, copiez-le, contrôlez, contrôlez, sélectionnez directement l'image. Double-cliquez dessus. Cliquez à l'extérieur, sur Ctrl pour le sélectionner directement. Double-cliquez dessus, téléchargez depuis un ordinateur. Alors je pense que nous avons eu du plaisir ici. Fermez ça. Je pense que nous avons maintenant apporté les améliorations que nous voulions apporter. Nous avons une carte que nous pouvons réutiliser partout si nous le voulons. Dans la leçon suivante, voyons comment créer la section des catégories de vendeurs les plus populaires, cette section. Je te verrai bientôt. 8. Catégories de produits populaires: Il est maintenant temps de créer la section des catégories de produits populaires. Revenons à notre écran d'accueil. C'est ce que nous avons. Bien sûr, comme vous l' avez peut-être déjà deviné, nous pouvons simplement sélectionner ces deux options, maintenir la touche enfoncée, puis faire glisser le pointeur tout en maintenant la touche Shift enfoncée pour nous déplacer en ligne droite Nous y voilà. Je veux juste double-cliquer dessus et copier. Tu devras le taper. Contrôle, double-cliquez sur Coller. Alors maintenant, allons-y et créons l'art vestimentaire. Je vais donc simplement choisir l'outil rectangulaire. Et dessine juste une petite carte comme ça. Et en fait, dis-moi, c'est un carré de 89 x 89. Nous pouvons opter pour ça pour le moment. Donnons-lui un rayon de 20. J'aurais dû télécharger des icônes pour ces différents. Est-ce que je les ai téléchargés ? Je pense que je l'ai fait. Allons ici et examinons les catégories de produits. Oui, je les ai déjà téléchargés. Donc des vêtements. Allez-y Non, nous ne sommes pas au bon endroit. Alors laisse-moi juste y déposer des vêtements. Maintenez la touche Maj enfoncée pour le redimensionner. Je vais le mettre juste là, et j'aurais dû les faire noirs. Mais pas de problème. Je vais vous montrer comment faire cela dans une prochaine leçon. Alors permettez-moi de le mettre juste là. Maintenez la touche enfoncée et déplacez-vous. Ce sont des vêtements. Tant qu'elle est toujours sélectionnée, je vais l'aligner au centre, puis je vais simplement la placer au centre de cette carte comme ça. Une fois cette option sélectionnée, en fait, je vais tout d'abord sélectionner ces deux-là, les regrouper. Et renommez-les pour que je les qualifie simplement de catégorie de produits détestables. Et je veux que nous soyons organisés Je vais donc prendre un moment pour répertorier tout ce que nous n'utilisons pas encore. Puisque nous travaillons sur l'écran d'accueil, celui-ci s'affiche automatiquement sur l'écran d'accueil. Donc maintenant, si je fais glisser ceci, je peux l'espacer comme ça. Disons peut-être, combien en avons-nous ici ? Nous en avons quatre. Contrôlez D une fois de plus. En fait, avant cela, il s' agit maintenant de la catégorie des produits vestimentaires. Je veux également inclure non, ce n'est pas un groupe. Permettez-moi donc de contrôler le Shift G pour le dissocier. Ce n'est que du texte, mais comme nous l'avons copié d'ici, nous l'avons dupliqué et nous l'avons dupliqué à partir de ce groupe et d'un groupe précédent Je pense que nous l'avons dupliqué à partir de ce groupe. Alors que cette option est sélectionnée, je peux simplement dire Control Shift G, et maintenant il ne s'agit plus d'un groupe, mais texte de catégorie de produit populaire. Je vais donc sélectionner ces vêtements et ce groupe ici, les regrouper et les appeler produit. Carte. Permettez-moi simplement d'appeler ça une carte. Fiche produit vestimentaire. Et maintenant, si je le sélectionne, je le sélectionne tous. Je peux faire glisser le pointeur tout en maintenant la touche enfoncée et me déplacer. Puis contrôlez D pour répéter ce que je viens de faire deux fois. Ensuite, en les sélectionnant tous, je peux maintenir la touche Shift enfoncée pour les redimensionner. Je veux qu'ils soient. Laissez-moi les placer au centre. Juste comme ça. Maintenez la touche Ctrl enfoncée pour sélectionner le nom. Nous pouvons lui donner la taille dix, touche Ctrl enfoncée, la taille dix, en maintenant la touche Ctrl et Shift enfoncées pour en sélectionner plusieurs. Ensuite, l'électronique, les chaussures de décoration intérieure. Maintenez le contrôle enfoncé, sélectionnez-le directement. Électronique. Contrôlez la décoration intérieure. Contrôle, double-cliquez sur les chaussures. Maintenant, je vais sélectionner les trois ou quatre d'entre eux, les dupliquer sans out et décaler. Et je pense que c'est un bon endroit. Nous n'avons besoin que de deux rangées de sacs de fitness pour ustensiles de cuisine. Alors maintenant, bien sûr, en maintenant la touche Ctrl enfoncée, vous pouvez la sélectionner. Double-cliquez ensuite dessus pour le remplacer Electronics. Je vais passer à la catégorie de produits Assets, Électronique. Cliquez sur Externe. Cliquez avec le bouton contrôle, puis double-cliquez. Comme je l'ai dit, je vais vous montrer où vous allez obtenir ces images. Ne t'inquiète pas. En fait, faisons-le dès maintenant. Je vais juste utiliser une icône plate. Icône plate. Qu'est-ce que c'est ? Trois icônes. Très bien, supprimons simplement ce texte libre. Et disons les vêtements. C'est donc celui que j'ai sélectionné, je crois. Lorsque cette option est sélectionnée, vous pouvez choisir de télécharger ceci ou cela, mais je préfère cela, puis vous pouvez modifier l'icône et lui donner la couleur que vous voulez. Une fois qu'il est chargé, vous pouvez sélectionner cette roue chromatique et choisir de la rendre de n'importe quelle couleur. Mais maintenant j'ai choisi de le faire blanc, mais je suis censé le faire. Laissez-moi juste lui donner cette couleur de fond. Donc, en sélectionnant ceci, je veux lui donner cette couleur. Double-cliquez donc sur cette copie car c'est la couleur d'arrière-plan. Je veux qu'il ait la même couleur que la couleur de fond. Alors collez-le dedans, entrez. Et maintenant je vais le télécharger, je le veux à 64 ans. Maintenant, faisons-en 256. Téléchargement gratuit Fashion. Donc, en revenant ici, je peux y aller et simplement le glisser-déposer ici. maintenant la touche Maj enfoncée, je peux le redimensionner, puis cliquer dessus en maintenant la touche Contrôle enfoncée pour le supprimer Cliquez dessus et placez-le dedans. Au Shift pour le redimensionner de tous les côtés. Ce n'est pas dans cette carte. Où est cette carte ? Lorsque cette option est sélectionnée, je vais sélectionner le groupe d'origine, puis Control G, juste pour m'assurer qu' ils font partie du même groupe. Alors j'appellerai ça la carte vestimentaire. Carte de catégorie de vêtements. Maintenant, je vais sélectionner ces autres et les supprimer. Sélectionnez ce quart de travail. Puis la forme D. Je vais répéter la même chose pour l'électronique. Maintenant que nous avons déjà créé ces trois éléments, je vais les sélectionner comme ça, puis les faire glisser et les placer juste là. Et maintenant, si je clique dessus en maintenant la touche Contrôle et que je double-clique dessus, je peux télécharger depuis un ordinateur et accéder à Téléchargements . Voici celui que nous venons de télécharger, et maintenant il y est chargé. Je vais donc accélérer cette partie en remplaçant simplement ce que nous avons dans ces doublons Décor. Faisons le point sur cette modification Contrôlez, choisissez la couleur de fond ici, copiez. Double-cliquez sur Coller. Téléchargement, 256, téléchargement gratuit. Retourner ici. Je vais juste contrôler, sélectionner cela, double-cliquer dessus, télécharger depuis un ordinateur. Soi. Nous y voilà donc. Je viens de tout remplacer. Permettez-moi de les sélectionner et de les pousser vers le bas, comme ça Zoomer en arrière, en maintenant la touche Ctrl enfoncée. Notre application fonctionne très bien. Donc, une chose que je veux faire est de sélectionner ceci et ce shift juste pour créer la dernière section ici, car nous pouvons combiner les deux, les pousser vers le haut. Et la dernière section concerne les autres catégories de produits. Je vais donc double-cliquer dessus et le coller dedans. Et maintenant, vous remarquerez que ce ne sont que des boutons qui peuvent être défilés dans cette direction et qui peuvent être glissés et défilés Nous allons donc simplement le sélectionner et le mettre ici. En maintenant la touche Shift enfoncée, je vais l'agrandir. Et comme il s'agit d'un groupe, je vais le sélectionner directement. Oui, on peut quitter cette vue. En fait, permettez-moi de le supprimer. Sélectionnez ceci, contrôlez, sélectionnez le texte directement. Quels sont ces accessoires ? Contrôle pour sélectionner directement l' arrière-plan. Alors faisons-en peut-être un gris clair. Maintenez le sol et déplacez les jouets, les véhicules. Maintenez la touche Ctrl enfoncée pour sélectionner directement le texte. Jouets. Maintenez la touche Ctrl enfoncée pour la sélectionner. Contrôle pour sélectionner directement le texte. Contrôlez les véhicules. Je pense que c'est un bon endroit pour terminer qui peut les rapprocher, les maintenir enfoncés comme ça. Vous pouvez le pousser vers le bas. Maintenez la touche Shift enfoncée pour les sélectionner et poussez-les vers le bas. Je pense donc que nous arrivons à quelque chose. L'application commence maintenant à prendre forme et je l' aime beaucoup. Maintenant, nous pouvons également les sélectionner et en maintenant la touche Shift enfoncée, nous pouvons les redimensionner proportionnellement afin qu'ils puissent être alignés avec ce bouton Au fait, poussez-les vers la gauche. Et je pense que nous avons maintenant une belle page d'accueil. N'oubliez pas que l'objectif ici n' est pas de créer l'interface utilisateur parfaite pour l'application. L'objectif est de vous montrer un flux de travail que vous pouvez utiliser si c'est la première fois que vous utilisez Figma et que vous souhaitez apprendre à concevoir une interface utilisateur (UX Je veux juste vous montrer un bon flux de travail. Mais lorsque vous travaillez sur un vrai projet, vous devez vous souvenir des principes de conception. C'est donc un objectif ici. Dans la leçon suivante, voyons comment créer cette section avant de passer aux deux autres, qui sont relativement simples. Je te verrai donc bientôt. 9. Écran Vendeurs vedettes: Il est maintenant temps de créer l'écran des vendeurs en vedette. Permettez-moi donc de revenir à notre référence. Voici donc les vendeurs en vedette. Ainsi, lorsque quelqu'un clique sur les vendeurs en vedette Afficher tout, il est redirigé vers cet écran où il peut faire défiler la page et voir tous les vendeurs en vedette. Alors, comment créer cela ? en revenir à notre illustration, en zoomant, je vais cliquer sur Contrôle, sélectionner ce cadre, et maintenant, faire glisser le pointeur en maintenant la touche Maj enfoncée pour déplacer en ligne droite, et c'est parti Maintenant, l'avantage de Figma est que nous pouvons simplement réutiliser la plupart de ces pièces Je vais donc juste me débarrasser de tout ce que nous n' utilisons pas en maintenant la touche Shift enfoncée. Ou sélectionnez simplement l'intérieur du cadre et faites glisser le pointeur. Je pense que je vais traîner jusqu'ici. Maintenant, une chose que je voulais que nous fassions avant de passer à autre chose est de le sélectionner, en maintenant la touche Shift enfoncée. Oui, disons la taille 15. Je vais donc également le sélectionner. Taille 15, juste comme ça. Je voulais juste les redimensionner pour les rendre légèrement plus grands que le texte de la carte Maintenant, pour en revenir à cela, comme vous pouvez le voir, si je zoome, nous avons une image, puis du texte, puis une description. Voyons comment implémenter cela. Je vais le sélectionner, copier, contrôler, sélectionner ce cadre et le coller dedans. Double-cliquez dessus et double-cliquez dessus, débarrassez-vous de cela. Maintenant que nous avons ces deux, je veux les sélectionner et les mettre quelque part là. Et en fait, comme vous pouvez déjà le deviner, nous n'avons pas de nom ici, alors contrôlez, sélectionnez le nom et supprimez-le. En fait, contrôlons et sélectionnons l'arrière-plan. Ensuite, contrôlez, sélectionnez l'image et augmentons sa taille tout en maintenant la touche Shift enfoncée pour augmenter la taille proportionnellement Juste comme ça. Mais permettez-moi de me concentrer sur ce point. Et je vais sélectionner l' outil de texte et taper As kicks. Bien, donc je vais juste sélectionner ce faux texte. Je vais sélectionner à nouveau le texte pour le faire glisser pour coller un paragraphe, comme ça. Nous avons maintenant ce nombre d'étoiles. Je vais donc sélectionner ce menu déroulant, puis sélectionner l'étoile et dessiner une étoile en maintenant la touche Maj enfoncée, peut-être jusqu'à cet endroit 16 x 16. C'est 18 sur 18. Donnons-lui un espacement de deux. Puis Shift Control D. Nous avons donc cinq étoiles. Nous pouvons le sélectionner et le faire glisser vers le haut pour le dupliquer. Nous avons un espace d'évaluation cinq étoiles, trois k avis, trois K avis. Vous pouvez appuyer dessus avec les flèches du clavier. Maintenant, je veux sélectionner ces cinq étoiles, les regrouper et les appeler classement par étoiles ou étoiles. Ce sont les cinq étoiles. Ensuite, le groupe est toujours sélectionné, je peux le sélectionner puis contrôler G pour l'appeler rating. Maintenant, le classement interne, nous avons les étoiles, les cinq étoiles et le classement. Permettez-moi de le copier, coller juste pour augmenter la quantité de texte, sélectionner ce groupe, de l' organiser correctement. Permettez-moi d'augmenter légèrement cette taille pour atteindre peut-être 16. Je pense que j'aime bien son apparence actuelle. Ou peut-être pouvons-nous le pousser vers le haut, maintenir enfoncé pour que l'espacement ici soit le même que l'espacement C'est bon. Alors maintenant, en le sélectionnant directement, je peux maintenir la touche Ctrl et Shift enfoncée et lui donner cette couleur. Il s'agit donc d'une note de quatre étoiles. Cliquez à l'extérieur. Et maintenant, nous avons un seul vendeur en vedette appelé Polis Kicks C'est bon. Maintenant, je peux le sélectionner dans son intégralité et contrôler G pour le regrouper. Alors appelez-le Featured Seller Card. Efface-le. Maintenant, je peux glisser sans déplacer. Donnons-lui cet espacement de 17 ou l' espacement que vous voulez Déplacez ensuite le contrôle D pour le dupliquer plusieurs fois. Maintenant, vous remarquerez que si vous voulez le dupliquer davantage, laissez-moi simplement annuler le contrôle D, puis le contrôle D. Il apparaît devant la barre d'onglets. Et c'est parce que la barre d'onglets de la hiérarchie se trouve en dessous de cette carte. Comme vous pouvez le voir, la carte est ici et la barre d'onglets est là. Nous pouvons donc sélectionner les cartes. Et en fait, permettez-moi de les regrouper toutes. Cartes de vendeur en vedette. Cartes au pluriel. Puis faites-le glisser juste en dessous de la barre d'onglets. Et maintenant, il semble se trouver derrière la barre d'onglets parce que l'utilisateur s'attend à pouvoir faire défiler la page. Nous y voilà donc. Maintenant, nous pouvons sélectionner cette barre d'onglets, et voyons si nous pouvons ajouter une ombre à la bordure. Oui, Drop Shadow. Nous y voilà. Donc, pour le X, je veux dire peut-être moins cinq si je zoome, moins 20, moins cinq. Disons moins cinq. Oui, comme vous pouvez le voir, il y a cette ombre tombante. Disons également moins cinq. Qu'en est-il du moins dix ? Je fais un zoom arrière. Maintenant, comme vous pouvez le voir, il y a une ombre juste derrière. Très bien, joue avec ça. Je ne veux pas m'attarder trop longtemps sur ce point. Maintenant, la prochaine étape, bien sûr, est de modifier les détails pour chacun des vendeurs. Alors, contrôlez, sélectionnez ceci, double-cliquez dessus. Alors ça pourrait être Eagle Motors. Revenons aux cours, aux ressources et aux vignettes de Figma. Cliquez à l'extérieur. Ctrl clic, double-cliquez à nouveau. Ça peut être le magasin de jouets. Fermez ça. Contrôle. Double-cliquez. Moteurs Eagle. Revenons maintenant à notre référence et voyons si tout est correct. Maintenant, comme vous pouvez le constater, nous avons différentes icônes sur différents écrans en fonction du contexte, mais nous n'allons pas perdre de temps à essayer de mettre à jour les icônes car vous savez déjà comment les placer là-bas. C'est donc à vous de faire ce travail. Avons-nous oublié autre chose ? Je ne pense pas que nous ayons oublié quoi que ce soit. Dans la leçon suivante, nous allons maintenant créer cette page détaillée pour l'un des vendeurs, car si quelqu'un touche cette page ou la sélectionne sur son téléphone, il sera redirigé vers la police des informations de sa boutique. Ils peuvent maintenant en savoir plus sur Police Shop ou les appeler. Cela ouvrira le téléphone. Cela ouvrira cet écran et ils pourront discuter avec les policiers. Ils peuvent également cliquer sur les produits pour voir les produits de police et avoir un aperçu rapide de l'entreprise. Voyons donc comment créer cela dans la leçon suivante. À bientôt. 10. Écran de vendeur unique: Bon retour. Nous faisons des progrès, et je m'en réjouis. Lorsque quelqu'un clique sur la carte Police Kicks, il est censé accéder à la page détaillée de la boutique Police Kicks. C'est bon. Pour en revenir à notre espace de travail ici, je vais appuyer sur Control Select Inside, puis vers l'extérieur et faire glisser pour le dupliquer. Et en fait, j'ai oublié que nous étions censés les renommer. Voici donc l'écran d'accueil. Il s'agit du double-clic qui a fait apparaître l'écran du vendeur. Et c'est censé être l'écran du vendeur unique. Alors maintenant, je vais supprimer tous ceux qui reviennent ici. Je vois que nous avons besoin d'une image. Nous pouvons simplement contrôler, sélectionner ceci, puis copier, contrôler C, contrôler C, contrôler V, et je vais simplement maintenir la touche Maj enfoncée pour l'agrandir sous tous les angles, juste comme ça. Créons ensuite cette carte. Mon siège continue de glisser vers le bas. Très bien, alors passons à ce menu déroulant. Et puis un rectangle aussi. Dessinons notre rectangle juste là. Je pense que c'est un bon endroit. Tant qu'il est sélectionné, donnons-lui peut-être 20. Sélectionnez également l'image. Donnons-lui 20. Oui, je crois que je leur en ai donné dix à chacun. Alors dix, dix. Permettez-moi d' aligner cela sur cela. Poussez-le vers le haut avec les touches fléchées. Et je pense que maintenant nous arrivons à quelque chose. Donc, en sélectionnant ceci, passons au sélecteur de couleur Alors, donnons-lui la même couleur. Sélectionnez l'extérieur. Ensuite, donnons-lui un nom. Je vais donc simplement sélectionner les moteurs Eagle. Sélectionnez Ctrl parce qu'il fait partie d'un groupe, sélectionnez Contrôle puis faites glisser le pointeur vers le bas pour y placer le nom. Je veux sélectionner cette touche Alt et faire glisser. Mettons-le là-dedans. Nous avons également besoin de cette note, double-cliquez dessus, puis double-cliquez dessus. Alt et faites-la glisser. Et mettons-le juste là. Nous réutilisons simplement ce que nous avons déjà passé du temps à créer. C'est l'avantage d'utiliser Figmre. Vous pouvez réutiliser des composants. Très bien, alors passons à la question. Donc, en sélectionnant ceci et Alt, faites glisser le pointeur, puis double-cliquez sur ce bouton Alt pour le faire glisser. Je vais peut-être l'étendre à cet endroit. Faites-le glisser et déposez-le quelque part ici. Maintenez la touche Shift enfoncée pour augmenter la taille. Contrôle, sélectionnez l'arrière-plan. Je veux contrôler, sélectionner l'arrière-plan pour pouvoir les changer en dix rayons de bordure, contrôler, sélectionner les textes. J'ai un trou. Je veux en faire 15. Contrôlez, sélectionnez-le. Mettons-le juste là. Alors je vais faire glisser. Laissez-moi juste leur donner cet espacement de 14. Tant que cette option est sélectionnée, je vais maintenir la touche Maj enfoncée, puis je les redimensionnerai toutes les deux tout en maintenant la touche Maj enfoncée Poussez-les vers la gauche, légèrement vers le haut. Maintenez le contrôle enfoncé. Je veux lui donner cette couleur de fond. Donc je pense que c'était la couleur. Ensuite, pour le texte, donnons-lui une couleur blanche. Je vais juste double-cliquer sur cette copie. Coller Coller. Finissons-en là. Et nous avons notre carte. Double-cliquez dessus. Mettons ça de l'autre côté. Maintenant, augmentons la taille du nom de l'entreprise, peut-être jusqu'à 24. Poussons cela vers le bas. Faire défiler l'écran vers l'extérieur. Je pense que nous commençons maintenant à obtenir quelque chose de significatif. Contrôlez cette option. C'est du chat. Oui, je pense que maintenant nous avons quelque chose de génial. Je ne sais pas ce qu'il en reste. Vous pouvez toujours mettre à jour les icônes et les détails dont vous avez besoin. C'est maintenant là, faisons en sorte que ce soit plus logique, d'ailleurs. Voici Police Kicks. Vous regardez Police Kicks. Et en fait, nous en avons vraiment besoin nous avions une flèche. Autres icônes. Oui, nous avions cette flèche. Je pense que nous en avons vraiment besoin dans de tels endroits. Donc, poussons cela et cela parce que nous voulons donner à l'utilisateur un moyen de en arrière pour revenir d' où il vient Je pense que c'est le même cas ici, car si vous sélectionnez des vendeurs en vedette, consultez tout ce que vous avez trouvé ici et vous pouvez toujours revenir en arrière. Sélection de ces trois copies. Je contrôle, sélectionnez ici. Tout d'abord, sélectionnez Control, puis Control V pour coller en place. Et maintenant, ce sont censés être des vendeurs en vedette. Contrôlez B pour le mettre en gras, et donnons-lui cette couleur. Nous pouvons peut-être appeler cette boutique Polskiks. Nous pouvons le mettre en gras pour que l'utilisateur sache qu'il regarde Police Kicks Shop S'ils répondent, ils sont emmenés d'où ils viennent. Vendeurs en vedette, si vous répondez, vous êtes redirigé vers la page d'accueil. Voyons ce que nous avions ici. Nous n'avons donc pas besoin du profil utilisateur ici , car vous ne faites que consulter les vendeurs en vedette. Même ici, vous n'en avez pas besoin Oui, mais dans l'ensemble, je pense que nous avons maintenant un bel écran de vendeur unique avec tous les détails. Et oui, agrandissons-le légèrement. Et contrôlez, sélectionnez le texte à l'intérieur des produits. Poussez-le légèrement vers le bas. Maintenant, si je le regarde sur mon téléphone, je peux le sélectionner. Faisons en sorte qu'il en soit 11. Poussez-le vers le haut. Si je sélectionne cette option, je vais accéder à une liste de tous les produits vendus par Eagle Motors. Nous y voilà. Donc, dans la leçon suivante, allons-y et ajoutons l'écran de discussion, car nous avons également cet écran de discussion, que je peux vous donner en guise de mission. Mais voyons comment le créer dans la leçon suivante. Je te verrai bientôt. 11. Écran de chat: Et bon retour. Nous sommes donc sur le point de terminer la création des écrans. Il ne nous reste plus qu'à terminer cette session de discussion. Passons donc à nos œuvres d'art ou à notre design, et nous y voilà. Maintenant, je vais contrôler, sélectionnez-le comme d'habitude. Ensuite, je vais faire glisser le pointeur pour m'assurer qu'il est régulièrement espacé et maintenons la touche Maj enfoncée pour me déplacer en ligne droite Je vais lâcher prise là-bas. Ensuite, voici l'écran de discussion. Entrez. Laisse-moi juste me débarrasser de l'image. Et certains d'entre eux, qu' avons-nous ici, d'ailleurs ? Nous avons juste une discussion. Je veux donc qu'il me reste cette case et les textes, les pousse vers le haut, juste comme ça. Sélectionnez le texte, poussez-le vers le haut. Supposons qu'il s'agisse d'une requête. Nous avons posé cette question. Permettez-moi d'augmenter la taille ici. Zoomez. Sélectionnez le texte là-haut, appuyez dessus. Maintenant, c'est censé être à cet endroit, car vous voulez permettre à l'utilisateur savoir quelle est sa bulle vocale et laquelle est la bulle vocale du vendeur, comme ceci. Je vais donc sélectionner ces deux éléments, faire glisser vers le bas, peut-être cet espacement, mais les pousser de ce côté Nous pouvons faire varier la taille. Je vais donc simplement le faire glisser et le copier-coller. C'était peut-être une longue réponse. Permettez-moi de le faire glisser vers le bas, afin que je puisse sélectionner ici Donnons-lui ensuite cette couleur pour maintenir la cohérence de la marque. Ensuite, pour la couleur du texte, donnons-lui la couleur de fond. Maintenant, je peux simplement les sélectionner toutes, puis je les fais glisser, en leur donnant un espacement de 21 Nous avons donné les originaux. Cela peut être plus court. Comment faire glisser. Juste comme ça. Et maintenant, nous avons notre écran de discussion. Je pense donc que c'est suffisant pour l'écran de discussion. Dans la leçon suivante, faisons un peu de ménage, car nous avons perdu la trace de tous nos regroupements et organisation en général pour notre projet Voyons donc comment tout organiser pour avoir un document propre et lisible. Je te verrai bientôt. 12. Nettoyage: Il est maintenant temps de faire un peu de ménage notre design, car en ce moment , tout est désorganisé Ce n'est pas très désorganisé, mais nous avons perdu de vue où nous nous trouvions et quel groupe appartenait à Commençons donc par l'écran d'accueil. Il s'agit de l' écran d'accueil. Tout d'abord, débarrassons-nous de ces deux éléments, supprimons-les. Commençons maintenant par l'écran de bienvenue. À l'intérieur de l'écran de bienvenue, nous avons le logo. Nous avons l'icône de chargement et la barre d'état. C'est bon Dans l'écran d'inscription, et en fait, je veux masquer cet écran. À l'intérieur de l'écran de signalisation, cachons le reste. À l'intérieur, nous avons le logo. C'est bon Nous avons ce texte d'introduction Ensuite, nous avons le téléphone qui se remplit, le bouton, et ils ont un groupe de texte pour le compte. Ensuite, nous avons la barre Sarus, que nous pouvons placer au-dessus du logo de la boutique Être dans une bonne hiérarchie. Donc c'est bon. Ensuite, cachons cela et révélons-le. L'écran de signature comporte le logo de la boutique. Nous avons ce texte. Nous avons les champs du formulaire. Dans les champs du formulaire, nous avons le mot de passe. Adresse e-mail et nom d'utilisateur. Permettez-moi de réduire le nom d'utilisateur et de le placer au-dessus de ces autres. L'e-mail est censé être au milieu, et c'est bon. Ensuite, nous avons ce texte. Nous avons le bouton d'inscription, puis la barre d'état. Tu peux le mettre juste là. Passons ensuite à l'écran de discussion, que nous aurions dû placer à la toute fin ici. Puis celui-ci avant. Alors ça. Alors, écroule-toi, haut. Passons d'abord à l'écran d' accueil. À l'intérieur de l'écran d'accueil, nous avons le bouton Let me Collapse. Laissez-moi d'abord sélectionner Tout réduire. D'accord, nous avons la catégorie des vêtements jusqu'ici Ce sont les différentes catégories de produits. Donc, une fois toutes sélectionnées, les catégories de produits Control G. Voici les autres catégories de produits. Donc, jusqu'à présent, non, nous avons besoin de ceci, ce quart de travail enfoncé, et de ça. Puis Control G, autres catégories. Ensuite, nous avons ce bouton. Bouton Afficher. C'est aussi un bouton VWA. Afficher le bouton d'un vendeur en vedette. Et voici le bouton Afficher le produit de Gore. En fait, je veux que nous regroupions tout ici, de cela à cela et à ce groupe Control G. Appelons cela des catégories de produits populaires. Ensuite, groupons également ceci, ce groupe et ce Control G. Ce sont les vendeurs en vedette. Et cachez-le et démasquez-le. Nous pouvons également masquer les catégories de vendeurs les plus populaires et afficher les autres catégories, texte et le groupe lui-même, contrôle G, les autres catégories En fait, nous pouvons appeler ces sections. Section, section des catégories populaires et section des vendeurs en vedette. Et bien sûr, la section des vendeurs en vedette vient en premier. Ensuite, les catégories populaires, puis les autres catégories. Et nous avons le profil utilisateur, qui est censé se trouver ici. En fait, avant de passer à cela, sélectionnons-le avec le nom et les deux, groupons-les et appelons-les contexte, Nerve Vgation ou Nerve Collapse it, et mettons-le au-dessus des vendeurs en vedette Ensuite, nous avons la barre de recherche, qui se trouve en dessous. Ensuite, nous avons la barre d'onglets. Qui vient en bas, puis nous avons la barre d'état, qui devrait se trouver tout en haut. C'est bon. L'écran d'accueil est donc désormais bien organisé. Comme vous pouvez le constater, nous avons la barre d'état, puis le nerf contextuel, la barre de recherche, les vendeurs en vedette, les vendeurs populaires, les autres catégories et la barre d'onglets. Allons-y. Alors cachons ça. Passons maintenant en revue les vendeurs en vedette. Et ici, sélectionnons Control G. Context Nerf. Efface-le. Alors nous avons ça. Et ensuite, réduisons cela. Ensuite, nous avons la barre de démarrage, qui devrait se trouver en haut. Cela devrait se trouver en dessous de la barre d'onglets en raison de cette section. N'oubliez pas. Mais maintenant, dans la barre d'onglets, non, dans les cartes de vendeur en vedette, nous devons également nous organiser. Détruisons tout d'abord. Oui, nous en avons cinq Nous avons toutes ces cartes de vendeur en vedette. Vous pouvez également les appeler Featured Seller Card One. Vous pouvez obtenir des informations très précises et détaillées sur chacun de ces composants. Parce que si vous en ouvrez un, vous découvrirez également que vous avez d'autres groupes. Soyez donc aussi détaillé que possible et aussi organisé que possible. Donc, au moins pour comprendre comment organiser vos groupes. Effacez ça, cachez-le. Allons à l'intérieur ici. C'est très simple et rapide. Effacez tout ça. Commençons par placer le longeron de démarrage tout en haut Créons cette navigation contextuelle Control G. C'est l'ongle du pouce. Voici la carte. Appelons-les simplement « coordonnées du vendeur ». Control G. Informations sur le vendeur. Il s'agit de la miniature du vendeur. Ensuite, la barre d'onglets en bas. Nous avons donc la barre de démarrage. Contexte, nervosité, coordonnées du vendeur. La miniature du vendeur doit se trouver au-dessus. Très bien, réduis ça maintenant, enfin. Faisons-le. Un texto. Alors maintenant, j'ai regroupé tous les groupes de texte de discussion. Et bien sûr, vous pouvez les réorganiser. Et puis nous avons la barre d'onglets, puis nous avons la barre de démarrage, que nous pouvons mettre en place ici. Et nous y voilà. Alors dévoilons tout Et nous y voilà. Voyons comment ajouter de l'interactivité dans la leçon suivante Je te verrai bientôt. 13. Ajouter de l'interactivité: Il est temps d'ajouter de l'interactivité et des liens vers les différentes parties pour permettre la navigation et la présentation Pour ce faire, vous devez d'abord vous assurer que vous êtes en mode design. Si vous êtes en mode dessin, vous n'aurez pas cette option appelée prototype, dont nous avons besoin. Et c'est parce que si, par exemple, nous sélectionnons cet écran ou ce cadre en mode Contrôle et que nous passons au prototype, vous remarquerez que ces icônes plus apparaissent. Et si nous sommes en mode drone et que Control sélectionne cette option, nous ne les aurons pas. Et ce sont les hooks que vous êtes censé utiliser pour créer un lien vers d'autres parties de l'application. Assurez-vous donc d'être en mode design. Et maintenant, si je le sélectionne, que le sélectionne en mode Contrôle et que je passe au prototype, je peux le faire glisser et le placer juste là. Je l'ai pointé du doigt. Dès que vous voyez le surlignage, cela signifie que les deux sont liés. Si quelqu'un clique dessus, il sera redirigé vers cet écran. Donc, pour valider, je vais simplement cliquer à l'extérieur, mais je peux aussi choisir le comportement. Vous pouvez choisir la destination, l'action, naviguer ou toutes ces autres choses. Si je le sélectionne, maintenant, si je passe à, j'ai deux options ici, je peux prévisualiser ou présenter. Si nous prévisualisons, cela ouvrira un simulateur ici et si je choisis Présenter, un nouvel onglet s'ouvrira. Maintenant, de retour ici, nous sommes à l'intérieur. Si je le sélectionne, cela nous amènera à cet écran d'inscription. Maintenant, permettez-moi de clore cela. Et nous pouvons également le fermer. Si je le sélectionne, comme vous pouvez le voir, cela nous amène à l'écran d'inscription. Maintenant, en allant ici, je veux zoomer. Et n'oubliez pas que c'était un groupe. Je voulais que nous l'ayons simplement en contrôlant la sélection. Si nous n'avons pas créé un texte continu jusqu'à la fin, c'est texte continu jusqu'à la fin parce que je voulais que ce soit un lien unique, et non le texte entier, de sorte que lorsque quelqu'un clique dessus, il s'agisse d'un lien à part entière, et je maintiens la touche Ctrl enfoncée pour le sélectionner directement. Et si je le sélectionne, je peux le faire glisser et l' amener sur la page de signature. Si vous avez déjà un compte, vous pouvez vous connecter. Vous serez donc redirigé vers la page de signature si vous cliquez dessus. Voyons donc cela en action. Prévisualisez ça. Si nous cliquons pour accéder à la page d'inscription, si nous avons déjà un compte, nous pouvons nous connecter et nous sommes redirigés vers la page de signature Maintenant, faisons de même ici. Je peux maintenir la touche Ctrl enfoncée et la sélectionner, puis la faire glisser vers l'extérieur et cliquer à l'extérieur. Maintenant, je peux dire OK. Maintenant, si je clique à nouveau sur ce bouton, sélectionnez-le. Nous serons redirigés vers la page de connexion. Si nous n'avons pas de compte, nous serons redirigés vers la page d'inscription Juste comme ça. Effectuez un zoom arrière. Permettez-moi de fermer l'outil de prévisualisation. Laisse-moi juste régler mon siège. En zoomant. En zoomant. Maintenant, nous pouvons dire que si quelqu'un clique sur ce bouton, il est censé être redirigé vers les vendeurs en vedette, cet écran. Je vais donc le relier à cela. Si vous aviez un écran de catégories populaires, que vous devriez avoir et que vous cliquez sur Afficher tout, vous êtes censé être redirigé vers l' écran des catégories populaires, mais nous ne l'avons pas. Nous n'allons donc pas nous inquiéter à ce sujet. C'est bon. Nous avons donc également cette page d'accueil. D'accord, nous avons donc aussi le goudron. Nous faisons juste des connexions aléatoires ici. Nous n'essayons pas de suivre un ordre précis. Donc, si nous sommes sur l'écran du vendeur en vedette, nous pouvons le sélectionner. Donc, sélectionnez Contrôle, et je vais le sélectionner et je vais nous ramener à la maison, car si nous sélectionnons l'icône d'accueil, nous sommes censés être redirigés vers l'écran d'accueil. Le même cas s'applique à cela. Sélectionnez le contrôle, puis sélectionnez le contrôle. Passons ensuite à la page d'accueil. le même cas, sélectionnez Contrôle, puis accédez à la page d'accueil. C'est bon. Si nous cliquons sur le bouton de chat, nous sommes censés discuter avec cette boutique. Je vais donc maintenir la touche Contrôle enfoncée et nous y emmener. Cliquez à l'extérieur. Quoi d'autre ? Si nous cliquons sur le bouton B ici, je veux maintenir la touche Ctrl enfoncée pour sélectionner l'icône, puis nous pouvons revenir ici car nous sommes arrivés au graphique à partir de cette partie. Si nous sommes dans le magasin, nous venons probablement de la liste des magasins. Nous pouvons donc sélectionner cette icône de retour et la relier à cette icône, sélectionner l'extérieur. Si nous sommes dans la liste des vendeurs en vedette, nous venons probablement de la page d'accueil. Donc, en sélectionnant Contrôle, sélectionnez-le, puis remettez-le là. Quoi d'autre ? Maintenant, si nous voyons cela en tant que groupe, je vais simplement sélectionner Contrôle pour sélectionner l' arrière-plan lui-même. Nous allons être redirigés vers la page détaillée de Police Kicks. Comme il s'agit d'une carte, vous la sélectionnez, vous êtes redirigé vers la page de détails qui s'y trouve. Avons-nous oublié quelque chose ? Voyons s'il nous faut autre chose. C'est la boutique Police Kicks. Nous pouvons donc également lier cette boutique ici, en maintenant la touche Ctrl enfoncée. Je vais le relier à cette boutique. Je vais également faire de même pour la miniature afin que chaque fois que vous la touchez, vous soyez simplement redirigé vers la boutique Je vais également faire du nom un lien vers la boutique. Et c'est en fait la même chose nous aurions dû faire pour cela car nous voulons nous assurer qu'ils pointent vers le bon magasin. Ainsi, si quelqu'un clique sur le nom de la boutique, il est redirigé vers la boutique. Maintenant, je pense que vous comprenez comment créer de l'interactivité, comment relier chaque lien à la bonne destination Oui, je pense que tout va bien. Passons donc à la présentation. Je veux que nous le considérions comme une présentation. Fermons ça. Maintenant, si je clique dessus, nous sommes redirigés vers cette page. Et en fait, je veux que le logo nous amène à la page d'accueil. Mais pour l'instant, nous sommes sur la page d'inscription. Si nous n'avons pas encore de compte, nous sommes redirigés vers la page d'inscription Bien, maintenant je voulais que nous puissions accéder à la page d'accueil en cliquant sur ce logo Et ça aussi. Maintenant, cliquons à nouveau sur Play. Nous y voilà. Si je clique dessus, nous sommes redirigés vers la page d'accueil. Maintenant, si je veux voir tous les vendeurs en vedette, il me suffit de cliquer dessus. Nous consultons tous les vendeurs. Je peux aussi y retourner. Revenons-en maintenant à tous les vendeurs. Je peux également revenir à l'écran d'accueil depuis l'écran de la page des vendeurs en vedette. Ici, si je sélectionne l'arrière-plan, la carte ou le nom, nous sommes redirigés vers le magasin de détail de la boutique. Et si nous sommes très curieux et que nous voulons poser d'autres questions au magasin, nous devrions être des policiers Nous pouvons entamer une discussion avec eux et commencer à communiquer, pour savoir combien coûtent leurs produits. Je pense donc que c'est le bon endroit pour y mettre fin. Ce n'était qu'une brève introduction à Figma et à la conception de l'interface utilisateur des applications mobiles Bien sûr, j'ai plein d'autres trucs et astuces dans mes manches, et je vais les partager dans les prochains cours. Mais pour le moment, nous allons nous arrêter là. Mais avant de partir, j'ai encore quelques points à partager avec vous À la prochaine leçon. N'allez nulle part. 14. Réflexions finales: Et ça, c'est fini. Je tiens à vous féliciter d'être restée à mes côtés du début à la fin. Vous l'avez enfin terminé, et vous avez maintenant une application mobile, interface utilisateur que vous pouvez présenter à vos amis, clients ou employeurs potentiels. Maintenant, j'aimerais voir ce que vous avez réussi à créer. Sur Skillshare, nous aimons mettre en ligne nos projets et recueillir les commentaires des autres étudiants et des enseignants Alors allez-y, cliquez sur l'onglet Projets et ressources juste en dessous ce lecteur vidéo et cliquez sur le bouton Soumettre pour télécharger des captures d'écran de l'interface utilisateur de votre application mobile. Et encore une chose, si vous trouvez ce cours utile, j'apprécierais vraiment que vous preniez juste une minute de votre temps pour laisser un commentaire. Dites-moi comment j'ai fait. Dites-moi comment s'est passé le cours. Ça vous a plu ? recommanderiez-vous aux débutants ou aux intermédiaires ? J'apprécierais vraiment tout commentaire, car cela contribue vraiment à rendre ce cours plus visible sur la plateforme et permet à un plus grand nombre d'étudiants d'y être exposés. Il suffit donc d'aller dans l' onglet des avis et de cliquer sur Labor Review, et je vous en serais vraiment reconnaissante. N'oubliez pas non plus de consulter mon profil où j'ai plusieurs autres cours sur le design Web. Modélisation en trois D avec Blender et d'autres logiciels différents. Consultez mes cours et voyez si quelque chose vous intéresse. Nous vivons dans une ère numérique où les compétences numériques sont très importantes, et c'est dans ce domaine que je me spécialise. N'oubliez pas de me suivre également pour être prévenu chaque fois que j' ai un nouveau cours. Alors, jusqu'à la prochaine fois, restez créatifs. Paix.