Conception UX/UI réactive dans Figma : mise en page automatique, limites et points de rupture (dernière version 2023)

1. Vidéo de promotion: La mise en page automatique vous rend fou, effrayée par ce qui va se passer avec votre design dans le navigateur, alors cette classe est faite pour vous. Nous apprendrons tout sur la façon de configurer des designs réactifs et Figma. Ce sera une véritable plongée dans les contraintes, la mise en page automatique et les points d'arrêt les plus importants mais rarement abordés pour la conception de votre interface utilisateur. La combinaison de ces outils vous permettra de retester et de documenter conceptions et les composants conformément aux paramètres de code réels. Nous allons commencer par la mise en page automatique Almighty et nous concentrer sur la mise en place de composants vraiment réactifs. Repartons de zéro et passons au redimensionnement et à la puissance de imbrication infinie pour créer des configurations plus complexes et même des pages entières avec mise en page automatique. Comme d'habitude, je vais vous montrer quelques trésors cachés et quelques trucs et astuces en cours de route. Nous examinerons ensuite les contraintes et la façon dont cela peut sauver la vie lorsqu'il s'agit de combiner la mise en page automatique dans des grilles. Une fois que nous aurons bien compris nos outils réactifs et Figma, nous apprendrons quels sont les points de rupture, comment ils fonctionnent réellement sous le capot en CSS et comment nous pouvons configurer notre design dans Figma. En conséquence. Cela nous permettra de tester nos pages et composants réactifs rapport à des conditions réelles et de placer notre documentation à un niveau supérieur, ce que vos développeurs apprécieront certainement. Avec le dossier de cours, vous pouvez travailler à mes côtés, annuler deux 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 débutant avancé souhaitez vraiment perfectionner vos compétences. Il s'agit d'un cours de Moon Learning point IO. 2. 1 Nouvelle interface utilisateur de Figma MISE EN PAGE AUTOMATIQUE NOUVELLE SKILLSHARE OLD: Veuillez noter que j'ai une version mise à jour de ce cours disponible. Donc, si vous accédez déjà à la nouvelle interface utilisateur de Figma, assurez-vous de passer à la nouvelle version Pour le trouver, il suffit de cliquer sur mon profil, ou vous pouvez également consulter la description ci-dessous. Donc, pour être clair, il s' agit de l'ancienne interface utilisateur de Figma. La nouvelle interface utilisateur de Figma devrait ressembler à ceci. Le principal changement que vous remarquerez est la barre d'outils se trouve désormais en bas et non en haut. 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 vous pouvez également suivre le dernier cours, qui a une structure un peu différente, des vidéos mises à jour et qui utilise la dernière interface utilisateur. 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, un pour l'ancien cours et un 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 FIMA 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 étant 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. À propos de ce cours: La configuration de vos conceptions en tenant compte de composants et de pages réactifs est un must pour tout concepteur d' interface utilisateur de nos jours Les tests réactifs et Figma peuvent vous faire gagner du temps et de l'énergie des deux côtés et vous améliorer en collaboration avec le développement principalement, Figma nous fournit des outils assez étonnants pour mettre en place un design réactif. Nous avons de puissantes contraintes de mise en page automatique, ainsi que des grilles. Il est très important que vous compreniez toutes ces fonctionnalités en détail. Vous finirez peut-être par utiliser principalement la mise en page automatique, mais vous remarquerez que pour un test rapide, en vous en tenant à une configuration de réseau irrégulière, il existe des moyens très puissants de combiner les trois. Donc, dans la première partie de ce cours, j'ai vraiment envie d' approfondir chacun de ces outils, du début aux techniques plus avancées. Les contraintes peuvent donc vous sembler très basiques au départ. Mais la puissance est vraiment libérée une fois que nous continuons à utiliser la mise en page automatique plus avancée, puis que nous recommençons à y combiner des contraintes. Ce cours vise donc vraiment à vous montrer ce qui est possible et quelle pourrait être la meilleure solution pour certaines configurations. n'y a pas de bonne ou de mauvaise voie. Il s'agit vraiment de ce que vous essayez de construire. Ainsi, après avoir parcouru nos outils dans la première partie du cours, nous pouvons créer des pages et des composants réactifs assez sympas. Cependant, nous sommes toujours confrontés à un problème. La même conception ne fonctionnera pas sur les appareils mobiles comme sur les ordinateurs de bureau plus grands avec une seule configuration, elle ne fonctionnera que dans une plage spécifique. Et c'est vraiment un sujet souvent négligé lorsqu'il s'agit d'apprendre le responsive design, car ce dont nous avons besoin, c'est de fixer un point de rupture. ne s'agit pas d'une fonction automatique dans Figma. C'est donc vraiment quelque chose que nous, en tant que concepteurs d'interface utilisateur devons comprendre et configurer conformément au code. Nous allons donc passer en revue cela en détail et vraiment comprendre quels sont ces points de rupture , comment les trouver , comment les configurer et les traduire dans Figma. Cela nous permettra de tester et de documenter nos composants et nos pages avec les vrais chiffres. De cette façon, vous aurez une assez bonne idée de la réalité. Et vous pouvez vraiment élever la conversation entre le design et le développement à un autre niveau et vous concentrer sur les détails. Donc, en un mot, découvrons ce désordre réactif et rendons tout clair et clair. 4. Matériel de cours: Vous voudrez peut-être travailler à mes côtés J'ai donc préparé quelques fichiers à télécharger dans le cadre du cours que vous suivez. Il vous suffit de naviguer vers le projet et les ressources. Vous y trouverez toutes les informations et le lien pour télécharger le matériel. Sur cette page, vous trouverez une variété de téléchargements. Vous pouvez simplement choisir la cause que vous prenez actuellement , puis cliquez simplement sur Télécharger. Et il téléchargera automatiquement le fichier pour vous. Pour importer les fichiers, il suffit de les télécharger. Il est important que vous ayez un compte Figma. Dans votre compte Figma, accédez à des brouillons ou à un projet au sein d'une équipe. Cliquez sur le bouton Importer et vous pouvez choisir le fichier que vous souhaitez charger. Cela peut prendre un moment car ils sont assez volumineux, mais une fois que vous les avez importés, ils seront enregistrés sur votre compte et vous n'avez pas besoin de répéter cette procédure. Dans le dossier. Vous trouverez du matériel pour travailler à mes côtés dans les vidéos, mais j'ai également ajouté quelques instructions pour que vous puissiez toujours revenir à votre rythme pour essayer et vous entraîner. Je travaille avec les polices Google pour la plupart de mes créations. Donc, si vous travaillez avec l'application Figma, vous n'avez rien à faire ou les polices Google sont préchargées automatiquement. Si vous voulez travailler avec Figma dans le navigateur, il vous suffit de rechercher la police qui vous indique qu'elle manque, par exemple Poppins, que j'utilise beaucoup. Ensuite, vous pouvez télécharger directement cette police, installer sur votre ordinateur et vous êtes prêt à partir. 5. !!! VEUILLEZ REGARDER ! ! ! Nouvelle interface utilisateur de Figma en version bêta: Heads Figma a mis à jour son interface utilisateur, et vous verrez peut-être un nouveau design au lieu de l'ancien Cette mise à jour est actuellement en version bêta fermée, donc tout le monde n'y a pas encore accès. Je mettrai à jour les arts et refléterai la nouvelle interface une fois qu'elle sera accessible à tous. 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 L. Par exemple, la barre d'outils supérieure a été déplacée vers le bas. Le panneau latéral gauche, en revanche, est resté pratiquement inchangé. Vous pouvez désormais modifier le nom de votre fichier ici. Vous pouvez toujours voir toutes vos pages, couches et ressources. Sur le côté droit, vous remarquerez quelques changements lorsque vous cliquez sur un design, mais toutes les fonctionnalités sont toujours disponibles. Si vous êtes débutant et que vous trouvez la nouvelle interface confuse, vous pouvez cliquer sur le point d' interrogation en bas à droite et revenir temporairement à l'ancienne interface utilisateur. Cela n'a aucune influence sur votre design. Ainsi, vous pouvez suivre les vidéos du cours en utilisant l' ancienne interface utilisateur beaucoup plus facilement jusqu'à ce que vous soyez prêt à passer à la nouvelle. La FIMA déploie progressivement cette mise à jour. Si vous n'y avez pas encore accès, vous pouvez également en faire la demande auprès de la FIMA, mais il n'y a aucune garantie, certains d'entre vous devront peut-être être un peu patients L'administrateur de votre équipe devra peut-être également activer la mise à jour pour vous, alors assurez-vous de vérifier cela également. Figma met fréquemment à jour le logiciel, alors attendez-vous à des changements et soyez prêt à vous adapter Les fonctionnalités peuvent se déplacer comme ce bouton de bibliothèque a été utilisé à tous les endroits possibles ces dernières années. Mais ne vous inquiétez pas, rien ne se perdra jamais et vous vous habituerez à utiliser FIMA de manière beaucoup plus flexible Il met vraiment l' accent sur la convivialité. Il ne s'agit donc pas d'apprendre quelque chose par cœur, mais de comprendre le logiciel dans son ensemble. 6. Mises à jour de la mise en page automatique: En juin 2023, lors de la conférence sur le conflit de Figma, quelques modifications de la mise en page automatique ont été publiées Assurez-vous de télécharger le fichier d'exercices Figma mis à jour. C'est le meilleur moyen d' avoir une bonne vue d'ensemble des pièces qui sont neuves et des pièces qui ont simplement été légèrement déplacées. Pas de soucis, tout fonctionne vraiment comme avant ou légèrement dans le menu et deux nouvelles fonctionnalités sont sorties. Alors laissez-moi vous les expliquer. L'espace entre les deux a été déplacé. Au cours du cours, je ferai référence à une fonctionnalité appelée espace entre. Cela se produit si nous avons quelque chose comme ça et que nous voulons adapter l'espace ici non seulement en fonction d'une valeur, mais aussi en le poussant automatiquement de l'autre côté. À l'époque, cela se trouvait dans le menu avancé. Vous pouvez maintenant trouver l'espace entre les deux si vous allez sur la barre d'espacement simplement en cliquant sur auto. Vous pouvez donc voir que maintenant si nous redimensionnons cela, c'est ce que nous obtenons. Si vous commencez tout juste avec mise en page automatique et que tout cela est un peu confus, ne vous inquiétez pas Si vous téléchargez le fichier d'exercice, dès que nous en arriverons à cette partie, le changement de position dans le menu sera clairement étiqueté pour vous. Les alternatives, qui consistent simplement à cliquer sur la poignée à l'écran et à taper « auto » ou toute autre valeur fixe, restent les mêmes L'autre raccourci, qui consiste à cliquer dans le menu d'alignement et à activer cette fonctionnalité avec X reste également identique à la précédente Largeur minimale et maximale. Min and Max est une toute nouvelle fonctionnalité. Cela signifie que si nous redimensionnons une carte de cette façon, nous pouvons désormais, via nos champs de largeur et de hauteur, définir une valeur minimale et maximale simplement en utilisant la liste déroulante Nous pouvons désormais définir un minimum et un maximum. Et cela se refléterait dès que nous redimensionnerions notre carte. Je n'ai pas de vidéo complète à ce sujet où nous l'avons parcouru petit à petit et où nous verrons également comment nous pouvons ajouter des variables à cette fonctionnalité. La prochaine étape est l'emballage. Cela signifie que maintenant, avec la mise en page automatique, nous pouvons encapsuler des éléments. À la ligne suivante. Nous allons parcourir cet exemple petit à petit. Comment configurer ces cartes. Tout d'abord, il y avait les valeurs min et max. Et puis nous ajoutons du wrap. L'enroulement est ajouté au menu de mise en page automatique dans la direction. Vous le trouverez donc ensuite, vertical, horizontal. Et maintenant, la nouvelle fonctionnalité d'emballage. En outre, Figma publie des variables que nous pouvons utiliser pour le remplissage dans la mise en page automatique Nous pouvons maintenant simplement sélectionner nos éléments de mise en page automatique. Ensuite, via le rembourrage, nous pouvons utiliser les valeurs d'espacement que nous avons définies et nous assurer que nous avons toujours la même valeur définie dans notre conception Nous pouvons également les utiliser pour l'espace entre la simple application d'une variable et vous pouvez ensuite également choisir vos valeurs définies. Les variables constituent un sujet très vaste. Ils sont très puissants et vous pouvez faire bien plus que simplement les ajouter, les compléter et les espacer . Si vous êtes intéressé par les variables, j'ai un cours de plongée complet sur ce sujet Vous pouvez voir que la mise en page automatique est restée à peu près comme avant, mais elle est devenue un peu plus puissante 7. CONSTRAINTES : 01 Quelles sont les contraintes dans Figma ?: Quelles sont les contraintes à Figma ? Les contraintes définissent la façon dont les couches réagissent lorsque le cadre parent est redimensionné. Cela nous permet de contrôler la manière de concevoir looks sur différentes tailles d'écran et différents appareils. Lorsque vous sélectionnez un objet dans un cadre, vous pouvez voir les petites lignes bleues pointillées pointant vers le bord de son cadre parent. Telles sont les contraintes. Par défaut. Ils sont toujours placés en haut et à gauche. Vous pouvez également consulter les paramètres dans le panneau des propriétés situé à droite sous les contraintes. Contrainte un ensemble pour le positionnement horizontal et le positionnement vertical. Vous pouvez définir les contraintes par le biais d'une liste déroulante ou simplement en cliquant sur l'icône. Petite astuce : maintenez la touche Commande pour sélectionner les deux côtés Vous pouvez appliquer des contraintes à n'importe quel groupe de couches ou cadre imbriqué, condition qu'il se trouve dans un cadre. Les contraintes ne fonctionnent que dans les cadres. À l'exception des cadres à mise en page automatique, vous ne pouvez pas ajouter de contraintes aux cadres à mise en page automatique, à l'exception des positions absolues des éléments Notez également que les contraintes répondent toujours au cadre parent. Cela ne doit pas nécessairement être le cadre principal. Donc, le cadre que vous utilisez pour représenter votre écran, car vous pouvez également imbriquer des cadres et Figma. Le cadre parent est essentiellement le cadre suivant jusqu'aux objets d'un quart d'enfants. 8. CONSTRAINTS: : 02 Travailler avec les contraintes horizontales et verticales Aperçu: Examinons de plus près les différents types de contraintes disponibles. Dans le menu déroulant, nous pouvons voir les options suivantes. Contraintes horizontales, gauche, droite, gauche et droite, centre. Et de l'échelle. Pour la verticale, le haut, le bas, le haut et le bas, le centre et l'échelle. Passons-les en revue petit à petit. Ici, j'ai mis en place un exemple d'écran de téléphone. Vous pouvez voir que lorsque je redimensionne le cadre parent, tout est réglé par défaut pour être réglé en haut et à gauche. Rien ne s'est donc passé. Maintenant, disons que je veux que ce menu reste sur le côté droit. Je vais simplement modifier la contrainte horizontale, non ? Et vous pouvez voir comment la petite ligne pointillée bleue passe maintenant vers la droite. Redimensionnons et vous verrez que cela fonctionne très bien. Désormais, les designs ne changent pas seulement horizontalement, mais aussi verticalement. Comme vous pouvez le voir, je perds mon bouton plus ici. Je vais donc définir les contraintes en bas et à droite pour résoudre ce problème. Ok, donc nous avons un placard gauche, droit , haut et bas, des choses assez simples. Il l'épingle simplement sur ce côté du cadre parent. Maintenant, si nous voulons positionner des éléments tels que notre contenu au milieu, nous pouvons utiliser la gauche et la droite, le centre ou l'échelle. gauche et la droite prennent la distance entre la taille de l'objet le cadre parent et la maintiennent exactement à la même taille lors du redimensionnement. L'échelle, quant à elle, définira la taille et la position de la couche en pourcentage des dimensions des cadres. Et il gardera les proportions, mais pas le nombre exact lors du redimensionnement du centre, vous aurez peut-être deviné qu'il maintient simplement l'objet au centre relatif où vous l'avez placé sur le cadre dans son taille d'origine Cela fonctionnerait exactement de la même manière pour alignement horizontal ou vertical. Revenons à notre exercice. Je vais donc ajouter des contraintes de gauche et de droite à mes images ici. Et je vais lui envoyer l' erreur tout en bas. Je vais ajouter un centre et un bas parce que vous pouvez mélanger contraintes horizontales et verticales comme vous en avez besoin. Mon texte ici, je vais juste lui laisser le réglage par défaut de gauche et de haut. Mais je souhaite également ajouter des contraintes à ma barre d'état. Ici. Je vais ajouter la gauche et droite au cadre de la barre d'état. Ensuite, je dois juste m' assurer que j'ajouterai différentes contraintes aux enfants, c'est-à-dire au temps, à la batterie c'est-à-dire au temps, à la batterie, aux éléments qu'ils contiennent. Donc, en ce qui concerne l'état de ma batterie, je veux être à la hauteur. Maintenant, si je redimensionne, vous pouvez voir que tout fonctionne parfaitement. Astuce Lorsque vous travaillez avec des designs mobiles, utilisez le menu de cadre prédéfini pour passer d' une taille populaire à l'autre que Figma est assez sûre pour vous. peut arriver que vous souhaitiez redimensionner un cadre sans tenir compte des contraintes. Pas de problème Maintenez simplement la commande enfoncée ou dans Windows Control et redimensionnez. 9. CONTRAINTES : 03 Contraintes et grilles: Il y a un peu de magie que vous pouvez faire avec les contraintes et les grilles. contraintes elles-mêmes sont assez simples, surtout lorsque vous avez un élément dans votre design. Mais si nous ajoutons plus d'un élément à une ligne, cela devient compliqué. Mon seul élément ici est réglé à gauche, à droite ? Si je fais de même avec les autres, vous pouvez voir sur la ligne pointillée bleue qu'elle prend en compte le bord du cadre parent et non l' autre élément enfant. Si nous redimensionnons, cela se produira. Nous pourrions mettre en place une solution compliquée avec les cadres, mais ce ne sera pas très compliqué. Si je le mets à l'échelle. Oui, cela permettra de maintenir les éléments en place. Mais comme nous l'avons appris, échelle définit la taille et la position de la couche en pourcentage de la dimension du cadre. Pour certains modèles, c'est peut-être ce que vous recherchez. Si vous souhaitez toutefois utiliser une taille spécifique pour vos marges et les distances entre les éléments, vous pouvez utiliser une petite astuce avec les grilles. Je vais ajouter une grille à mon cadre. Il est réglé pour s'étirer et je vais modifier marge de 24 et aussi avoir une gouttière de 24. Vous pouvez modifier ces chiffres. Avez-vous besoin de vous assurer qu'il est réglé pour s'étirer. Je vais maintenant changer mes contraintes à gauche et à droite pour ces éléments Remarquez comment la ligne pointillée de mon bouton en bas, il est réglé sur la droite et le bas, ne pointe pas vers le bord du parent plus de cadre, mais dans la colonne de ma grille. Si je modifie les contraintes, vous pouvez voir que maintenant elle prend la colonne la plus proche comme conteneur parent. Il en va de même pour mes images ici. Ils prennent ces colonnes comme conteneur parent. Ils sont assis à gauche et à droite. Donc, si je redimensionne tout, il s'intègre parfaitement dans la grille. Vous pouvez, bien entendu, activer et désactiver le réseau. Vous pouvez utiliser le menu de droite ou simplement utiliser le raccourci Control et g. Dans cet exemple, ma grille est configurée pour s'étirer. Si je le place au centre, il deviendra une grille fixe avec une certaine taille de conteneur fixe au milieu. Les contraintes de gauche et de droite ne répondent plus à cela. Vous devez modifier vos contraintes pour les centrer si vous souhaitez utiliser cette grille. D'ailleurs, cette technique fonctionnerait également pour les lignes. Et au cas où vous ne le sauriez pas, vous pouvez appliquer plusieurs croisades à une image et à Figma. Vous pouvez donc ajouter des lignes, deux colonnes et les utiliser. Cependant, comme j'ai du contenu dynamique et que je ne veux généralement pas limiter la hauteur, je n'utilise pas beaucoup Rosetta et je m'en tiens simplement aux grilles chaque fois que j'en ai besoin. 10. CONTRAINTES : 05 Fixer la position lors du défilement: Vous avez peut-être remarqué qu' à l'intérieur de notre boîte de contraintes, nous avons une boîte supplémentaire. Nous pouvons activer la position quart fixe lors du défilement. Ainsi, comme le nom l'indique, cela permettra de maintenir nos éléments en place lors du défilement. Il respectera toujours toutes les contraintes. Cependant, pour que cela fonctionne, nous devons d'abord mettre en place quelques éléments. Tout d'abord, votre contenu doit s'étendre au-delà de votre cadre. Dans le menu du cadre, vous trouverez le champ de contenu du clip qui permet d'afficher et masquer le contenu en dehors de votre cadre. Assurez-vous ensuite de sélectionner les cadres ou les composants imbriqués que vous souhaitez fixer en place et d'activer la position fixe. Il s'agit en fait d'une fonctionnalité de prototypage. Nous devons donc configurer quelques éléments dans un menu de prototypage. Sélectionnez le mainframe, important, le mainframe, et non l' élément que vous venez de corriger. Ensuite, accédez au menu de prototypage qui se trouve en haut à droite de votre écran. Activez le défilement. Dans mon cas, j'active le défilement vertical. D'ailleurs, vous pouvez également choisir un appareil ici. Assurez-vous simplement que la taille de votre cadre et de l'appareil correspondent pour éviter une mise à l'échelle indésirable. Maintenant, il vous suffit d'appuyer sur le bouton de lecture en haut à droite de votre écran et vous verrez que tout est bien griffonné et que vos éléments fixes restent en place. C'est vraiment idéal pour les navigations en haut et en bas ou pour les boutons flottants. Avec le prototypage, qui est un autre sujet, et Figma, vous pouvez également y ajouter beaucoup plus d'interactions et de comportements. Pour l'instant, c'est un excellent moyen de simplement faire défiler vos designs et de faire quelques premiers tests. D'ailleurs, vous pouvez également télécharger l'application Figma votre téléphone et prévisualiser en direct votre conception sur l'appareil. C'est très simple et cela reflète simplement votre écran directement sur votre téléphone. Assurez-vous que votre appareil physique que vous utilisez pour prévisualiser et que la taille de l'image dans Figma sont identiques. 11. CONSTRAINTS: : 06 Illustrations amusantes avec contraintes: Juste un peu de fun de ce côté. Des contraintes sont présentes pour qu' un design réponde aux différentes tailles d'écran. Et vous pouvez également utiliser les tailles d'écran pour créer des effets. Ici, j'ai créé une grille d'arrière-plan puis j'ai modifié la topographie, qui se trouve sur cinq niveaux, comme vous pouvez le voir ici. Ensuite, j'ai créé une petite illustration. Dans mon cas, il y a un petit monstre assis sur six colonnes. Il s'agit simplement d'un carré aux angles arrondis. Et puis j'ai ajouté de la bouche. Et vous pouvez voir que je l'ai mis en pièces, car certains d' entre eux sont placés sur la gauche. Celui-ci est placé à gauche, à droite. Et mes yeux ici, par exemple, sont centrés sur le centre. Si je redimensionne maintenant, vous pouvez voir que cela change. Regardez avec les différentes tailles d'écran. Vous pouvez donc vraiment jouer avec cela et essayer des choses amusantes. Vous pouvez ensuite tester ce qui se passerait sur l'écran du mobile. Donc, ici, j'utiliserais les mêmes éléments mais je les changerais un peu. N'hésitez donc pas à jouer avec cet exemple. 12. CONTRAINTES : 07 Limitations des contraintes: Il existe certaines limites lorsqu'il s'agit de travailler avec des contraintes. Les contraintes fonctionnent très bien tant que nous avons affaire à une configuration assez simple. Une fois que vous aurez ajouté un peu plus de complexité aux éléments, par exemple plus de contenu, vous remarquerez que vous rencontrez un problème. contenu se chevauchera car le rembourrage et les marges ne sont pas conservés. D'ailleurs, il s'agit d'un problème de Figma en CSS, ces marges et ces marges seraient toujours conservées. Mais comment mettre en place un design plus réaliste dans Figma ? C'est là qu'intervient la mise en page automatique. La mise en page automatique vous permet de créer des designs qui s'agrandissent et se rétrécissent en fonction Au cours de la prochaine partie de ce cours, nous allons donc examiner en profondeur la mise en page automatique. Nous allons voir comment configurer les composants de mise en page automatique et même des pages entières. Et nous allons également voir où il est judicieux combiner la mise en page automatique, les grilles et les contraintes. Si, à ce stade, vous ne savez pas quand utiliser les contraintes de mise en page automatique et quand les combiner, alors ne vous inquiétez pas, nous allons les parcourir étape par étape. Et je vais également vous donner un aperçu des situations dans lesquelles l'une ou l'autre est logique et de la force et des limites de chaque approche. En général, la mise en page automatique est un peu plus difficile à comprendre au début, mais elle est incroyablement puissante et c'est certainement une fonctionnalité que vous devez comprendre en tant que concepteur d'interface utilisateur. 13. DISPOSITION AUTOMATIQUE : 01 Qu'est-ce que la mise en page automatique ?: Qu'est-ce que la mise en page automatique ? La mise en page automatique vous permet de créer des cadres et des composants dynamiques qui répondent à la taille de leur contenu. Vous pouvez ainsi modifier le contenu, par exemple en modifiant la longueur du texte, tout en conservant la mise en page et l'espacement intacts. Vous pouvez utiliser la mise en page automatique sur les plus petits éléments de vos conceptions, tels que les boutons, jusqu'à composants imbriqués plus grands et complexes. Et vous pouvez même créer des pages entières grâce à la mise en page automatique. Mise en page automatique qui ajuste uniquement la taille horizontalement ou verticalement, mais vous permet également d' ajouter un rembourrage défini ainsi qu'un espace entre les éléments qui restera en place même en cas modification contenu ou ajout d'éléments. Sucré. Vous pouvez aligner et distribuer les éléments à l'intérieur du conteneur parent grâce mise en page automatique et choisir manière dont vous souhaitez les redimensionner. En quelques clics, vous pouvez vraiment créer de la magie grâce à la mise en page automatique. Mais je dois être honnête avec vous au début, c'est un peu confus et il semble que vous créez une mise en page avec du chewing-gum qui est vraiment normale et que vous allez vous y habituer. Donc, soyez vraiment indulgent avec moi, et passons en revue cela étape par étape. 14. MISE EN PAGE AUTOMATIQUE : 02 Mise en place d'un cadre de mise en page automatique: Configurons notre premier cadre à mise en page automatique. Commençons par l'exemple le plus simple, un bouton. Il s'agit essentiellement d'un cadre de mise en page automatique contenant une seule couche. Mais allons-y étape par étape. dessiné un cadre, puis ajoutez du texte avec le cadre sélectionné. Cliquez maintenant sur le signe plus à côté de la mise en page automatique dans le panneau des propriétés. Notez comment le cadre est devenu un cadre à mise en page automatique. Vous pouvez voir le nouveau symbole dans le panneau des couches. Ajoutons un peu de style. Je vais ajouter un fond de couleur pour l'arrière-plan, quelques coins arrondis. Et je vais ajuster un peu le texte. Je peux maintenant ajuster le contenu du bouton et vous pouvez voir que tous mes paramètres sont conservés. Il existe essentiellement trois manières de configurer un cadre de mise en page automatique. Tout d'abord, comme nous venons de le faire en appuyant sur le bouton de mise en page automatique dans le panneau des propriétés. Ensuite, vous pouvez choisir les raccourcis Shift et a, ou vous pouvez simplement cliquer avec le bouton droit de la souris et sélectionner Auto Layout. Tout comme vous ajoutez une mise en page automatique à un cadre, vous pouvez également le supprimer. Vous pouvez utiliser le panneau Propriétés et cliquer simplement sur Moins. Vous pouvez utiliser le raccourci Maintien, Shift et a, ou vous pouvez cliquer avec le bouton droit de la souris et sélectionner Supprimer la mise en page automatique. 15. DISPOSITION AUTOMATIQUE : 03 Où puis-je appliquer la disposition automatique ?: Alors, où puis-je appliquer la mise en page automatique ? Vous pouvez appliquer la mise en page automatique à un cadre ou à une sélection d'objets. Cela inclut les cadres avec du contenu existant, les groupes ou autres sélections de couches et tous les objets, composants et ensembles de composants, cadres nouveaux ou vides. Du texte ou des formes. Voici deux couches qui créeront un cadre autour de celui-ci, mais nous allons y jeter un œil dans une minute. Passons-les en revue plus en détail. J'ai donc ici un cadre avec du contenu, et je vais simplement le sélectionner, puis ajouter une mise en page automatique. Comme vous pouvez le constater, cela ramassera le rembourrage et positionnera et le rangera un peu si nécessaire. suite, nous pouvons toujours ajuster ces paramètres. Si j'applique la mise en page automatique au groupe comme je l'ai fait ici, le groupe sera converti en cadre ou, pour être plus spécifique, en cadre de mise en page automatique. Comme vous pouvez le voir, si je voulais supprimer la mise en page automatique, il ne nous reste plus qu'un cadre. Le groupe a disparu, mais c'est très bien, car à Figma, nous configurons notre design généralement avec des cadres imbriqués. Quoi qu'il en soit Vous pouvez également ajouter la mise en page automatique de deux composants, ce qui est très pratique et vous allez beaucoup l'utiliser. Si j'ajoute la mise en page automatique à mon composant que j'ai configuré ici, il semble que rien ne se passe car la couleur et les symboles restent les mêmes. Cependant, je peux voir ici dans le côté droit, dans le panneau Propriétés, que la mise en page automatique était Modifier. De plus, dès que je modifie ou ajoute du contenu, je peux constater que la mise en page automatique a été appliquée. Vous pouvez également appliquer la mise en page automatique ou votre variance, car il ne s'agit essentiellement que de composants. Veillez simplement à appliquer la mise en page automatique directement à votre variance et non au groupe qui l'entoure, car il s'agissait simplement de créer un cadre de mise en page automatique de toutes vos variations. Je peux également appliquer la mise en page automatique aux cadres vides. Si je le fais, comme vous pouvez le voir ici, il semblerait que rien ne s'est passé. Mais dès que j'ajoute du contenu, je constate que les règles de mise en page automatique s'appliquent. Vous pouvez appliquer la mise en page automatique à une seule couche, comme les textes. Cependant, vous remarquerez que si vous sélectionnez une balise, il n'y aura aucune option permettant de configurer la mise en page automatique dans votre panneau de propriétés situé à droite votre panneau de propriétés situé à droite. En effet, la mise en page automatique ne fonctionne que sur les cadres. Toutefois, si vous sélectionnez le texte puis utilisez le raccourci Shift a, cela créera un cadre autour de votre texte. Vous pouvez souvent le voir lorsque les utilisateurs créent un bouton rapide, car maintenant je peux changer la couleur de fond et ajouter un rayon. 16. MISE EN PAGE AUTOMATIQUE : 04 le menu d'agencement automatique: Jetons un coup d' œil à tout ce que nous pouvons gérer avec le menu Auto Layout. Une fois qu'un cadre est converti en cadre de mise en page automatique, il y a un ensemble supplémentaire de propriétés dans la section de mise en page automatique votre panneau de propriétés situé à droite. Comprenons ce que fait chacun d'eux. Orientation. Les cadres à mise en page automatique peuvent avoir deux directions, horizontale ou verticale. Notez comment l'icône du panneau des couches change en conséquence. Vous ne pouvez pas avoir les deux, mais vous ne pouvez pas imbriquer différentes directions de mise en page automatique. Plus d'informations à ce sujet ultérieurement. Espace entre. Cela crée, comme son nom l'indique, l'espace entre les éléments à l'intérieur du cadre de mise en page automatique. Remarquez que l'espace est horizontal ou vertical, selon la direction que vous avez choisie. Vous pouvez simplement saisir n'importe quel chiffre ici ou utiliser les touches haut et bas pour régler la distance. Astuce. Si vous maintenez la touche Maj enfoncée tout en utilisant les touches haut et bas pour régler l'espacement. Ils augmenteront dans la quantité de poussée définie. Donc, dans mon cas, c' est huit parce que j' utilise un système d' espacement de huit points. Vous pouvez modifier le montant de votre nudge simplement en ouvrant le menu figma sur le côté gauche. Tapez Nudge, puis définissez la valeur que vous recherchez. Outre le menu, vous pouvez également utiliser les poignées de contrôle sur le campus. Il suffit de les faire glisser pour ajuster l'espacement. Si vous cliquez sur la poignée, vous pouvez définir une valeur spécifique. Si vous ne voulez pas que les éléments soient espacés mais empilés, utilisez simplement une valeur négative. Rembourrage. Outre l'espace entre les éléments, vous pouvez également définir le rembourrage autour d'eux. Pareil, vous pouvez utiliser le menu dans lequel vous donnez une case pour le remplissage horizontal et une pour le remplissage vertical. Mais vous pouvez également développer le menu et définir des valeurs individuelles. Vous pouvez également adapter le rembourrage directement sur le canevas en faisant glisser les propres poignées de contrôle du canevas. Astuce. Si vous souhaitez changer d'horizontale ou verticale en même temps, maintenez la touche Alt enfoncée et faites glisser. Si vous souhaitez modifier les quatre côtés de la même manière, appuyez simplement sur Shift Alt et faites glisser d'autres pointes. Vous pouvez également maintenir la touche Commande enfoncée et cliquer sur Entrez votre zone de remplissage dans le menu. Vous obtiendrez alors la notation CSS, l'alignement. Le menu d'alignement vous permet de modifier le positionnement des enfants dans votre cadre de mise en page automatique. 17. MISE EN PAGE AUTOMATIQUE : 05 réglages avancés: Jetons un coup d'œil au menu Advanced Auto Layout. C'est donc un peu caché mais très puissant. Cliquez sur les trois petits points du menu Auto Layout pour afficher le menu avancé. Passons en revue chacun d'eux plus en détail. Commençons par le mode espacement. Vous pouvez choisir entre des séances d' entraînement pleines et un espace entre les séances d'entraînement. Si vous redimensionnez le cadre, vous pouvez voir que l'espace défini entre vos yeux est conservé. L'espace entre, en revanche, utilisera tout l' espace disponible et créera des espaces égaux entre les éléments directs de l'enfant. Et cela s'adaptera automatiquement lors du redimensionnement du cadre. L'avantage est que vous pouvez regrouper des éléments. Vous pouvez utiliser un cadre imbriqué de groupe ou, idéalement, un autre cadre de mise en page automatique imbriqué, comme je l'ai fait ici, mon exemple, car le cadre de mise en page automatique ne prend en compte que les enfants les plus proches, il tiendra compte de ces deux enfants. Maintenant, c'est très pratique pour aligner des groupes de deux côtés différents du cadre parent, comme dans les navigations. Je peux toujours ajouter d'autres éléments plus tard et ils seront simplement conformes aux règles de mise en page automatique définies. Astuce Vous allez probablement beaucoup utiliser cette fonctionnalité. Il y a donc deux bons raccourcis à connaître. Vous pouvez cliquer sur la case d'alignement puis, avec x, basculer entre les espaces entre les impacts. Vous pouvez également cliquer sur la poignée de commande Canvas et définir une valeur fixe pour packed et simplement taper auto pour l'espace entre les deux. Notre prochaine fonctionnalité est de tracer, d' inclure et d'exclure. Les traits ne sont pas calculés lors de la répartition de l'espace, ce qui peut les faire se chevaucher et semer la confusion en matière de développement. Vous pouvez donc régler votre course ici. Avant d'examiner l'empilage du canevas, rappelons-nous qu'il y espace entre les deux dans ma mise en page automatique et que si je le mets à une valeur négative, les éléments seront empilés. En cliquant sur l'empilage des toiles, je peux simplement modifier l'ordre. Notez que le revêtement Canvas ne modifie pas la position réelle dans le panneau des couches. Il n'y aura aucun changement. Si vous souhaitez modifier la position réelle d'un élément, sélectionnez l'élément et déplacez-le en mode de mise en page automatique à l'aide des touches de haut en bas, de gauche à droite. Le dernier est un alignement de la ligne de base du texte. J'ai donc mes articles, mais ils sont tous de tailles différentes et je veux ils soient tous placés sur une belle base. Sélectionnez donc le cadre à mise en page automatique et vous obtenez un petit aperçu. Si vous cliquez, vous pouvez voir qu'il est bien aligné. Cela dépend un peu de ce que vous recherchez, si cela a du sens dans votre conception ou non. 18. DISPOSITION AUTOMATIQUE : 06 redimensionnement automatique: Parlons du redimensionnement et de la mise en page automatique. C'est la partie la plus puissante de la mise en page automatique, mais aussi celle dont vous aurez peut-être besoin d'un moment pour vous faire une idée. Auparavant, cette fonctionnalité avait sa propre petite boîte sous le menu Auto Layout. Vous le trouvez maintenant dans une section de cadre. Donc en dessous de la largeur et de la hauteur. Le redimensionnement indique essentiellement comment l'élément se comportera horizontalement et verticalement en cas de modification du contenu ou de la taille. Nous avons trois options de redimensionnement, une largeur fixe, hauteur, un contenu de câlin, vraiment mignon et un conteneur complet. Et vous pouvez les mélanger. Vous pourriez donc en avoir un pour la hauteur et un autre pour la largeur. Commençons par comprendre nos paramètres manière un peu plus détaillée. Alors regardons d'abord ce qui est corrigé. Ici, je vais devoir mettre en page automatiquement les cadres, un avec une forme à l'intérieur et l'autre avec du texte. Réglons donc la forme sur une hauteur et une largeur fixes. Et je vais également régler le texte à une hauteur fixe. Et comme vous pouvez le voir, cela me donne déjà câlin pour une raison ici pour la verticale, mais pour l'instant je le règle à une hauteur fixe. Donc, si je redimensionne le conteneur parent maintenant, vous pouvez voir que rien ne se passe car évidemment, l'objet est défini sur fixe et il en sera de même pour le texte. Je peux donc corriger le texte et la largeur sans aucun problème. Mais comme vous le remarquez, cela m'a donné un câlin par défaut quand il s'agissait de me cacher. La raison en est que si je copie ce texte ici et que j'en ajoute d'autres, vous pouvez voir qu' il le copie, mais qu'il ne restera plus dans une zone de texte. autres éléments ne vont donc pas y répondre et nous ne voulons pas cela. Voyons ce qui se passera si je change ça pour un câlin. Je sélectionne le même texte et maintenant je change la hauteur pour étreindre le contenu. Et vous verrez que cette boîte s'adapte désormais au texte. Il utilise donc tous les textes existants , puis ajoute l'espacement et le remplissage. Lorsque vous utilisez Hug with Text, il est très important vérifier également vos paramètres de texte. Cela doit toujours être réglé sur la hauteur automatique, ou si vous travaillez avec une disposition horizontale sur la largeur automatique. Maintenant, que se passerait-il si je modifiais la largeur pour qu'elle corresponde également au contenu ? Essayons ça. Eh bien, cela n'aura pas beaucoup de sens dans ce cas, car il s'agit simplement de tout distribuer sur Auto Width, puis la boîte est réglée. Donc je ne veux pas ça dans ce cas. Mais par exemple, si je configure un bouton, c'est un excellent exemple où j'utiliserais contenu du hub horizontalement et verticalement. Comme vous pouvez le constater, il n'existe pas de solution unique qui dépend vraiment de ce que vous créez et du mélange correct des paramètres de redimensionnement horizontaux et verticaux. Maintenant, si je regarde mon cadre ici, la forme au milieu, je n'ai même pas l' option du contenu Hug. La raison en est qu'il s'agit simplement d'une forme, elle ne peut donc rien contenir pour être étreinte. Maintenant, si je sélectionne le cadre, je peux le configurer pour qu'il corresponde au contenu. Mais il ne semble pas s'être passé grand-chose. Cependant, si je change mon rembourrage ici, vous remarquerez qu' il s'adaptera. Dès que je redimensionnerais manuellement. Jetez un œil à mes paramètres de redimensionnement. Cela reviendra à corrigé. Donc, si je recommence à me faire des câlins, cela respectera à nouveau ma pagaie. Regardons notre dernier, un contenant plein. Maintenant, si je sélectionne ce cadre parent, il n'y a pas d'option remplir le conteneur. Cela est dû au fait qu'il n'y a tout simplement aucun contenant à rechercher. Prenons donc l' élément enfant ici et définissons-le pour remplir le récipient et toucher le contenant. Maintenant, si je suis en train de redimensionner les parents, vous pouvez voir qu'il conservera le rembourrage et utilisera tout l'espace disponible à partir de la taille donnée. Utilisons la même chose pour nos exemples de textes. Je vais donc le définir sur le conteneur Phil, et je vais l'ajouter en tant que conteneur complet, même si, comme vous pouvez le deviner, ce même si, comme vous pouvez le deviner, pas la meilleure solution. Donc, si je redimensionne le contenant, c'est vraiment génial, il occupera tout l'espace disponible et respectera mon rembourrage. Cependant, en hauteur, vous remarquerez que je crée un espace vide avec du texte. Habituellement, vous pouvez utiliser le conteneur de remplissage beaucoup à l'horizontale, mais nous nous en tenons généralement au contenu étreint en ce qui concerne les paramètres verticaux. Il est très important que vous commenciez à jouer un peu avec ces paramètres et que vous compreniez ce qu'ils font. Mais le mieux est de jouer avec eux dans un exemple concret. Construisons donc une voiture ensemble. 19. MISE EN PAGE AUTOMATIQUE : 07 Construire une carte réactive avec redimensionnement automatique: Appliquons nos nouveaux paramètres de redimensionnement appris pour les supprimer. Tout d'abord, je vais sélectionner le cadre parent de la carte et appliquer la mise en page automatique. Comme vous pouvez le constater, Figma essaie déjà deviner quels seraient les meilleurs paramètres de redimensionnement. Donc dans ce cas, câlin, câlin. Et c'est vraiment génial parce que, par exemple si je duplique ce contenu et que j'en ajoute d'autres, vous pouvez voir que cela fonctionne vraiment bien. Cependant, si je redimensionne, ce n'est pas vraiment ce que je recherche. Passons donc en revue chaque élément étape par étape. Mon image, je voudrais la redimensionner avec le cadre parent. Je vais donc le configurer pour qu'il remplisse le récipient. Voyons donc ce qui se passerait. Oui, ça fonctionne très bien. Je vais également mettre mon titre ici pour remplir le contenant. Et maintenant, regardez ce qui se passe si je change les textes copiés pour qu'ils se sentent contenus. Et remarquez qu'à l'heure actuelle, c'est la seule taille fixe. Ce n'est donc clairement pas ce que nous recherchons et cela se produit parce que ce n'est pas une taille qui définit la largeur de ma carte, parce que ma carte, le contenant parent, est envoyée dans un câlin. C'est donc simplement dit cela à une largeur fixe pour l'instant. Et maintenant, nous pouvons également avoir un conteneur complet ici. Et si nous redimensionnons notre carte, cela fonctionne comme prévu. N'oubliez pas que lorsque vous travaillez avec des textes, nous devons nous assurer que nos paramètres de texte sont toujours configurés pour se masquer automatiquement dans un bouton où nous sommes dans un câlin. Ce sera la largeur automatique, mais toutes les balises qui peuvent être plus longues qu' une ligne devront toujours être configurées pour être masquées automatiquement. Celui-ci doit être masqué automatiquement. Et cela doit être masqué automatiquement. Et comme je l'ai dit, Figma est devenue très douée détecter cela et l'a déjà configuré pour vous. Mais si vous rencontrez des problèmes lorsque le texte ne se comporte pas vraiment avec la mise en page automatique. Assurez-vous de vérifier ces paramètres. Et comme nous avons la largeur automatique et que nous l'avons réglée pour qu'elle s' adapte à la verticale, nous pouvons simplement ajouter du contenu. Permettez-moi de le copier et d' ajouter plus de contenu ici. Et vous pouvez voir que cela fonctionne parfaitement. Et même si je redimensionne maintenant, cela fonctionnera bien. Regardons donc notre dernier élément dans bouton OK de notre carte et celui-ci est réglé sur « câlin, câlin ». Et c'est parfait parce que câlin, câlin signifie qu'horizontalement, il utilisera toujours ce rembourrage et verticalement, il respectera également ce rembourrage et notre bouton ne fera que fonctionner pour former une seule ligne. Donc, si j'ajoute plus de contenu ici, ça va bien s'adapter. , si vous souhaitez un bouton sur toute la largeur, Toutefois, si vous souhaitez un bouton sur toute la largeur, vous devez le configurer pour qu'il remplisse le conteneur. Et vous pouvez ensuite ici avec le centre d'alignement, le contenu avec le cadre parent. Vous pouvez bien sûr adapter tout l'espacement et le rembourrage. Vous pouvez également intégrer et retirer des éléments de la mise en page automatique. Et juste comme ça, vous disposez d'une carte responsive qui s'adapte parfaitement à n'importe quel contenu. 20. DISPOSITION AUTOMATIQUE : 08 composants et instances de mise en page automatique: Comme nous l'avons appris, la mise en page automatique fonctionnait également avec les composants, ce qui est très pratique. Voici donc ma carte responsive. Ce que je veux faire maintenant, c'est sélectionner cette carte et créer un composant. Il est également très logique que ce bouton soit un composant propre, car j'utiliserai probablement instances à différents endroits. Je ne peux pas créer de composant à l'intérieur d'un composant. Donc, ce que je vais faire, c'est supprimer ce bouton, créer un composant, créer une instance de ce bouton et le remettre dans mon composant principal. L'avantage, c' est que si je sélectionne mon instance du bouton ici, vous pouvez voir qu'il hérite tous les paramètres de mise en page automatique et de redimensionnement. Donc, par exemple, si dans le composant principal, je changerais la largeur en fixe. Vous pouvez voir que l'instance hérite du paramètre. Revenons au contenu des câlins. Dans Figma, vous avez la possibilité de remplacer les paramètres de mise en page automatique de vos instances. Donc, par exemple, je pourrais régler ce bouton pour remplir le récipient. Cependant, je vous recommande vivement de conserver tous les paramètres de mise en page automatique intacts et de ne modifier réellement que le contenu du bouton, par exemple . Si vous souhaitez avoir une variante, par exemple un bouton pleine largeur ou quelque chose avec un comportement différent, je vous recommande de configurer une autre variante. OK, super. Nous allons maintenant créer une instance de l'ensemble de la carte. Je peux soit simplement faire une copie de mon composant principal, soit utiliser mon menu ici, ressources, puis simplement taper carte et vous trouverez le composant que vous recherchez. Et j'en aurai une copie ici. Vous pouvez également utiliser le panneau des ressources. Je peux désormais utiliser ces instances dans mon design afin d' adapter le contenu. Ajoutons simplement un peu plus de texte ici. Ajoutons simplement plus de titre. Ce. Je vais garder la même chose. Et puis pour les images, j'utiliserai un plugin. Donc je vais le brancher et ensuite je vais mettre Splash, le lancer. Ainsi, avec Unsplash, vous pouvez rechercher une image spécifique ou simplement utiliser l' des catégories prédéfinies. Je vais donc opter pour l'intérieur pour l'instant, sélectionner la forme. Ensuite, vous pouvez simplement sélectionner l'une des images et elle remplira la forme. Bien entendu, vous pouvez également utiliser vos propres images et simplement les importer dans Figma. Donc, ma carte elle-même fonctionne très bien lors du redimensionnement. Cependant, ce que je veux, c'est que si j'avais ces cartes ensemble, je veux qu'elles respectent également la distance. C'est donc à ce moment que l' imbrication intervient, il suffit de sélectionner les deux paniers, puis de cliquer sur Mise en page automatique pour créer un autre cadre de mise en page automatique autour de ces deux cartes. Comprenons cela. Ce nouveau cadre que j'ai créé. Si nous examinons le menu Couches, vous pouvez voir qu'il s' agit désormais du cadre parent de ces deux instances de cartes de mise en page automatique. Et c'est là qu'il y a beaucoup de confusion. Sachez donc que ces cartes héritent toujours de tous les paramètres de mise en page automatique du composant principal. Donc, si je prends l'une de ces cartes et que je la redimensionne manuellement, vous pouvez voir que tout est toujours en place. Cependant, si je sélectionne le cadre parent et que je le redimensionne, rien ne se passe. Pourquoi ça ? La raison en est que cette carte ne fait que regarder à l'intérieur. Donc, tout ce que j'ai dit dans cette carte à mise en page automatique fonctionne avec cette seule carte. La carte ne sait pas où les instances seront utilisées dans les grands groupes. C'est pourquoi je dois définir une autre option de redimensionnement pour chacune de ces cartes et lui indiquer comment je veux qu'elle se comporte avec un nouveau cadre parent. Donc, ce que je vais faire, c'est sélectionner le cadre parent, appuyer sur Entrée. Il s'agit d'un raccourci permettant de sélectionner tous les éléments enfants d'un cadre. Et je peux maintenant définir le redimensionnement pour chacune d'entre elles en même temps. Et je vais choisir le conteneur Phil. Si je redimensionne maintenant le cadre parent, vous pouvez voir qu'ils respectent la largeur. Donc, en sélectionnant le cadre parent, je peux maintenant modifier l'espace entre les deux. Et je pourrais aussi ajouter un peu de rembourrage. Et cela correspondra toujours au cadre parent, non aux éléments enfants qu'il contient. Si je souhaite apporter des modifications ici, j'utiliserais le composant de domaine. 21. DISPOSITION AUTOMATIQUE : 09 cadres d'aménagement automatique nicher Construire une navigation: Créons une navigation réactive avec une mise en page automatique imbriquée. J'ai donc ici mes différents éléments à placer dans la navigation. Et ici, je mets en place un cadre qui va contenir ma navigation. Donc, la première chose que je vais faire est transformer mon article ici en un cadre de mise en page automatique. Et je vais aussi en faire un composant. Et je vais faire de même avec mon bouton. Et juste pour avoir un design épuré, je vais également transformer mon logo et mon avatar en composants. Je vais récupérer cet article ici. Je vais créer trois instances et les appeler blog et contact. Je vais maintenant ajouter une instance de mes boutons, ainsi qu'une instance de mon avatar. Et je vais renommer le bouton pour m'abonner. Maintenant, je vais tous les sélectionner et les transformer en appuyant sur Shift a dans un cadre de mise en page automatique. Et je vais placer le cadre dans ma navigation. Alors laisse-moi mettre de l'ordre un peu. Je vais changer l' espacement en multiple de huit. Donc 16 ans, c'est peut-être un peu petit, 24. Et je vais jeter un coup d'œil à ce qui sera beau. Je pourrais l'envoyer ici ou je pourrais aussi utiliser le col d' alignement de la ligne de base du texte. Ça ne marchera pas avec mon avatar. Je vais le laisser et utiliser mon outil d'alignement ici. Je vais non seulement créer une instance de mon logo, mais aussi la placer dans mon cadre de navigation. Maintenant, la seule chose qui me manque c'est de sélectionner mon cadre de navigation, qui est maintenant mon nouveau cadre parent. Et je vais en faire un cadre de mise en page automatique maintenant mettre de l'ordre dans mon rembourrage et mon espacement. Je veux donc que ce soit également un multiple de huit pour accompagner mon système d'espacement à huit points. Et est-ce que cette position est au centre ? Je vais juste placer tout cela au centre. Maintenant, si je redimensionne, cela ne fonctionnera cependant pas. Maintenant, votre première idée pourrait être d' utiliser le menu de redimensionnement. Cependant, il existe une bien meilleure solution. N'oubliez pas que nous avons affaire à la distribution. Utilisons donc notre menu avancé. Passez ensuite de l'état emballé à l'espace entre les deux. Maintenant, il utilise tout l'espace disponible lorsque je redimensionne. Ce qui est génial, c' est aussi que si je retire des éléments ou si j'ajoute des éléments, cela fonctionnera toujours. Je peux même l'imbriquer plus loin. J'ai donc pu choisir tous mes éléments de liens. Et je vais le faire ici, dans le panneau des couches, car cela montre un peu mieux la structure. Je pourrais maintenant appuyer sur Shift a et créer un autre cadre. Je vais juste appeler ça Links. Maintenant, je pourrais le distribuer à distance à l'intérieur de ceux-ci. Et je peux également modifier la distance entre ce cadre imbriqué. Je pourrais également supprimer ce groupe imbriqué et lui demander de modifier ses propres éléments. De cette façon, nous aurions à nouveau trois éléments enfants. Et maintenant, mon espace entre trois enfants qui travaillent encore mais qui se répartissent entre trois enfants. Notez qu'avec la mise en page automatique, il n'y a généralement pas qu'un seul moyen de le créer. Vous pouvez obtenir ce résultat de plusieurs manières . Vous pouvez par exemple définir tout votre espacement ici dans vos composants principaux. Donc, dans vos atomes, il n'y a ni bien ni mal. Cependant, considérez qu'un peu de rembourrage ici et un peu d'espacement ici seront probablement assez confus. Je vous recommande donc de vous en tenir à une technique et discuter avec votre équipe de ce qui vous convient le mieux. 22. DISPOSITION AUTOMATIQUE : 10 positionnement absolu: Nous pouvons positionner de manière absolue d'autres éléments dans des cadres à mise en page automatique Qu'est-ce que cela signifie ? J'ai donc ici un cadre de mise en page automatique. Je voudrais faire glisser ce nouveau sticker ici, et je voulais m' asseoir 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 placer au-dessus de l'image car il fait partie de la mise en page automatique dès qu'il entre dans le cadre. Donc, ce que je peux faire maintenant, c'est le placer dans le cadre, le sélectionner. Et puis, dans le menu du cadre de droite, tout en haut se trouve le petit bouton caché appelé position absolue. Si je clique dessus, je le retirerai du flux de mise en page automatique. Je peux maintenant le positionner librement à l'intérieur de mon cadre. Cependant, comme 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, donc les récites ne s'appliquent pas. Cependant, je vais maintenant voir apparaître à nouveau des contraintes pour les éléments positionnés de manière absolue. Je vais donc corriger cela sur le côté droit et vers le haut. Maintenant que j'ai redimensionné, il va rester sur le côté droit du cadre comme je le souhaitais. D'ailleurs, si vous souhaitez ajouter quelque chose comme une bulle d'alerte qui dépasse le cadre, vous pouvez également le faire. Ajoutez-le au cadre, réglez-le sur un positionnement absolu. Ensuite, vous devrez peut-être le positionner légèrement avec les touches fléchées pour qu'il ne sorte pas du cadre. Ensuite, vous devez sélectionner un cadre parent et décocher le contenu du clip. Vous allez maintenant pouvoir le voir. Et il bougera toujours avec votre cadre. 23. DISPOSITION AUTOMATIQUE : 11 mises en place automatiques plus complexes: Comprenons les configurations de mise en page automatique plus complexes. Ici, j'ai configuré différentes options pour la carte. Ajoutons la mise en page automatique à chacune d'entre elles pour familiariser un peu plus avec le processus. Comme vous le remarquerez, l' essentiel est de commencer par le plus petit élément, puis de gravir les échelons. Commençons par notre première mise en page. Si je devais simplement appliquer mise en page automatique à l' ensemble du cadre parent, cela fonctionnerait. Cependant, j'aurais la même distance entre tous les éléments de l'enfant et je ne le veux pas. Laissez-moi ouvrir le menu des couches pour que vous puissiez le voir un peu mieux. Je vais créer des cadres de mise en page automatique imbriqués ici pour lui donner plus de structure. Donc, pour toute ma section d'introduction, la sous-ligne du titre et la date, je vais sélectionner et appuyer sur Shift a. Et je vais créer un cadre de mise en page automatique imbriqué. Vous pouvez voir qu'ici, l' espacement est réglé à zéro. Donc, si je l'augmentais, j'obtiendrais plus de distance. Je peux maintenant prendre le cadre parent, ajouter la mise en page automatique, et vous verrez que cela fonctionne maintenant. Il s'agit d'un cadre imbriqué. Vous pouvez maintenant voir que l'espacement ne s'applique qu'aux éléments enfants directs. Il est maintenant réglé à 14 et je pourrais l'augmenter ou le diminuer. Je veux le mettre à 16 pour avoir un multiple de huit. La mise en page automatique a automatiquement récupéré tout mon rembourrage à gauche, à droite, en haut et en bas. Et il est également composé de 14. Je vais appuyer sur Commande et cliquer sur mes options de remplissage. N'oubliez pas qu'il s'agit du raccourci pour la notation CSS. J'en ajoute 16, et de cette façon je peux changer tout le rembourrage à 16 en un seul clic. Il ne me reste plus qu'à définir les options de redimensionnement pour le cadre S. Jusqu'à présent, rien ne se passe. Je sélectionne l'image et je la laisse sur fixe, fixe. Ensuite, je sélectionne mon cadre imbriqué. Et maintenant, c'est pourquoi vous devez faire attention. Si j'envoie celui-ci pour remplir le récipient, je sélectionne l'élément enfant. Vous verrez que ce problème est toujours réglé sur Corrigé. Il est donc important de sélectionner le parent, d'appuyer sur Entrée, puis vous obtenez immédiatement l'ancien élément enfant et de le configurer pour qu'il remplisse le récipient. Je suis donc en train de configurer les éléments enfants ainsi que ce conteneur parent, maintenant c'est sa propre nouvelle mise en page automatique pour remplir le contenu. Je configure mon texte à copier pour qu'il soit plein de contenu. Et je vais m'assurer qu' il est réglé sur les maximums automatiques. Je peux dire que mon lien est un câlin, un câlin car je le traite un peu comme un bouton. Et maintenant, vous verrez que tout fonctionne très bien. Passons à notre deuxième mise en page. Ici, nous devons combiner la mise en page automatique horizontale et verticale. Réfléchissons à la structure avant de commencer. est donc essentiellement ce que nous avons mis en place auparavant. Nous aurons un cadre imbriqué ici. Ensuite, nous créons un cadre autour de la partie droite. Et puis nous avons ce cadre parent avec un cadre de mise en page automatique horizontal. Allons-y. Je vais donc sélectionner à nouveau mes titres ici, mon intro et je vais appuyer sur Shift a, et cela devient un cadre de mise en page automatique. Vous devriez bien sûr toujours le nommer. Disons que cela fait les gros titres. Ensuite, je sélectionne mes textes à copier et mon lien, et j'appuie à nouveau sur Shift a. Et je peux aussi nommer ce côté droit ou droit. Maintenant, je sélectionne le cadre de mes parents. Et comme vous pouvez le constater maintenant, je n' ai ici que les deux éléments relatifs aux enfants. Il va donc appliquer la disposition horizontale. Jetons également un coup d'œil à cette mise en page. Et vous pouvez voir que cela est automatiquement réglé sur horizontal. Donc, tout comme Figma prend en charge le rembourrage et l'espacement et prend également en compte les instructions. Nous allons donc nettoyer cela et ajouter notre redimensionnement tout de suite. Je mets donc cela ici pour étreindre le contenu. Je règle mon texte pour qu'il soit contenu et que sa hauteur soit automatique. Et maintenant, j'ai mon dernier élément, qui est un cadre de mise en page automatique imbriqué. Vous devez d'abord entrer à l'intérieur, sélectionner tous les éléments enfants avec N pour les configurer pour qu'ils remplissent le récipient. Ensuite, je sélectionne à nouveau le parent et je le mets également sur le conteneur plein. Maintenant, pourquoi cela se produit-il ? Cela se produit parce que le cadre parent est configuré pour s'étreindre. Je peux simplement le redimensionner. Réglez cette option pour remplir le récipient. Et maintenant, ce sera de nouveau correct. Mon côté droit est prêt. Mon image ici. Je voulais repartir chez un réparateur. Ce que je pouvais faire, c'est changer de position si je le voulais au centre ou quelque chose comme ça avec un alignement. Et maintenant, voyons ce qui se passe si je le redimensionne et que cela fonctionne. Tout simplement génial. Vous vous demandez peut-être ce qui se passerait si je réglais pour qu'il remplisse également le récipient, puis ils partageraient cet espace. Donc, vous pourriez aussi avoir quelque chose comme ça. Mais dans mon cas, je veux que ça reste réglé. Redéfinissons notre design ici, j'ai un mélange de disposition horizontale. Voici donc mon cadre imbriqué horizontal et ma mise en page automatique verticale. Ainsi qu'un petit élément positionné de manière absolue dans le coin supérieur droit. Sélectionnons d'abord nos titres comme d'habitude, Shift a pour créer un cadre de mise en page automatique, ailleurs, nous pouvons toujours utiliser le menu. C'est exactement pareil. Je sélectionne ensuite l'image et mon nouveau cadre imbriqué, et j'appuie à nouveau sur Shift a. Et maintenant, je n'ai que des éléments enfants verticaux dans mon cadre parent avec la même distance. Je sélectionne donc mon cadre parent et transforme en cadre de mise en page automatique. Cela ne ressemble donc pas à ce que je recherche, car cet élément est maintenant considéré comme un élément enfant. Je vais sortir cela du cadre pour l' instant et m'en occuper plus tard. Ok, alors voyons d'abord ce qui s'est passé ici. Cela m'a ôté mes rembourrages. Je vais juste ajouter ça. Je vais appuyer sur Commande et cliquer sur mes champs de remplissage et je vais le régler sur 16 tout autour. Donc, je reviens à ce que je veux. Maintenant, je vais faire comme d'habitude et sélectionner ici l'élément enfant de mon cadre imbriqué, conteneur plein. Mon cadre imbriqué voulait également remplir le récipient. Mon image comme d'habitude, je pars à un endroit fixe et je la règle pour qu'elle remplisse le récipient. Et maintenant, prenons celui-ci ici. Voyons ce qui se passe. Oui, il garde le contenant parce que le parent est prêt à faire des câlins, mais il a déjà assez de contenu pour le faire. Redimensionnons donc maintenant, voyons si cela fonctionne. Cela fonctionne très bien. La seule chose que je n' aime pas, c'est ce rembourrage. Il est également réglé sur un petit bit, est réglé sur trois. C'est bien trop petit. Mettons-le à huit. Parfait. Et maintenant, je vais m'occuper mon élément de positionnement absolu. Je vais donc prendre ça et l'intégrer. Il sera à nouveau considéré comme un élément enfant jusqu'à ce que j'active la position absolue. Il est maintenant retiré du flux de mise en page automatique. Je peux maintenant le positionner où je le souhaite dans mon cadre. Et n'oubliez pas que je peux ajouter des contraintes. Donc maintenant, si je redimensionne, cela fonctionne, juste une petite erreur se produit ici. Faisons en sorte que ce cadre imbriqué je n'ai pas dit, ressemble à un contenant. Changeons cela. Maintenant. Tout est comme je le souhaite. Encore une fois, vous pouvez entendre si vous sélectionnez ce cadre, si vous positionnez l'image de manière à l' avoir en haut, ou si je l'aime bien ici au centre. Cela dépend de vous. Ici, c'est sans aucun doute ma mise en page la plus complexe. Regardons ce qui se passe. J'ai donc deux sections principales. Il y a la barre inférieure ici et le contenu principal. Le contenu principal est à nouveau divisé en disposition horizontale. J'ai donc ce côté et mon image. Commençons par le contenu principal. Nous allons donc sélectionner tout le texte sur le côté droit (shift a), et nous l'avons transformé en cadre de mise en page automatique. Maintenant, je garde cette option sélectionnée, sélectionne mon image, j' appuie à nouveau sur Shift a. Maintenant, j'ai ma partie supérieure. Je vais dire que ce n'est pas la meilleure signification. Ensuite, je vais regarder ce qui se passe ici avec ma barre inférieure. Alors jetons un coup d'œil. Si nous pouvions simplement transformer tout cela en mise en page automatique, penseraient que tous les éléments que j'essaie d' intégrer, nous n'en voulons pas, donc nous devons faire mal d'imbrication ici. Je commence donc par mes avatars ici, je les sélectionne tous, j' appuie sur Shift a, et vous pouvez voir que cela se passe, c'est qu'ils appuie sur Shift a, et vous pouvez voir que cela se passe, c'est qu' les positionnent bien l'un à côté de l'autre. Je ne le veux pas, mais je peux les empiler simplement en faisant glisser ou vous pouvez également ajouter un espacement négatif. Tu peux le faire à ton goût. Je pense que c'était quelque chose comme ça. Maintenant, vous pouvez voir que ce n'est pas celui-ci qui était au-dessus. Donc, ce que je peux faire, c'est de prendre le menu avancé et d'accéder à l' empilage de canevas. Le premier au sommet. Parfait. Ok, alors ces deux-là semblent être sur la gauche avec leur propre distance. Nous allons donc sélectionner ces deux. Appuyez sur Shift a, transformez-les en cadre de mise en page automatique. Et puis, ici, j'ai même pu adapter l'espace. Je vais juste le mettre à 24 et avoir mes multiples de huit, bien rangés. Je peux maintenant sélectionner les deux cadres imbriqués que j'ai créés, et je vais créer un autre cadre de mise en page automatique autour d'eux. Maintenant, je peux les positionner de manière à ce qu'elles soient belles, toutes au milieu, par exemple et je vais devoir regarder ce que je vais faire de cette barre ici. Je dirais donc que je pourrais laisser cette barre à son propre élément, son propre élément enfant. Mais voyons voir, peut-être que plus tard, j'ai ajouté à l'un de mes cadres imbriqués. OK, donc maintenant je l' ai ici. , je vais appeler cette barre du bas. Et je vais avoir la ligne. Permettez-moi de mettre cela dans la position que je souhaite qu'ils soient. Maintenant, je prends mon conteneur parent et je le transforme en cadre de mise en page automatique. Ça a l'air bien. Et maintenant, définissons le comportement de redimensionnement. Donc, ici, je sélectionne à nouveau ce cadre, appuie sur Enter All the child elements pour remplir le conteneur. Et je le mets ici pour remplir à nouveau le récipient, mon image, je la laisse fixée, corrigée. Et ces récipients pour la partie supérieure, je suis également en train de remplir un récipient. Voyons voir le conteneur principal réglé sur hoc. Je vais régler cela sur Corrigé dès maintenant pour qu'il ne soit pas redimensionné. Maintenant, je vais jeter un œil à ma barre inférieure. Ces images ici. Je les laisse à un contenu fixe et malin. Tout va bien. Ici. Quel contenu qui a l'air bien, son contenu, génial. Le cadre parent contient également du contenu. Et maintenant, ce que je fais ici, c'est de le placer dans un espace entre les deux. Et puis je n'ai qu' à m'occuper de ma ligne ici que je vais configurer pour remplir le récipient également. OK, voyons si cela fonctionne. Ma partie supérieure et ma ligne fonctionnent donc, mais j'ai oublié de placer la barre entière ici pour remplir un récipient. Redimensionnons à nouveau. Fantastique, ça marche. Donc, comme vous pouvez le constater, tant que vous avez une approche stratégique de la mise en page automatique, ce n'est pas vraiment si difficile. Pensez-y simplement à de petites pièces que vous collez ensemble et non à un seul design volumineux et écrasant. J'aime utiliser l'approche selon laquelle j'ai d'abord configuré mon cadre imbriqué. Je pense donc d'abord à la structure, puis j'ai dit au redimensionnement. Et puis, en fin de compte, comme ce que j' aurais encore à faire ici, c'est de m'assurer que tout est un multiple de huit et respecte mon système d' espacement des points d'aide. Et bien sûr, il a également dû examiner éléments des enfants monastiques pour s'assurer que tout est conforme à mon système d'espacement. 24. NOUVEAU ! DISPOSITION AUTOMATIQUE : variables pour l'espacement et le rembourrage: Utilisation de variables pour le rembourrage, l'espacement et Figma. Jetons d'abord un coup d'œil à la collection que nous allons utiliser pour notre espacement. Cliquez sur le fond gris du canevas, puis vous verrez apparaître les variables locales. Cliquez sur le signe variable local et vous verrez vos collections. Vous pouvez modifier n'importe quelle collection que vous avez déjà créée et vous pouvez également créer de nouvelles collections ici. J'ai déjà créé ces variables pour vous. Mais si vous souhaitez en créer d'autres, il vous suffit de cliquer sur créer des variables. Ensuite, pour l'espacement, vous utiliserez un certain nombre de variables, et vous pouvez créer n'importe quelle autre variable de votre choix. Vous pouvez également ajouter des variables entre les deux, simplement en faisant glisser les variables que vous avez créées dans votre collection Mais supprimons celui-ci ici. Vous pouvez le faire en cliquant avec le bouton droit de la souris, puis en cliquant simplement sur Supprimer la variable. Comme vous pouvez le constater, j'utilise des multiples de huit pour mon système d'espacement Notez également que vous pouvez cliquer sur la variable d'édition, puis définir où vous souhaitez que cette variable d'espacement soit utilisée Pour l'instant, fermons simplement notre collection et appliquons cet espacement et ce rembourrage à notre carte Cela ne fonctionnera que sur la configuration des éléments avec mise en page automatique. Sélectionnons notre carte, vous pouvez voir qu'actuellement sur l'élément parent ici, aucun espacement n'est défini Je pourrais choisir une variable simplement en cliquant dans ce champ sur le symbole de la variable , puis en choisissant une variable dans ma liste déroulante. Cependant, cela ajouterait de l' espace autour de ma carte. Maintenant, je n'en ai pas vraiment envie. Je veux cet espacement ici à l'intérieur de ma carte. Cette partie est là pour ajouter le rembourrage. Je vais sélectionner ce cadre de mise en page automatique imbriqué. Vous pouvez donc voir que c'est déjà un multiple de huit, mais je veux utiliser ma variable, afin de m'assurer que tout est aligné sur mon design. Encore une fois, je sélectionne le champ. Je vois apparaître la variable C. Cliquez dessus. Je peux maintenant choisir mon bloc d'espacement M. Je vais également le choisir ici, et je peux également l'utiliser pour l'espacement N'oubliez pas que nous pouvons utiliser ce qui serait l'espace entre les deux. Mais je choisis une variable, et je reprends la huitième, que j'ai déjà configurée manuellement auparavant. Si nous le configurons en tant que composant et que nous extrayons maintenant une instance, vous pouvez voir que si je sélectionne cette mise en page imbriquée dans mon instance, les variables sont héritées du composant principal Si je redimensionne, tout restera en place et mes variables définiront l'espacement et le rembourrage de Si je modifiais la valeur d'une variable, donc prenons simplement mon bloc d'espacement et augmentons le nombre, alors n'importe quel endroit où j'utiliserais cette variable dans mon design suivrait 25. VARIABLES: Notez que les variables sont un sujet vraiment très vaste et puissant. Ils ont été introduits fin juin 2023. Si vous n'êtes pas familier avec les variables, j'ai une étude approfondie sur ce sujet. 26. NOUVEAU ! DISPOSITION AUTOMATIQUE : définir une largeur minimale et une largeur maximale: Configuration d'une largeur minimale et maximale avec Figma. Ici, je n'ai pas de mise en page automatique des voitures. Maintenant, je peux redimensionner cette carte, mais à un moment donné, elle sera trop étroite. À un moment donné, ça va devenir trop gros. Donc, ce que je voulais faire, c'est définir une largeur minimale comme ici. Et une largeur maximale. Commençons par une largeur minimale. Je vais juste le redimensionner jusqu'à ce que je trouve que c'est là que ça reste beau Ce sera donc environ 240. Je peux donc aller ici et je vois une petite erreur dans la largeur. Je reçois maintenant cette liste déroulante et je peux sélectionner la largeur minimale de l'annonce. Et je vais simplement taper ici le numéro que je veux et je peux le modifier à tout moment. Voyons maintenant ce qui se passe si je redimensionne maintenant. Vous pouvez voir que je peux toujours prendre la plus grande taille. Mais si je réduis la taille, vous pouvez voir qu'une fois que j'ai atteint ce seuil, deux lignes rouges, un PM, et je suis empêchée de continuer à redimensionner. Idem pour une largeur maximale. Je pense que je vais régler ça ici, peut-être 450. Donc, même procédure avec une liste déroulante, ajoutez une largeur maximale, je vais opter pour 450 Et encore une fois, je peux toujours la remplacer par n'importe quelle autre valeur. Maintenant, si je redimensionne, vous pouvez voir que je peux le pousser plus loin, mais je peux modifier la taille entre ces deux ensembles de Min et Max Et vous pouvez utiliser les deux ensemble. Ou vous pouvez simplement utiliser Min ou Max si vous souhaitez supprimer plutôt que de simplement sélectionner votre composant. Et vous verrez que Min et Max sont définis ici si vous passez également la souris dessus Et vous pouvez voir ici, supprimez Min et Max. Vous pouvez également configurer des variables, puis les utiliser comme valeurs minimales et maximales. Alors jetons un coup d'œil. Si nous passons à notre conception, j'ai créé une collection avec une largeur minimale et maximale de 250,450 Cependant, si je sélectionne simplement la carte, opte pour Appliquer la variable et disons ajouter la largeur minimale. Ensuite, elle serait ajoutée comme largeur minimale, comme la largeur principale de l'ensemble de cette carte Cela n'aurait donc rien à voir avec Min ou Max. Cela voudrait simplement que, si je le redimensionne, comme si je supprime la variable que j'ai définie ici, je devrais d' abord entrer dans add min-width, puis j'obtiendrai un Et à partir de là, je peux maintenant appliquer ma largeur minimale. Et puis je fais de même pour la largeur maximale. Je reçois un nouveau champ et j'applique maintenant ma variable pour la largeur maximale en. Maintenant, si je redimensionne , c'est ce que je recherche. Maintenant, je peux le transformer en composant, extraire une instance, et vous verrez que cette instance suivra les valeurs Min et Max du composant principal. D'ailleurs, nous en utilisons beaucoup moins, sachez que vous pouvez également régler Min et Max sur la hauteur 27. NOUVEAU ! MISE EN PAGE AUTOMATIQUE : wrap de la mise en page automatique: Enveloppe automatique de la mise en page Sur la gauche, j' ai deux composants, une carte de base et une carte de newsletter. Et sur la droite, j' ai un cadre parent. Et dans le cadre réservé aux parents, j'ai des copies de ces cartes. Maintenant, vous pouvez voir ce cadre parent configuré en tant que mise en page automatique. Et depuis juin 2023, nous n'avons pas seulement mise en page automatique horizontale et verticale nous avons également configuré le wrap. Voyons donc ce qui se passe maintenant car j'ai configuré ce paramètre sur Horizontal. Et vous pouvez voir qu' il est redimensionné. Mais à un moment donné, il faudrait passer à la nouvelle ligne. Ici, je peux utiliser du wrap. Bonjour, ajoutez simplement ce wrap, puis rien ne se passera car mes composants sont toujours configurés avec mise en page automatique et ils ne savent pas à quel moment je veux qu'ils se cassent. Nous pourrions les changer d' conteneur Phil à une largeur fixe. Maintenant, ils ont une largeur fixe, si je les redimensionne, ils passeront toujours à la nouvelle ligne Mais je voudrais peut-être un peu plus de liquide. Je veux que ce soit fluide et, à un moment donné, suis passé à la ligne suivante. Donc, ce que je peux faire, c'est définir une largeur minimale et une largeur maximale. Je vais donc l'ajouter à mon composant principal. Ajoutons simplement une largeur minimale de 250, et ajoutons également une largeur maximale de 450 Ce n'est pas une newsletter. Je vais juste ajouter une largeur minimale pour l'instant et voir à quoi cela ressemble parce que j'aime bien qu'elle s'étire. Ce que je dois faire, c' est sélectionner le parent. Si j'appuie sur Entrée, je sélectionne toutes les instances en même temps. Et je le remets maintenant pour remplir le récipient. Actuellement, hériter de minmax est encore un peu bogué. Donc, ce que je vais faire, c'est sélectionner à nouveau toutes les instances et m'assurer de réinitialiser les tailles. Vous n'avez vraiment besoin de réinitialiser les tailles que si vous rencontrez des problèmes. Dans le cas contraire, c'est le résultat que vous devriez obtenir. À présent, lorsque les instances atteindront leur taille minimale, elles seront réorganisées dans la nouvelle ligne 28. NOUVEAU ! Créer une page entière de mise en page automatique: Configurons une page entière avec mise en page automatique. Ici, j'ai créé une page de base. Il contient une navigation, ainsi que trois instances de cartes de mise en page automatique. Tout est déjà configuré selon une mise en page automatique, donc ma navigation est déjà configurée pour être espacée et réactive. Mes cartes sont également configurées avec une mise en page automatique. Toutefois, si je redimensionne mon cadre parent, il ne réagira pas Si je transforme simplement le cadre parent en cadre de mise en page automatique, cela ne fonctionnera pas car ils seront alors tous répartis verticalement. J'ai besoin d'ajouter une certaine structure par la mise en page automatique Nesting. D'abord. Je vais sélectionner les trois cartes et créer un cadre de mise en page automatique autour d'elles. L'espace entre les deux est maintenant essentiellement ma gouttière que je peux ajuster Je peux maintenant utiliser le cadre de mes parents et ajouter une mise en page automatique. En gros, considérez votre design comme les différentes sections que vous joignez à la mise en page automatique finale sur un cadre parent. Je vais maintenant ajouter le redimensionnement. Et ce que j'aime faire, c'est de partir des éléments les plus bas de l'enfant , c'est-à-dire du centre, jusqu' à la structure parentale. Je vais maintenant sélectionner mon groupe de cartes et appuyer sur Entrée. En appuyant sur Entrée, je sélectionne tous les enfants dans ce cadre de mise en page automatique. Et je vais maintenant modifier le redimensionnement de tous ces éléments mineurs afin de remplir le conteneur horizontalement. Donc, si je sélectionne à nouveau le groupe de cartes Définir le cadre apparent, je peux le tester et je peux voir que cela fonctionne bien. Le contenu de ce groupe de voitures répond donc. Mais si je redimensionne le cadre parent plutôt que le coût, le Web lui-même ne sait pas encore quoi faire Certains doivent également configurer l' ensemble du groupe pour remplir le récipient. Comprenons donc cela à nouveau. Ce groupe est configuré pour remplir le récipient et les enfants plus âgés de ce groupe sont également configurés pour remplir le récipient. Ce sont deux choses différentes. Je vais également définir la navigation pour remplir le conteneur. Et maintenant je redimensionne le parent. Et vous pouvez voir que cela fonctionne. Maintenant que le cadre de mise en page automatique fonctionne peut-être. Je peux configurer et nettoyer un peu l'espacement. L'espacement ici serait la distance entre mes différentes sections et la marge que je pourrais définir avec un rembourrage horizontal Je pense que je vais atteindre le top zéro. Et je veux juste ajouter un peu d' espace en bas pour que mon design puisse respirer. Mettre à jour Figma a introduit des variables. Je pourrais donc également utiliser ces variables pour définir mes valeurs d'espacement. Maintenant, je tiens à mentionner à nouveau que j'aurais également pu ajouter ce rembourrage à mon groupe de cartes, c'est vraiment à vous de décider L'important est d'être cohérent. Cela dépend également beaucoup de ce que vous construisez. Par exemple, cela fonctionne parce que ma navigation ne s'étend pas sur toute la largeur. Supposons que cette navigation ait une couleur de fond, alors ce ne serait sûrement pas la solution idéale. Donc, si je veux que nous travaillions tout en conservant les 48 % de marge que j'ai actuellement sur le cadre parent pour la gauche et la droite, je dois d'abord enlever cette marge aux parents. Je vais donc le mettre à zéro. Et je vais le mettre à zéro ici. Maintenant, tout est en pleine largeur. Je vais maintenant ajouter les 48 dans la navigation. Je vais sélectionner l'ensemble du groupe de cartes et en ajouter 48. Redimensionnons maintenant pour voir si tout fonctionne. Et cela fonctionne très bien et j'ai maintenant une navigation sur toute la largeur Dès que vous aurez une idée précise de vos sections, de vos paramètres de redimensionnement et de ce que vous souhaitez obtenir Il s'agit littéralement de jouer avec votre mise en page. Essayez-le, dupliquez des cartes et des objets d'affilée, et emportez-en quelques-uns. Et vous pouvez toujours modifier le redimensionnement ainsi que vos marges individuellement. vous essayez également d'ajouter du texte, veillez à toujours les imbriquer lorsque vous ajoutez de nouveaux groupes. Et vous pouvez même ajouter des sections entières, comme par exemple une section d'introduction Assurez-vous que les marges restent cohérentes. Donc, ici, j'ajouterais à nouveau 48. Ensuite, jouez simplement avec les paramètres d'arrière-plan , les marges et l'espacement. Ne configurez donc pas une page entière ensuite essayer d'ajouter une mise en page automatique partout. Commencez par les plus petits composants, vos navigations, votre carte, toutes vos différentes sections , jusqu' à ce que vous créiez le cadre parent Cela le rendra facile et évolutif. Allons un peu plus loin et souvenons-nous de nos assistants dont nous avons déjà entendu parler Commençons par le texte ici. Donc, pour l'instant, nous avons le choix entre remplir le contenant et ensuite il sera redimensionné avec les parents Mais il se peut qu'il devienne trop gros à un moment donné. Si nous modifions cela et que nous redimensionnons, alors nous avons une taille fixe, mais notre texte ne répond pas Je pourrais cependant utiliser la largeur maximale de Maya pour la Je vais donc utiliser la largeur maximale et je vais la définir autour de 900 Ensuite, je dois juste m' assurer que je l'ai réglé pour remplir le récipient. Vérifions si la largeur maximale est toujours en place. Oui. Et maintenant, nous pouvons voir que tout reste bien en place et que si je prends une taille plus petite , ce sera le cas avec la nouvelle taille Ajoutons maintenant d'autres cartes. Je veux donc ajouter toutes ces cartes ici et là , juste une seule et même instance que les autres. Je viens juste d' ajouter du contenu, alors mettons-les ici et vous pourrez voir que c'est ce qu'ils font maintenant. Je veux qu'ils se terminent dans la ligne suivante. Nous savons donc que nous pourrions utiliser notre fonction d'encapsulation ici et la mise en page automatique. Je l'ai donc défini sur le cadre parent. Mais pour l'instant, rien ne se passe car ces cartes n'ont pas de largeur fixe ou minimale. Donc ce que je vais faire, c'est sélectionner un parent. J'appuie sur Entrée et j'ai maintenant sélectionné tous les éléments enfants. Donc toutes les cartes. Et je peux maintenant ajouter une largeur minimale, et je vais juste la saisir à la main Je pourrais également utiliser des variables pour cela. ai donc une largeur minimale de 250, et je pourrais également définir une largeur maximale. Faisons comme ça , disons 450. Déplaçons donc un peu ce paramètre vers le haut et redimensionnons. Et puis vous pouvez voir que cela fonctionne là-bas. Vous allez trouver ici ce qui n'est pas toujours distribué de manière égale. Ce que vous pouvez faire, c'est ajouter une sorte de carte fantôme ici si vous voulez qu'elles soient toutes égales, puis vous pouvez mettre ce paramètre à zéro. Vous pouvez également configurer un composant que vous pourriez appeler Ghost ou Space SAP. Mais en fait, je vais le laisser à l'état naturel comme ça. Alors maintenant, nous voulons simplement ajouter notre onglet nourriture. Et remarquez que je veux que ce set de plats soit redimensionné, mais je veux que les termes et conditions soient respectés. Je vais sélectionner ce cadre. Et puis souvenez-vous que nous pouvons également taper ou choisir ici. Ou nous pouvons cliquer à l'intérieur de notre alignement et simplement appuyer sur X pour basculer entre automatique et espace entre les Alors maintenant je vais simplement ajouter celui-ci ici. Nettoyons ça. Je veux que ce soit en dehors de mon groupe de cartes. Si vous semez le bordel, revenez en arrière. Maintenant je vais y revenir et c'est ce que je recherche. Jetons donc un coup d'œil. Si cela fonctionne, sélectionnons cette barre et assurons-nous qu'elle est configurée pour être pleine. Oui. Et maintenant tout devrait fonctionner pour que vous puissiez voir que mon texte est en place. Mes cartes se redimensionnent bien et mon pied de page répond également à tout redimensionnement utilisant vraiment toutes les fonctionnalités de mise en page automatique ce petit exemple, cela peut être un peu accablant Ne vous inquiétez pas, il suffit de prendre un élément à la fois étape par étape 29. DISPOSITION AUTOMATIQUE : 13 même hauteur pour tous les enfants: Les paramètres, la même hauteur pour tous les éléments avec mise en page automatique sont en fait assez simples. Ici, j'ai quatre cartes de mise en page automatique différentes et vous pouvez voir qu'elles sont déjà toutes configurées de manière réactive. En raison de la longueur du contenu différente, ils ont des hauteurs différentes. La plupart du temps, ce sera très bien, mais il peut arriver que vous souhaitiez que toutes ces cartes aient la même hauteur. Si nous devions nous rendre à Cannes à une hauteur fixe, les chariots ne réagiraient toutefois plus aux changements de contenu et de taille. est donc pas vraiment ce que nous voulons. Ce que nous voulons vraiment, c'est dicter la carte avec le plus de contenu, la hauteur pour toutes les autres. Et il y a une petite astuce que vous pouvez utiliser pour que cela fonctionne. Tout d'abord, nous devons créer un cadre parent autour de cela. Nous sélectionnons donc tous nos éléments enfants, appuyons sur Shift a et avons créé un cadre de mise en page automatique autour d'eux. Je vais appeler ce parent. Je vais donner à ces parents et à la couleur de fond, et je vais ajouter un peu de rembourrage. Maintenant, je vais sélectionner le parent, appuyer sur Entrée pour sélectionner tous les éléments de mon enfant. Et je vais maintenant les configurer pour toucher le contenant verticalement et le remplir horizontalement. Mon contenant parent, je dois maintenant avoir réglé pour le réparer et le serrer dans mes bras. Et maintenant, vous pouvez voir que tout se distribue bien, même en changeant la taille. Si nous modifiions le contenu, cela s'adapterait également automatiquement. Il s'adaptera donc toujours à la carte qui contient le plus de contenu. essentiel est que les éléments soient réglés à hauteur et que le parent soit prêt à s'étreindre. Si vous souhaitez que certains éléments restent en bas, il vous suffit de sélectionner la carte, accéder au menu Avancé et de passer à l'espace entre les deux, qui fonctionne horizontalement et verticalement. 30. DISPOSITION AUTOMATIQUE : 14 techniques d'empilage: Dans votre design, vous aurez probablement des sections dans lesquelles vous aurez plusieurs cartes ou éléments similaires que vous souhaitez empiler. Par exemple, mes cartes peuvent être distribuées en lignes ou en colonnes. Commençons par mon premier exemple. Toutes mes cartes sont déjà configurées en tant que cadres réactifs à mise en page automatique. Donc, ce que je vais faire, c'est sélectionner toutes les cartes d'affilée. Et cela peut être autant que vous le souhaitez. Ensuite, créez un cadre de mise en page automatique imbriqué. J'appuie donc sur Shift. Je vais le faire pour toutes mes rangées. Je vais maintenant sélectionner le cadre parent et appliquer la mise en page automatique ici, soit en appuyant sur Shift a, soit via le menu. Maintenant, il ne me reste plus qu'à configurer mon redimensionnement. Je sélectionne mon cadre, j'appuie sur Entrée. Maintenant, je reçois les rangées. Je vais déjà les configurer pour qu'ils remplissent le récipient. J'appuie à nouveau sur Entrée, et maintenant je reçois tous les éléments enfants, y compris toute la carte , et je les règle pour qu'ils remplissent le contenant également. Maintenant, si je redimensionne le cadre parent, toutes mes cartes se distribuent bien. De plus, si je modifiais le contenu, cela s'adaptera automatiquement. Et je pourrais par exemple ajouter plus de cartes à une rangée. Ils se répartiraient ensuite de manière égale dans cette rangée. Je n'ai donc pas besoin d'avoir des montants égaux dans toutes les lignes. Si je voulais que mes cartes aient la même hauteur, je pourrais aussi le faire. Appuyez sur Entrée, puis appuyez à nouveau sur Entrée pour accéder réellement aux éléments enfants et régler la hauteur pour remplir le récipient. Mon deuxième exemple, au lieu de créer des lignes, je veux créer des colonnes. Je sélectionne donc toutes les cartes d'une colonne. Et j'appuie sur Shift A pour créer un cadre de mise en page automatique autour de celui-ci. Je vais faire exactement la même chose avec ma deuxième colonne. Ne pas sélectionner le cadre de mes parents. Et je le transforme également en cadre de mise en page automatique. Je vais juste ranger un peu. Donc, ici, faisons une distance de 40 pour les deux. Et je veux qu'il y ait un espace entre les 40. Donc, si je dois maintenant régler mon redimensionnement maintenant en appuyant sur Entrée, puis j' obtiens mes colonnes et je les ai dites pour remplir le conteneur. Appuyez de nouveau sur Entrée. Maintenant, il reçoit tous les éléments de mon enfant, toutes mes cartes, et je les configure également pour qu'ils remplissent le contenant. Si je redimensionne maintenant, mon design répondra aux colonnes. Et c'est pareil ici. Vous pouvez simplement ajouter des cartes individuelles à toutes vos colonnes. Vous pouvez également ajouter des colonnes entières à votre conception. Dans mon exemple, j'ai tout réglé pour remplir le récipient. Mais ce que je pourrais aussi faire, c'est sélectionner une colonne et la régler sur une largeur fixe. Maintenant, j'aurais une colonne fixe et toutes les autres seraient réactives. Vous pouvez donc vraiment jouer avec ça. 31. DISPOSITION AUTOMATIQUE : 15 limitations de la disposition automatique et de leur solution: La mise en page automatique est incroyable, mais elle comporte également une limitation. Enquêtons et laissez-moi également vous montrer une petite solution de contournement. J'ai donc ici un cadre de mise en page automatique qui contient des cartes de mise en page automatique. Et ces cartes sont toutes prêtes à remplir un contenant. Si je redimensionne, vous verrez que cela fonctionne parfaitement. Ainsi, dans ces exemples, nous avons toujours eu une distribution égale des trois cartes. Si je ne le veux pas, je pourrais sélectionner une carte et la changer en largeur fixe. Si je le fais, cette carte conservera la largeur que je lui ai donnée et toutes les autres resteront fluides. Et ce sont à peu près deux options qui me sont données avec la mise en page automatique. Donc, ce qui ne fonctionnera pas avec la mise en page automatique c'est que j'aurai une distribution comme celle-ci, par exemple , j'utiliserai 40 pour cent pour un élément, puis je distribuerai le reste de 20 pour cent. Laissez-moi vous montrer en quoi consiste cet exemple simplifié. J'ai donc ici un cadre de mise en page automatique contenant deux images de largeur différente. Ils sont actuellement définis sur une largeur fixe. Si je le change pour remplir le conteneur, vous pouvez voir que les images passeront immédiatement à une nouvelle taille égale. Peu importe le nombre d' images dans votre rangée. Ils auront toujours la même largeur s'ils sont configurés pour remplir le récipient. Alors disons que je ne veux pas ça, je veux que celui-ci retrouve sa taille d'origine. Alors voyez ce qui se passe lorsque je le redimensionne. Dans mon menu de redimensionnement. Il est maintenant passé de Phil à corrigé automatiquement. Donc, si je redimensionne le cadre parent, il utilisera toute la largeur. Cependant, une image restera fixe et l'autre utilisera l'espace restant. y a donc aucun moyen de conserver les proportions avec la mise en page automatique. Ce que je pourrais faire si je voulais une distribution comme celle-ci , c'est de prendre la mise en page automatique de mon cadre parent. Et maintenant, je vais appliquer une grille. Je vais passer aux colonnes et je vais ajouter un peu de marge. Maintenant, je peux les configurer pour qu'ils s'insèrent dans les colonnes. Et vous pouvez voir que j'ai maintenant une distribution inégale de 2,3. Si je les place maintenant à gauche et droite et que je redimensionne le cadre parent, ils garderont ces proportions. Nous pouvons bien sûr sortir du réseau et obtenir ce très bel effet. Revenons à notre exemple original. Donc, ce que j'ai fait ici, c'est que j'ai retiré la mise en page automatique du cadre parent principal et appliqué une grille. Notez que tous les autres éléments comme ma carte et ma navigation, sont toujours configurés avec la mise en page automatique, comme avant. La mise en page automatique fonctionne donc à l'intérieur de ces éléments, mais autour d'eux, j'applique maintenant mes contraintes et je les place toutes à gauche, à droite, pour répondre à la grille. Donc, si je redimensionne la grille maintenant, alors à l'intérieur de la carte, la mise en page automatique fonctionne. Toutefois, les éléments se comporteront avec la grille. Comme j'utilise la grille, je peux maintenant modifier le nombre de colonnes qu'ils occupent. Modifiez par la présente la distribution de mon design à mon goût. Et cela fonctionnerait toujours. Bien sûr, quittez le réseau. Et vous obtenez une mise en page comme celle-ci avec une distribution inégale. Malheureusement, ce n'est peut-être pas non plus une solution parfaite. Comme pour la croissance du contenu, il se peut que vous ne puissiez pas conserver l'espacement horizontal lors de la suppression de la mise en page automatique. C'est cependant le problème de Figma. Ce ne sera pas un problème avec le CSS plus tard. 32. DISPOSITION AUTOMATIQUE : 16 contraintes et comparaison de la disposition automatique: Récapitulons et comparons la mise en page automatique et les contraintes pour comprendre quand utiliser quoi. La mise en page automatique est sans aucun doute une fonctionnalité plus puissante et vous allez probablement l'utiliser un peu plus également. Nous avons des directions, nous avons un espacement entre les éléments, rembourrage horizontal et vertical que nous pouvons définir, nous pouvons nous aligner avec la mise en page automatique. Et nous avons bien sûr notre menu Resize et la puissance d' imbriquer différentes mises en page automatiques et de combiner toutes ces fonctionnalités avec des contraintes, nous pouvons définir des contraintes horizontales et verticales. Et nous pouvons également définir des éléments fixes. Notez que si vous souhaitez définir éléments fixes dans un prototype, vous devez utiliser des contraintes. Vous n'aurez pas cette option avec la mise en page automatique. Dans les projets de plus grande envergure, vous allez probablement séparer le prototypage d'une taille fixe de votre conception réactive dans un autre fichier. Quoi qu'il en soit, ce n'est donc pas vraiment un problème. Récapitulons les avantages et les limites des deux lorsqu'il s'agit de configurer des éléments tels que des sections ou des pages entières. La mise en page automatique est donc parfaite. Si vous avez une distribution égale. Cela ne fonctionnera pas bien avec distributions inégales, car si vous dites que tous les éléments de votre enfant doivent remplir le contenant, ils auront toujours automatiquement la même taille. Donc ça ne marchera pas. Si vous souhaitez travailler avec un ou plusieurs éléments fixes et l'autre fluide. Ce n'est pas un problème dans mise en page automatique et fonctionnera très bien. Configuration de vos composants. Dans la mise en page automatique, c'est généralement une très bonne idée et cela fonctionnera la plupart du temps. Il suffit de noter. Ici, nous parlons de n'importe quoi, d'un bouton à des éléments complexes plus imbriqués tels que des cartes, des menus déroulants. Tout cela doit être configuré dans la mise en page automatique. Vous pourrez ensuite utiliser ces composants de mise en page automatique réactifs, soit dans une configuration de mise en page automatique complète soit dans une mise en page avec des grilles et des contraintes. Donc, tous ces petits éléments ici seraient toujours mis en page automatiquement, mais ils se trouveraient dans une grille et utiliseraient des contraintes. Jetons donc un coup d'œil à cela. Une distribution égale fonctionnera très bien. Comme tu peux le voir. Vous pouvez utiliser l'une ou l'autre approche. Dans ce cas, vous préférerez probablement utiliser l' approche de mise en page automatique si possible, car le seul inconvénient des grilles et des contraintes est que l' espacement horizontal ne sera pas conservé. C'est un problème de Figma et non de CSS. Si vous souhaitez utiliser une distribution inégale et travailler avec réactivité. Et c'est vraiment une raison d' opter pour des contraintes et des grilles. N'oubliez pas que les anciens composants que vous allez placer sur le réseau seront toujours réactifs. La seule limite que vous aurez est le rembourrage horizontal avec du contenu croissant qui ne sera pas conservé. Si vous souhaitez combiner fixe et fluide, vous pouvez toujours utiliser des grilles et des contraintes en imbriquant simplement un cadre dans une grille. Cependant, il s'agit peut-être d'une solution un peu compliquée. Cela dépend vraiment de ce que vous construisez à l'intérieur de vos composants, sauf si vous avez une bonne raison. Pourquoi n'utilisez pas de contraintes uniquement parce que, comme vous pouvez le constater, la marge ne sera pas conservée. Ainsi, dès que vous redimensionnez, les choses se croisent. Encore une fois, c'est un problème de Figma et non de CSS. Comme vous pouvez le constater, il s' agit vraiment de ce que vous essayez de réaliser. Cela dépend de votre équipe de la durée de la configuration, vous décidez de vous assurer de parler à votre équipe de développement. Et n'oubliez pas que Figma n'est qu'un outil pour démontrer ce que vous essayez de construire. Vous n'êtes pas en train de créer le produit final et ce n'est pas grave si vous avez besoin de documenter certains de ces éléments et d'avoir une conversation à ce sujet. 33. DISPOSITION AUTOMATIQUE : 17 images de rapport d'aspect fixes: Vous avez peut-être remarqué qu'il n'existe actuellement aucun moyen de conserver le rapport hauteur/largeur des images dans Figma. Qu'est-ce que cela signifie ? Cela signifie que la hauteur et la largeur de cette image, lorsque je la redimensionnerai, ne seront pas redimensionnées proportionnellement. Cela peut fonctionner avec certaines images, mais parfois vous souhaiterez simplement conserver cette taille. Il y a une petite astuce que tu peux utiliser. Accédez à la section communauté et saisissez le rapport hauteur/largeur. Vous aurez une vue d'ensemble de plusieurs fichiers. Personnellement, j'aime bien utiliser celui-ci, mais la plupart d'entre eux fonctionneront probablement très bien. Double-cliquez puis cliquez sur pour obtenir une copie. Le fichier sera désormais dupliqué sur votre compte Figma. Dans le dossier, vous trouverez de bonnes explications. Donc, si vous voulez vraiment comprendre comment tout cela fonctionne, tout est expliqué en détail ici. Si vous voulez être paresseux, prenez simplement le format d'image que vous recherchez. Donc, dans mon cas, c' est 16 sur 9. Ensuite, je le copie, reviens à mon dossier. Et je vais juste le coller ici pour l'instant. Donc, si je pouvais échanger l'image et ajouter celle-ci pour la rendre un peu plus petite pour qu'elle s'adapte. Ajoutez-le ici, retirons mon café ou laissez-le pour que vous puissiez voir la différence. Ensuite, je l'ai réglé pour qu'il remplisse également le récipient. Et maintenant que je redimensionne, vous pouvez voir que cela conserve le rapport hauteur/largeur et que celui-ci ne le fait pas. Donc, ce que je veux faire, je veux simplement ajouter cette image à l'intérieur d'ici. Enlevons ça. Et maintenant, nous allons d'abord nous assurer que cela a le bon rapport hauteur/largeur que je souhaite. Alors que je travaille avec 16 à 9, clipsons-le ici, puis mettons-en 160, et veillons à ce que ce soit réglé sur 90. Génial. Vous pouvez également dessiner un cadre réglé 16 x 9, puis simplement ajouter l'image par-dessus. Maintenant, ce que je dois faire, je dois l'exporter. Je vais l'exporter à trois fois sa taille, JPEG et l'exporter. Génial. Maintenant, je vais sélectionner l'image ici, et je vais en fait supprimer cette superposition. C'est donc la vraie image. Et je vais choisir l'image. Et je vais sélectionner l' image que je viens d'exporter. Et maintenant, cela se trouve à l'intérieur de cette configuration et vous pouvez voir que c' est une configuration assez complexe. Si je redimensionne maintenant, cela conservera le rapport hauteur/largeur. 34. BREAKPOINTS : 01 Un design ne fonctionnera pas pour toutes les tailles: Un seul design ne fonctionnera pas pour toutes les tailles. Qu'est-ce que je veux dire par là ? OK, maintenant nous configurons nos pages et composants réactifs. Cependant, nous sommes toujours confrontés à un problème. Le même design ne fonctionnera pas appareils mobiles comme sur les ordinateurs de bureau plus grands. En un seul pas. Il ne fonctionnera que dans une plage spécifique. Comment pouvons-nous y faire face ? Ce que nous devons faire, c'est configurer différentes gammes pour notre conception. C'est ce que les points de rupture entrent en jeu. Un point d'arrêt définit un certain point où le design peut s'adapter. Ainsi, tout en continuant à utiliser comportement réactif entre ces points d'arrêt, nous avons reconsidéré la mise en page générale une fois que nous sommes entrés dans une nouvelle plage. Donc, dans mon exemple, vous pouvez voir que jusqu'au point de rupture a, j'ai ma configuration mobile, donc c'est mon paramètre par défaut. Et puis, à partir du point de rupture a, je change la navigation et je change un peu la mise en page générale. Cela fonctionne jusqu'au point de rupture B. Ce que je suis alors à nouveau, utilisant les mêmes éléments, adaptant le délai d'expiration pour fonctionner sur la nouvelle taille de l'écran. Cela ne signifie pas que tout doit s'adapter à un certain point de rupture. Comme vous pouvez le constater, ma navigation ici reste la même. Alors que Figma propose d' excellentes fonctionnalités pour faire face à une conception réactive, à savoir les contraintes de mise en page automatique et les grilles. Il ne nous donne actuellement aucune automatisation pour mettre en place des points d'arrêt. Nous devons donc le configurer nous-mêmes. 35. BREAKPOINTS : 02 Pensez à des composants uniques en adaptation, et non à des pages entières!: Il est important de penser à des composants qui n' adaptent pas des pages entières. Il ne s'agit pas vraiment de créer une nouvelle page complète par point d'arrêt. N'oubliez pas que nous travaillons selon une approche de conception basée sur les composants. Il s'agit donc vraiment de déterminer à quel point d'arrêt un composant s'adapte. Et cela peut se produire de différentes manières. Parfois, vous devez modifier l'ensemble du composant. Par exemple, sur un écran plus petit, vous pouvez avoir une navigation dans le menu des hamburgers, qui se transformera une barre de navigation avec des liens sur des écrans plus grands. Les éléments tels que les cartes ou les sections de héros peuvent nécessiter une configuration complètement différente pour les écrans plus petits et plus grands. Vous pouvez même décider d'ajouter ou de supprimer complètement certains éléments pour les écrans plus ou moins grands. Cependant, dans de nombreux cas, il est efficace de simplement adapter l'espace et l'espace occupé par l'élément. Il peut s'agir de la même carte utilisée sur tous les écrans. Nous distribuerions cependant différemment, donc des quantités différentes de cartes par rangée. Et nous pourrions également spécifier la largeur. Cela peut être fait en pourcentage ou en un certain nombre de colonnes de la grille. Cela dépend vraiment de la configuration de vos pages. Et bien entendu, les éléments généraux tels que les marges et les garnitures peuvent être adaptés, de même que la taille du texte. Vous pouvez donc voir qu'il s'agit vraiment de considérer chaque élément et chaque point d'arrêt individuellement. En général, nous voulons changer le moins possible et autant que nécessaire. Gardez les choses simples. 36. POINTS DE rupture : 03 points d'arrêt dans CSS: Avant de configurer nos points d'arrêt dans Figma, voyons d'abord comment ils fonctionnent en CSS. En CSS, les points d'arrêt sont mis en œuvre avec les requêtes dites multimédia. Une requête multimédia dit essentiellement Navigateur payant, vérifiez la largeur. Et s'il est plus grand ou plus petit que x, affichez ici le design ou les modifications que j'ai définies pour vous. Vous pouvez configurer autant de requêtes multimédia que vous le souhaitez ou selon vos besoins. Mais vous constaterez que la plupart des modèles utilisent entre trois et cinq. Vous avez peut-être entendu parler du terme mobile pour la première fois. Bref, cela signifie que vous configurez d' abord le plus petit design, vous pouvez le considérer comme votre paramètre de base pour l'ensemble de la page. Alors seulement si vous voulez adapter quelque chose, par exemple sur mon cas, mon titre sur mobile, cela peut être un 32 ou une RAM. Et je veux qu'il soit plus grand, donc 64 ou quatre RAM sur un écran plus grand. Ensuite, je remplacerais ce paramètre. Tout le reste restera en place. Il utiliserait donc le même poids de police, la même hauteur de ligne, etc. Ce n'est que si je l'annule lors de la prochaine requête multimédia qu'il sera remplacé. Comme vous pouvez le constater, c'est la raison pour laquelle nous n'avons pas besoin de mettre en place un design complet et de le documenter à chaque nouveau point d'arrêt. Nous devons documenter la base dont nous disposons et ensuite tout changement qui se produira à partir de là. Cela ne signifie pas non plus nécessairement que toutes vos conceptions sont configurées sur mobile. Et plus tard, vous verrez ce qui va se passer. Parce que si votre principal groupe cible est une taille d'écran plus grande, alors vous devez tout d'abord concevoir pour celui-ci et Figma. Cependant, en ce qui concerne la documentation, vous pouvez en discuter avec votre équipe de développement et probablement abord documenter tous vos paramètres de base , puis voir ce qui pourrait changer. 37. POINTS DE rupture : 04 Quels points de ruptures dois-je utiliser ?: Quels points d'arrêt devez-vous utiliser ? Si vous comptez travailler sur un projet existant, tout cela est probablement documenté dans le guide de style. Dans les grandes entreprises, elles auront probablement leur propre page de guide de style. Voici donc un exemple couvrant des décennies et celui-ci est public. Ils peuvent le visiter à Decade Lawn Dot Design. Et c'est absolument fantastique. Vous devriez donc passer au numérique. Et puis vous pouvez voir plus bas ici, vous choisirez les directives et la mise en page. Vous pouvez voir sur quel produit vous travaillez. Donc, dans notre cas, ce seront des directives Web. Ensuite, vous pouvez consulter toute la documentation ici. Vous pouvez voir que dans leur cas, ils utilisent un système de grille et que vous obtenez des informations plus anciennes. Et plus bas, je trouve des informations sur les points d'arrêt qu'ils utilisent. On peut également vous dire qu'ils utilisent un système existant et qu'ils utilisent simplement un paramètre par défaut. Dans ce cas, vous recevrez probablement un lien vers la documentation. Et puis, dans cette documentation, vous trouverez généralement les points d'arrêt. Donc, ici, par exemple, c'est Bootstrap et vous pouvez voir que ce sont les différents points d'arrêt et que vous pouvez utiliser ces valeurs. Voici un autre exemple pour Tailwind, et vous pouvez voir que la documentation peut varier, mais qu'elle sera toujours similaire. Ainsi, dès que vous savez ce que vous recherchez, vous pouvez constater que ce sont les différents points d'arrêt utilisés. Et vous pouvez également voir qu' ils sont tous assez similaires. S'il n'y a toujours absolument aucune information et vous pouvez simplement choisir ce que vous voulez. Ensuite, je vous recommande d'utiliser des systèmes populaires tels tailwind ou bootstrap et de simplement choisir leurs points de rupture. Cela ne signifie pas que vous devez utiliser le système par la suite ou tout autre composant ou paramètre. Absolument pas en prenant simplement les points de rupture pour l'instant dans la mise en place de notre design Figma. Comme nous l'avons déjà vu, les points de rupture ne sont pas identiques mais très similaires dans la plupart des systèmes. Cela est dû au fait que le groupe le écrans possible par gamme. Parfois, cela se simplifie pour les appareils mobiles, les tablettes, les ordinateurs portables et les ordinateurs de bureau. Ce n'est pas vraiment si simple car les tailles d'écran sont assez dynamiques, alors ne vous fiez pas à cela. Il s'agit vraiment de capturer la plupart des tailles d'écran au sein de ces différents groupes. Donc quelqu'un qui fait déjà toutes ces recherches pour moi. C'est pourquoi, personnellement, j'aime simplement prendre en compte les points de rupture existants. Mais si vous vous demandez si vous pouvez simplement configurer vos propres points de rupture, oui, théoriquement, vous pouvez également définir vos propres points de rupture. N'importe quelle valeur fonctionnerait. Vous pouvez également modifier les points d'arrêt du système existant. J'aurais toujours été un peu prudente avec ça. Je préfère m'en tenir à ce que l'on me donne et se concentrer sur mon design. 38. BREAKPOINTS : 05 Mise en place de points d'arrêt à Figma: Nous adorons que les points d'arrêt soient prêts, mais nous n'en avons pas dans Figma. Que pouvons-nous faire ? Eh bien, nous pouvons créer les nôtres. Voici donc les points de rupture que j'ai obtenus de la part de mon équipe. Ce que je vais faire maintenant, c'est créer une représentation visuelle des points d'arrêt donnés dans Figma. De cette façon, je peux voir les différentes gammes auxquelles j'ai affaire. Donc, en gros, comment je le fais, je commence par ici, vous pouvez voir que ma taille de base qui se trouve ici sera mes paramètres par défaut. Et en tout cas, j'utilise 320, qui est un j'utilise 320, vieil iPhone comme E. Donc, il est vieux et assez petit, il devrait vraiment être l'une des plus petites tailles qui soient. Et puis c'est tout ce que j'ai par défaut et ça continue jusqu'à ce que je clique. Vous pouvez voir ici S, qui est 506, 76. Donc c'est ce que ça commence, et c'est maintenant ma gamme S. Et tout cela fonctionnera jusqu'à ce que j'aie 768 et ainsi de suite. Alors le dernier ici serait mon très grand, qui commence à 1200 secondes. Il s'agit donc de la largeur minimale, 1 200. Donc, ici, ça commence à 1 200 et tout ce qui va au-delà se trouverait dans la gamme Excel. Donc, nous ne l'avons configuré qu'une seule fois pour mon projet, et maintenant je le transforme en composant et je peux maintenant utiliser des instances pour les tests. Parfois, j'aime ajouter des guides pour une vue d'ensemble plus facile, mais cela dépend vraiment de vous. Ensuite, je copie les éléments que j'ai l'intention de configurer en tant que composants et je peux maintenant les tester ici. Donc, d'habitude, je configure déjà tout dans la mise en page automatique. Et maintenant je peux voir jusqu'à quelle taille les choses fonctionnent. Et quand j'ai besoin de m'adapter. Dans cet environnement de test, je peux tester des composants individuels. Je peux tester toute la section. Donc, comme comment quelque chose fonctionne d'affilée. Ou je peux également tester des pages entières. J'ai généralement ma propre page configurée pour tout cela et j'appelle cela des tests réactifs. C'est vraiment un terrain de jeu pour moi. Une fois que j'aurai une idée claire de ce qui fonctionne et de ce qui doit être adapté à quel point d'arrêt, je peux commencer à documenter. 39. BREAKPOINTS : 06 Tester les composants réactifs: Laissez-moi vous montrer un exemple de la façon dont je teste un composant réel. Nous allons prendre la navigation à titre d'exemple. ce moment, je suis sur ma page de design, et c'est ainsi que j'aime mettre en place mes projets. Cela peut être complètement différent pour votre équipe. J'aime avoir une section qui s'appelle développement. C'est donc ici que se trouvent toutes mes créations. Et puis j'ai une page où tous mes styles et composants sont documentés. Ensuite, j'ai une autre section, les tests réactifs. C'est là que nous allons jouer avec notre composant. Et j'en ai un autre qui s'appelle Playgrounds. C'est donc là que je peux simplement essayer différents modèles et tester des choses. Et j'en ai un qui s'appelle la gestion des fichiers. Donc, ici, j'ajoute des éléments tels que vous pouvez voir mes points de rupture, titres et des informations plus anciennes. Cela ne fait pas vraiment partie du design. Il pourrait donc concevoir une page ici. Je dois généralement avoir des tailles d'écran, donc une pour mobile et une pour ordinateur de bureau. Et j'aime m'en tenir aux mêmes tailles. Je vais donc avoir celui-ci ici, régler l'Edge 375, et mon bureau réglé à 1 440. Il se peut que vous ayez des tailles différentes. C'est très bien. Cependant, j'aime les garder à la même taille car c'est comme ma référence que je dessine plus tard dans mes prototypes. Ensuite, lors de mes tests réactifs et de mes composants, je vais m'assurer que toutes les autres tailles fonctionneront également. Comme vous pouvez le constater, j'ai configuré une navigation pour mon mobile avec un menu de hamburgers. Et je sais que sur des écrans plus grands, je veux avoir quelque chose avec des liens ou une navigation différente. Donc, ce que je dois découvrir maintenant et documenter, c'est ce qui va se passer entre ces tailles et même au-delà de la taille, probablement sympa de les copier et de les coller dans ma configuration de test réactive. Et j'ai déjà configuré ces éléments avec la mise en page automatique, vous pouvez aussi bien le faire ici pendant les tests, peu importe. L'important est que vous disposiez d'un élément réactif lors des tests. Maintenant, vous pouvez voir que je peux maintenant commencer à tester la taille à laquelle ils vont fonctionner. Vous pouvez donc voir que le mobile ici n'est pas un gros problème car il fonctionnera à peu près n'importe où. Mais celui-ci va à un moment donné se retrouver dans le logo. De plus, je veux garder un peu d' espace car je pourrais ajouter d'autres liens. Je pourrais donc me débarrasser de ce que S ne marchera pas. Em, je pourrais m'en sortir avec moi, mais ce n'est pas l'idéal. Mais à partir de L, cela semble être une valeur sûre. Je vais probablement tester cela avec quelques points de menu supplémentaires dans une annonce de ma documentation, sur nombre de liens que vous pouvez avoir ici. Mais je vais laisser ça pour l'instant. Ce que j'aime faire, une fois que je connais les tailles, je dessine un petit rectangle. Et est-ce vraiment juste pour moi, pour ma propre orientation ? Et je vais le marquer avec une couleur que j'ai appelée assistante. Maintenant, je sais que celui-ci commence à entrer en jeu à l. Et jusqu'à présent, mon menu, mon menu mobile qui fonctionne en excès , commence ici de l'excès jusqu'à n. Donc il couvre ces trois points d'arrêt et puis seulement ici changent de hits et à partir de L et M, j'utilise un design différent. 40. BREAKPOINTS : 07 Documenter les composants réactifs: Donc, une fois que j'ai testé mes composants, je dois maintenant les documenter. J'ai donc mes découvertes et je passe maintenant aux styles et aux composants. Et vous pouvez voir que j'ai déjà configuré la navigation pour vous. Regardons donc cela plus en détail. C'est vraiment là que je garde tous les composants principaux et je commence vraiment par les plus petits, jusqu'aux atomes. Vous pouvez donc le voir, voici le logo de et j'ai les différentes icônes pour ouvrir et fermer les liens, tout est ici. Et puis vous pouvez voir que j'ai ici des molécules mayas, donc elles sont combinées. Et il s'agit essentiellement du composant principal réactif que j' utiliserai des instances dans ma conception. Ce sont donc les deux que nous venons de tester et vous vous demandez peut-être pourquoi le troisième fait, je vais l'expliquer dans une seconde. Donc, faisons défiler la page vers le bas et vous verrez que c'est ici que je vais avoir une section supplémentaire intitulée « comportement réactif ». C'est pourquoi je documente ce que nous venons de tester. Donc, ici, j'ai simplement ajouté une instance de mon composant. Et vous pouvez aussi voir que j'ai ajouté un fil de pain, puis j'ai dit que cela fonctionnerait pour surmonter l'excès de point d'arrêt. Vous pouvez également le déplacer, vous pouvez voir comment il se comporte. Et puis, plus bas, nous avons notre plus grand. Et comme vous pouvez le constater, cette conception fonctionne avec une grille. J'ai donc ajouté la grille pour montrer comment elle se trouve dans la grille. Maintenant, vous vous demandez peut-être pourquoi nous en avons un autre pour S M. La raison en est que permettez-moi de sauter ici et vous pouvez voir que j'ai également une documentation sur le fonctionnement de ma grille. Et ma grille change de marge à S M , donc la plus petite a une marge de 24. Ensuite, j'opte pour 40 et ensuite je choisis 80. Permettez-moi donc de revenir à ma documentation ici. Et maintenant, vous pouvez voir ici avec mes composants principaux, vous pouvez voir que celui-ci est configuré avec 24. Ensuite, celui-ci est configuré avec une marge de 40. Et celui-ci est configuré ici avec une marge d'ATP. En CSS. Cela se déclenchera automatiquement, mais ainsi, il me sera plus facile de les réutiliser dans mon design Figma. Il en sera donc de même pour la typographie. J'aurais besoin de vérifier ma feuille de style typographique. Et ici, vous pouvez voir que j'ai mes paramètres par défaut, donc mes paramètres mobiles d'abord, et je dois vérifier si quelque chose s'adapte. Donc, par exemple, mon H1, qui s'adapterait à la taille S. Et puis à nouveau à la taille L. Pour ma navigation, il n'y a pas de changement, donc je n'ai pas à m'inquiéter à ce sujet. Je vais donc créer un composant distinct, par exemple si j'utilise H1 dans une section de héros, j'en crée un pour le mobile d'abord plutôt qu'un pour la taille à partir de et la taille L. Ce n'est rien dont vous aurez besoin en CSS plus tard, car s'active automatiquement si c'est seulement la taille qui change. Cependant, j'aime bien le faire ainsi lorsque je travaille à Figma. C'est donc très clair et je conçois toujours avec la configuration réelle. Donc oui, c'est ainsi que j'aime tester et documenter tous mes composants. Et ce n'est pas une règle établie, c'est juste quelque chose que j'ai aimé faire. Vous pouvez donc également trouver des moyens légèrement différents de documenter cela en fonction de votre système. Jetons donc un autre coup d'œil. De toute évidence, chaque composant est également un peu différent. Vous pouvez donc voir ici que c'est un élément qui me permet de m'en sortir, mais je documente comment il s'intègre dans la conception à différents points d'arrêt. Et je peux également combiner des points d'arrêt comme vous le voyez ici. J'ai donc vraiment essayé de simplifier cela autant que possible. Et ici, vous pouvez voir que j'utilise un composant pour mobile et ensuite j'ai un autre composant. Et encore une fois, cela peut s' intégrer très différemment dans mon design, mais j'ai toujours le même composant. Un petit conseil. Si vous testez des éléments d'affilée, comme des cartes, vous ne voulez pas configurer un composant complet pour chacune de ces lignes. Vous souhaitez simplement configurer ce panier et ceux documentés. Mais vous savez que vous allez avoir des marges variables dans votre design. Vous pouvez donc simplement créer ce cadre en arrière-plan. Ensuite, vous pouvez soit utiliser des contraintes. Donc, ici, je l'ai mis en place avec une marge de 40 de chaque côté. Ou vous pouvez également le transformer en une mise en page automatique , puis vous assurer que la marge de 40 % est définie ici. De cette façon, vous pouvez tester une seule carte sur différentes tailles d'écran, mais vous n'avez besoin de documenter qu'une seule carte. Et il en va de même si vous avez quelque chose d' une largeur fixe qui se trouve au milieu. Donc, dans cette carte, c'est comme une sorte de fenêtre modale. Et ce que je fais, c'est simplement placer cela avec des contraintes au centre. Et donc je peux simplement dire, voir jusqu'à quelle taille d'écran cela va fonctionner. 41. BREAKPOINTS : 08 hack des variantes réactives: Je veux vous montrer une petite astuce que j' utilise pour organiser mes composants réactifs. Tout d'abord, je m'assure que j'ai tous les atomes, donc tous les éléments que j' utilise comme composants propres, j'aurai ensuite des instances, par exemple de ce logo et de l'icône à l'intérieur de mon navigations à l'intérieur de mes composants ici. Vous pouvez également voir qu'il ne s'agit pas en fait de composants uniques, mais j'ai créé un ensemble de composants avec variations pour chacune des différentes tailles. Ici. Vous pouvez voir que j'ai nommé ces rayons de navigation et rayons X, voici mon signe que cette composante a plus de variance pour différents points d'arrêt. La variance est ensuite nommée après les points de rupture qu'elle dessert. Donc, celui-ci est un excès, celui-ci est la navigation S et M, et celle-ci est la navigation l et x l. Je le garde parce que je pourrais peut-être le diviser en deux plus tard . Alors je le renommerais dans la navigation L et j'en créerais un autre pour la navigation XL. Je pourrais également appeler cette navigation par défaut. Donc, si je n'avais cette navigation que pour l'ensemble de ma page, nous l'appellerons navigation par défaut. Et seulement si plus tard je le remplacais, je l'appellerais navigation, puis S, M ou L ou peu importe. Peu importe comment vous le nommez exactement, il doit simplement être très clair pour tous ceux regardent que vous faites référence à vos points de rupture. C'est pourquoi il est si important d'ajouter également à ces informations sur le système de grille , les points de rupture , les marges et les garnitures que votre documentation ces informations sur le système de grille, les points de rupture, les marges et les garnitures que vous utilisez. Et cela doit également être la documentation visuelle, et pas seulement la documentation technique. J'aurais donc tout aussi bien pu les configurer en tant que composants uniques qui fonctionneraient également. Mais pourquoi j'aime la variante, c'est parce que je peux maintenant ajouter une propriété appelée Breakpoint. Et voyons à quoi cela ressemble dans mon design. Donc, dans ma conception, j'ai maintenant ma navigation ici. Et vous pouvez voir que c' est le signe qu'il y a plus de points de rupture disponibles et c'est ce que l'on appelle des points d'arrêt. Et avec un menu déroulant, je pouvais choisir n'importe quel autre point d'arrêt. Supposons que je mette en place un design mobile ou un iPad, par exemple, je peux désormais rechercher la navigation via mes ressources. Je viens de saisir ma navigation et maintenant vous pouvez voir que celle-ci me donne toujours la plus petite. Donc, il me donne toujours la façon dont je le configure par défaut. Mais maintenant, on me demande si j'ai plus de points de rupture. Ensuite, je vais choisir les points d'arrêt qui fonctionnent avec cette largeur. Et je peux le configurer, je peux définir des contraintes à gauche et à droite. Transformez-le donc en un cadre de mise en page automatique. Ensuite, vous pouvez constater que nous avons toujours le bon composant pour la bonne taille avec tous les bons réglages. Je trouve donc que c'est une approche vraiment intéressante, mais elle permet de s'assurer que si vous voulez l'utiliser, si vous voulez les transformer en variantes, discuter avec votre équipe, si cela a du sens dans le système utilisent. Par exemple, si vous avez une équipe qui travaille uniquement sur mobile et une autre ne travaille que sur des ordinateurs de bureau plus grands ou sur des tablettes, ce sera un peu ennuyeux pour elles de devoir toujours changer. Cela dépend donc vraiment de la structure de votre équipe et de la manière dont votre système de conception est configuré. 42. NOUVEAU ! POINTS D'ARRÊT : point d'arrêt réactif avec des variables: Apprenons à configurer des pages réactives respectant les points d'arrêt avec des variables et des variantes C'est donc ce que nous recherchons. Nous avons différents écrans représentant les plages de nos points de rupture Et au sein de ces différentes plages, nous allons intégrer les bonnes variantes remanier dynamiquement Lors du redimensionnement. remarqué au moment où j'enregistrais ceci, Variables vient de sortir dans une version bêta encore ouverte. Il est donc très probable que certains d'entre eux soient en train de changer dans un avenir proche. Allons-y étape par étape. Nous allons donc commencer par cela. Nous avons juste un ensemble de composants avec trois variantes pour un point d'arrêt de navigation différent, le 12.3 Et nous avons ce composant de carte. J'ai donc déjà créé une collection. Vous pouvez en faire une capture d'écran, puis configurer vous-même étape par étape si vous le souhaitez. Je vais d'abord vous montrer une façon simple de procéder. Et puis un peu plus avancé où nous pouvons réellement redimensionner nos cadres Nous n'allons donc pas tous les utiliser pour les deux. Commençons tout d'abord par la largeur de l'écran. Donc, ce que je veux faire, c'est lier ces cadres à une certaine largeur d'écran. Cela signifie qu'en les liant à la largeur de l'écran, je peux les lier aux différents modes. Tout ce que je place sur ces cadres peut ensuite hériter Nous allons donc sélectionner notre premier cadre. Ensuite, dans la largeur, je vais cliquer sur le signe des variables. Et je vais jeter un œil à ma collection et simplement choisir la largeur de l'écran. Je vais maintenant sélectionner les deux autres, et je vais également les lier à la largeur de l'écran. Mais ça ne me donnera que cette petite largeur d'écran pour le moment. C'est ce que nous allons faire. Ensuite, je vais vous montrer comment passer aux différents modes. Nous les avons donc connectés à la variable. Maintenant, sélectionnons le premier et passons à Layer. Ensuite, nous choisirons la collection que nous voulons petite. Rien ne changera car il s'agit de la taille par défaut. Mais si nous faisons de même pour le mode moyen, puis de même pour le grand, vous pouvez maintenant voir qu' ils reprennent les tailles du mode. Revenons à notre collection. Jetez-y un coup d'œil. Nous avons donc 390 petits, moyens, 834 et agrandissons celui-ci Si vous vous posez des questions sur les tailles, je n'ai fait que prendre des tailles prédéfinies dans le menu et les y ai simplement ajoutées. Donc, ce que j'ai fait, c'est que j'ai choisi l'iPhone 14 et vous pouvez voir que 390. Ensuite, j'ai opté pour une tablette, puis j'ai choisi au hasard un ordinateur de bureau. Vous pouvez choisir n'importe quelle autre taille. Ce n'est pas pertinent Quels sont ceux qui utilisent. Ensuite, je vais récupérer une instance de ma variable. Revenons à notre collection et voyons ce que j'ai configuré ici. Vous pouvez donc voir que j'ai configuré ma navigation et noter que le nom de la variable n'a pas d'importance. Je pourrais appeler ça n'importe quoi. Je ne l'appelle donc pas de la même manière que mes composants le disaient. Mais ce qui compte, ce sont les variables que je veux utiliser et doivent ici avoir le nom exact de mes variables dans l'ensemble de composants. Donc, si je clique dessus, vous pouvez voir l'excédent de navigation. Ensuite, le suivant est S et L, et ainsi de suite. Et encore une fois, vous pouvez leur donner le nom du système que vous utilisez dans votre équipe. Assurez-vous simplement que, quel que soit le nom que vous leur donnez, référence lorsque vous y faites référence lorsque vous les associez aux différents modes. OK, alors sélectionnons cette instance. Et puis, via le menu de l'instance, vous pouvez voir en passant la souris dessus, j'obtiens cette petite variable Je peux attribuer une variable. Et je peux maintenant retrouver ma navigation variable. Et je vais le placer sur l'instance. Vous l'avez défini sur l'instance qui pas actuellement partie de votre ensemble de composants. Ajoutons cela ici, et je vais le configurer pour remplir le récipient. Oh oui, nous avons oublié de configurer nos cadres en tant que mise en page automatique. suffit de sélectionner vos cadres et les transformer en cadres à mise en page automatique. Nous pouvons maintenant sélectionner à nouveau notre instance de navigation et remplir le conteneur. Et maintenant, il va bien s' asseoir ici. Je vais également sélectionner mes cadres et leur attribuer une couleur d'arrière-plan pour les diapositives afin que vous puissiez mieux les voir. Maintenant vient la partie la plus facile. Si vous déplacez votre instance entre les différents cadres, elle héritera du mode que vous avez indiqué dans le cadre parent Il va donc sélectionner la bonne variante que vous avez configurée dans votre collection. Mettons-en donc un sur chaque cadre. Je vais simplement le copier, sélectionner tous les cadres et les coller Vous avez peut-être un rembourrage naturel ici Vous pouvez simplement sélectionner votre cadre, puis tout remettre à zéro. Ajoutons également la carte. Je fais donc de même. J'ajoute une instance. Jusqu'à présent, je n'ai pas encore de variantes. Donc, ce que je veux faire, c'est créer un groupe. Je veux donc avoir quelques instances dans un seul groupe. Sélectionnons simplement ce bouton, appuyez sur Shift a, et je crée un cadre de mise en page automatique, que je vais appeler le groupe de cartes. Et je peux ajuster le dimensionnement et ici je peux également utiliser mes variables Et maintenant je vais ajouter ceci à l'intérieur. Maintenant, ce que je n'aime pas, c'est que le rembourrage ne fonctionne pas vraiment Je pourrais le centrer avec l'alignement, mais je veux un rembourrage fixe Je vais donc l'ajouter à ce groupe. Je souhaite utiliser le même rembourrage que celui que j' utilise ici dans ma navigation Et en fait, c'est différent pour chacune de mes variantes. Si nous y jetons un coup d' œil, vous pouvez voir que j' utilise des variables pour définir ce rembourrage Et maintenant, ce que j'ai fait dans ma collection ici, vous pouvez voir que j'ai configuré une variable appelée margin et que je crée un alias Supprimons simplement cela ici et vous pouvez voir que je pourrais le régler manuellement sur 24, mais si je le modifiais ici, il ne serait pas repris. Donc, ce que je peux faire, c'est que je peux créer un alias en cliquant sur cette petite icône, ou simplement cliquer avec le bouton droit sur l'alias. Et maintenant, je choisis également cet espacement que j'utilise dans ma navigation. Et je vais maintenant l'ajouter à mon groupe de cartes. Sélectionnons cette option, puis je clique sur mon rembourrage gauche et droit Et maintenant, je ne choisis pas dans mon espacement, je choisis dans ma marge, 24. Ensuite, pour le configurer pour remplir le conteneur, appuyez sur Entrée pour obtenir tous les éléments mineurs et configurez-les également pour remplir le conteneur. Super, maintenant déplacons-les ici. En fait, je veux ajouter de la marge en haut. Ici, je pourrais aussi utiliser mon espacement ou mes marges. Je pense que je pourrais utiliser ma montagne d'ici. Mettons celui-ci à zéro pour que tout soit bien rangé. Maintenant, je vais simplement faire glisser une copie de ce groupe de cartes sur ma taille moyenne Maintenant, je ne veux pas que ce soit comme ça. Je veux qu'ils s' enroulent. Je pourrais donc utiliser l'habillage automatique de la mise en page. Je peux déjà le configurer ici, donc rien ne changera. Et maintenant, installons-le ici. Et vous pouvez voir que maintenant ils vont se mettre en position. Cela ne fonctionnera toutefois que si vous configurez une largeur minimale dans votre composant principal ou sur votre instance individuelle votre composant principal ou sur votre instance individuelle. Vous pouvez donc voir que c'est définir une largeur minimale de 250, une largeur maximale de 450 C'est pourquoi ils sont remaniés. Faisons-le pour notre dernier cadre et rangeons simplement le dernier rembourrage ici Et maintenant je suis en train de m'en occuper. C'est donc vraiment génial de montrer un design statique et d' examiner les différents points de rupture. Vous pouvez absolument l'utiliser comme ça Cependant, il y a une chose qui pourrait vous déranger un peu. Si vous sélectionnez cette option et que vous la redimensionnez, jetez un œil ici à ma variable, et dès que je la redimensionnerai, elle sera supprimée et je devrais la configurer à nouveau Il ne me dit pas non plus où commencent et où se terminent mes points d'arrêt Mais si nous jetons un coup d' œil à notre collection, vous pouvez voir qu'ici, j'ai configuré deux autres variables. L'un s'appelle point d'arrêt max et le point de départ est appelé point d'arrêt min. Et ces points d'arrêt représentent simplement mes points d'arrêt que je vais utiliser ultérieurement dans CSS Donc, avec la valeur minimale, je dis essentiellement que c'est là commence ma taille moyenne, puis qu'elle remonte jusqu'ici Appliquons donc ceci. Prenons d'abord notre petit écran. Et maintenant je vais ajouter une largeur minimale. Ensuite, je dois appuyer à nouveau sur cette ère, appliquer une variable et trouver votre point d'arrêt Min. Ensuite, je vais également ajouter une largeur maximale. Il en va de même pour la variable et trouvez votre point d'arrêt maximum. Je vais faire de même pour les autres cadres. Je vais sélectionner le cadre à ma variable min de point d'arrêt, à ma variable de point d'arrêt max. Je vais juste accélérer un peu les choses pour vous, et il en va de même pour notre dernière image. Et remarquez qu'ils choisissent déjà le bon mode. C'est parce que j'ai déjà défini le mode au préalable. Si ce n'est pas le cas, assurez-vous de sélectionner le cadre et de changer de mode via les couches. En fait, je n'aurais même pas besoin d'une taille maximale pour mon écran plus grand, mais je vais juste l'ajouter pour que tout soit complet. OK, jetons un coup d'œil. Donc, si je sélectionne cette option et que je la redimensionne maintenant, vous pouvez voir que cela va s'arrêter à un moment donné Et cela s' arrêtera également lorsque j'aurai atteint une largeur maximale. Maintenant, si je fais petit, vous pouvez voir que cela ne convient pas bien. Assurez-vous toujours de régler votre alignement. Et maintenant, nous pouvons faire de même pour notre écran plus grand. Encore une fois, nous pouvons régler notre alignement. Il y aura notre petit ami. Maintenant, si nous travaillons avec cette configuration, nous n'avons plus besoin de cette taille fixe ici, nous pouvons donc la supprimer. Supposons maintenant que nous voulions réellement un autre design pour l'un des points d'arrêt Nous voulons donc que notre voiture change de configuration. J'ai ici ma carte originale et j'en ai une nouvelle appelée carte Horizontale, et je vais appeler celle-ci Verticale. Sélectionnons les deux et nous pouvons les combiner en tant que variantes. Et maintenant je vais appeler ça une carte. Et vous pouvez également nommer la propriété à votre guise. Jetons un coup d'œil à notre collection. Vous pouvez donc voir que nous avons du carton, du carton vertical et du carton vertical intégré pour les petits et moyens. Et puis la carte horizontale est la variante pour les grandes. Donc, encore une fois, l'important est que ce doit être le nom exact. Vous pouvez donc également le copier et le coller ici. Parfois, il y a un petit buggy. Revenons à nos designs. Maintenant, ce que vous remarquerez, c'est que si vous sélectionnez vos cartes, appuyez sur Entrée pour obtenir les instances enfants. Et maintenant, vous pouvez voir que ce n'est pas encore connecté, nous devons donc tous les connecter à notre carte. C'est la même chose que nous faisons ici. Sélectionnez un groupe, appuyez sur Entrée, puis connectez-les tous à notre carte. Et faisons de même ici. Appuyez sur Entrée, et nous devrions maintenant voir un changement ici. Passons à la carte, qui adopte notre design horizontal. Nous pouvons ensuite simplement remplacer vos images et vos textes. Et c'est ainsi que vous disposez d'un design entièrement réactif, qui respecte vos points de rupture 43. POINTS DE BREAKPOINTS: : 09 points de déJEUNES et grilles: Si vous travaillez avec la grille réactive et Figma, cela peut également modifier les différents points d'arrêt. Il y a donc deux choses que vous devez faire. Faites une représentation visuelle et documentez réellement une grille que vous êtes amené à utiliser. Donc, ici, par exemple, vous pouvez voir que c'est ma grille pour les excès, puis pour S M, et puis pour le point d'arrêt L et plus, j'ai un autre changement. C'est simplement la marge qui change ici. Je documente donc tout cela et c'est alors la deuxième chose à faire, enregistrer ces styles de grilles. Dans mon aperçu des styles, vous pouvez voir que j' ai un accès à la grille mobile plutôt que S, M et L dans Excel. De cette façon, je peux toujours appliquer correctement à un nouveau cadre. Cela ressemble à beaucoup de va-et-vient lorsque vous travaillez avec différentes tailles d'écran. Mais n'oubliez pas que nous concevons généralement uniquement pour les appareils mobiles, puis pour les ordinateurs de bureau. Nous n'utilisons donc que ces deux grilles pour le moment. Et plus tard. Tous les tests ? Oui, dans tous ces tests ici, si vous travaillez avec une grille, vous devez vous assurer qu'à partir des différents points d'arrêt, vous testez avec une grille correcte. Une autre façon de le rendre encore plus clair est de nommer vos styles d'après les points de rupture et d'ajouter les nombres réels des points d'arrêt ou de la plage. Celui que j'ai vu ajouter un autocollant sur le système de conception. Ils l'utilisent et je pense que c'est vraiment très clair pour tout le monde parce que de cette façon, si j'ai un cadre, je peux vérifier la taille et la largeur. Ensuite, dans le menu déroulant des styles de mes grilles, je peux simplement sélectionner l'endettement de la grille qui s'applique à cette taille d'écran. Vraiment très beau et bien rangé. 44. POINTS DE rupture : 10 N'oubliez pas votre typographie: N'oubliez pas votre typographie lorsque vous testez des composants réactifs. C'est un peu une situation de poule et d'œufs. Qu'est-ce qui vient en premier ? Commencez-vous par configurer votre échelle de types, puis l'appliquer aux composants réactifs, ou est-ce que vous testez d'abord composants réactifs, puis décidez-vous à quel point d'arrêt vos composants réactifs, puis décidez-vous à quel point d'arrêt vous souhaitez la typographie va changer. Eh bien, cela dépend vraiment de votre projet. Si vous travaillez déjà avec une échelle de caractères existante, vous devez la respecter. Mais si vous ne faites que configurer, alors oui, par tous les moyens, vous pouvez jouer avec vos composants et avec ensemble de la mise en page et, plus tard, assurez-vous simplement que vous avez documenté et que ont une configuration soignée. Et oui, cela a l'air si beau et si simple une fois terminé, il faut en fait beaucoup d'essais, de tests et de compromis. Et cela ne signifie pas que je n'ai pas besoin d'ajouter une autre taille ici ou là à un moment donné. Passons en revue rapidement cela au cas où vous ne l'auriez jamais vu auparavant. Voici donc mes paramètres axés sur le mobile. Vous pouvez donc le voir ici pour les gros titres. J'ai donc 123, puis mes body tags, le bouton Liens. Et vous pouvez le configurer pour autant ou aussi peu que vous le souhaitez. J'ai défini la pesée pour dimensionner la hauteur de la ligne et l'espacement. Ensuite, je vais vous donner un petit exemple. Et cela est ensuite enregistré en tant que style. Si, à partir d'un point de rupture, je voulais modifier cette taille, par exemple dans mon cas pour H1, alors je le documenterais ici. Cela peut aussi être simplement un changement de masquage de ligne ou quoi que ce soit d'autre. Il existe différentes approches pour les échelles de types réactives. Vous pouvez donc utiliser l'approche des ratios. Vous pouvez même travailler avec la pince ou avec Calc. Ce n'est vraiment qu'un exemple très simple que je souhaite utiliser pour le moment. Vous pouvez voir qu' ils sont tous enregistrés en tant que styles. Et puis je les ai nommés de telle manière que je peux le faire dans mon H1, par exemple, je peux voir que j'ai un style de base, puis j'en ai un pour l'écran m et un pour l'écran L à partir de. Si je regarde par exemple le corps des textes que vous avez ici, où nous n'avons aucun changement de style pour les points d'arrêt, qui restent toujours 16 et la même hauteur de ligne. Vous pouvez donc voir que j'ai simplement donné une base et lui, je peux simplement choisir entre le secondaire et le primaire, ce qui fait la différence entre le normal et le gras. Alors, qu'est-ce que cela signifierait pour mes tests ? Et sautons par ici. Et puis vous pouvez voir ici que j'ai différentes cartes et que pour le titre, elles utilisent un H2. J'ai donc appliqué mon style ici en H2 et je peux voir qu' en L il y a un changement. Donc, jusqu'à présent, tout fonctionne bien. Je vais donc descendre ici et je découvre que c'est ce qui se passe à partir de L. Donc, je prends le titre et maintenant je dois changer pour quelque chose d'un peu décalé avec la hauteur de ligne, il se peut que je doive corriger ce que je devrais faire. Maintenant, si je passe à ma documentation c'est que je dois prendre cette carte. Je dois aussi prendre cette carte. Je dois donc maintenant configurer deux cartes différentes. Encore une fois, c'est vraiment un truc de Figma. Je serais toujours documenté comme ça. J'aurais cette carte. J'aurais cette carte. Ensuite, je vais également documenter leur position dans les différents points de rupture de ce type. voici trois et je dois me souvenir de la petite astuce que je vous ai montrée en utilisant des variantes. Je pourrais donc simplement nommer cette carte par défaut. Et cette carte, je vais nommer L. Ensuite, je les sélectionne toutes les deux et je crée un ensemble de composants. Et j'ai nommé ce composant « rayons à cartes ». Maintenant, si je travaille avec des instances, sortons une instance. Je peux maintenant voir comme ici la propriété que je lui ai baptisée. Revenons donc ici. Nommons cette propriété points d'arrêt. Et maintenant, si je choisis cette instance, je peux choisir entre la carte par défaut et la carte L, le seul changement étant la différence style de mon titre. 45. BREAKPOINTS : 11 Plus d'informations sur la typographie et les grilles réactives: Ce cours est vraiment une plongée en profondeur dans le design réactif avec Figma. Il s'agit donc vraiment de contraintes de mise en page automatique et de ce qui touche aux grilles. Et nous abordons la typographie réactive. Mais nous n'allons pas entrer dans une telle profondeur générale et ne pas aborder de sujets. Si vous souhaitez en savoir un peu plus à ce sujet, je vous recommande de consulter deux autres de mes cours. Vous les trouverez tous ici sur Skillshare et tapez simplement Moon Learning. Ensuite, vous verrez tous mes cours. Et l'un d'entre eux que je recommande concerne les grilles et le design réactif. Nous examinons donc ici différentes configurations, différents types de grilles. Et nous examinons également le HTML et le CSS réels. Vous pouvez donc jouer avec un objet réel et vraiment comprendre comment fonctionnent ces requêtes multimédia et vraiment jouer avec le réel, ce qui fait toute la différence. L'autre cours que je recommande est topographie dans la conception de l'interface utilisateur UX. Et nous parlons ici, par exemple mise en place d'échelles de topographie réactives. Quelles sont les différentes techniques et comment gérer la réactivité à différents niveaux ? Et comment pouvons-nous communiquer cela à notre équipe de développement ? Ces deux cours sont donc vraiment recommandés pour élargir vos connaissances, non seulement dans Figma, mais aussi pour une compréhension générale de ces sujets en matière de conception d'interface utilisateur UX. 46. BREAKPOINTS : 12 plugins de point d'arrêt: Il existe également un excellent plug-in que vous pouvez utiliser, accéder à Plugins, puis saisir des points d'arrêt. Maintenant, lancez le plugin. Vous obtiendrez cette petite fenêtre dans laquelle vous pourrez ajouter vos points de rupture réels. J'utilise juste des points d'arrêt aléatoires pour le moment. L'important est que tous vos cadres soient déjà configurés de manière réactive. Idéalement avec mise en page automatique. Maintenant, choisissez les cadres, sorte que vous les liez essentiellement avec une plage correspondant aux points d'arrêt. Et si vous redimensionnez maintenant la fenêtre que le plugin a créée pour vous, vous pouvez voir une belle représentation réactive de votre design. C'est vraiment, vraiment génial, mais gardez aussi à l'esprit que c'est plus à afficher comme une page d'accueil, c'est plus à afficher comme quelque chose comme ça ou une fonctionnalité spéciale. Parce qu'il transforme tout en composants et qu'il comporte des parties délicates, mais qu'il est un plug-in vraiment très intéressant à utiliser. 47. Au revoir et des trucs gratuits: 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.