Apprendre à utiliser Figma : concevoir une UI/UX complète pour mobile

1. Introduction: Bienvenue sur le cours complet sur mobile you aux avec Sigma et ce cours nous allons apprendre comment nous pouvons utiliser l'outil gratuit de conception basé sur le cloud appelé Sigma pour concevoir de magnifiques simulations mobiles pour vos clients ou même vos propres projets. Nous allons concevoir une maquette complète de sept pages pour le nom d'un client, Clean Kangourou, qui est essentiellement un service de livraison de linge. Je m'appelle Nina, et je suis votre instructrice pour ce cours. Au cours des 10 dernières années, j'ai conçu et développé des dizaines d'applications mobiles et web. Et dans ce cours, je veux vous montrer exactement comment concevoir une maquette mobile complète à partir de zéro. Comme le cours est idéal pour tout le monde. Même si vous êtes un concepteur débutant, vous pouvez entrer et apprendre à concevoir de belles balises mobiles. Voici quelques choses que nous allons apprendre dans ce cours. abord, nous allons apprendre à ajouter des images et des icônes à nos projets. Ensuite, nous allons apprendre ce que sont les composants, qui nous aide à créer des conceptions réutilisables dans notre travail. Nous allons apprendre les contraintes qui nous aideront à garder nos conceptions réactives pour toutes les tailles d' appareils mobiles . Nous allons même utiliser les enfants de design d'Apple pour assembler certaines parties de notre projet. Et surtout, nous allons travailler avec beaucoup de texte et apprendre à appliquer de nouveaux styles de police et de nouveaux styles de couleur à votre projet. Et nous allons même utiliser des plug-ins pour générer des choses telles que des cartes ou même obtenir des données des feuilles Google directement dans votre projet de conception. Nous allons même apprendre à nous appliquer tout au long de votre conception afin que vos utilisateurs ou vos clients utilisateurs soient super heureux d'utiliser l'application que vous avez conçue. Donc, si vous êtes prêt à mettre en place une belle maquette mobile pour vos clients ou pour vos propres projets qui commencent et je vous verrai dans ce cours. 2. Exigences de maquette: Bon, donc pour lancer ce cours, on va se lancer dans la conception de notre premier mobile. Vous je maintenant c'est vraiment excitant, et je veux mentionner que vous n'avez pas vraiment besoin d'avoir beaucoup d'informations de fond sur la fig mus . S' il s'agit de votre premier projet, vous devriez être capable de toujours tomber. Mais sinon, si vous voulez apprendre certaines des choses d'introduction à la Fig MMA, je vous recommande de consulter mon autre cours. Les autres cours ont appelé une introduction à la Fig MMA. Dans ce cours, je passe en revue beaucoup des bases telles que les cadres créant des formes et explorant certains des outils et panneaux auxquels nous avons accès dans la fig MMA. Mais si vous voulez entrer et apprendre au fur et à mesure, vous pouvez aussi le faire. , La première chose,c'est que je t'ai recommandé de te diriger vers la fig MMA Dot com et de créer un compte là-bas. Si vous ne l'avez pas déjà fait, une fois que vous êtes installé et que vous êtes dans la figue MMA, vous êtes prêt à vous lancer dans ce cours. Donc pour notre premier projet ici, on va travailler sur un mobile. Je vous ai pour cette compagnie appelée Clean Kangourou. On va imaginer qu'on a un client qui nous a donné ce projet. Euh, typiquement, un client va trouver quelque chose de similaire où il vous donnera son nom. Ce qu'ils font , , c'est toujours ce qu'ils ont besoin pour la maquette. Donc on va vraiment traiter ça comme une maquette qu'on va concevoir pour un client. Um, qui se trouve être cette société appelée Clean Kangourou Supercool. Maintenant, avant de sauter ici, je tiens à mentionner que vous avez accès à ces exigences dans un pdf. Ah, et la ressource est d'aller de l'avant et de les télécharger à partir de la ressource est de cette leçon. Vous trouverez également le lien de stigmatisation pour accéder à ce fichier. Je suppose que vous n'allez pas vraiment aller de l'avant et copié d'ici dans votre vadrouille à figues, alors n'hésitez pas à télécharger ça dès maintenant. Hum, et ensuite nous irons de l'avant et commencerons avec les exigences. Voyons ce que fait cette société ici. Clean kangourou est un service de livraison de blanchisserie sur demande. kangourou propre permet aux utilisateurs de s'inscrire et de demander à ce que leur linge soit récupéré sur un autre endroit. Essentiellement, c'est un service de livraison de blanchisserie super cool. Voyons ce qu'ils ont en termes d'actifs de marque. On dirait qu'ils veulent qu'on trouve un schéma de couleurs. Ils n'en ont pas pour leur projet. Et puis ils veulent que nous trouvions aussi des fonds affectés au projet, ce qui est cool parce que nous allons passer sur la couleur et la typographie dans ce cours. Et puis je vois que la seule chose qu'ils nous ont fourni est le logo, que vous pouvez encore vérifier. La ressource est de le trouver. Voyons maintenant ce que leur maquette exige en termes de pages. Donc, la première page est une slash d'inscription page de connexion avec un bouton pour un tutoriel. Les options d'inscription seront e-mail et mot de passe, puis assigner avec l'option Google ainsi. Plutôt cool. Assez typique pour une page éditoriale de connexion pour expliquer comment cela fonctionne en trois étapes. Cool. Nous avons également besoin d'une page pour ajouter une carte de paiement, page de carte assez simple pour permettre aux utilisateurs de définir leur adresse de ramassage et de dépôt. Ok, c'est plutôt cool. On dirait qu'il y a une année de faute, alors je vais aller de l'avant et réparer ça juste là. Vraiment rapide. Détendez-vous pour les utilisateurs d'appeler pour le ramassage de la blanchisserie auprès d'un service de blanchisserie local de leur choix et de leur montrer le prix. Ok, ça a l'air cool. Je pense que ça va être notre page principale de ce que je vois. Ensuite, nous avons une page de profil pour voir toutes les options de profil de l'utilisateur ainsi que les déconnecteurs . Um, plutôt cool. Assez simple, juste là. Et enfin, une page pour montrer aux utilisateurs de leur barre oblique active actuelle et aussi leurs services de blanchisserie passés et combien ils ont été facturés est logique si les utilisateurs veulent revenir en arrière et voir combien leurs coûts de service et tout cela. Donc, sans plus tarder, nous allons sauter directement dans la mise en place de nos cadres métalliques et ensuite commencer notre fichier figment pour faire la maquette pour ce client 3. Le Wireframe: D' accord. Alors ? Et la dernière leçon que nous avons passée sur les exigences de l'application pour la maquette sur laquelle nous travaillons ici . Kangourou propre. J' ai en fait esquissé. Ah, ce que je pense que je veux inclure dans le cadre métallique. Ah, et vous trouverez que dans la ressource est pour ce projet aussi. Eso de la dernière leçon si vous avez téléchargé la ressource est, um aller de l'avant et ouvrir pour nettoyer le croquis de balisage kangourou. Pdf Sinon, allez-y et téléchargez. La ressource est et puis allez-y et ouvrez ce fichier. Donc une fois que tu l'ouvriras, tu trouveras ah, ce petit dessin que j'ai fait. Um, juste en utilisant un stylo et du papier pour créer un cadre métallique. Et c'est ce qu'on appelle un cadre métallique. Et vous je ou la conception de l'interface utilisateur. Essentiellement, c'est juste un peu comme un plan pour notre maquette avant que nous ne sautions et le concevions et passons beaucoup de temps à concevoir sans savoir exactement à quoi ressemblera le plan de l' obligation. Donc, essentiellement, c'est pour ça que nous faisons un cadre métallique, généralement avant de sauter et de commencer notre maquette. Maintenant, si vous aviez déjà quelques idées pour ce projet et que vous avez commencé à les esquisser. N' hésitez pas à suivre et peut-être faire quelques ajustements en cours de route en fonction de votre propre design . Sinon, on va utiliser. Ah, ce cadre métallique est bien allumé. Nous allons faire beaucoup référence à l'esquisse tout au long de la conception de ce balisage. Donc, avez certainement le fichier à portée de main. A houle, vos exigences APP, qui sont à nouveau dans la ressource est dossier. Vraiment vite. Examinons les pages que j'ai mises en place. Ah, maintenant tu vas voir leur numéro. Selon quoi ? Le client ici nous a donné un à sept et toutes les pages sont couvertes ici. Nous avons une page de connexion d'inscription, hum, et assez simple. Avec toutes les exigences qu'ils ont signé avec e-mail envoyé avec Google. Et puis on a un petit tutoriel pop up. Je pense juste mettre ce tutoriel juste au-dessus de la page de connexion et puis juste faire un peu de pop up. Ah, avec un arrière-plan floue, on va juste faire la carte de paiement pour qu'ils puissent avoir leur carte de crédit. Et puis si vous allez à la page suivante ici. Maintenant, j'ai créé une page ici pour que l'utilisateur définisse son adresse sur trouver son adresse à définir pour son service de bijoux de blanchisserie. Ceci est notre page principale de demande de barre oblique. Hum, maintenant, à partir d'ici, il y aura une carte où ils mettront leur adresse de livraison qu'ils pourront toujours taper sur ceci pour aller à cette page et ensuite mettre à jour là, peut-être une nouvelle adresse si à un moment donné ils ont changé votre adresse, puis ici, nous avons un robinet de demande de blanchisserie qui est essentiellement toujours ouvert. Il vous montrera les magasins à proximité. Je pense à faire une sorte de, peut-être comme, peut-être comme, défiler ou glisser vers la gauche et la droite pour aller à différentes, hum, pour voir différentes cartes pour différents magasins. Vous pouvez voir ce que je pense que nous devrions inclure ici. Um, vers le bas comme une sorte de dessin plus détaillé de ce que je pense devrait être inclus dans la carte de magasin ici en bas. Donc nous aurons une image du magasin, peut-être, euh, euh, nom du magasin, dollar par article, quel est leur délai d'exécution. Alors combien de temps ils pensent que ça va prendre pour faire le service de blanchisserie et ensuite ils sont cotés. Donc pour la structure de navigation ici. Voici comment les utilisateurs vont s'étirer entre le principal, les trois pages principales ici, qui est la page principale, la page de profil et puis le passé ou les services barre oblique Demandes passées Page ici. J' ai décidé d'aller avec une barre de navigation. Donc, c'est essentiellement là que vous voyez que vous avez un onglet en bas et ensuite vous pouvez aller à plusieurs pages selon lequel il sera sélectionné. Il vous mènera à la bonne page. Si vous utilisez l'application instagram, par exemple, ils utilisent un onglet, notre système, où vous avez des options en bas ici et puis vous basculez entre les différentes pages. Ceci est assez commun dans beaucoup d'applications mobiles. Et comme nous n'avons que trois pages principales ici, nous allons nous en tenir à l'utilisation d'un onglet. Sont et puis en bas ici, il va juste vous dire numéro un ou l'option supérieure sur un prendra. Les services étaient juste à la page 7 juste ici. Ah, c'est là qu'ils voient leurs anciens services de blanchisserie. Um, et encore une version plus détaillée de ce que je pense devrait aller dans ce genre de liste. Um, voir ici serait un nom de magasin la date et l'heure où ils ont passé la commande de service de blanchisserie . Et puis peut-être en fonction de l'état de cette commande, nous pouvons la montrer ici. Donc, s'il a déjà été livré, nous pouvons dire le livrer. S' il est actuellement lavé ou séché, nous pouvons montrer qu'ici une houle à la page 2 sera la page principale ici. La page de blanchisserie, puis la troisième page ira à une page de profil. De là, nous avons pensé que nous pouvons mettre à jour corrigé. Nous pouvons leur permettre d'éditer leur nom. E-mail. Ils peuvent aller à leur mode de paiement. De là, il y a un peu de soutien, mais au cas où vous voulez entrer en contact avec l'équipe de kangourou propre, disons sur un bouton de déconnexion, ce qui est assez typique sur un profil de page de compte slash. Donc, si c'est un peu trop en ce moment, ne vous inquiétez pas pour tout ça. Une fois que nous commencerons à concevoir, nous allons le faire étape par étape, page par page et vraiment tout décomposer, puis aller de l'avant et créer notre balisage. Le but de ce cadre métallique est juste d'avoir une idée de tout ce que nous devons inclure. Donc on n'oublie pas quelque chose par hasard ou laisse quelque chose de côté. Droit ? Donc, dans la leçon suivante, on va aller de l'avant et mettre en place partout Page est Ah, et ensuite on se prépare à concevoir notre maquette. 4. Configurer nos cadres: Bon, donc je pense que nous sommes prêts à mettre en place notre nouveau projet. Ah, alors passons à la Fig Mahir. Si vous êtes dans l'application de bureau, il est super facile de créer un nouveau fichier. Montez ici et appuyez sur le signe plus ici. Je vais ouvrir une nouvelle faute. Allons-y et renommons le en Clean Kangourou. Puisque c'est le projet sur lequel nous travaillons ici et maintenant nous avons une nouvelle caméra. C' est juste en face de nous. Ah, ce que je vais faire, c'est changer la couleur de fond et le rendre légèrement plus sombre juste pour aider à créer un contraste entre nos cadres. Ici, Allons de l'avant et maintenant mettre en place tous les cadres nécessaires pour notre projet. Donc si je reviens à mon croquis que j'avais ici, tu verras qu'il nous faut sept pages. Alors allons de l'avant et configurez ces pages avec les noms appropriés, hum, hum, puis sautez dans la conception ou la page de connexion. Donc, encore une fois, vous créez de nouveaux cadres lumineux appuyant sur f sur votre clavier. Donc nous sommes vous savez, nous concevons pour une maquette mobile. Ah, quand on va de l'avant et juste choisir l'iPhone 11 pro. Cela a tendance à s'adapter à beaucoup des nouvelles tailles d'iPhone ainsi. Je vais juste rendre mon arrière-plan légèrement plus léger. Je pense que c'est bien. Alors allons de l'avant et créons sept de ces pages. Donc, la façon la plus simple de créer plusieurs images à partir d'un qu'ils ont déjà mis en place est juste un dupliqué en appuyant sur la commande e r. Contrôle de si votre propre Windows. Donc je sais qu'on a un total de sept pages, donc je vais devoir le faire six fois de plus. Alors créons 12, trois, 456 Et maintenant nous avons un marché avec sept pages. Allons de l'avant et utilisez l'option de zoom ici et faisons le zoom pour s'adapter. Ce que cela fera, c'est juste aller de l'avant et juste zoomer jusqu'à ce que nous puissions voir toutes nos images. Vous pouvez également appuyer sur Maj 1 pour activer cette option de zoom où que vous soyez. Donc, si j'appuie sur Maj un, vous pouvez voir qu'il va zoomer pour s'adapter juste là à assez pratique. Allons de l'avant et renommons tous les cadres, puis commençons notre première page de connexion , afin de renommer les cadres ou les calques. Vous pouvez soit double-cliquer ici pour que nous puissions nous connecter. Je peux voir qu'il a changé ici, ou nous pouvons juste aller ici dans notre panneau de calques et faisons un tutoriel. Celui-ci sera le paiement. Celui-ci sera une carte. Ça va être notre puits principal, c'est en fait une demande de mitaines. Ensuite, nous avons ou profil dernier, pas de feuilles. Nous avons notre page de services. Allons-y et vérifions qu'on n'a rien manqué ici. Alors connectez-vous. Les paiements de didacticiel, les demandes de carte, les profils et les services réduisent les demandes passées. Je pense qu'on a tout ici. Alors, maintenant, allons de l'avant et concentrons-nous sur notre page de connexion. Une autre façon soignée de zoomer est simplement de maintenir la touche Zet de votre clavier, puis d'aller de l'avant et de simplement glisser sur la zone. Tu veux zoomer dessus ? Nous allons zoomer comme ça, donc revenir à notre page de connexion, nous aurons besoin d'un tas de rectangles, euh, spécialement un pour l'email. Vous voulez passer Ward un pour la connexion et deux pour les boutons d'inscription ici. Donc c'est un total de cinq rectangles. Allons de l'avant et créons ces et essayons de les distribuer en conséquence afin que vous puissiez créer un rectangle en appuyant sur notre comme nous l'avons appris dans les sections précédentes. Allons-y et traînez-en un ici. Hum, je pense que, hum, hauteur de 55 serait sympa, et ensuite allez-y et lâche-toi. J' utilise tout ici juste pour voir où, comment il est positionné ici. Allons-y. J' ai poussé la taille ici aussi. Faites-le 3 25 juste pour qu'il soit uniformément espacé entre la gauche et la droite. Je vais utiliser Shift pour ramener ma règle. Et puis je vais ajouter des guides à ma gauche et à droite juste pour faciliter les choses à l'avenir . Donc, je vais utiliser la commande D quatre fois pour dupliquer ce rectangle. Une façon soignée de dupliquer les choses est de tenir à nouveau l'autel, puis traîner loin ce rectangle. Utilisons les touches fléchées pour le faire descendre. Trois pixels ici. Ah, et puis, si vous appuyez sur la commande D, il va réellement aller de l'avant et répliquer le même type de duplicata et de déplacement que j'ai fait. Il y a trois fois de plus. 123 et Maintenant, nous avons cinq champs ou boutons ici que nous pouvons utiliser. Déplaçons ces bas aussi. Cours-le vers le bas. Déplaçons celui-ci un peu vers le bas. Allons de l'avant et ajoutons un peu de style à cela à ces champs ici. Faisons le remplissage blanc, puis ajouter un trait de va le faire légèrement. Je pense que c'est bon ici. Si vous voulez obtenir exactement la même couleur de trait, allez-y et entrez simplement cette, euh, clé hexadécimale dans votre sélecteur de couleur pour le trait. Allons-y et faites-le juste 1,5 pixels pour que nous puissions le voir plus facilement. Sélectionnez-les à nouveau. Allons de l'avant et arrondissons les coins à huit pixels en utilisant ici. En fait, les ragoûts. Six. Ça a l'air bien. Appliquons à nouveau le même outil de rayon de coin de ceux-ci. Vous pouvez tenir plusieurs objets en utilisant shift doit aller de l'avant et ajouter du texte en utilisant le tiki. J' ai un SMS ici, un type, un email. Il suffit de centrer ça ici, et ensuite on va l'étirer jusqu'au bout. C' est assez bon. Je vais juste dupliquer en tenant le vieux mot de passe Let's do pour ne pas vous inquiéter trop sur les polices et les couleurs parce que nous reviendrons à ça dans le futur. Des leçons. En ce moment, nous essayons juste d'obtenir la configuration de base. Allons de l'avant et ajustons ce texte ici vers le bas à notre bouton, et vous pouvez centrer le texte en utilisant cette option ici, où il indique le centre de la ligne de texte. Faisons-le se connecter. Faisons cela deux fois de plus pour ou inscrivez-vous avec e-mail. Andi. Enfin, inscrivez-vous avec Google. Si je reviens à mon design, nous avons une petite ligne ici pour juste distinguer entre les sections de connexion et ensuite les sections d'inscription . Retournons en arrière et faisons-nous une ligne du Président Oh, et dessinons juste une à droite du côté gauche de mon gars à la droite. Ce qui est beau au sujet des guides, c'est que lorsque vous vous approchez d'eux, ils s'enclencheront directement en place. Assurez-vous simplement que vous avez la bonne taille pour votre objet. Une chose à remarquer également que lorsque vous dessinez votre ligne juste pour vous assurer que vous n'allez pas à des angles bizarres ici, maintenez le décalage et cela vous aidera à garder les choses à la position de l'angle droit et laissez aller ici . Et nous avons notre ligne ici. Je vais juste le rendre un peu plus léger. Faisons la même chose. C neuf c neuf c neuf c neuf. Je suis juste en train de taper ça ici et je pense que ça a l'air bien. Faisons 1.5 et la bigness. Donc, je vois ici que c'est en fait deux lignes, une à gauche, une à droite s. Alors pourquoi ne pas aller de l'avant et dupliquer cela ici et puis je vais juste faire glisser une tout en maintenant Shift à nouveau vers le milieu et le autre au milieu est bien, donc pas essentiellement deux lignes. Alors pourquoi ne pas aller de l'avant et utiliser le panneau de propriétés ici, hum, pour obtenir la taille exacte est que nous allons pour ici s alors pourquoi ne pas ramener ça à 1 45 ? Je pense que c'est trop petit. Faisons 1 35, puis pour celui-là. Allons de l'avant et faisons aussi 1 35 et puis je vais utiliser Shift, puis les touches fléchées juste pour déplacer les choses rapidement. Les touches fléchées Maj vous aident à déplacer les nuances des objets de 10 pixels à la fois. Sinon, si vous utilisez simplement les touches fléchées, cela fera un pixel à la fois. N' hésitez donc pas à utiliser les touches Maj et fléchées. Mais nous devons déplacer les choses rapidement ou utiliser les touches fléchées pour simplement déplacer les choses vers le bas. Pixel par pixel. Allons de l'avant et alignons ceux ici. On y va. Ajoutons un autre texte en dupliquant celui-ci et ici, en le rendant un peu plus petit dans ou aller de l'avant et juste essayé cela au milieu. Cool. Alors maintenant, nous allons faire avancer les bases. Si vous revenez à notre croquis, nous avons toujours disparu. Le logo manquait encore des termes. Nous n'avons pas d'image d'arrière-plan ou l'icône du tutoriel ici, donc nous reviendrons dans la leçon suivante, en fait terminer ou nous connecter à la page ici 5. Images et superpositions: Bon, donc si vous avez suivi le long jusqu'à présent, nous avons commencé à concevoir notre page de connexion ici. Au fait, si vous n'avez pas suivi les deux dernières leçons, hum, quelque chose que vous pouvez faire, que ce soit dans cette leçon ou dans les leçons futures, vous pouvez aller aux tasses du centre commercial ici, et la ressource est classée de ce projet de conception sur lequel nous travaillons et vous verrez ensuite selon la leçon, la dernière a déposé la dernière chute de Fichman sur laquelle nous avons travaillé dans cette leçon. Alors allez-y et commencez avec ça. Si vous n'avez pas déjà autrement juste retourner dans votre renommée, un fichier et continuer le long et cette leçon, nous allons explorer comment nous pouvons ajouter des images sur Actuellement aller de l'avant et ajouté image d'arrière-plan comme bolas ou logo de la propre application kangourou juste ici aussi. Donc, en général, chaque fois que vous concevez un projet et que vous cherchez des photos à utiliser, je recommande fortement unspool ash ici, comme on dit, la source Internet d'images librement utilisables comme tous les images que vous recherchez sont libres d' utiliser, Um, j'utilise cette personne pourrait des projets, et je vous recommande fortement d'aller vérifier et voir s'il y a une image là-dedans que vous voulez utiliser pour vos futurs projets. J' ai donc utilisé sur Splashed pour télécharger une image. Donc, pour trouver cette image aller à la ressource est le dossier de ce projet sur lequel nous travaillons et encore une fois, vous pouvez trouver cela au tout début de cette section. Alors allez-y et ouvrez les images, trouvez la page de connexion, puis vous remarquerez qu'il y a une image d'arrière-plan ici. Nous. Allons de l'avant et passons à la Fig MMA. Eh bien, avoir votre dossier ici Donc ce fond J. Peg Jigme vous permet d'importer J peg PNG S V G et même pdf Et la façon la plus simple de le faire, c'est juste d'aller de l'avant et de faire glisser votre image directement dans votre fichier de doigt. Cette image est énorme. Alors prenez un peu de temps pour charger. Vous remarquerez que ça va complètement en dehors du cadre. Donc ce que je vais faire, c'est tenir le quart de travail et Ault, puis aller de l'avant et le redimensionner. En ce moment. Vous savez probablement ce que fait le changement. Il conservera la proportion afin que l'image ne soit pas déformée. Mais ce que tout fait fait en fait nous aide à garder la position ou la sentinelle nous de cette image de sorte que lorsque je redimensionnais, il n'allait pas au coin là-bas. Sinon, si je laisse aller de vieux sur seulement Hold shift, vous pouvez voir que c'est loin de mon cadre. C' est pour ça qu'on utilise le décalage et le vieux truc. C' est bien ici. Allons de l'avant et faisons-le tomber et supposons en fait un peu plus, je pense que c'est bon pour l'instant. Une chose à mentionner est que vous pouvez recadrer des images parce que, comme vous pouvez le voir, l'image est énorme et elle couvre plus d'espace, et il doit le faire. Alors, allons choisir l'outil de recadrage à partir d'ici. Et une fois que nous sommes dans l'outil de culture, nous pouvons aller de l'avant et simplement déplacer ces coins bleus ici, et cela nous aidera à obtenir la taille dont nous avons besoin. Il a l'air bien ajusté parfaitement. Um, vous pouvez également accéder aux outils d'image Mawr Ici, vous pouvez ajouter tout cela lorsque vous allez ici à droite et cliquez sur cet outil d'image, et à partir de là vous pouvez modifier votre recadrage. Si vous avez fait une erreur, et que vous voulez la changer maintenant ou vous pouvez faire des choses comme améliorer le contraste. Hum, vous savez, la température de saturation est juste une sorte de simples outils de retouche d'image que vous obtiendrez dans beaucoup d'applications de conception. Il peut également faire pivoter l'image à partir d'ici. Une chose à mentionner ici est qu'en ce moment nous avons des récoltes comme ça parce que c'est comme ça que nous avons recadré notre image. Mais si nous le remplissons, ce que Phil va faire, c'est essayer d'aller de l'avant et de mettre cette image dans la boîte de délimitation que nous avons en ce moment. Si nous le faisons, il essaiera de faire proportionnellement la même chose. Eso parce que cette image d'origine est, um, dans cette proportionnée va essayer de garder cela dans pour adapter le type ici. Tu pourrais faire de la tuile si tu veux en faire plusieurs. Donc c'est vraiment grand. Mais si je le fais, disons 2% ou 3%, il est en fait que cette image se répète. Ça pourrait marcher pour, genre, peut-être un arrière-plan de motifs. Ça pourrait marcher pour, genre, Mais pour ce cas, je pense que crop fera le travail. Donc c'est juste utiliser la culture et puis fermer ça ici. Maintenant, vous remarquerez mes images de fond couvrant tout le reste. Donc, sélectionnons l'image d'arrière-plan ici. Amenez-le jusqu'au bout. Maintenant c'est juste en dessous de toutes mes couches ici, ce que je veux. Je veux également ajouter un trop au-dessus de cette image afin que le premier plan ici ne se fond pas avec l'arrière-plan que nous devons ajouter une superposition. Passe là où il est écrit, Phil, tu verras. ce moment, c'est l'image. Assurez-vous d'avoir l'image sélectionnée par la façon, Puis allez-y et appuyez sur l'icône plus et Phil. Et en ce moment, il nous a donné un Grady int. Donc, si tu veux ajouter un Grady à ton image, tu peux le faire. Mais je veux juste aller de l'avant et choisir solide ici, les superpositions au-dessus de sa photo. Mais on ne voit rien, alors amenons la corde une ville vers le bas pour voir des parties de l'image. Et allons de l'avant et choisissons une couleur plus foncée. On devient noir et une autre capacité est trop élevée ici, alors faisons-le, euh, peut-être 50%. Je pense que c'est bien. Donc là, vous l'avez. Nous avons ajouté notre image à l'arrière-plan ici. Maintenant, allons de l'avant et pas notre logo. Donc encore une fois, à partir de la section de la ressource est, vous verrez que nous avons un dossier de logo ici. Allons de l'avant et traînons sa couleur ici et continuons à utiliser le décalage Ault et redimensionnons cela à nouveau. Je pense que 80 sur 80 devrait être bon. Je vais juste zoomer ici un peu et voyons. Utilisez ici le centre horizontal de la ligne, qui est la deuxième option dans les outils de ligne. Un double centre automatiquement votre image à l'intérieur de votre cadre. Je vais le faire sauter un peu, peut-être ajouter un espacement de 70 vers le haut et ensuite en utilisant T. Je vais ajouter ah, texte pour mon logo. Faisons le kangourou propre. Ensuite, assurez-vous de tout sélectionner, puis de passer la taille du texte à 26. Et je pense que ça a l'air bien. Changer le remplissage deux blanc Ici. Je vais juste aller de l'avant et centrer ça, avec le logo ici, chose qui a l'air bien. Maintenant, vous avez peut-être remarqué que tout est un peu flottant tout seul. Rien n'est vraiment lié ici, euh, et quel chiffre nous permet de faire dans les couches, juste les choses de groupe qui sont pertinentes ensemble, sorte que si vous apportez des changements à eux ou si vous voulez les déplacer, par exemple, disons que je veux déplacer ce champ de messagerie au lieu de simplement déplacer la boîte et ensuite déplacer le texte. Je peux tout simplement aller de l'avant et les regrouper et les déplacer ensemble ou appliquer des styles sur toutes sortes de choses différentes. Donc, pour ce faire, sélectionnez votre rectangle. On tient des quarts de travail comme ton texto. Maintenant, vous pouvez voir que j'ai tous les deux sélectionné parce que les deux ont ce petit fond teinté bleu . Utilisez la commande G ou Jeon Windows contrôlé pour regrouper les choses. Faisons la même chose pour le mot de passe pour le bouton de connexion ici. Faisons la même chose pour le séparateur que nous avons ici Sénat avec email inscrivez-vous à l'école. Je pense que tout est en groupe, sauf mon local ici. Alors faisons la même chose ici, c'est bien, allons de l'avant et renommons tout ça. Vous pouvez renommer des groupes en double-cliquant sur le panneau des calques ici, alors faisons le logo. Allons de l'avant et juste une sorte de convention suivie ici pour ajouter une hiérarchie qui a du sens . Alors allons de l'avant et placez d'abord notre groupe un, puis notre groupe à qui est le mot de passe Groupe trois pour par six. Et puis nous allons renommer le reste du mot de passe e mail se connecter. Mais dans le diviseur, je dois faire inscrire le bouton e-mail inscrit à Google whoops, mais dans et la liste. Allez-y et nommez ceci ou arrière-plan. Et en fait, enfermons son rôle pour ne pas le déplacer accidentellement. Cool. Je pense que c'était bon pour l'instant. Maintenant, nous savons comment ajouter des images. Revenons et ajoutons quelques icônes parce que, comme vous pouvez le voir dans mes esquisses ici, j'ai quelques icônes pour le tutoriel pour l'email et le mot de passe. Hum, et ensuite on ajoutera le reste des trucs pour la page de connexion et on finira dans la leçon suivante. 6. Ajouter des icônes à des icônes: Bon, donc nous avons ajouté des images dans notre page de connexion ici. Alors allons de l'avant et ajoutons les icônes. D' après ce que j'ai dans mon croquis ici, on va ajouter trois icônes, une pour la page éditoriale et une pour les champs email et mot de passe ici. D' après ce que j'ai dans mon croquis ici, on va ajouter trois icônes, Et alors pourquoi ne pas aller de l'avant et juste brosser un peu les choses pour aider à terminer notre page de journalisation ici ? Retournons à la Fig MMA. Maintenant, je veux vous montrer une ressource vraiment cool est pour les icônes que vous pouvez obtenir. Hum, il y a un site qui s'appelle l'icône plate point com. Je l'utilise pour beaucoup de mes projets. Comme vous pouvez le voir ici, ils ont près de trois millions d'icônes vectorielles que vous pouvez utiliser dans plusieurs formats. PNG SPG Photo shop sur. C' est génial parce qu'ils sont complètement libres d'utiliser, bien qu'ils vous demandent de donner du crédit à l'artiste maintenant, ils ont des options de prix où vous pouvez vous abonner et ne pas avoir à les créditer, et vous avez accès à beaucoup plus icônes aussi. Cool. Donc, en utilisant l'icône plate, j'ai téléchargé quelques icônes pour la page de connexion. Alors pourquoi ne pas aller de l'avant et les trouver dedans ? Notre ressource est pour ce projet allant aux icônes, puis vous verrez la page de connexion ici, donc ils sont au format SPG maintenant. Vous pouvez certainement importer des icônes de sélection PNG et J dans votre projet est faible, Hum, bien que ce ne soit pas recommandé parce que vous n'avez pas beaucoup de contrôle sur, par exemple, le remplissage ou être capable de faire des ajustements aux icônes. L' avantage d'une icône de type SVG est que vous pouvez les redimensionner sans avoir à vous soucier de la pixélisation des icônes. Contrairement à une icône PNG, qui est essentiellement rast arisé un sens qu'il a un standard en hauteur. Et si vous essayez de rendre un Nikon plus grand que cette résolution, il commencera à être pixellisé. Donc, je recommande d'utiliser SPG, et c'est là que nous allons faire pour ce projet aussi. Hum, donc la dernière leçon nous avons traîné des images dans notre figue MMA. Nous pouvons faire la même chose ici, mais juste pour cela, je vais vous montrer une autre méthode que vous pouvez insérer des images aussi, ce qui est assez soigné. Cela fonctionne assez bien pour les icônes est faible. Revenons à la Fig Mahir. Vous pouvez également placer des images dans votre fig mes fichiers en allant ici aux outils de forme et puis vous voyez qu'il y a place image. Ou alternativement, vous pouvez appuyer sur la commande Shift K ou Shift control K et Windows, et il va de l'avant et ouvrir un navigateur de fichiers pour vous que vous pouvez utiliser. Alors ici, je vois comment mes trois icônes Alors quoi ? Nous allons de l'avant et il suffit de les sélectionner tous sur une ouverture rapide. Maintenant, l'outil d'image de lieu vous donne un tas d'options. Vous pouvez soit aller de l'avant et placer tout et il placerait toutes les images ici, hum, dans mon cadre. Ou je peux alternativement glisser et les placer comme je vais long social, Vous comment cela fonctionne. Alors n'hésitez pas à le faire en faisant simplement glisser et maintenez à nouveau le décalage pour limiter les proportions . Et puis une chose que vous pouvez faire est de maintenir de l'espace de sorte que pendant que vous placez votre icône, vous pouvez réellement les déplacer. Alors pourquoi ne pas juste, hum, hum, mettre ça ici et puis allons de l'avant et dessiner tout en maintenant le quart de travail à nouveau. Donc celui-ci a l'air d'un mot de passe. Donc ça va aller ici. On va les redimensionner et les déplacer après que ce soit juste pour avoir une idée à nouveau. Je vais tenir le poste et faire l'e-mail. Un ici est bas. J' ai juste lâché. Et là, vous l'avez. Vos trois icônes n'ont pas été ajoutées, et donc je pense que nous sommes prêts à aller de l'avant et à faire quelques semaines à ces deux icônes ainsi qu' à d'autres choses dans notre page de bagage. Alors, allons travailler d'ici et descendre à la première chose. Allons-y et sélectionnez notre icône de tutoriel ici, puis continuez. Ici, vous verrez qu'il n'y a pas de Phil mais plutôt de couleurs de sélection. Et c'est parce que lorsque vous avez un groupe qui par défaut et S V. G. Ah, sera un groupe de vecteurs ici à l'intérieur de votre panneau de calques. C' est pourquoi au lieu du remplissage, il apparaîtra sous forme de couleurs de sélection. Il fera la même chose, cependant, cependant, alors allez-y et sélectionnez cela, puis donnez-lui un remplissage ou une couleur de sélection blanc cassé. Allons de l'avant et redimensionnons cela à peut-être 35 ans. Je pense que ça a l'air bien. Je vais y aller et ajouter un guide. C' est, Ah, un guide horizontal. Ici, vous pouvez faire, comme 36. Il suffit d'aller de l'avant et s'il vous plaît mon image dans le coin de leur Ça a l'air bon. Maintenant, allons-y. Allons zoomer. Allons-y et double-cliquez ici. Vous remarquerez peut-être que lorsque vous avez quelque chose de groupe, vous devrez double-cliquer dessus pour commencer à changer des éléments à l'intérieur d'un groupe. Donc ici, j'ai tout mon groupe. Mais si je veux changer quelque chose avec le texte de l'e-mail, je dois double-cliquer ici, puis sélectionner ce texte e-mail. Alors je vais faire ça. Allons de l'avant et redimensionnons cela à 25 peut-être même 22. Maintenant, cette icône ici ne fait pas partie du groupe encore eso pour le faire. Allez-y et faites glisser cette icône pour l'e-mail dans le groupe de messagerie ici, et maintenant je peux réellement aller de l'avant et maintenez le décalage et sélectionnez cela ensemble et même l'arrière-plan de l' e-mail ou le champ de texte de l'e-mail et inutilisé les centres de ligne verticale. Et ça va aller de l'avant et tout centrer pour moi. Je vais changer le texte ici à 14 et changer la couleur, aussi. Une couleur plus claire car c'est le texte de l'espace réservé. Ce n'est pas le vrai courriel. Je vais utiliser la couleur A pour A pour un quatre afin que vous puissiez insérer ce code dans votre champ ici, et cela vous donnera la même couleur si vous voulez l'utiliser, et ensuite nous allons enfin espacer les choses correctement ici. Essayons de faire 15 ici et puis à 15. En fait, on en fait 10 là. Ça a l'air bien. Faisons la même chose ici. Placons d'abord cela dans le groupe de mots de passe. Assurez-vous de le mettre à l'intérieur du groupe et non à l'extérieur. Donc, pour vous assurer que, par exemple, cette couche est à l'intérieur du groupe, il devrait y avoir une petite indentation ici. Si vous le manquez par accident, vous pouvez aller de l'avant et, hum, planer au-dessus du groupe, et ensuite il le placera définitivement dans ce groupe. C' est juste un double rapide ici. Changez cela à 25 aussi, ou nous avons eu un 22. Allons de l'avant et sélectionnons tout ici au centre d'eux. Je viens de déplacer ceci jusqu'à ce que nous ayons Sina cette application de remplissage d'un quatre un 484 Il suffit de déplacer ceci afin qu'il corresponde à ce poste dans la position de l'e-mail. On dirait que j'ai oublié de changer mon texte à 14. Et encore une fois, je vais centrer ça à nouveau parce que lorsque vous changez la taille du texte, cela changera l'alignement vertical. Alors assurez-vous que vous utilisez toujours que Lyman Tools pour re juste les choses. S' ils se déplacent, on y va avec du changement. Ceci à 14 est faible. Allons par ici. Allons de l'avant et capitalisons ceci ou texte ici. Et pour ce faire, allez à la section de texte de l'de vos propriétés. Cliquez sur les trois points et ici, dans votre avis, vous avez un tas de personnalisations différentes que vous pouvez faire. J' étais intéressé par le cas des lettres ici pour faire le cas en majuscules, et maintenant c'est en majuscules. Allez-y et changez le rempli en blanc, puis je vais sélectionner les deux lignes et effectivement ramener leur ville de paie vers le bas à Essayons 50%. On peut même faire quelque chose comme 35. Nous voulions être visibles, mais en même temps subtils. Je pense que c'est bien. Peut-être juste bump taille de texte de ceci à 14 aussi. Restez cohérent. Allons de l'avant et sélectionnez tout ici et aussi faire leur ligne. Ça a l'air bien. Et puis c'est redimensionner la pièce à 14 et 14 ici. Enfin, allons nous assurer qu'à nouveau nous alignons les choses correctement. J' ai oublié de le faire pour certains boutons, alors retournez. Assurez-vous juste que tout est aligné de façon critique, et je pense que ça a l'air bien ici. Si tu reviens au croquis, ona presque fini. Si tu reviens au croquis, on Nous avons juste besoin d'un bouton sur les termes ici ou d'une section sur les termes. Donc on va juste faire un texto au lieu d'un autre bouton, quelque chose. Nous avons déjà trop de boutons ici. Alors nous allons faire Allons de l'avant et juste Presti ouvrir une année de texte et de bonnes Conditions de service. Allez-y et changez ça en blanc ici et on dirait que j'ai complètement foiré le boîtier ici. Donc, là, nous allons, conditions de service, et nous pouvons même faire et politique de confidentialité. C' est généralement ce que vous voyez pour rendre certaines parties du texte en gras. Sélectionnez simplement la pièce que vous voulez en gras, puis allez de l'avant et utilisez la commande. Soyez comme un raccourci, ou vous pouvez réellement y accéder à partir d'ici aussi et le rendre gras. Faisons la même chose ici avec les conditions de service. Rendez-le en gras. Ça a l'air bien. Faisons en sorte qu'il soit centré. Ok, c'est centré. Et faisons en sorte que nous maintenions un espacement. 36 du bas est bas. Donc maintenant, si je fais un zoom arrière, vous verrez que nous avons presque fini. Prochaine leçon. Nous allons revenir et parler de couleurs et de certaines couleurs dans l'année parce que, comme vous pouvez le voir, nous n'avons pas de couleurs à part le logo eso. Nous allons essayer d'utiliser la couleur locale, qui est une orange, pour choisir une belle palette de couleurs pour notre up dans la prochaine leçon. 7. Choisir un système de couleur: d' accord. Nous allons donc choisir un jeu de couleurs pour notre application parce que, comme je l'ai mentionné au tout début de la section Ah, le client n'a pas spécifié de schéma de couleurs, donc nous allons les aider à en construire un dans cette leçon et ensuite apprendre un peu plus sur les schémas de couleurs et les styles de couleurs dans la figue MMA. Cool. Donc inclus dans la ressource est de cette leçon sera un petit texte déposé qui vous donnera un modèle que j'ai mis ensemble pour notre schéma de couleurs. On va l'utiliser dans une seconde. Quelques bonnes lectures de couleur. Alors allez-y et donnez ces articles ou lisez. Si vous voulez en savoir plus sur les couleurs et comment les appliquer dans votre projet, et c'est aussi vraiment cool. Il y a un tas de couleurs. La ressource est donc que tous ces sites vous aident à construire un jeu de couleurs pour votre projet. Je sais que je ne cesse de dire le schéma de couleurs, et vous ne savez peut-être pas exactement quel est le schéma de couleurs, mais essentiellement, les couleurs sont venues. Je sais que je ne cesse de dire le schéma de couleurs, et vous ne savez peut-être pas exactement quel est le schéma de couleurs, mais essentiellement, C' est un peu comme une palette, non ? Lorsque vous êtes artiste, vous avez une palette de couleurs différentes que vous utilisez dans votre design ou dans votre art, donc c'est la même chose. n'y a que tellement de couleurs que nous pouvons utiliser et qui ont l'air bien ensemble. C' est donc ce qu'est un jeu de couleurs, un tas de couleurs que nous pouvons utiliser pour un projet sur. Nous nous en tenons à eux et créons de la cohérence avec eux et nous assurons qu'il y a aussi du contraste là-bas. Donc ça a l'air bien et c'est lisible et tout ça. Alors allons de l'avant et ouvrons cette seconde ressource ici. J' aime vraiment ça. Cela nous aidera à trouver un schéma de couleurs pour notre projet, donc je viens de l'ouvrir. Ici. Ça s'appelle les couleurs, depuis Bo. Essentiellement, il a un tas de différentes palettes de couleurs ou schémas de couleurs que vous pouvez utiliser pour vos projets. Il y en a des très gentils ici, vraiment croustillants et pointus, , et il y en a d'autres qui sont plus légers, selon le projet que vous utilisez, peuvent certainement trouver de l'inspiration ici, ou même utiliser les mêmes palettes dans vos projets. Ils ont un tas d'autres trucs. Inspiration, um, freebies, couleurs de marque. Si vous voulez voir vos marques préférées et même quelques Grady Antzas vraiment cool , eh bien, euh, nous allons revenir dans le robinet de palette de couleurs , eh bien, euh, euh, . Allons de l'avant et choisissons un schéma de couleurs qui a du sens pour notre projet, puisque le kangourou propre a à voir avec l'eau de nettoyage, vous savez ? Donc, euh, ces couleurs air généralement associées à la couleur bleue. Hum, maintenant je vois dans le projet ici. Ah, leur logo est déjà orange. Donc, le bleu et l'orange iront vraiment bien ensemble. Euh, oui. Un bon exemple de cela pourrait être ici où nous avons une sorte de bleu et d'orange. Je pense que ce que je vais faire, c'est que je vais utiliser cette palette ici, mais alors allez-y et ajoutez-y des couleurs personnalisées. Alors allons de l'avant et copions certaines des couleurs. Mais avant de faire ça, je vais aller de l'avant et ouvrir ce lien dont je t'ai parlé. Allez-y et ouvrez ce lien ici. Émis vous conduire directement à ce fichier où j'ai mis en place un modèle de jeu de couleurs que vous pouvez utiliser. Il a accès, vous avez accès à ces liens. Voici bien, si vous pouvez ouvrir cela en ce moment, nous étions juste sur le deuxième site ici très rapidement. Il s'agit essentiellement de votre palette de couleurs que vous allez utiliser pour votre projet. Nous avons une couleur primaire qui est généralement la couleur de la marque, couleur secondaire et ensuite pour accentuer les couleurs qui utiliseront, mais pas aussi souvent qu'une secondaire dans les couleurs primaires. Et puis nous pouvons faire un texte primaire et secondaire couleurs aussi bien. Donc, pour l'instant, allons de l'avant et copions simplement ça. Choisissons tout ici. Tout est déjà à l'intérieur d'un groupe, ce qui est agréable. Tout en ayant ces groupes comme ça aller de l'avant et appuyez sur commande, voir ou contrôler. Voir sous Windows sur, puis dirigez-vous vers votre propre projet. Je vais juste le coller juste au-dessus de ma page de connexion pour l'instant, mais plus tard organisera cela dans une autre section. Je vais juste le déplacer ici pour l'instant. Supprimons simplement les modèles et le texte ici, puis allons de l'avant et lui assignons quelques couleurs. Donc, la première couleur que je vais attribuer ah sera probablement une couleur que tous utilisés comme une couleur secondaire . Alors allons de l'avant et doublons vite ici. Aussi une autre façon, si vous avez un groupe comme celui-ci, et que vous voulez sélectionner Ah, un objet à l'intérieur de celui-ci sans avoir à double-cliquer dessus. Vous pouvez simplement maintenir la commande, puis aller de l'avant et sélectionner un objet à l'intérieur. C' est une façon assez soignée de sélectionner les choses au lieu d'avoir à doubler rapidement tout le temps. Donc maintenant j'ai cette sélection, Hum, ce que j'essaie de faire ici est attribué ce genre de couleur orange, ou je vois qu'il a plusieurs couleurs orange, donc on va utiliser la couleur ici pour remplir cet angle de rupture. La façon la plus simple de le faire est de garder le contrôle, voir, puis vous obtiendrez un petit sélecteur de couleurs que vous pouvez même voir dans le coin supérieur droit de votre écran, ce qui vous permettra de le choisir. Remplis. Allons par ici. , Maintenant,vous remarquerez qu'il y a plusieurs oranges ici que nous pouvons choisir. Allons-y et allons juste ici où sont les jambes du kangourou et choisissez cette orange. C' est cool ? Une autre façon que vous pouvez également ajouter du remplissage en utilisant un sélecteur de couleur ou sur je dépose sélecteur pour ouvrir. Et puis en utilisant cela, j'ai laissé tomber l'outil d'ici aussi. Revenons aux couleurs. Inspo. Et j'aime vraiment les nuances de bleu ici, quelqu'un pour utiliser ça pour le reste de ma palette de couleurs. Et j'aime vraiment les nuances de bleu ici, Donc, nous allons faire une copie ici en cliquant simplement sur le bleu et puis revenons à la primaire à nouveau. J' ai sélectionné en utilisant la commande sur et choisissez cet angle droit, et ici vous verrez juste à côté de votre couleur de remplissage. Il y a un petit texte qui est essentiellement le code hexadécimal de cette couleur, donc en ce moment il est blanc et blanc a un code hexadécimal de six efs. Donc, si vous voulez aller de l'avant et remplacer cela en utilisant la commande V ou le contrôle via Windows sur touche Entrée, cela va accélérer cette couleur juste là pour vous. Je vais vraiment changer ce texte aussi juste que nous pouvons l'utiliser. Et disons qu'il y a un développeur qui veut utiliser cette couleur. Vous savez quel code hexadécimal il représente. Faisons la même chose pour la couleur orange. Allons-y et copions ce code hexadécimal pour entrer ici. Revenons aux couleurs. Inspo, prenez ce bleu ici, peut-être, et ajouté à ce champ ici et aussi du texte andan. Enfin, je veux faire une couleur claire que nous pouvons utiliser pour peut-être l'arrière-plan de certaines parties de l' application. Il suffit de double-cliquer ici à nouveau, puis de changer cela aussi. Et nous l'avons là. Nous avons, ah, belle palette de couleurs que nous pouvons utiliser pour notre projet. Um, nous allons assigner les couleurs du texte secondaire texan plus tard, mais pour l'instant, continuons et nous concentrons sur l'application de ces couleurs. 8. Configurer des styles de couleur: d' accord. Maintenant que nous avons créé notre palette de couleurs pour le haut, vous voulez aller de l'avant et ajouter réellement les couleurs de ce que l'on appelle le style de couleur, qui nous permet de réutiliser les mêmes couleurs tout au long de notre projet afin que nous puissions facilement changer ces couleurs si nous décidons à l'avenir et ne pas avoir à changer tous les objets associés à cette couleur. Alors allons de l'avant et sélectionnez la première couleur ici. Je vais tenir la commande ici et cliquer dessus où il est dit, Phil, tu vas aller ici à l'endroit où cette icône par conséquent point ici appelée Style. Allez-y et cliquez dessus et je vais de l'avant et je crée un style en utilisant l'icône plus et nommez-le Primaire et je vais de l'avant et je crée du style. Et comme vous pouvez le voir, j'ai ce style de couleur de bleu. Ajoutons le reste des couleurs ici aussi. On va utiliser la commande rapidement sur cette orange. Maintenant, passez au style Ici, Créer un style secondaire. Même chose pour cette couleur d'accent. Excellent accent de style. Un. Vous obtenez l'idée maintenant accent à et là vous l'avez. J' ai ce schéma de couleurs ici. Alors, comment applique-t-on ça à nos boutons ? Allons à notre page de connexion. Allons de l'avant et utilisez la commande et cliquez sur l'arrière-plan de ceci ici. Sinon, si vous sélectionnez l'ensemble du groupe, vous devrez lui ajouter la couleur ici dans les couleurs de sélection. Donc, les deux fonctionnent. Allons de l'avant et choisissons tout le groupe. Descendez aux couleurs de sélection, puis à partir d'ici vous verrez les styles. Alors allez-y et ouvrez le style. Et là, vous l'avez. Vous avez vous-mêmes ici que vous pouvez utiliser sur ce bouton. Je pense que j'aurais utilisé le bouton primaire. Allons de l'avant et changez la couleur du texte orteil blanc ici. Et puis passons à notre prochain bouton ici. Inscrivez-vous avec e-mail, puis de nouveau ici. Mais sélectionnez un style hors primaire. Même chose pour le texte blanc pour le Sénat avec Google Button. Hum, je vais aller de l'avant et en fait attribuer un remplissage de blanc. Je pense que ça a l'air bien. Allons de l'avant et appliquons le même style à nos icônes ici pour aller de l'avant et double-cliquer. Assurez-vous de sélectionner l'ensemble du cadre ou le groupe. Ici, laissez-moi aller de l'avant et changer la couleur de sélection en utilisant le style de couleur à la primaire. Même chose pour l'email. Primaire. Maintenant, c'est là que la magie se produit. Donc maintenant, disons tout d'un coup que vous changez d'avis et que vous voulez aller avec une couleur violette . Vous pouvez simplement choisir l'un des éléments en utilisant cette tête de style de couleur sur ici, allez-y et cliquez dessus, puis choisissez le style d'édition et vous pouvez aller de l'avant et maintenant changer cette couleur. Eso Faisons peut-être une couleur pourpre. Maintenant, comme vous pouvez le voir, tout dans le projet utilisant cette couleur change, et vous pouvez imaginer à quel point ce serait cool si j'avais plusieurs pages conçues ici. Mais même ici au sein de ce groupe, c'est super cool. Nous pouvons aller de l'avant et jouer avec ce Ah, et changer notre couleur primaire si nous le choisissons. Mais en fait, je vais juste annuler et revenir à notre couleur principale ici et là, nous l' avons . C' est des styles de couleurs pour vous. Je pense qu'on en a assez fini ici. Je vais juste faire quelques touches ici pour juste améliorer ça un peu plein, si tu veux. Sinon, dans la leçon suivante, vous pouvez également télécharger la fig ma chute que nous avons jusqu'ici et commencer par cela. Mais allons de l'avant et de l'améliorer. Allons juste zoomer ici. Amenez un peu ce bouton vers le bas. Allons de l'avant et augmentons l'espacement entre eux à cinq, et nous avons en fait oublié d'ajouter quelque chose ici. Il y a généralement oublié le bouton de mot de passe que je vais ajouter comme un texte. Donnez-lui une couleur blanche et changez le tube d'épaisseur. Attendez. Allons-y et placons ça ici qui a l'air bien. Je vais déplacer ce séparateur un peu jusqu'à l'avoir. Peut-être que c'est espacement. Essayons de faire 55 pixels ici, puis faisons des bosses et essayons d'obtenir la scène. J' utilise tout ici à nouveau pour voir l'espacement entre les différents objets avec ceux que j' ai sélectionnés. C' est bien. Ajoutons un peu plus d'espacement entre ceux-ci et faites-le cinq aussi bien. Allons zoomer. Et je pense que ça a l'air plus propre maintenant. Cool. Donc maintenant, nous avons une page de bagage complétée. Je pense que ça a l'air plutôt sympa. Et je pense que maintenant nous sommes prêts à commencer à entrer dans notre page de tutoriel, euh, et conçu ça ensemble. 9. La page La Tutorielle: Bon, donc nous avons notre page de connexion. Maintenant, on. Commençons à concevoir notre page de tutoriels. Revenons à mon croquis juste pour voir ce qu'on a ici. Je pensais qu'on devrait faire un fond flou de cet écran ici. Donc, quand l'utilisateur appuie sur le tutoriel, il allait juste de l'avant et brouiller l'arrière-plan d'ici, puis un peu pop up ici avec le titre et le corps du texte ici. Peut-être un petit vecteur que nous pouvons utiliser pour montrer cette étape. Je serai plutôt cool. Alors commençons à concevoir ça. Donc, dans cette leçon, nous allons jouer avec des effets pour ajouter une sorte de flou d'arrière-plan à cette page et ensuite construire sur le dessus. Ah. Donc ce que nous devons faire est en fait copier tous les éléments ici dans notre tutoriel aussi, et vous verrez pourquoi dans une seconde, allons-y, allons-y, orteils sont log et frame ici, euh, et en fait, Allez-y et sélectionnez tout ici. Allez-y et utilisez la commande. Voir ou contrôler. Voir, pour copier, dirigez-vous vers votre page éditoriale et assurez-vous que vous avez sélectionné la page éditoriale , puis faites la commande V, puis allez-y et utilisez réellement la commande G pour regrouper tout cela en un seul élément. De cette façon, nous avons juste un groupe simple ici. Je vais le verrouiller pour ne pas bouger accidentellement les choses. Et maintenant allez-y et créez un rectangle en appuyant sur le R 2 depuis le coin supérieur jusqu'au bas. Donc, une fois que vous avez ce rectangle ici, allons de l'avant et changez le Phil en noir. Et puis changeons l'opacité pour, hum, pensons que 55 % ont l'air bien. Maintenant, passez aux effets, créez un nouvel effet en appuyant sur le signe plus ici, puis cliquez sur l'ombre portée et changez cela en flou d'arrière-plan. C' est maintenant, comme vous pouvez le voir, il ajoute un joli flou d'arrière-plan à mon angle droit ici sur. Donc, ce que cela fait est qu'il brouille tout en dessous parce que ces couches au-dessus de l'ensemble du groupe que nous avons créé à partir essentiellement de cette page ici qui vient de l'avant et a tout soufflé sous ce rectangle. S' il joue des choses au-dessus de ce rectangle. Ça ne sera pas floue, c'est ce que nous voulons. Vous continuez le flou de votre arrière-plan en cliquant sur cette icône ici et changeant le nombre ici. Donc en ce moment, c'est quatre, mais on peut faire 10 nouveaux 15 à travers plus de flou. Je pense que pour nous, je vais en faire huit pour l'instant, je pense que huit travaillent, hum, ou même six. Maintenant, allons de l'avant et créons un rectangle pour l'arrière-plan de mon tutoriel. C' est notre traînons un étant basé sur mon croquis. Quelque chose comme ça aurait l'air bien. Juste comme là-bas. Utilisez l'outil de ligne ici pour vous assurer qu'il est centré. Changons la couleur de remplissage en Blanc. Allons de l'avant et arrondissons les frontières pour faire 25 pixels chose qui semble bon et non, nous avons besoin de textes ici, un pour les titres. Faisons T et taper et titre lorsque nous définissons la police ici à 22. Allons-y et il suffit de sélectionner les deux et d'utiliser cet outil Lyman. Allons de l'avant et il suffit de dupliquer ce vieux corps d'impôt ici et allons de l'avant et changer le taureau à une taille normale et téléphonique de 14. Maintenant, vous remarquerez que si je commence à taper ici, tapez quelque chose de aléatoire ici, le texte continuera et encore et encore. Je n'étais pas ce que nous voulons pour notre tutoriel pour tutoriel. Nous voulons un petit type de paragraphe de texte ici. C' est là que votre boîte de délimitation des textes entre en place. Si vous êtes de taille ou de texte ici maintenant, vous pouvez choisir quelle sera la largeur de celui-ci. Et puis maintenant vous pouvez aller de l'avant et juste centrer cela ici juste une fois de plus, assurez-vous que tous ces air centrent ensemble. Maintenant, si j'ajoute plus de texte ici, il sera lié par cette boîte. Donc, dans notre ressource est que nous avons cette application. Notes. Démarrez txt. Allez-y et ouvrez ça. Vous remarquerez que nous avons des étapes du tutoriel ici, donc le texte des premières étapes est ici. Alors allons de l'avant et copions simplement ça. Et entendre ça a l'air un peu mieux. Allons de l'avant et redimensionnons cela et encore une fois, assurez-vous qu'il est centré. Allons de l'avant et faisons un centre d'alignement pour le texte. Je pense qu'on peut faire un numéro de téléphone de 16 pour que ça paraisse un peu mieux. Et pour le titre, allons-y et mettons-le simplement à parcourir. Allons de l'avant et regroupez tout cela ensemble en sélectionnant tout ici. Commandement G. Assurez-vous qu'il est à nouveau centré. Allons-y et amenons-les un peu vers le bas. Allons de l'avant et ajouter un autre rectangle pour notre mais ici 2 55 pour la hauteur et lui qui semble bon. Je veux juste m'assurer que cela correspond aussi à celui de mon bouton. Je vais changer mon bouton Phil en utilisant des styles, je vais changer l'arrière-plan du bouton en bleu. Maintenant, allons de l'avant et ajouter un rayon de bordure de huit ici, puis allez-y et ajoutez un texte à l'intérieur. Pour la prochaine, Changer la couleur pour les blancs et juste aller de l'avant et le centre de ces ensemble. Regroupez-les ensemble et passons à l'intérieur et centrons le texte ici. Ça a l'air bien. Maintenant, allons de l'avant et ajoutons quelques icônes vectorielles. Donc encore une fois, dans la ressource est que si vous allez aux icônes et allez dans le tutoriel ici, vous verrez que nous avons trois vecteurs que nous pouvons utiliser pour nos pas, Hum, alors allons de l'avant et en fait juste les traîner tous dans mon figment dossier ici. Si vous retournez en arrière, placez-les tous côte à côte. Quelle école ? Allons de l'avant et redimensionner d'abord qui a son énorme retour ici. Je pense que tu fais un peu plus gros que ça. Allons de l'avant et écartons ceux-ci du chemin pour l'instant. Maintenant, gardez à l'esprit les icônes vectorielles comme SV G, hum, apparaissent comme des cadres dans votre projet, alors assurez-vous de le traiter comme un cadre lorsque vous vous déplacez. Donc, allons de l'avant et trouver ce cadre pour cette icône ici et effectivement le faire glisser à l'intérieur de notre groupe ici. Donc, si je fais défiler tous voir Tutoriel et puis c'est notre groupe, juste s'il vous plaît mettre à l'intérieur d'ici. Et puis tout en tenant le quart de travail, je vais les centrer tous les deux. Je vais m'assurer que c'est je pense qu'on peut ajouter un peu plus d'espacement à notre texte ici, et je pense que ça commence à paraître bien. Alors, qu'est-ce qu'on va de l'avant et qu'on ajoute du style à l'icône ici ? En choisissant ou les styles de couleur et peut-être en choisissant l'option secondaire, puis pour notre titre ou le texte ici. Changer le fait aussi. Le bleu. Peut-être. Je pense qu'on peut même le rendre un peu plus grand. Essayons 24, puis allons de l'avant et sélectionnons ces deux ensemble pour les centrer et assurez-vous que tout ici est également centré. On dirait que c'est là que vous l'avez. C' est notre tutoriel pour créer les deux dernières étapes lorsque nous allons de l'avant et sélectionnez cette image entière ici et faire la commande D deux fois pour le dupliquer deux fois. Et puis nous allons juste zoomer comme ces deux images et simplement les déplacer juste en dessous et faire la même chose ici. Alors allons de l'avant et renommons ce tutoriel 12. Étape deux renommé ce tutoriel voulu Étape trois. Et puis, bien sûr, faisons le tutoriel. Étape 1. Maintenant, nous allons aller de l'avant et juste changer rapidement le contenu ici. Alors faisons à Revenons à notre fichier texte ici et on dirait que celui-ci est à propos de la requête . Collez ce texte ici, puis continuons et utilisons la commande X ou contrôlez les fenêtres Exxon pour couper cette icône hors de là et la remplacer par celle-ci. Je vais juste cliquer où il est, puis aller de l'avant et juste rythmé juste là en utilisant la commande V ou le contrôle V. Maintenant, il semble qu'il l'a mis à l'intérieur du cadre de l'autre. Alors allons de l'avant et sécher, sortons du cadre de l'autre icône et puis menons l'autre icône. Et nous ne voulons toujours ajouter Appliquer le Phil orange, et cela semble bon pour une étape, aussi. La prochaine étape est notre troisième étape. Retournez ici, renommé celui-ci pour nettoyer les votes. Allez-y et collez-la ici. Choisissons tout et le texte ici et centrons ça le long. Et puis, bien sûr, allons à notre dernier Lecter ici et en utilisant à nouveau la commande X, collez-le ici et puis en nous assurant que c'est en dehors de cela, supprimant le directeur de la boutique et en changeant le style, aussi. Stockage. Allons de l'avant et modifions le texte ici pour faire parce qu'à ce stade, les utilisateurs ont terminé le tutoriel, donc ils vont être faits avec. Histoire loin. Donc, nous l'avons là. Cette étape sartorial une étape deux et même l'étape trois 10. Composants: Bon, donc dans cette leçon, nous allons parler de quelque chose de très utile dans les composants cultes de la figue MMA. Jusqu' à présent, dans nos pages de tutoriels, nous avons créé plusieurs cartes essentiellement pour chaque étape du tutoriel, droite, que l'utilisateur passe de l'étape numéro un jusqu'à l'étape numéro trois. La vue, cette petite carte de tutoriel. Um, d'où ils peuvent obtenir leurs informations sur le fonctionnement de l'APP. Disons maintenant que je me rends compte que je veux aller de l'avant et changer le nous arrondi de ce contexte ici. Donc, bien sûr, vous pouvez aller ici et disons à partir de 25 Begin a dit que 15. Mais maintenant, regardez ce qui se passe. Notre tutoriel, étape numéro deux et l'étape numéro trois ont toujours un rayon d'angle de 25. C' est parce qu'il n'y a vraiment aucune relation entre chacune de ces cartes ici, mais quels composants nous permettent de faire ? Il est en fait aller de l'avant et créer une instance de ces cartes ou vraiment tout ce qui va avoir un style très similaire ou une configuration vraiment similaire, tout comme nous le faisons ici, juste , même si le texte pour chaque carte est différent. Mais en général, nous avons beaucoup plus de choses en ce qui concerne le style ou la façon dont les éléments sont placés. Et à moins que nous allions apporter cette modification à chaque écran individuellement, mais nous ne pourrons pas l'obtenir autrement. C' est là que les composants entrent en jeu. Je vais aller de l'avant et défaire ce rayon de frontière ici. Assurez-vous qu'il est encore 25 ans. On y va, et maintenant on va convertir ça en un composant, et tu verras comment c'est utile. Donc, encore une fois, composants peuvent être n'importe quelle partie de la conception que vous voulez dupliquer mur, en maintenant un certain style ou une certaine caractéristique de sorte que si à tout moment vous avez décidé de changer qui a changé le style, changé les caractéristiques de cette composante, vous pouvez le faire en un seul endroit et ne pas avoir à le faire à plusieurs endroits. Si vous avez regardé la leçon où nous avons fait les styles de couleur, c'est très similaire aux styles de couleur où s'il fait juste ce changement ici, tous nos boutons et éléments utilisant ce style de couleur changeront au lieu de nous avoir à aller dans un par un et de les changer. Alors allons de l'avant et sautons dans et en fait faire un composant alors commencez avec la carte ici sur le tutoriel. Étape numéro un. Si vous n'avez pas suivi le long, assurez-vous d'aller dans le dossier Resource is ici, que vous pouvez récupérer à nouveau dès le début de cette section, puis aller dans maquettes et trouver la leçon sur laquelle vous êtes. Et vous pouvez aller de l'avant et ouvrir le fichier et continuer avec nous. Sinon, nous allons entrer. Je vais aller de l'avant et zoomer ici. Allons de l'avant et sélectionnons ce groupe. Et comme vous vous en souvenez peut-être, ce groupe contient le texte ici. Petit titre A. Zola est l'arrière-plan. Maintenant, je viens de remarquer que mon bouton et mon icône ici, mon vecteur ici sont mal à l'intérieur du groupe. Alors allons-y jusqu'au panneau des calques, , et allez-y. Et tout d'abord, regroupons le bouton suivant ensemble. Le rectangle est toujours le texte en utilisant la commande G. Nommons ce bouton suivant, et puis nous avons le vecteur ici. Allons de l'avant et sélectionnons simplement ces deux-là. Pour une raison quelconque, ils ont été regroupés, mais nous voulons vraiment aller de l'avant et simplement les séparer et les mettre dans ce groupe. On y va. Et maintenant, nous avons tout dans un seul groupe. Je vais juste aller de l'avant et commander quelques choses. Amenez ce parcours jusqu'ici, amenez ça ici. Juste dit là dans une sorte d'ordre sympa de haut en bas. Je pense que ça a l'air bien. Alors maintenant, allons de l'avant et sélectionnons tout le groupe. Assurez-vous que le groupe est sélectionné avec chaque élément à l'intérieur. Allez tout le chemin ici où il est dit créer un composant. Alternativement, vous pouvez faire l'option Commande K ou Ault Control K, et cela fera la même chose. Et maintenant, vous verrez sur mon panneau Calques, ce groupe a soudainement une nouvelle icône, et même le texte est violet. Et donc ça nous dit que c'est maintenant un composant. Donc maintenant ce que je vais faire, c'est aller de l'avant et tenir Ault et aller de l'avant et faire glisser une autre copie dans cette page. Ce tutoriel Étape numéro deux page maintenant, parce que j'ai créé mon composant à partir de ce groupe ici. Ce n'est pas mon composant maître. Ce que j'ai fait maintenant, c'est que j'ai créé une instance à partir de ce composant maître, ce qui signifie que ce groupe appartient maintenant aux propriétés, au style et à tout ce qui est ici. Alors passons sur Torched oral Étape deux Page. Hum, je vais juste aller de l'avant et amener ça dehors. C' est la carte qui était à l'origine ici. Je vais faire ressortir ça aussi. Je vais juste réorganiser ça. Donc c'est sur le dessus. , Ok, donc maintenant ce que nous voulons faire est d'insérer ce texte pour entrer ici Contrôle. Voir, pour copier Pace qui sous la même chose pour le texte ici maintenant pour l'image ici, je vais faire quelque chose de différent parce que c'est maintenant une instance de ce composant maître . Je ne peux pas aller de l'avant et juste apporter des éléments à l'intérieur d'ici, mais je peux certainement ajouter des choses ici et ensuite choisir de cacher ou d'exécuter cacher les choses que je veux montrer dans chaque instance de celui-ci. Alors allons de l'avant et double-cliquez ici pour obtenir notre icône vectorielle ici. Je vais juste faire une copie. Allons ici à notre composant maître ici et collez-le maintenant. Je vais juste aller de l'avant et m'assurer de l'aligner sur mon autre icône ici. On y va. Allons tout le chemin vers le bas et faisons la même chose avec cet iPhone ici qu'il était aux commandes. Voyez, montez ici et puis allons-y et la paix là-dedans. On dirait que je les ai certainement insérés dans les autres cadres vectoriels pour vous assurer que vous avez vos cadres indépendants les uns des autres pour les iPhones ici. Et maintenant ce que nous pouvons faire ici. Allons-y et débarrassez-vous de ça. Comme on en a fini avec ça et juste centrer si longtemps, je pense que c'est centré. Allons de l'avant et hors du centre le long du composant maître sur cette page, ou vous pouvez simplement aller ici et appuyer sur les centres horizontaux et verticaux, et cela fera la même chose. Et allons de l'avant et copions ceci. Allez-y et sélectionnez cette page de tutoriel avant de coller ici. Allons de l'avant et faisons simplement glisser cela hors d'ici et faire glisser ces choses gonflent mon groupe un peu bizarrement dans ma carte de tutoriel. Allons de l'avant et sélectionnez une étape territoriale trois, puis aller de l'avant et coller afin Maintenant, nous avons un autre. Allons de l'avant et copions le texte ici et pour entendre et celui-ci ici et vous remarquerez que celui-ci n'est pas centré. Donc, d'abord, allons de l'avant et supprimons ce groupe ici et allons jusqu'à notre composant maître ici. Ce que nous allons faire, c'est juste aller de l'avant et étirer ce texte jusqu'à ce qu'il corresponde à nos textes corps, puis aller de l'avant et cliquer sur le centre de la ligne de texte. Donc maintenant, si je vais ici, ça devrait paraître bien. Et les icônes ici ? Eh bien, voilà ce qu'on va faire. Nous allons double-cliquer ici. Tu te souviens ? Bien qu'il s'agisse d'une instance d'un composant, vous avez toujours le contrôle de certaines choses telles que ce que vous affichez et ce que vous masquez ici. Allez-y et sélectionnez ce groupe et allez là où nous avons des serviettes. Nous avons machine à laver et nous avons l'icône de la boutique. Donc je vais aller de l'avant et cacher l'icône du magasin et la machine à laver. On a juste les serviettes ici, les serviettes propres. Allons ici deux fois vite et faisons exactement la même chose et celui-ci, cependant, cependant, allons de l'avant et cacher la serviette dans un magasin, et ensuite on a juste la machine à laver. Et le dernier mais pas le moindre là-haut. Maintenant, une chose que je veux mentionner pour cette carte ici parce que c'est le composant massif. Si j'y apporte un changement, même si je cache ces icônes supplémentaires ici, hum, hum, il va en fait aller de l'avant et le supprimer de mes autres pages aussi. Donc ce n'est pas ce qu'on veut ici. En règle générale, lorsque vous créez des composants, vous voulez aller de l'avant et placer vos composants et un endroit séparé quelque part séparé, sorte que vous pouvez les réutiliser sans modification depuis un autre endroit. Alors, qu'est-ce qu'on va faire traîner ça dehors et juste le placer ici pour l'instant ? Et je sais que ça a l'air un peu organisé, et la prochaine leçon on va revenir et nettoyer ça avant. Maintenant, allons de l'avant et appuyez sur Commande, voir select. Notre Pretoria va encadrer ici et faire le Commandement V. Et maintenant j'ai une autre instance de ce composant maître. Maintenant, si je vais ici et que je cache mes serviettes sur ma machine à laver, j'ai juste l'icône de mon magasin, qui est exactement ce que nous voulons. Alors pourquoi avons-nous fait ça là-bas ? Je sais qu'on a eu exactement le même résultat qu'avant. Maintenant, laissez-moi expliquer ce qui est différent si vous allez à votre composant maître ici, vous pouvez identifier un composant maître à partir de leurs instances en regardant réellement le symbole ici. Master Component a cette petite icône en diamant juste à côté du nom. Si je descends ici. Puisque c'est une instance de ce composant maître, je peux voir qu'il n'a pas cela pour la petite icône de diamant. Il en a juste un vide. Donc, cela me dit que c'est une instance de ce composant maître. Donc maintenant, si je vais ici et double-clique dans mes composants maîtres jusqu'à ce que je sélectionne ce rectangle ici Non, disons que je veux changer mon nous arrondi à zéro juste comme un exemple ici. Maintenant, si je vais ici à mon pas numéro un, il voit a un rayon de zéro. Même chose pour l'étape numéro deux et même chose pour l'étape numéro trois. C' est plutôt cool en ce moment. Si je retourne ici et utilise la commande, cliquez sur mon arrière-plan et donnez-le à bord d'un rayon de 20. La même chose sera appliquée à toutes les autres instances. Disons que j'ai décidé maintenant d'aligner tout mon texte à gauche ici. Donc, si je sélectionne mon texte et que je fais une ligne à gauche ici, vais juste m'assurer qu'ils ont la même taille. Ok, c'est bien. Je vais juste les sélectionner et m'assurer qu'ils sont au centre aussi. On dirait qu'ils le sont. Donc maintenant, si je vais ici, vous verrez que mon texte a changé dans toutes mes instances. Et à quel point c'est cool ? Au lieu d'avoir à faire un changement sur tous mes groupes ici Maintenant, je fais juste une modification au composant maître là-bas. Alors maintenant, je vais juste aller de l'avant et sélectionner les deux textes ici et les centrer à nouveau. Maintenant, si je zoom arrière, vous verrez que les changements ont été faits Ici est bien, alors allons-y et renommons aussi ce groupe pour dire, carte tutoriel juste pour que nous ne savons pas exactement ce que ce composant maître représente. Donc maintenant, si je vais ici et disons pour une raison quelconque dans mon pas un ou mon étape un cadre ici. Je veux aller de l'avant et utiliser ceci comme un groupe complètement séparé sans rapport avec ces composants maîtres, bien que c'est de là que nous l'avons obtenu. Mais disons que vous voulez aller de l'avant et vous débarrasser complètement de cette relation là-bas. Donc, tout ce que vous avez à faire est juste aller sur le panneau des propriétés ici et puis où il est dit carte de tutoriel. Allez-y et sélectionnez cela. Et puis puis vous pouvez aller de l'avant et sélectionner Attacher l'instance. Et donc c'est maintenant un groupe séparé étaient en fait même un cadre séparé. Si je vais à mon panneau de calques que vous voyez maintenant, il n'a pas la même icône qu'il avait avant ici. Donc maintenant, si je vais juste aller de l'avant et que je saute ici et disons simplement les déplacer et nous allons voir à diriger cette icône ici, cela n'aura aucun rapport avec le composant maître ni aucune des autres instances. Donc, c'est maintenant complètement séparé, et tout ce que nous ferons à elle restera sur cette page dans ce cadre le long. Donc je vais juste aller de l'avant et appuyer sur la commande Z Bunch fois deux revenir à l'avoir comme une instance, et vous voyez maintenant c'est une instance à nouveau parce qu'a une petite bordure violette comme ah de Bella , mon panneau de couches, c' est la carte de tutoriel et a une petite icône que nous avions avant. Donc maintenant, je sais que c'est une instance de ce composant, alors n'hésitez pas à profiter des composants partout où vous le pouvez. Ah, chaque fois que vous voyez que vous avez plusieurs objets qui sont liés ou qui ont la même apparence, vous pouvez probablement le mettre dans un composant maître. Et maintenant, je veux vous faire un peu d'exercice pour aller de l'avant et mettre nos boutons dans un composant séparé aussi. Sur la raison est, comme vous l'avez remarqué, Ah, beaucoup de boutons qui utilisaient en fait ont un style très similaire. Et encore une fois, si je décide de changer le bouton de connexion ici pour être en gras, mes autres boutons n'utiliseront pas cette propriété parce que je ne change que ma journalisation, mais ici. Mais généralement, nous voulons que nos boutons soient identiques ou très similaires avec seulement de petits ajustements, comme une couleur d'arrière-plan de la couleur du texte. N' hésitez donc pas à faire cet exercice et à créer un composant maître à partir de vos boutons. Peut-être les placer en dehors de votre conception ici, puis aller de l'avant et créer des instances partout où vous voyez que nous avons ce bouton utilisé. Une chose que je veux mentionner avant de vous lancer dans cet exercice est qu'une fois que vous créez un composant maître ici, assurez-vous de faire une instance et de la mettre ici au lieu de, ah, vos cartes séparées. Parce que encore une fois, c'est un composant. Il s'agit d'une instance de ce composant. Donc, quelle que soit la modification que vous voulez apporter ici, en particulier en termes de ce que vous voulez ajouter ou supprimer à tout ce groupe ici, vous devriez le faire à l'intérieur du composant maître. Si vous ne voulez pas faire cet exercice, hésitez pas à l'ignorer, puis sautez dans la prochaine vidéo où nous allons le faire ensemble et en apprendre un peu plus sur les composants. Parce que leur super puissant 11. Composants de boutons: Bon, alors allons de l'avant et passons dans la fabrication de nos boutons en composants. Donc, ce que nous allons faire ici, c'est ce que nous allons utiliser l'un de ces boutons pour créer composant maître, puis créer des instances de celui-ci partout en utilisant le bouton. Alors allons de l'avant et utilisez l'option lui ou l'ancienne touche et faites glisser une copie ici. Allons-y et traînez-le ici et encore. Nous pouvons créer des composants en venant ici et en cliquant. Créer des composants. Et maintenant, c'est mais dans la composante que nous avons. Il s'appelle le bouton de connexion en ce moment, parce que c'est le nom que nous avions pour cela avant. Mais allons-y et juste Il a changé ça en bouton. Et maintenant ce que je vais faire, c'est que je vais aller de l'avant et sélectionner mes fesses et mon composant ici. Utiliser la commande. Tu vois, je vais sélectionner le cadre et je vais aller de l'avant et le coller ici. Allons de l'avant et alignons cela avec l'endroit où nous avions notre original. Mais ici et là, allons-y et trouvons juste ce bouton de connexion dans nos cadres et effacé et je vais juste aller de l'avant et ramener ça juste en dessous de mon passeport mais dans et ce que nous sommes ici . Allons de l'avant et déplacons simplement ce mot de passe oublié juste après mot de passe et les conditions d'utilisation tout le long, juste au-dessus de mon arrière-plan, va juste réorganiser certaines de nos couches ici. Vous n'avez pas à le faire, mais j'aime toujours garder mes couches organisées ici. Donc maintenant, c'est une instance de ce bouton. Ce qu'on peut faire ici. Nous pouvons aller de l'avant et utiliser à nouveau la touche d'option pour créer une autre instance. Et allons de l'avant et changons le nom de celui-ci ou le texte de celui-ci pour s'inscrire avec email comme nous l'avons fait ici. Allons de l'avant et alignons ce lent en utilisant les touches fléchées pour nous assurer que nous avons bien réussi. Et puis allons-y. Et de même élite sont inscrire, mais ici et déplacé vers le bas ce signe vers le haut. Mais ici, ici, ici, allons de l'avant et faisons la même chose pour ce dernier bouton ici. Cette fois, je vais utiliser la commande D et je m'inscrire. Il est en fait ne se connecter avec ce Google ? Non, j'avais un fond blanc ici avant. Donc, pour changer ma couleur, je peux toujours aller de l'avant et sélectionner ceci. Et en ce moment, il a des couleurs primaires sélectionnées. Mais si vous voulez changer cela, vous pouvez simplement aller de l'avant et faire un style détaché qui vous permettra de choisir votre propre couleur. Et puis, bien sûr, je dois aller ici à ma police ou à mon texte ici et le changer en noir comme on avait déjà fait. Et puis, bien sûr, allons de l'avant et de le mener, supprimer l'autre copie que nous avions juste en dessous, supprimer et cet effondrer cela et les amener sur. Apportez-le juste en dessous de l'autre. Donc l'ordre a du sens et on y va. Donc maintenant, si je vais à mon maître Mais dans le composant ici, si je vais de l'avant et décide d'utiliser la commande soit je décide d'en gras dans le texte. Vous voyez, mes autres boutons ont un texte de taureau. Maintenant, si je vais ici, si je retourne ici et double clic et de choisir mon texte et disons que je choisis la taille de 16 et que je retourne en arrière. Tu vois que ma taille a augmenté ici. Donc pour l'instant, on va aller de l'avant et en fait sur l'audace. Donc, nous allons aller de l'avant et en fait sélectionner notre texte ici à peut-être faire un moyen de pet moyen ici et ensuite aller de l'avant et CR changer là-bas. Cool. Donc maintenant, ici, on est bons. Nous avons nos boutons et ce sont toutes des instances. Une chose que je veux vous montrer ici est que nous avons modifié notre signature avec Google ici . Donc, ce que nous avons fait ici, c'est que nous remplissons cette propriété de cette couleur d'arrière-plan ici à partir des composants maîtres, qui est bleu. Ah, et puis on le change en blanc. Disons qu'à un moment donné j'ai décidé de faire ressembler ce bouton au reste. Um, si je veux tout changer, je peux aller de l'avant et sélectionner, aller dans mon panneau juste ici, puis réinitialiser les remplacements à partir d'ici. Et cela me donnera exactement à quoi ressemblait ce composant maître. Ensuite, je peux aller de l'avant et changer le texte ici. Donc, nous allons commander cela ici. Disons que vous voulez seulement changer le Phil à la couleur d'origine. Alors, vous pouvez doubler rapidement ici et sélectionner votre rectangle ici, Assurez-vous que vous l'avez sélectionné, et je fais la même chose. Mais cette fois, au lieu de remplacements récents, vous pouvez réinitialiser, Phil. Et donc cela va juste obtenir à remplir que nous avions à partir des composants maîtres. Sinon, vous pouvez aller de l'avant et laisser ça comme ça. Ah, quelles sont les propriétés remplacées pour ce bouton ? 12. Utiliser des pages pour organiser: nous allons faire des choses plus rapides ici juste pour emballer les composants. On va aller de l'avant et ainsi de suite. Comme vous pouvez le voir, ça devient un peu désordonné. Typiquement, nous voulons avoir nos composants et nos choses. jeux d'un tel érudit sur une page séparée et nos conceptions ne rendent donc pas notre espace de travail occupé ici. Donc, So Figure vous permet de créer plusieurs pages à l'intérieur de votre fichier, mais juste aller ici à l'endroit où il est dit Page 1 En ce moment, c'est la page sur laquelle nous sommes. Ça s'appelle Page 1, euh, réveil. Allez-y et renommez-le en. Mais si vous marquez et nous allons de l'avant et créer une autre page par rapide dans l'icône Plus ici et faire peut-être des composants, puis aller de l'avant et cliquez sur Plus et faisons juste une autre pour les styles. Alors allons de l'avant dans notre maquette. Allons de l'avant et sélectionnez simplement le groupe de jeux de couleurs ici et utilisez la commande X. Revenir aux styles doit être défini ici. Cool. Et maintenant, revenons à la marque. Sélectionnez les deux composants. Sortez d'ici. Utilisez à nouveau la commande X pour couper, puis allez ici à notre page de composants et collez-les ici. On y va. Cool. Donc maintenant, je veux faire une autre chose ici avec les composants du bouton. Typiquement, boutons ont plusieurs états, donc nous avons, ah, bouton qui pourrait être désactivé. Donc, cela peut dire à l'utilisateur qu'en ce moment ils ne peuvent pas utiliser ce bouton sur. Et puis nous avons un bouton, généralement dans un état activé. Donc, un bouton comme celui-ci indique généralement à l'utilisateur qu'il est activé. Mais que faire si vous voulez créer un autre type de bouton qui indique aux utilisateurs sur le bouton est désactivé ? Donc, pour ce faire, nous allons aller de l'avant et utiliser l'instance de salt and dragon loin du composant ici, et puis , en fait, nous allons transformer cette instance en un composant lui-même en créant un composant et les couches ici. Allons de l'avant et renommons ce bouton en désactivé et l'autre en activé. Assurez-vous donc de suivre cette convention ici, mais en barre oblique avant activée, puis bouton avant sash désactivé pour le bas ici . Alors allons de l'avant et sélectionnez ce désactivé. Mais ici, allons de l'avant et d'abord détaché le style ici, puis changer le remplissage du bouton pour peut-être vous gentil ? Euh, un peu de gris ici marcherait. Faisons, hum, cette couleur ici, un neuf, un neuf et une dernière chose que je vais faire rapidement ici. Je vais aller de l'avant et juste changer le texte ici. Et comme vous pouvez le voir maintenant, il a changé dans l'autre bouton aussi. Sur La raison en est que nous avons transformé l'instance et l'instance de ce bouton en un composant. Il est donc toujours lié à ce bouton et aux changements que nous y apportons. Donc encore une fois, faites-lui cette barre oblique s'appelle bouton slash avant désactivé sur l'autre. Mais en barre oblique activée, je vous montrerai dans une seconde. Pourquoi, c'est important. Donc maintenant, si vous revenez à la page Michael de deux ans ici, ça a l'air beaucoup plus propre. Au fait, Maintenant, vous verrez mon texte ici a changé de bouton. Nous devons changer cela à la loi à nouveau. C' est parce que nous n'avons pas remplacé le texte par la loi à nouveau. On a juste utilisé tout ce que le composant avait. Donc, quand on l'a changé en, mais ça a changé. Le texte ici est bien, mais l'autre est resté le même parce que nous avons fait cette substitution pour le texte ici. Maintenant, si je sélectionne un bouton et accède au panneau Instance ici, je pourrais en fait aller de l'avant et choisir désactivé ou activé. C' est cool ? Nous avons oublié de faire une dernière chose ici, et ça a à voir avec la carte du tutoriel ici. Ah, et c'est pour lui assigner le même bouton aussi. Revenons donc aux composants et que nous allons de l'avant et copions ce composant, puis allons l' avant à l'intérieur d'une pâte de carte didacticiel. Et maintenant, nous avons une instance de ce bouton. Donc, nous allons juste aller de l'avant et les écraser avec ici 2 à 53 pixels aussi. Et allez-y et mettez-la sur l'autre. Et nous allons de l'avant et supprimons le bouton suivant de notre composant ici. Et puis avant d'aller de l'avant, faisons maintenant ici juste parce que la plupart de mes composants utiliseront un bouton suivant. Sauf pour la toute dernière page du tutoriel, on va juste changer ça pour faire. Faisons cela en revenant à des simulations, puis si je fais défiler jusqu'à la toute dernière page. Je peux remplacer ce texte de boutons en le faisant en cliquant dessus, puis en tapant fait. Donc maintenant, vous voyez, nous avons exactement ce que nous voulons. Maintenant, je sais que nous avons beaucoup appris ici aujourd'hui, mais ce sont tous des concepts et de la composition très importants. très, très puissants et utiles. Et je veux vraiment que vous obteniez une compréhension et que vous en tiriez vraiment parti dans vos propres projets. Je pense que nous sommes prêts à passer à notre page de paiement, donc nous le ferons dans la prochaine leçon. 13. Utiliser des variantes pour créer des groupes de composants: Bon, donc avant de sauter dans notre PJ de paiement, je veux vous montrer deux choses rapides que fema a récemment mis à jour, mais elles sont super utiles. Donc, la première chose s'appelle des instances d'échange. Donc, si je vais de l'avant et sélectionnez l'une des incidences du bouton de connexion, nous avons ici, par exemple, sur le côté droit. Maintenant, vous pouvez voir qu'il existe une nouvelle façon d'aller de l'avant et modifier ou d'échanger l'instance que vous voulez. Donc, je peux l'échanger avec une version désactivée de je veux, ou je peux aller de l'avant et l'échanger à la version du quartier. Et si j'ai plusieurs boutons ou plusieurs composants, je peux facilement les trouver ici et même utiliser une barre de recherche ici. Maintenant, bien sûr, cela sera beaucoup plus utile une fois que vous avez plusieurs variations de différents boutons ou plusieurs boutons ou plusieurs composants que vous pourriez souhaiter échanger la largeur. Parce qu'en ce moment, nous n'avons que des composants couplés. Peut-être ne pas être aussi utile, mais il sera certainement plus utile que vous commencez à ajouter plus de composants, plus de variations différentes des boutons et ainsi de suite. L' autre chose vraiment cool que je veux vous montrer que figue a annoncé plus récemment qu'elle s'appelle variance. Donc, je vais vraiment passer rapidement par l'article d'épaisseur ici sur ce que la variance fait. Ensuite, nous allons aller de l'avant et l'appliquer à nos propres composants et à nos propres conceptions. La variance est donc un excellent moyen de créer plusieurs versions du même composant, comme l'exemple ici qu'ils ont dans l'image. Vous pouvez réellement aller tête et créer différentes versions des boutons et être en mesure de les changer ou de les personnaliser dans vos instances très rapidement et rapidement. Et je vais vous montrer un exemple de ça dans une seconde. Et comme vous pouvez le voir ici dans cette image, ils ont créé plusieurs versions des mêmes boutons. Certains d'entre eux avec l'ICANN, Certains d'entre eux sans. Ils ont des versions secondaires avec différentes couleurs, différentes tailles comme ou ils ont utilisé toutes ces différentes propriétés, que vous pouvez également voir sur le côté du panneau de droite ici, pour être en mesure de créer différentes versions de leurs boutons. Mais cela aura beaucoup plus de sens une fois que nous l'appliquerons réellement à notre propre projet. Alors pourquoi ne pas passer à FISMA et aller à l'onglet Composants ici. Très bien, alors ici, dans notre onglet Composants, ici avec la page, nous voyons deux versions différentes des boutons que nous avons créés. L' un d'eux appelé bouton et tel activé, puis l'autre, barre oblique désactivée. Et c'est pour être facilement en mesure d'identifier l'état du bouton que nous voulons. Donc, nous utilisons déjà la même idée que ce groupe de variantes fournit. Mais la seule différence ou l'avantage ici d'utiliser la variance est qu'il est beaucoup plus facile à utiliser du côté de l'instance. Et aussi si vous avez des développeurs qui travaillent avec vous ou qui utilisent vos conceptions, il sera en mesure de mieux utiliser cela. Et je vais te montrer ça dans une seconde. Donc, afin de créer une variante, vous devez d'abord des composants, que nous avons déjà ici. Alors allons de l'avant et sélectionnez les deux sont ici. Et maintenant, vous verrez cette nouvelle option appelée variantes combinants sur le côté ici. Donc on va aller de l'avant et cliquer dessus. Et nous avons tous remarqué ici est au plus heureux nos deux composants de bouton que nous avions à l'intérieur de cette variante de bouton. Et vous pouvez voir le nom ici parce que nous utilisions cette convention de nommage, FISMA était assez intelligent pour réellement aller tête et les transformer en propriétés de ce bouton. Donc, nous avons la propriété un. Donc, parce qu'il n'y a pas de nom attaché à cette propriété, renommée a été juste utilisé un nom générique, une propriété ici. Et puis allez-y et utilisez la version désactivée et activée. Donc, si je clique sur celui-ci, vous verrez que la propriété 1 est définie sur activé. Et pour cette seule propriété, on est défini pour désactiver. La première chose que je veux faire ici est de sélectionner l'ensemble du groupe de variantes ici. Et nous allons aller de l'avant et il suffit de cliquer sur la propriété un pour aller de l'avant et changer le nom pour peut-être indiquer. Donc, c'est juste quelque chose qui a plus de sens. Maintenant, nous avons une propriété appelée état, qui peut être désactivée ou activée. Maintenant, bien sûr, nous pouvons aller de l'avant et réellement créer plus d'états si vous voulez. ce faire, nous pouvons aller de l'avant et faire plus d'options, puis aller de l'avant et ajouter une nouvelle variante. Donc, cela va aller de l'avant et créer une autre variante et aller de l'avant et utiliser l'état trois, mais nous pouvons aller de l'avant et le nommer comme nous voulons. Alors dans notre cas, pourquoi ne pas aller de l'avant et faire pressé. Et nous pouvons même aller de l'avant et le déplacer ici si vous voulez, et déplacer celui-ci vers le bas. Donc maintenant, nous avons un état activé, état opprimé et un bouton d'état désactivé. Et nous voulons aller de l'avant et créer quelque chose de différent ici pour notre prestige. Et alors pourquoi ne pas aller de l'avant et descendre à la couleur de sélection ici, détacher le style, et peut-être aller avec un bouton légèrement plus foncé. C' est juste pour que lorsque l'utilisateur appuie sur ce bouton, il se transforme en cet état de presse. Donc maintenant, disons que nous voulons une autre propriété et nous allons réellement aller de l'avant et créer une petite version de notre bouton. Alors allons de l'avant et cliquez sur le bouton, variant le groupe ici à nouveau. Allez à plus d'options, et allez de l'avant et cliquez sur Ajouter une nouvelle propriété comme un état juste en dessous. Maintenant, nous avons une nouvelle propriété. Il nous demandera de lui donner un nom. Donc, dans notre cas, nous allons aller de l'avant et faire la taille. Et la valeur par défaut d'un nouveau mur de propriété est la valeur par défaut. Donc, nous allons aller de l'avant et changer cela en petites et grandes en seulement une seconde. Et faites cela, le plus simple est d'aller de l'avant et simplement sélectionner ces trois boutons tout en maintenant la touche Maj enfoncée. Et nous allons aller de l'avant et trouver la propriété de taille par ici. Allez-y et cliquez sur cette petite erreur ici, et allez Ajouter nouveau. Et je vais, allons de l'avant et renommer cette nouvelle valeur trop grande. Maintenant, si nous voulons créer une petite version de tous ces boutons, allons de l'avant et simplement utiliser la commande D pour dupliquer ces boutons. Et allons de l'avant et juste faire glisser la taille ou la largeur ici pour, faisons 150. C' est parfait. Et maintenant vous avez deviné que nous allons ici à la taille. Allez-y, cliquez sur la flèche et ne ajoutez une valeur nouvelle et créative de petite taille. Donc maintenant, comme vous pouvez le voir, nous avons six types de boutons différents. Nous avons un grand bouton qui a un état activé, un grand bouton qui a un état pressé, et un grand bouton qui a un état désactivé. Et de même, nous avons un petit bouton qui a un état activé. À désactivé petit bouton et oppress petit bouton. Alors maintenant, vous vous demandez probablement, comment est-ce utile ? Eh bien, pour montrer comment les mots, revenons à notre page de maquettes, où nous pouvons aller de l'avant ici à notre page de connexion ou n'est pas sont de retour ici. Voyons voir. Je veux aller de l'avant et changer cette instance de bouton ici en un petit bouton pressé afin que je puisse aller de l'avant et le sélectionner. Et maintenant, sur le côté droit, vous voyez que nous avons notre variante de bouton ici. Et maintenant, nous avons différentes propriétés que nous pouvons changer. On peut changer l'état en, disons pressé. Nous pouvons aller de l'avant et changer la taille pour, disons, une petite taille. Et donc fema change automatiquement cela au type de bouton que nous voulons. Disons que vous changez d'avis et que vous le voulez. Mais pour être grand. Et montrez la prostate. Là, vous l'avez. Vous avez juste à changer une propriété et vous avez le bouton que vous voulez. Et vous pouvez faire beaucoup plus avec des variantes, telles que l'ajout d'icônes à vos boutons et l'utilisation de cela comme un état. Donc, par exemple, ils ont Icône, faux et vrai ici, j'espère maintenant que vous pouvez voir comment les roulements peuvent vraiment nous aider à créer différentes versions de vos composants et comment cela peut être utile. Juste pour vous montrer quelques derniers conseils rapides sur les variantes, vous pouvez réellement aller de l'avant et cliquer sur la variante ici et redimensionner la fenêtre comme vous le souhaitez. Et vous pouvez même aller de l'avant et déplacer vos boutons ou vos composants à différents endroits. De cette façon, cela pourrait être plus facile pour vous ou votre équipe. Alors n'hésitez pas à organiser vos variantes d'une manière qui vous convient et peut-être à votre équipe de conception ou de développement. Je vous ai suggéré de faire un exercice et de vous familiariser avec la variance. Je veux que vous alliez réellement de l'avant et créez une version de ces variantes avec une image aussi bien. Et puis aller de l'avant et aligner le texte ou le texte du bouton que nous avons sur le côté gauche du bouton pour aller de l'avant et le faire pour les deux sont grande et petite variation des boutons. Et puis nous allons continuer et faire ça ensemble dans la prochaine leçon. 14. Solution d'exercice de variantes: Alors allons de l'avant et créer une variation de ces boutons avec des images d'icônes à l'intérieur d'eux aussi. Donc d'abord, je vais aller de l'avant et ouvrir mon dossier d'icônes ici à partir des ressources pour ce balisage. Je vais juste à À titre d'exemple, allez-y et ouvrez les icônes et allez dans la connexion. Et comme test, allons de l'avant et faites glisser ceci sur le point d' enveloppe SVG ici dans R sigma. Allons de l'avant et de ce côté. De ce côté ici, les proportions contraintes et le redimensionner à 25 pixels. Et allons-y et traînons juste ce cadre ici et mettons ça là pour nous. Maintenant, allons de l'avant et premier pas, sélectionnez tout ce que nous avons ici. Parce que ce que nous voulons faire, c'est que nous voulons aller de l'avant et ajouter une version de notre variance qui inclut toutes ces tailles d'états différentes. Et puis maintenant, et maintenant aussi ajouter une variation qui a une icône. Donc la première chose qu'on veut faire est d'aller de l'avant et de cliquer sur les boutons. Variation ici va sur le côté, et allons de l'avant et ajouter et nouvelle propriété. On va aller de l'avant et nommer ça avec une icône comme ça. Donc sigma nous permet également d'utiliser des valeurs binaires à l'intérieur des propriétés privées ici aussi. Donc pour ça, ici, nous pouvons avoir deux valeurs. Un avec une icône, donc une vraie valeur, puis un faux sans icône. Donc, pour ce faire, continuons et modifions cette valeur par défaut portée en double-cliquant ici sur true. Donc maintenant, nous avons une icône de largeur vraie valeur ici. Donc ce que nous voulons faire maintenant, c'est aller de l'avant et sélectionner tous ces boutons ici à nouveau, puis aller de l'avant et dupliquer est en maintenant Alt. Assurez-vous que pendant que vous le dupliquez, vous ne sortez pas de la ligne pointillée violette parce que alors ce ne serait plus un int très. Bon, donc je vais juste aller de l'avant et en fait redimensionner ma page de variante ici juste pour qu'elle soit un peu mieux et plus organisée. Et puis ce que nous voulons faire, c'est que vous voulez utiliser ces six boutons et y ajouter une icône, puis aller de l'avant et déplacer le texte vers la gauche. Donc, nous allons juste aller de l'avant et sélectionner notre texte ici. Maintenant n'oubliez pas de rendre cela plus rapide, vous pouvez toujours tenir le commandement et passer ensemble. Vous pouvez donc sélectionner plusieurs couches à l'intérieur d' autres composants ou d'autres groupes pour rendre les choses beaucoup plus rapides pour nous. Ensuite, allez-y et utilisez le texte aligner à gauche. Simple que ça. Et maintenant, allons de l'avant et amenons notre enveloppe ici. Et puis nous allons de l'avant et changeons la couleur de sélection ici en blanc. Maintenant, je vais juste aller de l'avant et dupliquer ceci ou maintenez Alt et juste le glisser dans chaque composant. Et allez-y et amenez-le à nos petites icônes ici. Tout en s'assurant que tout est aligné. On y va. Ok, génial. Donc maintenant, ce que nous voulons faire est d'aller de l'avant et de sélectionner les six derniers ici qui ont des icônes et assurez-vous que c'est vrai ce que c'est. Et puis nous allons aller de l'avant et sélectionner ceux qui n'ont pas d'icônes ici, l'icône 64 largeur au lieu de true, allons de l'avant et ajouter de nouveaux et faire faux. Donc maintenant, de retour ici, nous pouvons aller de l'avant et réellement changer l'état désactivé, appuyé ou activé. Nous avons la taille que nous pouvons changer pour petit, grand. Et maintenant, pour tous, nous avons aussi une option appelée icône de largeur. Donc, nous pouvons aller de l'avant et l'ajouter avec l'ICANN et la belle partie à ce sujet en utilisant un vrai et faux valeurs dans les propriétés de la variance est que vous obtenez ce joli petit interrupteur à bascule ici qui rend juste les choses un peu plus propre. Donc maintenant, je peux totalement avoir une option avec icône. Allez-y et choisissez une petite icône ou un petit bouton, puis utilisez un état pressé si je veux. Maintenant, comme je l'ai fait, j'ai remarqué que j'ai un peu de problème d'alignement ici. Assurez-vous donc de toujours garder vos icônes et vos boutons alignés afin qu'ils n'aient pas l'air bizarre entre les variations. Donc oui, c'est une variation pour toi. Définitivement l'utiliser dans vos projets. Maintenant, pour le reste de ce cours, je vais utiliser des composants sans variance, mais n'hésitez pas à essayer d'utiliser des variantes comme nous allons le long partout où vous le pouvez. 15. La page de paiement: d' accord. Je pense que nous sommes prêts à entrer dans notre troisième page, la page de paiement. Mais avant de le faire, jetons un coup d'oeil à notre croquis ici. Voici donc la page de paiement. C' est assez simple. juste un titre ici, euh, et puis nous avons la carte de crédit où l'utilisateur peut entrer son numéro de carte de crédit et toutes les autres informations ici, et ensuite ils peuvent ajouter la carte d'ici et ensuite aller à la page suivante. Um, ça a l'air assez simple. Je ne sais pas pour vous, mais parfois quand j'essaie de concevoir un nouveau projet ou une nouvelle page, c'est un peu difficile de savoir exactement ce que nous voulons y mettre ou même d'avoir inspiration pour un projet et nos propres designs. Bien sûr, nous pouvons utiliser des AP similaires qui concevaient et jouaient avec ces APS, mais cela pourrait être vraiment fastidieux. C' est ainsi ? C' est pour ça que je vais te montrer ce site sympa appelé les patrons. Commencez la tête sur P double T R N s dot com pour y accéder, et c'est super cool. Essentiellement, c'est juste, hum, un peu comme Pinterest mais pour la conception d'applications. Donc, il vous montre beaucoup d'inspirations intéressantes que vous pouvez prendre à partir de certains des robinets chauds sur le marché. Ils ont même des catégories. Voici pour basé sur la page que vous concevez. Vous pouvez y aller et trouver de l'inspiration. Allons de l'avant et sélectionnez ce robinet d'achat ici pour voir un peu d'inspiration de différents APS et de différentes entreprises. Um, par exemple, il y a la page de paiement d'Uber ici. Nous avons déjà un design à l'esprit en termes de mon propre croquis ici, mais allons de l'avant et voyons ce dont nous avons besoin. On a besoin d'un numéro de carte. Nous avons besoin d'une date d'expiration, CVV pays et code postal. Donc, je pense que généralement ces 3 premiers champs sont obligatoires et les autres sont en quelque sorte facultatifs . Mais bien sûr, si le client veut que nous commencions, mettez-les certainement dans notre conception à l'avenir aussi. Mais pour l'instant, concentrons-nous sur simplement mettre ces trois champs obligatoires. Revenons ici à ma page de paiements et fig MMA. Je vais utiliser cette touche de texte Ah, et aller de l'avant et juste créer quelques notes ici. Donc les exigences de paiement. Allons de l'avant et utilisez la ligne gauche et déplacez simplement ça ici. On a besoin du numéro de carte de crédit ici. Nous avons besoin de la CVV et de la date d'expiration. Il y a un bon moyen de prendre des notes et d'ajouter des choses à votre page ici. Alors allons de l'avant et sélectionnons notre cadre ici, puis nous voulons d'abord Texan ici, Alors faisons du texan et puis faisons au paiement. Allons de l'avant et sélectionnez la taille de la police de 26, puis continuez et déplacez cela ici. Tu veux en faire 50 ? Je pense que ça a l'air bien pour l'instant. Utilisons simplement zoomer ici et créer un rectangle pour une carte de crédit, et je pense que c'est bon ici. Je veux maintenir l'espacement de 40 de chaque côté. Ou faisons 43. Passez ça ici aussi. Peut-être 1 85 Allons-y et mettons-nous une belle Grady à Phil pour que nous soyons linéaires pour l'arrière-plan ici, et je vais aller de l'avant et aborder ça un peu ici. abord, nous allons choisir des couleurs locales, donc ce sont les couleurs qui ont été utilisées dans notre projet ici. Faisons celui-là pour le haut et ensuite la même chose pour le bas. Mais on va faire un peu plus sombre. Peut-être, et alors nous allons faire aura son début de l'année à. Peut-être ici. Allons-y et fermons ça ici. Et allons de l'avant et autour des frontières à peut-être 18 ici. Ça a l'air bien quand on va de l'avant et qu'on vient de lui envoyer ce texte ici. Ça a l'air bien. Créer un autre texte. Allons juste aller de l'avant et faire un à travers 345 Espace 5678 Espace 901 à l'Espace 3456 Je répète juste quelques chiffres ici. Je vais ajouter des espaces doubles ici au lieu d'un seul espace, juste à un espacement entre ces quatre chiffres. Allons de l'avant et sélectionnez le champ de texte entier et changez le remplissage en blanc. Et on va le déplacer ici. Allons de l'avant et la rendre en gras et modifions la taille de la police à 16. Faire. Un espacement de 30 serait bon. Essayons 18 pour la taille de la police. C' est encore mieux. Déplacez un peu vers le haut. Allons en fait ici pour l'espacement des lettres et ajouter alerté. Espacement. Faisons 2%. Ça a l'air bien, mais juste un peu d'espacement entre chacun de mes chiffres. Ici, je vais utiliser la commande D pour dupliquer ça ici et qu'est-ce qu'on veut ensuite ? Nous voulons la date d'expiration. Alors faisons le mois, mois, , l'année, comme un espace réservé ici qui déplace ça ici. Et puis nous allons juste aller de l'avant et dupliquons. C' est ici et faire CVV. Déplaçons tout le chemin vers la droite. Je pense que ça commence à se réunir, juste pour le bouger un peu. Déplacez ça un peu. Je pense que ça a l'air bien. J' ai eu l'impression que le bleu serait mieux pour les grands ici. Alors, qu'est-ce qu'on va de l'avant et qu'on change réellement nos couleurs ? De l'orange au bleu ? Je me souviens que tu peux toujours faire ça avec ton design. Il n' y a vraiment pas de bien ou de mal ici. C' est juste une question de ce qui vous semble mieux d'aller de l'avant et d'expérimenter différentes options. Tu n'as pas à t'en tenir à ceux avec lesquels on travaille ici. Si vous voulez utiliser un autre type de page par tous les moyens, allez-y et faites-le maintenant. Allons de l'avant et sélectionnez tout ici et utilisez la commande G pour les regrouper. Renommez ceci en carte de crédit et allons de l'avant dans le panneau des effets ici et ajoutez des effets. Ajouter en effet de l'ombre portée sur celui-ci, je veux faire peut-être un pourquoi cinq. Je dois le faire. a explosée. 10. Essaie 12. Faire une ville de 20% qui n'est pas trop visible. Allons de l'avant et ajoutons une autre ombre aussi. Faisons un flou de 20 ans sur un Y de huit. Ensuite, changez l'ancienne ville de paie à peut-être 15% ou en fait 5%. Ici. Essayons 8%. Je pense que ça a l'air bien. Donc tu nous manques juste. Mais ici, Donc, comme vous vous en souvenez, nous avons créé nos boutons en tant que composant. Mais nous l'avons placé dans une autre page ici dans la page des composants. Tu n'as pas besoin d'y aller pour y accéder. Si vous allez au haut des actifs ici, vous verrez tous vos composants ici, et j'ai mes boutons. A faible à la fois la version désactivée et celle activée, um, donc veux que je viens d'utiliser celui activé ici pour l'instant, et il apparaît juste magnifiquement en place ici pour s'assurer que c'est une ligne au centre. Allons de l'avant et assurez-vous également que tout le reste est aligné dans ce bien centriste et ressemble à ça. ISS. Changeons cela, mais dans le texte pour ajouter la carte. Et nous allons juste changer cela en paiement ici pour le rendre un peu plus simple. Et puis, bien sûr, allons de l'avant et centrons ça. Je pense que ça a l'air bien. Donc nous l'avons là. C' est notre page de paiement. On peut vraiment revenir, chef et ensuite polir les choses ici. Une fois qu'on aura fini avec tout le reste. 16. Les obstacles: D' accord. Donc, dans la dernière leçon, nous avons rassemblé notre page de paiement, et maintenant dans cette leçon, nous allons apprendre quelles sont les contraintes. Donc essentiellement, jusqu'à maintenant, nous avons fait nos designs ici, en supposant qu'ils seront toujours exécutés sur un iPhone 11 taille sur. Nous n'avons utilisé qu'une seule taille pour nos cadres ici. En d'autres termes, nous avons placé nos calques et objets ici, en supposant qu'ils ne seront exécutés que sur un écran iPhone 11. Donc, disons que le client décide à un moment donné de concevoir ou de voir leurs designs sur un iPhone 11 pro Max ici. Hum, et comme vous pouvez le voir, il n'arrivera pas grand-chose. Le cadre va simplement se développer, mais nos conceptions resteront de la même taille et encore. C' est parce que nous l'avons conçu en relation avec seulement un iPhone 11 pro size ici. Mais c'est là que les contraintes arrivent. Les contraintes nous permettent de rendre ses designs réactifs afin qu'ils fonctionnent peu importe le cadre ou l'environnement dans lequel il s'agit d'ajouter des contraintes ici. Tout d'abord, allons-y et défaites ça. Donc nous avons notre taille originale ici, euh, et nous allons nous concentrer sur notre corne et page d'abord donc je vais juste zoomer sur Ah, en utilisant Zet et l'école ici. Alors allons de l'avant et concentrez-vous simplement sur l'ajout de contraintes à cette page sur. Et puis nous allons aller de l'avant et ajouté partout ailleurs aussi. Mais comprenons d'abord quelles sont les contraintes. Ainsi, avec n'importe quel objet sélectionné, vous pouvez accéder aux contraintes en allant dans le panneau des propriétés ici, puis en recherchant les contraintes. Vous pouvez voir en ce moment par défaut j'ai une contrainte en haut et à gauche, et vous pouvez voir qu'elle est en haut à gauche parce que ces deux marqueurs ici sur la contrainte sont bleus et les autres sont juste noirs. Donc, ce champ ici est contraint à gauche et en haut, qui est par défaut ce qui se passe avec chaque objet. Mais en fait, ce que nous voulons faire est d'aller de l'avant et de le contraindre à gauche et à droite ici, sorte que si le cadre devient plus grand ou plus petit, le champ réagira à cela. Donc maintenant, si je rends mon cadre plus petit, , le champ ne réagira pas à ça. Donc, afin de le faire réagir et correctement dimensionner, en fonction de la taille de l'écran ici, allons de l'avant et le faire sélectionner, puis aller par ici. Supprimons la contrainte supérieure. Supprimons donc la contrainte supérieure en allant ici et en faisant simplement le centre, parce que nous voulons garder cet élément au centre de notre page et pas nécessairement contraint par le haut. Et puis allons de l'avant et aussi à gauche et à droite ici. Donc, ne pas vraiment voir cette inaction. Je vais redimensionner mon cadre, le rendre plus petit. Maintenant, vous remarquerez que mon champ est en fait re dimensionnement ici, sauf qu'il y a un petit quelque chose de bizarre qui se passe avec cette icône ici. Donc, continuons et ajoutons une contrainte à cette icône aussi. Ah, les éléments d'un groupe eux-mêmes ont certaines contraintes que vous pouvez aussi changer . Donc, si je double-clique ici pour sélectionner mon icône sur et vous remarquerez qu'il a une contrainte gauche et droite. Mais pour l'icône elle-même, nous voulons juste faire une contrainte de gauche parce que nous voulons juste la contraindre sur le côté gauche de ce champ et pas sur la droite. Donc maintenant, si je redimensionne mon cadre, vous voyez qu'il fonctionne comme il se doit, alors continuons et appliquons ces contraintes à certains des éléments de cette page , et nous allons aller de l'avant et ensuite l'appliquer à d'autres pages également. Encore une fois, nous allons travailler de haut en bas. Alors faisons ce bouton ici. Nous voulons faire une contrainte supérieure et droite ici parce que nous voulons cela, mais dans être contraint du côté droit et non de la gauche. Notre logo ici devrait juste rester au centre, et nous allons probablement faire en fait ce centre aussi bien. Allons au groupe de mots de passe et rendons souvent les droits et le centre. Et encore une fois, sautez ici et faites ce changement pour ne laisser que pour notre icône ici. Mot de passe oublié doit être limité aux droits et au centre. Le bouton de connexion doit avoir une contrainte de gauche et de droite et de nouveau centre en termes de contrainte verticale. Allons de l'avant et juste multi select en utilisant shift. Hum, tous ces composants ici tiennent ces objets ici parce qu'ils vont avoir les mêmes contraintes, gauche et droite, et ensuite on va se gauche et droite, centrer. Sauf pour ces termes. Ici, nous voulons aller de l'avant et cliquer sur celui-ci et faire une contrainte de fond parce que nous voulions vraiment nous en tenir au fond. Je crois qu'on a oublié une chose. Ouvrons notre panneau de calques ici. Si vous vous en souvenez, nous avons verrouillé notre couche d'arrière-plan. Eso Nous ne pouvons pas l'éditer tant que nous n'allons pas dans nos couches et ensuite le déverrouiller. Et pour mes antécédents ici, assurez-vous que vous l'avez sélectionné. Nous voulons le faire contrainte de gauche et de droite et de haut et de bas. Donc de cette façon, il remplit la taille du trou de l'écran. Donc je vais le verrouiller à nouveau, la main va de l'avant et a effondré mon cadre. Donc maintenant, si le client, disons, décide d'aller avec l'iPhone 11 pro Max pour leurs designs ici, ils peuvent le faire. Et boum. Comme vous pouvez le voir, le cadre est complètement réactif, et il a été redimensionné pour cette taille d'iPhone. Et puis, si je change de cadre, disons deux sur iPad. Mini même et voir qu'il fonctionne, bien que vous voudriez probablement faire quelques réglages. Donc juste re dimensionner ces champs et boutons parce que c'est beaucoup trop grand pour une application IPAD. Mais ici, nous sommes juste en train de concevoir pour Mobil. Alors allons de l'avant et appuyez simplement sur la commande Z. Ensuite, allez de l'avant et sélectionnez le cadre et assurez-vous que nous choisissons iPhone 11 pro ici. J' ai gagné 11 pro ici, et je vais aller de l'avant et remettre ça ici. Ça a l'air bien. Cool. Donc, en tant qu'exercice, je veux que vous alliez de l'avant et appliquiez ces contraintes aux autres pages que nous avons ici. Alors allez-y, et comme une expérience, appliquez ces contraintes aux pages du tutoriel ainsi qu'à votre page de paiement sur, puis dans la leçon suivante, nous le ferons aussi ensemble. 17. Solution d'exercice de contrainte: à droite. Donc, si vous avez suivi le long jusqu'à présent, nous avons ajouté quelques contraintes à notre page de connexion. Voici donc maintenant, quelle que soit la taille du cadre ici, si je le change, il va de l'avant et contraindre tous les éléments à l'intérieur sur les côtés et le haut et le bas, sorte que cela nous aidera à créer un design vraiment réactif. Et puis je t'ai donné un exercice pour aller de l'avant et faire ça pour les autres pages ici. Donc on va le faire ensemble ici aussi. Tout d'abord, je veux commencer par mes étapes de tutoriel. Mais je vais aller de l'avant et remplacer le groupe qu'on a inséré en arrière-plan ici. Mais je vais aller de l'avant et remplacer le groupe qu'on a inséré en arrière-plan Ah, et en fait utiliser une image à la place parce que c'est beaucoup plus facile à contrôler avec des contraintes dans le but que nous l'utilisons ici dans nos simulations. Alors allons de l'avant et sélectionnez la page de connexion ici, puis allons jusqu'à l'exportation vers le bas . Allons de l'avant et ajoutez une exportation ici et utilisez simplement PNG pour votre type de fichier, puis continuez et exportez connectez-vous. Il vous demandera où vous voulez l'enregistrer, donc je vais juste l'enregistrer dans mes téléchargements. Donc, une fois que j'ai fait cela, ils vont aller de l'avant et juste le faire glisser de mon dossier de téléchargements directement dans cette page de tutoriel. Alors allez-y et centrez le. Et puis allons de l'avant et ajoutons une contrainte de gauche et de droite et de haut et de bas. De cette façon, il gardera cette image attachée à tous les bords, peu importe comment nous la dimensionnons, bien sûr, nous voulons aller de l'avant et simplement déplacer cela tout le chemin vers le bas où nous avons notre rectangle juste en dessous. Et on n'a plus besoin de ce groupe ici. Donc, il est supprimé. Et une fois que tu as fait ça, ça, je vais aller de l'avant et appliquer la même contrainte au rectangle Ah, que nous utilisons pour notre effet ici, droite, le flou. Alors allons de l'avant et appliquez simplement la contrainte de haut à gauche et à droite et aussi en haut et en bas. Et puis on peut aller de l'avant et regrouper ces deux-là ensemble et y aller et simplement le verrouiller. Rends les choses plus faciles. Donc maintenant si je redimensionne cette page Mais ce cadre ici, vous verrez qu'il va aller de l'avant et garder l'image pour l'arrière-plan et le bon endroit. Ah, mais la carte didacticiel ici n'est pas contrainte correctement. Donc, c'est comme l'instance de la carte de tutoriel ici et puis à une contrainte hors centre. Donc maintenant, si je fais la même chose ici va aller de l'avant et de maintenir l'année de taille. Je vais juste sélectionner iPhone 11 pro à nouveau. Alors maintenant, ça marche. Je veux rapidement appliquer les mêmes contraintes ici aux deux autres pages de tutoriel. Alors allons de l'avant et sélectionnons ce groupe. Copie-le. Je suis ici à mon tutoriel pour coller ça, amenez-le ici pour diriger les deux autres. La beauté de celui-ci est que lorsque vous copiez quelque chose, les contraintes seront copiées avec lui aussi. Donc on n'a pas besoin de refaire cette partie. Copions encore. Tutoriel trois. Faites la même chose. Déplacez-le ici, supprimez les deux autres, puis tout ce que nous devons faire est de passer à nouveau l'instance ici, choisissez le centre. Donc, en utilisant le centre va juste maintenir la taille de cette carte afin que nous ne le redimensionnons pas. En fonction de la taille de l'appareil, nous allons juste le centrer Selon l'écran avec lequel nous travaillons ici. La même chose ici. Donc maintenant, ces pages sont toutes terminées. Et enfin, passons à notre page de paiement ici. Hum, donc ça va être super simple pour celui-là. Allons de l'avant et faisons le centre et le haut pour la carte ici. Nous ne voulons pas qu'il se redimensionne. Donc, vous permet de centrer et de centrer pour cela aussi, similaire à notre carte de tutoriel, puis pour le bouton ici, nous voulons faire. Faisons à gauche et à droite et au centre. Maintenant, si je redimensionnais ce cadre à, disons, un iPhone 11 Pro Max ici, je pense que ça a l'air bien. Donc là, vous l'avez. C' est nos contraintes. Et maintenant, nous avons essayé toutes les pages que nous avons conçues jusqu'à présent. Maintenant, pour garder ce cours concis et au point, je n'ajouterai aucune contrainte à chaque page individuelle. Mais à la fin, je vais inclure un fichier que vous pouvez télécharger pour la maquette finale. Vous, je souhaite inclure toutes les contraintes appliquées. Donc, comme un exercice, vous pouvez certainement appliquer des contraintes tout au long de l'ensemble u I et ensuite revenir à ce fichier à la fin juste pour vous assurer que vous l'avez fait correctement. 18. Utiliser des pluies: Bon, donc si vous avez suivi jusqu'à présent Ah, nous avons conçu certaines des premières pages ici, et nous avons appris un tas de choses différentes, des composants aux contraintes. Ah, et maintenant je pense que nous sommes prêts à sauter sur notre page de carte ici si nous regardons notre croquis ici. Ah, on voit qu'on a une petite carte avec un bouton de sauvegarde ici et peut-être pour nous dire où on en est et une barre de recherche en haut. Assez simple. Mais je ne sais pas pour toi. Je ne suis pas sûr à 100% de la façon dont nous aurons une carte dans notre conception. Et c'est pour ça qu'on va parler de branchements dans cette leçon. plug-ins et les figurines sont essentiellement là pour aider à automatiser votre conception et vous aider à faire passer vos conceptions à un niveau supérieur et à rendre les conceptions encore plus rapides. Donc pour accéder aux branchements. Si vous êtes sur le web, vous pouvez aller à l'option de menu ici, puis aller à brancher sur. À partir de là, vous verrez la liste des connecteurs installés. Puisque nous n'avons pas de branchements d'installation, vous verrez ici Il dit juste gérer, brancher. Nous allons donc aller de l'avant et cliquer sur Gérer les plug-ins. Donc à partir d'ici verra un tas de plug-ins de fonctionnalité comme ce qui était populaire qui sont fabriqués par la communauté. Et vous pouvez vraiment les utiliser à votre avantage lorsque vous concevez vos projets. Bien sûr, ces air ne sont pas tous les branchements ici. Vous pouvez aller de l'avant et les parcourir tous en descendant ici où il est dit, parcourir les plug-ins. Donc, comme vous pouvez le voir, nous avons des tonnes de branchements ou aller jusqu'au sommet. Je vois unspool. Ash l'a branché. Si vous vous souvenez, il ya quelques leçons sera ajouté image de fond dans notre page de connexion sur Splash a effectivement un plug in fig MMA. Donc, au lieu d'aller sur le site de débogage de cendres , de trouver des images, les enregistrer et de les glisser dans votre figue, mes fichiers , hum, la prise d'éclaboussure vous aidera à faire la même chose. Mais en une seule étape, il y a des graphiques que vous pouvez créer à l'aide de cette fiche là quelques icônes. Il y a Avatar, donc si vous faites un apt avec des avatars, vous pouvez aller de l'avant et utiliser cette prise dans celui-ci est vraiment cool. Ici, il s'appelle Google Sheets Sink. Il y a de très bonnes chances que nous l'explorions dans une prochaine section. Ah, ce qu'il fait, c'est que, comme son nom pourrait le suggérer, c'est qu'il coulera votre conçu avec une feuille Google. Donc, disons que vous avez un design avec une liste de texte différent. Vous pouvez en fait couler ça avec des draps frais. Ainsi, au fur et à mesure que vous changez vos feuilles Google, ce texte changera au sein de vos designs. C' est cool ? La liste continue et continue. J' aimerais entendre quelques-uns des plug-ins utiles que vous avez trouvés, et il y a juste beaucoup à explorer. Donc, si vous voulez m'envoyer une suggestion d'un branchement que vous utilisez, hum, hum, allez certainement l'avant et partagez ça avec nous dans une section Q et A, ou simplement envoyez-le-moi par e-mail. Vous pouvez m'envoyer un e-mail à bonjour intelligent à gmail dot com. Donc, je vais laisser cela ici sur l'écran afin que vous puissiez aller de l'avant et m'envoyer quelques plugins cool que vous trouvez donc en haut ici, vous pouvez également rechercher un plug ins spécifique pour rechercher la carte, et ensuite nous allons utiliser ce 2ème 1 ici et aller de l'avant et installez-le. Donc, c'est juste une petite note pour nous dire que la prise a été conçue par un développeur tiers et pas fig mes eux-mêmes. Alors allez-y et juste installé une prise. Et on y va. Branchez, installé. Je vois qu'il est installé ici. Je peux le désinstaller si je ne veux plus l'utiliser. Si vous voulez en savoir plus sur ce que fait ce plug in et comment l'utiliser, vous pouvez aller de l'avant et simplement cliquer ici, donc c'est là que nous allons faire. Et comme vous pouvez le voir, cela nous aide à rendre la carte personnalisée flamboyante rapidement. Cool. Je vais juste faire défiler ici. Vous pouvez appliquer Google maps ou ma boîte, donc c'est plutôt cool. Et ça nous dit comment l'utiliser. Sélectionnez n'importe quel calque, y compris le rectangle, les lèvres ou même le polygone et exécutez. Mon pinker semble assez simple, alors revenez à notre design ici. Allons de l'avant et, comme il est dit, créer un rectangle et je veux que ce rectangle prenne en charge l'ensemble du cadre ici qui semble bon. Non, allons de l'avant et allons à cette option ici et garder à l'esprit dans l'application de bureau. Vous pouvez y accéder à partir de plug-ins aussi. Mais si vous êtes sur l'application Web, vous pouvez aller ici et faire des branchements. Maintenant, vous devriez voir cartographe ici. Allez-y et cliquez dessus. Le chargement peut prendre un certain temps. Une fois qu'il se charge, il vous donnerait quelques options ici afin que vous puissiez entrer une adresse personnalisée. Vous pouvez modifier le type de carte que vous souhaitez, qu'il s'agisse d'une carte routière , d'un satellite hybride, etc. Niveau de zoom. Donc je pense que tout ce que je vais faire, c'est peut-être zoomer un peu sur cette carte. Et puis faisons la carte et là tu l'as. Nous avons une carte à l'intérieur de nos designs. Assez cool 19. Finir la page de la carte: Maintenant Lester est terminé. Le reste du dessin de notre carte va passer à mon croquis ici. Donc, pour la page de carte, nous voulons une petite barre de recherche ici avec une petite icône de recherche ainsi que du texte, puis un bouton de sauvegarde , ainsi qu'une icône de localisation actuelle. Donc, nous avons besoin d'icônes ici et puis une barre de recherche, puis à des composants de bouton. Alors allons de l'avant et passons à notre conception et commençons par le haut. Utilisons l'outil rectangle. Dessinez un rectangle ici et restons cohérents et gardons un espace de 25 pixels de la gauche et de la droite. Alors bien sûr, j'ai besoin de redimensionner ça un peu plus sur. Allons de l'avant et changeons le remplissage en blanc. Maintenant, il est encore à peine visible, alors pourquoi ne pas aller de l'avant et ajouter un trait gris clair ? Je pense que quelque chose comme ça fonctionnerait, puis allons de l'avant et définissons une épaisseur de 1,5 pixels. Allons de l'avant et arrondissons à six pixels. Faisons huit en fait. Ah, et allons de l'avant et ajoutons aussi un effet de l'ombre portée ah. Changez le Y 25 ici, changez le souffleur à 10 et ramenez la corde une ville à peut-être 15% pour Faisons en fait 10%. Déplaçons le Y à deux, peut-être ou trois. Je pense que ça commence à se réunir. Passons simplement par Tore Design. Ici, nous avons une petite icône de recherche, donc c'est insérer du texte ici pour la recherche. 16 est bon pour la taille de la police. Allez-y et changez le chemin à la normale. Je vais juste y aller et ajouter un peu d'espace pour notre icône qu'on va ajouter. Allons y ajouter une autre ombre portée cette fois. Allez-y et faites le X zéro et le Y zéro aussi. Allez-y et faites le souffleur 30 sont en fait 25 sur GOP City. À cinq ans. Je vais doper une ville de 1 à 20 % ou en fait 15, donc ce n'est pas trop dur. Je pense que ça commence à paraître mieux ici. Maintenant, allons de l'avant. Retour dans notre ressource est pour le projet. Une fois que vous avez ouvert, passez sur deux icônes carte et puis vous verrez que nous avons deux icônes années. Alors ce qu'on va de l'avant et on les traîne dedans. Je vais utiliser Shift old pour les redimensionner ici. Il suffit de les déplacer ici. Commençons par l'icône de recherche ici. Assurez-vous que les proportions sont limitées ici. Ensuite, faites 25 année, sorte que change automatiquement la largeur et la hauteur ensemble. Zoom avant. Mettez cela ici ici et puis Allons-y et donnons-lui un style de sélection du bleu, moins d'aller de l'avant et de changer la couleur de sélection pour cela au bleu primaire que nous avons . Mettez ceci en bas et donnez-lui une goutte d'ombre. Ombre nous à 20 sur 20%. C' est bien. Je ne suis toujours pas très content de l'ombre de la barre de recherche ici. Je pense que c'est un peu trop fort, alors allons-y et changeons. Le 15% change le bleu ici à peut-être 10. Je pense que c'est un peu mieux. Nous voulons changer le texte ici pour faire une couleur claire à nouveau. Puisque cela va être un espace réservé, hésitez pas à mettre juste un neuf un neuf un neuf pour le code hexadécimal ici pour obtenir la même couleur. Et je pense que la dernière chose ici est notre bouton de sauvegarde. Donc, quand nous allons de l'avant et que nous allons sur nos actifs, haut ici et aller de l'avant et déplacer un bouton activé sur l'écran ici, assurez-vous juste que l'espacement est approprié, et il ne fait que déplacer cela ici. Peut-être que nous voulons également montrer à l'utilisateur où leurs annonces. Donc, quand nous allons de l'avant et utiliser une forme ovale, zoomer ici et créer peut-être un cercle de 21 par 21 duplicata qui est dans la commande D ici qui font un plus grand de peut-être 72 par 72 an. Revenons à notre panel de leaders et essayons de les aligner, mettre l'autre au-dessus de celui-ci et ensuite simplement les aligner ensemble au centre pour le plus grand. Ici, nous allons de l'avant et définissons la couleur du texte à notre en utilisant notre couleur locale. Choisissons cette couleur, puis choisissons le nope, une ville de Faisons 30% ici sauf si changé les autres lèvres ou l'autre cercle à cette couleur ici. Je pense que ça a l'air bien pour l'instant. On peut même le rendre un peu plus grand. Je vais utiliser Ault et changer ensemble pour garder le centre de ça. Et je pense que ça a l'air bien ici. C' est beaucoup trop grand. Redimensionnons à 35 par 35. Assurez-vous que la proportion contrainte sur laquelle il est et faisons 35 par 35 ici. Eh bien, en fait, faisons 38 puis allons de l'avant et alignons ça ici. Et je pense que ça a l'air plutôt bon pour l'instant. Nous avons juste besoin de changer ce texte pour Nous avons ici pour vous sauver, enregistrer l'emplacement ou recevoir la robe. Et nous l'avons là. C' est notre page de carte sur. On y est presque. Nous n'avons plus que trois pages méchantes à parcourir, et donc nous allons terminer ça ensemble dans la prochaine section du cours. 20. Conseils de conception UX: jusqu' à présent, nous avons travaillé sur l'utilisateur et à formuler pour cette application ici. Donc, si vous n'êtes pas familier avec la conception de l'interface utilisateur, voici un exemple de U I ou une interface utilisateur. L' interface est avec laquelle l'utilisateur interagit. Mais plus important encore, nous avons la conception de l'expérience utilisateur, qui est essentiellement ce que les gens ressentent quand ils utilisent le vôtre. Passons rapidement pour en apprendre un peu sur la conception UX et ce qu'elle est et comment nous pouvons appliquer à notre projet. Donc, ce que vous X Expérience utilisateur, ou conception UX est un processus équipe de conception utilisé pour créer des produits qui fournissent des expériences significatives et pertinentes aux utilisateurs. En d'autres termes, l'expérience utilisateur. Le design est une première façon humaine de concevoir des produits, n'est-ce pas ? Au lieu de simplement penser à mettre certains éléments dans une page et ensuite vous appeler aujourd'hui, nous pensons en fait à la façon dont les gens seront suivis avec ce produit ah, puis revenir en arrière et redessiner et nous assurer que nous l'améliorons dans un façon où les gens se sentent bien de les utiliser ou même génial. Voici donc un exemple de U I vs U ex. Ah, toi. Je suis ce que les gens voient devant eux. L' interface réelle, alors que vous X est la façon dont ils interagissent avec elle, comment ils l'utilisent, comment ils se sentent pendant qu'ils l'utilisent. Donc il se passe beaucoup plus avec toi. Ex grand You X est lisible pour les utilisateurs car cela signifie une grande utilisation des polices et tailles sous ici, vous pouvez voir un exemple de pauvres UX Um, ces polices pas très accessibles ou faciles à lire. Et en général, essayez d'augmenter vos tailles de police et utilisez également des fonds faciles à lire par opposition à quelque chose comme celui-ci. Super. Vous excuses, couleurs et moyens qui augmentent un contraste amélioré. Donc c'est vraiment important ici. Vous voulez vous assurer que vous avez un contraste élevé dans vos conceptions. Euh, sur la droite ici, nous pouvons voir un exemple de pauvre vous X, où il est difficile de lire le texte parce qu'il a un faible contraste la différence de couleur ou de teinte entre le premier plan ici, qui est le texte et l'arrière-plan. Mais ce sera un gris clair ici est assez bas, donc pour améliorer ce texte, vous pouvez soit rendre le texte un peu plus sombre. Ou si vous pouvez abaisser l'arrière-plan et le rendre plus léger, vous pouvez le faire aussi pour aider à améliorer le contraste, espacement est vraiment important. Vous ne voulez pas submerger l'utilisateur avec trop d'informations en un seul endroit. Ah, si génial que vous excusez l'espacement pour séparer le contenu sur. Et puis sur la droite ici, vous pouvez voir que c'est un peu accablant. Il y a trop d'informations dans une zone. Hum, donc c'est parce qu'il n'y a pas d'espacement entre le texte ou les objets là-bas et en général, suffit de sentir la plupart de votre conçu avec de l'espace blanc. Ce n'est donc pas accablant à moins que deux éléments de contenu ne soient pertinents. Donc, cela signifie que, sauf si vous avez des choses qui sont liées les uns aux autres, essayez de les séparer autant que vous le pouvez juste pour aider à améliorer le cool U X. L' alignement est donc très important aussi. Super. Vous excusez l'alignement pour que les choses se sentent bien dit que vous pouvez voir ici à ma gauche. Ici, euh, tout a l'air bien organisé et doublé, alors qu'à droite, il ne se sent pas juste de regarder les formes parce qu'elles sont complètement mal alignées. Donc, si vous vous souvenez tout au long de notre conception, nous avons utilisé un outil de ligne beaucoup comme je l'ai mentionné précédemment, parce que c'est vraiment important. Et la cohérence de la conception ux est une autre grande. Vous voulez vous assurer de rester cohérent avec vos couleurs. Hum, et tu es toi moi pour améliorer tes œufs. Donc, pour notre projet, c'est pourquoi serait choisi le schéma de couleurs afin que nous restons dans une palette de couleurs spécifique ou un schéma de couleurs Donc, nous ne confondons pas les utilisateurs juste ici. Nous pouvons voir que nous introduisons de nouvelles couleurs sur la droite ici. Donc, il y a un vert à moins que ça n'ait un sens. Donc, par exemple, si vous voulez dire félicitations, Donc, si vous voulez donner,par exemple, par exemple, un type de texte à succès à l'utilisateur, bien sûr, vous pouvez utiliser le vert, mais essayez de ne pas pour utiliser trop de couleurs et à beaucoup de types différents de polices et de choses comme ça, et essayer de le garder cohérent. Um, essayez de garder vos polices de la même taille et de garder le contenu pertinent ensemble, non ? Donc, vous voyez que le Texas tout le chemin en bas, où, comme il devrait être plus proche de l'autre texte parce qu'ils sont pertinents, nous avons presque terminé ici est si grand que vous X est facile à utiliser, simple que les boutons sont accessibles et ils sont assez grands pour appuyer. Et, hum, je ne peux pas insister assez parce que j'ai vu beaucoup d'applications où les deux ont mis les boutons dans des endroits très difficiles à atteindre, surtout sur mobile. Comme vous pouvez le voir à droite ici, général, vous voulez éviter d'avoir fréquemment utilisé des boutons tout en haut. Ne rendez pas vos boutons trop petits, surtout sur mobile, où vous utilisez vos doigts pour attirer avec le design. Ne rendez pas vos boutons trop petits, surtout sur mobile, Si vous faites un bouton beaucoup trop petit et que quelqu'un a peut-être une taille de main supérieure à la moyenne , il va probablement manquer ce bouton. Donc certainement rendre vos conceptions accessibles à tout le monde, où autant de gens que vous pouvez vraiment, parfois dans la conception. Il est très difficile de rendre votre design complètement accessible à tout le monde, mais il est certainement préférable d'essayer de le rendre accessible à tout le monde. Libérer vos propres utilisateurs afin qu'il y ait beaucoup plus à cela. L' ajout de nous formidables à vos conceptions prend du temps et des tests pour obtenir le bon résultat. Donc s'il vous plaît soyez patient avec. Ah, mais vous pouvez commencer par appliquer le raidi. Votre design. Hum et c'est une excellente façon de commencer. Alors maintenant c'est à ton tour de faire. Excellent ux. J' ai mis ce petit spectacle ici. Dans votre ressource est ceci est quelque chose que je viens de mettre en place comme un petit manuel pour votre ux que vous pouvez appliquer à vos futurs projets. Alors n'hésitez pas à télécharger le pdf et à l'avoir à portée de main quelque part. Donc, la prochaine fois que vous concevez votre projet, vous pouvez simplement vous rappeler quelques-unes de ces choses. Au cas où tu oublierais. Très bien, donc nous avons beaucoup appris sur la conception de l'expérience utilisateur, et maintenant, que nous concevons nos simulations, nous allons vous garder à l'esprit X et y revenir et nous assurer que nous ajoutons tous les pour une excellente expérience utilisateur. 21. Modèles de conception iOS: Très bien, je pense que nous sommes prêts à commencer à concevoir notre profil de demande et nos pages de services. Mais avant de faire cela, je veux aller de l'avant et sauter dans la ressource est pour cette leçon juste ici. Vous pouvez aller de l'avant et télécharger ce fichier texte. Ah, où il y a un tas de ressources, c'est pour ce qu'on appelle des modèles dans la Fig MMA. Donc essentiellement les modèles dans la fig Mama, tout comme beaucoup d'autres applications comme les logiciels d'édition de paroisse, vous permettent de commencer avec les modèles Primi pour que vous n'ayez pas à faire beaucoup de choses à partir de zéro. Et pas seulement cela, modèles vous aideront à avoir accès à des composants pré-construits que vous pouvez simplement glisser dans votre conception et particulièrement pratique quand il s'agit de vous d'Apple I enfants pour la conception. Donc, bien sûr, je nous 13 et tout autre nous que vous avez travaillé avec auront certains modèles . Nous commençons un composant de conception à elle déjà construit, sorte que vous n'avez pas besoin d'aller de l'avant et de reconcevoir cette même chose pour le matériel de Google conçu ici. Donc, j'ai inclus un tas de ressources est ici s donc passons rapidement à travers eux juste pour que vous puissiez savoir comment vous pouvez les utiliser pour votre travail futur. Fig MMA a leurs propres modèles sous les sites Web. Si votre fig ma dot com slash modèles, vous serez en mesure d'accéder à ce site Web où ils ont un tas de modèles différents comme Mobile You I Kits et modèles Instagram et un tas d'autres choses cool que vous pouvez utiliser comme Venn diagrammes et des choses comme ça, la prochaine ressource ici est fig. Plus de ressources est dot com, également très populaire. Comme vous pouvez le voir, il y a beaucoup de modèles différents qu'ils ont que vous pouvez recommencer avec eso. Cela vous aide à sauter dans votre design sans avoir à commencer à partir de zéro. Hum, et il y a des tonnes de ressources ici provenant de la communauté, alors n'hésitez pas à en profiter et à gagner beaucoup de temps pour vos créations. C' est un autre site fig, mon crash dot com. Allez-y et vérifiez. Ils ont beaucoup de ressources est et vous je les enfants est faible. Et puis ces deux dernières ressources est bien sûr, comme je l'ai mentionné pour la ressource de conception de pomme. Eso est d'ici ? Si vous descendez, vous pouvez nous voir des modèles afin que vous puissiez télécharger, et je sais en ce moment qu'ils n'ont pas simulé mon ici. Mais gardez à l'esprit que vous pouvez toujours télécharger la version d'esquisse puis l'importer dans vos fichiers de figment. Et puis il y en a un tas d'autres si vous concevez pour différentes plates-formes. Donc, puisque nous concevons pour un iPhone fonctionne maintenant, allons de l'avant et téléchargez le croquis ici, alors utilisez le second ici pour télécharger pour croquis et, eh bien, c'est le téléchargement. Je vais aller à la dernière ressource ici. Si vous travaillez sur une application Android ou toute application qui va être exécutée sur appareils Android ou même certaines applications Web, vous pouvez certainement profiter de cette page de conception de matériel ici de Google. Cool. C' est donc des modèles pour nous. Hum, alors allez-y et ouvrez ce fichier de croquis d'iris que vous avez téléchargé à partir d'Apple et ensuite dans la leçon suivante va aller de l'avant et l'utiliser dans notre projet 22. Travailler sur nos pages principales: Très bien, Donc, si vous avez suivi le long jusqu'à présent, nous sommes allés de l'avant et téléchargé la ressource de conception Apple pour IOS. Ah, si vous ne l'avez pas fait, allez-y et suivez cette étape dans notre dernière leçon. Et puis une fois que vous téléchargez cela, vous devriez être en mesure d'ouvrir ce fichier ici d'où vous pouvez gagner utiliser les fichiers de croquis IOS 13 . Acela a installé les fonds dont vous avez besoin. Ah, alors n'oubliez pas de vous rendre sur ce site. Je l'ai déjà ouvert. Apple utilise ces types de police tout au long de leur vous je Donc, il est préférable si vous allez de l'avant et télécharger tous ces fonds sur juste les avoir sur votre système. Et de cette façon, quand nous importons le fichier de croquis Ah, nous n'aurons aucun problème là-bas. Alors allez-y et téléchargez ces polices et nous y reviendrons. Donc je vais aller de l'avant et m'assurer que j'ai toutes ces polices et ensuite on y arrivera . Je tiens à mentionner rapidement que si vous utilisez l'application web fig ma, um, allez-y et la tête sur fig ma dot com. téléchargements de barre oblique. Ah, puis allez de l'avant et téléchargez cet installateur de polices ici. Que vous ayez Mac ou Windows, ils ont tous les deux ici. Comme vous pouvez le voir, l'application de bureau n'est pas nécessaire. Comme vous pouvez le voir, L' installateur du fonds. Mais pour que vous puissiez appliquer vos polices installées sur votre machine dans votre site web figment, euh, euh, sur votre navigateur, vous devrez utiliser cet installateur de polices après avoir installé vos polices. Je vous recommande de quitter le produit qui s'arrête et de l'ouvrir à nouveau pour vous assurer que les fonds que nous avons installés ont été appliqués. Alors maintenant que nous sommes prêts à importer sont US 13 fichier de croquis ici, passons à la fig MMA et revenons ensuite aux fichiers principaux. La page principale ici. Je l'ai déjà importé. Mais si vous n'avez pas aller de l'avant et ouvrez un croquis US 13, puis allez-y et faites simplement glisser ce que vous I éléments conçus à plus guides directement dans votre carte de figues. Ah, je devrais juste prendre une seconde pour le convertir en fichier figment, puisque c'est un fichier de croquis. Mais une fois cette étape terminée, vous pouvez aller de l'avant et ouvrir votre dossier ici. Ainsi, à partir de là, vous avez accès aux couleurs, textiles des zones de sécurité Apple, l'interface IPAD ainsi qu'à l'interface iPhone. ce moment, nous sommes intéressés par l'interface iPhone. Voilà donc allez-y et ouvrez-le. Et puis nous cherchons à appliquer quelques choses en ce moment. Je vais juste faire glisser mon croquis ici. Vous verrez d'ici que sur ces deux pages, nous voulons avoir une barre de navigation ici sur et sur ces trois pages. Les pages principales auront une barre de pression afin de basculer entre ces pages. Donc, continuons et faites glisser dans la barre de navigation et un onglet ou dans nos conceptions des lignes directrices AL US 13. Laissez-moi aller de l'avant et zoomer ici, et ensuite c'est probablement ce que nous recherchons. Ici, nous avons les barres de navigation et les barres d'état air ici. Donc, le moyen le plus simple de les appliquer à notre obligation est d'aller de l'avant et d'utiliser des composants. Il y en a. Tous ces éléments sont déjà des composants, mais bien, vous pouvez le faire est que vous pouvez aller de l'avant et les utiliser dans vos propres projets. Je pense qu'en ce moment nous sommes juste intéressés par ce cadre spécifique ici. Alors pourquoi ne pas aller de l'avant et appuyez simplement sur la commande, Voir sur l'ensemble du cadre, Alors assurez-vous que vous avez tout sélectionné. Um, utilise ça. Vous éléments, les barres de tableau de bord et allez de l'avant et copiez le tout. En utilisant la commande, voir ? Et puis dirigez-vous vers votre projet ici. Allons de l'avant et créez une nouvelle page et nommez-la IOS vous. Je composants et je vais de l'avant et juste coller ça ici. Donc maintenant, nous pouvons utiliser les sur nos conceptions afin que nous puissions utiliser cette barre de navigation juste ici. Alors pourquoi ne pas aller de l'avant et traîner ça dehors ? Allons de l'avant et aussi faire glisser ce statut pour ici. Ici, je vois que nous avons les barres du haut aussi. Ah, nous voulons trois options dans notre. Alors allons de l'avant et sélectionnons celui-ci ici et faites-le glisser aussi. Et donc, allons de l'avant et maintenant sélectionner chacun de ces séparément et créer un composant à partir d' eux. Faites-le pour la barre d'état, puis nous le ferons pour la barre de navigation ici et enfin ou Tabor ici. Et maintenant, si je pouvais retourner à ma page de balises ici, concentrons-nous sur notre page principale est ici. Allons vers les actifs haut ici et puis d'où nous avons IOS vous composants I. Faites glisser dans une barre d'état. S' il vous plaît, asseyez-vous en haut. Allons de l'avant et utilisons toutes les copies glisser-dessus sur chacune de ces pages, et nous aurons besoin d'une barre de navigation sur notre page de profil. Alors allons de l'avant et traînons ça dedans. Maintenant, vous verrez qu'il couvre ma barre d'état. Donc, il faut un raccourci dans Fig Mayes que vous pouvez utiliser la commande et les crochets pour déplacer les calques vers le haut et vers le bas. Alors allez-y et appuyez sur la commande et le crochet carré qui s'ouvre, et cela déplacera votre calque que vous avez sélectionné en dessous de l'autre. C' est ce qu'on veut ici. Allons de l'avant et faites simplement glisser cela dans juste ici, puis utilisez à nouveau la commande et le crochet carré d'ouverture pour le mettre en dessous de la couche que nous voulons. Et enfin, allons de l'avant et faites glisser l'onglet ou dans les trois pages parce que ce sera notre structure de navigation . Nous utilisons donc cette barre supérieure pour basculer entre ces trois pages. Nous allons ajouter les icônes ici dans la prochaine leçon, mais pour l'instant, continuons et renommons simplement nos pages en conséquence. Donc le profil de celui-ci et les services de celui-ci, allons-y et revenons juste à mon croquis ici. Oui, c'est ça qui a l'air juste. Nous avons juste un bouton d'édition ici aussi. Alors allons de l'avant et ajoutons cela aussi. Allons de l'avant et supprimons ce carré ici ainsi que celui ici. Et nous allons de l'avant et le faire à partir d'ici est bien et puis dans celui-ci juste ici, allons juste de l'avant et ajouter et à un bouton. Maintenant, gardez à l'esprit, j'utilise la police d'affichage SF Pro. C' est le devant que IOS utilise en ce moment. Alors allez-y et choisissez ça. Et puis nous allons de l'avant et redimensionnons cela à 24 22 année et déplacons cela ici. Allons de l'avant et changeons le Phil en utilisant nos styles de couleurs, aussi. Le bleu que nous avons, je pense que ça a l'air bien. Donc maintenant, nous avons mis en place nos barres de navigation sont des barres de robinetterie et nos barres d'état aussi bien. C' est une sorte de base ici dont nous avons besoin dans la prochaine. Ecoute, on va revenir et commencer à concevoir notre barre d'onglets ici un travail de Zarrella sur notre page de demande . 23. Concevoir une Concevoir une barre d'onglet pour la navigation: D' accord. Si vous avez suivi jusqu'à présent, nous avons mis en place nos trois pages principales en utilisant certains des composants de l'Iowa. Si vous n'avez pas suivi à nouveau, allez dans le dossier UPS simulé et la ressource est pour ce projet, puis ouvrez les annotations et allez de l'avant et ouvrez simplement la leçon la plus proche de celle-ci et importez simplement cela et suivez. Bon, donc maintenant il est temps de concevoir notre page de demandes. Mais avant de le faire, nous allons de l'avant et mettre en place notre onglet sont correctement alors allez-y et ouvrez. Notre ressource est pour ce projet. Une fois que vous êtes ici, allez de l'avant et ouvrez le dossier Icônes, puis ouvrez Tabor. Et puis vous verrez trois icônes ici pour notre robinet notre. Mais nous voulons aller de l'avant et ajouter réellement ces composants et nos composants plutôt que ces instances ici. Alors allez-y et juste comme l'une des barres du haut ici et puis cliquez. Accédez au composant maître ici. Une fois que vous avez fait cela, vous pouvez aller de l'avant et maintenant faire glisser ces icônes ici. Allons-y et faites-les glisser, puis continuons et maintenez la touche Maj et redimensionnez-les ici et cliquez sur cette contrainte proportions. Et puis donnons-leur une largeur de 32. Je vais juste cliquer cette année, puis ajouter une grille de mise en page et allons de l'avant et choisir Kahlan sur un compte de trois. Il suffit de changer la ville de Kobe à 5%. Allons de l'avant et fermons ça, et c'est là qu'il se trouve. Les grilles sont pratiques. Allons de l'avant et juste doubler rapidement ici et déplacer ces icônes en conséquence. Je veux Ah, nos services passés ici. Nous voulons changer ces deux-là donc nous avons notre demande moitié ici et ensuite notre profil ici aussi . Ouvrez le panneau ou calques. Donc on voit ce qu'on fait ici. Débarrassez-vous de cette couleur de tente la 10ème couleur sur celle-ci et les dizaines de couleur ici. Et puis nous allons de l'avant et juste centrer Ceux-ci sélectionnons ou grille ici et changez la gouttière pour que c'est mieux et ensuite aller de l'avant et juste centrer ceux le long. Ça a l'air bien. Ajoutons un texte pour chacun d'entre eux afin utilisé T Faisons profil re tailles, aussi. Tous les 14 et allons de l'avant et je pense que nous pouvons déplacer nos icônes un peu vers le haut . C' est 25 pixels. La même chose ici et enfin ici. Et puis il suffit d'utiliser la commande D ici et une fois de plus. Assurez-vous que cela est aligné. Allons de l'avant et changeons juste le texte ici. Nous ferons des services et je ferai des demandes. Allez-y et juste centrer ces longues-là. La même chose ici. Allons de l'avant et maintenant supprimer la mise en page. Bien. Ici. Je pense que ça a l'air bien. Nous voulons un moyen de montrer quel robinet est actif. Bon, donc pour montrer quelle page était sur, nous allons avoir une couleur de sélection différente en fonction du robinet sélectionné. Donc, nous allons faire trois grandes instances pour chacun de ces en cours de sélection. Et pour ce faire, je vais juste aller de l'avant et sélectionner mon composant entier ici, utilisé vieux et traîner un autre ici, puis juste utiliser la commande d deux fois de plus . Donc, vous avez le composant principal ici, puis trois instances de ce composant. Et puis je vais créer un composant à partir de chacun de ces composants célestes. Et j'ai renommé celui-ci à l'onglet R profil barre oblique sélectionné sélectionner celui-ci ici créer composants renommés à la demande barre oblique de la barre d'onglet sélectionnée et puis enfin, ici nous allons créer un composant ici et faire appuyer sur les services barre oblique sélectionnés. Et là, nous allons et un jeune, nous le faisons pour que nous puissions facilement basculer entre chacun dans nos modèles simulés. Alors maintenant je me dirige ici vers le profil barre oblique supérieure sélectionné, et allons de l'avant et sélectionnez ou icône ici. Changez la couleur de sélection, en utilisant les styles à notre couleur principale. Même chose pour le texte ici, puis en appliquant la couleur primaire. Faisons la même chose ici, mais sur demande. Et enfin, faisons la même chose pour les services sélectionnés une fois de plus. Je vais juste y aller et m'assurer que tout est centré. Je pense que maintenant tout était parfaitement centré. Allons de l'avant et revenons à notre discours de balisage maintenant et maintenant. Comme vous pouvez le voir, j'ai ce bel onglet ou ici montrant différentes pages. Allons de l'avant sur notre page de demande ici. Bon mot, dit Tab ou ici. Et puis passons à Iose. Vous avez sélectionné des composants, appuyez ou puis faites la demande. Là, nous allons et à moins que par la même chose pour le profil, Allez-y et cliquez sur cette barre d'onglets et faire planche supérieure. Et le profil de celui-ci est sélectionné. Et enfin, faisons les services Tabor sélectionnés. On y va. Donc, nous avons un tabulation maintenant conçu pour chaque page. Hum et puis on va aller de l'avant et sauter dans la conception de notre page de demande dans la prochaine leçon. 24. La page Demandes: pour commencer sur notre page de demande ici. Vraiment vite. Passons à notre dessin ici. Ah, donc d'abord, nous voulons un peu de rechargement ou leur icône de rafraîchissement ici. Nous voulons que notre petit extrait de carte soit en mesure de taper et d'aller sur notre carte A pour définir notre adresse. Um, Et puis ce sera agréable de montrer un pan de sont actuellement sélectionnés adresse, je suppose. Et puis nous voulons un robinet de demande de blanchisserie juste ici et avec une petite carte de magasin ici. Ah, eh bien, allez-y et dessine la carte du magasin plus tard. Pour l'instant, allons de l'avant et commençons l'ensemble de la mise en page ici. Alors faisons notre chemin de haut en bas. Les premières choses d'abord. Je veux aller de l'avant et créer un petit rectangle ici. Il suffit d'aller de l'avant et de choisir la taille de peut-être 2 50 pixels ici en termes de hauteurs, assurez-vous que le avec prend pleinement l'espace horizontal ici. Nous allons insérer notre carte ici, mais avant de le faire, mais avant de le faire, j'ai testé la conception de la boîte de carte à la place. Je pense qu'il semble un peu mieux que la carte Google. Au moins pour les applications iPhone, peut-être une application Android. Cela aurait l'air bien, Mais ici, je veux aller de l'avant et réellement changer ma carte dans cette page, puis dans cette page, en utilisant un type différent de carte. Alors allons de l'avant et revenons très rapidement à notre page de carte ici. Revenons au rectangle qui crée notre carte. Et puis allons de l'avant et exécutons le créateur de cartes. Branchez-le à nouveau et cette fois choisissez les tabloïds comme zone de carte. Faisons un niveau de zoom de 15 et ils vont juste de l'avant et faire la carte. Je pense que ça a l'air un peu plus propre. Je veux juste changer l'ombre ici de mon rectangle. Ouais, donc pour le premier bavardage ici, je veux juste changer l'ouverture d'une ville pour peut-être faire 7% ici. C' est sur deux forts. Je pense que ça a l'air bien. Appliquons la même chose ici avec la carte. Allons de l'avant et sélectionnez ce rectangle ici et exécutez le cartographe Blufgan ici, allez à la zone de carte. Allons de l'avant et faisons la carte ici. Une chose ici, vous remarquerez qu'il couvre ma barre d'état, alors utilisons la commande et le support d'ouverture ici pour simplement le déplacer vers le bas. Une chose qui a l'air bien. Et maintenant mes barres d'état en quelque sorte mélangées avec la carte s. Je vais créer un petit rectangle juste pour couvrir une sorte de partie supérieure ici. Et allons de l'avant et déplacons ça sous ma barre d'état. On va verrouiller la couche de barre d'état. Allons de l'avant et rendons ce rectangle peut-être un peu plus grand ici. Je pense que quelque chose comme ça marcherait. Et puis nous allons de l'avant et changer le Phil en blanc couleur ici, Donnez-lui une ville de 50% et ajoutons un effet hors flou de fond. Allons faire tomber ce flou à 25. Fais 30 ici. C' est bien. Donc maintenant ma barre d'état est en fusion autant avec ma carte, qui est ce que je veux à nouveau. Cela fait partie de vous X. Vous voulez vous assurer que vos utilisateurs sont en mesure de voir leur barre d'état ah sans qu'elle se fond dans votre propre application. Donc, allons de l'avant et maintenant revenir à ma ressource est l'utilisation du dossier aller aux icônes aller dans la requête. Allons de l'avant et faites glisser ces deux icônes et voici d'abord Allons de l'avant et limitons les proportions et les redimensionner à 38. Et allons de l'avant et comme tout ça et amenons-le ici. Et je vais placer ma douleur de carte quelque part ici et aller de l'avant et changer la couleur de sélection trop bleue à l'effet d'une ombre portée. Peut-être changer le pourquoi ici à huit. Faisons 10 Blurt dit. Le flou à 10. Peut-être qu'il paiera la ville à 15. Voyons juste comment ça a l'air mieux. Allons de l'avant et donnons aussi une couleur de sélection de bleu à mes fesses ici. Allons-y et déplacons-le ici. Et je veux aller de l'avant et aussi donner cela de l'ombre portée. Mais cette fois faire si Pacenti ou le zéro Y faire le souffleur peut-être 10 sur. Amenez la dope une ville à 15 %. Je pense que c'est bon pour l'instant que, mais il pourrait certainement être un peu plus visible maintenant si je passe à mes designs ici. Nous voulons la demande de lessive Hap ici, alors allons de l'avant et créons un rectangle à partir d'ici peut-être. Bien que nous ne soyons pas à mon avis ou juste un était malheur ici et assurez-vous qu'il ne couvre pas réellement mon Tabor. Je pense que c'est bien. Changeons le Phil deux blanc et maintenez. Aussi affaiblir. Séparez notre rayon de coin ici et faites-le 20. Et puis on peut faire 20 sur celui-ci aussi. Je me souviens qu'une fois que tu as tenu Ault, tu sépares ton rayon de coin pour chaque coin, donc tu n'as pas besoin de tenir Ault. Une fois que vous verrez ce petit cercle à l'intérieur de notre contrôle du rayon de frontière ici. Donc maintenant, chaque coin agira indépendamment de l'autre, de sorte que vous pouvez aller de l'avant et les redimensionner sans avoir à tenir vieux. Ajoutons une ombre portée de do moins 10 ou en fait moins six Ici, augmentez le flou à peut-être 15 ou même 20. Je n'ai pas ramené le CPVP à 8 %. Je pense que ça a l'air bien. Je n'aime vraiment pas mes fesses ici, donc ce que je vais faire c'est en fait que je vais envelopper ça dans un ovale, alors allons de l'avant et utilisons l'okey. Et en ce moment, je place ça à l'intérieur de ce cadre donc je ne veux pas faire ça. Alors allons-y et faisons-le ici 2 48 par 48 puis redimensionnons cela aussi. Faisons 32 ou même 30 par 30. Allons et changeons le remplissage pour celui-ci en blanc, puis assurez-vous simplement de sélectionner l'ensemble du cadre d'actualisation ici, puis déplacez cela vers ici . Utilisez la commande fermer le crochet pour l'afficher. Ça a l'air bien. Je vais juste utiliser la commande G pour les regrouper et ensuite le placer ici et allons de l'avant et enfin à une ombre portée de zéro ex et pourquoi, dans un flou de 10, nous pouvons faire flou 15 et obéir. La ville de 15 est faible. Ça a l'air mieux. Allons-y et sautons ici et supprimez l'ombre portée de l' de rechargement ou de l'icône d'actualisation ici. On veut juste qu'elle soit appliquée au cercle. Ah, et à la deuxième réflexion, peut-être que je veux vraiment augmenter. Ils paieront la ville à 20%. Je pense que ça a l'air un peu mieux. N' hésitez pas à jouer avec le genre de fête de choses juste pour voir ce qui semble mieux. Ce qui vous semble juste. Maintenant, allons de l'avant et ajouter un Texan ici et nous allons faire vraiment aller de l'avant et faire Choisir magasin de blanchisserie et a changé la taille de la police année à peut-être 24 22 et le déplacer ici. Regroupez-les ensemble, puis continuez et centrez-les simplement et continuons à créer un rectangle. Tu veux faire 95 par 2 95 et juste centrer ça ici ? C' est plutôt bien. Je vais tenir le quart de travail et tout ce qui le rend légèrement plus petit. Peut-être avons-nous besoin de 75 par 2 75 et puis dans le rayon de coin de 20. Passons maintenant à mes biens ici. Accédez aux composants locaux, ouvrez les composants, puis faites glisser l'un de ces boutons. Et ici l'état activé et le centre aussi longtemps, puis changer le texte pour demander le service . Allons dans le panneau Calques et assurez-vous que cela fait partie de ce bouton fait partie de ce groupe . Allez-y et des endroits à l'intérieur d'ici aussi. Donc oui, tout ça est maintenant dans une couche ou un groupe. Cool. Donc, nous l'avons là. Je pense que c'est plutôt bon. C' est un bon début. Si je retourne en arrière, on a presque tous les éléments ici. Si je retourne en arrière, Nous allons entrer dans la conception de la carte de magasin dans la prochaine leçon. Alors n'hésitez pas à aller à la leçon suivante maintenant pour commencer à concevoir notre carte de magasin ah ici. 25. Cartes de magasin: Bon, maintenant nous sommes prêts à concevoir notre petite carte de magasin ici. Hum et nous allons, bien sûr, créer un composant pour ça afin qu'on puisse le réutiliser et en faire plusieurs à l'avenir , si vous en avez besoin. Allons-y et cliquez ici. Commande utilisée, voir ici et aller à nos composants. Allons-y et collons-le ici. Maintenant, bien sûr, ça se fond avec l'arrière-plan ici, donc je vais aller de l'avant et lui donner un peu de blanc. Cliquez dessus et transformons-le d'abord en un composant. Donc, c'est un composant maintenant, alors allons de l'avant et ajouter un rectangle à l'intérieur de chose ici serait bon. Ah, c'est là que va aller notre image. Allons de l'avant et étirez-le à une hauteur peut-être de 1 50 pixels. Et je vais juste changer le Phil en Phil plus sombre ici. Et puis allons de l'avant et donnons à cela un rayon de frontière de 20 aussi. Semble être ici à nouveau pour le premier virage utilisé Ault. Hum pour que vous sépariez le rayon de la frontière est ici. Si vous ne pouvez pas le faire correctement, vous pouvez toujours deux semaines que d'ici va bien, donc je pense que ça a l'air bien. De quoi d'autre avons-nous besoin dans notre carte de magasin ? Allons juste ici. Bien sûr, ce sera là où va l'image. Nous avons besoin d'un nom de magasin, d'un dollar par article, délai d'exécution et de la cote. Travaillons sur chacun de ceux-ci séparément. Alors d'abord, commençons par le nom de notre magasin. J' irai ici, dupliquerai cela et je ferai un dollar par article. Pour l'instant, allons-y et mettons-nous 0$ par article. Rappelez-vous, ce n'est qu'un composant. Dans chaque cas, nous serons en mesure de changer cela et d'ajuster. Et je vais le redimensionner aussi. Peut-être 14. C' est plutôt bon. Nous pouvons probablement les faire descendre un peu plus, donc nous donnons plus de place à notre image assez bonne. Allons de l'avant et juste dupliquer celui-ci ici et garder un espacement de 15 sur les côtés. Et nous allons changer ceci un jour trop zéro et ensuite utiliser écrire une ligne pour celui-ci, alors allons étirer cela si je veux, nous voulons utiliser la ligne de gauche ici, puis aller de l'avant et étirer cette ligne de gauche utilisée. En fait, on ne veut pas l'étirer jusqu'au bout. Nous voulions juste ici et redimensionnons ce 12 peut-être 20. C' est mieux. Allez-y et dupliquez celui-ci ici et faites zéro étoiles ou réellement zéro. Ce sera pour notre évaluation ici donc nous pouvons faire 0.0. Alors allons de l'avant et juste zoomer dessus. Alors allons de l'avant et créons une étoile pour ma lecture. Voici bien à nouveau, La belle chose à propos de la figue Miser. Vous pouvez créer une étoile à partir des outils de forme ici. Allons de l'avant et dessinons un. Va maintenir le décalage, peut-être faire une taille de 25 par 25. Je centre ça ici avec ce Ah cool, et mes outils étoiles. Je peux aller de l'avant et augmenter et diminuer le nombre. On va garder un cinq. Nous pouvons aller de l'avant et faire en sorte que le magasin ait un ratio élevé ou inférieur, un plus net et nous pouvons également changer le rayon de la frontière ici. Maintenant, c'est beaucoup trop. Donc ce que je vais faire, je ne veux pas que je ne veux pas aller avec les bords tranchants qu'il a en ce moment. Donc nous pouvons aller de ce côté ici et même assigner un rayon de coin en utilisant la décimale. Donc, ce point zéro essayons votre 0,5 ici. Je pense que ça a l'air bien. Maintenant, notre départ peut avoir plusieurs états. Il peut soit être tout simplement génial, comme cela peut être à moitié rempli, et alors peut-être que vous pouvez être complètement rempli comme un exemple dans mon croquis ici j'ai ah, étoile de champ entièrement. Mais si je veux juste une demi-étoile, il peut le faire aussi. Donc, lorsque nous avons créé un composant à partir de cela, mais gardez à l'esprit, vous ne pouvez pas créer de composants à l'intérieur d'un autre composant. Um voulait tellement de moi. Allez-y et faites glisser cette étoile hors d'ici, puis allez-y et donnez-lui un gris plus clair. Ici, peut-être que ces couleurs obtiennent Créons un composant ici. Allons-y et zoomons. Et juste pour voir mon étoile ici, je vais faire la commande D, puis juste mettre cette instance à l'intérieur de mon composant et créer deux étoiles de plus pour mes autres états. Donc je vais en nommer un rempli, l'autre 1/2 rempli et le dernier non rempli. Donc c'est pour celui qui n'est pas rempli ici, laissons-le comme il est. Donc, pour la moitié remplie, allons-y et donnons-lui une couleur de l'or ici. Allons de l'avant et créons une sorte de couleur dorée ici. Bien sûr, je ne vois pas ça parce que c'est couvert par le rempli. Allons-y et cachons celle-là. Et je pense que quelque chose comme ça marcherait. Je vais juste copier cet hexadécimal et l'appliquer à l'autre aussi. Donc le rempli fonctionne non rempli. On travaille, et ensuite on veut juste faire la moitié remplie. Une fois. Profitons de notre des groupes booléens en créant un rectangle ici sur l'étoile comme ceci. abord, changeons la couleur des rectangles, aussi, cette couleur ici avec un code hexadécimal de seulement soixante, puis choisissez le rectangle et 1/2 forme remplie et en utilisant nos groupes d'intimidation, allons clic croise l'élection. Ça a l'air bien. C' est assez. Je veux utiliser ça ici. Va tenir vieux apporter une copie ici. Je pense que ça a l'air bien. Je veux juste aller de l'avant et centrer ça, et on le déplace un peu ici. Parfait. Cool. Je pense que nous sommes prêts à ajouter ceci à notre design. Allons-y et renommez-le pour stocker la carte. Et nous allons aussi renommer celui-ci, aussi. Juste magasin a l'air bien. Revenons à nos marques et allons de l'avant et supprimez ce carré juste ici. Ensuite, passez par les actifs ici et puis. Maintenant, vous verrez que nous avons cette carte de magasin ici. Allons de l'avant et faites-le glisser, centrez-le ici et allez simplement aux couches. Et je veux m'assurer que j'ai ajouté à mon groupe juste en dessous. Choisissez une buanderie. D' accord, il semble que l'arrière-plan ici se fond complètement avec l'arrière-plan ici. Alors allons de l'avant et sélectionnez notre composant ou l'instance ici. Descendez aux effets et ajoutons une ombre portée. Avec peut-être un Y de sida. Essayons 10 et faisons un blup off. Peut-être que 30 ou vraiment drôle marcherait. Je ne vais pas laisser tomber le rayon à peut-être une sorte de oap une ville ici à peut-être 10% renouveler 12 chose qui a l'air bien. Alors allons de l'avant et remplissons juste les données ici. Allons de l'avant et changeons le nom du magasin ici, aussi. La lessive de Jack. Je mets juste des noms de magasin au hasard ici. Faisons une note de 3,5 et un délai d'exécution de Steve deux jours, puis changer la fierté du dollar . Et pour peut-être faire $1 article. Bon, donc maintenant on veut mettre l'image ici dans ce rectangle par ici. Allons de l'avant et utilisons l'outil ici. Placez l'image. Alors allons de l'avant et choisissons des images, des cartes de magasin, et je vais juste aller de l'avant et choisir une de ces images ici. Celle-ci a l'air bien. Et maintenant, si je passe la souris sur un objet ou une forme spécifique ici, comme ce rectangle et que je clique, il va aller de l'avant et mettre effectivement cette image à l'intérieur de ce rectangle. Donc non, continuons et reproduisons ce deux fois que l'une va aller ici et l' autre va aller de l'autre côté. Ici. Laissez-moi juste cacher mon cadre de profil ici juste pour que nous puissions éditer cela. Je vais juste renommer ça en roses lessive. Allons, puis donnons-lui une note de 4,5. Et puis nous pouvons changer le début ici en le sélectionnant. Et maintenant, si vous cliquez dessus, nous pouvons vraiment aller de l'avant et choisir celui que nous montrons. moment, nous montrons cette Intersect, mais allons de l'avant et dissimulons ça et faisons une remplie. Cela peut être changé le délai d'exécution à un jour, et je fais un dollar 20 par article. Allons à celle-là aussi, aussi, et change-le pour la lessive de Bob. Donnez-lui un magasin. Je ne sais pas. Allons à 2,5. Changez le délai d'exécution deux, peut-être trois jours, puis changez le magasin ici en cachant mes deux autres au vide. Ne changez pas le prix à 80 cents l'article. Donc, pour remplacer ces images, vous pouvez simplement aller de l'avant et double-cliquez, Aller à l'image ici, puis ne choisissez l'image avec faire une autre image. Là, nous allons et puis faisons et puis juste fermé cela et faire celui-ci ici, choisissez l'image et puis choisissons celui-ci. On y va. Donc maintenant, nous allons aller de l'avant et juste placer le dans notre cadre ici aller et avoir tous les deux sélectionné, puis les glisser dans la requête, puis dans le groupe. Et puis quoi ? Nous les avons sélectionnés. Allons de l'avant et limitons les proportions et changez-les, aussi. Peut-être que 2 55 en fait, le début en 2 à 45. Il suffit de les déplacer autour de l'autre ici. Assurez-vous juste qu'il a le même espacement. Sélectionnons les trois et assurez-vous qu'ils sont alignés verticalement et qu'il semble qu'ils le soient. Enfin, je vais aller de l'avant et juste diminuer l'ombre sur celui-ci à faire. Il peut s'agir d'un Y sur cinq et d'un flou de 10 peut-être juste choisir une ville de 6% à la place. Et la même chose ici. Je pense que ça a l'air bien. Nous pouvons même aller de l'avant et apporter cette icône de rafraîchissement ici et avoir un joint ou le reste du groupe ici. On y va. Je pense que ça a l'air mieux. Débarrassez-vous de ce cercle et je pense que c'est mieux. Donc, nous l'avons là. C' est notre page de demande. Avant que j'oublie de le faire. Je vais aller de l'avant et bien, abord, allons de l'avant et juste effondré. la page de demande et ma page ici. Je vais aller à la page des services et juste m'assurer qu'il est aussi effondré. Je vais aller de l'avant et juste inhygiénique ma page de profil. Cool. Donc maintenant je pense que nous sommes prêts à sauter dans nos prochaines pages ici. 26. La page La page La profil: Très bien, donc je pense que nous sommes prêts à commencer la conception ou une page de profil ici. Ça a l'air assez simple. Nous avons une petite photo pour l'utilisateur ici avec le nom et l'e-mail ici et le bouton d'édition ici. Et puis nous avons un petit widget de carte sur leur adresse. Nous avons un support de paiement, puis nous nous déconnectons. Alors commençons à concevoir cette page ici. Donc, dans la page de profil ici, je vais aller de l'avant et la première chose, faire cette édition, mais dans un peu plus petit, moins aussi. Taille de police de 20 sur Changé la police beaucoup trop moyen ici ou moins, vous semi-gras, le plus mieux. Alors allons de l'avant et d'abord ici ou par ici pour cette photo de profil, et nous pourrions faire 100 100 pour la taille. Gardions juste un espacement de 25 pixels à partir de la gauche. Allons de l'avant et ajoutons. Il faut le premier et le dernier pour leur nom. Il suffit d'aller de l'avant et de faire glisser une copie en utilisant l'ancien, puis faire un e-mail au domaine com. Allons de l'avant et déplaçons ces vers le bas et ça a l'air bien. Redimensionnons simplement ce 12 peut-être 18 et le nom ici à 22 pour ajouter une photo de profil ici. Je vais aller à mes branchements ici. Gérer les plug-ins. Allons-y et fouillons tous les branchements ici, et je vais utiliser cette cave appelée avatars. Si vous pouvez le trouver, allez-y et recherchez des avatars, puis installez celui-ci ici. Une fois qu'il est installé, nous pouvons revenir à notre projet et ensuite, avec votre, euh, cercle ou lèvres sélectionnés, aller à brancher et ensuite faire des avatars cool. Donc je pense que ça a l'air bien. Euh, passer à autre chose. Nous avons notre option de carte, et alors ? Nous allons de l'avant et utilisons du sel sur ce rectangle avec une carte déjà dedans et amenez-le ici . Il suffit de le redimensionner jusqu'à ce que nous obtenions un espacement de 25 des deux côtés. Ça a l'air bien. Allons de l'avant et redimensionnons la hauteur 200. Donnez-lui un rayon de bordure de 20. Déplaçons-le un peu vers le bas. Et puis déplacons ceci ou copions cette icône pour la mettre juste au milieu ici légèrement au-dessus du milieu. Regroupez-les ensemble. Nous voulons également ajouter l'adresse ici. Alors pourquoi ne pas aller de l'avant et dupliquer ce stylo ici, puis peut-être le rendre, euh, bien sûr, contraint et ensuite faire 20 minutes ? C' est vrai. 18 en termes de largeur. Je vais juste zoomer ici et laisser la ligne ici, faire un texto. 1234 Plan d'adresse comme espace réservé. Et allons de l'avant et faisons une ferme de 18. Déplacez ça ici. Je pense que ça a l'air bien. Je vais juste le déplacer un peu. Et puis je pense que nous avons juste besoin de paiements, soutien et de déconnecter ici. Alors créons un autre rectangle ici et faisons juste 3 25 par 55. Je fais peut-être un rayon de 10 minutes ici. Apporte-le un peu. Peut-être un peu plus bas que ça, et faisons un texto. Et puis faisons le paiement. Trouve ça ici. Donc, nous allons d'abord changer le remplissage deux primaire changer le remplissage du texte en blanc sur l'aller de l' avant et en dupliquer un autre ici. Rendez cela plus grand et gauche la ligne droite une ligne. Faisons que j'utilise l'ancien ou l'option et puis faire la huit clé pour insérer les petits cercles ce nouveau 1234 et ce genre de représente la carte de crédit ou l'option de paiement. Je pense qu'on peut même rendre ça un peu plus grand, comme nous allons faire 65 ici et ensuite centrer ça longtemps. On y va. Allons de l'avant et les regrouper ensemble en utilisant la commande G et allons-y et nommez-le bouton de paiement, Ce qui est dupliqué et nous avons du soutien. Alors faisons du soutien. De plus, pour laisser le texte ici et revenons à notre plage. Copiez ceci. Retournez ici et collez ça dans Basit ici. Mais je veux juste aller de l'avant et juste glisser ça ici Au lieu de cela, allons de l'avant et redimensionnons ça, aussi. 22 étaient en fait nous allons faire 28 et puis ligne verticale et ce que nous avons ici, nous avons, genre, 20 raid. Ouais, faisons-le, uh, uh, bougeons-le jusqu'à ce qu'il soit là. Allons de l'avant et faisons durer, mais en copie ici aussi. Hum, donc allons de l'avant et assurez-vous d'abord que cela fait partie de ce groupe ici sur un renommé ce groupe pour soutenir Button et à moins que ne se déconnecte, créons juste une petite flèche Icahn ici et maintenant vous pouvez à peine le voir. C' est vraiment petit, Alors allons de l'avant et faisons l'épaisseur trois. Ça a l'air bien ici. Changons la couleur du trait en blanc. Donc je viens juste de zoomer ici. Mais comme vous pouvez le voir, que ce bord assez dur, alors qu'ici nous avons une sorte ronde de beaux bords ou coins. Donc on va aller de l'avant et juste double-cliquer sur cette ligne ici pour la flèche. Donc, cette étape est importante. Allez-y et sélectionnez ce point ici. Eso Nous pouvons appliquer des modifications à ce point. Ensuite, allez aux trois points par ici et faites un tour de cap. Cool. Donc, ça a un capas arrondi. Eh bien, là-bas. Vous pouvez le faire à toutes les lignes. Eh bien, nous allons juste zoomer et juste échapper pour revenir de là. Faisons en sorte que cela soit réellement centré ici. On dirait que maintenant c'est centré sur. Allons juste aller de l'avant et déplacer la flèche à l'intérieur du dernier bouton ici a changé le nom pour déconnecter bouton, et je pense, laissez-moi voir comment est mon espacement. Je peux le déplacer à quelques pixels. Droit ? Et c'est une ligne. Maintenant, je pense que ça marcherait. Une chose que nous pourrions faire ici, nous pouvons aller sur notre bouton de déconnexion et changer la couleur primaire en orange. Ici. Est-ce que ce genre de signifiait qu'il s'agit d'une option de déconnexion ? N' hésitez pas à jouer avec ça et à voir ce qui semble bien. Mais je pense qu'en regardant mon croquis ici, nous sommes assez proches de ce que nous voulons pour notre design. Je vais juste aller de l'avant et zoomer complètement pour voir où on est. Ouais, je pense que ça a l'air bien. 27. La page La des services: Ok, on a presque fini notre conception ici. Comme vous pouvez le voir, nous avons terminé notre page de bagage, notre tutoriel, paiements de page et la page de carte. Et nous avons même parcouru nos demandes et notre page de profil et même ajouté des contraintes pour notre design, ce qui est formidable. Alors maintenant, prêts à nous lancer dans la conception de notre dernière page ici, Allons-y et juste zoomer ici et allons de l'avant et ouvrons notre croquis que nous avions. Donc, cette page est super simple. Essentiellement, on veut juste une liste. Ah, un tas de services ou des commandes précédentes ou des demandes que l'utilisateur a faites, ou même actif. Donc, s'ils ont un service de blanchisserie qui fonctionne activement, nous voulons montrer ceci ici aussi pour que l'utilisateur puisse voir quel est, euh, euh, le statut de lessive là-bas. Donc, comme vous pouvez le voir ici, nous allons placer ça dans un format de liste. , Pour tous les services qu'ils ont alors allons-y et zoomons ici et voyons ce qu'on veut dans notre , alors allons-y et zoomons ici et voyons ce qu'on veut dans notreliste là-bas. Donc, nous voulons stocker le nom. Nous voulons une date dans le temps où la demande a eu lieu. On a l'état actuel et puis, ah, peu de prix, euh, texto pour leur montrer combien ils ont été facturés. Et puis on veut juste avoir une petite icône de carotte ici. Il suffit de leur permettre d'entrer dans cette demande et peut-être des informations sur Seymour à ce sujet. Ou peut-être contacter le magasin ou un tas d'autres options que vous pouvez ajouter pour votre propre design . On n'entrera pas dans cette page dans ce cours, mais, euh, je vais laisser ça comme un exercice pour toi. Donc, si vous voulez aller de l'avant et concevoir une page pour qu'ils voient leur demande, par tous les moyens, allez-y et faites-le. Et vous pouvez même me l'envoyer par email. Et je me ferai un plaisir de vous faire part de vos commentaires. Impressionnant. Revenons donc à notre maquette ici, et la première chose que je veux faire est de créer un composant pour chacun de mes éléments de liste sur. Bien sûr, je pense que maintenant vous savez où nous mettons nos composants. C' est dans la page des composants ici. Allons là-bas et allons de l'avant et créons un rectangle en utilisant le R deux. Et je suis juste en train de créer un rectangle en premier lieu. Allons-y et donnons-lui un remplissage de blanc. En fait, allons-y et changeons la largeur à 3 75 Je pense que c'est la largeur de la taille de l'iPhone qui travaillait avec ici. Si je ne me trompe pas, oui, 3 75 par 8 12 Alors revenons ici. Faisons 3 75 et faisons 100 et 10 pour la hauteur ici. Je pense que c'est bien. J' ai déjà du texte ici, donc en tant que concepteur, vous voulez toujours réutiliser des composants ou réutiliser différents éléments dans votre conception au lieu d'en créer de nouveaux simplement parce que cela fait gagner beaucoup de temps. Alors allons de l'avant et sélectionnons quelques choses ici comme les trois textes. Peut-être même encore je pense que c'est bien. Et puis utilisez la commande, voir pour le copier, puis dirigez-vous vers ce rectangle ici et collez-le. Et ici en ce moment, ce n'est pas un composant. Sélectionnez tout ici et utilisez la touche d'option de commande, ce qui en fait un composant. Et maintenant affaiblir, creuser et déplacer des trucs. Donc je pense que nous pouvons avoir le nom du magasin plus près ici. Voyons voir ce que nous avions dans notre conception encore quelque chose de similaire. Et nous avons un prix et un statut. Alors faisons le prix. Allons de l'avant et bougeons ça ici. Donne-lui juste un peu d'espacement pour nos carottes, puis passons ça ici place et laissons, euh, euh,la ligne. Allons de l'avant et alignons ça là-bas. Voyez quel type d'espacement nous avons à 15 par 15 ici en termes d'espacement de gauche et bas. Et allons de l'avant et juste faire le jour mois que vous êtes et cela peut être dû H m m pour représenter les heures et les minutes. Ça a l'air bien. Alors allons de l'avant et assurez-vous que ce juste ici est centré verticalement parfait. Et puis je vais dupliquer ce texte en utilisant la commande D droite. Alignez-le et puis déplacez-le tout le chemin jusqu'à l'endroit où j'ai mon signe de dollar Icône. Changons le texte en statut. Cool. Je pense que c'est bien. Nous voulons juste ajouter ou icône de carotte ici. La façon la plus simple de le faire est de tracer une ligne d'erreur, donc je vais faire changer l comme un raccourci. La façon la plus simple de le faire est de tracer une ligne d'erreur, Créez une ligne ici. Allons zoomer. Vas-y et double vite dans ici. Prends juste ce bout de la ligne et amène tout le chemin ici. Donc on a juste une belle icône de carotte ici. Je vais utiliser fait ici pour sortir de là va zoomer et ensuite amener mes carottes ici, rendre un peu plus grand. Peut-être faire une épaisseur de deux, peut-être 2,5, et c'est bien. Et puis je veux m'assurer que je l'ai plu juste au centre et à moins de changer une couleur de trait pour ne pas vraiment voir ça ici, hum, ça marche. Allons de l'avant et renommons cette liste de services de composants et passons à nos simulations maintenant et insérez ce composant en allant dans les actifs que nous voyons ici. Nous avons une liste de services. Allons de l'avant et traînons ça dedans. Donc déjà Aiken dit, je veux faire quelques changements à elle. Je pense qu'on peut le rendre un peu plus petit. Et puis nous allons de l'avant et ajoutons un diviseur aussi. Donc, nous pouvons en quelque sorte voir la prochaine option dans la liste et différencié entre eux. Donc, je vais juste revenir rapidement dans les composants. Sélectionnez l'ensemble du composant et faites-le 95 pixels de hauteur. Et puis je vais ramener mon nom de magasin quelques pixels vers le bas et ensuite peut-être aligné ceux-ci ici place, et ceux-ci aussi et vraiment leur apporter quelques pixels vers le bas et ensuite aller de l'avant et mettre celui-ci au centre à nouveau. Je pense que ça marchera. Alors allons de l'avant et tracons une ligne. Assurez-vous de garder la rue en utilisant le quart de travail et de le faire étirer tout le chemin. Utilisez la couleur du trait. Utilisons le contrôle, voyons et allez-y. Et comme ça, la couleur de la voiture. Alors peut-être qu' on peut le rendre un peu plus léger. Il voulait être subtil. Je pense que c'est bien. Allons de l'avant et sélectionnez-le et amenez-le tout le chemin vers le bas. Juste un pixel en bas. Ok, je pense qu'on a ça juste là. Donc maintenant, si vous allez à la maquette, je pense que ça a l'air mieux. On peut aller de l'avant et utiliser tout aussi. Amenez ça et puis appuyez sur commande de tas de fois juste pour voir à quoi ça ressemblerait . Je pense que cela fonctionne 28. Échantillon de données de Google Sheets: Maintenant, je vais vous montrer une prise vraiment cool qu'on peut utiliser pour remplir les données ces services ici. Allons de l'avant et cherchons les branchements, ouvre-toi,branchements gérés par l' homme, et puis passons à la recherche de tous les branchements. Allons de l'avant et cherchons les branchements, ouvre-toi, branchements gérés par l' homme, Et je suis intéressé par cette option de lavabo Google Sheets ici. Si vous ne pouvez pas le trouver, recherchez Google Sheets. Couler juste ici. Allez-y et installez-le. Cette fiche est super cool. Et je pense que ce sera utile pour vos projets futurs aussi. Très bien, donc une fois que vous aurez installé ça et que vous serez de retour ici, nous ne reviendrons pas à nos composants tapotez ici. Alors allez-y et complétez ce que nous faisons ici. Allez au nom du magasin et changez le texte ici pour, hum, faire un signe de hashtag ou un signe de livre comme celui-ci et stocker le nom souligné, puis pour l'icône du dollar ici. Vas-y et nomme-le. Prix de soulignement total. Assurez-vous de mettre ce bonjour cerf ou la clé de la livre ici. Changer ces 12 dates avec le hashtag avant et puis l'état sera l'état du hashtag et je vais vous dire pourquoi c'est important en juste une seconde. Ah, une fois que vous avez renommé, allez-y et vérifiez que vous n'avez pas fait de fautes de frappe là-dedans et ce qu'il y avait ici. Je veux juste faire une dernière chose. Allez ici pour le nom de votre magasin et assurez-vous de l'étirer jusqu'à peut-être juste ici et assurez-vous juste la même chose avec la date. Je pense que ça a l'air bien. Je veux sélectionner ma date et mon statut et les ramener quelques pixels vers le bas. Et laisse-moi aller de l'avant. Et j'ai l'impression qu'on devrait les déplacer et les centrer. Mon composant ici s donc nous allons les regrouper et ensuite utiliser une ligne verticale. Je pense que ça a l'air mieux. C' est maintenant si je retourne ici. Ouais, ça a l'air bien mieux. Maintenant, regardez ce léger votre cadre de services aller à brancher sur. Je fais Google feuilles couler. Allez-y et entrez. Ce lien, qui est dans la ressource est pour cette leçon. Alors allez-y et prenez un moment pour télécharger ça. Obtenez ce lien à partir de ce fichier texte et mettez-le ici. Je suis déjà allé de l'avant et fait cette feuille de Google avec des exemples de données. Alors, en une seconde, à quoi ça ressemble. Donc s'il l'a vraiment ouvert, vous verrez que j'ai rassemblé ces petites feuilles de goule avec mes données avec les noms de mes magasins. Ah, quelques dates, des prix et du statut et des articles aléatoires. Il y a toutes les données rondes et aléatoires juste pour nous aider à générer notre écran. Um, donc avec ce Google feuilles, allez-y et utilisez le lien à nouveau et mettez-le ici et puis allez-y et choisissez mettre à jour la page actuelle uniquement, puis utilisez fetch and sink, comme vous pouvez le voir ici sont la page est non terminé. Il est allé de l'avant et utilisé que Google Sheets et généré cette page pour nous. Bien sûr. C' est pourquoi nous devons renommer nos champs pour que ce plug in sache quoi récupérer d' où, euh, ouais, assurez-vous de lire leur documentation. Vous pouvez le faire en allant sur Google. Elle coulait et puis en cliquant sur cette petite icône d'information ici où vous pouvez réellement accéder à leur documentation et voir comment vous pouvez l'utiliser pour vos propres projets et mettre en place votre propre, euh, icône d'information ici où vous pouvez réellement accéder à leur documentation et voir comment vous pouvez l'utiliser pour vos propres projets et mettre en place votre propre, euh, Google Sheets. Mais j'ai trouvé ça plutôt cool. Et c'est pour ça que je voulais l'inclure dans cette leçon et vous dire que vous pourriez faire quelque chose comme ça. Lichens, que vous avez accès à notre super puissant. Profitez donc d'eux pour générer vos designs et vous faire économiser une tonne de temps. Donc avec ça, euh, je pense que nos pages sont presque toutes faites ici. Maintenant, on va revenir et apprendre un tas d'autres choses. Je sais qu'à ce stade, vous avez déjà beaucoup de connaissances sur Fichman. Espérons que vous êtes en mesure d'utiliser cela et d'appliquer tout ce que vous avez appris à vos propres conceptions sur. Vraiment ? C' est tout ce cours est sur le point d'expérimenter avec différents outils que vous avez donnés pour générer des designs vraiment sympas. Donc avant de finir cette maquette ici, on va y revenir et faire un tas de choses pour le rendre encore meilleur. Hum, donc je te vois dans la prochaine leçon. 29. Trouver des polices personnalisées à utiliser: Très bien, nous avons terminé notre maquette dans la dernière leçon, et je veux prendre le temps de revoir notre maquette et de trouver des opportunités et des endroits où nous pouvons l'améliorer, en commençant par le texte et la typographie. Hum, donc je vais passer à quelques ressources. Est-ce que cela a inclus Ah, dans cette leçon. Allez-y et ouvrez-les pour les vérifier. Je vais juste passer rapidement par ces ressources est eso. Tu sais à quoi tu as accès ? , Tout d'abord, si vous essayez d'utiliser des polices personnalisées dans vos projets figment, assurez-vous de télécharger à nouveau cet installateur de polices ici. Cela n'est donc nécessaire que si vous utilisez l'application Web. Si vous avez l'application de bureau et que vous utilisez figment sur un ordinateur de bureau, vous n'avez pas à vous soucier de l'installation de ce programme d'installation de police. Donc fig MMA utilise lui-même des centaines de polices accessibles sur les polices Google. Comme si tu te dirigeais vers l'étranger. Démarrez google dot com, vous serez en mesure d'accéder à beaucoup de fonds qui sont disponibles dans Sigma. Comme toujours, explorez d'autres. Je ne suis pas sûr de quels fonds sont actuellement sur fig MMA, mais je suis sûr que vous serez en mesure de le savoir si vous cherchez une police spécifique. Sinon, vous pouvez certainement télécharger à partir des polices Google, qui est une excellente ressource pour trouver des polices, um, ou une autre ressource de magasins tels que les polices adobe ainsi. Je crois que celui-ci nécessite un abonnement ou un abonnement pour Creative Cloud. Alors allez-y et vérifiez cela aussi. Vous avez accès à des tonnes de fonds, alors vous allez de l'avant et naviguez. Cette ressource est si vous recherchez une police personnalisée. Un autre site web cool que je veux mentionner est la paire amoureuse Darko Ah, ce site vous donne un tas de paires de fonds que vous pouvez utiliser, hum, avec différents types de polices qui auraient l'air bien ensemble dans vos projets. Il y a quelques fonds différents ici que vous pouvez explorer et voir lequel vous aimez et celui que vous voulez utiliser pour vos propres projets. Et cette leçon, nous allons aller de l'avant et appliquer cette combinaison de fonds ou paire de fonds dans notre application. Donc tu peux faire l'une des deux choses, soit en direction des polices. Paradox co, puis téléchargez cette combinaison de polices rube IQ et Carla ou une paire de fontes ou encore , si vous allez à la ressource est pour le projet sur lequel nous travaillions. Clean peut regrouper, euh, et se diriger vers les polices. Vous serez également en mesure de les télécharger à partir d'ici est bien et de les installer. Donc je vais aller de l'avant et juste les installer moi-même. Assurez-vous de sélectionner tous les différents poids. Um, pour ce fonds et Mac, vous pouvez juste aller de l'avant et les sélectionner tous et ensuite juste doubler rapidement pour ouvrir, les installer tous. Et faisons la même chose pour ces autres fonds. Ici. Assure-toi encore. Vous sélectionnez tout, allez-y et ouvrez et volé et tout fait là. Bon, alors passons à notre figue MMA qui s'arrêtent à nouveau parce que j'utilise l'application de bureau ici. Je n'ai pas besoin d'installer l'installateur de polices, mais n'hésitez pas à faire une pause ici et à passer par l'installateur frontal et à m'assurer que ces fonds sont appliqués sur le Web. APA est bien, si vous utilisez la figue. Ma est montée 30. Créer des styles de texte: donc, jusqu'à présent dans notre projet, nous avons utilisé la police par défaut de Roboto ici. Donc, si je zoome ici comme, par exemple, dans notre page de connexion ou notre logo, tout a été utilisé cette police roboto jusqu'à nos pages principales ici, en fait. Ah, où nous avons commencé à utiliser certains des composants IOS. Um, si vous vous souvenez, par exemple, de notre barre supérieure et des barres de navigation ici, um Donc une fois que nous avons commencé à utiliser ça, tout est passé automatiquement aux polices par défaut qui viennent pour iPhones . Toi ? Pourquoi que nous avons également installé, qui est affichage sf pro. Hum, donc je sais que c'est super désordonné en ce moment parce que et vos projets, vous voulez généralement vous en tenir à une ou deux polices au plus. Vous ne voulez pas avoir plusieurs combinaisons de polices. Hum, et nous en avons aussi parlé dans notre leçon UX comme les deux. Donc, nous allons juste travailler à notre chemin à partir de la page de connexion. Et bien sûr, nous avons la possibilité d'entrer et de changer chaque orteil de texte, nos nouvelles polices Ah, que nous avons téléchargées. Mais je voudrais aussi vous montrer un excellent moyen de mettre en place des styles comme nous avons mis en place styles pour nos couleurs. Si vous vous en souvenez, nous avons mis en place un schéma de couleurs. Je veux vous montrer comment vous pouvez utiliser des styles pour votre typographie et votre texte aussi. Je veux vous montrer comment vous pouvez utiliser des styles pour votre typographie et votre texte aussi Donc, pour ajouter un style de type à votre projet figment. de Allonsdel'avant et sélectionnons d'abord le texte. Commençons par ce texte de logo ici. Nous avons donc installé ces deux polices. En règle générale, vous voulez utiliser un seul fonds pour vos titres, titres eso et texte de logo et des choses comme ça. Et puis le corps du texte serait pour tout le reste. Dans ce cas, sont Header Font est Rubik et la police du corps va être Karla s. Alors appliquons Rue Big ici à cela. Ah, le texte du logo. Alors allez ici à l'endroit où il est écrit texte. Vous pouvez modifier la police en naviguant ici. Um ou vous pouvez aussi simplement aller de l'avant et taper le nom du fonds. Et là, donc je sais déjà que c'est Rubik. Donc je vais chercher ça ici et maintenant on a Rubik appliqué ici. Je vais juste appliquer Ah, poids moyen ici. Tu peux en faire d'autres. Comme si vous voulez aller vraiment épais avec du noir ou vraiment des lumières. Je pense que j'aime le médium ici. Ça a l'air assez bien de se démarquer, et ça ne se fond pas. Alors allons de l'avant et utilisons-nous ça. Donc, parfois l'argent a changé des fonds, vos alignements peuvent être modifiés. Alors allez-y et juste une double vérification que tout est aligné correctement. Euh, et assure-toi que je vais juste m'assurer que ce logo est aligné au milieu du bien-être . Ça a l'air bien maintenant. Alors maintenant, allons de l'avant et transformons cela en, ah type style que nous pouvons utiliser sur toutes les autres pages. Et encore une fois, l'avantage est que si vous décidez à tout moment de changer cette police, vous serez en mesure de le faire en un seul endroit, et toutes vos pages auront cette police et le style nous sera appliqué. Allons de l'avant et allons au style ici. Créons un nouveau style. Je veux juste le nommer, hum, en-tête, faire un petit tiret et ensuite donner le nom du Fonds ici. Alors c'est Rubik. Faisons 26 points. C' est juste le nom ici. Tu n'as pas à mettre exactement ce que je mets ici. C' est juste pour moi d'être en mesure d'identifier ma tête de police et de voir facilement quelle taille et police il s'agit. Donc, créez du style. Et maintenant, comme vous pouvez le voir ici, si je vais de l'avant et cliquez sur ce nouveau, ce texte a été attaché à ce type de style d'en-tête Rubik 26 eso pour démontrer si je vais à cette carte de tutoriel, par exemple . Maintenant, si vous vous souvenez, agit d'une instance d'un composant, donc nous ne voudrions pas modifier les choses ici car sinon il ne serait pas appliqué aux autres cartes de didacticiel. Alors allons de l'avant et allons au composant maître à partir d'ici, et ça devrait nous emmener ici. Maintenant, si je vais de l'avant et que je clique sur le titre ici, puis que je vais à mes styles ici, je peux appliquer le même en-tête. Style Rubik 26. C' est le seul style que nous ayons en ce moment. Mais nous allons aussi mettre en place un style corporel pour ce texte en utilisant nos autres fonds, qui est Carla. Allons de l'avant et changeons le texte pour Carla et allons-y et peut-être monter la taille de 17. Allez-y et créez du style. Faisons Body Dash Carla, et celui-ci était un super style de 17 points. On y va. Et maintenant, j'ai aussi un textile de style body. Donc, pendant que nous sommes ici avec nos composants, allons de l'avant et appliquons cela à tous les composants ici. Donc, nous allons sélectionner notre Mais il a activé ici et changer le texte à Carla aussi. Et puis je veux aller de l'avant et le rendre en gras et changer la taille de la police année à 17 également. Je vais juste m'assurer que c'est centré ici. Ça a l'air bien. Allons de l'avant et créons un style pour notre mais dans le texte ici aussi. Alors j'y vais. Je vais faire le corps Carla 17 points. Encouragé ici. On y va. Donc maintenant ce bouton a la cellule qu'il est même implicite ici aussi. Parce que encore une fois, c'est une instance de ce bouton juste ici. Bon, alors allons de l'avant et appliquons notre fonds à nos deux composantes, donc 1ère pour stocker la carte. Alors allons de l'avant et sélectionnez ce texte ici. Hum, on va le mettre dans notre chambre Big Fund ici et on va faire moyen pour la taille du truc. On peut en faire 22. Allons de l'avant et ajoutons ce textile comme salle d'en-tête 22. Je me souviens que vous n'avez pas besoin de créer, hum, un style pour chaque fonds, mais si vous pensez que vous allez réutiliser une certaine police ou l'état d'un certain style de fonds sur plusieurs pages ou plusieurs composants, Je pense que c'est la meilleure façon de le faire que de les changer individuellement. Alors allons ici et puis sélectionner nos styles et faire corps Carla 17. La même chose ici, enfin, c'est. Allons de l'avant et assurez-vous que tout est centré. Ça va au centre. Tous ces stocks pourraient faire en sorte que l'air soit également centré. Parfait. Allons par ici. Allons dans notre liste de services. Ah, composant. Allons de l'avant et changeons celui-ci à l'en-tête Rubik 22 que nous avons mis en place. Et ceux-ci seront le corps de Carlos 17. Donc, avec ceux sélectionnés, faisons, hum, hum, corps Carlos 17 et ensuite peut-être faire audacieux pour le prix ici. Alors nous allons dissocier cela ou détacher ce style et faire le style du corps Carlos 17 Bold. Il a l'air mieux quand on va de l'avant et juste, hum, amène ça quelques pixels vers le bas, puis va de l'avant et amène mon nom de magasin ici et essaie d'aligner ça avec l'autre texte ici. Et peut-être que nous pouvons faire baisser ces quelques pixels. Je pense que ça pourrait paraître mieux. Nous allons aller de l'avant et regrouper ces deux-là aussi est dans le commandement G sur l'aller de l'avant et sélectionner ces faire. Assurez-vous qu'ils sont centrés et aussi les centrer avec le reste du composant ici. Je pense que c'est bien. Alors sont les composants ici ont maintenant le bon fonds. Alors pourquoi ne pas faire une pause rapide et appliquer des textiles sur le reste de nos simulations dans la leçon suivante ? 31. Appliquer des styles de texte partout: D' accord. Donc, nos composants ont maintenant des textiles appliqués. Et si nous revenons à nos simulations, nous pouvons déjà voir certains de ceux appliqués, comme ici avec nos boutons. Euh, bien sûr, comme ce bouton de mot de passe oublié. Parce que ce n'est pas un composant n'a pas été appliqué. Il est toujours libre de vérifier. Retournez ici, puis sélectionnez les bons téléphones. Allez-y et alignez-les à nouveau. Peut-être faire tomber ça un peu. Apportez ces deux petits morceaux. Cela semble bien quand je sélectionne mes termes ici et aussi dit au style de Body Girl de 17. gras. Je vais juste l'étirer jusqu'au bout. Maintenant, si vous vous souvenez avant, nous n'avions pas cette fin comme, ah police pliée. Donc, vous pouvez toujours aller ici, double-cliquez et choisissez le mot que vous voulez ou plusieurs récompenses et puis, ah, ah, utilisez la commande de raccourci soit, hum et puis cela va de l'avant et sur un gras ce port. Et qu'avons-nous d'autre ici ? Nous avons notre paiement. Allons de l'avant et sélectionnons tous ces éléments. Faire un corps textile carla, 17 points. Ça a l'air bien. Ou mais dans notre automatiquement a ce texte Carla. Changeons ce paiement en en-tête Rubik 26. Je vais juste étirer ça. Centrer. Ça a l'air bien. Voyons ce qu'il faut changer ici. Nous avons juste besoin de changer le texte de recherche ici, aussi. Doit faire le corps Carlos 17. Et encore une fois, Assurez-vous de centrer sur la ligne les choses correctement pour nos pages principales ici. Je vois que mes cartes avaient déjà la police appliquée parce que c'était un composant. Mais je pense que tout le reste, euh, sauf la navigation et les planches supérieures ici sont à l'intérieur de la page. Alors pourquoi ne pas aller de l'avant et faire d'abord la barre supérieure dans la barre de navigation ? Nous allons donc doubler moins rapidement dans l'un des composants ici, ou l'une des instances de la barre de navigation, aller aux composants maîtres. Et puis ici, appliquons les mêmes téléphones ici. Allons en fait aller de l'avant et sélectionnez Rubik comme police, essayant de garder tout le reste la même. Et puis nous allons de l'avant et créons un nouvel en-tête. Lubick 36 points. On dirait que j'ai fait une erreur dans ce nom. C' est en fait une police de 34 points Alors allez-y et modifiez le style et changez le nom ici à 34. De là, vous pouvez même ajouter une description. Donc, si vous avez une équipe et que vous travaillez avec eux, vous pouvez leur dire à quoi ce téléphone devrait être appliqué. Des choses comme ça, je veux aller ici à l'onglet, sont Assurez-vous que vous n'avez aucun de ceux-ci comme ça, mais le haut est lui-même. Je n'ai pas changé ça pour Body Carla. 17. gras. Réparez ça et ce centre. Faisons la même chose, ce changement de maintien ici et ensuite faire la même chose. Allons de l'avant et centrons mon année de texte. Amenez-le vers le bas. On dirait que c'est juste 15 pixels du bas. Donc, maintenons que 15 pixels du bas et assurez-vous que cela et ceci sont également centrés. Et on dirait que c'est le cas. Vous n'avez pas besoin de changer la barre d'état parce que ce sera les polices par défaut là-dedans . On n'aura aucun contrôle sur ça, alors revenons à nos simulations. On n'aura aucun contrôle sur ça, Donc, la navigation et les tabulations ici ont maintenant la bonne police. Sauf pour ce bouton ici, alors changeons ça pour le corps Carlos 17. audacieux semble bien. Donc ça va aller ici. Sélectionnez le style et faisons ce style ici. Ou faisons les 22 points. Un, comme ça Donc cette page a l'air bien. Maintenant, allons-y. Allons-y et faisons l'e-mail. Juste celui-là. Pas si ce n'est pas audacieux. Et puis choisissez celui-ci comme le Carlos 17. Bold Rocky, Faisons ou en fait, on ne peut même pas faire rou grosse tête ou 22. Allons de l'avant et assurez-vous que l'air centré et changé l'adresse ici aussi. Corps Carlos 17. Modifiez en gras ceux alignés sur les centres verticaux. Et je vais juste répéter le même processus pour les deux autres boutons aussi. N' hésitez pas à faire une pause ici et à le faire sur vos créations. Très bien, donc avec ceux appliqués, je pense que presque tout ici a cette nouvelle police, euh, la seule exception étant ces deux champs ici. Donc, nous allons juste sauter ici et assurez-vous que ceux-ci sont également en utilisant le textile de Carla 17 et centre la verticale. La même chose ici, d'accord. Avec nos deux nouvelles polices appliquées à notre maquette. Vous pouvez voir que les choses ont l'air beaucoup mieux maintenant. Ah a un goût unique. L' application entière et l'ensemble du balisage se sentent. Et si je vais à ma page de services, je vois que le texte ici semble trop grand. Comme, par exemple, le timbre de date ici sur le statut peut probablement être un peu plus petit que cela. Donc, quand nous allons de l'avant et sélectionnons ce, allez au composant maître, puis pour ces deux, je vais en fait détacher le style et ensuite utiliser une police de 14. Allons-y et qu'elle a effectivement changé la couleur de remplissage aussi. Ah, un peu plus tard. Je pense que ça a l'air bien. Donc, quand vous allez de l'avant et créez un nouveau style à partir de cela et peut-être faire celui-ci comme corps Carla 14, n'appliquez pas la même chose à notre texte d'état ici. Alors changeons la police ici. Et lorsqu'il est appliqué, le même remplissage 585858 Tout droit, sorte que ça a l'air bien. Donc maintenant, je veux juste passer rapidement à mes styles ici pour mon jeu de couleurs. J' ai un texan primaire, un texte secondaire. Donc je pense que nous ne allons pas vraiment aller de l'avant et plonger dans l'ajout de textes primaires et couleur de texte secondaire ici. Mais vous pouvez aller de l'avant et puis, euh, euh, à partir de nos composants, ou partout où vous voulez ajouter des couleurs similaires pour les réservoirs que vous avez ici, au lieu d'en avoir une sur mesure ici, vous pouvez simplement allez-y et utilisez réellement ah, vos styles de couleurs. Mais cette fois, vous serez en mesure d'utiliser le style de couleur pour le texte. Nous ne sauterons pas là-dedans, mais n'hésitez pas à les appliquer à vos projets. Maintenant, si je reviens, les choses ont l'air plus propres ici. Donc, partout où vous voyez les choses semblent un peu bizarres, N'hésitez pas à aller de l'avant et changer la couleur comme nous l'avons fait. Affaiblir. Vous pouvez appliquer les mêmes couleurs pour entendre une houle, euh, euh, et partout où vous voyez, vous avez du texte que vous ne voulez pas qu'il se distingue autant que l'autre texte, hésitez pas à aller de l'avant et à appliquer plusieurs styles de couleurs basés sur votre texte. Donc nous l'avons là. Ce sont nos styles de types ici, très utile et fig ma et certainement aller de l'avant et l'appliquer et garder à l'esprit que vous avez accès à partir d'ici. Chaque fois que vous venez de sélectionner votre toile ici, vous devriez être en mesure d'accéder à vos styles locaux à la fois les styles de couleur et les textiles ici et puis d'ici, vous pouvez réellement aller de l'avant et de les faire aussi bien. Donc, si vous décidez à un moment donné, disons que vous faites votre en-tête 30 points ici, comme vous pouvez le voir dans mon projet, cela changera partout ailleurs. Euh, bien sûr, vous devrez peut-être modifier la taille de certaines zones de texte ici, mais n'hésitez pas à faire des ajustements et à l'appliquer à vos propres projets. 32. Touches finales: D' accord, donc si vous êtes tombé jusqu'à présent, nous avons presque terminé notre première maquette ici. Dans cette leçon, je vais juste creuser et publier des choses un peu, puis ajouter les choses nécessaires dont nous avons besoin. Allons-y et faisons en sorte que ces changements se sentent libres de suivre. Je vous encourage également à passer par votre panneau de calques ici. Ah, et cela fait vraiment en sorte que le nom de tout à l'intérieur de vos couches le regroupement et tout cela est correct dessus est logique. Je ne vais pas faire ça dans cette leçon parce que ça prendrait probablement trop de temps, mais n'hésitez pas à le faire. Je vous encourage toujours à rester organisé avec vos designs afin que non seulement vous, mais aussi d'autres personnes, peut-être des personnes avec lesquelles vous collaborez ou vous êtes une équipe, euh puissent comprendre ce qui se passe avec votre design et chacun de vos cadres. Donc, la première chose que je veux faire ici est en fait aller de l'avant et appliquer la barre d'état. Ah, que nous avons ici pour toutes les autres pages aussi. Donc pour l'instant, nous ne l'avons que sur ces trois pages. Donc, pour ce faire, , on va de l'avant et on commence par une page de carte. En fait, continuons simplement et copions la barre d'état à partir de la page de demande car il serait très similaire sur et sélectionnez votre cadre de carte et faites la commande V ou le contrôle V sur les fenêtres. Allons de l'avant et ramenons notre barre de recherche un peu vers le bas. Ça a l'air bien. Et puis allons à notre page de paiement ici pour une page de paiement. Nous pouvons simplement utiliser une barre d'état simple comme celle-ci. Ah, parce qu'on n'a rien en dessous pour le brouiller. Alors allez-y et copiez-le et collez-le ici. Et puis pour notre tutoriel. Étape page ici. Allez-y et copiez-le ici. Donc, comme vous le voyez ici, la barre d'état est beaucoup trop sombre pour cette page. Euh, typiquement sur les pages plus sombres, nous avons utilisé une barre d'état blanche, alors dirigez-vous vers notre IOS. Vous I components file ici, donc si vous allez par ici, si vous avez toujours cela ouvert, vous devriez être en mesure de trouver la version blanche de cette barre d'état aussi bien. Et puis vous pouvez juste aller de l'avant et sélectionner le tout ici, et vous pouvez aller de l'avant et simplement le copier à partir d'ici et le coller ici. Allez-y et juste utilisé Shift et Irakiens pour les déplacer vers le haut. Et puis, bien sûr, en utilisant l'option de commande K ou de contrôle alta que sur les fenêtres pour créer cela en tant que composant. Et nous allons de l'avant et renommons cette barre oblique 12 statut loin avant et renommons cette barre oblique avant de 12 barre d' état sombre. Donc de cette façon, si vous revenez à nos simulations, nous pouvons simplement aller de l'avant et simplement choisir ceci comme la version légère du site. Nous pouvons aller de l'avant et copier cela dans nos pages de connexion. Eh bien, déplacez un peu les choses vers le bas. Je vais aller de l'avant et juste déplacer mon guide ici. Je pense que c'est bien. Peut-être déplacer cela un peu plus bas, aussi, ainsi que tout le reste ici qui a l'air bien. Maintenant, vous avez peut-être remarqué que nous utilisons beaucoup d'icônes de, ah, ce site plat icône dot com. Donc, si vous n'avez pas la version complète ou un abonnement avec icône plate, euh, il est certainement nécessaire que vous donniez crédit aux auteurs de ces icônes. Eso aller de l'avant à notre ressource est pour le projet ici, puis ouvrez cette application connue Start txt Et puis en bas ici, vous verrez. Ah, il y a quelques crédits ici, alors continuons et copions ça. Ah, et allez-y et collez-le quelque part dans notre projet ici. Euh, maintenant, bien sûr, parce que nous ne maintenant,bien sûr, parce que nous ne développons pas cette application, qui la conçoit, euh et bien, juste besoin de transmettre ça à celui qui est développons pas cette application, qui la conçoit, euh et bien, développer cette application pour s'assurer qu' ils mettent ces icônes là où elle appartient dans leur application. Vous remarquerez que le boîtier est en majuscules ici. Alors pourquoi ne pas aller de l'avant à nos options de texte ici, cliquez sur les trois points, puis changez le boîtier en minuscules. Nous pouvons apporter cela plus bas ici et sur une autre prise à dire, icône crédits à la fois que là et le mettre ici pour quiconque veut utiliser les's dans leur projet. Il est donc toujours important de le faire si vous utilisez des icônes qui nécessitent des attributions. La dernière chose que je veux faire ici est juste amélioré Ma page de paiement ici. Il ressemble à l'avion en ce moment, alors allons-y et amenons ceci, mais dans un peu plus bas. Vas-y et ramène ma carte de crédit un peu plus bas aussi. Je veux aller de l'avant et insérer une sorte de description. Texte ici sur disons, s'il vous plaît carte de crédit pour votre compte. Maintenant, comme vous pouvez le voir, mon texte continue et continue, donc ce que vous pouvez faire est d'aller à l'option texte ici, cliquer sur trois points, puis aller de l'avant et faire et vous pouvez aller de l'avant. Je peux choisir la hauteur automatique ou la taille fixe. Donc, si vous choisissez réparer les yeux ici, on peut aller de l'avant et, euh, apporter notre texte ici et le redimensionner pour correspondre à notre mais ici, donc 25 pixels du côté. Allons-y et retirons ça d'ici. Ça a l'air bien. Allons de l'avant et déplaçons la carte de crédit un peu plus bas. Allez-y et détachez le style et changez-le pour que c'est le bon corps. Carla 17. Et faisons un peu plus léger genre de téléphones ici, et allons de l'avant et finissons juste ce texte ici. S' il vous plaît ajouter une carte de crédit pour votre compte à utiliser pour votre service de blanchisserie semble bon. Je veux m'assurer que c'est 3 25 et puis le centre ici peut être abaissé un peu. avais de la place pour respirer mon truc de design. Ça a l'air mieux. Peut-être qu'on peut centrer ça aussi. Parfait. Un jour. Il est bon d'ajouter ces types d'invites de description à vos utilisateurs soit pour leur dire pourquoi collectaient cette carte de crédit ici, soit pour leur dire quand cette carte de crédit pourrait être utilisée. Et cela conclut notre maquette de conception ici pour l'application mobile. Donc, si vous êtes également intéressé à faire un projet Web ou une application Web bien conçue, nous le ferons dans les prochaines sections. Maintenant, je veux vous faire un exercice à faire pour vous-même. Si je fais un zoom avant sur ma page de demande ici, vous verrez que nous avons notre magasin de blanchisserie de choix. L' idée ici est qu'ils défilent dans les différents magasins et trouvent celui qu'ils aiment demander leur service de blanchisserie de tirage, puis ils cliquent sur ce bouton de demande de service. Mais il n'y a vraiment aucun commentaire pour eux en ce moment et sont conçus pour leur dire que la commande ou la demande ici a été placée. Alors n'hésitez pas à ajouter un état d'achèvement ou une sorte de retour à notre utilisateur. Peut-être une sorte de carte qui leur indique que votre commande a été passée ou que votre demande a été passée. Um, ils seront plutôt cool. Alors allez-y et ajoutez quelque chose pour dire aux utilisateurs que leurs demandes ont été envoyées. Et une fois que vous aurez fait ça, n' hésitez pas à m'inclure dans votre projet ou à m'envoyer un courriel et je serai plus qu'heureux de vous fournir des commentaires. Et une fois que vous aurez fait ça, n' hésitez pas à m'inclure dans votre projet ou à m'envoyer un courriel et je serai plus qu'heureux de vous fournir Super. 33. Que faire ensuite ?: D' accord. Félicitations pour avoir terminé votre première maquette mobile. Vous I C'est incroyable. Ensemble, nous avons travaillé sur une simulation mobile complète de sept pages pour l'application kangourou propre. Alors, quelle est la suite d'ici ? Eh bien, il y a un tas de façons d'améliorer ou de jouer avec notre design actuel ou d'explorer la figue MMA, et vous UX design encore plus loin. La première chose que vous pouvez faire est d'aller là-bas, peut-être télécharger vos applications préférées et vraiment vous inspirer d'eux. Un couple plus de ressources est que vous pouvez utiliser en ligne comprend aller à Pinterest et la recherche pour la conception de l'interface utilisateur et la conception mobile, ou même aller aux modèles de site Web dot com, qui est orthographié p t tr n s dot com. D' où vous pouvez parcourir un tas de différents mobiles, vous sage que vous pouvez obtenir l'inspiration de et peut-être l'appliquer à votre propre Vous, j'ai conçu aussi bien. La deuxième chose n'a pas fait d'ici. Il est en fait aller de l'avant et de créer un prototype à partir du design que nous avons mis en place. Donc, ce qu'un prototype vous permet de faire est de voir votre application prendre vie et créer un prototype interactif que les gens utilisent réellement pour les clients. Que ce soit des investisseurs pour votre propre application ou quel que soit le cas. Vous pouvez montrer ce prototype aux développeurs et la moitié en Crète. Application naturelle à partir de cela. Et bien sûr, si vous voulez élargir vos connaissances de U. S u X essayer web vous je conception est certainement une bonne étape suivante car il vous donnera l' avantage de connaître à la fois la conception mobile et Web. Et c'est vraiment important parce que de nombreux clients et de nombreuses obligations ces jours nécessitaient à la fois une version Web et mobile. Donc, si vous avez cet ensemble de compétences, cela vous aidera certainement. Maintenant, je vais avoir un cours ont été tous couverts, partage de prototypage et même un Web que j'ai conçu dans les prochaines semaines. Alors n'hésitez pas à vérifier ceux une fois leur vie et, comme toujours, pourrait remarquer Bonjour, intelligent à gino dot com. Des trucs comme ça se sentent libres de partager n'importe quel design que vous avez ou toutes les questions que vous pourriez avoir, et je serai heureux d'y répondre avec Cela dit, je suis impatient de vous voir dans un avenir. Bien sûr,