Conception IU/UX : 6 conseils pour rationaliser les composants dans Figma

1. Introduction: Les premiers mois où j'ai utilisé Figma, j'utilisais mal les composants. Ce n'est que lorsque je me suis lancée et que j'en ai appris davantage sur la puissance des composants que j'ai vraiment commencé à prendre confiance en la vitesse et que Figma s'est améliorée. comme l'UI/UX et le concepteur de produits, les composants sont les éléments constitutifs de tous nos projets. Il est essentiel de partir pied si nous voulons produire un travail de qualité. [MUSIQUE] Je suis Maddie Beard et je suis une designer UI/UX basée à Denver, dans le Colorado. Je travaille professionnellement en tant que designer depuis 2017 pour de grandes et petites entreprises technologiques, ainsi que pour moi-même en tant qu' indépendant et entrepreneur. Dans ce cours, nous allons parler de six manières de tirer le meilleur parti des composants de Figma. Nous allons créer quelques composants à partir de zéro de la bonne façon, configurer les propriétés du composant, les rendre réactifs, leur donner quelques variantes nécessaires et, enfin, les rendre interactifs. Pour terminer, nous vous donnerons quelques conseils pour créer composants en tenant compte du travail d'équipe et de la collaboration. J'espère que vous quitterez ce cours, non seulement avec une meilleure compréhension des composantes, mais aussi avec de réelles compétences et de la pratique à votre actif. Cette classe s'adresse à tous les concepteurs qui découvrent Figma, les composants, ou qui travaillent en équipe, ou peut-être que vous travaillez avec des composants depuis un certain temps mais des termes tels que variantes, propriétés booléennes et la mise en page automatique vient de vous faire briller les yeux. Une fois que vous aurez terminé ces six leçons, vous utiliserez ces fonctionnalités et bien d'autres encore pour rendre vos composants cohérents flexibles et vous faire gagner beaucoup de temps à vous et à votre équipe. Je vous encourage vivement à faire ces exercices avec moi et même les partager avec votre équipe si vous le souhaitez. Vous aurez bientôt tout ce dont vous avez besoin pour appliquer ces leçons à votre propre travail dans votre entreprise. 2. Créer un composant: Tout d'abord, apprenons à créer quelques composants de la bonne manière. Préparez-vous à un succès à long terme en suivant ces cinq conseils lorsque vous créez vos propres composants. La première astuce consiste simplement à considérer les composants comme des modèles. Chaque instance d'un composant est essentiellement, chaque fois que vous utilisez ce modèle. Les modifications que vous apportez au composant se répercuteront sur les instances individuelles. Mais si vous apportez une modification au niveau de l'instance, cela n'affectera pas le composant principal ni aucune autre instance du composant. Conseil numéro 2 : dans la mesure du possible, utilisez des cadres plutôt que des rectangles. Troisièmement, tirez parti de la mise en page automatique. Quatre, faites toujours attention à l'alignement. Cinq, essayez de suivre un système de grille de pixels. Dans mon ancienne entreprise, nous utilisions un système de grille à huit pixels, mais tout ce que votre équipe utilise convient parfaitement tant que tous les concepteurs sont cohérents. Voyons maintenant comment ces conseils entrent en jeu avec certains composants réels. Je vais commencer par créer un composant très simple, un bouton. Je vais donc simplement appuyer sur F sur mon clavier, qui est le raccourci pour accéder à cet outil de cadrage. Je suis donc en train de créer un cadre. Nous allons en créer un de 44 pixels de haut, disons 100 pixels de large pour notre bouton. Comme je l'ai dit dans le conseil numéro 2, il est important d' utiliser les cadres sous forme de rectangles au lieu d' ajouter des couches supplémentaires. Ainsi, par exemple, au lieu d'ajouter un rectangle bleu au-dessus de ce cadre, je vais simplement donner à ce cadre une couleur de fond bleue. De cette façon, j'ai affaire à moins de couches et cela sera vraiment utile en matière de mise en page automatique. Maintenant, ajoutons le texte, donc j'appuie simplement sur T comme bouton de raccourci. Maintenant, je sélectionne à nouveau ce cadre et je vais juste lui donner un rayon d'angle de quatre, beau et subtil. À tout moment, nous pouvons en faire un composant en le sélectionnant sur le cadre et appuyant sur la commande Option K. Vous pouvez également le faire en montant sur Objet puis en descendant pour créer un composant. Maintenant qu'il s'agit d'un composant, renommons-le simplement. Passons maintenant à la mise en page automatique. La raison pour laquelle nous utilisons la mise en page automatique est que les différentes instances de ce composant, bien qu'elles puissent apparaître à des tailles différentes, doivent toujours être centrées. Dans l'état actuel des choses, le texte n'est pas centré. Nous allons donc sélectionner l'ensemble du cadre et appuyer sur la mise en page automatique. Par défaut, il va épingler l'enfant, est-à-dire dans ce cas le texte contenu dans tout le cadre, il va l'épingler en haut à gauche avec un peu de rembourrage. Comme vous pouvez le constater, nous avons 23 pixels de rembourrage de chaque côté et 12 en haut et en bas. Mais ce que nous voulons, c'est nous assurer qu'il sera épinglé au centre. Je vais donc simplement appuyer sur cette icône. Ensuite, je pense que 12 pixels sont bons pour le haut et le bas, mais faisons-en 24 pour la droite et la gauche. Comme je l'ai dit, l'utilisation de multiples de huit et même de quatre est très utile pour maintenir la cohérence entre vos mises en page. Alors maintenant, que se passe-t-il lorsque nous redimensionnons ce bouton ? Vous pouvez voir que le texte reste au milieu. C'est exactement ce que nous voulons. Créons maintenant un autre composant. Faisons une carte. J'appuie donc à nouveau sur F sur mon clavier. Faisons en sorte que ce chiffre soit de 200 par 200, juste pour le moment. Je vais renommer cette carte Option Command K. Je vais faire R pour rectangle et mettre une image à l' intérieur qui occupe la première moitié supérieure de cette hauteur verticale. Donc, pour l'utiliser comme masque, je vais simplement utiliser le remplissage au lieu de le remplir, je vais appuyer sur Image, puis je vais simplement choisir une image. J'ai cette pizza sur mon bureau. Nous avons donc ceci, ajoutons maintenant les autres éléments dont nous aurons besoin. Faisons un texto. Ce sera peut-être un titre puis une description. Cela devrait être beaucoup plus petit. Nous voulons l'aligner sur la gauche et nous ferons de même avec le titre. Maintenant que nous avons tous les éléments dont nous aurons besoin, je vais activer la mise en page automatique. Les choses sont donc devenues un peu compliquées, mais ça va. Voyons pourquoi cela s'est produit et comment nous pouvons faire en sorte qu'il fonctionne exactement comme nous le souhaitons en tant que modèle pour le reste de nos projets. Vous pouvez donc voir que lorsque je faisais de la mise en page automatique, les enfants, c' est-à-dire les éléments individuels dans un cadre, se positionnaient automatiquement. Il va les positionner verticalement centrés au milieu et épinglés vers le haut. C'est exactement ce qui se passe ici. Ce texte est aligné à gauche, mais la zone de texte elle-même est alignée au centre du cadre. Alors maintenant, ce que je veux faire c'est les regrouper dans un cadre. Je vais juste appuyer sur la sélection du cadre, et nous pouvons activer la mise en page automatique pour ce cadre à l'intérieur du cadre. Je vais donc les aligner en haut à gauche. Nous n'avons vraiment besoin que de quatre pixels entre eux. Au lieu d'étreindre le texte, je veux qu'il remplisse le contenant. la verticale, nous voulons qu'il épouse le contenu. Donc, c'est bien. Ensuite, lorsque nous cliquons sur cet ordinateur central ici, nous pouvons voir qu'il y a huit pixels d'espace ici. Faisons ce 12. Voyons maintenant ce qui se passe lorsque nous étendons cela. Tu vois, il y a de la place de chaque côté. Donc, au lieu d'avoir une largeur fixe pour cette image, je vais dire que l'image doit remplir le conteneur. Nous garderons la hauteur fixe. Maintenant, lorsque nous l'agrandissons, vous pouvez voir qu'il remplit tout le contenant. Ajoutons un peu de rembourrage. Nous voulons l'ajouter à cet élément car nous ne voulons pas qu'il s'applique également à l'image. Ajoutons donc simplement 12 pixels de chaque côté et 12 pixels en bas. Ça a l'air bien. Maintenant, donnons à l'ensemble un rayon d'angle, peut-être 16. Maintenant, nous allons devoir ajouter cette image superposée et l'ajouter séparément. Ça a l'air bien. Nous allons lui donner une ombre, juste pour le fun. Je vais rendre cette ombre un peu plus subtile. J'aime utiliser huit pour cent. Ça a l'air bien. Avec ces deux composants, nous appliquons déjà le conseil numéro 1. Nous les considérons comme des modèles Nous sommes donc très attentifs à ce qui va se passer si, par exemple, nous continuons à écrire cette description jusqu'à ce qu'elle passe au ligne suivante. Ça a l'air parfait. Alors vérifiez, nous réfléchissons au modèle. Deuxièmement, nous utilisons des cadres lorsque c'est possible au lieu de rectangles. Troisièmement, nous maîtrisons la mise en page automatique avec les deux. Numéro 4, nous nous sommes assurés que tout est correctement aligné. Numéro 5, dans la mesure du possible, nous avons utilisé un rembourrage et des dimensions qui se situent dans une grille de huit pixels. Une façon de vérifier que nos composants sont flexibles et que nous avons fait tout ce qui était en notre pouvoir pour réussir est d'en extraire une copie ou une instance et de l'utiliser comme vous. l'utiliserait dans un projet. Alors, par exemple, et si nous avions un titre très long ici ? Donc, comme vous pouvez le constater, ce titre très long étendu cette composante à une très large portée. Je ne pense pas que ce soit nécessairement ce que nous voulons. Revenons donc à ce composant principal et changeons-le en un élément de largeur fixe. Maintenant, nous avons cette largeur fixe, nous devons absolument l' aligner vers la gauche. Voyons maintenant ce qui se passe chaque fois que nous changeons le titre en quelque chose de plus long. On y va. Maintenant que c' est une largeur fixe, il va la pousser vers le bas au lieu de la pousser vers la droite. Alors maintenant, nous pouvons aller ici. Comme il s'agit du composant principal, les modifications se répercutent sur notre instance. Nous pouvons maintenant voir que c'est exactement ce que nous voudrions. Je vais donc attribuer un A à cette composante et dire que nous pouvons passer à la leçon suivante. Alors maintenant c'est ton tour. Allez-y, choisissez l'un de ces composants ou les deux et créez-les vous-même. Assurez-vous de cocher les cinq cases correspondant aux conseils que j'ai partagés dans cette leçon. Je te verrai au prochain. 3. Configuration de propriétés de composant: Maintenant que vous avez un ou deux composants avec lesquels travailler, configurons certaines propriétés afin de le rendre encore plus flexible et de pouvoir être utilisé dans tous vos projets. Dans cette leçon, nous allons le faire à l' aide de trois propriétés différentes. Boolean, qui est une propriété marche-désactivée, un échange d' instance et un texte. Voyons donc comment ils entrent en jeu avec ces deux composants que nous avons déjà créés. Commençons par les propriétés booléennes. Pensez à cela comme à la création d'un interrupteur marche-arrêt. Je pense qu'un bon endroit pour le faire est à l'intérieur de ce bouton. Je vais donc simplement placer une icône ici et voyons maintenant comment l'activer et la désactiver. Parce que parfois, lorsque vous utilisez ce bouton, vous pouvez avoir besoin d'une icône et d'autres fois non. Ainsi, le fait de pouvoir utiliser un composant dans différentes instances de ce composant, au lieu de créer deux composants distincts, vous fera gagner beaucoup de temps. Surtout quand on voit à quel point c'est facile. Donc, ce que je vais faire, c'est entrer et sélectionner cette icône. face de la couche, nous avons cette icône ici. Il dit appliquer la propriété booléenne. Je vais donc cliquer dessus et cela me montre automatiquement que le nom de cette propriété par défaut est Afficher l'icône. Cela me semble donc bien, et je vais donc le créer. Maintenant, si nous le faisons glisser vers l'extérieur pour voir une autre instance de ce composant, nous avons une bascule dont la cible est cette icône. Figma est juste assez intelligente pour savoir que nous voulons l'activer et le désactiver avec une propriété booléenne. C'est donc très simple. Allons maintenant un peu plus loin. Et si nous voulions remplacer cette icône par quelque chose d'autre ? Eh bien, j'ai créé quelques variantes de ce composant ici, et nous approfondirons les variantes dans la leçon 4. Mais pour l'instant, ne vous inquiétez pas de la façon dont je l'ai créé, réfléchissons simplement à la façon dont nous allons l'utiliser. J'ai donc un composant ici, c'est le composant principal et il a plusieurs variantes. J'ai donc la variante de téléchargement, qui est la variante par défaut, une variante de partage et une variante de sauvegarde. Figma est donc assez intelligente pour savoir que, comme ils sont regroupés au sein d'un composant, nous pouvons vouloir les échanger. Encore une fois, si je viens et que je clique sur cette icône ici, je vais voir cette icône ici, appliquer la propriété d'échange d'instance. Je vais donc cliquer dessus, nous allons lui donner un nom instance, et ça a l'air bien. Maintenant, chaque fois que je fais glisser une instance et que je double-clique sur cette icône, nous pouvons la désactiver pour toutes les instances de ce composant d'icône. Maintenant, la dernière, parlons de texte. Donc, si je veux que quelqu'un puisse accéder à mon fichier Figma et modifier le texte sans toucher le composant lui-même, nous pouvons sélectionner le texte. Ensuite, en bas, nous pouvons cliquer sur cette icône ici et créer une propriété à partir de celle-ci. Maintenant, encore une fois, nous allons faire glisser une instance vers l'extérieur, et au lieu de taper le texte ici, je peux simplement sélectionner l'instance, puis à ce panneau Propriétés, et taper du texte à la place. Alors peut-être voulons-nous qu' il soit dit téléchargement. Ensuite, il mettra automatiquement à jour ce composant sans même avoir à le toucher. La même chose fonctionne avec quelque chose comme ça. Disons que nous voulons pouvoir modifier le titre et la description. Nous allons simplement appuyer sur ce bouton ou donner un nom à ce titre, nous nommerons cette description. Maintenant, si nous avons une instance de ce composant quelque part, sans avoir à toucher à ce composant, il suffit de cliquer dessus et de passer ici. Voici le titre, c'est une description. Comme vous pouvez le constater, il tiendra également compte de toutes les propriétés de mise en page automatique que nous avons définies précédemment. Cela rend donc les choses beaucoup plus faciles et plus rapides pour vous et votre équipe. Allez-y, jouez avec ces propriétés avec les composants que vous avez créés N'hésitez pas à faire preuve de créativité , à créer quelque chose de nouveau et à tester les limites du booléen et le swap d'instance et les propriétés du texte. 4. Rendre les composants réactifs: Il est important de garder à l'esprit que vous et votre équipe pouvez utiliser ces composants sur différentes tailles d'écran. rendre réactifs est donc très utile et permet de gagner du temps. Nous en avons parlé un peu dans la leçon 1. Mais faisons un autre exemple ici avec une barre de navigation. Commençons par une barre de navigation optimisée pour un iPad mini, et voyons si nous pouvons la rendre réactive pour un écran de bureau. Je vais donc appuyer sur « F » pour le cadre et créer quelque chose d'une largeur de 774 pixels, et passons à une hauteur de 60 pixels. Je vais lui donner une belle couleur de fond. Nous allons prendre un faux logo que j'ai créé et le mettre dedans. Passons ensuite à quelques éléments de menu. Donc, s'il s'agit d'un café, nous aurons peut-être besoin d'un menu, d'un horaire et d'un contact. Maintenant, comme avant, nous voulons en faire un composant, option « Command K », je vais l'appeler nav. Activons ensuite la mise en page automatique dès le départ afin de voir avec quoi nous travaillons. Donc, par défaut, il s'adaptera à l'ensemble de notre contenu. Regroupons-les dans un cadre afin de pouvoir mettre en place une mise en page automatique et disons que nous voulons 24 pixels entre chacun d'eux. Ensuite, il semblerait ils soient plus serrés vers le bas, alors assurons-nous de pouvoir l'aligner au centre. Nous avons donc maintenant le cadre parent, qui est le composant dans son ensemble et deux enfants différents. Voyons donc ce qui se passe lorsque nous essayons de l'élargir. Ce n'est certainement pas ce que nous voulons. Donc, ce que je vais faire, c'est sélectionner ce cadre, puis cliquer sur ces trois points, et au lieu de le ranger, nous allons le remplacer par un espace entre les deux. Vous pouvez voir que cela correspond davantage à ce que nous voulions. Nous pouvons ensuite entrer et changer le rembourrage sur le côté, peut-être que 24 suffiraient pour cela. Alors ça a l'air un peu grand, donc je vais juste entrer et le rendre un peu plus petit. Mais quand je l'ai réduit, ai l'impression que la hauteur a changé. Je veux donc m'assurer que ma hauteur est toujours de 60 pixels, disons fixe pour cela. Donc ça a l'air bien. Alors maintenant, testons-le. J'ai ces cadres ici, un pour un iPad Pro et un pour un MacBook Pro 16 pouces. Donc, ce que je vais faire, c'est les copier et les coller et nous allons simplement les positionner. Donc d'abord, pour notre iPad, puis pour notre ordinateur de bureau. Comme vous pouvez le constater, cela a très bien fonctionné, et vous vous demandez peut-être ce que vous feriez si vous vouliez en créer un pour un écran d'iPhone ? Eh bien, ce que nous pourrions faire, c'est en faire un menu de hamburgers, et il faudrait en fait que ce soit une variante distincte. Parlons donc de la variance dans la prochaine leçon. Mais avant cela, essayez de vous entraîner à créer un composant réactif. Vous pouvez créer quelque chose de réactif d'un iPhone à un iPad, d'un iPhone à un ordinateur de bureau ou d'un iPad à un ordinateur de bureau. vous le souhaitez, et si vous êtes bloqué, n' hésitez pas à faire ce que j'ai fait et à créer cette même barre de navigation. 5. Créer des variantes de composants: Parfois, les propriétés et la mise en page automatique ne suffisent pas à rendre vos composants suffisamment flexibles pour être utilisés dans l'ensemble du projet ou du système de conception. C'est là que les variantes entrent en jeu. Ils peuvent vous faire économiser beaucoup de temps et d'efforts lorsqu'il s'agit de concevoir des écrans à l'aide de vos composants. Dans cette leçon, nous allons créer des variantes pour différents états d'un bouton, champs et d'icônes que vous pouvez utiliser et remplacer de manière interchangeable. Commençons par ce bouton que nous avons déjà créé. Je vais donc simplement cliquer sur le cadre dans son ensemble. Ensuite, nous passerons aux propriétés, cliquerons sur le bouton « Plus » pour créer une nouvelle variante. Ensuite, je vais cliquer sur le bouton Plus en bas pour en créer un nouveau. Cela sera donc automatiquement étiqueté par défaut. Nous allons maintenant modifier cette propriété et lui donner un nom. Nous l'appellerons État. La valeur par défaut est bonne ici. Maintenant, que voulons-nous que soit cet État ? Je pense que nous allons commencer par le survol. Faisons donc en sorte que l'état de survol soit légèrement plus foncé. Je vais simplement cliquer sur Commande pour accéder à la couche de cadre située derrière le texte de l'icône. Je vais y aller et le faire glisser vers le bas jusqu'à ce que je pense qu'il fait assez sombre. Juste un petit peu, il n'est pas nécessaire que ce soit trop radical. Maintenant, c'est l'état de survol et créons-en un autre. Peut-être que nous avons un État qui est handicapé. Au lieu de ce bleu, prenons une couleur grise comme celle-ci afin qu'elle soit clairement désactivée et que vous ne puissiez pas l'utiliser. Je pense que c'est bien, donc c'est assez simple. Maintenant, faisons la même chose avec un champ. Tout d'abord, créons ce champ ensemble. Je vais appuyer sur F pour le cadre. Voyons voir, nous voulons absolument que cela fasse 44 pixels de haut, le champ lui-même, et la longueur n'a pas d' importance pour le moment. Étiquetons ce champ et en faisons un composant. Maintenant, ce que nous voulons faire, c'est ce contexte n'existe pas car ce que nous voulons, c'est avoir une étiquette de champ. Cela peut donc être assez petit. Nous allons simplement le positionner en haut à droite. Ensuite, nous voulons qu'un autre cadre de ce cadre soit le champ réel, et celui-ci sera rempli. Pour l'instant, nous allons simplement le rendre blanc. C'est ce que nous voulons faire 44 pixels de haut. Ensuite, nous voulons nous assurer que tout cela est conforme au cadre. Maintenant, faisons la mise en page automatique et jouons un peu avec eux. Nous avons ce label. Je pense que nous voulons faire cette étiquette un peu plus grande, 12, c'est généralement bon pour les étiquettes. Désormais, par défaut, il est séparé par quatre pixels, ou cinq pixels entre les deux . Faisons-en quatre. Arrondissons un peu ces angles. Ça a l'air vraiment bien. Mettons maintenant du texte dans le champ. Exemple de texte. Nous allons le rendre un peu plus grand. Je pense que nous voulons en faire au moins 14, et nous allons avoir un poids normal. Alignons-le vers la gauche. Faisons en sorte qu'il soit également aligné vers la gauche et encadrons-les ensemble afin pouvoir mettre en page automatique. Je pense que nous voulons corriger la largeur et nous assurer d'avoir, je pense que nous pouvons avoir moins de rembourrage. Faisons huit pixels, puis 16 en haut et en bas. Faisons en sorte de centrer le texte à l'intérieur. Ça a l'air bien. Maintenant, nous allons certainement avoir besoin de plusieurs variantes pour cela. Je vais juste ajouter une propriété, ajouter une variante. Nous en ferons notre option par défaut. Nous l'appellerons l'état par défaut de la propriété. Alors appelons ce champ. Maintenant que j'y pense, je pense que l'état par défaut avant que quelqu'un ne commence à taper quoi que ce soit devrait ressembler davantage à un exemple de texte. Allons-y et faisons en sorte que ce soit gris. Cela suffira pour le moment. Maintenant, ce texte est en fait le texte rempli. Nous avons maintenant deux variantes différentes et faisons-en une de plus. Peut-être que si quelqu'un passe la souris dessus, il devrait y avoir un trait dessus rempli ici pour attirer votre attention. Nous allons simplement ajouter un trait. Faisons en sorte que ce soit un peu plus subtil. Cela devrait être une bonne chose. Un pixel, c'est bien. Ça a l'air vraiment bien. Nous avons maintenant trois variantes différentes. Mais celui que nous avons créé, l'état que nous voudrions lui donner plane. Mais le problème est que quelqu'un aurait pu survoler un champ déjà rempli et un champ qui ne l' est pas encore. Nous voulons en fait en faire deux propriétés différentes. Je vais m'en débarrasser pour le moment. Ce que je vais faire, c'est ajouter une autre variante. Ensuite, visuellement, j'aime les aligner un peu différemment lorsqu'il s'agit d'une propriété différente afin de pouvoir voir visuellement avec quoi je travaille ici. Maintenant, nous avons celui-ci, et recopions celui-ci également. Maintenant, dans cette colonne de gauche, nous en avons ceux qui sont par défaut. Nous devons maintenant ajouter une toute autre variante. [BRUIT] Au lieu d'appeler celui-ci état, appelons ce survol. Maintenant, le survol va être oui avec ces deux-là et non avec ces deux-là. Ensuite, pour ces deux-là, nous allons lui donner le même coup que nous l'avons fait plus tôt. Faisons en sorte de remplir l'état pour cela également. Il s'agit de la valeur par défaut. Cela devrait être rempli. Nous avons maintenant ce composant avec quatre variantes au total et deux propriétés. Voyons maintenant ce qui se passe lorsque nous l'utilisons. Je vais juste coller ça ici. Maintenant que nous avions une valeur oui, non comme l'une de nos propriétés, elle l'a automatiquement transformée en valeur booléenne, ce qui signifie que nous pouvons la désactiver et la réactiver, un qui signifie que nous pouvons la désactiver et la réactiver, peu comme l'icône du bouton dans une leçon précédente, ça facilite les choses. Ensuite, nous pouvons également passer du texte par défaut au texte rempli. Vous pouvez maintenant voir comment cela fonctionne. Vous pouvez avoir autant de variantes que vous le souhaitez avec le composant. Vous pouvez être très précis avec cela. Ceci est juste un exemple très simple de la façon d'utiliser des variantes avec un champ. Passons maintenant ces icônes que je vous montrais tout à l'heure. Je vais les rendre noirs juste qu'ils soient plus visibles pour le moment. Pour vous montrer comment j'ai procédé, je vais juste en ajouter un autre. Nous allons utiliser le bouton Plus, et cela va simplement en ajouter un qui, par défaut, ressemble à celui-ci. Je vais juste double-cliquer ici et le supprimer. Mais nous avons toujours ce cadre ici. Je vais juste prendre l'une de ces autres icônes. J'appuie simplement sur la commande C pour copier. Maintenant, je vais sélectionner ce cadre et la commande V à coller. Ensuite, je vais simplement le redimensionner pour qu' il s'intègre parfaitement dans ce cadre, comme le font les autres. Ça a l'air bien. ne nous reste plus qu'à lui donner un nom. Tapez, nous allons appeler cette modification. C'est tout ce que vous devez faire pour créer cet ensemble d'icônes. Si vous avez des icônes tailles différentes dans votre système de conception, vous pouvez absolument avoir deux composants principaux différents. Un petit et un grand ou grand, moyen et petit, selon ce qui vous convient. Je veux juste vous montrer rapidement comment je les ai fabriqués. J'appuie juste sur T pour envoyer un texto. J'ai une police de caractères appelée Font Awesome 5 Pro. Si je commence juste à taper, je vais taper pause, puis il y a une icône de pause pour cela. Je vais faire la version solide. Ensuite, il ne me reste plus qu'à cliquer sur Ctrl pour aplatir. C'est ainsi que j'ai créé ces icônes. Créons-en quelques autres ici. Ajouter une variante, double-cliquer, supprimer, copier-coller, redimensionner. Vous pouvez même bien le centrer dans ce cadre. Ça a l'air bien. Nous avons maintenant cinq variantes différentes de cette icône. Vous pouvez l'utiliser dans l'ensemble de votre projet dans tous les composants ou mises en page dotés de cette icône. Cela facilite grandement les échanges. Voyons cela en action. Je vais maintenant prendre une instance de ce composant et voir dans quelle mesure nous pouvons être flexibles avec cela. Si nous le sélectionnons, nous pouvons changer l'état. Peut-être que nous le changeons pour planer. Nous pouvons appuyer sur l'icône et la remplacer par l'une de celles que nous avons créées. Modifier. Ensuite, nous pouvons même revenir ici et modifier le texte sans même toucher le composant. Pour vous entraîner, prenez l'un de vos composants et créez quelques variantes. Si vous êtes bloqué, un bon point de départ est l'état de ces boutons. Comme je l'ai fait, créez un état par défaut, un état de survol et un état désactivé. Alors n'hésitez pas à en faire une capture d'écran et à la partager dans la section de discussion. 6. Rendre des composants interactifs: Rendre vos composants interactifs est certainement une chose supplémentaire que vous pouvez faire si vous avez le temps ou si vous voulez vraiment vous lancer dans le prototypage. Cela dit, si vous travaillez une équipe qui réalise beaucoup de prototypage, ce soit pour les tester ou présenter à des non-concepteurs, cela peut certainement vous faire gagner beaucoup de temps. Considérez cela comme un prototypage au niveau du composant ou du modèle plutôt qu' au niveau de l'instance. Par exemple, tout écran contenant une instance de ce composant de bouton principal adoptera ce changement de comportement lorsque vous passez la souris. Voyons cela en action. Maintenant, comment y parvenez-vous réellement ? Eh bien, c'est super facile. Nous allons simplement nous concentrer sur ces deux états du bouton. Ce que je vais faire, c'est cliquer sur celui-ci et passer au prototype. Une fois que je l' aurai fait, je verrai ce signe plus ici lorsque je le retournerai. Je vais cliquer et faire glisser. Je vais faire glisser cette flèche jusqu'à l'état de survol. Alors ici, au lieu d'appuyer, nous allons le faire en survolant et nous passerons à cet état de survol. C'est assez simple. Ensuite, nous passerons du mode prototype au mode conception. Je vais copier ce composant. Juste pour le montrer en action, je vais le coller dans ce composant ici. Ensuite, je vais cliquer sur l'ensemble du cadre de l'iPhone et appuyer sur le bouton Play ici. Une fois qu'il sera chargé, vous pourrez voir un aperçu de l'écran et je vais y revenir. Comme vous pouvez le voir en survolant la souris, cette instance de ce composant passe du bleu clair au bleu plus foncé. Il y a tellement de choses que vous pouvez faire avec ces types d'interactions. C'est le plus simple mais c'est celui que je trouve que j'utilise le plus souvent. Allez-y, essayez-le , puis faites preuve de créativité. Créez votre propre interaction, créez-en quelques instances et testez-les avec le lecteur d'aperçu. 7. Construire avec travail d'équipe: Avant de terminer ce cours, je voudrais partager certains de mes conseils pour construire en tenant compte du travail d'équipe. Si vous créez des composants à utiliser au sein de votre équipe, que votre équipe soit composée de deux designers ou de 50 concepteurs, ces étapes vous aideront à faciliter le processus. Premièrement, utilisez des conventions de dénomination cohérentes pour vos composants. Peu importe si vous n'avez que quelques composants comme nous en avons actuellement, mais lorsque vous commencez à développer un système de conception complet, vous aurez de nombreux autres composants, de nombreuses variantes, et même différentes versions de composants. Ce que j'aime faire, c'est les diviser en différentes pages et commencer à créer un fichier qui correspond à votre système de conception. Nous n'approfondirons pas cela dans ce cours, car les systèmes de conception sont une toute autre bête sur laquelle je peux créer un cours complet. Mais commencer tôt avec les conventions de dénomination peut vraiment vous aider. Supposons, par exemple, que nous ayons deux versions de ce composant de carte. Peut-être en avons-nous une avec une image et peut-être en avons-nous une avec des icônes. Ensuite, vous pouvez les nommer en conséquence. Vous pourriez dire carte/image et carte/icônes. Cela sera vraiment utile chaque fois que des utilisateurs utiliseront ces composants et les feront glisser depuis le panneau Asset de Figma. en revenir à notre autre exemple, nous pourrions également dire Nav/Mobile contre Nav/Desktop, ou Icons/Large, Icons/Small. Vous pouvez même obtenir des informations plus précises, des icônes/12 pour 12 pixels contre Icon/24 pour 24 pixels. Je l'ai également vu faire de cette façon. Numéro 2, nommer vos couches au sein d'un composant. Chaque fois que je crée des composants, je ne m' inquiète pas trop de leur complexité. Mais j'y reviendrai une fois que je satisfait du fonctionnement d'un composant, que je le testerai sur différentes tailles d'écran, puis j'en serai satisfait. À ce moment-là, vais-je revenir en arrière et commencer à nommer mes couches et à vraiment organiser les choses ? plupart du temps, je vais encadrer des éléments dans des cadres différents. Il se transforme en un cadre à l'intérieur d'un cadre à l'intérieur d'un cadre à l'intérieur d'un cadre. Il est très utile d'étiqueter tous ces différents cadres si quelqu'un doit modifier ce composant. numéro 3 consiste à réfléchir au type d'étiquettes de texte que vous utilisez lorsque vous utilisez un exemple de texte. C'est difficile à décrire de manière abstraite. Jetons un coup d'œil à cet exemple de champ. Pour tous ces éléments, nous avons utilisé le mot étiquette comme étiquette de champ, mais pour le texte qu'il contient, nous utilisons un exemple de texte plutôt que du texte plein. Cela aidera aussi beaucoup les développeurs Au lieu de simplement avoir du Lorem ipsum dedans, il leur décrit à quoi devrait ressembler le texte rempli, il est noir, alors que c'est ça l'exemple de texte doit ressembler à, qui est gris. J'ai fait la même chose avec le composant de la carte. J'ai nommé le titre Titre, puis la description que j'ai dedans. C'est une description et parfois je mets même quelque chose, cela peut être fait sur deux lignes avant d'être tronqué ou quelque chose comme ça. Je vais m'en servir comme guide pour mes développeurs. Cela dit, le but est d'essayer d' utiliser le texte dans vos composants à votre avantage, et cela ne fera que clarifier la situation pour toutes les personnes impliquées. Numéro 4, je l'ai déjà partagé dans plusieurs leçons, mais j'utilise la mise en page automatique. Je ne peux pas vous dire combien de fois j'ai utilisé un composant et j'ai été tellement frustrée parce que dès que je l'utilise dans un projet réel, il n'est tout simplement pas assez flexible pour que je l'utiliser et Je dois donc l'ajuster, et tout en même temps, il serait beaucoup plus rapide de l'ajuster au niveau des composants afin que le travail ne soit pas doublé, triplé ou quadruplé par tous les concepteurs de votre équipe. Ce sont mes quatre conseils pour construire en tenant compte du travail d'équipe. N'hésitez pas à y réfléchir et partager certaines de vos préférées avec votre équipe. 8. Réflexions finales: Félicitations pour avoir suivi ce cours. J'espère vraiment que petit à petit, ces leçons vous ont aidé à vous sentir plus l'aise pour créer des composants dans Figma. Je vous encourage vivement à continuer à vous entraîner et à partager ce que vous apprenez avec votre équipe. Vous pouvez également n'hésitez pas à laisser toutes les questions qui ont été soulevées dans la section de discussion ci-dessous et je m'assurerai d'y répondre. Merci beaucoup d' avoir passé du temps avec moi aujourd'hui et je vous verrai lors mon prochain cours ou plus sur ma chaîne YouTube. Au revoir.