Figma pour la conception de sites Web UI & UX : Première conception de page d'accueil

1. Bienvenue !: Hey, je suis Chris var1, professionnel du web et des applications concepteur professionnel du web et des applications dans le Gower suivant, vous et moi, nous allons concevoir une page d'accueil géniale dans Figma. Si vous n'avez pas vu ma FIG, mon cours essentiel mène. Commencez par ça. Vous allez avoir besoin de ce fond de teint avant de sauter dans ce bar. Maintenant, à la fin de cette heure, vous aurez une conception complète de la page d'accueil pour un site Web réel. Mais n'oubliez pas qu'il n' y a pas de codage. Maintenant, dans Figma, nous créons l'aspect et la convivialité du site Web. Et cela pourrait les guider. Codewords va reprendre notre conception et l'implémenter dans un véritable site Web fonctionnel. C'est une chose totalement différente. Et si vous avez des questions à ce sujet, c'est ce processus de codage. Encore une fois, je me souviens des scores essentiels qui vont tout éclaircir. Maintenant, ce que je veux de vous, c'est une réplique parfaite de mon design dans cette vidéo. Ensuite, je veux voir votre version. Alors, s'il vous plaît, publiez-le sur la plateforme pour que je puisse vous donner mes réflexions là-dessus. Je promets que mes commentaires seront constructifs. Ne vous inquiétez donc pas de vos compétences. Nous sommes ici pour apprendre. Ce n'est pas un jugement. Il s'agit de s'amuser et de grandir en tant que concepteur de Gate, mettons au travail. 2. Configurer la version de bureau de la bonne façon: Bienvenue de retour. Veuillez ouvrir Figma, la version autonome, et créons un nouveau projet. Appelez ça le LG, court pour ces jambes, super dotnet. Bon, bien. L'outil Frame et cliquez sur la réinitialisation du bureau. Ces étapes devraient être très familières, mais c'est le problème. Je veux que vous puissiez passer par ces actions les yeux fermés à la fin de ce cours, avec le cadre sélectionné, changer la valeur de largeur en 1920. Vous pouvez laisser la hauteur telle quelle. Nous l'adapterons au fur et à mesure que nous descendrons. Ensuite, la grille, comme ici sur la grille de mise en page, la valeur par défaut n'est pas celle que nous recherchons. Alors dirigez cette icône. Maintenant, dans cette liste, choisissez des colonnes. C'est pourquoi vous ne devriez pas prendre de notes en répétant les étapes les plus importantes beaucoup et beaucoup de fois pour le nombre de colonnes. Je suis sûr que vous savez déjà qu'il est 12 ans. Pour les marges. 360, s'il vous plaît. Même si l'opacité est réglée à 10 %, cela interfère avec l'enregistrement. C'est distrayant. Je vais donc le ramener à 3 %. vous n'êtes pas obligé de le faire. Plus que cela, j'ajouterai deux guides qui vont configurer ou une zone active de 1200 pixels. Utilisez Maj R pour activer les règles si elles ne sont pas actives. Déplacez maintenant votre curseur sur le côté gauche, et cette icône s'affiche sur votre curseur. Cliquez sur, faites-le glisser et déplacez-le vers le bord gauche. Vous sentirez que le grand homme essaie de vous aider à le mettre en place et à effectuer un zoom arrière si nécessaire. Répétez l'opération pour l'autre bord de la grille. Fondamentalement, c'est le fondement de notre design. C'est notre point de départ. Veuillez ouvrir le site Web dans votre navigateur. C'est ça, ça a l'air génial. Dotnet. De là, nous voulons télécharger le logo, ce qui peut être fait de plusieurs façons. Si votre navigateur l'autorise, cliquez dessus avec le bouton droit de la souris pour voir si vous pouvez télécharger directement l'image. Si cela ne fonctionne pas. Voici mon autre méthode. Cliquez dessus avec le bouton droit de la souris et choisissez Inspecter dans cette liste. C'est donc inspecter. La plupart des navigateurs connus ont cette option. J'utilise Firefox, d'ailleurs, dans ce panneau en bas, vous recherchez la seule chose, cette partie ici, le logo que PNG. Si vous déplacez votre curseur au-dessus, vous verrez qu'il s'agit d'un logo au format transparent, PNG et c'est magnifique, c'est exactement ce que nous voulons. Cliquez dessus. Et maintenant, vous pouvez certainement dire qu'une fois cela fait, faites-le glisser et déposez-le de votre bureau vers notre conception. génial, c'est que vous n' avez pas à le redimensionner. C'est déjà exactement ce que nous voulons. Pour ce qui est de la placer, cela devrait être une évidence. Alignez-le avec le guide de gauche. partant du haut. Laissez environ 30 pixels donnez aussi sa date. Ne vous inquiétez pas de cette valeur spécifique car nous allons jouer avec elle plus tard. Faisons une pause car il y a un point très important. Revenez toujours au niveau de zoom de 100 %. C'est comme se brosser les dents ou boire de l'eau. Ce n'est pas discutable, ce n'est pas facultatif. Il n'est pas basé sur votre humeur. Je vais tout le temps effectuer un zoom avant et arrière avec ma souris. Vous devrez faire la même chose pour vérifier les différents détails. Mais nous devons toujours, et je le répète, nous devons toujours revenir à 100%. Maintenant, pourquoi est-ce que j'en fais une si grosse affaire ? Parce que notre travail va être vu à 100 %. Nous devons toujours juger notre travail à travers les yeux de l'utilisateur. Nous allons remarquer toutes sortes de détails minutieux. Mais si nous effectuons un zoom arrière à 100 %, ces détails sont l' intestin et se perdent. Il s'agit donc d'une erreur très courante chez les débutants car ils ont pu effectuer un zoom avant. Ils voient tous ces détails et ils supposent simplement que les utilisateurs les verront également. Et évidemment, ce n'est pas le cas. Et voici le revers. Vous effectuez un zoom arrière à 50 % ou quelque chose comme ça. Vous ajoutez le champ de texte qui indique bienvenue ou autre. Il est maintenant temps de régler sa taille correctement ? Il est clairement trop petit. Mais parce que nous avons un zoom arrière, nous pouvons choisir une valeur comme 70. Cela semble maintenant correct dans ce contexte spécifique, à ce niveau de zoom spécifique. Mais quand on revient à 100 %, et on voit clairement que c'est beaucoup trop gros. C'est aussi grand que le logo et ce n'est qu'un mot. C'est ainsi que les débutants se sont souvent trompés, que la vue est déformée cause du mauvais niveau de zoom. Merci de supprimer les textes et de vous familiariser avec cette option. Déstabilisés, dites que le raccourci n'a absolument aucun sens pour moi. Décalez le 0. Vous devrez donc lâcher votre souris pour utiliser réellement Shift Z. C'est ce que c'est dans d'autres programmes de conception qui est contrôlé, mais il y a quelque chose de complètement différent ici. Pour l'instant. vous habituer à ce menu déroulant ici et que vous revenez toujours à 100 %. Faisons une pause rapide. 3. Créer Create Create: Bienvenue de retour. Nous avons maintenant les fondations. Passons maintenant à l'en-tête. Pour faciliter les choses, veuillez sélectionner le cadre et moins de changements de couleur d'arrière-plan. Je suis à la recherche du gris très, très clair et j'ai un code couleur exact en tête. C'est F2, F2, F2. Au fur et à mesure que vous grandissez et expérimentez, vous commencerez bientôt à vous souvenir de certains codes couleur essentiels. Croyez-moi là-dessus. Maintenant, appuyez sur la touche d'échappement et j'espère que vous comprendrez pourquoi le système de grille pose un problème. Alors, s'il vous plaît bonjour en cliquant sur cette icône ici parce que nous devons nous concentrer sur ce qui se passe, sur le Canvas réel. Maintenant, pour l'en-tête, nous avons besoin du fond blanc pur, figma. Nous ne comptons pas beaucoup sur les rectangles parce que l'outil Frame touche F et en fait glisser un. Je ne me soucie pas vraiment de sa taille. Tout ce que je veux, c'est m'assurer que le logo est inclus dans cette boîte. Si vous l'avez bien fait, vous devriez voir le logo à l'intérieur du cadre 1, qui se trouve à l'intérieur de ce dernier. Ok, maintenant, nous allons activer un remplissage blanc pur. C'est pourquoi j'ai choisi cette nuance de gris car elle fonctionne très bien avec ces rectangles blancs. Maintenant, à propos de la taille de cette pluie, peu importe ce qu'elle est, passons à 1920. Et c'est parce que c'est la taille de notre projet. Maintenant, pour le centrer, il suffit de déplacer votre souris vers le haut et de cliquer sur cette icône. Bon, maintenant pour la hauteur, nous n'avons pas besoin de beaucoup, donc environ 100 pixels devraient être corrects. Plus ou moins 10, 20 pixels donnent ou prennent toujours sur la table car rien n'est vraiment gravé dans la pierre. Vous devez vraiment vous ajuster au fur et à mesure que vous avancez bien, OK, maintenant alignez-le en haut en cliquant ici. Maintenant, le logo a besoin d'un peu de travail car il se trouve à l'intérieur de ce rectangle. Nous pouvons cliquer sur cette icône ici pour l' aligner verticalement dans le cadre. Et bien sûr, il faut toucher le Guide de gauche. Maintenant. Très bien, c' est beau et simple. La prochaine étape consiste à déposer à plat icon.com, qui est encore une fois mon site Web de prédilection pour les icônes. Encore une fois, vous avez besoin d'un abonnement et il n' y avait aucune ressource gratuite comparable. Ok, nous avons besoin des médias sociaux pour le bon côté. Gardez à l'esprit que l'icône plate n'est pas gratuite, mais qu'elle est de loin la meilleure des meilleures. Je suis désolé de le dire. Aucun site Web similaire totalement gratuit. D'accord. Nous recherchons les packs d'icônes. Nous pourrions rechercher Facebook , Twitter, Instagram et ainsi de suite. Mais je préfèrerais trouver la meute. C'est parce qu'il est extrêmement important d'être cohérent. Tapez donc dans les médias sociaux et jetez un coup d'œil. Je vous recommande fortement d'utiliser des icônes de la même couleur. Cela semble beaucoup plus propre, beaucoup mieux, mais bien sûr, c'est une chose subjective. Maintenant, j'ai préféré revenir sur ce réseau social, des icônes arrondies. Je pense que c'est 10 fois mieux dans mon esprit. J'adore cette symétrie. Si vous n'aimez pas cela, celui-ci est également une seconde forte. Nous voulons les télécharger sous forme de SVG. Je vais rapidement les ajouter à ma collection en cliquant ici. C'est assez intuitif, donc je ne vais pas passer trop de temps là-dessus. Maintenant, lorsque vous êtes prêt, téléchargez la collection et choisissez SVG. Le PNG n'est pas un excellent choix car il n'est tout simplement pas comme écusson. La qualité n'est pas aussi bonne que celle des SVG qui les exportent, archivent et les glisser-déposer dans Figma. Maintenant, je vais assez vite, mais j'espère que vous travaillez sur votre deuxième visionnement. Bon, nous les avons tous sélectionnés. S'il vous plaît, allez chercher l'outil d'échelle et redimensionnez-le dans ce sens. C'est assez petit. Ensuite, zoomez sur 100 % pour que nous puissions les vérifier. Idéalement, j' aimerais les avoir sous 40 pixels pendant que vous les réduisez. Gardez un œil sur le champ de largeur. Eh bien, la largeur et la hauteur sont les mêmes car ce sont des cercles parfaits. Mais vous comprenez l'idée. Gardez un œil sur cette partie lorsque vous êtes satisfait de la taille, passez au bon mouvement, repositionnez maintenant votre souris entre deux icônes et vous verrez quelques lignes roses. Je vais apparaître, cliquer et faire glisser vers extérieur pour augmenter la distance entre eux. Je veux voir dix pixels ici, juste au cas où vous n'aimez pas cet ordre particulier, passez au-dessus d'un de ces cercles, cliquez, maintenez l'icône et faites glisser l'icône vers un autre endroit. C'est disponible parce qu'ils sont tous sélectionnés et que le même type de calque, en passant, je suis en train de passer, euh, et il n'y a rien d'autre qui se passe. n'y a pas de technique avancée ici et il n'y a que des éléments de base dans Figma. Bon, maintenant, une dernière chose. Mettons-les dans la bonne position. Cliquez sur glisser et ne lâchez pas. Recherchez ces deux lignes. Cela signifie que l'ensemble est centré verticalement dans le cadre blanc, mais il est également aligné à droite avec ce guide. Et c'est absolument parfait. Mais une chose, ne les laissez pas noirs. Cliquez sur les couleurs de sélection et le sélecteur de couleurs doit apparaître. Choisissez l' outil Pipette, cette icône ici. Bon, maintenant, goûtez l' orange du logo, et c'est tout. Nous sommes finis. Félicitations pour votre premier en-tête. travail génial. Maintenant, prenons une courte pause, puis nous continuerons. Merci. 4. Créez le menu principal: Bienvenue de retour. Avant de passer au menu principal, il est préférable de choisir le cadre de nom à tête. Il y avait quelque chose de similaire. Il est préférable de rester organisé. Encore une fois, veuillez le renommer. Bon, maintenant, faites glisser un nouveau cadre et c'est la même histoire qu'avant. Pas de taille particulière, juste une taille aléatoire. Avant de procéder à l'ajustement, veuillez activer un remplissage, ouvrir le sélecteur de couleurs et nous devrions avoir l'orange disponible en dessous. Okay, tu y vas. Couleurs du document car la largeur 1920 est le choix évident. De nos jours, c'est l'un des styles de menu principal les plus populaires. Pas d'effets, pas de dégradés de fantaisie, juste agréable et simple. Centrez-le horizontalement et parlons de la taille. Cela contiendra les éléments de notre menu principal, mais c'est à peu près cela et rien d'autre. Je pense donc que 60 pixels devraient suffire, zoomer jusqu'à 100% et voir si cela a du sens. Et je pense que c'est très bien, même si nous ne pouvons pas changer d'avis plus tard après avoir ajouté les objets. Bon, prenons l'outil de type et commençons par la maison. Peut obtenir 14 pixels. Et discutons de la police de caractères que nous allons utiliser. La réponse courte est cette Poppins. J'aime ça parce qu'il a un caractère trop mouillé, mais ce n'est pas si chic. C'est comme une jolie chemise ajustée, un bon moyen entre une chemise hawaïenne et une chemise formelle destinée à être portée avec un nœud papillon. donc un médium heureux, c'est Poppins pour moi. Maintenant, je voulais me démarquer afin activer la fonctionnalité All Caps. Cela est tout à fait conforme à la version existante du site Web. N'oubliez pas que si vous souhaitez désactiver ce style de toutes les majuscules, cliquez sur le moins. Je suis content de cela tel qu'il se présente, mais il est un peu trop léger pour ma base. Changeons donc le style en semi gras. Très beau jusqu'à présent, veuillez le déplacer dans le cadre orange et le placer pour qu'il touche le guide de gauche, mais ce n'est pas obligatoire. Je vous recommande d'utiliser Shift a pour faire de cela une pluie de mise en page automatique au cas où vous n'aimez pas les raccourcis, j'appuierai sur Control Z, afin que je puisse écrire la jambe cette liste, choisir ajouter la mise en page automatique. Encore une fois, de bonnes choses. Remarquez que nous avons un peu d'espace supplémentaire tout autour . C'est du rembourrage et vous pouvez l'ajuster à partir d'ici, le régler sur 0, ce qui va le mettre hors de sa place, mais pas de soucis, l'attraper et le déplacer vers l'arrière appartient. Maintenant, la prochaine étape est importante. Assurez-vous que vous avez sélectionné la maison et non le cadre lui-même. Ok, utilisez Control D pour créer une copie et dupliquer. Et comme il s' agit d'une mise en page automatique, Figma sait où le positionner à droite de cet objet. Comment le sait-il ? Sélectionnez le cadre et je vais vous montrer que c'est cette flèche ici. Cette flèche indique que cela va être horizontal. Si vous choisissez l'autre, ce sera notre liste verticale. Évidemment, nous ne voulons pas cela, alors modifiez-le. Et modifions cette option Double-cliquez pour le sélectionner. fait, vous devrez peut-être le faire deux fois. Ok, ça devrait dire apprendre Photoshop. C'est mon blog, c'est l' une des pages. Il s'est échappé pour valider la modification et utiliser nouveau le contrôle D. Si vous n'êtes pas d'accord avec le raccourci clavier, il suffit de faire glisser ou de faire glisser l'option. Si vous êtes sur un Mac, vous devez voir des cadeaux gratuits. OK. Maintenant, le prochain point concerne Chris Barren et le dernier, le contact. Chaque site Web a besoin de cette page. Veuillez maintenant adopter une approche détendue concernant la mise en page automatique et toutes ces touches de raccourci. Si vous souhaitez simplement ajouter des calques de texte standard, puis les étaler manuellement. C'est tout à fait très bien aussi. Tout ce que je vous ai demandé, c'est de m'assurer que vous disposez du même espace vide entre eux. En parlant de cela, veuillez sélectionner le cadre. L'écart par défaut est de 10 pixels, mais c'est un peu bas, surtout compte tenu de la place avec laquelle nous devons jouer. Cliquez ici et je vous suggère maintenir la touche Maj enfoncée et d' appuyer sur la flèche vers le haut. Je n'ai pas de valeur spécifique à l'esprit. Parfois, je me contente de geler le dialecte. Dans ce cas, j'aimerais que ce dernier élément de menu soit un peu au-dessus de la moitié du cadre, vous pouvez demander pourquoi ne pas centrer ce menu principal ? Et c'est une réponse simple car les utilisateurs se trouveraient sur le côté gauche. Il y a beaucoup d'autres choses à dire, mais c'est l'essentiel, aura une discussion plus approfondie plus tard dans le cours. L'élément d'accueil est jaune dans la conception existante, vous pouvez allumer votre navigateur, cliquer avec le bouton droit de la souris et l'inspecter. Et le code couleur est FF FE 00 000. En guise de conseil, si vous désélectionnez cette option, vous devrez double-cliquer plusieurs fois pour accéder à ce calque de texte. Cliquez une fois et Rimland aura sélectionné le double-clic et vous aurez encadré pour sélectionner à nouveau un double-clic, cette fois au-dessus de la maison, et vous l'aurez enfin. C'est un peu fastidieux. Voici donc une désélection de rayons plus rapide. OK. Maintenant, avec tout ce que ces élus contrôlent glyc à la maison. Et c'est tout. Le Likoud contrôlé et c'est fini. OK, ouvrez le sélecteur de couleurs et utilisez ce code, FS et FF, FE 00, 00, 00, 00, 00. Excellent travail. N'oubliez pas que si vous contrôlez un calque de bulles situé à l'intérieur de plusieurs images, vous allez immédiatement sélectionner des éléments géniaux. Renommons celui-ci en Menu principal, et c'est fini pour l'instant. Merci beaucoup. 5. Configurer la boîte de recherche: Bienvenue de retour. Gérons la zone de recherche en copiant ce morceau de texte à partir de la conception existante. Gootez l'outil Type et collez-le dedans. Concevoir des cadeaux faits avec amour, gratuits pour un usage commercial. Génial. Centrez le texte à la fois en termes de positionnement mais également de cet endroit. C'est déjà dans toutes les majuscules. Ajustons donc la taille. Allons avec Poppins, robuste, mais je veux quelque chose d'un peu plus doux. audace signifie essentiellement que vous faites une déclaration forte, mais nous ne voulons pas vraiment beaucoup d'attention à ce titre. Un style plus léger peut donc mieux fonctionner. Et dans la lumière, ça semble bien. Veuillez laisser environ 40 pixels dans le menu principal. Ce n'est pas une résonance, au fait, pas pour les Pexels. Mais nous voulons atteindre cet endroit idéal entre avoir un design compact et laisser suffisamment de place pour respirer. Maintenant, pour vous assurer que vous êtes sur la bonne voie, maintenez la touche Alt enfoncée et survolez le menu principal. Ensuite, utilisez vos touches fléchées avec quoi ? Sans changement de travail. Bon, maintenant pour la zone de recherche, commençons par le type de texte à la recherche du billet gratuit. Et ça va être un indice qui se trouve à l'intérieur de la boîte. Même si la plupart des gens savent utiliser un champ de recherche, cet indice le rend un peu meilleur pour le style. Allons-y beaucoup de choses. Je dirais peut-être Poppins, 13 pixels réguliers, pas de traitement des bouchons. Ce mot devrait être simple et direct. N'oubliez pas d'ouvrir ce panneau pour désactiver ce paramètre, le réglage toutes les majuscules. Pour ce faire, cliquez sur ce symbole moins. D'accord, nous allons choisir une couleur après avoir ajouté l'arrière-plan de cette région. Appuyez sur Maj a pour activer la mise en page automatique. Nous aurions pu utiliser le cadre simple, mais c'est légèrement mieux. Activez une cloche en cliquant ici. Le blanc pur est tout à fait fin. Maintenant, d'accord, maintenant redimensionnons le tout à quelque chose d'environ 500 pixels, 500 ou quelque chose dans ce sens. Pourquoi maintenant 500 pixels ? Parce que le fardeau va être placé à l'intérieur et il n'y a rien d'autre important que ce domaine. chose maintenant, même si 300 pixels n'occuperait pas correctement l'espace, il aurait l'air bizarre, juste trop petit. Mais quelque chose sur les 750 serait très exagéré. Si vous souhaitez travailler avec précision, allez dans le champ W ici et saisissez 550, quelle que soit la valeur qui vous convient pour la hauteur. N'oubliez pas que le menu principal était de 60 pixels, 600. Cependant, utilisez la même valeur ici. Vous remarquerez peut-être que le champ H est grisé. Cela peut vous arriver. C'est à cause d' un seul réglage de contraintes et de redimensionnement. Mais continuons. Gardons les choses simples. Allez ici et faites glisser ça vers le bas. Maintenant, le champ d'âge, le champ de hauteur est déverrouillé car Figma comprend avec tryna faire quelque chose ici. Le texte n'est plus centré, mais ouvrez le paramètre de remplissage à partir de cet endroit. Le paramètre par défaut est en haut à gauche. Je cherche celui-là. OK ? Certaines personnes aiment le centrer comme ça. Mais parce que le bouton de recherche va être à l'intérieur, je pense que je vais le laisser comme ça. D'accord, les bords carrés sont un peu 2005. Allons-les donc à cinq pixels. Et parce que nous avons ici dans ce panneau, centrons-le à l'intérieur de ce grand cadre. Maintenant, la démarche, qui a l'air bien jusqu' à présent par rapport au titre, laisse 20 pixels entre eux. Certains calques de texte ont ce cadre de sélection un peu plus grand que le texte réel. La mesure peut donc ne pas être précise à 100 %, mais si vous restez cohérent et utilisez la même mesure dans le monde, c'est tout ce qui compte. Faites donc confiance aux mesures montrées par Figma et vous serez prêt à partir. Maintenant, il est temps de configurer le fardeau, donner l'outil de type et d'écrire la recherche. Vous remarquerez peut-être quelque chose d'un peu bizarre ici, mais pas de soucis, je vais l'expliquer. Rappelez-vous comment nous avons fait le menu principal, où les éléments de menu seraient placés les uns à côté des autres lorsque nous frappons le contrôle D, c'est la mise en page automatique en action. Maintenant, permettez-moi de supprimer cela. Dans ce cas, nous devons procéder comme suit. Sélectionnez le cadre et dans la fenêtre contextuelle de rembourrage, nous avons ce menu déroulant que vous avez peut-être manqué. En ce moment, il dit en arrière, remplacez-le en espace entre les deux. Donc, de retour à l'espace entre les deux. Et voilà. Et pendant que nous sommes ici, modifions le rembourrage sur le bord gauche pour indiquer 20 pixels. Ok, le lit suivant doit être simple, comme le texte de recherche et le titre, comme le texte de recherche et le titre ou cliquez avec le bouton droit de la souris et choisissez Ajouter une mise en page automatique. Terminé. Ensuite, ajoutez-y un remplissage. Et bien sûr, cela devrait être orange. Vous remarquerez que nous n'avons pas encore configuré de styles de texte ou de couleurs. Et c'est parce que jusqu'à présent, il n'y a pas besoin de cela. De plus, ce projet va être très petit, donc il n'est pas vraiment nécessaire. Maintenant, changez le texte en blanc et nous arrondissons les coordonnées avec une valeur de cinq pixels pour rendre ce bouton plus sain, changer la frappe, puis convient pour le haut et le bas 40 devrait vous donner un bouton de taille correcte. Maintenant, je sais que nous avons un écart différent pour le champ de recherche, mais c'est intentionnel. Je pense que c'est mieux de cette façon parce que nous avons la même distance tout autour de nous et c'est 10 pixels. Ok, maintenant en arrière, c'est tout le champ de recherche. Nous avons encore quelques détails à régler, mais permettez-moi de vous montrer pourquoi nous avons utilisé la mise en page automatique. Prenez n'importe quel bord et redimensionnez-le. Vous remarquerez que c'est toujours logique. Aucune méthode. D'où traînez-vous ? Moins de pause maintenant pour que vous puissiez rembobiner la vidéo et travailler avec moi. Je vous verrai dans une minute. 6. Créer un menu déroulant: Bienvenue de retour. Nous avons tous un champ de recherche et le contraste est quelque peu décent, mais je pense que nous avons besoin d'un peu plus de séparation entre eux. Pour nous aider, je vais ajouter un AVC. Maintenant, cela va être appliqué à cette image qui, d'ailleurs, devrait être renommée pour rechercher. Alors s'il vous plaît, gérez cela maintenant, renommez-le pour rechercher en termes de couleur, nous recherchons cet endroit idéal. Ni trop sombre, ni trop clair. Je pense que quelque chose dans ce sens devrait bien fonctionner. Le code couleur est C9. C9, C9. Génial. Faisons maintenant le menu déroulant pour le déplacer. Dupliquons cette zone de recherche, utilisons Control D et déplacez-la sur le côté, renommez-la pour la liste déroulante avant d'y plonger. Maintenant, d'accord, la première chose que nous devons configurer est de changer ce texte, renommer à ce jour. Mais vous pouvez utiliser tous les capuchons pour cela. Inutile de passer à la transformation du texte. Parfois, c'est tout simplement plus facile. Okay, ensuite, nous devrons ajouter l'icône déroulante. Je vais donc allumer mon site Web préféré pour ce labo icon.com pendant que je passe par ces étapes, laissez-moi souligner une chose clé. Nous n'avons rien ajouté à notre panneau d'actifs. En règle générale, ce bouton de recherche, nous n'avons pas non plus mis en place de couleurs ou de textiles. Nous pourrions potentiellement le faire. Mais si nous ne prévoyons pas de les utiliser sur de nombreuses pages, pourquoi s'embêter ? Si nous parlons de quelques pages ? Réglage du tutoriel, je suis plus qu'heureux de sauter certaines de ces choses qui nous déconcentrent vraiment, qui nous éloignent du travail de conception réel. OK, nous avons supprimé le bouton et le calque de texte a été déplacé. Ne vous inquiétez pas. Amenez-y et réduisez-le. Vous n'avez pas besoin d'utiliser l'outil de mise à l' échelle pour celui-ci. Si vous utilisez ce type d'icône, le prêt sera supporté. Il n'est donc pas nécessaire de s' inquiéter l'icône passe par 10 ou quoi que ce soit de ce genre. Je cherche 36 pixels, mais je ne fais qu'une préférence personnelle. Si vous avez placé une icône à l'intérieur du cadre, la date va revenir à sa place. Maintenant, pourquoi cela revient-il de cette façon ? Si vous sélectionnez le cadre déroulant, vous verrez que cette option est configurée dans l' espace de la fenêtre de remplissage entre, accord, j'aimerais que cet élément ait une largeur d'environ 120 pixels. C'est vrai ? Maintenant, je pense que j'ai oublié de changer la couleur de la main. Vous voyez, il s'agit d'une sélection ici. Date est la valeur par défaut. C'est actif. Ce texte est ici. autre côté, c'est un coup de main. Il s'agit d'un morceau de texte qui disparaîtra une fois que vous commencerez à taper. Alors, veuillez contrôler, cliquez dessus et ouvrez le sélecteur de couleurs. Bien que je sois tenté d'utiliser le gris du coup, je pense que c'est beaucoup trop léger pour cela. Au lieu de cela, passons à quelque chose autour de ce code couleur. A4. A4, A4. Ok, c'est mieux. La question est maintenant : avons-nous besoin ce mot supplémentaire entre ces deux champs ? Celui-là qui dit «  tri par ordre » et je dis non. Au lieu de cela, je pense que je préférerais une hauteur plus petite, mais ces deux éléments, sélectionnez-les. Les deux 50 pixels devraient être mieux adaptés. Et je vais faire quelque chose d'un peu controversé, mais je suis fermement derrière. Pour le cadre de recherche, définissez le rembourrage sur le côté droit sur 50 pixels. Et c'est parce que je veux cinq pixels sur les trois côtés. Cela devrait être beaucoup mieux. Et en effet, c'est le cas. Avant de faire une pause, centrez-les horizontalement. Pour ce faire, sélectionnez les deux images et regroupez-les ensemble. Oui, notre premier groupe dans ce cours. Ok, vous pouvez utiliser Control G ou cliquer avec le bouton droit de la souris après l'avoir sélectionné. Je préfère le Control G pour des raisons évidentes, c'est un peu plus rapide. Ensuite, utilisez cette icône ici, alignez les centres horizontaux. Nous pouvons maintenant dissocier ces éléments comme ça. Cliquez avec le bouton droit de la souris dans le panneau Calques et c'est tout. Fondamentalement, c'est fini. Et je suis très content de nos progrès. Et j'espère que vous passez un bon moment étape par étape. Nous allons créer ce site Web génial. Je vous verrai dans une minute. 7. Créez l'élément le plus important - La carte: Bon retour, talons. partie la plus importante de notre conception, la carte. C'est essentiel car il occupe environ 80 % de la page. Cela déterminera l' apparence de notre page d'accueil, il est donc préférable de faire du bon travail avec elle. Assurez-vous que vous travaillez sur votre deuxième visionnage. Ok, ouvrez, ça a l'air génial. Dotnet, cliquez sur n'importe quel cadeau. Et une fois que vous êtes, cette page enregistre la photo, copiez le titre et ajoutez-la à Figma. Vous pouvez le laisser tel qu'il est pour l'instant. Pour la description, copiez environ deux phrases, détachez-la et collez-la dans. Mais cette fois, sortez une boîte. Bon, nous avons ajouté le texte car nous allons utiliser la mise en page automatique, les récupérer et utiliser Maj a. remarquerez que vous aurez une mise en page automatique en vérifiant le panneau des calques. C'est le symbole de cela. C'est vrai ? Maintenant, veuillez ajouter le remplissage blanc. Cela ne ressemble pas à ce saut, mais pas de soucis, nous allons changer ces styles de calques et cela aura l'air mieux. La première chose que je veux réparer, c'est le rembourrage. Utilisez 24 tous les bords. Et c'est parce que cela a un impact majeur sur l' apparence du site Web et son ressenti. Tout est question de ces petits détails. Pour le titre, utilisons Poppins, semi-gras, 20 pixels, pas de transformation des majuscules. Le design existant a un style normal, mais je pense que je préfère le semi-audacieux. Quoi qu'il en soit, nous pouvons tout expérimenter en quelques leçons seulement. Ok, Poppins semi gras 20. Pour la description, Essayons Poppins standard 14 pixels, pas toutes les majuscules. Encore une fois, vous n'avez pas à le savoir par cœur et vous n'avez pas à traiter chaque choix comme si c'était une chose permanente. Il est très probable que nous allons changer cela. La clé ici est de s' assurer que cette description insignificativement plus petite que le titre du livre. C'est bizarre. La chose principale. D'accord. Au cas où le rembourrage bas ne ressemble pas à ceci, procédez comme suit avec la description sélectionnée, choisissez la deuxième option ici appelée Masquer automatiquement. Lorsque cette option est sélectionnée, la zone blanche s' agrandit et le rembourrage de 20 pixels devrait être correct. C'est pourquoi nous utilisons la mise en page automatique. Sans cela, nous aurions dû constamment ajuster le rectangle d'arrière-plan et mesurer constamment les choses. Ce n'est pas la fin du monde, mais c'est encore beaucoup mieux. En parlant de travailler plus intelligemment, nous voulons être des colonnes comme dans la version live. Comment sommes-nous censés faire cela ? Eh bien, il y a deux façons. Premièrement, nous faisons des calculs. 1200 pixels, zone active moins deux espaces. Disons que les pixels chacun, c'est 16 au total. Donc 1200 moins 60, c'est 1140 divisé par trois, soit 380. C'est donc la première méthode. Une carte doit avoir une largeur de 380 pixels. Nous sélectionnons le cadre, puis nous modifierions la valeur w à 380. Maintenant, voici la deuxième méthode. Si nous faisons simplement glisser cette poignée vers l'extérieur, les choses ne vont pas vraiment s'arranger. Je vais donc changer quelque chose. Je vais contrôler le clic sur la description et je me concentrerai ici. Cela dit où. Et c'est parce que j'ai dessiné cette boîte, je l'ai faite. Mais disons que je souhaite que le texte s'ajuste en fonction de la largeur du cadre. Eh bien, nous devons changer cela pour remplir le conteneur. Et laissez-moi vous expliquer. Il s'agit d'un calque de texte situé à l'intérieur du cadre. Le conteneur est donc le cadre. Si nous définissons le calque de texte pour remplir le conteneur, cela signifie qu'il suivra sa largeur. Voici à quoi ça ressemble. Sélectionnez le cadre et agrandissez le cadre. Dans ce cas, le texte réarrange lui-même est comme de la magie. Plus encore, nous avons encore ce rembourrage de 20 pixels. Si je fabrique le conteneur de nanofils, ce texte le voit et il s'ajuste, grandit en hauteur. C'est vraiment génial et j'adore ça. Et voici un autre avantage lorsqu'ils achètent, ont plus de textes avec cette description. Laissez-moi coller quelque chose dedans. Et voilà. Il a l'air charmant. Et si j'en retire une partie, même chose, la mise en page change. Ok, laissez-moi le redimensionner à 380 pixels et faisons un récapitulatif. Nous avons créé deux calques de texte pour le titre que je viens de collecter, puis je l'ai collé pour la description. J'ai fait la boîte, puis j'ai collé quelque chose à l'intérieur. Ensuite, pour les deux sont utilisés Auto Layout pour expédier. J'ai ensuite ajouté un fond de fond et j'ai mis en place un rembourrage de 20 pixels pour la largeur de la carte. J'aurais pu faire quelques calculs, mais j'ai choisi d'ajouter plus de souplesse au projet. Je l'ai fait en sélectionnant la description et je l' ai configurée pour remplir le conteneur. Les conteneurs signifient simplement cadre. Dans ce cas, vous pouvez le considérer comme à l'intérieur du cadre. Ok, avec ce paramètre, je peux maintenant redimensionner le cadre et la description s'ajuste. Mais sachez que nous n'avons apporté aucune modification au titre. Donc, si nous y ajoutons d'autres lignes, cela n'aura pas l'air correct. Encore une fois, sélectionnez-le et modifiez-le pour construire un conteneur. Vous pouvez maintenant voir clairement son avantage ici. Si je colle d'autres textes, nous allons être prêts à y aller. J'y retourne. Nous n'avons pas défini la distance entre ces deux couches. ce faire, sélectionnez le cadre et définissez cette valeur sur 10 pixels. Enfin, déplacez cela vers le bas et ajoutons un rectangle. Rendez-le aussi large que le cadre et ne vous inquiétez pas de la hauteur. Ok, ça va bien. Maintenant, là où la photo, utilisons Control Shift J. Celle que nous avons téléchargée au début de la leçon est tout correcte, qu'elle soit en place et maintenant vous pouvez redimensionner jusqu'à nécessaire. Vous voulez vous assurer que le coin est visible. Et quand vous êtes heureux, faites-le baisser un peu. J'espère que c'était intéressant, mais ne vous inquiétez pas si vous n'avez pas encore cette fonctionnalité de redimensionnement. Ce n'est pas la fin du monde. C'est une technique avancée pour vous rendre un peu plus rapide. Si vous ne parvenez pas à vous débrouiller, c'est très bien. S'il vous plaît, venez à cette cour et demandez de l'aide. Merci beaucoup. 8. Comment améliorer les cartes: Bienvenue de retour. Il y a toujours des choix à Figma. Nous avons déjà vu comment ajouter un peu de complexité en jouant avec la fonction de redimensionnement. Nous n'étions pas obligés de le faire, mais cela nous a donné beaucoup plus de flexibilité au cas où nous voulions réduire la carte ou peut-être ajouter la quatrième colonne, le travail ne nous prendra que quelques clics. Le travail sera effectué en quelques clics. Si nous n'ajoutions pas cette complexité, il y aurait beaucoup plus de travail manuel. C'est la même chose avec ce que nous sommes sur le point de faire. Nous pourrions dupliquer cette carte plusieurs fois. Mais que se passe-t-il si nous voulons modifier le rayon d'angle, par exemple, ou peut-être la taille du titre. Ce serait beaucoup plus de travail manuel. Voici donc ce que je propose. Sélectionnez ici le cadre et cette forme. Vérifiez le panneau Calques pour vous assurer que la bonne chose est sélectionnée. Maintenant, transformez-le en composant en cliquant ici, vous remarquerez que le symbole dans le panneau des calques a changé. Et cela signifie que nous sommes prêts à y aller. Veuillez le retirer du cadre, il suffit de le faire glisser à l'extérieur. Généralement, je créerais une page distincte pour tous mes composants, mais je veux que vous la voyiez ici. Ok, ensuite, faites glisser quelques exemplaires à faire glisser est la meilleure façon de faire. Ok, un autre, mais cette fois centrez-le dans le cadre en cliquant ici. Et enfin encore un autre. Je suis sûr que nous en voulons au moins deux autres. Augmentons donc la taille du cadre. Sélectionnez ce dernier et faites-le glisser beaucoup vers le bas. Rends-le vraiment grand. Ok, ensuite, utilisez alter, glisser-déplacer pour créer quelques copies supplémentaires. Grille irréfléchie de trois par trois. Cela devrait suffire. Pendant que je travaille en arrière-plan, permettez-moi de vous dire qu' il est essentiel que nous changions les photos et les titres. Si nous laissons une seule carte neuf fois, cela va en dire long sur nous, car les concepteurs vont dire que nous sommes paresseux dans n'importe quel projet, assurez-vous de diversifier votre contenu. L'objectif est simple. Vous voulez faire croire que le projet a déjà été codé. Comme c'est le site Web en direct. Le contenu répétitif ou faux brise simplement cette image, brise ce rêve, ce mirage, que quoi que vous vouliez l'appeler, n'est-ce pas ? Bon, revenons maintenant là où nous avons cette grille. Mais je n'en suis pas amoureux. Revenons donc au composant principal qui se trouve sur le côté du grand cadre. OK, veuillez maintenant sélectionner le cadre, la mise en page automatique qui contient nos calques de texte. Disons que nous voulons compléter ces coordonnées, n'est-ce pas ? Eh bien, n'utilisez pas ce champ ici car cela affecterait également les bords supérieurs. Nous ne voulons pas cela. Cliquez ici au lieu de cela. Maintenant, avec cette nouvelle ligne, nous pouvons contrôler chaque coin individuellement et nous voulons les bords inférieurs. Ce sont donc les deux derniers champs avec 15 pixels. Et remarquez comment le changement s'est propagé à tous les niveaux. C'est pourquoi nous avons ajouté un peu de complexité avec les composants. Je pense que ça en vaut la peine. Maintenant que diriez-vous d' ajouter l'AVC à spécialiste de l' AVC était C9, C9, C9, C9. Pas de portail. On y va beaucoup mieux. Juste pour le plaisir. Sélectionnez le titre et appuyez sur la flèche vers le bas. Cette modification est disponible pour nous en raison de cette fonctionnalité de mise en page automatique. Et comme il s'agit d'un composant, un est réparti sur toutes les autres instances. Encore une fois, une instance est un clone. Sur une autre note. Et si on faisait lire le titre ? Eh bien, jetons un coup d'œil. C'est à quoi ça ressemblerait. Mais vous savez quoi, je pense que je préfère une couleur gris foncé, pas du noir pur au fait, mais proche de cela, à , à, à. C'est l'un de mes codes couleur préférés et il a l'air un peu plus raffiné que le noir pur , de sorte que la coordonnée, vous ne le remarquerez peut-être pas. Mais croyez-moi, c'est une différence subtile mais perceptible parce que je l'aime tellement. Permettez-moi de l'ajouter à mes styles de couleurs juste pour que nous puissions nous entraîner à nouveau, ce n'est pas vraiment nécessaire, mais je pense que c'est une bonne pratique. Je vais appeler ça un texte sombre ou quelque chose comme ça. Et je suis heureux que nous ayons introduit notre premier style de couleurs dans notre projet. N'oubliez pas de travailler sur votre deuxième visionnage. Au fait, bien sûr, nous avons quelques couches qui nécessitent le même traitement. Le titre, la date et l'icône déroulante. Sélectionnez le titre en un seul clic. Ensuite, utilisez le clic Maj de contrôle pour saisir la date. Et contrôlez Shift comme une fois de plus pour sélectionner la flèche. Voici comment votre panneau de calques doit ressembler avec ces trois calques sélectionnés. Maintenant. Maintenant, veuillez choisir un texte sombre et nous sommes prêts à partir. Voici ce que je veux que vous fassiez avant de continuer à contrôler la tête Shift K et de remplacer toutes ces images. Bien sûr, vous devrez les télécharger à partir de ce look gris.net. Mais oui, remplacez les images, puis remplacez les titres et les descriptions. Permettez-moi de vous montrer une situation. Disons que le titre est vraiment long et que la carte augmente en hauteur. Maintenant, nous pourrions faire toutes sortes de trucs ici, mais ce serait vraiment compliqué. Et je ne veux pas faire ça. Au lieu de cela, je veux que vous fassiez cela. Supprimez une ligne de la description. Ce n'est pas une solution parfaite. Nos paramètres ne nous permettront pas une flexibilité maximale, mais c'est plus que suffisant pour ce point. Lorsque vous avez terminé, essayez différents styles pour le titre, la description du rembourrage et voyez ce que vous pouvez créer. C'est ici que vous pouvez jouer avec les choses. Prenez votre temps et amusez-vous bien avec. 9. Configurer la navigation secondaire: Bienvenue de retour. Configurons la navigation secondaire placée entre la zone de recherche et la grille. Nous ignorons cela auparavant parce que les cartes ont la plus grande priorité dans mon livre. Une dernière chose à leur sujet, cependant, à ce stade, nous pourrions faire beaucoup plus en termes de redimensionnement, de flexibilité, voire de style. Mais honnêtement, cela montrerait des capacités de sigmas et rien d'autre. Il est si facile de se laisser submerger par tous ces paramètres. Je vais donc laisser le très avancé, peut-être à la fin du cours au cas où vous obtiendrez cette situation où l'une des cartes est légèrement plus grande, allez au composant principal, sélectionnez le cadre qui contient les deux textes modifiez cette partie ici au lieu du contenu HCG, passez à fixe. Cela va casser certains des paramètres précédents. Mais encore une fois, tout va bien parce que c'est un projet si petit. Et encore une fois, le réparer le rendre 100% flexible nécessiterait beaucoup de complexité. Et je ne veux pas faire ça pour l'instant. OK, pour les catégories, obtenez le raccourci clavier D de l'outil de type et écrivez tout. Décalez ensuite a pour la mise en page automatique. Vous pouvez voir comment la boîte s'est développée, fait le rembourrage, déposons-le à 0. Et si nous entendons dans le panneau de droite, mettons en place une mise en page horizontale. La prochaine étape est très importante. Assurez-vous de sélectionner le calque de texte et non le cadre lui-même. Vérifiez le panneau Calques pour cela. Ok, maintenant, appuyez plusieurs fois sur Control D pour créer des tas de copies. Maintenant, les placer un par un, existeraient-ils dans les catégories de la version live ? Comme pour le faire, veuillez travailler sur votre deuxième visionnage et créer la réplique parfaite. D'abord et avant tout, après avoir géré la réplique, vous pouvez devenir créatif avec une nouvelle version, faire preuve de créativité et vous amuser avec elle. D'autres couleurs, autres mises en page, autres polices, vous le nommez. Mais pour l'instant, gardons les choses simples en créant la même chose, même en nommant les mêmes choses ensemble. Maintenant que nous avons un élément configuré, Lee a renommé les deux catégories de cadres. Ok, une fois que c'est fait, veuillez utiliser les outils d'alignement sur le côté droit pour le centrer. D'accord, des trucs géniaux. Modifions le style de ces calques de texte. Et voici un conseil. Une fois le cadre sélectionné, appuyez sur la touche Entrée qui sélectionne tous les éléments de ce cerveau. Bon, nous avons maintenant la zone de texte disponible dans le panneau de droite. Poppins regular 14, c'est tout à fait très bien. Ce que je veux faire, c'est ajouter une transformation de toutes les majuscules. Et c'est parce que je veux que ça se démarque un peu plus, moins. Il reflétera également la navigation principale. Maintenant, ok, appuyez sur la touche d'échappement et sélectionnez à nouveau le cadre. Cette fois-ci, nous voulons ajuster l'espacement entre ces éléments. Je cherche quelque chose de généreux, comme 40 pixels pleins de 0. Pour être sûr de bien le juger, veuillez le centrer en arrière. Et oui, je suis très content de ça. Nous avons maintenant quelques choses à faire. Nous voulons donc 30 pixels dans la zone de recherche. Utilisez la touche ALT et vos touches fléchées pour cela. Et 30 pixels des cartes. Maintenant, cette valeur, pourriez-vous en utiliser davantage ? Bien sûr, allez-y si vous en avez envie. Mais pour l'instant, faisons une réplique complète et ensuite vous allez expérimenter. N'oublions pas la couleur. Sélectionnez le cadre, appuyez sur Entrée pour sélectionner tous les calques de texte, puis attribuez ce textile foncé. Je l'ai presque oublié. Ok, c'est presque fini. En option. Montrons que nous sommes actuellement dans cette première catégorie de la version live, elle est affichée en orange. Faisons de même, mais nous allons aussi le rendre audacieux. Contrôle, cliquez dessus, puis modifiez le poids à partir d'ici. Mais on va, d'accord, génial, bon pour la couleur. Nous devons d'abord rompre le lien avec ce style, car encore une fois, c' est un style sombre. C'est ce que ce bouton sert à ce moment. Et maintenant, nous avons accès au sélecteur de couleurs, des trucs faciles. Maintenant, notre nuance d'orange devrait être disponible ici, sélectionnée et c'est fini. Si vous ne l'avez pas pour quelque raison que ce soit, utilisez simplement l'outil pipette. Je n'ai pas ajouté ce point arrondi parce que je ne pense pas que cela apporte beaucoup de choses à la table et je pense que c'est une distraction par rapport à tout ce qui se passe ici. Continuons donc. Mais après la courte pause, merci beaucoup. 10. Créer la pagination: Bienvenue de retour. Cette partie qui indique le nombre de pages est appelée pagination. Mettons-nous au travail et arrivons à Figma. Commencez par l' outil de saisie et écrivez-en un. Ensuite, activez la mise en page automatique avec Shift a et configurez un film. J'espère que vous commencez à apprendre ces étapes par cœur. Si ce n'est pas le cas, pas de soucis, nous allons les parcourir constamment. Pour le rembourrage, utilisez 24 de chaque côté et laissez-les en haut et en bas. OK, configurez un rayon de coordonnées de 10 pixels, mais nous pourrions peut-être modifier cette valeur plus tard. Bon, maintenant, nous allons activer le coup. noir pur pour l'instant se trouve sur le côté n. Les coups de pixel fonctionnent beaucoup mieux. Je ne suggère jamais qu'ils utilisent traits d' un pixel pour les couleurs visibles des cartes. La note que nous avons utilisée est très subtile. C'est pourquoi nous pouvons nous en sortir là, mais pas ici. Dans ce cas, avec ce bouton, ce n'est pas bon. Bon, d'accord, des trucs sympas. En effet, je ne suis pas content du rayon de coordonnées, alors je ne le fais pas pour moi. Alors ramenez-le à cinq pixels, s'il vous plaît. Et je pense que c'est beaucoup mieux. Nous devons en créer plusieurs exemplaires. Mais tout d'abord, transformez-le en un composant depuis le haut du programme. D'accord, des trucs géniaux. Faites-le glisser sur le côté de l'écran et renommez-le en pagination ou quelque chose du genre. Encore une fois, je préfère ne pas utiliser le maître des composants dans la conception réelle. Et je pense que c'est une bonne habitude à prendre. Idéalement, vous devriez les placer sur une page séparée, mais cela va aussi bien. Maintenant, faites glisser la première copie en la touche Alt ou Option enfoncée sur un Mac. Placez-le à 30 pixels de la carte, soit 300, 30. Ok, ensuite, faisons glisser quelques exemplaires supplémentaires. Nous recherchons les cinq au total. Maintenant, nous pourrions potentiellement ajouter une mise en page automatique ici, mais j'ai préféré la méthode classique pour cet élément. Ok, cinq instances de ce composant, cinq clones car nous les avons tous sélectionnés et du même type. Ajustons l'espacement entre eux à 10 pixels. classique. Bon, ça va bien, mais il faut quand même les coiffer. Commençons par le contour et le texte. Ceux-ci doivent être réglés en orange. Je clique sur le composant principal qui se trouve sur le côté. Et parmi les couleurs sélectionnées, ouvrez le sélecteur de couleurs et choisissez des objets orange et classiques. Bon, maintenant nous avons besoin que le premier soit noir parce qu' il est déjà pressé. Permettez-moi de vous montrer à quel point il est facile de le changer , de le sélectionner et de supprimer le trait vers le symbole moins. Ensuite, du même endroit, changez ces couleurs. C'est aussi facile que ça. Bon, maintenant, séparons ces fardeaux. Nous en voulons trois à gauche et deux à droite. Et c'est parce qu'entre eux, nous voulons le calque de texte qui affiche trois points. Vous pensez peut-être que les choses se compliquent, mais il est temps de briser les murs d'alignement. Mais tout d'abord, modifions les calques de texte par d' autres valeurs. Encore une fois, cela ne prendra qu'un instant. Pratiquez votre vitesse comme toujours. Vous verrez que cette instance à deux chiffres va se redimensionner, qui est tout à fait très bien pour moi. Ok, utilisez maintenant cette fonctionnalité appelée Tidy Up et qui va tout régler. Depuis que nous approchons de la fin de la conception de cette page d'accueil, tout ce que nous faisons est assez simple. Ce sont des calques de texte et des rectangles, rien de fantaisie. Nous nous assurons que nos distances sont discrètes et que nous utilisons la même poignée de couleurs. Croyez-le ou non, c' est le fondement, les décisions solides, une bonne base travail et la bonne connaissance du programme. C'est tout ce dont vous avez besoin. N'hésitez pas à sélectionner tous ces types et à les organiser en groupe. Et lorsque c'est fait, nous avons terminé cette section. Merci beaucoup et je vous verrai dans une minute. 11. Créer les bases de le Create le pied: Bienvenue de retour. Nous allons travailler plus loin que vous aurez peut-être besoin d'agrandir un peu plus le cadre du bureau, mais c'est facile à faire. Pas de soucis à ce sujet maintenant. Ok, maintenant, bon outil The Frame et en dessinez-en un. Il doit être large de 1920 pixels. Et en ce qui concerne la hauteur, je dirais environ 400 pixels. C'est une taille décente. Il faudra modifier certaines choses comme d'habitude. Pour la couleur, je préfère généralement les pieds de page clairs, mais dans ce cas, l' original est sombre. Laissez-moi utiliser quelque chose comme 33 pour être. C'est une autre nuance de gris foncé que j' utilise souvent et vous commencerez bientôt à vous en souvenir également. Sur le site Web existant, nous avons une barre orange qui traverse tout cela. Pour cela, nous utiliserons l'outil Rectangle. J'espère que vous avez déjà vu qu'en général, je dessine des formes aléatoires, puis j'utilise le panneau des propriétés pour le mélanger. Donc, dans ce cas, il s'agit de 1920 par six pixels. À penser que ça devrait aller bien. Six est un médium décent. Huit fonctionneraient aussi, mais je préférerais six un peu plus minces. Et comme nous sommes de ce côté, nous pouvons également le centrer puis l'aligner vers le haut. Cela fonctionne bien car le cadre que nous avons créé l'engloutit. Au fait, nous devrions le renommer en pied de page. Nous avons donc un peu plus commandé ici. Nous pourrions également regrouper tous ces composants ensemble. Mais encore une fois, continuons. Obtenez l'outil Type et commencez à coller tous ces titres. navigation, c'est la première au milieu, les téléchargements les plus importants. Ensuite, contactez-nous et abonnez-vous à notre newsletter, étalez-les dans le lit. Mais nous ne cherchons pas quelque chose en particulier à ce stade. Disposez-les tous. Maintenant. Bon, parlons maintenant de style. Sélectionnez tous ces calques de texte, et nous garderons les choses assez simples. Poppins, 14 pixels normaux dans toutes les majuscules. Il y a beaucoup de détails que vous pouvez ajouter pour améliorer l'apparence d'un design. À temps. Vous verrez ce qu'ils sont, mais je peux vous dire qu'ils ne sont pas ce à quoi vous pourriez vous attendre. Les débutants aimaient généralement lancer des photos, graphismes énormes et des choses de cette nature. Tellement par-dessus bord, beaucoup trop. ce que font les professionnels. Au lieu d'utiliser du blanc pour ces titres ou c'est du blanc pur. Nous pouvons utiliser l'un de ces gris clair. Par exemple, E5, E5, E5. Cela ne semble pas grand chose, mais croyez-moi, c'est comme ça que vous faites preuve d'attention aux détails. C'est ainsi que travaillent les professionnels. Autre chose, placons tous ces éléments 60 pixels du haut du cadre, c'est 60. D'accord ? Une chose à propos de cet espacement, vous pouvez également utiliser 40, 50, 60, 70, 80 pixels, comme vous le souhaitez. Mais qu'en est-il de l' écart entre eux ? En haut, nous avons trois colonnes et nous connaissons la largeur exacte parce que nous avons fait les calculs. C'était 380. Maintenant, répétons les calculs ici. 1200 pixels pour la zone active en haut, nous avons deux espaces, mais ici nous en avons trois. Les espaces peuvent être de n'importe quelle taille, mais utilisons 20 dans ce cas. C'est assez standard. Donc 3 fois 20 c'est 60, 1200 pixels moins 60 est 1140 divisés par quatre, car nous voulons quatre colonnes, c'est-à-dire 285. Ce que vous pouvez faire, c'est que vous pouvez dessiner un rectangle aussi large. 285. On y va. Maintenant, bien sûr, vous pouvez l'aligner à gauche avec le guide de gauche. Une fois cela fait, nous pouvons ajouter quelques copies supplémentaires et laisser 20 pixels entre eux. Maintenant, cette façon de travailler infaillible, mais il y a encore un moyen plus rapide avec moins de mathématiques. Rappelez-vous la grille que nous avons configurée au début. Nous allons sélectionner le cadre de bureau et je l'activerai. Je vais également modifier l'opacité à 10 % pour que vous puissiez voir ce qui se passe. Maintenant, remarquez quelque chose. Les rectangles gris sont aussi larges que trois colonnes. Donc, en fait, nous n' avons pas eu à faire de calculs. Nous savons que nous avons 12 colonnes au total et nous voulons quatre domaines. Par conséquent, chaque titre doit comporter trois colonnes. V fois 4, c'est 12. Le premier contient ces trois. Donc, le suivant me suit. Maintenant, aligner à gauche les titres avec la première colonne de chaque groupe n'est pas une évidence. C'est assez facile. Donc, dans l'ensemble, les décès peuvent diviser un pied soit en utilisant les mathématiques à 85, soit en utilisant cette grille. Maintenant, si vous voulez trois zones, trois colonnes, eh bien, cela signifie ce qui suit. Les téléchargements les plus importants se déplacent simplement vers la colonne de droite. C'est tout ce qu'il y a à faire. Le leader rectangle et maintenant nous pouvons continuer. Mais après cette pause rapide, merci beaucoup. Et encore une fois, j'espère que vous travaillez avec moi. 12. Ajouter le contenu du bas de: Bienvenue de retour. Commençons à ajouter du contenu à plus loin, continuer les choses. Je vais copier ces éléments de menu. Rien de si fantaisiste. Ce que je veux m'assurer, c'est que j'ai laissé l'aligner et que j'augmente la hauteur de la ligne à quelque chose de assez généreux. Peut-être 30 pixels, donc c'est 300 quelque chose dans ce sens. Assurez-vous que le texte est blanc et supprimez la transformation de toutes les majuscules. Le plus important est que cette navigation est le titre de ces éléments est le contenu de cette section. Il s'agit donc d'un élément unique. Pour nous assurer que nous transmettons cela à notre conception. Je voulais que les objets soient assez proches du titre, 15, 20 pixels au maximum. Eh bien, quelque part dans ce sens, peut-être 10, cela fonctionnerait aussi bien, mais idéalement 15 à 20. Maintenant, ce que je veux que vous évitiez, c'est un lourd, aussi dense, qui brise l'idée qu'il s'agit d'un seul élément. Bon, maintenant pour la prochaine colonne, je vais coller mon contenu et je vais laisser environ 30 pixels entre eux. Je ne veux pas aller au bord de la troisième colonne parce que ça va paraître bizarre et bondé aussi. Une chose que vous avez peut-être remarqué, c'est que la deuxième colonne est en fait plus longue que la première. Et ce n'est pas une grande chance. Idéalement, ces articles auront la même hauteur ou la gauche sera plus longue que l'autre. C'est juste plus agréable à regarder visuellement. Mais parce que c' est un vrai projet, je vais le garder tel quel, car c'est comme ça qu'il se passe dans la bibliothèque. Permettez-moi d'expliquer le raisonnement. La première colonne reflète actuellement la navigation principale. L'autre est la navigation secondaire. cette raison, on ne peut pas vraiment couper les autres et le placer sur la gauche. Cela n'aurait pas de sens. C'est donc ce qui est organisé de manière logique. Nous pouvons commencer à réorganiser les choses au détriment de la logique ou de l'expérience de l'utilisateur. Je vais le répéter encore. Nous ne fondons pas nos choix sur l'argument que, Oh, je l'aime mieux de cette façon. Lorsque nous savons que cela va à l'encontre logique ou de l'expérience de l'utilisateur. Bon, continuons ça. Les téléchargements les plus importants sont déjà triés, juste l'espace vide que vous devez supprimer. Assurez-vous de ne pas laisser d'espaces vides à la fin de la ligne. Cela montre un manque d' attention aux détails et c'est une erreur dans mon livre n'est pas une grosse erreur, mais c'est une erreur qui dit à moi et au client que vous n'êtes pas vraiment intéressé par l'exécution des choses. correctement. Naviguez. Pour la section Contactez-nous. Faites glisser une boîte indiquant pourquoi il y a trois colonnes et collez le texte à l'intérieur. Sélectionnez l'adresse e-mail dans la ligne et faites-la en gras. Plus que ça, s'il vous plaît, faites-le jaunir. Vous devriez avoir cette nuance sous le sélecteur de couleurs. Si ce n'est pas le cas, il suffit de l'échantillonner ou de le mettre manuellement. L'idée est qu'il s'agit d'un lien et qu'il doit se démarquer. On pourrait dire, d'accord, mais les liens de gauche sont aussi des liens, non ? Et en effet, vous avez raison. Mais en termes d'importance, nous voulons faire avancer cette étape. C'est un peu plus intéressant. Les liens à gauche, eh bien, ils sont principalement destinés au PDG, à des fins de référencement. Peu de gens les utilisent réellement, mais ce n'est qu'une partie de n'importe quel site Web. Il est donc classique de les intégrer dans le pied de page. Ok, faites la même chose pour le contact, semi gras, puis faites-le jaunir. Les choses se déroulent bien. Pendant que je copie les icônes des réseaux sociaux, permettez-moi de vous dire pourquoi vous devriez rester à l'écart des petits pieds de page. Je veux dire, ces photos incroyablement courtes, comme 100 pixels de haut ou quelque chose comme ça, qui n'ont qu'un avis de copyright et c'est ça qui donne la chose. La plupart des entreprises ont diverses exigences légales qu'elles doivent afficher, qu'elles doivent afficher dans le pied de page. Conditions d'utilisation, cookies, GDPR, politique de confidentialité, vous le nommez. C'est pourquoi il est préférable d'avoir des photos comme celle-ci, généreuses. Oh, au fait, vous devriez sélectionner ce calque de texte et le modifier en haut. C'est parce que je veux copier jeu de collage pour la brève description la newsletter au cas où vous n'êtes pas sûr que les choses soient correctement alignées, sélectionnez les deux calques et utilisez la commande Alignement. D'accord, des trucs géniaux. Un autre conseil. Lorsque vous souhaitez désactiver rapidement la grille, ne zoomez pas et ne sélectionnez pas le cadre du bureau. Au lieu de cela, utilisez le panneau Calques. Juste comme ça. Vous pouvez désormais activer ou désactiver la grille. Bon travail. Permettez-moi de vous montrer un autre bon travail. Nous avons besoin du terrain ici, n'est-ce pas ? Copions le champ de recherche en haut de notre design. Maintenant, cliquez sur le pied de page et collez-le avec Control V. Placez-le maintenant à environ 10 pixels du calque de texte. C'est pourquoi je voulais que vous le changiez en hauteur automatique pour que nous n'ayons aucun accès. C'est un peu trop large, mais nulle part. Tout d'abord, cliquez sur le bouton et faites-le sortir de ce cadre. Placez-le à gauche comme avec tout le reste, encore une fois en général, l'alignement à gauche de la chose ne se centre pas, d'accord ? Une fois que vous avez choisi un alignement B, il est centré même si j'ai quitté la ligne. Encore une fois, vous devriez indiquer pour laisser la ligne, ce champ nécessite un peu plus d'amour. C'est beaucoup trop grand pour cette région. Alors sélectionnez-le et baissez-le à 40. C'est donc pour le Z. Rendez-le aussi plus étroit. Si vous ne l'avez pas déjà fait, utilisez le bon guide pour cela. Ce devrait être l'un des points du Liban. Remplacez la largeur du texte, entrez votre adresse e-mail. Et j'y vais assez vite. Mais encore une fois, si vous regardez ceci lors de votre deuxième visionnement, vous devriez être en mesure de suivre, pause aussi souvent que nécessaire, d'accord ? Cela va être centré parce qu'il y avait autrefois un fardeau de côté. Cela signifie que nous devons sélectionner le cadre de recherche et modifier le paramètre dans le rembourrage, surgir de l'espace entre DO. D'accord, génial, bon truc. Suppression du trait gris. Vous n'en avez pas vraiment besoin, surtout dans ce contexte. Vous avez peut-être remarqué que c'est blanc alors que le bibliothécaire est sombre. La petite variation de mon côté. Je suis tout à fait d'accord avec ça. Vérifiez vos distances et lorsque vous êtes heureux, nous pouvons appeler ça un jour. Ne vous méprenez pas. Il reste encore beaucoup de travail à faire sur la page d'accueil, mais nous allons continuer après la courte pause. Merci beaucoup. 13. Comment gérer des imperfections visuelles: Bienvenue de retour. La suite est à peu près terminée. Mais vous avez peut-être remarqué qu'il n'a pas l'air si équilibré, bien qu'il soit techniquement correct et bien exécuté selon les calculs, cela ne semble tout simplement pas juste. cette raison, tout regroupera dans quatre dossiers différents. Un pour chaque colonne. Utilisez Shift to multi-sélections calques , puis utilisez Control G pour les regrouper. Ce sera donc le groupe numéro un. Pendant que je m'occupe du reste. Permettez-moi de parler un peu plus de cette situation. C'est l'un des rares cas où vous devez contourner les règles. Encore une fois, le système de réseau est un bon guide et il peut nous aider, mais ce n'est pas la fin du monde. Si quelque chose n'est pas parfaitement aligné pour les développeurs, ce n'est vraiment pas une grosse affaire, ce n'est pas un problème énorme. À cause de ça. Je n'ai aucune hésitation à le faire de la façon suivante. Une fois que vous avez tous ces quatre groupes, veuillez les sélectionner tous. Ensuite, allez en haut à droite et utilisez cette fonctionnalité appelée « tidy up ». Cela vous permettra de réajuster l'espace entre chaque dossier, entre chaque groupe. Et juste comme ça, c'est mieux. Bon, il nous reste quelques éléments. Sélectionnez trop bien la ligne nous puissions ajouter ce séparateur horizontal. Si vos guides sont actifs, cela devrait être facile. Consultez ici le champ largeur pour vous assurer que ce champ est correctement configuré. Ce que les débutants font souvent, c'est qu'ils le laissent blanc ou gris très clair. Et c'est une grosse erreur. C'est comme une ceinture, mais pour votre pied de page plutôt que pour vos groupes. Maintenant, voulez-vous que votre ceinture se démarque vraiment ? Non, pas vraiment. C'est pourquoi nous avons besoin d'une couleur très subtile. Vous voudrez peut-être essayer ces notes la zone des couleurs du document, mais je ne pense pas qu'aucune d' entre elles soit assez subtile. Au lieu de cela, je propose quelque chose comme ça. 434343. Par le passé, certains designers utilisaient du blanc avec une opacité inférieure, mais les développeurs n'aimaient pas vraiment ce genre de choses. Je préfère donc utiliser un code couleur spécifique. C'est plus sûr de cette façon. Désormais, pour ce qui est de sa position, 30 pixels de la navigation secondaire sont tout à fait corrects. Il ne reste plus qu' un peu de copier-coller, mais ne vous précipitez pas. C'est les dernières minutes du projet. Maintenant, dans cette partie, nous aurions pu utiliser la mise en page automatique avec ce paramètre appelé espace entre. Mais la façon classique de travailler est tout à fait parfaite. J'aime beaucoup utiliser la touche Alt pour vérifier mes mesures et mettre les choses en place avec mes touches fléchées. Je vous suggère de faire la même chose maintenant. Cela n'arrive peut-être pas naturellement, mais à mesure que vous concevez de plus en plus de projets, vous verrez que vous commencerez à le faire sans même y penser. OK. Pour connaître les conditions d'utilisation et la politique de confidentialité, j'aimerais appuyer plusieurs fois sur la touche de la barre d'espace pour configurer mon espace vide. Ensuite, j'aime copier cet espace vide et le coller de l'autre côté. De cette façon, il est parfaitement équilibré. La montée rapide a sélectionné cette image de données et a ajusté la taille si nécessaire. Oui, d'accord. Maintenant, pour vérifier le design, appuyez sur le bouton de lecture lorsque vous êtes prêt et ayez une belle apparence de haut en bas. Ce design est huit sur 10 dans mon livre. Ce n'est rien de crédible, non ? Ce n'est pas magnifique, mais il est bien exécuté et il a l'air beau et ça fait le travail. Ce qui signifie que les gens n'auront aucun problème à l'utiliser. Si vous pouvez gérer cela, un simple huit sur 10, vous pouvez facilement gagner des milliers de dollars par mois. Vous n'êtes pas obligé de faire preuve de créativité. Oh, voici un détail à ne pas manquer. Le bouton Nous contacter est juste au-dessus de l'autre. Copions le fardeau à partir de la zone de recherche. Tout d'abord, assurez-vous de sélectionner le cadre et non le calque de texte. C'est un gros truc. Encore une fois, sélectionnez le cadre, puis copiez-le. Nous savons que si nous faisons glisser ce bouton au-dessus du pied de la veine , il va l'avaler comme ça. Nous ne voulons pas cela. Nous avons besoin du fardeau pour flotter au-dessus de lui. La solution est assez simple. Commencez à le déplacer, puis maintenez la touche de barre d'espace enfoncée. Et c'est vraiment aussi facile que ça. Cela dira à Figma de le quitter. Où déposez-vous ça ? Encore une fois, vous commencez à déplacer le calque, puis vous maintenez de l'espace, trouvez le centre. Et c'est ça. Faites en sorte que ça paraisse mieux. Arrondissez les coordonnées en utilisant une valeur très élevée comme AD par exemple. Donc, c'est de E à z. Cela va complètement compléter, changer le texte par quelque chose de plus intéressant, comme envoyer un message puis le centrer une fois de plus. Vous voudrez peut-être renommer le cadre à fardeau l'appel à l'action, le CTA ou quelque chose du genre. Nous savons donc si c'est LK, trucs amusants à peu près réalisés avec notre projet. Je vous verrai dans une seconde après la pause de Greg. Merci. 14. Voici ce que vous avez besoin de vous rappeler: Ici, c'est Chris. Comment avez-vous fait ? J'espère que vous parviendrez à vous amuser car au bout du compte, c'est de ça qu'il s'agit. Quel que soit le résultat final, vous devez vous en tenir et faire de votre mieux même si vous n'êtes pas satisfait à 100% de votre propre version, veuillez les poster sur la plateforme. Ce que j'aimerais voir de votre part , c'est un jeu de couleurs différent, des polices différentes, peut-être une grille de cartes différente. Maintenant, sachez que vous devez d' abord créer la réplique parfaite seulement alors que le nouveau a réussi à le faire vous-même. Ce n'est qu'alors que vous devez passer à votre propre version. Maintenant, si vous aimez Figma et que vous pensez que c'est la bonne solution pour vous, continuez à apprendre. Il y a beaucoup d'autres choses à déballer, mais nous allons le faire étape par étape. Donc, avec ça, j' espère que je vous verrai bientôt dans un autre cours . C'est Chris Barren qui sort pour le moment. Ils donnent.