Créer des prototypes interactifs avec Figma

1. Introduction: Bienvenue au cours de prototypage avec Sigma. Dans ce cours, nous allons apprendre comment nous pouvons créer des prototypes interactifs Riel en utilisant le logiciel de conception en ligne gratuit appelé Sigma. Bonjour, Mon nom est Neema et je suis votre instructeur pour ce cours au cours des 10 dernières années sont travaillés sur des dizaines d'applications mobiles et Web pour les projets de démarrage de mon propre et aussi clients aussi bien. Et dans ce cours, je vais vous montrer comment vous pouvez réellement créer un prototype de travail complet. Ils peuvent montrer à leurs collègues, amis, investisseurs et ainsi de suite. abord, nous allons penser au projet que nous avons déjà conçu appelé Clean Kangourou, qui est une application mobile pour un service de livraison de blanchisserie. Nous allons prendre les conceptions de l'application mobile et créer un prototype utilisable avec riel, transitions, états et même des animations intelligentes. Nous allons tester notre prototype dans la carte de figues elle-même, et nous allons également vérifier l'application Mirror de Sigma où vous pouvez voir les prototypes, la vie, et aussi voir vos conceptions changer la vie que vous travaillez sur eux en tant que bonus Découvrez également comment les équipes travaillent dans sigma, comment nous pouvons réellement créer une équipe invitant les membres de l'équipe à notre projet et travailler avec eux dans le même design. J' ai également appris à partager une exportation, nos projets avec des clients, des collègues et ainsi de suite. Donc, si vous êtes prêt à apprendre à créer un beau prototype pour vos conceptions en utilisant fausse maman, puis sautez droit dans et je vous verrai dans ce cours. 2. Importer l'importer l'UI Mobile: Bon, donc sans plus tarder, allons tout droit créer un prototype de cette application mobile que nous avons ici . Il s'agit d'une conception mobile pour une application appelée Clean Kangourou, qui est essentiellement fournit. Ah, de livraison de blanchisserie. Les gens peuvent avoir leur lessive. J' ai ramassé et déposé gentil et propre. Et j'ai en fait un cours où je vous montre comment vous pouvez concevoir une maquette mobile complète comme celle-ci . Dans un autre cours appelé Learn Sigma a conçu un mobile complet, vous aux. Dans un autre cours appelé Learn Sigma a conçu un mobile complet, Alors n'hésitez pas à consulter ce cours aussi, si vous voulez apprendre à réellement concevoir des maquettes mobiles qui ressemblent à ceci. Mais dans le but de ce cours, nous allons surtout nous concentrer sur la façon de créer un prototype réel à partir de ça. Avant d'aller de l'avant, veuillez aller de l'avant et télécharger le fichier de stigmatisation de ce projet ici, qui sera disponible sous l'onglet Projet et la ressource est ici. Vous cliquez dessus, puis trouvez la ressource que vous pouvez télécharger à partir de là. Donc, une fois que vous avez téléchargé, allez-y et ouvrez votre figment. L' application n'a pas d'importance si vous êtes sur un bureau ou sur le Web, vous pouvez créer des prototypes sur les deux. Maintenant, si c'est votre première fois en utilisant la figue MMA, alors dirigez-vous vers la figure. Medog vient de mon frère. Vous serez en mesure de vous inscrire au service, puis d'aller de l'avant et de suivre avec nous. Donc, une fois que vous êtes en fig ma, vous pouvez simplement aller à votre dossier brouillons ou n'importe où où vous gardez vos designs, puis aller avant et simplement glisser notre fichier fix point que vous avez téléchargé. Donc, ce devrait être un fichier appelé Clean Kangourou Mobile. Vous y point faux, alors allez-y et faites glisser ça. C' est un peu un fichier plus grand, donc il peut prendre un certain temps à importer pour lui donner un peu de temps, et qu'une fois qu'il est importé, vous verrez qu'il indique Fichier importé avec succès pour aller de l'avant et cliquer sur terminé, puis aller de l'avant et juste ouvrez-le en double-cliquant sur le fichier. Parfait. Et la leçon suivante. Nous allons apprendre comment fonctionne le mode de présentation et le prototypage et Sigma 3. Créer des prototypes: d' accord. Ainsi, comme je l'ai mentionné dans l'introduction de ce cours, l' un des outils vraiment électriques de la figure MMA est son prototypage. Ainsi, le prototypage nous permet de donner vie à nos conceptions afin que nous puissions réellement voir toutes les pages de l'année en action. Donc maintenant, si vous allez sur ce bouton et appuyez sur présent, qui nous permet de voir à quoi ressembleraient nos conceptions sur un appareil comme ici. Et même si c'est cool, comme vous pouvez le voir en ce moment, il n'y a vraiment pas d'ordre et j'utilise les touches gauche et droite du clavier pour basculer entre ces pages. Mais si vous voulez aller de l'avant et réellement créer un prototype pour cette conception avec outil de prototypage, nous pouvons réellement faire passer ce projet au niveau supérieur et en créer un prototype. Alors allons-y et fermons ça juste là. Ah, et puis allez-y et ouvre-toi. Le panneau prototype ici, comme vous le voyez, nous donne un petit aperçu. Ici, nous avons l'appareil de l'iPhone 11 pro parce que nos tailles d'écran ou les tailles de cadre correspondent à la sonde iPhone 11. Et puis on peut même changer la couleur de fond de notre mode de présentation à partir d'ici. Et maintenant que nous sommes en mode prototypage, assurez-vous de sélectionner le mode prototypage ici. Ah, vous pouvez réellement aller de l'avant et créer des connexions entre les pages. Et voici ce que je veux dire, si vous allez par ici, nous pouvons réellement connecter ce cadre ici si nous l'avons choisi, disons ce cadre par ici. Et maintenant ces deux images sont connectées. Ah, et si je tape n'importe où sur ce cadre dans mon mode d'aperçu, il ira à cette page et je peux le démontrer en allant de nouveau en mode aperçu. Maintenant, si je touche n'importe où sur la page, cela me conduira à cette page de tutoriel. Bien sûr, ce n'est pas ce que nous voulons dans ce cas. Dans ce cas, nous voulons réellement appliquer cette option prototype au bouton ici afin que vous puissiez le faire aussi en mode prototype. Si je retourne ici, vous verrez que j'ai un tas d'options différentes, donc vous pouvez choisir l'animation pour être instantanée, dissoudre intelligente, animer, emménager, sortir eso. Selon la façon dont vous voulez que votre animation se produise, vous pouvez aller de l'avant et tweeter et jouer avec eux ici. Je n'entrerai pas trop dans les détails des différentes animations, mais n'hésitez pas à jouer avec elle et à voir ce qui se sent bien. Et puis ici, vous pouvez réellement aller de l'avant et changer la façon dont vous voulez réellement déclencher ce changement payé là-bas,que là-bas, soit sur le dessus, qui est ce que nous avons à l'origine ou sur glissement. Donc, si vous faites glisser quelque chose sur l'écran en survolant ou en appuyant sur un tas d' autres options, voici bien, vous pouvez utiliser la touche de suppression pour réellement se débarrasser des connexions prototypes ici et maintenant ce que nous voulons à faire est en fait de créer une connexion prototype entre notre mais ici et les étapes du tutoriel, puis connectez ces boutons pour passer à l'étape suivante du tutoriel et ainsi suite. Et puis à partir d'ici, nous voulons, bien sûr, passer à notre page de paiement ici et de notre page de paiement à notre page de carte et vous avez l' idée. Ensuite, nous allons aller de l'avant et connecterons les barres supérieures. Voici aussi cela nous amène à la bonne page que nous cliquons et peut-être enfin connecter ce bouton de déconnexion à notre première page ici et vraiment créer un joli prototype pour nos conceptions ici 4. Ajouter des liens entre des cadres: d' accord. Maintenant que nous avons une idée du fonctionnement de la présentation sur les prototypes, allons de l'avant et créons un prototype réel à partir de nos conceptions. Alors allez-y et connectez d'abord cela mais dans pour connecter bouton simplement aller et cliquez sur eux dans ce petit cercle au milieu. C' est ce qui vous permet d'aller de l'avant et de vous connecter à différents écrans. Donc on va faire ça. Et ensuite, nous allons aller de l'avant et connecter notre bouton de connexion, aussi. La plage de demande ici parce que nous n'avons pas une inscription avec e-mail ou Sénat, mais l'option Google ici ou la conception de notre page, nous ne nous inquiétons pas à ce sujet. Hum, donc nous allons juste aller de l'avant et créer ces deux connexions ici pour maintenant et puis d'ici. Nous voulons que ce bouton nous connecte au tutoriel. Étape deux page, puis le bouton ici pour nous connecter à l'histoire sera Étape trois page. Et puis enfin, je double-clique ici pour sélectionner des boutons. Je veux que cette page m'emmène ou ce bouton pour m'amener à l'année de base de paiement sur la page de paiement. Je veux aller de l'avant et connecter mon au tribunal, mais en deux que ma page. Et puis la sauvegarde adressée enfin, à ma demande basée ici. Et nous avons donc la connexion mise en place ici. Maintenant, allons de l'avant et sélectionnez notre page de demande ici, puis sélectionnez l'onglet sont à partir du profil ici. Nous voulons aller de l'avant et aller à la page de profil et nos services à la page de services, et nous allons juste devoir le faire dans les autres pages aussi. Ici aussi, dans la barre supérieure de la page de profil, nous voulons demander de nous ramener à ici services pour nous amener à entendre. Et puis enfin et ici nous voulons profil pour nous emmener ici et demander de nous emmener ici. Assurez-vous de sélectionner l'ensemble de la zone de robinet ici. Sinon, il pourrait être difficile de cliquer. Je pense que nous avons tout connecté ici. La seule chose qui nous manque en termes de connexion est cette page de carte ici ou cette section de carte ici. Nous allons aller de l'avant et relier cela ici à nouveau pour que l'utilisateur puisse taper et changer d'adresse. Maintenant, allons de l'avant et présentons. Cela pourrait prendre une seconde à charger ici. Mais une fois que tu seras là, on pourra faire le tutoriel. Et ça marche. Suivant. Cool. Donc juste deux choses que je vais réparer ici, euh, euh, nous allons aller de l'avant et supprimer cette connexion et en fait aller de l'avant et changer le bouton fait pour vraiment revenir à notre corne et page à la place. Et allons de l'avant et connectons également le bouton de déconnexion ici aussi. La page de connexion ici et ensuite nos paiements, mais pour aller à cette page de paiement dans le profil, et ensuite nous allons connecter la carte à la carte ici est faible. Et maintenant je pense que nous avons tout connecté correctement. Allons-y et recommençons. Donc une fois que nous sommes ici, testons notre tutoriel. Étape 1, naviguez pour demander l'école. Trois vêtements propres. Génial. Ça nous ramène ici. Nous nous connectons. Ça nous amène à ici. C' est plutôt cool. Vous allez sur notre page de profil, nous pouvons aller à nos services. Nous pouvons même revenir à notre paiement ici. Maintenant, cela nous mènera à nouveau à travers ma page et nous pouvons réellement nous déconnecter d'ici une houle qui nous enfermerait. Donc je pense que c'est plutôt cool. Nous avons fait un prototype de notre projet ici, alors prenons une pause rapide et ensuite, dans la leçon suivante, nous allons revenir et voir comment nous pouvons y ajouter du contenu défilant. 5. Faire du Scrollen dans des prototypes: Bon, donc notre prototype fonctionne, mais il y a un petit problème ici. Nous ne pouvons pas utiliser de contenu qui défilent à base de plantes. Donc ça. Écoute, on va apprendre comment on peut appliquer du contenu inscrutable. Je veux juste te montrer une chose dans les services ici. Allons de l'avant et rendons cette page plus longue. Revenons à notre mode design ici. Donc, d'abord, allons de l'avant et assurez-vous que notre page de service ici a les bonnes contraintes. Quand faire à gauche, à droite et au centre pour toutes ces options ici, et alors celui-ci devrait être à gauche et à droite. Et bientôt en bas. Notre cadre devrait être réactif. En fait, pour ceux-là, nous voulons faire haut au lieu de centre. Cool. Donc maintenant ma page de services devrait avoir une belle, belles contraintes s'appliquer à elle. , Donc tout ce qu'ils veulent faire ici,c'est aller de l'avant et étirer notre page de services. Et puis allons de l'avant et juste, hum, sélectionnez tous ces et utilisez la commande D pour faire une autre copie. Il suffit de les placer ici, puis nous allons de l'avant et assurez-vous que notre robinet ou est au-dessus de tout cela. Ça devrait l'être. Donc maintenant, si je retourne à mon prototype mon mode de présentation ici et aller dans l'onglet Services. Vous verrez ici quelque chose de bizarre se passe. Ma barre d'onglets est en bas. Cependant, cela devrait rester sur la page, peu importe la façon dont vous faites défiler. Et aussi la même chose pour ma barre de navigation ici en haut et les autres pages. Ce n'est pas un problème, parce que nous ne sortons pas de l'écran. n'y a pas de défilement ici. Ah, mais ici parce que nous avons une option de défilement. Maintenant, nous voyons que certaines des choses ici, il peut être problématique, mais la figure qu'il vous donne la possibilité d'aller de l'avant et effectivement verrouiller les choses en place. Donc, si vous allez et sélectionnez votre barre d'état, puis maintenez la touche Maj et sélectionnez votre navigation et aussi les options supérieures ici, allez-y et cochez cette case où il indique position fixe lors du défilement. Et maintenant, si vous allez de l'avant et repassez en mode présentation Maintenant que vous voyez, nous n'avons plus ce problème. Et nous faisons défiler Lee sur cette option de liste ici. Bien sûr, le seul problème avec ça est qu'une partie du le seul problème avec ça est qu'une partie du texte ici est cachée. Donc, vous pouvez toujours aller de l'avant et ajouter peut-être un peu d'espace blanc ou un rectangle blanc dessous de la dernière option ici. Nous ne ferons pas ça ici ensemble, mais n'hésitez pas à le faire comme un exercice pour vous-même. Une chose que vous pourriez remarquer dans notre mode de présentation ici est qu'il n'y a pas de promenade entre les magasins ou les cartes de magasin ici en ce moment, alors allons de l'avant et ajoutons cela pour aller de l'avant et fermer ceci. Revenez à nos conceptions afin d'ajouter des options de défilement horizontal ici pour ces cartes, nous devons aller de l'avant et faire réellement les sélections cellule. Alors allons de l'avant et traînons ça hors d'ici. Alors allons de l'avant et en fait sélectionner toutes mes cartes de magasin ici. Et puis nous pouvons utiliser l'option Commande G pour encadrer ces sélections, puis aller à l' outil prototype , puis, à partir du comportement de débordement, choisir le défilement horizontal. Mais nous devons également aller de l'avant et changer la taille de ce cadre pour correspondre ou cadre parent ici, et maintenant, si je vais de l'avant et passe en mode présentation maintenant, nous pouvons faire défiler entre ces options. Cependant, ce n'est pas très idéal en ce moment, parce que , ah, nous avons rendu celui-ci plus grand parce que c'est celui que nous regardons. Donc, idéalement, dans un prototype réel, vous voudriez redimensionner les autres cartes pour devenir plus grandes et plus petites comme vous les avez dans le cadre ici. Mais encore une fois, cet outil est juste pour créer un prototype de base que nous pouvons montrer, aussi. Peut-être que les clients ou les collègues testent nos idées pour le design ici. Donc, une chose que je veux mentionner quand vous êtes en mode prototype, vous verrez cette petite icône ici, qui représente essentiellement ce que sera la première page de votre prototype. Donc, si vous voulez changer cela et avoir effectivement cette page de requête, disons être votre page principale pour le prototype. Tu peux le faire. Et maintenant, si je passe en mode présentation, il démarrera automatiquement sur cette page au lieu de la page de connexion. Ou si vous allez de l'avant et faites ce changement à la page de connexion ici, il affichera effectivement la page de connexion ici comme ma première image. Cool. Donc c'est le prototypage pour nous. Et la prochaine leçon, nous allons réellement aller de l'avant et afficher ce prototype sur unappareil mobileréel appareil mobile 6. Tester sur un appareil réel: D' accord. Donc, dans la dernière leçon, nous avons appris comment nous pouvons réellement créer des prototypes et les prévisualiser ici sur notre carte de figues . Jusqu' à présent, nous avons pu présenter notre maquette ici et le bureau de Sigma. Mais que se passe-t-il si vous voulez vraiment avoir une bonne idée de votre prototype sur notre application mobile  ? Nous pouvons simplement le faire en nous dirigeant vers le mode présent ici, et je clique sur le prototype de partage. Donc, à partir d'ici, nous pouvons copier un lien et ensuite déplacer ce lien vers notre appareil mobile afin que vous puissiez soit l'envoyer par e-mail à vous-même ou vous envoyer un SMS. Donc, comme vous pouvez le voir ici, vous pouvez juste aller sur safari coller ce lien là-dedans, et ensuite vous pouvez réellement aller de l'avant et prévisualiser votre prototype Voici bien, um, bien um, que ce soit dans ah année de l'interface de site web, il n'a donc pas l'air mobile. Ça n'a pas l'air aussi bon et propre que nous le voulions. Vous voyez, toutes les pages ici ont bien fonctionné, mais figure a en fait une application elle-même aussi. Donc, si vous vous dirigez vers l'App Store, hum, et puis allez-y et cherchez juste miroir MMA fig et puis la première application là que vous voyez Allez-y et téléchargez cela. Donc, une fois que vous ouvrez l'application, Bob, vous avez juste besoin de vous connecter avec le même compte que vous utilisez pour vos designs et fig MMA. Une fois que vous vous connectez, vous devriez être en mesure de voir votre application d'une manière très agréable prototype. Et si vous concevez simplement des cadres uniques, vous pouvez également consulter vos obligations. Hum, cette figue maman, votre application nous aide en fait un prototype et parcourir nos designs comme nous les concevons. La vie. Même si vous conceviez un seul cadre et que vous voulez le voir en direct sur votre application, vous pouvez simplement garder votre téléphone juste à côté de votre ordinateur et commencer à concevoir et voir ces changements prendre vie directement dans la figure. Maman, vous êtes apus Eh bien, donc c'est une autre façon que vous pouvez réellement parcourir votre aperçu ici pour vos designs sur votre appareil réel. Assez cool 7. Partager nos fichiers: donc partager vos fichiers figment, c'est super simple. Si vous montez ici juste à côté de l'endroit où se trouve votre propre avatar, vous pouvez en fait aller de l'avant et cliquer sur le bouton de partage à partir d'ici. Vous pouvez inviter quelqu'un directement à entrer. Si vous tapez leur email et envoyez une invitation, il leur enverra le lien. Et puis à partir d'ici, fonction de qui vous avez invité, vous pouvez vraiment aller de l'avant et choisir quel genre de permission ils ont, s'ils peuvent simplement voir. Ou ils peuvent également éditer les dessins. Donc, si vous l'envoyez juste à un client, peut-être que vous voulez juste qu'il le voie. Mais si vous l'envoyez à un autre concepteur travaillant sur ce projet, vous pouvez aller de l'avant et choisir modifier pour son autorisation. Gardez à l'esprit que ce paramètre appartient au partage du lien afin que vous puissiez réellement obtenir un lien vers votre projet que vous pouvez donner à n'importe qui en copiant simplement le lien à partir d'ici. Et donc une fois que vous faites cela, le lien a été copié dans votre presse-papiers. Donc, juste à titre d'exemple, j'ai ouvert ah page Firefox ici et appuyez sur Entrée une fois qu'il se charge, je serai en mesure de voir le projet et de le parcourir à partir d'ici. Pour l' instant, instant, je n'ai pas la permission d'éditer ou de voir les calques ou quelque chose comme ça. Tout le conduit Oh est basculer entre mes pages ici et voir différentes pages et juste parcourir les conceptions. Donc, ce serait génial si vous l'envoyez à un client pour simplement partager ce lien avec eux , puis choisissez l'option d'affichage. Je peux même voir d'autres personnes actuellement sur cette édition de document obtenir. Il me montre juste mon application de bureau. Ici, être ouvert est faible et vous montre même d'autres personnes ouvertes sur cette page. Vous pouvez même aller de l'avant et présenter les dessins d'ici ainsi que si cela fonctionnera comme prévu. Donc, encore une fois, vous pouvez partager vos projets à partir d'ici, et vous pouvez même sélectionner un cadre individuel eso si, par exemple, je veux juste partager cette page de connexion ici. Je peux aller à Aiken sélectionné, puis aller à partager, puis choisir lié à l'image sélectionnée, qui est automatiquement choisi dès maintenant parce que je n'ai qu'une seule image. Mais si vous voulez partager tout le projet comme nous l'avons fait avant. Allez-y et cliquez sur n'importe où en dehors de votre campus ici, euh, et puis vous pouvez utiliser le partage, mais et je partagerai votre renommée un fichier avec tous ceux que vous voulez. Vous êtes toujours les bienvenus pour partager vos projets avec moi. Et je serai heureux d'entrer et de laisser quelques commentaires et commentaires pour vous aider à améliorer vos conceptions. Maintenant, dans la prochaine écoute, nous allons explorer comment vous pouvez réellement travailler avec des équipes de Fig MMA aussi. 8. Travailler avec des équipes: Donc, comme nous l'avons mentionné précédemment, Sigma est vraiment puissant en termes de travail avec une équipe. Donc, si vous voulez travailler avec une équipe sur ce projet ou tout autre projet, en fait encore une fois, vous pouvez aller à l'option de partage ici, puis taper l'e-mail de cette personne sur. Ils auront un lien où ils pourront travailler avec vous sur ce projet. Mais avant de le faire, disons que vous travaillez avec une équipe sur plusieurs projets et que vous voulez réellement mettre en place cette équipe pour plusieurs projets dans votre MMA fig. Donc, pour ce faire, nous devons d' abord aller à la fausse page d'accueil que je reçois sur l'application Web. Il vous suffit d'aller à l'option de menu et de choisir de revenir aux fichiers. Et puis d'ici. Si je viens ici, je verrai qu'il y a une option pour créer une nouvelle équipe, donc c'est ce que je vais faire. Il vous demandera de donner votre équipe et votre nom. Imaginons qu'on travaille avec une équipe de kangourou propre sur ce projet. Créez une équipe, puis vous pouvez aller de l'avant et ajouter vos collaborateurs à partir d'ici en insérant simplement leur email. Alors je vais aller de l'avant et inviter un de mes collègues à se joindre à moi pour ce projet. Donc je vais mettre leur email ici. Allez-y et continuez. Et maintenant, il vous demandera de choisir vos plans d'équipe. Donc, si vous travaillez avec plusieurs personnes, , vous voudrez peut-être aller avec une usine professionnelle ou organisationnelle, mais le plan gratuit vous donne accès à jusqu'à deux éditeurs et trois projets. Alors allons de l'avant et choisissez ce démarreur pour l'instant. Et puis nous avons une équipe ici où nous pouvons réellement attribuer le logo. Nous pouvons changer le nom et la description et tout ici aussi. Et vous pouvez même ajouter plus de gens à votre équipe d'ici. Une fois au cours de votre équipe, vous pouvez aller de l'avant et créer un nouveau projet. Voici donc allons de l'avant et créons un projet. Et appelons ça IOS se moquer. Et puis vous pouvez choisir quel type de niveau de permission les gens à l'équipe de kangourou propre auront pour que je puisse choisir. Ils peuvent soit l'éditer ou ils peuvent le voir, ou vous pouvez le faire inviter seulement je vais le laisser à tout le monde à Clean Kangourou peut éditer, et je vais aller de l'avant et créer un projet. Et une fois que j'ai créé mon projet, je peux soit créer un nouveau fichier étaient juste faire glisser des fichiers de l'extérieur vers ici. Ou comme nous avons déjà un projet pour le projet Clean Kangourou ici, je vais aller de l'avant et faire glisser ça droit dans mon propre projet Marca kangourou Rus ici. Et maintenant, si j'y vais et que je l'ouvre, nous y avons accès ici, et mon collègue pourra également participer à ce projet. Et maintenant, à partir d'ici, vous pouvez même voir un petit avatar qu'ils ont rejoint sur le projet. Alors maintenant, pendant que je fais mes propres ajustements à la conception, ils peuvent sauter et commencer à apporter des modifications à d'autres pages aussi bas. Je suis là, peut-être faire mes propres modifications. Je suis là, Ah, ils vont travailler sur le projet avec moi sur une autre page. Et je peux voir leur travail ici si je clique sur leur avatar ici. Et maintenant, à partir d'ici, je peux les voir fonctionner. La vie est donc si vous avez plusieurs personnes qui travaillent avec vous ceci, mais vous pouvez voir exactement qui fait qui travaille sur quoi en ce moment. Observez eux aussi. Et puis vous pouvez même aller de l'avant et laisser des commentaires pour eux aussi. Donc, si vous vous souvenez que nous avons parlé de cet outil commun, vous pouvez également dire, appuyant simplement sur C sur votre clavier, je peux aller de l'avant et laisser un commentaire ici et dire, Peut-être que nous pouvons leur dire quand le paiement sera facturé sur. Laissez ce commentaire pour eux et ils seront en mesure de répondre à moi une houle directement dans la figue MMA sur à nouveau avec un tabouret commun. Vous pouvez aller à n'importe quelle partie de la page et laisser un commentaire pour cette partie de la page afin que les autres concepteurs sachent exactement de quoi vous parlez. Si vous avez également tapé cette option de commentaire ici de côté, vous pouvez également voir tous les commentaires et les parcourir et laisser des réponses et rapidement sauté aux commentaires que vous voulez peut-être répondre ou pour voir les réponses que votre équipe a faites donc encore très puissant. Et il peut utiliser la clé d'échappement pour sortir de cet outil commun. Cool. Donc, ce sont des équipes pour vous et pour comprendre à nouveau. Il est super puissant, et il vous aide vraiment à devenir plus productif avec vos designs et avec ceux de votre équipe. 9. Utiliser des superpositions pour les Tutoriels: d' accord. Donc, jusqu'à présent, nous avons pu mettre sur pied un prototype assez basique qui fonctionne très bien. Et nous avons testé à la fois sur Sigma et sur nos appareils mobiles actuels. Donc maintenant, nous allons aller un peu plus loin et explorer certains des outils les plus avancés auxquels nous avons accès dans le prototypage pour vos propres projets de conception et prototypes est bien, je vous encourage à utiliser certains de ces outils pour Faites vraiment ressembler votre prototype, Riel. Donc la première chose que nous allons faire est d'aller de l'avant et d'explorer ce que sont les superpositions dans le prototypage. Nous allons le faire en créant une nouvelle façon de passer par notre tutoriel. Etapes 12 et 3 par ici. Donc, comme vous pouvez le voir ici, nous avons branché ces trois pages, hum, en utilisant les boutons suivants et ensuite notre tutoriel, mais dans notre page de connexion. Mais ce signal vous oblige aussi à faire est en fait ouvert et superposé sur le dessus de la page qui est déjà ouverte. Donc essentiellement, cela nous donnerait une meilleure façon de présenter réellement ces fiches didacticielles, plutôt que de présenter de nouvelles pages pour chacune d'entre elles. Donc pour montrer que nous allons aller de l'avant et en fait dupliquer chacune de ces cartes de sensations fortes de ces pages, puis placez-les quelque part ici. Et puis on va changer nos connexions pour passer par cette carte de tutoriel là-bas. Alors tout d'abord, allons de l'avant et sélectionnez notre tutoriel. Étape une page sélectionnée carte didacticiel. Assurez-vous que vous avez tout sélectionné, hum, à l'intérieur de notre instance de carte de tutoriel ici. Et puis tout en tenant vieux, vous pouvez aller de l'avant et faire glisser une copie à l'extérieur d'ici, ce que nous voulons faire. Et je vais de l'avant et je fais la même chose pour deux. À Rocard. Deuxième étape, faites glisser une copie ici. Et enfin, nous allons de l'avant et faisons la même chose pour notre tutoriel. Étape trois carte. Et je vais aller de l'avant et m'assurer que l'air est bien aligné juste pour les garder organisés. Bon, Alors tout d'abord, allons de l'avant et sélectionnez cette connexion principale à partir du bouton didacticiel ici. Laisse-moi aller de l'avant et zoomer un peu ici. Cool. Donc, au lieu de passer ici, nous allons aller de l'avant et supprimer cette connexion spécifique entre le bouton de frisson et cette page. Sélectionnez simplement cette connexion, puis supprimez rapidement sur votre clavier qui va aller de l'avant et supprimez simplement cette connexion. Et puis nous allons aller de l'avant et faire glisser une nouvelle connexion à cette carte de tutoriel, le 1er 1 ici que nous avons et maintenant sur le côté droit, au lieu de naviguer vers je vais aller de l'avant et sélectionner, ouvrir trop et encore qui nous laissera rester sur la page qui étaient sur et juste aller de l'avant et ouvrir. Ceux-ci ont des superpositions en haut de la page, et vous verrez comment cela fonctionne en seulement une seconde. Ensuite, ce que nous voulons faire est juste d'aller de l'avant et de lier ces boutons correctement également. Allons-y et sélectionnons ce 1er 1 ici. Supprimons cette connexion pour le bouton et allons de l'avant et dragon nouvelle connexion à l'étape suivante. Et au lieu de naviguer à, nous voulons aller de l'avant et en fait l'étrangeté d'échanger avec. Assurez-vous que vous sélectionnez cela, car sinon la superposition ne fonctionnerait pas correctement. Allons de l'avant et faisons exactement la même chose ici. Sélectionnez cette connexion et supprimez ici et faites-la glisser vers cette page ici et encore. Tu veux le changer pour arrêter. Et enfin, pour ce bouton que nous avons ici le bouton fait au lieu de revenir à cette page ? Parce que nous sommes déjà sur cette page et nous venons d'ouvrir et trop, nous pouvons réellement changer Naviguer pour juste fermer superposition et doubler à peu près fermé ce juste là. Donc, ne nous allons pas de l'avant et le tester en appuyant sur le bouton de mode présent ici. Nous pensons juste que c'est le deuxième à rafraîchir, et ensuite nous allons aller de l'avant et cliquer sur notre carte de tutoriel, mais dans et puis, comme vous pouvez le voir, la carte éditoriale est là et tout fonctionne comme prévu. n'est pas la seule chose que vous avez pu remarquer ici, c'est que nous n'avons pas le même fond sombre . Et donc les superpositions se fondent en quelque sorte avec l'arrière-plan. Allons de l'avant et travaillons là-dessus maintenant, alors fermons ceci et alors ce que nous voulons faire est que nous voulons aller de l'avant et sélectionner cette première carte ici, sélectionnez la connexion ici que nous avons, puis plus ici, il nous donne un tas d'options, qui vont passer par l'avant. Donc, tout d'abord, vous aurez la possibilité de sélectionner où vous voulez trop être. Ainsi, par exemple, si vous avez un menu par opposition à une carte ici que vous voulez afficher, vous pouvez sélectionner quelque chose comme en haut à gauche. Ou si vous avez quelque chose qui va présenter du bas, vous pouvez faire le centre du bas. Donc, ces options fonctionnent bien pour, comme, les menus ou les barres d'onglets et des choses comme celles que vous souhaitez ouvrir temporairement sur votre page. Et puis vous avez deux options par ici. L' un est fermé. Lorsque vous cliquez à l'extérieur. On va aller de l'avant et choisir ça, et j'expliquerai en second lieu ce que ça fait. Et puis nous allons de l'avant et ajoutons de l'arrière-plan derrière superposition, ce que nous voulons. Ici, nous vous donnons l'option de couleur, que nous voulons juste nous laisser noir. Et puis nous voulons aller de l'avant et a dit qu'ils vont payer la ville à Let's écrire 45%. Donc maintenant, si je vous ai présenté remarquera deux choses nouvelles qui se sont produites ici. Allons de l'avant et ouvrons la carte du tutoriel. Donc maintenant, comme vous pouvez le voir, j'ai un peu un fond sombre. Maintenant, tu peux aller de l'avant et le rendre plus sombre si tu veux, mais je pense que c'est plutôt bon pour l'instant. Impressionnez ensuite. Ensuite, ça marche. Et puis, si vous vous en souvenez, nous avons sélectionné une option qui nous permet de fermer le trop en tapant à l'extérieur. Donc, essentiellement, ce que cela signifie est que si vous appuyez n'importe où en dehors de la fermeture trop visible automatiquement . Essayons ça par ici. Cliquons étaient ici, et cela fonctionne aussi bien. Maintenant, l'utilisateur a la possibilité de quitter le tutoriel à tout moment. Mais juste en cliquant sur l'extérieur, ou ils peuvent passer par elle et rapide fait comme d'habitude. C' est plutôt cool. Et c'est simplifié notre journal de travail. Vous pouvez même aller de l'avant et supprimer ces tutoriels Étape une étape deux étapes trois pages. Mais pour l'instant, je ne vais pas faire ça. C' est ainsi que vous utilisez les superpositions dans le prototypage 10. Liens de l'ouverture: Je veux vous montrer une autre chose vraiment cool que vous pouvez faire avec le prototypage. Donc, disons que pour la page de connexion ici, nous voulons aller de l'avant et lier ce bouton ici, ou ces conditions d'utilisation et politique de confidentialité pour réellement ouvrir une page Web quand un utilisateur clique dessus. Typiquement, c'est ce qui se passe dans beaucoup d'applications. Lorsque vous cliquez sur ce lien, il va de l'avant et ouvrir leurs conditions d'utilisation et la politique de confidentialité. Maintenant, vous pouvez aller de l'avant et les séparer en deux liens différents si vous le souhaitez. Mais pour l'instant, dans le but de la leçon, je vais juste connecter ceci à un seul lien. Donc, ce que vous voulez faire est d'aller de l'avant et de sélectionner le texte et assurez-vous que vous êtes en mode prototypage . Allons de l'avant et ajoutons une interaction de sur le robinet. Donc encore une fois, ce que cela signifie est que lorsque l'utilisateur appuie sur ce bouton ou le texte ici, puis faire quelque chose, et dans ce cas, au lieu de naviguer ou de faire autre chose, ce que nous voulons sélectionner est et ce que cela nous permet de faire est en fait mis dans un U R L ici d'où une page Web dans une fenêtre séparée s'ouvrira où l'utilisateur sera emmené. Donc, dans ce cas, je viens de mettre dans google dot com, mais vous pouvez le remplacer par n'importe quel projet sur lequel vous travaillez, euh, pour vraiment l'appliquer à tous les cas d'utilisation. Dans votre cas, Allons de l'avant et présentons ça. Et maintenant, si vous voulez tester cela, suffit de cliquer dessus ici et vous remarquerez qu'une autre page Web s'ouvrira. Nous allons vous poser cliquer et continuer à ce lien. Je sais que ce n'est pas un super idéal pour un prototype, mais c'est vraiment la chose la plus proche que nous pouvons obtenir à ce stade pour ouvrir des liens directement à partir d'un prototype. Plutôt cool. Je veux vous montrer une dernière chose dans cette leçon aussi. Voyons que vous décidez à un moment donné de présenter votre prototype dans un autre appareil. Hum, vous pouvez simplement aller de l'avant et cliquer n'importe où dehors dans votre toile où il y a une zone vide , puis sur le côté ici encore. Pendant que vous êtes dans le panneau de prototypage, vous verrez que vous avez une liste de périphériques ici. Ils peuvent choisir de, Donc, vous allez certainement de l'avant et jouer avec cela, um et même aller de l'avant et changer le modèle de votre iPhone ou appareil que vous avez. Ainsi, vous pouvez changer la couleur de cet iPhone, par exemple, en vert minuit ou argent et gris espace. Et vous pouvez même aller jusqu'à changer l'arrière-plan de votre prototype pour peut-être une couleur plus claire aussi, hein ? Pour que quand il se présente, il sera assez unique à votre projet. 11. Ajouter des animations: Une chose que vous avez peut-être remarqué est que jusqu'à présent, nous avons utilisé l'animation instantanée, ce qui signifie simplement basculer instantanément entre les pages ou naviguer entre les pages ou ouvrir les superpositions au lieu de devenir plus complexe et d'y ajouter des animations. Mais qu'est-ce qui est génial dans Fig Mayes que vous pouvez ajouter des animations vraiment réalistes et agréables à vos projets aussi ? C' est ce que nous allons explorer dans cette leçon. Donc, la première chose que je veux vous montrer est que vous pouvez réellement aller de l'avant et sélectionner l' option de tutoriel ici où nous avons créé une connexion pour ouvrir un trop et ensuite vous pouvez aller de l'avant et sélectionner l'animation, aussi. Allons emménager. Alors, quel mouvement fait, c'est ça ? Au lieu de simplement montrer cette superposition instantanément en haut de la page, nous allons aller de l'avant et l'animerons réellement dans notre page, alors vous montrer comment cela fonctionne. Dans un 2ème 1er, passons par un tas d'options par ici. Lorsque vous sélectionnez le déplacement dans, vous avez un tas d'options en termes d'où l'objet va s'animer, de sorte que vous pouvez faire du côté droit vers le côté gauche de la gauche à la droite, haut en bas et de bas en haut. Donc, pour quelque chose comme ça, je pense qu'il a acheté dans le top work vraiment bien. Et puis je n'entrerai pas trop dans les détails de ce que signifient les options. Mais essentiellement, c'est ainsi que l'animation va se jouer. Si vous sélectionnez la saison, la courbe d'animation sera plus lisse à l'ouverture. Si vous sélectionnez facilité, l' animation sera plus lisse à la fermeture ou à la fin de cette animation. Et puis, si vous sélectionnez qu'il est dans et hors, il va de l'avant et fait une transition en douceur dans et une transition linéaire en douceur va juste aller de l'avant et la garder très basique. C' est donc le type d'animation le plus basique que vous pouvez avoir. Je pense que le plus beau est le facile à entrer et à sortir parce qu'il va créer. C' est une transition en douceur. Les deux murs de la forme arrivent, et quand il s'arrête et ralentit, c'est le temps qu'il faudra pour que cette animation se termine. Donc essentiellement, si vous voulez ralentir une animation, vous pouvez simplement augmenter ce nombre. Il est représenté en secondes Mili. Donc en ce moment, c'est sur 300 millisecondes, donc 1000 millisecondes serait une seconde. Donc c'est techniquement 1/3 de seconde. Pourquoi ne pas aller de l'avant et changer ça à une demi-seconde ? Je pense que pour quelque chose comme ça, ça aurait l'air mieux et tu le remarqueras à nouveau. Ici, vous obtiendrez un exemple d'animation aussi bas. Si vous allez de l'avant et survolez et cliquez dessus, il rejouera et vous montrera à quoi ressemblera cette vitesse. Donc, pendant une seconde ou 1000 millisecondes, il va jouer une animation comme celle-ci. Et si vous faites 500 millisecondes, nous allons faire une animation un peu plus rapide, donc il est en fait de voir cette inaction. Donc maintenant, si vous jouez ceci, vous verrez que la carte viendra du bas très bien. Je peux le traverser et il disparaîtrait du fond d'où il venait. Assez cool, très lisse, très réaliste. 12. Transitions de page: Bon, donc maintenant nous avons une belle animation appliquée pour sont trop par ici. Allons de l'avant et créons quelque chose de gentil pour le reste des pages. Ici est bien, donc il semble un peu plus réaliste et interactif. Alors sélectionnons notre page de connexion ici. Et puis ce que je veux faire est de créer une nouvelle connexion à partir de l'inscription avec email mais ici à ma page de paiement. Et ici, je veux vraiment aller de l'avant et sélectionner. Poussez. Essentiellement, ce que cela va faire est juste aller de l'avant et légèrement de la page huit être donc à partir de cette page, il va aller de l'avant et glisser dans cette page, qui est ce que nous voulons. Typiquement, dans un cas comme celui-ci, alors nous voulons remplacer celui-ci au lieu d'instantané. Nous voulons faire pousser aussi bien et encore cela fera la même chose et à partir de la carte. Mettez-le ici, allez-y et sélectionnez cette connexion ici entre l'adresse de sauvegarde et une plage de demande ici et au lieu d'instantané ce que nous essayons, emménageons et faisons à partir du haut. On va aller de l'avant et essayer ça et voir à quoi ça ressemble. Je pense que pour le reste des pages, il semble assez réaliste. Donc nous n'avons pas vraiment besoin d'aller de l'avant et de changer quoi que ce soit. Quelque chose d'autre que vous pouvez faire comme un exercice est aller de l'avant et de créer plus de connexions et d'animations entre, Disons, la carte mais ici et le paiement dans le bouton de déconnexion Zaslow. Alors laissez ça comme un exercice à faire. Allons de l'avant et maintenant jouer ça. Donc maintenant, si nous faisons l'inscription avec e-mail, il va glisser dans cette page, comme vous pouvez le voir, fera à la carte assez belle enregistrer adresse, et il nous emmènera à cette nouvelle page ici. En second lieu, peut-être que ce serait plus agréable si vous vous déplacez du bas vers le haut. Donc je vais aller de l'avant et faire ce changement. Et vraiment, avec des choses comme ça, il s'agit d'expérimenter et d'essayer différentes choses, choses, il n'y a pas de réponse à 100% juste ou mauvaise ici. C' est vraiment ce qui semble plus réaliste et plus convivial. Je le dirais maintenant si je ne sauve l'adresse, je pense que cela semble mieux. Et entre mes autres pages, cela fonctionne comme prévu aussi, assez cool 13. Cartes interactives: alors oubliez que ce sera agréable de vous montrer une façon vraiment cuite. Vous pouvez transformer une carte ou une image d'une carte comme celle-ci en un prototype réel qui ressemble et se sent réel. Donc, pour le faire d'abord comme toujours, assurez-vous que vous êtes en mode prototype ici, puis allez-y et sélectionnez la carte. Euh, rectangle par ici. Donc cette option ici, où vous voyez le rectangle, qui représente la carte ici, et je vais aller de l'avant et le mur tenant le décalage et Ault, Um et il est important que vous les fassiez ensemble. Donc, tenant, secte changeant, on va aller de l'avant et tenir le coin ici et juste le rendre un peu plus grand. Pas trop, parce que sinon cela va déformer l'image. Moi, c'est bien. Donc maintenant, vous voulez faire est d'aller de l'avant et de sélectionner le cadre de la carte ici tous ensemble. Allez sur le site par ici, côté droit par ici, où il est dit comportement de débordement. Passons cela au défilement horizontal et vertical, et vous verrez comment cela fonctionne en seulement une seconde. Mais avant de le faire, nous ne voulons rien d'autre que la carte elle-même bouge ici, donc nous ne voulons pas que la recherche et les boutons ici bougent. Allons de l'avant et ajoutons quelques restrictions à tous ces éléments. Donc quelque chose que vous pourriez faire est d'aller de l'avant et de sélectionner la barre d'état ici puis, tout en maintenant les changements comme la barre de recherche, puis sélectionnez l'icône du curseur ici et aussi l'adresse de sauvegarde. Je pense que c'est tout ce qu'on veut rester sur cette page. Alors maintenant, dirigez-vous vers le panneau de conception et je vais de l'avant et sélectionnez cette option position fixe lors du défilement. Donc maintenant, si vous présentez ce prototype, vous verrez que je serai capable de faire défiler la carte et cela semble assez réaliste . Ça marche. Donc oui, c' est comme ça que vous créez une carte interactive à l'aide de l'outil de prototypage fig mas. 14. Jouer des GIFs: Je pensais qu'un prototype était un cours qui ne serait pas complet tant que je ne peux pas vous montrer un moyen réellement faire des GIF animés dans votre projet pour vraiment rendre vos conceptions modernes et complètes. Donc, bien sûr, vous pouvez faire glisser n'importe quel Jif de l'extérieur de votre dossier de téléchargements ou n'importe où ailleurs sur votre projet de figure, et vous pouvez aller de l'avant et le placer comme une image n'importe où sur l'écran. Et il va juste aller de l'avant et travailler, comme prévu lorsque vous allez de l'avant et le présenter dans un outil d'animation vraiment utile que je suis tombé il n'y a pas si longtemps. Les yeux, c'est là qu'on appelle sanglante. Il est en fait conçu par Airbnb, et comme ils l'expliquent, il vous permet d'ajouter facilement des animations de haute qualité à n'importe quelle application native. Bien sûr, nous l'ajoutons simplement à un prototype. Mais vous comprenez l'idée. Cela nous aidera vraiment à créer plus interactif dans de vrais prototypes à partir de Sigma. Je ne vais pas passer par le processus d'inscription, mais ah, vous aurez besoin de créer un compte. Si vous voulez utiliser Lottie, ils ont une fiche sur fig ma, sorte que vous pouvez aller de l'avant et rechercher des fichiers Lottie dans le robinet plug ins, puis aller de l'avant et installer. Et encore une fois, si vous êtes complètement nouveau pour fig MMA et que vous voulez apprendre toutes ces choses, comme comment utiliser les plug-ins et ce qu'ils peuvent faire pour votre projet, je recommande certainement de vérifier mon mobile complet. Vous êtes vous X cours bas. Mais dans le but de cette leçon, allons de l'avant et installons cette fiche. Donc, si c'est votre première fois dans Soling plug ins, vous suffit de vous diriger vers le bouton Managed Plug-ins ici, puis de rechercher des fichiers légaux et d'aller de l'avant et de l'installer. Une fois que vous l'avez installé, vous pouvez aller de l'avant et le trouver ici. Donc j'ai une tonne de branchements par ici. J' adore utiliser des plug-ins parce que cela me rend la vie plus facile. Sur. Comme vous pouvez le voir, je peux trouver beaucoup de fichiers ici. Je vais aller de l'avant et l'ouvrir. Et encore une fois, si vous n'avez pas de compte, ça pourrait vous demander de rester ici. Alors faites simplement une pause ici. Si vous avez besoin de vous connecter, puis de revenir à la leçon, puis une fois que vous êtes de retour, vous pouvez aller à la recherche. Et comme vous pouvez le voir, ils ont un tas de beaux gifs animés que vous pouvez utiliser dans votre projet, ce qui est super cool. Donc juste à des fins de démonstration, je vais juste aller de l'avant et choisir un de ces, hum Jeffs par ici, donc je ne sais pas. Faisons celui-là par ici. Il a l'air cool. Et fais en sorte que tu te convertisses à Jeff ici. Alors maintenant, allons de l'avant et sélectionnez notre cadre de paiement ici. Je veux aller de l'avant et juste le mettre ici juste pour démontrer et puis allez-y et cliquez sur deux Fig MMA. Et comme vous pouvez le voir, il l'a ajouté juste là. Alors maintenant, il pourrait simplement aller de l'avant et ajouté, Où que vous voulez, Voyons voir. Je vais le mettre ici et vous pouvez le redimensionner si vous voulez que nous puissions le faire en plein écran. On peut aller jusqu'à la recadrer. Et si vous voulez le recadrer, vous pouvez le faire à partir d'ici. Assurez-vous maintenant de ne pas recadrer une partie de l'animation. Allons de l'avant et présenté. Et maintenant, comme vous pouvez le voir, vous allez aller de l'avant et jouer cette animation ici. Ce n'est pas super pertinent dans ce cas, mais si vous avez une page, par exemple, où vous voulez expliquer quelque chose ou montrer votre prix ou faire de la publicité, ajouter une belle comme ça pourrait être une bonne façon de impressionner vos utilisateurs. Cool. Alors n'hésitez pas à jouer avec cela et à ajouter différentes animations à votre conception pendant que vous travaillez avec des prototypes. 15. Animer Smart: d' accord. Donc, avant de terminer le cours de prototype ici, je veux vous montrer une chose de plus vraiment cool dans la figue MMA, en utilisant le prototype pour et qui s'appelle smart, animate, smart, animate vous permet vraiment de créer certaines de ces transitions vraiment fluides entre une page qui semble similaire ou entre différents états d'une même page. Et donc ce que cela signifie vraiment, c'est que disons que vous avez une page et que vous voulez montrer quelque chose de développer ou de s'effondrer. Ce serait vraiment de superbes exemples de la façon dont vous pouvez utiliser intelligent, animer orteil, les faire paraître riel et se sentir réel pour les utilisateurs utilisant l'outil prototype. Donc, pour démontrer, je vais réellement créer une autre copie de la page de demande ici. Et puis ce que nous allons faire, c'est que nous allons créer un état où si l'utilisateur tape dessus, disons que cette carte de magasin Jax Laundry ici, elle va s'étendre et montrer peut-être plus de détails ou une description ou quelque chose comme ça. C' est assez typique dans une application comme celle-ci, où vous avez peut-être plusieurs cartes que vous regardez car il vous permet de parcourir les informations mawr . Donc, disons que vous voulez en savoir plus sur cette buanderie Jax. Peut-être lire certaines des évaluations, en savoir plus sur les prix et ainsi de suite, mais ils restent simples. Je vais juste créer un autre état de cette carte et ensuite ajouter peut-être un texte de description . Donc ce que je veux faire, c'est que je vais aller de l'avant et dupliquer cette page de requête ici tenant juste culte et en faisant glisser une copie ici. C' est bien. Juste là. Alors maintenant, allons à cette page par ici. N' hésitez pas à suivre si vous voulez. Les premières choses d'abord. Je vais déplacer Thies pour stocker les cartes hors du chemin en tenant le décalage et en faisant le tas de touches fléchées de fois la même chose ici. Maintenant, une chose que je veux vraiment souligner ici est que si vous voulez utiliser animate ou smart animate correctement dans sigma, vous devez vous assurer que vous gardez les choses dans le même calque et dans la même hiérarchie ici. Donc, si vous changez les calques ici, l'animation ne fonctionnera probablement pas comme prévu. J' ai fait cette erreur plusieurs fois moi-même. Je veux juste vous assurer que vous ne faites pas la même erreur et ensuite essayer de comprendre quel est le problème. Alors maintenant je veux aller de l'avant et déplacer cette carte principale ici que je regarde au coin. Ou en fait, nous allons peut-être traîner ça un peu ici pour ajouter plus d'espèces et ensuite aller de l'avant et simplement déplacer ça là-haut et je vais aller de l'avant et maintenir le décalage et étendre cela sur toute la largeur. Et allons de l'avant et supprimez simplement cela. Choisissez le texte de votre magasin de blanchisserie ici, puis sélectionnez la carte ici. Revenons au design et allons de l'avant et cachons le plan de chute ici. On ne veut pas ça dans l'état sauf si je vais ajouter un cahiers en cliquant sur le thé et en faisant glisser des manuels ici. Je ne fais pas que taper avec une ligne à gauche. C' est la laverie de Jack. Nous faisons de notre mieux pour garder nos clients satisfaits de leur linge. J' écris juste des textes complètement aléatoires ici sur. Ensuite, je vais aller de l'avant et juste détacher le style du texte ici. Et sélectionnez le corps Carla 14 signifie mieux pour une description, texte et juste pour s'assurer qu'il est aligné correctement est faible, et je pense que tout le reste semble bien maintenant à nouveau, vous pouvez ajouter un tas d'autres choses en dessous de cela plus tard et peut-être même faire ce rouleau plantes si vous voulez. Mais juste pour garder ce même sondage, je vais faire une animation intelligente avec juste ce que nous avons ici pour que je pense que l'utilisateur veut lire plus d'informations sur la lessive de Jack. Ils peuvent simplement cliquer dessus, puis il va animer intelligemment dans ce cadre ici où ils vont lire plus sur. Et peut-être que s'ils reprennent l'image, il reviendra à l'état. Donc, comme n'importe quelle autre connexion, allons de l'avant et sélectionnons cette carte ici. Aller au prototype et je crée une connexion à cette page ici et maintenant, au lieu d'une animation instantanée que vous voulez choisir smart, animate, vous verrez la figure vous donne une belle sorte d'animation ici pour expliquer ce que smart animate fait aussi bas ici est juste effondrer ou étendre cette carte ici juste similaire à ce que nous faisons. Nous élargissons cette carte pour montrer plus d'informations donc j'ai facilité l'entrée et la sortie sélectionnée ici . Et puis au lieu de 700 millisecondes, peut-être que vous pouvez faire 300. Um, c'est mieux. Servez la transition plus rapide ici. Et puis, enfin, je veux sélectionner ce garde-porte ici, puis dessiner une connexion dans cette page ici et ensuite faire la même chose. Intelligent, animé. Je ne veux pas mentionner pour l'option plus d'un an, vous pouvez sélectionner naviguer vers et puis même chose ici. Donc maintenant, si vous avez présenté, vous verrez que j'ai mes cartes de lessive par ici, et puis si je clique dessus, ça va se développer et me donner plus d'options à lire. Si je surmonte à nouveau, ça disparaîtra. Pas encore si vous voulez créer une transition plus rapide parce que je pense que c'est un peu lent en ce moment, nous pouvons faire 200 millisecondes, puis pour celui-ci aussi. Faisons 200 millisecondes maintenant. S' il a testé, je pense que ça a l'air bien. Cool. C' est donc un exemple d'ennemi intelligent. J' ai mis en place un autre exemple ici moi-même, où essentiellement nous allons de cette option de profil à celle-ci ici. S' ils cliquent sur la carte ici pour que l'utilisateur clique sur cette carte ici, il suffit d'aller de l'avant et de se développer. Et puis je pense que vite encore, nous allons sur la page de la carte que nous avons eu assez cool. 16. Animations de Hover de boutons: D' accord. Enfin, je veux vous montrer comment vous pouvez utiliser l'ennemi intelligent sur les boutons aussi. Cela peut ne pas être super pertinent pour une application mobile où vous n'avez pas vraiment d'état de survol pour les boutons. Mais supposons que vous travaillez sur une application Web et que vous souhaitez créer un paramètre de survol ou statut de survol pour vos boutons. Hum, donc vous pourriez certainement utiliser l'animation intelligente pour cette option est faible, euh, de social sur ma page de composants ici dans mon propre projet de groupe peut. Donc ce qu'on va faire est d'aller de l'avant et trouver d'abord cette barre oblique activée, euh, composant par ici. Et puis je vais aller de l'avant et créer une instance hors de lui en tenant vieux et traînant loin. Et allons de l'avant et faites un clic droit sur cela et en fait détacher l'instance et créer un nouveau composant à partir de cela parce que nous voulions regarder séparé de ce composant ici, nous le renommons également, mais en barre oblique pointeur comme ceci. Et puis je vais sélectionner l'arrière-plan ici, ou l'arrière-plan du bouton, aller à la conception et aller de l'avant et détaché le style et rendre le remplissage peut-être un peu plus sombre est tout de sorte qu'il semble que nous planons au-dessus de ça. Donc maintenant, je peux simplement aller à l'option de barre oblique activée. Aller au prototype et je vais de l'avant et sécher et créer une connexion à ce bouton ici et maintenant, au lieu de cliquer, vous voulez aller de l'avant et sélectionner en survolant, et cela fera comme vous l'attendiez pendant que vous passez le curseur sur le dessus de ce bouton va de l'avant et naviguer vers cela, mais à la place. Et ce que nous voulons utiliser, c'est , bien sûr , l'option intelligente , animée sorte qu'elle lisse la transition entre ceci et ceci ici, et vous verrez comment cela fonctionne en seulement une seconde. Mais d'abord, allons-y et faisons-le. Il est à l'intérieur et à l'extérieur, et je pense que 300 millisecondes sont probablement assez bonnes ici. Donc maintenant, si vous allez de l'avant et il suffit de sélectionner notre bouton, barre oblique activée et ne présente et puis comme prévu, tandis qu'un vol stationnaire, il va aller de l'avant et changer de couleur, et il va animer intelligemment dans ce bouton barre oblique avant hover ici. Plutôt cool. Assez pratique pour un projet comme celui-ci. Alors, voilà. C' est ainsi que vous appliquez des animations intelligentes dans Sigma 17. Composants interactifs: Très bien, donc une chose intéressante que je veux vous montrer dans Figma et dans l'outil de prototypage est que vous pouvez maintenant créer des composants interactifs, ce qui signifie que vous pouvez maintenant créer des interactions entre les composants. tels que des boutons ou même des fiches didacticiels différentes fonction de la façon dont les utilisateurs interagissent avec eux. Numéro quatre, les composants interactifs ont été lancés en tant que fonctionnalité. Vous devez créer plusieurs pages avec des états différents de ces boutons. Et cela signifiera avoir beaucoup de trames en double pour montrer que vos composants changent entre les deux. Mais maintenant, il suffit de créer un nouveau bouton de variante et de créer une connexion entre ces variantes en fonction la façon dont les utilisateurs interagissent avec ce composant. Donc, pour mon cas, je vais vous montrer comment animer votre bouton pour que lorsque l'utilisateur appuie dessus dans l'application mobile, il réfléchisse cet onglet avec une couleur plus foncée, qui imite ce à quoi ressemble habituellement un bouton lorsqu'un utilisateur appuie dessus, ce qui lui donne une sorte de feedback. Tout d'abord, je veux dire ma page de composants ici. Je vais aller de l'avant et sélectionner les deux boutons, comme ça. Et puis, du côté droit, je vais aller de l'avant et les combiner comme variance. Maintenant, continuez et suivez cette étape si vous ne l'avez pas déjà fait, afin que nous ayons des variantes de ce bouton. Et je vais aller de l'avant et renommer la propriété 1 en état. Encore une fois, nous avons un état désactivé mais en état, puis activé. Et je vais aller de l'avant et dupliquer cette option activée en appuyant sur la commande D. Et je vais créer un troisième état appelé tapped, comme ça. Et appuyez sur Entrée là-bas. Et pour ce bouton d'onglet, je vais double-cliquer et sélectionner ma couleur d'arrière-plan ici. Et retirez ce primaire et remplacez-le une couleur un peu plus foncée d'une nuance similaire. Juste pour montrer que ce bouton est tapé lorsque l' utilisateur appuie dessus dans le prototype. Allons de l'avant et fermons cela et passons à l'onglet Prototype. Et ensuite, ce que vous voulez faire, c'est de créer une interaction entre ce bouton ici, qui est l'état activé et l'onglet. Voyez-le ici. Et vous pouvez simplement le faire en dessinant une connexion comme nos cadres. Mais maintenant, avec nos composants ici, et sur le côté droit, nous obtiendrons un tas d' options pour que nous puissions le faire en cliquant sur ce bouton afin que lorsque l'utilisateur clique sur ce bouton, il aille l'échanger ou le modifier. avec cet état d'écoute. Ou nous pouvons faire un glissement en planant, tout en appuyant sur. Et si vous avez une sorte de jeu que vous concevez, vous pouvez utiliser la manette de jeu barre oblique, un tas d'autres options également. Maintenant, pour notre cas, nous voulons le faire en appuyant sur, car cela signifie que dès que l'utilisateur appuie sur ce bouton, il passera à cet état. Et dès qu'ils auront lâché prise, cela ira de l'avant et reviendra à l'état ici. Désormais, par défaut, vous disposez peut-être d'une option d'animation instantanée ici. Vous pouvez donc en faire un instantané, ce qui est le plus logique pour cette option ici. Mais gardez à l'esprit que vous pouvez certainement faire de l'animation intelligente si vous avez telles que des cases à cocher ou des bascules marche/arrêt, où vous pouvez réellement afficher une animation l'utilisateur clique sur ces composants. Et vous pouvez voir ce changement dans votre prototype. Alors maintenant, juste pour voir comment cela fonctionne, je vais aller sur ma page de maquettes. On va y aller de l'avant et le faire fonctionner. Je veux aller de l'avant et appuyer sur Connexion. Et comme vous pouvez le voir sous forme d'onglet, il va changer cette couleur ou cet état à cet état. Et puis quand je lâcherai prise, cela ira de l'avant et reviendra à l'état activé, ce qui est génial. Vous pouvez maintenant le faire avec chaque bouton. Mais gardez à l'esprit que, par exemple, pour ce bouton ici, il est probablement préférable de créer une autre variante afin que nous ayons une version blanche de notre bouton , puis une version large de notre bouton également. Mais je vais laisser ça comme un exercice à faire. Et comme vous pouvez le constater, cette nouvelle interaction fonctionne avec tous nos boutons. Tant qu'il s'agit du composant bouton, il fonctionnera sur toutes mes pages et cadres dans Figma, ce qui est magnifique car c'était vraiment difficile à faire avant les composants interactifs. Bien sûr, vous pouvez désormais utiliser des composants interactifs entre plusieurs composants différents. Il n'est pas nécessaire que ce soit seulement un bouton. Vous pouvez l'utiliser partout où vous avez une interaction avec un composant qui se répète sur tous les cadres, tels que les boutons. Je vais vous donner un exercice à faire pour les composants interactifs. Ainsi, sur notre page Services, généralement, lorsqu'un utilisateur appuie sur l'une de ces lignes dans une application iOS, vous affichez généralement cette interaction en changeant la couleur d'arrière-plan une couleur légèrement grise et gris clair. Je vais donc laisser cela comme un exercice et nous le ferons ensemble lors de la prochaine conférence. 18. Solution d'exercice interactive: Très bien. J'espère que vous avez suivi jusqu'ici et que vous avez pu créer des composants interactifs pour nos services ici. Ainsi, comme indiqué dans la conférence précédente, dans une application iPhone ou une application iOS, généralement lorsqu'un utilisateur appuie sur une ligne dans un tableau comme celui-ci, il se transforme en une couleur légèrement différente, généralement gris tardif, juste pour indiquer à l'utilisateur sur quelle ligne il appuie exactement. Donc, en ce moment, si je tape sur mes rangées, rien ne se passera comme prévu. Mais si nous revenons à notre maquette et que nous allons sur la page des composants où nous avons nos rangées. Nous pouvons aller de l'avant et créer une version tapotée dans laquelle nous pouvons afficher ces commentaires à l'utilisateur. Continuons donc en cliquant sur la liste des services et accédons à l'onglet Création ici. Et ajoutons variés ici. Et nous allons aller de l'avant et appeler ça « tapé ». Pour cet autre, il restera par défaut. Je vais simplement cliquer sur la variante complète de la liste de services et modifier cette propriété souhaitée rester. Nous savons donc à quoi cela sert. Et maintenant, comme mentionné, pour cette couleur de fond, nous voulons aller de l'avant et choisir simplement une couleur gris clair légèrement plus foncée. Rien de trop fou. Juste pour montrer les commentaires de l'utilisateur qui appuie sur cette ligne ou cette cellule. Et maintenant, comme nous l'avons fait lors de la conférence précédente, nous allons passer à l'onglet Prototype et créer une connexion entre cet état par défaut et l'onglet S8. Et changez l'onclick en, vous l'avez deviné, en appuyant sur le mur. Nous allons aller de l'avant et le changer pour l'état sur écoute. Et nous voulons que l'animation soit instantanée. Nous allons donc y aller de l'avant et clôturer cela. Et maintenant, s'il se dirige à nouveau vers notre prototype, nous n'avons pas besoin de rafraîchir ou de relancer le prototype. Nous pouvons simplement l'utiliser dans le même cas. Et comme vous pouvez le constater maintenant, alors que je tape sur cette ligne, nous allons changer cette couleur, ce qui semble très réaliste pour une application iPhone mobile. 19. Créer de nouveaux flux de prototypes: Depuis que Figma a annoncé nouvelles fonctionnalités pour la fonctionnalité de prototypage, ils ont également annoncé de nouvelles façons guider les utilisateurs ou les spectateurs à travers votre prototype , puis de créer différents flux. . Désormais, un flux et un prototype définissent ce que cet utilisateur va traverser au fur et à mesure qu'il traversera le prototype. Quand commenceront-ils ? Et au fur et à mesure qu'ils parcourent l'application, où finissent-ils ? Par défaut, ils ont nommé notre prototype Flow One. Donc, si nous continuons à jouer ce flux, on nous emmènera à travers le prototype que nous avons créé, qui nous démarrera sur l'écran de connexion. Et ensuite, si nous allons de l'avant et que nous cliquons sur S'inscrire et nous guiderons à travers chaque étape d'inscription jusqu'à ce qu'elle nous amène à la page principale. Mais maintenant avec Figma, c'est la fonctionnalité de prototypage. Vous pouvez réellement créer plusieurs flux afin que si vous souhaitez présenter votre application, voyons si l'utilisateur est déjà connecté. Vous pouvez présenter un flux différent en créant plusieurs flux différents, qui nous permet de gagner du temps lorsqu'il s'agit de présenter notre prototype à nos collègues ou clients pour présenter différents résultats ou différents résultats. Et pour gagner du temps en cliquant sur plusieurs pages pour accéder à l'endroit où vous voulez vous rendre. Je vais donc aller de l'avant et créer un second flux. Mais avant de faire cela, allons de l'avant et nommons ce flux un nouvel utilisateur. Et c'est juste lui donner un nouveau nom. Rien ne change vraiment avec un prototype. Mais maintenant, nous avons ce nouveau point de départ du flux d'utilisateurs. Assurez-vous maintenant que vous êtes dans l'onglet Prototype pour voir réellement vos flux. Mais essentiellement, je voulais nommer ces nouveaux utilisateurs afin que nous sachions que c'est le flux lorsqu'un nouvel utilisateur s'inscrit ou ouvre même l'application kangourou propre. Et maintenant, je veux créer un nouveau flux appelé utilisateur connecté. Donc, essentiellement un utilisateur déjà connecté, nous ne voyons que ce flux au lieu du nouveau flux utilisateur. Et pour ce faire, je vais aller de l'avant sur la page de demande car c' est essentiellement notre page principale sur laquelle nous voulons que les utilisateurs s' inscrivent déjà lorsqu'ils ouvrent l'application pour la première fois. Et simplement en faisant sélectionner cette pièce de demande, je vais cliquer sur le signe plus en plus du point de départ du flux pour ajouter un point de départ. Et renommons cela en utilisateur inscrit. Nous avons donc maintenant deux étages différents, un pour un nouvel utilisateur et l'autre pour un utilisateur inscrit. Et si vous cliquez sur le flux utilisateur d'inscription en cliquant sur cette icône de lecture ici. Comme on peut s'y attendre, le prototype commencerait dans cette image et nous permettrait d'interagir comme avant, mais maintenant avec un point de départ différent. Et maintenant, dans ce panneau de gauche ici, nous pouvons voir que nous avons différents étages que nous pouvons traverser nos spectateurs en tant qu'utilisateurs. Donc, si vous voulez maintenant naviguer quand un nouveau flux d'utilisateurs ressemblerait à ce que nous puissions accéder au nouveau flux d'utilisateurs et partir de là. Ou si vous souhaitez passer à un flux d'utilisateurs d'inscription, nous pouvons accéder à notre flux d'utilisateurs d'inscription et partir de là. Et la beauté de cela est que lorsque vous partagez votre prototype, les personnes qui y ont accès, nous pourrons également voir les flux que vous avez et traverser les différents flux. Maintenant, une chose que je recommande si vous souhaitez partager votre prototype avec d'autres personnes, en particulier des personnes qui ne font peut-être pas partie de votre équipe. Vous pouvez en fait aller de l'avant et écrire une petite description votre flux afin que les gens comprennent de quoi il s'agit. Donc, dans la description ici, je vais juste aller de l'avant et écrire. Ce flux est destiné aux utilisateurs inscrits à la RD avec un kangourou propre, propre et propre. Et nous allons y aller de l'avant et fermer ça. Et maintenant, si je retourne ici, vous verrez que la description figure également dans mon prototype, ce qui est cool. Et là, il y a des flux différents dans vos prototypes. 20. Exporter nos conceptions: d' accord. Je pense que nous sommes prêts à donner ce projet à notre client maintenant. Donc je pense que nous sommes prêts à exporter nos cadres ici. Maintenant, il y a un tas de façons d'exporter des choses dans la figue MMA. Hum, donc le 1er 1 c'est que vous pouvez exporter les cadres, bien sûr. Et pour ce faire, vous pouvez aller aux couches et allons de l'avant et réduire toutes les couches en utilisant l'option l et donc cela va juste tout effondrer. Donc c'est bien ici, et je peux aller de l'avant et juste sélectionner une image et ensuite nous maintenons Shift, sélectionnez ma toute dernière image ici, et donc cela va sélectionner toutes les images entre les deux. Assurez-vous que le cadre est sélectionné et que vous ne souhaitez pas l'exporter. Et puis à partir d'ici, vous pouvez trouver les quatre prochaines touches et aller de l'avant et rapide plus, Et si vous faites défiler ici, vous verrez que nous exportons neuf couches ici avec une résolution d'un X. Deux X, vous pouvez le faire à partir d'ici. Tu peux aller de l'avant et choisir quoi, quatre mois ? Vous voulez que votre exportation soit dans vous pouvez sélectionner PNG, il y a J Peg SPG et PDF. Ainsi, avec ces images sélectionnées, vous pouvez exporter neuf couches sur. Une fois que vous faites cela, il vous demandera. Vous vous apprêtez à exporter cela, et je vous demanderai où vous voulez que votre exportation soit faite. Une fois que vous faites cela, il ouvrira ce navigateur de fichiers ici, à partir duquel vous pouvez sélectionner le dossier dans lequel vous voulez exporter vos calques ou vos cadres. Et puis si vous allez de l'avant et cliquez, enregistrez-le va de l'avant et placez-les là. Et donc si j'ai glissé ce dossier, comme vous pouvez le voir, il est allé de l'avant et exporté toutes mes images en PNG séparé quatre mois pour moi ici, ce qui est sympa. Je peux nous envoyer à mon client, donc c'est une façon d'exporter si vous voulez exporter certaines choses. Donc, par exemple, Allez-y et zoomez ici et disons que vous voulez exporter juste cette icône ici. Ah, vous pouvez aller de l'avant et le sélectionner, et tout en ayant son sélectionné, assurez-vous ici, dans le panneau des calques, il est effectivement sélectionné, puis allez à exporter et appuyez sur l'icône plus, vous obtiendrez un bon aperçu de votre exportation. Ici est long, et alors vous pouvez même aller de l'avant et ajouter plusieurs exportations. Donc, si vous voulez que l'une des icônes soit juste une résolution supplémentaire, une autre pour avoir deux résolutions supplémentaires et que vous pouvez continuer ici et ajouter plus résolutions et d'exportations MAWR ici, cela ajoutera un joli Suffolk à mon fichier. Voici donc cela exportera zéro zéro un magasin de tiret parce que c'est le nom de cette couche ou de cette image ici que j'exporte. Donc, si vous voulez simplement changer le nom de votre exportation, vous devrez changer le nom de votre couche ici. Donc si je le fais, faisons une icône de magasin ici. Vous pouvez voir maintenant il va dire Exporter icône boutique. Et donc si j'exporte cela, il exportera trois versions de celui-ci, une avec une résolution ex, une autre avec deux X et trois x. Ceci est commun dans beaucoup d'APS, où vous aurez besoin de plusieurs résolutions basées sur la taille de l'écran. Ainsi, vous pouvez aller de l'avant et exporter votre icône de boutique qu'une fois que vous l'enregistrez à nouveau. Si j'ai ouvert mon dossier ici, vous verrez qu'il y a trois copies différentes, une avec une résolution supplémentaire. Donc celui-ci est un x deux X et trois x donc c'est plutôt cool. Très pratique. Je vais juste supprimer ça. De là. Vous pouvez également appuyer sur commande shift E et cela va juste ouvrir cet onglet d'exportation. Et cela va juste vous montrer quelques-unes des exportations que vous pouvez faire à partir d'ici. Ah, que vous avez probablement déjà fait avant. Donc, à partir d'ici, je peux aller de l'avant et choisir ce que je veux exporter, puis aller de l'avant et exporter à partir d'ici aussi. Donc, encore une fois, vous évoquez cela en utilisant le décalage de commande E. Et c'est ainsi que vous exportez et figurez. 21. Éde de code: un autre outil de gain de temps dans la fig. MMA regarde ce panneau de code juste ici. On n'en a pas vraiment parlé, mais ça marche comme de la magie. Et je vais te montrer pourquoi. Allons de l'avant et zoomons sur notre page de paiement par exemple ici en cliquant sur n'importe quel objet à l'intérieur et en allant à mon code tapotez ici. Je peux en fait obtenir le code pour le style de cet objet ici. Donc, si vous êtes familier avec CSS ou que vous concevez pour un projet IOS ou Android ici sur ce panneau de code va réellement vous aider à recréer exactement ce que nous avons créé ici, mais dans un environnement de développement réel. Donc, si vous travaillez avec des développeurs et que vous voulez qu'ils puissent réellement sauter et être en mesure transformer ces conceptions en applications riel en direct, la chose la plus simple que vous pouvez faire est de les inviter et ensuite leur parler de ce panneau de code pour aller et effectivement copier et coller. Ah, exactement le code dont ils ont besoin pour récupérer certains éléments à nouveau. Si je change cela, vous verrez, fonction de ce que j'ai sélectionné, il ira de l'avant et me montrera le code de cet objet. Si isolez juste le cadre entier, il affichera le code pour juste mon cadre ici. Donc, comme la couleur de fond des blancs, la largeur et la hauteur et des choses comme ça. Donc ça pourrait être super utile. Et je vous encourage à en profiter si vous développez une application ou si vous avez des développeurs qui travaillent avec vous 22. Que faire ensuite ?: d' accord. Félicitations pour avoir terminé le cours de prototypage ici. Nous avons appris une tonne de la façon dont nous pouvons réellement ajouter un prototype super basique tout le chemin à des applications plus avancées en ajoutant des animations, des transitions en utilisant smart, animate à la transition entre différents états et comment nous pouvons réellement partager notre projet avec des amis, les investisseurs de Kali et ainsi de suite. Alors, quelle est la prochaine chose pour vous ? Eh bien, il y a beaucoup de choses que vous pouvez faire d'ici. Bien sûr, je vous recommande de créer plus de prototypes, pratiquer avec, partager avec vos amis et de vraiment le montrer aux gens, surtout si vous travaillez avec des clients. Ce serait un endroit idéal où vous pouvez leur montrer un prototype de ce à quoi ressemblerait leur application . Si vous travaillez sur votre propre application ou sur votre propre conception, vous pouvez vraiment montrer ce prototype que vous avez pour votre propre projet pour la développer et vraiment rendre plus facile pour eux de comprendre ce que vous voulez du produit. N' hésitez pas à partager votre prototype avec moi. Je me cacherais pour le secouer et donner des commentaires. Si c'est quelque chose que vous cherchez, vous pouvez même essayer d'appliquer des prototypes à des projets Web aussi, hein ? Donc, si vous travaillez sur des projets Web ou examinez des projets sur lesquels vous vouliez travailler, ce serait le moment idéal pour le faire. Je crée vraiment des prototypes agréables et utilisables pour cela aussi. Et encore une fois, comme toujours, hésitez pas à m'envoyer des questions ou des dessins pour vos commentaires. Mon e-mail est à quel point intelligent à gmail dot com Et la semaine prochaine ici sur Skill Shirt sera également partager un cours sur la façon dont vous pouvez créer un design U. Y pour une application Web pour notre projet kangourou propre ici aussi bien. Merci encore d'avoir suivi ce cours et d'avoir hâte de vous voir dans un avenir, bien sûr.