Conception Web dans Figma : créer comme un développeur, générer du code avec l'IA

1. Introduction: Bonjour et bienvenue dans ce cours sur le design Web de Figma pour les développeurs Web. Je suis Christopher Dodd. Je suis un développeur Web indépendant et professeur de haut niveau ici sur skillshare.com, couvrant tout, le développement Web et le travail indépendant en ligne Dans le cours d'aujourd'hui, nous aborderons Figma non pas comme le font les designers traditionnels, mais du point de vue des développeurs Web Si vous êtes un développeur qui souhaite apprendre le design, mais qui s'intéresse également à la structure propre, la réactivité et à générer du code utilisable, ce cours est fait pour vous Nous aborderons les bases de l'utilisation de Figma, comment configurer des mises en page réactives à l'aide composants de mise en page automatique et d'une dénomination appropriée des Ensuite, nous irons encore plus loin en utilisant des outils basés sur l'IA tels que Locofy et Cursor pour transformer nos conceptions directement en À la fin de ce cours, vous serez non seulement aise pour créer des designs Figma, mais vous disposerez également d'un flux de travail qui comble le fossé entre la conception et le développement, faisant de vous un développeur Web plus efficace et plus polyvalent Donc, si vous êtes prêt à apprendre à créer des designs comme un développeur Figma, cliquez sur la vidéo suivante, et je vous verrai de l'intérieur 2. Démonstration: Très bien, voici la version web du programme Figma Figma est un programme que vous pouvez exécuter sur votre ordinateur ou directement dans votre navigateur Je suis actuellement sur Google Chrome, et voici la version Web. Mais plus tard dans le cours, nous allons télécharger le programme de bureau car nous allons utiliser le serveur MCP Dans la vidéo suivante, je vais vous montrer les bases de FGMA et vous présenter le programme un peu mieux Tout d'abord, je voudrais commencer le cours par une démonstration, qui démontre les prémisses de l'ensemble de ce cours. OK ? Donc, ici, nous avons un design pour un site Web de commerce électronique. Ça s'appelle Dog Box. Je l'ai découvert grâce à une offre d'emploi sur Upwork. Comme vous pouvez le voir ici, il s'agit d'une sorte de boîte d' abonnement pour chiens. Ça a l'air plutôt cool. Nous examinons le fichier Figma. Même si vous n'avez jamais utilisé Figma auparavant, je veux que vous cliquiez sur ce cadre ou que vous me regardiez cliquer sur ce cadre, puis que vous jetiez un œil au panneau des couches Ici, vous pouvez voir tout un tas de groupes suivis de nombres aléatoires. Et puis à l'intérieur de ces groupes, nous avons d'autres groupes avec des nombres aléatoires en dessous, et nous avons différents cadres, vecteurs, toutes sortes de choses. C'est un énorme gâchis, d'accord ? Maintenant, des designers configureront leurs designs comme ceci parce que visuellement, cela a une belle apparence. Et tant qu'il est visuellement beau et qu'ils peuvent présenter ce design aux utilisateurs, il n'est pas nécessairement nécessaire de le configurer de manière à ce qu'il soit logique de l' examiner dans le panneau des couches. Mais la raison pour laquelle nous allons procéder différemment dans ce cours est double Premièrement, nous ne pouvons pas réellement redimensionner comme nous le ferions pour une véritable page Web Comme vous pouvez le voir ici, certaines parties sont plutôt réactives, mais pas vraiment Je tombe vraiment en panne au fur et à mesure que nous développons et sous-traitons , ce qui n'est pas si énorme parce qu'il s'agit d'un programme de conception. Il ne s'agit pas réellement d'un programme de développement Web. La principale raison pour laquelle je propose que nous configurions nos fichiers Figma différemment est que nous puissions générer automatiquement notre code en utilisant l' IA de manière plus précise et plus fiable Donc, pour vous donner un peu plus de détails sur ce design, comme vous pouvez le voir, si je clique n'importe où dans cette section, nous avons un groupe géant qui s'étend en dehors du cadre. Nous avons un autre groupe qui s'étend en dehors du cadre ici. Celui-ci semble avoir une assez bonne nidification. exemple, ce que je veux dire par là, c'est que les éléments qui se trouvent visuellement à l'intérieur du groupe sont en fait imbriqués dans la couche C'est une bonne idée, comme vous pouvez le voir ici. Mais il n'y a pas d'étiquetage et la mise en page automatique n'est pas ou très peu utile. OK ? Alors maintenant, je vais vous montrer l'inverse. Permettez-moi de vous montrer la version réfractée que j'ai créée. Ce n'est pas exactement pareil, mais il est en fait configuré avec un étiquetage approprié des sections. Il est divisé en sections individuelles qui s' empilent les unes sur les autres. Si la mise en page automatique est utilisée partout, cela a du sens. Ici, vous pouvez voir l'en-tête juste ici à l'intérieur de l'en-tête, nous avons le côté gauche de l'en-tête, le menu de l'en-tête et le côté droit, puis nous avons les différents éléments imbriqués dedans Et ce que vous pouvez également voir, c'est cette icône ici, qui indique la mise en page automatique. Maintenant, je n' entrerai pas dans la mise en page automatique et toutes les différentes choses à propos de Figma C'est le sujet du cours que nous allons aborder. Mais comme vous pouvez le voir ici, les couches ont beaucoup plus de structure que, disons, le design original. Et si je redimensionne l'une de ces sections, vous verrez qu'elle finit par être beaucoup plus réactive car elle utilise la mise en page automatique, ce qui est essentiellement équivalent à Flexbox en CSS Bien qu'il existe une option ici pour le réseau, qui est presque l'équivalent du réseau. Maintenant, comme mentionné précédemment, la version réfractée, si je configure toutes les couches pour utiliser une structure de conteneur réactive appropriée à l'aide de composants, ce que nous apprendrons un peu plus tard Les éléments dupliqués plusieurs fois sont donc essentiellement des composants Si j'imbrique correctement et que j'utilise la mise en page automatique, nous devrions obtenir de bien meilleurs résultats des outils d'IA tels que, comme vous pouvez le voir ici, Locifi OK ? J'ai donc remarqué que nous obtenons résultats très incohérents à chaque fois que nous utilisons Locifi Je vais donc vous montrer une solution différente plus tard dans le cours qui, à mon avis, fonctionne mieux. Mais pour l'instant, examinons les résultats d'un test antérieur que j'ai effectué avec Locifi Donc, si nous passons à ce graphique ici, vous pouvez voir les résultats d' un test précédent que j'ai fait avec ce design de boîte pour chien. Donc, si nous examinons le design original, évident que cela a l'air génial. C'est le design original. Ça va très bien avec Infigma J'ai juste copié et collé le look directement dans ce graphique Ensuite, j'ai créé une page Web générée par l'IA de ce design Figma en utilisant Locifi et voici le résultat Comme vous pouvez le constater, cela commence vraiment à se décomposer sur les cartes. Vous pouvez voir ici que cela a complètement gâché tout cela , de même que les cartes ici Et certaines parties se sont bien passées, mais oui, ce n'est pas le meilleur résultat. J'ai refactorisé la page Web, puis je l'ai exécutée via Loci fi J'ai obtenu un bien meilleur résultat, surtout sur les cartes. Évidemment, celui-ci n'est pas parfait, Eva, mais en termes de sortie HTML , il était bien meilleur. Et tant que nous avons du HTML solide avec lequel travailler, apporter de petites modifications au CSS n'est pas une mauvaise chose. Mais si le programme d'IA se trompe complètement sur le HTML, cela crée un projet que je dois de toute façon complètement refactoriser. J'aurais donc tout aussi bien pu ne pas utiliser l'IA pour commencer C'est ce qui a inspiré le cours et qui présente une façon de créer nos designs Figma comme un développeur Web, présente une façon de créer nos designs Figma avec structure appropriée, afin qu'ils soient réactifs, faciles à naviguer dans le programme FigMA lui-même et plus traduisibles en code réel à l'aide de générateurs de code IA tels que Locifi AI, nous verrons un peu Pour l'instant, prenons un peu de recul et examinons les bases de l'utilisation réelle de FigMA 3. Les bases de Figma cs: Bien, maintenant vous pouvez voir que nous sommes de retour dans Figma, mais nous avons un design complètement vierge Il n'a même pas encore de nom. Alors cliquons sur Untitled et donnons-lui un nom, disons, testons le design, quel que soit le nom que vous voulez Et sans entrer dans les détails extrêmes de tout ce qui concerne Figma, je veux simplement aborder les bases absolues ici Il s'agit en fait d'un programme assez simple. Une fois que vous aurez pris de l'avance sur quelques fonctionnalités clés, et pour les fonctionnalités les plus avancées, il existe de nombreux autres didacticiels en ligne. Il est facile d'acquérir ces compétences avancées un peu plus tard. Mais en gros, ce que nous avons ici, c'est que nous avons notre fichier Figma ici, et nous pouvons créer plusieurs pages ici Nous ne voyons aucune différence, mais si je devais dessiner un rectangle sur la première page, passez à la page deux. Nous ne pouvons voir ce rectangle nulle part Même si nous avons zoomé à 50 % ou si nous avons zoomé en avant, vous verrez qu'il se trouve sur une autre page D'accord, cela va de soi, mais en général, les concepteurs de sites Web ne séparent pas les pages Web en différentes pages dans Figma Ils mettent généralement le tout sur une seule page ici afin que l'on puisse voir, je suppose, la cohérence du design sur plusieurs pages. Ainsi, au lieu de concevoir une page, les concepteurs commencent généralement par un cadre. Donc, si je clique sur ce bouton ici pour cadre, je peux voir ici que nous avons déjà des cadres prédéfinis pour bureau si nous cherchons à faire du bureau. Passons donc au bureau. Je vais simplement cliquer sur le bureau ici, et cela nous donnera une image de 14 40 x 1024. C'est le cadre standard que Figma a choisi pour nous sur ordinateur de bureau Ensuite, vous verrez généralement un cadre mobile à côté. Donc, si nous passons au téléphone, et que la taille typique que je vois le plus souvent est 390, vous pouvez placer un écran 390 ici. Vous pouvez donc concevoir votre mise en page mobile ici et votre mise en page de bureau ici. D'accord, je vais donc me débarrasser du cadre du mobile. Nous n'avons pas vraiment besoin de cette amende. Concentrons-nous simplement sur un seul cadre. Le cadre est le parent de tout. En fait, ce n'est pas nécessairement vrai. Nous pouvons créer une section, et c'est juste quelque chose qui nous permet de regrouper certains cadres. Mais encore une fois, si j'utilise cet exemple de création d'un cadre pour le design de l'iPhone ici, nous pourrions peut-être dire qu'il s'agit de la page d'accueil, mettre la description de la page en tant que section, puis nous pourrons avoir nos différents cadres ici en fonction de la largeur de l'écran de cette page, d'accord ? Peut-être que je le laisse là. Alors, avec quoi d'autre devons-nous travailler ? Nous avons donc des formes ici que nous pouvons ajouter Si nous voulons ajouter certaines formes, je suppose que nous pouvons dessiner ces formes. Ce sont donc de bons outils de conception si vous êtes un peu graphiste et que vous souhaitez créer des icônes et d'autres choses. De toute évidence, notre site Web contiendra probablement du texte. Nous pourrions donc mettre du texte ici. Donc, sur la droite, vous pouvez voir que nous avons tout un tas de paramètres, et si je fais défiler la page vers le bas, nous pouvons voir la typographie Je vais donc augmenter la taille de police de ce texte, puis je vais le taper, je ne sais pas. Disons simplement le titre, non ? Maintenant, un designer placera généralement cela au milieu en utilisant ces lignes directrices, comme vous pouvez le voir ici. Et comme nous avons une toile fixe ici, nous pouvons attester que ce sera toujours entre les deux. Nous pourrions apporter quelques images. Généralement, vous pouvez voir une bannière d' image d'arrière-plan sur un site Web, alors ajoutons une image. Comme vous pouvez le voir ici, j'ai un dossier que nous utiliserons un peu plus tard. Nous allons le configurer comme je vous le recommande. Mais pour l'instant, ajoutons simplement l'image, nous la placerons et il suffit de cliquer dessus pour la faire glisser, vous savez, nous-mêmes pour remplir l'espace du conteneur. En gros, la façon dont cela fonctionne avec l'ordre visuel est que l' image du héros sera affichée au-dessus du titre parce qu'elle se trouve au-dessus du titre dans le panneau des calques. Il suffit donc de les échanger et vous verrez le cap passer. Nous voudrions peut-être changer la couleur de ce titre, évidemment, parce qu'il se trouve sur un fond un peu sombre Nous pourrions donc cliquer ici, lui donner un fond blanc, l'agrandir. Encore une fois, positionnez-le, assurez-vous qu'il est dans cette position. Tapons simplement quelque chose d'un peu plus réaliste. La référence en matière de vêtements de sport. Vous pouvez voir ici que lorsque nous n'utilisons pas de mises en page flexibles, nous devons les redimensionner et décider où nous voulons nos Je vais régler l'alignement de manière ce qu'il soit au milieu, et disons-le comme ça. Encore une fois, nous allons faire cette conception correctement plus tard. Je ne fais que vous montrer les bases absolues. Nous pouvons apporter une image, nous pouvons apporter du texte. Et, bien sûr, je vais utiliser intensivement la mise en page automatique dans ce cours Mais comme je l'ai déjà mentionné, la plupart des designers n'en utilisent pas beaucoup. Il y a un domaine dans lequel ils l'utilisent beaucoup, c'est celui des boutons. Je vais donc utiliser le bouton pour faire une démonstration. Nous allons donc taper le bouton ici. Et si nous voulions donner à ce bouton une couleur de fond, nous pourrions être tentés de mettre un rectangle ici. Maintenant, évidemment, nous devons changer le positionnement vertical ici, puis nous devons le placer au milieu. D'accord ? Allons-y. Maintenant, pour que cela ressemble davantage à un bouton, nous pouvons lui donner plutôt un rayon d'angle, r. Mais le problème c'est que si nous changeons le texte du bouton de cette façon, vous verrez qu'il s'agit deux éléments différents qui ne sont pas liés, et que cela dépasse les limites de ce rectangle faudrait donc, vous savez, redimensionner à nouveau, puis le positionner comme ça D'accord ? Donc, la plupart des designers que je trouve utilisent la mise en page automatique avec des boutons Ce concept s'applique à tous les éléments de votre design Figma, mais pour une raison ou une autre, il n'est réellement utilisé que sur les boutons Ainsi, au lieu de placer ce rectangle ici en tant qu'élément distinct, nous pouvons ajouter une mise en page automatique à Nous pouvons ajouter une mise en page automatique. De différentes manières, nous pouvons cliquer dessus avec le bouton droit de la souris et cliquer sur Ajouter une mise en page automatique Ou nous pouvons utiliser ce raccourci clavier. J'aime utiliser le raccourci clavier, donc je vais appuyer sur Shift A, et maintenant, si nous regardons ici, il va être imbriqué dans ce cadre Je vais donc renommer ce bouton de cadre parce que j'aime utiliser une dénomination correcte Ensuite, si nous cliquons sur cette mise en page automatique, qui est le parent du texte, je peux ajouter un remplissage à cette mise en page automatique Nous allons donc aller ici et le rendre, disons, rouge. D'accord. Maintenant, comme il s'agit d'un élément de mise en page automatique, si j' agrandis le texte du bouton, vous verrez la boîte s'agrandir pour couvrir l'arrière-plan Ensuite, bien sûr, je peux ajouter à nouveau ce quart de rayon. Qu'est-ce que j'avais cinq pixels, et je peux également augmenter le rembourrage ici même Ce n'est donc pas une couleur vraiment réaliste. Laisse-moi changer cette couleur comme ça, peut-être comme du gris ici. D'accord ? Et puis ce texte, si je veux vraiment le modifier, je dois cliquer sur le texte lui-même, puis nous allons en faire 36. Ensuite, ce que je peux faire, c'est saisir l'élément du bouton mis en page automatiquement ici, puis je pourrais le positionner ici, n'est-ce pas ? Pour le design mobile, je peux faire quelque chose de similaire. Je peux importer l' image du héros pour mobile, puis je peux simplement la faire glisser manuellement. Ici, évidemment, les dimensions ne s'alignent pas. Donc, ce que je pourrais faire, c'est double-cliquer dessus et le configurer pour le recadrer. Ensuite, je peux simplement recadrer les limites de mon design mobile, ce que je vais faire dès maintenant. Ensuite, copiez-collez simplement ce texte ici. De toute évidence, mon nid n'est pas normal ici. J'ai le texte et l'image placés au-dessus du cadre, pas vraiment dedans. Nous pouvons donc vraiment nous en tirer avec cette Figma. Bien entendu, je ne le recommande pas dans ce cours, mais Figma vous permet d'obtenir visuellement le résultat que vous recherchez sans trop bien organiser votre projet. Donc ce que je vais faire, c'est juste le mettre haut, puis l'imbriquer en le faisant glisser comme ça, le texte et l'image, d'accord ? Il est donc au moins imbriqué là-dedans. Si je veux modifier le texte pour qu'il soit un peu plus petit, mettez-le là. Ensuite, je peux apporter une copie de mon bouton. Je peux maintenir la touche Option enfoncée sur Mac. ne sais pas ce que c'est sous Windows, puis je peux cliquer pour en apporter une version. Mais évidemment, la taille du texte pour la version mobile est bien trop grande, nous allons donc la réduire à 12. En fait, je pense que nous avons besoin d'un minimum de 16 ici. D'accord. D'accord. Donc, comme je l'ai dit, un programme assez simple. Il existe évidemment des fonctionnalités avancées, mais vous pouvez simplement cliquer et faire glisser les éléments où vous le souhaitez sur la page. Les bases de Figma ne sont pas si difficiles à comprendre, à mon avis La plus grande compétence consiste à déterminer les bonnes polices à utiliser, les bonnes tailles de police, les bonnes images. Ce n'est pas l'outil de conception lui-même qui est compliqué, mais le design en lui-même, d'accord ? Donc, cet outil, Figma, le simplifie autant que possible, et c'est pourquoi cet outil est devenu l' outil de conception Web le plus populaire sur le marché aujourd'hui Nous pouvons simplement continuer à présenter nos projets de cette manière, mais comme je vous l'ai montré, nous ne sommes pas du tout réactifs. Donc, si nous voulons vraiment que cela soit organisé pour en faciliter l'utilisation, mais surtout pour le rendre traduisible sur le Web, nous devrons adopter une approche un peu plus structurée Et c'est ce que nous allons aborder dans la prochaine vidéo. 4. Créer comme un développeur - Partie 1: , donc juste pour récapituler où nous en sommes jusqu'ici, nous avons commencé par une démonstration de la façon dont les conceptions Web apparaissent généralement de la façon dont les conceptions Web apparaissent généralement dans cette structure de groupes aléatoires, sans étiquette, qui n' utilise pas beaucoup la Et je vous ai montré l'alternative, qui consiste à structurer nos sections comme s'il s'agissait d'une page Web avec un nom approprié et utilisant beaucoup la mise en page automatique Ensuite, je vous ai montré les bases de Figma, et nous avons créé une véritable section de héros de base sur un site de commerce électronique Je me spécialise dans le commerce électronique, donc en gros, chaque site Web que je crée est un site de commerce électronique. Je vais donc m'en tenir à cet exemple, et construire comme je vous l'ai montré dans ce premier exemple avec la version refactorisée Nous allons donc commencer exactement de la même manière. Nous allons créer une section. Cette section est facultative. Mais je vais créer une section et je vais appeler la page d' accueil de la section. OK. Ensuite, je vais y mettre mes deux cadres. Je vais donc créer un cadre pour ordinateur de bureau. Comme vous pouvez le voir ici, je peux choisir parmi ces fouets et hauteurs prédéterminés Et évidemment, notre section n'est pas assez grande pour accueillir ce design de bureau. Je vais donc cliquer dessus et le faire glisser, puis je vais également ajouter un design mobile. Je n'aime pas 430. Je vais choisir 390, donc je vais aller ici. Et je vais simplement renommer ces cadres. Celui-ci sera de bureau, et celui-ci sera mobile. OK. Vous pouvez donc voir, à la fois visuellement et dans notre panneau Layers, que nous avons un projet assez organisé jusqu'à présent. Assurons-nous qu'il reste organisé au fur et à mesure que nous élaborons ce design. Comme je l'ai démontré dans la première vidéo, la façon dont je vais créer mes designs dans Figma est basée sur façon dont les sites Web sont réellement construits dans le monde réel, et ils sont construits avec des conteneurs réactifs Pour sortir un instant de Figma et regarder un exemple très basique sur le Web ou simplement une page HTML et CSS que j'ai créée juste avant cette vidéo, vous pouvez voir ici que j' ai un conteneur réactif Évidemment, les couleurs et tout le reste ne sont pas idéaux, mais juste pour vous montrer les limites de nos différents conteneurs, si je devais appuyer sur commande Option I et l'utiliser pour redimensionner mon écran, pourrais voir ici que sur un écran plus grand, il y a une marge égale gauche et à droite de ce conteneur Et puis, si nous nous contentons de plus petites tailles d'écran, cet espace se réduit jusqu'à ce le conteneur occupe la totalité de l'écran Et si je passe à des tailles d'écran plus petites, ces boîtes se décomposeront sur nouvelles lignes parce qu'elles sont flexibles, et elles utilisent une boîte flexible Donc, généralement, dans le développement Web, nous avons des conteneurs contenant des fouets Max et des éléments flexibles. C'est donc sur cela que je vais me concentrer lorsque je créerai mon design figma Et comme je l'ai mentionné plus tôt, nous pouvons créer une chose similaire à CSS Flexbox en utilisant la mise en page automatique Et nous pouvons également, dans n'importe quel élément ou cadre, définir un Max avec. Donc, si je vais ici pour mettre en page sur la mise en page de mon bureau ici, je peux réellement cliquer sur ce bouton pour transformer tout ce cadre en mise en page automatique Et maintenant, j'ai toutes ces options qui sont très similaires à CSS Flex. Ainsi, vous pouvez voir le sens de flexion. Vous pouvez voir l'alignement ici. Vous pouvez voir l'écart, qui est exactement le même en CSS. Vous pouvez également voir ces chevrons apparaître sur le WIP et sur la hauteur. Je peux donc cliquer sur ces chevrons et ajouter un fouet mi et un fouet Max, et je peux aussi choisir le cadre qui épouse le contenu. Cela n'a aucun sens, dans ce cas. Vous utilisez généralement un câlin en hauteur. Mais ce que vous pouvez faire, c'est si je crée un autre cadre et que je le place dans le bureau ici, puis que je fais de ce cadre un cadre de mise en page automatique Je peux cliquer de nouveau sur ce Chevron et vous pouvez voir que je peux cliquer pour remplir le conteneur, ce qui signifie que le WIP occupera l' espace disponible de son parent, qui est ce cadre de bureau, Si j'ajoute un autre cadre ici, il les placera côte à côte, et c'est parce que j'ai défini ici la direction de flexion ou que cela ne s'appelle pas direction de flexion dans Figma, mais que le flux, comme on l'appelle disposition automatique dans Figma, est toujours horizontal Donc, pour la page elle-même, je veux la mettre en position verticale, puis vous pourrez voir que nous pouvons superposer des sections en bas de la page. Et si je devais simplement dupliquer en appuyant sur commande D pour créer une troisième image, vous verrez qu' superpose à l'autre, et si j'en crée une autre, vous verrez ici qu' se superpose à l'autre, et si j'en crée une autre, vous verrez ici qu' elle dépasse les dimensions de notre cadre ici. Ce que je veux faire, c'est monter ici en hauteur et le modifier pour qu'il épouse le contenu À présent, le design de notre ordinateur de bureau sera aussi important que le contenu qu'il contient. Donc, si je supprime cette dernière image, vous verrez qu'elle supprime maintenant cet espace supplémentaire, d'accord ? Donc, la structure que je vais utiliser est que nous avons notre page globale ici, puis que nous y avons des sections imbriquées , d'accord ? Je vais donc appeler cette section. Supprimons l' autre, puis nous le dupliquerons une fois que nous aurons créé notre structure. Je veux que ma section étende le fouet entier, comme vous pouvez le voir ici, pour remplir le récipient Maintenant, je veux y mettre mon conteneur Page Whip. Donc, dans celui-ci, c'est assez serré parce que j'enregistre ce cours sur un fouet à fenêtre plus petit Ce conteneur mesure donc 1 000 pixels de large, ce qui est assez serré. En règle générale, vous devez avoir un conteneur d'au moins 1 200. Mettons un autre cadre ici à l'intérieur, et je vais appeler ce conteneur, non ? Ensuite, dans ce conteneur, nous pouvons également le configurer sur la mise en page automatique Vous verrez que je vais presque tout régler sur la mise en page automatique Ensuite, je vais le configurer pour remplir le récipient. Maintenant, il va remplir, zoomons un peu, l'espace disponible. Je vais également cliquer à nouveau sur le Chevron et ajouter une largeur maximale. Je vais donc le fixer à 1 200. C'est bon. Mais maintenant, vous pouvez voir que notre conteneur est sur la gauche. Il vous suffit donc de monter dans la section et de mettre à jour l'alignement pour qu'il soit centré. Nous allons donc le faire, puis revenir à notre conteneur, et vous pouvez voir que notre conteneur est maintenant au milieu. Je peux en faire une couleur différente pour vous le montrer un peu mieux. Je vais donc rendre la section rouge et le contenant bleu. Évidemment, nous n' allons pas le garder, mais juste pour vraiment le mettre en valeur et vous pouvez également voir ici le rembourrage Il y a donc un peu de rouge au-dessus et en dessous de la section bleue, et il y a du blanc qui traverse la section Nous voulons être très intentionnels en ce qui concerne le rembourrage. Nous ne voulons pas que le rembourrage soit simplement le rembourrage par défaut. Donc, sur la page elle-même, la mise en page du bureau, je vais supprimer le rembourrage de chaque côté L'idée est de faire en sorte que la section s'étende sur toute la largeur et que la page soit composée d' un ensemble de sections empilées les unes sur les autres Nous ne voulons donc pas de rembourrage autour de la page elle-même Ensuite, si je passe à la section, je ne veux pas de rembourrage en haut et en bas, donc je vais l'enlever Maintenant, ce que je devrais être en mesure de voir , c'est que si je redimensionne mon cadre, nous pouvons voir un effet similaire à celui que nous avions dans notre code HTML Comme vous pouvez le constater, si j'arrive à une taille d'écran plus grande, par exemple 1 500, mon contenu, qui sera contenu dans mon conteneur, restera de 1 200 pixels, n'est-ce pas ? Mais si je descends en dessous de 1 200 ou presque, vous pouvez voir que le conteneur est maintenant aussi grand que le cadre lui-même, sans le rembourrage de la section, d'accord ? Nous voulons donc un peu de rembourrage de chaque côté, et nous voulons également normaliser cela Je vais donc vous montrer quelque chose que vous devriez utiliser dans le développement Web et que vous pouvez également utiliser dans Figma, à savoir les variables Je vais cliquer sur mon cadre ici et vous pouvez voir les variables ici. C'est bon. Je clique donc dessus pour créer une nouvelle variable, et nous allons saisir quelques mesures ici, donc nous allons sélectionner un nombre. Et comme vous pouvez le constater, nous pouvons organiser nos variables dans différentes collections. Le nom standard de notre première collection est collection 1. Je vais donc le renommer en sizing. Nous pouvons également créer une autre collection ultérieurement pour les couleurs. Tout ce que nous pouvons imaginer d'autre que nous pouvons stocker dans une variable. Et je vais créer une variable pour page With ou container Whip, quel que soit le nom que vous voulez, et fixons la largeur de notre conteneur de 1 200 Maintenant, pour terminer, une fois que je serai retourné dans mon conteneur, je pourrai revenir au WIP maximum Cliquez dessus, cliquez sur le chevron à côté du Max Whip et cliquez sur Appliquer Maintenant, vous pouvez voir que je peux sélectionner Page Whip. Et maintenant, si, à un autre moment, je reviens en arrière et que je change ma variable, disons, la change à 1 000. Veillez à ce que cela se répercute partout où nous utilisons cette valeur. Il continue donc de le cacher , mais vous pouvez voir ici que la valeur est de 1 000. Donc, pour le moment, nous ne l'utilisons qu'à un seul endroit, ce qui signifie qu'il est superflu à ce stade Mais une fois que nous commençons à construire un grand nombre de conteneurs, c'est très pratique car cela nous permet de changer de conteneur ultérieurement. Donc, par exemple, juste pour vous faire une démonstration pour percer cette maison, si nous devions créer une autre section avec un autre conteneur, nous voudrions évidemment que ces tailles de conteneurs soient cohérentes. Je suis allé ici et je l'ai changé une fois pour ce conteneur en particulier, et je l'ai fait. Comment puis-je désactiver le Permets-moi de le supprimer, ajouter un nouveau, et je l'ai réglé sur 1 000. Vous avez maintenant une largeur de conteneur incohérente. Au lieu de cela, vous devriez conserver même largeur de conteneur et la modifier ici, et maintenant cela affecte tous les conteneurs de la page. OK. Alors vérifions-le. Nous avons toujours la largeur de notre conteneur ici, et le rembourrage de notre conteneur est également une autre variable que nous souhaiterons peut-être modifier ultérieurement Je vais donc aller jusqu'ici, créer un autre rembourrage de page numéro un, disons-le, et peut-être faisons-en 16 pixels D'accord ? Je vais donc aller ici, et dans nos sections, définissons le rembourrage gauche et droit sur le rembourrage de page D'accord ? C'est ce que nous allons faire dans cette section. En fait, nous ne créerons deuxième section tant que nous n'aurons pas composé celle-ci Maintenant, encore une fois, si je le redimensionne, vous verrez que nous n'avons que 16 pixels de rembourrage des deux côtés jusqu'à ce que nous à ces écrans plus vous verrez que nous n'avons que 16 pixels de rembourrage des deux côtés jusqu'à ce que nous arrivions à ces écrans plus grands où le contenant se termine à 1 200 pixels, et nous obtenons en fait plus D'accord ? J'ai utilisé le mot marge à l'époque, qu'il est important de noter que dans le développement Web, nous avons le rembourrage et la marge Mais à Figma, nous n'avons que du rembourrage. Donc, si vous êtes habitué à avoir à la fois des marges et du rembourrage, il est un peu plus difficile de traduire cela dans le monde de Figma Mais en gros, pour contourner ce problème, si nous voulons définir une marge sur, exemple, ce conteneur, nous l'ajouterions comme rembourrage au conteneur parent D'accord ? C'est le meilleur moyen de contourner le problème. OK, je vais donc remettre la largeur de page à 14 à 40 pixels. Nous avons déjà prouvé que le conteneur est réactif. Ensuite, à l'intérieur du conteneur, nous mettrons le contenu que nous voulons dans ce conteneur. Je vais donc donner une autre définition à cette question. Encore une fois, passons simplement au jaune, et peut-être que pour la section des héros, au moins, ce sera du texte au milieu que nous ne voulons pas étendre sur toute la largeur du conteneur. Nous pouvons donc appeler ce conteneur intérieur. Peut-être qu'il a une largeur maximale de 800. Nous voulons qu'il occupe l'espace disponible. Tout dépend de ce que nous faisons dans ce conteneur, d'accord ? Donc, ce que je vais faire, c'est sauvegarder cette structure. Je vais évidemment supprimer les couleurs. Je vais donc passer à la section ici. Utilisez ce bouton moins ici pour retirer le rouge, entrer dans le récipient, retirer le bleu, puis l'intérieur du récipient et retirer le jaune. Je vais renommer ce fichier interne, et ce sera essentiellement notre structure pour créer notre page Web C'est donc évidemment très différent de ce que nous avons fait dans la dernière vidéo où nous avons simplement jeté des éléments sur la page, et nous avons immédiatement obtenu un résultat visuel. Avec cette approche, nous nous concentrons davantage sur la structure et nous nous assurons que notre projet est configuré avec une que notre projet est configuré avec une mise en page automatique avant d'ajouter des éléments Et en parlant de cela, utilisons cette structure et ajoutons quelques éléments réels à partir de la vidéo suivante. 5. Concevoir comme un développeur - Partie 2: Bien, maintenant que nous avons expliqué comment nous allons créer notre structure globale réactive pour notre projet, allons maintenant créer notre première section Donc, ce que je vais faire, c'est sauvegarder ça. Je vais le désactiver , mais je vais le sauvegarder afin que nous puissions le référencer et le dupliquer pour toutes nos sections. Ensuite, je vais appuyer sur la commande D pour le dupliquer, et je vais activer le second. Et je vais nommer cette section d. Donc, dans ce projet, nous allons créer quatre sections, un en-tête, un héros, une section de collection en vedette et un pied Encore une fois, il s'agit d'un exemple typique de commerce électronique, car je travaille principalement avec des sites Web de développement de commerce électronique. C'est pourquoi je fais plutôt un exemple de commerce électronique. Et ce que j'aime faire, c'est que pour la section intérieure, j'aime l'appeler header inner. J'aime recycler le nom de la section. De toute évidence, il existe une certaine flexibilité quant à la façon dont vous le nommez. Cela dépend de vous. Et donc, en gros, ce sera notre en-tête. Je vais donc me débarrasser de ce WIP maximum. Et je vais encore une fois en faire un cadre de mise en page automatique. Et chaque fois que nous créons un cadre de mise en page automatique, vous verrez qu'il ajoute un rembourrage automatique haut et en bas à gauche et à droite Dans notre conteneur, nous avons déjà un rembourrage automatique, donc nous n'en avons peut-être pas besoin, mais laissez-le là pour le moment Nous devrons peut-être modifier cela à l'avenir. Et ce que je vais faire, c'est introduire le premier élément qui va entrer dans cet en-tête. C'est notre faux logo. Je vais donc apporter des bordures noires avec le logo, et je peux simplement cliquer dessus et le faire glisser directement dans notre conteneur ici Et évidemment, ce logo est bien trop grand. Je vais le composer en 113, ce qui va le rendre beaucoup plus petit. Et voilà. Nous avons intégré notre logo. Le logo se trouve sur le côté gauche de notre en-tête. Je vais maintenant créer le côté droit. Notre côté droit va donc comporter quelques éléments. Il aura une icône pour le compte, une icône pour le CRT et le drapeau du marché actuel Ainsi, sur un site de commerce électronique, vous pouvez cliquer sur l'icône CRT pour ouvrir la carte latérale Vous pouvez cliquer sur le bouton Compte pour ouvrir la page de votre compte, et vous pouvez cliquer sur le drapeau de votre pays, votre marché actuel pour passer à un autre marché. Pour les icônes, elles seront sous forme de SVG, donc je ne les ai pas enregistrées sur mon ordinateur Ce que j'ai, c'est accéder à une bibliothèque, donc je peux l'ouvrir dans un autre onglet ici. Celui-ci est appelé icônes U par icône plate. Comme vous pouvez le constater, la licence vous permet d' utiliser le contenu pour projets commerciaux et personnels Nous pouvons donc totalement utiliser les icônes ici à nos fins pour créer notre faux petit design ici. La page d'accueil. Nous allons passer à cette page, et si elles sont correctement étiquetées, je devrais être en mesure de rechercher des comptes. Peut-être utilisateur. OK, allons-y. Alors, jetons un coup d'œil. C'est une annonce utilisateur, supprimée par l'utilisateur. Nous voulons juste un utilisateur standard. OK, appuyez sur la commande C pour le copier , collez-le ici. Il ne va probablement pas le coller au bon endroit, mais tout va bien. Nous pouvons le récupérer dans le panneau des couches et le placer dans notre en-tête intérieur. Voyez ici qu'une fois que nous l'aurons introduit, il figurera juste à côté de notre logo. Et si j'essaie de cliquer et de faire glisser pour le repositionner, il ne bougera pas car nous utilisons la mise en page automatique Ceci est très différent de l'exemple précédent où vous positionnez simplement des éléments de manière absolue sur la page. Cela ne se traduit pas bien sur le Web, mais c'est le cas, et c'est là la grande différence. Donc, en utilisant la mise en page automatique, nous allons faire au lieu de cliquer et de faire glisser des éléments pour les mettre en position, nous allons mettre à jour nos paramètres de mise en page automatique, qui, comme mentionné précédemment, ressemblent à nos paramètres CSS Flexbox Donc, ici, ce que nous allons faire c'est cliquer sur Aline center, puis je vais cliquer à nouveau pour obtenir l'équivalent de justifier l'espace de contenu entre les deux. Alors maintenant, vous pouvez voir que nous avons notre logo d'un côté et notre icône de l'autre. Maintenant, je voulais aussi une icône de panier. Alors laisse-moi chercher le chariot. D'accord. Celui-ci est le panier d'achat générique. Je vais donc appuyer sur la commande C, ou bien sûr, je peux simplement cliquer avec le bouton droit de la souris et cliquer sur Copier, puis le coller ici. Encore une fois, ce ne sera pas la bonne position. Faisons-le glisser dans l'en-tête intérieur. Maintenant, vous pouvez voir que nous avons ces deux icônes, mais elles ne sont pas regroupées sur la droite, n'est-ce pas ? Il fallait donc s'y attendre. Nous avons ici notre section flexible avec un espace de contenu essentiellement justifié entre les deux Donc, ce que nous devons faire, c'est regrouper ces icônes, et je vais le faire dans, vous l'avez deviné, un cadre de mise en page automatique Je vais donc appuyer sur Shift A pour transformer en cadre de mise en page automatique, puis je vais le renommer icônes d'écriture ou d'en-tête, à vous Je vais configurer le WIP pour qu'il intègre le contenu. Et comme vous pouvez le voir ici, cela nous a donné un WIP basé sur la façon dont ces deux apparaissaient visuellement auparavant Donc, ce que je vais faire, c'est passer à WIP et utiliser Hug Content, ce qui revient essentiellement à fit content Max WIP en CSS Mais maintenant, vous pouvez voir que c'est pour maintenir l'espacement entre eux que vous créez un écart géant Nous voulons donc supprimer cela ou, en fait, nous ne voulons pas le supprimer complètement, mais fixer un écart beaucoup plus petit. Alors peut-être dix, laisse-moi zoomer un peu, regarder. OK, disons peut-être 16 pixels entre eux, d'accord ? Nous avons donc maintenant notre logo sur la gauche et nos icônes sur la droite. La dernière chose que je voulais ajouter est le drapeau. Je vais apporter le drapeau australien ici, qui indiquera notre sélecteur de marché Et si nous comparons la taille de ce drapeau à celle de nos icônes, celles-ci sont au nombre de 24. Donc, pour qu' ils soient identiques, je vais changer la hauteur ici à 24, et nous voulons simplement nous assurer que le rapport hauteur/largeur est verrouillé afin que l'icône ne s'étire pas. Ensuite, nous allons le déplacer dans l'en-tête juste ici. faut y réfléchir un peu plus, et là, vous pouvez voir que nous avons un ensemble de trois icônes, et nous pouvons augmenter l'écart entre elles comme ceci, ou nous pouvons modifier ces paramètres de la manière dont nous voulons mettre à jour l' espace qui les sépare, essentiellement l' aspect visuel de notre section droite OK. Maintenant, entre notre logo et nos icônes sur la droite, je veux un menu au milieu. Donc ce que je vais faire, c'est que je peux le faire. Voici comment je peux d' abord créer le texte , puis le regrouper dans une mise en page automatique, ou je peux d'abord créer la mise en page automatique. Allons-y avec l'échelle. Je vais donc ajouter un cadre ici et je vais appeler ce menu d'en-tête. Et je vais le configurer immédiatement sur la mise en page automatique sans aucun contenu à l'intérieur Je vais régler les fouets pour étreindre le contenu. Oui, tout est à câliner, donc ça va correspondre au contenu. Ensuite, je vais utiliser mon outil de texte ici, écrire mon premier élément de menu ici, et je vais juste avoir deux liens dans notre menu. C'est très simple. Pour hommes, cliquez dessus. Appuyez sur la commande D pour dupliquer et le remplacer par celui des femmes. Comme vous pouvez le constater, ils sont empilés les uns sur les autres Nous devons donc modifier notre flux dans notre disposition automatique ici en mode horizontal Si c'est ce que nous voulons, l'écart entre les deux sera de dix. Nous pouvons modifier l' alignement. Cela n'a pas vraiment de sens pour le moment, étant donné que tout est prêt pour un câlin. Nous avons du rembourrage à gauche et à droite. Peut-être que nous le garderons. Je ne veux pas le rembourrage en haut et en bas parce que nous l'avons déjà dans notre contenant Ensuite, si nous zoomons ici, vous pouvez voir que nos éléments de menu sont centrés au milieu, d'accord ? Donc, comme je vous l'ai montré dans la vidéo précédente, étant donné que nous avons notre structure réactive ici, si je la redimensionne maintenant, vous verrez qu'elle est réactive comme s'il s'agissait d'un véritable projecteur Web, n'est-ce pas ? Et c'est plus que ce que l'on peut dire pour la plupart des conceptions Web qui vous tomberont sur genoux, car les concepteurs, comme je l'ai déjà dit, utilisent généralement simplement le positionnement absolu. OK. Ce que je veux faire ici aussi, car évidemment, cela va tomber en panne une fois que nous aurons atteint, vous savez, des tailles d'écran assez basses, mais c'est le design de l'ordinateur de bureau. Nous ne voulons pas vraiment montrer à quoi cela ressemble à 4:16 sur notre châssis de bureau ici Nous voulons le présenter sur mobile. Donc, ce que je vais faire, c'est définir un Mnwidth sur le cadre global lui-même, et je vais le définir sur 769 Rien de moins que 769, et vous recherchez une tablette et un mobile, d'accord ? Alors maintenant, vous allez voir que je ne peux pas redimensionner à moins de 769 Je vais donc remettre ma page à 14 40, et je vais m'occuper d' une dernière chose avant de passer à la section suivante, à savoir créer de nouvelles variables autour des polices, d'accord ? Donc, comme vous pouvez le voir ici, lorsque nous avons créé ce texte ici, il l'a simplement configuré avec la police standard Inter. C'est juste la valeur par défaut. Elle est prise sur la taille de police par défaut, et tout est, bien sûr, par défaut. des éléments tels que les couleurs et les polices de marque Nous voudrions généralement placer des éléments tels que les couleurs et les polices de marque dans une variable. Je vais donc cliquer hors de mon cadre ici et configurer nos polices. Vous pouvez donc voir ici que nous avons une collection de tailles. Je vais créer une nouvelle collection et appeler cela des polices, et je vais créer deux polices. Ce sera une chaîne, et la première sera une police de titre, seconde une autre chaîne, ce sera une police de corps. Je suis content de la police de caractères de l'Inter pour le moment, c'est ce que nous avions, donc je vais y mettre Inter. Mais lorsque nous créons nos titres, je veux une police différente Je veux la police d'Oswald. Nous allons donc créer notre premier titre dans la section suivante, mais nous avons déjà du texte dans notre section d'en-tête Je voudrais donc aller ici, et au lieu d'Inter, je vais cliquer ici pour lier une variable que je vais mettre dans la police du corps. Cela ne changera donc rien car la police body est déjà inter. Mais si nous devions modifier la police du corps plus tard, comme je vous l'ai déjà montré à propos de la taille, cela se répercuterait tous les domaines de notre design Et pendant que nous sommes ici, autant choisir les couleurs de notre marque. Je vais donc créer une nouvelle collection, je vais appeler cela couleurs, puis appuyer sur Créer, et vous pouvez voir que nous allons utiliser notre troisième type de variable, la couleur. Donc, si vous vous demandez comment j'ai créé cette palette de couleurs, je suis sûr que je viens de demander à HachPT me générer une palette de couleurs basée sur cette fausse marque C'est également ainsi que j'ai généré le logo et les images que vous voyez ici grâce à l'IA. L'IA est géniale lorsque vous souhaitez produire quelque chose de générique à des fins de démonstration. Je vais donc appeler mon premier noyau de couleur noir, et les noms de ces couleurs ont également été créés par Chat GBT J'accorde donc à Open Eye le mérite de ces noms également. Ensuite, le blanc pur, qui, comme son nom l'indique, ne sera que du blanc pur. Le prochain sera le charbon de bois, le suivant le graphite. ne finirai pas par utiliser toutes ces couleurs, pour être honnête, mais elles m'ont été données par Chat GBT, donc je vais juste les ajouter ici Le suivant était gris cendré. Encore une fois, si vous suivez le chemin, les gars, vous n'avez pas à saisir les mêmes variables de couleur ici, il suffit de montrer comment nous pouvons utiliser les variables de couleur, argent, une couleur appelée blanc fumé. Et enfin, le bleu acier au son super cool, qui ne ressemble pas trop à du bleu, mais qui a l'air plutôt cool OK. Maintenant que nous avons défini nos variables de couleur, passons simplement ici et vérifions-nous que notre police utilise la variable au lieu d'une valeur arbitraire ici Je vais donc cliquer sur le remplissage, et ici, nous n'avons pas le même bouton que celui que nous avons vu auparavant pour les autres zones où nous ajoutons la variable. Nous devons plutôt cliquer sur les bibliothèques ici, puis vous pourrez voir nos couleurs ici. Nous allons donc régler les éléments du menu sur Core Black. Et comme je n'arrête pas de le mentionner tout au long de ce cours, si nous changeons le leader du noir de base au niveau variable, cela se répercutera partout où noir de base est utilisé dans notre conception. Bien, c'est donc notre première section terminée, notre section d'en-tête Comme vous pouvez le constater, il est réactif à partir de 769, qui sera notre point de rupture jusqu'à 14 40 et au-delà Il est donc correctement configuré. Il est beau avec un design simple. Créons maintenant la section suivante dans la vidéo suivante. 6. Concevoir comme un développeur - Partie 3: Dans la dernière vidéo, nous avons créé notre première section, notre section d'en-tête, et maintenant, si nous créons une nouvelle section, je vais la dupliquer à partir de notre petit modèle , puis l' activer et la faire glisser vers le haut. Vous verrez qu'il augmente la hauteur du cadre. En effet, si nous regardons le cadre, vous pouvez voir que la mise en page automatique est activée et que la hauteur est réglée pour épouser le contenu Il sera donc aussi haut que nécessaire pour le contenu qu'il contient. qui est cohérent avec le fonctionnement réel du Web, une page Web sera aussi longue que nécessaire pour contenir tout le contenu qu'elle contient. Bien entendu, il existe certaines exceptions où l'expérience utilisateur est davantage axée sur le défilement horizontal, mais cela est très rare La plupart du temps, lorsque nous naviguons sur le Web, nous défilons verticalement, et notre écran et le fouet de notre navigateur déterminent notre variable déterminent notre Donc, comme tout ce qui imite le fonctionnement réel du Web, j'aime cette approche Maintenant, je vais renommer cette section en héros, d'accord ? ne connais pas une section consacrée aux héros, c'est essentiellement ce que nous avons créé auparavant, tout comme une bannière avec une image de fond. C'est généralement ce qu'est une section de héros. Je ne sais pas quelle est la définition réelle, mais c'est quelque chose qui se trouve au-dessus de la ligne de démarcation. Donc, vers le haut de la page, en gros, la première grande section que vous voyez sur une page. Et si vous vous souvenez, plus tôt dans le cours, dans la leçon de base de Figma, j'ai utilisé notre image comme arrière-plan du héros Je vais donc y revenir, comme je le faisais auparavant. Je l'ai donc ouvert dans le Finder, et je l'ai simplement cliqué et fait glisser. Et maintenant, vous pouvez voir qu'il se trouve dans le conteneur. Ce n'est pas ce que nous voulons. Peut-être que nous le traînons ici, mais ce n'est pas exactement ce que nous voulons, Eva. En fait, il existe une bien meilleure façon de le faire, à savoir de ne pas utiliser d'image du tout. Définissez l'image dans le champ de remplissage. Maintenant, comme je veux une image pleine largeur qui couvre toute la section, je vais sélectionner la section. Ensuite, je vais descendre pour remplir, cliquer sur ce bouton plus pour ajouter du remplissage, et ce que vous n'avez peut-être pas réalisé, c'est qu' en plus d' ajouter un remplissage en couleur, nous pouvons également ajouter un remplissage d'image. Je vais cliquer sur Télécharger depuis un ordinateur, puis je vais sélectionner à nouveau cette image de héros. Vous pouvez maintenant voir que nous avons cette image de héros qui s'étend sur toute la largeur de la section. La hauteur totale, mais la hauteur est actuellement limitée à 120. définir pour qu'il soit rempli ici est essentiellement comme une couverture d'image d' arrière-plan en CSS ou une couverture d'ajustement d'objet, puis le définir pour qu'il soit ajusté revient essentiellement à contenir un ajustement d'objet. Mais évidemment, nous ne voulons pas qu'il soit contenu ici. Nous voulons qu'il se remplisse. Il y a évidemment la possibilité de recadrer, comme nous l'avons vu plus tôt. Mais il vaut mieux le remplir. Et comme vous pouvez le voir ici, cette section est tout simplement trop courte. Nous voulons nous assurer que nous pouvons voir une partie suffisante de l'image. Je vais donc donner à cette section une hauteur minimale. Je vais donc cliquer sur le Chevron, cliquer sur Ajouter une hauteur minimale, et ajouter 750 pixels Maintenant, il y a une limite dans Figma que nous avons en CSS, savoir que nous pouvons choisir le point d'ancrage d'où vient l'image Nous pouvons donc le régler pour qu'il vienne du haut ou du bas , de la gauche ou de la droite. Cela ne semble pas être cette option dans BigMA, je ne sais pas pourquoi l' image devrait apparaître ici, mais comme vous pouvez le voir, aucune option ici pour le faire s'agit donc peut-être d'une modification que nous n'aurons qu'à faire en CSS une fois que nous l'aurons exportée dans le code. Pour l'instant, je vais juste fixer une hauteur minimale afin que nous puissions voir clairement les deux modèles. Je réduirai peut-être cette hauteur plus tard une fois que nous aurons exporté vers le code, mais vous pouvez voir qu'avec une hauteur minimale de 900, nous pourrons voir les deux modèles, d'accord ? Maintenant, nous avons notre conteneur ici, et il semble qu'il prenne la même hauteur que notre section précédente. Je vais donc simplement changer cela. Je vais régler la hauteur pour remplir le conteneur sur les deux. Et maintenant, si je devais, par exemple, écrire un texte ici, disons simplement le titre. C'est très petit, alors je vais aller ici. En fait, tout d'abord, je vais définir la police de titre comme celle que nous avons définie auparavant pour Oswald Ensuite, je dois évidemment l'agrandir que nous puissions le voir se diriger comme tel. Et puis, pour le moment, comme ce cadre n'est pas mis en page automatiquement, je peux cliquer et faire glisser ce titre où je veux. Il s'agit du même positionnement absolu que celui que nous avions auparavant. n'est pas ce que nous voulons, alors je vais passer au clic intérieur Shift A pour le transformer en mise en page automatique Et vous pouvez voir que par défaut, ça entre dans le bang metal, d'accord ? Bien évidemment, nous pouvons choisir notre alignement. Et si nous cliquons sur Aligner en haut à gauche et que nous retirons le rembourrage inséré par Figma afin de maintenir cette position, vous verrez que notre titre parfaitement au logo ici, d' C'est donc ce que nous allons vouloir pour le reste de la page. Mais pour cette section consacrée aux héros en particulier, nous voulons que le contenu soit juste au milieu. Donc, ce que je vais faire, c'est le remettre ici. Ensuite, je vais sélectionner le texte, le dupliquer, et vous verrez qu'il ira vers la droite. Je vais donc changer le sens de flexion ou, dans le cas de la mise en page automatique, c'est ce qu'on appelle le sens du flux, je suppose Je vais passer cela à la verticale, puis je vais changer le deuxième morceau de texte en corps, puis je vais changer la police du titre en police du corps. Cela n'a pas fonctionné, laissez-moi le sélectionner à nouveau, puis réduisons-le. D'accord ? Cela va donc rester au point mort, car nous avons configuré nos paramètres d'alignement en tant que tels. Et il va y avoir un écart de dix pixels entre le titre et le corps du texte. Le meilleur rédacteur, j'ai donc demandé ChahPT de trouver un meilleur titre que celui-ci Je vais donc le mettre ici, redéfinir votre axe. Et évidemment, ou du moins, évidemment, pour moi, le texte est plus beau lorsqu'il est entièrement en majuscules. Et puis le deuxième exemplaire pour le corps, des vêtements axés sur la performance pour ceux qui bougent avec détermination, design minimaliste et un impact maximal. C'est un peu petit, et je veux qu'il soit aligné au milieu. Je vais donc changer l'alignement au milieu. Je ne sais pas si la variable de police s'applique, donc je vais m' assurer que c'est bien la police du corps, et je vais l'augmenter avec, d'accord ? Comme vous pouvez le constater, au fur et à mesure que je l'augmente , il chevauche le contenant De plus, même à cette taille, lorsqu'il ne recouvre pas le contenant, il reste un peu trop large. Donc, ce que je vais faire, c'est entrer dans ce conteneur intérieur ici et forcer des sauts de ligne avec une odeur maximale sur ce conteneur Je vais donc ajouter une touche maximale de Let's Experiments avec environ 600 Comme vous pouvez le constater, il s'agit d'un découpage. Nous voulons donc modifier cela pour avoir une largeur de conteneur de remplissage. Et puis vous pouvez voir que nous avons des sauts de ligne. Jouons donc avec la taille de la police et la taille du conteneur pour améliorer un peu l'apparence. Je pense que c'est probablement un meilleur équilibre ici. Cette situation, c'est bien de l'avoir au milieu, mais je veux qu'elle se trouve dans cet espace disponible juste au-dessus. Je vais donc le pirater un peu pour le mettre en place. Je peux utiliser l'alignement ici pour placer en haut de la verticale, mais il est trop proche de l'en-tête. Idéalement, je le voudrais quelque part entre les deux. En HTML et CSS, je peux ajouter un pourcentage spécifique pour le placer quelque part ici, mais nous n'avons pas accès à cette Figma Donc, ce que je vais faire, c'est ajouter un rembourrage vertical pour le mettre en place Commençons par 50, puis progressons à partir de là, 100 ou 150. Faisons 165. C'est un peu comme ça, mais le texte est un peu proche du visage de la dame. Je vais donc juste apporter un peu le conteneur, trouver la largeur maximale ici, la porter à 550. OK. Peut-être que ce saut de ligne se trouve dans le texte lui-même. Allons-y. D'accord, le saut de ligne se trouvait donc dans le texte lui-même. Donc oui, si nous fabriquons ce conteneur 550 pixels maximum et que nous jouons avec le rembourrage, nous pouvons le placer dans une assez bonne position Maintenant, pour tester cela, pour voir s'il est toujours réactif, je vais cliquer sur le cadre du bureau, et je vais le redimensionner Comme vous pouvez le voir, notre image occupe l'espace disponible et notre titre de texte reste au milieu. Parfait Mais il y a une autre chose que je veux faire ici, c'est d'insérer un bouton, un bouton CTA Alors, bien sûr, je vous ai montré un bouton dans les bases de Figma. Nous allons utiliser, encore une fois, la mise en page automatique pour cela. Nous pouvons donc simplement cliquer sur notre design ici, puis nous allons appeler le bouton Acheter maintenant. Je vais cliquer pour sortir de l'outil de texte. Sinon, il va ajouter un vrai A. Je vais appuyer sur Shift A, et maintenant la mise en page automatique a été ajoutée Je vais appeler ce bouton. Descendons, remplissons-le, et utilisons l'une de nos variables de couleur. Peut-être que je vais faire en sorte que ce soit blanc comme de la fumée, puis à l'intérieur du bouton dans le texte lui-même, je vais remplacer le remplissage quelque chose qui contraste avec cela. Alors peut-être du graphite. Zoomons maintenant, regardons ça. De toute évidence, nous avons besoin d' un peu plus de rembourrage, je vais donc ajouter du rembourrage à gauche et à droite, du rembourrage en haut et en bas certain rayon de bordure, appelé rayon d'angle ici dans Figma Commençons par dix, d'accord ? En fait, dix ne me dérangent pas. Je pense que dix, c'est bien, comme ça. Et pour terminer, je ne suis pas un grand fan de la différence d' espace. Comme vous pouvez le constater, il semble qu'il y ait plus d'espace entre le titre et le corps du texte, par rapport au corps du texte et au bouton. Voyons pourquoi c'est le cas. Passons à notre couche d'en-tête ici et vous verrez que la boîte est un peu plus grande que le texte lui-même. Vous voudrez peut-être descendre à la hauteur de ligne, définir égale à la taille du texte, donc 60, et cela changera cela. Et maintenant, vous pouvez voir que tout est un peu plus égal. Donc ça règle presque le problème. Je vais faire la même chose ici pour le corps du texte, si entre les lignes, il faut en quelque sorte cette hauteur de ligne. Je vais donc annuler ce changement. Et il ne reste plus qu'à augmenter l'écart. Disons 20 pixels. OK. Maintenant, ce que nous pourrions faire si nous voulions des espaces différents entre les deux, nous pourrions regrouper le texte, y ajouter une mise en page automatique, peut-être appeler cela le texte du héros si nous le voulions, puis ajouter un peu de marge en bas Nous pouvons en fait cliquer ici, ce qui nous permettra de séparer le rembourrage gauche et droit et le rembourrage supérieur et inférieur, et nous pouvons ajouter rembourrage supplémentaire pour séparer le bouton du texte Alors peut-être que je n' utiliserai que cinq pixels ici. En fait, je l'ai juste mis au mauvais endroit. Alors peut-être que je n'utilise que dix ou cinq pixels ici, et ça a l'air plutôt sympa. OK, encore une fois, redimensionner notre design de 769 à plus de 14 40 De toute évidence, nous perdons les visages des mannequins ici. Et en fait, permettez-moi de placer l'ordinateur de bureau au-dessus mobile pour qu' il apparaisse. Mais avec le CSS, nous pouvons facilement résoudre ce problème en modifiant le positionnement de l' image d'arrière-plan. OK, donc je vais remettre ça à 14 40. Avant de passer à la vidéo suivante, je vais vous montrer les composants. Pour conserver mes composants, je vais simplement créer une autre section ici. J'appellerai cela des éléments. Tu peux l'appeler comme tu veux. Vous n'avez même pas besoin d'utiliser une section. La plupart des gens n'utilisent même pas de section . Je vais cliquer sur ce bouton ici et le faire glisser vers les éléments. Maintenant, pourquoi je l'ai déplacé d'ici et je l'ai mis ici, c' est parce que je veux définir le style général de nos boutons que nous allons utiliser tout au long de notre conception. Toutes les modifications que nous apportons à ce style de bouton centralisé répercutées sur tous nos boutons. ne veut pas dire que nous ne pouvons pas apporter modifications spécifiques aux boutons individuels, exemple si nous les plaçons ici et qu'ils sont peut-être sur un fond blanc, nous devons inverser les couleurs. Nous pouvons le faire. Nous pouvons également créer deux versions du bouton principal, mais pour avoir un style de bouton centralisé de base, nous pouvons créer ce que l'on appelle un composant. Nous pouvons donc le faire en cliquant avec le bouton droit sur l'élément et en cliquant sur Créer un composant. Maintenant, vous pouvez voir qu' il devient violet. Cette icône indique qu'il s'agit désormais d'un composant. Maintenant, si je devais cliquer et faire glisser, désolé, un bouton du composant vers cet endroit, j'obtiens une instance de ce composant. Et vous pouvez voir ici que cela indique un exemple, et nous avons le diamant creux ici plutôt que le diamant à quatre carrés Et comme vous pouvez le voir, il est écrit composant. Vous pouvez donc voir ici que nous avons maintenant une instance de notre composant bouton. Bien entendu, nous pouvons toujours modifier le texte, mais cela ne changera pas le composant d'origine. Mais si je remplace le composant d'origine par du texte ici, vous verrez que cela se répercute réellement sur les instances. Ainsi, au niveau de l'instance, nous pouvons effectuer des personnalisations, ou au niveau du composant, nous pouvons effectuer des personnalisations, mais celles-ci se répercuteront sur toutes les instances de ce accord ? Je pense donc que les composants sont une très bonne idée, et nous allons les utiliser tout au long de ce cours. Et vous verrez dans la vidéo suivante que lorsque nous créerons une section de collection contenant plusieurs fiches de produits, nous voudrons utiliser la même carte encore et encore, ce qui constitue un cas d'utilisation parfait pour les composants. 7. Concevoir comme un développeur - Partie 4: Très bien, dans la dernière vidéo, nous avons développé notre section héros Passons maintenant à la section suivante, qui sera une section de collection en vedette, ce qui est très courant dans le commerce électronique. Alors que nous construisons un site Web de commerce électronique, il est logique de créer une section de collection en vedette. Je vais donc dupliquer modèle de section que nous avions et l'activer, puis je vais appeler cette collection en vedette. La principale complexité de cette collection en vedette réside dans certains composants de cartes que je vais y intégrer. OK. Donc, tout d'abord, nous allons vouloir un titre ici. Je vais donc donner à cela le titre, disons simplement en vedette, désolé, c'est très petit. Je vais zoomer un peu, mais nous allons l' agrandir. Collection en vedette. Les majuscules sont bien meilleures, et nous allons remplacer la police par notre police de titre, ici même d'Oswald, peut-être la mettre en gras Ça a l'air un peu mieux. Ensuite, je vais l' agrandir beaucoup, donc je vais le faire 60 pixels. OK. Comme vous pouvez le voir, nous pouvons le déplacer avec notre curseur. Cela doit signifier que nous ne sommes pas actuellement dans un cadre de mise en page automatique Je vais donc appuyer sur le cadre intérieur et appuyer sur Shift A pour le transformer en mise en page automatique Et comme vous pouvez le voir ici avec notre alignement, il se situera au milieu. Je vais donc le déplacer vers la gauche. Comme vous pouvez le constater, ce rembourrage a été conservé Nous voulons donc simplement retirer ce rembourrage, puis nous devrions nous assurer que ce titre correspond au reste de nos conteneurs La prochaine étape que je vais faire est de travailler sur le composant de la carte. Je vais en fait passer à mes éléments ici et créons-les séparément, en faire un composant, puis nous pourrons copier certaines instances de ce composant dans notre section ici. Je vais cliquer ici pour créer un cadre, et je veux faire en sorte que ce cadre fasse environ 280 pixels de large. Et puis la hauteur sera énorme une fois que nous aurons ajouté les éléments à l'intérieur. Je vais donc appeler cela notre fiche produit. Et les véritables enfants figurant sur notre fiche produit seront l' image de la carte produit, puis tous les détails. D'accord ? Donc, pour l'image, je n'ai pas vraiment tout un tas d'images de produits à mettre ici. Je vais donc mettre un espace réservé, et pour cela, je vais juste utiliser un rectangle J'aime bien la couleur de ce rectangle d'espace réservé, puis je vais le dimensionner de manière à ce qu' il soit égal à la largeur totale de la fiche produit, et pour la hauteur, peut-être 320 En fait, je vais juste le composer ici. 320. Et puis pour le WIP, je veux qu'il remplisse le conteneur Mais pour cela, nous allons avoir besoin d'une mise en page automatique. Je vais donc passer à la fiche produit, appuyer sur la mise en page automatique dessus, revenir à notre rectangle, configurer pour remplir le contenant, puis je vais étendre la fiche produit Ici, vous pouvez voir que l' alignement est désactivé. C'est le placer au centre. Nous allons donc le déplacer là-haut, puis nous allons mettre un autre cadre ici pour les détails. Il suffit de cliquer à nouveau sur la fiche produit et de changer l'alignement en vertical, puis de le placer en bas. D'accord ? Ce cadre va remplir le contenant, et les hauteurs épouseront le contenu, mais il n'y a pas encore de contenu dedans. Commençons donc à le mettre en place. Nous allons vouloir indiquer le titre du produit. Comme vous pouvez le voir, il a enregistré notre taille de police d'avant. Peut-être que je réduis ce chiffre à 24, puis j'écris un produit. Refaisons les majuscules, le titre du produit, non ? Et pour le moment, cela ne se trouve pas dans un cadre de mise en page automatique. Nous allons donc monter ici et ajouter une mise en page automatique au cadre. Et maintenant, vous pouvez voir qu'il va y avoir un certain alignement sur le titre de notre produit. Nous allons renommer les détails de la fiche produit encadrée, et je voudrais placer le titre de ce produit sur la gauche, supprimant ces numéros de rembourrage pour Et comme vous pouvez le voir ici, il y a aussi une lacune que je vais supprimer pour le moment, et nous pourrons y remédier un peu plus tard sans que Figma n'en décide pour nous Et ce que je vais faire, c'est appuyer sur le titre du produit, puis sur Shift A à nouveau, pour créer un autre cadre, et ce seront les détails de notre fiche produit ou, en fait, je l'appellerai simplement carte produit à gauche. Parce que je vais mettre un autre texte ici. Nous allons ajouter un autre morceau de texte, et nous voulons qu'il soit aligné verticalement. Je vais donc changer le flux en vertical. Je commence à accélérer un peu maintenant, car nous avons déjà beaucoup discuté de la mise en page automatique Et puis celle-ci ne sera pas notre police de titre. Ce sera notre police de caractères, et je vais simplement appeler cette variante le titre. Nous ne voulons pas que ce soit audacieux. En fait, peut-être que nous voulons qu'il soit léger, d'accord ? Et puis la taille du texte est bien trop grande. Je vais faire en sorte que ce soit 14 ans. OK. L'alignement se situe au milieu. Il vous suffit donc de le déplacer vers la gauche. En fait, même quand il le fait , il est toujours au milieu, et c'est parce que nous devons sélectionner notre alignement ici, puis appuyer sur la commande D pour le dupliquer une fois de plus, et ce sera notre prix. Je vais donc fixer ce montant à peut-être 10$ avec les zéros suivants Et pour cela, je veux qu'il soit audacieux et peut-être un peu plus grand. Je vais placer un cadre sur le côté droit, et dans ce cadre, je vais définir le nombre d'avis. Je vais donc simplement appeler cette carte-produit encadrée correctement. Et pour afficher le nombre d'avis, je vais utiliser une icône en forme d'étoile. Je vais donc revenir à notre bibliothèque d'icônes U par icône plate ici et chercher une étoile. C'est l'étoile que nous recherchons. Eh bien, laissez-moi voir ce qu'est celui-ci. Je veux la version arrondie. Je vais donc le copier, coller dans ce cadre, puis un morceau de texte dans ce cadre, également pour le nombre d'étoiles. Disons donc 4,5. OK. Je vais les commander à nouveau, puis je vais ajouter la mise en page automatique à la fiche produit, d'accord Ensuite, je vais cliquer sur les détails de la fiche produit et mettre à jour notre alignement ici, je vais le régler sur un espace entre les deux. C'est le terme utilisé dans CSS Flex, mais en gros, j'ai simplement double-cliqué ici pour lui donner un espacement automatique, puis je suis revenu ici sur la fiche produit Je vais régler la hauteur pour remplir le conteneur. Je vais retirer le rembourrage supérieur et inférieur qui le place au milieu, puis je vais régler l'alignement En fait, cela n'a pas réglé le problème pour nous. Nous voulons qu'il se trouve en haut à droite. Alors peut-être devons-nous cliquer ici. Allons-y. Vous devez cliquer à nouveau pour obtenir l'écart automatique. Ensuite, nous passons à la fiche produit ici. Nous voulons en fait que cela soit dans cette mise en page automatique, aligné ensemble. Peut-être un écart de cinq pixels à la place. Et maintenant, vous pouvez voir que c' est un peu bizarre. Descendons et changeons la hauteur de la ligne à 24. Et maintenant, vous devriez commencer à voir tout s'aligner très bien. D'accord ? Maintenant que tout le rembourrage a été retiré, je vais installer mon propre rembourrage à ma guise Donc, évidemment, je vais vouloir un certain écart entre ces sections. Donc 20, c'est probablement trop. Faisons-en dix. Ensuite, pour les détails de la fiche produit, j'ai besoin d'un espace de chaque côté. Appelons peut-être le 12. C'est sympa. Laisse-le respirer. Ensuite, je vais passer au composant de la fiche produit lui-même, monter en hauteur, cliquer sur Hug content, pour qu'il ne soit pas plus grand que le contenu qu'il contient. Ensuite, nous pouvons voir ici qu'il doit y avoir un peu de rembourrage au bas des détails de la fiche produit Donc, au lieu d'avoir un espace ici, nous pourrions le supprimer, puis, pour ce qui est des détails , le rembourrer en haut et en bas, comme tel Et en fait, je suis maintenant très content de ma fiche produit. D'accord, nous pouvons donc laisser cet espace réservé ici comme ça ou nous pouvons remplacer le remplissage par l'image réelle de notre produit Je n'ai qu'une seule image du produit. Je vais donc aller ici et vous donner un exemple. Nous pouvons donc voir ici l'image du produit. Et comme vous pouvez le voir, ça lui tombe un peu sur le dessus de la tête Il y a donc quelques options que nous pourrions adapter, ce qui n'est pas une bonne option car nous avons maintenant cet espace blanc du côté de l'EVA. Si nous voulons toujours qu'il soit rempli et qu'il soit simplement ancré par le haut, nous pouvons le faire ultérieurement dans notre CSS. Impossible de le faire dans Figma, malheureusement. Mais dans ce cas, je vais juste recadrer. Je vais donc simplement aligner l'image comme ça, et peut-être que le produit est juste ce soutien-gorge de sport ici. Cela n'implique pas la partie inférieure, auquel cas cela fonctionnerait bien. D'accord ? On pourrait donc dire, au lieu du titre du produit, soutien-gorge de sport. D'accord ? Nous pouvons le laisser là, ou nous débarrasser de l'image, ou nous pouvons revenir à l'espace réservé, si je contrôle simplement Z pour l'exclure Mais ici, nous pouvons voir la configuration correctement structurée de notre fiche produit. OK. Alors ce que je vais faire, c'est cliquer avec le bouton droit sur cette fiche produit, puis cliquer sur Créer un composant. Nous pouvons maintenant créer des instances de cette fiche produit, et toutes les modifications apportées à ce composant centralisé seront répercutées sur chaque instance, comme pour les boutons. D'accord ? Donc, ce que je vais faire, c'est retourner à notre section ici. Je vais renommer l'intérieur de cette collection actuellement en vedette Ensuite, je vais créer un nouveau cadre à l'intérieur. De toute évidence, nous ne voulons pas qu'il soit placé à droite du titre. Nous voulons qu'il passe en dessous, donc je vais modifier mon flux ici. Voici notre liste de fiches produits. OK. Ensuite, ce que je peux faire c'est étendre cette extension pour remplir l'ensemble du contenant, puis je peux commencer à faire glisser l'un d'entre eux dans mes fiches produits de cette manière. En fait, c'est sur le côté, mais je peux ensuite l'intégrer à mes fiches produits ici. Et encore une fois, comme nous l'avons vu tout au long, je vais ajouter la mise en page automatique à cela, et maintenant vous pouvez voir que notre fiche produit est parfaitement au centre Ce que je vais faire, c'est dupliquer ces fiches produits. Faisons-en quatre, je crois. Et vous pouvez voir que Figma a ajouté du rembourrage à gauche et à droite Débarrassons-nous de ça. Nous voulons évidemment un certain écart entre tous ces éléments. Je pourrais porter cet écart à 15. Et comme vous pouvez le voir ici sur nos fiches produits, le contenu est parfait, ce qui est une bonne chose. Cela signifie qu'il sera aussi gros que les cartes qu'il contient, et notre WIP remplira le conteneur Parfait Maintenant, comme vous pouvez le voir avec notre titre ci-dessus, la hauteur de la ligne est supérieure la hauteur du texte réel. Nous allons donc faire en sorte que ce soit 60 pour qu'il n'occupe que l'espace pour le texte. Et dans ce cas, nous allons avoir besoin d'une marge entre ce texte et les fiches produits. Nous pouvons donc soit ajouter une mise en page automatique à ce texte ici, puis dans le cadre de mise en page automatique, nous pouvons ajouter un peu de rembourrage inférieur, soit simplement utiliser un espace sur la D'accord ? Je pense donc que je vais juste le faire et simplement creuser l'écart. En fait, nous avons déjà un écart ici, mais créons-en un peu plus, peut-être 30 pixels d' écart. C'est bon. Donc, si nous regardons notre contenant ici, il y a du rembourrage en haut et en bas, ce qui ne devrait pas exister. De plus, ces sections ne semblent pas parfaitement s'aligner. Découvrons donc pourquoi. Il semble y avoir une petite lacune ici. Passons à notre cadre parent ici, le cadre de bureau, et vous pouvez voir qu'il y a un écart là-dedans. Nous voulons donc simplement supprimer cela. Et maintenant, vous pouvez voir que le haut de la section et le bas de la section sont alignés contre la section Maintenant, évidemment, nous voulons créer de l'espace ici, mais je veux le créer sous forme de variable, car si nous créons une autre section comme celle-ci avec du texte et des images, nous voudrons que le remplissage de cette section reste cohérent Je vais cliquer sur notre cadre ici, entrer dans les variables, passer à notre collection de tailles et créer une nouvelle variable numérique pour le remplissage des sections. Et avec les modes, nous pouvons réellement changer cela pour qu'il soit différent en fonction du mobile ou de l'ordinateur de bureau. Mais uniquement si vous occupez le poste de développeur, ce que nous aborderons un peu plus tard. Allons-y donc avec 75 pixels. D'accord ? Ensuite, je vais passer à ma collection en vedette, puis l'ajouter ici même au rembourrage de notre section OK, étendons la section vers le bas pour que vous puissiez voir que c'est plutôt joli. D'accord, alors comment cela va-t-il se passer avec la réactivité ? Comme vous pouvez le voir ici, il peut s'agir d'un conteneur de trop-plein Cela pourrait donc ressembler à cela, puis l'utilisateur pourrait faire défiler la page vers la gauche et la droite, ou nous pourrions le configurer de manière à ce que les fiches produits soient emballées. Voici donc le bouton pour le rap, puis voyons ce qui se passe si nous réduisons le nombre. Vous pouvez voir qu'ils commencent à s'enrouler, mais nous voudrions peut-être aussi qu'ils s'étirent un peu. Je suis heureuse qu'il s'agisse, dans ce cas, d'une simple situation de conteneur à débordement Et si nous voulons quelque chose de différent, nous pouvons facilement corriger cela dans notre NCSS HTML OK. Donc, revenons à 14 40, le fouet d'origine Dans cette leçon, nous avons principalement expliqué comment créer ce composant unique. Mais vous pouvez voir que nous avons ici plusieurs instances de ce composant unique. Et si je reviens en arrière et que je remplace l'un de ces espaces réservés dans une instance réelle par cette image Donc, si je vais là où se trouve le remplissage, il est là, et que je télécharge depuis un ordinateur, y mets l'image du produit. Recadrons-le encore une fois pour le mettre dans la bonne position. Comme ça. En fait, j'ai légèrement recadré le haut, alors laissez-moi le déplacer vers l' arrière. Au toucher, d'accord ? Ça a l'air plutôt bien. Comme vous pouvez le constater, cela ne changera aucune de nos autres instances. Mais si je devais aller ici et changer le prix du composant réel à 20, puis que nous regardions ici, vous verrez que toutes nos instances en obtiennent désormais 20. D'accord ? Je vais juste contrôler Z, le remettre à dix, puis je supprimerai cette image de produit en particulier ici parce que je n'ai pas les autres pour remplir les autres emplacements Il faut remettre ce remplissage D 9d9d9. OK. Dans la vidéo suivante, nous allons donc passer à la dernière section, celle du pied de page, puis nous passerons à la migration cette conception de bureau vers notre plus petite largeur d'écran de 390 pouces pour mobile 8. Créer comme un développeur - Partie 5: Très bien, passons maintenant à la dernière section de notre version ici, et c'est le pied de page Donc, encore une fois, je vais dupliquer ce modèle de section et l'activer, puis renommer la section en pied de page Et ce pied de page aura une couleur d'arrière-plan distincte pour une couleur d'arrière-plan distincte indiquer qu'il s'agit d'un pied de Je vais donc simplement l'ajouter maintenant. Je vais utiliser l'une de nos variables de couleur dans notre palette de couleurs. Je vais utiliser de l'argent. OK. Ça a l'air plutôt sympa. Renommez l'intérieur en pied de page intérieur et pour que cette section ait rembourrage cohérent en tant que dernière section et pour toutes les autres sections que nous créerons à l'avenir, je vais passer à la section, et je vais ajouter notre rembourrage supérieur et inférieur à base de rembourrage un rembourrage cohérent en tant que dernière section et pour toutes les autres sections que nous créerons à l'avenir, je vais passer à la section, et je vais ajouter notre rembourrage supérieur et inférieur à base de rembourrage de section. D'accord ? Génial. Maintenant, dans notre pied de page intérieur, nous pouvons ajouter ce que nous voulons ici Je vais donc réintroduire le logo, évidemment, bien trop grand, donc je vais le réduire à 113 , comme dans évidemment, bien trop grand, l' en-tête, et pour une raison ou une autre, il est sur le côté ici. intérieur de notre pied de page n'est pas encore en mise en page automatique, donc je vais le configurer, puis il ramènera notre logo OK. Ensuite, ce que je vais faire, ce sera un pied de page assez simple parce que c'est un site Web assez simple, comme vous pouvez le voir, je vais avoir un ensemble de menus sur la droite Pour cela, nous pouvons commencer par le bas ou monter ou nous pouvons commencer par le haut et descendre. Je vais donc commencer par le haut. Je vais ajouter un autre cadre ici. Celui-ci sera un menu de bas de page. Ensuite, je vais aller jusqu'à l'intérieur de mon pied de page, et je vais changer le flux horizontal et régler l' écart ici sur automatique Ensuite, dans mes menus de pied de page, qui vont être déplacés vers la droite, un autre cadre pour un menu de pied de page unique Je vais donc appeler ce menu de pied de page unique et le transformer en mise en page automatique Ensuite, dans le menu de la FDA, je vais ajouter du texte. Ce sera donc le titre de notre menu de la FDA. Je vais donc le mettre en boutique. J'aime l'audace. Au lieu d'utiliser Inter, même s'il s'agit de la même police, je vais utiliser la variable qui nous permettra de la modifier ultérieurement si nous le souhaitons. Ensuite, je vais appuyer sur la commande D pour la dupliquer et la remplacer par une police moins en gras, et nous n'allons pas utiliser de majuscules ici, et je vais mettre à nouveau la commande D pour femmes et pour les hommes. Voilà, notre premier menu. Nous pouvons modifier l'écart entre les articles, mais je suis content de dix. Maintenant, comme nous avons déjà tout configuré dans les mises en page automatiques, nous pouvons cliquer sur le menu du pied de page, dupliquer, puis nous obtenons un autre menu sur la droite D'accord ? Ce sera donc notre menu d'aide, le premier, la FAQ, le deuxième lien, les informations de livraison. Et comme vous pouvez le constater, comme nous l'avons conçu avec Flex, tout va se mettre en place automatiquement. La prochaine étape sera de faire un retour. Si vous vous demandez d'où je les ai trouvées, je me suis simplement inspirée d'autres sites Web, d'autres sites Web commerce électronique qui vendent produits similaires et j'ai simplement copié certains de leurs liens. D'accord ? Vous pouvez donc voir ici que nous avons un petit problème. Ceci est réglé sur une ligne au milieu. Ce n'est pas ce que nous voulons, alors changeons l'alignement. Voilà, pour que nos rubriques soient alignées. Ensuite, nous créerons un autre menu ici en le dupliquant et je qualifierai cela Il s'agira de nos politiques et termes et conditions, de confidentialité, de notre politique, de nos termes et conditions, puis nous supprimerons simplement celui-ci. D'accord. Voilà, nous l'avons. Nos menus vont s'agrandir pour remplir le contenu, mais je n'aime pas le fait que certains soient beaucoup plus grands que les autres. Je vais donc prendre la largeur de celui-ci, qui est de 172, et je vais juste faire en sorte que toutes ces largeurs minimales soient 172. Je vais donc ajouter ici 172, et sur l'autre ici, la largeur minimale 172. Ils seront donc au moins aussi volumineux que le menu d'aide. D'accord ? Donc, vous pouvez voir que nous avons un joli petit pied de page ici Et comme nous avons utilisé la mise en page automatique pour tout, permettez-moi de prendre les limites de notre cadre ici, redimensionner, et vous verrez qu'il fonctionne à partir de 769, ce qui était le minimum, jusqu' à de très grandes tailles d'écran Vous pouvez y voir le fonctionnement de notre pied de page. Je vais simplement étendre notre section pour couvrir cela. Et une autre chose que j'ai oubliée dans la dernière vidéo, c'est que les composants de notre carte produit sont réglés sur Auto loud. Nous n'avons donc pas réellement testé sa réactivité. Vous pouvez le voir ici. Oui, si nous le faisons très large, il est très peu probable qu'il soit aussi large, donc nous n'avons pas vraiment à nous inquiéter, même si nous voulons peut-être lui fixer un maximum, peut-être 450, pas plus de 450, et ça commence à avoir même si nous voulons peut-être lui fixer un maximum, peut-être 450, pas plus de 450, l'air bizarre Nous ne voudrions pas que ce soit plus que cela. Nous ne serons pas en mesure de le redimensionner plus grand que cela. Et puis, évidemment, si nous descendons ci-dessous, ce que c'est que 250, alors nous avons un certain chevauchement avec le nombre d'étoiles. Nous voulons donc également en faire une largeur minimale de 250, puis vous verrez que nous ne pouvons pas vraiment modifier le design de cette carte avec la largeur minimale et la largeur maximale et la mise en page automatique appliquées. Maintenant que notre affichage sur ordinateur est beau et réactif, passons à la version mobile dans la vidéo suivante. Et j'espère que nous pourrons migrer tout cela vers mobile en une seule leçon. Je te retrouverai donc dans le prochain. 9. Créer comme un développeur - Partie 6: Nous espérons que cette vidéo est la dernière de cette section sur le développement de notre design en tant que développeur Nous allons traduire ce design sur mobile. Maintenant, bien sûr, sur le Web, nous n'avons pas deux cadres différents. Ce que nous avons est un point de rupture. Et malheureusement, il est pratiquement impossible de faire fonctionner ce cadre de 320 à 768 pixels, par exemple. D'accord ? Nous aurons donc toujours besoin d'un cadre mobile. Et pour le cadre mobile, je vais faire la même chose que nous avons fait ici. Je ne veux pas que ce cadre mobile s'étende au-delà de 768, car nous voulons ensuite passer à la conception de notre ordinateur de bureau. Je vais donc définir un WIP maximum, mais je dois d'abord le transformer en une mise en page flexible Je vais donc simplement déplacer A pour le faire. Ensuite, je vais régler le M WIP je pense que le plus petit téléphone du marché mesure environ 320 Nous n'allons pas prendre en charge les téléphones de moins de 320, et nous leur donnerons un WIP maximum de 768 , comme nous en avons discuté D'accord, donc, j'ai défini la valeur réelle avec, pas les valeurs minimale et maximale. Alors c'était quoi ? C'était 32768 Nous avons donc les deux. Vous pouvez donc voir ici comment le design mobile devrait fonctionner de 320 à 768, d'accord ? Mais je vais le remettre à 390. C'est la taille de la toile que j'aime habituellement travailler. Et passons d'abord par notre en-tête. D'accord ? Donc, ce que je vais faire, c'est cliquer sur l'en-tête, cliquer sur Commande C pour copier, aller sur notre cadre mobile ici et appuyer sur Coller, et vous pouvez voir ici. Nous avons un peu de rembourrage général sur le cadre, nous voulons donc nous en débarrasser D'accord. Nous n'avons pas vraiment besoin de conteneurs sur mobile, mais gardons-les, car cela facilitera probablement la compréhension par l'IA. Et nous voulons avant tout que le logo soit plus petit. Comptons, peut-être, quelque chose comme la moitié de ces 75 pixels. On dirait qu'il y a un peu trop de rembourrage ici. Vous pouvez donc voir que nous avons un peu de rembourrage l'intérieur de l'en-tête et sur le conteneur Nous pouvons donc choisir le méchant. Je vais donc le supprimer pour l' intérieur de l'en-tête et peut-être aussi pour le conteneur. Utilisez le plus d'espace possible. Notre habitude courante en matière de développement Web est prendre ce menu ici, qui est assez large, surtout lorsque vous avez d'autres éléments de menu et de le transformer en icône de hamburger Je vais donc le supprimer complètement, puis je vais revenir à nouveau dans notre bibliothèque d'icônes et dire burger. Je crois que cela ne s'appelle pas hamburger, mais hamburger, mais nous le découvrirons bientôt Voici donc le menu des hamburgers. En fait, je ressemble à un hamburger, et voici le burger au menu, d'accord ? Quels sont ceux que nous avons ? Ouais. Donc, en gros , la même chose est droite ou arrondie. Je crois qu'il faut aller droit au but. Ouais. Ensuite, nous allons coller cette icône. Il suffit de le faire glisser dans la bonne position. Je vais donc le mettre avant le logo, comme vous pouvez le voir ici. Et comme nous avons un en-tête intérieur avec un espace automatique, il y a un espace indésirable entre l' icône du hamburger et le logo Je vais donc les regrouper. Maintenant, cela va créer une incohérence avec la version de bureau Je vais donc faire la même chose sur la version de bureau pour que cela reste cohérent pour l'IA. Je vais donc passer à notre version de bureau, et groupons-les également, activer la mise en page automatique, puis appeler cet en-tête à gauche Et puis je pourrais même vouloir que ces objets soient plus à gauche. Donc, pour l'en-tête gauche, je ne ferai pas de marge automatique. Je vais juste faire une ligne vers la gauche. On dirait qu' un rembourrage automatique est appliqué ici quelque part, ou du moins un rembourrage corrigé Donc, ce que je vais faire, c'est régler le bouton Avec ici pour inclure le contenu. Le menu est toujours en place. Pour comprendre pourquoi c'est le cas. On dirait qu'au lieu d'un rembourrage automatique, nous obtenons un écart automatique Nous allons donc régler l' écart de manière à ce qu'il ne soit pas automatique, mais dilatons-le, peut-être dix pixels, d'accord ? Maintenant, nous nous retrouvons face à gauche avec notre menu d'en-tête et notre logo sur la gauche sur le bureau, et nous avons également la même chose ici, et nous avons juste besoin de nous débarrasser de cet espacement automatique ici Comme vous pouvez le voir ici, il utilise le flux de forme libre. Je vais le régler à l'horizontale, puis je vais définir l'écart pour commencer par dix. OK. Je pense qu'il m'en faut un peu plus de dix. 20, disons, où nous dirigeons-nous dans l'en-tête gauche. OK, ça embrouille le contenu. Il est aligné au milieu. Il y a un écart de dix pixels. Peut-être allons-nous augmenter cela à 15 pixels. OK, cool. D'accord, c'est donc essentiellement notre en-tête. Donc, la prochaine chose que nous allons faire passer, c'est notre héros. Je vais donc attraper le héros en appuyant sur la commande C pour copier. Et puis, dans nos mises en page mobiles, je vais appuyer sur Coller, et vous pourrez le voir passé dans le même contenu L'image du héros pour mobile va être différente. Et il est assez courant dans le développement Web d'avoir différentes images de bannière en fonction la différence entre ordinateur de bureau et mobile. Je vais donc aller ici, et j'ai une version alternative, Hero Image pour mobile. Je vais donc le télécharger, et je vais également diminuer la hauteur de ce héros. On dirait que quelque chose a un minimum, ce qui est probablement hérité de la conception de l'ordinateur de bureau. Alors laissez-moi voir ce qui se passe ici. Hauteur réglée pour le remplissage. OK, ouais. Alors laisse-moi voir ici. Oui, nous avons une hauteur minimale de 900. Nous voulons absolument changer cela pour le mobile. Disons, peut-être une hauteur minimale de 500, puis nous réduirons la hauteur à 500. Et maintenant, vous pouvez voir que nos modèles sont davantage encadrés. Alors peut-être que je dis hauteur minimale 450, réduisez-le encore plus. OK, c'est un peu mieux. Et puis envoyez un texto ici. Nous ne voulons pas être aussi grands, évidemment Nous pouvons donc en mettre 36 pour la taille de police du titre, peut-être, laissons-le à 16, juste pour qu'il soit plus lisible. Ensuite, je vais réduire l'écart, peut-être simplement le supprimer complètement et faire la même chose entre le texte du héros et le bouton. Je vais donc faire peut-être cinq pixels. Nous avons du rembourrage en haut et en bas du 165. Supprimons cela et voyons ce qui se passe. OK, nous recevons notre texto tout en haut. Alignons simplement le centre pour obtenir cet alignement au milieu, et j'en suis plutôt content Très bien, alors section suivante, la section de la collection en vedette Je vais copier cela dans notre design mobile. En fait, avant de le faire, je vais régler la hauteur du cadre de notre mobile pour qu'il intègre le contenu. Le cadre sera donc aussi grand que le contenu qu'il contient, mais pas plus. Tu peux y aller. Ensuite, sur notre mobile, je vais coller notre collection en vedette, ce qui agrandira inévitablement le cadre de notre mobile. D'accord ? Vous pouvez maintenant voir que nous avons notre rembourrage de section, mais il est assez lourd avec 75 pixels Donc, ce que nous pouvons faire, c'est définir un rembourrage de section différent sur mobile Je vais donc supprimer cela, et jouons avec quelques nombres, tout d' abord, avant de définir la variable. À quoi ressemble 25 ans ? OK. Je pense que je veux en faire 35 juste pour avoir un peu plus de marge de manœuvre, d'accord ? Et puis dans les variables ici, je peux, si vous utilisez la version gratuite de Figma, vous devrez créer une autre variable, donc vous pouvez appeler cette section de rembourrage mobile, Réglez-le sur 35 ou sur le rembourrage de votre choix. Et puis, comme nous l'avons vu tout au long du cours, ajoutez-le ici. C'est vrai. Mais en fait, si vous êtes sur un serveur Deb, ce que nous verrons un peu plus tard lorsque nous parlerons du serveur MCP, vous pouvez créer différents modes pour le remplissage de vos sections Je ne vais donc pas le démontrer maintenant, mais plus tard, nous allons créer un mode distinct, d'accord ? J'aborderai cela dans une leçon ultérieure. Pour l'instant, faisons-le de la manière disponible gratuitement avec Figma Aucun abonnement payant Figma n' est requis pour effectuer cette approche. Il suffit de séparer le remplissage des sections en deux variables différentes pour les ordinateurs de bureau et les appareils mobiles OK. Maintenant, nous avons un petit espace blanc que nous devons régler. Laissez-moi voir ce qui s'y passe. Je pense que cela vient peut-être du cadre général. Vous pouvez voir ici qu'il y a une lacune. Nous ne voulons pas d'écart entre les sections, je vais donc le supprimer. Allons-y. De toute évidence, cette rubrique doit être beaucoup plus petite. Alors, disons, le 32, d'accord ? un peu trop d'écart entre les deux maintenant, donc je vais travailler là-dessus ensuite. Peut-être dix. OK, cool. Et si nous sommes satisfaits d'un contenant qui déborde horizontalement, nous pourrions le laisser comme ça, d'accord ? L'utilisateur peut ainsi accéder aux autres fiches produits de la collection. accord ? Voyons simplement dans quelle mesure cela est réactif jusqu'à présent. Tout utilise la mise en page automatique, donc ça devrait être plutôt bon accord, ça a l'air plutôt bien, sauf quand on commence à perdre de la place par ici. Je suis donc de très petites tailles d'écran. Nous pouvons donc soit créer un autre cadre, soit simplement pour le rendre plus flexible, mettre la police dessus. Je sais que j'ai dit que je le voulais à 16 ans, mais passons à 14 ans. Et en fait, le texte de notre bouton pourrait également être un peu plus petit . Je vais donc en faire 14. Maintenant, notre héros devrait fonctionner beaucoup mieux, quelle que soit la taille de l'écran 768-320 Certaines tailles d'écran présentent un petit problème d' expérience utilisateur, car l' utilisateur ne sait peut-être pas que vous pouvez faire défiler la page. Ici, vous pouvez voir qu' une fiche produit est coupée, ce qui devrait indiquer à l'utilisateur qu'il peut faire défiler la page vers une fiche produit est coupée, qui devrait indiquer à l'utilisateur qu'il peut faire la gauche et la droite. Mais ici, pas tant que ça, et il y a une collection de fonctionnalités recadrée Je ne vais pas essayer de corriger cette énigme, car il s'agit d'une amélioration mineure que nous pourrons apporter une fois que nous aurons trouvé le code Je vais donc laisser ça tel quel pour le moment. Mais dans l'ensemble, il est assez réactif. Et enfin, je vais mettre notre pied de page ici. Cliquez donc sur Commande C, passez sur notre cadre mobile, appuyez sur Commande V. Et ce que nous voulons faire ici, c'est modifier un peu les choses, évidemment Nous ne voulons pas utiliser le rembourrage de la section bureau. Nous voulons utiliser le rembourrage de la section mobile ici À quelle hauteur avons-nous placé le logo ? Il faisait 75 pixels. Alors faisons-le également ici. Où est Axis Whip 75 pixels. OK. Essayons de jouer avec certaines de ces options de flux ici. Peut-être que nous l'avons réglé à la verticale. En fait, l'un des problèmes auxquels nous sommes probablement confrontés est que ces menus en pied de page ont un minimum de fouet Nous voulons donc simplement supprimer ce minimum de fouets, Je ne pense pas que c'était le cas dans le dernier. Mais il ne semble pas y avoir assez d' espace horizontal pour tous ces pieds de page et ces menus. Alignez horizontalement. Je vais donc passer ici et régler le sens du flux à verticale et l' alignement à gauche. Et oui, je pense que j'en suis content, en fait. Ça n'a pas l'air trop mal. Voyons à quel point c'est réactif. Oui, fonctionne de 320 à 768. C'est donc plutôt bien. J'en suis plutôt content. Et c'est une indication suffisante, j'espère, de la manière dont nous voulons que les éléments notre page soient réorganisés pour les mobiles OK. Maintenant que nous avons fini concevoir notre design en tant que développeur, voyons comment nous pouvons réellement le transformer en code HTML et CSS réel. 10. De Figma à coder avec Locofy AI: Très bien, dans les dernières vidéos, nous avons abordé le développement de ce design réactif dans Figma Dans les deux prochaines vidéos, nous allons aborder deux méthodes pour générer du code HTML et CSS directement à partir de ce fichier FIGMA Maintenant, je vous encourage à créer votre propre design Figma, puis à suivre ce processus que je vais vous montrer dans cette vidéo et dans la suivante Mais si vous souhaitez copier mon design, je peux simplement le partager avec vous ici sur Skillshare afin que vous puissiez le tester sans nécessairement créer votre propre Mais je vous encourage à créer votre propre design. Il est important de mettre ces compétences en pratique si vous voulez vraiment apprendre Je vous encourage à créer votre propre design. Et comme nous allons parler du leader de la classe, je vous encourage à le télécharger sous forme projet de classe ici sur Skillshare Très bien, alors sans plus attendre, passons au processus de transformation de notre design Figma en HTML et CSS avec un plugin Figma appelé Locofy dans cette vidéo transformation de notre design Figma en HTML et CSS avec un plugin Figma appelé Locofy dans CSS avec un plugin Vous pouvez le voir ici parce que je l'ai déjà utilisé dans ma liste de plugins, j'ai Locofy ici Mais pour le reste d'entre vous, vous pouvez cliquer sur Actions ici et rechercher Locofy Vous pouvez filtrer jusqu'aux plugins et aux widgets. Comme vous pouvez le voir, cela apparaît déjà parce que c'est un plugin récent pour moi. Mais sinon, vous pouvez simplement rechercher Locofy puis cliquer sur ce plugin. Avant d'aller plus loin, je dois noter qu' entre les vidéos, j'ai mis à jour le nom de mon cadre afin qu'il comporte un tiret de page d'accueil au début, accueil pour ordinateur de bureau, une page d'accueil mobile. Cela aidera Locofy AI à identifier que ces deux cadres représentent la même page mais des points d'arrêt différents Voyons donc dans quelle mesure Locofy le fait maintenant. Avant de poursuivre, il est donc important de noter que résultats varient vraiment lorsque vous utilisez ces outils d'IA, qu'il s'agisse de Locofy ou du serveur MCP, que nous verrons un Même l'utilisation du même projet Figma avec la même invite peut produire des résultats incohérents Gardez donc cela à l'esprit, le résultat peut être incohérent. Donc, si vous comparez votre résultat avec le mien, ce ne sera souvent pas le même en raison de la variabilité aléatoire OK. Comme vous pouvez le voir ici, j'ai deux options. Je peux utiliser le classique ou le Lightning. Ce sont les deux options disponibles au moment de l'enregistrement. Et bien sûr, si vous ne vous êtes jamais inscrit à Locofy auparavant, vous devez créer compte gratuit ou un compte payant, peu importe ce que vous voulez en faire Je l'ai évidemment fait à l'avance. Mais maintenant que j'ai un compte chez Locofy, je n'ai évidemment pas à refaire ces étapes lors de l'embarquement Mais attention, si c'est la première fois, vous devrez passer par la configuration du compte, d'accord ? Devrait être totalement gratuit pour les besoins de ce cours Figma Vous n'avez pas vraiment besoin de plus de jetons que ce qu'ils fournissent dans le plan gratuit. Je vais donc cliquer ici pour convertir en code, et je vais sélectionner nos deux cadres de page d'accueil, et j'espère que Locofy AI détectera automatiquement qu' ils appartiennent à la même Je vais donc cliquer sur Convertir en images, et comme vous pouvez le constater, cela a fonctionné. Maintenant, il a du mal à trouver le cadre de la tablette ici. De toute évidence, il n'y a pas de cadre pour tablette. Donc, ce que je pourrais faire pour vous faciliter la tâche, c'est que nous voulons permettre à l'IA de faire son travail aussi facilement que possible. C'est ainsi que nous allons en tirer les meilleurs résultats. Je ne veux pas qu'il pense que le point d'arrêt mobile est 390 Donc, ce que je vais faire, c'est simplement dupliquer notre design mobile ici et renommer le doublon en tablette Je vais donc le faire glisser jusqu'à 768 au maximum et l' étiqueter comme tablette. OK. Il s'agit des mêmes éléments et du même contenu que le design mobile, mais nous indiquons simplement ici que tout doit être Évidemment, réactif. Nous voulons le même design à ces deux points de rupture. En gros, il n'y a qu'un seul point d'arrêt, c'est 768. OK ? Revenons donc à Locofy, appuyez sur Convertir en Ensuite, nous allons sélectionner les trois cadres relatifs à la page d'accueil. Et maintenant, vous devriez voir qu'il identifie correctement les différents points d'arrêt accord ? Je vais donc appuyer sur Confirmer, et maintenant Locofy va le faire Évidemment, cela va prendre un certain temps, je vais donc passer rapidement en revue certaines parties de ce document. C'est bon. Et maintenant, nous pouvons voir un aperçu dans l'application Locofy Je vais donc l' agrandir un peu si possible. On dirait que je ne peux pas l'agrandir si je ne passe pas en plein écran et ce n'est que pour le code. Bref, alors jetons-y un coup d'œil. Faisons défiler la page vers le bas. Ça m'a l'air plutôt bien, d'accord ? Il n'a pas identifié qu' s'agissait de liens, mais c'est exact. Nous pouvons l'ajouter nous-mêmes. Revenons à 960 et voyons ce qui se passe. OK, il y a un espace blanc sur la droite, et nous perdons en quelque sorte notre en-tête. Puis, une fois que nous arrivons à 768, nous commençons à voir le design de la tablette, et si nous passons à 420 ou 390. Il est intéressant de noter qu'à 390, cela fonctionne, mais on ne sait pas encore qu'à 4 h 20, nous voulons toujours ce design mobile Mais ce n'est pas nécessairement un gros problème. Le plus important, c'est que le code HTML a été créé correctement, car nous pouvons financer un peu le CSS, corriger de petites choses Mais si le HTML est un gâchis, nous devons refactoriser l'ensemble du projet Je vais donc jeter un œil à notre code ici ou moins au code généré par Locofy Il intègre des feuilles de style externes provenant de l'API de polices de Google, mais celles-ci seront probablement cassées lorsqu'elles arriveront , car la famille est définie sur un objet objet. C'est un bogue que j'ai remarqué dans Locofy. Jetons un coup d'œil à notre section du corps. Comme vous pouvez le voir ici, nous avons l'ensemble du bureau de la page d'accueil dans un div, puis nous avons notre en-tête. Nous avons notre conteneur, nous avons un en-tête intérieur. OK, c'est bon. En-tête gauche. OK, bien, entête droite. Et puis nous terminons avec cet en-tête. Passons au héros. Nous avons le héros. Conteneur de page d'accueil. Je ne sais pas pourquoi il s'agit d' conteneur ici et d'un conteneur de page d'accueil. J'aimerais qu'ils soient cohérents. Et c'est là que j'ai généralement rencontré des problèmes avec Locofy, comme vous pouvez le voir Ils ont deux versions différentes du héros HTML. Ils en ont un pour ordinateur de bureau et un pour mobile. Mais comme vous pouvez le voir ici, le contenu est dupliqué. Les noms des classes sont également un peu bizarres. Vous pouvez donc voir ici que nous avons ce que c'était un conteneur là-haut. Ensuite, nous avons le conteneur de la page d'accueil, puis le conteneur deux. Ils doivent tous porter le même nom, juste un conteneur. Et puis c'est un nom de classe assez étrange. Nous ne voulons pas vraiment nommer nos classes comme ça. Et si nous revenons ici, le conteneur 3, encore une fois, l'idée était simplement d'avoir une classe de conteneur centralisée. Nous pourrions intervenir et corriger les classes, corriger cette duplication de contenu. Mais dans la vidéo suivante, je vais vous montrer ce qui donne généralement de meilleurs résultats pour moi, d'accord ? Comme vous pouvez le constater, nous utilisons ici un élément de section pour la fiche produit. Je ne choisirais pas nécessairement un élément de section pour la fiche produit, mais comme vous pouvez le constater, la structure est cohérente entre les cartes Nous passons ensuite à notre FOOTA Nous avons le conteneur 4 FOOTA, que je préfère simplement être un conteneur parce que nous utilisons le même conteneur sur tout le site Web, puis intégrons à nos menus FODA illustrés Je n'utiliserais pas d'élément B. C'est assez dépassé en HTML et en CSS. Mais honnêtement, cela nous demande une grande partie de notre travail au départ. Je pense que nous pouvons peaufiner cela et obtenir un très bon résultat. Cela étant dit, j'ai trouvé un meilleur outil pour ce travail, que je vais aborder dans la prochaine vidéo. Donc, avant de passer à la méthode suivante, je vais simplement noter que la prochaine option sera une option payante. Nous aurons besoin d'un poste de développeur chez Figma à utiliser si vous n'avez aucun budget à dépenser, essayez peut-être Locofy et travaillez sur la correction du code de Locofy ou examinez Mais pour ceux d'entre vous qui ont au moins 15 dollars, je pense que c'est une maman à revendre. Voyons comment utiliser le serveur MCP dans la vidéo suivante 11. Coder de Figma à l'aide d'un curseur et du serveur MCP Figma: Bien, nous sommes donc de retour à notre projet dans Figma, mais vous remarquerez peut-être que l'interface est un peu différente, et c'est parce que nous utilisons actuellement version de bureau de l'application Figma Maintenant, les deux applications fonctionnent incroyablement bien. l'application de bureau et Pour moi, l'application de bureau et l'application Web ont exactement le même sentiment. Mais la raison pour laquelle j'ai ouvert le projet sur l'application de bureau est que cela est nécessaire pour exécuter un serveur MCP local OK, donc je vais voir ce que cela signifie dans une seconde. Mais tout d'abord, nous avons besoin de télécharger deux choses si vous ne les avez pas déjà. Premièrement, vous aurez besoin de la version de bureau de Figma Vous pouvez donc le trouver dans les téléchargements de Figma. J'utilise un Max, donc je vais cliquer sur celui-ci. Si vous utilisez Windows, vous allez évidemment cliquer sur celui-ci. Et puis aussi, je veux que vous téléchargiez Cursor. Vous pouvez utiliser un autre navigateur si vous ne souhaitez pas utiliser Cursor, mais les instructions d'installation du MCP seront légèrement différentes Donc, si vous voulez suivre exactement, vous devez utiliser Cursor. Sinon, si vous êtes habitué à installer MCP ou si vous souhaitez rechercher comment le faire dans un autre éditeur de code, n'hésitez pas à utiliser un autre éditeur de code Enfin, comme je l'ai mentionné à la fin de la dernière vidéo, juste pour vous faire savoir que si vous souhaitez utiliser le serveur MCP, vous aurez besoin d'un poste de développeur. Donc, si nous examinons les différents plans, si vous occupez le poste de développeur pendant un an, cela vous coûtera 12 dollars par mois. Par mois, c'est 15 dollars par mois, et comme vous pouvez le voir ici, nous en avons besoin pour utiliser le serveur MCP, d'accord ? Donc, si vous ne voulez pas essayer pendant au moins un mois, n'hésitez pas à sauter cette vidéo. Mais j'ai découvert que j'obtenais de meilleurs résultats en utilisant Cursor et le serveur Figma MCP. OK, donc ce que je vais faire, c'est évidemment que mon programme Figma est ouvert ici Mais ce que je n'ai pas encore, c'est un dossier pour insérer le code généré. Je vais donc ouvrir mon dossier Skillshare et appeler ce site Web Access D'accord. Ensuite, je vais aller sur Cursor et ouvrir ce dossier. Voici Cursor, il ressemble beaucoup au code Visual Studio, qui est l' éditeur de code habituel que j'utilise. Et pour connecter Cursor à Figma via le serveur MCP, nous allons accéder à l'élément de menu Cursor sur Mac. Il sera légèrement décalé de votre écran, mais une fois que j'aurai cliqué dessus, vous verrez que ce menu apparaît. Ensuite, nous allons passer aux paramètres. Ensuite, nous allons passer aux paramètres du curseur. Ensuite, nous allons chercher MCP sur la gauche, et vous pouvez voir que j'ai déjà configuré deux serveurs MCP Je vais donc les supprimer rapidement et le réinitialiser avec Figma OK, donc je les ai supprimés, et maintenant vous pouvez voir avec un fichier JCNFle vide, vous pouvez cliquer ici pour ajouter un MCP personnalisé, puis à l'intérieur de cet objet, nous allons ajouter, laissez-moi simplement zoomer ici, créer un peu plus d'espace Nous pouvons donc le voir clairement. Je vais taper le mot Figma avec un F. Et puis, à l'intérieur, vous pouvez voir la suggestion, l'URL, puis l'adresse du serveur MCP local Je vais appuyer sur Enregistrer à ce sujet. Maintenant, il est probable que Cursor l'ait déjà suggéré parce que c'est ce que j'avais fait auparavant. Donc, si vous vous demandez quelle est l'URL spécifiquement dans votre cas, je pense que c'est exactement la même chose, quel que soit l'utilisateur, mais lorsque vous activez le serveur MCP sur Figma, il vous donne l' Revenons donc à Figma. Nous allons cliquer sur ce que l'on appelle le menu Figma ici Nous allons passer aux préférences. Ensuite, nous allons nous assurer que l' option Activer le serveur MCP local est cochée Évidemment, je l' ai déjà activé, alors désactivons-le, puis revenons au menu, et je vais vous montrer comment cela fonctionne si vous ne l'avez pas encore activé. Je vais cliquer sur Activer le serveur MCP local. Il vous donnera en fait les instructions ici, que vous pouvez voir ici, nous pouvons l'appeler Figma ou Figma desktop et cela vous donnera le réglage des instructions Peut-être que je le copie simplement. Cela a en fait changé depuis la dernière fois que je l'ai fait. dernière fois, l'URL est apparue dans une petite info-bulle ici, puis je l'ai simplement copiée ici. Mais comme je l'ai dit, je ne pense pas que cette URL change un jour. Il s'agit d'une URL locale. Donc, si le serveur MCP est activé sur votre bureau pour Figma, il s'agit probablement de l'URL D'accord ? Si nous cliquons sur mcp point JCN, nous devrions maintenant être en mesure de voir si je fais un zoom arrière Figma Desktop est activé avec cette icône verte D'accord. Nous pouvons donc maintenant générer le code à partir de notre fichier Figma Donc, ce que je vais faire, c'est créer une invite ici. Je vais dire que dans mon fichier Figma, j'ai une section avec mes cadres pour la page d'accueil Et ce que je vais faire, c'est que je n'ai créé qu'une troisième version pour aider à localiser, donc je vais m'en débarrasser Et je vais juste le renommer. Au lieu du mobile, je vais dire qu'en fait, je vais le garder mobile, puis je vais simplement dire à Cursor que je le veux à un certain point d'arrêt. D'accord ? Donc, dans mon fichier Figma, permettez-moi de l'agrandir Dans la section Aber de mon fichier Figma contenant mes cadres pour la page d'accueil, le cadre de bureau de la page d'accueil a l'aspect et la mise en page souhaités ( 769 pixels et plus), et point mobile de la page d'accueil représente le design et la mise en page en dessous D'accord ? Veuillez me générer le code HTML et CSS pour cette page d'accueil, en réduisant au minimum le code HTML dupliqué. Maintenant, avant d'appuyer sur Entrée sur cette invite, j'ai écrit quelque chose de similaire dans Cursor en utilisant le même projet et j'ai obtenu un certain résultat. Mais comme je l'ai dit, les résultats peuvent varier. J'ai écrit certaines choses dans l'invite, comme le fait de réduire au maximum le code HTML dupliqué, à cause de ce que nous avons vu sur Locofy AI dans la vidéo précédente avec ce code HTML dupliqué pour la section des héros À moins que cela ne soit absolument nécessaire, nous ne voulons pas de code HTML dupliqué. Et tout ce que vous pouvez imaginer pour donner plus de contexte à l'IA ou pour l'aider à mieux comprendre les exigences, vous pouvez le mettre ici. Mais l'essentiel est que Cursor comprenne que les deux cadres représentent la même page, mais à des points d'arrêt différents Et ce que j'aime chez Cursor, d'ailleurs, c'est que je peux écrire c'est que je peux écrire exactement le point d'arrêt que je veux, ce qui n'est pas une fonctionnalité de Locofy D'accord ? Je vais donc appuyer sur ce bouton pour l'envoyer à l'agent et voir ce qu' il en sortira. Il se peut que nous devions cliquer plusieurs fois sur Exécuter ici. Je vais faire un petit zoom arrière, le faire glisser dessus. Continuez à cliquer sur Exécuter. Il s'agit de méthodes sur le serveur MCP lui-même. Je vais donc continuer à les approuver. Et évidemment, comme cela prend un peu de temps à l'application, je vais trop vite dans une grande partie de ce processus. Mm. OK, donc on dirait que c'est fait. Il nous fournit également de nombreuses informations sur ce qu'il fait. Vous pouvez donc voir un design réactif. Il possède un point d'arrêt, une structure HTML unique qui fonctionne à la fois pour les ordinateurs de bureau et les appareils mobiles. C'est ce que nous voulons. Classes CSS pour afficher et masquer des éléments en fonction de la taille de l'écran, composants réutilisables pour les fiches produits et menu de navigation. Parfait D'accord. Donc, d'après ce que nous lisons ici, cela semble plutôt bon. Je vais donc appuyer sur Keyball. Je n'ai aucun commentaire. Je n'ai évidemment pas examiné le code, mais vous pouvez évidemment nous vos commentaires sur le code qu'il génère. Au lieu de cela, je veux simplement exécuter ce code dans notre navigateur et voir le résultat. Faisons-le d'abord. Pour ce faire , je vais cliquer ici pour exécuter Live Server. agit d'un plugin, donc si vous ne l'avez pas actuellement, vous n'aurez qu'à accéder aux extensions, et si je regarde dans mes extensions ici, serveur en direct ici, c'est celui de RIT WIC Day Permettez-moi de faire un zoom arrière pour que vous puissiez voir la liste complète ou la majeure partie de celle-ci. Serveur en direct par RIT Wi Day. Avec cette carte, vous pouvez cliquer sur Go Live ici et maintenant nous avons notre site Web dans notre navigateur. Passons la souris sur les éléments de notre menu, et comme vous pouvez le voir, il y a un pointeur curseur, ce qui est correct C'est quelque chose que nous n'avions pas dans Locofy AI, et le bouton a un joli petit effet de survol Les fiches produits sont plutôt belles, mais elles ont un bord arrondi, qui n'est pas ce que j'ai défini, et un peu d'ombre. Le texte de la collection en vedette se trouve au milieu, pas à gauche, mais nous voudrions peut-être opter pour ce design à la place. Ça a l'air plutôt bien. Donc, sur cet écran, Whip, ça a l'air sacrément beau J'en suis plutôt content . Regardons la page Web telle qu'elle réagit aux différents coups d'écran. OK, plutôt bien. Comme vous pouvez le voir ici, sur le modèle 958, les cartes sont un peu écrasées Nous voudrions corriger un peu ce problème. Une fois que nous serons descendus en dessous de 768, nous aurons le menu Hamburger et les éléments du menu ici n'est pas ce que nous voulons vraiment, et les cartes s'empilent un peu bizarrement, mais c'est facile à corriger Redescendons à 390. D'accord. Et à l'exception de ce menu et de la position du menu Hamburger, ne se trouve pas sur la gauche du logo, cela semble plutôt correct, et vous pouvez voir qu' il a été décidé d'empiler nos fiches produits au lieu de les laisser déborder horizontalement D'accord ? Je suis donc assez impressionné par les erreurs que nous pouvons probablement facilement corriger. Vérifions-nous simplement que le code HTML a été bien écrit. Je vais donc passer au HTML à points d'index, puis peut-être le fermer ou essayer de créer un peu plus d' espace ici, de fermer le chat. Comme vous pouvez le voir ici, nous avons un lien vers l'API Google Font, qui fonctionne réellement, contrairement à l'exemple de Locofy Et si nous regardons l'en-tête, nous avons des couches qui imitent les noms nous avons définis dans notre Figma. C' est ce que je recherchais. Dirigez-vous donc vers notre conteneur centralisé, en-tête intérieur, tête de gauche, en-tête droit. Ça a l' air plutôt bien. Vous pouvez voir que nous avons une section ici, un ensemble de code HTML pour le héros. Il utilise la même classe de conteneur ici, et c'est exactement ce que nous voulons. Il utilise cette classe de conteneur sur toute notre page Web. Parfait Il n'utilise pas de section pour la fiche produit, ce qui est un petit détail, mais je pense quand même que c'est beaucoup plus intelligent. Faites défiler l'écran vers le bas pour voir le pied de page. Encore une fois, cette classe de conteneur que nous avons pour toute la page, et je suis plutôt content de ce code HTML. D'accord ? La seule chose que nous devrons corriger c' est qu'il diffuse actuellement ces images via Figma Il nous suffit donc de déplacer les images soit dans le dossier ici, soit dans une adresse autre que notre adresse locale car nous ne pouvions pas les publier sur le Web car il s'agit d'une version locale du serveur Figma D'accord. Mais tout bien considéré, je suis vraiment content de ce résultat. Et puis, dans la vidéo suivante, nettoyons un peu notre code, ce qui ne devrait pas demander trop de travail, étant donné que l'IA a fait un excellent travail en générant automatiquement le code. Je vais vous montrer que les modes variables incluent Figma, puis nous terminerons le cours Je te verrai donc dans le prochain. 12. Nettoyage du code final: Bien, dans la dernière vidéo, en utilisant le serveur MCP Figma et le cogénérateur Cursor, compatible avec l'IA, nous avons pu créer notre page Web avec une structure HTML et des noms de classes appropriés, ainsi que le CSS pour qu'elle fonctionne sur toutes les tailles d'écran, I E pour être réactive, mais ce n'est pas le cas serveur MCP Figma et le cogénérateur Cursor, compatible avec l'IA, nous avons pu créer notre page Web avec une structure HTML et des noms de classes appropriés, ainsi que le CSS pour qu'elle fonctionne sur toutes les tailles d'écran, I E pour être réactive, à 100 % Nous ne pouvons pas simplement prendre ce résultat et l'expédier directement. Nous devons apporter quelques modifications. Mais je pense que vous conviendrez avec moi que IA a fait un très bon travail. Il nous suffit de faire les derniers, disons, 10 % de raffinement pour améliorer ce design. D'accord. Donc, si nous considérons qu'il s' agit du plus grand écran, mais peut-être que si je le simule sur un écran beaucoup plus grand, je me demande si nous pouvons augmenter le nombre pour voir ce que c'est sur 4 000. OK, cool. Vous pouvez donc voir que c' est un écran improbable, mais c'est tout de même possible. Et le seul problème que je vois sur ce fouet d'écran, ce sont les visages des modèles Rappelez-vous que j'ai dit plus tôt lorsque nous ajoutions le remplissage d'arrière-plan, que ce serait bien de contrôler le positionnement, le point d'ancrage de l'image d'arrière-plan. Nous pouvons donc le faire dans le HTML et le CSS. Cliquons sur notre section consacrée aux héros ici. Voyons comment ils ont inclus l'image. Oui, ils l'ont donc juste mise comme image de fond sur l'élément via le CSS. Et pour que nous ne nous fiions pas serveurs Figma MCP, je vais déplacer ces fichiers d'actifs et les refactoriser Mais avant tout, je veux changer la position de fond. Désolée Tout est un peu serré ici. Et comme vous pouvez le voir, lorsque je passe la souris dessus, tout l'espace est rempli Mais en gros, ce que nous recherchons , c'est une position de fond ici. Et au lieu d'être au centre, je veux que ce soit au sommet. Maintenant, ça a l'air un peu bizarre parce que son menton est un peu coupé. Peut-être voulons-nous définir un autre point de rupture et, sur de très grandes tailles d'écran, peut-être augmenter encore la hauteur de la section. Je vais donc utiliser mes outils de développement ici pour obtenir une hauteur plus grande, peut-être pas 12. Cent, mais 1 000 pixels peut-être que je regarde l'en-tête, qui mesure 98 pixels de haut, et je le fais s'étendre jusqu'au bas du pli. Je peux donc le faire en faisant Cuk 100 % de hauteur de la fenêtre d' affichage moins ce que c' était encore une fois, 98 D'accord. D'accord. Est-ce que je vais retourner dans Cursor. Allez à la fin de notre fichier CSS ici, saisissez la largeur minimale du média, et disons 1 500 pour commencer. Le sélecteur est Hero, et nous allons régler la hauteur sur Calk 100, hauteur de la fenêtre d'affichage D'accord ? Ensuite, nous allons modifier la position d'arrière-plan en haut, non pas dans une requête multimédia, mais simplement en général. Nous allons donc chercher un héros. Au lieu du centre de position d'arrière-plan, remplacez-le par le haut. D'accord. Ça a l'air un peu mieux. Mais au lieu du top, nous pouvons choisir quelque chose d'un peu plus ciblé, c'est-à-dire mettre en arrière-plan, nous avons perdu notre attribut ici. Permettez-moi de le faire directement dans le code ici. Au lieu du haut, je vais prendre la position de fond Y. Ensuite, j'y mettrai environ 5 %. C'est bon. Jouons avec ça, afin de pouvoir faire 5 %, c'est à peu près ça, ce qui le fait monter légèrement par rapport au sommet, comme vous pouvez le voir ici. 5 % réduisent un peu l'espace au-dessus de la tête du gars. D'accord, réduisons donc la largeur de notre écran. N'oubliez pas que nous l'avons fixé à 1 500. Donc, si nous descendons à 1 500, tout devrait fonctionner pour nous. En fait, nous devons également définir notre position d' arrière-plan X, car comme vous pouvez le voir ici, elle n'est pas centrée. Nous allons donc rétablir notre position centrale sur l'axe horizontal, comme tel. OK, super. Et puis une fois qu' il sera inférieur à 1 500, vous verrez que la hauteur n' est pas aussi grande, n'est-ce pas ? Donc, jusqu'à 1 200, je pense que tout va bien. Je suis d' accord avec ça. Si nous voulions que nos cartes ressemblent davantage au dessin original sans le rayon de bordure, si nous voulions supprimer l'état des sabots et les ombres, nous pourrions le faire Mais je suis plutôt d'accord avec ça. La seule chose qui me pose problème c'est qu'ils sont assez grands, donc je ne sais pas si je le veux. Permettez-moi donc de supprimer le mode réactif et toutes mes excuses pour le fait que ce soit très serré ici Et voyons ce qui fait que c'est comme ça. Si vous regardez notre conteneur, il ne mesure que 847 pixels de large en raison de son énorme rembourrage. D'accord. Donc, en ce qui concerne la catégorie des conteneurs, un rembourrage géant a été installé, qui n'est pas ce que nous recherchons Je crois en la Figma, nous avons réglé le rembourrage du conteneur à 16 Donc en fait, pour une raison ou une autre, cela ne me permettra pas de le changer. Mais revenons à notre code ici, trouvons un conteneur. Et puis je pense que si nous le cherchons à nouveau, vous pouvez voir qu'il a un rembourrage de 16 pixels, mais seulement jusqu'à 480 pixels ici Nous pouvons donc simplement le supprimer complètement. concerne les styles de bureau présentés ici, puis ceux qui sont inférieurs à 480, En ce qui concerne les styles de bureau présentés ici, puis ceux qui sont inférieurs à 480, nous pouvons également les supprimer, car ils simplement redondants et nous nous en tiendrons à un rembourrage de 16 pixels de chaque côté Maintenant, si on y jette un œil, ils ne sont pas si écrasés, c'est assez facile à réparer. C'est bon. Alors vérifions à nouveau la taille de nos écrans super larges, à quoi ça ressemble ? Composons 4 000. Cool. J'en suis content. Si nous descendons à 1 200, j'en suis plutôt content. Redescendons à 1 000. Cool, cool. C'est bon. Nous sommes donc probablement là où nous en sommes ici. Donc c'est 1030. Abaissons-le, le bas, le bas, le bas. Je pense que c'est un peu serré ici. Nous souhaiterons peut-être définir un point d'arrêt compris entre 10 000 et le point d'arrêt mobile Peut-être voulons-nous le diviser en une grille différente, peut-être une grille deux par deux comme celle-ci. Et puis les fiches produits changent leur largeur maximale, donc ça ressemble un peu à ça. Oui, c'est ce que je fais. Créons un point de rupture à la fin de notre fichier CSS ici. Min avec 769 pixels, et Max avec 10 000. Et qu'est-ce qu'on a alors ? Nous allons supprimer la largeur maximale de la fiche produit, disons 100 %, et la grille des produits. En fait, je vais juste le copier. Cela me fait gagner du temps en écrivant ceci , en le mettant à deux, même écart qu'avant. Alors maintenant, vous pouvez voir qu'une fois que nous aurons terminé, j'ai peut-être mis trop de zéros à ce paramètre. Allons-y. Une fois que nous aurons dépassé les 10 000, nous en aurons quatre horizontalement. Mais une fois arrivés ici, vous verrez que nous avons une grille de quatre. Et cela devrait donc convenir à toutes les tailles d'écran de nos ordinateurs de bureau. Donc, de 769 à très gros, en avons testé jusqu'à 4 000 Jetons maintenant un coup d'œil à ce qui suit : 769. Et comme vous pouvez le constater, nous avons du travail à faire ici. Nous ne voulons donc plus que ce menu apparaisse. Donc, il est dit « ordinateur de bureau uniquement », ce qui est intéressant. Et il a une classe qui est configurée pour n'en afficher aucune. Mais ensuite, bien sûr, il est remplacé ici par cette autre classe Il y a certaines choses que nous pouvons faire. Nous pourrions mettre l'accent sur ce point. Nous pourrions modifier la commande. Étant donné qu'il est indiqué uniquement pour ordinateur de bureau, je peux bien définir ces deux éléments importants , car il s'agit d'un nom de classe assez spécifique. D'habitude, il faut faire attention à l'importance, mais si je place le bureau de la classe uniquement sur quelque chose, il est presque certain que je ne veux pas que cela apparaisse. D'accord. Maintenant, l'autre point dans l'en-tête est que le menu mobile se trouve sur la droite. Je ne sais pas comment l' IA s'est trompée. Cela ne faisait pas du tout partie de la conception, mais nous pouvons simplement accéder à notre fichier d' index ici et le déplacer directement de la tête de droite à l'en-tête de gauche. D'accord ? Oups, créez l'espace là, mettez-le dedans, et vous verrez qu'il est dans la tête ou dans la gauche L'alignement semble un peu bizarre. Elles sont configurées pour aligner les éléments au centre, mais parfois les icônes ont une hauteur un peu étrange. Comme vous pouvez le voir ici, le bouton est un peu plus gros que le SVG qu'il contient Il existe plusieurs moyens de résoudre ce problème. L'une d'elles consiste à y mettre Display Flex. Je vois. Mobile uniquement, Block Important nous bloque. Donc oui, je n'utiliserai Important que lorsque nous parlons de ne rien afficher, puis je mettrai Display Flex ici avec éléments d' alignement définis pour qu'ils soient centrés sur le bouton lui-même, et vous pouvez voir qu'avec cela activé, cela le déplace en quelque sorte en position. Je vais donc passer à Menu Toggle ici, point Menu Toggle. Et comme vous pouvez le voir ici, plutôt que d'essayer de créer tout ce code HTML et CSS à partir du design, j'utilise l'IA pour réduire environ 80 % du travail, puis je suis capable de l'affiner avec un peu de nettoyage du code, d'accord ? Ils s'empilent donc déjà les uns sur les autres, ce qui, à mon avis, n' est pas la bonne solution. Découvrons donc notre classe de grille de produits ici. Et il est indiqué qu'en dessous de 768, nous voulons que ce soit une colonne. Ne faisons pas ça. Donnons-lui deux colonnes. Mais au fur et à mesure que nous arrivons à des tailles d'écran encore plus petites, nous voulons probablement qu'ils s' empilent sur une seule colonne, d'accord ? Et puis la carte produit Max WIP en fait, nous pouvons probablement simplement supprimer complètement le maximum avec n'importe quelle taille d'écran Désolé, laissez-moi le retrouver car la largeur maximale devrait être limitée toute façon par le conteneur contenant, l'espace disponible sur de très grands écrans. Donc, il suffit de vérifier cela. Revenons à 4 000, et vous verrez que les cartes ne dépassent pas vraiment 280 WIP de toute façon, car il y en a quatre d'affilée et elles se trouvent dans un conteneur Max WIP D'accord. Alors revenons à, disons, 650. Ça a l' air plutôt bien. D'accord. Passons ensuite au fait que je vais utiliser le mode réactif ici pour me connecter. Téléphone 12 Pro. Et comme vous pouvez le voir ici, ces fiches produits sont un peu trop hautes. Je pense donc qu'à cette largeur, nous allons vouloir une seule colonne. Comme vous pouvez le voir ici, il existe déjà un point de rupture pour 480. Donc, avant la fiche produit, je vais mettre un sélecteur ici pour la grille des produits et définir les colonnes du modèle de grille sur un FR Cool. J'aime bien ça sur mobile. D'accord. Alors voilà, les gars. Il est maintenant pratiquement ininterrompu, mais il n'est pas particulièrement fonctionnel et ces boutons ne font rien vraiment Il est donc évident que nous devrions le concevoir et le construire. Nous pouvons définir le curseur pour qu'il pointe sur ces cartes. ce que je vais faire Réglez donc le curseur sur le pointeur. Et maintenant, cela indique que si je clique sur ces cartes, je vais accéder au produit individuel. Si nous voulions aller plus loin, nous pouvons toujours utiliser l'IA avec Cursor, sans design Figma ou avec un design Figma si nous devions entrer ici et créer notre menu latéral et notre Nous pourrions le faire avec Figma , puis y faire référence dans un message. Mais disons simplement que nous ne construisons pas le design. Nous pouvons toujours demander à Cursor de le créer pour nous. Nous devons donc ramener notre agent Cursor. Je vais appuyer sur la commande I pour le faire, et cela fera à nouveau apparaître une discussion. Et ce que je vais faire, c'est m'assurer de connaître la classe exacte du bouton de menu. Je vais copier ça et je dirais que sur mobile, je suis en dessous de 769 pixels. Lorsque l'utilisateur clique sur, je veux qu'un tiroir de la barre latérale apparaisse par la gauche avec les mêmes éléments de menu, car il vaut mieux être très précis Si vous utilisez des classes réelles issues du code HTML, cela vous donnera le meilleur résultat. Je vais donc trouver le menu d'en-tête sous forme de menu d'en-tête à points. D'accord ? Sur mobile, lorsque l' utilisateur clique sur cette classe, je souhaite qu'un tiroir de la barre latérale apparaisse par la gauche avec les mêmes éléments de menu que cet élément en particulier D'accord ? Si vous avez d'autres exigences, si vous êtes vraiment doué pour décrire ce que vous voulez, en particulier, vous pouvez ajouter plus de détails, mais je vais juste appuyer sur Entrée pour voir ce que propose Cursor. Comme vous pouvez le constater, il passe en revue une liste de deux à deux et met à jour notre code. Si nous avions un design Figma pour le tiroir, mettrais à jour cette invite pour dire «   Infigma, nous avons conçu le Veuillez suivre ce design. Dans ce cas, ce n'est pas le cas, nous laissons Cursor décider du design pour nous. Et je vais juste cliquer sur Garder A. Et maintenant, jetons un coup d'œil. Si nous regardons notre design sur mobile et que je clique sur l'élément de menu ici. Il a en fait fait un très bon travail. Je suis impressionné. Voilà. Nous avons donc les mêmes éléments de menu que sur ordinateur. Oh, et maintenant nous les avons perdus. Découvrons donc où ils sont allés. Ordinateur de bureau uniquement, ce n'est pas important. Desktop Only n'était même pas en panne. Donc, au lieu de l'avoir comme ça, je préfèrerais que ce soit l'inverse. Donc, de bureau uniquement à Media Max WIP, nous avons probablement déjà une requête multimédia à ce sujet Donc, au lieu de cela, trouvez la requête multimédia pour Max WIP 768 et mettez-y uniquement l'affichage des neuf points importants sur le bureau D'accord. Vous pouvez donc voir que nous avons notre menu de bureau, et sur mobile, qui se résume à cette icône de hamburger Nous cliquons dessus et nous avons les mêmes éléments de menu ici. D'accord ? Nous pouvons également créer un tiroir de la même manière en utilisant l'IA pour le chariot. Mais évidemment, nous devrons créer de nombreuses fonctionnalités JavaScript pour que cela fonctionne. Et beaucoup plus de logique dépend de la plateforme que vous utilisez. Mais oui, je suis plutôt content de ce résultat. J'enregistre cette vidéo depuis 15 à 20 minutes, et nous sommes en mesure de prendre le résultat généré par l'IA et de le faire ressembler à ceci, totalement adapté aux mobiles avec un tiroir de barre latérale pour le menu mobile Je vous encourage donc à, une fois que vous aurez généré le code pour votre propre projet, à nettoyer le code HTML et CSS et à partager avec nous le résultat dans la section des projets de classe de cette classe. 13. Modes variables Figma: Bien, dans cette dernière vidéo, avant de terminer avec la conclusion, je reviens à Figma, et la raison en est que je veux vous montrer une fonctionnalité intéressante, Figma, qui correspond à ce que nous faisons et que je vous recommande d'utiliser, mais elle nécessite le poste de développeur ou supérieur Figma, mais elle nécessite le poste de développeur ou supérieur Figma, qui signifie que c'est C'est pourquoi je ne vous l' ai pas montré plus tôt. Mais maintenant que nous avons examiné le MCP et démontré que ce qui nécessite une configuration de développement ou supérieure, je me suis dit que si vous avez décidé de passer à un plan payant avec Figma, vous devriez utiliser OK ? J'y ai donc fait allusion plus tôt lorsque nous avons configuré nos variables Mais si nous revenons à nos variables ici et que je passe à la taille, vous pouvez voir que j' ai un rembourrage de section et un rembourrage de section mobile C'est le cas d'utilisation idéal pour un mode. Est-il judicieux d'en avoir deux différents alors que seul le mode change ? OK ? Donc, ce que je vais faire, c'est cliquer sur ce bouton ici pour créer un nouveau mode variable. Et voyons si je peux étendre cela. Nous y voilà. Nous pouvons donc voir les deux modes en même temps. Et au lieu du mode 1 et du mode 2, je vais dire « desktop default », puis je vais en créer un pour mobile. OK ? Pour la largeur de page et le remplissage des pages, nous avons les mêmes valeurs, qu' il s' agisse d'un ordinateur de bureau ou d'un appareil mobile Nous pouvons toujours modifier cela si nous le voulons, mais vous pouvez voir ici qu'en ce qui concerne le rembourrage des sections, nous avons évidemment une différence Je vais donc régler le remplissage des sections sur 35 en mode mobile, qui me permettra de supprimer cette variable ici, d'accord ? Maintenant, cela va me permettre d'utiliser la même variable sur ordinateur de bureau et mobile, mais ensuite changer le mode général du cadre parent pour modifier cette variable. OK ? Voyons donc comment cela fonctionne si je passe maintenant à la conception de mon mobile. Nous devrions voir un rembourrage à section fixe de 35. Vous voyez ici que c'est un peu grisé et déconnecté parce que nous avons supprimé cette variable Si je vais ici et que je le configure simplement sur le rembourrage des sections, ce sera égal à ce rembourrage de section plus grand sur le bureau, mais nous corrigerons ce problème en une seconde Je vais donc régler cela sur le rembourrage en sections. Maintenant, pour qu'il réponde à un mode différent, nous devons indiquer dans quel mode ce cadre doit fonctionner. Donc, si je clique sur le cadre mobile de ma page d'accueil et que je passe ici pour apparaître, vous pouvez voir cette icône ici, appliquer le mode variable. Nous allons donc cliquer dessus, passer au dimensionnement et cliquer sur Mobile Maintenant, vous pouvez voir si je vais ici et si nous passons à notre section, le rembourrage est ici, il y en a 35 là-bas, mais ici, il y en a 75 Donc, évidemment, nous n'avons pas eu à définir de mode sur la version de bureau, mais faisons-le simplement pour des raisons d'exhaustivité car la première option passe automatiquement à la première option Si nous voulons que ce soit précis, nous pouvons entrer et définir le mode de ce cadre sur le mode par défaut du bureau, et vous pouvez voir le mode apparaître ici. Et ce n'est qu'un exemple basique d'utilisation des modes. Laisse-moi te montrer quelque chose de cool maintenant. Je ne sais pas comment décrire cela, donc je vais juste le montrer mais nous pourrions définir, par exemple, la taille du texte du bouton sur ordinateur et mobile comme une variable , puis la modifier en fonction du mode. Comme vous pouvez le voir, c'est 20 sur ordinateur et 14 sur mobile. Au lieu de l'avoir sous forme de deux valeurs différentes, ce que je peux faire pour le rendre plus automatique, et encore une fois, c'est facultatif. Nous avons tout de même obtenu un bon résultat avec la génération de code AI sans cela. Mais si vous vouliez aller encore plus loin, si je devais entrer ici et créer la taille du texte des boutons. Et puis le premier sur ordinateur de bureau en avait 20, n'est-ce pas ? 20 ans, je crois, et l'autre en avait 14. Donc, ce que nous pouvons faire maintenant, c'est que je peux aller ici, modifier cela pour utiliser une variable à la place. Il me suffit donc de faire défiler la page vers le bas, cliquer sur cette icône pour la variable, choisir la taille du texte du bouton. Cela le mettra automatiquement à 20 car le mode du cadre parent est bureau. Et si je vais ici, que je fais la même chose sur la version mobile, change la taille du texte du bouton, ce sera 14. Et le plus cool, c'est que si je devais dupliquer ce composant, en fait, nous voudrions probablement définir le texte du bouton sur le composant parent lui-même Je vais donc le faire maintenant, taille du texte du bouton, non ? Alors maintenant, si nous devions dupliquer ce bouton, et j'espère que cela sera visuellement évident lorsque je le ferai. Mais si je fais glisser cet élément d'ici à là, nous pouvons constater un changement instantané d' une taille d'écran à l'autre. OK ? Ce n'est donc qu'un petit mot sur les modes. Nous pourrions en fait prendre tout notre en-tête et refactoriser une grande partie de ce contenu pour en faire des variables, définir un mode distinct pour ces variables, puis faire glisser la section dans l'autre cadre, et elle se transformera automatiquement en design mobile Mais cela n'est pas nécessairement nécessaire pour obtenir un excellent résultat avec notre génération de code AI. Les modes ne sont pas quelque chose de natif dans HMLCSS, mais simplement quelque chose qui rend nos variables un peu plus organisées Par exemple, le fait d'avoir deux sections qui sont essentiellement identiques, mais pour des tailles d'écran différentes, d' avoir le même nom pour les deux modes, mais de simplement changer la valeur en fonction du mode est un peu plus clair du point mais pour des tailles d'écran différentes, avoir le même nom pour les deux modes, mais de simplement changer la valeur en fonction du mode est un peu plus clair du de vue d'un projet FIGMA OK. Une fois ce petit conseil passé, concluons dans la vidéo suivante et parlons de votre projet de classe. 14. Conclusion et projet de cours: Ceci conclut ce cours sur le design Web Figma pour les développeurs Web Pour votre projet de classe, je vous encourage à créer votre première Figma de conception Web utilisant les techniques que nous avons abordées dans ce cours, configurant votre mise en page avec une mise en page automatique et des composants, nommant correctement vos couches et en préparant vos conceptions afin qu'elles puissent être transformées en code avec l'un des outils d'IA que nous avons explorés dans le Lorsque vous avez terminé votre design, téléchargez-le dans la section des projets de classe pour partager votre travail avec d'autres étudiants ou pour obtenir des commentaires de ma part personnellement. Si vous avez apprécié ce cours, assurez-vous de laisser un commentaire positif et de consulter mes autres cours ici sur skillshare.com, où je me penche plus en profondeur sur le développement Web, Shopify et d'autres outils Merci, comme toujours, de votre attention, et à la prochaine.