Figma : créer des designs réactifs !

1. 1 - Introduction: Hé, dans ce cours va être super rapide. Nous allons voir comment faire des designs réactifs à l'intérieur de sigma. Nous allons donc utiliser des contraintes afin de faire quelques designs réactifs. Donc, en même temps, vous apprenez l'outil et apprenez les compétences nécessaires pour faire des conceptions réactives à l'intérieur fema. Et c'est donc bon pour votre portefeuille aussi. Donc, je vous encourage à rejoindre la classe que je pense va être super intéressant et amusant. Au fait, je suis Bruno UX, designer avec 20 ans d'expérience. Maintenant, je conçois une approche Big Data. Je vous encourage donc à participer à ce cours et à vous voir sur la première leçon. 2. 2 - Conception réactive dans figma: Hey, alors commençons et nous allons commencer à démissionner cette page de destination réactive que j'ai créée ici, S3, IA, c'est un artifice vendant des milliards d'appâts web. En fait, je n'ai pas copié toutes les choses, mais j'ai essayé de répliquer ces trois éléments ici, sorte de blog, une barre de nouvelles. Et aussi, j'ai essayé de le reproduire. Beaucoup. Ceux-ci, je l'ai inventé juste pour le bien de la page web. Dans, comme vous pouvez le voir ici, nous avons ces trois écrans. Il d Ensuite, comme nous allons le voir maintenant, il n'a pas fallu trop de temps pour faire ces conceptions basées sur celles-ci, sur leur bureau. Et que nous pourrions le rendre plus rapide parce que nous avions appliqué, comme vous pouvez le voir, les contraintes de sable pour construire ceci pour construire ces interfaces. Donc plus tard était super facile, oui, pour faire ces ajustements. Et c'était super rapide. Alors commençons avec cela et commençons à concevoir cette page Web dans ce courant juste pour le nommer biaisément ici. Et je vais juste insérer le cadre. Rappelez-vous, faites oui, sein F ou a. Et puis vous pouvez simplement entrer préréglage ici. Et je, dans ce cas, je vais utiliser le MacBook Pro est celui que j'ai habituellement utilisé pour mes designs. C' est donc un bon point de départ. Ici, j'ai quelques grilles de mise en page pré-configurées. Dans ce cas, je vais utiliser la mise en page bootstrap cinq x X L. Vous pouvez voir comment créer ces mises en page dans mon autre tutoriel sur les grilles de mise en page, où vous apprendrez à créer Bootstrap. Pour Bootstrap, cinq mises en page aussi. Vous allez apprendre à créer un pixels grilles parfaites, ok, donc il est juste une grille pour, pour commencer mon design ici. Ce n'est pas un, ce n'est pas une grosse affaire. Donc, ce que j'ai fait cela pour le créer, créer un rectangle, pour créer un rectangle.js, venez ici et appuyez sur rectangle ou deux. Oui, les seins sont essentiels. Raccourci et vous êtes prêt à partir. Et ce que j'ai fait est ce que nous faisons ici, c'est d'utiliser le plugin moins plus. Alors, allons les trouver. Un espace et l'espace suivent. Donc, globalement ici dans l'espace, oui, nous en avons 40 ici. Donc, il est parfaitement assis comme nous le voulons. Ce que je fais habituellement aussi est de faire un autre rectangle sur DS1. Ce que je fais habituellement ses bottes, un champ en sorte d'une couleur bleuâtre et ensuite dessiné vers le bas la verbosité à quelque endroit que j'aime. Donc je peux mettre du texte dessus, d'accord, pour que vous puissiez voir, vous pouvez faire la différence en appliquant ce genre de masque. J' aime faire c'est de cette façon. Peut-être qu'il y a un autre moyen ou dans un autre domaine et ensuite mélanger et tout. Mais j'aime le faire de cette façon. D' accord. Et nous allons insérer notre je l'ai fait charger le logo avant. Tu n'as pas à le faire. Vous pouvez mettre le niveau que vous voulez. Donc, vous n'avez pas vraiment besoin de les mettre comme logo secte dessus. Allons prendre du matériel auditif. Oui, celui-là, je suppose. Cliquons dehors. Et depuis ces noirs cachés, je l'ai fait aller ici aux paramètres d'image et puis bosse vers le haut cette posture. Bump sur le haut vers le bas, mettre les reflets vers le haut, les silos vers le haut. Et bien, j'ai en quelque sorte mangé du blanc, qui est ce que nous voulons ici pour le nom. C' est donc Phi S3 AI ? Oui. C'est un peu ennuyeux en ce moment. Tu vas, on doit mettre les choses un peu en place maintenant. Donc je suppose qu'il est centré là. Et je vais juste apporter mon menu ici. Les articles. Je ne veux pas apporter tout, tout ça parce que je veux te montrer comment je le fais. Ainsi, vous pouvez l'appliquer sur vos visages. L' art, comme vous pouvez le voir, calque de texte régulier, donc pas de complications ici. Je vais juste regrouper ça en un groupe appelé logo. Donc nous l'avons là. Et, et ce que je vais faire est d'utiliser un autre plugin que j'utilise beaucoup. Ça s'appelle un quantificateur, comme vous pouvez le voir ici. Et vous qualifiez comme grand pour trouver des icônes. N' oubliez pas d'utiliser généralement le même type de jeu d'icônes. Donc, ne changez pas entre les différents jeux d'icônes. Nous. Choisissez un jeu d'icônes, puis appliquez-le. Mais pour ce particulier, je vais juste, nous avons besoin comme une recherche, comme une icône de recherche. Donc je pense que c'est une bonne chose. Je pense que oui. Oui. Coup de pied ou faites-le glisser et justin groupez-le pour que nous ayons seulement l'icône ici. Et changeons la couleur en blanc. Donc, nous avons ceci, et comme nous le voyons ici dans notre, nous avons ce bouton avec la mise en route. Voyons la hauteur 48. Donc, nous sommes dans une largeur de huit pixels. Nous allons donc dessiner un rectangle avec des pixels de Fourier. Je vais ajouter du son et du rayon de frontière ici, comme disons dix. Et appliquons sur un trait, un trait d'un pixel et supprimons l'arrière-plan. Et puis je vais juste copier. Et ce texte ici, et il va dire, qu'est-ce que c'était, l'exceptionnellement commencer. Très bien, donc c'est assez simple ici. Nous allons le convertir en un bouton Mise en page automatique. Donc, il sera en quelque sorte réactif au bureau que nous avons mis dessus. Donc, pour cela, vous pouvez simplement cliquer sur, clic droit et mise en page automatique AF ou je recommande d'apprendre que le circuit est tamiser un et il fait des choses bizarres ici. Donc on ne veut pas ça. Je ne sais pas ce qui se passe. Laisse-moi juste mettre ça. Maintenant, c'était la configuration de la couche. Alors rappelez-vous, c'est une bonne pratique de mettre le rectangle et dans le, vers le haut, dans les calques, de mettre le texte. Et maintenant, comme vous pouvez le voir, nous avons comme 48 pixels bouton de hauteur et nous pouvons ajuster ici le bobbing. Donc, puisque nous travaillons avec un chagrin de huit pixels, alors nous allons voter comme 32, ok ? Donc nous venons de le mettre ici, et je veux mettre ces éléments 232 pixels à, pour faire apparaître ces mesures. Ici. Vous venez de seins devrait sur, sur Mac ou option sur, sur Mac et tout pour investir en Colombie-Britannique. D' accord. Et une autre chose que je vais faire l'approvisionnement ici. Et je mise en page automatique à. Donc, faites un clic droit et ajoutez une autre mise en page automatique Ce qu'il fait. Dans ce cas, je peux contrôler l'espacement de la marge et du rembourrage et l'espacement entre les éléments, donc nous les gardons cohérents. Ok, pour ça, je vais juste le laisser sur 32 aussi. Et, et maintenant nous devons le mettre à nouveau ici, 32. Ok. Nous ne ferons rien d'autre maintenant pour dire que ce serait bien de l'avoir sur 32 et ces 232. Rappelez-vous que vous pouvez bouger, vous pouvez bouger à l'encre. Si vous appuyez sur les touches fléchées, il déplacera un pixel vers la gauche, vers la droite, vers le haut et vers le bas. Et lorsque vous appuyez sur Maj, il se déplacera par incréments de dix. Donc je le fais d'habitude comme ça. Ok, donc nous avons notre configuration de menu. Et maintenant, nous allons ramener notre mise en page ici pour que nous puissions faire, je ne sais pas, une sorte de stylet. Donc ça va avoir 16 ans. Donc c'est, nous sommes toujours sur la grille de pixels. Je vais créer ici en prenant six colonnes pour le titre. Je ne me souviens pas du titre en fait. Donc je vais juste le copier. Et cette police de caractères, hey avait utilise livrée château sur l'affichage est un libre est une police libre. C'est une police gratuite. Vous pouvez, vous pouvez juste utiliser de, vous pouvez juste parler. J' entends Sigma parce qu'il est fait, c'est de Google. D' accord, donc ici ce que nous voulons, c'est dire ça non pas dans la largeur extérieure mais dans la hauteur automatique, ok ? Donc, et la largeur va rester ici. Si on continue à l'écrire, ça tombe. Mais, mais, donc la largeur est fixe, mais la hauteur est de trois. D' accord ? Et maintenant, nous avons un texte ici. Je vais copier aussi. Et pour ça, je vais juste le laisser. Commencez comme cinq colonnes. On pourrait aller avec six colonnes si on veut. Eh bien, ça va absolument disparaître des colonnes de C, mais ça, je vais le laisser sur cinq. Rappelez-vous, ils penseraient qu'il s'agit de travailler avec Layout est que vous pouvez positionner des éléments avec toute la sécurité. Vous allez aligner les éléments. Je ne suis pas aligné dans mon menu ici. Je laisse juste ces 32 bobbing ou espacement autour de ces éléments parce que je veux aller ce plein, plein, pleine largeur, plein écran. Quand vous augmentez la largeur de la fenêtre, je veux aller jusqu'au bout. Mais cette partie, je veux rester pour m'en tenir au chagrin. Donc, si cela augmente, la photo augmentera, mais cela restera au même endroit. Ok, c'est ce qu'on veut faire. Et encore une fois, si nous regardons l'erreur dans notre conception, nous avons ici un autre bouton est appelé ou plus, ce qui est le même que de commencer. Donc pour ça, je vais juste copier ce bouton dehors. Whoo. Je vais juste le dupliquer en maintenant la touche alt ou la touche Option et l'amener ici. Et la bonne chose à propos de la mise en page automatique, et vous pouvez voir ici que ces deux types de tours ou icône de pause, ce que cela signifie est qu'il a la mise en page automatique sont activés. Alors, quel était le texte ? En savoir plus. Donc, quand nous changeons le, le texte va être sensible à nos textes vont toujours être augmentés ou diminués selon le texte. Donc, comme vous pouvez le voir, nous écrivons un ici. Ces Neymar, il devient plus grand, il grandit. Donc, pour cela, j'aime vraiment appliquer la mise en page automatique à, pour appliquer comme un espacement cohérent pour cela, je vais utiliser 32 comme nous l'avons utilisé sur notre menu. Et vous pouvez voir parfois ces types de comportement bizarre apparaît pour que vous venez de sélectionner l'élément. Et ici, vous pouvez aligner les éléments à l'intérieur de la mise en page automatique. Mise en page automatique, vous pouvez aligner les choses. Oui. Nous pourrions aligner le ici ou même changer l'ordre comme vous pouvez le voir. C' est donc une bonne pratique d'aligner tous les éléments vers la gauche si vous le souhaitez de cette façon. Et ce que je fais habituellement aussi, c'est de mettre cela dans cette mise en page automatique. Oui, en faisant glisser ici, vous pouvez voir que si ce bleu est sélectionné et en fait ce n'est pas si mal. Donc je vais le laisser dans cette mise en page automatique, ok, donc je vais juste renommer ça en bouton. Et ceux-ci ont le titre. Donc nous savons plus tard ce que nous avons ici. Et cela va s'appeler un menu. Et ça va être le bouton. D' accord ? Donc on peut garder les choses en ordre ou en bon état ? Ok, donc nous avons notre première partie comparée à ça. Et maintenant, nous allons créer ces éléments ici. Donc, pour cela, je ne vais pas créer une sorte de, je vais créer une copie de certaines parties. Donc maintenant, si nous voyons, si nous redimensionnons cela, nous pouvons voir que quelque chose de plus. Donc c'est bon et on peut agrandir notre Columbus. Je vais juste copier ce texte. Ce texte que j'utilise ici est appelé regula inter intergranulaire à 16 pixels, et VCs inter bolt à 52 pixels. Et les éléments de menu sont intergranulaires 14 pixels. Vous pouvez jouer autour ou vous pouvez choisir une police de caractères, se sent bien pour vous. Ce n'est qu'un titre, rien de fantaisie. Et voyons comment cela est fait. Je veux dire, voyons la structure de ça. Ok, donc on a une photo, on a une sorte de bordure grise ici, que je vais copier juste pour battre cette couleur, ces couleurs. Et nous avons ces dates, puis le titre, puis un peu de dos et une flèche ici. Ok, alors revenons. Je vais juste copier ici comme référence. Je ne vais pas le mettre ici. Je veux te montrer comment je fais. Donc, pour cela, puisque nous avons trois éléments que nous voulons prendre pour, pour notre article. Donc, ce sera la distribution que c'est ce que j' aime travailler avec nous avec des grilles parce qu'il est super facile de positionner des éléments, garder la cohérence sur différentes pages et tout. Donc, si vous n'êtes pas habitué à travailler avec la mise en page, je vous recommande vraiment de le faire correctement. Donc, ce que je vais faire ici est d'utiliser à nouveau le plugin, le plug-in. Dans ce cas, je vais juste démarrer. Militaires. Serait Militaire et oui, nous avons nos quatre. D' accord. Mais je vais juste le changer pour cet hélicoptère. Et je vais juste copier le texte parce que ça peut être un peu fastidieux tâche. Je vais juste les mettre comme ça. Pour le shake, vous pouvez voir ici la facilité de configuration en gras 16, intervalle 22, et intervalle. Alors pour ça, pour la pile, ok, donc pour cette icône, je suis juste revenu à mon loft, plug-in économie phi et jeux pour flèche. Droit ? Et je crois que j'ai utilisé celui-là, mais ça n'a pas d'importance. Oui. Au lieu de cela, celui qui se sent bien pour vous et ce sera génial. Comme vous pouvez le voir. Il quantifie les insertions comme un cadre, puis insère un type de groupe. Donc, je dégrouperais habituellement ces cadres pour qu'il disparaisse. Et j'ai la flèche. Alors mettons la flèche et dans le bureau, rendons cela un peu plus grand, quelque chose autour de ça. Et nous avions avant ce genre de rectangle pour ces ce que je fais est juste de créer, Ouais. Et chaque fois que je l'envoie à l'arrière, retirez l'insert et un coup. Je vais juste être avec le sélecteur de couleurs. Je vais copier ceci sauf gris, et qui est un gris subtil. Et ce que je fais c'est que je le mets habituellement un peu plus haut pour qu'il soit caché avant la photo. Pour que tu puisses le dire comme ça. Mais vous allez avoir comme cette grande cellule ici qui est un peu sale. Donc je suppose que je l'ai mis derrière. Et nous avons presque notre désir ici, mais je veux faire quelques choses avant. On laissait 32 pixels sur la gauche. Donc, dans ces éléments ici et entre ces éléments aussi bien. Donc je veux le garder cohérent et feuille comme 32 bits nous ici, ici nous en avons 32, comme vous pouvez le voir maintenant, 32, ici nous en avons 32. Et maintenant, je veux en avoir encore 52. Donc, il est bon d'o. et ici, nous voulons comme 32 pixels à. Donc je vais juste aligner ça, aligner au milieu, ce qui est bien. Et ici, nous voulons avoir comme 3032 va être une sorte de deux régimes. Alors disons 34. Eh bien, nous pouvons, nous pouvons nous rappeler que vous pouvez mettre ici comme Samsung ou oui, oppress moins n va le faire, maintenant nous devrions en avoir 32, donc nous sommes prêts à y aller. Donc, nous avons notre première voiture ou neuve ou donc nous allons créer un composant de cela. Et ça va être une nouvelle, d'accord ? Donc je vais juste appeler ça des nouvelles. Et je vais juste apporter notre mise en page à nouveau et le dupliquer. D' accord ? Donc, nous avons déjà fait notre conception. Oh, qu'il y a cette bataille que nous devons créer. Mais ici, dans cette conception réactive, vous pouvez voir que les éléments se déplacent pour ceux qui sont à l'échelle. Le, les, ces éléments sont vraiment, ils sont vraiment sensibles à la même chose que le menu. Et, mais si nous le faisons ici dans notre nouveau design, il suffit de l'enlever. Et nous le faisons ici. Nous pouvons voir que certaines choses se passent que nous ne voulons pas arriver. Donc, ces photos n'échappent pas au menu. C' est, on le perd d'une manière ou d'une autre. Eh bien, le menu, il se comporte en quelque sorte bien. Quels sont les éléments ici, nous pouvons voir qu'ils ne sont pas la mise à l'échelle correctement. Alors réparons ça. Ok, donc je ne vais pas changer ces quatre. Oh, eh bien, je vais encore les changer. Vraiment rapide. Nous ouvrons à nouveau et un plug-in splash, et nous allons induire quelques photos aléatoires. D' accord. Donc nous l'avons ici. Laisse-moi juste qu'on ne veut pas toute cette lumière ici. Donc, ce que nous devons, c'est de comprendre ces contraintes, panneau. Le panneau Contraintes est ce qui va rendre votre design réactif ou se comporter comme vous le souhaitez, d'accord ? Donc, pour ce flux particulier, ce que nous voulons que ce soit à gauche. Donc, nous voulons maintenir ces bourgeons, nous avons dit avant de 32 pixels et la même chose. On veut en haut pour ça, tu le laisses comme ça. On a filé ce panneau. Nous pouvons voir que vous pouvez l'épingler à gauche, à droite, à gauche et à droite, au centre ou à l'échelle pour ce cas particulier, nous le voulons comme ça. Pour le menu, ce que nous voulons est au lieu de gauche, nous ne voulons pas prendre cette énorme quantité d'espace ici. Ce que nous voulons, c'est l'amener à droite. Donc, nous voulons maintenir cet espace. Ici. Nous voulons maintenir cet espace sur la droite et sur le dessus. Donc nous le mettons juste à droite, en haut, le texte, ce texte. On veut la même chose. Nous voulons être à gauche pour maintenir cet espacement ici et maintenir au sommet. D' accord ? Et la même chose s'applique à ces données, et la même chose s'applique ici. Pour ça. Si je l'amène à gauche et en haut, cela ne sera pas réactif. Donc, dans ce cas particulier, ce que nous voulons faire, il doit être nécessaire de SK. D' accord ? Voyons ce qui se passe maintenant. Comme vous pouvez le voir, c'est une sorte de bien se comporter. Ceux-ci ne déplacent pas correctement cette mise à l'échelle de l'ARN. Le premier est une mise à l'échelle comme on s'y attendait, mais les autres ne le font pas. Donc, nous devons réparer ça. Je remettrai cela à cent dix cent cent quarante. Donc c'était notre oriental. Voyons donc le menu et le reste des éléments, comment ils se comportent. Le reste des éléments se comportent. D' accord ? Donc, au lieu de mettre à l'échelle, ce que nous voulons faire, c'est de gauche et de droite. Donc ça va prendre la même chose, ça va mener le même espacement ici qu'ici. Ce que nous voulons ici, c'est mettre nos éléments de voiture attachés à gauche et à droite et vers le haut. D' accord. On pourrait mettre ici comme une balance. Mais l'échelle va faire ces éléments. Laisse-moi juste vérifier si ça va. Ce n'est pas un, ce n'est pas le cas. Oui, mais quelque chose s'est passé ici. Laisse-moi répéter ça encore une fois. Et quelque chose d'important. C' est que nous n'avons rien appliqué ici dans les contraintes. Et les contraintes. Quand faites-vous, quand vous changez la, la contrainte supérieure, le père, disons que le père, si vous êtes dans un groupe, imaginez cela comme un groupe. Si vous changez ici, le centre ou l'échelle ou ces éléments, ils vont choisir, que choisissez-vous la première fois ? Donc, c'est un peu délicat parce que si vous appliquez les contraintes avant de ces petits éléments, avant de faire votre maître, que les contraintes parent sont plus tard va être comme une cascade. Il est donc préférable d'appliquer d'abord les contraintes au groupe ou au composant, puis d'aller aux éléments internes et d'appliquer leur, leurs contraintes. D' accord ? Donc, pour cette chose, ce que nous voulons, c'est au lieu d'une échelle, car, pour cette chose, ce que nous voulons, c'est au lieu d'une échelle, nous ne voulons pas la mettre à l'échelle. Nous voulons juste qu'il respecte. Il prend cet espacement ici et cet espacement ici et le respecte. Ok, donc la même chose. Ce qu'on peut faire ici. Nous pouvons voir est que ces blancs, il a été cohérent et l'espacement entre les colonnes est cohérent à. Donc, c'est ce que nous voulons dans notre conception. Et pour cela, au lieu de mettre à l'échelle, ce qui va faire comme si on pensait comme ça ou quelque chose comme ça. Nous voulons que ces espaces blancs entre les éléments soient cohérents. Alors pour ça, qu'est-ce que tu as fait ? 2s est à gauche et à droite. Donc, le contenu n'est pas mis à l'échelle, il suffit de déplacer. Et maintenant, nous allons opter pour l'application des contraintes élément par élément. D' accord ? Donc, nous ne voulons pas cet élément à une échelle. On ne veut pas faire ça, d'accord, quand on le rendra plus grand ou Spore. Plus petit. Donc, ce que nous voulons cela, ceci , dans ce cas particulier, nous voulons l'épingler vers la droite parce que nous voulons garder ces espaces cohérents et l'espace inférieur cohérent également. Donc, nous appliquons au fond. Donc, c'est quand nous déplaçons ces R0 va être un bâton vers la droite et vers le bas va, l'espacement va être cohérent. D' accord ? La même chose s'applique aux annonces. On veut le garder à gauche et je suis désolé pour le bore. Donc, cet espace blanc va être cohérent à même chose s'applique ici au titre que nous voulions bin à gauche aussi, maintenir ces embarquement pour visiter cet espace et vers le haut. Et pour cette date, exactement de la même manière. Nous voulons l'épingler vers la gauche et vers le haut. D' accord. On voulait les épingler au sommet. Mais nous voulons aller à gauche et à droite. Nous voulons le faire augmenter et diminuer à mesure que vous, comme nous pouvons le voir ici. Et la chose importante ici, j'ai cet aldéhyde. Donc, quand nous, quand nous essayons la chose réactive ici, nous pouvons voir que cela ne change pas. D' accord ? Donc nous devons faire quelque chose avec ça. Et c'est tourner vers le gaucher pour adopter, j'ai fait une erreur ici, mais ce que nous voulons est de maintenir ce rythme, en basant sur la droite et sur la gauche. Donc, pour celui-ci en particulier, vous devez l'amener à gauche et à droite. La même chose qu'on a fait ici. Ok, donc maintenant si nous faisons ça, comme vous pouvez le voir, le texte est réactif. Donc, c'est comme ça que vous le créez. Et créons une tablette conçue pour cela. Je vais juste parler de celui-là. Elle tue et supprime le contenu. Eh bien, alors voyons comment je fais leurs designs réactifs ici. Ce que je fais, c'est juste glisser et déposer tout le contenu ici. Et oui, certains. Et ce que je fais, c'est de choisir ces trois et de les amener ici. Ok. Alors appliquez simplement ceci et appliquez cela. Et vous venez, et vous voyez qu'ils sont presque là. Vous devez évidemment faire quelques changements ici faire tomber ces textes parce qu'ils sont trop grands pour cela responsive comme vous le feriez si vous faisiez cela en HTML Assisi, CSS, vous mettrez comme une requête maniaque ou quelque chose comme ça. Donc, le meilleur serait un plus petit, ok ? Donc, c'est une partie de tout ça. Et la même chose s'applique ici. Vous voulez apporter quelques modifications. Si c'est le cas, Meredith est la façon dont il fonctionne n'est pas possible de faire tout sorte de super réactif. Je veux dire, oui, l'image, l'image, comme vous pouvez le voir, elle a été réactive. Maintenant, vous, ce que vous pouvez faire ici si vous voulez qu'il change de culture. Et vous pouvez vous déplacer autour de l'image si vous voulez mieux la positionner. Mais comme vous pouvez le voir, ça est pris comme, je ne sais pas, une minute. Donc minis pour créer un design responsive, le menu, ce qui se passe dans la version tablette est qu'il ne correspond pas. Donc, pour ceux-ci, ce que j'ai fait est juste de venir à mon plug-in bien-aimé E quantifier et insérer comme une icône de menu. Celui-ci semble bon parce que cela coûte un peu d'arrondi. Et oui, viens ici. Comme nous l'avons vu, dégroupez-le à nouveau, changez la couleur en blanc. Et nous voulons être comme 32 pixels, comme nous l'avons fait avant. 32 pixels ici et là. Et au lieu d'une échelle, nous voulons nous positionner à droite. Et à adopter. Parce que rappelez-vous que nous voulons que l'espace soit cohérent. Et maintenant, dernière partie. Et, eh bien, rappelez-vous que si vous voulez faire un autre genre de design ici, je ne sais pas ce qui s'est passé avec ça. Cela devrait être épinglé à gauche et à droite et en haut. Donc, quand maintenant faire cela, encore une fois, il est entièrement réactif. Et ce que nous pouvons faire si nous voulons, c'est apporter la version tablette et ensuite les faire version mobile. Donc, pour cela, voyons ce que j'ai sélectionné pour le téléphone. C' était l'iPhone huit plus, donc c'est cette largeur 414. Donc nous revenons ici. Et qu'est-ce qu'on veut ça, dis-le comme ça. 114. Et tout va être la partie qui a obtenu ça. Soyez réactifs, ils sont réactifs. D' accord. Mais rappelez-vous, maintenant nous avons ce genre de mise en page bizarre ici. Donc je vais juste aller avec une autre mise en page minimale pour oui, c'est beaucoup mieux. Quoi qu'il en soit, puisque ce n'est pas une page Facebook, je ne veux pas qu'elle soit si serrée. Donc je vais juste changer un peu la mise en page pour moi. Je vais détacher cet onglet et je vais laisser la marge à 32 pixels. Ok, donc maintenant nous avons nos éléments s'adaptent à la grande chose qui va faire un peu plus haut pour que vous puissiez vraiment voir ce qui se passe dans cette partie. Donc pour celui-ci, je vais faire est juste moi et tout à la 32 pixel d'accord nous avons à la marge, désolé. Et puis commencez juste à rendre ces éléments un peu plus minuscules. D' accord ? Donc et ça, je vais juste le rendre comme super faible, que tous les éléments s'adaptent. Je vais juste supprimer ces éléments et copier à nouveau celui-ci parce qu'il a comme un minuscule texte. Et maintenant ce que nous pouvons faire, c'est oui, le rendre plus grand. Et dupliquez-le à nouveau. Et ici, nous avons quelques problèmes avec le bureau est en quelque sorte aller là-bas. Vous venez de mettre ceci, amenez votre n à l'astéroïde à votre grille de mise en page et vous êtes bon à aller ou peut-être que vous voulez changer cela à un minuscule parce que c'est trop grand. Donc tu peux le mettre autour pour toi, quelque chose comme ça. Et ceux-ci, vous pouvez le laisser sur 16. Donc maintenant, nous avons notre design réactif bien façonné ici. Une autre chose que j'aime vraiment faire, C'est appliquer la mise en page automatique à tout parce que je n'ai pas à penser ici, qui est l'espacement partout. Donc, si vous appliquez une disposition extérieure ici, je peux contrôler que j'ai mis 32 et tous les éléments de séparation va être 32. D' accord ? Donc c'est ça, c' est comme ça que vous avez fait un design réactif à l'intérieur de fema. Et comment utiliser en combinaison auto-mise en page pour séparer les éléments et garder des distances cohérentes et aussi bien. Comment faire de ces éléments réactifs sont. Une autre chose que je veux vous montrer est que maintenant, puisque nous avons été ces éléments au fond, nous pouvons, ces éléments sont un peu réactifs parce que nous pouvons faire trier les éléments et tout va être sur, à sa place. Laisse-moi juste rendre ça un peu plus court. Alors rappelez-vous que, que les contraintes fonctionnent, fonctionnent de cette façon. Et l'autre chose que je voulais te montrer, c'est ce qui s'est passé. Si je mets des contraintes avec une échelle, ce qui est celui que nous n'avons pas vu. D' accord ? Alors rappelez-vous, disons que nous l'appliquons à cette flèche au lieu de droite et en bas. Nous avons appliqué comme évasion. Ok. Donc, vous pouvez voir ici que depuis que nous avons fait ces, ces composants sont plus petits, les flèches s'échappent. C' est donc, c'est pourquoi, ce que c'est pour la contrainte de mise à l'échelle. Mais je ne recommande pas de l'utiliser dans ce genre d'éléments. Donc c'est la rotation dans une droite à nouveau. Et vous gardez la flèche sans distorsion dans toutes les situations. Alors c'est tout. J' espère que vous trouverez que l'intéressant, Je recommande que vous répliquez ces design ou tout autre que vous avez à l'esprit en essayant de, Je vais les mettre en pratique avec les cartes et avec ces menu et une erreur. Alors, continuez, continuez à essayer des choses. Ok, donc j'espère que vous avez apprécié la leçon et vous voir pour leurs félicitations, je suis au revoir. Vidéo. À plus tard. 3. 3 Félicitations: Hé, félicitations, vous êtes arrivé ici. J' espère que c'était amusant de concevoir ces design réactif. Je pense que vous pouvez faire vos propres dessins en appliquant ce que vous avez appris. Ainsi, vous pouvez le mettre dans votre portefeuille est un coup de pouce. Donc, j'espère en même temps que vous avez appris les compétences nécessaires pour faire tout, tous ces conceptions et apprendre sur ces formations de coûts et tout. Et parfois nous avons vu dans ce cours. J' espère que ça vous plaira. Et si vous l'avez fait, veuillez laisser un avis afin que plus de gens puissent trouver le cours. Et si vous êtes intéressé par plus de contenu comme celui-ci, alors vous pouvez juste me suivre afin que vous soyez mis à jour lorsque je télécharge une nouvelle vidéo et nous, n'est-ce pas ? Merci donc de vous joindre à moi et de vous voir dans les prochains cours.