Maîtriser Figma : la magie de la mise en page automatique

1. Introduction: Ok, Donc 20 et sage, il y a trois points de contrôle majeurs que j'ai rencontré dans ma carrière en tant que concepteurs d'interface utilisateur jusqu'à présent. Le premier a été l'introduction de sketch, un entièrement dédié interfaces utilisateur appropriées. J' ai dit que la seconde venait de Figma, un autre outil de conception d'interface utilisateur. Et il y a une toute autre histoire sur la façon dont je suis passé de l'esquisse Figma et Y. mais numéro trois, le troisième point de contrôle était l'introduction de la mise en page automatique dans Figma. J' aime Auto Layout non seulement parce que c'est pratique, mais parce qu'il éloigne beaucoup de bagages supplémentaires de l'artisanat de base de la conception d'une interface utilisateur. Et ça fait tellement de place pour l'expérimentation. Lorsque vous utilisez la mise en page automatique, vous n'avez pas à vous soucier de l'alignement et du redimensionnement. Vous n'avez pas à vous soucier de faire de l'espace. Lorsque vous devez mettre quelque chose au milieu de votre conception, vous n'avez pas à vous soucier d'étirer et écraser les éléments chaque fois que vous devez adapter quelque chose, vous n'avez pas à vous soucier d'un espacement cohérent lorsque vous êtes dupliquer des choses comme dans une liste ou quelque chose, et beaucoup plus que vous découvrirez lorsque vous adoptez mise en page automatique dans votre flux de travail ou un paiement de mon flux de travail plus tard dans le cours. Ce cours est pour toute personne qui vient visiter faux my.com et a créé un nouveau compte gratuit ou n'est pas professionnel chevronné et a été sur la clôture au sujet mise en page automatique ou essayé une fois et fondé un peu déroutant, Tu sais, juste un peu dur de t'enrouler la tête autour d'elle. Une bonne interface utilisateur qui, qui abstrait la complexité derrière la simplicité et le panneau de mise en page automatique dans Figma est un excellent exemple de cela. C' est une fine bande d'environ 100 pixels de haut, et il stocke la magie absolue. Dans la première moitié du cours, vous allez me regarder expliquer le besoin mise en page automatique et vous montrer que c'est une utilisation très basique. Ensuite, nous allons passer à créer incrémentalement, mise en page incrémentalement complexe. Et dans le processus, vous apprendrez également sur les composants, les instances et un peu sur la variance. Ensuite, après vous avoir dit tout ce qu'il y a sur la mise en page automatique, nous allons sauter directement dans les habitudes, les projets du monde réel, et puis ensemble, nous allons construire composants d'interface utilisateur relativement complexes en utilisant la terre auto, il y a une chance que vous pourriez trouver les deux premières leçons du cours, qui est sur les boutons, un peu trop basique. Et ces leçons que je parle des groupes et des cadres et de la différence entre eux et comment l'utilisation de la mise en page automatique est une grande amélioration par rapport à eux. Si les groupes, les cadres, et un peu sur les bases mêmes de la mise en page automatique est quelque chose que vous êtes déjà familier avec. Vous pouvez juste jeter un coup d'œil sur les deux premières leçons avec tout cela hors du chemin, seules choses à discuter sont le projet et la configuration, que je vais faire rapidement dans la prochaine vidéo. Alors, à vous voir. 2. Mise à jour automatique de mise en page: Ok, il s'agit donc d'un composant de mise en page automatique que vous allez créer plus tard dans la classe. Et je vais le sélectionner. Et dès que je l'ai sélectionné, vous pouvez voir à droite qu'il n' y avait rien pour le moment, car dès que je l'ai sélectionné, vous pouvez voir apparaître certaines options de mise en page automatique. Maintenant, j'ai pris quelques captures d'écran de la classe, les vidéos que nous regarderons plus tard en bas la ligne avec l' ancienne interface utilisateur Antoni out. Et nous utiliserons cette capture d'écran, cette petite interface utilisateur de mise en page automatique qui apparaît pour comparer et contraster entre la mise à jour et l'interface utilisateur précédemment. Très bien, alors commençons. La chose la plus importante à remarquer ici, c'est que ce petit alignement est carré. Maintenant, vous apprendrez, comme je l'ai déjà dit, plus tard dans la classe, ce que cela signifie. Maintenant, ce qui se passe dans la nouvelle interface utilisateur, c'est que dès que vous cliquez sur quelque chose qui a été appliqué sur le terrain, vous voyez directement cet alignement au carré. Maintenant, plus tôt dans l'interface utilisateur qui existait auparavant, vous deviez cliquer dessus, puis ces options apparaîtraient. C'est donc la différence, numéro un. La deuxième chose à remarquer concerne le rembourrage. Maintenant, dans l'interface utilisateur précédente, il n'y avait qu' une petite boîte de saisie pour ajouter du rembourrage et vous saurez ce qu'est le rembourrage, comme, je l'ai dit plus tard dans la classe et maintenant dans la nouvelle version, au lieu de juste une petite boîte de saisie, ce que vous avez est un peu simplifié. Vous avez votre champ de saisie de rembourrage horizontal et votre champ de saisie de remplissage vertical. Vous pouvez également le diviser en rembourrages indépendants. Rembourrage pour la gauche, rembourrage pour la frappe supérieure pour la droite et le bouton, ce qui a rendu les choses un peu plus propres. L'autre chose importante à laquelle il faut prêter attention a bougé. Maintenant, si je le sélectionne, vous pouvez voir que dans cette zone juste ici, vous pouvez voir des contenus fixes et embrassés. Toutes ces options appelées contraintes de redimensionnement, qui seront retrouvées plus tard dans la classe. Il a été déplacé ici. Alors que dans l'interface utilisateur précédente, toutes ces options sont apparues ici sous une petite interface utilisateur de redimensionnement et maintenant elle est passée ici. Ok, donc c'est tout ce qui ressemble à toutes les mises à jour de l'interface utilisateur. Et maintenant, vous pouvez aller de l'avant avec la classe. Et pendant que je parle de cela, j'ai oublié une petite chose. Maintenant, plus tôt, vous avez l'espace entre et l' emballage sous cette option, comme je l'ai déjà dit, dans le nouveau, vous pouvez le trouver toujours sous une option contextuelle en cliquant ici. Et vous pouvez changer entre l'espace, entre un impact. Et maintenant, je sais que toutes ces nouvelles options sont, si vous n'avez jamais traité de mise en page automatique auparavant, toutes ces sons sont étrangères à vous, mais vous les comprendrez plus tard dans la classe. Et je viens de faire cette petite vidéo juste pour vous montrer les mises à jour parce qu'il n'y a pas eu changements majeurs dans la mise en page automatique, juste des modifications de l'interface utilisateur. J'espère que vous êtes prêt pour le cours. Et je suppose que je vous verrai dans la prochaine vidéo. 3. Projet et configuration: D' accord. Il est temps de vous montrer les fichiers que nous allons utiliser dans cette classe et également de vous montrer ce que vous allez soumettre à Skillshare À la fin de cette classe. Alors faisons-le. À l'intérieur des ressources que vous téléchargez, vous trouverez deux fichiers Figma, finis et démarreur. Je veux que vous chargiez ces deux fichiers dans votre Figma. Si vous avez l'application de bureau Figma installée ici comme je l'ai, et vous pouvez télécharger l'application de bureau Figma directement à partir d'ici. Vous pouvez effectuer une recherche dans l'application Google Figma Mac ou l'application Figma Windows. Vous savez, c'est tout de même que vous pouvez télécharger l'application pour macOS ou Windows à partir d'ici. Si vous utilisez l'application de bureau Figma, vous pouvez simplement cliquer directement, double-cliquer sur l'un de ces fichiers pour ouvrir dans l'application Figma, ou vous pouvez cliquer avec le bouton droit de la souris et aller à Ouvrir avec les entrées Figma et ouvrir ces deux fichiers. Mais si vous utilisez Figma dans le navigateur, vous pouvez vous connecter à votre compte et créer un compte Figma, si vous n'êtes pas au courant, est très facile. Tout ce que vous avez à faire est d'aller sur figma.com et de cliquer sur S'inscrire. Et le meilleur moyen est de s'inscrire avec Google. Et après seulement deux ou trois clics, vous finirez avec quelque chose comme ça et toute l'interface utilisateur de Figma. Donc, lorsque vous êtes à l'intérieur de l'interface du navigateur, si vous êtes dans l'interface du navigateur, vous pouvez simplement faire glisser ces deux fichiers dans le navigateur et il va importer les deux, vous savez, dans votre Figma. Donc, nous allons attendre qu'ils finissent l'importation, notez les deux fichiers ont terminé l'importation et à l'intérieur de votre Figma, vous verrez le fichier fini et le fichier de démarrage. Vous travaillerez dans le fichier de démarrage tout au long de ce cours. Et le fichier fini est juste pour votre référence ou au cas où, disons que nous faisons quelque chose ensemble dans une vidéo et plus tard dans une vidéo différente, mais nous aurons besoin de ce que nous avons créé plus tôt. Mais pour une raison quelconque, pour une raison quelconque, tu ne l'as pas créé avec moi. Ainsi, vous pouvez le ramasser dans le fichier fini, coller dans le démarreur à un endroit approprié et continuer avec la classe. Ok, Maintenant, regardons à l'intérieur du fichier de démarrage pour l'ouvrir et juste double-cliquer dessus. La première chose dont je veux parler dans ce fichier est cette page appelle les tuiles et les couleurs. Et pour une raison quelconque, si vous ne voyez pas cela et assurez-vous que vous développez les pages Afficher en cliquant juste ici pour que vous puissiez voir toutes les pages. Donc, la page dont je veux parler, la première chose dont je veux parler, parler comme des carreaux et des couleurs. Maintenant, afin que nous puissions nous concentrer exclusivement sur la mise en page automatique et les composants de l'interface utilisateur que nous fabriquons avec elle et ne pas nous soucier des couleurs et des tailles de police à utiliser. J' en ai déjà défini tous pour vous dans cette page, la page des styles et des couleurs. Et aussi vous pouvez regarder sur le panneau de droite dans Figma quand rien n'est sélectionné, tous les styles que j'ai définis pour vous. Et si trouver des styles et des couleurs globaux et Figma est assez simple, je crois que vous savez déjà comment le faire, mais pour ceux d'entre vous qui ne le font pas, voici un rapide aperçu de la façon de le faire. Disons maintenant comme ces couleurs, si je clique dessus et en quelque sorte de voir un code hexadécimal, je vois un nom personnalisé que j'ai donné à cette couleur, disons comme ces couleurs, je veux créer un nouveau tunnel de couleurs global qui peut être utilisé n'importe où dans ce fichier. Pour ce faire, je peux simplement appuyer sur R sur mon clavier ou cliquer sur l'outil rectangle et dessiner un rectangle de n'importe quelle taille. Et puis je donnerai à ce rectangle une couleur aléatoire, non ? Allons avec cette couleur, d'accord ? Maintenant, si je sélectionne ce rectangle, vous pouvez voir qu'il montre un code hexadécimal de cette couleur, qui est 362, 565. Maintenant, si je veux convertir cette couleur à un style global, tout ce que je peux faire est de cliquer sur cette icône juste ici qui dit tuile, puis cliquez sur cette icône plus qui dit Créer un style. Et une fois qu'ils cliqueront dessus, il me demandera de lui donner un nom et je vais juste l'appeler couleurs temp puisque je l'utilise pour vous montrer, pour vous montrer le processus. Et puis je vais cliquer sur Créer un style. Et une fois que j'ai fait cela, vous pouvez voir que la couleur Tim devient visible et le panneau de styles globaux sur la droite quand rien n'est sélectionné. Et si je veux utiliser ce style à nouveau, est cette couleur à nouveau, tout ce que je peux faire est de cliquer ici, puis choisir la couleur temp classée à partir d'ici et il peut être utilisé et réutilisé. Et si je plus tard ce site pour changer la valeur de la couleur temp en faisant, faisant cela, en cliquant dessus, puis en cliquant sur Paramètres, puis en ajustant à nouveau la couleur. Elle sera affectée dans tout le fichier, où que cette couleur soit utilisée. C' est maintenant le processus de création d'une tuile de cours globale. Et comme c'était temporaire et n'en a plus besoin, je vais le choisir parmi les styles, vous savez, assurez-vous que rien n'est sélectionné et qu'il est visible. Vous pouvez cliquer dessus, cliquez avec le bouton droit dessus, puis cliquez sur Supprimer le style pour vous en débarrasser. Et de même, et de même, comme nous avons créé le style de couleur. Si vous voulez créer un textile comme celui-ci que j'ai créé, tout ce que vous avez à faire est d'appuyer sur T sur votre clavier, ou vous pouvez sélectionner l'outil Texte et taper quelque chose de aléatoire. Ou tu sais, tu peux taper quelque chose de pas aléatoire, je m'en fous. Et puis vous pouvez aller de l'avant et lui donner un style de police aléatoire. Et en ce moment, vous pouvez voir que Tau est si la ligne, mais je ne veux pas ça. Je vais aller de l'avant et lui donner un style de police aléatoire, tout ce que je veux. Et puis pour le convertir en un style en textile, je clique à nouveau sur cette icône, cliquez sur plus, puis je peux lui donner n'importe quel nom que je veux. Je vais lui donner des textes temporaires, C' est le nom de la tuile et puis je peux aller de l'avant et créer un textile, puis il sera visible et cela peut être réutilisé n'importe où dans le fichier entier. D' accord, alors débarrassons-nous de ça. Et c'était votre rapide aperçu de la façon de créer une couleur, style et un textile. Maintenant, une fois que vous avez suivi et terminé la classe, vous aurez dès maintenant au début de votre fichier de démarrage sera vide. Chaque page, vous serez essentiellement vide. Donc, à la fin de cette classe, à l'intérieur de votre fichier de démarrage, vous aurez tous les composants de l'interface utilisateur qui est en prison à l'intérieur du fichier fini. Et en tant que projet final, ce que vous pouvez faire est ceci. Vous pouvez créer une nouvelle page en cliquant ici et en nommant le projet final de la page, accord, puis tout ce que vous avez fait, vous pouvez commencer à les collecter dans votre page de projet final. Et vous le faites simplement en copiant, en appuyant sur Commande ou Contrôle C et en le collant dans le projet final. Donc, cette liste déroulante est quelque chose qui fera dans le troisième chapitre après les boutons, vous savez, vous venez de le recueillir ici en appuyant sur Commande C et Commande V. Maintenant de même, je peux apporter les autres choses que j'ai faites. Et puis une fois que vous aurez tout rassemblé, votre dernière page de projet ressemblera à ceci. Pas exactement comme ça, parce que je l'ai déjà utilisé à mon goût et vous pouvez l'organiser de la façon que vous voulez, mais ça ressemblera à ça. Et le projet final n'est qu'une mission d'une capture d'écran, cette page. Ainsi, vous pouvez prendre une capture d'écran de celui-ci et le soumettre comme projet de classe pour cette classe. Et aussi dans les commentaires, assurez-vous de copier ce lien en cliquant sur Partager. Et puis vous pouvez aller de l'avant et choisir n'importe qui avec un lien peut afficher, puis copier le lien et le soumettre comme un commentaire à la soumission que vous faites à cette classe. Et oui, c'est tout pour cette vidéo. C' est tout ce que nous ferons. Et je vous ai montré la configuration et je vous ai également montré le projet que vous devez soumettre pour cette classe. Et je te verrai dans la toute première leçon de ce cours dans la prochaine vidéo. On se voit alors. 4. Une leçon en boutons - Partie 1: J' ai un truc pour les boutons bien conçus. Tu n'es pas facile de te débrouille ? Mais quand vous les obtenez correctement en ajustant les ombres, les contours et tout ce qui n'est pas. C' est juste beau. Les boutons sont également un pilier très fort de l'identité d'une marque. Regardez les boutons d'Amazon ou Facebook ou Twitter et comment ils sont instantanément reconnaissables. Même hors contexte, il peut regarder un bouton et être comme, Oui, c'est Amazon et Facebook. Le bouton le plus simple que nous pouvons faire est juste du texte brut. Donc, appuyez sur T sur votre clavier ou cliquez sur l'outil Texte pour afficher l'outil de texte et cliquez n'importe où sur le canevas et vous pouvez ensuite commencer à taper. Alors laissez juste à droite, MAIS SUR un bouton. Maintenant, rappelez-vous dans la vidéo précédente, j'ai décrit les différents textiles que j'ai déjà définis. Donc, nous ne allons pas passer du temps à choisir des polices et des couleurs, pas dans ce cours. J' ai déjà fait tout le travail pour vous si vous êtes intéressé à apprendre à choisir les couleurs et les polices. Pour être honnête, c'est juste de la pratique. Mais si tu veux encore que je l'enseigne parce que tu manques de ma voix , dis-le-moi. Très bien, donc avec cela en place, vous pouvez aller de l'avant et cliquer sur un textile, qui est les quatre petits carrés que vous voyez ici. Nous pouvons cliquer dessus et choisir parmi tous les styles que j'ai déjà définis pour vous. Alors passons pour l'instant avec le médium de l'étiquette. Bon, donc c'est le style de bouton. Choisissons une couleur pour le bouton. Encore une fois, vous pouvez choisir quelque chose d' ici ou utiliser les couleurs que j'ai déjà définies. Pour vous. J' ai eu un peu de temps là-bas, mais vous pouvez choisir les styles de couleur et choisissons le bleu ici. D' accord, donc c'est là. C' est le bouton le plus simple que nous puissions avoir. Faites glisser une copie de ce texte. Vous pouvez soit vous pouvez appuyer sur Option et faire glisser, voir ce qui se passe quand j'appuie sur l'option qu'il y a deux erreurs maintenant, ce qui signifie essentiellement que si vous le faites glisser, il va créer une copie, fera une copie de chaque étape du processus juste pour voir comment nous évoluons ou bouton. Maintenant, ce texte juste ici pour ressembler à un bouton, a besoin d'une base. Alors dessinons une base. Cliquez sur l'outil Rectangle à partir d'ici, ou appuyez sur R sur le clavier pour obtenir l'outil rectangle et laissez-moi faire glisser un rectangle comme ça. Maintenant visuellement ce rectangle est sur les textes du bouton. C' est pourquoi sa tête et sa perspicacité. Maintenant, ce que je peux faire est soit simplement le faire glisser comme ce côté de la chauve-souris ou utiliser la commande de raccourci clavier et les crochets pour changer son ordre. Alors mettons-le tout en bas. Voilà, tu y vas. Et la prochaine chose que nous allons faire est de le redimensionner un peu pour qu'il ressemble plus à un bouton. Alors oui, on y va. Ça ressemble un peu à un bouton, n'est-ce pas ? D' accord, on va quelque part. C' est un bon point de départ. Maintenant, nous devons modifier le bit de couleurs, le chignon est un peu laid. Si vous êtes d'accord. Je veux dire, objectivement, j'ai lié un texte bleu sur un fond gris qui est comme très laid. Alors commençons à essayer de le faire paraître un peu plus joli. Donc la première chose que je vais faire est de rendre le texte du bouton blanc. Et la façon dont je vais faire cela est actuellement réglé bleu 0 et je peux appuyer sur le menu déroulant, choisir le style de vin. Voilà, tu y vas. Et pour la base, je vais aller de l'avant et faire la base bleue. Et ça ? Ça a l'air un peu mieux, n'est-ce pas ? Et la prochaine chose, une chose importante que nous allons faire, c'est que nous allons lui donner un coin arrondi de six. D' accord ? D'accord. Et comme une touche finale de peinture, vous pouvez aller de l'avant et faire Merci. Cliquez sur les quatre carrés ici pour choisir un style et cliquez sur les ombres des boutons. C' est le, ce sont les ombres que j'ai définies pour vous déjà afin que vous puissiez simplement cliquer dessus et c'est à plat sur le bouton comme ça. Et puis je l'aurai. Cela ressemble plus à un bouton, quelque chose que vous pouvez probablement utiliser en production, mais pas silencieux. Il y a quelques préoccupations que nous devons aborder. Alors allons-y et faisons-le. Et avant d'aborder les préoccupations, Assurez-vous tout d' abord que les noms de couches ou descriptifs, d' accord, nous générons est honnête. Oubliez de faire ça et nous ne voulons pas être des designers comme ça pour E chaotic. Bon, donc je vais sélectionner ce texte ici et j'appellerai cette étiquette, donc il est plus facile de comprendre ça, ok, comme étiquette, et je vais sélectionner la base, la base rectangulaire, et je vais renommer si vous le devinez. Merci. Très bien, super. Revenons maintenant aux préoccupations dont je parlais. Bouton et interface utilisateur. Tout au long de l'interface utilisateur, un bouton est utilisé à plusieurs endroits, formulaires et cartes, et une sorte de formulaires d'inscription et d'étiquettes de prix, pages de prix et autres. Le fait est que ce n'est tout simplement pas utiliser un seul endroit, il est utilisé à plusieurs endroits. Et le moins qu'on puisse attendre d'un bouton est d'être une seule unité, ce qui est juste une chose et pas deux choses différentes, une étiquette et une base. On ne veut pas ça. Nous voulons que ce soit une seule unité. Et comment pouvons-nous en faire une seule unité ? Et tu l'as deviné ? Mon regroupement et comment les regrouper ensemble dans Figma est très simple. Nous faisons glisser les sélections comme les motored et appuyez sur l'un ou l' autre, soit j'étais sur le point de directement sous le raccourci clavier. Vous pouvez soit aller de l'avant et cliquer avec le bouton droit de la souris sur Sélection de groupe ou simplement appuyer sur Commande G. Et maintenant, c'est une seule unité. C' est cool ? Droit ? C' est une seule unité. Et quand vous regardez dans le panneau Calques, il y a ce groupe 1 et ces deux récitent en dessous. Donc, ce que nous pouvons faire maintenant, c'est renommer ce groupe et haïr. Nous avons créé notre deuxième bouton. Le premier était ce texte et cela comme une taxe et obéit à l'émigration. C' est cool, mais il y a encore un peu meilleur moyen de faire ce bouton Figma, qui ne nécessitera pas un rectangle de base séparé, et c'est en utilisant des cadres. Bon, alors allons de l'avant et dessinons votre copie du groupe de boutons qui le recréent. Donc, je vais juste y aller et appuyer sur Option. Je peux tenir Shift pour qu'il n'aille nulle part. Il reste juste dans la file et je vais faire glisser une copie. Maintenant, je vais sélectionner la nouvelle copie que nous venons traîner et laisser aller ici où il est dit Groupe. Maintenant, ce que je peux faire est de cliquer sur la liste déroulante et de choisir le cadre, juste comme ça. Le contenu est dans un cadre. Maintenant, regarde la différence. Regardez la différence entre les icônes dans le panneau Calques. Regardez à quoi ressemble un groupe et jambe comment le bouton, qui est à l'intérieur d'un cadre qui blogue. Et maintenant, ce n'est pas la seule différence. Je vais vous en dire plus à ce sujet, mais oui, le bouton, le contenu est dans un cadre maintenant. Et simplement regrouper les choses ensemble puis sélectionner, sélectionner l'image dans la liste déroulante n'est pas le seul moyen de sélectionner l'image. Qu' est-ce que vous obtenez plutôt faire à la place est lorsque vous avez deux choses ensemble, vous pouvez appuyer sur le raccourci clavier, Commande, Option G, les recadrer ensemble ou cliquez avec le bouton droit de la souris et cliquez sur la sélection de l'image. Maintenant, je sais à ce point tomber et encadrer le son du jour et qui se comportent très similaire les uns aux autres si vous n'êtes pas au courant des différences entre eux, mais juste tenir, suivre et vous saurez la différence. Maintenant, pour commencer, nous avons le contenu de ce bouton à l'intérieur d'un cadre plutôt que d'un groupe. Maintenant, pour les avantages d'utiliser un cadre au lieu d'un numero uno de groupe, nous n'avons pas besoin d'un rectangle de base. Ok, alors allons-y et supprimons ça. Qu' est-ce qui s'est passé ? Nous n'avons pas besoin de cela parce que nous pouvons appliquer toutes sortes de propriétés comme les coins arrondis, les couleurs et les ombres pour le cadre lui-même. Alors allons-y et faisons-le. Rappelez-vous donc les mêmes effets exacts dans les mêmes styles exacts qui sont appliqués à cette base de rectangle ici, nous allons aller de l'avant et faire de même pour le cadre. Donc, pour ce faire, le premier de tout, allons de l'avant et donnons-lui un remplissage de bleu. Cool. Allons de l'avant et encore, donnons les coins arrondis de six. Allons aux effets et ajoutons des ombres de boutons. C' est cool ? Nous n'avons même pas besoin d'une base séparée car nous avons pu ajouter des couleurs et des effets au cadre lui-même, ce que vous ne pouvez pas faire à un groupe. Ok, maintenant, juste comme une dernière mesure, je vais aller de l'avant et m'assurer que cette étiquette est centrée à l'intérieur du cadre. Donc, si je sélectionne l'étiquette et je clique sur ces alignés, vous voyez toutes ces icônes d'alignement que je peux cliquer sur aligner verticalement, centre ou étendue horizontale autour, désolé. Et puis je clique, puis je vais cliquer sur aligner verticalement au centre, juste comme ça. Et l'étiquette s'alignera correctement à l'intérieur du cadre. Maintenant, ces deux boutons sont identiques et celui de droite, celui qui est créé en utilisant le cadre est légèrement meilleur que celui qui est à gauche qui est créé en utilisant des groupes. Vous connaissez aussi la raison pour laquelle celui-ci est légèrement meilleur. Bon, maintenant allons de l'avant et essayons de les redimensionner et de voir ce qui se passe. Commençons par redimensionner le bouton de groupe. Tu vois quand je fais ça, ok. Il a démissionné le sien correctement, mais pas tellement. Et cela peut être très facilement réparé. Donc je vais aller de l'avant et sélectionner l'étiquette, d'accord, et ensuite je vais aller de l'avant et l'étirer jusqu'à ce coin et les facteurs de stress à ce coin. Et je vais changer le descender de l'alignement du texte, ok, et maintenant quand je le redimensionne, regardez-le, il se redimensionne correctement, comme un bouton devrait redimensionner. Super, bien. Maintenant, passons au bouton cadre et laissez-moi essayer de le redimensionner et vous dites que rien ne se passe du tout. D' accord ? Maintenant, cadres et Figma il est livré avec la possibilité de définir des contraintes de redimensionnement. Vous pouvez sélectionner n'importe quoi à l'intérieur d'un cadre et choisir comment ils se comportent lorsque le cadre est redimensionné. Si je sélectionne l'étiquette comme celle-ci, remarquez que le panneau de contraintes, ce panneau de contraintes sur, désolé, qui apparaît sur la droite. Et ce n'est pas le cas, quand je sélectionne quelque chose qui est à l'intérieur du groupe, disons qu'il n'est pas là. Mais lorsque je sélectionne quelque chose à l'intérieur du cadre, il y a un panneau de contrainte qui apparaît. Maintenant, ce panneau de contraintes va être vraiment important. Alors allons de l'avant et passons un peu de temps avec cette section de l'interface utilisateur des segments. Maintenant, par défaut, il est dit que lorsque le cadre est redimensionné, gardez l'étiquette à gauche et en haut. Ces deux lignes pointillées ici de la gauche et du haut. Cela signifie que lorsque le cadre est redimensionné figma, nous maintiendrons ces distances à partir de la gauche et du haut. Maintenant, le comportement que nous voulons est que lorsque le cadre est redimensionné, que les étiquettes doivent rester au centre, ok, Maintenant, il y a deux directions dans lesquelles vous pouvez redimensionner n'importe quoi horizontalement et verticalement. Et maintenant c'est ce que ces icônes signifient ici. Regardez-les, regardez-les ici. Maintenant, c'est ce qui signifie que lorsque le cadre est redimensionné horizontalement, Très devrait rester l'étiquette ? Et lorsque le cadre est redimensionné verticalement, très montré les étiquettes restent. Maintenant, dans notre cas, puisque c'est une étiquette à l'intérieur du bouton, elle devrait rester au centre du bouton. Donc je vais aller de l'avant et redimensionner ce cadre à cette largeur de bouton normale. Et je vais sélectionner à nouveau l'étiquette du bouton. Et pour l'étirement horizontal, pour le redimensionnement horizontal, je vais dire à Figma de garder l'étiquette du bouton au centre. Maintenant, regardez comment les lignes en pointillés ont changé. Ce sont ces petits, ils sont très, très, très faibles. Peut-être que vous n'êtes pas en mesure de voir cela, mais il y a ces deux lignes avec une petite croix qui indique que l'étiquette du bouton restera toujours au centre. Alors allons-y et vérifions si ça a fonctionné. Je vais cliquer sur le bouton qui est créé en utilisant le cadre, le redimensionner. Tout oui, il obéit aux contraintes de redimensionnement que nous définissons. Très bien, super. Maintenant, il n'y a personne dans leur bon esprit qui redimensionnerait verticalement un bouton. Mais juste pour cela, nous allons cliquer sur l'étiquette. Et même quand il est redimensionné verticalement en ce moment, il est haut, regardez son haut, ce qui signifie qu'il maintiendra cela comme un sens, mais ce n'est pas ce que nous voulons. Nous voulons qu'elle soit centrée aussi. Donc, je vais sélectionner le centre pour le redimensionnement horizontal et vertical et regarder ce qui se passe est qu'il reste au centre. N' est-ce pas beau ? Si vous êtes tout à fait nouveau à comprendre ce sont les choses que vous saviez probablement déjà. Mais de toute façon, rien de mal avec un petit rafraîchissement comme là. Changeons le bouton texte et scientifiques. Changeons l'étiquette. Bien sûr, pas de bouton, la vraie vie a juste un bouton écrit dessus. Il pourrait être quelque chose comme, disons que cliquez pour acheter ou télécharger ceci et jouez-le. Ils verront que le cadre du bouton n'a aucun respect pour le contenu qui est à l'intérieur de celui-ci. D' accord ? Et ce que nous pouvons faire, c'est, vous savez, chaque fois que nous changeons la longueur, notre récupération a changé d'étiquette et la longueur change. Nous pouvons aller de l'avant et encore vous maintenant juste pour peut-être tirer les boutons étirés un peu et ensuite nous pouvons le faire. Puis encore. Je suis désolé. Fais oh, eh bien, oui. Faites cette ligne au centre, puis démissionne à nouveau. Sont et si nous allons et le rendre trop petit, il disparaît. Vous savez, le fait est que nous ne pouvons pas anticiper le texte qui va être à l'intérieur du bouton, la longueur de l'étiquette qui est. Donc, chaque fois qu'il est mis à jour et nous avons fait pour tirer et appuyer sur les boutons pour les rendre en forme. Ils ne le font pas. Et écoute-moi attentivement. Les boutons ne se redimensionnent pas automatiquement. L' accent est mis sur ADL. C' est exactement là que la mise en page automatique intervient. Très bien, dans la prochaine vidéo, on va faire le dernier bouton. Maintenant, nous avons fait un bouton de texte normal, nous avons fait un bouton de groupe, nous avons fait un bouton de cadre. Et nous savons que comment chacun d'entre eux est meilleur que l'autre. Et maintenant, nous rencontrons le problème où nous ne pouvons pas, nous ne pouvons pas nous attendre à ce que le redimensionnement encadré basé sur le contenu. Nous ne pouvons pas nous attendre à ce qu'il se redimensionne automatiquement en fonction du contenu. Et maintenant, tu as déjà l'idée d'où je vais avec ça. Donc, je vais vous voir dans la prochaine vidéo où nous allons faire un bouton de redimensionnement automatique en utilisant sigmas fonction de mise en page automatique. D' accord, je te verrai alors. 5. Une leçon en boutons - Partie 2: Bienvenue à la deuxième partie de la conception des boutons. Tout est comme vous l'avez laissé, nous avons la même quantité de boutons sur l'écran et ajoutons leurs mêmes biens. C' est juste que le leader précédent a eu un peu de temps et que quelque chose plus de dix minutes n'est pas quelque chose que j'aime tellement. J' ai donc décidé de diviser cette leçon en deux parties. La première partie, nous avons créé un tas de boutons. Nous avons vu toutes les différentes manières qu'il y a. Nous avons vu les compromis et nous avons vu les avantages d'utiliser un cadre sur, sur, sur, sur un groupe. Ok, maintenant, Allons-y et commençons avec cette leçon. Je ne peux pas attendre maintenant comme nous l'avons fait jusqu'à présent, prenons une copie de ce bouton de cadre maintenant je vais aller de l'avant et renommer cette étiquette en bouton juste pour juste, juste pour garder tout nous obtient. Et parce que nous avons un bouton, un bouton, un membre de bouton écrit ici, et plus tard dans le cours, nous aurons quelque chose comme partout où vous pouvez mettre n'importe quel texte, quel que soit le Texan, comment l'étiquette que vous voulez. Mais pour l'instant, laissons-le sur le bouton. D' accord, donc je vais juste le cultiver et le traîner à côté pour qu'ils soient beaux et arrangés. Et la prochaine chose que je vais faire est d'aller de l'avant et d'appuyer sur Option et de faire glisser une copie comme nous le faisons. Maintenant. Quand je clique sur ce bouton ici, celui que je viens de traîner, remarquez cette petite section ici appelée sur terre. Tu vois ça ? Oui. Oui. Droit. C' est ça. Oh, je suis désolé. Je reçois un peu, je me fais un peu emmener. Cette petite chose, juste quelques pixels de haut, c'est de la magie pure. Ok, maintenant, tu es prêt ? Je vais faire glisser ceci juste ceci signé l'autoplay section Je suis. Êtes-vous prêt ? Je vais aller de l'avant et juste cliquer sur le Plus et boum, c'est tout. C' est ça. Ce cadre de bouton est maintenant dans la mise en page automatique. Comment je le sais ? C' est différent ? Nous allons regarder, regarder l'icône dans les calques. Très bien, c'est pour le type de cadre de groupe, et c'est pour la mise en page automatique. Et pas seulement ça, pas seulement ce regard sur ça et quand j'appuie sur T et que je rentre à l'intérieur. Et changeons le contenu de l'étiquette. Appelons le téléchargement maintenant. Et wow, qu'est-ce qui vient de se passer ? Attends, attends, attends. Attends et clique, oh mon Dieu. Vous dites que le bouton, le cadre du bouton, le bouton global, cela se redimensionne automatiquement en fonction du contenu qui se trouve à l'intérieur de l'étiquette. Et maintenant, n'est-ce pas cool ? Maintenant, toute l'excitation à part, je sais que si c'est la première fois que tu vois ça se passer, tu ne veux pas m'écouter, juste jouer avec et voir comment ça marche. Mais attendez, attendez une seconde. Ce que je voulais dire, c'est que tu n'as pas à franchir toutes les étapes que j'ai dû franchir. Vous finissez par créer un bouton et faire un groupe, faire un encadré dès maintenant et puis je vais faire ressortir une mise en page. Vous n'avez pas besoin de parcourir tous ces onglets pour créer un cadre de mise en page automatique. Je vais vous montrer dans la prochaine vidéo et nous parlerons des listes déroulantes. Je vais vous montrer comment aller directement à la mise en page automatique et je vais vous montrer les raccourcis qui, je veux dire, il n'y a pas beaucoup de raccourcis. C' est juste une corvée pour arriver à notre mise en page automatique, et je vous le montrerai dans la prochaine vidéo. Mais avant cela, comprenons toutes les différentes options qui sont présentées ici lorsque la mise en page automatique est ajoutée à un cadre. Maintenant, ces deux flèches ici représentent des directions. On n'aura pas besoin de ça dans cette vidéo. Donc, d'accord, on passera à la suivante. D' accord. Maintenant, nous parlons de choses dont nous n'allons pas parler ou dont nous n'avons pas besoin dans cette vidéo. Mais le suivant est l'espacement entre les éléments. Maintenant, c'est du rembourrage autour des objets. Nous allons en parler dans un peu. Et ce dernier est l'alignement et le rembourrage. Nous allons en parler dans cette vidéo. D' accord, commençons par le rembourrage. Maintenant. Qu' est-ce que le panoramique ? Imaginez expédier quelque chose, un colis ou vous savez quoi ? Plus accessible, imaginez recevoir un colis d' Amazon ou n'importe quel site de commerce électronique en ligne à utiliser. Ce n'est pas une vidéo sponsorisée. D' accord. Alors imaginez recevoir un colis, quelque chose de fragile, comme un verre ou un vase ou mon cœur, si vous n'aimez pas le cours, Il est juste pas directement que la chose qui est que vous recevez, il est tout simplement pas directement le mettre dans une boîte en carton, n'est-ce pas ? Il y a du rembourrage ajouté autour de l'article réel, enveloppements à bulles ou des oreillers d'air ou du journal, vous voyez ce que je veux dire ? Droit ? Donc, dans le remplissage de l'interface utilisateur est des espaces autour d'un élément. Cet élément peut être du texte ou n'importe quel élément d'interface utilisateur, comme nous le verrons plus loin dans l'exemple de bouton. J' y regarde de plus près. Maintenant ce bouton ici est essentiellement composé des textes, c' est-à-dire l'étiquette, le fond bleu et l'espace vide qui est présent autour de cette étiquette. Et combien d'espace est de chaque côté de cette étiquette est décidé par le rembourrage. Lorsque je clique sur l'étiquette et maintenez l'option sur mon clavier, je peux voir la quantité d'espace sur chacune des quatre sciences. Donc, en haut, à droite, en bas , à gauche, et l'ordre en haut, puis à droite, puis en bas à gauche est sans importance afin que vous puissiez les utiliser. Je suis dessus. Chambre troublée ou Lauder. Je vais vous dire dans une seconde pourquoi cet ordre compte. Maintenant, jouons avec les valeurs de remplissage et voyons comment cela affecte le bouton. Ok, alors. Si vous allez juste ici où il est dit lampe auto, vous pouvez aller dans où il est dit mixte. Et nous allons juste entrer 12 pour juste autour d'un nombre qui est inférieur à 12. Et cela, et maintenant ce qui se passe, c'est quand j'ai mis 12, le rembourrage, l'espace autour de l'étiquette, l'espace dans lequel nous sommes, l'étiquette de chaque côté, haut à droite, en bas à gauche est réglé sur 12. Bon, maintenant essayons quelque chose de différent. Au lieu d'écrire 12, je vais écrire une valeur séparée par des virgules. Laisse-moi écrire 12, 13, 14, 15. Et c'est là que l'ordre, en haut à droite, en bas à gauche entre en jeu. Maintenant trop fait, 12, 13, 14, 15. Je vais appuyer sur Entrée et maintenant regarder ça. Le sommet est 12, Ryan est 30, ennui, ce bas est 14. D' accord, voyons. Et à gauche, il est 15. Donc c'est tout ce qui est en haut à droite, en bas à gauche. Et vous pouvez écrire une valeur séparée par des virgules pour ajuster le remplissage ou l'espace qui se trouve de chaque côté. Ok, maintenant, ce n'est pas une valeur de rembourrage réaliste ont, Allons de l'avant et entrez quelques bonnes valeurs de bouton réalistes que vous connaissez, qui équilibre la dette, crée une sorte d'équilibre visuel et le bouton, donc ce que je vais faire est que je vais sélectionner à nouveau le bouton dans le cadre et aller ici où il reste et mélangé et mélangé signifie fondamentalement qu'il n'a pas la même valeur sur les quatre côtés. Alors allons de l'avant et mettre 15, quatre top 32 pour le classement 15 pour Boston virgule 0. N' oubliez pas d'ajouter les virgules. Et 32 pour rire. Je vais aller de l'avant et appuyer sur Entrée et regarder ça maintenant. Très bien, je peux aussi aller de l'avant et changer le texte qui se trouve à l'intérieur de ce bouton pour, disons télécharger. téléchargement semble être une étiquette de bouton raisonnable. Alors encore une fois, regardez les valeurs, 1532, 1532, top classé, en bas à gauche. Très bien, super. Et c'est tout. Tout ce que vous écrivez est le VIH est à l'intérieur du bouton comme étiquette, il respectera les valeurs de rembourrage et le bouton, le cadre, le redimensionnement en conséquence. N' est-ce pas génial ? Maintenant, je sais que l'écriture d'une liste séparée par des virgules de valeurs de remplissage n'est pas quelque chose que tout le monde aimerait faire. Je veux dire, j'aime avoir mes mains sur le clavier et je peux toucher le type. Mais si vous êtes plus une personne visuelle, vous pouvez cliquer ici sur ce petit, ce dernier carré. Vous pouvez cliquer ici, aller à l'intérieur et mettre à jour les valeurs de remplissage de chaque côté manuellement. Comme ça. C' est à ça que ça ressemble. Voilà, voilà le truc. C'est comme ça que tu es en fait Figma une fois que tu fais comme les gens normaux. Mais la chose que j'ai expliquée plus tôt, les valeurs séparées par des virgules seraient juste une chose de superutilisateur. Donc oui, ouais, tu fais ce que tu veux. Vous pouvez aller à l'intérieur et ajuster les valeurs de remplissage à partir d'ici. D' accord, ok, cool. Maintenant avec ça, nous avons fini avec la partie la plus charneuse de la leçon ici, je vais faire un peu de ménage maintenant et faire bouton de taille différente si vous voulez traîner autour pour ça. Hé, vous êtes les bienvenus. Maintenant, ce bouton que nous avons est un bouton de taille moyenne, ok ? Et rappelez-vous que nous avons sélectionné des étiquettes slash medium, ce qui signifie, ce qui signifie, la police de taille moyenne pour l'étiquette. Donc, dans l'ensemble, ce bouton est un bouton de taille moyenne, mais dans une interface utilisateur, vous n'avez pas de boutons d'une seule taille. manière générale, il y aura un grand, un moyen et un petit bouton. Alors allons-y et faisons-les. Et vous verrez aussi à quel point il est facile de le faire avec la mise en page automatique. Ok, maintenant nous allons faire glisser une copie de ceci en maintenant l'option juste comme ça. La prochaine chose que nous ferons est de sélectionner l'étiquette, accord, ce texte juste ici et de changer le style pour lancer l'étiquette. Maintenant, on fait un gros bouton ici. Ok, c'est moyen pour faire un gros bouton. Que diriez-vous d'écrire, écrire le médium pour celui-ci. Ok, et je vais juste aller de l'avant et le traîner ici, juste là. Donc encore une fois, revenant à ce bouton, je vais sélectionner ici et changer la taille de la police, qui signifie fondamentalement que la taille de la police pour le moyen est de 20, pour le plus grand 24 que j'ai déjà défini pour vous. Donc je vais aller de l'avant et sélectionner l'étiquette arc et vous voyez que le bouton vient de grandir en taille. Faisons ça encore une fois, d'accord, sans rien ajuster, je vais aller de l'avant et sélectionner Li, construire, lancer et nommer. Le bouton a grandi en taille un peu. Maintenant, en changeant simplement la taille de la police ou l'étiquette, il ne fait pas un bouton grand. Vous devez également ajuster le rembourrage un peu pour qu'il ait l'air visuellement, il semble plus grand que le moyen ou le petit bouton. Donc nous allons aller de l'avant et ajuster les valeurs de remplissage. Maintenant, je vais y aller et rentrer ici. Deux bords, les valeurs de remplissage et ne pas essayer de valeurs séparées par des virgules parce que je l'ai déjà fait. Et tu sais, juste pour te montrer comment ça marche. Donc je vais aller de l'avant et lui donner un 20 en haut et en bas comme ça et vous pouvez le voir changer. Ça change. Et puis on va aller de l'avant et lui donner un 48 à gauche et à droite, comme ça. D' accord, donc je vais aller de l'avant et le mettre ici et appeler ce bouton grand. Comment ça a l'air ? C'est un peu plus grand ? Bien sûr, ça a l'air plus grand. Ok, maintenant, le prochain, on doit faire ce petit bouton. D' accord, donc encore une fois, je vais aller de l'avant et faire glisser une copie comme ça. Ok, cool. Et je vais aller de l'avant et sélectionner l'étiquette. Sélectionnez étiqueter un petit. Bon, Maintenant encore une fois, voir juste faire les étiquettes petites ne rend pas le bouton visuellement petit. Vous devez également ajuster le rembourrage. Donc je vais aller de l'avant et sélectionner à nouveau ce cadre, je vais écrire ici où il est dit alignement et rembourrage, vous le savez. Et je vais aller de l'avant et mettre 10 pour le haut et le bas. Et je vais aller de l'avant et mettre 16 pour gauche et droite. Et ce bouton est maintenant petit. Ok, maintenant, revenons-les aux boutons pour que ce soit plus facile à voir. Et je vais les mettre côte à côte pour que tu aies contrasté la forme. Bon, on y va. Nous avons trois très jolis boutons et tous de différentes tailles. Et ça ? Je peux avoir un high 5 ou 80 ? Ok. Maintenant, maintenant, une fois que nous aurons le but final que nous recherchions, nous pouvons aller de l'avant et nous débarrasser de ces choses parce que, bien sûr, nous ne les utiliserons pas. Ils ne sont pas importants. Ils ne sont pas aussi sophistiqués que les montagnes de mise en page automatique. Ok, Maintenant, la dernière étape, nous allons aller de l'avant et transformer ces boutons en composants. Les composants sont une partie très utile de Figma. Les composants sont réutilisables. Vous pouvez les utiliser dans plusieurs endroits différents a et vous pouvez en savoir plus sur eux et en savoir plus à leur sujet. Et si vous n'avez jamais entendu parler de l'informatique, des composants, ce que je vais faire maintenant, nous vous donnerons une idée assez solide. Et aussi tout au long de ce cours, vous aurez une idée assez solide de ce que sont les composants. Alors d'accord, allons de l'avant et transformons-les en composants. Retourne un élément dans un composant ou quelque chose de couche dans un composant. Qu' est-ce que vous faites, c'est que vous le sélectionnez et que vous cliquez sur cette icône en haut qui indique Créer un composant. Je vais aller de l'avant et cliquer dessus et regarder ça devenir bleu. Il y aura cette icône ajoutée à gauche et à droite ici aussi. Alors soyez à l'affût de ça. Je vais cliquer sur Je vais jouer. Voyez-vous, voyez-vous la différence ? Très bien, voilà. Maintenant, cela signifie essentiellement que cette chose est maintenant un composant. D' accord ? Alors je vais y aller et faire ça. Faites de même pour le reste de ces deux boutons. Alors je vais entrer et cliquer ici. Comme si elles étaient cliquées ici, cliquez là. Ok, maintenant ce sont des composants, mais ce n'est pas ça. Ce que je vais faire maintenant, c'est sélectionner et faire glisser et cliquer dessus, ceci , ceci, ceci, cette, cette petite chose que ça veut dire, c'est aussi une bande magique si vous me demandez, mais d'accord, allons de l'avant et cliquez sur combiné comme variance et vous verrez une bordure bleue vraiment créée autour d'elle. Donc je vais aller de l'avant et cliquer sur combiné comme variance 1, 2, 3. Voilà, tu y vas. Très bien, super, belle. Ça veut dire que tout ça. Tu sais quoi ? Laisse-moi te montrer. Laissez-moi passer par quelques étapes supplémentaires et vous comprendrez mieux la variance et les composants. D'accord ? Maintenant, je ne vais pas sauter devant moi et essayer d'expliquer quelque chose d'abstrait, qui est abstrait jusqu'à ce que vous l'ayez vu. Donc je vais aller de l'avant et vous voyez qu'il y a ce menu déroulant pour que je puisse sélectionner chacun d'eux. Maintenant, le, chaque couche, il est dit par défaut, ok ? Et, et vous pouvez double-cliquer sur ce calque et changer le nom. Donc, ce que nous allons faire est quand cela est sélectionné, vous voyez le bouton Lancer et sélectionnez-le afin que nous puissions, nous pouvons créer nos propres valeurs ici sont seulement paire de valeur clé ici. Donc, je peux écrire ce bouton fois x grand. Je peux lui donner une taille de grande, et c'est complètement arbitraire. C' est quelque chose que je choisis le nom de la propriété, qui est la taille et je l'appelle grand. Et je vais faire la même chose pour celui-là, qui sont les boutons moyens. Donc, je peux aller de l'avant et double-cliquer et les côtés droit. Moyen. Ok, cool. Maintenant, je peux aller de l'avant et pour le petit, faire la même chose. Je peux, non ? Taille égale petite. Bon, maintenant si vous avez complètement terminé, la seule chose à voir est comment, pourquoi nous l'avons fait et comment les composants et la variance se comportent. D' accord ? Maintenant, si vous regardez en haut, cette petite bande mince juste ici, il y a des couches derrière qu'il y a ce truc appelé des actifs. Donc, je vais cliquer dessus et vous verrez le composant local et ce bouton est ajouté. Maintenant, avant de créer le composant, vous ne l'avez peut-être pas vu. Je veux dire, parce qu'il n'y a pas de composants, nous n'avons pas vu de composant local. Maintenant, cela signifie qu'un composant peut être retiré un an et mettre n'importe quel vecteur sur l'interface utilisateur autant d'instances que nous le voulons. D' accord, et ils sont tous liés à ça. D' accord ? Maintenant regarde ça. Maintenant regardez, regardez ce qui crée la taille égal à la taille moyenne et le stockage frigorifique et la taille est petite, ce qui est rituel essentiellement appelé la variante Feature et Figma fait. Je peux sélectionner n'importe quelle instance, d'accord ? Vous voyez ici où il est dit taille grande, je peux aller de l'avant et choisir, disons moyen. Très bien, donc le bouton est maintenant moyen, et je peux aller de l'avant et sélectionner petit, et le bouton est maintenant petit. Maintenant, cela signifie que partout dans mon interface utilisateur, si je créais une carte et que je voulais le bouton, je pourrais simplement la faire glisser et nous allons sauver la journée. C' était un signe de forme que je créais. La carte était sur la science, donc je peux écrire, inscrire et ensuite, tu sais, j'ai décidé, Ok, non, non, je veux un bouton de taille moyenne là-bas. Donc tout ce que je peux faire est juste de cliquer dessus et de choisir le moyen, et c'est tout et tout fonctionne. Tellement grande et l'harmonie n'est pas si belle. Et plus que cela, depuis tous ces boutons, tous ces boutons déroulants, nos exemples ici, tout ce centre de vérité. Si je fais un changement ici, cela sera reflété dans tous les cas. Disons, par exemple, je ne voulais pas le bouton à quelques jours et que je décide, ok, boutons bleus. Je veux que les boutons aient l'air gris pour que je puisse sélectionner Grey 0 et bam, il est reflété partout. C' est cool ? Maintenant, juste pour le bien de ce cours, bien sûr que j'aime le bleu, donc je vais aller de l'avant et revenir au bleu. Donc je vais sélectionner tout ça. Allez sur cette grille. Il est écrit Grey 0 et léger bleu et juste comme ça et tout. Donc bêta et je vais me débarrasser de tout ça parce que je n'aime pas ça. Ok, donc c'était tout. Dans cette leçon, nous avons tellement appris que la deuxième partie, et nous avons déjà plus de 10 minutes, mais il y a tellement de choses, il y a tellement appris. Nous avons commencé par créer des boutons de texte, et nous avons commencé à créer des boutons de mise en page automatique. Et puis nous avons commencé à créer différentes tailles d'entre eux, puis les recombinons dans la variance afin qu'ils puissent être utilisés à différents endroits dans l'interface utilisateur. Nous avons tellement fait, vous avez tellement fait, et nous sommes aussi fiers et vous pouvez faire une pause maintenant. Et je vous reverrai dans la prochaine vidéo où nous allons intensifier notre jeu de mise en page automatique et créer un composant un peu plus complexe. Ok, je te verrai alors. 6. Réaliser un déroulement de déroulages: Ok, donc les boutons étaient assez simples. Nous utilisons uniquement une ou deux fonctionnalités de mise en page automatique, comme la création d'un cadre de mise en page automatique ou l'ajout d'une mise en page automatique à un cadre. Et comment définir le rembourrage à l'intérieur du cadre va déballer quelques autres fonctionnalités de mise en page automatique dans cette vidéo. Et jetons rapidement un coup d'oeil à ce que nous allons faire ensemble dans cette vidéo. Donc, ce que vous devez faire est d'aller dans la maîtrise Figma leur magie d'Ottaway sur fini et cliquez sur les listes déroulantes, listes déroulantes pages juste en dessous des boutons. Et souvent, vous savez, si vous n'êtes pas familier, très familier l'interface utilisateur de Figma, parfois les pages est, est réduite, donc vous devez cliquer sur ce bouton ici, puis il apparaît. Et puis vous pouvez cliquer sur les listes déroulantes et regarder cela. Regardez comment le composant regarde l'élément de l'interface utilisateur qui va concevoir ensemble dans cette vidéo est comment c' est un composant de sélecteur que vous savez que c'est le nom que je lui ai donné. Vous pouvez l'appeler une liste ou vous pouvez l'appeler une carte ou tout ce que vous voulez. Et ça fonctionne magnifiquement. Ecoute, je peux ajouter plus de ça et ensuite je peux le redimensionner correctement. Regardez comment le bouton reste toujours en bas. Et si je démissionne ses loci horizontalement, tout se redimensionne magnifiquement. Donc, ce sera un peu un pas de plus par rapport à tout ce que nous avons conçu dans la dernière vidéo, qui était juste des boutons très normaux. Alors, d'accord, revenons ici et mettons-nous au travail. Assurez-vous donc que vous êtes dans le fichier de démarrage , puis assurez-vous que vous êtes à l'intérieur de la page déroulante. Donc, cliquez sur la page déroulante et ce sera totalement vide parce que nous allons le remplir avec un tas de trucs d'interface utilisateur de mise en page automatique cool. Dans la dernière vidéo, tu m'as vu faire un tas de manœuvres pour enfin créer un élément de mise en page automatique. Le bouton qui est, et comme je l'ai promis, vous n'avez pas à faire ces manœuvres, donc il y a un raccourci pour ça. D' accord. Et je vais montrer que je vais te le montrer tout de suite. Ok, donc la première chose à faire est d'écrire des textes sur la toile. Et comment puis-je faire ça ? Si je clique sur l'outil Texte ou appuyez simplement sur D, puis cliquez sur un Canvas n'importe où et commencez à taper. Maintenant, je vais taper, disons option, ok, Maintenant, assurez-vous que l'option a l'un des textiles que j'ai définis s'appliquant à elle. Pour l'instant, je vais choisir étiqueté grand pour cela afin qu'il ressemble à ceci. Ça a l'air génial. Ok, Maintenant, pour imbriquer ceci et c'est ce texte à l'intérieur et finalement sur le cadre, tout ce que nous devons faire est de nous assurer que le texte est sélectionné et appuyez sur le raccourci Maj plus un, OK, Maj plus Et voilà. Il est à l'intérieur et cadre de mise en page automatique. Comment je le sais ? Regardez, regardez, regardez gratuitement écrit ici. Regardez le panneau des calques d'icônes et regardez sur le côté droit où la bande mince de mise en page automatique, la correspondance sera mince bande est maintenant activée. C' est cool ? Maintenant, donnons le cadre que nous venons de créer, une couleur de fond, ok, Nous allons choisir une couleur dans les styles de couleur. Que diriez-vous du gris 0, ok, super, et nous allons changer la couleur du texte en blanc. Et comment on fait ça ? Nous cliquons simplement sur les styles de couleur et nous choisissons le blanc. Juste comme ça. La prochaine chose que nous voulons faire est qu'ils le voulaient et juste le rembourrage. Maintenant, si vous suivez le long, ce que vous devez faire est de lui donner un remplissage de 16 pixels sur le haut et le bas et 32 sur l'horizontale. Alors allez-y et voyez si vous pouvez faire ça pendant que je fais la même chose. Bon, alors donnons-lui un rembourrage de 16 sur le dessus et le bas, juste comme ça. Et à gauche et à droite, on va lui donner un rembourrage de 32. Ensuite, ce que je vais faire, c'est donner à ce cadre un rayon de huit. Et appuyez sur un huit et cliquez sur Entrée et regardez cela. Et la meilleure partie à propos de tout cela, c'est beaucoup faire. Nous donnons des espaces donnaient des couleurs et des coins arrondis et tout cela comme une seule unité. C' est beau ? Regardez le panneau Calques. Pas d'encombrement du tout. Ce n'est qu'une seule unité. Et maintenant, allons de l'avant et vérifions s'il est correctement redimensionné. Ok, donc je vais aller de l'avant et l'étirer horizontalement. Et oui, c'est le cas. Et rappelez-vous, contrairement au bouton où nous voudrions que l'étiquette soit alignée au centre, nous voulons que cet élément d'interface utilisateur ait toujours du texte sur la gauche. Cependant, le cadre est étiré dans redimensionné maintenant pour s'assurer que cela se produit. Et en passant, figma l'a déjà mis à gauche par défaut, tout ce que vous avez à faire est de cliquer dessus, cliquez sur le même carré où vous réglez le rembourrage. Et n'oubliez pas qu'il indique non seulement le rembourrage, mais l'alignement, l'alignement et le rembourrage, ce qui signifie que vous pouvez également ajuster l'alignement. Donc, pour l'instant, l'alignement est au centre et à gauche. Il y a d'autres options, trois sur le dessus, trois au milieu et trois sur le bas. Donc, par exemple, c'est en haut et à gauche et je vais choisir à gauche et au centre. Alors c'est tout. Et maintenant, si je le redimensionnais horizontalement, vous voyez qu'il reste à gauche, comme il a été choisi dans la section d'alignement ici. Et si je le redimensionnais verticalement, vous voyez qu'il reste toujours au centre comme il a été choisi. Et cela vient d'être dit, il a été demandé de rester au centre comme ça et de se sentir libre de jouer un peu avec l'alignement et d'obtenir un meilleur accrochage. Par exemple, si je sélectionne ce cadre et que je change l'alignement au centre, il se comporte comme le bouton qu'il reste au centre. Redimensionner les minutes. Donc encore une fois, je vais aller de l'avant et sélectionner ici et le mettre à gauche comme nous le voulons. Vous pouvez, vous savez, comme je l'ai dit, jouer si je le garde en haut et à gauche et que je redimensionne, il reste en haut et sur le côté gauche. Oui, c'est vraiment cool. Ok, donc je vais aller de l'avant et régler tout comme il était, où l'alignement était au milieu et à gauche. Et je le laisserai là. Et continuons à développer notre élément d'interface utilisateur. Maintenant, jusqu'à présent, nous avons seulement fait cette partie de l'ensemble du composant, cette partie option. Nous devons également construire le wrapper et remarquer qu'il mènera plusieurs de ces options, qui signifie réutilisabilité, ce qui signifie que nous allons convertir ceci, ceci ici en un composant, cette lecture de cette option deux. Et cela va tourner le calque de texte et nous allons changer le nom du calque de texte, je veux dire, et appeler a et LA l'étiquette l. Et encore une fois, je vais sélectionner le cadre et le convertir en un composant. Tu sais quoi faire. Cliquez sur cette icône juste ici et bam, c'est ce composant maintenant, ce qui signifie que je peux aller dans les actifs et tirer autant d'Ed que i1, 1, 2, 3. Et si je fais le changement, apportez des modifications à mon composant principal, comme changer la couleur de fond. Ça sera reflété dans toutes les copies jusqu'à présent, si bien. Maintenant, je vais vous montrer un flux de travail que vous allez utiliser encore et encore dans votre routine de conception d'interface utilisateur. J' ai déjà, comme je l'ai dit, vous pouvez faire glisser une instance du panneau d'actifs de ce composant comme ceci. Et il y a une autre façon de faire glisser une instance. Il fait mon maintien Option et faire glisser une copie à partir du composant principal. Et plus tôt, comme je vous l'ai montré, si c'était un rectangle normal ou quelque chose qui n'est pas un composant, vous pouvez Option et faire glisser pour en créer une copie. Mais si vous faites la même option d'action, faites glisser sur un composant, vous allez faire glisser l'instance et regarder le panneau des calques, faire apparaître les instances avec un carré pivoté de 45 degrés. C' est aussi appelé la forme, je crois qu'on l'appelle aussi un losange. Et regardez comment le composant principal apparaît, mais quatre carrés empilés comme ceci. Ok, super. Donc, avec ces deux composants, ces deux instances du MainComponent, je peux les mettre ici. Et la prochaine chose que je veux faire est de les mettre dans une lecture automatique sur cadre. Et c'est la routine dont je parlais souvent ce qui se passe, c'est que nous avons des instances d'un composant et que nous voulons les organiser ensemble, comme par exemple, dans ce cas, nous voulions les mettre dans une liste. Bon, donc je vais sélectionner ces deux-là et appuyer sur Maj a et voir comment il est automatiquement mis dans une disposition automatique des composants. Sélectionnez donc les deux, appuyez sur Maj a et regardez cela. Il est à l'intérieur d'un cadre et regarder dans le panneau des calques est à l'intérieur d'un cadre. Donc je vais aller de l'avant et d'abord, lire ce cadre à quelque chose comme abandonné. Ok, plutôt cool. Et regarde ça. Comme ces options, ces instances de ce composant d' option se trouvent à l'intérieur d'un cadre de mise en page automatique. Ce que je peux faire est d'appuyer sur la commande D et ils seront automatiquement ajoutés et l'espacement entre eux serait maintenu assez joli, assez cohérent car ils sont à l'intérieur d'un cadre de mise en page automatique. Donc une autre chose que je peux faire, qui m'amène à l'espacement entre une partie de la bande de mise en page automatique est que vous sortez. Vous pouvez juste vous pouvez l'ajuster en faisant glisser et cela change. Je pense que le nom est très si X explicite. Il ne ferait qu'espace entre les éléments, les données et signé le composant. Et pour celui-là, nous voulons le garder à 10 heures. Donc, je vais taper 10 et appuyer sur Entrée et regarder ceci, l'espacement entre chacun d'eux, chacune des options est 10. Comment, comment, comment ça va, à quel point c'est cool ? Et la prochaine chose que je vais faire est que je vais sélectionner le cadre et lui donner une couleur de fond de gris. Alors, voilà. Maintenant, il a une couleur d'arrière-plan. Et la prochaine chose que nous voulons faire est de lui donner un rembourrage de 12 sur les quatre côtés. Donc au lieu de, au lieu d'entrer ici et de taper 12 quatre fois, ce que je peux faire est juste, je suis trop vieux ici, appuyez sur Entrée et le remplissage de 12, il sera ajouté sur toutes les balises. Regarde ça. C' est génial, n'est-ce pas ? C' est plutôt cool. Et pendant que nous y sommes, ce que je vais faire ensuite, c'est lui donner un coin arrondi de 12 pixels. Alors 12 Entrez. Et maintenant, regarde ça. Nous allons à quel point il ressemble à une liste déroulante appropriée. Et la meilleure partie à ce sujet est que je peux ajouter des composants, ajouter, désolé, ajouter des instances d'option dans la liste. Je peux les enlever et la hauteur et tout est ajusté automatiquement. Très bien, plutôt bien. Maintenant, juste pour rappeler qu'il s'agit d'un cadre de mise en page automatique et options sont également créées à l'aide de la mise en page automatique, ce qui signifie que vous pouvez imbriquer des cadres de mise en page automatique dans des cadres de mise en page automatique, et que vous n'avez aucune idée de la puissance de cette image. Nous allons regarder quelques exemples vraiment cool plus tard dans le cours. Mais pour l'instant, notez ceci, si je redimensionne ce cadre, ce cadre déroulant horizontalement, les options ne se redimensionnent pas. Pourquoi c'est ça ? Maintenant, si je sélectionne une option, si je sélectionne l'une des options à l'intérieur du cadre de mise en page automatique, vous remarquerez que cette contrainte de redimensionnement apparaît juste en dessous de cette bande de mise en page automatique. Si je regarde les contraintes de redimensionnement horizontales, ce qui signifie que si elle est redimensionnée horizontalement, cela dit largeur fixe, ce que nous ne voulons pas. Nous voulons qu'il remplisse le conteneur qu'il a un aperçu. Donc, je vais cliquer ici et choisir Remplir le conteneur comme ça. Et maintenant, vous voyez que le cadre s'étire automatiquement et remplit le récipient. Il y a une autre option appelée contenu câlin ici, ce qui signifie que l'option ne prendra que suffisamment d'espace pour contenir le contenu qui est à l'intérieur de celui-ci, nous ne voulons pas dans ce scénario. Nous voulons qu'il remplisse les conteneurs. Alors allons de l'avant et sélectionnez Conteneur complète, et nous ferons la même chose pour le reste de ces options ici. Donc, sélectionnez-les tous et allez de l'avant et modifiez leur contrainte de redimensionnement ou les contraintes de redimensionnement horizontales pour remplir un conteneur. Et regarde ça et si je le redimensionne maintenant, accord, maintenant magnifiquement redimensionné. Maintenant, vous pouvez dire, pourquoi ne puis-je pas juste dire des contraintes de redimensionnement sur le composant principal ici dont ce sont fondamentalement juste des instances de et être fait. Eh bien, vous voyez certaines choses dans des instances sur roudeable, comme la couleur d'arrière-plan ou pour une instance, par exemple, je peux aller de l'avant et changer la couleur d'arrière-plan de cette instance et cela affectera juste cette instance particulière. Ou je peux aller de l'avant et changer les détectes qui sont à l'intérieur, par exemple, appelons-le simplement un ordinateur portable ou quelque chose, vous savez, des mots aléatoires. Donc ces choses sont plus inscriptibles. Et tout comme ceux-ci à la contrainte de redimensionnement est également plus inscriptible parce que nous ne pouvons pas anticiper le contexte dans lequel une instance particulière pourrait être utilisée dans Figma nous donne le choix de choisir le redimensionnement, contrainte pour chaque instance individuellement. Maintenant, encore une fois, si je redimensionne le cadre, regardez comme il se démissionne comme il le devrait. Mais qu'en est-il du redimensionnement vertical ? Comme vous le savez, la hauteur de ce cadre de mise en page automatique calculée par les éléments qu'il contient et l'espace entre chacun des éléments, que nous avons mis ici dans l'espacement entre les éléments. Et il obéit à cela parce que regardez ici, si vous cliquez sur le dernier carré et regardez la partie inférieure, la plupart du temps, il dit pacte, ce qui signifie qu'il va calculer et emballer le contenu étroitement. Et donc, si je redimensionne ce cadre verticalement, vous voyez que les éléments restent emballés, mais je peux changer l'emballage juste ici de emballé à l'espace entre et regarder ce qui se passe. L' espace entre les éléments est défini sur auto. Et si je redimensionne cela verticalement vers le bas, tout se propage simplement au fur et à mesure que le cadre est redimensionné, revoyez une utilisation réelle de l'espace entre l'emballage dans un peu. Mais pour l'instant, nous allons tout retourner en arrière pendant que nous travaillons. Ok, super, on a presque fini ici. La prochaine chose que nous voulons faire est de faire glisser et bouton composant du panneau d'actifs. Rappelez-vous qu'il s'agit du composant bouton créé dans les deux leçons précédentes. Donc je vais juste le traîner et le mettre juste à côté. Maintenant, c'est un bouton de grande taille. Nous aurions l'air mieux à côté, probablement une taille moyenne. Donc oui, ils ont l'air mieux ensemble. Et la prochaine chose que nous voulons faire est de mettre le bouton à l'intérieur de ce cadre même. Donc pour faire ça, tout ce que j'ai à faire, c'est de le glisser comme ça. Et voilà. Et je peux le dire à l'intérieur du cadre parce que quand je fais glisser ce cadre, regardez ça, il traîne aussi. Maintenant, c'est un scénario très commun lors de l'utilisation de la mise en page automatique. Souvent, ce qui se passe, c'est quand vous mettez quelque chose à l'intérieur ou, vous savez, faites un changement et remarquez soudainement que le cadre ne se redimensionne pas. Cela est dû au fait que nous faisons souvent quelques modifications qui entraînent des contraintes de redimensionnement pour passer à une largeur fixe et une hauteur fixe. Et chaque fois que nous rencontrons un scénario comme par exemple, en ce moment, la hauteur ne s'ajuste pas correctement. Tout ce que nous devons faire est d'aller ici, sélectionner cela et cliquer sur le contenu HUD et regarder cela. Il est juste déjà à l'intérieur et à nouveau le bouton. La prochaine chose que je veux faire, c'est que les boutons s'étirent sur toute cette largeur. Et encore une fois, comment pouvons-nous nous assurer que c'est le cas ? Nous allons de nouveau dans les contraintes de redimensionnement. Et en ce moment, il dit le contenu de câlin, ce qui signifie qu'il sera seulement assez large pour s'adapter au contenu qui est à l'intérieur de celui-ci et qu'il le fasse remplir le conteneur qu'il est à l'intérieur. Qu' est-ce que nous avons à faire est d'aller, aller ici et les contraintes de redimensionnement horizontales et cliquez sur Remplir le conteneur et regarder cela. Ça remplit tout le truc. Et nous avons un problème ici que le bouton que le texte à l'intérieur du bouton n'est pas au centre. Et je suppose que j'ai peut-être raté ça. Je n'ai peut-être pas choisi l'alignement correctement. Alors laissez-moi aller de l'avant et voir que dans ce, dans ces composants que j'ai créés et bien sûr Lire, l'alignement n'est pas au centre, donc je vais attendre, je vais les sélectionner tous les trois et assurer qu'ils sont tous alignés centralement. Et si je retourne aux listes déroulantes, vous voyez que le texte est maintenant au centre du bouton. Vous en voyez ces pénibles. La mise en page automatique se produit souvent. Parfois, vous oubliez qu'il y a des contraintes, parfois vous oubliez l'alignement, mais elles sont très faciles à corriger. Comme tu m'as vu le faire tout à l'heure. D' accord. Maintenant, la seule chose à faire si vous voulez me suivre jusqu'au dossier fini, c'est de tout arranger d'une manière qu'ils se comportent comme ça. Vous dites même un élément entier redimensionné verticalement. Le bouton reste sur le bouton alors que la liste reste autour d'elle en haut. Et même quand je redimensionne tout horizontalement, tout simplement redimensionner comme, comme une puce. Donc, vous pouvez aller de l'avant et essayer de le faire, répliquant ce comportement si vous tombez le long ou vous pouvez juste faire ce que je fais, ok, Donc la première chose que nous devons faire est que nous devons séparer les listes et les boutons en ce moment ces je veux dire, les options sur ce bouton, moment ces options et le bouton sont dans le même cadre. Donc, la première chose que nous allons faire est de sélectionner toutes les options et de les placer dans un cadre. Et comment on fait avec ça ? Nous venons de tout effacer, assurez-vous que chaque option est sélectionnée et que le bouton n'est pas sélectionné. Une fois que tout est sélectionné, toutes les options sont en quelque sorte comme ça. Appuyez sur Maj a. Et ce que cela fera est de le mettre à l'intérieur, mettre les options à l'intérieur de leur propre cadre. Et je vais sélectionner ce cadre, double-cliquer dessus et appeler OPT I ON options. OK, entrez, génial. Et maintenant, la prochaine chose que je veux faire est de sélectionner les options, ce cadre juste ici, lui donner un peu de rembourrage. Ok, alors allons-y juste ici. Vous savez comment donner un rembourrage à un cadre de mise en page automatique. Encore une fois, je vais aller de l'avant et lui donner un rembourrage de 12. Alors cliquez là pour ajouter 12, et c'est tout. Vous voyez, en ce moment, ça a l'air un peu embrouillé, mais on va régler puis ajuster ça un peu. La prochaine chose que je vais faire est que je vais sélectionner le cadre déroulant le plus extérieur et changer sa couleur d'arrière-plan en, disons gris à, ok. Et ce cadre d'options ici, je vais aller de l'avant et définir sa couleur d'arrière-plan sur, disons un gris. Ok, super. Et pendant que j'y suis, je vais aller de l'avant et lui donner un coin arrondi de 12. Ok, super. La seule chose à corriger en ce moment est le redimensionnement du cadre le plus extérieur. Et comme on vient de le voir, ça arrive souvent, papa, dit que la contrainte est corrigée. Et tout ce que nous devons faire pour corriger cela est de cliquer dessus et de cliquer sur HUD condenser. Et en ce moment, il dit très clairement visible que nous avons un cadre ultrapériphérique. Nous avons un cadre incité qui contient des options, et nous avons un bouton juste ici. Maintenant, allons de l'avant et chaque fois que vous le faites, chaque fois que vous créez un cadre, votre cadre imbriqué, Il est bon de redimensionner et de vérifier si tout fonctionne correctement. Maintenant, ce bouton pour redimensionner correctement, mais ce cadre ne l'est pas. Encore une fois, comment puis-je réparer ça ? Comme ce cadre aller juste ici et donc je me sens conteneur, ok, super, Maintenant, cet ensemble de remplissage, mais les options ne sont pas. Donc je vais aller de l'avant et les sélectionner tous à nouveau et aller de l'avant et changer ça pour remplir le conteneur. Et maintenant, si je redimensionne cela, vous voyez tout comment magnifiquement les scientifiques de course ne se souviennent pas qu'il est très facile d'être frustré. Ensuite, les cadres de mise en page automatique qui sont imbriqués ne fonctionnent pas comme vous l'aviez prévu. Mais rappelez-vous que ce que vous devez faire est assurer que les contraintes de redimensionnement sont correctement définies. Bon, maintenant pour le redimensionnement vertical, je vais sélectionner la liste déroulante. Et si je regarde ici, ça dit « emballé ». Et comme je l'ai dit, et comme je l'ai expliqué plus tôt, quel Pack signifie que vous devriez être capable d' anticiper ce qui se passera si je le redimensionnais verticalement. Bien sûr, tout reste emballé. Maintenant, si je vais de l'avant et que je change ça en espace entre, regardez ce qui se passe maintenant. Grande, Cela reste ici et un espace entre s'assure que tout se propage, puis l'ensemble de l'élément est redimensionné verticalement. L' espace entre est juste ajusté automatiquement, comme il est dit ici. Auto. Ok, c'est génial. C'est génial. Nous avons beaucoup appris dans cette vidéo, même si pour la petite quantité d'options que la mise en page automatique a, Il y a beaucoup de complexité en elle, et il y a beaucoup de beaux composants puissants que vous pouvez créer à partir de comme on l'a vu tout à l'heure. Et maintenant, si vous l'utilisez comme composant ou que vous le savez, vous voulez le réutiliser n'importe où dans la conception de votre interface utilisateur. Ce que je vous suggère de faire est d'aller de l'avant et de le transformer en un composant de sorte que, de sorte que vous pouvez faire glisser plusieurs de ces sur, sur, plusieurs de ceux-ci hors et utiliser où vous voulez. Et avec ça, avec ça, on en a fini avec cette vidéo. Et dans la prochaine, on va faire quelque chose de vraiment cool. J' espère que tu seras là et que tu apprendras quelque chose, et je te verrai bientôt. 7. Mise en page de deux panneaux: Dans la dernière vidéo, nous avons fait ce petit sélecteur ou élément d'interface utilisateur déroulante, tous en utilisant la mise en page automatique et il se redimensionne magnifiquement à la fois horizontalement et verticalement. Nous allons réutiliser ceci dans l'exemple suivant, par exemple que nous allons passer dans cette vidéo. Et ce sera simple parce que nous avons déjà créé un composant partir de celui-ci et qu'il était président de notre panel d'actifs. Nous pouvons le retirer du panneau des actifs où nous voulons et où nous voulions le retirer est dans la page des deux panneaux, assurez-vous d'abord, si vous suivez, ce que j'espère vraiment que vous êtes , vous sont dans la magie du fichier de démarrage de mise en page automatique et dans la page des deux panneaux, aller dans les actifs et tiré ma liste déroulante juste comme ça. Plutôt cool. La prochaine chose que nous voulons faire est d'ajouter un tas de texte à cette toile. Et pour ce faire, je vais juste cliquer sur l'outil Texte, faire glisser un rectangle comme celui-ci, et nous pouvons maintenant commencer à taper dans cette boîte. Tout d'abord, nous allons prendre un texte de remplissage que j'ai figma a Wikipédia page ouvre. Donc, je vais aller de l'avant et prendre le premier paragraphe, commande C, entrer dans ma zone de texte, appuyez sur Commande V. Très bien, super, Débarrassez-vous de ce petit crochet carré dont nous n'allons pas avoir besoin sont juste, ce n'est pas important si c'est là ou non. Donc juste pour mon plaisir, je l'ai enlevé. D' accord. Donc, une fois que nous aurons le texte, la prochaine chose que nous ferons est de choisir parmi l'un des textiles que j'ai définis. Et pour celui-ci, nous allons choisir le corps normal. Donc oui, super. Ça a l'air plutôt bien, n'est-ce pas ? Et changeons la couleur de ceci en gris 0. Ok, super. Et la dernière chose que nous allons faire avec un texte est de cliquer sur ces trois points ici, le redimensionnement et assurez-vous que la hauteur automatique comme sélectionné. Lorsque la hauteur automatique est sélectionnée, si je modifie le texte, vous voyez la hauteur de cette boîte et juste automatiquement, et si je redimensionne ceci ou s'étire horizontalement même alors la hauteur de la boîte est automatiquement ajuste, ce qui est assez grand, et s'assure également que le texte est aligné à gauche. Jusqu' à présent, si bien. Que voulez-vous faire maintenant est de mettre ce texte que nous avons écrit ici et ce composant déroulant ensemble dans un grand composant comme celui-ci, comme je l'ai dans le fini, fini la magie de la mise en page automatique fichier fini sous deux panneaux , vous savez, quelqu'un comme ça et de les avoir ensemble pour les redimensionner bien comme ça. Et si vous les redimensionnez, il verticalement, il se redimensionne bien à nouveau. Et si je retire quelque chose d'ici, encore une fois, tout juste, oups. Je voulais dire par une option, tout s'ajuste correctement. Maintenant, revenons au dossier de démarrage, encore une fois, nous devons les mettre ensemble dans un cadre. Comment on fait ça ? Encore une fois, nous sélectionnons les deux et appuyez sur le raccourci Maj plus un. Et les deux sont à l'intérieur d'un seul cadre maintenant et regardez l'icône dans le panneau Calques. Regardez les droits de cette bande de mise en page automatique. Il est présent, ce qui signifie que la mise en page automatique a été appliquée dans ces deux choses sont imbriquées dans un cadre de mise en page automatique. Maintenant, avant d'aller de l'avant et de faire plus de choses avec, de faire quelques changements et de faire en sorte que ce squelette d'une chose ressemble à la chose finie. Il y a quelque chose dont nous devons parler. La seule chose que nous n'avons pas encore tout à fait discuté en profondeur, et c'est la direction de la mise en page automatique. Maintenant, nous allons monter un peu en tenant de l'espace et en faisant glisser vers le haut sur la toile comme ça, venez à une zone claire et laissez-moi dessiner deux carrés sur une toile, 12, Ok, super. Et assurez-vous qu'ils sont des mêmes dimensions. Ok, super. Maintenant, mettons-les ensemble dans un cadre armé permanent. Comment faites-vous ça ? Vous les sélectionnez tous les deux et appuyez sur Maj a, et maintenant ils sont à l'intérieur d'un cadre terriblement sur. Un tas d'options apparaissent ici. Et même à l'intérieur du panneau Calques, vous voyez que les changements d'icône dans les deux rectangles se trouvent à l'intérieur de ce cadre. Maintenant, je suppose que vous avez peut-être déjà joué avec cela, mais ce n'est pas la science de la fusée, c'est assez simple en fait, en regardant des icônes dans le panneau des calques pour ce cadre de mise en page automatique, regardez comment les rectangles dans le sont empilées verticalement, n'est-ce pas ? Ceci montre la direction dans laquelle la mise en page automatique organise les éléments dans le cadre. Et la même chose est itérée avec cette flèche juste ici. Regardez, vertical est sélectionné si je change la direction d'empilement ou la disposition de ce des deux rectangles à l'intérieur de ce cadre à horizontalement en cliquant sur la flèche ici, regardez tout ce qui se passe. Je vais aller de l'avant et cliquer sur la direction horizontale. Encore une fois. Ils sont maintenant disposés horizontalement, et même dans le panneau des calques, l'icône a changé en deux rectangles empilés horizontalement. Maintenant, c'est tout ce qu'il y a pour connaître les bases de tout ce qu'il y a à savoir sur les directions. Et c'était la dernière chose qui était nécessaire pour j'aille sur tous les aspects du lointain. Alors, où que vous soyez, revenons à notre composant maintenant. Déjà que faire des choses que nous avons besoin de faire le composant sont à l'intérieur et cadre de mise en page automatique. À partir de là, il s'agit de régler les paramètres et de jouer un peu avec les boutons. Ok, commençons par renommer ceci, ce cadre un à deux panneaux. Donc, ne pas déplacer les adultes avec seulement deux panneaux. Et donnons un peu de rembourrage sur tous les côtés de ce cadre et lui donnons également une couleur de fond pour le rembourrage. Allons-y avec 24. Donc encore une fois, si je veux blâmer sur le, tous les quatre côtés à la fois, je vais cliquer ici et écrire 24. Et un rembourrage de 24 unités ou 24 pixels pour appliquer sur tous les côtés de ce petit composant. Jusqu' à présent, si bien. Ensuite, donnons-lui un remplissage de trois gris comme ça, et donnons-lui un rayon de coin arrondi de 12. Maintenant rappelez-vous que les deux éléments sont empilés horizontalement côte à côte comme il est représenté dans cette icône ici, et comme il est montré dans cette icône de flèche juste ici, si je le fais vertical, sera, ça ressemblera tout à fait différent comme ça. Ok, mais revenons à la rendre horizontale. Maintenant, ajustons l'espacement entre ces deux choses qui sont à l'intérieur en ce moment l'espacement entre eux est 103, ce qui est assez grand. Et, vous savez, je peux m'aligner sur eux et l'espacement va augmenter ou diminuer, mais réglons ça à un nombre, quelque chose comme 32. D'accord ? Très bien, super. Maintenant, il semble bien disposé ici jusqu'à ce que, jusqu'à ce que nous essayions, il devrait le redimensionner. Commençons par l'étirer horizontalement d'abord, accord, et non, ce n'est pas ce que nous voulons. Il y a deux choses que nous pouvons faire ici. Numéro un, nous pouvons décider que la largeur de la liste déroulante ou cette sélectionner son composant ou quel que soit le nom que vous voulez appeler, rester le même pendant que la largeur du texte se développe sur redimensionner. Pour cela, nous allons sélectionner le texte, ok, vous avez plaque d'extrémité. Faites attention ici. Nous allons sélectionner le texte et changer son redimensionnement de largeur fixe pour remplir le conteneur. Alors que ce composant, celui-ci, la sélection de la liste déroulante reste largeur fixe. D' accord ? Et maintenant regardons comment il se comporte lorsque vous le redimensionnez horizontalement. Alors, ok, super. Voyez, voyez comment magnifiquement trois scientifiques. Donc, tout ce que nous avons dit à Figma était de s'assurer que quelle que soit la taille qu'il reste à l'intérieur de ce cadre, faire remplir le texte qui est rempli conteneur. Et quoi qu'il arrive, quelle que soit la taille de ce que nous avons dit à Figma de garder cette largeur fixe. Et c'est ce que Figma c'est. Et maintenant que nous le redimensionnons, le texte coule alors que celui-ci reste fixe et ses dimensions. Maintenant, inversement, nous pourrions vouloir que ce composant change de taille et se développe sur re-size alors que le texte reste une largeur fixe pour cela, mais nous allons changer les contraintes de redimensionnement, rendre la largeur du texte fixe, et rendre cette le composant déroulant pour remplir le conteneur et regarder ce qui se passe lorsque je redimensionne maintenant. Ok, à quel point c'est cool, non ? De plus, nous pouvons vouloir que ces deux soient mises à l'échelle avec le conteneur ou le cadre extérieur, auquel cas nous sélectionnerons les deux et modifierons leurs contraintes de redimensionnement, les contraintes de redimensionnement horizontales pour remplir le conteneur. Et maintenant, si vous redimensionnez, les deux, ajustez la largeur. D' accord. D' accord. Siège CSAC. Je pense que je vais rester avec ce sélecteur, ce composant, la liste déroulante, je l'appelle sélectionner encore et encore parce que je l'appelais comme ça, mais vous savez, le nom n'a pas d'importance ici. Je veux juste que tu saches ça, d'accord ? Donc, je me demande que ce composant soit une largeur fixe et je veux que ce soit redimensionnable, qui est le conteneur Phil. Et on est de retour à l'option 1. Parfait. Maintenant, pour le redimensionnement vertical, qui n'est actuellement rien pour le redimensionnement vertical, nous voulons que ce composant déroulant, cet élément ici, étirer et remplir le conteneur lorsqu'il est redimensionné verticalement. Donc, nous allons aller de l'avant et sélectionner ceci, aller à la contrainte de redimensionnement verticale et changer de hauteur fixe pour remplir un conteneur. Maintenant, quand il le redimensionne verticalement comme ceci, vous dites qu'il redimensionne correctement. Très grand, en effet. On a tout mis en place. À peu près juste une chose. D' accord ? Que faire si nous devions augmenter le contenu dans le texte de sorte que le débordement soit ce conteneur. Donc, au lieu de mettre un tas de textes, ce que je vais faire est de supprimer quelques options d'ici. Pour que je puisse le faire. Supprimer, supprimer, laissez-moi supprimer quelques options. Ou ce que je peux faire est simplement d'aller dans le panneau Calques et de masquer quelques options et de le redimensionner comme ceci. Maintenant, si je vais de l'avant et je l'étire, et je vais de l'avant et je le fais aussi verticalement. Ok, maintenant vous voyez que le texte est débordant. Maintenant, c'est un scénario très courant. Ceci, cela se produit tout le temps avec la mise en page automatique, avec ce qu'il est, il a été demandé. Donc je l'ai remarqué à chaque fois. Je vais sélectionner le panneau le plus extérieur, le composant principal ici, la seule chose qu'on a faite et le redimensionner. Ce qui se passe est lors du redimensionnement des contraintes que vous avez appliquées à ce cadre extérieur particulier change pour corriger à la fois la largeur et la hauteur. Et chaque fois que ça arrive, tu sais, les choses peuvent déborder et sortir. Et pour corriger cela, la chose la plus simple à faire est de savoir, d'accord, si cela débordement verticalement, la seule chose que je vais faire est d'aller à la contrainte de redimensionnement verticale et de la changer pour étreindre le contenu. Et chaque fois que vous le faites, il se redimensionnera automatiquement. Et B, juste haut ou grand ou assez large pour s'adapter au contenu qu'il contient. Maintenant, tant que le contenu de l'étreinte est sélectionné. Maintenant, regarde ça. Je reviendrai au point précédent que j'ai fait, qui consiste à redimensionner ce que fait Figma est de changer la contrainte à corriger. Donc, en ce moment, regardez la verticale dit comment le contenu, mais dès que je vais de l'avant et le redimensionner, il revient à hauteur fixe, ce qui est très compréhensible. Ok, maintenant, tant que cela dit que tant que je redimensionne la contrainte pour l'ensemble du cadre est un contenu HUD. Même si je fais ça, vous voyez que le cadre se redimensionne correctement, ok ? Et si je vais de l'avant et que je retire un tas de textes d'ici, comme ça, vous dites que tout se redimensionne parfaitement. Maintenant, avec cela, nous avons fini avec l'élément d'interface utilisateur que nous faisons. Et regardez à quel point il est propre et à quel point il se redimensionne et tout ce qu'il sort. Maintenant, jusqu'à présent, dans tout ce cours, nous avons couvert presque tout ce qui concerne la mise en page automatique, mais l'utilisation de la mise en page automatique nécessite une certaine pratique. Donc, dans la prochaine série de vidéos, je vais vous présenter les composants, les nouveaux composants que j'utilise réellement dans mes vrais projets Lord. Et je vais vous défier de les faire. Je vais vous donner tous les atouts qui ont besoin et ensuite vous pouvez tirer votre tir ou si vous s'il vous plaît juste me regarder le faire. D' accord. Je te verrai dans la prochaine. J' ai une note de défi assez géniale. 8. Défi 1 : Panel de Praise: D' accord, on va faire du freestyle à partir d'ici. Tu connais toute la théorie et les petits détails sur tout ça. Et il n'y a plus rien de nouveau à te dire. Mais je sais que c'est une chose de savoir quelque chose et une autre de l'utiliser dans un cas pratique. Donc, à partir de maintenant dans le cours, je vais vous montrer, vous montrer quelques composants que j'utilise dans des projets réels. Et je vais vous défier de reconstruire ceux sur votre propre en utilisant la mise en page automatique Figma du tout. Je les construirai aussi avec toi. Donc tu aurais une référence et regarderais, tu peux le faire. Et voici ce que nous étions vraiment dans cette vidéo. Dans cette vidéo, nous construisons ce que je viens de donner le nom de panneau de louange. Ok, Donc dans mon nouveau projet, qui était un site Web, j'ai de bonnes choses que les gens ont dit à propos de ma parole, tête de liste comme ça. Il y a une chose que quelqu'un a dit. Très bien, il y a la louange alors qui l'a dit et le nom de l'article ou le travail qu'ils ont préparé. Maintenant, nous allons faire une version de ce composant dans cette vidéo. Alors assurez-vous que vous êtes à l'intérieur de la magie des sorties corporelles totter fichier et dans le défi de peinture de panneau de louange lorsque panneau de louange, maintenant à l'intérieur de cette page, vous trouverez trois sections. K, Le premier est l'anatomie de l'ensemble du composant. A, l'air si beau. Je veux dire, il a des textiles énumérés, les valeurs de rembourrage énumérées, et la couleur est listée, et cetera. Alors que lorsque vous construisez ce composant par vous-même, vous ne pouvez vous concentrer que sur la fonctionnalité et ne vous inquiétez pas, ok, quelle valeur de remplissage dois-je donner ici, et quelle couleur dois-je choisir ici, et quelle police de caractères dois-je utiliser ? Rien de tout ça. Tout est listé ici, et à la fin il y a un triangle que j'ai mis qui est la seule partie supplémentaire dont vous allez avoir besoin. Le reste ne sera que des cadres et du texte. Donc oui, c'est là. Là, vous avez tout et au milieu, vous avez le composant fini que vous pouvez jouer avec. Par exemple, je peux augmenter le texte, écrire plus de texte ici et écrire plus de texte ici et voir comment il se redimensionne. Et puis je peux l'étirer et découvrir, oh oui, super. Donc, vous pouvez le faire, jouer autour, recherche un peu, Voir comment il fonctionne, puis aller de l'avant et quelque part à nouveau dans cette même page, quelque part ici, commencer à travailler sur le composant. Donc je vais faire une pause maintenant et vous pouvez commencer à travailler. Et si vous n'êtes pas d'humeur, si vous n'êtes pas d'humeur à le faire, vous pouvez simplement vous asseoir, vous détendre et me regarder le faire. Eh bien, passons à la façon dont je vois ce composant est qu'il a globalement deux parties. La partie supérieure est si je vais juste le glisser et le cacher, la partie inférieure comme ça. Donc c'est la partie supérieure et puis il a la partie inférieure, le triangle. Et ce peu écrit pour dans le nom de la partie de l'article. Donc, la partie inférieure dans l'ensemble est un peu plus complexe que la partie supérieure. Commençons donc par la partie supérieure, qui est simple. Cette erreur commune ou pas vraiment une erreur, mais une chose commune à faire avant frames et reframes était 0. Vous voyez un rectangle. D' accord, allons-y et appuyez sur la presse R et obtenez l'outil rectangle et commencez à dessiner un conteneur connu. Et ce n'est pas ce que tu vas faire. Comme un, Je l'ai déjà expliqué dans les vidéos de début que nous avons juste besoin du contenu et ensuite nous pouvons ajouter un cadre autour d'elle. Et un cadre peut avoir des propriétés comme couleur Bagram et les ombres et les coins arrondis et tout ce qui n'est pas. Commençons par le contenu ici. Disons que ce carbone ici est juste, votre évaluateur. Alors appuyez sur T sur le clavier et obtenez le clic textuel sur une toile et commencez à écrire. Alors écrivez vos notes ici et regardons, ayez cette tuile à cela. Ceci est blanc et la couleur dans cette tuile du texte est boulon de corps. Alors faisons ça. Donc, je vais sélectionner le texte, choisir le textile pour moi corps gras et changer la couleur à droite. Ok, un fait. Numéro 2 est l'auteur, donc je vais juste aller de l'avant et appuyer sur Option. Faites glisser une copie de ce texte ici, double-cliquez dessus et tapez AUT. Got a UTI est votre auteur et il a un textile de corps normaux. Donc, je vais sélectionner ceci et changer cette tuile pour le corps normal. Ok, il y a aussi un trait d'union devant l'auteur, alors allons-y et faisons-le. Oups, pas ça, juste ça. Ok, super. Maintenant que nous avons ceci, nous pouvons les regrouper dans un cadre. Comment mettre quelque chose dans un cadre ? Encore une fois, vous les sélectionnez, appuyez sur Maj a et D sont à l'intérieur d'un cadre maintenant, qui est l'image cinq. Figma a automatiquement donné ce principal. Double-cliquez dessus et renommez-le en TOP, haut et appuyez sur Entrée. D' accord, jusqu'à présent, si bien. Maintenant, regardons le rembourrage qui est, qu'il a, il a un rembourrage de 32 unités sur toutes ces hauteurs. Donc, je vais sélectionner le cadre, aller ici en cadeau avec 32 et tous les côtés. La prochaine chose que je vais faire est de lui donner une couleur de fond, qui est bleu 0 comme mentionné ici. Alors donnons-lui une couleur de fond de bleu, 0, génial. Et qu'est-ce qui reste d'autre ? Ok, cependant, l'espacement entre votre texte d'éloge et les trois textes est de huit. Alors, comment pouvons-nous nous assurer qu'il est huit peu sélectionner ce cadre, aller à l'espacement entre les éléments et le changer à huit de quatre. Donc maintenant, si je vais de l'avant et cliquez sur l'un de ces appuyez sur Option et survolez que d'autres. Vous pouvez voir que l'espacement entre eux est de huit. Ok, super, bien. Et maintenant regardons les coins arrondis. Donc, tous les coins arrondis sont de huit pixels ou huit unités. Mais, mais notez que dans la partie supérieure, seuls les coins supérieur gauche et supérieur droit ont un rayon arrondi, alors que le bas droit et le bas gauche n'avaient pas cela. Nous allons donc aller de l'avant et nous assurer que c'est aussi le cas ce que je crée ou lorsque nous créons ensemble, si vous suivez. Donc, si vous voulez donner différent, si vous venez d'aller de l'avant et appuyez sur huit ici et le rayon de coin arrondi, il l'appliquera aux quatre coins. Mais si vous vouliez le diviser comme s'il voulait donner différents coins, rayon différent, vous pouvez aller de l'avant et cliquer sur cette icône juste ici il est dit coins indépendants. Et passons en bas à droite et en bas à gauche, d'accord, à 0. Alors, comment puis-je savoir que c'est en bas à gauche et en bas à droite ? Ces deux boîtes ? Eh bien, si vous passez la souris sur eux, vous pouvez le voir et même dans cette icône juste ici, cela représente le coin auquel nous avons affaire. Donc encore, jusqu'à présent, si bon. Nous avons notre top hot presque prêt. Ils ne feront que chose dont nous avons besoin pour nous assurer qu'il redimensionne correctement. Donc je vais y aller, je vais aller de l'avant et l'étirer et voir la largeur ou la dimension des textes qui l'intérieur. Donc encore une fois, il y a encore petit, ils n'ont pas répondu au redimensionnement. Donc, sélectionnons les deux et modifions leurs contraintes de redimensionnement à partir du contenu HUD pour remplir le conteneur. Et maintenant que nous allons de l'avant et que nous le redimensionnons, vous voyez que la largeur du texte change également. Donc, ici, on en a fini avec cette partie supérieure. Maintenant, passons à la partie inférieure. Donc encore une fois, nous avons ce triangle juste ici, que je viens de sauver ici pour vous. Donc je vais aller de l'avant et appuyer sur Option et faire glisser une copie. On va en avoir besoin au lit. Alors je vais le laisser ici. Il est appelé plat par le fait, et le panneau des calques. Encore une fois, je vais aller de l'avant et le laisser ici. Et si vous voyez dans le composant fini, nous avons le triangle, nous avons le rabat. Mais il y a aussi, il y a aussi un peu d'espacement entre ceux-ci. Vous voyez cet espace juste ici. Il s'appelle, il n'est pas appelé comme a une hauteur de 16 ici et il s'étend ici et va pendant 16 ans. Donc on va aller de l'avant et faire ça. Mais tout d'abord, faisons cette petite partie, cette vraie partie qui contient le travail pour et le nom de l'article ou du cours. Donc encore une fois, je vais aller de l'avant et appuyer sur T et écrire, lire 104, et voyons les textiles pour ça. Ok, c'est un corps semi-gras et il a une couleur blanche. Alors je vais aller de l'avant et faire ça. Donc, je vais sélectionner cela acheté un semi-gras et une couleur de blanc. Ok, Donc je pense que j'ai oublié un n ici, donc juste aller de l'avant et écrire n. Ok, alors je vais aller de l'avant et faire glisser une copie de celui-ci sur et taper le nom de l'article est Slash cours. Alors allons-y et faisons-le. Nom de l'article. Slash courts et le textile pour elle est corps normalement. Sélectionnez-le et donnez-lui le textile de la normale. D'accord, bien. Et l'espacement entre eux est 0. Encore une fois, pour m'assurer que c'est le cas, je vais les sélectionner tous les deux. Fresh décalage un, les mettre dans un cadre auto I. Allez-y et lisez le cadre pour, disons les détails du bas à ce sujet parce que ce n'est pas la partie inférieure entière, c'est juste la partie des détails. Ok, Donc je vais le sélectionner à nouveau, le cadre des détails du bas, regardons qu'il a un rembourrage de 24 sur la gauche et la droite et 16 sur le haut et le bas. Comment on fait ça ? Nous allons de l'avant et cliquez ici. Nous sélectionnons l'une des quatre cases ici et commençons à écrire les valeurs de remplissage. Donc 16 en haut et en bas en 2004 à droite, à gauche. Que diriez-vous de ça ? Ok, et il a une couleur de fond de gris 0. Alors donnons-lui une couleur de fond de gris 0. Et maintenant, nous devons nous assurer qu'il a huit unités, huit points, huit pixels, coins arrondis pour le bas à gauche et le bas à droite et 0 pour le haut à gauche et en haut à droite. Donc, je vais sélectionner ceci, aller de l'avant et diviser. Je veux dire, pas vraiment divisé mais glyphe ici, je l'imagine comme des rayons de retournement de différents coins. Donc, chaque fois que vous voulez l'appeler, donc en haut à droite est 0 bon, haut à gauche est 0 bon. Et en bas à droite devrait être huit, et en bas à gauche devrait être huit à nouveau. Alors je vais cliquer dessus. Et ça a l'air très bien comme c'est censé le faire. Et encore une fois, Allons-y et assurez-vous que c'est le texte qui se trouve à l'intérieur du cadre a les contraintes de redimensionnement, donc les conteneurs remplis de sorte qu'il remplit tout comme tout est redimensionné. Alors oui, plutôt bien. Ils se redimensionnent correctement. Maintenant, nous avons fini avec les pièces dont nous allons avoir besoin pour la partie inférieure, d'accord, donc la prochaine chose que nous voulons nous assurer est qu'il y a cet espacement autour de ceci, autour de ces petites parties inférieures. Comment on fait ça ? Nous le faisons en prenant ce cadre et en le plaçant dans un autre cadre. Maintenant, si vous avez regardé tout le parcours jusqu'à présent, vous savez que nous pouvons toujours imbriquer des cadres à l'intérieur des cadres. C' est ce que nous allons faire ici. Nous allons sélectionner ce cadre et appuyer à nouveau sur Maj a pour imbriquer cela dans un autre cadre de mise en page automatique. Donc, je vais appuyer sur Maj a. Et maintenant c'est un autre aperçu et autre image auto ionique, et je vais appeler ce trame grabber et w sont un PPR. Et encore une fois dans le panneau des calques pour vous assurer qu'il y a le rappeur et qu'il y a les détails du bas. Maintenant, pour vous assurer qu'il n'y a que 16 pixels de rembourrage sur la gauche et le haut où vous allez aller de l'avant et sélectionnez le cadre wrapper. On va y aller et cliquer ici. Cadeau haut, un rembourrage est 16, à gauche à flexion un fond 16 et à droite à un panoramique 0. Si vous allez de l'avant et regardez de près ça, vous voyez qu'il y en a 16. Les pixels sont un remplissage de 16 points sur la gauche. En haut. Et la prochaine chose que nous allons faire, c'est que nous allons prendre ce triangle ou un appartement. Je vais le placer à côté du cadre d'emballage, sélectionner les deux et les mettre dans un autre cadre de mise en page automatique. Comment on fait ça ? Sélectionnez les deux à nouveau, appuyez sur Maj a, mon maintenant, vous pensez que le raccourci Shift jour est juste foré profondément dans vos têtes, ce qui est bon, ce qui est agréable. Donc encore une fois, nous avons je pense qu'ils les ont correctement mis. Je pense que j'ai fait un peu de folie ici, donc je vais appuyer sur la commande Z une ou deux fois, puis repartir et nous allons aller de l'avant et les replacer dans un cadre. Donc, sélectionnez les rabats comme le jour de redshift de l'emballage. Et maintenant, ils ont une vision d'un cadre différent. Et je vais aller de l'avant et nommer ce cadre B O T, T O M, en bas. D' accord. Et ce que ce cadre a besoin comme un remplissage zéro, grade et un espacement de 0 entre les éléments parce nous voulons juste que cela et le cadre de rappeur collent ensemble. Et à cause du cadre d'emballage est juste de l'espace vide. Il y aura 16 pixels de remplissage ou 16 pixels d'espace entre eux. Donc, je vais sélectionner le fond et changer. Tu vois ce qui se passe quand je fais ça, quand je le fais traîner. Donc je vais le changer à 0. Donc, vous êtes là. C' est la partie inférieure. Maintenant, la dernière chose à faire est de sélectionner haut et le bas et de les assembler dans un autre cadre de mise en page automatique. Sélectionnez les deux, appuyez sur Maj a, et maintenant ils sont à l'intérieur d'un cadre. La seule chose que nous devons nous assurer est que l'espacement entre eux est 0. Bon, comme ça, nous allons nous assurer que la partie supérieure a une contrainte de redimensionnement horizontale du conteneur Phil pour qu'il remplisse tout. Et maintenant, si je le redimensionne, vous voyez que la partie inférieure ne redimensionne pas. Donc, allons-y à nouveau et assurez-vous qu'il a des contraintes de redimensionnement horizontales du conteneur Phil. Alors faisons ça. Ok, c'est un conteneur rempli. Et cette chose juste ici, ça devrait être une largeur et une hauteur fixes, et ce devrait être un conteneur de remplissage. Et encore une fois, je vais cliquer à nouveau deux fois souvent ce qui se passe est que les cadres imbriqués pour les éléments imbriqués ont une largeur fixe, des contraintes horizontales. Donc, même si vous avez défini comme quelque chose comme conteneur folklorique sur l'emballage, il ne répond pas. Vous devez donc double-cliquer, aller à l'intérieur et assurez-vous que tout ce que vous avez sélectionné, quel que soit le format que vous avez sélectionné a des contraintes de redimensionnement pour remplir le conteneur. Et maintenant, si je vais redimensionner et que vous voyez tout fonctionne bien. Et si je vais de l'avant et que je mets un tas de texte ici comme ça, et que tout bouge comme il est censé le faire. Très bien, c'est génial, c'est génial. Nous venons de terminer la création du composant ensemble. Et je pense que tout ce que nous avons appris jusqu'à présent dans le cours ne fait que convois ensemble dans cela. Nous avons vu comment nous pouvons créer n'importe quel nombre de cadres que nous voulons en déplacement. Et c'est génial à la fin, j'espère que vous êtes, vous avez suivi ça ou vous avez juste essayé créer ça par vous-même sans me regarder le faire d'une façon ou d'une autre. Et à la fin de cette vidéo, j'espère que vous avez un bon composant de mise en page automatique fonctionnel. Dans la prochaine, on va s'entraîner un peu plus. Ce sera un peu plus complexe que ce qu'on a fait ici. Un peu plus complexe et, vous savez, faites une pause. Passons maintenant au défi numéro 2, carte de jeu. 9. Défi 2 : cartes de jeu: Sarah Jones 1, vous appliquez à un tas de choses que vous avez appris et a fini par créer un bon composant d'interface utilisateur. On fait un peu très traditionnel par exemple, mais c'est ce qui le rend spécial, n'est-ce pas ? Et maintenant, il est temps de relever un défi aussi. Et voici ce que nous allons construire et défier numéro deux. Alors allez-y et assurez-vous que vous êtes à l'intérieur de la maîtrise de Figma, la magie de la bouteille de bière fichier de démarrage et à l'intérieur du défi de gagner page de carte. Maintenant, dans cette page, vous allez trouver trois cadres différents. quoi allons-nous nous concentrer ? premier est le milieu, qui est le composant final. Maintenant, ce composant est sorti d'un projet réel. Donc, en gardant cela à l'esprit que c'est, que c'est une partie d' un projet différent, tout autre. Ce composant n'utilisera pas les styles et les couleurs que nous avons utilisés jusqu'à présent dans le cours. Mais ce ne serait pas un problème dans la construction et reconstruction de ce composant parce que chaque partie de celui-ci, tous les textiles, les boutons, et toutes les autres parties de celui-ci sont moins morts ici. Alors passons rapidement sur le composant fini et voyons comment il fonctionne, d'accord ? Et ça, rien de hors de l'ordinaire ne se passe ici. C' est juste qu'il redimensionne la façon dont il est censé redimensionner. Et aussi, et aussi quoi ? Remarquez ce coup juste ici, à droite, cette ligne juste ici. Et remarquez comment il s'étire et se contracte en fonction de la taille actuelle. J' aime bien ça. Maintenant, il y a un tas de cadres de mise en page automatique qui composent cette carte et la fait se comporter comme elle l'est. Et, vous savez, avant de commencer, je veux que vous voyiez ce défi comme assembler une voiture avec seulement des pièces. Très bien, donc voici les pièces et nous mettons tout ensemble en un composant fini. Donc, avant de commencer, la dernière chose sur laquelle je voulais attirer votre attention est cette option Copy Properties qui est disponible dans Figma. Donc remarquez ce cadre juste ici. Il a de la couleur, vous savez, une sorte de coup de couleur Bagram sur les côtés et certains, certains aussi une ombre portée. Maintenant, répliquer cela est une sorte de travail de broyage en ce moment parce que nous avons affaire à des cadres de mise en page automatique. Il y a donc une option, vous savez, il y a une option pour copier directement les propriétés et les coller sur un cadre. Ainsi, par exemple, il s'agit d'un petit carré avec toutes les propriétés, les couleurs de fond, le trait, l'ombre, et tout ce qui est de ce grand cadre. Donc, quand vous avez le cadre final prêt, tout ce que vous pouvez faire est, disons que nous allons créer un cadre temporaire ici. Donc je vais appuyer sur F et le faire sortir. Et puis je vais aller de l'avant et cliquez dessus et allez-y et cliquez avec le bouton droit, Copier et coller, puis Copier les propriétés. Ensuite, je peux aller dans ce cadre et aller de l'avant et cliquer sur Coller les propriétés. Et juste comme ça, vous n'avez pas à vous soucier coins arrondis que je dois obtenir ou de quel défi et je reçois. Il peut juste être copié et coller comme ceci. Très bien, donc avec ça, je suis presque sûr d'avoir couvert tout ce qui est nécessaire. Maintenant à partir d'ici, vous pouvez travailler vous-même si vous le souhaitez, ou vous pouvez simplement me regarder et suivre pendant que je reconstruis ceci et que je n'oublie pas, sur le côté droit du composant final est aussi l'anatomie du composant, l'espacement entre eux, la couleur alors vous êtes censé utiliser dans toutes les valeurs qui vont avoir besoin. Alors ajoute moi les parcs, le dernier au milieu. Allons de l'avant et recréons ça. Et vous commencez par la première chose que je vais faire est de rendre la couleur de la toile un peu plus claire. Donc, ce que je veux dire par là, c'est les couleurs qui vont travailler, travailler avec pour ce composant de ces nuances comme de bleu n' ont pas un grand contraste avec la couleur de la toile. Voilà ce que je veux dire. Donc je vais aller de l'avant et créer votre petit rectangle juste pour vous montrer ce que je veux dire. Et la couleur est D2, E, F, F. Alors laissez-moi aller de l'avant et lui donner la couleur de D2, E, F, F. Et vous dites que ce n'est pas très visible sur cette toile. Donc, ce que je vais faire est avec Figma, quand rien n'est sélectionné sur le panneau de droite, vous avez l'option de couleur de fond et il ajustera l'ensemble de la couleur de Toile puis tour. Donc oui, je vais aller de l'avant et m'assurer que vous avez HSL est sélectionné et le format de couleur, et je vais augmenter la luminosité. Donc peut-être que certains comme ça, pas entièrement blancs mais plus proches du blanc. La couleur est F7, F7, F7. Et vous pouvez toujours le réinitialiser à E5, E5.5, qui est la couleur par défaut pour Figma Canvas. D' accord, donc comme j'ai commencé, la première chose que nous allons faire est que nous allons faire cette chose particulière, cette rangée juste ici, parce que c'est répété deux fois. Et la seule différence est du texte et de l'icône. Donc, ouais, commençons par ça et nous construirons le reste des éléments autour d'elle. Donc, pour construire cela, la première chose que nous devons faire est de faire glisser cette icône de rang ferme ici. Donc je vais aller de l'avant et le faire sortir de la toile. Donc aussi, puisque vous êtes, vous savez, vous travaillez avec ça et vous pourriez penser que, oh et si je gâche les choses et perds les éléments et leur état par défaut et les parties, eh bien, pas de problème. Je suggère de le faire, cliquez sur l'option de maintien de pièces et faites glisser une copie de celui-ci pour qu'il reste là comme une sauvegarde. Ok, donc maintenant encore, sur la bonne voie, la première chose que nous devons faire est de faire glisser cette icône. De quoi d'autre avons-nous besoin ? Nous avons besoin de deux champs de texte, et je ne suis pas vraiment des champs de texte avec deux réservoirs. Ce taux de succès et de tenter de faire de la publicité son correctement répondu au sous-texte dans un ici. Donc, au total, trois choses. D' accord, alors on y va. Voici le premier texte ici, le texte qui passe en dessous et le texte qui va sur les effets secondaires. Donc je vais juste les arranger dans l'espace comme ça, ok ? Ok, super. Et pour commencer, allons de l'avant et cliquez sur le centile et où vous tenez ces deux textes comme eux ensemble et appuyez sur Maj a pour les placer dans un cadre de mise en page automatique. Et maintenant il y a à l'intérieur d'un cadre. Et ce que nous allons faire, c'est nommer ce cadre, disons le contenu. Que diriez-vous de ça ? Appelons ça du contenu ou tu sais, ça s'appelait juste une info. D'accord. Voilà, tu y vas. C' est le cadre info et la prochaine chose que nous allons faire est de sélectionner toutes ces trois choses ensemble. Ce top 20 pour cent, cadre percentile et cette icône et les mettre ensemble dans un cadre de mise en page automatique. Alors allez-y et sélectionnez-les, Shift a et Figma déduire automatiquement que puisqu'ils sont disposés horizontalement, il leur applique une disposition de direction horizontale, au cadre qu'il y a à l'intérieur. Donc, je vais aller de l'avant et nommer ce cadre, disons contenu. Ok, super. Donc, le contenu a le numéro, qui est ce texte juste ici. Laisse-moi le changer en Stat. Encore une fois. Je vais juste appeler ça pile. Il s'agit du cadre d'information et il s'agit du cadre d'icône. Ok, cool. Et la prochaine chose que nous allons faire est de donner à ce cadre une couleur de fond à nouveau, la même couleur de fond qui est listée ici, qui est D2 E, F, F. Et pour donner à ce cadre de couleur de fond, tous les vous le faites, c'est de le sélectionner comme ça. Et regardez ici où il est dit Fill, cliquez sur cette icône plus et donnez-lui une icône et donnez-lui la couleur v2, e, 0, f, f. Très bien, nous y allons. Il a un, il a une couleur de fond maintenant. Et la prochaine chose que nous devons découvrir est, d'accord, quel est le rembourrage de tous les côtés ? Donc, le rembourrage de tous les côtés de cette rangée particulière est de 24. Alors donnons-lui un rembourrage de 24 sur les quatre côtés. Pour refaire ça, comme sur le cadre, allez juste ici et écrivez 24, ok ? Et aussi qu'il a un rayon d'angle arrondi de huit. Donc, je vais aller de l'avant et écrire huit ici et cliquer sur Entrée. Je ne l'ai pas fait, je ne l'ai pas fait référence aux nazis peut-être parce que je l'ai créé. Je me souviens de certaines valeurs. Bon, donc maintenant à l'intérieur de ça, je vais aller de l'avant et sélectionner à nouveau le cadre d'information et m'assurer que la différence entre eux, l'espacement entre ces deux éléments est 0 donc ils sont mieux emballés ensemble. Ok, gentil. Et aussi le top 20 pour cent, ce texte flotte sur le dessus. Ils ne sont pas alignés de façon centralisée. Donc, pour vous assurer qu'ils sont alignés centralement, cliquez dessus et choisissez ceci et maintenant ils sont alignés au milieu. D' accord ? Et maintenant, à propos du redimensionnement, voyons comment ils fonctionnent lorsque cette ligne est étirée horizontalement. Vraiment rien ne se passe parce que nous avons ce réglage d'emballage comme emballé. Allons de l'avant et choisissez l'espace entre. Et maintenant, si je redimensionne, vous dites tout, redimensionne et s'étire correctement. Mais encore une fois, le problème est que nous voudrions personne de bureau, liste thaïlandaise, info, cadre et icône pour coller ensemble et que ce texte à couler partir lorsqu'il est étiré. Donc, pour ce faire, pour m'assurer que ces derniers restent fixes, je vais aller de l'avant et sélectionner les deux. Et encore une fois, appuyez sur Maj a pour les placer dans un cadre de mise en page automatique. Et je vais appeler ce cadre, disons l'icône stat plus à ce sujet. Je vais l'appeler comme ça. Et nous allons aller de l'avant et nous nous assurerons que la différence entre eux, l'espacement entre les éléments est quelque chose de plus petit, ce qui est mentionné ici. C' est 16, 16, 16, cet espacement, donc retourner ici, donc je pense que ce cadre, changer l'espacement entre les objets, faire 16, il pleut, que vous entendiez peut-être courir à la salle de bain. Toujours rafraîchissant. Super. D'accord. Maintenant, oui, en revenant à ça, revenant à ça et en essayant de voir comment ça marche, ok, ça s'étire correctement. Vous dites, cela reste là où il est et l'icône StatPlus reste à gauche. Et la statistique, qui est ce nombre, reste sur la droite et s'étire correctement. Nous l'avons fait et nous allions en avoir besoin. Donc tu sais quoi, je vais juste aller de l'avant et le traîner ici pour qu'il soit plus facile de faire du panoramique encore et encore. Donc nous allons avoir besoin de deux d'entre eux. Le premier est le commerce de tête et le second est le percentile. Donc je vais aller de l'avant et maintenir l'option et faire glisser une copie hors de lui. Si vous travailliez sur un projet réel, ce que vous feriez réellement est de créer un composant à partir de celui-ci. Mais en ce moment, nous apprenons simplement à propos de la mise en page automatique. Donc je vais laisser le passé. Donc encore une fois, ce que nous voulons, c'est que ce texte ici soit le taux de succès, alors attrape IT RAT. Et les textes ici sont percentile, ce qui est génial, et le sous-texte pour le taux de succès est tenté par rapport à une réponse correcte. Encore une fois, appuyez sur T, cliquez ici et allez-y et écrivez-le. Tentative. Le verset dit correctement. ai répondu, OK, gentil. On a ces deux belles petites choses ici. Et encore une fois, tu sais quoi ? Comme ce sont, ces lignes sont horizontales et représentent une sorte de stat pour l'utilisateur qui joue le jeu. Donc je vais aller de l'avant et renommer ça en timbre ligne, ok ? Et je vais aller de l'avant et faire la même chose pour celui-ci juste ici, timbre Row. Bon, et maintenant nous devons remplacer cette icône juste ici. Et pour ce faire, je vais juste aller de l'avant et sélectionner cette icône et appuyer sur Commande C. Revenez ici. Sélectionnez cette phrase de cadre Commande V et vous savez, c'est juste l'organiser juste ici. Donc, je vais le faire glisser et le mettre là, sélectionnez cette icône, appuyez sur, Supprimer et bam, il est parti. Alors, voilà. On a déjà la statistique Ref. Et maintenant, ce que nous pouvons faire, c'est d'aller de l'avant et de les sélectionner tous les deux et de les assembler tous les deux. Et puis cadre de mise en page automatique, appuyez sur Maj a et appelez ce cadre estampillé lignes. D' accord ? Et la prochaine chose que je veux vérifier est qu' il s'étire correctement sur le redimensionnement horizontal. Donc pour tester que je vais étirer ce cadre mais rien ne se passe. Et encore une fois, pour corriger cela, sélectionnez le contenu à l'intérieur et modifiez leur contrainte de redimensionnement, contraintes de redimensionnement horizontales pour remplir un conteneur. Et maintenant, si je redimensionne tout ce cadre, tout ce qu'il contient redimensionne correctement. Super, on en a fini avec une partie. Et la dernière chose à faire avec ceci est de savoir quelle est la différence entre les valeurs y ou était un espacement entre eux, qui est H. Donc, je vais aller de l'avant et sélectionner le cadre des statues et changer ceci, l'espacement entre les éléments à huit . Tout droit, cool. Ensuite, je vais faire quelque chose de très simple est de créer ce bouton, ces deux boutons mais les ensemble dans un seul cadre. Je vais aller de l'avant et voir la différence entre eux. Je n'arrête pas de dire la différence, mais cela signifie la séparation, l'écart entre eux, qui est huit. Donc, ce que je vais faire est de prendre ces deux boutons, Maj clic pour sélectionner les deux et aide. Ok, je vais juste les traîner ici comme ça, non ? Et nous allons les mettre ensemble dans un cadre. Alors sélectionnez-les, appuyez sur Maj a pour qu'ils soient dans un cadre. Allez-y et nommez qui encadrent les CTA ou appelez les boutons d'action. Et puis je vais juste les positionner ici. La prochaine chose que je vais faire, c'est étirer ça comme ça. Mais là encore, vous voyez le contenu à l'intérieur de ce cadre ne répond pas à cet étirement. Sélectionnez donc les deux et allez de l'avant et modifiez leur contrainte de redimensionnement. Je l'ai fait encore et encore pour remplir le conteneur. Maintenant, ils ont montré redimensionné correctement. D'accord. Donc, c'est fait. Donc on en a fini avec ça et on en a fini avec ça. Maintenant, allons-y et faisons-le. C' était une partie calme et intéressante où cette ligne particulière ou ce trait s'étire dynamiquement. Donc, pour cette partie, nous avons besoin de 12344 choses différentes du cadre des pièces. Alors allons-y et attrapons-les. Donc je vais aller de l'avant et j'ai besoin de cette icône. Et puis je vais aller de l'avant et j'ai besoin de ce texto. Donc je vais mettre ça là. Et puis je vais aller de l'avant et j'ai besoin de ce truc, que j'ai appelé le mérite Count. Donc nous allons les prendre ensemble et, vous savez, ma facture, cette petite partie. Et une chose que j'ai oublié de sortir des cadres, sortir du panneau de pièces si ce petit coup là où il est ici. Donc je vais aller de l'avant et le sélectionner et le sortir et le placer juste ici. Ok, donc tu y vas. Alors que maintenant, une fois que nous avons les parties, que maintenant, quelle est la prochaine étape pour les assembler. Donc je vais aller de l'avant et laisser compter les mariés juste ici. Je vais aller de l'avant et laisser cette ligne juste ici telle qu'elle est. Je vais aller de l'avant et mettre ces deux-là ensemble dans un cadre de mise en page automatique. Donc, je vais les voir et je vais de l'avant et appuyez sur Maj a, juste comme ça. Et je vais aller de l'avant et encore, appelons-le ça, appelons-ça les infos mérites. Je nomme juste les couches. Cela n'a pas vraiment d'importance car le nom dépend du contexte du projet sur lequel vous travaillez. Donc, ne vous concentrez pas sur le nom, ce qu'ils signifient. C' est juste pour que les couches ne sont pas nommés cadre 93 ou forme 72 parce que je suis juste broie mes engrenages. Donc encore une fois, une fois qu'ils sont dans un cadre, Voyons voir la séparation entre eux, qui est de huit. Donc, il est fait aller de l'avant et assurez-vous que c'est le cas. Donc encore une fois, la séparation entre les éléments, Passons de cinq à huit et oui, Allons de l'avant et changeons l'alignement au centre ou métal parce que c'est comme ça qu'il devrait être. Tout le chemin n'a pas d'importance parce qu'on ne va pas étirer ça verticalement. Ok, cool. Et maintenant, quand nous aurons ces trois parties, nous allons aller de l'avant et les faire glisser et les sélectionner et appuyer sur Maj huit pour qu'elles soient dans un cadre. Et encore une fois, je vais aller de l'avant et renommer le cadre. Fais quelque chose comme le mariage. D' accord, cool. Et la prochaine chose que je vais faire est de changer son alignement pour centrer sur les deux axes, x et y sont même ce travail n'a pas vraiment d'importance parce que nous allons aller de l'avant et changer cela de emballé à l'espace entre. Alors allons-y et faisons-le. Changez cela à l'espace entre et maintenant quand je fais glisser et étire ceci, vous pouvez voir que cela fonctionne comme il est censé le faire, mais cette ligne ne change pas, sa largeur, reste telle qu'elle est et juste flottant au centre. Et pour changer cela, pour changer cela, vous sélectionnez la ligne ou vous sélectionnez un élément que vous souhaitez se comporter comme cette ligne dans n'importe quel projet sur lequel vous travaillez et modifiez sa contrainte de redimensionnement horizontale pour remplir le conteneur. Et une fois que le conteneur est rempli, le reste d'entre eux d'avoir une largeur fixe et une hauteur fixe ou contenu chaud ou que les données et étirer avec le cadre, avec le cadre du conteneur. Et si elle est étirée et encore, maintenant si je le redimensionne, vous voyez que la ligne s'étire comme elle est censée le faire, mais il y a cet écart ici et cet écart ici que nous ne voulons pas. Et cela est dû à l'espacement entre la valeur des éléments qui est actuellement définie à 31. Ce que nous pouvons faire est d'aller de l'avant et d'écrire 0 et d'appuyer sur Entrée. Et maintenant, regarde ça. C' est plutôt cool, non ? D' accord, alors, ouais. Et encore une fois, nous ne voulions pas vraiment que ce soit 0, si je me souviens bien, nous voulons qu'il soit 16. Alors allons-y et faisons-le 69. totalement oublié ça. Donc, et ainsi à 0 type et 16. Et on y va. Et nous allons encore avoir besoin de deux d'entre eux. Donc je vais tenir Option et le faire sortir. Et je vais, avant de les mettre dans un seul cadre, je vais aller de l'avant et faire les changements nécessaires qui sont ici et parier ici. Alors parie. Et la prochaine chose dont nous allons avoir besoin, c'est que nous avons besoin de ceci ou de lire, lire l'élément et maintenant les éléments bleus. Alors sélectionnez cette commande de cadre V et mettez-la juste là. Et puis je vais aller de l'avant et supprimer le bleu. Donc nous avons ces deux-là ensemble. Encore une fois, aller de l'avant et les mettre dans une seule image en les sélectionnant les deux et en appuyant sur Maj a, et je vais renommer le cadre 2 mérites. Ok, et allons voir quelle est la différence encore ? Quelle est la séparation entre eux ? Ça fait quatre. Allons donc de l'avant et assurez-vous que l'espacement entre les éléments est de quatre pour ce cadre. Et oui, c'est là. Nous avons une autre partie de la carte entière prête et nous allons juste nous assurer qu'elle répond aux étirements. Je ne vais pas relire les étapes. Vous savez déjà quoi faire pour vous assurer que le contenu répond au redimensionnement. Alors voilà, on l'a fait. Et la prochaine chose qui reste ici est de mettre cette icône, cette hauteur sur le côté gauche des mérites de ce cadre. Donc encore une fois, je vais aller de l'avant et faire glisser cette grande icône d'ici, mettre à côté de ce cadre, puis je vais aller de l'avant et sélectionner les deux et les mettre dans un seul cadre de mise en page automatique à nouveau en appuyant sur Maj a. Et je vais aller de l'avant et totalement hors de propos ce que j'ai appelé ça pour l'instant, mais donnons-le juste au niveau des détails. Ok, allons-y et voyons comment ça se redimensionne. Je vais aller de l'avant et le déplacer ici. Mais là encore, vous voyez que cela se déplace vers l'extérieur hors du cadre, alors que cela reste à l'intérieur. Mais ce n'est pas quelque chose que nous voulons. Nous voulons que cette chose échoue le conteneur et ne soit pas une largeur fixe. C' est donc une largeur fixe et c'est un conteneur complet. Donc, lorsque le cadre du conteneur, tout ce que tout est redimensionné, vous ne voyez que cette partie redimensionne l'endroit où l'icône reste telle qu'elle est, et c'est ce que nous voulons. Donc juste comme ça, on a fini avec 123 parties différentes de la voiture. La dernière partie est juste ici, qui est le débutant, vous connaissez le titre de la carte et ces petits points. Donc je vais aller de l'avant et sélectionner ces deux d' ici à partir du cadre des pièces et les faire glisser dehors. Et la prochaine chose que vous voulez faire est de les regrouper dans un cadre de mise en page automatique. Comment les assembler ? Sélectionnez les deux et appuyez sur Maj a. La première chose que je vais faire est de m'assurer qu'il est aligné au milieu et que l' espacement n'est pas emballé mais l'espace entre NY est que de nouveau, je vais itérer. Si je, si elle est emballée et je insiste sur le cadre, il reste emballé. Mais si c'est de l'espace entre un étirement et remplit le cadre comme un enfant, je vais aller de l'avant et renommer cette image de 81 à bas niveau. Froid. Et comme ça, nous avons toutes les parties de la carte prêtes. Et avant d'aller de l'avant et de mettre tout cela dans une seule unité, laissez-moi aller de l'avant et revenir au composant final et regarder le comportement de la carte quand elle est étirée verticalement. Ok, donc à nouveau. Cette partie entière, la partie supérieure reste emballée comme jamais, comme le CDA est, ces deux boutons suivent effectivement le bas de la carte et étirent et flottent à la fin. Donc, cela devrait donner une idée claire que l'emballage que nous allons utiliser sur cette carte entière est un espace entre plutôt que emballé. Mais avant d'aller de l'avant et de consolider toutes ces parties ensemble, les parties supérieures ensemble en un seul cadre, et pas seulement un cadre parce qu'il y a des valeurs d'espacement différentes entre celles-ci. Par exemple, l'espacement entre ce niveau supérieur et cette partie est de 24, ce qui indeces 40. Encore une fois, nous allons mettre ceci et ceci dans un cadre et mettre ce cadre et ces statues cadrent en un seul cadre. Ok, voilà ce que je veux dire. Alors allons de l'avant et commençons par ça. Donc, je vais faire glisser le niveau de cadre et le niveau de détail pour impressionner journée de quart les mettre dans un seul cadre et changer l'espacement entre les éléments à 24. C' est un cadre. On va aller de l'avant et l'appeler disons détail de niveau pour ces utiles. Que diriez-vous de ça ? D' accord ? Et puis je vais sélectionner ce niveau de détail complet et écrivains du personnel et mettre ces deux ensemble dans un cadre. Encore une fois, sélectionnez les deux, appuyez sur Maj a et modifiez l'espacement entre eux à 40, comme il est mentionné dans et non dans l'anatomie du composant. Et cette partie, je vais aller de l'avant et juste l'appeler ajouter top. D' accord ? Et maintenant, je peux aller de l'avant et sélectionner Top et CTA et mettre ces deux ensemble dans le cadre final. Donc Shift a, et c'est dans le cadre, et je vais renommer ça du cadre un T1, T2, encore une carte, non ? C' est le dernier wrapper. Et le dernier emballage, il a un rembourrage de 32 sur tous les côtés. Donc je vais sélectionner ça et aller au rembourrage et m'assurer qu'il est 32. Ok, et allons-y et donnons-lui une couleur de fond, des bordures et tout ça. Alors rappelez-vous dès le début de la vidéo, j'ai parlé des styles de copie ou des propriétés de copie. C' est le président en fragments. Je vais cliquer avec le bouton droit, aller à Copier Coller. Donc, je copierais les propriétés. Je vais aller de l'avant et revenir à ce cadre et aller de avant et cliquez à nouveau avec le bouton droit de la souris et sélectionnez Coller les propriétés. Et juste comme ça, j'ai tout le style appliqué. Ok, Dernière chose à être sûr, comme j'ai répété encore et encore dans le cours pour voir comment il se comporte quand il est redimensionné. Donc, lorsqu'il est étiré horizontalement, encore une fois, vous pouvez voir que ceux-ci ne répondent pas. Donc, je vais aller de l'avant et m'assurer que les cadres et tous les cadres imbriqués ont des contraintes de redimensionnement horizontales ou un conteneur de remplissage. Allons-y et faisons-le remplir le récipient. Et puis je vais aller de l'avant et faire ce conteneur rempli. Donc comme ça, faites ce conteneur rempli comme ça. Ok, c'est moi. Allez-y. Vous pouvez continuer à double-cliquer jusqu'à ce que vous arriviez à un cadre qui a fixé à lui et aller de l'avant et définir que pour remplir le conteneur, sélectionnez ceci et changez cela pour remplir le conteneur. Et maintenant, si je le redimensionne, vous dites qu'il redimensionne parfaitement horizontalement. Mais qu'en est-il du redimensionnement vertical ? Si je redimensionne ce mot vraiment il reste emballé. On ne veut pas ça. On donne IV. Nous allons aller de l'avant et changer cet espacement ou cet emballage en espace entre. Voilà, tu y vas. Et continuons et essayons de redimensionner et verticalement. Et il se comporte comme il devrait. Ok, et je sais que cette vidéo a stressé plus de 20 minutes, mais je voulais passer en revue toutes les étapes et expliquer toutes les étapes impliquées dans la création d'un composant d'interface utilisateur à partir de trames de mise en page automatique. Et le point que je voulais illustrer est que ce n'est pas que vous devez vous limiter à tout faire dans un seul cadre. Vous pouvez voir que le nombre d'images utilisées ici est, je pense que c'est bien au-delà de 10 et c'est bon. C' est bon. C' est tout ce qui fonctionne. Donc, vous savez, essayez d'utiliser tous les iframes autant que vous le pouvez. Parce que lorsque cette carte sera mise dans un réel, disons une page et la largeur de la page n'est pas quelque chose comme 587, mais je dis 340, donc, vous savez, il redimensionne et si c'est correctement au lieu de redimensionner chaque seule partie de cela et de tenir dans cet espace particulier de la page. Ou si la page est grande, alors vous pouvez l'étirer et elle s'adapte largement à la fin du graphique précédent. Vous pouvez aller de l'avant et adapter quelque chose comme ça. Donc c'est génial. Utilisez plus d'images et utilisez autant d'images que vous le souhaitez. Et j'espère que vous avez beaucoup appris jusqu'à présent dans le cours. Et à ce stade, nous avons fini avec qui la plupart des exemples et avec la plupart des défis. Le dernier, qui est un curseur osseux, qui discutera dans la vidéo suivante, n' est pas une exigence, mais c'est une utilisation farfelue de la mise en page automatique. Et c'est plutôt gentil si vous me demandez, vous savez quoi, je vous en dirai plus dans la prochaine vidéo. 10. Défi bonus : diapositives de mise en page automatique: D' accord, tu es toujours là, donc je vais faire en sorte que ça en vaut la peine. Vous savez ce qui est magique dans ces outils comme Fatma ou tout autre outil, c'est que vous ne pouvez pas anticiper la façon dont les gens vont utiliser les fonctionnalités, dans quelles permutations ils appliqueront les fonctionnalités et quelles choses nouvelles qu'ils va venir avec. Parfois, ces choses nouvelles, ces permutations de façons d'utiliser des entités sont appelées comme des hacks. Et souvent, ces hacks deviennent partie de la fonctionnalité de base, mettre en place un outil en bas de la ligne une fois que la tâche est ce que Rajit, un avocat de concepteur chez Figma, a fait avec la mise en page automatique et les curseurs, inspiré que j'ai décidé de lui donner un coup de feu et faire ce curseur Composé Feedback. Maintenant, c'est une partie d'un projet réel sur lequel je travaille. Et regardez ce que je peux faire est que je peux ajuster la quantité que le curseur est rempli en utilisant mise en page logique et tirer le prototype vers être plus qu'une simple maquette de faible fidélité. Nous allons utiliser exactement les mêmes techniques que j'utilise ici avec tout cela pour créer cette petite chose, le curseur dans lequel le montant que le bouton a été traîneau peut être ajusté en utilisant l' option d'espace entre les éléments dans la bande de mise en page automatique à droite, juste comme ça. Maintenant, j'ai fait de ce curseur un composant. Vous pouvez dire qu'en regardant le panneau des calques et cette icône juste ici, il était indique qu'il s'agit d'un composant. Et tout cela sur la droite sont des instances de ce composant et des instances que vous pouvez remplacer quelques choses comme nous l'avons vu, mais la possession et la dimension ne font pas partie d'entre elles. Donc si ce n'était pas pour le hack, et j'utilise le hack dans les citations aériennes. Si cela n'utilisait pas le HAC pour positionner le bouton, devra détacher l'instance comme ça. Vous pouvez aller de l'avant et détacher l'instance, ce qui signifie que cette chose particulière ne sera plus connectée au composant principal, devra détacher l'instance et ensuite déplacer les choses, ce qui est désordonné et laid. Ne fais pas ça. Au lieu de cela, utilisez la mise en page automatique et voir comment même dans l'instance, chaque curseur peut avoir une position unique du bouton et donc et Phil unique, Je peux ajuster ce curseur à plein. Je peux prendre ce curseur et juste le déplacer vers la gauche comme ça. Et aussi une grande chose à propos de ce composant particulier est que lorsque vous suivez le long, si vous comprenez son architecture sans se confondre à aucun moment, ce sera un indicateur que vous avez compris la mise en page automatique vraiment, vraiment bien. Bon, d'accord, passons aux affaires et commençons à construire. Allons au fichier de démarrage. Maîtriser Figma, la magie du bégaiement automatique. Et à l'intérieur de la diapositive ou de la page bonus, vous trouverez ici la version finale du curseur. Vous pouvez jeter un coup d'œil dans le panneau Calques, jouer avec, faire ce que vous voulez. Mais pour moi, je suis plus prêt à commencer à construire une copie de ça juste ici. La première chose dont nous allons avoir besoin est une base qui est simplement un rectangle mince. Ce que vous voyez ici le rectangle gris, c'est la base. Alors dessinons ça, appuyez sur R pour que l'outil rectangle fasse glisser un rectangle, n'importe quelle forme, n'importe quelle taille, ce que nous allons ajuster dans un certain temps. La première chose qu'on va faire est de le rendre mince. Et je veux dire, trois pixels de haut. Alors, trois à côté de la peau. Et voilà. Et la prochaine chose que je veux faire, c'est lui donner des bouchons arrondis, non ? Totalement autour d'elle. Donc, je vais sélectionner le rectangle, or ou planer sur la partie rectangulaire arrondie, désolé, coins arrondis partie et juste faire glisser tout le chemin. Et maintenant, vous pouvez voir qu'il a un bouchons arrondis aux deux extrémités. C' est là que ça le fait. C' est la base. Donc, je vais le sélectionner, aller dans le panneau Calques et l'appeler base BAC. Et aussi je vais changer la couleur de celui-ci en gris, T2 et NMOS. C' est subtil et à peine visible, mais j'espère que vous pouvez le voir que c'est juste là. La prochaine chose dont nous allons avoir besoin est le rectangle de remplissage. C' est un juste ici, celui qui échoue. Bon, donc pour ça, je vais juste aller de l'avant et tenir l'option et faire glisser une copie de la base. Et la chose que je vais faire est de changer sa couleur de fond en bleu 0. Et aussi pour le remplisseur, nous ne voulons pas de rondeur sur le côté droit. Donc, je vais sélectionner ceci, aller à la partie coins arrondis. Il juste individuellement et changer en haut à droite. En haut à droite. Oui. Et en bas à droite à 0, cette ligne vers le bas pour que ce n soit comme, Hey, j'ai ce n a une coupe précise et l'extrémité gauche a des coins arrondis. Ok, super. C'est le remplisseur. Donc je vais aller de l'avant et aller dans le panneau Layers et type II LLC pour le remplissage. Et c'est tout. C' est tout pour ça. Alors je dis que nous allons avoir besoin de ce bouton juste ici, qui est juste un cercle de 16 x 16 pixels. Alors appuyez sur O et obtenez l'outil ovale ou l'outil de cercle, maintenez la touche Maj et faites glisser un cercle 16 par 16, et la couleur de fond bleu pour ok, cool. Allez dans le panneau Calques, nommez-le le bouton KNIME. Et la prochaine chose que nous voulons faire est de mettre la charge et le bouton dans un cadre automatique. Et comment faire ça à nouveau, vous les sélectionnez les deux, appuyez sur Maj a Et maintenant ce n'est pas réellement ce que nous voulons. Nous voulons que son alignement soit au centre comme ça. Et en ce moment, vous pourriez avoir l'impression que je vais à une bonne vitesse et ne pas tout expliquer en détail. C' est parce que nous discutons de la mise en page automatique depuis plus et est-ce que je le sais, vous savez, et donc laissez-moi naviguer. D' accord. Oui. Donc, les deux sont dans un cadre alcalin avec 0 espacement entre les éléments. Et la prochaine chose que je voulais m'assurer est qu'un bouton a des contraintes de redimensionnement de largeur fixe et une hauteur fixe. Et le rectangle de remplissage a une contrainte de redimensionnement horizontale du conteneur Phil de sorte que lorsque ce cadre est ajusté, vous voyez cela ? On dirait que le bouton glisse et que le rectangle remplit l'espace. Ça lui fait que tu vas au panneau Calques ? Et je m'assure toujours de le souligner. En lisant à partir de l'image un devrait être, appelons simplement les parties parce qu'il suffit de tenir les prises de cadre et les parties importantes du curseur. Ok, maintenant pour le trach, maintenant je veux que vous fassiez attention à partir de maintenant. La prochaine chose dont nous aurons besoin, c'est qu'il nous faudra un cadre. Bon, donc je vais aller de l'avant et sélectionner la pièce pour que je puisse voir que c'est une dimension. Je vais appuyer sur F sur mon clavier pour obtenir l'outil de cadre de sorte que lorsque je fais glisser un cadre est créé. D' accord ? Et je vais aller de l'avant et m'assurer que le cadre est de la même hauteur que le cadre des pièces ici. Ce cadre que nous venons de créer, nous allons juste le laisser avoir une couleur de fond blanc pour l'instant. On va le faire disparaître plus tard, mais pour l'instant, vous savez, juste ici, on va s'assurer qu'ils sont de la même hauteur. Encore là ou pas. J' ai besoin de l'agrandir un peu. Donc maintenant, il fait 16 pixels de haut, pixels de haut, et même le cadre des pièces mesure 16 pixels de haut. Je vais aller de l'avant et sélectionner ce cadre que nous venons de créer, et je vais l'appeler, ne supprimez pas parce que ce sera une partie importante de l'engin entier. D' accord. Je suis juste en train de dire que nous avons ce point parce que je suis tellement excité que cela a quelque chose à comprendre par moi-même. Eh bien, 60 pour cent tout seul, donc je suis excité à propos de ça. Eh bien, nous allons sélectionner le cadre des pièces et le cadre que nous venons de créer. Et on va aller de l'avant et les mettre dans un cadre de mise en page automatique. Sélectionnez donc les deux, appuyez sur Maj a, et assurez-vous que l'espacement entre les éléments est 0. Maintenant, pour les contraintes de redimensionnement, pour les contraintes de redimensionnement, je veux que le cadre de pièces, le cadre de mise en page automatique d'analyse ait rempli la contrainte de conteneur. Et je veux que ce cadre ait une largeur fixe. D' accord ? Maintenant regardez ceci quand je sélectionne le cadre, le cadre que nous venons de créer et ajuster l'espacement entre eux, vous voyez que l'espacement est augmenté et diminué. Mais puisque le cadre des pièces a, les contraintes de redimensionnement sont remplis conteneur, il remplit l'espace qui est laissé, donc ceci est fixé, donc celui-ci être affecté. Cet espace ici est flexible, qui est en cours d'ajustement et n'importe quoi, peu importe. D' accord. Cet espace ici est en cours d'ajustement. J' ai donc sélectionné le mauvais cadre et juste pour qu'il y ait de l'espace juste ici entre ces deux choses comme étant ajustées et quel que soit l'espace restant comme étant rempli par le cadre des pièces parce qu'il a les contraintes de redimensionnement. Alors, remplissez un conteneur, ok, tout a dû commencer à tomber ensemble maintenant et j'espère que vous arriverez à ce moment. Maintenant, la prochaine chose que je voulais faire est de sélectionner cette route de trames ici. On n'en a pas vraiment besoin. On va le rendre aussi mince que possible. Alors allez à la largeur, réglage de la largeur juste ici, et je vais aller de l'avant et lui donner une largeur de 0,05. Demandé alors comme nous le pouvons. Et la prochaine chose que nous allons faire pour le faire disparaître complètement, c' est de se débarrasser de tout remplissage qu'il a. Donc maintenant ce cadre juste ici a juste ceci, ce cadre de pièces particulières. Et si j'ajuste l'espacement entre les éléments de cette RAM, vous voyez ce curseur s'ajuste, ce qui est cool. Et je vais aller de l'avant et sélectionner ce cadre mettant fin à ce cadre juste là. D' accord, donc nous saurons dans un état sauvage pourquoi j'appelle ce cadre ajuster ça. Maintenant, juste ici, juste ici, on a juste le curseur, on n'a pas la base. D' accord ? La prochaine chose que nous voulons faire est de prendre l'ajustement, ce cadre juste ici et cette base et de les mettre ensemble dans un cadre, pas un cadre propre de manière optimale, juste un cadre. Donc, ce que je vais faire, c'est tout d'abord, faites glisser la base et assurez-vous qu'elle est presque la même largeur que cette justice. Et puis je vais aller de l'avant et déplacer le curseur un petit sac en augmentant l'espace entre les objets. Rappelez-vous qu'il y a un encadré juste ici et nous ajustons cet espace juste ici. Donc je vais aller de l'avant et ajuster ça et le déplacer un peu en arrière. Et puis je vais aller de l'avant et sélectionner ça et juste ce cadre et flèche vers le haut pour vraiment l'ajuster, juste sa position. Donc, je vais et continuer à appuyer jusqu'à ce que je l'ai presque aligné avec le, avec le rectangle de base. La prochaine chose que nous allons faire est que nous allons sélectionner les deux et appuyer sur le raccourci Option Command G ou cliquez avec le bouton droit de la souris et sélectionnez la sélection d'image. Et maintenant, c'est tout le cadre. Je vais aller de l'avant et renommer ceci du cadre un à curseur. Donc je vais aller de l'avant et m'assurer que tout est centré verticalement. Donc, si vous sélectionne quelque chose à l'intérieur d'un cadre, à l'intérieur d'un cadre normal et cliquez sur cette icône pour le centrer verticalement. Il va l'ajuster par rapport à ce cadre particulier. Donc je vais aller de l'avant et m'assurer que tout est bien centré et vertical. Donc je suppose qu'ils le sont. Et maintenant que dit que nous avons le curseur, nous avons le curseur juste ici, juste ici, C. Et à l'intérieur du curseur, si vous avez joué autour et regardé autour dans le fichier final, vous savez ce que l'intérieur du cadre de curseur nous avait juste ceci que nous utilisons pour ajuster, nous utilisons pour ajuster combien le curseur a fente. Et de même dans ce cadre juste ici qui vient de créer, nous avons un ajustement de ce cadre avec lequel nous pouvons ajuster la position du bouton. Et c'est génial. C' est génial. Slider est fait comme une vérification finale. Nous voulons nous assurer qu'il redimensionne correctement. Donc maintenant, si j'étire le cadre, rien ne se passe. Et pourquoi c'est ça ? J' espère que vous pouvez l'inclure. Il le fait parce que les enfants du cadre, les choses à l'intérieur, n' ont pas les contraintes de redimensionnement appropriées. Par exemple, la base vient de quitter. Nous voulions mettre à l'échelle car elle est redimensionnée horizontalement. Et de même pour l'ajuster ce cadre, nous voulons qu'il soit mis à l'échelle, l'ensemble du cadre est ajusté ou redimensionné horizontalement. Donc, en ce moment, vous voyez comment cela fonctionne bien, très sensible aux changements de taille. Et aussi je peux aller de l'avant et jouer avec. C' est juste comme ça que tu dis. Et je sais ce que c'est. Je sais que c'est pour moi si je regardais de l'autre côté, tu sais, ce sera comme connaître l'astuce du magicien. Et je sais que ce n'est pas si excitant, mais plus que tout, vous apprendrez à exploiter capacités de mise en page automatique pour créer quelque chose de totalement farfelu et personnalisé. Et à quel point c'est génial ? La prochaine chose que vous pouvez faire est probablement de se transformer en un composant et de l' utiliser où vous le souhaitez dans votre projet. Super. 11. Conclusion: Eh bien, c'est tout pour ce cours. Nous sommes passés de ne rien savoir sur la mise en page automatique dans la première vidéo à faire fonctionner à nos propres caprices et réunion et faire des choses qui est vraiment censé faire dans la dernière vidéo. Donc, nous avons passé beaucoup de choses et réapprendre beaucoup de choses entre les deux. J' espère que vous voyez à quel point la fonctionnalité simple peut être puissante, et j'espère que si vous ne l'utilisez pas déjà, vous le ferez. Maintenant, si vous avez aimé ce cours, vous pouvez aller de l'avant et laisser un commentaire ici sur Skillshare. Cela signifierait beaucoup disponible sur Twitter à Nashville, vous pouvez me trouver, me tirer un DM ou une demande de classe. Je suis ouvert à ça. Et avec cela, j'espère que je vous verrai bientôt dans une autre classe. Au revoir.