Apprendre le Figma : concevoir une interface utilisateur d'applications Web

1. Introduction: Bienvenue au cours de conception Web avec Sigma et ce cours nous allons apprendre à concevoir une application Web simple pour le service de livraison de linge. Si vous avez suivi un cours précédent, nous avons également élaboré une version mobile pour cela. Et donc dans ce cours, on va travailler sur l'application Web pour le haut. 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 obligations mobiles et Web pour les projets de démarrage de mes propres projets et d'autres clients. À la fin de ce cours, vous avez appris à concevoir une belle application de tableau de bord Web pour les entreprises ou les clients ,ou peut-être même pour vos propres produits. , Ce que nous avons conçu. Le balisage de trois pages où d'autre apprendra comment importer des modèles dans Sigma. Comment utiliser l'image masquée pour nos images sera d'apprendre comment les composants peuvent nous aider à rendre le processus de conception beaucoup plus rapide. Sera également apprendre à utiliser la mise en page automatique, que nous pouvons utiliser pour créer de belles conceptions intuitives que nous pouvons répliquer très rapidement, même utilisé le contenu de Microsoft. Rio se connecte directement dans Sigma pour générer des échantillons de données pour notre projet. Last but not least, apprendra comment nous pouvons créer plusieurs versions de notre projet et utiliser l'historique des versions directement dans Sigma pour pouvoir parcourir toutes les différentes versions de nos designs. Donc, si vous êtes prêt à apprendre à concevoir une belle application de caoutchouc simple en utilisant Sigma, sautez droit et je vous verrai dans ce cours. 2. Décrit du projet: D' accord. Jusqu' à présent, nous avons construit une maquette pour une application mobile. Un balisage complet de sept pages. Ah, et maintenant nos clients nous ont donné un nouveau projet sur lequel travailler, et cette fois on dirait que ce sera une application Web. Ah, pour leurs laveries de consulter leurs demandes de service des clients. Et puis, à partir de là, ils peuvent accepter ou refuser ces demandes, puis changer leur statut. Ou dernier balisage permettait aux clients de cette entreprise de kangourou propre de pouvoir envoyer une demande pour que leur linge soit ramassé, emporté au magasin de blanchisserie, puis remis à eux frais et propres. Et il semble maintenant qu'ils veulent un tableau de bord ou un tableau de bord Web pour que leurs magasins de blanchisserie puissent utiliser, ce qui est tout à fait logique. Et, bien sûr, nous voulons faire une application Web réactive. Donc, si le si le client ou le magasin de blanchisserie l'ouvre sur leur appareil mobile, il semble toujours bon. Hum, nous devons trouver le schéma de couleurs, donc nous avons déjà trouvé un schéma de couleurs pour les derniers projets que nous allons appliquer notre schéma de couleurs et aussi nos fonds pour le projet. Et bien sûr, nous pouvons également utiliser le logo pour ce projet. En ce moment, nous sommes vraiment intéressés par les pages requises pour l'instant. Donc, nous voulons nous inscrire, barre oblique de connexion et ensuite nous inscrire. Les options seront l'envoi d'un passeport par e-mail et la signature avec Google, similaire à notre application mobile. Nous voulons un tableau de bord pour voir leurs gains et statistiques à partir du haut est logique. Donc c'est encore une fois pour les laveries de voir combien d'argent ils ont gagné grâce à Clean Kangourou et ensuite ils disent qu'un graphique ici serait sympa. Donc on va aller de l'avant et leur trouver un graphique à utiliser aussi bas. Et puis enfin, il est payant de montrer toute leur demande de service avec la possibilité de choisir de changer leur statut de chaque demande pour donner au client eso informé. Si vous vous souvenez dans notre conception d'application mobile, nous avions un peu d'état sur les services et cela a montré à quelle étape il était service de blanchisserie . Donc c'est contrôlé par le magasin, comme la buanderie ici, hum, passant par cette page et en changeant le statut de chaque commande ou de chaque demande qui arrive . Donc oui, assez simple et direct. Eh bien, page d'inscription de l'application, une page de tableau de bord et une page de service que je demande. Maintenant que nous connaissons beaucoup de concepts et d'outils auxquels nous avons accès dans la fig MMA, je pense que la conception de ces trois pages sera super facile. Et dans la leçon suivante, nous allons sauter et commencer à installer avec un modèle. Ah, et en partant de là. 3. Commencer par un modèle: Bon, donc je pense que nous sommes prêts à commencer avec notre nouveau projet ici. Une chose que je vais mentionner est que nous n'allons pas passer autant de temps à détails très précis dans ce projet juste parce que nous avons couvert à peu près tout dans les dernières sections. Donc, nous allons passer cette section vraiment à mettre en place une maquette pour l' application Rob Super rapide eso, afin d'aider sans. Ce que j'ai fait est que j'ai mis en place un petit fichier de modèle sur ont utilisé un tas d' autres modèles que vous pouvez trouver à partir de ce modèle utilisé un point Txt. Donc, ce premier lien ici est un lien vers les conceptions matérielles modèle de MMA, ils peuvent utiliser celui-ci est une version gratuite. Donc, il comprend un tas d'éléments et de conceptions que vous pouvez utiliser les graphiques libres de celui-ci pour fig MMA. Ah, que vous pouvez aller et utiliser aussi, et cela vous donne de jolis graphiques à l'intérieur de vos dessins de figurines. Donc, je suis déjà allé de l'avant et téléchargé ces, puis les placer à l'intérieur de ce modèle Web de kangourou propre que vous pouvez utiliser. Et il y a un tas de choses à l'intérieur aussi que nous allons explorer eso afin d'ajouter ceci à votre projet ou à votre fig MMA First, je vais me diriger vers mon équipe de kangourou propre ici parce que je veux placer cela à l'intérieur d'un projet dans ici. Si vous n'avez pas cette équipe où vous n'avez pas suivi cette étape, vous pouvez également mettre ce fichier dans votre dossier brouillons, et cela fonctionnera très bien. Donc, je vais aller de l'avant et la tête sur ici pour un nouveau projet sur Nous allons juste nommer ce projet application Web ou nous allons faire blanchisserie application Web magasin. Nous allons créer un projet, puis nous allons de l'avant et sélectionnez Are Clean Kangourou pleuré. Il suffit de ne pas insérer le fichier ici Une fois qu'il a été importé avec succès. Je vais aller de l'avant et juste double-cliquer pour l'ouvrir ici et allons très vite passer en revue quelques choses ici. Donc il y a quatre pages en place ici. Le 1er 1 a nos trois cadres principaux qui essayaient de concevoir Um, la quatrième page ici a les exigences que nous avons passées dans la dernière leçon. Eso vous avez accès à cela ici est faible et Ce sont les trois pages qui ont essayé concevoir dans notre page de balises Web Ici, alors nous avons des styles. Je suis donc allé de l'avant et j'ai créé des styles pour mon texte, ainsi que le jeu de couleurs que nous utilisons dans la dernière leçon ou dans les dernières sections. Et en fait, je les ai ajoutés aux styles locaux aussi. Donc, une fois que vous avez importé ce fichier, vous avez accès aux mêmes styles de couleur que nous avons ajoutés dans les sections précédentes, ainsi qu'à certains textiles avec notre fonds Rubicam Carla. Maintenant, si vous n'avez pas suivi les dernières sections, allez-y et assurez-vous d'installer ces fonds sur votre machine locale. Et puis, si vous exécutez le fig mo web vers le haut, dirigez-vous vers Google et recherchez l'installateur de polices de fig MMA, puis téléchargez-le pour que vous puissiez utiliser ces polices sur votre fig, mon application Web aussi. Sinon, si vous êtes sous cet arrêt, vous pouvez simplement installer ces polices et ensuite retourner ici, et alors cela devrait fonctionner très bien. J' ai aussi une page de composants ici où j'ai placé étaient à nouveau. J' ai utilisé des conceptions de matériaux, des modèles de figment pour générer beaucoup de ceux-ci. La ressource est pour que nous ayons un tas de cartes ici que nous pouvons utiliser. Nous avons un petit graphique ici à partir du modèle de graphique dont je vous ai parlé plus tôt. Um, un tas de boutons, de listes déroulantes, champs de texte, même et ensuite à une sorte de rose ici pour des informations et des trucs. Ah, et aussi un petit tableau de bord de navigation aussi. Maintenant, la raison qui ont créé ces et vous a fourni avec eux afin que nous puissions passer par mise en place ou se moquer super vite. Nous avons déjà appris beaucoup de ces concepts, y compris comment créer des composants et comment réutiliser et modifier des composants et comment créer des instances àpartir de composants et les utiliser. Nous avons déjà appris beaucoup de ces concepts, y compris comment créer des composants et comment réutiliser et modifier des composants et comment créer des instances à Hum, si vous n'avez pas déjà lavé ces leçons, assurez-vous d'aller dans les dernières sections et de passer en revue les composants. Ou si vous avez oublié comment ils fonctionnent, je vous encourage à revenir sur ces leçons aussi bas sur juste un peu de venir à la vitesse avec ça. Ouais, eh bien, utilisez beaucoup de ces composants ici juste pour rendre notre processus de conception beaucoup plus rapide et plus efficace. Une chose cool dans laquelle nous n'allons pas trop entrer, en passant, passant, c'est que dans vos actifs, vous trouverez une petite icône de bibliothèque d'équipe ici. Oui. Si vous travailliez avec une équipe, vous pouvez en fait aller de l'avant et publier les composants que vous possédez ici pour l'ensemble de votre équipe. Et maintenant, une fois que vous avez sélectionné cela, si vous n'avez pas la version complète, il vous indiquera que vous aurez besoin d'un plan professionnel pour utiliser cette fonctionnalité. Vous pouvez également publier le style de sorte qu'entre votre équipe, si elle travaille sur plusieurs projets, vous puissiez utiliser les mêmes styles. Donc, si je clique dessus, toute l'application kangourou de l'équipe aura accès à ces styles pour la police. Et la couleur est bien s Oh, vous pouvez certainement publier les styles entre vos équipes et les utiliser sur le plan gratuit. Mais si vous voulez également avoir accès à tous ces composants entre plusieurs projets différents ou plusieurs fichiers différents au sein de votre équipe, profitez certainement de l'année de la bibliothèque de l'équipe. Et bien sûr, vous pouvez utiliser tous ces composants en allant simplement au robinet d'actifs, et vous avez accès à eux ici aussi. Ce ne sont que des composants généraux qui n'ont pas de catégorie. Ces boutons d'air, conteneurs voient les cartes, donc nous allons certainement les utiliser et nos maquettes ici. Alors revenons aux simulations de rep, puis dans la prochaine écoute commencera à concevoir notre page de connexion à partir de là. 4. Page de connexion: d' accord. Donc, sans plus tarder, passons dans la conception de notre page de bagage ici. Je vais juste utiliser set et zoomer sur la page juste ici. Donc, ce que je veux faire ici, je veux aller de l'avant et diviser ceci en deux parties sur le côté droit. Je vais avoir une petite image. Ensuite, sur le côté gauche, nous aurons notre journal et le panneau, qui seront assez simples et simples. Donc, les premières choses d'abord. Allons de l'avant et utilisons la grille de mise en page afin que nous puissions voir exactement ce que nous faisons. Allons de l'avant et cliquez sur le cadre, puis j'ai déjà mis en place un grain de mise en page afin que nous puissions simplement activer la visibilité et l'utiliser ici. Vous devriez voir cette année car cela fait partie du modèle. Mais si vous n'allez pas simplement ajouter une grille de mise en page avec un type de colonne de count 12. J' ai dit le pape, une ville de la couleur à 3% donc il est plus facile de voir tout le reste. Hum, le type sera étiré et puis les marges sont 60 sur les sites sur la gouttière est 10 entre les colonnes ici, donc une fois que vous avez activé cela, allons de l'avant et créer un rectangle pour peut-être juste ici. Allons de l'avant et assurez-vous que ce soit une ligne correctement. Et maintenant, on va utiliser une prise vraiment cool appelée « Unspool ash ». Alors passons à gérer les plug-ins pour installer cela. Si vous ne l'avez pas, allez simplement parcourir tous les connecteurs. Maintenant, une fois que cela sera chargé, vous remarquerez que c'est peut-être la première option ici. Ou quand tu regardes cette vidéo, ça pourrait être ailleurs. Vous pouvez donc simplement rechercher sur Splash dans la barre de recherche. Voici bien, déjà l'avoir installé, donc je ne vais pas l'installer. Mais vous pouvez cliquer sur ce bouton pour l'installer et revenons à notre fichier ici et ensuite utilisé plug in on slash. Maintenant, si vous vous souvenez, nous avons utilisé unspool ash dans notre précédente page de connexion que nous avons faite dans notre application mobile. Maintenant, c'est à nouveau une ressource d'image libre que vous pouvez utiliser et donc ils sont branchés vous aide à insérer des images beaucoup plus facilement dans vos projets. S donc assurez-vous de sélectionner d'abord votre rectangle ici, puis dirigez-vous vers la recherche sur Let's do peut-être magasin de blanchisserie, voir ce qui arrive. Cool. Donc, nous avons un tas d'options. Je vais juste rester simple et aller avec ce 1er 1 ici. Je pense que ça a l'air plutôt sympa. Cool. Je vais aller de l'avant et fermer ça ici, euh, et maintenant, allons de l'avant et juste créer un petit séparateur entre ces deux sections. Donc, je crée une ligne et utilise shift pour m'assurer qu'elle est droite, puis je fais une couleur de trait désactivée. Allons à nos styles et choisissez notre Nous allons faire la couleur secondaire ici, l'orange nous allons faire la largeur, peut-être cinq pixels ou l'année d'épaisseur. Et puis allons-y et passons à la question des droits. Donc c'est juste entre nos différentes sections ici. Peut-être que nous pouvons le cogner jusqu'à huit pixels ou faisons six pixels. Ça a l'air bien. Donc maintenant je vais juste éteindre ma note de mise en page pour le cadre ici. Ah, et donc allons de l'avant et créons un cadre pour notre journal et panneau ici et gardez à l'esprit que vous pouvez toujours créer des cadres à l'intérieur des cadres juste pour garder les choses plus organisées. Allez-y et dessinez un cadre ici. Assurez-vous juste qu'il s'adapte à toute cette section ici. Et puis nous pouvons même mettre en place une mise en page. Super à l'intérieur d'ici. Allons-y. Collins a quatre colons avec une marge de 60. Je l'ai eu de 10 ans. Faites 5% ici juste que nous pouvons aligner les choses correctement. Allons d'abord de l'avant et ajouter ou logo en haut. Passons donc à notre ressource, c'est que vous auriez dû télécharger à partir de la dernière leçon. Uh, allez sur le logo et allons-y et traînons cette couleur kangourou SPG juste ici. Et puis tout en tenant, déplaçant Ault, je vais aller de l'avant et le redimensionner tout en gardant sa position à Let's Do 76 par 76. Ça devrait marcher. Je vais juste aller de l'avant et le placer juste ici et peut-être garder un espacement de 60 par rapport au haut est bas. Nous allons utiliser T pour créer un texte de logo ici, puis allons de l'avant et assignons un style ou un textile de titre un, puis choisissez ah, style de couleur ou style de remplissage du bleu primaire. Ici, allons de l'avant et juste alignés ceux en les sélectionnant ensemble. Et puis allons de l'avant et regroupez-les ensemble aussi. En utilisant la commande G je vais renommer ça en logo. Allons de l'avant et ajoutons une description. Le texte est une ligne, donc il est utilisé T. Mais cette fois, nous allons dessiner un cadre pour le texte juste ici. Juste, il ne déborde pas sauf si vous vous inscrivez pour voir vos gains et sauf les demandes de blanchisserie des clients. Je pense que c'est bien. Allons de l'avant et délier ce style et faire aller à qui semble bon. Et maintenant, allons de l'avant et ajoutons quelques boutons et champs dans l'année. Alors allons de l'avant et choisissons nos actifs. Poignardez ici, puis allez-y et ouvrez les composants ici. Nous allons conduire la signature Google, mais ici et puis nous allons de l'avant et faire glisser un champ de texte sont en fait deux d'entre eux ici , un pour e-mail, un pour mot de passe, et puis nous avons aussi besoin ah activé mais dans la ligne pour notre connexion. Et puis il y a un séparateur ici aussi. Donc, nous allons juste séparer les deux types différents de Loggins en utilisant ce diviseur. Alors allez-y et traîné que ici est faible et allons-y et juste zoomer ici et je suis correctement aligné ces ainsi et les redimensionner parfait. Vous êtes en train de signer avec Google Button pour être le premier ici, puis nous allons avoir le diviseur ici. Utilisons les centres horizontaux alignés, mais ici, juste pour s'assurer qu'il est bien aligné, déplacez-les un peu vers le bas et maintenez peut-être un espacement de 30 pixels ici, 30 pixels avec les champs de texte sur champs de texte peuvent être peut-être 15 pixels les uns des autres où nous pouvons même faire 10. Et allons de l'avant et juste mettre notre mais ici aussi bien faire glisser tout le chemin à travers. Abaissons-le un peu parce que nous voulons aussi mettre un mot de passe oublié. Mais ici oui, nous pouvons le faire en faisant simplement cuire du thé et ensuite taper pour mot de passe obtenu. interrogation. Si elle ne vous donne pas automatiquement les boutons. Carla. 14 points Ah, textile. Ici, allez-y et détachez la cellule, puis sélectionnez. Euh, mais à Carla 14 points. Allons de l'avant et alignons ici. 2 20 pixels d'ici. Ok, ça a l'air bien. Allons de l'avant et dupliquons également ce bouton de passeport oublié. Placez-le ici, puis faites les conditions de service et la politique de confidentialité pour les liens ici. Je vais sélectionner la fin et utiliser effectivement la commande. Sois là pour se déplier. Il sera contrôlé au-delà de Windows. Allons de l'avant et juste comme ça et faisons la ligne horizontale, puis maintenez l'espacement hors. Faisons 40 par le bas. Allons de l'avant et sélectionnez ce cadre ici et simplement cacher ou grille de mise en page juste pour voir ce que nous avons . Je pense que ça a l'air bien. Allons de l'avant et simplement renommer un tas de choses ici ou changer la configuration d'un tas de composants ici. Euh, je vais sauter ici, changer celui-là en email. Changeons celui-ci en mot de passe. Et maintenant, si nous sélectionnons ou couches panneau, nous devrions être en mesure de simplement sauter ici. Et puis dissimulons notre porte-chance ici pour montrer l'e-mail, puis faire le contraire dans le meilleur champ et cacher le courrier. Parfait. Nous avons email et mot de passe, et maintenant nous voulons juste changer le nom de ce bouton pour vous connecter. Allons de l'avant et juste un multi. Sélectionnez ces deux boutons est Loi et Modifier. Le rempli à notre style de couleur foncée ou de texte ici aussi bien. Parfait. Je pense que nous avons une belle bûche en paix maintenant et maintenant. J' espère que vous commencez à voir la puissance des composants réutilisables et à quelle vitesse nous pouvons mettre en place une page comme celle-ci qui aurait pu prendre des heures sur d'autres conceptions. Le logiciel est parfait. Donc, dans notre prochaine vidéo, nous allons sauter dans notre page de tableau de bord et créer un joli tableau de bord pour nos magasins de blanchisserie ici. 5. Masques d'images: d' accord. Jusqu' à présent, nous avons appliqué des images aux formes en les faisant simplement glisser dans la forme ou sur la forme. Mais nous n'avons pas vraiment exploré le fonctionnement des masques d'image. Donc, dans cette leçon, je vais vous montrer une autre façon. eu lieu des images dans votre projet. Donc, disons ici, au lieu d'avoir mon image de fond ici à l'intérieur de ce rectangle, je veux l'avoir à l'intérieur, peut-être dans une bouche ou un cercle ou peut-être plusieurs cercles. Hum, c'est vraiment à toi de décider. Masques d'image. Vraiment ? Donnez-nous cette option 2, s'il vous plaît. Images à l'intérieur d'une autre forme ou de multiples formes sur. Je vais vous montrer exactement comment ça va marcher. Pour démontrer. Je vais créer un cercle sur ma forme. Je pense que quelque chose comme ça marcherait. Et maintenant ce que je veux faire, c'est que je veux placer cette image à l'intérieur du cercle et couper tout en dehors du cercle essentiellement pour que l'image montre essentiellement à l'intérieur du cercle, et qu'elle cache tout le reste à l'extérieur. Je vais donc aller de l'avant dans le panneau des calques, faire glisser mon cercle sous mon image ici, puis je vais les sélectionner tous les deux ensemble et faire l'option utiliser comme masque. Et comme vous pouvez le voir ici maintenant, nous avons appliqué un masque d'image, sorte que l'image est simplement masque. Avec cela, nous allons façonner ici pour que vous puissiez redimensionner votre cercle ici. Si vous le souhaitez, déplacez-le pour choisir l'endroit où se trouve votre cercle ou même si vous voulez plusieurs cercles. Disons que pour représenter ce masque, vous pouvez simplement aller de l'avant et dupliquer votre cercle comme ceci. Je viens de dupliquer trois fois, alors allons de l'avant et sélectionnons-les ensemble, puis faisons la sélection syndicale ici. Et maintenant, si je crée un autre masque en m'assurant que ma forme de syndicat est en dessous de l'image ici puis en les sélectionnant tous les deux et en frappant la commande Masque ou Control em des USA, nous allons aller de l'avant et faire la même chose. Donc maintenant, nous avons notre image placée à l'intérieur de ce genre d'unique. J' utilise la forme de trois cercles ou ce que vous voulez appeler ça ici, alors n'hésitez pas à jouer avec ça et à voir comment vous aimez présenter votre image dans vos projets. Pour l'instant, je vais juste supprimer cette union et juste faire glisser cette image en dehors de mon groupe . Et maintenant, je reviens à ce que j'avais avant. Donc, c'est comme ça que la maîtrise de l'image cool. 6. Page de tableau de bord: D' accord. Donc, avec notre page de connexion mise en place, nous pouvons maintenant passer à notre deuxième page ici, qui est la page de tableau de bord. Donc nous voulons inclure un tas de trucs ici, comme lesrevenus de cette buanderie, hum, comme celuide Bella. Donc nous voulons inclure un tas de trucs ici, comme les revenus de cette buanderie, hum, comme celui hum, Peut-être leur montrer une liste de certains de leurs clients et le nombre d'articles qu'ils ont ou des commandes de linge Hominy . Ils ont plu. Et des choses comme ça, on pourrait certainement ajouter un tas d'autres choses comme leurs notes. En même temps, je veux garder cette page simple juste pour la simplicité de cette section ici. Nous ne voulons pas aller trop en détail, mais n'hésitez pas à le faire vous-même si vous voulez ajouter plus à ce patient de tableau de bord. Donc, si nous passons maintenant à notre onglet assets ici, um, première chose que nous voulons faire est d'aller aux composants, et alors vous devriez être en mesure de trouver ce composant de navigation ici. Et allons de l'avant et faites simplement glisser une instance. Et ici et allons juste de l'avant et de l'aligner sur la gauche. Laisse-moi voir si j'ai bien compris. Parfait à gauche en haut. Il semble bon maintenant par défaut ont déjà changé la couleur d'arrière-plan de ces cadres à cette couleur ici. Donc, si le vôtre n'est pas réglé sur ces couleurs, allez-y et mettez-le ici. C' est juste un peu de style ou l'arrière-plan est en blanc uni, et il ajoute un peu de contraste entre les différents éléments, comme ma navigation ici en arrière-plan. Donc encore, avec notre panneau de navigation ajouté ici, um, l'option de tableau de bord a déjà été sélectionnée dans celui-ci, donc nous n'avons pas à apporter de modifications ici. Alors allons de l'avant et commençons simplement à créer notre page de tableau de bord ici. Donc, la première chose que je veux faire, c'est comme le thé et le tableau de bord juste pour leur dire que nous sommes sur la page du tableau de bord. Et puis allons de l'avant et délier ce textile et ajouter un titre. Changeons le Phil pour le style de couleur foncée du texte. Allons de l'avant et peut-être déplacer cela vers le haut et l'aligner quelque part ici et peut-être maintenir un espacement de 50 pixels astucieux à partir d'ici. Donc, dans nos composants, nous avons aussi des conteneurs, alors allons de l'avant et traînons un gros conteneur sur notre cadre ici. Allons de l'avant et aussi faire glisser un petit conteneur. On va utiliser ce gros conteneur pour contenir, ou peut-être des tableaux de revenus et des trucs comme ça. Et puis celui-ci peut peut-être montrer certains des clients récents de cette buanderie ici. Alors allons de l'avant et juste une ligne le fait. Hé, ici. C' est maintenir un espacement de 50 puis l'un entre l'autre. Maintenons l'espacement de 30. Peut-être. Je pense que c'est encore bien. Vous pouvez certainement utiliser des grains de mise en page ici pour rendre votre travail un peu plus facile lorsque vous êtes en train de tapisser des choses. Mais pour l'instant, je vais me concentrer sur la création de ce design. Parfait. Alors maintenant, allons de l'avant et aussi prendre quelques cartes de vue d'ici. Um, faisons la première option ici, où vous la placez ici avec l'espacement de 30 pixels par rapport au haut, juste comme un rappel montrant cet espacement entre les différents éléments en utilisant Ault. Donc, si vous maintenez tout pour la touche d'option, vous pouvez voir ce que lorsque vous avez sélectionné un objet ou une forme, vous pouvez voir l'espacement avec n'importe quel objet que vous survolez. Juste un petit rappel au cas où vous auriez oublié comment faire ça. C' est très pratique. Cool. Alors allons de l'avant et ajoutons un autre ici. Peut-être un sélectionné maintenant. Et faites-vous un espacement de 30 à nouveau entre cela et encore comme nous apprenons Et la cohérence ux est la clé . Nous ne voulons pas ajouter ah, espacement qui semble hors par rapport à tout le reste. C' est pourquoi nous utilisons un espacement cohérent ici. Allons de l'avant et utilisez Ault et faites glisser une autre instance de cette option ONU sélectionnée ou non sélectionnée de la carte de vue ici aussi. Et encore une fois, je vais juste vérifier que tout est aligné Parfait. Faisons notre chemin de haut en bas ici. Hum, première chose que je veux aller de l'avant et changer ce titre pour un chiffre d'affaires parfait. Et puis allez de l'avant et changez ce texte déroulant pour peut-être faire mensuellement. Donc, à partir d'ici, peut-être que l'utilisateur peut choisir le terme qu'il veut voir ses graphiques dans ou ce que Lengthy. Vous voulez parcourir leurs données de graphique et, euh et puis je vais aller de l'avant et sélectionner parmi mes composants un graphique à barres pour le placer juste ici. Allons de l'avant et utilisez shift ici pour simplement redimensionner cela uniformément. Je vais tenir le commandement et développer ça un peu plus parfait. Donc, nous avons un espacement de 24 pixels de chaque côté, donc semble agréable et centré. Alors d'abord, allons-y. Et ici et changez ce chiffre d'affaires pour peut-être refléter le mois que nous regardons. Alors faisons juste un exemple Octobre 2019. Ça a l'air bien. On dirait qu'on a un tas de filtres pour le tableau. Donc nous n'avons pas vraiment besoin de celui-ci ici pour pouvoir aller de l'avant et simplement le supprimer d'ici. Avoir tout à ce sujet serait bien si vous pouvez montrer le chiffre d'affaires total pour ce mois-ci, peut-être ici. Alors allons de l'avant et allons au composant maître ici. Et puis ajoutons un texte ici. Peut-être mettre dans un montant en dollars dans un do 000 Qu'est-ce qui est non lié ou détaché le style ici et le changer à la direction sur ce ? Allez-y et juste changé la couleur de remplissage à notre technologie. Commencez ici et bougez. C' est peut-être juste ici, et bien sûr, on peut utiliser le spectacle et se cacher. Si vous voulez afficher le filtre au lieu du signe dollar ici. Mais pour l'instant, je vais laisser ça là. Revenons à notre page de balises Web, et maintenant nous avons qui apparaît balle. Alors allons de l'avant et juste éditer ceci et mettre un numéro d'échantillon qui semble bon. Allons de l'avant et modifions ces chiffres ici est, eh bien, eso si vous remarquez que nous avons un tas d'icônes ici qui sont superposées les uns sur les autres, allons à ce 1er 1 et cliquez sur les icônes. Donc, une fois que vous avez trouvé le groupe Icônes ici, allez-y et ouvrez-le et vous devriez voir trois icônes ici. Ah, le 1er 1 représente les étoiles ou le nombre de notes qu'ils ont. Hum, donc dans celui-ci, nous voulons faire des gens, donc nous voulons laisser celui-ci comme montré, et ensuite les autres comme cachés. Et puis on le fera. Nous allons juste partir qui a gagné 20 clients. Um, et puis allons de l'avant jusqu'à la 2e 1 C'est comme les icônes ici. Et puis allons de l'avant et dissimulons l'icône du peuple maintenant et puis cachons celle-ci aussi , donc nous avons juste le milieu ici et il peut être ici au lieu de 1 28 nous pouvons montrer que leur revenu total a été mis dans un nombre aléatoire ici peut-être 41 k et faire le chiffre d'affaires total. Ça a l'air bien. Allons-y par ici. Donc ici, allons de l'avant et laissons le 1er 1 et cachons les deux derniers, qui devrait nous montrer cet iPhone star ici, et je Peut-être qu'on le fera. Faisons 4.5. Faisons note moyenne comme ça. Je pense que cela semble bon lorsque vous utilisez la commande et faites défiler pour zoomer hors de là. Parfait. Donc, de cette façon, le client ici a plusieurs options. Ils peuvent accéder à différents onglets pour voir leurs évaluations au fil du temps, peut-être voir leur nombre de clients au fil du temps. Et donc cela traitera la page sur laquelle nous sommes ici, ou les statistiques que nous montrons ici en termes de leur tableau de bord. Maintenant, allons de l'avant et ajoutons quelque chose ici. Allons de l'avant et doublons rapidement et changeons ceci aux clients récents. Examinons ici et maintenant si vous passez par les composants d'actifs, j'ai créé deux types différents de listes d'avatar ici. Donc, ce sont les chaussures du 2ème 1 juste ici, qui est la plus simple. Et allons-y et, hum, hum, à un espacement de 24 ici et puis redimensionnons ça pour correspondre à cet espacement. Ok, Austin, ça a l'air bien. Donc, avec un créé ici, allons de l'avant et utilisons Ault pour faire glisser une autre copie ici et faire. Il peut s'agir d'un espacement de 12 entre chaque élément. Et maintenant, si vous appuyez sur commande de tas de fois, il va aller de l'avant et dupliquer les éléments suivants à cet espacement également. Je pense que c'est bien ici. Donc, la future leçon reviendra et remplira effectivement ces données avec des échantillons appropriés afin qu' ils ne semblent pas trop clairs comme ça. Mais pour l'instant, si je fais un zoom arrière, je pense avoir à peu près tout ce que je voulais ajouter à mon tableau de bord ici. , Encore une fois, nous avons beaucoup d'espace vide ici, donc si vous voulez le remplir avec un tas d'autres trucs pour quelques idées qui me viennent à l'esprit pourrait être que vous pourriez leur montrer leurs gains moyens par commande ou leur temps d' exécution moyen, donc il y a un tas de choses que vous pouvez ajouter ici pour le rendre meilleur. Mais pour l'instant, je pense qu'on va aller avec ça juste pour garder les choses simples. Et dans notre prochaine leçon, nous allons revenir à la page de demande où nous avons la liste des demandes de blanchisserie des clients, et ensuite nous allons réellement concevoir cela en utilisant un concept vraiment cool appelé totalement aussi. 7. Auto-mise en page: Bon, donc je pense que nous sommes prêts à passer à notre dernière page ici. Ah, la page de demande. C' est donc là que la buanderie ou toute personne qui s'est connectée de la buanderie pourra voir leur liste de demandes, ce soit celles qui ont besoin d'approbation ou celles qui sont actuellement lavées ou séchées ou quoi que ce soit le le cas est. Donc nous allons avoir des composants similaires de cette page. Donc, quand nous allons de l'avant et que nous les copions sur eso, nous aurons la navigation ici pour sélectionner ce mur tenant le décalage. Regardons ce titre ici. Et puis nous allons juste aimer cette vue aussi bien en utilisant la commande. Tu vois, on peut aller à notre cadre de demande ici et ensuite faire la commande V Perfect. Allons de l'avant et renommons ceci pour demander. Nous allons zoomer ici et allons dans notre onglet de demande ici, ou la sélection juste ici. Et nous allons de l'avant et rectangle non hygiénique d'ici et puis cacher le rectangle de l' autre et nous allons de l'avant et sélectionnez le texte ici détaché style et faire le texte style sombre . Comme l'icône ici. Style détaché et faire ce texte couleur moyenne. Et puis nous allons ici et faisons le contraire. Changer celui-ci, aussi, la couleur primaire ici et ensuite faire celui-ci aussi un style de couleur primaire parfait. Donc nous avons juste changé la sélection de celui-ci à celui-ci. Ici. Vous pouvez aller plus loin et faire un composant pour chacun à être sélectionné ou sélectionné et aller un peu plus loin et nos composants maîtres, ou rendre les réglages ici parfaits dans chaque cas. Donc maintenant que nous avons cela, allons à notre Allons à notre conteneur ici et allons de l'avant et alignons ici avec le texte de la demande, et je vais juste aller de l'avant et le rendre plus grand pour qu'il s'adapte à presque tout l'écran. Voyons comment on va avec l'espacement. Maintenez la commande, faites-la un peu plus grand ici, et continuons et redimensionnons simplement cela à cette hauteur, et je pense que ça a l'air bien. Allons donc dans le texte ici et modifions l'alignement pour aligner à gauche. Allons de l'avant et changeons le texte à une demande d'attente, donc ce sont essentiellement les demandes que le magasin de blanchisserie doit accepter ou rejeter. En fait, peut-être que nous pouvons rendre ça plus petit, donc nous avons quelques demandes qu'ici. Et puis nous avons un tas d'autres options pour la demande peut-être acceptée sur et ainsi de suite. Maintenant, je veux vous montrer un concept vraiment cool appelé Odelay Out ici. C' est relativement nouveau avec la figue MMA, mais c'est super utile, et cette petite animation montre en fait un très bon exemple. Essentiellement, il vous permet de créer des images intelligentes qui se redimensionnent en fonction du contenu qu' il contient. Donc, cela pourrait être bon pour un tas de choses, comme les boutons de nouveau. Ainsi, lorsque vous tapez, les boutons se redimensionneront en fonction du texte. Ou, par exemple, si vous avez un tas d'éléments similaires qui vont dans un cadre, vous pouvez utiliser la mise en page automatique pour simplement déplacer facilement les choses autour comme ça, si vous voulez en savoir plus sur la mise en page automatique, allez-y et consultez cet article. Mais je vais aussi aller de l'avant et l'appliquer ici pour vous montrer comment ça marche. Bon, maintenant, passons à notre arme ici, où nous avons une liste de nos composants. Et puis faisons glisser cette liste d'avatar ici, et je vais aller de l'avant et la redimensionner. Repositionnez le redimensionner. Donc ça correspond à notre espacement. Je pense que c'est bien. Maintenant, si je veux dupliquer ceci et créer plusieurs lignes de cette instance ici, je peux le faire en utilisant, bien sûr, bien sûr,la commande D ou alter comme nous l'avons fait ici dans cette table. Mais nous pouvons également utiliser la fonctionnalité de mise en page automatique était La chose est super cool. Alors allons-y et essayons la mise en page automatique. Revenons à nos couches ici sur Allons de l'avant et utilisons Ault pour dupliquer ceci ici et maintenant. Allons de l'avant et utilisez shift pour sélectionner les deux instances ici, puis Maintenant, vous verrez que vous avez une option appelée tôt ici. Si vous allez de l'avant et cliquez sur le signe plus, quelque chose de cool se produira. Ces deux éléments vont maintenant atteindre un cadre de mise en page automatique ici. Maintenant, une chose que je vais faire, c'est que je vais décocher ce contenu. Je vais vous dire pourquoi dans une seconde Donc ici, je vois tout semble normal mais si je vais de l'avant et couper le contenu afin que toute ombre en dehors de ce cadre de sélection soit coupée. Si cette option est activée, allons-y et éteignons-la pour l'instant. Et maintenant c'est un cadre de mise en page automatique. Donc on a accès à un tas de trucs, hum, sur le panneau de droite ici. Mais continuons et créons d'abord quelques lignes de plus. Et la façon la plus simple de le faire est de cliquer sur l'un des éléments ici et de faire la commande D, et comme vous pouvez le voir automatiquement, les choses seront placées vers le bas. Vous pouvez sélectionner votre autre cadre de mise en page ici et sur le côté droit. Ici, vous avez quelques options, alors nous allons les examiner. Donc, d'abord, je veux vous montrer cette option verticale. Ah, imaginez que vous montrez cette liste de manière horizontale. Au lieu de cela, vous pouvez vraiment passer à l'horizontale, et cette liste sera affichée horizontalement au lieu de verticalement. Mais si vous choisissez verticalement, il sera montré comme ceci, ce qui est ce que nous voulons. Tu peux traiter ça. Vous pouvez traiter le tapotement horizontal ici, donc si vous voulez plus d'espacement, hum à gauche et à droite. Vous pouvez traiter ça d'ici. Donc, en fait, si vous faites 24 ici, nous pouvons juste aller de l'avant et déplacer ce cadre ici. Parfait. Et ce sera votre rembourrage vertical. Donc, si vous voulez ajouter un espace en haut et en bas de ce cadre de mise en page automatique entier , vous pouvez le faire ici. Donc, si vous aviez un rembourrage de, disons 24 Donc maintenant entre le premier élément ici et le dernier élément, il y aura toujours un tapotement de 24 pixels. Et puis c'est l'espacement entre les éléments parce qu'à l'origine, quand nous avons fait cela en un cadre automatique, c'était l'espacement entre les deux. Donc j'ai juste maintenu ça. Mais nous pouvons certainement tweeter ceci et, hum, hum, aller de l'avant et l'augmenter si vous voulez plus d'espacement ou le diminuer si vous voulez moins d'espacement. Je pense qu'on peut en faire 18 ici et ça aura l'air bien. Impressionnant. En outre, nous pouvons ajouter le même style à notre arrière-plan ici, Alors continuons. Ajouter un remplissage de blanc. Maintenant, nous pouvons faire du contenu de clip parce que nous avons ajouté ces modèles et je vais de l'avant et ajouter un rayon de bordure hors. Quatre. Allons de l'avant et ajoutons une couleur de trait. Alors maintenant, pour un coup, allons de l'avant et changer le Sculler et utiliser cet outil de pipette ici pour choisir la même couleur que notre comme la bordure de cet autre conteneur. Ici. Maintenant, le Phil est blanc, c'est ce que nous voulons. Un accident vasculaire cérébral est ce que nous voulons. Nous pouvons faire le coup à l'extérieur et allons aussi dans cet autre conteneur ici et utiliser le contrôle. Voir sur ce texte, puis aller de l'avant et choisir mon cadre complètement hors et faire la commande V, et maintenant vous remarquez qu'il l'a placé au bas du cadre ici. Mais si vous voulez aller de l'avant et le placer dans une position que vous voulez, vous pouvez le faire. Donc, si vous le voulez, par exemple, distinction entre ces deux prenant, placez-le ici ou vous pouvez le placer au sommet comme nous le voulions. Allons de l'avant et supprimons cet autre conteneur que nous avons. Allons de l'avant et je déplace ça vers le haut parfait. Et donc maintenant, si nous continuons à dupliquer et ajouter plus d'éléments ou cadre entier ici va grandir très bien ou il va rétrécir lorsque vous commencez à supprimer des éléments hors de lui comme ça. Donc, quand nous quittons l'étranger ici, alors allons de l'avant et dupliquons ce cadre complètement sorti, en utilisant Ault et en le faisant glisser ici. Faisons un espacement de 30 entre les deux. Allons de l'avant et maintenant changer celui-là aussi. Demandes actives où nous pouvons montrer les services de blanchisserie acceptés ici. Cool. Donc, il y a de l'ordre pour nous. J' espère maintenant que vous pouvez voir pourquoi c'est si utile. Et donc avec ça, je pense qu'on a presque terminé notre maquette ici. Si je zoome tout le chemin, nous avons les trois pages dont nous avons besoin. Maintenant, nous allons aller de l'avant et à quelques exemples de données parce que pour l'instant, il semble très clair s. Allons-y et faisons-le dans la prochaine leçon. 8. Ajouter des données d'échantillon: Très bien, Donc, avec notre maquette à peu près terminée ici, ce que nous voulons faire est d'aller de l'avant et d'ajouter quelques exemples de données à ce récent robinet de client ici , ou le conteneur ici et aussi nos demandes ici. Donc, un branchement vraiment utile lorsqu'il s'agit d'ajouter des exemples de données à vos conceptions est appelé Content Trio. Maintenant, si vous allez sur la gestion des plug-ins, allez à parcourir tous les plug-ins, vous devriez être en mesure de trouver du contenu réel ici. Ou vous pouvez le rechercher ici aussi. Ce plug ins par Microsoft, ce qui est super cool. Vous pouvez aller à l'intérieur de l'événement et en savoir plus à ce sujet. Mais essentiellement, cela nous aide à certaines données de test ou à certains échantillons de données dans nos conceptions très facilement. Donc nous avons un tas d'options comme des noms, des numéros de téléphone. L' adresse est sur un tas d'autres données que nous pouvons simplement ajouter à notre conception. Donc ça a l'air réel. Alors allez-y et installez-le si vous ne l'avez pas déjà installé et passons à notre projet ici et maintenant,nous allons zoomer sur notre projet ici et maintenant, notre tableau de bord ici. Donc, j'ai entendu ajouter quelques exemples de données premier sens pour sélectionner les carburants texte. Ils veulent ajouter des données à s. Donc, allons de l'avant et à notre panneau de calques sur. Ensuite, cliquez dans la liste Avatar et sélectionnez le champ prénom ici ou le texte du prénom , puis faites la même chose ici tout en maintenant la commande sur. Allez dans le prochain ici et continuez à faire ça pour toute votre Rose. Et je pense que c'est tous les six ici. Alors allons de l'avant et faisons des branchements. Et donc la vie contenu Riel. Et puis une fois que la prise s'ouvre, nous pouvons aller de l'avant et utiliser des noms. Mais avant de le faire, ne faisons que des prénoms. Alors appuyez sur les trois points ici, puis décochez les dernières choses ici. Revenons en arrière, et puis nous pouvons aller de l'avant et simplement cliquer dessus pour postuler. Et juste comme ça, nous avons un tas de prénoms aléatoires générés pour nous ici pour ne pas ajouter d'avatars pour chacun de nos avatars ici, comme vous pouvez le voir, si vous cliquez va vous dire que vous avez besoin d'une image Lee ou d'abord, Donc ce sont tous, en fait juste des icônes vectorielles. Mais nous avons besoin d'une image à la place. Donc, ce que nous pouvons faire est que nous pouvons revenir à notre composant maître ici en utilisant cette option. Allons jusqu'ici. Comme cet exemple d'image de profil que nous avons d'ici dans notre robinet de navigation ou une barre latérale de navigation et je vais aller de l'avant et remplacer cet avatar par une image, puis allons juste de l'avant et appliquer la même taille. Donc c'est 40 sur 40. Donc je vais maintenir que 40 par 40 et ensuite concernant les portions ici est, eh bien, parfait, et on peut même aller de l'avant et cacher cette couche. Nous n'en avons pas vraiment besoin tant que nous ne voulons pas appliquer une image. Et maintenant, allons de l'avant et il suffit de copier cela en utilisant la commande C et l'appliquer à ici est faible pour sélectionner cet avatar et faire la commande V. Et juste pour vous assurer que ce mot parfait. Maintenant, revenons à nos simulations Web, et maintenant nous avons un calque d'images ici aussi. Alors allons de l'avant et ouvrons à nouveau notre plug in pour chasser pour vous, et allons de l'avant et sélectionnons ce cadre ici. Maintenant, allons de l'avant et allons dans ce cadre ici et sélectionnez l'image. Et maintenant, allons de l'avant et en fait montrer l'image pour ce 1er 1 ici et allons de l'avant et l'image E non hygiénique de la première rangée ici. Alors maintenant, allons de l'avant et appliquons un avatar aléatoire à notre client récent. Voici donc allons de l'avant et sélectionnez l'image. Assurez-vous que vous allez et sélectionnez l'image réelle et non le cadre, puis faites avatar ici et choisissez Male Perfect. Et puis maintenant, si vous passez à la suivante, assurez-vous de sélectionner à nouveau l'avatar. Choisissez l'image, puis, fonction du sexe ici, nous pouvons choisir une image inappropriée. Et puis allons de l'avant et courons. Cachez ça aussi. Parfait. Allons dans cet avatar sur Masquer l'image, sélectionnez l'image et envoyez le courrier ici. Maintenant gardez à l'esprit que vos noms peuvent être différents ici, alors allez-y et regardez les images. Les images de l'avatar en conséquence. Et continuons et répétons ça tout au long. Donc, j'ai dû dupliquer afin que je puisse juste aller de l'avant et cliquer à nouveau pour obtenir une autre image. Parfait. Ça commence à regarder, Riel. Maintenant, nous avons juste les ordres ici. Donc, ce que vous pouvez faire pour cela que vous pouvez aller de l'avant et double-cliquer dans le texte ici. Alors sélectionnez ce texte ici, allez au texte et nous pouvons juste faire des nombres. Mais allons de l'avant et changeons ça ici. On ne veut pas faire de décimales. Et peut-être que nous voulons faire une gamme de numéros dans les tentes pour que ce soit plus réaliste. Revenons en arrière et ajoutons des chiffres. Parfait. Donc maintenant, si nous voulons le faire pour tous, nous pouvons aller de l'avant. Et comme nous l'avons fait avant, avec nos prénoms ici, sélectionnez chaque texte pour les commandes. Allez-y et choisissez des nombres, générez deux fois des nombres aléatoires partout. Et puis on peut aller un par un ici aux ordres, aux ordres de texte. Et puis, pour faciliter les choses, on peut aller de l'avant et quoi ? Est-ce que nous sélectionnons simplement les commandes ici et à son utilisation en utilisant copier-coller ? Maintenant, vous pouvez remarquer que le champ de texte ici est super petit en termes de hauteur, donc nous pourrions certainement revenir en arrière et changer cela pour lui donner un peu plus de hauteur, donc il est plus facile de travailler avec. Mais je pense que ça marche ici pour l'instant. Allons-y et fermons ceci maintenant si je fais un zoom arrière un peu, je pense que cela semble beaucoup mieux avec de vraies données ajoutées ici. Maintenant, allons de l'avant et faisons la même chose pour une page de demande. Mais cette fois, je vais juste avancer rapidement à travers ça. Je pense que maintenant vous avez l'idée parce que c'est vraiment le même processus. Une chose que je veux dire est qu'un grand raccourci à utiliser ici serait la commande et le décalage. Comment ensemble commande nous permet de sélectionner des éléments individuels à l'intérieur d'un composant ou à l'intérieur de, groupe ah ici, et shift nous permettra d'en sélectionner plusieurs. Donc c'est très pratique. Je recommande certainement cela pour rendre ce processus un peu plus rapide. Bon, donc maintenant je pense que j'ai quelques exemples de données, et ici ça a l'air bien. Je veux mentionner quelques choses cool sur la mise en page automatique. Vous pouvez certainement sélectionner un élément ici et les déplacer. Donc, si vous voulez, par exemple, cette route spécifique soit la 3ème 1 ici. Vous pouvez le faire ou vous le déplacez vers le bas, donc il est beaucoup plus facile de déplacer les choses maintenant si je vais sur cette page ici, nous n'avons pas tout à fait utilisé ici, mais nous pouvons faire quelque chose de similaire. S' il tient plusieurs objets ensemble, nous pouvons faire des choses telles que l'augmentation de l'espacement. Si nous survolons cette ligne rose ici et traînons de haut en bas, nous pouvons également les échanger en utilisant ce petit cercle qui rend un peu plus facile de déplacer les choses aussi. Et c'est si vous n'avez pas totalement appliqué à ce cadre. Une autre chose que je veux mentionner à propos de tout à fait est que vous ne pouvez pas l'utiliser avec contrainte. Ce sont des concepts complètement différents, et vous ne pouvez pas les utiliser ensemble. Et maintenant que cela se termine, notre Web se moque ici. Ce serait vraiment belle année si nos balises ont également travaillé avec l'année mobile. Donc, s'il était réactif et qu'il fonctionnait sur un appareil mobile, ce serait vraiment idéal pour le client et ses clients. Donc, comme un exercice, je vais vous laisser cela pour concevoir une version mobile aussi. Si vous le souhaitez, mais en tant que ressource, je vais quitter la version complète, y compris une version mobile, et je pourrais certainement télécharger cette ressource et vérifier aussi. 9. Historique des versions: Donc, comme je l'ai mentionné au tout début du cours, une des belles choses à propos de la stigmatisation est qu'elle sauve automatiquement votre travail. Donc, il n'est vraiment pas nécessaire de frapper commande, enregistrer ou contrôler en toute sécurité pour enregistrer votre travail sur. Une autre chose cool à ce sujet est que la stigmatisation crée automatiquement une sorte de chronologie pour votre fichier ici aussi bien. Un tas d'autres applications le font aussi comme Google Sheets et même des pages sur le Mac. Donc, si vous allez à votre nom de fichier ici et cliquez sur la petite flèche, puis allez de l'avant et choisissez Afficher overs dans l'histoire ici et puis ici, vous verrez toutes les sauvegardes automatiques que le figment a faites à travers la chronologie. Donc c'est mon dernier tout à sauver. Mais si je clique sur un autre, je peux voir que c'est juste avant d'ajouter mes exemples de données. Et puis si je vais, un de plus je peux voir que c'est juste avant d'ajouter les demandes. Page s. Donc c'est vraiment sympa parce que dans le cas où vous voulez faire des changements ou si vous voulez revenir à une certaine version que vous aviez, vous pouvez aller de l'avant et cliquer sur les trois points ici et soit nommé cette version afin que vous puissiez y revenir ou restaurer cette version afin que cette version soit la version actuelle. Si vous voulez vous débarrasser des modifications apportées depuis, vous pouvez même copier le lien et montrer aux clients ou aux équipes la version de votre conception. Une chose à garder à l'esprit est que la version gratuite vous donne seulement 30 jours d' historique de version . Je vais juste y retourner ici, qui est le dernier. Et vous pouvez également ajouter une version manuellement en allant ici en vous donnant le titre comme pour que je ne puisse même pas décrire ce qui a changé ici et ensuite aller de l'avant et enregistrer. Et puis cela donnerait à cette version actuelle ce nom ici assez cool. Si vous voulez parcourir l'historique de votre fichier ici et que j'utilise juste l'échappement, je peux juste aller de l'avant et sortir de cet historique de version. Et c'est très pratique et très utile sur. Une des choses cool à ce sujet est que vous pouvez toujours aller au fichier et sûr à l'historique des versions , où cela permettra également d'enregistrer les modifications que vous avez faites jusqu'à présent comme une nouvelle version, l'histoire ainsi, assez cool. 10. Que faire ensuite ?: Très bien, Félicitations pour avoir terminé le cours de design Web avec Sigma. Tout au long du cours, nous apprenons à concevoir une belle simple application Web pour notre client, Clean Kangourou et là des magasins de blanchisserie pour être en mesure d'utiliser. Et alors quoi ? Du sexe pour toi. Whoa, il y a quelques choses que tu peux faire d'ici. Le 1er 1 sera de créer un prototype pour votre application Web que vous avez conçue. Maintenant, j'ai un cours de prototypage ici sur le partage de compétences aussi. Donc, si vous êtes intéressé à apprendre comment créer un prototype réel à partir de marques comme celles-ci, vous pouvez certainement vérifier cela. Une autre chose que vous pourriez faire est de concevoir une version mobile et conviviale de notre météo. Si vous vous souvenez, je vous donne ça comme un exercice. Alors n'hésitez pas à faire cette étape si vous le souhaitez. Sinon, dans la ressource est pour ce cours, vous pouvez également trouver ma version des maquettes terminées, qui comprend également une page qui montre une version mobile conviviale pour les conceptions ainsi. Alors n'hésitez pas à vous référer à cela pendant que vous avez conçu votre propre version mobile. Aussi, si vous êtes intéressé par le marketing. N' hésitez pas à saluer du matériel marketing pour un kangourou propre. Ce sera une bonne occasion de mettre en valeur notre météo. Ou, si vous prenez le mobile, vous êtes vous X cours. Eh bien, vous serez en mesure de créer du contenu marketing pour mettre en valeur les canons propres et ce qu'ils font sur ce que leur application fait et comment peut changer la vie des gens. Maintenant, je vais faire un cours à l'avenir pour le matériel de marketing adéquat pour vos clients. Donc, si vous faites du freelance ou que vous travaillez dans une entreprise ou dans votre propre entreprise et que vous voulez créer du matériel marketing, voulez créer du matériel marketing,les tribunaux seront parfaits pour vous, alors gardez un œil sur ce cours, rappelez-vous, comme toujours, vous pouvez me contacter au bonjour intelligent à gmail dot com. Je serai heureux de répondre à vos questions ou de fournir des commentaires sur les designs que vous avez créés , alors n'hésitez pas à contacter dès maintenant. Cela dit, félicitations encore une fois pour avoir terminé ce cours. Je suis impatient de vous voir dans un futur