Figma : Autolayout v2 (la nouvelle version !!!) | Bruno Sáez López | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Figma : Autolayout v2 (la nouvelle version !!!)

teacher avatar Bruno Sáez López, UX/UI Designer and Front-end developer

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Introduction

      2:31

    • 2.

      2 autolayout

      34:32

    • 3.

      3 réactives

      24:53

    • 4.

      4 sorties

      1:33

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

1 058

apprenants

2

projets

À propos de ce cours

Bien Autolayout est une fonctionnalité que Figma a publié il y a un peu de temps a été entièrement réinventée. Dans ce tutoriel, nous allons apprendre à l'utiliser et à le comprendre ! Il possède une tonne de nouvelles possibilités et utilisations et la traduction en Html et CSS est beaucoup meilleur has il utilise maintenant la flexbox).

Si vous êtes tout simplement familiarite. Si vous êtes simplement avec l'ancienne version are ou vous êtes un débutant complet à Figma ce tutoriel. Nous allons concevoir un bouton réactif, un groupe de cartes républiques, et enfin une page d'accueil entièrement réconfortée.

Si vous êtes intéressé par l'accélération de votre flux de travail et faites de meilleures conceptions réouvertes, ce tutorial peut être fait pour vous.

Rendez-vous dans le tutoriel !

PS : Si vous avez du mal à affronter la caméra : just d'un seul nombre de l'ensemble du cours : https://www.loom.com/share/share/a6077077477607707760des 77760777'

Rencontrez votre enseignant·e

Teacher Profile Image

Bruno Sáez López

UX/UI Designer and Front-end developer

Enseignant·e

Hey, I'm Bruno!

UX/UI Designer with more than 20 years of experience currently working in a big data company making complex products simple.

Figma, Sketch and Adobe XD are my favourite tools.

I love going to the mountains and record music.

If you like my classes follow me to be updated when new content arrives!

Cheers!

 

 

 

Voir le profil complet

Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Introduction: Bienvenue dans un nouveau tutoriel sur la nouvelle mise en page automatique de fema. Fema a publié récemment dans une version entièrement renouvelée de mise en page automatique. Nous allons donc en parler. Parce que si vous avez vu mes précédentes vidéos sur la mise en page automatique, maintenant, il n'a rien. C' est n'importe quoi par rapport à la version précédente. Il est donc bon que nous commencions presque à partir de zéro. Nous allons donc voir quelques fonctionnalités intéressantes avec ces nouvelles dispositions extérieures. Nous allons apprendre à faire ces info-bulle. Par exemple. Vous voyez que vous pouvez le rendre plus grand et vous pouvez positionner les éléments, vous savez, les profondeurs. Vous pouvez le positionner quand vous le voulez. La même chose que nous ferons dans ce bouton, qui est un bouton réactif. Il applique la même méthodologie que celle-ci. Et nous verrons comme une nouvelle fonctionnalité que la mise en page automatique héberge ce genre de conceptions super réactives. Et, et comment ceux-ci peuvent être traduits plus tard en sorte de chèvre parfaite avec flexbox. Utilisation de flexbox. De plus, nous verrons comment faire de ces sites Web réceptifs, par exemple, la moitié élevée, une sorte de copie de ce site Web du BOA afin que vous puissiez voir qu'il est entièrement adapté. Vous pouvez voir les éléments sur l'en-tête, ils se déplacent. Et quand il vient un moment où il change en sorte de la version mobile. Et vous pouvez le voir ici aussi avec des photos et tout. Tout est en quelque sorte d'ajustement. Donc, nous allons voir toutes ces choses pendant notre tutoriel. Donc, si vous êtes intéressé à utiliser ces super cool rajusté fitter sur fema. Venez sur un voyage dans ces tutoriels rapides. 2. 2 autolayout: Hey, merci pour toi en moi, dans ces Fostoria. Donc, d'abord, nous allons voir quelle est la différence entre la mise en page automatique. Penelope, Si vous avez travaillé avec elle, sinon, vous pouvez simplement aller un peu plus loin et sauter cette partie si vous êtes nouveau à la mise en page automatique. Donc, pour tous les travailleurs ou la mise en page automatique, nous avons avant quelques bananes ici. Si vous avez le fardeau, vous avez ces mise en page automatique avec, où vous pouvez choisir le, si vous voulez la position de l'élément verticalement ou horizontalement. Et si vous vouliez comme sans vague, ou si vous voulez, si am fixe la largeur, puis ajouter le rembourrage à l'extérieur de tous les éléments et le Pauling vertical et de la disposition extérieure et la séparation entre les éléments. Et c'était pour l'enfant. Vous pouvez donc positionner la tuile sur la gauche, sur le centre, sur la droite, et d'autres tuiles positionnées différemment. Maintenant, cela a beaucoup changé. Nous avons ensuite une nouvelle banane de mise en page automatique. Maintenant, comme vous pouvez le voir ici, nous avons le, pour le brevet, nous avons presque les mêmes éléments que nous avons avant. Comme si vous le voulez verticalement ou horizontalement. C' est comme ça. Et puis nous avons diag, la séparation entre les éléments, qui est un peu similaire à cela, comme vous pouvez le voir, est la même icône, juste des données brutes. Et c'est le bugging, qui est ce justi tube va les deux, ces deux-là, puis puis. Donc maintenant, nous n'en avons qu'un, mais nous avons ces nouveaux, que nous verrons que vous pouvez choisir entre différents plug-ins pour chaque côté. Pour cela, vous pouvez mettre un bourgeonnement différent de l', pour le haut et l'achat différent pour le fond. Donc maintenant, c'est plus flexible. Et aussi, ces éléments, ces icônes nous apporteront une popup qui nous permettra de positionner les éléments vers la gauche, vers la droite, et ainsi de suite. Nous avons ces nouveaux penknife ici avec, qui fonctionne en quelque sorte avec des contraintes. Nous le verrons, mais il a causé de nouveaux éléments, ce contenu chaud, les frais avec et tout ce que nous verrons à ce sujet. Mais c'est un peu nouveau pour le parent et pour la tuile. Au lieu d'avoir ceci comme ce genre d'alignement. Dans les icônes de positionnement. Maintenant, vous avez également les options de redimensionnement. Nous allons donc le voir en détail. Alors passons à la pour commencer par travailler avec elle. Nous allons commencer par le bas, ce qui est plus simple vers le bas, faire un adulte il. Nous allons donc nous enchaîner plus tard, nous rendrons l'info-bulle rouge. Alors commençons par le fond. Donc, pour cela, ce que je vais faire est oui, rectangle du créateur et le trait Azzam en direct, disons que trois pixels lui donnent un rayon de bordure va être assez simple si vous avez déjà travaillé avec. Mettons comme un fond blanc ici. Je vais juste copier et coller ça, ok, donc c'est juste un texte aléatoire. Ça n'a pas vraiment d'importance. Je vais juste faire ressortir ces éléments. Comme en faire une copie. C' est le, nos icônes régulières. Si vous l'espérez, je vais juste utiliser ce bleu cool et j'utilise dans tous mes tutoriels, ça s'appelle icônes d'échec. Donc, vous le lancez et vous pouvez insérer la flèche. Donc, pour cela, je vais juste insérer celui-ci et en créer un composant afin qu'il soit plus facile de travailler. Eh bien, créez un composant de celui-ci. Et positionnez-le par ici. C' est bon. Je vais ramener ça à nouveau. Autres icônes. Je vais choisir ces plusieurs sur le bas que nous avons ici. Donc c'est plutôt cool. Et je vais créer comme composant va faire la même chose à nouveau. D' accord ? Ok, donc je vais le copier et le coller pour qu'il soit dans le cadre. Et bien, nous avons nos trois éléments et vous pouvez voir si j'écris ici, rien ne se passe, c'est oui, sont des éléments indépendants en ce moment. Mais si je les sélectionne tous, de tous les éléments, d'accord ? Et vous pouvez voir que je n'ai pas de menu Auto Layout ici. Donc, ce que je fais est de venir ici, Clic droit et sein comme mise en page automatique, J'utilise généralement oui, le raccourci Shift a, ce qui est pour moi plus facile. Alors pressons ici, bombe, et maintenant nous avons notre mise en page automatique. Donc, cela va être réactif. Nous commençons à le faire, mais nous pouvons voir que nos éléments ne sont pas alignés. Et nous pouvons voir maintenant le nouveau panneau Propriétés ici, mise en page automatique. Vous pouvez voir les éléments sont positionnés dans l'élément horizontal dans la direction centrale du tableau je suis axe. Et on peut changer ça si on veut ce genre de bouton bizarre. C' est comme un visage presque. Ainsi, la mise en page automatique détecte automatiquement lorsque vous la créez. Quand l'appliquez-vous ? Nous avons essayé de comprendre ce que vous vouliez faire. Donc, dans ce cas, c'est un peu parfait. Mais nous voyons que ce texte n'est pas la propriété seule. Ok, donc nous allons essayer toutes ces choses ici. Alors qu'est-ce que cela applique la séparation entre les éléments. Ok, donc si vous voulez comme ça ou si vous travaillez avec une grille de huit pixels, vous pouvez juste appliquer comme un huitième. Ou le, si c'est trop serré, vous pouvez juste aller avec 16, ce qui je pense est assez bon. Et comme vous pouvez le voir ici, que le rembourrage autour des articles est mélangé. Ok, donc quand nous avons créé, quand notre essai a créé notre bouton, nous avons arrangé tous nos boutons. Nous avions un rembourrage différent pour le haut, pour les quatre bas de la gauche ou de la droite. Donc ça dit comme mélangé. Si nous mettons comme 0, nous essaierons d'égaler tous les corps autour. Nous pouvons voir ça maintenant notre bouton. Évidemment a 0 rembourrage entourent tout le, tout le conteneur. Mais c'est ce que nous voulons, ce n'est pas ce que nous voulons. Nous pourrions appliquer comme un rembourrage similaire. Imaginez que nous travaillons avec la grille de 16 pixels, donc nous voulons appliquer comme 16. Ou si vous travaillez avec une grille de quatre pixels, vous pouvez aller à 12. C' est plutôt beau pour moi. Mais imaginez que vous voulez mettre plus de rembourrage sur le dessus. Comment faites-vous ? Eh bien, vous pouvez le faire ici, séparé par des virgules , mais c'est un peu bizarre. Faites-le un autre panneau, nouveau panneau que nous avons ici, son alignement sur le rembourrage. C' est celui que nous voulons utiliser. Imaginez que nous voulons sur les 80 pixels supérieurs, cela va être énorme, mais imaginez que vous audit ou imaginez que vous voulez plus de rembourrage à gauche. Donc, pour ce cas particulier, ajoutons-le à gauche. Donc, c'est assez cool parce que maintenant vous pouvez contrôler les paddings indépendamment. Une chose qui avant tu devais être comme faire des tours, ajouter des espacements transparents, faire des choses bizarres, faire des trucs vraiment sales. Mais maintenant, avec cette nouvelle mise en page automatique, c'est plus facile à faire que jamais. D' accord ? Nous voulons donc appliquer le même corps dans o, notre environnement des éléments. Et ce que nous voulons ici, ces textes, comme vous pouvez le voir, n' est pas la propriété aligner. Donc, ce que nous voulons, c'est aligner nos éléments au centre. Et maintenant vous pouvez voir que ce truc bleu nous permet d'aligner les éléments intérieurs au centre, vers le bas. La chose par rapport à la mise en page automatique précédente est précédemment, je pourrais positionner cet élément vers le haut, ceux-ci alignés vers le bas et ces deux centre. Maintenant, ça marche comme un trou. Donc, si vous, vous pouvez seulement positionner les éléments vers le haut, au centre ou vers le bas tous d'entre eux. Tu ne peux pas choisir celui que tu veux, en haut ou en bas, tu sais ? Il y a donc des astuces pour le faire fonctionner. Mais je suis la solution de contournement. Mais maintenant ça marche comme un tout, OK. Une autre chose intéressante ici est que si nous redimensionnons ce bouton, vous pouvez voir que tous les éléments se déplacent en même temps. Ils sont comme emballés de la même façon. D' accord ? C' est là que ça s'appelle emballé ici. Si je dis un espace entre, vous pouvez voir que les éléments qui espacent uniformément. Donc, c'est génial parce que c' est comme si les sites Web fonctionnaient lorsque vous codez dans eux en HTML et CSS. C' est ce que fait HTML et CSS. Donc avant leur comportement était un peu différent sur la façon dont un site Web fonctionne. Donc d'accord, on a notre bouton. Comme vous pouvez le voir maintenant, nous avons comme un bouton fixe, mais nous ne voulons pas cela. Ce que nous voulons, c'est le rendre réactif. Donc, pour cela, au lieu de fixer, vous pouvez voir ici qu'il dit à gauche. Mais en même temps dans le même fixe. Alors que voulons-nous que cela pirate les contextes, pirate le contenu. Ce qu'il fait est de rendre le, cet élément sensible au contenu qu'il a, ok, donc dans ce cas particulier, je pense que c'est assez bon. D'accord ? C' est ainsi que notre bouton, et c'est notre première approche. Ok, donc maintenant ce que nous allons faire l'info-bulle pour cela, nous allons faire presque le même thème que nous l'avons fait avec le, avec le fond. Je l'ai fait, je le fais parce que c'est un peu difficile de faire le pourboire. Ok, donc pour cela, je vais appliquer à nouveau un pixel. Ici. Je vais juste appliquer un noir. Je vais juste dessiner un triangle ici. Je pourrais le dessiner, mais avec ça, je vais bien. Tournons-le. Mettez ça dans la chance. Appliquez un rayon de bordure pour être plus agréable. Disons quatre. Whoa, c'est trop. Peut-être que 22, c'est bien. Et c'est trop grand pour mes goûts. Alors rendons un peu plus brillant, ok, même chose. Je vais juste copier et coller ce texte en dehors de celui-ci et le positionner ici. Ok, donc maintenant la même chose que le bouton. Tout est indépendant. Donc, pour ce particulier, pour cette info-bulle particulière, nous voulons faire comme séparer deux mise en page automatique imbriquée. Ok, donc ce que nous voulons que cela crée à ces deux composants, comme la mise en page automatique et ensuite rejoint la partie à cette astuce ici. Donc, je vais appuyer sur le bouton droit de la souris et ajouter la mise en page automatique. Donc maintenant est sensible aux choses que nous écrivons, qui est génial, ce que nous voulons. Mais vous voyez que le plus profond ne bouge pas ou si je veux positionner ce t, Si je dois le faire manuellement et c'est une sorte de, vous savez, pas si, pas si bon. Donc ce que nous allons faire, c'est à votre Into the party si profond. Donc, pour cela, nous sélectionnons notre précédemment encadré est, je vais nommer ces boîtes d'info-bulle et ces Polygone et je vais juste le nommer comme pointillé. Et ce que nous voulons ici, c'est que notre boîte à outils et notre équipe soient réunis. Donc ce qu'on fait pour ça, c'est un alcali, ok ? Et vous pouvez voir nos profondeurs, c'est un peu partout. Oui. On peut se positionner dans un centre à droite et à gauche, mais c'est un peu merdique. Donc quatre jours, ce que je vais faire est de créer un cadre à l'intérieur de cela. D' accord ? Je vais créer un cadre, un cadre inséré ici, et je vais mettre le TP à l'intérieur du cadre. Alors. Maintenant, j'ai le super profond. Je vais juste le poser. Et disons que je veux le mettre là. Où faire le, ce tour de cadre, parce que nous avons besoin d'un espacement ici sur la gauche. Donc ce que nous pouvons faire sa position, notre élément, notre conseil là, et ensuite le mettre ici. Donc, le cadre va permettre de, pour gagner de l'espace ici et pour supprimer ces TPP, c'est, c'est comme se chevaucher ici. Donc c'est bon, va être notre profond, ok, parce que ce sont les bonnes dents. Ok, donc maintenant nous avons notre profondeur avec notre info-bulle, désolé. D' accord. Et avec cette info-bulle maintenant, oui, nous pouvons contrôler notre, vous savez, comment se déplace les profondeurs. Ok, donc c'est joli, c'est plutôt cool. Même chose qu'avant. Nous pouvons contrôler la séparation de l'info-bulle. Mais dans ce cas, nous voulions comme à 0, si nous faisons ce genre de chose bizarre dans l'espacement horizontal, nous ne voulons pas ça. Nous voulons être verticaux d'abord est, cet élément, puis l'info-bulle sous, sous l'info-bulle. Nous avons donc nos deux éléments. Et la bonne chose à propos de ça, c'est les cabines d'info-bulles, d'accord ? Dans cette largeur est sensible avec un texte. Donc on fait ça. Ensuite, nous voulons toujours positionner l'info-bulle au centre. Nous venons ici et nous le positionnons ici. Ok, donc on a déjà deux choses. Commençons donc avec un personnel un peu plus complexe. Ici, un demi-jeu de cartes, rien aussi. On est à. Mais vous voyez ici qu'ils sont complètement réactifs. Les images sont réactives. Les textes sont réactifs. Imagerie. Nous avons comme une zone de texte plus haute ici. Il se comporte comme le site Web lorsque vous utilisez flexbox en HTML et CSS. C' est le comportement qu'ils ont, N aussi. Vous pouvez modifier leur comportement ici sur les éléments. Si au lieu de mettre peu de conteneur, je dis juste énorme contenu. Désolé Huck, convaincre. Vous voyez qu'il se comporte comme, comporter comme avec flexbox. Donc c'est génial pour quatre. Allez busing vos designs de fema au HTML et CSS. Maintenant, c'est beaucoup, beaucoup, beaucoup mieux. D' accord ? Il est plus complexe d'utiliser la mise en page automatique maintenant, mais la rend plus complète. Donc, nous allons, pour répliquer cela à la façon de faire ce design parfaitement réactif ici. Ok. Donc, pour cela, je vais juste copier tous les éléments que j'ai ici. Parce que je ne veux pas qu'ils reviennent. Laisse-moi tout laisser tomber et tout dégrouper. Donc tout est en quelque sorte séparé. Comme vous pouvez le voir ici, j'ai tout séparé pour pouvoir tout bouger. Et, et si E1 va arriver parce que tout est séparé. D' accord. Imaginez que vous ayez le nom du saboteur, l'emplacement, cette photo. Avec les photos dans ce cas, il est important de régler pour sentir ou deux pieds selon le champ d'alimentation fonctionne bien dans ce cas. Une autre chose importante, c'est que je vais dessiner la voiture derrière ça. Alors, renvoyez à l'arrière. Disons que c'est blanc. Je vais ajouter un peu de contexte ici pour qu'on puisse voir ce qui se passe. Alors choisissez juste cet arrière-plan, d'accord, puis appliquez un rayon de bordure, disons huit, sauvegardons-les. Donc, ce que nous voulons atteindre ici, c'est que nous voulons contrôler cet espacement ici, il pourrait aimer travailler avec un chagrin de huitième pixel. Donc, disons que j'ai cela là et donc là et là et tout. Donc, ce que je commence généralement à le faire en regroupant les choses dans la mise en page automatique. Donc pour ça, je vais juste appuyer sur la mise en page automatique et tu dirais, wow, mais c'est peut-être trop ridicule. Vous pouvez juste ajuster avec cet outil de mesure ici. La personne devrait. J' aime que ça fasse avec la mise en page automatique parce que c'est, c'est plus, c'est plus facile pour moi à la toute fin. Donc, je peux aller ici à huit pixels. Et pour cet élément particulier, je vais ajouter une autre mise en page automatique entre ces deux éléments maintenant, les textes et, et, et l'emplacement et les éléments. Donc, oui, allons-y avec la mise en page automatique. Et pourquoi je fais cela, parce que je peux mieux contrôler les distances et d'être plus cohérent entre un espacement avec un espacement des choses. Donc dans ce cas, huit est trop serré, donc je vais juste le laisser sur 16. Et je dis, OK, maintenant je veux que ce truc de mise en page automatique, ce nom et cet emplacement soient au centre. Ok, donc ce qu'on fait pour ça c'est de venir ici et de choisir ici le centre. D'accord ? Maintenant, nous avons notre photo ici. Nous avons notre titre, et nous sommes plutôt bons d'aller à nous, nous avons fort comme nos éléments verticaux ici, non ? Nous avons donc ce composant, cette photo, ce titre. Donc, nous allons juste appuyer ici sur la mise en page automatique pour voir ce qui se passe. Bond. C' est parfait. Je veux dire, ils, il a détecté notre espacement plus ou moins, donc je veux le faire comme 24 d'espacement. On pourrait aller plus loin ici, d'accord ? Mais pour ce cas particulier, puisque je travaille avec AP, grille de huit pixels mentale, je vais mettre comme 424 pixels ici. Mais je vois quelque chose que je n'aime pas ici. Je veux ça, au lieu d'être 24 ans, je veux que ce soit plus serré. Peut-être huit pixels de 16 pixels. Quoi, que pouvez-vous faire ici ? Très bien, il suffit de sélectionner ces deux éléments, ces deux éléments, le titre et le texte. Et ce que vous faites, c'est que vous appliquez une autre mise en page externe. Ok, donc vous ajoutez une autre mise en page externe pour ces deux éléments. Et maintenant, vous pouvez contrôler l'espacement entre ces deux, qui est idéal pour ce cas particulier. Voyons voir, 16, c'est trop. Allons-y avec 88 est peut-être de taper, mais je préfère huit, Daniel. Donc je vois maintenant que même ici, même je l'aime, mais je pense que nous avons plus d'espacement sur le côté que sur l'autre chose. Donc, je vais appliquer 32 à notre voiture. Et imaginez que vous voulez plus de rembourrage sur le dessus et le volume. Donc voici ce que nous allons faire, c'est 4848 par exemple. Donc, nous avons notre, nos rembourrages, 32 sur la gauche et 5248 pour le haut et développer. C' est plutôt cool. Ok, donc on a notre première voiture. Je vais juste lui donner un nom de carte 1. Et je vais juste dupliquer cette carte. D' accord ? Donc ils sont énormes, mais ça n'a pas d'importance. qui est important, c'est que tu l'obtiens. Donc nous avons nos trois cartes ici. Et comme vous pouvez le voir, ils sont mis en place. Eh bien, nous avons vu ce que cela peut faire. Mais nous allons voir sont la contrainte et le redimensionnement. C' est un truc assez intéressant. Donc maintenant cet élément, cette carte, il est réglé pour pirater le contenu. On pourrait, donc il est sensible à deux. Comme nous sommes arrivés, vous pouvez voir qu'il augmente. D' accord. Il est réglé pour pirater le contenu sur l'axe horizontal et aussi sur l'axe vertical. Si nous fixons ces deux fixes, ce que nous pouvons faire maintenant est de changer la largeur du, de la, de, ce composant de mise en page externe. Mais cela ne fonctionne pas comme vous pouvez le voir, tout est en mouvement, tout est en train de redimensionner. Alors pourquoi c'est ça ? Parce que nos éléments de style, ils sont définis sur la largeur de face. D' accord ? Il y a quelque chose que nous n'avons pas touché auparavant, mais maintenant nous allons y toucher. Donc, si vous voulez que cela soit réactif. Ok, alors laisse-moi faire ça. Ce que nous voulons est de définir les éléments enfants deux paramètres de configuration différents ici dans le redimensionnement, ok, donc au lieu des cinquièmes, ce que nous voulons c'est être comme remplir le conteneur, ok ? Nous avons comme un espace imaginaire ici, qui est un bourgeonnement. Et ce que nous voulons, si nous le rendons plus grand, ce rembourrage sera le même. Mais les éléments vont se redimensionner eux-mêmes jusqu'à ce qu'ils sentent ce rembourrage. Donc pour que ce que nous allons faire, au lieu d'être fixé à notre taille réelle, nous allons mettre ça pour sentir conteneur, ok ? La hauteur que nous pouvons, nous pouvons le fixer fixe ou réglé pour sentir conteneur aussi. Et cet élément, vous voyez qu'il est réglé pour avoir du contenu sur la largeur et sur le côté vertical. Sur le côté vertical est bon si nous mettons ce contenu de bidouille de vie. Ok, et celui-ci. Mais cela, ce que nous voulons ici est de sentir conteneur à. Donc, quand nous nous étirons il va le faire, pour maintenir ce rembourrage et quand nous l'apportons et le rendons plus grand, va maintenir cet achat pour qu'il va augmenter. Voyons si ça bouge ou qu'est-ce que c'est, que fait, ok ? Notre image fonctionne bien. C' est comme augmenter et juste supprimer celui-ci, ces deux-là, ok. Donc, vous pouvez voir nos images répond, mais le reste des éléments ne le sont pas. Alors que se passe-t-il ici ? Parce que nous avons ce conteneur ici, donc c'est bon. Mais nous devons aller à l'intérieur d'une autre pure et simple sortie. Donc c'est le titre et le deck. Donc, nous savons que nous travaillons. Et maintenant, si nous double-cliquez à nouveau et que nous sélectionnons le titre, nous pouvons le voir. Maintenant, nous voyons quel est le problème, c'est que notre titre est défini sur une largeur fixe. Donc, pour cela, ce que nous voulons est de sentir conteneur, définir ceci pour remplir le conteneur et ceci au lieu de la largeur fixe, c'est le texte. Allez à remplir le conteneur à. Voyons comment ça réagit. Maintenant, notre voiture et maintenant notre carte répond brillamment est ce que nous voulons. Eh bien, je vais régler ça au lieu de, désolé, laissez-moi juste annuler ça. Ce qu'on veut, c'est au lieu d'un conteneur de carburant, je vais juste fixer la hauteur pour qu'il ne soit pas aussi stressé. Donc, il maintient la hauteur. Et quelque chose ne fonctionne pas ici. Donc ce qu'on veut c'est sur le oui, c'est bien. Donc nous avons vu ce qui se passait ici. Mon conteneur, mon conteneur principal ici à gauche, sur le, sur l'axe horizontal, est réglé pour corriger car nous voulons le redimensionner manuellement. Mais ici, il a été mis en place pour être sur le dessus, ne pas mettre à l'échelle ou pas trop chaud contenu. Dans ce cas, nous voulons chaud convaincus qu'ils ont mélangé comme les contraintes de contrôle précédentes et précis et ils font ici quelque chose de bizarre. Mais maintenant, ce que nous pouvons voir, c'est que notre élément fonctionne. Si j'ai plus de SMS ici, je le duplique, et j'augmente un peu pour voir notre voiture. Ça marche plutôt bien. Ok, donc ce que je vais faire, c'est faire comme une carte assez décente. Et ce que je vais faire à nouveau, c'est comme des rejets en double. Les rejets. Tous fonctionnent assez bien. Ok, répondent. Bon, donc ce que je veux maintenant, c'est de mettre ces trois cartes entre un conteneur et AF, leur mise en page automatique. Ils se comportent comme un trou. Ok, donc pour ça, je vais juste augmenter la mise en page automatique. Et maintenant, vous pouvez voir nous, si nous faisons cela, quelque chose arrive, même si tous sont à l'intérieur d'une disposition extérieure. Donc, nous avons notre mise en page automatique et maintenant nous voyons que tout ce qui se passe ne fonctionne pas. On n'a rien de réactif ici. Eh bien, les cartes elles-mêmes sont réactives, comme vous pouvez le voir à propos qu'elles ne agissent pas comme un trou. Alors que se passe-t-il ? Voyons voir. Nous voyons ici que nous avons comme mélange bourgeonnement. Je vais juste ajuster ça à 40. Donc tout, c'est un peu, c'est similaire. On peut voir qu'on peut l'ajuster, d'accord ? C' est donc l'espace entre les éléments. Donc, la chose que nous voulons est que ces éléments pieds sur tous les pics, tout l'espace. Donc nous ne sommes plus un. Ceci, vous voyez ici, si nous obtenons ces bourgeons plus gros, les éléments sortent de l'extérieur de notre forme principale. Et pour ça, qu'est-ce qu'on veut ? Au lieu d'être soutenu les éléments, ce que nous voulons est l'espace entre. Donc maintenant, vous pouvez voir que c'est maintenant réglé sur auto. Alors maintenant, les éléments vont prendre le, cet espace, cet espace que nous avons trois. Et cela ne va pas nous permettre de le changer. Nous pouvons juste définir cela à nouveau à une valeur et ensuite va être comme 20 pixels ici et 20 pixels là-bas. Mais si nous voulions sortir, oh, nous venons ici pour emballer au lieu de, mais juste partir à l'espace entre. Et maintenant, qu'est-ce qui va faire ? Il définit efficacement l'espace entre les éléments. Mais vous voyez que les éléments eux-mêmes, ils ne sont pas sensibles. Pourquoi c'est ça ? Voyons ce qui se passe avec les tuiles. Ok, on voit quand on sélectionne le style avec lequel il dit qu'il correspond , d' accord, donc on va changer ça dans tous les éléments, un ensemble, celui-ci. Donc on voit ce qui se passe. Et on va changer ça pour pirater le contenu, d'accord ? Et on peut voir que ça fait des choses bizarres. Donc nous allons annuler et ensuite nous allons mettre la même chose qu'avant. Le conteneur de terrain, d'accord ? Nous avons vu que nous n'avons pas changé le, ceci est réglé sur une largeur fixe afin que vous puissiez voir que nous pouvons le redimensionner. Et les autres vont s'adapter en hauteur et en largeur à la, à, à, pour choisir l'espace disponible. D' accord. Donc celui-là, je vais juste annuler à nouveau. Et nous allons tous les mettre à sentir conteneur. Ok, donc maintenant on a la vie. Ils remplissent le conteneur et ce qui se passe ici, c'est que, oui, maintenant ils se comportent comme ils sont censés se comporter. Imaginez que vous voulez plus entre ces éléments. Donc, la seule chose que vous avez à faire est juste d'aller de l'avant et de le pomper, ok. Donc, comme vous pouvez le voir, c'est un peu difficile de jouer avec un espace entre. Ensuite, ici dans les éléments psi, mettez ces deux conteneurs f_0 et vous pouvez jouer avec. Donc, par exemple, vous pourriez vouloir comme ça dans la largeur du poing, comme quelque chose comme ça. Et ceux-ci vont être réactifs. Donc celui-ci ne va pas changer quand je déplace, mais le reste d'entre eux va être réactif. Cela dépend de la, l'effet que vous cherchez. D' accord ? Donc, si vous voulez que ces trois cartes soient identiques, c'est la bonne façon de le faire. Laissez-moi juste mettre ceci au lieu de cette largeur pour sentir conteneur à nouveau. D' accord ? Donc, ils se comportent comme de manière réactive. Une autre chose importante ici à prendre en compte est, comme vous pouvez le voir, si je fais cet élément super, super grand, ces éléments, rester ici. Et si je voulais qu'ils le fassent, pour construire plus gros, pour augmenter automatiquement les soupirs ? Au lieu d'ici le contenu de piratage booléen, faites oui, mettez feel, conteneur de frais. Et ce qu'il fait, c'est, c'est, ça va essayer de chercher tous ces n. On peut mettre la même chose ici dans le conteneur Philly. Et maintenant, si je viens de le faire, vous pouvez voir que c'est assez réactif. Et vous savez, il va choisir la hauteur de l'élément plus grand. D' accord ? Donc c'est à vous de décider. Comment veux-tu travailler ? Donc, nous avons tout vu, comment faire, comment faire comme à partir d'un simple bouton avec juste une mise en page automatique simple ici avec des mises en page outro imbriquées pour notre astuce et notre info-bulle. Et ici, nous avons comme une version plus complexe et nous avons travaillé avec la façon dont ces mots de conteneur fluide, le contenu de piratage fonctionne. Comment le contenu est que si tout un, qui augmente sa taille en hauteur ou hauteur ou largeur et largeur, largeur fixe et aussi, ces pacte et un espace entre les inversions. Ok, alors passons à la dernière fois et à l'exercice final ici. 3. 3 réactives: K. Donc, dans cette partie, nous allons voir ces, comment faire ce design réactif. Nous avons vu sur le précédent, sur l'introduction. Comme vous pouvez le voir quand il s'agit de point, il se comporte comme une version mobile. Et vous pouvez voir que le texte est en train d'adopter et les images sont, sont adoptent dans et aussi bien. Le, ces images en bas sont une sorte de faire un point d'arrêt peut-être est à un saturé. Mais vous avez raison. Ce que nous essayons d'atteindre ces objectifs à atteindre ici. En même temps, j'aime vous voir, je voudrais, vous voir cela ici. Vous voyez que nous avons comme un menu responsive aussi. Et puis il points d'arrêt s'enchaînent. Et puis nous avons notre menu hamburger. Ok, oh, notre icône de hamburger là-bas. Alors, comment faire cela ? Ok, donc je vais juste dupliquer ça. Et, et ça va détruire ou tout ce que j'ai fait ici plus ou moins. D' accord. Donc, je n'ai plus de mise en page automatique. Et ici, j'ai sur une mise en page automatique, la pause des médias, tout. Je ne vais pas tout faire à partir de zéro. Je veux dire, ce sont des textes normaux. Ce sont tout est une sorte de pulsions régulières, les carrés, les icônes textes. Donc tu sais déjà comment faire ça. Je vais choisir cette couleur pour quatre. Et qu'est-ce que nous avons ici est l'arrière-plan pour le menu et l'icône et le texte régulier. Vous pouvez le voir ici. Ok, donc pour cela, ce que je vais faire pour que ce menu sélectionne tous les éléments, pas, pas l'arrière-plan, juste les éléments. Rappelez-vous donc que vous pouvez simplement faire glisser, sélectionner tout et avec la touche Maj, puis vous désélectionnez l'élément que vous voulez. Alors maintenant vous voyez que nous avons tout sélectionné. Et encore une fois, que voulons-nous ce clic droit, Ajouter la mise en page automatique ou déplacer un. Et nous avons notre mise en page automatique là. D' accord ? Donc, ici, nous avons vu que vous pouvez contrôler l'espacement entre les éléments par défaut, je vais définir ces deux. Je ne sais pas. 72, ce qui est un multiple de huit et se sent bien pour moi. Je vais aligner ça sur le centre. Et vous pouvez voir que le texte est aligné sur, dans ces mises en page automatique, ce texte est aligné sur un dopant que je voulais aligner au centre. Ok, alors on va l'aligner au centre. Et en même temps, je veux que ces éléments se comportent que lorsque nous l'étirons, cet élément, tous les éléments un étirement et aller au centre. Pas, pas, pas, pas, pas aller à gauche, juste, juste au centre. C' est pour ça que je mets ça aussi. D' accord. Donc, je vais avoir cet arrière-plan et ajouter une autre sortie. Donc ça va être la tuile. Ok, donc on l'a. Et maintenant, nous avons comme huit pixels entre. Ce n'est pas important en fait. Et nous avons des paddings mixtes ici. Ok, c'est bon. 1919 à 211. C'est bon, c'est bon. Et quelque chose d'important que je veux faire ici est quand nous sélectionnons ceci, c'est, je veux les éléments avec. Eh bien, c'est, ce n'est pas important, mais quelque chose d'important ici est au lieu d'une partie, ce que je veux, ce sont les éléments avec un espace entre et vous ne voyez pas vraiment la différence ici. Et si, maintenant on fait ça ? Nous ne pouvons pas remarquer la différence non plus parce que nous avons cette configuration à contenu chaud. Et si vous n'avez pas à pirater, ce que cela signifie, c'est que si j'augmente ça, ça va être augmenté. Mais pour ce cas particulier, ce que nous voulons est de régler cet en-tête entier sur fixe, ok ? À fixer et à épingler à gauche. Donc, quand nous redimensionnons va être B sur la gauche et les éléments I V vont être un étiré. Voyons, quelque chose qui ne marche pas ici. D' accord ? Donc maintenant au lieu de cinquièmes, nous devons mettre le conteneur de remplissage. C' est quelque chose que vous allez travailler lorsque vous changez quelque chose sur la barre et ensuite vous devez le changer sur l'enfant à. Donc nous avons maintenant, vérifions à nouveau. Nous avons comme un fixe avec quatre d'en-tête, ce qui est quelque chose que nous voulons. Et notre tuile a un conteneur de terrain. Donc, il va maintenir l'espace sur le, sur les tailles sur les différents côtés. Et voyons comment cela fonctionne. Maintenant. Tu vois qu'il le fait. D' accord, mais ça garde cette marge ici et ça, cette marge là, ce qui est un peu cool de ce qu'on voulait. Mais ce que nous voulons aussi, c'est aller de gauche à droite. Essayons donc de gauche et de droite. Il continue à bouger sur la gauche. Donc, pour cet élément particulier, ce que nous voulons, je pourrais faire une mise en page automatique avec élément diesel. Mais pour ce cas particulier, je ne le veux pas parce que je veux que ceux-ci soient réactifs comme ça. Laissez-moi juste, donc si vous voyez que les éléments prennent cet espace et maintiennent cet espace. Mais c'est quelque chose que ces éléments sont comme, vous savez, comme à l'estime entre eux. Et pour ce faire, nous ne pouvons pas le faire si nous mettons ces deux éléments dans la même mise en page automatique. Parce que la mise en page automatique définit pas les paddings automatiques de pour les deux éléments. D' accord ? Donc, dans ce cas, ce que je veux est de faire un groupe de ceci au lieu d'une pure et simple sortie. Donc, cela va être appelé un en-tête. D' accord ? Et voyons comment cela se comporte. Eh bien, ça me semble plutôt bien, mais il manque quelque chose ici. Ici, j'ai fix correspond à une largeur plus élevée. Et au lieu de revenir, je veux mettre un espace entre les éléments. Et voyons ce qui se passe maintenant. Maintenant, les éléments, comme vous pouvez le voir, ils sont vraiment, vraiment, vraiment réactifs. D' accord ? Et quelque chose que j'ai fait signifie faire. Quelque chose s'est passé ici est d'aligner ces éléments au centre. Ok, donc nous avons notre en-tête et maintenant nous avons ici comme un texte. Et vous pouvez voir que j'ai mis ce bureau avec une largeur fixe mais avec des hauteurs différentes. Donc, si nous continuons à écrire ici, va nous donner une autre ligne. Mais vous voyez que cela a dû dire que cela ne vient pas dans ces antécédents. Donc, ce que nous devons faire pour cela est de sélectionner ces deux éléments. Encore une fois sur la mise en page automatique. Maintenant, tout est en place. Mais que se passe-t-il si je fais ça ? Encore une fois ? Rien n'est réactif. Craignez que ce soit réactif si j'arrive. Maintenant ne l'est pas. Pourquoi c'est ça ? Parce que comme vous pouvez le voir, mise en page externe a changé le comportement de ceci. Donc je veux être, d'avoir à aller pour avoir comme un poing avec cet élément. Je le veux avec une largeur fixe. D' accord ? Donc, pour cet élément, je vais le sélectionner et je vais le vendre pour le vendre pour fixer la largeur. Puisque notre mise en page automatique a déjà ici un rembourrage pour le formulaire de gauche, nous allons, nous devons faire quelques ajustements ici. Laisse-moi juste en mettre cent cent. Et puis je vais juste adapter est ajusté manuellement. D'accord. Et ceci, et ceci, tout a encore changé ici. Eh bien, OK. Donc, cela peut, donc je veux que ces marges soient sur la sortie. Donc quelque chose ne allait pas ici qu'il poussait. Le DevOps était, poussait. Ok. Donc, si je fais ce néant réactif encore, mais maintenant si cet élément au lieu de la largeur du poing doit être sur le conteneur de terrain. Donc maintenant nous pouvons jouer avec, avec, avec, avec, ce N. Si nous faisons cela, rien ne se reproduira parce que nous devons changer ça en. Ça ne marche pas sur ce conteneur de largeur, OK ? Et maintenant ça marche UC, donc les deux éléments doivent être réglés pour remplir le conteneur, ok ? Et cet élément à la largeur du poing, puis tout cela sur la gauche. Parfois, il va vous prendre un peu d'aller-retour et venir ici à Fisk avait Cortes ce que vous voulez aligner les choses à gauche, à droite, à gauche et à droite. Ok, donc pour ce cas particulier, nous voulons être alignés à gauche et à droite. Donc, quand nous récitons ceci, c' est, comme vous pouvez le voir, fonctionne, mais nous ne l'avons pas fait avec notre en-tête, donc nous devons mettre à gauche et à droite. Donc ce sont les poubelles. Et ce qu'il fait, c'est que lorsque vous redimensionnez votre cadre va faire les éléments à redimensionner de la gauche et de la droite. Donc, il faut le buy-in que vous avez et ensuite ajusté pour cela, nous voyons que notre en-tête fonctionne dans, notre menu fonctionne. Et, et vous notez que la notification fonctionne. D' accord. Donc, je vais juste ajouter les s, Cette photo, quelques pixels ici. Et ce sont des textes simples. Ce que je fais habituellement est de faire aussi bien qu'une mise en page automatique d'entre eux. Et je vais vous parler par défaut aligne tout sur la gauche. Et ce qu'on va faire, c'est venir ici et l'aligner au centre, d'accord ? Et l'espacement, l'espacement entre les éléments où je veux ce huit pixels. Et je vais juste apporter ça un peu, disons 488, c'est 46. D' accord. Donc nous avons notre image ici. Je vais juste l'ajuster à la taille et est prêt à sentir. Voyons donc comment cette image se comporte. Quand nous, l'IA se comporte bien, nous voyons que tout bouge, mais notre test ne l'est pas. Alors qu'est-ce qu'on va faire ici ? Nous allons mettre cela au lieu d'aligner sur la gauche. Vous voyez que le texte reste à gauche. Et il est devenu ces, ces espace entre ici et ne bouge pas. Et nous voulions déménager au centre. Donc on va juste entre ces deux-là, l'expéditeur, ok ? Donc maintenant, si on l'enlève, vous voyez que c'est superbe. Et fait quoi, que voulons-nous ? D' accord. Eh bien, ce n'est qu'une photo. Ce Dido, rien de fantaisie ici. Quelque chose que je veux faire, c'est de faire une mise en page automatique avec ces trois images ici. Et bien aligné au centre. Je vais juste aligner parce que j'ai déménagé mon film IV Maya valent tellement ça. Il n'a plus une largeur normale. De toute façon. C'est bon, c'est bon. Et ces éléments, je veux faire une mise en page automatique avec eux aussi. Juste parce que j'ai envie de continuer à m'entraîner à positionner les éléments ici. Et vous pouvez voir, et vous pouvez, c'est idéal pour contrôler votre espacement. Comme je le dis. Je sais que je me répète beaucoup, mais ces choses sont importantes et je vois trop de séparation ici. Donc, je sélectionne ces deux éléments et je vais faire un autre aberrant. Pourquoi ? Parce que je veux contrôler ce bayésien particulier et je veux moins d'espace ici. Et disons que je ne veux que huit pixels, d'accord, donc cet espacement est de huit et d'ici à il y a 24. Ok, parce que nous l'avons fait, nous l'avons dans une autre mise en page automatique. Je vais aligner ces éléments au centre aussi. Donc, quand nous redimensionnons notre tonnelle est reste, reste au centre. Donc je vais juste faire ça. Et pour ça, je vais faire la même chose. Je vais juste l'amener au centre. Donc, quand nous les arrangeons, quand nous redimensionnons notre, notre, notre travail, voyons comment cela se comporte. Tout reste au centre et c'est, cela augmente. Son, son, sa hauteur, ce qui est cool. Donc nous, ce que nous voulons ici aussi, c'est que cet élément commence à être redimensionné comme, comme ça quand nous les rendons plus petits. D' accord ? Donc pour que ce que nous voulons, c'est, nous entrons sur les tuiles et vous voyez qu'il a correspond avec. Donc, nous voulons remplir pour changer cela pour sentir conteneur. D' accord. Et du côté alimentation, nous voulons qu'ils ne soient pas une hauteur de visage mais pour remplir le récipient. Ok, donc nous avons tous dans le conteneur de terrain et le conteneur de remplissage. Que se passe-t-il si on redimensionne ça ? Voyons ce qui se passe et rien ne se passe. Pourquoi c'est ça ? Voyons ce qui se passe là-bas. Ok, au lieu de revenir, je vais devenir grand comme un espace entre. Donc, ces éléments prennent tout l'espacement. Incroyable, d'accord ? Moi à l'intérieur de cet élément. Et maintenant, vous voyez à nouveau que nous avons le spanning réglé sur auto. Et ici, nous avons notre faisceau d'éléments au centre, ce qui est cool. Et, et ce que nous voulons ici, c'est maintenir la gauche et la droite à la fin de la page. Donc, au lieu du centre, nous allons mettre ces deux à gauche et à droite. Voyons comment cela fonctionne. Nous voyons que les éléments bougent, ce qui est bon, mais ils ne s'échappent pas. Donc, quand nous sélectionnons à nouveau l'élément, vous voyez quand, quand faites-vous, quand vous taxez quelque chose, prochaine fois est une sorte de changement. Donc, pour cela, nous allons définir ceci pour sentir conteneur au lieu de fixe. Sentez conteneur et Finkel Dana, tout est maintenant mis en place pour sentir conteneur. Donc, si nous changeons cela, maintenant vous voyez que c'est entièrement, complètement, en quelque sorte entièrement responsable. Réactif, désolé. D' accord. Tout est super lisse maintenant et tout va très bien. Donc, ce que je vais faire est oui, dupliquer ceci et en faire une version mobile. Donc pour cela, ce que je fais est oui, recto-verso tous 380 ou quoi que ce soit, cette taille est parfaitement bien. D' accord. Beaucoup de façons appréciées. Comme vous pouvez le voir, ces textes sont trop gros. Eh bien, à ne pas acheter. Ouais, eh bien, c'est deux semaines en fait. Donc je vais juste changer rapidement. Ces 424, ça va accrocher le bureau pour descendre à 18, et ça va être un pas vers le bas à 14. Donc, nous en avons plus. Et je vais les aligner sur un centre. Ceux-là, je vais juste l'ajuster là. Et ces 40 vont être là. Donc nous avons ça. Et pour le menu, ce que nous allons faire, il suffit d'ouvrir un peu notre, notre façon de le dire, notre en-tête. Et je vais juste supprimer tous ces éléments. Ils le veulent, et qu'est-ce qu'on veut ? Facile à insérer. Et oui, un, ces deux-là pour être un peu ici, puisque nous avons cet espace entre ici est si, si j'ajoute des éléments, ils vont être, vous savez, comme dire la barre huit uniformément. Donc, pour ce cas particulier, je veux juste l'entrée. Oh, pas celle-là. Je veux des icônes de plumes. Et mettons-nous un menu. Cool. Je vais juste regrouper ça. Et je vais juste parler de ça, le mettre ici, le regrouper , et changer ça en blanc. Pas trop de complication ici. Et je vais juste supprimer ce bac. D' accord ? Donc, nous avons déjà notre en-tête. Et maintenant, nous allons juste les rendre plus minuscules. Donc tout correspond à C 240. Et ces images, au lieu de, c'est une belle fonctionnalité. Au lieu de les aligner sur la direction horizontale, mettons-le sur la direction verticale avec la mise en page automatique. Et nous pouvons agrandir cela et ensuite élargir cette section. Nous pouvons même le rendre plus large compte tenu de l'ensemble, étant donné quelque chose comme ça. Et nous allons tout aligner au centre pour mieux les champs. Nous avons donc notre version mobile. Dan aussi. Et laissez-moi simplement les renommer en mobile, mais je vais mettre mobile aussi. Donc et bureau aussi, parce que j'ai déjà les mêmes noms ici dans. Je voulais vous montrer ce plugin. Alors voyons comment cela fonctionne. Eh bien, ça ne marche pas. Donc, ce que nous voulons ici, c'est au lieu de la moitié du contenu. Oui, je l'ai fait ici et la mise en page automatique. On n'en a pas besoin. Oh, non. Oui. On n'en a pas besoin. Oui, on a fait ça. Ça suffit. Alors, qu'est-ce qu'on veut ces gros textes dehors ? J' ai fait cette erreur de faire dire à l'assassin la mise en page automatique de l'arrière-plan et la densité est, ce n'est pas nécessaire du tout. Donc, ce que nous voulons maintenant, c'est dans les contraintes, mettre leur image de fond à la poutre, à gauche, à droite. Donc, quand on le rend plus grand, vous pouvez voir les images et grandir. C' est ce qu'on veut. Donc maintenant, si nous allons voir si ça marche. Oui, ça marche. Mais ces équipes ne travaillent pas du tout. Je veux dire, je dois augmenter cette somme pour un autre père. Et quand nous arrivons à plus de fil, donc il est venu un peu en bas. Il existe des façons de tisser la mise en page automatique. Nous pourrions les rendre plus efficaces. Je veux dire, quand quand ces composants, ce n'est pas si élevé, cet élément conduit apparaît. Et puis le moment, quand, quand, quand ça descend, ça descend. Mais pour cet élément particulier, je ne le fais pas, je n'ai pas vraiment besoin qu'il soit épuisé. Je veux vous montrer que comment fonctionne un blog et comment faire une sorte de designer réactif ici à Fiqh. Fâché, ça marche plutôt bien. Il y a ce plug-in appelé responsive. Son utilisation est assez simple. Qu'est-ce que tu fais ? Sélectionnez le, les conceptions réactives que vous avez et vous les sélectionnez comme cadres d'entrée. Ce seront vos, vos, vos conceptions principales, disons. Et puis nous avons besoin d'un cadre réactif. Donc je vais juste peindre ici un cadre. Je vais juste le mettre sur 111000, cent quarante neuf cents haine. Eh bien, la chaleur va être comme la version mobile pour que nous puissions voir ce qui se passe. Et ce sera notre design réactif. Et nous ajoutons simplement leur cadre que nous avons sélectionné le responsive que nous avons ajouté à la bombe de cadre responsive. Donc, nous avons déjà ici que j'ai conçu, mais cela fonctionnera. Voyons voir. Donc je vais faire un peu plus grand cette partie. Alors maintenant, ce que nous faisons, nous pouvons voir que tout est en quelque sorte en train de changer. Tu vois, il le fait, d'accord ? Et nous pouvons aller jusqu'à leur version mobile et tout se comporte comme prévu. C' est donc une façon assez cool de faire des conceptions sensibles au décalage. Bien sûr, peut-être qu'un autre point d'arrêt au milieu entre ces deux serait souhaitable pour que le menu des hamburgers n'apparaisse pas si tôt. Mais, et, et tu sais, peut-être que ça n'a pas besoin de gommer si tôt. Ni plus. Mais tu as l'ADI, non ? J' espère que vous avez appris toutes ces choses sur les matières fécales. On décrocherait le contenu, l'espace entre les éléments et tout ça. Alors on se voit sur leur phase finale. 4. 4 sorties: Hey, merci d'avoir jusqu'à la fin. J' espère que vous avez apprécié ces tutoriel rapide. Eh bien à la toute fin était un peu la version standard de celui-ci. Mais cette nouvelle mise en page automatique Mao a beaucoup d'options et c'est un peu délicat. Donc vous devez travailler un peu qu'on a fait pour dire à deux vraiment, pour vraiment s'en sortir. Je vous encourage donc à faire certains des exemples que nous avons vus ici. Donc, je pense vraiment que c'est une bonne pratique de faire ces info-bulle et un bouton, puis est allé aux voitures et a essayé de les rendre réactifs et de faire le comportement que vous voulez avoir. Et si vous avez des doutes ou votre, ou vos prototypes sont RN travail ou vos mises en page auto sont et fonctionnent comme prévu. Gaz. Faites-le moi savoir dans les commentaires et je vais essayer de vous aider. Alors merci beaucoup. Et oui, si vous êtes intéressé par d'autres cours comme ceux-ci ou des tutoriels comme celui-ci, il suffit de me suivre et j'essaierai de vous le mettre à jour, pour vous donner des mises à jour avec de nouveaux tutoriels. Et aussi, si vous êtes intéressé à voir quelque chose que je n'ai pas dans les tutoriels liés à 50K Mao ou à la conception. Faites-le moi savoir et je vais essayer de faire un tutoriel si, si c'est traitable. Donc, merci beaucoup d'avoir vu ce tutoriel. Au revoir.