Masterclass avancé sur Figma : systèmes de conception, prototypage et interface utilisateur réactive

1. Bienvenue dans Masterclass avancé sur Figma !: Bienvenue à la master class avancée de Figma. Si vous connaissez déjà Figma et que vous souhaitez porter vos compétences à un niveau véritablement professionnel, ce cours est fait pour vous Bonjour. Je m'appelle Ahmed, et je serai votre professeur pour ce cours. Je suis un concepteur UIUX avec plus de quatre ans d' expérience dans le monde réel, expériences et les produits numériques, tels que les sites Web et les applications dans différents secteurs, tels que le secteur de la technologie, secteur touristique, travaillé sur plusieurs projets qui nécessitaient non seulement un bon sens de la conception, mais également des flux de travail efficaces, collaboration et des systèmes capables de se développer au fil du temps. Et c'est exactement ce que je vais vous apprendre dans ce cours. Dans ce cours, nous allons au-delà de la conception de base et nous nous concentrerons sur façon dont les concepteurs avancés travaillent sur des projets du monde réel. Vous apprendrez à créer des systèmes de conception évolutifs, variables et des bibliothèques d'équipe, ainsi qu'à créer des mises en page réactives qui fonctionnent sur différentes tailles d'écran Découvrez également des techniques de prototypage avancées, telles que la création de micro-interactions, animations fluides et de gestes Toutes ces choses qui vont donner vie à votre design. En outre, nous explorerons les outils de conception modernes de Figma tels que FIG Jam, Figma Buzz, Figma Slides et bien d'autres encore pour vous aider à comprendre quand les utiliser et comment vous pouvez les utiliser pour les intégrer dans un flux de travail plus professionnel et plus efficace À la fin de ce cours, vous améliorerez non seulement vos compétences techniques, mais vous améliorerez également votre façon de penser en tant que designer. Vous serez en mesure de travailler plus rapidement, plus efficacement et avec plus de structure. Commençons donc. 2. Ce qui fait qu'un concepteur « avancé » dans Figma + feuille de route du cours map: Bonjour et bienvenue au cours avancé de Figma. Ici, vous apprendrez tout ce que vous devez savoir pour être capable de créer et de prototyper rapidement et de manière professionnelle, comme un senior Maintenant, bien sûr, pour l'ancienneté, vous avez besoin de quelques années d' expérience professionnelle Mais grâce à ce cours, vous serez en mesure d'apprendre et de comprendre les concepts les plus complexes que nous traitons lorsque nous concevons sur Figma Vous apprendrez des trucs et astuces que seules les personnes ayant un haut niveau d'expérience et de connaissances sur Figma connaissent, et vous maîtriserez généralement les outils difficiles, les mécanismes complexes avec lesquels Figma fonctionne Sans plus attendre, examinons ce que vous allez apprendre dans ce cours. J'ai rassemblé toutes les informations sur ce cours, un aperçu général juste pour que vous puissiez comprendre dans quoi vous vous engagez. Je vous conseille d' aller de l'avant et de suivre notre cours FIGMA, le cours de base de Figma, et non le cours avancé au cas où vous ne l'auriez pas déjà fait Mais si vous avez l'impression d' avoir une bonne expérience, vous avez déjà travaillé avec Figma, alors ce cours est fait pour vous Sinon, allez-y et essayez de saisir les éléments les plus élémentaires tout au long du premier cours où nous aborderons un peu ces fonctionnalités avancées, mais pas complètement. Mais dans ce cours, je suppose que vous connaissez déjà les compétences de base, que vous savez comment créer des cadres, comment créer des types de flux d'utilisateurs, etc. C'est pourquoi, si vous n'y êtes pas encore complètement, vous ne vous sentez pas parfaitement en forme en tant que designer, alors prenez du recul et essayez d'en apprendre les bases, puis revenez ici. Mais si tu dis : «   Hé, tu sais quoi ? Je le sais, et je pense que je peux le faire. Je connais quelques trucs sur Figma. Je l'ai déjà utilisé. J'ai déjà conçu dessus. Je suis, tu sais, à un bon niveau, je veux m' améliorer, alors ce cours est fait pour toi. Le premier chapitre que nous allons avoir est donc consacré aux systèmes de conception évolutifs et aux variables. Dans ce chapitre, nous allons parler de trois éléments principaux ou fonctionnalités principales de Figma qui sont très importants et certaines de ces fonctionnalités ont été publiées plus récemment Quand je dis récemment, je veux dire au cours des quatre dernières années environ. C'est pour beaucoup de designers, c'est assez récent. La première chose dont nous allons parler est l'architecture des composants, qui concerne la création d'éléments réutilisables, nous appelons des composants qui ont également des instances et des variantes différentes. Ensuite, nous allons parler des variables et des modes, qui sont l'une de ces fonctionnalités les plus récentes, je dirais, avec laquelle vous pouvez créer des variables, des couleurs , des textes, etc. qui changent ou peuvent être modifiés à un moment donné. Et nous allons parler des bibliothèques d'équipe et de l'organisation des fichiers, qui sont des éléments essentiels du travail en équipe sur Figma Cela présente donc de nombreux avantages, et nous allons en parler. Maintenant, dans le deuxième chapitre, nous allons nous concentrer davantage sur mise en page avancée et la réactivité. Maintenant, au cas où vous ne sauriez pas ce qu'est la réactivité, il s'agit essentiellement de concevoir vos applications ou vos produits ou quoi que ce soit pour s'adapter à différents écrans, y compris les écrans de PC, les écrans de tablettes, les écrans de téléphones Donc, dans la première leçon, nous allons parler d'une analyse approfondie de la mise en page automatique. Les mises en page automatiques sont cette fonctionnalité étonnante que seule Figma possède et qui vous permet d'organiser les éléments Nous en reparlerons plus tard, mais vous avez probablement déjà une introduction à ce sujet. Ensuite, nous allons parler des contraintes et des points de rupture et de la façon dont vous pouvez les utiliser pour rendre un design réactif En fin de compte, nous allons avoir une version de section réactive dans le monde réel , qui est essentiellement un exemple, une visite guidée où je vais vous montrer comment vous pouvez transformer un design en design très réactif. Dans le troisième chapitre, nous allons parler prototypage avancé et des micro-interactions Maintenant, en tant que personne qui n'est pas un débutant complet, vous avez probablement déjà eu quelques expériences avec le prototypage Vous savez comment il existe différents éléments et comment vous pouvez les prototyper. Et cela signifie essentiellement que vous pouvez avoir une animation ou qu'un bouton peut faire quelque chose. Peut-être que cela vous dirigera vers une autre page ou qu'il aura un effet de survol C'est exactement ce que sont les micro-interactions, mais au niveau micro, elles sont juste plus petites. Ce sera la première leçon dont nous parlerons. Micro-interactions, commençons par le niveau de base. Ensuite, nous allons parler des interactions entre le défilement et les gestes. En gros, comment faites-vous défiler horizontalement, verticalement etc., car cela doit également être configuré sur Figma En fin de compte, nous allons parler de la maîtrise de Smart Animate. Smart Animate est cette fonctionnalité géniale qui vous permet de créer animations fluides et faciles sans avoir à faire grand-chose Pour être honnête, c'est assez simple À partir de là, nous allons passer au dernier chapitre. Quels sont les outils Figma modernes pour les concepteurs avancés. Au cas où vous n'en auriez pas entendu parler, Figma a sa partie principale, qui est la partie de conception normale dont nous parlons habituellement et que la plupart des concepteurs utilisent, mais ils ont déjà introduit un ensemble d' outils à portée de main que vous pouvez utiliser à d'autres fins Maintenant, ces outils ne sont pas complètement différents de l'outil de conception, mais ils sont un peu plus ciblés. Parmi ces outils, nous allons parler de Figma Jam. Cela vous permet de travailler en équipe et de réfléchir avec votre équipe. Ensuite, Figma Buzz pour les réseaux sociaux, crée des publications et des visuels pour vos réseaux sociaux où que vous soyez, sans avoir à faire trop d' efforts ou à vous retrouver avec de nombreux paramètres de design Ensuite, les sites Figma, qui vous permettent de concevoir et de publier des sites Web directement à partir de Figma, Figma Slides, ce qui va de soi . Il vous permet essentiellement de créer des diaporamas comme PowerPoint. Ensuite, Figma M, qui est l'IA spéciale BiFigma qui vous permet de créer différentes solutions, prototypes et écrans et même Enfin, après avoir discuté de chacun de ces outils séparément et vous en avoir donné un aperçu très général et une introduction, nous allons voir dans quels cas ces outils nous aident réellement à nous aider plutôt que lorsqu'ils nous distraient Parce que vous devez garder à l'esprit que ces outils sont excellents, mais ils sont également ciblés. L'idée est d'avoir les mêmes fonctionnalités ou les mêmes outils que vous disposez habituellement en matière de design, mais maintenant ils sont destinés fins spéciales, comme la création de diapositives à des fins spéciales, comme la création de diapositives, ce qui va avoir ses limites et ses distractions. Nous allons discuter des meilleures pratiques mes recommandations personnelles et de mon expérience avec ces outils. Je ne veux pas m' étendre trop longtemps parce que je suis presque sûre que vous êtes avide d'apprendre et que vous avez soif de connaissances, alors commençons. Commençons à apprendre, et nous allons commencer lentement, puis nous allons prendre de la vitesse, alors préparez-vous, asseyez-vous et allons-y. Je vous verrai sur la diapositive suivante. 3. UX Theory: Bonjour et bienvenue à une autre leçon du cours Figma. Et cette leçon d'aujourd'hui vise à vous présenter ce qu' est le design d'expérience utilisateur ou, pour être plus précis, ce qu'est UIUX Mais nous allons nous concentrer un peu plus sur la partie UX. Allons-y donc. Tout d'abord, définissons rapidement ce à quoi l' expérience utilisateur est censée faire référence. L'expérience utilisateur en général peut être définie comme la façon dont un utilisateur interagit avec un produit, un système ou un service et en fait l' expérience , d'accord ? Cela peut être n'importe laquelle de ces choses. Et cela inclut la perception qu'a une personne de l'utilité. Facilité d'utilisation et efficacité. Maintenant, si nous voulons rapidement décomposer cela, il s' agit essentiellement d'interaction. C'est un gros mot surligné. Il s'agit de l'interaction et de l'expérience d'un produit, d'un système, d'un service. C'est pourquoi je parle toujours d'une sorte d'expérience numérique. Je définis toujours ces choses. Cela peut être un site Web, une application, n'importe quoi, n'est-ce pas ? Parce que lorsque vous parlez de physique, cela peut même être numérique. Quand vous dites qu'un produit qui peut être n'importe quoi est un produit, n'est-ce pas ? Cela peut être n'importe quel type de chose. Cela pourrait être un mug, un site Web. Cela peut être, vous savez, un numéro que vous appelez et qu'ils vous fournissent une sorte de service, n'est-ce pas ? Et c'est pourquoi le genre d'encapsulation de toutes ces choses Il peut s'agir d'un produit , d'un système ou d'un service, car il existe différentes catégories et il s'agit de comprendre comment les utilisateurs interagissent avec eux. Et il indique que cela inclut également leur perception de l'utilité, de la facilité de fusion et de l'efficacité. Et ce sont également des thèmes assez importants. Est-ce qu'ils le trouvent utile ? Cette application, ce site Web ou ce service ? Est-il facile à utiliser et efficace ? Par exemple, fait-il ce qu' il est censé faire ? Toutes ces questions sont très importantes. Et maintenant je vais dire, attendez une minute. Quelle est la différence entre l' expérience utilisateur et l'interface utilisateur ? Et je me pose exactement cette question, car j' étais également en train d'apprendre et de me lancer dans le domaine. Je me demandais si nous continuons à utiliser ces deux mots, et ils se rejoignent toujours. S'agit-il de la même chose ? Nous disons juste crayon ou stylo ? Vous savez, ils sont si proches de l'autre que nous disons simplement qu'ils sont équivalents. Non, pas exactement. OK ? Soulignons donc les différences. L'expérience utilisateur est donc davantage une question de sensation. Il s'agit de savoir à quoi ressemble un produit ou une expérience, comment quelqu'un en fait l'expérience. Alors que, d'un autre côté, l'interface utilisateur est davantage une question d'apparence. Il s'agit de savoir à quoi cela ressemble aux couleurs, la typographie, au texte, vous savez, aux images, n'est-ce pas ? Alors que l'expérience utilisateur dépend davantage de ce que vous ressentez avec les images ? Comment vous sentez-vous dans le texte ? Le texte vous convainque-t-il ? Cela vous rassure-t-il ou vous met-il en colère ? Vous savez, il s'agit donc de l'expérience, l'autre point est que l'expérience utilisateur gère également de nombreuses recherches sur les utilisateurs. Il s'agit de s'asseoir, de parler aux utilisateurs, de voir ce qu'ils pensent et d'essayer de comprendre leurs comportements, et de laisser cela guider la conception ultérieure, l'interface utilisateur. Il s'agit de guider notre compréhension. Il s'agit d'obtenir des résultats concrets de la part de nos utilisateurs. Alors que l'interface utilisateur concerne davantage les tendances du design. Les tendances du design concernent donc ce qui existe sur le marché ? Que font les gens ? Quels sont les modèles, les formes et les couleurs les plus appréciés ? Tu sais, chaque année, quelque chose de nouveau arrive. Parfois, nous adorons les dégradés, puis une autre année, les dégradés ne sont pas cool Tu sais, une fois, les icônes sont géniales. Un autre jour, tu sais, les icônes ne sont peut-être pas si cool que ça. Et il s'agit toujours de ces choses qui changent, et il n'est pas nécessaire de passer radicalement d'une forme peu cool à une forme froide ou vice versa, mais il se peut que les formes aient des coins arrondis, puis parfois des angles vifs Il y a toutes ces tendances, et il s'agit de les suivre. L'expérience utilisateur est également davantage question de principes psychologiques. Il s'agit donc de savoir comment les utilisateurs perçoivent les formes ? Tu sais, comment les comprennent-ils ? Il devrait y avoir une explication psychologique de ce qui se passe dans leur cerveau lorsqu'ils voient quelque chose et de ce que cela leur fait ressentir. Alors que, d'un autre côté, l'interface utilisateur concerne les principes de conception. L'interface utilisateur repose sur des règles que nous avons établies qui déterminent si le design est bon. Mais l'expérience utilisateur veut comprendre que même si ce design est bon ou mauvais, est-ce qu'il fonctionne ? Cela évoque-t-il les émotions que nous voulons susciter ? Cela permet-il de comprendre ou de faire comprendre aux gens comment l'utiliser ? Est-ce facile ? Est-ce agréable et ainsi de suite ? L'expérience utilisateur est également un peu plus théorique. Cela ne signifie pas qu' il n'est pas impliqué dans la pratique, les données réelles, mise en œuvre réelle. C'est définitivement le cas. Mais en général, il s' agit plutôt de s'asseoir, faire des recherches, de parler aux gens, de faire beaucoup de paperasse, en gros Et ce n'est pas de la paperasse, il s'agit plutôt de bien connaître les faits, puis de décider quoi faire avec l'interface utilisateur, vous savez, de choisir les couleurs, de choisir le texte, d'aller de l'avant, de créer un prototype, créer un prototype, faire un croquis ou quelque chose comme ça L'expérience utilisateur implique de nombreux tests et itérations. Il s'agit de tester, de réaliser que vous vous trompez ou que vous pouvez améliorer certains aspects, ou que vous pouvez améliorer certains aspects vous pouvez améliorer certains puis de revenir en arrière et les modifier en fonction des résultats. L'interface utilisateur implique beaucoup d'interactivité et d'animation Il met donc cela en évidence comme objectif. Comme nous l'avons dit, c'est aussi une question de look. Il s'agit donc de choses qui ont l'air vivantes, belles, engageantes, impressionnantes. Et c'est l'un des principaux objectifs. C'est une excellente image pour résumer la différence entre l'interface utilisateur et l'expérience utilisateur. Le design ressemble donc essentiellement à cette image. Vous avez une belle rue ou, vous savez, une route, une passerelle, un sentier pédestre dans ce jardin, dans ce parc, et c'est très bien planifié, non ? Ensuite, l'expérience utilisateur est ce que les gens font réellement. Les utilisateurs, ceux qui s' y rendent à pied ou qui empruntent le parc trouvent que cette route est la plus efficace. témoigne le fait que l'herbe n'est plus là parce que tant de personnes l'ont parcourue. Et cela montre qu'il existe une tendance dans le comportement des utilisateurs. Ils le parcourent, et le design consiste à être beau et à le planifier d'une belle manière, mais pas nécessairement de manière efficace ou fonctionnelle. Et la raison en est que si vous vouliez suivre cette voie, vous devez marcher jusqu'ici, puis vous pouvez aller sur la droite. Mais en attendant, cela prend un raccourci. L'expérience utilisateur consiste donc à comprendre ce que font réellement les gens ? Il ne s'agit pas seulement de Hey, nous l'avons conçu pour eux. Non, il s'agit de savoir s'ils l'utilisent réellement ? Est-ce vraiment utile et ainsi de suite. L'expérience utilisateur est une question d'interactions. Pensez-y, vous savez, en ce qui concerne ces airpods ou écouteurs intelligents, posez-vous la Comment sauter une chanson ? Comment puis-je sauter une chanson ? Eh bien, si vous connaissez ce type d'écouteurs, il y a généralement, vous savez, un bouton ou vous devez appuyer dessus une ou deux fois ou peut-être appuyer longuement pour sauter un morceau L'expérience utilisateur repose donc sur ces petites interactions que vous effectuez avec votre technologie pour obtenir des résultats, car les écouteurs sont en eux-mêmes des inventions incroyables, et leur apparence demande beaucoup de travail Mais, vous savez, après les avoir conçus, l'une des choses qui me viennent d'abord à l'esprit est de savoir comment sauter une chanson ? Je veux dire, j'ai mes écouteurs allumés. Mon téléphone est dans mon pantalon. Je voudrais sauter une chanson sans prendre mien. L'expérience utilisateur consiste à réfléchir à tous les types d' interactions que vous avez avec votre technologie, expérience numérique, votre service, votre produit, quel que soit le nom que vous voulez lui donner, et à réfléchir à la manière de le rendre plus fluide, meilleur et plus facile. Et deuxièmement, c'est aussi une question d'attentes. L'expérience utilisateur dépend donc de ce que vous attendez d' un produit comme celui-ci ? Et voici, par exemple, que se passe-t-il si vous en retirez un ? Et encore une fois, si vous en avez déjà eu un, vous savez que si vous retirez l'un de vos écouteurs, la musique s'arrêtera C'était très intelligent, car cela comprenait que c'est un besoin que beaucoup de gens ont. Ils arrachent un mégot d'oreille, quelqu'un leur parle. Ils veulent y répondre et ils veulent poursuivre une conversation ou quelque chose comme ça. Ils veulent entendre ce que les autres disent ou quoi que ce soit d'autre. Donc, comprendre que cela vient d'un besoin et que ce besoin revient peut-être à arrêter la musique. Donc, gérer les attentes. L'utilisateur ne le sait peut-être pas, peut-être ne le comprend-il pas, mais il s' agit essentiellement répondre à ses besoins sans même savoir que l'expérience utilisateur concerne les interactions utilisateurs avec le produit et la gestion de leurs attentes, s' assurant que la technologie fait ce qu'elle est censée faire Et autre chose, ce sont les émotions. Alors, qu'est-ce que tu ressens ? Mes premiers écouteurs que j' ai essayés étaient incroyablement confortables. Je me sentais comme un roi. J'ai eu l'impression d'avoir enfin mis la main sur quelque chose qui me comprenait et je l'ai compris. Et cela répondait à toutes mes attentes. Son utilisation était intuitive. Il faisait tout parfaitement. Et c'était tout simplement bien meilleur que tout ce que j'ai toujours eu. D'ailleurs, il ne s'agit pas d'une publicité pour un quelconque type de technologie, mais je dis simplement qu' il s'agit d'émotions. Et il arrive souvent que lorsque vous créez un produit ou un service, les gens soient frustrés. Ils peuvent s'énerver. Ils peuvent devenir tristes. Ils ont toute une gamme d'émotions parce qu'ils sont humains. L'expérience utilisateur consiste donc à gérer ces émotions et à s'assurer que vous avez autant que possible autant d'émotions positives que très peu d'émotions négatives. C'est donc le travail d'un produit. Il s'agit de vous donner l' impression que vos besoins sont satisfaits et que le produit est incroyable, excellent et incroyable. C'est donc un bon résumé de ce qu'est l'expérience utilisateur. Passons maintenant à autre chose, parlons des raisons pour lesquelles vous concevez. Il y a donc deux parties principales. Il y a un problème et il existe une solution, n'est-ce pas ? Dans le monde, dans le monde entier, quelle que soit l'activité que vous voulez exercer, il y a généralement un problème et une solution. Le problème, voici comment je pourrais le décrire. Un produit existe parce qu'il existe un besoin ou un problème dans le monde. Pensez à n'importe quel produit que vous possédez. Il y a un problème ou un besoin. Vous devez accomplir quelque chose et vous avez besoin de quelque chose pour cela. Vous savez, vous avez une voiture parce que vous voulez parcourir très longues distances avec elle parce que vous avez peut-être déjà eu un cheval, mais une voiture est plus rapide. Vous avez déjà eu un vélo, vous savez, moins cher, mais une voiture est plus rapide. Il s'agit donc de résoudre un problème et de vous rendre à des endroits très pratiques quand vous le souhaitez, sans avoir à attendre le train ou le bus. Tu peux y aller quand tu veux, comme tu veux, au moment où tu le souhaites. Il s'agissait donc de résoudre un besoin ou un problème. Et comme vous pouvez le constater, la deuxième partie, le produit de solution, résout les problèmes. C'est là que résident leurs vraies valeurs. Comprendre cela vous permet donc de comprendre votre rôle en tant que designer. Vous résolvez les problèmes des gens. Tu ne fais pas que donner quelque chose de beau à avoir. Vous ne dites pas : « Hé, regardez cette application cool ». Beaucoup de gens téléchargent des applications parce qu'elles sont cool et parce qu'elles ajoutent quelque chose à leur vie. Mais la plupart du temps, vous savez, applications les plus performantes sont celles dont vous avez besoin, les applications qui résolvent un problème que vous avez, n'est-ce pas ? Pensez-y. Vous pourriez dire : « Hé, les réseaux sociaux, vous savez, je suis sur les réseaux sociaux. Je suis sur Instagram. Je suis sur Facebook. Cela ne résout aucun problème. Je n'ai aucun problème. Eh bien, oui. Je veux dire, il y a un problème. Il y a un besoin. Le besoin est d'entrer en contact avec les gens, de leur parler, de se sentir connecté à eux, de les voir. Et comme tout le monde utilise déjà ces applications, vous aurez l'impression de passer côté d'une occasion si vous ne les utilisez pas. Il s'agit donc, en quelque sorte, de résoudre un problème. Et comme vous pouvez le voir sur la droite, voici la couverture d'un livre intitulé The Design of Everyday Things. Et il est écrit par Don Norman, une personne qui était considérée en général comme, vous savez, un peu comme l'ancêtre de l'UX design dans tout le domaine Et c'est parce qu'il a écrit ce livre qui détaille à bien des égards les principes et directives de l'UX design. Et c'était un livre très instructif. Je vous recommande de le lire si vous voulez en savoir plus à ce sujet. C'est un classique. Il ne vous donnera pas de conseils sur Figma ou quoi que ce soit d'autre parce que c'est un jeu assez ancien, mais il vous permettra de comprendre ce qu'est le design UX, de quoi il s'agit et, vous savez, comment vous pouvez utiliser les principes de base Et vous remarquerez que même si le livre est très ancien, il répond aux mêmes besoins et problèmes que ceux que nous avons aujourd'hui. Dans ce livre, il a abordé un concept très intéressant , appelé portes normandes. Et dans ce concept, qui est très éclairant, il a parlé du nombre de portes dans le monde, vous remarquerez probablement le pas Sont assez déroutants. Et c'est ce qu'il appelle une mauvaise porte. Si vous regardez cette photo, vous verrez deux portes différentes. Et la question est : sur quelle porte je dois pousser ? Et sur quelle porte dois-je tirer, d'accord ? Et je vais vous donner quelques secondes pour y réfléchir. Terminé. C'est assez de temps pour toi. En gros, celle de gauche est celle que vous tirez, et celle de droite est la porte que vous poussez. Et vous pourriez me demander, comment le saviez-vous ? Et la réponse est tout simplement parce que cela se voit à travers les poignées, n'est-ce pas ? C'est là que réside la clé. Sur la gauche, vous avez une poignée qui vous permet de le tenir facilement, placer autour de vous et de le tirer vers vous, ce qui est assez facile à tirer. Sur la droite, vous n'avez pas vraiment de poignée, et vous ne pouvez pas vraiment la tenir de cette façon. Ce n'est pas facile à tirer, mais c'est assez facile à pousser, non ? Il s'agit donc d'un design intuitif. Et c'est ce que Don Norman a remarqué, c'est que dans le monde, lui et bien d'autres personnes avaient tendance à confondre les portes. Ils se dirigent vers une porte censée être poussée et ils la tirent ou vice versa, elle est censée être tirée et ils la poussent. Et ils pensent qu'ils sont stupides. Ils pensent qu'ils font quelque chose de mal ou qu' ils confondent toujours ces portes, et c'est de leur faute. Et il a noté que non, ce n'est pas de ta faute. C'est la faute du designer. La personne qui a conçu et construit cette porte et l'a planifiée telle qu'elle est est la personne qui a fait des bêtises à cause de tout devrait être la porte la plus simple Vous savez, nous l'avons découvert il y a très, très longtemps. Nous devrions déjà l'avoir compris. Ça ne devrait pas être si difficile. Mais vous remarquerez que non, c'est toujours difficile. Vous ne savez pas quand vous arrivez devant une porte, vous ne savez pas si vous la poussez, si vous la tirez ou si elle s'ouvre d'elle-même. Il y a parfois des indications, mais la plupart du temps, on n'en est pas vraiment sûr et il faut aller de l'avant, le tirer, le pousser, essayer de voir. Et parfois, vous ne savez pas : cela nécessite-t-il de la force, moins de force ? Est-il verrouillé ? N'est-il pas verrouillé ? Il en a donc discuté et à travers cette histoire, à travers cet exemple, il a expliqué comment un bon design se manifeste. Un bon design est facile à comprendre et à expliquer. Il n'a pas besoin d' explication, en fait. Cela va de soi. Tout comme ces portes, lorsque nous concevons de bonnes portes, nous sommes en mesure de rendre la poignée si claire que les gens comprennent quand on pousse et quand on tire. Et c'est exactement la même chose que nous avons en matière de design. Cela nous amène à un deuxième point celui du design centré sur l'humain. Il s'agit d'une approche de résolution de problèmes couramment utilisée dans les cadres d'ingénierie et de gestion de la conception de produits, de services et de systèmes de processus et de gestion de la conception de produits, de services et de systèmes , qui développe des solutions aux problèmes en impliquant le point de vue humain à toutes les étapes du processus de résolution des problèmes. C'est beaucoup de mots, je sais, je sais. Décomposons-le. Qu'est-ce que le design centré sur l'humain ? Il est centré sur les personnes. Il est conçu pour les humains, pour les humains. Et, vous savez, ici, on fabrique des produits pour robots. Nous ne le faisons pas pour d' étranges robots qui comprennent le code. Nous le fabriquons pour les humains. Rendez-le donc plus facile à comprendre pour les humains que sont vos utilisateurs. Alors fais preuve d'empathie. Le deuxième point est de résoudre le bon problème. Beaucoup de gens ont tendance à penser aux mauvaises choses lorsqu' ils construisent . Non, simplifiez la tâche de vos utilisateurs. Concentrez-vous sur ce qu'ils essaient de résoudre en fonction de leurs problèmes et de leurs besoins. Et comme le dit le dicton, si ce n'est pas cassé, ne le répare pas, n'est-ce pas ? Ne réparez pas quelque chose qui n'a pas besoin d'être réparé. Concentrez-vous sur les vrais problèmes et résolvez-les. Ensuite, nous avons à la fin itérer. Human Center Design affirme que le processus de conception est itératif, ce qui signifie qu'il s'agit d'un cycle continu de conception et de refonte, de réflexion et de refonte, de construction et de reconstruction que le processus de conception est itératif, ce qui signifie qu'il s'agit d'un cycle continu de conception et de refonte, de réflexion et de refonte, de construction et de reconstruction. C'est sans fin. Il n'y a jamais de produit parfait, et il s'agit toujours de produits ou de services qui doivent toujours être retravaillés, améliorés, etc. C'est l'un des piliers. Permettez-moi donc de vous donner quelques exemples de ce qui fait bon design UX et de ce qui fait un mauvais design UX. Nous allons donc ignorer la partie interface utilisateur pour le moment. Nous allons ignorer le look, même si les deux se ressemblent beaucoup. Maintenant, lequel préfères-tu ? Bouteille de ketchup à gauche ou à droite. J'espère que la plupart des gens ont dit « à droite », car c'est la bonne réponse. Et la raison en est que, si vous ne le savez pas, la bouteille de gauche est assez difficile à manipuler, la forme de la bouteille, mais aussi du matériau de la bouteille, du fait que c'est du verre, qui n'est pas compressible Et comme le couvercle de la bouteille vient d'en haut , il est très difficile de mettre le ketchup, car il faut ouvrir la bouteille, la retourner, puis commencer à la secouer agressivement, vous savez, secouant pour obtenir un peu de ketchup, et la plupart du temps, cela mène C'est assez compliqué. Mais celui de droite, ça va de soi. Il est en plastique, vous pouvez donc le presser, et il est toujours incliné vers le bas. Il doit donc toujours être incliné vers le bas sur le couvercle. De cette façon, la gravité tire toujours le ketchup vers le bas. Et puis nous avons ces tableaux de bord de voitures. Encore une fois, lequel préférez-vous ou lequel a, selon vous, le meilleur design UX , celui de gauche ou celui de droite, et pourquoi ? OK, laisse-moi te répondre. C'est celui de gauche. Laissez-moi vous expliquer pourquoi. Je ne dis pas cela simplement parce que c'est mon préféré ou quelque chose comme ça. Mais si vous y réfléchissez, les tableaux de bord que nous avions ou que nous avons toujours, mais pour les voitures plus anciennes, sont assez simplistes Je veux dire, pas très. Ils peuvent sembler accablants. Par exemple, il y a beaucoup de boutons de formes et d'icônes. Mais comme vous pouvez le constater, tout d'abord, ils sont représentés par de simples chiffres ou icônes censés être faciles à comprendre. Peut-être aurez-vous besoin d'un jour aller de l'avant et essayer de toutes les comprendre. Vous allez les tester, vous allez appuyer dessus et comprendre ce qu'ils font. Mais il y a des boutons qui sont là. Ils ont une fonction spécifique. Certaines choses que vous tournez vers la droite, autres que vous tournez vers la gauche, autres que vous poussez, d' autres que vous tirez. Il y a toutes ces interactions différentes, non ? Lorsque vous conduisez et que vous voulez changer quelque chose, vous devez appuyer sur quelque chose. Vous savez qu'en matière de climatisation, il faut changer la température en tournant la balance en tournant le bouton vers la droite ou vers la gauche, non ? Vous savez donc que ce non est pour la température. Vous ne le mélangeriez pas avec le bouton de lecture de la radio parce que c'est un bouton sur lequel vous appuyez. La façon dont le tableau de bord a été conçu était donc idéale pour les personnes qui conduisent, qui se concentrent sur la mission, l'activité de conduite et qui n' ont pas le temps de regarder le tableau de bord. Pendant ce temps, les voitures plus récentes, comme celle de droite, ont un énorme avantage. C'est cool. C'est sympa. Mais c'est assez distrayant. Cela vous détourne de la route. Et ce qui est encore plus ennuyeux, c'est qu'il possède autant d'applications, autant de fonctionnalités, ce qui vous oblige, vous savez, à examiner toutes les options. Il n'y a aucun bouton familier. Tu ne sais pas où se trouvent les boutons. Tu ne sais pas ce qu'ils ressentent. Tu sais, tu ne peux pas simplement y mettre la main sans chercher à savoir exactement sur quoi tu appuies. Vous devez regarder l'écran, quitter l'application, passer à une autre application, vous savez, connecter au Bluetooth, pour la connecter à votre téléphone. Et toutes ces choses prennent du temps, elles attirent l'attention et elles vous mettent en danger. C'est pourquoi c'est un mauvais design UX. Maintenant, très rapidement, comparons ceux de droite et de gauche. Lesquels sont à la fois deux blogs ou magazines ou articles de presse différents , systèmes d'information. Celui de gauche est évidemment plus vieux. Mais ce que vous pouvez voir, c'est que celui gauche est beaucoup plus difficile à lire, et ce pour de nombreuses raisons. Mais il contient une mise en page qui comporte de nombreuses images, tailles différentes, d'images différentes, et elles sont très difficiles à distinguer. Vous ne savez pas ce qu'est une publicité, ce qu'est un article de presse, quel est le titre , vous ne savez rien parce qu'ils ont tous le même type de titre, les mêmes couleurs , ce qui est assez confus et beaucoup d'informations. Je veux dire, combien d'articles y voyez-vous ? 14, au moins, 15, 16 ans, quelque chose comme ça. Mais en regardant sur la droite, vous voyez quelque chose beaucoup plus organisé. Tout d'abord, vous avez toutes vos différentes catégories : États-Unis, monde, affaires, art, style de vie. Vous pouvez donc choisir parmi eux. C'est votre menu, je crois. Et puis vous avez un gros article surligné au milieu, un peu vers la gauche. Et puis vous avez 28 recettes de Thanksgiving sur la droite. Vous avez un autre article en ligne. Mais d'après les couleurs, les formes, le texte en gras, vous pouvez dire ce qu'est un titre ? Qu'est-ce qui n'est pas un titre ? Et vous pouvez voir, par exemple, qu'ils disent « vivre en rouge », et c'est écrit il y a 32 minutes. C'est donc très explicite. Tu comprends, OK, c'est en direct. C'était il y a 32 minutes. Ce n'est pas trop chaotique. Il y a un espace blanc vide. donc clair que la bonne solution est gagnante pour de nombreuses raisons, mais elle est essentiellement en mesure de fournir une expérience utilisateur beaucoup plus confortable pour l'œil puisse comprendre où cliquer, sur quoi cliquer. Vous savez, et celui de gauche, on dirait que ce ne sont que des publicités, pour être honnête. Il semblerait que ce ne soient pas de vrais liens. On dirait qu'ils veulent que je clique sur quelque chose. Même le fait qu' il s'agisse de photos d'archives, la moitié d'entre elles. Il s'agit d'une publicité. C'est faux. Ce n' est pas vraiment fou. Celui de droite est capable d'une manière ou d'une autre, avec tous les différents éléments du design vous donner une meilleure sensation, pas la meilleure sensation, mais une sensation légèrement meilleure. Maintenant, en ce qui concerne la conception UIUX, permettez-moi de vous présenter un peu le process design thinking, qui est le processus de création de produits numériques par le biais de la conception UIUX Il comporte cinq étapes principales. Certaines personnes le définissent avec d'autres étapes ou des noms différents. Il existe différents types d'écoles de pensée. Mais suivons ces étapes. La première étape consiste à faire preuve d'empathie. première étape consiste à comprendre qui sont vos utilisateurs, d' empathie à leur égard, à aller de l'avant et, vous savez à essayer de comprendre d'où ils viennent, quels sont leurs problèmes, quels sont leurs besoins, etc. La deuxième étape consiste à définir. Il s'agit donc de définir le problème que vous essayez de résoudre, définir les solutions, définir les hypothèses que vous avez. Tu sais, qu'est-ce qui peut les aider ? De quoi ont-ils besoin ? Pourquoi ont-ils un problème ? Quelle en est la source, quelle en est la solution et ainsi de suite ? Et il s'agit de définir la direction que vous allez prendre en tant qu'entreprise ou en tant que designer. Quel type de solution leur proposez-vous ? Hein ? Quel est votre modèle commercial ? La plupart du temps, cela ne dépend pas que de vous. Tu sais, tu es dans une entreprise. Ils ont déjà un modèle commercial. Ils ont déjà une stratégie. Votre rôle est de comprendre comment vous pouvez résoudre au mieux les problèmes de l'utilisateur. Après avoir mieux défini la direction, nous passons à l'idéation. C'est à ce moment-là que nous échangeons des idées, nous réfléchissons, que nous essayons de comprendre quelles sont les options qui s'offrent à nous Je veux dire, que pouvons-nous faire ? Et vous allez de l'avant et vous lancez quelques idées. Donc, dans la partie précédente, quand j'ai dit de fournir une solution, vous ne dites pas que nous allons en faire une, deux, trois, quatre. Tu ne fais que donner une orientation générale. Peut-être devrions-nous créer une application pour, vous savez, aider les gens à payer des impôts. Mais tu ne sais pas comment. Vous ne savez pas comment l'application fonctionnerait. Vous ne savez pas quelle en est l'ampleur. Vous ne savez pas si ce sera une application, un appareil ou un service ? C'est peut-être un service. Tu appelles quelqu'un et tu le contactes. Donc c'est à peu près ça, puis tu meurs. C'est à ce moment-là que vous posez des idées solides sur ce que vous voulez faire. Ensuite, vous passez à l'étape du wireframing et du prototypage Et c'est là que vos pensées sont sur papier ou à l'écran, et vous dessinez à quoi elles devraient ressembler lorsque vous les dessinez réellement. À quoi devrait ressembler l' expérience de l'application, ou s'il s'agit d'un service, comment le service doit-il fonctionner ? Comment devons-nous nous positionner en termes de marketing, par rapport à quoi que ce soit d'autre ? Mais encore une fois, toutes ces idées, rien n'est finalisé. Rien n'est fait pour toujours. C'est grâce à ce processus que vous pouvez obtenir un aperçu plus final, vous savez, en discutant avec vos collègues, en collaborant avec eux, en le montrant aux parties prenantes, personnes investies. Cela peut être vos patrons, vos investisseurs, vos clients, qui que ce soit, il y a des gens qui s'y intéressent. Vous devez donc en quelque sorte, par leur intermédiaire , par le biais de vos collègues et de votre travail, arriver à une version plus finale. Au début, ce n'est qu'un croquis. Et puis une fois que vous obtenez plus de confirmation, vous commencez à le finaliser un peu plus Cela devient une conception de site Web appropriée, et c'est en quelque sorte sujet de ce cours. Il s'agit plutôt de cette partie, le prototypage. Maintenant, bien sûr, nous allons parler de toutes les autres parties. Le prototypage et le câblage, tels sont nos points forts. Et vous suivez un cours Figma, pas un cours de design UIUX Et puis voilà, il y a les tests. Maintenant, les tests. Pour être honnête, tout le monde ne le fait pas, mais les tests consistent à aller de l'avant, montrer vos applications à de vrais utilisateurs , à voir ce qu'ils en pensent et à obtenir des commentaires. Et une fois l'étape terminée, c'est à ce moment-là que vous pouvez itérer, d'accord ? C'est à ce moment-là que vous pouvez répéter et ainsi de suite, en revenant à nouveau à l' empathie Trouvez vos objectifs, redéfinissez-les, créez des idées, proposez plus d' idées, plus de fonctionnalités, plus d'histoires, plus de sections, peu importe ce que c'est Et puis prototyper encore et encore, résoudre des problèmes, corriger des bogues Tu sais, tu ne vas pas faire un travail parfait. Il y aura toujours des problèmes à contourner. Alors gardez toujours cela à l'esprit. En général, il s'agit du processus de création avec le design thinking. C'est ainsi qu'en tant que concepteur UIOX, vous pouvez partir de zéro, empathie au stade du test, du prototypage et de la commercialisation de votre produit Cela peut sembler très différent selon l'équipe dans laquelle vous vous trouvez, mais c'est plus ou moins à cela que cela devrait ressembler. J'espère que vous avez appris une chose ou deux sur ce qu'est le design UI UX. Dans les prochaines leçons, nous allons parler un peu plus interface utilisateur et, plus important encore, nous allons parler davantage de leçons pratiques, de leçons pratiques, de projets concrets sur ce qu'est Figma et comment l'utiliser Quels sont les outils, les systèmes, les fonctionnalités, etc. Merci donc beaucoup de m'avoir écouté, et je vous verrai dans les prochaines leçons. 4. Architecture de composants: Bonjour, et bienvenue à une autre leçon du cours avancé de Figma Dans cette leçon, nous allons maintenant aborder tout ce qui concerne les composants. Maintenant, si vous ne l'avez pas encore appris, je vais vous l'expliquer très facilement Les composants sont simplement des éléments de design que nous créons sur Figma et éléments de design que nous créons sur Figma que nous sommes autorisés à utiliser encore et encore Et nous avons essentiellement une relation entre un composant parent et un composant enfant. Il s'agit essentiellement d'un élément que nous pouvons copier et placer dans plusieurs instances. Mais il y a toujours la version originale. Et une fois que vous avez modifié la version d'origine, toutes les autres instances peuvent être modifiées. Cela signifie que si vous avez un bouton et que vous décidez plus tard de le rendre jaune au lieu de vert, il vous suffit de le faire une fois. Il n'est pas nécessaire de modifier le bouton sur chaque page. n'est qu'un exemple et vous allez mieux le comprendre au fur et à mesure. En parlant de boutons, prenons cela comme exemple pour le moment. Allons-y et créons un bouton très rapidement. Je vais juste obtenir l'outil de texte, je vais cliquer une fois et je vais écrire sur le bouton. Nous avons maintenant un élément de texte. Je vais en faire un cadre, donc je vais maintenir les touches Shift et A. Cela en fait un cadre avec une mise en page automatique. Certaines valeurs ont donc déjà été introduites. Nous pouvons modifier ces valeurs en fonction de nos préférences. Faisons le plein. Je vais le remplir. Je vais en faire un peu de bleu. Peut aussi être violet ? Cela ne pose aucun problème. Assurez-vous simplement que le texte est lisible, que vous pouvez le lire s'il est blanc ou noir, c'est à vous de décider Nous pouvons maintenant modifier certaines des valeurs du début. Nous pouvons le rembourrer un peu plus à droite et à gauche, puis le rendre un peu plus serré et plus petit de haut en bas Ensuite, nous pouvons également le rendre un peu plus rond. Dix ou huit. Cela dépend vraiment de nous. Pour le moment, c'est un bouton. Mais généralement, lorsqu' il s'agit de design, nous aimerions avoir, comme je l'ai dit, un composant. Donc une version originale que nous pouvons contrôler ou toutes les autres versions via. Ici, nous l'avons appelé frame one. Vous allez vous rendre ici et cliquer sur Créer un composant. Maintenant, c'est censé être un composant, et il s'appelle frame one. Nous allons juste l'appeler bouton. Maintenant que nous avons ce bouton, c'est génial. C'est cool, mais à quoi ressemble ce bouton avec effet AHver ou à quoi ressemble-t-il avec une flèche, avec un emoji avec plein de choses ? Nous avons besoin de différentes variantes de ce bouton. La façon dont nous pourrions le faire est de créer une variante. Nous cliquons ici et nous arrivons à ce bouton ici. Il est écrit « Ajouter une variante ». En cliquant simplement dessus, vous ajoutez une autre variante, essentiellement une autre version ou une variante de celle-ci. C'est dans le script original. Ce sont les originaux Une fois que vous avez pris ce bouton, je veux dire, cette version, copiez-le, contrôlez C, puis vous le collez Maintenant, il s'agit d'un composant enfant. Vous le savez probablement déjà si vous connaissez Figma Vous pouvez voir qu'il s'agit d'un carré creux ici. Cela signifie qu'il s'agit essentiellement du composant enfant. Ensuite, nous avons le composant principal. Comme vous pouvez le voir ici, lorsque nous changeons de couleur, la couleur changera également ici. Mais il s'agit d'une deuxième variation, est donc pas liée. C'est différent. C'est donc essentiellement ainsi que cela fonctionne. Vous pouvez donc avoir le bouton d'origine et cela affecte toutes les autres variantes. Vous pouvez avoir plusieurs copies, et elles seront toutes modifiées. D'accord ? Maintenant que nous l'avons écrit, nous le comprenons. Allons-y et continuons notre travail. Nous aimerions donc créer ici une variante différente. Je ne vais pas entrer dans les détails du prototypage, donc je vais juste mettre cela de côté pour le moment Mais généralement, lorsque nous avons un effet de survol, il fait généralement un peu plus sombre Pour vous faciliter la tâche, vous pouvez ajouter une couleur noire de 20 % ou 30 %, ou vous pouvez également la rendre plus claire. C'est également une possibilité. Vous pouvez également simplement changer la couleur à partir d'ici. Parfois, vous pouvez l'adapter davantage à vos préférences à l'aide de ces boutons, car il est plus facile choisir la teinte exacte que vous souhaitez. Peut-être que je pourrais le faire, peut-être que je pourrais même m'orienter davantage vers le bleu. Ça pourrait devenir un peu plus bleu. Cela dépend entièrement de moi. Maintenant que j'ai créé cette variante de survol, je peux également créer une variante laquelle nous avons appuyé dessus Non seulement nous avons survolé, mais nous avons cliqué dessus. Vous pouvez créer une autre variante ou simplement cliquer sur le signe plus ici, et nous pourrions même la rendre encore plus sombre. Comme vous pouvez le constater, il s'agit d'une version très simpliste. Nous pourrions ajouter des ombres, des bordures. C'est à vous de décider comment vous voulez le styliser. Mais je fais juste différentes variantes , mais je reste simple pour que vous puissiez comprendre. Une autre variante que nous pourrions créer est le bouton actif. C'est donc une question assez habituelle. Donc, en gros, cela veut dire que ce bouton ne fonctionne pas. Donc, si vous avez affaire au mode lumière, vous devez essentiellement conserver ce gris, juste pour montrer que cela ne fonctionne pas. Donc, juste pour vous montrer à quoi cela ressemblerait. Je vais les copier tous, les copier, et je vais les coller ici. Donc, en gros, cela ressemblerait à cela, et vous pouvez voir que le gris apparaît gris et semble inactif alors que celui-ci est rempli couleur, puis celui-ci est survolé et celui-ci est pressé Vous pouvez donc voir les significations à travers les couleurs. Et ici, la lisibilité n' est peut-être pas si importante car vous ne pouvez pas choisir ce bouton de toute façon Mais nous pouvons aller de l'avant et en faire, par exemple , un gris plus foncé. lisibilité est donc un peu meilleure et nous pourrions également rendre l'arrière-plan un peu plus clair. Oui, ça a l'air plus inactif. Maintenant, à titre de remarque, vous pouvez modifier le composant enfant, afin de pouvoir dire : « Vous savez quoi ? Je vais en faire un jaune, d'accord ? Et que se passe-t-il lorsque vous faites cela, lorsque vous modifiez le composant parent, cela ne changera rien. Donc, en gros, vous avez remplacé cette propriété. Vous avez décidé que cette propriété, la couleur, va maintenant être déconnectée du composant principal. Maintenant, c'est comme un enfant légitime. Il ne suivra pas ou ne continuera pas à suivre le parent, il suivra sa propre voie. Donc, en ce qui concerne le texte, il va toujours le suivre. En ce qui concerne le rembourrage, nous pouvons changer le rembourrage, il le suit toujours C'est juste la qualité que vous modifiez. Alors fais attention. Assurez-vous de ne pas changer qualité sans le savoir. Essayez de les modifier ici car, comme je l'ai dit, il doit s'agir du texte original, de l'œuvre originale, puis cela doit simplement le suivre. Sinon, vous aurez plusieurs variantes avec des couleurs différentes et cela va gâcher les choses. Les composants sont généralement utilisés pour maintenir l'ordre. Ils sont utilisés pour que vous puissiez suivre ce que vous faites. Vous ne voulez pas avoir 1 million de couleurs pour le bouton. Non, vous voulez avoir les originaux, puis ils seront utilisés de différentes manières dans votre design Je pense que c'est clair pour l'instant, mais nous devons comprendre, d'accord, nous avons toutes ces versions. Nous devons maintenant comprendre ce que nous ferions si nous voulons les étendre. Habituellement, vous avez un bouton principal, puis à partir du bouton principal, vous aurez peut-être une couleur différente. Allons-y et faisons-le. Je vais tous les copier, les copier et les coller. Je suis en train de les coller dans cette zone. Cela signifie qu'il s' agit également de variantes. Vous pouvez voir les variantes cinq, six, sept, huit. Maintenant, je vais changer de couleur. Je vais dire, tu sais quoi ? Un peu de jaune, c'est chouette. Mais si nous choisissons le jaune, nous devons faire le noir pour le bouton. Sympa. Voyons à quoi ça ressemble ici et ça n'a pas l'air trop mal. Cela devrait maintenant emboîter le pas. Je vais choisir ce jaune. Je vais y arriver et peut-être me tourner un peu vers l'orange. C'est l'ombrage. Comme je l'ai dit, c'est à vous de décider. Tu peux le rendre plus léger, tu peux le faire. Tu peux le faire comme tu veux, c'est à toi de décider et je vais le faire en noir. Peut-être que vous pouvez le changer, le rendre beaucoup plus lumineux , puis le rendre également plus lumineux. Alors là, je vais choisir la même couleur pour la rendre encore un peu plus foncée, plus orangée. Comme je l'ai dit, notre travail d' aujourd'hui dans cette leçon ne consiste pas à voir l'interaction, nous nous contentons de déterminer le composant Alors ici, peut-être que cela pourrait également être nivelé de la même manière. Il n'est pas nécessaire que ce soit si spécial. Nous n'avons pas à faire la différence entre les deux. C'est à nous de décider. Mais maintenant, nous avons un problème parce que cela s'appelle la variante huit, cela s'appelle la variante sept, six, je ne sais pas, elles sont partout. Nous devons trouver un système pour les nommer en gros. Comprenez-les. C'est donc à ce moment-là qu'il s'agit d' organiser votre composant, car au fur et à mesure que vous vous développez, vous avez différentes variantes et vous devez en assurer le suivi. Voici ce que je vais faire. Je dois dire que ce sont les boutons principaux et les boutons secondaires. Ce que vous allez faire, c'est choisir tout cela, vous allez écrire pour la propriété 1, secondaire. Et puis la propriété, vous allez dire type. C'est le type de bouton. Elles sont secondaires. Cela vous indiquera que les propriétés et les valeurs de ces variantes sont contradictoires. Modifiez les valeurs appliquées à cette variante pour résoudre ce problème. Le problème, c'est que tout cela secondaire, secondaire, secondaire. Figma ne comprend pas qu' elle dise : « Hé, vous ne pouvez pas toutes les placer au second plan, mais nous allons résoudre ce problème dans une seconde Appelons maintenant tous ces éléments primaires. Primaire. Vous voyez que ce type de variable est principal et que toutes ces variables sont secondaires. Mais il y a aussi une différence. Je veux dire, ce sont les états Hover, les états pressés, les états inactifs et les états actifs Alors, comment les différencier ? Eh bien, nous pouvons le faire comme suit. Donc, ce que nous pouvons faire c'est venir ici. Je veux dire, c'est comme ça que je le fais. Il y a probablement différentes manières de le faire. Je peux aller voir le nom. J'ajouterai une virgule et j'écrirai le statut Actif. Et cela va donc être actif. Ensuite, je vais choisir les deux et écrire, encore une fois, actif. Je vais les choisir et je vais écrire Hubbard, ceux-ci et Write Press, et ceux-ci, je vais les qualifier d'inactifs. OK. Maintenant, cette notification disparaît parce que la FIMA l' a découvert, nous avons pris le contrôle, nous comprenons la différenciation, et vous pouvez voir que les noms sont tous différents maintenant Aucun des noms n' est répété, n'est-ce pas ? Et ce qui est cool, c'est que lorsque vous passez au composant enfant, au composant enfant, vous pouvez le modifier. Vous pouvez modifier ce que vous voulez, qu'il soit actif, surligné, enfoncé ou inactif Vous avez accès à toutes ces variantes, et vous pouvez les choisir dans ce menu déroulant. Hein ? Voici donc comment vous pouvez essentiellement organiser vos composants au sein d'une variante. C'est donc essentiellement ainsi que vous pouvez organiser votre variance au sein d'un composant. Maintenant, il y a plus que cela. Comme je l'ai mentionné, peut-être que quelqu'un viendra et dira : « Hé, je voudrais ajouter, vous savez, une flèche. Ce serait vraiment bien, mais pas tout le temps. Parfois, j'ai envie d'avoir une flèche. Parfois, je n'ai pas envie d'avoir une flèche, non ? Parfois, tu sais, les flèches à droite, parfois à gauche. Voyons voir. D'accord ? Tout d'abord, créons une flèche très simpliste J'ai donc juste choisi l'outil linéaire ici, et je vais étendre la ligne. Je peux venir ici et dire flèche linéaire et de l'autre côté, je vais faire le tour. C'est donc très simpliste et ça s'intègre parfaitement. Je vais supprimer ce Control X, et je vais l'ajouter ici. Plutôt sympa, non ? Eh bien, annulons cela. Je veux le faire pour tout cela. Ce que je vais faire, c'est les sélectionner toutes, et je vais contrôler le collage. Maintenant, c'est collé partout ici. Mais c'est un peu le bordel. Nous devons trouver une solution. Nous devons l'organiser. Je vais juste les éloigner et je vais choisir cette flèche, celle-ci, celle-ci et celle-ci. Je vais les faire, en fait, pas celui-ci. Je vais choisir celui-ci, celui-ci, celui-ci, je vais les faire blancs juste pour qu'ils soient assortis. Maintenant, je vais leur donner la couleur de ce gris foncé. Allons-y. C'est bon. Maintenant, nous pouvons également ajuster d'autres choses. Je veux dire, la distance entre eux pourrait être un peu plus petite, peut-être quatre, et je pense que c'est suffisant. Mais comme nous l'avons mentionné, nous ne voulons pas que cela se produise tout le temps. Nous ne voulons pas qu'il y ait toujours ce petit truc. Que pouvons-nous y faire ? Nous ne voulons pas qu'il y ait toujours une flèche. Voici un petit truc sympa. Choisissez la flèche. Nous avons cliqué sur la flèche en ce moment Ensuite, ce que nous pouvons faire à ce sujet, c'est cliquer sur ce petit bouton, qui dit «  appliquer une propriété variable », puis cliquer sur le signe plus pour ajouter une propriété appelée Afficher la ligne deux. Je vais juste faire en sorte qu'il affiche une erreur. le moment, c'est défini comme vrai, mais je vais continuer et le rendre faux. Je vais créer la propriété. Comme vous pouvez le voir, ce qui s'est passé, c'est qu'il n'y a plus de flèche. Aucune flèche n'est disponible ici, mais elle se trouve toujours dans l'élément. C'est juste que vous devez choisir si vous voulez qu'il soit affiché ou non Je vais te montrer où il se trouve. C'est juste ici. Nous avons maintenant une bascule appelée Afficher la flèche. Lorsque nous cliquons dessus, il est là. Lorsque nous l'enlevons, il n'est pas là. Mais nous avons un problème car il n'est disponible que dans cette variante, pas dans les autres. Donc, ce que nous pouvons faire à ce sujet, c'est venir ici, choisir ceci , puis nous pouvons ajouter la variable ici et vous pouvez voir qu'elle figure déjà dans les propriétés. Il vous suffit de cliquer dessus ici. Je vais rincer et répéter. Je vais choisir toutes les flèches ici. Et je vais leur donner les mêmes biens. Cliquez ici, afficher la flèche, faux. Maintenant, ils ont tous cette bascule. Vous pouvez y ajouter une flèche si vous le souhaitez, ou vous pouvez la supprimer. Maintenant, nous personnalisons vraiment nos boutons dans une direction que j'aime beaucoup Nous pouvons aller encore plus loin. Que pouvons-nous faire ? Eh bien, nous pouvons les copier, les coller toutes, les mettre ici. Mais ce que nous allons faire, c'est créer des boutons fantômes. Les boutons fantômes sont essentiellement des boutons qui n'ont que des bordures. Nous allons copier ce code hexadécimal de cette couleur, le supprimer, et là, d'un trait, rincer et répéter, faites simplement la même chose pour les autres variantes ou c'est à vous de décider Vous pouvez l'ajuster comme vous le souhaitez. Comme il s'agit du survol, il se peut qu'il s'agisse d'un bouton fantôme. Lorsque vous le survolez, il est rempli, puis lorsque vous appuyez dessus, cela devient comme ça, c'est à vous de décider, mais nous pouvons modifier la version inactive Donc, juste comme ça. Nous allons faire la même chose ici, je vais le copier. Mettez le trait ici et la même chose ici. Copiez le code hexadécimal, mettez-le dans le trait. Nous avons maintenant ce que nous appelons des boutons fantômes , avec leur propre survol enfoncé et une variante active Ce que nous allons faire, c'est faire la même chose. Nous allons donc passer au nom, cliquer sur une virgule, puis dire que Ghost est égal à oui Nous allons choisir tous ces éléments ici et tous ces éléments ici. Tout en maintenant la touche Shift enfoncée, vous pouvez choisir plusieurs éléments en même temps, et nous allons dire « oui » aux fantômes, puis nous allons choisir ceux-ci et ceux-ci et écrire « non ». Maintenant, fais attention. Lorsque vous écrivez non avec un N ou un O ou quelque chose comme ça, cela apparaîtra sous une valeur différente, assurez-vous de l'écrire de la même manière. Maintenant, quand nous viendrons ici, vous verrez que le fantôme est également devenu un bouton à bascule Vous pouvez l'activer, le désactiver ou le désactiver. Sur chaque petite variante, vous pouvez en faire des boutons fantômes ou non. Mais vous pouvez voir notre erreur ici. Nous en avons fait un bouton fantôme, mais le texte est blanc. Nous devons régler ce problème. Le moyen de le faire est de venir ici, nous pouvons le rendre noir. Nous pouvons rendre le texte noir ou violet. Voyons voir maintenant. Allons-y. Juste comme ça. Nous avons maintenant appris à créer non seulement un composant, mais de nombreuses variantes du même composant. Nous apprenons à créer des versions avec survol. Je veux dire, en survolant les variantes, nous apprenons à rendre la variance pressée inactive la variance Nous apprenons à créer des variantes fantômes. Si vous faites attention, cela ressemble un peu à une table, et je peux vous le prouver. En gros, ce sont les versions actives. Cela pourrait vous faciliter la tâche. Les variantes actives ici ont le survol, la variance, et ici nous avons la variance pressée et ici nous avons la variance pressée et ici active Il s'agit essentiellement d'un tableau avec des colonnes et des lignes et nous pouvons faire la même chose ici. Ici, nous avons le principal, puis le suivant est le fantôme principal. Je vais juste écrire P ghost, puis secondaire, puis S ghost. Et ainsi de suite. Vous pouvez continuer à créer de nombreuses variables différentes ici pour vous assurer que vos boutons ont apparence et des aspects différents. Cela vous permet, lorsque vous concevez, ne pas gagner du temps au lieu de vous demander quelle couleur cela doit être. Quel type d' interaction avec le prototype dois-je avoir ? Devrait-ce être un fantôme ou pas un fantôme ? Non, tu n'as pas besoin de faire ça. Vous disposez déjà de toutes les variantes possibles dans votre design. Je sais que cela peut sembler beaucoup, mais ce n'est pas le cas, car il s'agit d'états de survol, d'états de presse, d' états actifs, etc. Cela semble donc beaucoup, mais ce n'est pas vraiment le cas. Gardez donc cela à l'esprit. Nous avons maintenant une dernière chose à discuter. Ce truc est très intéressant. C'est ce qu'on appelle des composants imbriqués. Désormais, les composants imbriqués sont essentiellement des composants à l'intérieur des composants. Comment est-ce que cela fonctionne ? Eh bien, permettez-moi de clarifier un peu. Ce que nous pouvons faire, c'est dire, vous savez, eh bien, parfois j'aimerais avoir une flèche, n'est-ce pas ? Mais d'autres fois, j'aimerais avoir un autre élément. Peut-être que cela pourrait être quelque chose de différent au lieu d' une flèche ou que ce pourrait être une flèche vers la droite vers le haut, vers le bas. C'est à moi de décider. Il pourrait s'agir d'une icône. Cela peut être beaucoup de choses différentes. Nous aimerions donc ajouter quelques icônes ici. Comment s'y prendre ? Eh bien, nous pouvons continuer et rechercher des plugins. Il existe donc déjà un plugin appelé material symbols fourni par Google. Cela nous aide donc à obtenir leurs icônes de base, et oui, des choses très simples. Donc, ce que nous pouvons faire, c'est en récupérer quelques-uns ici. Je vais juste en choisir quelques-uns. Peut-être pourrions-nous avoir une icône en forme de plus. Hum, nous pourrions avoir une icône d'appareil photo, et une icône de compte. Je sais que tu ne peux pas les voir parce qu'ils ont des couleurs différentes. Je vais donc aller de l'avant et les réduire un peu. Voyons à quoi ils ressemblent ici. Oui, je pense que c'est suffisant. Je vais aller de l'avant et créer un cadre à leur taille. Je vais lui donner une couleur, peut-être rouge pour le moment. Je vais en faire un composant, et je vais l' ajouter, m' assurer qu'il est centré verticalement et horizontalement. Ce n'est pas très centré, mais ça va. Lorsque vous avez affaire à de très petits éléments, il est difficile de les centrer, ne vous inquiétez pas. Nous pouvons maintenant en créer une autre variante. Au lieu de cet avantage, je vais le supprimer. Au lieu de cet avantage, je vais prendre cette photo, cet appareil photo et nous allons en ajouter une autre et faire la même chose. Au lieu du plus, je vais le supprimer complètement, puis ajouter cette icône de compte, puis ajouter celle-ci ici, la coller Bb. Maintenant, j'avais juste besoin du rouge juste pour voir correctement la couleur et voir le cadre, mais je n'en ai plus besoin, donc je vais juste supprimer la couleur rouge. Nous pouvons maintenant appeler cette icône ou ce glyphe ou quel que soit le nom que vous voulez Alors on pourra l'apporter ici. Et ajoutez-le au bouton. Juste comme ça, nous avons une icône dans le bouton. Maintenant, j'aimerais l'ajouter à toutes en même temps. Je vais juste le copier , je vais tous les choisir, et je vais le coller. Juste au moment où je le fais, juste avant de faire quoi que ce soit, je vais choisir parmi les options ci-dessous. Appliquer la propriété, ne pas afficher la flèche, ce sera l'icône affichée. Afficher l'icône. Pour l'instant, je vais laisser cela être vrai pour le moment. Ensuite, je peux procéder à l'ajustement. Ici, le bouton est noir, il devrait donc être noir et pareil ici. Tous les boutons ici sont noirs, les icônes doivent suivre les boutons. Ce n'est pas une règle, mais je pense que c'est une bonne chose à suivre. Maintenez votre quart de travail et choisissez-les tous. Ici, je vais copier le code. Maintenant que les couleurs sont toutes triées, même si les boutons ne sont pas à leur place, je vais choisir cet avantage et je vais cliquer ici, sélectionner les couches correspondantes, et il va sélectionner tous les avantages, toutes les icônes de ces variantes Ensuite, nous avons cette icône d'affichage, nous pouvons voir qu'elle montre l'icône. Maintenant que je les ai tous choisis, je vais cliquer ici, accéder à la propriété, et je vais le rendre faux, l' icône ne s'affichera pas automatiquement. Cela signifie que si je le souhaite, je peux afficher une flèche ou une icône. Ce qui est encore plus cool dans ce que nous avons fait avec cet élément imbriqué, que nous avons placé un élément, un composant d'icône, dans les composants du bouton. Maintenant je peux choisir ça. Je peux le choisir ici et je peux aller ici et modifier la variante. Je peux en faire une autre icône. Ici, il peut s'agir de télécharger une image, ici, de se connecter ou de créer un compte. Ici, cela pourrait être un signet. Nous avons maintenant beaucoup d' icônes que nous pouvons utiliser ou nous pouvons simplement les supprimer ou les masquer. Maintenant, une chose à savoir est importante, c'est que nous devons les étiqueter. Quand nous venons ici, nous pouvons dire « type » et « publicité » ou « plus ». Ici, vous pouvez dire caméra, plus membre ou utilisateur. Et un marque-page. Il est donc maintenant beaucoup plus facile de savoir quelle icône exacte vous utilisez lorsque vous parcourez cette liste. Surtout si vous avez une grande bibliothèque et que vous avez beaucoup d'icônes, c'est très pratique car vous pouvez comprendre, d' accord, c'est un c'est très pratique signet, c'est un utilisateur, au lieu d'avoir à cliquer dessus pour c'est un utilisateur, au lieu d'avoir à cliquer dessus pour voir quelle est la variante numéro 27 D'accord ? C'est donc essentiellement ainsi que cela fonctionne avec ces éléments imbriqués Donc, pour récapituler, nous avons commencé avec un bouton, un seul composant, puis nous en avons créé différentes variantes variante survolée, variante pressée et variante inactive À partir de là, nous avons créé une variante secondaire, puis nous avons commencé à apprendre les conventions de dénomination, donc comment créer différentes propriétés. Nous avons donc d'abord commencé par le type, donc primaire et secondaire. Ensuite, nous avons nommé tous les types d'état, donc actif, survol enfoncé et actif Ensuite, nous avons également configuré la propriété de la flèche. Nous avons donc pu créer une propriété et cacher au début ou peut-être la dévoiler Cela dépend entièrement de vous et vous aurez toujours la possibilité de l' activer ou de le désactiver. Mais j'aime faire en sorte qu'au début, vous n'ayez qu'un bouton, rien, aucune icône, aucune erreur, rien. Vous pouvez l'ajouter ultérieurement si vous le souhaitez, mais c'est à vous de décider. Nous avons ensuite appris à créer des composants imbriqués. Donc, créez des emojis par exemple, emojis, des icônes, des glyphes, ce que vous voulez, et vous pouvez les ajouter à votre bouton, puis vous pouvez les activer ou les désactiver, puis vous pouvez changer le type d'icône C'est aussi simple que cela. Ce qui est bien, c'est que si vous avez des interactions entre ces boutons, si ce bouton a réellement un effet de survol, un effet de pression , et que vous pouvez le configurer , comme nous le verrons dans les prochaines leçons, il conservera les mêmes propriétés Il aura le même emoji, la même icône car nous l'avons configuré ici pour qu'il ait une icône Ainsi, dans la variante survol, il y aura également la même icône Dans la variante pressée, il y aura la même icône. Et ainsi de suite. Il s'agit de la méthode la plus simple pour expliquer le fonctionnement des composants. Mais si vous comprenez cela, vous serez un maître. Vous serez en mesure de créer des composants en douceur, sans friction, sans problèmes. Mais le plus important est de veiller à travailler manière propre, car créer un système de design, créer un fichier de design sur figma, grand ou petit soit-il, peut devenir chaotique très rapidement C'est pourquoi il est toujours important de définir clairement et de manière claire vos propriétés, vos boutons, car cela ne vous aidera pas seulement dans votre conception, cela aidera également les développeurs qui vont prendre votre design et le transformer en réalité. Nous allons donc parler un peu plus des composants dans les prochaines leçons, mais ce sera davantage en arrière-plan. Jusqu'à présent, vous devez disposer de toutes les connaissances nécessaires pour créer des composants. Il y a maintenant beaucoup plus de possibilités avec ceux-ci. Vous pouvez créer des effets, c'est-à-dire créer de nombreuses variantes avec différentes variables, etc. Alors allez-y et essayez-le. J'espère que tu apprendras quelque chose, et je te verrai dans les prochaines leçons. 5. Les variables et les modes: Bonjour et bienvenue à une autre leçon du cours avancé de Figma Dans cette leçon, nous allons parler des variables, des modes et des styles. Maintenant, ce sont tous des concepts différents dont nous allons parler et dont vous avez peut-être entendu parler. Ils existent également dans le monde du développement. Donc, si vous venez d' une formation en ingénierie ou vous vous y connaissez un peu en codage, vous avez probablement entendu parler composants ou de jetons et de variables, vous comprenez comment ils interagissent les uns avec les autres. C'est essentiellement ce que nous faisons ici aujourd'hui. Pour expliquer cela, les variables très simples sont des choses qui ne sont pas des constantes. Ils sont en train de changer. Il peut donc s'agir d'un chiffre, d'un chiffre. Une fois, ce nombre est dix, une fois 20, une fois 30. Donc, juste pour vous donner un exemple, votre âge est une variable qui change chaque année, n'est-ce pas ? Cela peut donc changer chaque année : au début, votre âge est de un, puis de deux ans, puis trois ans, jusqu'à ce que vous ayez 20 ou 30 ans. Cela change avec vous et cela dépend d'autres circonstances, Cela change avec vous et cela dépend telles que le temps qui passe. La même chose s'applique ici à Figma, c'est un peu différent Nous avons donc plusieurs types de variables différents. La façon d'y accéder est de tout désélectionner et de passer ici aux variables Cliquez ici et vous constaterez qu'il n'y a aucune variable dans votre collection. Allez-y et cliquez sur Créer. Ensuite, vous allez voir qu'il y a ces quatre types différents, des variables de couleur. Vous pouvez donc avoir une variable d'une couleur spécifique. Vous avez donc du violet ici, du jaune, vous avez une autre couleur, soit un nombre qui change, comme nous avons parlé de l'âge, par exemple, ou cela pourrait être une chaîne. Les chaînes peuvent être du texte, par exemple, et le booléen est quelque chose d'un peu plus avancé, nous allons donc le conserver pour plus tard Commençons par la couleur, car je pense que c'est la variable la plus pratique que l'on puisse utiliser sur Figma, et c'est aussi la plus facile à expliquer Tout d'abord, il s'agit d'un design que j'ai fait auparavant et ce n'est qu'un exemple. Ce n'est pas un vrai design pour une vraie application, mais nous pouvons l'utiliser à nos fins. La première chose que vous voyez ici c'est qu'il existe une palette de couleurs spécifique. Vous avez la couleur violette ici. Il existe une version plus claire, une version plus foncée, avec quelques dégradés. Il y a du jaune aussi, et il y a ces couleurs ici. couleur la plus importante que nous ayons ici est la couleur primaire, qui est le violet. Vous pouvez l'appeler primaire, vous pouvez l'appeler violet. Cela dépend vraiment de vous, mais j'aime garder les choses au niveau secondaire, j'aimerais les appeler ainsi juste pour que ce soit très clair. Nous pouvons le sélectionner à partir d' ici et nous pouvons choisir ce principal. À l'heure actuelle, nous l'avons comme variable. Nous pouvons aller de l'avant et en créer une autre, que vous pourriez appeler lumière primaire. Il s'agit donc de la version allégée de ce primaire, puis nous pouvons la choisir ici. Nous pouvons choisir celui-ci. Alors maintenant, c'est la principale version allégée, d'accord ? Nous pouvons créer un secondaire. La variable secondaire est donc le jaune. Maintenant, vous savez, nous le choisissons simplement plus ou moins au hasard, mais nous pouvons choisir celui-ci, par exemple, qui serait plus précis. Et nous pouvons également avoir une version plus sombre, secondaire, vous savez, cela dépend essentiellement de ce que vous voyez ici. Ici, je vois qu'il y a une version plus foncée, donc je vais simplement cliquer sur I et utiliser l' outil en forme de goutte d'œil pour la sélectionner. Nous pouvons également le faire comme ceci ou nous pouvons faire en sorte que vous puissiez voir la lumière primaire, l'obscurité secondaire. Nous pouvons le changer, le rendre à la fois primaire, sombre ou secondaire. C'est à vous de décider comment vous voulez procéder. Nous pouvons le faire dès maintenant. Cela pourrait être notre principal et en voici la version sombre. Maintenant, nous avons tout compris. Nous pouvons faire bien plus. Nous pouvons faire du background, par exemple. C'est une bonne idée. Fond où vous pouvez simplement écrire BG et sélectionner l' arrière-plan ici. C'est blanc, assez simple, non ? Nous avons donc maintenant ces variables. Maintenant, comment les utilisons-nous ? Eh bien, vous devez associer les couleurs ici à ces variables. Pour ce faire, sélectionnez l'élément. Viens ici et au lieu de choisir un remplissage normal, tu vas cliquer sur ces quatre petits cercles, puis tu vas choisir la variable, qui ici est en noir primaire, il suffit de cliquer dessus. Maintenant, un moyen plus simple de le faire est de sélectionner l'ensemble du cadre et sélectionner les couleurs, puis de les sélectionner ici. Vous pouvez voir le violet clair ici, c'est la lumière principale. Vous pouvez voir ce fond blanc. Je vais juste cliquer ici sur PG. Il y en a aussi un autre ici, mais celui-ci est de 50 %, faites attention à cela. Vous ne pouvez pas vraiment ajouter 50 % à vos variables, vous devez donc laisser les choses telles quelles. Nous en avons beaucoup plus. Maintenant, les dégradés ne peuvent pas être utilisés comme variables C'est très triste car cela perturbe notre système. Ce que je vais faire maintenant, c'est autre chose, je vais changer tous les dégradés ou la plupart d'entre eux, et je vais leur donner des couleurs normales juste pour rendre les choses un peu plus faciles Je vais en faire notre secondaire et je vais en faire notre principal, choisir des choses. Vous pouvez voir qu'il y a du noir et gris, alors je vais juste écrire. gris, noir. C'est du noir absolu. Et je vais sélectionner à nouveau le cadre. Je vais choisir le noir pour celui-ci. Je vais également le rendre noir. Je veux dire, c'est gris foncé, mais je vais le rendre noir. Vous pouvez vous demander où cela se trouve et vous pouvez appuyer ici et vous pouvez voir qu' ils sont de cette couleur, par exemple. Non, je ne vois pas d'accord, voici les lignes. Nous pouvons les rendre gris, je crois, mais c'est trop gris, donc je vais créer du gris clair. Comme vous pouvez le constater, il s'agit d'un processus. Il s'agit de comprendre, quelles couleurs avons-nous ? De quelle couleur avons-nous besoin ? Et puis, voilà, il y a un accord. Ce sont donc différentes nuances de gris, et maintenant nous pouvons les créer en gris clair. Maintenant, nous allons sélectionner à nouveau, nous allons passer aux couleurs de sélection, et vous pouvez voir qu'il en reste quelques-unes. Je veux dire, on peut le rendre juste gris. C'est aussi juste du gris. Et pour les autres, voyons ce que nous pouvons faire à leur sujet. Je pense que nous pouvons simplement garder certains d'entre eux tels quels. Oui, nous n'avons pas besoin de tout changer. Nous avons maintenant toutes ces configurations. Ce qui est vraiment cool avec les variables, c'est que, comme nous avons parlé des composants , il y a un composant parent qui contrôle tous les autres composants enfants. Nous avons le même concept ici. Donc, ce que tu peux faire ici, c'est dire, tu sais quoi ? J'ai décidé de changer complètement le schéma. Au lieu du violet, je veux le rendre bleu. Vous pouvez continuer et rendre ce bleu, vous devez également le rendre bleu plus foncé, puis vous pouvez le rendre orange si vous le souhaitez. Faites-le également orange. Juste comme ça, nous avons changé beaucoup de couleurs ici, d'accord ? Donc, nous les laissons être parce que ce sont des cartes et qu'elles ont des dégradés, ce qui est difficile à changer Mais tout le reste, les couleurs principales que nous avons ici, les couleurs primaires ici, ont été en grande partie modifiées. part celui-ci, parce que c'est aussi un dégradé, mais je veux dire, nous pourrions également apporter cette modification ou nous n'en avons pas besoin. Je vais donc continuer et appuyer sur Ctrl Z tout remettre là où il était. Mais ce n'est qu'un exemple pour vous montrer ce que vous pouvez faire avec ces variables. Donc c'est vraiment cool. C'est donc une chose que tu peux faire. Maintenant, je vais vous montrer ce que nous pouvons faire avec d'autres types de variables. Je vais créer une variable numérique. Je vais le mettre de côté juste pour créer une bonne séparation entre eux. Je ne veux pas qu'ils soient mélangés. En ce qui concerne le chiffre, c'est un peu plus intéressant. En ce qui concerne les chiffres, c'est valeurs et vous vous demandez peut-être pourquoi j'en ai besoin ? Eh bien, une chose que vous pourriez utiliser, c'est que vous pouvez l'utiliser pour l' espacement, par exemple Si vous remarquez que la plupart d'entre eux se trouvent dans mises en page automatiques et que les mises en page automatiques ont généralement un espacement Vous pouvez voir ici qu'il y en a 16. Vous pouvez voir ici c'est 24, ici c'est Auto. Ici, vous avez zéro, mais entre les deux, c'est automatique. Ici c'est sept, par exemple, donc le truc c'est, je veux dire, voici sept, ici, c'est 12. Nous sommes donc confrontés à de nombreuses incohérences. C'est zéro, c'est sept, c'est 12. C'est donc quelque chose que nous pouvons essayer d'éliminer. Nous pourrions donc dire : OK, faisons en sorte que l' espacement entre le texte et les éléments soit de huit, n'est-ce pas Donc je ne sais pas, nous pouvons l'appeler exactement cet élément de texte ou quelque chose comme ça, et nous pouvons l'appeler huit, non ? Ensuite, ce que nous allons faire, c'est venir ici et nous allons en venir à l'espacement ici Désolé, ce n'est pas zéro, c'est cinq. Donc, au lieu d'en avoir cinq, nous allons cliquer sur cette flèche ici et nous allons cliquer sur Appliquer la variable pour choisir le texte plus l'élément. Maintenant, il est configuré comme huit, mais pas seulement comme huit. C'est un élément, il est donc connecté ici. Je vais juste appliquer exactement la même chose ici, appliquer une variable, puis choisir la variable que nous venons de créer. Appliquer une variable. Oh. Maintenant, nous l'avons configuré. C'est bien, si on décide, attends une minute. C'est particulièrement important parce que lorsque vous avez des clients, les clients vont toujours se plaindre, ils vont avoir leurs propres commentaires, et ils vont dire : «   Hé, l'espacement ici n'est pas très beau » ou peut-être que vos collègues de design, votre patron ou qui que ce soit d'autre pourraient dire le double, le faire doubler Tout ce que vous avez à faire est d'accéder à votre fenêtre de variables ici et il vous suffit de la modifier à partir d'ici. Il vous suffit de cliquer sur 16 et le bannir change partout. Mais ensuite, nous remarquerons, oh, non, maintenant, que vous ne pouvez pas savoir si vos cartes sont liées à l'élément ci-dessus ou à celui du dessous parce que c'est juste au milieu. Remettons-le, Control Z. Bam, c'est remis en place comme ça Nous pouvons le faire et le répéter beaucoup de fois pour plein de choses différentes, d'accord ? Mais vous pouvez dire que pour l'espacement, nous pouvons l'utiliser pour beaucoup de choses Mais ce qui est encore plus cool, c'est que tu peux venir ici. Et vous pouvez choisir cette icône de réglage ou d'édition et vous pouvez accéder à la portée. Maintenant, dans ce cadre, vous pouvez choisir où cette variable sera affichée. Maintenant, nous voulions que cela soit principalement utilisé pour les lacunes, les mises en page automatiques Ce n'est pas un contenu de texte, ce n'est pas un rayon d'angle, ce n'est pas une question de largeur et de hauteur, ce n'est rien de tout cela. Donc, en gros, nous pouvons simplement l'annuler, puis il le supprimera dans toutes les propriétés et nous allons simplement l'avoir dedans Donc, lorsque nous abordons un autre élément, par exemple, voyons voir. Je veux dire, accident vasculaire cérébral. Donc, si nous ajoutons un trait ici et que nous pouvons dire, voyons quel type de variables avons-nous ? Aucune variable n' a été créée dans ce fichier, et c'est exactement ce que nous voulions. Nous pouvons l'ajouter ici, et maintenant nous l' avons ici. Mais nous n'en avons pas besoin. OK ? Il s'agit donc simplement de comprendre que cet élément texte+élément est uniquement destiné aux lacunes. Nous pouvons continuer et supprimer le trait ici. Nous pouvons en créer un autre et nous pouvons dire rayon. Rayon d'angle, désolé, je viens de créer une variable de couleur. Je vais juste le supprimer. Nous allons donc créer un numéro un, que nous allons appeler rayon d' angle ou simplement rayon. Je vais voir quel type de rayon avons-nous ici ? Il en est 16, ici, il en est 16. Je vais juste en écrire 16. Et je vais choisir chacune d'entre elles. Je veux dire, idéalement, lorsque vous travaillez de manière propre, vous devriez déjà l'avoir fait dans un premier temps, d'accord ? Alors maintenant on arrive ici, on clique dessus et on choisit le rayon, bam, c'est configuré Si nous choisissons de ne lui donner que des angles vifs, nous pouvons simplement créer ce zéro et boum, maintenant il est configuré comme zéro, comme vous pouvez le voir. Juste comme ça. Je veux dire, pas tous les éléments, mais vous voyez l'idée. Comme nous l'avons déjà dit, nous pouvons vérifier la portée et nous pouvons tout décocher et dire que c' est uniquement pour le rayon d'angle C'est une fonctionnalité assez intéressante que vous pouvez utiliser pour toutes ces choses. Vous pouvez l'utiliser pour le trait, pour le texte, pour les effets, pour la hauteur de ligne, pour beaucoup de choses. Vous n'êtes pas obligé de le restreindre. Vous pouvez conserver dans toutes les propriétés prises en charge, mais cela va être assez compliqué. OK, c'est ce que vous pouvez faire avec ces variables numériques. Et puis nous avons des variables de chaîne. Maintenant, les variables de chaîne sont un peu moins utiles, à mon avis, mais je ne les utilise peut-être pas au maximum. Les variables de chaîne sont donc essentiellement des variables qui déterminent le texte que vous avez. Ainsi, lorsque vous avez du texte ici, par exemple, vous avez un chiffre, n'est-ce pas ? Vous pouvez cliquer ici. Et vous pouvez choisir de l' avoir sous forme de valeur de chaîne. La valeur de chaîne actuelle est une valeur de chaîne, mais vous pouvez dire que c'est 100$ et cela va la changer. Maintenant, c'est bon pour différentes raisons, mais c'est en gros une bonne chose si vous voulez avoir le même numéro ou le même texte à de nombreux endroits différents. Ensuite, au lieu d'avoir à les changer encore et encore, vous pouvez simplement les faire rester au même endroit comme ça. C'est ce qu'il faut pour les variables de chaîne. J'aimerais maintenant passer à l'étude de ce que nous appelons les modes. Les modes sont un autre aspect de cette fonctionnalité, un ajout, une extension à cette fonctionnalité, ce qui est vraiment cool. Et en gros, vous voyez toutes ces variables que nous avons créées. Il y a une table ici. agit en fait d'une table que nous pouvons étendre, et nous avons cette colonne, mais nous pouvons en ajouter une autre, et c' est ce qu'on appelle un mode. Nous avons donc maintenant deux modes, le mode un et le mode deux. Maintenant, il y a beaucoup d' utilisations différentes pour cela, non ? Mais l'utilisation principale ou l'une des meilleures que je trouve est de créer différents modes ou différentes combinaisons de couleurs ou le mode jour et le mode jour ou le mode nuit, n'est-ce pas ? On peut donc dire qu'il fait jour. Et c'est la nuit. Nous avons maintenant ces deux modes. Ce qui est cool, c'est que nous pouvons voir juste devant nous comment choisir ces différents modes et les afficher différemment. Je vais copier ce tableau de bord. Je vais le copier-coller. Je vais le copier-coller ici. Je vais venir ici, tu verras cette apparition. Vous allez cliquer sur Appliquer le mode variable, Collection 1, et je vais cliquer sur Nuit. Revenons maintenant à notre fenêtre de variables. Ce que nous allons faire, c'est changer le schéma de couleurs. Nous allons inverser certaines de ces couleurs, en particulier les blancs, les noirs et les gris. Nous allons les inverser. Tout le noir devrait maintenant être blanc et tout le blanc devrait être noir. Il n'est pas nécessaire que ce soit complètement noir. Cela peut être un peu gris foncé. La raison en est que nous avons des ombres que nous aimerions continuer à montrer ici. Ensuite, nous pouvons venir ici et dire que pour le gris clair, il doit être gris foncé. OK. Voyons voir. Vous le voyez ici. Tant qu'il est visible, il a rempli sa fonction, et alors ce gris devrait être plus clair. Vous pouvez voir que c'est le texte. Ce texte doit être lisible. Maintenant, nous les inversons. Vous pouvez déjà voir que cela a l'air plutôt chouette. Cela fonctionne, mais à certains endroits, ce n'est pas là, par exemple, ici, cela ne fonctionne pas parce que le noir ne fonctionne pas. Nous pouvons avoir plusieurs solutions. Une façon de résoudre ce problème est de s' assurer que ce texte blanc reste blanc. Au lieu de cela, vous pouvez les choisir au lieu de les connecter à ce BG, nous pouvons simplement le rendre toujours blanc. C'est une façon de le résoudre. Une autre façon de le résoudre est poursuivre dans cette obscurité et, en gros, de l'inverser. Nous allons fabriquer cette lampe et peut-être même plus légère que cela. Ensuite, nous allons faire en sorte que ce soit assez sombre mais pas trop sombre. Maintenant, vous pouvez voir que nous inversons également ces nuances. Mais cela ne fonctionne pas toujours de cette façon. n'y a pas de méthode unique parce que maintenant vous pourriez dire, eh bien, c'est un violet complètement différent de celui-ci. Il n'a pas la même identité. Vous avez peut-être raison, et nous pouvons donc passer à notre autre solution qui consiste à le rendre simplement blanc manuellement. Celui-ci ne change donc pas avec les modes. Je reste juste blanche. En règle générale, lorsque vous passez de la lumière du jour au mode sombre au mode nuit ou au mode sombre, vous devez rendre certaines couleurs un peu plus lumineuses. Ce violet n'est pas très beau quand il fait encore noir ici. C'est bien de le rendre un peu plus lumineux et pareil pour celui-ci. Tu vois ? Maintenant, cela semble cohérent. Cela n'a pas l'air si étrange, mais nous avons rendu ces violets beaucoup plus légers, cela a un but Il y a un objectif de visibilité. Maintenant, une chose que nous pourrions faire de plus est de rendre ces ombres un peu plus intenses car à l'heure actuelle, elles sont pour la plupart invisibles. Nous ne voyons pas la différence. Une façon de le faire est de les choisir de manière à ce que vous puissiez voir qu'il y a une ombre ici. Donc, ce que nous allons faire, c'est créer une variable et nous allons créer une variable numérique et l'appeler shadow. Il se peut que nous soyons en train de déterminer ce que devrait être cette variable. Ainsi, lorsque nous ouvrons l'effet des ombres ici, nous avons plusieurs choses. Nous avons du flou, nous avons une position et nous nous sommes étendus Voyons maintenant quels en sont les effets. Nous pouvons le faire se propager davantage. Nous pouvons le flouter davantage, lui donner plus de distance, mais nous ne pouvons malheureusement pas vraiment changer l'opacité C'est quelque chose que nous pouvons changer avec ces modes. Nous devrions donc soit choisir l'un de ces éléments pour le connecter à la variable, soit simplement le modifier manuellement. Cela dépend plus ou moins de vous. Ce que je peux faire, c'est que, comme solution de contournement, nous pourrions également leur donner un trait et lui donner une variable, sorte que vous puissiez dire « AVC Et ici, le trait en mode normal, je veux dire, connectons-le. Donnons-lui un coup de fouet. OK ? Il peut être gris très clair. Et puis quand il arrive ici, il peut être gris foncé. Maintenant, c'est généralement une bonne solution car elle garantit que l'ombre ne soit pas si invisible. Cela montre très clairement qu' il s'agit d'éléments spécifiques, cartes ou de boîtes. Ensuite, lorsque vous le passez en mode sombre, il est également toujours visible. C'est très visible. Mais au lieu de se fier uniquement aux ombres, qui sont plus difficiles à voir avec le mode sombre, ils s'appuient davantage sur ces bordures, et nous pouvons faire la même chose ici. Nous pouvons ajouter un trait et juste comme ça, maintenant nous avons un trait ici et là , ainsi que pour ces boutons. Donc, je vais juste l'ajouter ici. Et je vais les y emmener aussi. Très bien, nous avons maintenant deux modes différents, mode jour et le mode nuit ou mode sombre. Comme vous pouvez le constater, c'est ainsi que vous pouvez utiliser les modes à votre avantage de manière à transformer un design simple en deux types différents, deux combinaisons de couleurs différentes. C'est une fonctionnalité plutôt cool. Utilisez-le. Je veux dire, si tu en as besoin, utilise-le. Si tu n'es pas obligée. Mais ce qui est cool, c'est que vous pouvez toujours jouer avec ça. Vous pouvez toujours modifier l' apparence à partir d'ici. Vous pouvez passer de ceci à cela, ou vous pouvez le reprendre. Cela dépend entièrement de vous. Et laissez-moi vous montrer un autre truc. Vous allez donc continuer, fermer cette fenêtre et créer une section, créer une grande section. Ensuite, ce que nous allons faire, c'est intégrer ce tableau de bord, puis nous allons choisir la section, passer à l' apparence et faire en sorte que les choses se passent bien. Et regardez ce qui va se passer si je le retire d'ici. Il devient le mode jour ou le mode clair, puis ici c'est le mode sombre. C'est une astuce assez intéressante, et c'est vraiment sympa, car une fois que vous avez terminé tous vos écrans, tous vos designs, il ne vous reste plus qu'à les dupliquer et à les placer dans une section comme celle-ci, puis vous pourrez voir exactement à quoi cela ressemblerait en mode sombre. C'est ainsi que vous pouvez utiliser les variables à votre avantage, comme un maître ou un pro. Vous pouvez utiliser des variables de couleur. Vous pouvez utiliser des variables de chaîne. Vous pouvez également utiliser un certain nombre de variables, et vous pouvez les utiliser pour l'espacement. Vous pouvez les utiliser pour les couleurs, chaînes, tout ce dont vous avez vraiment besoin. Ils fonctionnent à merveille. Mais cette question se pose toujours. Pourquoi ai-je besoin de variables ? Eh bien, j'ai expliqué une part pourquoi vous en avez besoin parce que tout d'abord, vous pouvez changer beaucoup de choses à partir d'un seul endroit, une seule fenêtre qui décide de tout, n'est-ce pas ? La deuxième raison est que cela rend évidemment votre flux de travail plus facile et plus rapide, et cela permet à vous et au nettoyeur de savoir plus facilement ce que vous avez fait et quelles couleurs vous avez choisies au lieu d'avoir vos couleurs partout De cette façon, elles sont un peu mieux définies. Mais il y a aussi la question : pourquoi ne devrais-je pas simplement utiliser des styles, n'est-ce pas ? Si vous n'êtes pas familier avec les styles, nous les avons ici. Les styles sont un concept similaire. Cela vous permet de créer des styles de texte, des styles de couleurs. Mais en plus de cela, vous pouvez également avoir des styles d' effets et des guides de mise en page. Maintenant, permettez-moi de dire ceci. Je veux dire, les variables ne remplacent pas les styles. Essaie juste de te laisser emporter par ça, essaie de comprendre ça. Il ne s'agit pas d'un remplacement. Je pense que dans de nombreux endroits, les variables sont la bonne chose à utiliser, tandis que dans d'autres, il vaut mieux utiliser les styles. OK, alors laissez-moi vous expliquer, tout d'abord, si vous ne savez pas ce que sont les variables et quels sont les styles, nous avons déjà expliqué les variables, mais voyons ce que sont les styles. Désormais, les styles sont des moyens plus simples de l'utiliser pour utiliser des variables. Vous pouvez choisir une couleur et vous pouvez simplement donner une couleur et vous pouvez dire, c'est du violet, je vais le choisir comme style. Tu peux lui donner un nom. Vous pouvez ajouter une description si vous le souhaitez. Mais ce qui est bien, c'est que vous pouvez ajouter plusieurs couleurs différentes dans un style. C'est une chose que les variables ne peuvent pas faire et en plus de cela, vous pouvez créer un style qui soit également un dégradé. C'est quelque chose que les variables ne peuvent pas encore faire. Ainsi, lorsque nous créons un style de la même manière, il suffit de cliquer sur ces quatre cases, quatre cercles, et nous pouvons voir que ce sont toutes nos variables, puis nous avons également des styles ici. C'est donc quelque chose qui peut être utilisé, et il est utilisé de manière très similaire aux variables. Les styles et les variables sont donc très similaires. Mais la différence réside dans le fait qu'en matière de styles, vous ne pouvez pas avoir différents modes. Donc, tout comme vous avez des variables ici, vous avez tous vos styles ici. Vous pouvez donc les modifier à partir d'un seul endroit. Si vous changez d' avis et dites : « Hé, je veux changer le schéma de couleurs, je veux le rendre bleu ». Tu peux le faire. Tu peux le faire. Et si le style était défini ici, il se refléterait ici. Mais l'idée est que vous ne pouvez pas avoir de modes. Vous ne pouvez pas avoir le mode démo, le mode sombre, etc. C'est une chose, mais il excelle dans d'autres domaines. Ainsi, en ce qui concerne les effets, vous pouvez ajouter des effets entièrement créés. Vous pouvez avoir une ombre, un chiffre spécifique, opacité ou même une couleur spécifique Toutes ces choses sont des choses que vous pouvez configurer. Vous pouvez le remplacer par le bruit ou le flou des couches. Une fois que vous l'avez configuré, nous ne l'avons pas configuré, mais ajoutons un effet maintenant et nous allons le créer sous forme de style Maintenant, nous pouvons continuer et le choisir d'ici. Effets. Maintenant, nous avons Drop Shadow. Nous pouvons nous assurer que toutes nos ombres, par exemple, sont plus ou moins cohérentes dans le design. Les variables ne peuvent pas faire cela. Gardez cela à l'esprit. Nous avons également tous nos styles ici. Vous pouvez voir les styles de couleurs, les styles d'effets, et ce qui est encore plus cool, ce sont les textiles. Vous vous souvenez peut-être que j'ai dit, vous savez, que les variables de chaîne sont plus ou moins inutiles. Au moins, je n'ai pas de cas d'utilisation solide pour eux, et je pense que ce n'est pas le cas de la plupart des concepteurs , car la plupart du temps , vous savez, nous ne traitons pas beaucoup de variables numériques. Nous n'avons pas affaire à des variables de texte. Nous avons affaire à des couleurs, à des formes et à d'autres choses, et les variables de chaîne ne sont pas toujours utiles à cet égard. Mais ici, ce que vous pouvez faire, c'est configurer ces styles liés à la typographie Supposons donc que nous voulions conserver une typographie cohérente dans le design Comme vous pouvez le voir ici, les retours sont réguliers. Vous savez, c'est une police normale, puis celle-ci est en gras et plus grande, puis elle est plus petite, est en gras, elle est beaucoup plus grande, etc. Nous avons donc des styles différents. Peut-être que nous avons même des polices différentes. Donc, pour ce faire, vous pouvez créer un textile et vous pouvez dire, vous savez, je veux dire, voyons de quel textile il s'agit. C'est inter um, 16, et c'est Inter bold 24. Donc, ce que nous faisons, c'est aller de l'avant nous créons un style et nous le disons. Nous créons un style et nous disons que c'est Inter, qu'il devrait y en avoir 16 et que c'est normal, d'accord ? Nous pouvons même choisir, vous savez, la hauteur de la ligne, etc. Et on peut le nommer. Nous pouvons dire que c' est normal ou que c'est du texte. Et c'est très important lorsque vous voulez écrire des titres, n'est-ce pas ? Vous allez donc avoir le titre un, deux, trois, quatre, et nous l'avons ici. Nous en avons donc 24, donc nous pouvons aller de l'avant et créer un style ici. Qu'est-ce qui est sympa ? Je veux dire, tu n'es pas obligée de faire ça. Vous pouvez simplement venir ici, cliquer sur les quatre cercles et cliquer sur le signe plus. Vous pouvez simplement dire, enregistrez tous ces paramètres que j'ai ici et créez simplement un style à partir d'eux. On peut dire « H one ». C'est notre H un, puis nous pouvons venir ici et dire que c'est H deux. Encore une fois, cliquez sur les quatre cercles sur le H plus deux, et voici notre H trois. Très bien, créez le style. Ensuite, nous pouvons voir tous nos textiles ici. Nous devons les connecter ici. Ici, c'est connecté. Ce n'est pas connecté, nous allons juste le connecter ici pour envoyer un SMS. Alors ce que nous pouvons faire, c'est venir ici et nous pouvons dire, tu sais quoi ? J'ai décidé de faire en sorte que H one head one soit beaucoup plus grand. Je peux écrire 36. Bam, ça grossit ici. Je dirais que H deux ou H trois, c'est bien trop petit. Il est 12 ans. Passons à 16, vous pouvez voir que celui-ci a changé. Je veux dire, idéalement, nous devrions également configurer cela comme H trois et tous les autres également. Tu as compris l'idée. Les styles sont très similaires aux variables lorsqu'il s'agit de modifier des éléments à partir d' un seul endroit, mais les styles ont beaucoup plus de contrôle éléments différents, qu'il s'agisse des styles de texte, des styles de couleur ou des styles d'effets. Bien que les variables soient encore un peu limitées. Je veux dire, je me souviens que lorsque cette fonctionnalité est sortie pour la première fois, je pense qu'elle était plus ou moins en mode bêta. Il n'était donc pas très fiable ou stable. Maintenant c'est le cas, mais comme je l'ai dit, c'est encore un peu limité. Vous devez donc faire attention à cela et voir ce que vous pouvez utiliser, Vous devez donc faire attention à cela et voir ce que vous pouvez car je pense que les variables sont plus cool en ce concerne la couleur, peut-être en ce qui concerne les cordes, mais les styles sont bien ce qui concerne les textiles, ce qui concerne les styles à effets, car cela vous fait gagner beaucoup de temps et tu peux toujours revenir en arrière et dire, tu sais quoi ? Cette ombre n'a pas l'air belle. Je n'ai pas besoin d'aller de l'avant et de le modifier à partir de chaque élément. Je peux simplement le faire en appuyant sur un bouton. Je peux tout changer. Et oui, idéalement, vous ne devriez pas avoir une ombre appelée Drum Shadow. Vous devriez dire ombres de boutons, puis vous pouvez dire grandes ombres, ombres de cartes. Je ne sais pas, juste des ombres différentes pour les différents éléments ou effets que vous souhaitez afficher. Et oui, ce sont les principales différences entre les styles et les variables. J'espère avoir rendu cela compréhensible. Alors allez-y et essayez de travailler avec ces effets, essayez de travailler avec ces éléments, fonctionnalités, variables et styles, je veux dire. Mais pour être honnête, si vous pensez que votre projet n'a pas une telle portée et que vous n'avez pas besoin de variables ou de styles, vous n'êtes pas obligé de les utiliser. Je veux dire, je suggère toujours de travailler proprement. Utilisez donc des styles si vous le pouvez si vous avez le temps, surtout si votre entreprise a le budget pour cela. Mais si vous avez l'impression de ne pas créer des designs très rapides qui n'ont pas besoin d'être très cohérents, vous n'en avez certainement pas besoin. Essayez de mesurer vos priorités, de les comprendre. Devons-nous consacrer beaucoup de temps à définir les styles d' effets et créer un style cohérent qui se répète et qui est réellement cohérent, ou essayons-nous simplement de faire quelque chose de rapide et sale sans faire attention à C'est à vous de décider. J' espère que cela vous convient et je vous verrai dans la prochaine leçon. 6. équipe et organisation des fichiers: Bienvenue à une autre leçon du cours avancé Figma. Dans cette leçon, nous allons parler des fichiers d'équipe et publication de fichiers d'équipe afin d'avoir des composants dans différents fichiers et de les partager avec votre équipe. Permettez-moi de vous expliquer ce que je veux dire. Ce que nous avons fait dans les leçons précédentes, si vous ne les avez pas examinés, vous pouvez aller les consulter maintenant. Nous avons essentiellement créé des variables, nous avons créé des composants avec différentes variantes et nous avons également créé des styles, et ce sont tous des concepts différents. Mais ils sont tous liés les uns aux autres d'une très belle manière car la cohérence est un élément essentiel de leur utilisation. Ainsi, lorsque vous travaillez sur un projet spécifique, disons qu'en ce moment, nous créons application financière comme vous le voyez ici, alors nous voulons probablement créer plusieurs fichiers, ou peut-être dans le même fichier, nous aimerions avoir les mêmes composants, les mêmes styles, etc. En gros, pour recréer et maintenir cette cohérence entre les fichiers Figma, nous aimerions pouvoir les rétablir. Maintenant, le moyen le plus simple de le faire ou le moyen le plus direct serait de copier quelque chose et de le coller. Ainsi, lorsque vous avez vos boutons ici, vous pouvez les copier et simplement les coller dans les autres documents. Mais cela peut être fatiguant. Je veux dire, au début, cela semble être le plus simple, mais ce n'est pas le cas. Ce qui est en fait plus logique, c'est de les partager, c'est-à-dire de les publier dans la bibliothèque de votre équipe. La façon de le faire est d'aller ici, vous avez donc deux onglets ici. Vous avez votre dossier et vos actifs. Maintenant, le fichier vous montre les pages que vous avez ainsi que les couches. Maintenant, vous pouvez également les réduire, afin de pouvoir les masquer si vous le souhaitez. Nous allons passer aux actifs. Les actifs Sab vous montrent tous les différents composants, styles, variables que vous avez ou plus facilement exprimés, il vous montre toutes les bibliothèques que vous avez enregistrées Maintenant, vous pouvez voir quelques bibliothèques que j'ai ici et c'est parce que nous les avons vues sur la page de la communauté. Je les ai vus. Ils sont accessibles au public, et je les ai ajoutés. Je peux aller de l'avant et passer à iPadOS 26, par exemple, il y a un kit d'interface utilisateur, ce qui m'a permis de voir tous les composants contenus dans ce kit À partir d'ici, je peux intégrer ce que je veux à mon dossier de conception actuel. Je peux dire Face ID, laissez-moi obtenir le Face ID, afin je puisse l'insérer et juste comme ça, j'ai une instance de Face ID, qui a différentes variantes, par exemple, le succès de l'authentification, etc. Nous pouvons faire la même chose qu' Apple avec ses UIKits La façon de le faire est de continuer et de cliquer sur ce bouton. Choisissez donc vos bibliothèques, et vous verrez ici des actifs créés dans ce fichier. Il y aura donc des actifs limités à ce fichier. Il s'agit, encore une fois, des styles, des variables et des composants, puis des bibliothèques sont ajoutées à ce fichier. Je peux les supprimer s'ils sont trop gênants et je ne veux pas les utiliser. Par exemple, je ne pense pas que je vais utiliser WatRos 26 ou Vision OS Je peux donc simplement les supprimer d' ici ou les ajouter Mais alors, si vous avez déjà créé un ensemble de composants dans ce fichier et que vous souhaitez publier, vous allez continuer et cliquer sur Publier. Donc, il va vous dire ici, je veux dire, pour l'instant, c'est déjà publié, mais normalement ici, il vous indique les modifications, n'est-ce pas ? Il vous montre donc ce que vous avez ajouté. Donc, ce que nous avons ajouté, je veux dire, avant, n'a pas vraiment été publié. Nous avons ajouté notre collection de variables, et cela montre que nous avons 12 variables modifiées. Ensuite, il y a les styles. Cela vous montre donc que j'ai ajouté du textile H un, du textile, du style H deux, du style H trois. Nous avions un style en termes de styles, nous avons ajouté un dégradé, nous avons ajouté un drop shadow. Nous avons fait la plupart de ces exercices lors de la dernière leçon. Alors que nous parlions de styles et de variables. Comme vous pouvez le constater, il y a les variables, les styles et les composants. À ce jour, nous n'avons créé que deux composants , à savoir le bouton et l'icône. Cela vous donne la possibilité de supprimer n'importe lequel d'entre eux pour dire : « Vous savez quoi ? Je ne souhaite pas partager les composants car ils sont spécifiques à ce fichier. Mais j'aimerais partager, par exemple, celle de la collection. J'aimerais partager les variables qu'il contient, et vous pouvez voir quelles variables vous avez, lesquelles sont ajoutées et lesquelles ne le sont pas. Je pense qu'ils ont tous été ajoutés. Vous pouvez tous les voir ici. Encore une fois, vous pouvez choisir tout désélectionner sans vraiment publier quoi que ce soit, ou vous pouvez tout ajouter Nous allons aller de l'avant et les publier. Il dit qu'il publie une bibliothèque. Cela va prendre un certain temps. Parfait Il est maintenant publié. Ici, nous ouvrons un nouveau fichier de design, et lorsque nous allons dans les bibliothèques, nous ne trouvons pas notre propre bibliothèque. Nous allons donc simplement ajouter d' autres bibliothèques et nous allons passer aux équipes et vous allez trouver au sein des équipes, vous allez trouver une bibliothèque indépendante. Vous pouvez l'ajouter à ce fichier s'il n'est pas déjà ajouté. Juste comme ça, en cliquant dessus, vous accéderez à tous les composants disponibles. De plus, vous pouvez également utiliser le style. Si nous créons n'importe quel type d'objet ici, je peux continuer ici et je vais voir ici toutes les différentes bibliothèques. Maintenant, nous n'avons pas donné de nom à notre bibliothèque, alors peut-être devrions-nous le faire, pour être honnête. Si nous venons ici, nous allons à la bibliothèque et nous pouvons simplement changer le nom ici pour pouvoir dire Finance app. Et puis ici, il est écrit Finance app. Ainsi, lorsque nous ajoutons un style ici, nous voulons ajouter un style. Donc, il va dire que c'est l'application Finance. Vous pouvez donc voir toutes nos variables ici, ou les variables de couleur, ainsi que notre style ici, qui n'était qu'un dégradé. Donc, lorsque nous ajoutons du texte, nous ne faisons que le tester. Alors bonjour tout le monde. Je peux vérifier la typographie et je vais voir mon application Finance, les styles de typographie Maintenant, bien sûr, je peux voir tous les autres systèmes auxquels j' ai ajouté : les interfaces utilisateur, les bibliothèques. Mais pour le moment, nous n'avons besoin que de celui-ci, celui que nous avons créé nous-mêmes. est ainsi que nous avons créé une bibliothèque d'équipe, nous avons publiée, et nous avons pu l'utiliser dans un autre fichier. C'est aussi simple que ça. Mais ce qui est plus cool, c'est quand on arrive au travail ici et qu' on décide, tu sais quoi ? Permettez-moi de créer un autre composant. Je veux dire, laissez-moi créer ce truc ou peut-être l'un d'entre eux, je vais en faire un composant, je clique simplement ici et je dis « statistiques », non ? Alors je peux me rendre directement dans mes bibliothèques. Et puis ici, il est question d'un changement. Il assure le suivi des modifications que vous effectuez. Un changement car nous avons créé un composant. Créons un nouveau style, que ce soit une couleur. Nous allons juste faire ce gris et le créer sans nom, donc il suffit de mettre le code hexadécimal Ensuite, nous vérifions , puis il est indiqué deux modifications. Vous voyez, cela garde une trace lorsque nous en venons aux variables . Dans le dernier exemple, nous allons ajouter une variable de chaîne. Nous n'allons pas le mettre dedans, nous allons juste l'y écrire. Et maintenant, nous allons vérifier. Encore une fois, il y a trois changements. présent, vous devez accepter ou publier manuellement ces modifications pour qu'elles soient prises en compte. Je vais donc procéder à la publication et je vais tous les choisir. Je peux choisir et dire : « Hé, tu sais quoi ? Non, je ne veux pas que des statistiques soient prises. Je ne veux pas que cette couleur soit prise. Je ne sais pas pourquoi ni dans quel cas, quelqu'un en déciderait. C'est vraiment à vous de décider de vos propres cas d'utilisation. Peut-être déciderez-vous que cela ne devrait pas faire partie du système. C'était quelque chose en dehors de tout ce système de conception. C'était peut-être par erreur. Donc, vous voulez savoir, excluez-le, c'est à vous de décider. Vous pouvez voir ici que tous les styles et variables inchangés sont également répertoriés ici juste pour votre information. Ensuite, nous pourrons procéder à sa publication. Nous avons maintenant un nouveau composant, un nouveau style et une nouvelle variable. Voyons maintenant à quel point c' est rapide. Pendant que nous vérifiions. En 3 secondes, il a été mis à jour. Après 3 secondes d'attente, il a été mis à jour et je peux l' apporter ici, comme Dragon Drop où je peux cliquer dessus pour voir la collection. Je peux voir à quoi cela ressemble au mode sombre de démonstration, et pareil ici, je peux vérifier toutes les instances. Cela ressemble plus à une fonctionnalité de prévisualisation si vous voulez voir, eh bien, laissez-moi y jeter un œil. Qu'est-ce que je peux faire ici ? Ensuite, vous pouvez vérifier à quoi cela ressemble, puis vous pouvez insérer l'instance. Mais pour être honnête, je pense que c'est un chemin plus long et plus long. Je préfère de loin le faire glisser, le déposer, puis l' ajuster comme je le souhaite. Rendez-le secondaire, actif, cependant, comme je veux. C'est essentiellement ainsi que vous pouvez utiliser les bibliothèques d'équipe à votre avantage, pour publier vos modifications lorsque vous avez effectué des modifications pour les publier au début. Ensuite, au fur et à mesure que vous apportez des modifications, vous pouvez publier à nouveau ou publier ces modifications En particulier, vous pouvez utiliser et réutiliser la bibliothèque Steam dans vos fichiers. C'est probablement très rassurant pour de nombreuses personnes, de nombreux designers qui aiment travailler sur différents projets et aimeraient avoir les mêmes éléments, qu'ils appartiennent à la même identité de marque ou que ce soient des éléments spécifiques que vous avez conçus qui pourraient fonctionner dans différents projets Vous n'avez pas besoin d' un bouton qui ne doit pas toujours être conçu de manière très unique et incroyable. Vous pouvez l'utiliser et le réutiliser. Cela dépend de vous, cela dépend de votre flux de travail, de la façon dont vous aimez travailler. Mais cette fonctionnalité a été plus ou moins pensée en termes d'un seul projet. Vous avez un projet dans lequel vous avez, disons, quelque chose qui ressemble beaucoup à des kits d'interface utilisateur. Il faut donc que ce soit un kit d' interface utilisateur cohérent comme IOS 26, puis vous avez un seul bouton ou, en termes de boutons, vous avez plusieurs boutons, donc il y a du verre liquide, des boutons normaux. Et lorsque vous cliquez dessus, vous verrez de nombreuses options. Je veux dire, est-ce que c'est teinté ou non ? Est-ce le mode clair ou le mode sombre ? Cela vous montre s'il est activé ou désactivé ? Oui, et tu peux choisir les couleurs. C'est très intéressant à voir et à regarder. Je veux dire, évidemment, cela n'a pas l' air très beau ici, mais je pense qu'une fois que nous l'aurons placé, il serait beaucoup plus logique ces paramètres sont réellement en train de changer. J'ai l'impression que cette fonctionnalité qui consiste à le voir, prévisualiser votre bouton ou votre élément ne fonctionne pas toujours parfaitement Vous devriez donc simplement le glisser-déposer et voir à quoi il ressemble, surtout s'il a un flou d' arrière-plan comme celui-ci, c'est agréable de voir à quoi cela ressemblerait Je veux dire, c'est un effet de verre. Vous pouvez voir à quoi cela ressemble avec quelque chose en arrière-plan, et nous pouvons voir ici les différentes possibilités. Oui, c'est plutôt sympa. Pour terminer, dans cette leçon, nous avons appris à publier notre bibliothèque, la bibliothèque de notre équipe. Cela implique de publier nos variables, styles et nos composants. Cela nous permet de les publier dans un fichier accessible dans différents fichiers, et nous avons appris comment mettre à jour cette bibliothèque en mettant à jour les composants. Ainsi, au fur et à mesure que nous travaillons et modifions ces composants, ces styles variables , nous pouvons simplement les mettre à jour et les republier. Nous avons appris à placer ces composants dans n'importe quel autre projet de conception Bien entendu, elle a ses limites. Je veux dire, vous ne pouvez pas le faire dans un autre compte ou dans une équipe complètement différente à moins que cela ne soit publié et ajouté. Ainsi, par exemple, nous pouvons ajouter des éléments provenant d'IOS parce qu'ils sont accessibles au public. Mais si vous étiez dans un compte complètement différent, vous devriez accéder d'une manière ou d'une autre à cette bibliothèque, elle doit donc être partagée d'une manière ou d'une autre. Mais si vous utilisez le même compte, vous pouvez simplement l'ajouter à partir d'ici, ajouter d'autres bibliothèques, et vous pouvez le trouver les bibliothèques de votre équipe ici. J'espère donc que vous avez appris quelque chose d'utile et que vous utiliserez cette fonctionnalité comme bon vous semble, condition qu'elle vous aide à atteindre vos objectifs en tant qu' équipe et qu'elle améliore un peu votre flux de travail. Merci beaucoup, je vous verrai lors de la prochaine leçon. 7. Mise en page automatique en profondeur: Bonjour, et bienvenue à une autre leçon. Dans cette leçon, nous allons parler du responsive design. Plus précisément, nous allons parler de certains comportements. Il s'agit des paramètres ou états fixes d'étreinte et de remplissage. Je ne sais pas comment on les appellerait. Ils sont un peu difficiles à définir et à comprendre. Je pense que beaucoup de designers ne connaissent malheureusement pas cette fonctionnalité. Ils ne l'utilisent pas beaucoup, mais c'est votre première et la plus cruciale étape en matière de design réactif. Essayez d'écouter ce que je dis, essayez de le comprendre, de le comprendre, si vous n'essayez pas de réécouter. Je vais essayer d'expliquer cette leçon le plus simplement possible, mais n'hésitez pas à poser des questions si vous ne comprenez pas plus tard. C'est quelque chose qui prend du temps à comprendre et qui ne s'obtient qu'avec de la pratique. Tout d'abord, discutons de ce que signifie le design réactif. Le design adaptatif est ce que nous appelons, vous savez, une application ou un site Web ou quoi que ce soit d'autre, lorsque vous êtes capable de l' étirer vers la droite et vers la gauche, et, vous savez, il change tout seul en conséquence. Donc, pour comprendre cela, je veux dire, nous pouvons examiner cela dans Figma Nous avons donc le menu latéral. Vous savez, on peut l' étirer vers la droite et vers la gauche, et il conserve les mêmes éléments. Aucun élément n'est perdu ou supprimé. Mais parfois, vous savez, s'il y a un long texte ici, il sera peut-être écourté. Ce n'est pas un problème. De même, nous avons la même chose ici. Certains éléments s' allongent tandis que d'autres conservent la même taille, mais certains sont alignés à droite, d'autres sont alignés à gauche, etc. Nous pouvons même modifier la taille complète de cette fenêtre. Si nous ouvrons Figma, nous pouvons changer la taille complète de Pigma, et cela aura toujours du sens Il affichera toujours toutes les informations pertinentes dont nous avons besoin. C'est exactement ce dont nous parlons. design réactif est la capacité d' un design à s'adapter à différentes tailles d'écran, à différentes conditions qui rendent plus petit, plus grand, plus large. Plus maigre, quel que soit le nom que vous voulez. Pour comprendre cela, nous devons d'abord comprendre ce concept ici, qui concerne les mises en page automatiques Nous avons ici un câlin fixe. Ce à quoi je fais référence plus spécifiquement, c'est à ce bouton. Nous avons des boutons ici. Il s'agit du même composant que celui que nous avons créé plus tôt dans le cours. Maintenant, il s'agit essentiellement d'un cadre doté d'une mise en page automatique, et ce cadre doté d'une mise en page automatique contient un élément de texte. Ignorez la ligne, ignorez l'icône, elles sont masquées. Nous avons juste un cadre qui a une mise en page automatique. Il contient un élément de texte. Ce que nous allons faire ou ce que j'ai déjà fait, c'est que j'ai défini l'élément de texte ici pour qu'il soit corrigé. Il a une largeur fixe, et nous pouvons également lui donner une hauteur fixe. Alors voilà, nous avons un câlin. Ici, il y a un câlin pour la largeur et un câlin pour la hauteur. À noter que vous ne pouvez effectuer ces réglages que lorsque vous avez un élément. Peu importe qu'il s'agisse d'un élément de texte, d'un objet, d'une ligne de forme ou autre, il doit se trouver dans un cadre avec une mise en page automatique. Donc, si nous créons un texte ici et que nous y ajoutons du texte, vous ne pouvez pas le faire correspondre ou le remplir. Ce n'est pas disponible. Mais lorsque nous arrivons à ce texte, nous pouvons choisir une largeur fixe, un câlin ou un remplissage. Ce sont les choses auxquelles je fais référence. Ensuite, nous avons le rassasiement, et pour la hauteur, nous avons un câlin, ce qui n'a pas d'importance pour le moment. Je veux dire, nous nous concentrons juste sur la largeur maximale, d'accord. Alors, qu'est-ce que cela signifie exactement ? Eh bien, réparer est tout à fait compréhensible. Cela signifie essentiellement qu'il a une largeur et une hauteur fixes. Ainsi, quel que soit le texte qu' il contient, ses dimensions ne changeront pas. Alors testons cela. Je vais donc dire ici, abonnez-vous maintenant. Donc, comme vous pouvez le voir, la boîte elle-même, la zone de texte, n'a pas changé ses dimensions. Ce qui se passe, c'est que le texte ne va pas droit, il descend, il s'enroule, d'accord ? Et ça sort des sentiers battus à cause de cette limitation, non ? Il s'agit donc clairement d'un cas de mauvaise correspondance ou d'inadéquation En gros, vous avez mal configuré les paramètres et les dimensions de ce bouton. Il ne se comporte donc pas d'une manière réactive ou, vous savez, peut-être pas réactive, mais d'une manière correcte Maintenant, en venant ici, nous en avons plein. Nous avons donc ce bouton de remplissage, et nous allons écrire la même phrase ici. Nous allons écrire «   Abonnez-vous maintenant ». Maintenant, ce que vous remarquez ici, c'est que nous avons un comportement différent, un résultat différent du correctif. Maintenant, nous avons dit qu'il devait être rempli. Ce que cela signifie essentiellement, c'est remplir l'espace autant que possible. Étendez-vous autant que le cadre vous le permet. Maintenant, le cadre ne vous permet pas grand-chose. C'est essentiellement limité. C'est réparé. Mais en attendant, la hauteur est énorme. C'est conçu comme un câlin. Donc, un câlin signifie que vous pouvez étendre autant que vous le souhaitez. Donc, comme nous avons écrit s'abonner de temps en temps, le cadre est limité, donc le texte a été supprimé, mais la boîte est tombée avec. Le cadre est parti et l'a encore enveloppé. Comme vous pouvez le constater, ce sont là les différences, certaines des différences. La façon dont la boîte se comporte indique que c'est la zone de texte, elle ne change pas Le texte va quitter la zone de texte parce qu'il n'y a nulle part où il se trouve, mais nous n'allons rien changer. Les tailles seront toutes les mêmes. C'est une méthode très statique. C'est mort. Il ne réagit en aucune façon. Ici, c'est un peu mieux, car même si le texte n'était pas affiché comme nous le souhaiterions, il est tout de même tombé et la boîte est tombée avec lui. La taille du bouton a été ajustée en fonction du texte. C'est un petit peu mieux. Mais j'aimerais que vous remarquiez ce qui se passe lorsque j'étends la boîte. Comme vous pouvez le constater, maintenant, la boîte a pris forme, la forme a évolué et est devenue normale. La zone de texte a retrouvé sa taille normale. En attendant, lorsque nous prolongeons celui-ci, rien ne se passe. Pourquoi ? Parce qu'il a une taille fixe. Cela ne changera pas quoi qu'il arrive. Mais ici, il est configuré comme rempli. Il dit en gros que s'il y a de la place, je vais étendre mes jambes. S'il n'y a pas de place, je vais être à l'étroit ici. C'est exactement ce qui se passe. C'est exigu, mais ici il y a de la place, donc ça s'étend C'est ce qui se passe. Maintenant, vérifions ce bouton ici. Voyons ce qu'il fait. Nous avons le bouton ici configuré comme un câlin. Ce qui se passe ici serait de s'abonner maintenant. comportement est parfait parce que le texte ne descend pas car en règle générale, boutons ne devraient pas avoir plusieurs lignes. Idéalement, je ne devrais pas être abonnée, puis sur la ligne suivante, il ne devrait pas y avoir plusieurs lignes ou autre Vous pouvez voir que ce bouton va de pair. Le cadre du bouton s'étend avec lui. C'est l'une des différences que vous avez, et cela concerne non seulement objets de texte ou les éléments de texte, mais également tous les types d'éléments ayant le même comportement. Récapitulatif. Nous avons corrigé Hug and Fill. Fixed permet à la taille du texte de rester exactement la même tandis que Hug s'étend avec le texte. Mais il y a un problème avec Hug c'est que vous pouvez écrire à l'infini. Il ne baissera jamais. Cela pourrait poser problème plus tard car que se passerait-il si vous avez un élément très, très long ? Il devrait baisser à un moment donné. Mais pour ce cas d'utilisation spécifique, nous avons ici un bouton. Vous savez, en règle générale, votre bouton ne devrait pas être trop long. OK ? Ce n'est donc pas un problème pour ça. Phil, vous savez, est intelligent parce qu'il reconnaît les limites du cadre. Cela ne va pas au-delà de la limite. C'est donc l'idéal, mais pas quatre boutons. Ce n'est donc qu'un résumé. Et ce qui est bien avec le câlin, que vous n'avez pas besoin d'ajuster le cadre, n'est-ce pas ? Le cadre est déjà en cours de réglage tout seul. Donc, si vous supprimez quelque chose, il sera ajusté. Pendant ce temps, avec le remplissage, si vous supprimez quelque chose, le cadre ne suit pas Vous devez donc le faire vous-même, ce qui n'est peut-être pas très précis et ce n'est pas génial. Tu fais tout en deux étapes. C'est là l'une des principales différences. Vous pouvez vous entraîner et vous pouvez voir les limites de la zone de texte, non seulement en ce limites de la zone de texte, qui concerne l'aspect général, mais aussi en regardant la zone de texte ici, corrigée ici Cela s'est passé. Je n'arrêtais pas de tirer sur les éléments S'il y avait plus de texte, il le serrait dans ses bras, il le contenait Pendant ce temps, ici, il est en train de le remplir, mais tant que le cadre a de la place. Écoutez, même si le texte est à la hauteur, l'élément de texte va au-delà, il va jusqu'à la fin du cadre, et c'est ce que signifie le remplissage. Remplissez tout l'espace. S'il y a de l'eau, remplissez toute la zone avec ce que vous voulez. C'est ce qui se passe ici. Pensez-y , pensez-y en ce terme. S'il y a de la place, s'il y a une bouteille, elle sera remplie. Passons maintenant à autre chose et essayons de créer nos propres éléments. Je tiens simplement à vous rappeler que ce n'est pas si facile, car vous avez le cadre qui contient également un contenu fixe ou câlin, et puis vous avez également les éléments qu'il contient, qui ont également des options de réglage ou de remplissage fixes. Ce n'est pas si simple. Mais essayons de l' expliquer un peu plus. Voici donc une carte. Cette carte vous indique donc un avis, le nom, le nom de famille et le contenu de l'avis, le véritable avis. Ceci n'est qu'un exemple de ce à quoi pourrait ressembler un avis. Maintenant, copions-le et donnons-lui un nom. C'est ce qu'on appelle une évaluation, et nous allons la mettre dans ce petit cadre ici, accord ? Nous allons l' agrandir. Et ce que nous allons faire maintenant, c'est que nous aimerions le tester un peu, n'est-ce pas ? Je vais donc écrire un nom ici et ce nom devrait être Jonathan Simpson, frère John. Je ne sais pas, j'écris juste des trucs. Ensuite, vous allez remarquer, attendez une minute, ce n'est pas approprié. Je veux dire, ça quitte le cadre. C'est un problème parce que nous avons ici plusieurs éléments à examiner sur l'anatomie, il y a un cadre ici. Tu peux le voir. Il s'agit du cadre principal. Ensuite, il y a un élément de texte, puis un autre cadre avec une mise en page automatique. Ce cadre comporte un cercle, une ellipse et un élément de texte, puis vous avez le contenu de la révision, le cadre principal possède une mise en page automatique avec trois éléments, le texte, le cadre 1 et le contenu de la révision Vérifions-le et essayons de comprendre où est le problème. Le principal problème qui se pose ici est donc que cela s'étend trop. Donc, pour y remédier, nous devons cliquer sur cet élément et voir ce qu'il contient ? Eh bien, il y a un câlin. Le contenu du câlin le fait s'étendre, continuer et continuer. accord ? Voyons maintenant ce qui se passe lorsque nous le corrigeons. Maintenant, ce qui s'est passé avec Fixed c' est qu'il a obtenu le numéro 162 d'une manière ou d'une autre, et c'est parce que c'est le numéro d'origine, d'accord ? Parce que je veux dire, dans le cadre, il y en avait 162. Il va donc essentiellement alterner avec sa taille d'origine. Ou ici, vous pouvez en voir 162. Que se passe-t-il lorsque nous remplissons le conteneur ? Comme vous pouvez le constater, il s' est adapté au cadre dans lequel il se trouvait et il était dit : « Je vais remplir le contenant, mais je ne vais pas aller au-delà ». Je vais plutôt passer à la deuxième ligne. Maintenant, il est passé à une deuxième ligne. Maintenant, revenons en arrière et faisons un câlin. Maintenant, il existe un autre moyen de résoudre ce problème. Je veux dire, si vous y réfléchissez, le problème est que le cadre ne contient pas ces choses. Le cadre peut être au lieu de réduire la taille de ce texte. Je veux dire, on ne peut pas le réduire. Peut-être que nous aimerions allonger un peu le cadre. Cela pourrait également fonctionner. Mais il ne faut pas le faire manuellement en le déplaçant. Je vais y retourner. Ce que nous devrions faire, c'est peut-être , je veux dire, voyons voir, réparer, c'est déjà réglé. Nous voulons qu'il soit un peu plus interactif. Soit il doit contenir le contenu, soit remplir le contenant. Eh bien, faisons-le remplir le récipient. OK. Maintenant, vous voyez ce qui s'est passé, c'est que tout ce cadre est un conteneur. Il s'agit d'un cadre doté d'une mise en page automatique, a été mis en œuvre et s'est étendu l' ensemble du cadre. Cela a pris tout l'espace. Mais il en résulte que nous avons maintenant beaucoup d' espaces blancs vides qui ne sont peut-être pas nécessaires. Alors, comment résoudre ce problème ? Eh bien, mettons du contenu sur les câlins. Eh bien, le contenu des câlins n'a rien fait, non ? Eh bien, est-ce que cela embrouille le contenu ? Vérifions-le. L'évaluation est disponible jusqu'ici. OK ? Et il y a du rembourrage sur les côtés, juste pour vous faire savoir, il y en a 24, 24 de haut en bas, 24 de droite à gauche OK, donc la critique est contenue. Et puis ce texte est également contenu, bien, et nous regardons ici, il y a un problème ici. Eh bien, ce texte ne contient pas les éléments qu'il contient, ce sont les éléments qui sortent. Peut-être devrions-nous également faire en sorte que cela contienne un contenu câlin. Juste comme ça, nous l'avons réparé. Le contenu d'un câlin signifie donc vous étendre autant que les éléments qui se trouvent en vous. Donc, pour récapituler, s'il y a un nom long, vous devez vous adapter à ce nom long et l'allonger vous-même Vous devez savoir qu'en tant que cadre, vous devez le contenir. Ainsi, lorsque nous étreignons le contenu, il le contient, puis le cadre extérieur doit également l' étreindre. Ainsi, lorsque vous avez plusieurs éléments les uns dans les autres, plusieurs mises en page imbriquées les unes dans les autres, vous devez leur dire qu' elles se contiennent les unes les autres, comme pour étreindre le contenu qui sommeille en Donc ici nous avons un câlin et ici nous avons un câlin. Vous vous étreignez, d'accord ? Ensuite, vérifions ces éléments. Eh bien, écrivons peut-être une critique ici, je vais écrire. J'ai vraiment aimé le film. C'était absolument incroyable et agréable, bla, bla Alors maintenant, vous commencez à avoir des problèmes. Vous l'avez probablement déjà remarqué. Je vous explique simplement le processus de création d' un élément et comprends comment ces éléments sont liés à l'élément. Eh bien, nous avons plusieurs problèmes. L'un des problèmes est que si vous regardez l'élément, il n'occupe pas toute la zone. Le deuxième problème est qu'il s' étend au-delà de la ligne, au-delà du cadre. Maintenant, si vous vous souvenez de ce problème au-delà du cadre, nous l'avons déjà résolu avec le nom, la solution était d'utiliser le câlin. L'option du contenu du câlin. Maintenant, nous avons déjà le contenu des câlins, mais c'est pour la largeur. Maintenant, il faut utiliser la même chose pour la hauteur. Tout comme lorsque nous faisons cela, le problème est immédiatement résolu. Ça baisse. Si nous raccourcissons ce texte, il va augmenter. Cela rend l'élément un peu réactif avec vous. Désormais, le cadre global ou le cadre le plus haut est ajusté des deux côtés pour la largeur et la hauteur. Mais nous avons encore un autre problème, comme nous l'avons dit, qui ne couvre pas tout le cadre. Comment s'y prend-on ? C'est assez facile. Eh bien, cela n'est pas résolu par l'option câlin car Hug va rester sur la même ligne. Avec le texte, quand il s'agit de texte, il va simplement rester sur la même ligne. Mais cette carte n'est pas très jolie, étant très longue, surtout si on double le texte ici, elle s' étendra à l'infini. Je vais juste y retourner, je vais annuler. La solution, au lieu d'utiliser un W fixe ou un contenu de câlin, consiste à utiliser un contenant de remplissage. Donc, lorsque vous remplissez un conteneur, il est dit remplir la zone qui se trouve ici, qui est vide, n'est-ce pas ? Donc, si nous faisons le correctif, le correctif restera exactement le même, il ne réagira pas. Mais lorsque nous remplirons, il dira non, ne remplissez que la zone disponible. Et pour le moment, c'est la seule zone disponible. Donc, si nous ajoutons du texte, il s'étendra, puis il occupera la zone disponible. Tu vois de quoi je parle ? Il s'agit donc de concevoir ces éléments de manière à répondre à leurs besoins, comprenant que le nom ne devrait peut-être pas être inscrit sur deux lignes. Je veux dire, peu importe la longueur de votre nom, il devrait toujours s' étendre d'une manière ou d'une autre. Mais étant entendu que, hé, votre commentaire ne devrait pas être long, trop large, mais peut-être qu'il devrait descendre au lieu d'aller vers la droite, il devrait descendre. Et c'est essentiellement l'utilisation complète de ces éléments. Donc fixe c'est bien, fixe en largeur ou en hauteur, mais c'est très rigide. C'est statique. Cela ne change pas tout seul. C'est pourquoi nous utilisons Hug Elements et Fill Container pour indiquer à ces éléments comment ils doivent se comporter les uns par rapport aux autres. Et juste pour vous faire savoir, il est également possible de remplir le récipient en fonction de la hauteur. C'est également une possibilité. Donc, lorsque vous dites « remplir le conteneur en fonction de la hauteur , cela signifie qu'à l'heure actuelle, il n'a rien fait, mais il va le remplir s'il y a de la place pour le remplir. Donc, si nous étendons cela ici, pour une raison ou une autre, nous l'étendons. Nous vérifions l'élément et vous voyez que la zone de texte est déjà remplie. Alors je l'ai prise et j'ai dit : « Hé, c'est à moi. Tu sais, je ne vais le donner à personne, d'accord ? Maintenant, revenons en arrière. Annulons cela. Donc pour le moment, la carte n'est pas mal. Je veux dire, ce n'est pas parfait. Configurons-le comme remplissage. Mais c'est pas mal. Cela fonctionne pour nos objectifs. Si nous raccourcissons le nom, je veux dire, frère John, je ne sais pas ce que c'est, il semble toujours très beau, n'est-ce pas ? Nous avons donc raccourci le nom afin pouvoir lire la critique et tout est parfait. Eh bien, maintenant jouons, allons encore plus loin et jouons avec quelques éléments supplémentaires. Donc, ce que nous pouvons faire, c'est copier ceci et le coller, donc je copie cet élément. Et juste pour vous faire savoir, comme je l'ai mentionné, j'ai fait de l'ensemble de ce cadre une mise en page automatique, mais sa largeur est fixe, donc il ne réagira pas, d'accord ? Nous avons maintenant ces deux objets. Alors maintenant, nous pouvons faire quelque chose d' intéressant, d'accord. Donc, peut-être que vous regardez ce design et que vous dites, eh bien, vous savez, il y a un espace blanc ici. C'est juste vide. Il est juste assis là. Pourquoi ne pas le remplir ? Mais si j'ajoute une autre critique, elle sera supprimée. n'est pas ce que je veux. Je veux qu'ils aient deux critiques, et je veux qu'ils prennent de la place. Eh bien, il y a un moyen de le faire. Choisissez donc ces deux éléments et allez-y . Au lieu de les faire étreindre, ils ne font que étreindre leur contenu, ils sont aussi larges que leur contenu en a besoin Nous allons dire «   remplir le conteneur ». Ce qui va se passer ici, c'est qu'ils vont tous les deux essayer de remplir l'espace autant que possible. Le résultat est qu'ils se battent tous les deux pour l'espace. La règle générale en ce qui concerne Figma est que lorsque deux éléments d'une mise en page automatique sont tous deux configurés pour remplir l'espace, ils prennent 50 % et 50 % C'est l'idée générale. Si nous copions et collons ceci et que nous avons trois éléments, ils vont maintenant prendre 30 %, 30 %, 30 %. Bien entendu, si l'on exclut l' espacement parce qu'il y a un espacement entre eux, cela fait dix pixels Mais maintenant, cela semble un peu loufoque si vous l'avez remarqué, parce que maintenant le nom est trop long et parce que nous l'avons configuré pour remplir le contenant, mais pas vraiment Hug the content. Il ne se soucie pas du contenu qu'il contient, il se soucie simplement de remplir le contenant. C'est un problème parce que, hé, nous venons d' apprendre à rendre les choses réactives et maintenant nous les cassons. Eh bien, cela fait naturellement partie de l'utilisation de ces technologies. Il existe une solution. L'une des solutions est de choisir tous ces éléments. Au lieu d'avoir ça comme un câlin, on peut le transformer en rassasiement. Ensuite, nous allons choisir le texte et le transformer en texte de fond, ce qui donnera au texte ici deux lignes. Ensuite, nous allons également indiquer la hauteur à épouser parce que vous voyez qu'elle s'étend au-delà du cadre. Nous allons indiquer le cadre, ne pas tout étreindre en termes de hauteur, puis il prendra de la hauteur et, comme ça, nous les aurons pris suffisamment de place. Je veux dire, maintenant ils n'ont pas l'air farfelus, ils ne quittent pas le cadre et ils sont bien dans leur cadre Vous pouvez simplement le garder tel quel. Maintenant, l'autre solution consiste essentiellement à les choisir et à passer ici. Maintenant, je vais vous apprendre quelque chose de complètement nouveau, savoir le minimum et le maximum. OK, donc pour la largeur et la hauteur, vous avez toujours la possibilité d'ajouter une largeur minimale ou une largeur maximale. Maintenant, dans ce cas, nous avons trois éléments qui se battent pour l'espace, ce qui les rend plus petits que prévu, peut-être qu'ils ne devraient pas l'être. Ce type. Donc, ce que nous pouvons faire, c'est ajouter une largeur minimale. ce moment, nous sommes à 220 heures environ. OK ? Nous pouvons donc dire : « Tu sais quoi ? Vous n'êtes pas autorisé à avoir moins de 300 ans. Alors maintenant, nous fixons la largeur minimale de chacun d'entre eux à 300. Comme vous pouvez le voir maintenant, il devient plus petit jusqu'à 300, puis il s'arrête. Mais le résultat est que l'un d'entre eux est masqué. Maintenant, il existe une solution facile. Nous allons choisir le cadre qui contient toutes ces cartes, et nous allons venir ici et choisir cette option appelée terne Cela permet de prendre tous les éléments qui ne conviennent pas et de les déposer. Vous avez maintenant les éléments qui semblent très réactifs, remplissant assez bien le cadre, mais sans se déformer Regardez ce qui se passe lorsque nous le copions et le collons, il s'arrange parfaitement comme ceux ci-dessus. Qu'en est-il lorsque nous le copions et le collons à nouveau ? Il en pose un directement, et je vais vous montrer à quoi il ressemble, et ainsi de suite. C'est le même principe. C'est essentiellement ainsi que vous pouvez utiliser ce design réactif et utiliser plus spécifiquement l'option de contenu des câlins, l'option de remplissage du conteneur et les options minimum et maximum pour vous assurer que ces éléments interagissent correctement les uns avec les autres et qu'ils ne sont pas déformés. Maintenant, de même, revenons un peu en arrière. Supprimons ceci ici. Il y a quelque chose que nous pouvons faire. Je vais tous les choisir. En gros, quand on y pense, on pourrait dire qu'un avis ne devrait jamais être aussi long. Je veux dire, ça peut être long, il n'est pas nécessaire que ce soit 300, mais ça ne devrait jamais être aussi long. La solution est d'aller ici d' ajouter une largeur maximale et de dire : « Vous savez quoi ? Il doit être compris entre 300 le minimum et entre et 400 le maximum. Ce qui se passe ici, c'est que vous voyez que cette critique ne dépasse pas 400 et que lorsque nous la copions et la collons, elle n'est pas inférieure à 300. Regardez ce qui se passe lorsque je vais de l'avant et que j' étends tout ce cadre. Les cartes s' allongent un peu jusqu'à 400 , puis elles s'arrêtent. Ensuite, juste au fur et à mesure que j'ai un peu plus d'espace, ils ont maintenant trois colonnes différentes. J'en fais plus, puis nous avons quatre colonnes différentes. Et quand ça le rend plus petit ? Tu vois ça ? C'est exactement ce dont je parle. C'est l'idée même de réactivité, le fait que l'ensemble du cadre, ainsi que les éléments qu'il contient, réagissent aux changements de taille et que le résultat soit si fluide Ce n'est évidemment pas parfait, mais vous pouvez voir qu' il s'organise de manière réactive. C'est comme un être vivant. Et ce n'est pas, vous savez, ce que font habituellement les gens, ce que font beaucoup de designers. Malheureusement, ils créent ceci et obtiennent la critique, ils le mettent ici, ils le copient et le collent, et ils le mettent ici. Et puis ils disent, oups, tu sais, ce n'est pas au milieu, alors je vais le déplacer au milieu Je vais le mettre ici, puis je vais les copier, les coller, les démonter. Ensuite, je vais tous les copier, les coller, les démonter. Oups, je m'assure juste que tous les espaces sont parfaitement alignés. Et ce qui finit par arriver, c'est que dès que vous prolongez cela, vous devez vous demander : que dois-je faire maintenant ? Eh bien, dois-je les apporter ici ? Eh bien, ils vont plutôt bien. Mais alors, que dois-je en faire ? Combien de temps devraient-ils durer ? Maintenant, je dois trouver une solution aussi longue, aussi longue, complètement plus longue. Et puis quand ils disent : « Oh, faisons-en une version mobile », ils doivent tout repenser depuis le début Ceci est un exemple de mauvais design qui n'est pas réactif, de mauvais design qui ne répond pas Allons l'agrandir un peu. Voici un exemple de bonne conception réactive. Tu sais. Et juste pour, vous savez, ce cadre n'est pas un écran, ce n'est pas une page. Ce n'est probablement qu'un élément d'une page, d'accord ? Je ne pense donc pas que ce soit le design complet. Cela ne ressemble pas à un design complet, mais, vous savez, c'est essentiellement ainsi que vous le faites. Lorsqu'il s'agit de design réactif, il s'agit de s'assurer que les objets sont élastiques et flexibles et qu'ils réagissent au toucher. Ce sont les bases du responsive design utilisant des mises en page automatiques Maintenant, il y a bien plus que cela. Nous avons pris l'exemple d' une carte d'évaluation et nous avons pris l'exemple d'un bouton. Mais c'est bien plus profond que ça, d'accord ? Vous devez simplement comprendre les trois modes principaux différents. Vous pouvez soit avoir une taille fixe qui ne change jamais, soit vous pouvez avoir un câlin, qui ne change qu' en fonction de ce qu'il contient. S'il y a du texte, il épouse le texte qu'il contient. S'il y a des éléments, des éléments de design, des objets, alors ça les étreint Mais c'est généralement lorsqu' il s'agit de texte qu'il ne passe pas à la deuxième ligne. Ça continue et ça continue. En ce qui concerne le remplissage, il est simplement indiqué je vais remplir le contenant autant qu'il sera disponible. Je ne vais pas aller au-delà, et s'il n' y a pas assez d'espace, je vais passer à une deuxième ligne, une troisième ligne, une quatrième ligne. C'est en gros l'idée. Une fois que vous l'avez compris, une fois que vous l'avez intériorisé et compris de quoi il s'agit, vous pouvez commencer à créer votre propre bon design réactif Dans la leçon suivante, nous allons parler un peu plus contraintes et des points d'arrêt, qui concernent également le responsive design Alors allez-y, essayez de vous entraîner, essayez de le comprendre un peu mieux. Ensuite, dans la leçon suivante, nous aborderons cette toute autre partie du design réactif, qui est toujours très liée à ce dont nous avons parlé, mais qui est un peu plus éloignée des mises en page automatiques Il ne repose pas entièrement sur eux. J'adore les mises en page automatiques, et je pense que vous devriez le faire aussi, car ce sont vos amis. Ils vous aident et font miracles. Il y a ce qui rend Figma spéciale qui distingue de la concurrence C'est pourquoi c'est un excellent outil à utiliser. Mais comme je l'ai dit, dans la prochaine leçon, nous allons parler un peu contraintes et des points de rupture, si vous ne savez pas de quoi il s'agit, et nous allons y jeter un œil dans la leçon suivante Nous allons également avoir un exemple vous montrant en temps réel comment créer une réponse à une page Web ou à une application. Nous avons donc créé ici une petite section avec ces cartes de visite. Mais dans les prochaines leçons, nous allons le faire avec un véritable projet de design, et c'est juste pour la pratique. Tu sais, quand je dis réel, je dis réaliste. Je ne veux pas dire que c'est un vrai projet qui va être construit, mais juste quelque chose que nous devons examiner. 8. Contraintes et points d'arrêt: Bonjour, et bienvenue à une autre leçon du cours avancé de Figma Dans cette leçon, nous allons parler des points d'arrêt et des contraintes Dans la dernière leçon, nous avons parlé conception réactive et de la façon dont nous pouvons y parvenir grâce à des mises en page automatiques, à des paramètres de contenu important et à des paramètres de type conteneur de remplissage Vous ne l'avez pas vu, allez-y, mais il s' agit d'une suite, même s'il ne s'agit pas exactement de la même chose Nous parlons toujours de responsive design. Ici, nous nous débarrassons des mises en page automatiques. Je veux dire, nous pouvons utiliser des mises en page automatiques, mais il n'est pas nécessaire de s'y fier entièrement Pour l'instant, nous utilisons principalement ce que nous appelons des contraintes. Les contraintes sont essentiellement les moyens par lesquels nous pouvons communiquer avec Figma et configurer les choses de telle sorte que, sans mises en page, nous puissions nous assurer que les designs sont réactifs et qu'ils réagissent d'une manière ou Aux modifications de leur environnement, notamment aux modifications du cadre ou de la taille de l'écran. Comme vous pouvez le voir maintenant, j'ai créé un élément ici qui vous montre un produit, un matcha, un merveilleux mélange de saveurs, et vous pouvez le commander dès maintenant, et il y a un prix Prenez une minute pour simplement analyser et comprendre cet élément. C'est juste un élément complètement isolé que j'ai fabriqué très rapidement et dont les dimensions ne sont pas parfaites, mais vous voyez l'idée. Vous comprenez où cela va nous mener. Maintenant, nous allons essayer de comprendre ce que sont les contraintes, tout d' abord, puis en comprenant les contraintes, nous allons essayer de comprendre comment nous pouvons rendre cela un peu plus réactif, juste pour vous faire savoir que la réactivité n'est jamais un attribut absolu Il ne s'agit pas d'être réactif ou non réactif, mais il y a des niveaux. C'est comme un spectre. Il y a vraiment une très bonne réactivité ou une réponse élevée, puis il y a une faible réactivité Vous ne pouvez pas être totalement parfait, mais nous essayons de l'être lorsqu'il s'agit de fabriquer des produits. Nous essayons de l'être, mais parfois nous sommes très limités en termes de FigMA et nous devons simplement nous assurer que les développeurs font bien leur travail Gmas est très limité, mais avec le codage, avec la programmation, nous pouvons atteindre une réactivité beaucoup plus élevée Quelles sont les contraintes ? Lorsque vous cliquez sur un type d' élément dans un cadre qui n'a pas de mise en page automatique, vous remarquerez ces lignes pointillées Ce sont essentiellement des cordes qui accrochent votre élément. Vous pouvez voir une corde de haut en haut et de gauche. Ce sont vos contraintes. En gros, ils sont juste ici, tu peux les cacher d'ici. Ou vous pouvez les ouvrir et cela vous indique à quel côté de ce cadre cet élément est attaché. Qu'est-ce que cela signifie ? Eh bien, lorsque nous changeons la taille, rien ne se passe. Mais j'aimerais que vous remarquiez ce qui se passe lorsque je change la taille de haut en haut. Tu vois ça ? L' élément remonte par le haut. Mais quand je le change de bas en bas, rien ne se passe. C'est statique. De même, à droite et à gauche, depuis la droite, rien ne se passe depuis la gauche, l'élément va avec. C'est ce qui se passe essentiellement, c'est que c'est ligoté et laissé et que vous pouvez changer cela en l'attachant. Maintenant, il est attaché vers le bas et vers la gauche. Maintenant, quand je le déplace vers le bas, je déplace le côté inférieur, il se déplace latéralement. Il va évoluer avec lui, de même ici. Il va maintenant se déplacer du côté droit. C'est l'une des principales choses que nous pouvons faire. Donc, juste pour vous donner une idée, je peux le copier et le mettre ici, puis je peux dire qu'il doit être attaché en haut et à gauche. Cela doit être attaché en haut et à droite. Ensuite, ils sont séparés. OK, maintenant ça s'étend autant que nous le voulons, et ça reste vers la droite, ce truc vers la gauche. Mais pour être honnête, ce qui arrive la plupart du temps, c'est que lorsque vous réduisez la taille de ce chemin, cela se chevauche, n' est-ce pas ? C'est ce dont je parle, ce n'est pas parfait car sans mises en page automatiques, vous ne pouvez pas atteindre une réactivité totale Donc c'est un peu la moitié de la solution, d'accord ? Et si vous voulez vraiment faire un bon design réactif, vous devez utiliser à la fois les contraintes et les mises en page automatiques à votre avantage, d'accord ? Donc, comme je l'ai mentionné, ce qui se passe ici, c'est que vous jouez avec et que cela passe sur le côté, ce qui est bien, mais il n'est pas totalement réactif. Nous pouvons faire la même chose ici. Nous pouvons le copier collé ici et nous pouvons les attacher au bas Permettez-moi de désactiver les contraintes lorsque vous cliquez sur Contrôle désactiver Vous pouvez le dimensionner sans aucune contrainte. Sans contrôle, cela va de pair. Tu vois de quoi je parle. Maintenant, de chaque côté, il y a un élément qui va avec. Mais ce n'est pas une solution parfaite. Une meilleure solution serait de les mettre tous, de les mettre dans une mise en page automatique. Ensuite, comme vous pouvez le voir maintenant, il y a un wrap, dit que s'il n'y a pas assez d'espace, posez-le puis nous devons le configurer de manière réactive. Mais prenons un peu de recul et supprimons tout cela. Supprimons-les et travaillons-en un. Il existe maintenant différents paramètres de contrainte. Nous avons parlé de gauche en haut, mais il y a aussi le milieu. Vous pouvez le choisir ici ou ici. Maintenant, il est possible de faire à gauche et à droite. Donc, ce qui se passe ici, c'est lié des deux côtés. OK. Ce que vous voyez maintenant, c' est qu'il déchire ou qu'il étend l' élément qu'il contient. Mais c'est l'une des options. Nous pouvons faire le centre. Maintenant, au centre, est-ce qu'il n' étend pas l'élément lui-même, il ne l'étire pas, mais il essaie simplement de le maintenir au centre. De toute évidence, ce n'est pas au centre. C'est là, plutôt dans le premier tiers, et il essaie s' assurer que c'est toujours dans le premier ou entre le premier et le deuxième tiers. C'est une autre option, puis nous avons l'échelle. L'échelle consiste davantage à l' étirer. C'est très similaire à la gauche et à la droite, et cela dit essentiellement que , même si vous le prenez, cela va s'étirer. Si vous le réduisez, il deviendra également plus petit Nous avons les mêmes paramètres pour le haut et le bas. Laisse-moi juste régler ça comme à gauche. Ensuite, nous pouvons également faire de l'échelle. Vous pouvez voir qu'il est en train de le redimensionner. Nous pouvons faire le haut et le bas. C'est aussi l' étirer et nous pouvons faire le centre. Les centres essaient de le maintenir dans la même position plus ou moins au centre. OK. Ce ne sont donc que quelques options. Mais comme vous le remarquez, lorsque nous l'étirons, il ne s'étire pas vraiment correctement. Ça se déforme. Nous pouvons donc essayer de résoudre ce problème. La façon de procéder consiste à parcourir cet élément dans ce cadre et à cliquer sur les objets qu'il contient. Maintenant, il ne s'agit pas d'une mise en page automatique. Ce que nous avons fait ici, c' étaient toutes des mises en page automatiques. Ici, je voulais vous en apprendre davantage sur les contraintes. Même ce cadre ne l'est pas, il n'a pas de mise en page automatique. Tu vois ce bouton ? Il n'est pas activé. Ce que nous allons faire, c'est choisir cette image et essayer de lui définir les contraintes, car elle comporte une contrainte, mais les éléments qu' elle contient ont également des contraintes. Posez-vous la question suivante : que voulez-vous qu'il se passe lorsque nous étendons l'ensemble de ce cadre ? L'image doit-elle rester au milieu ou doit-elle s'étendre ? Eh bien, je pense que cela devrait être prolongé. Je dirais échelle. Maintenant, voyons voir. Comme vous pouvez le constater, l' image est redimensionnée. Maintenant, nous ne pouvons pas contrôler la mise au point de l'image, comme vous pouvez le voir, elle est centrée. De toute évidence, lorsque nous l' étendons, le type de produit dont il s'agit ne sera plus visible. Mais ignorons cela pour le moment. Nous pourrons avoir de meilleures photos plus tard. Mais pour l'instant, c' est suffisant, nous avons créé cette balance. Qu'en est-il du haut et du bas ? Lorsque nous la déplaçons, l'image doit-elle également bouger avec nous ou doit-elle rester la même ? Eh bien, je pense que si nous le réduisons, il devrait le devenir. Comment pourrions-nous faire cela ? Eh bien, essayons l'échelle et voyons comment cela fonctionne. OK, c'est pas trop mal. Essayons autre chose. Qu'en est-il du centre ? Eh bien, le centre le fait sortir du cadre, ce qui n'est pas une bonne chose, nous ignorons ces autres éléments. Maintenant, nous allons les aborder. Qu'en est-il du haut et du bas ? Il s'agit d'essayer. Maintenant, j'aime beaucoup le haut et le bas ici. Ici, vous pouvez voir la différence. La raison en est que, tout d'abord, cela laisse ici un espace égal. Cela ne le rend pas plus petit et cela ne réduit pas non plus les marges ici. Donc, si nous le comparons maintenant à l'échelle, voici à quoi cela ressemblerait. Comme vous pouvez le voir, cela semble très similaire, mais tout d'abord, cette zone est maintenant complètement plus petite, n'y a donc plus d' espace pour le texte, et vous pouvez voir que les marges ici se sont également réduites, les dimensions ici sont compliquées Mais revenons en haut et en bas. Nous allons choisir le haut et le bas ici. Et vous pouvez voir que les marges du haut, gauche et de la droite sont toujours les mêmes et que cette zone de texte est intacte. C'est parfait. Qu' avons-nous choisi ici pour le moment ? Nous avons choisi l'échelle pour la droite et la gauche et pour le haut et le bas, nous avons choisi le haut et le bas. Parfait. Passons-y maintenant. Maintenant, une chose que je sais, c'est cela devrait être attaché au bas de l'échelle. Cela doit toujours rester en bas et ne pas être étiré, nous n'allons pas faire d'échelle et nous n'allons pas faire de haut en bas. Ce que nous allons faire, c'est juste le bas. Maintenant, testons-le. Maintenant, peu importe à quel point on s'y prend, ça va rester dans le bas de l'échelle. Et quand on l'étire à droite et à gauche ? Ça ne s'étire pas ? Eh bien, nous voulons qu'il s'étire. Cela signifie que nous pouvons faire l'échelle ou nous pouvons faire à droite et à gauche. Nous allons le tester. Mais l'un des problèmes liés à l'échelle, c' est qu'au fur et à mesure que nous la redimensionnons , vous pouvez voir l'espacement , les marges s' agrandissent également, pareil pour l'image Nous allons donc les choisir tous les deux et les donner à gauche et à droite. Maintenant, lorsque nous les redimensionnons, les marges restent intactes. C'est parfait. Maintenant, voyons ce que nous pouvons également en faire. Une chose que je sais, c'est ils devraient être liés à la gauche. Ils ne devraient pas être exactement allongés ou peut-être devraient-ils le faire. Voyons voir. Attachons-les au bas pour le moment. Nous pouvons voir qu'ils sont attachés au bas, ce qui est parfait, et je vais faire également attachés au bas. Telles sont les contraintes, et elles fonctionnent parfaitement lorsque nous redimensionnons les choses dans cette direction Jusqu'ici, vous ne pouvez plus voir la photo. Mais jusqu'ici, c'est plutôt bon, je pense. Plus loin que cela , tout est foiré. C'est le minimum, nous pouvons le définir comme une taille minimale, mais comme vous pouvez le voir, vous pouvez l'étendre, l'agrandir beaucoup, sans problème. Qu'en est-il de la droite et de la gauche ? Eh bien, cela ne pose aucun problème, mais peut-être que les cinq devraient être attachés à droite. Nous pouvons le faire. Il suffit de cliquer avec le bouton droit. Maintenant, le prix va toujours vers la droite, le plus à droite, et ceux-ci restent sur la gauche, ce qui est logique. Eh bien, jusqu'ici. C'est un problème. Malheureusement, vous ne pouvez pas résoudre ce problème sans une mise en page automatique, nous avons besoin d'une mise en page automatique pour cela. Si nous revenons simplement en arrière, nous pouvons les mettre dans une mise en page automatique, et nous pouvons dire gauche et droite. Maintenant, ils vont s'étendre et vous pouvez voir que cela s'arrête ici et ensuite nous pourrons lui dire Ap. Le rap signifie que dès que c'est trop serré, le prix devrait baisser. Comme vous pouvez le voir maintenant, le prix a baissé, mais c'est un peu foiré parce que les paramètres ici sont foirés. Ici, c'est écrit automatique, mais pour l'espacement vertical, c'est 58, ce qui n'a aucun sens Nous allons donc en faire 16 ou 8. Mais ensuite, le numéro sera masqué par le bouton. Donc de préférence, nous devrions également mettre le bouton, vous savez, je vais juste contrôler Z, juste revenir un peu en arrière. Donc, pour récapituler, nous allons créer cet espacement de huit, et nous allons en faire une mise en page automatique avec deux, et nous allons dire gauche et droite et l' attacher au bas Maintenant, voyons ce qui se passe. Nous allons l'élargir beaucoup, il fonctionne toujours. À peu près trop petit. Maintenant ça marche, mais maintenant le macha a un problème. Esfix, nous allons prendre la macha, nous la couperons, nous l' ajouterons ici et nous la mettrons au-dessus Avec les flèches, vous pouvez simplement le descendre ou le haut ou simplement avec votre souris. Je vais juste réduire l' espacement entre eux, peut-être quatre Voyons maintenant en bas à gauche et à droite. Testez à nouveau, plus large fonctionne. Qu'en est-il des petits. Comme vous pouvez le constater, cela fonctionne, mais cela correspond toujours à l'image, ce qui pose problème. What About Down fonctionne parfaitement. C'est bon. Donc, la dernière étape à faire est également d'obtenir le tout, couper et de l'ajouter à ce tout dans cette mise en page automatique. Ensuite, nous ferions , vous savez, le tester. Nous allons juste le tester. Maintenant, il ne s'étend plus avec nous vers la gauche et vers la droite. Qu'en est-il du down ? Il ne s'étend pas non plus. Ce que nous allons faire ici, c'est simplement cliquer dessus et nous dirons, remplissez le récipient à droite et à gauche, ajoutons-le ici. OK. Maintenant, nous l' élargissons. Cela fonctionne. Parfait. Et si tu le démontais ? Ne fonctionne pas. Ici, nous allons également lui dire de remplir le conteneur en termes de hauteur. Maintenant, la droite et la gauche fonctionnent vers le haut et le bas ne fonctionne pas. La raison en est que nous devons modifier les contraintes et nous dirons ici le haut et le bas. Voyons voir maintenant. Parfait. Ils ne sont pas concernés. ces éléments ne sont pas affectés, mais l'image s'agrandit et réajuste la taille en fonction du cadre Je pense que c'est une très bonne solution. C'est toujours limité, quand vous arrivez ici, mais je pense que vous devriez toujours avoir une limite pour vos cartes. Je veux dire, ils ne devraient pas être inférieurs à un certain nombre. Lorsque vous créez votre carte, vous devez le comprendre. Mais nous pouvons encore optimiser cela en effectuant ce remplissage. OK ? Nous sommes donc en quelque sorte en train de résumer certaines leçons, vous savez, de la dernière leçon que nous avons eue Et oui, il suffit d'utiliser ces deux éléments, les contraintes et d'utiliser des mises en page automatiques pour comprendre cela. OK ? Peut-être que c'est de la triche, peut-être que non Mais je pense que c'est la solution idéale. C'est bon. C' est donc une façon de procéder. Et c'est là que les contraintes peuvent être très utiles. C'est le fait que vous pouvez lui dire exactement comment se comporter. Et maintenant, ce que nous pouvons faire, c'est également définir des contraintes pour l'ensemble du cadre. Donc, si nous créons le cadre ici, vous savez , par exemple, un cadre de téléphone, et un cadre de téléphone mesure généralement environ 300, disons, environ 390 93 ou 393 de large. Nous pouvons le faire. Ce que nous pouvons faire c'est l'ajuster pour qu'il soit à gauche et à droite. Donc, c'est pour la gauche et la droite, ce sont les contraintes, et pour le haut et le bas, ce sera juste le haut. Maintenant, lorsque nous passerons du téléphone à la tablette, c'est ce qui va se passer. Cela permettra essentiellement d'étendre la carte. C'est une façon de procéder. Une autre façon de le faire, comme nous l'avons fait auparavant, est de le copier-coller et de l'assembler sous forme de mise en page automatique. Nous pouvons même le copier-coller davantage. Voilà à quoi cela ressemblerait sur un téléphone. Ensuite, ce que nous allons faire, c'est dire que cela doit être horizontal. Comme vous pouvez le voir maintenant, c'est horizontal, mais c'est foiré, mais nous allons dire envelopper Il ne s'emballe pas, il ne tombe pas en panne. La raison en est que ceux-ci sont configurés pour être remplis sans minimum. Nous allons dire non, vous savez, il devrait y avoir une limite. Comme je vous l'ai dit, il devrait y avoir une limite. Il ne doit jamais être ouvert. Oh, il peut être aussi petit que possible. Non. Il doit avoir, par exemple, 200 comme limite la plus petite. Voyez ce qui se passe maintenant lorsque nous l'appelons ici mobile et que je vais le copier-coller. Voici donc ce que sont les points d'arrêt. Nous allons dire : OK, voici quoi cela ressemblerait sur mobile. Mais ensuite, lorsque nous passerons à la tablette, nous allons étendre l'écran. OK. Désolée, nous allons juste réparer ça, c'est foiré. Nous allons corriger les contraintes. Nous allons dire gauche et droite. Maintenant, lorsque nous étendrons cela, cela s'étendra également à nous, comme vous pouvez le voir. C'est être réactif. Si vous avez un petit téléphone, il ressemblera à ceci. C'est le plus petit possible. Je ne peux pas être plus petit que ça. Si vous avez un téléphone plus gros, il ressemblera à ceci. Si vous avez une tablette, elle ressemblera à ceci, comme vous pouvez le voir. Vous pouvez maintenant voir qu'il s'agit d'un iPad M et qu'il s' agit d'un véritable mode paysage pour iPad, quel qu'il soit. Nous avons maintenant obtenu un effet très similaire à celui que nous avions obtenu en termes de mises en page automatiques Nous y sommes parvenus ici et il s'agit, par exemple, du mode tablette. Ce sont des points de rupture. C'est ce que nous appelons les points d'arrêt. Nous avons maintenant parlé de contraintes Les points d'arrêt définissent certains nombres où votre design se décompose ou non, mais s'éloigne de l'affichage mobile et se transforme ou se transforme en affichage tablette Nous avons donc opté pour un bon design réactif ou un bon design adaptatif pour les bords, car nous l'avons configuré de manière à ce bon design adaptatif pour les bords, car nous l'avons configuré de manière que ces éléments se mettent en place. Si nous ajoutions d'autres éléments, si nous ajoutions d'autres éléments à ce cadre, ils devraient également se mettre en place. Quelle que soit la façon dont nous le redimensionnons. Mais sinon, nous pourrions simplement dire sur la tablette, ça devrait être ça, sur le PC, ça devrait être comme ça. Juste pour vous donner un exemple, nous allons créer une version beaucoup plus large. Maintenant, je vais l'étendre et montrer à quoi il devrait ressembler pour le PC. Cela ressemble plus à la taille d'un PC ou d'un ordinateur portable. Mais ce que vous remarquez ici, c' est que celui-ci est bien trop grand. Il s'agit d'une erreur que nous avons rencontrée. Tout d'abord, nous n'avons pas fixé de taille maximale. Nous pouvons donc résoudre ce problème en définissant une largeur maximale pour toutes ces cartes, ou nous pouvons simplement la modifier manuellement. On peut dire que pour ces modèles, uniquement pour le PC, je vais écrire ici PC, uniquement pour l'écran du PC, ils devraient en avoir un minimum, non pas de 200, mais de 300. Et puis ils devraient en avoir un maximum de 500. Quand j'en ajouterai un autre, je vais vous montrer à quoi il semble qu'il ne devrait y en avoir que 500. Comme vous pouvez le voir maintenant, les éléments ici sont différents d'ici. Ils ont des minimums et des maximums différents C'est à cela que servent les points d'arrêt. Il s'agit d'ajuster à quoi ressembleraient les choses. En fonction de la taille de l'écran, non ? Comme je l'ai déjà dit , il n' est pas possible de créer un design entièrement 100 % réactif. Il y aura toujours des problèmes. Il va y avoir un écran bien trop petit ou bien trop grand. Je travaille moi-même. J'ai un écran ultra large, qui est bien trop large. Ainsi, pour la plupart des sites Web, leur apparence n'est pas tout à fait correcte, et c'est tout à fait normal. Cela arrive. La plupart du temps, lorsque vous ouvrez un site Web, il est réduit. Vous avez l'écran si grand, puis l'ensemble du site Web ne prend que la partie centrale ou peut-être la partie gauche. C'est donc une chose courante car nous ne pouvons pas être sûrs que vous savez, notre design s'adapte à 100 % tous les appareils, à toutes les tailles d'écran. C'est pourquoi nous devons trouver un compromis. Ce compromis est appelé points d'arrêt. Et à ces points de rupture, nous avons la liberté d'ajuster les choses. On peut dire, tu sais quoi ? Au lieu de cela, par téléphone, par exemple. Eh bien, vous pouvez voir sur le PC que je peux voir jusqu'à sept verres, non ? Sur la tablette, je vois quatre verres et deux moitiés. Sur le mobile, je n'en vois que trois. Alors nous pouvons dire, attendez une minute, attendez une minute. Peut-être que sur le mobile, cela ne devrait pas être un mouvement de défilement vers le bas pour voir, peut-être que cela devrait être un curseur Ensuite, je désactiverais le wrap et je le garderais comme ça sous forme de curseur pour que vous puissiez faire glisser les éléments de droite à gauche De nombreuses applications le font et nous allons en voir des exemples. Ensuite, ce que nous pouvons faire, c'est que vous pouvez voir toutes les boissons ici, puis nous pouvons les copier, les coller, et puis vous aurez d'autres boissons, peut-être différents types de boissons ou différentes couleurs. Ici, vous avez votre première option, vous pouvez les parcourir et je peux vous montrer à quoi cela ressemblerait. Je vais juste le configurer et je vais dire le défilement horizontal Et c'est à ça que ça ressemblerait au téléphone. Cela a beaucoup de sens. Peut-être que le téléphone devrait être un peu plus long. Cela a beaucoup de sens, car vous voudriez voir différentes catégories et parfois, le défilement horizontal vous en montre beaucoup plus simplement en faisant défiler Au lieu de voir trois grandes cartes, les cartes devraient peut-être être petites. Encore une fois, les points d'arrêt vous donnent la liberté d'ajuster et personnaliser votre contenu en fonction de la taille de votre écran ou en fonction de celle-ci Ici, il n'est donc pas nécessaire d' utiliser des curseurs horizontaux. Vous en voyez déjà une bonne quantité sur votre écran, vous n'en avez donc pas besoin. C'est donc une question à laquelle il faut réfléchir. Pour récapituler ce que nous avons appris aujourd'hui, nous découvrons deux concepts principaux sont les contraintes et les points de rupture Les contraintes sont essentiellement notre façon de lier le contenu dans un cadre pour indiquer à Figma de quel côté de ce cadre ce contenu doit être lié, haut ou en bas ou aux deux Lorsque nous étendons cet écran, l' élément doit-il s'étendre ou doit-il rester lié au haut ou au bas ? Et de même, à droite ou à gauche, et c'est en gros tout le concept. Cela nous permet de communiquer avec Figma, configurer les choses de manière à ce que les éléments puissent être étendus, étirés ou déplacés de la bonne manière Nous avons également découvert les points d'arrêt, qui nous permettent de créer différentes tailles d'écran et configurer des apparences différentes pour chaque taille d'écran Pour le mobile, il a un look différent pour la tablette, look différent, et le PC, un look différent. Maintenant, d'habitude, il n'y a que ces trois-là. Vous n'avez pas besoin d' aller plus loin et de dire Big PC Ultra Wind Monitor. Non, tu n'en as pas besoin. Et la plupart du temps, vous pouvez également le configurer telle sorte que vous puissiez dire tout ce plus petit que cette taille , 393 ou quelque chose est plus petit que cette taille , 393 ou quelque chose comme ça, 393 à 530, qui sera entièrement Juste pour clarifier un peu mieux les choses. Cela signifie que tout ce qui est supérieur à 393 et inférieur à 530 en termes de largeur doit être conforme à cette conception. Ensuite, tout ce qui se situe entre 530, à partir de 530 ou quel que soit le nombre que nous avons défini, ces nombres sont simplement aléatoires. Je les choisis juste au hasard. 530-1200, l'écran sera considéré comme un écran de tablette et il suivra exactement ce design Encore une fois, une fois qu'il sort d'un écran 1274 ou plus, vous devez suivre ces règles Donc, en gros, cela a ses limites, mais lorsque nous travaillons avec des mises en page automatiques, nous évitons bon nombre de ces limitations Je vous conseille d'utiliser à la fois Best Words, d'utiliser des mises en page automatiques, utiliser des contraintes et des points d'arrêt pour obtenir le meilleur design possible et de ne pas faire le meilleur design possible et de ne pas de compromis en matière de réactivité Parce que nous devons essayer d'atteindre le maximum et le meilleur niveau de réactivité possible, puis nous pourrons terminer. Mais travailler uniquement avec des contraintes est trop limitatif et travailler uniquement avec des mises en page automatiques est également encore trop limitatif. Essayez donc d'utiliser ces deux choses. Maintenant, pour vous donner un exemple, un dernier exemple de ce que vous pourriez faire avec les contraintes, c'est un cas très particulier de ce avec quoi nous travaillons habituellement. Il n'est pas nécessaire de le faire de cette façon, mais c'est une façon de le faire. Maintenant, ajoutons un écran McPro 16 pouces juste ici. Disons que nous concevons un site Web, ce site Web aura généralement une barre de navigation. Je crée un cadre ici et je vais lui donner une couleur, alors peut-être qu'il devrait être vert. Normalement, nous aurions un logo. Mais au lieu d'un logo, je vais simplement ajouter ce cercle, cette ellipse. C'est actuellement notre logo. Transformons cela en une mise en page automatique. Cette mise en page automatique contient un cadre, et ce cadre est notre barre de navigation. Appelons-le Navbar. Il y a notre logo ici. Je vais l'appeler logo. Et puis il contient quelques éléments de menu. Je pourrais dire qu'il pourrait s'agir d'œuvres d'art ou d'œuvres d'art ou quelque chose comme ça. Vous pouvez en faire 24. Cela crée une très grosse barre de navigation. Ensuite, ici, il est écrit Team Au us. Ensuite, nous avons un contact. Alors peut-être que nous avons un bouton. Je vais le copier-coller, créer cette mise en page automatique avec Shift et A, puis lui donner une couleur, puis je vais choisir ce bouton, cliquer sur I pour utiliser l'outil compte-gouttes, choisir la couleur ici, puis faire ce rond avec un rayon d' angle de huit ou peut-être 24, puis je vais faire en sorte que ce 16 et ensuite je vais le faire de haut en bas seulement Le bouton devrait indiquer « prendre rendez-vous ». Je vais les mettre ici à droite. Commençons par la gauche. Maintenant, nous avons ce menu juste ici et nous allons vérifier et nous verrons que sa largeur est de 1728 Mais ce que je vais faire, c'est choisir toutes ces options, et je vais les encadrer. Je vais les encadrer, pas les mises en page automatiques. heure actuelle, nous essayons de ne pas travailler autant que possible avec les mises en page automatiques Tout d'abord, nous avons maintenant un cadre. C'est ce qu'on appelle la barre NAB, appelons cette barre de navigation essentielle les éléments essentiels de la barre de navigation Ensuite, nous avons ces points et nous avons ce cadre qui est notre appel à l'action. Le CTA que nous allons faire est de le mettre en place Nous allons les choisir et nous allons continuer en cliquant sur ce bouton. Une fois que vous avez choisi de nombreux éléments et que vous avez cliqué sur ce bouton, cela égalisera les espaces entre eux. Je vais tous les choisir et les aligner sur la droite. Au lieu de s'aligner vers le haut, ils seront alignés vers le centre Ensuite, je vais juste les placer à l'extrême droite du cadre pour que vous puissiez voir que le cadre est juste là, et je vais aussi les centrer, les mettre au centre. Ils sont maintenant centrés dans le cadre. De même ici, je vais l'aligner sur la gauche. Il est déjà aligné et je vais le placer au centre. Alors testons-le. Maintenant, lorsque nous changeons la taille ici, rien ne se passe, mais nous devons modifier la taille du cadre interne des éléments de la barre de navigation Vous pouvez voir que cela fonctionne, et lorsque nous le prenons vers la droite, cela fonctionne. C'est bon. Maintenant, ce que nous allons faire, c'est choisir ces éléments essentiels de la barre de navigation et définir les contraintes qui s'y rattachent Nous allons dire gauche et droite, gauche et droite, et nous allons dire qu'il y aura aussi un haut et un bas. Alors maintenant, ce qui se passe, c'est que lorsque nous étendons cela, cela va venir avec eux, cela va être centré. Et quand on l'étendra vers la droite, ça ira avec. Mais ce que nous allons faire, c'est maintenant configuré comme remplissage. La barre de navigation globale est configurée comme un remplissage. Considérons maintenant que nous avons cet écran MacBook Pro 16 pouces. Et s'il était plus petit ? Tu vois ça ? Maintenant, nous avons configuré la barre de navigation de manière à ce que ces éléments restent sur la droite et que le logo reste sur la gauche Et s'il est plus grand ? Eh bien, ça va toujours bien paraître. Je veux dire, ça va paraître un peu vide vu d'ici, mais c'est très bien. Mais il y a un problème car tout d'abord, une fois que nous avons atteint la taille, vous devriez avoir un point d'arrêt C'est à ce moment-là que vous devriez dire quand cela arrive ici, c'est à ce moment-là que cela passe en mode tablette ou même en mode téléphone. C'est alors que nous commençons à considérer l'écran comme une tablette plutôt que comme un PC. Ensuite, nous pouvons utiliser un menu burger au lieu de cette barre de navigation horizontale Mais c'est une leçon pour une autre fois. Mais nous avons un autre problème lorsque nous l'étendons trop loin, disons que vous avez un écran blanc comme le mien, que vous avez toutes ces options d' un côté et le logo de l'autre, cela semble un peu foiré Comment pouvons-nous résoudre ce problème ? Eh bien, il existe un moyen de résoudre ce problème. Pour ce faire, il suffit de configurer la barre de sieste intérieure, les éléments essentiels de la barre d'onglets et de dire qu'elle doit avoir une largeur maximale Mais la seule façon de le faire est de faire de la barre de navigation elle-même une mise en page automatique Nous devons utiliser des mises en page automatiques. Une fois cela fait, vous allez voir ici certaines contraintes, nous pouvons les ajuster, nous pouvons faire les 16 ou 24, c'est à vous de décider. Ensuite, nous allons choisir ici, la barre de navigation interne, les éléments essentiels de la barre de navigation, et nous allons dire ajouter une largeur maximale de OK. Ensuite, nous allons le configurer pour remplir le conteneur, et nous allons nous assurer que la barre NAP, l'ensemble du cadre, est centré au milieu. Il allait vers la gauche, nous l'avons juste centré. Maintenant, observez ce qui se passe lorsque nous l' étendons ou observez ce qui se passe lorsque nous le réduisons. Eh bien, il s'ajuste toujours correctement jusqu'à un certain point, c'est ce que nous avions Eh bien, qu'est-ce que cela nous a apporté ? Pourquoi avons-nous dû utiliser la mise en page automatique ? Eh bien, maintenant, quand on l'élargit autant, ça s'arrête. Comme vous pouvez le constater, à un moment donné, elle a cessé de croître et ce point est exactement 1 400, car c'est le maximum que nous avons fixé Eh bien, c'est quoi tout ce tapage ? Pourquoi l'avons-nous fait ? Eh bien, la principale raison laquelle vous pourriez le faire est de vous assurer que si quelqu'un avait un écran plus grand, son expérience ne sera pas étendue vers la gauche car ces extrêmes l' empêcheront de voir correctement la navigation Habituellement, en règle générale, vous pouvez ou devez fixer un maximum afin que tout, majeure partie du contenu de la page, reste au milieu. Je le conseillerais même pour la plupart des contenus. Si vous avez un site Web une application ou un programme ou quoi que ce soit d'autre, cela ne devrait pas s'étendre au maximum sauf si le cas d'utilisation est plus professionnel Par exemple, Figma elle-même, lorsque vous avez un écran large, vous utilisez l'écran large pour disposer d'un plus grand espace de travail Ensuite, vous pouvez avoir ces fenêtres sur la gauche. C'est bon. Ils n'ont pas besoin d'être centrés. Ce qui doit être centré, c'est votre travail. Mais dans un tel cas, il faut y réfléchir de vue de l'expérience utilisateur. Il faut le penser du point de vue des utilisateurs eux-mêmes. Lorsqu'il s'agit d'un site Web, la navigation est l'un des éléments essentiels. Contenu de votre site Web. S'il y a une image, s'il y a un texte, vous voulez que ce texte soit visible et lisible. Ils devraient être en mesure de le lire et de découvrir le site Web. La meilleure façon de le faire est de garder plus ou moins au milieu, pas complètement étiré. Laissez-moi vous expliquer ce que je veux dire. Quand nous arrivons ici, nous le réduisons pour une tablette, puis nous ajoutons du texte ici et nous disons, je ne sais pas, je vais juste utiliser l'IA. Écrivez 600 mots sur les dauphins. Maintenant, je vous demande d'écrire quelque chose et c'est écrire quelque chose de très long. Je vais donc le limiter à 300. OK. Maintenant c'est fini d'écrire. À l'heure actuelle, c'est dans cette mise en page automatique. Je vais en faire une mise en page automatique en soi en cliquant sur Shift et A juste pour lui donner un peu de rembourrage Supposons maintenant qu'il s'agisse d'un texte sur votre site Web. Maintenant, vous pouvez choisir ce cadre et il est déjà configuré pour être rempli. Maintenant, lorsque vous étendez cela, le texte s'étend avec lui, ce qui est plutôt cool car vous avez maintenant beaucoup plus d'espace pour lire. Et si votre écran était vraiment large ? C'est extrêmement difficile à lire parce qu'à ce stade, faut maintenant lire de la gauche jusqu' il faut maintenant lire de la gauche jusqu'au bout, puis revenir en arrière, ce qui est assez fatiguant La plupart des sites Web s'adaptent aux écrans plus larges en définissant une limite. Je ne parle pas d'écrans vraiment très larges. Je veux dire, ici, nous en avons 2 600. Mais même 1 600, 1 800, 900, il y a beaucoup d'écrans comme ça, et c'est encore trop. La solution consiste à choisir cette disposition automatique et à lui donner un maximum de 1 400 ou 1 200 ou ce que vous voulez, et vous pouvez la maintenir alignée vers la gauche ou préférence du milieu vers le haut, au milieu, puis regarder ce qui se passe maintenant Quelle que soit la taille de votre écran, vous trouverez toujours le texte au milieu, ce qui est un peu plus facile à lire. Si vous le réduisez, il n'y aura pas cet espace blanc, cet espace vide à droite et à gauche. Ça va s'adapter. Voici à quoi cela ressemblerait sur une tablette, toujours lisible et sans espace perdu à droite ou à gauche, etc. C'est essentiellement ainsi que cela fonctionne. Utiliser des contraintes, utiliser des mises en page pour rendre votre texte lisible et l'adapter à tous les types d'écrans Mais comme nous l'avons mentionné, pendant que nous discutions, l'utilisation de points d'arrêt est une bonne chose car elle vous permet d'éviter ces situations Vous ne pouvez pas montrer à quoi cela ressemblerait sur le téléphone car le menu est complètement foiré, vous avez donc besoin d'un menu mobile C'est quelque chose que vous devez garder à l'esprit. fait d'avoir un menu mobile vous permet d' avoir un point d'arrêt d'une version mobile Une vue mobile peut vous aider à remplacer cette barre de navigation au lieu d'avoir ce désordre qui se chevauche ici Mais je voulais juste vous montrer comment créer une barre de navigation avec des mises en page automatiques ainsi que des C'est essentiellement ainsi que cela fonctionne, et assurez-vous simplement de bien comprendre les maximums et les minimums ainsi qu 9. Création d'une section réactive dans le monde réel: Bonjour. Dans cette leçon, nous allons prendre ce design, j'ai trouvé dans les formulaires communautaires et qui est accessible au public. Quelqu'un l'a fait. Merci, étranger. Je vais aller de l'avant et essayer d'en faire une conception plus ou moins réactive en utilisant les concepts que nous avons appris sur les techniques et les concepts que nous avons appris, notamment les mises en page automatiques, les contraintes et les points d'arrêt Nous n'avons pas beaucoup de temps. Je vais essayer de le faire très rapidement. Comme vous pouvez déjà le constater, ce design fait cruellement défaut. Il ne fonctionne qu'avec des groupes et pas de mises en page automatiques ou d'autres choses de ce genre . Vous pouvez le voir ici. Je veux dire, il y a une mise en page automatique ici, je crois, mais, vous savez, c'est juste un bouton ou quelque chose comme ça. Alors maintenant, naturellement, nous recommencerions depuis le début. Vous savez, nous commencerions par créer des boutons cohérents et autres. Mais je ne vais pas le faire. Je vais juste travailler avec ce que j'ai, juste pour vous montrer un petit aperçu de ce à quoi cela pourrait ressembler. Je vais juste le copier-coller pour que nous puissions avoir une version originale, puis peu comme une version modifiée, d'accord ? Donc, tout d'abord, faisons-en le point de départ du flux, et je veux voir à quoi cela ressemble. J'aimerais donc le prévisualiser et voir à quoi il ressemble sur mon écran. C'est bon. Donc, tout d'abord, nous allons essayer de comprendre ce qui se passe ici avec cette section. Je peux voir qu'il y a une image ici avec du texte avec cette image au-dessus. Maintenant, c'est tout à fait utiliser ce type de groupe, mais ceux-ci ne devraient pas du tout être un groupe. Alors, vérifions-le. Maintenant, nous voyons d'abord qu'il s' agit d'une image en arrière-plan, puis qu'il y a une superposition dessus, et puis il y a ce texte Donc, tout d'abord, je vais commencer par recréer cela approximativement, et je vais essayer de voir jusqu'où je peux m'en approcher Nous avons donc trouvé la bonne largeur, et c'est presque la bonne. Donc, ce que je vais faire, c'est essayer de voir le rayon. Donc, en voici six. Je vais donc prendre l'image. En maintenant le contrôle, je vais choisir le remplissage, l' ajouter ici, puis nous avons ce remplissage linéaire. Je vais l'ajouter en haut, mais je vais m'assurer qu'il est plus ou moins similaire, quelque chose comme ça. Alors je vais prendre le texte ici. Il semble que ce soit le cas, est-ce un groupe ? C'est un groupe, donc je vais l'amener ici. Et je vais créer une mise en page automatique en maintenant les touches Shift enfoncées et A. Maintenant, au lieu d'un groupe, c'est une mise en page automatique avec quatre espacements En attendant, il ne s'agit pas d'une mise en page automatique, je vais donc la transformer d'une mise en page automatique, je vais donc la transformer en mise en page automatique et ensuite elle ressemblera à ceci. Je vais reprendre les dimensions ici et je vais faire les bonnes. La largeur est également de 270. Tout d'abord, je vais juste m'assurer que l'image n'est pas recadrée, elle doit être remplie Même si elle n'a pas l' air un par un, le remplissage permet de s'assurer que l'image ne posera pas de problème lors de son redimensionnement. Tu vois à quoi ça ressemble. Cela pose problème. C'est pourquoi nous devons utiliser l'option remplie. Lorsque nous l'utilisons, cela ne devrait pas poser de problème. Ensuite, nous allons nous assurer que le texte est au bon endroit, donc nous allons le placer et nous assurer également que l'espacement et le rembourrage sont corrects Faisons en sorte que cela soit 16 par 16 et arrêtons-y. Nous avons maintenant les mêmes dimensions. Je vais en faire un composant et je vais dire une carte d'article. Je vais le remplacer ici et je vais simplement le coller ici. Ensuite, je vais créer une autre version juste en dessous en utilisant cette image. Je vais juste prendre le remplissage, le coller ici, retirer l'ancien remplissage, mettre la photo ici, et refaire ce remplissage, pas accessoire Ensuite, nous verrons, nous copierons ce texte. La police ici est différente, donc je vais juste la remplacer par Monster Rot on Hole Page. OK. Désolé pour cela Montserrat, remplacez sur la page Hole, sélectionnez Doit être remplacé à un niveau moyen. Cela ne ressemble pas beaucoup, mais ça va. Aucun problème. Alors voici ce qu'il est écrit aujourd'hui. Je vais juste les supprimer, les apporter et les mettre dans un autolayou en maintenant la touche Shift enfoncée dans A. Alors vous le voyez aujourd'hui C'est au sein d'un groupe. Je vais supprimer du groupe et je vais l'ajouter ici. L'espacement ici est de 23. Nous allons en faire 24 juste pour avoir un chiffre correct. Alors nous avons ceci ici. Maintenant, nous pouvons choisir de garder cette image plus ou moins comme une image qui dépend de nous parce qu'elle est un peu et qu'elle s' étend vers la gauche, ce qui est un peu problématique pour moi. Une chose que nous pouvons faire, c'est que nous pouvons avoir dès maintenant sous forme de mise en page automatique. Je vais donc simplement cliquer sur Shift et A. Au lieu que ce soit un groupe, maintenant c'est une mise en page automatique, et puis nous avons, ce type, et cela, tous ces éléments, je vais les transformer en cadre, cliquer avec le bouton droit de la souris, puis nous allons parler de sélection de cadres. Ce que je vais faire, c'est les fabriquer. Je vais verrouiller le format d'image ici en cliquant ici de sorte que lorsque nous les redimensionnerons, je veux dire, si c'est le cas, sortons-les d'un cadre, je les supprimerai en maintenant retour arrière et je vais en faire un groupe avec un gène de contrôle Je vais verrouiller le rapport hauteur/largeur afin que lorsque nous les redimensionnons, ils ne soient pas déformés Ensuite, ce que nous pouvons faire, c'est placer les contraintes vers la droite, celle-ci vers la gauche et celle-ci vers la gauche, puis voyons à quoi cela ressemble une fois que l'arrière est dimensionné. Ce n'est pas trop mal, je pense, non ? C'est bon. Pour le moment, c'est pas trop mal. Maintenant, ce que nous pouvons faire, c'est les assembler dans une mise en page automatique, en maintenant la touche Maj enfoncée. Maintenant, bien sûr, cela va les réorganiser un peu différemment, mais maintenant c'est une mise en page automatique Voyons maintenant ce qui se passe avec le menu. Ici, c'est un rectangle. La première chose que nous allons faire est de le supprimer. Nous n'avons pas de rectangle en arrière-plan. Nous avons juste un cadre. Maintenez F enfoncé, créez un cadre, puis ce cadre contient tous ces trois éléments. Nous allons en faire une mise en page automatique. Juste comme ça, il s'est assuré que l'espacement et tout étaient corrects et appropriés Ensuite, je vais les tenir et les créer dans une mise en page automatique interne, si vous vous souvenez de ce que j'ai fait la dernière fois. Je vais dire que la largeur maximale devrait être de 1 400. Nous pouvons le rendre encore plus petit ( 200) et nous allons le configurer pour qu'il remplisse le conteneur. Nous allons également le définir, je veux dire, maintenant, pas encore, mais nous allons le faire remplir le conteneur plus tard. Nous allons le remplir, rendre blanc. Si vous remarquez que le fond est un peu blanc cassé. Voyons à quoi ça ressemble maintenant. OK. Sympa. Ça n'a pas l'air si différent. Je vais passer à un menu fixe. Parce que j'aime bien ça. Vous pouvez voir maintenant que cela nous arrive et que cela se poursuit. Une chose que je n' aime pas à ce sujet, c'est que cela ressemble à un bouton, mais généralement ce devrait être un champ. Je vais juste l'étendre et le rendre centré à gauche, et je vais le rendre un peu plus lisible. Je vais créer le texte ici, lui donner la même couleur, mais le rendre un peu plus foncé. Et peut-être que je peux rendre le fond un peu plus clair. Ça y ressemble plus. Maintenant, cela ne ressemble plus à un bouton, mais à un champ. OK. Je peux aussi simplement remplir le récipient. À l'heure actuelle, nous pouvons voir qu'il y en a 101. Au lieu de 101, je vais le rendre automatique. Ce que fait Auto, c'est qu'il crée simplement un espacement automatique. Vous voyez que l'actualité sportive est trop étendue. Je vais en faire un câlin. Permettez-moi de remplacer la police ici. Je vais juste lui donner une police différente. C'est bon. Le problème, c'est que tout est proche, ce qui me pose problème. Essayons donc de le comprendre. Au lieu de Auto, nous pouvons lui donner 24. Voyons maintenant à quoi cela ressemble. Ça a l'air un peu mieux. On peut même en faire 36. Cela semble un peu plus naturel. Un peu plus spacieux. Nous avons maintenant compris cette section. Ici, que pouvons-nous faire ? Essayons de comprendre. Ici, vous avez un rectangle avec du football dedans, ce qui est déjà une catastrophe. Ce que je vais faire, c'est créer un cadre à la place. La même couleur, je vais lui donner du rayon et y ajouter ce ballon de football. Maintenant, nous venons de remplacer cet élément ici. Nous allons faire de même pour les autres. Copiez ça, collez-le, et je vais jouer au basket à la place. Nous pouvons également en faire un paiement automatique, et je vais juste avoir la même longueur ici et je vais supprimer ceci et cela Allons-y. Placez-le ici, rincez et répétez. Il n'est pas nécessaire que ce soit parfait. Non, ce ne sont que des images, nous pouvons donc les conserver comme de simples images. C'est tout à fait normal. OK ? Donc, ce que je vais faire, c'est qu'au lieu de les placer l'un à côté de l'autre, je vais tout d'abord choisir tout ce groupe et je vais le réduire. Je vais supprimer le groupe, le dissocier touche Ctrl enfoncée et revenir en arrière Ensuite, je vais les choisir et en faire une mise en page automatique, mais ensuite, en tant que mise en page automatique, corriger la faute de frappe ici. Ça n'a pas d'importance. Ici, mise en page automatique ici. Ici, vous voyez qu'il y a aussi le même problème il y a une image à l'intérieur. Nous allons simplement étendre l'image, l' étendre et je vais la rendre noire en dessous, ou je vais simplement déposer la couleur ici et lui en donner six. Maintenant, cette image n'a pas besoin de cet arrière-plan. Ensuite, je vais les assembler. Maintenant, idéalement, l'espacement devrait être similaire. Ici c'est 31, 30, 31. Faisons en sorte qu'ils soient 36. Que diriez-vous de ça ? Nous allons les assembler et faire de tout cela une mise en page automatique, je vais juste m' assurer qu'ils sont tous à la hauteur. Presque. Je vois qu'il y a ici des éléments inutiles. Je vais tout choisir, puis je vais désélectionner cette mise en page automatique J'ai supprimé tout ce qui se trouvait derrière eux. Bien. Ici, il est dit catégorie, puis je vais en faire une mise en page automatique et l'espacement ici est de 16 Bien. Souvenons-nous de cela. Maintenant, je vais les emballer de façon à ce que, si jamais je les réduis, ils soient emballés comme ça. Nous pouvons également les configurer pour qu'ils soient remplis. C'est également quelque chose que nous pouvons faire. Cela dépend de nous. Vous pouvez voir qu'il est plein. Mais si nous le faisons, nous devons nous assurer qu'ils ne sont pas recadrés, mais qu'ils sont remplis Maintenant, évidemment, cela va nous éloigner un peu cadrage que celui qui l' a fait en a fait Mais pour l'instant, il va falloir prendre ce risque, pas de problème. Je dois aussi le faire ici. C'est bon. Ça n'a pas l'air trop mal. Mais veillons à ce qu'il y ait un minimum. Nous disons que le minimum est de 200. Dès que nous les rendrons trop petits, ils s'effondreront et se retrouveront l'un sous l'autre. Je trouve que ça a l'air plutôt sympa. Plutôt chouette. C'est une très belle réactivité. Nous arrivons ici à une autre partie difficile. Nous les choisirons ensemble et nous en ferons mise en page automatique, avec un espacement uniforme Je veux dire, on n'est pas obligés de faire ça. Nous pouvons en faire une mise en page automatique à part entière. Cela fait donc quatre, puis l' espacement est de 12. Ensuite, nous allons faire une mise en page automatique avec ceci. L'espacement est automatique, il ne devrait pas l'être de préférence. Je veux dire, faisons-en 16. Je vais donc prendre un café, le coller, faire un composant et dire vertical ou horizontal, ce n'est pas une carte. Nous avons une fiche d' article, un article horizontal, puis je vais le supprimer ici, en le basant. Parfait. Ensuite, je vais le copier et je vais prendre le texte ici. Il y a beaucoup de polices différentes qu'ils utilisent ici que je n'apprécie pas parce que cela prend beaucoup de temps à comprendre. Je vais juste refaire ce monstre pourri, à moitié audacieux. OK. OK. C'est bon. Nous l'avons donc copié, non ? Non, désolé, nous ne l'avons pas copié. Copiez-le, collez-le. Boum. Nous allons prendre l'image en maintenant la touche Ctrl enfoncée, coller, la supprimer, copier-coller , reprendre le texte, le mettre ici , prendre ce texte, le coller ici , prendre ce texte, le baser ici, puis nous avons l'image également, prendre, la coller, boum. Nous allons maintenant supprimer ces deux versions et les mettre ici. OK. Et maintenant, ce que nous allons faire, c'est les choisir avec les séparateurs et je vais en faire une mise en page automatique, et je vais les faire vers la droite Ils seront alignés vers la droite. Vous pouvez donc voir le même espacement qu'ils avaient. Bien que nous puissions créer l' espacement, par exemple, nous pouvons techniquement faire en sorte qu'il remplisse toute la partie comme ceci ou simplement comme ça Je veux dire, j'ai aimé la façon dont c'était. Pas de problème Et puis nous avons cette image ici. Il faut penser à tout en termes de mises en page automatiques. Est-il aligné horizontalement ou verticalement ? Ils sont alignés verticalement. Ceci est aligné verticalement avec eux. Tu vois, c'est huit, mais ici c'était 16, peut-être que tu devrais en faire 16, non ? Ensuite, vous les avez alignés horizontalement. Mais d'abord, nous devons en faire une mise en page automatique. Pour ce faire, nous allons créer ce visuel. Nous allons prendre le texte. Je veux dire, voyons ce que c'est, mettons-le de côté. Prenez l'image, faites-en six rayons arrondis, faites ce remplissage. C'est à 60 %. Faites les 60 %, supprimez le remplissage blanc, puis nous allons prendre ce texte et le placer au-dessus de cette mise en page. Nous allons créer une mise en page automatique avec Shift et A. Nous allons en faire 12 au lieu de 14. Vous pouvez voir que ce texte est trop gros, alors je vais juste le serrer dans mes bras. Il semblerait que nous changions simplement le texte. Montserrat, audacieux, rends-le encore plus audacieux ou quelque chose comme ça. OK. Aucun problème. Maintenant, nous allons prendre cette catégorie , nous allons la mettre en ligne. Maintenant, nous allons prendre ceci et nous allons faire de tout cela une mise en page automatique. Maintenant, Figma est intelligente, l'espacement essaie de le rendre similaire pour que ce soit haut et l'autre vers le bas, mais il en fait 358 Au lieu de cela, nous allons simplement dire auto. voiture signifie que, quelle que soit sa taille , le cyclisme va monter et descendre. Je viens de remarquer que l' image s'étire, nous allons donc la remplir à nouveau correctement et nous verrons ce que nous pouvons faire d'autre. Nous allons rendre ces valeurs correctes 16, 16 ou 24, 24, et nous allons supprimer tout ce gâchis ici. Maintenant, nous allons mettre cela sous le feu des projecteurs. Nous allons l'étirer supprimer cette case et créer un cadre à sa place. Ce cadre va inclure tous ces éléments, comme vous pouvez le voir, et nous allons en faire une mise en page automatique. Il va falloir y inclure cela. Nous allons le mettre dans le cadre. Allons-y. Nous allons faire de tout cela une couche automatique, puis nous allons l'étendre ici. Ce que nous allons faire, c'est faire en sorte que ces deux récipients soient remplis. Ils vont partager 50 50. C'est ce qui va se passer. Mais nous allons nous assurer qu'il y a du rembourrage à droite et à gauche En fait, ne créons pas de rembourrage parce que l'image n'a pas besoin de rembourrage, mais nous en avons fait une couche automatique à part entière. Nous allons donc lui donner son propre rembourrage haut et le bas à gauche et à droite, puis nous allons établir la distance qui les sépare de 24 OK. Et nous allons donner cette couleur, qui est cette couleur, je crois, et elle doit avoir un rayon d' angle de six. Mais vous pouvez voir qu'il y a un peu d'espace ici. Nous pouvons donc dire cette image de remplir également la hauteur. Maintenant, il remplit la hauteur de manière à ce qu'il n'y ait aucun espacement entre le haut et le bas. Vous pouvez voir que ça a l'air plutôt chouette, assez similaire. Je veux dire, ici, il y a un peu plus d'espacement. Nous pouvons le faire 36, 36. Maintenant, je pense que c'est plus similaire et qu'il y a moins d'espacement entre l'image et l'autre texte On peut le faire à huit. Ou quelque chose comme ça. OK ? Bien. C'est bon. Génial. Maintenant, ce que nous allons faire, c'est nous assurer que cela est également réactif. Ce qui arrive quand on le rend trop petit, ça arrive. Ce n'est pas l'idéal. Donc, ce que nous allons faire, c'est créer valeurs minimales pour ceux-ci et nous allons dire qu' une fois qu'ils auront atteint 400, ils devront s'effondrer ou passer l'un en dessous de l'autre, c'est ce que je veux dire, nous cliquons sur rien pour que cela se produise Alors maintenant, vérifions-le. OK. Sympa. Mais cette partie n'est pas du tout réactive, alors travaillons là-dessus. Nous allons donc cliquer dessus et les faire remplir, ce pour quoi ils sont déjà configurés. Mais ce que nous remarquons, c'est que certaines choses ne fonctionnent pas. Cela peut donc se situer ici au niveau des composants, et c'est vrai. Donc ici, rien n'est configuré. Nous allons donc faire en sorte que l'image et ce texte, ce cadre, se remplissent tous les deux, afin qu'ils partagent un score de 50 à 50, puis nous allons passer au texte, et il est déjà rempli ici, il est déjà rempli ici. Parfait. Je pense que c' est assez bon. Voyons comment il va réagir maintenant. Comme vous pouvez le constater, il réagit un peu. Nous avons le problème de distorsion de l'image, nous pouvons y remédier. Et nous avons un autre problème , à savoir le fait que le texte ici se chevauche Le problème est un problème de contenu énorme ici. C'est du contenu embêtant, mais il y a quelque chose ici qui n'étreint pas le Qu'est-ce que c'est ? Ce sont ceux-là. Ils devraient remplir en termes de largeur, ils devraient remplir le contenant, mais ils devraient avoir un contenu énorme en ce qui concerne le contenu qu'il contient. Cette option n'est pas disponible pour une raison ou une autre. Maintenant, nous devons résoudre Essayons de comprendre cela ou pourquoi il y a un problème Nous allons donc organiser ce câlin ici. Voyons comment cela fonctionne maintenant. Il y a toujours un problème. OK, donc je pense que nous avons fait une erreur ici parce que c' était un cadre dans un cadre. J'ai retiré le cadre inférieur, donc maintenant il n'y a plus que ce cadre et ceux qui s'y trouvent. Maintenant, vérifions-le. Il n'est toujours pas disponible d'une manière ou d'une autre. Parfois, cela se produit parce que vous êtes un peu trop concentré et que vous devez essayer de comprendre quel est le problème ou où vous vous êtes trompé, ce qui peut devenir un peu délicat heure actuelle, cela ne fonctionne pas du tout, donc nous avons dû faire des bêtises à un certain niveau Il y a un remplissage. Il y a un remplissage. Elles sont remplies. Il y a quelque chose qui se passe. Très bien, donc juste pour récapituler, vous en avez plein. Ici vous avez un réservoir, et ici vous avez un récipient de remplissage. Quand on y entre, ils ne sont plus remplis. C'est là que nous en sommes. Nous allons choisir, il ne s'agit pas d'une mise en page automatique. C'est là que réside le problème. Ils devraient donc avoir un contenant rempli, et tout cela devrait être un câlin. Vérifions-le maintenant. Parfait. C'était le problème. À un certain niveau, nous n'avions pas de mise en page automatique, mais tout devrait être régulé par des mises en page automatiques Maintenant, nous le résolvons. D'accord, chevauchement de texte persiste Nous allons le résoudre en créant le contenu de ce hub Ha. Maintenant, nous allons voir, parfait, cela fonctionne parfaitement. Il faut juste s'assurer que cette image n' est pas recadrée de la même manière ici. Maintenant, vérifions-le. Parfait. Maintenant, je vais vérifier les autres parties et voir ce que nous avons. Nous sommes abonnés à la newsletter. Nous avons tout ce qu'il faut, cool, cool. Essayons maintenant quelque chose avec des contraintes. Je vais l'ajouter à gauche. Désolé, c'est à droite, ceux-ci à gauche, en haut, en bas ou je suppose que c'est ici, je suppose que c'est en bas. Ce type va le mettre au plus bas de l'échelle. Nous allons les mettre à droite, ceux-ci à gauche. Voyons à quoi ça ressemble. Oui, ce n'est pas génial. Et nous allons faire ça à droite et à gauche. Donc, ce n'est pas trop mal, comme vous pouvez le constater. C'est bon. Mais ces parties sont un peu trop longues, je veux dire, nous n'avons pas le temps de tout faire, alors faisons-le jusqu'ici. Maintenant, la prochaine étape que nous allons faire est de nous assurer que tout cela est inclus dans le même cadre. Je transforme tout cela en une mise en page automatique et je le place directement dans ces lignes de quadrillage, qui sont au nombre de 1170 Je ne sais pas pourquoi ces lignes de quadrillage étaient là, je vais m'assurer qu'elles sont quelque peu centrées. Je vais m'assurer que c'est également centré. Je vais lui faire écrire une ligne de sorte que ce soit une ligne vers la droite, puis cette image pourra aller un peu vers la gauche sans problème, car ce n'est pas l'image la plus importante ici. Je veux dire, c'est juste une image, et c'est le texte qui doit être lu. Maintenant que nous avons compris cela, nous devons nous assurer qu' il est réellement réactif. Nous avons donc maintenant cette mise en page automatique et celle-ci sous forme de mise en page automatique, et nous allons maintenant faire de la page entière un automatique, du cadre Alors maintenant, tout cela est un autoayou. Voyons à quoi cela ressemble lorsque nous l'étendons, rien ne se passe car nous devons fabriquer ce conteneur de remplissage, mais nous devons le limiter. Remplir le contenant avec un maximum de 1 200 unités. Voyons maintenant à quoi cela ressemble, rien ne se passe, mais lorsque nous le réduisons, il devrait se réajuster OK, ça n'arrive pas. Pourquoi ? Nous devons tout mettre dans un contenant de remplissage. Nous devons l' ajuster pour nous assurer que toutes les sections qu'il contient remplissent complètement le récipient. C'est bon. Alors maintenant, vérifions-le. OK. Vous pouvez voir que les choses s'adaptent ici. Mais cette région n'est pas géniale. Pourquoi ? Cette zone, je veux dire, comporte des cadres, certaines mises en page automatiques, mais elle n'est pas entièrement mise en page automatique ne s'agit pas d'une mise en page automatique et elle ne remplit pas le conteneur. Ce que nous allons faire ici, c'est le faire ici. C'est une section réservée aux héros, et nous allons faire en sorte qu'elle remplisse le contenant. Alors maintenant, nous l'installons ici et nous allons également faire en sorte que ce récipient remplisse également. Mais comme vous pouvez le constater, cela va prendre trop de place, nous allons donc lui en donner un maximum de 300. Encore moins de 250, n' est-ce pas ? Je ne sais pas Maintenant, vérifions-le à nouveau. OK. Donc, les choses se présentent bien, d'autres choses comme cette région ne sont pas très belles. Ce que je suggère personnellement, c'est d' en faire un cadre d'une manière ou d'une autre. Nous allons donc en faire une sélection de cadres. Je veux dire, pour être honnête, il vaudrait mieux prendre tout cela comme une image. C'est une chose très importante à prendre comme image, car cela aiderait beaucoup. C'est quelque chose que nous pouvons essayer de faire. Comment s'y prend-on ? Nous pouvons le copier, coller ici, et nous en ferons une capture d'écran, juste comme ça. Nous allons coller la capture d'écran. Ensuite, nous supprimerons toute cette image, nous la prendrons et l'ajouterons comme arrière-plan à cette section consacrée aux héros. Nous allons faire de cette section consacrée aux héros une mise en page automatique ajouter le remplissage et l'agrandir beaucoup. Cette section est pleine, mais nous allons en donner un maximum de 400 et nous allons l'étendre un peu comme ça. Juste comme ça, nous l' avons sous forme d'image. Voyons à quoi cela ressemble lorsque nous le réduisons. Alors, tout va bien. Nous allons le faire remplir un récipient. C'est bon. Maintenant, comme vous pouvez le constater, l'image n'est plus lisible. Vous ne pouvez plus le lire, mais soit vous devez vivre avec cela, soit vous pouvez continuer et peut-être verrouiller le rapport hauteur/largeur de manière à ce que, lorsque vous le réduisez, l'image soit également plus petite. C'est quelque chose que tu peux faire. Une chose que j'ai réalisée, c'est que le fond n'est pas entièrement blanc. Mais ici, je suppose que nous l'avons fait très blanc, donc nous pouvons annuler cela, nous allons juste prendre cette couleur. Très bien, nous pouvons simplement demander à Figma de supprimer l'arrière-plan On va le laisser faire son travail ? OK. Maintenant, nous allons vérifier. OK. Maintenant, pour vous assurer que vous avez également toute cette mise en page automatique, c'est prendre tout le corps de la page, vous devez lui donner un peu de rembourrage à droite et à gauche Et quand il s'agit de cela, vous devriez également lui donner un peu de rembourrage à droite et à gauche 24 ou quelque chose Ensuite, nous allons l'étendre un peu. Désolée. Je vais faire le contenu de ce câlin vu de haut. Vous pouvez maintenant voir à quoi cela ressemble lorsque je le redimensionne. Vous pouvez donc voir que beaucoup de ces éléments ont air très soignés. Voici à quoi cela ressemblerait sur un téléphone, un téléphone très blanc ou une tablette. Mais ici, nous avons encore quelques problèmes , à savoir l'emballage. Nous pouvons également créer cette mise en page, remplir le conteneur et lui donner un minimum de 400. Voyons à quoi cela ressemble maintenant. Mais nous devons les emballer. Ils sont déjà emballés. C'est donc 250. On va faire ça, oui, 500 ou quelque chose comme ça. Donc, comme vous pouvez le voir, au fur et à mesure, nous lui donnerons un minimum de 200. Au fur et à mesure que nous en arrivons là, il suffit de descendre. Le problème, c'est que nous avons donné un maximum, donc maintenant cela ne peut pas s'étendre à l'ensemble de la région. C'est donc un problème, et c'est là que les points de rupture entrent en jeu. Ce que nous pouvons faire ici, c'est que je peux les supprimer. Je peux le copier-coller et je peux dire, copiez-le à nouveau, ou faisons simplement une version mobile. ce que je vais faire. Alors je vais dire 393, c'est à ça que devrait ressembler un iPhone. Tout d'abord, je vais m'ajuster, passer à 16 ou je ne sais pas quoi faire. Je vais juste ajuster les choses pour qu'elles soient belles. Supprimons cela. Super, super. Tout cela est beau. Mais ici, il y a un problème parce que ce texte, je crois, a un minimum ou quelque chose comme ça. Cela a un minimum. Nous allons aller de l' avant et atteindre le minimum de 300. Tu vas voir ce qui se passe ici. Mais nous allons venir ici et dire que cela devrait prendre fin à un moment donné et que les minimums devraient être, nous allons fixer un minimum, qui est peut-être de 200 Alors vous pouvez voir maintenant que ça a l' air beaucoup mieux. C'est bon. Maintenant, nous allons y aller. Cet endroit est en désordre. Nous allons donc dire que pour le mobile, uniquement pour le mobile en tant que point de rupture, nous allons supprimer le maximum ici. Nous allons cliquer ici et nous allons voir le maximum minimum. Nous allons supprimer le maximum afin que cela puisse s'étendre au maximum. Et nous allons faire en sorte que le rembourrage de l'ensemble de cette zone soit 16 au lieu de 24, juste pour avoir plus d'espace d'écran. Et vous pouvez voir que c'est un peu un gâchis parce qu'il y a un minimum, je crois, ou Nous allons donc essayer de comprendre cela. Quel est donc le problème ici ? Cela a un minimum, supprimez le minimum, puis tout va tout gâcher comme ça. Je vais dire que je vais essayer de le réparer. OK. Retournez en territoire un peu inexploré. Nous allons donc dire que nous allons essayer de le redimensionner nous-mêmes pour supprimer le minimum Et nous allons dire, d'accord, nous allons dire qu'ils sont verticaux, pas horizontaux. Ensuite, nous allons supprimer le rapport hauteur/largeur ici. Nous allons changer cela. Et peut-être que nous pouvons recadrer l'image dans ce cas uniquement. Nous allons le réduire. Nous allons l'apporter comme ça. C'est ce que nous allons apporter comme ça. C'est en gros ça. Ensuite, nous allons bloquer l'aspecratio juste pour que ce type ne soit pas déformé Maintenant, ce que nous faisons essentiellement , c'est-à-dire que nous pouvons modifier les polices d'ailleurs, je pense que nous pouvons les modifier, les réduire ou les agrandir. Comme nous le voulons. Vous pouvez voir que cette section semble assez horrible par rapport à ce que nous avions ici. Je veux dire, c'était beaucoup plus beau ici. Ici, ça a l'air un peu horrible. Nous pouvons donc les manipuler qu'il s'agisse de texte, d'image, de texte, d' image, de texte, d'image, de texte, d'image, ou ce que nous pourrions même faire, c'est transformer tout cela en un slider, je ne suis pas sûr un slider Même si je ne suis pas sûre que ce serait bien. Mais vous devez vous demander quel est le but de ces boutons. Sont-ils cliquables ? Peux-tu faire quelque chose avec eux ou non ? Mais oui, je suppose que vous pourriez en faire quelque chose que vous pouvez faire glisser à travers un curseur horizontal ou quelque chose comme ça si c'est vraiment nécessaire Oui, c'est donc l' idée de rendre la page Land Dink sous forme mobile optimisée pour les écrans mobiles C'est la raison d'être des points d'arrêt , car comme vous l'avez vu, nous n'avons pas pu le faire parfaitement Même aujourd'hui, ce n'est toujours pas parfait. Comme pour le menu ici, je viens de me rendre compte que nous devons le centrer. Je n'étais pas centré. C'est parfois que l'on remarque ces choses bien plus tard, ici il faut avoir à la place de ce type de menu, je vais le supprimer. Je vais supprimer. Je vais le supprimer. Il vous suffit d'avoir trois lignes pour le menu des hamburgers. Il n'est pas nécessaire que ce soit parfait. Je vais le couper, le coller ici, et je vais les rendre automatiques. Nous y avons maintenant un menu de hamburgers. Ici, nous avons juste besoin de tester ce truc. Comme vous pouvez le voir ici, il y a un problème avec la recherche. Je veux dire, c'est en train de disparaître complètement ici. Peut-être pourrions-nous avoir un minimum pour cela. Nous pouvons dire : « Hé, 100 au minimum ». Lorsque nous le réduirons, il atteindra ce point puis il disparaîtra. Je dirais que c'est un bon compromis. Au lieu de le couper, il disparaîtra simplement et ainsi de suite, parce que nous ne pouvons pas les faire se superposer ou quoi que ce soit d'autre. Ce n'est pas vraiment possible. Mais c'est une démonstration très rapide et grossière de la façon dont vous pouvez transformer une page en quelque chose d'un peu plus réactif. Ce n'est pas facile, mais ce n'est pas non plus la chose la plus difficile au monde. Ce n'est pas de la science des fusées. Alors allez-y et essayez par vous-même. Pour être honnête, cette page était un défi, car elle comportait de nombreux éléments à droite, à gauche, en haut et en bas, ce qui peut vous causer des problèmes. Comme vous pouvez le constater, nous devons tout faire avec les mises en page automatiques Et je pense que travailler avec des mises en page automatiques est le plus propre. Les contraintes, c'est bien, mais elles sont très limitées. Ils t'ont mis dans une situation très difficile. C'est pourquoi j'ai essayé d' éviter de les utiliser cette fois-ci. Je vous ai montré comment vous pouvez les utiliser pour certains éléments comme ceux-ci ici, mais c'est très bizarre, donc je ne le recommanderais pas vraiment Et c'est ainsi que cela se fait. Merci beaucoup de m' avoir écouté, et je vous verrai lors de la prochaine leçon. 10. Microinteractions: Dans cette leçon, j'aimerais donc parler des micro-interactions. Maintenant, ce que nous appelons les micro-interactions sont essentiellement les petites interactions que vous avez lorsque vous utilisez ou naviguez sur un site Web, une application ou tout autre type d'expérience numérique, et vous avez de très petites choses qui changent. Peut-être qu'ils changent de couleur, de forme et de taille. se passe quelque chose et ces micro-interactions vous disent quelque chose, elles communiquent certains types d'informations. , l'une de ces microinteractions que nous utilisons presque aujourd'hui sur tout Pour être honnête, l'une de ces microinteractions que nous utilisons presque aujourd'hui sur tout est l'effet de survol C'est quelque chose que nous utilisons habituellement avec des boutons. Nous les utilisons avec de nombreux éléments, mais surtout avec des boutons. Aujourd'hui, nous allons nous entraîner à faire et essayer de comprendre comment les microinteractions affectent l'expérience utilisateur et essayer de voir comment nous pouvons appliquer cela avec Figma de la manière la plus simple Croyez-moi, c'est assez simple. Donc, si vous n'avez pas encore fait de prototypage, ce sera quelque chose de nouveau pour vous Donc, si vous ne voyez pas ce que je veux dire, vous avez votre page de conception ici, votre onglet de conception. Ainsi, lorsque vous cliquez sur un élément, vous pouvez le configurer en termes de conception, puis vous avez votre onglet prototype ici où vous pouvez configurer les interactions, d'accord ? Comme vous pouvez le voir, lorsque je survole les interactions, elles deviennent blanches Je veux dire, c'est un peu grisâtre. Et lorsque vous le survolez, il devient blanc. Et c'est exactement ce que je veux dire lorsque je parle micro-interactions, car cela me dit que Figma comprend ce sur quoi je suis en train de planer Donc, quand je clique ici, quelque chose va se passer, comme vous pouvez le voir, quelque chose s'est déjà produit. Allons-y et essayons de créer des micro-interactions à l'aide de ces boutons, ces instances d' un composant que nous avions déjà créé dans une leçon précédente. Maintenant, tout d' abord, comme je l'ai dit, allez d'abord dans l'onglet prototypage Maintenant, comme vous vous en rendrez compte, les choses semblent un peu différentes de la normale. Ainsi, lorsque vous choisissez un article, vous verrez ces petits cercles de chaque côté. Et lorsque vous vous en approcherez, ils seront des signes positifs. Il s'agit également d'une micro-interaction. Lorsque vous y arrivez, il s'agit d'options sur lesquelles vous pouvez cliquer et maintenir la souris, puis vous pouvez placer une flèche vers n'importe quelle autre instance ici. Vous pouvez également le placer sur d'autres cadres. Mais pour le moment, pour les besoins de cette leçon, qui concernent les effets de survol, nous allons les mettre en état de survol Hein ? Donc, une fois que vous avez fait cela, vous créez immédiatement une interaction que vous pouvez voir ici. Quelques champs sont déjà configurés pour l'interaction. Désormais, chaque fois que vous créez une interaction, elle se fera en cliquant sur le bouton par défaut. Ensuite, Figma comprend que l'action que nous voulons faire est d'en changer deux Nous changeons donc le bouton de celui-ci à celui-ci, puis il indique que vous passez à Le type est principal, alors changez de type principal. Deux primaires. Ils sont tous les deux principaux, mais quel est leur statut ? C'est le survol. Nous allons donc passer de ce mode au survol principal, et non au mode fantôme. Alors voilà, vous devez comprendre cela en ces termes, vous avez votre déclencheur ici. À quelle heure cette animation ou interaction apparaît-elle ? Comment se déclenche-t-il ? Ici, vous pouvez choisir onclick. Vous pourriez dire glisser lorsque vous faites glisser et, vous savez, maintenez, lorsque vous maintenez quelque chose enfoncé et que vous le faites glisser, et voilà, lorsque vous survolez tout en appuyant sur une touche ou une manette de jeu, vous pouvez placer des boutons ici sur votre clavier pour les configurer comme déclencheur La souris entre, la souris sort, la souris vers le bas, la souris vers le haut ou simplement après un certain délai après 10 secondes. Ou dix millisecondes. Donc, ce que nous allons faire pour atteindre nos objectifs, c'est en planant Nous voulons le configurer de telle sorte que lorsque vous passez le curseur dessus, il passe à Encore une fois, les actions comportent de nombreuses autres options. Vous pouvez le faire naviguer vers. Donc, si vous le souhaitez, lorsque vous appuyez sur ce bouton, vous accédez à une autre page vers laquelle vous pourrez naviguer. Vous pouvez revenir en arrière, revenir à la page précédente, faire défiler l'écran jusqu'à un certain élément, ouvrir un certain lien, définir une variable, définir un mode variable, conditionnel. Ouvrez la superposition, permutez la superposition, fermez la superposition. Ce sont des choses dont nous parlerons un peu plus tard. Mais pour l'instant, nous commençons doucement et modestement. Maintenant, nous avons configuré l'action et maintenant nous devons configurer l'animation. Maintenant, l'animation est parfois configurée par défaut sur ce que vous aviez auparavant. Donc, si vous l'avez eu instantanément, ce sera instantané. Au début, il est toujours configuré comme instantané. Mais vous avez également d'autres animations principales comme Dissolve et Smart Animate. Nous avons ici quelques options de gradation, car vous n'êtes pas autorisé à le faire avec le passage à l'action. Mais si vous choisissez quelque chose comme naviguer vers, vous obtiendrez quelques animations supplémentaires. Si nous le savons, quelque chose ici, vous pouvez le voir se déplacer, donc il s' agit d'un mouvement dans l'animation. Vous pouvez y penser si vous avez déjà travaillé avec PowerPoint. Ce sont vos transitions, n'est-ce pas ? Alors, à quoi ressemblerait la transition et à quoi ressemblerait l'animation Mais revenons également au changement, et le principal et le statut devraient être survolés Nous n'avons donc que ces options pour le moment. Instantanément, essayons-le. Donc instantané signifie en gros que c'était juste un bogue, ne vous inquiétez pas pour ça. Cela signifie qu'une fois que nous y sommes entrés, il prend immédiatement cette couleur. Maintenant, c'est plutôt sympa parce que c'est très rapide. Il réagit très rapidement et vous indique qu'il s' agit d'un bouton avec lequel vous pouvez interagir. Bien que ce bouton soit statique, il ne montre aucune vie, aucune interaction, aucune animation. Instant, c'est bien. Ce que nous pouvons faire, c'est également dissoudre. Une fois que vous avez choisi Dissolve, vous pouvez choisir certaines courbes. Donc, si vous êtes un peu familiarisé avec l'animation, les courbes sont le point de départ de l' animation. Est-ce que ça commence ? Est-ce que cela facilite la prise en main ? Est-ce qu'il démarre très lentement puis prend de la vitesse, ou est-ce qu'il démarre normalement puis s' atténue au fur et à mesure qu'il ralentit à la fin. Vous pouvez entrer et sortir plus facilement, pour que cela ralentisse au début, puis qu'il prenne de la vitesse puis qu'il ralentisse à la fin, ou vous pourriez avoir un rebond, vous savez, ou vous pouvez le faire doucement Il y a ici de nombreuses options différentes que vous pouvez explorer, puis définir la durée. Maintenant, la valeur par défaut est de 300 millisecondes. Voyons donc à quoi cela ressemble. Donc, si vous remarquez que c'est beaucoup plus fluide, vous savez, cela prend du temps, ce qui signifie que si vous survolez très rapidement, ne s'affichera peut-être pas ou ne terminera pas l'animation Mais c'est beaucoup plus fluide et élégant, pour être honnête, car cela prend son temps, ce qui est plutôt sympa. C'est donc celle que je recommande, puis nous avons la dernière option, Smart Animate, qui a également une courbe et une durée Mais Smart Animate vous permet essentiellement d'animer différentes choses, n' est-ce vous permet essentiellement d'animer différentes choses, Donc, pour vous donner une meilleure idée, disons que nous allons le faire, je ne suis pas sûr. Nous allons ajouter, nous allons y ajouter une icône. Ce sera un bouton , puis il y aura une icône. Voici comment nous allons changer cela pour masquer l'icône. Et maintenant, lorsque nous passons la souris dessus, vous allez ajuster la taille , puis une icône y est ajoutée Comme vous pouvez le constater, cela vous montre de la flexibilité. Il montre une animation intéressante. Maintenant, bien sûr, je ne pense pas que ce serait très productif pour un vrai bouton. Vous ne devez pas simplement afficher une animation au hasard, mais c'est une chose intéressante à faire car c'est une bonne façon de voir l'option d'animation intelligente Eh bien, laissez-moi vous montrer la différence avec Dissolve. Donc, si vous le dissolvez, cela ne vous montre tout simplement pas, il ne l'étend pas lentement et en douceur. Ce qu'il fait, c'est qu'il efface et fait apparaître l'autre bouton C'est très irrégulier et assez ennuyeux. Mais lorsque vous utilisez l'option d' animation intelligente, désolé, fluide. Quoi qu'il en soit, je ne pense pas que ce soit quelque chose que vous devriez faire, mais il existe de jolis effets de survol avec lesquels vous pourriez utiliser une animation intelligente, pour Mais pour l'instant, nous n'en avons pas besoin. Nous pouvons nous en tenir à Smart Animate. Ou nous pouvons le faire tel qu'il est dissous. Ils font à peu près la même chose dans ce cas. Maintenant que nous l'avons, nous pouvons faire la même chose pour ceux-ci. Et juste pour vous montrer que c'est une autre façon de le faire au lieu de les tenir, ce qui, à mon avis, est la meilleure méthode car c'est beaucoup plus visuel. Ce que vous pouvez faire à la place, c'est simplement cliquer sur le signe plus, puis créer une interaction, puis vous dites «   déclencher après clic », puis vous pouvez modifier. Fantôme actif principal. C'est principal parce que c'est violet, mais c'est un fantôme et ensuite nous voulons que cela passe d'ici à ici, c' est-à-dire un fantôme planant P Ghost était un fantôme principal. Survol principal, Ghost. Maintenant, vous pouvez voir qu'une flèche vient de se créer elle-même, puis vous pouvez la configurer comme étant dissoute, puis nous pouvons la copier coller et en faire un fantôme, puis voir à quoi cela ressemble. Nous avons commis une erreur. Nous n'avons pas survolé. Nous avons dit « cliquez ». Voyons à quoi cela ressemble maintenant. Vous cliquez dessus une fois , puis il est coloré. Mais cela n'a aucun sens. Supprimons-le donc. Je vais le redémarrer. OK. Il semble qu'il y ait quelque chose de foiré ici, donc je vais juste recharger l'onglet entier Cela arrive parfois. Vous allez juste vous assurer que s'il ne ressemble pas exactement à ce que vous avez ici, suffit de le recharger et il se réparera tout seul Vous pouvez également voir l'effet du survol ici et ici. C'est à peu près la même chose, ce qui signifie que cela fonctionne. Nous pouvons maintenant utiliser Smart Animate pour voir s'il y a une différence, pas vraiment grande, mais bonne Sympa. Passons maintenant au niveau suivant. Je vais revenir et appuyer à nouveau sur la flèche parce que je trouve que c'est plus logique. Je vais faire l'animation pressée. Maintenant, il est écrit « on click », mais nous ne voulons pas « onclick car onClick signifie qu' une fois que vous avez cliqué dessus, cela change ici et ensuite il ne revient jamais Ce que vous allez faire à la place, c'est dire en appuyant sur. Lorsque vous appuyez, il fait plus sombre. Ensuite, il y aura une pression primaire , pas de fantôme. Bien. Ça va faire un joli sourire. Mais j'aimerais rendre les choses un peu plus sombres juste pour prouver ou montrer la différence d'une manière plus prononcée. Voyons à quoi ça ressemble maintenant. Je vais juste cliquer. Je vais juste me rafraîchir. Redémarrer. OK. Maintenant, il y a une erreur parce que cela ne fonctionne pas et je vais vous dire quelle est l'erreur. J'ai créé l'animation ou l'interaction ici. Mais si vous y réfléchissez, lorsque vous passez le curseur dessus, il passe immédiatement à cet état et cet état n'a aucune interaction Donc, ce que vous allez faire, c'est maintenir cette interaction avec la presse, maintenir la touche Ctrl enfoncée, la copier et la coller ici. Maintenant, vous avez exactement la même interaction. Notre curseur montre maintenant cette main avec le pointeur vers l' index vers le haut. Cela signifie qu'il est cliquable. Ici, il n'est pas cliquable. Ici, il y a un effet de survol, mais il n'est pas cliquable. Ici, il y a un effet de survol et il est possible de cliquer dessus. Vous voyez que j'appuie et quand j'appuie, il fait vraiment noir, je veux dire, presque noirâtre, et c'est pour montrer que je clique dessus Hein ? C'est essentiellement ainsi que vous pouvez le faire. Vous pouvez faire la même chose ici. Je peux donc aussi le faire pour plusieurs. Je peux faire une interaction pour plusieurs boutons. Je peux me déplacer, tenir les deux dans mes bras. Et maintenant, comme vous pouvez le voir, je déploie deux flèches, puis je peux dire, tout en appuyant, « OK ». Voyons voir maintenant. Maintenant, allons-y et essayons ceci avec cet autre bouton. Donc, juste pour récapituler, je vais le maintenir ici et le dire en survolant, puis les choisir tous les deux les pointer vers la version pressée et les dire en appuyant Maintenant, voyons voir. Il y a un effet de survol. Génial. Une fois que j'appuie, il fait vraiment noir. Maintenant, ce que vous pouvez faire si vous le souhaitez, choisir ces interactions et, pour le fun, les rendre 100 millisecondes, trois fois plus Lorsque vous cliquez, il réagit beaucoup plus rapidement. Je pense que cela a du sens, car un clic n'est pas quelque chose qui prend beaucoup de temps. Cela se produit instantanément. Bam, bam, bam. Je ne devrais pas prendre trop de temps. Vous pouvez même le rendre instantané si vous le souhaitez. Vous voyez que cela ne fait que clignoter. Mais je pense qu'il est toujours agréable d' avoir une durée très courte. Cela le rend un peu plus fluide. Donc oui, c'est essentiellement ainsi que vous pouvez utiliser les interactions pour créer ces micro-interactions, telles que des effets de survol Maintenant, une chose que nous pourrions faire qui est considérée comme une micro-interaction, mais qui ne se limite pas aux boutons et effets de survol, c'est une animation de chargement Comme je l'ai mentionné, nous pouvons créer de nombreux effets de survol, mais vous avez déjà vu comment cela fonctionne et vous pouvez comprendre comment cela fonctionnera dans d'autres cas Mais une chose que nous pouvons faire est, comme je l'ai dit, de charger des animations. Il existe de nombreuses animations de chargement différentes que vous pouvez faire, mais j'aimerais vous montrer quelque chose. Je veux dire, une méthode que je trouve très régulière, très par défaut qui fonctionne toujours est de le faire comme suit. Tout d'abord, nous allons créer un cercle. Maintenez la touche Maj enfoncée pendant sa création, de sorte que lorsque vous le créez, il conserve un rapport hauteur/largeur verrouillé. Dans ce cas, il n'est ni plus long ni plus large qu'il ne l'est, vous savez, les dimensions ne sont pas compliquées Maintenant, ce que nous allons faire, c'est cliquer sur Stroke et lui donner un trait blanc. Rendons-le un peu plus petit, juste pour la taille, donc peut-être quelque chose comme ça. Et nous pouvons le rendre gris, pour être honnête, un peu grisâtre. Vous allez maintenant le copier-coller. Nous avons donc maintenant une deuxième version , puis copiez-la et collez-la à nouveau, mais supprimez le trait et donnez-lui une couleur violette. Maintenant que nous avons cette couleur violette, nous avons trois cercles différents. Ce sont les mêmes, puis nous avons le cercle de couleur violette. Maintenant, pointez une fois que vous êtes sur le cercle, vous trouverez ce petit cercle ici, qui vous permet de découper le cercle. Vous allez aller de l'avant et vous allez créer peut-être un quart. Nous avons maintenant 25 % d'un cercle. Et lorsque nous le faisons pivoter, il pivote à l' intérieur du cercle, ce qui est un effet intéressant et c' en fait l'effet que nous voulons obtenir. Ensuite, nous allons cliquer dessus et cliquer sur le cercle avec le trait en dessous. Et nous allons aller de l'avant et passer au masque. Une fois que vous avez fait cela, le trait masquera ce quart de cercle, puis il donnera l' apparence d'une barre de chargement. Tout ce que nous avons à faire, c'est de faire pivoter pour donner l'effet que quelque chose se charge. Maintenant, bien sûr, nous pouvons également passer à autre chose et épaissir un peu le trait. Donnons-lui quatre allons-y et donnons-en quatre, d'accord ? Il s'agit donc maintenant d'un cercle de chargement épais. Mais maintenant, la question est de savoir comment animer cela ? Alors allez-y, mettez-les dans un groupe, regroupez-les avec le bouton droit de la souris et regroupez la sélection ou regroupez simplement G, désolé, contrôlez simplement G, puis faites-en un composant. Nous allons donc écrire une animation de chargement. Vous allez créer une autre variante. Dans cette variante, vous allez maintenir ce groupe de masques, puis vous allez le faire pivoter de 25 %. Ensuite, vous allez en créer un autre, et vous allez le faire pivoter vers l'autre, je veux dire, un peu plus. Comme vous pouvez le voir, nous le faisons pivoter ici 90 degrés, puis 90 degrés supplémentaires, puis au final, nous allons faire un dernier tour de 90 degrés. Il va donc atterrir à peu près ici. Cela signifie donc qu'il s'agit essentiellement de vos images clés. C'est donc la première image , puis elle va se déplacer jusqu' ici, puis elle va venir ici et pivoter vers ici, puis elle va revenir en arrière. Voici donc les quatre cadres principaux que nous avons, d'accord ? Vous allez donc y aller, conserver cet atout, l'apporter ici. Au lieu de cliquer, ce sera après le délai, de zéro milliseconde et le délai sera réglé par défaut à un, ce qui ne pose Alors ne modifiez rien ici, rendez-le simplement animé et linéaire de manière intelligente Maintenant, il devrait se déplacer linéairement, il va falloir 100 millisecondes, soit un dixième de seconde, pour aller d'ici à là Nous pouvons maintenant étendre cela et faire exactement la même chose. Après le délai, zéro, c'est tout. Rincez et répétez après le délai zéro, puis nous allons fermer cette boucle. Nous allons revenir au premier après le délai, zéro. Alors testons-le. Nous allons le mettre ici au milieu et voir à quoi il ressemble. Redémarrer. Maintenant, comme vous pouvez le constater, tout se passe très bien. Maintenant, si vous le souhaitez, vous pouvez configurer la première animation pour faciliter l'entrée et la dernière pour qu' la première animation pour faciliter l'entrée et la dernière pour elle soit plus facile à utiliser. Voyons quel type d'effet cela va donner. Comme vous pouvez le constater, il y a un bel effet de ralentissement ici. Mais je recommande d'entre eux de venir ici, de tous les choisir, de passer aux interactions et de faire soit peut-être 300 millisecondes parce que c'est beaucoup trop rapide. En revenant, je vais les faire 200 Cela a l'air plutôt sympa ou vous pouvez simplement le rendre linéaire là où cela ne s'arrête pas du tout. Mais je pense que c'est plutôt bien. Maintenant, la question est de savoir comment faire pour que cela apparaisse lorsque nous appuyons sur un bouton . C'est une très bonne question. Allons-y et supprimons ces boutons. Supprimons ces boutons, créons un bouton ici et disons traiter ou envoyer la facture. Ensuite, nous allons le centrer. Nous allons également centrer cela. Mais au lieu que cela soit là, nous allons le supprimer et commencer à travailler avec des superpositions, ce dont je parlerai un peu plus tard Mais ce que nous allons faire ici, c'est le maintenir, nous l' apporterons ici et nous le dirons lorsque vous cliquerez sur un clic, vous allez ouvrir superposition et tout sera centré, puis vous pouvez choisir de fermer l'aile en cliquant sur l'extérieur et de teinter l' arrière-plan en noir, l'animation sera dissoute, par exemple Voyons maintenant à quoi cela ressemble. J'appuie sur Envoyer la facture, puis nous obtenons cette animation de chargement. Mais supprimons simplement ce truc d'arrière-plan. Je vais redémarrer, cliquez ici, et vous pourrez voir que cette animation est en cours. Maintenant, c'est en cours de traitement. Tu pourrais faire un pas de plus. Vous pourriez aller plus loin et vous pouvez essentiellement faire en sorte que cette animation s'arrête au bout d'un moment. La façon de le faire est d'aller de l'avant et de créer un cadre. Supprimez le fond, ajoutez-y ce cercle, centrez-le, puis connectez-le au cadre extérieur, puis accédez au cadre et ajoutez une interaction en disant qu'au bout de 4 000 millisecondes, soit 4 secondes en 4 secondes, vous devez fermer Maintenant, regardez ce qui se passe. Nous allons juste ouvrir ce cadre Une fois que j'aurai appuyé sur sind invoice, j'aurai l'animation pendant 4 secondes, puis elle disparaîtra. Juste comme ça. C'est donc très intéressant car cela imite le processus envoyer une facture ou à créer une animation, et ce sont les petites interactions qui indiquent à l'utilisateur ce qui se passe, ce qui s'est passé, ce qui va se passer Donc, une fois que vous avez fait cela, vous dites « envoyer une facture », puis vous obtenez ce petit cercle. Ça part, ça charge. Et alors, idéalement, vous devriez ici, la facture a été envoyée avec succès, peu importe. Tu sais, c'est donc l'idée même. Voici comment créer un excellent ensemble de micro-interactions qui communiquent efficacement avec l'utilisateur pour lui faire part de ses commentaires, pour lui faire savoir que vous êtes en train de survoler un bouton Vous cliquez, vous êtes en train d'appuyer sur un bouton. Vous avez maintenant une animation en cours de chargement, ce qui signifie que quelque chose est en cours de traitement. C'est essentiellement ainsi que vous pouvez procéder et créer une animation de chargement de manière très simple. Bien sûr, comme je l'ai dit, vous pouvez le faire manière beaucoup plus complexe ou cool, mais c'est quelque chose que vous pouvez essayer vous-même. Merci beaucoup de m' avoir écouté, et je vous verrai lors de la prochaine leçon. 11. Interactions entre défilements et gestuels + maîtrise de Smart Animate: Bonjour à une autre leçon du cours avancé Figma. Dans cette leçon, nous allons aborder plusieurs concepts, notamment le débordement, le défilement, le geste, les animations ou les Ce sont tous des concepts très différents, je dirais, mais ils sont étroitement liés uns aux autres d'une manière ou d'une autre. Ils sont tous interconnectés. Il peut sembler qu'est-ce que cela a à voir avec cela ? Qu'est-ce que le débordement a à voir avec le défilement ? Mais si vous avez un peu d'expérience en programmation, vous savez probablement que ces deux termes sont quelque peu liés. Je souhaite clarifier les différences entre ces actions tout en vous montrant comment vous pouvez procéder et configurer vos propres interactions uniques. Dans d'autres leçons , nous avons parlé des micro-interactions, c' est-à-dire de l'idée d'avoir un très petit effet qui améliore votre expérience d'une manière ou d'une autre. Et l'exemple que nous avons pris était un bouton. Donc, juste pour nous relier à cette leçon, lorsque vous avez un bouton et qu'il produit un effet Her, c'est très simple et vous n'en avez pas absolument besoin. Vous pouvez simplement le supprimer. Vous n'avez pas besoin d' avoir un effet Her. C'est juste un objet plus ou moins esthétique qui possède également une fonctionnalité qui montre à l'utilisateur que c'est cliquable C'est quelque chose sur lequel vous pouvez cliquer ou avec lequel vous pouvez interagir d'une manière ou d'une autre. Mais c'est plutôt à petite échelle. Ce dont nous allons parler aujourd'hui concerne un peu plus la macro, car il ne s'agit pas simplement d'une question d'esthétique, mais plutôt de la façon dont vous pouvez interagir avec les objets pour obtenir plus d'informations ou pour arriver à quelque chose mais plutôt de la façon dont vous pouvez interagir avec . Discutons moins, travaillons et essayons davantage. Laissez-moi vous montrer de quoi je parle. Je vais donc aller de l'avant et ouvrir juste pour que nous puissions le tester. Ici, nous avons plusieurs manières différentes d'avoir un trop-plein. Je sais que pour le moment, tu ne sais pas ce qu'est un trop-plein. Je vais vous l' expliquer assez facilement. Overflow est en fait très similaire à l' idée du défilement Le trop-plein est l'idée que lorsque vous avez un cadre, comme celui-ci, certains éléments se chevauchent. Comme vous pouvez le voir maintenant, lorsque je passe en revue les couches, vous pouvez voir que ces cartes s'étendent hors du cadre. Ici, nous commençons à avoir un problème. C'est le fait qu'il y a des informations en dehors du cadre. La question est de savoir comment y parvenir ? La réponse se trouve dans le défilement. Il s'agit en fait du défilement, du fait que vous pouvez faire défiler la page verticalement, horizontalement ou dans les deux Mais le terme officiel que Figma utilise pour cela est « trop-plein Je vais juste procéder et les configurer comme points de flux. Nous allons avoir la verticale, puis l' horizontale. Et les deux. Allons l'essayer. À l'heure actuelle, cela fonctionne déjà. Il défile vers le haut et vers le bas. En ce qui concerne l'horizontalité, comme vous pouvez le constater, c'est de cela que je parle. C'est le fait que quelque chose peut défiler horizontalement de droite à gauche. Et vous pouvez voir que cela n'a rien à voir avec le haut et le bas. C'est juste à droite et à gauche. Il n'y a pas de haut en bas. Voici un exemple de carte qui défile dans les deux sens Vous avez probablement déjà vu n'importe quel type d' application cartographique que vous utilisez personnellement, et vous pouvez constater qu'il fonctionne exactement de la même manière. Vous faites simplement défiler la page dans les deux sens. Ils sont très, très faciles à configurer. Pour ce faire, il faut d' abord créer un cadre. Maintenant, ce cadre devrait de préférence être une mise en page automatique, mais ce n'est pas obligatoire. Lorsque vous créez un cadre, vous allez de l'avant et nous avons ici un cadre. Nous avons plusieurs articles dedans. Assurez-vous donc que vous avez des objets qui quittent le cadre. S'ils ne les quittent pas, cela ne fonctionne pas. Si vous avez ce cadre, je l'ai transformé en mise en page automatique, comme vous pouvez le voir, j'ai ajouté ces éléments et j'ai copié, collé, collé, collé Cela peut être n'importe quel type d'application contenant des listes, et je me suis assuré qu' il y en avait trop. Une fois que vous l'avez fait, vous allez passer sur le cadre qui contient ces éléments débordants Vous allez passer au prototype. OK. Ensuite, vous allez voir ici comportement de défilement et sous comportement de défilement, vous verrez un débordement, et c'est là que vous allez cliquer sur Vertical Maintenant, normalement, il est configuré sans défilement. Voyons à quoi cela ressemble. Vous ne pouvez pas vraiment faire défiler la page. J'essaie de faire défiler la page, ça ne marche pas, puis on va revenir à la verticale, et c'est là que ça marche. OK. C'est essentiellement ainsi que vous pouvez le faire. Et tu pourrais faire la même chose ici. Mais ce que nous avons fait ici est un peu plus différent. Nous n'avons pas fait de l'ensemble du cadre une mise en page automatique, mais nous avons créé une mise en page automatique uniquement pour la partie à faire défiler et à faire glisser est cette partie que je veux dire, et j'en ai fait un cadre. Maintenant, ce cadre est une mise en page automatique avec plusieurs éléments. Mais encore une fois, vous devez vous assurer que le cadre ne les contient pas tous. J'aurais pu faire en sorte qu'il embrasse le contenu. Mais quand tu fais ça, ça devient un peu difficile. Cela ne fonctionne pas ou peut fonctionner un peu, mais pas exactement comme vous le souhaitez. Ce que vous faites, c'est le rendre plus petit et, de préférence, vous devriez le rendre aussi grand que la zone dans laquelle il doit être vu. Normalement, c'est dans cette zone qu'il faut voir. Maintenant, bien sûr, vous voyez toujours cette partie, mais l'idée est que cela ne compte pas car il y a du rembourrage à droite et à gauche Vous pouvez voir ici qu'il y a ces marges. Et aussi par la droite. Cela ne compte pas. Tout ce qui compte, c'est ici, c'est essentiellement comme ça que vous pouvez le faire. Donc, si je voulais le démonter, je le remonterais. Je vais copier cet article. Permettez-moi de supprimer cela, par exemple. Je vais le copier et je vais supprimer le cadre entier. Maintenant, ce n'est plus un cadre. Je choisis tous ces éléments, puis je maintiens les touches Shift et A. J'en fais directement un cadre avec une mise en page automatique. Et puis il y en a 15 , en gros, c'est l' espacement entre eux. Au lieu de faire quoi que ce soit, je vais passer au prototype et au scroll behavior overflow, et c'est là que je vais passer à l'horizontale OK. Mais nous n'y sommes pas encore. Nous n'y sommes pas encore. Cela ne fonctionne pas. Tu dois le réduire. Encore une fois, comme je l'ai dit, faites en sorte qu'il n'apparaisse que dans la zone normalement visible. Et quand vous le faites, cela fonctionne exactement comme ça. Super facile. C'est essentiellement ainsi que vous pouvez le faire. Ce n'est pas grave. Revenons juste en arrière pour le remettre comme avant, et c'est tout. Maintenant, pour en venir à la dernière option, nous avons un cadre. Je n'en ai pas fait exprès un autoau. Donc, dans ce cadre, vous pouvez voir que j'ai ajouté une image. Ce n'est qu'une image. Mais vous pouvez créer votre propre carte avec beaucoup de détails. Cela va prendre beaucoup de temps, mais assurez-vous que cette carte est placée dans un groupe ou un cadre afin de pouvoir tout maintenir ensemble, comme sur cette image. Ensuite, vous allez simplement placer cette image où vous le souhaitez. Je l'ai juste gardée au centre, puis je suis passée le cadre et j'ai simplement cliqué dans les deux directions. Et c'est tout. C'est ainsi que vous pouvez créer une carte qui défile dans les deux sens Passons maintenant à autre chose qui concerne le défilement, mais qui ne concerne pas exactement le défilement mais qui ne concerne pas exactement C'est plus ou moins une question de positionnement. Appelons simplement cela le positionnement. J'ai amené ici exactement la même situation de défilement vertical que nous avions Mais ce que j'ai fait ici, je les ai mis dans un cadre, tout cela dans un cadre, et j'ai fabriqué ce cadre. Je l'ai gardé en tant que mise en page automatique, mais je les ai verrouillés ici. Nous avons maintenant ce qu' on appelle le positionnement. Il y a plusieurs choses dont j'aimerais vous parler. L'un d'entre eux, et c' est très important. C'est ce que vous appelez une barre de navigation. Au fait, ces objets, juste ces éléments, je les ai obtenus grâce à des actifs matériels. Il s'agit d'un kit de conception de matériel Android. Je viens de le récupérer de là. Vous pouvez l'obtenir et il est assez réactif, fonctionne très bien, juste pour que vous puissiez essayer des choses. Je vais le conserver et l'intégrer à la mise en page automatique. Mais je vais cliquer ici, qui ignore essentiellement la mise en page automatique et bloque cet élément de la mise en page automatique Je l'affiche et je le place ici Maintenant que je l'ai mis ici, c'est essentiellement ce que nous pourrions appeler une barre de navigation. Je veux dire, abréviation de barre de navigation. Il s'agit de la barre qui permet de passer d'un onglet à l' autre. Maintenant, normalement, ce bar devrait y rester. Allons en faire un flux et appelons-le barre NAP. Mais maintenant, ce que vous voyez, c'est que cela ne reste pas là. Pourquoi ? Parce que c'est un cadre défilant que nous avons créé ici. Vous pouvez faire défiler tout ce cadre. Il existe une solution et cela concerne le positionnement. Tout ce que vous avez à faire est de passer au prototype, de la conception au prototype et de passer à la position. Au lieu de dire « Scroll with parent », qui est la valeur par défaut, allez-y et choisissez «   Sticky » ou « Fixed », d'accord ? C'est donc ce que tu dois faire. le moment, nous ne pouvons pas choisir fixe, et la raison en est que nous l'avons placé dans un cadre. Il y a donc un cadre dans le cadre entier. Ce que vous devez faire, c'est placer un cadre dans un cadre pour qu'il y en ait deux imbriqués. Nous allons le couper avec Control X, et nous allons le coller ici. Assurez-vous donc de ne pas le mettre dans un autre cadre , puis nous viendrons ici et nous pourrons choisir le correctif. Cela signifie rester en place. Maintenant, testons-le. Comme vous pouvez le constater, il reste en place et vous pouvez désormais passer d'une pièce à l'autre. C'est une fonctionnalité vraiment intéressante que vous pourriez utiliser. De nombreux sites Web les utilisent en haut de la page. Vous avez votre propre menu, de nombreuses applications les utilisent en bas. Il existe différentes normes communes. Mais tout ce que vous devez savoir, c'est que vous pouvez corriger ce problème à sa place en utilisant cette fonction de positionnement, mais nous avons encore une autre fonctionnalité. Je vais donc utiliser cette étiquette. Ce sont essentiellement des catégories. Je vais les insérer ici et les retirer. Je veux les insérer entre ces éléments, ce qui est difficile à faire. Je vais juste le couper avec Control X et je vais le coller ici. Je vais juste le garder à l'extérieur. Maintenant, dans ce cadre, nous avons ceci, ces étiquettes, puis nous les avons, d'accord ? Si je l'ai gardé à l'extérieur, c'est parce que je veux qu'il soit collant. Que signifie Sticky ? Voyons voir. Sticky, c'est essentiellement lorsque vous choisissez le positionnement ici, c' est-à-dire que vous vous arrêtez sur le bord supérieur. Cela signifie donc que cet objet n'est pas réparé, mais une fois que vous l'avez trouvé, il reste avec vous, d'accord ? Donc, comme vous le remarquez, ce mouvement vous accompagne. Beaucoup d'applications l'utilisent, surtout si vous faites défiler une liste de choses, puis que vous avez vos filtres ici Par exemple, disons qu'il s'agit d'une application musicale, ce serait, je ne sais pas, la musique pop ou je ne sais pas, ce serait du rock , du metal et du country. Quoi qu'il en soit, vous avez ces étiquettes et vous êtes en train de baisser, puis vous pouvez simplement choisir parmi elles. Ils restent donc au top, de sorte que lorsque vous descendez, vous pouvez toujours choisir parmi eux. Cependant, nous avons un problème ici, et c'est un problème que vous pourriez rencontrer. Lorsque nous faisons défiler la page ici, nous nous rendons compte que tous les autres articles figurent au-dessus de nos étiquettes, n'est-ce pas ? C'est foutu. Pourquoi ? Je veux dire, l'étiquette devrait être sur le dessus, non ? C'est comme ça que ça devrait être. C'est comme ça que je le sais. Eh bien, c'est vrai, mais nous pouvons résoudre ce problème de différentes manières. Tout d'abord, accédez à votre mise en page automatique et assurez-vous que vos jetons ne sont pas transparents. S'ils ne sont pas remplis, ils seront, bien sûr, transparents et vous allez voir à travers eux. Tout d'abord, nous réalisons qu'ils sont transparents. Alors allez-y et donnez-leur une couleur ou assurez-vous simplement que l' ensemble du cadre ici a une couleur. Je peux voir que l'ensemble du cadre est rempli, nous n'avons donc pas besoin de remplir chacun d'entre eux. Ce cadre entier est plein, mais il est toujours en cours de transparence. La raison en est que c'est parce qu'il apparaît derrière ces éléments. Mais en même temps, je veux dire, c'est une mise en page automatique. Donc, si je le déplace vers le bas, il n'apparaîtra pas. Je veux qu'il apparaisse, mais en même temps, je veux qu'il apparaisse devant le texte. Eh bien, il existe une solution rapide à ce problème. Il suffit d'accéder à l' ensemble du cadre qui contient ces éléments. Et puis tu viens ici. Ainsi, dans Autoayout, vous avez cette option de réglage ou de réglage . Et puis ici, vous verrez Canvas empiler et il est écrit « dernier en haut Cela signifie donc que les derniers éléments sont considérés en plus de ceux situés au-dessus d'eux. C'est donc au-dessus de cela, et c'est exactement le problème que nous rencontrons. Nous allons donc simplement aller de l'avant, l' inverser et le faire en premier. Et juste comme ça, maintenant les étiquettes sont au-dessus de ces éléments, je veux dire, de tous. Nous avons donc maintenant ce menu fixe, et nous avons ce menu autocollant ou ce n'est pas exactement un menu, mais ces bannières autocollantes ou étiquettes autocollantes que nous avons au-dessus. C'est essentiellement ainsi que vous pouvez utiliser différents comportements de positionnement à votre avantage. De cette façon, vous pouvez configurer votre application mobile ou votre site Web pour qu'il soit un peu interactif. Donc, dans ce sens, ce ne sera pas ennuyeux, il vous suffira de faire défiler les éléments, mais il sera également possible de montrer aux utilisateurs des éléments et les corriger ou de les coller s'ils en ont besoin, d' accord, alors gardez à l'esprit juste à titre de note. Parfois, lorsque vous faites cela, vous avez des problèmes, comme par exemple, ici, nous avons la barre NAP qui apparaît comme si elle se trouvait derrière le texte Mais quand on passe au design, cela s'avère tout à fait normal. Ainsi, parfois, avec ce comportement de défilement associé à ces positionnements, vous pouvez constater une certaine différence entre votre design, ce que vous faites ici et l'affichage Alors gardez cela à l'esprit. Il est un peu difficile de modifier des éléments car il semble que quelque chose ne va pas ici, mais ce n'est pas le cas. Alors gardez cela à l'esprit. OK. Maintenant, il y a encore une chose que j'aimerais vous expliquer, et c'est en fait l'idée des gestes. Vous avez probablement utilisé une application contenant des gestes. Je pense que la plupart des téléphones portables d' aujourd'hui utilisent des gestes, et ce dont je parle, c'est du fait que lorsque vous faites défiler ou glisser votre doigt du bas de l' écran vers le haut, quelque chose se produit et c'est en fait le fait que vous fermez votre application Et lorsque vous faites défiler et maintenez votre doigt au-dessus, vous faites défiler la page comme si vous glissiez du le bas et maintenez la touche enfoncée, vous faites défiler la page depuis le bas et vous le maintenez au-dessus Ce qui se passe, c'est que vous voyez généralement toutes les applications ouvertes , etc. Et lorsque vous faites défiler l'écran de haut en bas, vous pouvez également voir votre centre de contrôle vos paramètres Wi-Fi ou autre C'est donc quelque chose que vous pouvez également appliquer ici. Je vais vous donner un exemple. De nombreuses applications ont ces boutons qui vous permettent basculer entre les différents onglets de votre Nabbar. Mais certains d'entre eux ont également le mouvement de balayage, et c'est quelque chose que nous pouvons mettre en place Voici comment vous pouvez le faire. Ce que je vais faire maintenant, c'est choisir cette page horizontale, et je vais apporter celle-ci et celle-ci, et je vais les amener ici. Nous allons les supprimer et les placer comme deuxièmes onglets. Maintenant que nous voulons choisir cette barre de navigation, il suffit de monter, aller dans le cadre et d'ouvrir les couches, et nous verrons dans la partie fixe qu'il est écrit barre de navigation fixe et parchemins Ce sont les éléments qui défilent avec vous et vous allez voir tous les autres. Mais pour l'instant, nous allons juste opter pour le correctif, d'accord ? C'est donc celui-ci que nous voulons. Et ce que nous pouvons faire, c'est copier ceci et le coller ici dans l'horizontale. Nous l'avons collée ici, ce que nous allons faire, c'est choisir cette étiquette centrale, et nous allons dire sélectionnée, et nous allons supprimer celle sélectionnée d'ici Voici notre onglet au milieu. Ensuite, nous allons le répéter. Copiez-le, collez-le, assurez-vous que c'est corrigé, puis nous allons choisir celui de droite, le sélectionner. OK. Maintenant, normalement, de préférence, vous devriez essentiellement les changer. Donc, si je viens ici et que je les choisis, je peux les changer. Je peux lui donner une autre icône. Je veux dire, ici c'est une étoile. Il y a beaucoup d'icônes différentes ici. Disons que celle-ci est une carte. Voyons s'ils ont quelque chose à voir la carte ou disons qu' il s'agit simplement d'une recherche. Ensuite, je viendrai ici et je choisirai également la recherche. Et puis ici aussi. Pour le second, je ne sais pas, je vais juste garder l' étoile, et pour le premier, laisse-moi choisir quelque chose. Je vais juste avoir la flèche de jeu. Alors je ferai la même chose ici. Je vais juste jouer. Maintenant, normalement, il serait logique que vous l'ayez en tant que composant afin de ne pas avoir à le changer à chaque fois. Quoi qu'il en soit, maintenant que c'est fait, nous allons le configurer de telle sorte qu'en un seul clic, vous puissiez les faire défiler. Et voici à quoi ressemblerait un bouton normal. C'est ainsi que nous l'avons toujours fait. Donc, la façon dont nous procéderions serait de les choisir, par exemple, les apporter ici et dire en cliquant, naviguez jusqu'à ceci. Je veux dire, ça peut être instantané ou ça peut être intelligent. C'est donc une bonne façon de le faire. Et nous pouvons choisir celui du milieu, celui-ci et celui-ci, puis nous pourrions simplement l'amener au cadre central. Enfin, nous pourrions les choisir et les diriger. Oups, choisis le mauvais. Je vais choisir cet élément, étiquette et cette étiquette, et je vais les faire mener ici. Il suffit de tenir le plus et de les apporter ici. Maintenant qu'ils vont y accéder , vous n'avez pas besoin de le configurer. Tout va bien. Maintenant, testons-le. Je clique ici, ça y va. Parfait. C'est plutôt chouette car cela vous permet simplement d'accéder à l'onglet dont vous avez besoin. OK, alors comment pouvons-nous résoudre ce problème ? Eh bien, il existe une solution propre. Vous voyez, nous l'avons beaucoup connecté ici. Nous avons eu des interactions partout. Donc, ce que vous allez faire, c'est choisir les options de glissement dont vous avez besoin. C'en est donc une. C'en est une. Et ce sont des options de glissement. Ce n'en était pas une. C'en est une. Maintenant, je pense que nous les avons tous. Ce que vous allez faire, c'est passer à votre animation de glisser-déplacer. Au lieu de Smart Animate, vous allez choisir Move in ou Push. Push a l'air très sympa. Je vois maintenant que nous n'avons pas choisi toutes les options de dragage. Faisons-le un par un. Vous allez vouloir faire glisser le pointeur d'ici à là. Cela signifie qu'il doit venir de la droite vers la gauche. Comme ça. Et en même temps, il y a le type d'animation opposé, de droite à gauche, qui devrait être comme ça. Maintenant, testons-le par vous-même. Boum. Juste comme ça, on peut passer de la droite à la gauche. C'est exactement le type d'animation que nous aimerions avoir. Mais il y a un problème. Je regarde la barre de navigation. Il change également d'une manière étrange. Eh bien, la solution consiste à cliquer sur animer les couches correspondantes Je vais aussi choisir l'autre. Cela garantit que s'il existe une couche correspondante comme cette barre de navigation, elle ne sera pas affectée Mais au lieu de cela, il serait animé d'une certaine manière. Comme vous pouvez le constater, c'est exactement ainsi que cela fonctionne. C'est vraiment sympa. Allez-y et essayez-le. Je l'ai également connecté à la barre de navigation, mais vous n'en avez pas vraiment besoin Je vais juste le supprimer . Tu n'en as pas besoin. Maintenant, allons-y et voyons ce que nous pouvons faire. Nous allons également les choisir. Donc celui-ci, de droite à gauche. Cela signifie que l'animation doit être comme ça, et maintenant nous allons choisir le contraire. Ça devrait être comme ça. Qu'est-ce qu'on a d'autre ? Rien d'autre ? Vérifions-le. Nous avons oublié. Nous devons nous assurer qu' il existe des couches correspondantes animées C'est le paramètre que nous voulons et nous allons maintenant le tester. C'est difficile avec celui-ci parce que vous avez une carte, vous ne pouvez pas vraiment la faire défiler ou faire le geste, vous devez donc faire attention à ce sujet. Mais voyons voir, je suis allée d'ici à ici, et je suis également allée là-bas. Mais comme vous pouvez le constater, certains problèmes surviennent parfois parce qu' y a pas de contexte ici. Elle rencontre donc parfois des difficultés. Et normalement, cela n' aurait pas de problème, mais comme cela va vers la gauche, il y a un problème. Maintenant, le moyen de résoudre ce problème est de s' assurer que les éléments tels que, par exemple, ce cadre ont un remplissage blanc. Lorsque vous faites défiler la page, ce n'est pas transparent, il n'y a rien derrière. Cela garantit qu'il n'y a pas de problème et pareil ici, nous pouvons nous assurer que tout cela, nous pouvons tous les mettre. Nous pouvons les mettre dans un cadre, leur donner un peu de rembourrage, etc., et nous pouvons simplement nous assurer qu'ils ont un fond blanc Maintenant, quand on le teste, oui, je veux dire, c'est toujours problématique, non ? Donc oui, tu dois faire attention. Je veux dire, parce qu'il se passe autre chose ici. Tu sais, c'est quelque chose à surveiller. Vous devez vous assurer que vous êtes prêt à face à ce type de problème. Assurez-vous d'essayer de les résoudre à votre façon. Mais comme je l'ai dit, il s' agit d'un processus un peu bogué. Cela ne fonctionne pas toujours parfaitement, et vous devez vous assurer de travailler dessus. Comme vous pouvez le voir ici avec la barre de navigation, certains problèmes se produisent, mais vous ne devez pas accepter de devoir essayer de les résoudre d'une manière ou d'une autre Peut-être qu'une solution pour cela est de faire en sorte le drag fonctionne également avec la barre de navigation elle-même. En tenant toute la barre de navigation, je pouvais la faire glisser et faire passer vers la gauche comme ça Voyons comment cela fonctionne. Donc, vous voyez, avec la barre de navigation elle-même, je peux le faire Quoi qu'il en soit, c'est logique. Je veux dire, je fais défiler Je suis en train de regarder ma carte. Je ne veux pas aller ailleurs. Mais si je vais assez loin, ça défilera. Si je vais loin vers la gauche, ça marchera. Apparemment, pas tout le temps. Mais oui, oui, assurez-vous que cela fonctionne avec le menu avec la barre de navigation et vous êtes prêt à partir Oui. Mais mis à part ces bogues, c'est essentiellement ainsi que vous pouvez utiliser les gestes, et pas seulement avec cela, pas seulement avec la navigation. Il existe de nombreuses animations différentes que vous pouvez réaliser. Alors allez-y, essayez-les, voyez comment ils fonctionnent pour vous. Et c'est de cela qu'il s'agit de travailler sur Figma. Il s'agit d'essayer, d' expérimenter et de voir ce qui fonctionne et ce qui ne fonctionne pas Dans cette leçon, nous avons appris le positionnement. Nous avons découvert le débordement et le défilement, et finalement, nous avons découvert les J'espère que cela vous a donné du sens et que vous pouvez maintenant vous entraîner par vous-même. Merci beaucoup de m' avoir écouté, et je vous verrai lors de la prochaine leçon. 12. FigJam: Bonjour et bienvenue dans un autre chapitre du cours Advanced Figma Dans ce chapitre, nous allons explorer les différents types de services ou outils fournis par Figma elle-même. plupart du temps, en fonction de votre abonnement, sont des outils que vous obtenez en même temps que votre forfait. Mais encore une fois, cela varie vraiment en fonction votre abonnement à FIGMA et certains d' entre eux peuvent également être accessibles dans le cadre du niveau gratuit si vous êtes étudiant ou si vous êtes étudiant ou si vous mesure d'obtenir l'abonnement gratuit d'une manière Dans cette leçon, nous allons parler de Fig Jam ici. Maintenant, vous voyez qu'il y a du design. Il s'agit du produit principal qu'ils fournissent ou de l'outil principal. Ensuite, nous avons Fig Jam, slides, buzz, side et M. Aujourd'hui, nous allons commencer par Fig Jam, et il vous suffit de vous rendre sur cette icône ici et de cliquer dessus. Et juste comme ça, cela ouvrira une fenêtre FikJam. Maintenant, cela pourrait être un peu un choc pour vous. Cela l'a été pour moi, O parce que vous êtes probablement habitué à votre écran soit en mode sombre si vous ne l'avez pas configuré et que tout à coup, il ce que votre écran soit en mode sombre si vous ne l'avez pas configuré et que tout à coup, il devient tout de suite blanc. Mais c'est essentiellement l'interface que vous obtenez sur Fike Jam Commençons par dire ce qu'est Fike Jam. Fig Jam est un outil pour jouer avec vos amis Tout comme quelqu'un qui joue du jam dans un groupe ou avec des musiciens, il joue de la musique d'une manière aléatoire, chaotique, non structurée ou pratiquée spécifiquement, mais de manière à créer de la musique ensemble pour créer quelque chose avec la communauté, avec les gens avec qui vous êtes, et pour obtenir quelque chose de beau. C'est exactement ce que tu es censé faire. En tant que designers. Maintenant, bien sûr, vous pouvez également travailler là-dessus avec d'autres concepteurs, avec des chefs de projet, voire avec des ingénieurs. Cela s'explique assez bien. C'est très simple par rapport à l' autre partie de FigMa Tout d'abord, nous avons un marqueur ici. C'est ici que vous pouvez simplement dessiner des choses, dessiner vos idées ici et vous pouvez les configurer. Vous pouvez choisir un surligneur, un ruban adhésif et une gomme, puis effacer ce que vous et une gomme, puis effacer ce que En même temps, je veux dire qu'il s' agit d'une nouvelle fonctionnalité, mais ici, cela vous indique que vous pouvez utiliser l'IA pour utiliser cette fonctionnalité, créer certains graphiques ou autre. Mais laissons cela de côté pour le moment. À part ça, je veux dire, nous avons plusieurs choses. Nous avons des notes autocollantes. C'est plutôt cool. Lorsque vous faites partie de l' équipe, vous pouvez lancer une idée et vous pouvez dire, comment ou vous pouvez simplement dire qu' s'agit d'une application pour les personnes âgées qui souhaitent se connecter en ligne. Vous pouvez simplement la mettre là et la déplacer, vous pouvez la déplacer pour plus tard ou vous pouvez ajouter d'autres notes autocollantes à côté. Vous avez des formes, mais beaucoup de choses sont très rudimentaires C'est très simple. Tu ne crées pas des choses qui ont l'air dingues. Maintenant, évidemment, vous pouvez configurer les choses, vous pouvez changer des couleurs spécifiques, mais vous n'êtes pas censé y réfléchir aussi profondément. C'est censé être très simple, juste pour trouver des idées et les réfléchir avec l'équipe Vous pouvez également créer ce type de graphique, qui est vraiment sympa car vous pouvez développer des choses et ainsi de suite, créer d'autres branches, ce qui est vraiment sympa Vous pouvez simplement ajouter du texte normal, des idées ou des idées pour le site Web ou autre, et je peux simplement le mettre ici. Nous avons également des sections. Ceci est également très similaire à ce que nous avons dans le design de Figma Nous avons des tables, ce qui est plutôt chouette. Vous pouvez créer un tableau et choisir le nombre de colonnes sur lesquelles vous souhaitez placer, le nombre de lignes, et simplement y écrire. C'est très explicite, très simple. Allez-y, essayez-le et sautez dedans. Mais le but de tout cela est essentiellement de travailler avec les gens et de réfléchir efficacement avec eux. Vous pouvez également avoir un tampon avec votre propre photo, ce qui est bien parce que vous pouvez dire : «  C'est mon idée » ou « je l'approuve ». Ou mieux encore, vous pouvez simplement mettre un J'aime. Puis, quand quelqu'un vient, il peut voir qui l'a dit, en disant : « Oh, la personne qui a approuvé c'est Ahmed, c'est génial. Vous pouvez également utiliser la fonction de commentaire normale, et vous disposez également de certaines fonctionnalités d'IA ici, puis vous pouvez également avoir vos widgets et d'autres éléments comme des autocollants, etc. Elle est très similaire à la section de conception normale, mais elle ne contient que quelques ajouts supplémentaires qui vous simplifieront un peu la vie. Vous avez également quelques modèles ici, ce qui est plutôt chouette. Hum, nous pouvons en ajouter un, par exemple. Vous pouvez voir que ces modèles vous montrent exactement, je veux dire, ce dont vous avez besoin. Afficher les éléments d'action des bloqueurs hier et aujourd'hui , c'est pareil. Pour les différents membres de l'équipe, vous pouvez le faire tous les jours pour vous organiser ou pas tous les jours, mais tous les deux jours ou quelque chose comme ça pour organiser ce que vous êtes censé faire, ce que vous voulez faire ou vos bloqueurs, etc. Et ici, vous avez une synchronisation quotidienne, idéale pour recevoir des rapports de tâches, des mises à jour, bla, bla, bla Tout cela est vraiment chouette. Alors allez-y et essayez-le. C'est une bonne façon de ne pas tout prendre trop au sérieux. C'est sur figma, et tout n'est pas simplement du design, du wireframing et du prototypage, mais parfois vous n'avez que quelques idées Vous voulez juste mettre quelques notes autocollantes ici et là. Vous pourriez dire : Oh, je vais prendre le feuillet autocollant rouge pour que vous puissiez le différencier, mais je veux dire, il porte quand même votre nom. Oui, c'est essentiellement le but de Fake Jam. Il y a quelques autres choses que vous pouvez explorer ici, comme les minuteries, la musique, qui sont des fonctionnalités assez intéressantes que vous pouvez ajouter à votre session Et pendant que vous travaillez ensemble, si vous participez également à la conversation, vous pouvez vous parler, écouter de la musique ou avoir un chronomètre. Donc oui, c'est une fonctionnalité plutôt intéressante. Merci de m'avoir écouté, je vous verrai dans la prochaine leçon. 13. Buzz (équipes marketing): Figma Buzz est donc un autre outil plus ou moins récent dont dispose désormais Figma Allez-y, rendez-vous ici et cliquez dessus, puis vous ouvrirez le fichier Figma Buzz Et tout d'abord, il vous indiquera de choisir un modèle. Maintenant, vous pouvez continuer et choisir commencer votre propre design à partir de zéro. Cela dépend vraiment entièrement de vous. Mais vérifions-le. Ce qui est bien, c'est qu'il vous indique que vous pouvez démarrer un actif vide et qu'il vous donne quelques suggestions. Instagram, Facebook, X, etc. Avant d'aller plus loin, permettez-moi de prendre un peu de recul et vous dire en quoi consiste réellement Figma Buzz Figma Buzz est un outil auquel on pense surtout. L'idée est de faciliter gestion et la grandement la gestion et la conception des réseaux sociaux. Parce que Figma s'est rendu compte que de nombreuses personnes ont besoin de concevoir pour les réseaux sociaux Je veux dire, c'est de plus en plus populaire, surtout avec des outils comme Canva Beaucoup de gens utilisaient FIGMA comme outil de conception pour de nombreux domaines, y compris les réseaux sociaux Ils ont pensé, pourquoi ne pas le rendre officiel. Mais au lieu d'en faire le même outil complexe, comme Photoshop, Photoshop est assez compliqué si vous vous contentez de gérer les réseaux sociaux. Ils ont donc beaucoup facilité la création et l'interaction des designers et des responsables des réseaux sociaux. Je vais donc vous l' expliquer dans un petit moment. Donc, tout d'abord, vous pouvez simplement vous faire savoir que vous pouvez copier votre travail de Figma Design dans Figma Buzz et publier modèles guidés ou simplement copier et coller votre travail, car il est parfois plus confortable de travailler sur Figma Il dispose de beaucoup plus d'outils. Mais comme je l'ai dit, vous pouvez commencer avec un ensemble vierge et ils vous proposent déjà des modèles. Je veux dire, pas des modèles, mais des formats. Et puis vous avez quelques modèles de Figma elle-même. Et vous avez également trié par catégorie. Publicités, impression. Vous pouvez même avoir une activité d' impression. Je les trouve vraiment chouettes, mais pour être honnête, je suis un peu déçue de la quantité ou de la variété. Je ne sais pas dans quelle mesure ils l'ont développé à l'heure actuelle, mais pendant longtemps, cela a fait très défaut, autant plus que jusqu'à présent, vous pouvez voir que ce n'est pas beaucoup. Le fait est que je pense qu'ils se fient principalement à leur propre travail. Je ne sais pas si c'est ouvert au public en ce moment, c'est juste de Figma C'est très limitatif. Mais si vous le souhaitez, vous pouvez choisir un modèle et vous pouvez simplement l'ajouter ici. Vous avez ici du texte, une image, du texte. Maintenant, juste pour vous présenter cela, il existe deux modes. Il y a le mode design, qui est très proche du mode Figma normal Je veux dire, il contient la plupart des outils. Il y a quelques différences, mais c'est très similaire et puis vous avez votre mode buzz. mode buzz s'adresse donc principalement Le mode buzz s'adresse donc principalement aux responsables des réseaux sociaux, aux chefs de projet, aux personnes qui n'ont peut-être grand-chose à voir avec le design lui-même, mais qui modifient en fait le contenu. Donc quelqu'un qui n'a pas grand-chose à dire sur la mise en page ou qui ne s'intéresse peut-être pas beaucoup à la mise en page, mais qui se soucie de ce qui est écrit ici, de l'image qui apparaît ici, ou peut-être de la façon dont elle est triée, organisée. Donc, comme je l'ai mentionné, vous pouvez faire beaucoup de choses ici, mais vous pouvez voir que les couches sont placées ici, puis vous avez vos différents cadres. Et à part cela, vous avez presque les mêmes commandes ici, sauf que vous n' avez pas l'onglet Prototypage Vous pouvez également voir la vue des actifs, donc une seule ressource ou une vue en grille. Cela vous permet de créer, je veux dire, plusieurs versions, lignes et colonnes. Ensuite, ce que vous pouvez voir par exemple, ici, vous avez tel ou tel dessin différent, ou vous pouvez en voir un à la fois, comme des diapositives ou quelque chose comme ça. Fermons donc pour le moment les modèles et revenons à celui-ci. maintenant à la plupart des questions de design dont nous avons déjà parlé, passons au côté de Figma Buzz Ce qui est vraiment intéressant ici, c'est que c'est très limité. Il ne vous offre que certaines choses comme la couleur. Vous pouvez choisir la couleur de votre choix, mais comme vous pouvez le constater, ce n'est pas la première option qui s'offre à vous. Vous pouvez choisir les bordures et tout le reste, mais c'est très, très simplifié, comme si c'était pour les bébés. Cela ne veut pas dire que les chefs de projet ou responsables des réseaux sociaux ne sont pas tous ou qu'ils ne sont pas très compréhensifs, mais c'est juste le fait qu' ils sont en déplacement et qu'ils ne se soucient pas vraiment du design parfois. Pour eux, il est donc beaucoup plus important de voir comment les choses fonctionnent ensemble et quel en est le contenu. Ainsi, s'ils ont déjà un modèle, ils peuvent l'utiliser. Il n'est pas nécessaire que ce soit parfait. Donc, le meilleur flux de travail que je suggère est que quelqu'un conçoive les modèles ici, puis qu'il y ait un gestionnaire de réseaux sociaux qui utilise les modèles dans sa conception. Comme vous pouvez le constater, c'est très simple. Et il y a ici des outils qu'ils peuvent utiliser à leur disposition. Ils peuvent donc ajouter certains médias également fournis par FigMA Ils peuvent ajouter du texte. Maintenant, comme vous pouvez le voir, ce texte contient beaucoup de texte de base. Ils essaient de copier plus ou moins FigMa avec cette idée. Ils peuvent insérer certaines choses comme des icônes ou des autocollants, etc., et bien sûr, il y a des plugins, car il y en a toujours Vous pouvez y aller et les explorer vous-même. Mais ce qui est vraiment intéressant, que vous pouvez voir que tout cela est assez régulier. Ce qui est vraiment intéressant, c'est l'option de création en bloc. Ce qui est cool, c'est que vous pouvez télécharger une feuille de calcul contenant de nombreuses informations Il s'agit d'une feuille de calcul qui indique que le titre doit être celui-ci , puis la description doit être ceci et ensuite ce doit être le petit texte Ensuite, vous pouvez configurer cela pour le nombre de publications que vous souhaitez et vous pouvez toutes les créer très simplement, très facilement et immédiatement, simplement avec Figma ci-dessus Vous n'avez pas à saisir toutes les informations manuellement simplement en téléchargeant le document C'est incroyable car beaucoup de personnes ont planifié leur contenu à l'avance et au lieu d'avoir à insérer chaque texte copier-coller, elles peuvent simplement télécharger la feuille Excel complète elles disposent, ce qui est plutôt cool. Et ici, vous pouvez voir qu'il s'agit également d'une version beaucoup plus simplifiée de ce que vous voyez ici. C'est très visuel, et c'est très basé sur du texte. C'est donc pour ceux qui disent : je ne veux pas y toucher, je ne veux pas casser la mise en page, je ne veux pas casser le modèle. Vous pouvez donc simplement leur dire  : OK, vous n'avez pas besoin de le casser, de modifier éléments par rapport à la partie texte. Et c'est aussi plus rapide de le faire. Vous pouvez donc dire : « Bonjour, Los Angeles, maintenant allons-y ». Bonjour à New York. Ensuite, nous cherchons une Brista, c'est vous ? C'est sûr que ça peut rester. Et puis nouvel emplacement. Je ne sais pas quoi Ensuite, vous pouvez également utiliser des médias et parcourir une image, choisir celle-ci ou celle-ci et arrêter. Juste comme ça, tu changes simplement les choses. C'est à peu près ainsi que fonctionne cet outil. Ils n'ont pas grand-chose à faire avec cet outil, mais c'est exactement ce qui le rend parfait, car il crée un excellent flux de travail entre les concepteurs et les responsables des réseaux sociaux. 14. Diapositives Figma: Aujourd'hui, nous allons donc parler d' un autre excellent outil fourni par Figma On dirait vraiment qu'il ne s'agit que d'un package complet inclus dans l'abonnement, et il continue de donner Aujourd'hui, nous allons parler de Figma Slides, et l' histoire d'origine est plutôt intéressante car beaucoup de gens utilisaient Figma essentiellement en remplacement ou en alternative à PowerPoint pour une raison ou une autre parce que c'était beaucoup plus facile à concevoir là-bas et ainsi Et FigMa s'en est rendu compte et a saisi cette opportunité sa propre section pour créer des diapositives, ce qui est assez intelligent Lorsque vous allez sur Figma Slides, vous allez retrouver la même idée, comme nous l'avons eue avec d'autres services ou outils Tu peux repartir de zéro. Vous pouvez commencer par un plan que vous avez fait dans votre FIG jam, ce qui est super cool. Je veux dire, c'est sympa parce que ça s' inspire de tes autres œuvres, ce qui est sympa. Encore une fois, parce que vous n'avez pas à tout faire manuellement. Vous pouvez également créer un modèle et le réutiliser. Vous pouvez également choisir l'un de ces modèles que vous avez ici, dont certains sont intéressants. Vous pouvez continuer et n'en choisir qu'un. Celui-ci est plutôt sympa. Thème Pixel Grid, et vous pouvez choisir ceux que vous souhaitez ajouter. Vous pouvez ajouter de nouvelles diapositives une par une, ou vous pouvez les ajouter toutes et voir que vous souhaitez conserver et celles dont vous souhaitez vous débarrasser. J'ajoute juste un par un. Encore une fois, ils ont vraiment réussi en termes de simplicité et ils ont également créé une mise en page très similaire à PowerPoint Vous pouvez voir ici que se trouvent généralement vos notes, notes de votre présentateur. Vous pouvez donc fermer ou l' ouvrir quand vous le souhaitez. Alors vous avez vos diapositives ici. Vous pouvez également les voir comme s'il s'agissait de cadres C'est ainsi que de nombreuses personnes concevaient leurs diapositives avant l'apparition de cette fonctionnalité. Ensuite, vous avez un style de modèle, vous pouvez donc continuer ici, mélanger les couleurs ou les modifier Remixez-les comme vous pouvez le constater, ce qui est plutôt chouette car vous avez souvent envie d'essayer quelque chose de différent, mais vous ne savez pas exactement comment faire Oui, voyons si nous pouvons revenir à notre couleur d'origine. n'est pas vraiment original, mais cela fonctionne et vous pouvez également ajuster les choses de plus près. Vous pouvez donc accéder directement aux couleurs et les modifier comme vous le souhaitez. Par exemple, je n' aime pas ce bleu. Ça pourrait le transformer en un bleu différent. Cela dépend entièrement de moi. Ce qui est sympa. C' est plutôt sympa d'avoir cette option. Mais vous pouvez voir que tout est simplifié. Votre arrière-plan est unicolore. Vous pourriez dire que non, je n'aime pas ça. Faisons-en un dégradé. Quel type de dégradé ? Laisse-moi te montrer. Je vais faire un dégradé moi-même. Oui, vous pouvez continuer et vous pouvez, bien sûr, modifier les couleurs de votre sélection comme vous le feriez avec Figma Ensuite, vous avez certains outils ici, certains que nous connaissons déjà le texte, l'image, c'est autre chose, mais c'est juste une fonction d'importation. vous suffit de cliquer dessus et de choisir l'image que vous souhaitez ajouter. Ajoutez une photo très rapidement. Donc je peux juste le mettre ici. Maintenant, c'est inscrit dans le texte, ce qui est plutôt sympa, ou je peux le ramener. Ensuite, je peux le faire glisser et le mettre ici. C'est très simple et intuitif. Nous pouvons également créer tous les types de formes que nous voulons. Nous pouvons utiliser cette fonctionnalité ici, qui est l'interaction en direct. Cette fonctionnalité vous permet d' ajouter des tractions, des tampons, des alignements, éléments qui rendent votre présentation interactive. Juste pour vous montrer , par exemple, à quoi ressemblerait un trou Vous pouvez ajouter une option ici et dire « je ne sais pas ». Tu peux dire rouge ou bleu. Ce n'est pas du bleu clair. Ensuite, vous pouvez le montrer à votre public lui demander de voter et d'interagir avec lui. Laissez-moi vous montrer à quoi cela ressemblerait. Ici, nous n'avons pas encore de votes, puis les gens pourraient choisir le rouge ou le bleu et voter ensuite. Ce qui est intéressant à propos de cette fonctionnalité c' est la façon dont elle est conçue pour permettre aux utilisateurs de rejoindre vos diapositives. Vous ne vous contentez pas de partager votre écran avec un public, mais vous invitez peut-être des personnes à rejoindre votre présentation. Il vous suffit de le copier ici, puis de le donner à quelqu'un qui viendra regarder votre présentation en direct pendant que vous la présentez ou vous pouvez le partager à partir d'ici. Mais il n'est pas nécessaire que ce soit comme ça. Ce n'est censé être le cas que lorsque vous avez des éléments interactifs comme celui-ci où les gens peuvent voter. Mais oui, vous pouvez voir d'autres types d'interactions, afin que les gens puissent apposer leur empreinte. Les gens peuvent s'aligner, s' exprimer eux-mêmes, je suis d'accord, je ne suis pas d'accord. Laisse-moi te montrer à quoi ça ressemble. Tout à fait d'accord ou en désaccord afin qu'il puisse voter. Mais il ne semble pas s'afficher correctement. Résultats masqués. Donc je peux dire, tu sais quoi ? Je suis tout à fait d'accord ou en désaccord. C'est une fonctionnalité très simple, pour être honnête. Il s'agit simplement de mettre une photo partout où je clique. Mais cela peut ajouter de l'interactivité ou vous pouvez ajouter un prototype Ensuite, vous avez la section des commentaires. Vous avez votre IA et vos plugins. Et ici, vous pouvez également ajouter des tableaux, blocs de code, des icônes, beaucoup de choses différentes. Encore une fois, comme nous nous y sommes toujours habitués, vous pouvez toujours revenir à votre mode design, ce qui vous donne beaucoup plus de contrôle. Je veux dire, ce panneau de conception, ce menu latéral me sont très familiers. C'est confortable et je sais exactement sur quoi je clique et ce qui se passe. Je peux créer des choses complexes au lieu de simplement choisir des couleurs simples. Je peux créer des effets complexes et simplement jouer avec les objets. Pourquoi pas ? C'est l' idée, je crois. Que si vous en avez besoin, vous avez toujours ce mode afin que vous puissiez toujours revenir à votre mode de conception et créer le design comme vous le souhaitez. Voici donc à peu près à quoi ressemble l'outil. Allez-y, essayez-le pour votre prochaine présentation et dites-moi comment cela fonctionne. Ce n'est pas exactement pour tout le monde, mais si vous pensez que c'est quelque chose que vous aimeriez, alors allez-y. Merci de m'avoir écouté et je vous verrai dans la prochaine leçon. 15. Sites Figma (Aperçu): Sites Figma, vous en avez peut-être entendu parler. Si ce n'est pas le cas, alors tu dois le faire. Bien que je pense qu' il est toujours en version bêta, il n'est toujours pas correctement développé à 100 % . Ce n'est pas là. Mais les sites Figma sont un outil qui vous permet de créer le design d'un site Web à partir de Figma et de tout publier à partir de Figma. Comme vous pouvez le voir ici, il est écrit Beta, alors concevez et publiez votre site Web entièrement en version bêta Cela vous permet de créer un site Web réactif, interactif et entièrement prêt. C'est vraiment incroyable. Allons-y et testons-le. Maintenant, bien sûr, vous devez savoir que c' est assez limité. Nous pouvons commencer avec un modèle juste pour vous montrer ce que d'autres personnes ont créé. Encore une fois, il y a de nombreuses limites. Mais choisissons quelque chose qui semble difficile à faire. Tu sais, pas juste une page normale. Je trouve que c'est une mise en page intéressante, je veux dire, c'est une mise en page assez intéressante. Je peux cliquer et voir comment ils l'ont fait. Ce n'est pas si complexe, mais nous pouvons continuer et prévisualiser ce site Web dans le navigateur. Voici le site web et vous pouvez voir qu'il fonctionne. Je veux dire, pour être honnête, je pense que c'est le meilleur site Web, pas vraiment le meilleur exemple que nous puissions consulter , ce n'est pas si mal. Je veux dire, l'image n'est pas de très bonne qualité, mais peut-être parce que c'est un site FigMA ou parce que c'est juste un site de test, elle ressemble à ça Mais il est assez étonnant et révolutionnaire que vous puissiez concevoir des sites Web à partir de Figma et les publier avec peu ou pas de compétences en programmation Nous pouvons donc choisir un autre modèle maintenant et y jeter un œil, ce qui, encore une fois, n' est pas si typique. Mais je ne sais pas, ça a l'air plutôt sympa, plutôt chouette. Peut-être que tu peux y aller . Oui, voyons juste ce qu'ils ont ici. Utilisons ce modèle. Nous allons utiliser le modèle voir à quoi il ressemble et voir si nous pouvons même le publier juste pour le tester. Vous pouvez voir ici les ingrédients du jour, bette à carde, Bite me, la dose quotidienne de végétalien, puis vous avez quelques produits ici. Euh, pour ce qui est des éléments du menu, ils chargent toujours les photos. Et vous pouvez voir ici que ce sont les points de rupture. Nous en avons déjà parlé, et c'est essentiellement ainsi que vous créez un design approprié Vous pouvez voir les différents points de rupture ici et ils écrivent entre quelles valeurs cet écran devrait s'afficher. Cela fait donc plus de 1280 pixels. C'est le 800-1279, et c'est le 1-799, ce qui est 1-799, Allons voir à quoi ressemblerait ce site Web. Tout comme l'ouverture de la version d'aperçu, cela nous permet essentiellement de voir à quoi cela ressemble, et je peux le voir sur la tablette, je peux le voir sur un téléphone et je peux essayer d'interagir avec les éléments. Je veux dire, cela devrait être plus avancé que Figma parce que ce n'est pas simplement, vous savez, FigMa, c'est un site Web interactif qui doit interagir correctement avec les utilisateurs Voyons voir. Nous allons sur la page À propos de moi, nous trouvons ce type. Nous allons sur TikTok et cela nous emmène en fait sur Tik Tok Les liens fonctionnent donc correctement. Sympa. Mais ce qui me laisse perplexe , c'est que lorsque vous rentrez chez vous, elles semblent être cliquables. OK. Je l'ai ouvert. Il est cliquable. Je pensais qu'ils étaient également cliquables, mais ils ne le sont pas vraiment. Je vais juste y retourner. OK. Voyons donc la salade aux pommes et aux agrumes. Je pense qu'ils ne font que consulter ou consulter mes recettes végétaliennes quotidiennes. Oui, il est dit soupe aux tomates et puis c'est toujours du Kali au basilic, les meilleures pâtes Mais je suppose que ce n'est qu'un exemple, car ce n'est qu'un modèle. Mais c'est censé être quelque chose de publiable. Voyons ce qui se passe lorsque nous partageons ce lien ou lorsque nous le publions. Vous pouvez cliquer sur Publier et vous pouvez continuer et donner un titre au site, et vous pouvez également voir les problèmes que vous rencontrez ici. En termes de mise en page automatique, en termes de débordement et en termes d'accessibilité C'est vraiment la vraie affaire. Ils n'y sont pas encore, mais c'est plutôt chouette ce qu'ils font. Oui, tu peux voir à quoi ça ressemble. Nous avons beaucoup plus d'options différentes ici. Vous ajoutez une page Web, c'est juste une page, puis vous pouvez y ajouter un point d'arrêt pour tablette, un point d'arrêt mobile ou un point d'arrêt personnalisé C'est très différent depuis le début au lieu de se contenter de cadres. Ensuite, vous avez Sigma Make, dont nous parlerons plus tard, vous avez l' intégration, vous avez des formes, puis vous avez les outils habituels du stylo et du crayon, l'importation, l'importation d'images, le texte, les commentaires, etc. Beaucoup de choses sont similaires vous pouvez trouver vos couches ici, comme vous en avez l' habitude, mais vous pouvez également trouver vos pages Web ici. Vous pouvez voir que nous avons une page d' accueil sur l'entrée. Ce sont les trois pages principales que nous avons pour le moment, mais vous pouvez voir les interactions ou le prototypage et vous pouvez voir comment ils sont liés les uns aux autres Maintenant, tous les boutons ici se connectent à cette page, mais normalement ils devraient chacun avoir leur propre destination de lien. Ils devraient avoir chacun leur propre page. Mais pour l'instant, cela suffit amplement pour un modèle. C'est essentiellement ainsi que fonctionne cet outil. Pour être honnête, c'est un peu plus complexe que la version de conception normale. Vous allez rencontrer certaines limites et ainsi lorsque vous la comparez à la version normale, mais vous devez comprendre qu' il s'agit de créer ou de publier pour vous un site Web complet à part entière Si nous sommes publiés, nous pouvons réellement le faire publier. C'est une chose que tu peux garder à l'esprit. Il vous suffit de saisir un titre, et pour l'instant, il utilisera simplement cette URL, mais je suis presque sûr que vous pourrez à un autre moment, continuer et mettre votre propre URL. Mais oui, c'est plutôt chouette. Allez-y, essayez-le, et je pense que c'est le futur. Je pense que ce sera la solution standard dans quelques années et que tout le monde créera des sites Web directement à l' aide de ces outils qui n'ont aucun code. Merci beaucoup de m' avoir écouté, et je vous verrai lors de la prochaine leçon. 16. Figma Make (cas d'utilisation de l'idéation): Et maintenant, nous arrivons à Figma Make. Figma Make est une sorte d'IA propre à Figma. Ce n'est donc pas exactement cela, et cela peut être un peu confus, mais il va vous guider et vous connecter vos outils, ajouter des connecteurs pour créer à partir du contexte de vos applications préférées. En cliquant simplement ici, vous pouvez continuer et joindre un dessin. Collez donc un cadre Figma ou une image à y attacher. Vous pouvez passer à n'importe lequel des cadres que nous avons conçus auparavant. Donc, comme celui-ci, je peux le copier et le coller ici, juste comme ça, il est ajouté et collé. Vous avez différents modes ici car il est basé sur Gemini et le cloud et sur des versions ou des modèles différents de ceux-ci. Vous pouvez également venir ici et sélectionner une bibliothèque ce qui concerne la conception, les composants, etc. Ou vous pouvez partir d'un exemple déjà créé. Mais tout ce que vous avez à faire en réalité, comme toute autre IA, c'est de décrire votre idée, parler, de parler de ce que vous voulez faire, et elle peut faire tout ce que vous voulez. Je sais que vous ne comprenez toujours pas . Est-ce que cet outil génère une image ? Génère-t-il du texte gratuitement ? Qu'est-ce qui se passe ici ? Je veux dire, nous avons Chat GIT, nous avons Gemini, nous avons beaucoup d'autres outils Qu'est-ce que cela me fait réellement ? Je vais te dire ce que c'est. Cela vous permet de créer quelque chose d'un peu plus interactif que tout ce que vous avez déjà expérimenté. Je l'ai dit et je vais dire, créez-moi un tableau de bord d'application pour une banque cryptographique avec des cartes de crédit et une analyse des dépenses, la valeur, des investissements, etc. Et un résumé des dépenses. Et oui, c'est juste ce que je dis. Alors je pourrais dire quelque chose. Je ne suis pas sûre de ce que cela va donner , car il est parfois difficile de s'attendre à leurs comportements ou aux résultats pour savoir ce qu'ils vont obtenir. Je vais donc simplement dire qu'il devrait y avoir une option interactive pour passer d'une carte à l'autre. Nous allons donc cliquer dessus, puis nous allons discuter ici sur la gauche, puis il va commencer à réfléchir et à développer notre idée avec du code en utilisant, je crois, JavaScript et d'autres scripts, etc., il essaiera de créer un prototype Ce prototype est quelque chose que nous pouvons importer à nouveau dans Figma to Figma design, ou je pense que nous pouvons même l'utiliser d'une manière ou d'une autre au cas où vous voudriez l'ajouter au design du site Web que vous avez ou de l'application Mais je ne sais pas comment cela se passe Pour être honnête, ce n'est pas du tout mon domaine. Très bien, nous avons déjà un résultat. Ce qui est assez étonnant à ce sujet, c' que nous lui avons déjà fourni le design actuel. Mais cela est allé de l'avant et a rendu beaucoup de choses interactives. J'ai fait ses propres choix. Il a modifié les pictogrammes fonction de ce qu'il jugeait préférable Cela a changé les tailles et ainsi de suite des éléments présents ici Vous pouvez le voir joué avec certaines choses et je crois que lorsque vous le redémarrez, il a même ajouté une animation, ce qui est assez incroyable. Vous pouvez donc voir l'animation montrant comment les choses apparaissent , puis vous descendez et vous voyez si nous comparons les choses côte à côte, mienne ressemble à un jeu d'enfant. On dirait que quelqu'un a juste au hasard et celle-ci ressemble à une vraie application, Bitcoin eerium ou quelle que soit Bitcoin eerium ou elle est prononcée. Elle met la façon dont elle est prononcée. Elle met les chiffres selon lesquels je ne sais pas combien vous avez investi, votre portefeuille d'investissement, résumé des dépenses, et vous pouvez voir que cela a été fait et a ajouté une barre pour afficher le pourcentage dépensé à partir de ceci ou Mais je veux dire, il a simplement montré les catégories, puis les transactions individuelles. Je suppose que c'est resté fidèle à mon design ici. Mais vous pouvez voir ici, regardez, il a fait exactement ce que je lui ai dit de faire. Je devrais être capable de passer d'une carte à l'autre. Je veux dire, cela a supprimé notre configuration ici , que j'ai un peu mieux appréciée, où vous pouviez voir les cartes empilées Ce qu'il a fait ici, c'est que cela l'a rendu un peu plus fonctionnel lorsque vous passez de l'un à l'autre, ce qui est plutôt cool. Voyons ce qui va se passer. Est-ce que je peux cliquer dessus ? Puis-je interagir avec elle ? Pas vraiment, mais vous pouvez voir qu'il a découvert le nom Newman sur cette page et qu'il a juste conservé John Newman J'ai juste changé les dates. Mais c'est marrant, cette carte est expirée. Il expire en 2024. Celui-ci n'est pas encore expiré. Celui-ci est déjà expiré. Vous pouvez donc voir, je veux dire, certaines choses n'ont peut-être pas été réfléchies ou peut-être que c'était juste un exemple du passé. Et en même temps, il y a des choses où je pourrais me demander : OK, pourquoi avez-vous changé cela ? Pourquoi avez-vous changé cette taille ici ou quelque chose comme ça ? Néanmoins, c'est plutôt cool parce que vous avez un outil qui vient commencer à comprendre ce que je voulais et qui l' a changé comme je le voulais. Ensuite, je peux lui demander différentes choses. Ou vous pouvez voir ici qu'il y a trois avertissements. Vous pouvez voir quels sont les avertissements. La largeur zéro et la hauteur zéro de charge doivent être notées en zéro Et c'est connecter. Je ne suis pas sûr. Je pense que c'est quelque chose qu' un programmeur serait bien mieux à même d'estimer ou de comprendre et nous pouvons lui demander de le réparer pour moi. Pour l'instant, je vais juste le fermer. Nous pouvons continuer, copier ce dessin et le coller ici. Une chose que je constate immédiatement, c'est qu'il a cessé d' être un design mobile pour une raison quelconque. Je ne sais pas pourquoi ils l'ont fait, mais c'est un choix intéressant, et nous pouvons évidemment essayer de le changer. Comme vous pouvez le voir, je ne suis pas sûr à bien des égards. C'est un produit très désordonné, ce qu'ils ont produit pour nous ici Je veux dire, ce n'est pas comme le travail d'un artiste. Beaucoup de choses sont foirées et ne fonctionnent pas et je n'en suis pas sûre Mais c'est quelque chose avec lequel vous pouvez travailler. Je pense que c'est une très bonne base. Je veux dire, comme vous pouvez le voir, j'ai juste beaucoup de choses pour que cela fonctionne correctement. Mais je pense, comme je l'ai dit, que cela une excellente base pour le design proprement dit. C'est un bon point de départ pour voir, que puis-je ajuster ? Qu'est-ce que je peux changer ? Je peux dire que j'ai déjà foiré certaines choses, ce qui ne pose aucun problème Mais je le regarde côte à côte et je me dis : « Tu sais quoi ? Ce n'est pas mal du tout. Il est allé de l'avant, a pris mon design. Certaines choses ne sont pas parfaites ici, je ne sais pas pourquoi l'espacement est comme ça, ou est-ce que nous l'avons gâché On dirait que nous avons tout gâché d'une manière ou d'une autre. Ouais. Je ne sais pas comment nous l'avons gâché, ou peut-être qu'en copiant, nous l'avons foiré Mais je dois me demander pourquoi cela s'est passé comme ça ? Est-ce que cela a du sens ? De quoi s'agit-il ? Mais oui, beaucoup d'autres choses fonctionnent plutôt bien. Comme je l'ai dit, prenez cela comme source d'inspiration et continuez à travailler à partir de là. Je serais peut-être même une meilleure idée de ne pas le faire du tout, d' ajouter une base à partir de votre propre design, puis de lui demander de l'ajuster. Peut-être que ça devrait être l'inverse. Maintenant, je vais dire de faire en sorte que, lorsque je clique sur une carte de crédit, voie les relevés, les montants totaux, les statistiques, et que je puisse prendre des décisions comme supprimer la carte ou signaler qu'elle été volée, etc. OK. Alors maintenant, il semble qu'il ait ajouté une deuxième version. Voyons ce qui va se passer maintenant. Je vois déjà que c'est cliquable. Maintenant, quand je clique dessus, B, je reçois immédiatement ceci. Je réalise juste que je peux changer ça. Il est totalement réactif, ce qui m'étonne en ce moment. Hum, vous savez, parce que c'est super cool qu'un tel outil soit déjà réactif. Il ne s'agit pas seulement de créer l'ensemble de votre application, mais également de la rendre réactive, d'intégrer une animation, d' ajouter des éléments que vous n'avez même pas demandés. Cela vous indique combien vous avez dépensé ce mois-ci, en ajoutant, je veux dire, que j'ai demandé des statistiques, mais cela ne définissait pas de quel type, cela signifie que votre solde actuel est tel et que le crédit disponible est aussi élevé. Et vous pouvez geler ou télécharger. Je ne sais pas ce que vous téléchargez ici et ce que je veux dire, accord, je suppose que vous pouvez simplement vous bloquer. Déclaration téléchargée. Je veux dire, c'est donner une notification indiquant que quelque chose est téléchargé. Ensuite, ici, il est également indiqué en attente. Vous pouvez signaler le vol de la carte. Regardez, il a même créé une fenêtre contextuelle pour ça. Et tu vois, ce sont des trucs plutôt cool. Vous pouvez supprimer la carte. Oh, mon Dieu, et ça l'a même supprimée. Par exemple, j'ai pensé à l'avance pour le supprimer. Je veux dire, que se passerait-il si nous supprimions toutes les cartes ? Maintenant je suis curieux. Est-ce qu'il va avoir un état vide ? Écoutez, et maintenant il est dit qu' aucune carte n'est disponible. J'ai aussi pensé à cette affaire. C'est ce qui est complètement époustouflant dans cette fonctionnalité, et vous pouvez voir beaucoup de choses ou la plupart des choses qu'elle n'a pas vraiment prototypées, et vous pouvez voir ici que cela quitte le cadre, qui vous indique que cet outil n'est pas parfait. Mais beaucoup de choses qu'il est déjà capable de faire n'ont pas besoin d'être parfaites. Ils sont déjà très impressionnants. Mais vous devez garder à l'esprit, pour être honnête, que cela est plus ou moins basé sur les designs d'autres personnes. Je pense qu'il se nourrit des données des utilisateurs dès leur conception. Donc, lorsque vous et moi allons concevoir sur nos propres fichiers, Figma va s'en servir d'une manière ou d'une autre, ou peut-être qu' elle utilise des produits en public ou quoi que ce soit Mais cette IA doit se nourrir des données de certaines personnes sous forme d'ensembles de données d' entraînement C'est donc vraiment vous lui fournissez ces données et elle vous les renvoie Le fait que si nous la rechargeons, le fait qu'elle comprenne comment vous pouvez gérer une carte, je viens de le lui dire, rendre interactive et elle comprendra tout ce interactive et elle la rendre interactive et elle comprendra tout ce que vous pouvez apprendre Vous pouvez voir qu'il y a quelques bugs ici. Ce sont des coins arrondis, puis vous faites défiler la page pour ne plus être arrondis. C'est donc bizarre. Mais elle a découvert beaucoup de choses, mais en même temps, elle le sait parce qu'elle a vu d'autres applications bancaires. Il sait comment elles fonctionnent Il vole donc plus ou moins ces idées et les remixe pour vous Et oui, vous pouvez le voir configurer ces couleurs pour qu' elles s'adaptent aux couleurs que nous avons déjà. Encore une fois, c'est formidable, mais vous devez simplement faire attention lorsque vous lui faites confiance, car tout ce confiance, car tout ce que cela vous apportera sera quelque chose qui aura été fait quelque part à un moment ou à un autre par quelqu'un Gardez donc cela à l'esprit. Mais encore une fois, cet outil est excellent. Allez-y, essayez-le pour plein de choses différentes. Ce n'est que la pointe de l'iceberg. Il y a beaucoup plus de choses que vous pouvez faire avec cela, allez-y et essayez-le vous-même. Merci de m'avoir écouté, je vous verrai dans la prochaine leçon. 17. Lorsque ces outils sont utiles ou distrayants: Maintenant que nous avons examiné une grande partie ou la totalité des outils actuellement disponibles dans Figma, il est temps pour vous de prendre la décision, de porter le jugement et de comprendre si ces outils sont en votre faveur, s'ils vous sont bénéfiques et vous aident à atteindre vos objectifs et à accomplir votre travail ou s'ils gênent et vous distraient au C'est quelque chose que je ne peux pas décider pour toi. Mais je peux peut-être vous donner une idée en vous racontant ma propre expérience. Maintenant, j'adore et je chéris absolument le mode design, et je le trouve totalement génial, et il est au cœur de Figma Je veux dire, c'est le produit de base. À partir de là ou avant cela, nous avons obtenu Fig Jam Fi Jam est également idéal pour le travail en équipe C'est idéal pour le brainstorming et pour bon nombre de ces processus Mais en même temps, si vous n'avez pas une grande équipe ou si vous ne travaillez pas en étroite collaboration, vous ne travaillez pas ensemble de cette façon, alors FikJam peut vous barrer la Peut-être qu'au lieu de faire le vrai travail, vous serez paralysé par l'analyse. Vous allez simplement écrire des idées, les mettre, les classer, écrire des commentaires, etc., sans jamais rien faire C'est donc un excellent outil. Allez-y, essayez-le, mais tout dépend de votre cas d'utilisation. Personnellement, je ne l'utilise que pour certains projets où je pense que le travail d'équipe est essentiel, et où certaines personnes sont enthousiastes et prêtes à participer et à faire connaître leurs idées sans perdre trop de temps Ensuite, nous avons Figma Slide, qui est sans aucun doute un excellent outil Mais personnellement, je préfère utiliser quelque chose comme PowerPoint. Je sais que cela peut sembler conservateur ou traditionnel, mais j'ai vraiment l' impression que PowerPoint a fait ses preuves dans le secteur en tant que leader, tant que produit fiable et fiable Donc, quoi qu'il arrive, je sais que PowerPoint est là pour moi et que si mon ordinateur prend feu, et je sais que si je vais ailleurs sur l'ordinateur de quelqu'un d'autre, il a probablement PowerPoint. Je ne sais pas s'ils ont Figma. Je veux dire, bien sûr, je peux accéder à Figma en ligne, mais je ne sais pas si leur ordinateur sera capable de le faire fonctionner correctement Beaucoup de ces questions me viennent à l'esprit et c'est pourquoi je pense simplement que PowerPoint est la plus simple, l'option la plus évidente. Mais si vous recherchez quelque chose différent et quelque chose qui permet un peu plus de flexibilité et de changement, alors FigMa Slides est gratuit Ensuite, nous avons Figma Buzz, qui est sans aucun doute l'un des meilleurs produits de Figma Après le design, c'est peut-être le deuxième ou le troisième après FIG Jam. C'est tout simplement génial. C'est absolument incroyable pour les personnes qui gèrent les réseaux sociaux et qui ont besoin d'une vue d'ensemble très claire de ce qu'elles font sans tous ces outils complexes. Ensuite, nous avons le site Figma, qui est, encore une fois, je l'ai déjà dit et je dois dire qu'il est révolutionnaire et tout simplement génial Mais pour être honnête, le fait qu'il soit toujours en version bêta me donne beaucoup de doutes. Je pense qu'avant de créer un portfolio, un site Web ou un ensemble de sites Web, attendez un peu, car nous ne savons pas où cela va nous mener et nous ne savons pas comment cela va fonctionner à l'avenir. Mais je ne peux pas nier que c' est une fonctionnalité incroyable. Au final, M. Figma make est un excellent outil d'IA, et j'ose dire Figma make est un excellent outil d'IA, qu'il est même époustouflant et qu'il se différencie de la plupart des autres outils, de nombreuses autres IA, et du fait qu' il est spécifique et axé sur la conception et le prototypage UIUX Il ne s'agit pas simplement de créer du texte ou des images, mais de faire les deux et de créer des cadres, des interactions des flux d'utilisateurs, etc. Mais je vous mets en garde contre cela et je vous conseille de faire attention. Ne vous laissez pas remplacer par elle. Ne vous faites pas remplacer si vous en abusez. Et n'oubliez pas que je suis presque sûr que les sources qu'ils utilisent sont des designs d'autres personnes. Lorsque vous ouvrez un dessin sur Figma ou que vous publiez un dessin dans le monde réel, Figma AI s'en est peut-être rendu compte, l'a peut-être utilisé et s'en est servi comme données de formation, ce qui est un peu foiré car c'est C'est votre travail et personne ne vous demande la permission . Ils se contentent de prendre votre travail et de créer des applications à partir de celui-ci. Du point de vue éthique, c'est un peu suspect , mais à part ça, ses capacités sont absolument insensées Je pense qu'il est à un moment donné nécessaire que chaque concepteur d'UIUX apprenne et utilise Pigma de manière régulière et efficace Oui, c'est mon point de vue personnel, mon avis personnel sur tous ces outils. Si cela ne tenait qu'à moi, je dirais qu' il faut les utiliser tous. Utilisez-les et voyez ce qui fonctionne et ce qui ne fonctionne pas. Assurez-vous simplement qu'ils ne vous empêchent pas de faire le vrai travail S'ils vous aident à réfléchir, ils vous aident à présenter, ils vous aident à organiser vos idées ou à publier votre site Web sans code, alors c'est absolument incroyable Je suis content pour toi. Mais si vous avez l'impression que cela ne vous convient pas et que vous vous efforcez de faire quelque chose, alors ne le faites pas. Concentrez-vous sur le vrai design. Alors, merci beaucoup de m'avoir écouté, et je vous verrai lors de la prochaine leçon. 18. Projet final : SaaS réactif + microinteractions: Bonjour et bienvenue à une autre leçon du cours avancé de Figma Dans cette leçon, nous allons travailler sur un de nos projets fictifs, une sorte de pratique, si vous voulez. Nous avons donc ici un message très simpliste avec un système de conception très simpliste, pas vraiment un système de conception, mais juste quelques éléments pour nous guider dans le processus de création, choses que j'ai faites et que j'ai faites juste avant cette leçon Nous avons donc ici un logo ou une icône. Encore une fois, c'est très simpliste, et c'est pour une application appelée Istify et voici les couleurs Maintenant, ne vous y trompez pas, ce n'est pas Spotify, pas exactement lié à celui-ci, mais il porte un nom très similaire, Spotify, dans Stify L'idée de cette application ou ce logiciel en tant que produit de service est essentiellement d'aider les gens à obtenir des informations et à analyser des données, tout un tas de données. L'ensemble du cas d'utilisation de ce projet est que nous rencontrons souvent des données. Nous collectons de nombreuses photos, nous collectons de nombreux chiffres et informations sur les personnes , que ce soit pour la recherche ou pour les études ou pour ne pas savoir quoi en faire. Je n'en ai absolument aucune idée. Maintenant, vous pouvez généralement accéder à certains produits sur votre téléphone pour faire certaines choses. Vous pouvez numériser un document avec votre téléphone. Vous pouvez télécharger un document dans le cloud ou quelque chose comme ça. Mais que se passe-t-il lorsque vous ne savez pas quoi en faire ? De nos jours, il suffit de passer directement à l'IA, à l'intelligence artificielle. Dites-moi ce que je peux en faire ? Cela ressemble à une application basée sur l'IA qui vous aiderait à comprendre quelles sont vos données et à les visualiser. C'est comme une invite d'IA qui est déjà saisie et qui comporte déjà des options spécifiques. Commençons par le concevoir. Je vais donc concevoir l'interface du téléphone, qu'elle ressemble à une application. Et il s'agit d'un logiciel en tant que produit de service. Pensez donc à Zoom, à Slack, Dropbox ou à Google Drive. Ce sont des choses qui vendent ce logiciel en tant que service. Il s'agit donc d'un service que nous fournissons aux gens. C'est donc un peu comme un modèle commercial. Ajoutons donc simplement un cadre pour iPhone 17. Je vais essayer de rester simpliste afin de ne pas créer cette leçon de cinq heures parce que vous ne pouvez pas créer une heure, mais nous allons essayer de le faire pour la page principale, au moins Donc, tout d'abord, je veux dire, vous devriez avoir des maquettes, brouillons et des croquis antérieurs pour comprendre ce que vous voulez faire et comment vous pouvez le faire au mieux Mais pour l'instant, nous nous lançons dans le processus. Nous avons déjà le logo ici. Nous pouvons donc nommer ce logo, et je vais juste le copier-coller ici pour le moment, et je vais le traiter avec K, je peux le redimensionner et je peux le mettre ici pour le moment, je peux également supprimer l'arrière-plan Il ne s'agit donc que du logo ici. OK. Voici donc notre application. Maintenant, je vais essayer comprendre la navigation ou la première page, et passons à la navigation et essayons de comprendre comment cela va se passer. Je vais aller de l'avant et essayer de créer une navigation très Apple. Je vais donc vous donner 50 coins arrondis et je vais le faire de manière à ce qu'il y ait une barre entière ici, au cas où vous ne connaîtriez pas le nouveau langage de conception Apple, et où il y ait un bouton ici. D'accord, mais nous allons essayer de les garder aussi petits que possible, pas trop grands. Je pense que c'est suffisant. Ensuite, je vais aller les rassasier. Le remplissage peut être un peu grisâtre. Nous pouvons utiliser cette couleur spécifiquement et nous allons lui donner un trait. Maintenant, je veux le fabriquer chez Glasy, lui donner un aspect vitreux Regarde ce que je vais essayer de faire. Ce n'est pas si simple, mais tu peux essayer de me dire où je vais. Donc, en ce qui concerne l'accident vasculaire cérébral, je veux que ce soit un peu comme ça. Ensuite, je vais lui donner 50 %. Et je vais le copier ici. Nous y voilà. Ce sont nos boutons et je n'ai pas besoin de créer deux versions. Je peux simplement en créer un et partir de là. Mais voyons ce que nous pouvons en faire. Tout d'abord, nous allons ajouter ajouter transparence et lui donner un effet de flou d'arrière-plan de dix, peut-être Ensuite, je vais créer un carré juste ici et je vais simplement le redimensionner et lui donner la couleur bleue, cliquer sur I, le mettre en arrière-plan, et maintenant nous pouvons examiner cet effet de flou d' arrière-plan Juste pour nous assurer que nous l'avons vraiment obtenu comme nous le voulions. Maintenant, je peux dire : OK, c'est un peu mieux. Je veux dire, parce que sinon, ce n'est pas très lisible, faut donc trouver un moyen de contourner ce problème, trouver un bon rapport qualité-prix. Vous pouvez augmenter le flou ou nous pouvons le rendre moins transparent. Cela dépend vraiment de nous. Vous pouvez également simplement utiliser l'effet de verre. Il fait donc à peu près ce que vous voulez qu'il fasse ici dans ce cas, et c'est plutôt chouette. Utilisons-le donc pour le moment car il s'agit d'une nouvelle fonctionnalité et je veux l'essayer. Et ce qui est important, c'est que vous puissiez les voir même s' ils ne le sont pas. Je veux dire, il n'y a rien derrière eux . Vous pouvez donc les voir et qu'ils sont séparés . C' est quelque chose que nous pouvons en quelque sorte réaliser actuellement avec cela, ce qui que nous pouvons en quelque sorte réaliser actuellement avec cela, ce qui donne un aperçu de ce qui se passe ici. Passons maintenant aux boutons. Maintenant, nous pouvons travailler avec des icônes et j'essaie juste de comprendre ce que je veux ajouter ici pour cette navigation. Rien de ce que je veux absolument avoir, d'abord, redimensionnons-les et assurons-nous que la police ici est Rubik, c'est celle que j'ai choisie, afin que nous puissions utiliser Rubik ici, afin que nous puissions utiliser Rubik ici Alors réfléchissons simplement à ce que nous voulons ajouter ici. Personnellement, je pense qu'il devrait y avoir un onglet de rapports, de rapports ou d'analyses, puis un onglet de profil ou de paramètres, puis un onglet d'annonce ici. Ou créez ou analysez. Je vais juste en faire un bouton plus ici, puis je les placerai ici vers le milieu. Ensuite, nous pouvons avoir un troisième bouton, et ce troisième bouton peut concerner la communauté ou quelque chose comme ça, pour voir ce que fait la communauté, n'est-ce pas ? Voyons donc comment nous pouvons résoudre ce problème. Alors maintenant, vous pouvez l'apporter ici juste pour voir à quoi cela ressemblerait. Voyons à quoi ça ressemble. D'accord, nous devrions peut-être le réduire un peu et voir comment cela se passe. OK. Alors maintenant, idéalement, nous aurons une icône ici. Je vais utiliser de superbes icônes gratuites. Et ce qui est bien, c'est que, vous savez, vous pouvez parfois écrire le nom de l'icône que vous souhaitez utiliser, mais vous devez simplement vous assurer qu'elle est solide et non régulière. Ainsi, par exemple, pour les rapports, je pourrais écrire des documents ou quelque chose comme ça ou du papier ou, vous savez, je peux écrire, nous pouvons vérifier ce qu'ils contiennent. Tu dois t'assurer que ce que tu veux obtenir s'appelle vraiment comme ça. Par exemple, vous voyez ici qu'il n'y a rien qui s'appelle des documents, mais vous devez vous assurer que c'est gratuit. Vous pouvez le filtrer gratuitement à partir d'ici , puis voir ce que vous pouvez obtenir. presse-papiers est plutôt bon pour les rapports, je pense, donc vous pouvez simplement l'utiliser Vous pouvez l'utiliser régulièrement et solide. Cela dépend de la disponibilité. Nous allons l'agrandir. Ensuite, nous allons créer une mise en page automatique entre celles-ci en maintenant les touches Shift et A. Maintenant, nous avons un Nous allons aller de l'avant et en faire un composant, nous allons donc utiliser le bouton de navigation. C'est comme ça que nous allons l'appeler. Idéalement, ce que nous devrions faire à ce sujet, c'est lui donner un peu de rembourrage de haut en bas, n'est-ce pas Et puis double-cliquer va faire un ajustement de la largeur. Je veux dire, oui, alors maintenant c'est un câlin. Et ce que nous allons faire, c'est créer un arrière-plan, créer un fond et lui donner un coin arrondi. Parce que ce sera le bouton que nous aurons, non ? C'est donc en quelque sorte le domaine que nous voulons avoir défini. Et ce que nous pouvons faire, c'est copier et le coller ici et voir à quoi cela ressemble. Nous pouvons changer la couleur ici et vous pouvez voir à quoi cela ressemble. Je veux dire, peut-être avez-vous besoin d'un peu plus de rembourrage des deux côtés. Donc, vous voyez, c'est la zone qui a été choisie. Nous ne sommes pas obligés de l'utiliser de cette façon, mais c'est juste bon à savoir. Oui, maintenant nous les avons et nous pouvons essentiellement copier et coller, copier et coller. Maintenant, nous allons transformer tout cela en une mise en page automatique, juste à partir d'ici. Il s'agit maintenant d'une mise en page automatique avec un espacement de quatre pixels. Ensuite, nous pouvons les modifier ici. Nous avons parlé de paramètres, puis ici nous pouvons écrire des engrenages. Voyons voir si Gears fonctionne. Cela n'a pas marché. Engrenage ou engrenages. Mais celui-ci n'est disponible que s'il est solide. Il se peut que nous devions tout consolider. C'est ce qui arrive quand on a un budget limité. Mais si vous utilisez la version pro, vous pouvez utiliser la version solide et la version pro. Ensuite, nous avons la communauté. Nous allons juste écrire une communauté ici, puis nous aurons des utilisateurs qui fonctionneront peut-être parfaitement. Utilisateurs. Nous avons maintenant ces trois boutons. Idéalement, vous ne devriez pas avoir de boutons de formes si différentes, je suppose que l'un ne devrait pas être tellement plus gros que l'autre et ainsi de suite formes si différentes, je suppose que un ne devrait pas être tellement plus gros que l'autre et Je veux dire, ça arrive. Vous pouvez vivre avec, ou ce que vous pouvez idéalement faire, c'est qu'ils aient tous la même taille. Allons-y, faisons-en 12 et réduisons-les un peu , puis nous les verrons et les rendrons également un peu plus petits. Nous allons créer un petit peu tout ce bouton. Changeons les choses. OK. Ensuite, ce que nous pouvons faire au lieu de l'avoir comme câlin, nous pouvons lui donner une largeur fixe. Donc, cette largeur fixe pourrait être, je ne suis pas sûr, 70 ou quelque chose comme ça. Mais le problème, c'est qu'ils ont déjà leurs propres valeurs maintenant. Alors, revenez en arrière. Alors passez d'un câlin , puis écrivez simplement un chiffre et vous n'avez qu'à les modifier car ils ont tous leur propre taille. Donc, ils ne se contentent pas de s'étreindre, il faut juste atteindre 60 ou 70 ans Mais comme vous vous en rendez compte, le problème ici est que, je veux dire, ils prennent vraiment mal forme lorsque vous appliquez cette méthode. Vous devez donc vous assurer qu'ils sont aussi gros que le plus gros, qui est celui-ci. Voyons quelle est la largeur de celui-ci. Donc 89, nous pouvons juste en faire 90 pour chacun d'entre eux. Alors ça a l'air un peu mieux. Assurez-vous que tout est dans le même sens, même ce texte doit être centré, qu'il soit un peu plus beau. Nous allons le supprimer et nous allons simplement tester à quoi cela ressemble. Je vais juste le supprimer ou je peux simplement le faire très gris et ensuite voir à quoi il ressemble. OK. Ça a l'air d'aller bien. Ça a l'air mieux. Vérifions-le avec le cadre réel de l'appareil. Ce n'est pas trop mal. On peut le mettre un peu de côté. Oui, c'est pas trop mal. Faites-en un composant. Allons-y et essayons de le faire. Nous pouvons en avoir deux versions, ou nous pouvons simplement le masquer et créer quelque chose comme un cercle de la même taille. Nous avons dit que c'était 90 et 54, 90. Ensuite, vous pouvez lui donner 50 coins arrondis, puis nous pouvons le rendre noir avec 10 %, puis nous pouvons le prendre et l'ajouter ici et nous allons ignorer la mise en page automatique, donc il sera juste en arrière-plan ici. Ce que nous allons faire, c'est créer deux versions différentes du bouton de navigation. L'un d'eux va devenir gris et l'autre va être entièrement coloré. Voyons à quoi cela pourrait ressembler. Nous allons le mettre en arrière-plan, puis je vais le choisir et voir à quoi cela ressemble avec la variante 2. Eh bien, ça n'a pas l'air très beau. Ajoutons-le ici et voyons à quoi cela ressemble dans la réalité. Ça a l'air un peu mieux ici, pour être honnête, pas trop mal. OK. Maintenant, nous pouvons nous mettre au travail. Cela s'appelle RNVbr et nous pouvons en ajouter plusieurs versions Je vais juste continuer à en ajouter. Ensuite, ce que je vais faire, c'est prendre ceci ici et je vais donner celui-ci, en faire la variante deux. Celui-ci, faites-en la première variante et pareil ici, variante deux, variante un, puis je vais prendre l' arrière-plan et l'apporter ici. OK. Nous avons donc maintenant ces différentes versions, et je vais appeler celle-ci rapports, celle-ci paramètres et cette communauté. Vous pouvez consulter la page complète de la propriété. Et maintenant, nous avons cette configuration Nabbar, ressemble beaucoup à Apple C'est donc plutôt chouette. Et oui, alors maintenant nous l'avons. Nous allons faire en sorte que cela fonctionne dans un moment, mais je pense à créer l'autre version , à savoir le bouton plus. Je vais le copier et le coller ici, puis je vais en supprimer deux. Je vais supprimer le deuxième cercle La première chose que je vais faire est cliquer avec le bouton droit et de détacher cette instance, puis d'écrire plus, afin que nous puissions créer un bouton plus ou créer notre propre bouton plus Mais le plus important, c'est qu'il a une hauteur de 54, tout comme celui-ci, il doit être de la même hauteur. En fait, ce n'était pas 64, assurez-vous que c'est 64. Maintenant c'est centré. Nous pouvons l' agrandir un peu et lui donner la même couleur. Encore une fois, il n'y a aucune raison pour que cela occupe toute cette zone, alors maintenant nous le faisons simplement dans les bras, puis nous allons appeler ce bouton publicitaire , le copier, le coller, l'amener ici et nous allons en faire une mise en page automatique, les deux en les plaçant au centre, et voilà. Nous avons maintenant ces deux boutons. Ils ne sont pas parfaits, mais ils sont plutôt beaux, je dirais. Maintenant, ajoutons-le en arrière-plan pour voir à quoi cela ressemblerait. Voici à quoi ressemblent les boutons. Ils le sont un peu, mais ils interagissent avec l'arrière-plan. Maintenant, j'ai l'impression que cela pourrait être un peu plus petit. Mais modifions-le à partir du composant lui-même. Je vais donc créer le 64 par 64 et faire la mise en page automatique au milieu et je vais faire sorte que les icônes soient si différentes les unes des autres. Cela semble un peu mieux, puis ce que nous allons faire c'est commencer à travailler sur la mise en page réelle ici. Lorsque vous consultez des rapports, vous devriez normalement avoir quelques boutons indiquant les rapports actuels, ces rapports, ces rapports, etc. Ensuite, nous devrions avoir une idée de ce que nous avons sur la page principale. Je veux dire, qu'est-ce que nous avons ? Disposez-vous d'un vrai rapport ou non ? Ce que nous pouvons faire, c'est créer un état vide. Maintenant, c'est un état vide, c'est essentiellement quand il n'y a rien que vous le montrez. Ce que nous pouvons faire, c'est que vous ne le fassiez pas, transformons-en Rubik Vous n'avez aucun rapport pour l'instant. Nous pouvons le mettre au milieu, 16, puis nous pouvons faire une illustration ou ajouter quelque chose ici. Je veux dire, nous pouvons faire quelque chose par nous-mêmes , un visage triste ou quelque chose comme ça. Maintenant, cela est censé culpabiliser les utilisateurs pour qu'ils utilisent votre produit. Je peux juste copier le code hexadécimal ici, hors d'ici. Copiez-collez. Je vais le copier-coller. Je vais le faire comme ça. Alors, il est préférable que vous gardiez d'une manière ou d'une autre une identité pour tout cela. Je vais les regrouper puis les centrer. Je vais supprimer le regroupement. Et ce que je peux faire, par exemple, c'est ajouter des lunettes, car il s'agit d'une application pour obtenir des informations, etc. Cela pourrait montrer que, hé, tu sais, nous sommes tous un couple de nerds. C'est un bon indice, car cela crée des identités. Il ne s'agit pas simplement d'un état vide générique, mais il montre ce qui se passe. Je les choisirai et je leur fabriquerai les lunettes. Et je pourrais aussi les rendre un peu plus fins si nous le voulons. Vous n'avez donc pas encore de rapports. Ceci est notre page principale. Donc, disons simplement qu' il n'y a pas encore de rapports, mais qu'en même temps, nous pourrions créer une mise en page automatique ici et lui donner un peu de couleur. Nous pouvons le choisir à nouveau et en faire 36, puis y ajouter du texte, créer une mise en page automatique. Maintenant, le texte, on pourrait lui donner la même couleur pour le moment. Et donne-nous du rembourrage. Donc huit sur huit, ou ça pourrait être 12 ou ce que nous voulons. Ensuite, nous pourrions essentiellement parler rapports récents ou simplement de quelques catégories. Créez un espace entre eux et nous pourrions avoir tous les derniers, peu importe Je vais ajouter un peu plus de rembourrage à droite et à gauche 16 serait en fait beaucoup plus sympa. C'est donc à vous de filtrer le tout, juste pour filtrer tous les rapports que vous avez au cas où vous en auriez, mais pour le moment nous n'en avons aucun. Donc, comme je l'ai dit, récemment, tout ce que nous pouvions dire visuel texte ou quelque chose comme ça, juste pour filtrer les rapports. Et oui, on peut aussi lui donner une identité similaire, lui donner le même trait ou quelque chose comme ça. Mais, à un moment donné, vous devez également comprendre. Je veux dire, laquelle est la barre de navigation. heure actuelle, nous maintenons les choses comme ça juste pour montrer qu' s'agit d'un élément qui n' est pas très important. C'est censé être mis en évidence, mais celui-ci ne devrait pas l'être, donc je vais juste le garder comme ça. Il s'agit de notre première page. Nous avons notre logo ici. On pourrait aussi le mettre au milieu. Ou bien, ce que font de nombreuses applications de nos jours c'est qu'elles n'ont le logo nulle part, juste pour économiser de l'espace. C'est quelque chose que vous pourriez faire, et je vous conseille de le faire. Mais oui, c'est quelque chose que tu dois décider toi-même. Ou vous pouvez également rendre un peu plus petit. Nous allons donc créer trois versions différentes et nous assurer que les pages sont correctement alignées. Nous allons les prototyper de telle sorte que lorsque vous cliquez sur un élément, par exemple accédant au composant maintenant, le composant d'origine, lorsque vous cliquez sur les paramètres, il passe dans les paramètres. Lorsque vous cliquez sur Communauté, devez accéder à la page Communauté, et lorsque vous cliquez sur Rapports, devez accéder à la page des ports. Donc je suis juste en train de les lier en ce moment. Ensuite, je vais également le configurer de manière à ce qu'il y ait un mouvement de glissement. Nous l'avons fait dans une leçon précédente afin que lorsque vous faites glisser ou balayez la page, elle puisse passer de la première à la deuxième, puis à la troisième, simplement par un simple geste de balayage Vous pouvez le faire en créant un prototype ou en créant une interaction, et cette interaction doit se faire par glisser-déplacer, et non pas par tapotement, glissement, et ne doit pas être animée de manière intelligente, elle doit être push On peut donc pousser, on peut le déplacer, on peut le pousser, mais la poussée est la méthode la plus souple et la plus esthétique. Je veux dire, c'est celui que l'on utilise le plus, alors il faut le faire de droite à gauche. Ainsi, vous voyez l'écran venir de la droite vers la gauche, puis vous pouvez également l'inverser lorsque vous allez de la droite vers la gauche, vous pouvez faire en sorte que l'écran vienne de la gauche vers la droite. Tu as compris l'idée. Maintenant, j'aimerais créer un petit menu contextuel. Il s'agit d'un menu qui, lorsque vous cliquez sur le signe plus , vous indique quelques actions. Ici, je m'inspire un peu de Google Drive car Google Drive propose certaines options. Il indique de numériser un document, télécharger un fichier, de créer des documents , de créer des feuilles, etc. Ce sont les options que nous recherchons ici. À titre d'exemple, nous pourrions analyser un fichier, numériser un document ou créer un graphique ou quelque chose comme ça. Permettez-moi de leur trouver les icônes, les configurer correctement, de créer un rembourrage, et c'est parti Maintenant, je vais créer un prototype telle sorte que lorsque quelqu'un clique de telle sorte que lorsque quelqu'un clique sur le bouton plus, il soit touché, la superposition s'ouvre et cette superposition soit manuelle Je vais donc la choisir et elle sera juste au-dessus, comme ça Et il va se fermer lorsque vous cliquez à l'extérieur. Il va avoir un fond noir à 25 %, et il va se dissoudre, mais ça va être très rapide. Ça va prendre 100 millisecondes ou quelque chose comme ça. Alors maintenant, nous l'avons. Voyons maintenant à quoi cela ressemble. Nous revenons au clic, et voici à quoi cela ressemble. Maintenant, bien sûr, nous pouvons en créer une animation. Ce serait beaucoup plus pratique de le faire. Mais laissez-moi vous montrer comment nous pouvons le faire très rapidement. Donc, ajouter un bouton, et je vais appeler cette fenêtre contextuelle un et deux. Collez-en deux. Ce que je vais faire ici, c'est réduire et je vais le faire de haut en bas, d'accord ? Il va donc s'ouvrir comme ça ou peut-être même comme ça, puis il va continuer à atteindre sa taille maximale. Et pour ce faire, vous ajoutez le plus et vous dites qu' après le délai, vous réduisez le délai à zéro, ce qui sera d' une milliseconde, et vous allez dire animation intelligente et superposition Il va passer de cette superposition à celle-ci en utilisant Smart Animate, et cela se produira dans 300 ou 100 millisecondes et les composants de réinitialisation resteront réinitialisés en position de défilement et voyons 100 millisecondes et les composants de réinitialisation resteront réinitialisés en position de défilement et resteront réinitialisés en position de défilement Maintenant, je vais le tester. Permettez-moi d'en faire un point de départ pour le flux. Je vais donc simplement supprimer cela ne devrait pas être un point de départ de flux. Ensuite, vous cliquez sur ici, prétendument, et c'est comme ça que ça se passe. Mais je veux dire, ça devrait aller de bas en haut. C'est là toute l' idée. Vous créez une petite animation qui vous donne quelques options. Maintenant, bien sûr, nous pouvons ajouter un espace supplémentaire entre les options, juste pour que les utilisateurs puissent cliquer dessus s'ils le souhaitent Assurez-vous donc que c'est disponible, puis je vais le configurer pour qu' il ait une position différente maintenant. Voyons voir. D'accord, vous pouvez donc analyser un document numérisé. Je peux le ramener un peu plus bas. Et nous y voilà. Vous pouvez effectuer ces actions. Vous pouvez changer ces pages, juste comme ça, nous avons un produit qui prend forme. nous reste plus qu'à faire quelques réglages rapides, des options rapides ici, je vais copier cet élément ici, le coller ici. Et je vais le modifier un peu. Je vais faire en sorte que ce soit 20, et que ce soit aussi 20. Maintenant, les tailles sont différentes et je vais copier-coller ceci. Je vais ajouter un peu plus d' espacement entre eux, peut-être 16, et je vais en faire une mise en page automatique Je vais faire en sorte que l'espacement entre eux soit de 24, et je vais même ajouter une ligne Cliquez donc sur L, maintenez la touche Shift enfoncée puis vous pouvez tracer une ligne droite, coller ici et vous assurer qu'elle remplit le récipient. Vous pouvez également le rendre gris très clair, puis vous pouvez étendre le contenant, et vous pouvez voir qu'ils remplissent également le récipient, et puis je veux dire, je préfère en faire un composant, donc je vais appeler cet article. Allons-y un peu plus chic avec celui-ci. Je vais lui donner un peu de rembourrage. Et double-cliquez pour qu' il corresponde à la hauteur. Voyons ensuite à quoi cela ressemble avec, avec un remplissage. Voilà à quoi cela ressemblerait. On peut le garder comme ça. Je veux dire, c'est un peu carré, ou nous pouvons suivre nos coins arrondis et le rendre légèrement arrondi. Ensuite, nous pouvons ajouter un état et passer l'état de survol. Je suis désolée pour ça. Verrouillez les majuscules. Ensuite, avec l'état de Huber, nous ajouterions un remplissage noir de 10 % C'est à ce moment que vous cliquez dessus. Encore une fois, nous pouvons le prototyper et faire en sorte qu'au toucher ou en appuyant, cela ressemble à cela. Copiez-le, collez-le ici, supprimez-les, puis tracez simplement la ligne qui les sépare voir quel est l'espacement J'ai l'impression que c'est trop. Je vais faire ce 16, puis copier/coller, copier/coller, copier/coller. Il s'agit de vos paramètres. Je vais les mettre au milieu, assurer qu'il y a du rembourrage à droite et à gauche Je veux dire, nous pouvons l'étendre et lui donner un peu de rembourrage, juste 16 ou quelque chose comme ça Ce sont nos paramètres, et nous pouvons simplement écrire un gros texte disant paramètres. C'est quelque chose que nous pouvons faire. Alors, comme vous pouvez le voir, l'espace ici n'est pas le même que l'espace ci-dessus. Nous pouvons donc ajouter 16 rembourrages de haut en bas, juste pour nous assurer que tout est égal Nous pouvons également créer une ligne ici juste pour montrer qu'il s'agit du titre, puis tout le reste est en quelque sorte une partie, vous pouvez copier la couleur ici, ici et voir si c'est assez clair. Je dirais que oui. Mais maintenant, assurons-nous que le type de paramètre est compréhensible, afin que nous puissions dire les préférences de l'utilisateur, puis écrire utilisateur ici. Ensuite, nous pouvons parler de confidentialité, de termes et conditions. Nous pouvons dire profil, et j'écris poignée de main, puis ici réseau, peut-être ou pas sûr OK. Abonnement. Disons donc simplement des pièces de monnaie. Ou simplement un abonnement. À quoi ressemblerait un abonnement ? Non, ce n'est pas utile. Nous pouvons donc créer un œil, ce qui est un peu comme de l'intimité. Alors copiez-le, collez-le ici, et nous pouvons simplement jeter les termes et conditions jusqu'à la fin, suivre la ligne Et pour le reste, on peut juste trouver une solution. Donc, préférences de l'utilisateur, confidentialité , abonnement, profil utilisateur. Profil public ou profil social. Parlons-en ici. Je rédige un profil. C'est Circle User. Utilisateur du cercle. Nous pouvons donc passer à la vitesse supérieure. Nous pouvons l'agrandir juste pour qu'il soit plus clair qu'il s' agit des paramètres, et nous pouvons lui donner la même couleur. Je veux dire, pour le moment, le noir foncé est un peu dur, donc vous pouvez le donner et ici, nous pouvons également ajouter le même texte ici et parler de rapports. Comme il s'agit d'un élément plus incliné vers la gauche ou aligné vers la gauche, vous pouvez également le faire ici ou nous pouvons le garder au milieu puisqu' il ne s' agit que d'un filtre, cela dépend entièrement de vous. Tout à fait d'accord pour le faire comme ça, puis nous pouvons le coller ici et dire communauté. H Maintenant, comme vous pouvez le voir, je ne suis pas parfaitement aligné pour le moment, nous travaillons juste très grossièrement Maintenant, que pouvons-nous faire ici ? Je veux dire, laisse-moi remettre ça ici. Au lieu de le faire, nous pouvons le faire. Habituellement, sur les réseaux sociaux, il y a une page pour vous, puis une page communautaire ou une page où il s'agit simplement de suivre la page, vous montrant simplement ce que vous suivez au lieu de simplement vous montrer l'ensemble de la communauté. C'est quelque chose que nous pouvons également utiliser totalement. Nous pouvons donc le garder comme ça. Donc, pour vous et pour les suivants une chose dont nous n'étions pas sûrs, c'est que nous pouvons copier ici et l'intégrer ce cadre, puis le redimensionner juste pour nous assurer que l'option actuellement choisie est claire , n'est-ce pas ? Il suffit donc de le centrer. Donc, en gros, un peu comme ça. Et c'est pareil ici. Nous pouvons le faire. Je veux dire, nous pouvons le faire de 5 % ici pour que ce ne soit pas trop fort et pareil ici, voilà. Maintenant, il est un peu plus facile de comprendre où vous en êtes et ce que vous faites. Je vais le mettre un peu plus haut, puis nous avons notre page communautaire où nous devrions avoir publications et des informations provenant de personnes sur ce dont elles parlent, etc. Il s'agit d'une interface utilisateur très rudimentaire juste pour vous faire savoir que ce projet est assez simpliste J'essaie ici de vous montrer comment vous pouvez utiliser ces compétences avancées en utilisant FiGMA pour créer une bonne expérience sur une application ou un site Web ou quoi que ce soit Je viens de me rendre compte que toutes ces interactions que nous avons effectuées avec ces boutons n'auraient pas dû être animées de manière intelligente, mais plutôt pressées. Donc, assurez-vous de l'avoir noté. Mais vous devez vous assurer que d'ici à là, il y aura une poussée spécifique. Donc ça va être comme ça. Ouais. Ensuite, pour la communauté, il en sera de même. Et ainsi de suite. Mais ici, cela va être inversé. Vous pouvez donc voir et assurer qu'ils ont tous couches animées correspondantes sélectionnées dessus. Sélectionnez-les, maintenez la touche Ctrl Alt A , ou vous pouvez simplement cliquer sur ici ou ici, puis cliquer sur toutes les couches correspondantes, puis aller ici et vérifier que vous avez des couches correspondantes animées Même chose ici. Et ici. C'est du travail manuel. Maintenant, lorsque nous cliquons dessus, il y aura toujours un effet de défilement. Vous pouvez voir que c'est assez fluide, plutôt sympa et nous avons à nouveau ce bouton qui nous indique ce que nous pouvons faire, analyser un fichier, numériser, documenter, créer un graphique ou quoi que ce soit d'autre. Je ne vais pas trop travailler sur le plan communautaire parce que cela va nous mettre dans une position différente. Mais j'aimerais travailler davantage sur la fonctionnalité principale, le MVP, qui consiste essentiellement à analyser des fichiers, à numériser des documents, à créer des graphiques une chose que nous pouvons faire. Je peux copier et coller tout ce cadre, copier, le coller, je peux l'apporter ici, tout supprimer. Ensuite, je vais le raccourcir un peu. Ce que je vais faire, c'est lui donner un peu de coins arrondis comme ça, mais juste au-dessus, pas par le bas, et je vais ajouter une petite barre ici. Il s'agit essentiellement d'une fenêtre contextuelle qui va apparaître par le bas. Il suffit de faire ces trois ou quelque chose comme ça, de le rendre un peu gris, puis de nous donner des extrémités arrondies. Je l'ajoute ici. OK, parfait. Cela ressemble beaucoup à un iPhone, et je vais l'appeler Analyser le fichier. Ainsi, lorsque vous cliquez sur Analyser le fichier, il vous sera demandé de partager votre fichier. Maintenant, pour cela, nous devons comprendre comment cela fonctionne lorsque vous souhaitez partager un tel fichier et comment cela fonctionne ? Vous cliquez sur Charger le fichier. Et en ce qui concerne les iPhones, cela va ouvrir une fenêtre affichant vos fichiers Il va dire quelque chose comme sur mon téléphone ou sur mon iPhone. Il va le mettre ici, puis il va mettre quelques boutons pour vous ici ou peut-être même vous montrer quelques fichiers. Allons-y donc et écrivons l'icône du fichier IOS. Pas du shopping, mais des images. Une fois que vous en avez trouvé une qui vous convient, vous pouvez copier cette image et l'apporter à Figma Ensuite, je vais faire le tour de la zone et lui demander de l'isoler. Nous avons maintenant cette icône que nous voulions utiliser de manière isolée. Nous pouvons maintenant l'apporter ici et montrer à quoi il pourrait ressembler sur un iPhone. Je vais juste écrire ici des téléchargements ou quelque chose comme ça ou quoi que ce soit d'autre. Copiez-le et ajoutez autre chose. Peut-être pas iCloud, mais il y a peut-être un X ici ou quelque chose comme ça. Vous avez compris l'idée , puis nous allons passer à Analyser le fichier, le conserver et l'amener jusqu'à Analyser le fichier. Nous allons dire essentiellement une superposition ouverte, nous allons dire en bas au centre Il va le placer ici, en bas au centre. Et je veux dire, voyons voir si cela fonctionne. Et nous allons dire que l'arrière-plan se ferme lorsque vous cliquez à l'extérieur, et que cela se déplace de bas en haut, et cela prend moins de 300 millisecondes Voyons donc si cela fonctionne. Nous cliquons ici et nous cliquons sur Analyser le fichier. Et juste comme ça, ça l'a ouvert. Mais nous ne pouvons pas vraiment, vous pouvez voir que nous pouvons le fermer , mais si nous voulons simplement le retirer, nous ne pouvons pas passer à l'autre page, mais nous ne pouvons pas le retirer vers le bas. Maintenant, la façon de le faire est de le maintenir, lui donner une interaction, et cette interaction doit être glissée. Maintenant, vous pouvez voir que si nous mettons le glissement ici, nous avons un problème car nous avons deux options de glissement. Je veux dire, ça marche, mais il faut en changer un. Cela ne devrait pas aller dans les paramètres, comme vous pouvez le voir, nous ne devrions pas pouvoir cliquer dessus puis accéder aux paramètres. Mais ce que nous voulons plutôt, c'est qu'au lieu de naviguer, nous voulons fermer la superposition Lorsque vous le faites glisser vers le bas, il devrait le fermer. Voyons si cela fonctionne exactement comme ça. C'était juste comme ça. Vous le retirez, puis vous dites : « Non, non, non, non, je ne voulais pas analyser un fichier ». Je voulais plutôt numériser un document. Maintenant, un document peut aussi être la même chose, ou ce que nous pouvons faire, c'est créer un cadre pour iPhone 17 et créer une situation de caméra. La façon dont cela fonctionnerait serait d'afficher deux barres noires. Puis un cercle blanc. Nous pouvons réduire un peu cette barre. Ensuite, nous pouvons également ramener ce X ici. Alors, voyons voir. Je veux dire, cela pourrait être l'option du document numérisé, puis nous pourrons passer ici. Et nous pouvons montrer, par exemple, à quoi ressemble un document. Photo d'un formulaire sur une table. D'un document. Bon, maintenant j'ai trouvé une photo, ce qui est assez drôle. Je veux dire, quelqu'un fait faillite, ce qui n'est pas toujours drôle, mais c'est juste une image amusante pour ce cas d'utilisation. Quelqu'un essaie de numériser un document, l' appareil photo de son téléphone s'ouvre. Voici le premier écran. Je vais juste garder les superpositions ici ou les actions spécifiques ici juste pour les organiser un peu Je vais le supprimer ici. Nous n'en avons pas besoin. Ensuite, nous devrons numériser le document et celui-ci l' ouvrira essentiellement sous forme de superposition, je suppose Et il serait centré ou vous pouvez aussi dire en bas au centre, nous pouvons lui donner les mêmes choses et nous pouvons aussi le raccourcir un tout petit peu. En fait, voyons à quoi ça ressemble en ce moment. Lorsque vous cliquez dessus, il ouvre simplement l'appareil photo ou vous pouvez le fermer d'ici. Nous n'avons pas vraiment prototypé ces interactions, les superpositions rapprochées, c'est pareil ici, mais cela ne devrait pas être si haut Ou nous pouvons également avoir cette petite barre ici pour montrer que vous pouvez la tirer vers le bas. Ensuite, nous pouvons lui donner la même action ici. Nous pouvons simplement copier l'interaction, coller ici, puis, comme vous pouvez le voir, nous pouvons la retirer vers le bas. 19. Projet de cours : Conception d'une interface SaaS réactive: Il est maintenant temps de mettre en pratique tout ce que vous avez appris. Pour ce projet de classe, vous allez concevoir un logiciel en tant qu' interface de service en utilisant fonctionnalités et techniques avancées de Figma , telles que les composants, les mises en page automatiques, les variables et les micro-interactions Commencez par créer un système de conception épuré et évolutif que vous pouvez utiliser dans le cadre de votre conception. Cela signifie que vous devez choisir les couleurs que vous allez utiliser, configurer vos variables et styles, choisir les polices et tous les petits détails que vous souhaitez obtenir parfaitement. Une fois que vous avez terminé, allez-y et commencez par créer votre design. Créez un écran. Vous pouvez commencer par un écran de bureau ou par un écran mobile. Une fois que vous avez fini de créer et de concevoir son apparence, assurez-vous qu'il est également réactif en utilisant la mise en page automatique, en utilisant des contraintes, assurez-vous de pouvoir l'étirer et de l'afficher sur différentes tailles d'écran, qu'il reste beau. Petit conseil, vous pouvez également utiliser des points d' arrêt pour créer une version différente, une pour un ordinateur de bureau, une pour une tablette et une pour un téléphone Maintenant, donnez vie à votre design en utilisant des micro-interactions et des animations l'aide de l'animation intelligente et des fonctionnalités de prototypage avancées Une fois que vous avez terminé , exportez votre projet et téléchargez-le dans la galerie de projets. N'hésitez pas à ajouter une petite description de vos décisions de conception, parler de votre système de conception, etc., juste pour clarifier ce que vous avez fait et pourquoi vous l'avez fait Maintenant, n'oubliez pas que l' objectif ici n'est pas seulement concevoir quelque chose qui soit beau et beau, mais aussi de concevoir quelque chose qui semble réel et fonctionnel, tout comme une interface prête pour la production. C'est l'occasion de mettre en valeur vos compétences avancées en matière de figma, alors prenez votre temps et amusez-vous bien 20. Félicitations ! Et ensuite ?: Félicitations pour avoir terminé le cours. À ce jour, vous avez appris à aborder et à utiliser Figma comme un concepteur avancé, qu'il s'agisse de créer des systèmes de conception évolutifs et de mises en page réactives, de créer magnifiques prototypes interactifs ou d' utiliser efficacement des outils modernes Ce sont exactement les types de compétences qui font vraiment la différence lorsque vous travaillez sur des projets professionnels. Et la clé pour maîtriser tout cela, c'est la pratique, beaucoup, beaucoup de pratique Continuez donc à expérimenter, à essayer différentes choses, à affiner vos flux de travail et appliquer ces techniques à vos propres projets Si ce n'est pas déjà fait, veuillez télécharger vos fichiers de conception dans la galerie de projets. J'adorerais vraiment voir ce que vous allez trouver. Et si vous avez apprécié ce cours, n'hésitez pas à nous laisser un avis. Cela nous aide vraiment à obtenir quelques commentaires afin de créer un contenu encore meilleur pour vous. Merci beaucoup de votre participation, et je vous verrai lors du prochain cours.