Comment concevoir un tableau de prix réactif dans Figma | Série de motifs UI

1. Bienvenue en cours: Si vous souhaitez améliorer votre maîtrise de la typographie, de la mise en page et des couleurs sans vous lancer dans un projet de grande envergure, ce cours est fait pour vous Tout le monde, je suis Adi, et dans ce court cours, nous allons concevoir un tableau de prix réactif dans Figma C'est rapide, ciblé et chaque étape est réalisable Vous découvrirez exactement comment structurer une mise en page, choisir et redimensionner la typographie, utiliser un espacement cohérent et créer un jeu de couleurs simple et efficace Et comme nous ne concevons qu' une partie d'un site Web, il est facile de le suivre. De plus, j'ai préparé un fichier de démarrage contenant de brèves instructions et des cadres prêts à l'emploi, afin que vous puissiez vous lancer directement. Ce cours fait partie de ma série de modèles d'interface utilisateur, courtes versions pratiques qui se concentrent sur un modèle à la fois. Vous pouvez ainsi affiner vos compétences et mettre en pratique les principes fondamentaux sans vous perdre dans le champ d'application d'un site Web complet Ouvrez donc Figma, récupérez le fichier de démarrage et commençons 2. Mise en page de base et typographie: Il s'agit d'une copie du fichier de démarrage. Laissez-moi vous montrer ce que nous avons. Tout d'abord, les instructions. Nous devons concevoir notre propre tableau de prix réactif basé sur le brief du cours, et nous devons inclure trois plans tarifaires. Les noms des forfaits, les prix, les brèves descriptions et les listes de fonctionnalités. Nous devons mettre en évidence le plan le plus populaire. Nous avons besoin d'un bouton CTA clair pour chaque plan, et nous devons créer des mises en page pour ordinateurs de bureau et mobiles À présent, nous disposons également de certains actifs du projet. Nous sommes en train de concevoir ce tableau de prix pour une start-up SAS appelée Task Flow. Nous avons les trois plans, Basic Pro et Enterprise, et nous devons mettre en évidence le plan pro. Nous avons quelques couleurs de marque pour commencer. En termes de typographie, nous devons utiliser une police San Serif propre, et nous avons également la copie ou le contenu du texte pour Oh, commençons par là. Je vais récupérer la copie du plan de base, et je vais passer à la disposition de mon bureau. C'est ici que nous allons commencer. Je vais le coller, et je vais commencer à diviser le texte selon les besoins Je vais donc récupérer le texte, le couper à partir d'ici, créer un autre élément de texte, et je vais récupérer cette description, la couper d'ici, créer un autre élément de texte, puis je vais récupérer le nom du plan. Collée ici, il ne nous reste plus qu'une liste des fonctionnalités de notre plan Alors maintenant, arrangons-les un peu. Nous aurions essentiellement le nom du plan, puis le prix, puis la description ici, puis les caractéristiques du plan. C'est une mise en page assez standard. Et à la fin, nous allons ajouter le CL à l'action. Et si nous regardons le brief, vous pouvez voir que le texte du bouton CTA devrait être lancé Donc, copions-le, collons-le dedans. Nous avons donc maintenant tout le contenu du texte préparé. Nous allons utiliser Auto Layout pour cela parce que c'est beaucoup, beaucoup plus simple. Sélectionnez tout. Shift A. Cela ajoutera tout dans un cadre de mise en page automatique, puis je vais commencer à regrouper les éléments en fonction de leur place. Ainsi, par exemple, le prix par mois et cette description devraient probablement être regroupés. Alors Shift A à nouveau, pour les ajouter à leur propre cadre de mise en page automatique. Ensuite, je pense que je vais également séparer ces éléments. Je vais donc couper chacun d'entre eux, créer un nouvel élément de texte et je ne vais pas utiliser de liste ici. Répliquons cela deux fois de plus. Copions ceci, collons-le dedans, copions ceci, collons-le dedans. Supprimons-les simplement. Enfin, le dernier élément qui reste ici est le support par e-mail. Et nettoyons cela également. Maintenant, sélectionnez ceci, ceci et ce décalage A pour les ajouter à leur propre cadre de mise en page automatique. Et pour l'instant, configurons simplement un espacement aléatoire comme celui-ci. L'étape suivante consiste à appliquer une échelle de types à l'ensemble. Et une échelle de caractères est essentiellement un système typographique dans lequel chaque taille de police est basée sur la taille de police précédente multipliée par un certain ratio Cela vous permet de créer, par exemple, tailles de police d'apparence très naturelle, pour ainsi dire. Vous pouvez donc le faire de plusieurs manières. Ma façon préférée de le faire est d'utiliser un plugin. Je vais donc appuyer sur Ctrl ou Commande K pour afficher les actions. Je vais passer aux plugins et aux widgets, et laissez-moi zoomer ici et je vais rechercher une échelle de type. Et je vais simplement cliquer sur l'un d'entre eux. Je pense que le premier fonctionne très bien. Je vais le sauvegarder, et je vais le lancer. Et je vais choisir 16 pixels comme taille de police de base. Et pour ce qui est de l'échelle, je vais choisir 1,333, ce qui est également connu comme la quatrième parfaite comme ça Et c'est en quelque sorte l' échelle de types que nous examinons. Je vais donc simplement cliquer sur générer, et je vais juste l' afficher comme suit. Maintenant, vous pouvez voir que nous avons les 16 pixels ici, puis la taille de police suivante sur l'échelle est 21, puis 28, puis 38 et ainsi de suite. Et cela passe également aux niveaux inférieurs où nous avons 12 et 9 pixels pour un texte vraiment très petit. C'est un excellent moyen de définir les tailles de police si vous êtes perdu. En gros, si vous ne savez pas quelles tailles de police utiliser, utilisez toujours une échelle de caractères. OK. Appliquons maintenant telle ou telle échelle à nos éléments de conception. Nous allons commencer par le plus important, qui devrait être le prix. Et si nous revenons en arrière, je n'irai pas jusqu' je n'irai pas au tout premier élément parce qu'il est trop grand. Essayons 51 pixels car la taille semble correcte. Ici, nous allons définir 51 pixels, hauteur de ligne de 150 %. Cela semble plutôt bon pour l'instant. Ensuite, pour cette petite description, faisons un pas de plus que la taille de police par défaut. La valeur par défaut étant 16, nous utiliserons 21. Alors sélectionnez-le. Nous en mettrons 21 juste là. Ça a l'air plutôt bien. Réglons 16 pixels. Aux fonctionnalités, car elles ressemblent davantage à un corps de texte, un corps de texte normal. Le nom du plan, utilisons également 21 pixels. Il est donc de la même taille que cette description. Et puis le bouton passe à 16 pixels, mais nous allons le mettre en gras parce que je veux le bouton ressorte un peu plus. OK, nous avons donc fait la mise en page de base. Nous avons appliqué l'échelle de caractères, mais nous devons également choisir une police de caractères, non ? Parce que par défaut, cela utilise Inter, mais Inter est une excellente police de caractères, mais elle est beaucoup utilisée, non ? Il existe donc de nombreuses options intéressantes. Et Google Fonts est une excellente source de polices de caractères que j'utilise tout le temps Ils sont gratuits. En gros, il y en a une énorme sélection, et ils sont préchargés dans Figma Et si nous examinons notre brief de projet relatif à la typographie, nous pouvons constater que la suggestion est d'utiliser une police de caractères sans serif propre Passons donc à Google Fonts, et nous allons faire défiler la barre latérale vers le bas où il est écrit San Serif, et je vais juste tout choisir Et ça va juste me montrer toutes les polices de caractères sanerif Ici, vous pouvez voir Inter. Celui qui était là par défaut, Monstera, est une autre grande variation Et vous pouvez simplement choisir l'un d'entre eux, tester dans votre design. Personnellement, je vais choisir DM Sons. J'adore vraiment cette police de caractères. C'est très lisible. Cela fonctionne très bien pour le corps du texte, et il a juste, vous savez, un peu de caractère, donc il n'a pas l'air trop fade Donc, DMSNsf Google Fonts, je vais choisir chaque élément de texte ici, et je vais rapidement le changer ici en DM sons Et voici à quoi cela ressemble de près Une très belle police de caractères OK, une fois cela fait, l'étape suivante consiste à travailler sur les couleurs. Cela sera abordé dans la prochaine leçon. 3. Appliquer des couleurs: Créons rapidement une palette de couleurs pour notre projet. Et sur la base du brief, si vous vous en souvenez, le brief nous indiquait que, hé, nous avons certaines couleurs de marque que vous pouvez choisir. Il y a un primaire, qui ressemble à une couleur indigo, et un accent, qui ressemble à une orange chaude. Maintenant, j'ai ces couleurs ici, et la toute première chose que je veux faire est créer une couleur grise basée sur ma couleur principale. Je peux le faire très facilement en le dupliquant, en ouvrant le sélecteur de couleurs Et j'ai choisi le mode couleur HSL pour créer une version plus foncée et moins saturée de la couleur de ma marque, et ce sera la couleur grise de base. Voici donc comment je m'y prends. Je passe tout d' abord du mode hexadécimal, qui est probablement le mode par défaut de votre sélecteur de couleurs, à HSL qui est probablement le mode par défaut votre sélecteur de couleurs, à Cela représente la luminosité de saturation des teintes. Il s'agit essentiellement d'une autre façon de représenter une couleur. La première case représente la teinte. C'est la saturation, c'est la légèreté. Donc, ce que je veux faire, c'est garder la même teinte mais diminuer la saturation. Supprimez donc une grande partie de ces informations de couleur et diminuez également la luminosité. Donc, la saturation, je vais la réduire jusqu' à environ 16. C'est donc plutôt du gris, mais il y a encore un peu de cette couleur à l'intérieur. Et je vais aussi le rendre plus sombre. Au lieu de 63, je vais le réduire à environ 32, non ? Ce faisant, j'ai obtenu une version plus foncée et moins saturée de ma couleur primaire. Maintenant, créons des teintes et des nuances pour ces couleurs, particulier pour le primaire et le gris Et une teinte est essentiellement une version plus claire de la couleur. Une teinte est une version plus foncée de la couleur. C'est comme mélanger le blanc ou le noir avec cette couleur. Et il existe plusieurs façons de créer des boîtes et des stores. Personnellement, je préfère utiliser un plugin Figma, et il existe également un tas de plugins disponibles Ceux que j'ai utilisés récemment s' appellent Hu Hu Tins and Shades. Vous pouvez donc ouvrir le panneau d' actions ici et accéder aux plug-ins et aux widgets et rechercher Hue Hue. Ainsi, lorsque vous cliquez dessus, cela vous permet de sélectionner une couleur, en gros. Je vais juste échantillonner mon primaire, laisser le reste par défaut et cliquer sur Générer les couleurs, n'est-ce pas ? Cela va donc générer de belles couleurs pour moi ici. Et je vais redémarrer le branchement. Mais cette fois, je vais essayer la couleur grise. Et il génère à nouveau. Et je peux juste fermer la fenêtre du branchement. Copions-les et collons-les dans ma section, non ? Maintenant, j'ai ma palette de couleurs. Si, à tout moment, je dois créer des teintes et des nuances pour la couleur d'accent, je peux le faire tout aussi facilement, mais pour le moment, ce n'est pas nécessaire Maintenant que j'ai quelques couleurs avec lesquelles travailler, commençons par le fond. Et faisons quelque chose de différent. Cette fois, passons en mode sombre. OK ? Je vais donc sélectionner le bureau, appuyer sur I, et je vais échantillonner cette couleur très foncée. Et au lieu d'utiliser une couleur unie, utilisons un dégradé. Je vais donc revenir à la couleur de remplissage ici. Et je vais cliquer sur un dégradé. Je vais choisir la radio, et je voulais émettre, disons, de ce point vers l'extérieur, Et je vais échanger les couleurs ici, pour passer d'une couleur plus claire à une couleur plus foncée. Et pour la couleur plus claire, goûtons peut-être celle-ci. OK, donc je pense que c'est suffisant. Il n'est pas nécessaire que ce soit une énorme différence de contraste, juste assez pour que nous sachions qu'il y a un dégradé. OK. Maintenant, travaillons sur ces cartes. Commençons par leur ajouter une couleur de fond. Ajoutons donc un remplissage, et prenons un échantillon de cette couleur foncée ici. Utilisons peut-être 60 % de cette couleur juste pour lui donner un arrière-plan un peu plus foncé, afin que nous puissions toujours la mélanger à l'arrière-plan. Ajoutons-y également une couleur de bordure, cliquez sur le trait. Je vais placer la bordure vers l'extérieur. Et voyons voir. Nous allons également utiliser une couleur grise. Alors goûtons peut-être celui-ci. OK, cliquez à l'extérieur, voyez à quoi ça ressemble, et ça me semble plutôt bien. Elle se distingue toujours de l'arrière-plan et ajoute une petite bordure accentuée à la carte Ensuite, ajoutons du rembourrage à cette boîte. Parce que nous utilisons Auto Layout, c'est vraiment simple. Nous allons simplement ajouter 40 pixels à gauche et à droite, puis 80 pixels en haut et en bas. Et ajoutons également un rayon de bordure de 40 pour le rendre un peu plus arrondi. Maintenant, colorons ces éléments de texte car nous pouvons à peine les voir pour le moment. Sélectionnez donc la carte. Et, vous savez, au lieu d'utiliser du noir ici, nous pourrions passer au blanc. Mais je trouve que c'est trop contrasté. Donc, ce que j'aime faire, c'est simplement utiliser un autre gris, mais très, très clair. Je vais donc simplement sélectionner cette teinte très claire. Et cela rend le texte visible. Il offre un excellent contraste, mais il se fond également un peu plus dans l'arrière-plan. Et sélectionnons le texte ici, et pour cela, je vais utiliser une couleur plus foncée. Donc, nous allons juste échantillonner, peut-être que nous verrons celui-ci. C'est trop sombre. Faisons deux étapes plus haut. Ça a l'air plutôt bien. Et je pense que je vais le garder. Maintenant, quoi d'autre ? Créons le bouton, non ? Le bouton doit en fait utiliser, exemple, la couleur principale de la marque. Nous allons donc sélectionner le texte. Nous allons faire Shift A pour l'ajouter à son propre cadre de mise en page automatique, et nous utiliserons un rembourrage de 32 pixels Rembourrage horizontal de 16 pixels à la verticale, nous allons aligner le texte au milieu Nous allons nous assurer que le remplissage ici ou la largeur est réglé de manière à remplir le contenant, de sorte que lorsque je redimensionnerai ma carte, le bouton soit également redimensionné avec elle Sélectionnons le texte à l'intérieur, et nous réglerons sa largeur ici pour qu'il corresponde au contenu. Et permettez-moi de vous montrer le tableau complet ici. Et maintenant, prenons ce bouton. Appuyez sur Je vais échantillonner la couleur primaire, et nous allons simplement ajouter un rayon de bordure de 100. C'est donc comme une pilule. Maintenant, grâce à la mise en page automatique, le bouton se redimensionne en même temps que la carte Cool. Raffinons également les choses un peu plus et ajoutons quelques icônes à la liste des fonctionnalités ici. Et l'un de mes jeux d' icônes préférés qui est également gratuit est celui des icônes au phosphore Vous pouvez vous le procurer sur le site phosphor icons.com. Et si nous cliquons sur les icônes Explorer, nous pouvons rechercher peut-être une coche, et je vais sélectionner un cercle à cocher. Et tout en bas, nous avons la possibilité de télécharger ou de copier un SVG Copions donc ce SVG. Nous allons revenir à Figma et sélectionner l'un des éléments de texte ici Nous allons le coller, et nous allons définir sa taille sur 16. D'ici 16 ans. Et nous devons également y appliquer de la couleur. Je vais donc utiliser la couleur de ce texte ici, le copier, le coller sur cette icône, sélectionner l'icône et le texte auquel nous l'appliquons. Shift A pour l'ajouter à son propre cadre Auto Layout. Ensuite, dans l'inspecteur, nous allons définir sa direction à l'horizontale et son alignement au milieu, puis nous allons simplement sélectionner le texte, le déplacer vers la droite. Il ne reste plus qu'à appliquer la même mise en page aux quatre autres fonctionnalités. Et la façon dont j'aime le faire est de simplement dupliquer le premier, c'est-à-dire faire est de simplement dupliquer le premier, c' de contrôler ou de commander D, puis de sélectionner le texte, copier, de le coller dedans. Copiez-le, collez-le dedans. Et copiez-le, collez-le comme ça, puis je pourrai les sélectionner, les supprimer. Et maintenant, ma mise en page est prête. Enfin, un autre détail, je vais sélectionner la carte, et je vais fixer l'écart entre les objets à 40, d'accord ? Mais j'aimerais que le bouton, le CTA, soit placé plus bas. Et j'aimerais aussi que cela reste au bas de la carte lorsque je redimensionne la carte verticalement. Alors, comment s'y prendre ? C'est très simple. Nous sélectionnons ces trois éléments. Déplaceriez-vous A pour les ajouter à leur propre cadre de mise en page automatique. Et maintenant, dans la carte principale, nous avons défini l'espacement sur Auto Cela signifie donc que lorsque je redimensionne cette carte, ces éléments restent en haut tandis que la carte reste fixe en bas Et avant de terminer cette leçon, juste deux autres modifications. Nous allons sélectionner ce cadre, qui contient le prix et la description. Et nous devons juste nous assurer que l'espacement est correct. Nous allons le régler sur quatre pixels comme suit. Et enfin, le nom du plan, donnons-lui une couleur différente. Utilisons cette couleur d'axone ici. Le nom du plan est désormais plus visible. Et pour le reste des éléments, nous utilisons le primaire ainsi que les gris que nous avons créés précédemment OK. Une fois cela fait, l'étape suivante consiste simplement à créer les deux autres cartes. Cela sera abordé dans la prochaine leçon. 4. Termination de la mise en page: Complétons la mise en page en créant d'abord les deux autres cartes. Je vais donc simplement le redimensionner un peu, le déplacer ici et contrôler ou commander D pour le dupliquer, et je vais simplement le déplacer vers la droite, le refaire, créer le troisième, et maintenant sélectionner les trois Shift A pour les ajouter à leur propre cadre de mise en page automatique, et je vais juste régler l' espacement ici à 40 pixels D'accord. Nous allons maintenant mettre à jour le contenu de chaque carte. Nous avons donc fait la solution de base. Faisons le Pro. Le Pro coûte donc 19$ par mois. Et permettez-moi d'y copier le texte. Je vais remplacer ici Pro 19. Contrôlez Shift R pour remplacer le texte. Et puis modifions-les également. Nous avons un nombre illimité de projets. Nous avons 100 Go de stockage. Nous disposons d'outils d'analyse avancés. Nous avons une assistance par e-mail prioritaire et nous disposons d'outils de collaboration en équipe. Copions donc ce texte, puis nous allons entrer ici et nous allons simplement dupliquer l'un de ces éléments et sélectionner le Control Shift R pour remplacer le texte ou la commande Shift R si vous êtes sur un AMAC, puis nous ferons de même pour l'Enterprise L'Enterprise, c'est 49 dollars par mois. C'est pour les grandes entreprises, et nous avons un nombre illimité de projets, 1 téraoctet de stockage Nous avons des analyses personnalisées. Nous avons un gestionnaire de compte dédié et nous avons une assistance téléphonique 24 heures sur 24, 7 jours sur 7. Charmant. Maintenant, il ne reste plus qu' une chose à faire, c'est de mettre en évidence le plan intermédiaire, le plan pro, et d'y ajouter le badge le plus populaire ou quelque chose comme ça. Il existe donc de nombreuses manières de mettre en valeur ce plan. Nous pouvons lui donner un arrière-plan beaucoup plus lumineux et plus coloré ou nous pouvons l'ajouter, comme un badge coloré. Nous pouvons l'agrandir. Pour cette application, voici ce que je vais faire. Je vais sélectionner le cadre principal et je vais cliquer dessus avec le bouton droit de la souris, et je vais sélectionner le cadre, n'est-ce pas ? Cela l'enveloppera dans son propre cadre. Une fois cela fait, je vais y ajouter Auto Layout. Nous pouvons le faire en allant dans l'inspecteur et en appuyant sur Utiliser la mise en page automatique. Maintenant, permettez-moi de vous en parler pour que vous puissiez le voir un peu mieux. Pour Auto Layout, je vais lui donner quatre pixels de rembourrage sur tous les côtés Je vais également le remplir. Et cette couleur de remplissage sera l' une des variations de la couleur primaire. Choisissons donc d'abord la couleur de base. C'est bon Cela se démarque vraiment, mais je pense que c'est un peu trop brillant. Nous allons donc le modérer. Je vais choisir cette couleur ici, la troisième en partant du bas. De plus, je vais sélectionner la carte principale qui se trouve à l'intérieur et augmenter l'opacité des couleurs de 60 à 80. D'accord ? Parce que je veux pouvoir voir l'arrière-plan, mais pas trop. D'accord. Maintenant, je vais sélectionner la carte entière, et je vais lui donner le même rayon d'angle de 40 pixels. Donc ça ressemble à ça. Ensuite, je vais le sélectionner, et je vais simplement zoomer ici pour que vous puissiez voir ce que nous faisons. Et je vais cliquer sur ce bouton de rembourrage individuel, et en haut, je vais le régler sur 64 pixels Et cela ajoute essentiellement un espace supérieur que nous pouvons utiliser pour placer notre texte le plus populaire. D'accord. Alors faisons-le dès maintenant. Je vais cliquer dans T pour le texte, et je vais juste taper Most Popular. Et je veux que ce texte flotte librement. Je vais donc aller ici en haut où il est écrit position, et je vais appuyer sur Ignorer la mise en page automatique. D'accord. Et dès que je fais cela, le texte est toujours dans mon cadre de mise en page automatique, mais je peux maintenant le déplacer où je veux. Donc, pour le texte, mettons-le en gras, et mettons-le en majuscules Comme ça. Et comme nous le mettons en majuscules, augmentons légèrement l' espacement entre les lettres Je pense que 6 % sont suffisants, et je veux le réduire. Donc, pour déterminer la taille de police que je souhaite, je peux revenir à mon échelle de caractères, n'est-ce pas ? Nous pouvons voir que les polices dont la taille est inférieure 16 pixels sur la base de l'échelle doivent être de 12 ou de 9. Essayons donc 12. Et zoomons à 100 % et voyons à quoi cela ressemble, et je pense que cela fonctionne très bien. Si cela ne fonctionne pas pour vous, vous pouvez bien sûr l'augmenter ou le diminuer encore davantage. L'échelle des types est là à titre indicatif. Tu n'es pas obligée de le respecter à 100 %. Alors prenons ceci. Alignons-le au centre et déplaçons-le en quelque sorte vers le haut ou vers le bas. Juste pour le placer au milieu de cet espace, je vais également le sélectionner et l'aligner au milieu. Donc, si on le change, il reste dans cette position. C'est ainsi que nous avons choisi de mettre en valeur ce plan intermédiaire. Maintenant, avant de conclure, voici un petit conseil, et c'est un conseil de pro pour vous. Remarquez à quel point ces deux coins sont un peu étranges. Et c'est parce qu'ils ont exactement le même rayon d'angle. Mais ce que j'ai remarqué il y a quelque temps, c'est que si vous avez, par exemple, coins imbriqués comme celui-ci, celui de l' extérieur doit avoir un rayon d'angle plus grand que celui de l'intérieur, pour qu'ils aient l'air bien Sélectionnons-le donc. Et au lieu de 40 pixels, qui est le rayon d'angle de l'intérieur, nous allons faire 40 pixels plus la distance entre les deux, qui dans notre cas est de quatre pixels. Je vais donc définir 44 pixels. Ainsi, les coins semblent désormais beaucoup plus naturels, ce qui rend l'ensemble un peu plus beau. C'est un petit détail, mais les détails sont importants. Voici donc conception du tableau des prix pour ordinateur de bureau. Mais qu'en est-il pour le mobile ? Parce que si nous devions le copier sur un écran mobile, cela ne serait pas très beau. Apportons donc la modification dans la leçon suivante. 5. Adapter la mise en page pour mobile: Avant de créer l'écran du mobile, apportons simplement un tout petit ajustement à la typographie Je vais sélectionner les trois prix, et je vais faire passer leur épaisseur de police du normal au gras. Je pense simplement que c'est un peu plus équilibré et que cela attire un peu mieux l'attention sur ce domaine. OK. Maintenant, écran mobile. Ici, j'ai un cadre de 428 pixels de large. Évidemment, lorsque vous concevez pour le mobile, vous pouvez, vous savez, réduire ou l'agrandir, en fonction des appareils pour lesquels vous concevez. Mais la première chose que je vais faire est de sélectionner mon bureau, cliquer avec le bouton droit de la souris sur copier-coller, copier les propriétés, puis de copier-coller en tant que propriétés de collage. Cela a essentiellement copié l'arrière-plan. Ensuite, je vais sélectionner ceci. Je vais passer au mobile. Je vais le coller dedans. Et bien sûr, il est trop grand pour l'écran. Donc, au lieu d'une disposition horizontale, nous devons faire une mise en page verticale. Donc, dans l'auto ou dans l'inspecteur, je vais changer la mise en page automatique en vertical. Déplaçons-les ici et agrandissons l'écran du mobile. Comme ça. Et reportons-les simplement parce qu'ils avaient leurs contraintes. Réglez au centre. Réinitialisons-les en haut à gauche. Portons cela à 40 pixels. Et sélectionnons réellement l'écran du mobile, et ajoutons-y la mise en page automatique. Réglons-le sur vertical, sélectionnons-le et dissocions le groupe Et une fois l' écran du mobile sélectionné, définissons-y également 40 pixels de rembourrage Ensuite, je vais sélectionner les trois fiches de prix, et je vais les utiliser pour remplir les contenants Alors maintenant, chaque fois que je redimensionne l'écran de mon mobile, ceux-ci se redimensionnent avec Et nous pouvons constater à l' heure actuelle que nous avons un petit problème : le saumon ne se redimensionne pas, mais il s'agit d'une solution rapide, sélectionnez-le et, dans l'inspecteur, modifiez sa largeur de fixe à contenant de remplissage, juste comme ça Maintenant que nous avons affaire à un écran mobile, l' immobilier est vraiment important. Rendons donc tout cela un peu plus compact. Sélectionnons ceci et cela. Et au lieu d'un rembourrage vertical de 80 pixels, nous le passerons à 40 Et fixons également l' écart entre ceux-ci à 40 et nous fixerons également cet écart à 40 et nous réglerons la hauteur de chacun de ces objets pour qu'il épouse le contenu. Ils sont donc aussi grands que le contenu qu'ils contiennent. Nous allons faire de même ici. Changez ce paramètre à 40, modifiez l'écart ici à 40 et nous réglerons la hauteur pour qu'elle épouse le contenu. Et le dernier changement, c' est de le remplacer par 40 et la hauteur à câliner. Et voici notre version mobile du tableau des prix. Il est désormais vertical plutôt horizontal et il est un peu plus compact. Et voici un tableau de prix réactif construit à partir un bref brief et adapté à la fois aux ordinateurs de bureau et aux mobiles. Je crois que ces exercices rapides et ciblés sont vraiment utiles pour développer vos compétences, car vous vous entraînez à la typographie, à l' espacement, au dimensionnement, à la couleur et à la cohérence des mises en page, le tout sans la pression d' Donc, si vous n'avez regardé que les vidéos mais que vous n'avez pas suivi, je vous encourage vivement à réaliser le projet de classe. Et votre tâche est simple. Ouvrez le fichier de démarrage. Vous trouverez des liens dans la description et créerez votre propre tableau de prix réactif. Vous pouvez suivre le brief la lettre ou le personnaliser à votre guise. Cela dépend entièrement de vous. Et lorsque vous aurez terminé, n' hésitez pas à partager votre design dans la galerie de projets de classe. J'adorerais connaître votre point de vue à ce sujet, et vous pourrez également vous inspirer de ce que d'autres étudiants ont créé. Et si cela vous plaît, consultez mes autres cours de design en consultant mon profil ou les liens dans la description des cours pour obtenir mes recommandations personnelles. OK, merci d'avoir regardé, bonne conception, et je vous verrai au prochain cours. Au revoir pour le moment.