Maîtriser Figma en 2025 : conception d'applications Web et mobiles à partir de zéro

1. Promo du cours: Non , oui. Salut, designers. Bienvenue à la master class de Figma. Votre guide étape par étape pour maîtriser Figma et améliorer vos compétences en design Lorsque j'ai commencé à utiliser Figma il y a de nombreuses années, je ne savais pas comment optimiser tous les outils proposés, et il me fallait parfois heures pour concevoir une simple page Après de nombreuses heures passées à regarder des tutoriels, à m'occuper de la configuration, expérimenter et à affiner mes compétences, j'ai regroupé le tout dans un seul cours avec les dernières mises à jour et fonctionnalités de Figma Nima Tahami. Je suis votre professeur pour ce cours. Au cours des 12 dernières années, j'ai développé et conçu des dizaines de produits à succès. En cours de route, j'ai également eu la chance d'enseigner à plus de 15 000 designers, les aidant ainsi à travailler plus intelligemment dans FigMA et non plus dur Dans ce cours, nous allons maintenant concevoir une application de réservation de voyages du début à la fin. Vous apprendrez à créer des composants, à tirer parti de la mise en page automatique, voire à maîtriser les variables et fonctionnalités de prototypage pour une application complète. Au fait, nous utiliserons Figma AI pour nous aider à générer les premiers brouillons, images, textes, ce qui nous facilitera un peu la conception À la fin de ce cours, vous connaîtrez les tenants et les aboutissants de FGMagting et acquerrez les compétences nécessaires pour concevoir plus rapidement et livrer des conceptions en toute confiance aux membres de votre équipe, à vos clients, etc. clients, Ce cours s'adresse aux concepteurs qui cherchent à se développer, ceux qui se lancent dans la conception de produits ou à ceux qui cherchent à affiner leur métier et à concevoir plus rapidement et plus intelligemment. Donc, si cela vous ressemble, alors lancez-vous et je vous verrai dans le cours. 2. Introduction: Bonjour. Bienvenue dans le cours. Vous avez franchi une étape importante aujourd'hui pour passer au niveau supérieur de votre carrière de designer en améliorant vos compétences en matière de Figma, et je ne peux pas exprimer à quel point je suis heureuse de vous avoir dans ce cours Tout au long de ce cours, vous découvrirez les fonctionnalités les plus récentes de FiGMA, notamment les trois interfaces utilisateur, FGM AI et tous les autres outils déjà proposés, tels que les composants, la mise en page automatique, les variables, prototypage avancé, etc. Afin d'apprendre ces outils et concepts, nous les mettrons en pratique tout élaborant une véritable application Web et mobile. Cette application est une application de réservation de voyages appelée Wander wise. C'est un client fictif, mais c'est très intéressant et vous pourrez certainement l'intégrer à votre portefeuille après ce cours. En suivant les étapes de ce cours, d'abord, nous allons commencer par les bases. Maintenant, je recommande à tout le monde de passer en revue cela, même si vous connaissez Figma, juste pour peaufiner les petits détails que vous ne connaissez peut-être pas sur les nouvelles fonctionnalités de l'interface utilisateur Nous passerons ensuite au wireframing. Nous utiliserons donc un iPad, stylo et du papier ou même Figma elle-même pour créer des wireframes pour les écrans Passons à la mise en place d'un système de conception, à l'utilisation des variables, style des couleurs et aux polices Nous passerons ensuite à la création de nos premières maquettes dans Figma, conception de notre flux de réservation complet de bout en bout, de inscription à la finalisation d'une réservation sur l'application de voyage Nous créerons une version mobile et apprendrons à créer des designs réactifs avant de nous lancer dans la construction de votre prototype. Ensuite, nous allons utiliser notre prototype, rendre plus avancé avec des variables, des animations intelligentes, etc., afin que vous puissiez le partager avec vos amis et collègues et leur montrer à quel point l'application que vous avez créée est géniale. Notre dernière section explique comment travailler plus intelligemment dans Figma et mieux collaborer avec les membres de l'équipe Cela dit, commençons par bases de Figma et partons de là 3. Pour commencer: Rendez-vous sur figma.com pour créer un compte si vous n'en avez pas déjà Allez-y et connectez-vous ou si vous êtes déjà connecté, vous devriez alors être redirigé vers votre page d'accueil qui pourrait ressembler à ceci. Vous vous trouvez peut-être maintenant dans le dossier Resents ou dans le dossier Brouillons. C'est très bien. À partir de là, vous pouvez explorer vos fichiers. Maintenant, une chose que je recommande est que si vous aimez utiliser des applications de bureau sur votre ordinateur, vous pouvez continuer et cliquer sur Obtenir l'application de bureau dans le menu ci-dessus. Pour le reste du cours, j'utiliserai l'application de bureau de Figma C'est à peu près identique. Il n'y a pas de grande différence entre eux. Cependant, lorsque vous avez l'application de bureau, certaines options sont accessibles via le menu en haut. Si vous préférez continuer avec Desktop, allez-y, faites une pause ici, téléchargez cette application. Sinon, n'hésitez pas à continuer dans le navigateur. En commençant par le haut, vous voyez votre profil où vous pouvez vous connecter à plusieurs comptes. Vous voyez ici une cloche de notification qui vous montre toutes les activités qui se produisent dans vos fichiers. Nous commençons généralement dans le dossier des brouillons lorsque nous commençons de nouveaux projets, et vous pouvez créer un nouveau projet en cliquant sur Créer un nouveau ici Maintenant, si vous cliquez sur la flèche vers le bas, vous pouvez créer un autre type de projet. Si vous travaillez sur un Jamboard FIC ou un diaporama, vous pouvez également le faire à partir d'ici Si vous importez à partir d'un fichier FIC à points que vous possédez ou même d'un croquis, vous pouvez également l'importer en cliquant ici. Il vous demandera de déposer tous les fichiers d'esquisse, images, PDF, etc. pour les ajouter à vos brouillons Vous pouvez organiser vos fichiers différemment en les affichant sous forme de liste ou de grilles. Personnellement, je préfère un peu l' option grille. Et sur le côté gauche, vous pouvez voir les différentes équipes dont vous faites partie. Maintenant, vous pouvez toujours créer de nouvelles équipes ici, mais ce n'est pas nécessaire. Je vais continuer à l'école Clover ici et dans mon draft Je peux soit créer un nouveau fichier à partir d' ici en cliquant sur Plus, soit encore une fois, à partir d'ici, je peux créer un nouveau fichier. De là, vous pouvez également explorer la communauté qui vous donnera accès aux fichiers partagés par d'autres utilisateurs de Figma Cela inclut des éléments tels que des diapositives, des ressources de conception, des plugins, etc., que nous explorerons plus en détail dans le cours. Pour l'instant, je vais continuer et appuyer sur Créer un nouveau fichier, fichier, et cela nous amène à un nouveau fichier. Encore une fois, je vais continuer dans l'application de bureau, ouvrir le même fichier, et revenir dans la section suivante pour en savoir plus sur les différents panneaux 4. Mise en page de fichier: Nous sommes dans un nouveau dossier. Voyons à quoi nous avons accès. En commençant par le panneau de gauche ici. Tout d'abord, si vous remarquez que ma Figma est en mode sombre. C'est ma préférence pour utiliser Figma en mode sombre, en commençant par le haut à gauche ici Vous avez accès au panneau de gauche d'où vous pouvez continuer et accéder aux options du menu FIGMA Vous pouvez accéder aux options de vos fichiers et effectuer des tâches telles que dupliquer le fichier, renommer, déplacer ou Vous pouvez donner à votre fichier un titre comme celui-ci, et vous pourrez voir où se trouve votre fichier. Pour le moment, il se trouve dans mon dossier de brouillons. Juste en dessous, vous verrez deux onglets. Vous pouvez passer du fichier à l'onglet Ressources. Nous allons maintenant passer à l'onglet des actifs et à la manière dont vous pouvez accéder aux ressources à partir de cet onglet. Mais en termes simples, vous avez accès aux ressources auxquelles vous avez accès. À partir de là, vous pouvez parcourir les composants du système de conception dont vous disposez, ainsi que ceux que vous avez ajoutés à vos projets comme ceux que Figma vous propose déjà le fichier, vous pouvez voir les pages que vous avez dans votre design. Vos designs peuvent comporter autant de pages que vous le souhaitez en cliquant sur l'icône représentant un signe plus ici et en ajoutant de nouvelles pages. Maintenant, sous le panneau des calques, lorsque vous commencez à ajouter des éléments sur le canevas, ils apparaissent dans le panneau des calques. titre d'exemple, je vais créer un rectangle en appuyant sur R sur mon clavier et en dessinant un rectangle ici, comme vous pouvez le voir, il apparaît dans mon panneau de calques. Maintenant, si j'encadre ce rectangle en appuyant sur F et en dessinant votre cadre autour de celui-ci, vous pouvez voir qu'une hiérarchie est placée ici dans mon panneau de couches où nous avons un cadre avec un rectangle à l'intérieur. Chaque fois que vous voyez des couches en retrait, cela signifie qu'elles se trouvent instantanément sur le côté d' une autre couche, comme ce cadre. En sélectionnant un cadre, vous pouvez toujours y ajouter des éléments tels que ce texte. Vous pouvez toujours déplacer des objets en dehors des cadres ou les remettre dans les cadres eux-mêmes. Maintenant, j'utilisais des raccourcis clavier, mais si vous voulez accéder à tous les outils auxquels vous avez accès dans Figma, vous pouvez le faire depuis la barre d'outils ci-dessous La barre d'outils vous donne accès à plusieurs outils de déplacement, tels que le MVTol qui est sélectionné par défaut, où vous pouvez continuer et déplacer des objets Outil à main si vous voulez simplement naviguer, mais vous ne voulez pas déplacer accidentellement des objets. Et un outil de mise à l'échelle si vous souhaitez redimensionner des objets, ce que nous allons faire tout au long du cours. Je vais passer à l'outil de déplacement. À partir de là, vous avez accès au cadre pour créer des cadres, qui sont des conteneurs pour vos dessins, ainsi que des sections et des diapositives. Juste à côté, vous trouverez plusieurs outils de mise en forme, des rectangles aux ellipses et aux polygones Il existe un outil stylo si vous souhaitez créer des formes personnalisées, outil de texte pour ajouter du texte à vos projets. Si vous souhaitez ouvrir l'onglet ou le panneau des commentaires. Vous pouvez le faire à partir d' ici, et là, nous avons le panneau d'actions, que vous pouvez également ouvrir en appuyant sur nous avons le panneau d'actions, que vous pouvez également ouvrir en appuyant Commande K sur votre clavier ou sur Contrôle K sous Windows. À partir de là, vous avez à nouveau accès à certaines fonctionnalités de l'IA, à vos actifs, ainsi qu'à des plugins et à des widgets. Désormais, chaque fois que vous travaillez avec des développeurs, ils souhaitent probablement utiliser le mode développement Ils peuvent donc le faire en passant en mode développement Nous explorerons DevMDE plus tard. Pour l'instant, nous n'en sommes qu'à une vue d'ensemble. Désormais, le côté droit contient toutes les propriétés de vos objets. Quoi que vous choisissiez dans votre canevas, vous pouvez voir les propriétés sur le côté droit. Et pour le moment, nous n'avons aucun style. Sinon, ils apparaîtraient également ici. À partir de là, nous pouvons contrôler la couleur de la toile elle-même, rendre plus claire ou plus foncée. Et je peux également accéder aux paramètres du prototype à partir d'ici. Maintenant, une fois que vous avez sélectionné un élément dans votre cadre, vous avez accès à beaucoup plus d'options, à commencer par la position. Ainsi, lorsque cet objet se trouve à l'intérieur du cadre, vous avez également accès aux options de contrainte, options de mise en page, donc à la taille de cet élément, par exemple, l'apparence, au remplissage, c' est-à-dire à la couleur, trait, aux effets et aux outils d'exportation pour exporter ce rectangle hors d'ici Maintenant, si je sélectionne le texte, j'obtiens des options légèrement différentes , comme les options de typographie Nous allons maintenant explorer tout cela et nous allons beaucoup l'utiliser tout au long de notre cours. Restez donc à l'affût pour savoir comment utiliser toutes les options auxquelles vous avez accès. Maintenant, revenons la prochaine conférence pour commencer à nous plonger dans notre projet. 5. Commencer notre projet: Les éléments de base sont passés de côté. Maintenant, gardez à l'esprit que lorsque nous commencerons à travailler sur notre projet, nous allons en apprendre beaucoup plus sur tous les outils, plugins et composants, etc. pendant que nous réalisons le projet. C'est pourquoi nous nous lançons maintenant directement dans notre projet afin d'en apprendre le plus possible. Ici, j'ai un document sur les exigences du produit ouvert, qui est généralement ce qu'une entreprise un client ou le chef de produit entreprise dans laquelle vous travaillez partagerait avec vous lorsqu'il y a un nouveau projet sur lequel travailler. Maintenant, dans ce cas, nous avons un projet appelé Wander Bye Wander Boise est une application Web conçue pour permettre aux utilisateurs de découvrir et de réserver des voyages à destination dans le monde entier mettant l'accent sur une expérience utilisateur fluide et une interface intuitive, Manda Boye aide les utilisateurs à trouver, planifier et réserver les escapades de leurs rêves. C'est assez simple. Nous avons une application, une application de voyage qui est une application Web. L'objectif de cette plateforme est de permettre aux utilisateurs d'explorer des destinations passionnantes, personnaliser leurs voyages et de gérer leurs réservations. Essentiellement, nous créons une plateforme de réservation de voyages. Maintenant, dans ce document sur les exigences du produit, il y a généralement une vue d'ensemble, un objectif, puis il y a les fonctionnalités de base et les pages que nous devons concevoir. Vous pouvez bien sûr le télécharger dans les ressources pour le parcourir plus en profondeur. À un niveau plus élevé, nous allons avoir besoin pages d'authentification des utilisateurs, d'une page d'accueil, d'une page de gestion de profil, découverte de la destination. Je crois que c'est l'écran principal que les utilisateurs consulteront car c'est là qu'ils trouveront les voyages à effectuer avec la possibilité de filtrer par prix, lieu, activité, type, etc. Nous avons également besoin de la page détaillée des destinations laquelle ils peuvent consulter des destinations spécifiques en profondeur, de la gestion des réservations, d'une page de réservation pour pouvoir sélectionner les forfaits, dates, les hébergements, etc., très simple, affirmer et filtrer les fonctionnalités, le paiement et le paiement, la page de favoris et de liste de souhaits, avis et les évaluations, bien sûr, dans le cadre de l'application Ensuite, nous avons ici les objectifs de conception : une interface utilisateur intuitive, une interface créative, visuellement attrayante et facile à naviguer, la cohérence, maintien de la cohérence des éléments de conception, y compris les couleurs, les polices, les icônes, etc. Bien entendu, assurez-vous qu'il est accessible à tous les utilisateurs répondant à des besoins variés Leurs utilisateurs cibles sont des voyageurs quête d'inspiration et de réservation de voyage, âges variés, et à la recherche de forfaits de voyage personnalisés Leurs utilisateurs cibles sont donc essentiellement des personnes qui souhaitent réserver rapidement des voyages sans avoir à effectuer de nombreuses recherches ou à effectuer de nombreux travaux distincts pour réserver des parties distinctes du voyage. Ils veulent une option leur permettant de réserver facilement un voyage, et ils sont prêts à partir sans avoir à faire beaucoup plus de travail pour planifier leur voyage. Maintenant, il est dit qu'il s'agit d'une application réactive basée sur le Web, nous pouvons donc faire en sorte commencer par la version de bureau, travailler sur les conceptions de bureau avant de passer à la rendre également conviviale sur mobile, et de l'intégrer à une API tierce pour le paiement. Avec cela, je pense que nous avons suffisamment d'informations pour commencer à mettre en place notre projet. Donc, tout d'abord, nous allons prendre ces exigences et les transformer en wireframes Tout au long de cette étape, nous essayons de nous faire une idée de ce que nous voulons inclure dans chaque page, de la manière dont nous voulons définir ces flux d'utilisateurs à un niveau élevé sans être trop précis, car nous y reviendrons pendant que nous réaliserons une idée de ce que nous voulons inclure dans chaque page, faire une idée de ce que nous voulons inclure dans chaque page, de la manière dont nous voulons définir ces flux d'utilisateurs à un niveau élevé sans être trop précis, les maquettes Mais pour l'instant, nous voulons passer immédiatement au wireframing et commencer par chaque page Je vais juste me lancer directement avec mon iPad et continuer sur mon iPad. N'hésitez pas à utiliser un stylo et du papier. N'hésitez pas à utiliser Figma lui-même ou Fikjam. Quelle que soit la méthode que vous trouvez la meilleure pour esquisser des idées rapidement sans prendre trop de temps. Optez pour cette option. Ne consacrez pas trop de temps à cette étape, car ce n'est pas l'étape qui vaut la peine d'y consacrer trop de temps. C'est juste pour nous d'avoir un aperçu de haut niveau de ce que nous devons inclure dans chaque page, où nous voulons la placer, et de commencer réfléchir et à déterminer qui veut que cette application ressemble à quoi ressemble Sans plus attendre, allons-y. 6. Trouver de l'inspiration: Le plus important pour être un designer efficace est de pouvoir apprendre des autres designers. autres termes, pour être un excellent designer, vous n'avez pas nécessairement besoin de réinventer la roue tout le temps En fait, je vous encourage à faire preuve de créativité dans vos créations. Pour la majorité des parties de l'écran, nous n'avons pas besoin de trouver un nouveau moyen innovant permettant aux utilisateurs d'interagir avec le produit. De nombreuses applications, comme les pages de connexion ou les fenêtres contextuelles que nous allons afficher, etc., ont déjà été définies dans nombreuses applications et dans de nombreux produits selon lesquelles il vaut mieux opter pour quelque chose qui nous inspire. Et, bien sûr, prenez cela et mettez en œuvre notre propre style notre propre design et notre propre touche d'originalité. Et c'est ainsi que je définis que devenir un excellent designer, c'est être capable de faire rapidement ce processus encore et encore pour différents designs, idées ou exigences. Cela dit, il y a trois ressources que j'utilise pour inspirer lorsqu'il s'agit de créer des designs. Avant de me lancer dans un projet, une fois que j'ai reçu le document relatif aux exigences du produit, je recommande aux concepteurs de passer par certaines plateformes comme celle-ci, à savoir collecti.com Maintenant, en ce qui concerne l'inspiration, voici trois ressources que j' utilise et que je vous recommande de consulter. Le premier, collecti.com. Cet outil vous permet de voir différents designers télécharger des contenus, et vous pouvez même filtrer par, disons, inscription et voir les différentes pages d'inscription que les utilisateurs ont téléchargées ici Supposons que vous conceviez un menu de plats et de boissons. Vous pouvez même accéder au menu des plats et des boissons dans les versions papier et même dans les conceptions d'applications. Il existe donc une sélection de plusieurs modèles différents, certains plus anciens, autres plus récents, auxquels vous pouvez accéder via cette plate-forme. N'hésitez pas à y jeter un coup d'œil. Maintenant, celui-ci vous donne des composants spécifiques. Par exemple, si vous souhaitez concevoir une page de tarification, vous pouvez simplement vous rendre sur les pages de tarification et consulter les différentes ressources dont ils disposent pour établir les prix ici . Vous pouvez vraiment vous en inspirer voir quels éléments vous souhaitez inclure dans chacune d'elles et assembler vos designs à l'aide de modèles qui ont déjà été publiés après chacune d'elles et assembler vos designs à l'aide de modèles qui ont déjà été une tonne de temps de recherche et temps de conception. Enfin et surtout, mobile.com. Maintenant, j'utilise celui-ci en permanence, et j'ai même un compte payant chez eux, mais vous n'avez pas nécessairement besoin de créer un compte payant. Tout ce que vous avez à faire est de rechercher les différentes applications ou les différents types de pages que vous recherchez. Imaginons que je cherche de l' inspiration pour notre application de voyage. Je peux simplement en recherchant Travel voir d'autres sites Web de voyage. Je peux donc même aller voir l'un d' entre eux et commencer à regarder leurs écrans. Maintenant, une fois connecté, vous pouvez voir les designs de l'application spécifique que vous avez ouverte. Ils ont différentes destinations et hôtels parmi lesquels vous pouvez choisir, super cool. Nous allons regarder celui-ci de plus près. C'est génial Et nous pouvons même réserver des voyages ou des destinations. Voyons ce qui se passera si nous le faisons, nous n'avons rien. Cherchons simplement les écrans de réservation ou les flux de réservation Vous pouvez voir les différents sites Web qui proposent des flux de réservation, leur apparence et les éléments qu'ils incluent. Voici une option de location de voiture réserver votre chambre auprès d'Expedia, réserver un entretien, de réserver un créneau Il existe différents types de réservations que vous pouvez consulter. C'est intéressant puisque nous avons une application de voyage ici. Alors n'hésitez pas à vraiment prendre votre temps avec celui-ci, à vous inspirer. Je vais le faire, tout en assemblant mes propres wireframes, je le ferai également Mais gardez ces trois ressources de côté lorsque vous aurez besoin d'inspiration. Dans la prochaine conférence, nous allons voir comment nous pouvons réellement utiliser ce GPT pour nous aider également à trouver l'inspiration 7. Utiliser ChatGPT pour les wireframes: J'ai utilisé HGPT, vous avez probablement utilisé HGPT et nous avons tous utilisé C'est l'un des outils dont nous pouvons ne plus nous lasser et, bien sûr, il existe un moyen de nous aider à utiliser câblage. Maintenant, comment faisons-nous cela ? Tout ce que nous avons à faire est de définir l'application que nous concevons et de demander HGPT de proposer des idées sur ce que nous devrions inclure dans chaque page titre d'exemple, supposons que nous travaillions sur une page de découverte de destinations avant cela, je vais copier l'aperçu ici à partir de notre document sur les exigences du produit et dire que nous sommes en train de concevoir une application avec l'aperçu suivant tiré du PRD, de nous donner des idées sur ce qu'il faut copier l'aperçu ici à partir de notre document sur les exigences du produit et dire que nous sommes en train de concevoir une application avec l' aperçu suivant tiré du PRD, de inclure sur une page de découverte de destinations où les utilisateurs peuvent À titre d'exemple, supposons que nous travaillions sur une page de découverte de destinations avant cela, je vais copier l'aperçu ici à partir de notre document sur les exigences du produit et dire que nous sommes en train de concevoir une application avec l'aperçu suivant tiré du PRD, de nous donner des idées sur ce qu'il faut inclure sur une page de découverte de destinations où les utilisateurs peuvent trouvez des voyages à réserver pour le wireframe. Une simple invite comme celle-ci nous donnera un aperçu de ce qu'il faut inclure dans cette page. Nous avons donc déjà une section consacrée aux héros avec des destinations en vedette. Il est donc essentiel d'avoir un carrousel rotatif de destinations saisonnières populaires, une barre de recherche bien en évidence, ce qui est évidence, Des boutons d'appel à l'action avec des boutons clairs permettant d'explorer une destination ou de découvrir des offres, options de filtre de recherche avec tous les détails sur ce que nous devons inclure, y compris les préférences météorologiques , les types d'expériences, la durée du voyage, etc. Carte de destination : carrousel à barres obliques, recommandation personnalisée, options cartographique interactif C'est donc une bonne idée. Peut-être voulons-nous permettre aux utilisateurs d'avoir également une carte de chaque destination afin qu'ils puissent cliquer et voir où chaque destination les mènerait. Section d'inspiration et d'expérience. Avis et témoignages d'utilisateurs, indicateurs de réservation et de disponibilité Cela vous donne donc même une idée de la façon de créer de la pénurie auprès des utilisateurs, ce qui est une excellente tactique d'expérience utilisateur Il ne reste que trois places. Nous l'avons vu sur d'autres plateformes aériennes et sur des plateformes de réservation similaires, ainsi que outils de comparaison et de mise en favoris Cela vous donne donc une tonne de choses à inclure dans votre page. Et si c'est trop détaillé, vous pouvez probablement lui demander de vous en donner un résumé. Donnez-moi un bref résumé des choses. À inclure sur cette page. Donc, si vous voulez avoir une version plus résumée, c'est parti. Il vous donne sous forme de puces toutes les petites choses à inclure. Alors que nous examinons notre structure filaire, nous pouvons certainement utiliser HGBT pour nous aider à trouver des idées sur ce qu'il faut inclure, afin de nous assurer de ne rien manquer dans nos Et bien que ce soit formidable, nous pouvons aller encore plus loin en utilisant FiCMA AI pour nous aider également à élaborer des premières ébauches Et nous allons le faire tout au long du cours. Pour l'instant, passons aux schémas en basant sur toute l' inspiration et les ressources dont nous disposons jusqu'à présent, ainsi que sur notre document relatif aux exigences du produit, et partons de là, puis parcourons toutes les pages que nous avons besoin nous basant sur toute l'inspiration et les ressources dont nous disposons jusqu'à présent, ainsi que sur notre document relatif aux exigences du produit, et partons de là, puis parcourons toutes les pages que nous avons besoin de concevoir. Alors je te verrai ensuite 8. Wireframe de la page d'inscription: J'ai déjà dit que je fais mon câblage dans Fig Jam sur mon iPad Tu peux le faire. Si vous avez un iPad. Si ce n'est pas le cas, vous pouvez utiliser un stylo et du papier, vous pouvez simplement faire FIG Jam sur votre ordinateur. Cela dépend vraiment de vous, quelle que soit la manière dont vous faites le câblage. Encore une fois, ne passez pas trop de temps sur cette étape. Il s'agit d'un schéma filaire peu fidèle que nous sommes en train assembler pour savoir ce que nous incluons dans chaque page, où la remplacer, et pour noter tous les petits détails que nous oublierons peut-être au moment du prototypage ou des maquettes Tout d'abord, je vais utiliser l' outil Stylo et avec une règle activée ici, je vais simplement dessiner un rectangle pour représenter mes cadres métalliques, le fixer ici. Il n'est pas nécessaire que ce soit parfait. Comme vous pouvez le constater, je ne suis pas le meilleur dessiner ces rectangles, même avec une règle activée ici, mais encore une fois, nous ne faisons qu'un brouillon ici Maintenant, ce que je vais faire, c'est utiliser cet outil pour tout sélectionner ici et cliquer sur Je suppose qu'un copier-coller comme celui-ci pourrait fonctionner. De cette façon, nous en avons plusieurs que nous pouvons utiliser pour différents écrans. Le premier écran sur lequel nous allons nous concentrer est celui de nos pages d'authentification. Ce sera notre inscription. Écran : c'est ici que les utilisateurs viendront s'inscrire à l'application. Généralement, sur une page comme celle-ci, nous pouvons soit avoir une petite image sur le côté, soit simplement une boîte avec les entrées pour leurs utilisateurs, l' e-mail de l'utilisateur, le mot de passe. Maintenant, il est très important de consulter le PRD ou documents relatifs aux exigences du produit pour vous assurer de tout inclure Donc, avant même de commencer à dessiner quoi que ce soit à l'intérieur de la fenêtre, j'aimerais même de commencer à dessiner quoi que ce soit à l'intérieur de la fenêtre, j' écrire une sorte de forme à puces De quoi ai-je besoin sur cette page ? Donc, tout d' abord, nous avons besoin d'un e-mail. Nous avons besoin d'un mot de passe. Nous avons besoin du logo, qui sera pour l'instant le nom de la société Wonder Wise. Ensuite, je lis le PRD, particulier, nous voulons également des comptes sociaux Il ne précise pas laquelle, donc c'est quelque chose que vous voulez vérifier auprès de votre, vous savez, euh, PM ou votre client si vous travaillez réellement sur une vraie application. Il ne s'agit que d'une entreprise fictive, nous allons donc choisir de la signer également avec Google pour le moment, et il existe également une option permettant d' utiliser un numéro de téléphone. Faisons le champ numéro de téléphone 2. Comme moyen de se connecter. Cela devrait donc couvrir la plupart des choses dont nous avons besoin ici. Facultativement, nous pouvons avoir à nouveau une image, ou nous pouvons simplement avoir une boîte pour nous connecter. Maintenant, pour cette application, je pense que ce serait cool d'en avoir une partie montrant une image de personnes voyageant ou quelque chose comme ça, et ensuite la moitié de l'écran serait consacrée aux options de connexion. Alors peut-être que je peux diviser la page, tu sais, des deux tiers à un tiers, quelque chose comme ça. Où, de ce côté de l'écran, ce sera une image. Et puis, de l' autre côté, il y aura tout le contenu dont nous avons discuté. Alors peut-être en commençant par le logo ici. Peut-être voudrions-nous une brève description de ce que fait Wander Weiss ? Si je peux juste le remplacer par le petit slogan de Wander Weiss ici. Ensuite, nous voulons la boîte e-mail. Encore une fois, cela n'a pas besoin d'être parfait tant que vous pouvez lire votre écriture, ce qui, pour moi, est parfois un mot de passe difficile, puis nous avons besoin d'une option ou de vous connecter avec votre numéro de téléphone, votre numéro téléphone ou Google. Je vais juste mettre un petit G ici. Maintenant, je veux les déplacer vers le bas pour inclure un bouton ici et je vais simplement cliquer sur le bouton ici pour m'inscrire. Maintenant, quelque part, nous devrions également inclure que si vous avez un compte, cliquez sur le lien Login. Donc, si l'utilisateur possède déjà un compte, nous devons créer un lien vers une page de connexion. Je ne vais pas modéliser la page de connexion car nous allons faire à peu près la même chose Je vais donc simplement intituler celui-ci signulash Log In comme ceci. Mais bien sûr, nous procéderons aux modifications et aux maquettes une fois que nous aurons commencé à assembler les choses Euh, donc oui, nous voulons un lien pour se connecter au cas où votre utilisateur aurait déjà un compte. Ils peuvent accéder à l' écran de connexion au lieu de s'inscrire. Ensuite, une fois qu'ils passent à l'étape suivante, selon l' étape qu'ils franchissent, disons qu'ils passent par le numéro de téléphone, puis par le numéro de téléphone, nous avons également besoin d'une vérification ou un moyen de se connecter à l'aide du numéro de téléphone. Et généralement, il s'agit d'un code de vérification qui est envoyé. Il est donc probable que notre deuxième écran vérifiera la connexion, et nous reviendrons également lors de la prochaine conférence pour assembler ce design. 9. Code de vérification Wireframe: Très bien, pour notre connexion de vérification , c'est assez simple. Nous allons suivre un schéma similaire. Nous aurons l' image d'un côté, puis le code de vérification ici. Ensuite, nous ferons ici le code de vérification. Vous devez donc entrer quelques chiffres ici, puis nous l' appellerons bouton Continuer. Il s'agit d'un bouton qui permet de passer à l'étape suivante , puis de vérifier la connexion ou quelque chose comme ça. Nous voulons donc un champ là-dedans. Nous voulons un bouton dedans, et c'est à peu près tout. Peut-être aussi un bouton ici pour renvoyer le code. Donc quelque part par ici, renvoyez le code. S'ils ne l'ont pas reçu la première fois, ils peuvent le recevoir à nouveau. Cela compléterait donc nos pages d'authentification. Les prochaines pages que nous avons ensuite sont la gestion des profils, la découverte des destinations. Je vais y aller dans l'ordre que nous voulons. Donc, en général, nous voulons que les utilisateurs passent par les pages de connexion ici, puis nous voulons qu'ils accèdent à la page principale de notre application. Cette page principale est consacrée à la découverte des destinations, car c'est là que les utilisateurs pourront découvrir des destinations, saisir leur destination préférée appliquer des filtres, etc. avant de réserver un voyage. Nous allons donc continuer et dessiner un autre rectangle ici. Et celui-ci sera pour la page R. Destination. Donc, juste en haut, la destination. Discovery, c'est ce que nous appellerons. Encore une fois, comme nous l'avons fait sur l'autre page, nous noterons ce dont nous avons besoin sur cette page. Je vais me référer à la ressource que nous avons consultée avec HatGBT où nous avons examiné certaines des choses dont nous avions besoin, ainsi qu'au PRD partagé par le Nous allons donc examiner ces deux points et les types de références croisées, ainsi que nos propres idées et notre propre inspiration que nous avons trouvées sur d'autres sites Web, comme ceux que j'ai partagés plus tôt. N'hésitez pas à faire une pause ici. Jetez un œil à certains sites Web similaires. Je recommande même d'aller sur Expedia Booking.com ou sur toute autre plateforme que vous utilisez pour réserver des voyages et peut-être de voir ce qu' ils proposent sur les pages de découverte de destinations qu'ils proposent À quoi ressemble leur type de flux de réservation ? Ce serait le bon moment pour faire ce genre de travail hors ligne par vous-même. Ensuite, continuez à dessiner et ajouter des éléments de ces sites Web dans votre propre application. Encore une fois, pour être un grand designer, n'est pas nécessaire de réinventer la roue en permanence En fait, c'est tout le contraire. Plus vous pourrez exploiter et utiliser d'autres modèles déjà établis et conçus par d'autres concepteurs, vous serez performant, plus vous créerez rapidement wireframes, des maquettes et des prototypes. 10. Wireframe de découverte de destination: Cette page comporte deux éléments . Il y a la partie qui portera sur les choses spécifiques liées à la destination. Nous aurons donc probablement une barre de navigation haut pour inclure des éléments tels que, vous savez, les navigations vers différents endroits de l'application, ainsi que le retour à la page d'accueil Nous aurons donc probablement le logo ici pour nous ramener à la page d'accueil, où que nous soyons, puis un tas de liens sur le côté droit que je n'ajouterai pas pour le moment. Je veux des cartes différentes ici. Nous savons donc parfaitement que nous voulons des cartes de destination. Ces cartes devraient probablement être un peu plus basses pour qu'en haut, nous ayons un peu d'espace pour la saisie. Vous souhaitez séparer votre liste de choses dont vous avez besoin en deux catégories différentes. Le premier se trouve dans la page elle-même, le second dans la carte elle-même. Ainsi, dans la carte dans laquelle nous voulons inclure des détails sur des destinations spécifiques, nous voulons créer deux listes distinctes pour chacune d'entre elles. Pour l'instant, nous allons créer la page de découverte elle-même. Nous voulons une barre de recherche ici pour rechercher des destinations. Nous voulons donc qu'ils écrivent leur destination. Maintenant, comme nous ne leur réservons pas de vols, nous n'avons pas nécessairement besoin savoir d'où ils viennent. Nous avons juste besoin de connaître les destinations. Et dans le cadre de cette barre de recherche, nous voulons probablement des filtres de date. Nous voulons donc que les sélecteurs de dates leur demandent quand ils ont besoin ou quand veulent-ils voyager Maintenant, tout au long de cette page, nous voulons également des options de tri. Nous voulons les laisser trier par popularité, prix, notes. Et encore une fois, la plupart d'entre eux proviennent de Chat GPT. Nous voulons également des options de filtrage. Pour les filtres, nous voulons établir le budget, nous pouvons le faire. Nous avons déjà une plage de dates afin de pouvoir déterminer uniquement la durée du voyage. Alors, combien de temps souhaitez-vous que les voyages soient de type expérience ? Encore une fois, nous pouvons toujours les modifier ultérieurement. C'est bien d'avoir une idée de ce par quoi nous voulons commencer au moins aussi s'il s'agit d'une préférence. Ce sont là de bonnes options de filtrage. Nous en avons donc besoin dans le cadre de la page. Nous souhaiterons peut-être inclure une vue cartographique, c'est donc une bonne idée d'y réfléchir. J'ai plutôt tendance à ne pas mettre de carte ici simplement parce que les destinations ne seront pas des lieux spécifiques. Ce ne seront que des villes spécifiques. Nous ne voulons donc probablement pas de carte à moins qu'ils ne choisissent, vous savez, un endroit pour leur hébergement. Peut-être que dans la page détaillée, nous pouvons inclure une carte avec différentes options d'hébergement, etc. Mais pour la page elle-même, je ne pense pas que nous ayons besoin d'une carte. Mais encore une fois, cela fait partie des fonctionnalités que nous pourrons toujours ajouter ultérieurement. Ou si nous travaillons avec notre client, nous pouvons certainement discuter de celui-ci avec lui. Donc, dans un scénario réel, ce sera un peu différent. Maintenant, nous voulons peut-être aussi différentes catégories d'options. Peut-être une catégorie ou nous pouvons l'appeler collections thématiques. Et il peut s'agir de groupes de catégories de destinations qu'ils peuvent destinations qu'ils peuvent voir en cliquant dessus et en voyant des destinations qui, par exemple, sont des escapades romantiques ou des voyages en centre de villégiature ou différentes catégories dans lesquelles nous pouvons classer les voyages Donc, s'ils veulent voir ce qui est populaire dans ces catégories, ils peuvent le faire également. Je pense que ce sont de bons points de départ, du moins pour le moment. Pour découvrir notre destination. Maintenant, pour ce qui est de la carte elle-même, nous pouvons revenir dans la prochaine conférence pour dresser une liste des choses que nous voulons avant de préparer le reste de cette page. Il s'agit probablement de l'une des pages les plus importantes et les plus visitées de notre application Il est donc bon de prendre notre temps et de ne pas précipiter pour sauter cette planification détaillée Revenons donc lors de la prochaine conférence pour commencer à planifier nos cartes de destination. 11. Wireframe de carte de découverte de destination: Cartes de destination. Que voulons-nous trouver dans chaque carte de destination ? Nous avons besoin du nom de la ville et du pays. Je veux probablement la note. Nous avons besoin d'une sorte de coût pour ce voyage, et ce sera probablement quelque chose comme le prix par jour ou par nuit , à moins qu'ils ne saisissent une date précise. Dans ce cas, nous pouvons leur indiquer le montant total de leur voyage. Je vais donc réduire le total. Nous voulons un bouton leur permettant de consulter plus d'informations, de continuer ou de réserver cette destination. Pour l'instant, nous l' appellerons simplement un bouton. Nous voulons vraiment une image. Il est toutefois important de ne pas surcharger cette carte. Nous pourrions avoir un badge de popularité si nous le voulions. Donc, si cette destination est un bon choix, nous pouvons le montrer avec une petite icône. De plus, si vous souhaitez ajouter ceci ou ajouter cette destination à vos favoris, nous pouvons également l'ajouter à vos favoris Nous pouvons donc l'enregistrer sur notre profil ou notre page de favoris, etc. Je pense donc que ce sont de bonnes choses pour commencer à les inclure dans nos cartes de destination. Maintenant, reformulons la page elle-même. Nous voulons que notre barre de recherche ou nos options de tri et options de filtrage soient en haut, quelque part ici. Nous voudrions donc probablement que la barre de recherche indique une destination. Maintenant, pourquoi en haut à gauche ? C'est généralement le premier endroit qu'un utilisateur consulte. Nous voulons donc qu'ils saisissent rapidement une destination s'ils savent déjà où ils vont, ou s'ils peuvent simplement consulter ce qui est disponible. Nous pouvons également avoir nos sélecteurs de dates ici, et nous pouvons avoir des boutons ici pour filtrer et trier Et nous pouvons avoir les cartes de destination juste en dessous. Maintenant, nous allons avoir un tas de rangées de ces cartes de destination et probablement juste en dessous , quelque part, pour étendre un peu cette page. Juste en dessous, nous souhaiterons peut-être inclure des collections thématiques. Nous pouvons simplement appeler cela des collections et avoir différentes collections de destination ici. Il peut donc s'agir d'images avec juste un nom de collection. Avec la possibilité de parcourir tous les voyages de ces collections. Je pense que c'est probablement un bon début. Ne vous inquiétez pas pour la barre de navigation en haut. Pour l'instant, nous allons revenir et retranscrire tout cela ensemble. Nous pourrions également définir à quoi pourrait ressembler cette carte de destination Peut-être pourrions-nous faire ici une image de la destination avec le nom de la ville slash Country Je pourrais faire l'évaluation ici. Peut-être un coût. Pour l'instant, j' écris juste 1 000$ par semaine, mais encore une fois, dans les maquettes, nous allons régler ce problème Vous pouvez inclure des icônes ici. Il s'agit d'une icône FR, au cas où elle serait populaire. Peut-être un bouton ici pour bookmarkt puis un bouton ici pour continuer Je pense que cela fonctionnerait pour le moment. N'hésitez pas à prendre un moment si vous avez besoin de plus d'inspiration et à regarder certaines applications similaires qui contiennent des cartes et comment elles conçoivent leurs cartes. C'est quelque chose que j'ai vu dans de nombreuses applications et dans la façon dont elles présentent les choses. C'est pourquoi je les assemble rapidement, mais vous pouvez prendre votre temps et faire une pause ici pour trouver de l'inspiration. Maintenant, pour faire un petit exercice, je vous laisse le soin de vous occuper de la page détaillée de la destination en tant que mission. Et cette page détaillée de destination est essentiellement une page plus détaillée avec nos informations de destination. Donc, toutes ces informations que vous avez sur la carte, ainsi que d'autres informations telles que des avis détaillés et des informations telles que description du voyage, les options de réservation. Maintenant, je vais l' assembler dans les maquettes. Moi-même, mais n' hésitez pas à le faire comme une petite mission pour vos compétences en matière de wireframing, puis nous reviendrons et étape suivante du flux de réservation, à savoir la gestion des réservations ou la page de réservation, puis la confirmation de réservation et Revenons donc et assemblons cette page. 12. Wireframe de détails de la destination: Bien, donc pour la page des détails de la destination, je vous l'ai confiée si vous le vouliez. Je suis allé de l'avant et j'ai créé ma propre page de détails sur les destinations. Encore une fois, le vôtre peut sembler complètement différent du mien. L'essentiel est de s' assurer qu'il inclut les principaux composants dont nous avons besoin. donc de certains détails de la carte de destination elle-même, ainsi que de tout autre détail secondaire ou important dont nous aurons besoin pour éventuellement connecter l'écran au flux de réservation sur l'écran de réservation. Euh, donc pour la mienne, tout en haut, j'ai mis l'image ici sur la gauche avec la possibilité de voir plusieurs images. Juste en dessous, j'ai mis quelques éléments inclus qui accompagnent leur destination. Cela pourrait donc être comme une liste de commodités, et nous pouvons le faire sous forme d'icône. En haut, le nom de la destination, la ville, euh, le pays, euh, les évaluations, l'icône du feu et le bouton « marque-page », comme vous le voyez également sur la carte elle-même y trouverez donc des détails avec une brève description de à l'action pour sélectionner la chambre, car c'est généralement ce que les Vous y trouverez donc des détails avec une brève description de cette destination, juste en dessous, puis un bouton ou un appel à l'action pour sélectionner la chambre car c'est généralement ce pages de réservation vous permettent de faire. Une fois que vous arrivez sur la page de détails d'une destination , sur une page de localisation ou sur la page d'un hôtel, l'étape suivante consiste à choisir un hébergement. Maintenant, ils peuvent être à des endroits différents ou au même endroit. Hum, il peut donc s' agir d'un type de chambre ou même d'un type d'hôtel. Pour l'instant, il suffit de mettre le type de chambre. Donc, juste en dessous, se trouve également un hébergement avec tous les différents filtres. Donc, s'ils n'en ont pas sélectionné une sur la page précédente, la page de découverte de destination, s'ils ne l'ont pas inscrite de date , etc., ils peuvent le faire à partir d'ici. Ils peuvent ajouter leur nombre de voyageurs, etc. Ensuite, découvrez les différents hébergements pour ce voyage. Juste en dessous, j'ai mis quelques notes. Vous pouvez donc voir quelles sont les notes attribuées à cette propriété ou destination réelle grâce à la possibilité de la voir sous forme de carrousel Juste en dessous, vous voyez des destinations similaires. Si cela ne vous plaît pas, vous pouvez en trouver d'autres disponibles grâce aux cartes disponibles ici, ce sont toutes des cartes de destination similaires à celle-ci. Bien entendu, vous pouvez en inclure beaucoup plus sur cette page, peut-être une carte indiquant des éléments tels que les politiques d' arrivée, de départ, etc. Il y a beaucoup d'autres choses à y entrer. Pour l'instant, je vais rester simple. Je suis en train de définir les exigences mêmes, je pense, pour cette page. Nous allons passer à la page suivante du wireframe, qui est la page de réservation Désormais, cette page de réservation est essentiellement la page de réservation qui apparaît juste après la sélection de l' hébergement. Donc, si je sélectionne l'un des hébergements ici, c'est cette page qui s'ouvrira. 13. Impression de fil de l'écran de réservation: J'ai listé les articles dont nous avons besoin pour notre écran de réservation. Maintenant, je l'ai fait parcourant d'autres plateformes similaires et en me référant à Chat GBT sur le côté Et voici ce que j'ai trouvé. Nous avons les détails de l' hébergement. Nous voulons donc simplement voir la chambre ou l'hôtel où ils réservent ou où ils séjourneront. Il est possible qu'ils séjournent à plusieurs endroits si cette destination, vous savez, cet endroit où ils se rendent comporte plusieurs destinations différentes, vous savez, dans les forfaits Nous voudrions donc peut-être inclure cela dans le design, dates sélectionnées, le bouton B et le bouton réserver, dans certains modules complémentaires. Ainsi, dans le PRD ou le document relatif aux exigences du produit, il est fait mention de la nécessité de réserver des services supplémentaires tels que des locations de voitures, des guides locaux ou des activités, etc. Je l'ai également ajouté ici. Informations de paiement , puis informations personnelles. Donc, nom, e-mail, numéro de téléphone et détails d' arrivée et de départ. Maintenant, sur un écran comme celui-ci, il peut être intéressant d' inclure certains détails de l'hébergement d'un côté, puis le reste des informations ou les entrées que l'utilisateur doit inscrire de l'autre côté. Et en général, j'aime que les choses restent cohérentes. Ainsi, en gardant les informations à afficher sur le côté droit, ils peuvent voir le logement qu'ils réservent. Et puis, sur le côté gauche, nous pouvons avoir tous les champs ici. Nous pouvons donc commencer par le côté gauche, je vais simplement mettre un bouton de retour ici, puis juste en dessous, juste un titre pour confirmer la réservation. Ensuite, nous voulons probablement collecter nos informations personnelles ici. Nous n'appelons peut-être pas cela des informations personnelles, mais pour le moment, je vais simplement les ajouter ici avec les différents champs, e-mail, numéro de téléphone, prénom, nom de famille, e-mail, téléphone. Cela pourrait faire partie d'une section. Ensuite, la section juste en dessous qui pourrait contenir les informations de paiement. Pour celui-ci, nous avons probablement besoin d'un numéro de carte de crédit. Ainsi que la date d'expiration, CVV et probablement le nom de la personne sur la carte Je vais donc simplement l'ajouter ici, mais dans les maquettes réelles, nous le placerons probablement légèrement différemment. Ensuite, nous voulons ajouter nos modules complémentaires, afin que nous puissions les ajouter ici. Et nous pouvons avoir de petites cartes comme celle-ci qui représentent les différents petits ajouts qu'ils peuvent ajouter à leur voyage avec un titre et une brève description de ce que cela fait. Nous pouvons également inclure une image si vous le souhaitez ici, peut-être juste en haut. Et puis ce qu'il en reste. Nous avons sélectionné les détails de l' hébergement à la date, afin qu'ils puissent aller de pair, ainsi qu'un bouton de réservation. Je vais donc simplement aller de l'avant et le raccourcir légèrement pour que nous puissions y aller. Image. Le nom. Et ensuite, que réservent-ils ? Une chambre, par exemple, et certains détails de l'autre page, comme les dates et le nombre de personnes. Et, bien sûr, il est très important d'inclure le prix. Je n'ai rien ajouté ici, mais nous voulons absolument indiquer le prix, le prix total et ce que l'utilisateur peut s'attendre à payer Et nous pouvons ensuite avoir un bouton de réservation ici pour terminer la réservation. Nous avons donc le bouton en bas. Maintenant, nous avons créé un plus grand nombre de pages complexes ensemble. En guise de devoir, je quitterai l'écran de profil et l' écran de favoris ou la page où ils peuvent voir tous les éléments des favoris Sur ces deux pages, je vous laisse le soin de faire les devoirs. Nous reviendrons lors de la prochaine conférence et commencerons à créer notre guide de style pour l'application et à passer à la conception de notre application ensemble. 14. Choisir une palette de couleurs: nos cadres métalliques terminés, il est temps de passer à l'étape suivante de notre projet, à savoir définir certains styles pour le projet. Désormais, les styles sont à la base de notre projet, et les styles incluent des éléments tels que le jeu de couleurs, la typographie que nous allons utiliser et, dans certains cas, le système de conception que nous voulons utiliser, si vous souhaitez en utiliser un ou en créer un à partir de zéro Dans cette section du cours, nous allons donc continuer et nous concentrer sur la configuration des bases afin de pouvoir passer à l'assemblage des maquettes, et nous n'aurons plus à nous soucier des couleurs et de la typographie lorsque nous arriverons à cette partie du projet Il y a donc quelques ressources que j' utilise pour générer des schémas de couleurs. Avant de passer aux autres, je tiens à vous montrer que CHA JBT propose également des combinaisons de couleurs décentes Si vous lui dites sur quoi vous travaillez et que vous demandez des couleurs, il trouvera de belles teintes que vous pourrez utiliser pour vos projets. Et voici d'autres ressources que j'utilise généralement, et je vous recommande de les consulter. Les liens se trouvent également dans les ressources pour tous ces outils que nous allons parcourir. L'un d'eux est celui des glacières. Vous pouvez appuyer sur Démarrer le générateur ici et simplement accéder directement à la première palette qu'il vous propose. La tienne sera probablement différente de la mienne. Il vous suffit d'appuyer sur la barre d'espace de votre clavier et cela continue de générer des couleurs différentes. Maintenant, si vous aimez une couleur, disons que j'aime ce bleu marine. Je peux appuyer sur Verrouiller, puis continuer à appuyer sur la touche espace pour la faire correspondre d'autres couleurs similaires ou complémentaires, et je peux continuer à verrouiller les différentes couleurs que je souhaite utiliser pour mon projet. Donc, si j'en vois une belle, je peux toujours appuyer sur Verrouiller dessus, puis continuer à générer le reste de ma palette. En général, nous n'avons pas besoin de plus de trois couleurs dans un projet. Un pour des choses comme les arrière-plans ou les boîtes d'alerte, etc. Un autre pour les actions principales comme les boutons, un autre pour les actions secondaires ou même une couleur d'accent à utiliser sur certaines parties du projet, comme le texte ou éventuellement arrière-plans ici et là, etc. Vous n'avez pas besoin de cinq ensembles de couleurs. En fait, c'est peut-être un peu trop. N'hésitez pas à expérimenter cet outil. Il y en a un autre, ai coolors.co. Il s'agit d'un jeu de couleurs généré par l'IA. Il vous donne quelques premières que vous pouvez expérimenter et voir à quoi cela ressemblerait sur un écran de tableau de bord comme celui-ci ici. Ou vous pouvez également le demander. Vous pouvez essayer de rechercher des couleurs spécifiques. Donc, si je dis quelque chose comme les couleurs du coucher du soleil, disons, et que je génère, je vais aller de l'avant et trouver des couleurs liées au coucher du soleil. Et bien sûr, si vous n'aimez pas certaines des couleurs proposées, vous pouvez les changer. Vous n'êtes pas obligé de choisir la palette de couleurs exacte que cela vous donne, ou vous pouvez faire des choses comme Ocean, puisque nous créons une application de voyage, ou même essayer la plage pour voir ce que cela donne. Oui, c'est un peu mieux. Alors n'hésitez pas à essayer celui-ci. Il y en a un autre qui s'appelle Colors do MSI. Encore une fois, décrivez le but de votre combinaison de couleurs, voyagez avec différentes teintes de plage et d'eau. Je suis juste en train de trouver une phrase au hasard pour voir ce que cela nous donnerait. Oui, cela nous donne des bleus clairs et des nuances intéressantes. Et vous pouvez toujours le générer à nouveau si vous n' aimez pas celui-ci. Il s'agit certainement de quelques teintes de bleu. Nous avons des couleurs sablonneuses ici. C'est sympa. Last but not leaves de blank.com vous aide également à créer non seulement des couleurs, mais également Peut-être que nous essaierons les polices en fin de compte. Pour l'instant, essayons les couleurs. Rédigez une invite décrivant votre projet, destination de voyage, votre application de réservation avec des destinations ensoleillées. Encore une fois, c'est une invite totalement aléatoire, mais nous avons quelques couleurs intéressantes ici. Je propose même une maquette qui vous permet de voir à quoi cela ressemblerait ou à quoi ressemblerait la palette couleurs selon les projets. C'est une question intéressante. Et vous pouvez continuer et changer des couleurs spécifiques. Si vous n'aimez pas cette orange, vous pouvez l'éclaircir. Et cela vous montrerait à travers différents projets, quoi cela ressemblerait. Personnellement, j'ai tendance à utiliser des glacières simplement parce que j'ai davantage utilisé cette plateforme, mais , bien sûr, n'hésitez pas à en utiliser une pour créer votre propre palette de couleurs, ou à copier les couleurs que je vais utiliser Je partagerai les codes hexadécimaux de la palette de couleurs lors de la prochaine conférence Allez-y, faites une pause ici, choisissez une palette de couleurs sur votre plateforme préférée, et je vous verrai lors de la prochaine conférence. 15. Choisir un jeu de caractères: J'ai donc choisi cette palette de couleurs pour avancer dans mon projet. Maintenant, bien sûr, le vôtre pourrait être différent. Alors n'hésitez pas à suivre le vôtre. Je vais utiliser le bleu comme orange principale et secondaire ici et utiliser ce noir pour des éléments tels que les polices et le texte. Et puis ce blanc ici pour des choses comme les arrière-plans ou les fonds de cartes, etc. Passons maintenant aux polices, où allons-nous choisir un jeu et à quelles ressources avons-nous accès ? Maintenant, pour celui-ci, de loin, le plus simple et le plus fiable, Google Fonts. Google Fonts est désormais également intégré à Figma lui-même, vous n'avez donc plus besoin de les télécharger ou de les importer dans Sigma, donc c'est génial Assurez-vous donc que si vous avez des polices personnalisées, redémarrez simplement Figma si vous ne les voyez pas tout de suite. Maintenant, n'hésitez pas à parcourir les polices Google. En ce qui concerne vos polices, nous voulons choisir deux polices. Un pour le texte du titre. Il s'agit donc de choses comme les titres, le nom de l'application ou tout titre de titre, etc. Nous utilisons une police de titre. Cela peut donc sembler légèrement différent de votre autre police, qui est la police body. Donc, idéalement, nous voudrions choisir deux polices différentes. Maintenant, pour une application vraiment simpliste, vous pouvez tout à fait en choisir une, et certaines ont des versions différentes de la police que vous pouvez utiliser Vous pouvez donc utiliser, par exemple, condensé robotique pour votre tête, puis utiliser roboto mono pour votre corps à titre d'exemple Je ne dis pas nécessairement que tu devrais le faire. Mais il y a des tonnes de bonnes polices que vous pouvez utiliser ici. Les deux autres que je vous montrais ici vous proposent également des polices avec lesquelles vous pouvez travailler Donc, si je l'ouvre et que je passe aux polices, saisis votre invite, je vais juste rechercher l'application Travel ici, et le tour est joué. Vous obtenez différentes paires de polices avec lesquelles vous pouvez travailler. Vous pouvez le voir dans différentes nuances. Et si vous cliquez sur Obtenir la police, vous serez redirigé directement vers Google Fonts lui-même. Et vous pouvez également taper quelque chose ici. Bien entendu, vous devez réfléchir à quoi vous souhaitez que votre image de marque ressemble. Donc, si vous travaillez avec un client, vous devriez aborder cette partie avant de passer à l'étape suivante Vous devriez probablement le consulter sur les éléments de marque, en particulier s'il a déjà du matériel de marque prêt, comme des polices que vous pouvez déjà utiliser. Maintenant, ici, je vais juste choisir deux polices, puis passer à celles-ci. Et ces deux polices seront Libre Baskerville pour mes polices de titres. Et pour les polices de caractères, je vais choisir noto send ici Ce seront donc les deux polices que j'utiliserai. Mais encore une fois, n'hésitez pas à utiliser votre propre paire de polices. Nous reviendrons dans les prochaines conférences pour les ajouter en tant que styles de police à notre application. 16. Créer des styles de couleurs: Très bien, j'ai donc choisi ceci comme palette de couleurs, et j'espère que vous avez également défini votre propre palette de couleurs. Sinon, n'hésitez pas à suivre et à utiliser celui-ci. En gros, je vais utiliser le bleu comme couleur principale et cette orange est une couleur secondaire. Ce noir est la couleur principale du texte. La raison pour laquelle nous n'optons pas une couleur entièrement noire comme zéro, zéro, zéro en termes de code hexadécimal, c'est que nous voulons quelque chose de subtil et un peu moins foncé simplement parce que c'est plus agréable pour les yeux Et c'est une bonne couleur de fond que nous pouvons utiliser. Et bien sûr, nous pouvons créer plusieurs nuances pour toutes ces couleurs et utiliser les nuances appropriées. Maintenant, nous voulons déplacer vers notre fichier Figma, et avant de le faire dans figma, nous allons créer un nouveau projet et n'hésitez pas à le créer dans votre dossier de brouillons ou ailleurs Créez un nouveau fichier de conception. Et ce fichier de conception sera notre projet dans lequel nos styles vivront, nos maquettes réelles et tout le reste. Nous allons donc le renommer Manderwis. Et pour cette première page, nous allons la renommer notre guide de style, et nous y placerons tous nos styles Maintenant, pour créer un style, il vous suffit d'accéder aux styles locaux ici et d'ajouter un nouveau style. Maintenant, nous sommes en train de créer le style de couleur, nous allons donc commencer par cela. Si vous cliquez ici, nous nous demanderons quel nom souhaitez-vous donner à votre couleur ? Dans ce cas, nous pouvons en fait lui donner un nom tel que primary. Vous pouvez ajouter une description si vous le souhaitez. Donc, si vous travaillez en équipe et que vous souhaitez décrire exactement où vous utilisez cette couleur, cela peut s'avérer utile. Je vais maintenant copier le code hexadécimal d'ici. N'hésitez pas à prendre note de cette couleur si vous souhaitez utiliser la même. Je vais utiliser le code hexadécimal pour le bleu. N'hésitez pas à faire une pause ici pour l'écrire également dans votre projet , revenez ici et collez-le dans les propriétés. Et maintenant, nous avons le style avec cette couleur comme couleur principale et un clic gratuit crée du style, le style a été créé. Et partout où nous avons un objet, disons que nous avons ce rectangle et que nous voulons appliquer ce remplissage, nous y allons simplement au lieu de choisir la couleur ou nous saisissons manuellement chaque fois ce code hexadécimal. Tout ce que nous avons à faire est appliquer les styles et les variables et de choisir le style principal Il a été appliqué. Maintenant, l' avantage d'utiliser des styles, au lieu de ne pas utiliser de styles, est que chaque fois que vous modifiez votre palette de couleurs, disons qu'au lieu de cette couleur primaire, je souhaite opter pour une nuance de bleu différente, elle sera également modifiée quel que soit l'endroit où vous utilisez cette couleur. Comme vous pouvez le voir, pour le moment, je ne change que le style de couleur et non le remplissage de ce rectangle spécifique. Donc, partout où j'utilise cette couleur, elle change automatiquement. C'est donc l'avantage d'utiliser des styles. Donc, pour le moment, nous voulons créer des styles pour toutes les couleurs, toutes ces couleurs ici. Nous avons donc déjà le primaire il vous suffit de répéter ce processus pour une couleur secondaire, pour une couleur de texte et pour une couleur d'arrière-plan. Maintenant, je vais laisser cela comme quelque chose que vous pouvez faire. C'est ainsi que vous créez des styles de couleurs. Nous allons maintenant faire une pause ici et nous reviendrons dans la prochaine conférence où nous utiliserons un plugin pour nous aider à le faire plus rapidement et à introduire des nuances dans nos styles de couleurs. 17. Utiliser des plugins pour créer des styles de couleurs: Dans l'introduction, j'ai expliqué comment ajouter des plug-ins à partir de notre bouton d'action situé ici ou en appuyant sur la commande K ou sur la touche Ctrl sous Windows et en accédant à notre onglet Plug-ins. Maintenant, nous voulons créer différentes nuances de nos couleurs primaires afin de pouvoir appliquer différentes nuances. Si vous voulez un bleu plus clair, nous pouvons en appliquer un plus clair. Si vous souhaitez un gris plus clair, nous pouvons appliquer un gris différent. Ainsi, vous n'avez pas à répéter ce processus plusieurs fois pour créer différents styles avec différentes nuances. Nous pouvons simplement utiliser un plugin qui nous aide à le faire. Maintenant, pour utiliser ce plugin, je vais simplement supprimer le rectangle et également supprimer le style que nous avons créé ici, le style local pour cette couleur primaire. Maintenant, ce plugin va tout configurer pour nous. Tout ce que nous avons à faire est d' accéder à notre menu d'action, d' accéder aux plugins et aux widgets rechercher le plugin appelé Foundation et sélectionner ce plugin générateur de couleurs de base. Dès que vous l'ouvrez, vous pouvez voir que vous avez différentes teintes et qu'elles utilisent différents systèmes, qu'il s'agisse de orbite, du système Atlassian, de la conception des matériaux Il s'agit de différentes manières appeler les teintes selon différentes conventions de dénomination, etc. Celui que j'utilise souvent comme matériau de conception, celui où votre couleur 500 est la couleur principale que vous sélectionnez, puis elle crée un tas de nuances plus foncées et un tas de nuances plus claires. Maintenant, ce n'est pas la couleur que nous voulons. Il s'agit de la couleur que j'ai copiée à partir de mon style de couleur. C'est donc le bleu que nous voulons vraiment. Nous pouvons le nommer bleu ou nous pouvons le changer en primaire, puis nous pouvons appuyer sur Créer des styles. Maintenant, ce plugin va continuer et créer ces styles dans le dossier de base ici ou dans la catégorie, et sous le dossier principal. Nous avons toutes ces couleurs maintenant. Maintenant, le Hexcoe que nous avons copié est composé de quatre 500 principaux, et il provient du style de couleur que j'ai créé Alors n'hésitez pas à prendre une seconde ici, à le configurer. Et ce que vous pouvez également faire ici c'est que vous pouvez obtenir la palette, en appuyant sur palette ici et en collant la même chose dans votre fichier de conception Cela permet aux développeurs de visualiser plus facilement votre palette de couleurs une fois que vous l'avez créée, et je recommande d'inclure dans votre guide de style toutes les palettes que vous utilisez. Je vais répéter ce processus encore quelques fois pour la couleur secondaire, cette orange. Allons-y. Renommez-le en secondaire et utilisez le design des matériaux, créez des styles, obtenez la palette, Oups Je vais coller le code et m'assurer de l' appeler secondaire ici, puis appuyer sur Créer des styles pour obtenir la palette. Et c'est juste collé sur l'autre. Nous voulons aller de l'avant et nous voulons juste le faire maintenant, c'est collé au-dessus de l'autre, donc je vais le déplacer ici Nous l'avons là. C'est notre couleur secondaire. J'ai saisi la couleur noire que nous avons, et nous pouvons nommer ce texte et l'utiliser pour nos textiles. Maintenant, ceux-ci sont tous pareils . Nous n'en avons pas vraiment besoin. Nous pouvons donc réellement continuer et simplement supprimer tout ce qui est 600-900 Créez des styles, téléchargez la palette ici, éloignez-la. Supprimons tout ce qui est 600-900 car ils sont tous de la même teinte, à peu près Et à partir de mon texte secondaire ou texte réel, 600 à 900, nous allons sélectionner Shift les sélectionner tous et supprimer ces styles. C'est tout ce dont nous avons besoin. Pour la couleur d'arrière-plan, je vais simplement copier la couleur du coquillage, ajouter un style appelé arrière-plan et coller ce code hexadécimal Maintenant, je n' aime pas vraiment la façon dont il existe ce dossier ou cette catégorie de base . Nous n'en avons pas vraiment besoin. Nous allons donc sélectionner ici tous les styles de texte secondaires principaux styles de texte secondaires principaux et les déplacer en dehors de ce dossier ou de cette catégorie, puis nous allons les supprimer. Et pour celui-ci, je vais procéder et réécrire tel qu'il est capitalisé comme Nous avons donc maintenant tous ces styles que ce plugin a mis en place pour nous. Nous avons un tas de nuances de gris différentes pour notre texte que nous pouvons utiliser, pour notre couleur secondaire et notre couleur primaire, et une couleur de fond que nous pouvons utiliser. Pour ceux-ci, allons-y et ajoutons une section. Nous pouvons les regrouper et créer une palette de couleurs comme celle-ci. C'est donc bien organisé. C'est ainsi que nous utilisons des plug-ins pour nous aider à ajouter nos styles à nos projets. Nous sommes maintenant prêts à utiliser les couleurs dans notre projet. Revenons lors de la prochaine conférence pour appliquer également nos textiles. 18. Ajouter des styles de texte: Découvrez nos styles de couleurs. Nous voulons maintenant ajouter nos textiles. J'ai choisi ces deux polices à utiliser pour mon titre, puis celle-ci pour la police de mon corps. N'hésitez pas à utiliser la police que vous aimez plus tôt. Je vais choisir ces deux-là. Encore une fois, n'hésitez pas à suivre, appliquer les mêmes couleurs. Ce sont des polices Google qui devraient être automatiquement ajoutées à votre fichier Figma afin que vous n'ayez pas besoin de télécharger de polices Que faisons-nous pour les appliquer à notre projet ? Tout d'abord, je vais appuyer sur la touche T de mon clavier, ou vous pouvez sélectionner T à partir d'ici et écrire un texte et écrire un titre ici. Je vais appliquer mes polices d'en-tête à cela et changer la taille de police à 16. 16 est une bonne police de base généralement utilisée pour les projets Web et mobiles. Ensuite, nous redimensionnons notre police hausse ou à la baisse à partir de 16 points. C'est un bon système à utiliser et il fonctionne généralement sur la plupart des appareils. Maintenant, je vais dupliquer celui-ci en appuyant sur la commande D, nous en avons donc un double. Déplacez-le ici et changez-le en corps. Donc, il suffit de double-cliquer et de modifier le texte. Et tout ce que je vais faire, c'est changer la famille de polices ici en Noto Sans , que j' utilise pour le corps Encore une fois, appliquez votre famille de polices s' il s'agit d'une autre. Pour moi, je vais utiliser ces deux-là. Maintenant, pour les transformer en textiles, il suffit de les sélectionner, d' accéder à la typographie ici, accéder à la typographie ici, appliquer des styles et d'appuyer sur Plus Et nous allons continuer et créer un style à partir de ce texte. Et nous pouvons l'appeler, disons, encore une fois, si vous le souhaitez, vous pouvez lui donner une description, vous n'en avez pas besoin et je crée du style. Maintenant, ce corps de texte est devenu un style que nous pouvons dissocier d' ici si vous souhaitez y apporter des modifications ou en détacher le Ou si nous cliquons n'importe où sur notre toile, nous pouvons également voir ce textile ajouté ici. Une autre façon de créer un textile est de cliquer sur Plus ici, puis de lui donner un nom, choisir les propriétés, donc la famille de polices réelle. De cette façon, je devrais rechercher Noto Sans. Et disons que je veux en faire une audacieuse. Je vais donc choisir le gras ici, puis l'appeler body bold et choisir la taille de police, qui est 16. Maintenant, j'ai deux textiles. L'un d'eux s'appelle body avec un sens des notes de 16 pixels, puis nous en avons un en gras. Supposons donc que je veuille remplacer le texte que j'ai ici par le texte en gras. Il suffit de cliquer sur le textile appliqué et de le remplacer par le textile en gras. Maintenant, à tout moment, disons que nous voulons apporter des modifications à ce texte en gras, nous voulons le rendre encore plus audacieux Nous pouvons réellement appliquer cela ici. Et comme vous pouvez le constater, cela a été fait et s'est appliqué à ce domaine également. Voilà, nous l'avons. Maintenant, c'est ainsi que vous créez des textiles dans Figma. Et bien sûr, il existe des plugins pour vous aider à configurer un système pour votre texte, car pour le moment, nous sommes à la base de notre projet et nous voulons plusieurs polices que nous pouvons utiliser à plusieurs endroits. Vous voudrez donc une police plus grande, peut-être pour les titres de votre page, puis une police plus petite ou une police de taille moyenne pour, disons, la description, puis une police plus petite pour un usage générique. Il est toujours utile d'appliquer une échelle de police ou une échelle de caractères à vos projets Nous reviendrons dans la section suivante pour examiner les échelles de caractères et manière dont nous pouvons utiliser le plug-in pour les configurer plus rapidement 19. Utiliser une échelle typographique: Nous avons donc créé ces deux textiles. Je vais continuer, maintenir la touche Maj enfoncée , les sélectionner toutes les deux, puis les supprimer. De cette façon, nous pouvons aller de l'avant et en configurer un à l'aide de Typescales Maintenant, il existe un plugin pour le faire facilement. Tout ce que vous avez à faire est d'aller dans l'onglet Actions ou dans le menu Actions, rechercher Typescale et j'aime bien celui-ci avec le fond jaune dans le logo Je vais donc aller de l'avant et ouvrir celui-ci. Et il existe différents systèmes que vous pouvez utiliser dans votre typscale Maintenant, si vous allez sur typescale.com, vous pouvez le voir en action pour voir à quoi cela ressemble Je peux même le remplacer par la police noto Sans que j'utilise. Juste pour voir à quoi ça pourrait ressembler. Voici donc ma police de caractères. La taille du corps est de 16 pixels et je peux utiliser différentes échelles. Donc, en commençant par une seconde mineure, qui correspond à un plus petit écart entre les différentes tailles, il y a une seconde majeure avec une plus grande différence. Et au fur et à mesure que vous passez à la troisième place majeure et à la quatrième place parfaite, vous constatez une plus grande différence. Maintenant, nous voyons généralement les projets utiliser un tiers majeur, un quatrième parfait ou même peut-être un tiers mineur. Je pense que le troisième majeur est une bonne option. Maintenant, pour notre police body, nous n'avons pas vraiment besoin d'autant de polices. C'est vraiment pour le titre que nous avons besoin de polices différentes. Ou des échelles différentes. Pour le corps, nous pourrions en fait opter pour un légèrement plus grand et un légèrement plus petit. Peut-être trois au total. maintenant à notre titre, donc ce serait celui-ci , le rouleau vasculaire Voici les polices que nous allons configurer. Vous pouvez également les voir en pixels. Et nous pouvons toujours l'arrondir vers le bas, donc utilisez 61 pixels pour H un, 49 pixels ou 48 pixels pour H deux, 39 pixels pour H trois, et ainsi de suite. Nous voulons donc le configurer à l'aide de ce type de plug-in de balance. Figma. Et tout ce que nous avons à faire sélectionner le texte que nous avons, dans ce cas, est sélectionner le texte que nous avons, dans ce cas, ce texte de titre avec la police de titre sélectionnée de 16 pixels, et nous allons choisir le tiers principal comme option. Et choisissez arrondir au pixel entier le plus proche, afin de ne pas obtenir de décimales et de créer Typescale . Et voilà. Le plug-in s' installe automatiquement dans notre projet. Nous pouvons simplement les sélectionner toutes, les déplacer vers le bas. Et une fois qu'ils sont tous sélectionnés, vous pouvez les espacer un peu plus comme ceci en utilisant ce séparateur violet, en utilisant ce diviseur ici Et je vais me débarrasser de cette toute petite pièce. Nous n'en avons pas vraiment besoin. De plus, comme nous utilisons un texte d'en-tête ici, n' aurons probablement pas besoin du texte de 13 pixels non plus. Nous allons les utiliser ici, en commençant par H. Nous allons donc appeler celui-ci H un ou H deux, H trois, quatre, cinq, six, puis appeler celui-ci R sept, deux. Pour le faire, car pour le moment, ce plugin ne crée pas de styles pour nous. Nous devons donc sélectionner la police ici. Et encore une fois, allez ici et appelez celui-ci H sept. Créez du style et progressez jusqu'à H one. Alors créez-en un autre, appelez-le à six ans, créez du style. Pour celui-ci, nous allons faire plus H cinq plus H quatre. Alors prends une seconde pour le faire avec moi. Il en reste encore trois. Celui-ci a trois ans. Et voici les noms pour cela, de sorte que lorsque nous les appliquons, nous sachions ce qu'ils signifient. Deux ans, et celui-ci sera H un. Oups, bonjour, allons-y. Alors maintenant, si vous cliquez sur notre toile, nous voyons que nous avons également tous ces textiles. Ils ne sont pas vraiment organisés. Nous pouvons également les regrouper. Donc, si vous voulez le faire, nous pouvons sélectionner le premier , maintenir la touche Maj enfoncée, comme le dernier, cliquer avec le bouton droit de la souris, ajouter un nouveau dossier et appeler celui-ci ou des polices de titre comme celle-ci. Maintenant, ils sont tous dans ce dossier d'en-tête. Magnifique. Maintenant, nous voulons faire la même chose avec notre police de caractères. Exécutons la même échelle de type de plugin. Et encore une fois, pour celui-ci, nous ne voulons utiliser qu'une police vers le haut et une autre vers le bas. Nous ne voulons pas en faire trop, arrondir au pixel le plus proche et faire le troisième majeur. Créez une échelle de type. Nous en avons maintenant trois différentes, légèrement plus grande, une légèrement plus petite. Je vais encore les espacer un peu. Et nous allons faire de même. Nous allons sélectionner le premier, appeler celui-ci notre body LG pour « grand », créer du style », celui-ci. Nous allons faire plus, et simplement appeler celui-ci notre corps, créer du style, et nous allons le faire ici encore une fois et faire du body SM pour les petits. Ou vous pouvez également appeler celui-ci un texte de pied de page. Les deux fonctionnent vraiment. Allez l'appeler pied de page. Maintenant, une chose que je vous recommande de faire est d'abord de les organiser soigneusement comme ceci et de les dupliquer pour vos polices de corps, et nous allons toutes les détacher ici. Nous allons tous les sélectionner et définir le gras comme poids, puis créer les styles de boulons. Nous allons donc faire plus sur ce premier point, l' appeler body g bold. Créez du style. Et celui-ci, nous allons créer du style, Body Dash Bull, créer du style, et celui-ci, nous allons faire Footer Dash Bull, créer du style Maintenant, ils ne sont pas vraiment beaux tels que nous les avons ici. Ce n'est pas vraiment utile. Donc, au lieu de cet espace réservé de Quickfox, remplacez-le par H un, remplacez-le par H deux. Modifications apportées à H trois. Encore une fois, ce n'est pas juste pour vous. C'est également pour les développeurs qui examineront vos systèmes de conception et appliqueront les couleurs et les styles au texte que vous avez. Pour que la convention de dénomination soit correctement définie, nous allons faire de même, leur donner les noms qu'ils portent, donc celui-ci est un LG. Celui-ci n'est qu'un corps. Celui-ci est en bas de page. Et voilà, vous l'avez deviné. Nous allons le renommer body g bold. Celui-ci sera body dashbl et celui-ci sera footer Organisez-les soigneusement. Nous allons également les placer sous le corps du texte dans le panneau de propriétés de droite, ajouter un nouveau dossier et appeler ce dossier body. Nous avons donc nos polices de titres. Nous avons configuré ici nos polices corporelles sous forme de textiles, prêtes à être utilisées, et nous les organisons toutes en section, dessinons une section autour ces textes et appelons cela nos styles de texte. Mettez-les simplement ici pour référence. Notre guide de style est donc à peu près configuré. Nous sommes prêts à commencer à configurer notre projet et à appliquer nos couleurs et notre type selon nos besoins. Pour ce faire, je vais créer une nouvelle page ici, appeler celle-ci nos maquettes, et c'est ici que nous allons créer nos maquettes Revenons donc à la prochaine conférence pour commencer. 20. Styles vs variables: Avant de continuer, je voudrais également aborder les variables locales. Maintenant, nous avons des styles et nous avons également des variables. Dans nos variables, nous pouvons également configurer des éléments tels que des variables de couleur et des variables de chaîne, que nous pouvons utiliser pour des éléments tels que la famille de polices, etc. Maintenant, il y a au moins deux avantages à utiliser des variables par rapport aux styles pour nos couleurs. Et ces deux points sont les premiers, vous pouvez avoir un système de conception plus compliqué et avoir des variables interconnectées les unes aux autres. Supposons que vous créiez une couleur de surface à utiliser pour vos boutons. En créant un système de design autour de cette couleur à l'intérieur de votre table variable, vous pouvez préciser la manière dont ces couleurs sont destinées à être utilisées. Et dans ce cadre, vous pouvez également avoir différents modes. Donc, si vous voulez un mode sombre, vous pouvez le configurer plus facilement en utilisant des variables par rapport aux styles. Et le deuxième avantage est que vous pouvez réellement utiliser ce que l' on appelle le scoping. Donc, si vous voulez, disons, créer une couleur qui ne doit être appliquée qu'à vos bordures. Voilà donc le contour, disons vos boutons, vous pouvez faire en sorte qu'à l' aide de variables, vous spécifiez où cette couleur doit être utilisée afin que ce ne soit pas très compliqué lorsqu'il s'agit de sélectionner des couleurs. Compte tenu de ces avantages, je recommande personnellement de configurer les couleurs en tant que variables. Mais en réalité, cela dépend de vos préférences personnelles, et peut-être travaillez-vous avec une équipe qui utilise déjà des styles et qui les utilise bien. Alors n'hésitez pas à sauter cette étape et à continuer avec les styles. Et si vous souhaitez continuer à configurer des variables, il vous suffit rechercher les styles que nous avons créés vous suffit de rechercher les styles des variables, puis de les connecter. C'est parti, et nous allons détecter tous les styles que vous avez créés jusqu'à présent. Vous pouvez leur donner un nom de collection afin qu'ils soient tous regroupés dans la collection de couleurs, puis convertir les styles en variables. Donc maintenant, si je ferme ce plugin, vous pouvez voir sous les collections ici, que nous avons une collection de couleurs, et toutes ces polices avec même leur regroupement ont été transférées dans le tableau des variables. Maintenant, nous avons toujours des styles ici. Donc, ce qui se passera, c' est que si nous créons un rectangle, lorsque nous sélectionnons la couleur, nous voyons que nous avons ces variables, et vous saurez que c'est une variable car elle a ici une forme carrée, et celles avec un cercle sont en fait des styles. Maintenant que je continue avec les variables, je n'ai plus besoin de styles Je vais donc supprimer tous ces styles. Et continuez en sélectionnant simplement l'une des variables. Maintenant, disons que pour ces textes, nous n'allons pas appliquer les couleurs du texte au remplissage d'un rectangle. C'est ici que vous pouvez utiliser le scoping en accédant à vos variables et en descendant, disons, aux variables textuelles. Maintenez la touche Maj enfoncée, sélectionnez-les toutes et cliquez sur cette option pour définir l'étendue uniquement pour le remplissage des textes, non pour les traits ou les effets. Maintenant, ce qui va se passer, c'est que pour notre rectangle, nous ne verrons plus cette option de texte. Mais si nous créons un texte, disons ici et choisissons le remplissage, nous verrons ces options de texte, et voilà. C'est donc l'un des avantages des variables et c'est pourquoi je vais continuer à utiliser des variables tout au long du projet. Mais encore une fois, c'est vraiment bon 21. Créer des grilles de disposition de cadres: Il est temps de commencer à assembler nos maquettes pour notre design, et j'ai ouvert mes wireframes Donc, si vous avez vos wireframes à portée de main, placez-les simplement devant vous afin de pouvoir les utiliser pour vos Je vais commencer par la page d'inscription ici, puis me diriger vers la droite pour toutes les autres pages Et il y a probablement quelques pages que je vais vous laisser comme devoir à faire pendant votre temps libre. Ensemble, nous allons travailler sur les pages que nous avons ici. Donc, en commençant par la page d'inscription, je passe ensuite à la page des maquettes que j'ai créée Si votre projet ne comporte pas de page de maquettes, vous pouvez créer une nouvelle page en appuyant sur le bouton Plus ici, en ajoutant une nouvelle page, puis renommant en maquettes afin pouvoir organiser vos maquettes et les conserver soigneusement Maintenant, pour démarrer notre projet et créer notre écran d'inscription, nous avons besoin de cadres Les cadres nous aident essentiellement à assembler nos designs pour chaque écran. Donc, en général, nous utilisons un cadre pour chaque écran. Vous pouvez maintenant accéder aux cadres en cliquant sur le cadre ici dans la boîte à outils ou en appuyant sur F sur votre clavier Et puis, sur le côté droit, vous trouverez des options par défaut qui s'affichent généralement. Vous avez des tailles d'iPhone Android par défaut, certaines tailles de tablettes. Et ce qui nous intéresse, ce sont les tailles des ordinateurs de bureau. Et j'opte généralement pour la taille de l'ordinateur de bureau ici. Allons-y. En cliquant dessus, j'ai créé un cadre de la taille d' un bureau. C'est 14 x 40 x 1024 pixels. Maintenant, bien sûr, vous pouvez également dessiner des cadres. Ainsi, si vous appuyez sur F sur le clavier, vous pouvez dessiner un cadre personnalisé taille de votre choix, et à tout moment, si vous maintenez la touche Maj enfoncée pendant que vous dessinez votre cadre, vos rectangles votre cadre, vos rectangles ou autre chose largeur et la hauteur seront , la largeur et la hauteur seront verrouillées afin que vous puissiez dessiner un cadre carré si vous le souhaitez C'est également un conseil pratique à garder à l'esprit. En utilisant Shift One, vous pouvez zoomer pour voir tout ce que vous avez. Je suis donc rapidement revenu à ce cadre de bureau que j'ai. Je vais faire un petit zoom arrière ici et je vais double-cliquer pour le renommer en Inscription Maintenant, le nom de ce cadre est inscription . Ainsi tous ceux qui regarderont ce design et moi-même saurons qu'il s' agit de la page d'inscription Et s'ils ont besoin de le trouver, ils peuvent également le voir dans le panneau Calques. D'où vous pouvez également double-cliquer pour modifier le nom. Génial Qu'y a-t-il dans cette page ? Nous avons deux sections dans cette page. Nous avons une section d'images ici sur la droite, puis sur la gauche, nous avons un e-mail. Nous avons le titre de l'entreprise accompagné texte descriptif expliquant ce qu'est Wander Weiss, ou pourquoi elle devrait créer un compte, suivi certains champs de saisie et de boutons d'inscription, ainsi que de certaines Ou nous avons un signe et un bouton Google, puis également un signe et un champ de numéro de téléphone. Commençons donc par ce design. La première chose que nous voulons faire est diviser notre écran en deux sections et de diviser clairement ces cadres. Ce que nous pouvons faire, c'est utiliser ce que l' on appelle une grille de mise en page. Maintenant, pour configurer une grille de mise en page, il vous suffit de cliquer sur votre cadre, puis d'aller jusqu'à l'endroit où il est indiqué grille de mise en page dans le panneau des propriétés , puis d'en ajouter une comme celle-ci. Généralement, vous obtenez une grille comme celle-ci, mais ce qui nous intéresse, qui est la plus couramment utilisée, est une grille à colonnes. Nous allons donc passer du type à une grille de colonnes. Ensuite, nous allons cliquer sur les paramètres de la grille de mise en page pour appliquer certains paramètres personnalisés. Généralement, dans un projet Web comme celui-ci, nous voyons un nombre de 12 pour nos colonnes. Nous avons donc 12 colonnes sur la page. Et il s'agit plutôt d' un dimensionnement standard ou d'une grille standard qui compose les sites Web, soit 12 colonnes Et vous verrez des pages diviser ces 12 colonnes pour afficher différents contenus sur le côté droit, sur le côté gauche et au milieu. Maintenant que les marges sont l' espacement entre la gauche et la droite, j'aime généralement utiliser un système de grille à huit points, ce qui signifie essentiellement que vous voulez conserver tous les multiples d'espacement du chiffre Donc, conformément à cela, une marge de 48 pixels s'avère être une très bonne marge à utiliser. Maintenant, la gouttière est espacée entre chaque colonne. Et actuellement, il est à 20 ans. Mais encore une fois, en utilisant ce système de grille à huit points, je vais choisir huit fois trois ou 24. Magnifique. Vous pouvez également supprimer l'opacité ici ou même changer la couleur de votre grille si vous le souhaitez Je vais faire 5 % pour que ce soit un peu plus léger. Nous n'avons pas besoin qu'il soit aussi fort. Désormais, vous pouvez toujours activer ou désactiver votre grille ici afin de pouvoir désactiver ou l'activer chaque fois que vous souhaitez y accéder rapidement Nous avons donc configuré notre cadre. Nous avons mis en place une grille à l'intérieur. Revenons à la section suivante pour commencer à assembler ces sections. 22. Colonnes de la page d'inscription: Il est temps de créer notre page d'inscription. Nous allons donc configurer deux cadres ici, un pour l'image que nous allons avoir sur le côté droit. Nous allons donc trouver une belle image à utiliser, puis nous allons avoir le côté gauche, où se trouve le contenu ici. Revenons donc à notre projet. Je vais appuyer sur F sur le clavier et dessiner un cadre comme celui-ci. Et pour le moment, vous ne pouvez pas vraiment voir parce qu'il n' y a pas encore de remplissage. J'ai un cadre ici, je suis en train de le redimensionner, et nous allons utiliser quatre colonnes ici En fait, je pense que cinq œuvres. Et ce que vous remarquerez c'est que lorsque votre grille est active, les choses se mettent en place immédiatement lorsque vous êtes près des bords. Et pour ce qui est de la hauteur, vous devez vous assurer qu'elle est pleine. Et vous pouvez également vérifier cela à partir d'ici. Vous pouvez voir que c'est X zéro et Y zéro, qui est le coin supérieur gauche. Et c'est aussi 1024 pour les hauteurs. C'est génial. Alors maintenant, nous allons appuyer sur F, créer une autre image, et celle-ci sera de l'autre côté. Donc, ici, il y a sept grilles. Nous avons donc maintenant deux cadres qui divisent la page. Et ce que nous allons faire, c'est aller de l' avant et, pour le moment , masquer la grille et nous concentrer sur notre design Maintenant que nous savons où ira l'image où ira le contenu de l' inscription. Pour le remplissage, je vais ajouter un remplissage ici afin que nous puissions ajouter une couleur à l' arrière-plan de notre cadre. Et je vais choisir la variable d'arrière-plan que j'ai créée. Cela servira donc de toile de fond. Page d'inscription, puis nous voulons commencer à ajouter quelques éléments ici Nous voulons donc ajouter un texte ici en utilisant le Tiki, à droite. Ensuite, parmi nos styles, nous allons choisir d'essayer H two. C'est une bonne taille de police. H un est peut-être un peu trop grand, il est donc probablement préférable d'opter pour H deux pour celui-ci. Ça a l'air bien. Maintenant, je ne vais pas trop m'inquiéter l'alignement et de tout le reste. Pour le moment, je vais juste tout aligner au milieu. Et je vais dupliquer ce texte en maintenant la touche Alt enfoncée et en le faisant glisser pour le dupliquer et en créer un autre Et celui-ci va servir de description. Nous allons donc probablement opter pour un H six, alors essayons body Large pour celui-ci. Et écrivons un livre Des destinations et des forfaits incroyables en une seule fois. Ce sera donc le slogan que nous utiliserons. Et j'utilise Alt ici pour redimensionner cette zone de texte à la fois de gauche et Et nous allons aligner le texte central de manière à ce que tout ce qui s'y trouve soit aligné au milieu en termes de texte. Pour le VanderbisFont, je vais essayer l'une des couleurs secondaires que nous avons ici J'aime les tons plus sombres, mais pas trop foncés. Je pense que le 800 secondaire convient vraiment bien au logo ici ou au texte. Et, bien sûr, si nous avons un logo, nous pouvons l'ajouter ici. Mais pour ce projet, nous utiliserons le texte comme logo lui-même. Et pour le texte de description, nous utiliserons le texte 400. C'est donc subtil, gris, ce n'est pas complètement noir. C'est aussi un peu plus léger et agréable pour les yeux. OK, ça a l'air bien. Maintenant, nous voulons deux entrées ici ou en fait trois, une pour le numéro de téléphone deux, puis deux boutons ici. Une inscription, une inscription avec Google. Désormais, ces entrées feront partie d' un système de conception que nous utiliserons tout au long de notre projet. Il est donc important que nous concevions une entrée agréable que nous puissions utiliser partout sans avoir à refaire une entrée partout, partout où nous en avons besoin Et idéalement, nous voulons utiliser Autoayout pour rassembler non seulement cette entrée, mais également configurer le contenu ici à l' aide d'une mise en page automatique Et nous reviendrons lors de la prochaine conférence pour explorer les avantages de cette approche et également pour configurer nos champs de saisie. 23. Utiliser la mise en page automatique: ai créé des designs généralement sans mise en page automatique, alors j'espère que cette conférence fera vraiment changer d'avis et vous montrera également les avantages de la nécessité d' utiliser Autoayout presque partout dans vos À titre d'exemple, disons que j'ai ici un tas d' entrées que nous voulons placer dans notre conception. Je ne suis donc pas en train de créer les impos pour le moment. Je ne fais que vous montrer un exemple ici. Si j'ai un tas d' entrées, même un bouton, disons une autre entrée ici, elles ne sont organisées dans aucun format structuré. Certaines choses peuvent se produire où je peux accidentellement égarer des objets ou les désaligner De plus, si je veux déplacer celui-ci ici, disons ailleurs, donc je veux le déplacer un peu plus bas, je dois également déplacer celui-ci. Même chose ici. Si je veux, par exemple, déplacer celui-ci un peu plus haut, je dois apporter des modifications à tous les niveaux de mon design. Et maintenant, si ce chiffre est trop élevé, cela se rapproche de ces textes ici et je dois déplacer ces textes. Le réglage manuel des cadres à l' intérieur de vos designs nécessite donc beaucoup de travail manuel . Aujourd'hui, même en phase de développement, il est plus systématique de placer les éléments dans un format structuré Et c'est là que la mise en page automatique est utile. Si je clique sur ce cadre et que j'appuie sur Shift A sur mon clavier, le cadre deviendra une mise en page automatique. Comme vous pouvez le constater, tout vient d'être parfaitement organisé. En soi, et cela ne ressemble pas tout à fait à ce que nous voulions, cependant. Je vais donc appuyer sur la commande Z pour annuler cela. Je vais vous montrer une autre façon de le faire qui est un peu plus intelligente. Et si vous cliquez avec le bouton droit sur votre cadre et que vous passez à d'autres options de mise en page et que vous suggérez la mise en page automatique, FIGMA regardera l'intérieur de votre cadre ici et remarquera que vous avez un tas de choses différentes qui peuvent en fait nécessiter une mise en page automatique supplémentaire Alors maintenant, FigMas a créé trois mises en page automatiques, en fait, techniquement quatre, étant donné qu'il s'agit du cadre principal qui a également été transformé en cadre de mise en page automatique J'en ai donc un ici pour ces deux boutons ou entrées ou quoi que ce soit d'autre. Et ceux-ci ont également été mis en place dans une mise en page automatique, et ils ont tous leur espacement unique entre eux, qui pour celui-ci est de 21 pixels, soit l'écart en fait Et celui-ci a un écart de 124, donc ils ont tous des écarts différents entre les deux. Je me souviens que ce que j'ai mentionné il y a quelques conférences, c'est que je recommande généralement d'utiliser le système de grille à huit points même pour l'espacement entre les éléments Maintenant, avec ma mise en page automatique pour le Wander ois et le sous-titre ou la description, je recommande soit 16 pixels entre les deux, soit un espacement 16 ça a l'air bien, donc je vais m'en tenir à 16. Maintenant, pour le contenu d'ici, nous pouvons le laisser à 60. Je n'ai pas vraiment besoin de tout cela pour l'instant car nous allons créer nos propres entrées. Maintenant, vous remarquerez qu'avec la mise en page automatique, si vous supprimez du contenu, si vous supprimez du contenu, le cadre de mise en page automatique sera redimensionné Vous pouvez donc voir toutes les propriétés d'une mise en page automatique sur la droite ici, à commencer par la largeur et la hauteur, les options d'alignement, afin que vous puissiez réellement aligner les objets de votre mise en page automatique du centre vers le Maintenant, pour le moment, nous n' avons même pas d'espacement. L'écart entre tous nos éléments à l'intérieur de cette mise en page automatique est donc de 60 pixels. Cela signifie donc que si j'ajoute un élément ici, comme un rectangle, il aura 60 pixels par rapport aux autres éléments. C'est logique. Et puis ici, nous avons nos marges entre chaque côté, le côté gauche, le haut et le bas. Maintenant, cette option est activée pour le moment car elle nous permet d' ajouter des rembourrages individuels entre les différents côtés Nous n'en avons pas vraiment besoin pour le moment . Nous pouvons donc ajouter un rembourrage à droite et à gauche en même temps en utilisant ce numéro ici, et nous utiliserons le rembourrage de 48 pixels dont nous avons parlé Lorsque nous avons configuré nos grilles, nous allons appliquer la même grille ici Mais pour notre rembourrage vertical, nous allons faire un peu plus haut, donc nous pouvons en faire 86 ou 96 Ils ont donc plus d'espacement en haut et en bas. Les cadres de mise en page automatique ont généralement des tailles flexibles. Cela signifie donc que si les éléments contenus dans un cadre de mise en page automatique se rétrécissent, comme nous nous débarrassons de cette année de texte, comme vous pouvez le constater, la mise en page automatique se réduit pour correspondre au contenu qu'il contient Je vais appuyer sur la commande Z pour annuler cela. C'est parce que Hug est actuellement allumé ici. Mais si vous voulez réellement passer à une taille fixe, suffit de redimensionner notre cadre de mise en page automatique ici, il suffit de redimensionner notre cadre de mise en page automatique ici, de le ramener complètement vers le bas, et maintenant il a une taille fixe, ce que nous voulons pour ce boîtier Mais ce n'est pas toujours le cas, comme nous l'apprendrons lorsque nous rassemblerons nos contributions lors de la prochaine conférence. Nous avons donc maintenant un cadre de mise en page automatique avec une hauteur de 1024 pixels et une largeur fixe de 594 pixels, il est formaté Sa mise en page est verticale, ce qui signifie que lorsque j'ajoute des éléments à l'intérieur, elle sera alignée verticalement. Sinon, si je choisis l'horizontale, les choses iront dans des directions différentes. Nous allons créer de nombreuses mises en page afin que vous appreniez différentes directions sur la façon de les utiliser. Nous pouvons voir ici l'écart entre les différents objets, notre marge entre l'horizontale vers la gauche et la droite, et la marge verticale ou le rembourrage ici Alors c'est tout. Pour l'instant, revenons en détail pour commencer à rassembler nos contributions 24. Créer des champs de saisie: J'espère que la conférence précédente vous a donné une idée de la façon d' utiliser Autolayout Si ce n'est pas le cas, ne vous inquiétez pas, nous allons l'utiliser énormément. Vous aurez donc certainement l' occasion de mieux le comprendre. Alors maintenant, nous voulons mettre quelques champs de saisie ici, un pour le courrier électronique, pour le mot de passe. Comment s'y prend-on ? Eh bien, nous pouvons réellement créer des champs en utilisant Autoayout Tout ce que nous avons à faire est d' appuyer sur la touche T de notre clavier et de cliquer ici dans notre cadre, et pour l'instant, nous appellerons cela entrée. Ou mieux encore, nous l' appellerons placeholder. Nous allons maintenant appuyer sur Shift A ou cliquer avec le bouton droit de la souris pour ajouter Autoayout Et maintenant, nous avons une disposition automatique autour de cela, sans rembourrage à gauche ou droite, à l'horizontale ou à la verticale Nous voulons donc réellement changer cela et avoir un rembourrage pour l'horizontale , soit 16 pixels Et pour notre verticale, essayons huit pixels et voyons si c'est bon. Maintenant, ce que nous allons faire, c'est touche Maj enfoncée, sélectionner ce titre et ce sous-titre ici également, puis appuyer à nouveau sur Shift pour créer une autre mise en page automatique Et donc, de cette façon, nous avons cet élément à l'intérieur de celui-ci ici. Maintenant, nous pouvons passer à la largeur, et au lieu d'avoir cette largeur fixe, nous allons choisir de remplir le conteneur afin que cette entrée occupe toute l'horizontale prise par ce cadre de mise en page automatique parent. Parce que là encore, nous voulons que tout soit cohérent. Nous allons maintenant ajouter un fond pour que notre entrée soit blanche, et nous allons ajouter un rayon d'angle de huit pixels autour de celle-ci. Nous allons maintenir la touche Commande enfoncée afin de pouvoir sélectionner rapidement les éléments à l'intérieur de notre cadre de mise en page automatique , comme ce texte ici. Et au lieu de la taille du corps, je vais le remplacer par un simple corps. Pour notre saisie, nous n'avons pas besoin de cette grande taille, et nous voulons également aligner notre texte à gauche. Ça commence à se rassembler. Enfin, je vais écrire du texte, peut-être 200 pour cette couleur d' espace réservé Ensuite, une fois que le texte est réellement écrit à l'intérieur, nous pouvons l'agrandir. Très bien, c'est un peu petit pour la saisie de texte. Donc, au lieu de huit pixels, donc au lieu de huit pixels pour le bas et à gauche pour le bas et le haut, je vais essayer un espacement de 12 pixels, et je pense que c'est plutôt une taille d'entrée typique Nos contributions se rejoignent donc. Nous souhaiterons peut-être lui ajouter un titre afin que les utilisateurs sachent exactement quelles informations saisir ici. Pour ce faire, appuyez à nouveau sur T, écrivez un titre comme celui-ci et maintenez la touche Maj enfoncée pour les sélectionner à nouveau Ces deux-là, appuyez sur Shift A, et maintenant ils se trouvent également dans une mise en page Ato. Nous ne voulons pas que cet écart soit si grand ici. Nous voulons un écart plus petit, nous pouvons donc simplement faire glisser cet espacement ici jusqu'à huit pixels Vous pouvez également ajuster cet écart à partir d'ici. Ensuite, au lieu d' un alignement central vers le haut, nous voulons effectuer un alignement vers le haut à gauche de manière à ce que tout soit aligné à gauche de ce cadre de mise en page. Nous avons donc maintenant ce joli champ de texte réservé ou champ de saisie avec un titre ici Il semble qu'il manque quelque chose, et je pense que c'est une belle bordure autour de l'entrée réelle. Alors allez-y et sélectionnez la mise en page automatique à l'intérieur de cette mise en page parent afin de ne sélectionner que l'entrée elle-même cette manière, puis d'ajouter un trait pour ajouter une bordure autour de celle-ci. Maintenant, il y a un trait noir autour de lui. Il fait un peu trop sombre ici. Donc, ce que nous voulons faire, c'est faire quelque chose autour de la couleur secondaire que nous avons, peut-être une couleur secondaire 700 ou peut-être même une couleur plus claire. Je pense que ce 200 primaire est en fait un peu plus beau . Je vais donc opter pour ça. Nous avons maintenant une contribution ici. Ça a l'air super. Maintenant que nous allons réutiliser cette entrée à plusieurs endroits, il est préférable de la transformer en composant. Et pour cela, revenons-y lors de la prochaine conférence. 25. Créer des composants: dernière conférence, nous avons rassemblé cette entrée et avons utilisé la mise en page automatique pour l'assembler. Maintenant, ce que nous voulons faire, c'est transformer cette entrée en un composant, ce qui nous permettra de réutiliser ce composant à plusieurs endroits. Et si nous devons apporter des modifications à l'entrée ici, parce qu'il s'agit d'un composant, modifications peuvent se produire beaucoup plus rapidement car il suffit de les apporter à un seul endroit, et c'est le composant principal est appliqué à toutes les instances. Cela aura plus de sens au fur et à mesure que je commencerai à l'assembler. Donc, ce que nous voulons faire , c'est entrer ici, sélectionner cette couche dont le cadre de mise en page automatique contient le titre et la zone de texte, et appuyer sur Alt Command K sur Mac ou Alt Control K sur Windows. Maintenant, vous pouvez également aller ici et appuyer sur Créer un composant à partir de ce bouton. Et maintenant, cela a été transformé en composant. Vous pouvez voir que la couleur n'est pas violette pour la bordure, et dans le panneau des calques, elle est également violette ici, ce qui indique qu'il s'agit d'un composant. Maintenant, ce symbole montre qu'il s'agit en fait du composant principal. Vous ne voulez donc pas vraiment avoir votre composant principal à l'intérieur d'un cadre. Vous voulez les avoir séparément ailleurs, exemple sur une page séparée avec tous les autres systèmes de conception ou simplement placés séparément avec tous vos autres composants. Donc, pour cette raison, je vais le faire glisser hors d'ici, en dehors du cadre d'inscription, le placer ici. Et en fait, nous pouvons même le renommer en double-cliquant et en l'appelant input feel. Nous y voilà. À l'heure actuelle, il est difficile de voir le titre. Nous pourrions donc créer une section pour nos composants. Je vais donc créer une section ici afin que nous puissions simplement placer nos composants à l'intérieur d' une section avec une couleur d' arrière-plan. Alors pourquoi ne pas changer la couleur de fond en blanc ou mieux encore, vous pouvez même choisir la couleur d' arrière-plan en blanc, et nous allons renommer les composants de cette section Donc, chaque composant que nous avons, le principal, nous allons le placer dans cette section des composants. Et maintenant, nous avons le composant principal ici pour en avoir une copie ou, comme on l'appelle, une instance de celui-ci à l'intérieur d'ici. Nous pouvons simplement le copier et le coller en utilisant la commande C. Double-cliquez ici, cliquez ici et collez-le avec Command V. Génial. Et comme vous pouvez le voir, il a été redimensionné car dans ce cadre de mise en page automatique, c'est la taille que nous avons pour le contenu Et par défaut, la zone de texte remplit tout le conteneur, ce que nous voulons. En fait, cela peut être un peu trop large en termes de champ de texte. Nous pouvons donc examiner toute notre mise en page ici et ajouter un peu plus de marge. Peut-être qu'au lieu de 48, nous pouvons en faire 80, et c'est une meilleure taille pour cela en termes d'espacement entre la gauche et la droite Alors maintenant, vous pouvez voir qu'il s'agit d'une instance et non du composant principal en utilisant ce symbole ici. Ce n'est pas le même symbole que ci-dessus pour indiquer qu'il s'agit d'une instance. Qu'est-ce que cela signifie ? Cela signifie que si j'apporte des modifications, disons, au texte ici et que je commence à écrire quelque chose ici, mon composant principal reste intact, et voici à quoi il ressemble. Cependant, pour ce qui est de mon composant principal, disons que je souhaite modifier un écart au lieu d' avoir un écart de huit pixels entre le titre et le cadre, je veux un écart de 20 pixels. Ce changement s'est également reflété automatiquement dans mon instance. Je vais appuyer sur Command Z pour annuler cela. Et encore une fois pour annuler le changement de texte ici. Cela signifie donc que dans nos instances, nous pouvons apporter les modifications que nous voulons, et cela ne sera pas appliqué à notre composant principal, ce que nous voulons. Ainsi, nous pouvons double-cliquer sur le titre, le changer en e-mail. Nous pouvons double-cliquer sur l' espace réservé et le modifier pour envoyer un e-mail à at@gmail.com, par exemple Maintenant, nous avons une entrée pour l'e-mail, et nous pouvons simplement le dupliquer en appuyant sur la commande D avoir une autre copie et renommant celui-ci notre mot de passe Et à l'intérieur, nous allons mettre un mot de passe fictif en utilisant Alt et le numéro huit sur mon clavier pour créer un mot de passe fictif ici passe fictif en utilisant Alt et le numéro huit sur mon clavier pour créer un mot de passe fictif ici Voilà, nous l' avons. Maintenant, l'écart entre les deux est un peu trop grand. Nous pouvons donc les sélectionner, appuyer sur Shift A et modifier l'écart à 24 pixels. C'est mieux. C'est ainsi que nous créons des composants à partir d'éléments. l'avenir, nous allons créer un tas d' autres composants pour d' autres choses, comme des boutons, des cartes. Et encore une fois, tout élément que nous pensons pouvoir réutiliser en grande partie dans nos designs. Une autre chose que je vais faire est modifier le texte du titre ici. Au lieu d'être noir, je vais le remplacer par notre texte 500, qui est légèrement plus clair. Et encore une fois, c'est mieux pour les yeux. Revenons donc dans la section suivante pour terminer la création de notre page d'inscription. 26. Ajouter des boutons: C'est bon. Poursuivant donc notre page d'inscription, nous avons quelques éléments supplémentaires à ajouter à cette page. En repensant aux wireframes, nous avons déjà ajouté les champs ici, ce qui est formidable Nous avons donc maintenant besoin de quelques boutons pour nous inscrire ou nous connecter avec un numéro de téléphone ou un compte Google. Nous avons donc besoin de quelques boutons ici, et nous voulons également une image. Alors pourquoi ne pas commencer par les composants des boutons, les créer, les ajouter à notre page, puis revenir plus tard pour la partie image. Maintenant, pour les boutons, le moyen le plus simple est de créer également un bouton à l'aide d'Autoayout, et nous le ferons en dehors d'ici afin créer un composant réutilisable tout au long de notre projet Avec des éléments tels que les boutons et les entrées, vous devez absolument les transformer en composants. Donc, si vous devez apporter des modifications, c'est simple et rapide, et tout se trouve au même endroit. Maintenant, pour créer le bouton, juste à l'extérieur de mon canevas, je vais créer une couche de texte à l'aide du Tiki sur mon clavier et écrire un simple texte d' espace réservé comme le bouton fonctionne comme ça Et pour en faire une mise en page automatique, je peux soit cliquer avec le bouton droit de la souris et appuyer sur la mise en page, soit utiliser un raccourci Shift A pour faire le Voilà, nous avons maintenant un bouton. Il y a déjà un peu de rembourrage sur les côtés, que l'on peut voir à dix pixels du haut et du bas et à dix pixels de droite et de gauche Nous pouvons donc certainement l'utiliser ou l' augmenter un peu plus Tout d'abord, je vais renommer la couche en bouton et la transformer en composant à bouton et la transformer en composant aide de la touche Altommand K ou de la touche Alt Control sous Windows Encore une fois, vous pouvez également le faire en appuyant sur ce petit bouton ici. Maintenant, nous avons ce composant de bouton ici, et nous pouvons lui attribuer un arrière-plan et une couleur de texte. Donc, pour l'arrière-plan, je vais ajouter un fond, et je vais utiliser les styles et les variables appliqués, et nous allons également utiliser notre couleur principale 500 notre couleur principale 500 comme couleur principale des boutons. Généralement, vous souhaitez utiliser votre couleur principale et une couleur secondaire pour créer différents types de boutons, ainsi que des sensations et une apparence différentes. Je vais appliquer le même rayon d'angle que le champ de saisie que nous avons créé, huit pixels également pour nos boutons. Donc, il suffit de cliquer dessus et de passer ici à l'apparence et de modifier le rayon d'angle. Ou vous pouvez également le faire glisser jusqu'à huit pixels comme ceci. Cela fonctionne aussi. Nous avons maintenant ce bouton et l'avantage de la mise en page automatique réside fait que si ce texte s' agrandit ou se rétrécit, disons que le nom du bouton est plus long, l'arrière-plan ou le conteneur s'agrandira et diminuera également C'est pourquoi vous souhaitez configurer une disposition automatique pour vos boutons. Maintenant, l'espacement entre le haut et le bas est, je dirais, plutôt sympa, même si nous pouvons l'augmenter légèrement à 12 pixels et il en va de même pour les côtés Je pense que nous pouvons augmenter cela jusqu'à 16 ou même 24 pixels, ce serait génial Maintenant, cette section contient des composants. Je vais également faire glisser notre bouton ici. Nous avons donc maintenant ce magnifique composant de bouton. Nous y reviendrons plus tard pour en créer d'autres variantes. Mais pour l'instant, appliquons celui-ci ici en le copiant. J'ai donc appuyé sur la commande C, en allant dans notre cadre où se trouvent notre e-mail et notre mot de passe, et je les ai collés en appuyant sur la commande V. Encore une fois, sous Windows, ce sera Control Passons maintenant au bouton, je voulais occuper tout l'espace du conteneur en termes de largeur. Il y a donc deux manières de le faire. Vous pouvez soit aller ici où il est écrit Hug actuellement, soit indiquer la largeur en pixels. Il fait donc 101 pixels en ce moment, et c'est un câlin. Maintenant, un câlin signifie que quel que soit le contenu contenu dans la mise en page automatique, qui est actuellement ce bouton, la mise en page automatique se redimensionnera automatiquement en fonction Encore une fois, si le contenu est plus long, nous avons donc un texte de bouton plus long. La mise en page automatique sera redimensionnée. Maintenant, une autre chose que vous pouvez faire est qu'au lieu d'avoir le contenu de la cabane, vous pouvez remplir le conteneur. Donc, dans ce cas, lorsque nous remplissons un conteneur, il occupe toute la largeur du conteneur dans lequel il se trouve. Et comme le conteneur actuel dans lequel il se trouve est celui-ci, ce cadre de mise en page automatique où nous avons nos entrées, il prend la même largeur que ces champs de saisie et remplit tout À partir de maintenant, quelle que soit la longueur du texte, la largeur remplira toujours complètement le conteneur. Maintenant, je vous ai dit qu'il y avait une autre façon de le faire. Je vais donc simplement appuyer sur la commande Z pour revenir en arrière. Un raccourci pour remplir un conteneur consiste à maintenir la touche Alt enfoncée et à double-cliquer sur le bord de votre composant ici. Donc, si je double-clique, cela fera la même chose. Je vais le modifier pour le remplir. C'est donc un petit raccourci que j'ai appris il n'y a pas si longtemps, et qui m'a vraiment été très utile. Nous voulons maintenant renommer le bouton ici en double-cliquant dessus et en le modifiant pour S'inscrire. Et si nous y repensons, nous avons un bouton d'inscription, puis un séparateur Nous reviendrons donc pour le diviseur dans une seconde. Pour l'instant, ajoutons deux autres boutons. L'un pour continuer avec numéro de téléphone et l'autre pour se connecter avec Google. Je vais donc double-cliquer, appuyer deux fois sur la commande D pour dupliquer. Pour celui-ci, je vais le modifier pour inscrire avec un numéro de téléphone, et celui-ci, pour m' inscrire avec Google. Maintenant, une chose qui ne va pas avec ce design, c'est que tous nos boutons se ressemblent. Nous voulons créer différentes variantes de boutons afin d' utiliser un type de bouton secondaire dans certains endroits où une action est considérée comme secondaire. Ainsi, par exemple, les boutons de connexion avec numéro de téléphone et d'inscription à Google ne sont pas les boutons les plus utilisés, ou même s'ils le sont, nous voulons les séparer de ce bouton d'inscription. C'est pourquoi nous faisons deux choses. La première est que nous voulons changer la couleur de ces boutons du bleu principal que nous utilisons au secondaire ou peut-être à un bouton blanc. Et l'autre chose que nous voulons faire est d'ajouter ce diviseur. Revenons donc à Execture pour faire ces deux choses. 27. Variantes de boutons: Deux choses que nous voulons faire sont de remplacer ces boutons un type secondaire et d'ajouter un séparateur Je vais commencer par ajouter un diviseur , et pour ce faire, nous allons également utiliser Autoayout, des lignes et lignes et Donc, pour ajouter une ligne, tu peux appuyer sur L sur ton clavier, ou si tu descends jusqu'à tes formes ici, ton outil de forme, tu peux également cliquer sur Ligne à partir d'ici. Maintenant, lorsque vous tracez une ligne, si vous la tracez n'importe où, disons ici, vous pouvez tracer une ligne au hasard comme ceci. Je vais annuler ou si vous maintenez la touche Maj enfoncée, vous pouvez tracer des lignes droites. Et ces lignes droites seront à un angle de zéro degré, 45 degrés, 90 degrés, et vous aurez compris. Nous voulons donc une ligne droite. Donc je vais juste lâcher prise ici. La largeur n'a pas vraiment d'importance, et je vais la faire glisser dans notre cadre de mise en page automatique ici. Nous avons donc maintenant cette ligne noire ici. Tu peux le voir. C'est très clair. Maintenant, nous en voulons deux pour pouvoir intercaler un texte entre les deux. C'est pourquoi je vais appuyer sur la commande D en la sélectionnant. Lorsqu'un objet se trouve à l'intérieur d'un cadre notre cadre de mise en page ou de tout autre groupe ou conteneur, pour le sélectionner rapidement, vous pouvez maintenir la touche Commande enfoncée et sélectionner directement cet élément. Sinon, vous devez double-cliquer sur ce cadre jusqu'à ce que vous l' atteigniez, et les deux méthodes fonctionnent. Mais l'utilisation de la commande et du clic est simplement plus rapide. Alors maintenant, je vais appuyer sur la commande D pour dupliquer les deux. Je vais également ajouter un texte pour le O, donc je vais appuyer sur T sur mon clavier et taper O. Incroyable. Maintenant, ce que nous voulons faire, c'est que tout cela soit sur la même ligne. Parce que notre mise en page automatique est actuellement définie sur une mise en page verticale, tout va dans le sens vertical. Ce que nous pouvons faire, c'est créer des mises en page automatiques les unes à l'intérieur des autres, comme nous l'avons fait ici Nous avons une mise en page automatique ici pour le cadre parent. Ensuite, nous en avons deux à l'intérieur , un ici et un ici. Donc, en fait, nous pouvons en ajouter une autre à l'intérieur de celle-ci pour maintenir nos lignes de démarcation et le texte ici. Et pour cela, le moyen le plus simple est de double-cliquer pour sélectionner votre ligne. Ou si vous ne le souhaitez pas, vous pouvez également le sélectionner dans votre panneau des calques. Maintenez la touche Maj enfoncée, sélectionnez l'Otext et la ligne 2 sans relâcher la touche Shift Maintenant, appuyez sur Shift A pour créer une autre mise en page automatique à l'intérieur d'ici, et nous pouvons voir ici que nous l'avons fait. Maintenant, au lieu d'une mise en page verticale, vous devinez que nous allons faire une mise en page horizontale. Et ça s'annonce bien. Il y a certaines choses que nous pouvons faire pour y remédier. La première est qu'il sort actuellement de notre mise en page automatique parent. Et une autre raison est que les éléments à l'intérieur ont une largeur fixe, à l'exception de cette texture. Nos lignes ont donc une largeur fixe de 188. Maintenant, vous ne voulez pas le modifier manuellement. Ce que vous voulez faire, c'est les modifier pour qu'ils remplissent le contenant dans lequel ils se trouvent. Donc, quel que soit ce conteneur, nous voulons qu'il remplisse également la mise en page automatique à l'intérieur. Mais pour ce faire, nous devons d'abord sélectionner le cadre de mise en page automatique de division ici. Au lieu d'un câlin, nous voulons choisir un conteneur de remplissage. Alors maintenant, comme vous pouvez le voir, il ne fait que remplir le contenant dans lequel il se trouve, ce qui est excellent. Et maintenant, ce que nous voulons faire, c'est sélectionner la ligne et cette ligne, et j'utilise la commande pour sélectionner différents éléments dans mon panneau RIS. Et au lieu d'une largeur fixe, nous allons la modifier pour remplir le conteneur. Maintenant, ils ont des largeurs égales et occupent autant d'espace que possible dans le conteneur par rapport à l'espacement ou à l'espace qu'ils ont Donc, si vous voulez réduire l'espacement, par exemple de 24 pixels, descendez à huit pixels Comme vous pouvez le constater, il y a moins d'espacement entre le texte et les lignes, ce qui est un peu trop petit. Je pense donc que 16 pixels, c'est un bon écart entre eux. Maintenant, une autre chose que nous voulons faire est de faire en sorte qu' ils soient tous verticalement au milieu. Les lignes sont donc actuellement en haut car par défaut , l' alignement dans le cadre de mise en page automatique est aligné en haut à gauche. Ce que nous voulons faire, c'est aligner le centre manière à ce que tout soit aligné au centre à la fois verticalement et horizontalement. Maintenant, pour le moment, c'est un peu trop fort. Donc, ce que nous voulons faire, c'est changer la couleur noire pour autre chose. Actuellement, nous changeons la couleur de tout, donc du texte et des lignes car lorsque nous sélectionnons le cadre de mise en page automatique, il nous montre les couleurs utilisées à l'intérieur du cadre, et nous pouvons rapidement définir la nouvelle couleur afin de pouvoir faire quelque chose comme 200 couleurs secondaires. Je pense que ce texte 100 correspond bien aux lignes de démarcation. Pour le texte lui-même, cependant, nous pouvons le rendre un peu plus sombre, donc peut-être que le texte 400 ou le texte 300 un peu plus clair fonctionneront. Sympa. Nous avons donc maintenant cette ligne de démarcation. Nous voulons encore faire une chose, créer une autre variante de nos boutons, et nous pouvons le faire ici. En cliquant sur notre composant pour le bouton, nous voulons créer une autre variante, mais sans avoir à créer un autre composant. Parfois, nous avons des composants qui présentent différentes variations, l'essentiel étant une couleur d' arrière-plan légèrement différente ou de légères différences pour lesquelles nous souhaiterions une autre variante, mais nous ne voulons pas nécessairement créer un autre composant. C'est pourquoi nous pouvons sélectionner les composants, et ici, nous pouvons réellement ajouter une propriété. Il existe maintenant différentes propriétés, et nous les examinerons dans un instant. Mais pour l'instant, une autre variante de ce bouton nous intéresse . Si vous cliquez sur Plus sur la variante, nous avons maintenant cette propriété ici. Par défaut, elle est simplement appelée propriété 1, et la valeur est par défaut. Mais nous pouvons l'utiliser pour ce que nous voulons. Donc, dans ce cas, ce que je veux faire est de créer une propriété, définir sur notre bouton principal comme valeur de cette propriété, puis d'en créer une autre avec un fond blanc et de la définir comme bouton secondaire ou quelque chose comme ça. Nous voulons cliquer sur Plus sur la variante ici. Nous avons donc maintenant une autre variante de ce bouton. Et nous allons cliquer sur le conteneur parent et modifier cette propriété en double-cliquant dessus et en la remplaçant par type. Nous l'appellerons simplement type. C'est notre type par défaut, mais nous voulons le changer en primaire comme ceci, afin que sa valeur soit primaire. Et celui-ci, nous allons le qualifier de secondaire. Et nous allons changer le remplissage. Peut-être que ce 50 primaire fonctionne à la place du remplissage blanc. Et nous pouvons changer la couleur du texte afin de pouvoir double-cliquer sur le texte. Changez la couleur du texte pour peut-être le texte 500. Alors maintenant, si nous allons ici pour ces deux boutons, nous pouvons réellement cliquer dessus. Et maintenant, dans notre instance, nous avons cette option appelée type, et nous pouvons choisir le primaire ou le secondaire. Et à bien y réfléchir, je pense qu'il vaut peut-être mieux utiliser un simple bouton blanc. Vous souhaitez peut-être y ajouter un trait et faire en sorte que le trait soit le trait principal 100. Nous allons également cliquer sur celui-ci et le changer en secondaire. Maintenant, nous avons ces deux boutons ici et ça commence à bien paraître. Revenons donc dans la prochaine conférence pour trouver une image à utiliser ici sur le côté droit. 28. Trouver des images à utiliser: À côté, nous aimerions mettre une image liée à Wander Wise et à ce qu'ils font Maintenant, avec Wonder Wise, réservez des destinations et des forfaits incroyables et c'est parti. Nous voulons donc une photo de voyage, et nous pouvons en trouver une sur, bien sûr, Google ou sur d'autres sites où nous pouvons utiliser la licence réelle de l' image dans le projet. Ou une autre option consiste à utiliser des plugins. Et l'un des plugins que j'aime beaucoup, si vous cliquez sur l'onglet plugins et Widget et que vous recherchez Unsplash, vous obtenez ce plugin qui vous donne accès à de nombreuses photos que vous pouvez utiliser Et en cliquant dessus, il s'ouvrira, et nous vous montrerons quelques photos aléatoires dans un premier temps, mais vous pouvez continuer, affiner le champ et rechercher des images spécifiques. Vous pouvez donc aller ici et rechercher, disons, voyager, appuyer sur Entrée, cliquer sur Rechercher, et vous obtenez toutes ces images sympas. Et vous pouvez vraiment les parcourir et voir lequel convient le mieux à votre projet. Et je pense que pour moi, je vais choisir l'une des photos ici. Cela semble être une destination assez incroyable, je vais donc ajouter cette image ici. Tu n'es pas obligée de faire exactement ça. Tu peux faire ce que tu veux. L'un d'eux est tout simplement magnifique. Je veux vraiment y être en ce moment. Nous voulons donc la faire glisser ici à l'intérieur d'un conteneur, mais comme vous pouvez le voir, cette image n'est même pas à l'intérieur de notre cadre d' inscription. Donc, pour résoudre ce problème, dans notre cadre d'inscription, comme vous vous en souvenez, nous avons créé ce cadre deux Vous devez donc le faire glisser à l'intérieur de ce cadre et vous assurer qu'il le fait glisser à l'intérieur du cadre deux Donc, le moyen le plus simple de le faire, nous pouvons simplement faire glisser notre image vers ce deuxième cadre. Nous y voilà. Maintenant, il est à l'intérieur de ce cadre, et nous pouvons le déplacer comme bon nous semble. Il a donc la belle récolte que nous voulons. Cela a l'air incroyable. Ça commence déjà à être vraiment beau. La seule chose que je recommande d'ajouter est une petite ligne de démarcation entre le conteneur ici ou le cadre et l'image. heure actuelle, c'est comme si on mélangeait un peu les choses, et peut-être pourrions-nous améliorer cela en ajoutant une ligne de démarcation Cliquons donc sur ce cadre ici où il contient tous les éléments d'inscription et faisons un trait. Mais maintenant, vous remarquerez qu' avec un trait, vous ajoutez un trait à l'intérieur et vous pouvez en choisir l'épaisseur. C'est génial. Mais une chose que vous remarquerez, c'est que nous ne voulons pas caresser l'ensemble du contenant. Nous voulons juste caresser du côté droit. Et c'est là qu'intervient ce petit Stroke par site. Vous pouvez cliquer dessus et choisir n'avoir qu'un trait sur le côté droit. Si vous en voulez un, disons, gauche et à droite ou quelque chose comme ça, vous pouvez également le personnaliser. Mais nous voulons juste choisir le bon , alors nous allons cliquer avec le bouton droit de la souris. Un autre Broder n'est que sur le côté droit. Huit pixels, c'est un peu trop. Je pense à quelque chose comme deux ou quatre. Je pense que quatre pixels, c'est bien. Et c'est une couleur forte, alors changeons-la pour une couleur un peu plus conforme à nos couleurs primaires. C'est ici que vous pouvez jouer avec vos variables et voir laquelle est la plus intéressante. Vous pouvez utiliser une couleur secondaire ou même une couleur primaire. J'aime beaucoup cette couleur secondaire légèrement plus foncée que le fond. Je trouve que ça a l'air plutôt bien. Alors maintenant que nous avons cette image, nous avons la page d'inscription à peu près terminée pour le moment au moins. Il y a certainement des choses que nous pouvons faire pour l'améliorer, mais nous allons les laisser pour les prochaines conférences. Nous allons le terminer, puis revenir et quelques touches de polissage, peut-être plus près de la fin. Revenons à la prochaine leçon pour passer aux pages suivantes, la page de vérification de connexion. C'est donc une fois que l' utilisateur s'est connecté et qu'il doit vérifier ses e-mails pour ajouter un code de vérification avant de continuer. Revenons à la section suivante pour le faire ensemble. 29. Créer des images avec Figma AI: Pour créer une image sur le côté ici ou pour n'importe quoi dans le cadre de votre projet, pouvez également utiliser Figma AI Figma dispose donc de cette fonctionnalité d'images qui vous permet générer des images à l'aide de leur fonction de création d'image Tout ce que vous avez à faire est de vous rendre dans le menu d'action, et à partir de là, si vous ne créez pas d'image, si vous faites défiler la page vers le bas, vous devriez la voir dans les outils de retouche d'image. En l'ouvrant, vous pouvez écrire une invite et demander à Figma de créer une image Quelque chose comme une photo de personnes voyageant vers une belle île tropicale aux eaux cristallines m'est venu à l'esprit. Et bien sûr, il peut être plus précis écrire plus de détails et lui donner plus d'informations sur le type d' image que vous souhaitez, etc. Pour l'instant, je vais faire celui-ci et voir ce qu'il fait. Et comme vous pouvez le constater, Figma AI travaille à la génération d'une image, et elle vous donnera quelques options que nous pourrons choisir ultérieurement celle que nous aimons Nous allons donc vous le donner dans une minute ici. Waouh, c'est une belle image, et nous avons plusieurs versions différentes que nous pouvons utiliser pour notre projet. Bien entendu, certaines d'entre elles ne sont pas parfaites, et nous pouvons lui demander d'apporter des modifications. Donc si on est du genre, tu sais quoi ? Nous voulons plutôt un arrière-plan de coucher de soleil, nous pouvons le demander ou modifier l'invite et régénérer les images ici Voyons maintenant si nous pouvons plutôt obtenir un joli fond de coucher de soleil. Waouh, et voilà. Belle île tropicale, plusieurs options différentes. Nous pouvons même opter pour celui-ci ici. À notre image. Je vais donc appuyer sur Commande X, double-cliquer ici ou cliquer sur notre cadre, Commande V pour le coller dedans. Et donc de cette façon, parce que j'ai cette image au-dessus de l'autre, le cas échéant, à un moment ou à un autre, tu sais quoi ? Je suis du genre, peut-être que je n'aime pas cette image, j'aime revenir à l' autre que j'avais. Je peux toujours masquer celui-ci en utilisant cette icône I ici et revenir à la même image ici. Pour l'instant, je vais m'en tenir à cette magnifique image générée par l' IA par Figma Passons à la prochaine conférence pour travailler sur notre page de vérification. 30. Page de vérification: La page suivante de notre application, la vérification de connexion. Maintenant, si vous vous souvenez, pendant que nous le flux et les wireframes, voici la page où les utilisateurs seront invités à saisir un code envoyé à leurs e-mails ou à leur numéro de téléphone au cas où ils choisiraient de se connecter avec un numéro de téléphone, et ils devront saisir ce code et continuer Donc, quelques éléments que j'ai mis ici garderont la même image sur la page d'inscription. Nous aurons un texte de connexion vérifié suivi d'une saisie à saisir pour qu'ils puissent saisir leur code. Ensuite, nous voudrons également un bouton pour renvoyer le code au cas où ils ne l'auraient pas reçu, puis un bouton pour continuer une fois qu'ils auront saisi le code de vérification afin de vérifier leur connexion Encore une fois, je vous recommande vivement de vous inspirer avant de commencer une inspirer avant de commencer nouvelle page dans vos conceptions, même lorsque vous passez du wireframing aux C'est toujours agréable d' avoir de l'inspiration et de s'assurer ne manquer aucune des étapes. Par exemple, j' utilise mobile.com et je recherche les écrans de vérification Il y en a des tonnes de différents PayPal, qui, encore une fois, utilise un style similaire à ce que nous pensons avec les différents codes de livre, et j'aime beaucoup le fait qu'ils comportent champs différents pour chaque numéro Peut-être que nous adopterons cette approche similaire dans nos conceptions, et il en existe différentes que vous pouvez voir avec différents types de vérification. Ainsi, s'ils ont besoin de confirmer un e-mail, ils peuvent même cliquer sur un lien contenu dans leur e-mail. Il y a donc ce type de vérification, puis il y a les types de vérification où vous devez entrer un code à usage unique, comme ici ou dans le cas de PayPal. Maintenant, revenons à FIGMA et passons à notre projet Et le moyen le plus simple de le faire est de dupliquer notre écran d'inscription , car nous avons déjà configuré la plupart du travail ici de toute façon, et la majeure partie de ce design est similaire à l'écran d' inscription avec quelques modifications, comme ici le contenu de vérification et le contenu que nous avons sur le côté gauche Donc, pour dupliquer un cadre, il suffit de cliquer dessus. Vous pouvez maintenir la touche Alt enfoncée et faire glisser une copie ou appuyer sur la commande D pour dupliquer une copie. Je vais continuer et maintenir la touche Alt, faire glisser une copie ici, placer une copie à droite de l'écran. Et nous allons le renommer. Vous l'avez deviné sur la page de vérification. Nous y voilà. Et ce que nous allons faire, c'est commencer par le haut et apporter quelques modifications. Tout d'abord, nous ne voulons plus de ce gros logo ici. Donc, ce que nous voulons faire, c'est peut-être passer à un H trois. Et modifiez la copie ici pour vérifier. En fait, nous allons le modifier pour saisir votre code de vérification. Et je me rends compte que c'est un peu trop gros, alors peut-être qu'un H quatre fera l'affaire, et nous allons faire de gauche à droite. C'est donc une ligne à gauche de la zone de texte ici. Et pour ce texte, nous allons le modifier afin saisir le code de vérification envoyé à max.do@gmail.com. Et évidemment, il s'agit d'un texte réservé, et ce sera l'e-mail Et je l'ai juste surligné pour pouvoir le mettre en gras. Nous y voilà. Et je vais faire la même chose ici. Nous allons aligner le texte ici à gauche. Maintenant, une chose, je n' aime pas le fait que notre texte soit aligné au milieu de la mise en page automatique. En fait, nous préférons que tout soit aligné vers la gauche, surtout maintenant que le texte est également aligné vers la gauche. Il suffit donc de sélectionner le conteneur parent ici, et au lieu d'aligner le centre en haut, nous allons l' aligner en haut à gauche, qui placera le tout vers le côté gauche et le haut du cadre de mise en page automatique. Nous n'avons pas besoin de ces champs , des autres boutons ou des séparateurs Tout en maintenant la touche Maj enfoncée, je vais sélectionner ce dont je n'ai pas besoin pour appuyer sur Supprimer sur mon clavier et m'en débarrasser. Je vais maintenant remplacer ce champ le code de vérification. Et je vais utiliser les touches Alt et huit mon clavier pour simplement saisir un texte d'espace réservé comme celui-ci et modifier le texte d'inscription en double-cliquant dessus pour continuer comme ça En ce qui concerne les boutons ici, pendant que nous y sommes, j'ai remarqué qu'ils méritaient un aspect ou un poids un peu plus audacieux Je vais donc le remplacer body bold pour nos boutons. Je pense juste que c'est mieux pour un bouton. Oui, c'est bien mieux. Et encore une fois, au fur à mesure que vous apporterez des modifications à vos designs, vous remarquerez que ces petits détails vous apparaîtront. En tant que designer, nous n'essayons pas tout faire correctement dès le départ. Il y aura toujours de petits détails que vous voudrez peut-être retoucher pendant que vous concevez et que vous déterminez des éléments tels que la mise en page de votre page , etc. Maintenant, si vous vous souvenez, j'ai dit que ce serait bien si nous configurions notre code de vérification avec des entrées séparées toutes côte à côte. Le problème, c'est que si nous commençons à le faire dès maintenant avec ce champ, nous avons l'exemple, je vais le faire, et je vais les mettre en page automatiquement. Le problème, c'est le titre que nous avons. Nous n'avons pas vraiment besoin d'un titre pour chacun d'entre eux. Et même si je pourrais entrer et supprimer le titre de celui-ci, ce que nous voulons faire, c'est configurer les propriétés liées à ce titre afin pouvoir l'activer et le désactiver manière plus intelligente ou plus efficace. ce faire, nous allons explorer comment utiliser propriétés booléennes dans nos composants dans la prochaine conférence 31. Utiliser les propriétés des composants: Au départ, nous avons configuré le champ de saisie ici en tant que composant avec un titre dedans. Mais que se passerait-il si nous ne voulons pas de titre dans certains cas, comme cette page de code de vérification où nous voulons obtenir un aspect similaire celui de PayPal ici. Alors, que pouvons-nous y faire ? Encore une fois, vous pouvez cliquer sur le titre du code de vérification ici ou sur le titre de votre saisie n'importe où, puis cliquer sur Supprimer. C'est une façon de procéder, mais ce pas la manière la plus efficace ou la plus organisée de le faire, surtout si vous travaillez avec d'autres membres de l'équipe. Il existe une bien meilleure façon de le faire via le panneau des propriétés sur le côté droit que nous avons. Donc, pour le moment, nous n' avons aucune propriété, mais ce que nous pouvons faire, c'est accéder à nos composants ici pour notre champ de saisie, sélectionner notre champ de saisie, et nous allons ajouter une propriété. Comme vous pouvez le voir, ce sont les instances du champ de saisie ici. Au niveau de l'instance, nous pouvons choisir d'afficher un titre ou non au cas par cas. Maintenant, par défaut, nous allons afficher un titre, puis nous nous autoriserons, en tant que concepteur, à désactiver le titre si nous ne le voulons pas Il y a deux manières de procéder. Vous pouvez configurer une autre variante de ce champ de saisie. Semblable à ce que nous avons fait ici. Le problème, c'est que si vous devez apporter des modifications à vos entrées, vous devrez désormais les modifier deux variantes différentes. Ainsi, dans le cas où vous souhaitez simplement masquer le titre, vous n'avez pas réellement besoin d'une autre variante pour votre composant. Tout ce dont vous avez besoin, c'est d'une nouvelle propriété et, en fait, d'une propriété booléenne Donc, pour configurer une propriété dans votre composant, allez ajouter une propriété ici sur le panneau de droite, appuyez sur plus et configurez une propriété booléenne Désormais, le booléen est simplement un état activé ou désactivé. Cette propriété booléenne nous permettra donc activer ou de désactiver la propriété Et pour le moment, le nom est simplement booléen, mais nous voulons vraiment lui donner un nom significatif Nous allons donc afficher le titre de l'espace comme ceci. Par défaut, nous laisserons afficher le titre comme vrai, puis nous cliquerons sur Créer une propriété. Ensuite, nous allons lier la visibilité de cette couche à la propriété que nous venons de créer. Maintenant, tout d'abord, pour activer la visibilité, il vous suffit de cocher cette icône ici, de la masquer Et si vous le cochez, simplement, ce titre disparaîtra, ou du moins sera masqué parce qu'il est toujours là dans le panneau des couches, et je peux également le dévoiler d' ici ou le masquer d'ici Ce que nous voulons faire, c'est associer la visibilité de cette couche ou de ce titre à la propriété que nous venons de créer. En d'autres termes, au niveau de l'instance, si nous activons cette propriété, ce titre devrait être visible, mais si nous le désactivons, il devrait être masqué Il existe un moyen très simple de le faire, d'attacher ces propriétés, et il vous suffit de vous rendre ici juste à côté de l'icône I. Cliquez pour attribuer une propriété l'apparence de ce texte de titre afin d'afficher le titre. Boum. Et maintenant, notre propriété show title est là. Vous pouvez toujours le retirer d'ici ou le détacher. Voyons cela en action. Passons à notre code de vérification saisi ici, double-cliquez dessus pour sélectionner l'instance. Et maintenant, nous voyons cette propriété show title. Si on le désactive, on y va. Notre titre a disparu, et ici, au lieu de le remplir, nous voulons vraiment du contenu câlin. Par défaut, je crois que nous avons un contenu câlin. Quoi qu'il en soit, c'est ici, donc c'est ce que nous voulons. Nous avons donc maintenant un champ de saisie. Nous pouvons activer ou désactiver le titre. Magnifique. C'est bon. Maintenant que nous avons lié la visibilité à ce titre, nous voulons simplement copier une autre variante ici. Et débarrassez-vous de celui-ci que maintenant ce que nous pouvons faire pour masquer le titre, dupliquez-le cinq fois de plus en utilisant la commande D. Nous avons donc six codes de vérification Ou des codes à six chiffres, appuyez sur Shift A tout en les sélectionnant tous, et je maintenais la touche Shift enfoncée pour les sélectionner tous et faire une mise en page horizontale. Nous y voilà. Maintenant, l' espacement entre eux pourrait être légèrement inférieur, peut-être 16 pixels. Et au lieu d'un espace réservé, nous pourrions simplement saisir zéro, zéro, zéro, zéro, zéro Maintenant, bien sûr, dans ce cas, nous voulons que notre texte soit réellement au centre, et ce que nous pouvons faire étant donné que c'est le seul cas où nous voulons réellement appliquer cela, nous allons remplacer les propriétés et le faire dans notre instance ici J'ai donc sélectionné toutes les couches de texte à l'intérieur, rien d'autre, pas les rectangles ou quoi que ce soit d'autre, juste les couches de texte Et je maintenais le commandement et le quart de travail pour le faire. Ainsi, pendant que vous maintenez la touche Commande enfoncée, vous pouvez sélectionner rapidement tout se trouve dans ce cadre de mise en page extérieur, et en maintenant la touche Maj enfoncée, vous pouvez en sélectionner plusieurs. Donc, en maintenant la touche Shift enfoncée, je sélectionne tous les titres afin de pouvoir appuyer sur la ligne centrale, et tous les codes de vérification se trouvent désormais au centre. Voilà. Une autre chose que je vais faire est de faire la même chose, mais maintenant je vais double-cliquer pour sélectionner l' AutoAyoutFrame à l'intérieur, comme celui ici, maintenir la touche Shift enfoncée et cliquer sur chacune d'elles parce que je veux augmenter un peu la hauteur Au lieu de 12, faisons-en 16. C'est bien mieux pour cette affaire. Nous l'avons donc maintenant. Nous voulons un autre texto ici, n'avons pas reçu le code de vérification, renvoyez-le Et je vais mettre en évidence cette partie annulée, gras à l'aide de la commande B, et faire un 500 primaire pour qu'elle ressemble à la couleur d'un lien Incroyable. Nous avons maintenant notre page de vérification, et elle est vraiment belle. Passons à notre page suivante, qui, selon les wireframes, serait notre page de découverte de destination C'est donc le cœur du projet. C'est l'une de nos pages les plus intéressantes où nous allons travailler avec de nombreux éléments. J'attends donc celui-ci avec impatience. Et nous allons y consacrer notre temps et en apprendre beaucoup lors des prochaines conférences. Donc, si tu es prêt, allons-y. Si tu as besoin d'une pause, fais-le et je te verrai dans peu de temps. 32. Commencer nos maquettes de découverte de destinations: Parfois, dans nos conceptions, nous travaillons sur des pages plus simples, comme page de vérification sur laquelle nous avons travaillé, et parfois nous travaillons sur défis ou des pages de conception de plus en plus complexes. Dans notre cas, nous nous dirigeons actuellement vers nos maquettes de découverte de destinations, et je me suis dit qu'il était toujours préférable de décomposer ces grandes pages en composants plus petits et en pièces sur lesquels nous pouvons travailler, puis de les assembler. Pour que A, nos composants soient réutilisables. Nous pouvons réutiliser des éléments tels que ce panneau de navigation, etc., et différentes pages Tout comme How Self, lorsque nous sommes passés de notre page d' inscription à notre page de vérification de connexion, c'était beaucoup plus facile et beaucoup plus rapide. C'est exactement ce que nous essayons de faire ici avec notre page de découverte des destinations, car nombre de ces composants peuvent également être utilisés ailleurs. Et nous avons déjà créé certains d'entre eux comme ce champ de saisie ici pour la recherche et tous les boutons dont nous avons besoin. J'ai pensé que nous allions décomposer cette page en plusieurs composants différents par lesquels nous allons commencer. Commençons par le haut et progressons vers le bas, en commençant par notre barre de navigation en haut. C'est donc grâce à cette barre de navigation les utilisateurs pourront naviguer dans notre application Web. Cliquez en cliquant sur le logo. Ils peuvent toujours accéder à la page d'accueil, qui est en fait cette page , puis nous voulons quelques liens sur le côté droit ici. Nous ne savons pas encore quels seront ces liens, ou pour le moment, nous pouvons simplement placer une petite icône de profil, semblable à celle que vous voyez ici dans Figma, où vous pouvez gérer votre compte ou voir une liste déroulante des différentes options qui s'offrent à vous, et nous les réglerons exactement au fur et à mesure. Pour l'instant, commençons par ce NAVR de base, assemblons-le pour le Web, puis nous reviendrons, commençons à rassembler certains de nos éléments ici, comme les entrées ici pour la recherche et les champs ici pour les sélecteurs de dates et un bouton pour effectuer une recherche, etc. Ensuite, nous allons nous concentrer sur certains modèles de cartes. Ce sont donc toutes des cartes, et nous avons conçu ces cartes de destination, en fait, si vous vous en souvenez, dans notre wireframing. Nous allons donc utiliser cette structure filaire pour créer une véritable carte de composant que nous pourrons Et pendant ce temps, amusez-vous également avec la génération de contenu par IA. Ensuite, nous terminerons en ajoutant une collection ici et le bouton de filtrage et de tri, etc. Si cela vous convient, revenons à section suivante, en commençant par le design de notre barre de navigation 33. Utiliser les bibliothèques de kits d'interface utilisateur: Vous vous demandez peut-être, vous savez, nous assemblons tous ces composants, nous les fabriquons à partir de zéro ici et nous créons notre propre bibliothèque de composants, ce qui est formidable. Mais encore une fois, vous vous demandez peut-être : Hey, Nima, devons-nous concevoir chaque composant à partir de zéro pour des conceptions qui peuvent être fastidieuses, surtout si vous essayez de créer un design très rapidement et que votre entreprise possède déjà des actifs ou si le client avec lequel vous travaillez possède déjà un système de conception Sinon, il existe certainement des moyens de tirer parti de ce à quoi le fGMA vous donne accès. Il existe de nombreuses ressources que vous pouvez utiliser, en particulier avec les nouvelles mises à jour de FiCMA Vous pouvez en fait accéder à certaines bibliothèques que vous pouvez utiliser pour intégrer des composants d' anciens concepteurs ou d'autres conceptions dans vos projets Nous voulons donc concevoir cette barre de navigation, mais que se passerait-il s'il existe déjà d'autres barres de navigation que nous pouvons simplement copier et utiliser ? C'est là que ce panneau Assets entre en jeu. Vous êtes donc généralement dans le panneau des fichiers. Passez à la section des actifs ici, comme vous pouvez le voir, où nos propres actifs locaux sont assemblés, où tous nos composants sont présents etc., ce qui est bien. Nous allons en fait aller de l'avant et ajouter d'autres bibliothèques ici. Et ici, nous pouvons publier nos propres ressources que nous pouvons utiliser dans d'autres fichiers, et nous y reviendrons un peu plus tard. Pour l'instant, ce que nous voulons faire, c'est passer de ce fichier actuel aux kits d'interface utilisateur. Ce faisant, vous trouverez trois kits d'interface utilisateur actuellement disponibles sur Figma que vous pouvez simplement ajouter à votre projet Il y a l'IOS 18 et l'iPad OS 18. Donc, si vous travaillez spécialement sur une application native pour iOS ou iPad, je vous recommande vivement ajouter celle-ci à votre fichier, car vous ne voulez pas redessiner tous les composants qu'Apple possède déjà Il existe un design à trois matériaux, idéal pour les projets Android ou tout simplement en général, ils comportent de nombreux composants utilisés dans de nombreuses applications. Et FICMA en a un appelé Simple Design System , que nous pouvons ajouter à notre fichier si vous voulez y jeter un œil Maintenant, nous pouvons même cliquer dessus pour voir tout ce que contient également ce projet. Il comporte donc de nombreuses typographies, des variables de taille, des variables de couleur, certains styles ici, des composants de style accordéon, de nombreux boutons cartes, des formulaires, de nombreuses icônes que vous pouvez utiliser, ce qui est génial. Ils ont des entrées, des menus. Et oui, bien sûr, ils ont un composant de navigation. Maintenant, bien sûr, vous pouvez l' ajouter à votre fichier et avoir accès à tout cela dans votre fichier, ou vous pouvez également faire glisser n'importe lequel de ces éléments sur votre design. Donc, si vous voyez cette barre de navigation, vous pouvez la faire glisser et utiliser celle-ci ici comme navigation en haut ici. Vous avez donc accès à ces autres systèmes de conception que vous pouvez utiliser dans vos projets, et vous pouvez examiner chacun d'entre eux pour voir ce qu'ils contiennent et que contiennent-ils ? Ou encore une fois, concevez le vôtre à partir de zéro, ce que nous faisons ici dans ce projet. Nous le faisons afin de tirer le meilleur parti des enseignements de ce cours Mais bien sûr, dans un vrai projet, vous pouvez parfois, voire souvent, réutiliser des composants conçus par d'autres concepteurs ou, dans d'autres cas, en créer un à partir de zéro. J'espère donc que cela vous donne une idée de certains endroits où vous pouvez trouver l'inspiration. Certains endroits où vous pouvez accéder à certaines ressources. Un autre bon endroit pour rechercher ces kits d'interface utilisateur est de vous rendre sur l'onglet «   Communauté » ici. Maintenant, si vous allez dans les onglets des ressources de conception, vous verrez les kits d'interface utilisateur auxquels vous pouvez accéder directement. Nous les avons déjà explorés, mais il en existe des tonnes d'autres , dont certaines sont gratuites, payantes, que vous pouvez également utiliser dans vos projets , n'est-ce pas ? Je vous laisse donc le soin d' explorer les kits d'interface utilisateur si vous le souhaitez. Encore une fois, nous allons continuer en assemblant nos propres composants dans le reste du projet. 34. Concevoir une barre de navigation: Passons donc à notre barre de navigation et concevez-la ensemble. Tout d'abord, dupliquons ce cadre pour l'utiliser comme écran de tableau de bord. Nous allons l'appeler notre page de découverte de destination. Nous allons donc renommer celui-ci, destination Discovery. Et encore une fois, je copie celui-ci en accédant à la page de vérification, touche Alt enfoncée et en faisant glisser une copie ici Maintenant, nous n'avons pas besoin de ce contenu ici Nous allons donc maintenir la touche Maj enfoncée en les sélectionnant tous les deux et en les supprimant. Nous avons donc maintenant un écran vide ou un cadre vide dans ce cas, et nous voulons créer une barre de navigation, puis la faire glisser vers l'extérieur en tant que composant Pour notre barre de navigation, nous voulons un logo sur le côté gauche ici. Nous pouvons donc simplement utiliser le texte de Vander Weis que nous avons Ensuite, sur le côté droit, nous allons simplement mettre un espace réservé pour quelques boutons, ainsi que pour des éléments qui nécessiteront probablement une liste déroulante de profil, ainsi qu'une icône en forme de cloche de navigation Cette icône en forme de cloche de navigation sera donc là, ainsi qu'un écran de profil, ainsi que la petite liste déroulante de profil C'est généralement ce que nous voyons dans les barres de navigation. Et encore une fois, puiser dans certaines ressources ou sources d'inspiration vous aidera certainement à assembler ces composants plus rapidement. Je vais commencer par copier-coller ce logo Vander Weiss Je tiens la commande enfoncée pour sélectionner Vanderweis, amène ici, je la colle dedans Et c'est un peu trop grand. Nous voulons passer à une taille plus petite. Peut-être que ce H quatre est bon. Et maintenant, je vais appuyer sur Shift A pour en faire un cadre de mise en page automatique. Ce cadre de mise en page automatique que nous pouvons utiliser pour notre barre de navigation. Mais ce que je veux faire, c'est sélectionner le cadre ici pour découverte de la destination et remplacer le remplissage par notre arrière-plan que nous avons déjà créé. Il s'agit donc de la même couleur de fond que celle que nous utilisons ici. Et ce que nous allons faire, c'est sélectionner ce cadre, ce cadre de mise en page automatique que nous venons de créer, et nous allons le déplacer dans le coin, où se trouvent généralement nos barres de navigation. Nous allons maintenant l'étirer sur toute la largeur pour qu'il occupe toute la largeur. Maintenant, nous ne voulons pas que le contenu soit au centre. Nous voulons que le contenu soit aligné verticalement à gauche et au centre. Verticalement, nous voulons qu'il soit au centre, et horizontalement, nous voulons qu'il soit aligné vers la gauche. C'est pourquoi nous avons choisi celui-ci ici. L'espacement est un peu trop petit. Peut-être en modifiant l' espacement de 10 à 16. Et puis celui-ci, nous voulons réellement utiliser notre réseau. Donc, si vous vous en souvenez, nous avons mis en place une grille et nous pouvons l'activer et la désactiver sur nos cadres. Nous voulons utiliser ici la même marge que celle que nous avons définie pour notre grille qui, comme vous pouvez le voir , est de 48 pixels. Nous voulons donc que notre barre de navigation ait également un espacement de 48 pixels de gauche à droite Il a donc ce bel alignement avec notre grille de mise en page. Nous allons masquer la grille pour le moment et nous allons également définir un remplissage de blancs pour cette barre de navigation Donc ça commence à être plutôt joli. Je commence à penser que 16 pixels sont peut-être un peu trop petits. La hauteur semble un peu trop comprimée ici. Nous pouvons donc en faire 18 ou même 20. Je crois que j'aime bien l'apparence de 20 ans ici. Et maintenant, nous voulons quelques liens sur le côté droit. Avant cela, nous voulons établir une certaine séparation entre cette barre de navigation et la page ici Alors pourquoi ne pas mettre en place un trait autour de cette bordure ? Encore une fois, nous ne voulons qu'un trait inférieur Nous allons donc choisir le bas et le remplacer par 800 ou 700 secondaires. Ça a l'air bien. Je trouve que le 800 secondaire a l'air bien. Maintenant, pour créer cette petite icône de profil ici, nous pouvons la placer à l'intérieur d'un cercle, nous pouvons créer en appuyant sur O sur notre clavier pour dessiner un cercle, en maintenant la touche Maj enfoncée et en faisant glisser un O. Bien sûr, elle n'est pas là. Ce sera de ce côté. Donc, comme c'est à l'intérieur de notre mise en page automatique et de notre mise en page automatique en ce moment, tout est aligné vers la gauche, j'ai dessiné le cercle ici. Je vais donc double-cliquer pour le sélectionner, et au lieu de 65 par 65, faisons-le 48 par 48. Je pense que c'est une bonne taille. Maintenant, nous ne voulons pas que notre profil soit ici. Nous voulons en fait que notre cercle de photos de profil soit sur le bon côté. Alors, comment faisons-nous cela dans Autolayout ? Ainsi, dans la mise en page automatique, nous avons généralement un écart fixe que nous spécifiez ici Bien sûr, vous pouvez aller de l'avant et élargir cet écart suffisamment jusqu'à ce que cela soit du bon côté, mais ce n'est certainement pas évolutif et ce n'est pas la bonne façon de procéder. Ce que vous voulez faire, c'est passer d'un écart à un écart automatique, nous devrions procéder et espacer le tout uniformément. Comme nous n'avons que ces deux éléments pour le moment, tout sera espacé uniformément et repoussé jusqu'aux extrémités du plan de sortie. Que se passe-t-il s'il y a un troisième élément ? Imaginons ici un texte pour indiquer le nom de l'utilisateur, Mac Stowe Cela est également uniformément espacé. Nous voulons donc ce nom, et en fait, nous le voulons sur le côté droit, alors je le sélectionne et je le déplace vers la droite. J'aimerais que nous le déplacions ici, mais nous ne voulons pas cet écart entre les deux. Nous voulons que ces deux éléments aient un écart plus petit et soient proches l'un de l'autre, puis que le reste de la disposition automatique ait un écart plus grand ou soit uniformément espacé Dans un cas comme celui-ci, il vous suffit de sélectionner votre texte. Eh bien, tout d'abord, H quatre est un peu trop audacieux. Pour celui-ci, nous pouvons simplement opter pour un corps large et audacieux. Et changeons le texte en texte 400. Ça a l'air bien. Et maintenons la touche Maj enfoncée pendant que le texte est sélectionné pour sélectionner également l'ellipse ici, et nous allons appuyer sur Shift A pour créer également une mise en page automatique pour eux. Maintenant, il s'agit également d'une mise en page automatique avec un espacement automatique Mais entre ceux-ci, nous n'avons pas besoin d'espacement automatique Nous avons juste besoin, disons, d'un espacement de 16 pixels, ce qui semble bien Et au lieu d'une largeur fixe de 638, nous voulons qu'il épouse le contenu de manière à ce qu'il soit poussé de ce côté et qu'il n' ait que la largeur dont il a besoin, c'est-à-dire cette largeur ici 16 pixels, c'est un peu trop pour l'écart. Nous allons donc faire huit pixels. Et maintenant, ce que nous voulons faire, c'est simplement avoir quelques liens supplémentaires ici. Maintenant, je sais que j'ai dit que nous pouvions ajouter des liens ici, mais peut-être pourrons-nous le faire plus tard, au fur et à mesure que nous ajouterons d'autres pages ou que nous aurons d'autres besoins pour le faire. Pour l'instant, nous allons laisser les choses comme ça. Une autre chose que nous pouvons ajouter ici est une icône en forme de cloche de notification. Maintenant, les plugins et les widgets, si vous recherchez du phosphore, constituent une très bonne bibliothèque d' icônes que vous pouvez utiliser pour votre projet Je vais donc gérer celui-ci ici. Et je vais chercher une icône de notification et y jeter un œil. Nous en avons de belles que nous pouvons utiliser. Je vais cliquer. Et une fois que vous avez cliqué, il est déposé ici, nous pouvons donc simplement le faire glisser ici. Et nous avons le même problème. Bien sûr, nous allons faire la même chose. Nous allons sélectionner le cadre vectoriel de la cloche de notification, sélectionner également ce cadre que nous avons créé pour le menu déroulant de notre profil, appuyer sur Shift A, et entre les deux, nous allons faire 16 pixels. Et encore une fois, nous voulons faire des câlins. 16 pixels, c'est un peu trop petit. Pourquoi ne pas essayer 24 ou même 32 ? Je trouve que 32 c'est sympa. L'icône est un peu petite, nous pouvons donc double-cliquer et au lieu de 24 par 24, nous pouvons l'agrandir peut-être. Nous pouvons le faire 32 par 32. Je pense que c'est plutôt sympa. Et peut-être qu'au lieu de la couleur noire, nous pouvons la changer en 500 primaires. Et au lieu de cette couleur noire, nous pouvons la remplacer par un 800 secondaire. À bien y réfléchir, je pense que je peux l'agrandir un peu, par exemple 40 x 40, et ça sera plus beau, plus génial. Nous avons donc une icône en forme de cloche de notification ici. Nous avons notre menu déroulant de profil. le moment, il n'y a pas d'image, nous pouvons donc ajouter la texture suivante pour l'assembler Mais la première chose que je veux faire est de le déplacer en dehors d'ici afin que nous puissions réellement créer un composant, et nous pouvons le faire en appuyant sur Altommand K ou Control sous Windows et en le renommant barre Et, bien sûr, je vais le déplacer vers notre section sur les composants ici afin que nous puissions organiser soigneusement tous nos composants au fur et à mesure de leur croissance Je vais donc simplement développer cette section et déplacer celle-ci ici. Je vais également donner à notre section des composants la couleur d'arrière-plan afin que nous puissions mieux voir nos composants. Je vais cliquer sur ce composant NavR et maintenant le déposer ou le coller ici Maintenant, nous en avons une instance, et nous allons la déplacer à zéro, zéro pour les X et Y, donc elle se trouve dans le coin et occupe tout l'espace. air super. Revenons à la conférence pour passer aux autres parties de notre page de découverte des destinations , à savoir les entrées ici, quelques cartes, etc. 35. Générer un premier brouillon avec Figma AI: Nous travaillons sur cette page, j'ai oublié que c'est le bon moment pour consulter une fonctionnalité de Figma intitulée First Draft Maintenant, cette première ébauche est en fait une fonctionnalité d'IA qui fournit essentiellement la première ébauche votre maquette afin que vous puissiez vous en inspirer pour concevoir vos écrans Il ne s'agit pas vraiment de remplacer le travail de maquette, et l'idée principale, comme son nom l'indique, est de vous donner une idée de ce à quoi devrait ressembler cette page et assurer que vous avez assemblé toutes les pièces correctement Pensez-y comme une source d'inspiration pour vos designs, mélangée aux détails de votre projet. Pour accéder à cette fonctionnalité, vous pouvez accéder au panneau d'actions ou appuyer sur Commande K, puis vous verrez cette première ébauche de fonctionnalité ici. Alors ouvrez-le, et vous devrez écrire rapidement et de manière aussi détaillée que possible pour qu'il apparaisse avec cette première ébauche. Nous allons donc écrire le plus de détails possible, en disant qu'en utilisant un texte similaire comme espace réservé, nous allons créer une page de découverte de destinations pour une application de voyage qui permet aux utilisateurs de réserver des forfaits vacances Au même endroit. À l'écran, affichez des cartes qui ont toutes des destinations différentes, y compris le nom des villes prix du forfait. Et je jette juste un coup d'œil à notre schéma filaire pour m'assurer de tout inclure Un bouton de réservation. Et un badge populaire. Le reste de cette page doit contenir des entrées pour le lieu, l' heure du trajet sous forme de formulaire et de destination. Et nous allons commencer en disant simplement application Web, une page de découverte de destinations. Il sait donc dans quel but nous concevons. Maintenant, bien sûr, je peux entrer un peu plus en profondeur et plus de détails, mais voyons ce que cela va donner. Nous allons donc appuyer sur Make it. Cela fonctionne à l' écran. Nous y voilà. Malheureusement, il n'a pas créé page d'application Web pour un écran de bureau, mais nous voyons la version mobile et celle-ci est plutôt bonne. Nous avons nos images ici, les forfaits, avec les options de prix, et même les photos de différentes villes. C'est donc certainement un beau design que nous pouvons choisir. J'aime beaucoup la façon dont ils ont inclus des icônes. Nous pouvons donc certainement utiliser cette idée. Et si vous le souhaitez, vous pouvez simplement coller ces entrées dans votre design si vous le souhaitez. C'est certainement une option ici. Nous pouvons donc certainement y jeter un œil et nous le laisserons ici pour plus d'inspiration. Maintenant, à partir de là, vous pouvez également modifier le style. Donc, si vous n'aimez pas le style proposé, vous pouvez en créer différents , comme ici. Nous en avons un violet, un bleu. Et comme vous pouvez le constater, les polices changent également. Nous avons donc une fonte sera avec celle-ci, ce qui est intéressant. Celui-ci est vert, puis il y en a un en mode sombre, super cool. Et nous pouvons toujours apporter des modifications au niveau du design. D'ailleurs, nous pouvons également voir le mode sombre. Mais nous pouvons changer une partie de la coloration ici. Donc, si vous voulez, disons, bleu pour notre bouton principal, nous pouvons le faire, ou même pour les icônes ci-dessous et le thème général de l'application, ou nous pouvons saisir un code hexadécimal spécifique Par exemple, nous pouvons extraire le code hexadécimal de nos variables locales pour le 500 primaire, c' est-à-dire celui-ci ici, et même y revenir, passer à First Draft Donc c'est super cool. N'hésitez donc pas à utiliser le premier brouillon de Figma AI pour trouver les idées de ce que vous souhaitez inclure Pas tout de suite. Il y a déjà des éléments qui manquent à cet égard et que nous voulons inclure un badge de popularité, marque-page, qui existe déjà, donc c'est bien Nous pouvons utiliser un marque-page de style similaire. Et nous voulons également des évaluations, ainsi que pour les prix, peut-être qu'au départ, nous voulons les afficher par semaine, puis uniquement si l'utilisateur saisit réellement des dates, nous voulons afficher le prix exact pour les heures qu'il a sélectionnées. C'est ainsi que nous pouvons utiliser Fake MI pour générer un premier brouillon pour nous. Passons maintenant à Mike et Ax Extra pour continuer à créer notre propre page de découverte de destinations. 36. Ajouter des entrées de recherche et de temps: Pour passer à la conception du reste de notre page de découverte des destinations. Nous avons déjà la barre de navigation ici, ce qui est sympa. Nous voulons maintenant passer à nos entrées, qui seront la destination. C'est donc là que l'utilisateur voyagera également. Maintenant, dans notre cas d'image générée par l'IA, nous avons un formulaire, mais en réalité nous n'en avons pas besoin. Nous avons juste besoin d'une destination car , via cette plateforme, ils ne réservent pas de vols. Ils ne réservent que des forfaits qui incluent essentiellement l'hébergement et les activités qu'ils y font. Nous n'aurons donc pas besoin de l'inclure. Vous souhaitez inclure une destination, un champ de saisie. Et peut-être que pour l' icône, nous pouvons faire une icône similaire à celle-ci ici. J'aime vraiment ça. Ensuite, nous voulons une entrée pour les sélecteurs de dates Nous voulons donc leur permettre sélectionner les dates à partir desquelles ils souhaitent voyager , puis nous voulons avoir un bouton de recherche qui leur permet essentiellement de cliquer pour qu'ils puissent rechercher et affiner ces résultats Désormais, par défaut, ces cartes n'afficheront que les destinations générales. Et lorsqu'ils recherchent une destination et des heures spécifiques, l'idée est que ces résultats se limitent à ce que l'utilisateur recherche. C'est ce que l'on voit souvent sur de nombreuses plateformes de réservation. Nous voulons ajouter une entrée dont nous disposons, afin de pouvoir passer à nos actifs, aux actifs locaux et faire glisser le champ de saisie ici. Nous allons le déplacer de manière à ce qu' il soit ici, 48 pixels, et je maintiens l'espacement entre les altitudecks, et en partant du haut, faisons également Pour notre titre ici, appelons-le destination. Et au lieu du texte fictif, ajoutons simplement une ville ici, disons New York Points, points, points comme ça pour leur indiquer qu'ils peuvent ajouter des villes, etc. Nous voulons donc une icône ici, comme cette icône de localisation sur le côté gauche de celle-ci. Pour le moment, nous ne l' avons pas dans notre saisie, nous ne pouvons donc pas vraiment faire glisser une icône à l'intérieur de celle-ci car il s'agit d'une instance. Nous devons donc accéder au composant, ce que vous pouvez toujours faire, d'ailleurs, en cliquant sur ce bouton du composant principal GoTo Maintenant que nous y sommes, nous voulons ajouter une icône sur le côté gauche. Mais encore une fois, nous voulons configurer une propriété de telle sorte que nous n'affichions l'icône que lorsque nous le déciderons . Allons-y et créons une propriété ici, une propriété booléenne, nous l'appellerons afficher l' icône de gauche comme ceci, par défaut, désactivons-la car généralement, dans nos champs, nous n'avons pas besoin d' icônes. Créez une propriété. Passons aux icônes Phosphor. Et si vous ne l'avez pas indiqué dans vos raisons, vous pouvez toujours le rechercher, ainsi que les plugins et les widgets. Et cherchons le lieu. Celui-ci est sympa. Nous pouvons utiliser celui-ci. Je vais appuyer sur la commande X pour le couper et coller ici au lieu de notre saisie. Et changeons plutôt la taille à 20 par 20. Et déplacez-le vers la gauche l'aide des flèches de notre clavier. Nous avons donc maintenant une belle icône ici. Et avec l'icône, nous pourrions en fait réduire un peu l'espacement ici sur le côté gauche Donc, si vous allez ici, nous pouvons réellement choisir des rembourrages individuels pour notre conteneur de mise en page automatique ici Nous pouvons donc avoir 16 pixels en partant de la droite, mais en partant de la gauche, nous pouvons en faire peut-être huit, donc ça semble un peu mieux. Et maintenant, nous voulons donner à cette icône une couleur différente. Faisons le 500 primaire. Associons également la visibilité ici à notre propriété Afficher l'icône de gauche que nous venons de créer. Et bien sûr, il sera masqué parce que par défaut, nous avons choisi que ce soit faux. D'ailleurs, vous pouvez toujours changer cela à partir d'ici. Passons maintenant à celui que nous voulions activer et activons celui-ci. Magnifique. Nous avons donc maintenant notre entrée de destination. Nous voulons deux autres champs pour nos dates. Maintenant, il faut changer l'icône des dates. Maintenant, de retour ici, je vais le faire encore une fois. Je pense que l'espacement depuis la gauche est un peu trop petit. Peut-être que 12 pixels, c'est mieux. Et l'espacement entre l'espace réservé et celui-ci peut être de huit pixels Donc, l'écart est un peu meilleur. Je vais désactiver la propriété par défaut pour afficher cette icône de gauche. Maintenant, revenons en arrière. Oui, ça a l'air mieux. Donc deux autres champs ici, le formulaire et deux. Utilisons Alt, copions quelques champs ici. En fait, je vais automatiquement les mettre en page ensemble, afin que nous puissions le faire une fois de plus facilement. Remplacez ce paramètre par deux, remplacez-le par un, à partir de notre espace réservé, nous pouvons choisir une date Maintenant, nous pouvons simplement écrire une date aléatoire ici. En tant qu'espace réservé. Nous n'avons pas besoin qu'ils soient aussi grands, nous pouvons donc leur donner largeur d' environ 400 pixels, comme ceci. Changeons ces icônes pour qu' il s'agisse d'un calendrier plutôt que d' une épingle ou d'une épingle de localisation. Et pour ce faire, revenons dans la prochaine conférence afin de pouvoir configurer des icônes dynamiques ici au cas où nous aurions une entrée avec plusieurs icônes différentes. 37. Instances imbriquées: Défis, nous voulons avoir une icône dans cette entrée que nous pouvons utiliser, et nous ne voulons pas que ce soit juste cette icône de localisation. Nous voulons plusieurs icônes. Ce que nous pouvons faire ici, c'est créer un composant pour nos icônes, sorte que nous pouvons déposer l'icône que nous utilisons dans le projet dans ce composant à la place, puis nous pouvons créer une instance imbriquée de ce composant Cela n'a peut-être aucun sens pour le moment, mais je vais vous montrer dans une seconde comment cela fonctionne. Tout d'abord, je vais faire glisser complètement cette icône hors d'ici et utiliser la commande K pour en faire un composant. Renommons cette icône Map, stylographions comme ceci. Et il est important que vous placiez ce tiret d'icône pour créer un groupe appelé icône. Et maintenant, nous pouvons aller ici, ouvrir les icônes Phosphor et rechercher une icône de date Celui-ci a l'air bien. Et redimensionnons-le également à 20 par 20 Nous allons donc passer à 20 ici. Il a donc la même taille et utilisez également la commande Alt K pour en faire un composant, et utilisez le même format d'icône de dénomination et nous ferons une date ou un calendrier. Le nom de l' icône elle-même dépend vraiment de vous. Je vais également lui donner ces 500 livres primaires. Écoutez, et nous allons les déplacer à l'intérieur de nos composants ici, afin qu'ils soient tous parfaitement là Maintenant, nous allons copier une instance de cette icône ici. Déplacez-le à nouveau vers la gauche. Et ce que nous allons faire, c'est passer aux propriétés ici et ajouter un échange d'instance. Et notre échange d'instance sera une icône, et nous choisirons Map Pin, nous l'appellerons icône. Cela nous permet de faire passer rapidement cette icône de l' épingle cartographique à n'importe quelle autre icône au niveau de l'instance passer rapidement cette icône de l' épingle cartographique à . Et une fois que j'aurai cliqué sur Créer une propriété, vous verrez comment cela fonctionne en une seconde. Alors maintenant, si je double-clique sur celui-ci, rien ne se passe. Maintenant, double-cliquons pour sélectionner l'icône elle-même, puis nous allons faire les trois points ici et appliquer la propriété d' échange d'instance, et nous allons utiliser l'icône. Maintenant, ce qui va se passer, c'est que si nous allons là où nous utilisons notre champ ici, si vous double-cliquez, nous pouvons réellement remplacer cette icône de la carte par celle du calendrier pour celle-ci , et pareil ici. Ainsi, chaque fois que nous y ajoutons une icône en tant que composant avec une icône quelconque, nous pouvons échanger l'icône avec celle-ci à la place. Génial. Nous avons donc maintenant ce champ. Maintenant, ça a l'air un peu fade ici. Je pense que nous pouvons utiliser un joli titre pour cette page. Alors pourquoi ne pas déplacer ce texte un peu plus bas , et nous trouverons la prochaine aventure. Et nous en ferons un à quatre ans. Placez-le ici. Nous allons avoir celui-ci à 48 pixels ici. Déplacez celui-ci vers le haut jusqu'à ce qu'il soit à 24 pixels de celui-ci et faites-en également une mise en page automatique. Cette mise en page automatique doit être de la taille de l' ensemble de la zone de contenu, puis nous allons changer la couleur de celle-ci, passons au 800 secondaire. Et changeons la couleur ici en un texte 300. Ça a l'air mieux. Et ajoutons un bouton de recherche ici. Nous pouvons simplement copier un bouton d'ici vers ici. Et nous voulons que cette mise en page automatique soit alignée bas à gauche comme ceci et que ce bouton fasse en sorte que le contenu ne soit pas aussi grand, et nous allons simplement dire «   rechercher ». Voilà. Maintenant, tout commence à se mettre en place très lentement, et revenons à la section suivante pour commencer à créer et revenons à la section suivante pour commencer à créer le design nos véritables cartes de destination 38. Design de carte de destination: Les cartes de destination que nous allons concevoir constituent la partie la plus importante de notre application ou de ses parties . Nous avons donc ici ces cartes de destination qui afficheront initialement un ensemble de destinations par défaut, peut-être en fonction de ce qui est populaire ou nous pouvons décider de cela. Plus tard, ce que nous voulons faire, c'est concevoir. Si l'utilisateur recherche ou filtre ses options, un jeu différent de cartes de destination pourra apparaître. Ce que nous voulons faire, c'est créer un design pour notre carte de destination. Nous avons donc ici une belle image dans notre wireframe que nous pouvons utiliser pour cette destination Donc, à l'instar de ce que l' IA a trouvé, nous pouvons avoir une image de cette ville. Voici un bouton pour ajouter cette ville ou cette destination à vos favoris Ensuite, il y aurait le nom de notre destination ou le nom de la ville, suivi du nombre d'évaluations. Maintenant, nous avons un prix par semaine. Bien que cela n'ait pas vraiment de sens, nous voulons indiquer un prix, peut-être ajouter ici les dates de cette aventure pour ce forfait, afin de montrer que ce voyage se situe entre cette date et cette date, ou nous pouvons indiquer le nombre total de jours qui peuvent également être utiles au lieu de ce prix par semaine. Nous pouvons donc vous montrer le prix. Nous pouvons ajouter nombre de jours pendant lesquels ils seront à cette destination, puis une petite icône pour indiquer si cette destination est populaire ou non. Donc, s'il a cette icône de feu, elle est populaire , sinon elle ne l'est pas, nous pourrons peut-être la déplacer ici. Nous verrons donc au fur et à mesure que nous commencerons à concevoir son organisation, puis nous voudrons utiliser un bouton pour leur permettre de continuer avec cette destination ou pour en savoir plus à ce sujet Passons à la conception. Revenons à nos designs ici et ici. Nous voulons donc absolument configurer nos cartes en tant que composant, car nous allons en utiliser un grand nombre, et nous ne voulons apporter les modifications qu'une seule fois, si des modifications sont nécessaires. Commençons donc par l'image, qui sera à l'intérieur d'un cadre. Je vais donc appuyer sur F sur le clavier et dessiner un cadre ici, le mur en maintenant la touche Maj enfoncée, et peut-être que la taille pourrait être de 180 x 180. Et si vous n'arrivez pas à bien faire les choses, c'est bon. Il suffit de lâcher prise en faisant glisser le pointeur, puis vous pouvez simplement modifier la largeur et la hauteur ici à 180 Nous y voilà. Je vais le déplacer ici juste pour l'aligner. Et nous allons ajouter un fond blanc pour l'espace réservé ici À bien y réfléchir, nous pouvons peut-être agrandir un peu cette image, 200 ou 220. Je trouve que 220 c'est bien. Et il se peut que la plupart des images ne soient pas quadrillées. Ils peuvent être de format plus rectangulaire. Nous voudrions donc étendre cette carte à 366 x 220. C'est un bon ratio que la plupart des photos peuvent former , soit environ 4423 En fait, nous pouvons peut-être maintenir le commandement et prendre la hauteur 240. Ici, nous allons simplement supprimer afin que les proportions ne soient pas contraintes ensemble, afin que nous puissions facilement le changer en 240. Nous y voilà. Alors commençons par dessiner un cadre pour notre image. Et pourquoi n'utilisons-nous pas notre réseau pour nous y aider ? Allumons donc notre grille ici. Nous allons faire deux ou trois choses. Tout d'abord, cette entrée serait également bien adaptée à la grille. Nous pouvons donc en venir là. Par ici. Et pour l'espacement entre les deux, faisons 24. Et pour ce champ, réorganisons la taille de manière à ce qu'il occupe les grilles ici, les colonnes Cela correspond donc un peu mieux à notre grille de mise en page. Et maintenant, pour nos cartes de destination, créons une carte de destination. En fait, ce champ est un peu trop long. Récourcissons un peu. Trois colonnes suffisent amplement pour saisir une ville Maintenant, nous allons également dessiner un cadre, et nous allons créer une forme carrée ici. 318 x 318, mais nous allons en fait faire glisser la hauteur jusqu'à 210. Nous y voilà. Nous ajouterons un fond blanc, et ce sera pour les images de nos cartes de destination. Je vais augmenter la hauteur de la grille. Maintenant, pour le rayon d'angle, définissons un rayon d'angle de 16. C'est sympa. Et nous voulons ajouter un texte juste en dessous et écrire ville pays. Il s'agit simplement d' informations fictives. Nous allons le placer ici. Et maintenant, je ne vais pas utiliser Autoayout parce que je vais vous montrer quelque chose de cool au cas où vous finiriez par ne pas utiliser Cela sera donc utile. Donc pour l'instant, ce que je vais faire, c'est créer la carte sans que la mise en page automatique soit en place. Nous allons donc d'abord tout placer ici. Nous avons donc le nom de la ville. Ici, je vais avoir une note de l'autre côté, nous aurons une note de 4,7. Nous voulons vraiment que cela soit là. Nous pouvons ajouter l'icône en forme d'étoile en accédant aux icônes du phosphore. Recherchez une étoile, ajoutez-la. Nous allons maintenant corriger les couleurs et l'alignement en une seconde. Cette étoile n'est pas dans notre cadre, je crois. Nous voulons sélectionner le cadre et nous assurer qu'il est à l'intérieur. C'est ça et juste en dessous, nous voulons avoir un prix. Mettons juste 1 000$ ici. Et puis peut-être que nous pouvons faire glisser une copie de cette icône ici en utilisant Alt et en faire glisser une ici. Et juste à côté, ajoutez un texte, et écrivons sept jours. Il s'agit de la durée du voyage. Et qu'avons-nous d'autre ? Nous avons une icône de popularité. Donc en fait, peut-être que nous pouvons le déplacer vers le site pour l'icône de popularité, peut-être que nous pouvons créer un tag plus tard pour cela. Nous allons donc le laisser de côté pendant une seconde, et le signet sera placé en haut de l'image Donc, pour celui-ci, nous allons faire une ellipse. J'ai donc appuyé sur O, et je vais dessiner un 32 par 32 ici, et je vais utiliser Alt pour m'assurer que l'espacement est de dix pixels entre le haut et la droite Utilisez des icônes au phosphore pour ajouter un signet. Icône ici, placez-la ici, qu'elle ne se trouve pas actuellement Je vais donc double-cliquer pour sélectionner ce cadre, le coller, puis utiliser Shift pour le faire 16 par 16, il suffit de le centrer ici. Encore une fois, nous appliquerons les couleurs et tout le reste plus tard. Pour l'instant, si vous voulez créer une mise en page automatique à partir de cela, si vous sélectionnez tout ce contenu et que vous appuyez sur Shift A, vous aurez du désordre, et ce n'est pas ce que nous voulons. Ce que nous pouvons réellement faire, c'est que si vous vous retrouvez dans une situation comme celle-ci où vous n'avez pas utilisé Autoyout, vous pouvez cliquer avec le bouton droit plus d'options de mise en page et suggérer une mise en page automatique Et comme vous pouvez le constater, Figma a créé cadres de mise en page automatique imbriqués les uns dans les autres, et cela vous montre que ce sont tous de nouveaux cadres de mise en page automatique Le seul endroit où cela n'a pas si bien marché est cette icône en forme d'étoile de classement. Cela a donc changé les proportions, mais nous ne voulons pas qu'il en soit ainsi. Nous allons donc double-cliquer pour nous assurer que notre icône en forme d'étoile est bien carrée. Assurez-vous donc que c'est 20 par 20. En fait, nous allons simplement le dissocier de son cadre et nous assurer qu'il est aligné à gauche et au centre. Même chose pour celui-ci. Il y a donc quelques retouches que vous devez effectuer. Mais en gros, Figmas est allée de l'avant et a ajouté elle-même une œuvre d'art intelligente d'Adeod Très cool. Pour cette version 4.7, nous pouvons créer du contenu Hug. Même chose pour ça. Voilà, et celui-ci semble aller bien, donc nous pouvons simplement laisser celui-ci. Notre mise en page automatique commence donc à bien convenir à notre carte de composants ici. Nous ne l'avons pas vraiment formaté correctement, alors revenons à la section suivante pour commencer à y apporter quelques touches intéressantes 39. Polir notre interface utilisateur de carte: Je vais faire quelques choses pour que cette carte soit belle avant commencer à la dupliquer et à en remplir cette page. Donc, en partant du haut, notre bouton de signet devrait en fait être un fond blanc car, encore une fois, une image apparaîtra ici Nous voulons donc un fond blanc pour le bouton de signet Ensuite, nous allons changer la couleur ici pour celui-ci en 500 primaires. Maintenant, cette ellipse ici, je sais qu'elle se fond dans la masse Nous pouvons donc ajouter un trait qui correspond peut-être 50 primaire ou au 100 primaire . Cela fonctionne. Ici, pour notre ville et notre pays, nous pouvons faire la taille du corps pour créer une certaine hiérarchie visuelle, car ce sont probablement les détails les plus importants, après le prix. heure actuelle, l'espacement entre les deux est un peu trop important, nous pouvons donc le réduire à huit pixels Et l'espacement entre les informations et la carte n'est pas vraiment cohérent Faisons donc 16 pixels. Maintenant, ici, nous avons quelques problèmes d'alignement. Donc, celui-ci semble être bas de ce cadre, alors qu'il devrait être en fait en haut. Nous voulons donc simplement modifier cela qu'il soit plutôt aligné sur le haut. L'espacement entre ces deux pixels est de six pixels. Vous pouvez opter pour huit pour être constant. Il en va de même pour celui-ci. Nous voulons juste nous assurer que cela figure également sur le contenu des câlins. Je vais sélectionner ces deux parties de texte et faire le texte 300. Pour l'icône en forme d'étoile, créons une couleur secondaire de 500 couleurs. Maintenant, le prix peut être de 400 textos, cette icône de calendrier peut également être de 500 dollars secondaires. En fait, je n' aime pas le texte ici, alors peut-être que nous pouvons le rendre un peu plus foncé, et celui-ci pourrait être le texte 500. Sera, tu as l'air un peu mieux. En fait, je pense qu'il vaut mieux avoir une de ces icônes comme couleur secondaire. Il y a un peu trop d'orange ici. Donc, en fait, si vous voulez changer rapidement la couleur ici, nous pouvons simplement le faire sur Link. Utilisez le compte-gouttes, puis si vous passez au-dessus d'une couleur, disons que nous voulons cette couleur de texte ici En cliquant, nous prenons déjà cette couleur à partir de là. C'est peut-être un peu trop. Pourquoi ne réduisons-nous pas la teinte à quelque part par ici ? Ça a l'air un peu mieux. Et une belle ombre pourrait convenir à cette image. Créons donc l' effet d'une ombre portée. Maintenant c'est bien trop fort. Donc, ce que nous allons faire, c'est augmenter légèrement ce rayon de flou jusqu'à ce qu'il soit peut-être 20, nous ne voulons pas qu'il soit aussi fort, donc nous allons faire 8 % Je pense que c'est plutôt bien. Et il peut être un peu plus bas. Nous pouvons donc créer une ombre de huit pour le Y. Donc, elle est déjà très jolie Tout ce que nous avons à faire est de le remplir avec quelques exemples de données, et ce sera beaucoup mieux. Maintenant, pour celui-ci , nous voulons également un espace identique à celui-ci ici. Nous allons donc faire huit pixels ou plutôt un écart. Mais le problème est que ce cadre n'est pas à la même hauteur que celui-ci, cela crée un écart ou un désalignement ici Nous avons donc deux options. La première est que nous pouvons tout mettre en page automatiquement et le faire horizontalement à la place, ou vous pouvez simplement faire une hauteur fixe de 27 pour cela également. Donc, si vous changez ce paramètre en 27, cela fonctionne également. Nous y voilà. Revenons à la prochaine conférence pour remplacer cet exemple de texte par du vrai texte. 40. Utiliser Figma AI pour générer des échantillons de données: Tout d'abord, sélectionnons cette carte, appuyons sur Altman K, transformons-la en composant et renommons-la via notre panneau Calques en carte de destination Et comme vous l'avez probablement deviné, nous allons le déplacer à l'extérieur d'ici, dans notre section de composants en constante évolution ici Et puis copiez-en un ici. Je vais les disposer ensemble, puis pour le modèle parent ici, nous allons faire un espacement de 40 pixels Allons-y. Il y a donc plus d'espacement par le haut Maintenant, pour celui-ci, allons-y et utilisons quelques exemples de données. Alors pourquoi ne pas ouvrir Splash pour nous donner une photo de la ville. Commençons par New York. Il suffit de déposer l'un d'entre eux ici. Une fois le cadre sélectionné, j'ai cliqué sur la photo et je l'ai placée directement dans le cadre. Magnifique. Ensuite, nous irons à New York. Les États-Unis aiment ça. Nous allons faire l'évaluation pour le moment et nous allons laisser les sept jours, et peut-être changer le prix à environ 5 000$ Donc ça a l'air bien. Et maintenant, si vous voulez en ajouter un autre, FIGMA continuera à les placer ci-dessous ici, c'est là que nous avons besoin d' une autre mise en page automatique imbriquée Donc, en sélectionnant ces deux cartes de destination, en appuyant sur Shift A, puis au lieu de la disposition horizontale, ce que vous pourriez faire, nous allons faire du rap. Ce que le rap fera, c'est qu' il enverra toutes les cartes supplémentaires sur la rangée suivante. Maintenant, juste pour vous montrer, nous allons remplir le conteneur pour la largeur ici. Maintenant, si nous passons à l'horizontale, que se passera-t-il si nous continuons à dupliquer nos cartes Cela va continuer comme ça. Et ce n'est pas ce que nous voulons. Nous voulons que cela se répercute sur la ligne suivante ou sur la ligne suivante de notre design. C'est donc là que nous avons cette fonctionnalité de mise en page automatique d'encapsulation. Donc maintenant, si nous continuons à dupliquer, nous passons à la ligne suivante, ce que nous voulons Maintenant, je vais l'annuler et n'en avoir que deux pour le moment. Maintenant, pour celui de New York, je vais le changer pour une autre ville. Faisons Istanbul et remplaçons celui-ci ici, ou choisissons-en un autre ici, celui-ci, nous ferons Item Turkey et changerons le prix à 3 000 dollars, disons. Et au lieu de sept jours, faisons-en cinq jours. Et au lieu de 4,7, faisons 4,5. Nous allons laisser un espacement de 24 pixels entre eux pour le moment Et nous pouvons réellement utiliser l'IA de Figma pour générer plus de contenu pour nous Nous voulons en générer un tas d'autres, mais nous ne voulons pas les écrire tous nous-mêmes. Nous pouvons simplement faire glisser ce doublon avec du nouveau contenu, et cela pourrait perturber la mise en page automatique pendant une seconde. Et nous allons le faire glisser jusqu'à ce que nous en ayons quelques-uns. Et comme vous pouvez le constater, il génère un tas de villes et de pays différents, un tas de prix seul un tas de villes et de pays différents, un tas de prix, de dates, d'évaluations, etc. Je veux juste aller de l'avant et m' assurer que cela remplisse le contenant et se répande sur le suivant Maintenant, la seule chose qu'il ne peut pas générer pour le moment, ce sont des images. Il suffit donc de trouver ces villes dans Splash et de remplacer les images. Nous pouvons faire Londres. Double-cliquez sur cette image, sélectionnez-en une, Tokyo, sélectionnez une image, sélectionnez celle-ci. Pour aller à Paris, sélectionnez-en une. Sidney et jusqu'au dernier ici. Magnifique. Et maintenant, nous avons du contenu que nous avons généré à l'aide Fig MyI en quelques minutes. C'est merveilleux. Maintenant, en regardant cela, l'espacement est un peu écrasant, alors peut-être qu'au lieu de 24 pixels, nous pouvons en faire 32 Génial Ça commence à vraiment bien paraître. Maintenant, cet espacement vertical pourrait également être un peu plus élevé. Faisons donc 32 pixels ici. Génial Ça commence à être vraiment beau. Maintenant, nous avons encore quelques éléments à ajouter ici. Nous n'avons toujours pas ajouté l' icône populaire et le bouton ici Revenons donc à la section suivante pour ajouter ces deux parties également 41. Design d'étiquettes: En regardant cela, je me suis rendu compte que nous n'avions pas vraiment besoin de bouton, comme nous le faisions à l'origine dans nos wireframes, car les cartes elles-mêmes peuvent agir comme Nous avons donc ces images, et nous n'avons pas nécessairement besoin que l'utilisateur ait un bouton ici, comme Figma l'a fait ici avec sa version C'est pourquoi il est intéressant d' utiliser ces fonctionnalités de l'AIA. La seule chose dont je ne suis pas un grand fan c'est l'espacement qui existe toujours Il a l'air un peu trop bondé. Alors pourquoi ne pas essayer de donner un peu plus de marge de manœuvre à nos designs et essayer un espacement de 48 pixels entre les cartes Oui, nous n'avons pas cette quatrième carte ici, mais je pense qu'il est très important nos designs aient cet espace. Pour des raisons de cohérence, il serait bien que nous espacions également nos entrées ici pour qu'elles correspondent également à cela Génial. Nous voulons également ajouter un tag pour afficher les articles les plus populaires ou les destinations les plus populaires. Et nous pouvons le faire grâce à un joli tag ici avec une icône. Ouvrons donc les icônes de phosphore et cherchons une icône de feu. Cliquez sur l'un d'eux. Celui-ci est sympa. Nous pouvons l' ajouter dans notre cadre ici, et peut-être pouvons-nous ajouter un titre ici, populaire. Disposez automatiquement ces deux éléments ensemble. Celui-ci n'est toujours pas à l'intérieur, donc nous voulons nous assurer qu'il est à l'intérieur. Ensuite, nous allons procéder à la mise en page automatique de ces deux-là. Le texte est trop grand, alors optons pour le pied de page en gras, ou en fait, nous n'avons pas besoin qu'il soit en gras, même un simple pied de page est une bonne chose Et pour améliorer les visuels, nous pouvons le placer sur le côté haut à droite ou en haut à gauche ici Maintenant, vous voyez que ce n' est pas très beau avec les couleurs et par-dessus ces images. Ce serait donc bien si cette mise en page automatique comportait également un remplissage blanc et que nous allions augmenter le rayon pour qu'il soit complètement circulaire. Un peu d'espacement, peut-être à deux ou quatre pixels des côtés et du haut serait bien Et en fait, cet espacement est un peu trop faible, surtout horizontalement Peut-être voulons-nous en faire huit horizontalement. Et cette icône, nous allons la redimensionner à 16 x 16 Changeons l'icône en une belle orange. Et en fait, nous pouvons faire un joli dégradé d'orange. Pourquoi ne pas faire un dégradé ici. Et pour la première couleur, nous allons faire du joli orange ici. Et pour la deuxième couleur, nous allons faire une jolie sorte d' orange plus foncé. Ça a l'air bien. Maintenant, ici en bas, ça a l' air beaucoup mieux. Et bien sûr, ils ne devraient pas tous avoir l'icône populaire. Nous n'en avons besoin que sur s. Tout d'abord, pour le texte ici, allons-y et faisons en sorte que le texte 500 ou le texte 400 soit vraiment mieux. Créons une propriété booléenne et appelons-la Is popular. Par défaut, nous allons laisser la valeur false, create property. Ensuite, nous allons sélectionner cette balise ici et associer la visibilité à sa popularité. Maintenant, nous allons aller ici et peut-être que nous le ferons pour l'un d'entre eux. Peut-être que celui de Londres est populaire. Celui de Tokyo est populaire. Maintenant, c'est plus aléatoire. Cela commence à être vraiment sympa, et nous n'avons plus que quelques éléments à ajouter. Notre carte est à peu près complète pour notre page de découverte de destinations. Il nous manque un filtre sur le bouton de tri, puis les collections ici. Je vais vous laisser les collections à titre d'exercice maintenant que nous avons créé votre carte. Nos collections sont donc essentiellement des groupes de destinations différentes. Il peut donc s'agir d'escapades romantiques, de voyages amusants ou de voyages d'un mois, toutes les peut donc s'agir d'escapades romantiques, de voyages amusants ou de voyages d'un mois, catégories auxquelles vous pouvez penser Et si vous avez besoin d'aide, n'hésitez pas à utiliser Chat GPT pour obtenir des idées pour différentes collections Ce sera donc un exercice que vous devrez faire vous-même. J'en ferai une version dans mon propre fichier, et bien sûr, vous aurez le lien au cas où vous voudriez voir comment je l'ai fait. Revenons maintenant à la texture suivante pour travailler sur le filtre et les boutons de tri 42. Boutons de tri de filtre: Nous voulons maintenant ajouter un filtre et un bouton de tri , puis un texte supplémentaire pour indiquer le nombre de résultats consultés par l'utilisateur. allons donc ajouter un texte ici entre les entrées et les résultats, et nous allons écrire le nombre de résultats. À titre d'exemple, écrivons 42 résultats. Modifiez-le en corps et changez la couleur du texte en texte 300. Et maintenant, dans la même ligne, nous allons ajouter des boutons de filtrage et de tri. Maintenant, je vais faire glisser une copie de ce bouton ici et mettre en page automatiquement ces deux boutons en utilisant Shift A, faire une mise en page horizontale. Maintenant, ce conteneur parent est un peu décalé. Nous allons donc continuer et simplement utiliser ce contenu, de manière à ce qu'il puisse contenir trois cartes avec l'espacement que nous avons Donc, de cette façon, nous pouvons réellement utiliser le remplissage ici et utiliser un espacement automatique Et pour ce bouton, remplissons les conteneurs. Cela occupe donc tout l'espace ici. Cette recherche, nous voulons en fait la changer pour peut-être un type de bouton secondaire et la modifier pour la trier par pertinence. Bien entendu, ils peuvent cliquer pour le modifier. Et nous allons en faire une autre et faire une mise en page automatique entre les deux avec un espacement de 16 pixels et du contenu câlin Pour l'espacement, augmentons-le à 24, et celui-ci sera constitué et celui-ci sera Ce serait bien d'avoir des icônes à côté de ces boutons. Nous allons donc faire la même chose avec notre bouton où nous y ajoutons également des icônes. Mais tout d'abord, trouvons deux icônes, 14 Sort, 14 filtrent à l'aide d'icônes au phosphore Nous allons rechercher SRT. Celui-ci est sympa. Nous allons filtrer. Celui-ci est sympa. Les deux sont là, appuyez sur la commande K sur les deux, renommez-les filtre d'icônes. Et celui-ci va être une barre oblique. Désolé, celui-ci est en fait un filtre, et celui-ci va être nul. Ce seront des épées. On dirait qu'ils ne sont pas vraiment dans notre section ici. Nous voulons les intégrer et faire 20 pixels sur 20 pixels pour la taille, puis la remplacer par 500 pixels principaux pour la couleur. Et maintenant allons-y et amenons l'un d'entre eux ici. Maintenant, pour celui-ci, nous voulons le changer blanc, car il se trouve sur un bouton bleu et collez-le ici, et pour celui-ci, nous allons réinitialiser toutes les modifications, et pour celui-ci, nous allons réinitialiser toutes les modifications, afin qu'il revienne à la même couleur qu'ici. Et ajoutons une propriété booléenne, affichons l'icône de gauche et lui Maintenant, en les sélectionnant tous les deux comme ceci, nous allons continuer et lier la visibilité pour afficher l'icône de gauche. Et encore une chose , avant de faire cela, nous allons également créer une nouvelle propriété appelée échange d' instance, que nous allons appeler icône. Et par exemple, nous allons choisir une icône et en trier une, créer une propriété, associer ces propriétés à l' appliance, passer à l' icône et lier la visibilité à l'icône ShowLeft Alors maintenant, nous pouvons descendre ici. Sélectionnez-les tous les deux, affichez l'icône de gauche dessus. Maintenant, l'un d'entre eux sera une sorte. L'autre sera un filtre. Nous y voilà. Génial. Nous avons donc ces boutons maintenant. Ils permettent à l'utilisateur de filtrer les résultats. Et en fait, un corps plus gros peut sembler un peu plus beau ici pour les résultats, et il commence à être beaucoup plus beau. Disposons automatiquement ces deux éléments et augmentons un peu plus l'espacement entre eux, peut-être 40 pixels. Je pense que c'est mieux. Alors, que se passerait-il s'ils cliquaient sur le tri ou sur les filtres Nous pouvons ouvrir des listes déroulantes ici pour leur montrer les différentes options, le fait qu'ils peuvent trier par popularité , prix ou options de filtrage , comment ils peuvent choisir le budget , la durée, etc. Ou nous pouvons ouvrir un conteneur à moteur qui est un boîtier moteur sur le dessus. Et comme notre filtre et notre tri plus basiques, je pense qu'une liste déroulante suffira. Alors, quand ne reviendrons-nous pas lors de la prochaine conférence pour concevoir ces menus déroulants afin de voir à quoi ressemblerait si quelqu'un clique sur ces filtres ou les trie par bouton. 43. Design déroulant: Concevez nos listes déroulantes pour quelques endroits, en fait. Nous pouvons utiliser cette liste déroulante non seulement pour le tri selon les filtres. Nous pouvons même l'utiliser pour la liste déroulante ici s'ils cliquent sur leur photo de profil, en parlant de photo Nous allons donc concevoir une liste déroulante générique leur photo de profil, en parlant de photo de profil. Nous allons donc concevoir une liste déroulante générique que nous pourrons modifier ou créer plusieurs variantes pour différents lieux En ce qui concerne les options présentées ici, nous avons indiqué que les options de tri étaient la popularité par prix et par note. Nous pouvons donc avoir ces options sous forme d'options et de liste déroulante, puis nous avons le budget pour le filtre, la durée, le type d'expérience et la météo pour revenir à nos conceptions. Ce que nous voulons faire, c'est créer une liste déroulante et nous pouvons en créer une dans le canevas ici, puis commencer à la déplacer vers le bas, juste pour voir à quoi elle ressemblerait. La première chose que je veux faire est d'appuyer sur T pour commencer un texte et l'écrire, et nous ferons le genre de travail Nous allons donc faire preuve de pertinence. Ensuite, je vais appuyer sur Shift A pour créer une mise en page. Changez le fond en blanc et changez la couleur du texte ou le texte 500. Désormais, dans une mise en page automatique, vous pouvez toujours créer une largeur fixe si vous le souhaitez. Cela signifie donc que vous pouvez réellement faire glisser la largeur ici ou la hauteur et créer une largeur spécifiée. Donc, pour quelque chose comme une liste déroulante où nous connaissons une largeur spécifique que nous voulons que notre liste déroulante soit, je la place ici juste pour vous montrer la relation. C'est encore un peu petit. Il pourrait être un peu plus grand. Ou nous pouvons même lui donner la taille de ce bouton ici, qui est de 245. Ensuite, ce que nous voulons faire, c'est appliquer un corps en textile ici. Ainsi, lorsque vous avez une largeur fixe pour la mise en page automatique, si le contenu s'allonge, cela ne change pas la largeur, comme vous le voyez. La largeur reste toujours la même. Mais vous pouvez modifier le contenu de votre câlin pour que le texte remplisse le conteneur. Ainsi, s' il y a du texte supplémentaire, il se répandra horizontalement vers l'extérieur comme ceci Je vais passer à la ligne suivante au lieu de sortir de la boîte ou du contenant. Plutôt. Nous allons donc mettre la pertinence ici, puis nous voulons cocher une petite case pour indiquer que la pertinence est actuellement sélectionnée pour le tri par. Je vais ouvrir les icônes au phosphore, prendre un chèque et voilà, il sera collé dedans, C'est un peu trop grand. Nous allons donc utiliser un outil de mise à l'échelle, que j'ai juste appuyé sur K sur le clavier. Parfois, il est préférable d'utiliser l'outil de mise à l' échelle pour redimensionner au cas où un trait ou d'autres objets pourraient devenir trop fins si vous utilisez un simple outil de déplacement. Écrivons donc 16 par 16. Je pense que c'est plutôt bien. Et nous pouvons même appliquer les 500 couleurs primaires. Et juste pour montrer que c'est celui sélectionné, nous pouvons le changer en gras, en fait. C'est maintenant le genre. Nous pouvons appliquer un style similaire à partir de ce bouton à ici. Et si vous voulez réellement copier un style de ce bouton et le coller ici, il vous suffit de sélectionner votre bouton, Alt Command C, et là, Alt Control ou Alt Command V. Mais la seule chose qui se produira, c'est que toutes les propriétés seront collées Nous revenons donc au contenu du HC plutôt qu'à une hauteur ou une largeur fixes. Nous pouvons donc simplement taper 245 ici. Oups, 45 ans, et ça s'applique déjà. Maintenant, le rembourrage ici ou les marges de gauche et de droite sont de 24 Je pense que nous pouvons le ramener à 16. Et nous allons créer leur propre mise en page automatique à l'aide de Shift A. Nous avons donc maintenant la mise en page automatique. Et nous allons appuyer sur la commande D pour le dupliquer. Mais au lieu d'une disposition horizontale, nous voulons une mise en page verticale , nous avons donc différentes options que l'utilisateur peut sélectionner. Et évidemment, nous voulons vraiment nous débarrasser de cette coche Vous pouvez soit vous en débarrasser, soit simplement le cacher. Pour masquer, commandez Shift H ou cliquez à nouveau sur l' icône ici. Ainsi, vous pouvez le réactiver si vous voulez montrer que la pertinence est sélectionnée, ou qu' une autre option est sélectionnée, et que celle-ci n'est plus en gras, et nous allons changer celle-ci en distance Ou en fait, nous voulons de la popularité. Ensuite, nous allons dupliquer cette mise en page automatique pour le prix. Nous allons spécifier du plus bas au plus élevé, puis nous allons le dupliquer une fois de plus et spécifier du plus haut au plus bas afin que l'utilisateur ait la possibilité d' afficher le prix du plus haut vers le plus bas ou du plus bas vers le plus haut, et peut-être aussi en fonction des évaluations. Donc ça a l'air bien. Une autre chose que nous pouvons faire dans notre liste déroulante pour la rendre un peu plus visuelle est d'augmenter l'écart entre les différentes options, ce qui est formidable, mais nous pouvons également ajouter une ligne de démarcation entre elles. Maintenant, nous avons déjà créé une ligne de démarcation ici, en fait. Je vais donc maintenir la touche Commande enfoncée pour le sélectionner et le copier depuis notre page de connexion directement dans notre menu déroulant. Ce qui est bien, c'est que si vous le collez, vous suffit de modifier la largeur pour remplir le conteneur, et vous pouvez le déplacer de haut en bas. Et pour le dupliquer rapidement entre chaque élément, il suffit d'appuyer sur la commande D pour le dupliquer et sur la flèche vers le bas. D, commande D, flèche vers le bas, commande D, flèche vers le bas. Nous avons donc maintenant cette ligne entre les différents éléments pour créer une meilleure séparation visuelle entre eux. Maintenant, je tiens les touches Commande et Maj enfoncées pour les sélectionner toutes ensemble. Je pense que cette couleur est un peu trop forte. Peut-être pouvons-nous réellement le dissocier de nos textiles et en créer une version plus légère Je pense que c'est sympa. Vous pouvez également faire la 50e primaire. Ces deux options sont bonnes. Je vais en rester à la 50e primaire, en fait. Le truc, c'est que si vous l' apportez ici, il va entrer dans le schéma automatique et tout gâcher. Si vous voulez voir à quoi cela ressemblerait en haut de la page, vous pouvez simplement faire deux choses. Vous pouvez soit utiliser le Shift et la flèche droite, soit la flèche gauche ici pour l'insérer manuellement dans le cadre sans le faire glisser accidentellement dans un cadre de mise en page automatique ou une autre option Si c'est à l'intérieur de n'importe quel cadre de mise en page automatique, vous pouvez cliquer sur ce bouton qui dit Ignorer la mise en page automatique et cet élément spécifique ignorera la mise en page automatique Vous pouvez le déplacer où vous le souhaitez et il n'interagira pas avec les règles de mise en page automatique. Nous voulons l' espacer un peu, et nous montrons simplement à quoi cela ressemblerait une fois ouvert. Et même si c'est bien, la seule chose que cela pourrait utiliser est une séparation entre l' arrière-plan et le premier plan Nous devons montrer que cette liste déroulante est ouverte ou dans un état ouvert. Donc, ce que nous pourrions faire ici, c'est créer une ombre plus forte pour mettre en valeur cela, afin d'ajouter un effet par défaut L'effet est une ombre portée, c'est ce que nous voulons, et nous voulons appliquer une ombre dont le Y est légèrement supérieur, afin qu' elle soit plus verticale vers le bas, comme vous pouvez le voir ici, et nous pouvons augmenter le flou jusqu'à 16 ou même 24. Essayez-en 30 ici. C'est mieux Et pour ce qui est de l'opacité, j'aime toujours le régler un peu plus bas Nous ne voulons pas que cela soit aussi visible. C'est donc une bonne idée. Vous pouvez clairement voir qu'il est distinct de l'arrière-plan. Donc c'est sympa. C'est ouvert. Ensuite, s'ils continuent et cliquent sur une option ici ou n'importe où ailleurs sur l'écran, cette liste déroulante se fermera. Donc, pour des éléments comme celui-ci, que vous souhaitez présenter, disons, à un développeur qui va travailler là-dessus, ce que j'aime faire, c'est placer cette liste déroulante en dehors de mes conceptions, lui donner un nom, afin que nous puissions trier liste déroulante et que vous puissiez toujours utiliser la fonction de commentaire Donc, si vous appuyez sur C sur votre clavier, vous pouvez laisser des commentaires à d'autres personnes. Vous pouvez étiqueter votre développeur et écrire qu'il s'agit de la liste déroulante pour l'option de tri. C'est une façon de procéder. Une autre méthode consiste à utiliser DevMo pour laisser des annotations Nous aborderons cette question dans de futures conférences, je n'y reviendrai donc pas pour le moment. Donc, avec cela, il y a aussi l'option de filtre ou la liste déroulante des filtres. Je vous laisse le soin de le faire. Et encore une fois, vous aurez toujours accès à mon dossier au cas où vous voudriez voir comment je l'ai fait. Une fois que vous aurez terminé, revenons à la prochaine conférence pour passer à la page suivante, qui sera la page de description ou la page de réservation, comme vous voulez l'appeler. Il s'agit de la page qui se trouve en fait juste après cette page. Ainsi, une fois qu'un utilisateur clique sur Londres, au Royaume-Uni, il est clique sur Londres, au Royaume-Uni, redirigé vers la description de cet article ou, encore une fois, le nom n'a pas vraiment d'importance. Ce qui compte, c'est qu' il s'agisse d'un écran de réservation. C'est un endroit où ils peuvent voir plus d'informations sur cette page. C'est la page dont nous avons également créé le wireframe J'ai ici un wireframe dans lequel j'ai mis en évidence les différents éléments de cette page Nous allons donc examiner cela de plus près, puis encore une fois, adopter un style similaire, commencer par le haut, aller vers le bas et commencer à concevoir. 44. Page de détails du voyage: Accédez à notre page de détails sur le voyage. J'oublie que c'est comme ça que je vais l'appeler pour le moment. Et mon design est ici. Je vais me débarrasser de ce premier brouillon généré par l'IA. Et jetons un coup d'œil à nos wireframes pour voir ce que nous avons dans ce design Donc, depuis le haut, nous avons une barre de navigation que nous avons déjà conçue. Nous voulons avoir un bouton de retour afin que les utilisateurs puissent facilement revenir à la page de recherche ou à la page de découverte de la destination. Nous voulons le nom de la destination. Donc, comme sur la carte, la ville et le pays, nous les appelons simplement ville et pays, mais ils pourraient avoir des noms plus intéressants. Et peut-être que nous allons également explorer cela dans un petit moment en utilisant Figma AI Mais avant d'entrer dans le vif du sujet, nous avons notre note de départ ici. Nous avons l' icône de popularité ou le tag, ainsi que le signet ou le bouton Enregistrer Vous pouvez donc ajouter ce voyage à vos favoris si vous souhaitez le consulter plus tard Quelques images sur ce site, afin que nous puissions inclure l' image du voyage. Donc, pour le moment, nous n'avons qu' une image de la ville. Mais vous pouvez imaginer que dans certaines situations, ce voyage, quelle que soit la personne qui l'a créé , puisse contenir plusieurs images de personnes s' amusant pendant ce voyage, etc. Ce sont peut-être des images générées par les utilisateurs. Je vous laisse le soin de décider si vous voulez expérimenter quelque chose en dehors de ce que j'ai conçu ou que j'ai esquissé ici Le but n' est pas de faire exactement comme je le fais, mais aussi d'inclure votre propre créativité. N'hésitez donc pas à prendre cette initiative dans la direction que vous jugerez utile. Ensuite, juste en dessous, nous voulons un appel à l'action pour qu'ils sélectionnent une pièce. La prochaine étape pour qu'ils choisissent ce voyage est donc de sélectionner la chambre dans laquelle ils vont dormir. Et ici, nous avons quelques icônes des commodités incluses dans cette destination ou , encore une fois, dans ce forfait de voyage. Donc, qu'est-ce qui est inclus, et nous pouvons les avoir sous forme d'icônes, etc. Ensuite, nous avons notre logement. Ce sont donc des cartes pour voir les différents types de chambres et le prix par nuit. Avec la possibilité de filtrer ou voir les dates qu' ils ont déjà appliquées à partir de cette page. Donc, s'ils ont déjà appliqué quelques dates à partir de et deux, cela pourrait apparaître ici. Sinon, ils pourraient le saisir, ainsi que le nombre de voyageurs, ce qui pourrait avoir une incidence sur le prix qu'ils paient. Et s'ils entrent certaines dates, vous pouvez imaginer que nous pouvons réellement modifier ce prix par nuit pour le prix total que ce voyage leur coûtera. Ce serait donc une question intéressante à explorer. Juste en dessous se trouvent les options de réservation Nous pouvons donc même indiquer ce prix total dans l'option de réservation ici. Et puis nous avons quelques évaluations. Nous avons donc différentes cartes d'évaluation, de témoignage ou de notation que nous pouvons concevoir, ainsi que des destinations similaires Cela pourrait donc être similaire aux cartes de destination que nous avons déjà conçues. Il se peut qu' ils envisagent d'autres options. Cela contient une bonne quantité de contenu à l'intérieur de cette page de détails. J'ai pensé que c'était bien d'inclure tout ce dont l'utilisateur aura besoin à ce moment-là. Si vous vous mettez à la place de l'utilisateur et que vous consultez une page de réservation, quels sont les points que vous vous posez et qu'il serait bon les inclure et de vous assurer de les inclure ici. Ce sont donc ceux qui, selon moi, auraient du sens ici. Et l'objectif est qu' une fois qu'ils ont cliqué sur Réserver, ils accèdent à la page de réservation d'où ils peuvent saisir le reste de leurs informations personnelles, informations de paiement, alors ajouter une carte pour le paiement. Nous pouvons avoir des options supplémentaires pour le voyage, comme une assurance, d'autres choses. Peut-être comme une location de voiture, etc. , puis un bouton pour terminer Et sur le côté, nous avons un résumé de ce qu'ils réservent. Nous allons donc parcourir cette page, bien sûr, plus tard. Pour l'instant, concentrons-nous sur la page que nous sommes en train de concevoir. Comme pour la page de découverte des destinations, nous allons le décomposer étape par étape. Tout d'abord, nous allons nous concentrer sur cette partie supérieure ou sur le type de section réservée aux héros de cette page de détails spécifique. Nous allons donc inclure les informations de base, une description ici et un bouton pour sélectionner la chambre, ainsi que ces icônes ici et les images. Commençons donc par cela et par tout ce qui se trouve en dessous. Nous y reviendrons dans les conférences suivantes. Donc, si vous êtes prêt, passons à la conception. C'est une page passionnante. 45. Design d'en-tête de voyage: Très bien, nous allons donc créer cette partie supérieure de notre page de détails sur les destinations Tout d'abord, dupliquons ce cadre ici en utilisant Alt. Nous pouvons laisser la barre de navigation ici, mais nous pouvons nous débarrasser de ce contenu ici Allons-y et commençons par un texto. Et ce sera pour notre bouton Retour. Nous vous répondrons. Vous pouvez également répondre à toutes les destinations qui dépendent vraiment de vous. C'est bien de dire à l'utilisateur où il ira exactement s'il clique ici. Nous voulons que celui-ci soit à 32 pixels du haut, je crois, et faisons 48 pixels à partir de la gauche. C'est donc agréable et même avec notre réseau. Je veux inclure une petite icône ou un chevron ici. Alors ouvrons Phosphor et cherchons Chevron, il y en a un bon que vous pouvez utiliser Je vais sélectionner les deux ensemble et appuyer sur Shift A, mais en faire une horizontale. Magnifique. Maintenant, le problème, c'est qu'au lieu d'une largeur fixe, nous voulons un contenu câlin. C'est bien mieux. Je pense que l'espacement est correct ici car l'icône elle-même a déjà un peu de rembourrage, nous n'avons donc pas vraiment besoin de les espacer Mais si vous utilisez une icône qui doit être espacée, vous pouvez toujours ajuster l'écart entre votre Chevron Vous faites même quatre pixels ici. Ensuite, nous voulons sélectionner une ligne à gauche , mais au milieu. Donc, verticalement, ce n'est pas en haut, ce n'est pas en bas. C'est juste au milieu. Et pour la couleur de sélection, ce qui, encore une fois, dans un cas comme celui-ci où nous avons à la fois un chevron et un texte, signifie que nous changeons le texte ou la couleur des deux Nous pouvons le régler sur le texte 400 ou même le texte 300. C'est donc un bouton subtil qui n'a pas besoin d'être très visible ou évident, tant qu'il permet de faire le travail ici, et je pense que c'est le cas. Voici notre bouton de retour. Nous voulons le nom de la destination, la ville, le pays , le classement, la popularité et la sauvegarde, ainsi que l'image ici. Commençons donc par l'image car nous pouvons simplement copier l'une de ces images. Travaillons sur celui de Londres au Royaume-Uni. Je double-clique donc jusqu'à ce que j'aie ce cadre avec une image dedans, sur la commande C de mon clavier, reviens ici, je sélectionne notre cadre et j'appuie sur la commande V pour le coller. Nous nous assurons simplement que notre alignement est parfait. Maintenant, une chose est que j'ai collé dans le cadre, qui contient également cette balise populaire dans l'icône des favoris, mais nous ne les voulons pas exactement ici qui contient également cette balise populaire dans l'icône des favoris, mais nous ne les voulons pas exactement Je vais appuyer sur la commande G pour créer un groupe pour ces deux. Ainsi, le fait de regrouper des éléments vous permettra de les déplacer facilement et de déplacer également cette balise. Nous les aurons sur le côté, ce dont nous aurons besoin dans une seconde. Celui-ci a l'air bien, sauf que nous pouvons l'avoir un peu plus grand. C'est là que notre réseau serait très utile. Ainsi, en étiquetant notre grille, nous pouvons voir exactement où serait également un bon endroit pour élargir notre image. Et je pense qu'ici, prendre contrôle de quatre colonnes est parfait. Nous avons en fait cinq colonnes. Je pense que c'est une bonne division entre cinq colonnes et sept pour le reste des informations ici. Vous pouvez également en faire quatre ici, mais je pense que les images sont importantes et devraient être suffisamment grandes pour être vues ici. Pour ces petits d'ici bas, nous pouvons pour l'instant simplement dupliquer celui-ci ici et en faire un plus petit. Et je maintiens le rythme pour me limiter aux proportions. Dans le cas contraire, votre cadre sera éparpillé. Assurez-vous donc de maintenir la touche Maj enfoncée si vous souhaitez obtenir la même proportion entre votre largeur et votre hauteur. Et une chose est qu'au moment où je réduis ce champ, vous voyez que le rayon de la bordure ou le rayon des coins ne change pas. C' est donc un peu étrange parce que c'est trop rond ici Nous allons donc ajuster cela dans une seconde. Si nous activons notre grille une fois de plus, je pense que vous pourrez apporter quelques ajustements ici pour que tout d'abord, cela soit beau et que chacune de ces petites images puisse être sa propre grille. Maintenant, nous pouvons en dupliquer un, les placer ici. Je vais les assembler automatiquement, puis les dupliquer encore quelques fois jusqu'à ce que nous en ayons Maintenant qu'une mise en page automatique est sélectionnée, si vous souhaitez apporter des modifications rapides à tous les éléments en même temps, une fois la mise en page automatique sélectionnée, si vous appuyez sur Entrée, vous pouvez sélectionner chaque petit élément situé en dessous ou à l'intérieur de celle-ci. Maintenant, nous pouvons rapidement apporter une modification et faire que le rayon d'angle soit de huit pixels. Voyons à quoi ça ressemble. OK, ça a l'air bien. Bien sûr, nous avons besoin d'images différentes, et peut-être qu'il serait bon d'avoir une bordure ou un trait pour elles. Je vais sélectionner celui-ci, créer un trait et utiliser le 200 points secondaires, et je vais appliquer un trait à ceux-ci aussi, ou le 200 secondaire. Nous devons maintenant ajouter nos étiquettes ici. Commençons donc par les étiquettes pour le moment. Nom de la destination Et nous allons faire un H deux ou peut-être un peu trop gros, donc un H trois pourrait être une bonne chose. Ici, 900 comme couleur de police secondaire, ce qui permet à nouveau à notre grille de voir où nous pouvons placer celle-ci. Maintenant, pour l'espacement entre les deux, faisons 40 pixels ou nous pouvons même en faire 48 Nous avons donc le nom de notre destination. Nous voulons la ville et la campagne. Je vais donc continuer et simplement copier la ville et pays d'ici à là, vous n'avez pas besoin de tout faire deux fois. Nous allons faire la lecture. En fait, je vais simplement le copier avec l'icône ici. Nous avons le tag de popularité ici et cette icône de signet. Ils sont donc tous ensemble en ce moment, mais bien sûr, nous devrions les agencer automatiquement pour qu'ils restent homogènes. Celui-ci devrait être content. Et pour une raison quelconque, celui-ci ignore la mise en page automatique. Nous voulons donc qu'ils n'ignorent pas tous la mise en page automatique. Mais bien sûr, l' espacement entre eux est bien trop petit. Nous allons changer cela pour peut-être 32 pixels ou même 48 pixels. 32 pixels, voire 40 pixels. Espacez-les de 16 pixels à partir d'ici. Mise en page automatique. Ajoutons une autre couche de texte ici. Il s'agit d'un texte de description. Nous l'ajouterons plus tard. Maintenant, si vous voulez une zone de texte fixe, vous pouvez toujours changer votre zone de texte d' une largeur automatique à une taille fixe. Donc, si je corrige ce problème, le texte se répandra automatiquement sur la ligne suivante jusqu'ici. Et comme il a une hauteur fixe, il doit être enroulé automatiquement à partir de la largeur ici. Voilà à quoi cela ressemblerait, ou vous pouvez choisir une largeur plus ou moins grande. Ensuite, nous voulons utiliser un bouton depuis nos ressources locales Essayons-le ici pour qu'il soit maintenant indiqué de sélectionner une chambre. Nous pouvons le modifier pour afficher la disponibilité à la place. Je pense que ça sonne mieux. Maintenant, celui-ci n'est pas inclus dans notre mise en page, nous voulons donc l'inclure également dans celui-ci. Donc, celui-ci, nous voulons en fait contenir du contenu chaud, afin qu'il rétrécisse et grandisse avec le contenant, et nous voulons celui-ci au lieu d'un fixe contenant également du contenu chaud Donc, à l'heure actuelle, c'est cette couche de texte qui maintient les limites de la mise en page automatique parent. Mais l'espacement entre les deux est un peu trop serré Si nous le changeons à 40, il est alors trop grand entre les deux Nous pouvons donc les disposer automatiquement séparément et en faire 24, et le reste semble bon Je vais changer celui-ci en 16 pixels pour l'écart. Et nous allons fixer la hauteur de celui-ci. Et ce que nous allons faire, c'est l'adapter de manière qu'il soit conforme à cette image ici. Je pense que ça aurait l'air mieux. Et pour le texte lui-même, nous allons remplir le conteneur qu'il soit enroulé ici Si le texte est trop long, nous ne voulons pas trop insister sur le texte. Nous allons donc cliquer sur paramètres de saisie ici et tronquer le texte Donc, si le texte est trop long, il sera tronqué comme ça Ça a l'air mieux. Et si cela nous prend trop de temps, nous pouvons toujours avoir un bouton en savoir plus ou en savoir plus juste en dessous. Je ne l'ajouterai pas ici, mais vous pouvez toujours l'ajouter. Génial Nous n'avons pas les éléments ou icônes inclus ici. Nous reviendrons dans la section suivante pour les rassembler, ainsi que quelques exemples de contenu pour notre page 46. Utiliser les outils d'écriture dans Figma AI: FigMa AI nous fournit donc de nombreux outils d'écriture, et nous pouvons réellement améliorer le contenu en utilisant uniquement l'IA, et vous n'avez plus besoin de sortir de FigMA Vous pouvez simplement le faire ici. Alors pourquoi ne pas jeter un coup d'œil à ce qu'il peut faire pour nous en accédant à notre menu d'action. Et puis, si vous passez à l' offing et à l'écriture, vous verrez quelques options Vous pouvez demander à Figma de réécrire quelque chose, raccourcir ou de le traduire dans une autre langue Maintenant, en ce moment, je veux réellement réécrire ce nom de destination pour un meilleur nom Alors pourquoi ne pas lui demander de trouver un nom de voyage passionnant et abrégé pour un voyage, disons, à Londres, au Royaume-Uni. Voyons ce qu'il en résultera. Il suffit d'appuyer sur Entrée, puis OK, c'en est une autre. Et si cela ne vous plaît pas, vous pouvez lui demander d'apporter des modifications. Vous pouvez lui demander de le raccourcir ou de le rendre plus décontracté. Demandons quelque chose de plus décontracté. OK, c'est un peu trop long. Raccourcissez les modifications. Je n'aime pas vraiment ça. Je veux qu'il soit réécrit avec une activité spécifique populaire à Londres et qu'il soit bref. Voyons voir. OK, c'est intéressant. Je peux en faire un plus court. Je vais vous dire de faire avancer les choses. Et voyez ce qu'il fait. OK, on peut y aller. Vous pouvez continuer à vous demander d'apporter des modifications, et vous pouvez bien sûr également intervenir et apporter vos propres modifications. Je pense que celui-ci est sympa et nous pouvons demander et nous pouvons réécrire le texte de description, le remplacer par une description de ce à quoi un voyage d'une semaine à Londres au Royaume-Uni pourrait ressembler un voyage d'une semaine à Londres au Royaume-Uni pour un voyageur souhaitant réserver ce voyage Voyons ce que cela donne ici. Génial Je pense que c' est plutôt bon pour le moment, bien meilleur que le texte original. Et au lieu d'une taille de pied de page, faisons-en une taille de corps Et je vais ramener la hauteur d'ici à ici. Donc, en fait, notre bouton Afficher la disponibilité correspond au bas de cette page et je vais additionner ces deux éléments dans l'ordre et ceux-ci également. Bien mieux. Revenons lors de la prochaine conférence pour rassembler les icônes ce qui est inclus en termes de commodités, puis passons à notre section sur l'hébergement. 47. Liste des fonctionnalités: Pour la partie suivante de la page détaillée de la destination, nous souhaitons donc ajouter des icônes qui indiquent les équipements inclus dans cadre de la destination ou du voyage qu' ils effectuent. Et juste en y jetant un coup d'œil, nous pouvons l'ajouter juste en dessous de nos images ici. Au fait, j'ai également ajouté quelques images provenant du plugin Unsplash Si vous ne l'avez pas fait pour les différentes images ci-dessous, vous pouvez également prendre une seconde pour le faire. Maintenant, pour le titre de cette section, nous pouvons simplement l'appeler Ce qui est inclus, puis avoir quelques icônes et peut-être du texte pour expliquer ce que cela signifie. Je vais donc ajouter une nouvelle couche de texte ici, ce qui est inclus. Et pour le type, je veux faire en sorte que nous soyons dans un six, c'est bien. Je vais l'amener ici, en l'espaçant de 48 pixels par rapport au haut. Et maintenant, avant mettre dans un cadre de mise en page extérieur avec le reste du contenu ici, je vais d'abord le mettre en gras ici, donc j'appuie sur la commande B ici. Ensuite, pour les icônes, je vais utiliser les icônes au phosphore à brancher ici pour faire glisser certaines icônes Donc, certaines choses sur lesquelles nous pouvons écrire sont et je vais ajouter juste un tas d'icônes. N'hésitez pas à me suivre si vous le souhaitez. Je vais ajouter une icône de natation, et en ce moment elle passe dans mon cadre. Je ne peux pas le voir complètement, mais j'y reviendrai dans une seconde. Nous allons en faire une avec une serviette ici. Je sais Donc, les icônes se trouvent juste ici. Je vais juste le faire glisser juste en dessous pour que nous puissions le voir. Nous allons prendre un café pour voir s' il y a du café inclus dans ce voyage ou une machine à café. Peut-être que nous en ferons un pour le petit déjeuner, ou en fait, nous n'en avons pas vraiment, alors peut-être une fourchette. OK, celui-ci fonctionne. Si nous pouvons dire que le petit déjeuner est inclus ou non. Nous allons faire une sonnette. Juste pour montrer s' il y a un concierge, peut-être 24 heures sur 24, 7 jours sur 7 ou quelque chose comme ça Si nous recherchons de l'aide, nous avons celle-ci ici, nous pouvons donc simplement dire que nous avons une assistance 24 heures sur 24, 7 jours sur 7 ou quelque chose comme ça inclus. Voyons voir. Que pouvons-nous mettre d'autre ici ? Je veux probablement mentionner le WiFi. C'est une question importante. Je pense que c'est une bonne idée pour commencer pour le moment. Donc, pour ces icônes, elles sont collées au format SVG, ce qui signifie que nous pouvons facilement les redimensionner et les reformater qu'elles perdent leur qualité, donc c'est bien Je vais simplement les sélectionner tous ensemble comme ceci et appuyer sur Autoaout ou Shift A. C'est beaucoup plus net. Et puis je vais faire exactement la même chose avec ce titre What's Included. Les icônes peuvent être légèrement plus grandes. Donc, ce que nous pouvons faire, c'est cliquer sur cet Autoeuframe que nous venons de créer, appuyer sur Entrée pour en sélectionner tous les composants enfants Et je vais appuyer sur K pour accéder à notre outil de compétences, et nous avons ici la largeur et hauteur que nous pouvons définir pour ces icônes. Je vais donc essayer 32 par 32. C'est un petit peu mieux. Mais nous voulons nous assurer que cela concerne plutôt le contenu des câlins. Même chose pour celui-ci. Les icônes sont un peu trop sombres pour le moment. Je vais appuyer sur Escape pour sortir de cet outil de balance. Ajoutez un peu plus d'espacement ici, peut-être 16 pixels. Pour cela, ce qui est inclus, nous pouvons peut-être faire un 900 secondaire. Pour les icônes, je vais créer une sorte de couleur grise personnalisée sorte de couleur grise quelque part ici, où ce n'est trop gras ni trop fort. J'aime bien celui-ci. Je pense que ce serait bien si vous ajoutiez des titres juste à côté ces icônes pour qu'ils sachent ce que cela signifie. Donc je vais juste en écrire un et tirer, puis faire peut-être une taille de pied de page ou même cette taille de corps fonctionne Maintenant, je vais l'inclure dans cette mise en page automatique, puis je vais mettre en page automatiquement les deux ensemble, les rapprocher, peut-être à huit pixels l'un de l'autre. Je vais juste le répéter pour toutes les icônes. Alors n'hésitez pas à le faire aussi. Machine à café, petit-déjeuner. Disposez automatiquement ces deux ou huit pixels, stylo Seage Whoops Je ne sais pas épeler. Nous y voilà. Huit pixels. Support 24 h/24 et 7 j/7. Huit pixels, puis nous allons écrire le Wi-Fi ou le haut débit. Wi Fi, apporte-le ici. Je vais disposer ces deux et huit pixels. Maintenant, c'est un peu trop long. Je ne veux pas que ce soit si long. Je pense que nous pouvons le réduire et peut-être nous aligner ou l'aligner avec cette largeur ici. Alors pourquoi ne pas dessiner la largeur ici, puis faire un emballage maintenant pour cet enfant, nous ferons un emballage et nous remplirons le contenant. Mais ici, nous ne voulons pas vraiment faire du rap. Nous voulons que celui-ci soit vertical. Nous y voilà. C'est ce que nous recherchons. Maintenant, l'espacement entre ceux-ci peut être légèrement inférieur, peut-être 24 pixels, 24 pixels C'est peut-être suffisant. Vous pourriez même vous en tirer en le faisant 16 pixels ici. Maintenant pour le texte, nous pouvons utiliser un gris légèrement plus foncé que les icônes. Laisse-moi venir ici. Nous y voilà. Nous avons donc maintenant une section autrefois incluse. C'est une façon de le présenter. Vous pouvez également le présenter en deux mises en page automatiques. C'est donc une façon de procéder. L'autre serait d' ajouter une mise en page automatique pour chacun des trois, puis d'en faire une horizontale ici. Et une verticale pour chaque enfant, et c'est comme ça. C'est une autre façon de le faire. De cette façon, si vous avez plus d'icônes, elles seront ajoutées sur le côté ici, et nous pourrons simplement créer du contenu intéressant ici. Cela pourrait être un peu plus organisé pour le présenter ainsi. Et ici, nous pouvons ajouter un peu plus d'espacement. Je pense donc que ça a l'air bien. Nous pouvons revenir dans la section suivante pour commencer à travailler sur notre section hébergement, qui est la partie la plus intéressante de cette page 48. Domaines d'hébergement: La section est notre hébergement, où nous montrerons les différentes chambres que l'utilisateur peut réserver. En plus de l'image, le type de chambre, le prix par nuit, il faudra trois champs ici. Les champs seront les dates, donc de et deux, puis le nombre de voyageurs. Nous pouvons donc y retourner. Je vais juste emprunter le titre que nous avons ici et utiliser ls pour le dupliquer. Et une autre chose que je vais faire est d'utiliser une mise en page automatique entre les deux. Allons-y. Et je vais changer celui-ci en hébergement, je l' apporterai ici. Et en fait, je vais le couper à l'aide la commande X et le coller dedans. Allons-y. Nous voulons maintenant disposer de ces champs afin de pouvoir accéder à nos actifs, aux actifs locaux. Et en fait, nous pouvons faire glisser le champ de saisie que nous avons ici. Pour l'icône, passons à l'icône du calendrier puisqu'il s'agit d'un champ de date, et nous pouvons le dupliquer. Je vais maintenir la touche Maj enfoncée, sélectionner les trois options, puis effectuer le layo automatique et passer à l'horizontale Je vais changer celui-ci en de et simplement mettre quelques dates ici, pour changer celui-ci, et peut-être pourrions-nous les réduire un peu ici. Je vais aussi les associer automatiquement, les rapprocher, 16 pixels Ensuite, nous voulons un autre champ, et c'est le nombre de voyageurs. heure actuelle, nous n' avons pas de champ déroulant, mais le champ déroulant est généralement utilisé pour permettre aux utilisateurs de choisir entre plusieurs options C'est similaire à un champ de saisie, mais il y a une petite flèche sur le côté où les utilisateurs peuvent comprendre qu'il s' agit d'un champ déroulant. En fait, nous pourrions également utiliser le même champ de saisie comme champ déroulant Il n'est pas nécessaire de créer un composant différent. Et j'aime bien le faire, nous pouvons simplement ajouter une nouvelle propriété booléenne, appelée Dropdown Donc, par défaut, nous allons le transformer en faux. Et maintenant, il suffit d' aller sur l'icône du phosphore, rechercher la flèche Let's Try et de voir ce qui s'affiche C'est celui que nous recherchons. Maintenant, c'est par ici. C'est une carotte. C'est ce qu' on appelle l'icône de la carotte. Nous pouvons simplement le coller ici. Et changez la couleur pour peut-être 300 primaires. Je vais appuyer sur K et le redimensionner à 16 pixels peut-être. Je pense que c'est mieux. Et puis vous devinez que nous allons lier la visibilité de cela. Ici, deux sont en liste déroulante. Donc maintenant, si nous allons ici, nous pouvons créer un autre champ, l' appeler voyageurs avec deux s. Et nous allons changer le champ « deux » est une liste déroulante Et nous pouvons masquer l'icône de gauche comme ceci. Et comme espace réservé, nous allons juste mettre un adulte Maintenant, en le regardant, la flèche est un peu invisible. Alors peut-être que nous pouvons revenir ici et utiliser le panneau Calques, simplement sélectionner celui-ci, sélectionner le vecteur, et peut-être en faire un 500 principal. C'est un petit peu mieux. Et je vais appuyer sur K. En fait, remets-le à 24 pixels, et change-le en 20 pixels. Voyons si ça a l'air mieux, c'est un peu mieux , c'est sûr. Génial Maintenant, ce que je veux faire, c'est que cette case remplisse le conteneur, et nous voulons choisir l'option automatique pour l'espacement entre les éléments, car je veux ajouter un espace ici entre l' hébergement et ces Nous allons donc laisser ces champs ici. Et ici, au lieu d'un alignement en haut, nous pouvons faire un alignement au centre ou un alignement en bas, ce qui, à mon avis, semble un peu mieux. Donc, ici, nous allons juste avoir les types de chambres. ce qui concerne les types de chambres, nous reviendrons à la section suivante pour créer un joli composant de carte 49. Cartes de type de pièce: Nos cartes de type chambre ne sont en fait pas très éloignées de celles que nous avons ici. Nous pouvons en réutiliser certaines parties, et tout ce que nous avons à faire est de changer le nom ici type de chambre et le prix par nuit ici au lieu du prix total que nous avons ici. Nous avons donc deux options. Nous pouvons maintenant accéder à l'instance ici et créer une autre variante de celle-ci ou créer un composant différent. Je souhaite créer un composant différent juste pour le rendre un peu plus facile au cas où nous aurions besoin d' apporter des modifications ultérieurement. Je l'ai copiée, et pour le moment c'est une instance Nous voulons donc la détacher afin de créer un nouveau composant à l'aide de Command Alt K, et nous allons l'appeler carte Room Génial. Donc, quelques différences. Nous n'avons plus de favoris ni de marque-page pour celui-ci Nous voulons juste la photo de la chambre ici, et celle-ci indiquera le type de chambre. Et ce prix sera de 100 dollars par nuit, disons, juste pour un échantillon. Et nous n'en avons pas vraiment besoin. Nous pouvons laisser une note afin que vous puissiez voir les notes par chambre. Mais je pense que nous pouvons laisser celui-ci et nous contenter de les faire. Je vais en copier un, le coller ici, puis je vais maintenir la touche Maj enfoncée, sélectionner les deux et les mettre en page automatiquement avec 24 pixels avec peut-être 32 pixels d'espacement Nous allons dupliquer celui-ci pour faire une autre mise en page automatique, et celui-ci sera un contenant d'emballage avec remplissage de sorte que si vous avez plusieurs pièces différentes, il passe contenant d'emballage avec remplissage de sorte que si vous avez plusieurs pièces différentes, à la ligne suivante Ça commence à bien paraître. Maintenant, je ne suis pas un grand fan de la façon dont cela ressemble réellement ici, alors peut-être que nous pouvons faire une mise en page verticale ici. Je pense que c'est légèrement mieux. Et puis l'espacement entre ceux-ci peut être de 16 pixels. Je pense que cela semble légèrement mieux. Maintenant, pour ces types de chambres, je vais sélectionner l'un d'entre eux ici et utiliser make image. Une chambre d'hôtel avec un lit. Voyons ce qu'il fait. OK, ils sont plutôt jolis. Je vais vous demander de faire des modifications et de faire un petit lit. Nous pouvons donc avoir un lit plus petit sur celui-ci. OK, celui-ci est meilleur. Faisons la chambre double. Changez le prix à peut-être 80$ la nuit pour celui-ci. Et puis celle-ci pourrait être une chambre king size, en fait, celle-ci, faisons une chambre queen size, et celle-ci sera une chambre king size. Celui-ci coûtera 100 dollars par nuit, et celui-ci peut-être à 120 dollars. Je vais utiliser l'IA pour créer une image pour celui-ci. Chambre d'hôtel avec Let's Do deux lits queen-size pour celle-ci. C'est sympa. Et nous allons faire celui-ci et créer une image. Maintenant, si vous ne pouvez pas utiliser les fonctionnalités de l'IA ou si vous ne voulez pas utiliser les fonctionnalités de l'IA, vous pouvez totalement rechercher ces images sur Unsplash ou ailleurs Je le fais juste pour que nous puissions profiter de cette fonctionnalité et avoir une belle image ici. Et nous ferons une chambre d'hôtel de luxe avec un lit pliant, juste pour en avoir une plus belle pour 120$ la nuit Ça a l'air un peu différent. J'aime que l'orientation du pari soit la suivante. J'aime bien celui-ci. Cool. Maintenant, une chose que nous pouvons ajouter à ces cartes est peut-être, tout d' abord, de modifier les notes ici pour chacune d'entre elles. Et nous pouvons ajouter le nombre de notes attribuées à chaque chambre. Donc celui-ci en a 123, et peut-être que celui-ci est vraiment bon. C'est donc 4,9 et 125 personnes ont séjourné ici et l' ont noté. Nous y voilà. L'autre chose que nous pouvons ajouter à cela est le nombre de personnes que cette chambre peut accueillir. Donc, si vous accédez à l'instance locale, nous pouvons ajouter un autre texte ici et simplement l'ajouter ici. Et l'écriture fait dormir une personne, disons, et nous voulons créer du contenu. Voyons à quoi cela ressemble ici. OK, ça a l'air bien mieux. Peut accueillir une personne. Peut-être que celui-ci peut accueillir deux personnes, et celui-ci trois personnes ou quelque chose comme ça. J'ai presque oublié. Pour ces cartes, nous voulons également un bouton en forme de livre. Maintenant, pour ces boutons, je veux un nouveau bouton différent de celui que nous avons conçu ici. Parce que je veux qu'il soit aligné à gauche, puis sur le côté droit, nous puissions avoir un texte indiquant le prix total de cet hébergement et son montant. Je vais donc accéder à l'instance de carte locale, et je vais créer un nouveau bouton ici. Maintenant, bien sûr, nous pouvons également créer une autre variante de nos boutons . C'est une autre façon de procéder. Alors pourquoi ne pas le faire en l'étendant simplement ici, en faisant glisser deux composants du bouton vers l'extérieur et en les étirant un peu ici Et nous allons créer une nouvelle propriété pour le bouton, et nous allons appeler cette variante et appeler la propriété wide par défaut, nous la définirons sur non. Ce seront donc nos boutons larges, nous les sélectionnerons et les remplacerons par « oui », et ceux-ci sont déjà non. Maintenant, si vous ajoutez un texte ici, disons 0$. heure actuelle, tout est poussé au milieu du bouton, ce qui n' est pas ce que nous voulons. Nous voulons que tout soit poussé jusqu'au bout du bouton. Nous devons donc réduire l'écart de dix à automatique. Et l'écart sur les côtés est également un peu trop important, alors peut-être que nous pouvons faire 16 pixels. Faisons exactement la même chose ici. En fait, il vous suffit de copier le texte ici, le changer en texte 500. Nous y voilà. Réglez l'écart sur automatique et l'espacement sur 60. OK, ça a l'air bien. Nous avons donc maintenant un bouton large, mais les types sont compliqués ici Nous voulons donc nous assurer que le type de celui-ci est également toujours principal et que celui-ci est également toujours secondaire. Nous y voilà. Nous avons donc maintenant un bouton principal qui n'est pas large, un bouton secondaire qui n'est pas large, un bouton principal qui est large et un bouton secondaire qui est blanc. Nous voulons donc utiliser l'un des blancs de notre carte ici. Allons-y, glissons ou copions celui-ci ici, le principal ici. Je vais simplement faire glisser un peu plus cette section de composants vers le haut. Vous pouvez le voir en bouton. Ensuite, je vais appuyer sur tout son double-clic ici sur le côté ou sur le bord de ce bouton pour le remplacer par un remplissage. C'est la même chose que d'aller ici et de cliquer sur Remplir. C'est juste un raccourci pour le faire. Nous allons donc afficher le bouton ici, et le texte de ce bouton sera «  réserver une chambre » ou peut-être « réservez cette chambre ». Et puis le prix total sur la droite. Supposons que nous ayons déjà sélectionné des dates au lieu de 0$, cela pourrait indiquer le prix total. Donc, s'ils ont deux nuits, disons, ce sera 160, quelque chose comme ça. Et nous allons juste faire des prix différents pour ceux-ci, celui-ci est de 200 et celui-ci sera de 240. Nous avons maintenant les boutons pour réserver chaque chambre. Vous pouvez également remplacer le type de votre bouton par un bouton secondaire. Je pense que les deux fonctionnent vraiment bien ici. Voilà, maintenant nous avons un bouton pour réserver chaque chambre. Ça a l'air bien. Génial. Avec cela, notre section d'hébergement est prête, puis nous avons deux autres sections, des destinations similaires, ce qui est assez rapide. Ensuite, nous avons quelques cartes de notation que nous allons concevoir lors de la prochaine conférence. 50. Cartes de notation: Il n' y a plus de place à la verticale sur notre page de découverte des destinations. Je vais donc l'étendre un peu verticalement. Nous avons donc suffisamment d'espace pour notre section d'évaluation et notre section de destination similaire. Donc, dans notre section d'évaluation, nous avons dans nos wireframes les évaluations, le nombre total de notes et d'étoiles, puis nous avons des cartes d'évaluation que l'utilisateur peut parcourir, et nous pouvons avoir un défilement horizontal ici ou également des flèches pour aller à gauche et ce faire, nous allons revenir ici, copier le texte ici, utiliser la touche Alt pour le dupliquer. Et je vais simplement l'apporter ici dans le conteneur parent, mais le ramener ici en utilisant la flèche vers le bas, et il semblerait que j'y aie eu une faute de frappe, alors je viens de corriger cela Et celui-ci va être une question d'évaluation. Et nous voulons avoir les étoiles et le nombre d'évaluations. Alors peut-être que nous pouvons simplement l'emprunter et l'apporter ici. Et nous voulons les disposer automatiquement ensemble. Essayez 16 pixels. Et comme celui-ci concerne l'ensemble de la destination, nous pouvons peut-être agrandir un peu l'icône 2, 24 ou même écrire 24 par 24. Et augmentez un peu le chiffre. Disons, 534. Ensuite, juste en dessous, nous allons avoir des cartes d'évaluation, et dans ces cartes d'évaluation, nous voulons avoir une photo de la personne, texte pour montrer son avis et peut-être son prénom ou quelque chose comme ça. Je vais donc simplement concevoir une carte ici, ajouter un texte ici. C'est mon avis. Évidemment, nous allons changer cela, et pour l'instant, je vais le mettre en page automatiquement en appuyant sur Shift A. Et nous pouvons simplement appliquer un fond blanc ici, changer le rayon des coins à 16, puis dessiner un ovale en appuyant sur O sur mon clavier et dessiner une photo de profil peut-être 48 pixels sur 48, et simplement la découper ici. Nous y voilà. Peut-être que ceux-ci pourraient avoir une largeur fixe ici 440. Maintenant, je vais activer ma grille de mise en page ici pour la page et l'utiliser pour obtenir une bonne largeur fixe ici. Nous y voilà. Nous pouvons donc avoir trois croix comme celle-ci, et ça aura l'air bien. Nous n'avons pas encore terminé, nous allons donc continuer à travailler sur le seul, en cachant notre grille ici. Et nous voulons faire une ligne à gauche et peut-être 16 pixels à partir du haut en bas. Ce sera donc l' avis de l'utilisateur, puis juste en dessous, nous appuierons sur la commande D pour créer un autre texte. A pour disposer ces deux couches de texte et les faire juste en dessous l'une de l'autre. Peut-être avec huit pixels et ce sera le nom de l'utilisateur, disons, Maria. Mais pour celui-ci, fixons la taille du pied de page. Et nous pouvons également ajouter un joli trait ici, en optant pour le 100 primaire. Et bien sûr, nous pouvons en faire un composant, appuyer sur lommand K, et simplement le renommer carte de classification, et l'intégrer dans notre bibliothèque de composants ici ou dans notre Copiez-en un, collez-le ici, regroupez-le ou mettez-le en page automatiquement. Et je pense que pour l'espacement, nous pouvons changer l'écart ici à 32 à l'intérieur, les dupliquer, disposer automatiquement les trois cartes et créer un contenant à emballer et à remplir Et changeons l' espacement entre eux à 24 pixels. Ça a l'air bien. Je vais simplement sélectionner Ceci est mon avis et utiliser notre outil de rédaction basé sur l'IA pour demander aux utilisateurs qui ont fait un voyage à Londres et qui l'ont apprécié. Voyons ce qui va se passer. OK, allons-y. Nous avons maintenant un problème avec le texte qui se répand à l'extérieur du conteneur Allons ici et voyons ce qui se passe. Cette boîte embrassera donc le contenu, mais le contenu peut devenir infiniment long et il continuera à l'étreindre dans la même Donc, au lieu de le faire, nous voulons le conteneur de remplissage, et nous pouvons le faire en le remplaçant par un conteneur de remplissage. Quoi qu'il en soit, le texte ici est toujours configuré pour contenir du contenu. Nous voulons donc également que le texte soit rempli dans un conteneur. Maintenant, le texte aura une largeur fixe par rapport à la largeur du conteneur, sorte qu'il continuera à s'étendre au suivant Et comme il s'agit d'un composant, nous le réparons en un seul endroit. Nous n'avons pas besoin de le réparer ici. C'est déjà corrigé de toute façon. Et autre chose, nous voulons que la photo de profil soit peut-être en haut et peut-être que le nom de l'utilisateur y figure également. Je pense que ce serait plus logique. Alors pourquoi ne pas les changer et utiliser ensuite un alignement en haut à gauche comme celui-ci. Je vais juste changer ceci en cela. Voyons si ça semble peut-être un peu mieux. Mais ce que je vais faire, c'est sortir ce texte d' ici et le mettre en page automatiquement avec une image ici afin que nous puissions l'aligner au centre. Ensuite, pour l'ensemble du conteneur, nous allons le faire. Nous y voilà. Ça a l'air bien mieux. De cette façon, nous pouvons même ajouter un texte de l'autre côté. En faisant une mise en page automatique avec ces deux options, en effectuant une mise en page horizontale remplissant le récipient et en changeant l'écart en automatique. Et tracez la ligne centrale et remplacez-la un texte pour l'horodatage, cela pourrait être il y a quatre semaines Nous pouvons donc même avoir un horodatage et nous pouvons déposer le remplissage de celui-ci sur un texte 300 et celui-ci pourrait être un texte 500 et pareil que celui-ci ici, du texte Bien mieux. Maintenant, nous pouvons les raccourcir un peu de deux pour qu' ils aient tous la même hauteur. Nous y voilà. Ça commence à bien paraître. Nous pouvons simplement changer le nom ici Max, Adam, puis leur donner quelques photos en utilisant un plugin que j' aime beaucoup appelé Avatar. Et vous pouvez choisir n'importe lequel d'entre eux. Il y en a beaucoup. Nous allons simplement choisir celui-ci ici. Avatar du profil utilisateur. Oups. Vous pouvez utiliser n'importe qui qui qui crée ce générateur d'avatar ici. Vous pouvez simplement appuyer sur Placer une photo en continu, et cela y placera la photo d'une personne aléatoire. C'est bon pour. Maintenant, certains d'entre eux ont une limite. J'ai donc atteint la limite sur ce point. N'hésitez pas à passer d' plugin à l' autre pour voir lequel fonctionne le mieux. Nous y voilà. Ça a déjà l'air bien mieux. Et à bien y réfléchir, je ne pense pas que ce soit une bonne idée de faire un défilement horizontal ici car ce n'est pas vraiment typique. Donc, ce que nous pouvons faire, c'est faire deux choses pour améliorer cela ici. Tout d'abord, pour ces deux, faisons une mise en page horizontale comme celle-ci. Et alors pourquoi ne pas ajouter un bouton secondaire ici ? Appuyez sur un bouton ici. Oups. Nous voulons le mettre dedans. Voilà, nous devrions peut-être les disposer, réduire l'espacement et le changer en secondaire parce que ce n' secondaire parce que ce est pas un bouton important, en fait, c'est un bouton secondaire, puis afficher toutes les évaluations ou quelque chose comme ça L'utilisateur peut cliquer sur Afficher toutes les évaluations et accéder à une autre page pour lire toutes les autres évaluations. Voilà pour les cartes de notation. Revenons dans la prochaine conférence pour créer la dernière partie de cette page, la page de destination similaire. 51. Page de détails de la destination finale: La dernière section de notre page de détails de destination est une section de destination similaire. Nous allons donc dupliquer ce texte une fois de plus dans le conteneur parent ici. Destinations similaires. Vous pouvez également l'appeler d'autres destinations populaires qui fonctionnent également. Vous n'avez pas besoin de le nommer nécessairement de la même façon que je le nomme. Et puis, prenons simplement quelques-unes de ces cartes ici. Peut-être que ces trois sont ici, utilisez la commande C puis collez-les ici. Maintenant, pour le moment, ils sont disposés verticalement parce qu'ils se trouvent dans ce conteneur parent. Nous voulons donc faire une mise en page automatique entre eux en utilisant Shift A, puis faire une mise en page horizontale. Allons-y. Ce sont donc d'autres destinations populaires, mais pour l'espacement entre elles, vous devez également en faire 32 Ça a vraiment l'air bien. Et je pense que cette page est à peu près terminée. Faisons un examen de haut en bas pour nous assurer que tout est en bon état et qu'il n'y a rien à changer. Maintenant, il y a quelques points que je vais faire pour peaufiner cette page. La première est que je pense que nous pouvons mettre le titre en gras ici. Ça a l'air mieux. Pour ce bouton , ça a l'air bizarre sans aucun texte similaire à ce bouton populaire. Alors pourquoi ne pas ajouter un texte pour celui-ci ici. Nous allons enregistrer ou ajouter un signet. Destination et évidemment pas si grande que ça. Nous allons faire du travail sur le corps ou même sur le pied de page. Et nous allons juste le supprimer et l'apporter ici. Et je dispose ces deux pixels, et peut-être que huit pixels c'est un bon espacement entre eux. Et nous pouvons déplacer cette destination, il suffit de l'ajouter à nos favoris. Changez ce paramètre en un 900 principal ou un 800 principal. OK, ça a l'air un peu mieux, donc c'est plus clair de quoi il s'agit. Et l'espacement entre tout et ici est généralement un peu trop important, peut-être que 32 pixels suffiraient. Donc ça a l'air bien. Disponibilité. Nous les emmènerons directement ici. Il y a cependant un peu d'espace vide ici, et vous pouvez choisir deux options. La première est que vous pouvez simplement le modifier dans la mise en page de ce que nous avons fait ici pour qu'il soit horizontal. Cela fonctionne donc tout aussi bien. Alors peut-être que je vais le faire à la place, pour qu' il n'y ait pas de lacune gênante ici. L'hébergement semble bon. Nous avons deux voyageurs, donc ils les choisissent. La seule chose qui nous manque peut-être est juste un bouton pour qu'ils actualisent les résultats. S'ils les modifient, il n' y a aucun moyen d' actualiser les résultats pour le moment . C'est ce que nous voulons faire, apporter l'alignement ici. Donc c'est en bas, puis trouvez des chambres. Allons-y. C'est un petit peu mieux. Ça a l'air bien, les notes semblent bonnes. Les notes, quelle que soit la raison, ce texte est un peu trop grand, nous allons donc faire le corps du texte à la place. Je pense que la taille du corps est tout simplement trop grande. Ça a l'air mieux. Et avec cela, nous pouvons réellement améliorer l'espacement au lieu de 16 pixels. Faisons 24 pixels à partir du haut et du bas. D'accord, en fait, ça a l'air bien, et les autres destinations populaires semblent vraiment bonnes. La seule autre chose que je pourrais faire est d'augmenter l'espacement entre tout au lieu de 48 pixels Peut-être que nous pouvons faire quelque chose comme 64. Et je pense qu'il y a plus de marge de manœuvre entre tout et que tout semble beaucoup plus raffiné de cette façon. Cool. Je vais juste réduire un peu cette page. Voici notre page de découverte des destinations, ou en fait, elle devrait s' appeler Destination Detail. Allons-y. Voici notre page détaillée. Revenons à l'exécution pour travailler sur notre page de réservation C'est donc la page qui suivra lorsqu'ils cliqueront sur Réserver cette chambre. Il est dirigé vers cette page où ils saisiront leurs informations et confirmeront leur réservation. 52. Écran de réservation: est temps de travailler sur notre écran de réservation ici, et cette page est assez simple. Donc, en gros, l'utilisateur clique sur « réserver » dans l'une de ces chambres. Il accède à la page de confirmation de réservation où ils rempliront certaines informations, que vous voyez généralement sur une plateforme de réservation, comme leur prénom ou leur nom de famille. Et peut-être qu'une grande partie de ces informations peuvent même être préremplies s'ils sont déjà connectés et qu'ils ont déjà ajouté leur formulaire d'information auparavant Mais comme nous ne disposons pas ces pages pour collecter ces informations, nous supposerons que l'utilisateur doit les remplir de toute façon, au cas où il souhaiterait utiliser un autre e-mail ou numéro de téléphone, etc. comme au cas où il souhaiterait utiliser un autre e-mail ou un autre numéro de téléphone, etc. comme informations personnelles pour cette réservation Ensuite, nous avons quelques informations de paiement et des champs à ajouter. Cela se fait donc en grande partie sur le terrain. Ensuite, nous voulons ajouter quelques cartes ici pour des options supplémentaires, comme ajouter une location de voiture à votre voyage, ajouter une assurance ou ajouter des éléments différents, etc. Et puis un bouton pour terminer la réservation. Et sur le panneau de droite, nous voulons une carte l'image de la chambre qu'ils réservent, peut-être avec la ville le voyage ou quelque chose comme ça. Peut-être le nom du voyage, ainsi que la chambre qu'ils réservent. Ils réservent une chambre avec les dates indiquées ici, le nombre de personnes séjournant, puis le prix total. Maintenant, cela pourrait être un bon endroit pour mettre également notre bouton de réservation. Il n'est donc pas nécessaire que cela aille jusqu' au bas de l'échelle, et nous pourrions en fait faire en sorte que les deux endroits l'aient, et peut-être que nous pouvons régler ce problème. Ainsi, lorsque nous construisons le prototype, nous pouvons corriger cet élément à l'écran. Très bien, alors allons-y. Nous voulons commencer de haut en bas. Commençons par ajouter notre bouton de retour et notre titre NavBR ici Pour faciliter les choses, je vais simplement dupliquer la page détaillée de la destination à l'aide de la commande D. Il suffit de se déplacer un peu ici et renommer notre écran en page de réservation Et je vais me débarrasser complètement du contenu pour le moment. Et au lieu de retourner vers toutes les destinations, nous pouvons retourner en voyage. Et juste en dessous, nous pouvons avoir un texte similaire ici. Je vais utiliser Alt pour le faire glisser ici ou plutôt une copie ici. Assurez-vous que l' espacement est le même que pour tout le reste et modifiez-le pour confirmer votre réservation ou votre voyage et assurez-vous simplement que tout est espacé en conséquence Nous y voilà. Déplacez-le ici à 24 pixels de celui-ci. Et puis juste en dessous, nous voulons avoir quelques champs et également un titre pour cette section. Donc, pour le titre, je pense que nous pouvons d'abord utiliser celui-ci ici, puis nous pouvons utiliser une police plus petite ici, peut-être quatre ou cinq ans. Je pense que l'âge de cinq ans est une bonne chose et nous allons remplacer cela par des informations personnelles. Comme maintenant, nous pouvons simplement le laisser en gras ici. Et puis celles-ci, je veux les mettre en page automatiquement en utilisant Shift A avec 48 pixels avec Ensuite, à partir de nos ressources, introduisons quelques informations ici. Déplaçons-le là-bas. Et je veux les mettre en page automatiquement avec peut-être 24 pixels. Pour ce champ, nous n'avons pas vraiment besoin d'une icône. Nous allons juste écrire le prénom, juste un exemple de prénom ici, puis nous allons faire le nom de famille. Ces champs sont généralement situés l'un à côté de l'autre Nous pouvons donc même créer une mise en page automatique qui est une disposition horizontale ici, peut-être avec un espacement de 16 pixels Ça a l'air bien. Remplaçons celui-ci en contenu chaud pour la largeur. Cela semble bien, et nous avons besoin d'un champ e-mail et numéro de téléphone. Ceux-ci, nous voulons les mettre ici dans le cadre parent. Changez celui-ci en numéro de téléphone plus un, un, deux, trois, un, deux, trois, quatre, ou un, deux, trois, quatre, comme ceci. Juste un exemple de texte. Et puis nous pouvons avoir une adresse e-mail ou simplement des e-mails chez Domain, quelque chose comme ça. Peut-être pourrions-nous même avoir les deux l'un à côté de l'autre. C'est une bonne chose. Ensuite, nous voulons des informations de paiement. Donc, pour celui-ci, je vais dupliquer cette section et la remplacer détails de paiement, quelque chose comme ça. Remplacez celui-ci par un numéro de carte de crédit, en supposant que nous n'avons que la carte de crédit comme option ici, puis nous allons passer à la carte de crédit, et nous avons besoin de la date d'expiration. Donc, ne faisons pas celle-ci comme date d'expiration, écrivez quelque chose comme ça. Nous pouvons le rendre au contenu ou peut-être un peu plus grand, atteindre 20 pixels, dupliquer et le mettre en page automatiquement juste à côté. Et celui-ci sera CVV, un code qui se trouve au dos ou quelque chose comme ça Et je pense que nous avons généralement aussi un nom sur la carte. Alors peut-être que nous voulons faire des cartes de crédit. Plus ancien que pour le numéro, nous pouvons simplement mettre un chiffre ici comme celui-ci. Vous voulez que le texte de votre espace réservé ressemble à ce qu'ils doivent saisir afin qu'ils aient une idée de ce à quoi s'attendre Et parfois, vous voyez un code postal ou un code postal selon l'endroit où vous vous Nous pouvons donc saisir le code postal et le laisser ici également. Cela peut être nécessaire pour certaines cartes de crédit, et nous allons simplement les étendre, mais elles ne seront pas étendues Nous voulons donc les sélectionner et remplir le conteneur. Nous avons donc les informations de paiement. Et puis pour celles-ci, je pense qu'elles sont trop grandes pour une raison ou une autre. Une personne n'a probablement pas un nom aussi long, alors nous pouvons simplement le réduire un peu, environ 480 au total, et également fabriquer ces récipients de 480. Et je vais faire exactement la même chose pour ceux-ci. Même chose ici. Et j'utilise simplement une touche Alt et un double-clic pour que tout le monde remplisse le conteneur. Une bonne partie de cette page est donc déjà prête Revenons travailler sur nos modules complémentaires, puis nous travaillerons sur la carte annexe ici. 53. Design de carte supplémentaire: Pour la section suivante, nous avons une section complémentaire avec des cartes de choses que les gens peuvent ajouter à leur voyage. Je vais donc copier un titre ici et l'appeler «   add on perfect for your trip », quelque chose comme ça. Voyons ensuite si nous pouvons réutiliser l'une des cartes que nous avons. La carte de collecte est vraiment similaire à ce que nous voulons ajouter. Mais encore une fois, ce n'est pas tout à fait ce que nous voulons. Nous pouvons donc peut-être créer une autre carte spécifique à ajouter, mais en utilisant un design similaire à celui de la carte de collection. Je vais le dupliquer en utilisant Alt, détacher l'instant, puis créer un nouveau composant à l'aide de la commande Alt K et renommer celui-ci pour l'ajouter sur la carte Donc celui-ci sera le nom de l'extension. Nous avons déjà une photo. C'est génial. Nous voulons un bouton pour ajouter cet ajout, alors peut-être que nous allons copier ce bouton ici. Cela s'ajoute à votre voyage, et peut-être au prix de l'article. Nous allons donc le laisser 0$ pour le moment. Je pense que c'est une bonne chose. Apportons-le ici. Alors maintenant, la seule chose est je n'aime pas vraiment le fait que ce bouton soit trop principal ici. Nous ne voulons pas qu' il s'agisse d'une action principale ou qu'il y ait confusion quant aux boutons sur lesquels appuyer . Je vais donc simplement la remplacer par une action secondaire. Nous en aurons donc trois. Site par site. Et ceux-ci, nous ne voulons pas qu'ils soient aussi grands, alors nous allons simplement les fixer à largeur fixe. Ces cartes sont un peu trop grandes. Alors pourquoi ne pas réduire un peu cette image ? Maintenez la touche Maj enfoncée et maintenez ensemble, et peut-être que l'image ressemble 270 ou quelque chose comme ça. Et puis pour le nom de l'extension, nous allons juste faire un corps à la fois, faire du contenu câlin ici. Et pareil ici. Nous allons juste faire un câlin. Nous ne voulons pas qu'il soit trop visible ou trop grand ici. Et puis remplaçons-les par de véritables modules complémentaires. Nous allons simplement écrire location de voiture et pour celui-ci, nous allons écrire activités amusantes. Et n'hésitez pas à écrire ce que vous voulez. Assurance complète ou nous proposerons une assurance voyage. Et puis pour les images, je vais utiliser Unsplash et non l'IA pour celle-ci Et faisons simplement de la location de voiture. Je ne sais pas ce qui va se passer. Voyons voir. OK, nous allons juste en utiliser quelques-unes, nous allons juste en utiliser une. Bien sûr, allons-y avec celui-ci. Des activités amusantes. Allons-y, c'est tout. Quelle est l' activité amusante que tu fais à Londres ? Le London Eye, je ne suis pas sûr. Je n'y suis jamais allée, alors nous allons simplement insérer le London Eye ici à partir de l'une de ces photos. Et puis, en fait, celui-ci semble un peu déprimant. Nous allons faire celui-ci. Ensuite, l'assurance, peut-être que nous allons simplement écrire une assurance, voir ce qui se passe. Je vais juste choisir une belle image ici. Vous n'êtes pas obligé d'utiliser celui-ci. C'est juste une belle idée que j'ai trouvée pour le moment. Nous avons donc maintenant ces modules complémentaires qui semblent bons. Vous pouvez les ajouter à votre voyage. Très cool. fois celle-ci terminée, nous pourrons revenir lors de la prochaine conférence pour mettre cette carte sur le côté ici. Avant cela, je vais mettre une réservation complète ici. Il suffit d'ajouter le bouton ici maximum à 480 et de confirmer la réservation, et ce sera le coût total du voyage ou quelque chose comme ça Il suffit de mettre un nombre aléatoire ici, 2240 comme celui-ci. Ce serait bien si nous avions également la devise au cas où vous paieriez dans une autre devise. Maintenant, nous voulons cette carte sur le côté. Revenons à la section suivante et faisons-le ensemble. 54. Page de confirmation: Mais surtout, sur cette page, nous voulons avoir une petite carte d'information sur le côté qui indique peut-être la chambre, peut-être la ville dans laquelle vous réservez, tous les petits détails que vous voudriez connaître avant de confirmer votre réservation. Lorsque vous êtes sur une autre page, comme Airbnb ou Expedia, ou sur tout autre site où vous réservez vos voyages, vous avez la même situation : vous voyez toutes les informations avant d'appuyer sur le bouton OK parce que vous effectuez un achat important . Vous voulez vous assurer que l'utilisateur a la tranquillité d'esprit qu'il a sélectionné les bonnes dates et le nombre de voyageurs correct, et le prix est visible et non caché et ainsi de suite. C'est donc très important créer une expérience utilisateur exceptionnelle. Je vais donc créer cette carte de haut en bas. Nous voulons utiliser une carte qui n'est vraiment visible que sur, donc je n'ai pas vraiment besoin d' faire un composant. En fait, je vais juste emprunter l'une d' entre elles, peut-être la carte de chambre, et m'en débarrasser, mais détacher l'instance et créer une complète ici Parfois, tu veux en enlever un. Vous n'avez pas nécessairement besoin de créer un composant, comme dans ce cas. C'est donc le cas ici, nous allons simplement nous assurer que l'espacement par rapport au côté est le même côté est le Supposons que l'utilisateur ait choisi la chambre double. J'utilise donc la commande Alt C pour copier les propriétés de ce rectangle ici, qui est actuellement cette image. Ensuite, je vais maintenir celui-ci en utilisant Command pour le sélectionner, puis en faisant Command Alt V. Et il suffit de coller les propriétés, qui dans ce cas, ne sont que l'image ici. Nous avons donc rapidement cette image là-bas. Et puis ce qui serait bien, ce serait aussi une photo de la ville qu'ils réservent. Alors peut-être que nous pouvons également emprunter cette photo ici. J'utilise également la commande Out C. Je vais utiliser la commande C pour copier ce cadre ici. Mais ce que je pense, c'est un cercle sympa, cool, ou quelque chose comme ça en plus de ça pour montrer qu' ils réservent à Londres ou quelque chose comme ça. Donc, ce que je veux faire, c'est pour ce cadre, tout d'abord, le définir, rendre beaucoup plus petit et aussi en faire un rectangle ou, désolé, un carré. C'est peut-être faisons-le 64 par 64. Vous pouvez également utiliser la commande et les flèches pour redimensionner vos objets d'un pixel à la fois Vous pouvez donc créer des tailles exactes comme celle-ci. Et alors peut-être pourrons-nous le faire tourner complètement en réglant simplement le rayon des coins ici sur vraiment haut. Et pour ce trait, nous voulons plutôt le placer à l'extérieur et peut-être le rendre de trois pixels et le rendre légèrement plus foncé, quelque chose comme 800 pixels secondaires ou quelque chose comme ça. Et maintenant, je veux le placer au-dessus de cette image, mais je ne veux pas qu'il fasse partie de la mise en page automatique. Je veux juste que ce cercle ait une place spécifique ici sans suivre cette mise en page automatique. Je peux le faire de deux manières. Je peux soit les regrouper pour les conserver et simplement regrouper la sélection soit même sélectionner le cadre. Et dans ce cadre, comme il ne s'agit pas d'une mise en page automatique, je peux le placer comme je le souhaite. autre méthode, que vous pouvez totalement faire sans avoir à le faire, est que vous pouvez choisir celle-ci pour ignorer la mise en page automatique. Nous pouvons donc ignorer la mise en page automatique ici, puis la placer ici. Mais la seule autre chose qui se produira est que, comme vous pouvez le voir, vous devrez peut-être redimensionner ou recadrer certains éléments pour que l'espacement fonctionne ou même modifier l'espacement même modifier l'espacement Je vais donc utiliser la première méthode juste pour rendre les choses un peu plus faciles. Quelqu'un pour encadrer ces sélections ou même les regrouper selon vos préférences. Les endroits ici peuvent peut-être l'agrandir un peu. Bien sûr, 78 sur 78 ça a l'air bien. Il y a donc une photo du voyage ici ou de la ville dans laquelle ils réservent , puis écrivons un titre qui inclut la ville d'ici. Je vais donc simplement emprunter cette ville, quelque chose comme ça. Peut-être le déplacer vers le bas. Oups, baisse un peu le ton, place la ville ici. Je vais aussi le découper, le mettre dans ce cadre ici. Je vais juste utiliser le décalage dans les flèches pour le déplacer. Mets-le sur le siège un peu ici. OK, c'est un design intéressant. Peut-être déplacer ça un peu sur le côté ici et pareil ici. Nous avons donc la ville. Peut-être que la ville est plus belle de ce côté, en fait. Et je vais faire un texte plus léger, comme le texte 300. Nous avons le type de chambre, alors écrivons simplement King Room. Ou ce n'est pas une chambre king size. C'est une chambre double avec lit queen-size. Write peut dormir 200 dollars par nuit, puis on fera comme cinq nuits ou quelque chose comme ça. Et puis nous n'avons pas vraiment besoin des évaluations ici, car ils devraient déjà le savoir par le passé. Qu'avons-nous d'autre qui pourrait être utile ? Les dates ? Oui, pour les dates, nous pouvons simplement emprunter le texte contenu dans ces champs et l'icône. Et ici, utilisez une mise en page automatique horizontale et adaptez le contenu aux deux. Ici, le texte est un peu trop long. Passons donc au contenu HG. Créez un autre texte. Faites une mise en page automatique et faites une mise en page horizontale et peut-être simplement automatiquement ici et remplissez le conteneur. Ils ont donc un espacement comme celui-ci, puis nous allons le dupliquer et faire exactement la même chose à l'horizontale, remplir le conteneur, automatiquement, puis écrire celui-ci sous la forme de deux Celui-ci devrait être content. Et l'espacement entre les deux est un peu trop important, alors je les dispose automatiquement ensemble et je fais peut-être huit pixels Maintenant, je veux que ces deux-là soient vraiment ici. Donc, ce que je peux faire, c'est que je peux faire que la largeur soit la même que la largeur ici, qui est de 122, et ainsi, j'obtiendrai le même résultat. Allons-y. Et ce lit pour deux personnes est un peu aléatoire ici, alors nous allons simplement le mettre ici et faire en sorte que le contenu soit déjà chaud. Nous pouvons simplement supprimer ce cadre de mise en page automatique en le faisant simplement en groupe. Nous avons donc obtenu une chambre double de luxe 100$ par nuit, cinq nuits, pouvant accueillir deux personnes de cette date à cette date. Et l'espacement entre les deux est un peu trop grand, alors faisons huit pixels Et nous allons remplir le conteneur pour les deux, et en fait la même chose ici, remplir le conteneur. Cela fonctionne aussi. C'est bon. Et puis ces textes sont trop sombres parce qu'ils ne sont censés être que des espaces réservés Nous allons donc créer le texte 500 Ce formulaire et deux n'ont pas besoin d'être aussi sombres, alors faisons le texte 300. Et en fait remplissons le tout de blanc avec un peu d'espacement, peut-être 16 pixels de tous les côtés Ensuite, nous allons faire le rayon des coins ici. Peut-être 30. Essayons 32 looks. C'est peut-être trop, donc peut-être 24. Ça a l'air bien. Et maintenant je m'assure juste qu'il est bien aligné. Nous obtenons donc cette carte personnalisée qui a l'air bien. Je pense qu'il a à peu près tout ce prix total. Nous pouvons simplement l'avoir dans ce bouton ici. Empruntons simplement ce bouton d'ici pour pouvoir le placer à l'intérieur d'ici. Ce que nous voulons faire est un conteneur rempli et le supprimer. Et le bouton est un peu trop proche de tout le reste. Alors pourquoi ne pas appuyer sur Entrée ? Nous sélectionnons donc tout ce qui se trouve dans cette mise en page automatique et maintenons la touche Shift enfoncée pour désélectionner le bouton , puis nous effectuons la touche Shift A. Il y a donc une seule mise en page pour tout le contenu qui s'y Ainsi, nous pouvons ajouter un peu plus espacement entre le bouton et le reste du contenu Je pense que nous avons tout ce qu'il faut ici. Ça commence à vraiment bien paraître. Et cela donne vraiment à l'utilisateur une bonne idée de ce qui se passe ici. Une autre chose que je vous recommande faire est de simplement mettre les lits sur le même prix que ces 100$ par nuit. Nous allons donc y faire un gros contenu, le coller et faire une mise en page horizontale. Et peut-être qu'au début de ce texte, nous ferons un huit Alt. Cela crée donc comme un cercle et ajoute un peu d'espacement comme ceci, juste comme ça Nous n'avons pas besoin de cet espacement supplémentaire, c'est suffisant. Et évidemment, le prix ici n'a aucun sens car, genre, 100 dollars par nuit pour cinq nuits devraient être environ 500 dollars américains. Mettons donc cela à jour, afin que cela également du sens dans les designs. C'est donc environ 500 USD. C'est également 500 USD. Maintenant, si vous avez d'autres frais de service et autres frais de ce genre, vous pouvez toujours les énumérer ci-dessous. Nous pouvons donc toujours ventiler le prix ici et montrer, par exemple, c'est le prix pour cela, puis il y a les frais de service, puis il y a une taxe et tout ça, et puis il s'agit de ce montant. Mais pour ce projet, nous allons simplement rester simples et continuer comme ça. Ce bouton avec ce rayon d'angle semble un peu étrange. Nous pouvons donc arrondir un peu plus ce bouton ou même simplement utiliser, par exemple, un bouton complètement arrondi pour celui-ci. Et je viens d'apporter une modification personnalisée à celui-ci. Tu peux le faire. Il ne l'appliquera à aucun autre bouton. C'est juste pour ce bouton spécifique. Donc ça a l'air bien maintenant. Maintenant, nous avons créé cette page. Nous en avons terminé avec la page de réservation. Ça a l'air génial. La seule autre chose est que supposons que l'utilisateur confirme la réservation. Généralement, vous souhaitez afficher une sorte de page de confirmation par la suite ou comme une confirmation du voyage en cours de confirmation. Je vais donc laisser cela comme un projet à faire par vous-même, comme une sorte de devoir à pratiquer. N'hésitez donc pas à prendre le temps de le faire. Je vais le faire aussi. Et puis, évidemment, à la fin du cours, vous aurez accès au lien pour mFle afin que vous puissiez toujours comparer et contraster et partir de là Cela résume donc à peu près toutes les pages que nous sommes en train de créer ensemble pour notre projet Nous avons un flux d'utilisateurs complet : inscription, vérification de votre inscription, navigation dans les destinations, choix d'une destination et consultation de tous les petits détails notamment certaines chambres situées en dessous de celles-ci pour pouvoir réserver, certaines cartes de classement, etc. Et puis nous avons également une page de confirmation pour confirmer ce voyage. Et évidemment, une application comme celle-ci comporte bien d'autres éléments que vous pouvez ajouter et concevoir, comme la liste déroulante des profils, etc. Nous explorerons certaines d'entre elles ensemble au fur et à mesure que nous passerons au prototypage Mais la prochaine étape pour nous est voir comment transformer ce design en une version adaptée aux mobiles que vous pouvez également utiliser sur un appareil mobile. Pour ce faire, nous allons apprendre à utiliser des éléments tels que points d'arrêt pour créer un design différent pour les appareils mobiles, mais aussi à utiliser les mêmes designs que ceux que nous avons présent et à les modifier pour les adapter à un design mobile Revenons donc à la section suivante du cours pour parler de la transformation de nos designs en appareils mobiles. 55. Design réactif avec des variables: Nous en avons terminé avec nos pages Web ici et nous voulons les transformer en mobiles. Il existe plusieurs façons de le faire. Bien entendu, nous pouvons consulter chaque page individuellement , puis examiner contenu que nous avons et essayer en forme de manière conviviale sur mobile. Ainsi, par exemple, pour l'écran, nous appuierons sur F sur notre clavier et démarrerons un cadre de téléphone ici, disons, l'iPhone 16, et vous pouvez vraiment choisir n'importe quelle taille ici en fonction de la taille du téléphone. Ensuite, vous devrez copier chaque élément à l'intérieur de votre cadre, puis les réorganiser un par un C'est donc une façon de procéder, et nous l'explorerons également. Mais je veux commencer par la façon dont vous pouvez réellement utiliser des variables pour faciliter le design réactif. Ainsi, même avec des variables, vous devrez passer à certains éléments en mode mobile. Nous avons donc cette barre de navigation en haut, et très probablement sur mobile, elle aura l' air un peu différente Peut-être qu'au lieu de cet utilisateur, vous savez, le nom complet ici, nous aurions simplement l'icône de l'utilisateur ou la photo de profil de l'utilisateur, puis cette icône en forme de cloche. Cela peut donc sembler légèrement différent. Nous devrons donc proposer différents composants basés sur le mobile ou le Web. Dans cette conférence, je vais vous montrer comment vous pouvez utiliser des variables et modes variables pour créer différentes tailles pour vos pages. Donc, ici, nous avons une largeur de page pour le projet Web. C'est 14 à 40 pixels ici pour moi. Cela pourrait être légèrement différent pour vous si vous avez commencé avec une autre taille de cadre, mais c'est à peu près cette taille. Et puis nous avons un mobile. Donc, si j'appuie sur F sur mon clavier et que je fais un iPhone 16 Pmax, nous avons ici cette taille de mobile de 440 pixels à la place Et bien sûr, il existe différentes tailles de pixels que vous pouvez définir, mais je vais choisir ces deux pour le moment. Je vais choisir 144440 pour la taille du mobile. Donc, si vous ouvrez le panneau des variables ici, nous pouvons réellement créer une nouvelle collection. Créons donc une nouvelle collection ou même une collection que j'ai, qui n'est pas utilisée pour le moment, afin que je puisse simplement la renommer et l'appeler devices Oups. Si vous avez une faute de frappe comme moi, vous pouvez simplement la renommer, la corriger, puis nous allons créer une variable avec un nombre comme valeur ou comme type, et nous allons la modifier en fonction de la taille de l'appareil, et ici nous allons avoir une version Web de 14 à 40 pixels, puis je vais en créer une autre Et nous allons appeler cela notre marge de page, ou vous pouvez même simplement l' appeler marge. Et ce sera l' espacement sur les côtés. Donc pour l'instant je l' ai sur 48 pixels, en fait, donc je vais l'avoir à 48 pixels. Et maintenant, si vous voyez ici, nous avons un nombre pour la largeur qui est déjà un nombre défini. Mais si vous appliquez réellement une variable ici, donc si vous appliquez la variable pour la taille de l'appareil, elle est maintenant liée à cette taille variable de l'appareil, et je peux toujours la modifier à partir d'ici. Et puis, pour ce qui est de notre contenu, nous voulons vraiment aller de l'avant et nous assurer que tout est dans une mise en page automatique. Je vais donc regrouper ces deux éléments dans un cadre de mise en page automatique et les deux ensemble. Je vais donc les mettre en page automatiquement ensemble, puis aussi celui-ci ici. Nous avons donc une zone de contenu ici, puis au lieu d'avoir les marges à zéro ici ou le rembourrage à zéro horizontalement, je vais appliquer la marge de page Nous avons donc maintenant un rembourrage supplémentaire ici. Mais grâce à cela, nous pouvons réellement aller de l'avant et étendre cela pour prendre en charge l'ensemble du contenu. Nous pouvons donc le faire ou simplement définir la largeur sur une variable pri et définir la taille de l'appareil Alors maintenant, elles sont liées à des variables. Mais vous voyez, rien ne se passe vraiment si je minimise cela et nous n' avons aucune raison de définir ces variables pour le moment. Mais si vous configurez un mode différent en cliquant sur Nouveau mode variable puis en appelant ce mobile, nous pouvons réellement changer les numéros ici. Donc, pour le mobile, nous allons avoir une taille d'appareil de 440 et une marge de page, nous allons plutôt la régler sur 24. Alors maintenant, si vous cliquez ici, puis sous apparence, si vous cliquez sur le bouton Split, appliquez le mode variable, nous pouvons changer d'appareil Donc, si nous optons pour le mobile, l'appareil est maintenant configuré sur mobile. Cette zone a été réglée sur la taille 440 du mobile, le rembourrage a changé Mais bien sûr, nous avons toujours un problème où les choses ne se sont pas arrangées comme nous le voulions ou comme nous nous y attendions. Idéalement, ce que nous voulons, c'est que les choses soient bien espacées. La SEC n'est pas parfaite. Certains éléments ne conviennent pas, et nous devons apporter des modifications pour qu'ils fonctionnent. Par exemple, nous avons ici les extensions pour votre voyage, et au lieu d'avoir une largeur fixe, le moment, c'est du contenu chaud. Donc, ce que nous voulons faire, c'est emballer celui-ci et définir une largeur maximale. Quoi qu'il en soit, la largeur maximale sera la largeur de la taille de l'appareil, qui est ici de 440. Et en fait, au lieu de 440, vous pouvez configurer une autre variable ici pour l'appeler taille du contenu et déjà supprimer ces marges. Ce sera donc la taille du contenu de ces boîtes ici. Revenons donc à la section suivante pour l'assembler pour cette page 56. Propriété de largeur maximale: Configurez les variables et nous appliquons le mode afin de pouvoir réellement modifier la taille de notre appareil en fonction du Web et du mobile. Et certains de ces trucs sont déjà plus beaux. Mais ce que nous devons faire, c'est définir une largeur maximale pour notre zone de contenu afin que le contenu ne se répande pas à l'extérieur Jetons donc un coup d'œil à ce qui se passe actuellement avec notre page. Si nous revenons au Web dès maintenant, nous avons une mise en page automatique selon laquelle, quelle que soit sa taille, le contenu ne change ni ne s'adapte vraiment , et ce n'est pas ce que nous voulons. Au lieu de cela, si vous le réglez sur un wrap, lorsque le contenu est réduit, au lorsque le contenu est réduit, au moins celui-ci sera redirigé vers le bas au lieu de rester sur la droite, afin que sur le mobile, nous puissions le présenter Maintenant, il se peut que vous ne vouliez pas le faire de cette façon. Vous voudrez peut-être le montrer en plus de confirmer votre voyage. Et bien sûr, si vous voulez plutôt le montrer en haut, ce qui n'a pas autant de sens, mais vous pouvez le faire en allant ici et en ayant le premier en haut. Alors maintenant, cela résout ce problème. Nos champs ici posent problème car ils sont actuellement corrigés à 480. Je vais donc disposer ces deux éléments ensemble, puis nous allons définir une largeur maximale. Mais avant cela, nous allons définir une nouvelle propriété ici pour nos variables, et celle-ci sera également un nombre, et nous allons appeler ce contenu. Largeur, qui sur le Web sera de 14 40 à 48 fois deux C'est donc la zone de contenu maximale que nous pouvons avoir. Ce sera donc 13 44. Et sur mobile, ce sera 392. Nous allons donc faire en sorte que cela ait une largeur maximale ici . Et nous allons appliquer une variable à la largeur maximale du contenu. Donc, en ce moment, ce qui se passe, c'est que par défaut, c'est à 480 pixels, mais la largeur maximale que cela aura se trouve dans le boîtier Web 13 44. Mais si nous passons au mobile, vous voyez, maintenant ce n'est que 392. Mais le seul autre problème est qu' à l'intérieur de ces mises en page automatiques, nous devons également faire en sorte que le contenu à l'intérieur ait la bonne largeur définie Rentrons donc à l'intérieur et voyons ce qui se passe. Celui-ci est également défini sur 480, mais maintenant nous voulons remplir le conteneur pour celui-ci et aussi pour celui-ci car le cadre de mise en page automatique parent gère maintenant les wides ici Voyons maintenant ce qui se passera si nous le passons au mobile. OK, certains champs sont bien plus beaux. Et celui-ci ici, comme il y en a deux ensemble, nous voulons remplir un conteneur, puis entrer à l'intérieur et appliquer un conteneur de remplissage sur les deux pour que cela ressemble à ceci sur mobile. Alors maintenant, si nous passons au Web, voici à quoi cela ressemble. Maintenant, si nous réglons ce paramètre sur mobile, les champs s'affichent bien. Si nous le définissons sur Web, il semble également bon. Sauf que nous avons un petit problème, et c'est le fait que lorsque nous passons de l'un à l'autre, le champ ici, la largeur que nous avons déjà passe au mobile. En général, ce que nous voulons faire, c'est dupliquer cette page et en avoir une version mobile. Nous allons donc simplement passer celui-ci au mobile. Et très rapidement, nous avons une version mobile et nous pouvons simplement l'étendre. Nous y voilà. Et il y a juste quelques autres problèmes ici. Donc, cet article devrait également avoir une largeur de mélange ou appliquer une largeur de contenu variable. Et puis ici, pour ce bouton, il devrait être sur le conteneur de remplissage. Et celui-ci ici devrait également avoir une largeur maximale de contenu et de largeur , vous l'avez deviné Et ça commence donc à vraiment bien paraître. Comme vous pouvez le constater, nous avons pu passer du mobile au Web très rapidement et c'est ainsi que vous pouvez utiliser variables pour avoir un design réactif tout au long de votre projet. Je vous laisse le soin, à titre d' exercice, de choisir si vous souhaitez continuer à utiliser des variables pour vos conceptions mobiles réactives. Et dans la section suivante, nous allons travailler ensemble sur une autre façon de le faire manuellement, ce qui fonctionne également sans utiliser de variables, ce que je fais aussi souvent. Mais avant cela, nous devons corriger cette barre de navigation en haut afin d' avoir une version mobile. Revenons donc à la section suivante pour savoir comment créer une variante pour différents appareils 57. Variantes de composants pour les appareils: Vous souhaitez souvent créer des composants que vous pouvez utiliser à la fois sur le Web et sur les Parfois, vous devez modifier vos composants pour qu'il y ait un pour le mobile et un pour le Web. Ainsi, par exemple, le snap board ici devrait avoir une version mobile et une version Web. C'est légèrement différent. Nous allons donc passer au composant ici où nous l'avons dans cette section et nous allons créer une autre variante qui sera spécifique au mobile. Et nous allons appeler cette variante d'appareil, et je vais simplement l'étendre pour qu'il y ait de l'espace sur la droite, ajouter une autre variante, et nous allons appeler celle-ci mobile. Oups. Allons-y. Et nous allons définir la largeur appliquer une taille d'appareil variable. Et nous allons définir la largeur 440, qui est la taille du mobile et la mettre sur le côté ici. Et évidemment, ça n'a pas l'air génial. Allons donc sélectionner le logo et changeons-le pour qu' il soit peut-être un six pour mobile. Ensuite, le rembourrage horizontal, nous allons faire la marge de page, puis nous allons appliquer le mode mobile variable afin que celui-ci suive toujours le mode mobile Et en fait, vous pouvez faire la même chose avec votre largeur. Vous pouvez simplement appliquer une taille d'appareil variable, et comme nous avons réglé le mode sur mobile, il suivra toujours le mobile. De cette façon, si jamais nous modifions la taille de notre mobile, si nous décidons soudainement notre mobile devrait être de 500, tout sera appliqué automatiquement. C'est donc l'avantage de l'utiliser de cette façon. Ou supposons que vous souhaitiez modifier la marge sur mobile à 16 pixels, ces modifications se produisent automatiquement. Donc, sur mobile, nous ne voulons pas le nom. Nous voulons juste supprimer le nom, et peut-être que l'espacement entre les deux pourrait être de 24 pixels Celui-ci pourrait être légèrement plus grand, peut-être à peine âgé de cinq ans. Ça a l'air bien. Donc celui-ci s'appelle Web. Celui-ci n'a pas de nom. Cela s'appelle simplement default, nous voulons donc le changer en web. Je vais juste le redimensionner ici. Ensuite, ce que nous voulons faire, c'est également accéder aux variables et créer un nom de périphérique ici. Nous allons donc créer une variable de chaîne appelée device, ou vous pouvez créer un nom de périphérique. Celui-ci sera Web, orthographié exactement de la même manière, et celui-ci sera mobile Orthographié exactement de la même manière qu'ici. Ainsi, vous pouvez indiquer à votre page les composants à utiliser. Donc, si vous allez ici, nous pouvons passer à celui que nous avons dans le mobile, puis au lieu de passer manuellement au mobile à chaque fois, nous pouvons appliquer la variable appelée nom de l'appareil. Alors, que se passe-t-il ici ? Comme vous pouvez le constater, si je passe au Web, j'ai un petit bogue, et je veux juste m'assurer que si cela vous arrive, vous savez exactement ce qui se passe. Si vous rencontrez un problème comme celui-ci où l'un de vos composants est bloqué dans un certain mode, il est probable que vous ayez appliqué une apparence ici à ce composant ou à ce mode variable spécifique, mais vous ne l'avez pas supprimé, car pour le moment, si nous changeons le mode variable pour l'ensemble de la page, tout devrait changer. Quelque chose ne change pas, cela signifie que vous appliquez un mode variable à un composant spécifique. Donc tu ne veux pas faire ça. Vous souhaitez le supprimer afin qu'il hérite automatiquement apparence ou du mode variable que vous avez dans l'ensemble du cadre ou de la page ici Alors maintenant, si nous changeons cela en mobile, cela utilise cette barre de navigation depuis mobile. Si nous le faisons sur le Web, c'est en utilisant la barre de navigation du Web. C'est ainsi que nous pouvons passer une variable à une variante et utiliser différentes variantes pour créer différents composants à utiliser là-bas. Vous pouvez donc imaginer que cela peut être utile et pratique lorsque vous travaillez sur différentes marques Si vous souhaitez que votre application fonctionne sous plusieurs marques, vous pouvez changer le nom de l'entreprise très rapidement ou modifier différentes propriétés. Vous disposez donc d'une grande flexibilité , ce qui est une bonne chose. Maintenant, alors que nous parlons toujours de variables et que nous les utilisons pour notre design adaptatif, il y une autre chose que nous pourrions changer ici sont les tailles de police sur mobile. Tout comme nous l'avons fait pour le nom de l'entreprise ici, certaines tailles de police sur mobile sont un peu trop grandes. Pour la majeure partie de la page, cela fonctionne et ça a l'air bien, mais plus précisément, ce petit en-tête que nous avons ici est trop gros sur mobile. Sur le Web, ça a l'air d'aller bien. Revenons donc à l'exexture pour faire une mini-leçon sur les variables sur les polices 58. Variables de police: Sur mobile, nous voulons utiliser différentes tailles de police. En fait, il existe bien d' autres propriétés que vous pouvez appliquer à vos polices à l'aide de variables. Explorons-les donc rapidement. Nous avons donc ici nos styles locaux pour nos différents textes d'en-tête et corps de texte. Et à l'intérieur de chacune d'elles, si vous modifiez les propriétés, nous pouvons bien sûr changer la famille de polices. Nous pouvons modifier le poids et la taille de la police, mais nous pouvons également leur appliquer des variables. Nous pouvons donc l'écrire sous forme de variable et appliquer ici en cliquant sur Appliquer la variable. Encore une fois, vous pouvez modifier rapidement votre famille de polices, disons, pour l'ensemble de votre projet au lieu d' avoir à les parcourir toutes et à les modifier ici. L'autre chose que vous pouvez faire est de définir taille de votre police à l'aide d'une variable ci-dessous. Et vous pouvez également le faire pour le poids de votre police. Maintenant, ce qui m'intéresse pour notre cas spécifique, c'est la taille du mobile. Nous voulons que pour celui que nous avons, disons, trois ans, nous ayons une taille unique pour le Web, qui est de 39 pixels, qui est de 39 pixels, puis peut-être que nous voudrions en définir une plus petite lorsque l'enfant de trois ans est utilisé sur un mobile. Comment s'y prend-on ? Si nous revenons à nos variables, nous pouvons créer une nouvelle collection, et celle-ci, je vais l'appeler fonts. Nous allons créer une variable, la mettre en valeur numérique. Et nous allons écrire H en taille trois. Nous aurons un mode en tant que Web et l'autre en tant que mobile. La seule chose que j'ai oublié de mentionner, c'est que les modes ne peuvent être utilisés que si vous avez un Pcount avec Figma Donc, si ce n'est pas le cas, continuez en appliquant simplement un mode pour votre site Web. Et si vous envisagez, bien sûr, de procéder à une mise à niveau, je le recommande afin que vous puissiez appliquer différents modes. Donc, pour notre site Web, appliquons la même taille de 39 pixels, puis peut-être que sur mobile, nous pourrons faire 30 pixels. Nous allons essayer et voir si c'est trop gros. Alors maintenant, si nous passons à notre H trois, au lieu d'avoir une taille fixe de 39 pixels, descendons ici et appliquons une taille H trois variable. Maintenant, comme nous l'avons configuré dans le cadre d'une collection de variables différente, cela ne fait pas partie des appareils. Nous devrons définir notre page ici où nous devrons modifier ou appliquer notre mode variable pour que les polices utilisent également la taille du mobile. Si vous ne voulez pas faire face à cet inconvénient, vous pouvez vous rendre ici , passer sous vos appareils et configurer taille de vos polices ci-dessous en tant que collection différente. Je vais donc simplement le faire à titre d'exemple. Tu n'es pas obligée de le faire. Je peux créer un chiffre ici, disons, pour ma taille H deux, puis un autre pour ma taille H une. Oups Ensuite, je peux simplement les regrouper. Et appelez ce groupe les tailles de police. Il fait toujours partie de la collection des appareils, vous n'aurez donc pas besoin d'appliquer également le mode variable aux polices. Mais actuellement, la façon dont je l'ai configuré est qu'il se trouve dans une collection différente. Je vais donc également avoir besoin d'appliquer le mode variable pour les polices de caractères mobiles. Et boum, notre texte applique maintenant le format H three pour mobile, ce qui est incroyable. Je pense que nous pouvons même augmenter cela jusqu'à 32 pixels. Essayons ça. Et ça a l'air bien. C'est ainsi que nous pouvons utiliser des variables pour modifier nos polices et leurs tailles en fonction de l' écran sur lequel vous vous trouvez. Nous avons donc appris à utiliser des variables jusqu'à présent pour créer un design réactif. Revenons dans le secteur de l'ex pour essayer une autre méthode en utilisant les contraintes 59. Utiliser des contraintes: Comment utiliser des variables pour créer différentes tailles d'appareils, passer rapidement de notre page Web à une page mobile, etc. Et je pense que c'est le bon moment pour apprendre à créer également design réactif en utilisant des contraintes. Les contraintes de Figma se trouvent donc sur le panneau de droite ici Parfois, il peut ne pas être visible Vous devrez donc cliquer sur ce petit bouton qui indique les contraintes, et vous verrez les contraintes appliquées à vos articles dans le cadre. Les contraintes permettent aux éléments à l'intérieur de votre cadre réagir et de répondre au dimensionnement du cadre plutôt au dimensionnement du cadre, au contenu ou au cadre parent Par exemple, à l' heure actuelle, par défaut, chaque élément de votre design aura une contrainte en haut et une contrainte à gauche. Cela signifie que si vous agrandissez votre cadre, si vous modifiez la taille, par défaut, tout essaiera de rester limité à gauche et en haut, de sorte qu'il soit toujours attaché à la gauche et au haut de votre projet vais dupliquer cette page de découverte de destination juste pour créer une version mobile en utilisant uniquement des contraintes. Maintenant, pour ce qui est de la barre de navigation ci-dessus, si je maintiens la touche Shift enfoncée, je définirai également une contrainte horizontale gauche et droite. Alors maintenant, il est également limité vers la droite. Ce qui se passera, c'est que si nous agrandissons notre cadre, la barre de navigation l'agrandit maintenant avec la taille du cadre, et si je le réduis , il deviendra également plus petit Maintenant, bien sûr, nous avons toujours ce problème où certains composants peuvent avoir une mauvaise apparence Nous devrons donc techniquement le remplacer une version pour appareil mobile. C'est toujours nécessaire. Maintenant, bien sûr, pour le moment, la façon dont cela est configuré à l'aide de la version mobile est qu' elle est réglée sur une largeur fixe. Mais si nous supprimons temporairement cette largeur fixe, nous pouvons simplement la redimensionner à la largeur que nous voulons pour notre appareil Alors maintenant, comme cela occupe toute la page ici, il fera toujours la même chose. Il continuera à rétrécir et à s'étendre. Par rapport à son conteneur parent, qui est également redimensionné. Maintenant, pour celui-ci, nous pouvons faire exactement la même chose pour le contenu. Si je plonge ici, la taille ici pourrait convenir à la taille d'une tablette. Ensuite, nous pouvons également appliquer une contrainte en haut à gauche et à droite. Mais avant cela, je vais rapidement vous montrer en quoi consistent les autres contraintes. Nous pouvons donc avoir une bonne contrainte. Maintenant, ce qui va se passer, c'est que si une page s'agrandit ici, ce contenu restera toujours à droite. Si je fais le centre, alors comme vous l'avez deviné, le contenu restera au centre, ce qui pourrait également fonctionner, d'ailleurs Et c'est le plus souvent utilisé sur le Web. Vous pouvez également utiliser vos compétences. Et lorsque vous le définissez sur Skill, si vous agrandissez votre page, ce contenu sera également étiré horizontalement pour correspondre à la taille que vous allez atteindre étiré horizontalement pour correspondre à . C'est un peu différent car, comme vous pouvez le constater, l'espacement entre la gauche et la droite est différent Il rétrécit donc et s'étend. Ce n'est pas la même chose que de le régler à gauche et à droite. Et le plus souvent, nous ne voulons pas utiliser l'échelle. Dans une page comme celle-ci, la gauche et la droite ont le plus de sens. Et en ce moment, les choses se sont un peu compliquées. En fait, je vais passer à la commande Z jusqu' à ce que nous ayons celle-ci, puis la changer à gauche et à droite Maintenant, il s'agit d'une meilleure solution où les objets s'étendent ici, puis ils se rétrécissent pour s'adapter à différentes tailles, comme un écran mobile. Ce n'est pas parfait et vous devrez toujours utiliser votre mise en page automatique pour résoudre ce problème pour mobile. Vous pouvez donc faire un tas de choses pour résoudre ce problème. Ainsi, pour cet élément, par exemple, vous devrez peut-être également l'enrouler de manière à ce que, si la page se rétrécit, et pour ce cadre, nous souhaitions définir le conteneur du champ Maintenant, si la page se rétrécit, les champs sont également déplacés vers de nouvelles lignes. Même chose ici. Pour celui-ci, nous voulons faire un emballage et il est déjà dans le récipient de remplissage, donc cela devrait fonctionner. Voilà. Donc très rapidement, nous avons une page qui pourrait fonctionner sur mobile. Ce n'est pas un mauvais début. En fait, cela a été assez rapide à configurer, mais vous souhaiterez peut-être un design différent sur votre mobile afin qu'il ne prenne pas autant de place en haut avec tous les champs et la façon dont tout est configuré. Donc, idéalement, vous devez toujours apporter quelques personnalisations à cela Mais en utilisant des contraintes, nous modifions rapidement la taille du contenu ici afin qu'elle dépende de la taille de la page ou de la taille du cadre. Nous n'avons pas encore abordé les contraintes verticales, mais si nous jouons avec les contraintes verticales, vous avez également des options similaires où les choses peuvent être limitées du bas vers le haut et le bas, au centre et à l'échelle Si vous faites le bas de la page, si le bas de la page s'agrandit, le contenu sera déplacé ici pour conserver le même espace entre, vous savez, où cela se termine ici et le bas, qui est de 684 pixels ici Il essaiera donc de conserver ces 684 pixels. Encore une fois, par défaut, il est réglé sur top. Il conservera donc l'espacement qu'il a par rapport au haut de ce cadre, qui est de 136, ce que nous avons par défaut Et bien sûr, nous avons les autres options, comme le centre. Donc, si la page s'agrandit, elle essaiera de la garder centrée en fonction de l' endroit où elle se trouvait auparavant. Et vous avez également la même option d' échelle. C'est ainsi que vous utilisez les contraintes. Cependant, lorsque vous commencez à utiliser largeur maximale et toutes les dispositions et variables, il est moins nécessaire d'utiliser des contraintes. Ce n'est donc pas quelque chose que vous utilisez probablement au quotidien, mais vous avez cette option. Très rapidement, si vous souhaitez également les modifier rapidement, mais utiliser les visuels ici, vous pouvez toujours régler cela en haut à partir d'ici Vous pouvez le régler en bas à partir d'ici. Ou si vous maintenez la touche Maj enfoncée, vous pouvez régler à la fois en haut et en bas. De même, si vous maintenez la touche Maj enfoncée, vous pouvez simplement désactiver l'un ou l'autre. Vous pouvez régler le centre à partir d'ici. Et n'oubliez pas que vous contrôlez les contraintes horizontales à partir d'ici, puis ces lignes verticales vous permettent de contrôler vos contraintes verticales. Mais par défaut, nous voulons placer celui-ci en haut et celui-ci à gauche et à droite afin de pouvoir rapidement, si nous le changeons en 440, configurer rapidement un design mobile. Oui, maintenant que nous avons une page mobile, vous voudrez peut-être apporter des modifications ici et les éléments à l'intérieur ne sont pas si espacés Ensuite, vous voudrez peut-être définir les champs en pleine largeur ici. Et peut-être que ceux-ci pourraient être une mise en page automatique. Et à partir de là, nous pouvons également régler celui-ci sur 16 pixels. Et je veux apporter le rembourrage de manière à ce qu'il soit à 24 pixels des côtés et à 24 pixels du haut Et puis il s'est simplement agrandi pour qu'il fonctionne aussi. Vous devrez peut-être apporter quelques modifications ici et là pour améliorer les choses sur mobile, mais cela devrait être relativement simple Ainsi, avec quelques modifications simples, vous pouvez créer un design mobile pour votre page de découverte de destination. 60. Organiser notre dossier: J'ai mis du temps à terminer mes versions mobiles. Si ce n'est pas le cas, prenez le temps de le faire pour les autres pages que vous n'avez pas encore faites. Maintenant, dans cette conférence, je veux tout organiser rapidement et m'assurer que le projet a l'air impeccable. La seule chose qui m'a marqué lorsque je l'ai lu, c'est que pour notre inscription avec numéro de téléphone et notre inscription avec Google, pour notre inscription avec Google, nous pouvons l'améliorer un peu en y ayant simplement l'icône ou l'icône Google. Donc, en ce moment, nous avons cette icône Afficher la gauche que nous pouvons utiliser. Et puis pour notre icône, nous n'avons que les icônes limitées que nous avons configurées. Nous pouvons évidemment revenir ici et modifier ou ajouter une autre icône. Si vous ouvrez simplement votre navigateur et recherchez un SVG. Voyons donc si je peux. J'ouvre simplement icônes Foster pour voir qu'elles ont peut-être déjà un logo Google ici. Et ils le font. Vous pouvez soit utiliser celui-ci ici soit simplement rechercher le logo Google, SVG, dans votre navigateur, puis vous en verrez un qui ressemble à ceci et vous l' ajouterez simplement ici dans votre projet Cela n'a peut-être pas été ajouté, nous allons donc simplement l'apporter ici. Je vais juste le coller, et c' est bien trop gros. Nous voulons le faire, voyons quelle est leur taille , 20 par 20. Nous voulons donc simplement appuyer sur K sur notre clavier pour rapidement passer à 20 par 20. Ensuite, je vais simplement l'afficher ici, le transformer en composant et l'appeler icônes Google Logo afin que nous puissions rapidement, dans notre bouton ci-dessous, remplacer par le logo Google. Cela semble beaucoup mieux et très similaire à ce que nous avons dans d'autres applications. Maintenant, signez-le avec votre numéro de téléphone. Nous pouvons simplement faire en sorte que l'utilisateur saisisse son numéro de téléphone puis dise « continuer ». heure actuelle, cela semble un peu étrange, comme s'il n'y avait pas le champ du numéro de téléphone. Alors pourquoi ne pas simplement copier un champ ici, le coller ici, puis appeler celui-ci ? Numéro de téléphone, et nous allons juste mettre un exemple de numéro de téléphone plus un, deux , un, deux, trois, un, deux, trois, quatre, tiret ici. Ensuite, nous allons simplement disposer les deux et les rapprocher un peu, peut-être à huit pixels l'un de l'autre. Ils ont donc l'air d'être apparentés. Ça a l'air un peu mieux. Et nous pouvons toujours nous inscrire d'abord avec l'option Google , puis avec l'option numéro de téléphone. C'est donc une petite amélioration. Cette page semble bonne. Cette page semble également bonne. Nous avons les listes déroulantes ici, puis mon téléphone portable semble un peu éparpillé. Ce que nous pouvons faire, c'est simplement séparer les designs mobiles, puis le design Web séparément, juste pour organiser rapidement le fichier. Nous pouvons donc simplement aller ici et faire une section. Je vais simplement dessiner une section autour de mes écrans mobiles et l'appeler section mobile. Ensuite, je vais appuyer sur Entrée pour sélectionner tous les cadres à l'intérieur et les organiser à l'aide de cette petite icône. Ensuite, lorsque vous organisez tous vos cadres, vous pouvez rapidement les rapprocher les uns des autres, par exemple en les espaçant de 100 pixels Ensuite, si vous double-cliquez sur les bords de votre section, celle-ci sera automatiquement redimensionnée pour correspondre au contenu qu'elle contient Maintenant, nous avons toutes les pages mobiles là, et nous pouvons faire exactement la même chose en dehors des pages Web ici. Tu n'es pas obligée de le faire, mais je trouve que c'est mieux. Ensuite, il suffit d'en avoir une version Web, puis d'appuyer sur Entrée pour sélectionner tous les cadres et les organiser ici. Le filtre et tout se sont un peu compliqués là-dedans, mais nous allons corriger cela et passer à la première ligne Et nous allons placer ce filtre dans le menu déroulant dans l'autre, juste là où il devrait être. Et je vais garder un peu plus d'espace pour les deux . Nous y voilà. Ce sont nos écrans mobiles, puis nous avons nos composants, qui constituent également déjà une section. Donc ça a l'air sympa. Nous avons une section sur les composants, une section Web et une section mobile. Maintenant, en ce moment, nous avons ces maquettes ici. Vous pouvez toujours créer de nouvelles pages et déplacer votre site Web ou votre mobile vers ces pages. J'aimerais avoir une application simple comme celle-ci, tout sur une seule page. Très bien, ça a l'air très soigné et organisé, et maintenant il est temps de revenir et d' en faire un prototype. Faisons-le donc ensemble dans la section suivante. 61. Tester notre application avec DesignPro: Nous avons organisé notre dossier, et il commence à être très beau. Maintenant, pour faire passer nos conceptions au niveau supérieur, nous pouvons faire certaines choses pour vérifier et nous assurer que nos conceptions sont accessibles et qu'il n'y a aucun problème d'interface utilisateur que les utilisateurs rencontreront lorsqu'ils utiliseront notre application. Un plugin que j'ai trouvé très utile pour nous aider dans ce domaine s'appelle Design Pro. Si vous recherchez dans Plug-ins and Widget for Design Pro, vous trouverez ce plugin AI Design Reviewer, que vous pourrez ouvrir. Ce plugin nous aide à améliorer le texte de notre page, vérifier l'accessibilité et à auditer notre interface utilisateur. Prenez une seconde pour le signer créer un compte. Nous allons le faire également. Une fois connecté, vous verrez la page que vous avez sélectionnée. Donc, si je change de page, je vois la page que je suis en train de consulter, et je peux choisir de faire une critique sur cette page. page qui m'intéresse en ce moment est notre page principale, qui est la page de découverte de la destination, car c'est probablement l'une des pages les plus visitées. Mais bien sûr, vous pouvez exécuter ce plugin sur n'importe quelle page et de préférence sur toutes les pages de vos designs. À partir de là, je peux choisir une critique, professionnel de la conception, améliorer notre copie, auditer l'IA, détecter tout problème d'interface utilisateur et nous aider à suivre les meilleures pratiques. Assurez-vous que notre design respecte les directives d'accessibilité, ce qui peut être très important pour garantir que vos conceptions sont accessibles et qu'elles fonctionnent avec tout le monde. Et pour les pages de destination et les endroits où vous avez des appels à l'action, ils peuvent vous aider à convertir et augmenter votre conversion sur ces sites Web. Vous pouvez toujours obtenir un avis d'expert individuel si vous souhaitez un avis plus professionnel à ce sujet. Allons-y et exécutons l'interface utilisateur d'audit ici pour voir quels types de problèmes d'interface utilisateur cette page pourrait présenter. Passons donc à Let's review. Il va falloir une seconde pour récupérer le design, le parcourir et demander à son IA de tout vérifier dans ce design Très bien, l'interface utilisateur d'audit est maintenant prête à fonctionner. Nous pouvons voir quels étaient les commentaires ici. Donc, tout d'abord, cela vous donnera quelques éléments positifs qu' il a trouvés dans notre design. Seules deux polices ont été utilisées, excellentes combinaisons de polices. C'est génial. Et ce sont toutes des choses géniales à voir en tant que designer. Et juste en dessous, vous verrez tout ce que vous devez corriger. Ici, nous pouvons cliquer sur Inspecter pour savoir exactement d'où vient ce conseil. Et il est mentionné que le logo ici et la section du profil utilisateur doivent être sur la même ligne de base verticale. Il correspond donc au logo. Comme il y a une petite différence ici, celle-ci est de 48 pixels, alors que la police ici est de 38 pixels. Donc, visuellement, ce n'est pas tout à fait sur la même ligne que celle que vous voyez au centre. C'est une excellente solution. Nous pouvons en fait accéder directement à notre barre de navigation et apporter cette modification afin que ce texte ait 48 pixels et qu'il soit centré vers le milieu Et maintenant, si nous revenons en arrière, même si ce n'est pas très évident, il s'agit de changements subtils qui sont importants dans vos conceptions. Oui, cela a été utile et il suffit de le rejeter. Nous savons donc que nous en avons fini avec ça. Passez ensuite à la suivante. Je dis que la couleur orange ici pourrait être la même que celle-ci en termes de marque. C'est donc le 800 secondaire. Nous pouvons donc simplement accéder à notre carte ici et appliquer le 800 secondaire. En fait, je veux le faire aussi pour l'autre. Donc, ne pas y retourner, ça a définitivement l'air plus aligné maintenant. Je vais ignorer ça. Cela nous a donc apporté une tonne d'autres choses, et nous pouvons les examiner en profondeur et même vous donner la source de leur origine. Je vous recommande de consulter ces sources pour vraiment comprendre, surtout en tant que designer débutant, sur quoi sont réellement basés ces commentaires ? Je pense que dans l'ensemble, nous avons fait du bon travail en élaborant ce design, car nous avons obtenu beaucoup de points positifs. Essayons notre page détaillée de destination, choisissons un audit d'accessibilité, exécutons-le et voyons quel type de résultats nous obtiendrons ici. Et en quelques secondes, le feedback est prêt. Cela nous donne donc une note basée sur la couleur du texte et sur cet arrière-plan. Cela nous donne quelques suggestions sur la façon dont nous pouvons également y remédier ici, et nous pouvons les appliquer directement ici. C'est donc un plugin très utile, et je vous encourage à l'utiliser dans vos projets. 62. Exporter nos designs: Avant de nous lancer et de travailler sur nos prototypes, je voudrais vous montrer rapidement comment vous pouvez exporter vos conceptions depuis FigMA Imaginons qu'un ami, un collègue ou un collègue vous demande des versions PNG de vos créations. Vous pouvez évidemment partager le fichier Figma avec eux, et nous aborderons cela dans la prochaine section Mais si vous souhaitez exporter rapidement vos designs d' ici vers votre bureau ou n' importe où, vous pouvez sélectionner des cadres. En bas, vous pouvez voir une section d'exportation sur bas, vous pouvez voir laquelle vous pouvez cliquer sur Paramètres d'exportation. Par défaut, il s'agit d'un X, qui correspond à la taille d'origine. Mais bien sûr, vous pouvez changer cela à deux x si vous voulez une résolution plus élevée ou une image de plus haute résolution, puis vous pouvez choisir le type si vous voulez JPEG, PNG, SVG ou PDF Ensuite, appuyez simplement sur Exporter et il vous sera demandé où vous souhaitez l'exporter, puis vous obtiendrez un fichier PNG. Ensuite, il vous demandera où voulez-vous votre fichier PNG, puis vous choisirez d'obtenir ce joli fichier PNG ici que vous pourrez partager avec d'autres personnes. Cool. Supposons maintenant que vous souhaitiez exporter l'intégralité de la section ici pour simplement présenter ce sur quoi vous avez travaillé. Vous pouvez réellement exporter l'intégralité de cette section Web et vous pouvez prévisualiser à quoi cela ressemblerait. Il exporterait en fait tout ensemble en une seule image. Donc, comme c'est gigantesque, je vous en montre juste un aperçu . Voilà à quoi cela ressemblerait. Mais il est fort probable que vous souhaitiez exporter des cadres individuels à l'intérieur ainsi que tous les éléments et autres éléments. Si vous avez une section comme celle-ci, vous pouvez simplement appuyer sur Entrée pour sélectionner tous les cadres il contient, puis exporter plusieurs éléments à la fois. Vous pouvez donc exporter sept couches. Et Figma se chargera d'exporter individuellement tous vos cadres sous forme d'image Et cela peut être utile pour les développeurs qui souhaitent utiliser la même icône en forme d'étoile ici Ils peuvent simplement sélectionner ce vecteur et l'exporter au format SVG, ce qui leur permettra de l'utiliser très facilement dans leur projet C'est ainsi que nous l'exportons. Je voudrais également vous montrer, si vous voulez présenter votre projet sur votre portfolio ou le rendre beau, comment nous pouvons utiliser certains fichiers communautaires pour mettre notre projet sur un véritable ordinateur et lui donner un aspect cool. 63. Des designs prêts à être créés pour un portfolio: Donc c'est sympa. Nous pouvons les exporter sous forme cadres individuels, ce qui a l'air cool. Mais je suis sûr que vous voulez mettre ces designs dans votre joli portfolio, et vous voulez le rendre cool. C'est donc ici que nous pouvons utiliser un peu de magie et de figma, ainsi que les fichiers communautaires Donc, si vous vous rendez sur les fichiers de votre communauté et que vous recherchez et si vous vous rendez simplement la page d'accueil des fichiers communautaires, vous pouvez rechercher, disons, un ordinateur portable, maquette ou quelque chose du genre, ou si vous voulez la version mobile, vous pouvez rechercher une maquette mobile Et vous pouvez en voir plusieurs comme celui-ci apparaître. Alors n'hésitez pas à choisir celui que vous souhaitez. Et il en existe de nombreux gratuits, et vous pouvez voir lesquels correspondent à l'ambiance de votre portfolio. Juste à titre d'exemple, je vais choisir l'un d' entre eux juste pour le mettre en valeur, je vais choisir l'un des jeux gratuits d'ici. Ouvrez-le, j'ai trouvé celui-ci sympa que je vais utiliser, juste pour vous montrer comment cela fonctionne. Vous allez cliquer sur Ouvrir pour ouvrir Infigma, puis il vous sera demandé de coller votre design Vous pouvez donc aller sur cette page qu' ils ont dans celle-ci en particulier et lire comment cela fonctionne. Et il utilise un plugin appelé Mockups Plugin. Alors maintenant, il est peut-être différent du fichier que vous avez trouvé, mais c'est celui que j'ai trouvé, et je vais simplement copier ma page de découverte de destination, l'apporter ici et lire les informations. Mais je vais rapidement vous montrer comment cela fonctionne. Passons donc à cette scène. Dans cet où il est écrit « placeholder », collons notre design Et évidemment, c' est ainsi que s'affiche, vous pouvez donc simplement y apporter des modifications s'il ne semble pas beau. Donc, dès le départ, cette couleur rouge est vraiment agaçante. Je vais donc simplement changer cela et je vais juste apporter cela un peu ici. Le reste semble bon pour le moment. Ensuite, ce que vous voulez faire, c'est ouvrir vos plug-ins. Vous souhaitez rechercher cette maquette plug-in et l'ouvrir. Et ce que fait ce plugin de maquette, c'est qu'il vous permet de placer votre cadre à l'intérieur d'une maquette Et il s'agit actuellement d'un plug-in payant, vous pouvez donc choisir de l'utiliser gratuitement en vous inscrivant pour un essai gratuit. Alors n'hésitez pas à le faire. Je suis sûr qu'il existe des versions gratuites, mais si vous êtes prêt à créer votre portfolio, cela vaut vraiment la peine de vous inscrire à l'essai gratuit. Alors maintenant, vous voulez rechercher ce plugin Mk up dans votre onglet plugins, puis une fois que vous l'aurez ouvert, vous verrez peut-être une page vous demandant de passer en Pro, mais vous n'avez pas besoin de simplement cliquer sur Distort. C'est ce que tu veux. Vous souhaitez donc sélectionner la couche que vous souhaitez coller dans l'autre couche. Donc, juste ici, il est dit de sélectionner la forme vectorielle. Donc, tout d'abord, il vous demande de sélectionner le calque dans lequel vous souhaitez coller votre cadre, et c'est celui-ci ici, l'écran, et le calque que nous voulons coller est un espace réservé Ensuite, vous devez appliquer, et boum, cela prend votre design à partir de là, déforme de manière à ce qu'il soit beau sur un ordinateur portable et qu'il ait l'air cool Et vous pouvez simplement l'exporter où vous le souhaitez. C'est ainsi que vous créez des formats présentables sympas de vos designs à partager avec d'autres personnes ou avec votre portfolio, etc. Maintenant, je pense que nous sommes prêts à revenir et à en faire un prototype réel que nous pouvons tester sur notre site Web et nos appareils mobiles. 64. Définir un flux d'utilisateur: Il est temps de s'amuser en assemblant des prototypes réalistes. Au cours des prochaines conférences, nous allons donc découvrir comment utiliser l'outil de prototypage pour présenter notre application à des utilisateurs potentiels ou à d'autres parties prenantes et membres de notre équipe, à des investisseurs, etc. Avant de commencer avec un prototype, nous voulons définir notre flux d'utilisateurs. Et, bien entendu, vous pouvez le faire soit en utilisant simplement un stylo et du papier, soit définissant et en écrivant exactement où vous souhaitez que les utilisateurs aillent dans l'application. Ainsi, généralement, dans un prototype, nous commençons par une page initiale où nous choisissons la page initiale où commence le flux d'utilisateurs, et nous pouvons avoir différents flux d'utilisateurs. Nous pouvons avoir un flux utilisateur pour un utilisateur connecté qui commence sur la page de découverte de la destination. Nous pouvons créer un flux d'utilisateurs pour un utilisateur qui ne s'est pas encore inscrit Nous allons donc le démarrer sur la page d'inscription, ce que nous allons faire Nous allons créer un prototype qui l'utilisateur de démarrer sur la page d'inscription Ensuite, nous allons dupliquer l'écran, faire en sorte que nous impression de remplir les informations, disons l'e-mail et le mot de passe, puis à partir de là, utilisateur s'inscrit et accède à la page de vérification, qui reproduit à nouveau cette page Il semble que nous ayons saisi un code de vérification, continuer puis accéder à notre page de découverte de destination Maintenant, depuis notre page de découverte des destinations, nous avons la possibilité de diriger l'utilisateur vers cette page de Londres, au Royaume-Uni, que nous avons déjà conçue. Nous verrons également comment nous pouvons réellement utiliser des variables dans notre prototypage que soit l' option sur laquelle l'utilisateur clique, moins pour les quatre premières, car le plan payant d'Infigma ne peut actuellement comporter que quatre modes, et nous allons utiliser les modes comme des produits Nous allons donc faire en sorte que cela soit sur la même page ou nous dupliquerons réellement cette page. Et sur cette page, sans avoir à étudier chaque ville différente, nous ferons en sorte que les variables puissent réellement faire le travail à notre place. Juste pour savoir si vous souhaitez avoir cette option, comment procéderiez-vous pour la configurer dans votre prototype ? Ensuite, nous allons procéder à la réservation de la chambre. Ainsi, une fois que l'utilisateur accède à la page où il peut voir la page détaillée de la destination, il peut naviguer. Ensuite, à partir de là, ils réserveront une chambre d'où ils se rendront sur la page de confirmation de réservation. Ensuite, nous aurons à nouveau une copie de cette page avec les informations renseignées, copie de cette page avec puis nous confirmerons la réservation. Maintenant, il y a une page qui vient après, qui permet de confirmer ou de voir votre voyage confirmé. Et pour cette page, nous allons nous amuser un peu avec animations et voir comment nous pouvons réellement animer une jolie carte de réservation confirmée avec des confettis en arrière-plan en utilisant des animations et des cadeaux dans le C'est donc le flux d'utilisateurs que nous allons utiliser. Vous pouvez faire exactement la même chose pour les mobiles. Je vous laisse le soin de faire cet exercice. C'est exactement le même processus que nous allons suivre. Et avant cela, nous allons revenir dans la section suivante et découvrir comment nous pouvons utiliser l' IA de Figma pour créer des prototypes pour 65. Créer un prototype avec l'IA: L'IA iGMA peut également nous aider à créer des prototypes Elle analysera vos cadres et . Elle analysera vos cadres et essaiera de comprendre comment établir des liens entre eux est en aucun cas Elle n'est en aucun cas parfaite ou similaire, mais elle aide à des projets plus simples Donc, si vous avez un projet plus complexe, il se peut qu'il ne fonctionne même pas, mais vous pouvez toujours l' essayer, puis s'il ne fonctionne pas, vous pouvez toujours l'annuler ou réparer les connexions également Donc, pour y accéder, il vous suffit d'accéder à votre panneau d'action ici ou à l'onglet d'action en bas, puis vous verrez ce prototype de fabrication. Et si vous cliquez dessus, il vous sera demandé de sélectionner quelques cadres de haut niveau. Nous voulons donc sélectionner certaines images en maintenant la touche Maj enfoncée. Nous allons donc choisir tous nos cadres ici, puis appuyer sur Command Enter ou simplement créer un prototype. Cela prendra une seconde, et toutes les connexions commenceront à être nouées ici Et comme vous pouvez le constater, il a fait un très bon travail. Cela a déjà créé de nombreux liens entre les différentes pages. Il sait donc que si vous cliquez sur S'inscrire, il sera dirigé vers cette page pour la vérification. Identique à l'inscription avec un numéro de téléphone. Ensuite, cliquez sur Continuer, vous devriez accéder à Destination Discovery, puis en cliquant spécifiquement sur ces deux cartes, nous vous redirigerons vers la page détaillée de la destination. Et nous voyons que même pour le Bbton, il sait comment renvoyer l'utilisateur ou lequel est le bouton B. Et si vous cliquez sur l'un des boutons ici, cela nous amène à la page de réservation, bien que ce ne soit pas correct. Ce que nous voulons faire, c'est que s'ils cliquent sur Afficher la disponibilité, nous ne voulons pas que cela amène l'utilisateur ici. Nous voulons que l'utilisateur fasse simplement défiler la page vers cette section, celle des hébergements ou probablement vers le prototype, nous ne voulons pas qu'il s'y passe quoi que ce soit Nous ne voulons pas non plus trouver de chambres pour les y emmener. C'est juste pour les aider à trouver des chambres ici. Donc, le simple fait de cliquer sur l'un de ces boutons devrait les amener sur cette page. Nous voyons que nous avons notre bouton de retour ici. Nous pouvons donc le prévisualiser même exécutant et en voyant à quoi cela ressemble. Donc, si je clique simplement sur S'inscrire, je passe à la vérification, je continue. Je peux choisir celui-ci ici, je vais ici. Génial Mais encore une fois, ces connexions sont erronées, nous ne voulons donc pas qu' elles y aillent. Nous voulons que la salle de lecture nous y emmène réellement. Et pendant que vous êtes en mode aperçu, en arrière-plan, mon cadre change juste pour m' indiquer exactement sur quel cadre je me trouve . Et je peux aussi tester les boutons de retour, et ça marche. n'y a pas d'animation ou quoi que ce soit de ce genre, donc c'est comme un prototype de base que l'on a assemblé, mais ça marche. Et à partir de là, il ne sait pas où aller car il n'y a pas d'autre page après celle-ci. Ici, vous pouvez conserver ces connexions, ou vous pouvez cliquer sur les connexions individuelles et les supprimer en cliquant simplement sur moins ici. Donc, si vous ne voulez pas ceux-ci et que ceux-ci sont faux, nous pouvons soit les modifier, soit simplement les supprimer ici et dire de les conserver. Et si vous le conservez, toutes ces connexions établies FIM AI seront conservées et vous pourrez les utiliser pour vos prototypes Maintenant, évidemment, je ne vais pas le faire parce que nous allons voir comment connecter manuellement également voir comment connecter manuellement ces cadres entre eux. Mais gardez à l'esprit que vous pouvez utiliser FGM AI pour établir vos connexions entre les différentes pages, assez rapidement et assez facilement Mais bien sûr, nous sommes également ici pour apprendre comment le faire nous-mêmes. C'est pourquoi nous reviendrons lors de la prochaine conférence pour commencer à dupliquer certaines images et créer ensemble un joli prototype 66. Pages avec un état rempli: Donc, pour ces pages, comme pour notre vérification d'inscription, nous voulons les dupliquer et afficher un état rempli. Et c'est toujours une bonne pratique pour montrer à quoi ressemblerait le prototype une fois que l'utilisateur aurait rempli ses informations, et que cela paraîtrait plus réel. Je vais donc dupliquer certains des cadres contenant du texte, puis je les utilise et je fais glisser la copie. Et vous pouvez simplement donner un nom différent à votre cadre exemple un tiret rempli de tirets ou quelque chose comme ça, juste pour faire la différence entre les deux. Et ici pour nos contributions, je viens de me rendre compte que nous n' avons qu'un type d'espace réservé Nous n'avons pas de type où le texte est réellement rempli. Nous voulons donc résoudre ce problème en ayant une autre variante qui nous permet de faire que le texte soit à l'état rempli. Alors faisons-le rapidement. Je vais donc simplement étendre ce cadre de composants en maintenant la touche commande enfoncée , en l'affichant un peu, notre champ de saisie. Et créez simplement une autre variante ci-dessous. Et nous allons appeler cette propriété. Nous allons cliquer sur celui-ci ici. Il suffit de le déplacer un peu vers le bas. C'est trop près de là. Et nous allons appeler cette propriété « un », fill », puis nous pourrons avoir celle-ci « false » et celle-ci sur « true ». Et la seule différence, c'est que pour ce texte, nous voulons faire du texte 500. Il semble donc que ce soit un texte plein. Ensuite, nous pouvons simplement descendre ici. Écrivons un exemple d'e-mail comme max.do@gmail.com ou quelque chose comme ça, puis vous pouvez cliquer sur le champ et remplir le champ. Et pareil pour le mot de passe, remplacez-le par « rempli ». Il semble donc que nous ayons saisi des informations. Ensuite, pour créer une connexion entre les deux, il vous suffit de double-cliquer. Faites un prototype. Ainsi, lorsqu' un utilisateur clique sur l'un de ces champs, il accède à cette page et il semble qu'il ait rempli les informations. Vous pouvez le faire soit en faisant simplement glisser les connexions entre chacune d'elles, soit en maintenant la touche Maj enfoncée pour sélectionner les deux Ainsi, si l'utilisateur clique sur l'un ou l'autre, vous pouvez établir une connexion à l'aide de ce petit cercle. Donc, si vous voyez le cercle apparaître, c'est ainsi que vous pouvez ajouter des connexions. Vous voulez donc simplement le faire glisser vers ce cadre ici. Donc, par défaut, le déclencheur est un clic. Ainsi, chaque fois que l'utilisateur clique sur ces champs, l'un ou l'autre accède à la page du champ d'inscription. Et modifiez également ces actions manuellement. Vous pouvez le remplacer par quelques options différentes que nous avons, que nous explorerons, puis vous pourrez également définir la page de destination. Mais comme nous avons fait glisser la connexion manuellement vers cette page et y avons dessiné ces nouilles pour qu' elles apparaissent à l'écran, nous n'avons plus besoin de le faire Et l'animation est instantanée, mais plusieurs options s'offrent à vous. Pour ce type de page, vous pouvez soit dissoudre, soit simplement instantanément les deux. Pour quelque chose comme ça, je le laisse généralement sur Instant. En gros, maintenant, si vous lancez le prototype depuis la page d'inscription ou depuis son aperçu, en cliquant sur n'importe quelle page, nous pouvons choisir où commence notre prototype Je clique donc sur le cadre d'inscription, puis si vous appuyez sur ce bouton de lecture ici, il sera affiché, ou vous pouvez également le prévisualiser, ce que nous venons de faire lors de la conférence précédente, mais le présenter s'ouvre dans un nouvel onglet comme celui-ci Et voilà. Et maintenant, si je clique sur ces champs, il semblerait que nous les ayons remplis. Incroyable. Maintenant que nous avons dupliqué cette page, toutes les connexions déjà établies sur la page, comme le bouton d'inscription, fonctionneront toujours et nous mèneront à la page suivante, comme le bouton d'inscription, fonctionneront toujours et nous mèneront à la page suivante, qui, bien entendu, provient du prototype de fabrication que nous avions eu lors de la dernière conférence Nous allons donc continuer et les laisser là, peut-être nous débarrasser de celle-ci ici, et vous pourrez vous débarrasser des connexions en cliquant simplement dessus, puis en cliquant sur Supprimer. Nous allons donc laisser tout ce qu'il a déjà proposé pour le moment, puis nous allons explorer cela ensemble pour savoir comment le faire vous-même. Pour l'instant, si vous le souhaitez, vous pouvez dupliquer votre page de vérification, vous pouvez dupliquer votre page de réservation, et j'ai un état rempli, ce que je vais faire également. Au fur et à mesure que vous parcourez le prototype, il semble que nous remplissions également des informations. Prenez donc une seconde pour le faire, puis lors de la prochaine conférence, nous reviendrons et poursuivrons le reste de nos connexions. 67. Dissoudre les animations: Donc, ici, nous voulons maintenant créer la connexion entre les boutons et la page de vérification. Donc, si vous ne l'avez pas déjà fait, assurez-vous de créer une connexion entre le bouton d'inscription et d'établir une connexion avec la page de vérification. que j'ai déjà ici, et ce sera en cliquant sur Naviguer vers page de vérification et le faire instantanément sans animation. Et puis à partir de là, j'ai aussi une autre page. Donc, en cliquant n'importe où sur ce champ ici ou sur l'un de ces champs sur l'ensemble du cadre, nous pouvons établir un lien avec cet état de champ. Il semble donc qu'ils aient saisi le code de vérification, puis en cliquant sur Continuer, nous les redirigerons vers cette page. Désormais, dans votre prototype, vous pouvez également supprimer les connexions à partir de ce bouton Continuer Ils doivent donc cliquer sur ces champs pour d'abord les remplir, puis continuer. Mais cela dépend vraiment de vous. Vous pouvez totalement le faire ou vous pouvez l'ignorer. L'avantage des interactions est que si vous souhaitez apporter rapidement des modifications à toutes les interactions qui mènent à la même page, vous pouvez cliquer sur ce bouton ici, qui sélectionnera toutes les interactions correspondantes, qui sont actuellement ces deux boutons. Donc, tout d'un coup, disons, pour cette connexion, j'ai envie de faire une dissolution, juste pour voir à quoi elle ressemble. Je peux le faire d'ici, et l'animation va maintenant se dissoudre. Il semble donc que cette page se fond en quelque sorte dans cette page, ce qui est bien Et vous pouvez choisir différentes courbes d'animation, sorte que vous pouvez choisir la facilité d'entrée, et vous pouvez la prévisualiser ici pour voir à quoi cela ressemble ou s' assouplir, faciliter l'entrée et la sortie. Maintenant, c'est un peu difficile de voir à quoi cela ressemble, alors je vais augmenter la durée juste pour vous montrer. Vous voyez donc qu'ils ont tous une courbe d' animation légèrement différente. Et vous pouvez toujours en faire une personnalisée si vous souhaitez obtenir plus de détails sur son apparence. Ils ont également des préréglages comme celui-ci, qui sont principalement utiles pour déplacer des animations, et nous les explorerons dans une seconde Mais avant cela, sélectionnons simplement une option d'assouplissement simple et 300 millisecondes, soit le temps qu'il faudra pour que l'animation Juste pour avoir un aperçu, je vais passer à mes maquettes Donc maintenant, si je clique dessus puis si vous continuez, il y a un joli petit fondu, ce qui est différent, par exemple, du passage de cette page à cette page. Bien, assurez-vous que vous disposez de cette connexion pour que votre bouton Continuer puisse également accéder à notre page Destination Discovery Et sur cette page, nous pouvons en fait faire différentes choses. Nous pouvons soit choisir, dans notre prototype, montrer à l'utilisateur une destination ou d'aller et venir, simplement lui demander de cliquer sur Londres, au Royaume-Uni. Ensuite, à partir de là, nous pouvons choisir certaines dates pour lesquelles l'utilisateur va réserver le voyage. Nous dupliquerons donc cet écran en une seconde lorsque nous arriverons à cette connexion. Il semble donc que l' utilisateur ait choisi certaines dates, puis à partir de là, nous verrons la mise à jour des prix. Ensuite, une fois qu'il sera mis à jour, nous pourrons les envoyer sur une page de réservation logique, qui correspond à cinq nuits, deux couchages, etc. Mais avant cela, revenons à notre page de découverte des destinations. Ici, nous avons également un filtre et un tri par bouton que nous voulons réellement donner vie à notre prototype, puisque nous avons déjà les cadres nécessaires Si vous n'en avez pas, prenez une seconde pour les concevoir. Vous voulez qu'il s'agisse de cadres individuels et pas simplement de groupes. Et en ce moment, j'ai un cadre de mise en page automatique pour les deux, ce qui est bien aussi. Vous pouvez avoir une mise en page automatique ou un cadre réel. Revenons à la section suivante pour découvrir comment les configurer sous forme de superpositions Nous n'avons donc pas besoin de concevoir un autre écran qui montre ces filtres ajoutés au cadre. 68. Connexions superposées: Conférence, nous allons découvrir une nouvelle connexion que nous pouvons réellement établir, appelée connexion superposée Une connexion par superposition vous permet essentiellement d'ouvrir un autre cadre à l'intérieur de votre cadre dans lequel vous vous trouvez déjà Ainsi, en mode prototype, vous pouvez ouvrir des éléments tels que des menus déroulants, des modèles et d'autres types de cadres à l'intérieur de votre cadre actuel. Cela facilite donc les choses, vous n'avez pas à dupliquer les cadres pour en avoir un dont le modèle est ouvert ou fermé, et la création de cette connexion est très simple. Disons que nous voulons le faire pour le bouton de filtre ici. Nous cliquons simplement jusqu'à ce que nous ayons le bouton du filtre. Ainsi, lorsque l'utilisateur clique sur le bouton du filtre, nous voulons faire glisser une connexion vers notre liste déroulante de filtres ici et la relâcher Ensuite, notre déclencheur sera un clic. Ainsi, lorsque l'utilisateur clique dessus, il existe un tas de déclencheurs différents, vous pouvez le modifier, mais nous n'en aurons pas besoin pour le moment. Nous voulons qu'ils le soient lorsqu'ils cliquent sur le filtre. Maintenant, nous voulons l'action au lieu de Naviguer vers, comme nous l'avons fait jusqu'à présent, qui amène l'utilisateur d' une page à l'autre. Nous voulons réellement changer cela et sélectionner Open Overlay. Et ce qu'Open Overlay fera, c'est ouvrir ce cadre par-dessus celui-ci Vous voyez donc que la superposition est actuellement une liste déroulante de filtres, c'est ce que nous avons sélectionné La position est par défaut centrée, ce qui signifie qu'elle sera au centre de la page, ce qui n' est pas ce que nous voulons. Et nous avons un tas d'options différentes ici, donc en haut à gauche, en haut au centre, etc., ou nous pouvons choisir manuellement où le cadre déroulant filtré s' ouvrira sur notre cadre d'origine Si vous cliquez dessus, vous verrez ici où l'overlay sera ouvert, et vous pourrez le déplacer Vous pouvez donc le déplacer juste en dessous du bouton de votre filtre avec peut-être un peu de marge entre eux de dix pixels Et maintenant, il s'ouvrira exactement ici en plus de tout le reste. Maintenant, nous avons plusieurs options différentes. Nous pouvons choisir d' ajouter un arrière-plan. Et si vous choisissez un arrière-plan, alors dans le prototype, tout le reste n'est pas ce filtre. Donc, pour tout le reste, nous avons un arrière-plan transparent à 25 %, composé à 25 % de pacte avec un fond noir, mais nous ne voulons pas cela. Nous le voulons juste pour qu'il n' y ait aucun arrière-plan. Ensuite, nous pouvons choisir si l'utilisateur clique n'importe où en dehors du cadre de ce filtre, cela fermera la superposition Et oui, nous le voulons parce que cela a du sens, et la plupart des applications ont une interaction similaire. Ensuite, nous pouvons choisir la manière dont il s'ouvre. Nous pouvons donc avoir une dissolution. Nous pouvons emménager. Et si vous choisissez d'emménager, le filtre viendra de différents côtés. Nous pouvons donc faire apparaître le cadre du filtre depuis le bas de l' écran ou depuis la droite de l'écran. Ce n'est pas très courant de voir cela, et nous allons simplement l'explorer dans une seconde pour voir à quoi cela ressemblera. Donc pour l'instant, je vais m'en tenir à Move in, mais vous verrez que ce n'est pas vraiment le type de mouvement par défaut pour ce boîtier. Move in est idéal pour des choses comme les alertes ou les boîtes modales, etc. Ensuite, je vais aller de l'avant et simplement montrer à quoi cela ressemble. Donc, si vous revenez en arrière, maintenant, si vous cliquez sur ces filtres, il s'ouvrira. Il se déplacera en fait de haut en bas, ou de bas en haut. Et si vous voyez à quoi cela ressemble, il disparaîtra. Mais encore une fois, il ne s'agit pas d'une interaction courante ou d'une animation courante que vous verrez. Vous pouvez le faire instantanément ou simplement le dissoudre. Nous allons juste voir instantanément à quoi cela ressemble, et cela semble beaucoup plus naturel. heure actuelle, à l'intérieur du filtre, vous ne pouvez pas vraiment interagir avec quoi que ce soit, pas même les filtres appliqués ou effacer tous les boutons, mais vous pouvez totalement changer cela pour pouvoir l'avoir. Donc, si vous cliquez sur un pourboire, sur la durée du voyage ou sur quelque chose ici, les choses changeront. Nous n'allons donc pas trop compliquer les choses, car avec, vous savez, une liste déroulante comme celle-ci, vous ne voulez pas vraiment que ce soit si compliqué dans le prototype. Mais nous allons faire une chose. Nous ferons en sorte que s' ils cliquent sur les filtres appliqués, nous fermerons également la superposition Donc maintenant, si vous cliquez sur le bouton pour appliquer des filtres, si vous essayez de faire glisser une connexion, vous verrez que deux types de connexion différents apparaissent ici et nous pouvons rapidement choisir l'un d'entre eux. Nous pouvons choisir B ici, ce qui est bon pour les connexions de navigation ou nous pouvons choisir une superposition fermée, ce que nous voulons Maintenant, ce que nous avons dit, c'est que lorsqu'ils cliquent sur Filtres appliqués, fermez cette superposition Si je supprime celui-ci, je peux également créer en allant simplement sur le côté droit ici et faisant plus sur l' action de clic et en le modifiant pour fermer la superposition Voilà. Donc maintenant, si je clique sur NAppliedFlters, cela fermera également la superposition, et si je clique n'importe où en dehors, et si je clique n'importe où en dehors, cela fermera L'écart est un peu trop important ici. Donc, si vous souhaitez apporter ces modifications rapidement, cliquez simplement sur l'interaction que vous avez déjà créée, puis vous pouvez simplement la déplacer légèrement vers le haut, et vous pouvez également utiliser les touches fléchées pour déplacer les éléments légèrement vers le bas ou vers le haut. Et je pense que cet espacement a plus de sens ici. Vous pouvez donc également faire en sorte que les superpositions soient également échangées. Donc, juste pour vous montrer, pour le tri, je vais en créer un autre en demandant à Alton de le dupliquer Ensuite, je vais mettre celle-ci gras, donc c'est une option sélectionnée, puis je vais cocher la case ici également, puis la supprimer d'ici. Et pour celui-ci, je vais le mettre en gras. Il semble donc que nous ayons choisi la popularité maintenant. Ensuite, dans notre prototype, nous voulons créer une interaction avec cette page et cliquer sur Navigate two au lieu de cliquer sur Navigate two, nous allons échanger la superposition La superposition sera donc remplacée par celle-ci ici, et ce sera instantané Créons maintenant une autre connexion de superposition entre le paramètre trié par, qui est défini par défaut sur pertinence, faites glisser le pointeur vers celui-ci ici, puis nous allons utiliser OnClick au lieu de Navigate two, ouvrir Et au lieu de le recentrer à nouveau, nous voulons choisir manuellement l'endroit où il apparaît. Il suffit donc d'écrire ci-dessous pour le trier avec deux pixels ci-dessous, nous le laisserons allumé instantanément, puis nous le fermerons en cliquant à l'extérieur. Et maintenant, voyons à quoi cela va ressembler. Ils cliqueront dessus. Je vais commencer par pertinence. Et puis si je clique par popularité, cela remplacera la superposition par popularité Mais je ne peux plus vraiment revenir à la pertinence à moins que nous n' allions ici et créions un lien entre les deux et que nous ne disions à nouveau swap overlay Ainsi, lorsque je clique sur Pertinence, superposition revient à la pertinence, puis à la popularité Vous voyez, vous pouvez réellement choisir le tri à afficher ici. Et maintenant vous vous dites : OK, c'est cool, mais ce texte où il est dit «  trié par pertinence » ne change pas. Pouvons-nous faire en sorte que Figma comprenne quand nous faisons telles interactions et change le tri en fonction de la popularité Pouvons-nous montrer notre popularité ici ? Parce que ce serait plutôt cool. C'est donc là que les variables entrent en jeu lorsque nous travaillons avec notre prototype. Alors pourquoi ne pas revenir à la prochaine conférence pour apprendre à utiliser variables et à définir des variables afin de rendre notre prototype encore plus dynamique. 69. Variables dans les prototypes: Conférence, nous allons créer une variable qui représentera le texte contenu dans ce bouton ici, en veillant à ce qu'il soit pertinent dans un premier temps. Ensuite, s'ils cliquent sur ce menu déroulant et le remplacent, disons, popularité, nous voulons que le texte ou la variable passe en popularité. Pour ce faire, nous allons créer une nouvelle variable ici. Nous allons donc passer en mode design, cliquer sur les variables locales. Et si vous ne voyez pas de variables locales, assurez-vous que rien n'est sélectionné. Il suffit de cliquer n'importe où à l' extérieur jusqu'à ce que vous voyiez les paramètres généraux de la page, puis d'ouvrir les variables, et nous allons créer une nouvelle collection que j'appellerai simplement générale. Donc, pour quelque chose comme ça, nous pouvons simplement conserver ces variables dans une collection générale. Peu importe le nom que tu lui donnes. Nous allons créer une variable et utiliser la chaîne 1. Et pour celui-ci, vous n'avez pas besoin de différents modes. Ainsi, même sur la version gratuite de Figma, vous pouvez également le configurer dans votre prototype Nous allons appeler celui-ci trier par. Vous pouvez le nommer comme bon vous semble. Et pour ce qui est de la valeur, nous voulons la remplacer par pertinence, c' est-à-dire le tri par paramètre d'origine. Maintenant, le seul problème, étant donné que nous n'avons qu'un seul texte dans nos boutons, que nous ne pouvons pas lier une partie d'un texte à une variable. Maintenant, dans l'idéal, nous voulons que le texte trié par soit un texte distinct de la pertinence. Nous avons donc besoin que cette pertinence soit une ligne de texte distincte et non associée à la ligne triée par. Donc, juste pour vous montrer comment cela fonctionne, je vais faire quelque chose que je ne recommande généralement pas de faire dans votre projet, mais juste pour ce cas, je vais cliquer avec le bouton droit de la souris et détacher l'instance de ce bouton Donc maintenant, ce bouton ne suit plus l'instance du bouton. Vous pouvez voir qu'il a maintenant une bordure bleue , par opposition à ce bouton de filtres. Et ici, dans le panneau Layers, il ne reste plus qu' AutoLayouFrame, sans aucun lien avec le composant boutons que nous avons maintenant sans aucun lien avec le composant boutons que Donc, si vous apportez des modifications au composant du bouton, cela ne se reflétera pas sur ce bouton, mais cela nous permettra également de le modifier à notre guise. Dans un cas comme celui-ci, ce que je veux faire, c'est découper le texte par souci de pertinence, et je vais le dupliquer en appuyant sur la commande D. Maintenant, l'espacement entre les deux est un peu trop grand, donc je vais maintenir A pendant que je les ai sélectionnées toutes les deux Et au lieu de dix pixels, peut-être pourrions-nous simplement faire quatre pixels entre eux. Et pour le deuxième texte, maintenant ce que je veux faire, c'est appliquer une variable à ce texte afin que ce texte prenne la valeur du texte ou de la chaîne de la table de variables que nous avons. Et vous pouvez le faire en allant ici pour appliquer une variable à côté du texte , puis en sélectionnant trier par. Et à l'heure actuelle, pour une raison ou une autre, mentalités sont une variable ou une valeur de chaîne, et c'est parce que lorsque j'ai écrit Pertinence ici, cela n'a pas été enregistré Mais juste pour vous montrer comment cela fonctionne, si vous le remplacez par pertinence et que vous appuyez sur Entrée, c'est parti. Maintenant, c'est passé à la pertinence. Nous avons donc maintenant ce texte lié à cette variable, qui, quelle que soit la manière dont nous le modifierons, changera automatiquement ici. Maintenant, ce que nous voulons faire, c'est que lorsque l'utilisateur clique sur popularité, nous voulons également définir la variable de tri sur popularité. Et puis ici, inversement, nous voulons définir le tri par variable en fonction de la pertinence. Essayons donc ça. Cliquons sur la popularité. Et nous voyons que nous avons déjà une interaction qui, au clic échange la superposition avec cette liste déroulante dont la popularité est sélectionnée, mais vous pouvez également avoir une interaction supplémentaire si vous cliquez ici et lors d'une nouvelle action Donc, lors de cette interaction, sur ce point, nous pouvons l'avoir, donc nous pouvons également faire d'autres choses. Donc, dans ce cas, ce que nous voulons faire, nous voulons également définir une variable. Et dans notre variable d'ensemble, nous voulons choisir le texte que nous venons de créer, trier par, et nous voulons le remplacer par popularité, qui n'est qu'une variable de chaîne. Nous allons donc cliquer sur String literal et passer à la popularité Maintenant, nous allons définir la variable trier par popularité lorsqu'ils cliquent sur popularité, et nous pouvons le voir ici. Et nous pouvons ajouter plus d'interaction. Donc, au clic, plus de choses se produisent. Nous n'avons rien à faire d'ici. C'est tout ce que nous devons faire. Ensuite, nous allons faire exactement la même chose, mais lorsqu'ils cliquent sur Pertinence. Nous allons donc cliquer sur l'interaction ici, choisir plus ici, définir la variable, rechercher la variable trier par, ou vous pouvez la rechercher rapidement, trier par et appuyer sur Entrée, puis écrire comme il trier par et appuyer sur Entrée, convient. Alors appuyez sur Entrée, et c'est tout. Alors maintenant, prévisualisons-en un aperçu. Si nous accédons à nos maquettes, nous pouvons cliquer sur le trier par, le changer en popularité C'est donc maintenant une question de popularité. Vous pouvez cliquer à l'extérieur, accéder à une autre page, revenir, et tout sera toujours trié par popularité. Ensuite, nous pouvons passer ici et passer à la pertinence. Cependant, l'un des problèmes est que lorsque nous le fermons et que nous l'ouvrons à nouveau, nous ouvrons automatiquement celui dont la pertinence est sélectionnée. Ce n'est donc pas aussi dynamique que nous le souhaiterions Il existe donc un moyen de le faire fonctionner si vous transformez votre liste déroulante de tri en composant. Je vais donc l' expliquer rapidement lors de la prochaine conférence. 70. Variables dans les composants: J'ai posé un petit problème avec notre prototype où nous ouvrons le fichier trié par popularité, puis nous le fermons. Il est écrit « popularité » ici, mais nous l'ouvrons à nouveau, et c'est une question de pertinence. Alors pourquoi cela se produit-il ? C'est parce qu'à l'heure actuelle, nous ouvrons la superposition avec la pertinence sélectionnée Alors, comment créer cette dynamique pour que même cette partie fonctionne ? Eh bien, nous pouvons utiliser des composants pour cela. Donc, pour ce faire, je vais transformer cette liste déroulante en composant à l'aide de l' ancienne commande K, et maintenant c'est un composant. Nous allons nous débarrasser de celui dont la popularité est sélectionnée pour le moment, puis nous allons en créer différentes variantes avec les différents articles sélectionnés. Revenons au mode design. Variante de propriété, et nous l'appellerons sélectionnée. Maintenant, cette partie est vraiment importante. Vous voulez épeler exactement comme vous avez écrit la variable. Donc, dans notre variable, nous avons également de la pertinence, tout comme la façon dont elle est saisie ici avec R. L'orthographe est vraiment importante Nous allons maintenant ajouter une autre variante. Faisons simplement glisser ça vers le bas. Et maintenant, nous allons appeler celui-ci. Vous l'avez deviné, c'est la popularité. Encore une fois, prenez votre temps et assurez-vous que votre orthographe est correcte. Celui-ci, nous allons sélectionner la popularité , cocher la case et débloquer celui-ci Nous allons en faire un autre. Le prix de celui-ci va être trop bas. Et je vais littéralement copier le texte à partir d'ici et le définir comme sélectionné. Nous allons le mettre en gras, cocher cette case, supprimer celui-ci Et nous allons en faire deux de plus, un, deux. Celui-ci avec le prix le plus élevé au plus bas en gras, les notes, et je vais le décocher dans celui-ci, le décocher, l'amener ici Cochez la case, apportez-la ici. Nous avons donc maintenant une variante pour chacune des variantes sélectionnées. Il suffit de renommer les autres, alors assurez-vous de renommer celui-ci de haut en bas Appuyez sur Entrée et sur celui-ci obtenir les notes exactement telles qu'elles sont saisies ici Appuyez sur Entrée, et nous y voilà. Maintenant, notre connexion est perdue car vous ne pouvez pas créer de connexion superposée directement aux composants Vous en avez besoin d'une instance. Nous allons donc copier une instance ici pour notre tri par menu déroulant. Et ce que vous voulez faire, c'est maintenant créer une connexion avec celui-ci à la place. Mais avant cela, vous pouvez également créer de la connectivité à l' intérieur de vos composants . Les prototypes peuvent également être installés à l'intérieur de vos composants. Ainsi, par exemple, ici, nous avons la popularité en cliquant sur popularité, nous voyons que nous avons défini des variables en fonction de la popularité, mais nous voulons également changer, et nous voulons sélectionner la popularité. Et ce que cela fera, c'est que cela changera entre les variantes. Nous demandons donc à Figma de modifier également la superposition en fonction de la Et maintenant, nous allons devoir le faire pour tous les différents. Je vous laisse donc le soin de le faire. Et pour l'instant, je vais juste m'occuper de la popularité et de la pertinence. Nous allons donc maintenant faire celui-ci pour des raisons de pertinence, et nous allons également définir variable Sort by to relevance. Et voilà, pour celui-ci, nous avons maintenant la popularité qui fonctionne, et nous avons la pertinence qui fonctionne. Maintenant, ce que nous voulons faire, c'est lorsque l'utilisateur clique sur Trié par, nous voulons ouvrir la superposition ici Donc, pour le tri en un clic, nous voulons qu'il ouvre cette superposition, qui est l'instance de la liste déroulante de ce composant Nous voulons que ce soit manuel , puis nous choisissons juste en dessous, et nous laisserons tout le reste tel quel. Maintenant, si vous fermez simplement le prototype, ouvrez à nouveau cette page afin que nous puissions tout réinitialiser. Parce que chaque fois que vous exécutez votre prototype, vous réinitialisez vos variables Nous pouvons maintenant définir la popularité. Cela a changé, mais le problème persiste. Comme vous pouvez le constater, si je change cela en popularité, cela changera en popularité. Cela reste sous forme de popularité, puis si je le change en pertinence, cela passe en pertinence, et cela reste pertinent. Et tu peux le faire pour les autres aussi. Et devinez quoi ? Si vous le changez en popularité, ce qui n'est pas celui par défaut, allez ici, revenez. C'est toujours une question de popularité. Voyons ce qui se passe ici dans les coulisses. Ce qui se passe, c'est que vous ouvrez cette instance, et Figma se souvient de la dernière fois que le composant a été fermé N'oubliez donc pas que la dernière fois que vous avez ouvert ce composant, vous étiez en quête de popularité. C'est pourquoi il s'ouvre avec cette variante sélectionnée. Maintenant, si vous passez en mode prototype, si vous passez à l'interaction, il y a cette gestion des états ici. Vous pouvez réellement réinitialiser l'état des composants. Ainsi, chaque fois que vous cliquez pour ouvrir cette superposition, l'état du composant est réinitialisé Donc, si vous le faites, maintenant, si vous l'ouvrez, tout redeviendra pertinent. Techniquement, cela n' est donc pas vraiment lié aux variables, mais nous pouvons faire autre chose pour le rendre beaucoup plus intelligent et le lier aux variables en passant en mode conception et en choisissant celle qui est sélectionnée ici. Choisissez-en une en particulier ou nous pouvons appliquer la variable en triant par. Et donc maintenant, quelle que soit la variable que nous avons sélectionnée, cela changera en fonction de cela. Donc, pour vous montrer très rapidement, si je change la valeur de ceci en popularité, tout à coup, nous avons sélectionné la popularité. Si je sélectionne le prix, du plus bas au plus élevé, avec exactement la même orthographe, celui-ci sera sélectionné. Donc, par défaut, c'est la pertinence. Maintenant, si vous avez une faute de frappe ou si vous tapez quelque chose de manière aléatoire, par défaut, il sélectionnera simplement la première, mais nous voulons nous en tenir à la pertinence, mais vous devez tout de même vous assurer que vous ne réinitialisez pas l'état car quoi qu' il mais vous devez tout de même vous assurer que vous ne réinitialisez pas arrive, il reviendra toujours au premier Alors maintenant, cette liste déroulante est complètement intelligente et elle est liée à nos variables 71. Interaction avec le survol: Jusqu'à présent, dans notre prototype, nous avons utilisé l'interaction au clic pour que le déclencheur soit toujours au clic, ce qui signifie que l'utilisateur clique sur un bouton ou clique sur un élément en particulier et que quelque chose se passe. Il existe d'autres déclencheurs que nous pouvons réellement utiliser. L'une d'entre elles que je souhaite configurer maintenant avec vous est l'interaction avec le survol Ainsi, lorsque vous survolez un bouton, généralement sur un site Web, vous recevez des commentaires qui vous permettent de voir que vous survolez quelque chose Même lorsque je suis figma ici, survolant un certain onglet, vous pouvez voir que l'onglet est surligné d'une couleur différente Vous pouvez donc voir que vous le survolez que vous êtes sur le point de cliquer et qu'il se trouve dans un bouton Vous pouvez donc faire la même chose pour votre bouton ici. que je veux faire, c'est accéder au panneau de conception, configurer une nouvelle variante et appeler cette propriété Hover Par défaut, je vais le définir sur false. Ensuite, je vais continuer et faire glisser ça un peu pour qu'il y ait de la place. Nous allons dupliquer tous les différents boutons que nous avons, afin de créer une interaction avec le pointeur de la souris pour chacun d'entre eux. Et nous allons remplacer Hoverhere par True. Nous avons donc maintenant une nouvelle propriété de survol avec false et true. Celles-ci vont être fausses, donc elles ne seront pas survolées, et celles-ci vont être survolées Et généralement, ce que nous voulons faire, c'est définir une couleur légèrement différente, plus foncée ou plus claire. Donc, pour celui-ci, nous allons en faire un un peu plus sombre, peut-être le 800 principal ou, en fait, un peut-être le 800 principal ou, en fait, peu trop foncé, peut-être le 600 principal. Et puis pour nos boutons blancs ici, nous voulons peut-être utiliser une couleur grise. Donc, juste un peu plus foncé. Et pour le trait également, nous voulons faire un trait gris, donc je vais simplement changer le trait pour qu'il soit plus gris. Ce seront donc les interactions entre le survol. Il ne nous reste plus qu'à créer l'interaction en accédant au panneau du prototype et en créant lien entre ce bouton et celui-ci ici. Passez à Hover et nous voulons choisir une belle animation de dissolution Et au lieu d'enclencher, nous voulons survoler le mur. Lorsque l'utilisateur passe le pointeur de la souris sur le bouton, celui-ci passe à celui-ci ici, et lorsqu'il ne le fait plus, celui-ci passe à celui-ci ici, et lorsqu'il ne le fait plus, il revient automatiquement à celui-ci À bien y réfléchir, la différence est peut-être un peu trop légère , alors je vais juste faire en sorte que ce soit peut-être le 700 primaire . Allons-y. Et maintenant, nous allons faire exactement la même chose, mais entre les différents boutons. Et Figma se souviendra des derniers paramètres que vous avez définis lors de votre interaction Donc, à l'exception de changer celui-ci en vol stationnaire en baleine, même chose entre ceux-ci, en vol stationnaire, et enfin, ceux-ci en Et maintenant, dans l'ensemble du projet, nos boutons interagissent avec le pointeur de la souris, et cette interaction est appliquée partout pour tous les boutons Maintenant, si vous vous souvenez de celui-ci, nous détachons l'instance de celui-ci C'est pourquoi vous n'avez pas d'interaction pour celui-ci. Mais si vous utilisez vos boutons à n'importe quel endroit de votre projet, il y a désormais une interaction avec Hubbard Il est temps de terminer lentement nos connexions. Nous avons donc travaillé un peu sur la page Définir la destination de découverte, puis sur la page des détails de la destination Revenons dans la prochaine conférence pour commencer à créer davantage d' interactions sur notre page détaillée de destination et terminer lentement notre prototype. 72. Faire défiler vers l'interaction: Page de détails de la destination, nous avons déjà créé une connexion pour les destinations B to A. Si vous n'en avez pas créé une par FIC MI, vous pouvez toujours ajouter une nouvelle interaction et, en cliquant sur W, choisissez Action Back. Action Back renvoie l'utilisateur du prototype exactement d'où il vient. Donc, s'ils viennent de cette page et qu'ils cliquent sur la page détaillée de la destination, reviendront sur cette page, proviennent d'une autre page du prototype, reviendront exactement à cette page. Nous l'avons donc déjà créé. Pour ce bouton, voir la disponibilité, nous voulons faire en sorte qu'en cliquant dessus , l'utilisateur accède à la section hébergement, car c'est là que l'utilisateur prend la décision finale de choisir sa chambre puis de réserver Nous pouvons donc créer une interaction ici. Nous allons choisir de cliquer sur Faire défiler deux, et cette section est déjà créée. Nous pouvons modifier le décalage ici dans le défilement, que nous examinerons dans une seconde, puis nous pourrons choisir s' il est instantané ou animé. Je trouve que l'animation est plus belle. Alors maintenant, si je clique sur Afficher la disponibilité, l'utilisateur accède à l' hébergement, ce qui a l'air cool Maintenant, en haut , nous pourrions utiliser un peu plus d'espacement pour que ce soit comme l'été ici Et pour cela, nous pouvons utiliser ce décalage. Si nous définissons un décalage négatif, l'utilisateur défilera légèrement vers le haut Maintenant, si nous recommençons, nous avons un léger rembourrage de 20 pixels, ce qui est beaucoup plus agréable C'est ainsi que vous pouvez créer deux interactions à défilement. 73. Créer des variables de produit: Je voulais que nous créions différents produits en utilisant des modes afin que notre page détaillée de destination soit dynamique. Mais j'ai pensé qu'une meilleure solution serait de créer un écran de réservation dynamique ou une page de réservation qui changera en fonction de la chambre que vous avez sélectionnée. Pour ce faire, nous allons utiliser deux propriétés pour nos variables. Nous en aurons un pour la chambre sélectionnée. Nous allons donc écrire quelle chambre nous avons sélectionnée ou plutôt quel type de chambre, puis nous aurons une propriété pour le prix total. Et ici, vous remarquerez peut-être que j'ai déjà pré-rempli certaines de ces informations J'ai donc changé ces champs pour que le champ rempli soit égal à vrai. Ensuite, j'ai écrit quelques exemples de dates ici, pour qu'elles correspondent à l'écran suivant où nous avons cinq nuits et deux couchages, et tout cela correspond en quelque sorte entre les deux. Alors n'hésitez pas à prendre une seconde pour le faire. Ensuite, nous allons faire en sorte que lorsqu'ils cliquent sur Réserver une chambre, selon la chambre sur laquelle ils ont cliqué, lorsqu'ils accèdent à cette page, le prix ici soit dynamique. Il changera donc en fonction de la chambre que vous sélectionnez, Il changera donc en fonction de la chambre que vous puis modifiez-le à partir de là Pour le moment, nous voulons configurer deux variables différentes dans notre collection générale, mais peu importe où vous les stockez. Nous allons créer une variable de chaîne appelée Selected Room. Et donc celle-ci changera de la chambre que vous avez sélectionnée. Et par défaut, nous laisserons le choix à la chambre double. Il s'agit donc de celui par défaut. Ensuite, nous voulons avoir une autre variable, une variable numérique appelée cette fois le prix total. Et par défaut, nous le définirons 80 fois 5400. C'est donc le prix total de 80$ par nuit multiplié par cinq nuits Maintenant, sur cette page, nous avons cette carte de réservation, qui n'est pas un composant, mais nous voulons en faire un composant en appuyant sur la commande Alt K. Je vais simplement l'apporter à l'extérieur d'ici. J'ai donc retiré le composant principal de là et je l'ai remplacé par une instance de la carte de chambre Ensuite, nous allons créer une variante pour les différentes pièces. Nous allons donc ajouter une variante avec une propriété appelée chambre sélectionnée, et nous en aurons deux ou trois différentes. Et nous les appellerons en conséquence. Nous aurons donc une chambre double. Ensuite, nous aurons une chambre queen size, puis une chambre king size. Et puis ces deux images, je vais maintenir la touche Commande Alt C enfoncée et sélectionner cette image à l'aide de la commande , puis de la Commande Alt V pour la coller dedans. Même chose ici. Maintenant, il suffit de changer le prix de chaque chambre (80, 101, 20), donc celle-ci devrait être de 80$ la nuit Celui-ci devrait être de 100, ce qui est le cas, et celui-ci devrait être de 120. Maintenant, nous en avons une différente pour chaque chambre, et nous voulons la remplacer par une chambre double, exactement ce que nous avons ici. Nous voulons changer la propriété de celle-ci en chambre queen size. Et puis celui-ci pour King Room. Nous y voilà. Maintenant, nous pouvons choisir pièce sélectionnée à partir d' ici et nous allons appliquer la variable sorte que si cette variable change, disons qu'elle passe en chambre double, cela change également ici. Mais je vais juste ordonner à Z de retourner dans la chambre double. La seule autre chose à faire est remplacer cela par la variable de prix total que nous avons créée, et pour celle-ci, nous le ferons lors de la prochaine conférence. 74. Prix total dynamique: Nous voulons que ce prix total soit lié à variable locale que nous venons de créer. Nous utilisons ce bouton ici. Mais nous voulons en fait détacher l'instance afin de pouvoir créer un bouton personnalisé pour nous-mêmes Je vais donc commander D pour dupliquer ce texte. suffit d'avoir le signe dollar dedans, puis je vais commander D une fois de plus, et cette fois, je n' ai que le dollar américain dedans. Et à partir de celui-ci, je vais supprimer le signe du dollar, le dollar américain et l'espace. Nous avons donc ces trois couches de texte individuelles, et nous allons passer à la case A. Maintenant, l'espacement entre ces 500 et USD pourrait être plus important Je vais donc tracer automatiquement signe du dollar et le chiffre, appuyer sur Shift Enter pour sélectionner le signe parent et changer celui-ci en quatre pixels peut-être. Allons-y. Maintenant, ce chiffre de 500, changeons le texte pour qu' il applique la variable du prix total. Ensuite, je vais copier ce bouton et supprimer l'ancien que nous avons. Allons-y. Maintenant, ce bouton de confirmation de réservation est en fait dynamique et change en fonction ce prix total variable. Mais ce que nous devons faire, c' est faire deux choses. Une fois ici, actualisons-les en fonction des prix réels. Donc 80 fois cinq c'est 400, 100 fois cinq, 500, 120 fois cinq c'est 600. Ils ont donc vraiment du sens. Ensuite, lorsque l'utilisateur clique sur chaque bouton, nous mettons à jour cette variable de prix total et choisissons la chambre sélectionnée. Nous allons donc passer au prototype. Nous allons changer cela. Cliquez donc sur Accéder à la page de réservation. C'est une bonne chose. Mais nous allons également ajouter une variable set, et nous allons définir deux variables. L'un d'eux sera le prix total. Réglez ce paramètre sur 400. S'il n'est pas déjà réglé sur 400, définir variable, chambre sélectionnée, nous allons écrire chambre double, puis nous allons créer la même interaction ici en cliquant, puis nous allons définir ces deux variables, chambre sélectionnée par chambre et également définir variable, au total 500. Enfin, pour la chambre king size, nous allons créer cette connexion. Passez de la chambre sélectionnée à une valeur variable à la chambre King. Fixez le prix total à 600, nous l'avons fait. Maintenant, cela devrait changer en fonction de la chambre que nous avons sélectionnée automatiquement, et les prix devraient également changer. Et nous pouvons le voir en action. Si nous revenons ici, cliquez sur Jouer ici ou sur Présenter. Celle-ci ici, nous avons la chambre double, 400 USD, celle-ci ici. Nous avons rencontré un problème parce que la chambre ne changeait pas réellement Cela est dû au fait que lorsque nous avons ajouté ces modifications variables, nous étions déjà arrivés sur la page de réservation Nous n'avons donc rien fait en changeant la chambre sélectionnée. FIGMA complète donc les interactions dans le désordre de haut en bas Nous devons donc placer le Navigate 2 jusqu' en bas et ne le faire qu' une fois qu'il aura fini de changer chambre sélectionnée et le prix total aux valeurs appropriées. Même chose pour ce bouton ici. Nous voulons aller ici, changer la navigation pour qu' elle soit tout en bas, et pour celle-ci ici, changer la navigation jusqu'en bas. Alors maintenant, si nous y retournons, la chambre double, nous avons la chambre double ici, 400 USD. Pour la chambre queen size, nous avons la chambre queen size ici, 500 USD, pour la chambre king size, nous avons la chambre king ici et 600 USD. Et tout cela sans avoir à créer plusieurs écrans de réservation. C'est juste celui qui change dynamiquement en fonction de celui sur lequel vous cliquez. Et maintenant, nous avons un prix total qui est également dynamique. Nous pouvons même copier ce bouton pour qu'il corresponde également à notre autre bouton. Et si vous voulez que celui-ci soit là, nous pouvons simplement changer le rembourrage pour qu'il soit le même que pour les autres. Alors maintenant, lorsque nous allons dans n'importe quelle pièce, les deux boutons affichent le même prix. Donc c'est génial. Et il y a quelque chose de vraiment cool sur cette page Et si nous pouvions également ajouter des extensions au voyage et voir le prix total reflété avec ces extensions ajoutées ? Revenons à la prochaine conférence pour le faire ensemble. 75. Logique conditionnelle et opérations: Maintenant, ces extensions, parfaites pour votre voyage, n' ont aucun prix Nous allons donc simplement y ajouter des prix aléatoires. Donc, pour cette location de voiture, nous en ferons 300, puis pour les activités amusantes, nous en ferons 150, puis une assurance voyage complète, peut-être 100. Voilà. Je vais simplement copier cette section ici également et remplacer autre section que j'ai par les prix ajoutés. Celui-ci est pour l'état rempli. Maintenant, ce que nous voulons faire, c'est que lorsqu' ils cliquent sur Ajouter à votre voyage ici, nous voulons faire en sorte qu'ils ajoutent également ce prix ici au voyage. Nous voulons également y mettre une logique conditionnelle afin que cela ne se reproduise pas plusieurs fois. Cela n'arrive qu'une seule fois, et une fois ajouté, nous ne voulons pas que l'utilisateur l'ajoute plusieurs fois et une seule fois, et c'est tout. Maintenant, une autre chose que je vais vous laisser faire en tant que mission par la suite est qu'une fois que l'utilisateur clique sur Ajouter à votre voyage, vous pouvez créer une autre variante ici dans laquelle cet ajout à votre voyage sera supprimé de votre voyage s'il l'a déjà ajouté. Ensuite, vous pouvez suivre exactement la même logique que nous allons suivre, mais inversement, afin de retirer ce montant du prix total. Ainsi, dans notre variable d'ensemble, nous pouvons également définir la logique. Je vais donc double-cliquer pour cliquer sur ce bouton de voyage ADT, puis sous les prototypes, je vais ajouter une interaction par clic Et pour l'action, nous allons définir la variable, et nous allons trouver le prix total. Et nous allons encore une fois trouver le prix total. Donc, pour le moment, nous fixons le prix total, pour lui-même. Ensuite, nous avons quelques opérations ici afin de pouvoir faire un ajout. Plus 300, et je vais écrire 300 ici. Cela signifie donc que quel que soit le prix total indiqué sur cette page, ajoutez-y 300$. Et comme ce nombre et ce nombre sont liés à cette variable, ils seront automatiquement modifiés pour correspondre à notre prix total. Si nous revenons ici, maintenant je clique, nous avons un total de 500 USD. Si je clique sur votre voyage, cela devient 800 USC aux deux endroits Mais comme vous pouvez le constater, je peux continuer faire et le prix ne cesse d'augmenter, mais ça ne devrait pas être comme ça. Cela ne devrait se produire qu'une seule fois. Et donc pour ce faire, je vais simplement fermer pour réinitialiser mes variables. Et ce que nous allons faire, c'est passer ici, ce que l'on appelle un conditionnel. Maintenant, cette logique conditionnelle nous permettra d'écrire des instructions if, qui sont simplement des moyens de dire, si une certaine chose est vraie, simplement l'exécuter, sinon, de faire autre chose. Ils auront donc du sens dans une seconde. Maintenant, cette condition est écrite ici, et notre prix total fixé n'en tient pas compte. Donc, ce que nous voulons faire, c'est écrire de telle sorte que la condition soit si. Mais pour le moment, rien n' indique que l' utilisateur ait déjà ajouté la location de voiture à son voyage ou non. Pour ce faire, nous voulons configurer trois nouvelles variables sous nos variables locales. Dans cette fenêtre, nous allons faire en sorte qu'ils soient booléens, afin qu'ils puissent être vrais ou faux Et par défaut, nous allons les laisser faux. L'autre sera des activités amusantes, ajoutez-moi. Je vais simplement appeler l'assurance voyage ajoutée et laisser la réponse à « false ». Et maintenant, je veux que lorsque l'utilisateur clique sur cette annonce pour votre voyage, la variable appropriée devienne vraie. Et puis, si c'est déjà vrai, cela ne permet pas à l'utilisateur d' ajouter 300$ supplémentaires au voyage parce qu'il les a déjà ajoutés Nous pouvons donc cliquer à nouveau sur ce bouton , passer au prototype, puis faire en sorte que si je dois écrire la condition, la location de voiture soit ajoutée. Nous considérons donc que le harcèlement que nous venons créer pour la location de voitures est égal à vrai. Ainsi, si la location de voiture ajoutée est vraie, ce qui est faux par défaut, alors si nous agissons, nous n' allons tout simplement rien faire. Nous allons juste le laisser vide pour que rien ne se passe. Mais dans d'autres cas, en d'autres termes, si c'est faux, nous allons faire glisser ce prix total défini vers le prix total plus 300 que nous venons de créer vers le relevé s. Cela signifie donc que si la location de voiture ajoutée est vraie, ne faites rien parce qu'elle est déjà ajoutée, mais si ce n'est pas vrai, pour qu'ils n'aient pas ajouté de location de voiture, alors dans ce cas, ajoutez-la au prix. De plus, nous devons réellement modifier cette variable ajoutée pour la location de voiture. Pour le moment, nous ne le définissons pas comme vrai. Mais ici, lorsque nous fixons le prix total au prix total plus 300, nous devons également ajouter une autre variable définie, et celle-ci définira la location de voiture comme vraie. Nous allons donc fixer le prix total, puis nous allons dire que la location de voiture ajoutée est désormais vraie. Maintenant, si nous l'exécutons une fois de plus depuis la page de détails de la destination. Nous pouvons donc sélectionner la chambre, disons, la chambre queen size. Nous avons notre chambre double, 500 USD au total. Nous allons ajouter une location de voiture, et c'est tout. Si je clique sur un clip, vous voyez que rien ne se passe. Nous n'ajoutons rien à ce prix. C'est déjà ajouté. Voilà. Maintenant, je vais laisser cela comme mission si vous souhaitez en créer une autre variante pour la supprimer de votre voyage afin de pouvoir passer de l'une à l'autre. Et dans ce cas, si vous finissez par le faire, vous pouvez le faire ici, lorsque vous aurez ajouté votre location de voiture égale à true, puisque votre bouton indiquera maintenant « retiré de votre voyage », vous pouvez réellement continuer et faire exactement le contraire ici. Vous allez calculer le prix total par rapport au prix total -300 , puis ajouter la location de voiture aux baisses Vous pouvez donc continuer à alterner entre le moins et le plus. Je vais donc laisser cela comme mission si vous le souhaitez, mais vous n'en avez pas besoin. Et, bien sûr, vous pouvez appliquer exactement la même chose aux deux autres boutons. Et je vous laisse également le soin de le faire si vous le souhaitez. Je vais le faire dans mon projet, puis si vous le souhaitez, vous pouvez toujours trouver le lien vers mon projet pour voir comment je l'ai fait. Nous avons donc maintenant une page de réservation vraiment entièrement dynamique. Ça a l'air super. Nous reviendrons lors de la prochaine conférence pour concevoir une page de réservation confirmée avec des animations sympas. Faisons-le donc ensemble lors de la prochaine conférence. 76. Éléments fixes: Défaut. Dans notre prototype, tout est défilable, ce qui signifie que tout défile comme le fait l'utilisateur Mais il y a certains éléments que nous voulons corriger à l'écran. Par exemple, cette barre de navigation ici, et aussi lorsque vous accédez à cette section ici, nous voulons que cet élément soit fixé le côté où l'utilisateur fait défiler la Fais-le, c'est très simple. Il vous suffit de sélectionner les éléments de votre prototype que vous souhaitez corriger. Et en fait, pour le moment, si je ai sélectionné qu'une seule barre de navigation, je peux effectuer cette modification en une seule barre de navigation, mais Figma a facilité l'utilisation des couches correspondantes sélectionnées Sélectionnez donc toutes les couches correspondantes dans cette section, qui sont également toutes ces barres de navigation sur les autres pages. Nous pouvons donc appliquer cela à toutes les pages, passer au panneau de prototype et changer de position. Au lieu du défilement par défaut avec parent, remplacez-le par fixed. Maintenant, peu importe où l'utilisateur fait défiler la page, cette barre de navigation supérieure le suivra toujours et restera en place Et nous voulons faire exactement la même chose avec cette carte. Nous pouvons donc remplacer celui-ci par fig car il fait partie de ce conteneur parent. Il suffit donc de le découper et de le coller dans le cadre entier. Ainsi, nous pouvons le placer manuellement où bon nous semble. Nous pouvons donc choisir où nous le voulons, par exemple, ici. 48 pixels à partir de la droite, et maintenant nous pouvons choisir fixe. C'est donc toujours réparé. Et ça pourrait paraître mieux s'il est légèrement plus élevé. Nous y voilà. Ça a l'air bien mieux. Ainsi, peu importe où se rend l'utilisateur, cette partie est toujours un jalon, permet de confirmer la réservation où qu'il se C'est ainsi que vous pouvez corriger vos éléments dans le prototype. Maintenant, nous sommes dans la partie amusante où nous allons revenir et apprendre comment nous pouvons réellement appliquer le bouton de confirmation de réservation , puis montrer une jolie petite animation. 77. Animer intelligemment: Nous avons vu trois types d' animations différents. Il y a un instant que nous avons utilisé, nous explorons Dissolve. On nous a expliqué comment utiliser Move in. Maintenant, il y en a un autre appelé Smart Animate, et ce qu'il fait est assez incroyable Il examine deux images et essaie de créer automatiquement une animation entre elles. C'est pourquoi il s'appelle Smart Animate. Pour vous donner un exemple, nous allons créer une page de confirmation indiquant que le voyage est réservé, puis un état indiquant que le voyage est réellement réservé. Pour ce faire, je vais d'abord développer un peu cette section . Ensuite, je vais dupliquer cette page remplie de réservations. Maintenant, j'ai dupliqué cette page, et ce que nous allons faire, c'est faire en sorte que ce côté de l'écran s'élève ou disparaisse, et que l'autre côté se déplace vers le centre Nous allons donc faire du design , puis changer l' apparence à 0 %. Et pareil pour le retour au voyage, car nous n'avons pas besoin de ce 0 %. Ensuite, nous voulons le déplacer au milieu de l'écran. Ensuite, nous allons accéder à cette page remplie, et à partir du bouton de confirmation de réservation, nous traiterons de l' autre page plus tard. Nous allons faire une animation intelligente, et nous allons essayer l'animation douce et 800 millisecondes C'est donc un peu lent. En fait, même 1 seconde, soit 1 000 millisecondes Je vais cliquer sur cette version complète, y jouer, aller ici, appuyer sur Confirmer la réservation, et le tour est joué. L'autre partie s'est estompée et elle s'est déplacée vers le centre. Tout cela s'est produit grâce à Smart Animate, qui a découvert la différence entre ces deux images et les a réunies à l'aide d'une animation intelligente Il ne nous reste plus qu'à changer la carte ici, qu'elle affiche les différents contenus, comme la chambre réellement réservée en ce moment. Ensuite, une fois la réservation effectuée, peut-être après un délai de deux secondes ou quelque chose comme ça, nous pouvons accéder à une autre page qui indique en fait leur confirmation. Je vais donc lui donner un nom. Chargement de la page de réservation. Le chargement est donc en cours, puis nous reviendrons à la prochaine conférence pour concevoir une carte indiquant le voyage réservé Nous pouvons donc l'utiliser comme état de chargement avant de finalement afficher un état confirmé. Et juste pour le garder propre, je vais le déplacer de nouveau ici en tant que page séparée. 78. État de chargement: Nous avons cette page de chargement, mais la carte qu'elle contient ne correspond pas à l'état de chargement. Alors pourquoi ne pas utiliser notre carte ou notre carte de chambre et ne pas créer trois variantes différentes pour chacune d'elles indiquant la chambre réservée ? Ensuite, nous pourrons en avoir un autre pour le moment où il sera enfin réservé. Il nous en faudra donc six de plus. Mais avant cela, commençons par la version de chargement. Alors pourquoi ne pas créer une nouvelle propriété de variante, l' appeler status, et nous laisserons la valeur par défaut par défaut, puis nous dupliquerons celles-ci, et nous appellerons le statut de celles-ci au chargement. Les trois sont donc prêts à être chargés. Ensuite, lors du chargement, nous voulons montrer que nous réservons cette chambre. Peut-être que nous allons simplement réécrire ce texte pour réserver votre chambre double et le remplacer par le texte 200 Nous allons laisser les dates, puis nous n'aurons plus besoin de bouton car l'action est déjà en cours, mais ce serait bien d'avoir un peu comme charger une animation ici. Nous pouvons donc utiliser un outil sympa appelé Lodi Files pour le faire Donc, si vous allez dans les fichiers Lodi, vous pouvez simplement rechercher les fichiers Lodi, et c'est sous plugins et widget Ces fichiers Lodi apparaîtront, et vous devrez peut-être vous connecter pour les utiliser, mais cela nous donne une tonne d'animations que nous pouvons utiliser dans notre espace Si vous allez sur Discover, nous pouvons rechercher le chargement et voir plusieurs types d'animations de chargement. Si vous en voulez un en particulier , peut-être un simple, ce serait cool à montrer, un avion ou quelque chose comme ça. Et il y en a des tonnes de versions gratuites que vous pouvez utiliser, et il y en a aussi beaucoup de versions premium. N'hésitez pas à parcourir et à voir exactement lequel vous aimez. Celui-ci est cool. Je vais simplement utiliser cette animation simple et l'insérer en tant que Jif Et juste une taille moyenne, c'est bien. Il est donc en train d'être inséré, et il est juste là. Mais c'est un peu trop grand, donc je vais le réduire puis placer dans cette mise en page automatique, mais maintenant il est un peu trop grand, alors réduisez-le un peu. Ensuite, nous n'avons pas vraiment besoin des dates car nous les montrerons lorsque la confirmation aura lieu. Ensuite, nous allons écrire la réservation de votre chambre double à Londres K. Et pour le N, nous allons également changer cela pour envoyer également 200 SMS. Et nous n'avons pas besoin de ce Londres, au Royaume-Uni puisque nous l'avons déjà ici maintenant. Et ce texte peut être centré, et nous pouvons également aligner en haut du centre pour que ce plan passe au milieu. Pour les deux, mettons-le de côté. Nous pouvons donc dupliquer celui-ci pour les autres pièces. Nous y voilà. Je vais juste emprunter l'image, les coller et aussi changer le titre ici, chambre queen size, chambre king size, etc., me débarrasser de ces deux-là et changer le statut de celles-ci en chargement, celle-ci en chambre queen size. Et celui-ci pour King Room. Et il ne nous reste plus qu'à passer à celui-ci ici lors du chargement et à changer notre statut en chargement. Voyons maintenant ce qui va se passer. Revenez en arrière, cliquez sur Confirmer la réservation et boum. Notre animation de chargement semble cool. Et après peut-être 5 secondes ou quelque chose comme ça, nous pouvons changer cette carte pour une version confirmée. Faisons-le donc ensemble lors de la prochaine conférence. 79. Finir notre prototype: Enfin, nous voulons boucler la boucle en faisant passer cette page à un statut confirmé, puis nous verrons que le voyage est terminé, ce qui marquera la fin de notre prototype. Développons donc cela un peu plus, puis dupliquons cette page afin de pouvoir modifier ces 12 pages de travail terminées. Ensuite, tout ce que nous voulons c'est qu'au bout d'un certain temps, cette page accède automatiquement à cette page. Et dans Figma, nous pouvons le faire en créant une interaction à partir du cadre lui-même. À ce cadre. Et au lieu de onclick, nous allons choisir After Delay After Delay nous permet d'attendre un certain temps en Syrie. Au lieu que l'utilisateur interagisse réellement avec celui-ci, nous attendons simplement qu'un certain temps s' écoule avant que le chargement ne change pour confirmer. Et nous pouvons faire 3 secondes par 3 000 millisecondes, accéder à cette page, accéder à cette page, et nous pouvons également conserver l'animation intelligente, de sorte que l'animation intelligente passe de l'une à l'autre. Sinon, au lieu d'avoir une page différente, vous pouvez également l'avoir dans vos composants, alors créez-la de telle sorte qu'au bout d'un certain temps, ce composant passe à un autre. Les deux sont donc de bonnes méthodes. Il n'y a pas de bien ou de mal. Vous pouvez faire l'un ou l'autre. Maintenant, je veux faire sorte que le statut confirmé soit similaire à celui-ci, mais qu'il indique simplement que vous avez déjà réservé le voyage. J'ai donc dupliqué celui-ci ici, et au lieu de confirmer, nous allons simplement supprimer le bouton Nous n'avons plus besoin de bouton ici. Ensuite, nous allons ajouter une autre couche de texte ici et écrire la réservation confirmée et peut-être changer ce texte pour indiquer qu'il s'agit de six ans. Je vais utiliser le 800 secondaire. Voilà. Au lieu de cela multiplié par cinq nuits, nous pouvons simplement indiquer le montant total des frais. Nous allons donc dupliquer ce texte, débarrasser ici, en gardant simplement le signe du dollar. Supprimez le signe du dollar ici, puis nous allons modifier ce texte pour appliquer un prix total variable. Et nous allons les disposer automatiquement sans espace entre eux. Alternativement, vous pouvez également aller ici et écrire quelque chose comme payé. Il est donc indiqué que 400$ ont été payés, puis changez l'espacement ici à quatre. Donc ça a l'air mieux. Une autre alternative est facturée au point trois, un, deux, quatre. Disons que c'est la carte pour l'utilisateur. Et nous n'avons pas trop besoin de sommeil en fait. Au lieu de cela, nous pouvons simplement écrire chambre double pour deux ou pour deux adultes. Avec cela chargé de cet État à cet État. Nous allons maintenant modifier ce statut pour terminer. Et tout ce que nous allons faire, c'est le dupliquer deux fois de plus pour les autres pièces. Appliquez la bonne image entre elles, puis écrivez celle-ci comme chambre double, chambre king size. Enfin, assurez-vous qu'il s'agit également d'une chambre double. Et c'est le nom de la variante et la chambre King dans le nom de la variante. Ici, nous ne changeons que le statut pour le terminer. Ensuite, ajoutons-le ici, accédons à nos actifs, ajoutons-le et insérons-le ici. Et nous voulons que ce soit juste dans le cadre. Alors collons-le simplement dans le cadre, pour qu'il ne dépende pas de la mise en page automatique. Et je vais simplement le placer ici quelque part près de la carte, en plein milieu de la page, puis accéder à mon tableau de bord ou quelque chose comme ça. Assurez-vous simplement qu'il est centré, puis ajoutez une interaction. Celui-ci nous ramène donc à la page de découverte de la destination où nous pouvons découvrir d'autres voyages. Maintenant, permettez-moi de vous expliquer encore une fois ce qui se passe. Après 3 secondes, nous allons passer automatiquement de cette page à celle-ci, et tout ce qui change, c'est que cette carte est en train d'être complétée, puis il y a un bouton qui nous ramène à la page de découverte de la destination. Donc, si nous le voyons une fois de plus en action avec mise en page automatique et vraiment sympa, voyons à quoi cela ressemble. Confirmez la réservation, venez ici, 3 secondes passent, et boum, réservez, confirmez la chambre double pour deux adultes. 500€ débités sur cette carte, à partir de cette date jusqu'à cet état. Et vous pouvez voir que ce prix est en fait mis à jour en fonction de ce que nous avions auparavant. Accédez à mon tableau de bord. Magnifique. Exécutons ce prototype depuis le haut dans le Lex 80. Tester notre prototype Web: construit ensemble un superbe prototype, et je pense qu'il est temps de le revoir une fois de plus et de voir comment nous pouvons l'améliorer et nous assurer que tout va bien. Tout d'abord, nous voulons créer des flux, c'est pourquoi nous passons automatiquement d'un flux à l' autre à l'aide du panneau de prototype. Si vous cliquez sur un écran en mode prototype, vous pouvez ajouter un nouveau point de départ de flux. Ajoutons-en un pour notre page d'inscription et appelons ce flux d'inscription. Un nouvel utilisateur passera par ce flux, puis par une page de découverte de destination Nous allons donc appeler un nouveau flux et appeler celui-ci connecté. Flux d'utilisateurs. Maintenant, si à un moment donné, nous exécutons le prototype, nous pouvons passer d'un flux à l' autre. Maintenant, ces flux ont été créés en quelque sorte par accident. Ainsi, si des flux ont déjà été créés accidentellement, il vous suffit de cliquer dessus et de les supprimer. Vous pouvez désormais passer d'un flux d'inscription à un autre, accéder directement à cette page ou accéder directement à un utilisateur connecté. Par défaut, lorsque vous êtes dans le panneau du prototype et que vous cliquez sur le canevas, vous pouvez choisir l'appareil sur lequel vous allez exécuter votre prototype. Vous pouvez donc faire quelque chose comme une erreur MacBook, et cela se poursuivra et présentera votre projet tel qu'il apparaîtrait sur une erreur MacBook Maintenant, bien sûr, il n'a pas l' air très beau parce que nous ne l'avons pas conçu spécifiquement pour une erreur de MacBook Nous l'avons conçu pour cet écran d' une largeur de 14 x 40. Donc, si vous sélectionnez un écran qui ne lui convient pas, il se peut qu'il ne soit pas superbe. Et en général, j'exécute simplement le prototype dans une taille personnalisée, et cette taille personnalisée peut correspondre exactement à celle sur laquelle vous avez déjà configuré votre cadre. Donc dans mon cas, c'est 14 40 x 1080. Et comme vous pouvez le voir, c'est sympa, c'est fixe entre toutes les pages, peu importe le format de page entre vos différents cadres, c' est beau. Exécutons donc le prototype, et vous pourrez le réinitialiser. Ainsi, si, par exemple, vous commencez par un flux d'inscription et que vous vous retrouvez accidentellement quelque part, vous pouvez toujours appuyer sur R pour réinitialiser votre flux et revenir au premier écran de votre flux. Je suis donc de retour sur l'écran d'inscription. Exécutons le prototype une fois à partir d'ici. Je suis un nouvel utilisateur. Je viens juste d'entrer. Je veux saisir mon e-mail et mon mot de passe pour m'inscrire à Wanderis, cliquez sur S'inscrire ici, et je dois saisir code de vérification que je viens de recevoir par e-mail Magnifique. Je vais le saisir, appuyer sur Continuer et je suis dans l'application. Incroyable. Jusqu'ici, nous avions en fait une vraie photo d'une personne ici. Donc, nous ne lançons pas le plugin Avatars une seule fois et nous faisons simplement venir un utilisateur ici Magnifique. Je ne sais pas si c'est Max ou Tom Cruise, mais ça marche. Allons le coller dedans. Maintenant, nous sommes enfermés chez Max Stove. Nous avons une belle photo là-haut. Nous pouvons descendre ici. Nous pouvons ouvrir l'onglet Filtres. Très cool. Appliquez le filtre. Nous pouvons trier en fonction de la popularité ou de la pertinence. Et nous pouvons sélectionner Londres (Royaume-Uni) pour en savoir plus sur ce voyage. Ça a l'air incroyable. Voyons la disponibilité, passez directement ici. Lisez les critiques. Incroyable. Il y a d'autres destinations que je peux visiter. Et supposons que je veuille vraiment me réserver un beau kangourou Ces dates ne semblent pas correctes, alors pourquoi ne pas y remédier rapidement. Nous voulons nous assurer qu'il est indiqué les mêmes dates sur autre page, c'est-à-dire le 060-12-0605 Maintenant, nous devons le répéter ici aussi, là-bas et ici. Alors, devinez quoi ? Vous pouvez en fait accéder à Design et cliquer sur Variance d'édition multiple, et le texte sera détecté à plusieurs endroits, et nous pouvons simplement les modifier très rapidement. Nous y voilà. Revenons maintenant à notre prototype. Ça a l'air bien mieux. Une autre chose qui serait bien, bien que non nécessaire, est de simplement faire correspondre le nombre de personnes cette chambre peut accueillir avec cette page. Assurez-vous donc qu'il peut accueillir respectivement un, deux et trois personnes. Donc celui-ci devrait être un dormeur. Celui-ci devrait être endormi. Maintenant, nous sommes toujours dans l'outil d'édition multiple, alors sortons de là. Nous les éditons donc un par un. Celui-ci peut accueillir deux personnes, et celui-ci trois. Donc ça correspond maintenant. Je peux toujours revenir en arrière et sélectionner une autre chambre, comme une , disons que le prix change. Je peux continuer et renseigner mes informations. Si je souhaite ajouter une location de voiture à mon voyage. Sympa. Je l'ai ajouté ainsi que quelques activités amusantes, et le prix en tient compte. Maintenant, je peux appuyer sur Confirmer la réservation. Malheureusement, ce bouton ne fonctionne pas encore, sorte que cette connexion nous manque . allons sélectionner ces boutons Nous allons sélectionner ces boutons ici en maintenant la touche Maj enfoncée pour pouvoir tous les sélectionner, passer au prototype et faire glisser une connexion depuis l'un d'entre eux, ce qui fait glisser la connexion de tous les boutons vers le chargement de notre page de réservation Ça a l'air bien. Nous pouvons maintenant cliquer sur Confirmer la réservation depuis n'importe quel endroit. Faisons-le à partir d'ici. Et il nous manque quelque chose ici. Alors revenons en arrière. Nous avons donc maintenant le lien ici. Au lieu de dissoudre, nous voulons créer une animation intelligente et une animation douce de 1 000 millisecondes, soit Nous sommes donc de retour ici maintenant. Tu sais quoi ? Nous n'avons peut-être pas besoin d' activités amusantes Nous allons donc les supprimer, appuyer sur Confirmer la réservation à partir d'ici, et boum, votre chambre double à Londres, au Royaume-Uni, sera chargée et votre réservation confirmée. Chambre queen-size pour deux adultes, 800$ charms. Magnifique. Revenons à mon tableau de bord. Voici donc notre prototype sur le Web en tant qu'exercice N'hésitez pas à faire celui pour mobile en utilisant les connexions similaires à celles que nous avons créées sur le Web. Et lors de la prochaine conférence, nous reviendrons pour découvrir comment nous pouvons réellement tester vos prototypes mobiles sur vos propres téléphones. 81. Utiliser l'application Figma sur mobile: Donc, afin de vous montrer comment exécuter votre design Figma sur votre mobile pour voir à quoi ressemblent vos designs ou à quoi ressemble votre prototype, téléchargez l'application Figma sur votre Google Play Store ou Apple App Store Maintenant, si vous n'êtes pas encore connecté, connectez-vous exactement au même compte que celui que vous utilisez sur Figma, et vous pourrez voir vos projets ici Je peux voir mon projet Vanderweis. Je peux l'ouvrir et le parcourir, et vous allez sur les différentes pages, les maquettes ici Ce qui est bien, c'est que si vous accédez à cette fonction de miroir ici, vous pouvez cliquer sur Commencer la mise en miroir et vous montrer exactement la page que vous sur votre application sur votre ordinateur. Je peux rapidement changer celle que je veux consulter, Je peux rapidement changer passer aux différentes pages et voir quelles modifications je souhaite apporter sur mobile ou comment cela fonctionne sur mobile Bien entendu, il ne s'agit pas encore d'un prototype. Ainsi, lorsque vous en faites un prototype, vous pouvez réellement voir à quoi ressemblerait votre application sur un écran mobile. À tout moment, vous pouvez tenir deux doigts , puis continuer et quitter ce mode. Cela met fin à notre section de prototypage. Revenons à la section suivante pour savoir comment travailler ensemble dans Figma et si vous utilisez des trucs et astuces complets 82. Collaborer dans Figma: L'un des avantages et des aspects les plus amusants du travail chez figma est de collaborer avec d'autres membres de figma Au fur et à mesure que votre équipe s'agrandit et que vous travaillez avec de plus en plus de designers, les utilisateurs peuvent participer et apporter des modifications pendant que vous apportez vos propres modifications ou ils peuvent laisser des commentaires, des commentaires et vous pouvez travailler ensemble très facilement Pour collaborer avec d'autres utilisateurs de figma, il vous suffit de partager le projet avec eux. En cliquant sur Partager, vous pouvez choisir les personnes que vous souhaitez inviter à rejoindre votre projet. Vous pouvez saisir leur e-mail ici et les inviter à rejoindre votre projet, ou vous pouvez copier le lien et le partager avec n' importe qui dans un chat ou quel que soit l'endroit où vous communiquez. Maintenant, par défaut, vous pourriez avoir cette qui a accès, pas à qui que ce soit. Assurez-vous donc de cliquer dessus et de passer à n'importe qui. Par défaut, il est parfois configuré uniquement pour les personnes invitées. Ainsi, le public peut y accéder, et seules les personnes que vous invitez avec leurs e-mails pourront y accéder. Maintenant, en l'ayant sur n'importe qui, vous pouvez choisir ce que tout le monde peut faire. Par défaut, il est donc configuré pour afficher. Et en général, c'est ce que vous voulez conserver sauf si vous souhaitez que le public modifie votre fichier. Donc, si vous collaborez publiquement avec le monde entier, vous pouvez bien sûr changer cela. Mais en général, c'est visible. Ensuite, pour plus de sécurité, vous pouvez toujours fournir un mot de passe que les utilisateurs pourront saisir lorsqu'ils essaieront d'accéder à votre fichier. Dans les paramètres avancés, vous pouvez également choisir si les utilisateurs peuvent copier, partager et exporter ce fichier, ou s'il est uniquement destiné à l'affichage , sans exportation, ni duplication ni Il est également facile de copier rapidement le lien vers le prototype. Donc, si vous souhaitez partager rapidement un lien pour le prototype, si vous souhaitez copier un lien vers le mode Dev. Donc, si vous le partagez avec vos développeurs, ce serait une bonne idée de le partager avec eux. Et bien entendu, si vous créez un fichier communautaire, vous pouvez également le partager avec la communauté. Ainsi, vous pouvez ajouter des personnes à votre projet. personnes qui ont été ajoutées à votre projet peuvent être consultées ici. Il s'agit donc d'un autre utilisateur que j'ai, et je peux choisir si cette personne peut voir, modifier ou devenir propriétaire du fichier, ou si je peux simplement la supprimer complètement du fichier. C'est ainsi que vous pouvez gérer les personnes qui consultent vos projets. En ce moment, j'ai un autre compte utilisateur, et je peux voir que lorsqu' un autre utilisateur est dans mon fichier, je peux voir exactement ce qu'il regarde, où se trouve le curseur de sa souris, ce qui est cool. Je peux toujours cliquer ici pour les suivre et voir exactement ce qu'ils font et que regardent-ils ? Donc pour le moment, je ne contrôle pas l'écran. C'est cet autre utilisateur qui regarde les différentes pages. Si quelqu'un fait une présentation ou si vous faites une présentation, ce serait une bonne option à partager avec les gens. Ensuite, vous pouvez toujours cliquer sur Arrêter lorsque vous avez fini de les suivre. Maintenant, l'autre utilisateur peut parcourir vos designs et laisser des commentaires. Et une fois qu'ils ont laissé un commentaire, vous pouvez voir leur commentaire ici. Par défaut, ce bleu signifie que le commentaire est rouge. Donc, si vous cliquez dessus, il deviendra gris comme ça. Mais vous pouvez toujours le faire revenir à Marks red si vous souhaitez y revenir plus tard Bien sûr, vous pouvez réagir, le pouce levé, et répondre à un texto. Et vous pouvez même partager des images ou mentionner des personnes et des animogis C'est ainsi que vous pouvez collaborer et obtenir facilement des commentaires de la part des membres de votre équipe. Une fois ce problème résolu, je peux simplement résoudre le commentaire, et il disparaît, même si je peux toujours y accéder à nouveau dans le panneau des commentaires en allant afficher les commentaires résolus ici, puis en le masquant à nouveau. Ce panneau de commentaires affichera tous les commentaires laissés sur le projet, car j'ai résolu ce commentaire pour le moment. Cela ne s'affiche pas, mais si l'autre utilisateur ou même moi-même, disons, je veux prendre quelques notes pour l'agrandir, afin que vous puissiez vous laisser des notes comme ceci autour du fichier. Et au fur et à mesure que vous ajoutez des commentaires, vous les verrez s'accumuler ici et vous pouvez les résoudre rapidement à partir d'ici ou vous pouvez également les supprimer. Une autre fonctionnalité intéressante qui vous permet d' activer le chat vocal ici dans Figma Une fois que vous aurez cliqué dessus, une petite fenêtre s'ouvrira et vous pourrez discuter avec d'autres personnes dans Figma Revenons maintenant à la prochaine conférence pour en savoir un peu plus sur les bibliothèques et les équipes. 83. Bibliothèques d'équipe: Jusqu'à présent, nous avons rassemblé les composants ici même dans notre section des composants, et cela se trouve uniquement dans ce fichier local. Nous ne l'avons pas vraiment publié ni édité nulle part. Mais lorsque nous commençons à travailler sur un composant et sur plusieurs projets et fichiers différents, Figma vous permet de les publier facilement, de les utiliser dans plusieurs fichiers et de n' apporter des modifications qu'à un seul endroit Ainsi, au lieu d'avoir différents projets avec plusieurs fichiers différents, tous les différents composants qui sont les mêmes composants, vous pouvez simplement les avoir au même endroit. Et généralement, cela se trouve dans un projet distinct ou un fichier de signature distinct, puis vous pouvez accéder à votre bibliothèque, et vous pouvez voir que vous avez dans ce fichier la bibliothèque Wanderwis, et vous pouvez réellement le publier, afin de pouvoir et vous pouvez voir que vous avez dans ce fichier la bibliothèque Wanderwis, et vous pouvez réellement le publier, l'utiliser dans différents Il vous demandera de le déplacer vers un projet s'il figure actuellement dans votre brouillon. Maintenant, lorsque vous serez prêt à publier votre bibliothèque, elle vous montrera tous les éléments qu' elle va ajouter à cette bibliothèque Vous avez donc toutes les variables. Ainsi, même les variables ajoutées lorsque nous voyons toutes les couleurs, les variables de l'appareil seront partagées entre différents fichiers. Tous les styles que nous avons ajoutés pour nos différentes polices, tous les composants ici, vous pouvez même ajouter une description de ce qui a changé. Et puis, une fois que vous aurez cliqué sur Publier, cela prendra une seconde. Et comme vous pouvez le constater, le chargement commence et la publication complète de cette bibliothèque prend un certain temps . Et maintenant, dans un tout nouveau fichier, je peux parcourir les bibliothèques de l'équipe et parcourir les bibliothèques que j'ai publiées, et je peux les utiliser dans ce fichier, ou si j'utilise déjà une autre bibliothèque différente, je peux échanger les bibliothèques ici. Si je l'ajoute à ce fichier, maintenant qu'il est ajouté, je peux utiliser les mêmes composants dans ce tout nouveau fichier qui n'a rien à voir avec Vanderweis Maintenant, si j'écris un texte ici, je peux vraiment choisir les mêmes polices que celles que j'ai importées de ma bibliothèque. Ils proviennent donc tous de ma bibliothèque avec exactement la même police, puis je peux les voir, mais vous ne pouvez plus les voir dans les styles locaux ou les variables locales. Parce qu'ils ont maintenant publié dans cette bibliothèque. Désormais, vous n'avez pas besoin de le faire dans votre projet. Je vais juste vous montrer ce qui se passerait si vous faisiez un changement rapide. Disons que tout d'un coup, nous avons une autre icône Google, et nous l'appelons quelque chose comme Google Logo 2 ou quelque chose comme ça. Nous avons donc maintenant un nouveau composant dans notre bibliothèque ou si nous avons un nouveau bouton ou un nouveau champ de saisie, etc. Dans les ressources de la bibliothèque, il y a donc une modification qui doit encore être publiée, et cette modification correspond exactement au logo Google que nous avons modifié. Vous pouvez donc continuer, puis le publier, et vous pouvez voir, OK, c'est le composant qui a été ajouté, le nouveau logo Google. Vous pouvez écrire une description de la raison pour laquelle ce changement s'est produit. Tu peux le publier. Et ici, dans votre autre fichier, vous avez déjà deux logos Google. Vous pouvez l'utiliser dans votre projet. Maintenant, si j'utilisais déjà un bouton et que quelque chose lui est arrivé, vous pouvez le voir dans les mises à jour. Je vais vous dire que ce bouton a changé, et qu' il s'agit d'un nouveau design. C'est ainsi que vous pouvez utiliser les bibliothèques pour gérer les mêmes composants dans plusieurs projets différents avec votre équipe. 84. Mode développeur: Qu'est-ce que ce mode Dev ici ? Comment l'utilisons-nous et à quoi sert-il ? En guise de raccourci, vous pouvez appuyer sur Shift D pour passer en mode Dev, ce qui est actuellement disponible dans le cadre d'un forfait payant DevMDE vous permet essentiellement de donner à un développeur l'accès à votre fichier d'une manière plus conviviale pour les développeurs Le panneau des propriétés change donc complètement afin de le rendre plus convivial pour quelqu'un qui pourrait transformer ce design en code. En tant que développeur, je peux modifier mes unités pour utiliser des pixels ou de la RAM. Je peux changer de langue. Donc, si j'utilise déjà une autre langue, je peux choisir celle-ci à partir d'ici. Et il existe un tas de plugins que vous pouvez réellement activer pour vous montrer même différents types de codes. Donc, si vous travaillez avec React, nous pouvons voir du code React par opposition au CSS. Maintenant, en tant que développeur, je peux sélectionner n'importe quoi ici, disons, cette carte de chambre, et elle me montre toutes les informations spécifiques qui me tiennent à cœur concernant le rembourrage, le poids, les rayons d'angle Je reçois le code directement ici sous forme de JSX. Je peux voir les textiles, toutes les couleurs utilisées, et le code hexadécimal est facilement disponible Je n'ai donc pas à deviner ou à cliquer sur chaque élément individuel juste pour comprendre comment le concevoir ou comment coder le front-end correspondant à celui-ci Maintenant, si des modifications ont été apportées au fil du temps, je peux les comparer ici pour voir comment cette page a évolué au fil du temps. Quelles sont les nouvelles choses qui se sont produites ? Je peux voir que la dernière modification que nous avons apportée est qu'il y avait le bouton d' inscription avec Google, puis nous l'avons déplacé, nous y avons ajouté un logo, puis nous avons également ajouté ce cadre avec un numéro de téléphone comme celui-ci. En tant que développeur, il est donc très facile d'entrer et de voir ce qui a changé dans votre fichier FigMA Ainsi, vous pouvez expliquer à vos développeurs comment utiliser cette fonctionnalité pour comprendre rapidement ce qui a changé depuis leur dernière visite. Ils peuvent toujours accéder aux ressources ici, ce qui leur permet de les consulter rapidement , comme ce bouton, et vous pouvez toujours l'ouvrir dans Playground pour voir comment les différentes variantes et propriétés modifieront le bouton. À quoi ressemble le survol ? À quoi ressemble cette icône de gauche ? Et s'il n'est pas large et comporte une icône ? Vous pouvez accéder facilement à toutes les propriétés à partir de là. Vous pouvez même changer l' icône ici, et tout cela, comme indiqué, n'hésitez pas à expérimenter car aucune de ces modifications n'est apportée. Tout ce qui se passe, c'est que je joue simplement avec le bouton pour voir quelles sont les différentes variantes de boutons. Je peux faire la même chose avec n'importe quel autre composant qui possède des propriétés. Désormais, lorsque vous êtes en mode Dev en tant que concepteur, vous pouvez ajouter des annotations pour que les développeurs sachent exactement ce que vous pensez Vous pouvez marquer certaines choses. Disons que je tiens à souligner que l'espacement entre ceux-ci doit être exactement de 32 pixels Je peux dessiner ici, faire glisser et montrer exactement à quoi la marge et le rembourrage entre les ressemblent la marge et le rembourrage entre les différents éléments Je peux ajouter des annotations. Et les annotations sont utiles. Je peux les laisser sur un élément spécifique, donc je peux les laisser à titre d'exemple. Je peux l'ajouter ici et dire : il s'agit de la durée totale de leur voyage, non du nombre de nuits. Et ajoutez cette étiquette ici ou une annotation. Et cette annotation n'est visible qu'en mode def. Donc, si je ferme le mode Dev, vous verrez qu'il disparaîtra, mais ce petit cercle me montre qu'il y a des annotations en mode mort, que vous pouvez également voir en double-cliquant dessus Maintenant, en tant que développeur, je peux également ajouter des ressources. Donc, si j'utilise Jira ou une autre plateforme, je peux coller le lien et y accéder facilement. Je peux utiliser de nombreux plugins qui sont maintenant disponibles pour m'aider à transformer cette conception en code, y compris FigMA pour coder, et ils fonctionnent plutôt bien à un certain niveau Bon nombre d'entre eux fonctionnent plutôt bien, mais je vous laisse le soin d' expérimenter si vous êtes développeur. N'oubliez pas que vous pouvez partager l'accès au mode Dev en cliquant sur Partager ici, et pendant que vous êtes en mode Dev, un lien vers le mode Dev sera partagé uniquement. Autre conseil utile : en général, si vous partagez votre fichier Figma en sélectionnant un cadre spécifique puis en cliquant sur Partager, vous autorisez la personne qui ouvre le lien à accéder spécifiquement à ce cadre Ainsi, lorsqu'ils arriveront dans votre fichier, ils se trouveront exactement dans ce cadre. Et cela s'applique à la fois en mode Dev et en mode design. Il en va de même pour les prototypes, d'ailleurs. Si vous êtes en mode prototype, vous souhaitez partager ce prototype avec le développeur, mais en tant qu'utilisateur connecté, il vous suffit d'accéder au flux souhaité, puis de partager le prototype et de copier le lien. Et maintenant, la personne qui ouvre ce prototype ira directement à ce point de départ ou à ce flux. Maintenant, bien sûr, ils peuvent toujours changer de flux ici, mais c'est le flux initial qu'ils verront. 85. Historique des versions: Nous avons donc vu comment, en mode Dev, vous pouvez comparer les modifications entre vos versions précédentes du fichier. Mais qu'en est-il en tant que designer ? Existe-t-il un moyen de revenir rapidement à une version que j'utilisais déjà ? Disons que j'ai apporté quelques modifications. Je ne les aime pas. L'équipe déteste ça. Nous voulons revenir à la version précédente. Tout ce dont vous avez besoin est l'historique des versions, accessible à partir du nom de votre fichier ici avec cette petite flèche et qui affichera l'historique des versions. L'historique des versions affiche toutes les modifications que vous avez apportées au fil du temps. Et comme vous pouvez le constater, il existe six versions d'enregistrement automatique, et je peux cliquer pour voir à cette date précise à quoi ressemble mon fichier. Donc, si je clique, disons, le 16 novembre, tout à coup, je verrai mon fichier complètement différent. Je peux donc aller encore plus loin et voir toutes les modifications que j'ai apportées à mon fichier au fil du temps. Ensuite, si je veux revenir à cette époque, je peux toujours le faire en cliquant dessus et en disant «   Restaurer cette version Ou si vous avez trouvé une version spécifique que vous souhaitez nommer, vous pouvez lui donner un nom spécifique afin de vous souvenir de cette version exacte. Alors j'irai ici. Je vois que des composants ont été publiés ici, et il s'agit de la version actuelle, et je peux simplement la fermer lorsque j'ai fini de consulter l'historique des versions. 86. Renommer les calques avec l'IA: Quelques autres outils d'IA que nous n'avons pas vraiment utilisés dans ce projet. Nous en avons déjà beaucoup utilisé, mais nous pouvons certainement en examiner quatre autres qui sont très utiles. La première consiste à nommer nos couches. Tout au long de ce projet, nous n'avons pas vraiment nommé nos couches. Tout n'est que cadre 31, cadre 44, cadre 40, vous voyez l'idée. Rien n'est vraiment organisé. Si quelqu'un regarde les noms de ces couches, il se peut qu'il n'ait aucune idée de ce qui se passe. Figma dispose donc d'une fonctionnalité d'intelligence artificielle qui nous permet de renommer les couches Tout ce que nous avons à faire est d'exécuter la commande K ou d' ouvrir le panneau d'action et de cliquer sur renommer les couches Cela prendra une seconde, mais comme vous pouvez le constater, quelle que soit la sélection que vous avez sélectionnée, Figma se chargera de leur donner un nom Ce n'est peut-être pas parfait, il a nommé cette grille ici grille de résultats, mais vous voudrez peut-être appeler cette grille de destination ou quelque chose du genre. Mais encore une fois, il s'agit d'une bien meilleure amélioration que ce que nous avions auparavant. Nous avons un conteneur de collections, un titre de collection, une grille de collections. La convention de dénomination qu'il utilise est donc plutôt sympa. Essayez-le sur différents cadres, ou si vous souhaitez renommer les calques de tous vos cadres, demandez-leur de sélectionner certains calques, et vous pourrez sélectionner plusieurs cadres différents si vous le souhaitez, ou simplement appuyer sur Entrée pendant qu'une section est sélectionnée, et vous remarquerez qu'il y a trop de couches, vous devrez peut-être le parcourir ou si vous souhaitez renommer les calques tous vos cadres, demandez-leur de sélectionner certains calques, et vous pourrez sélectionner plusieurs cadres différents si vous le souhaitez, ou simplement appuyer sur Entrée pendant qu'une section est sélectionnée, et vous remarquerez qu'il y a trop de couches, quelques pages à la fois Alors essayez-le. C'est un très bon moyen de mieux organiser votre fichier. 87. Supprimer l'arrière-plan avec l'IA: Cela arrive assez souvent lorsque vous faites glisser une image dans FIGMA. J'ai trouvé cette icône en forme de bouclier que je peux utiliser pour l'assurance voyage ici ou quelque chose comme ça, et je voudrais supprimer l'arrière-plan. Maintenant, vous pouvez le faire dans Photoshop si vous l'avez et d'autres outils. Mais si vous ne l'avez pas, Figma facilite plus que jamais la suppression de l'arrière-plan Et il vous suffit d'utiliser un outil d'IA appelé Supprimer l'arrière-plan. Si vous ne le trouvez pas, recherchez-le simplement dans le champ de recherche ici. Vous appuyez dessus, et il analysera l'image et supprimera l' arrière-plan. C'est aussi simple que ça. 88. Traduire notre application avec l'IA: Imaginez que nous ayons fabriqué ce Vander Weiss pour notre client. Ils l'ont lancé sur le marché. Ça marche vraiment bien, et en fait, ils ont eu un très bon public en France. Comment traduire cette page ou l'ensemble du projet en français ? Avec Figma AI, c'est super simple. Tout ce que vous avez à faire, c' est de simplement copier une page. Imaginons cette page détaillée de destination pour en avoir une version française. Et tout ce que vous avez à faire est d'exécuter l'option de traduction ici et choisir la langue, et il y en a beaucoup. Je vais chercher le français. Et comme vous pouvez le voir de haut en bas, il écrira toute la page en français, y compris les boutons, les étiquettes, les dates et y compris les boutons, les étiquettes, même les critiques. Et voilà. C'est ainsi que vous pouvez traduire à l'aide de l'IA vers une autre langue et préparer votre application pour de multiples marchés. 89. Raccourcis clavier: Je suis arrivé jusqu'ici, tout d'abord, félicitations. Ensuite, vous avez peut-être remarqué à quel point j'utilise les raccourcis clavier tels que la mise en page automatique, Shift A pour ouvrir le mode développeur, le Shift D. Beaucoup de commandes Alt C, Command Alt B pour copier-coller rapidement des styles, etc. Il y en a une tonne et vous ne pouvez pas les mémoriser autant que vous le souhaitez . Je les pratique et je m'y habitue. Figmas a facilité les choses en vous montrant vos raccourcis clavier ici où il est indiqué «   aide » et « ressources Et vous avez cette option de raccourcis clavier ici. Tu peux l'ouvrir. Et il vous montrera tous les différents raccourcis dont vous disposez. Vous pouvez afficher et masquer l'interface utilisateur comme ceci, et elle vous montre la vie lorsque vous les utilisez. Vous pouvez parcourir les différents outils. Et pour tout ce que j'ai utilisé, il sera affiché en bleu Ce sont donc ceux que j'ai utilisés, mais je n'ai pas utilisé, par exemple, l'outil Stylo Cela me dit que si vous utilisez un stylo, il deviendra bleu, ce qui signifie que vous l'avez déverrouillé ou que vous l'avez utilisé Il le rend donc ludique afin que vous puissiez apprendre un nouveau raccourci en voyant ceux que vous n'avez pas encore essayés, afin que vous puissiez les essayer 90. Conclusion: Félicitations pour avoir terminé ce cours. Nous avons parcouru un long chemin et peu de personnes arrivent jusqu'ici. vous félicite donc d'avoir élaboré ce projet et d' appris tous les outils que la FICMA a Et, bien entendu, l' apprentissage ne s'arrête pas là. Pour devenir un grand concepteur de produits, il faut de la pratique. Vous devez continuer à travailler sur un plus grand nombre de projets, les ajouter à vos portefeuilles, afin de vous démarquer et décrocher le client ou l'emploi de vos rêves. Sur ce, je vous remercie encore une fois d'avoir rejoint ce cours et d'avoir participé à ce voyage avec nous. Si vous avez des questions, n' hésitez pas à nous contacter et à laisser un avis si ce cours vous a été utile. Bonne chance et bon design.