Comment créer et animer une barre latérale pliante dans Figma

1. Bienvenue dans ce cours: Dans ce cours, je vais vous montrer comment concevoir et animer une barre latérale pliable s'agit d'un cours très pratique Il s'agit d'un cours très pratique qui vous apprendra à concevoir quelque chose que vous rencontrerez probablement au cours de votre carrière Je vais vous montrer les meilleurs outils et techniques que vous pouvez utiliser pour le faire rapidement et efficacement. Dans ce cours, vous découvrirez certaines des fonctionnalités les plus puissantes de Figma Je vais vous montrer comment utiliser la mise en page automatique pour que tout soit parfaitement aligné, comment gagner du temps avec les variables et les styles de couches, et comment rationaliser votre flux de travail avec des composants et des variantes. De plus, nous aborderons certaines techniques de prototypage avancées afin que vous puissiez facilement animer la barre latérale entre son état réduit et son état étendu Salut tout le monde, au cas où nous ne nous serions pas rencontrés, je m'appelle Adi. Je suis un concepteur et développeur web indépendant avec plus de dix ans d'expérience. Nous allons maintenant lancer ce projet de design avec un ensemble de wireframes et quelques éléments de marque Et je vais vous montrer comment utiliser correctement les différents logos fournis, comment choisir les bonnes couleurs dans la palette qui nous a été donnée, comment choisir le bon jeu d' icônes, la bonne typographie et comment réunir le tout dans un design cohérent Maintenant, comme il s'agit d'un cours très pratique, vous pouvez suivre en téléchargeant wireframes et les actifs de la marque et travaillant à mes côtés C'est un projet fantastique à mettre en pratique vos compétences et même à mettre en valeur dans votre portfolio. Alors prêt à plonger ? Commençons. 2. Le projet du cours: Le projet de classe est simple. Vous devez concevoir et animer une barre latérale pliable Maintenant, dans la description de la classe, vous trouverez un lien vers ce fichier Figma À l'intérieur, vous trouverez trois wireframes, chacun ayant une structure différente et chacun conçu spécifiquement pour une marque différente Vous trouverez également les atouts des trois marques. Ils sont, bien entendu, fictifs et contiennent les suites de logos, les couleurs de la marque et certaines informations typographiques Votre tâche consiste donc à choisir l'une de ces trois marques et à concevoir la barre latérale correspondante Pendant le cours, je vais concevoir celui pour le magasin Mingle, mais vous pouvez choisir ce que vous voulez Vous pouvez même choisir les trois et concevoir trois barres latérales à votre guise Lorsque vous avez terminé, exportez votre design sous forme d'image et publiez-le en tant que projet de classe. J'ai hâte de voir ce que tu trouveras. Et n'oubliez pas qu'au fur et à mesure, hésitez pas à poser des questions. Je suis là pour t'aider. Maintenant, commençons par le cours. 3. Choisir les icônes: La toute première étape consiste à choisir des icônes pour notre projet, ce qui est très important car icônes compléteront les liens de la barre latérale. Cela permettra aux utilisateurs de scanner la mise en page plus facilement et de déterminer rapidement le sujet de chaque lien. Maintenant, lorsque nous choisissons des icônes, il est important de compte un principe de conception appelé cohérence. Cela signifie essentiellement que toutes les icônes doivent avoir le même style. Qu'il s'agisse d' un contour, d'un duo de tons ou d'un solide, ils doivent avoir le même style. Ainsi, par exemple, si nous devons choisir des icônes de contour pour certains liens, nous ne devons pas choisir, par exemple, icônes continues pour les autres liens. Toutes les icônes doivent avoir le même style. Et le moyen le plus simple de s'en assurer est de choisir des icônes dans le même ensemble. Maintenant, il y a quelques sets que je vous recommande de vous procurer, et ils sont tous gratuits. Je vais juste les passer rapidement en revue. Le premier est consacré aux icônes sans titre de Jordan Hughes, et vous trouverez un lien vers celui-ci dans la description du cours Ensuite, nous avons Font Awesome, qui possède plus de 2000 icônes gratuites. Vous pouvez le trouver sur fontawesome.com. Alors les icônes bootstrap sont également une excellente option. Vous pouvez les trouver sur icons dotgtbootstrap.com. Enfin, nous avons les icônes Google Material. Accédez simplement à fonts.google.com et accédez aux icônes. Et vous en trouverez ici un certain nombre. Oui, vous pouvez rechercher différentes icônes. Vous pouvez même modifier le poids de l'icône ici, ce qui est très intéressant. Et tout cela est gratuit. Maintenant, pour le design que je vais créer dans ce cours, je vais utiliser les icônes sans titre car je pense qu'elles correspondent parfaitement au projet ou à la marque pour laquelle nous concevons Et en parlant de cela, laissez-moi vous montrer ce que je vais créer. J'ai donc reçu le fichier, le fichier de ressources pour étudiants que je vous ai montré lors des leçons précédentes. Et vous pouvez voir ici que nous avons les trois atouts de la marque. Et aujourd'hui, je vais concevoir pour la boutique Mingo, une plateforme de commerce électronique axée sur le shopping social Bien sûr, il s'agit d'une marque fictive, mais nous avons à peu près tout ce dont nous avons besoin ici. Nous obtenons les différents logos et les combinaisons de couleurs qui peuvent être utilisés. Et nous avons également les couleurs avec des variations pour les plus claires ou les plus foncées. Et nous avons également quelques informations typographiques. Il ne s'agit que des polices de caractères utilisées dans la conception du logo. Cela ne signifie pas nécessairement que nous les utiliserons dans la conception de notre interface utilisateur, mais ils sont là à titre indicatif, en fait. Maintenant, pour me faciliter la tâche et pour vous, j'ai créé de nombreuses variables pour toutes les couleurs que je vais utiliser. Comme vous pouvez le voir, nous avons ici des variables pour toutes les variations des couleurs utilisées dans les actifs de la marque. Pour les trois marques. Et en plus de cela, j'ai également créé styles de couleurs que vous pouvez voir ici dans la barre latérale, et travailler avec des styles de couleurs est vraiment simple Ainsi, par exemple, si je dessine un rectangle ici et que je souhaite ajouter ou modifier la couleur de fond pour l'une de ces couleurs prédéfinies, il me suffit d' aller dans le champ de remplissage ici, d' appliquer des styles et des variables, puis de cliquer dessus. Je choisis la couleur que je veux dans la liste, et maintenant elle utilise, par exemple, le Blue Lagoon 500. me fera gagner beaucoup de temps lors du choix des couleurs, car je n' ai pas à chercher des codes hexadécimaux ou, vous savez, à générer des teintes ou des Cela me fera gagner beaucoup de temps lors du choix des couleurs, car je n' ai pas à chercher des codes hexadécimaux ou, vous savez, à générer des teintes ou des nuances de ces couleurs sur place Tout est enregistré et prêt à être utilisé. Maintenant, choisissons les icônes dont nous avons besoin pour notre projet de design. Je vais donc concevoir pour Shop Mingle, comme je l'ai dit. Je vais donc aller sur la page Wireframe et prendre Wireframe two, qui est celui dont nous avons besoin Et je vais juste aller sur cette page ici et coller le wireframe. Ici. Je vais créer un cadre, Control ou Command R à renommer, et je vais renommer ces deux icônes C'est juste un endroit que je vais utiliser pour stocker toutes mes icônes. Voyons donc ce que nous avons. Nous avons une barre de recherche, nous avons donc besoin d'une icône de recherche. Pour en revenir à Untitled, je vais rechercher, je ne sais pas, Small ou MD, l'une d'entre elles Cliquez pour copier, je vais le coller et je vais le renommer pour le rechercher Ensuite, nous avons trois liens qui appartiennent à la catégorie des produits. Donc, une icône pour tous les produits. Cherchons une grille. Et ça va me donner cette icône. Copions-le, collez-le dedans, renommez-le en grille. Et la façon dont vous choisissez ces icônes est un peu subjective, je suppose. Cela dépend vraiment de la façon dont vous interprétez un certain lien. Personnellement, quand je pense à tous les produits, je pense, vous savez, à une collection, c'est vrai, à un groupe de produits. J'ai donc choisi l' icône en forme de grille parce qu'elle représente également un groupe de quelque chose, n'est-ce pas ? Il s'agit simplement d'une collection d'objets individuels. Donc, à mon avis, cela fonctionne très bien pour une page qui présente plusieurs produits. Ensuite, nous avons la liste des catégories. Maintenant, nous pourrions opter pour quelque chose comme une liste, mais je vais en fait rechercher une base de données, et cela me donnera ce résultat. Et la base de données, je pense que cela fonctionne encore une fois, très bien pour le lien des catégories car il symbolise une liste d'articles, une collection d'articles. Cela va donc très bien fonctionner. Renommons-le également. Prochaine étape, les nouveaux arrivants. Donc, quand je pense à de nouveaux arrivants, je dis : OK, nouveau, j'ai besoin d'être prévenu parce que c'est nouveau. Cherchons, par exemple, une sonnette de notification ou quelque chose comme ça, non ? Alors cherchez Bell, et je vais prendre Bell 03. Collé ici. Passons à autre chose. Commandes. Nous avons l'historique des commandes. Donc, quand je pense à l'histoire, je pense au temps passé, chronomètre, à l'horloge, quelque chose comme ça. Cherchons donc une horloge. Et allons-y avec cette horloge, revenons en arrière parce que nous parlons du passé, n'est-ce pas L'histoire. Je pense que cela fonctionnerait très bien. Renommez-le en horloge. Ensuite, suivez la commande. Alors, qu'est-ce que le suivi m'apporte ? Une localisation précise, non ? Et quand je pense à la localisation, je pense à une épingle de carte , à droite, ou vous savez, à une de ces épingles que vous placez sur une carte pour marquer un emplacement spécifique. Cherchons donc une épingle. Et allons-y avec ce Marker Pin 06. Copiez, collez, renommez. Passons à autre chose. Retours et remboursements. Donc, le retour, c'est lorsque vous renvoyez quelque chose, le remboursement, c'est lorsque vous renvoyez de l'argent. Alors réfléchissons à quelque chose avec des flèches, non ? Cherchons donc une flèche, et pour une flèche, il suffit de faire défiler la page vers le bas. Voyons charger d'autres icônes. Je pense que cela fonctionne plutôt bien. Interrupteur horizontal. Allons chercher celui-ci. Renommons-le en switch OK, ensuite, discutez avec le support. Alors, quand on pense au chat, on pense à quoi ? Un message. C'est bon. Passons donc à l'une de ces bulles de dialogue avec quelque chose à l'intérieur, peut-être ce carré de texte à message. Donc, copions-le. Basé sur le changement de nom en message Ensuite, FAQ. Les FAQ sont des questions fréquemment posées. Nous cherchons donc une question. Utilisons donc le point d'interrogation. Celui-ci, cercle d'aide. Je pense que cela fonctionnerait très bien. Renommez pour vous aider. Vient ensuite le centre d'aide. Celui-ci, je crois que j'ai vu celui-ci Life Boy. Cela fonctionnerait très bien. Renommons-le pour t'aider. Et quoi d'autre ? Nous avons des paramètres. Réglages, assez faciles. Nous recherchons les paramètres ici, et nous obtenons cette icône en forme de roue dentée C'est généralement ainsi que nous faisons les choses, ou, vous savez, nous pouvons saisir une partie de ceci ou une partie de cela. Il existe de nombreuses icônes que nous pouvons choisir ici, mais l'icône en forme de roue dentée est instantanément reconnaissable pour tous ceux qui recherchent la page des paramètres Renommons donc ces deux paramètres. Voyons voir, nous avons tous les liens ici. Nous avons également besoin d'une icône pour réduire et agrandir, n'est-ce pas ? Donc, lorsque nous pensons, vous savez , réduire ou agrandir, agrandir, la barre latérale, vous savez, grossit, réduit, la barre latérale devient plus petite Nous avons donc affaire à une direction, droite, vers la gauche ou vers la droite. Cherchons une flèche et voyons ce que nous trouvons ici. Faisons donc défiler la page vers le bas. Donc quelque chose comme ça. Cette icône de téléchargement s'affiche. Cela pourrait très bien fonctionner, sauf que j'aurais besoin de le faire pivoter. Cherchons l'alignement. Il se peut que nous y trouvions quelque chose. Oui, allons-y. Donc, une ligne à gauche et une ligne à droite. J'ai besoin des deux. Une ligne à gauche et une ligne à droite. OK, donc une ligne vers la gauche, nous l'utiliserons lorsque nous voulons réduire parce que la direction est la suivante, et une ligne vers la droite, nous l'utiliserons pour étendre car elle s'étend vers la droite. C'est bon. Voici donc toutes les icônes dont nous avons besoin. Rangeons ça un peu. Donc, une fois le cadre des icônes sélectionné, montons ici et nous allons ajouter la mise en page automatique. D'accord. Et permettez-moi de le déplacer pour que vous puissiez mieux le voir. Et je vais utiliser le rap comme direction, et je vais définir, disons, 64 pixels entre ces éléments et un rembourrage de 64 pixels sur tous les côtés Ainsi, toutes les icônes sont bien affichées dans une grille, comme ça. D'accord. Maintenant, une dernière chose que je veux faire ici, je veux me faciliter la vie sur le long terme. Je vais donc transformer chacune de ces icônes en composant. De cette façon, je peux utiliser la fonction d'échange instantané dans les composants de figma si je souhaite changer une icône de l' une à l'autre, et je vous le montrerai dans la prochaine leçon Mais pour l'instant, sélectionnons toutes ces icônes, et je voudrais toutes les renommer. Je vais donc renommer en cliquant avec le bouton droit de la souris, et je vais sélectionner renommer deux icônes, puis le OK, donc cela va juste les renommer en icon slash Search, iconlahGrid, icon slash database, etc. Maintenant qu'ils ont été renommés, je peux tous les transformer en composants. Pour ce faire, je vais aller ici dans la barre latérale, trois points, et je vais sélectionner Créer plusieurs composants Comme ça. Cela transformera donc chacune de ces icônes dans son propre composant. Et si je les ai nommées comme barre oblique dans le nom de l'icône, c'est parce que la barre oblique permet à Figma de regrouper ces icônes permet à Figma de regrouper Par exemple, je veux maintenant ajouter l'un de ces composants à mon canevas, et je vais dans le panneau Actifs ici Vous pouvez voir que mes icônes sont désormais regroupées sous icône, n'est-ce pas ? Vous pouvez tous les voir ici. Mais lorsque vous avez plusieurs composants, il est beaucoup plus facile de les classer ainsi. Donc, dans les ressources locales, toutes mes icônes que je viens de créer, tous mes composants sont désormais regroupés dans le sous-dossier des icônes, ce qui peut être vraiment très pratique. Très bien, nous avons maintenant les icônes. Nous avons créé les composants, il est donc temps de concevoir les éléments du menu. C'est pour la prochaine fois. 4. Configurer les éléments du menu: Maintenant que plusieurs éléments de menu ont à peu près la même structure, il est conseillé d' utiliser des composants. De cette façon, nous pouvons réutiliser les éléments du menu. Et si à un moment donné nous décidons de changer quelque chose, nous ne le faisons qu'une seule fois sur le composant principal. Je vais donc vous montrer comment nous pouvons le faire. Regardons la structure du menu ici. Nous aurons donc le texte, bien sûr. Apportons-en une copie ici et changeons la largeur en automatique. Maintenant, en plus du texte, nous avons également besoin d'une icône, non ? Prenons donc l'une des icônes. Disons le premier, et je vais le coller ici. Et si vous ne savez pas comment fonctionnent les composants dans Figma, c'est vraiment très simple Chaque composant comporte donc deux parties. Disons que vous avez le composant principal, puis vous avez l'instance, d'accord ? L'élément principal est la source unique de vérité, pour ainsi dire. L'instance est essentiellement une copie. L'idée est donc que, quelle que soit la modification que vous apportez au composant principal, cette modification sera propagée et appliquée à toutes les autres copies de celui-ci Ainsi, par exemple, ici, nous avons le composant principal qui s'appelle icon slash Grid Et remarquez l'icône qu'il utilise. C'est comme une icône en forme de diamant à part entière. Oui, c' est une copie de ce composant. Et dans le panneau des couches, vous pouvez voir qu'il a une icône différente. C'est un diamant vide. Donc maintenant, si je sélectionne le composant principal, et que je change par exemple sa couleur, vous verrez que la copie ou toutes les autres copies de celui-ci ont reçu cette modification. Il a une couleur différente. Donc, si je le ramène à ce qu'il était, les instances changeront également. C'est essentiellement ainsi que fonctionnent les composants dans FigMA. Bien sûr, il existe des utilisations plus complexes, comme vous le verrez dans ce cours, mais au niveau de base, cela se résume à Créons maintenant cet élément de menu. Nous avons donc une icône, et nous avons le texte. Réglons le texte sur Inter. Il s'agit de la police que nous utiliserons pour la conception de l'interface utilisateur dans ce projet Inter est une police gratuite disponible sur Google. Il a de nombreux poids différents et il a été spécialement conçu pour ce type d'application. Nous utiliserons donc 16 pixels interréguliers et également une hauteur de ligne de 150 % Maintenant que ces deux éléments sont sélectionnés, je vais appuyer sur Shift A pour créer un cadre de mise en page automatique, et je vais régler l'espace entre eux à 12 pixels. Donc, l'espace entre le texte et l'icône est de 12 pixels. Je vais également obtenir ou donner un peu de marge de 12 pixels à gauche et à droite du contenu et huit pixels en haut et en bas Cela me permettra d'ajouter une certaine marge de manœuvre au contenu de ce lien de menu. Renommons ce cadre en lien de menu. Une fois qu'il est sélectionné, transformons-le en composant. Je vais donc accéder à la barre latérale, créer un composant ou utiliser le raccourci clavier Control AK sous Windows ou l' option de commande K sur Mac Génial. Maintenant, je veux pouvoir, bien sûr, dupliquer ce composant, créer plusieurs instances. Et aussi pour chacun d'entre eux, je veux changer le texte et l'icône. Pour cela, ajoutons une dérogation. Donc, une fois le texte sélectionné dans le composant principal, je vais aller dans la barre latérale où il est écrit «   créer une propriété de texte Cliquez dessus. Donnons-lui un nom. Ça peut être ce que tu veux. Je vais juste laisser sous forme de texte, créer une propriété. Ensuite, je vais sélectionner l'icône, et également dans la barre latérale, je vais choisir Create Instance swap property. Je vais appeler cette propriété. Laissez-moi vraiment vous le montrer. Je vais l'appeler icône. Ne vous inquiétez pas de la valeur ou des valeurs préférées ici. Cliquez simplement sur Créer une propriété. C'est bon. Maintenant, nous pouvons prendre ce lien de menu, copier et le coller dans un autre cadre. Et c'est ce que nous utiliserons pour créer le design de notre barre latérale. Il s'agit désormais d'une instance du composant que nous venons de créer. Rapprochons-nous donc un peu plus du cadre filaire afin de voir ce que nous faisons Et commençons à créer les éléments du menu. Donc, le premier lien vers tous les produits. Bien. Répliquons cela. La prochaine sera celle des catégories. Donc, une fois l'instance sélectionnée, je peux monter ici. Je peux changer le texte en catégories. Et je peux même changer l'icône, et Figma utilisera désormais les composants des icônes, ou elle va me montrer les composants des icônes que j'ai créés dans la leçon précédente Nous pouvons tous les voir ici. Nous pouvons même rechercher une icône spécifique. Je peux donc simplement le choisir et Figma le remplacera automatiquement dans mon instance. C'est pas cool ? J'utilise donc une copie du composant principal, une instance, mais je peux la personnaliser avec mon propre contenu ou avec un contenu différent pour chacun d'entre eux. Passons à autre chose. Celui-ci, des nouveautés, et je vais choisir la cloche. Répliquons-les deux fois de plus et complétons le reste des éléments du menu. H Nous avons donc créé les autres éléments du menu, tous personnalisés avec leur propre texte et icône. Maintenant, un changement que j'aimerais apporter est de réduire un peu les icônes. Par défaut, ils sont de 24 pixels. Faisons donc 20 pixels. Maintenant, comme j'ai utilisé des composants, si je fais 20 pixels, cette modification sera appliquée à chaque instance de composant, super cool. D'ailleurs, j'utilise l' outil de mise à l'échelle pour réduire la taille de l'icône. Il vous suffit d'appuyer sur K sur votre clavier et vous obtenez cette interface où vous pouvez modifier la largeur ou la hauteur ou changer la taille en utilisant un facteur. Maintenant, il y a deux autres variantes de ces éléments de menu que nous devons créer. Le premier est l'actif. Alors, que se passe-t-il lorsque nous sélectionnons ou cliquons sur un élément de menu spécifique, et que celui-ci est sélectionné, n'est-ce pas ? Donc, lorsque cela se produit, procédons comme suit. Nous allons sélectionner le composant principal, et nous pouvons aller ici et choisir Ajouter une variante. Maintenant, cela créera une copie de ce composant, mais il ne s'agit pas d'une instance. Il s'agit en fait d'une variante, d'une variante de ce composant. Et maintenant, Figma place ces variantes dans cette ligne pointillée. Maintenant, sélectionnons le composant principal, et là où il est indiqué propriété 1, double-cliquez et nous allons le renommer en type Ensuite, nous sélectionnerons le premier, et nous le laisserons par défaut. Et sur le second, nous double-cliquerons et nous le renommerons en actif Donc, pour les actifs, je souhaite utiliser une couleur issue des actifs de notre marque. Passons donc à la page des actifs de la marque, et je souhaite utiliser cette couleur primaire. C'est donc Blue Lagoon 500. Sélectionnons-le et, sous Remplir, tout en bas. Je vais chercher Blue Lagoon, et je vais en sélectionner 500. Cela va donc ajouter cette couleur en guise de remplissage. Mais je souhaite également changer l'icône et la couleur du texte. Maintenant, je pourrais opter pour le blanc pour cela, et ce sera très bien, mais je veux utiliser une variante de cette couleur primaire. Je vais donc y retourner et je peux voir que le Blue Lagoon 50 est la couleur la plus claire du lot. Nous allons donc utiliser celui-ci. Encore une fois, dans Figma, avec l'icône et le texte sélectionnés, je vais passer à la couleur de sélection Cliquez dessus et choisissez Blue Lagoon 50. Maintenant, sélectionnez la variante et ajoutons un rayon de bordure de huit pixels. Alors, en quoi cela m' aide-t-il exactement ? Eh bien, voici le côté cool. Supposons que je veuille faire de l'instance de tous les produits la variante active. Tout ce que j'ai à faire pour cela c'est d'aller ici où il est écrit type, et au lieu de taper par défaut, je sélectionne Active, et c'est tout. Je peux le faire pour tous les autres liens. Enfin, l' autre variante que je dois créer est celle avec le badge. Remarquez donc certains de ces liens, ils sont numérotés. Et je voudrais ajouter ce numéro comme une sorte de badge. Alors faisons-le. Nous allons sélectionner la première variante. Nous allons cliquer sur l'icône plus. Cela en fera une copie. Et je vais le renommer par défaut avec un badge. Alors prenons ce chiffre. Et collons-le ici. Agrandissons un peu ce contenant. Je vais utiliser Inter cette fois en gras, 12 pixels, la même hauteur de ligne de 150 % Et je vais l'ajouter à son propre cadre de mise en page automatique parce que je veux y ajouter un arrière-plan. Je vais donc appuyer sur Shift A, ce qui me permettra d'y ajouter du rembourrage Mais avant tout, ajoutons une couleur de remplissage. Et je vais revenir aux atouts de la marque, et je vois que nous avons ce rouge corail comme couleur secondaire. Choisissons donc le rouge corail 100 comme arrière-plan, puis le 600 ou le 700 comme couleur du texte. Donc, dans la section Remplissage, je vais chercher le rouge corail, en sélectionner 100. Et pour le texte, passons au rouge corail, 600 ou 700. Je pense que 700 fonctionne beaucoup mieux. Et avec la sélection, ajoutons-y également un peu de rembourrage Je vais donc faire huit pixels à gauche et à droite, deux pixels en haut et en bas. Modifions la largeur ici pour qu'elle corresponde au contenu. Et le contenu d'un câlin signifie essentiellement que le cadre se redimensionnera lui-même pour correspondre à son contenu Il ne devient ni plus gros ni plus petit que ce qu'il contient. Et si vous voulez en savoir plus sur la mise en page automatique, j'ai un cours très détaillé qui traite uniquement de la mise en page automatique. Il contient de nombreux exemples, et j'aborde ce sujet de manière très approfondie. Il suffit de consulter les liens ou de consulter mon profil pour trouver ce cours. Maintenant, nous avons créé ce lot. Donnons-lui un rayon de bordure, sélectionnons le texte à l'intérieur, et je vais le régler sur la largeur automatique. La zone de texte correspond donc à la largeur du texte lui-même. Et aussi, ce que je veux faire ici, c'est ajouter une largeur minimale à cela, car si je change le texte, vous pouvez voir que nous avons une forme de pilule. Mais si je n'ai qu' un seul chiffre, c'est presque comme un cercle. Je veux donc que cela ressemble toujours à une pilule. Donc pour cela, je vais passer à la mise en page automatique. Je vais cliquer dessus, et j' ajouterai une largeur minimale de, disons, 32 pixels. C'est donc bien mieux. Alors maintenant, nous pouvons revenir à nos instances. Je peux sélectionner les éléments de menu qui nécessitent les badges. Par exemple, pour les nouveaux arrivants, je vais changer son type par défaut avec un badge. Le chat serait compatible, même histoire, par défaut avec badge. Mais j'ai besoin d'un moyen de contrôler le texte de ce badge, le numéro. Revenons ici et je vais sélectionner le texte du composant principal, le texte du badge, et ici, sélectionner Appliquer la propriété du texte, créer une propriété, et nous allons appeler ce numéro de badge. OK. Maintenant, si nous sélectionnons à nouveau ces instances, nous avons un champ contenant un numéro de badge que nous pouvons remplir, n'est-ce pas ? Quatre, c'est bien pour les nouveaux arrivants, mais celui-ci devrait en utiliser deux. Et laissez-moi vraiment vous le montrer. Cool. Enfin, une dernière chose, vous remarquerez que si nous sélectionnons l'une de ces instances et que nous l'agrandissons, le numéro du badge reste juste après le texte, ce que je ne veux pas. Je veux que le numéro du badge soit affiché à l'extrême droite, comme c'est le cas dans le wireframe. La façon de le faire est donc d'ajouter un espace automatique entre le badge et le texte. Revenons donc à cette variante et nous allons apporter une petite modification ici. Nous allons sélectionner le texte principal et l'icône. Nous allons effectuer le Shift A pour les ajouter à leur propre cadre de mise en page automatique. Ensuite, je vais sélectionner le cadre principal, et je vais changer la valeur de l'écart ici de 12 à automatique. Maintenant, cela me permettra redimensionner cette instance à n'importe quelle taille, et Figma réglera automatiquement l'écart entre ces éléments et le badge à la valeur la plus élevée Et cela fonctionne également ici, comme vous pouvez le constater. Et avec cela, les éléments du menu sont terminés. Portons donc notre attention sur le reste de la barre latérale. Nous allons donc concevoir le reste des éléments à venir. 5. Configurer les deux barres latérales: Il y a quelques éléments supplémentaires que nous devons créer dans la version étendue de la barre latérale, et bien sûr, nous devons également concevoir la version réduite Commençons donc par le premier. En termes d'éléments, examinons le wireframe. Nous devons encore ajouter le logo. Revenons donc aux actifs de la marque, et je vais juste récupérer le logo habituel de Shop Mingle et je vais juste le coller ici Je vais donc appuyer sur K, et je vais le redimensionner à 56 pixels de hauteur Bien. Maintenant, prenons-le et renommons-le en logo Ensuite, nous avons une barre de recherche, non ? Donc, prenons tout cela, déplaçons-les un peu vers le bas, et redimensionnons également ce cadre Donc, pour la barre de recherche, prenons le texte de recherche, et nous le mettrons ici. Et nous avons besoin d'une icône de recherche, non ? Passons donc aux ressources et je vais saisir l' icône de recherche, la faire glisser. Redimensionnons-le à 20 pixels qu'il corresponde au reste des icônes de ma barre latérale, puis sélectionnons-les deux Shift A pour les ajouter à un cadre de mise en page automatique. Et je vais ajouter une couleur de remplissage, et nous allons utiliser le charbon de bois. Si nous jetons un coup d'œil aux couleurs proposées ici pour notre marque. Dans la palette de couleurs, nous avons une couleur anthracite. C'est pour Gray, en gros. Nous allons donc l'utiliser pour le texte et pour les éléments les plus neutres de l'interface utilisateur, comme l'arrière-plan d' un élément de formulaire, n'est-ce pas ? Nous allons donc utiliser du charbon de bois, vous savez, 50 ou 100, selon ce qui nous convient le mieux. Sélectionnons-le donc et choisirons remplir. Nous allons chercher du charbon de bois et voyons Charcoal 50. Oui, ça a l'air plutôt bien. Nous allons donc le garder. Mais aussi, je vais changer la couleur des autres éléments. L'icône sera donc Charcoal 500. Nous l'utiliserons également pour le reste du texte. Et le texte de recherche, comme il s'agit généralement d'un espace réservé, tel que nous le définissons, nous allons utiliser une version plus claire du fusain, soit 300, juste une couleur plus sourde Maintenant, je vais utiliser ou nous utilisons la mise en page automatique pour cet élément. Définissons donc en fait huit pixels comme écart. Il s'agit de la distance entre l'icône et le texte. Et nous allons utiliser 12 pixels pour le rembourrage tout autour. Génial. Et maintenant, enfin, ajoutons simplement un rayon de bordure de huit pixels. Nous faisons donc correspondre le rayon de bordure des autres éléments arrondis. Génial. Maintenant, nous pouvons simplement le prendre et le redimensionner à la taille que nous voulons Voici donc la barre de recherche. Ensuite, chaque groupe d'éléments de menu possède ce texte comme une sorte d'en-tête de groupe. Alors, saisissons-le. Nous allons le coller ici. Faisons en sorte que la largeur soit automatique. Et nous allons modifier les propriétés de typographie ici pour les mettre en gras Permettez-moi de zoomer ici pour que vous puissiez voir. Je vais m'en tenir à 12 pixels comme taille de police, 150 % de hauteur de ligne, et je vais le mettre en majuscules Et aussi, je vais augmenter un peu l'espacement entre les lettres. Donc, vous savez, augmenter l'espacement entre les lettres est quelque chose que je vous recommande faire lorsque vous avez un petit texte, majuscules en gras, et augmenter l'espace entre les lettres rend le texte un peu plus facile à lire Déplaçons donc ça ici. Et aussi, j'ai oublié la couleur, non ? Donc, la couleur du texte. Nous allons utiliser un fusain 300, donc un texte très, très clair, et nous allons simplement ramener l' opacité à OK. Regroupons maintenant certains de ces liens. Je vais donc sélectionner ces trois éléments, décaler A, et cela les ajoutera à leur propre cadre de mise en page automatique. Et je peux ramener l' écart à zéro, et je veux m'assurer qu' ils sont alignés vers la gauche. Et je veux prendre tous les éléments à l'intérieur et leur largeur ou leur redimensionnement horizontal définir leur largeur ou leur redimensionnement horizontal pour remplir le conteneur Alors maintenant, chaque fois que je redimensionne l'élément parent, les éléments qu'il contient sont également redimensionnés Et il y a une dernière chose que nous devons faire, c'est d'ajouter un petit écart entre l'en-tête du groupe et le reste des éléments. Et si je devais simplement modifier l'écart, partir des propriétés de mise en page automatique, cela modifierait l'écart entre chaque élément. La façon dont nous pouvons le faire est, tout d' abord, de le remettre en mode automatique avec et en sélectionnant Shift A pour l'ajouter à un cadre de mise en page automatique. Et comme il se trouve désormais dans un cadre de mise en page automatique, je peux y ajouter du rembourrage Je vais donc aller dans l'inspecteur ici et je vais changer son rembourrage inférieur à 16 pixels Cela va donc simplement ajouter un peu de distance à un petit rembourrage, essentiellement juste à ce petit texte, créer la distance dont nous avons besoin C'est un petit truc sympa. Ensuite, faisons de même pour les autres. Alors prends ça, colle-le ici. Et cela devrait indiquer des ordres. Et sélectionnons le Shift A. Assurez-vous que la direction est réglée sur la verticale. L'écart est réglé à zéro et les articles à l'intérieur sont configurés pour remplir le conteneur. Enfin, le troisième groupe est destiné au soutien. Même histoire, sélectionnez tout, Shift A, Gap défini sur zéro, sélectionnez toutes les instances des éléments de menu, configurez leur redimensionnement pour remplir le conteneur Maintenant, il y a deux choses que j'ai oublié de faire. Tout d'abord, sélectionnez le texte de recherche et définissez sa taille sur 16 pixels au lieu de 12. Et puis changeons la couleur de icône et du texte ces éléments de menu car j'ai oublié de le faire. Il utilise actuellement le noir. Sélectionnons donc ces deux variantes, et tout au bas de la section Couleurs de sélection, tout article utilisant du noir doit utiliser le Charcoal 500. Comme ça. C'est donc bien mieux. Je ne suis pas un grand fan de l'utilisation d' couleur de texte en noir pur dans n'importe quelle mise en page. C'est juste un trop grand contraste, un trop grand contraste. Enfin, pour cette zone, nous avons les informations utilisateur, n'est-ce pas ? Nous avons une photo du nom d'utilisateur et de l'adresse e-mail. Alors collons-le dedans. Commençons par l'avatar. Faisons en sorte que cela soit 48 par 48. Ajoutons un rayon de bordure de huit pixels pour le contourner. Et changeons l'image à l'intérieur. Maintenant, la façon dont cela fonctionne dans Figma est que vous avez une forme et que vous ajoutez un remplissage, et le remplissage peut être en couleur, et il peut également s'agir d'une image, entre autres choses Vous pouvez donc le faire manuellement ou utiliser un plugin. J'ai un plugin que j'utilise régulièrement et qui s'appelle Unsplash Cela permet simplement, vous savez, télécharger des images depuis Unsplash et de les appliquer directement en guise de remplissage à votre forme Cherchons donc un portrait, et je vais choisir celui-ci. Juste ici. Et c'est tout. C'est tout ce que tu as à faire. Ensuite, prenons ces deux éléments et changeons leur taille à 16 pixels. Et changeons automatiquement la largeur 2. Faisons le Shift A, ajoutez-les à leur propre cadre de mise en page automatique. Nous allons mettre l'écart à zéro, et nous allons également modifier la hauteur de la ligne à 150 %, comme suit Nous allons sélectionner le nom Command B pour utiliser le poids de police en gras. Et changeons le texte du nom ici. Nous allons utiliser Charcoal 500 pour l'adresse e-mail. Je veux que cela soit un peu plus modéré. Je vais utiliser Charcoal 300 comme ça. Enfin, sélectionnez à la fois l'avatar et le texte. Shift A à nouveau. Assurez-vous que l'alignement ici est réglé sur milieu et nous fixerons l'écart entre les deux à 12 pixels. Comme ça. Enfin, rendons cet élément de menu réduit un peu plus discret, car il s' agit plutôt d' un élément fonctionnel lié à la barre latérale, qui pas nécessairement partie du groupe principal d'éléments de Changeons donc sa couleur. Nous allons partir du Charcoal 500 que vous pouvez voir ici. Nous passerons à 300 et pour l'icône également. Voyons donc ce que nous avons. Avons-nous oublié quelque chose dans le wireframe ? Non, nous avons tout ce dont nous avons besoin. Il s'agit maintenant simplement de créer une mise en page appropriée, en ajoutant un alignement et un espacement appropriés pour tous ces éléments Alors, sélectionnez tout. Shift A pour les ajouter à leur propre cadre de mise en page automatique. Maintenant, avec l'option sélectionnée, je vais régler l'écart entre les éléments à 48 pixels, et je vais utiliser un rembourrage de 24 pixels en haut et en bas De plus, je vais ajouter un rayon de bordure de huit pixels et ajouter une ombre à l'ensemble de ce conteneur. Donc pour l'ombre, je vais en fait utiliser un autre plugin Figma appelé smooth shadow Et l'ombre lisse ajoute essentiellement une ombre superposée à l'objet que vous souhaitez. Je vais donc cliquer sur Appliquer l'ombre. Et parce que nous n'avons pas de couleur de remplissage qui applique l'ombre à chaque élément à l'intérieur du cadre, c'est très bien. Nous pouvons simplement ajouter une couche de blanc, et maintenant l'ombre est visible. Regardez à quel point cette ombre est douce. Très bien, sélectionnons maintenant le cadre principal ici et définissons son redimensionnement horizontal pour qu'il corresponde au contenu. Donc, vous savez, il correspond à la largeur et à la hauteur de ses éléments de contenu. Prenons les groupes de liens de menu ici et nous allons définir leur redimensionnement pour remplir le conteneur Donc, vous savez, chaque fois que je le redimensionne, ils le redimensionnent en même temps Et lançons la recherche et définissons-la pour remplir le conteneur. Enfin, je veux un peu moins d'espace entre le logo et la barre de recherche. Regroupons-les , sélectionnons-les deux, décalons A pour les ajouter à leur propre cadre, et nous fixerons l'écart entre eux à 24. Voici donc la version étendue de la barre latérale. Créons maintenant la version réduite. Dupliquons donc cette commande D ou cette commande D, et la version réduite est en fait une toute petite version. C'est une question très étroite, d'accord ? Pour que cela soit possible, nous devons concevoir nos éléments manière à ce qu'ils s'adaptent à un espace très restreint. Pour les éléments de menu, cela signifie supprimer le texte. Nous conservons simplement l'icône, le logo, nous devrons peut-être le réduire ou utiliser une version différente du logo. La barre de recherche, nous la remplaçons par un bouton et la liste peut continuer. Alors mettons-nous au travail. Commençons par le haut. Et nous allons effectivement remplacer le logo. Si nous revenons aux atouts de la marque pour Shop Mingle, nous avons deux versions du logo, la version par défaut et une version plus petite, uniquement dédiée au symbole, n'est-ce pas ? Alors prenons celui-ci. C'est parfait pour ce cas d'utilisation. Nous allons donc sélectionner le cadre ici, le coller, et je vais appuyer sur K pour le redimensionner, et je vais régler la largeur à 48 pixels Nous supprimons maintenant l'ancien logo. Nous le déplaçons vers le haut en appuyant simplement sur la touche haut et bas ou sur la flèche haut dans ce cas, et nous le renommons en logo la barre de recherche, nous pouvons simplement supprimer le texte de recherche, sélectionner l'entrée ici, et au lieu de la remplir, nous la configurons pour qu'elle intègre le contenu. Ou mieux encore, pour nous assurer que ces éléments ont la même largeur, nous pouvons les redimensionner à 48 pixels et nous assurer que les éléments sont alignés au milieu Ensuite, sélectionnons les cadres contenant les en-têtes des groupes, et nous allons simplement les masquer. Et puis qu'en est-il des éléments du menu ? Nous avons besoin d'une version où il ne s'agit que de l'icône. Revenons donc au composant principal de notre lien de menu. Nous allons sélectionner la version par défaut. Nous allons cliquer sur le signe plus et renommer par défaut en réduit. Il suffit de sélectionner un texte, de le masquer, puis de sélectionner l'élément principal. Fixons une largeur de 48 pixels et alignons le tout au milieu. Nous pouvons donc maintenant aller ici et sélectionner par défaut réduit, réduit par défaut. Et encore une fois, ici. Qu' en est-il de celui qui a été sélectionné ? Ajoutons une autre variante. Je vais donc sélectionner ceci, ajouter une variante. Je vais dire sélectionné, effondré. Et c'est la même histoire. Nous sélectionnons le texte ici, nous le cachons. Nous sélectionnons l'élément principal. Nous fixons sa largeur à 48 et nous alignons tout au milieu. Nous pouvons donc revenir en arrière et sélectionner celui-ci sélectionné réduit, ou j'aurais dû dire actif réduit juste pour suivre la convention de nom. Donc Active s'est effondré. Génial. Enfin, nous avons besoin d' une autre variante, à savoir la version réduite de l'élément de menu avec un badge. Donc, dupliquons celui-ci. Nous dirons qu'il s'est effondré avec un badge. Et dessinons un cercle de huit sur huit. Et comme il s'agit d'un cadre de mise en page automatique, Figma le positionne automatiquement, mais ce n'est pas ce que nous voulons Je vais donc aller ici et choisir le mauvais bouton Ignorer, désolé, là-haut, mauvais. Ignorez la mise en page automatique. OK. Et cela me permettra essentiellement de positionner cet élément où je veux dans un cadre de mise en page automatique. Alors déplaçons-le là, puis un, deux, trois, quatre, un, deux, trois, quatre. Et ajoutons une couleur appropriée. Si nous revenons à la palette de couleurs ici, je voudrais utiliser le secondaire, le rouge corail. Je vais donc rechercher le rouge corail, et je vais utiliser le 500, qui est la couleur de base. Alors maintenant, nous passons de ceci à cela, gros, et de ceci à cela. Maintenant, une chose que je veux changer ici est de tout sélectionner et de régler la largeur pour qu'elle corresponde au contenu. Ils sont donc affichés à leur taille normale. Je vais le faire pour chacun d'entre eux. Contenu du câlin. Nous y voilà. OK. Et ils devraient avoir largeur de 48 pixels, et ils sont 44 en ce moment. Alors pourquoi cela se produit-il ? Donc 48, 48, 48. Oh, d'accord, c'est parce que leur largeur peut être différente. Je dois donc régler manuellement la largeur ici à 48 pixels. C'est très bien. Ce n'est pas si grave. 48 et 48 ici aussi. D'accord. Nous y arrivons donc. Sélectionnons tous ces éléments, et revenons-en au contenu des câlins Ne vous inquiétez pas pour cette ligne rose. C'est juste un artefact que je n'arrêtais pas de voir depuis cette nouvelle mise à jour de Figma OK. Et changeons également cette version. Je vais donc le changer de valeur par défaut en valeur réduite par défaut, et je vais également remplacer l'icône par une ligne à droite. Enfin, je voudrais masquer tout ce cadre. Il ne reste donc que l'avatar. Voici donc notre version réduite de la barre latérale. C'est ce qui est agrandi, c'est ce qui s'est effondré. Ce n'était pas trop difficile. C'est. Vous pouvez voir à quel point cela va vite lorsque vous avez les choses correctement configurées au préalable avec, vous savez, les styles et les couleurs des couches, les composants et les variantes, etc. Il s'agit simplement de changer un certain nombre de choses, de cacher certaines choses. Et vous pouvez facilement passer, dans ce cas, d'une version étendue de la barre latérale à une version réduite Maintenant que nous avons ces deux états, voyons comment nous pouvons animer le changement entre les deux états, et c'est à venir 6. Animer la barre latérale: À présent, nous allons animer le changement entre réduit et développé et vice versa en utilisant le prototypage Et si vous n'avez jamais utilisé prototypage dans Figma, ne vous inquiétez pas C'est super, super simple. Le prototypage est un moyen de rendre certains éléments interactifs Et vous le faites en utilisant des déclencheurs et des actions. Un déclencheur est quelque chose qu'un utilisateur fait, en cliquant sur quelque chose, en faisant défiler jusqu'à quelque chose, en appuyant sur une touche Une action est quelque chose qui se produit en réponse à un déclencheur. Commençons donc par créer ou transformer nos deux barres latérales en un composant. Pour ce faire, nous allons donc sélectionner les deux. Faisons-les glisser en dehors de ce cadre. Et renommons-le en expansé, et renommons-le en réduit Maintenant, sélectionnez les deux. Et montons ici dans la barre latérale et créons un ensemble de composants OK ? Ainsi, lorsque nous le ferons, Figma créera un composant avec ces deux éléments en tant que variantes OK ? Renommons le composant en barre latérale, et une fois celui-ci sélectionné, renommons cette propriété en double-cliquant Bien entendu, vous pouvez le renommer comme vous le souhaitez. Nous avons donc maintenant une barre latérale avec deux états. Élargi et effondré. Donc, si je reviens à ce cadre, je peux passer à mes actifs. Je peux accéder aux ressources locales et je peux faire glisser cette barre latérale ici. Et il s'agit, bien entendu, d'un exemple. C'est une copie de mon composant d'origine. Mais avec l'option sélectionnée, je peux très facilement monter ici et sélectionner l' état que je souhaite. C'est donc l'expansé, mais je peux facilement passer au replié et vice versa. Créons maintenant l'animation qui rendra ce changement plus fluide. Nous allons donc revenir au composant principal, et appuyer sur Shift E. Cela va basculer entre le mode prototype et le mode design Vous pouvez également effectuer cette modification en cliquant sur ces deux boutons dans la barre latérale. Maintenant, une fois que nous sommes en mode prototype, nous devons sélectionner le déclencheur, n'est-ce pas ? Alors, que va-t-il se passer pour déclencher cette animation ? Eh bien, disons que lorsque nous cliquons sur le lien de réduction, je veux que cette barre latérale passe à la version réduite, d'accord ? Donc avec le curseur de ma souris. Je vais passer le pointeur de la souris sur le signe plus, cliquer et faire glisser le pointeur vers le cadre. Maintenant, cela va créer une interaction, non ? Le déclencheur est donc activé lorsque je clique sur ce bouton. L'action est que je passe à l'état réduit, puis je peux choisir l'animation. Donc, pour que cette animation soit très fluide, nous allons choisir Smart Animate. Et Smart Animate examinera essentiellement comment un élément est dans l'état A, puis comment ce même élément est dans l'état B. Il voit donc les différences et crée une animation pour le changement de propriété, n'est-ce pas ? Ainsi, par exemple, si un élément dont le même élément est long est, disons, plus large dans l'état A et plus court dans l'état B, l'animation intelligente anime la propriété width, n' l'animation intelligente anime la propriété width, Cela va rétrécir l'élément. Cela va animer la modification de cette largeur. Nous allons donc choisir Smart Animate. Pour la courbe, nous allons opter pour une durée douce, et nous garderons la durée de 800 millisecondes Maintenant, faisons l'inverse. Donc, lorsque je suis en état de réduction et que je veux revenir à l'état développé, accord, je vais créer une autre interaction, qui se fera également par clic, et nous passerons aux propriétés étendues et identiques, à une animation intelligente, en 800 millisecondes douces OK. Alors maintenant, réduisons-le un peu, sélectionnons l'instance ici et centrons-la. Et pour en revenir au mode prototype, ajoutons un point de départ au flux, et vous pouvez le voir ici. Cela va simplement marquer ce cadre comme étant le premier flux. Donc, lorsque j'appuie sur Shift et sur espace, Flow One est lancé. Voici donc ma barre latérale. Et maintenant, quand je clique sur Réduire, les choses changent, non ? Il passe de la version étendue à la version réduite. Et vice versa, si je clique dessus, il passe de réduit à agrandi. Et je peux jouer avec ça autant que je veux. Mais c'est une animation très fluide. Le logo change également. Remarquez ici. Le logo change de partie en partie parce qu'ils portent le même nom, n'est-ce pas ? Et Smart Animate examine les noms des couches. Donc, comme j'ai nommé les deux couches logo, cela anime le changement entre elles. Est-ce facile ? Et bien sûr, vous pouvez, vous savez, jouer avec les différentes propriétés d'animation ici. Vous pouvez double-cliquer sur n'importe laquelle de ces nouilles et, vous savez, vous pouvez modifier, par exemple , la courbe entre doux et rapide, disons. Ce sera un assouplissement légèrement différent. Passons à ce paramètre en mode rapide. Alors maintenant, déplacez l'espace et l'animation sera légèrement différente. Et c'est tout, vraiment. C'est ainsi que vous pouvez concevoir et animer une barre latérale pliable Maintenant, assurez-vous simplement que pour que cela fonctionne, deux versions de la barre latérale doivent être des variantes à l'intérieur d' un ensemble de composants, ce qui permet à l'ensemble du système de prototypage de fonctionner correctement Cela étant dit, veuillez vous joindre à moi dans la prochaine leçon pour la conclusion et quelques réflexions finales. 7. Conclusion et réflexions finales: Bonjour, félicitations pour avoir terminé ce cours, et merci beaucoup d'avoir regardé. J'espère que vous l'avez trouvé utile, utile et que vous avez appris quelque chose de nouveau. J'ai beaucoup aimé créer celui-ci, et j'ai hâte de vous voir dans le prochain. Alors, que devez-vous faire ensuite ? Eh bien, j' apprécierais que vous preniez un moment pour laisser un commentaire sur ce cours. Cela m'aide vraiment à créer de meilleurs cours à l'avenir, et vos commentaires sont très importants. Euh, aussi, n'hésitez pas à consulter mon profil pour voir mes autres cours de FigMa L'un d'eux est entièrement dédié à la mise en page automatique de Figma et contient de nombreux exemples et missions du monde réel Assurez-vous donc de vérifier celui-ci. Je gère également une chaîne YouTube où je partage du contenu sur le design Web en mettant l'accent sur Figma Vous pouvez également me contacter via les réseaux sociaux habituels. Vous trouverez des liens sur ma page de profil. Cela dit, il est temps pour moi de signer. Merci beaucoup encore de votre attention et ai hâte de vous voir dans mon prochain cours. Au revoir pour le moment.