Figma pour les gens occupés : maîtriser la mise en page automatique

1. Bienvenue en cours: Figma est vraiment géniale, mais soyons réalistes Certaines de ses fonctionnalités, comme mise en page automatique, peuvent parfois sembler très compliquées, non ? Le fait est qu'une fois que vous vous y êtes habitué, cela change totalement la donne pour votre expérience Figma Et ce cours vise à rendre la mise en page automatique amusante et facile, quel que soit le point de départ. Tout le monde. Je m'appelle Adi, je suis un concepteur et développeur Web avec plus de dix ans d'expérience. Et j'ai créé de nombreux cours et tutoriels sur les sujets de Figma, de l' interface utilisateur, de l'UX Design, du développement Web, etc. Et d'habitude, mes cours sont très détaillés. Mais celui-ci est différent. Celui-ci est spécialement conçu pour les personnes occupées qui n'ont pas beaucoup de temps à perdre, mais qui souhaitent tout de même apprendre quelque chose de précieux. Ce cours est concis, mais regorge d'informations essentielles. Maintenant, à mon avis, mise en page automatique est la fonctionnalité la plus puissante de Figma Que vous créiez des sites Web, des applications ou tout autre contenu numérique. Cela peut considérablement accélérer votre flux de travail et rendre vos conceptions plus flexibles et réactives. Alors décomposons-le. Nous allons avoir six leçons principales, chacune se concentrant sur un aspect fondamental de la mise en page automatique. Nous allons commencer par apprendre comment ajouter une mise en page automatique à votre design et comment organiser et agencer efficacement les objets. Nous passerons ensuite aux cadres imbriqués, essentiels à la création de mises en page complexes Dans la troisième leçon principale, nous allons explorer ce que l' on appelle le flux de mise en page, qui dicte la direction et la position des éléments Nous verrons comment fonctionne l'espacement dans la mise en page automatique et comment utiliser les espaces et les rembourrages Ensuite, nous parlerons de l'alignement et des différentes manières de s'assurer que les éléments sont parfaitement placés. Enfin, nous examinerons les options de redimensionnement disponibles qui nous permettent de créer des mises en page dynamiques Maintenant, j'ai conçu ce cours pour qu'il soit très pratique. Chacune de ces six leçons principales comporte donc une partie théorique, que j'appelle bases, puis une partie pratique, que j'appelle application pratique. Et pour chaque application pratique, je vais recréer une mise en page à partir d'un vrai site Web Je commence par une capture d'écran de cette mise en page et quelques spécifications de conception que j'ai préparées au préalable. Ensuite, je vous montre étape par étape comment recréer à l' aide de la mise en page automatique En plus de cela, chaque leçon majeure comporte un devoir. Pour toi Et il y a six missions que vous pouvez effectuer. Elles sont destinées à vous aider à mettre en pratique ce que vous avez appris dans chaque leçon. En les faisant, vous comprendrez beaucoup mieux la théorie. De plus, vous aurez l'expérience pratique dont vous avez tant besoin. Et les missions sont similaires aux applications pratiques, avec une grande différence. J'ai également fourni des instructions écrites qui vous aideront à recréer la mise en page que j'ai sélectionnée Donc, si cela vous semble intéressant, je vous verrai en classe. 2. Projet de cours et de travaux: Bonjour, bienvenue dans le cours, laissez-moi vous parler des devoirs et du projet de classe. Il y a six missions que vous pouvez effectuer. Vous pouvez les trouver dans le fichier Figma lié aux détails du cours sous l'onglet Projets et ressources Maintenant, vous pouvez faire tous les devoirs fois que vous avez fini de regarder le cours ou un par un. Cela dépend vraiment de vous. Ma suggestion, faites chaque devoir après une leçon connexe. Par exemple, regardez la leçon sur l'espacement, puis effectuez le devoir sur l'espacement Maintenant, le projet de classe se déroule comme suit. Une fois que vous avez terminé toutes les leçons et les devoirs, votre tâche consiste à sélectionner une mise en page qui vous convient et à la recréer dans Figma en utilisant, bien entendu, la mise en page automatique C'est donc très similaire aux missions, mais cette fois, c'est à vous de choisir la mise en page, et je n'ai pas préparé de spécifications de conception. Tu devras les découvrir toi-même. Pour t'y aider. J'ai créé un fichier Figma que vous pouvez trouver en lien Il est mis en ligne sur la communauté de Figma et s'appelle Skillshare class project Il vous suffit de l'ouvrir pendant que vous êtes connecté à votre compte Figma, puis de cliquer sur le bouton «  Ouvrir dans Figma » Et cela va créer un doublon pour vous dans votre compte Figma Maintenant, dans ce fichier, vous trouverez la structure suivante. Nous avons essentiellement une section ici avec deux cadres, design de référence et les loisirs. Ce que vous devez faire est de prendre une capture d'écran de la mise en page que vous souhaitez recréer, coller dans ce premier plan de référence de cadre Vous aurez donc, vous savez, quelque chose à référencer. De plus, vous pouvez vous rendre ici en bas et mettre un lien vers le site Web à partir duquel vous avez pris la capture d'écran. Cette option est totalement facultative. Bien sûr. Et puis dans le deuxième cadre, où il est indiqué une recréation, c'est là que vous allez essentiellement recréer cette mise en page Une fois que vous avez terminé, sélectionnez cette section, intitulée Projet de classe Skillshare, et allez en bas à droite J'ai déjà préparé une règle d'exportation pour vous. Vous l'exportez au format PNG One X, puis vous le publiez en tant que projet de classe sur Skillshare Désormais, le partage de vos progrès a ses avantages. Tout d'abord, vous pouvez voir sur quoi travaillent vos camarades de classe, les mises en page qu'ils ont choisies et dans quelle mesure ils les ont recréées Deuxièmement, vous n'apprenez pas simplement de la théorie. Vous participez activement à un projet. J'adorerais que tu partages ton projet de classe avec nous. Et n'oubliez pas que si, à tout moment, vous vous sentez confus à propos d'un certain sujet ou si vous avez des questions, veuillez les poster dans l'espace de discussion, et je ferai de mon mieux pour vous aider. Cela dit, commençons par le cours. 3. Mise à jour Figma 2025 : ce qui a changé: Salut, tout le monde, c'est Adi du futur. Cette vidéo bonus est là pour vous aider à comprendre certains des changements que Figma a depuis que j'ai enregistré ce cours pour la première fois quelques années, Figma avait une apparence un peu différente, et depuis lors, elle a reçu plusieurs mises à jour à fois de ses fonctionnalités et plus particulièrement, de son interface Donc, si votre écran ne ressemble pas tout à fait au mien dans ces leçons, ne vous inquiétez pas. Regardons rapidement ce qui a changé afin que vous puissiez suivre le cours sans aucune confusion. Et juste pour être clair, ce cours est toujours tout à fait pertinent aujourd'hui. Les concepts de base n'ont pas changé, seulement la façon dont Figma présente certains de ses outils Nous allons commencer par le changement le plus notable, savoir la nouvelle interface utilisateur ou la refonte de l'interface utilisateur C'est ce qu'on appelle UI Three au moment de cet enregistrement. Et l'une des choses que vous remarquerez peut-être tout de suite, c'est que la barre d'outils est maintenant déplacée du haut vers le bas, ici même. Donc, en gros, nous avons les mêmes outils qu' auparavant, sauf peut-être pour la section. Je pense que cela a été ajouté ces dernières années. Nous avons toujours les outils de ligne principale, de polygone et de rectangle auxquels nous sommes habitués Nous avons l'outil Stylo, outil texte. Nous avons ici quelques nouveaux outils, tels que l'annotation et la mesure. Ils ont été ajoutés récemment. Certains outils d'IA sont disponibles via ce menu d'action ici. Et récemment, Figma a également introduit Figma Draw et le mode Dev, qui s'adressent aux développeurs, mais cela n'a pas vraiment d' importance pour cette vidéo Un autre changement est le fait que nous pouvons désormais réduire ces deux barres latérales en cliquant ici sur ce bouton de réduction de l'interface utilisateur Cela vous donnera essentiellement plus d'espace pour jouer. Et vous pouvez cliquer à nouveau sur ce bouton pour afficher les barres latérales de gauche et de droite. Nous avons désormais également la possibilité de réduire les couches en cliquant sur ce bouton ici. Donc, si vous avez ouvert des couches, c'est un moyen très rapide de tout réduire Et la plupart des modifications se sont effectivement produites dans la barre latérale droite de l'inspecteur. Permettez-moi donc de passer rapidement en revue quelques-unes d'entre elles avec vous. Et vous verrez que la barre latérale droite est maintenant un peu différente de celle de mes vidéos. Les commandes d'alignement sont positionnées un peu différemment Nous avons maintenant quelques options liées aux variables , une autre fonctionnalité introduite ces dernières années. Les opérations booléennes ont été déplacées dans ce menu ici, et je pense que le changement le plus important a probablement été apporté à la mise en page automatique Le panneau Auto Layout ressemble donc maintenant à ceci. C'était beaucoup plus simple les années précédentes, mais maintenant sa mise en page a changé. Il possède quelques fonctionnalités supplémentaires, comme par exemple ce mode grille qui a été introduit récemment. Nous avons maintenant la possibilité de régler la largeur et la hauteur d'un élément spécifique en fonction d'un contenu fixe ou d'un contenu intégré, ce qui redimensionnera essentiellement cet élément pour l'adapter à ses éléments secondaires Le conteneur de remplissage l' agrandira essentiellement pour remplir tout l'espace disponible. Nous avons également la possibilité d'ajouter des largeurs ou des hauteurs minimales et maximales, et les variables sont désormais incluses ici. La plupart du temps, certains de ces éléments sont déplacés , comme ce sélecteur d' alignement ici, l'espace ou l'écart entre les éléments est désormais positionné ici Et pour chaque valeur numérique que vous voyez ici, vous avez également la possibilité d' appliquer des variables dès maintenant En parlant de variables, je ne pense pas les avoir utilisées dans aucun de mes cours précédents car elles sont relativement nouvelles, mais elles sont accessibles en cliquant à l'extérieur ou en cliquant n'importe où sur votre canevas et en accédant simplement à la section des variables ici. Et les variables sont essentiellement un moyen de stocker des valeurs réutilisables telles que des nombres, des couleurs et même du texte. Et parmi tous ces changements, je pense que le principal changement auquel vous devez prêter une plus grande attention est celui de la mise en page automatique, car je pense que c'est le plus démodé. Maintenant, il est beaucoup plus puissant que, disons, l'Auto Layout de 2020 ou 2022, mais il fonctionne exactement de la même manière, vous n'avez donc pas à vous inquiéter à ce sujet. Ne vous inquiétez donc pas si votre écran est différent du mien. Les outils sont toujours là, et vous serez en mesure de terminer le projet de classe malgré tout. Maintenant, revenons au cours. 4. Ajouter une mise en page automatique à vos créations: La mise en page automatique est une propriété qui ne peut être appliquée qu'aux cadres. Cela ne fonctionne donc pas sur les groupes, cela ne fonctionne pas sur les sections, uniquement sur les cadres. Et vous pouvez l'utiliser pour des choses très simples, comme un bouton, dont la taille varie en fonction du texte qu'il contient, ou pour créer des mises en page complexes, comme celle-ci, qui est composée de plusieurs cadres de mise en page automatique, chacun ayant des propriétés différentes Nous allons également explorer les différents cas d'utilisation de la mise en page automatique dans les prochaines leçons et en apprendre davantage sur sa complexité. Mais pour l'instant, je veux vous montrer comment l'ajouter à vos designs. Donc, dans Figma, nous avons un cadre simple, et pour ajouter une mise en page automatique Tout ce que vous avez à faire est d'aller dans l'inspecteur, de cliquer sur le texte de mise en page automatique ici ou sur le bouton. Et c'est tout. Pour le supprimer, il vous suffit de cliquer sur le bouton moins comme suit. Vous pouvez également cliquer avec le bouton droit sur un cadre, puis descendre jusqu'en bas où il est écrit « Ajouter une mise en page automatique » ou utiliser le raccourci clavier Shift A comme ceci. Et pour le supprimer, vous devez faire la même chose, cliquer avec le bouton droit de la souris puis supprimer la mise en page automatique, ou utiliser l'ancienne touche A sur Windows ou l'option Shift A sur un MAC. Désormais, une fois que vous avez ajouté la mise en page automatique à un cadre, vous aurez accès à plusieurs options différentes. C'est ici que vous pouvez contrôler l'orientation de la mise en page. C'est ici que vous contrôlez l'alignement. C'est ici que vous définissez l' écart entre les éléments. Et ces deux cases sont destinées rembourrage horizontal et vertical, et ne vous inquiétez pas, nous aborderons tout cela de beaucoup plus détaillée dans les prochaines leçons Maintenant, l'un des aspects les plus intéressants mise en page automatique est la façon dont vous organisez ou réorganisez les éléments à l'intérieur du cadre Donc, par exemple, si je voulais déplacer cette première case vers la droite, il me suffit d'utiliser la flèche droite ou la flèche gauche, si je veux la déplacer vers la gauche. Si j'avais une mise en page automatique verticale. J'utiliserais les flèches haut et bas pour le déplacer ou pour changer sa position. Sinon, je peux cliquer et glisser avec ma souris et le déplacer où je veux. Et Figma déplacera cet élément, tout en conservant le même alignement et le même espacement entre les éléments que j'ai définis sur le cadre parent, ce qui est fantastique Désormais, vous pouvez également ajouter une mise en page automatique à des éléments individuels ou à des groupes d'éléments. Et je sais que j'ai dit mise en page automatique ne peut être appliquée qu'aux cadres. Cependant, Figma enveloppe automatiquement ces éléments dans un cadre s'ils ne sont pas déjà contenus dans un Voici donc ce que je veux dire par là. Nous avons une deuxième démo ici. Si je sélectionne ces deux éléments, ce ne sont que, vous savez, couches autonomes ici dans le panneau des couches, et je peux faire le Shift A pour créer un cadre. voyez, ils sont maintenant enveloppés dans un cadre ici, et la mise en page automatique est également appliquée à ce cadre. C'est cool, non ? Voici un groupe, comme vous pouvez le voir dans le panneau des couches, il s'appelle le groupe 87. Maintenant, si je fais le Shift A, et permettez-moi de vous montrer le contenu ici, deux boîtes. Si je déplace A alors que ce groupe est sélectionné, ce groupe est désormais un cadre avec, bien sûr, une mise en page automatique. Maintenant, vous vous demandez peut-être comment ajouter un élément à un cadre existant doté d'une mise en page automatique ? Eh bien, c'est aussi simple que de cliquer et de faire glisser. Donc, si je veux l'ajouter à ce cadre, ne me reste plus qu'à cliquer sur le glisser-déposer, et le tour est joué. Je veux le retirer. Cliquez et faites glisser le pointeur en dehors du cadre. Et Figma redimensionnera automatiquement ce cadre pour qu'il corresponde à la taille intérieure de ses enfants. Nous y reviendrons plus tard Sinon, je peux, vous savez, prendre cette commande X ou Control X, sélectionner le cadre et simplement le coller dans Command ou Control V. Maintenant, examinons une application pratique. Et pour cette leçon, nous recréons une mise en page de loom.com, et voici cette liste de quatre éléments Nous avons essentiellement une icône en forme de chèque et un morceau de texte. Dans Figma, j'ai donc recréé les éléments du texte. J'ai apporté l'icône. Commençons donc par le déplacer ici, en commandant ou en contrôlant D pour le dupliquer. Encore trois fois. Et puis sur la gauche, outre la capture d'écran, j'ai également ajouté quelques spécifications de conception, comme l'espace entre chaque élément de la liste, ainsi que l'espace entre l'icône et le texte. Alors faisons-le. Et je voudrais juste commencer en disant que ce type de mise en page sera incroyablement facile à créer avec mise en page automatique si nous utilisions toutes les fonctionnalités, comme la fonctionnalité GAP, la fonctionnalité d'alignement, nous n'en sommes pas encore là Nous allons donc utiliser minimum de magie de mise en page automatique, et nous ferons le reste manuellement, comme l'alignement et l'espacement D'accord ? Commençons donc par l'alignement. Nous allons d'abord sélectionner chaque icône et chaque texte, puis les aligner, excusez-moi. Alignez-les simplement au centre. Ensuite, je vais sélectionner le texte, maintenir la touche ultime ou option enfoncée et le curseur sur l'icône pour obtenir la distance qui les sépare. Ensuite, je peux utiliser les flèches droite ou gauche pour déplacer le texte vers la gauche ou la droite, un pixel à la fois À 29 ans maintenant. Je dois avoir 16 ans, donc je vais faire un, deux, trois, puis déplacer vers la gauche pour le déplacer de dix pixels à la fois, et maintenant je suis à 16 ans. Faisons de même ici. J'ai 46 ans, donc je vais faire le shift à gauche, à gauche, et maintenant j'ai 16 ou 30 ans, donc nous allons faire un, deux, trois, quatre, Shift, left, et maintenant j'ai 16 ans. Pareil ici. Tournez à gauche, et maintenant j'ai 16 ans. Génial. Maintenant, je vais sélectionner chaque icône et décaler le texte A. Shift A , Shift A Shift A. J'ai maintenant quatre cadres de mise en page automatique. Sélectionnez-les tous, alignez-les vers la gauche, et il ne vous reste plus qu'à régler l' écart de 24 pixels entre eux. Nous allons donc faire la même chose que précédemment, maintenir enfoncée la touche option ou ultime, le curseur sur l'élément ci-dessus et utiliser les touches fléchées pour aller sur place, comme ceci Et c'est ainsi que vous ajoutez une mise en page automatique à vos designs. Ensuite, tu as une mission. 5. Assignment : ajouter une mise en page automatique à vos créations: Maintenant que vous connaissez mieux mise en page automatique et que vous avez appris les bases, il est temps de vous entraîner. Et le devoir de cette leçon est assez simple. Vous allez recréer une mise en page depuis stripe.com. Donc, si nous descendons jusqu' en bas du pied de page du site Web, vous allez recréer cette liste d'entreprises avec trois liens Maintenant, il y a trois liens sur le site Web en direct. Lorsque j'ai reçu la capture d'écran il y a peu de temps, il y avait quatre liens, mais cela n'a pas vraiment d'importance. Voici donc la mise en page que vous allez recréer. Vous avez un titre, puis quatre liens. Et il y a un écart de quatre pixels entre eux. Je suis allée de l'avant et j'ai préparé les éléments du texte pour vous. Et aussi, j'ai inclus quelques instructions sur le côté gauche, que vous pouvez utiliser ou choisir d'ignorer, le choix dépend vraiment de vous. Ils sont simplement là pour vous aider. Et pour rappel, vous trouverez le lien vers le fichier de devoirs dans les détails du cours. Et c'est tout. Allez-y, terminez ce devoir, et je vous verrai dans la prochaine leçon, qui traite de l'imbrication des cadres de mise en page automatique 6. Imbriquer des cadres de mise en page automatique: Dans Figma, imbriquer des cadres signifie placer un ou plusieurs cadres dans C'est très simple et entièrement compatible avec la mise en page automatique. Alors laissez-moi vous montrer comment vous y prendriez. Nous avons ici deux cadres. L'un est un cadre horizontal, l'autre un cadre vertical, et les deux ont une mise en page automatique. Maintenant, si je voulais créer un cadre beaucoup plus grand contenant les deux, je peux le faire de différentes manières. Tout d'abord, le plus simple est de sélectionner ces deux cadres et d'appuyer sur Shift A. Et cela les ajoutera tous les deux à un cadre, ou devrais-je dire, à un nouveau cadre, dont la mise en page est automatique, comme vous pouvez le voir ici. Cela me permet de créer des mises en page beaucoup plus complexes en utilisant des cadres horizontaux et verticaux Une autre option serait de simplement prendre l'un des cadres et de le faire glisser dans un autre. Et vous pouvez le faire depuis le panneau des couches. Donc, si je veux placer celui-ci, le cadre vertical à l'intérieur du cadre horizontal, je peux accéder au panneau des calques ici, et je peux simplement cliquer et faire glisser le pointeur à l'intérieur. Alors maintenant, je n'ai qu' un seul cadre qui contient le cadre vertical et mes deux éléments. Dans ce cas, le cadre contenant des objets est un cadre imbriqué. Voyons maintenant une application pratique pour la nidification. Et pour cette leçon, nous recréons une mise en page à partir de get pixel snap.com Donc, si nous faisons défiler la page vers le bas, nous pouvons trouver cette zone juste ici où il est écrit de mesurer la distance, et c'est ce que nous allons recréer Maintenant, dans Figma, j'ai apporté une capture d'écran. J'ai fait quelques mesures pour combler l'écart entre le titre et la description, entre la description et ces fonctionnalités, disons-les. Et aussi la distance entre chaque entité et entre l' icône et le texte de l'entité. À présent, nous allons créer le premier cadre contenant le titre et la description. Alignons-les donc vers la gauche et définissons un écart de 14 pixels entre eux. Ainsi, sélectionnez à la fois le décalage A, première image terminée. Créons les fonctionnalités. Je vais donc déplacer le texte, déplacer l'icône. Sélectionnez le texte d'une icône, alignez-les au milieu et fixons une distance de 24 pixels entre les deux. Sélectionnez les deux équipes A. Faites de même pour l'autre. 24 pixels, sélectionnez le décalage d'alignement A. Nous avons maintenant une image, deux images, trois images. Créons cette partie ici un cadre avec les deux fonctionnalités. Nous allons donc sélectionner les deux ou, désolé, nous allons simplement les aligner d'abord sur la gauche. Assurez-vous d'avoir la bonne distance entre eux, et maintenant nous sélectionnons les deux décalages A pour créer le deuxième grand cadre. Maintenant, pour réunir le tout, il suffit de sélectionner ces deux cadres, les aligner vers la gauche et de définir l'écart de 42 pixels entre eux. Nous allons donc simplement sélectionner ceci et cela jusqu' à ce que nous arrivions à 42 pixels. Enfin, nous sélectionnons les deux, et nous effectuons le Shift A, ou nous faisons un clic droit pour une mise en page automatique. Il fait exactement la même chose. Alors maintenant, voyons ce que nous avons ici. Nous avons le cadre 96. C' est notre cadre principal. Ensuite, à l'intérieur, nous avons le cadre supérieur qui contient le titre et la description. Et puis le cadre inférieur. Cela a les deux caractéristiques. Et chaque fonctionnalité est un cadre en soi, qui contient l'icône et le texte. Alors, combien de cadres imbriqués avons-nous ici ? Eh bien, nous avons le cadre 94, donc l'une des fonctionnalités, c'en est une. L'autre fonctionnalité, c'est deux. cadre 95 est également un cadre imbriqué, car il se trouve dans le cadre plus grand Donc ça fait trois, et ça fait quatre. Nous avons donc quatre cadres imbriqués dans ce cadre principal. Et c'est ainsi que vous imbriquez les cadres de mise en page automatique. Ensuite, tu as une mission. 7. Assignment : imbriquer les cadres de mise en page automatique: imbrication de cadres de mise en page automatique vous permet créer des structures de conception plus complexes, et c'est exactement ce que je veux que vous pratiquiez dans cette leçon mission consiste donc à recréer une mise en page à partir de Timely App.com Si vous accédez au méga-menu des produits, vous trouverez cette première section que je mets en évidence ici, donc c'est ce que vous allez recréer Je suis allé de l'avant et j'ai ajouté tous les éléments pour vous dans Figma, y compris l'icône et les éléments de texte, et vous avez également quelques spécifications de conception, ainsi que des instructions ici sur le côté gauche, que vous pouvez choisir d'utiliser ou d'ignorer, le choix dépend vraiment de vous Maintenant, une fois que vous aurez fini de recréer cette mise en page, je vous verrai dans la leçon suivante, qui porte sur le flux de mise en page 8. Explorer le flux de mise en page dans les cadres de mise en page automatique: flux de mise en page fait référence à la manière dont les éléments sont disposés dans un cadre de mise en page automatique . Il comprend trois éléments. Direction, position absolue et ordre d'empilement du canevas. Commençons par la direction. Ici, j'ai un cadre avec trois éléments, qui sont placés les uns en dessous des autres, partant du haut vers le bas. C'est parce que la direction mon cadre de mise en page automatique est définie sur la verticale. Je peux toujours le changer en horizontal ou en rap en cliquant sur les autres boutons. Ainsi, une direction horizontale ressemblerait à ceci où les éléments sont positionnés de gauche à droite sur une seule ligne. Le rap est un peu spécial car Figma place automatiquement les objets qui ne rentrent pas dans des rangées supplémentaires Donc, si je redimensionne ce cadre et que les éléments de la première ligne ne correspondent plus, ils seront affichés sur la deuxième ou sur la troisième ligne Et Figma le fera automatiquement pour moi tout en gardant le même alignement et le même écart entre les éléments Pour résumer, une verticale affichera les éléments de manière verticale de haut en bas, dans une colonne, dans une colonne, quelle que soit la hauteur de l'élément parent Donc, si je le redimensionne, les éléments restent dans une colonne Hizontal, affiche l' élément de gauche à droite une ligne, quelle que soit la taille du cadre parent, et un emballage affichera ou déplacera les éléments sur des lignes supplémentaires s'ils ne correspondent pas lorsque je redimensionne le Passons maintenant à la position absolue. J'ai donc un cadre avec deux objets, et j'ai ajouté cette bordure blanche pour que vous puissiez voir les limites de ce cadre parent. Si je devais faire glisser cet élément à l'intérieur, le cadre serait redimensionné pour s' adapter à son contenu Si je sélectionne cet élément et que je déplace vers la gauche, la droite, le haut et le bas, Figma le placera automatiquement dans positions définies en fonction l'alignement et de l' écart entre les éléments Je ne peux donc pas déplacer cet élément librement où je le souhaite. Cependant, si je vais voir l'inspecteur et que je clique sur ce bouton qui indique la position absolue, deux choses se produiront. Tout d'abord, le cadre s' est simplement redimensionné pour correspondre au w et à la hauteur des deux éléments d'origine En gros, le cadre ne considère même pas cet élément rose comme faisant partie de celui-ci. Ensuite, je peux maintenant me déplacer. Je peux déplacer librement cet élément où je veux dans ce cadre. Et si je veux le déplacer en dehors des limites du cadre, je peux maintenir la barre d'espace enfoncée. C'est un conseil de pro pour vous. Et cela ne fera pas sortir la couche du cadre. Il suffit de le déplacer, de changer de position, en gros. C'est une position absolue. Enfin, discutons de l'ordre d'empilement de Canvas. C'est super facile à comprendre. J'ai ici un cadre de mise en page automatique avec trois cases, et j'utilise un écart négatif entre les éléments, j'y reviendrai plus tard pour les superposer. Ainsi, comme vous pouvez le voir ici, ils sont placés les uns sur les autres. Et si nous examinons la position dans la liste des couches, nous avons les cases un, deux, trois. La case 3 se trouve donc au-dessus de tout le reste. La boîte deux se trouve entre la boîte un et la boîte trois, non ? Visuellement. Maintenant, si je sélectionne ce cadre, que je vais dans l'inspecteur dans le panneau de mise en page automatique et que je clique sur les paramètres avancés, je peux modifier l' empilage du canevas de dernier en haut, qui est par défaut le premier en haut Cela signifie que maintenant la couche qui se trouve en premier dans le panneau des couches, qui dans mon cas est la case 1, va se trouver au-dessus. Ensuite, il sera suivi par les autres. Maintenant, la boîte trois se trouve derrière les deux autres boîtes. Passons maintenant à une application pratique. Et pour cette leçon, nous allons recréer une mise en page depuis airbnb.com Plus précisément, l'une de ces listes, qui inclut une image, des informations textuelles, des icônes et, dans certains cas, un badge favori d'un invité. Donc, de retour dans Figma, j'ai pris une capture d'écran de l'une de ces listes, et j'ai également ajouté quelques spécifications de conception J'ai également introduit dans l'image toute icône dont nous pourrions avoir besoin, et j'ai créé les éléments de texte. Commençons donc par recréer cette mise en page. Avec le badge préféré de l'invité. Il s'agit d'un cadre simple auquel nous ajoutons un arrière-plan, une bordure et une hauteur, et nous le contournons également. C'est donc assez facile à faire. Sélectionnons-le. Déplacez le pointeur A pour créer un cadre avec celui-ci. Nous allons régler sa hauteur à 26. Nous allons ajouter une couleur de remplissage. Et nous allons ajouter une bordure blanche d'un pixel. Et aussi, arrondissons les choses, comme ça. Ensuite, commençons par le texte ci-dessous. Nous avons donc la date de distance entre les tuiles alignée vers la gauche sans écart entre elles. Alors faisons-le. Date de distance du titre. Alignons-les vers la gauche et ne laissons aucun espace entre eux. Donc, une fois ces trois éléments sélectionnés, décalez A, et c'est notre première image. Et comme les objets étaient initialement positionnés les uns sur les autres, Figma est très intelligente à ce sujet, et elle nous a automatiquement indiqué la direction à la verticale Ensuite, nous avons le prix, qui se situe à six pixels des éléments ci-dessus. Alors faisons-le. Nous allons tout aligner, et nous allons le régler sur six pixels comme ça. Déplacez le pointeur A pour créer un nouveau cadre vertical. Ensuite, travaillons sur cette note ici. Nous avons donc une étoile, un écart de quatre pixels et le score de notation. Sélectionnons ces deux éléments. Alignons-les au milieu. Nous allons placer l'icône ici à quatre pixels, comme ceci. Ensuite, nous sélectionnerons les deux et nous ajouterons un cadre de mise en page automatique. Maintenant, déplaçons le texte vers le haut, et déplaçons également le cadre horizontal de notation vers le haut, les aligner sur l'image. Ensuite, nous allons sélectionner les deux, décaler A pour créer un cadre horizontal, puis sélectionner ce cadre et l'image, décaler A pour créer un cadre vertical. Maintenant, les deux derniers éléments que nous devons placer sont le badge favori de l'invité et l'icône en forme de papier. Ils se trouvent au-dessus de l'image, 12 pixels des bords. Comment s'y prend-on ? Eh bien, si nous saisissons ces éléments et que nous les déplaçons sur notre cadre principal, ils seront simplement positionnés en fonction de la direction du cadre, dans mon cas c'est vertical. Cependant, je peux les sélectionner, et je peux aller voir l'inspecteur et cliquer sur la position absolue. Et cela me permettra de déplacer librement cet élément dans le cadre de mise en page automatique. Et avec un petit coup de pouce de haut en bas. Nous sommes en mesure de les positionner correctement, en laissant cet écart de 12 pixels par rapport aux bords de l'image. Voilà donc notre cadre fini. Nous avons utilisé plusieurs techniques ici, en imbriquant une, et nous avons également créé des cadres de mise en page automatique verticaux, nous avons créé des cadres de mise en page automatique horizontaux et nous avons également utilisé le positionnement absolu sur ces deux éléments Et c'est à peu près tout pour le flux de mise en page. Ensuite, tu as une mission. 9. Assignment : explorer le flux de mise en page dans les cadres de mise en page automatique: Très bien, il est temps de vous entraîner à utiliser le flux de mise en page dans Figma Et votre tâche consiste à recréer une mise en page à partir de Notion. Il s'agit du site Web de Notion, et si vous faites défiler la page vers le bas, vous trouverez cette section. Vous allez donc recréer cette boîte, ainsi que l' image au-dessus de celle-ci De retour à Figma, j'ai bien sûr fourni une capture d'écran, quelques spécifications de conception, ainsi que les images brutes, texte et les icônes, ainsi des instructions que, comme d'habitude, vous pouvez utiliser pour obtenir un coup de main ou ignorer et tout faire vous-même Alors allez-y, faites le devoir, et une fois que vous aurez terminé, rejoignez-moi dans la leçon suivante, qui porte sur l'espacement. 10. Maîtriser l’espacement automatique de la disposition: Dans la mise en page orale, nous avons deux méthodes clés pour contrôler l'espacement. Et ce sont des lacunes et du rembourrage. Commençons par l'écart, plus précisément l' écart entre les éléments, et dans un cadre de mise en page oral, l'écart entre les éléments est toujours égal. Dans cet exemple, j'ai 56 pixels entre le premier et le deuxième élément, et encore une fois, 56 pixels entre le deuxième et le troisième. Et je peux facilement modifier l'écart en cliquant sur les poignées et en faisant glisser le pointeur ici, ou je peux aller dans l' inspecteur et saisir une valeur manuellement ici, disons 50 Je peux également effectuer des opérations mathématiques. Je peux donc faire 50 fois deux ou plus deux ou moins deux ou diviser par deux. Cela fonctionne tout de même. Je peux également cliquer et faire glisser cette poignée ici pour modifier l'écart manuellement. Maintenant, dans les cadres horizontaux et verticaux, j'ai une seule valeur pour l'écart. Toutefois, si mon cadre est configuré pour être enveloppé, j'ai des valeurs à la fois pour l' horizontale et pour la verticale. Et par défaut, l'écart vertical est le même que l'écart horizontal. Mais je peux annuler cela. Je peux avoir une valeur totalement différente, et je peux également les modifier d'ici ou d'ici. Et si je veux revenir arrière pour que l'écart vertical soit le même que l'écart horizontal, je peux simplement sélectionner cette suppression, appuyer sur Entrée, et ils redeviendront liés les uns aux Maintenant, l'écart peut également être une valeur négative. Revenons donc à une mise en page horizontale, et je peux simplement la faire glisser jusqu'à ce que j'arrive à moins, -100 Dans ce cas, mes objets et les éléments de mes enfants se chevauchent Ils sont empilés les uns sur les autres. Et je peux modifier cet écart depuis le Canvas ou depuis l'inspecteur, comme je vous l'ai montré précédemment. Désormais, l'écart peut également être réglé sur automatique. Et voici à quoi cela sert. Donc, en tant que valeur numérique , nous allons essentiellement définir le même espacement entre les éléments enfants quelle que soit la taille du cadre parent Mais si je le mets sur automatique soit en allant ici dans l'inspecteur, cliquant sur le menu déroulant et en sélectionnant Auto, soit en cliquant sur les poignées et en tapant automatique. Il fait exactement la même chose. Il utilise la plus grande distance possible entre les éléments, quelle que soit la taille du cadre parent. Je peux donc le redimensionner comme ça, et Figma ajoutera automatiquement la même distance entre tous les éléments Il le calculera à la volée. Vraiment très cool. Et il existe également un raccourci clavier très pratique pour basculer entre l' écart automatique et l'écart numérique Donc, si vous cliquez sur la case d'alignement ici et que vous appuyez sur x, cela va basculer entre une valeur automatique et une valeur numérique Passons maintenant au rembourrage. Et le rembourrage est essentiellement l'espace entre les limites d'un cadre de mise en page automatique et ses éléments secondaires Et pour illustrer cela, j'ai ajouté une bordure blanche à ce cadre de mise en page automatique. Vous pouvez donc voir où se situent ses limites. Et vous pouvez ajouter du rembourrage en vous rendant dans l'inspecteur, vous pouvez utiliser ces deux cases Pour ajouter un rembourrage horizontal, c' est-à-dire un rembourrage à gauche et à droite, ou un rembourrage vertical, c' est-à-dire en haut et en bas Vous pouvez également cliquer sur la case ici pour modifier le rembourrage de cette manière, ou vous pouvez utiliser les poignées présentes sur le Canvas, comme ceci, ou vous pouvez cliquer et saisir une valeur manuellement Vous pouvez également maintenir l'option ou l'ancienne touche enfoncée tout en cliquant sur ces poignées pour changer les deux côtés opposés en même temps. Cela signifie donc haut et bas ou gauche et droite. Si vous maintenez également la touche Maj enfoncée, vous pouvez changer les quatre côtés en même temps. Dans l'inspecteur, vous pouvez également saisir deux valeurs ici. Ainsi, par exemple, 5030, nous utiliserons 50 rembourrages à gauche, 30 Il en va de même pour le bas. Dix, 20, on en utilise dix en haut, 20 en bas. Et vous pouvez également cliquer sur Rembourrage individuel, ce qui vous permettra de modifier chaque côté à votre guise. Puisque nous sommes ici, vous pouvez également maintenir Ctrl ou Commande enfoncée et cliquer sur de ces cases pour modifier les quatre côtés même temps en saisissant la même valeur. Voyons maintenant une application pratique des PCGR et du rembourrage Et pour cette leçon, nous allons recréer une autre mise en page à partir d'un fichier get pixel snap.com Et nous allons recréer cette première partie de la section des héros, qui contient le titre, les deux boutons et le texte de remboursement sous 30 jours De retour dans Figma, j'ai apporté une capture d'écran et j'ai également fait quelques mesures J'ai créé quelques spécifications de conception. J'ai recréé les éléments du texte, et j'ai introduit l'icône que nous allons placer ici, dans le deuxième bouton En parlant de boutons, commençons par là, car un bouton est l'un des principaux cas d'utilisation de la mise en page automatique. C'est très simple à créer, et cela permettra à ce bouton de se redimensionner au fur et à mesure que le texte qu'il contient change Nous allons donc recréer ce premier bouton qui indique « à présent Et nous devons y ajouter un arrière-plan , un dégradé linéaire. rayon de bordure change la couleur du texte en blanc, et nous allons également modifier son rembourrage Commençons donc par sélectionner le bouton « d'ici maintenant ». Shift A pour l'ajouter à un cadre de mise en page automatique. Et nous allons ajouter le rembourrage nécessaire ici. Ou en fait, tu sais quoi ? Non, ajoutons la couleur de remplissage. Nous allons donc ajouter un dégradé linéaire ici. Permettez-moi donc de zoomer ici pour que vous puissiez voir ce que nous faisons un peu mieux. Nous changeons donc la première couleur qui sera F E 84 B. La deuxième, ce sera FA 4567 Puisque nous sommes ici, changez la couleur du texte en blanc. Et maintenant, changeons le rembourrage. Donc, si nous examinons les spécifications très rapidement, nous avons 30 pixels. Rembourrage latéral ou horizontal, et 14 rembourrages verticaux Nous allons également changer le rayon de la bordure à huit pixels, et notre premier bouton est maintenant terminé. Est-ce que c'était facile ? Et bien sûr, si je dois modifier le texte ici, maintenant, ou disons aujourd'hui, vous pouvez voir le bouton juste un redimensionnement pour l' adapter à l'élément de texte Passons au deuxième bouton. C'est très similaire, sauf que nous avons cette icône. Allons-y et tout d' abord, alignons-les. Shift A pour les ajouter tous les deux à un cadre de mise en page automatique, et nous avons une bordure à ajouter ici Faisons donc une bordure de deux pixels. Et ajoutons également le rembourrage nécessaire, soit 30 à l'horizontale, 14 à la verticale Nous allons changer le rayon d'angle à huit, et l' écart entre les éléments à dix pixels, juste comme ça. Et c'est notre deuxième bouton terminé. Passons maintenant au reste de la mise en page. Nous avons besoin d'un écart de 30 pixels entre ces deux boutons. Créons donc un cadre avec les deux. Sélectionnez les deux, déplacez A, puis modifiez facilement l' écart à 30. Maintenant, définissons un écart de 40 pixels entre le texte et les deux boutons. Nous allons donc les aligner approximativement au milieu. Sélectionnez à la fois le décalage A, et nous réglerons l' écart à 30 pixels. Et enfin, il nous faut oups, ça faisait 40 pixels Désolée. Enfin, nous devons définir un écart de 55 pixels entre le titre et ces autres éléments. Alors, sélectionnez tout, Shift A et 55. Allons-y. Ils étaient parfaitement positionnés. Ainsi, en utilisant les techniques d'espacement ainsi que d'autres techniques que nous avons apprises précédemment, nous avons pu recréer très rapidement cette Nous avons donc utilisé le rembourrage pour créer les deux boutons, et nous avons également utilisé la propriété GAP pour définir l'espacement entre tous les éléments de notre mise en page, ainsi que l'espacement entre l' icône et le texte à l'intérieur du Et c'est à peu près tout pour l'espacement. Ensuite, vous avez une mission. 11. Assignment : maîtriser l’espace de mise en page automatique: Cette mission consiste à maîtriser l' espacement automatique des mises en page , car vous travaillerez beaucoup avec les paddings et les GAPS. Votre mission consiste donc à recréer une mise en page à partir de cleanshot.com Nous parlons de cette première partie de la mise en page du héros, qui commence ici et se termine par ce texto de remboursement de 30 jours. Et pour vous aider, j'ai ajouté, comme d'habitude, la capture d'écran, quelques spécifications techniques et tous les éléments de texte. De plus, toutes les icônes sont préparées pour vous, ainsi que quelques instructions, ici sur le côté gauche, que vous pouvez choisir d'utiliser ou d'ignorer. Cela dépend vraiment de vous. Maintenant, allez-y et terminez cette mission, car elle est très, très importante. Une fois cela fait, rejoignez-moi dans la leçon suivante, où nous parlerons de l'alignement. 12. Atteindre un alignement parfait: Avant de commencer, il y a une chose importante que vous devez comprendre. En d'autres termes, vous ne pouvez pas contrôler l'alignement des objets enfants séparément. Au lieu de cela, vous définissez l'alignement sur le cadre parent. Et voici ce que je veux dire par là. Ici, nous avons trois éléments. Shift A pour les ajouter à un cadre de mise en page automatique. Et si nous regardons dans l'inspecteur, nous avons la boîte d'alignement. Actuellement, les trois éléments sont configurés pour s'aligner en haut à gauche. Et si je devais redimensionner ce cadre, et me permettre de vous montrer la situation dans son ensemble, en modifiant l'option d'alignement, nous déplacerions les trois éléments dans la direction que je souhaite, ou les alignerions comme je le souhaite Et je peux les aligner sur les quatre côtés. Donc en haut, à droite, en bas à gauche, en haut à gauche, en haut au milieu, en haut à droite, etc. Donc, si je veux qu'ils soient en plein milieu de mon cadre parental, fois horizontalement et verticalement. Je clique juste ici au milieu. Si je les veux à gauche, mais verticalement au milieu, ce que je fais. Tu as compris la photo. Mais l'idée est qu'ils bougent tous en même temps, qu'ils sont regroupés. Ils sont alignés en tant que groupe et je ne peux pas modifier l'alignement individuellement. Sur n'importe lequel d'entre eux. Je ne peux donc pas faire en sorte que ce premier élément soit aligné en haut à gauche et que cet autre élément soit aligné en haut à droite. Ça ne marche pas comme ça. Et vous disposez de ces neuf options d'alignement peu près en permanence, quelle que soit la direction dans laquelle votre cadre est réglé. Ainsi, même s'il est réglé disposition verticale, horizontale ou hum, p, vous avez le choix entre les neuf mêmes directions. Il y a juste des différences subtiles, par exemple, lorsque vous le réglez sur p, vous aurez une icône différente ici. Et les éléments, vous savez, seront alignés légèrement différemment car vous pourriez avoir affaire à plusieurs lignes. Mais la plupart du temps, vous aurez ces neuf options. C'est, bien sûr, jusqu'à ce que vous changiez l'écart entre les éléments de nombre à automatique. Ainsi, lorsque vous faites cela, lorsque vous passez en mode automatique, vous ne disposez plus de neuf options d'alignement. Vous ne disposez que de trois options d' alignement. Et selon l' orientation de la mise en page, celles-ci peuvent être soit au centre gauche ou à droite sur une mise en page verticale, haut au centre ou en bas sur une mise en page horizontale. Et si vous remplacez cela par wrap, vous savez, vous avez deux espaces, et les options d'alignement y changent également. Maintenant, à tout moment, vous pouvez cliquer sur cette case et utiliser les touches fléchées de votre clavier. Pour déplacer le point actif, pour ainsi dire. Donc actuellement, si j'appuie sur la droite, cela va le déplacer vers la droite. Si j'appuie de gauche à gauche, en haut en bas, vous obtenez la photo. Vous pouvez également appuyer sur WASD pour les déplacer vers les coins. Comme ça. Et avant de passer à une application pratique, je voudrais vous parler rapidement d'une autre option d'alignement, appelée ligne de base de texte. Ainsi, lorsque vous avez des cadres de mise en page horizontaux, prudemment, horizontaux uniquement ou uniquement horizontaux, vous avez la possibilité d'aligner les éléments de texte sur leur ligne de base Et qu'est-ce qu'une base de référence ? Eh bien, en gros, c'est sur cette ligne que se trouve le texte. D'accord. J'ai donc ici deux éléments de texte de tailles différentes. Et si je crée un cadre de mise en page automatique avec eux, je peux choisir de les aligner du haut vers le centre ou vers le bas, mais aucune de ces options n' est vraiment belle. J'aimerais aligner leurs bases de référence. D'accord ? Et vous pouvez facilement le faire en accédant aux paramètres avancés de mise en page automatique et en cochant cette case ici. Et cela permettra essentiellement d'atteindre cet objectif. Cela alignera la ligne de base du texte un sur la ligne de base du texte deux. C'est vraiment très pratique, et vous êtes sur le point de voir exactement un cas d'utilisation très intéressant pour cette technique. Passons maintenant à une application pratique. Et pour cette leçon, nous allons recréer une mise en page de kineticlabs.com Plus précisément, cette partie qui fournit des informations sur un certain produit. J'ai donc tout apporté à Figma. Comme d'habitude, nous avons la capture d'écran, ainsi que quelques spécifications de conception. Et j'ai également apporté toutes les images nécessaires. J'ai recréé les éléments du texte. Et je suis allée de l'avant et j'ai créé certains cadres, comme ce bouton ou cette pile d'étoiles, juste pour gagner un peu de temps. Cela dit, recréons la mise en page en utilisant les nouvelles techniques d'alignement que nous avons apprises aujourd'hui Commençons par le début avec cette partie. Je veux ma pile d'étoiles, un pixel d'écart, une note, écart de dix pixels, puis un lien vers les critiques, et tout doit être aligné au milieu. Faisons donc les étoiles, sélectionnons-les. Assurons-nous que l'alignement ici est réglé au milieu, et fixons l'écart à un. Et puis ajoutons les critiques. Sélectionnez les deux. Shift A. Et encore une fois, nous allons nous assurer que l' alignement est réglé sur le milieu. Et nous allons fixer l'écart à dix pixels. C'est donc notre premier cadre plus grand réalisé. Désormais, chaque fois que je crée ces mises en page complexes, j'essaie toujours voir les éléments présentant le même écart entre eux, puis je les regroupe dans un cadre de mise en page automatique Par exemple, les trois premiers éléments ma mise en page ont le même écart entre eux, 16 pixels. Prenez donc ces trois points, déplacez A, assurez-vous qu'ils sont alignés vers la gauche. Je vais définir un écart de 16 pixels. Passons à autre chose. Nous avons la liste ici. Donc icône et texte. Et nous avons un écart de huit pixels entre l'icône et le texte et un écart de dix pixels entre chaque élément de la liste. Alors introduisons les icônes. Répliquons cela. Amène l'autre. Ensuite, sélectionnez le premier, déplacez A, alignez-le au milieu, définissez l'écart. Faisons de même pour le second. Définissez l'écart et pour celui-ci. Ensuite, sélectionnez les trois, décalez A. Assurez-vous de les aligner vers la gauche et de définir un intervalle de dix pixels. C'est notre deuxième cadre terminé. Passons à autre chose. Nous avons le prix, puis le pack de 18. Il n'y a pas d'écart entre les deux, mais ils sont parfaitement alignés l'aide de la ligne de base, la ligne de base du texte. D'accord ? Sélectionnez donc ceci. Shift A, je vais passer à l'horizontale, cliquer ici et appuyer sur B. C'est le raccourci clavier pour activer et désactiver l'alignement du texte Et il ne reste plus qu'à combler cette lacune. Donc, c'est le cadre numéro trois. Ensuite, voyons voir, nous avons ce texte sur la quantité, ce qui est déjà fait, puis nous avons ces boutons. Nous avons donc des points positifs et négatifs. Chaque bouton a une taille de cercle de 48 pixels, et l'icône est placée exactement au milieu, puis nous avons un chiffre entre les deux et un écart de 16 pixels. Commençons donc par créer les boutons. Maintenant, ces icônes sont déjà des cadres, comme vous pouvez le voir sur le panneau des calques, et elles contiennent un vecteur à l'intérieur. Et comme ce sont déjà des cadres, nous pouvons ajouter une mise en page automatique. Horaire A. Et dans l'inspecteur, je vais juste changer de forme et de hauteur. Je vais modifier le rayon de la frontière 2100 pour en faire un cercle parfait. Ensuite, je veux m'assurer que l'icône est positionnée exactement au centre, je vais donc cliquer dessus. Enfin, je vais ajouter une bordure d'un pixel dF dF D F. Faisons de même pour le moins. Ensuite, nous allons prendre le moins et le chiffre. Sélectionnez les trois, décalez A. Assurez-vous de les aligner au milieu. Et nous allons également définir un écart de 16 pixels. Et c'est un autre cadre prêt à être utilisé. Ensuite, nous avons le bouton, qui est déjà créé, et nous devons encore travailler à la création de ces deux éléments ici. Donc icône, texte, texte de l'icône. Huit pixels entre les 230 pixels entre les deux plus grands éléments. Apportons l' icône. Comme ça. Et comme ça. Sélectionnez-les. Shift A, alignez-vous au milieu. Huit pixels, faites de même ici. Et maintenant, sélectionnez les deux décalages A, alignez-les au milieu et définissez un écart de 30 pixels. Nous avons maintenant terminé tous les cadres principaux. Il ne nous reste plus qu' à les rassembler et à définir le bon espacement entre eux. Commençons donc par le haut. Nous avons une première image, puis 18 pixels, puis cette deuxième section. Alors, sélectionnez-les tous et alignez-les vers la gauche. 18 pixels Ensuite, nous avons un écart de 22 pixels et le prix. Et ici, je vais vous montrer un truc vraiment cool. Au lieu de sélectionner les deux et de créer un autre cadre avec eux, juste pour que je puisse définir un plus grand écart. Je peux le déplacer dans le cadre principal, je peux le pousser vers le bas, et j'ai actuellement un écart de 18 pixels, et j'en ai besoin de 22. Je peux donc compenser les quatre autres pixels en ajoutant un haut rembourré à ce cadre. Donc ça se passe à peu près comme ça. Je sélectionne le cadre, je vais ici, et j'ajoute quatre pixels. Hein ? Cela va simplement ajouter quatre pixels de rembourrage au-dessus du texte du prix Et ces quatre pixels avec les 18 autres que j'ai à partir de l' écart entre les images principales me portent à 22 pixels. Cela vous permet donc de créer ces cadres de manière plus efficace et de ne pas les compliquer trop avec plusieurs cadres imbriqués C'est vraiment cool. Ensuite, nous avons un écart de 25 pixels jusqu'au prochain article, qui correspond à cette quantité. Je peux donc simplement commander X ceci, le coller dedans. Et comme il s'agit également d'un cadre, je peux compenser le reste en ajoutant un rembourrage sur le dessus J'ai donc besoin de 25 pixels, et j'ai un écart de 18 ici. La différence est de sept pixels, n'est-ce pas ? Sélectionnez donc ce cadre, ajoutez sept pixels en haut. Et puis il y a 16 pixels entre cet élément et la rangée de boutons. C'est là que je dois sélectionner ces deux éléments, déplacer un pour créer un autre cadre, puis régler cet espacement sur 16, car il est inférieur à 18, ce que nous avions défini comme écart pour le cadre principal Et comme je ne peux pas utiliser rembourrage négatif pour atteindre 16, j'ai dû créer un autre cadre avec ces deux éléments Maintenant, sélectionnons ces éléments, décalons A pour créer un autre cadre avec eux, alignons-les au milieu et fixons l'écart à 16 pixels. Cela va juste me faciliter un peu les choses , car maintenant je dois régler l'écart entre celui-ci et le reste à 32 pixels, comme vous pouvez le voir ici. Encore une fois, je peux le faire de deux manières soit les sélectionner, créer un nouveau cadre avec eux, soit les placer directement dans le cadre principal. Nous avons 16 pixels ici, et il m'en faut 16 autres. Et comme il s'agit d'un cadre de mise en page automatique, je peux en ajouter 16 en haut, ce qui le poussera juste assez vers le bas. Donc, visuellement, j'ai cet écart de 32 pixels. Voilà, vous l'avez. C'est ainsi que vous pouvez créer une mise en page légèrement plus complexe dans Figma en utilisant tous les alignements, ainsi que toutes les options d'espacement et de rembourrage que nous avons apprises Maintenant, il y a une mission pour toi, y a une mission pour toi, donc je t'y verrai. 13. Assignment : atteindre un alignement parfait: Cette mission consiste à se familiariser avec l' alignement dans les cadres de mise en page automatique. C'est une question très importante, alors ne la manquez pas. Maintenant, votre mission consiste à recréer une mise en page à partir de l'application Nucleo. Et c'est l'une de ces sections du tableau des prix. Ce n'est pas exactement celui que vous voyez sur le site Web en direct en ce moment. J'ai une version un peu plus ancienne. Apparemment, l'application Nucleo a changé de page de prix entre le moment où j'ai pris la capture d'écran et le moment où j'ai commencé à enregistrer, mais tout va bien Vous pouvez toujours vous entraîner beaucoup même avec cette version obsolète. Donc, comme d'habitude, j'ai inclus la capture d'écran, les spécifications de conception, ainsi que tous les éléments de texte, les icônes, et j'ai également créé ce bouton pour vous, afin que vous n'ayez pas à vous embêter avec les dégradés et tout ça De plus, j'ai inclus des instructions que vous pouvez ignorer ou utiliser, c'est à vous de décider. Alors allez-y et faites cette mission. Comme je l'ai dit, c'est très important, et une fois que vous aurez terminé, je vous verrai dans la prochaine leçon, qui portera sur le redimensionnement avec mise en page automatique 14. Redimensionnement avec mise en page automatique: Lors du redimensionnement avec mise en page automatique, vous pouvez contrôler à la fois le cadre parent et les éléments enfants Dans cette leçon, vous allez découvrir les trois options de redimensionnement suivantes Ajoutez le contenu, fixez et remplissez le contenant. En prime, nous discuterons de la taille maximale minimale. Commençons par le contenu de Hug. Cela ne fonctionne que sur le cadre parent, et c'est le comportement par défaut. Donc, si je sélectionne ces trois éléments et que j'ajoute une mise en page automatique, Figma règle le redimensionnement horizontal et vertical en fonction de l'ajustement, plus précisément du contenu. Cela signifie que le cadre est aussi haut et large que son contenu. Cela signifie que si je devais supprimer l'un de ses éléments enfants, le cadre serait alors redimensionné C'est beaucoup plus petit, non ? Si je le rajoute, le cadre s'agrandit. Maintenant, gardez à l'esprit que Figma le fera tout en conservant le même rembourrage que celui que j'ai choisi Donc, si je dois remplacer le rembourrage ici 30 pixels, le cadre sera aussi grand et aussi haut que les éléments ajoutent le rembourrage que j'ai défini Donc, encore une fois, si je supprime cet enfant, le cadre deviendra plus petit, mais il conservera également ce rembourrage Et si, à un moment donné, j'ai un cadre configuré pour connaître, une option de redimensionnement différente de celle du contenu du câlin Je peux toujours le reconfigurer pour qu'il le contenu depuis l'inspecteur Si je clique ici, je peux le régler horizontalement, ou je peux le régler verticalement, ou je peux vraiment, et c'est un conseil de pro, je peux double-cliquer soit sur un bord horizontal pour régler le redimensionnement horizontal afin d'intégrer du contenu comme celui-ci, soit double-cliquer sur un bord vertical Donc, soit le bord supérieur soit le bord inférieur, comme celui-ci, pour régler le redimensionnement vertical en fonction du contenu Maintenant, si vous souhaitez que votre cadre parent reste fixe quelle que soit la taille des éléments enfants, vous devez définir l'option de redimensionnement sur fixe Et vous pouvez le faire de deux manières. Ici, j'ai un cadre par défaut qui utilise le contenu des câlins, et pour le définir comme fixe, je peux soit modifier une taille depuis le canevas, vous savez, en faisant glisser le pointeur sur l'une des poignées Et si nous regardons dans l'inspecteur, maintenant, le redimensionnement horizontal et le redimensionnement vertical sont définis sur fixe, ou s'ils sont définis pour inclure le contenu, je peux saisir une valeur manuellement, qui la définira automatiquement sur fixe Et cela fonctionne, bien sûr, dans les deux sens. Et un cadre défini sur fixe ne sera pas redimensionné en fonction de ses éléments enfants Ainsi, par exemple, si je devais agrandir cet élément beaucoup, vous verrez que le cadre, parce qu'il est réglé sur une valeur fixe, conserve exactement la même taille. Jusqu'à présent, vous avez appris que le contenu de Hug permet essentiellement à un cadre de se rétrécir ou de s'étendre selon les besoins pour s'adapter à la taille des éléments enfants. Mais que faire si vous souhaitez qu'un élément enfant soit réduit ou étendu pour occuper tout l'espace disponible dans le cadre parent ? C'est à ce moment que vous devez utiliser un conteneur de remplissage. Désormais, le conteneur de remplissage ne fonctionne que sur les éléments enfants. Regardons donc ce cadre avec deux boîtes à l'intérieur. Chacun est réglé sur une dimension fixe. Donc, lorsque je redimensionne ce cadre parent, rien ne se passe. Les éléments secondaires restent exactement à la même taille. Cependant, si je sélectionne l'un d'entre eux et que je définis, disons, le redimensionnement horizontal pour remplir le conteneur, cet élément enfant occupe désormais tout l'espace disponible Et Figma tient compte, bien entendu, du rembourrage à l'intérieur de l'élément ainsi que de l'écart par rapport aux autres De plus, si je devais définir cet élément comme contenant de remplissage, ces deux éléments enfants auront exactement la même taille car ils rempliront le conteneur en quantités égales. Ils occuperont tous les deux le même espace. Et si j'en ajoutais un troisième, les trois auront désormais exactement la même taille car ils sont tous prêts à remplir le contenant, ils occuperont donc le même espace. Je peux également définir un élément enfant pour remplir le conteneur dans le sens vertical, juste comme ça. Cela signifie que le redimensionnement de ce cadre parent produira désormais ce cadre parent produira résultats totalement différents de ceux que nous avons vus auparavant Les éléments sont désormais redimensionnés en même temps que leur cadre parent. Et voici un autre conseil pour vous. Si vous avez sélectionné un élément enfant et que vous maintenez la touche Option ou ultime enfoncée, et que vous double-cliquez sur l'un de ses bords. Par exemple, ce bord inférieur créera cet élément ou définira son redimensionnement vertical pour remplir le conteneur Sinon, s'il est réglé fixe horizontalement, disons que maintenez la touche ultime ou option enfoncée et que vous double-cliquez sur le bord droit ou gauche, cet élément remplira conteneur dans le sens horizontal. Désormais, le redimensionnement automatique peut parfois entraîner la rupture de la mise en page d' un élément s'il devient trop grand ou trop petit. C'est pourquoi vous pouvez définir valeurs minimales et maximales pour la largeur et la hauteur. Et cela fonctionne à la fois sur les éléments enfants et sur les cadres parents. Et c'est vraiment simple à faire. Supposons que je veuille autoriser le redimensionnement de ce cadre, mais ne le réduisez pas trop. Par exemple, quand c'est si petit, ce n'est pas bon. Je voulais avoir au moins 400 pixels. Donc, pour ce faire, vous allez dans l'inspecteur où vous trouvez la largeur, vous cliquez sur le menu déroulant et vous ajoutez une largeur minimale ou maximale. Donc, une largeur minimale, disons 400, et ajoutons également une largeur maximale de 800. Alors maintenant, je ne peux redimensionner que ce cadre parent 400-800 , limites que je lui ai fixées. C'est bon. Il est temps de passer à une application pratique sur le redimensionnement. Et pour cette leçon, nous recréons une mise en page à partir d'air call point IO Plus précisément, celui-ci ici, tout ce tableau des prix. Je l'ai donc apporté à Figma. Comme d'habitude, j'ai pris une capture d'écran, j'ai fait quelques spécifications techniques. J'ai également recréé les éléments du texte, j'ai introduit les icônes Et pour gagner du temps, j'ai déjà rédigé certaines des sections les plus complexes. Où, vous savez, nous avons essentiellement utilisé des techniques apprises dans les leçons précédentes. Alors maintenant, je veux simplement terminer cette mise en page et vous montrer quelques techniques de redimensionnement qui vous seront utiles Tout d'abord, nous avons essentiellement deux moitiés ici. Cette moitié gauche est déjà terminée. Il a un nous devrions en fait le régler sur automatique. Donc, en fonction de la hauteur, ce bouton reste toujours en bas. Maintenant, je veux que ce bouton occupe tout l'espace disponible. Je vais donc cliquer dessus, et je vais régler son redimensionnement horizontal pour remplir le conteneur, juste comme ça Passons ensuite au côté droit où se trouvent ces séparateurs, ces lignes grises entre chaque élément Je veux donc les configurer pour qu'ils occupent également tout l'espace disponible. Je vais donc les sélectionner tous, et je vais créer un cadre de mise en page automatique pour les aligner sur la gauche. Et je vais sélectionner chaque élément ici, et je vais définir son redimensionnement horizontal pour remplir le conteneur Et cela inclut les éléments de la liste eux-mêmes, ainsi que les séparateurs Et créons autant de séparateurs que nécessaire simplement en les dupliquant et en modifiant Nous devons définir cet écart de 32 pixels entre le titre et la liste. Alors faisons-le. Shift A. Nous allons fixer l' écart ici à 32 pixels. Et puis nous avons cette section en bas, qui devrait également être redimensionnée en même temps que tout le reste. Sélectionnons donc ces deux équipes A. Nous n'avons besoin d'aucun espacement entre les deux ici Je vais donc sélectionner cette section, double-cliquez sur Alt pour la configurer pour remplir le conteneur. Sélectionnez également ceci ou posez le cadre. Faites la même chose, configurez-le pour remplir le conteneur, puis nous ferons de même pour les deux. Nous les configurerons pour qu'ils soient remplis au lieu de ug. Maintenant, quand je le redimensionne, les choses commencent à bien paraître, mais pas exactement Donc, cette section du bas est correcte, mais pas celle du haut. Configurons donc celui-ci pour remplir le conteneur, puis passons en revue la commande et définissons le reste. C'est bien. Définissons également les éléments de texte. Je vais simplement sélectionner tous les éléments de texte et les configurer pour remplir le conteneur. Alors maintenant, lorsque je redimensionne, tout est redimensionné Cela inclut le séparateur, le texte et ces deux éléments en bas de page. Maintenant, réunissons les deux. Ils font partie d' un cadre plus grand sur fond blanc. J'ai un peu de rembourrage appliqué dessus. Sélectionnez les deux, déplacez A. Et appliquons d'abord le rembourrage, nous avons donc quatre et 48 Et faisons un fill white. Faisons 24 pour le rayon de la frontière. Et nous devrions être prêts à partir. Maintenant, qu'en est-il de l' écart entre les deux ? Actuellement, fixé à 103. Rendons-le un peu plus petit, disons 96, et configurons ces deux éléments pour remplir le conteneur. Ils occupent donc autant d'espace, et lorsque je redimensionne ce cadre principal, les éléments qu'il contient sont redimensionnés et lorsque je redimensionne ce cadre principal, en même temps Maintenant, il y a une chose qui ne se redimensionne pas. Et c'est ce premier semestre. Et là, j'ai le choix. Je peux également les configurer pour remplir le conteneur. Mais j'aimerais peut-être qu'ils restent exactement tels qu'ils sont. Définissons donc une largeur maximale ou, désolé, une largeur minimale pour la section. Donc, actuellement, il est défini à 376 pixels. Réglons 300 et aussitôt et six pixels comme largeur minimale de la section. Cela signifie que lorsque je redimensionne, il ne descendra pas en dessous de cette valeur Et je peux faire de même pour celui de droite. Je peux dire que je veux peut-être qu'ils soient d'au moins 450 pixels. Alors maintenant, le redimensionnement me donnera essentiellement ceci. C'est bon. C' était donc beaucoup d'informations sur un redimensionnement. J'espère que les démos de base, ainsi que cette application pratique, vous ont donné toutes les informations dont vous avez besoin pour mieux la comprendre Maintenant, nous avons une mission, ou plutôt vous en avez une. 15. Assignment : redimensionner avec mise en page automatique: L'aspect redimensionnement de la mise en page automatique de Figma est probablement l'aspect le plus complexe de celui-ci Et c'est pourquoi vous devriez vraiment vous y familiariser. Et pour vous y aider, voici une mission sur laquelle vous pouvez vous entraîner. Vous allez recréer une mise en page à partir de la conception du système de modules, et si vous faites défiler la page vers le bas, vous trouverez la section des prix Voici donc la section que vous allez recréer. C'est un peu plus complexe. Mais si vous appliquez toutes les techniques que vous avez apprises jusqu'ici, je suis sûr que cela ne vous posera aucun problème. J'ai créé tout ce dont tu as besoin. J'ai apporté la capture d'écran, j'ai créé les spécifications techniques et j'ai créé les éléments de texte et les icônes. Bien sûr, comme d'habitude, vous avez un ensemble d'instructions que vous pouvez choisir d'utiliser ou d'ignorer, le choix dépend vraiment de vous. Maintenant, c'était la dernière mission. Alors, s'il vous plaît, rejoignez-moi dans la prochaine leçon pour la conclusion et quelques réflexions finales. 16. Conclusion et réflexions finales: D Salut, félicitations pour avoir terminé ce cours, et merci beaucoup J'espère que vous l'avez trouvé utile, utile et que vous avez appris quelque chose de nouveau. J'ai beaucoup aimé créer ce cours, et j'ai hâte de vous voir dans le prochain. Mais d'ici là, faisons un bref résumé de ce que nous avons appris jusqu'à présent Nous avons exploré différentes méthodes pour ajouter une mise en page automatique et organiser les objets dans des cadres. Nous avons découvert que les cadres de mise en page automatique peuvent être imbriqués, ce qui est essentiel pour créer des structures complexes Nous avons expérimenté le flux de mise en page, apprenant la direction et le positionnement absolu Nous avons maîtrisé les techniques d'espacement, notamment en créant des espaces entre les articles et en ajoutant du rembourrage autour de ceux-ci Vers la fin, nous avons exploré en profondeur toutes les options d'alignement de la mise en page automatique FiCMA Enfin, nous avons découvert les différentes options de redimensionnement et comment les utiliser pour créer des mises en page dynamiques Alors, que devez-vous faire ensuite ? Tout d'abord, j'apprécierais vraiment que vous laissiez un commentaire pour ce cours. Vos commentaires sont précieux et ils m'aideront à créer meilleurs cours pour vous à l'avenir. Ensuite, consultez mon profil et découvrez mes autres cours de Figma Vous trouverez peut-être quelque chose qui vous intéresse. Je gère également une chaîne YouTube où je partage du contenu sur une conception Web en mettant l'accent sur Figma et Webflow Si cela vous intéresse, n' hésitez pas à y jeter un œil. Vous pouvez également me contacter sur X Instagram ou Facebook. Les liens se trouvent sur ma page de profil. C'est bon. Il est temps pour moi de me déconnecter. Merci encore de votre attention, et j'ai hâte de vous voir dans mon prochain cours. Au revoir pour le moment.