Comment concevoir et prototyper une expérience de conception UI/UX mobile à l'aide de l'outil de conception Figma - Apprendre Figma

1. 1 vidéo d'introduction: Bienvenue sur la conception et le prototype d'une expérience UX mobile à l'aide de l'outil de conception Sigma. m'appelle Aaron Lawrence, et je suis un designer UX principal et fondateur de l'agence AUX appelée UX Honey à San Francisco , Californie. Je suis aussi instructeur auxiliaire, où j'enseigne le design de l'UX avancé à l'université d'art, également ici à San Francisco. Dans ce cours, vous apprendrez fig HMA, un outil de conception basé sur le cloud qui devient l'outil de conception UX standard pour l'industrie et les concepteurs UX. Des entreprises comme Google, Twitter, uber, Airbnb, Microsoft ont tous adopté Fig MMA comme outil de conception préféré en raison de sa collaboration facile et de l'efficacité dans la création de design. Et ma partie préférée est que c'est gratuit. Alors allons vous montrer le résultat de ce cours. Dans la prochaine série de vidéos, je vais vous montrer étape par étape, comment concevoir et prototyper une expérience de commande de thé Boba à la demande. Vous apprenez comment faire une inscription, page une page de connexion, vous apprenez comment le faire. GIF animés. Nous allons travailler sur l'expérience d'achat, comment créer des éléments fixes comme vous le voyez ici, les transitions pour les listes déroulantes de vos prototypes mobiles. Vous apprendrez les états des boutons. Nous allons passer par et créer un paiement de sortie de chèque et l'achat final du thé Boba livré à mon emplacement. Et oui, j'ai le thé Boba Aussi, nous allons travailler sur la page de profil Ordre page historique, et nous allons nous déconnecter et créer une expérience transparente. Vous apprenez également toutes les différentes façons de créer des transitions entre les écrans. Lorsque vous prototypez à l'aide de la figue MMA, nous apprendrons à utiliser la fonction intelligente et animée. Nous allons apprendre à créer, à entrer et à sortir des écrans, à glisser vers haut et à faire glisser des écrans vers le bas. Nous allons apprendre à créer un menu mobile, apprendre à créer des modèles et créer également une bibliothèque de composants réutilisables, styles de couleurs et des textiles tout ce qui rend la conception plus efficace et plus facile quand il s'agit de l'édition. Vous apprenez également à créer un lien pour votre prototype et à partager ce lien avec vos coéquipiers ou avec des utilisateurs pour des tests utilisateur. Vous apprendrez comment inviter d'autres personnes à participer à votre conception et à vos meilleures pratiques. En ce qui concerne la collaboration au sein de la Fig MMA, vous apprenez également à exporter des ressources U Y pour l'ingénierie et à inspecter du code comme CSS et HTML dans vos conceptions. Je vais également vous montrer tous les raccourcis fig mais clavier et comment les utiliser et les meilleurs que j'utilise au jour le jour. Je vais également vous montrer comment télécharger des fiches figment et aller en ligne et télécharger des kits gooey . Je vais vous montrer comment vous ou vos coéquipiers pouvez créer des commentaires ensemble. Et enfin, j'ai créé un fichier Fichman pour que vous puissiez télécharger et ouvrir dans fig MMA qui contient tous les designs que vous avez vus dans l'application de commande Boba Tea. Déjà là prototype Prêt à aller que vous pouvez utiliser est une sécurité maintenant ou choisir séparément si vous souhaitez et va utiliser ce fichier de conception pour aller étape par étape et recréer le prototype que nous avons vu plus tôt dans le fichier. Vous avez aussi tous les atouts que vous avez vus prêts à partir. J' ai tapé toutes les touches rapides et j'ai une liste de mes plug-ins préférés que vous pourriez utiliser dans la Fig MMA. Utilisez également ce fichier pour vous montrer l'entrée et les aboutissants de la façon dont les orteils fonctionnent dans la fig MMA, et il fera l'apprentissage de la conception et de l'apprentissage figure de plaisir dans le sens qui va passer par et créer ensemble plutôt que juste une liste de vidéos pour vous de regarder et de faire sur vôtre. Et vous pouvez marcher avec moi pendant que nous recréons toute cette expérience ensemble. Ce cours est idéal pour toute personne dont la conception d'apprentissage et veut apprendre à prototyper une expérience utilisateur ou si vous êtes un concepteur et que vous connaissez déjà d'autres outils et que vous voulez brosser sur le fonctionnement de la fig mo. Très bien, bien, merci d'avoir regardé, et j'espère que vous apprécierez la classe. 2. Introduction du cours à figma et Téléchargez le fichier classe: Bon, Bienvenue orteil. Comment construire une application mobile Expérience conception en utilisant l'outil de conception Fig, classe MMA. m'appelle Aaron Lawrence, et je serai votre instructeur pour la classe avant d'entrer dans la figue MMA et de construire l' application mobile que je partagerai avec vous dans une seconde. J' aime parcourir l'ordre du jour de la classe. Donc, la première vidéo ici dans laquelle vous êtes en ce moment est l'introduction à l'outil de conception de figment et le fichier à parcourir. Donc, je vous ai construit un fichier que vous allez télécharger dans la classe et je vais vous montrer comment configurer cela , vous donner une promenade à travers ce fichier ainsi que la fig MMA, et ensuite nous pouvons continuer à la prochaine série de vidéos, qui est comment concevoir l'expérience d'application mobile. C' est une expérience de commande de thé boba qui sont partagés avec vous ici dans un moment où les applications se décomposent en une série de scénarios qui vont être divisés en une série de vidéos. Donc, la première vidéo qui aura après celui-ci est comment concevoir la connexion et le flux de travail d'inscription . La prochaine vidéo sera l'expérience de flux de travail d'achat. La vidéo suivante sera l'expérience de workflow de retrait, et la vidéo suivante sera l'expérience de workflow de profil. Hum, je crois que la meilleure façon d'apprendre un nouvel outil et d'apprendre conçu juste s'y mettre et s' amuser. Donc ce n'est pas une vidéo où vous allez avoir un tas d'instructions et de choses à faire. Tu vas juste suivre avec moi et on va apprendre en faisant du design. Donc, pendant que nous sommes dans ces vidéos sur et ces scénarios de conception, vous allez utiliser fig mutt toe. Découvrez comment créer et utiliser une bibliothèque de composants. Vous apprendrez également à créer et à partager des prototypes cliquables que vous contestez le prototype ou que vous le partagez avec votre équipe. Vous apprendrez comment inviter d'autres personnes et comment la collaboration fonctionne. Dans la Fig MMA. Vous apprendrez à exporter des ressources U Y et à inspecter la conception à la recherche d'attributs de code, et vous pouvez utiliser ces attributs de code à des fins d'ingénierie. Vous apprendrez les raccourcis clavier MMA fig. Vous apprendrez à utiliser les prises de figurine et à télécharger des kits gooey en ligne. Vous apprendrez à créer des commentaires, et vous aurez également quelques réflexions finales et un aller de l'avant sera la dernière vidéo là-bas. les Avant de vous montrerlesproduits et les designs que nous allons construire dans cette classe, je veux juste vous parler un peu de pourquoi Sigma est devenu ah, outil de conception très populaire pour les grandes entreprises technologiques et la plupart de l'industrie. Et les entreprises qui utilisent ces outils sont des entreprises sont Sigma Tool. Est-ce que des entreprises comme Google Twitter, uber Airbnb, Microsoft pour en dire quelques-uns ? Mais pourquoi figue MMA ? L' une des grandes choses ici est qu'il s'agit d'une application de stockage de fichiers basée sur le cloud. Donc, cela signifie que stocke tous vos fichiers dans les nuages. n'y a plus de gestion de fichiers essayant de retracer le fichier le plus récent. Vous pouvez accéder à ces fichiers depuis n'importe quel ordinateur via Internet, donc il n'existe pas seulement sur votre ordinateur. Vous pouvez accéder à ces fichiers depuis n'importe quel ordinateur via Internet, Ils existent dans le cloud, et ils sont accessibles n'importe où. Ma chose préférée à propos de Sigma étant une application basée sur le cloud est qu'une auto enregistre votre travail afin que vous ne perdiez jamais de progrès dans votre travail. Il enregistre constamment votre fichier en arrière-plan, de sorte que vous n'avez jamais le plantage similaire ou le plantage de l'application, puis vous avez perdu du travail. L' autre chose, ce qui a été fortement adopté dans beaucoup de sociétés est que c'est génial avec collaboration, et l'une des raisons pour lesquelles c'est génial est que les utilisations vous pouvez voir plusieurs souris, et cela rend collaboration en temps réel. Donc, si d'autres personnes sont dans l'outil, vous pouvez voir là des souris dans l'outil, et cela rend vraiment facile de collaborer avec d'autres coéquipiers. Cela facilite également l'utilisation des ingénieurs et des PM. Et c'est génial parce que les ingénieurs peuvent entrer dans vos conceptions et ils peuvent les attendre, et ils peuvent saisir les attributs de code CSS et les copier et les coller dans leur base de code. L' autre chose qui rend Sigma gris, c'est ça ? prototypage est-il vivant dans l'outil, sorte que vous n'avez pas besoin d'utiliser un outil pour la conception et un autre outil pour le prototypage ? C' est une sorte de, ah, un guichet unique pour tout ça. Il rend ce prototype vraiment facile à partager, et il vous donne un lien cliquable que vous pouvez partager avec n'importe qui dans votre équipe ou vous pouvez envoyer aux utilisateurs et vous pouvez faire des tests avec eux. Vous pouvez les regarder passer par le lien. Vous pouvez également télécharger l'application de miroir de boue de figue que je vais vous montrer sur votre téléphone, et vous pouvez voir vos dessins que vous créez en temps réel aussi sur votre téléphone. Cela rend également um, la création de composants et d'instances de composants vraiment facile. Je vais vous montrer que dans cette classe aussi, et cela rend la création de guides de style et de styles de personnage et de couleurs pour réutiliser pendant vos conceptions vraiment facile aussi. Mais je vous assure, euh, sûr que vous êtes dans cette classe et cela fait pour laisser tomber des commentaires afin que d'autres coéquipiers vous-même puissent déposer des bandes dessinées dans l'outil dans le contexte de vos designs, qui rend vraiment très facile de voir ce que les gens font référence à quand ils donnent commentaires sur votre design, qui vous montrent également dans les vidéos finales. Il a également un espace de tableau d'art sans fin et une mise en page et a beaucoup de plug-ins que vous pouvez utiliser pour rendre la conception plus rapide. Bon, donc c'est un peu sur la raison pour laquelle la figue MMA, Allons faire un tour de l'application que nous allons apprendre dans ce cours. Donc je vais aller au prototype ici et on a un écran de chargement. C' est l'expérience d'application du thé Boba. Et ce que cela fait est de permettre à n'importe qui à San Francisco d'ouvrir pour télécharger cette application et de faire commander du thé Boba pour eux et leur livrer en temps réel. Donc, essentiellement, si je veux que le thé Boba soit livré dans mon bureau, je peux commander un thé Boba et je peux le faire livrer dans mon bureau avec à San Francisco dans les 15 minutes. Donc, nous allons apprendre dans la première vidéo. Après cela, nous allons apprendre à construire la page de connexion d'inscription que vous verrez ici. Vous pouvez voir qu'il a un système de robinet en haut, gauche et à droite, et allons de l'avant et connectez-vous. Quelqu' un a mis mon nom ou mon email mon mot de passe dans Appuyez sur le bouton de connexion fig. Ma prend également en charge les GIF animés de sorte que vous pouvez voir ce petit GIF dépenseur de chargement. Je vais vous montrer ça aussi. Et puis voici l'expérience de magasinage. Voici tous les trois thés Boba ou pour Boba, saveurs que nous avons à offrir. Ici, nous avons la barre d'onglets ici qui reste fixe, ce qui signifie qu'elle ne marche pas avec tous les autres contenus. Je vais vous montrer comment faire ça dans ce cours aussi. Et disons que je veux commander une de ces boissons de thé Boba régulières ici. Je dois juste taper n'importe où sur cette place et ça ouvre le lait, le thé, , les réglages. Et ici, je peux changer le lait si je voulais, peut-être du lait non aérien, du lait amande. Je peux aussi changer la douceur régulière ici et les souris médiatiques. Donc, dans cette expérience utilisateur va changer le doux régulier à un demi-sucré. Donc, ici aussi utiliser figment pour apprendre à créer une liste déroulante mobile, qui est une diapositive ici que vous pouvez voir. Et quand je clique sur le semi doux, vous pouvez voir que le SEMISWEET a rempli maintenant. Donc, il se sent vraiment comme une application ah riel, bien que ce soit juste vos conceptions. Et ce sont les choses que nous faisons pour montrer l'ingénierie, comment construire l'expérience, les transitions et les petits détails que nous avons dans nos conceptions. Donc vous pouvez voir ici je peux sélectionner mes garnitures. Les garnitures que j'ai sur la sélection sont grandes tapioca, petite tapioca ou gelée de litchi. Je peux voir le total ici, et j'ai le bouton ajouter. Alors nous allons de l'avant et ajouter grand tapioca de sorte que vous pouvez voir ont ajouté le grand tapioca. J' ai vu le prix monter un peu et je vais aller de l'avant et ajouter ça à mon panier. Vous pouvez voir cette transition où l'écran est descendu. On va apprendre ça dans ce cours aussi. Et je pouvais voir maintenant que je l'ai ajouté à mon panier, je clique sur le panier ici. Je vois que j'ai ajouté une boisson au lait, une course, du lait régulier, du thé, et je peux éditer. Je peux enlever ça. Je peux aussi ajouter des quantités, mais je suis bon avec. Je veux juste qu'un verre me soit livré. Voici le sous-total les taxes, les frais de livraison, total de la commande. Et je suis bon d'y aller. Si je veux fermer ça, je compresse le X, et il le fermera, euh, euh, vers le bas comme ça et je peux le rouvrir à nouveau. Donc, vous avez appris ces petits états de transition dans cette classe aussi. Alors allons-y et faisons le suivant et vous verrez Ah, l'adresse ici. Je peux mettre l'adresse dans mon appartement et mon numéro de téléphone presse fait, mais dire que je voulais y retourner du tout. Je peux appuyer sur la flèche arrière. Vous pouvez voir que l'écran glisse de gauche à droite, et vous pouvez également le voir venir de droite à gauche. Ici. Ce sont de petits détails de transition qui apprendront aussi dans la classe. Et je vais aller de l'avant et mettre mes informations de carte de crédit ici. Presse terminée. Et je pouvais voir mon total pris ma commande ici à 9,49$. Et je vais aller de l'avant et payer et on a pu voir qu'ils utilisaient encore ce spinner à 7 mg de paiement. Et vous verrez que je vois maintenant la livraison de mon thé Boba sur la carte en temps réel. Et bang, c'est là. Je peux dire, OK, je l' ai compris. Et ça me ramène à mon écran d'accueil. Je veux aller voir mon profil ici. Aiken, accédez à mon profil. Je vois. Je suis maintenant sur l'onglet Profil actif. Je peux voir une photo de moi-même. Je peux ajouter une photo. Je peux éditer les informations ici. Oh, et au fait, ce n'est pas une photo de moi. C' est juste une photo aléatoire que j'ai de quelqu'un qui utilise une prise, hum, dans la figue MMA. C' est vraiment soigné. C' est un plug in appelé, hum, des ressources de contenu, que je vais vous montrer comment télécharger et ça tire juste des photos pour vous vraiment facile. Aussi, il y a l'onglet de commande ici, et je peux voir ma dernière commande était qu'un thé au lait ordinaire construit, la date et le total là, et je peux cliquer sur le mobile. T ah, euh, sont l'icône du thé Boba. Entendre ? Cela me ramène à mon expérience de magasinage. Je peux revenir à mon profil, je peux me déconnecter, et je suis de retour à l'écran de connexion ici. D' accord. Plutôt génial. C' est donc une sorte de marchandises qui régissent dans cette classe et apprennent à construire. Mais aller de l'avant maintenant, c'est ce que vous devrez faire. Si vous n'avez pas déjà est, allez-y et allez à fig MMA, um, sigma dot com et vous pouvez simplement faire une recherche Google comme Sigma télécharger et trouver le téléchargement de figment . Um, U R L, qui est sigma dot com slash téléchargements et télécharger soit pour Mac ou Windows. J' utilise un Mac, et la plupart des gens qui font du design travaillent ici en utilisant un Mac, hum, alors téléchargez l'application locale pour votre fichier figment et vous verrez ici en appuyant sur le téléchargement. Il apparaît dans mon coin inférieur gauche. Je double-clique dessus. Il va montrer, mais mes applications et vous pouvez commencer à utiliser de la boue de figue. Ce qui est vraiment soigné, cependant, c'est aussi, euh, vous pouvez aussi accéder à fig MMA via le Web aussi. Donc vous pouvez voir ici que j'ai le fichier chargé ici sur le Web et je peux passer par tous les designs que je viens de vous montrer sur le Web. Mais pour cette classe, il est préférable d'utiliser l'application locale, alors téléchargez l'application locale. Et le meilleur, c'est que c'est gratuit. Ça ne vous coûte rien. Ok, alors allez-y et téléchargez l'application si vous alors allez-y et téléchargez l'application si vousne l' avez pas déjà fait et arrêtez la vidéo et je vais continuer et vous pourrez nous rejoindre après avoir téléchargé la figue. avez pas déjà fait et arrêtez la vidéo et je vais continuer et vous pourrez nous rejoindre après avoir Ma demande. Bon, Maintenant que vous avez sigma en cours d'exécution, allez-y et téléchargez le fichier de classe ou le dossier ici. Il s'appelle fig MMA fichier à télécharger Et une fois que vous avez téléchargé, vous pouvez aller de l'avant et ouvrir. Il y a deux choses dedans. Il a la figure, un fichier de classe que vous allez ouvrir et trouver. Je vais vous montrer comment faire ça ici dans une seconde. Et c'est le fichier que nous allons utiliser pour toute la classe. En outre, il a les polices pour le fichier sur la conception que nous faisons pour cette expérience d'application de thé Boba . Et vous pouvez voir toutes les polices ici. Cela devrait déjà être installé dans votre application fig MMA, mais juste au cas où ce n'est pas le cas. Vous l'avez ici. Vous pouvez les décrocher sur votre machine. D' accord. Avant d'ouvrir ce dossier, dossier, je vais aller à Fig MMA. Hum, le début de Sigma ressemble à ça. Vous atterrissez sur cette page, vous avez vos brouillons, vos plug-ins, votre recherche récente. Vous avez vos paramètres ici la plupart du temps. J' entre dans les brouillons ici, et je fais de nouveaux tableaux d'art. Votre application de figment probablement comme la mienne parce qu'elle l'a fait. J' ai déjà beaucoup de fichiers que j'utilise, mais vous pouvez faire le nouveau fichier ici et c'est ainsi que vous créez un nouveau fichier de travail ici vous avez vu, comme je l'ai fait ici. Si vous cliquez sur Intitulé Ici, c'est ainsi que vous créez un nom pour lui. Vous dites juste le nom ici et maintenant j'ai un nom ici, fichier créé. Je vais entrer dans le fonctionnement intérieur de la Fig Mahir. Mais il vaut mieux ouvrir le fichier que j'ai créé pour vous, et nous allons passer en revue tous les détails et nous allons apprendre en faisant ce que je pense est la façon la plus amusante d'apprendre. Ok, donc maintenant que vous êtes là et que vous avez le dossier, hum, si vous êtes déjà dans un dossier dans la Fig Ma, vous pouvez venir Teoh cette section ici. Alors venez à ça. Je clique sur le dessus, comme quatre boîtes ici. Je clique sur le dessus, Mon application de figure vient à ma maison comme tableau de bord. Ici, allez sur la section brouillon ici, et ce que vous allez vouloir faire, c'est que vous allez vouloir cliquer et faire glisser ce fichier ici. Cette figure, un fichier de classe, couper le thé boba dans cet espace ici pour que vous puissiez voir les faits saillants en bleu. Et c'est comme ça que vous allez charger ce fichier et finalement vous aurez ce chiffre un fichier de classe ici. Je vais aller de l'avant et supprimer celui que je viens de créer appelé nom ici. C' est pourquoi supprimer. Donc, si jamais vous voulez gérer cet espace, vous avez juste un clic droit sur différents vous avez juste un clic droit sur différents fichiers que vous avez créés dans Fig Mond. Vous pouvez les supprimer, les dupliquer, les renommer partager, um, copier des liens, les ouvrir. Vous pouvez également les ouvrir en double-cliquant. Donc, une fois que vous avez le fichier de classe figure huit ouvert, suffit de double-cliquer dessus et bang étaient dans le fichier ici, um bon et m'a suivi. Allons au prototype final ici, et ce sera la bonne section Teoh à jeter un oeil. Ce que je vais faire, c'est que je vais zoomer en faisant ah, commande si vous êtes sur un Mac ou contrôlez votre sur un PC moins donc commande moins pour moi et je fais déjà quelques fonctionnalités de base dans fig mo Commande juste moins pour zoomer commande Plus pour effectuer un zoom avant. Et si je voulais aussi, euh, zoom avant et arrière, je peux maintenir Z. et voir comment ça me donne ma loupe. Et je clique juste et je fais un zoom, cliquez et sélectionnez cliquez et faites glisser, et cela va zoomer dans le tableau d'art ou cette page d'art à n'importe où sur la page. Je peux commander moins à nouveau, et l'orteil suivant qui est important d'apprendre est si vous maintenez la barre d'espace, il vous donne cette petite main, et cette main, si vous cliquez et faites glisser, vous permet de déplacer cet espace autour assez rapidement. Donc, ce sont quelques-uns des fondamentaux de vraiment n'importe quel outil de conception. Est-ce que votre commande utilisant moins commande plus pour zoomer et que vous zoomez, vous utilisez la barre d'espace et la main dit de déplacer les choses autour pour aider à vous positionner. Ensuite, vous pouvez maintenir la touche Z pour zoomer sur les endroits que vous voulez voir plus. Disons que je veux attraper ce Ah, cette petite icône de flèche et que je consomme ici. Ok, alors allons-y et faisons une promenade à travers une figue mahir comme vous l'avez vu avant. Si je veux changer le nom de ce fichier de conception, il suffit de cliquer en haut ici. Je peux changer le nom. J' ai aussi toutes mes couches ici, que je vais vous montrer comment le faire ici dans une seconde. Um, pour ce système de page ici. Alors quel chiffre vous permet de faire en premier ? Tout d'abord, il vous permet de créer des pages ici sur la gauche. Vous pouvez voir que j'ai l'apprentissage. Paige, c'est là que nous allons aller de l'avant et concevoir cette application de thé Boba a la bibliothèque des composants. Euh, page ici. C' est là que nous allons mettre tous nos composants. Cela va réutiliser. Vous êtes ? I composants. Il a le prototype final. Ceci est l'expérience réelle de l'application de thé boba que vous venez de voir déjà construit . Prêt à partir en figue, MMA. Juste au cas où vous seriez coincé pendant la classe ou que vous voulez juste plonger dans les dessins déjà. Je ne vois pas comment je les ai utilisés. Um, c'est tout là pour toi. J' ai les articles de design. Ceci est une ventilation de toutes les icônes et photos similaires que nous allons utiliser pour cette classe déjà ici. Et j'ai aussi le kit gooey. C' est le kit IOS gooey. Et cela a toutes les fonctions pour, comme, comme, claviers pour vos appareils iPhone. Um, notifications. Tout là. On n'utilisera pas tout ça. Mais c'est là pour toi, hum, pour les projets futurs, si tu en as besoin. Alors ce que tu pourrais faire. Voici, disons que je veux créer une nouvelle page. Il s'agit d'un nouveau flux de travail sur lequel je veux travailler. Vous cliquez simplement sur le bouton plus ici, et vous pourriez voir que j'ai une page six. Je vais juste appeler ça comme nouvelle page ici et maintenant j'ai un nouvel espace d'art où je peux créer tous mes designs ici. Alors allons de l'avant et ah, supprimez cette page ici. Donc on va supprimer ce type ici. Vous pouvez voir que je peux supprimer la page. Je peux renommer Aiken le dupliquer. Je peux aussi faire une nouvelle page. Nous allons juste aller de l'avant et le supprimer. C' est pourquoi vous ajoutez des pages et supprimez des pages. Maintenant que nous sommes dans, euh, la page d'apprentissage ici, vous pouvez voir en haut. Ici, nous avons nos outils. Vous avez l'outil de sélection. Certains déplacent des outils à partir d'outils à échelle. Vous avez l'outil de tableau d'art ici. C' est un outil de cadre dans la tranche pour, euh, entrer dans ça comme nous le faisons. Je pense que c'est mieux quand, hum, juste un design comme on va, et je vais parler de ces outils Maurin habilement tout au long des vidéos ici et vous montrer comment on les utilise. Mais voici l'outil de forme pour créer des rectangles, des lignes, des cercles, étoiles polygraphiques. Vous pouvez également placer des images. Vous pouvez également simplement faire glisser des images et simplement le glisser dans la fig MMA sur les DAT. Comment tu peux. C' est ainsi que j'ai tendance à placer des images dans cet outil. Vous avez l'outil stylo, qui vous permet de créer n'importe quelle forme que vous voulez ici, nous allons obtenir plus dans, um que nous utilisons l'outil ou que nous faisons ces séries de vidéos ici, nous avons le commentaire, um, outil, que j'ai, ah, vidéo vers la fin ici. Comment utiliser cela. Et puis nous avons les mêmes paramètres similaires ici en haut. Nous avons le fichier ici à la recherche d'un fichier ouvert à partir d'un navigateur. Vous pouvez enregistrer ce fichier comme ah, comme un fichier réel afin que vous puissiez le sortir du nuage comme je l'ai fait ici, Um, pour les documents de cette classe, vous pouvez exporter um, tableaux d'art et vous pouvez exporter le écrans au format pdf. Certaines fonctions addict de base comme le siège de commande, une commande de copie V à coller. Et puis vous avez des zones de vue pour voir les grilles. Vous pouvez voir les couches de vue. Um, beaucoup de choses, comme n'importe quel outil conçu qu'ils n'utilisent pas. Tu apprendras tout ça. Tu as appris les rudiments. Et, euh, tu apprendras comme tu as besoin d'apprendre. Donc je vais vous montrer à peu près 90% de l'outil que j'utilise et il y a encore des choses à l'intérieur que je n'utilise pas. Je ne trouve pas tout cela utile pour, mais ils sont là quelques paramètres d'option. Vous avez des paramètres vectoriels de vous avez des vecteurs ? Je n'ai jamais utilisé ça du tout. Juste une tête en haut. Vous avez quelques fonctionnalités de texte ici ? Je ne peux jamais utiliser ça ici ? J' utilise le champ de texte ici dont je parlerai ici dans un instant. Vous avez une plage qui organise des objets. Je vais parfois utiliser cela, mais j'utilise aussi des quickies pour ceux-ci aussi. Ces air comment orteil comme des objets de couche sur le dessus de l'autre et les organiser. Vous avez vos fenêtres. Rarement. Est-ce que je l'utilise aussi ? Le plug ins ou cool. J' utilise beaucoup les branchements. Donc, euh, j'ai une vidéo vers la fin ici qui parle juste de brancher je suis et comment ils sont géniaux et ensuite aider. Vous pourriez juste chercher n'importe quoi ici si vous vouliez Teoh, hum, comme le clavier. Et ça vous donnera des raccourcis clavier ici, dont j'ai une vidéo sur la fin dont nous parlerons. Donc, si jamais tu restes coincé, tu peux, ah, faire l'aide ici, accord, et alors allons de l'avant et juste créer un rectangle ici. Vous pouvez voir que j'ai saisi le rectangle pour que j'ai cliqué et glissé ici et vous pouvez voir la colonne de gauche. Voici beaucoup à voir avec mes calques et mes pages ici que vous que j'ai la bonne colonne ici a à voir avec tout ce que je sélectionne. Donc vous pouvez voir que c'est une base que je suis sur le tableau d'art. Ça montre mes antécédents pour le tableau d'art, quelques styles locaux. Je vais vous montrer comment les mettre en place dans la vidéo. La prochaine série de vidéos qui fera et je clique sur le rectangle Regarder les choses sur les droits va changer Boone. Donc maintenant, il est changé en fonctions rectangle ici, donc je peux changer la largeur de ceci. Je tiens juste. Disons que j'en veux 20. Tu peux voir que ça va devenir très petit. Allons-y comme je ne sais pas, 2000 si on veut. Et allons-y et faisons ce 2000 aussi. On a un carré. Je vais zoomer dessus. J' ai donc changé la largeur et la hauteur de ce carré. Disons que je veux Teoh. Tournez-le. C' est la rotation. Vous pouvez également faire pivoter simplement en cliquant sur le côté. Ici, vous voyez, quand je passe ma souris sur le côté d'un coin, je reçois un outil de rotation, et si je clique et fais glisser, il fait pivoter les éléments. Mais si je veux être plus précis, je peux cliquer ici pour faire pivoter et obtenir plus de précision. Je peux aussi autour des bords ici malade et voir si je vais ici autour des bords et ils vont obtenir plus autour, finalement transformer ce rectangle en un cercle. Si je clique dans les , coins indépendants, ça permet peut-être juste d'arrondir un coin à la fois. Vous pouvez voir juste en haut à droite il est arrondi et je vais plonger Mawr profondément dans ces , um fonctionnalités pendant que nous continuons avec la classe. Mais j'ai un sentiment ici. Je peux changer les couleurs. Dis que je veux rendre ça bleu. Je peux changer un solide en un Lanier, qui est un int Grady, et j'ai deux couleurs. Disons que je veux changer cette couleur ici et peut-être quelque chose de plus Ah, violet et qu'il puisse voir son opacité à 0%. Ici, il y a dans le passé. Le curseur le rend transparent, et maintenant nous l'avons fait. Un vol à part entière était une belle couleur. J' ai mes couleurs de document ici ci-dessous que vous pouvez voir aussi. Et disons que je veux ajouter un trait comme je veux ajouter un trait noir à cela. Alors voici mon coup. Vous pouvez voir ce que j'ai fait ici, c'est que j'ai appuyé sur le plus et que j'ai ajouté un coup ici. Et puis si je peux augmenter l'épaisseur de la course ici, vous pouvez voir que je peux aussi faire la même chose que j'ai fait avec la sensation. Je peux en changer la couleur. Je peux le changer d'orteil solide. Lanier ont un éclat différent. C' est amusant. Va jouer avec ces deux-là. Qu' est-ce que je veux juste un solide ici. Je peux changer les couleurs ici. Allons-y comme un bleu plus foncé, OK ? Et puis j'ai la transparence ici. Donc, si je veux mettre toute l'image transparente, je peux commencer à la déplacer vers le bas. Finalement, il disparaît, Remonte vers le haut. Il semble que je peux faire la même chose avec mes sentiments. Vous pouvez voir ici. Je suis juste en train de rendre le champ transparent. Assez simple. Ils appuyaient le clavier Arrow vers le bas. Pour ce faire, vous pouvez également le taper. Disons que je veux , 20 ans,tu sais, je vais revenir en arrière, je pourrais faire la même chose ici pour l'accident vasculaire cérébral. La compression de la flèche vers le bas et je vois un coup. Va-t'en pour le coup. Aiken, fais un intérieur. Je peux faire un centre. Je peux aussi faire un extérieur leurs trucs assez simples pour les effets. Ici. Tu peux faire des ombres, des choses comme ça. Donc, il y a une ombre portée ici. Allons-y. Euh, appliquez. Ombre portée ici, vous pouvez le faire dans nos ombres. Par défaut, l'ombre portée est sélectionnée. C' est surtout ce que la plupart des gens utilisent. Allons faire ça. On va commencer par 70 % sur la transparence. Faisons 40 sur la gauche ou la droite et 40 sur le fond. Qu' est-ce qu'il y a ? Flou dessus et vous pouvez commencer à voir cette ombre portée. Et si je veux changer la couleur de l'ombre portée, je veux mettre un peu de bleu dans cette ombre portée là où on a un peu de bleu. Je vais aller de l'avant et supprimer les coups. Supprimer Aiken. Je peux appuyer sur le globe oculaire et c'est juste garder le coup par juste ne peut pas le voir et vous compresser le moins ici et je pourrais juste le supprimer. Donc maintenant, j'ai juste ah rectangle et j'ai l'ombre appliquée à elle. Je vais aller de l'avant et cliquer sur ce rectangle et si je fais une commande, voir ou je vais ici et je fais une copie et puis je vais faire une commande V ou éditer et je colle . Vous pouvez voir que je viens de coller un rectangle ici. Je peux également maintenir l'option clic et glisser, et je peux copier un rectangle ici et si je maintiens Shift pendant que je vais le faire, il le garde en ligne. Donc c'est exactement le même alignement que celui que je copie. Ici. Vous pouvez voir que je ne peux pas sortir de ça. Mais si j'annule le changement, je peux. Mais allons de l'avant et faisons tout cela un peu pas aligné ici. Alors maintenant j'ai trois rectangles et vous pouvez voir ici sur mon panneau à gauche. Voici que je dois me débarrasser de ces. J' ai juste appuyé. Supprimer. Je peux sélectionner ces rectangles juste en cliquant sur ces calques ici, ce qui est utile, parce que vous commencez à obtenir beaucoup, beaucoup d'éléments de conception qui vont sur votre page, il est agréable de savoir que vous pouvez simplement aller le sélectionner par ici. Je peux aussi maintenir le décalage, et je peux sélectionner quelques d'entre eux. Sélectionnez-les tous. Et si je veux juste un et trois minces ? Je peux maintenir la commande enfoncée et je peux juste sélectionner un et trois. Je peux aussi cliquer sur Trouver celui ici. Cliquez sur le rectangle lui-même. Dit shift, cliquez sur un autre et vous pourriez voir que j'ai ces deux sélectionnés. Pas celui-ci en ce moment, juste ces deux-là. Je peux déplacer ces deux-là. Je peux maintenir Shift à nouveau et déclipsé et je l'ai sélectionné. Ou je pourrais cliquer et faire glisser, et je peux sélectionner tous ces comme ça. Et je peux maintenir, déplacer et cliquer et faire glisser à nouveau et voir comment il a non isolé les zones que je clique et glisse. Donc ce sont quelques jolis, comme, vraiment, vraiment, les fondamentaux de n'importe quel outil de conception est, euh, être capable de sélectionner des éléments créer des éléments à une certaine couleur à certains, caressés à certains effets, être capable de sélectionner plusieurs objets. Ceux-ci sélectionnent plusieurs objets. Une autre chose qui est assez fondamentale pour être capable Teoh, aligner ces Donc vous pouvez voir que j'ai sélectionné les trois de ces et j'ai appuyé sur l'alignement et bang. Ils sont tous alignés en haut. Je peux aussi diriger les distribuer afin que je puisse dire bien rangé ici, ou c'est pour distribuer l'espacement horizontal. Et il fait un espacement égal de gauche à droite et de gauche à droite ici. Bon, donc vous pouvez voir les nombreuses fonctions que je viens de montrer étaient aussi, euh, euh, à la mise en place d'arrangement ici um, les paramètres d' objet ici. Disons que j'ai Ah, je vais en faire un noir. Je vais retourner au solide et en faire un noir, et ensuite je vais faire celle-là. Je vais faire en sorte que celui-là redevienne un solide et qu'il en fasse un. Toutes les couleurs que je trouve rendent rose pour cette affaire. Maintenant, vous pouvez voir mon superposition ici. J' ai donc le rose sur le dessus. J' ai le Grady au milieu du noir à gauche. Je veux changer l'un de ces anneaux de couche. Je peux aller objecter et je peux aller à l'avant. Donc, quel que soit l'objet que j'ai sélectionné, j'ai choisi ce carré que je pouvais apporter à l'avant et boom ont été amenés. On l'a ramené à la première page. Si je veux l'apporter , , allons-y et disons que je veux apporter ce rose maintenant. Je dois m'opposer. Amenez à l'avant et je peux voir que c'est monté à l'avant. Maintenant, si je veux envoyer ça jusqu'à l'arrière, je peux retourner à l'arrière et il concède à l'arrière. Et si je veux en parler, je vais le présenter et vous pouvez voir comment je l'ai fait avancer. Je peux aussi faire la même chose en cliquant sur les calques et en faisant glisser les calques afin que vous puissiez voir que je fais glisser les calques vers le haut et je vais amener le rose jusqu'au sommet ici. Des trucs assez simples. Hum, disons que je veux retourner cet élément ici. Qu' est-ce qui fait ? Je vais faire en sorte que l'un des coins ait une forme différente ici, et je veux le retourner. Je vais faire en sorte que l'un des coins ait une forme différente ici, Il suffit d'aller à l'objet, d' aller à l'horizontale, et vous verrez qu'il retournera horizontalement. Ou je pourrais aussi le retourner verticalement. Et j'ai ce que je peux faire aussi. Leur rotation ici est bien, mais j'aime faire la rotation juste en mettant ma souris ici et en la faisant tourner comme ça . Ok, cool. C' était donc un petit aperçu des bases de la figue MMA, l'outil de conception. Allons parler un peu de la structure de ce dossier que je vous ai donné. Donc on a les pages ici, on va tout créer dans cet apprentissage. Paige, en haut à gauche. Nous avons la page de bibliothèque de composants pour mettre tous nos composants. Vous avez le prototype final ici. Donc essentiellement, cette page d'apprentissage que nous avons en haut finira par ressembler à ce fichier ici divisé en quatre scénarios que j'ai étiquetés ici en haut. Ce ne sont qu'un carré avec du texte dessus. Ça m' aide à organiser mes dossiers. Donc, vous avez le journal et le fichier ici. Vous avez les scénarios de commande ici. Le check out ici et les écrans de profil ici. Donc, tout est déjà dans le dossier ? Prototypes. Vous pouvez voir si vous cliquez sur l'onglet prototype ici et je clique et fais glisser ceci ici. C' est comme ça que nous prototypographions nos écrans ensemble, je vous montrerai dans le prochain fichier ou la prochaine vidéo ici. Mais vous pouvez voir que tout est là pour vous. Hum, mais la meilleure façon apprendre que c'est en fait qu'on va recréer ça, mais c'est un filet de sécurité. Si vous en avez besoin, je pourrais avoir tous les articles de design ici, et donc déjà nous avons toujours tout ce dont vous avez besoin ici est bien, euh et oui, et sans plus tarder, je pense nous sommes prêts à aller de l'avant et à passer à la prochaine section de cette vidéo, qui est que nous allons apprendre comment commencer à concevoir cette application mobile, et nous commencerons par, connectez-vous et inscrivez-vous au flux de travail. Encore une fois, je tiens à vous remercier d'avoir pris le cours et je vous verrai sur la prochaine vidéo. Prends soin de toi. 3. Concevoir les écrans et Designing et inscrivez les écrans et la création de composants, prototypes et animer intelligents: Bon, bienvenue dans le prochain cours. Donc ça va être la série amusante de vidéos où nous arriverons à concevoir cette application mobile . L' application de commande de thé Boba à la demande que vous avez vu dans la dernière vidéo. Et ce qu'on va faire, c'est qu'on va commencer, se connecter et s'inscrire au flux de travail. Et pendant que nous le faisons, nous apprendrons à créer et à utiliser une bibliothèque de composants et nous apprendrons également à créer et partager le prototype cliquable. Allons-y et commençons. , Ce qu'on va faire ici,c'est aller aux produits de design que vous avez ici et ce que vous voulez faire ici, c'est si vous zoomez sur ce tableau d'art ici, celui qui dit que les produits de design ne cliquent pas sur l'intérieur de votre fait air en cliquant sur , cliquez sur le tableau d'art lui-même. Vous pouvez voir ici ces produits de conception ou je peux cliquer sur la couche ici sur la gauche qui dit produits de conception. Et c'est cliquer sur l'ensemble du tableau d'art. Allez-y et cliquez sur ce que vous pouvez faire une commande, voir ou contrôler. Voyez si vous êtes sur un PC. Mais commande, voir, pour Mac ou vous pouvez aller à modifier la copie, passer à la page d'apprentissage ici et aller de l'avant et accélérer cela. Copiez cela à nouveau et collez-le ici pour que vous puissiez voir tous les éléments que nous allons utiliser pour cela. D' accord. Et les pages que nous allons concevoir ici sont la figure du lien final du prototype . Voici tout ce que Siri est sous cette barre noire qui dit s'inscrire et se connecter. Vous pouvez tous voir ici, alors ne copiez pas ça. Hum, je vais apporter certains de ces éléments ici. Juste pour que je me rappelle ce qu'il faut vous montrer alors que nous poursuivons notre cheminement sur la construction de cette application. Bon, allons-y. Le prototype final. Je vais vous montrer très vite à quoi ça ressemblera dans la version finale de cette vidéo . On va faire un écran de chargement avec la carte. Nous allons faire la connexion, inscrire des onglets comme ça. Et puis nous allons créer ces formulaires ici et cliquer ou taper sur l'email et le formulaire de nom appuyez sur le clavier, met l'e-mail dans, cliquez sur le mot de passe, ouvre les entrées de mot de passe que vous ne pouvez pas vivre taper dans la figure. MMA n'a pas cette fonctionnalité où je peux, comme, vivre, vivre, taper quelque chose. Vous êtes donc en quelque sorte de prototypage ou de se moquer de ce à quoi ressemblera cette expérience une fois qu'elle sera développée, puis vous pouvez taper sur le clavier. Mais la plupart des outils prototypes n'ont pas cette fonctionnalité à moins que vous n'utilisiez du code réel. Et donc on va aller jusqu'à ce point, euh, euh, et on va aller de l'avant et on s'arrête là. Ok, donc la première chose que nous allons faire, euh, que nous allons apprendre, c'est comment créer un tableau d'art. Alors allez-y et passez à la page d'apprentissage ici, et ce que vous allez vouloir faire, c'est aller en haut à gauche. Ici. Il y a cet outil ici, qui s'appelle le cadre. Cliquez sur le cadre et vous verrez sur la droite ici fonctionne comme prévu. Vous aurez toute une liste de planches d' tailles de planches d' art que vous pouvez créer facilement dans la figue MMA. Donc, il a téléphone a des tablettes ici, voir de l'iPad. Mini iPad Pro dispose d'un ordinateur de bureau. Vous cherchez un design pour un livre Mac. Livre MacBook Pro Surface. Un Mac I a regardé des modèles ici a du papier, a des médias sociaux pour ce cas, vous pouvez. Vous pouvez également simplement cliquer et faire glisser et faire n'importe quel type de tableau d'art taille que vous voulez. Et vous pouvez manipuler les tailles avec et la hauteur ici. Donc, disons juste que je veux que cette planche d'art soit 100 par 100 sorte d'une plus petite planche d'art à partir d'un zoom avant sur cette assez simple à nouveau. Vous pouvez simplement cliquer ici, créer le cadre pour notre, um, um, n'importe quel cadre que vous voulez. Mais pour nos besoins ici, je vais sélectionner ces deux conseils sont et le supprimer. On va utiliser l'iPhone X ici. Donc on va aller à, hum, l'iPhone 11 Pro X et il suffit de cliquer dessus et vous pouvez voir qu'il a automatiquement ajouté la taille du tableau d'art affilié à un iPhone X que vous avez. Je peux également déplacer cette planche autour juste en cliquant sur le haut et en le faisant glisser. Donc je vais aller de l'avant et l'installer ici, non ? Et la première chose que je veux faire dans ce tableau d'art, une fois que je l'ai sélectionné, c'est que je veux venir à la sensation ici, et je veux cliquer sur le terrain et je vais rendre tout ça noir. Alors faites glisser ce point ici , jusqu'au taux le plus bas. Et ce que cela a fait, c'est que le fond de ceci est noir. Vous pouvez changer n'importe quelle couleur si vous voulez. On va utiliser du noir pour ce réglage. Donc, ce moment vous venez d'apprendre à créer un homme, un tableau d'art spécifique à un écran iPhone 11. Ou vous pouvez créer n'importe quelle planche d'art de taille que vous souhaitez. Et puis nous avons appris à saisir qui sont ennuyés Ici, vous pouvez voir qu'il y a une couche, euh, sur notre nouvelle planche d'art ici, couche. Si vous cliquez sur ce calque, nous pouvons le nommer. Allons-y et donnons un nom à ça. Qu' est-ce que c'est l'écran de chargement et vous pouvez voir ici je peux changer le remplissage, donc je viens de cliquer dessus. Cliquez à nouveau dessus. Je peux changer la sensation ici. D' accord. La prochaine chose que je veux vous montrer est comment enregistrer ou comment créer et enregistrer une couleur à réutiliser tout au long de cette expérience. Donc, nous avons le noir, qui est une couleur hexadécimale. Um nous l'avons. 000000 est le ton hexadécimal que nous allons faire ici, c'est qu'on va cliquer sur les quatre petits points ici que vous voyez, et on a un truc appelé les styles de couleur. J' en ai déjà quelques-uns ici étiquetés Vous n'en avez peut-être pas en ce moment, et c'est tout à fait bien. On va faire ça ensemble. Alors allez-y et appuyez sur le bouton plus ici, voir où il est dit créer un style. Et ce que ça va faire, c'est créer une couleur noire à réutiliser. Alors appelons ce noir et allons de l'avant et appuyez sur le bouton de création de style sur l'obéissance bada boom. Et j'ai un style noir ici si je veux à ce style noir, tout ce que j'ai à faire est de cliquer dessus. Si je clique sur le tableau d'art ici, Um et je n'ai rien sélectionné dans l'onglet Design. Il me montre juste mon tableau de bord, qui montre tous les styles, y compris la couleur et les textiles. Vous n'avez probablement pas encore de textiles. C' est bon. On va monter ça ensemble. Donc, si je veux changer le noir ici, je double-clique sur le clic droit noir sur le noir et puis vous verrez ce petit réglage ici, appuyez sur les paramètres et je peux changer cette propriété noire et voir comment elle change déjà sur mon tableau d'art. Donc, partout où vit cette couleur noire, j'ai beaucoup de tableaux d'art. Je peux le changer au même endroit, et ça changera sur tous les écrans, que je vous montrerai ici dans une minute. Ok, donc, euh, nous avons maintenant notre premier écran avec le fond noir. Ce qu'on va vouloir faire ici, c'est passer à la section « bon design » et prendre les informations. Ce sont les paramètres, la batterie et l'heure qui vivent sur votre iPhone, et vous pouvez voir l'onglet ici. J' ai eu ça du kit de gooey. Si vous allez à la page de conception ici et vous pouvez voir tous ces paramètres ici pour la barre d'état , um, um, les paramètres pourcentage de temps de batterie WiFi, ceux-ci ont tous changé tout au long de votre lorsque vous utilisez un iPhone. Je vais généralement juste avec le temps dans la batterie en haut, et il fait sentir plus comme une application en direct riel que vous utilisez, qui est le but de ces outils est orteil imiter le logiciel réel même si il est juste des conceptions d'écran qui nous permet de tester et d'apprendre rapidement sur un analphabète rapidement, puis finalement construire ces expériences d'application avec des ingénieurs avec du code réel et finalement obtenir une application sur le marché et créer des entreprises. Ok, alors revenons à notre onglet d'apprentissage ici. J' ai déjà créé celui qui aura besoin. Donc juste si vous cliquez dessus ici et allez-y et faites une commande, voyez et revenez à votre tableau d'art ici, vous pouvez voir que je zoome en maintenant Z, puis j'utilise à nouveau ma barre d'espace pour me déplacer. Quelqu' un effectue même un zoom avant encore plus serré ici en maintenant simplement le clic Z et en le faisant glisser. Et je vais accélérer ça. Quelqu' un fait une commande V ou vous pouvez aller à éditer coller jusqu'à vous qui a collé cela. Ici. Je vais mettre ça en haut, comme ça. Ça devrait être bien. Vous pouvez voir que c'est déjà sur la droite. Sélectionné. Il a la position fixe lors du défilement, assurez-vous que la case est cochée. Nous ne voulons pas que cette barre d'état bouge. Nous voulions garder ça réparé. Cela reste toujours dans cette position en haut de votre appareil iPhones. Je vais zoomer en faisant une commande moins ici. Et la prochaine chose qu'on va faire ici si tu veux. Si vous voulez revenir à l'onglet prototype final et vérifier ce que nous sommes ce que nous construisons ici. Hum, nous construisons cet écran ici. A la carte. A la barre d'état a cette icône cool ce thé Boba a le logo de thé Boba et il a ce texte de chargement ici. Revenons à la page d'apprentissage ici. Allons prendre cette carte ici. J' ai celui qui a déjà été recadré et je vais te montrer, hum, comment couper ça si tu veux avoir cette section ici. Alors allez-y et prenez l'image à gauche. Ici, vous pouvez voir qu'il y a une récolte que j'ai appelée en haut. Allez-y et cliquez dessus et je peux tirer ceci maintenant et je peux recadrer une image que vous pouvez voir ici J'ai rogné un retour de presse d'image et il recadre la commande Z ou éditer annuler. Et ça remonte aux étapes que j'ai faites. Si vous allez commande shift. Vous voyez, ce qui est redo peut voir ici. Et l'épaisseur. Joli. Parce qu'il a ces, Um il a les touches rapides ici, à côté de vos fonctions. Donc, comme vous vous y habituez, il est préférable de commencer à apprendre les rapides sur. Et vous pouvez passer à travers ça assez vite. Quelqu' un d'un changement de commandement. Tu vois ? Et j'ai recadré ça ici. Maintenant, si je veux également déplacer l'image dans ce recadrage vers le bas, je peux aller de l'avant et cliquer sur l'outil de recadrage à nouveau. Et juste en cliquant sur l'intérieur de mon recadrage, je peux déplacer cette image. Et si je veux aussi faire sauter un peu cette image, je peux saisir les coins de cette image, et je peux l'ajuster. Habituellement, lorsque vous mettez à l'échelle, il est préférable de maintenir Shift afin de ne pas il est préférable de maintenir Shift afin de ne pas déformer votre image. Donc, si vous maintenez Maj, il tient la perspective de votre image. Certains maintenant décalage en maintenant sur glisser ma souris vers le haut et vers le bas et je suis la réduction des tailles et à l'envers . Il est à l'échelle de mon image. D' accord. La prochaine chose ici est que vous pouvez voir Quand je suis allé dans l'outil de recadrage, il a automatiquement ouvert les fonctions d'image ici, Alors laissez-moi parler un peu de cela ici dans une seconde. Donc si je vais au Phil ici a l'image sur cette boîte et je clique dessus, vous pouvez voir que je suis dans la zone de culture en ce moment. Je peux aussi changer cela. Je peux adapter l'image à ce carré. Je peux le sentir. Donc, il sent la place. Donc, je l'échelle. ai le sentiment que l'espace que je peux le carreler, que je n'utiliserais jamais vraiment, mais il va carreler l'image. Donc si je le réduit comme ça, vous pouvez voir un peu cool tout le carrelage qui se passe. Le style est un peu comme votre carrelage. Tu sais, ça prend une section, et ça la copie verticalement et horizontalement. J' ai également quelques paramètres d'image du moteur ici. Permettez-moi d'ajouter, hum, la couleur dans cette image, et je peux retirer un peu la transparence ici. Je n'ai jamais utilisé ça, , donc j'ai tendance à rester loin de ça. Um, allons-y et revenons en arrière. Hum, donc si je suis retourné et que je voulais remplir cette forme de la couleur, vous pouvez le voir, Remplir avec la couleur reviendrait à l'image ici. Je le garde toujours sur l'image. Je n'ai jamais vraiment utilisé de tuile aussi souvent non plus. , D' habitude, je l'ai préparée pour avoir une bonne forme et on peut retourner à notre récolte si tu voulais recadrer ce type. Une Zewe pour changer vos images. Voici si je clique sur cette image, voir où il dit choisir l'image. Je peux cliquer et sélectionner une autre image. Disons que pour cette affaire, je vais sélectionner une de mes images ici. Allons au bit t image sélectionnable comme ça et je viens d'échanger cette image. Mais c'est, hum il est en forme et recadrée dans cet espace pour que vous puissiez voir qu'il est un peu interpolé l'image . Ok, certaines fonctions de base d'images et de recadrage. Je retourne juste dans l'espace que nous avons ici. Mais pour le bien du design, allons de l'avant et prenons cette image que j'ai déjà recadrée et allons la coller dans ce tableau d'art. Donc, si je veux payer quelque chose dans un art né à nouveau, j'ai cliqué en haut à gauche qui est le tableau d'art. Ah, Layer. Et je fais une commande V. Vous pouvez voir que vous pouvez aller coller Ici est bien commande V. Et il y a la carte. Maintenant, je veux définir cette carte. Um, dessous du ah, vous pourriez voir qu'il devrait être en dessous de la barre d'état ici, ce qui est le cas. Je veux aussi réduire un peu la transparence. Vous voyez que je vais aller de l'avant et faire baisser la transparence. Disons environ 20% ici. Je suis juste en train de presser. Décalez, déplacez vers le haut. Si vous annulez le décalage, il vous donne les ah réels, incréments. Et si vous maintenez le décalage, il vous donne des incréments à la 10e. Donc 2030 40 50. 60. Fais 20 ici. Ça a l'air bien. Ok, maintenant, allons attraper le logo du thé Boba ici en rose. Donc je vais prendre la commande de presse V. Je vais retourner à mon tableau d'art ici. Je vais le coller au centre. Vous pouvez le voir aligner automatiquement, um, horizontal verticalement centré pour moi ou horizontalement centré. Et juste là doit être parfait. Comme si c'était bien. La prochaine chose que je vais ajouter pour cet écran de chargement, c'est que je reviendrai ici. Je vais attraper ça. Illustration de Boba Tea ici. Commandement attrapé. Tu vois ? Copie-le. vais sortir ici, et je vais le coller sur le dessus. La deuxième copie de la commande V est la commande C et la commande Coller la commande V. prochaine fois, c'est que je vais utiliser l'outil de texte. Donc, l'outil ici est en haut à gauche qui a le thé sur elle est le textile. Je vais cliquer dessus. Et c'est ainsi que je peux créer de la typographie dans mon application. Alors maintenant, j'ai cliqué dessus. Je vais cliquer et faire glisser sur les parcelles de mon tableau d'art ici comme ça. Et je vais taper le mot « chargement » et on fait trois points. Je vais aussi changer les orteils, Phil ici sur le bas de l'orteil blanc pour que vous puissiez voir qu'il se charge maintenant. Et nous allons entrer dans certains attributs de texte, um, et les fonctions de texte que nous pouvons faire en ce moment en appuyant sur la sensation sur le texte ici. Je peux changer ça. N' importe quelle couleur que je veux. J' ai la barre de couleurs ici. J' ai glissé cette Aiken sélectionner les couleurs et je peux aussi faire des transparences ici, tout dans ce paramètre de couleur et similaire aux couleurs qui ah, sont les , um, les carrés que je vous ai montré dans la vidéo précédente où vous pourrait leur faire des infos Grady près de , Um, vous pouvez le faire aussi bien que des textos. Bien que je ne le recommanderais pas. Je ne mets pas d'éclat et de texte. Hum, la plupart de votre design sert à la communication. Donc, hum, quand ta typographie a Grady au Sénat et rend difficile à lire. Et le but de la typographie est Teoh est de la lire et d'aider à éduquer, hum, la personne qui utilise cette application ou lui donne le contexte. Alors, euh, encore une fois. Et n'utilisez pas les fourmis Grady linéaires comme ça pour votre Texas. Tu es solide. Je vais utiliser le blanc pour l'instant. Allons de l'avant et disons, je veux faire sauter un peu ça. Je veux agrandir cette taille de texte. Quelqu' un proche. Le Phil ici que je n'ai pas à faire est de sélectionner la zone de texte que j'ai et de voir ici où il est dit 15. Je peux commencer à monter ça. Faisons 18 et tu peux descendre dessus aussi. C' est ainsi que vous diminuez et augmentez les polices, les tailles de police, celle-ci ci-dessous. C' est ce qu'on appelle l'espacement des lettres, et c'est l'espace entre les lettres. Je veux un peu plus haut. Faisons que tu aimes huit là un peu plus facile à lire quand il est espacé comme ça. Ok, et allons de l'avant et définissons ce, euh, texte ici pour avoir une transparence à son, disons, 50% transparent. En fait, non, on va garder 100 et on va en fait choisir. D' accord que nous pouvons utiliser. Donc, chaque fois que nous utilisons le pâturage, j'aime généralement mettre un peu de coloration bleue dans mon gris contre juste gris. La coloration bleue aide à ajouter un peu plus moderne à l'application, donc je vais choisir. La coloration bleue aide à ajouter un peu plus moderne à l'application, Um, n'importe quel bleu gris comme ça va. Tout bleu fonctionnera à. Il peut être comme un bleu frais ou un bleu plus foncé, ou même un bleu sarcelle si vous voulez, mais juste aller avec le bleu normal. Disons ça un peu plus tard. OK, faisons-le bien. À ce stade, je veux enregistrer cette couleur, donc je veux utiliser à nouveau cette couleur. Alors comment il a fait ça avant est. Nous cliquons sur les quatre points ici, le menu pour les remplissages. Et on a eu ce petit plus ici sur une presse et je vais appeler ça gris cool. Tu peux lui donner le nom que tu veux, McCall Mind cool, gris. Et je vais créer ce style. Et maintenant, je peux réutiliser ce style quand je veux. Vous pouvez voir quand je clique dessus, il a la couleur grise fraîche. Si je ne veux pas utiliser cette couleur, par exemple, je voulais essayer autre chose. Vous cliquez sur ce détachement ici et maintenant il le détache. Et je peux revenir à la couleur normale que nous avions. Mais je ne veux pas faire ça. Je veux juste le garder aussi cool. Gris pour l'instant. Très bien, super. Nous avons donc l'écran de chargement ici. Je vais passer en revue ma liste pour m'assurer que je vous ai montré tout ce qu'on a vécu sur cet écran seul. Ce qu'on a appris ,c'est , des paramètres typographiques. Nous avons appris de la couleur comment utiliser Grady INT, re dimensionnement, recadrage de texte et d'imagerie, création de styles de couleurs. Hum, et puis on va créer certains des composants sur le prochain vert ici, je viens que l'écran suivant que nous allons construire est si vous cliquez sur le prototype final ici, je vais vous montrer. C' est Boba ? Inscrivez-vous et connectez-vous à l'écran ici. Revenons à notre Apprentissage Paige ici. Bon, donc maintenant nous ne sommes pas à bord. Vous pouvez voir ici qui a le fond noir et certains, euh, et la barre d'état ici une houle. Au lieu de créer un nouveau tableau d'art en utilisant l'outil de cadre ici, ce que nous voulons faire, c'est simplement nous voulons copier ce tableau d'art. Donc il y a deux façons de copier ça, je peux cliquer sur le haut ici. Vous pouvez voir quand vous cliquez sur le tableau d'art en surbrillance bleu par rapport à tout ce que je suis. Ah, vous voulez cliquer sur et sélectionner dans le tableau d'art lui-même. Mais dans ce cas, nous voulons sélectionner l'ensemble de notre conseil. 2e clic, je peux avancer, déplacer et faire glisser que notre rapport autour. Mais je veux le copier pour qu'un jour je puisse faire une commande, voir, voir, et je peux faire une commande V. Et il copie automatiquement le tableau d'art pour moi et le place directement à droite de ça, hum, notre conseil à gauche. Ici, vous pouvez voir une autre façon de le faire est que je peux cliquer sur le tableau d'art, Hold option jusqu'à ce que j'obtienne la double flèche. Vous pouvez voir ici la double flèche cliquez et faites-le glisser vers la droite, puis laissez aller. Et quand j'ai lâché prise, je l'ai copié aussi. Donc une fois de plus sur celui-là. Je clique et maintenez l'option jusqu'à ce que j'obtienne la double flèche. Et quand je maintiens le décalage, ça reste aligné pour que je ne puisse pas bouger. Vous pouvez envoyer déplacer ma souris vers le haut et vers le bas, mais je ne vais pas me laisser retirer ce tableau d'art de l'alignement où si j'annule le décalage, je peux le déplacer autant que je veux à quelqu'un ahold shift parce que vous voulez vos planches en ligne. Voulez-vous avoir une mise en page propre organisée  ? Bon, maintenant j'ai le nouvel écran de chargement. Appelons ce chargement. Appelons cela l'écran de connexion ici, donc si vous double-cliquez sur la couche et vous le faites, Vous vous connectez. Eh bien, vous vous connectez et vous inscrivez parce que c'est bon, Cool. Donc, ce point, commençons à supprimer certaines choses. Alors retirons le thé boba. Supprimons la carte. Je vais garder ça. Hum, ce chargement le supprimerait pour commencer à nouveau. Ok, cool. Alors allons de l'avant et attrapons le logo que nous avons ici qui a le blanc et voir ici et faire une commande. Tu vois ? Copie-le. Je vais Il est pan sur l'autre tableau d'art que j'ai ici et faire une commande v Ok . Juste comme ça. Et la prochaine chose que je veux faire est que je veux saisir l'outil de texte ici, et je veux créer l'inscription et les onglets de connexion. J' ai cliqué sur le textile ici. Je vais cliquer et faire glisser quelque part. Le milieu va bien. Je vais taper l'inscription. Je vais faire toutes les casquettes que je viens de taper avec mes blocs de casquette. Faites ce blanc et vous pouvez facilement changer le texte ici en faisant. Vous pouvez changer toutes les majuscules de texte ici avec le menu texte en haut en allant dans la casse originale , vous pouvez faire des minuscules ici ou en majuscules aussi bien. Je veux garder mon numéro. Cas. Bon, cool. Nous nous sommes donc inscrits ici et ce que j'ai est fixé à Roboto Bold 19 points. Allons de l'avant et créons ceci comme un style de personnage que nous pouvons utiliser et réutiliser tout au long cette application. Alors, comment faire cela est similaire à la façon dont nous avons créé le style de couleur. Voir quatre petits points ici à droite dans cette boîte de dialogue de texte. Je vais cliquer dessus et j'ai déjà quelques textiles et styles de personnages déjà créés ici. Vous ne le verrez peut-être pas , , mais ce que vous pourriez faire ici, c'est en créer un nouveau et appelons ça. Parfois, je les nomme ce qu'ils sont. Il s'agit d'une hauteur de 19 points ou pixels sur le bon point, et c'est gras. Voilà, tu y vas. Maintenant, pourquoi cela est utile, disons que j'utilise à nouveau l'outil de texte. Commande rapide Etem à utiliser pour saisir l'outil de texte. Assez simple, son thé et vous pouvez voir quand vous planez dessus. Ça te donne le rapide. Certains de Presti. Si je tape encore quelque chose. Disons que je vais le faire en dehors du tableau d'art ici. Donc, je fais le texte ici, et j'en tape un. Si je crée des hommes, tournez ça la aussilacasse des orteils. D' accord. Et si je sélectionne cette police et que j'entre dans le texte ici et que je saisis les attributs que nous avons créés le style de personnage dire 19 points gras, il met automatiquement en place ce caractère, et je peux le changer en blanc. Et j'ai la même taille de police, le même caractère et le même textile que celui que j'ai créé ici . Inscrivez-vous. droite. Donc ce que je vais faire, c'est copier cette inscription ici. Je vais tenir l'option, cliquer et faire glisser vers la droite, et vous pouvez voir et dire à ceux de se rencontrer au centre. Vous pouvez voir juste là, et il va accrocher ceux que la boîte de liaison. Cette zone de texte pour l'inscription que je viens de copier s'accrochera à celle d'origine à partir de laquelle j'ai copié. Je vais prendre les deux et je vais juste utiliser ma touche fléchée sur mon clavier et juste les déplacer un peu vers la gauche juste pour qu'ils soient tous les deux alignés et vous pouvez voir qu'ils sont tous les deux centrés sur la page. À ce stade, je vais encore taper la loi. Et maintenant je vais casser ce style et faire son à partir de la boîte de dialogue textile de personnage ici et en faire un réel régulier. Oui, rendons ça régulier. Je vais aussi le changer pour environ 40% d'opacité ici, donc vous pouvez le voir. Donc une fois de plus, j'ai saisi la connexion. Je l'ai détaché du textile que nous avons chante au style détaché. Maintenant, cela me permet de faire n'importe quelle faute que je veux. Si vous voulez choisir d'autres polices, vous pouvez entrer et sélectionner ses polices, mais nous utilisons Roboto pour ce cas, et je vais le changer en standard. Vous pouvez même faire de la lumière si vous le vouliez. Allons-y avec la lumière. Je vais supprimer l'opacité jusqu'à 40. Peut-être en faire 50. Maintenant, ça a l'air bien. Ok, prochaine chose que je vais faire, c'est que je vais prendre l'outil rectangle. Donc, je suis en haut à gauche, et je vais créer une petite ligne. Donc ce que j'ai fait, c'est que j'ai attrapé l'outil rectangle. J' ai zoomé un peu et j'ai cliqué et traîné et j'ai fait une petite ligne ici où je rectangle ici très mince. Maintenant ce que je vais faire, c'est que je vais changer cette couleur pour être aussi rose. Donc, ce que je pourrais faire est que je veux ah, couleur que je vois déjà dans mon design, je peux essayer de le sélectionner ici en essayant de le faire correspondre. Vous pouvez également simplement saisir la pipette ici et passer la souris sur n'importe quelle couleur que vous voulez et cliquez dessus . Et il fera automatiquement cette couleur pour vous Une autre façon. Vous pouvez ajouter la couleur ici est que je peux cliquer sur cet élément que je peux copier et rythme. C' est la valeur hexadécimale ici commande. Voir, Je peux cliquer sur ce nouveau rectangle que j'ai créé et je peux commander v appuyez sur retour sur le clavier, et j'ai la même couleur. La façon dont j'aime le faire est d'aller de l'avant et de créer un style de couleur. Maintenant que j'ai la voiture que je vais réutiliser et que ça va être une couleur d'action, donc c'est la couleur qui sont des boutons. Ils vont être principalement tout ce qui est cliquable dans l'application que nous voulons créer avec cette couleur d'action primaire. Alors maintenant, j'ai la couleur. Je vais aller de l'avant et cliquer sur notre style crée ici, et C en avait déjà un créé Il l'a créé à nouveau. Je vais appeler cette couleur d'action primaire. Je vais créer celui-là pour que vous puissiez voir cette nouvelle couleur que nous avons ici sur la deuxième ligne. Ok, cool. Donc maintenant, nous avons l'inscription et la connexion en cours. Revenons au prototype final ici. Allons voir l'inscription. Donc, nous avions prénom nom email mot de passe ici. Et c'est là que nous allons entrer dans la création de certains composants ici, ce qui est une pièce vraiment importante check out. Allons créer ces champs de formulaire. Revenons à notre apprentissage ici. Et ce que je vais faire, c'est que je vais utiliser l'outil de ligne, donc je vais aller où je peux sélectionner le rectangle. Il suffit de cliquer dessus. Tu vois la liste déroulante ? Vous voyez l'outil de ligne ? Je vais juste faire une ligne, pas d'un bout à l'autre, juste à l'intérieur de certaines limites. ici. Donnez-lui un peu d'espace à gauche et à droite au tableau d'art. Si je maintiens le décalage, ça me donnera une ligne droite. Si je ne tiens pas décalage, vous pouvez voir qu'il donne des lignes tordues. On veut une ligne droite ici, et je vais aller de l'avant et rendre ça, hum, blanc. Alors allons de l'avant et attrapons le blanc et encore, je vais faire blanc ah, attribut de couleur que je pourrais réutiliser et re sélectionner. Appelons ça blanc. Ça me rend vraiment facile de sélectionner ça, non ? Donc maintenant, j'ai blanc est un style. C' est trop fort pour le moment. En ce qui concerne la couleur, revenons cela dans la transparence. Faisons ça comme 20% ici. D' accord, 20%. Qu' est-ce qui est assez bon ? Alors maintenant, tu en prends le coup. Hum, j'ai tendance à ralentir un peu, aussi, aussi, fur et à mesure que nous y allons. J' espère que je suis au bon rythme pour que vous suiviez quand si vous devez faire une pause etlefaire pour vous-même et revenir appuyer sur le jeu, c'est bon aussi. J' espère que je suis au bon rythme pour que vous suiviez quand si vous devez faire une pause et faire pour vous-même et revenir appuyer sur le jeu, c'est bon C' est la prochaine chose que je veux faire. Je vais juste copier ça. Inscrivez-vous ici. Les images cliquent et glissent. Option de maintien. Copiez-le comme ça et voyez comment il est centré. Ce qui signifie qu'il a un paramètre de paragraphe centré. Où si je tire cette boîte, ça va centrer le texte dedans. Je veux que je laisse une ligne. Ce n'est donc pas la ligne du sénateur, mais a laissé la ligne. Et comment je fais cela ici est que vous pouvez voir les onglets d'alignement sur la droite. Si je fais le bon, ça aligne leur centre. On veut laisser une ligne. Ouais, juste comme ça. Ça a l'air bien. Et donnons le titre à votre prénom, toutes les majuscules. Je vais me centrer. Je vais diminuer la hauteur un peu. Ok, ça a l'air bien. Bon, alors maintenant on va créer un composant. Donc c'est, euh, un morceau important de la façon de concevoir plusieurs tableaux d'art et applications. Um, vraiment facile et efficace quand vous voulez faire des changements sur plus d'un tableau d'art. Donc ce que je vais faire, c'est que je vais copier ce, euh, nommer le champ de texte ici et cette ligne quand une copie, mec C et moi allons revenir sur ma page que j'ai créée ici appelée Bibliothèque de composants. Et allons-y. Je vais le coller ici. Vous pouvez voir que vous avez le prénom dans la ligne ici. Maintenant, je vais appeler. Ça reviendrait là où j'ai tapé le prénom, et je vais l'appeler titre. Assurez-vous que votre zone de texte deux échelles. L' imbécile avec vous ne veut pas de votre boîte de texte comme ça. C' est pourquoi tu veux le plein de la ligne qu'on a ici ? Ok, donc je vais sélectionner la ligne et le titre. Et voici comment nous créons un composant. Tu vois cette petite icône en forme de diamant en haut ? Allez-y et cliquez sur cela, et vous pouvez voir couteau sélectionné. Il a changé la sélection d'un bleu que vous voyez ici à un violet. Cela signifie que c'est le composant maître maintenant, donc nous voulons changer ce nom pour former. On va l'appeler par défaut par défaut. D' accord, donc ce que nous allons avoir c'est que nous allons avoir cette page qui s'appelle Bibliothèque de composants sur la gauche, et qui va héberger tous nos composants que nous allons utiliser tout au long de cette conception que nous sommes créer ici. Ok, donc j'ai la bibliothèque des composants. Nous avons créé notre premier composant. Vous pouvez voir ici formulaire par défaut. Allons utiliser ce composant. Donc maintenant je suis sur ce retour à notre couche d'apprentissage Paige ici. Si je vais actifs, vous pouvez voir un heureux ici, et je clique et fais glisser ce composant dans mon tableau d'art. Et vous voyez comment il a une sélection pourpre et pas une sélection bleue, parce que le violet est mon composant. Ce que je vais faire, c'est supprimer le prénom que nous avons créé, et je vais le remplacer par le composant. Donc c'est assez commun. Ce que vous faites, c'est que vous créez un élément u I, et quand vous devez créer un composant est chaque fois que vous copiez quelque chose. Donc, si je veux copier ceci et dire, Maintenant, faites un nom de famille à ce moment-là, je n'aurais pas dû copier ce composant ou ceci, um, um, ce que vous j'ai rempli ici et l'ai dupliqué et changé le nom. À ce stade, j'aurais dû créer un composant et commencer à utiliser des composants. Donc, ce que vous ne voulez pas avoir, c'est que vous ne voulez pas finir avec un tas de formulaires comme celui-ci qui sont tous individuels, que vous ne pouvez pas changer d'une vue principale. Et je vais te montrer comment faire ça ici dans une seconde. Alors retournons à la maison dans une commande Z revenir en arrière certains et encore, Fig doit sauver cela tout le temps. Je pourrais aller dans le dossier et je pourrais dire, euh tu vois, il n'y a pas de sauvegarde ici. Je peux faire une commande s, qui est le raccourci pour enregistrer, et vous verrez ici. Il dit figure figure, MMA auto sauve votre travail et me donne un petit signe de paix. Et ils mettent toujours différents. Je l' appelle comme des petits émojis. Chaque fois que vous faites une commande, voyez, ils aiment, mettre au hasard l'émotion qu'ils veulent. On est juste gentils. Donc ils te font savoir que tu ne sauves même plus ton travail. Comme il l'enregistre automatiquement pour vous. Ok, donc maintenant j'ai encore mon composant. Ce dont j'ai accès, c'est que je suis passé de mes calques ici à mes actifs, et j'ai cliqué et glissé mon composant sur le tableau d'art comme ça. Et je veux te remplacer ce prénom. Pourquoi j'ai fait avec le composant ici, et je vais cliquer sur ce composant, et je vais changer le titre du nom en prénom. Bon, donc maintenant nous avons un composant quand il a fait qui vit dans cette bibliothèque de composants et nous avons une instance qui signifie une représentation enfant de ce composant maître vivant sur ce tableau d'art ici. Donc maintenant ce que je vais faire, c'est que je vais copier ce composant, et maintenant je vais créer plus d'instances en haut, et je vais vous montrer pourquoi. Il est important que nous nous arrêtions et produisions un composant avant de copier le texte original et ligne que nous avons créés précédemment. Maintenant que nous avons le prénom, je vais changer le nom de famille de l'orteil, faire ça aussi pour être une seconde. D' accord. Et on va copier ça à nouveau et tu peux voir que ça me donne des intervalles d'espacement ici. Soc à dit 12 Il 18. Cela m'aide à distribuer automatiquement l'espacement égal lorsque vous maintenez lorsque vous copiez de cette façon . Donc, lorsque je clique et fais glisser et maintenez la touche Maj enfoncée, c'est pourquoi j'aime copier de cette façon. Donc encore une fois, si je maintiens l'option et je clique et fais glisser et je maintiens Shift, il le garde aligné. Et ça m'aide aussi. Non. Oh, c'est un espacement de 18 pixels par rapport au dernier composant en haut. Et c'est une distribution égale. C' est ce que je veux. Super. Alors allons de l'avant et appelons celui-ci. Et le dernier que nous avions ici était le mot de passe. Bon, regarde ça. C' est pourquoi il est vraiment important que nous fabriquions un composant. Disons que je parle à mon client ou à un autre designer, et qu'ils sont comme, Hey, tu sais quoi ? Il vaut mieux que nous fassions tout ce texte de prénom ici rose. Je suis genre, OK, je vais aller de l'avant et te donner cet exemple ou aller, aller de l'avant et changer quelque chose. Allons de l'avant et changeons tous ces deux roses. Dans l'ancien temps, nous avions un clic sur l'un de ceux-ci ici et changer chacun rose, donc je devais cliquer puis sélectionner le prénom et changer le rose. Ensuite, je dois revenir au nom et changer un rose, puis je dois aller à l'e-mail et changer un mot de passe rose 30 et le changement de rose. Mais quand nous pensons à mettre en place ? Êtes-vous et des composants comme ça ? Ce que je peux faire maintenant, c'est que je peux aller à ma bibliothèque de composants ici. Et c'est le composant maître que j'ai créé. Donc tous les maîtres vivent ici. Donc j'ai changé la couleur de ce texte ici pour le rose que nous avons fait ici comme ça, et je retourne à mon apprentissage Paige, regarde. Tous on 4. Concevoir l'expérience shopping: Bon, bienvenue. Donc, dans les dernières vidéos que nous avons travaillé sur la connexion et les flux de travail d'inscription dans cette vidéo, nous allons couvrir le flux de travail d'achat. Laisse-moi te montrer ce qu'on va faire dans cette prochaine vidéo. Donc le dernier que nous avons travaillé sur l'inscription à la connexion, et à ce stade, nous avons laissé juste ici, qui est l'écran de chargement et cette prochaine série de vidéos ou cette vidéo sur laquelle nous sommes moment, nous sommes va construire ce flux de travail d'avoir, hum, la possibilité de sélectionner une boisson à thé Boba et ajouté à votre panier. Alors laissez-moi vous montrer que maintenant, nous allons également construire cette barre d'onglets en bas qui reste fixe. Ce qui signifie qu'il ne bouge pas lorsque j'ai balayé vers le bas et vous pouvez voir si je clique et le fais glisser vers le haut. Sigma fait automatiquement la transition comme si je balayais sur un appareil mobile. D' accord. Et à ce moment-là, le prochain train pour reconstruire celui-ci est l'écran de sélection. Donc vous pouvez voir que nous avons un état de transition où cela glisse vers le haut. Si je tape sur le X, il glisse vers le bas en tant que transition. Nous avons donc appris que c'est bien, et nous allons également apprendre à créer une liste déroulante mobile. Donc, si je tape sur ce doux régulier ici, vous pouvez voir que j'ai une superposition slide up, et si je tape en haut, il glisse vers le bas. Et si je tape une sélection semi douce, vous pouvez voir qu'il met à jour la sélection où ledit doux régulier à semisweet. Ensuite, la prochaine chose que nous ferons est de créer l'état actif pour les sélections de topping . Donc, si je clique sur le grand ou appuyez sur le grand tapioca topping, vous pouvez voir là et j'appuie sur, et cela va ajouter au panier là. D' accord, cool. Alors allons-y et allons-y. Donc revenons à, euh, euh, sont la page d'apprentissage ici sur laquelle nous étions. Vous pouviez voir celui-là, et vous rappelez où on s'est arrêté ? On a cousu le journal, euh, et le bouton aller ici à cet écran de chargement. Je vais copier l'écran de chargement ici. Et donc ce que j'ai fait à nouveau était, um je clique dit Option cliqué et traîné une fois que j'ai eu les doubles flèches. Est ma souris qui copié qui sont ennuyés et j'ai tenu décalage, donc il garde l'alignement. Donc quand je n'ai pas de décalage va hors de l'alignement. Quand je maintiens le décalage, il le garde en ligne au prochain tableau d'art. Je vais, hum, cliquer et faire glisser en dehors du tableau d'art. Vous pouvez voir comment je fais ça ici. Et ça va juste sélectionner des choses dans le tableau d'art. Et je vais supprimer le boba dans le chargement. Je vais également sélectionner la barre d'état ici. Je vais commander voir ou copier ici, et ensuite je vais le supprimer. Et je vais attraper ce tableau d'art zoomé un peu ici, en fait, Avant de zoomer, je vais créer un guide pour me montrer le bas de mon écran. Donc si vous ne voyez pas vos règles ici, vous pouvez aller voir ou vos pixels et vous pouvez voir, hum, où il est dit, montrer les règles, cela donnera, vous savez, des règles en ce moment. Et si je vais voir montré les dirigeants à nouveau. Je vais voir les dirigeants. Vous voulez que les règles soient éteintes parce que vous voulez pouvoir faire glisser des repères. Donc si je suis sur si je suis dans le tableau d'art, je fais glisser un guide qu'il reste dans ce tableau d'art. Vous pouvez voir maintenant que c'est Onley dans le tableau d'art. Si je ne suis pas dans le tableau d'art et que je suis juste dans la zone de conception, je tolère de faire glisser un guide et il reste en dehors du tableau d'art. Donc ça reste n'importe où, donc je peux toujours le voir. Je peux cliquer dessus, faire glisser Si je veux le supprimer, je peux simplement le faire glisser vers le haut dans la règle, et il la supprime. Donc, ce point, je veux prendre le guide, puis je veux sélectionner mon tableau d'art ici, et je veux le rendre vraiment long. Ne vous inquiétez pas trop pour, euh, combien de temps il est. Fais ça assez longtemps ici. Comme si j'avais le mien en 2000. Rendons-le encore plus long comme 2400 pixels. Ok, donc ça a l'air bien. Et puis je vais coller, hum, la barre d'état dans. Non, je vais le copier d'ici. Colle-le de là-bas. Assurez-vous que cette barre d'état a la position fixe lorsque vous faites défiler ici. Donc on a mis ça dans la dernière vidéo, mais c'est vraiment important. Maintenant que nous allons pouvoir faire défiler vers le bas et voir le contenu ici. Ok, donc la prochaine chose que vous voulez c'est que nous voulons créer cette barre d'onglets. Donc, j'ai l'onglet sont ici sur les produits de conception. Vas-y et attrape-le. Copiez-le et vous pouvez payer. Donc, en dehors du tableau d'art, pour l'instant est ce qui va créer cela. Nous voulons juste prendre ces icônes pour que vous puissiez voir que j'ai ce statut. Cette barre de navigation ah en bas ou la barre d'onglets en bas est définie à 375 de large et on peuten faire 8 85 hauteurs. Cette barre de navigation ah en bas ou la barre d'onglets en bas est définie à 375 de large et on peut Cisco, prends un carré, un rectangle ici. Et faisons juste un rectangle dans ce tableau d'art n'a pas d'importance pour le moment. Il suffit de faire la même chose avec le tableau d'art. Donc, vous avez 3 75 et puis revenons aux attributs de hauteur ici en haut. Droit ? Faisons ça 85. Ok, Cool. Alors maintenant, vous pouvez le voir ici. Ça a l'air plutôt bien. Allons de l'avant et bougeons ça un peu. Alors maintenant, c'est au fond de ce tableau d'art. Alors quoi ? Nous voulons faire maintenant est lorsque vous cliquez dessus sur l'onglet de conception, voir où l'accès position fixe lors de la promenade. Allons-y et tapons sur ça et je vais te montrer à quoi ça ressemble. Um, une fois que nous aurons du contenu et comment cela restera fixé en bas comme vous faites défiler vers le bas. Donc, la prochaine chose que nous voulons faire est de donner à cela un fond coloré. Alors allons de l'avant et dio affaiblir faire un peu de noir cassé. Alors allons chercher les palettes de couleur bleue et allons en obtenir assez où je peux le voir en noir. Ça a l'air bien. On pourrait dio um, 012436 comme une couleur. Ou vous pouvez simplement utiliser votre meilleur jugement si vous le voulez. Bon, donc maintenant vous avez l'onglet sont allons-y. Mettez ces icônes en jeu quelqu'un pour attraper les trois et je vais les mettre en bas. Vous pouvez voir qu'ils sont sous le rectangle. C' est parce que quelle que soit la position fixe dans la Fig MMA va s'arranger sur le dessus. Vous pouvez voir le système de superposition ici. Il y a des étiquettes là-dessus. Nos ports ont fixé au sommet. Tout ce qui est fixé ira automatiquement au sommet de l'arrangement de superposition. Tout ce qui n'est pas corrigé passera sous ce titre de défilement ici, et c'est le reste du contenu. Donc, ce que nous voulons faire est que nous voulons fixer la position de ces icônes et vous les verrez sauter du système de superposition gauche ici jusqu'aux positions fixes de superposition ici. Nous allons donc appuyer sur le clic sur la position fixe lors du défilement et vous verrez qu'ils sont déplacés vers haut de la zone de défilement vers la zone fixe. Et nous allons de l'avant et les rendre encore plus affaiblir, Cliquez et faites-les glisser entre sont sur le dessus du rectangle, donc maintenant ils sont posés sur le dessus de celui-ci. Allons de l'avant et les rendre visuellement centrés ici. Cela semble bien en utilisant mes touches fléchées sur mon clavier, et maintenant ce que nous voulons, c'est que nous voulons créer un état actif. Alors, allons de l'avant et sélectionnez l'icône de profil ici et l'icône du panier d'achat et poussons ceux-ci en arrière et la transparence. Alors faisons environ 30% ici. Ça a l'air bien. Ils sont toujours visibles, mais cela donne à l'utilisateur et une indication de leur emplacement dans cet onglet, notre système. Donc vous pouvez voir ici. Nous créons cet écran ici où cela va rester fixe et la barre d'état haut restera fixe et vous allez faire défiler vers le bas et voir tout ce contenu. Bon, Cool. Alors, nous allons faire un petit zoom arrière. Vous pouvez supprimer le rectangle que nous avions ici. Maintenant que nous avons cet onglet, notre système en jeu et allons prendre la première boisson à thé Boba ici. Donc, c'est le thé Boba régulier. Commande, tu vois ? Copie-le. Il est déjà à dire le, um le avec et la hauteur pour vous. Il suffit d'aller de l'avant et de le coller et vous verrez qu'il n'est pas corrigé et se trouvait automatiquement sous la barre d'état, ce qui est bon. C' est ce qu'on veut. Prenons ce logo de thé Boba ici, Commande, voyez, à moins de le coller ici. Donc maintenant, vous voulez changer le texte de ce logo de thé Boba en un texte noir Travail dit Boba, Tout ce que vous avez à faire ici est juste triple clic, triple clic dedans, puis maintenez le décalage et sélectionnez les autres lettres. Maintenant, j'ai le mot puce Just Boba sélectionné où ? Ça dit, Phil, vas-y et change-toi. La couleur faisait noir. Nous pouvons également utiliser nos styles de couleurs que nous avons fabriqués parce que nous avons fait un noir ici et sélectionner le noir aussi. D' accord, ça a l'air bien. Donc la prochaine chose que nous voulions ajouter est le texte ici, nous avons eu une teinte régulière et douce de caramel et de chocolat, et nous avons eu le prix pour son puits, accord. Donc je vais prendre l'outil de texte ici. Je vais taper le mot normal et encore une fois, vous pouvez voir ma ligne Teoh par défaut Texas en bas ici sur le personnage. Ah, boîte de dialogue texte. Est-ce que cette pièce est ici qui arrive parfois. J' aime qu'il soit aligné au milieu et non au fond. C' est bien là. Allons de l'avant et faisons de cela une police de 16 points et prenons un espacement des lettres ici. C' est trop serré en ce moment. Vous pouvez voir sans lettres face à elle. Zalkind difficile à lire et vous verrez ce que je veux dire quand vous lui donnez un espacement des lettres . ce moment, c'est à moins 2%. Il est juste en dessous de la boîte dans laquelle vous pouvez changer la largeur et la hauteur de votre plaisir et nous allons le faire sauter. Donnons-lui 8% et vous pouvez juste voir comment juste un peu d'espacement rend juste un peu plus facile à lire sur l'alignement de paragraphe que nous n'avons pas défini à centré. Faisons un alignement à droite. Donc, si je clique sur la droite dans la zone de texte ici, vous pouvez voir que je l'ai aligné à droite. Et ça a l'air bien. OK, donc comme nous l'avons fait auparavant dans la dernière vidéo, créons un style de personnage pour cela. Maintenant, nous avons une police de 16 points. Alors allons de l'avant et créons un nouveau point 16. Tapez 16 points et c'est un régulier. Je crois que vous amusez-vous régulièrement afin que nous puissions réutiliser cela au fur et à mesure que nous traversons cela. D' accord, la prochaine chose que nous voulons faire est de taper la douce teinte de caramel et de chocolat . Donc à partir d'ici, je vais copier la même couche. Cette zone de texte ici encore, j'ai juste appuyé, um, um, conseils de décalage d' option qui maintient cet alignement vers la droite, ce qui est vraiment bon, je ne veux pas qu'il soit éteint comme ça. Je veux le garder directement aligné, et allons taper ceci. Et donc à ce stade, je voulais en fait ne pas être centré dans la boîte, mais vers le haut. Donc je vais faire l'alignement de la propriété texte ici aligné le haut. Voilà, tu y vas. Ça a l'air bien. Ok, donc on a une douce tente de caramel et de chocolat. Cool. droite. Alors ce point, qu'est-ce qui rend ce texte plus grand ? Alors nous allons le détacher du textile de caractère que nous avons ici. Donc 16, rendons ça probablement trop grand là-bas. Faisons en un 22. Ça devrait l'être. Ça devrait être bien. Je vais étirer ça. Donc, je veux trois lignes encore dehors semble bien là-bas. Et allons faire de ça un habitué, et ça a l'air bien. Cool. Donc maintenant qu'on a, hum, ça à 22 ans, on hum, ça à 22 ans, ona le texte du titre ici. Il est 16 et la description est taxée à 22. Faisons un textile pour cela aussi, afin que nous puissions le réutiliser maintenant. Donc maintenant, nous avons une combinaison de beaux textiles que nous pouvons utiliser. Nous avons le point 16, nous avons eu les 19 points que nous avons mis en place à partir des pages de connexion, et maintenant nous aurons le plus grand, qui sera un 22. Alors attrapons ça et faisons-en un point 22. Je suis juste en train de taper 22 points et vous verrez pourquoi faire ça, Um, quand on arrivera à la prochaine Siris of Boba Tea parce qu'on va taper les saveurs et les descriptions et ensuite on peut facilement les définir exactement comme ça. D' accord, ça a l'air bien. , Une chose que nous devions,c'était le prix. Quelqu' un pour copier la même fracture de type régulier. Je vais vous montrer pourquoi nous utilisons certains des styles de personnages et regarder vraiment utile. Voilà, je vais juste le taper. vais juste taper car je pense que c'était pour 99 et disons que je ne l'ai pas aligné ici ce texte, mais je l'ai bien aligné sur le paramètre de paragraphe. Si je veux créer un alignement entre ces trois éléments, il suffit de sélectionner les trois, et vous pouvez voir en haut ici j'ai ces icônes d'alignement. Donc voici l'alignement à gauche. C' était l'alignement centré mais je veux un bon alignement ici. Quelqu' un pour cliquer sur la droite et vous pouvez le voir. Il a aligné les trois sur le droit maintenant et le 4 99 je veux le faire. Pas le 22. Euh, mais voyons à quoi ça ressemble dans le 19 Bold. Ça a l'air bien. Ne le garde pas. Le 19 audacieux et la dernière chose que nous voulons utiliser. Je vais copier celui-là. Je vais créer l'annonce. Il suffit d'indiquer à l'utilisateur qu'ils peuvent ajouter ceci à leur panier et donnons-lui la couleur d'action ici et tandis que Ah, qui semble plutôt bon. D' accord, cool. Alors qu'est-ce qu'on va faire ensuite ? Allons-y et cousons ça pour qu'on puisse voir à quoi ça ressemble sur le prototype. Donc, si vous vous souvenez, nous avions le prototype de l'écran de connexion se connecter, le bouton sur l'écran de connexion se connectait à l'écran de chargement, et le bouton aller sur le clavier vous conduirait à l'écran de chargement. Et comme nous l'avons appris dans la dernière vidéo, l'écran de chargement a besoin d'orteil. Avoir un délai pour ne pas cliquer sur les éléments du tableau d'art. Pour créer un délai de planche d'art, vous devez sélectionner le tableau d'art lui-même. J' ai donc l'écran de chargement sélectionné. Je vais cliquer et faire glisser le bras prototype de la bouée, et vous pouvez voir maintenant qu'il est connecté à l'écran d'achat. Je vais changer le nom du shopping ou de l'écran de chargement ici en écran d'achat parce qu'on l' a copié. Et encore une fois, tout ce que j'ai fait était de sélectionner l'écran ici, ai obtenu le calque sur la gauche et juste triplé, cliqué sur le calque, et je pouvais taper dans le shopping. Ok, cool. Donc, nous voulons juste que cette interaction disparaisse ici après une certaine durée de temps. Donc, sur le prototype ici, quand je sélectionne le lien prototype que j'ai sur le robinet, continuons et faisons après le retard. Et trois secondes, c'est à peu près à droite ou 3000 millisecondes ici. Un instant devrait aller bien. Nous ne voulons pas d'animation intelligente ou quoi que ce soit, accord, puis allez-y et appuyez sur le bouton de lecture en haut. Et maintenant, vous pouviez voir le prototype. Ici, nous avons l'écran de chargement. Nous pouvons juste passer par la connexion, et vous pouvez voir quand j'ai tapé sur le bouton de connexion, l'écran de chargement apparaît pendant trois secondes et ensuite, oui, oui, nous avons l'écran d'achat avec notre première saveur au-dessus d'un t ici. Vous voyez, si je clique et fais glisser vers le haut, voir comment les choses qui sont fixés l'onglet sont ici et la barre d'état ici en haut, les éléments de paramètres, ces air tous fixes. C' est ce que cela signifie d'avoir un élément fixe est que ces choses ne vont pas défiler pendant que tous les autres contenus défilent. Bon, alors allons ajouter le reste des saveurs de thé Boba que nous avions ici. Donc vous pouvez voir ici. J' ai eu la saveur suivante ici et je vais de l'avant et le rythme juste en place, juste comme ça. saveur suivante ici et je vais de l'avant et le rythme juste en place, Et nous voulons un peu d'espacement d'un pixel entre les deux. Donc ça ressemble entre les deux photos comme ça, OK. Et puis ce que nous voulons faire ici est probablement mieux juste de copier ce texte ici, et vous pouvez le garder aligné, donc je vais tenir option. Je vais cliquer et glisser vers le bas et encore, je vais tenir le décalage. Donc je ne fais pas ça. Donc, vous pouvez voir que je déplace ma souris en maintenez le décalage. Je ne peux pas bouger ma souris. Il maintient toutes ces informations alignées ici. Je l'ai juste espacé à mi-chemin jusqu'à votre image. Et je vais aussi aller objecter et amener à l'avant, elle peut voir d'accord. Et sur cette saveur, ce que nous avions ici, c'est que nous avons un café aromatisé avec une infusion froide de qualité supérieure avec du thé noir, et c'est pour 99. Revenons dans notre onglet d'apprentissage ici. Et changeons ça ici. Et voyons ici ce qu'il a dit Premium infusion froide avec du thé noir. Tapez ça. Très bien, nous sommes l'espacement là-bas, et je veux déposer le avec à la troisième ligne et avoir l'espacement là-bas. Cool. On s'en remet assez vite. C' est bien. Ok, donc vous pouvez voir que ces deux éléments s' adaptent. Tout de l'onglet est en place. Allons prendre le prochain aromatisé ici, qui est la saveur de thé macho. Et je commande juste voir, copié et commande v coller. Et je vais aller de l'avant et le mettre dans la bonne position ici. Et je vais copier le même texte ici sur l'option. Cliquez et faites glisser. Maintenez le décalage. Donc encore une fois, en maintenant les options, je reçois la double flèche, sélectionnez tous ces éléments. Et si je le veux, je peux les regrouper pour les rendre faciles à partir d'une prochaine sélection. Donc, si je fais juste une sélection de groupe ici et je maintiens l'option et cliquez et faites glisser Non, je les ai copiés. Et encore une fois, je veux les amener à l'avant. Je fais un clic droit sur eux, amenez à l'avant. Vous pouvez également utiliser l'option de commande flèches haut et bas pour les touches rapides pour afficher ces dernières sur les calques. D' accord. Et allons-y et appelons ça macho. Euh, et le texte dessus est un brassage à froid haut de gamme. C' était le, euh, le café aromatisé. Alors allons de l'avant et juste changer ce texte pour avoir une description macho t. Appelons ça du mata premium et du thé noir. Ça devrait marcher. Ok, cool. Donc la prochaine chose que nous voulons ajouter est la saveur finale, que vous pouvez voir ici sur, euh, le prototype final ici. Ici, il y avait le texte ici. Doux macho japonais t Revenons en arrière et ajoutons ce vrai rapide. Donc, bonbons japonais beaucoup, euh, T qui est ma boisson préférée, au fait, hors de tout ça, accord. Et le dernier est celui de Chai Tia. Eh bien, euh, alors allons prendre la photo de Chai ici. Juste celle avec un peu plus. C' est la même chose que le t régulier. Il a juste un peu plus d'une couleur à elle. Allez-y et sélectionnez. Tu peux le voir quand je colle. Si je n'ai pas mon tableau d'art sélectionné, j'aime juste le rythme. Ça ne va pas évoluer dans le tableau d'art. Vous pouvez ensuite déplacer le tableau d'art. Ça ne va pas avec ça. Alors rappelez-vous toujours, Teoh a choisi le tableau d'art et ensuite coller quand vous êtes dans le tableau d'art, je vais déplacer ça vers le bas. Je garde le quart quand je bouge, donc je ne bouge pas les proportions. Il a déjà collé à droite dans l'exact avec que je voulais plein avec quand je l'ai déplacé vers le bas. Comme ça. Ok, à ce stade, allons-y. Et, euh, copie. Je vais bouger ça un peu. Copions ce texte ici et encore. Je vais faire un clic droit et aller à apporter l'option avant ou de commande de haut en bas je peux monter pour porter à l'avant et vers le bas pour ramener à l'arrière afin que vous puissiez voir cela Et c'est le sh i t. Donc, la description pour cela est faite avec du thé Golden Chai. Revenons à notre apprentissage, Paige, et je vais taper ça fait avec Golden Chuy T. Je crois que c'était aussi ça fait 5 99 Paige, et je vais taper ça fait avec Golden Chuy T. Je crois que c'était aussi ça fait 5 99. Maintenant, c'est bon. Ok, Cool. Maintenant, nous avons ces quatre saveurs dans Allons de l'avant et revenons à nos prototypes. Vous pouvez cliquer sur le bouton de lecture, ou vous pouvez simplement faire le robinet. Si vous avez juste ici, vous pouvez également appuyer sur. Hum, l'onglet est là en haut. Et maintenant, vous pouvez voir à quoi il ressemble de défiler afin que vous puissiez faire défiler ces saveurs. Vous pouvez voir que la ligne entre le café et la Mata n'est pas là. Alors revenons en arrière et ajoutons ça. Mais ça a l'air plutôt bien. Retournons en arrière. Hum, je vais choisir une chose que je fais, c'est choisir en dehors du tableau d'art. Démarrez la flèche de la souris vers la droite et cliquez et faites glisser sur les éléments que vous souhaitez sélectionner dans le tableau d'art lui-même. Donc, nous avons juste ces saveurs juste le chai et le macho Maintenant sélectionné une flèche na minha vers bas à vous pouvez voir que j'ai créé cette petite ligne là pour le macho t. Ok, donc encore beaucoup de façons d'arriver à mon prototype, je peux appuyez sur présente ou je peux cliquer sur l'onglet en haut. Revenons au sommet, et il y a sur mes saveurs. Ok, cool. Maintenant que nous avons le tableau d'art ici, vous pouvez voir qu'on a fait assez long. Revenons en arrière et raccourcissons cela maintenant que nous avons tout le contenu en jeu. Ce que je vais faire, c'est ajouter un autre guide non seulement au bas de mon contenu, mais un peu plus loin. Habituellement veulent donner un peu d'espace pour la barre d'onglets afin que toutes les informations de thé chai va au-dessus de la barre d'onglets afin que vous puissiez voir à propos il ya bien. Juste un double chèque, je vais copier ça, nab notre et juste voir. Oui. On pourrait probablement déplacer ce guide un peu ici. Nous le voulons juste où le thé chai sera assis à l'extrémité très basse de l'onglet ou le balayage . Euh, eh bien, asseyez-vous au-dessus de cette languette. Barre que cet onglet sont ne cachera pas le contenu que nous avons ici. Ok, donc c'est une sorte de MMA de figue qui se passe ici. C' est un peu un insecte. Donc si je veux étirer cette planche d'art avec du contenu qui y est fixé, vous pouvez voir ce qui se passe. Donc si je veux étirer cette planche d'art avec du contenu qui y est fixé, Voyez comment le contenu corrigé commence à s'écraser. Regardez ce qui est arrivé à la Boba et à la barre d'état. C' est une chose qui arrive avec les chiffres. Je n'ai pas tout à fait compris ça. Donc, ce que nous avons tendance à faire est juste de cliquer et de faire glisser et de sélectionner tous les éléments que vous avez. Et maintenant art board, faites une commande. Tu vois ? Il suffit de le copier, puis de le supprimer pour l'instant. Ensuite, prenez la planche d'art et raccourcissez-la à ce guide que nous avons fait ici. Et puis commande V. Eh bien, remonter en place. Voilà, tu y vas. Je te laisse une seconde pour faire ça. Ok, donc à ce stade, qu'est-ce qui revient à notre prototype et on peut vérifier à quoi ça ressemble. Donc vous pouvez voir ici que nous avons le habitué du café, le macho. Et si nous n'avions pas ajouté cet espace supplémentaire dans le bas, l'enfant se retrouverait au bas balayage ressemblant à ceci. Ou pire, il cacherait ce bouton d'ajout. Mais puisque nous avons ajouté cet espace supplémentaire, vous pouvez voir où va juste en haut de cette barre de navigation. Donc, il semble bon, Nikkan Second, glisser vers le haut et comprendre ce qui vous donne cette transition de balayage. Donc, il agit comme si je balayais avec mon doigt. Et si vous aviez, hum, si vous téléchargez l'application miroir Sigma sur votre téléphone, vous pouvez voir pourquoi cela fait sentir comme une véritable application sur votre appareil mobile. D' accord, eh bien, ça a l'air bien. , Donc la prochaine chose qu'on veut faire ici,c'est que si j'appuie n'importe où, pas seulement sur le bouton Ajouter, mais n'importe où sur l'espace du thé au lait, ça va ouvrir le motile de sélection pour le lait régulier. Donc, c'est cet écran ici ressemble à ceci. Alors allons de l'avant et construisons cet écran ici, et nous allons travailler sur le menu déroulant aussi sur la droite ici. Alors ils retournent à l'apprentissage. Paige, ça va être une taille d'écran normale. Copions donc l'écran de chargement que nous avions ici. Donc encore une fois, je viens de tenir l'option. Attrapez ce tableau d'art, maintenez la touche Maj et faites-la glisser vers la droite. Que je vais cliquer et faire glisser à partir de la droite pour sélectionner les éléments dans le tableau d'art. Et maintenant je vais supprimer ça quand j'ai appuyé sur Elite. Ok, je veux réutiliser cette photo. Alors, allons de l'avant et appuyez sur la commande, tu vois ? Et je vais commander V cette photo ici en haut, et vous verrez ici où si je bouge le bas comme, disons, je veux marquer des trucs comme ça, et mélanger la perspective de la photo, Hum, il ne tient pas le rapport d'aspect et il interprète la photo comme ça. Et ça n'a vraiment pas l'air bon pour les photos. Donc, ce que nous voulons faire, c'est que vous voulez aller à l'image ici. Cliquez dessus et vous pouvez voir où il est dit Recadrer l'image. Allons de l'avant et faisons un qui dit Fit image ici. En fait, qu'est-ce qui va remplir ? Voilà, tu y vas. Donc encore une fois, nous sommes passés de culture à sentir et comment je suis arrivé ici. Il a juste cliqué sur l'image ? Phil est venu là où il a été recadré et j'ai mis le sentiment, et maintenant vous pouvez voir quand je le déplace, ça ne me donne pas. Cela ne défie pas la perspective de cette image. Je veux déplacer l'image réelle à l'intérieur de ceci vers le haut. Donc, si je clique à nouveau sur l'image et que je double-clique, donc il y a un clic. Mais si je double-clique, j'arrive à la culture ici en haut, supprimer la culture et vous pouvez le voir. Maintenant, je peux saisir l'image que j'ai recadrée et je peux la déplacer un peu vers le haut. Et à peu près il devrait être très bien. Peut-être lui donner un peu plus d'espace. Donc encore une fois, je suis pré me remettre à recadrer afin que je puisse revenir maintenant pour remplir et retourner à recadrer à nouveau, puis juste déplacer cela de quelques façons. Tu peux le faire. Ok, à ce stade, , on va aller de l'avant et on s'amuse un peu plus. On va faire la section prototype pour ça d'abord, mais je dois faire un bouton de fermeture en haut à gauche. Donc, quand vous appuyez dessus, , vous pouvez fermer l'écran ainsi et revenir à l'écran aromatisé avec un écran d'achat . Donc ce que je vais faire, c'est que je vais prendre un rectangle ici que vous pouvez voir avoir un rectangle et qu'ils cliquent et font glisser Va tenir le décalage ouvert, pas de décalage de maintien, juste cliquer et glisser et je vais arrondir les bords. Donc ici, j'ai le rayon du coin. Appuyez simplement sur 100. C' est bon. Et voyez comment il a complété cette sélection. Comme il s'agit d'un élément réel, nous voulons que ce soit la couleur actionnable. Alors allons prendre notre action primaire Color ce rose et je vais copier cette commande. Tu vois, je vais cliquer dessus. Je vais cliquer sur le tableau d'art et je vais commander V, qui est une pâte en place. Je vais sélectionner celui que je viens de coller, et je vais faire pivoter à 90 degrés et j'ai un bouton plus. Sonam va sélectionner les deux et je vais faire un clic droit quand un groupe, cette sélection ou vous pouvez aussi commander G. Je vais vous donner une seconde pour le faire. Et maintenant que j'ai ce bouton groupé ou ce bouton plus disponible, je vais faire pivoter le bouton plus. Et maintenant j'ai le X que je veux. Et comme tout ce que nous utilisons, c'est que nous créons qui va être réutilisé. Allons en faire un composant. Quelqu' un de la réduction juste un peu. Ça a l'air bien. Je vais le copier. Je vais retourner à notre bibliothèque de composants ici, et je vais accélérer ça ici, déplacer ça un peu et je vais créer le composant. Alors je me fais coller ici. Le petit haut, um, icône de diamant créer composant. Et je vais nommer ce proche et juste mettre une taxe proche X comme ça. Impressionnant. Revenons maintenant à notre page d'apprentissage ici et revenons à l'actif de couche. Ah, onglet retardateur ici en haut. Allons dans l'onglet asset et prenons le composant X que nous venons de créer. Et mettons ça à la place de ce X maintenant. Ainsi, lorsque nous l'utilisons, nous pouvons le changer assez facilement à partir de la même zone à partir du composant maître. Et ça change sur tous les tableaux d'art. Ok, alors on s'amuse. Allons de l'avant et prototypographionscette prototypographions transition ici dans notre prototype. Il est donc cliquer sur la page d'achat ici. Allons à l'onglet prototype ici et sélectionnez juste l'image de la probité régulière. Allons de l'avant et connectez-le à l'écran à droite. En fait, étiquetons cet écran ici. C' est dit écran de chargement, parce que nous l'avons copié. Appelons celui-ci l'écran de sélection. Bon, maintenant nous avons cet écran de sélection. Donc, encore une fois, nous avons le shopping. Ah, souche. Ici, nous avons sélectionné le thé Boba régulier. Nous cliquons sur le petit connecteur prototype gooey sur l'écran de sélection, et maintenant nous avons l'interaction sur le robinet tout simplement bon. Et il est allé emménager. Parfois, les années peuvent juste dire instantanée comme ça. , Ce qu'on veut faire,c'est qu'on veut créer un scénario, donc je vais te montrer à quoi ça ressemble. On est juste instantané pour le moment et on s'affaiblit. Faites le X ici, retournez le X dans l'écran de sélection à l'écran d'achat, et nous pourrions simplement le faire instantanément. Ok, donc si je tape n'importe où où la photo était, vous pouvez voir qu'elle passe instantanément à cet écran de sélection. Et si je tape sur le X que l'instance passe instantanément à l'écran d'achat. On ne veut pas ça. Nous voulons une transition. Nous voulons que cet écran glisse vers le haut et que dans le X glisse vers le bas. Donc, ce que nous devons faire est de sélectionner le prototype ah. Donc ah, la ligne gooey qu'on vient de faire. C' était du thé Boba ici et où il est dit instantané. On veut que ça bouge. Donc ce que ça veut dire, c'est cet écran ici, ce nouvel écran va emménager, et ensuite vous définissez comment il va se déplacer. Donc, nous avons la diapositive à gauche. Vous pouvez voir un exemple de ça va venir de la diapositive droite à gauche. On a la diapositive qui va venir de la droite. Nous avons la glissière vers le bas pour venir de haut en bas, et nous avons celle que nous voulons faire, qui est la glissière vers le haut. Donc, cet écran, cet écran de sélection ici, va glisser vers le haut au-dessus de votre écran d'achat. Donc maintenant, nous avons ça pour nous assurer que vous avez ceci sélectionné sur MoveOn et les MoveOn et les spécifications pour comment ça va se déplacer. Monté en place. Allons voir le prototype maintenant. Donc, si je tape n'importe où où le thé au lait ordinaire est que vous pouvez voir comment cela glisse vers le haut et je pense que X est toujours sur instantané. Donc maintenant, nous voulons que cet orteil de l'écran aussi glisser vers le bas en appuyant sur le X. C'est beaucoup de fois quand vous faites cela, je l'ai vu est parfois que vous aurez déménagé, sélectionné, et puis vous aurez ces spécifications définies sur Descendez et ça fait ressembler à la chose que vous voulez. Mais laissez-moi vous montrer ce qui se passe ici pour voir comment il a apporté l'autre écran sur cette transition avec elle. Laisse-moi recommencer. Vous cliquez sur le thé Boba régulier ici, il glisse vers le haut. C' est ce qu'on voulait. C' est une bonne transition. Mais quand j'ai appuyé sur le X. Vous pouvez voir l'écran vient du haut, l'écran en dessous à l'écran d'achat, et il glisse à nouveau vers le bas. On ne veut pas ça. Nous voulons que cela ressemble à un glissement vers le haut et puis glisse à nouveau vers le bas. Donc, cela est causé parce que nous avons la sélection ici sur l'animation définie comme déménagement quand nous voulions vraiment être un déménagement. C' est comme, sortez du chemin. Donc encore une fois, nous avons la sélection régulière de thé au lait à venir comme disant au prototype de déplacer cet écran vers le haut, de se déplacer et ensuite nous avons le bouton X étant informé de sortir et descendre pour exposer cet écran. L' écran d'achat ici. Alors allons de l'avant et regardons ce robinet latéral sur la photo de sélection de thé au lait ordinaire glisser vers le haut. Et maintenant que nous avons la diapositive pour déplacer le déménagement, vous verrez qu'il bouge et se déplace vers le bas. Il n'apporte pas l'autre écran avec, alors emménagez. C' est debout et déménager. Descendre cool. C' est un modèle mobile très commun, un modèle d'interaction. Est-ce que les choses glissent vers le haut avec un X, puis glissent vers le bas avec le X aussi bien. Quand il arrive de gauche à droite, c'est généralement un bouton de retour. Et nous aurons des opportunités dans l'expérience du panier de prototyper ce à quoi ça ressemble avec le bouton de retour. D' accord, cool. Donc, à ce stade, euh, nous voulons ajouter des étiquettes que vous êtes sur le thé au lait ordinaire, quelqu'un pour copier ce texte régulier ici. Je vais le coller ici. Et je crois qu'on a dit que c'était 16 points. Allons en faire un point 22. Comme les habitués là-bas. Ça a l'air bien. Je vais copier ça et appeler ça le lait normal T. et je vais faire ça une de mes pauses. Détachez ceci et faites-le juste audacieux. Ça a l'air bien. Genre de centre. C' est ici. Si vous voulez avoir un vrai plaisir avec elle, nous allons juste faire sauter le thé au lait tout un tas de sorte que vous pouvez voir que je l'ai fait maintenant 32 et j' ai le régulier qui a l'air qui a l'air bon. Ça va arriver là. Une chose que je dois ajouter, c'est que vous pouvez voir le mot thé au lait. Il a beaucoup de laisser la réunion, euh, euh, espacement des paragraphes. Donc, l'espace entre le mot lait et le mot T cet espace ici qui est appelé laisser ou hauteur de ligne ou l'espacement de paragraphe. Hum, la raison qui s'appelle « laisser » était de retour à l'époque où ils faisaient de la composition. Ils devaient le faire en métal, et ils auraient une machine de composition où ils découperaient des lettres individuelles . Et ensuite, ils arrangeraient ces lettres pour faire des mots. Et ils mettraient des morceaux de plomb entre chaque mot ici pour faire la location. C' est pourquoi on l'appelait laisser, parce que vous aviez différentes tailles de points de métal. Donc, dans le monde des langages CSS, c'est ce qu'on appelle la hauteur de ligne ici. Alors allons de l'avant et faisons en sorte que la hauteur de ligne soit plus petite. Je vais juste dire 50 comme point de départ. Et maintenant, allons-y. Donc, euh ouais, 38 c'est parfait. Donc maintenant j'ai cet ensemble à 42 de la taille de la police et 38 pour la hauteur de la ligne et 8% pour l'espacement des caractères. D' accord, ça a l'air bien. Nous avons créé un peu de hiérarchie ici avec la police régulière et le thé au lait . Depuis que nous avons créé un 42 gras. Je ne suis pas sûr si nous allons réellement utiliser la police aussi grande à l'avenir, mais juste au cas où, allons-y mais juste au cas où, et faisons-le. Faisons un, euh, euh, un style de personnage de 42 points ou un textile. Donc maintenant, nous avons une assez bonne gamme de 40 42. Je dois renommer ça. Je l'ai tapé. 43. C' est 42. Ok, donc on a 40 à 20 à 19 et 16 c'est plutôt bon jusqu'à présent. Obtenez toujours une gamme de styles de personnages qui affaiblissent et les textiles affaiblissent nous pouvons tirer de. D' accord. La prochaine chose à faire, c'est qu'on va créer ces petits 5. Concevoir l'expérience de paiement: Bon, bienvenue dans la prochaine série de vidéos. Donc, dans cette vidéo, on va couvrir le flux de travail de départ. Nous venons donc de concevoir et de prototyper les flux de travail de connexion et d'inscription. Nous avons fait le flux de travail d'achat, et maintenant nous allons passer par le flux de commande, euh, et pour voir à quoi ça ressemble, nous allons passer par le prototype ici. Donc nous avons déjà fait ça. Nous avons créé l'inscription dans la connexion. Vous pouvez insérer votre email sur votre mot de passe. Vous vous êtes connecté au chargement de l'application. Tu as tout le thé boba. C' est ce que nous avons fait dans la dernière vidéo que nous avons créé sur le thé Boba, um, saveurs ici que vous pouvez sélectionner si vous appuyez sur le thé au lait régulier ici, vous pouvez voir que nous avons fait le lait le doux régulier et la glace moyenne déroulante vers le bas , les boutons de sélection en haut. Et nous avons aussi prototype le X qui ferme ça. Ouvrez-le. Nous avons fait une sélection déroulante mobile, mais vous voyez ici si vous sélectionnez semi-sucré, il change le semi-sucré. Vous pouvez sélectionner la grande tapioca vous pouvez faire l'annonce et ensuite nous allons sur cette vidéo. Nous allons construire et concevoir le flux de travail de vérification. Donc, si je tape sur l'icône d'achat, je vis maintenant l'expérience de retrait où il me montre l'application me montre ma sélection, qui était ? J' ai pris mon thé au lait. Ma quantité était une que je pouvais éditer. Retirez ces. Si je veux entendre, je peux fermer ça. Retourne. Et si je suis prêt après avoir vu mes totaux, les frais de livraison, les taxes, je pourrais passer à la suivante. Vous pouvez voir que cet écran glisse de gauche à droite et que le dos glisse en arrière . Eh bien, nous allons faire cette transition prototype aussi. Vous pouvez mettre dans votre adresse ces composants d'air que nous avons déjà fait, donc il devrait être assez simple et rapide de faire ces presse Andone aller à la prochaine et encore , Si je veux revenir en arrière, je peux revenir tout le chemin à le début. Je peux fermer. C' est un modèle d'interaction très commun que nous utilisons dans les appareils mobiles. Obtenez de glisser vers le haut avec le X. Maintenant, je peux aller dans une série de boutons arrière, saisir mon adresse. Je peux mettre dans ma presse d'informations de paiement fait. Je vois le total que je paie. C' est la confirmation du paiement. Et puis je peux voir mon thé Boba m'être livré avec une série d'écrans qui ont l' effet de transition de durée temporelle. effet de transition de durée temporelle. Maintenant, vous pouvez voir l'écran final. Mon thé Boba est arrivé et j'appuie sur OK, ai obtenu. Et je suis de retour à l'écran, alors nous allons travailler sur ça dans cette vidéo. Revenons à notre fichier ah figment que nous avons créé ici. Tu peux aller dans l'apprentissage Paige que j'ai ici. Vous voulez commencer à prototyper ce à quoi il ressemble lorsque quelqu'un clique ou que l'utilisateur tape dessus. Consultez Icahn ici sur la barre d'onglets. Alors allons prendre dès le début ici. Allons saisir cet écran de chargement ici, Commande voir et venir ici. Commande V. Colle-la et déplacons-la en position. Ici, appelons ce chèque. Encore une fois, il suffit de cliquer sur le tableau d'art, cliquer sur le calque à gauche et de taper, vérifier et d'aller de l'avant et de supprimer tout ce que nous avons là. Une des choses dont on aura besoin pour cet écran, c'est qu'on va avoir besoin du X alors prenons ce X et collez-le. Qu' est-ce qui a été utilisé pour le prototype ? Assurez-vous qu'aucun lien prototype préexistant n'est déjà défini sur lui . Et c'est le cas. Allons-y et attrapons ça. suffit de le faire glisser et de le laisser aller. Maintenant que X ne fait rien sur le prototype et sur le prototype final de la photo ici , vous pouvez voir ce que nous cherchons la conception des orteils ici est que nous voulons avoir le titre de départ, le thé au lait régulier avec les sélections pré-définies, la quantité avec la possibilité d'ajouter plus d'un. Ah, et il a enlevé les boutons. Et puis nous voulons mettre ces totaux ici que nous avons. Alors allons de l'avant et concevons. Cette section ici va probablement copier et coller les um, et le rendre facile. Mais commençons par le check out, um, onglet en haut. Alors prenons ce combat régulier ici nous permet de copier et de coller ici. Faisons le blanc. Centrez-le et nous le mettrons ici. Appelez ce chèque d'accord, et c'était déjà sur 16 points. style de couleur sont des textiles. C' est bien. Réutilisez-le. Allons de l'avant et centrons ça un peu. Ça a l'air bien là, accord, et allons de l'avant et copions ça. Maintenant, modifions l'alignement d'un paragraphe centré. Aligner l'alignement sur une gauche, Une ligne qui a l'air bien. Et appelons ça le thé au lait ordinaire. Nous avons 16 points, et nous avons également fait un point en gras de 14 points. Allons en faire un point de 14 points. gras. Ça a l'air bien. D' accord. Et je vais copier ça. Je vais maintenir l'option Cliquer et faire glisser et maintenir la touche Maj. L' adhésion empêche les choses de déménager. Alignement comme ça. Je tiens le quart de travail. Je ne peux plus faire ça. Et allons de l'avant et voyons quand j'étire la hauteur de cette zone de texte, il était par défaut un alignement du milieu pour le texte. Faisons l'alignement supérieur qui déplace juste vers le haut de la zone de texte qui semble bon et les sélections que nous avions pour ce lait régulier pour vous comme nous avions du lait, nous avons eu un demi-sucré, et nous avons aussi eu le pour revenir ici et jeter un oeil glace moyenne. Et puis nous avons aussi eu la grande tapioca. Très bien, rendons ça un peu plus gros. Allons prendre notre point de 19. Ouais, ça a l'air bien. Hum, qu'est-ce qui fait ? Lumière 19 points ? Oui. Ça a l'air bien là-bas. Et puis faisons cela la couleur grise plus claire, le gris froid que nous avons fait. D' accord, ça a l'air bien. D' accord, ce point. Je vais utiliser la commande de touche rapide sont, ou aller à l'outil de forme ici et aller au rectangle. Je vais maintenir Shift, cliquer et faire glisser et faire une boîte rectangle ici au centre. Un peu comme ça. On peut faire ça environ 60 par 60 ici. Et faisons cela aussi le gris frais. Alors sélectionnez le gris frais que nous avons fait plus tôt. , Tout ce que tu dois faire,c'est cliquer sur les quatre points de sport en tant que Phil. Voici tous nos styles de couleurs. Cool, gris. Et ramenons l'opacité de ceci à environ 30. Ça a l'air bien. Ok, allons de l'avant et faisons une zone de texte de la même taille que ce rectangle. Ici, tapez un. Faisons ça, hum, blanc. Vous pouvez sélectionner nos styles de couleurs pré-existants pour le rendre blanc. Et voici un cas où je veux qu'il soit, ah, ah, dans l'alignement du paragraphe central, mais aussi au milieu de la zone de texte. Et allons de l'avant et faisons cela le 42 point que je vais passer à un 22. On dirait que, oui, allons faire ce 42 point. Je vais aussi copier le thé au lait ordinaire et le déplacer vers la droite et il suffit de taper Q 2. Pourquoi ? Pour la quantité. Et allez-y et faites la zone de texte la même chose avec. Et voilà. Vous pouvez voir la quantité là-bas, non ? La prochaine chose, c'est toi. Félicitations. Le, um le X que nous avons fait ici cliquez et copiez-le. Vous copiez simplement le composant et revenons en arrière et inversons cela. Alors retournez en arrière et faites-en un normal, euh, pas 90 degrés. Et vous pouvez voir maintenant nous avons le symbole plus. Je vais le copier ici et en faire le symbole moins. Puisque vous n'avez pas encore cliqué sur quoi que ce soit, l'utilisateur Ceci est désactivé. Alors allons faire cela la couleur grise fraîche et retirer cela environ 20% de capacité, peut-être comme 40% de capacité. Donc, cela permettrait si vous deviez ajouter plus d'un. Vous pouvez aller jusqu'à 23 ans puis y retourner. Teoh. 2 à 1. Ok, et puis copions ce thé au lait ordinaire ici et faisons un bouton pour l'édition. Et puisque c'est à base de plantes du robinet, c'est quelque chose que vous pouvez engager sur le produit. Faisons-en la couleur d'action principale. Vous pouvez le voir ici, et je veux aussi en faire un pour le retrait et faire un peu d'espacement. Voici notre petite hiérarchie visuelle, hum, hum,ici. Faisons une ligne entre ces deux-là. Donc j'ai juste attrapé l'outil de ligne. Vous pouvez également la clé rapide qui est L. Et nous allons aussi faire ce gris frais et le tonifier à environ 20% de capacité. Oh, peut-être 30% d'opacité là-bas, non ? Assez simple. Consultez la page que nous sommes en train de construire. Allons nous amuser et faire le prototype ici. Donc, si vous sélectionnez l'un et le cercle et l'icône de la voiture shopping et faites une commande G, qui est groupe ou vous pouvez faire un clic droit et aller à la sélection de groupe. Allons à l'onglet prototype ici. Maintenant, nous allons faire glisser ce petit bras prototype de produit gooey à l'écran de vérification ici à partir de l'expérience d'achat que nous avons, nous voulions être sur le robinet. On veut qu'il se déplace ici. Emménager et nous voulions venir du bas. Quelques mouvements vers le haut. Et maintenant, pour le X. Allons de l'avant et ramenons ça à l'écran d'achat ici, et nous voulons que ça soit déplacé et déplacé ici. Donc c'est bon de notre prototype et voyons à quoi ça ressemble ici. Mais une pression, le bouton de lecture ou le bouton présent, vous avez peut-être déjà l'onglet ouvert. Va juste marcher sur cet onglet et tu peux voir ici. Quand j'ai appuyé sur l'icône d'achat, il glisse vers le haut, l'écran glisse vers le haut, et quand j'appuie sur le X, il glisse vers le bas Très agréable. Si vous voulez ajouter d'autres écrans pour le faire afficher à quoi il ressemble si vous avez ajouté plus numéros ici, appuyez sur pour qu'il supprime. N' hésitez pas à le faire. Je vais juste, je choisis d'habitude de ne pas faire ça, euh, pour ça juste plus à propos de t'enseigner l'outil. Mais tu peux aller le faire à ton temps libre si tu le voulais. Um, ce point, nous allons juste copier. Um, cette quantité de texte du prototype final, vous pouvez juste le sélectionner. Copiez-le Maintenant que vous savez comment utiliser l'outil de texte. Um, vous transmettez Construisez ça si vous le voulez, mais continuons à le copier. Accélérez un peu les choses. Il suffit de le coller. N' oubliez pas de sélectionner le tableau d'art. Si vous venez de sélectionner dans notre tableau, voir comment il coller ? Hum, pas en place. Mais si vous sélectionnez le tableau d'art dans le haut ici et appuyez sur commande v il coller en place à partir de l'endroit où vous l'avez copié. Et puis nous avons fait une ligne ici pour cette sélection déroulante. Attrapons cette ligne. Et nous allons accélérer cela ici et donner à cela une section au cas où vous aviez plus d'un droit À ce stade, ce que nous pouvons faire est que vous voulez avoir une annonce ou un bouton d'annulation qu'ils peuvent utiliser Ercan ou prochain bouton et annuler que l'utilisateur peut s'engager à n'importe quel moment. Donc, si tu veux ? Il suffit d'annuler toutes les choses que vous traversez dans l'expérience du panier d'achat. Vous pouvez l'avoir et nous aurons les boutons suivants ici qui nous aideront à passer à la page suivante. Donc ce que je vais faire, c'est ajouter le bouton d'ajout ici. Je vais le rendre moins large. Je vais le copier ici. Et je pense qu'ils sont en fait l'original avec ça pourrait être correct. Allons probablement sur le avec ici environ 1 45 de large. Maintenant, je vais le copier. Ça a l'air juste. D' accord. Et ce que je vais faire ici, c'est que je vais détacher ce composant, donc je vais l'enlever comme un composant et le ramener à un élément de conception. Alors ce que tu fais, c'est que tu as raison ? Cliquez sur le bouton. Eh bien, pour sélectionner le bouton d'abord, puis à droite, cliquez dessus et appuyez sur détacher instance. Et vous pouvez voir qu'il est passé d'un Ah violet, sélection de zone de limite à une sélection de zone de limite bleue indiquant qu'il n'est plus un choix d'un composant. Maintenant, je vais changer le texte sur ce bouton ici à suivant, et je vais changer le texte ici pour être annulé. Et ce que je vais faire ici, c'est que je vais prendre cette pièce arrière et j'ajouterai que je vais enlever le champ. Alors voyez ce moins ici à droite, mais enlevez le champ. Je veux ajouter une autre sensation. J' appuie juste sur le plus à nouveau, mais je veux ajouter un coup, et je veux faire le coup. La couleur primaire que nous avions pour que vous puissiez voir ici a le but que je vais les déplacer un peu vers la gauche, les centrer vers le haut. Et maintenant, nous avons un bouton primaire et un bouton secondaire. Alors allons faire ce bouton secondaire. Ah, composant pour qu'on puisse le réutiliser. Encore une fois, j'ai attrapé le bouton d'annulation. Je vais à la page Bibliothèque de composants ici à gauche, et je la colle dans cette page. Je vais tout sélectionner. Allez à l'icône de diamant ici, le haut créer des composants. Et là où cela dit, bouton primaire, appelons-le secondaire. Elle a été changée. Les ont été annulés à un discours texte. Et Eric, revenons à notre apprentissage Paige ici, et allons placer ce composant qui annule le composant bouton dans ces pages. J' ai donc appuyé sur l'onglet des actifs en haut, laissé ici par les couches. Je vois le bouton secondaire. Ici, je clique et fais glisser dans le prototype. Collez le juste au-dessus de ce bouton d'annulation. Supprimez le bouton Annuler. J' ai sélectionné le tableau d'art ici à la première place de presse. J' espère qu'ils n'ont pas payé quelque part. Une seconde. Donc, nous avons le bouton d'annulation. Je vais le copier. Mon collé dans le tableau d'art. Habituellement, si vous n'avez pas à l'origine ce bouton dans le tableau d'art lui-même, il ne paiera pas un endroit comme ça s'est passé auparavant. Laisse-moi aller de l'avant et bouger ça. Bien. Maintenant, c'est vrai. En haut du bouton d'annulation, je vais commander. Tu vois ? Et maintenant, je vais sélectionner ce bouton d'annulation, qui n'est pas le composant et supprimé. Et maintenant, je vais sélectionner le tableau d'art, coller en place, puis changer que le texte de ce composant en faisant maintenant une instance de ce composant et appelant. Annuler. Bon, alors allons de l'avant et faisons revenir le bouton d'annulation à l'écran d'achat d'origine ici qui n'a pas la notification pour le panier, et nous voulions toujours la même interaction ici. Toe glisser cette page vers le bas pour que vous puissiez voir quand je clique dessus, il glisse vers le bas. Nous voulons que le bouton suivant passe à la prochaine série de pages ici. Donc, si vous revenez à l'onglet des calques ici et que nous regardons le prototype final, la prochaine série de pages ici est de configurer mon adresse. Donc la livraison de la Boba, hum, finira à mon adresse que j'ai saisie ici. Donc on va avoir la flèche arrière ici, alors revenons à notre apprentissage. Paige, prenons ce tableau d'art ici. Qu' est-ce que l'option de maintien Cliquez et faites glisser et maintenez la touche Maj et copions cette page. À ce stade, on va attraper l'icône en forme de flèche. Donc, si vous allez aux produits de conception que j'ai créé ici et saisir cette icône flèche Appuyez sur Commande, voir, et nous allons garder le X ici pour l'instant, juste pour le positionnement de la flèche cliquez sur l'écran de vérification que nous sommes ici, le nouveau que nous avons copié. Allons de l'avant et nommons cette adresse. J' ai donc cliqué sur le tableau d'art double cliqué sur la couche d'adresse sur la gauche et je peux changer le nom. Je vais coller ça en place, coller ça dans le tableau d'art, placer juste autour de la position du X, copier, supprimer le X appuyer sur l'adresse. J' arche le haut ici et je colle cette flèche. Maintenant ça s'appelle cette adresse ici et allons-y et supprimons tout ça. Ces éléments ici. Alors prototylographions ça. Donc, l'écran suivant va aller à l'écran d'adresse. Mais dans ce cas, on va toujours l'avoir sur le robinet ici. On va emménager au lieu de déménager. Le vôtre peut être sur animation instantanée ou intelligente. Créons emménager. Et nous voulons que celui-ci glisse de gauche à droite, et nous voulons que la flèche arrière s'éloigne. Mais au lieu de venir de la gauche, nous voulions venir de la droite pour qu'elle se déplace vers la droite. Donc, déplacer dans permet à cet écran d'adresse de se déplacer de la gauche et quand nous, quand nous disons de sortir, permet à cet écran que nous avons sélectionné de se déplacer hors du chemin et que nous voulons aller à droite. Donc, parfois, vous. Si on ne sait pas comment ces travaux viennent de se rencontrer, faites les sélections, puis allez dans votre prototype et allez jouer avec lui dans le prototype. Et cela vous aide à trouver Hallis Air qui fonctionne pour vous afin que vous puissiez voir la prochaine qui va glisser dans cette page d'adresse. Si je veux y retourner, je peux y retourner. Et c'est une interaction assez courante de voir cette diapositive vers le haut. Voir le X aller ensuite. Et maintenant, nous entrons dans un Siris de boutons arrière et d'écrans arrière. Ok, donc à ce stade, on doit mettre les informations d'adresse. Donc je vais revenir à certains des composants que nous avions déjà. Donc, si vous vous souvenez, nous avons construit sur l'écran des actifs ici. Nous avons construit certains composants par défaut de formulaire. Alors attrapons ce composant, cliquez et faites-le glisser sur le tableau d'art. Il y avait une des valeurs par défaut. Appelons cette adresse. Et puisque cette application connaît déjà mon nom, je me suis déjà connecté et je me suis inscrit précédemment et lui donner mon nom. Allons prendre le formulaire de mise au point rempli ici et vous pouvez voir si vous cliquez sur un, um sur un composant et nous vous emmènerons à ce composant si vous cliquez et faites glisser. C' est comme ça que vous l'utilisez sur le tableau d'art ici. Donc déjà, ah formulaire d'entrée que j'ai créé qui a. Nous avons déjà celui qui est une entrée ST focus. Alors allons de l'avant et dire le nom ici et nous allons pré-remplir ceci avec mon nom et allons de avant et changer le texte en minuscules. ce moment, nous avons le champ d'adresse. Puisque c'est une application qui ne fonctionne qu'à San Francisco, nous allons taper San Francisco et nous allons faire cette opacité de 30%. Donc, euh, en fait, avant de faire le San Francisco, nous devons mettre l'appartement ou le gentil ici. D' accord. Et maintenant, puisque ce n'est pas une application utilisée par Onley à San Francisco, tapons San Francisco en tant que ville, et allons de l'avant et par défaut qui, euh, font l'opacité 30%. Il est donc désactivé. La robe doit être à San Francisco. D' accord, et puis allons de l'avant et voyons comment le figment fait cela vous donne tous les attributs d'espacement . Donc, il distribue également ces champs de formulaire pour nous à 20 pixels chacun et nous avions l' état Californie. Et la prochaine chose que nous avons eu ici était de nous assurer que cela soit également distribué ici. On avait le numéro de téléphone ici. D' accord. Assez simple, puisque nous avons déjà construit ces composants. Je vais vérifier deux fois, mais la dernière page ? Je vais vérifier deux fois, Oui. Ça a l'air juste. On a déjà ça. Prototype, pour que vous puissiez voir. Voilà à quoi ça ressemble. Je vais ensuite. Maintenant, nous avons l'adresse. Je vais copier cette adresse, tenant l'option, en cliquant sur le tableau d'art et en changer. Et je vais appuyer. Je vais double-cliquer sur la couche de ce tableau d'art et appeler ça une robe. Bon, donc à ce stade, je vais copier le clavier que nous avons à partir de la connexion. Il suffit de commander. Je vais sélectionner la commande d'adresse V et acheter un bang, mais un boom. Je vais sélectionner la commande d'adresse V et acheter un bang, Nous avons l'écran du clavier. Maintenant, allons-y et remplissons juste les trois ici. Donc, si vous pouvez voir, j'ai le composant pour l'entrée active Rester déjà pour ces champs de formulaire. Certains vont juste copier cette option de maintien et le faire glisser et juste mettre ça en haut de tout le numéro de téléphone, l'appartement et l'adresse. Alors je vais commander See ? Copie ça, et je vais supprimer l'appartement, le numéro de téléphone, et je vais resélectionner le tableau d'art. Commande V et placez-les ici. Donc, à celui-ci les qui collent en place. Maintenant j'ai l'adresse, mon type dans l'adresse, et on va juste mettre, genre, genre, 111 Aw, Noboa Street. Et nous le ferons. Ici était appartement je slash doux et nous allons juste faire 123 pour l'appartement. Et puis on avait le numéro de téléphone ici. Allez-y et prenez Aaron Lawrence ici et faisons 1112225555 comme numéro de téléphone. Ok, à ce stade, ce bouton, nous devons faire en sorte que cela soit fait. Donc, si vous sélectionnez le go, allons de l'avant et ramenons le texte à Roboto afin que nous puissions le changer et appuyer sur Ah, double-cliquez dans la zone de texte et appelez ça fait. Et ce que cela fera, c'est qu'il ne vous permettra pas d'aller de l'avant. Il suffit de faire glisser le clavier vers le bas et vous pouvez aller à ah, le bouton suivant ici et passer à l'écran suivant. Donc ce point, je vais tenir option. Je vais cliquer et faire glisser ce prototype mobile ou tableau d'art mobile et en faire une duplication . Je vais vous voir à quel point la figure était intelligente. Il a remarqué que j'ai copié ce notre conseil d'administration. Et quand j'ai lâché prise, ça a changé l'adresse de un ici à deux et j'ai remarqué que je numérotais toujours les tableaux d'art . Donc, il a juste commencé automatiquement à numéroter progressivement mon tableau d'art. Outil très intelligent. Je vais supprimer le clavier, et maintenant c'est un prototype. Donc je vais retourner à mon onglet prototype ici. En haut, à droite, je vais cliquer dessus et allons de l'avant et cliquer sur l'adresse, l'appartement et le numéro de téléphone. Ici, nous allons faire une commande G ou un clic droit et simplement les grouper comme une sélection et aller de l'avant et faire glisser le bras gooey prototype à l'adresse suivante. Un écran et nous voulons sur le dessus mais nous voulons juste instantané. Non, Non, on ne veut pas qu'il y ait des trucs dépensés ici à ce stade. Allons de l'avant et sélectionné le bouton fait ici et cliquez et attrapé le bras gooey. Cliquez dessus sur le tableau d'art, adressé à et sur le robinet et encore. Instantanée. Rien de fantaisie. Ok, alors que se passe-t-il si vous entrez tôt dans l'adresse ? L' appartement ou le numéro de téléphone est ? Tu prends le clavier. On va juste le remplir automatiquement pour l'instant dans l'art. Mais si vous voulez faire des écrans individuels pour chacun d'eux, vous savez maintenant comment le faire. Et puis, si vous appuyez sur Don, il faut un clavier vers le bas. Qui peut passer à l'écran suivant ici, qui est de mettre les détails de votre carte de crédit. Très bien, si bien. Je vais copier cette adresse une option de détention. Je sélectionne le tableau d'art, cliquez dessus, maintenez l'option pour obtenir la double flèche, cliquez et faites glisser Maj ou à nouveau. Je pourrais juste le copier, et je peux commander V et il le collera pour moi. Donc commande voir commande soit, Appelons ce paiement et appelons-le un. Et nous allons réétiqueter le haut ici au paiement et allons dans notre onglet prototype ici, juste ici. Rab la flèche parce que la flèche va maintenant aller à l'adresse où avant cette ère allait à la vérification. Maintenant, le bouton Retour et la flèche vont à l'écran de paiement. Encore une fois, rien de fantaisie. On veut juste sur le robinet. Oh, et nous le faisons. On veut qu'il déménage ? Oui, c' est exact. Et nous voulons aller à droite. Alors allons-y et supprimons certains d'entre eux ici et allons voir à quoi cela ressemble sur le prototype dit que j'appuie sur prochain espoir qui n'a pas fonctionné. Alors voyons ce qui se passe ici. On n'a pas le connectélebouton suivant à cet écran. Alors attrapons ensuite. Et attrapons le prototype de bras branché au paiement un. Et on voulait emménager ici. Donc nous voulons sur le robinet, emménager et nous voulons entrer de la gauche, puis nous voulons que la flèche soit déplacée et nous voulons sortir de la droite. Donc, pour revenir à travers ça, voici notre chèque que nous avons le prochain. Voici les informations de Theodore. Le numéro de téléphone Press fait. J' appuie sur le bouton suivant, et cette page va entrer de gauche, va se déplacer de droite. Vous pouvez voir ça. Et puis cet écran va se déplacer vers la droite pour que vous puissiez voir comment ça bouge à gauche . Notre prochain bouton dit que cette page va se déplacer de la gauche et la flèche ici, se connecter à l'adresse à l'écran va se déplacer de la droite. Et c'est à ça que ça ressemble. Emménager, déménager. Ok, allons voir les détails de paiement. Ce que nous avions ici, c'était, euh, nous avions les détails de l'adresse en haut. Alors allons-y et prenons le thé au lait ordinaire et le texte de glace semi-douce et moyenne ici, collons-le directement au même endroit sur l'écran de paiement. texte de glace semi-douce et moyenne ici, Et passons simplement à la livraison ou à la livraison. Et nous allons simplement entrer les informations que nous avons faites sur le dernier écran ici. Donc on a mon nom. Vous avez Aaron Lawrence. Nous avons 111 Boba Street et nous avons le numéro 111 ou 123 pour l'appartement. Et nous avons le numéro de téléphone, qui était 1112225555 . Donc, à ce stade, faisons glisser un autre de ces, um, um, composants de forme que nous avons fait. Donc, si nous allons à l'écran des actifs sur la gauche ici, peut-être aller à l'écran des actifs sur la gauche. Prenons le formulaire par défaut. Mettez ça sur le tableau d'art ici. Et ça va être le nom sur la carte. Je suis dans une copie. Celui-ci est puits à l'espacement 20, et ça va être un numéro de voiture, puis glisser. Um, cliquez, Hold, option et Shift. Copiez cette carte numéro un ici. Et appelons celui-ci la date d'expiration. Et ce que je vais faire ici, c'est que je vais sélectionner l'élément de ligne. En fait, ce que je vais faire, c'est prendre un rectangle ici et en faire un noir. Je peux également cliquer sur le Je la dépose, cliquez sur l'arrière-plan afin qu'il soit de la même couleur que l'arrière-plan. Et gardez juste cet orteil. Cachez ce document de formulaire ici. Ce qui se passe lorsque vous créez un symbole que vous avez une instance, c'est que je peux créer le début. Je peux changer les styles comme si je pouvais changer. La couleur peut changer. Le pâturage ici peut changer les styles de ce composant. Mais je ne peux pas vraiment le manipuler comme si je ne pouvais pas entrer dans cette ligne ici et faire différentes largeurs hors des lignes. Je voyais que ça ne me laissait pas faire ça. Donc, il le garde assez vrai pour le composant. Donc je fais ici, c'est que je fais juste semblant. Vous voyez que j'ai cette longue lignée. Je ne veux pas de cette ligne parce que je veux mettre le CVV au-dessus de ça. Donc ce que je vais faire, c'est que je vais prendre cette date d'expiration. Je vais payer quelqu'un comme, clic droit, déplacer ça à l'avant et je vais appeler celui-là le CVV. Juste un petit champ ici pour trois numéros, et je vais faire la même chose. Je vais créer une boîte noire ici et la mettre sur le dessus. Je peux appuyer sur I pour obtenir la touche rapide pour obtenir la pipette et sélectionner l'arrière-plan. Et j'ai le noir pour que vous puissiez voir que j'ai toujours les composants que j'utilise, mais j'ai créé de l'espace pour eux. Et de cette façon, si jamais je veux changer ce composant, Maître, je n'ai pas détaché ces deux composants et je dois revenir et les changer. Ok, Cool. Donc, à ce stade, allons de l'avant et mettons le total que nous avions. Donc, nous avons créé un élément total ici, et nous avons montré le total ici est bien, qui est 9 49 Et ses meilleures pratiques avant d'acheter quoi que ce soit est de voir le total dans lequel votre achat ici pour mettre cela centré. Et nous en avions neuf, je pense que 49 au total. Ici, on va changer ce bouton pour payer. Et maintenant, nous sommes en bonne forme. Alors maintenant que j'appuie sur le bouton de retour et que j'ai mis toutes les informations d'adresse dans j'appuie sur le prochain Nam sur l'écran de paiement ici, j'ai presque fini avec le paiement. Alors allons à Ah, allons remplir le très rapidement en utilisant les, um les formulaires que nous avons créés qui sont à l'état actif. Et donc ce que je vais faire, c'est que je vais copier ce paiement. Je ne m'ennuie pas. Je clique sur l'option de maintien du tableau d'art et de décalage, le faisant glisser vers la droite, et j'en ai fait une copie. Je vais aller à mes biens ici. Je vais récupérer mes composants que j'ai créés. Rappelez-vous ce formulaire Focus. Um, état actif que nous avons. J' allais remplacer tout ça par ce composant, donc je vais juste poser une pièce l'un sur l'autre pour l'instant. Je vais prendre les quatre, hum, commande, voir mes supprimer ceux-ci ici, et je vais remplacer les actifs ici. droite. Pour que tu puisses voir ici. J' ai besoin de mettre cette forme sous le rectangle, donc ça lui donne un peu d'espace. Et j'ai aussi besoin de saisir le rectangle que j'ai créé ici. Vous pouvez voir comment je fais cela est que je clique et fais glisser à partir de la droite qui sélectionne tous les éléments ici afin que je puisse sélectionner plus d'un élément. Sélectionnez tous ces éléments. Vraiment ? J' essaie juste d'arriver à ces deux-là en essayant d'accéder à ce formulaire d'entrée rempli et à ce rectangle ici. Alors maintenant, je les ai aussi. Maintenant, je vais tenir le quart. Je vais cliquer sur le titre et mettre le composant ici pour le cvv. Et maintenant, j'ai choisi ça. Et j'ai juste le rectangle ici. Maintenant que je l'ai sélectionné, je vais cliquer sur le rectangle sur le panneau de calque à gauche et je vais le déplacer au-dessus ce composant. Bon, alors allons-y et changeons ça. Donc on avait un nom sur la carte, et je vais utiliser mon nom pour l'instant. Je ne vais pas mettre les détails de ma carte, mais, hum, hum, ça a changé le texte ici en cas d'origine et ensuite on a eu, euh les détails de la carte sont les chiffres. Donc numéro de carte, puis allez-y et maintenez l'option et appuyez sur la lettre. Huit frapper quatre, faire quatre balles, faire quatre autres balles, et ensuite aller 1111 Il expose toujours celui à gauche des quatre derniers chiffres ici. Je vais sélectionner les dates d'expiration et je vais mettre je dirais 01 2020. Et je vais faire le CVV ici CVV et était 2123 Cool. Droit ? À ce stade, nous avons également besoin du clavier. Donc, il suffit de saisir le clavier ici que nous avons créé pour le tableau d'art d'adresse, Coller sur le paiement. Ce n'est pas l'oiseau qu'on a ici ? D' accord. Et nous sommes en bonne forme maintenant, alors allons de l'avant et prototypographions ça. Il suffit de sélectionner tous ces composants que nous avons fabriqués ici, allez dans l'onglet prototype. Vous voulez un groupe qui vont de l'avant et faites un clic droit. J' ai une sélection de groupe ou une commande G. Et allez-y et flèches vers ça. Attrapez le petit Aero à ce tableau d'art ici. CNC, c'est connecté à ce tableau d'art. On ne veut rien de fantaisie juste sur le dessus. Um, quand tu emménageras, c'est juste instantané. Et cela ouvre le clavier va juste pré-remplir tous ces champs de formulaire. Et puis je vais copier ça encore une fois ici, et je vais sélectionner le bouton terminé. Je vais traîner le petit prototype de bras à l'écran de paiement. Et sur cette interaction ici, on veut juste appuyer sur Instant et on va supprimer le clavier. Et là, nous avons le salaire. Mais en allant quelque part, on ne veut pas que ça marche maintenant. Et nous l'avons aussi ici. Vous avez le choix sur votre UX ici pour cela. Vous pourriez faire cette, hum, 30% d'opacité jusqu'à ce que vous remplissiez toutes les informations. Une fois que vous remplissez tout, il va pleine capacité. Vous pouvez le garder à 100% que de faire des états d'air pour ça, où vous obtenez un peu comme la ligne devient rouge et il dit, hum, vous ressemblez à quelque chose comme ça et les lignes deviennent rouges indiquant qu'elles sont toujours informations à remplir. Des petites choses qui pensent dans votre UX. Si vous êtes curieux de connaître des classes ah ux, j'ai une classe auxiliaire que vous pouvez vérifier deux sous mon nom. Euh, mais pour ce cas, je veux juste vous apprendre Ah, une expérience d'application mobile et comment utiliser la stigmatisation pour construire ça. Bon, alors passons à autre chose. On a ce prototype. Allons vérifier ça. Donc, je clique sur les noms ici pré remplir, faire appuyer sur le clavier, et maintenant je suis prêt à payer. Donc la prochaine chose que nous voulons faire ici, c'est que vous voulez saisir l'écran de chargement que nous avions ici ? Allons-y et attrapons celui qu'on a fait ici au début. Après vous être connecté, je vais le copier, et je vais juste passer à cette section. Appuyez sur la commande V et j'ai placé un tableau d'art dans mes mises en page. Je vais garder le, euh, le cadeau de l'animateur GIF du chargeur ici. Il suffit de supprimer le logo, et je vais copier. , En fait, prenez juste ce texte de livraison, prenez cet écran de chargement et voyez comment il a quitté la ligne. Je veux qu'il soit centré sur la ligne. Maintenant, je veux juste le centrer juste sous ce cadeau de chargement. Maintenant, je veux aussi garder la zone de limite de texte comme celle du tableau d'art. Et quand j'ai cela et le paragraphe centré avec qui garde ce texte directement au centre et allons de l'avant et changer cela pour soumettre le paiement, juste comme ça. Ok, donc à ce stade, on peut juste sélectionner le bouton de paiement, cliquer sur le prototype que l'on veut en haut. Rien de fantaisie ici. Juste instantané. Il suffit d'aller directement à soumettre le paiement et allons voir à quoi cela ressemble. Donc, vous cliquez sur le paiement et maintenant vous êtes dans l'écran où il envoie le paiement. Ok, donc la finalisation de notre expérience de workflow de départ, nous voulons montrer le thé Boba en temps réel être livré à votre adresse avec une série d' écrans et finalement être livré ici à la fin. Ok, cool. Revenons donc à notre onglet Apprentissage Paige ici et copions cet écran de chargement. Et nous allons changer le nom de cet écran de chargement à la livraison et fera livraison un. Il suffit de cliquer à l'extérieur du tableau d'art. Il suffit de cliquer et de faire glisser pour sélectionner le cadeau de chargement et le paiement et simplement le supprimer. Et rappelez-vous, nous avions cette carte ici de San Francisco. Allons prendre cette carte. Donc, si vous vous souvenez juste, vous venez de cliquer dessus déjà rogné. Il est déjà dans la bonne position. Il suffit de commander, Voir, puis passer à cette livraison un tableau d'art, en sélectionnant le conseil d'art et de commande v Ill rythme droit en place. D' accord. Et la prochaine chose est, allons à notre tableau d'art de produits de design ici à gauche, et prenons cette petite icône de Boba avec le cercle blanc derrière elle. Commande voir, copions-le. Collons ça quelque part sur notre application. Disons que peut-être ici et maintenant, allons prendre l'icône de la carte ici et encore, comme je l'expliquais dans la dernière vidéo. Si vous voulez beaucoup d'icônes, il suffit d'aller au nom du projet dot com type dans l'icône de carte. Vous pourriez avoir tout un tas de ces petites broches de carte que vous voulez ou même simplement taper la carte et obtenir tout un tas de choses ici que vous vouliez, n'est-ce pas ? Donc j'en ai un ici dans la conce 6. Conception des écrans de profil: D' accord. Bienvenue dans la cinquième vidéo de la façon de construire une application mobile en utilisant fig MMA conçu orteil dans cette vidéo, nous allons couvrir le flux de travail du profil ah. Donc, nous avons déjà créé la connexion, Inscrivez-vous shopping, consultez toutes les choses géniales et nous aurons la vidéo ici qui sera la dernière vidéo de nous concevoir ensemble. Um va finir avec le profil, um, onglet que nous avons construit plus tôt. Nous allons également avoir une autre série de vidéos à venir juste pour parler d'autres façons d' utiliser Fig Mahato. Invitez les utilisateurs à participer à votre conception et collaborez avec eux à l'exportation des ressources, Uhm et laissez les ingénieurs inspecter votre conception à la recherche d'attributs de code. Nous allons parler de fig, raccourcis clavier MMA. Je vais vous montrer quelques prises de montage et comment obtenir des kits gooey en ligne. Et puis comment créer des commentaires et j'ai quelques réflexions finales et aller de l'avant. Ok, alors revenons dans notre dossier ici et encore. L' écran que nous allons construire aujourd'hui est cet écran ici, qui est une fois que vous obtenez une fois que vous appuyez sur l'onglet, sont là où se trouve le profil. Il vous emmène à l'écran de profil ici je peux basculer entre les commandes et le profil, voir une photo de mon Eh bien, ce n'est pas vraiment moi, mais certains traquer en ligne, et il a quelques informations de mon profil que je pourrais modifier. Cette information peut ajouter une photo que je peux me déconnecter également. Ok, alors revenons dans notre dossier ici et revenons à l'endroit où on s'est arrêté en dernier, ce qui, hum, était terminé l'expérience de vérification. Nous avons un prototype assez complet pour une expérience utilisateur de livraison de boba. Hum, mais allons-y et attrapons les derniers morceaux de ça. Alors prenons la page, hum, hum, inscrivez-vous ici et copions cette commande. Voyons, prenons ça ici jusqu'à la fin. Et allons le rythme ici. Donnez un peu d'espacement, et renommons ceci comme écran de profil. Donc encore une fois, je viens de sélectionner cet écran ici, et j'ai tapé, j'ai double-cliqué sur le calque à gauche et j'appuie sur le profil, qui, espérons-le, à ce stade, vous êtes obtenir le coup de copier des tableaux d'art et de les renommer sur la gauche. Une autre chose dont j'ai besoin, c'est que je vais avoir besoin de cet onglet sont de l'écran d'achat ici . Alors allons de l'avant et sélectionnons cette commande. Voyez, et allons de l'avant et le rythme dans cet écran de profil que nous avons la commande V et qui va coller en place. Supprimons tout le formulaire, champs, les boutons là, ce qui est enlever ce logo et prenons ces deux onglets et simplement les déplacer un peu plus sur leur ok. Donc, à ce stade, nous voulons que l'état actif de ce soit l'icône de profil et revenir à un état par défaut pour cette illustration de thé Boba. Alors prenons l'icône de profil ici. Allons nous sentir qu'on l'a déjà réglé à White. Faisons l'opacité à 100%. D' accord, cool. La prochaine chose que nous devons faire est que nous devons saisir cette illustration de thé Boba ici et ce qui va de l' avant et juste ajouter une sensation à elle. Qu' est-ce qui rend tout blanc que l'orteil par défaut blanc ? Et allons de l'avant et faisons de cela une opacité de 40%, en fait, 30%. Voilà, tu y vas. Maintenant, il est très clair pour l'utilisateur qu'ils sont sur le robinet de profil après avoir appuyé dessus, et que ce sont des états par défaut. Et c'est l'état actif. Alors, allons changer l'inscription et le texte de connexion. Appelons, inscrivons le profil et appelons le journal ici. Ordres. D' accord. Assez simple. Ok, maintenant ce qu'on va faire, c'est faire de l'espace pour la photo de cette personne, alors attrape le cercle ici. Quickie est aussi nul, et faisons un petit cercle ici. D' accord ? Je vais avoir une vidéo dans la prochaine série. Environ 21 ou deux à l'avance pour parler des prises de montage. Mais vous pouvez également obtenir quelques plug-ins dès maintenant. Et je veux te montrer un que j'utilise tout le temps. Ça s'appelle du contenu, Riel. Et comment accéder à cette fiche, c'est si vous revenez à votre tableau de bord, en cliquant sur les quatre cases en haut à gauche vous ramène à cet écran. Je me souviens que c'est là que vous pouvez créer des fichiers. C' est aussi là que vous ajoutez des gens, que je vous montrerai dans la prochaine vidéo. À ce stade, vous êtes sur les brouillons ici. C' est là que vous pouvez créer autant de tableaux d'art que vous le souhaitez. Si vous allez à la fiche ici, vous verrez tous les connecteurs que vous pouvez utiliser, et vous pouvez voir celle-ci ici. Ça s'appelle Popular d'appeler Content Riel. Si vous cliquez sur le contenu riel, vous pouvez également le rechercher et appuyez sur installer. Il va l'installer dans votre fig MMA, le tout gratuit pour vous. Alors pourquoi ne pas aller de l'avant et installer cette fiche ? Je vais vous donner une seconde. C' est plutôt rapide, aussi. Comme tout désinstaller cela et l'installer va assez vite. Revenez à mes brouillons, et puis si vous voulez revenir à votre fichier de classe ah, il suffit de triple cliquer dessus. Nous sommes de retour à la même chose que nous. Ok, ce qui est vraiment cool à propos de cette prise, c'est que je veux remplir ça avec une image de ce cercle. Donc, en haut de notre menu, nous avons des branchements. Cliquez sur le plug in et celui que nous venons d'ajouter du contenu. Riel. Allez prendre du contenu Riel, et nous voulons avatar ici. Alors allons cliquer sur les avatars, et on pourrait mettre un mâle, femelle ou les deux. Certains mettent des mâles. suffit de cliquer sur les mâles et il va pré-remplir cela avec n'importe quel courrier que vous voulez. Vous pouvez cliquer dessus à nouveau, et à un autre, je pourrais juste passer par l'annonce autant de contenu que je veux. Plutôt cool. Je peux aussi juste prendre du texte comme Prenons ce texte de profil ici. Tu me regardes. Je vais me donner des noms, des numéros de téléphone, des adresses, des numéros, dates. Laura Epsom e vous envoie les RL, afin qu'il préremplira ces trucs pour moi. Donc je ne pense pas seulement à ça et tape tout juste assez cool. Bon, alors laisse-moi me changer. Je vais changer une fois de plus, vais attraper ça. J' ai attrapé un autre avatar. Ok, allons chercher ce type comme ce gars. Ok, donc à ce stade, on a leur image de profil. Et maintenant, allons ajouter le nom. Il suffit de copier ce texte de profil ici. Cliquez et faites glisser et maintenez la touche Maj enfoncée pendant que vous cliquez et faites glisser l'option. Copions-le. C' est à une disposition centrée. Nous voulons qu'il laisse une ligne pour l'instant, donc il est laissé en ligne. C' est au centre un peu. Et c'était le système de 19 points. Revenons à penser que nous avions 16 régulier. C' est parfait. Allons en prendre 16 ici et je vais étirer ce texte et je vais revenir à l' alignement du texte n'étant pas centré, mais en haut, juste comme ça. Et je suis un type dans les informations de mon profil que j'ai utilisées lors de mon inscription. Alors c'était mon nom. Aaron Lawrence Vous pouvez taper le vôtre si vous voulez. Nous avons fait un test à Gmail dot com et allons diviser Aaron Lawrence en deux lignes au cas où les gens auraient de longs noms ici. Et allons de l'avant et faisons de cela la couleur grise fraîche ici. D' accord, ça a l'air cool. Allons avoir un peu plus de flair visuel. Prenons un rectangle. Vous pouvez simplement faire notre ou vous pouvez aller à l'outil de forme ici et mettons un rectangle derrière tout cela. Alors voici mon rectangle. Je vais l'attraper dans le panneau des calques sur la gauche et il suffit de cliquer et de le faire glisser et de le déplacer derrière tout et allons de l'avant et changer cela. Faisons la couleur grise fraîche que nous avions, et puis faisons l'opacité sur elle très faible Faisons comme ça c'est bon. Faisons une autre couleur ici. Qu' est-ce qui a détaché ça ? Allons faire un blanc et enlèverons un 10. Ça ne marche toujours pas pour moi. Parfois, le design visuel vous gars sorte de faire quelques routes. Hum, alors nous attrapons. Ah, la couleur bleue. Voilà, tu y vas. Maintenant, on va quelque part. Ça devrait être très subtil. Je vais augmenter un peu l'opacité. Tu as 35 % et on va utiliser quelque chose au milieu. Va aller à propos de leur, euh, 54 56 b comme une couleur. C' est une couleur de fond. Donnons un coup à cette, hum, à cette image de profil. Donc c'est un coup d'oeil ici. Eh bien, je vais aller avec White pour l'instant que je suis un ton de retour. Mais rendons ça, genre, vraiment épais. D' accord ? Je pense que je pense que ça devrait aller. Ok, donc maintenant ce Texas A qui a l'air un peu petit. Alors revenons en arrière et rendons le blanc. Donnons-lui un peu plus de hiérarchie visuelle et passons au 19 points gras. Ouais, comme ça. Allons audacieux. Ok, ça a l'air bien maintenant, non ? Donc, la prochaine chose à faire ici est d'ajouter la fonction pour ajouter une photo. Nous ne le prototypage pas, mais nous ajouterons le bouton pour le faire. J' ai donc cette petite icône de caméra. Nous allons également saisir l'icône d'édition. Pourquoi nous sommes ici dans le tableau d'art des produits de design. Revenons ici et nous allons les adapter à ce tableau d'art. Mais laissez-les ici pour l'instant. D' accord ? Attrapons ce cercle ici. Vous pouvez aussi appuyer sur O sur votre clavier et je vais maintenir l'option shift. Comme je le fais, vous pouvez également maintenir le décalage si vous maintenez l'option. Il va du centre de l'endroit où vous cliquez. Si vous maintenez le décalage, il va de gauche à droite. Je tiens les changements d'option. Je peux aller au centre de l'endroit où je clique et je vais faire un petit bouton d'action pour télécharger la photo. Pas trop grand à propos de ça. Et puisque c'est quelque chose de cliquable, allons en faire la couleur de l'action et allons saisir cette icône de l'appareil photo et allons de l'avant. Je vais faire un clic droit dessus. Apportez à l'avant ma taille réduite un peu. Je vais tenir le quart quand je réduirai la taille. Si je ne tiens pas, tu finiras par faire des choses comme ça, ce qui n'est pas bon. Vous voulez garder la perspective de cette illustration de la caméra. Très bien, placez ça juste au centre. J' ai laissé tomber ça un peu. Qu' est-ce qui a un accident vasculaire cérébral ? Qu' est-ce qui a un coup plus sombre, comme un coup de trois pixels à ça ? Donnez-lui une certaine séparation de l'image qui semble bien que je puisse appuyer sur cet appareil photo pour entrer dans mes photos et sélectionner une nouvelle photo. Si je veux éditer une de ces informations ici, je vais compresser l'icône d'édition. Allons de l'avant et faisons cela aussi en couleur d'action afin que vous puissiez voir la couleur d'action ici. Je vais copier les ordres ici. laissé une ligne, je vais la changer à 100% d'opacité ici. Et je vais juste écrire le mot ajouté. Ici, mettez-le à côté de cette icône et déplacez-le vers le bas. D' accord. Et ça me permettrait d'éditer ces, euh, cette information ici. D' accord. La prochaine chose à faire est d'aller faire la page de commande ici, donc c'est copier cette page de profil. Allons à gauche. Comment s'appelle cet ordre ? Et encore une fois, allons faire ce texte Nous avions le profil était 19. Hum, ce texte ici était, je crois dit à 19 Bolds et faisons-le blancs. Il est Blancs avait 100% opacité. Faisons ce profil ici 19 points régulier ou léger et allons-y faire cette opacité de 50%. Et puis passons ce rectangle sur les ordres des orteils. Et puis nous allons simplement supprimer tous les trucs de profil que nous avons fait compte tenu de l'arrière-plan. Et à ce stade, nous voulons juste appeler certains des détails que nous avons commandés ici. Alors allons prendre une des photos, cette photo de thé au lait ici. Et prenons cette information ici. Donc je vais prendre la photo d'abord. Je vais mettre la photo dans l'ordre pour l'instant. Juste n'importe où, c'est bon. Je vais le réduire un peu. Et je vais aussi récupérer les informations de commande ici. Copiez ceci. D' accord. Et allons de l'avant et coller ceci sous la commande ici. Droit ? Alors secouons le, hum on appellera ça un thé au lait. Ici. Prenons l'information qui dit Milk semi-sucré, glace moyenne, gros tapioca. Et changeons ça en, euh, quantité. Et mettons-en un ici et centrons ça. Centre-nous sous le texte régulier du thé au lait ici. Je vais faire la même chose avec le tableau d'art. Donc je sais que c'est exactement au centre de ce tableau d'art. Combien de la même chose pour le texte de thé au lait régulier, Mais vous pouvez voir qu'il a l'alignement gauche. Donc, allons à la zone de texte ici et ce qui fait qu'il centre l'alignement des paragraphes. Ça a l'air bien. D' accord. Et ce qu'on va faire ici, c'est qu'on va découper ce cercle ici ou ça. Ah, euh, cette image ici et faites-la en cercle. Alors sélectionnons l'image. Si vous allez orteil le haut ici, où a votre volonté pas votre dans votre hauteur Attributs. Il y a le rayon du coin, um, champs ici, allez-y et appuyez sur Maj et la flèche vers le haut et faites-le un tas de fois. Vous pouvez également simplement taper environ 100. Ça devrait être bien. Faisons le avec 1 90 par 1 90, puis allons de l'avant et soufflons un peu cette image . Donc, ce que vous pouvez faire ici, c'est si vous triplez sur l'image, puis allez à l'outil de recadrage en haut. Maintenant, je l'ai recadrée dans le cercle. Vous pouvez saisir l'image ici et maintenez le décalage et juste sauter. L' image pourrait l'exploser comme ça. Et je vais réduire un peu ce cercle. Je maintiens le décalage lorsque j'ai réduit la taille, donc je sélectionne le coin. Maintenez Shift, réduisez la taille, allez-y et jetez-la ici. Déplacez ça un peu vers le bas. Droit ? Et nous avions aussi une ligne que nous avons mis quelque part ici sur la page de départ. On avait cette ligne. Allons sélectionner cette ligne. Il suffit de le copier. Revenons à ce tableau et on va ajouter ça à quelques endroits. On va le coller. On va l'ajouter juste au-dessus de cette image. Donnez-lui un peu d'espace, mais en dessous de l'onglet Commandes. Donc, si nous avons plus d'informations sur ces commandes, il peut défiler sous cette ligne. Et nous allons aussi centrer ça ici. Et aussi ajouter la date quelqu'un une copie, cette quantité et faire la date Heroes le dire. 0103 1020 et son prix était d'un dollar ou $9.50 49 cents. Bon, allons-y et rendons le texte blanc pour le total. Et allons en faire 19. gras. D' accord, et allons-y et attrapons une ligne. Il suffit de séparer cette commande ici et nous pouvons SMA Ou en bas, c'est nous y allons. Ce qui est cool si on le fait de cette façon, c'est si on a plus d'ordres. On pourrait les copier et les rendre un peu plus petits. On peut ajouter des années entières. Nous voulions dire que c'était comme un Nord er de trois Kaput eux ici. Et disons que la quantité était de trois. On pourrait en avoir trois. Si c'était comme six d'entre eux, alors nous pouvons en avoir six et tous ont des saveurs différentes à l'intérieur. Donc, cette conception échelles àavoir que ces différentes variations. Tu n'as pas à faire ça. Je le fais juste deuxième, vois ? D' accord, cool. Donc, euh, il y a la page de commande. Allons-y. Je vais y retourner un peu. Allons de l'avant et prototypographions ça Alors passons d'abord à l'écran d'achat ici. Et prenons cette icône de profil ici, zoom arrière. Vous zoomez vraiment loin pour celle-là. Appuyez sur l'onglet prototype en haut, non ? Prenez le petit bras prototype et allez-y et connectez-le au profil ici. À ce stade, nous voulons sur le robinet. Et nous ne voulons rien de fantaisie. Juste instantané. C' est ça. Nous voulons également prendre cette illustration Drink of the Boba et connecter que retour à la page d' achat ici, vous pouvez voir et rien de fantaisie. Juste instantané. Donc, sur le robinet et instantané. D' accord. Et une chose qu'on doit faire, je vais copier. Um, ma copie du texte de commande ici, et je vais faire de ce texte le, hum 16 points régulier à 100% opacité. Et faites cela la couleur rose ou action et faites simplement cette déconnexion et allons de l'avant et connectons ce bouton de déconnexion en zoomant. Il a attrapé un petit lien prototype. Ou si vous le déplacez simplement vers la droite, il va marcher la page pour vous. Allons-y. Envoyé cela à l'écran de connexion ici, Cool et last but not least, nous allons connecter les commandes ici à l'écran de commande. Donc, les commandes sur l'onglet de profil à l'écran de commande sur le robinet, et nous voulons intelligent, animer. Et puis faisons la même chose pour le profil. Ah, SMS sur l'écran de commande pour aller à l'écran de profil en appuyant sur. Intelligent, animer et allons de l'avant et jetons un coup d'oeil à ça, non ? Donc, pour revenir à l'écran d'achat, je tape sur le profil. Vous pouvez voir un aller au profil ici si je vais commandes. Le joli, intelligent, animé appliqué la transition du rectangle sur les ordres des orteils. Je fais profil Aiken. Ne vous déconnectez pas. Je peux cliquer sur l'icône de la boisson Boba, vous emmener au centre, et je peux me déconnecter. Ça m'amène à un écran de déconnexion. Très bien, donc c'est à peu près une application fonctionnelle complète que nous venons de construire n'importe où, tout le chemin de la connexion à commander une boisson boba, en utilisant plusieurs interactions, ajoutant la boisson, faisant mettre les informations d'adresse, insérer les détails de carte de crédit, voir les écrans de chargement à l'aide de GIF animés, voir les transitions des retards de temps sur les écrans, arriver à une expérience finale ici. Voir le thé Boba est arrivé, puis passer à vos profils, vos commandes et vous déconnecter. D' accord. Super. Donc ce genre de couvre principalement tout ce que nous avons fait sur la construction de l' application mobile pour cette expérience de thé Boba à la demande. Je tiens à vous remercier si vous avez réussi si loin non seulement pour avoir acheté la classe et passé la classe, mais juste pour avoir accepté cela avec moi ici et passer du temps à apprendre quelque chose comme ce design. Je suis très passionné par l'artisanat de design. C' est un grand métier. Si vous y entrez, c'est un métier de cour honorable, et il faut du temps et de l'engagement pour apprendre. Et, euh, et de développer ça. Merci donc d'avoir pris le temps et de développer votre métier avec moi. La prochaine série de vidéos que je vais finir ici est, euh, nous allons apprendre un peu comment inviter d'autres personnes dans votre tableau, comment exporter des ressources, inspecter le code et vos designs, clavier raccourcis, plus des plug-ins figment que vous avez eu à voir un petit aperçu de récemment sur cette vidéo , comment créer des commentaires, despensées finales, pensées finales, et aller de l'avant toutes les vidéos vraiment rapides que conjointe prendre un couple minutes à parcourir, et vous avez déjà terminé la majeure partie de la classe. Donc, il suffit de rester là pour ces dernières vidéos pour tout lier ensemble. Ok, eh bien, merci encore. J' espère que vous vous amusez avec votre prototype, et je vous verrai sur les prochaines vidéos de 7. Collaborer avec les autres autres et exporter des ressources UI pour l'ingénierie: tout le monde Bienvenue à la prochaine vidéo. Donc, ce point nous avons traversé la majeure partie de Sigma en apprenant les entrées et les aboutissants de la conception et des outils et toutes les fonctions pour les conceptions particulières que nous avons créées et le prototypage . La prochaine série de vidéos vous montre comment inviter des gens à votre tableau. Comment l'exportation des ressources U. Y raccourcis clavier, plug-ins, comment créer des commentaires, quelques réflexions finales allant de l'avant vers les vidéos assez courtes juste pour vous montrer comment orteil fonctionne continuellement avec Sigma comme vous travailler avec les équipes et travailler avec les autres et comment obtenir plus d' efficacité avec cela. Ok, alors allons de l'avant et regardons comment inviter les autres et à quoi ressemble la collaboration dans fig MMA, ainsi que comment exporter des ressources u I comme des icônes, um, et des illustrations et comment inspecter le code pour les ingénieurs. Donc, si vous allez dans notre dossier où nous étions et nous pouvons revenir à notre apprentissage. Paige, c'est la page où nous avons créé notre prototype ici. Voulez-vous inviter quelqu'un à collaborer sur ce tableau ici et ils auront accès à toutes les pages ici. peu près tout ce dossier. Tout ce que vous avez à faire est d'aller ici pour partager, cliquez sur le lien de partage, et vous avez deux options. Vous pouvez en faire une visionneuse ou un éditeur. Donc, si vous êtes leur permet de voir les mots d'art, ils peuvent entrer dans les tableaux d'art. Jetez un oeil. Ils peuvent regarder les prototypes, mais ils ne pourront pas changer les choses. Ils ne pourront pas concevoir comme nous. Si tu en fais un éditeur, ils vont entrer dans ton tableau d'art et ils peuvent changer les choses. Pris, pris, fais à peu près plein accès à la figue MMA, tout comme tu l'as. Et pour la vue de vous étiez seulement que c'est un libre. Vous pouvez inviter autant de spectateurs que vous le souhaitez à votre tableau que vous avez invité les éditeurs Mawr. Je pense que vous en avez trois que vous pouvez inviter. Après cela, vous commencez à payer pour l'outil, il est donc à peu près gratuit pour vous d'utiliser et d'inviter autant de spectateurs que vous le souhaitez. Mais une fois que vous invitez plus de personnes à modifier votre tableau, il devient un modèle d'abonnement. Ok, cool. Donc, vous pouvez simplement passer à travers, inviter autant de gens que vous voulez. Ce que ça ressemble quand ils sont dans votre planche est assez soigné. C' est l'une de mes fonctionnalités préférées dans la fig. MMA. Donc disons que je suis allé par ici. J' ai un lien Voir ou Modifier ici. Hum, et j'ai ajouté quelqu'un ou cliqué sur la vue ici. Et disons que j'ai ajouté, l'e-mail de quelqu'un peut juste me mettre dans pour l'instant. Il y a mon email que j'ai envoyé. Celui qui reçoit cet email dit que c'est un ingénieur. Ils vont ouvrir cet e-mail et ils auront accès à la Fig MMA sur leur bureau dans un navigateur Internet. Ils n'ont pas besoin d'installer de logiciel. Ce sera gratuit pour eux. Ils ouvrent juste une fenêtre de navigateur sur leur Internet, et ils auront accès à ce fichier comme vous voyez ici, certains sur Internet. ce moment, je suis en chrome et ils auront accès à ce fichier. Ils peuvent travailler et concevoir comme nous l'avons fait, mais dans le navigateur. Et ce qui est vraiment bien, c'est que vous travailliez sur votre dossier et que cette personne entre dans l'um la personne que vous avez invitée entre dans ce tableau. Vous pouvez voir leurs bouches pour voir que j'ai deux A avec des cercles violets ici en haut , non ? Et l'un est Aaron Lawrence qui dit que c'est moi. Un autre est moi aussi, Mais ce serait que vous verrez plus d'une de ces petites icônes de profil ici en haut. Et ce sont les gens qui travaillent dans votre conseil en ce moment. Donc, si je fais un petit zoom arrière, vous pourrez voir ma souris de l'autre projet sur lequel j'étais. Laisse-moi retourner ici. Et maintenant je suis dans la fenêtre du navigateur. Je suis l'utilisateur que j'ai invité. Et si je reviens à la Fig MMA, je peux voir ma souris ici pour voir les gens dans mon tableau. Je peux voir ce qu'ils font en temps réel, et nous pouvons collaborer ensemble. Il y a beaucoup de fois que j'ai utilisé ça en ouvrant un logiciel de partage d'écran ou un appel vidéo avec quelqu'un, et on est au téléphone. On discute ensemble. Nous travaillons aussi ensemble dans la Fig MMA pour pouvoir discuter. Je peux parler à cette personne. Je vois leur bouche bouger et nous pouvons collaborer ensemble. Donc c'est vraiment génial. Vous pouvez l'envoyer aux responsables de produits. Les ingénieurs les invitent à collaborer avec vous, et vous pourriez les voir et les espionner alors qu'ils travaillent continuellement sur fig mo avec vous, ils peuvent également voir votre souris aussi, afin qu'ils sachent que vous êtes dans le tableau. Et une autre chose qu'ils peuvent faire ici est que si vous voulez continuellement inviter plus de gens dans la fig MMA, une autre approche est que nous avons juste invité quelqu'un dans notre tableau ou dans notre dossier ici. Vous pouvez également créer des équipes. Donc ici, j'ai un nouveau projet, une nouvelle équipe, et je compresse un nouveau projet ici. Aiken tapez un nouveau nom d'équipe et je peux créer une équipe ici et au sein d'une équipe que je peux inviter Aiken. Je peux ajouter des planches à cette équipe, et je pourrais inviter des gens à cette équipe et avoir une série de planches. De cette façon, je peux avoir mes propres projets personnels dans mes brouillons, et je peux avoir mes projets d'équipe au sein de mon équipe ici. Je peux aussi aller inviter des gens à cette équipe pour que vous puissiez voir que j'ai une planche ici. J' ai mon équipe, et si je veux inviter quelqu'un, j'ai des membres et je compresse l'invitation ici et fais la même chose. Je peux inviter les gens à voir ou à modifier, et ils auront accès à tous les tableaux de cette équipe. Je peux aussi faire de la gestion des utilisateurs ici. Je peux changer les gens de téléspectateurs en éditeurs ici. Vous pouvez les rétrograder, et c'est là que ça commence à entrer. Un coût mensuel est que vous souhaitez créer une équipe pour commencer à ajouter des éditeurs dans ces tableaux. La plupart du temps, je n'utilise pas trop l'équipe. J' invite juste les gens à mes conseils ici, et j'ai gens différents dans différents conseils avec lesquels je travaille. Et c'est à peu près 90% des cas, c'est que vous invitez simplement les gens à travers Ah, ce bouton de partage en haut à droite, et vous les ajoutez visionneuse à elle. Si vous voulez accéder à une société comme plus grande, ils utiliseront généralement cette section ici, qui crée une équipe. Ok, cool. Une fois que vous avez des gens dans votre conseil, si ce sont des ingénieurs. Une de mes autres choses préférées à propos de Fig MMA est que vous pouvez faire savoir à vos ingénieurs qu'ils peuvent inspecter ces conceptions et qu'ils peuvent obtenir des attributs de code. Vous pouvez tout ce que vous pouvez aussi les utiliser. Donc, si vous venez ici à droite où nous avons conçu le prototype et nous avons l' onglet de code Donc si vous appuyez sur l'onglet de code, c'est génial et vous cliquez sur n'importe quoi ici. Il vous donnera les attributs orteil tout ce que vous avez cliqué sur. Donc, vous pouvez voir que j'ai cliqué sur ce formulaire par défaut ici. Et si je clique sur le texte, il me montrera la position. Cela me montrera la pensée que j'utilise le style de police, le poids de la police, la taille de la police, la hauteur de la ligne. Cela me donnera aussi l'espacement des lettres. Et ils peuvent copier ça. Ils peuvent simplement le sélectionner, commander C et être prêts à partir. Ça fait aussi une autre chose géniale pour toi, n'est-ce pas ? Et il leur montre des inspections, donc il leur montre l'espacement entre la gauche et la droite ici de cette forme. Il leur montre l'espacement entre le haut de ce tableau d'art et le bas. Même avec ce bouton. Donc, tout ce qu'ils cliquent sur moi, ils peuvent obtenir les détails de l'inspection pour que je puisse venir par dessus leur bouche. Tu vois, c'est 104 de ce côté, l' un des cinq de ce côté. Il y a beaucoup de fois dans la journée, on avait l'habitude d'inspecter nos de documents et defaire ce qu'on appellerait « redlining » ce que vous voyez ici. Et c'était deux. Informer les dimensions et l'espacement des pixels pour les ingénieurs et les aider à décomposer notre aide. Nous décomposions nos conceptions pour les aider à comprendre comment nos conceptions sont présentées d'un point de vue de la composition. Mais maintenant, nous n'avons pas besoin de faire ça. Ils peuvent juste entrer et ensuite ils peuvent voir basé sur l'utilisation de cet onglet de code. Ce que tout ressemble, ils peuvent cliquer sur les formes, voir ce que cette largeur et la hauteur. Ceci ici pour ce rectangle. Quel code hexadécimal de couleur il est qui peut copier ces codes hexadécimaux rend vraiment facile pour eux d' inspecter votre conception. Si vous les invitez en tant que spectateur, ils ont toujours accès à, hum faire, voir le code ici. Ils n'ont pas besoin d'être rédacteurs pour entrer ici et attendre votre design. S' ils veulent changer quoi que ce soit , ils doivent être rédacteur en chef. Vous pouvez donc inviter un ingénieur comme un spectateur. Et ils ont toutes les fonctionnalités que vous voyez ici à partir de l'onglet de code et ils peuvent également aller dans le prototype est bien, et cliquez sur le prototype et voir comment la fonction est cool. Alors allons jeter un oeil au point suivant, qui est comment les actifs d'exportation de pointe. Disons que je voulais que Teoh exporte cette illustration de cette Boba ici. La boue de figue le fait Très simple. Tout ce que vous avez à faire est de sélectionner l'icône ou l'illustration et d'appuyer sur. Si vous faites défiler vers le bas à droite ici sur votre onglet de conception, appuyez simplement sur le bouton plus. Il a l'exportation, puis il vous donne différentes options. Ici, vous pouvez faire un x deux x ça va le faire exploser, euh, et le rendre plus grand. Donc, si je fais deux X, cela va le faire doubler la taille qu'il est en ce moment et il a PNG J peg spg. Pdf donc la plupart du temps, lorsque vous implémentez pour des logiciels que vous n'allez pas utiliser. PDF utilise p et G pour les actifs ayant un arrière-plan transparent. Donc à peu près une icône que vous avez besoin et vous utilisez J piquets principalement juste pour les photos. Donc, la plupart du temps, vous utilisez soit un PNG pour vos icônes ou ce que nous appelons un SPG. Il s'agit d'un graphique vectoriel évolutif. Donc si j'ai donné un PNG à l'ingénieur, ça veut dire qu'ils doivent garder cette icône entendre cette taille. S' ils agrandissent cette icône, elle est pixélisée. Mais si je leur donne un SPG un graphique vectoriel évolutif, cela signifie qu'ils peuvent le mettre à l'échelle. Ils peuvent en fait agrandir comme je le fais en ce moment et ça reste propre. Il n'est pas pixellisé. Comme vous pouvez voir les lignes, vous êtes vraiment propre. Donc, la plupart du temps, nous donnons S P. G pour ces types d'icônes, et tout ce que vous avez à faire est de sélectionner l'icône que vous souhaitez, ou l'illustration que vous souhaitez sélectionner SPG appuyez sur le bouton d'exportation ici. Je vais le mettre dans mon téléchargement et je l'ai exporté. Alors allons jeter un oeil à ce que ça ressemble, il y a mon Boba, Tsv g, et vous pouvez voir qu'il est ici en haut à gauche. Allons refaire ça. Allons prendre un Nikon. Prenons cette icône du thé Boba et moi ici. OK, alors appuyez sur l'exportation. Allez à S V G ici, Exporter le logo. Maintenant, il va regarder que c'est SPG aussi et vous pouvez le voir ici. Faisons-le en PNG pour que vous puissiez voir. Alors allons de l'avant et sélectionnez PNG ici. Exportez ce logo et allons jeter un oeil à ce qu'il ressemble. C' est un PNG pour voir comment il a une salle arrière transparente. Allons-y, c'est une cheville J et vous pouvez voir comment a un fond blanc maintenant comme une cheville J, donc figure qu'il rend très simple d'exporter des actifs. Si vous sélectionnez cette boisson à thé Boba et ce thé Boba, um, logo ici, vous pouvez également exporter plus d'un à la fois. Donc disons que je veux ça comme une exportation PNG. Ceux-ci remplacent les fichiers, ils exporteront les deux. Vous pouvez voir le PNG ici ou le thé Boba, et le logo ici a été exporté. Disons que je veux les deux comme un seul atout. Donc, tout ce que vous avez à faire ici est de sélectionner à la fois l'illustration et le logo et de faire un clic droit ou appuyez sur la commande G et de les regrouper en un seul élément. Appuyez ensuite sur l'exportation en bas. Droit. Allons-y et faisons ça A P et G Exportons-le. Appelons ça logo et T et vous pouvez voir maintenant c'est un atout. Donc, en général, ce que vous allez vouloir faire est de parcourir votre conception et d'exporter tout ce qui ne peut pas être conçu. qui serait comme ce globe oculaire. Ce serait le logo de cette page. Donnez-lui le logo ici, ces photos que vous voulez exporter. Alors appuyez sur l'export ici et allez à J. Peg et exportez ces photos. Maintenant, vous pouvez voir la photo ici. Vous voudriez exporter ces petites carottes que nous avons faites ici pour les boutons déroutants. Cette coche, juste en les sélectionnant, vous voulez exporter ce X ici ? Cette coche, juste en les sélectionnant, Ils veulent juste passer par tout ce qui n'est pas, euh, du texte, des couleurs et, euh, ou des boutons et juste exporter les icônes, les illustrations, les photos. Donc, dans ce cas, vous voudrez exporter ce cercle blanc et la carte, et là vous l'avez. C' est à peu près ce que vous pourriez faire pour exporter tous vos actifs et le mettre dans un dossier , et vous pourriez être en mesure d'implémenter cette application. Maintenant, avec le prototype et les actifs qui ont été exportés, vous pouvez les remettre à votre équipe d'ingénierie, ou vous pouvez le mettre sur le site pour vous-même et être prêt à partir. Très bien, donc ça couvrait surtout comment inviter les autres dans le tableau. À quoi ressemble la collaboration pour voir la souris d'autres personnes et comment exporter les ressources U Y et inspecter le code pour l'ingénierie ? Dans la prochaine vidéo, nous allons passer par les raccourcis clavier. Dans la prochaine vidéo, On va regarder des branchements, euh, et je te verrai là-bas. Merci encore. Au revoir. 8. Raccourci clavier et Keyboard prises de l'utilisateur avec des kits GUI: Bon, bienvenue à la prochaine vidéo. Nous allons couvrir les raccourcis clavier MMA fig et nous allons plonger dans les plug-ins figment et aller regarder kits gooey aussi bien. Bon, alors passons à Ah, les raccourcis clavier. Donc je suis dans le fichier de conception que vous avez ici, et j'ai créé une page appelée Quickies ici. Alors allez-y, allez sur les touches trop rapides, et j'ai tapé une liste de mes raccourcis clavier préférés ici. Ce sont ceux que j'utilise le plus commun, et je vais les parcourir avec vous ici tout de suite. Hum, donc le premier ensemble que j'utilise beaucoup il y a des outils à gauche et des commandes à droite. Donc, pour les outils, j'utilise beaucoup V pour accéder à l'outil de sélection. Cet outil de sélection me permet de sélectionner des éléments et des objets sur le tableau. Donc, disons que je suis dans l'outil rectangle ici, et que je veux passer rapidement à un outil de sélection. Je viens d'appuyer sur le et maintenant je suis de retour à l'outil de sélection. J' utilise P pour entrer dans la broche. Outil savonneuse sur mon clavier m'emmène rapidement à l'outil stylo que je pourrais faire une sélection ou dessiner forme comme je le fais en ce moment. Et puis si je veux sélectionner cette forme, je compresse V et maintenant je suis de retour à l'outil de sélection. Et je peux déplacer cette forme autour i u Z beaucoup pour arriver à l'outil de zoom pour procéder dans le zoom, outil, outil, cliquez et faites glisser, et j'ai zoomé sur la zone que j'ai cliqué et glissé J'utilise Ah, ils sont pour l'outil rectangle beaucoup. Donc il suffit d'appuyer sur sont et je peux créer un rectangle ici. Puis-je compresser V commencer à le sélectionner et oh, pour l'outil de cercle. Et si je maintiens le décalage quand je fais un cercle, ça me donnera un cercle parfait par aller sans décalage. Il fera des ovales pour moi, et vous pouvez voir une fois que je crée l'ovale ou le cercle ou le rectangle et saute automatiquement à l'outil de sélection ici, l pour l'outil de ligne. Cela me permet de créer des lignes que vous pouvez voir quand je maintiens Shift. Il vous donne des lignes droites quand vous ne tenez pas le décalage. Cela vous permet de faire n'importe quelle ligne que vous souhaitez. Donc, il y a la ligne là-bas. Dormez cette barre d'espace pour l'outil à main qui vous permet de vous déplacer facilement dans l'espace du tableau d'art . Et puis, euh, je pour l'outil pipette, qui vous permet de sélectionner des couleurs. Donc, disons que j'ai ce rectangle et je veux facilement aller saisir cette couleur rose ici. J' appuie sur I sur le clavier. Vous verrez qu'il ouvre un petit cercle ici qui vous permet de voir la couleur que vous sélectionnez, et je vais aller sélectionner. Dis, ce rose ici et regarde mon rectangle. Il devient rose. Donc des outils assez simples là, euh, et des raccourcis pour accéder à ces outils. Les prochaines dont je veux parler ici sont les commandes. Donc, um, pour zoomer, vous pouvez faire une commande plus, puis zoomer et ensuite, pour zoomer, vous pouvez faire la commande moins certains, zoomer, zoomer, zoomer, zoomer avant. C' est beaucoup de temps. J' utilise ces commandes avec la combinaison de Z pour la scie à crayon. Zoom avant, sélectionnez l'espace que je veux. Si je suis trop loin, je vais zoomer ou je vais zoomer à nouveau et ensuite j'utiliserai la barre d'espace pour la main disant de se déplacer. D' accord, donc la prochaine que nous avons ici est pour les options de texte. Donc vous pouvez voir que j'ai ce texte ici 12 et 3. Quand je fais le déplacement de commande plus mince, ça va augmenter la taille des textes. Et si je fais le déplacement de commande plus petit que cela va réduire les textes vu Sélectionnez le texte 123 ici et je vais aller commande shift inférieur à et vous pouvez le voir. Il devient plus petit, certains réduisant la taille du texte. Et si je fais le changement de commande plus mince, alors il va monter. Taille le texte pour que vous puissiez voir le Texas grandir. Maintenant, la prochaine chose que je fais en conjonction avec le décalage de commande supérieur à inférieur à celui de rendre texte gros est également d'utiliser le décalage d'option supérieur à un moins que de diminuer la hauteur de la ligne ou augmenter la hauteur de la ligne. Donc, vous pouvez voir maintenant la hauteur de la ligne, ce genre de squished. J' ai des mots qui se chevauchent. Donc pendant que j'ai encore cette sélection, je vais passer de la je vais passer de lacommande Shift et passer à l'option Shift. Donc, je suis passé du décalage de commande supérieur à inférieur et maintenant je vais aller à l'option shift et vous pouvez voir ce qui se passe ici est que j'augmente la hauteur de la ligne en faisant le décalage d'option supérieur à et puis je le diminue en faisant le décalage d'option. Moins que ça. Encore une fois pour diminuer la taille de la police et la sélectionner. Et je fais le décalage de commande inférieur à et je diminue la taille de la police, puis pour augmenter la hauteur de la ligne, je vais passer à l'option shift pendant que le texte est toujours sélectionné et je vais aller à option shift moins que de diminuer la hauteur de la ligne et supérieure à l'augmenter. Donc ces quatre ici prennent un peu de pratique à le faire, mais une fois que vous en avez le coup, il devient très naturel. Ok, la prochaine chose que je veux montrer est, euh, la commande pour déplacer des couches sur l'autre appelé « avancer ou au-dessous de l' autre  », qui s'appelle « ramener vers l'arrière ». Donc ces deux commandes ici. Donc, disons que j'ai ces deux rectangles ici, et c'est pour n'importe quel calque, n'importe quelle forme, et il texte n'importe quel élément graphique que vous utilisez dans la figure MMA. Si je veux mettre ce rectangle sous le rectangle noir sous le rectangle rose . Tout ce que j'ai à faire est de sélectionner le rectangle noir. Faire l'option de commande et je peux aller vers le bas pour ramener en arrière et vous pouvez voir qu'il va au-dessous du rectangle. Et si je veux apporter ci-dessus direction à nouveau, je vais juste utiliser l'option de commande flèche vers le haut. Vous pouvez voir comment ça marche. Je peux aussi les faire avec plus d'une forme. Donc, si je maintiens le décalage et que je recueille et que je sélectionne ces deux rectangles, je peux aussi les déplacer de haut en bas. Donc, disons que je veux le ramener en dessous du texte ici et que je peux les ramener. Je veux tellement à peu près 80% à 90% de l'utilisation de l'outil dans la fig MMA. Vous serez en mesure d'avoir ces ensembles de commandes rapides et qui couvriront la plupart de leur utilisation d'outils que vous utiliserez. Et je les ai aussi laissés ici dans ce document. Donc, si vous venez au document ici et que vous voyez les clés rapides, vous les aurez ici. Une autre façon de voir les rapides dans la figue MMA est si vous allez au petit point d'interrogation ici en bas. Où dit l'aide et la ressource est et vous cliquez sur cela, puis vous allez Teoh raccourcis clavier rapide ici. Allez-y et cliquez dessus. Et puis voici tous vos raccourcis clavier ou touches rapides ici, et vous pouvez voir pour les outils. Voici toutes celles pour les outils. Voici tous ceux pour voir que vous avez zoom. Oui, raccourcis de texte, formes, sélections, curseurs à ses transformations, disposition et raccourcis de composant là. Donc, si vous voulez juste aller sous le capot et voir quel type de raccourcis figure figment fournit pour vous, vous pouvez aller ici en cliquant sur le point d'interrogation inférieur droit et aller dans les raccourcis clavier comme So. Une autre façon de voir les raccourcis clavier est, chaque fois que vous êtes dans un outil, disons que je veux regarder l'outil rectangle ou l'outil ligne où l'outil lèvres il fournit des raccourcis vers la droite ici. Donc, il ya des raccourcis vers votre cadre et votre outil de sélection de l'outil de tranche, et il fait également la même chose ici. Si vous allez dans les menus Seiken, sélectionnez un objet, et je pourrais voir tous les quickies ici sur la droite Alors apportez l'avant. Amenez l'envers. Verrouillez le calque ici et de même pour l'édition. Annuler, commande Z redo, commande shift. Voir Couper, commande X copy, commande. Voir la commande Coller V Coller sur la commande Selection Command shift B. Ainsi, vous pouvez également afficher les claviers de plusieurs façons. Vous pouvez le voir par la question Mark, et vous pouvez également aller dans les menus ici et les outils et voir les raccourcis au fur . Bon, Cool. Donc ça couvre les claviers. Allons voir certains des branchements maintenant. Donc j'ai créé une autre page ici dans le fichier Sigma que vous avez et celui-ci s'appelle Plug-ins favoris. Et ce sont mes quatre branchements préférés que tu as confinés dans la figue MMA. Donc, pour aller trouver des branchements de pied et pour aller regarder les bouchons de menthe, il suffit de passer en haut à gauche. Ici, allez à votre tableau de bord. Cliquez sur les quatre cases ici en haut à gauche, vous emmène au tableau de bord. C' est là que vous avez la possibilité de rechercher des projets. Ici vous pouvez voir vos projets récents. Vous avez vos courants d'air et ensuite vous avez vos branchements. ici. Donc ce sont tous vos plug ins ici, et mes quatre plug ins préférés ici sont appelés contenu. Riel, correcteur orthographique, débloque les cendres et la faucille de carte pour voir qu'il y a des gens populaires ici. Ils sont très populaires. Ceux-ci d'abord à l'dans éclabousser le contenu riel. Vous pouvez également rechercher des plug-ins, alors allez simplement parcourir tous les plug-ins et vous pouvez taper, disons, carte, faucille. Ici, vous pouvez voir celui ici. Vous pouvez également taper le vérificateur orthographique. Vous pourriez voir le correcteur orthographique ici. Ils sont assez faciles à installer. Donc, allons juste dire que je veux installer ce correcteur orthographique pendant que vous avez à faire est de cliquer sur Spellchecker. Vous pouvez voir où il est installé. Je peux le désinstaller, puis cliquer à nouveau, et je l'ai installé dans l'application. Des trucs assez simples. C' est amusant de simplement faire le tour et de loger tous les branchements que le produit vous fournit . Il y en a des tonnes. Ils sont plutôt cool. Allons voir quelques-uns de mes favoris ici, et je vais vous montrer comment utiliser un plug in. Revenons au dossier ici. Il suffit de cliquer sur votre fichier de classe figment. Je suis sur la page branchée ici. Allons regarder le contenu Riel. Donc, beaucoup de ces branchements vous voulez sélectionner un élément. Alors allons de l'avant et attrapons et faisons un rectangle ici en haut dans la barre de menus. Ici, vous avez des branchements. Vous allez de l'avant et cliquez sur les plug-ins, et ce sont ceux que vous aurez installés. Alors, dans ce cas, allons regarder le contenu Riel. Donc, je clique sur le contenu réel, et il ouvre ce plug in. Et ce que cela fait, c'est qu'il me fournit. Je suis différents types de contenu dont j'ai besoin. Quelqu' un l'a mis boîte de texte ici, et il me donne des avatars de texte et des icônes. Donc, si je clique sur ce texte et que je veux des noms, il me donne des versions aléatoires des noms me donneront des numéros de téléphone aléatoires. Ça me donnera les adresses dont j'ai besoin. Ça me donnerait des dates et des heures. Il va remplir avec Laura up certains si vous voulez juste du texte par défaut, e-mails générés au hasard et générés au hasard vous RL ainsi. Je peux également cliquer sur cette forme de rectangle ici goto avatars, et cela me donnera automatiquement différentes photos de personnes scientifiques veulent mâles disent femelles ici je peux faire à la fois mâle et femelle. C' est juste une sélection aléatoire de photos. Donc je suis facile si je fais tout un tas de différents, hum, planches d' équipe En ce moment, équipe En ce moment, j'ai besoin de différentes photos de personnes ou de médias sociaux où je peux voir que j'ai beaucoup de gens dans les photos orteils rempli mes dessins. Cela rend vraiment facile de faire cette prochaine chose, il a aussi quelques icônes. Vous devez installer une police pour utiliser les icônes. Je n'utilise pas vraiment les icônes autant à nouveau. J' utilise le projet de nom ici. Je vous ai montré plus tôt où si vous voulez un, disons, une icône de profil, juste aller au substantin Project. Vous pouvez le télécharger comme je vous l'ai montré dans la vidéo précédente et faire glisser le graphique vectoriel évolutif dans votre fichier figment et vous pouvez l'utiliser. D' accord. Un autre plug cool dans que je trouve vraiment précieux est unspool cendres. Donc, si vous devez décompresser les cendres, ce sont juste des photos gratuites que vous pouvez utiliser Donc, il va au-delà de seulement des photos de gens ici tels sélectionner ce carré et je pourrais juste insérer des photos aléatoires. Ça me donnerait juste un hasard. C' est une très belle photo là-bas, mais ça me donne aussi quelques presets ici. Je peux avoir des animaux, l'architecture, et si je clique à nouveau sur l'architecture, cela me donne plus d'options architecturales. Même dans la nature me donne la nature aussi. Je sais remplir n'importe quelle forme. Disons que je veux, um, um, un cercle ici que je fais du portrait. Donnez-moi une vue portrait ici ou de l'espace et je peux aussi chercher des trucs. Disons que je veux comme un tigre et qu'il y a quelques photos de tigres ici. Plutôt cool, non ? De telles cendres déboguées. Juste un moyen rapide d'obtenir un accès gratuit à de nombreux types de photos différents ainsi. Vous pouvez également aller orteil sur Splash dot com, et ils ont une bibliothèque de photos que vous pouvez télécharger. D' accord. Le suivant est le vérificateur orthographique, alors allez-y et sélectionnez une typographie, des paragraphes ou du contenu écrit. Allez à votre fiche et cliquez simplement sur le correcteur orthographique là et il le fera. Il vérifiera automatiquement tout ce que vous avez, alors laissez-moi partir. tout ce que vous avez, Retournons, Teoh. Touches rapides ici, sélectionnez tout cela. Va faire le correcteur orthographique et maintenant il est en train de se charger. Ça me dit que je suis mal orthographié ou qu'il y a un espacement incorrect. Donc assez soigné. Euh, avez sept erreurs ici à propos de l'outil de pipette. Allons sélectionner les commandes. Ils vont probablement me donner des erreurs ici aussi, aussi . Oui. On a montré quelques erreurs. Qu' est-ce qui est triste ? Mauvais orthographié. Ce mot verrait la commande. Et je vérifie l'orthographe. Eh bien, je suppose que c'est un mot. Mais, euh, ouais, le meilleur cas pour quand tu épelles si tu veux. vérification orthographique est utilisée Graham tôt. Vous pouvez copier et coller ceci dans un e-mail et 1/2 gramme plus tôt. Vérifiez-le aussi. Bon, cool. La prochaine chose à vérifier est la carte Sickle. Certains obstacles sont plutôt cool. Un de mes branchements préférés ici. Encore une fois, commencez par la forme qui s'est dégagée cette année. Faire un rectangle grand. Et c'est pour tout ce que vous voulez lié à la carte. Donc, si vous voulez vous éloigner du style normal d'une carte Google et que vous voulez avoir un thème plus sombre ou comme, unecartethématique, carte vous pouvez venir ici pour cartographier, faucille, cliquer sur la faucille de la carte ouverte, et il vous donne différents styles ici. Soudain, déplacez un peu vers la gauche. Disons que c'est un style de rue. C' est plus graphique. Vous pouvez faire le style extérieur. Ici, vous faites un style léger. J' aime un thème sombre qui vous donne un satellite. Voici votre satellite plus rues ici. J' aime le thème sombre personnellement. Beaucoup de thème sombre, vous pouvez en créer d'autres avec, Um, vous pouvez zoomer. Je pourrais amener le monde entier ici si je le voulais. Faisons les États-Unis. Beaucoup de Californie et moi pouvons faire différents whiffs ici, alors disons 1000 par 1000 Si je voulais et j'appuie sur créer une carte, ça va me donner une capture d'écran de ce design à l'intérieur de la forme. Ici. Je vais en avoir une avec beaucoup de rues, petites lignes qui sont difficiles à créer. Disons que San Francisco ici et vous pouvez voir maintenant que j'ai San Francisco généré. Dans cette forme, c'est une image. Donc, je vais à mon image de sentir ici. J' ai l'image ici. Je peux entrer et recadrer cette image si je veux acheter en appuyant sur la récolte en haut. Et c'est la faucille de la carte. Donc ce sont mes quatre branchements préférés. Je vais les laisser là pour toi, et tu pourrais les utiliser et les brancher. là pour toi, Hum, et vous pouvez trouver vos branchements ici. Une autre façon d'aller voir votre homme. Il à vos plug-ins est si vous cliquez simplement sur les plug-ins en haut, aller à gérer les plug-ins, il vous ramènera à cette page que nous venons de visiter. Très bien, la dernière chose est d'aller voir comment télécharger des kits gooey. Donc un kit gooey est, euh, le mot que vous e g u je veux dire interface utilisateur graphique, et la figure a tout un tas d'entre eux à utiliser. Donc, si vous allez à une recherche Google, j'en ai un ici pour vous et vous venez de chercher Google et télécharger fig MMA gooey kits. Mon préféré est ce téléchargement 49 gratuit. Um, c'est le toi que je stocke dot com. Si vous cliquez sur celui-ci, il vous mènera à un lien ici, et cela a tout un tas de boutons, vous savez, et Ah vert, vous savez, et Ah vert, Ici, lesquels sont pour la figue ? MMA ? Ils n'ont pas pour la vision d'esquisse, d'autres outils de conception. Et disons que vous voulez ce tableau de bord Web de base de pièces ici. Tout cela est gratuit. Vous venez juste d'entrer, appuyez sur le téléchargement gratuit, il sera bas en bas dans le bas à gauche. Allons-y et ouvrons ça. Lorsque vous ouvrez ce dossier, il vous donne des P et G de ces conceptions ici. Vous pouvez voir. Et il a un thème sombre dans un thème léger. Il vous donne également ce fichier figment. Donc, si vous voulez installer ce fichier figment, euh, faites la même chose que nous avons fait au tout début où vous avez téléchargé le fichier Sigma que j'ai fourni et vous l'avez glissé et déposé dans votre espace brouillon ici. Alors je vais te montrer. Donc ce que vous allez faire ici est ce crabe ce fichier et il suffit de cliquer et de le faire glisser dans la fig MMA comme ça . Et il va importer ce fichier et vous pouvez aller de l'avant. Je vais annuler. Il était déjà l'avoir téléchargé. Ok, cool. Une autre chose que vous pouvez dio vous pouvez également faire glisser et déposer des fichiers de croquis de la même manière dans fig MMA, et il va tirer dans vos fichiers de croquis avec tous les dessins prêts à l'emploi, il ne gardera pas la couture prototype que vous n'avez pas esquissé. Mais il traduira tous les dessins que vous avez faits dans Sketch en deux fig Mahir. Allons avec le tableau de bord Web de base Coin garçon cône. C' est celui qu'on vient de télécharger. Et vous pouvez voir que j'ai les thèmes de la lumière ici, et j'ai les kits gooey. Je peux entrer dans tout ça. Aiken, sélectionnez les éléments graphiques de ce gamin QE. Je peux les changer un peu. C' est un bon point de départ. Vous cherchez à commencer pour le design de base dans ce cas, euh, euh, avoir un tableau de bord pour la base de pièces. Et il a les deux versions claires, et il a les versions sombres ici. Une houle comme vous pouvez le voir, il y a des tonnes de kits gooey ici, hum, que vous pourriez télécharger en ligne et vérifier et jouer avec. Mais c'est comme ça que tu fais ici. Et ils apparaissent sur votre tableau de bord ici, comme je l'ai fait sur le Web, euh, euh, bord Web de base de pièces de monnaie ici que vous venez de voir. Ok, cool. Donc, c'est un aperçu de, hum, peu près comment faire des raccourcis clavier et comment utiliser les plug-ins de comprendre et télécharger des kits Q B dans la dernière vidéo montrera. Nous allons voir comment créer des commentaires, des symboles qui auront quelques réflexions finales et aller de l'avant. Droit ? Voir la dernière vidéo. Prenez soin de vous Bye. 9. Commencer et réflexions finales: Bon, bienvenue à la dernière vidéo sur la façon de construire une application mobile en utilisant fig, mon outil de conception. Donc, à ce stade, nous allons passer par la façon de créer des commentaires dans le contexte d'un design est assez simple et avoir quelques réflexions finales et aller de l'avant. Allons-y, et nous sommes sur le fichier imaginé que vous avez téléchargé. Revenons à notre onglet Apprentissage Paige, où nous avons construit le prototype ici, et je vais vous montrer comment vous et votre cellule, vous et vos coéquipiers pouvez partager des commentaires basés sur la conception que vous voyez ici. Alors passons ici et créons quelques commentaires. Donc, si vous voyez en haut à gauche la barre d'outils ici en haut à gauche, il y a une petite icône de bulle de haut-parleur. Allez-y et cliquez dessus, et cela montrera des commentaires mais vous donnera également la possibilité de déposer un commentaire. Alors allons de l'avant et laissons un commentaire. Disons, hum, laissons tomber un commentaire sur la carte ici, et je vais écrire un peu Zoom sur la carte, et j'ai placé un commentaire là. Et donc c'est bien que vous pouvez voir que le commentaire est dans le contexte de l'élément de conception dans lequel je commente, ce qui rend vraiment facile de comprendre vos coéquipiers quand ils vous donnent des commentaires sur votre conception à ce qu'ils sont se référant à. Vous allez peut-être à cette ligne ici est comme aligner la capacité de la ligne et sans le contexte. Si vous venez de lire un commentaire qui définit l'opacité de la ligne, vous ne sauriez pas à quoi cette personne faisait référence. Mais comme ils ont laissé tomber ce commentaire directement sur la ligne, vous avez une idée de ce changement. Et encore une fois, disons que c'était un changement que nous devions apporter. C' est pourquoi nous avons la bibliothèque de composants. Voici tout ce que vous avez à faire maintenant est de prendre cette ligne et ce qui est de leur capacité à 40% maintenant . Et revenons à notre apprentissage Paige. Et maintenant, chaque ligne sur chaque page a été mise à jour, euh, dans cette zone. C' est pourquoi nous fabriquons ces composants. Cela rend vraiment facile de faire des changements comme ça qui viennent parfois par le biais des commentaires. Revenons en arrière et disons que je veux revoir mes commentaires à nouveau. Tout ce que vous avez à faire est de cliquer dessus et vous verrez les commentaires sur et où ils existent. Et vous verrez également sur la droite, vous verrez une liste de vous. tous les commentaires qui se sont produits ici une fois que j'ai terminé un commentaire ou une fois que j'ai terminé un commentaire, je peux cliquer sur la résolution ici et cela disparaît. C' est ainsi que vous résolvez un commentaire et partez. Un autre que je veux faire ici est Faisons juste un commentaire de test. Voici Aiken. Tagez les gens en faisant l'à. Et voici une liste de personnes que j'ai dans mon projet, et Aiken les a étiquetées avec ce commentaire. Alors voyons tomber. Je peux me marquer. Ok, cool. Et je vais aller de l'avant et me marquer ici. Et cela m'avertira. Je vais recevoir un e-mail que quelqu'un a laissé un commentaire dans mon fichier de conception FIG MMA. Et donc j'ai limité les commentaires ici, mais je peux aussi le voir à travers les notifications par e-mail, ce qui facilite la gestion de beaucoup de commentaires à venir. Donc quelqu'un me laisse un commentaire, je vais entrer, ils m'y étiquettent. Donc quelqu'un me laisse un commentaire, je vais entrer, J' ai lu le commentaire et je voulais dire résoudre ou avoir une conversation avec eux. Telle à peu près l'essence des commentaires et comment les commentaires fonctionnent. Vous pouvez les revoir. Une fois que vous vous éloignez de l'icône de commentaire, ils disparaissent. N' oubliez pas que vous ne pourrez pas les voir tant que vous n'aurez pas cliqué sur l'icône de commentaire ici en haut. C' est l'annonce des orteils et montrer les commentaires. Et puis vous pouvez faire le tour et cliquer sur autant de commentaires que vous le souhaitez, et nous finirons simplement. Ce bouton est génial. Faisons un joli commentaire. Tu aimes un peu d'emoji ici ? Comme les pouces en haut ? Cool. Voilà, Rights . Ce sont des commentaires en un mot. Hum, et la dernière chose est juste quelques dernières pensées sur l'avenir. Encore une fois, il y a beaucoup d'autres choses qu'on peut couvrir dans la Fig MMA. J' ai abordé la plupart du temps le prototype de base et les transitions au sein des prototypes et comment concevoir cette application mobile ici. J' espère que tu en as un peu de valeur. Ma dernière pensée est juste qu'il faut de l'entraînement. Juste continuellement s'entraîner dessus. On a fait une application mobile. Si vous voulez faire, disons, une version Web, j'ai fait une nouvelle page ici. Appelez ça Web allez à votre tableau d'art ici et vous pouvez prendre une version de bureau ici. Allons de l'avant et vous aimez un livre Mac et vous pouvez concevoir un site ah aussi bien. Ce n'est donc pas seulement pour les applications mobiles. Vous pouvez faire à peu près n'importe quelle taille d'écran ici et prototype n'importe quelle expérience utilisateur que vous optez pour, hum, et aussi aller de l'avant. Assurez-vous de télécharger la fig MMA application miroir sur votre appareil mobile si vous êtes particulièrement si vous faites des expériences utilisateur mobile sur ce qui vous permet de voir les conceptions d' écran mobile directement sur votre téléphone afin que vous puissiez voir à quoi ils ressembleraient sur le téléphone. C' est vraiment important. Et si vous voulez rester connecté avec moi, vous pouvez aller sur mon site web. C' est Aaron Lawrence design dot com, et vous pouvez venir voir des liens vers mon travail. Vous pouvez me contacter directement via le site ici. Vous allez contacter très ici sur le fond. Vous voyez une partie de mon travail et pourtant, à l'avenir, je vous souhaite le meilleur. J' espère que cela a été précieux pour vous, et j'ai aussi quelques cours supplémentaires que vous pouvez consulter sur la conception de l'expérience utilisateur. J' espère que cela a été précieux pour vous, Si vous venez de chercher mon nom ou de trouver certaines de mes vidéos en tapant votre design x slash ey et vous me verrez dans une autre classe qui plonge plus profondément dans le processus UX des pneus qui est présenté ici où nous allons par l'or, faire objectif établissement des problèmes et des hypothèses Nous l'avons fait. Je vous enseigne comment parler aux utilisateurs et les clients ont eu une synthèse, synthétiser et thème vos idées que vous avez appris que vous êtes à la recherche d'identification des besoins des utilisateurs et des validations et à venir avec des expériences pour valider votre hypothèse sur ce que vous pensez fonctionnera ou comment vous résoudrez un besoin de l'utilisateur ou un problème. Et vous allez créer une interaction, modèle ou un prototype et comment tester ce prototype, puis comment collaborer avec les responsables de produits , les ingénieurs et exécuter les conceptions que vous possédez, puis poursuivre la l'élaboration, la mesure et l'apprentissage de ce processus de lancement de logiciels et l'apprentissage de l'itération et du changement pour réussir. Ok, eh bien, vous l'avez. Merci encore et j'espère que vous le meilleur et je vous verrai dans la prochaine classe. Au revoir. 10. Vidéo bonus 1 - Résolution, reproches et déplacez - Déplacez: Les vidéos bonus. Dans les quatre prochaines vidéos, nous allons donc couvrir un tas d'autres fonctions de prototypage au sein de Figma. Et nous allons également couvrir certaines des dernières fonctionnalités lancées par figma, y compris les variantes de composants et les composants interactifs, ce qui est super génial. Et comme tout, comme toutes mes vidéos que j'ai ici, j'ai créé un fichier pour vous. Donc, si vous téléchargez, le fichier devrait ressembler à ceci, où dans chaque ensemble de fonctions ou de fonctionnalités prototypes que nous apprendrons dans cette classe. J'ai le haut de gamme en est l'exemple ici. conséquent, cette rangée couvrira l'exemple de ce que nous allons apprendre. Il est prototypé, prêt à partir au cas où vous vous perdiez et que vous vouliez voir comment je l'ai fait. Et ensuite, nous le ferons ensemble dans la vidéo ici. Vous verrez donc l'exemple et vous verrez celui que vous faites. Et nous ferons celui qui dit que vous le faites ensemble. Nous couvrirons également toute une série de nouvelles fonctionnalités prototypes, y compris des sélections déroulantes et des modales, ainsi que des menus. Nous chercherons à créer des cadeaux de chargement en utilisant la fonctionnalité de prototype smart animate feat. Nous effectuons également un balayage horizontal, un balayage vertical. Nous combinerons les deux pour créer une interaction riche en balayage de carte. Nous couvrirons également certains composants et une variance. Et les composants interactifs qui sont vraiment amusants et utiles à intégrer. Ok, donc vous ne devriez pas avoir ce dossier. Si ce n'est pas le cas, allez-y et téléchargez-le. Et rappelez-vous que lorsque vous le téléchargez, vous verrez peut-être qu' il s'agit d'un fichier zip. Donc, si vous voyez le ZIP à la fin du format de fichier, cliquez trois fois sur ce fichier, double-ou triple clic. Et il ouvrira le fichier ici et ira dans ce dossier. Et rappelez-vous, vous ne pouvez pas simplement cliquer trois fois sur ce fichier FIG, fig ici. Vous devez en fait aller dans Figma et entrer dans vos sections de brouillons. années ne ressembleront probablement pas à la mienne car j'ai un tas de fichiers ici, mais vous entrerez dans vos sections de brouillons dans votre onglet Accueil dans Figma. Et vous allez récupérer ce fichier ici, vous pouvez le voir ici et le faire glisser dans Figma. Vous savez, vous l'avez bien fait quand Figma vous donne ce contour bleu. Ensuite, il chargera le fichier, importera le fichier. Et vous devriez voir le nouveau fichier ici et votre dossier brouillon ici et le regarder. Clôture du chargement. Vous allez appuyer sur le bouton Terminé et vous aurez ce fichier ici. Je vais supprimer celui-ci juste ne pas en avoir de copies. D'accord. Allons de l'avant et commençons avec la première vidéo ici, nous allons couvrir la dissolution, prototype, le retard, l'entrée et la sortie. Jetons donc un premier coup d'œil au prototype de dissolution ici. Je vais donc appuyer sur le bouton de lecture en haut à droite. Cela va ouvrir le prototype. Et la première chose que vous remarquerez, c'est que cela se charge dans un appareil réel. Je n'ai donc jamais couvert ça dans certaines vidéos passées. Mais pour réitérer, si je clique sur l'un des tableaux d'art et que je suis dans l'espace artistique, juste la zone grise. Et je ne suis pas dans l'onglet Design, mais parmi l'onglet Prototype, vous verrez que je peux sélectionner un appareil. Parfois, il va charger n'est pas un appareil. Ensuite, vous pouvez sélectionner le modèle de l'appareil. Donc j'ai ici l'iPhone 11, et je l'ai à Space Gate gris, vous devriez déjà l'avoir chargé parce que je l'ai gravé, intégré dans le fichier que vous avez téléchargé, mais juste au cas où vous ne saviez comment changer les appareils. Bon, allons donc voir la fonction de dissolution sur le prototype. Donc, nous avons à peu près un écran d'accueil, appuyez sur le bouton d'affichage. Et vous verrez cet écran dissous entrer. Et le dissous signifie simplement qu'il a un délai de chargement de cet écran. Il s'agit d'une interaction très simple. Allons de l'avant et commençons par nous assurer que nous sommes premiers dans le type de prototype ici en haut à droite. Ce n'est donc pas l'onglet Design, mais l'onglet Prototype. Et faisons glisser ce bouton Démarrer sur cet écran. Ce que fait ce bouton Démarrer c' est qu'il s'agira du premier écran à partir duquel les prototypes vont se charger. Ok, donc ce que nous allons faire ici, c'est que nous allons appuyer sur le bouton d'affichage ici. Et pendant que nous sommes dans l'onglet Prototype et faites glisser le bras de l'interface graphique vers l'écran suivant. Et vous verrez qu'il est déjà assis, au robinet et dissous. Mais voyons d'abord à quoi cela ressemble instantanément. instantané. Cela signifie simplement qu'il n' y aura pas de retard. Et allons-y et jouons ça. Et si vous appuyez sur le bouton d'affichage, voyez comment il n'y a pas eu de retard. plus souvent lorsque vous êtes dans la fonction prototype et que vous cliquez sur la flèche ici et vous obtenez la boîte de dialogue Détails de l'interaction ici en haut à droite. Il va par défaut taper ou onclick et en état. Et pour celle-ci, tout ce que nous avons à faire, c'est simplement appuyer sur dissoudre. Et ensuite, cela nous donnera de l'aisance à certains états de transition. J'aime aussi faire à la fois à l'aise et à l'aise. L'un ou l'autre dépend de vous. Ils ne le sont pas, ils sont très nuancés. Ils n'ont pas trop de distinctions entre les deux, mais ils sont aisés, faciles à entrer. C'est à vous de décider. Ce qui importe, cependant, c'est le délai. Allons donc faire en sorte que ce délai soit très long. Disons que c'est 5 000 millisecondes. Et allons voir ce retard. Il devrait y avoir beaucoup de temps. Et vous pouvez voir que c'est un délai de 5 secondes. Donc, 5 mille millisecondes ont fait un retard très long. C'est donc un peu trop de dissolution ou de retard. Revenons ici. Revenons-en, disons juste un 1000 et nous aurons une bonne dissolution. Revenez au prototype. Je vais appuyer sur R sur mon clavier. Et ce sera la même chose que appuyer sur le bouton de redémarrage en bas à droite. Et il va redémarrer le prototype là où j'ai mis cette petite étiquette de départ. Encore une fois, il vous suffit de cliquer et de le faire glisser vers n'importe quel plan de travail de votre choix. Appuyez sur Afficher. Et c'était un bon retard là-bas. OK, c'est plutôt cool. Allons de l'avant et regardons le prochain. Ok, donc maintenant cette prochaine interaction ici sur la fonction prototype est un retard, et il s'agit généralement d'un délai d'écran entier. Il y a donc des choses courantes à éviter ici, que je vais aborder dans une seconde. Mais tout ce que vous devez faire ici pour montrer l'exemple, c'est simplement obtenir l' exemple ici, déplacer, glisser-déposer ou faire glisser l'étiquette de départ sur ce prototype. Et nous allons appuyer sur le bouton Lecture. Je vais donc sélectionner ce plan de travail ici et appuyer sur le bouton de lecture. Et vous verrez qu'il dispose d'un éditeur de chargeur. Notre retard, il va à la page haute. Donc une fois de plus de chargement et ça dit bonjour. C'est similaire à une fonction de dissolution. C'est juste que la page entière est retardée. Allons-y et faisons-le rapidement. Cela devrait être assez simple. Faites glisser le début vers l'ensemble des écrans de prototypes qui se trouvent à côté de l'u du. Et cela n'a pas de fonction prototype. Donc, dans un vide ici, c'est que si je clique, disons ce bouton de chargement, en fait, faisons le chargeur. Donc, si je sélectionne ce GIF de chargement, j'ai animé le GIF, et que j'ai tiré l'interface graphique, le bras de l' interface graphique pour que le prototype soit défini sur le plan de travail suivant. Comme ça. Et je clique sur le robinet. Vous verrez que cette fonction après retard est désactivée. C'est une chose courante à éviter. Donc, pour que le plein écran différer et passer à un autre écran, vous devez sélectionner l'intégralité du plan de travail ou l'écran entier. Ce que je vais faire, c'est annuler cette fonction prototype. Et je vais choisir où il est indiqué iPhone 11 Pro. Si je veux nommer ce tableau d'art ici, je peux simplement cliquer jusqu'aux calques. Et appelons cette page de chargement. Ok, donc là où il est dit chargement de la page maintenant, je vais cliquer à nouveau. Et maintenant, j'ai sélectionné tout le plan de travail, qui signifie que j'ai tout ce cadre. Et je vais revenir sur le prototype. Et vous pouvez voir le début ici à partir du prototype sur cet écran. Et je vais le faire glisser vers la page haute ici. Et vous le verrez au robinet. Et si je clique sur la liste déroulante, vous verrez que le délai après avoir été activé car nous avons sélectionné l'ensemble du plan de travail. Alors, allons de l'avant et le faire après un retard. Et juste à côté du délai total, nous avons les millisecondes pour combien de temps nous voulons que cela retarde. Alors, allons-y et faisons-le. Réglons-le sur 5 000 millisecondes SEK, ce qui sera de cinq secondes. Et ensuite, pour l'animation, nous avons des états différents. Nous pouvons faire un instant qui chargera instantanément la page. Et nous avons une dissolution et nous avons emménagé, déménagé, ce que je vais vous montrer dans un peu. Mais allons simplement à l' institut pour l'instant. Nous garderons les choses simples. Bon, ce que je vais faire, c'est sélectionner le plan de travail ici, la page de chargement. Je vais appuyer sur le bouton de lecture. Et vous verrez cette page se charger. Au bout de cinq secondes, il charge la page haute. Il s'agit donc d'une fonction de retard. Revenons donc. Et si vous voyez ici les détails de l' interaction où l' animation indique instantanément, se passe-t-il et appliquez que se passe-t-il et appliquez cette fonction de dissolution que nous avons apprise dans le dernier prototype que nous avons fait. Et ne faisons pas 1000 millisecondes, on peut en faire 500. Et maintenant, vous verrez le haut écran ici. Venez avec une dissolution et ne sera pas une charge instantanée. Donc, cinq secondes vont passer et le chargement, et vous verrez la dissolution. Oui, c'est une dissolution assez rapide. On peut s'amuser un peu avec ça. Allons en ajouter un peu plus. Faisons réellement, faisons 1, 0, 0, 0, 0, 0. Donc, soyez environ 1 seconde. Dissoudre. Va voir à quoi ça ressemble. Ok, c'est plutôt bien là. OK, c'est cool. Si vous êtes intéressé par un chargement gifs animés que vous voyez ici, vous pouvez accéder à notre site Web. Et j'ai les directions à gauche ici. C'est ce qu'on appelle le chargement du point io. Je vais aller de l'avant et remonter un navigateur. Et cela a, des icônes animées gratuites et des gifs animés tout en chargeant cadeaux que vous pouvez télécharger GIF et les insérer directement dans Figma si vous le souhaitez. Disons donc que cette animation vous intéresse, mais je veux changer la couleur. Disons que je veux changer cette couleur pour simplement dire un noir ici. Je vais supprimer tous les autres ici et faire un gris, quelque chose comme ça. Et je veux le télécharger en GIF. Tout ce que j'ai à faire, c'est appuyer sur le cadeau que vous téléchargez gratuitement. Vous le verrez être téléchargé en haut ou en bas à gauche. Alors téléchargez spinner one S. Et tout ce que j'ai vraiment à faire maintenant est de prendre ceci et faire glisser dans Figma. Ce que je peux faire, c'est que vous voyez comment il a un fond transparent ou blanc. Je peux définir ce GIF sur un arrière-plan transparent ici. Et maintenant, je peux le télécharger à nouveau et le télécharger. Et vous verrez maintenant que lorsque je le téléchargerai, il a un arrière-plan transparent. Et nous pourrions facilement placer ce chargeur et le réduire un peu dans cet écran. Et vous verrez maintenant que nous avons le nouveau gif de chargement. Cinq secondes s'écoulent. Et beaucoup, nous avons le grand écran. Très bien, c'est plutôt cool. Passons à la suivante, qui est ouverte et fermée. Et cela va utiliser une interaction de déplacement vers le haut et vers le bas. Je vais donc prendre le Start à l'exemple ici pour que nous puissions voir ce que nous allons faire. Celle-ci est encore assez simple. Tout ce que c'est cet écran à côté, Il va glisser vers le haut et le x va glisser vers le bas. Il est très courant de définir des pages ou tout autre élément comportant un bouton d'annulation et d'enregistrement. Cela va simplement glisser vers le haut. Vous auriez une annulation, vous avez une sauvegarde, vous fermez en arrière. Si vous avez plus de flux de travail, je vais vous montrer comment ces pages de démarrage sont les plus efficaces pour lancer un flux de travail. Ensuite, vous passez en revue le flux de travail. Nous allons apprendre maintenant dans la prochaine vidéo. Donc, accrochez-vous bien. Et pour voir cette interaction et le faire ensemble, prenons le Début. Allez à la page ci-dessous où il est dit que vous le faites. Et c'est assez simple ici. Allons de l'avant et saisissons le bouton d'affichage. Accédez à l'onglet Prototype. Faites glisser cette option sur l'écran. Nous voulons au sommet. Et sur l'animation, nous ne voulons pas instantané, nous ne voulons pas nous dissoudre, nous voulons emménager. Et puis avec Move In, cela nous permet de se déplacer vers la gauche, se déplacer vers la droite, de déplacer l'écran vers le bas. Et dans celui-ci, nous voulons qu'il progresse. Bon, maintenant, passons au prototype et regardons ça. Bon, je vois comment il a progressé, mais la transition a été très lente. Cl ce mouvement qui semblait un peu trop lent. Exemples de buggy. Nous voulons donc que cela soit rapide. Voyez donc où il est dit que la facilité d' entrée était toujours fixée à 100 millisecondes. Ce qui est dû à environ 200 millisecondes là-bas. Et maintenant, ça devrait se charger assez vite. Oui, tu y vas. C'est ce que nous voulons. Mais presque trop vite pour celui-là. Allons faire 300 millisecondes. D'accord ? Et puis allons fermer le, ceci avec le x. Donc, si nous saisissons le x et l'écran suivant, faites-le glisser sur l'écran noir d'origine ici. Et une erreur courante est que vous le laissez en mouvement, et vous verrez ce qui se passe ici. Je vais me débrouiller. Il se déplace donc. Et ce que vous allez vouloir faire , c'est de régler cela pour qu'il déménage. Mais voyons à quoi ça ressemble à un déménagement parce que c'est une erreur très courante qui se produit. Ok, donc nous avons la vue qui semble plus belle glisse assez rapidement. C'était une bonne vitesse pour cette transition. Et maintenant, que se passe-t-il quand x est touché ? Voyez comment la page, La page noire, poussez encore une fois la page blanche vers le bas. Voyez donc comment la page noire est venue du haut. C'est une interaction étrange pour les appareils mobiles. Et ce que nous voulons faire ici, si je clique sur le X, c'est que c'est parce qu' il s'agit d'emménager, vous permettez à l'écran noir d'entrer. Et Figma vous offre une petite démo de ce à quoi cela ressemblera. Donc, ce que nous voulons faire, c'est que nous voulons qu'il déménage. Il s'agit donc de dire à l'écran blanc à droite de se dégager, de s'écarter du chemin, et la façon dont nous voulons définir se trouve à droite. Donc, dans ce cas, nous voulons qu'il descende. Ok, ça devrait parfaitement fonctionner. Nous appuyons donc sur le bouton d'affichage. Cette page glisse et regarde lorsque nous faisons le x, elle se déplace et l'écran derrière elle reste à son emplacement plutôt qu'en venant du haut. OK, c'est cool. Cela couvre à peu près la première vidéo. Et dans la vidéo suivante, nous allons couvrir les superpositions, le moule, les modaux et les menus. Et je vous verrai dans la prochaine vidéo. Merci, Bye. 11. Vidéo bonus 2 - Overlays, modèles et menus: Bienvenue dans la vidéo 2 des vidéos bonus, où nous allons couvrir les superpositions, les modales et les menus, n'est-ce pas ? Revenons donc dans ce dossier dans lequel nous travaillions. Je vais faire défiler ici et encore, ce que je fais, c'est j'utilise z comme touche rapide pour obtenir le zoom. Donc, si vous le voyez, je maintiens z et je clique et glissez. Cela me permet de zoomer partout où je veux voir dans mon tableau d'art. Ensuite, j'utilise la barre d'espace. Je maintiens la barre d'espace et je clique et fais glisser pour me déplacer. Et puis j'utiliserai si vous êtes sur un PC, vous pouvez utiliser Control. Si vous utilisez un Mac, vous pouvez utiliser la commande, mais j'utiliserai Command Minus pour sortir du Zoom arrière et dans Command Plus pour entrer. Ok, donc la prochaine, prenons au début du prototype. Passons à l'exemple. Et maintenant, examinons prototype plus axé sur le flux de travail, qui vous permettra d'avoir un ensemble d'écrans de déplacement vers le haut et vers le bas, puis un ensemble d' écrans de déplacement vers la gauche et la droite . C'est donc un peu plus compliqué, mais tout de même assez simple. Allons voir à quoi ça ressemble. Qu'est-ce que la démo est très rapide et ensuite nous allons le faire. Ok, donc, comme nous l'avons fait dans la dernière vidéo, nous avons une glissade vers le haut, puis nous avons une diapositive, n'est-ce pas ? Et vous le verrez maintenant, le x est en haut à droite. C'est très intentionnel. Et c'est pour nous aider à créer un flux de travail. Ensuite, permettez également à l'utilisateur de sortir du flux de travail quand il le souhaite. Alors, quel est leur flux de travail lorsque nous appuyons sur Démarrer et pourquoi ce x se trouve en haut à droite. Vous verrez ici, lorsque vous verrez que l'écran suivant se glisse de gauche. Et si je veux revenir sur un écran, je peux y retourner. Une fois de plus, nous démarrons l'écran deux diapositives. Il peut y avoir certains paramètres que nous souhaitons entrer ou certains champs de formulaire que vous souhaitez entrer ici dans ce flux de travail. Ensuite, nous passons au numéro trois. Supposons que vous souhaitiez annuler ce flux de travail. Quelques choses que vous pouvez faire. Vous pouvez y retourner, vous pouvez y retourner. Vous pouvez appuyer sur X. Et maintenant, vous êtes de retour à l'écran d'accueil d' origine. Ou si vous ne voulez pas revenir en arrière sur trois écrans, vous pouvez simplement fermer le x et maintenant vous êtes de retour au flux de travail ici. C'est pourquoi le x est en haut à droite parce qu'il nous donne immobilier ici pour le bouton de retour en haut à gauche. Encore une fois, nous allons passer par l'écran numéro 3, l'écran ici. Et nous avons terminé le flux de travail ici. Et si vous voulez sortir X, boum, sortir x à n'importe quel moment. Bon, allons donc refaire cette interaction. Prenons le début et faites-le glisser vers la série d' écrans à côté de vous. Je vais zoomer un peu plus avant. Prenons le bouton Afficher. Et encore une fois, nous allons prototyper. Assurez-vous d'être dans l'onglet Prototype. Faites glisser le bras prototype ici, et vous voyez déjà qu'il est préréglé pour vous. Donc, nous voulons au sommet, nous ne voulons pas déménager. Nous voulons emménager. Mais voyons simplement ce que c'est, voyons à quoi ça ressemble. Déménagez et vous pouvez dire que parfois ça a l'air un peu bizarre. Ok, donc vous voyez comment le dernier écran, cet écran noir ici, s'est déplacé vers le haut. Et nous ne voulons pas que ce soit une interaction bizarre. Nous voulons que cet écran blanc soit une sorte de calque en sandwich au-dessus de cet écran de démarrage ici. Et c'est parce que nous avons choisi de déménager. Donc, si nous emménageons, cela fonctionnera très bien. Allons donc voir ça. C'est ce que nous voulions. Et maintenant, allons chercher le x et jouer là où nous pouvons faire glisser le x et sortir. Et encore une fois, nous ne voulons pas qu'il se déplace ici. Et vous pouvez voir parfois que vous oubliez faire la flèche vers le bas. Et ça peut ressembler à ça. Voyez comment il a évolué. C'est très, très bizarre. Nous voulons qu'il répète la même interaction que celle qui présentait cet écran. Encore une fois, il a augmenté. Nous voulons répéter et inverser cette interaction. Nous voulions redescendre. Donc, dans ce cas, nous voulons aller sélectionner le prototype pour le x, le déplacer vers le bas. Et Bada Bing, Bada, Boom. OK. La prochaine chose est que nous voulons faire un peu comme démarrer le flux de travail ici. Prenons ce bouton. Allons au numéro deux. Dans ce cas, nous ne voulons pas déménager, nous voulons passer à l'écran et nous voulons qu'il vienne de la gauche. Et vous pouvez voir emménager et nous avons la gauche ici. Et allons voir ça. Nous avons donc View. Je vais commencer ce prototype et les deux glissent par la gauche. Très joli. D'accord, et ensuite la même affaire. Allons chercher le bouton Retour ici, et faites-le glisser vers le bouton. Et ce que nous voulons faire ici, c'est que nous voulons que cela aille vers la droite et que nous avons la même erreur commune qui se produit, c'est que nous le quittons et que nous emménageons et ne déménage pas. Et vous verrez ce qui se passe ici lorsque j' appuie sur la flèche Retour. Découvrez comment l'écran s'est déplacé. Nous ne voulons pas cela. Nous voulons que les deux écrans ici répètent et inversent la même interaction dans laquelle il est apparu. Il suffit de l'inverser. Nous voulons y retourner. Mais maintenant, vous pouvez voir ceux qui arrivent. C'est parce que nous l'avons laissé dedans, emménagez. Allons de l'avant et avançons, déplacons-le ici. Et maintenant, vous verrez l'interaction correcte où déplacez les diapositives numéro deux. Si vous faites le bouton Précédent, il cite en arrière. D'accord ? Et puis j'ai aussi une barre grise transparente ici. Vous pouvez voir que ça ressemble à ça. Et c'est transparent pour une raison quelconque, car vous ne voulez pas que l'utilisateur le voie. Nous voulons simplement l'utiliser comme mécanisme prototype pour permettre à l'utilisateur faire glisser cette photo ou cet écran hors du chemin. C'est si courant. Si vous accédez à un écran doté d'un bouton Précédent, il est courant que les personnes votre appareil mobile glissent vers de votre appareil mobile glissent vers cet écran. C'est donc ce que cela représentera ici. Je vais le rendre un peu plus grand pour que vous puissiez le voir. Et donc ce que nous voulons, nous ne voulons pas que cela soit sur les détails de l'interaction ici. Nous le glissons donc vers l'arrière, ce carré transparent vers un seul. Nous ne voulons pas être sur le robinet, mais nous voulions vraiment faire glisser ici. Et nous voulons la même animation que celle que nous voulons déménager vers la droite. Maintenant, quand je peux le faire en tant qu'utilisateur, je peux appuyer sur le bouton Précédent pour revenir à un. Ou je peux faire glisser la souris en cliquant sur le prototype, tenant votre doigt sur votre téléphone et faisant glisser cet écran hors du chemin, voir comment cela a fonctionné là. Cool. Donc, c'est bien rempli. C'est un remplissage comme un vrai prototype, comme une application de pomme à roulettes. Vous appuyez sur le bouton Précédent, redescendez, entrez dans le flux de travail. Vous pouvez cliquer et faire glisser le curseur pour le faire glisser. Et maintenant, faisons entrer le reste de ces prototypes. Ce que nous pouvons faire ici c'est que nous avons le x et tous ces écrans, mais le x va vraiment vous ramener sur cet écran d'accueil. Une nouvelle fonctionnalité de Figma est donc que vous pouvez coller dans plusieurs plans de travail. Alors, qu'est-ce qui supprime les axes de ces autres écrans ? Prenons le x et si vous êtes sur un PC, c'est Control C, comme chez Cat. Si vous êtes sur une pomme, c'est la commande C. Et allons de l'avant et sélectionnez-les tous les trois. Je suis sur Mac et je vais au Commandement V, comme dans Victor. Ou si vous utilisez un contrôle PC V. Et il va placer automatiquement ce x sur ces trois écrans avec l' interaction que nous voulons revenir à l'écran de démarrage. D'accord, et c'est assez simple à partir d'ici, nous faisons passer le prochain bouton au numéro 3. Si nous voulons nous assurer qu'il est sur le robinet, nous voulons emménager. Et nous voulons que cet écran passe par la gauche. Et puis la même chose avec le bouton Retour. Nous voulons revenir de l' écran 3 ici au numéro 2. Et nous voulons déménager vers la droite. Encore une fois, l'écran va entrer par la gauche, puis se déplacer vers la droite. Même chose pour 34 ans. Nous effectuons le bouton suivant sur l'écran avant. Pouvons-nous vouloir qu'il se déplace par la gauche ? Et puis, pour la flèche arrière allant de l'écran numéro 4 au numéro 3, nous voulons qu'elle se déplace vers la droite. Très bien, ça devrait être complet. Allons voir ça. Nous avons donc la vue, l'écran glisse vers le haut. Nous avons le début. Appuyez sur Suivant, vous avez le numéro 3. Appuyez sur F4 pour passer au numéro quatre. Vous pouvez annuler. Fermez x, revenez à l'écran de début. Vous pouvez à nouveau lancer le flux de travail. Allez au numéro 4, ou vous pouvez revenir en arrière. Même sur l'étui numéro 2. Vous pouvez balayer et appuyer sur X et vous revenez à l'écran ici. Cool, c'était amusant. Passons à la suivante, qui est la liste déroulante modale mobile. Je vais donc enrouler cet écran de démarrage pour que vous puissiez rapidement voir l'exemple de comment cela fonctionne. Appuyez sur le bouton de lecture ici. Il s'agit donc d'une liste déroulante pour les appareils mobiles. Donc, quand, disons que je souhaite sélectionner ma couleur préférée, cliquez sur ce menu déroulant et vous verrez un menu glisser vers le haut ici. Et disons que je sélectionne ici le rouge. Ensuite, vous verrez qu'il est rempli de rouge ici. Appuyez sur le X, revenez à la couleur Sélectionner. Effectuez le même itinéraire. Je peux cliquer n'importe où à l'extérieur ou toucher n'importe où en dehors de cette sélection déroulante ici et elle la ferme. Ok, donc allons de l'avant et attrapons le Start over sur la série d'écrans ici qui dit que c'est le cas. Ce que nous allons faire ici, c'est que je vais passer à l'outil de plan de travail supérieur où il est écrit cadre. Et si vous utilisez cet outil, que vous soyez sous l'onglet Conception ou sur l'onglet Prototype, prototype. Il vous permettra de cliquer pour créer différentes tailles et appareils pour lesquels vous envisageriez de concevoir. Donc, dans ce cas, nous sommes les tailles d'écran et les dimensions sont de l'iPhone 11 x , alors continuons et cliquons dessus. Et il va simplement faire glisser automatiquement un plan de travail sur Figma. Et maintenant, nous devons simplement réduire ce tableau d' art par le haut. Nous voulons garder la même largeur, mais nous voulons déplacer le haut vers le bas pour qu'il s'agisse un peu plus de trois, peu plus ou d'un peu moins de la moitié du plan de travail à gauche. Et ce que nous ferons, c'est si vous cliquez simplement haut et que vous faites glisser le curseur vers le bas. On dira que ça a l'air bien. Bon, ce que je vais faire, c'est que je vais sélectionner certains des éléments ici en haut. Nous allons simplement sélectionner, Ne vous inquiétez même pas des lignes. Il suffit de sélectionner tout le texte ici. Appuyez sur Commande C. Ou si vous utilisez un PC Control C. Je vais sélectionner le plan de travail ici. Et encore une fois, Commandement ou Control V comme dans Victor à placer. Ok, ça a l'air bien. Maintenant, je pense que nous avons toutes les pièces dont nous aurions besoin. Ok, donc ce que nous allons faire ici, c'est que nous allons cliquer sur le menu déroulant. Il suffit de saisir tout cet élément, appuyer sur le prototype et de le faire glisser à nouveau sur ce tableau d'art ici. Et vous verrez l'interaction, la boîte de dialogue Détails de l'interaction ici. Nous voulons l'action pour un tapotage étrange. C'est la fonction que nous voulons créer. Mais le mécanisme ici, nous voulons changer. Donc, au lieu de naviguer jusqu'à endroit où vous voulez qu'il indique superposition ouverte. Et une fois que vous aurez la superposition, cela nous donnera nos options de superposition, et nous allons entrer dans ces options ici dans la prochaine série de vidéos ou de prototypes ici, juste après cela On va faire le modal, mais pour l'instant, on veut être centré sur le bas. Nous voulons activer le clic lors de la fermeture, lorsque vous cliquez à l'extérieur ou lorsque vous touchez à l'extérieur. Cela signifie que n'importe quelle zone située au-dessus de cette zone se fermera. Et nous souhaitons également ajouter une superposition d'arrière-plan. Par défaut, il est noir, ce qui est le plus courant. Et on peut même le rendre plus sombre. Nous pouvons faire 50 % d' opacité ici. Et ensuite, pour l'animation ici, nous ne voulons pas. Mais regardons simplement ce que nous avons créé jusqu'ici pour vous puissiez voir comment fonctionne Instant. Je vais retirer n'importe lequel des, vous pouvez voir que celui-ci a encore un prototype de bras connecté au tableau d'art ici en haut. Il suffit de cliquer et de supprimer cela pour l'instant. Bon, allons donc sélectionner ce tableau d'art avec l'étiquette de départ dessus. Appuyez sur le bouton Lecture et vous verrez maintenant que nous avons le menu déroulant ici. Et si vous le fermez, il disparaît. Mais il n'y a pas de transition, n'est-ce pas ? C'est instantané. Et nous voulons faire une transition ici. Donc, si nous sélectionnons à nouveau les détails de l'interaction du prototype et que vous voyez où il est écrit animation, nous voulons utiliser le même que celui nous venons d'apprendre dans le dernier écran. Nous voulons qu'ils se déplacent dans des animations. Et à partir de celui-ci, nous ne voulons pas la gauche à droite, nous voulons qu'elle remonte. Ensuite, lorsque vous cliquez automatiquement en dehors de la superposition, cela vous inversera. Il se déplacera donc hors du chemin et vers le bas lorsque vous cliquerez en dehors de celui-ci. Revenons donc au prototype ici. Sélectionnez le menu déroulant, et c'est parti. Vous voyez comment ça a glissé. Et lorsque vous cliquez en dehors de celui-ci, il va automatiquement inverser cette interaction pour vous. Cool. C'est donc assez simple ici. Et maintenant, allons-y. Disons que nous voulons du rouge. Cliquons ici. Et au toucher, nous ne voulons aucune animation ici. Juste instantané, c'est très bien. Et maintenant, sélectionnons le x ici pour le connecter à l'écran de début afin pouvoir supprimer facilement cette sélection. Juste instantané, c'est très bien aussi. Nous allons maintenant disposer d'une liste déroulante complète pour un appareil mobile. Cliquez sur le menu SlideUp, vous voulez le rouge. Le rouge apparaît. Appuyez sur X, vous pouvez tout recommencer. OK, c'est cool. Passons à la suivante. Très semblable. Ce sera le modal. Et je vais faire passer ce début ici à l'exemple. Allons voir ça très vite. Très bien, nous avons un bouton enfoncé, le texte ici, et vous verrez qu'il est haut et nous pourrons le fermer. Il ne s'agit donc que d'une interaction modale pour un appareil mobile. Allons de l'avant et déplacons l'étiquette du prototype de départ vers celle qui vous dit le faire. Modifions ce test de texte. Dites simplement, je ne sais pas qu'il est ouvert. J'ai donc juste cliqué dessus. J'appuie sur T sur mon clavier. Cela me donne l'outil de texte. Vous cliquez une fois qu'il l' a sélectionné, si vous cliquez sur, si vous cliquez trois fois en cliquant deux fois, un sélectionne automatiquement tout. Encore une fois, je peux cliquer trois fois et taper ouvrir à nouveau. Ok, disons que j'ai encore construit le modal ici, mais supprimons ça pour l'instant. Commençons à zéro ici. C'est la même chose. Je vais venir au cadre ici. Outil cadre en haut à gauche, je vais sélectionner iPhone Pro X va me donner un plan de travail. Et ce que je vais faire ici, c'est prendre ce cadre de tableau d'art. Je vais le rendre un peu moins grand. Je vais donc cliquer depuis le haut, déplacons-le ici. Mais dans ce cas, je veux aussi le rendre moins large. Il agit donc comme un modal. Il ne couvre pas l'ensemble du téléphone , de l'espace vertical à l'espace gauche et droit, mais il se place un peu au milieu du téléphone. Très bien, c'est déjà un bon début. Et ce que nous voulons faire, c'est que nous voulons revenir à l'onglet Design. Et allons-y et arrondissons ces coins. Donc, vous voyez où il est écrit cadre. Je vais arrondir les coins en mettant, disons 20. D'accord ? Pas et vous ne voulez pas aller trop lourd comme si vous ne voulez pas avoir de coins très arrondis comme ça. Vous voulez juste des coins arrondis et subtils. 20 devraient donc être parfaits. OK, puis pour accéder au prototype, que se passe-t-il et appuyez sur le bouton Ouvrir. Glissons le bras prototype ici, jusqu' à ce tableau d'art. Et allons-y et appelons ça sur le robinet. De même, comme nous l'avons fait avant d'aller à la navigation, nous allons changer cela pour ouvrir la superposition. Et maintenant, au lieu de faire centré sur le fond comme nous l'avons fait avant, faisons centrés. Et allons-y et fermons quand on clique à l'extérieur. Qu'est-ce qui permet également d'ajouter une superposition d' arrière-plan. Nous pouvons le garder à 25 en soi ici. Et encore une fois, faisons simplement une interaction dissoute. Nous n'avons pas besoin de le faire emménager ou quoi que ce soit de ce genre. Ok, ça devrait bien paraître. Allons de l'avant et voyons à quoi cela ressemble sur le prototype. Appuyez sur Ouvrir, OK, et nous avons un modal. Allons-y et fermons ça. Ouvrez et fermez. Très bien, ça a l'air bien. Allons ajouter quelques pièces à ce modal ici. Je vais copier ce haut, et je vais sélectionner le plan de travail, coller le haut ici, juste un peu centré si vous le voulez aussi. Et je vais également cliquer sur le X ici, coller le x et supprimer cette interaction. Une autre façon de supprimer le petit bras de l'interface graphique ici, comme vous le pouvez, cliquez avec le bouton droit de la souris sur un tableau graphique et voyez où il est indiqué Supprimer les interactions. Cela supprimera toutes les interactions juste sur ce tableau artistique. Allons de l'avant et placons ce x en haut à droite. Faites-le glisser jusqu' au point de départ de ce tableau d'art. Et allons de l'avant et disons sur le robinet, dissolvez, cela devrait fonctionner parfaitement. Et il va juste fermer ce modal pour nous. Appuyez sur X et nous y sommes. Alors, ouvrez et fermez. Et vous pouvez également toucher n'importe où en dehors du modal et le fermer également. C'était comme ça qu'on pouvait faire un modal. Allons faire glisser le point de départ vers le point ci-dessous. Et allons voir un menu provenant de la barre de titre. Et c'est une interaction très, très courante que vous trouverez dans de nombreux appareils mobiles. Je clique donc sur le plan de travail ici. J'appuie sur R sur mon clavier, ce qui m' amènera à l'écran qui contient l'étiquette de démarrage. Et vous verrez un menu de hamburgers ou une icône de hamburger en haut de cette barre de titre. J'ai corrigé la barre de titre. Vous pouvez donc voir que j'ai tous les éléments sélectionnés ici en haut. Et j'ai appuyé sur fixe lors du défilement. Ce que cela va faire, c'est qu'il le maintient juste en haut au fur et à mesure que l'utilisateur fait défiler et il restera réparé. Il ne bouge pas alors que tout le contenu, comme les chiffres 1, 2 et 3, nous allons faire défiler. Vous verrez donc comment cela fait défiler ci-dessous. Et vous verrez le menu entrer. Je clique donc sur l'icône Menu et le menu glisse de gauche à droite. Si je clique en dehors, il le ferme. Interaction plutôt cool. Allons-y et construisons ça. Je vais donc cliquer à nouveau sur l'onglet Prototype. Et je vais faire glisser la section de départ vers celle qui dit que vous le faites. Je vais déplacer tout ce texte ici un peu. Nous allons en avoir besoin dans une seconde. Ne le supprimez donc pas. Cliquez sur l'outil Plan de travail. Et allons-y et déposons un nouveau clic sur l'outil de plan de travail. Qu'est-ce que la sécheresse ? J'ai déposé un iPhone Pro X ici. Et dans cette affaire, nous voulons que la situation soit identique. Nous pouvons le rendre de la même taille que l'écran. À gauche. Ça devrait aller bien. Mais nous ne voulons pas qu'il soit de la même largeur. Nous voulons qu'il soit un peu plus mince. Disons donc que c'est bien. Et ce que nous pouvons faire ici. Par conséquent, si nous allons dans l'onglet Design ici, vous aurez une couleur de remplissage. Ainsi, lorsque vous sélectionnez le niveau du plan de travail, il vous permet de remplir le tableau avec tout ce que vous voulez remplir. Vous pouvez même le faire entièrement transparent. Je pourrais appuyer sur 0 et c'est entièrement transparent, notre tableau, ou je peux y entrer et sélectionner une couleur. Donc, dans ce cas, je sais que c'est dû faire ce bleu. Vous pouvez faire n'importe quelle couleur que vous voulez, ce n'est pas vraiment votre monde. Vous pouvez tout faire. Mais pour cet exemple, faisons du bleu. Juste pour le plaisir de le changer un peu. Et allons de l'avant et insérons ce texte dans le menu. Ici. Déplacez-le un peu vers le bas. OK, Cool. Nous avons donc notre conception de menu ici. Allons sélectionner l'icône du menu hamburger. Et faites-le glisser vers la conception de menu que nous avons à l'appui. Et puis encore une fois la mémoire où il est dit naviguer. Nous avons donc le robinet c'est bon. Accédez à l'endroit où vous souhaitez le modifier pour accéder à ces superpositions. Et encore une fois, ouvrez la superposition, comme nous l'avons fait auparavant. Et au lieu d' être centré ou en bas, nous voulons qu'il entre en haut à gauche. Donc, le milieu en haut à gauche ici. Les mêmes fonctions que celles que nous voulions fermer lorsque nous cliquons à l'extérieur. Et nous voulons ajouter une couleur de fond derrière elle. Et encore une fois, nous ne voulons pas être dissolvants ou instantanés. Encore une fois, nous pouvons le garder en un instant pour instant et simplement voir à quoi il ressemble. Mais nous allons changer cela ici dans une seconde. Bon, il y a le menu qui est arrivé. Nous pouvons cliquer en dehors de celui-ci, le fermer. Mais vous pouvez voir une transition sans succès. Il est juste apparu instantanément. Ajoutons donc la transition pour qu'elle s'installe. Encore une fois, si nous passons de l'animation ici, nous lui permettons d'y emménager. Et nous voulons que cela vienne de la gauche. Donc, la gauche sera bien. Très bien, désolé, nous voulons qu'il vienne de la droite. Donc, où que soit la position du menu à gauche, nous voulons qu'il vienne de la droite ici. Et si jamais vous vous perdez, c'est ce fait Figma dans ce petit exemple. Cela vous montre que cet écran est ce nouvel écran que vous allez prototyper ici, va glisser sur l'écran sur lequel vous êtes sur l'écran sur lequel vous êtes à l'écran a. Cela devrait être complet. Appuyez donc sur R sur le clavier, cliquez sur l'icône Hamburger. Et il glisse. Fermez ici. Glissent. Très bien, cool. Alors, tu y vas. Vous y trouverez un menu. Et c'est ce qui conclut cette vidéo. Et la prochaine série de vidéos ici, nous allons regarder la fonction de prototype intelligent animée va construire un look cool et un chargeur. Et nous allons faire un défilement horizontal et vertical. Comme toujours. Merci, et je vous verrai dans la prochaine vidéo. Au revoir. 12. Vidéo 3 de bonus, l'animation intelligente, créer un chargeur et un défilé horizontal ou vertical/horizontal: Bienvenue dans la vidéo 3. Sur les vidéos bonus, nous allons couvrir Smart Animate. Nous allons créer un chargeur, un chargeur d'écran à l'aide de Smart Animate. Et nous allons examiner le balayage et le défilement horizontaux et verticaux. Très bien, alors revenons au dossier ici. Je vais appuyer sur la période de commande, qui montrera toutes mes figues, figues, mon interface. C'est ce que je fais ici. Appuyez sur Périodes de commande pour tout supprimer, période de commande pour voir tous mes outils d'interface dans Figma. Allons là où nous nous sommes arrêtés, ce qui était en train de construire ce menu. Prenons le point de départ ici. Et regardons rapidement l'exemple de Smart Animate. Donc, ce qui est plus animé , c'est essentiellement animer votre ensemble d'écrans pour afficher l'écran suivant. Et nous l'avons abordé dans la dernière série de vidéos. Je vais juste y parler brièvement. Il y a deux ou trois choses. Les erreurs courantes que j'ai trouvées à maintes reprises en utilisant Smart Animate que je veux juste mettre en évidence et quelques petits conseils rapides pour vous. Appuyez sur R sur le clavier. Mais encore une fois, nous avons prototypé ce cercle ici. Et vous pouvez voir comment cela, et cela passe à l' écran suivant avec le plus grand cercle. Et si vous cliquez sur le cercle plus grand, il clique et redescend. Très, très riche animation pour une technique vraiment simple à faire. Des résultats si élevés, simples à faire. Donc, ce que nous allons faire, c'est saisir cette étiquette de départ dans la section que vous faites. Tout ce que nous avons à faire, c'est saisir ce cercle, prototyper sur l' écran à côté de droite. Et au lieu d'emménager, il suffit d'appuyer sur Smart Animate. Et il va faire tout le travail pour nous. Et continuons et cliquons sur ce cercle ici, faites glisser vers l'arrière et animons intelligemment. Et vous pouvez voir cette interaction se produire ici et ici très rapidement. Vous pouvez contrôler la vitesse de transition. Donc, si nous revenons à celui ici, disons qu'il s'agit de 800 millisecondes et que vous verrez qu'il y aura un plus bas. Et dans les vêtements ira plus vite. Vous pouvez même modifier la couleur si vous le souhaitez également. Passons au design. Passons du bonbon rose à celui du bleu ici. Et vous verrez que les couleurs changent lentement. Génial, plutôt cool. OK. Une autre chose courante que je veux simplement aborder brièvement est une erreur qui se produit assez souvent. Je vais faire glisser ça. Vous n'êtes pas obligé de me suivre sur ce point. Je veux juste l'appeler pour m' inscrire et me connecter ici, c'est ce qui arrive. Bon, donc je vais y jouer. C'est la chose à éviter. Et je vais d'abord vous montrer que le problème est que si je clique sur Connexion, vous verrez comment il n'y a pas eu de transition. n'y a pas eu de glissement de ce triangle rose vers l'écran de connexion. Et ce que nous voulons vraiment, c'est que quelque chose ressemble davantage à ceci ici où je vais copier sur cet écran. Je vais récupérer les informations de connexion, mais je vais tout supprimer. Je vais tenir, je vais saisir les textes de connexion, appuyer sur gras, Commande B pour le mettre en gras, faire 100 pour cent. Et je vais aller de l'avant et faire une autre commande B pour décoller, faire de cette police une police légère. Et je vais prendre le même rectangle ici, et voici la clé. Je saisis ce même rectangle depuis le dernier écran, et je vais le faire glisser pour me connecter. Et maintenant, lorsque nous appuyons sur la connexion à cet écran et l'inscription à cet écran. tout avec des animations intelligentes. Vous verrez l' animateur intelligent de Logan. Lorsque je clique sur le bouton S'inscrire, retourne pour m'inscrire à Smart Animate. Vous verrez que la transition est bien meilleure. Voyez donc comment cette transition s' est déroulée très intelligemment. Ce qui se passe ici, c'est si, disons que j'ai copié l'écran d'inscription et que j'ai supprimé ce rectangle et que j'en ai créé un nouveau. C'est génial ici. C'est ce qui cause le problème ici. Vous verrez donc que quand je reviendrai m'inscrire, ça ne passe pas. Et c'est parce que Figma avant, lorsque vous utilisez le même rectangle ici, figma identifie ce rectangle comme le même rectangle que celui que vous utilisez dans l'écran de connexion. Il sait donc. Vous dites que je veux que ce rectangle se déplace de ce côté du plan de travail en utilisant Smart Animate, où si vous dessinez un nouveau rectangle, il ne fait pas de distinction entre le rectangle rose ici. devrait être le rectangle gris ici, il traite sa tête comme deux éléments différents. Il est donc très important de passer à travers ce concept. Je vais donc revenir un peu au Commandement Z. Donc vous pouvez voir, je dis dire à Figma pendant ce prototype ici d' animer intelligemment sur cet écran de connexion. Que je veux ce même rectangle ici, donc il identifie qu' il dit, oh, c'est s'inscrire, ce rectangle vit ici. Et connectez-vous. Le même rectangle habite ici. Et un animateur intelligent va faire son travail pour faire l'animation, déplacer ici. Mais encore une fois, si c'est quelque chose de nouveau que vous avez dessiné, cela rompt la relation que vous entretenez ici. Et une autre chose qui arrive parfois pendant Smart Animate, c'est que vous remarquerez que quelque chose se passe, c'est bizarre. Voyons voir. Vous verrez généralement des éléments comme voler autour de l'écran, comme disons que ce globe oculaire s' envole ou que le bokeh t fait quelque chose de différent. C'est difficile à reproduire car cela arrive de temps vous verrez des fonctions bizarres, mais l'animation intelligente. Et donc l'astuce, c'est que maison animée intelligente pour faire beaucoup avec le regroupement. Donc, si vous voyez des éléments d'interface utilisateur bizarres voler autour de l'écran, prenez le premier écran et regroupez tout. Disons donc qu'aucun de ces éléments n'a été regroupé ici. Allez-y et faites une commande G, ou vous pouvez faire un objet et un groupe que je vais faire, ou si vous êtes sur un PC Control G, je vais regrouper tous les éléments ici et à peu près le groupe tout ce qui n'est pas la chose que vous voulez animer. Saisissez les boutons. Vous pouvez même regrouper tout cela, le bouton et les champs de formulaire. Commencez donc simplement à regrouper les choses. Et je vous promets qu'une fois que vous commencerez à regrouper, vous remarquerez l' animation ou la chose, l'élément que vous essayez d'animer sera beaucoup mieux animé. Donc, juste une petite astuce si vous rencontrez des problèmes avec la fonctionnalité Smart Animate et qu'elle ne s' anime pas correctement, commencez à regrouper les éléments. Et, j'espère que vous verrez un changement à cet égard. Bon, allons nous amuser un peu maintenant. Allons construire cette chargeuse ici. Je vais donc saisir le niveau de départ sur l'écran sous le chargement. Je vais appuyer sur Play. Et ce que nous allons construire est quelque chose qui ressemble à cela. Donc, vous voyez qu'il se charge. Ensuite, vous avez une transition depuis la barre de titre en haut de la carte. Bon, alors allons-y, on va le faire. Sur celui qui dit que c'est le cas. Prenons le départ. Allons-y ça ici. Et c'est vraiment simple. Nous voulons simplement copier cette page. Je vais juste sélectionner le tableau d'art. Je suis ici. Ils vont faire Commandement ou désolés, option. Et ça va copier et faire glisser le même tableau d'art ici. Ou je vais faire une commande C et une commande V, comme dans Victor, et ça va le coller. Je vais retirer cette étiquette de départ. Vous pouvez donc voir sur le prototype le point de départ du flux, démarrez un, appuyez simplement sur le signe moins ici, voyez où il est dit supprimer le point de départ et le supprimer. Et tout ce que nous voulons faire, c'est attraper ça. Lorsque je vais dans l'onglet Design et que je saisis la barre de chargement rose et que déplace tout le long vers le haut. Et c'est ici que nous allons combiner la fonction de retard que nous venons d'apprendre. Nous sélectionnons donc l' ensemble du prototype, l'ensemble du plan de travail, cliquons et faites-le glisser vers la partie de chargement ici. Et encore une fois, nous ne voulons pas de taper, nous le voulons après un retard. Et faisons un petit retard. Faisons environ 100 millisecondes. Et nous voulons une animation intelligente, mais nous voulons une plus grande facilité ou un délai plus long. Faisons donc 20 000 millisecondes à quelques secondes. Donc, deux secondes d'état de charge. Allons appuyer sur le bouton Lecture. Et vous devriez voir cette interaction ici. Nous n'avons rien défini après cet écran. Donc, tout ce que vous devriez voir, c'est que le chargement se déroule. Encore une fois, nous avons pris l'écran de début ici. Nous l'avons configuré pour faire un très rapide avec moins d'une seconde, il se chargera sur cet écran. Ensuite, il effectue le retard doux et fait passer le rectangle rose du début de cet écran aux fourmis. C'est donc l'animation intelligente, le Smart Animate fait sa magie. Et la même chose. Nous voulons aller de l'avant et regarder l'écran ici. Et nous voulons faire glisser ça ici. Et le même accord que nous voulons après retard, retard très lent ou très rapide , donc 100 millisecondes. Et nous pouvons également faire une animation intelligente. Vous verrez donc maintenant que lorsque vous commencerez cela, puis chargera la carte de San Francisco avec la barre de titre en haut et la barre de navigation en bas. D'accord, mais amusez-vous un peu ici. Donc, si vous vous souvenez du dernier prototype ici, vous verrez un retard, vous verrez une transition. Comment la barre de titre y fait la transition vers le bas. Il a glissé comme ça. C'est une transition plutôt cool où vous pouvez voir celle que nous avons faite. Il ne l'a pas fait. Il ne fait que charger la carte et vous pouvez voir comment elle se dissout. Nous allons donc créer un état de transition pour cela. C'est un petit hack que vous pouvez utiliser. Encore une fois, après un retard, nous avons une animation intelligente. Et ce que nous voulons faire, c'est que nous voulons d'abord saisir la section de la barre de titre ici dans cet écran. Placons-le sur l'écran de chargement ici. Et prenons également cette section de barre de navigation, et placons-la dans cet écran. Donc, Commande V, donc j'appuie simplement sur Commande C. Lorsque j'ai ces éléments, sélectionne le tableau d'art en haut ici, et j'appuie sur Commande V. Maintenant, je vais sélectionner cet élément graphique ici, la barre de navigation ou la barre de titre. Je suis un Shift et je vais faire une flèche vers le haut et simplement le déplacer hors du chemin. Vous ne pouvez même pas voir qu'il devient difficile de le sélectionner. Vous savez, c'est là que vous cliquez et faites glisser votre sélection. Et je vais faire la même chose pour la barre de navigation en bas. Et ensuite, il suffit de le déplacer pour que vous puissiez voir qu'il est toujours là. Ce que nous disons à Figma, c'est que sur l'écran suivant avec l'animateur intelligent, reconnaissez ces deux formes et déplacez cette forme vers le bas pour passer en position ici sur l'écran de la carte. Bon, allons voir ce prototype. Voyez comment ça se passe comme cette petite transition lente. Mais je pense que maintenant, nous sommes tout simplement cool. Très joli. Bon, donc un petit piratage sur la fonction Smart Animate. Ok, allons regarder quelques passages très rapides et des transitions pressantes. Donc, sur le prototype, peu près planer. Si vous placez votre souris au-dessus, vous verrez le point. n'y a pas de survol et d'appareils mobiles. C'est donc à vous de voir comment le vol stationnaire fonctionne comme un prototype. Vous ne l'utiliseriez que pour les sites Web de bureau et la conception d'applications de bureau. Mais vous pouvez le voir ici et l'apprendre ici. La prochaine chose que nous allons faire ici est une interaction pressante, que je vais vous montrer ici et nous allons y entrer. Et cela fonctionne très bien pour quatre graphiques. Vous pouvez donc voir que j'ai un graphique ici et je veux appuyer ou frotter ce graphique. Et lorsque je suis enfoncé, je vois les détails de 2016. Disons que nous mesurons les câlins ici. Il y a eu 513 câlins en 2016. C'est plutôt génial. Cela signifie que vous avez plus qu'un câlin par jour. Et il pourrait juste comment cela fonctionnerait quand vous ajoutez ingénieur, c'est vous pouvez simplement frotter votre doigt sur le graphique et être en mesure de voir les détails à chacun de ces niveaux ici. Bon, revenons au dossier. Prenons le point de départ vers celui qui dit que vous le faites. C'est très facile ici. Il suffit de sélectionner le cercle ici. Gardez-le sur Smart Animate, blanc au lieu de toucher, nous voulons en survolant. Allez dans le prototype. Et vous pouvez voir quand votre souris entre dans la souris, elle change de couleur un peu trop lentement. Allons donc voir ce retard ici. Oui, donc 200 millisecondes, revenons à seulement 300 millisecondes ici. Donc 3 000 MS Fermez-le, et maintenant nous devrions avoir un bon état de vol stationnaire. Ok, ça fait du bien. Passons à l'écran graphique ici et apprenons comment faire l'état de la presse ici. Ce que je vais faire, c'est prendre ce tableau d'art ici. Et encore une fois, j'ai l'option. Je vais cliquer et faire glisser, copier cet écran ici. Pendant que je suis dans l'onglet Prototype, voyez cela indique le point de départ du flux, appuyez sur Moins pour supprimer le point de départ. C'est ainsi que ça commence sur cet écran. Et puis, quand je vais copier sur le 513, câlins ici, il suffit de cliquer et de faire glisser. Je vais le regrouper Command G, juste pour que tout soit en une seule forme. Nous l'avons donc ici. Je vais le coller en place. Et maintenant, nous allons sélectionner, il suffit de cliquer et de faire glisser. Je vais maintenir le quart de travail sur mon clavier. Et je vais sélectionner à peu près toutes les barres sauf celle que nous sommes, que nous voulons mettre en évidence lorsque nous frottons. Et je vais rendre ces derniers 30 % d'opacité. Ils s'en vont donc. Nous allons faire la même chose pour les dates. Prenons tout sauf 2016, faisons de ces 30 % d' opacité sur le calque dans l'onglet Design. Et nous sommes bien allés. D'accord ? Et ce que nous voulons faire ici, c'est que vous pouvez faire deux choses. Vous pouvez sélectionner la barre 2016 et faire le prototype directement à partir d'ici. Vous pouvez également agrandir la zone de taraudage. Je vais donc prendre un rectangle. Vous pouvez également utiliser la touche rapide du clavier est r. Je vais créer un rectangle un peu plus grand pour le 2016, juste pour qu' peu plus grand pour le 2016, juste pour il y ait un espace de frappe plus grand. Et maintenant, je vais faire glisser ce rectangle vers le tableau d'art où nous avons les 513 câlins. Et la fonction prototype n'est pas sur le robinet, mais nous voulons en appuyant sur. Et nous n'avons pas besoin de faire de l' animation intelligente qui se dissout. C'est donc juste une sorte de retard, un peu de retard. Revenons à l'onglet Design ici. Maintenant que nous savons que cette zone grise est la cible prototype de l'écran suivant, allons continuer et la transformer à 0 % d'opacité sur la couche pass-through. Et maintenant, nous devrions voir cette interaction. Allez-y et appuyez sur Lecture, passez à votre prototype, puis cliquez simplement enfoncé sur 2016. Et vous verrez ce point culminant dans une zone. Et lorsque vous lâchez la souris, vous verrez un non-surlignement. Donc, c'est la même chose si vous ouvrez ça sur la Figma. Si vous téléchargez Figma sur votre téléphone et que vous vous connectez, vous pouvez voir la même chose. Vous pouvez tester les prototypes sur votre téléphone. Et ce sera la même chose que vous posez votre doigt et que vous tapotez et teniez avec votre doigt, vous verrez apparaître le câlin de niveau 513 supérieur. Et quand vous lâchez votre doigt, vous le verrez revenir à cet état. D'accord, c'est assez simple. Allons dans une interaction un peu plus compliquée, qui est un balayage horizontal, quelqu'un, je viens de faire glisser la zone de départ vers la zone de balayage horizontale, tableau d'art. Je vais appuyer sur Play. Voici donc ce que nous allons construire, c' est-à-dire que si vous glissez ces cartes ici, vous pouvez voir qu'il y a un balayage horizontal. Vous avez également la nourriture 1, 2. Ok, c'est assez compliqué, mais c'est plutôt simple ici. On va juste en faire un, on va faire les animaux. Alors allez-y et faites glisser la section de départ vers le tableau d'art qui indique que vous le faites. Et vous pouvez voir que j' ai ici un ensemble de cartes pour chaque animal. Et l'un des plug-ins sympas que j'utilise pour obtenir toutes ces photos. Disons que j'ai un tas de carrés ici. Est-ce que je peux aller à un plugin. Il s'appelle Content real ou Unsplash. Allons voir Unsplash. Et Unsplash va me donner un tas de photos aléatoires. Disons que je veux des animaux ici. Il remplira tous ces rectangles ici avec des photos. Je peux faire de l'art. Peupler avec de l'art. C'est donc un moyen facile d'obtenir, suffit d'obtenir un tas de photos gratuites que vous pouvez avoir dans Figma. Et si vous cliquez trois fois dessus, vous pouvez voir dans l'onglet Création, vous pouvez les recadrer un peu si vous le souhaitez. Je vais passer de l'échec de la culture et vous pouvez voir comment les récolter pour vous. Bon, un petit conseil de pro, mais allons commencer à construire le balayage horizontal pour les animaux. Donc, quand il a cliqué et balayé vers la gauche ou la droite. La première chose que nous voulons faire ici, c'est quels que soient les éléments que nous voulons faire glisser horizontalement, les déplacer hors de votre tableau artistique. Je l'ai déjà fait pour vous, mais commencez simplement par les éléments que vous voulez créer qui se trouvent derrière l'écran ici, mais mettez-les tous devant vous. Comme mettre toutes les pièces d'échecs sur le plateau. Eh bien, nous voulons aussi sélectionner chacun d'entre eux et le regrouper. Je vais donc choisir celui-là. Je vais à Command G ou Control G. Vous pouvez également cliquer avec le bouton droit de la souris et dire groupe. Donc, si elles étaient dissociées ici, cela ressemblerait à ceci. Ensuite, je cliquais avec le bouton droit de la souris et je passais ici pour la sélection de groupe ou commande G. Donc je les ai déjà regroupés pour vous, mais je m'assurais simplement qu' ils sont tous regroupés ici, juste pour qu'ils soient facilement. sélectionnable. Et maintenant, nous allons tous les sélectionner. Je vais cliquer et faire glisser pour sélectionner tous ces éléments. Et voici ce qui est vraiment important. Je vais cliquer dessus avec le bouton droit de la souris et je vais encadrer cette sélection. Encore une fois, sélectionnez tous ces éléments très importants ici. Cliquez avec le bouton droit. Encadrez la sélection et vous pouvez voir dans le menu, sur les calques, j'ai tous ces groupes. Et lorsque je clique avec le bouton droit de la souris et que je passe à la sélection de cadres, vous verrez que c'est le cadrage. Il a regroupé toutes ces images dans un cadre ici. Et vous pouvez appeler ce qu' on appelle ce qu'on appelle des animaux. J'ai donc ici un cadre appelé animaux qui contient toutes les images et les cartes que nous venons de créer et de regrouper dans chacune d'elles. Donc, si je veux choisir l'ours ici, si je veux choisir le tigre. Ok, donc maintenant on va faire glisser ce tableau d'art. Je vais donc cliquer sur les animaux, assurer que le calque de plan de travail est sélectionné. Je vais le faire glisser dans ce tableau d'art. Et il sait que c'est dans le tableau d'art parce qu'il mettra en valeur le bleu. Alors, assurez-vous qu'il soit dans le tableau d'art. L'une des façons de tester cela consiste à sélectionner le plan de travail ici et à le déplacer ou à le déplacer. Si elles ne bougent pas, elles ressembleront parfois à ceci. Vous ne l'aurez pas dans le tableau d'art. On dirait que c'est dans le plan de travail. Mais quand vous déplacez ce tableau d'art, oups, réessayez. Ok, donc oui, ça va ressembler à ça. Et quand vous déplacez le plan de travail, vous remarquerez, oh attendez, ils sont dans le tableau d'art, ce qui signifie qu'ils ne sont pas apparus dans votre prototype. Encore une fois, assurez-vous simplement que votre tableau d'art ici, cette couche se trouve à l'intérieur du tableau d'art animal ici. Vous pouvez donc voir ici, je ne l'ai pas fait, ce n'est pas encore dans le tableau d'art. Quelqu'un a frappé la commande C. Je vais sélectionner le plan de travail. Je vais le coller à l'intérieur. Maintenant, quand je le déplace et que vous pouvez voir comment c'est, il est là. Bon, voici donc la pièce clé pour faire ce défilement horizontal. Sélectionnez donc le cadre animal ici. Dans votre palette de calques, il suffit donc de sélectionner les animaux. Et ce que nous voulons faire, c'est que nous voulons garder les commandes de la droite ici et faire glisser et recadrer dans cette direction. C'est vraiment important. Encore une fois, si vous cliquez dessus et que vous le faites glisser et que cela ressemble à ceci, le calque de plan de travail n'est pas sélectionné. Encore une fois, revenez en arrière et sélectionnez l' endroit où il est indiqué les animaux au niveau du tableau d'art et maintenez Commandement. Et faites-le glisser juste à droite du tableau d'art. Et nous pouvons toujours voir toutes les photos ici. Ce que nous voulons faire ici, c'est dans l'onglet Création, en haut à droite, où il est écrit Contenu du clip. Allez-y et cliquez dessus. Et ce qui va être, il va extraire le contenu de l'endroit où nous faisons glisser ce bras ici. Il s'agit donc de couper le tableau d'art. Nous sommes donc presque en train de recadrer cette monture ici. Et nous autorisons le contenu du clip à couper ce contenu afin de ne pas le voir. C'est également une bonne idée de s'assurer d'avoir un peu plus d'espace en bas et en haut de ce recadrage. Ainsi, l'ombre entre en jeu. Et déplacez cette ligne ici jusqu'à gauche. C'est vraiment important. Je vais vous montrer pourquoi je vais faire deux options là où ce n'est pas le cas et vous verrez la différence. Donc, c'est presque fini. Nous sommes prêts à réaliser ce prototype et à faire de ce cadre un balayage horizontal. Donc, tout ce que nous sommes, c'est très simple. Tout ce que nous avons à faire est d' aller au prototype ici et voir où il est écrit débordement, défilement débordant. Il suffit de faire un défilement horizontal. Et maintenant, allons-y. Vous devriez avoir le défilement horizontal. Par conséquent, si vous appuyez et cliquez sur, vous verrez les cartes se déplacer dans cette direction. Ok, et donc la raison pour le tableau est sorti vers la gauche, c'est que les images semblent défiler au-delà de l'appareil. Je ne vais donc pas faire ça. Je vais le faire à mi-chemin. Disons simplement ici. Et vous pouvez voir ce qui se passe, voir comment ils ne défilent jusqu'à la fin de l'appareil. Ça a l'air bizarre. C'est comme si c'était un clignotement, un clignement. Donc, ce que nous voulons faire ici, c'est que je m' assure toujours que c'est jusqu' au bout de notre aéroport pour donner l' impression qu'il va jusqu'au bout où se trouve l'appareil. Cool. Vous y allez. Il y a un défilement horizontal. Allons faire le défilement vertical ici, ce qui est à peu près la même technique. Très simple. Encore une fois, nous avons la navigation de haut niveau ici. Et c'est la même idée, c'est juste que les cartes défilent ici. Allons donc de l'avant et déplacons ce début vers le tableau d'art à droite qui dit que vous le faites. Encore une fois, je les ai toutes sélectionnées ici. Et encore une fois, assurez-vous simplement que chacun d'entre eux est groupé. Je passe juste par le commandement G sur tous ces éléments, en m'assurant qu'ils sont tous groupés. Et je comprends, je vais tous les sélectionner en même temps. Très, très important. Allez-y et cadrez cette sélection. Nous pouvons maintenant savoir en regardant les calques à gauche qu'il s'agissait d'un cadre. Donnons un nouveau nom à cet animal. Et nous pouvons voir, lorsque nous sélectionnons le cadrage animal à gauche, qu' il y a tous les groupes et ensuite les cartes qu'il contient. Le même genre de marché. Nous allons entrer, faire glisser ça dans le tableau d'art ici, aller en bas et maintenir Commandement. Faites glisser tout ça vers le haut. Revenez à l'onglet Création et n'oubliez pas de couper ce contenu. Nous pouvons maintenant voir le contenu en cours de découpage. Et encore une fois, nous allons ajouter de l'espace à gauche à un espace à droite. Et nous voulons qu'il arrive là où se trouve le début de ce menu. On dirait donc qu'il fait défiler sous ce menu. Et maintenant que nous l'avons fait, nous sommes prêts à y aller. Nous pouvons passer au prototype, nous pouvons connaître le défilement, et nous pouvons faire un défilement vertical. Et maintenant, si nous appuyons sur Lecture, vous verrez ici la même fonction. OK, c'est cool. Nous allons donc envisager de combiner les deux pour créer une interaction cartographique vraiment cool. Vous pouvez donc saisir l'étiquette de départ et la faire glisser jusqu'à l'endroit où il est indiqué balayage vertical et horizontal. Et je vais vous montrer l'exemple ici dans le prototype. Vous disposez donc d'une carte et vous pouvez voir avec ces fonctions de balayage vertical et horizontal. Et c'est une excellente interaction cartographique où vous cliquez et balayez. Encore très simple. Alors, allons-y et tirons le départ vers vous. Est-ce que j'ai cette grande image de carte ici ? Tout ce que vous avez à faire, c'est simplement glisser ça dans ce fichier et vous pouvez voir comment c'est encore une grande image qui va être recadrée un peu. C'est bien, c'est ce que nous voulons. Mais le même accord que nous avons fait avec toutes les pages au niveau de la carte. Nous voulons aller de l'avant puisque c'est un élément, nous n'avons pas besoin d'un groupe. Mais allons-y et cliquons dessus avec le bouton droit de la souris. Et nous allons encadrer cette sélection. Ok, donc vous pouvez voir maintenant sur la gauche que nous avons un cadre, appelons ça carte. Et à l'intérieur de cette carte, nous avons l'image. Revenons en arrière et sélectionnons le niveau de trame ici. Assurez-vous donc que vous êtes sur le cadre, et non sur la carte MAP, la carte de cycle MAP, l'image, le cadre. Et faisons la même chose. Maintenez la touche Commande enfoncée, faites-le glisser vers la gauche Tirez la commande, faites-la glisser vers la droite. C'est vraiment important. Vous le faites ou supprimez le balayage vertical et horizontal ne fonctionnera pas. Nous sommes donc en train de masquer cette image ici. Donc si vous avez regardé, si je retirais ça, vous n'avez pas besoin de le faire, mais si je retire cela, vous pouvez voir ici que nous avons toujours la carte, nous avons le cadrage. Nous n'avons pas encore fait le contenu du clip. Donc, si le clip, le contenu ressemble à cela. Mais vous pouvez voir le cadre ici. Nous avons dessiné la carte. Il ne nous reste plus qu'à retourner dans ce tableau d'art. Assurez-vous de sélectionner sur les couches de gauche ici, nous sélectionnons la carte, faisons le contenu du clip. Encore une fois, je suis sur le tableau cartographique, pas sur l'ensemble du plan de travail, juste sur la carte. Vous pouvez voir que je peux même cliquer dessus, couper un peu plus bas dans le menu ici est également très bien. Ce sera la même interaction. Allez-y et allez à Prototype. J'ai un défilement. Donc je comprends, je ne sélectionne que la fenêtre cartographique ici à gauche. J'ai fait un prototype. Et allons faire le défilement horizontal et vertical. Et maintenant, si nous allons sur le bouton Lecture, le vôtre devrait ressembler à ceci. Très bien, c'était assez amusant. J'espère que vous avez beaucoup tiré de cette vidéo. Et dans la vidéo suivante nous allons apprendre quelques fonctions de défilement, des variantes de composants et des mappages. Nous allons conclure avec les composants interactifs. Merci. voit bientôt. 13. Vidéo bonus 4 - Faites des variantes et composants actifs: Avant la dernière vidéo dans les sections vidéo bonus, nous allons couvrir le défilement pour faire fonctionner les variantes des composants et les composants interactifs, n'est-ce pas ? Revenons donc dans le dossier ici. Et nous venons de terminer avec le mappage et de montrer le balayage vertical et horizontal pour ressembler à ceci dans la démo. Maintenant, allons maintenant faire glisser cette zone de départ jusqu'à l'endroit où elle indique Tap pour faire défiler vers le bas. Et vous verrez ici si je vais aller de l'avant et montrer ça dans le prototype, je vais appuyer sur la pièce ici. Et ce que c'est, vous pouvez balayer vers le bas, voir tout le reste du contenu. Mais ce que nous allons faire, c'est que nous allons créer quelque chose où si vous touchez cette carte ou que vous touchez une section quelconque, il va faire défiler l' utilisateur jusqu'à cette section dans laquelle vous définissez, généralement plus commun. Vous verrez cela sur les sites Web lorsque vous faites défiler tout en bas. Et il y a un bouton qui indique comme une flèche qui indique faire défiler vers le haut. Vous verrez que c'est la même interaction ici. Et nous pouvons même construire cela ici sur ce point, sur ce point pendant une courte seconde. Bon, donc allons à peu près chercher l' étiquette d'ancrage de départ sur le prototype ici. Il s'agit d'interactions très, très simples. Nous avons donc ces quatre cartes ici. Si vous appuyez sur Lecture dans le prototype, il suffit de faire glisser le doigt comme normal. n'y a aucune interaction ici. Je clique sur ce panier, rien ne se passe. Et tout ce que nous devons faire ici, c'est au sein du tableau d'art lui-même, c'est que je vais cliquer sur cette carte. Combien généralement déchiquetés nous faisons glisser ces prototypes pour ajouter leurs cadres. Dans ce cas, je vais le faire glisser vers une autre carte du même prototype, disons cette section ici. Et il sait déjà au toucher, faites défiler jusqu'à, il sera par défaut à cela. Et c'est instantané. Nous ne voulons pas d'instant. Mais je vais vous montrer à quoi ressemble l'instant pour que vous puissiez l'éviter. Ok, donc ici, nous tapons sur la carte et vous voyez un instantanément emmène l'utilisateur ici, mais il n'y a pas eu de transition. Nous voulons donc que cette transition intervienne. Donc, au lieu d'être en état, nous voulons animer. Et animate fera défiler doucement l'utilisateur jusqu'à ce point. Alors, continuons et cliquons à nouveau sur la carte. Et vous pouvez voir qu'il remonte au chariot en haut ou en bas. Voyez donc que le défilement fait défiler joliment vers le bas. Vous ne voulez pas qu'il soit trop long. Allons de l'avant et disons que 20, 1000 millisecondes ici. C'est probablement trop lent. Vous pouvez voir à quel point c'est lent. Nous en voulons une version rapide et fluide. Donc peut-être même 500 millisecondes suffiront probablement. là que tu y vas. Jolie transition facile là-bas. Et ensuite, allons chercher la flèche ici où elle dit que vous le faites. Je vais juste copier ça. Je vais le faire pivoter. Je suis un peu réduit. Et je vais placer ça en bas, juste ici. Et nous pouvons faire la même chose ici. Nous pouvons prototyper cette flèche pour vous ramener à la carte ici. Même fonction, Alan, touchez, faites défiler pour animer. Et maintenant, vous pouvez voir ici, nous allons aller au fond. Si je clique sur la flèche, je remonte en haut. Et vous pouvez voir qu'il y a encore un peu de carte de chambre en dessous. Ce que nous pourrions faire ici, c'est déplacer cette flèche jusqu'au sommet. Nous pouvons regrouper la section supérieure de la barre ici. Je vais créer un cadre. Quand une récolte, c'est juste un peu. Très bien, et prenez le prototype. Et allons tout simplement jusqu'en haut de cette section ici. Voyons maintenant ce qui se passe. Là. Vous repartez en position. Je n'ai donc pas caché le chariot comme avant. Cool. C'est à peu près un défilement pour fonctionner. Vous pouvez l'utiliser pour les appareils mobiles, vous pouvez l'utiliser pour le Web, mais il est le plus souvent utilisé pour descendre à section par section ou faire défiler, ou pour faire revenir l' utilisateur jusqu'au haut sans les avoir à aimer glisser tout le chemin et continuer à glisser. Très bien, allons maintenant examiner un peu composants et les variantes de composants et les composants interactifs. C'est donc l'une des dernières fonctionnalités issues de Figma récemment. Et vous basez la dernière série de vidéos du cours, vous devriez savoir comment créer un composant et ce que cela nous permet de faire ici, je vais faire une démonstration de cette page. Cela nous permet un seul écran, de sélectionner toutes les variantes. Disons que je voulais choisir mes différentes saveurs ici et nous permettre de faire toutes ces variations en une seule. L'écran est ici, et c'est ce que on appelle les composants interactifs des composants, mais il utilise également une fonctionnalité appelée variantes de composants. Et alors, comment avons-nous dû faire cela ? Euh, ça ressemble un peu à ça. Vous devez prototyper toutes ces différentes interactions et les cas possibles sur lesquels l'utilisateur peut cliquer. Et maintenant, nous devons résoudre tout ça avec un seul écran ici. allons donc d'abord examiner une variante, puis nous examinerons la variance des composants ou les composants interactifs. Donc, si nous allons à la bibliothèque de composants ici, voir J'ai un système de cases à cocher ici. Faisons donc un composant tout d'abord, copions les deux pièces d' argent car nous allons en avoir besoin. Il suffit donc de sélectionner ces deux-là. Allez à la commande C. Je vais faire un zoom arrière un peu et passons simplement en haut ici et collons ceux-ci. Ce sont déjà des composants car vous pouvez voir comment quand je clique dessus, ils sont violets. Nous allons sélectionner les deux. Cliquons dessus avec le bouton droit de la souris. Et nous allons détacher l'instance. Encore une fois, sélectionnez ces deux clics droit, détachez l'instance. Cela va le détacher du composant. Maintenant, vous pouvez voir qu' ils sont des contours bleus par rapport au violet, ce qui signifie qu'ils ne sont plus liés aux composants. Ils sont en quelque sorte ponctuels. Commençons donc par la première case à cocher ici. Disons que nous allons changer ce coup par rapport à ça. Faisons simplement un trait rose. Et changeons ce texte par un texte plus sombre comme celui-ci. Encore une fois, je viens de sélectionner la couleur ici, ai remplacée en rose. Sélectionné, oui. Et j'ai sélectionné une couleur de notre bibliothèque. Si vous n'avez pas les couleurs, il suffit de détacher. Je détache donc la couleur ici. Vous pouvez voir si vous survolez, cela indique le style de détachement. Et je peux faire n'importe quelle couleur que je veux. Vous pouvez faire du noir ici. C'est peut-être juste trop noir. Ce que nous voulons d'abord faire, c'est dire que c'est un bon composant que nous voulons utiliser. Vous souhaitez également réutiliser cette case à cocher. Cliquons avec le bouton droit de la souris dessus. Allons de l'avant et faisons de cela un composant. Vous pouvez appuyer sur Créer un composant ici. Vous pouvez également le faire en cliquant sur ce petit diamant, comme l' icône de diamant Foursquare en haut. Et il fera la même chose. Il va créer un composant. Maintenant, ce que nous voulons faire ici, c'est que si vous pouvez voir à droite, nous avons un, lors de la sélection de ce composant, nous avons une fonctionnalité appelée variance. Allons de l'avant et appuyez sur Plus sur cette variante. Et il va dupliquer la case à cocher que nous avons ici. Et appelons cela actif. Nous en avons donc déjà une par défaut, préremplie pour l'étiquette déjà étiquetée plus tôt dans le fichier. Mais ce nouveau, nous l'avons changé pour devenir actif. Et disons que c'est non. Et maintenant, ce que nous voulons faire, c'est sélectionner un triple clic jusqu' à ce que j'arrive au remplissage ou juste au rectangle. Donc, triple clic, j'ai eu le rectangle. Je vais aller au remplissage, appuyer sur Plus. Et je vais prendre ce rose et le remplir. Ensuite, je vais copier cette case à cocher. Je vais tenir Option. Et je vais le faire glisser dans ce composant ici, donc je n'ai plus besoin de celui-ci. Bon, donc maintenant ce que nous pouvons faire, nous avons ces deux composants. Nous pouvons revenir à notre couche de transition mobile ici sur les pages. Et nous pouvons faire glisser ces composants dans le fichier. Par conséquent, si nous allons dans Assets, vous verrez ici tous les composants locaux qui se trouvaient dans cette couche de pages appelée bibliothèque de composants. Et vous verrez les nouvelles que nous avons fabriquées parce que nous les avons fabriquées avec une couleur plus foncée ici. Donc, vous voyez où il est dit oui. Faisons glisser ça ici. Et ce que vous pourriez faire à ce stade, lorsque vous concevez, c'est , disons, que je vais créer cet écran. Je suis une suppression de tous ces éléments ici. Allons en chercher un nouveau. Allons rendre l'arrière-plan un peu plus léger pour que nous puissions voir le, passons simplement au blanc. Et nous allons changer cela pour une couleur plus foncée. là que tu y vas. Ok, donc lorsque vous travaillez avec des composants, nous avons la section par défaut de ce composant. Mais disons que je veux le prototyper. Et je veux faire de celui-ci l'état sélectionné. Vous pouvez le faire ici, cliquez sur l'icône Oui et vous verrez la zone des composants. J'ai donc le oui, déposez notre case à cocher. Vous verrez ici qu'il y a la zone des composants. Assurez-vous que vous êtes sous l'onglet Création, non sur l'onglet Prototype de l'onglet Conception. Voyez où il est indiqué case à cocher par défaut. Et ce petit menu déroulant a la variante. Je peux donc facilement dire que je veux passer à l'état actif. Et il se transforme automatiquement en état actif. Et vous pouvez ajouter autant de variances que vous le souhaitez. Vous pouvez donc voir ici quand je clique sur Non, et je vais cliquer dessus ici. Et nous chargeons ça. un clic, il le modifie pour le savoir. Un autre. Rapide le change en oui. C'est donc à peu près une variance en bref. Mais figma a lancé une fonctionnalité encore meilleure qui est maintenant des composants interactifs, qui avant de faire glisser le niveau de départ vers ces écrans. Donc avant les composants interactifs, si nous voulions une interaction, disons pour une fonction dans laquelle vous choisissez votre sexe et que vous sélectionnez un homme ou une femme. Supposons que vous vouliez faire une femme et que vous vouliez que l'utilisateur ait un état de survol. Vous devrez créer un autre écran pour l'état de survol. Disons qu'il y ait eu un état sélectionné. Vous devrez créer un autre écran ici pour l'état sélectionné. J'ai déjà ce prototypé. Avant les composants interactifs, c'est ce que nous devrions faire. Nous avons trois écrans pour le rendre très simplifié et transparent. Comme je survole à nouveau la femelle, il n'y a pas de survol sur mobile, mais disons que c'était pour web et que vous cliquez et qu'il y a un état actif. Trois états de ce bouton prennent trois écrans différents pour obtenir cette interaction. Maintenant, avec les composants interactifs, que nous allons construire ici dans une seconde, nous pouvons obtenir un écran qui fait tout cela. Si je clique dessus, ça revient. Allons de l'avant et construisons cela. Donc, si nous passons à la section ici où il est dit normal, saisissons ce bouton ici. Je vais donc l'attraper. Je vais au Commandement G. Il suffit d'aller de l'avant et de le regrouper. Allons de l'avant et prenons ça. Revenons à nos couches ici en haut. Assurez-vous de voir vos pages ici. Parfois, vous ne le verrez pas parce que ce n'est pas le moyen, mais tirez vers le bas, tirez vos calques vers le bas si nécessaire. Passons à notre bibliothèque de composants. Et vous pouvez voir que je l'ai déjà construit, donc vous pouvez voir comment cela fonctionne, mais continuons et faisons cela ensemble. Donc, dans la même zone où nous construisons nos cases à cocher, placons la commande V si vous êtes sur Mac ou Control V si vous êtes sur un PC, PC, placons ce bouton féminin ici ou ce bouton de sélection ici . Et maintenant, faisons entrer les différents états et commencer à travailler avec les composants interactifs. allons donc nous assurer que nous sommes groupés. G. Cliquons dessus avec le bouton droit de la souris. Faisons de cela un composant. Créons donc un composant. Allons de l'avant et regardons en arrière notre onglet Design. Et assurons que nous appelons ça. Donc, dans le cadre supérieur ici, je vais cliquer trois fois sur mes calques à gauche. Appelez celui-ci comme état par défaut. Juste pour que je sache que lorsque je l'ai sélectionné, c'est l' état par défaut et que je l'ai nommé. Allons de l'avant et sélectionnons le composant ici. Et ajoutons la variante. Alors, qu'est-ce qui ajoute la première variante ici ? Et appelons celui-ci l'état de vol stationnaire. Très bien, et vous pouvez voir que j'ai déjà regroupé cette sélection ici, alors cliquons trois fois jusqu'à ce que nous obtenions, assurez-vous que nous sommes dans l'onglet Conception. Il est donc passé du prototype à l'onglet de conception. Triple-cliquez jusqu'à ce que le rectangle soit sélectionné. Nous ne voulons donc pas avoir la femelle, l'icône ici pour la femme, juste le rectangle et endroit où il indique un trait sur la main droite, pour le panneau de droite où il indique le design, nous allons ajoutez un trait. La valeur par défaut est d'un pixel. Je suis fan de garder vos coups épais. En général, je ne fais jamais de coups d' un pixel. Soit 23, la plupart des cas trois ou quatre sont plus courants. Juste pour le rendre très présent, présentable et apparent. On peut donc parfois ressembler à une erreur, comme si elle est trop mince, on ne dirait pas qu'il s'agit d'un accident vasculaire cérébral intentionnel. Soyons donc intentionnels, disons quatre. Et allons-y et faisons de cela le contour rose ici. Ok, donc maintenant si nous revenons en arrière et que nous sélectionnons tous les composants, avec toutes les variantes. Voyez donc où il est dit État par défaut. Vous verrez qu'il possède la propriété un état de survol par défaut. Et il a très, a sa propre section de variante. À ce stade, vous verrez les trois petites options de menu ici, les trois petits points de la variance. C'est important. Parce que c'est là que nous pouvons ajouter plus de variance. Nous ajoutons donc une nouvelle variante. Et il l'ajoutera au bas ici. Et appelons cela l'état sélectionné. Et encore une fois, je ne vais sélectionner que l'arrière-plan. Donc, triple-click et Thai obtiennent cet arrière-plan. Rendons tout le fond rose. Prenons l'icône ici. Faisons le blanc. Et passons le texte du noir au blanc. Ok, donc en ce moment, nous avons trois boutons différents que nous pourrions utiliser. Je vais revenir à la couche de transition mobile ici et entrer dans les ressources. Et nous avons ici ce bouton que nous avons créé. Et il a les différentes variances l'état survol, de l'état sélectionné. Mais nous ne nous sommes pas rencontrés, les prototypez encore pour être interactifs, non ? Nous avons juste le jeu de variance. Revenons donc à notre bibliothèque de composants. Et ce que nous pouvons faire maintenant, c'est que nous pouvons définir fonctionnalités prototypes au sein d'un composant. Cela semble fou, mais c'est très, très facile. Et tout ce que nous venons de faire, nous allons l'appliquer, mais uniquement sur les boutons. Nous allons donc nous assurer qu'ils sont tous regroupés. Nous les regroupons donc avant. Sélectionnez l' état par défaut de la variance. Vous voyez donc que vous êtes sur la valeur par défaut et allez maintenant dans l'onglet Prototype. Et maintenant, vous pouvez prototyper au sein des composants. Allons donc faire glisser ce prototype de flèche ici. Et disons que l'onclick va bien. En fait, qu'est-ce qui fait cela en planant ? Il passe à l'état stationnaire. Et ne faisons pas instantanément, dissolvons, disons 300 millisecondes ici. Encore une fois, j'ai pris le premier, je l'ai traîné jusqu'à celui qui a le coup. Et au lieu de dire onclick, je l'ai fait en planant. Et maintenant, nous allons faire la même chose avec celui qui est l'état stationnaire. Nous allons cliquer sur celui-là. Passez à l'état sélectionné. Et nous voulons que celui-ci soit onclick et dissoudre fonctionnera très bien. Ensuite, nous voulons également que quelqu'un clique dessus, l'utilisateur clique sur celui sélectionné et vous ramène à l'état par défaut. Nous voulons onclick et nous voulons dissoudre. Ok, donc supprimons celui-ci. Allez-y et copions cette page ici. En fait, je n'ai même pas besoin de le copier. Supprimons ce bouton ici. Passons à notre bibliothèque de ressources si tous nos boutons de composants. Et vous pouvez voir ici celui qui indique l'état par défaut. Quand on vient de faire. Et vous savez, c'est celui que nous venons de créer car il a la valeur par défaut, l'état de survol et l'état sélectionné. Lorsque nous allons dans l'onglet Design et que nous examinons les différentes variantes. Et maintenant, allons appuyer sur Play. Et vous verrez uniquement sur le prototype, le composant, la variance des composants interactifs en jeu. Il y a donc l'état par défaut. Si vous survolez, vous obtiendrez cette transition vers l'AVC. Et si vous cliquez dessus, nous obtenons l'état sélectionné. Et si vous cliquez sur cet état sélectionné, vous pouvez voir qu'il revient à l'état par défaut. Encore une fois, cela prend à peu près le prototypage que nous avons fait ici dans cette variante de composant, la sélection. Et en appliquant ces prototypes en un seul composant pour ces différentes interactions. C'est une fonctionnalité que j'attends depuis toujours. Encore une fois, amenez-le à montrer ce type d'interactions. Il faut tellement d'écrans comme il l'a fait ici. C'est ce à quoi ça ressemblait pendant quelques années. C'est donc vraiment génial que figma ait introduit ce type de fonctionnalité et c'est un gain de temps. Nous avons moins d'écrans à gérer et c'est vraiment facile à configurer. Et vous pouvez le mettre en place pour presque tout. Vous pouvez créer vos styles de boutons ici. Vous pouvez voir sur celui-ci que j'ai créé des boutons ici. Et si vous prototypez ce bouton ici, c'est l'état de survol. Vous avez donc l' état de survol de ce bouton. Donc, si nous revenons à notre fichier ici et que nous sommes entrés dans nos ressources, et que nous faisons glisser ce bouton ici, appuyez sur Lecture. Vous pouvez voir qu'il a l'état de survol noir plus sombre. Et encore une fois, c'est un bouton. Donc, ce que nous pourrions faire, c'est un enfant ou c'est un élément. Ce qui est génial avec le composant, c' est que je peux utiliser tous ces différents boutons ici. Je peux dire que celui-ci est sauvé. Celle-ci est la prochaine. Celui-ci est annulé. Celui-là est génial. Et celui-là est charmant. Et je peux revenir à mes couches. Je peux accéder à mes composants. Disons que je ne veux plus de rose. Je veux changer cette couleur en bleu. Et je veux changer ce survol pour dire, un gris plus clair ici. Et maintenant, lorsque nous reviendrons sur notre tableau, vous verrez que toutes les versions de ce bouton se transforment en bleu. Et maintenant, nous allons regarder l'état de vol stationnaire. Vous pouvez également voir qu'il a été modifié, donc il met à jour toutes les instances différentes sont enfants de ce composant maître, tout d'un seul coup, en une seule édition. Okay, tu l'as là. C'est la fin de toutes les vidéos bonus. Comme toujours, merci beaucoup d' avoir suivi les cours. J'ai bientôt quelques nouveaux cours que je vais tendre la main et le faire savoir à tout le monde quand ils seront lancés. Et comme toujours, amusez-vous concevoir et à vous souhaiter le meilleur. Au revoir.