Présentation de Figma : un mini cours pour débutants (Design UI UX 2023)

1. Présentation de Figma : un didacticiel pour débutants (2023 UI UX Design): Bienvenue dans mon guide de démarrage Figma pour les débutants. Ces notes pour débutants vous guideront création de votre tout premier design Web avec Figma en créant une page d'accueil simple mais réaliste pour Jim Je fais du design Web depuis plus de dix ans maintenant et je pense actuellement que Figma est le meilleur outil pour la conception de sites Web. Je suis donc heureuse de vous montrer ce qui est possible. la fin de ce cours, vous serez en mesure de créer vos propres sites Web avec Figma en utilisant les fonctionnalités les plus essentielles, comme l' alignement automatique des éléments grâce à la mise en page automatique ou l'utilisation d' icônes vectorielles d'autres sites Web, édition d'images et le travail avec des couleurs et des textes globaux. Tout d'abord, nous allons créer la structure de base avec des formes. Ensuite, nous travaillerons avec des images et des icônes de réseaux sociaux. Ensuite, nous allons continuer à créer toutes les couches de textes. Enfin, nous combinerons des icônes et du texte pour créer des pièces plus complexes avec mise en page automatique C'est le cours qui vous convient. Si vous n'avez pas le temps de regarder un cours de dix heures avec toutes les fonctionnalités. Et vous voulez juste commencer avec vos propres idées en moins heure. Et la seule chose dont vous avez vraiment besoin pour commencer est d'avoir un compte Figma, mais c'est gratuit car je vais vous fournir toutes les icônes, les couleurs et les images. Si vous aimez apprendre par la pratique, en recréant quelque chose, alors ce cours est pour vous et j'espère vous voir de l'intérieur. 2. Créer une structure de base sur une grille de 12 colonnes: L'étape consiste à structurer la mise en page. Alors regardez ce design. Il comporte trois sections. Ce premier, puis la section de texte, puis le pied de page. Et il est préférable de créer d'abord ces trois sections afin de ne pas vous concentrer trop tôt sur les détails , car c'est ce que les designers aiment faire, mais cela ralentit votre progression, alors allons-y. Donc, dans votre nouveau fichier, nous devons d'abord créer un tableau d'art. Donc, avant de commencer à ajouter du texte et des couleurs, nous avons d'abord besoin d'un cadre. Le cadre est un peu comme une plage. Vous pouvez donc le faire en créant un cadre ici. Donc, si vous cliquez sur le cadre, vous pouvez voir de nombreuses options sur la droite. Celui avec lequel je commence toujours est un ordinateur de bureau. Cliquez donc sur le bureau, soit 14, 40 pixels de largeur. Et comme je l'ai dit, créons d'abord nos trois sections principales. Très bien, donc ce que vous allez faire, c'est aller ici, attraper un rectangle, puis créer une forme comme celle-ci. Là-bas. Vous pouvez faire glisser les bords pour vous assurer qu'ils sont alignés vers le haut. Alors nous avons un espace vide ici. Ensuite, nous avons un pied de page en bas qui nous permet de créer une autre forme à partir d'ici, mais il est plus facile de créer une copie de celle-ci. Maintenez donc la touche Alt ou Option enfoncée, puis cliquez et faites glisser, pour créer un doublon. Maintenant, vous voulez l'aligner exactement au milieu. Nous allons donc utiliser ici notre option Aligner, qui est bien plus agréable que d'essayer de l'intégrer. Cliquez donc simplement sur Middle Align , puis sur ici vers le bas, car c'est ce que nous voulons. ne nous reste plus qu' à faire glisser cette barre vers le bas et elle est toujours parfaitement alignée, mais notre design est un peu court. Donc, si vous vous accrochez, vos tableaux d'art étaient encadrés ici, vous pouvez allonger un peu l'ensemble du tableau. Vous pouvez d'ailleurs effectuer un zoom arrière en maintenant la touche Commande ou Contrôle enfoncée. C'est Alt ou Control sous Windows, je ne suis pas vraiment sûr. Ensuite, faites-le simplement glisser vers le bas ou vous pouvez simplement changer le numéro ici. Je vais le changer en 1700, comme ça. OK, maintenant, nous pouvons placer la nourriture ou la remettre en bas avec cet outil et la faire monter un peu plus haut Nous devons également la placer un peu plus haut. Nous aborderons cette partie qui se chevauche plus tard, car c'est un peu plus difficile. Mais pour l'instant, créons simplement une forme pour notre image. Alors maintenant, je vais prendre un nouveau rectangle comme celui-ci. Vous pouvez également y accéder en cliquant sur le R n et en créant un rectangle comme celui-ci. D'accord, mais maintenant, où allons-nous réellement l'aligner ? C'est un problème. Nous devons donc maintenant nous plonger dans les réseaux. Comme vous l'avez probablement remarqué, tous les sites Web sont basés sur une grille et certains sites utilisent cette grille, mais la plupart des sites Web conservent le contenu dans une largeur de pixels spécifique, car sinon les zones de texte deviennent trop larges et la lecture n'est pas confortable. Nous avons donc tous les sites Web sont basés sur une grille et certains sites utilisent cette grille, mais la plupart des sites Web conservent le contenu dans une largeur de pixels spécifique, car sinon les zones de texte deviennent trop larges et la lecture n'est pas confortable. Nous avons besoin d'un script pour aligner notre image. Alors allons-y. Je vais cliquer sur mon tableau d'art ici. Et puis ici, vous pouvez voir les mises en page créées, vous pouvez cliquer sur le plus. Ici, il crée une grille standard, mais il s'agit d'une grille horizontale et verticale. Cliquez donc sur celui-ci ici, cliquez sur Colonnes car nous ne voulons que 12 colonnes. 12 est la norme de l'industrie car vous pouvez facilement créer deux boîtes, trois et 4.6, ce qui est plutôt sympa. Nous allons donc utiliser 12 colonnes. Cela ne fait rien, mais vous devez cliquer à l' extérieur pour voir les modifications. Est-ce que ce serait au centre ? Parce que maintenant ça s'étire. Parfois, c'est ce que vous voulez, mais pour ce design, je ne le veux pas. Cliquez donc sur le centre , puis vous devez indiquer à Figma largeur de chaque colonne. Une taille d'utilisation courante pour cela est 75. Pourquoi ? Eh bien, parce que d' ici à ici, il s'agit de 11 20 pixels, ce qui est utilisé dans de nombreux outils de création comme Elementor. Comme vous pouvez le voir, whoa, whoa, je l'ai aligné presque parfaitement. Un pixel, ce qui est une coïncidence. C'est donc plutôt drôle. Je vais donc aligner cela sur la grille. Et je vais aussi l'élargir un peu comme ça, parce que je veux qu'il s'étende sur six colonnes comme ça. Et si vous le faites, vous pouvez voir que c'est exactement à 150 pixels de cette section. Et à partir de cette section, vous pouvez réellement l'activer en maintenant la touche Option ou les commandes , puis vous pouvez voir les pixels. Donc, si vous passez la souris avec votre souris, ce qui est bien, d'accord, ajoutons maintenant quelques couleurs. Je vais faire le plein ici et je vais changer la couleur en noir pur parce que je veux utiliser du noir pur sur ce site Web. Et puis vous pouvez prendre cette forme et la mettre en noir. Mais il y a une astuce que vous devez connaître, les colliers, car, par exemple noir est utilisé à de nombreux endroits dans ce design. Vous souhaitez donc enregistrer cette couleur afin de pouvoir la réutiliser ultérieurement. Alors maintenant, celui-ci est noir. Cliquez ensuite sur ces quatre points. Ça s'appelle Style. Ensuite, vous pouvez ajouter cette couleur aux styles de couleur, les styles de couleur ici, ce des actifs de couleur dorés dans Adobe XD, c'est pareil. Ce sont des couleurs mondiales. C'est ainsi que je pense qu'ils devraient l'appeler. Vous cliquez donc sur le plus et vous lui donnez un nom, par exemple noir. Très bien, vous cliquez sur Créer un style, et celui-ci est maintenant enregistré. Donc, si vous n'avez pas cliqué sur une autre forme, au lieu de simplement changer la couleur à partir de là, vous pouvez cliquer à nouveau sur les quatre points , puis sélectionner votre noir. Vous pouvez voir un peu plus facilement pour celui-ci. Nous n'avons pas besoin de changer la couleur car dans notre design, le fond est en fait gris doux. Donc, si vous souhaitez utiliser les mêmes couleurs que moi, vous pouvez les faire glisser dans le fichier. Je vais donc partager ces fichiers dans la description ci-dessous afin que vous puissiez les télécharger. Et puis tu peux faire glisser ma couleur si tu veux, comme ça, agrandir un peu. Voici donc mes couleurs, juste une capture d'écran de ma Figma en fait. Ensuite, vous pouvez saisir l'arrière-plan. Alors prenez vos tableaux d'art. Maintenant, il est réglé sur blanc, c'est-à-dire f, f, f, f. Vous cliquez ici et vous pouvez maintenant cliquer sur cet outil. Vous pouvez également y accéder d'ailleurs, en cliquant sur celui-ci, puis vous passez au gris clair et boum, vous cliquez dessus. Et je recommande également de vous ajouter cette couleur. Cliquez donc à nouveau sur les quatre points et appelez cela un style de création gris doux. Alors, où sont toutes ces couleurs et ces formes globales ? Vous pouvez donc y accéder en cliquant à l'extérieur de vos tableaux d'art, non pas dans votre design, mais à l'extérieur. Ensuite, vous pouvez le voir ici, des styles locaux, et voici vos couleurs. Vous pouvez les modifier par la suite. Supposons donc que vous souhaitiez changer votre noir pour ne pas le remplacer par du noir à 100 %, mais un peu plus doux que, comme vous pouvez le constater, cela change dans l'ensemble de votre design, ce qui est évidemment génial. Nous allons juste l'éteindre un peu plus légèrement comme ça. Ensuite, la dernière chose à faire est créer cette forme diagonale. C'est également très facile à faire. Vous pouvez simplement cliquer sur cette forme, puis double-cliquer à nouveau dessus. Vous pouvez désormais accéder aux points individuels. Vous pouvez donc prendre celui-ci et le mettre en place comme ça. Oui, c'est quelque chose comme notre design. Très bien, puis cliquez à l'extérieur, double-cliquez dessus, et maintenant c'est terminé. La structure de base est donc ici. Passons maintenant aux images et aux icônes. 3. Comment travailler avec les images et les icônes de vecteur: Voici donc l'image dont nous avons besoin. Vous pouvez donc faire glisser l'image comme ceci, puis la masquer comme ceci. Mais ce que j'aime faire, c'est simplement cliquer sur l' image. Ensuite, au lieu d'utiliser une couleur, utilisez une image comme arrière-plan. Maintenant, cela est lié aux couleurs globales. Je vais déconnecter ce clic ici. Ensuite, vous pouvez sélectionner, au lieu d'un solide, une image. Vous pouvez maintenant faire glisser votre image ici, puis elle sera masquée. Vous avez même des modifications très simples ici. Si vous souhaitez modifier légèrement l'image, augmentons légèrement l'opacité. Ça a l'air plutôt cool. Et maintenant, votre image est là, mais elle n'est pas dans la bonne position. Donc, si vous maintenez la touche Option ou Alt enfoncée et que vous double-cliquez dessus, vous pouvez le repositionner comme suit. Assurez-vous de maintenir la touche Shift enfoncée de manière à ce qu'elle s'adapte proportionnellement, puis placez-la dans la position souhaitée. Il suffit de regarder notre exemple. C'est là que je veux qu'il soit. Mais maintenant, nous avons une lacune ici, alors cliquez en dehors de celle-ci. Ce qui est beau avec Figma, c'est que vous pouvez avoir plusieurs couches dans un remplissage. Nous avons maintenant une image sous forme de couche dans un fond, mais nous pouvons ajouter une autre couche par-dessus. Donc, si vous cliquez sur le signe plus, vous pouvez ajouter une couche par-dessus. Maintenant, c'est un solide qui a une opacité de 20 %. Donc, si j'augmente la publicité, tu ne le verras pas. Mais si nous passons ensuite au linéaire, juste un dégradé, alors nous pouvons dire que nous voulons passer du noir au blanc. Donc, celui de gauche est en noir à 100 %, et celui de droite est à zéro pour cent. Il ne semble pas qu'elle soit activée à 100 % car cette couche a également une opacité, je vais la changer en 100 s. Et maintenant, vous pouvez voir que nous y sommes presque. Je vais donc ouvrir à nouveau mon dégradé. Je vais juste saisir ce point et le placer ici. Donc, comme vous pouvez le voir, c'est plutôt cool, deux couches en une seule forme. Nous n'avons pas eu à grouper quoi que ce soit, et tout est là, sur la droite. Très bien, pour cette image, je vais faire de même. Je vais donc cliquer ici, puis passer à l'image solide, puis faire glisser mon image ici et là. Nous pouvons le repositionner à nouveau, mais je suis d'accord. Nous avons donc maintenant deux images. Faisons glisser quelques icônes. Je vais aller dans mon dossier. J'ai trois icônes SVG ici, qui sont des icônes effectrices, puis faites-les glisser dans votre Figma comme ceci. Ils ne sont pas tous de la même taille et nous voulons quand même qu'ils soient plus petits. Alors, faisons-en un, faisons-le glisser ici. Et faisons en sorte que celui-ci soit beaucoup plus petit pour ce design, je veux qu'ils soient de 30 x 30. Vous pouvez donc simplement le faire glisser ici et regarder les chiffres. Ou vous pouvez aller ici et modifier la largeur et la hauteur. Donc, si vous mettez celui-ci à 40, il va s'étirer. Donc, si vous ne le voulez pas et que vous vous assurez celui-ci est lié, puis si vous le modifiez, cela changera en quelque sorte la largeur et la hauteur. Donc, pour l'instant, je vais le mettre à 30. La plupart des gens vont le faire pour ces deux-là peuvent les sélectionner tous les deux en maintenant la touche Shift enfoncée, sélectionner celui-ci, puis les mettre à 30. Et maintenant, vous pouvez voir que nous devons traiter les icônes, faites-les glisser ici. Et maintenant, nous allons utiliser la mise en page automatique pour la première fois. C'est la fonctionnalité la plus étonnante, je pense, de Figma. Si vous les sélectionnez tous et que vous cliquez sur Shift a, cela créera une grille. ne s'agit pas d'un groupe. C'est un peu comme un groupe qui aime plus de fonctionnalités. Ainsi, dans un outil comme Adobe XD, vous pouvez tout regrouper. Mais ici, la mise en page automatique, c'est beaucoup plus agréable car maintenant, par exemple vous pouvez faire des choses comme ça. Mais comme je l'ai dit dans l'intro, c'est vertical ou horizontal. Nous voulons également que ces icônes soient blanches. Donc, si vous allez ici, vous pouvez voir avec quel type de couleurs nous travaillons pour ces icônes. Je peux donc les mettre en blanc. Et je veux aussi ajouter du blanc à ma couleur. Créez donc un style universitaire blanc. Et nous y voilà. Très bien, ajoutons nos icônes aux grilles. Mais notre meilleur est parti. Je l'ai fait en maintenant la touche Shift G enfoncée. Vous pouvez masquer et afficher votre grille ou vous pouvez aller ici et utiliser cet œil ici. Assurez-vous donc d'ajouter vos icônes ici. Et nous allons travailler beaucoup plus mise en page automatique à l'étape suivante, qui consiste à travailler avec des couches de texte. 4. Comment travailler globalement avec les couches de texte et les polices: OK, ajoutons donc quelques couches de texte. Commençons d'abord par les plus grands. Donc celui-ci ici, celui-ci et celui-ci. Alors je vais aller ici. Je vais sélectionner le T pour l'outil Texte. Je vais cliquer ici et nous allons taper Fight Like a Champion. Et ici, vous pouvez voir la nouvelle fonctionnalité de Figma, à savoir la correction automatique. C'est vraiment cool. Donc, si vous êtes dans votre couche de texte épaisse sur Mac et que vous êtes maintenant corrigé automatiquement, super cool. La police que je veux utiliser ici est Sarah, puis condensée. Vous pouvez cliquer ici : toutes les polices Google sont automatiquement chargées. Ensuite, je veux utiliser la version en gras. Je veux qu'il soit de 123D en termes de taille, et je veux que le texte soit en majuscules. C'est un peu caché ici. Si vous cliquez sur Paramètres de type, vous pouvez le mettre en majuscules ici. Très bien, maintenant je vais réduire la largeur de la couche de texte parce que je voulais faire une pause. Comme vous pouvez le constater, mon design ne fonctionne pas comme ça ici, ce que je n'aime pas vraiment. Donc, pour l'instant, je vais juste cliquer après le a, puis cliquer sur Shift Enter pour obtenir ce que je veux. Mais comme vous pouvez le constater, la hauteur de ligne est beaucoup trop élevée et vous pouvez la modifier ici. Pour ce qui est de la hauteur de ligne, je vais la situer à 90 % pour toutes les couches de textes d'audit. Vous pouvez utiliser notre pourcentage le plus élevé, supérieur à 100, mais pour les gros titres, il est inférieur. Cela dépend aussi beaucoup des téléphones, mais c'est ce que j'ai trouvé. Très bien, maintenant, réactivons la grille pour pouvoir l'aligner dans les deux sens. Je ne vois pas vraiment le rouge sur ce fond noir, alors changeons également la couleur de notre grille. Je vais donc cliquer sur mon tableau d'art. Je vais revenir à la grille, et je vais juste changer la couleur ici. C'est quelque chose que nous pouvons réellement voir, peut-être quelque chose comme ce bleu, un peu intense ici, mais nous devons le voir. Très bien, c'est un peu mieux maintenant que nous pouvons au moins voir ce que nous faisons. D'accord ? Je vais donc éteindre à nouveau le réseau avec Shifts C. Comme vous pouvez le voir sur mon design, champion du monde est composé de rats. Alors, créons simplement ce mot « rétine ». Je vais double-cliquer dessus , puis je vais cliquer sur Plus, je peux changer le remplissage couleur rouge comme celle-ci, avec une opacité de 100 %. Je pense que la couleur était plutôt quelque chose comme ça. Alors d'accord, maintenant ce texte est également lu. Faisons maintenant une version plus petite de ce texte. Je vais donc créer un doublon en maintenant Option ou Alt enfoncée comme ceci. Et maintenant, je vais modifier la taille ici à 50 et la hauteur de ligne à 110 %. Parce que s'il est plus petit, vous avez besoin d'un peu plus d'espace. Très bien, dans mon design, ce texte est noir, donc je vais sélectionner celui-ci. Je vais créer un remplissage et nous allons le mettre en noir. Et bien sûr, nous allons utiliser nos couleurs mondiales. Et ce texte est de la même taille que ce texte. Maintenant, nous pouvons également enregistrer cette couleur sur nos téléphones mondiaux. Donc, de la même manière, cliquez sur les quatre points puis cliquez sur plus. Et je l'appelle comme vous voulez, par exemple je vais l'appeler rubrique 2 parce que cette grande rubrique est la rubrique 1. Assurez-vous de cliquer sur Créer un style. Et maintenant, vous pouvez voir que cela a changé. Maintenant, si nous faisons une copie de ce texte et que nous le rendons blanc, et que nous cliquons en dehors de notre tableau d'art, nous pouvons voir notre police globale ici. Et si nous le changeons ici, disons que nous allons modifier sa hauteur de ligne. Maintenant, cela les change tous les deux. Très bien, parfait. Cliquez donc à nouveau sur la grille. Bien sûr de l'aligner. Changez les textes, diminuez avec, et dans notre conception, le mot suivant est rats. Essayons donc de sélectionner les rats. Mais comme vous pouvez le voir, nous n'avons pas sauvé le rat. Nous devons donc revenir à celui-ci. Alors, ce rat, nous devons le sauver. Passons donc au style de remplissage, cliquez sur le signe plus, puis appelons ce rat qui a créé un style. Alors maintenant, ce texte est rouge et blanc. Je ne me suis pas connecté au blanc non plus, comme vous pouvez le voir comme ça. Alors maintenant, si vous accédez à cette couche et que vous sélectionnez la suivante, vous pouvez cliquer sur le blanc puis sur les rats. Et maintenant, toute cette couche de texte a deux couleurs globales, comme vous pouvez le constater, parfaites. Nous avons deux autres couches de textes simples , à savoir celle-ci et le menu. Alors créons simplement cela. En cliquant à nouveau sur le T, créez une zone de texte comme celle-ci. Je veux m'inspirer du Lorem Ipsum. Je n'ai encore installé aucun plugin pour le faire. Je vais donc simplement utiliser mon extension Chrome. Mais il existe des moyens de le faire dans Figma. Je vais d'ailleurs créer une vidéo séparée sur les plugins pratiques, alors collez le texte de Lorem Ipsum dedans. Et maintenant, nous devons détacher les couleurs globales parce que nous voulons un autre style pour notre corps et que nous voulons utiliser la police. La réponse sera beaucoup plus petite, comme 16, ce qui est une bonne taille pour les corps de police. La hauteur de ligne doit être de 170, car cela convient mieux au corps du texte. La couleur que je souhaite utiliser est le gris, mais c'est le gris le plus foncé pour le corps du texte. Vous voulez presque toujours une police un peu plus claire, sinon le contraste est trop prononcé. Donc, ce que je vais faire, c'est appeler notre choix couleur que j'ai préparé comme ça. Et bien sûr, je vais également ajouter cette couleur à la palette, le gris, d' accord, nous ne voulons pas que tout soit en majuscules, qui a voulu être normal comme ça. Et nous ne voulons pas non plus que tout soit bouclé. Cela devrait juste être régulier. Maintenant, cela ressemble à un excellent corps de textes. Je constate également que j'ai oublié de modifier les textes. Rallumez la grille pour vous assurer de l'aligner sur la grille. Donc celui-ci sur la gauche , puis celui-ci sur les bords. Je vais ajouter une entrée ici pour la rendre un peu plus lisible, puis je n'oublierai jamais d'ajouter les polices à vos globales. Alors, ici, ou je peux le faire. Et nous appelons ce corps de textes ont créé le style. Celui-là. Je n'ai pas non plus connecté cela, mais bien sûr, nous allons également utiliser le titre, car celui-ci se trouve également sur le titre deux. Très bien, passons maintenant au menu, car c'est la dernière étape avant de passer aux combinaisons entre Je peux envoyer des textes et nous allons utiliser la mise en page automatique pour cela. Copions donc celui-ci avec Alt ou Option. Faisons en sorte qu'il soit blanc. Détachons le titre deux parce que nous voulons créer un nouveau style. Celui-ci doit avoir 16 ans. Très bien, c'est un style que nous voulons, donc je vais l'ajouter aux stèles. Encore une fois. Je travaillerais toujours un peu au début, mais tu m'en remercieras plus tard. D'accord ? Je vais appeler ce menu, d'accord, maintenant je vais le remplacer par accueil, mais cette zone de texte est un peu trop large. Donc, si vous double-cliquez ici, cela devient un seul élément. OK, je vais donc en créer d'autres, peux maintenant tous les sélectionner. Mais si j'essaie, mon image est un peu déplacée. Donc, dans cette situation où vous travaillez sur un arrière-plan, je vous suggère de récupérer votre couche d'arrière-plan, puis de cliquer avec le bouton droit, puis de la verrouiller ou de la déverrouiller. Ou vous pouvez utiliser Command Shift L. Et maintenant, vous pouvez simplement sélectionner facilement vos couches de cette manière. Cliquez à nouveau sur Shift a pour la mise en page automatique, et voilà votre menu. Ce qui est également intéressant dans toute notre mise en page, c'est la façon dont vous pouvez cliquer puis modifier ses positions. Et ça colle. Comme vous pouvez le voir, c'est vraiment très agréable. Nous voulons 30 pixels entre les deux. Très bien, je vais le positionner et nous avons besoin d'un peu d' espace pour le bouton. Donc, pour l'instant, je vais juste le laisser ici. Et puis le dernier petit détail que j'ai oublié d'ajouter est cette petite ligne. Pour être honnête, je viens d'utiliser l' outil rectangulaire. Cliquez donc sur le rectangle, créez un petit rectangle, puis sélectionnez les deux rouges comme ceci. Et j'ai un peu réduit mon titre. C'est en fait tout ce que j'ai fait. D'accord. Et c'est tout ce dont nous avons besoin pour le moment. Oh, et j'ai aussi oublié une autre chose en bas, nous avons des termes et conditions et une politique de confidentialité. Il ne s'agit que de deux couches de texte simples avec la police du corps. Vous pouvez donc simplement cliquer sur T et taper la politique de confidentialité. Assurez-vous de choisir la police de votre corps comme celle-ci, entendre ici, créer une copie et de changer la police jaune. Assurez-vous de les aligner tous les deux dans la grille. Nous les mettrons en page automatiquement plus tard, mais pour l'instant, c'est tout ce dont nous avons besoin. OK, ça commence à ressembler à quelque chose. Passons donc à l'étape suivante, où nous allons aller encore plus loin avec la mise en page automatique. 5. Utiliser la mise en page automatique pour créer des mises en page qui s'ajustent automatiquement: Bon, finissons maintenant notre menu avec le logo sur la gauche et le bouton sur la droite. Et nous allons ajouter cet Eigen que nous allons utiliser. Je vais le faire glisser, disons à l'extérieur d'ici, je vais d'abord le rendre blanc parce que sinon nous pouvons le voir, puis le faire glisser ici, l'agrandir un peu. Ensuite, je vais copier mon titre, modifier les textes. Je vais passer à 30 pour cette icône. Je veux que ce soit rouge. Donc, pour l'instant, c'est blanc. Je vais en faire des rats. Et encore une fois, sélectionnez-les tous les deux, créez-en une mise en page automatique. Nous voulons maintenant créer nos boutons. Ainsi, dans la plupart des autres outils, vous créez d'abord un arrière-plan, puis vous placez un texte dessus, puis vous le regroupez. Mais dans Figma, c'est un peu différent avec les boutons. Je veux donc utiliser le même textile ici, mais lorsque je duplique celui-ci avec un D ordinaire, il restera à l'intérieur du cadre, ce qui n'est pas ce que je veux. Vous pouvez donc simplement cliquer puis faire glisser le pointeur à l'extérieur de celui-ci. Et maintenant, la mise en page automatique est gratuite , modifiez-la pour vous inscrire. Maintenant, transformez également celle-ci en mise en page automatique avec Shift a, puis elle ajoutera cette zone. Vous ne le voyez pas encore, mais il y a une boîte. Rendons la case visible en la remplissant. Je vais donc passer à Fill, je vais lui donner un fond rouge. Et maintenant, vous pouvez voir la boîte. Elle peut voir que cette image ne contient que des attaques. C'est un peu comme un groupe, mais un peu différent. Mais ce qui est beau, c' est que vous pouvez augmenter le rembourrage horizontal cette façon et aussi le plier verticalement Je pense au tennis, d'accord, nous avons besoin d'un autre bouton ici. Positionnons-le d'abord. Je vais donc réactiver ma grille, nous allons la positionner et je veux m' assurer qu' elle est alignée avec le logo. Et aussi, je veux que celle-ci soit une ligne afin que vous puissiez essayer de le faire vous-même ou vous pouvez simplement les sélectionner toutes puis appuyer à nouveau sur Mise en page automatique. Et maintenant, il est automatiquement aligné au milieu. Mais nous ne voulons pas de menu ici. Nous voulons que cet espace soit réduit. Vous créez donc ici une autre mise en page automatique car par défaut, elle espacera tous les éléments de manière uniforme. Si vous sélectionnez ensuite celui-ci et que vous le distribuez à nouveau oralement avec Shift a. Vous pouvez ensuite réduire cette taille de deux, par exemple pour une association caritative. Et maintenant, vous pouvez réduire cette taille ou vous pouvez simplement faire glisser le côté ici pour l'agrandir. Mais cela ne fonctionne pas. Pourquoi ? Eh bien, parce qu'il existe un autre outil que vous devriez connaître et qui est un peu caché. C'est en dessous. Si vous passez à la mise en page avancée, par défaut, il s'agit simplement d' empilement ou de paquets. Mais si vous le placez dans un espace entre cela, il créera automatiquement cet espace dans la boîte. Donc, dans ce conteneur, There's fonctionne en fait de la même manière que le conteneur. Nous avons donc maintenant celui-ci qui est le conteneur horizontal. Nous avons celui-ci qui est horizontal et comporte également un certain écart entre les deux. Et puis nous avons tout ce conteneur qui voit la partie droite comme une seule pièce, puis la partie gauche comme une seule partie ce qui crée autant d'espace que possible entre les deux. Alors maintenant, si nous diminuons cela, comme vous pouvez le constater, ce sont parfaitement des compétences. OK, ajoutons maintenant un autre bouton ici. Mais bon, nous avons déjà appris que nous pouvons réutiliser des choses. Il en va donc de même pour le bouton. Je vais donc cliquer à nouveau sur le bouton , double-cliquer dessus. Et maintenant, nous allons utiliser cette fonctionnalité appelée composants. Donc, si vous cliquez sur cette icône, cela crée un composant et, dans les composants, un élément réutilisable. Cela fonctionne donc de la même manière que les couleurs et les polices générales, mais il n'est pas enregistré au même endroit. Si vous cliquez en dehors de votre tableau d'art, il n'est pas enregistré ici. Ils l'ont ici sur les actifs. Donc, ici, vous pouvez voir le bureau, nous avons ce bouton. Maintenant, il est préférable de diriger le bouton d' ici vers notre design de cette manière. Et ici, vous pouvez voir si vous revenez aux couches, qu'il s'agit d'un cadre. Maintenant, il a cette forme qui montre qu'il s'agit d'un composant, mais que ce ne sont pas les composants principaux. Vous pouvez toujours trouver le composant principal en bouton droit de la souris, puis en cliquant sur les composants principaux. Et si vous modifiez ce composant parce que c'est le composant principal, l'autre changera également. Alors essayons-le. Si je dois augmenter la taille, comme vous pouvez le constater, les autres y arriveront également. Alors allons-y. Mettons-le sur 30, agrandissons un peu le bouton, et ça fonctionne parfaitement. Passons maintenant à la mise en page automatique de cette section. Alors, que voyons-nous ici ? Nous avons cette pièce, cette pièce et cette partie, qui sont alignées verticalement. Mais si nous les sélectionnons tous et appuyons sur Commenter un, ils seront empilés verticalement. Vous devez donc prendre du recul avec le z commun, d est composé de deux parties, doit être horizontal. Je vais donc d'abord créer une mise en page automatique de celui-ci, puis Figma voit déjà qu'il est horizontal. Et maintenant, Figma considère cela comme un élément. Maintenant, nous pouvons tous les prendre et appuyer à nouveau sur Shift a. Maintenant, nous pouvons modifier les valeurs ici, et il fera ce que nous voulons. Très bien, alignons ça au milieu. Je veux que l'image ait la même taille, il suffira donc de la redimensionner. OK, ça a l'air plutôt bien. Faisons juste un autre exercice avec mise en page automatique, car c'est très important. OK, donc dans notre design final en bas de page, nous avons cette icône ici, puis le courrier électronique, puis les termes et conditions et la confidentialité ici, nous allons utiliser la même astuce. Tout d'abord, nous avons besoin d'une icône. Et une icône ne fait pas partie de ce dossier parce que je voulais vous montrer quelque chose. Donc, si vous allez sur, je peux y trouver .com. Il y a un site Web magnifique. Vous pouvez jeter un œil à leurs packages. Ils ont de belles icônes ici. Mais si vous recherchez simplement ici, par exemple un e-mail, vous pouvez trouver toutes sortes d'icônes. Ils ne sont pas tous gratuits, mais beaucoup le sont. Donc celui-ci, par exemple celui-là, est beau. Donc, par défaut, c'est en PNG, mais vous pouvez passer au SVG, qui est vectoriel. Et puis, si vous cliquez sur Copier ici, vous revenez à votre Figma et vous l'avez basé. Il est déjà là et vous n'avez pas besoin de l'enregistrer d' abord sur votre ordinateur, c'est magnifique. Alors changeons cela en blanc aléatoire, mettons-le en bas de page ici. J'ai besoin d'une couche de texte pour mes informations e-mail sur Box champion.com. D'accord, ajoutons maintenant la mise en page automatique à toute cette section. Tout d'abord, sélectionnons-les tous, mais maintenant, nous allons également sélectionner l'arrière-plan. Je vais donc à nouveau verrouiller cet arrière-plan. Sélectionnez-les tous, déplacez la touche A, cela ne fonctionne pas. Nous devons donc créer une boîte ici et une boîte ici. Donc celui-ci en mise en page automatique, celui-ci en mise en page automatique, puis ces deux cases dans une autre mise en page automatique. Et puis, comme vous pouvez le voir, parfaitement Alliance. Montre-le encore une fois. Celui-ci était déjà dans une mise en page automatique. Si vous voulez que ces deux éléments soient alignés au milieu, vous pouvez également les sélectionner tous les deux et les mises en page automatiques, parfait, n'est-ce pas ? Ces deux éléments n'ont pas besoin d' être dans une mise en page automatique. Vous pouvez le faire, mais je ne pense pas que ce soit nécessaire. Maintenant, nous en avons terminé avec la plupart des choses de base. Maintenant, nous allons passer au Spark le plus difficile, qui est celui-ci. C'est la plus difficile. 6. Créer une ligne d'icône flottante avec mise en page automatique: Nous devons donc retourner sur le site Web et rechercher la forme physique. Je peux, par exemple, récupérer des icônes sympas. Vous pouvez filtrer gratuitement sur la gauche. Au fait, nous en avons ici un magnifique exemplaire gratuit. OK, maintenant j'ai trois icônes. Tout d'abord, je vais les faire de la même taille. Je vais tous les sélectionner. Assurez-vous de lier celui-ci et ensuite je vais en faire 45. Très bien, ça a l'air décent. Mais comme vous pouvez le constater avec les icônes de téléchargement, elles ne se ressemblent parfois pas car celle-ci semble beaucoup plus grande. Parfois, il suffit de le modifier un peu. Utilisez vos yeux pour créer quelque chose qui ressemble un peu. D'accord, nous devons donc également traiter les textes, ce qui en est un autre Il a une taille de 24. Alors allons-y. Je vais créer une couche de texte. Commençons par celui-ci car je pense qu'il se ressemble. Dissociez-le 24, ça a l'air bien. Encore une fois, nous allons ajouter du texte aléatoire ici. Je vais faire de ces textos des rats. Maintenant, vous vous dites probablement : « Hé, nous avons besoin d'un rectangle ici, mais nous pouvons utiliser la mise en page automatique de la même manière que nous l'avons utilisée pour le bouton, ce qui est plutôt cool. Donc, d'abord, nous devons tout mettre dans une mise en page automatique. Mais si nous devons le faire maintenant, ce sera d'affilée. Il s'agit donc d'une ligne verticale, d'une rangée verticale et d'une rangée verticale. Donc, trois mises en page, alors toutes ces trois doivent également être dans une mise en page automatique, car je vais ajouter la mise en page automatique ici. Très bien, nous pouvons maintenant ajouter le même type d' arrière-plan que nous l'avons fait avec le bouton. Je vais donc cliquer ici, puis cliquer sur les blancs. Vous pouvez voir que cela ajoute un arrière-plan. Et maintenant, si nous augmentons le rembourrage, vous pouvez également créer une boîte comme celle-ci. Notre grille est à nouveau en maintenant la touche Shift G enfoncée et je veux qu'elle soit alignée au milieu. Donc, d'abord, je vais le faire, puis nous allons le déplacer légèrement vers le haut en maintenant les quarts de travail enfoncés, pour qu'il remonte tout droit. Et maintenant, si j'augmente le rembourrage, ça commence à se faire par la gauche, mais ce n'est pas ce que je veux. Il y a donc une autre astuce ici, à savoir les contraintes. Donc, si vous mettez une contrainte qui se trouve maintenant à gauche, au centre, et que vous commencez maintenant à augmenter le rembourrage. Maintenant, c'est ce qui se passe. Maintenant, il ne se déplace pas vers la droite, ce qui est plutôt sympa. Nous voulons qu'il soit aussi blanc ici. Si nous modifions également l'espace entre les éléments ou l'écart entre les éléments, les sites s'agrandissent également , car il s'agit du rembourrage, ce qui permet de conserver toujours 200 pixels. Tout d'abord, déterminez l'espace que vous souhaitez entre les icônes. Donc, par exemple, 120, puis diminuez la taille pour l'adapter. Zoomez un peu pour vous assurer qu'il s'affiche parfaitement sur les grilles. Très bien, maintenant, encore Shift G, et il y a encore une chose à faire pour cette partie une ombre, parce que je ne sais pas si vous l'avez remarqué, mais il y a cette ombre douce et parce que je ne sais pas si vous l'avez remarqué, mais il y a cette ombre douce très belle en dessous du barreau. Je vais donc cliquer ici et nous allons accéder à une nouvelle fonctionnalité appelée effets. Cliquez sur l'ombre tombante pour accéder à la première fonctionnalité. Il y en a quelques autres, mais pour l'instant, nous allons simplement utiliser Drop Shadow. Cliquez ici pour le modifier. Nous devons augmenter le flou. Cliquez donc ici et augmentez le flou, pour le rendre vraiment agréable et doux. Et pour la couleur, je veux utiliser des rats peut-être un peu plus foncés. Comme vous pouvez le constater, cela commence à devenir vraiment magnifique. Je vais aussi le baisser un peu, augmenter à nouveau le flou. Oh, c'est trop cool. Je vais diminuer l'opacité parce que c'est un peu trop intense. Mais maintenant, comme vous pouvez le voir, il commence à flotter. Et il y a un très beau contraste entre le fond blanc et ce fond gris avec une ombre rouge entre les deux. Regarde ça. Absolument magnifique. Comparons maintenant cette conception à notre conception finale. Et nous pouvons constater qu'il y a encore quelques différences. Cette image est un peu plus grande que les textes, ce qui est agréable, cela crée un certain équilibre. Faisons-le donc également avec notre design. Mais si nous allons ici et que nous augmentons le score en maintenant la touche Alt enfoncée, vous pouvez d'ailleurs faire les deux côtés. Nous n'avons pas assez d'espace pour cela Nous voulons donc passer à la nourriture ou vers le bas, mais cette couche est verrouillée et il s'agit de deux couches distinctes. Je veux donc vous montrer encore une chose c'est d'utiliser à nouveau les contraintes, mais ensuite d'une manière différente. Assurez-vous donc de trouver une quatrième couche sur la nourriture ou parce que vous ne pouvez pas cliquer dessus et vous verrez que celle-ci est verrouillée, alors déverrouillez-la. Maintenant, nous pouvons à nouveau ajouter un pied Sélectionnez le pied de page si vous appuyez sur Shift, cela créera une mise en page automatique. Encore une fois, je ne le veux pas parce que cela change le rembourrage. Donc, dans ce cas, j'utiliserais un groupe. Il suffit donc de cliquer avec le bouton droit de la souris, puis de grouper ou de Shift G, et maintenant de cliquer sur le groupe. Et puis, en ce qui concerne les contraintes, cliquez sur celle-ci parce que cette modification concerne celle-ci en bas. Cela signifie que chaque fois que vous allez changer de tableau d'art, celui-ci restera en bas. Maintenant, si nous cliquons sur notre tableau d'art, vous pouvez voir que notre pied de page reste collé au bas de la page, ce qui est bien car cela arrive souvent. Vous allongez votre page et ajoutez des éléments. Donc, si vous savez que votre pied de page et certaines couches doivent se trouver en bas, regroupez simplement les contraintes en bas. Et c'est vraiment sympa. Je vais l'allonger un peu. Ensuite, je vais récupérer tout cela, refaire cette mise en page automatique pour assurer que celle-ci est alignée au milieu. Et nous y voilà. Et puis il y a encore une différence. Et c'est le contexte. La raison pour laquelle celui-ci est plus beau , c'est à cause du contexte. Vous pouvez donc modifier la couleur de fond de l'ensemble de votre Figma si vous le souhaitez. Donc, si vous cliquez n' importe où en dehors de l' arrière-plan, vous pouvez également modifier cela. C'est ce que j'ai fait, et c'est pourquoi celui-ci est un peu plus beau. Et aussi, l'ICR de l'icône est un peu plus épais, ce qui n'est pas un peu mieux. Donc, comme vous pouvez le voir, c'est très similaire à notre design. C'est donc mon premier cours de base pour Figma. J'aimerais en faire beaucoup plus dans mes cours, mais j'espère que le premier vous a plu. Vous pouvez consulter mon profil pour voir plus de cours car vous pouvez également expliquer comment créer des sites Web. Et pour l'instant, je tiens à vous remercier d'avoir regardé.