Configurer une application web

1. Bande-annonce du cours: Bonjour, Bienvenue au cours de conception Web avec Figma. Dans ce cours, nous allons apprendre à concevoir un exemple d'application Web permettant utilisateurs de regarder des films ensemble. Si vous avez du poulet, un aperçu, nous en publierons également une version mobile. Dans ce cours, nous allons donc travailler, puis appliquer une application Web pour son cœur. Moi-même, je suis designer UI UX depuis plus de trois ans maintenant et j' utilise Figma depuis de très nombreuses années. Aujourd'hui, je suis votre professeur pour ce cours. Ainsi, à la fin de ce cours, vous aurez les compétences nécessaires pour concevoir un site Web visuellement attrayant et facile à naviguer. Encore une fois, comment importer et utiliser une image spécifique et votre espace de travail. Nous apprendrons également à utiliser la mise en page automatique que nous pouvons créer Pour les concepteurs, nous utiliserons un puissant plugin pour générer des exemples de données pour notre projet. Encore une fois, nous apprenons comment ajouter nos composants, des animations intelligentes et des exemples d'introduction entre les écrans. Donc, si vous êtes prêt à apprendre à concevoir une application Web belle et simple à l'aide de Figma. Allons-y et commençons. 2. Outil de cadre: Très bien, alors allons-y. J'ai Figma, ouvrez-le, ce n' est qu'un projet vide. Première étape, je suis juste en train de parcourir le français, je vais m'arrêter ici. Nous pouvons le faire et il suffit de cliquer quelque part sur l'écran. Et cela encore une fois et générez un foramen ou qui peut ressembler à une page pour notre site Web. Donc, s'ils veulent être du feuillage D, je peux modifier toutes les propriétés d'ici à droite. Indique quand on choisit 124, le témoin, 2000 et 84, la hauteur. Agréable. Il suffit de dézoomer pour personnaliser mon espace de travail. Ben, à partir d'ici, en haut du cadre, nous pouvons changer le nom de l'écran. Mais dans cet exemple, je vais choisir la page de prêt. Maintenant, avec cette palette de couleurs, ils choisiraient une couleur bleue. Avec cette option, nous pouvons personnaliser notre couleur de cette manière. Je préfère cela pour commencer à concevoir ma FirstPage. Bien, nous sommes maintenant prêts à commencer à concevoir notre page de destination. Et les gars, à bientôt dans la vidéo suivante. 3. page d'atterrissage: Commençons maintenant à créer notre page et à renvoyer la première page de n'importe quel site Web. Vous ne devez pas utiliser les techniques, les astuces et votre design pour extraire l'utilisateur et essayer d'entrer dans les détails, mais vous y arriverez. Ainsi, sur la première page de notre site Web, nous utiliserons dans L'Empereur François la taille du texte et la couleur. De plus, la simplicité des composants qui l' utilisent joue un rôle très important dans l'expérience utilisateur. Nous commençons d'abord par ajouter du texte au centre de l'écran. Donc, de la même manière, Hey kid et que j'ai choisi le texte ici dans la bonne section, je vais changer la taille du texte à 64 et revenir ici et à l'écran pour écrire une courte phrase, par exemple bannière, n'est-ce pas ? C'est mieux de regarder. Qu'est-ce qui change le mieux ensemble ? Oui, bien. Film, Cheers like this. Faites ensuite une copie pour cette taxe. Et je vais, je vais écrire autre chose ici. Il y en a. Juste avant de terminer, je vais modifier la taille du texte pour cet outil, 56 et continuer. Ou trouvez une nouvelle salle de musculation selon votre choix préféré. Avec tes personnes préférées. Oui, c'est un bon film juste en dessous de la première année. Moyenne. Sélectionnez ensuite l'huile dedans, regroupez-les comme ceci. Ce sont les orteils qu'il vous faut. Et encore une fois, je vais modifier le type de fichier sur le deuxième biais de texte ici. C'est ça. Pour la première fois, je vais choisir un robot. De plus, nous pouvons augmenter la taille de cet outil, l'outil et le personnaliser ou modifier ses variations un peu comme ça. Nous devons toujours conserver le même alignement entre deux textes. Maintenant, je vais ajouter une image ici, sur la gauche. Donc, pour l'instant, j'ai ajouté un détenu B, C, que nous utiliserons pour notre exemple. Et je l'ajouterai plus tard en guise punition dans la description du projet. Ou une question : pourquoi parle-t-elle comme ça ? Nous le déplaçons juste au centre de l'écran. Nous ajoutons également la lettre plus vers la gauche. Donc c'est bien. Non, oui, sympa. Très bien, à l'étape suivante, nous ajouterons le bouton de navigation entre les écrans. Passons donc à la vidéo suivante. 4. boutons: Dans cette vidéo, nous allons ajouter un bouton juste en dessous du texte. Donc, pour créer un bouton dans Figma, je conseille d'utiliser un exemple de rectangle, puis de personnaliser Bézier pour que le rho soit plus rectangulaire comme celui-ci. Et déplacez-le de la même manière. Et puis il y a l' autre zone de déformation et ils font du surf. Et maintenant, je vais choisir une sorte d'outil à utiliser, être irrégulier et avec les autres couleurs de l' écran, c'est une bonne étape par étape. Nous préparons notre bouton. Il nous manque encore le texte. Nous pouvons écrire le communiqué commun. Ils donneront à l' utilisateur la possibilité de rejoindre un film depuis la page d'accueil. Ainsi, après avoir modifié la taille du texte à 24, déplace le texte à la sensibilité du rectangle. Je vais maintenant modifier le rayon de la bordure à dix. Oui, c'est bon. Saisissez le rectangle et le texte à l' aide de la sélection du groupe d'options. Les deux composants sont donc regroupés dans le même composant, qui sera le bouton de nom. Maintenant, nous pouvons nous déplacer et faire de la magie ensemble. À votre bouche, choisissez le bon et le bon endroit dans le PDF pour le bouton. Très bien, juste en dessous de ce texte, ce sont les meilleurs jours. Oui. Si vous avez d'autres suggestions, écrivez un commentaire dans la section de révision du cours et merci, c'est tout. Donc, dans la vidéo suivante, nous ajouterons ici en haut de l'écran et la navigation, mais basculez entre ce vert. Nous ajouterons également le logo pour commencer. Alors allons-y. 5. Barre de navigation: Ici, nous allons ajouter deux liens pour créer une barre de navigation. Copiez donc ce texte depuis le bouton, les déclencheurs mangent comme la première longueur. Oubliez de rejoindre la page. Vous devez remplacer le texte par 32. 32, ou pour être plus lisible pour l'utilisateur supprimez-le avant et après avoir déplacé chaque année une flèche. Ici, dans cet endroit. Fais-en une copie. Passons maintenant au deuxième lien , que nous allons renommer ce secret. Sur cette page, l'utilisateur peut découvrir les différents films et films que le terme met en direct. Et d'autres qui programment avec le, avec l'avantage de participer et ce qui a changé avec ses amis. Et ici, nous pouvons utiliser la page d'accueil super cool to go in there. Nous avons la mise en page de Bree ici, donc je vais cliquer sur Plus. Ça va faire germer tout ça, d'accord ? Maintenant, c'est complètement complexe et cela n'a aucun sens. Montrez que je vais cliquer sur celui-ci et accéder à la colonne. Et nous pouvons choisir le juste alors ici. Cela nous donnera, puis nous pourrons utiliser les objets du lion. Très bien. Maintenant, je peux aligner les liens de la barre de navigation des vagues du lac. Déplacez ce lien au début de la troisième variable et joignez le second canon. Maintenant, je peux à nouveau masquer cette astuce et le nom d'écran et cliquer. Maintenant, commençons à préparer le logo de notre côté. Tout d'abord, ils font une copie de ce texte le collent ici et le modifient par, par le nom de la plateforme. Je pense donc que je vais choisir un exemple de nom, comme watching, watching ou watch part. Oui, à quel moment aller ici ? Avec ce nom ? Nous allons ajouter une image comme celle-ci, que j'ai sur mon PC. Et ils ajouteront ce dernier en pièce jointe. Et la description de la pression. Je dirais que c'est un peu plus petit comme ça ? Et je vais vous inciter à l'essayer à côté du zoom avant pour choisir un meilleur choix, sa base. Et en utilisant le même exemple que Button, je vais regrouper cet élément de chaussure comme ceci. Le grec en groupe et donne des conférences et change le nom de vulnérable. Ils organisent notre projet. Saute ici. Et nous allons le déplacer vers cette partie gauche de cet arbre. Oui, vas-y. Maintenant, nous avons terminé cette page et voyons dans la vidéo suivante, concevoir le deuxième écran. 6. Rejoignez l'écran: Commençons par la deuxième page commune. Effectuez un zoom arrière et ajustez notre espace de travail. Je vais déplacer la page de prêt ici et en créer une copie. Coller. Bien, conservez la même rétrogradation et la même couleur. Encore une fois pour conserver la barre de navigation car elle est répétée dans l'ensemble du projet. Écrans. Dézoomez et déplacez les deux écrans ici. Nous, les gars, sur notre écran. Tu es partante. Nous allons maintenant changer le nom en page de régime. D'accord ? OK, bien. Tout d'abord, supprimez les composants qui s'y trouvent juste pour conserver la barre de navigation. Ensuite, comme nous l'avons vu dans la présentation du projet ici à droite, nous ajouterons un petit formulaire contenant des champs de maturité que les utilisateurs pourront accompagner de la personne et des données juste avant de participer à un film avec des amis. Commençons par ajouter votre rectangle ici. Je vais l'ajuster ainsi, juste pour qu'il soit présenté au milieu de l'écran. Maintenant, je vais changer cette couleur en bleu plus foncé, comme par manque de chance. Et réglez la transparence à 50. Oui. Oui, bien. Bien. Nous allons maintenant ajouter le rayon de bordure, montrer qu'ils se forment. Il est entouré et ressemblera plutôt à un Red Bull. Nous continuons maintenant à ajouter le premier champ de texte avec le rectangle d'exemple. Pareil pour les chips au beurre. Nous allons le réparer ici. Puis il a changé son collier avec ça. Avec ce paramètre. Je peux personnaliser la couleur et le rocher comme si j'allais le fixer à trois. Maintenant, je peux changer de couleur. Je vais choisir la couleur de ce bouton ici dans le premier écran pour que leurs écrans ressortent bien. Encore une fois. Je vais continuer à changer la couleur du rectangle en utilisant le haut-parleur juste pour détecter la couleur. Et pour les champs, encore une fois, il vaut mieux ajuster le rayon de bordure à : Ah, oui, c'est parfait. Maintenant, je vais faire une copie à partir du lien Discover ci-dessus, au-dessus du phage. Mais comme vous le voyez maintenant, il est délibéré parce qu'il est caché par le rectangle. Vous devez utiliser la branche optionnelle de Frank pour que le texte soit publié au recto du composé principal. Bien. Maintenant, nous déplaçons chacune ici et changeons cette balle d' une à deux. Continuera à modifier le texte à renommer. Première crainte, la diffusion doit être terminée juste un peu en dessous. Mais la force de fusion, le rectangle, ajoute les deux lettres pour que la base puisse prendre les autres flux. Je peux régler ce problème généralement à 1060. Oui. Très bien, bien. Maintenant, nous continuons avec cela. Je vais maintenant copier ces deux composants pour placer le reste des pieds. Bien. Maintenant, nous faisons germer le dernier et nos films ici changeront pour ces deux films principaux. Je vais ajouter un bouton juste en dessous. Nous allons donc ajouter le bouton ici ou vous allez simplement copier ce bouton et coller chacun ici. D'accord ? Nous ajoutons le rayon de bordure, comme les autres composants. Modifiez la taille de police à 28. Et cet outil est de bon augure. Déplacez les textes et la jambe centrale de cette façon apportera les dernières modifications par rapport à Tasteful. Et nous allons voir quelque chose et le côté gauche de l'écran. OK, très bien. Nous allons donc ajouter la même chose, comme du texte, le copier et le coller ici. Juste pour conserver le même paramètre que les textes de l'ancien projet. Nous pouvons écrire, regarder, regarder quand se trouve la France d'une manière ou d'une autre, vous devriez savoir, faire en sorte que ce soit plus une boule rouge et prendre les couches ici sur la gauche. De plus, je peux augmenter la taille juste pour que mes amis soient attirés par les oreilles. Oui. 90, c'est bien. Filmez plus tard en haut et au centre de l' écran, comme ça. Oui, exactement. Nous allons changer la couleur de la France pour une autre couleur chaude pour être plus attrayante car le coût de notre plateforme dépend du budget alloué à vos amis et la façon de participer et de vous amuser avec vos amis. Cette technique est largement utilisée sur et de vous amuser avec vos amis. Cette technique de nombreuses plateformes et de nombreuses applications, suivez les gestes des utilisateurs sur un élément spécifique, comme cet exemple. OK, continuons maintenant à ajouter une photo de la fin de la page , qui contient généralement une note de droit d'auteur, un lien, une politique de confidentialité dont les coordonnées et les réseaux sociaux ont besoin de l'icône, Insérer une photo, contiennent des informations qui vous permettront d'améliorer l'avenir de dérogation extérieure. Je vais donc utiliser cet outil rectangulaire à partir d'ici et dessiner un rectangle sur la largeur de la page du téléphone avec le réducteur. Alors je vais juste vérifier cette réponse au bon endroit. Nous allons maintenant changer la couleur du défaut. Nous allons donc ajouter deux liens dans le, à gauche, pour la page À propos de nous et la page de contact. Et aussi, par d'autres moyens indirects, nous commençons par la section virale gauche. Ainsi, de la même manière, copiez les textes de la barre de navigation et collez-les et collez chaque année. La sonde est probablement la même ou cliquez sur le lien et choisissez cette option branche ou front. D'accord ? Uh, c'est bon pour le moment. Modifions le type et la taille de police à 24. Je vais maintenant modifier le texte de ce prénom pour parler ceux-ci et en faire une autre copie pour contacter leurs noms. Très bien, c'est bon pour cette partie de la suite, dans la partie droite du dossier, où nous ajouterons les liens des réseaux sociaux à coller ici. Donc, basez la syntaxe et une autre longueur l'une à côté de l'autre. Changez ce pool Facebook, et celui-ci via Twitter. Nous allons donc utiliser l'option de grille de mise en page pour aligner correctement les liens vers les photos. Sélectionnez l'avant et l'activité depuis le haut-parleur. Je trace une ligne, ce lien à la fin de la deuxième couleur, et celui-ci au début. Donc, avec la même méthode, je peux aligner les autres jambes. Vous pouvez également augmenter le nombre de Kelvin pour plus de détails. Donc c'est bon pour celui-ci. Maintenant, je vais désactiver l'option verte et il y a deux liens, l'icône de l'icône. Si j'intègre Azure, ML, Variety et Choice, vous pouvez prendre l'avion pour y parvenir. Je peux écrire dans ce champ, Facebook. OK, je peux partager celui-ci. Après avoir cliqué. C'est important ici. Diraient-ils que des produits canadiens ont été importés dans mon espace de travail ? Revenez en arrière. Maintenant, Fu, regarde l'icône Twitter. Twitter, qui sert la colonne vertébrale. Cliquez à nouveau sur. Bien. Bien entendu, demain, la taille de cette icône d'outil deviendra similaire pour le texte intégral. Et nous allons hypothéquer ici. Puis un autre lavabo. Vous devez changer la couleur en blanc pour être plus cohérente avec le dx. OK, c'est bon pour celui-ci. Continuez avec le deuxième bacon, 20, je crois, c'est une bonne taille pour ce chèque. Zoomez et déplacez celui-ci vers la gauche du texte. Ensuite, dans une autre section, nous mettrons le lien. Très bien. Cet écran est maintenant prêt et Jamal entre dans l'espace de travail. C'est bon, les gars. Nous avons maintenant terminé cette page et nous vous attendons dans la prochaine vidéo pour concevoir l'écran Discover. 7. Découvrir l'écran: Bonjour, mes amis. Commençons donc par créer l'écran des découvertes. Tout d'abord, je vais déplacer le deuxième composant ici et en faire une copie afin de conserver le même modèle que le précédent. Zoomez. Et nous avons changé le nom pour découvrir Bache. Après, je vais supprimer les anciens composants de la page. Cela peut maintenant provenir des liens de la barre de navigation. Celui-là. Pour conserver le même style à l'écran de l'application. Il est donc très important dans vos créations d'utiliser la même police pour la phrase et les mots. Continuons à écrire un exemple de sens pour inciter l'utilisateur à en rejoindre quelques-uns et à en regarder quelques-uns. Hein ? Films et séries TV de Bros. Bros., d'ici. Non, non, non. Parcourez simplement les films et les émissions de télévision. Ici, la taille du texte est de 48. Et l'outil Type frontal. Encore une fois, je devais augmenter la taille à 56 et les retirer un peu en haut. Ici, nous allons ajouter trois oxygènes pour que les utilisateurs puissent choisir leurs films préférés ou afficher la liste de leurs sentiments. Commençons par ajouter un rectangle ici au centre. Je déplace le petit bouton comme ceci. Et maintenant, nous allons changer la couleur en noir à partir d'ici. OK, bien. Mais je peux le changer à nouveau comme ça et porter la transparence à 80 %. Maintenant c'est très bon. Nous allons donc faire un copier-coller ici. Encore une fois, un autre rectangle à côté de l'autre. Maintenant, je peux déplacer les composants en Israël vers le haut comme ceci. Quand pourrons-nous commencer à préparer leurs bataillons de ce rectangle. Copiez à nouveau depuis la barre de navigation et collez ici. Donc, pour cet oxygène, je vais écrire le top, comme le top ou les films les plus populaires. Regardez-le sur la plateforme. Agenda, taille 24 à 28. Oui, c'est bien maintenant, donc un film ici. Mais vous devez activer ou cliquer sur l'option Brand24 et continuer à choisir la meilleure. Tout comme moi, ça va. Faisons une copie pour le rectangle secondaire. Et nous allons le changer Georgina, lorsque l'utilisateur pourra choisir le type de film qu'il souhaite regarder. Encore une fois pour la dernière option, le mode. Oui, More. Permettez à l'utilisateur de voir plus de films ou de terminer. Hein ? Je vais maintenant ajouter trois icônes pour le district. Je pars du plugin Fight. Pour le premier, je peux écrire dope » comme si les jambes étaient des liens. Pour modifier l' expression en J'aime, Meilleur ou Favoris, pour afficher plus d'icônes. Sur la page suivante, je vais choisir celle-ci. Faites défiler l'écran vers le bas, puis placez l'icône pour accéder à la barre suivante. Maintenant, je peux dessiner l'option générale. Oui, Schwann, Baker. Et pour plus d'oxygène, je peux effectuer une recherche d'affilée avec Next. Ou qu'en est-il ? Oui. D'accord. La page suivante. Ici, nous allons importer ceci. Je le peux. D'accord. Maintenant, nous n'avons pas dit qu'ils sont des icônes et que nous les avons déplacés dans un rectangle. Les gars savent donc que nous allons changer la couleur de l'icône en y, devrait être cohérent avec le reste des autres composants. D'accord. Bien. Nous terminons avec le motard de février. Et maintenant, je vais vous montrer les meilleurs jours pour l' icône ici et il y avait un baromètre que nous fixons à AT. Et il en va de même pour la deuxième pyramide. Déplacera chacun ici au centre du premier rectangle. D'accord, c'est bon. Maintenant, passez à la seconde. Eh bien, on nous a donné la même configuration et nous avons terminé avec la dernière. Je peux fixer le même périmètre à 180 degrés comme ça. Enfin, je déplace chacune d'elles au centre comme les autres icônes lesquelles je vais écrire une phrase de plus. Voici l'autre bouton donnant vie à l'utilisateur pour motiver ou encourager l'utilisateur à rejoindre ses amis. Copiez donc le premier et les bases ici. Maintenant, je vais écrire presque comme si regardais côte à côte dans la vraie vie ? Oui. Est-ce que cela fonctionnerait ? Modifions la taille de police à 24. Préfère la meilleure année et le type de police à un type de police normal. Très bien, donc c'est parfait pour ce tour du monde. Maintenant, je vais personnaliser les composants pour qu'ils soient plus lisibles et plus attrayants pour dessiner ceux de l'utilisateur. Commençons maintenant par ce rectangle, lequel nous allons contenir les affiches dans lequel nous allons contenir les affiches de films ici, sur le côté gauche. Et nous modifions la rétrogradation à 550 par Faith Haendel. Maintenant, je peux le déplacer ici. Oui, ici, nous allons simplement regrouper les composants de l'écran comme ceci pour réorganiser mon composant en violet. 8. Puissant plugins: Bonjour les gars. Ici, dans ce rectangle, vous ajouter les quatre images d'un puissant, nous allons découvrir dans cette vidéo où nous pouvons ou présenter les films qui sont actuellement projetés avec leur posture. Très bien, nous cliquons donc avec le bouton droit de la souris et choisissons les plugins. Cliquez ensuite sur le plugin Unsplash. Pour moi, le plugin en exemple. Mais s'il n'est pas importé dans votre espace de travail, vous pouvez cliquer dessus pour trouver ce qui est végétalien ou simplement importé. Ce plugin contient beaucoup d'images de haute qualité. Je recommande de l'utiliser. Nous recherchons n'importe quel type d'image. Personnellement, je l'utilise beaucoup dans mon projet. Ici, nous allons rechercher dans le tableau des termes « forces sensorielles ». Ensuite, pour notre page ici, déplacez-la dans la barre de recherche et faites défiler la page pour découvrir la liste des dossiers. Je peux donc découper celui-ci comme agissait du premier poster, à mon avis. Ici, vous ne devriez pas attendre en place de cet outil indicateur par les entreprises dès la fin de l'EMH. OK, bien. Il indique que l'importation a été réussie. Continuons à chercher une autre affiche. Celui-ci ou celui-ci. Maintenant, apprenti, je vais importer celui-ci. D'accord ? Très bien, continuer cette image covalente pour celle-ci, c'est bien maintenant, oui, je vais l'importer. D'accord. Faites défiler les deux autres vers le bas. Le dernier. Nous reviendrons ici sur les meilleures représentations. L'une de ces images. Oui, celui-ci, Krypton Core. Hein ? L'image a été importée avec succès dans mon espace de travail. Nous allons maintenant les évaluer du même point de vue que c'est le cas. C'est ce que nous avons terminé avec cela. D'accord. Nous allons maintenant les placer dans notre boîte. OK, nous sommes de bons gars. Nous en avons maintenant terminé avec cette page et les deux autres dans la vidéo suivante pour ajouter un prototype et une animation intelligente. 9. Prototype et animations: Dans cette vidéo, nous allons ajouter liens d' introduction ou de navigation entre les écrans et, encore une fois, animations pour certains composants car je suis là), ainsi que la page d' accueil du premier écran et le centre commercial Switch Strip. OK, commençons par le bouton. Cliquez sur le cercle et reliez-le à la page commune. D'accord ? Il s'agit d'une fenêtre contenant les détails de l'interaction. À partir de là, nous personnaliserons l'interaction entre les pages et nous pourrons afficher le type de navigation ou en mouvement. Également la durée pendant laquelle vous passez d' un écran à l'autre. Pour cette interaction, je vais corriger celle-ci. Je vais donc cliquer ou cliquer sur oxygène et naviguer dans le phage articulaire. Et ici, nous pouvons choisir cette liste, le type d'animation. Mais pour, mais pour moi maintenant, je vais montrer l'animation instantanée. Continuons à ajouter les liens dans la barre de navigation avec les autres écrans. Inscrivez-vous à cette page comme à l'introduction du bouton. Encore une fois, je vais vous montrer le même paramétrage du lien de progression et maintenant du lien Découvrir. OK, bien. Le lien est ajouté avec succès avec la même interaction que nous pensons. Nous allons maintenant terminer le reste de l'interaction entre les verts orangés avec la même méthode. Donc, pour l'image du logo que nous choisissons, lorsque nous cliquons sur le logo, nous revenons à la page d'accueil comme suit. Très bien Nous allons maintenant essayer l' introduction en cliquant ici. Tout d'abord, je vais utiliser le bouton, obtenir l' échange de longueur et de largeur avec le reste de navigation dans l'espace de travail. OK, maintenant je vais ajouter l'animation à cette image de la page de destination. Mais tout d'abord, lorsque nous ajouterons une animation à un composant, vous devez copier l'écran urgent afin de modifier cette innovation le deuxième écran et de donner la situation initiale où l' original est Gideon , ce qui n'est pas le cas. Déplacez le deuxième lien juste en dessous du premier comme ceci, puis revenez en mode création. Maintenant, nous zoomons ici et changeons le nom en Lending Page Animation One. Sélectionnez l'image du changement de notre intuition avec ce paramètre, mettez-la à zéro. D'accord ? Le zoom arrière sur l'interaction entre ces deux écrans avec malgré l'armature. Passez à nouveau en mode prototype, supprimez par longueur à partir de la deuxième page, comme ceci. Ajoutons ensuite l' interaction à partir de l'image sur le premier écran. Le deuxième écran. Ici, dans la fenêtre des détails de l'interaction. Je vais choisir n'importe quelle option et lancer dans l'animation. Je vais utiliser Navy avec les paramètres par défaut. Bien. Essayons non, la première animation. Très bien. J'ai donc fait face à la souris, l'image est tournée avec une irritation que nous avons définie dans les paramètres. Revenez en arrière pour ajouter la deuxième animation. Maintenant, la deuxième animation concernant le bouton, lorsque l'utilisateur passe la souris, survole le bouton, le courant devient un peu plus sombre. Donc, tout d'abord, je vais ajouter une autre copie pour le passage de l'écran international en mode design et en bases ici, mais pas d'animation. Ici. Encore une fois, j'ai changé le nom en outil d'animation de page de prêt et revenez par le biais du tableau. Je vais donc supprimer tous les liens de l'écran et ajuster l'interaction des boutons avec leur coentreprise après avoir modifié la couleur du bouton ici, changer le mode de conception des couleurs et sélectionner la palette de couleurs. Donc, je vais juste choisir ou ressembler à ça pour l'avoir là. Bonne taupe, couleur plus foncée. OK, très bien, Jim Crow au MU et à la direction. premier temps, vous devez supprimer cette navigation entre l'écran d'origine et la douleur géante. Et le lien entre le bouton et le nouvel écran. Pour celui-ci, je vais choisir, nous réduisons l'oxygène. Pour l'animation. Je vais vous assurer une animation intelligente comme cette petite démo. Également pour la journée. Modifiez-le en 200 millisecondes pour accélérer l'animation. OK, super. Nous allons maintenant terminer avec le lien entre le bouton et la page géante. Pour ce paramètre, donnez le même parent. Corrigez simplement les joints d'animation. Très bien Nous pouvons maintenant essayer cette nouvelle animation. Donc, comme vous pouvez le constater ici, lorsque la plupart d'entre eux touchent le bouton, les versions en couleur le font. Et puis cliquez, nous passons à l'écran suivant. Revenons maintenant à notre espace de travail pour ajouter une autre entrée à leur page découverte. Encore une fois, comme pour la même animation, vous devez copier la deuxième page de l'original. Changez le nom pour faire défiler la page, et assurez-vous que cette animation soit assez impartiale. Lorsque l'utilisateur passe la souris sur l'un ou l'analyseur, le composant change de titre, l'autre force et se concentre simplement sur l' affiche Select movie pour afficher plus de détails. La première étape consiste donc dessiner un rectangle pour choisir un fœtus plus foncé. Quand, quand les affiches sont sélectionnées. Zoomez ici pour fixer la largeur et la hauteur du rectangle. Très bien. Nous allons maintenant changer la couleur en noir et personnaliser la transparence à 50. Nous allons le déplacer de côté pour le moment et supprimer cette affiche. Je vais m'en servir comme première affiche. Les détails seront affichés ici au centre comme ceci. Nous pouvons le corriger en jouant avec ce paramètre de l'outil. Pour chaque 1 230, 550 par les cinq mêmes fournisseurs, c'est beaucoup. Une fois que j'aurai pu ajouter le filtre sur l'affiche, comme si c'était un monde différent, n'est-ce pas ? Je vais maintenant ajouter le titre du film avec le même formulaire pour la chaise de copier-coller Discover link. Mais vous ne devez pas utiliser l' option brand to Front pour avoir une valeur par défaut. OK, bien. Changez-le pour vous sentir autorisé. Partage désormais la taille du texte 64 ainsi que la valeur étrangère à saisir pour le déplacer vers le centre du rectangle. Ensuite, le haut. Nous allons maintenant ajouter un bouton au centre pour donner à l' utilisateur la possibilité de commencer à regarder le flux. Je vais donc copier le bouton depuis l'écran et le coller ici. D'accord. Maintenant, je vais le déplacer exactement au centre. Changer ça n'était pas cool. Montre. Et le formulaire pour vous avertir en supposant qu'il ne supprimera pas ce rayon de bordure à partir d'ici. montre doit également être digérée Toby parfaitement visible et placée au centre de l'antenne parabolique. Comme vous pouvez également ajouter un injecteur ci-dessous qui donne un nombre de visiteurs. Quand le film a commencé, le concierge étranger dit à 22, le type de police est irrégulier. Et modifiez à nouveau la taille du texte à 24 pour être plus lisible et modifiez le texte. Par exemple, sixième, en surveillant, en surveillant la moelle. Eh bien, nous applaudissons vers la droite. Le texte est très petit. Pour être clair, je vais encore une fois nommer crazy. OK, très bien. Nous en avons terminé avec la dernière modification concernant le titre et le beurre. Alors, les gars, nous allons ajouter l'interaction avec l'écran. Passez en mode prototype, affichez la même affiche et associez-la à un nouvel écran comme celui-ci. Donc, dans le détail de l'interaction, je vais remplacer celui-ci par n'importe quel mode. Pour que cela soit le cas, conservez la même configuration. Encore une fois pour l'animation. J'ai terminé avec le lien entre les montres, mais j'ai ensuite obtenu une page géante. Parce que sinon, avant de commencer à se laver les pieds, l'utilisateur doit terminer l' enregistrement de la variable, nous en terminons maintenant avec cette animation, c'est ta bouche. Vous voyez notre entrée dans l'espace de travail et cliquez ici pour essayer de naviguer dans notre application. Comme vous le voyez ici, lorsque vous survolez la plupart des composants, le Forster passe à la page d'animation. Et le bouton fonctionne directement, redirigeant l'utilisateur vers la page géante. Pour les autres affiches, vous pouvez les compléter à titre d'exercice pratique. Notre site Web fonctionne correctement. Retournez dans notre espace de travail pour les consulter. Encore une fois. Vous pouvez ajouter un autre écran afin d'améliorer et de créer une nouvelle option sur la plateforme. Merci beaucoup, les gars, d'avoir regardé. Nous avons terminé ce cours et je souhaite que vous appreniez de nouvelles choses avec moi. Enfin, un au revoir, et je vous verrai au prochain cours.