Le guide No Bull pour devenir un pro Figma en 2023, et un professionnel de produit d'UX/UI/

1. Introduction et remorque: Salut, merci d'avoir cliqué dessus et je voulais consulter mon cours sur Figma. Voici donc le noble cours sur Figma. Et ce que nous allons faire, c'est vous apprendre à devenir une Figma Pro le plus rapidement possible. Je m'appelle Chuck, et conformément à la philosophie du prix Nobel, ce que vous allez en retirer n' est rien de plus, rien de moelleux. Nous allons vous donner exactement ce dont vous avez besoin pour utiliser l' outil Figma en toute confiance et compétence, afin de concrétiser toutes les idées et les sujets dont vous discutez avec vos amis, vos coéquipiers et de les exprimer dans l'outil Figma. Il y a donc plusieurs raisons pour lesquelles vous devriez me faire confiance et faire confiance ce cours et voir comment nous allons y parvenir. L'utilisation de mon cours comporte quatre volets. Tout d'abord, je suis un utilisateur de Figma depuis 2018. Et ce n'est pas tout, je suis actuellement un ami de Figma pour la région de Manchester. J'ai donc été très attirée Figma et je l'adore vraiment et ce que j'ai pu accomplir avec elle. Et c'est quelque chose que j'aimerais partager avec vous tous. Ensuite, il y a le type de travail que j'ai effectué également. J'ai donc été un excellent ingénieur logiciel, le prochain responsable technique. Je comprends donc non seulement comment devenir un concepteur de produits, mais aussi comment tirer le meilleur parti de Figma et rendre votre flux aussi simple et direct que possible. Mais je sais ce dont vos ingénieurs auront besoin , car je possède ces compétences. Je sais comment tout s'intègre. C'est donc la deuxième raison. Le troisième est un type d'endroits où j'ai également travaillé. Il n'y a donc pas que des entreprises dans lesquelles j'ai travaillé ou des startups qui ont travaillé dans les deux cas. Ainsi, en termes d'entreprises et d'entreprises ayant travaillé dans l' ordre chronologique inverse, on trouve Jaguar Land Rover. Avant cela, j'ai travaillé à la Cooperative Bank ici au Royaume-Uni. Avant cela, j'ai travaillé pour une société de conseil appelée KYC Solutions, qui fait désormais partie du streaming Disney. Vous savez donc qu' il ne s'agit pas simplement de HTML, CSS, de certains éléments de base. Ce seront des choses vraiment complexes et difficiles que j'ai pu accomplir et que j'ai pu accomplir dans le cadre de mes compétences en ingénierie. Je sais donc exactement comment ces personnes pensent, comment les personnes occupant ces postes souhaitent recevoir des designs. Du côté de Figma. Vient ensuite le moyen. Je rédige donc des articles et des supports depuis quelques années, avec plus de 300 000 vues, sans oublier l' UX Collective, le plus grand support de publication UX. Et j'ai beaucoup aimé enseigner aux autres la communauté comment procéder, qu'il s'agisse des choses les plus simples, comme s' assurer de maîtriser l' imbrication des cadres dans Figma, ou de choses plus complexes comme la capacité de prototyper des points d'arrêt et d'assembler ce type de prototypes. Et ils ne sont pas toujours utiles. Ne vous méprenez pas. Mais parfois, cela en vaut vraiment la peine lorsque vous voulez vraiment vérifier quelque chose et vous assurer que le prototype est aussi bon que possible afin d'obtenir le meilleur résultat possible pour vos utilisateurs et pour votre produit. Et si cela ne vous suffit pas, j'ai la fenêtre de mon administrateur pour chien de compagnie ici pour me tenir compagnie de temps en temps. Gardez donc un œil ouvert et vous pourriez vous joindre à nous pour certaines leçons. Cela fait encore plus. Si vous n'êtes pas encore convaincu, il n'y a aucun angle pour vous convaincre. Donc, à ceux d'entre vous qui veulent persévérer, merci beaucoup d'avoir choisi de tenter leur chance moi et je ne vous décevrai pas. Allons-y. 2. Fenêtre, panneaux et l'étape principale: Dans cette leçon, nous allons aborder les panneaux de base, les fenêtres et les éléments que vous devez connaître lorsque vous ouvrez un fichier dans Figma pour la première fois et que vous vous orientez. Nous allons donc aborder le panneau des couches, le panneau des pages, les panneaux de conception, de prototype et d'inspection, ainsi que l'emplacement de vos outils et objets par défaut . Donc, ici, lorsque vous ouvrez une fenêtre Figma et que vous ouvrez n'importe quel fichier, ou même lorsque vous n'ouvrez pas le fichier, vous verrez une petite icône plus en haut. Et vous verrez cette page, qui est pratique lorsque vous souhaitez choisir entre un fichier de conception et un fichier de gemme en forme de figue. allez ouvrir un nouveau fichier de conception ici et vous orienter vers les différentes fenêtres et l'endroit où tout se trouve. Ainsi, comme vous pouvez le constater lors de la première ouverture, il ne se passe pas grand-chose. Vous avez la scène principale au centre. C'est donc ici que vous effectuerez la plupart de votre travail de conception. Le panneau Calques est ouvert par défaut sur la gauche. Ainsi, toutes les informations importantes que vous voudrez connaître et gérer seront là. Alors que je crée des éléments de base, vous verrez les différentes couches apparaître ici dans le panneau des couches. Ce que vous verrez, c'est que le panneau des pages n'est pas ouvert par défaut. Je l' ouvre donc généralement moi-même et, au fur et à mesure que mon fichier commence à s' agrandir et que je veux m'organiser, travailler avec d'autres personnes, c'est ce que je vais ouvrir. Et vous pouvez créer des pages ici, assez simplement. Les autres panneaux que vous devez connaître se trouvent également sur le côté droit. Donc, si je crée un rectangle simple, vous verrez que le panneau de conception ouvre différentes options concernant son emplacement, taille et quelques personnalisations différentes que vous pouvez effectuer. Ce panneau de conception change en fonction du type de couche que vous avez ouvert. Vous pouvez donc voir ici, avec la couche de texte, que j'ai les différents éléments que je peux ouvrir et modifier d'un point de vue technique. Les autres panneaux que vous verrez indiquent que lorsque je crée un cadre simple, je veux créer un prototype et créer des flux pour créer un prototype cliquable. C'est ici que je devrai être. Vous pouvez donc créer des points de départ de flux en fonction du cadre dont vous disposez. Configurez les interactions à partir de différentes images ou de différentes couches. Vous pouvez donc créer une interaction à partir de ces éléments, mais vous pouvez créer une interaction à partir de ces éléments. Ensuite, vous verrez le panneau d'inspection sur le côté droit. Cela produit donc des propriétés et des couleurs générées automatiquement. Je ne les utilise donc pas trop personnellement. Mais vos développeurs, les développeurs avec lesquels vous travaillez peuvent les utiliser eux-mêmes. Et vous pouvez voir du code de base généré automatiquement qui peut s'avérer utile. Donc, les deux choses que je tiens à porter à votre attention, ou trois, le sont en fait. Le premier est le contexte. Vous pouvez donc modifier la couleur de l'arrière-plan si c'est trop tard pour vous, si vous souhaitez travailler sur un fond plus foncé, disons que cela vous convient mieux . C'est donc généralement agréable de l'avoir ici. vous intéresse de changer cela, mais je préfère le laisser par défaut. Deuxièmement, les styles locaux. C'est ce que je voulais partager avec vous. J'ai donc créé un rectangle ici et changeons cette couleur quelque chose de aléatoire, comme le vert citron. Une fois que vous avez créé cette couleur, nous pouvons l'ajouter à notre bibliothèque locale. En faisant cela. Du vert citron, disons-le. Cela l'ajoute à vos styles locaux. Il y a donc un tas de choses différentes que vous pouvez ajouter. Texte, couleurs, effets et styles de grille que vous souhaiterez peut-être utiliser pour créer vos designs et vos prototypes. Tout en haut, c'est la dernière chose à faire. Moi, l' avant-dernière chose en fait, avant de passer à ça, la deuxième, la dernière chose que je veux partager, avant-dernière chose que je veux partager avec vous, c'est cette chose ici. Il serait donc capable de voir où se trouve votre fichier et de le renommer. Alors, mon premier dossier. Vous aurez accès à quelques options différentes à partir d'ici pour pouvoir déplacer votre fichier vers un autre projet, ajouter votre fichier à vos favoris le dupliquer si vous souhaitez publier votre bibliothèque. Ainsi, lorsque vous commencez à travailler avec des systèmes de conception, c'est quelque chose que vous voudrez peut-être utiliser. La toute dernière chose à partager et à aborder avec vous est que tous vos principaux outils seront ici. Elles sont d'une simplicité trompeuse. Il n'y a pas beaucoup d'outils qui le comparent. Si vous êtes un peu old school et que vous avez déjà utilisé Photoshop. Il existe un vaste panneau, différents outils que vous pouvez utiliser. Dans la leçon suivante, nous allons passer en revue ces outils, comment les utiliser et comment en tirer le meilleur parti. 3. Outils et leurs raccourcis clavier: Ensuite, nous allons aborder les différents outils sur ce que sont les outils, pour lesquelles vous pouvez les utiliser, raccourcis que vous pourrez également utiliser, puis passer d'un outil à l'autre. Donc, le retour dans le fichier commencera de gauche à droite, ici dans la barre supérieure. L'outil par défaut dont vous disposez est donc l'outil pointeur. Donc, si vous avez quelques éléments différents, l'outil pointeur est utile pour simplement les faire glisser. Et le raccourci pour cela est v. Donc, si je me souviens bien , la lettre V est assez pointue. Vous pouvez donc l'utiliser aussi. Pointez autour de vous. En dessous se trouve l'outil de mise à l'échelle. Nous avons donc mis du temps à le découvrir, mais l'outil de mise à l'échelle est en fait vraiment très cool. Donc k est un raccourci, ou vous pouvez cliquer en utilisant la barre d'outils en haut à gauche. Et c'est assez nouveau, en fait, c'est assez récent. Ce n'était pas le cas auparavant, et vous pouvez effectuer une mise à l'échelle en facteurs que vous souhaitez ajuster par défaut. La valeur par défaut se trouve en bas à gauche, je crois. Nous le faisons donc deux fois. Vous pouvez voir qu'il a grandi depuis le coin inférieur gauche. Vous pouvez également vous développer à partir du centre. Donc, si je fais à nouveau deux fois, vous pouvez voir qu'il chevauche maintenant le carré situé à gauche de celui-ci. C'est donc l' outil de mise à l'échelle. Vous pouvez également cliquer sur des objets et simplement cliquer et faire glisser à votre guise. Vous pouvez également effectuer une mise à l'échelle. Cela évolue proportionnellement en fait, je pense que c'est ce que j'essaie de dire. Vous ne devriez donc pas avoir à vous soucier trop d'obtenir la bonne taille. Si vous revenez à l'outil pointeur, vous pouvez ensuite modifier la forme. Comme on pouvait s'y attendre. Ensuite, nous avons les cadres, les sections et les tranches. Les cadres sont votre pain et votre beurre . Nous les aborderons dans le prochain module. C'est ainsi que vous assemblez différents prototypes et que vous pouvez travailler sur l'imbrication des cadres. Et lorsque vous utilisez l'outil Frame, vous obtenez également des préréglages. C'est donc plutôt cool que vous puissiez utiliser éléments tels que le préréglage Apple Watch ou que vous puissiez utiliser d'autres éléments et dire que j'ai un MacBook Air et que je veux créer un prototype fonction de cette taille d'écran. C'est donc très pratique. Ce que vous pouvez également utiliser. Voici l'outil de section. Le raccourci est Shift S. Et cette section est très bonne pour rassembler vos affaires. Vous pourrez ainsi organiser toutes vos affaires et les faire glisser de gauche à droite. C'est plutôt cool. Débarrassons-nous de ça. Ensuite, nous avons les outils de mise en forme. La valeur par défaut est donc le rectangle. Donc, comme vous l'avez vu là-haut, si j'utilise are, je peux dessiner un rectangle et le personnaliser sur la droite. J'ai aussi l' outil linéaire et l'outil flèche. Je peux donc utiliser L pour tracer une ligne, ou je peux utiliser Shift L pour dessiner une flèche. Je peux utiliser 0 pour, c'est l'outil Ellipse, mais je me souviens que c'était 0 pour ovale. Alors je vais le faire glisser. Il ne conserve aucun rapport hauteur/largeur. Et voici Shift, ça va être exactement carré. C'est. C'est très bien pour créer des formes ovales et faire des choses comme des avatars ou des icônes. Vous avez également ces autres outils, le polygone et l'étoile. Donc, l'étoile est à peu près par défaut, il vous suffit de créer une icône d'étoile comme vous le souhaitez. Et vous avez également le polygone. Par défaut, il s'agit donc d'un triangle. Mais dans le module suivant, devriez expliquer comment modifier cela et quelques informations détaillées sur l'édition de formes. Il a également obtenu une image ou une vidéo de Place. Et je ne l'utilise pas normalement. En fait, faites-le glisser directement depuis le bureau ou depuis mon navigateur de fichiers. Et je trouve cela beaucoup plus facile. Ensuite, nous avons l'outil stylo et crayon. Je n'utilise pas trop le stylo parce que c'est un outil point à point, ce qui n'est pas grave. Mais ce que j'ai utilisé le plus souvent, c'est le crayon. Je pourrais donc m'en servir pour annoter des choses et dire que c' est mon polygone et que c'est une étoile. Trouvez donc que l'outil crayon est assez bon et qu'il fonctionne aussi bien sur un iPad que sur une tablette. C'est donc très bien si vous voulez simplement esquisser quelque chose ou faire des annotations et des critiques de conception. Vous avez la couche de texte. Vous pouvez ainsi créer des couches de texte et ajouter votre texte à vos conceptions et prototypes. Vous disposez des ressources nécessaires pour couvrir vos composants, plug-ins et vos widgets. C'est donc très utile. Ensuite, vous avez l'outil manuel. Ce que vous avez peut-être remarqué, c'est que je fais glisser le curseur chaque fois que je voulais naviguer, utilise un outil manuel direct, mais que vous pouvez également cliquer avec le milieu de la souris et l'utiliser pour vous déplacer dans votre fichier. Enfin, nous avons les commentaires. Je peux donc appuyer sur C pour commenter et dire qu'il s'agit d'une couche de texte. Voilà. Ce sont tous les outils avec lesquels vous devez travailler. 4. Pages et noms de page meilleures pratiques: Enfin, je pense que la dernière chose qui mérite d'être abordée en soi, ce sont les pages. Et c'est parce que ce n'est pas toujours le cas. Au début, on ne sait pas exactement combien de pages vous devriez avoir, comment vous devez structurer cela, ce genre de choses, et aussi quelles sont les limites. Donc, en termes de recommandations et de la façon dont je suggère d'organiser vos pages et de les assembler, vous utilisez ces cinq constantes différentes. Vous avez donc d'abord votre couverture. C'est donc la première page sur laquelle lorsque vous revenez au navigateur de fichiers, vous verrez tout ce que vous avez dans ce fichier en particulier. Cela peut donc être bon aussi. Mets ça en haut et dis « mon premier dossier ». Et si je l'encadre ensuite, cela peut être la feuille de couverture. Ainsi, lorsque quelqu'un consulte ce fichier dans le navigateur de fichiers, c'est ce qu'il voit. Vous pouvez donc mettre les informations clés, les utiliser pour les statuts, etc. Et c'est très utile lorsque vous travaillez avec d'autres designers. Et même juste pour vous rappeler sur quoi vous travaillez et ce que contient ce fichier. Le suivant, ce sont les deux. Ils sont donc appelés Final et Prototype. Ainsi, la finale peut également être qualifiée de transfert. Parfois. J'aime mettre cela en deuxième page. C'est à ce moment-là que vous avez terminé votre processus de conception et que vous avez fini de déterminer ce que vous voulez construire, comment vous voulez le construire, etc. C'est la page vers laquelle je dirigerais mes ingénieurs et les concepteurs lorsque je veux qu'ils voient exactement ce qui doit être construit et ce qui va suivre exactement. Et ce que j'aime faire, c'est aussi le décomposer un peu. C'est donc ce que vous considéreriez comme la page terminée si vous le souhaitez. Vous pouvez également créer des versions alternatives. Cela peut donc parfois être utile si vous souhaitez indiquer aux gens que nous avons procédé à quelques révisions clés. Et nous voulons créer une version 1, mais voici une version 2 que nous voudrions peut-être ajouter en haut. La suggestion suivante est un prototype. C'est à ce moment-là que vous avez un prototype de bout en bout sur lequel vous pouvez cliquer et que je souhaite communiquer aux autres concepteurs et aux développeurs, etc. Peut-être différent du prototype cliquable ou des tests utilisateur que je suis en train de préparer. C'est pourquoi je recommande de l' avoir sur une page séparée. Le travail, c'est la prochaine étape. C'est donc ici que vous passerez le plus clair de votre temps ou que je passe le plus clair de mon temps à expérimenter différents flux, quelques idées différentes, différentes manières de modéliser quelque chose ou de communiquer quelque chose à mon temps à expérimenter différents flux, quelques idées différentes, différentes manières de modéliser quelque chose ou de communiquer quelque chose à l'utilisateur et à voir si nous pouvons arriver à une conclusion jusqu'à ce qu'une décision soit prise quant à ce que cela devrait être. C'est bien si je dois également apporter quelques petites corrections et ajustements, une mise à jour. Par exemple, il se peut que nous souhaitions modifier l'échelle des caractères à ses débuts ou plus tard, nous choisissions de modifier le rayon de bordure et que nous voulions nous assurer que cela soit parfaitement correct ou mettre à jour la copie, par exemple avant de passer à la page de transfert. Le dernier que je recommande concerne les composants. Il existe donc un autre module dans lequel nous aborderons les composants de bout en bout et en profondeur. Mais avoir une page séparée avec vos composants est très pratique. Ainsi, si un autre designer accède à votre fichier, il ne cliquera pas sur le fichier de travail pour se demander où se trouvent tous les composants ? Ou entrez dans le prototype et demandez : où se trouvent toutes les différentes pièces ? Peut-être un excès de copie, le mauvais genre de choses. Ayez donc quelques blogs différents et des sujets qui parlent de cela, lesquelles c'est vraiment utile à faire. Mais pour faire court, si vous avez créé une page sur laquelle vous avez créé tous les nouveaux composants fonctionnels, ce sont tous des composants locaux. Il est bon de séparer les deux et de les mettre sur la même page. Pour que vous puissiez le voir clairement, voici les composants que j'ai créés et qui devraient être réintégrés dans un système de conception plus vaste. Voici les composants locaux que je n'ai utilisés que localement pour ce fichier afin de livrer le travail et de prendre une décision. Voilà qui conclut le premier module. J'espère que cela vous a été utile, qu'il vous a donné une idée de l'emplacement des différents panneaux et de la façon de vous y retrouver dans Figma dans le fichier de conception. Où trouver les principaux outils dont vous aurez besoin et comment les utiliser, ainsi que les pages et la configuration que je recommande pour les pages. Dans le module suivant, nous allons aborder les formes et les outils et les utiliser un peu plus en profondeur. Vous pouvez donc voir un peu plus en détail comment tirer le meilleur parti de ces éléments, au lieu de simplement glisser-déposer les différents préréglages. 5. Point de contrôle 1 : prendre un souffle: Cool. J'espère donc que vous vous sentez orienté vers le programme Figma et que vous ne vous sentez pas trop perdu lorsque vous vous lancez et que vous essayez de comprendre ce qu'est cette fenêtre. Maintenant, vous avez une idée de l'endroit où se trouvent tous les éléments principaux d'un fichier de conception Figma. Ensuite, nous allons aborder les couleurs, les lignes, les formes et la topographie, pas dans cet ordre, mais nous allons passer en revue ces éléments. Tu as l'air perplexe, toi aussi. Tu es comme celui dont j'ai parlé. Oui, nous allons passer en revue ces choses. Oui, tu t'en sors très bien. Continuez comme ça. 6. Formes, rayon de bordure et montage de forme: Dans ce module , ce sera assez simple. Nous allons aborder les formes, rayon des bordures et l'édition de formes. Ce sont les principes de base et vous avez déjà utilisé des outils tels que Sketch ou Photoshop, ou avez-vous expérimenté modification de ces différentes formes ou même des feux d'artifice macromultimédia à l'époque où c'était possible. Vous trouverez cela tout à fait naturel. Sinon, ne vous inquiétez pas, nous allons entrer dans les différents détails et les détails que vous devez connaître pour être bon UX UI ou un bon concepteur de produit. Donc, de retour dans l'éditeur, nous allons commencer par l'outil rectangulaire. Encore une fois, le raccourci est le nôtre, si nous le créons, c'est sympa, très simple. Vous pouvez créer quelque chose que d'ajouter un rayon de bordure. Vous pouvez l'ajouter ici. Cela permet donc de l'ajouter à tous les coins. C'est donc très bien pour créer un objet de type carte. Par exemple, vous pouvez également créer deux cadres, soit dit en passant, guise de mise de côté rapide, afin d'ajouter un radius de bordure, ce qui vous sera utile plus tard. Et ce qu'il faut savoir à propos de borderradius, c'est que vous pouvez le rendre indépendant. Donc, par exemple, je voudrais peut-être que les deux coins inférieurs soient nets, mais que le coin supérieur soit en fait arrondi. Si je crée, par exemple, en cliquant avec le bouton droit de la souris et en le retournant verticalement, je peux le rendre blanc, par exemple et le raccourcir. Et puis ça ressemble un peu plus à une carte. C'est très utile lorsque vous travaillez avec le rayon de bordure. Si nous ajoutons un polygone, je peux vous montrer où. Je pense qu'ici, borderradius fonctionne toujours à tous les coins. Mais ce que vous pouvez faire, c'est lorsque vous vous lancez dans l'édition de formes, que vous pouvez ajouter d'autres sommets, je pense que c'est le mot. Et ils ont tous une bordure et une valeur de rayon indépendantes. Donc, ici, je peux le changer en 999 et c'est comme si c' était super incurvé ici. Mais je peux les laisser tels quels et ajouter d'autres éléments selon mes besoins. Il se peut donc que j'aie besoin d'une forme différente. C'est donc très utile si vous souhaitez peaufiner une forme et effectuer naturellement un travail plus illustratif , comme modifier une forme. Ensuite, en utilisant le rayon de bordure en conjonction avec cela, vous pouvez créer des formes vraiment complexes ou des formes vraiment fascinantes vos besoins et comme bon vous semble. L'outil ovale est probablement la prochaine chose intéressante à partager avec vous. Encore une fois, n'oubliez pas que 0 est pour ovale. Et si je maintiens la touche Shift enfoncée, je peux changer l'air, conserver le rapport hauteur/largeur lorsque je mets à jour la taille. C'est donc très pratique quand je travaille avec ce truc. L'autre chose à mentionner est qu'il y a aussi la rotation. Donc, si vous ne le faites pas dans le bon sens, vous pouvez modifier la rotation de l'objet ou le placer près de l'un des coins, vous pouvez le faire glisser à l' angle que vous préférez. Maintenez la touche Shift enfoncée. Vous pouvez le remplacer par l'un des degrés de capture. Vous pouvez donc voir ici qu'il change environ tous les 15 degrés. Si vous surveillez la valeur en haut à droite, c'est très pratique lorsque vous souhaitez travailler sur des formes, les assembler à l'aide d'un rayon de bordure, ajouter ces sommets et créer des formes personnalisées. Utilisez-le pour obtenir exactement ce que vous voulez et les assembler tous. La dernière chose à faire avant de passer à deux lignes est le Star Tool. Et je ne suis pas sûr d'être honnête avec vous pourquoi il s'agit de son propre outil personnalisé. Mais ici, il y a cette propriété spéciale selon laquelle les rayons sont des pointes que vous pourriez avoir dans l'étoile. C'est donc parfois amusant de jouer avec. Il semble que 60 soit le maximum que vous puissiez faire. Mais c'est très utile si vous avez besoin d'une forme plus en étoile. 7. Astuces avec un rayon de frontière: Une dernière petite chose que j'aime vous montrer, qui est plutôt cool, c'est que si vous vous en souvenez, nous utilisons 0 et appuyons sur Shift pour créer un cercle. Maintenant, avec le rayon de bordure, créons un rectangle de la même taille. Et si vous définissez le rayon de bordure une valeur élevée, disons 200. Et maintenant, ça ressemble aussi à un cercle. Permettez-moi de changer cette couleur pour que vous puissiez la voir un peu plus clairement. Mais soyez prudent lorsque vous l'utilisez. Parce que si j'utilise uniquement l' outil de pointeur de point normal, puis que je le redimensionne. Et vous pourrez voir que celui-ci reste un cercle. Et l'un d'eux ressemble à un rectangle aux bords très incurvés. Soyez donc prudent lorsque vous utilisez cette technique, ce qui n'est pas faux, mais c'est une jolie petite technique que vous pouvez utiliser. Si vous devez rapidement faire un cercle. Et vous voulez plutôt utiliser l'outil rectangulaire, ou c'est ce qui vous vient à l'esprit en premier. 8. Lignes et flèches: Maintenant que vous maîtrisez les outils permettant de créer des formes, modifier des formes au niveau, dans le rayon de bordure, des lignes et des flèches, ce sera assez facile pour vous. Je vais te montrer. Nous allons donc d'abord créer des lignes et des éléments avec lesquels nous pourrons travailler. Vous pouvez donc utiliser le, vous pouvez cliquer ici pour obtenir une ligne et la tracer normalement. Ou vous pouvez utiliser l comme touche de raccourci pour le faire. Et si vous maintenez la touche Maj enfoncée, vous pouvez, au lieu de la laisser libre, déplacer vers le bas selon un angle particulier. Vous pouvez en modifier l' épaisseur. Vous avez tous ces différents paramètres ici, donc c'est très pratique. Je peux simplement taper du bleu, par exemple, et le faire. Maintenez la touche Shift enfoncée, puis appuyez sur L pour faire apparaître l'outil fléché. Il est donc bon de garder un œil en haut à gauche pour voir quel outil vous utilisez. Et puis cela crée une flèche. Et je peux m'en servir pour annoter mes designs et les choses sur lesquelles je travaille. Donc, par exemple , je pourrais le faire et appuyer simplement sur Shift L à chaque fois pour connecter toutes les différentes formes que j'ai. Si vous voulez donner à la flèche une forme différente, par exemple ce que je fais parfois, faites glisser un sommet supplémentaire et remplacez-le par 50, peut-être 200. 200 nous donne un peu plus de temps pour jouer avec ça. Et lui donne une belle courbe. Vous pouvez donc double-cliquer pour entrer dans le montage, puis double-cliquer à l'extérieur pour sortir. Et à partir de là, j'ai maintenant une jolie petite flèche que je peux faire glisser ici. Je peux aller dans le coin, faire pivoter et dire « voici le mien », utilisons T pour le texte. Juste pour illustrer et utilisez K pour agrandir. Voici donc mon point de départ. Et je peux annoter un petit flotteur. Cela vous donne donc une idée de l'outil linéaire, l'outil flèche, de la façon de le modifier et de le déplacer. Et pratiquement ce pour quoi vous pourriez l'utiliser. 9. Styles de couleur: Donc, pour cette partie, nous allons parler de styles. Nous allons d'abord parler des styles de couleurs, de la façon de les configurer et de commencer le rapidement possible afin de créer des éléments plus rapidement. Donc, dans mon premier fichier, vous l'avez peut-être remarqué, ou si vous vous souvenez de l'une des leçons précédentes, nous avons défini un style de couleur de base appelé vert citron. Et juste pour récapituler, quand on fait quelque chose comme un rectangle. Le raccourci est donc R, et vous pouvez simplement le faire glisser sur la scène principale. Pour ce faire, nous pouvons mettre à jour le remplissage avec l'un des styles locaux que nous avons créés. Donc, une chose que vous remarquerez, c'est que j'ai un ensemble de couleurs différentes ici. Ils étaient fournis par défaut chaque fois que vous créiez une nouvelle équipe, mais ce n'est plus le cas. Donc, ce que je vais faire, c'est fournir un lien dans la description. Si vous voulez les utiliser ou si vous voulez utiliser quelque chose de plus moderne , je vais utiliser le design matériel, en utilisant certaines de ces ressources. Et je les suggère afin de configurer votre palette et de commencer à travailler à partir de celle-ci. Donc, par exemple, nous avons ce fichier que j'ai trouvé sur la communauté. Nous avons donc environ 5 000 téléchargements et c'est très simple. Vous pouvez simplement en faire une copie. Il vous suffit de cliquer ici. Cliquez sur Publier la bibliothèque. J'utilise le plan gratuit et très probablement, y a probablement que deux styles. Les couleurs par défaut. Et publiez ces styles. Et voilà. À partir de là, vous pourrez revenir à votre dossier. Vous pouvez cliquer sur Figma et cliquer sur Bibliothèques juste pour vous assurer que nous les avons partagées. Et vous pouvez voir que j' ai ces bibliothèques disponibles qui restent. Mais celui-ci, je viens de publier la conception matérielle en deux couleurs. Et ainsi, sur le plan gratuit, vous pouvez partager les styles de base. Cela signifie que je peux maintenant cliquer sur Fermer et modifier la couleur de remplissage. Et j'ai toutes ces couleurs disponibles dans un spectre de couleurs. La commande est donc correcte. Vous les avez comme si absolument non, c'est plutôt bon en fait. Nous nous sommes donc basés sur des matériaux pour concevoir des matériaux dès maintenant dans trois ans, mais cela vous aidera à démarrer et à au moins être capable de travailler avec quelque chose. Je peux donc définir le trait, par exemple réglons-le sur dix pixels. C'est peut-être trop, peut-être cinq. Et nous pouvons y aller mettre à jour ces couleurs et les régler à votre guise, peut-être une couleur légèrement meilleure que cela. Cela signifie donc que vous pouvez configurer ces styles. Et puis, au lieu d' essayer de vous souvenir des codes hexadécimaux comme celui-ci, souvenez-vous de choses comme d9. Cela signifie qu'au fur et à mesure que vous parcourez votre conception, vous pouvez essayer de vous souvenir de laquelle il s'agit. Un conseil que je vais également vous donner est que vous pouvez effectuer une recherche par nom. Vous pouvez donc voir sur l'échelle de couleurs des matériaux qu'ils vont de 50 à la teinte la plus foncée, soit 900. Et puis ils ont des nuances de 100, 200, 300, etc. Vous pouvez donc filtrer par ceux-ci et taper simplement pink 700 et tout s'affichera directement. C'est donc un moyen très simple de reconstituer rapidement un design et de vous assurer que vos couleurs sont cohérentes. Ainsi, lorsque vous l'assemblez et que vous l'utilisez, prenez du recul, le design semble vide. 10. Styles de typographie: Génial. Maintenant que vous avez défini les couleurs, passons à la typographie. Parce qu'une fois que vous aurez réuni ces deux éléments et que vous aurez utilisé les outils de mise en forme de base de Figma, vous serez déjà en mesure de créer de nombreuses choses sans apprendre certaines des autres techniques les plus avancées. Saute dedans. En matière de typographie. N'oubliez pas que notre touche de raccourci est T pour le texte. Lorsque nous l'ajouterons, nous pourrons dire mon premier titre, par exemple, ce que nous allons faire ce que nous allons faire, c'est vous montrer comment le configurer. Si vous souhaitez créer votre propre pile de typographie. Ensuite, je vais vous montrer le raccourci. Vous pouvez donc passer à l'étape suivante. Si vous êtes une personne qui utilise des raccourcis comme moi, ou si vous voulez comprendre comment cela fonctionne, c'est aussi comme moi. Je vais vous donner une brève introduction. Définissons mon premier titre. Disons que c'est un 24 points. Et si vous voulez créer un style et cliquer sur le signe plus, n'oubliez pas nous pouvons en définir un et dire Style de titre. Maintenant, lorsque vous souhaitez créer d'autres textes, vous pouvez dire un autre texte, et le style de titre des textes les plus récents sera utilisé par défaut . Ce que vous pouvez faire si vous souhaitez définir un corps de texte, c'est le découpler. Donc, si jamais vous êtes bloqué, n'oubliez pas que vous pouvez toujours détacher votre style. Cela ne pose aucun problème. Réglez la taille de celui-ci. Remettons cela à irrégulier. Et maintenant, je peux créer un autre style cool. Maintenant, quand j'ai quelques choses différentes à concevoir ou à assembler. Maintenant, j'ai défini mes styles locaux pour la tête et pour le corps. Et je pourrais peut-être en créer quelques autres. Donc, si vous avez une idée précise de ceux que vous souhaitez mettre en place, ou si vous avez une formation en graphisme, par exemple, ou peut-être que vous avez une formation en ingénierie frontale et que vous avez déjà vu ce genre de choses. C'est cool. Vous pouvez toujours le configurer, le personnaliser et jouer avec votre cœur à votre guise. Si vous voulez avancer rapidement et que vous n'êtes pas vraiment un concepteur visuel. Comme si je le suis toujours, dans une certaine mesure. Ce que vous pouvez faire à la place, c'est télécharger quelque chose, par exemple comme nous l'avons fait avec les couleurs. Voici un fichier que j'ai trouvé sur la communauté. Je l'ai donc déjà copié dans mes brouillons. Et comme avant, nous pouvons publier cette bibliothèque, publier uniquement des styles, disons des styles de photographie de base. C'est très simple. Nous pouvons revenir ici. Cliquez sur Bibliothèques dans le menu figma en haut à gauche de mon dossier. Ensuite, je peux activer cette bibliothèque de fichiers dans mon fichier de travail actuel. Si nous fermons ceci et en faisons une copie. Pour que je puisse commander C, cliquez avec le bouton droit de la souris et collez ici. Maintenant, je peux les modifier et voir ces styles de typographie de conception matérielle. Disons que le chapitre 2 est énorme et que nous avons le premier corps. Donc, lorsque vous assemblez vos propres designs et les objets que vous souhaitez assembler. Vous pouvez également vous en servir comme base, puis modifier ces styles. Je suggère d'essayer de s'en tenir à un système existant. Si vous n'avez pas trop d'expérience, n'avez jamais fait ce genre de chose auparavant. Je trouve cela très utile car il définit l'échelle typographique d'une manière agréable, ce qui permet de voir très facilement quel est le titre, quel est le corps et qu'est-ce qu'une étiquette ? Ainsi, par exemple, si je crée un bouton, je peux accéder au style du bouton et définir le style de manière à ce que vous puissiez le reconnaître visuellement et le distinguer des autres styles. Alors voilà. Il existe une configuration rapide dans le domaine des textiles, comment le faire vous-même. Et une suggestion de quelque chose qui peut vous aider à démarrer tout de suite. 11. Point de contrôle 2 : toujours respirer ?: Des trucs gris. J'espère donc que vous avez apprécié le cours jusqu'à présent. Dans ce module, nous allons aborder les cadres, les groupes en sections. Maintenant, cela mérite son propre module car il existe de subtiles différences entre un groupe et un cadre A. Et ce que vous remarquerez, c'est que votre mémoire musculaire peut être utilisée en regroupant des éléments. Il est important de noter qu'il existe une différence et que les cadres sont en fait plus puissants. Et je vais vous montrer les raisons pour lesquelles ils sont plus puissants et pourquoi vous les utiliserez plus souvent. Mais il est également très important de se souvenir des raisons pour lesquelles les groupes sont également très importants, car ils ont également leurs propres avantages à être utilisés. Vous avez également des sections ici, qui sont un ajout relativement récent à Figma. C'est donc très bien pour organiser votre travail. Je pense donc que cela résume vraiment trois outils différents que vous utiliserez ensemble. Si vous êtes plutôt un lecteur, alors j'ai cet article, dont je vais suivre le lien ci-dessous qui a été écrit il y a environ deux ans et demi. Cela explique les différences entre l' utilisation d'un groupe et l'utilisation d' un cadre et les cas dans lesquels vous souhaiterez peut-être utiliser l'un ou l'autre. C'est donc très utile. Et sans plus tarder, allons-y. 12. Groupes: Commençons donc par les groupes, car pour de nombreuses personnes, en particulier si vous n'avez jamais été designer auparavant ou utilisé certains des outils de conception par le passé. Les groupes vous seront beaucoup plus familiers. Nous allons donc passer à la Figma et je vais vous montrer comment tout cela s'intègre. Donc, pour montrer comment fonctionnent les groupes, je vais créer différentes choses. J'ai donc une couche de texte normale, aurai un cercle. Appelons simplement ce cercle et faisons-le bleu pour qu' il soit plus facile à voir. Ensuite, je vais également importer une image. Et hop, oups. Donc, comme vous pouvez le voir, c'était plutôt cool en fait, vous pouvez le placer à l'intérieur d'objets. Si votre image importante nous allons faire, c'est de la mettre ici et de la laisser reposer en maintenant la touche Commande enfoncée. Vous pouvez réellement recadrer les images sans avoir à double-cliquer pour les modifier. C'est donc très pratique. Et voici quelques œuvres d'art sur lesquelles j'ai travaillé pour apprendre à servir. Donc, pour vous montrer comment tout cela s'intègre, si vous le saisissez, vous pouvez cliquer avec le bouton droit de la souris et regrouper une sélection ou appuyer sur la commande G pour les réunir. Et lorsque cela se produit, vous pouvez le redimensionner pour voir ce qu'il advient des couches qu'il contient. faisant, vous pouvez voir que tout ce qui se trouve à l'intérieur d'échelles aussi larges que le groupe lui-même est réduit pour correspondre. Et c'est un peu plus difficile à voir avec les couches de textes. Mais si je clique dessus, vous pouvez voir qu'il se redimensionne également en cliquant sur le groupe et en le faisant. Vous pouvez voir qu'il a pris la même taille. Il faut donc savoir que vous ne verrez pas encore certains des outils que vous obtiendrez avec un cadre. Et si vous voulez que cela conserve sa taille, ce n'est plus possible avec les groupes, surtout si vous êtes allé lire l'article que j'ai écrit sur les groupes par rapport aux cadres. Vous ne pouvez donc pas réellement modifier les contraintes. Vous ne pouvez pas le modifier, que vous souhaitiez le redimensionner ou non. Tout ce que vous pouvez faire c'est créer un groupe lorsque vous regroupez des éléments et vous obtenez le comportement par défaut des groupes qui fonctionnent et s'intègrent. C'est un peu plus familier. C'est probablement beaucoup plus sur ce à quoi de nombreuses personnes seront habituées, à l' exception du texte. Cela ressemble donc beaucoup plus à l'outil de mise à l'échelle. Vous appuyez sur une touche pour effectuer la mise à l'échelle. N'oubliez pas que c'est en haut à gauche, et je le redimensionne. C'est peut-être un peu plus familier. Cela commence à vous montrer certaines des petites différences entre Figma et à ce que vous pourriez avoir un aperçu lorsque nous passerons aux cadres. Comme vous pouvez le voir lorsque je suis revenu à l'outil pointeur. Et si je le redimensionne, tout s'écroule. s'agit simplement de la taille de la couche elle-même, mais les couches de texte se comportent un peu différemment. Donc, lorsque vous utilisez un groupe, ceux-ci, c'est une chose à laquelle il faut être attentif. Ainsi, lorsque vous regroupez des éléments, ils vont prendre de l'ampleur. Donc, si vous devez redimensionner des éléments, cela ne fonctionnera pas comme vous le souhaitez. Je vais donc en rester là pour le moment lorsqu'il s'agit d'expliquer les groupes, comment procéder et comment ils s'intègrent. Lorsque je couvre les cadres, vous pouvez voir exactement où la différence commence à se faire sentir et que cela fait vraiment une grande différence dans la façon dont vous assemblez votre fichier et dans la façon dont vous assemblez vos prototypes et vos designs. 13. Cadres 1 de 2: Donc, où les groupes étaient assez simples et faciles à comprendre. J'espère que c'était bon pour toi. Plongeons-nous dans les cadres. Il y a beaucoup de choses à couvrir. Alors allons-y. Donc, ce que je vais faire, c' est copier ces trois choses. Je vais en faire une copie. Vous pouvez donc y voir que j'ai maintenu la touche Option ou Alt enfoncée et que j'ai fait glisser une copie de l'original. C'est pourquoi je peux le faire pour ramener les choses à une échelle approximative avec laquelle je peux travailler. Je vais simplement réduire celui-ci également, ou modifier le texte. En fait, je le fais et je le redonne à ce qu'il était, 16 ans. C'est plutôt 24, quelque chose comme ça. Donc, si je les copie toutes, elles ne sont plus regroupées. Je peux encadrer cette sélection qui est différente, le raccourci étant l'option de commande G. Et maintenant j'ai un cadre. Et au début, rien ne semble différent, mais si vous commencez à le redimensionner, vous verrez que les choses ne changent pas de position et qu'elles ne semblent pas changer de taille. Si vous partez de la gauche, il semble rester sur la gauche. Et il en va de même pour le haut. Et ce n'est qu' en approfondissant ces éléments ici que vous pourrez voir les différences. Nous allons simplement le retirer. Et si je sélectionne la couche d'image, par exemple, vous verrez dans le panneau de conception qu'il y a ce qu'on appelle des contraintes à gauche et en haut des éléments par défaut. Et c'est ainsi que les choses se comportent sur le Web. Donc, si vous n'êtes pas habitué à concevoir des objets pour le Web, vous remarquerez les comportements que vous souhaitez voir. Pour les produits numériques, ce que vous verrez sur le Web et les applications mobiles. Ils se comporteront beaucoup plus en fonction de contraintes par rapport à un groupe plus traditionnel que vous pourriez trouver dans des éléments tels Google Slides ou des fichiers de présentation PowerPoint. Ils sont assez puissants car vous pouvez faire des choses comme si je sélectionnais ce cercle, par exemple en le plaçant au centre et en donnant à ce cadre une couleur de fond. Nous allons donc utiliser le remplissage. Et sélectionnons un type de couleur vert clair, se trouve à peu près au centre. Maintenant, lorsque je redimensionne, la largeur suit désormais le milieu. J'espère que ce que vous pouvez voir c'est que votre cerveau commence à penser et à voir. Il y a différentes choses que nous pouvons réaliser avec des cadres. Il y a quelque chose de différent ici. Et ce que vous remarquerez, c'est qu'en utilisant ces contraintes, nous pouvons en fait le rendre assez puissant. Donc, si nous le faisons à gauche et à droite, nous pouvons imiter le comportement ou utiliser l'échelle pour le reproduire plus précisément. Un groupe le fait. Donc, si je règle la largeur à l'échelle, nous pouvons le faire. Mais avec le cadre, c'est génial parce qu' il est encore plus puissant qu'au fur et à mesure que je le fais, il reste le même. Ou ce que je peux faire, c'est simplement le centrer lorsque je redimensionne ce cadre, puis le rester au centre, entre guillemets, de ce cadre. L'une des premières choses que vous voudrez probablement savoir et apprendre à faire est de savoir comment créer le comportement de défilement des prototypes. Nous aborderons les prototypes en profondeur plus tard. Mais ce qu'il est vraiment important de travailler, c'est le comportement de défilement. Donc, si je les prends tous et les place à nouveau vers la gauche et en haut, que je les place à nouveau vers la gauche et en haut, je peux changer la hauteur et il y a ce qu' on appelle le contenu des clips. Et ce que vous remarquerez, c'est que les choses peuvent se trouver à l'intérieur d'un cadre ou à l'intérieur d'un cadre. Tu peux couper ce qui s'y trouve. Cela peut donc aider à modifier les éléments qui doivent être visibles, ceux qui doivent être modifiables ? L'une des choses intéressantes que vous pouvez faire dans Figma est le défilement par débordement. Donc, quand je fais du défilement vertical , c'est probablement la chose la plus courante que vous voudrez faire. Maintenant, quand je l'ai intégré dans un prototype. Faisons-le donc juste pour démontrer le comportement. Maintenant, vous pouvez voir, en faisant défiler la page, c'est presque comme une page Web. Maintenant, à l'aide de ces éléments de base d'un cadre, manière dont ils s'assemblent en fonction des contraintes, vous pouvez choisir la manière dont les éléments s'affichent réellement ensemble. Vous pouvez également utiliser ce comportement de débordement pour dicter la manière dont les choses doivent se dérouler et comment votre page doit fonctionner. Cela va donc vraiment être très utile. Et l'une des pièces maîtresses de votre boîte à outils. Et en utilisant Figma. 14. Cadres 2 de 2: Donc, la dernière chose que j' aimerais faire pour terminer cette leçon est de vous donner un autre exemple de la puissance des cadres. Faisons par exemple une superposition. Donc, lorsque nous entrons dans ce cadre, souvenez-vous que vous devez faire défiler l'écran vers le bas pour accéder au cercle bleu. Transformons-en un bouton. Et ce que nous allons faire, c'est simplement créer une superposition très simple, si vous le souhaitez. Donc, ce que je vais faire, c'est regrouper ça, mettre en rouge, changer les lignes. Donc, une bonne chose que je vais vous mentionner ici est de garder un œil sur la structure de vos couches. Cela vous sera vraiment utile pour aller avant si vous vous perdez ou si vous n'êtes pas sûr. Qu'est-ce qu'un cadre une fois un groupe ? Vous pouvez donc garder un œil sur les différentes icônes présentes ici. Il s'agit donc d'un groupe, par exemple avec la ligne pointillée. Et le cadre ressemble plus à du hachage. Ici, on était passé à x, puis à superposer, à superposer. Et faisons une simple ligne ici et ici. Rendons-les un peu plus ternes. Et puis, ne vous inquiétez pas, nous reviendrons sur ce genre de choses un peu plus tard. Dans l'un des derniers modules, supprimez-en simplement à des fins de démonstration. Donc, si nous le faisons, nous pouvons très rapidement créer vous-même une superposition, un peu de rembourrage. Allons-y. Et puis donnez un peu de couleur à quelque chose. Peut-être pas de cette couleur. Oui, allez-y, allons-y et donnons-lui un rayon de bordure. Nous avons donc ici notre superposition de base, et voici un cadre. Et cela n'est possible que parce qu'il est configuré comme un cadre. Ainsi, lorsque nous accédons à l'onglet Prototype, vous pouvez réellement créer une nouvelle interaction. Et lorsque vous cliquez dessus, une superposition s'ouvre. Et nous pouvons sélectionner le cadre de superposition. Et lorsque nous le faisons, nous pouvons ajouter un arrière-plan. Nous avons donc un arrière-plan terne en arrière-plan. Et maintenant, lorsque vous ouvrez ce prototype, nous pouvons le faire défiler comme nous l'avons démontré précédemment. Et si vous cliquez sur le bouton bleu, vous pouvez alors voir votre superposition. Ce n'est qu'une des nombreuses choses puissantes que vous pouvez faire avec les cadres. Et ce que je voulais vraiment partager avec vous afin de vous aider à comprendre quelle est la différence entre un groupe, c'est le cadre et pourquoi avons-nous réellement ces deux choses différentes ? 15. Devrais-je utiliser des groupes ou des cadres: Cool. Maintenant que je vous ai expliqué ce que sont les groupes, ce que sont les cadres, le genre de choses que vous pouvez réaliser avec les deux, j'espère que vous commencerez à comprendre quelles choses vous devriez utiliser le plus souvent et à quel moment. On se pose toujours la question suivante : lequel est le meilleur ou quand dois-je utiliser l'un ou l'autre ? Contrairement à une règle empirique rapide, utilisez toujours par défaut un cadre. Et il y a plusieurs raisons à cela. Ainsi, même si les groupes ont leur place et se comportent beaucoup plus comme le font les images lorsque vous redimensionnez des éléments vers le haut ou vers le bas, en particulier lorsque vous travaillez avec des fichiers de présentation, il s' font les images lorsque vous redimensionnez des éléments vers le haut ou vers le bas, en particulier lorsque vous travaillez avec des fichiers de présentation, peut-être d'un comportement auquel vous êtes plus habitué Vous pouvez néanmoins le reproduire avec un cadre en appliquant un comportement d'échelle aux objets qu' reproduire avec un cadre en appliquant il contient. Et B, les couches de texte ne se comportent tout simplement pas de la même manière. Vous pouvez également utiliser l'outil de mise à l'échelle place et modifier la taille des objets. Ce sont donc les principales raisons pour lesquelles vous utiliseriez réellement un cadre plutôt qu'un groupe. Et ils ont quelques cas d'utilisation. Mais si vous consultez l' article que j'ai partagé précédemment n' plus la possibilité d'utiliser des contraintes dans des groupes. C'est donc quelque chose qui était le cas et maintenant c'est fini. Donc, à mon avis, c'est un peu plus une question d'héritage. Et je pense que c'est l'un des autres principaux pièges, car ce n'est pas un avantage majeur lorsqu'un autre designer ou une autre personne travaille sur votre fichier Figma, si je veux allonger un cadre. Par exemple, je peux avoir un écran iOS ou un écran d'application mobile sur lequel je travaille. Et je veux ajouter une section supplémentaire. Si nous l'allongons pour tous les groupes qui se trouvent à l'intérieur, cela allongera l'objet. Je vais donc vous en faire une démonstration rapide maintenant, juste pour vous dire bonjour. Voici donc un exemple d'écran mobile. En fait, allons-y. Remplissons-le rapidement. Juste pour que ça ressemble un peu plus à une page. Ce que j'ai vu, c'est que vous avez ici une barre de navigation, ce groupe de choses. Et pourquoi nous l'appelons simplement le filtre. Je veux, j'ai déjà vu, que ce n'est pas la valeur par défaut en fait. Ce n'est donc peut-être pas un problème pour vous. Mais lorsque les concepteurs travaillent sur un fichier volumineux et qu' ils travaillent ensemble pour résoudre des problèmes importants, les contraintes sont parfois définies sur une échelle par défaut. Pour un groupe de choses, il s'agit généralement d'icônes ou de groupes de deux éléments différents réunis. Ce que vous verrez, c'est que si j'ai besoin d'allonger l'écran, ce genre de chose se produit. Et c'est vraiment frustrant. Lorsque vous utilisez un pied de page. Il doit absolument toujours être en bas. Ne vous inquiétez donc pas, nous aborderons ce type de contraintes plus tard. Mais vous verrez ce genre de comportement et ce n'est pas ce que nous voulons. Ce que nous voulons, c'est simplement créer un espace supplémentaire dans lequel nous pouvons travailler lorsque nous travaillons sur un design. Cela résume assez bien mon point de vue sur le fait d'utiliser un groupe, un cadre, histoire longue, une courte, des cadres, c'est mieux. 16. Sections pour les fichiers organisés: Cool. Donc, le dernier, il ne reste plus longtemps, c'est l'outil de section, ici, avec le cadre. Vous avez également cette chose appelée section. Il s'agit d'une fonctionnalité relativement nouvelle ou Figma, qui a été fortement recommandée. J'ai donc parcouru ces différentes leçons et partagé avec vous comment les choses s'imbriquent. Il peut être très facile de s'y perdre. Et ce que vous pourriez être tenté de faire, c'est de regrouper certaines choses dans un cadre. Mais lorsque vous faites cela, vous pouvez perdre l'intégrité des interactions ou la façon dont vous configurez certaines choses. Et les sections ont des comportements et des propriétés légèrement différents . Bref, tout ce que vous devez savoir, c'est qu'il s'agit d'une méthode plus sûre de regrouper un ensemble de couches, de cadres et d' éléments sur lesquels tout ce que vous devez savoir, c'est qu'il s'agit d'une méthode plus sûre de regrouper un ensemble de couches, de cadres et vous travaillez afin de permettre à quelqu'un de consulter votre fichier plus facilement. Ainsi, par exemple, si je clique sur l'outil de sélection ou sur Shift S pour le raccourci, je peux le faire. Je peux donner un nom à cette section. C'est donc un premier ensemble de choses. Et si je crée une nouvelle section, cela peut être mes cadres. Cadres, outils de sélection de cadres. Et ce que je peux faire, c'est bouger. Oups. Il n'a pas tout à fait bien passé ces choses en revue. Ce que je peux faire, c'est couper ces éléments à l'aide de la commande couper et les coller à l'intérieur. Je peux le faire et ensuite déplacer toutes mes affaires facilement. Et c'est plutôt bien parce que je travaille ici sur les formes et les lignes. Et vous pouvez modifier la couleur de votre section. Disons que je veux opter pour une couleur rouge clair parce que c'est quelque chose dont je dois me débarrasser et que je peux changer l'étiquette. C'est vraiment très utile lorsque vous souhaitez organiser votre travail et faire comprendre à quelqu'un à quel point ces choses s'imbriquent. L'un des super pouvoirs que vous découvrirez sections est que vous pouvez les imbriquer les unes dans les autres, mais elles sont vraiment de haut niveau. Alors expliquez ce que je veux dire par là. Nous prenons donc celui-ci, cette sélection de cadres et de sections. Ce que je peux faire, c'est sélectionner cela et déplacer les formes et les lignes dans cette section. Et maintenant, tout cela est mobile ensemble. C'est donc très pratique. Mais l'une des différences entre les sections est que vous ne pouvez pas les faire glisser dans des cadres. Disons que je crée un cadre de cette taille. Et je veux faire glisser cette section ou en faire glisser une copie. Je peux le déplacer ici, dans cette zone. Mais comme vous pouvez le voir, il l' a ajouté dans ce cadre. L'un des problèmes liés à la configuration préalable des cadres et à leur utilisation pour organiser visuellement votre travail est donc le même, mais comme un cadre peut se trouver dans n'importe quel autre cadre, cela devient rapidement très compliqué, vous pourriez accidentellement regrouper éléments ou ajouter des éléments dans un cadre et dans le mauvais sens. Les sections ont donc deux fonctions. Ils vous permettent d'organiser votre travail et de le rendre clair. Mais faites-le d'une manière qui ne vous permettra pas, ni à vous-même ni aux autres concepteurs, de parcourir ou de modifier votre fichier afin d'organiser les éléments de manière perdre l'intégrité de la structure des éléments sur lesquels vous travaillez et de leur assemblage. 17. Point de contrôle 3 : Mise en page automatique, mon héros: Salut, ta chemise, nouvel éclairage, le même contenu de qualité. Dans cette leçon, nous allons donc parler de la mise en page automatique. Je vais vous montrer comment tous ces différents outils et techniques que vous pouvez utiliser dans le cadre de la mise en page automatique peuvent vraiment vous faciliter la vie. Et cela peut vraiment vous aider au quotidien dans Figma et dans la création de designs. C'est encore plus un plaisir. Je vais maintenant vous donner un aperçu rapide de ce que nous allons être mesure de développer une fois que nous aurons fini de vous enseigner ces compétences. Ici, à Figma, nous avons un exemple trivial de site Web de vente de micro-ondes. Et quand je fais défiler la page vers le bas, cela semble assez typique. Juste quelques images de fond avec du texte, un appel à l'action. Et ce truc à propos de la collection Bright, quand on veut, on veut l'appeler. Et si je fais un petit zoom arrière, fur et à mesure que je l'agrandis et que je le rétrécis, vous pouvez voir comment tout réagit à la taille. Et c'est quelque chose que nous allons explorer ensemble. Cela semble intimidant, ne vous inquiétez pas. Nous allons le parcourir étape par étape et vous serez étonné de la rapidité avec laquelle vous pouvez vous-même quelque chose comme ça. En quelques minutes, moins d' une heure, c'est sûr. Allons-y. 18. Redimensionnement horizontal/vertical et les bases de l'espacement: Nous allons donc d'abord aborder disposition automatique horizontale et verticale et vous donner une petite idée de la façon dont ces éléments fonctionnent ensemble. Donc, ce que j'aime commencer, ce sont ces barres de navigation et les futurs composants. Et je vais vous montrer comment ils s'assemblent. Tout d'abord, prenons la barre de navigation supérieure. Prends-en une copie, et laisse-moi d'abord la détruire. Donc, si je dissocie et que vous pouvez le voir, c'est un peu difficile à voir. pouvez même le remplacer temporairement par une couleur noire. Nous pouvons voir ici que nous avons un logo, puis nous avons un cadre avec ces différentes choses. Donc, mais en le dissociant, vous commencerez probablement par quelque chose comme ça. Prenez un groupe d'objets et vous obtiendrez quelque chose d'autre que vous voudrez peut-être mettre de côté. Il les mettra en valeur, puis je l'ai transformé en cadre. donc l'option de commande G. Vous pouvez ensuite tout ajouter à la mise en Voici donc l'option de commande G. Vous pouvez ensuite tout ajouter à la mise en page. La première est la mise en page ultime. Vous pouvez simplement cliquer ici ou sur le raccourci. J'aime utiliser ce shift a, qui applique automatiquement la mise en page automatique. Vous pouvez voir ici qu'il définira un rembourrage horizontal, selon ce qui est le plus proche, et les répartira uniformément. Vous pouvez l'ajuster vous-même à votre guise. Et cela définit la valeur par défaut ou l'horizontale. Si, par exemple, j' prends trois copies et que je les fais à peu près à la verticale et que je fasse la même chose. Vous n'avez pas besoin de grouper au début, vous pouvez simplement appuyer sur Shift a et cela vous permettra de tout ajouter à la mise en page. Figma déterminera que tout doit être empilé verticalement et déterminer l'espacement approximatif qui doit s' tout ajouter à la mise en page. Figma déterminera que tout doit être empilé verticalement et déterminer y trouver. À partir de là, transformons celui d'origine et commençons à l'imbriquer. C'est donc vraiment très important. Nous avons donc abordé les cadres imbriqués ce qui est très important pour que ces choses se concrétisent. Voici donc ce cadre sur la gauche. Voici donc les éléments de mon menu. Oups. C'est cool. Ces éléments de menu. Et c'est celui-ci. C'est du blanc Jacquard car j' utilise une instance d'un composant. Regroupez-les ensuite et appuyez à nouveau sur Shift a. Vous verrez que j'ai ajouté la mise en page automatique. Et c'est fait automatiquement. Ceci. Une chose que vous voudrez faire pour obtenir l'effet réel de la barre de navigation est ignorer l'espacement entre les deux. Et remplissons-le juste pour qu'il soit plus facile à voir. Faisons quelque chose comme ça pour pouvoir le différencier. Et la première chose que vous découvrirez très rapidement , c'est l'espacement. Donc on va, on va, on va le faire. Et ce 12 décembre. Donc, cela définit la gauche et la droite et la mauvaise chose que vous remarquerez , c'est que lorsque je le fais , il ne répond pas. Nous aimerions qu'il modifie le mode d'espacement. Donc, si je l'annule et que je passe ici aux trois points, il y a ce qu' on appelle compressé, et l'espace entre les valeurs par défaut est compressé et vous pouvez définir l'espacement qui doit y avoir entre chacun des éléments de ce cadre en particulier. Mais si je fais de l'espace entre ces deux objets dans ce cadre, entre ces deux objets dans ce cadre, fur et à mesure qu'ils grandissent et rétrécissent, il restera toujours sur la droite. Donc, si j'ajoute juste pour que cela paraisse un peu plus naturel et normal, révèle la structure de ce qu'il y a dedans. Pour créer suffisamment de bar. Les éléments de menu eux-mêmes sont imbriqués à l'intérieur avec leur propre disposition horizontale. Nous avons le logo sur la droite. Alors. Cette barre de navigation principale possède sa propre disposition automatique, mais nous avons modifié l' espacement et l'avons remplie. Et ce que nous avons fait, c'est ajuster le mode d'espacement afin d'obtenir cette réactivité. C'est donc un exemple très simple que vous pouvez utiliser. Et parcourez-le étape par étape pour commencer à explorer le fonctionnement de l' horizontale. La verticale fonctionne, ainsi que certaines choses comme l'espacement, que nous aborderons un peu plus en détail dans l'une des prochaines leçons. La seule dernière chose à ajouter est que pour les dispositions verticales, c'est à peu près la même chose, mais les choses vont simplement dans une direction différente. Vous pouvez donc voir ici, si je passe la souris sur l'espacement, espacement vertical entre les éléments lorsqu'on passe de l' horizontale à la verticale. En regardant la photo, vous pouvez voir que chacun de ces éléments, façon dont ces vaccins s'espacent entre eux. 19. Alignement et ordre d'article avec la disposition automatique: Dans cette leçon, nous allons aborder l'alignement des articles et nous allons aborder l'ordre des articles. Parce qu'une chose que vous constaterez, c'est que vous avez parfois envie de réorganiser l'ordre des choses ou que cela se passe dans le mauvais ordre et que vous devrez peut-être ajuster les choses. Très courant, mais très facile. Je vais te montrer. Voici donc les deux exemples sur lesquels je vais travailler : le pied de page et l'un des principaux éléments de l'image de fond et du texte. Prenons donc cet exemple nous inspirer de ce que nous avons appris de la première leçon, comme c'est le cas ici. Pour ce faire, il faut effectuer un alignement vertical de tous ces différents éléments. Et puis ce que j'ai fait, c'est juste changer l'alignement et vous avez une très belle grille. Il est donc si simple de modifier la façon dont vous souhaitez que les choses soient organisées. Je pourrais donc les disposer à gauche, à droite. Si je choisis d'avoir une hauteur fixe, je peux la modifier pour qu'elle soit en haut à gauche, bas à gauche, vers la droite, au point mort. Il y a donc tellement d'options différentes avec lesquelles vous devez jouer. Et il est bon de garder à l'esprit que si vous voulez quelque chose d'un peu plus compliqué, vous devrez imbriquer quelques cadres afin obtenir l'effet souhaité. Pour illustrer certains de ces effets d'imbrication de cadres, je vais utiliser cet exemple ici. Passons donc au réarrangement des choses très rapidement avant de nous y plonger Vous pouvez le faire comme vous l'avez vu sur l'autre pièce, je l'avais et elles étaient dans un ordre alternatif. Il vous suffit de faire glisser votre objet dessus. Et cela fonctionne tant que mise en page est automatique dans le cadre parent. Cet exemple encadre 63, il suffit de cliquer dessus. N'oubliez pas que l'endroit où vous faites glisser cet élément vers votre couche peut faire sortir des éléments du cadre de mise en page automatique et les réintégrer. Parfois aussi facile ou parfois c'est un peu capricieux et vous pouvez commencer à y imbriquer les choses un peu plus profondément. Donc, par exemple, ici, j'ai déplacé l'image dans un cadre différent. Donc, lorsque vous examinez l' imbrication des cadres et que vous ajustez la façon dont les choses se passent, pour illustrer, agrandissons un peu le texte. Vous pouvez donc voir que c'est au centre. Si je modifie l'alignement ici vers le milieu, cela changera ce style et la façon dont il s'intègre. Mais si je le fais, vous pouvez voir qu'en interne, cela se fait différemment. Si je change cela en largeur fixe, ce que nous aborderons dans un instant, ne vous inquiétez pas. Et il suffit de changer la largeur de celui-ci. Je peux modifier la largeur de certains éléments internes comme ceci, par exemple vous pouvez voir ce cadre avec toute la copie. Je peux modifier la façon dont cela s'affiche, que ce soit à gauche ou à droite. C'est pourquoi vous allez commencer à comprendre qu'il peut être assez difficile d'enseigner tout cela étape par étape , car ils s' assemblent très rapidement pour obtenir des composants réactifs et une conception réactive. Au sein de Figma. 20. Modes de redimensionnement de câblage, de remplissage et de correction: Ensuite, nous allons examiner les modes de redimensionnement horizontal et vertical. Il en va de même pour tous ces exemples utilisant l'horizontale, mais les mêmes règles s'appliquent à la verticale. Je fais de l'horizontal parce que c'est probablement ce à quoi vous serez confronté le plus souvent fur et à mesure que vous commencerez à apprendre comment tout cela s'intègre. En utilisant cette section qui rassemble la collection Bright, comme je l'ai appelée. Prenons une copie de toutes ces images et appliquons la mise en page automatique. Et souvenez-vous que le raccourci pour cela est Shift a. Et lorsque je fais cela, il définit par défaut l'espacement. Changeons donc cela à 40. C'est donc un peu plus facile à voir à l'écran. Et nous pouvons constater que le mode d'espacement par défaut pour l' horizontale et la verticale n' est pas vraiment parfait. Cela signifie que si je copie et colle une autre image, elle sera ajoutée dans ce cadre parent. Voici donc le cadre 63. Regardons donc l' horizontale par défaut jusqu'au redimensionnement. Modes de redimensionnement. Vous pouvez voir qu'au fur et à mesure que j'y ajoute des objets, cela va juste allonger la longueur de cet objet. Ce que nous devrions donc commencer à explorer, c'est comment fonctionnent les comportements fixes et les comportements de remplissage. Il faut en prendre une copie et la renommer par défaut. Jetons un coup d'œil à Fixed. Donc, si je le change en fixe, cela signifie que la mise en page du cadre parent fixe existe toujours, mais la taille de ce cadre restera la même. Si je supprime ce truc et que nous avons un élément de moins ou même deux éléments de moins. Vous pouvez voir que la taille de ce cadre lui-même conserve toujours la taille d'origine. Et c'est très important lors votre mise en page. Parce que si, par exemple, je mets dans un cadre comme celui-ci et que je change l'arrière-plan. Changeons cela en une couleur légèrement différente. Faisons-en une plus sombre. Vous pouvez voir que c'est corrigé comme ça. Et si j'ajoute mise en page automatique et que j'essaie de la déplacer au centre, tous les éléments, il n'y en a que trois. Il va donc les placer davantage sur le côté gauche de ce cadre. Et ce n'est peut-être pas ce que vous voulez atteindre. Si je change cela en câlin, vous pouvez voir que cela se centre automatiquement. Et une chose que je peux faire ici est de simplement redimensionner ce cadre ici. Si tu as remarqué et que tu as gardé un œil attentif. Il est passé de l' étreinte par défaut, quelle que soit la taille du contenu, à une correction. Et maintenant, lorsque j'ai mélangé l'alignement dans ce nouveau cadre 63, cadre parent, et dans ce cadre fixe avec les trois images, nous avons maintenant le comportement d'étreinte. Le dernier comportement que je souhaite partager avec vous est le remplissage du conteneur. Et il est important de se rappeler que le récipient de remplissage ne fonctionne que sur un récipient à l'intérieur d'un autre. Vous pouvez donc voir ici que j'ai cette paire fixe dans le cadre. Appelons ça. Comment s'appelait-il ? Démo de remplissage du conteneur. Et renommez ce cadre apparent. Si je change celui-ci pour le remplir, vous pouvez voir qu'il occupe maintenant l'espace du cadre parent, ce qui l'agrandit. Vous pouvez voir que l'espacement à gauche et à droite est le même. Et je vais le réduire. L'espacement correspond également à cette taille et à cet espacement. Ils sont donc vraiment bons à mélanger. Et lorsque vous commencez à jouer avec eux, si vous avez votre annonce, si j'en ajoute une autre, par exemple, vous pouvez voir ce remplissage, mais il déborde ici parce qu'il ne correspond pas au contenu. C'est donc probablement la dernière chose vous fasse vraiment prendre conscience de ce contenu ici. Le cadre lui-même, la démonstration du conteneur de remplissage. Nous occuperons l'espace central exact avec un espacement égal à gauche et à droite. Mais le contenu à l'intérieur peut déborder au fur et à mesure que j'y ajoute d'autres éléments. Donc, selon ce que vous voulez, si je change cela pour un câlin à nouveau, alors c'est plus réactif , cela prend la place et l'enveloppe uniformément et joliment. J'espère donc que ce didacticiel vous a été très utile en tant que didacticiel très petit mais rapide pour vous montrer comment fonctionnent les comportements de redimensionnement des conteneurs dans les cas de câlin, de correction et de remplissage. 21. Modes d'espacement et d'espacement de la mise en page automatique: Dans cette partie, nous allons examiner l'espacement et les modes d'espacement. Et la meilleure façon pour moi d'expliquer cela à l'aide d'un exemple concret est d'utiliser un bouton ou un appel à l'action, ainsi que d'utiliser cet exemple, que j'ai utilisé pour expliquer les modes de redimensionnement. Donc, pour expliquer comment cela fonctionne, reconstruire l'appel à l'action est probablement le moyen le plus rapide. Donc, si je maintiens la touche Alt ou Option enfoncée pendant que je fais glisser la couche, cela signifie que je prends un café et que je vais simplement changer la couleur pour que nous puissions voir que cette prise est changer la couleur pour que nous puissions voir que cette prise l' une des choses rapides que vous pouvez faire si vous voulez créer un bouton ou créer quelque chose comme je l'ai fait avec l' appel à l'action ici. Appuyez simplement sur Shift a créer la mise en page. Et ce que cela fait s' il n'y a qu'un seul élément, il définit par défaut l' espacement entre les éléments à dix, ainsi que le rembourrage horizontal et le rembourrage vertical. Donc, en ce qui concerne l'espacement, je veux dire par là le rembourrage qui se trouve en haut, en bas, à gauche et à droite des éléments de votre groupe de mise en page automatique. Donc, si je définis une couleur de remplissage rapide, créons celle-ci. Passons au violet. Je trouve le violet, plutôt sympa. Maintenant, je peux à nouveau changer la couleur du texte et le rendre un peu plus facile à voir. Alors allons-y, cela ne semble pas fonctionner. Je vais donc changer ça comme ça. Nous y voilà. Je le sélectionne à nouveau, j'ajoute un rayon de bordure juste pour le rendre plus boutonné. Et ce que vous pouvez voir, c'est que ça a l'air bien en soi. Mais lorsque vous jouez avec ces valeurs, vous pouvez les utiliser pour modifier l'espacement autour de vos objets. Cela peut donc être utile en fonction de la façon dont vous souhaitez que vos éléments circulent automatiquement en utilisant la mise en page automatique ou de la manière dont vous souhaitez qu'ils soient affichés. Si vous lancez un appel à l'action comme celui-ci, créez quelque chose qui ressemble davantage à un bouton. Vous pouvez également cliquer sur ce bouton ici pour définir un rembourrage individuel. Disons que pour une raison ou une autre, je voulais ajouter environ 50 espacements ci-dessous parce que je pensais juste que ce serait une bonne chose. Et là, si vous vous en souvenez, nous avons l'alignement. Donc, si je l'aligne au centre et aux objets qu' il contient, cela ne l' affectera pas. Il se peut donc qu'il ne se comporte pas comme vous le souhaitez. Je l'ai donc fait accidentellement, mais je pense que c'est en fait une très bonne leçon. Où se trouve le rembourrage en bas qui va dicter sa destination ? Donc, si je change ensuite ce chiffre à dix, puis que je change la hauteur de cet objet, vous pouvez voir que la hauteur devient fixe et que le rembourrage est toujours là, haut et en bas, alors les objets à l'intérieur passeront entre eux. Voici donc une démonstration rapide pour passer en revue l'espacement. La dernière chose à faire est de passer par ces modes de base. Donc, par habitude, je pense que c'est bien d'ajouter un petit bouton ombré , car cela complète bien le tout. Si nous nous souvenons de cette leçon ou de l'une des leçons, si vous l'avez suivie, voici cette démo de Fill Container, mais tout ne se présente pas bien d'elle-même. Tout ce qu'il fait, c'est qu'il s'aligne sur la gauche. Cela pourrait donc aligner les choses au centre. Vous avez toujours voulu que l'espacement entre eux soit constant. Mais parfois, vous voulez qu'ils remplissent tout ce qui se trouve à l'intérieur de ce cadre. Donc, ce que vous pouvez faire c'est si je montre d'abord comment cela fonctionne, si je le fais en restant au centre. Je sélectionne ceci, je remplis une démo de conteneur. Si je clique sur les trois points, vous accédez alors au mode espacement. Et en utilisant l'espace entre les deux, vous vous assurerez que l'espacement entre les deux est automatiquement modifié et s'affiche automatiquement. Est-ce que je fais ça ? C'est une astuce très simple en un clic. Cela signifie que l' espacement entre les deux est toujours uniforme et cohérent les uns par rapport aux autres. Mais occupe l'espace du récipient qui utilise un récipient de remplissage. Mode de redimensionnement horizontal ou de redimensionnement vertical. Voici donc les exemples concrets que vous pouvez utiliser. Et j'espère vous avoir illustré comment définir l' espacement des objets, comment utiliser le conteneur de remplissage et régler le mode d'espacement sur comment utiliser le conteneur de remplissage autre chose. Et j'espère que vous les utiliserez pour faire encore mieux. Disposez également les choses vous-même. 22. Composants : maîtres et instances: Des trucs géniaux. Nous allons donc passer directement aux composants et aux deux éléments que vous devez connaître, à savoir nos masters et nos instances. Et je vais vous montrer ce que je veux dire à l' aide d'un exemple concret. Donc, pour un petit exemple, commençons par le bouton humble qui utilise t pour créer une couche de texte. Et je vais l'appeler mon bouton. Et si vous vous en souvenez, nous avons nos textiles. Recherchez donc le style du bouton. C'est donc quelque chose que je peux très bien utiliser. Ensuite, nous pouvons simplement ajouter la mise en page automatique et cela nous donnera par défaut des informations très utiles. Donnez-lui un simple rayon de bordure et un fond. Choisissons cette couleur. J'aime ce type de couleur vive. Et permettez-moi de mettre à jour cela. Donc, ce que vous pouvez faire à partir de là, c'est que vous avez maintenant ce bouton. Mais que faire si vous souhaitez l'utiliser plusieurs fois ? Si je veux modifier le contenu ou la couleur, disons, ils mettront à jour la couleur de ce trois bleu à un vert semblable à un vert. Si je dois le faire dans un prototype, il ira partout. Et je vais devoir changer chaque bouton. Ce que vous pouvez faire, c'est si j'annule cela et que je supprime ces deux. En fait, ne le faisons pas, laissez-moi le recopier. Permettez-moi d' en faire un composant. Il y a donc deux manières de procéder. Vous pouvez cliquer avec le bouton droit de la souris et créer un composant, ou j'utilise toujours le raccourci Command Option. Et cela crée ce que l'on appelle un master pour un composant. Et vous pouvez le voir par le petit symbole ici. Je ne pense donc pas que le zoom fasse une différence. Mais vous pouvez toujours regarder sur le côté gauche de votre panneau Calques. Vous pouvez savoir si quelque chose est une instance est un maître ou non. Et comme vous pouvez le voir sur ce surlignage violet , je le copie. Vous remarquerez maintenant qu'il n'a pas de niveau nommé, même s'il a en fait un nom. Et vous pouvez dire que le client est le plus bas, disons le bas. Et si je mets à jour l' étiquette de votre bouton, toutes les modifications se propagent. C'est maintenant l'une des choses les plus puissantes que vous puissiez utiliser en utilisant des composants dans Figma. Et pas seulement cela, il y a tellement d'autres choses que vous pouvez faire. Mais si vous parvenez à maîtriser les bases des masters et des instances avec des composants, vous avez tout ce qu'il faut. Donc, comme autre exemple, juste pour vous donner une idée, je peux personnaliser mon instance ici. Et même si je mets à jour ce bouton, cela ne mettra à jour que les instances où je n'ai pas remplacé les valeurs par défaut. Et vous pouvez le voir à nouveau : si je change la couleur, par exemple je vais changer la couleur en jaune, par exemple , change la couleur de la couleur d'origine , le jaune restera, mais le bouton inférieur deviendra violet. C'est donc un peu comme si le cycle de mise à jour fonctionnait entre un master et une instance. Et vous pouvez toujours dire certaines choses par exemple, parce que violets le contour et le petit symbole sont violets. Vous verrez dans le panneau des couches qu'il s'agit d'un losange vide. La seule autre chose que vous voudrez peut-être savoir, c'est qu'il existe de nombreuses autres choses qui peuvent être partagées lorsque vous configurez vos composants. Ainsi, lorsque vous le configurez, il ne s'agit pas uniquement du remplissage et du contenu du texte. Il y a aussi des choses comme l'opacité. J'ai donc dit que c'était 50 %. Cela se propage en fait à travers ceux comme la bordure ou le trait, je dois dire. La multitude de choses différentes que vous pouvez configurer sur votre composant. Et il s'agit d'une solution assez simple où il ne s'agit que d'une seule couche de texte, mais où vous pouvez ajouter tellement de choses différentes à l'intérieur. Je pourrais donc, par exemple, ajouter deux éléments de texte et le ramener à 100 % d'opacité. Et vous pouvez voir qu' avec deux couches de texte, je peux dire « voici le bouton » et le remplacer par son bus. Et pour que vous puissiez le voir à partir d'un simple exemple de bouton, vous pouvez commencer à construire sur cette base. Je vous encourage à expérimenter et à essayer de faire des allers-retours entre toutes ces mises à jour et à vous assurer que vous êtes à l' aise avec les paramètres que vous pouvez définir à partir de vos masters , les éléments qui se propagent vers votre instance et qui se sauveront d'eux-mêmes. Ne soyez pas affecté par les mises à jour principales. 23. Nidification des composants: Ensuite, nous allons nous appuyer sur cet exemple en imbriquant les composants. Donc ça sonne exactement comme sur la boîte. Vous placez à peu près des composants dans d'autres composants et dans deux autres cadres. Par ici. J'ai fait un peu de préparation à l'avance. Donc ça a créé un petit avatar. Et ils ne font que 50 x 50 pixels, en utilisant simplement l'outil ellipse pour la tête et pour le corps, et en l'écrasant vers le bas. Et j'ai ici deux couches de texte utilisant uniquement le style header six et le style body one. Et nous avons le bus et la leçon précédente. Donc, ce que vous pouvez faire à partir de là c'est que si je prends un exemple, assure de prendre un exemple, alors vous pouvez prendre les autres éléments que vous pourriez souhaiter. Mise en page automatique à cela. N'oubliez pas que le raccourci pour cela est la lettre a. Et nous ajouterons un zéro entre les deux. Et ce que je vais faire, c'est prendre une copie de ce bouton. Je vais simplement modifier le contenu d'une vue. Par exemple , si je modifie, je mets en page ce centre gauche, qui est une bonne chose pour moi, je voulais le réduire. À titre d'exemple. Donnez-lui, disons dix espacements sur tout le pourtour. Juste pour que ça ressemble à une carte. Disons que c'est un six blanc, un six gris. En fait, je préfère le blanc, pour que vous puissiez le voir plus facilement, espérons-le, et le rayon de bordure est normal. Et à partir de là, nous avons maintenant un prototype de base pour un jeu de cartes. Ce que vous pouvez faire, c'est utiliser la touche Command-Option pour le transformer en composant. Ou n'oubliez pas que vous pouvez toujours cliquer avec le bouton droit sur quelque chose. Vous pouvez transformer un cadre en composant. Il suffit de renommer cette ligne en une ligne de carte de profil, disons. Nous avons maintenant un bon master, dans lequel, dans ce composant principal, la rangée de cartes de profil, nous avons deux composants, l'avatar et le composant normal, et ce composant de boutons. Maintenant, si je prends un exemple, si je crée un écran, je peux en prendre quelques copies différentes. Ajoutons la mise en page automatique et appelons cela 20 entre chaque ligne. Et maintenant, si je fais des mises à jour, par exemple si je change les couleurs de sélection du profil en vert. Laissez-moi, il se peut que je doive me renseigner là-dessus, pour une raison ou une autre. Nous y voilà. Vous pouvez maintenant voir que ces modifications se propagent. Vous pouvez donc constater que même en utilisant des composants aussi puissants, qu' en utilisant des composants aussi puissants, en imbriquant vos composants et en comprenant le cycle de mise à jour entre eux, vous pouvez réellement composer ensemble vos conceptions vos mises en page et les éléments que vous souhaitez communiquer très, très rapidement. 24. Variantes et propriétés: La dernière leçon importante que je dois vous apprendre concerne donc les variantes et les composants d'Eve n'étaient pas assez puissants. Les variantes permettent de personnaliser de nombreuses choses et de les rendre globales plutôt que de créer de nombreux ensembles de composants. Prenons donc un exemple dans lequel vous souhaiterez peut-être avoir de nombreux styles de boutons différents. Et dans le passé, vous deviez créer chaque style. Vous devrez donc créer des boutons de couleur par défaut, chaque couleur avec des icônes sans inconvénients de tailles différentes. Et cela ne fait que croître de façon exponentielle. Donc, les variantes qui peuvent réduire cela à un ensemble de composants agréable, très petit et facile à utiliser, avec de nombreuses options configurables. Nous allons donc créer ensemble un exemple pratique pour vous montrer comment cela convient, comment cela s'intègre et peut être réalisé. Ici, dans la facturation Figma, à partir de l'exemple précédent j'ai dupliqué la ligne de la carte de profil et je l'ai renommée. C'est donc pour vous faciliter la tâche lorsque vous configurez la variance. La variance est donc généralement tout ce qui a quelque chose de similaire. Construisons-en un autre maintenant , un peu plus grand, puis ajoutons de l'ombre juste pour le distinguer visuellement de tous les autres. Donc, par exemple, vous voudrez peut-être échanger quelque chose et c'est quelque chose que vous venez d'ajouter ou quelque chose comme ça. Si je maintiens la touche Alt enfoncée ou si vous pouvez cliquer avec le bouton droit sur Copier et coller comme d'habitude. Et ce que nous devons faire, c'est détacher cette instance parce que nous voulons la transformer d'instance en instance principale. Et renommons cela surligné. Et nous pouvons faire quelque chose de simple. Augmentons simplement la hauteur ou l'effet par défaut, qui est une ombre. Et la touche Command Option ou le clic droit de la souris permettent de passer au composant, et voilà. Donc, ce que nous voulons faire à partir de là c'est que si vous sélectionnez plusieurs composants, vous verrez ici, sur la droite, qu'il y a ce que l'on appelle la combinaison en tant que variance. Ainsi, quand je fais cela, vous pouvez voir ce qui se fait automatiquement. Figma reconnaît donc désormais qu'il s'agit d'un élément unique, mais possède de nombreux styles différents. Vous pouvez donc voir ici que nous avons ouvert cette fenêtre avec les propriétés et que je me suis permis de renommer ce style. Et nous pouvons voir qu'il existe plusieurs styles différents. Vous avez toujours une valeur par défaut surlignée. C'est donc très pratique pour inspecter ce qui est différent là-dedans. Et tu peux faire toutes sortes de choses vraiment cool. Je vais vous donner un bref aperçu de ce que vous pouvez réellement faire. Maintenant que nous l'avons fait avec cette variante, nous pouvons remplacer n'importe quelle instance existante par l'un de ces éléments surlignés. Vous pouvez maintenant commencer à constater la puissance qui nous permet non seulement imbriquer des composants et de propager les modifications dans les deux sens. Mais nous pouvons en fait ajouter la possibilité de changer les choses rétrospectivement. Et maintenant, ces différents styles. Et tant que nous utilisons une imbrication de cadres et que nous utilisons notre mise en page automatique, de nombreuses choses peuvent se réunir très rapidement. Pour vous donner une introduction et un résumé des autres choses que vous pouvez faire allez porter sur les styles de propriété. Je vais donc vous donner un bref aperçu de tout cela. La variante est celle que vous définissez par défaut. C'est donc généralement bon pour les états et les styles. Le booléen est utile si vous voulez cacher quelque chose. D'habitude, j'aime utiliser un point d'interrogation. Donc, par exemple, le titre. Nous pouvons donc dire que ShowTitle est un titre élevé. Ce que je peux faire, c'est entrer dans cette couche. Et ce que je dois faire, c'est utiliser ce truc où je peux appliquer une propriété booléenne. Et donc par défaut, c'est vrai si je les connecte tous. C'est donc là qu'il probablement bon de noter qu'il est bon de poser votre composant et de simplement travailler avec deux ou peut-être trois avant de tous les connecter. Maintenant, sur ceux-ci, j' ai maintenant ce petit bouton qui permet d'activer et de désactiver le titre. Donc, il y a d'autres choses que vous pouvez faire Il y a aussi l'échange d'instances et les textes, par exemple Je peux simplement entrer ici. Et pour le contenu, nous pouvons le rechercher. Donc type de texte des textes. Maintenant, pour chacun d'entre eux, je devrais être en mesure de le faire, parce que je n'ai regardé que celui-ci, je peux le remplacer par leur titre. Et cela se met à jour automatiquement. Et la dernière chose est l'échange d'instances. Cela signifie que vous pouvez passer d' un composant à l'autre. Donc, voici ce que je vais faire, c'est lier ce composant en tant qu' échange d'instance et en tant que bouton. Et ce que je vais demander aux gens de faire, ce les échanges préférés que j' aimerais que vous fassiez. En termes de fabrication, le système de conception sera le suivant. Maintenant, vous pouvez voir que je peux passer du bouton au lien. 25. Conseils pour modéliser les composants: Donc, en m'appuyant sur ces variantes et propriétés, voici ces variantes et propriétés, quelques conseils rapides que je souhaite vous donner , juste pour vous faciliter la vie , plus tard, lorsque vous découvrirez comment modéliser des objets. Je vous encourage donc à vous asseoir et entraîner, à essayer de jouer , à créer certaines choses, commettre des erreurs afin de vous souvenir et de consolider ces connaissances dans votre tête. Mais voici également quelques raccourcis rapides qui peuvent vous aider à accélérer l'apprentissage. OK, donc la première chose concerne le dimensionnement des éléments lorsque vous effectuez un échange d'instance. Cela s'ajoute donc à ce que nous avons vécu précédemment. Vous pouvez voir que la hauteur de ce bouton est de 39 pixels, alors que ce lien est de 19 pixels. Donc, si je change cela à 19 et que je place la couche de texte juste au milieu. Oh, en fait, je dois le faire comme ça. Ne dois-je pas arranger la couche de textes. Ensuite, lorsque vous échangez des instances, c'est généralement un peu plus facile lorsque vous échangez des éléments. Vous pouvez donc voir que si vous pouvez faire correspondre la taille de l'objet, c'est généralement mieux. Les icônes sont donc bonnes, par exemple, échangez ce genre de choses. C'est vraiment bien de faire attention à la façon dont les éléments sont assemblés et à la manière dont les styles sont appliqués à la mise en page automatique et au dimensionnement, etc. La prochaine étape concerne les astuces rapides qui ne sont pas nécessairement booléennes, mais qui permettent d'utiliser les boutons. Alors que je sélectionne ceci, nous pouvons voir que je peux sélectionner le style à l'aide de la liste déroulante, donc c'est bien. En utilisant la propriété variant, vous obtenez le titre, qui est créé par un booléen. Vous avez ici la propriété text et la propriété while de l'instance. Mais ce que vous pouvez aussi faire, c'est que je vais le supprimer pour que nous n'en ayons que deux. Et je vais renommer style en style pour le mettre en valeur. Et ce que vous remarquerez, c'est qu'avec ce diamant, signifie toujours qu' il s'agit d'une propriété de type variante. Mais si je change les styles, les surlignons ou devrais-je dire, de « faux » à « vrai ». Ensuite, Figma peut automatiquement le reconnaître et c'est ce qui est surligné la liste déroulante pour le transformer en bascule. C'est donc très utile. Et il y a d'autres choses que vous pouvez faire : au lieu de faire de fausses choses, vous pouvez aussi dire oui et non. Je ne suis pas sûr que tu le puisses. Vous ne pouvez pas les mélanger , vous pouvez donc utiliser le vrai et le faux, oui et non. Ce sont donc les types que vous pouvez utiliser ici, vrai et faux fonctionneront. Oui et pas de travail. Et ceux-ci les réuniront. Ce ne sont donc que quelques petites choses que j'ai remarquées au fil du temps, construisant moi-même des composants et en essayant de les assembler ensemble. Et cela m'a vraiment aidée à dicter et à trouver la meilleure façon de modéliser et d'exprimer cette chose. qu'il soit plus facile pour mes coéquipiers et pour les autres personnes d'utiliser les éléments que j'ai rassemblés et créés. 26. Point de contrôle : composants réactifs: Incroyable. Nous avons donc presque tout ce dont nous avons besoin pour être vraiment très rapides et très libres , pour pouvoir pour pouvoir exprimer tout ce que nous voulons et assembler différents prototypes aussi rapidement que possible. C'est ce qui m'a vraiment attiré vers l'outil Figma et c'est pourquoi je l'aime toujours autant est ce qui m'a vraiment attiré vers , l'utilise tous les jours. Dans ce module, nous allons donc vraiment parler design réactif et de composants réactifs. Et nous allons l' examiner sous deux angles. Tout d'abord, nous examinerons les méthodes pour rendre les choses réactives dans Figma. La prochaine fois, nous allons parler des personnes auxquelles ils répondent. Donc, lorsque je parle composants réactifs, de Figma et de ce genre de choses, je pense normalement aux designers. Alors, comment puis-je me faciliter la vie de mes coéquipiers afin qu'ils puissent assembler des prototypes très rapidement et ajuster ces maquettes afin que nous puissions livrer au rythme dont nous avons besoin ? Mais il existe également un design réactif. Nous aborderons donc très brièvement la conception réactive. Ce cours n'est pas destiné à vous aider à apprendre les bases de la conception Web réactive, mais nous y reviendrons et expliquerons comment Figma peut vous aider à y parvenir. 27. Méthodes de modélisation réactives: Sur la base de ce que nous avons fait dans l' une des leçons précédentes, je viens de reprendre l'un de nos composants que nous avons construits ensemble. J'en ai également fait un autre, et je ne l'ai pas encore complètement configuré. Mais juste pour illustrer les différences entre les deux méthodes de modélisation des composants en termes de réactivité. Alors d'abord, ce cadre imbriquant une mise en page automatique. Donc, ce que vous remarquez, c'est que lorsque je agrandis et réduis ce composant en particulier, la taille des éléments, le bouton d'affichage reste sur la droite. Vous remarquerez que nous allons corriger ce problème dans un instant, mais le bouton d'affichage se trouve également en haut du texte. C'est donc un peu réactif avec cette version à contraintes. Ce que j'ai fait à la place, c'est que, si vous vous en souvenez, j'ai encadré les couches de texte ensemble, je les ai appliquées également à la mise en page et je l'ai appliquée à toutes pour les mettre en page sur l' ensemble de la carte elle-même. Donc, horizontalement, il se serait finalement toujours appliqué avec le modèle de contraintes. Je viens de tout mettre dedans. Vous avez donc votre avatar, votre titre, le corps du contenu et le bouton. Et ce que vous pouvez faire, c'est modifier les contraintes de ces éléments en fonction de leur place dans leur cadre parent. Et c'est très important également en tant que cadre, car je pense que cela fonctionne un peu différemment avec les groupes, mais nous nous en tiendrons aux cadres parce que les cadres sont bons. Souvenez-vous, maintenant que je l'ai fait, si je l'agrandis et le réduis, il se comporte exactement comme l'autre. On se demanderait donc quelle est la différence entre les deux ? Et d'autres choses que tu peux faire. Vous pouvez donc voir ici que j'ai ce cadre et que le redimensionnement horizontal est réglé sur fond. Mais ce que nous n'avons pas encore fait, c'est définir le redimensionnement horizontal du titre et le corps doit être rempli. Ce que vous remarquerez, c'est que maintenant, lorsque je le réduis, le texte s'enroule automatiquement. Vous pouvez voir que lorsque je rétrécis cette carte, tout se retrouve au centre de cette carte. Et si ça ne me plaît pas, je peux m'adapter à tout. Je peux utiliser l'alignement. N'oubliez pas de modifier la mise en page automatique et de modifier ces paramètres jusqu'à ce que je sois satisfait. Ce que vous remarquerez, c'est que si je fais quelque chose de similaire, je peux le faire et modifier la largeur, la largeur de celles-ci , jusqu'à la fin. Je peux également modifier cette contrainte à gauche et à droite. Je vous encourage donc, comme toujours, à expérimenter et à jouer avec ces paramètres pour voir comment ils s'intègrent tous. Pendant que je fais cela, vous pouvez voir que le texte change maintenant. Ce que vous remarquerez également, c'est que l'arrière-plan n'a pas changé pour l'envelopper. Et c'est là que les différences commencent à apparaître. Où il y a beaucoup de choses que nous allons faire. Des trucs très basiques pour les rendre réactifs. Ils fonctionnent en quelque sorte. Mais si vous voulez que les choses s'enroulent autour des choses et fonctionnent de cette manière, vous avez également besoin d'une mise en page. Cela ne veut pas dire que vous ne pouvez pas mélanger les deux. Bien qu'il s'agisse de deux approches indépendantes, il est très utile d' essayer d' expérimenter et de mélanger ce dont vous avez besoin. Il y a donc un exemple pour celui-ci. Je ne veux peut-être pas que l'avatar soit réellement au centre. Je veux vraiment que ce soit au top. Donc, ce que je peux faire, c'est détacher cela juste pour faciliter les choses, car j'ai besoin de configurer les choses. Et à l'intérieur, vous pouvez voir que toutes ces choses sont configurées à l'échelle. Donc, si je les règle tous vers la gauche et vers le haut, par exemple maintenant, lorsque je change la hauteur, je peux réellement modifier la hauteur à remplir dans le récipient. Cela signifie donc que l' avatar et le texte s' aligneront plus facilement et plus naturellement. Alors que si j'ai essayé de le faire auparavant, vous pouvez voir que cela s'étire comme ça et qu'il ne fait que s'étirer. Hum, je pense que ce sont des exemples assez bons pour que vous puissiez exemples assez bons pour que vous examiner, les disséquer et commencer à jouer Ce que vous allez apprécier et commencer à faire, ce dont vous voulez bénéficier, c'est de jouer avec ces paramètres afin vous faire une idée de la façon dont toutes ces choses s'intègrent. Je pense qu'à partir de là, la seule dernière chose à mentionner concerne la mise en page automatique et le fait de rendre les choses réactives. Essayez de vous en tenir à un axe. N'essayez donc pas de le rendre réactif verticalement, tout comme les vacances, de le rendre réactif horizontalement. Vous verrez que lorsque j'ai rétréci et que j'ai fait cela, je n'ai vraiment travaillé que sur l'axe horizontal. Mais dès que je commence à changer de hauteur ça commence à ne vraiment être beau et à s'effondrer. donc bon de garder cela à l'esprit essayez de vous en tenir à un seul axe et d'expérimenter ces deux styles différents ces deux styles différents pour rendre les composants réactifs. 28. Réactif pour les designers: Donc, lorsqu'il s'agit de concevoir de manière réactive, mais pour les designers, voici exactement ce que je veux dire. Donc, lorsque nous prenons cet exemple, disons que j'utilise certaines de ces rangées de cartes de profil. Et je veux tous les aligner. Alors j'essaie de les aligner comme ça et de les classer. Écrivez simplement ce que je veux ajouter quelque chose de différent au milieu. Disons que j'ai l'un de ces composants. Et je vais zoomer. Et si je veux les mettre ici, je dois les sélectionner, les déplacer vers le bas, puis vérifier l'espacement. Vous l'avez probablement déjà remarqué ou ce que vous avez retenu de l'une des leçons précédentes, j'espère, c'est que si je les sélectionne toutes et que j'utilise la mise en page automatique, cela viendra à la rescousse. Et c'est quelque chose que je peux faire pour me faciliter la vie. Donc, ici, vous pouvez voir si je fais cela et que je modifie tout se trouve à l'intérieur pour remplir le redimensionnement horizontal, puis si je le fais et si je change peut-être la taille de fixe, ce qui est bien. Disons 349 parce que nous travaillons sur un écran 375. Et ici, je peux régler la hauteur des objets. Et ce n'est pas tout, je peux réorganiser les choses si besoin est, sans problème. Je le suis encore, encore plus. Je peux ajouter une autre section et je peux dire que je vais l'ajouter, la mettre à l'écran et la mettre ici. Et si je configure tout correctement, ce que vous remarquerez et ce que vous avez probablement commencé à comprendre, c'est que vous utilisez plusieurs cadres dans des cadres est en fait pas un problème tant que vous les gérez avec soin et chaque image doit avoir un objectif et faire quelque chose. Vous pouvez donc y voir où je viens d'y ajouter également une mise en page. Pas trop, ça a changé, mais maintenant j'ai ces contextes et d'autres contacts. Supposons que vous soyez un critique du design, que vous travailliez de manière professionnelle et que vous ayez certains designers ou parties prenantes. Et ils disent : « En fait, je pense que mon autre contact devrait aller au sommet. Et imaginons un instant que leur contenu soit différent. Je peux simplement me déplacer. Et ce qui est simple, c'est que je peux même en prendre une copie et, je peux même en prendre une copie et disons, le concevoir pour tablette, n'est-ce pas ? Donc, si je le fais, c'est corrigé. Mais ce que j'ai configuré ici pour la barre de navigation, c'est de lui donner l' impression d'être un conteneur. Maintenant, vous pouvez voir automatiquement que cette mise en page ne fonctionne pas très bien. Peut-être devrions-nous les faire côte à côte. Donc, si je les regroupe ensuite, déplace un pour faire une mise en page automatique et les mettre côte à côte. Et restons-en à 30. Vous pouvez voir automatiquement que vous essayez de concevoir. En tant que designer disposer de composants réactifs de cette manière me facilite grandement la vie. Et cela rend les choses si rapides à faire et à mettre à jour. Parce que si tout n'était qu'une couche par-dessus, oui, c'est parfois un peu frustrant d'y aller Voici mon ordinateur central et mon design pour iPad. Et j'ai mon contenu. Je dois entrer dans ce cadre. Et ce cadre, qui est cette colonne, entrez dans ce composant, puis apportez quelques modifications. Mais si vous créez votre fichier Figma et vos designs sous forme de composition, en fait, tous ces éléments contenus ne devraient être que des composants assez faciles à sélectionner et à modifier avec les propriétés que vous avez peut-être configurées ou à remplacer par autre chose. Ensuite, vous pouvez le voir automatiquement en redimensionnant les choses. Si je les change ensuite de fixe à plein, ce que vous comprendrez, cela deviendra un comportement et une mémoire musculaire très courants que vous développez au fil du temps. Maintenant, je peux l'ajuster et je peux commencer à jouer avec toutes les différentes mises en page et autres éléments et commencer à voir comment vous pourriez vous comporter dans la réalité avec mon design . C'est donc quelque chose que je suggère vivement et qui vous donne impression d'essayer de concevoir, tout en rendant les choses réactives pour vous en tant que designer. Et il est très important de prendre soin soi et de se simplifier la vie. 29. Conception web réactive: Nous aborderons donc très brièvement la conception de sites Web réactifs. Et je le fais intentionnellement parce que, encore une fois, c'est juste pour vous permettre de vous familiariser et de travailler de manière fluide dans Figma, non pas pour vous apprendre à créer travailler de manière fluide dans Figma, un site Web réactif, mais pour vous permettre de l' explorer et de comprendre comment j'ai pris ces décisions. Il semble donc assez judicieux de les aligner côte à côte. Mais comment tout cela s'imbrique-t-il et comment fabriquons-nous ces choses ? L'histoire se résume donc très brièvement à la mise en page et aux deux éléments que nous voulons examiner, à savoir nos conteneurs en colonnes. Donc, par conteneur, nous entendons un objet fixe au centre de l'écran. Vous remarquerez que si nous avons un iPad hypothétique et que nous l' étendons ainsi, il y a une taille maximale à atteindre. Si je réduis cela à nouveau, j'ai également créé une grille de mise en page. Et si j'utilise Control G, et cela peut activer cela ici, j'utilise 0, système de base à 12 colonnes, qui est assez standard. Et ce que vous remarquerez, c'est que ce n'est pas parfaitement aligné, mais c'est suffisant pour vous donner une idée que, d'accord, tout est au centre. Donc, si je le renomme, cela pourrait être un conteneur. Et si je les réduis, nous avons cette colonne de gauche et cette colonne de droite. Appelons donc cette colonne six. Et appelons-la également colonne six. Et c'est parce que lorsqu' ils utilisent Bootstrap comme exemple dans de nombreux autres frameworks et systèmes de mise en page frontaux, ils utilisent un système à douze colonnes et définissent la taille des éléments en utilisant 12 colonnes. Et vous pouvez configurer leurs composants pour qu'ils répondent à la taille de tout. Parmi cette taille. Si tu comprends ce que je veux dire. Nous avons donc les colonnes six qui prennent six colonnes sur la gauche, et l'autre six colonnes sur la droite. Vous pouvez l'ajuster et vous pouvez modifier la répartition. Donc, l'une prend trois colonnes et l'autre neuf. Vous pouvez même créer des nombres impairs qui ne correspondent pas lorsque vous configurez des choses et que vous créez un site Web réactif. Vous pouvez le voir ici. En fait, je devrais ajuster ces choses ici. J'ai donc ces éléments, l'icône. Renommez-la pour faciliter les choses. Et ce B est blanc. Mon logo est blanc. Donc, si je veux le disposer, modifiez-le en largeur fixe et réduisez-le à peu près à la même taille. Et puis, si j'appelle ce conteneur, c'est bon. C'est très bien. Cela devrait en fait être comme nous l'avons Si vous remplacez cela par un espace entre les deux, cela vous donne une idée approximative de la façon dont les choses devraient réellement fonctionner et s'intégrer. donc en savoir plus sur ce concept de conteneur Vous pouvez donc en savoir plus sur ce concept de conteneur, Get Bootstrap et simplement rechercher des conteneurs. Et puis en regardant les colonnes, vous pouvez regarder getbootstrap et regarder les colonnes. La documentation est donc plutôt bonne, je dirais. Et ce que vous constaterez, c'est que pour cet iPad hypothétique, si je le rends super large. J'ai donc un écran ultra large, par exemple un ratio de 21 x 9. Vous verrez qu'en fait, de nombreux sites Web ne savent pas comment l'utiliser. Ou si nous le laissions diviser en plusieurs parties , ce serait en fait assez inconfortable à lire. Alors je l'ai dit et je l'ai réglé pour qu'il remplisse un récipient. C'est vraiment horrible, n'est-ce pas ? Nous désactivons donc ces réseaux pendant un moment. Encore une fois, avec la commande G, vous pouvez voir que c'est peu difficile à voir et lire et que c'est tellement plus agréable de maintenir le milieu. Ce conteneur vous donne donc une taille maximale pour l'emplacement des éléments dans les colonnes vous donne un système pour la façon dont les éléments sont présentés sur la page, qui provient d'un historique de la conception d'impression. C'est très intéressant. Je recommande de le lire. Et cela devrait vous donner une idée suffisante de la façon dont ces choses s'imbriquent. Malheureusement, Figma n'aime pas vraiment les modèles. Par analogie, vous ne pouvez pas modifier les composants à mesure que la taille de l'écran change. Mais ça va. Certaines choses peuvent l'imiter de très près. Mais pensez à Figma comme un outil qui vous donnera une idée et communiquera votre intention pour les différentes tailles d'écran. Ensuite, c'est à vous de combler cette lacune lorsque vous discutez avec vos ingénieurs. Et vous pouvez certainement apprendre beaucoup de choses. Et je pense que cela vous facilite la vie si vous apprenez comment cela fonctionne réellement pour un véritable encodage. Parce qu'en fin de compte, c'est là que votre utilisateur voit, pas vos fichiers Figma. 30. Interactions de prototype: Nous avons donc déjà abordé les prototypes cliquables. Mais maintenant, faisons-le pour de vrai. Faisons un très bon travail de bout en bout, un exemple qui vous aidera également à comprendre comment le faire. Je me suis donc inspiré de certains des exemples précédents tirés des modules et leçons précédents pour créer un type de flux de commerce électronique très basique. Je reprends donc l'idée directe des micro-ondes et j'ai créé un petit sélecteur dans lequel vous pouvez choisir entre deux styles de micro-ondes et choisir entre deux couleurs différentes avant passer à l'écran du panier , puis de passer au début de la commande. Alors allons-y directement. Pour commencer, le plus simple est de cliquer sur les prototypes en haut à droite. Et à partir de là, ce que vous verrez en parcourant les différentes couches, c'est qu'il y a ce petit cercle qui apparaît à travers ces différentes couches. Et lorsque vous sélectionnez votre couche, ce sera le moyen le plus simple de créer un prototype d'interaction. Donc, si la page sur laquelle vous travaillez n'a pas de flux existant, vous remarquerez quelques points ici. Il n'y avait aucune interaction entre prototypes auparavant. Et quand je le fais glisser, cela crée une interaction. Et les deux choses à noter tout d' abord, c'est que cela a créé un flux que vous pouvez voir dans le coin supérieur gauche nommé flow one, que vous pouvez modifier ici, mais dans les détails de l'interaction. Donc, par défaut, ce sera un clic, mais s'il y a une interaction existante, ce sera par défaut la suivante. Cela va donc passer à la traîne. Puis en survolant, en appuyant sur , etc. Nous allons nous en tenir à décliquer aujourd'hui. Mais je vais vous laisser quelques exercices pour explorer les autres. Donc, si nous décliquons et naviguons, et que je veux que ce soit instantané, il n'y a pas grand-chose d'autre à faire. Je vais donc simplement cliquer sur Fermer et cela restera là. Ce que je peux faire à partir d'ici, c'est cliquer sur les différents éléments entre lesquels je souhaite naviguer. Donc, avec le sélecteur lorsque je passe d'une l'autre, je veux que cela se produise. Ce que je vais faire ici, c'est activer Smart Animate. Et cela donnera l'impression qu' il est plus interactif qu'il ne l'était. Donc, je pense que c'est ce que j'essaie de dire. Donc, si nous passons par là et que nous traversons ceci, il suffit de passer par les différentes. Vous pouvez constater que si vous avez préparé vos écrans et vos flux à l'avance, il est relativement simple de tout connecter. Prenons un moment pour le faire et nous assurer d'avoir fait la plupart d'entre eux. Et vous pouvez voir qu'une fois que j'ai modifié les paramètres, pour lequel est ce b ? Celui-ci, n'est-ce pas ? Une fois que j'ai modifié les paramètres, derniers paramètres connus que j'ai définis ont continué à être conservés. C'est donc très utile. Nous allons y aller. Vous pouvez le connecter ici. OK, des trucs géniaux. Alors connectez-les tous ensemble. Chacun devrait donc avoir deux interactions menant à l'un des autres écrans. À partir de là. Je veux obtenir celui-ci juste à des fins d'illustration. L'alternative et le style blanc , c'est celui-ci. Et cliquez sur le bouton Ajouter au panier. Et regardez ça ici. Je vais donc revenir à l'instant. C'est donc plus naturel. Et à partir de là, je peux faire ceci et faire cela. La seule autre chose que vous voudrez peut-être savoir est également le déclic. Tu peux y retourner. Il va donc revenir à l'écran précédent ou à l'interaction précédente. Cela ne semble donc pas si intéressant pour le moment. Mais c'est très utile si vous souhaitez annuler ou si vous avez de nombreux flottants complexes. Ce sont donc les éléments essentiels dont vous voulez être conscient. C'est donc à peu près ainsi que vous configurez toutes vos interactions. Je vais juste l'ouvrir très rapidement. Renommons ce flux. Flux. Cliquez dessus. Et vous devriez être en mesure de voir dans un instant comment tout cela s'intègre. Au fur et à mesure que nous défilons, nous pouvons voir ici comment construire mon micro-ondes et le Smart Animate. Vous pouvez le voir passer de l'un à l'autre. C'est cool, non ? Sélectionnez donc ces deux éléments dans le panier, cela nous amène ici, puis je peux procéder à l' achat et revenir au panier nous y ramène. Un exemple court, propre et simple qui vous aide à les assembler. En tant que prototype d'instructeur. 31. Plusieurs flux: Nous avons créé un flux dans la leçon précédente. Mais que faire si vous souhaitez partager plusieurs flux ? L'un de vous souhaite tester deux conditions différentes par rapport à l'autre. Je vais donc vous donner une brève introduction et un aperçu de la façon de procéder. Tout d'abord, ce que vous voulez remarquer dans l'aperçu, c'est que lorsque vous cliquez, vous pouvez voir deux commandes différentes. En haut à gauche ici. Ce sera ce qui vous sera le plus utile. Vous pouvez voir tous les différents flux que vous avez assemblés. Nous avons donc ici le flux unique que nous avons assemblé, le mien. Mais que voulons-nous assembler ? Un autre ? C'est très simple. Supposons que nous commencions par le paiement, quelle qu'en soit la raison. Et vous pouvez simplement, dans cet onglet prototype, si vous ne l'avez pas sélectionné ou si vous avez cliqué dessus, vous assurer de sélectionner à nouveau l'onglet Prototype. Ensuite, si vous cliquez sur le point de départ du flux, vous pouvez définir la condition du flux de paiement et lui donner un nom. Ensuite, le prototype part de là. Ce ne sont donc que des signets auxquels vous pouvez accéder depuis un ordinateur en cliquant ici ou en cliquant sur le bouton de lecture en haut à droite. Ce que vous verrez, c'est que tous ceux qui ont ouvert le fichier et qui peuvent voir le prototype peuvent également voir ces éléments. Donc, si je clique sur mon flux, cela nous ramène au début du flux que nous avons créé précédemment. Il pouvait passer, construire mon micro-ondes et passer d'un objet à l' autre. Ou si je veux travailler sur les différents flux et partir directement d'un autre endroit, nous sommes venus ici et vous pouvez voir que cela nous amène directement au panier. Vous y voilà. 32. Partage de prototypes: Maintenant que vous disposez d'un prototype cliquable et que vous avez créé les flux que vous souhaitez partager avec les gens. Vous allez maintenant vouloir partager cela avec quelqu'un qui travaille à distance, disons que vous travaillez à domicile ou que vous avez quelqu'un qui travaille dans un bureau différent géographiquement et que vous souhaitez partager cela avec lui. Voici donc tout ce que vous voudrez savoir afin de partager votre prototype sous le meilleur jour possible. Donc, avant de passer aux liens, il y a trois choses que je voulais attirer votre attention. Il s'agit des zones réactives bleues, du niveau de zoom et de l' affichage et du masquage de l'interface utilisateur. Parce que quels que soient les paramètres que vous sélectionnez ici, nous les intégrerons ce lien de partage que vous pourrez ensuite partager avec vos amis, collègues ou toute personne avec qui vous souhaitez les partager. Il est donc très important de corriger ces paramètres avant de générer ce lien de partage. Ici, en haut à droite, vous pouvez voir différentes choses. Donc, par défaut, affichez les indices de zone réactive. Onclick est toujours activé. Donc, si je fais cela, vous pouvez voir qu'une zone de l'écran est surlignée en bleu. Donc, parfois, vous voudrez peut-être désactiver cela. Si vous ne voulez pas donner d' indices aux gens et rendre les choses plus réalistes, ce n'est pas quelque chose que vous pouvez activer et désactiver à partir d'ici. Vient ensuite le niveau de zoom. Ici. C'est une bonne taille, mais vous devez vous assurer que le Zoom est la bonne taille pour ce que vous souhaitez partager. So Fit to Screen est l'un des formats que vous pouvez utiliser. C'est bon pour les présentations. Vous avez en quelque sorte la largeur de coupe. Il s'agrandit donc jusqu'à ce que la taille maximale de votre écran soit suffisamment grande Il s' affichera simplement à 100 %. Vous avez également Fill Screen, qui est un peu similaire à Fit to Screen. Eh bien, il y a la taille réelle. Ainsi, en fonction de la façon dont vous avez configuré votre prototype et de la résolution que vous avez , vous pouvez modifier la façon dont le prototype est vu par la personne qui le reçoit. Donc, si je l'écrase, ça ne marchera pas, n'est-ce pas ? OK, ne cachons pas ça. Quoi qu'il en soit Bref, lorsque vous essayez de dire « modifiez les options de zoom » jusqu'à ce que vous soyez satisfait de la façon dont elles s'affichent. Avant de l'envoyer à quelqu'un. La dernière consiste à afficher et à masquer l'interface. Donc, si vous aimez ça, nous aurons aussi ce bar. Et si vous l'ouvrez, cela sera visible. Vous souhaiterez peut-être afficher ou masquer l'interface utilisateur de Figma. Il y a donc un drôle de symbole ici. Mais le raccourci que j'utilise est la commande et le retour arrière, mais le bouton de barre oblique inverse, désolé, ou le symbole en forme de tube, qui ressemble à une ligne verticale. Puis cliquez ici. Vous pouvez voir que l'interface utilisateur est masquée. Et quand je clique sur environ, je n'en vois plus pour réapparaître, commande, barre oblique inverse, puis je peux revoir tous les éléments de l'interface utilisateur. Une fois que vous l'avez configuré, vous devez accéder au lien Partager le prototype. C'est pourquoi vous pouvez voir qu' un lien de partage de copie apparaît en bas. Parce que si vous masquez l'interface utilisateur, vous ne pouvez pas réellement voir le bouton de partage. Mais à partir de là, c'est probablement quelque chose que vous voudrez faire. Si nous allons droit au but, je peux vous montrer à quoi ressemble l'URL. Si nous zoomons, vous pouvez le voir, vous pouvez généralement l'utiliser pour vous vérifier. Voici les options de cette URL, donc je vais la garder aussi accessible que possible pour vous. Mais pour masquer l'interface utilisateur, par exemple, vous pouvez voir ici qu'une option et un DUI élevé ont été ajoutés , et c'en est une. Si je veux que cela s'affiche réellement, je pourrais le remplacer par zéro, par exemple et vous pouvez voir ici que cela est également intégré à l'option de mise à l'échelle pour le Zoom, ce sont toutes les options importantes que vous devez connaître. Et une fois que vous aurez partagé le lien, la dernière chose à faire est de partager le prototype, de vous assurer que toute personne disposant du lien peut le voir , puis de copier le lien. Vous pouvez l'envoyer par e-mail à Pete Them. Vous pouvez ajouter les e-mails de personnes ou les comptes Figma, mais je trouve qu'il est très utile de le configurer pour toute personne disposant du lien, de copier le lien et de l'envoyer à quelqu'un. Cela couvre donc tout ce que vous voudrez savoir sur le partage d'un prototype Figma et tous les flux que vous souhaiterez faire tester des utilisateurs ou partager des idées avec vos amis, collègues, votre famille, les personnes que vous souhaitez partager avec votre chien. Peut-être, par exemple