Les designs réactifs dans Figma : mise en page automatique, contraintes, avantages et modes (2024)

1. Intoduction: La mise en page automatique vous rend fou. J'ai peur de ce qui va arriver au design dans le navigateur. Et puis ce cours est exactement ce qu'il vous faut. Nous apprendrons tout sur la mise en place de designs réactifs et de figma Il s'agira d'une véritable étude approfondie des contraintes de mise en page automatique et, surtout, de la manière de gérer les points de rupture, qu'il s' agisse d'une configuration traditionnelle ou de exploitation de variables et de modes T. Comprendre et combiner ces outils vous aidera à configurer des composants, des modèles de conception et des pages entières conformes aux paramètres du code. Nous allons commencer par la puissante mise en page automatique et nous concentrer sur la configuration de composants vraiment réactifs. Nous allons partir de zéro et passer au redimensionnement, ainsi qu'à la puissance de l'imbrication infinie, pour créer des éléments plus complexes et même des pages entières grâce à la mise en page automatique Comme d'habitude, je vous montrerai trésors cachés et quelques trucs et astuces en cours de route. C. Nous examinerons ensuite les contraintes et façon dont elles peuvent nous sauver la vie lorsqu'il s'agit de combiner la mise en page automatique dans des grilles Une fois que nous aurons compris les principes fondamentaux du design adaptatif dans Figma, découvrons les points de rupture, comment ils fonctionnent réellement sous le capot en CSS et comment nous pouvons configurer nos designs Figma Cela va des configurations plus traditionnelles aux fonctionnalités avancées telles que l'utilisation mode pour automatiser les modifications de conception et l'adaptation de la typographie à différentes tailles d'écran Avec le dossier de cours, vous pouvez travailler à mes côtés ou revenir aux exercices avec des instructions détaillées à votre rythme. Ce cours est fait pour vous si vous avez des connaissances de base de Figma ou si vous êtes un utilisateur avancé de Bigma et que vous souhaitez parfaire vos Il s'agit d'un cours de Moon learning point IO. 2. Version de l'interface utilisateur et matériel de cours: Heads up Figma a mis à jour son interface utilisateur et vous verrez peut-être un nouveau design au lieu de l'ancien Les modifications sont principalement visuelles. Toutes les fonctionnalités et tous les outils sont toujours là, juste à des endroits légèrement différents ou avec un nouveau look. En cas d'urgence, vous pouvez toujours revenir à l'interface utilisateur précédente, cliquer sur un petit point d' interrogation en bas à droite, et ici vous pouvez voir, revenir à l'interface utilisateur précédente. Actuellement, tout le monde n' automatiquement accès à la nouvelle interface utilisateur. Figma déploie malheureusement cela de manière assez aléatoire. Vous trouverez donc deux versions de ce cours. L'ancienne version avec l'ancienne interface utilisateur dans les archives ou ce cours que vous suivez actuellement, qui a une structure légèrement différente, des vidéos mises à jour et utilise la dernière interface utilisateur. Donc, dès que vous aurez accès à la dernière interface utilisateur, assurez-vous d' utiliser la version mise à jour. Assurez-vous que vous disposez également des bons fichiers de cours. Vous pouvez les voir clairement marqués, l'un pour l'ancien cours et l'autre pour le nouveau cours. Leur structure est différente, il est donc très important que vous obteniez le bon fichier afin de pouvoir suivre toutes les vidéos. Vous trouverez toutes les informations et les liens dans la description ci-dessous. Notez également que la FIPMA est très dynamique. Cette interface utilisateur, telle que nous la voyons aujourd'hui, va certainement changer au cours de la prochaine année. Il s' agira probablement de petits changements , comme une liste déroulante ou une case à cocher. Les petites barres latérales flottantes peuvent être collées sur le côté. La structure générale restera la même, mais vous constaterez certainement une légère différence lorsque vous regarderez les vidéos. Rien à craindre, tout doit toujours être à sa place et être clair pour que vous puissiez y accéder et que vous puissiez l'utiliser. 3. AUTO LAYOUT : 01 Qu'est-ce que la mise en page automatique ?: Donnons-nous une idée, qu'est-ce que mise en page automatique et à quoi l'utilisons-nous ? Avec la mise en page automatique, nous pouvons configurer nos designs dans Figma manière à ce qu'ils correspondent à l'évolution de la taille Cela fonctionnera sur des éléments tels que des composants individuels, mais également sur des groupes de ces composants. Cela signifie que nous pouvons vraiment utiliser la mise en page automatique pour configurer n'importe quoi, d'un bouton à une page entière. Vous remarquerez que parfois, lorsque vous appliquez la mise en page automatique, cela fonctionne très bien et c'est super facile. Cependant, à d'autres moments, il se comportera simplement de la manière la plus étrange et vous devez comprendre pourquoi Cela est dû au fait que la mise en page automatique n'est pas simplement un bouton sur lequel vous cliquez. Il est composé de trois piliers et vous devez comprendre chacun d'eux en profondeur. Le premier concerne la mise en page et le positionnement, le second le comportement de redimensionnement et le troisième l'imbrication Nous allons comprendre chacun de ces piliers plus en détail, puis les rassembler dans leur ensemble, afin que vous puissiez configurer n'importe quoi avec la mise en page automatique en toute confiance . 4. MISE EN PAGE AUTOMATIQUE : 02 Mettre en page des cadres de mise en page: Voyons comment configurer un cadre de mise en page automatique. Grâce à la mise en page automatique, nos éléments de conception peuvent répondre à leur contenu. Ici, j'ai un bouton. Sans mise en page automatique, vous pouvez voir que si je change le contenu, rien ne s'adaptera. Maintenant, si j'ajoute une mise en page automatique, ce que je peux simplement faire en sélectionnant ce bouton, puis sur le côté droit du panneau des propriétés, sur la mise en page, je clique sur le bouton de mise en page automatique. Si je change maintenant le texte, vous pouvez voir qu' il s'adapte automatiquement au contenu qui m'est donné. Faisons de même pour ma carte. J'ai sélectionné. J'ajoute la mise en page automatique et maintenant je l'ai convertie en un cadre de mise en page automatique. Vous pouvez maintenant voir si je change quelque chose au contenu, alors tout s'adaptera, mais il gardera tout de même tout son rembourrage Maintenant, ce rembourrage et cet espacement, si vous sélectionnez à nouveau le cadre de mise en page automatique, vous pouvez le voir dans le panneau des propriétés de droite Dans le menu ici, vous pouvez voir que vous obtenez d'abord ce que l'on appelle l' écart entre les éléments. Ce sont donc tous les articles pour enfants. Les articles de mon enfant ici seraient donc mon image, mon titre et mon texte Remettons celui-ci dans son état d'origine. Donc, si je changeais cela, vous verrez que cela modifie l'écart entre ces éléments. Si vous maintenez la touche Maj enfoncée, votre montant n augmentera et diminuera. Vous pouvez également ajuster n'importe quoi directement sur les cavas ou vous pouvez double-cliquer puis saisir la valeur que vous recherchez Cela fonctionne de la même manière pour votre rembourrage. Vous avez ici votre rembourrage horizontal et votre rembourrage vertical. Vous pouvez modifier cela ici. Dans votre panneau de propriétés, vous pouvez également simplement saisir le nombre que vous recherchez, et vous pouvez également l'ajuster sur le Canvas en utilisant les poignées ou en double-cliquant simplement pour ajouter une valeur. Avec le menu d'alignement, vous pouvez désormais aligner vos éléments dans votre cadre de mise en page automatique. Réduisons simplement cette image pour que vous puissiez mieux la voir. Vous pouvez tout aligner vers la droite, tout vers le centre ou tout vers la gauche. Cela permet d'aligner l'ensemble de la zone de texte, et non le texte lui-même. Si vous souhaitez aligner le texte, vous devez toujours utiliser les paramètres des propriétés du texte. La mise en page est vraiment bonne deviner la direction dans laquelle vous concevez Mais si jamais vous voulez le modifier, vous pouvez utiliser ces erreurs ici pour passer de la verticale à l'horizontale. Le RAP est quelque chose que nous utiliserions si nous avions plus d'éléments de mise en page automatique, donc des éléments imbriqués les uns à côté des autres Ce n'est rien dont tu as besoin pour le moment au début. Vous pouvez déplacer des éléments dans ou vers mise en page en les faisant simplement glisser ou en utilisant les touches d'erreur de votre clavier pour les déplacer vers le haut ou vers le bas. Vous verrez que dans le panneau des couches, elles changeront de position en fonction de l'endroit où vous les placez. Vous pouvez également supprimer la fonction de mise en page automatique à tout moment suffit de sélectionner le cadre, puis de cliquer à nouveau sur le bouton de mise en page automatique. Il ne vous restera qu' un simple cadre. Outre le panneau des propriétés, vous pouvez également utiliser les raccourcis Shift et A pour créer un cadre de mise en page automatique, et tout Shift et A pour le supprimer, ou vous pouvez simplement utiliser le clic droit de la souris. Le raccourci est très pratique. Si, par exemple, vous n'avez que du texte, vous ne verrez pas l'option de mise en page automatique dans le panneau des vous ne verrez pas propriétés, mais vous pouvez appuyer sur Shift et A. Cela le transformera en cadre de mise en page automatique. Donc, si nous ajoutons un peu de remplissage, vous pouvez voir qu' un cadre a été ajouté autour de votre texte. Si vous désactivez la mise en page automatique, vous pouvez voir que vous êtes reparti avec un cadre et votre texte à l'intérieur. C'est aussi pourquoi on l'appelle cadres de mise en page automatique, car cela ne fonctionne qu'avec un cadre. Si vous l'appliquez comme un simple texte, un groupe, il le convertira toujours en cadre pour vous. 5. LA MISE EN PAGE AUTOMATIQUE : 03 Le menu de mise en page automatique: Examinons de plus près le menu de mise en page automatique pour bien le comprendre. Voici à quoi cela ressemble actuellement. Il est important de comprendre que Figma est très dynamique et qu'elle ne cesse d' itérer et de s'améliorer Ce que vous voyez à l'écran en ce moment pourrait donc être légèrement différent dans quelques mois. Les fonctionnalités et les boutons peuvent entrer et sortir des sous-menus et dans le panneau des propriétés. Vous devez donc vous y habituer. Il est essentiel de comprendre les fonctionnalités elles-mêmes, car cela vous aidera à savoir ce qu'il faut rechercher. Je vous fournirai toutes les vidéos mises à jour pour les modifications majeures. Alors attention à ceux-là. Figma vous permet également de revenir parfois aux interfaces précédentes Cliquez sur le point d' interrogation en bas à droite pour passer d'une version de l'interface utilisateur à une autre. Par défaut, vous verrez la version simplifiée du menu. Si vous ne faites que commencer, vous voudrez peut-être voir quelques étiquettes. Vous pouvez les ajouter en cliquant sur l'erreur à côté du pourcentage de vue haut et en sélectionnant les libellés des propriétés. Avant de passer au menu, rappelons-nous que la mise en page automatique est composée de trois piliers : la disposition et le positionnement généraux, disposition et le positionnement généraux comportement de redimensionnement et l'imbrication Tout au long du cours, nous découvrirons chacun de ces piliers en détail, vous donnera une compréhension complète et structurée de cette fonctionnalité, qui, je vous le promets vous facilitera grandement la vie en matière de mise en page. À mon avis, le menu commence par le redimensionnement, qui est notre deuxième pilier Nous y reviendrons plus en détail plus tard car c'est la partie la plus délicate, alors ignorez-la pour le moment tard car c'est la partie la plus délicate, alors ignorez-la pour le Il vous indique essentiellement la taille d'un élément, en points, ou son comportement défini. La section centrale traite la mise en page et du positionnement automatiques généraux, ce que nous appelons généralement le menu de mise en page automatique. Concentrons-nous sur celui-ci pour le moment. Pour commencer, nous avons les options de direction, horizontales ou verticales, et une troisième option appelée envelopper, qui nous permet d'enrouler les éléments dans une nouvelle ligne de redimensionnement Il s'agit également d'une fonctionnalité plus avancée, et nous allons l' explorer plus en détail ultérieurement. Avec l'alignement, nous pouvons aligner les éléments d'un cadre. Notez que cela s'applique de la même manière à tous les enfants. Avec Gap, nous pouvons définir l'écart entre les enfants directs. Petit conseil : dans l'un de ces champs, si vous sélectionnez les champs, maintenez la touche Maj enfoncée, puis utilisez les touches haut et bas, le montant de Ng que vous avez défini augmentera. Dans mon cas, cette valeur est fixée à huit. Par défaut, il est généralement défini sur dix. Vous pouvez le modifier, il vous suffit de cliquer sur le menu des actions de Figma, puis de rechercher Ng. Ensuite, tu pourrais régler ton gros score de 28. Vous pouvez également trouver un menu à encoches via la recherche par IA. Ici, nous avons le rembourrage. Nous pouvons définir le rembourrage en haut et en bas ensemble ou ouvrir le menu étendu pour des réglages individuels. Petit conseil : si vous maintenez la touche Commande enfoncée et que vous cliquez sur n'importe quel champ, vous pouvez utiliser la notation CSS pour le haut, droite, le bas et la gauche. Toutes les valeurs d'espacement ou de remplissage que vous pouvez définir dans le menu peuvent également être définies directement sur le Vous remarquerez les petites poignées. Vous pouvez les faire glisser ou double-cliquer et saisir n'importe quel nombre. Petite astuce pour le rembourrage. Si vous souhaitez sélectionner les deux côtés, maintenez la touche ancienne enfoncée. Si vous souhaitez sélectionner les quatre, maintenez la touche ancienne et la touche Maj enfoncée. Le dernier élément est la zone de contenu de l'émission ou du clip. Il s'agit davantage d'un paramètre de mise en page général que d'un réglage spécifique à la mise en page automatique. Il détermine si vous souhaitez afficher un élément qui dépasse le cadre. Cela va être très pertinent pour le prototypage. 6. LA MISE EN PAGE AUTOMATIQUE : 04 Le réglage automatique: Il y a une fonctionnalité un peu cachée, mais je l'utilise tout le temps. Je veux que tu le saches, et ça s'appelle auto. Cette fonctionnalité s'appelait auparavant space between dans Figma et s'appelle toujours ainsi dans Flexbox Il se peut également que vous entendiez parler de ce nom. Donc, en gros, nous avons ici notre cadre avec trois éléments enfants. Et si je redimensionne, vous pouvez voir que je peux aligner maintenant qu'il est au milieu, je peux l'aligner vers la gauche, mais il gardera toujours un espacement Maintenant, dans l'espacement avec le menu déroulant, je peux passer en mode Auto Avec Auto, l'espace est réparti de manière égale entre les enfants. Outre le menu déroulant, vous pouvez également simplement cliquer sur les poignées. Maintenant, si vous tapez une valeur, elle reviendra au réglage d'origine. Ou si vous double-cliquez à nouveau et que vous tapez « auto », cela passera à l'espace entre les deux, ou comme nous l'appelons « now auto ». Mon raccourci préféré, il suffit de cliquer sur le menu d'alignement pour basculer entre le format compressé et l'espace entre les deux, ou vous pouvez également utiliser le raccourci x dans le menu d'alignement L'automatique est vraiment très pratique lorsque nous voulons créer des éléments tels qu'une navigation, dans laquelle nous voulons placer certains éléments sur la gauche et en coller d'autres sur la droite. Maintenant, ce qui est génial, c'est que si nous ajoutons plus d'éléments, cela dépend de l'endroit où nous les ajoutons. Alors maintenant, ce serait un enfant direct. Nous avons donc maintenant trois éléments secondaires. Donc, si nous redimensionnons, l'espace disponible est réparti entre trois Mais si je le place dans mon cadre imbriqué ici, je reviens à mon réglage d'origine plupart du temps, Aalto sera exactement la solution que vous recherchiez . Alors gardez-le à l'esprit. 7. AUTO LAYOUT : 05 Menu avancé de mise en page: D menu des paramètres avancés. Il y a une petite icône que nous avons ignorée jusqu'à présent , à savoir les paramètres avancés D. Sélectionnez n'importe quel cadre de mise en page automatique. Ensuite, si nous cliquons dessus, vous pouvez voir que nous avons actuellement des paramètres pour les traits, le décor du canevas et une ligne de base de texte Passons rapidement en revue la dose. Je vais commencer par le premier, qui concerne les traits, et vous pouvez voir par défaut ce qui est exclu. Si nous survolons notre rembourrage ici, vous pouvez voir que j' en ai actuellement 32, et vous pouvez voir que mon trait est réglé sur 16, donc cela occupe la moitié de mon rembourrage et vous pouvez voir que mon trait est réglé sur 16, donc cela occupe la moitié de Je peux simplement apporter des modifications ici, les inclure dans la mise en page, et maintenant vous pouvez voir que mon rembourrage est entièrement utilisé et que mon trait ce paramètre de cadre de mise en page automatique Notre prochaine étape est notre empilage. Jetons un coup d'œil à celui-ci. Si nous sélectionnons des éléments, il est important de comprendre que l'espacement peut également être négatif Avec le réglage avancé, nous pouvons désormais modifier l'ordre d'empilage, sorte que nous puissions avoir le dernier en haut ou le premier en haut Et notre dernier point à examiner est notre paramètre de base. Je vais donc sélectionner ce sous-menu. Donc, mes articles, vous pouvez voir comment ils sont configurés J'ai donc mes articles NAF et mon bouton Vous pouvez voir qu' ils sont actuellement alignés. Je peux également les aligner au centre, mais parfois elles peuvent ne pas s'aligner sur la ligne de base que vous recherchez. Vous pouvez donc sélectionner l'alignement sur la ligne de base, et dans une petite fenêtre d'aperçu, vous pouvez déjà le voir, et il s' alignera légèrement sur la ligne de base. C'est également quelque chose que vous voudrez peut-être utiliser si vous avez un bouton avec une icône, par exemple, et que vous souhaitez l' aligner sur le texte. Ce sont donc des paramètres que vous n' utiliserez pas trop souvent, c'est pourquoi ils se trouvent dans ce petit sous-menu 8. MISE EN PAGE AUTOMATIQUE : 06 Paramètres de redimensionnement: Redimensionnement avec mise en page automatique. Nous avons donc appris que nous pouvons simplement transformer n'importe quel élément en un cadre de mise en page automatique. Nous pouvons ajuster l'espacement, le dimensionnement et le rembourrage, et lorsque nous modifions le contenu, nous pouvons voir que notre Maintenant, cela fonctionne très bien comme ça car si on y regarde à nouveau, agit d'un cadre de mise en page automatique vertical. Mais ce que nous voulons également ce cadre fasse, c'est que si nous le redimensionnons, nous voulons que notre contenu réponde également de cette Pour que cela fonctionne, nous devons ajouter une couche supplémentaire de mise en page automatique, appelée paramètres de redimensionnement Vous trouverez le paramètre de redimensionnement en haut de la zone de mise en page. Si vous avez appliqué la mise en page automatique, cela peut se trouver dans le cadre parent ou dans le cadre imbriqué, alors vous pouvez le trouver ici Mais aussi tout élément à l'intérieur d'un cadre de mise en page automatique. Si vous cliquez dessus, vous obtiendrez la zone de mise en page avec les paramètres de redimensionnement de cet élément C'est la partie qui nous intéresse. Il est donc très important de comprendre que lorsque nous appliquons la mise en page automatique au cadre parent, le menu de mise en page automatique détermine le comportement de tous les éléments enfants de ce cadre. Donc, l'alignement de tous ces éléments, l'espacement de tous ces éléments Maintenant, si nous voulons définir comportement individuel de ces éléments, nous devons les sélectionner et définir leur comportement de redimensionnement, et non le comportement de redimensionnement de l'ensemble du cadre Les options que nous avons actuellement sont une taille fixe, le remplissage du contenant ou le contenu. Auto Layout est devenu très efficace deviner le comportement que vous pourriez souhaiter Vous pourriez donc vous en tirer comme ça. Par exemple, cette image est déjà configurée pour remplir le conteneur. Et cela est dû au fait que la mise en page automatique a détecté une marge similaire à gauche et à droite. Mais je vous recommande vivement de ne pas vous fier à ces préréglages et essayer vraiment de comprendre une fois comment configurer un redimensionnement approprié Les paramètres de redimensionnement sont généralement la partie la plus confuse au sujet de la mise en page automatique, mais ce n'est pas si difficile Il s'agit vraiment de le comprendre une fois et de le pratiquer un peu. L'essentiel est d'y aller étape par étape. Tu ne peux pas précipiter les choses. Alors allez-y petit à petit. La première chose que nous allons sélectionner est notre image. Passons maintenant à notre menu déroulant et configurons-le pour remplir le conteneur. Cela signifie que si nous redimensionnons le contenant, il va, comme il est indiqué, le remplir, respectant toujours le rembourrage que nous avons indiqué à gauche et Ici, nous avons affaire à une configuration horizontale, donc je ne m'inquiète pas trop pour la configuration verticale. Je vais quand même avoir celui-ci ici à une hauteur fixe. Cela signifie que mon image est toujours fixée à cette hauteur spécifique. Je vais maintenant passer à l'élément suivant, qui est mon texte, et je veux faire de même. Je ne veux pas que cela soit corrigé à la taille. Je veux que ce soit à l'horizontale pour remplir le récipient. Et je vais faire de même pour mon texte de copie. Je veux aussi que cela remplisse le récipient. Maintenant, en ce qui concerne le texte, je ne veux pas fixer la hauteur car je ne sais pas quelle sera la hauteur si j'ajoute du texte ou si je le redimensionne C'est pourquoi je veux que ce soit un câlin. Le câlin est une petite fonctionnalité vraiment mignonne. En gros, pensez-y comme si vous donniez un câlin au contenu vertical. Lorsqu'il s'agit de copier du texte dans une mise en page automatique, et par là, je veux dire tout ce qui n'est pas un bouton ou un lien, assurez-vous qu'il est toujours réglé sur la hauteur automatique. Habituellement, la mise en page automatique le fait toute seule. Et c'est déjà à peu près tout. Redimensionnons maintenant notre boîte et vous verrez que tout se déroule bien Même si je change de texte. Ajoutons un peu de texte supplémentaire ici. vous pouvez le constater, car il est réglé sur la hauteur automatique et Hug la boîte s'agrandit automatiquement et la mise en page automatique répond. Je peux toujours modifier des éléments tels que mon espacement et mon dimensionnement avec le menu de mise en page automatique Mais si je redimensionne, tout se comportera comme prévu La fonction de mise en page automatique de Figma est assez intelligente. Donc, si, par exemple, j' ai un bouton ici, que je veux ajouter, et que je le transforme en mise en page automatique, alors vous pouvez voir qu'il prend non seulement automatiquement tout l'espacement, mais qu'il me donne déjà un paramètre de redimensionnement suggéré Maintenant, dans un bouton, Hug Horizontal et Hug verticalement a du sens, parce que si je change cela, disons que je le change pour en savoir plus, alors vous pouvez voir que je veux que ce soit également étreint horizontalement Et d'ailleurs, je peux aussi faire glisser un cadre de mise en page automatique dans un autre. bouton sera imbriqué et conservera ses paramètres de redimensionnement Si nous voulions le déplacer, nous pourrions utiliser l'alignement. Nous pourrions également modifier ses paramètres de redimensionnement. Par exemple, si nous voulions un bouton en taille réelle, nous pourrions le modifier pour remplir le conteneur et il se trouverait au milieu. Notez que si votre texte est collé à gauche, cela est probablement dû au fait que l'alignement du bouton est toujours réglé sur la gauche et que vous pouvez le modifier au centre. 9. LA MISE EN PAGE AUTOMATIQUE : 07 Astuces de redimensionnement vertical: Quelques conseils de redimensionnement vertical qui pourraient vous intéresser. Dans de tels modèles, vous voudrez peut-être que toutes les voitures aient la même hauteur. Vous pourriez être tenté de résoudre ce problème manuellement. Cependant, ce ne sera pas vraiment une bonne solution car dès que vous redimensionnerez, cela ne fonctionnera plus. Il existe un moyen beaucoup plus simple de le faire. Ce que vous devez faire, c'est sélectionner tous les éléments enfants, et d'ailleurs, il y a un joli petit raccourci, sélectionnez le conteneur parent, appuyez sur Entrée, puis vous aurez sélectionné tous les enfants directs en même temps. Nous allons maintenant passer au paramètre de redimensionnement vertical et configurer pour remplir le conteneur. Et c'est parti. Maintenant, cela va toujours remplir le récipient. C'est vraiment sympa car nous avons toujours la carte avec le plus de contenu qui dicte la hauteur de celle-ci Cela est dû au fait que le contenant pour parents est configuré pour être serré dans ses bras et que tous les enfants sont prêts à le remplir. Une autre chose que vous voudrez peut-être faire est parfois d' avoir quelque chose comme un bouton ou une barre spécifique au bas de votre carte , quelle que soit sa taille. Maintenant, nous pouvons également le faire avec notre réglage horizontal. Tout ce que nous devons faire, c'est passer d'un montant fixe à un montant automatique. N'oubliez pas que nous avons notre raccourci dans le menu d'alignement, il suffit de double-cliquer. Vous pouvez toujours ajuster le rembourrage individuel. Voyons voir en bas, vous pouvez simplement monter un peu, ou bien sûr, également en haut. C'est vraiment à vous de décider comment vous voulez le configurer. Vous verrez maintenant que nous procédons au redimensionnement, tout reste en place plupart du temps, nous utilisons notre redimensionnement horizontal, mais nous oublions également un peu le pouvoir du redimensionnement vertical Assurez-vous donc d'en tenir compte. 10. LA MISE EN PAGE AUTOMATIQUE : 08 Ignorer la mise en page automatique: Ignorer la mise en page automatique. Qu'est-ce que cela signifie ? J'ai donc ici un cadre de mise en page automatique. Je veux faire glisser ce nouvel autocollant ici, et je veux qu'il soit placé au-dessus de mon image. Maintenant, si je le fais simplement glisser dans le cadre de mise en page automatique, vous remarquerez que je ne peux pas le faire glisser au-dessus de l'image car il fait partie du cadre de mise en page automatique dès qu'il entre dans le cadre. Ce que je peux faire maintenant, c'est le placer dans le cadre, le sélectionner, puis dans le panneau des propriétés, sous position, vous trouverez cette petite icône appelée ignorer la mise en page automatique. Dans les versions précédentes, cela s' appelait la position absolue. Vous pouvez désormais faire glisser librement votre élément dans le cadre de mise en page automatique. Petit conseil, il existe également un raccourci, maintenez la touche Ctrl et faites-le simplement glisser dans un cadre de mise en page automatique, puis vous devrez ignorer la mise en page automatique automatiquement appliquée. Si vous souhaitez l'enlever, il suffit de cliquer à nouveau sur l'icône. Cependant, au fur et à mesure que j'ai redimensionné la carte, vous remarquerez qu'elle ne répond plus à la largeur. Cela est dû au fait que cela ne fait plus partie de la mise en page automatique. Par conséquent, le redimensionnement ne s'applique pas. Ce que je peux faire pour résoudre ce problème, c'est sélectionner l'élément dans une position adjacente ou trouver le menu des contraintes, et je peux le coller à droite. Cela ne fonctionne que pour les éléments qui ne sont pas mis en page automatiquement. C'est également idéal pour créer des éléments tels que des bulles d'alerte. Il suffit de le faire glisser dans votre cadre de mise en page automatique, d' ignorer la mise en page automatique, puis de le positionner où vous le souhaitez. Maintenant, par défaut, cela va probablement le couper. Assurez-vous de sélectionner le cadre parent et, dans le menu de mise en page automatique, passez du contenu du clip à l'affichage du contenu. Cela signifie qu' il affichera tout ce qui dépasse votre cadre. 11. MISE EN PAGE AUTOMATIQUE : 09 composants et variables de mise en page automatique: Si vous utilisez des variables et que vous configurez une collection avec vos valeurs d'espacement, vous pouvez les utiliser dans la mise en page automatique C'est un excellent moyen d'assurer la cohérence entre les différents éléments et composants de votre conception. Pour les appliquer à un cadre de mise en page automatique, sélectionnez simplement le cadre, puis dans votre menu de mise en page automatique, vous trouverez vos valeurs de remplissage et d'espacement Si vous les survolez, un petit signe variable apparaît Cliquez dessus et vous obtiendrez une liste déroulante avec toutes les valeurs. Vous pouvez maintenant choisir la valeur ci-dessous. Vous pouvez également l'utiliser pour votre espacement. Il vous suffit d'appliquer la variable via le menu déroulant, et vous pouvez désormais choisir n'importe quelle variable que vous souhaitez appliquer. Et vous pouvez bien sûr appliquer la même variable plusieurs fois sur différents éléments. Vous pouvez toujours modifier la variable simplement en cliquant dessus et en choisissant une autre valeur dans la liste ou en la détachant en cliquant sur le petit clip Si vous ne voyez pas ce clip dans certains champs, appuyez deux fois sur la touche de retour. Et n'oubliez pas que dans la fiction, nous travaillons avec une approche basée sur les composants Il serait donc recommandé de transformer tout cadre de mise en page automatique utilisé plusieurs fois en composant Si nous extrayons maintenant une instance, vous pouvez constater qu'elle héritera de toutes les valeurs d'espacement que vous avez appliquées aux variables Lorsque je modifie le texte dans l'instance, ces variables resteront en place. Bien entendu, comme pour tout autre composant, cela fonctionnerait également avec n'importe quelle autre variable. Par exemple, si vous définissez une variable de couleur pour votre composant, toutes les instances héritent 12. MISE EN PAGE AUTOMATIQUE : 10 valeurs min et max: Définition des valeurs minimales et maximales. Lorsque nous redimensionnons notre design, nous ne voulons parfois pas descendre en dessous ou au-delà d'un certain point, comme dans cette carte Je ne veux pas que ce soit plus petit que ça. Ce que nous pouvons faire et pour que cela fonctionne, vous devez configurer votre élément en tant que cadre de mise en page automatique, c'est que dans les paramètres de redimensionnement, nous trouvons maintenant cette petite liste déroulante, et c'est ici que nous pouvons ajouter une largeur minimale Je peux maintenant le définir simplement en tapant un chiffre ou en utilisant un petit menu déroulant ici. Je pourrais appliquer une variable si j' en avais configuré une au préalable. Ou je vais simplement utiliser set to the current width. Maintenant, je vais également ajouter une largeur maximale, et vous pouvez utiliser les deux ou un seul d'entre eux, comme vous en avez besoin. Encore une fois, je vais cliquer sur le petit menu déroulant ici, ajouter une largeur maximale, et dans ce cas, je vais juste taper le chiffre 500. Vous pouvez maintenant voir que si je redimensionne, cela ne me permettra pas de redimensionner dessous ou au-delà de ce point Dans cet exemple, cela n' aurait pas beaucoup de sens, mais au cas où vous auriez besoin d'un autre design, vous pouvez bien sûr également définir une hauteur minimale et maximale. Vous pouvez les appliquer au maximum au cadre parent, mais vous pouvez également les appliquer à n' importe quel élément de votre cadre de mise en page automatique. Par exemple, je ne veux pas que ce texte s'agrandisse. Je vais le sélectionner, ajouter une valeur maximale, régler sur la largeur actuelle, et maintenant noter que ce texte est toujours configuré pour remplir le conteneur. Au fur et à mesure que je redimensionnerai, il poussera bien. Cependant, il va atteindre un certain seuil et il va cesser de croître pour rester beau et lisible. 13. MISE EN PAGE AUTOMATIQUE : 11 mises en page: Envelopper les éléments entre les lignes. Ici, j'ai un cadre de mise en page automatique qui contient des instances de la carte et un élément de newsletter. Ils sont actuellement tous réglés sur une taille fixe. Nous avons maintenant appris le positionnement horizontal et vertical. Mais il y en a un troisième qui s'appelle Ap. Si je sélectionne Ap dans un cadre de mise en page automatique, je peux maintenant le redimensionner et les éléments passeront la ligne suivante dès qu' n' y aura plus assez d'espace disponible À l'aide du menu d'alignement, nous pouvons choisir la manière dont ils procèdent. Nous pouvons donc soit les centrer, les placer vers la gauche ou vers la droite, l'un de mes favoris, double-cliquer, et maintenant nous l' avons réglé sur Auto, et par conséquent, ils vont utiliser tout l'espace disponible. Maintenant, cela fonctionnera soit avec des éléments fixes, et nous pourrions, par exemple, placer cette carte ici pour remplir le conteneur. Voyons ce qui se passe maintenant si nous redimensionnons. Supprimons le mode automatique, et nous pouvons maintenant voir que le redimensionnement et nous pouvons maintenant voir que le redimensionnement prend toute la largeur du fichier. prend toute la largeur du fichier Cependant, ce que nous pouvons voir ici, c'est que cela ne fonctionne pas correctement parce que cela va juste trop l'écraser. Nous pouvons donc très bien combiner cela avec les réglages min et max. Ce que nous allons faire, c'est définir cela dans le composant principal, afin que toutes les instances héritent Je vais le sélectionner ici, et je vais maintenant utiliser le menu déroulant et ajouter une largeur minimale et je vais la régler sur la largeur actuelle, et je ne vais pas définir de largeur maximale pour le moment. Si je redimensionne maintenant, vous pouvez voir que maintenant, lorsqu'il passe à la rangée supérieure, il conservera une taille parfaite, mais qu'au fur et à mesure qu'il passe à la ligne suivante, il utilisera tout l' espace Et nous pouvons combiner cela selon nos besoins. Nous pourrions faire de même avec cette carte ici à une valeur minimale, nous allons utiliser la taille actuelle, puis une valeur maximale, disons autour de cette taille. Maintenant, ce que nous devons faire, c' est toujours réglé sur une valeur fixe. Sélectionnons toutes ces cartes et configurons-les pour remplir le contenant. Maintenant que nous redimensionnons, vous pouvez voir qu'ils se redimensionnent bien avec leurs propres paramètres minimum et maximum. 14. 12 Images à format fixe: Configurez maintenant le ratio d' image Aspec avec Figma. Ici, j'ai une carte de mise en page automatique avec une image. suffit maintenant de sélectionner l'élément auquel vous souhaitez appliquer le rapport hauteur/largeur. D'ailleurs, cela fonctionne également pour les cadres. Et puis, juste à côté de vos tailles vous voyez ce petit cadenas. Cliquez dessus. Et si vous redimensionnez maintenant, vous pouvez voir que l'image conserve bien le rapport d'aspect Un petit inconvénient, si vous passez mode sourd à ce moment-là, mais gardez à l'esprit que ce qui vient d'être publié, c'est la traduction que nous voyons Ce que nous aimerions idéalement avoir c'est le ratio d'aspèces tel que nous le voyons dans le CSS, mais il n'en est qu'à ses débuts 15. LA MISE EN PAGE AUTOMATIQUE : 13 Apprenez-en plus sur la nidification et la relation parent-enfant: Comprenons la nidification et la relation parent-enfant. afin de comprendre l'imbrication dans la mise en page automatique, ailleurs, afin de comprendre l'imbrication dans la mise en page automatique, ainsi que dans le code, il est important de comprendre la relation parent-enfant Ici, vous pouvez voir un dessin de carte que j'ai configuré. Maintenant, aucune mise en page automatique n'est appliquée jusqu'à présent. Vous pouvez voir que cette carte contient des clusters. Cette partie intra va de pair, puis nous avons un texte et un lien qui vont de pair Maintenant, si je sélectionnais cette carte et appliquais simplement la mise en page automatique, cela se produirait. Ce qui s'est passé, c'est que la mise en page automatique a ajouté le même espacement entre tous les éléments La raison en est que mise en page automatique le voit comme ceci. Notre cadre est l'élément parent, puis tout ce qu'il trouve juste en dessous de la première couche de hiérarchie correspond aux enfants. Toutes les règles de mise en page automatique sont appliquées à tous ces enfants. Dans ce cas, notre espacement. Maintenant, si nous allons de l'avant et que nous l' imbriquons, j'ai maintenant un cadre imbriqué à mise en page automatique ici, et j'ai également imbriqué cette partie Ensuite, la mise en page automatique va regarder le design comme ceci. Nous avons le cadre d'exemple d'imbrication qui est toujours le parent, mais nous n'avons plus que trois éléments enfants Maintenant, si nous changeons notre espacement , par exemple, cela n' affectera que les enfants Nous avons toujours toutes nos couches, mais ce sont des petits-enfants maintenant. Ils vont suivre les règles de leurs propres parents. En fonction de la façon dont vous souhaitez que votre conception change et se comporte, vous devez ajuster cette imbrication. Supposons, par exemple, que vous souhaitiez une image pleine largeur. Ce que nous devons faire, c'est nous débarrasser de notre rembourrage des deux côtés Cependant, ce que nous voulons également , c'est conserver une certaine marge de manœuvre à cet égard. Ce que nous pouvons faire maintenant, c'est sélectionner ces deux options, créer une autre mise en page automatique imbriquée et appliquer à nouveau les marges à gauche et à droite Si nous voulons nous débarrasser du haut, nous pouvons également le faire, le mettre à zéro. Vous pouvez maintenant voir que vous avez une mise en page complètement différente, qui a également besoin de ses propres rôles d'imbrication C'est pourquoi il est si important se familiariser avec la nidification, et c'est juste une question de pratique La mise en page automatique ne consiste donc pas simplement à appliquer ce petit bouton ici. Il s'agit de réfléchir à la structure générale de votre conception, puis d'appliquer des cadres de mise en page automatiques là où vous en avez besoin. Et très important, tous ces cadres de mise en page automatique que vous avez imbriqués, ainsi que toutes les couches qu'ils contiennent, vous devez réfléchir soigneusement au comportement de redimensionnement que vous souhaitez qu'ils aient Il s'agit vraiment de comprendre et combiner les trois piliers de la mise en page automatique. 16. LA MISE EN PAGE DE LA AUTOMATIQUE : 14 Suggérer une mise en page automatique: Ajoutons un peu de magie qui suggère la mise en page automatique. Ici, j'ai quelques modèles qui auraient besoin d'être imbriqués si je veux les transformer en mise en page automatique La première est assez simple, cette partie serait une mise en page automatique imbriquée, puis cette partie, et puis tout cela serait une mise en page automatique verticale La deuxième carte est un peu plus complexe. Cette partie droite devrait être une imbrication de mise en page automatique verticale, puis la carte elle-même une imbrication de mise en page automatique horizontale Ensuite, nous avons une navigation, donc cette partie droite devrait être imbriquée. Et entre le logo et cette partie imbriquée à droite, nous devrions définir automatiquement l'espace de nidification entre les deux Maintenant, nous pouvons faire tout cela à la main ou nous pouvons utiliser une petite astuce. Commençons par le premier. Si je sélectionnais simplement un cadre, appliquais une mise en page automatique, cela arriverait, pas bien. De plus, si nous regardons le second, nous avons certainement besoin d'un peu de nidification ici Mais ce que nous pouvons faire, c'est cliquer avec le bouton droit de la souris, puis vous verrez sous la rubrique Mise en page automatique des annonces, une autre option appelée Suggérer la mise en page automatique. Nous pouvons également utiliser les raccourcis Shift Control et A. Dans le panneau des couches, vous pouvez voir que la mise en page suggère également une imbrication pour nous Maintenant, je viens d'appeler ce cadre pour que nous puissions ajouter un petit conseil supplémentaire, qui est de cliquer sur le menu AI et de renommer vos couches Et puis vous allez également obtenir de jolis noms de couches pour ces éléments imbriqués Voyons maintenant si cela fonctionne. Ça a l'air plutôt bien si je redimensionne ici. Si nous cliquons ici, nous pouvons voir que cela a également ajouté notre redimensionnement Ceci est configuré pour être rempli, et mon parent ici est également configuré pour le remplir. Si jamais je souhaite changer cela, je peux simplement supprimer ou faire glisser ces éléments dans mon panneau de couches et modifier mon imbrication Essayons donc la suivante, et sélectionnons cette carte, Shift Control et A. Je vais utiliser le raccourci. Je vais également renommer les couches. Allons y jeter un œil. Cela a également l'air plutôt sympa. Je peux toujours faire des ajustements. Supposons que je souhaite cette image occupe la moitié du contenant, puis je peux simplement la sélectionner et modifier mon redimensionnement pour remplir le conteneur Comme ça, je l'ai ajusté à la façon dont je veux qu'il se comporte. Notre dernier point, jetons un coup d'œil à la navigation. Shift control et A, notre raccourci, prenons également l'habitude de renommer les couches Cela va renommer tout ce que je n'ai pas nommé auparavant Celles que j'ai déjà nommées ne vont pas les remplacer. Voyons si cela s' applique automatiquement tout seul. Oui Parfaitement, nous pouvons voir que dans le menu d'alignement ici, cette automatique a été appliquée. C'était vraiment quelque chose de très difficile à faire avant d'avoir cette petite fonctionnalité. Fais-en usage. Cependant, je vous encourage vivement à prendre également l'habitude de comprendre la nidification manuelle Parce qu'à un moment donné, vous voulez changer les choses et vous devez comprendre pourquoi les choses sont configurées d'une certaine manière. Remarque : au moment de l'enregistrement de cette fonctionnalité, est assez nouvelle et compte tenu de sa puissance et elle est assez nouvelle et compte tenu de sa puissance et de son importance, je m'attends à ce qu'elle soit de ce petit sous-menu consistant à cliquer avec le bouton droit de bientôt supprimée de ce petit sous-menu consistant à cliquer avec le bouton droit de la souris sur notre menu principal de mise en page automatique, alors attention. 17. LA MISE EN PAGE AUTOMATIQUE : 15 La magie des tables: Un peu de magie avec les tables. La mise en page automatique est également très pratique lorsque vous souhaitez créer des éléments tels qu'un tableau réactif. Vous pouvez donc voir ici que j'ai mis en place une ligne. Il s'agit simplement d'un cadre de mise en page automatique, actuellement réglé sur une largeur fixe, puis verticalement pour être ajusté. Et puis à l'intérieur, j'ai toutes mes différentes colonnes, et elles sont configurées pour remplir le contenant et étreindre, et juste la première, qui est un chiffre, je l'ai réglée sur une taille fixe. Parce que je le mettrais à remplir, cela prendrait trop de place. Ce que je veux faire maintenant, c'est en préparer un deuxième. Je vais garder ce premier et je vais en fait sélectionner le cadre parent dans lequel il est entré. N'oubliez pas que cela sélectionne tous les éléments enfants, et je vais simplement les mettre en gras. Ensuite, ici, je veux remplir tout le contenu. Vous pouvez soit le remplir à la main , soit utiliser l'IA Figma, et d'ailleurs, je l' enregistre quand il vient de sortir, donc il aura probablement un aspect légèrement différent au moment où vous le regarderez et que vous sélectionnerez simplement le cadre dans lequel vous voulez que le contenu soit rempli et je vais juste le dire, créer du contenu Maintenant, je vais juste en sortir une copie. Ce que vous pouvez également faire, c'est qu'une fois que vous avez une copie, appuyez sur la commande N D, et cela vous permettra d'en copier davantage sur la même distance. Maintenant, je sélectionne toutes mes lignes et j'appuie à nouveau sur Shift A pour les imbriquer dans un cadre de mise en page automatique. Parce que ce que je peux faire maintenant, c'est que cela va me donner ce petit manche magique. Je peux soit sélectionner le cadre, puis me rendre ici et cliquer sur Remplacer le contenu pour le renseigner. Ou je peux simplement ouvrir les poignées, créer autant de lignes que nécessaire, et le contenu sera rempli pour moi, ce qui est vraiment génial. Maintenant, je vais juste le connecter à mon nom ici et je vais sélectionner les deux. Il se déplace à nouveau vers A. Voyons si ma mise en page automatique fonctionne. Oui, cela fonctionne parfaitement. Si cela ne fonctionne pas, assurez-vous simplement de sélectionner le cadre parent, appuyer sur Entrée et de vérifier que tout est prêt à être rempli. Cela doit être défini pour remplir, et cela doit également être défini pour remplir. C'est ainsi que vous pouvez créer une table assez rapidement avec la mise en page automatique de Figma et un peu d'IA 18. MISE EN PAGE AUTOMATIQUE : 16 exemples de setup plus avancés: Pratiquons les techniques les plus avancées d'imbrication et de redimensionnement. Ici, j'ai un ensemble de mises en page plus avancées, et je veux vraiment les parcourir plus en détail Je voudrais vous montrer d'une part comment je les imbriquerais à la main, car je pense qu'il est très important que vous compreniez le concept général de mise en page et de l'imbrication automatiques Ensuite, nous allons également exécuter la méthode d' imbrication automatique de Figma, et nous pourrons également comparer les résultats Je vais passer en revue ça assez rapidement. L'idée est de regarder ce que je fais, mettre en pause, puis de passer à votre fichier d'exercices. Il s'agit vraiment de le faire vous-même et de vous y habituer, car la mise en page automatique, en particulier lorsqu'il s'agit du comportement de redimensionnement et de l'imbrication, particulier lorsqu'il s'agit du comportement de redimensionnement est une question de pratique Bien, commençons par notre première carte ici. Je vais donc en sortir une copie. Et tout d'abord, c'est assez simple. Il s'agirait donc d'une unité, donc je la sélectionne et je passe à Shift A. Et je pense que c'est à peu près tout. Et je vais sélectionner un cadre parent, et je peux appuyer sur Shift A ou utiliser le menu pour appliquer la mise en page automatique. Regardons donc le comportement. Ça a déjà l'air plutôt bien. La mise en page automatique est vraiment devenue fantastique pour suggérer un comportement. Je peux y jeter un œil. Pour moi, cela ressemble plus à un bouton, donc je vais probablement le régler sur Huck to content, mais sinon, tout fonctionne bien Si ce n'est pas le cas, assurez-vous de sélectionner un cadre imbriqué, vérifier s'il est défini au niveau du remplissage, d' utiliser un raccourci pour saisir tous les enfants, puis de vérifier qu' ils sont également configurés pour être remplis Maintenant, essayons la même chose, et utilisons simplement notre version d'origine. J'en trouve un autre exemplaire. Ce que je vais faire ici, c'est que je vais maintenant cliquer avec le bouton droit de la souris pour accéder à plus d'options, suggérer ou mettre en page, ou simplement utiliser le raccourci. Et jetons un coup d'œil, et cela nous a donné exactement le même résultat. Donc oui, nous pourrions tout à fait utiliser un raccourci ici. Passons à notre carte suivante. C'est un peu plus complexe. Nous avons donc des directions différentes. Tout d'abord, nous avons cette section ici qui est une mise en page automatique verticale , puis la carte elle-même est horizontale. Donc, tout d'abord, je vais sélectionner à nouveau ces titres, shift et A, puis tous ces titres shift et A. Maintenant, je peux ajouter une mise en page automatique à l'ensemble de la carte. Encore une fois, soit le raccourci, soit le menu. Voyons comment se comporte ce comportement. Cela fonctionne et cela ne s'améliore vraiment pas pour le moment. Ce que nous devons faire, c'est tout ce premier cadre pour remplir le conteneur. Au fait, il existe un raccourci pour les ongles. Si vous le faites simplement glisser jusqu'à la fin, vous pouvez voir ces petits panneaux apparaître ici et il est désormais automatiquement configuré pour se remplir. Ensuite, nous allons également le faire pour ces éléments du graphique, qui sont déjà configurés pour être remplis, appuyer sur Entrée, vérifier que tout est configuré pour être rempli. C'est prêt à être rempli, et là, je préfère avoir cet ensemble à étreindre. Ça n'a pas marché. Je vais juste le refaire, et maintenant ça marche. Maintenant, n'oubliez pas que vous pouvez repositionner cette image ici avec le menu d'alignement, et si vous deviez également définir ces deux paramètres de remplissage Ensuite, nous obtiendrons quelque chose comme ça. Ce n'est pas vraiment ce que je recherche. Donc, ce que je veux, c'est en fait la position initiale. OK, ça a l'air super. Réessayons maintenant avec notre suggestion automatique. Je vais le retirer ici, et je vais utiliser un raccourci cette fois, ou pour suggérer, et voyons ce que nous avons obtenu. En fait, ça a l'air très bien. Dans ce cas, en fait, la meilleure solution est déjà prise en compte dans tous les paramètres. Encore une fois, je suis juste en train de ranger petites choses, comme si je préférais avoir cet ensemble pour me serrer dans mes bras Rien de dramatique, si tu ne le fais pas. Le suivant. Celui-ci comporte une partie supérieure puis une partie inférieure. Encore une fois, je sélectionne d'abord le décalage A des titres, puis je le combine avec le décalage A. Maintenant, je peux appliquer la mise en page automatique à l'ensemble de la carte. Regardez ce qui arrive à ce petit marqueur ici. Cela ne fonctionne donc pas. Il ne sait pas vraiment quoi en faire. Je vais juste le faire traîner et réparer à nouveau le rembourrage. Pour une raison quelconque, cela s'est mis à envelopper. Nous ne voulons pas cela, nous voulons que ce soit en fait une mise en page horizontale. Je vais ajouter une marge supplémentaire ici. Bien sûr, celui-ci aussi. Maintenant, jetons un coup d'œil. Encore une fois, cela ne fonctionne pas comme prévu, je vais donc le parcourir petit à petit. Je veux que celui-ci remplisse le conteneur, remplisse le conteneur, et cette partie ici aussi. Il s'agit vraiment de sélectionner ou de tout sélectionner petit à petit. Nous pouvons fixer l'espacement ici. Nous pouvons également définir celui-ci. Oui, comme je l'ai dit, d'habitude, si vous le sortez jusqu'au bout, il devrait récupérer automatiquement le conteneur de fichiers Parfois, cela ne fonctionne pas, il suffit d' utiliser une liste déroulante. Celui-ci, encore une fois, je veux le serrer dans mes bras, alors jetons-y un coup d'œil, pour que cela fonctionne. Maintenant, ce que nous voulons faire, c'est ramener celui-ci ici. N'oubliez pas que nous pouvons utiliser notre disposition automatique magique «   Little Ignore », ou nous pouvons aussi le faire automatiquement, la touche Ctrl enfoncée, et la configuration sera automatiquement activée et nous pouvons maintenant la placer à l'intérieur d'ici. N'oubliez pas vos contraintes. Et nous devrions maintenant être en mesure de le redimensionner. Parfait. Essayons maintenant nos suggestions automatiques. Encore une fois, je retire le clic droit d'origine pour suggérer une mise en page automatique. Et ça a l'air plutôt bien. Ignorons simplement notre petit marqueur pour le moment. Ça a l'air bien. Pas parfait, mais plutôt bon. Sortons le marqueur et si nous le faisons glisser à nouveau vers l'intérieur, nous pouvons utiliser notre disposition d'ignorance de l'ordre, le positionner, comme avant. N'oubliez pas vos contraintes. D'ailleurs, si vous voulez que ce cadre passe dessus, assurez-vous que le contenu du clip est défini. Voyons maintenant comment cela est configuré, remplissons le conteneur, remplissons le conteneur, créons un petit conteneur supplémentaire par ici comme nous le faisions auparavant, et remplissons. Oui, cela nous donne en fait une très bonne solution. La seule chose que je n'aime pas, c'est de ne pas pousser vers le bas. Jetons un coup d'œil ici, nous avons la source de l'erreur. Cela doit être configuré pour intégrer le contenu. Il répondra quoi qu'il arrive ici. Ça n'arrive toujours pas. Allons aussi à l'intérieur d'ici. Embrasse le contenu. Maintenant, vous pouvez voir que cela fonctionne. C'est pourquoi Auto Sugest est fantastique, mais essayez également de vous entraîner un peu à imbrication et à la définition du comportement de redimensionnement par l' imbrication et à la définition du comportement de redimensionnement par vous-même car ces petites erreurs vont se produire et vous devez comprendre pourquoi elles se Vous ne le comprendrez que si vous avez déjà imbriqué et redimensionné à la main OK, allons-y avec notre dernier. Celui-ci ici. Et jetons-y un coup d'œil. Celui-ci est un peu plus à nicher. Tout d'abord, allons-y petit à petit. Nous avons cette partie, et nous imbriquons avec l'image Vérifiez toujours à quel point le plan d'eau indique déjà bien la direction. Alors nous allons nous occuper de cette partie ici. Je vais d'abord sélectionner les petites tuiles. Nous allons régler ça dans une minute. Et ces deux-là, je dois aussi faire le tri. En fait, je vais laisser celui-ci parce qu'il semble avoir la même distance ici et ici, donc il peut s'agir d'un élément enfant à part entière. Disons-les, et vous verrez qu'ils sont empilés dans le mauvais ordre Nous pouvons donc passer aux paramètres avancés, et nous pouvons simplement modifier l'empilement Maintenant, nous allons également transformer ces deux éléments en un cadre de mise en page automatique. Entrons-y au milieu et voyons à quel point la mise en page automatique a déjà remarqué que nous avons une telle distance ici, et cela nous aide vraiment, même si nous faisons des imbrications à la main pour configurer la mise en place automatique Ajoutons donc simplement la mise en page automatique au cadre parent. Voyons maintenant comment fonctionne notre redimensionnement. Ça a l'air plutôt bien, sauf qu'ici, voyons ce qui se passe ici, prêts à remplir le récipient. Alors celui-ci ici, c'est là que l'erreur s'est produite. Nous voulons également que cela remplisse le conteneur, et nous avons juste besoin de retrouver le parent, et c'est actuellement réglé sur Auto, nous devons donc le supprimer, et nous allons ajouter un petit espace ici. Jetons un coup d'œil maintenant, et ça a l'air génial. Voyons ce que nous apporterait Auto Suggest. Prenons la même carte, Shift, Control et A. Vous pouvez voir qu'elles sont imbriquées. Redimensionnons et voyons ce qui s'est passé. Cela me donne en fait un résultat plutôt décent. Juste ici, vous pouvez voir que cela n'a pas décroché. Voyons à l'intérieur, nous devons le centrer pour le rendre plus beau, puis le régler pour qu'il remplisse le récipient Au cas où tu viendrais de me voir faire ça et que tu serais complètement bouleversé. C'est normal. Ce que vous devez faire, c'est vous lancer dans ces exercices, jouer vraiment avec eux et vous familiariser avec la structuration, l' imbrication et Allez-y. 19. MISE EN PAGE AUTOMATIQUE : 17 pages de mise en page automatique: Création de pages complètes de mise en page automatique. En raison de la puissance de l'imbrication et de la relation parent-enfant, nous pouvons utiliser la mise en page automatique en commençant par le plus petit élément, comme un bouton, pour créer nos composants, en les organisant en groupes jusqu'à des pages entières Jusqu'à présent, nous avons examiné des éléments plus petits, comme une carte et une navigation. C'est pour une bonne raison. Je vous conseille généralement, même si vous commencez à concevoir librement, ce que je vous encourage vivement, de réfléchir et d'organiser le tout en composants à un moment donné lorsque vous commencez à mettre de l'ordre dans votre fichier à mettre de l'ordre dans Ensuite, assurez-vous de configurer d'abord votre mise en page automatique à l'intérieur de ces composants. Je l'ai fait ici pour toi. Permettez-moi de vous montrer que si je retire une instance, vous voyez qu'elle hérite de tous les paramètres, et vous pouvez voir que cela fonctionne déjà très bien avec la mise en page automatique, pareil ici Vous pouvez toujours accéder à votre fichier d'exercices pour avoir un meilleur aperçu de la configuration. Créons maintenant notre cadre parent. J'appuie sur F et je vais juste sélectionner n'importe quel cadre prédéfini. Au fait, vous pouvez également le dessiner. La taille n'a pas vraiment d'importance car nous allons de toute façon redimensionner Maintenant, je peux simplement faire glisser des instances de mes actifs. Dans un projet plus vaste, vous trouverez évidemment ces actifs dans votre panneau d' actifs ici. Maintenant, vous pouvez déjà appliquer la mise en page automatique au cadre parent, puis tout trier au fur et à mesure. Personnellement, je préfère laisser comme ça parce que cela me donne la liberté de vraiment déplacer librement mes instances dans ce cadre, et j'ai l'impression d'avoir beaucoup plus de liberté lorsqu'il s'agit de concevoir comme ça. Mais une fois que vous avez terminé une page, nous pouvons désormais la transformer en cadre de mise en page automatique ou, soit dit en passant, vous pouvez également la laisser sous forme de page statique, ce qui est également très bien dans la plupart des cas car tout votre comportement réactif est déjà intégré à vos composants. Vous devriez en discuter avec votre équipe de développement si cela vaut vraiment la peine de reconfigurer la page entière en mode de mise en page automatique. Mais juste pour l'entraînement, nous allons le faire. Maintenant, nous pouvons soit appuyer sur la mise en page automatique ici, puis le trier manuellement, soit, c' est ce que je vais faire, je vais cliquer avec le bouton droit de la souris et utiliser ma suggestion de mise en page automatique. Encore une fois, souvenez-vous des raccourcis Control, Shift et A. Regardons-y de plus près. Que s'est-il passé ? Eh bien, si nous redimensionnons, nous pouvons voir que certains éléments fonctionnent parfaitement bien Par exemple, ma navigation et ici mon interratext et mon pied de page, car ce sont des éléments assez simples Maintenant, si nous regardons mes cartes, j'ai eu de la chance et elles ont été plutôt bien ramassées. J'ai remarqué que je voulais probablement que ça soit emballé. Quand je le place ici en haut. Et c'est vraiment sympa. J'ai juste besoin de nettoyer un peu. Dans ce cas, ce que je dois faire, c'est aussi dire marge à gauche et à droite, donc je vais configurer cela ici et une petite astuce. Ce que vous pouvez faire, c'est utiliser This is my gap. Voici mon rembourrage. Vous pouvez utiliser des variables pour ce faire. J'utilise déjà ces variables dans mes composants. Vous pouvez voir que mon rembourrage est configuré avec des variables. Donc, dans ma navigation, tout cela a les mêmes variables que celles utilisées en matière de rembourrage Donc, si je veux modifier le rembourrage, je pourrais simplement configurer une variable de rembourrage distincte pour cela, puis je dois la modifier une fois, et je n'ai pas à m'inquiéter de faire tout cela manuellement Pas besoin, juste un petit pourboire sur le côté. Et sinon, j' aime bien le look de celui-ci. Je pourrais jouer avec ces cartes. Par exemple, je pourrais les placer au centre ou double-cliquer pour qu'ils soient répartis uniformément. Donc, si nous redimensionnons, cela ressemblerait à ceci Maintenant, avec cet exemple, nous avons eu beaucoup de chance dans ce travail. Mais vous remarquerez qu'avec la suggestion de mise en page automatique, vous n'aurez parfois pas cette chance et vous aurez un comportement étrange dès que vous aurez des éléments qui ne sont pas aussi simples qu'une simple mise en page automatique à remplir. Donc, si nous sommes un peu embrouillés et que nous voulons recommencer, vous pouvez toujours faire vous pouvez toujours faire glisser cette partie de la mise en page automatique, puis la trier dehors de votre cadre de mise en page automatique. Donc, ce que je pouvais faire, c'était avoir ces cartes, et je pourrais tout reconstruire rapidement. Débarrasse-toi de ça. Sélectionnez-les. Et maintenant, je peux simplement les faire revenir dans le cadre de mise en page automatique. Autre petit conseil : si vous avez quelque chose plus grand que votre cadre de mise en page automatique, vous ne verrez pas le petit positionneur magique que nous venons d'avoir, appuyez sur commande, puis vous allez le positionner de force Il va le configurer pour remplir le récipient. Encore une fois, vous remarquerez que nous devons probablement le nettoyer un peu, remettre en place pour remplir le contenant, mais nous l'avons ici. Encore une fois, je vais ajouter ma variable pour le rembourrage. J'aurais la même configuration, mais vous pouvez mieux la contrôler. Il est assez difficile de trier les éléments d'une page avec toutes ces couches imbriquées. N'hésitez pas à faire glisser un élément, surtout si vous avez une composition, faire de côté et à le faire glisser vers le bas pour un meilleur contrôle. Maintenant, je vais juste nettoyer un peu tout ça. Exécutons les nouvelles couches. Nous pourrions générer des images, mais j'en ai en fait certaines provenant d'un autre fichier que je souhaite utiliser. Je vais utiliser l'un de mes raccourcis préférés Shift Command N C, qui copie un fichier PNG, et je vais rapidement les renseigner ici. Passons maintenant à la toute dernière touche. Je souhaite également modifier un peu le contenu. Je vais lui demander d'inventer quelques noms d' ateliers et juste un court intratexte C'est le genre de comportement que vous pourriez avoir, et c'est tout à fait normal. Et nous avons maintenant nos cartes à taille fixe. N'oubliez pas que vous pouvez également toujours utiliser les valeurs min et max. Nous appliquerions cela au composant principal. Toutes les instances hériteraient. Je vais ajouter une minute. Je vais juste choisir des nombres aléatoires ici. Changez toujours cela plus tard. Je vais utiliser 300 min et disons 450 max. Vous pouvez voir que rien ne s'est passé ici. C'est parce que ces cartes sont toujours configurées avec une largeur fixe. Sélectionnez le cadre qui contient toutes les cartes, appuyez sur Entrée, puis vous obtenez toutes les cartes individuelles et vous pouvez maintenant configurer toutes ces cartes pour remplir le contenant. Ils vont se remplir mais pas au-delà de leur valeur maximale, et c'est pourquoi le RAP fonctionnerait toujours dans ce cas. Si vous souhaitez vous en débarrasser à nouveau, sélectionnez ce conteneur appuyez à nouveau sur Entrée, revenez à la largeur fixe et, dans votre composant, supprimez les valeurs min et max. Maintenant, ce que vous devez faire, parce que vous avez annulé le paramètre de largeur, sélectionnez à nouveau toutes les cartes en appuyant sur Entrée et via le panneau des propriétés, vous pouvez maintenant, avec trois petits points, choisir réinitialiser et réinitialiser Vous avez à nouveau la taille d'origine du composant. 20. MISE EN PAGE AUTOMATIQUE : 18 Mise en page automatique et flexbox CSS: Mise en page automatique dans CSS Flexbox. Maintenant, il y a probablement certaines choses que vous n'aimez pas dans le comportement lorsque vous configurez davantage de modèles avec mise en page automatique. L'une des choses est que si nous redimensionnons, vous souhaiterez peut-être avoir le même nombre de cartes Nous pouvons jouer avec les valeurs minimales et maximales et les configurer pour remplir le conteneur, mais vous n'aurez pas cette impression sur cette grille. La raison en est que si nous examinons notre design et que nous passons au mode def, vous pouvez voir que tout est configuré avec quelque chose appelé flex. En effet, la mise en page automatique représente essentiellement une boîte flexible. Si vous êtes développeur, cela a beaucoup de sens. Si vous êtes designer, vous n'avez peut-être jamais entendu parler de Flexbox. Vous n'avez pas besoin de connaître Flexbox, mais il est très pratique de le comprendre un peu, car c' est la raison pour laquelle la mise en page automatique se comporte comme elle se En CSS, nous utilisons Flexbox pour positionner les éléments. Flexbox est ce que l'on appelle une approche de mise en page unidimensionnelle. Cela signifie qu'il va placer vos éléments les uns après les autres. Pensez-y comme des battements sur une corde. Si vous modifiez un élément, donc s'il devient plus petit ou plus grand, il est ajusté en conséquence, ce qui est idéal pour beaucoup de choses. Mais ce que Flexbox ne vous permet pas de faire, c'est de placer vos éléments dans une grille En CSS, nous utiliserions ce que l' on appelle une grille CSS, qui est une approche de mise en page en deux dimensions. Nine Figma, nous n'en avons pas actuellement. Nous avons une approche de grille plus rigide dans la FIMMA, et je vais en parler dans une minute Mais dans la vraie vie ou dans le vrai navigateur de nos jours, les développeurs utiliseront probablement CSS rid et ils ont beaucoup plus de possibilités pour la mise en page globale que dans Figma Il ne s'agit donc en fait que d'un bref aperçu très général. Ces sujets de mise en page CSS, de boîte flexible et de grille sont évidemment beaucoup plus complexes, et ils nécessitent de nombreux sous-outils et éléments à comprendre. Maintenant, en tant que designer, vous n'avez pas besoin de le configurer. Vous n'avez pas besoin d' être un expert en la matière, mais je vous recommande vivement de vous renseigner sur mais je vous recommande vivement de vous renseigner compréhension générale de la mise en page CSS moderne. Vous n'êtes pas obligé, mais cela vous donnera un énorme avantage. Continuez donc à travailler avec la mise en page automatique dans Figma, mais assurez-vous également de toujours être en contact étroit avec vos développeurs, faites-leur prendre conscience de cela, et certaines choses pourraient être testées beaucoup mieux dans le navigateur ce qui concerne la mise en page globale de votre page Au cours de ce cours, nous allons revenir à Figma. Cependant, dans votre document de travail, j'ai ajouté quelques liens si vous souhaitez en savoir plus sur ce sujet. J'ai également une étude approfondie séparée sur mole point IO dans la mise en page CSS moderne. Vous trouverez tous les liens dans votre fichier de travail. 21. MISE EN PAGE AUTOMATIQUE : 19 composants de fente avec mise en page automatique: Création de composants de slot avec mise en page automatique. En fait, un composant de slot est un composant lequel vous avez un espace réservé dans lequel vous avez un espace réservé et pouvez ensuite insérer un contenu différent Ceci est souvent utilisé dans le code. Nous n'avons pas de fonctionnalité de machine à sous en tant que telle, mais nous pouvons à peu près la créer avec des composants et une mise en page automatique. Ici, j'ai une carte de mise en page automatique et vous pouvez voir que j'ai un emplacement à l'intérieur. Si je le supprime simplement, je ne fais que créer une instance à partir de ce composant de slot, je la fais glisser à l'intérieur d'ici et je m'assure qu' elle est configurée pour remplir le conteneur et englober le contenu. Quel que soit le niveau de ce contenu, il sera diffusé. Maintenant, vous pouvez voir qu' en plus de l'emplacement, j'ai d'autres composants, la disposition un et la disposition deux, qui pourraient être insérés à l'intérieur d'ici ne me reste plus qu'à créer une instance du composant slot, et je peux maintenant double-cliquer, sélectionner un emplacement, puis par échange instantané, je peux simplement insérer n'importe lequel de mes autres designs Petit conseil, un peu plus avancé, sélectionnez un emplacement. Nous allons maintenant définir une propriété. Cliquez sur les trois petits points. Accédez à appliquer la propriété d' échange d'instance. Créez une propriété, et vous pouvez maintenant voir ici que vous obtenez ce menu, donc je vais juste appeler cet emplacement. Et ici, vous pouvez désormais choisir des valeurs préférées. Dans mon menu, vous pouvez voir que j'ai beaucoup de composants. Je vais choisir les deux options que j'ai configurées pour cette carte. Maintenant, si je sélectionne l'instance, vous pouvez voir que j'ai une petite liste déroulante avec l'emplacement, et je n'ai que les bonnes options à échanger C'est vraiment pratique que tout le monde utilise pour corriger la configuration. 22. LIMITES : 01 Quelles sont les limites dans Figma ?: Contraintes dans Figma. Dans Figma, nous avons une autre fonctionnalité qui nous permet de contrôler le comportement lors du redimensionnement, appelée contraintes Sélectionnez n'importe quel élément à l'intérieur d'un cadre Il doit s'agir d'un simple cadre, et non d'un cadre de mise en page automatique. Vous verrez maintenant des lignes pointillées bleues qui pointent vers le cadre parent suivant Telles sont les contraintes. Vous pouvez également les voir dans le menu de droite sous Contraintes. Toutefois, uniquement sur les cadres standard, ils ne sont pas disponibles sur les cadres de mise en page automatique. Par défaut, ces contraintes sont définies sur le haut et sur la gauche. Et remarquez que même lorsque vous avez des cadres imbriqués, ils sont toujours redirigés vers le parent le plus proche Alors je redimensionne, il semble que rien ne se passe car ils sont placés à gauche et en haut Cependant, si nous modifions ces contraintes, par exemple, définissons-les à gauche, à droite, dans cette case, puis sur ce point rouge, je les mettrai en bas et à droite. Remarquez comment ils changent et ils vous indiquent de quel côté ils sont épinglés Mettons celui-ci ici au centre. Vous pouvez utiliser les menus déroulants ou simplement utiliser l'icône et cliquer sur les différentes directions. Au fur et à mesure que nous les épinglons dans leur nouvelle direction et que nous les redimensionnons, vous pouvez voir que cela change leur comportement , et nous pouvons les définir horizontalement ou verticalement. Les épingler d'un côté ou en bas semble très évident Mais parfois, nous sommes un peu confus lorsque nous parlons de centre, que l'on appelle la gauche-droite et d'échelle. La différence entre eux est que fixe a simplement une marge gauche et droite fixe. Où que vous l' ayez placée, elle gardera cette distance, l'échelle a une marge en pourcentage par rapport à l'endroit où vous l'avez placée, et le centre reste simplement au centre relatif. Et la même chose fonctionne évidemment horizontalement et verticalement. Petite astuce, il arrive parfois que vous souhaitiez simplement redimensionner le cadre parent et ignorer les contraintes Dans ce cas, maintenez la touche Commande enfoncée, et elle ignorera simplement les contraintes pendant que vous la maintenez enfoncée. 23. LIMITES : 02 Limites et grilles: Contraintes et grilles. Au lieu de tout configurer avec la mise en page automatique, nous pourrions simplement configurer notre composant tant que composants de mise en page automatique. Ensuite, nous pourrions utiliser la gauche et la droite pour les épingler à gauche et à droite, et nous faisons de même ici. Nous pouvons même ajouter des éléments comme cette petite bulle ici et la placer en bas et à droite. Maintenant, si nous redimensionnons, nous obtenons à peu près le même résultat, mais c'est beaucoup plus facile que de configurer un cadre de mise en page automatique Cependant, vous remarquerez que même si cela fonctionne très bien pour les configurations mobiles simples avec cet élément, dès que vous ajoutez d'autres éléments, cela ne fonctionnera tout simplement pas Parce que le problème ici, c'est que si nous utilisons la gauche à droite, nous allons parcourir toute la distance. Il n'est pas au courant de ces autres éléments. Ce que nous pourrions faire, c'est les sélectionner toutes et les adapter à l'échelle. Mais avec cela, cela fonctionnerait, mais nous ne garderions pas une distance fixe. Nous ne pouvions donc pas vraiment aligner notre rembourrage sur, par exemple, notre navigation Un excellent moyen de résoudre ce problème est d'ajouter une grille. Parce que regardez, si j'ajoute mes contraintes de gauche et de droite dans une grille , elle va maintenant regarder la colonne la plus proche, car elle prend les colonnes comme parents. Par conséquent, ce qui se passerait maintenant si nous sélectionnions toutes ces cartes et les mettions toutes à gauche et à droite, c'est qu'elles resteraient dans les toutes à gauche et à droite, c'est qu'elles colonnes qui leur ont été désignées lors du redimensionnement Maintenant, nous pouvons faire de même pour notre navigation ici. Réglons-le à gauche et à droite. Vous pouvez constater qu'en quelques clics et avec très peu de complications, nous obtenons une configuration réactive et nous pouvons tester notre design. Maintenant, c'est très pratique pour un simple test rapide, et cela fonctionne également très bien, si, par exemple, vous travaillez avec des nombres impairs. Supposons que vous ne vouliez pas tout répartir uniformément. Cela ne fonctionnerait pas avec la mise en page, mais cela fonctionne très bien avec une grille. Cependant, cela présente également des inconvénients, car la grille ne respecte aucun rembourrage vertical, elle ne connaît donc pas la distance entre ici et ici Si vous ajoutez d'autres éléments, tels que du texte, les choses commencent à s'enchaîner. Mais c'est purement un problème de Figma. Ce ne sera pas un problème de code plus tard. J'aime donc toujours utiliser des grilles pour des tests rapides. Cela ne remplace toutefois pas la mise en page automatique. Vos composants doivent toujours être configurés avec une mise en page automatique, mais il est parfois beaucoup plus rapide de les tester rapidement à l'aide d'une grille et de contraintes. Petit conseil : vous pouvez toujours activer ou désactiver la grille, soit utilisant le panneau des propriétés de droite et en cliquant simplement sur l'icône, soit en utilisant le raccourci Ctrl et G. Si vous désactivez la grille, toutes les contraintes resteront 24. LIMITES : 03 Introduction rapide aux grilles dans Figma: Une introduction rapide aux grilles Figma. Laissez-moi vous montrer comment configurer des grilles dans Figma, que vous pourrez également réutiliser ultérieurement Voici un cadre, il suffit de cliquer sur n'importe quel cadre, puis vous verrez le réglage de la grille de mise ici dans le panneau des propriétés de droite. Cliquez sur plus pour ajouter une grille. La première chose que vous allez obtenir est cette grille de huit pixels. Maintenant, nous ne voulons pas ça. Ce que nous voulons, c'est cliquer sur ce petit lichen et le transformer en grille de colonnes Nous pouvons maintenant ajuster nos colonnes ici. Le nombre de colonnes que nous voulons, nous pouvons définir une marge de chaque côté, et nous pouvons également ajuster la gouttière Le comportement de cette grille est le suivant : dans ce cas, étant donné qu'elle est configurée pour s'étirer, les colonnes s'ajustent étant donné qu'elle est configurée pour s'étirer, toujours, sorte qu'elles constituent l'espace disponible, le nombre de colonnes moins la marge et la gouttière Vous avez également d'autres options. Vous pouvez placer la grille à gauche et à droite, pour être honnête, ce que je n'utilise jamais vraiment, ou vous pouvez la définir sur c. Dans ce cas, vous devez définir la largeur de vos colonnes, et si vous redimensionnez, la marge occupera et si vous redimensionnez, la marge le reste de l'espace disponible. Désormais, la manière dont vous devez configurer votre note dépend du système que vous utilisez. Si vous utilisez quelque chose comme bootstrap, vous le trouverez dans la documentation Vous pouvez également avoir une grille personnalisée, vous pouvez donc voir ici qu'il s' agit d'une grille personnalisée de décadence, et vous pouvez voir qu'ils vous en donnent la définition Si vous avez un guide en étoile et que vous utilisez un certain réglage de grille fixe traditionnel, jetez un œil à votre guide des et vous pourrez reproduire le quadrillage dans Figma Maintenant, si nous sommes satisfaits de cette grille, nous souhaiterons peut-être la réutiliser sur d'autres cadres. Ce que nous pouvons faire, c'est simplement sélectionner le cadre, puis sous la grille de mise en page , cliquer sur l'icône Little Apply Styles , puis sur Plus, et je vais juste appeler cela un test pour moment et nous pouvons maintenant créer un style. Si j'ai maintenant un autre cadre, je vais juste en dessiner un autre ici sur mon Cvas Vous pouvez maintenant voir que si je sélectionne ce cadre et que je passe le curseur sur la grille de mise en page, je peux cliquer sur les styles et je peux maintenant réutiliser la grille que je viens de créer Si je veux changer quoi que ce soit à propos de cette grille, suffit de cliquer sur la zone grise du canevas. J'ai un aperçu de tous mes styles de grille, et je peux maintenant le modifier ici. Un petit conseil pour que tous les membres de votre équipe sachent quel style de grille utiliser. Vous pouvez voir ici que vous pouvez lui donner n'importe quel nom, donc j'utilise des tailles de tee-shirts. Mais ensuite, j'ajoute entre parenthèses la taille à laquelle cette grille s'applique. Disons que j'ai deux cadres ici. Je peux voir que ce cadre est de 390, et je peux maintenant simplement choisir mon style de grille, et je sais qu'il est plus petit que cette taille ici. Encore une fois, cela dépend totalement de la façon dont votre grille est définie, quelles que soient les tailles points de rupture que vous avez définies ici. Si je sélectionne le plus grand ici de la même manière, je peux simplement accéder à mes styles de grille, et je sais que celui-ci est plus grand. Vous voyez ici, c'est 1 500, c'est plus grand que 993, donc ce serait la bonne grille C'est le cas si vous utilisez une grille globale pour vos conceptions, ce qui est la manière la plus courante de les utiliser. Mais vous pouvez également utiliser une sous-grille pour les sections. Parce que vous les appliquez sur des cadres, c'est vraiment génial dans Figma Vous pouvez simplement configurer n'importe quelle grille et, bien sûr, enregistrer ultérieurement en tant que style pour un cadre que vous positionnerez sur votre cadre parent. Par conséquent, vous pouvez simplement configurer la distribution dont vous avez besoin pour chacune de ces petites sous-sections 25. LES POINTS D'ARRÊT : 01 Introduire les points d'arrêt CSS: En configurant vos designs avec la mise en page automatique, vous remarquerez que cela fonctionne très bien pour une certaine gamme, mais cela ne fonctionnera pas pour toutes les tailles d'écran, des appareils mobiles aux ordinateurs de bureau plus grands. C'est là que les points de rupture entrent en jeu. Ce sont des points spécifiques ou plutôt des seuils ou des changements se produisent. De cette façon, les sites Web peuvent ajuster leur mise en page et leur style pour s'adapter à différentes tailles d'écran. Pour créer des points de rupture en CSS, nous utilisons ce que l' on appelle une requête multimédia. La règle de requête at media permet d'appliquer certains styles à une page Web uniquement si des conditions spécifiques sont remplies. Dans ce cas, la condition est une largeur minimale de 768 pixels. Ainsi, tout ce qui se trouve entre crochets ne sera appliqué que lorsque la taille de la fenêtre d'affichage est de 768 ou Regardons cela en CSS. Vous pouvez donc voir ici que j'ai un titre et quelques copies de textes ainsi que deux images Dans notre HTML, il s'agit d'un H, le titre, le texte de copie sont P, puis nous avons nos images avec la balise image Maintenant, dans le CSS, vous pouvez voir que j'ai défini le texte pour qu' il ait la taille d'un RM, puis un peu plus grand pour le titre, et que j'ai configuré les images pour occuper tout l'espace disponible Ce sont mes styles de base. Maintenant que je fais défiler la page vers le bas, vous pouvez voir que j'ai ajouté une requête immédiate. Quand j'atteindrai 400, agrandissons-le ici. Vous pouvez voir la taille, donc vous pouvez voir que lorsque j'atteins 400, cela change de mise en page. Ce qui se passe ici, c'est que tout ce qui se trouve entre crochets devient actif. J'ai une nouvelle couleur de fond, le H est plus grand et les images modifient l'occupation de l'espace. Je vais encore plus loin, vous pouvez voir la deuxième requête multimédia s'afficher. Vous pouvez voir ici, encore une fois, que j'ai ajouté une couleur de fond, pour qu'elle soit visible, et je change également la couleur H pour qu'elle soit encore plus grande. 26. LES POINTS DE REPONSE : LES POINTS DE REPONSE 02 dans Figma: Comment pouvons-nous gérer les points d'arrêt et les figma ? Parce qu'à l'heure actuelle, aucune fonctionnalité ne permet de résoudre ce problème, nous devons le résoudre manuellement. Lorsqu'il s'agit d' un design réactif classique basé sur des colonnes , cela n'est pas trop difficile à configurer. Tout ce que nous faisons, c'est vérifier notre excellente documentation. N'oubliez pas que cela peut être documenté dans votre système de conception ou dans un framework. Avec les informations fournies, nous pouvons configurer assez facilement le cadre avec des grilles dans Figma Donc, s'il s'agit d'un bootstrap, cela ressemblerait à ceci si nous devions établir tous nos points de rupture Nous pouvons ajouter nos composants, et n'oubliez pas que ceux-ci doivent être configurés avec la mise en page automatique dans Figma, puis nous pouvons les faire s'asseoir et se comporter avec les colonnes en utilisant des contraintes Nous ne pouvons pas contrôler l'espacement vertical de cette façon, mais nous avons une assez bonne idée de ce qui se passe en général Maintenant, concevoir chaque écran pour toutes ces versions sera assez fastidieux Donc, ce que nous pouvons faire, c'est simplement choisir quelques tailles principales. En général, je choisis simplement une taille mobile et un bureau W. Mais selon votre projet, vous pourriez également en avoir besoin d'un entre les deux. Dans la plupart des cas, la façon dont les autres s'adapteront sera tout à fait logique. Mais comme tout le cadre est configuré de toute façon, nous pourrions simplement passer rapidement par-dessus et tester des scénarios spécifiques Il n'est pas nécessaire de reconstruire l'intégralité de la page. Nous pouvons simplement tester les sections dont nous sommes un peu incertains. , un peu fastidieux, mais en fait pas trop difficile lorsqu'il s'agit de configurer des designs réactifs dans Figma Cela peut donc sembler un énorme avantage du point de vue de la conception que vous avez tout ce contrôle. Mais n'oubliez pas qu'en fin de compte, le produit ne vit pas chez Figma Il ne s'agit pas d'une installation facile. Il s'agit du produit final dans le navigateur, de la façon dont il se comporte et s'y anime. Donc, de nos jours, vous n' plus strictement besoin de cette grille en arrière-plan. Au moins, il n'est pas nécessaire que ce soit un système aussi rigide que Bootstrap ou similaire Vous pouvez également le définir plus librement. Il est très important que vous en discutiez abord avec votre équipe de développement. Maintenant, n'oubliez pas que lorsque nous configurons nos conceptions avec la mise en page automatique, nous avons appris que cela reflète Flexbox. La plupart du temps, ces designs remélangent parfaitement d'eux-mêmes, mais parfois ils peuvent également avoir besoin de points de rupture Par exemple. Il se peut que nous ayons un changement de mise en page. Ainsi, par exemple, la disposition globale de la grille est peut-être en train de changer. Un seul composant peut changer. Cela ressemble donc à une navigation, à un menu à deux liens de Burger, un pied de page qui est peut-être en train de changer ou à une section dédiée aux héros. L'apparence sera probablement très différente selon les tailles, et notre hypographie doit être ajustée selon les différents points de vue Donc, comme nous l'avons déjà indiqué, notre mise en page automatique, représentant Flex Box, se remanie très bien. Si nous voulons modifier la disposition générale, disons que nous avons une barre latérale que nous devons supprimer à un certain seuil. Ensuite, nous pouvons configurer deux cadres différents pour ces scénarios. J'aime ajouter des informations visuelles qui montrent clairement d'où et où nous utiliserions ce cadre, un petit conseil pour tout cadre de mise en page automatique. Nous pouvons également ajouter une largeur minimale ou maximale, afin de l'empêcher de dépasser ou de descendre en dessous d'un certain seuil. Ceci est généralement utilisé dans nos composants, mais nous pouvons également l'utiliser pour le cadre parent représentant le viewpoard Regardez comment ces cartes se redistribuent lorsque je les redimensionne. Maintenant, c'est le comportement d'ex box car ces cartes ont également une valeur minimale et une valeur maximale. Si je voulais qu'ils soient bien alignés, je pourrais les configurer avec une grille CSS. Maintenant, si nous voulons afficher un changement de disposition de la grille CSS, nous ne pouvons actuellement pas le tester dans Figma Nous reviendrions à une conception statique de nos pages, montrant les différents écrans clés et déterminant les transitions entre eux ainsi que le développement dans le navigateur Nous pouvons toujours ajouter d'autres étapes si nécessaire pour une meilleure communication. N'oubliez pas non plus que nous n'avons pas toujours besoin de traiter la page entière. Nous pouvons le décomposer en plusieurs sections de mise en page et en modèles établis Lorsqu'il s'agit de composants individuels répondant à des points d'arrêt individuels, j'aime créer un ensemble de composants , puis utiliser les différentes versions sous forme de variantes Comme nos composants Figma sont configurés avec une mise en page automatique, nous pouvons tester cela assez bien et définir notre point d'arrêt Ensuite, comme pour nommer le point d'arrêt de ma propriété et les valeurs, j'appelle des valeurs inférieures supérieures à ou entre certaines valeurs Ainsi, toute personne travaillant avec une instance sait toujours laquelle choisir. Il existe des techniques plus avancées utilisant des variables et des modes. Je vais les parcourir petit à petit. Nous pourrions utiliser des variables booléennes pour notre navigation, affichant et en masquant les éléments en fonction du cadre sur lequel je les fais glisser, et nous pouvons même échanger instances en utilisant des variables et des modes Cependant, il s'agit d'une configuration assez avancée, vous et votre équipe devez donc être assez solides pour travailler avec les variables en mode. 27. LES POINTS DE REPRISE : 03 modes et tailles d'écran, une introduction rapide: Permettez-moi de vous donner un aperçu du fonctionnement des modes dans Figma et de la manière dont nous pouvons les exploiter pour créer différentes tailles d'écran. Cliquez sur la zone grise du canevas pour voir les variables locales dans le panneau des propriétés de droite. Cliquez sur les variables ouvertes et vous verrez vos collections de configuration. Par exemple, je vais utiliser cette collection de couleurs ici, afin que vous puissiez voir que j'ai une configuration de couleurs différente, et actuellement, elles sont simplement appelées valeurs. Maintenant, juste à côté, j'ai un petit bouton plus, et si je clique ici, je peux ajouter un mode supplémentaire. Vous pouvez appeler ces modes comme vous le souhaitez. Je vais dire que c'est clair et foncé dans mon cas. Pour mon mode sombre, je vais laisser toutes les couleurs de ma marque telles quelles, et je vais simplement changer mes couleurs de base. Celui-ci est blanc maintenant, et ce qui était blanc va devenir noir. Une fois que nous avons créé ces variables, il est important de les lier à notre conception. Nous pouvons simplement sélectionner n'importe quelle couleur, puis dans notre menu de fichiers, nous voyons l'icône des variables et des styles, puis nous pouvons voir toutes les variables que nous avons créées et les appliquer ici. Petit conseil, vous pouvez plutôt sélectionner l'ensemble du cadre et, via la sélection des couleurs, vous pouvez simplement les sélectionner toutes en bloc. C'est très pratique car cela vous permet également de ne manquer aucune variable. Très important, assurez-vous également que ce cadre sur fond blanc doit également être configuré avec une variable de cette collection. Maintenant, si nous sélectionnons notre article, vous pouvez voir à côté de l'apparence, il y a un petit interrupteur, et nous pouvons maintenant passer du clair au foncé Si je passe en mode sombre, les couleurs de mon mode sombre s'appliqueront. Par défaut, c'est réglé sur auto. Nous pouvons faire de même avec notre cadre, et nous pouvons même basculer entre des pages entières Ce qui nous intéresse cependant, c'est l'héritage. À l'heure actuelle, ce cadre est réglé en mode sombre. Mon article, je le laisse chez Auto. C'est vraiment important. Ne le réglez sur aucun autre mode, laissez-le en mode automatique. Maintenant, si je le fais glisser dans n'importe quel cadre, il héritera du mode défini pour le cadre Et tout comme nous avons alterné entre le clair et l'obscurité, nous pouvons également utiliser des modes pour modifier les différentes tailles que nous avons définies. Voici donc une autre collection que j'ai réalisée. J'ai configuré une variable de taille, que je vais utiliser pour le texte de ce bouton, la couleur. Je vais également l'utiliser dans différents modes pour ce bouton. Et j'ai aussi quelques textes , que je vais utiliser dans le bouton. Et je vais en créer un autre, qui sera un numéro, et je vais appeler cette case. Et je veux que le boîtier soit blanc à 300 sur un petit écran et à 600 blanc sur un grand écran. Et notez que tout cela est configuré avec la mise en page automatique. Et nous pouvons bien sûr les transformer en composants, car ils hériteront toujours de toutes les variables que nous définissons Nous devons maintenant lier ces modèles aux variables que nous avons créées. Commençons par la taille du bouton. J'utilise le menu déroulant des tailles. Ici, je vois la variable, et je peux maintenant utiliser la variable de taille que j'ai créée. Petit conseil, vous pouvez également dimensionner les variables. Donc, par exemple, ici, je peux configurer cela. Si je clique sur ce petit champ d'édition ici, j'obtiens la portée, et je peux maintenant soit l' afficher pour tout, soit comme dans ce cas, je veux uniquement l'afficher pour la taille de la police Maintenant, la taille que j'ai ici sera la largeur de ma boîte. Voici donc le cadrage, et je ne voudrais le montrer que pour la largeur et la hauteur Et vous pouvez voir qu'en fonction de la variable que j'utilise, j'obtiens un champ de cadrage différent Finissons-en avec ça. Nous voulons également notre texte. Pour le texte typographique, vous avez ce petit bouton ici et vous voyez maintenant le texte du bouton Pour la couleur, je dois supprimer la variable que j'ai utilisée auparavant, et via le menu des variables, vous pouvez maintenant la voir dans les bibliothèques si vous faites défiler celle que nous avons créée vers le bas. Mais nous pourrions améliorer mon appellation ici. Pour la largeur de la boîte, nous avons simplement sélectionné une case, puis via le menu déroulant de largeur, vous pouvez également voir appliquer des variables, et maintenant nous obtenons notre largeur de boîte. Notez que seule la boîte apparaît, car nous l'avons définie. Il ne me reste plus qu'à définir le mode de ces images. Regardons à nouveau notre collection, petite et grande. Si je sélectionne ce cadre parent, et que vous voyez, je n'ai aucun moyen de le changer. Cela est dû au fait qu' aucun élément ne contient actuellement de variable sur ce cadre. Vous verrez que dès que j'aurai suivi tout ce qui s'y trouve, j'ai maintenant le commutateur. Je vais dire que celui-ci est en mode petit et que mon plus grand est en mode grand. Donc, si je fais glisser celui-ci, je veux une instance, vous pouvez voir que cela change très bien en fonction du mode défini, et j'ai la même chose ici avec ma boîte. Voici donc une largeur de 300, et dès que je saute par-dessus, elle passe à la largeur donnée. Les MS sont donc un excellent moyen d'ajuster les éléments de conception et les composants aux différentes tailles d'écran. Cependant, gardez à l'esprit qu'ils ont l'air très magiques, mais parfois ils sont aussi un peu compliqués, et il est simplement plus facile de le faire à la main. Mais vous devez le déterminer en fonction de votre conception et de la configuration de votre équipe. 28. LES POINTS DE REPRISE : 04 Les variantes de liaison aux modes: Lier la variance aux modes. Ce que nous pouvons également faire avec les modes, c'est choisir la variante d'un ensemble de composants que nous voulons utiliser pour un cadre spécifique. J'ai ici une navigation avec deux versions. Je veux que celui-ci soit utilisé sur mobile et celui-ci ici pour les écrans plus grands et pareil pour les cartes. Ce que nous devons faire, c'est lier ces différentes variantes à différents modes. Nous devons commencer par créer une collection à cet effet. Je suis en train de configurer une nouvelle collection avec le nom responsive example. Dans cette collection, je crée une variable de chaîne, que je vais appeler NAF pour commencer la navigation Désormais, le nom de la variable que vous créez n'a plus d'importance. Ce qui est très important, c'est la valeur. Cette valeur doit être le nom exact du variant que vous souhaitez y associer. Donc, si nous cliquons ici, vous pouvez voir que celle-ci s'appelle S, et que l'autre s'appelle M, et j'utilise la même convention de dénomination sur vous pouvez voir que celle-ci s'appelle S, et que l'autre s'appelle M, et j'utilise la même convention de dénomination la carte, donc c'est S, et l'autre carte s'appelle M. Ici, je vais dire lier à S, et je vais créer un autre mode dans lequel je vais lier à M. Maintenant renommons également ces modes Je vais appeler un mobile et un ordinateur de bureau. Je vais également ajouter la même chose pour notre carte. Nous avons maintenant établi toute la logique dans notre collection, mais nous devons également indiquer à ces éléments que cela se produit. Vous vous attendriez probablement à lier votre variante à cette variable. Cependant, c'est un peu étrange. Nous lions en fait l' instance à la variable. Sélectionnez une instance, puis dans le panneau des propriétés de droite, si vous survolez le nom de votre instance, vous verrez un petit signe variable Cliquez dessus et vous pouvez maintenant trouver la variable que vous venez de créer, et nous allons lier celle-ci à notre navigation, et nous allons faire de même pour notre carte. Maintenant, si nous faisons glisser notre instance ici, il ne se passe pas grand-chose. Cela est dû au fait que le cadre parent ne connaît pas encore le mode non plus. Notez maintenant qu'actuellement Figma est configuré de telle sorte que si je n'ai aucune variable définie sur ces cadres Si je n'ai aucun élément contenant une variable sur le cadre, alors aucun interrupteur n'est affiché. Maintenant, remarquez que dès que je l' ajouterai, vous verrez que lorsque vous sélectionnerez le cadre parent, ce commutateur apparaît ici. Nous avons ici notre exemple réactif. C'est mobile. Et ici, nous ne voyons pas encore le changement. Tirons donc une instance ici également. Et maintenant, vous pouvez voir le commutateur parce que nous trouvons que ces deux variables sont des variables. Et maintenant, nous pouvons changer ces deux ordinateurs de bureau. Et vous pouvez voir, juste comme ça, notre nouvelle version apparaît automatiquement. Donc, si je fais glisser le pointeur entre ces écrans, vous pouvez voir qu' il y aura toujours la bonne version pour moi. Maintenant que le mode est configuré, cela devrait également fonctionner automatiquement avec notre carte. Vous pouvez donc voir ici que nous avons notre carte S, et si nous la reprenons ici, elle passe automatiquement à l'autre version. Cela prend une minute pour vous faire une idée, mais vous pouvez l'utiliser dans de nombreux endroits différents. Essayez de l'expérimenter. Voici un autre petit exemple, afin que vous puissiez voir qu'il n'est pas seulement lié aux différentes variantes, vous pouvez également ajouter de la couleur et des tailles différentes, puis vous obtiendrez quelque chose comme ça 29. LES BREAKPOINTS : 05 Cachez et montrez avec des booléens: Masquer et afficher des éléments à l'aide de booléens. Les variables booléennes sont une fonctionnalité assez cachée, mais vous pouvez configurer de petits tours de magie comme celui-ci Tout d'abord, j'ai mis en place une collection avec deux modes. Dans mon exemple, j'en utilise un pour un écran plus petit ou plus grand, puis des variables booléennes Un pour un menu de hamburgers. Je veux afficher sur un écran plus petit et le désactiver pour un plus grand, et inversement pour un menu Lnx Maintenant, je configure mon composant et j'y empaquète tous les éléments. Donc le menu Berger ainsi que le menu Link. Maintenant, connectons tout. Je choisis donc le Berger et voici la partie étrange. Si vous souhaitez le connecter à une valeur booléenne. En apparence, il faut cliquer avec le bouton droit de la souris sur le bouton I can very it and i. Mais malheureusement, c'est ici qu'il se trouve en ce moment. Vous pouvez voir ici la variable que vous avez créée pour le booléen Berger. Cliquons dessus. Rien ne va se passer. C'est ce à quoi nous nous attendons. Maintenant, si nous sélectionnons le menu et que nous faisons de même, il va disparaître car par défaut, il va nous montrer le réglage du premier mode. Ce que nous pouvons faire maintenant, c'est extraire des instances Nous allons donc placer une instance ici, puis nous allons en placer une autre sur notre cadre mobile. Juste avant cela, permettez-moi de vous montrer que pour l'instant, n'y a pas de changement de mode. Et dès que j'ajoute un instant lié à une variable, vous pouvez voir que maintenant, si je sélectionne un cadre parent, nous pouvons voir notre commutateur. Passons donc celle-ci à notre version mobile, puis passons celle-ci ici à notre version plus grande. Et vous pouvez voir que automatiquement, lingots s'allument et s' éteignent en fonction de l'endroit où je les place. C'est vraiment impressionnant d' utiliser cette méthode de travail. Cependant, voyons comment cela est configuré. Sachez simplement que cela ne fait qu' afficher et masquer les couches. Il y a un risque que quelqu'un ne comprenne tout simplement pas cette méthode de travail et la réactive. Assurez-vous également de vérifier auprès du développement qu'il est logique que tout le monde comprenne ce composant. Parfois, il est plus logique d'avoir deux variantes, l'une avec le berg et l' autre avec les liens, afin que tout le monde sache quelles variantes sont actuellement en cours de conception. Petit embout sur le côté. Vous pouvez voir ici que nous avons donné des tailles. Ce chiffre est inférieur à 500 et supérieur à 500 dans ce cas. Ce que nous pouvons faire, c'est utiliser le menu déroulant de largeur. Je peux ajouter une largeur maximale ici à la petite de 500, et je vais faire de même pour la grande. Je vais passer dans ce cas à une largeur minimale de 500. Maintenant, je peux le tester. Ici, vous pouvez voir que cela fonctionne très bien, car cela va probablement descendre à 320 ou quelque chose comme ça. Et puis le plus grand, cependant, si je le redimensionne, vous verrez que cela ne fonctionnera pas dans le design, et donc, c'est vraiment génial de l'essayer comme ça Nous savons que dans ce cas, nous devons probablement redéfinir la taille à laquelle ce menu Liens va entrer en ligne 30. LES POINTS DE REPONSE : 06 Typographie responsive avec des modes: À l'aide des modes, nous pouvons également automatiser typographie réactive sur différentes tailles d'écran. Pour que cette approche fonctionne, nous devons combiner des styles de texte avec des variables et des modes. Voici donc une échelle de caractères simplifiée que j' aimerais utiliser, et vous pouvez voir que j'ai déjà créé certains styles, donc tous ces styles ont déjà été créés, et je vais créer un affichage avec vous. Sélectionnez donc le texte, puis sur Typographie, cliquez sur Appliquer les styles, et nous allons appeler celui-ci Afficher un Si nous cliquons sur la grande zone d'arrière-plan, vous pouvez voir que le style a été créé, et je peux simplement le faire glisser dans mon dossier ici. J'ai créé un exemple de typographie réactif. Maintenant, dans mon design, il est très important que j'applique ces styles. Assurez-vous que chaque élément de texte vous utilisez est lié à un style. Si vous utilisez des composants, il vous suffit de le faire une seule fois dans vos composants et toutes les instances hériteront Si nous voulions que la taille de notre texte passe de la taille S à la taille M et L, nous pourrions simplement créer une autre échelle de caractères pour M et L et l'enregistrer sous forme de styles distincts. Et vous pouvez tout à fait configurer votre design de cette façon. Cependant, à l'aide de variables et de modes, vous pouvez automatiser ces modifications. Plutôt que de créer des styles distincts, nous allons le faire dans le cadre de notre textile existant. Nous allons utiliser une variable sur la taille et avec les modes, nous pouvons indiquer à cette variable comment changer en fonction du mode défini sur le parent sur lequel nous allons faire glisser le dessin. Ce que nous devons faire, c'est créer une collection de variables. Cliquons sur Créer une nouvelle collection, et je vais appeler cela une typographie Maintenant, nous pouvons soit créer tout cela la main, utiliser un plugin. Sélectionnez le cadre dans lequel sont exposés tous vos textiles. Jetez ensuite un œil aux plugins et recherchez les styles de texte sans variables. Lancez ce plug-in. Vous pouvez maintenant choisir les collections. Je vais choisir la typographie, celle que je viens de créer. Vous pouvez également choisir les parties que vous souhaitez configurer en tant que variables. Cliquez sur Créer. Et c'est tout. Maintenant, si nous revenons à notre collection de variables, vous pouvez voir que cela a renseigné la taille de police, le poids de police et la famille de polices pour moi. Si nous examinons nos styles, nous pouvons voir que si nous utilisons ce plugin, l'avantage est que toutes les variables sont déjà connectées dans nos styles, ce qui est vraiment pratique. Si vous configurez une collection manuellement, vous devez accéder à vos styles et connecter toutes les variables manuellement via le menu déroulant. C'est vraiment important, sinon ça ne marchera pas. Nous avons donc maintenant tout mis en place. Cependant, nous n'avons pas encore ajouté d'informations sur la façon dont la taille devrait changer en fonction des écrans. Donc, ce que nous devons faire, c' est revenir à notre collection et ajouter quelques modes. Maintenant, je n'aime pas le nom de ça. Cela va être assez confus, alors je vais juste clarifier un peu les choses. Je vais donc simplement les renommer avec des tailles de t-shirts. Maintenant, je vais ajouter mes modes, et je vais appeler S. Il s'agit de mes modes M et L. Par défaut , je vais aussi les réorganiser simplement en les faisant glisser Maintenant, je vais changer les tailles de M. Je vais juste augmenter un peu ma taille, la taille également. Je le fais au hasard dans un système de conception, qui nécessiterait évidemment beaucoup de réflexion sur la façon dont ces tailles changeraient. Il ne nous reste plus qu'à indiquer à celui-ci qu'il s'agit du mod M et à celui-ci qu'il s'agit du mode L. Faisons glisser nos éléments ici avec notre design. Je vais le configurer pour S, et voici maintenant comment les nouvelles tailles entrent en jeu. Celui-ci sera L. Ensuite, une fois que j'aurai ce set, supprimons-le. Le mode va rester activé. Si je fais glisser quelque chose ici, la typographie sera toujours correcte Un petit conseil. Bien entendu, vous pouvez également utiliser plusieurs modes. Donc, pour le moment, j'ai réglé le s, mais j'ai aussi le mode clair et le mode sombre, donc je pourrais aussi passer en mode sombre. Autre petit conseil : si, par exemple, vous travaillez avec un concepteur IOS et Android, vous devez changer de famille de polices, vous pouvez également utiliser les modes et simplement changer la famille de polices de cette manière. 31. Des trucs gratuits pour dire adieu: Bravo pour avoir terminé ce cours, n'hésitez pas à me contacter à Mo earning Do Tao. Je suis toujours curieux de connaître vos commentaires. Vous me feriez également une grande faveur en laissant un commentaire ici. Ah, vous avez apprécié ce cours, et assurez-vous également de jeter un œil à Moon learning DotAO. Nous pouvons trouver de nombreux supports supplémentaires ainsi que des cours. membre M, vous pouvez accéder à toutes mes vidéos, qu'il s'agisse des notions de base de U XUI, En tant que membre M, vous pouvez accéder à toutes mes vidéos, qu'il s'agisse des notions de base de U XUI, de nombreuses informations sur la FEMA, de nombreuses vidéos approfondies, encore d'une section sur les principes fondamentaux de l'interface utilisateur CSS N. Nous allons donc discuter de ce qui se passe lorsque la conception de l'interface utilisateur rencontre le code, qui concerne la mise en page, la typographie, la couleur et tout autre sujet pertinent Sur Mo learning, vous pouvez également trouver un lien gratuit vers tous mes articles récents, ainsi qu'une page de ressources où j'essaie de vous tenir au courant des dernières nouveautés dans le monde de l'UX UI Design Si vous préférez un événement réel, jetez un œil à la section des ateliers et des discussions. Je prends fréquemment la parole lors de conférences et je donne ateliers en ligne sur les sujets de l' UX UI Design et de l' entrepreneuriat individuel Assurez-vous de vous abonner à ma newsletter pour rester à jour. Alors à bientôt sur Moearn point IO.