Sites Figma : créer et lancer un site web

1. Introduction aux sites Figma introduction: Avec Figma Sites, vous pouvez concevoir et publier l'intégralité de votre site Web depuis Figma Pas de code, pas de développement, pas de pile compliquée. Il vous suffit de glisser-déposer, de concevoir et de passer en ligne. Vous pouvez même configurer des bibliothèques partagées, afin que votre équipe utilise les mêmes blocs, couleurs et styles, tout soit cohérent et conforme à l'image de marque. Dans ce cours, je vais vous guider, des notions de base aux sujets plus avancés, jusqu'au lancement de votre site. Nous partirons de zéro en utilisant les blocs préfabriqués Figma. Parfait pour les débutants. Je vais vous montrer comment connecter des sous-pages, ajouter des éléments personnalisés et donner vie à votre version grâce à des interactions simples des animations fluides N. Vous apprendrez à créer des éléments réutilisables tels que les NAFBA et les futers à l'aide Nous intégrerons des vidéos et des cartes et créerons même des blocs de code personnalisés avec l'IA à l'aide de Figma Make Ensuite, nous publierons soit avec une URL Figma gratuite, soit avec votre propre domaine Je vais vous montrer comment tout configurer pour l'accessibilité et l'optimisation des moteurs de recherche. Votre côté est donc poli et prêt à être mis en ligne. vous voulez aller encore plus loin, je vais vous montrer comment créer votre propre bibliothèque de design avec des couleurs flexibles, typographie et des blocs réactifs Vous pouvez le réutiliser dans tous vos projets. Figma Sites est parfait pour les portfolios, lancements de produits, les pages personnelles ou les petites entreprises Un moyen simple et rapide de mettre votre idée en ligne et de vous concentrer à nouveau sur votre produit. Il s'agit d'un cas développé par moonlearning point IO. 2. Matériel de cours Material: Pour obtenir votre matériel de cours, assurez-vous passer au projet et aux ressources, puis vous verrez un lien intitulé Téléchargements du matériel de cours. Cliquez dessus. Vous accéderez à la page de téléchargement, puis vous verrez la miniature du cours que vous suivez actuellement Cliquez simplement sur Télécharger. Il y a donc deux fichiers à télécharger, dont un qui se termine par un point, c' est-à-dire la page où je vous montre tout ce que je construis pendant le cours Vous pouvez simplement l'inspecter à votre guise et jouer avec. Vous n'en avez pas besoin, mais cela peut être très pratique. Et puis celle d'en haut , c'est dans la dernière partie du cours où nous allons créer notre propre bibliothèque. Il s'agit donc d'une bibliothèque que vous pouvez connecter. Vous pouvez d'ores et déjà les télécharger tous les deux. Donc, pour accéder à ces fichiers, vous ne pouvez pas simplement double-cliquer dessus pour les ouvrir. Vous devez les importer dans FIGMA. Et je vais passer en revue l'interface Figma dans une seconde plus en détail Donc, si vous êtes nouveau dans ce domaine, ne vous inquiétez pas. Nous allons en parler plus en détail. En général, vous devez accéder à votre compte, puis accéder à vos projets, puis sélectionner un projet. Et à l'intérieur, vous devriez trouver une sorte de bouton d'importation. Cela ne cesse de changer un peu en ce moment. Si vous allez sous Créer, vous trouverez votre bouton Importer ici et vous pourrez ensuite simplement importer les fichiers que vous avez téléchargés. Peu importe qu'il s'agisse de fichiers de sites ou de fichiers de conception Figma, vous pouvez tous les stocker dans le même projet 3. BASES : navigateur de fichiers Figma: Le navigateur FigmaFle. Avant d'entrer dans le vif du sujet, examinons d'abord la structure de travail de Figma C'est particulièrement important si vous découvrez Figma pour la première fois. Lorsque vous ouvrez votre compte, cela peut ressembler à ceci. Il peut y avoir de légères différences, par exemple, si vous travaillez dans un navigateur ou si vous travaillez sur une autre version ou une mise à jour, les choses changent parfois légèrement. Cependant, dans le noyau, vous devriez retrouver les mêmes éléments. Donc, ce dont vous avez besoin, c'est de trouver votre équipe, puis au sein de votre équipe, vous avez ce que l' on appelle des projets. Vous pouvez avoir plusieurs équipes dans Figma, il se peut donc que vous soyez invité à rejoindre certaines équipes Vous pouvez avoir des équipes payantes pour vous-même ou des équipes gratuites. Si vous cliquez sur une petite erreur, vous pouvez voir toutes vos équipes et vous pouvez passer de l'une à l'autre. L'équipe dans laquelle je fais actuellement partie est une équipe professionnelle. Pour utiliser les sites et les bibliothèques Figma, par exemple, vous avez besoin d'un compte pro ou supérieur pour le moment Ainsi, au sein de votre équipe, vous voyez les projets, et ce terme prête un peu à confusion. C'est donc un nom qu'ils ont utilisé dès le début de Figma, et ils l'ont conservé Cela signifie donc qu'il s' agit de projets différents. Cependant, vous pourriez vraiment l'utiliser pour absolument tout. Voyez-le comme une couche d' organisation, en fait. Maintenant, vous pouvez voir ici que j'ai deux projets, et ce que nous voulons faire, créer un nouveau pour ce nouveau projet où nous allons créer notre page Sites dès maintenant. l'heure actuelle, sur l'application, nous avons le bouton Little Plus Project ici. Et comme je l'ai dit, cela ne cesse de changer. Pour être honnête, je m'attendrais à quelque chose par ici, mais nous n'avons pas de bouton plus ici. Alors, cliquons ici, cliquez sur Projet, et maintenant vous pouvez simplement donner un nom à votre projet. Je vais donc nommer la démo de Sites. Ensuite, on vous demande si vous voulez inviter d'autres personnes. Nous n'en avons pas besoin pour le moment, alors il suffit de sauter pour pouvoir toujours inviter plus tard. Et maintenant, vous pouvez voir que vous avez de nouveaux projets. Si nous cliquons sur tous les projets, vous pouvez voir qu'il en a créé un troisième, et d'ailleurs, il y a un petit bouton en forme d'étoile. C'est donc très pratique. Vous pouvez voir que si vous lancez un projet, il apparaîtra sur la touche afin que vous puissiez y accéder plus rapidement Double-cliquez soit ici où vous avez commencé, soit directement sur le projet, puis sur l'endroit où vous pouvez créer des fichiers. Ainsi, lorsque vous créez un fichier, nous utilisons le même bouton et vous pouvez voir un changement maintenant. Donc, si nous cliquons sur le signe plus ou sur la petite erreur vers le bas, vous pouvez voir que vous avez le choix entre les fichiers de conception, FIG Jam, etc. Maintenant, nous voulons opter pour un fichier SITS. Cliquez donc dessus et vous allez accéder directement à votre dossier latéral. Il vous sera demandé si vous souhaitez utiliser des modèles. Pour l'instant, cliquez sur Non. Et si vous souhaitez revenir à votre aperçu, cliquez sur le petit bouton Maison. Encore une fois, cela peut sembler un peu différent si vous êtes dans le navigateur, puis que vous revenez sur votre écran principal. Et n'oubliez pas que vous pouvez y accéder en accédant à tous vos projets, trouvant les projets dans lesquels vous vous trouvez, puis directement à l'intérieur, vous verrez le fichier que vous venez de créer. Vous pouvez renommer votre fichier d' ici ou directement d'ici en cliquant dessus avec le bouton droit de et en cliquant sur Renommer 4. PRINCIPES DE BASE : aperçu de l'interface des sites: L'interface de Figma Sites. C'est donc ce que vous voyez plus ou moins lorsque vous ouvrez votre fichier. Maintenant, faisons un petit zoom arrière. Vous pouvez utiliser les touches Commande et moins et Commande et plus pour zoomer ou vous pouvez simplement utiliser les touches de votre souris. Voici donc nos toiles, donc c'est notre maison, et vous commencerez toujours par une maison qui est essentiellement la page d'accueil qui s'ouvrira plus tard Et généralement, ce que cela vous montre sera un ordinateur de bureau et un mobile. Cela pourrait également changer au fil du temps. Et je vous recommande de cliquer sur le petit bouton Plus ici, et d'ajouter également une tablette. Et en fait, si vous appuyez sur Shift et deux, vous aurez une très belle vue complète de tout cela. Avant de nous lancer dans la conception, examinons ce qui se passe ici, comme les options qui s'offrent à nous dans cette vue. Donc, sur le côté gauche, vous avez votre panneau de couches. Cela signifie donc que vous voyez tout ce qui se passe sur la toile. Donc, en ce moment, vous pouvez voir que nous n'avons qu'une seule page Web. Vous pouvez en ajouter d'autres. Nous allons le faire plus tard. Et vous pouvez voir ici la maison, puis les détails. Nous avons donc ces trois points d'arrêt, et vous pouvez également voir ce qu'ils contiennent. Pour le moment, nous n'avons aucun contenu. Ajoutons simplement n' importe quoi au hasard. Donc, par exemple, ajoutons simplement une sorte de cercle ici. Et maintenant, vous pouvez voir que cela a été ajouté à tous. Cela a donc été ajouté à l'ordinateur de bureau, la tablette et disons que sur le mobile, nous pouvions le déplacer individuellement. Et disons que nous ne voulons pas cet élément sur le mobile, nous le voulons simplement sur le bureau et la tablette. Maintenant, si nous appuyons sur Supprimer, vous pouvez voir que cela sera simplement masqué car il s' agit du même écran. Ainsi, les objets seront toujours présents partout, mais vous pouvez les afficher et les masquer à votre guise. Si vous le retirez sur le bureau, il sera retiré à n'importe quel autre point d'arrêt Plus tard, vous trouverez également le bouton de publication ici. Nous allons apprendre en détail comment publier notre page. C'est super facile. Ensuite, ici, vous avez celui-ci où, avec Insert, vous avez des blocs et des bibliothèques. Donc les blocs sont en quelque sorte des éléments préfabriqués par Figma Alors, trouvons un héros. Et si vous le déposez sur l'élément de votre bureau, vous pouvez voir qu'il est déjà configuré pour toutes vos autres tailles d'écran. C'est donc très pratique, et vous pouvez bien sûr le modifier à votre guise. Possède également des bibliothèques. Nous allons apprendre à connecter nos propres bibliothèques. Cela va donc ressembler à ces blocs ici, mais nous allons simplement créer les nôtres, et je vais vous montrer comment créer des points d'arrêt et tout Ensuite, ici, vous avez une recherche, de sorte que vous pouvez rechercher n'importe quel élément. Ensuite, nous avons notre marque. C'est donc vraiment passionnant. Ici, nous pouvons ajouter des éléments de code. Encore une fois, je vais vous montrer tout cela en détail. Alors voilà, vous avez déjà un aperçu. Figma propose un CMS au moment de l'enregistrement C'est toujours en cours, mais je vais l'ajouter dès qu'il sera prêt. Et puis, ici, nous avons quelques réglages. C'est donc ici que vous allez définir le favicon, l'aperçu et les informations sur votre page Encore une fois, nous allons passer en revue tout cela. Donc, par défaut, votre fichier est toujours ouvert. Donc, en bas, vous avez vos outils, donc vous pouvez soit aimer, soit choisir du texte, afin que vous puissiez simplement ajouter le texte ici à votre guise. Et puis dès que vous saisissez un élément, il peut s'agir de texte ou ajoutons simplement notre cercle ici à nouveau. Si vous l'attrapez, vous pouvez voir la propriété sur le côté droit . Ainsi, par exemple, vous pouvez modifier la taille du texte, la police et tout cela, les couleurs et toutes les propriétés de l'élément que vous saisissez ici. Le meilleur moyen est donc de passer par ici. Vous avez donc différentes formes. Vous avez des outils de dessin, vous avez des images, vous avez du texte. Et vous aussi ici, vous pouvez ajouter de nouvelles pages. Encore une fois, nous allons le faire séparément et créer. Nous allons explorer cela dans une vidéo séparée. Sur le panneau de droite, vous n'avez pas que les propriétés. Comme juste à côté des propriétés, vous pouvez également voir les interactions. Donc c'est comme si vous pouviez ajouter des effets Ha, connecter des pages. Et encore une fois, nous allons examiner tout cela plus en détail. 5. PRINCIPES DE BASE : Créez votre première page: Commençons donc par configurer notre première page avec Pigmacytes Le moyen le plus simple de démarrer tout en gardant un contrôle important sur votre mise en page est probablement d'utiliser des blocs. Cliquez sur un petit signe plus, puis vous verrez les blocs Figma prédéfinis Il y a donc des pages prédéfinies, mais nous avons un meilleur contrôle sur la mise en page si nous utilisons les blocs réels. Vous pouvez voir qu'il y a une navigation, des héros, des fonctionnalités. Commençons par une navigation. Prenons n'importe quelle navigation , puis faisons-la glisser. L'important est qu'il vous suffit de la faire glisser sur la version de bureau, puis elle créera automatiquement tous les points d'arrêt pour vous C'est intégré à ces blocs. Transformons-en un petit portfolio Je vais donc passer aux héros, et je vais juste faire glisser le curseur sur une section consacrée aux héros. Ensuite, à partir des fonctionnalités, je vais ajouter du texte, quelque chose comme ça, décrivant mes compétences, peut-être une image comme quelque chose comme ça. Et puis ce que je veux aussi à la fin, c'est une sorte de pied de page, donc ça devrait être la navigation Je vais juste prendre ce pied de page très simple ici. Maintenant, ce que vous pouvez voir, c'est qu'ils ne sont pas dans l'ordre exact. Par exemple, je veux que le pied soit plus bas, donc vous pouvez simplement le faire glisser ou vous pouvez également utiliser vos touches A, puis vous pouvez déplacer ces blocs entiers à votre guise. Et remarquez qu'il me suffit de le changer sur le bureau, puis tous les autres points d'arrêt suivront Maintenant, tout ce que je supprimerais sur mon bureau, par exemple, si je me débarrassais de tout ce bloc cela arriverait à tous les points d'arrêt Mais attention à une petite chose. Disons que je suis là, que j'ai ces boutons, alors passons au secondaire. Disons que nous enlevons le secondaire. Maintenant, vous pouvez voir ici que c'est le bureau et voir ce qui se passe ici. Si j'enlève le secondaire, il disparaîtra complètement. C'est donc ici que vous pouvez vraiment choisir si un élément doit disparaître complètement. Mais vous pourriez aussi dire que je veux juste ce bouton sur ma version de bureau principale. Mais, par exemple, sur ma tablette, pour une raison ou une autre, je ne le veux pas. Si vous appuyiez ensuite sur Supprimer, cela le masquerait simplement. Et c'est très bien, soyez juste conscient de cela. Vous pouvez également masquer une section entière. Supposons donc que vous ne vouliez pas que cette section soit installée sur votre ordinateur . Au final, elle semblerait avoir disparu, mais notez qu'elle sera toujours présente dans votre panneau Calques. Donc, avant de modifier le contenu, voyons à quoi ressemble notre page dans une configuration dynamique, donc à quoi elle ressemblera dans le navigateur. Vous pouvez obtenir un aperçu de différentes manières . Vous pouvez soit cliquer sur ce bouton de lecture ici, soit cliquer sur le bouton de lecture ici. Avec cette petite erreur, vous pouvez choisir si vous voulez un aperçu en ligne ou une page entière suffit donc de cliquer dessus, puis vous obtiendrez votre propre aperçu. Et tu vois, c'est vraiment sympa. Il y a déjà de l'animation ici. Vous pouvez donc le redimensionner, puis vous pouvez voir les différents comportements, et vous pouvez également le parcourir très bien Si nous revenons ici, vous pouvez également utiliser le raccourci et vous l'obtiendrez si vous l'oubliez ici. Alors déplacez-vous dans l'espace. Et si j'appuie sur Shift et sur Espace, cela me devient pratique dans l'aperçu du fichier Il est donc un peu plus agréable de travailler rapidement dessus Lorsque vous utilisez les blocs prédéfinis, Figma est vraiment intelligent Donc, si nous cliquons ici, vous pouvez voir qu'il a déjà configuré ce que l' on appelle la mise en page automatique pour vous. Ils ont donc ajouté une disposition verticale. Vous pouvez voir que nous voyons la page complète. Si jamais vous ne voyez pas la page complète, vous devez vous rendre ici en hauteur et vous assurer qu'elle est réglée sur un câlin. Et tous nos blocs sont déjà configurés pour remplir le conteneur lors du redimensionnement Donc, pour commencer, c'est génial. Tout est donc en place, et nous allons partir de là. Sachez simplement que plus tard, lorsque nous ajouterons des éléments ou que vous modifierez des éléments, nous devrons mieux comprendre cette section de mise en page pour avoir un cette section de mise en page pour avoir un contrôle total sur notre mise en page. Mais pour notre premier exemple simple, tout fonctionne comme nous le souhaitons, nous pouvons donc désormais ajouter notre contenu. Et c'est vraiment très simple. Il vous suffit de sélectionner le contenu sur le bureau, puis de le modifier à votre guise, et cela se reflétera sur tous les points d'arrêt Vous pouvez donc y aller petit à petit, puis ajouter le texte à votre guise. Et par exemple, je veux me débarrasser de ces boutons. En fait, je n'en ai pas besoin, alors débarrassons-nous de ça. Maintenant, si nous voulons ajouter nos images, nous pouvons simplement sélectionner n'importe quel cadre ou n'importe quelle forme, puis via le menu de remplissage, vous cliquez sur le téléchargement depuis un ordinateur, puis vous pouvez sélectionner n'importe quelle image. Il existe une fonction d'importation en masse dans Figma, vous pouvez donc appuyer sur Shift Command et K, puis vous pouvez littéralement sélectionner les images, puis les déposer où vous le souhaitez Le seul problème pour le moment est qu'il y a un petit bogue, donc cela ne les ajoute pas aux points d'arrêt actuels J'espère que cela sera résolu au moment où vous l'utiliserez. Pour l'instant, je vais juste le faire manuellement. Je vais juste accélérer les choses pour toi. Maintenant, si vous souhaitez mélanger un peu les éléments, vous pouvez également le un peu les éléments, faire en sélectionnant simplement l'image, puis avec la touche fléchée votre clavier, vous pouvez les déplacer Encore une fois, vous pouvez constater que cela se reflète partout. Je viens de poursuivre en arrière-plan et j'ai déjà mis à jour tout ce texte ici. Vous pouvez tout à fait le faire à votre guise. Une autre petite chose que vous voudrez peut-être faire, c'est qu'il semble un peu plat tout en blanc. Vous pouvez donc simplement sélectionner certains blocs , puis cliquer sur le bouton de remplissage au cas où vous ne verriez pas de couleur de remplissage, et je vais juste lui donner une légère teinte de gris très clair juste pour un peu de profondeur. Et juste comme ça, si nous appuyons sur notre bouton de lecture, vous pouvez voir que vous avez une première conception Web vraiment belle et fonctionnelle prête en un rien de temps. Et d'ailleurs, toutes ces jolies photos que j'utilise proviennent de lomi.ai. Vous pouvez trouver de nombreuses images gratuites, passer à un plan professionnel et obtenir fantastiques images générées par l'IA pour vos créations. 6. PRINCIPES DE BASE : se connecter aux sous-pages: Alors maintenant, ajoutons une sous-page. Donc, ce que je veux, c'est cliquer sur l'une de ces images de portfolio, puis obtenir plus d'informations sur une page séparée. Donc, ce que je dois faire, c'est ajouter cette page, donc nous cliquons sur ajouter une page Web. Vous pouvez également le faire ici. Et puis vous obtenez ce genre de page. Nous n'avons donc que le bureau, mais nous avons tous besoin des mêmes points d'arrêt Donc, ce que nous allons faire, c'est cliquer sur le bouton Plus, ajouter une tablette et ajouter un mobile pour le contrôle des chutes. Vous pouvez renommer la page. Donc je vais juste appeler ce café. Je vais recommencer avec mes blocs. Et cette fois, ce que je veux, c'est que je veux des fonctionnalités. Je veux donc quelque chose qui soit un peu beaucoup d'images ou quelque chose comme ça. Je vais donc le faire glisser à nouveau, déposer sur le bureau, puis il va simplement le dupliquer sur tous vos points d'arrêt Et je veux aussi une navigation, mais j'ai déjà légèrement modifié le texte de cette navigation ici pour me contacter. Je vais donc utiliser le même, donc je vais juste le copier, et je vais le coller sur le bureau, le coller ici, donc je vais le déplacer avec mes touches A vers le haut, et maintenant j'ai la même navigation sur chacune d'entre elles. Et puis peut-être voulons-nous simplement ajouter, je ne sais pas, un petit texte ou quelque chose comme ça. Donc, ici, vous pouvez voir qu'il y a des champs de texte. Je ne suis pas sûr. Je pense que ce sera juste, afin que nous puissions ajouter quelques informations supplémentaires si nous le voulions. Et, bien sûr, notre terme alimentaire, je vais utiliser le même ici, et cette copie est parfaite en bas. Alors maintenant, avant de passer au contenu, connectons-le tout de suite. Ainsi, dans le panneau de propriétés de droite, vous avez le design et les interactions. Cliquez sur interactions, puis sélectionnez l'élément. Donc, dans ce cas, sur notre photo que vous souhaitez connecter, vous devez cliquer en profondeur jusqu'à ce que vous obteniez vraiment l'image, puis vous voyez apparaître ces petites bulles. N'importe quelle bulle, maintenez-la enfoncée avec votre souris, puis connectez-la. Et vous allez voir qu'il se connecte à partir de tous les différents points d'arrêt. C'est à peu près ça. Maintenant, nous voulons nous reconnecter. Dans ce cas, j' adorerais un fil d'Ariane, mais il n'y en a pas dans mon bloc, donc je vais utiliser ici le logo principal pour me reconnecter C'est donc peut-être quelque chose que je vais régler plus tard. Je vais connecter les deux ici, sélectionner ceci et me reconnecter. OK, alors voyons si cela fonctionne. Je vais donc utiliser mon raccourci Shift et ma barre d'espace. Et maintenant, vous pouvez voir ici que cela fonctionne très bien. Il est toujours réactif et tout fonctionne. Donc, si nous le survolons maintenant, nous pouvons voir que nous pouvons cliquer dessus, puis nous arrivons à notre nouvelle page Et si on clique sur le logo, c'est OK, super. Tout ce que je vais faire maintenant, ajouter mon contenu ici, revenir au design, et je vais en fait accélérer les choses en arrière-plan pour vous. Ajoutons donc simplement le texte. J'ai déjà écrit et j'ai déjà ajouté un petit sous-texte ici également, que je vais copier Encore une fois, n'oubliez pas que nous ne faisons que copier sur le bureau, et qu'il ne nous reste plus qu' à ajouter nos images. Je vais juste accélérer un peu les choses pour vous, ici en arrière-plan. Et voilà, notre page avec les sous-pages est prête. Jouons simplement au tout pour que vous puissiez voir tout ce qui est beau et réactif. Nous passons à notre sous-page, qui est également réactive, et nous pouvons toujours revenir en arrière 7. BASES : Insérez des éléments personnalisés elements: Personnalisons donc un peu notre design et ajoutons-y certains de nos propres éléments. Vous pouvez donc voir ici que j'ai une grande photo, je voudrais ajouter parce que si j' y jette un œil en ce moment et que je regarde les fonctionnalités, je n'ai pas vraiment une seule grande image de héros. Donc ce que je fais, c'est que je vais juste faire traîner ça. Je vais le déposer ici, et vous pouvez voir que je peux l'ajouter, mais il ne se comporte pas comme le font mes blocs prédéfinis. Maintenant, si vous souhaitez ajouter des éléments personnalisés, vous devez en savoir un peu plus sur la mise en page. Je vais juste vous montrer les bases, mais je vous recommande vivement, si vous n' êtes pas familier avec la fonction de mise en page automatique de Figma, passer à l'un de mes autres cours pendant que je passe en revue la mise en page automatique de Figma en profondeur C'est vraiment une fonctionnalité qui vaut vraiment la peine d'être connue. Si vous jouez un peu avec les sites, vous pourriez même vous en tirer avec quelques astuces que je vous montre. Donc, la première chose que nous devons faire, si vous sélectionnez ce bloc, par exemple, vous pouvez voir ici que dans la largeur, il est automatiquement défini ce que l'on appelle remplir le conteneur. Cela signifie donc qu'il va occuper tout l'espace disponible. heure actuelle, si nous sélectionnons notre image, celle-ci n'est pas configurée pour remplir le conteneur. Vous pouvez le voir ici dans la mise en page, si nous le déplaçons vers le bas, vous pouvez voir qu'il a une largeur fixe. Il suffit donc de sauter pour remplir le récipient. Vous pouvez également voir ici que nous avons défini celui-ci, qui signifie que nous conservons le rapport hauteur/largeur de cette image. Maintenant, vous pouvez voir que cela remplit le récipient partout. Alors ne fais pas ça. Revenons simplement à ce que nous avions précédemment. Vous pourriez être tenté de simplement le redimensionner. Mais ce qui s'est passé, c' bien dans votre vue de statistiques, mais si vous en avez un aperçu, vous pouvez voir que cela ne fonctionnera plus avec votre design. Si vous voulez un élément fixe, c'est très bien. Dans le cas contraire, assurez-vous de le configurer pour remplir le récipient. Nous pouvons maintenant le personnaliser un peu plus. Vous pouvez voir ici que nous avons un rayon d'angle de 16, nous pouvons donc simplement récupérer notre image principale, et nous pouvons également le définir sur un rayon d'angle de 16. Maintenant, j'ai ajouté un autre élément. C'est donc une petite miette de pain parce que souvenez-vous c'est un peu étrange que je doive cliquer sur le logo pour revenir en arrière Je veux que cela soit plus évident sur la façon de s'y retrouver. Donc, pour le moment, il s'agit que d'un cadre et j'ai ajouté du texte. Dans Figma, chaque élément que nous avons, et en blocs, ils le configurent pour vous, doit être configuré en mode automatique pour fonctionner Encore une fois, si vous êtes débutant, cela peut être difficile, et je vous recommande vivement de vous familiariser avec la mise en page automatique. Je vais juste vous le montrer rapidement et supposer que vous comprenez un peu la mise en page automatique. Je le sélectionne donc et je vais appuyer sur Shift et A. Cela a donc créé une mise en page automatique, et vous pouvez voir que c'est ce qui se passe ici. Cela va donc dans cette direction. Je peux voir la distance ici. Je vais faire ce multiple de huit, en fait. Je peux ajouter du rembourrage et ainsi de suite. Et maintenant, je vais également créer le cadre extérieur. Je vais sélectionner ceci. Et vous pouvez voir ici qu'il s'agit d'un cadre, donc je peux également le sélectionner ici, ou je peux appuyer sur Shift et A. C'est mon raccourci, puis je crée cette mise en page automatique. Alors maintenant, je vais juste le retirer. C'est donc la taille du cadre de mes parents, 1 280. Et je peux maintenant, par exemple, ajouter un peu de rembourrage en haut et en bas Donc je vais juste avoir celui du bas, 24, celui du haut, je crois, 24 aussi. Et maintenant, sur les côtés, je vais vérifier ce qui se passe ici dans ma navigation. Donc, ma navigation m'indique 64, donc je vais également utiliser 64 pour la gauche et la droite. Si cela vous semble un peu accablant lorsque vous débutez avec Figma, vous pouvez aussi vous en tirer avec des éléments simples comme celui-ci, les démontant et en les mettant dedans Donc, ce que nous allons faire maintenant, nous allons faire glisser ici, et je vais juste le déposer ici. Vous pouvez le voir tomber partout. Encore une fois, voyez comment il ne se redimensionne correctement car ce que nous devons faire, comme pour les autres, nous devons sélectionner l'élément entier, puis le définir dans la largeur pour remplir le conteneur Maintenant, il existe un moyen plus structurel de configurer cela, mais pour le moment, nous le faisons juste un peu manuellement pour une fois. Vous pouvez donc voir ici que nous avons un rembourrage différent. Nous avons donc ici un rembourrage de 32. Je vais donc le faire également pour cet élément ici. Et puis pour le mobile, nous en avons 24, et je vais également configurer cela 24. Alors voilà. Donc ce que je n'aime pas, c'est cette distance énorme ici. En fait, une chose que je veux faire, c'est que je veux aussi ce joli petit fond gris ici. Je vais donc sélectionner ceci, vous pouvez cliquer sur la couleur de remplissage. Je vais faire ce petit choix. Je vais juste choisir la couleur de fond que j'ai ici, pour avoir une meilleure vue d'ensemble C'est beau, mais c' est vraiment grand ici, à cette distance. Je peux donc aussi le modifier ici et je peux simplement aller un peu plus bas et le réduire un peu. Et si je le voulais, je peux aussi l'utiliser et peut-être en ajouter un peu ici pour avoir plus de place si je veux que l'on clique dessus Il ne me reste plus qu'à sélectionner cette maison ici. Je vais revenir à l'interaction, et je vais juste m'assurer que lorsque je clique dessus, cela revient à la page d'accueil. Essayons donc ça. Voici donc notre design. Nous allons à la sous-page. Ça a l'air ravissant. Voyons si notre image est redimensionnée. Oui. Et puis si je clique sur Accueil, je rentre chez moi. 8. LES BASES : ajouter des liens et mailto: Ajoutons quelques liens externes à notre design. Donc, un lien mail et une connexion à nos réseaux sociaux, par exemple. Donc, ce que nous avons ici, c'est que nous avons un bouton, nous voulons donc cliquer sur ce bouton, puis ouvrir un e-mail. Et puis ici, il y a les réseaux sociaux. Faisons donc les deux. Commençons par notre bouton. Je vais donc sélectionner le bouton, et cela fonctionne vraiment pour n'importe quel élément. Et puis, dans le panneau des propriétés situé à droite, vous voyez quelque chose appelé Link. On le voit dans le design mais aussi dans l'interaction. Parfois, ça bouge un peu. Cliquez sur le bouton plus, puis vous obtenez un champ pour ajouter une URL. Vous pouvez également le connecter à n' importe quelle sous-page que vous avez créée, par exemple. Donc, si vous avez une page avec un formulaire que vous voulez que les gens remplissent, pour le moment, ce que nous voulons, c'est simplement qu'ils cliquent dessus et qu'ils ouvrent un e-mail Et vous pouvez le faire avec mailto. Vous n'ajoutez donc pas d'URL. Vous pouvez ajouter une URL, par exemple, si vous avez un blog externe ou un site vers lequel vous souhaitez envoyer des personnes, mais nous allons utiliser Mail 2. Vous pouvez maintenant l'ouvrir dans un nouvel onglet. Dans ce cas, peu importe car il s'ouvrira de toute façon dans un nouveau Essayons donc ça. Ouvrons donc notre aperçu. Cliquez sur notre bouton, et vous verrez qu'il a ouvert mon programme de messagerie et qu'il l'envoie à l'adresse e-mail que j'ai indiquée. Il utilise la même adresse ici parce que c'est mon adresse que j'utilise pour la démo Vous trouverez donc l'adresse de l'utilisateur qui l'envoie dans ce champ. Lorsque vous ajoutez quelque chose comme ça, assurez-vous simplement que votre adresse e-mail figure également dans le Foor ou ailleurs en texte brut. Ainsi, toute personne qui n' a pas de programme de messagerie installé sur son appareil peut toujours trouver vos coordonnées. Petite remarque, vous pouvez également étendre mailto Ainsi, au lieu de simplement ouvrir le courrier, vous pouvez ajouter des informations. Il existe donc différents générateurs. Vous pouvez, par exemple, utiliser mailto linkgenerator.com ou simplement en rechercher Vous ajoutez donc ici l'adresse que vous souhaitez ouvrir, laquelle le courrier doit être envoyé. Vous pouvez ajouter CC, BCC, vous pouvez ajouter un titre. Ainsi, par exemple, vous savez qu'il s'agit d'une demande provenant de votre site Web lorsque quelqu'un l'envoie. Ensuite, vous pouvez ajouter un corps afin d'ajouter un e-mail prédéfini. C'est très pratique, par exemple, vous avez une sorte de demande à laquelle vous voulez que les gens soient remplis, par , quel est votre budget ? Quelle est votre entreprise ? Quelle est votre position ? Ensuite, il vous suffit de cliquer sur Générer, et cela vous donnera le lien mailto ou le code HTML Nous avons besoin du lien mailto lorsque nous travaillons avec des liens. Et puis, au lieu de ce que nous venons d'avoir, je vais simplement changer cela et coller le message que je viens de copier. Voyons maintenant ce qui se passe. Donc, si je clique sur Contacter M, vous pouvez voir que cette page entière a été ajoutée ici. Vous pouvez donc voir que nous avons maintenant un sujet, nous avons un CC, et nous l' avons en tant que corps. Ce n'est donc pas nécessaire, mais cela peut être très pratique. Alors maintenant, connectons également nos réseaux sociaux. Donc, ici, dans le Foota, j'ai mes réseaux sociaux. Je vais donc utiliser LinkedIn comme exemple. Je vais donc sélectionner tout ce cadre ici, donc celui pour le cadre LinkedIn. Ensuite, je vais suivre le même chemin. Je vais cliquer sur Linked, et maintenant je vais ajouter un lien externe, en fait. Ici, je vais juste prendre le lien vers ma page LinkedIn, et je vais juste le coller dans ce champ. Donc maintenant, si nous voulons prévisualiser, et que nous cliquons dessus, cela va ouvrir ma page LinkedIn. 9. LES BASES : composants: Travailler avec des composants. Le composant est donc un sujet important Figma. Et encore une fois, si vous êtes nouveau dans ce domaine, passez à mon cours pour débutants, et j'ai une section où j' explique tout cela en détail. Pour l'instant, je veux juste vous montrer quelques utilisations de base des composants avec les sites. Ainsi, par exemple, nous avons notre bouton, que nous utilisons partout, et nous avons aussi notre navigation, et nous avons notre Puta et nous avons également un certain comportement intégré, nous devrions maintenant copier dans tous ces boutons, partout dans Donc, ce que nous pouvons faire, c'est en faire un composant, et un composant signifie essentiellement que vous avez un moule que vous réutilisez ensuite. Supprimons donc ce bouton d'ici et vous verrez qu'il les a tous copiés. J'en ai juste besoin d'un. Et c'est ce qu' on appelle le bouton principal. Ça a l'air génial. Et je vais simplement en faire un composant en cliquant sur le petit signe du composant ici. Notre composant doit donc toujours se situer en dehors de notre design, et nous allons également l'organiser un peu mieux plus tard. Mais ce que je veux faire maintenant, c'est simplement copier, et toutes ces copies sont appelées instances, et je vais les intégrer à mon design. Je vais donc simplement faire glisser une instance, maintenir la touche Alt et la touche Option enfoncées. D'ailleurs, vous pouvez utiliser le copier-coller. Je trouve juste que c'est un peu plus compliqué. Donc, ce que je fais, je maintiens la touche Option ou Alt enfoncée, puis j'en obtiens une instance. Maintenant, ce que je vais faire, c'est me débarrasser de ce bouton original, et je vais juste le remplacer. Avec le bouton que je viens de créer. Parlons-en simplement. Si vous ne parvenez pas à le positionner correctement ici, utilisez votre panneau de calques. Nous avons un petit groupe de boutons ici, je vais donc l'y ajouter. Permettez-moi de le placer de l'autre côté. Alors maintenant, j'ai le même bouton dans ma navigation que celui que j'ai ici. Donc, si je change quelque chose, par exemple le comportement des liens, ou si nous changeons simplement la couleur de manière aléatoire, vous pouvez voir que cela se reflète partout dans notre design maintenant. Cependant, j'utilise également cette navigation à plusieurs endroits. Donc je l'utilise ici et je l'utilise là-bas. Je peux donc également transformer toute cette navigation avec l'encens imbriqué du bouton en composant Alors sortons-le. Ensuite, je vais faire de même. Je vais en faire un composant. C'est ce qu'on appelle l'en-tête deux. Je vais laisser ça maintenant. Et je peux maintenant créer une instance, puis je peux la remplacer. Alors débarrassons-nous de ça. Et maintenant je suis en train de créer, donc j'en ai déjà créé un. J'utilise cette instance ici, et je vais juste la faire glisser là-dedans. Cependant, ce qui s' est passé maintenant, c'est que cette instance, vous pouvez voir que j'utilise la même instance là-bas, donc je pourrais la modifier manuellement. Je pourrais le remplacer, mais ce ne serait pas correct, car je le remplacerais et je perdrais toutes les informations que j'ai saisies ici Donc ça devient un peu impur. Mais comme vous pouvez le constater, ce qui s'est déjà produit à l'origine , c'est que lorsque je l'ai sorti, vous pouvez voir qu'il m' a donné les trois, ou que je pouvais les créer à la main. Et maintenant, nous pouvons créer ce qu'on appelle un ensemble de composants avec cela. Donnons simplement un peu de couleur d'arrière-plan afin de mieux l'utiliser. On pourra l'enlever plus tard. Vous pouvez donc voir que j'ai déjà les trois versions dont j'ai besoin, ou vous pouvez les configurer à la main, par exemple, avec un fil d'Ariane ou tout ce que vous ajoutez ici Vous pouvez également les configurer manuellement, mais je vais utiliser ce que Figma m'a déjà donné Ensuite, ce que je vais faire, c'est transformer tout cela en un composant. Maintenant, je vais juste changer un peu le nom. Je vais donc simplement les appeler en-tête ou même toutes les appeler navigation. Maintenant, je vais sélectionner les trois, puis vous pouvez voir ici cela vous indique de les combiner en tant que variantes. Cliquez dessus, puis vous verrez un petit contour violet que Figma va faire tourner autour d'eux. Donc, ce que vous voyez maintenant, nous allons simplement en extraire un exemple. Et maintenant, vous pouvez voir que j'ai l'instance, mais elle m'indique qu' il y a une erreur. Il est dit qu'il y a une propriété , mais elles portent toutes le même nom. Donc, ce que nous devons faire , c'est sélectionner chacun d'eux, puis je vais appeler celui-ci un ordinateur de bureau. Et c'est important. Cela fonctionnera très bien si vous utilisez bureau, une tablette et un mobile. Sinon, selon les propriétés Figma Design, vous pouvez les nommer comme vous le souhaitez. Mais ici, nous nous en tenons à cette dénomination. Ensuite, je prends le comprimé. C'est ce que j'appelle une tablette. Et le mobile. Maintenant, il peut également modifier le nom de cette propriété. Tu n'es pas obligée. Cela fonctionnerait de toute façon, mais je pourrais appeler cela un point d' arrêt. OK, super. Et maintenant, si je sélectionne l'instance, vous pouvez voir qu'elle contient désormais toutes ces différentes versions Et ce que je peux faire maintenant, je vais juste m'en débarrasser, et je vais le traîner ici, et il va maintenant savoir où positionner lequel. Tout simplement en ayant utilisé ce nom. C'est quelque chose que Figma a configuré pour vous en arrière-plan Et ce qui est génial, c'est que maintenant je peux simplement utiliser la même navigation ici, donc je vais extraire une instance et l'ajouter ici. Et maintenant, j'ai aussi mon système de navigation. Donc, tout ce que je change maintenant avec le bouton, avec la configuration, disons que nous changeons, par exemple, l'ordre dans lequel nous sélectionnons ce bouton et que nous le déplaçons, vous pouvez voir que cela se reflétera partout, et maintenant uniquement sur le bureau. Je peux donc également prendre des décisions conscientes, comme le rembourrage ou les marges entre ces différents points de rupture Donc, en arrière-plan, tous ces blocs que vous voyez fonctionner par magie sur les points d'arrêt, comme dans Figma, sont tous configurés de cette comme dans Figma, sont tous configurés C'est pourquoi cela fonctionne, ce qui signifie également que nous pouvons configurer notre propre bibliothèque de blocs, et nous le ferons un peu plus tard. Pour l'instant, nous allons simplement laisser nos composants ici. Si vous avez travaillé avec Figma Design, vous savez que vous ne voulez généralement pas que vos composants soient sur la même longueur d'onde que votre design Mais pour le moment, Figma ne nous offre pas vraiment beaucoup d'options dans cette version bêta avec laquelle je travaille Pour ajouter un peu d' organisation, vous pouvez aller ici, et vous trouverez des sections, ou vous pouvez utiliser Shift et S, puis vous pouvez dessiner une section ici et vous pouvez simplement appeler ce composant. Organisez-le également davantage afin d'avoir des éléments de navigation, etc. Mais plus tard, je vais vous montrer une meilleure façon de créer une bibliothèque et de garder tout cela bien organisé. Si vous n'avez que quelques bribes ici et là, alors ce sera très bien pour vous aider à démarrer Et juste pour nous y habituer, faisons de même avec notre navigation. Je vais le retirer. Je vais le placer ici tout de suite. Je vais lui donner un peu de couleur de fond. Encore une fois, vous pourrez l'enlever plus tard si cela vous dérange, afin que nous puissions mieux le voir Faisons-le très rapidement. Il existe également un raccourci pour le faire. Donc, ce que je fais, c'est que je les sélectionne tous. Je pourrais soit créer des composants pour chacun d'eux, puis les combiner, soit utiliser un raccourci. Il y a donc une petite flèche à côté de votre signe de composant, puis vous pouvez voir créer un ensemble de composants à partir d'ici. Vous pouvez donc également l'utiliser. Encore une fois, cela vous indiquera qu'il y a une erreur de dénomination, nous avons donc réglé le problème. Je vais juste accélérer les choses, mais n'oubliez pas qu'il s' agit d'un ordinateur de bureau, d'une tablette et d'un mobile. Et si vous le souhaitez, vous pouvez cliquer sur le nom complet du composant et renommer la propriété, par exemple en Breakpoint Maintenant, nous pouvons simplement extraire une instance, et nous allons l'ajouter à nouveau à notre design. Vous pouvez l'ajouter n'importe où, puis n'oubliez pas que vous pouvez simplement le déplacer avec les touches fléchées. Je suis resté un peu bloqué. Apparemment non. Ajoutons-le à la fin. Et vous pouvez également le copier d'un dessin à un autre. Nous pourrions donc simplement nous en débarrasser ici, puis le recopier . Encore une fois, vous devez vous assurer de le positionner comme dans ce petit endroit où il vous montre cette petite ligne, puis vous pouvez le déplacer plus loin. Et voilà. Alors maintenant, tout ce que vous ajoutez ici, par exemple, vous n'avez qu'à ajouter vos liens de réseaux sociaux une seule fois, ou vous pouvez également modifier ce bouton principal. Alors fais juste attention à une chose. J'ai maintenant un bouton général, et je n'utilise que ce bouton de contact, mais vous pouvez utiliser un bouton pour différentes choses. Dans ce cas, vous devrez peut-être créer un bouton distinct. Donc, lorsque vous avez un bouton pour le bouton de contact, puis juste un bouton général que vous liez dans le document, soyez un peu conscient de cela. 10. Consultez mon cours pour débutants Figma, pour découvrir les bases !: Au cours de ce cours, je souhaite faire référence à de nombreuses fonctionnalités de la FIGMA, telles que les composants, mise en page et les variables Si vous utilisez T FIGMA, tout cela sera très naturel pour vous Cependant, si vous découvrez FIGMA, cela peut être un peu accablant Je n'aborderai pas ces concepts dans ce cours. Cependant, avec votre adhésion à Skillshare, vous pouvez accéder à mon cours pour débutants Figma Dans Projets et ressources, j'ai ajouté un lien direct. Il vous suffit de cliquer dessus. Cela vous mènera directement à ce cours. Le cours dure 4 heures et commence par toutes les notions de base que vous voudrez peut-être suivre ou non. Si vous souhaitez uniquement examiner certains concepts tels que les composants ou les variables, par exemple la différence entre les variables et les styles, ce qui est très important pour la typographie, vous pouvez simplement passer à ces sections et expliquer tout cela depuis le début Également ou pour la mise en page, comme vous pouvez le voir ici. Si vous voulez aller plus loin, vous trouverez d' autres informations dans ce cours, comme comment prototyper avec FIGMA, comment collaborer, et il y a même un projet de cours pour votre portfolio C'est aussi de loin mon cours le plus populaire sur Skillshare, et comme vous pouvez le constater, dans les critiques, les gens en sont très contents Alors participez et apprenez-en plus sur Figma. 11. PRINCIPES DE BASE : navigation fixe: Configurons une barre de navigation fixe. Donc, dans notre design, nous avons un aperçu, nous pouvons voir que nous avons une barre de navigation, mais si nous la faisons défiler, elle disparaît. peut-être ce que vous voulez, mais dans la plupart des cas, vous voulez probablement simplement que cela reste bien réglé au sommet. C'est donc très simple. Il vous suffit de sélectionner votre navigation Il peut s'agir d'une instance d'un composant. Cela peut provenir de blocs. Cela peut être tout ce que vous concevez vous-même. Ça n'a pas d'importance. L'important, c'est de faire en sorte qu'il s'agisse d'un enfant direct de votre cadre principal. se peut donc que vous l'ayez emballé par accident à l'intérieur d'ici. Et cela semble identique, mais cela peut bloquer le fait que vous puissiez le configurer pour le corriger. Assurez-vous donc que cela se trouve à son propre niveau dans votre panneau de couches , puis sélectionnez-le sur le côté droit en position. C'était le cas dans les interactions, maintenant ils l'ont en place, donc cela peut légèrement bouger. Recherchez donc quelque chose appelé position ou défilement, puis choisissez un comportement fixe. Vous allez donc voir ce petit plan ici. Cela signifie donc qu'il a été retiré du comportement standard, donc qu'il ne suit pas le flux est aussi pour cela que votre contenu a été déplacé vers le haut ? Parce que votre contenu se déplace vers le haut lorsqu'il est dit de mise en page automatique. Alors saisissons-le pour le comprendre. C'est donc aligné ici en haut. Donc, ça va juste commencer par le haut. Donc, si vous voulez ce petit écart naturel, par exemple, ici, vous verrez que c'est très nécessaire. Alors jetez un œil. Cela fait donc environ 95 m de hauteur, votre système de navigation. Vous pouvez le constater ici dans vos paramètres de hauteur. Et ce que vous faites, c'est simplement prendre le bureau, pour qu'il l'ajoute à tout. Ensuite, dans vos paramètres de mise en page automatique, vous pouvez voir ici le rembourrage, puis vous pouvez simplement ajouter ce rembourrage à nouveau en Et de cette façon, cela ne fera que pousser vers le bas. Vous pouvez également le modifier un peu à votre guise, et vous pourriez également voir des solutions où cela utilise en fait une sorte de faux arrière-plan ici. Parfois, les gens fabriquent simplement un petit cadre et le mettent dessus. Cela fonctionne également, mais je pense que c'est la solution la plus propre. Jetons donc un coup d'œil et un aperçu. Et si on le fait défiler, ça a l'air parfait. Cependant, si nous redimensionnons, notez une chose : cela revient à sauter Nous devons donc revenir en arrière et corriger un petit détail. Sélectionnez donc l'en-tête car pour le moment, souvenez-vous nous définissons toujours tout cela pour qu'il soit rempli, et tout à coup, nous ne l'avons plus disponible parce que nous remplissons le conteneur. Il s'agit d'un paramètre de mise en page automatique. Et comme nous avons retiré ce paramètre de la mise en page automatique et l'avons défini sur Corrigé, nous n'avons plus de règles de mise en page automatique. Mais ce que nous pouvons utiliser, c'est ici. Nous pouvons utiliser les contraintes. Donc, dans votre panneau de contraintes, recherchez ce que l' on appelle gauche et droite. Cela ne fera donc que le maintenir là. Donc, pour le moment, si nous cliquons à nouveau sur l'aperçu, et que nous le redimensionnons maintenant, vous pouvez voir qu'il garde bien la distance 12. LES BASES : les bases de l'animation: Ajoutons quelques animations à notre design. Donc, en fait, si nous passons à l'aperçu, nous pouvons voir que ces petites vignettes sont déjà animées d'elles-mêmes, et elles sont en quelque sorte intégrées à ce Revenons donc en arrière et voyons comment cela fonctionne réellement. Donc, pour les animations, passez au panneau des interactions. Ainsi, juste à côté du design, vous trouverez des interactions. Nous avons déjà ajouté l'interaction. Cela signifie donc lorsque nous passons d' une page à l'autre ou à un lien externe. Mais si nous sélectionnons des éléments sur notre canevas, nous obtenons plus d'options dans ce menu. Et par exemple, sélectionnons ce groupe de cartes pour lequel nous avons déjà défini quelque chose C'est donc une jolie petite animation circulante. Et vous pouvez voir que cela a été mis place ici dans les interactions. Il y a donc une animation intégrée qui s' appelle Marquee Je pourrais simplement cliquer sur moins pour annuler l'interaction, puis j'ai juste une image statique ici. Pour chaque élément sélectionné, nous pouvons ajouter des interactions. Maintenant, c'est bien de les ajouter quand cela a du sens, mais d'en utiliser moins que plus. S'il vous plaît, n'ayez pas ces objets qui entrent et sortent par avion. C'est toujours une source d'erreur potentielle, et c'est toujours un peu confus. Utilisez-le donc, mais soyez attentif. Mais essayons-le. Nous avons donc Herotex ici, puis nous avons des interactions Cliquons donc sur le signe plus, puis nous verrons notre menu d'interactions prédéfini. Vous pouvez donc voir ici que nous avons des choses comme le comportement de défilement, mais la partie importante que nous aimons pour cela est en fait celle-ci. Donc, par exemple, si je veux que cette typographie apparaisse, alors je pourrais utiliser celle-ci Je pourrais utiliser cette machine à écrire et ensuite régler la vitesse En fait, je vais laisser ça à modéré, et je pourrais le mettre en boucle. En fait, ce n'est pas ce que je veux, et j'ai un petit curseur. Voyons donc à quoi cela ressemble. Et vous pouvez voir que c'est vraiment sympa. Donc, cela va commencer à taper dès que je clique dessus dès que j' ouvre cette page, en gros. Maintenant, ajoutons-en un peu plus ici et comprenons également que cela dépend de la couche que je choisis et de ce qui se passe. Ajoutons donc un autre effet car vous pouvez en fait, même si nous avons déjà l'effet de marque, ajouter Supposons donc que nous voulions un léger effet de survol. Et c'est en fait du grade out. Et c'est parce que j'ai déjà ajouté un effet de survol. Vous pouvez donc avoir plusieurs effets, mais pas deux fois le même effet. Alors laissez-moi l'enlever pour que je puisse vous le montrer à partir de zéro, et je vais juste le sélectionner à nouveau. Maintenant, j'ai un effet de survol, et vous pouvez voir que je l'ai ici et que je peux le configurer Je vais donc régler cela sur une échelle de 1,2. Donc, si je le survole, il va en quelque sorte apparaître un peu Voyons donc comment je l' ai défini sur l'ensemble du groupe de cartes. Alors, jetons un coup d'œil. Je peux donc le faire défiler, et dès que je le survole, il s'agrandit. est peut-être ce que je veux, mais en fait, je voudrais simplement souris sur une carte et l' avoir sur une seule carte Alors assurez-vous de le sortir d'ici. Maintenant, je sélectionne le groupe de cartes. J'appuie sur Enter. Il s'agit d'un moyen rapide d'accéder à tous les éléments de l'enfant. Vous pouvez également les sélectionner un par un. Ensuite, j' ajoute une interaction, et j'ajoute l'effet de survol, et je fais de même maintenant, 1.2 ou peut-être 1.1 pour rester un peu subtil Et jetons-y un coup d'œil maintenant. Donc je joue à ça. Et lorsque je survole, vous pouvez voir que j'obtiens ce joli petit effet de survol fluide Je voudrais peut-être ajuster un peu la distance, donc je peux maintenant simplement la sélectionner , revenir au design. Et puis voilà, j'ai vraiment un écart, donc je pourrais l'élargir un peu et lui donner un peu plus d'espace pour qu'il grandisse Assez sympa et très subtil, il est également révélateur. Supposons donc que nous voulions révéler ces éléments au fur et à mesure que nous défilons. En fait, je vais laisser les choses telles quelles. Ensuite, je vais sélectionner ces deux options. Je vais donc ajouter de l' interaction et de la révélation. Donc, dès qu'il sera visible, vous pouvez également charger la page, mais je vais le faire dès que je ferai défiler la page dessus, il disparaîtra. C'est donc très subtil. Allons y jeter un œil. Donc, si je fais défiler la page, remarquez à quel point cela devient légèrement visible. Donc c'est presque comme ça que vous ne le remarquez presque pas. Permettez-moi de vous donner celui-ci. Et au lieu de s'estomper, disons que celui-ci vient de la gauche, puis que celui-ci vienne de la droite On le voit donc un peu mieux. Et maintenant, regardons-y à nouveau. Utilisons la vue complète. Et vous pouvez voir que cela se glisse très lentement. Vous en avez aussi des fous ici. Sélectionnons-les juste pour le fun. Ici, par exemple, si nous commençons à jouer, puis que nous avons Drager Ball, et que nous disons simplement que vous pouvez faire glisser le pointeur n'importe où, puis vous pouvez voir que nous pouvons simplement faire glisser ces éléments Je ne sais pas si c'est utile, mais jouez simplement avec eux et voyez ce qui pourrait vous être utile. Faites attention aux animations, mais utilisez-les là où elles ont du sens. 13. PRINCIPES DE BASE : intégrer des cartes et des vidéos: Intègre. Donc, une partie de notre quartier. Donc, si vous cliquez sur un bouton plus, vous voyez les blocs, puis ici, à la fin, j'ai actuellement les intégrations. J'enregistre donc ce mot toujours en version bêta, il est donc peut-être un peu limité, et j'espère que vous y verrez une meilleure adaptabilité Mais je veux juste vous montrer ce qui est possible pour le moment. Nous avons donc actuellement trois URL, YouTube et Google Maps. Donc URL, si j'ajoute ceci, vous pouvez voir que c'est vraiment vous seul pouvez ajouter une URL ou un code HGML Donc, ceux qui vous intéressent le plus sont probablement notre site YouTube. Ajoutons donc celui-ci et un autre de Google Maps. Donc, si vous les sélectionnez, vous voyez déjà qu'ils ont moins de propriétés dans le panneau Propriétés. Mais ce que vous pouvez faire, c'est que vous ne pouvez pas simplement les supprimer maintenant, mais vous pouvez les copier. Ensuite, par exemple, vous pouvez sélectionner ce héros et l'ajouter ici. Vous pouvez donc également l'avoir dans n'importe lequel de vos autres blocs ou mises en page en tant qu'élément. Il a donc peut-être moins d'options, mais vous pouvez toujours le positionner relativement bien. Nous voulons maintenant ajouter une vidéo ici et nous voulons ajouter une carte ici. Donc, ce dont nous avons besoin si nous le sélectionnons, vous pouvez le voir ici, nous avons besoin d'une URL ou d'un code HTML. Ainsi, avec YouTube, nous pouvons simplement coller notre URL YouTube ici. Je vais donc juste en prendre une de mes vidéos. C'est donc sur ma chaîne YouTube. Donc, si vous souhaitez utiliser vos propres vidéos, vous devez d'abord les télécharger sur votre propre chaîne. Nous pouvons également simplement intégrer n'importe quelle autre vidéo YouTube. Trouvez le bouton Partager, puis, via le bouton Partager, il vous suffit de copier le lien de partage. Et maintenant, nous allons juste le coller ici. Et vous pouvez voir maintenant que votre miniature est déjà là. Vous pouvez choisir si vous souhaitez la lecture automatique. Vous voulez activer le mode plein écran pour que les utilisateurs puissent l'agrandir. Et pour le moment, je dois dire qu'il y a une petite chose qui, je espère, sera bientôt résolue : la miniature les dimensions ne sont pas correctes pour YouTube Vous pouvez donc décocher le journal des proportions, puis vous pouvez simplement le configurer aux bonnes dimensions Vous pouvez également simplement les obtenir sur YouTube. Si tu veux, je vais juste le faire manuellement pour le moment, donc ça a l'air bien. Ici, nous avons notre carte et vous pouvez voir que nous avons une URL ou HGML que nous pouvons obtenir une URL ou simplement un iframe Je vais faire de même ici. Je vais passer à Google Maps. Je viens donc de chercher Berlin maintenant, et donc tout ce que je fais, c'est trouver le lieu partagé pour Berlin. Vous pouvez également ajouter une rue spécifique avec un numéro de maison, et je vais simplement copier le lien. En fait, non, je veux la carte intégrée. Je clique donc sur Intégrer et vous pouvez voir ici qu'il s'agit d'un iframe, et je vais copier cet Revenons maintenant à notre fichier Figma, et je vais le coller ici Et maintenant, si nous cliquons sur notre aperçu, vous pouvez voir que nous avons cette vidéo, donc nous pouvons la jouer ici. Blogs et tailles***. Et vous pouvez également faire défiler la page vers le bas, puis vous avez votre carte que vous pouvez utiliser comme vous le feriez avec Google Maps. Donc, en fait, dans vos blocs de fonctionnalités, si vous souhaitez utiliser cette carte avec une adresse, vous en trouverez également une ici. Vous pouvez donc simplement remplacer ce bloc. Donc, en gros, vous pouvez simplement utiliser celui-ci, et vous pouvez maintenant simplement ajouter toutes ces informations comme nous le faisions auparavant. En fait, nous devrions toujours l' avoir enregistré pour que vous puissiez voir ici si je le colle maintenant ici, et rejouons-le. Vous voyez donc maintenant si vous faites défiler le bloc, vous pouvez ajouter les informations et vous voyez la carte intégrée. 14. BASES : calques de code avec Figma Make: Figma Make et code les couches. Il y a donc une fonctionnalité intéressante que nous n'avons pas encore explorée, à savoir Figma Make, qui intègre du code à notre page Et nous pouvons littéralement créer ces petits blocs avec du code. Il y a donc actuellement cette version, c'est toujours la version bêta, deux endroits où vous la trouvez. Vous le trouvez donc ici dans la barre, et ici vous pouvez voir qu'il ouvre une page complète. Vous pouvez donc simplement créer votre propre page avec Figma Make Ce que je veux vous montrer, c'est cette partie ici, où nous l'utilisons comme couches de code. Vous pouvez donc voir que c'est dans ce petit champ embed ou make que nous avons actuellement Il suffit donc de cliquer dessus pour ouvrir l'interface. Vous voyez donc cette petite couche de code ici, et nous pouvons l'intégrer à notre design. Et puis nous obtenons cette fenêtre avec la couche de code. Et maintenant c'est assez simple. Tout ce que vous avez à faire, c' est qu'il s'agit d'un outil d'IA, et vous décrivez l'idée que vous souhaitez développer. Cela peut donc vraiment être n'importe quoi, et vous pouvez voir que cela nous donne quelques idées, comme un arrière-plan dégradé, une horloge numérique. Passons donc à l'horloge numérique, puis vous verrez un message vous demandant à quoi elle ressemblerait, comme vous pouvez le voir ici. Maintenant, si nous cliquons sur ce bouton, il va générer ce code pour nous. Cela peut donc prendre un certain temps, alors je vais accélérer les choses en arrière-plan pour vous. Et maintenant, vous pouvez voir que la couche de code a été générée. Notez comment nous pouvons voir notre couche, elle a donc été générée pour chaque point d'arrêt Ça ressemble à ça. Cela nous donne certaines options qui nous permettent de modifier ce type de paramètres les plus importants. Vous pouvez voir votre code ici. Et vous pouvez aussi voir généralement côte à côte, puis vous pouvez discuter ici afin que vous puissiez également lui demander d' apporter des modifications. Mais utilisons-le pour le moment. Donc, si nous le fermons, nous pouvons le voir ici, donc nous pouvons le déplacer et vous pouvez voir, comme d'habitude, nous devrons probablement le configurer, le mettre en page automatique et le positionner un peu. Mais nous avons essentiellement ce petit bloc ici. Donc, si nous appuyons sur la vue Pu, vous pouvez voir qu'il s' agit d'une horloge fonctionnelle, que nous pouvons désormais placer comme n'importe quel autre élément ici et intégrer à notre design. Donc, ici, vous pouvez voir que nous pouvons également modifier le code, afin que vous puissiez revenir ici. Et puis ce que j'aime vraiment, c'est cette petite partie, qui consiste à pointer et à modifier. Ainsi, par exemple, je peux l'utiliser, et maintenant je peux pointer du doigt différents domaines de mon design. Je peux donc le sélectionner pour pouvoir changer la couleur ici. Il s'agit donc de toutes sortes de choses de design, mais vous pouvez également discuter ou discuter avec votre couche de code, puis lui dire quoi faire. Essayons donc ceci, et essayons si cela peut nous donner une version AM et PM au lieu de ce type d'horloge. Et en général, il s'agit d'un outil d'intelligence artificielle, vous ne savez donc jamais vraiment ce qui va se passer, vous devrez donc peut-être jouer un peu. Encore une fois, cela va prendre un peu de temps en arrière-plan. Je vais accélérer les choses pour toi. Vous pouvez donc voir que cela a changé la donne pour nous. Essayons maintenant autre chose. La page que nous sommes en train de créer est donc destinée aux freelances. Donc, ce que je veux faire, c'est avoir ce calculateur pour pouvoir y ajouter mes prix, puis les gens pourront calculer une sorte de première estimation du montant mes services , puis me contacter. Donc, en ce moment, ce que j'aime toujours faire, c'est simplement décrire dans JGBT ou Claude ce que j'aime , puis je leur demande de rédiger une invite appropriée pour Cela rend donc votre message un peu plus clair. Je lui ai donc donné une vague idée. Je veux un calculateur d'estimation pour le site Web de vos concepteurs. Les clients potentiels peuvent donc choisir entre un prix standard de base et un prix supérieur. Ensuite, je veux quelque chose pour le logo, la typographie, l'image créée et une page de destination, puis ils voient le total J'ai donc voulu créer une invite, puis utilisons simplement cette invite. Donc, d'habitude, je travaillais un peu et je personnalisais le premier, mais je vais juste le copier comme ça, et maintenant nous passons à la création et nous le collons ici. Tu n'es pas obligée de faire ça. Vous pouvez également simplement l'écrire ici et jouer avec. Mais je trouve juste que cela me donne de meilleurs résultats. Mais encore une fois, il n'est absolument pas nécessaire de prédimensionner l'invite si vous préférez simplement l' écrire vous-même. Encore une fois, je vais accélérer les choses en arrière-plan pour vous. Cela a l'air plutôt sympa, alors fermons-le et jetons un coup d'œil sur notre page appropriée. Comme d'habitude, je vais configurer la mise en page automatique. Appuyez sur Entrée. Vous pouvez vraiment l'utiliser comme n'importe quelle autre couche, alors remplissez le récipient et voyons-le maintenant en action. Nous pouvons donc voir maintenant que nous pouvons sélectionner n'importe quel autre prix. Très charmant. Et puis ici, en fait, nous devons revenir en arrière parce que nous devons régler celui-ci, n' oubliez pas, pour qu'il intègre le contenu, afin que nous puissions voir le texte complet, il ne fonctionne pas. Il suffit donc de configurer la couche de création pour qu'elle intègre également le contenu. Et maintenant tu devrais pouvoir le voir. Alors revenons en arrière. Maintenant, nous pouvons faire défiler la page vers le bas. Et puis vous pouvez voir que lorsque je change cela, mon contenu sera automatiquement mis à jour. C'est vraiment très beau. Et c'est, bien sûr, totalement réactif tout de suite. Maintenant tu peux toujours revenir en arrière. Vous pouvez sélectionner la couche de code, puis revenir dans Modifier, puis apporter des modifications ici. 15. PUBLIEZ : Publiez votre site site: Publions donc votre site, et c'est vraiment très simple. Donc, une fois que vous êtes satisfait, cliquez simplement sur Publier. Et puis ce qui va se passer , c'est que Figma va vous donner un nombre ou un mot aléatoire, puis c'est point figma point SIDE, et c'est une URL gratuite que vous pouvez utiliser pour Vous pourrez ultérieurement connecter votre domaine personnalisé, mais pour le moment, oui, utilisez celui-ci. Il vous suffit ensuite de cliquer sur Publier. Et une fois que vous avez vu la mise à jour, vous pouvez simplement cliquer sur ce lien, puis vous verrez votre véritable site Web en ligne. Il est entièrement réactif, et vous pouvez toujours revenir en arrière, simplement mettre à jour et le transférer vers votre site de vie. 16. PUBLIÉ : SEO, favicon et partage sur les réseaux sociaux: Notre page semble donc correcte, mais il y a quelques informations supplémentaires que nous devrions ajouter, donc quelques informations sur la page. Peut-être que nous voulons un petit favicon, ça se trouve dans l'en-tête Donc, cliquons ici sur nos paramètres, puis nous pouvons avoir les paramètres généraux, et nous avons les paramètres du domaine. Ici, vous pouvez connecter votre domaine et le contrôler davantage si vous le faites. Mais en général, vous pouvez également ajouter des informations sur la page. Vous avez un titre, donc ce qui est écrit dans un onglet. Ce n'est pas le meilleur titre ici, mais nous allons nous en tenir à celui-ci. Et puis nous avons une description du site. Donc, par exemple, si vous le copiez quelque part, ils le verront ou les moteurs de recherche. Vous voudriez donc ajouter une description ici. Voici , par exemple, mon portfolio. Donc, ce que je vais faire, c'est prendre cette première partie ici et je vais l'ajouter. En fait, la bonne idée est que vous utilisiez Claude ou ChachiBT pour le demander, vous aider à rédiger ces descriptions et à remplir tout cela, puis vous pourrez lui dire d' utiliser l'optimisation pour les moteurs de recherche Langue. Dans mon cas, c'est de l'anglais, donc je vais laisser ça à Google Analytics. C'est vraiment pratique. Donc, si vous voulez voir qui clique, qui visite votre page, vous ne voyez pas quelle personne, mais vous voir la démographie de quel pays, afin d'avoir une vue d'ensemble, puis vous pouvez créer un compte d'analyse, et ils vous fourniront cette source de code. Vous pouvez simplement le copier dedans et il va en faire le suivi. Ensuite, vous pouvez exclure le site Web des résultats des moteurs de recherche. Je vais le garder comme ça car il ne s'agit que d'une page de démonstration. Mais évidemment, s'il s' agit de votre page, vous voulez absolument que vous ne cliquiez pas dessus, donc vous voulez vous assurer que moteurs de recherche peuvent vous trouver Ici, nous avons un favicon, petite chose dans la tête et cette petite icône que vous voyez, puis une image de partage social Configurons donc ces deux-là. Donc favicon, 48 par 48 et partage social 1 200 par 630. Alors sautons par-dessus et nous pouvons le faire ici même. Configurons donc notre favicon. C'était donc 48 sur 48. Nous avons donc besoin d'un cadre. Vous pouvez soit cliquer ici et simplement obtenir le cadre, soit appuyer sur F, puis dessinons un cadre et vérifions-nous que les dimensions sont 48 x 48. Ce sera donc assez petit. Donc, oui, le favicon est ce petit en-tête que vous aurez plus tard sur votre site Web Il y a, genre, cette petite icône. Je vais donc créer quelque chose de manière aléatoire avec les couleurs de ma page. Je vais donc accélérer les choses pour vous. Donc, oui, c'est juste une idée aléatoire que j'ai eue, qui, je pense, correspond bien à mon design. Je vais appeler ce fabricon. Vous pouvez donc soit exporter le favicon puis l' importer à nouveau, soit cela est beaucoup plus facile Il suffit de sauter ici , puis d'accéder aux paramètres de votre favicon. Et ici, vous pouvez le voir, nous l'appelons fabricon et vous pouvez simplement le sélectionner, puis cela apparaîtra Alors laisse-moi te montrer. Publions à nouveau. Et visitons notre page. Et maintenant, vous pouvez voir ici que notre petit favicon apparaît. En fait, j'aime tellement mon favicon que je vais simplement en faire un logo sans arrière-plan pour qu'il ne soit pas aussi visible Déplaçons donc ça ici. Je vais en fait en faire un composant. Et maintenant, je vais simplement remplacer tout cela par mon nouveau logo. Petit conseil, pour le faire dans l'ensemble de votre groupe, vous pouvez le sélectionner, puis ici, vous avez une modification multiple, afin de vous débarrasser de tout cela. Ensuite, nous pouvons également sélectionner celui-ci. Et maintenant, nous sortons une instance et nous l'ajoutons ici, et nous devons le faire sur chacune d' elles séparément. Et je vais faire de même pour mon Futter. Je vais donc m'en débarrasser. Je vais aussi me débarrasser de celui-ci. Et je vais juste ajouter ceci ici. OK, super. Vous pouvez donc y jeter un œil car ce sont des composants, cela a ajouté mon logo partout. Maintenant que nous avons la page que nous voulons voir, configurons notre image d'aperçu. Alors laissez-moi sauter ici et vous verrez que c'est 1 200 630, donc je vais le faire. Je vais donc appuyer sur F et dessiner un cadre de cette taille. Donc 1 200. Fois 630. Ensuite, vous pouvez ajouter tout ce que vous voulez comme aperçu. Vous pouvez tout à fait le personnaliser à votre guise. Je vais juste suivre la voie la plus simple, et je vais juste en copier un aperçu ici. Il existe donc une petite astuce pour le copier afin ne pas avoir à l'exporter et à l'importer Appuyez sur Shift Command et C, et cela devrait copier un fichier PNG pour vous. Vous allez donc voir une petite alerte, copiée au format PNG, puis sélectionner le cadre dans lequel vous souhaitez le coller et appuyer simplement sur Commande et V. Donc, juste un collage normal Et maintenant tu vas avoir une photo de tout ce que tu as trouvé ici. Oh, le petit problème que j'ai eu, c'est que je l'ai saisi , comme tout ça, donc je ne veux pas ça. Donc, ce que je vais faire, c'est simplement prendre une capture d'écran pour le moment. Alors laisse-moi le récupérer sur mon ordinateur. Je vais juste le coller ici. Et puis voici ma petite image d'aperçu. Et encore une fois, vous pouvez le personnaliser complètement à votre guise, donc je vais juste lui donner un fond sombre. Et je vais appeler ça un aperçu. Retournez à vos paramètres. Et puis, généralement, vous pouvez simplement le récupérer d'ici. Et donc maintenant, partout où vous allez partager ceci sur vos réseaux sociaux, cela va apparaître Vous pouvez également ajouter du code supplémentaire. Donc, si vous connaissez le CSS ici, vous avez la possibilité d' ajouter un corps, un en-tête et un code d'en-tête personnalisés , tout ce que vous souhaitez ajouter ici. Mais ce sont les paramètres de base dont vous aurez besoin. 17. PUBLIÉ : connecter un domaine personnalisé: Connectons donc le domaine personnalisé. Vous devez donc d' abord acheter ce domaine auprès de n'importe quel fournisseur. J'ai acheté le mien avec Go Dei, donc je vais vous montrer ceci, mais vous pouvez également utiliser n'importe quel autre fournisseur. Donc, infigmasites, allez publier, puis vous pouvez connecter Vous allez être dans les paramètres. Vous le verrez également ici et cliquez à nouveau sur Connecter le domaine, puis saisissez simplement le domaine que vous avez acheté auprès de votre fournisseur préféré. Une fois cela fait, cliquez sur Safe. En bas, vous voyez maintenant ce que l'on appelle les paramètres DNS. Nous devons donc les ajouter auprès de notre fournisseur. Cela semble un peu délicat, mais ce n'est en fait pas si difficile. Comptez l'endroit où vous accédez à votre domaine, puis vous devez rechercher les paramètres DNS. Si vous avez du mal à le localiser, vous pouvez généralement vous adresser à un contact du service client . Vous voyez donc ici vos enregistrements DNS, et nous allons simplement ajouter ceux qui ont été communiqués. Vous n'avez donc pas besoin d'en comprendre grand-chose. Il suffit d'ajouter un enregistrement CName et un enregistrement texte. Et vous pouvez simplement copier les informations directement depuis FIGMA. Alors maintenant, nous allons ici et vous allez trouver un bouton où vous pouvez ajouter un enregistrement. Dans le menu déroulant, vous avez le type d'enregistrement que vous pouvez ajouter. Nous allons donc opter pour le Cname, puis nous allons simplement coller les informations que Figma nous a données, puis les enregistrer et elles seront ajoutées Et maintenant, vous pouvez voir que nous recevons en fait une erreur indiquant que cela existe déjà. Nous devons donc vérifier ici, puis nous pouvons voir que nous en avons déjà un nom C. Et donc, en gros , un nom C indique simplement une direction. Nous allons donc remplacer les blocs lunaires que nous avions ici par défaut par les nouveaux. Ensuite, il vous sera peut-être demandé de vérifier que vous êtes le véritable propriétaire. Ensuite, nous allons simplement ajouter notre enregistrement de texte. Dans ce cas, il s'agit simplement d'une vérification de propriété. Vous pouvez donc voir qu'il y en a déjà. Ajoutons donc le nôtre dans tous les cas, puis nous pourrons traiter les erreurs plus tard. Je suppose donc que vous ne comprenez pas grand-chose aux enregistrements DNS. Dans ce cas, il suffit de le copier dedans, puis nous allons vérifier ce qui se passe. Copions donc celui-ci également. Ensuite, on va probablement nous demander vérifier à nouveau si nous le disons. Alors allez-y et vérifiez simplement que vous êtes le propriétaire. Et lorsque nous revenons à Figma, nous pouvons voir que le CNM fonctionne, mais il semble y avoir un problème avec les enregistrements DNS Cela peut être un retard. Essayons encore une fois. Mais au lieu d'attendre, je vais vérifier, et ce que j'aime faire, c'est utiliser un LLM pour cela Je n'ai donc aucune idée de ces records. Je vais juste prendre une capture d'écran de ceux qui montrent une erreur, et je vais également prendre une capture d'écran de ce que Figma me propose, puis je vais simplement la déposer dans l'ALM de votre choix J'utilise le CGPT mais vous pouvez également utiliser n'importe quel autre ALM. Je vais donc simplement déposer ces images dans mon ALM dans mon cas, JGBT Ensuite, je vais juste le demander comme je le ferais avec n'importe quel service client ou développeur. Je vous dis donc que j'essaie de connecter sites Pigma à mon domaine Go Daddy, et que vous ajouterez le fournisseur que vous utilisez Ensuite, je vous demande de bien vouloir y jeter un œil, car je suis un peu perplexe à l'idée de ne pas connaître les enregistrements DNS, c'est si j'ai réellement besoin de ces deux enregistrements. Dois-je supprimer quoi que ce soit ? Et je vais juste lui demander de m'aider un peu à ce sujet. Et ce genre de choses fonctionne très bien parce que ce sont littéralement des informations techniques. C'est donc me dire le nom C, comme nous l'avons déjà vu figma, qui fonctionne bien Et puis il me dit qu'il y a un problème. Cela me montre donc qu'il est réglé sur une heure. Donc c'est généralement bien. Je suis peut-être un peu patient, et qu'est-ce que cela me dit d'autre  ? Vous n'avez pas besoin de supprimer l'un ou l'autre, donc les deux sont bons, puis d'attendre un peu et de les actualiser. Je ne suis donc pas très patient. Donc, la seule chose que je vais changer, parce que tout le reste semble aller bien. Je vais juste passer à une demi-heure, attendre un peu, puis actualiser. Et mon patient a été récompensé. Maintenant, je peux voir que tout est connecté Nous pouvons donc cliquer sur le lien lui-même, puis nous pouvons voir notre site de travail complet. Donc oui, tout est assez simple. Et si vous rencontrez des problèmes, utilisez vos LLM. Cela fonctionne à merveille. Quelques notes d'accompagnement. Cela devrait fonctionner, mais parfois vous ne pouvez accéder à la page que si vous mettez WWW et pas seulement le nom. Dans ce cas, vous devez donc le transmettre. Excusez-moi, c'est en allemand, mais vous devez trouver votre transfert, choisir HTDPS, puis vous devez transférer vers le WWW, et ensuite cela fonctionnera toujours, trois nouvelles ou qu'ils mettent simplement le Et puis enregistrez-le, et il devrait maintenant fonctionner correctement. 18. PUBLIEZ : Principes fondamentaux de l'accessibilité: Paramètres d'accessibilité. Dans cette vidéo, je vais donc vous donner un petit aperçu des paramètres d'accessibilité actuels que nous avons dans les sites FiCMA et qui évoluent probablement également au fil du temps Sachez simplement que l'accessibilité est en fait une obligation légale que vous devez respecter dans de nombreux pays , et que les rôles varient selon les pays. Il est donc de votre responsabilité de vérifier cela par vous-même et, en cas de doute, consulter un avocat et de vous assurer que vous êtes au courant de ce que vous devez fournir. Ce n'est donc pas un conseil juridique que je vous donne. Je ne fais que vous présenter les paramètres dont nous disposons actuellement. Commençons donc par notre texte. Donc, sur chaque page, nous avons généralement un titre principal, appelé le titre H. Donc le premier titre. Maintenant, sélectionnez ce titre, et vous pouvez voir ici, dans le panneau des propriétés de droite, qu'il y a une fenêtre d' accessibilité Et parce que nous avons sélectionné la typographie, nous obtenons les balises de typographie Maintenant, P, c'est n'importe quel texte de copie standard. Donc, par exemple, celui-ci doit être défini comme un P. Jetons un coup d'œil, et c'est correct. Maintenant, c'est notre titre principal, H one, donc nous voulons le remplacer par notre titre H. Sachez qu'il n'y a toujours qu'un seul H par page. Vous pouvez avoir plus de H deux, de H trois, mais il ne devrait y avoir qu'un seul H un. Maintenant, notez que personnellement, je n'appelle pas mes styles H un, H deux, H trois, etc., ce que vous verrez beaucoup parce que vous allez voir ici tout de suite. J'ai donc un titre d'affichage, puis j'ai d'autres titres. C'est donc le style. C'est ma hiérarchie visuelle. Et voici les tags, c'est ma hiérarchie quand quelqu'un avec un lecteur d'écran lit ceci. Ainsi, sur notre sous-page, par exemple, je n'utilise pas ce titre d'affichage, mais celui-ci date toujours d'un an car c'est toujours le titre principal Je veux donc toujours l'utiliser ici. Juste une petite remarque. Il existe différentes approches à cet égard. Je suis un fervent défenseur du découplage de votre texte CSS de vos noms de style. Alors réfléchissez vraiment à la façon dont quelqu'un pourrait lire ceci. Ce sera donc probablement le principal. Alors ce serait probablement notre âge de deux ans, ou peut-être que nous avons un titre ici Cela pourrait aussi être un âge de trois ans. Et juste comme ça, je passerais par là. Ce sont donc probablement les gros titres les moins importants, donc je dirais qu'il s'agit d'un âge de quatre ans. Et ici, vous pouvez voir que vous pouvez avoir plusieurs enfants de quatre ans, mais vous n'en avez qu'un seul. Ensuite, n'importe quel texte de copie qui est généralement déjà défini sur P, et nous pouvons simplement le laisser là. Vous avez peut-être remarqué que lorsque vous publiez, des erreurs s'affichent. Donc, si vous avez des problèmes, Figma vous aide à les résoudre. Jusqu'à présent, nous les avons ignorés, mais jetons un coup d'œil car ils devraient tous être résolus sur votre dernière page. Donc, ici, cela nous dit que nous devons commencer par celui-ci. Il manque une étiquette. Cela signifie donc que nous avons une image qui n'a pas d'étiquette. Cliquons ici, puis nous allons passer à cette image. Et en fait, il faudrait vraiment l'ajouter à toutes nos images. Ce que nous devons faire, c'est que chaque fois que nous utilisons une image , nous devons ajouter un nom ou une description, ce que l'on appelle une balise Alt. Alors on passe à autre chose. Nous cliquons sur Plus, puis nous avons une étiquette, et maintenant nous allons décrire ce que nous voyons ici. Ainsi, toute personne utilisant un lecteur d'écran serait désormais en mesure de comprendre ce qui se passe ici, au cas où elle ne pourrait pas voir ces images. Et c'est ce que nous devons vraiment faire pour chacun d'entre eux. Si vous avez une image décorative, vous pouvez appuyer sur ce petit bouton. Donc, parfois, vous pouvez simplement avoir quelque chose entre les deux , comme un arrière-plan, un espace réservé ou quelque chose Ensuite, vous pouvez simplement cliquer ici, et cela désactivera l'Alt. Mais ici aussi, par exemple, si vous avez votre photo de profil, assurez-vous simplement d'ajouter une image et de rédiger une description. Donc, ici, tu dois écrire ton nom. Et cela doit vraiment se produire pour toutes les images que vous utilisez. Une autre partie importante à ajouter à votre CSS via ces paramètres est la structure générale. Encore une fois, pour une meilleure lecture, et cela améliorera également votre optimisation pour les moteurs de recherche, d'ailleurs. Par exemple, ici, sélectionnez ceci, puis dans le texte, vous pouvez voir cette section, elle est déjà marquée comme en-tête. Nous devrions donc avoir un en-tête, puis nous devrions également lui dire que le Putter est le futer Vous pouvez donc voir que, comme cela a probablement été stocké sous forme de bloc Putter, il a déjà été récupéré, mais sinon, vous devriez le faire à la main Passons en revue ces balises principales pendant une seconde. Donc un div qui est un conteneur général, donc aucune signification sémantique Ensuite, vous avez un article qui est un élément de contenu autonome qui peut être autonome, comme, par exemple, un article de blog, puis un site qui signifie du contenu lié au contenu principal comme une barre latérale ou une note Ensuite, nous avons un bouton, assez évident. Il s'agit donc d'un élément interactif qui exécute une action lorsque vous cliquez dessus. Nous avons une figure, à utiliser pour encapsuler un média tel qu' une image ou un graphique avec une légende facultative. Ensuite, nous avons le puta qui définit la section Puta de la page, donc c'est assez simple Ensuite, nous avons notre en-tête qui marque la section supérieure de la page, ou la section généralement avec des titres ou une navigation. Nous avons notre main, qui représente le contenu principal de la page, à l' exception des éléments répétés tels que nag bar ou puta Et puis nous en avons assez qui contiennent les liens de navigation pour les sections latérales. Ensuite, nous avons une section, qui est sémantiquement une section ou un contenu de groupe, comme un chapitre de la Donc, par exemple, notre partie à propos ici, cela pourrait être une section. Ensuite, nous avons ceci ici comme en-tête, puis nous pourrions aller un peu plus loin et nous pourrions, par exemple, dire, en fait, que nous pourrions le baliser ici même dans notre composant si nous utilisons un composant, sinon simplement l'ajouter sur la page. Voici donc notre en-tête. Et puis ceci, ce serait notre NAF. Vous pouvez voir que cela est déjà configuré. Et puis notre bouton devrait être enregistré en tant que bouton. Et ici, vous pouvez voir, par exemple, que je ne l'ai pas ramassé. Nous pouvons donc le faire ici même sur le bouton. Maintenant, si nous le sélectionnons ici parce qu'il est imbriqué, vous pouvez voir qu'il l'a également récupéré C'est une bonne idée de configurer tout cela dans votre composant si vous les utilisez et pour tout autre élément directement sur votre page. L'accessibilité ne se limite donc pas à ajouter un peu de contraste de couleurs et un peu de tags ici et là. Mais vous pouvez déjà faire un très bon travail en tant que designer. Comme je l'ai dit, cela ne signifie pas que vous devez vous familiariser avec les règles générales de votre pays, mais il existe actuellement de nombreux outils intéressants uniquement dans le design de Figma et non dans les sites J'espère que nous les verrons bientôt sur les sites qui se connectent. Donc, si vous êtes dans le design de Figma, accédez à vos plugins via le panneau d'actions Il en existe différents. Il y en a un qui s'appelle ID. Il y en a un qui s'appelle Stark, donc je vais juste vous montrer Star mais aussi Google pour les plugins d'accessibilité et en essayer différents. Et c'est donc vraiment génial car il est livré avec un correcteur de contraste Ainsi, par exemple, nous pourrions vérifier que les couleurs du texte que nous avons, pouvons-nous réellement les utiliser sur quel arrière-plan différent ? Ainsi, par exemple, vous ne pourriez pas utiliser ce texte sur celui-ci, mais vous pourriez, par exemple, utiliser cette couleur de texte foncée sur n'importe lequel des textes clairs. Vous voyez donc laquelle passe. Il y a plus d'informations. Et il y a d'autres sujets comme la typographie, les cibles tactiles, la vision Encore une fois, vous obtenez tous les en-têtes focalisés sur le texte. Vous avez donc tout cela à l'intérieur pour plonger un peu plus profondément. 19. BIBLIOTHÈQUE : introduction aux bibliothèques: Configuration de votre propre bibliothèque de sites avec des couleurs, une typographie, hiérarchie et vos propres blocs de composants Alors, comment est-ce que cela fonctionne ? Eh bien, en gros, ce que vous pouvez faire, c'est que, comme vous utilisez des blocs Figma, vous pouvez créer vos propres blocs Vous pouvez donc configurer une bibliothèque complète. Cela signifie que vous pouvez configurer votre typographie à votre guise, c'est-à-dire quelle police vous utilisez, comment vous voulez que tout cela se comporte à travers différents points d' arrêt et avoir une idée générale de la hiérarchie Alors, quelle sorte de dynamique recherchez-vous ici ? De même pour vos couleurs, vous pouvez configurer des variables de couleur, puis les utiliser dans tous vos designs, et vous pouvez facilement les mettre à jour. Et vous pouvez configurer vos propres blocs, sorte qu'il s'agisse de composants entièrement personnalisables configurés pour différents points d'arrêt Vous pouvez configurer des blocs, mais vous pouvez également configurer des pages entières et créer des modèles pour n'importe quelle page de sites Figma à consommer Vous pouvez publier l'intégralité de ce fichier sous forme de bibliothèque, qui signifie que vous pouvez simplement placer dans votre équipe, puis créer n'importe quel fichier SITS ou utiliser n'importe quel fichier de site existant. Et via le bouton de bibliothèque, vous pouvez simplement accéder à cette bibliothèque externe. Vous pouvez désormais récupérer tous les blocs que vous avez créés avec tous les bons paramètres. Vous pouvez, bien sûr, le personnaliser entièrement, ajouter des images, modifier le texte, et toute modification que vous apportez dans la bibliothèque sera également reflétée ici. Vous pouvez simplement le publier comme vous le feriez avec n' importe quel autre site que vous avez créé dans les sites. Ainsi, vous pouvez créer votre page entièrement réactive avec vos propres composants. 20. BIBLIOTHÈQUE : connecter une bibliothèque: Importons notre fichier Figma moon Block, transformons-le en bibliothèque et connectons-le aux sites Pigma Donc, la première chose à faire est de vous connecter à votre compte FigMA, puis de rejoindre n'importe quelle équipe, mais il faut qu'il s'agisse d'une équipe professionnelle ou supérieure J'ai créé un nouveau projet ici. Je vais me lancer ici. Et au lieu de créer un nouveau fichier, j' utilise le même bouton, mais je vais sur Importer. Et d'ailleurs, dans Figma, l'interface change un peu, vous pourriez donc la trouver à un endroit légèrement différent L'important est que vous utilisiez Import et que vous allez maintenant importer le fichier FIGMA que vous avez précédemment téléchargé Cela peut prendre un moment. C'est un dossier assez volumineux, alors donnez-lui un peu de temps. Je vais accélérer les choses ici. Donc, une fois que vous avez terminé, double-cliquez sur le fichier, puis à l'intérieur, vous pouvez voir tous les éléments prédéfinis. Vous aurez donc déjà configuré les couleurs, la typographie et certains éléments. Maintenant, tu n'as rien à faire. Nous pouvons consommer tels quels, tous ces éléments directement à l'intérieur. La seule chose que vous devez faire est de transformer ce fichier en bibliothèque afin de pouvoir le connecter. Passez donc aux actifs ici. Donc, juste à côté du fichier, vous voyez le petit onglet Ressources, et ici vous voyez le symbole de la bibliothèque. Cliquez sur ce symbole puis sur Publier. Encore une fois, cela peut prendre un moment car c'est un peu plus grand Je vais donc accélérer les choses en arrière-plan. Une fois cela fait, revenons à notre équipe, et vous pouvez utiliser un fichier de sites existant ou je vais simplement en créer un nouveau. Je clique donc à nouveau sur le bouton et je vais sur les sites importants, pas un fichier de conception, mais vous avez besoin d'un fichier de sites FIGMA, et nous pouvons sauter dessus parce que nous voulons repartir de zéro Faisons donc un petit zoom arrière, et vous verrez que cela va déjà nous donner la page d'accueil, et qu'il existe une version de bureau et une version mobile. Mais dans le fichier que vous avez, nous avons toujours une version, tout, ordinateur de bureau, tablette et mobile. Nous voulons donc qu'il en soit de même dans notre dossier annexe. Cliquez simplement sur un bouton plus, puis vous verrez celui-ci ici. Ceci est déjà configuré exactement dans les mêmes tailles, et nous avons maintenant exactement la même configuration que dans notre fichier. Nous voulons maintenant connecter notre bibliothèque. Cliquez donc sur ce petit bouton ici. Ensuite, passez aux bibliothèques. Il y a des blocs, mais vous voulez des bibliothèques, cliquez sur Parcourir les bibliothèques de l'équipe, et vous devriez maintenant trouver votre bibliothèque, sinon recherchez simplement par nom. Une fois que vous l'avez trouvé, j' deux ici parce que je l'ai déjà installé. C'est donc celui que je viens d'ajouter. Vous n'en verrez qu'un. Cliquez simplement sur Ajouter aux fichiers. Et vous pouvez maintenant voir votre bibliothèque ici dans la bibliothèque. Donc, même si tu sors d'ici, c'est là que tu le trouves tout le temps. Maintenant, cliquez dessus, puis vous verrez trois sections, les éléments de base. Ce sont donc tous les petits blocs, navigation des héros, ou vous pouvez aussi avoir des designs. J'ai donc créé ici des designs prêts à pour vous ou des wireframes Si vous revenez au fichier, donc au fichier d'origine que vous avez transformé en bibliothèque, vous pouvez voir ici si vous passez des actifs à des fichiers de trois pages. Donc, les éléments de base, que vous voyez par défaut, sont le wireframe. C'est donc ici que vous trouverez tous les wireframes et les designs C'est donc un miroir exact de cela. Donc, tout ce que vous avez à faire est de choisir les blocs préfabriqués. Il vous suffit donc de sélectionner l'un d'entre eux, et il vous suffit de le faire glisser sur la version de bureau, puis il configurera également les autres points d'arrêt pour vous Ou vous pouvez également utiliser les pages prêtes à l'emploi, et pareil ici, suffit de choisir l'une d'entre elles, il suffit de choisir l'une d'entre elles, de la placer uniquement sur la version de bureau, et toutes les autres seront configurées automatiquement pour vous. 21. BIBLIOTHÈQUE : configurer des pages personnalisées: Configurons notre première page et ajoutons également quelques paramètres de mise en page automatique de base car ce qui a été intégré dans les blocs Figma, vous devez le configurer ici à la main Nous avons donc configuré notre page, mais elle est encore un peu décalée, car le fait est que nous ne pouvons pas tout voir. Et si nous appuyons sur l'aperçu, c'est donc ce bouton ici ou vous pouvez également utiliser celui-ci, c'est pareil. Ensuite, nous voyons l'aperçu, mais nous ne pouvons pas le faire défiler correctement. Et aussi, si nous redimensionnons je ne sais pas, c'est juste un peu bizarre, non ? Il ne se comporte pas comme on s'y attend. Alors revenons en arrière. Et configurez ça. Voici donc quelques modifications de mise en page automatique que vous devez effectuer. Et si tu as besoin de me réparer, c'est la seule partie qui peut être un peu confuse. Alors suivez-moi vraiment étape par étape, et tout devrait bien se passer. Alors, prenez le bureau. Il vous suffit de le configurer sur le bureau, et il le configurera pour tout le reste. Ce que nous devons faire, c'est passer d' une disposition libre à une disposition verticale. Alors faisons-le. Maintenant, la prochaine chose que nous devons faire est aligner au centre et en haut. Ensuite, assurez-vous que tout cela est mis à zéro. Donc, si vous avez des chiffres ici, changez-les à zéro. Pour afficher la page entière, nous voulons régler la hauteur, non pas sur une valeur fixe, mais pour qu'elle corresponde au contenu. Cela semble donc déjà très bon. Jetons un petit coup d'œil à l'aperçu. Nous pouvons donc maintenant faire défiler la page, mais vous pouvez toujours constater que lorsque nous redimensionnons, c'est maintenant au centre, mais nous avons toujours ces petits espaces que nous ne voulons pas parce que nous voulons que cela soit très fluide Nous devons donc faire une dernière petite chose. Encore une fois, saisissez la partie bureau, puis appuyez sur Entrée, et tous les éléments enfants seront saisis, et vous devrez les configurer pour qu'ils remplissent le conteneur. Donc, en termes de dimensions, ne retirez pas celui-ci. Utilisez simplement une petite erreur , puis choisissez «   remplir le récipient ». Donc, si nous vérifions cela à nouveau, vous pouvez maintenant voir que cela fonctionne très bien. Et nous pouvons désormais modifier tout le contenu à notre guise. Donc, si vous modifiez le texte sur le bureau, cela se répercutera sur toutes les autres zones. Vous pouvez également modifier les images, bien sûr, il suffit de sélectionner l'image, puis via le remplissage d'image, vous pouvez choisir n'importe quelle autre image sur votre ordinateur. Maintenant, les pages sont déjà configurées pour vous. Alors peut-être que vous voulez une configuration un peu plus flexible. Vous pouvez également utiliser les différents éléments de base dans ce cas. Créons donc une autre page. Je vais donc aller sur la page Web ci-dessous. Je vais le placer juste à côté, et je vais l'appeler, par exemple, la page du café, et maintenant je vais faire la même configuration. Je vais donc ajouter une tablette, je vais ajouter un téléphone portable. Maintenant, au lieu des pages prêtes à l'emploi, je vais passer aux blocs de construction, afin que je puisse voir ici la même navigation. Je vais simplement le mettre ici et vous verrez qu' il ajoute déjà la même chose. Maintenant, nous devons répéter la configuration que nous avions faite auparavant, ce qui est génial, pour que vous puissiez le voir à nouveau. Sélectionnons donc notre page principale, puis souvenons-nous de la première étape, nous avons besoin d'une configuration verticale. Ensuite, nous devons le centrer. Nous devons nous assurer que tout cela est réglé à zéro, afin que cela commence par le haut. Nous voulons maintenant régler ce paramètre de manière à ce qu'il corresponde au contenu, afin d'en voir exactement ce que nous avons ici. Le redimensionnement, le conteneur rempli, nous allons le faire à la fin, mais nous pourrions aussi le faire individuellement avec chacun d'entre eux. Vous pouvez donc simplement sélectionner l'élément, puis le transformer pour remplir le conteneur afin de le redimensionner Ajoutons donc quelques éléments supplémentaires. Ajoutons peut-être juste un petit héros. Ajoutons-le ici. Et ensuite, si vous ne l'avez pas dans l'ordre souhaité, vous pouvez simplement utiliser les touches haut et bas pour le modifier. Et remarquez également qu'ici, vous avez quelques options. Ainsi, par exemple, vous pouvez masquer le logo et le groupe de boutons ou peut-être juste un bouton. Je vais donc également ajouter quelques images. Jetons donc un coup d'œil à Undercard. Donc, ce que je peux faire, c'est simplement ajouter celle-ci ici, puis peut-être une image plus grande. Et si vous avez quelque chose comme ça, ajoutons également du texte. Ensuite, ce que vous voudrez peut-être, c'est ajouter un peu d'espacement entre ces éléments Vous pourriez donc l'ajouter ici, mais cela va ajouter de l' espacement à tout, donc je ne le recommande pas Donc, ce que je recommande, c'est de le faire si vous sélectionnez ces deux éléments, puis que vous les transformez également en groupe de mise en page automatique. Encore une fois, cela pourrait être un peu plus délicat. Donc, vous appuyez sur Shift et A, et cela le transformera en un groupe de mise en page automatique. Et maintenant, tout ce que tu as à faire, c'est de combler l'écart à l'intérieur d'ici maintenant. Et vous pouvez également définir un rembourrage, par exemple en haut et en bas Ainsi, par exemple, il y aurait maintenant un petit écart entre les deux. Et d'ailleurs, vous pouvez également définir une couleur de fond. Si vous le vouliez, il existe des couleurs prédéfinies pour vous. Vous pouvez donc les utiliser et définir n'importe quelle couleur d'arrière-plan, par exemple. Maintenant, si nous voulons ajouter des images ici, nous le faisons de la même manière qu'avant. Cliquez simplement ici, puis utilisez l'image de remplissage et vous pouvez télécharger des images depuis votre ordinateur. Et encore une fois, ici aussi, si vous souhaitez modifier l'ordre, vous pouvez simplement sélectionner l'élément, puis avec vos touches haut et bas , vous pouvez le modifier. Vous pouvez également modifier n'importe quel texte ici et cela se reflétera sur tous les points d'arrêt Maintenant, si nous regardons l'aperçu de cette page, vous pouvez voir qu'elle convient bien, mais encore une fois, nous avons un saut étrange. N'oubliez donc pas que nous devons tout régler pour qu'il soit rempli. Nous l'avons donc déjà configuré ici. Nous pouvons donc passer en revue chacun de ces éléments, puis simplement les configurer tous pour remplir le conteneur, ou vous pouvez utiliser une petite astuce, appuyer sur Entrée, et maintenant vous les avez tous sélectionnés, et maintenant les configurer pour remplir le conteneur. Jetons donc un coup d'œil à nouveau. Et vous pouvez voir que cela se redimensionne maintenant bien Ah, en fait, jetez un œil ici. Cela saute, et c'est parce que nous le groupons Nous devons donc entrer dans ce groupe et nous assurer qu' il est également configuré pour remplir le conteneur Donc, si nous y jetons un coup d'œil, cela devrait maintenant fonctionner correctement, et nous pouvons voir ce comportement vraiment agréable. Maintenant, connectons simplement les pages. Pour ce faire, il vous suffit de sélectionner l'élément que vous souhaitez connecter. Je pourrais avoir la miniature complète ou uniquement l'image ou peut-être uniquement ce lien ici. C'est à vous de décider. Passez ensuite aux interactions. Ensuite, tout ce que vous avez à faire, c'est lancer une petite interaction, et vous pouvez voir que cela permet de passer de tous les points d'arrêt au café Et maintenant, si nous y jetons un œil, nous pouvons voir notre page ici. Nous cliquons sur notre lien, et il va nous amener au café. Assurez-vous simplement d'ajouter un fil d'Ariane ici pour revenir en arrière. Tu pourras toujours le faire plus tard. Revenons au design, à la navigation. Voici notre petite miette de pain. Ajoutons-le ici. Encore une fois, si vous ajoutez un nouvel élément, assurez-vous de l'avoir indiqué pour remplir le conteneur, et nous pouvons maintenant revenir en arrière avec un lien vers notre page principale. N'oubliez pas que vous pouvez modifier n'importe quel texte, et ainsi de suite, vous avez un site Web qui fonctionne assez bien. 22. BIBLIOTHÈQUE : personnaliser les couleurs avec des variables: Personnalisation de vos couleurs. Apprenons-en donc un peu plus sur le fonctionnement des couleurs dans notre bibliothèque et sur la façon dont nous pouvons les personnaliser. Les couleurs de Figma sont donc généralement configurées dans ce que l'on appelle des variables Donc, dans votre bibliothèque, et encore une fois, cela peut sembler un peu différent une fois que vous l'avez regardée. Il s'agit de la première version. Cependant, la configuration devrait être tout à fait la même. Vous trouverez donc un aperçu de vos couleurs. Voici donc les couleurs de marque que j'utilise actuellement dans cette bibliothèque, et vous trouverez une petite capture d'écran, mais vous ne pouvez pas vraiment y changer quoi que ce soit. Si vous sélectionnez une couleur, par exemple, ce rouge, dans votre menu de remplissage, vous pouvez voir qu'il s'agit de la barre oblique principale de la marque Voici donc un petit clip pour que je puisse détacher cette couleur. Et ce sera une sorte de couleur pure pour que je puisse voir le code hexadécimal Mais revenons en arrière, car ce que nous voulons, c'est que chaque fois que nous utilisons une couleur pour quoi que ce soit dans notre design, nous voulons utiliser une variable. Donc, via ce menu, cliquez sur cette petite icône, puis vous pourrez accéder aux variables que j'ai déjà configurées pour vous. Donc, ce qui est vraiment important si vous configurez un élément, c'est que tout ce qui se trouve sur cet élément soit configuré dans une variable. Nous ne voulons jamais voir de code hexadécimal dans votre design final Alors, par exemple, jetons un coup d'œil à celui-ci. Donc, si nous sélectionnons cette option, un bon moyen de voir si vous les avez toutes détectées est dans les panneaux de propriétés de votre côté droit. Allez en bas et vous verrez ce que l'on appelle les couleurs de sélection, puis vous devriez voir tout cela en utilisant cette notation de variables. Vous ne voulez donc rien voir de tel, même si ce n'est que l'arrière-plan. La façon dont vous pouvez ajouter couleurs est de sélectionner les éléments, puis dans le menu du film, vous utilisez la petite icône ici, puis vous allez les choisir. J'aime donc le séparer en couleurs de texte, puis en couleurs de marque, puis neutres pour des éléments tels que l'arrière-plan Mais il existe différentes manières de le configurer, alors n'hésitez pas à expérimenter également avec votre propre configuration. Vous pouvez toujours les modifier. Ainsi, par exemple, si vous sélectionnez ce texte ici, dans le menu du film, vous pouvez simplement cliquer ici, puis choisir n'importe quelle autre couleur. Désormais, l'endroit où se trouvent ces couleurs et où vous pouvez les modifier, les ajouter et organiser tout cela se trouve dans le panneau des variables. Cliquez donc sur l' arrière-plan de votre Canvas, puis sur le côté droit, vous pouvez voir ce que l' on appelle des variables, et vous pouvez ouvrir ce paramètre. Si vous ne voyez pas les couleurs tout de suite, assurez-vous de choisir les couleurs dans le menu déroulant de la collection . Et ici, vous pouvez voir toutes les couleurs telles que je les ai configurées. Encore une fois, vous pouvez modifier ces couleurs. Par exemple, c'est en fait pour notre primaire, il suffit de le changer en violet, puis nous pourrions également ajouter des variables. Il suffit donc de cliquer sur le bouton Plus. Vous pouvez ajouter une autre variable de couleur. Vous pouvez donc simplement ajouter n'importe quelle variable à votre guise, puis elle apparaîtra dans le menu. Vous remarquerez peut-être également que j'ai une configuration en mode clair et en mode sombre. Vous pouvez donc ajouter des modes en cliquant sur le petit bouton plus ici. Donc, si nous revenons à notre design, vous pouvez voir que tout cela a changé ici. Donc, tous mes boutons étaient rouges, maintenant la variable a changé. Comme j'utilise la variable partout, je n'ai besoin de la modifier qu'à cet endroit. C'est donc ma seule source de vérité. Maintenant, nous pouvons également voir le mode sombre. Vous pouvez donc le sélectionner ici ou sélectionner l' un d'entre eux. Je pense que nous ferions mieux si vous retiriez simplement une instance. Nous en avons donc un exemple. Maintenant, ce que nous pouvons faire, c'est ici, vous trouverez une sorte de petit interrupteur. Et si vous cliquez sur cet interrupteur, vous verrez alors vos différentes variables, collections, et par exemple, voici la couleur, et je peux passer en mode sombre. présent, il est préférable de tout laisser sur le mode par défaut pour le premier mode de votre collection. Mettons donc cela à jour et passons à notre design. Donc, pour voir le design actuel, cliquez sur le petit bouton Bibliothèque lorsque vous voyez cette petite bulle ici vous demandant de mettre à jour puis de publier la nouvelle bibliothèque avec les modifications. Passons donc à notre design. Ensuite, vous devez revenir en arrière jusqu'à ce que vous voyiez la miniature et la petite icône Cliquez dessus, et vous pouvez maintenant accepter les mises à jour. Maintenant, regardez ce qui se passe avec ce bouton, et vous pouvez voir que nous avons maintenant la nouvelle couleur que nous avons modifiée. Maintenant, vous pouvez également utiliser votre mode ici, vous pouvez donc simplement sélectionner cette section entière. Et puis ici, vous avez à nouveau le petit interrupteur, et vous pouvez maintenant passer en mode sombre. Et puis vous voyez tout passer en mode sombre. Notez que c'est toujours en rouge car nous n'avons jamais changé la couleur en mode sombre. Vous pouvez également accéder à toutes ces couleurs à l'intérieur de votre site. Ainsi, par exemple, si vous sélectionnez ce texte et que vous souhaitez simplement apporter des modifications ici, via le menu de votre film, si vous cliquez dessus, vous verrez qu'il automatiquement à jour toutes vos variables de couleur, de sorte que vous pouvez également y accéder directement ici. 23. BIBLIOTHÈQUE : styles de typographie réactifs: Jetons donc également un coup d'œil à notre typographie et à la manière dont nous pouvons l'utiliser et la personnaliser Encore une fois, voyons d'abord comment cela est configuré. Comme d'habitude, il s'agit de la première version de cette bibliothèque qui peut sembler légèrement différente, mais vous utiliserez généralement ce que l'on appelle des styles et des variables pour cela. La configuration de la typographie est, en général, un peu plus complexe Si vous avez besoin de cet ensemble, je vous recommande vous en tenir un peu à la configuration que je vous ai donnée. Je vais vous en donner un bref aperçu. Mais encore une fois, si vous débutez totalement dans Figma, cela peut être un peu difficile, mais restez avec moi Donc ce que j'ai créé ici, et c'est quelque chose que j' aime mettre en place. Ce n'est rien qui est fourni avec Figma c'est juste un aperçu de votre design Donc, en général, je nomme les styles. J'ai donc un écran, un titre L, M, etc., puis j'ai un corps et des boutons Et encore une fois, vous pouvez absolument le personnaliser à votre guise. Vous pouvez emporter des éléments, ajouter des éléments exactement comme vous en avez besoin pour votre design. Maintenant, ce que vous voyez ici, c'est un aperçu, et cet aperçu utilise en fait ce qu'on appelle un style. Donc, si je sélectionne cette option, vous pouvez voir ici dans la typographie que cela ne s' appelle pas affichage Et ici, comme pour les variables de couleur auparavant, vous pouvez voir les différents styles de texte. Maintenant, si vous cliquez sur l'arrière-plan du canevas et que vous voyez un aperçu de vos styles ici, et par exemple, dans l' écran que je viens de vous montrer, nous pouvons l'ouvrir, puis modifier les paramètres. peux aussi voir que certaines choses, j'aime utiliser les touches de ligne comme ça parce que personnellement, j'aime utiliser un pourcentage ici, mais vous pouvez voir que certaines choses sont utilisées comme variable. Donc, si c'est dans cette petite boîte ici ou celle-ci, il est simplement écrit «   police », c'est donc une variable. Nous avons également une collection que nous avons intégrée à ces textiles. Encore une fois, vous n'avez rien à faire. Vous pourriez littéralement retirer celui-ci et taper un 80 ici et vous obtiendrez le même résultat. Donc, si vous êtes débutant, vous voudrez peut-être le faire. J'utilise juste une méthode un peu plus sophistiquée, ce qui signifie que si je vais jusqu' à la fin de cette ligne, je vois un petit symbole variable, et je choisis maintenant la taille dans ma configuration variable. Voyons donc à quoi cela ressemble. Et encore une fois, si vous êtes débutant, vous voudrez peut-être tout configurer à la main et sauter celui-ci. Nous avons donc notre collection, passez à la typographie. Et ici, vous pouvez voir ce que j'ai fait, c'est que nous avons la police, donc j'utilise des fenêtres contextuelles ici. Supposons donc que vous souhaitiez modifier la police de l' ensemble de votre document et que Google Fonts soit automatiquement intégré. Vous pouvez simplement accéder à Google Fonts, le site Web, puis vous pouvez voir toutes les différentes polices. Vous pouvez donc simplement taper le nom ici. Supposons que je veuille changer tout cela en Inter, puis je n'aurais qu' à le mettre ici, puis toutes mes polices changeraient en Inter. Je n'ai donc pas besoin d'y aller un par un. C'est donc super, super pratique. Maintenant, vous pouvez voir les différentes tailles. Il s'agit donc d'un affichage sur le bureau, puis du titre L sur le bureau, et vous pouvez voir que je peux les modifier individuellement pour les différents modes Dans ce cas, il s'agit d'un ordinateur de bureau, une tablette et d'un mobile que j'utilise. Juste pour le voir, rendons-le ridiculement grand. Ajoutons cela comme un 100 pour voir si cela fonctionne. Donc, tout ce que j'ai à faire , c'est de changer cela ici. Et c'est maintenant, comme vous pouvez le voir, c'est vraiment grand maintenant, et c'est Internw Vous ne pouvez donc pas vraiment la voir ici, mais si je la détachais et que je détache également cette police ici, vous pouvez voir que c'est maintenant Cependant, nous voulons que cela reste intact. Vous pouvez donc voir que tout ce que j'ai à faire est ceci, et maintenant cela se reflétera dans tous mes designs. Vous pouvez donc voir ici que nous avons soudainement fait la une des journaux Et maintenant, la façon dont nous l'utilisons ici est exactement comme je vous l'ai déjà montré avec l'aperçu. Ainsi, par exemple, dans celui-ci, vous pouvez voir qu'en typographie, j'utilise l'affichage Si j'en veux un autre, je pourrais simplement choisir un autre titre à partir d'ici Et cela attire les styles. Vous vous occuperez donc toujours des styles, puis les styles extrairont les variables. Maintenant, nous devenons un peu plus compliqués parce que ce qui se passe ici, c'est que nous utilisons toujours notre style général, puis le style sait, rappelons-nous simplement, le style sait quel mode. Il s'agit donc de la valeur par défaut, nous fonctionnons donc toujours sur un ordinateur de bureau. Donc, d'une manière ou d'une autre, si nous allons ici sur notre tablette, nous devons dire à ce style que c'est une tablette maintenant. Donc, ce qui se passe, c'est que nous sélectionnons ce petit interrupteur que nous avons ici, vous passez à la typographie J'en ai également créé une pour l'espacement, mais nous nous intéressons à typographie maintenant et vous devez dire qu'il s'agit d'une tablette, car par défaut , cela ressemblerait Nous allons donc simplement lui dire d' utiliser le mode tablette. Donc, tout le mode tablette de typographie pour cela. Et puis vous pouvez voir la même chose ici pour le mobile. Si nous le sélectionnons, vous pouvez voir que tout est configuré pour le mobile. Encore une fois, si vous avez besoin de deviner, cela peut être un peu écrasant Je recommande donc de m'en tenir à ma configuration pour le moment. Si vous voulez approfondir ce point , je vous recommande de vous familiariser d'abord vraiment avec les styles de topographie et les variables Si vous connaissez FIGMA, cela vous semblera tout à fait logique Maintenant, si nous voulons l'utiliser dans notre conception, comme d'habitude, il suffit de mettre à jour notre bibliothèque. Publions donc tous ces changements. Passons maintenant à notre design, jour notre bibliothèque et jetons un coup d'œil. Cela devrait devenir assez important. Et aussi, nous allons voir l'Inter au lieu de pop-ins apparaître ici. Et comme tout est déjà intégré aux composants, vous n'avez pas besoin de changer grand-chose ici. Vous pouvez donc voir que cela va automatiquement le récupérer, mais vous allez le voir ici en apparence, que cela utilise une tablette et que cela, par exemple, utilise un mobile. Une dernière petite chose que j'ai peut-être oublié de souligner. Je viens donc de revenir ici sur mes paramètres d'origine, c'est-à-dire si vous souhaitez ajouter un style, nous avons donc vu comment ajouter des variables. Rappelons-nous donc que si vous voulez une autre variable, il vous suffit de cliquer sur le bouton Plus, et cette fois, vous n'utilisez pas de couleur, vous ajoutez simplement une autre variable numérique, puis vous pouvez simplement la définir à votre guise. Et si vous souhaitez ajouter un autre style, vous pouvez le définir ici. Vous pouvez donc cliquer sur Plus et simplement ajouter un style de texte. Et puis vous obtenez cette fenêtre et vous pouvez simplement la configurer. Mais je trouve en fait qu'il est plus facile de créer mon propre style. Disons que je veux un autre titre. Je le retire, je le détache, puis je l' installe complètement à mon goût. Ajoutons simplement ce que nous voudrions au hasard. Je détacherais donc tout, puis je l' installerais comme je le souhaite Et une fois que je serais prête, je passerais ici dans mon panneau de typographie, puis je l'ajouterais à partir d'ici Je passe donc aux styles, puis je crée ces nouveaux styles. Et vous le constaterez ensuite si vous cliquez sur l'arrière-plan, ici, dans vos styles. Je créerais ensuite un autre champ et le documenterais dans mon aperçu. Cette vue d'ensemble n' a donc rien d'obligatoire. C'est juste quelque chose pour vous rappeler comment tout cela fonctionne. 24. BIBLIOTHÈQUE : blocs de composants réactifs: Laissez-moi vous montrer comment créer des composants pour les utiliser dans les sites figma, soit pour étendre une bibliothèque existante soit pour créer la vôtre Petite remarque avant de plonger. Si vous voulez créer vos propres bibliothèques, vous devez vraiment comprendre les fonctionnalités de Figma, de sorte que vous ne pouvez pas vous contenter de deviner et d'essayer Pour ce faire, vous devez comprendre les variables, les styles de typographie, les variables, les composants, les propriétés des composants et la très importante mise en page automatique de Figma Alors, suivez-moi. Cela pourrait tout de même vous donner un bon aperçu si vous connaissez les bases de Figma Mais si cela vous tient vraiment à cœur, assurez-vous un cours solide pour débutants et de bien comprendre ces principes dans cours solide pour débutants et de bien le fond. Ajoutons donc un composant à notre bibliothèque pour comprendre comment tout cela fonctionne en arrière-plan et tous les paramètres qui l'entourent. Ainsi, lors de la configuration des composants, nous avons également besoin de quelques éléments de base qui les alimentent. J'ai donc déjà configuré mes couleurs dans des variables, et j'ai mes styles de typographie Rappelons-nous simplement. Vous pouvez voir ici les différents styles de typographie. Et puis, si nous vérifions les variables, nous avons différentes collections. Je vais donc utiliser ces styles de couleurs sur mon composant, que je vais créer. J'ai une collection supplémentaire que j'ai créée. Ce n'est pas nécessaire, mais c'est très pratique et vous pouvez même devenir plus sophistiqué sur celui-ci. Ainsi, par exemple, je dois utiliser la taille de l'écran comme variable, donc il s'agit d'un ordinateur de bureau, tablette et d'un mobile, puis j' ai un rembourrage qui changerait en conséquence Encore une fois, vous pouvez tout à fait configurer cela à votre guise. Et n'oubliez pas que mes tailles de typographie sont également configurées de manière à intégrer automatiquement les différentes tailles pour les différents points d'arrêt Donc, dans notre composant, tout cela est en train de se réunir maintenant. Je vais donc ajouter une galerie, et je vais la placer dans la section de mon groupe de cartes. Donc, ce que font réellement les sections c'est que vous avez différentes manières d'organiser les choses. Donc, d'une part, dans le dossier, nous avons nos pages. Nous avons donc nos éléments de base. Permettez-moi simplement de vous donner cet aperçu. Voici donc cette page, et nous avons nos maquettes et nos designs Voici donc comment je l'ai configuré. Vous pouvez configurer cela d'une manière complètement différente. Et puis sur mes différentes pages, j'utilise des sections. Vous trouverez donc des sections ici. Vous avez des cadres ou des sections. Vous pouvez également utiliser le raccourci Shift S. Chaque fois que vous placez quelque chose sur une autre page ou une autre section , jetez un coup d'œil ici dans notre bibliothèque, vous pouvez voir qu'il s'agit de la bibliothèque. Nous allons donc d'abord voir les différentes pages. Ensuite, si nous abordons les éléments de base, permettez-moi de vous rappeler que ce serait cette page ici. Ensuite, à l'intérieur, nous pouvons voir les différentes sections que nous avons créées. Nous avons donc ici les groupes de cartes, auxquels nous allons ajouter notre nouveau composant Il devrait donc apparaître ici. C'est vraiment génial car cela signifie également que vous pouvez simplement faire glisser composants d'une section à l'autre pour tout soit bien réorganisé ou renommé Alors pour l'instant, zoomons sur celui-ci et ajoutons notre propre composant. Donc, ce que je vais faire en premier, appuyer sur F, et je vais dessiner un cadre. Et maintenant, je veux que cette taille de cadre soit la taille de mon bureau. Et j'ai déjà configuré une variable pour cela. Je pourrais aussi simplement le taper à la main, mais j'ai une variable, donc je vais juste aller ici sur les dimensions, et vous voyez la taille de l'écran, et je vais utiliser celle-ci. Je vais ajouter un titre. Je vais appuyer sur T pour taper quelque chose et je vais juste nommer ce titre Ensuite, je vais rester très simple. Je vais donc juste avoir un rectangle, et je vais juste créer des rectangles ici Et puis plus tard, je veux qu' ils se déplacent littéralement comme une petite galerie animée à travers ça. Agrandissons-les un peu. Et ajoutons-le ici. Je vais donc garder les choses assez simples. Et vous pouvez également étudier tous les autres exemples que j'ai ajoutés ici. Par exemple, vous pouvez voir ici que cela ressemble à des cartes imbriquées Vous pouvez donc sauter ici et voir où cette carte a été construite à l'origine Vous pouvez donc vraiment faire un nid et devenir très sophistiqué. Mais je vais juste vous montrer une configuration simple, puis vous pourrez partir de là et l'explorer davantage. Nous allons nommer celle-ci, et je vais juste nommer cette galerie, et maintenant je vais ajouter une mise en page automatique. Et encore une fois, vous ne pourrez plus contourner la mise en page automatique si vous souhaitez configurer vos propres composants. Donc, tout d'abord, je vais les emboîter. Je vais tous les sélectionner. Et vous pouvez voir que je n'ai pas de paramètres de mise en page automatique. Je vais utiliser le raccourci pour créer un cadre autour de celui-ci, c' est-à-dire Shift A. Cela crée un cadre de mise en page automatique autour de celui-ci, comme vous pouvez le voir ici. Je vais donner un nom aux cartes. Et maintenant, nous pouvons voir les paramètres ici. C'est horizontal. Nous avons une lacune. Faisons en sorte que ce soit un multiple de huit , peut-être un peu plus grand. Ensuite, nous allons également ajouter du rembourrage à gauche et à droite Donc, en fait, si nous en avons, restons à 40 ici pour le moment, puis en avons 20 ici, et alors ça devrait faire l'affaire. Nous allons maintenant ajouter une mise en page automatique pour tout cela. Je pense donc que je peux m' en sortir en l'ajoutant simplement au parent. Voyons voir. Et voici les cadres. Je vois déjà le menu, et maintenant tout ce que je vais faire, c'est centrer tout ça. Faisons donc en sorte que tout soit centré. OK, super. Nous pourrions ajuster l' écart et tout le reste, mais je vais juste laisser les choses comme ça pour le moment. Ensuite, je vais en sortir une copie, et maintenant je veux que ce soit l'ordinateur de bureau. Et maintenant, souvenez-vous, j'ai travaillé de telle sorte que j'ai des variables d'espacement. Sinon, vous pouvez le faire à la main. J'ai donc un ordinateur de bureau, j'ai une tablette, donc je peux simplement les utiliser ici. Je n'ai pas utilisé ces variables d'espacement. Et puis avec la typographie, c'est pareil. Je dois donc m' assurer, tout d'abord, que je configure tout avec des variables. Je vais juste vérifier cela maintenant et ensuite vous devriez choisir la bonne taille de typographie Et tous les changements. Donc, tout d'abord, juste pour vous montrer ici, j'utilise ces rembourrages, donc j'en ai à gauche et à droite, pour que cela s'adapte Je n'en ai pas vraiment besoin dans cette configuration, mais je l'ai toujours en arrière-plan au cas où j'en aurais besoin. Donc, ce que je n'ai pas encore fait, c'est que je n'ai pas vérifié que tout configuré avec des étoiles et des variables. Donc le titre m'a automatiquement donné un titre L, donc c'est Et maintenant, je dois juste m'assurer que mes couleurs sont également variables. Donc, ici, je vais juste prendre les choses en arrière-plan. Je pense que ça devrait être celui-ci dont je n'ai pas besoin. Celui-ci, je vais le transformer en images dans une seconde. Il s'agit donc d'une couleur de texte. Vous pouvez également le choisir ici. Vous voyez donc que c'est une couleur de texte. Et même l'arrière-plan est très important, tout comme la couleur de votre arrière-plan, qu'elle soit également configurée dans des variables de couleur. Donc en fait, je vais juste le supprimer , puis je l'ai ici. Pour en avoir une copie, vous pouvez toujours vérifier que toutes les couleurs de votre sélection sont variables. Et j'ai encore une fois oublié mes petites images, alors revenons ici encore une fois. Et maintenant, ce que je vais faire, c'est configurer cela comme un remplissage d'image. J'ai donc réglé ce problème, et tous ceux qui consommeront ce composant plus tard savent que c'est à cet endroit que je m'attends à ce qu'ils ajoutent des images. OK, alors maintenant tout devrait bien se passer. Maintenant, il ne nous reste plus qu'à avoir l'apparence ici, et comme nous utilisons tout ce qui contient des variables, toutes les informations sont déjà stockées dans ces différentes collections. Maintenant, je fais de l'espacement et je passe à la tablette, puis je veux aussi que la couleur ne change pas Et puis la typographie, je veux aussi que ce soit la tablette, pour que vous puissiez voir que cela s'ajuste. Et maintenant, nous pouvons faire de même pour notre mobile. Donc, vous voyez, je les ai ouverts, et je passe au mobile, et je passe au mobile. Vous n'en avez pas besoin sur votre bureau car c'est le premier mode. Parfois, j' aime bien l'ajouter juste pour que tout soit configuré de la même manière, mais comme il s'agit du mode par défaut, vous n'en avez généralement pas besoin. Donc, ce que nous pouvons faire maintenant, nous pouvons maintenant tous les sélectionner. Et puis en un clic, je vais utiliser une petite liste déroulante pour créer un ensemble de composants J'aime bien épaissir ce contour pour qu'il soit visible, puis je l'amplifie un peu pour avoir une meilleure vue d'ensemble OK, alors sortons-en un. En fait, retirons-les deux, et ensuite nous verrons qu'ils se comportent exactement comme je m'y attendais Maintenant, vous pouvez voir que j'ai toujours une erreur. Donc, ce que je dois faire, c'est les nommer. Et n'oubliez pas que notre appellation est « ordinateur de bureau », mobile » et « ordinateur de bureau », «   tablette » et « mobile ». Sélectionnons-le, et je vais simplement les renommer tous. Ensuite, je peux également sélectionner l'ensemble du groupe, et je peux nommer ce point d'arrêt. OK, super. Tablette, ordinateur de bureau, et puis vous devriez voir dans le menu déroulant notre mobile fantastique. Maintenant, je peux ajouter une petite chose, et encore une fois, c'est un peu plus avancé, mais c'est très pratique car en apparence, vous pouvez ajouter une propriété de composant. Vous pouvez donc cliquer sur Plus ici, puis je peux simplement dire « Afficher titre », « créer la propriété Je vais également l'ajouter ici. Je vais donc simplement le sélectionner , puis il devrait le voir. Je peux le sélectionner ici car je fais partie du même ensemble de composants. Et maintenant, si je sélectionne ceci, vous pourrez le voir plus tard, nous pouvons simplement choisir si nous voulons ce composant avec ou sans titre C'est donc très agréable plus tard lorsque nous le consommons. OK, donc ça a l'air bien pour l'instant. Nous allons le tester. Donc, ce que nous allons faire, c'est publier cette bibliothèque. Mettons-le donc à jour. Passons à notre fichier de conception, puis mettons à jour. Recevez ces mises à jour. OK, super. Alors maintenant, si nous passons à la section sur laquelle nous l'avons placée, qui était celle des groupes de cartes, nous devrions voir notre galerie, et vous pouvez voir qu'elle se trouve ici. Maintenant, nous pouvons simplement le faire glisser, et il devrait maintenant remplir directement tous les différents points d'arrêt Jetons un coup d'œil, et cela fonctionne très bien. Cela ne fonctionne donc que parce que nous utilisons la convention de dénomination pour ordinateur de bureau, tablette et mobile, afin qu'il sache quoi en faire. OK, super. Donc, ce que nous devons faire maintenant, c'est juste un aperçu, puis nous verrons que nous avons probablement besoin quelques paramètres de mise en page automatique car ils ne sont pas transférés automatiquement. Donc, tout ce qui se trouve à l'intérieur est conservé, mais vous devez lui dire comment ce bloc doit se situer à l'intérieur d'ici. Nous faisons donc comme d'habitude, nous sélectionnons notre paire et notre monture. Cela est déjà configuré pour une mise en page automatique verticale. Ensuite, nous sélectionnons ce cadre que nous venons d'ajouter et nous nous assurons qu'il est configuré pour remplir le conteneur. Voyons donc à quoi cela ressemble maintenant. Et oui, ça a l'air génial. C'est le genre d' effet que nous voulons. Maintenant, nous voulons que cela soit rotatif, et pour le moment nous ne pouvons le faire que sur le site figma, nous ne pouvons donc pas l'ajouter à notre bibliothèque Nous devons donc saisir l'élément ici, puis passer aux interactions, ajouter une interaction et ajouter une interaction de marque. Vous pouvez voir que c'est le genre de chose que nous voulons. Vous pourriez changer cela, donc pour ce qui est de la vitesse, de la direction et tout le reste, je vais juste laisser les choses telles quelles pour le moment. Alors maintenant, jetons-y un coup d'œil. C'est le mauvais côté. Nous allons sélectionner ce côté ici. Jouez, et ça a l'air merveilleux. Et l'important, en fait, c'est que nous avons un peu de rembourrage à gauche et à droite Sinon, ils se colleraient les uns aux autres. Laissez-moi juste vous montrer ceci. Donc, ce que nous avons fait ici, si vous le sélectionnez, vous pouvez voir que nous avons un rembourrage à gauche et à droite Sinon, ils se collent les uns aux autres, alors soyez conscients de cela. OK, alors ajoutons simplement quelques images. Je vais juste accélérer choses pour vous en arrière-plan. Alors, jetons-y un coup d'œil. Ça a l'air génial. Assurons-nous que notre redimensionnement fonctionne. Mais en fait, ça me donne à nouveau ce saut bizarre. Parfois, lorsque vous ajoutez une animation qui se produit, il vous suffit d'y retourner et de vous assurer qu'elle est configurée pour remplir le conteneur ou quoi que ce soit d'autre, vous voulez vraiment que cela fonctionne. Essayons donc à nouveau. Et maintenant nous avons un très bon comportement, vous pouvez donc également utiliser vos préréglages ici Vous souhaitez modifier quoi que ce soit à propos de ce composant. Par exemple, supposons que vous vouliez tous les avoir ici avec des coins arrondis. Sélectionnons-les tous. Appuyez sur Entrée avec un petit raccourci, puis vous obtenez tous les éléments secondaires, puis nous ajoutons simplement quelques coins arrondis. Ensuite, nous allons procéder à une mise à jour. Au fait, une petite note. Si vous utilisez des éléments imbriqués, avons tous réunis sur un seul élément Mais ici, par exemple, lorsque nous avons une carte imbriquée, passons simplement à cette carte Si vous mettez un peu de marge dans le nom, cela ne mettra pas à jour la bibliothèque, car nous voulons seulement donner un aperçu de l'ensemble des composants de notre bibliothèque ultérieurement. C'est donc une façon de masquer ces petites notes. Publions donc ceci et une fois qu'il sera mis à jour, nous devrons également passer à nouveau. Assurons-nous que c' est vraiment mis à jour, publions. Oui Faisons en sorte de sauter ici, et maintenant nous devons revenir en arrière jusqu'à ce que nous voyions notre miniature. Nous allons la recevoir et maintenant voir ce qu'il advient des coins Donc, mettez tout à jour, et vous pouvez voir cela reçoit directement la mise à jour. 25. En savoir plus sur Figma ma: Au cours de ce cours, je souhaite faire référence à de nombreuses fonctionnalités de la FIGMA, telles que les composants, mise en page et les variables Si vous utilisez T FIGMA, tout cela sera très naturel pour vous Cependant, si vous découvrez FIGMA, cela peut être un peu accablant Je n'aborderai pas ces concepts dans ce cours. Cependant, avec votre adhésion à Skillshare, vous pouvez accéder à mon cours pour débutants Figma Dans Projets et ressources, j'ai ajouté un lien direct. Il vous suffit de cliquer dessus. Cela vous mènera directement à ce cours. Le cours dure 4 heures et commence par toutes les bases que vous voudrez peut-être suivre ou non. Si vous souhaitez uniquement examiner certains concepts tels que les composants ou les variables, par exemple la différence entre les variables et les styles, ce qui est très important pour la typographie, vous pouvez simplement passer à ces sections et expliquer tout cela depuis le début Également ou pour la mise en page, comme vous pouvez le voir ici. Si vous voulez aller plus loin, vous trouverez d' autres informations dans ce cours, comme comment prototyper avec FIGMA, comment collaborer, et il y a même un projet de cours pour votre portfolio C'est aussi de loin mon cours le plus populaire sur Skillshare, et comme vous pouvez le constater, dans les critiques, les gens en sont très contents Alors participez et apprenez-en plus sur Figma.