Design d'UI/UX avancé : devenir pro de Figma

1. Intro au cours avancé Figma: Bonjour Je suis Dan Scott, et voici le cours Figma Advanced, mon ami le cours Figma Advanced Maintenant, ce cours s'adresse aux personnes qui ont suivi mon cours Figma Essentials ou qui sont autodidactes. Tu es plutôt douée. Mais vous savez qu'il y en a tellement d'autres, comme des outils, des trucs et astuces, des flux de travail et des mises à jour que vous n'avez tout simplement pas encore eu le temps d'explorer. Si cela vous convient, ce cours est fait pour vous. Qui est ce type ? Je suis Dan Scott. Je suis designer UX et instructeur Figma. J'ai remporté de nombreux prix d'enseignement et j'ai aidé plus d'un million de personnes , comme vous, à devenir de meilleurs designers. Nous n'allons donc pas simplement déplacer des boîtes ici. Nous allons réellement construire quelque chose. Vous aurez votre propre projet et votre propre personnalité, et à la fin, vous aurez une application complète prête à être intégrée directement dans votre portfolio. Tout d'abord, nous utiliserons l'IA dans co Figma pour agir rapidement. Je parle d'une véritable efficacité, celle qui vous fait gagner des heures, pas des minutes. Nous aborderons en profondeur les mises en page automatiques et les contraintes, des éléments qui distinguent les amateurs des pros Vous maîtriserez les composants et les variables de manière si étroite qu'ils seront impossibles à décomposer et faciles à mettre à jour Ajoutez du punch visuel, des effets, la typographie et des micro-interactions pour que votre design se démarque. Je vais vous montrer des astuces pour gérer vos actifs, vos grilles et vos styles comme un boss absolu, et je vais vous montrer certains des équipements qui vous permettent d' être plus rapide et de donner l'impression que vous savez ce que vous faites lorsque des personnes passent devant votre bureau Oh, regarde ça. Vous utiliserez des variables pour créer des modes clair et foncé, mises en page compactes et confortables Nous aborderons l' animation avancée, le masquage et la vidéo. genre de choses que la plupart des concepteurs ne savent même pas que Figma peut faire Vous apprendrez à exécuter de meilleurs tests utilisateurs, prototyper plus rapidement et à créer des choses qui semblent réelles. Vous comprendrez l'accessibilité, la collaboration, développerez un transfert à l'aide de Dvmode, refactoring et Alors, êtes-vous prêt à devenir un pro de Figma ? Si vous vous inscrivez et que vous vous préparez à passer de Figma à un super héros Figma Ah. Ne t'inquiète pas. Je projette un super héros tout au long du cours. J'ai remarqué que pendant que j'enregistrais, j'ai bien confectionné le t-shirt, et je me suis dit que je n'arrête pas de me faire froisser, alors je le fais tout au long du cours, Pour essayer de le déchiffrer et de projeter des super-héros . C'est tellement naturel. Poursuivez le cours. 2. Commencer - Fig Adv: D'accord. Tu y es arrivée. Bienvenue. Félicitations. Tu as fait le bon choix. La première chose que vous allez faire est télécharger les fichiers d'exercices de ce cours. OK, il y aura un lien sur cette page pour les télécharger. À l'intérieur, il y aura une feuille de raccourcis. Je les passerai en revue pendant le cours, mais il y aura également une feuille sur laquelle vous pourrez imprimer et encercler celles que vous aimez vraiment et ajouter celles que j'ai manquées. Collez-le à côté de votre ordinateur. Tout a l'air génial. Je parle vite. Je pense que je parle vite. Donc tu peux me ralentir. Il y a un rouage dans le coin où vous pouvez cliquer dessus et régler la vitesse à laquelle je parle Tu peux soit me mettre en mode super slow drunk, soit en mode hibunk, soit me laisser comme ça, à toi de décider Figma est nouvelle et change tout le temps. Ils adorent déplacer des objets. Donc, si vous suivez le cours et que vous vous dites, H, cela ne s'appelle pas de la même manière, mais il a la même apparence. C'est probablement pareil. Ou s'il est déplacé, vous devrez peut-être regarder autour de vous pour voir où il a légèrement disparu ou s'il a été renommé. Regardez leurs commentaires, j'en ai peut-être laissé un. Si c'est facile, si c'est un grand changement, j'irai réenregistrer le cours. Mais il y a des changements tout le temps. Figman aime bien nous faire ça. Vous suivez ce cours avec la version gratuite ? Tu peux le faire pendant un moment. Vous pouvez suivre une grande partie du cours sur la version gratuite. Cela ne pose aucun problème. Nous examinerons certaines pièces payantes. Donc, si vous ne l'avez pas, vous pouvez simplement suivre, vous pourriez finir par décider, j'ai besoin de la version payante. Mais oui, ce n'est pas une perte de temps avec la version gratuite de Figma Je vais faire le mien sur un Mac avec le logiciel téléchargé. Vous pouvez le faire sur PC dans le navigateur. Tout a la même apparence et fonctionne de la même manière. Certains d'entre vous suivront le cours Figma Essentials, tandis que d'autres passeront directement à ce cours parce que vous y êtes prêts Les personnes qui suivent l'ancien cours, tandis que l'ancien cours, le premier cours, le cours Essentials se recoupent légèrement. C'est lorsque nous arrivons à des choses plus délicates que nous allons aller plus loin, que les choses se mettent en ordre Nous allons juste expliquer rapidement ce que fait un all out et comment il fonctionne, ce que vous avez déjà fait, d'accord ? Juste un petit récapitulatif avant de partir et d'aller encore plus loin Nous nous sommes donc demandé à quelques reprises : «   Avons-nous fait ça ? » fait un petit peu, mais nous allons aller plus loin dans ce cours, et je veux que tout le monde commence du bon pied. Tu vois ce que je veux dire ? Dans ce cours, il y a deux niveaux 1 et 2, comme l'allocation automatique Il y a un niveau un, un niveau deux. La raison pour laquelle je le fais pour les séparer afin que nous ne nous mettions pas en colère et que nous ne passions pas tout le temps, bien sûr , à examiner cette fonction, ces composants, cette variable ou quelque chose comme ça OK ? J'ai donc en quelque sorte fait un niveau 1 où nous utiliserons probablement beaucoup de choses de type. Nous allons faire une pause, faire d'autres choses pour ne pas devenir fous, mais très bien aussi, nous heurterons à des raisons pour lesquelles, oh, ce serait bien si nous pouvions faire plus avec ce que nous avons appris plus tôt Surprise, niveau 2. Où nous le parcourons et où nous le développons en quelque sorte . Vous verrez donc quelques niveaux 1 et 2 dans ce cours. C'est pour ça qu'ils sont là. Séparez-les, afin de ne pas nous lasser avec la même chose, mais aussi pour avoir la chance de travailler avec elle et de trouver la raison pour laquelle nous cherchons à aller encore plus loin avec ces fonctionnalités. Enfin, tu peux me suivre à Figma, d'accord ? Il existe une communauté. Allez sur figma.com slash AP BYOL, d'accord ? Et tu n'es pas obligée, mais suis-moi là-bas. C'est là que je publierai les fichiers de fin de ce cours, d'accord ? Si vous ne faites que commencer, les fichiers terminés figureront dans le cours. Tu peux jeter un œil à ce que j'ai fait. Ce n'est pas particulièrement organisé, mais il est parfois pratique de voir les fichiers sur lesquels je travaille, et vous pouvez également y jeter un œil. D'accord. C'est ça, mes amis. Plus besoin de parler. Mettons-nous à la fabrication. Nous vous verrons dans la prochaine vidéo, n'est-ce pas ? 3. Votre demande pour le cours avancé Figma: Bonjour Avant de commencer, je vais vous donner chaque brief unique à étudier pour le cours. Nous allons tous créer une application musicale. Je vais vous en donner votre propre version pour que vous ne me copiiez pas et tout le monde soit différent. C'est donc une bonne chose pour votre portefeuille, car il est unique. Donc, si vous allez sur random project generator.com, c'est quelque chose de méchant pour créer votre ordinateur portable en équipe, et vous trouverez Figma Cliquez dessus dans le nom de votre village ou de votre ville. Je m'appelle Limerick, donc je vais dire generate Project. Et j'ai le Je ne sais même pas ce qu'est Bluegrass. Mais ce sera la mienne. Essaie de garder celui que tu as. Cela vous pousse peut-être hors de votre zone de confort ou cela montre qu' il s'agit plutôt d'un projet intellectuel où vous devez penser à l'utilisateur, d'accord ? bluegrass est quelque chose que je ne connais pas et je dois jeter un coup d'œil au genre Quel genre d'ambiance ça dégage ? Je ne sais pas En fait, je ne sais pas. Donc oui, le verre à bière Limerick, et ce qu'il a aussi ici, c'est qu' il vous donne la marque à utiliser D'accord ? Nous allons créer une petite micro-marque. Ce n'est pas un cours de stratégie de marque. Nous allons juste utiliser un chacal comme logo, d'accord ? Nous allons donc trouver des photos de chacals. Nous allons trouver une petite icône pour le logo, afin que chacun soit unique. C' est de là que tu le trouves. N'appuyez pas sur Répondre. Eh bien, c'est quoi ça ? Réessayez. D'accord ? Ne le frappez certainement pas trois fois. Il suffit de le prendre. Faites-en une capture d'écran ici car elle vous montre exactement ce que nous faisons. Cela n'a plus vraiment d' importance maintenant, prenez-le, prenez un raccourci ou téléchargez-le au format PNG. Alors ce que je vais faire, et nous allons travailler pendant le cours. La tienne va être différente mais similaire. Tu as compris. Très bien, vidéo suivante 4. Première ébauche utilisant l'IA dans Figma: Bonjour tout le monde Nous allons commencer le cours en étudiant une fonctionnalité appelée « première ébauche ». D'accord ? C'est piloté par l'IA. C'est un excellent moyen d'obtenir des modèles, de démarrer. Une fois que vous aurez acquis quelques compétences supplémentaires grâce à ce cours, il est plus utile d' aller plus loin, mais je tiens à vous le montrer maintenant, car c'est génial et c'est un excellent moyen de démarrer des projets. Vous pouvez donc voir ici que l'invite est ouverte, et je vais dire que c'est une application de base. Créez une page de paiement pour une application d'événement musical, et boum. Voilà. Elle est devenue une page de paiement. Je peux jouer avec les styles et les polices, mais c'est quelque chose généré à partir de zéro par l'IA de Figmas Passons à l' action et examinons ses avantages et ses inconvénients et comment le faire fonctionner pour vous. Nous examinerons également la fonctionnalité d'intelligence artificielle pour les interactions publicitaires. Allons-y Très bien, je suis dans un nouveau fichier de design vierge. Je suis dans le design. C'est l'onglet en bas et je vais passer aux actions Maintenant, celle-ci est une fonctionnalité payante, alors regardez si vous êtes sur la version gratuite. C'est où ? Cela s' appelle First Draft. Vous pourriez le rechercher. J'ai trouvé le mien ici sous Outils de conception. C'est. Ce qui est cool, c'est que vous pouvez lui donner quelques directives, par exemple : est-ce que je veux une application de base ou un wireframe A-t-il besoin d'images ou non, site de base ou d'un wireframe du site Nous avons déjà examiné cela, haute fidélité, basse fidélité. Je vais créer une application et je vais dire que je veux que ce soit une application de liste d'événements. Pour la musique, cliquez simplement sur Créer. Prenez du recul, regardez les robots IA faire ce petit geste. Oh, c'était rapide. J'ai pensé qu' il faudrait peut-être même sauter rapidement. Ah, Coldplay. Taylor Swift, je m'en vais. C'est Sharon Billy Eilish. Ce n'est pas ma musique. Mais ce que vous pouvez voir ici, c'est qu'elle a en fait créé cette application unique pour vous. Il génère ces images. Ces images sont comme si c'était un moteur d' intelligence artificielle qui les créait. C'est pourquoi ils peuvent parfois prendre un peu de temps, et ils sont un peu scintillants Mais oh mon Dieu, c'est devenu une application. Regardez-le. Allons-y Nous allons le prototyper. Allons-y Ouaip. D'accord. Et jetons-y un coup d'œil. Ça me plaît. Qu'est-ce qui fonctionne ? Ce qui n'est pas un peu simulé. Ça ne fait pas grand-chose. Il y a beaucoup d'interactivité. Vous pouvez, dans le cours Essentials, aller vous. En fait, examinons autre chose. Regardons les couleurs. C'est quoi ça ? C'est la première méthode de couleur. Vous pouvez voir que vous pouvez aller jusqu'au bout et dire  : « Oh, j'aime bien ceux-ci ». C'est une excellente façon de commencer. Et une fois que vous aurez terminé ce cours, le cours avancé, vous serez en mesure d'ajouter toute l'interactivité et toutes les bonnes méthodes pour en tirer parti pour le design C'est comme travailler avec un modèle, sauf que le modèle doit être très personnalisé. D'accord, surtout avec des choses comme les couleurs. Des choses comme apporter des modifications aussi. Regardez, vous pouvez dire, en fait, des coins arrondis. Je veux des coins super arrondis. Pas de coins arrondis. Nous optons pour le look carré. D'accord ? L'espacement, nous voulons l'ouvrir. C'est juste très cool. Quel type de police souhaitez-vous utiliser ? D'accord ? Vous pouvez y remédier. Vous pouvez également le demander, pour dire : pouvez-vous avoir une grande boîte à héros ? Au fait, je ne sais pas si ça va marcher. D'accord ? Mais vous pouvez commencer à lui demander de faire des choses. Il serait probablement plus facile pour moi de faire moi-même beaucoup de petits changements. OK, parce qu'il en a fait une version. Ce n'est pas ce que j'avais en tête, donc ça va être la partie la plus délicate. Vous pouvez le faire immédiatement, et parfois c'est facile de le faire. Jetez donc un œil à la rubrique « actifs ». D'accord ? Il n'a aucun actif pour ce document en particulier. Il n'y a pas de bibliothèque, il n'y a pas de styles pour cela. Cela changera peut-être d'ici là, mais il reste encore beaucoup de travail à faire, mais il reste encore une bonne façon de commencer une fois que vous aurez acquis certaines compétences. Vous ne pouvez pas simplement être un concepteur d'expérience utilisateur et vous lancer, d'accord. Je n'ai rien appris sur Figma. Je vais juste utiliser l'invite. Peut-être que ce sera possible dans le futur. Je ne pense pas, mais je tiens à vous le montrer. L'autre chose que je voulais vous montrer dans le cours sur les bases était, disons, que nous voulions créer une autre page. Allons-y Euh, sélectionnons-les toutes et supprimons-les. Ici, nous allons revenir à notre message et nous allons dire d'où nous avons obtenu la première ébauche, et je vais dire la liste des événements en détail. Voyez-le ou épelez-le correctement. Allons-y. D'accord, c'est parti et c'est tout. Oh, je viens de créer une nouvelle page plutôt que d'essayer d'utiliser celle que j'ai créée pour elle. Mais vous pouvez voir ici qu'il a utilisé les mêmes polices ? Regardez Public Sands, et celui-ci n'est pas une tenue, donc ça va s'améliorer. Vous savez, j'attends avec impatience le moment où j'ai juste besoin d'une page vraiment basique, comme une page de conditions générales ou une page de paiement qui semble vraiment digne de confiance, et où l'on pourra prendre les étoiles que vous avez déjà pour les appliquer. Ce n'est probablement pas trop loin dans le futur. À l'heure actuelle, il s'agit plutôt de générer des idées puis de les corriger et de les modifier ensuite, tout est différent. Mais ce que cela peut faire, c'est que nous pouvons faire cette partie ici, passer aux actions, et nous pouvons dire que j'aimerais envisager d' ajouter des interactions. D'accord ? Entre vous et vous Ajoutez des interactions. OK, et il l'a fait, d'accord ? Il s'agit donc d'ajouter les petites interactions magiques. Donnons-lui donc un prototype maintenant. Commençons par ce type et passons à l'assiette. Et jetons-y un coup d'œil. Je ne me souviens même pas de quel bouton il s'agissait. Oh, oui, j'ai travaillé. D'accord ? Ensuite, retournez à la maison. D'accord. Ces deux petites choses peuvent donc être puissantes, d'accord ? Et ce sera mieux plus tard. Mais je voulais juste vous montrer plus tôt dans le cours le genre de nouveautés qui se produisent avec Figma, et je pourrais revenir et mettre à jour cette vidéo à l'avenir Cela ne nous enlève pas notre travail, mais cela réduit certaines des choses que nous faisions auparavant en termes de accord, je me demande à quoi ressemble un bon formulaire Vous pouvez commencer à travailler avec M dès le premier brouillon ou, comme habitude, revenir à la version du navigateur d' accueil, n'oubliez pas, monter sur le F et accéder à la page d'accueil, qui se trouve en haut. D'accord ? Et vous pouvez accéder aux modèles. Il existe de nombreux modèles. C'est un peu la façon dont je l'utilise en ce moment. Ça va s'améliorer. Mais c'est nouveau, c'est sophistiqué, et ce sera encore plus pratique lorsque vos compétences seront encore plus pratiques et que vous pourrez en quelque sorte prendre ce que cela fait et le créer, vous savez, en vous connectant à des styles, à des mises en page automatiques et à des variables. Oh, ça va être marrant. Bon, c'est tout pour la première vidéo. Qu'est-ce que tu en penses ? Joue avec. Je vous verrai dans la prochaine vidéo. 5. Effet de verre liquide dans Figma ma: Bonjour, tout le monde. Dans cette vidéo, nous allons regarder le verre liquide d' Apple. D'accord ? C'est un effet très cool, et vous pouvez voir ici qu'il fait partie de l'interface utilisateur, mais nous pouvons également le faire dans le cadre de figment. Nous allons le faire. Il se déplace et vous pouvez en quelque sorte voir à travers lui. Tout est vitreux et en bon état. Très bien, allons-y. C'est bon. Tout d'abord, ouvrez un nouveau fichier de conception, soit en utilisant le nouvel onglet, fichier de conception où vous le souhaitez. Et à partir de vos fichiers d'exercices, je veux que vous n' apportiez qu'une image. Cela peut être n'importe quoi. Cela n'a pas vraiment d'importance. J'utilise cet effet de verre liquide et j'aime les faire glisser depuis mon navigateur comme ça, juste pour redresser TofGMA Mais vous pouvez utiliser le Command Shift K, qui est un raccourci pour importer des images, ou vous pouvez descendre jusqu' au rectangle et dire « s'il s'agit d'une image vidéo ». L'autre point, juste pour clarifier les choses, c'est qu' il y a quelques modes différents en bas de la page. À moins que je ne te le dise, c'est celui du milieu. Nous allons travailler sur. Fais entrer l'image. J'ai perdu mon image. Vous entrez, et dessinons quelque chose sur le dessus. Maintenant, l'effet verre liquide ne fonctionne que sur les cadres, vous ne pouvez donc pas utiliser l' outil rectangle ici pour le dessiner. Cela doit être fait avec un cadre. Le F k, dessinons R, gros bouton au milieu ici et nous allons juste rester simples pour le moment. Allons-y et ajoutons l'effet. Sous Effex, je l'ai sélectionné. C'est un cadre. Je peux appuyer sur Plus, puis Drop Shadow, et nous pouvons passer à celui-ci. Verre. C'est déjà génial. Et ce que nous pouvons faire, c'est simplement le déplacer. Ah, c'est trop cool. Faisons quelques petites choses. Assurez-vous d'avoir des coins arrondis. Pour obtenir un maximum de coins arrondis, il suffit de le placer en haut , par exemple 1 000, puis il arrondira les bords. Je vais zoomer, examinons les différents effets d'ouverture du verre. Si je l'ai désélectionnée, je clique dessus et pour ouvrir les effets, je clique sur cette petite icône ici et j' ouvre cette sauvegarde La lumière, où est-ce qu'elle entre en contact avec elle ? C'est à vous de décider. Quelle est la luminosité de la lumière ? Vous pouvez le saisir ou simplement cliquer sur de ces icônes et le maintenir enfoncé ici. C'est. Je vais laisser le mien à 80 ans, et ensuite tu pourras jouer avec eux. Vous aurez une idée d'eux. Il n'y a pas de bien ou de mal. Les valeurs par défaut sont excellentes, mais vous pouvez jouer avec des éléments tels que la profondeur ou l'épaisseur du verre ? Oh, un grand verre à bulles, une petite feuille de verre fine Si vous concevez pour le système d'exploitation Apple, vous pouvez consulter les spécifications pour voir exactement ce dont il a besoin. Vous feriez probablement mieux d'aller à la maison et de consulter des modèles. Puis je fais une recherche ici et je tape du verre liquide. Apple l'appelle verre liquide et Figma l'appelle simplement effet de verre. Vous feriez probablement mieux de commencer par l'un d'entre eux, car quelqu'un d'autre est passé par le système de conception Apple. Oh, ça y est. C'est le kit, commencez par le kit. Mais pour nous, revenons à cela. Nous pouvons jouer avec la réfraction et la profondeur car nous ne sommes pas limités par les spécifications Apple L'une des choses un peu étranges est la dispersion, d'accord ? Vous pouvez le voir un peu plus quand il est au-dessus, disons, d'un texte. Tu peux voir les bords ici ? Tout est gris. Si je dois écrire sur la dispersion, ajoutez-y des couleurs. Peut-être mieux avec un peu de profondeur. Voilà. Vous pouvez commencer à voir le bleu passer et un peu de jaune par ici. De toute évidence, le givre est à quel point le bleu est bleu. Je l'aime bien. Le dernier est la lumière. Tu vois une petite ampoule ? Vous pouvez les faire glisser. Cela dépend de l'endroit où vous voulez que la lumière entre en contact. faisons-nous déjà ? Ouais. Je pense que nous l'avons fait. La seule chose qui pourrait vous surprendre, c'est que cela doit être au-dessus de tout ce qu'il essaie de disperser C'est pourquoi nous avons commencé par une image juste pour faciliter les choses pour le moment. Faisons quelque chose de difficile dans la vidéo suivante. Effet de verre Oh, c'est sympa. J'espère que ma voix s'est améliorée. C'est le matin et j'ai voix à mi-chemin de mon premier café. au long du cours, vous serez en mesure de savoir ce qui s'est passé en voyant à quel point ma voix a réellement commencé à retentir. D'accord. Vidéo suivante, Dan. 6. Travailler avec des mises en page complexes dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons créer ce petit truc en verre. Ce n'est pas vraiment ce que nous faisons ici. Ce que nous faisons ici, c'est qu'il s'agit d'un cours avancé. Mais parfois, il est très difficile de travailler avec tous les avantages avancés . Jetons un coup d'œil à ça. Si je veux déplacer ce bouton ici, vous pouvez voir qu'il y a des sorties automatiques à l'intérieur des sorties automatiques à l'intérieur des sorties automatiques. C'est très bon et structuré, mais parfois vous voulez simplement le déplacer et ensuite pourquoi êtes-vous là ? Arrête d'être si compliqué. C'est ce que nous allons faire dans cette vidéo. Je vais vous montrer comment désactiver ou utiliser certaines mises en page compliquées Nous suivons le cours avancé, mais parfois nous ne sommes pas encore assez avancés. Nous nous rapprochons de l'avance. Il suffit de désactiver certains éléments ou au moins de les utiliser. Alors allons-y et montrons comment travailler avec des mises en page complexes. Allons-y. R, Tout d'abord, vous devez ouvrir un fichier. Il y a plusieurs façons d'y accéder. J'en ai mis une copie dans les fichiers d'exercices, afin que vous puissiez double-cliquer sur ce fichier à points et l'ouvrir. Suivez les étapes pour savoir où vous souhaitez le placer, mettez-le probablement dans vos brouillons, cliquez sur Importer Ensuite, attendez une seconde, puis il vous dira : voulez-vous le déplacer vers un dossier publié ? Vous n'êtes pas obligé de vous lancer dans un projet, vous pouvez simplement cliquer sur Terminé et il sera prêt à être utilisé. L'autre façon de procéder, c'est là maintenant. Je peux double-cliquer dessus et commencer à travailler. L'autre façon de le faire est que si vous allez sur tofgma.com slash sur BYOL, vous y trouverez également les fichiers Quelle que soit la manière dont vous voulez le faire, vous trouverez Figma Advanced eFetoo Il y aura un tas d'autres fichiers au fur et à mesure que ce cours se développera. Vous pouvez les ouvrir et dire « ouvrez dans Figma, il vous plaît », et ils s'ouvriront dans le navigateur Peu importe comment vous arrivez à ce fichier, je vais l'ouvrir sur mon bureau parce que je suis de la vieille école. Cela devrait figurer dans mes brouillons, là où nous allons. Et ça y est. D'accord. Donne-moi celui-ci car il est très compliqué. Ça l'est et ça ne l'est pas. OK ? Cela a été créé plus tôt dans le cours lorsque j'utilisais le premier brouillon de fonctionnalité dans Figma Tout le monde n'y a pas accès car cela fait partie de l'offre payante. Mais j'ai le résultat final sur lequel nous pouvons tous travailler. Ce qui est cool, c'est qu'il s'agit uniquement mises en page automatiques et qu'il est très bien structuré Alors je prends celui-ci et je dis, je veux faire des achats ci-dessous, me faire livrer de la nourriture. Je peux juste le faire glisser en dessous et regarder, ils changent parce qu' ils sont en mise en page automatique Annuler. Passons à la couche shopping et disons, juste celle du haut, celle du bas, la suivante. Je peux juste cliquer sur celui du haut, appuyer sur la flèche vers le bas. Et voyez-vous qu'il le déplace là-dedans ? Tout est donc très bien structuré. Mais parfois, vous entrez et vous voulez, oh, plus de votes automatiques Mou. Plus de retraits. Plus de mises en page automatiques. Il y a tellement de sorties automatiques, et là où cela devient difficile, c'est même si vous êtes avancé, et vous vous dites : « OK, je veux juste déplacer ce bouton ». Comme je l'ai vu au début, je vais le déplacer ici. Ça va entrer là-dedans. C'est bon. Maintenant, cela fait partie de cette sortie automatique. Ça ne l'est pas. Je veux juste dire « Ah, c'est partout ». OK ? Cela peut être difficile à la fois de travailler avec cette fonctionnalité, première ébauche ou simplement des fichiers d'autres personnes ou de dire que vous venez de rejoindre une grande entreprise, qu'elle possède un gros système de conception, et que vous vous dites « oh, mec, c'est vraiment difficile ». J'ai juste besoin de faire quelque chose de simple. Arrête d'être si malin. Donc, ce que vous pouvez faire, l'une des bonnes choses, c'est de sélectionner le cadre parent, de cliquer dessus avec le bouton droit de la souris et de dire, où se trouve-t-il ? Sorties automatiques. Oh, plus d'options de sortie automatique. Ils continuent de le déplacer et de le renommer. Jetez-y un coup d'œil. Il sera caché quelque part ici. Nous pourrions dire supprimer l'autolot, cela ne fonctionnera que pour cette seule image Nous voulons vous dire de vous débarrasser de toutes les mises en page automatiques qui s'y trouvent et vous constaterez qu'il ne s'agit que de vieux en page automatiques qui s'y trouvent et vous constaterez qu'il ne s'agit que cadres . Maintenant, les choses sont juste un peu plus faciles. L'une des autres fonctionnalités pratiques du travail avec des sorties complexes est qu'il y a beaucoup de couches mais toutes sont là, ce qui est une bonne chose. Parfois, ce bouton est là. Je veux juste y aller . Fais-le, clique. Encore une fois, cliquez dessus. Cliquez dessus, double-cliquez. Je trouve enfin ce truc appelé Grand bouton, il contient du texte. Génial. Je veux le déplacer. Nous allons le fabriquer en verre parce que je vais vous montrer plus par exemple, l' effet que nous avons fait plus tôt. Mais je veux que ce soit au-dessus de tout. Si je commence à le faire glisser, l' un des défauts de Figma et l'une des complications liées au traitement de fichiers complexes est qu'il sera dans ce conteneur, qui fait partie du paiement, ou que vous le mettez ici et qu'il fait désormais partie de cette mise en Il souhaite s'imbriquer automatiquement dans ces cadres ou sortir automatiquement , ce qui est cool la plupart du temps. Mais disons que parfois vous voulez juste que ça aille où vous voulez. Tu fais des choses comme ça. Je vais revenir à l'endroit où c'était, pour que tu sois comme moi. OK, j'ai trouvé le bouton. Il est là tout en bas . Je vais le traîner dehors. Je vais dire que vous sortez et que vous vous placez peut-être entre la barre inférieure et le contenu principal pour le faire lever et sortir. Alors il est sorti, d'accord ? Il est donc au top de tout. Mais dès que je commence à le traîner, il se replonge dans quelque chose Il est donc au-dessus de tout maintenant. Je peux tout fermer juste pour que tout soit un peu plus propre. J'ai donc tout fermé. Mes barres inférieures sont là. Je n'en ai pas vraiment besoin pour le moment. Et voici mon gros bouton principal. Et encore une fois, souvenez-vous que si je le traîne , il entre dans quelque chose. Ce que je peux faire, c'est si je clique sur lui, d'accord ? Avant de commencer à faire glisser le pointeur, j'ai cliqué avec ma souris vers le bas, maintenez la barre d'espace enfoncée Ensuite, vous pouvez simplement le traîner où vous voulez. Il ne manquera pas. Je ne peux pas vraiment pointer du doigt les couches là-bas, mais il ne veut pas quitter les couches, et je peux le mettre où je veux. Je peux dire que tu y vas maintenant. Vous voyez, il n'a sauté dans aucune autre couche. Je trouve que ces deux éléments sont les plus importants lorsqu' il s'agit de travailler avec des fichiers complexes appartenant à d'autres personnes ou d'utiliser certains fichiers générés automatiquement. Les modèles consistent simplement à accéder aux mises en page automatiques, à les supprimer, et lorsque vous commencez à faire glisser des objets, cliquez sur Maintenir, maintenez l'espace B pour les déplacer cliquez sur Maintenir, maintenez l'espace B Alors il ne sautera pas de couches. Cool. C'est ça. Maintenant, ce que je veux faire, c'est faire ce que je vous ai montré au début, où nous avions le bouton en verre et il se déplaçait. Alors faisons-le ensemble. y a deux choses que je dois faire, c'est que mes boutons restent en haut. Ce que je pourrais faire, c'est simplement verrouiller ces couches pour ne pas avoir à maintenir la barre d'espace. Je peux juste le traîner. Il n'y a nulle part où cela ne peut mener. Je dois juste en avoir un aperçu maintenant. Je vais donc cliquer sur l'application. Je vais dire, ouvrons l'aperçu, donc c' est Shift Space, et il devrait y rester ouvert, d'accord ? Vous verrez si je fais défiler la page vers le haut ou vers le bas, cela fonctionne. Si le vôtre ne fonctionne pas comme ça, vous pouvez cliquer sur l' extérieur, passer au prototype. En fait, cliquons sur l'arrière-plan, et je vais dire, assurez-vous que rien n'est sélectionné. Pour les paramètres du prototype, je vais utiliser celui-ci ici, l'iPhone 16, et c'est très bien. Tu peux utiliser celui que tu veux. C'est à nouveau terminé mon aperçu et cela fonctionne toujours. Si cela ne fonctionne pas, vous devez parfois entrer ici et dire « comportement de défilement ». Je veux faire défiler verticalement pour qu'il commence réellement à défiler Mais encore une fois, tout va bien. Ce que je veux faire, c'est faire en sorte que ça aille jusqu'au bas de l'échelle. Comment puis-je m'y prendre ? Parce que je l'ai sélectionné je clique sur ce bouton ici et je dis, en fait, que je veux que vous soyez aligné sur le bas de celui-ci. Pour le moment, c'est limité au sommet. Limité vers le haut, ce qui fonctionnera probablement. Je dois dire que j'en suis au prototype. Ce que je peux dire, c'est que je veux que vous soyez positionné pour faire défiler le parent. Non, je veux que tu restes en place. Je peux le prototyper. Maintenant, quand je fais défiler la page, pouvez-vous voir les restes en place ? Alors rendons-les tous vitreux. Cliquons sur lui. Passons au design. Passons à l'apposition. Maintenant, souvenez-vous que cela doit être un cadre pour que cela fonctionne. Je ne peux pas être un rectangle. Je vais chercher une ombre à gouttes, je vais prendre un verre. Oh, je l'aime bien. Je vais augmenter la profondeur. Le gel est à peu près parfait. Tout semble bon par défaut. Faites cependant une réfraction glissante vers le haut et vers le bas. Regarde ça. C'est cool. C'est bon. Maintenant, allons-y, prévisualisons-les à nouveau et faisons-les défiler haut en bas et il fait le truc cool et vitreux, mais il reste là où il devrait être Maintenant, comment puis-je le faire s'aligner en bas ? Fermons ça. Allons-y. J'ai besoin de savoir où se trouve le fond. Si je clique dessus et que je passe au prototype, je peux voir que l'iPhone 16 est, c'est quoi ? 393 par 852. Je peux cliquer sur vous et dire qu' en fait, selon le design, la taille de ce cadre devrait être 393 x 852, 92 C'était il y a à peine une seconde. Je ne m'en souviens pas. Nous allons deviner 852. Allez, Brain. Tu peux le voir ? C'est le contenu du clip. Vous pouvez l'activer ou le désactiver. À moins que je ne sache où se trouve le bas maintenant, donc je peux dire que vous allez être ici. Je pourrais maintenir la touche Maj enfoncée pour ne pas passer d'un cadre à l'autre. Mais n'oubliez pas que je verrouille ces couches, donc ce n'est pas un gros problème. Maintenant, il est limité au sommet, selon cette ligne en pointillés. Je peux dire que vous êtes limité au bas parce que nous avons un bas maintenant auquel il peut se limiter, cela n'a pas vraiment d' Shift, barre d'espace et regardez-nous faire effets vitreux sympas sur des designs vraiment compliqués OK ? Le parent, cliquez dessus avec le bouton droit de la souris, accédez à d'autres options de mise en page et supprimez toutes les mises en page automatiques. Lorsque vous vous déplacez, maintenez la touche Shift enfoncée pour votre dragon. Il ne veut pas se plonger dans les différents cadres et mises en page automatiques pour ajouter un joli Vous pouvez voir que le mien a une teinte rouge, qui vient de là, mon rembourrage, qui a été refusé, vous pourriez le redevenir blanc pour obtenir un effet vitreux plus traditionnel Peut-être un peu de bleu. C'est bon. J'espère que cela a été utile. Nous avons abordé certaines choses que nous avons apprises dans le cours Essentials, comme les contraintes, la maîtrise du prototypage et la garantie de pouvoir intégrer notre petit prototype un iPhone, qui a toujours l'air cool R Je vous verrai dans la prochaine vidéo. 7. Texture, bruit et ordre des effets: Bonjour, tout le monde. Regardons quelques effets intéressants. La première est que ce bruit que nous avons appliqué à l'image d'arrière-plan lui donne un aspect old school. L'autre, c'est cette texture qui nous permet obtenir cet effet de verre vraiment cool. Comme si nous regardions par la fenêtre des toilettes du camping-car Regarde comme ça a l'air cool. Oh, génial. Passons à la tâche et découvrons la texture, le bruit et certains des effets l'ordre des couches sur ces effets. Allons-y. Pour commencer, vous pouvez simplement avoir n'importe quelle image. Nous allons également utiliser l'effet de verre pour cet effet de texture et de bruit. Mais si vous voulez suivre à la lettre, il y a un effet DotFig dans vos fichiers d'exercices Vous pouvez l'ouvrir dans Figma, ou vous pouvez me trouver membre sur figma.com slash at BYOL, et vous pouvez ouvrir ce fichier et en ouvrir votre propre version OK. J'ai donc ce bouton, d'accord ? On lui a appliqué l'effet de verre. OK ? C'est un effet, et j'ai ajouté du verre. les autres nouveaux effets, si je clique sur Plus, vous pouvez Pour les autres nouveaux effets, si je clique sur Plus, vous pouvez appliquer plusieurs effets à un objet. OK ? Et je peux dire que je ne veux pas laisser tomber Shadow, ce qui est cool, d'accord ? J'aime bien l'ombre portée, mais je vais passer à celle qui parle de texture, d'accord ? Et vous pouvez en quelque sorte voir, zoomons un peu. Qu'est-ce qui lui arrive ? Allons-y tout de suite. OK ? La texture est un peu comme du verre dépoli, d'accord ? Et c'est ce qu'il fait. OK, on arrive à ce genre de fossette, quel que soit le nom que tu lui donnes OK, vous pouvez jouer à ces deux réglages. Un peu des deux. La seule chose qui semble un peu étrange, c'est qu' il y a un mélange entre, si j'ouvre à nouveau une texture, un mélange de découpage sur la forme pour qu'elle ne sorte pas de celle-ci , de retour sur le verre , de jouer un mélange de découpage sur la forme pour qu'elle ne sorte pas de celle-ci , de retour sur le verre , de jouer avec la source lumineuse et de la tourner de haut en bas Cela dépend de chaque instance. Il n'y a pas de numéro spécial. Mais c'est très cool. Tout ce que vous pouvez faire, c'est d'y jeter un œil. Effex, ajoutons-en un troisième. Regardons le texte, désolé, bruit. Du bruit, vous pouvez le voir, ajoutez du bruit. Dans ce cas, c'est intéressant. Je veux montrer ici parce que le bruit est intéressant. Vous pouvez jouer avec un simple duo de couleurs monochromes. Il y en a deux, et le multicolore va fonctionner avec toutes sortes de choses que vous pouvez voir ici, le bruit est un tas de couleurs différentes Cela donne donc un effet vert old school. La raison pour laquelle je veux vous le montrer c'est que je vais augmenter la taille du bruit, juste pour que vous puissiez le voir Vous pouvez jouer avec certains effets, vous pouvez jouer avec l'ordre. Pour le moment, il produit du bruit puis texture, vous pouvez dire qu'en faisant glisser cette étrange petite zone ici avec quelques mains, vous pouvez la voir et la faire glisser vers le haut et au-dessus comme des couches vous pouvez la voir et la faire glisser vers le haut et au-dessus comme Cela va d' abord faire la texture, puis le bruit. Vous constaterez peut-être que vous ne pouvez pas obtenir l'effet souhaité. Tu essaies de copier celui de quelqu'un d'autre. C'est parce que cet ordre existe de différentes manières. Le verre, dans ce cas, ne semble pas faire de différence sous sa forme. Mais certains le font. Le bruit est probablement plus agréable pour quelque chose comme cette image rétro ici Je peux voir, mon ami, que vous avez un effet, et ce sera le bruit. Je vais zoomer un peu et vous pouvez commencer à voir que cela donne une ambiance rétro scolaire Éteindre, allumer, éteindre, allumer, vous avez compris. L'une des choses à propos de ce réglage où nous avons activé la texture, que je vais désactiver le bruit. Je vais le supprimer en appuyant sur le signe moins. J'aime bien la texture. Je n'aime pas trop le bruit, mais disons que c'est ce que je fais. Si je le veux pour le moment, c'est un cadre, disons que je veux y mettre du texte. Je vais prendre mon T pour l'outil de saisie, cliquer à l'intérieur et je vais dire « réservez maintenant », « réservez ». OK. Alors, que se passe-t-il ? Vous le faites parce que le parent a l'étui de texture, mais malheureusement, l' effet s'y applique également. Si je veux le faire comme ça, je ne peux pas faire de voitures de luxe. Le texte doit être dedans, il me suffit de le faire ici à l'extérieur. Réservez maintenant pour retourner à l'outil de déménagement et placez-le sur le dessus, pas à l'intérieur. OK, une chose que je n'ai pas remarquée, c'est que l'image était un cadre et maintenant les boutons il contient et parce que j'ai appliqué l'image pour avoir un effet dessus, elle s'applique à tout ce qu'elle contient. Voyez-vous que mon texte a même un effet de bruit. Encore une fois, si je ne le voulais pas, il faudrait que je prenne ces deux gars et que je m'en aille, tu t'en vas de là et tu es au top. Et j'ai choisi une autre police. Voilà. C'est l'effet de texture et de bruit. Vous devez juste savoir, en particulier tout ce qui se trouve dans une figma, que vous pouvez souvent modifier l'ordre des couches de ces éléments Vous pouvez faire deux remplissages et ensuite jouer avec Let's Go celui-ci. Je peux régler ça tout de suite. Si c'est en haut, c'est très différent si c'est en dessous. Ce n'est pas si différent, n' est-ce pas ? Augmentons ça. Qu'il s'agisse des blancs en haut ou des blancs en dessous, c' est très différent. Ils l'ont tous et il n'est pas certain que vous puissiez les déplacer. Voilà. Annuler, annuler, annuler, nous avons créé un bouton sympa. Mais maintenant, il se peut que je doive me regrouper. Cliquez avec le bouton droit sur Grouper. Yuk. Maintenant, ils se déplacent ensemble. Excellente. C'est bon, c'est ça Rendez-vous dans la prochaine vidéo. Je suis de retour parce que je voulais te montrer quelque chose. Je m'apprêtais juste à faire l'introduction de ce cours. Donc, pour cette vidéo, je le fais à la fin pour que vous puissiez voir ce que nous fabriquons. J'étais juste en train de le rendre plus beau parce que je voulais dire quelque chose à ce sujet. Et puis je me suis dit : « Oh, je l'ai amélioré ». Oh, je devrais leur montrer. OK, donc j'ai sélectionné ce truc. OK, j'ai donc sélectionné le bouton. Il y a un certain nombre de choses qui se passent ici. Il reste donc ce petit remplissage à ce sujet. Cela a commencé la vie à 100 %. Lorsque vous appliquez l'effet de verre, il le réduit automatiquement à 10 %. Je pourrais m'en débarrasser, et ça donne un effet plus vitreux, j'aime bien L'autre point est une étrange petite bordure qui semble un peu trop forte. Si j'entre et que je clique dessus, je peux voir le verre sous sa texture, son rayon. Si je le baisse ou le hausse, pouvez-vous voir ce qu' il fait ici ? D'une manière ou d'une autre, j'ai choisi ce point vraiment étrange où c'est le plus horrible. Vous pouvez le monter et il disparaît et quand il est vraiment bas, il disparaît. Pour trouver quelque chose qui vous convient, vous pouvez évidemment aussi jouer avec la taille. Mais si vous le réduisez et que vous jouez avec un rayon grand ou petit, je ne sais pas. Je me suis dit que c'était ce que je recherchais et que j'avais besoin de textes. Lâchez l'ombre. Ce n'est pas si flou. Ça ne baisse pas si loin. D'accord. C'est ça. Nous pouvons maintenant terminer la vidéo. On se voit dans le prochain ? Regarde comme c'est cool. Non. 8. Effet de flou progressif ect: Bonjour, tout le monde. Dans cette vidéo, nous allons examiner ce que l' on appelle le flou progressif C'est là que la couleur devient progressivement plus floue. Vous pouvez également le faire avec des images. C'est vraiment facile et très rapide et nous allons le faire d'abord. Mais si vous voulez rester dans le coin, nous allons aller un peu plus loin dans ce didacticiel, juste pour récapituler certaines des bonnes choses que nous avons apprises plus tôt dans le cours de base pour rattraper le retard de tout le monde Il y a des fonctionnalités payantes que nous utilisons, certaines de l'IA. Cela vaut le coup de traîner si vous êtes un peu novice en ce qui concerne Figma Nous sommes juste venus ici pour le flou progressif, nous le faisons au début, puis nous passons au suivant C'est vrai. C'est ça. Entrons. Faisons du flou progressivement. Très bien, vous remarquerez que mon interface utilisateur est sombre. Je me suis dit que je vous montrerais juste avant commencer. J'ai échangé le mien pendant la nuit. Vous devez ouvrir un fichier, accéder au FK, accéder aux préférences, et sous thème, vous pouvez passer du clair au foncé. Il fait nuit maintenant, et la lampe est vraiment très claire dans mon bureau, alors je l'éteins en quelque sorte. N'oubliez pas que le fichier est ouvert, le thème des préférences est sombre. rien n'est sélectionné, vous pouvez modifier la couleur de votre page. C'est peut-être le blanc par défaut, mais vous souhaiterez peut-être travailler sur une couleur plus foncée ici. Co. Allons chercher le FK. Cliquez une fois. Allons prendre le HiPhone 16. J'aime bien ce contraste entre le blanc et le noir. Apportons une image. Le Command Shift K est celui que j' utilise beaucoup, ou je le fais glisser. Le problème avec le fait de la faire glisser s'il s'agit d'une image en très haute résolution, c'est qu'elle est énorme Command Shift K est un très bon raccourci. Je vais apporter ce 03, et nous allons ouvrir. La raison pour laquelle je le fais de cette façon est que je peux cliquer et faire glisser le pointeur pour obtenir à peu près la taille que je souhaite. Maintenant, nous allons simplement le rendre flou progressif , puis nous allons le faire ressembler à ce qu'il était dans l'intro Tout ce que vous avez à faire, c'est un autre effet ici. Vous pouvez passer de l'ombre à la technologie en passant par le flou des couches. C'est celui dans lequel nous voulons nous cacher ici qui est progressiste. Et ce que tu peux faire, c'est même comme ça, c'est plutôt cool. Cela commence par le haut, c'est très net, et vous pouvez voir en bas ici, c'est flou Vous pouvez faire glisser ces petits points. Ainsi, de gauche à droite, vous pouvez maintenir la touche Shift enfoncée pour former des lignes droites. Donc tu peux faire des trucs sympas. Il n'est pas nécessaire que ce soit une image. Je peux utiliser F k pour l'outil de cadre, touche Maj enfoncée, c'est un carré, lui donnant une couleur de remplissage, n'importe quelle ancienne couleur de remplissage ici, tant qu'elle est verte ou verdâtre Allez, le vert, l' aqua, celui-là. Nous pouvons faire la même chose. Oh, faisons un raccourci. Faisons en sorte qu'ils soient sélectionnés. J'ai un effet. Je peux cliquer ici et ça passe en bleu. Pouvez-vous voir cette zone que nous avons utilisée plus tôt pour le faire glisser ? Vous pouvez cliquer dessus, le copier, cliquer dessus et appuyer sur Coller. Vous pouvez copier et coller des styles. Et nous allons le faire. Nous allons y aller et nous allons améliorer celui-ci un peu plus et il fait vraiment quelque chose de cool. Si vous saisissez le bout et que vous le faites glisser vers le haut, vous pouvez voir qu'il s'estompe vraiment C'est un effet très cool. Je n'ai pas l'occasion de m' en servir très souvent. Cela fonctionne dans le code. Vous, les développeurs, allez paniquer un peu à l' idée de devoir l'appliquer, mais c'est réalisable et assez facile avec le CSS. C'est du flou progressif Ce que nous allons faire maintenant, c'est le styliser comme avant. Voici un petit résumé de certaines des choses que nous avons apprises dans le cours Essentials, juste pour les personnes qui ont besoin d'un récapitulatif ou si vous sautez le cours Essentials parce que vous êtes déjà très Vous voudrez peut-être regarder le reste de cette vidéo au cas où vous auriez oublié quelque chose. Je veux le garder. Ça a l'air cool. Ça a l'air encore plus cool face au canard. J'adore ça. Ce que je veux faire, c'est créer ce carré, donc je dois le recadrer Ce que je vais faire, c'est remplir, qui est mon image. Je passe à la sélection. Voilà le remplissage. Je vais cliquer sur l'image, et je vais aller jusqu'ici, il est écrit « Remplir », «   vous n'êtes pas rempli », «  vous êtes recadré », puis je peux faire glisser ce bord ici Quelle taille est-ce que je veux qu'il soit ? Pour le moment, 16 x 116, je vais faire en sorte que le mien C'est un carré. Maintenant, ça fait traîner le bord L'avantage, c'est la récolte. Si vous faites glisser le pointeur n'importe où au milieu, vous pouvez le déplacer à l'intérieur du recadrage. Je vais donc faire glisser le mien pour qu' il soit juste au milieu. Je vais cliquer dessus en arrière-plan, et maintenant c'est un carré avec ce truc. Je pense que je veux jouer avec le calque, calque bleu progressif, et agrandir comme nous l'avons fait dans celui-ci. Vous pouvez voir que vous pouvez le démarrer n'importe où. C'est peut-être ici. Comme il s'agit d' une liste générique de genres, et non d'un véritable artiste, il se peut que je doive commencer assez loin pour donner une touche de hip hop, sans vraiment montrer l'artiste Très bien, je veux le réduire. Chaque fois que je redimensionne des images, cela fonctionne, mais chaque fois que je redimensionne des objets, j'utilise l'outil K. K sur votre clavier pour passer de l'outil de déplacement à l'outil de mise à l'échelle, juste pour redimensionner tous les effets et tout le reste. C'est juste une très bonne habitude. C'est probablement comme ça que je veux le mien. C'est un petit zoom arrière. Je voudrais ajouter FK pour cela parce que je veux un petit encadré pour le genre. Mets-le à claquer sur le dessus. Choisissez n'importe quelle couleur tant qu'elle est verte, vous pouvez taper sur votre clavier pour trouver la pipette. Prends juste ça. Oh, c'est trop bleu. Je veux que ce soit un peu plus vert. Oh, c'est ça. Je vais taper des trucs. Tapez donc deux, cliquez une fois. Je vais vraiment accélérer les choses parce que tu n' as pas à me regarder taper. Une chose que je voudrais faire une pause et vous montrer, nous n'avons fait que très peu d'excès de vitesse, c'est que j'aime beaucoup les polices, accord, qui ressemblent à des robots, j'aime bien parce qu'il existe une version condensée OK ? Condensed est vraiment pratique lorsque vous essayez d'intégrer beaucoup de caractères. Tu peux voir ? En fait, vous savez, dans cette autre police, pouvez-vous voir à quel point elle était plus blanche C'était dans une police condensée, il y en a beaucoup. Ici, vous pouvez simplement taper « pas roboto », taper « condensé » pour voir tous les différents types de polices condensées Et certains d'entre eux sont super condensés. Par exemple, si tu vois celui-ci, tu pourras en mettre beaucoup plus. Il y a condensé et compressé, le comprimé compressé est plus petit que le comprimé condensé Je ne suis pas sûre de ne pas me souvenir de la langue, mais C. Que faisons-nous ? Condensé, d'accord ? Et oui, vous pouvez insérer plus de texte dans un espace limité, en particulier sur un téléphone, à cause de ce rapport hauteur/largeur étrange. C'est plus étroit que haut, non ? Alors, annulons. J'ai donc recommencé à accélérer. Nous n'avons pas encore fait d'excès de vitesse. J'aime utiliser la même police avec des grammages différents. Roboto est donc toujours condensé. L'un d'eux est léger. L'une est en gras, en utilisant la hiérarchie des tailles. Moins important, plus important. En jouant avec le poids, d'accord, léger et audacieux. Encore une fois, vous pouvez passer si vous êtes déjà très doué ce genre de choses , je ne sais pas, en ajoutant quelques extras. En fait, continuez, car il y a vraiment les choses liées à l'IA. Autour de la hauteur de la ligne, faites-le simplement glisser vers la gauche. Pas la hauteur de la ligne. Je vais jouer avec la hauteur de la ligne, tout sélectionner et la hauteur de la ligne, je vais taper -50. Bien trop. Je vais taper. Vous pouvez donc simplement taper par-dessus . Je peux taper moins, en fait, il suffit de saisir 16. Je vais maintenir la touche Maj enfoncée et utiliser ma flèche vers le haut pour trouver quelque chose. Que faisons-nous 24 heures sur 24 ? ne tiens pas la flèche Shift maintenant, j'utilise simplement les flèches haut et bas juste pour obtenir la hauteur de la ligne là où je veux qu'elle soit. Quelque chose comme ça. Tous les conseils que nous avons donnés dans le cours Essentials, mais bon, nous allons les ajouter ici au début. OK, évadez-vous plusieurs fois pour sortir de l'outil de saisie. Je vais cliquer dessus . Ce sera à peu près là. Maintenant, ce que je veux faire, c'est créer quelques-unes, donc je vais faire un zoom arrière. Je vais le prendre assez gros ? décalage zéro de votre clavier vous permettra d'atteindre automatiquement 100 %. OK ? Maintenez donc la touche Shift O pour que tout soit affiché à l'écran. La deuxième consiste à sélectionner quelque chose et à zoomer dessus. Ainsi, le décalage deux et le décalage zéro de votre clavier passent à 100 %. J'aime bien celui-ci. La taille de la police est donc probablement assez grande. Si je veux simplement les prendre tous les deux et les agrandir, maintenez le membre de l'outil K pour l'échelle, parti et ils grossiront un peu en termes de polices. Pour le déplacer. D'accord, faisons-en quelques versions Je vais donc tout sélectionner, saisir ma touche d'option sur un Mac. Oh ko PC pour le dupliquer, faites-le glisser directement vers le bas. Je vais en avoir un, deux, trois, ça fera l'affaire, oh, quatre, cinq OK ? Pour le moment, ce que je veux faire, c'est pouvez-vous simplement cliquer sur les cases elles-mêmes ? Voyons si nous pouvons sélectionner l'une ou l'autre de ces options. OK, maintenant, c'est une fonctionnalité payante. Tout cela est souvent en C sous actions. OK ? Passons à. Notre premier chef, non. Allons-y. Réécris ça. Cliquez dessus, et je vais dire : «   Qu'est-ce que je veux que vous fassiez ? Je veux que tu tapes plus vite. Si c'est de la musique, voyons si je peux le faire sans avoir à sélectionner un ti. Oh, je peux. C'est en train de le faire. Cela m'a ôté toutes mes autres affaires. Bon sang. OK ? Ce n'était pas le cas quand je l'ai pratiqué. Je vais donc devoir construire le mien un peu différemment. Des erreurs, les gars. OK. Donc en fait, ce sera probablement toujours plus facile si je t'emmène. Mets-le là, collez le texte. Ils se trouvent dans deux zones de texte distinctes. Effectuez un zoom arrière. Pourquoi mon interligne est-il un peu plus élevé ? Un peu plus haut. C'est bon. Maintenant allons-y. Allons chercher et descendre ici. Je maintiens la touche option enfoncée sur un PC, puis je passe à la commande D. L'ai-je déjà dit ou à la commande D pour reproduire ce que nous venons de faire ? Combien j'en ai maintenant six. Maintenant, je dois sélectionner tout le texte. Je veux juste le hip hop, mais je veux que ça change le genre du mot. Lorsque cette option est sélectionnée, je veux sélectionner cette touche de maintien, et je clique dessus pour saisir le tout, non, non, non, non, je veux juste récupérer le texte qu'il contient Cliquons sur le premier. OK, ce gars ici en double-cliquant dessus. Ensuite, si vous maintenez la touche Shift enfoncée et touche Commande ou Shift et Ctrl, vous pouvez cliquer sur vous et sur vous, et sur vous et sur vous. Alors, sélectionnez-les tous. Maintenant, je peux passer à la réécriture Je peux dire que tu le réécris. Je veux que tu dises « saisie rapide ». Dramas, musique. Je suis en train de scanner, il va remplacer mon premier. Ça dit hip hop. Ça l'est, n'est-ce pas ? C'est bon. Oh, geek, fais des modifications Pour les mots uniquement. Bien trop longtemps. C'est cool, non ? C'est très bien pour le texte d'espace réservé Ça me plaît. Il va probablement falloir choisir. C'est vraiment bien aussi, parce que vous avez une idée de la durée de certaines choses Donc, vous vous dites : « Oh, c' était cool pour le hip hop, mais il faut vraiment que toutes ces polices soient plus petites, probablement 24, pour pouvoir tout intégrer. Oh, nous avons fait beaucoup de choses dans ce cours, non ? Nous sommes venus pour le flou progressif. Maintenant, tu utilises l'IA. Tu apprends toutes sortes de raccourcis sympas. Le cours avancé. C'est génial. C'est plein d'ambiances de soul beats et de groupes. C'est bon, c'est ça Je vous verrai dans la prochaine vidéo. 9. Projet de cours 01 - Listes de genres: C'est bon. C'est l'heure des premiers projets du cours. Les projets de classe sont donc répertoriés à l'intérieur des fichiers d'exercices se trouve un PDF appelé Projets de classe. Je vais ressembler à ça. Et c'est le premier. Je veux que tu crées un cadre pour téléphone portable. En gros, je veux que vous refassiez ce que nous avons fait dans le dernier tutoriel Donc ce truc. Mais spécifiquement pour votre brief. Le mien est le hip hop de Limerick. Je veux que tu te concentres là-dessus et que tu découvres quels sont les sous-genres, comme celui-ci, par exemple. Techno, vous avez peut-être qualifié le techno acid d'industriel. Ce sont tous des types de techno. Rock, il y a beaucoup de sous-catégories. Vous ne connaissez pas vraiment le genre musical avec lequel vous travaillez. Fais quelques recherches sur Google. Je parie que vous trouverez des sous-catégories qui les composent. Ce n'est pas vraiment ce qui compte ici, je veux que vous expérimentiez le flou progressif Je m'en fous de la façon dont tu le fais. Tu peux le faire exactement comme je l'ai fait. Il suffit de jouer avec. Je m'en fous de la façon dont tu le fais. Si vous avez le compte pro, je suppose que dans ce cours vous avez le compte pro. Si vous ne le faites pas, vous pouvez totalement continuer. ne vais pas m'excuser à chaque fois en disant que si vous ne l'avez pas, essayez de trouver une solution, parce que d'accord ? Si vous ne pouvez pas utiliser les fonctionnalités de l'IA en le réécrivant, c'est bon. Vous avez vu comment cela fonctionne. Vous pouvez utiliser HGBT à la place, qui est gratuit. C'est l'essentiel que tout le monde possède, mais les fonctionnalités de l'IA, et certaines d'entre elles de ce cours sont réservées aux professionnels. Mais si vous en avez, allez jouer avec eux. Essayez de réécrire ceci, c'est à ce moment-là que nous avons rédigé le texte Et je l'ai fait aussi avec les images. Vous pouvez sélectionner une de ces options et soit passer aux actions et créer une image, soit vous pouvez déjà sélectionner une image, passer au remplissage et dire «  créer une image », vous pouvez utiliser l' IA pour créer l'image. Quelque chose comme Unsplash ou pixels, vous trouverez de nombreuses images gratuites que vous pourrez utiliser pour remplir votre prototype J'étais chargé des projets de classe, c'est ce que tu dois faire. Optez pour le flou progressif, jouez avec les fonctionnalités de l'IA et les livrables Je veux que vous preniez une capture d'écran ou que vous exportiez votre image et que vous la téléchargiez dans les projets de classe. Sur un Mac, la capture d'écran correspond à la touche Command Shift 4 et vous pouvez faire glisser une boîte autour de celle-ci. Vous pouvez faire la même chose sur un Mac doté d'un écran d'impression. Je pense que c'est comme ça qu'on fait. Je sais qu'il existe un autre raccourci pour les PC. Tu sais probablement ce que c'est. Si ce n'est pas le cas, vous pouvez simplement exporter l'image. Je peux faire un choix là-dessus. Oh, j' aurais vraiment l'air bien. Oh, je n'y avais pas pensé. Si vous êtes allé faire une présentation et que c'était dans un téléphone, j'ai appris plus tôt comment l'activer. Ça aurait l'air plus cool, fais une capture d'écran. Sinon, si vous n'êtes pas sûr de l'origine d'une capture d'écran, vous pouvez cliquer sur le cadre pour l'exporter. Je souhaite exporter l'ensemble de ce cadre, faites défiler à nouveau vers le bas. Quel type de taille ? Juste en taille unique, et je vais créer un fichier PNG, je vais cliquer sur Exporter l' iPhone 16. Tu y vas. Vous pouvez utiliser ce fichier pour télécharger vers la classe les projets du projet de classe. Ouais. Parce que chacun est unique et que c'est un projet intéressant, j'adorerais que vous le partagiez sur les réseaux sociaux. Marquez-moi à la fois avec le hashtag Figma Advanced pour me permettre de regrouper et de consulter plus facilement des cours spécifiques Mais assurez-vous que sur Instagram, le groupe Facebook, Twitter, assurez-vous de me taguer sur ces identifiants ici, quel que soit votre profil habituel, votre Instagram, un LinkedIn ou un TikToker, à vous de décider, mais j'adore voir Amuse-toi bien. Il s' agit principalement de jouer avec le flou progressif Vous pourriez aller un peu plus loin et rendre choses beaucoup plus cool en termes de page de genre. Nous faisons en sorte que les choses soient légères pour ceux d'entre vous qui n' ont pas beaucoup de temps, mais si vous êtes prêt à jouer, vous pouvez rendre cette page un peu plus agréable Si vous ne savez pas comment procéder, que dois-je simplement copier ? Que dois-je faire ? Vous pouvez jeter un petit coup d'œil en ligne pour trouver de l'inspiration. Un bon terme est quelque chose comme carte d'interface utilisateur. Nous allons juste passer par l'arrière de la maison. Vous pouvez parcourir les modèles, jeter un petit coup d'œil pour que je puisse faire une liste. Mais ça n'a pas vraiment marché. Vous pouvez en quelque sorte y voir que différentes manières de jouer aux cartes sont probablement meilleures. Les cartes sont le terme générique désignant tout ce qui se trouve à l'intérieur d'une boîte, et vous pouvez commencer à voir des cartes intéressantes peut-être même des cartes caractéristiques. C'est ce que nous allons faire. Les cartes de fonctionnalités sont encore meilleures, un peu plus spécifiques, d'accord ? Et vous pouvez voir des choses comme : « Oh, je pourrais le faire avec ça, quelque chose en bas, d'accord ? C'est à vous de décider. Cela peut être simple, cela peut être complexe. J'ai hâte de voir ce que tu vas faire. Très bien, le projet de classe est terminé. Je vous verrai dans la prochaine vidéo. 10. Enregistrer les styles d'effet et nettoyer les styles inutilisés: Bonjour, tout le monde. Nous allons transformer les effets que nous avons créés dans la dernière vidéo en un style afin les réutiliser et de les modifier tous en même temps. Qu'est-ce qui va aller de l' uniforme à la perspective. En fait, le mot est progressif. Mais nous les contrôlons toutes, puis je vais vous montrer comment supprimer les bibliothèques de styles ajoutées à votre fichier, elles deviennent un peu confuses, styles que vous n'avez pas demandés. Ensuite, je vais vous montrer comment supprimer tous les styles que vous n'avez pas demandés et qui apparaissent tous dans vos bibliothèques, et vous vous demandez d'où viennent-ils ? Je vais vous montrer comment les supprimer, afin que nous n'ayons que les éléments que nous avons créés sous forme de styles. Allons-y. Très bien, dans la dernière vidéo, nous avons créé quelques styles. J'en ai fait deux. J'en ai fait des Drop Shadow aussi. Prenons ce flou progressif. Vous pouvez le voir ici. Il a été appliqué sur mes panneaux fixes. Ces quatre petits points nous permettent de créer et d'utiliser des styles. Maintenant, nous le faisons pour l'affixe. Nous pouvons le faire pour un trait et remplir tout ce qui a des petits points dessus. Je vais cliquer sur l'affixe, et je vais dire que j'aimerais ajouter un nouvel effet de démarrage C'est différent de toucher le point positif ici. Nous allons dans le vif du sujet. Head plus et nous disons, nous allons appeler celui-ci, je vais appeler celui-ci M. Je vais appeler celui-ci 101 parce que je suis obligée d'en créer un autre et un autre et je dois les différencier. Parfois, je mets le nom du client devant, juste pour savoir que c' est la version de Drop Shadow j'utilise pour apporter un ordinateur portable ou quelle que soit l'entreprise. Vous pouvez également le décrire ici. Cliquez sur Créer un style. Ce qui est cool, c'est que nous pouvons passer en revue et dire que nouveauté selon laquelle nous dessinons flou progressif des membres de FK ne fonctionne que sur le cadre R. Non, c'est autre chose. C'est l'effet du verre. OK, donc je vais faire l'apposition ici. Au lieu de sélectionner « Plus passer en revue et de tout régler maintenant, je peux simplement cliquer sur les petits points situés sous l' affixe et je peux dire « flou progressif Voilà. Terminé. Réutilisable L'autre avantage de définition des styles est que nous devons appliquer ces styles. Oh, ils sont déjà postulés. Ça, c'est du flou progressif. C'est ce qu'on appelle le flou progressif des couches. Flou des couches, progressif, non, celui-ci l'a. Oh, j'ai créé le style à partir de celui-ci. Ceux-ci n'ont pas fait de demande. Je vais donc appliquer tous ces principes. Je vais dire que je voudrais supprimer l'effet et non appliquer l'effet de couche aléatoire. Je voudrais ajouter ce que j'ai créé, le flou progressif Très bien, maintenant ils sont tous connectés. Ce que j'aimerais faire, c'est les changer toutes en même temps. Je n'ai rien sélectionné. Absolument rien Vous pouvez voir ici, tant que je suis dans le design, vous pouvez être bloqué sur Draw ou Dev. OK, assurez-vous que vous êtes sur ce modèle. Sous Design, vous verrez liste de tous les styles que vous avez utilisés. Ce qui est cool, c'est que je peux dire, regardez ça. J'ai quelques réglages ici. Je peux dire de modifier ce style. Je peux m'y attarder et dire que j'aimerais cela mette fin à ce qui va être plus évident. Passons à l'uniforme. Je suis passé à l'uniforme et ils ont tous été mis à jour. C'est un excellent moyen de contrôler un document très volumineux. Créez un style, puis vous pouvez le modifier en n' ayant rien sélectionné et en passant en revue votre style. Je voulais récapituler cela. Nous ne l'avons pas fait dans le cours de base sur les effets, mais nous l'avons fait pour plein d'autres choses. Donc, si vous passez directement au cours avancé, vous trouverez, disons, ce que c'est, c'est une couleur que j'aime bien, d'accord ? Au lieu de le taper à chaque fois, vous pouvez aller dans Styles, faire exactement la même chose en appuyant sur plus, et ce sera ma couleur principale, et je pourrai créer un style, puis je pourrai commencer à le réutiliser Lorsque je dessine un nouveau cadre, je peux simplement aller ici, appuyer sur le bouton des styles, et boum, nous avons la couleur primaire. C'est tout ce que nous faisons pour cela. La prochaine chose que je veux vous montrer, c'est que je veux vous montrer comment supprimer certaines des bibliothèques par défaut qui vous donnent des suggestions de style si vous souhaitez les nettoyer. Il se peut qu' il soit juste là par défaut. Il est peut-être là parce que vous avez ouvert le document de quelqu'un d'autre, peut-être un projet plus important, que vous souhaitez nettoyer. Ce que je vais faire, c'est cliquer sur celui-ci. Et si je clique sur l'affixe ci-dessous, je vais le faire, peu importe le style que nous choisissons. Je vais aller me rassasier. Ce que vous verrez, c'est comme si vous pouviez voir qu'il y en a plein d'autres ici ? Par exemple, d'où viennent-ils ? D'accord, vous n'avez peut-être rien, mais vous avez peut-être déjà cette liste géante. En fait, je veux juste le ranger. Vous pouvez accéder à toutes les bibliothèques, vous pouvez accéder à celles qui sont créditées dans ce fichier. Nous allons juste les ranger. Vous n'affichez que celles contenues dans ce fichier, pas toutes les bibliothèques que vous pourriez avoir dans le cadre de votre travail. Nous nous occuperons des bibliothèques plus tard, mais c'est bien de ranger les choses tôt Regarde celui-ci. Brisons le lien avec le style. Allons-y. OK, même chose ici. Ok, mes Fex Styles, il y a toutes sortes de trucs là-dedans. Je peux donc aller dans ma bibliothèque et dire, en fait, que je ne veux pas. Je vais supprimer les bibliothèques, et à partir de ceci, de ceci, revenir en arrière. Je vais supprimer celui-ci et celui-ci. Ce sont des bibliothèques d'équipe qui ont été partagées avec moi dans ce document. Nous aborderons les bibliothèques d'équipe plus tard, mais parfois vous avez simplement envie de les ranger, puis de partir. Et je n'ai plus que le flou progressif pour le moment. Sympa. Très bien, il s'agit donc d'ajouter styles d' effets et juste des styles en général. Leurs avantages signifient qu'une fois qu'ils sont appliqués, vous pouvez tout d'abord les appliquer très facilement, et une fois qu'ils sont appliqués, vous pouvez les modifier tous en même temps. Nous avons envisagé de supprimer tous les styles liés à votre document que vous n'avez pas demandés. Tout ça, c'est tout. Je vous verrai dans la prochaine vidéo. 11. Conseils et astuces en matière de flux de travail: Tout le monde. Dans cette vidéo, nous allons voir tous les trucs et astuces auxquels je peux penser. Je vais tous les intégrer dans une vidéo. Si vous êtes déjà doué pour les trucs et astuces, vous pouvez passer à autre chose. C'est une très longue vidéo. Je me sens mal Mais il existe de nombreux trucs et astuces et un avantage pour tous ceux qui attendent jusqu' au bout, je vais vous montrer ceci C'est un petit clavier que j'ai pour Figma et je vais vous montrer en quoi il est utile pour Cool Mais c'est un avantage si vous suivez tous les trucs et astuces. Soit ce sera votre vidéo la plus précieuse pour le cours, soit vous ne la quitterez peut-être pas à cause de sa longueur. Eh bien, allons-y. Bon argumentaire de vente, Dan. Mary Hands est en alerte. Heure de la vidéo. Bien, pour commencer, ouvrez n'importe quel ancien fichier. Nous allons ouvrir quelque chose d' assez compliqué pour prouver tous les meilleurs raccourcis. Dans vos fichiers d'exercices, trouverez ici un lien appelé Workflow Demo. Tu peux tout ouvrir. J'aime vraiment ce fichier. Il se trouve dans vos fichiers d'exercices. Il s'appelle Workflow 01. Quoi qu'il en soit, vous serez ici à l'intérieur de Figma. Et ici, dans les pages, passons au design. Nous allons passer à celui-ci. C'est celui que j' aime bien. Très cool. Le problème quand on commence avec le dossier de quelqu'un d'autre ou qu'on travaille pour une grande entreprise, c' est qu'il peut parfois être assez compliqué de changer quelque chose d'ancien, surtout lorsqu' il n'y a pas de style. Ce que vous pouvez faire, cependant, est l'une des plus simples, c'est sélectionner tout un tas de choses ici, au lieu de jouer avec un remplissage parce que vous avez sélectionné des éléments mélangés, évidemment vous en avez sélectionné plein de Ce que vous pouvez voir ici sous les couleurs de sélection, si vous en avez sélectionné beaucoup, il peut y avoir un petit menu déroulant comme celui-ci. Mais vous pouvez le voir ici, voici toutes les couleurs qui s'y trouvent. Il y a ma couleur principale ou ma couleur d'accent. Je ne sais pas exactement comment ils l'ont appelé. En fait, il n'a pas de nom. J'ai le nombre hexadécimal. Nous pouvons donc cliquer dessus et dire, en fait, j'aimerais que vous le soyez. Ou bleu. C'est juste un moyen très rapide de travailler avec de nombreux fichiers plutôt que de faire le redoutable changement, un indice Cliquez sur celui-ci, maintenez la touche Shift enfoncée, saisissez celui-ci. Qui a fait ça ? Cela prend trop de temps. Une autre solution très pratique est de cliquer sur cette case ici. Je fais un zoom arrière assez loin. J'adore le raccourci Shift Two. Cela zoomera sur ce que vous avez sélectionné. Si vous avez sélectionné un petit élément, alors si je maintenais la touche commande enfoncée et que je clique sur ce petit point qui saute dans le groupe Let's Control sur un PC, commandez sur un Mac. Si j'ai deux équipes, ce n'est pas vraiment utile. OK, donc Shift 1 est dû au fait qu'il fait un zoom arrière pour tout afficher Déplacez deux points vers la droite dans l' objet que vous avez sélectionné. Le décalage zéro est de 100 %. C'est vraiment une bonne idée. Décalez un, deux et zéro. Un représente tout le contenu du document, deux correspond à ce que vous avez sélectionné et zéro correspond à 100 %. Parfait. Cliquons sur. Disons que nous l'avons ici. Cliquons sur un bouton en maintenant la touche Commande sur mon Mac, contrôlons mon PC. suffit de se lancer parce qu'il y a un groupe à l'intérieur d' un groupe à l'intérieur d'un groupe, et vous risquez de mourir à cause de tous ces double-clics, Vous n'avez donc rien sélectionné. Maintenez simplement la touche Commande ou Contrôle enfoncée. Cliquez dessus. Ensuite, vous pouvez accéder à Edit, d'accord ? Et il y a un Select All avec. C'est super pratique. Vous pouvez dire, en fait, que je veux remplir tout ce qui a les mêmes propriétés de texte. OK ? Et c'est passé en revue toute la page sur laquelle nous nous trouvons. Je fais un petit zoom arrière. Qu'y a-t-il d'autre ? Il n'y a que ces gars-là. Mais cela signifie simplement que je n'ai pas besoin d'aller et de cliquer sur toutes les touches. Je peux dire qu'en fait, nous allons utiliser, je ne sais pas, Acme pour celui-ci Oh, je n'aime pas Acme. Je détruis le travail de cet homme Je pense qu'il est en cours de présentation. Il est là. JH Patel, tu as créé un modèle sympa Merci pour le partage. D'accord, d'autres astuces intéressantes Descendez et attrapons l'un de ces boutons. Je vais double-cliquer. C'est un tas de trucs. C'est plus qu'un simple texte, il est entouré d'un rembourrage qui vous permet de le modifier et de le sélectionner Il y a un tas d'autres options ici. Nous ne les aborderons pas toutes, mais imaginez que s'il y a une ombre, vous pouvez passer en revue et choisir tout ce qui a le même effet. Je vais faire les mêmes propriétés. Il a sélectionné tous les composants qui se ressemblent. La propriété est un peu plus générique. Il a la même couleur de remplissage, plus le rembourrage et le rayon d'angle Je pense que c'est tout pour l'ensemble du document. Essayez-en un de plus. Trouvons le cercle ici. Passons à la modification, à la sélection avec et au remplissage . Vous constaterez que les lots de ce document ont le même remplissage, comme nous l'avons fait auparavant en utilisant la couleur sélectionnée. Verticale. L'une des choses qu'on me demande, c'est que vous voyez comment JS a tout divisé avec ces pages ici. Revenons à l'un de nos anciens dossiers. Je vais revenir à celui que nous avons créé. Je n'ai qu'une page. Ce que nous pouvons faire, c'est diviser les pages. J'ai celui-ci. C'est mon Hi-Fi. Allons-y rapidement. D'accord, je vais donc avoir une page de composants. Ce sera le top. Je veux le séparer de mes types de documents de travail. Je vais donc ajouter une page, et il vous suffit de faire la troisième page, pour les diviser. Vous pouvez mettre les traits d'union comme JStedo. J' aime maintenir la touche Shift enfoncée et appuyer sur le bouton de soulignement, et cela ressemble plus à un séparateur de page Si vous voulez devenir encore plus chic, vous pouvez ajouter des emojis à n'importe lequel d'entre eux Disons, composants, vous voulez trouver quelque chose qui peut réellement être utilisé sur mobile ici. Barre d'espace de commande automatique, d'accord ? Et ça va apparaître. C'est un petit emoji, et tu peux double-cliquer sur n'importe lequel d'entre eux Je vais donc taper sur mobile, trouver quelque chose de faux. Est-ce un téléphone portable ? Ouais. OK, double-cliquez dessus et il s'affichera là où vous placez votre curseur. Vous double-cliquez donc. Oh, j'en ai deux. OK, sur un PC, oui, faites clignoter votre curseur à l'intérieur, puis maintenez la touche Windows enfoncée et appuyez sur l'un ou l'autre, je crois que c'est un point ou un point-virgule, l'un des Cela ne ressemble en rien à un téléphone. Tu as compris l'idée. Et pour les composants, il faut mettre des pièces de puzzle. Voilà. C'est bon. Il est utile de masquer l'interface utilisateur. Il s'agit de la commande et de la barre oblique inverse, ou du contrôle de la barre oblique inverse sur PC Il suffit de le masquer pendant que vous travaillez. Ça ne change rien. Vous pouvez toujours travailler si vous connaissez vos raccourcis. Tous ces raccourcis ont changé entre l' enregistrement de cette vidéo et l'endroit où vous la regardez. Regardez ce point d' interrogation en bas de page. Accédez aux raccourcis clavier et jetez-y un œil. Ils vous expliqueront les différents raccourcis. Ils sont bleus si vous les avez utilisés. OK ? Ils sont sombres si vous n'avez pas utilisé le raccourci, d'accord ? Voilà. Je vais désactiver mon interface utilisateur car une fois que vous l'avez désactivée, elle devient un peu délicate à utiliser, mais vous avez plus d'espace, en particulier sur un ordinateur portable. Mais c'est là que se trouve le raccourci le plus génial qui ait jamais existé. C'est ce qu'on appelle les actions rapides. OK ? Il s'agit essentiellement d'un raccourci pour accéder à ce bouton ici. OK ? Alors fermons-le. Donc, les actions rapides. Allons-y. Celui pour lequel je l'utilise le plus est assez ennuyeux. Je vais commander ou contrôler, cliquer sur le mot Je suis Jenny, en haut ici, et je vais utiliser mes actions rapides, à savoir Commande K ou Contrôle K sur un PC Je vais saisir un dossier, d'accord ? Sinon, ce menu met une éternité à trouver un étui. Mais tu peux l'utiliser pour n'importe quoi. N'importe quel menu, incluez cette barre de menu supérieure ici, je vais dire Commande K, et je vais dire pivoter de 90 degrés vers la gauche. Je ne sais pas pourquoi, mais tout y est. Le dernier, Command K, et traduisons-le également. Je ne sais pas Passons au portugais. Voilà. Et faites et c'est fait. Tout le monde n' aura peut-être pas besoin de traduire. C'est peut-être une fonctionnalité professionnelle maintenant, pensez-y. Mais en fait, c'est gratuit pour tout le monde. Qui se souvient comment réactiver l' interface utilisateur ? C'est exact. Barre oblique inverse de commande ou de contrôle. C'est là qu'il se penche en arrière. Barre oblique vers l'avant. C'est bon. La prochaine est une mise à jour relativement récente. OK, je vais commander en cliquant sur ce bouton en haut ici. C'est une composante d'un master. Je ne l' ai pas fait, donc je ne sais pas où il se trouve. Ou vous avez mentionné s'il y avait un bon raccourci, prêt ? Raccourci, basculez d' avant en arrière. Quel est le raccourci ? C'est sur un Mac. Vous maintenez tous les boutons enfoncés. Commande, contrôle des options. Tous les trois en bas à gauche et appuyez sur K. Sur un PC, c'est légèrement différent. C'est Control Alt Shift K. Vous regardez votre clavier ? C'est difficile à retenir, mais si vous ajustez beaucoup de composants comme moi, vous aimerez le raccourci et vous vous y habituerez. N'oubliez pas qu'il y aura une feuille de raccourcis dans vos fichiers d'exercices dans laquelle je mettrai tous ces raccourcis. J'adore pouvoir basculer d'avant en arrière très rapidement. Rien d'autre ? J'ai d'autres composants, celui-ci est là. Tu n'es pas celui-ci, ce sont tous les boutons plus K, basculent d'avant en arrière Une autre nouveauté est que vous pouvez désormais copier et coller des styles. Nous n'avons créé que quelques styles ici. Mais si vous avez créé un tas de documents gratuits, vous pouvez les copier, et vous pouvez en sélectionner plusieurs. Je n'en ai pas plusieurs. Fais-en plusieurs, Dan. Attends là-bas. Lâchez Shadow, pour que je puisse sélectionner deux de ces gars. Cliquez simplement sur celui du haut, maintenez la touche Maj enfoncée , saisissez celui du bas, cliquez dessus avec le bouton droit de la souris et je peux vous dire « copier les styles », passer à un autre document , ne rien sélectionner, puis appuyez simplement sur le collage normal. Commandez VN MAC Control V sur un PC. Copier et coller n'importe quel style. Sympa. C'est bon. Faisons un travail de terrain super sophistiqué. Je vais revenir au document sur lequel je travaillais. Je ne sais pas où tout se trouve. Oh, j'ai créé une nouvelle page. Nous y voilà. Examinons tous les champs. Commençons donc par un titre. Tu les as mangés ? Très bien, j'ai donc ajouté un peu de texte. Tous ces champs sont ajustables en cliquant simplement dessus et en utilisant simplement la flèche vers le haut. J'aime bien choisir des polices parce que je ne suis pas sûre de la taille que je fais ici. Je tiens juste la flèche vers le haut ou la flèche vers le bas. Cliquez sur l'un d'entre eux. Tu pourrais aussi le faire avec cet espacement entre les lettres ? Utilisez la flèche vers le haut ou la flèche vers le bas. Vous pouvez le faire pour n'importe quel champ. Ceci ici, cette position ici, disons X et Y, vers le haut et vers le bas, le déplace vers la gauche et la droite. Si vous voulez passer en plus gros morceaux, vous pouvez maintenir la touche Shift C'est le gros coup de pouce ou le gros coup de pouce, et il augmentera en multiples Pouvez-vous en voir ici huit. Cela fonctionne pour tout. Rotation. Je voulais monter, ça ne fait pas un huit, mais le quart de travail en fait un. Il suffit de ne rien maintenir enfoncé à l'aide la touche fléchée pour le déplacer d'un à l'autre. Mais si vous maintenez la touche Shift enfoncée, cela la déplacera d'une plus grande partie. Beaucoup d'entre nous utilisent la grille à huit points. Donc, lorsque nous déplaçons des objets , par exemple la position, cela entre Commençons par 100 et cliquons ici, maintenons la touche Maj enfoncée, vous pouvez voir cela monte en huit, en baisse de huit. Déplaçons-le pour que ce soit un peu plus facile pour l'éditeur. Désolé, éditeur, et cela dit, je vais tout de suite faire un zoom arrière, et nous allons passer aux préférences. Accédez à LitLef, allez dans les préférences et en bas se trouve ce que l' on appelle le montant du nudge Par défaut, il en est un. C'est juste utiliser un râteau ou huit. C'est si vous maintenez la touche Shift enfoncée. Vous pouvez le ramener à dix. C'était la valeur par défaut pendant un certain temps là-bas et dans de nombreux autres programmes. J'aime huit parce que c'est très courant espacer quatre. Mobile et Web. Il en va de même lorsque vous n' avez rien sélectionné, n'utilisez aucun des champs Vous pouvez cliquer ici et simplement utiliser votre touche Ara pour le déplacer, maintenez la touche Shift enfoncée pour passer en gros morceaux Des segments de huit pixels. Vous pouvez également faire glisser le pointeur sur tous ces champs, en particulier ceux où ils comportent une icône. Vous pouvez voir ici que vous pouvez simplement faire glisser l'icône vers la gauche et la droite au lieu d'utiliser votre clavier. Vous pouvez simplement le faire glisser d'avant en arrière. Si tu es plutôt un traîneur. Certains d'entre eux n'ont pas d'icônes. Celui-là le fait. Je n' ai pas de hauteur de couche, donc ça ne fonctionne pas vraiment. City, il suffit de le faire glisser d'avant en arrière. Ceux qui ne peuvent pas maintenir l'option KineMac enfoncée sur un PC glisseront quand même, même s'ils n'ont pas d'icône Si vous aimez faire ce genre de choses et qu' n' y a pas d'icône comme celle-ci, vous pouvez simplement maintenir l' option KineMaoky enfoncée L'une de mes choses préférées est de le retourner à l'envers. Allons chercher l'outil pour le cadre à Ike. Disons que vous dessinez quelque chose d'un côté à l'autre. Faisons le plein. D'accord. Oh, tu peux aussi les utiliser ici. Regarde ça. Je peux utiliser mon I'm on HSB. C'est à vous de décider de ce que vous voulez faire. Je préfère HSB. Donc, si je veux changer la luminosité de saturation de la teinte, passons à la luminosité. C'est vraiment brillant. C'est en haut à droite. Vous pouvez simplement utiliser la flèche vers le bas. Vous voyez que cela descend, vers le bas, moins brillant, moins brillant, moins brillant. Gagnez de plus gros morceaux si vous maintenez la touche Shift enfoncée. Au lieu d'essayer d'y aller, d'accord disons que c'est à peu près là et que vous voulez le faire descendre, vous pouvez simplement prendre celui-ci et les descendre directement au lieu de faire l'ancien drag, diff, aller tout droit, tout droit La raison pour laquelle je veux le faire également, je veux vous montrer l' autre astuce, disons que je dois la diviser en trois parties, ce qui est délicat. Mon cerveau ne fonctionne pas comme ça. Je vais trouver la dimension pour que ce soit une largeur, parfaite. Vous pouvez diviser par, ce qui correspond à une barre oblique de trois Voilà. Maintenant, j'ai trois cases séparées, divisées par trois. Voilà. Tu peux faire tous les calculs. Vous pouvez dire, en fait, que je veux que ce soit juste, disons que vous voulez le mettre. Vous devez le réduire un peu de chaque côté. Vous voulez en retirer huit de chaque côté. Donc je vais dire -16, c'est un peu plus petit maintenant. Huit pixels de chaque côté. Donnez-vous une petite marge. ne peux pas faire de rotation, me perds tout le temps à 90 degrés et 45 degrés, comme moi. Vous pouvez dire, c'est vrai, j'en veux trois, 60/4. D'accord, c'est 90, pas 45. C'est bon. Parlons de certains des symboles difficiles à trouver. Je vais les coller à l'écran ici. On les appelle des symboles intelligents, d'accord ? Ce sont ceux qui sont là en ce moment. Je vais l'ajouter à la feuille de raccourcis. Mais disons qu'il faut choisir une voie ici. Je vais le faire pivoter à nouveau à 12 degrés zéro. Je trouve que je tape ici. Vous devez les taper dans l'ordre, et elles doivent ressembler exactement à la partie supérieure. Donc, si je choisis le crochet, le C, KC inférieur et un autre crochet, cela me donnera instantanément le symbole du copyright. Vous pouvez voir comment ça va se passer, R, ça va passer et me donner la marque déposée. Ils sont pratiques. Les flèches que j'utilise le plus sont probablement celles que j'utilise le plus. C'est parfois difficile à trouver dans la police et vous pouvez voir que c'est juste un tiret supérieur ou inférieur à ce que c'est. La flèche vers le bas est bizarre, c'est VB. Voilà. C'est une flèche pointant vers le bas. La flèche vers le haut est la touche que je ne trouve jamais sur mon clavier. Veuillez patienter. Le voilà sur mon clavier. Fin des six. L'éditeur aurait pu le transmettre rapidement , mais cela a pris beaucoup de temps. Je vais donc devoir maintenir la touche Shift enfoncée, puis passer à six, puis à l'espace. Il faut le mettre un peu après, sinon ça ne marchera pas. Et le dernier est le carré. OK ? Il suffit d'y aller. Crochets, gauche et droite, espace entre la tête. Oh, on dirait qu'il doit y avoir un espace entre eux. Je n'utilise pas celui-ci, évidemment. Voilà. Donc, support carré, espace, support carré de fermeture. Voilà. Juste quelques symboles intelligents, d' accord, pour toutes les polices. Ensuite, abréviation d'un composant, sélectionnez tout cela. Je vais passer à l' option de commande K sur un Mac. Contrôlons K sur un PC. Nous avons vu cela plus tôt si je commence à le traîner, cela veut vraiment entrer dans les choses Tu es du genre, c'est cool, mais n'entre pas dans ce cadre. N'entrez pas dans ce composant. N'oubliez pas que vous cliquez dessus pour commencer à le faire glisser, puis maintenez la barre d'espace enfoncée et déplacez-la Vous verrez qu'il ne figurera pas dans le panneau des couches, qu'il ne passera pas par là, qu'il n'essaiera pas de sauter et de faire partie d'autres couches. La solution la plus simple est que Command One vous permet de revenir à votre petite option d'accueil, sauf si vous êtes sur le navigateur, puis je vais juste vous ramener au premier onglet votre navigateur que vous avez ouvert. Si vous êtes à l'intérieur, cela fonctionne dans un navigateur, sauf qu'il permet de passer simplement aux différents onglets Commande 1, 2, 3. Quels que soient les onglets ouverts dans votre navigateur Chrome, Fiery ou tout ce que vous utilisez dans l' application Figma, cela fait la même chose Regardez ces onglets ici, je peux passer à la Commande 1 pour la page d'accueil, Commande 2 pour ce document, à la Commande 3. Je peux faire deux et trois, deux et trois. Il s'agit de maintenir la touche Commande ou Contrôle enfoncée sur un PC et basculer entre les différents onglets ouverts Vous avez un onglet qui indique plutôt que vous extrayez des composants d'une bibliothèque ou fichier que vous devez extraire en permanence. Vous ne le voulez pas ici où vous voulez le transformer en onglet, vous pouvez cliquer avec le bouton droit de la souris et dire épingler cet onglet. Vous pouvez voir que là-haut devient simplement cette petite icône, qu'elle devient plus petite et qu'elle est plus difficile à fermer. Mais tu peux le fermer. Cela fonctionne également sur le navigateur. Vous pouvez épingler des onglets. C'est juste un type normal de chrome ou de safari. Tu peux les détacher. Vous pouvez également les réorganiser en cliquant dessus, en les maintenant enfoncés et en les faisant glisser Souvent, je les ouvre dans des ordres amusants. Vous voulez juste que celui d'où vous venez soit à l'avant. Même s'il n'est pas épinglé, vous pouvez simplement le faire glisser. C'est donc au début. Si vous travaillez avec les mêmes fichiers encore et qu'il est difficile de savoir où ils se trouvent à chaque fois, vous vous dites que, dans mes récents articles, disons que c'est une techno Limeric, vous pouvez l' ajouter dans la barre latérale Ce sont les favoris. Cliquez dessus et vous verrez qu'il est là, Limeric Techno Chaque fois que j'ouvre un document, vous en trouverez certains que vous utilisez tout le temps. Peu importe où vous en êtes dans votre projet non plus. Si vous êtes sur l'écran d'accueil ou si vous êtes sur le navigateur, allez maintenant dans le navigateur pour continuer à oublier, vous pouvez accéder à celui qui indique de revenir aux fichiers. Vous revenez à l'écran d'accueil au lieu de cliquer sur Écran d'accueil. Fermons-le. Peu importe où tu es. Regarde ces trois petits points. Ils sont pratiques, il suffit d'avoir tous vos fichiers récemment fermés. Au lieu d'avoir à revenir à la version récente. Je ne sais pas si c'est une solution d'épargne, mais voilà Une autre est que si vous travaillez avec très gros fichiers ou un ordinateur très ancien, vous pouvez déterminer ce qui cause son ralentissement. Vous devez être dans le document en question. C'est peut-être un peu lent et vous pouvez aller sur le F, descendre pour voir, descendre pour voir, et il y en a un appelé « utilisation de la mémoire » et il y en a un appelé « utilisation de la mémoire » qui apparaît ici. Vous pouvez voir qu'il utilise 2 % de ma mémoire, ce qui n'est pas beaucoup, donc c'est bon. Le vôtre est peut-être au maximum. Et si tel est le cas, vous pouvez cliquer sur Mémoire gérée et vous pouvez déterminer la cause réelle du problème. Le contenu de la page fait la majeure partie du travail et les composants importés d'autres endroits font une petite partie, ce qui vous donne quelques conseils. Vous pouvez également l'activer. Je dis que c'est le contenu de la page qui se porte vraiment mal. C'est jusqu'à 80 % et tout est un peu lent. Vous pouvez voir ici qu'il l'activera pour chaque couche. Pouvez-vous voir lequel a des petits points ici, aucune de mes couches ne fait rien. Vous pouvez voir ce cadre. Il a un taux de 0,2 %, et vous pouvez en quelque sorte déterminer la cause de vos problèmes Souvent, il peut s'agir de fichiers SVG, très complexes, que vous avez importés Vous venez de les obtenir sur un site gratuit, et il s'avère qu'ils sont vraiment mal conçus. Voilà. Vous pouvez voir la suggestion ici. Vous pouvez aplatir les fichiers SVG. Ou cela peut signifier que vous devez extraire certaines pages, en créer deux et créer plus d'un document. Mes machines fonctionnent bien, alors fermons ça. La dernière chose à faire avant de vous montrer le clavier c'est que vous pouvez souvent faire glisser ce panneau vers l'extérieur, surtout lorsque vous avez des couches complexes ici. Vous pouvez le faire glisser vers l'extérieur pour les voir un peu plus facilement. OK. Mais aussi, dans votre panneau Actifs, une fois que cela commencera à devenir un peu énervant, je vais examiner les actifs de ce fichier. Je n'en ai pas beaucoup, mais vous pouvez commencer à le chercher. Vous pouvez commencer à rechercher. Il y a une icône ici dont je sais comment elle s'appelle parce que je l'ai très bien nommée. Cela s'appelle Exporter et vous pouvez effectuer une recherche ici. Et c'est celui-ci ici, c'est ce type ici. Fonctionne uniquement si vous avez donné un nom à tous vos actifs. Vous remarquerez que dans celui-ci il y a des composants, il y a beaucoup de frame 64, pas bon. Quand ils deviennent gros, vous pouvez aller ici et ajuster le filtrage en disant, par exemple, laissez-moi simplement montrer les listes, juste pour qu'il soit un peu plus facile de savoir où tout se trouve. Cette recherche fonctionne également sous fichier. Vous cliquez sur Rechercher et disons que je veux les étoiles dont je sais qu'elles se trouvent ici. Ils sont tous là. Ils se trouvent partout dans mon document. Mais je peux tous les configurer maintenant, ou je peux cliquer dessus et dire, allez ici. Mais je peux commencer à cliquer sur toutes ces étoiles. Waouh, il y a beaucoup d'étoiles utilisées. Je peux tous les sélectionner, les supprimer, les supprimer. Ils sont tous là-bas. Lorsque vos couches deviennent vraiment longues, c'est facile. Ou si vous devez trouver, disons, celui-ci ici, je peux faire une recherche et je peux trouver le texte avec le Wiz, alors je ne sais même pas ce que cela signifie Arent. Vous pouvez également effectuer une recherche dans votre panneau Laos. N'oubliez pas de l' éteindre en appuyant sur la croix. Sinon, tu seras ceux-là. Le panneau des pages, d'accord, peut être agrandi ou réduit, d'accord. Par défaut, vous obtenez ce très petit emplacement, ce qui peut être un peu délicat. Parfois, vous n'avez pas envie de tous les voir non plus. Vous pouvez donc le réduire. Très bien, regardons le chouette clavier Figma. D'accord. C'est donc ça ici. OK ? C'est le travail le plus fort, d' accord, Figma Creator Micro Je pense que c'est comme ça qu' ils l'appellent. Et ce ne sont que des raccourcis super géniaux. Vous pouvez donc le voir ici, vous pouvez le programmer pour qu'il fasse n'importe quoi, d'accord ? Nous avons donc le défilement. Zoomer, d'accord ? Et vous avez des raccourcis automatiques pour la composante crédit, passez à, j'adore. D'accord, c'est un composant. Vous pouvez les programmer pour qu'ils fassent tout. Je ne les utilise pas tous, mais c'est juste pratique. D'accord, surtout quand tu utilises Figma tout le temps pour le brancher C'est aussi une belle œuvre d'art de bureau. Il est livré avec un tas de boutons différents. OK, donc tu peux en quelque sorte le faire faire ce que tu veux. En fait, vous n' avez pas tous vu mon bureau, est-ce pas ? Voilà à quoi ça ressemble. C'est vous qui êtes normalement face à moi avec cet appareil photo. OK ? Mais c'est mon bureau. Euh, oui, trois imprimantes D et tout ça. Oui, c'est le bureau reconverti ci-dessus qui était juste une petite pièce au-dessus mon garage que nous avons converti. C'est vraiment bien sorti. Très bien, dans l' ordinateur. C'est bon. Je veux vous montrer que Figma One n'est plus fabriqué. C'était un peu comme une promotion à durée limitée avec Figma J'ai raté le lancement initial. Ils se sont vendus assez rapidement. J'en ai acheté un sur Ebay parce que je suis un nerd et je voulais le numéro officiel de Figma Mais c'est en fait un clavier fabriqué cette société Wlouder point cc. Prends un chèque. Le Micro créé par Figma est peut-être disponible, épuisé maintenant. D'accord, mais ils n'ont que le micro créatif ordinaire, qui est actuellement épuisé. Mais nous reviendrons. Ce n'était pas l'autre jour. C'est donc exactement la même chose. Ce n'est tout simplement pas aux couleurs de Figma. Quoi qu'il en soit, en avez-vous besoin pour travailler chez Figma ? Non, ce sont des bijoux de bureau que je voulais vraiment. J'ai donc payé plus que ce qu'il en coûte juste pour avoir la version officielle Figma parce que j'ai peur de passer à côté d'une occasion. C'est bon. C'était long. Nous avons abordé de nombreux raccourcis intéressants. J'espère qu'ils ont été utiles. Passons à un flux de travail plus détaillé dans la vidéo suivante. Merci d' être restée dans les parages. 12. Comment utiliser les astuces copier, coller et sélectionner avancées dans Figma ?: Revenons au document sur lequel nous travaillions heure, avec nos genres différents. Et ce que je veux que tu fasses, c'est juste que tu crées un cadre avec du texte dedans. Entrez le nom de votre type d'application. OK, le mien est Limerick Techno. J'ai créé une version claire et une version foncée. contenant du texte n'ont rien Ces cadres contenant du texte n'ont rien d'extraordinaire. OK, alors fabriquons un autre iPhone 16. OK, donc je vais, dupliquons simplement celui-ci. Je vais cliquer sur le cadre. C'est Command D sur un Mac, Control D sur un PC. Pouvons-nous en obtenir un duplicata ? Ce que nous pourrions dire, c'est de faire la première partie de la sélection. Cliquons dessus et je dois dire qu'il y en a une étrange là-dedans. Étonnamment, j' en utilise beaucoup. Accédez à Modifier. Ce n'est pas très compliqué, nous évitons donc de ne pas l'utiliser. Mais si nous allons modifier et que nous sélectionnons Inverse, c' est-à-dire Command Shift A sur Mac, Control Shift A sur PC, il sélectionne simplement tout sauf cela, et vous pouvez le supprimer. Ne me demandez pas pourquoi, mais je finis par m'en servir beaucoup. Et l'autre caractéristique, probablement la plus importante, est que nous voulons en faire une version sombre, nous voulons la remplacer. Nous pourrions le récupérer, le copier, le mettre ici, le coller, l'aligner et tout supprimer. Ce qui est vraiment bien, c'est que si vous le copiez, sélectionnez et il y a une option ici de modifier et une autre qui dit de coller pour remplacer. Il existe une sélection à coller. Tu peux le coller par-dessus. L'autre est toujours en dessous. Je ne sais pas pourquoi tu en aurais besoin. Mais j'utilise celui-ci, Éditer, coller pour remplacer, qui est Command Shift R sur un Mac, Control Shift, R sur un PC. C'est vraiment pratique, et ça devient pratique. Supposons que j'utilise l'étoile partout dans mon document, que je maintienne la touche option enfoncée pendant que je fais glisser le pointeur ou que j'utilise l'ancienne touche sur un PC pour le dupliquer OK, disons, cependant, que je veux que cela le remplace, afin que je puisse le copier et que j'utilise mon raccourci de copie normal, je vais vous saisir, je vais maintenir la touche Maj enfoncée et vous attraper, et je vais vous saisir. Vous pouvez faire exactement la même chose, coller pour remplacer. Quelqu'un connait le raccourci ? Trop de raccourcis, Dan. Il s'agit du Command Shift R ou du Control Shift R sur un PC. Ou allez sur Modifier, c'est aussi là-haut. Je remplace simplement tous ceux-là. Cela peut être pratique. Collez pour remplacer. Maintenant, ça gratte un peu le fond du baril Disons que j'ai cette étoile ici, que je la copie et disons que je vais ici, cela peut être du texte, cela peut être n'importe quoi. Vous dézoomez tout de suite et vous travaillez ici, dans le no man's land. Faites-moi part de vos commentaires. Qui finit par travailler ici pour une raison ou une autre. Si je devais le coller, par défaut, il le remettrait là où il était, il y en a deux, l'un au-dessus de l' autre et vous vous dites «   A Je le voulais ici et il n'y a aucun moyen réel de le faire venir ici à part coller et le déplacer Mais ce que vous pouvez faire, c'est dire, tout en haut, l' une de ces personnes, et vous pouvez cliquer avec le bouton droit de la souris et dire, collez-la ici, s'il vous plaît. Voilà ma petite étoile. Environ 10 % d'entre vous seraient du genre à dire : « Oh, ça a l'air bien. Pour le reste d' entre vous, passons à autre chose. En fait, une dernière chose que je voulais vous montrer , c'est que nous l'avons déjà fait. Je tiens juste à souligner que j'ai beaucoup de nouveaux cadres. Je vais appuyer sur l'outil du cadre. Je vais dire, offrons-nous l'un d'entre eux. Passons au Command DDD, j'en ai plein. Si je veux que cela soit appliqué à tous, alors je peux dire, copiez, cliquez sur vous, maintenez la touche Maj enfoncée, saisissez tous les noms des cadres , puis appuyez simplement sur l'ancien collage normal. Cela le remettra en place sur le cadre en une seule fois, comme un collage multiple. Tu n'as rien de spécial à faire. Il suffit de copier et coller, mais vous avez sélectionné de nombreuses options lorsque vous collez. Génial Comment ça s'est passé ? Faites-moi part de vos commentaires. Est-ce que j'ai rendu le copier-coller sexy ? Vous avez probablement sauté dès le début, de toute façon. Merci à ceux qui ont traîné dans les parages. l'humour pour moi. Passons à la vidéo suivante. 13. Conseils et astuces pour travailler efficacement avec les cadres Figma: Juste là. Dans cette vidéo, nous allons apprendre tout le cadre, les trucs et astuces. Oui, une vidéo complète fonctionnant avec des images. Ils sont très utiles. Allons-y. D'accord, le premier n'a en fait rien à voir avec les cadres. Vous pouvez voir cette petite icône ici. Si vos cadres sont tous ouverts, qu' ils sont tous carrelés vers le bas, ils sont vraiment en désordre OK, cliquez dessus. Ils rangent tous. Et si nous voulons dire mon cadre numéro huit, il vous suffit de double-cliquer sur l'icône ici et je vais passer directement à l'image. OK ? Vous pouvez contourner ce document condition d'avoir nommé vos cadres. OK, c'est une bonne idée facile. Mais c' est encore mieux de regarder ça. Disons que je suis ici sur cette première page. Je devrais mieux nommer mes pages. Cliquez sur in in in in in sur votre clavier. Nous allons simplement passer à l'image suivante. Je vais zoomer dessus. C'est juste une façon pratique de travailler sur un document. Passez à autre chose, nous allons faire marche arrière. N pour avancer. C'est pour le mois de novembre, mon accent, puis pour le mois de novembre, pour revenir en arrière Il y en a un autre que j'utilise probablement plus. L'encre zoome. Donc, si je fais un zoom arrière et que l'encre disparaît, c'est vrai. Je suis à l'image suivante, mais je suis vraiment zoomée. OK ? Celui que je préfère, c'est la touche home and end. Tous les claviers ne l'ont pas ou vous devez parfois maintenir une touche spéciale enfoncée pour l' obtenir si vous êtes sur un ordinateur portable, mais moi, je suis sur mon gros clavier Vous pouvez probablement l' entendre retentir. La maison est en arrière et la fin c'est en avant, en avant et en arrière Exactement la même chose, sauf que le zoom avant et accueil conservent le même niveau de zoom et se déplacent simplement en fonction des différentes images C'est une bonne idée. Vous pouvez redimensionner un cadre. Supposons que je crée un cadre ici et qu'il contienne tout mon système de navigation. Je vais tous vous chercher. Je vais le mettre ici. Je n'ai pas besoin de celui-ci. Il y avait une étoile là-dedans, tu es là. C'est là-haut. Salut, ce cadre est trop grand. Ce que tu peux faire, c'est qu'il y a une petite option ici. Il y a un raccourci. Il y a toutes les touches plus R, ne l'utilisez pas assez, mais c'est un excellent moyen de simplement enrouler le cadre extérieur et placer très près objets qui se trouvent à l'intérieur du C'est bon. Le suivant, nous l'avons fait auparavant, mais dans un contexte différent. Introduisons une image dans vos fichiers d'exercices, une image appelée Image de quatre. Il s'agit d'un fichier vectoriel et nous allons l'intégrer ici. Vous voulez vous rapprocher du bord. Mais nous voulons le placer à l' arrière et nous voulons simplement l'enlever, puis il saute du cadre Tu es du genre, non, je veux juste que tu sautes du cadre. Ce que vous pouvez faire, c'est que pendant que vous le faites glisser, nous l'avons fait plus tôt, souvenez-vous de démarrer, cliquer dessus et de le maintenir enfoncé, de maintenir la barre d'espace enfoncée, et cela signifie que vous pouvez le faire glisser jusqu'ici Il est toujours sur ce cadre de l'iPhone 16. Vous pouvez le faire glisser et l'utiliser juste sur le bord empêcher de sauter dans d'autres cadres pour en faire des composants. Nous l'avons déjà fait lorsque nous simplement glisser des objets tels que l'étoile, mais c'est pratique lorsque vous essayez de placer des objets sur mais c'est pratique lorsque vous essayez de placer des objets sur le bord de ce cadre sans sauter comme ça Voilà. Je vais mettre le mien ici. Et je vais l' envoyer à l'arrière. Le raccourci pour le renvoyer au verso se trouve entre crochets. C'est à côté du PK. Je vais envoyer le mien au verso en utilisant le premier des crochets. C'est bon. Une autre fonctionnalité intéressante du cadre est de tout voir en mode plan. Il s'agit du Command Shift O ou du Control Shift O sur un PC. Il vous montrera tout décomposé en vecteurs. Cela peut être très pratique surtout avec cette étoile, souvenez-vous qu'il était juste en train de traîner, regardez si je fais un zoom arrière. Vous pouvez voir, y avait-il un gars là-bas ? Il est là ? C'est juste un peu plus facile à voir que ça. Étoile disparue, étoile là. Il était tout petit Si vous utilisez, par exemple, Illustrator ou tout autre programme de dessin vectoriel, vous l'utilisez beaucoup. Surtout lorsque vous dessinez et créez des objets avec un stylo. Je trouve cela très pratique pour les cadres, surtout lorsque les cadres sont de couleurs similaires. Vous pouvez voir les contours et vous pouvez simplement travailler dans ce mode ici. Vous pouvez peut-être faire en sorte que les choses se cassent un peu plus facilement parce que vous pouvez mieux les voir. Si vous venez d'Illustrator d'Adobe Illustrator, la commande Y fonctionne toujours. Je ne sais pas pourquoi. Si tu es habitué à ça. Le produit officiel est Command Shift O ou Control Shift O. Si certains raccourcis ont changé, ils le Ils essaient toujours de les améliorer . Ils ne s'y tiennent jamais. Vous pouvez cliquer sur le point d' interrogation, accéder aux raccourcis clavier et vous pouvez vous frayer un chemin pour voir si Dan l'a dit, où se trouve-t-il sous les plans des émissions ? Oui, c'est toujours Command Shift O sur Mac. Peut-être qu'ils sont juste différents de ce que je dis sur PC, vous les verrez listés ici. Le bleu signifie que vous les avez utilisés. Je n'ai pas utilisé les raccourcis des règles depuis que j'ai réinitialisé ce document, il est donc gradué. Ça, mes amis, ce sont tous mes cadres, trucs et astuces. Si vous en avez, j' adorerais les avoir tous dedans. Alors faites-moi savoir dans les commentaires si vous êtes du genre à ne pas l'avoir mentionné. C'est une nouvelle chouette. Pour vous, allez voir les commentaires. Il y en a peut-être de nouveaux intéressants là-dedans. C'est ça. Je vous verrai dans la prochaine vidéo. 14. Rafraîchissement automatique de la mise en page avec solutions aux problèmes: Bonjour à tous. Nous allons revoir l'audit pour déterminer pourquoi ils sont bons, comment ils fonctionnent, et les éléments expliquant pourquoi ils sont bons et comment ils fonctionnent. Vous le savez peut-être déjà, vous pouvez donc passer directement à cette vidéo. Ce que nous allons faire, c'est faire une petite révision sympa, rapide. Et puis je vais passer des heures. C'est pourquoi cette vidéo aborde depuis si longtemps tous les problèmes que les gens rencontrent, en particulier lorsque vous êtes un peu nouveau dans Figma Si vous restez dans les parages, nous ferons une démonstration rapide, puis je vous montrerai les innombrables façons mes étudiants se perdent et comment les contourner. Si vous savez ce qu'est une faille et un composant et que vous n'avez jamais vraiment eu de problèmes ou que vous savez au moins comment les réparer, passez aux nouveautés Mais pour l'instant, allons-y, mettons tout le monde sur la même longueur d'onde, commençons à créer des retouches, des composants et à les démonter. Dans. C'est bon. Pour commencer, travaillons sur ce projet antérieur, où nous avions nos genres, faisons deux choses pour mettre de l'ordre Faisons en sorte de double-cliquer sur le nom en haut et de lui donner un nom. OK ? Le mien s'appelle Limerick Techno V one OK ? Et ici, nous avons l'iPhone 16. Le seul problème que vous avez peut-être remarqué, c'est que si vous le dupliquez , sélectionnez Shift D. OK, pas shifty, annulez Je suis passé en mode Inspecteur. Sortons du mode inspection en passant à ceci. Tu pourrais le faire. Je vais laisser cela dans le cours, si je veux que ce nom soit sélectionné, et passons à la commande D pour le dupliquer. Vous remarquerez ici qu'il est écrit : « Oh, regardez, iPhone 17, nous sommes tournés vers le futur ». Non, il essaie juste d'être intelligent. Ça va être un iPhone 16 ou 17. Si je recommence, la commande D passe à 18. Débarrassons-nous de ça. C'est pratique, mais pas pour iPhone. Cela peut être pratique, mais pas pour le moment. Appelons ça des genres. Maintenant, dupliquons-le Member Command ou Control D sur un PC. Double-cliquez sur celui-ci, et appelons-le . Page d'accueil. Je connais le revers. Débarrassons-nous de tout ça. Construisons Auto Out. Je vais également changer la couleur de fond. J'étais en train de m'amuser avec nous tout à l'heure à propos d'un peu de blanc cassé. C'est bon. Faisons la version rapide d'un autolou. Apportons quelques icônes. Nous allons passer au Command Shift K pour apporter plein de choses. Je dois dire que vous allez tous entrer , cliquer sur Ouvrir, et je vais cliquer sur Coller A. Je vais les déplacer ici juste pour me donner un peu de place Je vais prendre mon outil de balance, qui est l'outil K, et je veux qu'ils aient tous une hauteur d'environ 32. Quand je dis exactement 32. Pour zoomer un peu. Je vais les faire sortir pour pouvoir tous les voir. Peu importe l'ordre ils se trouvent en ce moment, sélectionnez-les tous et dites : Shift A, vous êtes dans l'ordre. Faites un zoom arrière et lancez-le. Mettons-le ici. Allons en bas. Je vais dire, en fait, que je vais le traîner jusqu'ici. Je ne veux pas que ça prenne de l'ampleur. Je suis dans l' outil de balance, c'est pourquoi. Je vais utiliser l'outil V pour revenir à l'outil de sélection, sans le redimensionner. Je vais t'emmener là-bas, partout là-bas, et je vais faire certaines choses là où je me suis assise. Je le veux au milieu et je peux jouer avec l'écart qui les sépare. OK. Et c'est ainsi, mes amis, que l'on fait une mise en page automatique. cool, c'est qu'on va en faire un composant. Il est donc réutilisable. Vous pouvez soit cliquer sur le bouton ci-dessus, soit utiliser le raccourci, l' option de commande K sur un Mac et la commande Alt K sur un PC. C'est un composant. Je vais dupliquer toute cette page, Commande ou Contrôle D. Cette page sera M. Au lieu de ce cadre soit l'iPhone 16, je vais utiliser l'iPhone P max, le plus gros. Ce qui est cool, c'est que c'est une mise en page automatique, je peux voir Ju Doc et le déplacer vers le bas, je peux jouer avec l'espacement ou l'écart Il est très facile d'être réactif. L'autre point intéressant, c'est que je peux vous dire, mon ami, disons cette page d'accueil ici. Les utilisateurs ne se sont pas encore connectés, ils ne devraient donc pas pouvoir voir leur option de billetterie Je peux cliquer dessus et je peux le dire dans mon fichier sous mes couches. Jetons un coup d'œil à ce type et je peux dire que tu es mon ami. Lequel est-ce que je veux le billet ? Je peux éteindre le globe oculaire. Mais ici, je peux vous dire que je veux avoir les yeux rivés sur moi Oh, regardez-nous. Réactif. Je peux cliquer ici. En fait, c'est mon cas. Ce sont les principaux composants. En ce qui concerne cet élément principal, je peux dire que je veux vraiment que la recherche se fasse ici. Vous pouvez voir que vous contournez l'ordre. Qu'il s'agisse des composants, ces éléments sont liés, la loupe s'est retrouvée ici Remettez le ticket. C' est le pouvoir d'Auto Loos. J'espère que c'est un bon petit rappel sur les sorties automatiques. Nous avons fait beaucoup de choses dans le cours de base et vous êtes peut-être déjà un utilisateur intermédiaire de Figma et passez directement au cours avancé Passons à tous les problèmes et à la façon de les résoudre. Je vais le faire parce que ce que je viens de faire, j'ai inconsciemment évité beaucoup d'erreurs Mais je sais que lorsque j' enseigne aux gens, ils commettent tous les mêmes erreurs que vous. Restez dans les parages. Passons à tous les problèmes et à toutes les solutions. D'accord, donc j'ai juste annulé jusqu'à ce que je revienne avant de mettre les icônes Commençons donc et abordons tous les problèmes. Donc, lorsque j'introduis mes icônes, il y a deux manières différentes. Je pourrais utiliser le changement de commande K et les intégrer toutes, et cela les empile toutes au-dessus, surtout si je clique sur tout placer Ils sont tous là, c'est ce que j'ai fait dans la première partie de la suture et tout a fonctionné Mais si vous êtes comme moi et que vous faites une grande partie de vos fichiers d'exercices à partir d'icônes, il vous suffit de les récupérer, ajouter vos propres effets sonores et de les faire glisser dessus. Ils se présentent d'une manière différente. Vous dites : « Oui, ce n'est pas un problème, sauf lorsqu'ils sont tous sélectionnés, que vous passez au Kt pour l'échelle et que vous pouvez dire, en fait, je veux que la hauteur soit 32 ». Tu es du genre : « C'est parfait, fait ». En fait, ce n'est pas fait. Ce que vous avez fini par faire, c'est que tout le groupe est devenu 32. Tu vois ? Cette hauteur totale est de 32. Cette icône en forme de cœur en particulier n'en a que 15. Pour contourner ce problème, c'est facile. Vous avez juste sélectionné celui-ci et vous dites que vous avez 32 ans. Cela m'amène à l'autre problème. Est-ce que c'est ce que nous allons regarder ce cœur ? Ici, c'est dans un cadre, ce qui est cool. À l'intérieur, il y a un vecteur. Ce que les utilisateurs peuvent faire, c' est cliquer accidentellement sur le vecteur, et non sur le cadre parent. Tu vois qu'ils sont différents ? Le cadre autour duquel il se trouve, et ce qui s'y trouve, si je sélectionne l'objet à l'intérieur et que j'y vais, vous avez une hauteur de 32. Lo fait des trucs bizarres. Tu peux comprendre ce qui se passe ? Il y a un cadre, mais le cœur à l'intérieur a été redimensionné, mais pas le cadre, donc c'est comme le couper C'est annuler, annuler. Cela peut être un problème que les gens rencontrent accidentellement, vous pouvez le faire sur le tableau ici. Vous pouvez voir que j'ai collecté le vecteur, pas le cadre parent. C'est bon. Résolvez certains problèmes. Vous les avez peut-être déjà rencontrés Ensuite, les gens saisissent parfois des SVG comme celui-ci, et je vais juste faire une petite sélection à ce sujet Nous remarquerons que j'ai sélectionné les parties internes de tout cela. Observez les vecteurs, pas le cadre parent. Si je le fais glisser maintenant, regardez, glisser les vecteurs internes, pas ceux-ci Vous vous retrouvez avec ces cadres laissés par eux-mêmes. Le monde n'explosera pas si vous avez des vecteurs à eux seuls et que vous essayez de les redimensionner. C'est très bien. Mais c'est très courant et vous avez beaucoup plus de flexibilité si les vecteurs se trouvent à l'intérieur des cadres. juste attention lorsque vous sélectionnez, soit faites une très grande sélection, elle fera le tour de l'extérieur et vous verrez que j'ai tout sélectionné, soit vous pouvez cliquer sur les noms avec le bouton majuscule et cliquer sur les noms si vous pouvez les voir. Je peux les sélectionner toutes ou dans le volet de vos couches ici, je peux cliquer sur le shift supérieur, sur celui du bas. Cela n'a pas vraiment d'importance. Si vous rencontrez des problèmes et que vous vous dites : « C'est bizarre », c'est probablement parce que vous avez sélectionné le vecteur et non le cadre. Vous vous retrouvez avec un vecteur tout seul et vous ne savez pas où est passé son cadre ou il n'en a tout simplement pas trouvé un. Le fichier dont vous avez hérité ne l'avait pas, vous pouvez simplement l'encadrer. Vous pouvez dire « cliquer dessus avec le bouton droit de la souris » et « sélectionner un cadre ». Il doit encadrer maintenant. Excellente. C'est bon. Rentrons dedans. C'est bon. Et ce que je veux faire, c'est je pense que c'est le problème pour le moment. Il y en a d'autres à venir. Ce que je vais faire, c'est faire un tour sournois. Au lieu de les faire tous séparément, je dirais que vous vous êtes alignés les uns sur les autres. N'oubliez pas de ne pas les faire glisser les uns sur les autres. Si je le traîne, où va-t-il aller ? Il va pénétrer dans le cœur. Vous pouvez maintenir la barre d'espace. Nous l'avons appris avant qu' il ne reste plus qu'à s'asseoir au-dessus. Mais il est facile de tous les trouver, une grande sélection en plus, et vous. Maintenant, je vais dire que j'aimerais que la taille de tous ces gars soit de 32 ans. Sympa. Assurez-vous que j' utilise les dimensions des cadres, pas l'échelle. Je veux la balance ici. Hoops, 32 ans. Je vais faire semblant de l' avoir ajouté exprès, mais non, je l'ai juste foiré. Maintenant, le problème suivant est que lorsque nous convertissons cela en sortie automatique, vous vous dites : OK, cool, sélectionnez-les tous, le grand choix comme Dan l'a dit, puis vous êtes passé à Shift A. Dans la version précédente, ils s'empilaient parfaitement OK ? C'est parce que je faisais les choses en sachant comment éviter de tels problèmes. OK ? Par défaut, Figma essaie maintenant de penser à votre place, et il fait un travail terrible pour le moment Cela pourrait fonctionner. Si ça marche, c'est terminé. Si ce n'est pas le cas, et si vous avez ce genre de problème, ce qui s'est passé, c'est a fait passer ce truc en sortie automatique, d'accord ? Alors regardez, ça s'appelle Frame Ten. Appelons cette barre oblique de navigation, qu'est-ce que c'est que cette barre de navigation en bas ? OK. Et à l'intérieur, fermons-les toutes, juste pour que tout soit bien rangé Vous avez un cadre, c'est un petit hachage, un autre cadre, un petit hachage Alors vous avez trouvé ce type dans une petite cible. Ces gars ici ignorent la sortie automatique. Ce type, qui écoute, le cœur, loupe, qui écoute, et ils circulent l'un à côté de l'autre Celui-ci, un adolescent maussade, t'ignore. C'est cette petite icône ici. Vous les verrez dans de nombreux documents. D'autres personnes les fabriqueront. Cela signifie simplement qu'il se trouve toujours dans l'Autolayout, mais qu'il ne s'écoule pas comme une Pourquoi ? Motifs. Nous le ferons plus tard. Nous allons examiner ce que l' on appelle le positionnement absolu. Mais pour le moment, c'est à vous de dire que vous arrêtez de faire ça, d'accord ? Je veux que tu grandisses, que tu partes et que tu arrêtes d'être de mauvaise humeur. En ignorant la sortie automatique, désactivez-la. Écoutez, le ticket arrive maintenant. Il ne reste qu'une seule personne, l'utilisateur de l'icône. Tu ne nous ignores plus. C'est bon. Ils s'écoulent tous bien. L'autre chose qui peut arriver c'est que si vous cliquez sur le cadre, vous constaterez qu'Autolayout est différent, il essaie Tu veux dire horizontal ? La plupart du temps, il y devine. Parfois, papa, revenons à l' horizontale et faisons un zoom arrière. Je pense que ce sont les problèmes que nous allons rencontrer. Une chose que nous devons faire avant de passer à autre chose est de saisir ce cadre et de le faire glisser vers l'extérieur. Transformons les icônes qui s'y trouvent en composants. Pourquoi faisons-nous cela ? Parce que nous ne voulons pas de nombreuses copies du cœur. Nous voulons qu'un cœur soit utilisé de nombreuses fois pour que nous puissions le contrôler. Sélectionnons-les donc tous. J'aimerais que vous soyez tous des composants. Je ne veux pas en faire un seul composant. Pouvez-vous voir un composant géant ? Je voudrais qu'ils soient tous dans le menu déroulant ici, pour créer plusieurs composants. J'ai un cœur, une loupe, un ticket et un utilisateur. Mettons-les en jeu et expliquons pourquoi les composants sont si bons. Vous le savez probablement déjà. Mettons ça en bas. Faisons-le glisser ici. Faisons en sorte que l'alignement soit au centre et faisons glisser l'écart vers le haut. Vous pouvez définir l'écart comme automatique, mais il va droit au bord. Je veux faire tomber ça. Je veux le ramener à 50. En fait, créez le centre d'alignement. Si je zoome, vous pouvez jouer avec cela sur le plan de travail. Pouvez-vous voir si vous avez un écart qui n'est pas réglé sur Auto ? N'importe quel autre chiffre, tu peux le faire glisser pendant que tu es ici. Nous pouvons régler cette option sur Auto et ajouter un peu de rembourrage à gauche et à droite, juste pour que nous puissions faire. Faisons 32. Ajoutons-le au document plus grand. Allons-y pour. Faisons en sorte de les dupliquer Command ou Control D. Vous allez être le châssis du Pmax. C'est donc beau et grand. Ce qui est cool maintenant, c'est que parce que c' un autolo, nous avons configuré ce bel espacement, Shi doc Vous pouvez voir que nous l'avons agrandi pour un autre appareil, et tout fonctionne bien. OK ? La raison pour laquelle nous avons créé ces icônes, notre composant, c'est pour que nous puissions y entrer et dire « d'accord ». C'est mon principal composant. Je peux dire qu'il y a cette étrange petite icône ici, pas cette version ci-dessous. Où est-il, double-cliquez sur lui. Vous voyez le diamant, c'est l'exemple normal. Allons ici. Si nous faisons un double-clic, un double-clic, un double clic, et que nous commençons à nous amuser avec lui, donnons-lui des favoris délirants . Ce ne sont pas des favoris délirants, de toute façon. Mais comme vous avez modifié le master, le zoom arrière ou le composant principal, vous pouvez également constater que cela s'ajuste Si nous ne les avions pas convertis en plusieurs composants, cela n'aurait pas été mis à jour et nous aurions dû le mettre à jour à nouveau. Très bien, mes amis, c'était une longue vidéo, et j'espère qu'elle nous permettra à tous de comprendre les commandes, pourquoi nous les utilisons, , pourquoi nous les utilisons comment créer un composant, pourquoi nous les utilisons, et la myriade de problèmes que vous pourriez rencontrer si vous êtes, et la myriade de problèmes que vous pourriez rencontrer si vous êtes je ne sais pas, assez bon pour utiliser Figma, mais si vous vous heurtez à mais si vous vous heurtez J'espère que cela a résolu certains d'entre eux. Très bien, passons aux nouveautés dans la prochaine vidéo. 15. Suggérer la mise en page automatique, remplacer le contenu, dupliquer et renommer les calques (Ai): Un Dans cette vidéo, nous allons parler toutes les fonctionnalités d' intelligence artificielle super géniales de cyto Figma, suggérer la sortie automatique, remplacer le contenu, dupliquer, renommer et générer des images par IA C'est tellement bon. Nous allons prendre ceci, qui n'est qu'une image et quelques textes. Il n'y a rien d'extraordinaire là-dedans. Nous allons copier puis cliquer avec le bouton droit sur plus de couches, suggérer Autolou et bam, c'est Il fait toutes ces excellentes fonctionnalités de sortie automatique sans avoir à le construire vous-même Ensuite, nous allons en créer deux, les ajouter tous les deux dans une sortie automatique et ensuite, c'est comme par magie. Nous pouvons les dupliquer. Plus de magie. Nous pouvons cliquer dessus et dire, remplaçons le contenu qui s' y trouve. Utilisons simplement la valeur par défaut, remplissons-la d'un contenu réaliste. Asseyez-vous, détendez-vous. Il a tout refait et il sait ce qu'il fait De plus, nous ferons également toutes les images. C'est bon. En fait, j'ai fait tout le tutoriel dans l'intro Il y a un peu plus de détails que cela. Il y en a un peu. Alors allons-y et commençons. Je lutte contre les robots IA. Très bien, j'ai donc créé une carte ici. Il y a un cadre à l'intérieur de ce cadre, il y a juste une image, quelques textes. Ils sont tous un peu comme s'ils flottaient . Personne ne fait rien. OK, donc je dois passer à mise en page automatique parce que ce que je veux faire, c'est mettre sur un autre document , le redimensionner et faire toutes sortes de choses là où je vais, c' vrai, le rock and roll doit être vraiment très long Il tape simplement tout. Il n'y a rien de réactif là-dedans. Il me suffit de prendre le cadre parental. Si j'utilise mon levier de vitesses normal pour passer en mode Auto Out. Cela ne fonctionne pas. Défaisons. Une astuce consiste à sélectionner le parent, cadre 38, à cliquer dessus avec le bouton droit de la souris, et il y a une option et ici, il est indiqué d'autres options proposées. Celui-ci suggère ici Auto Cloud. Ça devrait être super génial, Auto out. Très modeste Cliquons sur le bouton et rien ne changera. C'est cool, non ? Rien n'a changé. Jetez-y un coup d'œil. Mon cadre est maintenant une mise en page automatique. À l'intérieur, il y a une image. Mais il y a aussi un autre cadre de mise en page automatique. Je l'ai conçu pour moi. C'est donc dans ce genre de grand cadre, et je peux décider maintenant qu'en fait, travaillons-y, l' image passe en dessous Il reflue. Ce sont toutes des mises en page automatiques imbriquées. C'est très excitant. nous pourrions décider ici Mais nous pourrions décider ici qu'est-ce que nous avons ? Il y a un cadre, 40, je veux qu'il soit en dessous du texte ou je fais glisser le texte au-dessus. Ils sont tous redistribués, annulés, annulés. Disons aussi rock 'n roll. Disons que je tape cette touche très longue et que je regarde ce qu'elle fait maintenant. Ça claque, ça a créé cette boîte. C'est tellement bon. C'est annuler. Allons encore plus loin. Au moment où c'est vraiment difficile, souvenez-vous que cela s'appelait frame 35. Il efface simplement les noms des cadres, mais vous pouvez les récupérer. Vous pouvez dire, vous tous, que je peux cliquer dessus avec le bouton droit de la souris et utiliser l'IA douce pour renommer les couches Cela peut être désactivé si vous utilisez la version gratuite, mais regardez ceci. Vous pouvez les saisir. Regarde ça. Renommez les couches. Ça va passer. Il va y réfléchir. Regardez-le, tapez. C'est le futur. Image de couverture. Oh, j'ai même changé ça. Regardez, image de couverture, informations sur la chanson. Ce n'est pas tout à fait correct. Il y a l'en-tête, le titre, la date. Ah, une description. Les informations sur les chansons ne sont pas vraiment des informations sur les chansons. C'est plutôt un genre. Ah, c'est tellement bon. Oh, ça va mieux. Allons le chercher. Faisons-en une copie. D'accord ? Je n'en ai pas fait une instance. Je devrais, mais j'ai deux cadres ici maintenant. Je vais les sélectionner tous les deux , les désactiver automatiquement. Juste le modèle normal. Jour de travail. Cela fonctionne. Ce n'est pas très compliqué. Mais voyez cela apparaître. Oh. OK, option de duplication sophistiquée. Vous pouvez voir de petites étincelles à côté. Je vais d' abord le faire glisser parce que c'est un peu serré dedans, et je vais l'agrandir. Faisons un zoom arrière, en fait. Il faut le faire glisser assez loin. Si vous le faites glisser, cela ne fait rien tant que vous n'êtes pas suffisamment éloigné pour qu'il y ait suffisamment de place pour qu'ils apparaissent tous dedans. D'accord ? Regardez ce que nous sommes en train de faire. Oh, et c'est encore mieux. Nous allons utiliser la fonctionnalité d'IA appelée « clic droit ». Ce n'est pas la fonctionnalité, mais il y en a une ici appelée Cart Remember. Allez, Brain. Remplacez le contenu. Il n'y est pas du tout. Une fois sélectionné, passez à l'ensemble du gros cadre que vous avez et passons au remplacement du contenu. Et tu vois ce petit truc prérempli ? Il est dit, rempli de contenu réaliste si vous utilisez la touche Tabulation. C'est une invite. Tu pourrais le taper. Ça n'a pas d'importance. Mais oui, essayez-le. Contenu réaliste. Il va essayer. Oh, c'est en train de le faire. C'est cool, non ? Il ne fait pas les images. Tu dois les faire individuellement. Nous les ferons dans une seconde. Mais regardez ça. Il y a les dates. Il y a différents genres. Je l'aime bien. Maintenant, nous pouvons entrer et dire, en fait, vous êtes là, je l'ai fait. On pourrait passer à plus d'IA et dire make an image, et celui-ci est un groupe indie pop Réduisons-le au moment où il sera fabriqué, car cela prend un peu de temps. Ça me plaît. Oh, regardez comme il est réactif. J'aime bien le petit changement d'IndioPo, apportez-le. Hein. C'est plus proche de moi. Je vais le prendre. Le tout avec des lunettes. Mieux. Un petit visage rond pour moi, mais ça ira Il n'y a pas de favoris. Qu'est-ce qui s'y passe Mais il a la coiffure. Très bien, nous pouvons donc nous frayer un chemin pour faire ces choses. La seule mise en garde, le seul problème que je rencontre en termes d'option de duplication, c'est allons-y Oh, je n'en ai pas conservé de version. Copiez-le hors du cadre, collez-le ici. OK, donc il est sorti. J'en suis arrivé là et nous devrions en faire une réalité, je veux transformer cela. Je veux agrandir ce cadre. En fait, je sais, je veux obtenir l'image. J'ai utilisé une taille vraiment étrange là-bas, n'est-ce pas ? C'est le rembourrage. Allez, Dan. Prenons l' avantage. Allons-y. D'accord. Ce que nous devons faire, c'est en faire un composant. N'oubliez pas Command Shift K. Non, souvenez-vous option de commande K pour le transformer en composant ou cliquez simplement sur le bouton situé là-bas. D'accord. Nous avons donc un composant principal qui nous permettra de le modifier ultérieurement et de tout contrôler. J'en fais une copie, qui est mon instance, instance de mon cadre principal. Je vais les déplacer. C'est en haut, c'est là. Je les sélectionne tous les deux et je les fais passer à R. En fait, le doublon, tu te souviens que c'était ici ? C'est parti. Pour y aller. D'accord ? Cela fonctionnera donc avec un composant principal comme vous ne le pouvez pas, mais je vais annuler cela nous devrions le mettre sur une page de composants, faire apparaître et le mettre ici. Et puis revenons à mon autre page, mon mobile Hi Fi. En fait, je l'ai fait dans le mauvais sens, et je vais arrêter, passer à mes composants. Donc, mes principaux composants sont ici. Ensuite, je vais le copier, retourner sur mon mobile Hi-Fi, le coller ici. Il s'agit donc d'une copie de ce composant principal. Vous pouvez voir que c'est un petit diamant. Ça va marcher. D'accord ? Je vais donc le faire pour ceux-là. Vous déplacez une mise en page automatique, puis elle apparaît là. Cela pourrait disparaître. Je ne sais pas pourquoi ça fait ça, mais oui, c'est très cool. Voici quelques autres choses que vous devrez peut-être faire avant le transformer en un système de duplication : revenons au composant principal Ce que vous voulez faire lorsque vous avez utilisé Suggérer la sortie automatique. Assurez-vous simplement que cela fonctionne. Cette image a très bien fonctionné. Vous voyez, c'est ce que je voulais faire. Le rembourrage des deux côtés. Quel était mon rembourrage à l'origine ? Cliquons dessus. Tu vois, j'en avais 17 d'un côté et 16 de l'autre. Juste parce que je l'ai dessiné au hasard, il est probablement préférable de le ranger maintenant avant de partir et faire un composant pour en faire des doublons J'en veux probablement 16, 16, en fait 16 en tout. Allez, Dan. J'aime les parcourir juste pour les obtenir. L'autre point, c'est que nous allons y jeter un coup d'œil. Je vais ajouter quelques résultats . Vous pouvez voir que ça ne coule pas. C'est probablement ce que je veux. Cela dépend. Si vous voulez une carte à hauteur fixe, laissez-la. Mais ce que je veux faire, c'est double-cliquer en bas de la zone de texte pour la faire passer de KC, où est-elle agit d'une taille fixe, et si je double-clique sur le bas, elle passe automatiquement à celle-ci, ou vous pouvez cliquer sur l' icône Hauteur automatique C'est une autre bonne chose à vérifier. Maintenant, je peux ajouter d'autres choses. Vas-y. Entrez pour entrer. Voilà. Une autre chose que je vérifierais probablement ici maintenant est suivante : y a-t-il assez de place pour toutes les dates ? Probablement. Qu'arrive-t-il quand je descends à un chiffre ? Cela fonctionne toujours. Ce sont les points que j'aime vérifier. Et si le client dit que tout doit être en majuscules, il convient toujours, ou que nous voulons la version complète Ça va aussi. Ici, que se passe-t-il lorsque cela devient vraiment long ? Nous l'avons déjà vérifié. C'est bon. Oh, l'autre point, c'est la réduction des effectifs. Il est centré à l'intérieur de l'en-tête, ce qui est cool, comme c'est le cas ici Ce que vous pourriez dire, c'est que la date est probablement censée être centrée quelque part. C'est où ? En fait, ce n'est pas ça, c'est l'en-tête parent. Nous pouvons dire l'en-tête, je veux qu'ils soient espacés, ce qui est cool, mais je veux qu'il soit espacé et aligné en haut Nous avons abordé des choses étranges ici. Tout est très facile jusqu'à ce que ce ne soit plus le cas. J'ai donné quelque chose qui fonctionne vraiment bien. Mais vous constaterez qu'il arrive souvent que cela ne fonctionne tout simplement pas. C'est ce que nous allons faire dans le reste de cette section Sortie automatique. Je vais vous donner un peu plus de cours intensif sur la façon de procéder à ces contraintes imbriquées incroyablement alignées et à ces sorties automatiques espacées Mais oui. C'est plutôt cool, non ? C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. En fait, une dernière chose. Mettons-le simplement sur la page. Je vais te déplacer. lequel travaillons-nous en dernier ? Je pense à celui-ci. Oui, nous. Comme toutes ces instances sont dans cette mise en page automatique, je peux aller comme vous et regarder ça. Je peux attraper les parents aussi longtemps que les parents. Ah, c'est le meilleur moment. Je peux faire l'espacement. D'accord ? Jouez avec l' espacement, comme je veux qu'il soit 32. C'est à lui de le faire. Faisons-le ici, 32 ans. Une autre petite astuce, vous pouvez simplement double-cliquer sur cet espace et le saisir. Qui, double-cliquez sur l' espace pour l'espacement. Allez, Dan. Ma souris fait des trucs bizarres. Alors allons-y, double-cliquez sur l'espace, et vous pouvez le saisir ici, donc je peux taper 32. Nous allons le faire ici. C'est à vous de décider. Mais peu importe sa taille, il y répondra. C'est tellement bon. C'est bon, on a fait le bordel. À présent , je vous verrai dans la prochaine vidéo. 16. Projet de cours 02 - Listings de groupe: D'accord, c'est l'heure du projet de classe. Je veux que tu crées une page. Passons aux projets de classe. N'oubliez pas qu'ils se trouvent dans vos fichiers d'exercices. Je veux que tu crées ce qui est sur la page. OK ? Qu'est-ce qui se passe ? La langue ne me dérange pas. OK, il doit y avoir un titre et une carte de liste des groupes qui se répète. Ok, jetons un œil à la mienne. OK, donc j'ai un titre ici. Nous avons cette carte qui se répète avec tous les groupes qui arrivent à des dates différentes Pour expérimenter les fonctionnalités de l'IA. Si vous essayez de suivre ce cours dans la version gratuite, c'est bon. Concevez-le simplement. Il n'est pas nécessaire de le construire avec l'IA. Il vous suffit de taper un peu plus copier-coller et trouver des images sur des sites de bibliothèque d'images gratuits Ça ne me dérange pas. En fait, si vous êtes dans la version gratuite, il existe un essai gratuit. Il peut être intéressant de suivre ce cours dans le cadre de l'essai gratuit et vous pourrez le désactiver à la fin. Mais si vous avez les fonctionnalités, je veux que vous les passiez en revue et que vous jouiez avec elles. Suggest Autolayout est le principal. C'est ce que nous avons fait dans la dernière vidéo, où il vous suffit de le concevoir et de dire : «   Hé, donnez-moi la mise en page automatique, s'il vous plaît ». Et il fait de belles choses. Vous allez rencontrer des problèmes. Par exemple, j'en ai conçu un assez simple pour qu'il fonctionne. Cela a fonctionné pour la première fois. Je sais que j'ai fait d'autres choses où je me dis  : « Oh, ça marchera, mais ça n'a pas marché ». Alors, restez simple ou faites quelque chose compliqué et voyez comment Suggest Auto Layout y fait face. Plus tard dans le cours, nous développerons nos compétences afin de pouvoir y remédier, mais jouez avec quelque chose de simple, au moins voudriez que vous jouiez avec cette fonctionnalité de renommage Si vous ne vous souvenez pas où c'est parce que ce n'était une petite partie du cours, vous pouvez aller ici et dire, en fait, je veux récupérer tout cela, cliquer dessus avec le bouton droit de la souris et renommer, où êtes-vous ? Renommez les couches. Voilà, c'est là. Je souhaite également que vous dupliquiez avec du nouveau contenu. C'est le terme technique désignant ce petit objet qui apparaît en bas, lorsque vous le faites glisser vers l'extérieur. C'est ce truc en bas. Je ne peux pas voir ce truc. Remplacez le contenu. ce que nous avons fait. Dans ce cas, ce que j'aime faire quand je sais ce que je vais faire, c'est construire quelque chose. C'est quoi ça ? Éloigne-toi de mon chemin. Est-ce que nous nous souvenons si vous perdez Command One. Oh, j'ai tapé Eclamation Point. Désolée, en décalez un, et il dézoomera sur tout ce que vous avez. Ce que j'aime faire lorsque je texte de l'espace réservé, je vais l'utiliser pour remplacer le contenu par Je tape juste le nom du groupe. Cela donne un indice. utilise la réécriture ou la réécriture pour ajouter une description d' un groupe appelé. Je lui ai donné un faux nom , puis je l'ai dupliqué pour pouvoir ensuite utiliser ce que cela appelle réécrire ceci ajouter une description d' un groupe appelé. Je lui ai donné un faux nom , puis je l'ai dupliqué pour pouvoir ensuite utiliser ce que cela appelle J'ai saisi une date réelle et j' utilise la réécriture ou la réécriture pour ajouter une description d' un groupe appelé. Je lui ai donné un faux nom , puis je l'ai dupliqué pour pouvoir ensuite utiliser ce que cela appelle réécrire ceci. Propose des noms de groupes. Vous pouvez le suggérer, en donner une description très claire. On pourrait dire, en fait, je suis en train de réécrire ceci et je dis que je l'écris pour des groupes techno des années 90 et je vais vous le donner spécifiquement Vous n'êtes pas obligé de simplement le laisser vide. Très bien, jouez avec la création d'une image. OK, donc j'ai fait une image, et vous remarquerez qu' ils ont tous des mecs de baseball d'âge mûr J'ai essayé de faire les favoris. Il n'aime pas ajouter des favoris. Rien de tout cela ne me ressemble. Mais de toute façon, ils sont tous cachés là-dedans. Quelques cordons d'aisance. Je pense que c' est ce type qui me plaît le plus. Il a une main poilue similaire. Quoi d'autre de réécriture dont nous avons parlé, à savoir la version de Chat GPT de Figman, jouez avec ça version de Chat GPT de Figman , jouez Je veux que votre page soit défilante. OK. Assurez-vous donc que lorsque vous créez le modèle, il peut le faire. Si vous ne l'avez jamais fait auparavant, assurez-vous simplement que lorsque vous aurez votre cadre, et que vous l'aurez dedans, il soit plus long. OK, donc ça rentre dedans. D'accord, c'est aussi la hauteur du téléphone. Ma taille est de 852, et nous avons découpé le contenu, donc nous ne le voyons pas Cela n'a pas vraiment d'importance. Ce qui compte vraiment, c'est qu'il soit réglé sur un cadre qu'il connaît, comme un iPhone 16. Si cela ne fonctionne pas, vous pouvez passer au prototype. Cela ne marchera probablement toujours pas, alors vous devez passer au prototype et vous devez dire que j'aimerais le trop-plein, qui est ce qui traîne ici. Par défaut, il n'y a pas de défilement Je veux faire défiler la page verticalement, et ça devrait vous donner ce type. C'est bon. Génial. J'ai pris quelques libertés et les ai déplacées pour retirer l'appareil photo. Tu fais pareil. J'ai joué avec certaines polices et certaines couleurs. Nous y reviendrons plus tard, mais je n'ai pas pu m'en expliquer moi-même. C'est bon, saute dedans. Jouez avec l'IA, soyez enthousiasmé par le temps qu'elle peut vous faire gagner et prenez conscience de certaines de ses faiblesses conscience de certaines de ses faiblesses lorsqu'elle ne fait pas ce que nous avons fait dans le cours précédent Des choses simples, des choses géniales, des choses vraiment compliquées. Nous allons devoir nous réparer. Inquiétude. Nous allons apprendre à le faire. C'est bon. Bonne réalisation de projets de classe. Je te verrai quand tu auras fini. Oh, en fait, les dernières choses là-dedans, les livrables. Prenez une capture d'écran comme celle-ci et téléchargez-la dans les projets de classe. Partagez également sur les réseaux sociaux. Faites savoir aux gens que vous suivez le cours avancé avec Dan et c'est génial. Jetez-y un coup d'œil et voici ce que j'ai fait. Oui, voilà. Je vous verrai dans la prochaine vidéo. 17. Mises en page automatiques imbriquées et réactives posée: Un. Dans cette vidéo, nous allons créer nos propres mises en page automatiques imbriquées réactives Comme nous l'avons fait dans la vidéo précédente, nous utilisons des robots. Nous utilisons l'IA pour tout faire. Nous allons tout faire nous-mêmes parce que nous devons comprendre comment ces éléments sont créés afin de pouvoir résoudre les problèmes, créer des mises en page plus complexes, et nous devons apprendre à nous étreindre Oui, il va y avoir des câlins dans celui-ci. Ça va être vraiment gênant. Très bien, allons-y. Hugin. Commençons par appuyer sur la touche I, et nous allons choisir un cadre pour iPhone 16. Pour une raison ou une autre, mettez-le où bon vous semble, alignez-le parfaitement, et ce sera mon menu ou deux Il a un nom, très sexy. Ce que nous allons faire, c'est simplement commencer à le construire. Je vais commencer par un cadre et je vais en dessiner un ici. Très bien, je vais en changer la couleur juste qu'on puisse le voir en arrière-plan, choisir n'importe quelle ancienne couleur sur l'écran, une boucle. Apportons une image. Tu peux apporter n'importe quoi. J'en ai une. N'oubliez pas que Command Shift K est le raccourci pour importer une image. Et il y en a une qui s'appelle Image 5. C'est très cool. Apportez un ordinateur portable. Allons-y. Je vais juste faire glisser manuellement comme je le souhaite, et jetons-y un petit coup d'œil. OK, les contraintes sont bloquées. Pouvez-vous voir que lorsque je le fais glisser, pouvez-vous voir cette ligne pointillée qui passe par le milieu ? Cela signifie simplement que la hauteur et la largeur sont verrouillées. Vous pouvez le casser en appuyant sur ce bouton. Débloquez le rapport hauteur/largeur. Je veux juste avoir un rapport hauteur/largeur étrange. OK. Je vais le traîner. Je devrais être plus attentionné. C'est assez bon. Maintenant, ce que je vais faire, c'est le construire au fur et à mesure. Plutôt que de tout construire puis de le convertir. Donc, ce que je vais dire, c'est qu'en fait ce cadre, donnons-lui un nom. Appelons ça une carte. Cette image sera appelée image. Ce que je veux faire, c'est le parent, c'est-à-dire la carte. Je tiens à dire que tu es en panne de voiture. Je peux cliquer sur le bouton. Où se trouve le bouton ? Il est là, ou je peux utiliser mon raccourci Shift A. Maintenant, ce qui est cool, c' est que vous voyez qu'il s'enroule autour de lui ? C'est bon. Je veux m'assurer que mon rembourrage est 16 et que la hauteur est 16 Génial. Faisons un peu de dactylographie. Je vais le taper ici. Je vais taper, apporter ton ordinateur portable, et il va entrer ici, mais le problème, c'est que si je mets l'Autou, ça marchera ? Ça va aller exactement là où je devais le faire. Excellente. Le problème, c'est que je vais aller ajouter ma date. Permettez-moi de passer à un rendez-vous. J'ai obtenu mon rendez-vous. Si j'essaie de le mettre dedans, il y a la sortie automatique, cette sortie automatique est réglée sur cela, ce qui est vertical, ou je pourrais le faire horizontalement. Ils ne fonctionneront pas tous les deux. Nous devons faire en sorte que le bien se situe entre les deux. Permettez-moi de les déplacer, alors apportez un ordinateur portable en plus de la date. ne fonctionne toujours pas, mais si je prends ces deux gars et que je les mets dans leur propre sortie automatique, c'est ce que l'on appelle une sortie automatique imbriquée J'en ai un que je vais mettre ici chez ce parent. Il est niché à l'intérieur. Une fois ces deux éléments sélectionnés, vous pouvez cliquer dessus avec le bouton droit de la souris et dire : « Je veux encadrer cette sélection ». Tu pourrais d'abord dessiner le cadre et y ajouter ces gars. C'est à vous de décider. Ils sont dans ce cadre. Je vais en faire un toot Shift A. Celui-ci s' appellera heading Ça ne marche toujours pas, Dan. Mais regardez, c'est imbriqué. Lo cache sa carte intérieure. Mais ici, je peux faire des trucs sympas. N'oubliez pas que cette carte a été configurée pour être distribuée. Cet Ayo peut être réglé horizontalement. Verticale, horizontale. Cool. Cela ne fonctionne pas tout à fait, mais c'est un Au imbriqué Vous trouverez de nombreux nids à l'intérieur des nids. C'est ainsi que l'IA l'a fait automatiquement, ce qui était cool. Essayons de l'améliorer un peu, car dès que c'est le cas. Ce n'est pas tout à fait correct. Quand je tape, cela fonctionne, mais ça s'éteint et pour toujours. Il y a quelques points que nous devons examiner. Regardons ce parent, le titre. Pour le moment, cette rubrique se rapporte à peu près à là. Nous voulions aller jusqu'ici. Fais-le. Dès que la largeur, vous voyez qu'il est écrit « étreignez », « étreignez le contenu », cela signifie que le gros ours étreint le contenu aussi étroitement que possible, ce qui est très serré, juste sur les bords Ce que je veux te dire, c'est de ne pas t'étreindre. J'aimerais que vous remplissiez votre contenant. Le conteneur, dans ce cas, est le chariot. C'est le parent ou le conteneur. Je veux que tu en remplisses le plus possible. Vous voyez une petite flèche apparaître ici, regardez. Je vais suivre cette voie. Tu es vraiment géniale. Cela fonctionne. Cette rubrique s'étend donc désormais sur toute la longueur. Ce que je dois faire maintenant, c'est qu'ils sont tous écrasés vers la gauche Je dois dire que je veux que tu te retrouves sur la gauche. Et il y a un écart de huit. Il y a un petit écart entre les deux. Je vais dire que l'écart est en fait, pouvez-vous simplement le rendre automatique ? Le parent dit : « Je veux être aussi grand que possible ». Je vais remplir ce contenant. Mais nous avons également forcé l'écart à atteindre un certain chiffre. Mais nous disons B Auto, c'est vrai, B ce que vous voulez et il s' étendra jusqu'au conteneur. Obtenez-le. Fermons-le sur notre parent, qui est une sortie automatique. Nous avons cette image à l'intérieur, puis nous avons ce petit quartier qui a son propre petit monde d'Auto Lou avec ces deux gars à l'intérieur OK, maintenant je vais ajouter le texte de ma description. Je vais passer directement à cela. OK, c'est la chose la plus étrange que j'ai vérifiée pour voir si l'IA me donnerait de l'urnipsm. C'est le Laurenopsm que nous avons. Maintenant, nous avons Disney. Waouh. Ce n'est pas Disney. J'ai ressenti Disney quand je l'ai lu. OK ? Si nous les jetons ici, en les pinçant pour les mettre au bon endroit, devraient être remplis et nous avons obtenu cette jolie sortie automatique, peu près de la même manière que celle-ci. Vérifions quelques points pour nous assurer que tout fonctionne. Certaines choses, c'est que ça ne va pas exagérer. Comment le faisons-nous ? Nous l'avons croisé et lui avons demandé : voulons-nous votre largeur ? Nous voulons que tu y ailles. Remplissons votre contenant. Allons jusqu'au bout. Ça l'a fait. Cela ne fonctionne pas vraiment car aucun des mots n'est assez petit pour être décomposé. Faisons-le encore une fois. Je vais donc modifier la taille du texte. Allons régulièrement chez Roboto. Oh, ça va faire l'affaire. Je fais exactement la même chose. Pourquoi ne pas récupérer le texte. Nous pouvons dire votre largeur, mon pote remplit le récipient. Oh, au moins un mot est apparu. Mais ce que je veux dire, c'est que je le remplis très bien. Continuons à taper. L'autre chose que j'aime vérifier avec Autolayouts. Nous l'avons fait très tôt, c'est-à-dire, vérifiez que cela fonctionne, continuez. Cela ne fonctionne pas. Cette zone de texte est ce que l' on appelle une hauteur fixe. Nous avons sélectionné le texte. Je peux voir que la hauteur est réglée à cette hauteur de 115. Tu es comme si je ne voulais pas avoir 115 ans. J'aimerais que ce soit un gros câlin. Cela fonctionnerait. Il y en a deux que nous pourrions faire. Nous pourrions faire des câlins. Ce bouton fait exactement la même chose. Hauteur automatique. C'est juste un autre mot pour désigner contenu étreint. Cela change même. Écoutez, si vous passez au contenu d'un câlin, pouvez-vous le voir passer à ça ? L'autre façon, la troisième parce qu'il faut trois façons de faire les choses. Vous pouvez simplement double-cliquer au bas d'une zone de texte. Il passera tout de même en mode câlin et en hauteur automatique . Fais-le tester. Tester, tester, allez. Cela fonctionne. Génial C'est bon. Y a-t-il autre chose que nous voudrions vérifier ? L'autre chose que nous aimerions vérifier, est-ce que tout cela est réactif ? Oh, en quelque sorte. Oui, ça l'est. Totalement réactif. Je pensais que cela ne marcherait pas et que j'allais vous montrer, c'est que tout fonctionne. Cool. Parfois, c'est juste cette boîte ici. Il est configuré pour se remplir. Nous l'avons déjà fait. Parfois, quand on le traîne, c'est ce que c'était. J'avais le mien très clairement comme ça, avec une largeur précise. Lorsque je le conçois, je l'aligne souvent de toute façon, même si je n'ai pas dit « remplir », et il aura toujours une largeur fixe. Je vais avoir l'air d'en avoir l'air. J'ai l'air d' aller jusqu'au bord. Mais quand je fais ça, ça répond : « Non ». OK. Donc, celui-ci est là, je me suis mis à le faire. Remplissez ce contenant, s'il vous plaît. Sympa. C'est totalement délicat. OK ? Donc, si vous vous trouvez du genre « Oh, c'était un peu difficile ». Nous en ferons quelques autres pendant le cours. Mais pour ce qui est des sorties automatiques, l'une d'entre elles est vraiment simple Quand tu commences à en mettre un dans un autre, tu te dis que c'est bizarre. Ensuite, vous ajoutez ça, est-ce que ça va être câlin ou est-ce que ça va remplir le contenant ? Je me souviens que lorsque j'ai été déclarée, j'ai dû cliquer sur le ballon et me demander : « Est-ce que c'est un crochet ? » S'agit-il d'un contenant rempli ? Faire du shopping n'est pas une bonne chose. Et tu as juste joué avec les boutons jusqu'à ce que tu te sentes du genre « Très bien ». Je comprends Je le comprends parfaitement, mais cela n'a pas été instantané non plus lorsque je l'ai appris. Donc, si vous trouvez cela un peu délicat, c'est difficile. Mais quand vous l'aurez obtenu et que vous ferez toutes ces bonnes choses, et que vous pourrez commencer à faire ce que nous avons fait lors de la dernière étape, vous allez être un doublon, les prendre tous les deux, décaler A ou vers l'extérieur, puis en faire glisser des tas, puis passer à la commande K parce que nous sommes géniaux et nous allons remplacer le contenu, et nous disons simplement remplir avec des onglets réplatiques pour que nous puissions les remplir avec du contenu réaliste, puis appuyer sur Command Enter, même si j'appuie toujours sur Entrée. Quelqu'un d'autre le fait ? C'est tellement bon. Écoutez, les événements de réseautage viennent de passer et de les changer. dates différentes, des descriptions différentes, des Oh, je sais en quelque sorte ce que nous sommes. Comment sait-elle ce qu' est son ordinateur portable ? Oh. C'est un peu effrayant. C'est le cas. C'est ce que nous faisons pour lui apporter son ordinateur portable. Designer de renom. Oh, les robots. Tu me fais peur, mec. C'est bon, c'est ça Je vais contempler ma vie avec les robots, et je vous verrai dans la prochaine vidéo. Waouh. 18. Mise en page automatique des grilles dans Figma ma: Bonjour, tout le monde. Dans cette vidéo, nous allons en apprendre davantage sur les grilles de sortie automatique Regarde comme c'est cool ce truc. Il y a des réseaux. Nous pouvons déplacer des objets. Tu y vas. Ils s'appellent Auto out grids. Ils sont faciles à utiliser. Je les adore. C'est du saut. OK, pour commencer, j'ai créé un nouveau cadre, il n'y a rien dedans. J'ai créé une couleur de fond comme le bleu nuit. Cela n'a pas d'importance. Prenons un cadre. Nous allons le mettre à l'intérieur, et nous allons trouver l'Auto. C'est le nouveau ici. Nous avons considéré que la forme libre signifie simplement qu' il s'agit d'un cadre avec des objets qui se tortillent partout De la même façon, je dessine des choses à l'intérieur de ce cadre. C'est une forme libre. Il y a un rectangle ici. Ce n'est tout simplement pas suffisant, mais ça ne fait que traîner. Supprimons-le et modifions-le. Nous avons examiné la verticale et l' horizontale pour la sortie automatique. Ce que nous allons faire, c'est cliquer sur celui-ci ici. Ce qu'il va faire, c'est le convertir en sortie automatique. Cela nous évite d'avoir à cliquer dessus, mais cela en fait également cette grille. C'est tellement mieux pour le moment. Je suis sûr qu'au moment où vous le ferez, ce sera bien, pas Battery, il se peut qu'il n'y ait pas autant de bugs, je proposerai peut-être de nouvelles fonctionnalités. Tout ce que nous avons ici, c'est d'apporter quelques images. C'est la meilleure façon de l'expliquer. Passons au Command Shift K ou au Control Shift K. Nous allons intégrer six à dix images. vais cliquer sur Place A, et faisons-en glisser un, et ça ne marchera pas. Allons là-bas. Elles sont toutes empilées les unes sur les autres Si je le prends et que je le jette dans ma grille, ce que je ne peux pas vraiment voir, où êtes-vous ? Ça y est. Si je le prends et que je le fais glisser, ça ne marchera pas. Faisons en sorte qu'il soit correctement dimensionné juste pour commencer. Je vais m' étendre et me contracter. Trouvons-le dans un endroit d'une telle taille, et je dirais que vous y entrez. Ou vous pouvez copier et entrer ici, sélectionner le cadre dans lequel vous le souhaitez coller et j'y vais aussi. Le seul problème, c'est que cela fonctionne. Il y a cette petite grille. Vous pouvez voir ici que l' image devient de plus en plus petite. Il essaie de se remplir, mais il n'y arrive tout simplement pas. Ce que nous devons faire, c'est avant ou après, sélectionner l'image et dire : bloquez pas votre ratio Aspec Débloquons le ratio Aspec. Donne-le en un clic. Je vais tout faire en une seule fois. Maintenant, il va faire des choses plus réactives et plus cool. C'est James Vous pouvez le construire vous-même avec des cadres, du rembourrage et une mise en page automatique, mais les grilles facilitent simplement cool aussi, c' est que nous allons prendre cette copie et je vais vraiment la faire glisser quand elle sera un peu plus grande. Voyons ce qu'il fait. Si je le traîne juste ici , ce n'est pas le cas. Il utilise le coin supérieur gauche de ce truc, et il est loin de s'en approcher. Il est donc trop grand, il ne sait pas où aller. Ce blanc et bêta. Si je le fais, c'est coincé. Parfois, cela va se transformer en bruit. Cela va croiser deux de mes rangées. Que sont-ils ? cool, c'est que, regardez, tout est redimensionné et responsable Responsive, c'est le mot. Allons nous garer. C'était ma clé. J'ai demandé à AI de me faire un keta. Je ne savais pas ce que c'était. J'ai dit : « C'est un piano avec une guitare » et il l'a écrasé sur le côté. Maintenant, c'est ce que je voulais. Je vais donc le copier, le coller. Je viens de double-cliquer dessus, de le coller. C'est tellement bon. Ces petites grilles sont super faciles à réaliser Sinon, il vous faudra du temps pour les annoter. Vous pouvez en faire en sorte qu'ils s'étendent sur plusieurs comme celui-ci ici. Ils peuvent se chevaucher. OK. Et ce système continuera s'étendre et de se contracter. Si vous avez besoin de jouer avec les couches, c'est comme d'habitude ici dans votre panneau de couches, si je le veux en dessous de tous ces gars, bam, voilà n'est pas ce que je veux. J'aime bien la grille qu'ils ont créée, toutes les lacunes sont annulées. Vous pouvez tous les ajuster. Voyez-vous ici, vous pouvez voir que l'écart est de dix et dix. Si vous voulez que ce soit le cas, que voulons-nous pour les 16 et 16 ans ? Vous pouvez ajouter du rembourrage. Passons à huit et huit heures. Ils sont très polyvalents. Je le traîne jusqu' au bout, et ils sont très responsables. Pourquoi est-ce que ce type sort du bas ? Eh bien, jetons un coup d'œil. Il n'est pas contraint pour le moment, mais sous l' image de fond, il est sous-rempli C'est. Bill, c'est parce que je l'ai traîné dehors tout à l'heure J'essayais peut-être de le traîner. Voilà. Étant votre petite maison là-bas, mon pote, vous pouvez facilement les déplacer. Je peux double-cliquer sur ce type et le faire glisser vers le haut et il essaiera de monter là-haut. Sympa. Vous pouvez les dupliquer. Que va-t-il se passer à cause de cette étrange structure de lignes ? Allons-y. Allez Di. Nous en mettrons un nouveau. C'est tellement intelligent. Vous pouvez les ajouter vous-même en cliquant sur le cadre entier et ici, vous pouvez cliquer dessus et dire que par défaut, j'ai juste choisi deux et deux Disons que je veux qu'il y en ait trois et deux. Il me suffit de passer la souris dessus, me faire une idée de ce que je veux, puis de cliquer dessus Dans ce cas, je dois vous dire que je le veux, mais je le veux ici et je vais peut-être faire en sorte que celui-ci se déroule dans cette direction. Regardez-nous. En tant que KitArt créatif, vous y entrez OK, ce fond sombre était une idée stupide. Revenons-en à un blanc cassé. En fait, tout blanc. Cela peut être un peu bizarre quand on les déplace. Regarde ça. Je veux déplacer ce type ici. Nous voulons ce côté-là. Je l'ai écrasée et j' ai tout déplacé. Parfois, vous devez les copier-coller. Parfois, cela fonctionne bien, parfois cela ne dépend pas de la distance que vous avez parcourue et de ce qu'il y a à l'intérieur de la grille Vous pouvez maintenant créer ces lignes, lignes et colonnes vers le haut et vers le bas. Vous pouvez les personnaliser en taille individuelle. Pour le moment, ils sont tous sur le point de passer en mode automatique. Ces petits points quand je survole. Ces petits points sont à l'extérieur et il y a les mesures. Ce que je peux faire, c'est dire, en fait, que je veux que celui-ci soit juste et que vous puissiez cliquer dessus et simplement faire glisser ou le taper. Si vous savez que vous voulez que ce soit 150, saisissez-le. Tout cela change en fonction de l'espace fourni. C'est très cool. Vous pouvez vraiment les faire sortir de leurs petites maisons. Tout ce que vous avez à faire, c'est que le cadre parent ne doit pas être configuré pour découper le contenu. Vous pouvez en faire des choses bizarres, mais vous finissez par le casser. Ne le cassez pas. Défaites, ne le cassez pas. Mais je sais que tu peux ajouter du texte. Dites-moi dans les commentaires si vous pouvez vous en sortir. Je ne peux pas créer le texte, le développer et le rétrécir s' il s'agit d'un texte comestible. Ce n'est pas aussi réactif, mais faisons-le quand même. Allons-y, introduisons ceci et partons vers vous. J'ai reçu un texto avec lequel je déconnais. C'est ici. Je vais le mettre dedans. En fait, c'est pour ça que j' avais le fond sombre à l'époque. Est-ce que c'est ici ? Je veux une rangée supplémentaire en haut. Ce que je peux faire, c'est dire, je veux, ce que je veux, une autre dispute. Ça va être trois par trois maintenant. W. Je vais les saisir et je vais devoir les faire glisser vers le bas pour me laisser un peu d'espace pour le texte. C'est si facile, n'est-ce pas ? Maintenant, c'est ici que je vais couper. Alors copiez-le, cliquez de nouveau ici. Je vais cliquer sur ce champ et le coller, il s'y trouvera. Ce n'est pas la bonne taille. Mais le problème, c'est que oui, le gros problème c'est que je n'arrive pas à trouver comment le redimensionner, donc tu dois choisir une largeur appropriée pour qu'il puisse passer du temps avec les mecs, faire le reste Mais le texte finira par prendre le dessus et dire « au revoir ». C'est la seule chose. Pareil pour cette hauteur ici. Je ne veux pas que ce soit automatique. Je vais le faire glisser vers le bas pour qu' il soit un peu comme ça. Je pourrais le faire casser. Regarde ça. Je n'arrive pas à faire changer la taille. C'est vraiment ce que je veux. Je vais sélectionner le texte, je dois dire que je ne veux pas qu'il soit trop large Je veux qu'il remplisse le récipient et qu'il le fasse glisser jusqu'ici. Il va donc se casser maintenant. Regarde ça. Tu peux le faire fonctionner. Reprenons-le également. Tu deviens plus petit. Oh, très cool. D'accord. Quoi ? L' utilisation de cette fonction de grille est devenue plus facile. Une chose que je tiens à vous montrer, c'est que juste avant de partir, c'est comme un cadeau spécial si quelqu'un a attendu aussi longtemps. J'ai oublié de m'en servir. Celui-ci me convenait parfaitement. Je me suis dit : « C'était cool, mec. Je l'ai obtenu grâce à une IA, et je me suis demandé : « Comment est-ce que j'ai pu l'obtenir ? Parce que je l'ai aussi pour ça. Donc, ce que j'ai fait, c'est vrai, j'ai dessiné un rectangle. Et puis je l'ai fait. Ce ne sera pas pareil parce que l' IA est, je ne sais pas, incapable de répéter les choses, mais je vais créer une image et je vais faire ça, c'est ce que j'ai mis dans une guitare en gros plan. Vous pouvez utiliser la couleur et j'utilise le nombre hexadécimal de la couleur. Vous pouvez utiliser l'IGB, quel qu'il soit, comme couleur principale. Puis je l'ai fait, je l'ai obtenu et je suis devenue géniale. J'ai fait les écouteurs. Génie. Puis j'ai fait échouer le Keta Oh, j'ai utilisé une autre couleur. Ce n'était pas orange, c'était rose. Dans ce cas, je pourrais dire « Tout le monde fait des modifications » et dire « guitare acoustique ». à vous de décider, mais c'est ainsi que j'ai obtenu ces très jolis graphismes plats que j'utilise ici. Encourager. Si vous avez un certain âge et que vous vous dites Quel est le keitar ? C'est l'accent » Tu es prêt ? Voilà. Tu es bienvenu. J'en voulais tellement une. Mains en l'air, qui a oublié leur existence. Voilà. Nous avons beaucoup appris dans cette vidéo : Figma, Auto Lou grids et ketars D'accord. C'est ça. À la prochaine vidéo. 19. Projet de cours 03 - Grilles: Oh, c'est marrant. C'est l'heure des projets de classe. C'est amusant. De quoi tu parles ? Excellent apprentissage et pratique. Ce que je veux que vous fassiez, c'est que vous utilisiez la fonction de sortie automatique, désolée, la fonction de sortie automatique sur grille nous avons apprise dans la dernière vidéo OK ? C'est une question assez simple. Je veux que tu fasses ce que nous avons fait dans la dernière vidéo. Il y a certaines exigences. J'aimerais que vous utilisiez quatre images ou plus. Peu importe où vous les trouvez, bibliothèque de stock générée par l' IA, vos propres images. J'aimerais qu'ils soient liés à votre genre de musique en particulier. Donc ça peut être du rock 'n' roll, de la soul, du hip hop, peu importe ce que vous avez. Hé, fais-le. Je veux que vous expérimentiez en utilisant au moins une case colorée. Vous pouvez le voir ici sur le mien, j'ai changé le mien après la vidéo pour ajouter ces cases colorées. Le truc, c'est qu'ils doivent pouvoir se déplacer avec eux. Ça va être un peu plus difficile ? Je ne sais pas, cours avancé. Je suis en train de travailler sur des tâches où, d'une manière ou d'une autre, lorsque vous les insérez probablement, il ne s' agit que d'un cadre. C'est donc un cadre qui se trouvait là où il se trouve maintenant. Mais par défaut, ce type ne veut pas s'étendre et se contracter. Je veux que tu voies si tu peux trouver comment faire. Fais-le. Ne t'inquiète pas. Regardez la vidéo suivante. Eh bien, vérifiez ci-dessous. Ne regardez pas encore, mais quelqu'un dans les commentaires vous dira comment il l'a fait fonctionner. Donc, juste une boîte de couleur au lieu d'une image. Je vais vous donner un indice, quelque chose à voir avec la largeur et la hauteur. Vois si tu peux trouver une solution. Nous l'avons déjà fait, c'est la clé. Et du texte, mais c'est facultatif. Je veux que vous fassiez au moins un objet couvrant une colonne. Cela couvre un, deux, trois, cela couvre deux, c'est au moins l'une d'entre elles. Règles, prenez une capture d'écran et téléchargez-la dans les projets de classe. Et elles ont l'air cool. J'aime bien cette petite grille. Téléchargez-le sur les réseaux sociaux et dites simplement que vous expérimentez la mise en page automatique de la grille Figma Et qu'en penses-tu ? Assurez-vous de me taguer. Amusez-vous bien en jouant avec. C'est bon. Je te verrai une fois que tu auras fini tes devoirs, pas tes devoirs, ton projet de cours, tes trucs amusants. Tu te souviens ? A. Vidéo suivante. 20. Ce qu'il faut savoir sur les composants dans Figma: Composants. Tu les connais déjà. Pourquoi faisons-nous une vidéo ? J'ai des trucs importants qui attirent les gens, me surprennent. Je tiens à partager cela avec vous. Est-ce que cette vidéo est amusante ? Je me perds un peu. Je n'avais pas prévu de me perdre, mais nous l'avons fait, mais nous l'avons réparé. J'espère que ce sera une jolie petite pépite pour vous . Nous le jurons, je sais. Nous n'en avons pas l'intention, mais nous le faisons. C'est bon. C'est ça. Entrons. Parlez de composants. Très bien, nous allons utiliser le fait que j'ai créé ce nerf et que j'ai oublié. vôtre est peut-être au premier plan parce que vous pensez qu'il a laissé son sang-froid derrière lui. Nous l'avons fait plus tôt dans le cours, donc je vais cliquer dessus, utiliser mon bouton pour revenir en arrière, qui n'est que le premier crochet. Et puis j'ai ça. Je vais juste le faire ici parce que c'est un peu plus clair. R, j'ai ce Nav que j'ai créé. Voyons comment il est fabriqué. C'est ce qu'on appelle Nerve bottom. À l'intérieur, il y en a quelques-uns. Qu'est-ce que c'est ? Tu t'en souviens ? Oui, ce sont des composants principaux. Voici les patrons. Voici les parents. Donc, lorsque j'en fais des copies, elles deviennent des exemples de ce patron. cool , c'est que lorsque j' ajuste le principal, je le fais. Je ne sais pas ce que je vais en faire, mais je vais tout détruire Puis-je le faire à cette distance ? Tu peux le voir là-bas ? C'est ce qu'il fait à tous les deux. Cool. Nous savons ce que font les composants. Mais disons que je souhaite également faire de cette Nav un composant principal, car je vais l'utiliser sur de nombreuses pages. Je ferais mieux de tout contrôler. Voyons ce qui va se passer. Je vais utiliser mon raccourci Command Shift K. Vous êtes un composant. C'est une image d'importation. C'est l'option de commande K ou le contrôle K, que s'est-il passé ? C'est devenu le composant principal, c'est génial, mais ça les a déclenchés. D'où viennent-ils ? C'est ce qui arrive lorsque je vois les fichiers d'autres personnes, en particulier lorsqu'ils sont de niveau intermédiaire, pas très avancés. Vous êtes du genre à les laisser ici et qu'est-ce que c'est passé, bordel ? La règle est que les composants principaux ne peuvent pas être imbriqués dans d'autres composants principaux Parce que nous avons transformé le cadre extérieur en composant principal, il est parti les tousser et les a laissés à l'intérieur, vous voyez, ce ne sont plus les composants principaux. Écoutez, ce ne sont que des exemples, une version Little Diamond. Ce que nous devons faire, c'est simplement y réfléchir. Et ce que vous constaterez, c'est que nous allons zoomer un peu. Vous verrez que ce type est ici, regardez, ils sont en dessous . Je vais le faire. Qu'est-ce que je vais faire ? Oui, virons-les. Et ce que je vais faire, c'est les trouver. Ils sont tous là. Faisons-les glisser vers l'extérieur, et nous allons les placer sur une page de composants. Je vais donc les couper et dire que vous êtes maintenant en direct sur ma page de composants sucrés , que je n' ai pas beaucoup. Vous pouvez les conserver sur le même document, aucune loi ne l'interdit. Mais lorsque vous travaillez sur un fichier plus volumineux, vous avez vraiment besoin d'une page de composants. Sinon, vous pouvez simplement les avoir à côté de votre dessin, juste traîner ici. Très bien, c'est important, tout d'abord. L'autre chose que je veux vous montrer, c'est que c'est maintenant un élément principal. Alors clairement, qu'est-ce que j'ai fait ? Oh. Je me demande : « Qu'est-ce qui ne va pas ? Congelé ? Non, j'ai accidentellement cliqué sur le raccourci pour verrouiller la couche. Je ne me souviens même pas de quoi il s'agit. Qu'est-ce que le raccourci de la couche de verrouillage ? Veuillez patienter. Oh. Voilà, c'est là. Déplacer la commande vers l'extérieur. Je n'ai pas cliqué dessus. J'ai cliqué sur quelque chose sur mon clavier et il l'a verrouillé. Bref. Je l'ai donc déverrouillé Ce que je dois faire, c'est que je ne devrais pas vraiment l'utiliser ici non plus. Je pourrais le laisser ici. Donc, beaucoup de gens laissent cela sur leur première page, puis en créent des exemples. Soyons intelligents, d'accord ? Et arrêtons ça. Passons à notre panneau de composants. Mettons-le ici. C'est un gâchis encore plus grand. Qu'avons-nous fait ici ? Tu y es. Ce que j'ai, c'est que j'ai beaucoup de ces gars les uns sur les autres. C'est bon. Je veux vraiment les supprimer du cours, mais ces choses vous arriveront aussi. Que s'est-il passé là-bas ? Je vais annuler, revenir en arrière. Il devait y avoir tellement de mecs qui traînaient tous là-bas. Revenons-en à ma chaîne hi-fi. Je veux que tu reviennes. Tu es là. Qu'est-ce que c'est ? Il n'y en a qu'un . Copiez et accédez à mes composants. Cliquez sur Coller. Qu'est-ce que j'ai fait ? Je les ai peut-être collés à l'intérieur de ces gars Les avaient-ils sélectionnés et collés ? C'est ce que j'ai fait. Je ne sais pas ce qui s'est passé là-bas. Tu sais ce que je fais. Quoi qu'il en soit, ça arrive. Voilà. Je les ai sélectionnés. Je viens de prendre ma pâte habituelle, et d'une manière ou d'une autre, je dis que c'est un bogue. Il y en a trois. Il en a collé une pour chaque icône que j'avais. Hum. Oh, j'en mets une instance dans chaque image. C'est bizarre. C'est bon. Voilà. J'ai appris quelque chose dans ce cours. Très bien, recommençons. Vérifiez-le. Secouez-le. Tu es prêt ? Oubliez tout le fait de vous perdre. Je vais manger au Mobile Hi Fi. Je vais dire toi, mon ami. Je vais le couper, pas le copier. C'est probablement là que je me suis trompé. Ce n'est pas un bon composant, donc je vais vous dire. Rien n'a été sélectionné. Collez-le. C'est ici que je vais conserver ce composant principal. À l'intérieur de ce composant principal, il y a un tas de ces instances de ces gars en haut. est bon, on va bien. Revenons au mobile. Passons à notre panneau Ressources, et nous devrions avoir du crédit dans ce fichier sous les composants. Nous devrions savoir où il est. Mes fesses sont là maintenant. OK, donc je vais mettre ça dedans. Il devrait désormais s'agir d'une instance. Cool. Rien d'autre ? Où devons-nous apprendre ? Oui, mais je suis troublée. C'est vraiment ça. Ce que je veux faire, c'est en mettre un ici également, parce qu'il est réactif, nous pouvons l'ajuster. Ce qui est cool avec les instances du composant principal, se souvenir que nos composants principaux traînent ici. Ce ne sont que leurs enfants. Ils font tout ce qu'il dit, mais il y a quelques petites choses que nous pouvons faire. Je peux dire, en fait, les couleurs sélectionnées ici, je veux que ce soit le blanc. OK, ils sont toujours connectés si je reviens à mon composant principal et que je lui demande, où est-il ce type ici ? Je dis que tout le monde a du rembourrage. Je rembourre en bas. Ce que je veux faire, c'est fendre le rembourrage. En ce qui concerne la navigation, je préfère le bas, un joli petit menton, allons-y 24, et celui-ci ici, allons-en 16. Je vais également vouloir une couleur de fond. Je vais le garnir légèrement blanc cassé. Juste parce que je le trouve cool que j'aimerais l' avoir et je tiens à dire que vous avez un effet d'ombre. J'aimerais qu'il ne baisse pas, qu'il ne baisse pas , que rien ne aille vers la droite. Il y a des hauts et des bas, donc je veux être moins quatre, ça monte. Tu peux le voir là-bas ? Peut-être que la dispersion ou le flou sont un peu plus importants. Peut-être juste un peu moins d'opacité. Je l'ai fait plusieurs fois. Je sais ce que j'aime sans le voir sur le document. Revenons à notre mobile et comme nous l'avons fait sur notre composant, tout cela s'est ajusté. C'est très cool. Mais vous pouvez voir ici qu'elles sont restées blanches, ce qui est également très cool. Je peux probablement utiliser ce Nav maintenant, mais je vais sélectionner une option et vous dire, je veux que vous soyez de couleur plus foncée que celle que j'utilise. Je n'ai pas encore vraiment réglé ce problème de manière idéale . Le composant principal est excellent. Ne placez pas les composants principaux à l'intérieur d' autres composants principaux car ils sont crachés. Vous devriez probablement les conserver sur une page séparée, mais ce n'est pas obligatoire et vous pouvez remplacer les instances par de petites choses comme la couleur Je ne peux pas ajuster l'icône ici. Je dois revenir au composant principal, mais je peux changer la couleur et une partie de la mise en page et je peux passer à la billetterie, je veux aller ici Je veux fermer les yeux sur tout ça et ça se renouvellera parce que nous sommes Il est toujours là. Il n'est pas éteint. Il est impossible de transformer ou de supprimer quoi que ce soit. Si je clique dessus et que je le supprime sur mon clavier, il se met simplement en veille. Somnolent. La dernière chose à propos des composants est ce que l' on appelle les contraintes. Vous les connaissez, mais voyons un peu d'originalité. Voilà, je vais déplacer ces gars vers le haut. Pour le moment, par défaut, je les fais glisser vers le haut, elles disparaissent. Je veux qu'il reste au bas du Nav. Je vais parler de contraintes. Je veux que ce soit à gauche et à droite parce que pour le moment ce n'est pas le cas, jetons un coup d'œil. Je pense que c'est juste à gauche, donc c'est coincé là. Je dois dire qu' il faut aller à gauche et droite pour que ce soit mou. De plus, je veux que ça reste en bas. Vous allez être confiné au bas de l'échelle. Tu es du genre, je le sais déjà, Dan. Tu es du genre : « OK ». Mais où se trouve-t-il maintenant ? Où sont les belles contraintes ? Ils sont partis. Je sais. Les contraintes doivent avoir un cadre parent. Sinon, ils n'apparaissent pas. Aucune contrainte, regardez exactement la même chose dans un cadre parent, les contraintes sont de retour. Il n'est même pas nécessaire que ce soit un composant. Si je dessine quelque chose, encadrez, aucune contrainte car il n'y a pas de cadre parent. Il entre ici. Oh, il a des contraintes. Des jours heureux. OK, donc c'est une chose à retenir. Dernière petite chose, je dis la dernière chose. Il y en aura probablement 20 de plus revenons à ma page de composants. Tu dis : « Oh, je ferais mieux de le faire pour lui. Donc ce type, donc je n'ai pas à le faire à chaque fois. Casey aime bien, pas de contraintes. Dan nous a dit qu'il avait besoin d'un cadre parental. Très souvent, vous trouverez tous les composants à l'intérieur de ce cadre même s'ils n'en ont pas besoin, sorte que vous pouvez voir des choses comme ça. Regarde, il est coincé en haut et à gauche. OK ? Cela ne fait rien. Disons que je le repasse en haut, et que je le change pour que je veuille m'en tenir à la droite, c'est ce que je devrais faire. Je vais passer à une autre page. Allons-y F Oh, ce n'est pas ce que je voulais dire. un cadre, cliquez dessus Pourquoi est-ce que je vais faire ? Je pense que nous jurons sur tout le monde. Quelle est la coupe habituelle ? C'était dans mon cerveau, j'ai été distrait par le FU. Oh, je voulais juste dire. Saisir. Voilà. J'ai ce nouveau cadre avec un langage grossier. Je vais donc récupérer mes actifs. Je vais trouver le seul appel en bas, et je vais le mettre dedans. Mets-les n'importe où. Et regardez. Oh, il est là. Il est en haut, ce qui est la valeur par défaut, mais attention. Il n'a pas fait le bon choix. Ce que tu fais n'a donc pas vraiment d' importance. Je ne sais pas pourquoi. Vérifiez-le maintenant sur votre version. Ils pourraient changer cela. Ce serait bien de le définir comme une sorte de valeur par défaut pour le composant principal parce que je ne sais pas. C'est peut-être la raison des principaux composants, mais cela ne fonctionne pas. Faites-moi savoir si c'est le cas, et les commentaires, vous devrez le faire après. Ça va. OK, en haut, en bas. Parce qu' une fois que tu l'as fait une fois, ce n'est pas trop mal, d'accord ? Parce que souvent, vous les prenez, d'accord, vous les collez, et il les emmène avec vous Mais pas depuis le composant principal. Bien, il y en a eu une amusante. Nous avons juré un peu, nous nous sommes perdus, et nous nous sommes vraiment perdus J'espère que vous l'avez trouvé utile. Les composants sont simples, mais ils peuvent aussi comporter quelques éléments rapides, et c'est le genre de choses rapides que j'aime partager Génial. C'est ça. Je vous verrai dans la prochaine vidéo. Je vais mettre des coins arrondis sur les trucs. C'est tout ce que je vais faire, d'accord ? Tu peux y aller maintenant. Ouais. Huit, c'est une bonne taille pour un téléphone. En fait, ils doivent paraître plus grands pour un téléphone. 24 est plus représentatif d'un téléphone moderne, même un peu plus grand. J'aime bien le voir dans le design. Tu n'es pas obligée si j'annule ça et que je reviens à la case départ. Évidemment, lorsque je le prototype, il entre à l'intérieur et toute façon découpé à l'intérieur d'un téléphone Donc tu n'en as pas vraiment besoin, mais utilise mes flèches, d'accord ? Vous pouvez voir qu'ils ont des coins arrondis, vraiment grands sur le nouvel iPhone. C'est bon. C' est tout ce que je voulais. Je vais retourner là où, oh, je vais retourner à mes virages. Je vais le faire pendant la pause, vous passez à la vidéo suivante. On se voit là-bas. 21. Quel est le bon espacement dans Figma ?: Dans cette vidéo, nous allons parler de l'espacement à utiliser Vous pouvez utiliser ce que vous voulez, mais quoi que vous décidiez, vous pouvez créer cette petite grille ici. Cela vous donne une jolie petite référence visuelle pour dire : « D' accord, je fais de l'espacement ici Qu'est-ce que ça devrait être ? Milla Utilisons 32 Je peux m'assurer que c'est à 32. Il en a actuellement 43. Ce n'est pas bon. Vous pouvez l'utiliser comme un simple guide visuel pour savoir, que dois-je utiliser ? Être cohérent avec votre espacement. Ce que je vais faire, c'est vous montrer également comment utiliser une application pour ajouter toutes ces petites mesures ou dessiner les cases. Et nous le ferons une fois et vous pourrez copier-coller ce petit bonhomme sur chaque nouveau travail pour que cela ne prenne pas de temps à l'avenir. Très bien, allons-y. Très bien, commençons par les faire sortir. Une fois que vous l'avez fait une fois, vous pouvez simplement copier et coller chaque futur document pour toujours. OK ? Je veux donc que ce soit une belle couleur vive afin pouvoir le voir comme une référence visuelle. Et je veux mon premier, la taille la plus fondamentale est huit sur huit, d'accord ? Et comme j'ai activé les contraintes, d'accord, cela signifie que je n' ai qu'à le saisir une seule fois, et cela mettra à jour à la fois la hauteur et la largeur. Ça fait gagner un peu de temps. OK, donc huit c'est le premier. Je vais zoomer un peu. OK, et je veux voir une représentation visuelle de la taille suivante, qui est juste un autre huit, soit 16. Alors je veux juste continuer à monter en huit, d'accord ? Je suis un peu confuse avec les mathématiques dans ma tête, alors je me contente de ça, plus huit sur le terrain. OK ? Nous sommes à 24 ans. Je le sais. D'accord, 32 ans. Ce sont les tailles les plus courantes. Tu peux continuer à monter. C'est à vous de décider. Vous pouvez également faire des multiples de six ou cinq. Ils sont simplement plus difficiles à diviser et votre développeur vous détestera parce que, souvent, la développeuse travaillera avec un framework qui existe déjà. Au lieu d'écrire avec des nuls et des zéros et 16 pixels, elle utilisera l'espacement prédéfini, et il sera probablement de huit ou une Cela dépend à quel point vous aimez votre développeur. J'aime aussi garder l'espacement. Parce que j'aime bien celles-ci, comme la taille mon bouton, icône B, image B. Vous pouvez vous en faire une idée en les regardant. L'espacement, j'aime bien partir. Si vous zoomez suffisamment, je ne peux plus voir mes pixels. J'en étais capable avant. Je ne sais pas si je désactive le mien ou s'il est désactivé par défaut. Vous le saurez, étant donné que le vôtre sera allumé, vous pourrez voir les petits pixels qui s'y trouvent. Vous pouvez aller jusqu'à quelques-uns et passer à la grille de pixels. Et tu peux les voir. Parce que je veux en compter quatre . Écoutez, j'en ai quatre. C'est le genre d'écart minimum pour les choses. De toute évidence, l' écart minimal est nul. Minimis n'est pas un mot, Dan, la taille suivante va encore augmenter. Nous allons donc y aller : un, deux, trois, quatre, six, c'est une bonne idée. Désolée, huit en est une autre. Les gens en utilisent six. Je vous donne juste les règles générales. Les gens mettent ce qu'ils veulent. Donc, vous en verrez souvent six. Je vais m'en tenir à cette grille à huit. Comment puis-je le savoir ? Au lieu de compter les pixels, vous pouvez faire plusieurs choses. Si vous l'avez sélectionnée, par exemple, maintenez la touche Option d'un Mac Oh enfoncée sur un PC et promenez-vous Vous pouvez voir que cela vous fait la différence entre tous ces gars. Huit, tu l'as fait. Ou tu peux le faire. Vous pouvez dire que vous commencez par là, puis je veux que cette exposition soit prolongée de plus de 16. Je voulais passer à 16 ans parce que c'est de l'autre côté pour voir ces écarts. Ici, voulons-nous un écart de 24 ? Il nous en faut probablement un entre les deux. Ce que je vais faire, c'est qu' au lieu de faire plus 16, qu'est-ce que j'ai fait plus 16 ? Je l'ai fait. Je voulais une taille différente ici. Ce que je vais faire, c'est annuler ça. Retournez, s'il vous plaît. Je vais faire plus huit plus quatre. Cela rend la messe difficile. Cela fonctionne sur mon cerveau. Je ne veux donc pas passer les 16 ans au complet. Je veux juste en avoir 12. Je vais opter pour plus 12. C'est une taille plus raisonnable. C'est toujours divisible, il y en a huit, en quelque sorte, tu comprends OK ? Et puis celui-ci pourrait avoir la taille de 16. Nous allons donc obtenir plus 16. Vous pouvez continuer à augmenter les tailles, mais je les aime bien. C'est une bonne référence à avoir sur chaque document. Copiez-le ou collez-le pour pouvoir commencer à le faire. Vous voyez cette lacune ici ? Qu'est-ce que ça devrait être ? Sûrement celui-là. Non, peut-être celui-ci. Peut-être que les écarts entre cela seraient aussi intéressants que cela. Vous voyez qu'il ne s'agit que d'une référence visuelle ? Cela ne fonctionne peut-être que dans ma tête. Une chose que je veux faire, cependant, c'est que je ne sais pas ce que c'est. Je dois cliquer dessus. Il est écrit 32. Ce n'est pas difficile. Je vais vous montrer un plugin d'appel. Je vais aller dans mon panneau Actions. Passons aux plugins. Il y a celui-ci qui s'appelle Design Doc. Ils le renomment actuellement Spectral. Je pense qu'ils l'ont renommé Spectral, tout le monde ne l'a pas trouvé, alors ils sont retournés à Design Doc. Cela pourrait être appelé différemment. Au moment où vous arrivez ici, il y en a beaucoup qui le font. Ce n'est pas seulement l'un d' entre eux. C'est celui que j'aime bien. C'est le meilleur ? Je n'en ai aucune idée. Je ne m'en sers que de ça. En fait, il y en a une appelée dimension, des annotations. Il y en a quelques autres. Vous pouvez simplement saisir des mesures et voir ce que vous obtenez. Si celui-ci n'est plus disponible. C'est comme le baiser de la mort si je les ajoute à un cours. Dès que je fais un plugin, celui qui l'a créé meurt ou arrête au moins de le mettre à jour. Exécutons celui-ci. J'aime bien cette mesure. Il y a plein d'autres choses intéressantes que nous faisons. Mais jetons un coup d'œil à celui-ci. Je vais y aller . Je dois dire que j'aimerais que vous mettiez la hauteur juste au-dessus. Voilà. Ce n'est pas temporaire. Il est là pour de bon. Vous pouvez le voir dans mon panneau d'annonces. Il y a ce contenant qui contient mes mensurations. Je peux allumer et éteindre. C'est vraiment pratique. Pareil celui-ci, allons-y, il vous faut. L'un des meilleurs également. Vous aussi, s'il vous plaît, top. C'est juste une bonne façon plus propre de voir les tailles que vous avez. Il va probablement falloir quelques tailles plus grandes. Vous pouvez également combler les écarts entre les éléments. Je peux dire « vous » et « vous ». Faisons l'espace entre les deux. Oh, quand je l'ai fait en bas, c'est tellement intelligent. OK, j'aime les petites applications comme celle-ci. C' est très utile. Maintenant, j'ai oublié celui-ci. Vous pouvez avoir cette copie et la coller dans le nouveau document chaque fois que vous en créez un , et vous aurez alors un petit indice visuel de l'endroit où tout va se trouver. Ce que j'aime dans cette application, c'est que j' aime la mettre dedans pour créer tout cela. C'est assez désordonné. Est-ce que c'est désordonné ? Je ne sais pas Je vais le mettre dans un cadre, et je vais mettre celui-ci qui va être appelé, tout n'est pas entré. Le conteneur ne voulait vraiment pas entrer. Je pense que c'est parce qu'il est verrouillé. Je peux le faire glisser dedans. Vas-y, mon pote. Je suis Debass. Je vais transporter cet espacement. Juste pour pouvoir le fermer et c'est un peu plus beau, pour pouvoir le fermer Oh, c'est bizarre. Tout est là. Je ne peux pas le sélectionner parce qu' il est verrouillé, et je ne peux pas le faire. Bonjour. Je suis désolée pour ça. Très bien, assombrissons l'arrière-plan de l'espacement, car il semble étrange et blanc Parce que je l' ai conçu. Passons au noir. Contraste vraiment élevé. Maintenant, c'est cette appli. Nous y reviendrons plus tard. Je veux te le montrer parce que je ne sais pas, je ne peux pas m'en empêcher. J'adore cette application de mesure. Oh non, nous le ferons plus tard dans le stand de cours. Ne le faites pas maintenant. C'est bon. Ce sont les espacements de base. Tu peux utiliser ce que tu veux. Quoi que vous fassiez, créez une petite grille. Faites l'effort une fois et vous pourrez l' utiliser encore et encore. C'est bon. Vidéo suivante. 22. Quel espacement utiliser pour la conception de sites web et d'applications dans Figma: Bonjour, tout le monde. Parlons un tout petit peu plus de ce que devrait être l'espacement Je vous ai donné des informations génériques dans le dernier. D'où m'est venue cette magie ? Comment pouvez-vous vous améliorer dans ce domaine ? Si vous êtes déjà, vous savez, assez compétent en matière d' espacement, vous pouvez passer à Mais si vous voulez un peu d' aide, je ne sais pas, pour vous assurer que les choses sont cohérentes et faciles à utiliser avec votre développeur lorsque vous lui transmettez votre application, sans poser de problèmes, ou du moins en faisant attention au développeur et à ce avec quoi il va fonctionner. Regardez, oh, il y a de nombreux endroits où votre application ou votre site Web va se retrouver, et ce qui votre application ou votre site Web va se retrouver, va se terminer ce qui se passe, c'est que votre ingénieur, votre développeur, la personne que vous avez utilisée pour le créer, c'est peut-être vous. Il est fort probable qu'il soit construit sur ce que l' on appelle un framework. Votre développeuse, elle ne va pas se de mettre des nuls et des nuls. OK ? Ils vont construire sur le dessus des choses, ils auraient construit sur le dessus des choses, ils vont construire sur le dessus. Si vous êtes un développeur IOS, d'accord, le développeur utilisera la version prédéfinie ou du moins les directives d'Apple. Si c'est Android, ce sera ce matériel. C'est ce qu'ils appellent leur système de conception, et ils vous donnent de nombreuses utiles sur la façon dont les choses doivent être espacées Si vous allez sur le Web, c'est peut-être Bootstrap, c'est peut-être Tailwind Alors, parlez à votre développeur, déterminez où cela va, sur quoi il le construit, puis lisez un peu. Cela peut prêter à confusion. Nous devons nous lancer dans ce genre de choses afin que vous puissiez réellement, je ne sais pas, commencer à comprendre peut-être un peu de CSS, un peu de code, afin de ne pas imposer un espacement de sept à votre développeur parce que sept est difficile parce que vous ne pouvez pas le diviser en deux OK, tu ne peux pas avoir un demi-pixel. Vous pouvez diviser huit en deux. Vous pouvez avoir quatre pixels. aussi pourquoi huit c'est bien. Alors regardons le matériel pour Android, d'accord ? Dans le point matériel IO. Ils en sont à leur troisième version. À l'avenir, vous en serez peut-être à la version quatre ou cinq. Jetez-y un œil. Je suis sous fondations. Je regarde la mise en page, je comprends fort. Et c'est vraiment agréable de lire et de dire que l'espace entre les colonnes est par défaut de 24 DP, ce qui correspond essentiellement à des pixels. Abréviation de pixels indépendants de l'appareil. Ils l'utilisent parce que de nombreux téléphones ont des densités de pixels différentes Considère ça comme des pixels si tu comprends cela. Et lorsque vous concevez Figma, DP est égal à Px. Ils utilisent un espacement de 24. Assurez-vous donc que lorsque vous créez votre petit bloc d'espacement et que vous passerez d' abord à Android, faites en sorte que votre écart soit de 24 C'est la valeur par défaut. Il est heureusement divisible par huit Pas par hasard. Mais au moins c'est un espacement très courant pour le moment Jetons un coup d'œil à IOS. Lisez ce qu'ils font. Je pense qu'ils en utilisent 20 pour leurs marges. Ils ont des valeurs par défaut différentes de celles de beaucoup d'autres. Et le truc avec iOS, c'est qu'il y a à la fois un téléphone, une télévision et des gadgets, d'accord ? Il y a des montres. Alors jetez un petit coup d'œil. Quelle que soit la raison pour laquelle vous concevez, la documentation sera disponible en ligne. Vous allez sur le Web, donc vous créez un site Web ou une application Web, découvrez s'il s'agit de Wordpress ? Wordpress utilise-t-il Bootstrap ? Bootstrap est un framework qui aide les développeurs à travailler rapidement. OK ? Et ce qu'ils finiront par faire, c'est jeter un coup d'œil. J'ai trouvé ça, d'accord ? Les gouttières, c'est comme ça qu'ils l'appellent OK, l'espace entre les objets et les gouttières par défaut est de 1,5 RM, et vous pouvez voir qu'ils indiquent 24 pixels, comme le matériau Donc, si j'utilise 24 comme espacement, le développeur l' appréciera parce que c'est un peu cohérent avec bootstrap et avec Android selon l' endroit où vous allez Aujourd'hui, il existe 100 frameworks différents. Tailwinds, les gens l'utilisent beaucoup, d' accord, pour les aider à se coiffer Vous pouvez le voir ici, j'ai trouvé que selon PCGR, Bootstrap l'appelle gouttière, Tailwind Tout cela est utile à connaître en tant que concepteur d'interface utilisateur. Vous pouvez voir ici que ce qu'un développeur saisira, c'est qu'il ne saisira pas réellement le numéro. J'espère qu'ils seront proches de l'un d'entre eux. Ils vont donc mettre de l'espacement lorsqu'ils codent pour dire que l' écart est nul, ce qui est zéro Le GAP est un, soit 0,25 du REM. Par défaut, un REM est 16. Ainsi, 0,25 sur 16 correspond à quatre pixels. Peut-être que le petit espacement que nous avions auparavant est le minimum ici, et c'est une bonne règle de ne pas en faire trois Vous savez, les divisions deviennent délicates et votre développeur va devoir remplacer de nombreuses valeurs par défaut du framework Vous pouvez le faire, mais votre développeur l' ignorera probablement et utilisera certaines des valeurs par défaut à moins que vous ne les forciez OK ? Allons y jeter un œil. Donc 16, six, huit, dix, oh, il y en a dix. Vous pourriez décider que dans votre design vous avez besoin d'un dix. C'était où ? Nous n'en avons pas dix. Nous en avons quatre, six, huit, 12. Il n'y a pas vraiment de règles strictes sur ce que cela peut être. Mais si vous concevez quatre frameworks ou si vous les comprenez un peu, surtout si vous savez où ils vont, si vous savez que le développeur utilise Tailwind, . Tapez tout cela. Donc, le gros point à retenir est que les multiples de huit sont bons, mais en fait, vous devriez vérifier comment cela est fabriqué et le copier Cela facilitera considérablement la transition entre Figma le design et le développement proprement dits. n'est pas obligatoire, mais j'ai aussi un site Web Essentials, qui couvre de nombreux sujets que nous examinons ici, comme qu'est-ce qu'un REM ? Qu'est-ce qu'un DP ? Qu'est-ce que Bootstrap ? Qu'est-ce que Flexbox ? Il y a toutes sortes de bonnes choses que vous pouvez apprendre qui éclaireront votre design lorsque vous serez dans Figma Mais cela sort un peu du cadre de ce cours, mais un peu de connaissance du HTML, du CSS et du framework font de vous un meilleur concepteur d'expérience utilisateur, à mon avis. C'est bon. Est-ce que c'était confus ? Un peu sinueux. Quoi qu'il en soit, passons à quelques compétences plus techniques, Figma 23. Projet de cours 04 - Navigation inférieure réactive: C'est l' heure des projets de classe. Nous allons passer à la navigation Low. Nous l'avons déjà fait si vous nous avez suivi. Je veux juste que tout le monde vienne ici. Donc ce que je veux que tu fasses, c'est créer le Low Nav, d'accord ? C'est ce type ici, d'accord ? Et je veux qu'il fasse certaines choses, d'accord ? Et nous allons simplement mettre en pratique les choses que nous avons déjà apprises. Je veux donc m'assurer que vous utilisez des composants, à la fois les icônes, o et Nav. Qu'est-ce que cela signifie ? D'accord ? Ce truc est un exemple de mon composant principal, qui se trouve ici. Pour le faire. Ce sont les principaux composants de mes icônes. Assurez-vous de le faire juste pour vous entraîner. Vous devez utiliser une mise en page automatique pour votre navigation afin de pouvoir effectuer un espacement automatique entre Cela signifie simplement que lorsque je le saisis, s'écrase et les icônes ont un espacement automatique qui entre et sort Sortez automatiquement l' extérieur et assurez-vous que vous pouvez configurer l' Auto entre eux. Le dernier point concerne les contraintes. Les contraintes nous permettent de le faire avec une navigation. Je veux que vous le colliez en bas, à gauche et à droite sorte que lorsque nous choisirons une nouvelle page, nous passerons à celle-ci, pas à une nouvelle page, mais disons que nous devons utiliser une taille de cadre différente parce que c' est le cas, je ne sais pas. iPhone 13. Regarde, il a rétréci Il n'y a pas une grande différence. C'était passionnant, mais vous pouvez voir qu'il se fixe sur le bas et sur les côtés. C'est la partie des contraintes. Fais tout ça. Ensuite, je veux que vous enregistriez une vidéo de vous faisant ce truc comme ça sur l'une de vos pages afin que nous puissions voir si vous l'avez fait fonctionner. Si vous ne pouvez pas enregistrer de vidéos parce que c'est trop difficile et que vous ne pouvez pas y arriver, j'accepterai les captures d'écran, je vous ferai confiance que cela fonctionne. Peut-être en faire une capture d'écran. De plus, nous pouvons voir tout ce qui se passe ici et nous nous disons : « Je peux voir les contraintes, « Je peux voir les contraintes j'adore regarder des vidéos mais si vous ne savez pas comment prendre une vidéo sur votre ordinateur ». La plupart des Mac et PC ont un logiciel intégré, Mac appelle capture d'image Tu peux te débrouiller avec ça. J'utilise Camtasia Vous pouvez utiliser QuickTime, qui est gratuit sur Mac et PC. Il existe des plugins intéressants à l'intérieur de Figma. Vous pouvez accéder aux plugins. Celui que j'ai utilisé auparavant est VMeovMovmo record qui vous permettra de vous connecter et vous devrez obtenir un compte gratuit avec eux, mais vous pourrez enregistrer votre écran Il y aura également d'autres plug-ins. Lorsque vous la mettez en ligne, nous voulons le lien vers la vidéo, et non la vidéo elle-même. Nous ne pouvons pas prendre les gros joueurs à quatre, mettre en ligne sur Vimeo, Bee Hunts ou YouTube avec des comptes gratuits, et simplement envoyer le lien C'est bon. Le véritable objectif ici n'est pas tant de créer des vidéos, mais de faire fonctionner ce Lower Nav réactif. Je veux que tu t'entraînes avec ça et je te verrai dans la prochaine vidéo. 24. Projet de cours 05 - Contraintes de la carte d'événements: Un autre projet de classe. Ne venons-nous pas de faire un projet de classe ? Nous l'avons fait Celui-ci est un peu comme un chemin de ramassage. Fais-le toi-même. Je vais vous demander de créer une carte d'événement réactive. Cela se fait tout seul. Je veux que tu crées ce truc, tout est réactif et bon. Les dates sont donc inscrites dans un coin, un bout de texte et une image. Oh. Je vais juste te laisser faire. Découvrez que ces petits projets sont parmi les meilleurs pour les personnes qui apprennent lorsque vous disposez de tous les outils nécessaires. Je t'ai appris tout ce que tu dois savoir, mais créer quelque chose de toi-même, qui ne suit pas le cours, peut être à la fois délicat et demander toutes les compétences nécessaires, oh, d'accord. Parce qu'il existe plusieurs façons de résoudre ce problème. Parce que c'est le cas et que cela peut être difficile, en fonction de votre niveau de compétences en Figma, il y a une vidéo juste après celle-ci où je la construis Donc, si tu te perds, tu peux aller droit au but et me voir le construire. Mais fais-le toi-même, puis vois où tu en es. C'est un défi. Je te lance un défi. Regarde si tu peux le faire. Votre façon de faire peut être différente de la mienne. Tu pourrais te perdre. C'est totalement cool. Mais je parie que tu es une ville lunaire. Lorsque vous avez terminé, partagez une vidéo illustrant votre réactivité. D'accord ? Ce site de droite est là parce que je veux le texte s'étende et se contracte, d'accord, en agrandissant la boîte. Il n'est pas nécessaire que ce soit exactement comme ça , choisis ta propre image. Encore une fois, j'essaie de trouver des photos de moi. moyen âge est probablement trop vieux pour moi, mais je ne suis pas ce type non plus. Le texte et tout le reste ne me dérangent pas. C'est plutôt une question de structure. Il y a une image là-dedans, une boîte de date collée en haut à droite. Ce sont peut-être des contraintes. Détails de l'événement. Assurez-vous qu'il s'agit d'un composant , puis des livrables, d'une vidéo que vous ne pouvez pas faire pour les vidéos. Une capture d'écran C'est une page sympa où vous pouvez partager sur les réseaux sociaux, assurez-vous d'utiliser le hashtag Figma Advanced et de m' y taguer, pour que je puisse y jeter un œil C'est ça. Amusez-vous à créer votre propre carte d'événement. Voir dans la vidéo suivante. 25. Projet de cours 05 - Terminé: Bonjour. Cette vidéo est ma version de la façon dont j'ai fait fonctionner ce truc. Vous pouvez suivre pour voir à quel point le vôtre était proche du mien. Peu importe comment vous êtes arrivé au résultat final. Mais si tu es restée bloquée, tu l'es toujours actuellement, tu peux me regarder. Nous nous perdons un peu dans cette vidéo. Il y a quelques petits raccourcis. Donc, même si vous l'avez trouvé et que c'était assez facile, parcourez celui-ci, augmentez assez facile, parcourez celui-ci, peut-être la vitesse et il y a des pépites là-dedans C'est ce que je veux dire. D'accord, n'y a donc pas vraiment de règle par où commencer, et il y a plusieurs façons de procéder. Je vais montrer ce que j'ai fait. Lorsque je le fais avec des élèves en classe, les gens trouvent d'autres moyens de le faire. Ne vous inquiétez donc pas si le vôtre est un peu différent. Je vais commencer par mon cadre supérieur, l' image avec la date, et je travaillerai sur le texte plus tard. Je vais donc le remplir juste pour que nous puissions voir ce que nous faisons. Choisissez n'importe quelle couleur, à condition que ce soit vert ou aqua. Donc, ce que je veux faire, c'est mettre un autre cadre dedans, choisir une autre couleur. Quelque chose de clair et je dois dire que vous y allez et que dans ce cadre, je tiens à dire que vous devez simplement être limité en haut et à droite Maintenant, j'espère que nous y sommes parvenus. C'est la première partie, partie inférieure, comment s'y prendre ? Maintenant, vous ne voulez pas vraiment le mettre ici, voulez qu'il soit dans une boîte séparée parce qu'il doit faire quelque chose de différent. Je vais fabriquer une nouvelle boîte. Je vais dire que c'est une couleur foncée sans aucune raison. Je vais y mettre du texte , y ajouter les éléments. Très bien, je ne fais qu' envoyer un texto. Il y a deux choses que je dois faire, c'est que j'ai besoin de ce produit à la bonne taille. C'est la première bonne étape. Je veux que ce texte entre par ici. Je tiens à dire que vous n' êtes pas ce genre de largeur automatique ou de taille fixe, je veux cette hauteur automatique du milieu , puis je vais la casser pour que vous y alliez. Parfait. Mais quand je le redimensionne , rien ne se passe parce que ce type a besoin de sortir automatiquement OK, donc je vais dire Shift A. Il est enveloppé tout autour de l'extérieur. Parfait. Nous avons maintenant un petit texte réactif en cours. Cela ne fonctionne pas. Le texte qu'il contient actuellement est la hauteur automatique, mais nous avons besoin que la largeur change en fonction de son parent ou du conteneur. Regardons la largeur. Il a une largeur fixe. Je ne veux pas me concentrer sur la largeur. Je tiens à dire que j'aimerais vous remplissiez le contenant, s'il vous plaît. Maintenant, si le contenant change, il essaie de le remplir. Va. Alors, quels sont ces deux éléments, et vous pourriez les séparer, mais ce serait bizarre. Nous voulons donc maintenant les assembler dans leur propre cadre. Je dois dire que les deux ont été sélectionnés pour encadrer ces gars-là. OK. Donnons-lui un nom pour ne pas trop nous perdre. Eh bien, en fait, voyons dans quelle mesure le nommage automatique fonctionne bien. Alors allons-y. Passons au renommage. Voilà, renommez les couches Il suffit de voir ce qu'il fait. Ça va de mieux en mieux. Je parie que c'est un contenant. Pied de page. Oh, c'est bien fait. Récipient. Appelons cela une image. On pensait que c'était l'image, mais ce n'est pas le cas. C'est la date. Ça s'est rapproché. C'est un bon point de départ en tout cas. Oh, je l'aime bien. J'ai un contenant dedans. J'ai reçu les deux boîtes que j'ai fabriquées. Jetons un coup d'œil et continuons à tester à chaque fois. Appelez le parent, est-ce que tout fonctionne ? Ce n'est pas le cas. Pourquoi ? C'est parce que ce n'est pas une sortie automatique. Ce conteneur, sortie audio, s' il vous plaît. Essayons-le. Voyons ce qu'il a fait. Nous le construisons nous-mêmes. Nous n'utilisons pas la fonctionnalité d'intelligence artificielle « make do it all for us ». Cela fonctionne. Sauf que le bas ne monte pas et ne descend pas. Ce que je veux faire, c'est probablement laisser cette zone d'image seule ici. Je veux juste la zone de texte en bas. Descends. Ce que je vais faire, c'est que tu dois faire quoi ? Vous devez remplir le récipient. Donc, cette fois, c'est la hauteur, la largeur que nous avons choisie, mais nous n'avons pas emprunté la hauteur. Maintenant, nous ne voulons pas que tu t'embrasses, pas de câlins ici, mon pote. Nous allons remplir le contenant et je veux que vous le remplissiez, mais je veux que vous vous en teniez au sommet, s'il vous plaît. Regarde le parent. Que faisons-nous ici ? Cela a fonctionné. Oh, ajoutons plus de détails et voyons si nous le cassons. OK ? Mais c'est en quelque sorte l'essentiel. Ce que les gens ont tendance à faire, et je le fais. Il n'y a pas de façon vraiment difficile de le faire, c'est de commencer par le parent, puis de commencer à travailler avec ces blocs intermédiaires, puis de mettre un autre bloc ici pour la date. Tu peux le faire de cette façon. C'est un peu plus compliqué quand on est nouveau. Si vous abordez les choses de cette façon et que vous trouvez cela vraiment frustrant, essayez d' abord de créer les pièces individuelles , puis de les combiner. Mais peu importe si vous essayez d'abord de construire le cadre du conteneur puis de commencer à construire des objets à l'intérieur. C'est un peu plus compliqué. Bien, je veux que ce soit une image. Je ne peux donc pas simplement mettre une image ici parce que c'est exagéré Je vais donc passer à Command Shift K pour importer mon image, Control Shift C PC. Tu sais, je sais que tu sais. Je vais apporter ça . Ce que je veux faire, c'est prendre le cadre. En fait, j' aurais pu sélectionner le cadre et l'apporter en guise de remplissage. Je l'ai fait d'une manière différente. Donc ce que je vais faire, c'est prendre celui-ci, voler le remplissage, copier, prendre le vert , appuyer sur Coller. Je n'ai plus besoin de ce vert. Et j'espère que vous vous souvenez du test test, qui fonctionne toujours ? Cela fonctionne. Cool. Sympa. Ensuite, il y a ce texte en bas. Je vais juste le remplacer par Command K. Je vais dire de le réécrire et de taper quelque chose avec un rythme plus rythmé par une chanson chantée Je sais ce que c'est. Allons-y quatre. C'est bon. Je ne suis pas sûr de ce que cela va faire. Command Enter pour que l'IA le fasse. Parfois, maintenant, il faut faire plus court. Je dois apporter des modifications. Je pense que c'est assez long. Allons faire plus court car je vais utiliser une police plus petite. Si vous n'avez pas l'IA et que vous souhaiteriez l'avoir, vous pouvez simplement accéder au Chachi BTK gratuit ou simplement taper ce que vous voulez Très bien, taille de police, je vais passer à 16. Tu peux partir maintenant. Je ne sais pas. Si je dois rencontrer des problèmes, je le ferai peut-être. Une chose s'est produite là-bas, c'est que vous avez remarqué qu' il n'y avait pas de rembourrage ai donc agrandi, mais cela ne s'est pas agrandi. Cela fonctionne toujours. Écoutez, tout est évolutif, mais oui, je ne l'ai pas poussé vers le bas. Qui sait pourquoi ? Deux ou trois choses. Tout d'abord, je veux faire en sorte que ce gars prenne automatiquement la hauteur. Et aussi son parent, le cadre parent fonctionne, le rembourrage est vraiment petit Je dois dire qu' ici, dans le rembourrage, 24, c'est super sur les côtés Je veux que le haut et le bas soient différents. Je vais vous donner un petit raccourci pour tous ceux qui sont restés si longtemps ensemble. Donc en haut, disons que je veux qu'il y en ait 24. Mais ensuite tu peux mettre un peu de Cameron, Cameron le clavier. C'est le top. Si vous mettez un Cameron, vous serez en mesure de faire le fond jusqu'à 32. Cela a en quelque sorte fonctionné à 100 %. J'en ai 24 au sommet, 32. OK, mais mon message ici ne fait pas ce qu'il devrait, à la taille de ce type. La taille de ce type. Tu es rassasiée. Remplissage de la paire et du contenant. Ma paire et mes contenants ne sont pas assez grands pour le texte. Allez, Dan. Donc, cette astuce a fonctionné. Tu peux voir ? J'en ai 32 en bas, 24 en haut. Vous pouvez faire de même pour la gauche et la droite. Vous pouvez simplement ajouter des virgules Cela vous évite simplement de ne pas faire grand-chose en ouvrant cette voie. Vous pouvez simplement utiliser des virgules. Tu es un hacker informatique. Tu es le bienvenu. D' accord, d'autres choses vont me poser des problèmes c'est que je veux que cette hauteur soit un peu comme ça au moment où j'en tape deux . Est-ce que c'est ce qu'il fait ? Ça ne l'est pas. Et c'est uniquement parce que je n'arrête pas le traîner pour prouver qu'il fonctionne Je veux que cet héritier tombe au bas de l'échelle. Donc, en termes de hauteur, il y a plusieurs choses à faire. Vous voyez, il est dit remplir le contenant, donc c'est ce qu'il devrait faire. Mais ce parent, là où je vais, clique sur « off », « c » sur. Ce parent a une taille fixe. Il mesure 330. Il l'oblige à l'agrandir. Je peux donc dire qu'en fait, je veux juste étreindre le contenu. En fait, tu as une taille maintenant donc je veux que tu embrasses le contenu aussi. Ça peut être un peu bizarre de tenir ces choses debout. Alors maintenant, ce que je recherche, c'est ça. Quand je tape des choses, que je tape des choses, et que ça devient plus long, ça grossit. Génial. Si je vais chercher le parent maintenant et qu'il figure sur un document plus grand, je peux simplement le faire glisser. Regardez-moi. À quelle distance des bords ? Ce que je pourrais faire, c'est allumer mon guide. Allons voir le parent. Passons ici, Guides de mise en page. Nous l'avons fait dans le cadre d'un cours essentiel, revenons-y encore une fois. Ajouter un guide de mise en page. Je ne veux pas de réseaux. Je veux des colonnes. Je vais cliquer dessus et combien de colonnes est-ce que je veux ? J'en veux juste un, mais je veux que les marges sur les bords soient de 16 ou 24. Vous pouvez voir les bords ici. Vous pourriez simplement l'utiliser pour cela, juste pour que tout commence à s'aligner. Tu es Snap. Sympa. Le raccourci pour les guides est Shift G, qui les active et les désactive. OK ? Et nous l'avons fait. Nécessite des coins arrondis. Parent, vous allez dire ou avez-vous eu les coins arrondis. Coins arrondis. Huit ? Non, 16 ans ? Quelque chose comme ça. Oh, ça n'a pas marché. Pourquoi n' avez-vous pas 16 angles de rayon ? Veuillez patienter. Je peux m'en sortir. Quel est votre rayon d'action ? Oh, je pense que je sais ce que c'est. Revenons-y, afin que je puisse vous prouver que je l'ai fait. Allons découper le contenu. Oh, il y en avait une bonne. Je ne sais pas comment cela n'a pas abouti au contenu du clip. Voilà. OK, alors passons au 16. C'est bien trop gros. J'en ai 12. Même si j'ai dit d'utiliser des multiples de huit, vous pouvez faire ce que vous voulez. C'est le design dix. D'accord, donc c'était une jolie petite question intéressante. Le contenu du clip était incorrect, donc tout est en quelque sorte suspendu à l'extérieur, alors que maintenant je voudrais tout dire à l'intérieur de ce composant principal. Oh, ce n'est pas un composant principal. Tu vas venir ici. Je vais vous transformer en composant principal, dont je ne me souviens pas du raccourci pour le moment. Oh, tu es quoi ? Oh, c'est vrai. Option de commande K. C'est le contrôle, ancien K sur un PC. Parfois, nous oublions tous. C' est donc mon composant principal, et je vais m'en servir. Et ce type doit être supprimé, tu dois aller sur la page de mes composants. Tu peux traîner ici. OK, tu peux y aller, tu peux y aller. Oup. Nous l'avons fait. Ah, c'est très excitant. Tu peux t'en aller maintenant. Très bien, je suis très content de moi. Vous avez peut-être fait d'une manière complètement différente. Vous avez peut-être passé une demi-journée à travailler sur le vôtre, mais vous comprenez un peu maintenant Je crois que j'aime bien ces petits exercices. Ils ressemblent à quelque chose. Oh, tu n'as pas fait le rendez-vous. Devrions-nous fixer la date ? En fait, il n'y a rien à ce jour. Vous n'avez qu'à insérer le texte. Un, deux, trois. Très bien, il suffit de taper du texte. Je vais le mettre ici, mais tu n'es pas allée au bon endroit. Allez-y. Et je vais sélectionner March et passer à Command B ou Control B pour le mettre en gras. Nous. Le texte fonctionne toujours. Crochet ok. Cela ne fonctionne pas. Ce n'est pas le bon. Vous êtes donc en dehors de tout cela. Ah, pourquoi n'ai-je pas pu faire ça ? C'est parce que j'essaie aussi d'ajouter du texte, c'est quoi ? Une pause ? Tu crois ? Il s'agit d'une instance du composant principal, pas du composant lui-même. C'est un bon conseil, c'est qu' en fait, vous ne pouvez pas ajouter de choses aux instances. Tu dois aller ici et dire, collez-le dedans. Maintenant, il devrait apparaître sur chacun d'entre eux. Correct. Le téléphone portable et le texto sont là. Le seul problème maintenant, c'est que je l'ai fait en rose, et celui-ci est vert. Ce que je peux faire pour cela, c'est que j'ai pu le faire sur l'instance, modifiant les coins arrondis et en la rendant verte. Ce que vous pouvez faire, c'est sélectionner l'instance entière, cliquer dessus avec le bouton droit de la souris et dire , en fait, tout ce que j'ai changé pouvez-vous accéder au composant principal y appliquer ces modifications, et y appliquer ces modifications, et allons voir notre composant. Je l'ai fait. Regardez-nous. Pourquoi ne pouvons-nous pas simplement tout saisir et passer à cette option que nous avons examinée auparavant ? Vous souvenez-vous de la version AI où nous disions « passez à A », « Passons à plus d'options A. » Allons le suggérer, mais cela n'a pas fonctionné. C'est pourquoi. Cela peut parfois fonctionner, et lorsqu'il n'est pas nécessaire de connaître les compétences nécessaires pour réussir Mais j'aime la capacité de résoudre des problèmes en faisant quelque chose comme ça J'ai l'impression d'avoir créé quelque chose au monde. Même si c'est le cas, juste de petits pixels ajustables. bon, c'est ça. C'est comme ça que je l'ai fait. J'aimerais connaître les commentaires, comment vous l'avez fait. Est-ce que quelque chose était complètement différent ? Est-ce que tout le monde l'a fait différemment de moi ? C'est ce que j'aimerais voir. Donne-moi aussi une heure. Combien de temps cela vous a-t-il pris ? Cela vous a-t-il pris 10 minutes ? 5 minutes. 5 heures. Allons y jeter un œil. C'est bon ? Je suis juste intéressé. Je le verrai quand je serai là. Je vais dormir. 26. Comment réaliser une variante simple dans Figma: Bonjour à tous. Nous allons créer une variante très simple. OK ? Vous en avez peut-être déjà fait un. J'allais le parcourir juste pour que tout le monde ait une bonne base de référence. OK ? Cela signifie, tout d'abord, si vous n'êtes pas tombé sur une variante ou si cela fait longtemps que vous n'avez pas obtenu les scores essentiels, sur ce bouton, d' accord, ici, vous pouvez dire, en fait, je veux être Ce qui est vraiment cool, c'est dans, disons, mon panneau d'actifs, d'accord, voyez, je n'ai qu'un seul bouton. Mais dans ce bouton, d'accord, il a deux variantes. OK ? Gardez-le bien rangé, et cela nous donnera les compétences nécessaires pour créer des variantes multidimensionnelles lors de la prochaine édition Très sérieux. Très bien, allons-y. Faisons une variante. C'est bon. Je vais donc commencer par un bouton que j'ai créé. Je vais créer ce bouton à la fin de la vidéo si cela vous intéresse, mais n'importe quel ancien bouton. Il n'y a rien d'autre qu'un cadre mais du texte dedans. C'est une sortie automatique. Rien de tout cela n'est réellement important pour une variante. ne nous reste plus qu'à nous assurer qu'il s'agit d'un composant. Faisons-le. Command, Option K Automac, Command K sur un PC, vous l'aurez compris Ou vous pouvez cliquer sur le bouton ci-dessus. Bosh. OK. Ce que nous allons faire, c'est dire, en fait, que j'aimerais en avoir une autre variante. Voir cette petite option ici indique que j'en veux deux. J'ai une variante. Ce sont deux similaires, donc techniquement, il s'agit d'une variante, mais changeons la couleur de celle du bas. Je vais cliquer sur le cadre parent. Je vais dire, faites défiler la page vers le bas, remplissez la couleur. Je vais choisir la couleur de pastèque que nous utilisons. Maintenant une variante. Nous devons y aller et lui donner un nom, mais c'est tout. Allons y jeter un œil. C'est ce que nous devrions faire, je vais le supprimer. Je vais aller sur la page de mes composants. Tu devrais être là, mon pote. Faisons les choses correctement. C'est ce qu'on appelle un ensemble de composants. Observez la ligne pointillée autour de l'extérieur. Figman appelle un ensemble de composants. Ne t'inquiète pas pour ça, mais ça va apparaître . Il y a un composant. Mettez-y plusieurs d'entre eux, c' est-à-dire ses variantes dans ce qu'on appelle un ensemble de composants. Beaucoup de termes. Ça va. Passons à notre mobile Hi Fi. Passons à notre panneau Ressources. raccourci que nous allons commencer à utiliser à partir de maintenant est si vous maintenez l'option KemackOPC enfoncée et qu'un sur deux, un sur deux, un sur deux est facile à accéder du fichier aux actifs. C'est quoi ? Option 1 et 2, 1 et 2 ou Alt dans le panneau Actifs, examinons les fichiers de cette bibliothèque. Passons à ceux de notre panneau de composants. Excellente. Voici notre bouton. Faites-le sortir. Ce qui est bien avec lui, c'est qu'il a une variante ici Par défaut ? Non, pas l'autre. Oh. Cool. Les variantes sont géniales. Ce que nous devons faire maintenant, c'est revenir à notre option ou à la touche Alt, à nos couches. Fichiers. Je vais passer à mes composants, et je vais dire. Faisons un peu de dénomination. Sélectionnons l'ensemble. Comment ça s'appelle ? Tu te souviens de la signification des lignes pointillées ? Ensemble de composants. Tu l'as. Avec les propriétés sélectionnées ici, j'ai un tas de propriétés que je peux renommer Il s'agit simplement de leur donner des informations par défaut. Cliquez sur ce petit paramètre en tant que propriété d'édition. C'est ce que c'est. Cliquez dessus et nommons-le, celui-ci s'appellera. Bouton I. J'ai quelques valeurs. OK, retournez-y. J'ai quelques valeurs. En fait, le nom de ce n'est pas un bouton, c'est une couleur. OK ? Nous nommons donc notre variante, pas le nom du bouton lui-même. Nous l'avons déjà fait. Je veux appeler cette variante, différentes variantes de couleurs. Oh, continue de sauter dessus. Là où il est indiqué par défaut, je veux que l'un soit, disons, vert, et l' autre soit le melon Ater. Rien ne change vraiment sauf quand je suis de retour sur mon mobile Hi-Fi, je clique dessus. C'est un peu logique. Regarde, j'ai de la couleur. OK. Et j' ai du vert ou de la pastèque Cela facilite la tâche pour quelqu'un d'autre qui l'utilise et pour vous. Allez, nommons les choses. Mr. Untitled 57 ou dans ce cas, frame 57. Dan aime jeter de l'ombre sur les gens, même s'il a des choses vraiment mal nommées lorsqu' il travaille seul. Ne m'en dis pas une. Très bien, voici comment créer des variantes vraiment simples de Figma Créons le bouton maintenant si cela vous intéresse. Si vous savez comment créer un bouton, ce que vous faites probablement, passez à la vidéo suivante, mais je vais le créer ensemble. Allons traîner ensemble. Très bien, nous allons tout recommencer. Nous allons créer le bouton, mais je viens enregistrer avec le micro éteint. Faisons-le encore une fois. J' adore le faire deux fois. Très bien, passons à l'outil de cadre, dessinons n'importe quelle ancienne taille Donnons-lui la couleur du bouton que nous voulons utiliser. Je vais m'en servir. Nous devrions bientôt commencer à créer un style de couleur. Quelques greens en préparation, Dan. Je vais prendre l'outil F. Non, je vais prendre l'outil Type, qui est le Tiki. Cliquez à l'intérieur n'importe où et tapez simplement le bouton. J'utilise des majuscules et j' utilise un robot en gras condensé Une taille de bouton très courante est 16. On le voit facilement. C'est bon, maintenant je devrais l' aligner au milieu. J'ai appuyé sur Escape pour sortir de l'outil de saisie. Je devrais l' aligner au milieu, mais je peux simplement cliquer sur le cadre parent. J'ai donc ce cadre ici, que j'appellerai bouton à boutons. OK. Une fois cette option sélectionnée, le parent contenant un texte, si je passe simplement à Shift A, je passe en mode Auto Lout et, par défaut, vous pouvez voir que le texte va s'enrouler autour du texte, ce qui est parfait câlins sont parfaits, car cela signifie que nous pouvons taper davantage et que vous voyez le bouton s'agrandir, c'est génial La seule chose, c' est qu'il s'agissait par défaut d' un rembourrage aléatoire basé sur la taille d'origine ce qui est du rembourrage que je veux faire, je vais commencer par la largeur 24, je vais taper sur 8 pour le haut et le bas C'est mon petit bouton ici pour le rayon d'angle. Je peux utiliser ma flèche vers le haut, regarder Si tu veux être parfaitement rond, tu dois juste être au-dessus. Chaque fois que les rayons commencent à diminuer, permettez-moi de zoomer ici. Tu vois ce que je veux dire ? Tu comprends ce que je veux dire, si j'ai atteint les 16, tu dirais que c'est rond. Mais si j'ai atteint le 100, il est très rond et doit être le cercle parfait Il suffit donc de saisir un chiffre géant et il sera arrondi aux extrémités. Je l'ai fait juste au cas où ça t'intéresserait. C'est bon. Je vous verrai dans la prochaine vidéo. 27. Comment réaliser une variante multidimensionnelle dans Figma: Bonjour. Hé, nous allons apprendre dans cette vidéo la variante multidimensionnelle. OK ? Ils sont sophistiqués, principalement parce qu'ils le font avec cette voix, mais ils nous permettent de faire passer les variantes au niveau supérieur, c' mais ils nous permettent de faire passer les variantes est-à-dire les voix. Cela signifie que ce bouton n'a pas qu'une seule variante, comme la couleur, mais aussi des variantes multidimensionnelles C'est un mot fantaisiste. C'est pourquoi ils l'appellent, mais cela signifie simplement que j'ai deux choses différentes. Je peux y aller, je veux être écologique, mais je veux aussi que cela soit décrit. Ce truc ici, d'accord ? C'est un joli petit atout. Vous le voyez là, le bouton Zoom. Tu le traînes dehors, mais il a toutes sortes de trucs. Il a des couleurs différentes et des valeurs différentes. fait d'avoir plus d'une propriété signifie simplement qu'elle est multidimensionnelle pas aussi sophistiquée qu'il y paraît Va juste en construire un. C'est bon. C'est l'heure de partir. C'est bon. Donc, ce que nous allons faire, c'est commencer par la variante simple que nous avons créée dans la dernière vidéo et la développer pour la rendre multidimensionnelle Tout ce que nous avons à faire c'est de deviner quoi ? Il est désormais multidimensionnel. Nous avons une troisième option. Il ne s'agit donc en fait que de trois variantes. Ce que nous voulons faire, c'est changer un peu celui-ci. Donc, ce que je vais faire, c'est passer en mode rapide et je vais juste en faire les grandes lignes. OK, je vais en faire un autre. Pour en créer un autre, vous pouvez soit appuyer sur ce petit bouton plus. Il y a une option là-haut. Non, il y en a un. Non, je suis sûr qu'il y a aussi un bouton là-haut. Donc, soit appuyez sur ce bouton, soit sur Ctrl D. Je ne pense pas que vous puissiez les copier-coller. Non, pour une raison ou une autre, vous ne pouvez pas les copier-coller. Allons-y. Allez, D. Je vais aussi changer de couleur. Tu attends là-bas. Très bien, donc je les ai. Je pourrais simplement les laisser tels quels, et quand je les utiliserai, je pourrais les récupérer et me dire : A, j'ai toutes ces options différentes. Mais ce que je vais faire, c'est le rendre multidimensionnel. Cela signifie que je vais récupérer mon ensemble de composants et je vais dire que j' ai une propriété. Je voudrais en ajouter une autre. Je vais ajouter une autre variante. Celui-ci s'appellera fill. J'essayais juste de me demander comment cela pourrait être appelé et la valeur par défaut serait solide. Ce que nous essayons d'en arriver là c'est que lorsque je sélectionne cela, je vais dire que vous êtes à la fois vert et solide, mon ami . Tu es une pastèque et tu es solide. Vous allez être vert, mais vous allez aussi en ajouter un nouveau, vous allez être esquissé. C'est à la fois la première propriété que nous avons créée et celle-ci est la plus dimensionnelle. Multidimensionnel. Mais il faut dire que c'est multidimensionnel Nous avons de la couleur, nous sommes rassasiés, nous sommes inconditionnels. Celui-ci, tu es quoi ? Tu es la couleur 4. Non, tu es pastèque et tu vas être esquissée Ce que cela signifie maintenant, c'est que lorsque j'appuie sur ce joli bouton simple, n'oubliez pas que dans le panneau Actifs, Alt optionnel , deux, un, deux, changez le panneau Actifs. Voici ce joli petit bouton. Pour Drag him out, il est multidimensionnel. Il a de la couleur et il est rassasié. Je vais dire « pastèque ». Mais je veux le schéma. Allez. J'ai eu peur de faire des variantes multidimensionnelles pendant longtemps. Ça avait l'air effrayant. Multidimensionnel, tout semble difficile. OK ? Mais c'est délicat. J'essaie d'être calme, donne-le. C'est vraiment facile. Mais quand tu le fais pour la première fois, tu te dis : « Cela n'a aucun sens. OK ? Ce que j'ai tendance à faire, c'est un peu comme le détruire jusqu'à ce que tu en aies au moins quatre Ensuite, oubliez d'essayer de faire des choses sophistiquées et venez ici et assurez-vous qu' il y a d'abord deux propriétés, puis cliquez sur chaque bouton et dites : « D' accord, je veux que vous parcouriez cette liste Et s'il n'y a pas quelque chose que vous voulez ici, cliquez simplement sur ADN. OK, pareil ici, tu te dis « OK, je n'ai pas besoin d'être vert. Il y a une troisième couleur, je vais donc en ajouter une troisième. Ou c'est la bonne couleur, mais il n'y a rien ici, donc je dois ajouter une propriété. Si ce n'est pas le cas, si vous avez la bonne propriété et que vous vous dites : «   Tout ce dont j'ai besoin, c'est d'en ajouter une nouvelle. C'est généralement le moyen le plus simple. Je veux que tu finisses là, que tu t'en ailles, que tu te sentes en confiance. Maintenant, je vais vous donner une méthode plus avancée car nous sommes dans le cours avancé. Il existe une autre façon de procéder. Ce sera peut-être plus facile pour toi. Tu es comme si ça m'avait fait exploser la cervelle. Ou vous pourriez dire : « J'adore le faire de deux manières ». Pourquoi apprendre à le faire ? que j'ai fait, c'est que je viens créer un cercle avec un plus dedans. Si vous utilisez les boutons plus et moins, il est souvent préférable de trouver une police dans laquelle vous aimeriez insérer le symbole plutôt que d'essayer de trouver un symbole J'utilise souvent celui-ci ici, appelé Days One, mais vous pouvez voir que je peux le parcourir et trouver un avantage qui me plaît. Vous préférerez peut-être cet avantage à cet avantage. Ce que vous pouvez faire alors, c'est cliquer dessus avec le bouton droit de la souris et passer au plan. Ou est-ce le cas ? Tracé du contour. Alors c'est comme un carré. Vous ne pouvez pas changer la police, donc vous devez probablement le faire d'abord et partir, j'ai besoin de vous ? Puis décrivez-le. Ou qui se souvient du doux raccourci familia ? Si nous faisons un tiret puis une valeur supérieure à, nous obtenons une flèche. Ces flèches ne sont pas très bonnes. N'importe qui d'autre a une meilleure flèche. Nous avons tous des styles différents. Allons-y autrement. Tu vois ? Parcourez et voyez qui fait meilleure flèche. Il suffit d'utiliser des polices. Bien sûr, vous pouvez accéder à une sorte de bibliothèque d'icônes quelque part, cela fonctionnera. Je les ai coincés au milieu. D'accord, c'était un peu tangent. Donc la raison pour laquelle je veux vous montrer ça, c'est que je vais vous inscrire là-bas parce que je vous utiliserai plus tard, est-ce que j'ai ces deux-là, accord ? Nous créons donc une variante. Mais ce que nous pouvons faire, c'est qu'au lieu de faire ce que nous avons fait, c'est-à-dire créer une première variante, puis nous en avons fait des doublons et les avons en quelque sorte tous divisés. Ce que nous pouvons faire, c'est dire : «  Très bien, je veux ces deux-là Et il vous suffit de les construire tous d'abord. Je veux donc que ces deux-là soient compte-gouttes. J'ai donc tout cela en premier. Tous ces doivent être leurs propres composants. L'un des gros problèmes, c'est que je ne les ai pas regroupés, d'accord ? Donc, si je crée plusieurs composants ici, je vais vous le montrer parce que vous le ferez. Tu vas y aller, d'accord, je vais m'occuper ce que nous allons faire ? Nous allons créer plusieurs composants. OK. Nous avons maintenant un, deux, trois, quatre, cinq, six, sept, huit composants. Annulons cela. Ce que je vais faire, c'est soit les regrouper d'abord, groupe, groupe, groupe, groupe. En fait, je vais vous montrer un moyen. Je suis trop distrait. Je peux maintenant créer plusieurs composants. L'autre solution est de les créer un par un. Mais nous en avons un, deux, trois, quatre. J'ai tout ça. Je vais toutes les sélectionner, et je vais dire des variantes de combinateurs Pourquoi ne pas le faire comme ça, Dan ? Oh. En fait, c'est probablement plus facile, n'est-ce pas ? Oui, c'est toujours compliqué. Nous en sommes donc à ce stade. Ce n'était pas difficile de le concevoir. Il n'est pas difficile d'en arriver là. Ensuite, ce que nous voulons, c'est que nous avons besoin de quelques propriétés. J'en ai une. Double-cliquez sur la propriété 1, et nous allons l' appeler couleur unique. Couleur. Je vais ajouter une autre propriété. Ce sera une variante, et je vais appeler celle-ci. Qu'est-ce que vous appelez positif ou négatif ? Parfois, mon cerveau ne fonctionne pas. Tu espères juste de la valeur. Je peux créer leur propriété. Si vous n'êtes pas sûr de ce que c'est, la valeur est quelque chose. C'est un bon produit générique. Maintenant, cliquons dessus. Vous êtes de la couleur du groupe 1. Non, appelons-le, renommons-le. Appelons celui-ci. C'est vert, c'est verdâtre, et c'est une valeur de, nous allons appeler celui-ci par défaut plus ou positif Je ne sais pas si nous devons utiliser le symbole plus ou écrire le mot positif. Je ne sais pas ce qui est le plus facile. Mais celui-ci est de quelle couleur. Ça va être vert, vert. Cela aura pour valeur de ne pas avoir de moins, nous allons en ajouter un nouveau, et nous allons dire, tu es un moins, mon ami. Il suffit de vous frayer un chemin. Celui-ci ici, couleur du groupe deux. Ce n'est pas vraiment un bon nom. Appelons-le Watermelon Et une valeur de A, nous avons un positif. Maintenant, celui-ci devrait être facile parce que nous avons pastèque et nous avons une valeur négative C'est bon. Même chose. Prenez un petit truc, entraînez-vous avec les deux et voyez quelle option vous plaît. Lequel est le meilleur selon vous ? Le panneau Get Assets, encore une fois, a probablement besoin d'un meilleur nom. Je peux le faire ici ? Non, je ne peux pas le faire ici. Tu dois en être capable. Quoi qu'il en soit, passons à Option ou Alt 1 pour revenir à nos fichiers. Passons aux composants. Vous avez un nom terrible qui s'appelle Component One. Vous pouvez le nommer ici, d'accord, ou vous pouvez le nommer ici. Qu'est-ce que c'est ? Cela semble être le cas, mais je ne sais pas comment le nommer. Impossible d'appeler une valeur. Veuillez patienter. Je n'arrive pas à trouver un mot. J'appelle ça un Zoom. À Oti. Quoi qu'il en soit, il y a donc un petit nom pour cela. Revenons à notre mobile haute fidélité. Passons à la deuxième option ou à la touche Alt 2 pour accéder à notre panneau Ressources. Faites glisser mon bouton Zoom vers l'extérieur, d'accord ? Et nous allons dire multidimensionnel. Regardez-nous. D'accord. En gros, peu importe comment vous y arrivez, vous avez juste besoin d' un ensemble de composants. Ensuite, vous vous frayez un chemin ici, en ajoutant différentes valeurs, en ajoutant différentes variantes, différentes propriétés, puis en leur donnant de meilleurs noms au fur et à mesure. Peu importe que vous aimiez ici, que vous commenciez par les modèles déjà créés et retravaillez-les de cette façon, ou que vous commenciez par un et que vous continuiez les dupliquer et à ajouter des valeurs Quoi qu'il en soit, je finis par le faire de cette façon, pour une raison ou une autre. Je ne sais pas pourquoi, mais ça pourrait te plaire. D'accord, ce sont des composants multidimensionnels. Je me sens bien, je me sens avancée. Ce sont des trucs avancés. Ce qui est cool, c'est que vous trouverez des bibliothèques d'autres personnes qui les contiennent et vous saurez ce que signifient les lignes pointillées Vous ne vous souviendrez pas de leur nom, mais vous savez comment ils font. Vous allez dire : « Oh, je peux en prendre un et me dire : D'accord, il est multidimensionnel Sympa. Il comporte de nombreuses variables différentes. Fantaisie. C'est bon. C'est ça. Passons à la vidéo suivante. 28. Projet de cours 06 - Variante multidimensionnelle: C'est le sixième projet. OK ? Il s'agit de variantes multidimensionnelles. Donc, en gros, exactement comme nous l'avons fait dans la dernière vidéo, sauf que je veux que vos deux propriétés différentes soient la taille et la couleur, prenez une capture d'écran des deux composants. C'est une ligne pointillée, et je voudrais voir cela aussi ici, vos propriétés pour qu' elles soient toutes bien nommées Je vais le vérifier et le télécharger dans les devoirs. Vous n'avez pas besoin de le partager sur les réseaux sociaux car c'est un peu ennuyeux. Très utile, mais pas très stimulant visuellement. Une chose que je veux vous montrer, cependant, c'est que je veux que vous vous assuriez qu'il le fasse. Je peux dire, d'accord, je veux choisir le vert, mais il me faut ce petit Tout comme nous l'avons fait avec le plan, mais nous faisons de la taille. Une chose que je voulais mentionner, c'est qu'avant de partir, ces composants sont là , parfois, disons que je vous appelle tous parce que je veux d' autres variantes. J'en veux trois. Je ne veux pas vraiment que tu fasses ça. Mais disons que tu l'as fait parce que tu es fou. Vous vouliez connaître les tailles, les couleurs, mais aussi le fait qu'il soit plein ou surligné. Je vais aller au commandement, en prendre un tas et vous y allez, mais je me sens mieux s'ils sont ici. Ils finissent par en sortir. C'est vraiment nul. Ce que tu peux faire dans cette ligne, c'est ce que je veux te montrer. Cette ligne pointillée ici n' est-elle pas automatique ? Il suffit de le faire glisser. Vous pouvez dire, c'est vrai, ces gars-là se sentent mieux ici. Vous pouvez y aller. Vous n'êtes pas censé être oui, vous pouvez créer une troisième propriété, ce que je ne veux pas que vous fassiez avec grandes lignes. Je veux que tu fasses celui-ci. Ce petit bonhomme aux deux couleurs et aux deux tailles. Je voulais juste vous faire savoir que vous pouvez ajuster les tailles. Cliquez sur le cadre , puis agitez-le. D'accord. Avant que je ne le casse, B, dos, dos, dos, dos, dos, dos, dos, dos, dos, tu peux continuer avec le tien pendant que je le défais. Très bien, amusez-vous à créer votre variante multidimensionnelle. Elles peuvent être délicates. Ils sont très satisfaisants lorsque vous les faites fonctionner, surtout lorsque vous pouvez les donner à vos coéquipiers. À l'avenir, vous aurez ce bouton vraiment facile à utiliser, et il empêchera mes actifs de devenir fous. OK ? Il y a juste un bouton qui fait toutes ces choses différentes. Bien, fais tes devoirs, pas de devoirs, et je te verrai dans la prochaine vidéo 29. Variable - Modes clair et foncé: Premièrement, nous allons apprendre ce que fait une variable. Vous pouvez les utiliser très simplement Figma. Vous pouvez les utiliser très intensément. Nous allons commencer gentiment et simplement. Nous allons faire un mode clair et un mode sombre. Regardez ce texte ici, faites-le glisser ici. Il a changé de couleur. Je sais Je suis très enthousiaste. Je suis un développeur de Coda Slash comme les autres. Je fais un peu de copier-coller en pensant que je suis un hacker informatique, mais j'adore les petites solutions simples comme celle-ci. C'est encore mieux de regarder ça. Si je les attrape et que je les fais glisser ici, ça change. Mais si je vais avec le parent et que je lui dis , en fait, je veux que tu sois en mode sombre. Tout change. Le changement de fond. Tu l'as vu ? Et le texte a changé de variable. Si vous êtes développeur, vous allez dire : «   Waouh, en levant les yeux au ciel ». Ce n'est pas si étonnant que ça. Mais si vous êtes comme moi, vous pouvez être très enthousiasmé par les variables. Soyons tous enthousiastes. Et allons-y. Certaines variables. Bref, alors allons-y. Ce que j'ai, c'est juste du texte sur une page. C'est ça. Il n'y a rien d'extraordinaire là-dedans. Allons-y et créons notre première variable. Maintenant, vous constaterez que je n'arrête pas de dire variante. Variante de ce que nous avons fait plus tôt. Ce bouton a deux variantes différentes ici. Des variables très différentes. Où trouvez-vous vos variables ? C'est ça. Je n'ai rien sélectionné. Ce que vous découvrirez, c'est qu'il y a une petite option. Des variables. Vous pouvez cliquer dessus. Nous n'avons aucune variable. Cliquez sur Créer. Quel genre d'options différentes. Nous allons aborder la question de la couleur pour le moment. Nous en parlerons plus tard dans le cours. Faites-nous entrer ici et lancez-nous. Passons à la couleur. Maintenant, ça change. Si vous avez la version gratuite, vous pourriez même arriver jusqu'ici. Il pourrait simplement vous demander de le transférer dans une équipe. Il existe des options gratuites. Il y a des moments où l'option payante entre en jeu. Cela a changé au fil du temps, je ne peux donc pas vous donner de faits solides maintenant, car cela pourrait être différent. Tu es dans le futur. Je suis là Vous devrez peut-être regarder si vous n'avez que la version gratuite, mais vous irez probablement loin avec. Très bien, alors qu'est-ce que tu as ? Nous l'avons. C'est juste une petite table. Ce sont mes variables. J'en ai un ici. C'est ce qu'on appelle la couleur. Donnons-lui un meilleur nom. Je vais appeler celui-ci. Texte. C'est ma variable de couleur appelée Texte, et je veux avoir deux options, deux modes, comme ils les appellent. Je veux un mode lumière, un mode lumière. En mode clair, lorsque tout est clair, le texte doit être assez sombre, car c'est le cas. Je vais le déplacer ici pour que je puisse voir mettre quelques échantillons ici pour faciliter les En mode clair, je veux que le texte soit vert foncé. Oh, tu as créé une variable. Cela ne fait pas grand-chose, mais appliquons-le. Cliquons sur le titre, il est appliqué comme un style, particulier cette variable de couleur. Si je vais ici et que j'obtiens une couleur de champ d'une couleur choisie au hasard, je peux accéder à mes styles. Vous pouvez utiliser les styles. Nous n'en avons pas encore créé. Est-ce que nous y parvenons ? Nous l'avons clairement indiqué à un moment ou à un autre. Il y en a d'autres préfabriqués là-dedans. Mais il y a ça. Je devrais dire variable au-dessus. N'envoie pas de SMS. Tu peux voir que c'est la couleur. Appliquons-le. C'est comme un style. C'est beaucoup de travail pour cela. Mais ne vous inquiétez pas, cela devient de plus en plus excitant. sélectionnons rien, et passons aux variables. Passons à un autre mode en cliquant sur plus ici, appelons-le mode sombre, mode sombre. En mode sombre, le texte doit en fait être assez clair. Je vais juste choisir une couleur d'interface. J'aime bien utiliser l'EEE. OK, il suffit de retirer les six œufs. C'est bon. Nous avons créé un autre mode pour notre variable. Cliquons ici. En fait, attrapons ce type, copions-le. Cliquons ici, collons-les et vous êtes comme si nous étions en mode sombre. Ici, sous le nom de « fill », tu ne le fais pas ici. C'est dans cette direction que je continue. Vous êtes du genre à cliquer dessus. n'y a pas de couleur claire. Où est-il parti ? Ils vont tous apparaître sous l'apparence. Ce type a une variable appliquée au texte. Ce que je peux faire en apparence, voir ce petit swatchi ici, je peux appliquer un mode variable N'oubliez pas que nous avons créé deux modes. J'ai une collection appelée Light mode. Eh bien, il était déjà en mode lumière. Je peux aller ici et dire que tu es en mode sombre. Oh, c'est très excitant. Est-ce que c'est le cas ? Oh, ça va mieux. Regarde ça. Supprimons celui-ci. Appliquons la même chose ici. Allons-y, Phil, tu as un style cette couleur de texte, qui est le vert. Si je les prends tous les deux, les copie, que je les colle, que je les sélectionne tous les deux, je peux dire que vous êtes en mode sombre et qu'ils changent tous. Oh, c'est encore mieux. Je ne sais pas pourquoi j'aime ça. Ajoutons d'autres variables. N'avez rien sélectionné, allez dans les variables. Et nous avons appliqué du texte. Créons-en un autre. Non, pas un autre mode. Vous pouvez le faire glisser pour l'agrandir. Je ne veux pas du troisième mode que j'ai créé, comment m'en débarrasser. Cliquez dessus, supprimez-le, vous supprimez le mode, ça ira. Je ne veux pas d'autre mode. Ce que je veux, c'est une autre variable ici. Une autre couleur, et ça va être une couleur. Appelons cette interface ou cet arrière-plan, quel que soit le nom que vous voulez. Je vais l'appeler interface simplement parce que c'est un peu plus générique. Une couleur d'interface lorsque je suis en mode clair devrait probablement être belle et claire car c'est l'arrière-plan. Le texte doit s'en démarquer. Ici, je vais utiliser mon EEE. En mode sombre, cependant, l'interface doit être vraiment sombre pour que nous puissions voir le texte clair. Je vais dire que je vais utiliser cette couleur. Copiez-les, replacez-les ici. Vous pouvez voir qu'en mode clair, le texte est sombre. L'interface est légère, et les contraires sont là. Si vous êtes développeur, vous vous dites : « C'est tellement simple ». Si vous êtes plutôt du côté des artistes de design créatif, vous êtes en train de pirater la matrice. C'est ce que j'ai l'impression faire quand je fais ce genre de choses. OK. Alors, qu'avons-nous fait ? Passons à ça. Disons que je veux que tout ce cadre parental soit plein de Let's Go. Nous avons deux options maintenant. Je veux être la couleur de l'interface. Oh, ça change. Il prend la première valeur, celle par défaut. cool, c' est que je peux dire, d'accord, j'ai besoin de ce texte ici. Venez à la rencontre. Je vais faire des doublons, maintenir la touche option enfoncée, les apporter ici et rien ne s'est vraiment passé. C' était décevant Ce que nous allons faire, c'est le déplacer ici et désactiver tous les B. J'ai dit que j'étais très précis. Je l'ai dit, tu vas certainement passer en mode sombre. Il suffit de le mettre en mode Auto. Maintenant, ce gars ici est en mode Auto, dans le cas où le premier est en mode lumière Donc ici, il est parfait. Mais si je dis : Hé, tout ce cadre n'est pas dirigé par Phil, souvenez-vous que j'ai toujours envie d'y retourner. Nous passons à l'apparence. Donc, en fait, ce cadre et tout ce qu'il contient sont maintenant là où il passe en mode sombre. Oh. Maintenant, nous l'avons fait avec le fond et le texte. Vous pouvez avoir des boutons. Ils ont des variables, un mode clair et un mode sombre. Tout ce que vous avez à faire est de changer le cadre parent, tout ce qu'il contient. Tu n'es pas obligée d'y aller. Vous êtes un nouveau style et vous le changez. Tout est prévu pour le trajet. Tu es excitée ? Créons-le depuis le début. Allons-y Oh, j' aimerais te montrer ça. Je vais créer une nouvelle version, d'accord ? C'est toujours le moment le plus excitant. D'accord ? Je vais dire que vous êtes membre. D'accord ? Je vais passer en mode lumière ? Ce qui est cool c'est que je n'ai rien appliqué à celui-ci, souvenez-vous que celui-ci n'a l'air de rien. Il était sur Auto. Mais si je l'emmène ici, regardez. Ah. Oui, c'était en introduction Tout ce que nous avions à faire était de créer quelques variables vraiment basiques. Comment te sens-tu ? Tu es un hacker informatique. C'est bon. C'est une bonne variable facile. Elles peuvent devenir très compliquées. Nous allons devenir un peu plus compliqués dans l'échelle des cours. Nous allons en faire une autre maintenant avant de quitter un terrain variable. Le cerveau fond trop tôt dans le cours. C'est bon. Rendez-vous dans la prochaine vidéo. En fait, avant de partir, je voudrais juste réitérer ces bribes de texte, même si elles ne sont pas réglées, disons, sur le mode sombre, elles permettent au parent de le faire. Vous devez toujours appliquer la variable. Donc, si je prends un bout de texte maintenant et que je le dis, et que je le tape ici, puis-je en six ? J'ai tapé dans le cadre. Tapez deux, tapez ici, tapez. Ce que vous constaterez, c'est que cela ne changera pas. Il est toujours blanc. Même si les parents sont d'une couleur différente. Vous devez au moins appliquer la variable, car nous pouvons dire que vous avez une couleur de remplissage du texte. Nous ne sommes pas allés jusqu'ici pour dire que vous avez l'apparence du mode clair ou du mode sombre parce que peu importe où il va, il sera de cette couleur. Ce que nous faisons, c'est le laisser , sans toucher à son apparence. Nous revenons à Auto, qui disparaît lorsque je clique dessus , alors que mes parents, là, disparaissent. Je viens de le laisser. Je l'ai retranscrit ici, le texte. La variable de texte est appliquée. Mais maintenant, tout ce qu'il contient, parce que mes parents disent de le faire, sinon les enfants viennent faire le trajet. C'est ça. Passons à la vidéo suivante. 30. Projet de cours 07 - Variables de couleur: Mieux vaut ne pas nous demander de créer nos propres variables. Je vais le faire. En gros, exactement ce que nous avons fait dans la dernière vidéo. Il suffit de le copier. Regarde comment tu vas. Le seul type de mix est que je veux que vous ajoutiez un logo, qui n'est que du texte. C'est donc exactement comme le corps du texte et le titre. Il vous suffit d' appliquer la variante, laisser sur Auto, et elle devrait changer. Je veux donc que le texte change et je veux une interface. Il y aura donc deux modes, clair et sombre. Où sont-ils ? Ce sont ces deux modes et ces deux variantes. Texte et interface. Vous pourriez l'appeler quelque chose comme ça, du texte, simplement parce que cela facilite un peu les choses quand vous le regardez, mais c'est un peu plus facile à voir quand vous êtes ici, vous pouvez voir, d' accord, cela doit être rempli de texte variable. Sinon, vous vous demandez : « C'est quoi ça, bordel ? Ce n'est pas très clair. Quelques petites choses que je n'ai pas faites dans la dernière vidéo que je souhaite partager avec vous, vous pouvez les casser. Tu peux dire de ne plus faire ça. Il suffit de revenir à la couleur. Vous pouvez également le voir dans votre panneau de couches. Tu peux voir par ici ? Nous avons mode clair et le mode sombre. Cela peut être très pratique, surtout si cela ne change pas. Nous avons découvert que si je saisis le titre et que je le force à apparaître en mode sombre. OK ? J'essaie de le faire glisser ici, ça ne change pas. Même si ce parent dit d'être en mode lumière, il ne fait tout simplement pas ce que nous voulons. Nous savons qu'il ne peut en fait pas être réglé sur quelque chose, réglez-le sur Auto et il suivra l'exemple de ce parent. Il recule, il avance. Ce qui est vraiment pratique, c'est de le voir ici. Tu peux voir si je me dirige et si je le force à être, disons, en mode lumière. Tu peux voir ici ? Une variable est appliquée au parent. C'est cette petite pilule. Mais ce titre fait son propre travail. Il dit : « Eh bien, emmerdez-vous. Je suis juste en mode lumière. Je m'en fous de ce que sont maman et papa. D'accord. Cool. Alors construisez Jerome, prenez une capture d'écran de ce que je vous ai montré là-bas, voyant tous les deux disposés. Parce que tu peux le déplacer. Si vous ne cliquez sur rien, saisissez des variables, vous pouvez les faire glisser. OK ? Agrandissez-le. Il suffit donc de le télécharger comme vous l'avez fait, juste pour que je puisse tout voir sur une seule grande capture d'écran, et de le télécharger dans la section des projets de classe. D'accord. Amuse-toi bien. Bonne chance. J'espère que vous êtes aussi enthousiaste que moi quand cela fonctionne, que vous pouvez le traîner et qu'il fait des choses, mais c'est difficile. Si tu t'arraches les cheveux et tu es du genre, c'est ce que j'ai fait. Il est clair qu'il me manque beaucoup de choses ici. Mais si vous trouvez cela vraiment difficile, ne vous inquiétez pas. C'est vraiment difficile. Tu sais que si tu ne peux pas le faire fonctionner maintenant, c'est bon. Nous y reviendrons plus tard dans le cours. Nous allons passer en revue quelques variables supplémentaires. En fait, nous allons en faire une de plus maintenant, je crois, juste pour trouver un foyer et ensuite nous le ferons un peu plus loin dans la classe. Très bien, bonne création de variables de couleur. 31. Comment créer un total de panier à l'aide de variables numériques dans Figma: Bonjour à tous. C' est ce que nous allons faire. Regardez, cliquez, cliquez, cliquez. Et en bas. Oh, je l'adore. C'est ce qu'on appelle une variable, comme nous avons fait une autre vidéo. Il s'agit d'une variable numérique. Cliquez sur nos boutons. Ils montent, nous achetons des billets. Si vous êtes du genre  : « Oh, je peux le faire », il suffit de lier plusieurs pages ensemble. Écoutez, nous n'avons pas beaucoup de pages. Nous venons d'avoir ces petits gars. Allons-y. Achetons des tickets techno en utilisant des variables numériques Très bien, pour commencer et rien à voir avec les variables numériques, nous allons être géniaux et passer à Option ou Alt Changez de ressource. Nous allons récupérer notre bouton que nous avons créé tout à l'heure, et je vais en avoir un qui correspond à deux. Tu vois à quel point c'est cool maintenant, et je veux utiliser la couleur pastèque J'aime ça. Je vais avoir ce set d'accompagnement plus de deux. C'est formidable de pouvoir réellement utiliser certaines des choses que nous avons créées. Je vais prendre le F k, faire une petite boîte comme tu l'as vu au début. Remplissons-le de blanc. Je vais y mettre du texte. Ce sera un grand vieux, en fait un petit zéro. Mets-le juste au milieu. Agrandissons-le. 24 pour rire, je vais dire, restons centrés . Tu verras dans un moment. C'est bon. Alors, qu'allons-nous faire ? Commençons par quelques variables. Nous n'allons rien sélectionner. Nous allons passer aux variables. Nous allons cliquer ici, et nous avons ceux que nous avons créés plus tôt. Ce que nous pouvons faire, c'est créer une variable et nous allons faire le numéro suivant. Mais ensuite, vous commencez à les mélanger et vous vous dites, encore une fois, c'est un peu confus. Ce que j'aime, c'est que vous pouvez cliquer dessus s'il n'est pas déjà ouvert et vous pouvez dire, en fait, que je veux donner un nom à cette collection. Celui-ci s' appellera Color Stuff. OK, je vais en créer une autre, créer une nouvelle collection, et ce sera un numéro de collection. Ils sont toujours là. J'ai des trucs sur les cos ou les couleurs, et j'ai des trucs sur les chiffres. Je vais travailler sur les chiffres juste pour les séparer. Ils peuvent y aller ensemble. Nous allons créer à partir d'un numéro un, qu'allons-nous faire ? Au lieu de ce numéro appelé. Disons que c'est total, donc c'est un peu plus clair. Et pour ce qui est de la valeur, changeons-la en une autre, par exemple cinq, juste pour voir ce qu'elle fait. OK, cool. Ce que nous allons faire, c'est simplement le déplacer ici, déplacer là-bas, pour que vous puissiez les voir tous les deux. Tout ce que nous avons à faire, c'est de dire cette zone de texte, pas celle extérieure, mais qui pourrait effectivement faire la zone extérieure Mais celui-ci, j'aimerais bien maintenant, qu'il ne soit pas un remplissage ni un style parce que c'est ainsi que nous avons fait les derniers. Les chiffres sont différents. Je vais entrer ici les chiffres, et ce que nous faisons, c'est monter en haut. Vous pouvez voir cette petite icône ici. C'est l'icône variable. On le voit de temps en temps , c'était partout par le passé. La dernière mise à jour de l'interface utilisateur l'a un peu supprimée, mais vous la verrez là où nous irons. Tu y vois ? C'est ça. Hexagone, Pentagone, Pentagone. Je pense que c'est le Pentagone. Mais vous le verrez dans certains champs, d'autres en ont, d'autres non, ce qui signifie que je peux appliquer une variable à la hauteur de la ligne. Je ne veux pas. Je veux juste te donner une idée. Mais celui-ci ici, celui-ci va l'appliquer à cette zone de texte. Lequel ? Je pourrais. Je ne peux appliquer que la totalité. Je l'ai joué et il est passé à cinq. Cette variable est désormais connectée à cette zone de texte. Ce qui est bien, c'est que je peux dire qu' en fait je veux que ce soit 15, ou qu'on revienne à zéro. Nous allons le mettre à zéro, mais nous pouvons voir qu' ils sont connectés. La prochaine chose que nous devons faire est de le fermer. Il y a deux parties à cela. C'est la plus délicate. La couleur quand nous l'avons dit , nous l'avons appliquée à l'ensemble du cadre. Nous l'avons fait sous réserve. C'était clair, nous voulons que le remplissage soit d'une certaine couleur d'interface. C'était cool. Tu l'as vu au début. Il s'agit d'un bouton sur lequel vous cliquez. C'est une interaction qui se produit dans le prototype. Cela me touche à chaque fois que je le fais. C'est le bit. Oh, je me souviens. Parce que ce que je veux faire c'est que lorsque l'on clique sur ce bouton, cela change Nous en avons fini avec le numéro maintenant. Nous n'avons pas du tout besoin de lui. Il est connecté. Ce dont nous avons besoin, cependant, c'est d'un bouton pour dire à ce type ce qu'il doit faire. Vous le faites sous forme de prototype. Dans le cadre du prototype, je souhaite ajouter de l'interaction comme nous l'avons fait auparavant. Je tiens à dire, lorsque ce truc est activé, quelle action est-ce que je veux faire ? Ce que nous avons fait, c'est naviguer deux fois. Souvent, nous passons simplement à une autre page. C'est celui que nous voulons. Nous voulons définir une variable. C'est là que ça devient un peu bizarre. passe un certain nombre de choses. Vous avez cette interaction. Voyez-vous apparaître ce petit objet ? Donc, si vous empruntez le fichier Figma de quelqu'un d'autre, l' un des fichiers communautaires, et qu'il fait des choses, vous vous demandez : « Comment diable fait-il Donc, juste un prototype et voyez si vous pouvez vous y retrouver et, regardez, il se passe quelque chose ici. Et ce que j'aime faire, c'est qu' avec ce bouton sélectionné, au lieu de travailler ici, je ne l'aime pas. C'est trop détaché. Je ne sais pas pourquoi cette même liste déroulante , si vous le faites ici, vous semble plus attachée. Peu importe la façon dont vous le faites. Bouton sélectionné, cliquez ici ou choisissez cette option. Je ne vois pas vraiment que je doive le déplacer vers le haut. Définissez une variable pour cela. Quelle variable ? Ce n' est pas le truc des couleurs. Des trucs de couleur. Je veux les chiffres, le total. Donc, ce que nous avons fait jusqu'à présent, c' est que lorsque vous cliquez dessus, définissez une variable de cette couleur Qu'est-ce que je veux en faire ? OK ? C'est l'expression. Je veux que le total soit soustrait par un, et j'en ai juste saisi un sur mon clavier Vous pouvez saisir, soustraire, soustraire. En fait, je ne veux pas le soustraire. Je voudrais faire une pause. Peu importe donc que vous le saisissiez ou que vous souhaitiez ajouter, numéro un. Excellente. Ça va marcher. J'espère. Prototypons ceci. Je vais cliquer sur le cadre, aller ici et passer en mode aperçu pour que nous puissions tout voir. Es-tu prêt ? Préparez la matrice. Nous venons vous chercher. Biographie de B. Je l'aime tellement. Le problème est .dd dt. Ne descends pas. Cool. J'adore ça. Faisons exactement la même chose, mais nous allons le faire baisser. Il y a donc un bouton ici. Qu'allons-nous faire ? Nous devons nous en assurer en mode prototype. Que devons-nous faire ? Mode prototype. Dans la direction ? Qu' allons-nous faire ? Il peut s'agir d'un appui ou d'un clic. Peu importe, mais je vais dire immédiatement ce que je veux. Quand j'ai dit « click on tap », s'il sait que c'est un téléphone portable, il va taper parce que vous ne cliquez pas sur un téléphone. Vous appuyez sur OK si vous en faites un pour ordinateur de bureau, tout fonctionne toujours. Mais il sera indiqué au clic. Exactement la même chose. Dans le cadre des actions ici, je peux dire que j'aimerais définir une variable comme nous l'avons fait auparavant. Mais j'aime bien le faire ici. Quelle variable ? Faisons le numéro. Faites défiler vers le bas. Oh, mec. Impossible de voir la variable. J'aurais aimé faire celui-ci. Celui-ci ici. Quelle cible ? J'aimerais que vous cibliez le total, c' est-à-dire ce chiffre. Ce que je veux que tu en fasses, je prends le total et moins un. Tu es en train de le faire. Prends le haut. Passons à l'aperçu, montons et descendons. Euh, du bas vers le bas. Regardez-nous. C'est super simple, mais je ne sais pas. Ça me plaît. Une chose que je tiens à vous montrer ou à vous rappeler , c'est que parfois vous voulez supprimer les cibles en disant : « Hue, casse-la ». Il ne sera plus connecté. De plus, comment puis-je m' assurer que je ne peux pas voir les variables ? Où sont-ils ? N'oubliez pas qu'ils sont en mode prototype. Le raccourci pour cela est l'option Alt sur un PC sur un Mac, et c'est huit et neuf. Neuf c'est un prototype, huit c'est du design. Basculez entre les deux, habituez-vous à cela. Et juste à l'autre bout du clavier, les mêmes touches 1 et 2 permettent de basculer entre les ressources et C'est une façon pratique de me souvenir d'eux. Ils se trouvent de chaque côté de l'interface utilisateur, comme huit et neuf sur mon clavier et un et deux ici. Oh, il faut maintenir le Alki optionnel enfoncé. C'est bon. Nous avons créé une variable. Et ça monte et descend. C'est très simple. J'aime bien ça. Nous allons faire quelque chose de plus avancé parce que l'un de nos problèmes actuels est que c'est ce type qui fait ça. Tu l'as probablement fait. Tu es du genre : « Ah. Que se passe-t-il si un paiement passe à moins sept ? Est-ce que nous leur payons de l'argent ? Par exemple, Limerick Techno doit vous envoyer un montant négatif de 7$, une seconde négative seconde négative C'est ce qu'on appelle des conditions variables. Nous le ferons un peu plus tard dans le cours. Vous pouvez donc zoomer dessus si vous voulez continuer maintenant, mais je pense que c'est tout. C'est une bonne chose pour nous de commencer ce cours avancé. Consacrez trop de temps variables, car elles sont trop complexes. Il y aura une section entière à ce sujet plus loin dans le cours, mais je ne sais pas. Je veux que tu sois fière si tu l'as fait fonctionner. Nous avons créé deux variables différentes. Nous avons choisi la couleur un, et nous avons fait le numéro un. Il y a tellement de choses que vous pouvez en faire, et ce qui est cool, c'est que vous pouvez emprunter les documents d'autres personnes contenant des variables, et maintenant vous savez comment les contourner et les modifier. Il suffit de faire quelques ajustements. Regarde ça. Nous sommes des codeurs. Je vous verrai dans la prochaine vidéo. J'espère que cela ne nous obligera pas à faire un projet de classe. Oui. 32. Projet de cours 08 - Variables en nombre: Bien, calme-toi. Calme-toi. C'est l'heure des projets de classe. Tu adores ça. OK, je veux que tu crées un chariot. En fait, disons même que c'est un panier d'achats. D'accord ? Et je veux que tu fasses fonctionner le comptoir. Exactement comme nous l'avons fait dans le dernier tutoriel. Créez simplement votre propre version. OK, j'ai listé, créé une variable numérique, fait fonctionner les boutons plus et moins. Donc, en gros, ça. Je veux que vous passiez à l'aperçu, c'est ce que Shift Spacebar, que vous passiez à la bonne page Déplacez la barre d'espace. Et je veux que cela fonctionne de haut en bas. OK. Ce que j'aime aussi, c'est que vous conceviez votre page de paiement. Je l'ai appelé checkout. Il s'agit en fait d'un panier d'achat. Ils sont très différents. Nous ne sommes pas très différents, mais ce sont des éléments différents du panier d'achat. Souvent, sur la page de paiement, une fois que vous l'avez confirmé, vous devez saisir les informations de votre carte de crédit et des informations telles votre adresse de livraison qui apparaît après la voiture. Je veux que tu le dessines. J'ai fait quelque chose de très petit, tu peux aller plus loin. La façon dont je trouve l'inspiration, c'est que certaines des nouveautés sont ici, Shift Two. C'est ce que j'ai demandé à Figman de réaliser en utilisant les fonctionnalités de l'IA Je suis passé à la première ébauche et j'ai dit : «  Faites-moi une page de paiement », ce n'est pas le bon mot. J'aurais dû dire chariot pour un site d'événements. Je m'ai donné les bases, et je les ai copiées grossièrement. J'ai répondu : image de ce côté, titre. J'utilise le texte plus petit pour cela, puis j'utilise les boutons déjà créés, inspirez-vous. Si vous n'avez pas la fonctionnalité d'intelligence artificielle, il existe de nombreux endroits pour trouver inspiration gratuitement en ligne, le meilleur étant probablement ce qu'on appelle Mob. D'accord, mobin.com est ce que de nombreux concepteurs d'expérience utilisateur utiliseront. Il s'agit d'un site payant. Il existe des options gratuites. Vous pouvez l'utiliser gratuitement, mais vous n'obtenez qu'un certain nombre de résultats. Vous pouvez le voir ici, j'ai saisi CRT et cela m'a donné quelques options de panier Regardons iOS to Web. Le site est tellement bon, mais vous devez payer pour cela. Si vous utilisez Mobin, vous pouvez me suivre ici Je suis chez BYOL on Mobin. Je ne sais pas pourquoi tu le ferais, mais tu es là. À d'autres endroits, le dribble est évidemment un très bon endroit. J'ai tapé dans mon panier. Vous pouvez le voir ici, ils sont ultra surconçus. C'est juste un design vraiment cool que quelqu'un utilise pour son portfolio. Tu peux tout à fait le faire aussi. Parfois, lorsque vous recherchez des choses et que vous vous demandez : faire en sorte que cela fonctionne ? Est-ce que c'est faisable ? Parfois tu ne peux pas, parfois tu peux. Parce que qui vend cette tête de casque Nike ? Tu as quelque chose d'ennuyeux à vendre. Mais certains d'entre eux sont cool. D'autres endroits sont des choses comme je suis juste l'inspiration de l'interface utilisateur de Google pour le panier d'achat, pas la page de paiement parce que c'est différent. Laisse-moi te montrer. Panier, passons à la page de paiement. vois, c'est plutôt la touche finale juste avant de payer maintenant. Vous avez indiqué tous les détails. Allons y jeter un œil. Convert Cart est apparu et ils ont trouvé beaucoup d'inspiration ici Évidemment, des choses comme Pintrès Bhans Anywhere, vous pouvez trouver un panier d'achats et obtenir quelque chose pour Maintenant, quand vous l'avez fait fonctionner, cela monte, monte, descend, descend. J'adorerais voir une vidéo qui fonctionne, de haut en haut, bas en bas, publier cette vidéo sur votre compte YouTube ou Vumeo et nous envoyer le lien dans les projets de classe Sinon, je vais faire une capture d'écran. Donc, ce que je veux que vous fassiez, je veux que vous soyez en mode prototype pour que vous puissiez voir ces petits gars, et je veux que vous ouvriez votre design, que vous ouvriez des variables, puis que vous reveniez au prototype et que vous preniez une capture d'écran, afin que je puisse voir les chiffres, la valeur, ou mieux encore. Regarde ça. Je te montre en train de travailler. Une capture d'écran de tout ça serait géniale. chargé des fichiers de classe et vous vous sentez génial et avancé lorsque vous utilisez des variables dans vos prototypes. Profitez-en. C'est peut-être un peu frustrant. Il se peut que vous deviez revoir les dernières vidéos. Si vous avez des questions ou si vous vous perdez, faites-le moi savoir dans les commentaires. Si vous savez ce que vous faites, consultez les commentaires, voyez si vous pouvez aider quelqu'un d'autre. J'ai du mal à répondre à toutes les questions, tu pourrais m'aider. C'est ça. C' est un projet de classe terminé. Rendez-vous dans la prochaine vidéo. 33. Projet de cours 09 - Branding d'événements: D'accord, c'est une super période de projet de classe. Je veux que tu te fasses un petit logo avec une petite icône. Je veux que tu le mettes dans Trouver une barre d'état. D'accord ? C'est ce petit truc sur le dessus. Je veux que tu choisisses aussi quelques couleurs. OK, ce sont les bases. La seule autre chose est que le logo doit avoir un mode clair et un mode sombre. Oh. J'ai un interrupteur à bascule Je vais également vous montrer comment procéder dans cette vidéo. Je veux donc l'examiner un peu plus en détail, vous montrer où trouver les couleurs, où trouver les icônes. Il suffit donc de parler un peu. Mais le projet de classe n'est pas particulièrement difficile. OK, logo, couleurs, barre d'état, graphiques en écran de sable. Soumets-toi. Où trouvez-vous votre animal ? Il provient du générateur Random Project. Si vous ne l'avez pas encore fait, allez sur le site random project generator.com, et c'est celui que j'ai trouvé OK, donc j'étais Limerick Techno et ma marque était un oiseau. Vous pouvez créer votre propre logo si vous êtes prêt à créer un logo. Va faire ça. Sinon, vous pouvez simplement utiliser une icône comme je l'ai fait. Placez-le à côté d'un texte, ajoutez une barre d'état, faites-en des composants, et le tour est joué. Oh, et choisissez les couleurs. Permettez-moi le passer en revue un peu plus précisément. Alors, nous allons chercher le brief, c'est fait. Le logo. Vous pouvez utiliser des icônes de stock gratuites. Là où je suis allé, c'est ici que je suis descendu. J'ai regardé mes plugins et j'ai tapé une icône, et ceux-ci ont changé Celui que j'ai suggéré dans mes cours précédents a disparu. Icone Eight est bon, certains sont gratuits, d'autres non. ConAPI est également une bonne solution. C'est de là que j'ai trouvé celui-ci. J'aime bien que vous alliez l' apporter, vous pouvez dire, en fait, parce que j'en ai apporté un. Et je veux vous montrer quelques problèmes que vous pourriez rencontrer. Apportons celui-ci. D'accord ? Je comprends la hauteur, la couleur. Je peux l'importer en tant que composant. Oh, cela permet de gagner du temps ou de créer un cadre et de créer vous-même un composant par la suite. D'accord ? Quoi qu'il en soit, apportez-le. Et ce que vous constaterez, c'est que même si c'est sur la page, cela finit parfois par en être séparé. Supprimons cela à nouveau. Je souhaite déplacer ma page vers le haut. Je suis donc en plein milieu de ma page en ce moment Si je vois le kiwi, je suis Néo-Zélandaise Je voulais vraiment utiliser les Kiwis, mon oiseau. C'est une forme tellement moche. C'est un ballon de football avec une partie tombante. Ouais Ce que je voulais vraiment vous montrer, c'est : pouvez-vous voir que c'est fini ? Pourquoi est-ce que je peux voir le nom ? Le sais-tu ? Un quiz avec Pop ? Tu sais C'est parce que ce n'est pas vraiment dans ce cadre. Il le jette juste sur le dessus, d'accord ? Donc c'est juste traîner ici juste en haut de mes couches. Pour le mettre dans ce cadre, d'accord ? J'ai besoin de sortir puis d'y retourner, pas de sortir. Je vais te laisser là, lâcher prise, le ramener. Et maintenant, il va automatiquement sauter dans ce cadre. Il y a une chose à remarquer. Parfois aussi, lorsque vous la redimensionnez, selon la façon dont l' icône a été conçue, vous devrez peut-être utiliser l'outil de mise à l'échelle, non l'outil de sélection. Souvent, l'outil de sélection fonctionne, mais parfois un outil de mise à l' échelle est nécessaire s'il contient des traits, car ils peuvent faire des choses étranges. Très bien, tu peux traîner ensemble. Peut-être que nous pouvons utiliser. OK, alors créez un logo, vraiment basique. Assurez-vous que votre logo est un composant et je veux que vous en fassiez une variante. Je veux que tu t'assures qu'il y a un mode clair et un mode sombre. Nous avons déjà fait quelque chose de très similaire. Nous avons fait des variantes. Où l'avons-nous fait ? Variante multidimensionnelle ou n'importe quelle variante. Nous l'avons fait pour les boutons, mais vous pouvez tout à fait le faire pour ça parce que je veux que vous ayez ceci et que vous passiez au mode clair, au mode sombre, mode clair, au mode sombre. Assurez-vous donc qu'il s'agit d'un composant. J'ai laissé le mien sur ma page de composants. J'ai un mode clair et un mode sombre. Je veux que vous voyiez si vous pouvez réactiver cette variante. Il ne s'agit pas d'une variable, d'une variante. La dernière chose à savoir, c'est où en sommes-nous ? La deuxième ou dernière chose est de choisir des couleurs. Je veux au moins une couleur primaire et une couleur secondaire. J'en ai également choisi quelques autres. J'ai une couleur d'accent, parfois appelée couleur tertiaire, puis j'ai une lumière neutre et une teinte foncée neutre. Vous vous demandez : est-ce que c'est blanc et noir ? Ça ne l'est pas Je l'ai déjà fait là où c' est assez clair, ce n'est pas tout à fait blanc. Vous pouvez voir le contraste ici. J'aime ce contraste entre les deux. À vous de décider si vous souhaitez utiliser du blanc pur pour toutes vos couleurs ou la même chose pour le noir ici. Ce n'est pas tout à fait noir. Comment les choisissez-vous ? J'ai créé un petit échantillon de couleur que tu pourrais utiliser Donc, si vous allez sur mon figma.com sur BYOL, vous trouverez tous mes fichiers communautaires, et l'un d'entre eux s'appelle couleurs neutres. Vous pouvez voir ici qu'ils sont tous en noir et blanc, sauf que je pense que c'est le seul en noir et blanc. Vous pouvez voir que j'ai indiqué des couleurs plus chaudes, elles deviennent un peu rouges. Il y a des couleurs un peu différentes et puis il fait plus frais en bas, vous pouvez choisir vos sets si vous le souhaitez. J'ai fini par choisir ces deux-là pour les miens. D'accord ? Ils sont chauds. C'est un peu ce que je recherche pour le reste de ma palette de couleurs. Parfois, les couleurs plus froides fonctionnent mieux. Tu peux les inventer toi-même. Tu n'es pas obligée de prendre le mien. En fait, faites une pause là. Je vais le rendre téléchargeable à partir des fichiers d'exercices, et je l'appellerai couleurs neutres. Tu attends là-bas. En fait, venez. Vous pouvez enregistrer une copie locale. Regardez, classez, enregistrez la copie locale. Cela n'arrive pas beaucoup car il s'agit d' un logiciel très en ligne. Mais je vais le mettre ici pour toi. Je vais me débarrasser des couleurs neutres, et vous pourrez les ouvrir à partir de vos fichiers d'exercices. J'ai un lien en haut des fichiers d'exercices pour les fichiers de ma communauté, vous le trouverez ici et vous pourrez l'ouvrir en tant que. Vous. Tu es là. Couleurs neutres C'est moi C'est bon. J'ai dit qu'il n'y avait pas grand-chose à faire. Cela demande beaucoup d' explications sur ce qu'il faut faire. La barre d'état est la suivante. Je veux que vous parcouriez et que vous trouviez la barre d'état, c'est là que j'utilise la barre d'état, vous êtes ce truc en haut. D'accord ? Trouvez-le pour votre design particulier. D'accord ? Donc, je suis allée chez moi ou si vous êtes sur le navigateur membre, allez ici et allez dans Fichiers nous voulons être des modèles et des outils. Et en haut, je veux taper ce qu' on appelle une barre d'état. barre d'état est le nom de l'élément en haut qui contient votre batterie et d'autres objets. Donc, vous pouvez faire une barre d' état, puis taper votre si vous utilisez un iPhone 18, quand suivez-vous ce cours ou quoi que ce soit d'autre, ou si vous voulez un cours Android, saisissez-le simplement. J'ai actuellement 16 ans, et je viens d'en ouvrir un. Quand je prends une décision, j'en regarde un. Je choisis souvent le premier. Eh bien, il a des commandes de caméra, beaucoup de likes et de téléchargements, et celui-ci était vraiment bon. Quelqu'un l'a fabriqué, il est là. Et c'est vraiment bien. Copie ça, Dan, idiot, ça te facilitera les choses. J'ai juste copié et je suis passé à mon design, et j'ai collé le truc cool, c'est celui qui l'a fait a fait ce que nous venons d'apprendre et il y a mis des variantes. J'ai répondu : « J'en ai un. D'accord ? Il y a une bascule entre le clair et le noir Oh, regarde ça. Donc, ne faites rien à ce sujet. Merci à la personne qui l'a fait. Alors elle Herman l' a définitivement mal fait. Mais merci pour ça. L'autre chose que je vais faire pendant que je suis ici, c'est que vous allez me demander Interrupteur à bascule, comment faisons-nous ? OK, c'est très simple. Allons-y aussi. Nous quittons le sujet maintenant parce qu'en fait, finissons-en. C'est ce que j'ai fait. Livrables, faites une capture d'écran de vos choix de couleurs, la barre d'état en haut et de votre logo. C'est ce que je veux voir. Et dites-nous si vous avez créé votre propre logo. Si c'est entièrement personnalisé, c'est que vous avez dessiné votre propre oiseau, faites-le nous savoir ou s'il s' agit d'une icône gratuite que vous avez utilisée. Peut-être où tu l'as trouvé. Bien, revenons à la question de la commutation. Allons par ici. Allons-y, donc composants. Allons-y dans l'autre sens. J'ai mon logo ici. Je peux cliquer dessus avec le bouton droit de la souris et aller au composant principal, pareil que je suis ici et il s'agit de la dénomination. Si j'entre dans le vif du sujet et si je l'ouvre, j'ai le mode, et j'ai les valeurs de lumière et d'obscurité. Si vous allumez et désactivez celui-ci, il essaiera. Regardez celui-ci, vous voyez, il change de mode à partir de celui-ci. Il suffit d'utiliser le mot « oui » ou « non » pour les noms. Ou je pense qu'il existe quelques autres variantes que vous pouvez utiliser. Je pense que tu peux utiliser, cliquer sur quelque chose, Dan, oui, non, non. Cela pourrait être plus logique dans ce cas, car nous dirons quel est le modèle par défaut ? C'est le cas. Dites le mode sombre. Non, mode. Mode d'éclairage. Alors maintenant, le mode lumière ? Oui, vous êtes en mode lumière, ce qui signifie qu'il s'affiche bien sur les écrans lumineux. Mais si je désactive le mode lumière, pop, c'est en mode sombre. Peu importe, mais ça a l'air cool. C'est bon. C'était plus long que je ne le pensais. Mais il y a quelques petits projets amusants là-dedans, logo, des couleurs dans la barre d'état. Une fois que c'est fait, vous n'avez pas besoin de télécharger celui-ci sur les réseaux sociaux, juste pour les projets de classe, et oui, vous pouvez le voir dans la vidéo suivante 34. Comment créer des variantes de couleurs UX à l'aide d'un widget Figma get: Bonjour, tout le monde. Dans cette vidéo, nous allons examiner les styles de couleurs et les créer automatiquement. Ici, nous avons besoin de ces échantillons primaires et secondaires dont nous pouvons tirer des résultats Au lieu d'essayer de les deviner et de les créer nous-mêmes, nous allons utiliser notre plug-in qui nous permet de changer de couleur. Il passe en revue et crée tous les styles de couleurs pour nous. Prêt à accéder à notre panneau Styles. Super facile, super rapide et super génial. Oh, pour trouver le widget, ouvrons nos actions. Commande K ou Contrôle K. Nous allons simplement cliquer sur le bouton, et nous allons taper dans le générateur d'étiquettes de couleur. Il s'appelle désormais Insert Color generator. Quoi qu'il en soit, même si ce n'est pas ici, vous trouverez l'un ou l'autre des générateurs de palette de couleurs. Il y en a un autre qui est plutôt bon. C'est ce qu'on appelle le générateur de couleurs Foundations. Ça te paraît un peu plus hardcore, mais j'aime bien celui-ci. Dire que si vous ne le trouvez pas ou s'il cesse de fonctionner et n'est plus pris en charge, il y en a d'autres à rechercher. Mais le processus général est le même. Ce que nous allons faire, c'est saisir Je vais prendre ma couleur principale. C'est celui-ci ici, j'ai quatre, sept , quatre, six B, et je vais le taper ici. Assurez-vous de garder le hachage dedans. Je panique s'il n'y a pas de hachage. Ensuite, rien ne se passe tant que vous n' avez pas tapoté dessus, déconnecté ou cliqué dessus, et maintenant j'ai ma couleur. Ce que j'ai fait, c'est diviser cette couleur que j'avais en un tas de nuances plus foncées et plus claires. Nous pouvons le nommer. Le boîtier sera ma couleur de trait d'union principale. Si j'arrête ça, c'est pour l'orthographe britannique, d'accord ? Vous pouvez voir qu'ils les ont très bien nommés. Vous pourriez aussi avoir besoin d'un acronyme pour le vôtre, car si vous travaillez pour de nombreux clients différents, il se peut que vous ayez trop de couleurs primaires. OK ? C'est à vous de décider. Je vais laisser le mien, mais ne pas m'embrouiller dans ce cours, fais-le. Et puis ils sont tous bien nommés. Regarde ça. Ce que nous pouvons faire, c'est dire, en fait, que je veux enregistrer ces styles. Et c'est là que se trouve la coudée. Tu es du genre : « Rien de cool ne s'est passé. Oh. Mais je n'ai rien sélectionné. Montre. Si j'entre dans le vif du sujet, cela arrivera. Pourquoi ? Essayons encore une fois. Cliquez dessus. Enregistrez les styles. Là-bas. Je ne suis pas sûr de ce qui s'est passé là-bas. Là-bas. Quoi qu'il en soit, cliquez deux fois dessus. J'ai obtenu ma couleur primaire. Je vais m'en débarrasser car ce n'est pas ma couleur principale. J'ai tout ça. Pourquoi sont-ils bons ? De toute évidence, ils sont juste prêts à partir. Je peux passer en revue et dire, en fait, je suis en train de créer une carte ici et que je dois choisir l'une de mes couleurs. Je peux choisir des styles de couleurs et me dire « D'accord, je veux que ce soit le 700 Génial. Ce que j'ai tendance à faire, cependant, c'est que souvent je n' ai pas la gamme complète. Je n'en utilise pas 50. Cela dépend de vous. Je me débarrasse également de tous les nombres entiers. Je me débarrasse de 200 ou 400 nombres entiers, pairs. C'est ce que je veux savoir. Je les veux juste. Ce serait vraiment normal de les avoir. Si vous êtes une grande entreprise, vous les aurez tous. J'ai tendance à ne travailler que sur de petits projets, et si j'ai besoin d'un 600, je peux le faire. Ce n'est pas difficile. Ba Na vient d'avoir un groupe plus ordonné. Et ce qui est cool, c'est que ce petit plug in ne fait que traîner. Tu n'as plus besoin de lui. Tu peux le supprimer, d'accord ? Et votre primi et vos couleurs ne disparaissent pas. C'est un plug in qui traîne jusqu' à ce que tu n'aies plus besoin de lui, d'accord ? Je vais m' occuper du reste. Nous allons en faire une autre ensemble, n'est-ce pas ? Je vais les faire rapidement, et je m'arrêterai si je trouve quelque chose d' utile. Collez-le dedans. D'accord. Je te verrai dans une seconde. Oh, oui, en pause. Je sais que je l'ai fait. Je n'ai même pas besoin de vérifier. Alors je suis passé à celui-ci, changé de couleur, vous savez, je lui ai donné une couleur primaire, suis passé à celui-ci, j'ai changé couleur, j'ai juste appuyé sur Enregistrer les styles, et je n'ai pas changé le nom, je parie que maintenant, si j'ai un look, couleur primaire ? Oh, ça ne l'a pas annulé. Tu dois peut-être cliquer deux fois dessus. Mais si je clique dessus maintenant, je vais remplacer mes couleurs primaires par cette nouvelle. Donc, si je passe au secondaire, je veux que nous le fassions correctement. OK, tu veux que ce soit ça. Ce sont donc les bonnes, mais je dois changer cela avant d'aller plus loin. Ce sera donc mon secondaire. Appuyez sur Entrée. Je vais dire que Enregistrer les styles a cliqué deux fois parce que cela ne semblait pas fonctionner avec. Vas-y, ils sont là. C'est bon. Donc, encore une fois, notre dernier, le mode vitesse. Ouais. OK. Tu as dit non, je vais l'annuler 100 % ont remplacé cette couleur secondaire. Retour au mode vitesse. Bien, je vais vous montrer que cela semble très noir à l'écran, mais une fois que vous arrivez à ces couleurs plus claires, vous pouvez voir qu'il y a beaucoup de chaleur dans le noir que j'ai choisi Je vais donc dire que c'est neutre et ajouter cela. Je dois cliquer deux fois dessus. Je ne sais pas pourquoi. Et pour celui-ci, je n'en veux pas vraiment de versions. Je vais juste changer le nom de cette interface en interface, et je vais juste avoir une couleur pour elle. Je n'ai donc pas besoin d' utiliser ce truc de style. Ce sera juste cette couleur, donc je vais dire, allons-y, je vais cliquer sur Ajouter un style. Je ne vais pas être une variable. Je vais revenir au style. Eh bien, c'est confus. Passons aux variables que nous avons faites plus tôt. Je vais passer au style. Le nom de celui-ci sera interface. Super style. Voyons ce que nous avons. Je n'ai plus besoin de toi. Pense, mon pote. Je vais juste les ranger en mode rapide, car il s'agit simplement de supprimer tout un tas de choses. Regarde ça. Si tu veux le 50, tu peux le garder. Si vous les voulez tous, gardez-les tous. Il n'y a pas de véritables règles. Ce que j'aime faire, c'est m' assurer qu'ils sont en ordre. Les seules couleurs qui apparaissent seules doivent être au sommet. Ces groupes ici, dites simplement que si vous les avez créés dans des ordres différents, vous pouvez vous déplacer principalement pour être le meilleur si ce n'était pas le cas avant, génial. L'autre chose que j'aime faire, c'est quand je suis, disons, en train de colorier quelque chose, disons, dessiner une boîte ou un cadre, et je vais dire que vous allez être cette couleur d'échantillon Au lieu d'avoir à les parcourir toutes, ce qui est assez long, vous pouvez simplement cliquer ici, il est écrit « Type 500 ». D'accord, alors il vous donnera les 500 de toutes ces parce que vous savez que vous voulez les 500 couleurs. Disons que vous voulez la version la plus foncée de la couleur. OK, tu peux y aller et choisir celui-ci. Quand ils sont sombres, en fait, ils se ressemblent tous. Donc oui, c'est pratique. 500 et je vais m'en servir. C'est bon. Cela consiste à créer des variantes de couleurs dans Figma à l'aide d'un widget. Il n'est pas nécessaire que ce soit ce widget. N'oubliez pas que beaucoup d' autres personnes utilisent ce que l'on appelle des fondations. C'est très cool aussi. Fais-le un peu différemment. Je préfère celui-ci. Vous pourriez trouver le vôtre qui vous plaira vraiment. C'est bon, mes amis. C'est ça. Je vous verrai dans la prochaine vidéo. 35. Grille v contraintes v autolayout - lequel utiliser et quand ?: Parlez des grilles, des contraintes et/ou des louts, moment où vous les utiliseriez, de leur utilité et de leur utilisation, et de leur utilisation façon dont je les utilise dans mon flux de conception, qui sont les plus importants, ceux par lesquels je commence, je ne fais pas jusqu'à la fin, et certains d'entre eux que je n'utilise pas beaucoup, juste pour que vous ayez une meilleure idée de ce que font toutes ces choses et de la façon dont elles C'est une gaufre. Prépare-toi pour la gaufre Bien, allons-y. Très bien, alors récapitulez rapidement Autolayouts Ce ne sont que des bribes de texte qui traînent. Les sorties automatiques sont excellentes. Vous les glissez toutes et vous passez à Shift A. Elles sont maintenant sorties automatiquement La façon dont les sorties automatiques fonctionnent est qu'elles fonctionnent sur les composants internes présents ici Ils le rendent réactif. Mais pour ce qui est à l'intérieur de ma voiture, dehors. Cela signifie simplement que je peux le récupérer, le déplacer ici, le nom d'utilisateur et le mettre ici. Je peux modifier le texte, et il est redistribué. C'est une sortie automatique. Une contrainte c'est l'extérieur de la boîte. C'est toujours de la réactivité, mais ici, si je l'intègre à ce bureau, au moment où il essaie de partir du haut, il s'en tient à la valeur par défaut, qui est restée Mais si je vais ici et que je dis, mon ami, que nous nous en tenons à la droite. Cela signifie que lorsque je vais ici et que je dis, j' ai besoin que vous redimensionniez, tout sera redimensionné et tout sera réactif C'est donc l'extérieur de la boîte. Maintenant, le dernier concerne les grilles ou les guides de mise en page, ou les colonnes. Le guide de mise en page des appels ici. J'ai créé trois colonnes sur la mienne. Je vais l'activer pour les faire correctement plus tard. Mais j'ai des chroniques. Ils sont simplement utiles pour assurer la cohérence entre les pages. Je veux que les marges soient les mêmes des deux côtés au lieu d'essayer de les deviner ou de dessiner la boîte magique. Si vous l'avez déjà dessiné déplacez-le pour aligner les choses. Vous voulez de la cohérence dans vos marges et dans vos colonnes. Vous activez votre guide de mise en page, ce qui nous permet de gagner en réactivité. En quoi cela contribue-t-il à la réactivité ? C'est bien pour simplement aligner les choses. Cela devient bon pour la réactivité. Si c'est le cas, jetons la carte à celui-ci. C'est une commande que j'ai passée tout à l'heure. Je m'en vais, très bien, je m'accroche sur le côté. Nous sommes en train de le faire. C'est assez pratique. Mais si j'en fais un autre, je travaille maintenant sur ma tablette. Et j'ai besoin qu'il soit plus petit, je vais regarder ce qui va se passer. Il fait suite à nos chroniques. Nous n'avons pas à le faire glisser , puis à trouver nos colonnes et à le reconstituer. La raison en est une combinaison. C'est un Atoout, la première chose dont nous avons parlé. Ce sont des contraintes. La deuxième chose dont nous avons parlé, regardez ça, si je le fais glisser, vous verrez qu'il est là. C'est contraignant, mais pas pour la taille réelle de la page. Si vous avez activé les colonnes, il indiquera « Je vais juste ici ». Si vous n'avez aucune colonne, il essaiera d'utiliser le côté de la page. Vous verrez que les deux sont également sur le côté. J'ai réglé cette sortie automatique à gauche et à droite. Ainsi, lorsque je passe à la tablette, c'est ce qu'elle fait. Je peux faire la même chose lorsque je passe au mobile. Ce sont les trois domaines suivants Contraintes et guides de sortie automatique. Je veux vous montrer quand je les utilise parce que c'est important. Je vous montre tout dans ce cours. Je veux que vous sachiez laquelle est utilisée plus souvent, car il existe une troisième ou une quatrième option. Il existe l'option « ne rien faire ». Une grande partie de mon travail consiste une maquette qui ne nécessite aucune sortie automatique, aucune contrainte et aucune grille. Ensuite, j'utiliserai une grille. Permettez-moi de vous parler des moments où je les utilise le plus. Je finis par utiliser probablement les guides le plus parce que je veux de la cohérence lors de la conception, je veux des marges et je veux que tout s'y adapte. Même si je prévois de ne rien faire, mon premier niveau est de ne rien faire, de ne rien avoir. Dessinez tout cela et souvent je peux contacter mon développeur sans rien d'autre. Juste des cadres sur la page, rien n'est réactif, et nous travaillons ensemble depuis si longtemps qu'il n'a pas besoin de le voir, de se déplacer. Nous ne faisons aucun test avec des utilisateurs de téléphones différents, en fait, juste un tas de carrés avec des images alignées. Mais pour mon propre bien, j'ai souvent des guides juste pour assurer la cohérence entre les pages. Je ne veux pas que ce soit un peu comme ça sur cette page puis un peu plus loin sur celle-ci , je veux de la cohérence. La prochaine chose que j'utiliserais est la sortie automatique. Les sorties automatiques sont pratiques. Ils sont très faciles à créer et je peux changer les choses et je peux retaper des choses, en particulier des choses comme des boutons Avons-nous un bouton ici qui est Auto Layout ? Probablement pas. Peut-être là-dessus. Comment je teste mes cours Testez la vidéo avant de la faire avec vous. Avons-nous un bouton ? Voilà. C'est le bouton de sortie automatique, vous pouvez voir à quel point c'est utile. Je vais probablement m'occuper des boutons. Cela devient vraiment utile lorsque vous faites ce truc ici. Passons à celui-ci. J' utilise beaucoup d'audiots quand je me dis : OK, j'ai un truc cool D'accord, mais il m'en faut un tas. Je vais monter, dupliquer, dupliquer, dupliquer, d'accord ? Je vais tous les mettre sur Auto Out, puis je pourrai monter là-bas, là-bas. Vous pouvez voir à quel point c'est simple et rapide. Mais au début, lorsque je conçois ce produit, il ne s'agit jamais d'une sortie automatique Je le dessine juste pour lui donner son apparence, puis une fois que j' en aurai fait des tas, je le transformerai en autolou et je commencerai à m'amuser avec eux je le transformerai en autolou et je commencerai et je commencerai Bien, quoi d'autre ? Le dernier parle de contraintes. Les contraintes sont utiles lorsque vous en avez besoin. Supposons que vous obteniez quelque chose de relativement complexe ou du moins que vous sachiez que les développeurs peuvent interpréter votre design de différentes manières. Tu es du genre, non, non, non, tu dois absolument le faire. Passons à notre carte, décalons-en une, zoomons en arrière et tout le reste. Avons-nous une carte ? Disons celui-ci ici. Je veux qu'il sache que cela reste dans le coin supérieur droit et qu'il ne reste pas là. OK, j'avais besoin de savoir si cela se produisait. C'est un exemple assez simple, mais vous comprenez ce que je veux dire ? Par exemple, je ne veux pas que ça se divise en une seule ligne. Je veux que ça reste carré. Je veux qu'il soit en haut à droite, afin de pouvoir construire un prototype déplaçable et écrasable C'est vraiment difficile à expliquer parfois, vous savez, comme « Hé, la boîte verte dans le coin supérieur droit, quand elle passe en mode tablette, je veux qu'elle reste en haut, à gauche et à droite de l'image, mais en vous ignorant, vous finissez par avoir ça, je vais juste vous montrer, vous finissez par utiliser des contraintes. devient encore plus important lorsque vous travaillez dans une équipe plus importante et que vous transmettez des fichiers destinés à être réutilisés ne faut pas les laisser à eux pour que ça revienne et c'est comme si nous laissions le soin à l'équipe, et si je passe à mon composant principal et à ce truc ici, vous savez, ils l'ont en quelque sorte obtenu ici. Vous savez, vous pouvez facilement ajouter une contrainte pour qu'elle là où elle se trouve afin que tout le reste de l'équipe puisse l'utiliser comme prévu. C'est vrai. C'est comme si je ne savais pas. Est-ce utile ? C'est un résumé de l'endroit où j'utilise tous ces éléments dont nous parlons, de leur importance et du moment où ils apparaissent dans mon processus de conception. Mais il s'agit en grande partie d'un cadre contenant du texte, et tout semble vouloir être réactif, mais je ne le fais pas parce que je travaille avec quelqu'un avec qui j'ai déjà travaillé. Ils savent comment nous traitons les informations sur notre site Web, ils n'ont donc pas besoin d'une sortie automatique sophistiquée. C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. J'espère que cela a été utile. 36. Comment ajouter des lignes et des colonnes à une mise en page dans Figma page page: Bonjour à tous. Dans cette vidéo, nous allons mettre des bandes sur un document. On dirait où est Wally. Vous pourriez l'appeler Where's Waldo, le même gars. Ce que nous allons vraiment faire, c'est ajouter plusieurs grilles de mise en page. Nous allons ajouter nos colonnes comme nous l'avons fait, mais nous allons ajouter une rose cette fois et nous allons expliquer pourquoi nous nous embêtons avec cette grille de huit pixels. A sera révélé de manière ennuyeuse. Certains d'entre vous adoreront ça, d' autres se demanderont pourquoi tout le monde s'en soucie. Je m'en soucie. Alors allons-y. C'est bon. Ajoutons le premier. La règle par laquelle je commence la plupart du temps c'est que je vais supprimer mon cadre parental, et je vais aller sur Lou Guide, et je vais en ajouter une qui est une colonne, surtout quand je travaille sur mobile. Souvent, je travaille simplement avec une seule parce que je veux vraiment ce truc juste pour la marge. N'oubliez pas, travaillez par multiples de huit si vous le pouvez, donc j'en veux probablement 24. est cool, c' est que tout est fait ? Tout va bien ? Est-ce que maintenant je peux passer en revue et m'assurer de tout aligner, assurer que tout fonctionne bien, que tout est cohérent Je veux que ce soit ici. Et l'autre chose que nous pourrions faire pendant que je suis ici est de nous assurer que c'est cohérent. Pouvez-vous voir qu'il claque vers la droite mais non, il est allumé à gauche et à droite Excellente. Si ce n'est pas le cas, vous pouvez aller ici et dire « soyez à gauche et droite » pour qu'il s'attache à la colonne. Nous l'avons déjà fait. Là où cela devient encore plus cool, c'est lorsque nous ajoutons également des lignes. Cliquons sur le cadre parent. Passons à mon guide de mise en page et nous pourrons en ajouter plusieurs. Set Plus. Nous avons maintenant le premier et le nouveau appelé grille à huit points. je veux que Rose soit là avec un compte, tu peux passer à Auto et ce sera le cas, jetons-y un coup d'œil. Passons à cinq. Vous pouvez voir que par défaut, les lignes fonctionnent comme des colonnes. Ce n'est pas ce que je veux. Je vais donc le supprimer. Voyez-vous qu'il y en a un, deux, trois, quatre, cinq. Pour les lignes, par défaut, il est configuré pour s'étirer. Vous pouvez voir qu'il le fait. Ce n'est pas ce que je veux. Je veux un espacement régulier et constant. Ce que je vais faire, c'est aller ici, changer mes lignes en B. Régler les lignes sur Auto. Ensuite, il est dit s'étirer, je ne veux pas m'étirer, je veux commencer par le haut, puis je veux redescendre de huit points, c'est vraiment bien. Quatre, c'est mieux pour cette mise en page, vous donne un peu plus de contrôle. Vous pouvez voir que j'ai huit petits points et un caniveau de 20 points entre les deux. Je veux juste avoir quatre ou quatre ans. Je trouve ce genre de bâton rayé, des bonbons à la perche coiffeur Je n'arrête pas de dire Whiz Wally. On pourrait l'appeler Whiz Waldo. Pareil, pareil. OK, donc j' ai ça. C'est tout ce dont j'ai besoin. Et ce que nous pouvons faire, c'est cool maintenant, c'est que nous pouvons passer en revue et dire, en fait, que mienne est déjà parfaitement alignée, mais que vous faites glisser ma nef supérieure ici se répercutera sur ces multiples Je l'ai mis au bon endroit, en un clin d'œil. Allons y jeter un œil. Je vais coller l'autre, faisons-le en bas. Où a-t-il atterri ? Tout va bien, mais vous trouverez peut-être que le vôtre se situe à mi-chemin. Maintenant, le mien fait la queue. Excellente. Je vais recoller ce truc. Où es-tu allée ? C'est là que ça devient vraiment intéressant. Le texte est excellent lorsque vous utilisez cette hauteur de quatre pixels. Vous pouvez voir ici qu'il s' enclenche vers le bas. Super, je peux donc trouver le type à aligner sur cette grille. Ce qui est vraiment bien, c' est de prendre ça et de dire, en fait, je te veux. Tu peux voir en bas ici ? Il s'accroche à cette grille, puis vous pouvez voir sur celle-ci que ce n'est pas le cas Tu es du genre : « H, je veux que ce soit cohérent ». J'adore mes réseaux. Pourquoi ne sont-ils pas en réseau ? Celui-ci n'est pas aligné sur la ligne rouge, pas plus que celui-ci. Ce que vous devez faire, c'est vous assurer que, quelle que soit la police que vous utilisez, vous devez vous assurer que la hauteur de la ligne est divisible par huit Ce que je vais faire, c'est rendre ma taille de police divisible par huit Tu n'es pas obligée, mais je ne sais pas pourquoi c'était à 17 ans. Alors ici, en ce qui concerne la hauteur, je veux probablement que ce soit 24. Comme notre grille est divisible par huit, devrait en être de même ici Dans le premier, tout devrait être aligné. Tu es du genre à dire que je ne guéris pas. C'est bon. Tu n'as pas besoin de guérir. Mais ce qui est bien, c'est que je peux dire que je veux en réduire huit, pour la hauteur de la ligne, et tout s' alignera toujours sur votre grille. Tu dois décider à quel point les grilles sont importantes pour toi. Vous ne l'utilisez peut-être pas pour les polices, mais c'est certainement une bonne chose lorsque vous utilisez des éléments tels que des images. Tu peux voir celui-ci ici ? Il n' y est même pas. Maintenant c'est aligné. espacement constant est l'une de ces choses qui vous permettent de dire à quelqu'un, qu'il agisse d'un designer junior ou d'un designer senior s' agisse d'un designer junior ou d'un designer senior, que vous commencez à vous soucier non seulement de l'alignement, mais aussi de la cohérence entre les pages C'est trop serré. Tu peux faire Let's Go plus quatre. Je peux l'aligner et vous pouvez voir, écoutez, ah, c'est constant. C'est probablement ce que je veux atteindre 20 ans. N'oubliez pas : Shift G pour l'activer, Shift G pour le désactiver. C'est ainsi que vous pouvez ajouter plusieurs guides de mise en page au document et pourquoi. Et vous tomberez sur des gens qui font ça, vous vous demanderez pourquoi tout cela est rayé Pourquoi est-ce que quelqu'un s'en soucierait ? C'est parce que nous nous soucions de la cohérence mise en page, de la composition Oui, c'est trop loin. Oh, mais écoutez, parce que j'ai activé le réseau, je peux l'adapter à ce qui me convient. Écoutez, ce sont quatre lignes l'une de l'autre. Ceux-là aussi. Sympa. C'est bon, c'est ça Je vais voir dans la prochaine vidéo. 37. Comment créer et mettre à jour des styles de guide de mise en page pour les colonnes et les lignes dans Figma ma: Premièrement, nous allons voir comment créer un style de grille et mettre à jour un style de grille dans cette vidéo. Allons-y. Passons au coiffage. Commençons par un raccourci. G, active et désactive les guides. Disons que j'ai passé du temps à me procurer celui-ci. Je veux le mettre ici. Je vais d'abord y aller et dire : débarrasse-toi de toi. Je veux prendre celui-ci. Ce que tu peux faire, c'est cliquer. Souvenez-vous de cette étrange petite zone. Shift, attrape l'autre en dessous. Dans cette petite zone vide, allez copier, cliquez sur le nom de celui-ci, et peut-être que nous cliquons sur le nom de celui-ci, Coller. Cela ne fonctionne pas. Pourquoi ça ne marche pas ? Parce que celui-ci a déjà quelque chose d'appliqué. Ouais Vous ne pouvez pas appliquer plus de deux de la même chose. Mais je peux l'attribuer à deux d'entre elles. Je dois juste les nettoyer. Cool. De toute évidence, c'est le long chemin à parcourir. Ce que je veux faire, c'est en faire un style. Je vais le sélectionner, je vais passer à celui que j'ai créé et accéder à ce petit panneau d'étoiles et je vais dire que je veux ajouter un style. Je vais lui donner un nom. Je vais appeler celui-ci mobile. Je vais appeler cela une colonne, un charbon et cinq pioches ou rangées. D'accord, donnez-lui un nom que vous allez utiliser ou reconnaître, et je vais créer un style. Encore une fois, vous pouvez ajouter une description. Maintenant, je peux y aller. Et en fait, au lieu d'essayer de copier et coller rapidement, je vais dire que je vais ajouter le style que j'ai créé, appelé mobile Voilà. Maintenant, je le mets à jour. Disons que c'est votre style, disons que vous voulez changer celui-ci. Vous pourriez entrer ici, le casser, essayer d' en créer un nouveau , puis le coller sur tout le reste. Ce que vous pouvez faire, c'est que vous ne pouvez rien sélectionner et vous trouverez vos styles, comme tout le reste, dans votre panneau de conception en bas. Vous pouvez accéder à l'édition. Vous pouvez entrer ici et dire, en fait, que je veux aussi qu'il y ait une grille. Vous pouvez voir qu'il en a ajouté un troisième. Nous avons une grille, des lignes et des colonnes. Vous pouvez également décider de simplement modifier les lignes. Vous avez décidé d'utiliser huit pixels. Zéro. Je vais y retourner, mais c'est comme ça que tu fais. C'est en le briquant. C'est ainsi que vous créez et modifiez un style, en particulier un style de guide de mise en page. Très bien, mon ami, c'est ça. Vous êtes tous stylés. air bien. Je vous verrai dans la prochaine vidéo. 38. Animation avec accélération de transition personnalisée dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons faire de l'assouplissement personnalisé. Nous allons créer le nôtre où nous pourrons faire de belles choses. Au lieu des valeurs par défaut, cela peut ressembler à toutes les autres, mais nous l'avons personnalisé. Je vais te montrer. C'est ce type d' assouplissement qui nous permet de jouer avec facilité et de faire ce que nous voulons. Cela ne fait qu'empirer les choses , mais parfois les améliorer. Allons-y. Tout d'abord, j'ai un cadre vide, pas un cadre vide. Le cadre que j'ai dessiné et qui est censé être un ticket ressemble à un drapeau. Si vous voulez voir comment je fais ces choses, vous pouvez dire que nous en avons déjà fait la plupart. Nous sommes venus ici pour un assouplissement personnalisé. J'ai besoin de deux cadres. Je vais juste appuyer sur Command D, Control D sur un PC. Animation 1 Maintenant, j' ai l'animation 2. Ce que je dois faire, c'est qu'ils doivent être différents. Je voudrais commencer par là . Tout d'abord, je vais les regrouper. Groupez ça. Maintenant, c'est une chose intéressante, regardez. C'est ce qu'on appelle le groupe deux maintenant parce que je viens de le regrouper. Tout est passé en Command G ou Control D sur un PC ou vous pouvez cliquer dessus avec le bouton droit Celui-ci, si je le regroupe, c'est pareil. Qu'est-ce qui a fini par se passer. C'est ce qu'on appelle le groupe 3. Les animations ne fonctionnent pas. Quand leurs noms sont différents. C'est différent de ça. Je peux faire l'une des deux choses suivantes. Je pourrais le regrouper avant dupliquer ce cadre, cela fonctionnerait Ou je peux juste m'assurer qu'ils portent tous les deux le même nom. Si votre animation ne fonctionne pas, vérifiez que les noms sont identiques pour les deux animations. Co. La prochaine chose que je veux faire est de faire glisser, ça va démarrer hors de l'écran puis apparaître à l'écran. Maintenant, que va-t-il se passer ici ? Cela va sortir de mon animation. Je ne veux pas que ce soit en dehors de ça. Il doit toujours être dedans, mais à l'extérieur, qui se souvient du raccourci ? C'est exact. C'est un peu déroutant. Vous commencez à faire glisser le pointeur, puis maintenez la barre d'espace enfoncée, et elle sortira vers l'extérieur Vous pouvez maintenir la barre d'espace et Shift enfoncée, et tout ira tout droit Il y a beaucoup de raccourcis et maintenant ça devrait fonctionner. Il suffit d' ajouter la transition entre les deux pages. Cliquons sur celui-ci. Passons au prototype. Vous pouvez soit cliquer sur le bouton, soit mémoriser le raccourci. Vous vous souvenez maintenant que c'est l'option neuf, huit, neuf, huit, neuf, ou Alt, huit, neuf, neuf pour obtenir votre prototype, huit pour revenir à la conception. Je sais que tu sais. C'est bon. Nous allons cliquer dessus et le faire glisser. Nous allons dire « on tap ». Bien sûr. Accédez à cette page. Génial. L'animation sera Smart Dissolve et nous allons utiliser Commençons par I like in and out. Ça a l'air bien. Cliquons sur «   off ». Prévisualisons-le. Une autre chose que nous allons faire est que si votre flux n'apparaît pas ici, supposons qu'il n'y figure plus. Débarrasse-toi de ça. Vous pouvez cliquer sur cette première page, sinon, si vous commencez le prototypage, le prototypage s'affichera la première page du document, ce qui n'est pas le cas Surtout lorsque vous recevez un document plus volumineux comme nous, vous êtes comme le « vous ». Vous pouvez dire que vous allez commencer par le point de départ. Là-bas ? Maintenant c'est très simple, il suffit de cliquer sur ce bouton. Pas de raccourcis, rien. Cool. J'ai dit : « Que devons-nous faire ? Rien ne se passe, Dan. Pourquoi ? Parce que nous avons dit « on tape, on tape » et voilà. Nous avons une animation de base, mais nous voulons créer une animation personnalisée. Nous allons cliquer dessus. Ce truc peut être déplacé. C'est toujours au mauvais endroit pour moi, mais tu peux faire glisser le haut. Nous allons passer de la courbe préfabriquée à un bézier personnalisé C'est votre courbe de Bézier, et elle sera différente de mienne en fonction de votre première C'est à l'entrée et à la sortie. Voilà à quoi ça ressemble. Si je parle de facilité d'entrée, puis de retour à Bézier personnalisé, voici quoi ressemble ESN. Nous personnalisons quelque chose que nous avons déjà sélectionné. C'est peut-être direct. Si elle est droite, cela signifie qu'elle ressemble à ceci, donc elle est linéaire. Puis je reviens à la coutume, c'est comme si tout avait disparu. Permettez-moi de vous expliquer rapidement ce que nous voulons faire c'est que vous pouvez cliquer sur ces points et les faire glisser n'importe où. Si vous avez déjà fait glisser quelque chose, vous pouvez faire glisser cette petite poignée ici et simplement la déplacer. Tu peux en avoir deux. OK, faisons quelque chose de fou et faisons-le. Vous pouvez les faire glisser dans toutes sortes d'endroits étranges. Allons-y comme ça. ce que va faire notre animation. Je vais donc appuyer sur le petit bouton de jeu et je clique une fois, bizarrement. Tu peux faire toutes sortes de trucs sympas. La principale que vous allez utiliser Yk est cette courbe en S qui est belle. C'est ce que sont l'entrée et la sortie, mais l'entrée et la sortie sont vraiment subtiles. C'est comme ceci ou cela. J'aime le saisir et le sortir et aller encore plus loin moi-même. Donc c'est comme ça. Ça va très lentement au début, super rapide au milieu, super lent à la fin. Celui par défaut est vraiment subtil. J'aime le maximiser. Combien de temps cela va-t-il prendre ? Nous allons faire en sorte que cela prenne une demi-seconde. Combien de centaines de millisecondes ? C'est vrai, 500. 1 000 c'est une seconde, 500 c'est la moitié, donc une demi-seconde. Allons-y ici. Prévisualisons, cliquez une fois. C'est sympa, n'est-ce pas ? Je me suis retrouvé assez vite au milieu et j'ai bien calmé. Tu es comme si je l'avais raté, Dan. Archie des membres, nous allons la réinitialiser, cliquez à nouveau. Sympa. J'aime bien passer en revue les modèles préfabriqués, si vous voulez, je ne peux pas faire la différence Ne vous embêtez pas à faire du custom plus occupé , car c'est une si petite chose Regardons quelques points. Je veux juste te l'expliquer. Passons donc à Esn et revenons à la personnalisation Il est si difficile de comprendre ce qui se passe. Mais si vous vous tracez un petit graphique, le mouvement du temps. Est-ce que c'est le X ? Nous allons voir que le X en bas représente le temps, et voici le mouvement. Donc, si je le fais, ce qui est le cas d'Es in, c'est au fil du temps, disons qu'à mi-chemin , c'est autorisé , soit une demi-seconde, faisons-en une seconde. Créez simplement une masse facile pour que le temps ici soit 0 seconde, soit zéro et soit 1 seconde. Donc, ce que vous verrez, c'est qu' à mi-chemin, il n'a fait que très peu de mouvements. Tu le vois ? C'est le mouvement depuis lequel nous l'avons lancé jusqu'ici. Donc, si nous traçons une petite ligne ici, nous montons ici pendant la moitié de ma seconde, cela n'a fait que très peu de mouvement. Il doit donc tout faire à la fin. Donc, dans la dernière moitié de la seconde, il déplace une énorme partie. C'est pourquoi cela s'appelle Ease In. Ça va aller lentement lentement, donc f. Donnons-lui un petit aperçu. C'est utile, d'accord. Tu vois, super lent au début, super rapide à la fin. Le contraire, c'est que E est éliminé. J'ai désactivé Ease pour pouvoir ensuite vous montrer Bezier Up personnalisé C'est tout le contraire. Si je le prolonge juste pour l'accentuer un peu plus, au bout d'une demi-seconde, si vous montez ici, si vous le regardez et essayez de le trouver là où il se rencontre, vous pouvez voir qu'il est presque terminé en une demi-seconde Le reste de la seconde passe très lentement parce que j'ai comme si j'avais une demi-seconde pour terminer cette dernière partie du mouvement. Sens. Dan agite sa souris. Si vous ne le savez pas, mélangez-les, prévisualisez-les. Vous aurez une idée du mouvement du temps. Ça a l'air vraiment bien. Vous pouvez en fait double-cliquer sur ces éléments et ils disparaissent. Ce qui semble vraiment bien, c'est cette courbe en S. Celui-ci ici, vous le connaissez peut-être grâce à d'autres programmes. Nous utilisons beaucoup Photoshop et toutes sortes de retouches photo pour les courbes. Ça a l'air bien. Ensuite, il suffit de choisir le bon moment. Vous pouvez simplement le faire glisser. Pourquoi ne traîne-t-il pas ? Avant, j'en étais capable. Je parie que tu seras capable de le faire. Il y a une raison pour laquelle la mienne aujourd'hui ne fonctionne pas. Je vais donc baisser le mien à 750. Essayons-le, prévisualisons-le, cliquez dessus. Regardez nos coutumes. C'est bon. Continuons avec notre animation. Donc ça. C'est l'assouplissement personnalisé. Vous pouvez passer à autre chose si c'est le cas, mais si vous voulez rester dans les parages, nous ferons un peu plus d'animation, et je vais vous montrer comment je l'ai dessiné. Je vais cliquer dessus et passer à la commande D. Si vous appuyez accidentellement sur Shift D chaque fois que vous voulez, que se passe-t-il ? Tu es déjà venu ici ? Vous êtes en mode développeur. D'accord ? C'est le mode le plus effrayant. Nous en parlerons un peu plus tard, mais revenons ici pour le design. D'accord ? Donc, la commande ou le contrôle D que je veux faire, c'est qu'une fois arrivé ici, je veux qu'il attende un peu puis qu'il s'éloigne au loin. Je vais cliquer sur mon ticket, commencer à le faire glisser, maintenir la barre d'espace enfoncée et déplacer, le tout s'enclenche ici. Ce que je pourrais aussi faire, c'est cliquer dessus et désactiver le contenu du clip. Ça sonne toujours, mais au moins je peux le voir. Pareil pour celui-ci. C'est un peu dur. Vous vous demandez : « Où est-il ? Je sais que c'est quelque part ici où je peux dire, désactivons le contenu du clip. Cela ne change pas mon animation, elle me facilite juste un peu le travail. Très bien, maintenant je dois dire que vous allez avoir la neuvième option de prototypage Je vais y aller, aller ici. Il va essayer de se souvenir de certaines choses, mais je ne veux pas qu'il soit activé. Je veux qu'il traîne un peu. Après un délai de oui, maintenant ça marche. Regarde. Maintenant, je veux taper dessus. Attends, laisse-moi taper. C'est bon. Il fait des trucs bizarres. Oui, alors allons-y ? Après tout ce temps. Ça n'a pas d'importance. Accédez à la page. Instantané. Non, je voulais toujours utiliser Smart Animate, et je vais le laisser comme valeur par défaut Donnons-lui d' abord un aperçu. Alors montons. Cliquez immédiatement. Après un certain temps, ça va partir. Faisons un autre assouplissement personnalisé. D'accord ? Donc, au lieu de me simplifier les choses, je vais passer à la personnalisation. Ça, c'est fini. Ce que je veux faire, c'est que ça commence lentement. Cela signifie que je vais cliquer dessus et le faire glisser vers l'extérieur. Je vais commencer doucement. Au fil du temps, ça ne va pas faire grand-chose parce que je vais le faire glisser de cette façon. C'est lent au début et je vais m'y prendre aussi. En fait, ce que je veux faire, c'est revenir un peu en arrière. C'est ce qu'on appelle l'anticipation. Il se penche en arrière avant d'avancer. Nous le faisons tous lorsque nous marchons. Personne ne commence simplement à avancer. Nous mettons tous notre poids sur le dos de nos pieds, comme un bossu C'est parfait pour le type et les billets, et je pourrais faire comme ça. Un peu de timing. Je ne sais pas exactement ce que cela devrait être. Combien de temps cela devrait-il prendre ? Aussi longtemps. Essayons-le. Oui, cliquez une fois. Ça va attendre un peu, puis ça va reculer. D'accord, donc ça n'a pas marché. Cliquons à nouveau dessus, et il y en a beaucoup. Je ne fais jamais assez d'animations pour y aller. Oh, je sais exactement ce que cela doit être. D'accord. Cliquons sur celui-ci ici. Celui-ci était trop nerveux, alors je vais essayer de l'étirer. Il faut donc beaucoup de temps pour avancer, puis ça va décoller, et j'ai probablement besoin de plus de temps en général. Mais encore une fois, cela vient avec l'expérience. Tu seras nul pendant longtemps. Mais améliorez-vous. Cliquez une fois, attendez, en avant, en arrière. Oh, c'était presque ça. C'est plutôt bien, non ? C'est juste un peu lent. Un peu plus vite. Très bien, alors allons-y et jetons un coup d'œil. Qu'est-ce que je changerais ici ? Pro zoome. Il a retrouvé le droit. Je pense que c'est peut-être un peu plus rapide. Pas trop différent car je veux qu'il commence à zoomer Peut-être ça dans un petit moment. Très bien, alors allons-y. La dernière fois. Ça y est, peu importe ce que c'est, je vais vous en laisser assez. Ce n'est pas correct. Nous allons le laisser parce que vous pouvez tout gâcher pendant des lustres. La dernière chose que je vais faire est d'y aller et de désactiver le contenu du clip sous Design, Remember, Option ou Alt 8. Retour au design. Je vais parler du contenu du clip juste parce qu'il gêne là-bas et je vais le déplacer et tout le reste. Alors maintenant je peux faire entrer ce type. Je viens de le faire sortir de l'écran. Ce que je veux de celui-ci, c'est dire Option ou Alt neuf. Je dirais que vous allez ici, et je ne vais jamais voir un Bézier personnalisé fonctionner lorsque vous faites une dissolution parce que je voulais juste me dissoudre dedans Vous pouvez jouer avec le Besier personnalisé autant que vous le souhaitez, ou même jouer avec celui-ci. Vous ne les remarquez tout simplement pas. Quoi que vous choisissiez, vous ne le remarquez tout simplement pas. Je l'ai dit un million de fois. C'est vrai Vous êtes comme ça, ai-je mis un chronomètre dessus ? Je n'ai pas essayé de cliquer. La valeur par défaut était le clic. Je dois dire que vous n'êtes pas sur le point. N'oubliez pas que si vous utilisez un appareil mobile et qu'il le sait, c' est sur un clic s'il utilise autre chose qu'un mobile. Il est utilise autre chose qu'un mobile clair qu'un téléphone portable fait la même chose. Je vais dire non, après un certain délai, que je vais probablement descendre à zéro. Vous ne pouvez pas avoir zéro en fait, seul le point ne peut avoir qu'une milliseconde. C'est bon. Allons-y Aperçu, regardez-nous. Nous avons fabriqué certaines choses avec des facilités personnalisées. Maintenant, créons un ticket très rapidement. En fait, la seule chose à vous rappeler, est que si quelque chose ne fonctionne pas, nous en avons parlé au début de la fin, mais si je créais ce numéro trois et que je faisais exactement la même animation, regardez-le mais si je créais ce numéro trois comme une fois. J'ignore simplement toutes mes animations parce qu' ne peuvent pas les relier entre elles et je ne sais pas quoi faire car ce n'est pas pareil Ça dit : « Eh bien, tu n' as nulle part où aller et tu apparais comme par magie dans le groupe trois Je vais juste vous demander de vous intégrer par défaut. Si vous avez des choses qui s' estompent au lieu de bouger, c'est un nom de poulet. C'est généralement toujours le problème. seul autre problème, c'est que ça peut finir, si tu le fais glisser maintenant, il est toujours dedans. Mais si je le fais traîner, nous savons que même si nous pensons qu'il essaie de monter là-haut, cadrage ne fait pas partie de mon animation. Il est juste en train de traîner tout seul là-haut. Vous devez simplement vous assurer que lorsque vous les faites glisser vers l'extérieur, disons ceci, vous maintenez la touche de la barre d'espace enfoncée pendant que vous la faites glisser afin qu'elle ne quitte pas le cadre, même si elle en a l'air Ça embrouille les gens, Dan. Comment l'ai-je construit ? D'accord ? Je tiens à vous montrer ceci parce que maintenant tout le monde suit le cours de base. Je vais donc commencer par un rectangle. OK, je vais le dessiner. Je vais revenir en mode design, qui est l'option ou la touche Alt 8, d'accord ? Je vais lui donner une couleur de remplissage pour mes styles. Créons-en un de couleur différente. 500. Tu peux passer à autre chose. Je suis juste en train de le concevoir. Je veux l'Oki pour le cercle, maintenez la touche Shift enfoncée pour obtenir un cercle parfait. Peu importe de quelle couleur il s'agit. Je vais le faire. Faisons-en deux pour celui-ci, parce que nous sommes passionnants. 12, prenez-en un autre ici. D'accord, nous allons utiliser les outils de dessin. Est-ce que quelqu'un se souvient comment utiliser ces cercles pour le découper ? C'est délicat. Nous devons passer à l'outil de dessin. Nous sommes sur l'outil de dessin, et il n'y a toujours pas d'option ici. J'ai toujours envie d' y aller jusqu'à ce que je me demande : « Comment est-ce que ça s'appelle ? » Générateur de formes. C'est l'outil. Donc, avec le produit sélectionné, comme Where's the shape Builder, j'ai pensé qu'il était là. Vous devez d'abord l'aplatir , puis le Shape Builder apparaît C'est MK. Oui, K. Oh, je sais. Tu es comme si tu n'étais toujours pas là en bas. Je l'ai transformé en vecteur. C'est ce que j'ai fait quand je l'ai aplati. À l'heure actuelle, il y a tout un tas de couches différentes. J'ai dit d'aplatir en un seul vecteur. Smush. C'est un vecteur. Il n'y est toujours pas. Si vous double-cliquez dessus pour accéder à l'intérieur , cliquez trois fois dessus pour y accéder, vous êtes dans ce vecteur et vous obtenez l' outil que nous voulons. Le Shape Builder. Souvent, je aplatis, puis je tape simplement sur le MK Je veux me débarrasser de certaines choses. Pour m'en débarrasser, si je veux les ajouter, je les fais glisser. Si je veux les supprimer, je maintiens l'option KoaCoh KPC enfoncée option KoaCoh KPC Je ne fais que les traîner. Vous pouvez également cliquer dessus. Il y a une limite là-dedans dont je veux me débarrasser. C'est donc mon billet. La star, c'est facile. La ligne. En fait, l' étoile se trouve juste sous l'étoile. D'accord ? Faites-le glisser vers l'extérieur. Maintenez Shift enfoncé, maintenez Shift enfoncé, et je vais styliser le mien D'accord. Et je veux la ligne pointillée. Je vais utiliser la touche Al pour l'outil linéaire. Je vais tracer une ligne vers le bas, en maintenant la touche Maj enfoncée, pour que ce soit strict. Je vais m'assurer que le poids augmente. Je vais le traîner jusqu' à ce que j'aime. Maintenant, la ligne pointillée se cache sous le profil de largeur ? Non, ces lignes pointillées, oui. Donc, ce petit réglage, on peut dire style. Je veux me laisser abattre. Quel genre de fringant voulons-nous ? J'aime la version arrondie, d' accord ? Pas de casquette. D'accord ? On l' appelle normalement. Lequel s' appelle, ils ne les appellent pas dans celui-ci. Ils ne les appellent illustrés que des casquettes, dont j'adore le nom. Ce ne sont que des capuchons arrondis. Comme j'ai 12 ans, nous allons faire le tour du tableau de bord. Le tien a peut-être l' air un peu bizarre. Tu dois jouer avec les tirets et les écarts. Pour moi, les tirets doivent être plus petits, pas 23 ou trois, et l'écart, je veux être de dix Il suffit de jouer avec les tailles. Obtenez-le comme vous le souhaitez. Très bien, ces lignes. Ils sont plutôt cool, non ? C'est la même chose. Ligne deux, tracez une ligne. OK, je vais faire mes valises, et je vais passer à ce profil de largeur. Déposez ça. Pas celui-là. Nous allons revenir aux paramètres, et nous allons passer au profil non pas au profil de largeur, mais aux pinceaux. Pour passer à la base, nous allons passer au pinceau. Et je dois dire que j'aime bien ce pinceau. Les pinceaux sont là. Ceux que j'ai trouvés, je ne me souviens plus lequel j'ai utilisé. Je pense que je vous en prie, gardez-le là. Maintenant, ce que tu peux faire, c'est que je déteste, je ne sais pas, quand les coups se ressemblent. J'y passe beaucoup de temps. Je vais le reproduire plusieurs fois. Je passe un peu de temps à me dire : « D'accord, je veux que tu puisses inverser la direction, pour que celle-ci soit différente Je peux allonger celui-ci un peu, saisir le petit point , le faire glisser plus longtemps. D'accord ? Celui-ci va être inversé Ça va être un peu comme ça et il va y avoir un tout petit degré de moins. Je ne sais pas Je passe beaucoup de temps à faire choses dont personne ne se soucie. D'accord. Je vais faire un saut parce que je passe du temps à trouver le bon angle là-dessus. Donc oui, j'ai un peu de hasard. Voilà. C'est mon billet. Comme le premier, encore une fois. Mais de toute façon, pourquoi sommes-nous venus ici, Dan ? Nous sommes venus ici pour un assouplissement personnalisé. C'est facile. Je voulais en quelque sorte intervenir et rappeler aux gens les particularités de la création d' animations, car chacun a un niveau de compétence différent avec ses animations de prototypage actuelles et vous montrer comment créer une Vraiment moche. Je vous verrai dans la prochaine vidéo. 39. Projet de cours 10 - Vérifiez l'animation: C'est bon. C'est un projet de classe. Je veux que vous créiez votre propre animation de paiement. On vous a demandé de créer une animation à succès après que quelqu'un ait acheté un billet. Ils ont saisi les informations de carte de crédit, ils ont cliqué sur Soumettre, c' est à partir de là que je veux que vous fassiez. Nous avons fait quelque chose de similaire dans la dernière vidéo. J'en ai juste simulé un. Est-ce que celui-ci est là ? Quelqu'un a acheté un billet, il apparaît, et voilà. Je veux que tu fasses le tien. En fait, ce que nous faisons ici, c'est que je veux que vous vous entraîniez avec Cust, alors créez trois images ou plus pour votre animation Cela peut être simple, cela peut être avancé. Vous pouvez avoir des marques de coche et des animations partout, jusqu'à vous. Une fois que vous aurez terminé, je veux que vous partagiez une vidéo de votre animation et que vous téléchargiez la durée des projets de classe. Sinon, si vous êtes les vidéos qui me tuent, vous pouvez simplement faire une capture d'écran en mode prototype pour que je puisse voir tous vos fils. Mais j'adorerais voir la vidéo. Partagez sur les réseaux sociaux si vous faites également la vidéo. Tague-moi. J'adore voir à quoi ressemblent les premières animations à succès de chacun . Elles peuvent être très graves. Mais ils n'ont pas besoin de l'être. Profitez du projet de classe. Assurez-vous de jouer avec l'assouplissement personnalisé. Souvent, vous pouvez aggraver les choses, mais ce n'est pas grave. Nous jouons avec ce paramètre. Ensuite, je vous verrai dans la prochaine vidéo. 40. Comment copier et coller des interactions dans Figma texte: Bonjour. Dans cette vidéo, nous allons examiner les interactions par copier-coller Tu passes beaucoup de temps à les faire. Le raccourci est simplement de cliquer sur l'aiguille, de le copier et de le coller. Il y a quelques petites choses que nous devons régler, alors nous allons y travailler ensemble. Mais tu es venu ici juste pour ça, c'est tout ce que tu fais. Sélectionnez-les, copiez-les et collez-les. Mais entrons un peu plus dans les détails. D'accord, cela fonctionnera avec n'importe quelle animation ou interaction. Ce que j'ai, c'est que je vais en avoir un aperçu. C'est juste que ça passe à la suivante. Ce que j'ai fait, c'est que j'ai passé beaucoup de temps à travailler sur des choses comme look my own custom easing, déjà personnalisé, la facilité d' entrée et de sortie. J'ai abandonné l'animation. Au lieu de l'animer instantanément, de le dissoudre ou de l'animer intelligemment, je le déplace et nous faisons défiler la page vers le bas Si vous le survolez, vous pouvez voir qu'il pousse simplement une image vers le bas par rapport à la suivante Vous l'avez compris du haut, donc j'ai beaucoup travaillé. Ce que je veux faire, c'est ne pas avoir à le faire pour chacun d'entre eux. OK, ce que je peux faire, c'est que je l'ai fait de deux manières. Je peux cliquer sur ce fil ici ou sur Noodle, et passer à Command ou Control C, juste une vieille copie normale, puis je peux dire que le coller fonctionne Si j'annule, tu peux le faire pour tout ça. Et toi. Boom, tu as tout ce qu'il faut. Il a tout fait sauf une erreur. Ce que nous avons fait, c'est si j'annule tout et que celui-ci a l'interaction de dire qu' il fait tout cela, mais qu'il est écrit de naviguer vers l'animation 5. Je ne sais pas comment le faire passer à suivante plutôt qu'à cinq parce que si je le colle dessus, ce type redevient lui-même parce qu'il a cinq ans. Je dois dire, en fait, pas à cinq. Va à celui-là. Mais tout le reste arrive, toute cette personnalisation, le déménagement, tout le chronométrage que vous avez fait Pareil pour celle-ci, pâte, vous devez en faire un peu . Parfois, ces nouilles se transforment en nouilles croisées. Je ne veux jamais croiser des nouilles Cliquez sur le titre en haut ici, passez en mode prototype. N'oubliez pas, option 8, Altate. Non, il est neuf heures. C'était un test. Je peux dire, en fait, qu'au lieu de passer à cinq, allons-y deux. Quelle est la prochaine ? Sept. Voilà. Maintenant, cela devrait fonctionner. Allons-y. Oup. A, le rythme. Ce soir, c'est la nuit. C'est un peu lent. y a quelque chose de bizarre là-dedans de toute façon. Mais c'est le conseil. Tu peux le faire d'une autre manière. J'avais l'habitude de le faire de cette façon. Je veux juste vous montrer, disons, que je veux tout copier à partir de ça. J'aime vous montrer ces deux méthodes simplement parce que certaines choses sont étranges. Vous ne cliquez pas dessus car cela l'ouvre. Tout ce que vous voulez faire est de cliquer sur cette petite zone étrange ici, la fenêtre qui est sélectionnée. Je peux simplement utiliser ma copie habituelle, puis je peux aller dire, coller, mais y aller. Cela n'a pas vraiment d'importance. C'est une bonne idée facile. Copier et coller des interactions dans Figma. C'est ça. Vidéo suivante. 41. Animation dans les variantes dans Figma: Un. Dans cette vidéo, nous allons voir comment ajouter une animation. Au lieu d'utiliser la méthode image par image que nous avons précédemment et que beaucoup de gens utilisent, nous allons le faire comme ça. Vous pouvez réellement animer entre les variantes et obtenir la même chose Cette animation remplace donc tout cela. Nous pouvons l'utiliser comme de petites unités. Regardez ce petit bonhomme ici, nous allons lui donner un aperçu. Tout se passe à l'intérieur de ce type. Cool. Oh, même un bouton. Nous allons même créer un bouton qui se déplace vers l'intérieur. Vous pouvez voir la même chose. Il s'agit simplement d'un composant qui contient deux variantes. Vous ne pouvez pas voir celle du haut, celle du bas, et laissez-vous impressionner par l'animation très moyenne. À la fois le bouton, le bouton. D'accord, ça pourrait être mieux. Mais c'est cool et c'est vraiment pratique, ranger nos animations Plus de mille images pour animer des choses simples. C'est bon. Allons-y. OK, je suis donc en mode prototype, option ou Alt neuf. Vous pouvez voir que je l'ai fait plus tôt où nous avons réalisé ce type d'animation étape par étape, image par image. Beaucoup de gens le font, vous pouvez le faire, mais évidemment, c'est compliqué, non Donnons-lui donc un bref aperçu pour voir ce que nous avons fait. Ça fait ça. Nous allons faire quelque chose de légèrement différent. Nous allons simplement faire apparaître le texte. Mais au lieu d'avoir à sauter d'un cadre à l'autre, nous allons tout faire dans des variantes. Commençons par W si nous le faisons ici. Je vais revenir au design. Option ou Alt Height. Je vais aller ici. Et nous allons en faire une option de composant K ou Control Alt K. C'est un composant. Je veux des variantes. Je vais donc en faire un, deux, trois, quatre. Cela n'a pas marché. Vous ne pouvez cliquer dessus qu'une seule fois. Alors je vais y aller. Sur quoi ai-je cliqué, écrasant tous les boutons ? C'est bon. Revenons en arrière, annulons, annulons et faisons. Variantes de tête, ne cliquez sur rien d'autre. Je vais le dupliquer, j'ai cliqué dessus. J'ai quatre mots. Ce soir, c'est la nuit. Je vais juste changer le texte et les couleurs. Vous attendez, nous passerons en mode vitesse. C'est tout ce que j'ai fait. La prochaine chose que je veux faire, c'est que je puisse réellement utiliser un prototype comme nous l'avons fait ici. N'oubliez pas que nous avons cliqué dessus, nous avons dit mode prototype, facultatif, lt neuf, et nous avons fait glisser des nouilles entre les deux Vous pouvez réellement le faire entre les variantes de cet ensemble de composants. Vous pouvez dire, en fait, assurez-vous en mode prototype, de zoomer un peu. Tu peux en fait traîner une nouille d'ici jusqu'à ce gars. Je veux le faire n'est pas sur le pouce, je tiens à le dire après un délai de quelques secondes. Je voulais passer à cette autre variante , appelée variante deux. Nous allons le faire pour faciliter la prise en main. Je ne suis pas trop inquiet, combien de temps cela va-t-il prendre ? Je ne sais pas Pour une raison ou une autre, je ne peux pas cliquer sur le mien maintenant. C'est un bug. Si j'efface cette idée, elle reprendra vie Quoi qu'il en soit, juste pour que tu saches, parfois figma est un peu bizarre. J'ai vraiment envie de le taper. Quoi qu'il en soit, nous l'avons. Je pense donc que cela va fonctionner. Après un certain temps, passez à cet anime intelligent. Nous pourrions en fait le dissoudre si nous le voulions. Ce n'est pas un problème. D'accord, laissons celui-ci emporter Trouve celui-ci. Je ne me souvenais pas de tout. Il s'en est souvenu en partie, mais il veut le faire dès maintenant. Je dois dire qu'après un certain délai , nous voulons vraiment le saisir. Tout le reste est parfait. Cela me donne une bonne excuse pour utiliser le copier-coller. Je vais cliquer sur la nouille, la copier, passer à celle-ci , la coller Elle va essayer de revenir à elle-même, mais elle y retournera après temps, tout devrait être une bonne chose. En partie là-bas. C'est comme animer entre les images Nous le faisons simplement ici dans cet ensemble de composants entre les variantes. Beaucoup de mots ? Ce que je vais faire, c'est créer un nouveau cadre pour cela. En fait, je vais en faire un iPhone 6. Eteen. Vous pouvez venir ici à quel point notre uppud est désordonné Choisissons une couleur de fond. Option 8, Alt 8, revenez au design, et je vais en choisir une parmi celles-ci et je veux l'une des couleurs sombres. 900 de n'importe lequel d'entre eux, en fait. Prenons une instance de ceci et faisons-la glisser vers l'extérieur. Je maintiens l'option CaCL PC ou vous pouvez la copier-coller. Maintenant, ce qui est cool, c' est que l'animation est intégrée. Cela peut aller sur ma page de composants. Je n'ai pas besoin de ces déchets. Prouvons d'abord que cela fonctionne. Passons à vous et disons Shift Space bar pour l'aperçu. Ce soir, c'est la nuit. Cela doit être plus rapide, mais vous voyez l'idée. Ce qui est vraiment cool, c'est que nous pouvons faire plus que regarder. à quoi nous nous sommes limités, en particulier dans celui-ci, que le temps entre les pages est le même. Si je veux que quelque chose apparaisse, disons, faisons-le dans celui-ci pour vous en donner un exemple. Je vais juste utiliser un cadre vide avec une couleur de votre couleur. Tant qu'il s'agit d'une variante, vous l'avez. J'ai ceci. J'ai besoin que ce soit une copie, je veux que ce soit sur tous ces cadres. Mais je veux que le moment soit différent. Disons que je veux qu'il commence à venir de ce côté, passe au milieu, puis qu'il descende vers le bas et qu'il remonte. Je dois faire le ticket à l'heure que j'ai fixée. Je vais passer en mode prototype. Quelle que soit ma décision, cela affectera tout ce qui se trouve sur cette page. Donnons-lui un aperçu. Cliquez une fois que cela s'installe. Tu vois qu'ils sont exactement les mêmes ? Pourquoi le dernier n'est-il allé nulle part ? Celui-ci, ici, s' appelle frame 22. C'est quoi cet appel ? Cadre 22 ? C'est parce que la transition entre ici s'estompe. Tout cela a du sens. Mais vous voyez l'idée, le moment est le même. C'est là que cela devient pratique. Annulons cela. Permettez-moi d'en faire plus, par exemple. J'ai cette configuration en bas. J'ai créé un background en IA en utilisant des trucs informatiques des années 80. Ne t'inquiète pas pour le texte. Regardons le bouton. Si je devais le faire, je vais le prévisualiser , Shift Spacebar. Pouvez-vous voir le bouton apparaître et apparaître ? C'est comme ça qu'on le construit, non ? Vous avez deux cadres distincts et vous animez entre eux. Mais supposons que vous vouliez que le texte apparaisse , mais à un autre moment, vous ne pouvez pas, car le texte doit faire exactement la même chose que le bouton. Donc, le moyen de contourner ce problème est de construire exactement comme nous le faisions auparavant, tout intégrer dans sa propre petite animation. Je voudrais en faire un autre juste pour , je ne sais pas, pour que les choses soient claires. parce que je vais le supprimer en fait, et récupérer mes actifs J'ai du crédit dans ce fichier sous composants. Alors que M ne lui a pas donné de nom, n'est-ce pas ? Comment ça s'appelle ? Je ne m'en souviens pas. Que faisons-nous ? C'est où ? C'est ici. Copions-le. Revenez en mode design. Oh, ce n'est pas dans la page des composants. C'est pourquoi je ne l'ai pas trouvé. Ça y est. Je traîne là-bas. Ça l'est quand même. Je l'ai donc ici, Shift Spacef pour un aperçu Il fait sa propre petite animation, et ce qui est cool, c' est que je peux dire que vous pouvez faire ce que vous voulez. Construisons le sien. Dans ce cas, je veux faire deux choses : je ne veux pas que ce soit une sortie automatique parce que je veux que le texte se déplace. Le texte est coincé au milieu en tant que sortie automatique Nous avons examiné cette question avant dire « supprimer toutes les sorties automatiques ». Génial. J'ai un bouton avec des textes dessus. Rien n'est automatique. Ce que je veux faire, c'est sélectionner les deux. Faisons-en un composant, command shift, command shift, k, control shift K. Non, cela ouvre l'option de commande K ou Control Alt K. Maintenant c'est un composant. Excellente. Ajoutons une variable. Dans cette variable inférieure, je vais récupérer les composants et agrandir un peu. J'ai de la place. Je veux que le texte à l' intérieur se déplace un peu vers le bas. N'oubliez pas de ne pas sortir. Je tiens juste la barre d'espace enfoncée pour qu'elle se déplace vers le bas parce que ce que je veux, oh, je veux l' inverse. Je veux donc commencer par ça. Je vais dire que tu viens ici. Vous pouvez simplement utiliser vos rakeys si vous le souhaitez. Donc d'abord, il va commencer par le bas, puis il va apparaître. Essayons, passons en mode prototype, option neuf, Alt, neuf. Tu en as marre de ça. Faisons-le glisser. Nous voulons dire immédiatement que non, juste après un certain délai ou sans délai, passez à celui-ci. Animons-le intelligemment. Parfait. Nous l'obtenons pour faciliter la prise en main. Cela devrait fonctionner. OK. Cela devrait figurer sur notre page des composants. Je vais juste le mettre là-bas, prenons-en une version. OK. Maintenant, ce qui est cool, c'est qu'ils font des choses différentes. Ça fait quoi ? Décolorer. Celui-ci fait des mouvements à différents moments. Allez-y, shift, barre d'espace Ils démarrent tous en même temps. Mais tu vois que c'est toujours le cas. Celui-ci est terminé. Ce que je pourrais faire aussi, c'est que celui-ci soit là, peut-être après un plus grand délai, je pourrais dire délai. Faisons un délai. Combien de temps cela prendra-t-il ? Il se peut que ce soit presque terminé. Vous pouvez désormais créer toutes ces animations personnalisées. Il suffit de lier les animations à une variante. Faites-les ici, puis empilez-les sur une page. Vous pouvez voir à quel point c'est plus agréable. Une seule page et vos animations sont séparées. Donnons-lui un aperçu. C'est encore trop long, mais tu vois l'idée. Vous pouvez commencer à construire ces choses et allons-y. Allons-y trop longtemps maintenant. Et puis attendez Oh. J'espère que cela a prouvé son point de vue, car ce n'est pas très excitant. Mais j'espère que tu as compris l'idée. C'est difficile, je me suis juste habitué à le faire de cette façon. Mais vous pouvez voir que pour faire tout cela, il faudrait avoir ceci en plus de commencer par la suite. Dans ce cas, tout ce que nous avons, c' est tout ce que j'ai d'animation. Tu descends. Vas-y, vas-y, vas-y. C' est donc tout ce dont ils ont besoin au lieu d'un tas de cadres. Si tu es trop bizarre, je vais faire 1 000 images, faire 1 000 images . C'est bon. Encore une fois, je suppose que c'est le cours avancé, nous voulons aborder des sujets avancés. Vous trouverez des choses dans la communauté. Mais est-ce que c'est fait ? Maintenant, vous pouvez avoir des animations à l'intérieur d'ici. Vous devez passer en mode prototype. Sinon, tu ne les verras jamais. Dernière chose, revenez en mode design. Option huit, ancienne option huit. Redimensionnons-le juste pour qu'il soit un peu plus ordonné. C'est ça. Je vous verrai dans la prochaine vidéo. 42. Projet de cours 11 - Animation des variantes: Premièrement, il est temps pour vous de l'essayer. C'est le projet de classe numéro 11. C'est une animation variante, je veux que vous créiez un bouton. Tu peux être exactement comme je viens de le faire. Nous venons de le faire ensemble, ou vous pouvez créer le vôtre. C'est là que quelque chose se passe avec le bouton. Ça y est. Mon invention est chargée. Vous pouvez faire en sorte que le vôtre fasse ce que vous voulez. Mais je veux m' assurer que vous vous entraînez simplement à utiliser l' animation dans une variante. N'oubliez pas que l'ensemble de composants contient des variantes. Je veux que tu fasses l' animation entre les deux. N'oubliez pas que lorsque vous le faites, passez en mode prototype. J'adorerais voir une animation ou une de vos vidéos. Si vous voulez aussi faire le type, faites-le entièrement à votre guise. fait, ce que j'attends du tutoriel, c'est que vous créiez vos propres variantes d'animation Alors jetez un œil aux exigences. On vous a donc demandé de créer un bouton animé, il vous suffit d'utiliser les variantes à l'intérieur de votre composant envoyé pour faire l'animation. Partagez une vidéo, ajoutez-la aux projets de classe, et si vous ne pouvez pas faire de vidéos, ne vous inquiétez pas, faites une capture d'écran montrant vos fils. Je ne peux pas vraiment le vérifier, mais j'adorerais le voir. Si vous faites la version vidéo, partagez-la sur les réseaux sociaux, assurez-vous de me taguer. J'adorerais voir ce que tu fais. Et si quelqu'un te le demande, tu es en train super cours avec Dan, apporte ton propre ordinateur portable. Tu devrais y jeter un œil. Quelque chose comme ça. Très bien, profitez du projet de classe. Je vous verrai dans la prochaine vidéo. 43. Texte Houdini : Comment créer une animation de masque de texte dans Figma ?: Bonjour, tout le monde. Dans cette vidéo, c'est ce que nous allons faire. Texte Houdini. Regardez ce qui vient de nulle part. Nous allons faire l' animation. Cela va essentiellement reposer sur deux choses principales. Nous allons faire de l'animation dans une variante, ce que nous venons de faire, et nous allons y ajouter un masque parce que nous sommes géniaux et avancés. Si vous trouvez celui-ci difficile, c'est du genre « Oh, mon Dieu, c'est vraiment un camp difficile. Je comprends tout à fait. Nous combinons plusieurs éléments. Certains d'entre vous l'obtiendront, d' autres le prendront. Tu y arriveras. Très bien, allons-y. OK. Il suffit de commencer. Nous avons deux bouts de texte. Ce ne sont que du vieux texte. Ils se trouvent dans des boîtes séparées parce que je souhaite les animer séparément. Mais il peut s'agir de n'importe quel type de texte ou de police. Et la prochaine chose que je vais faire c'est de les masquer. Nous devons donc prendre quelque chose pour les masquer. Je vais utiliser un outil rectangulaire. Tu pourrais utiliser un cadre. Vous pouvez utiliser toutes sortes de formes. Je vais utiliser l' outil rectangulaire. Je le cache. Vous devez vous assurer qu'il couvre le texte. Et il va nous en falloir deux. Je vais donc dupliquer celui-ci et l' utiliser pour le couvrir. Et c'est là que la commande ou le contrôle Y est pratique. C'est peut-être une vue d'ensemble. D'accord ? Nous pouvons en quelque sorte vérifier si c'est complètement le cas. Ce qui est génial. Ensuite, le texte doit être en haut. Je vais m'occuper de celui-ci et de celui-ci. Je tiens Shift enfoncé pour les connecter tous les deux et je vais utiliser mon support carré juste pour le pousser vers l'arrière. Vous pouvez également les faire glisser dans le panneau des calques. Il vous suffit de vous assurer que votre texte se trouve au-dessus de votre rectangle. OK, j'ai donc besoin de ces deux maintenant. Je vais faire glisser une boîte autour deux. J'ai besoin qu'ils soient tous les deux sélectionnés. Transformons-les en masque. Il y avait une option de commande de raccourci. Non, contrôle des commandes. Je ne l'utilise jamais. Je ne sais pas comment cela se passe dans mon cerveau. Il est plus facile de se concentrer sur le design et pour y aller, il y a une option ici, utilisez un masque ou vous pouvez cliquer dessus avec le bouton droit de la souris. C'est sur PC, c' est une bonne question. Vous devrez monter en haut et le vérifier. Je suis désolée Ou allez simplement ici et cliquez dessus avec le bouton droit de la souris et il est écrit, utilisez un masque et vous verrez sur un PC quel est le raccourci. Je ne m'en souviens pas. Très bien, donc le masque. Ce qui s'est passé maintenant n' est rien d' autre qu'un groupe de masques. Tu peux voir ? Il existe un groupe de masques. Il y a du texte dedans, et il y a le rectangle qui donne le masque. C'est ainsi qu'ils sont configurés. Ce que vous pouvez faire, c'est vous procurer Viva la. Vous pouvez taper ce que vous voulez, évidemment, et vous pouvez déplacer le texte vers le bas. Vous pouvez voir que c'est un masque. OK. Ce qui arrive souvent en classe, c'est que certaines personnes saisissent accidentellement l'ensemble du groupe, et non le texte seul, pour essayer de le déplacer vers le bas. Cela ne fonctionne pas. Il suffit de cliquer sur fièvre, quel que soit le texte, et de le déplacer vers le bas. L'autre point, c'est qu'il peut sauter. Il peut sauter hors du masque si vous le faites glisser trop loin. Qui se souvient de ce que vous tenez enfoncé ? Vous vous souvenez, sélectionnez le texte, commencez à le faire glisser, puis maintenez le bouton enfoncé, disons loin Ensuite, vous pouvez le déplacer vers le bas et il restera à l'intérieur du masque, mais sera masqué. Rappelez-vous, Commodo Control, pourquoi ? Vous ne pouvez pas le voir dans cette vue. Bon travail. Ça n'a pas d'importance. Annulons-le quand même. Nous avons nos masques, le groupe de masques un, le groupe de masques deux. Le texte s'y trouve. Maintenant, nous allons simplement les prendre tous les deux et recommencer ici. C'est plus facile Parce que j'ai trois étapes. Il faut qu'elle disparaisse complètement. Ensuite, Viva doit apparaître, puis Techno. Il y a trois niveaux. Vous pouvez simplement le faire avec un seul texte Houdini. Je ne sais pas pourquoi dans ce cours, j'ai décidé de le faire avec deux B, c'est le cours avancé. Nous le faisons à l'avance. Faisons-en donc un composant. OK, Command Shift K, Control Shift K, cela ouvre la saisie d'image. Combinez l'option K. Je le fais toute la journée. Oui, combinez l'option K sur un Mac. Contrôlez LK sur un PC. Il suffit de cliquer sur le bouton là-haut. C'est un composant. Donnons-lui un nom amer. OK, appelons celui-ci. Animation du titre. Un, et nous allons le dupliquer plusieurs fois. Nous avons besoin de variantes. Nous allons dire une variante, puis nous allons dire U, duplicate, qui est Command ou Control D avec trois variantes. Il faut que celui-ci disparaisse complètement. C'est ici que nous allons double-cliquer pour entrer ou entrer dans votre groupe de masques et cliquer sur Viva Vous voulez donc atteindre ce niveau comme nous l'avons fait auparavant, puis le faire glisser vers le bas, le faire glisser vers le bas. Tu peux utiliser tes râteaux. Maintenez la touche Shift enfoncée dans les râteaux. Cela fonctionne aussi. Ou double-cliquez pour saisir le mot techno et faites-le glisser vers le bas en maintenant la touche Spacebkey Je vais changer de poste aussi, alors vas-y tout droit. OK, donc celle-ci, la première variante est invisible, et puis la suivante, je veux juste que Viva la apparaisse techno doit disparaître. Je vais donc cliquer sur, continuer à double-cliquer jusqu'à ce que je trouve mon texte, le faire glisser vers le bas. Je trouve les râteaux beaucoup plus faciles. OK, on ne peut pas le voir. Maintenant, je peux voir cette première ligne. Je peux les voir tous les deux. Faisons-les animer ensemble. Nous allons passer à l'option 9 ou simplement passer à votre prototype ici. Je vais faire glisser une boîte pour que tu y ailles. Ce que j'aimerais que tu fasses, c'est à portée de main. Non, je veux que vous disiez qu'après un petit délai, une milliseconde, immédiatement, j'aimerais que vous le changiez une milliseconde, immédiatement, en variante. Cool. Utilisons Smart Animate si ce n'est pas déjà le cas. Je vais utiliser Ease Out Back uniquement parce que cela n'est pas visible au début Cela va faciliter les choses et faire un petit coup de pouce. À ce sujet, je ne sais pas. Faisons-le tester. Fais la même chose pour ça. Je vais dire que vous avez la même animation. Cela en fait passer une partie. Après un certain temps, Zuk a-t-il fait les autres ? Il s'est souvenu de toutes ces choses. C'est tout bon. Essayons-le. C'est bon. Nous n'allons pas encore tester les composants réels. Nous allons récupérer une instance de notre composant. Le problème, c'est qu'il est vide. Je me montre mon premier exemple, ce qui est un peu pénible. Quoi qu'il en soit, nous avons compris l'idée. Je l'ai trouvé quelque part ici. Donnons une sélection au cadre. Passons à la barre d' espace Schiff pour faire un petit aperçu. Oh, regardez-nous. À répétition. Nous animons des génies Génial J'adore ça. D'accord ? Donc, si vous voulez créer des textes comme celui-ci, l' essentiel est vous assurer que vous faites glisser le texte vers l'extérieur, et non le groupe de masquage, qui cause des problèmes aux utilisateurs L'autre point est que si vous regardez vraiment ceci, traitons-en ici. Donc, si je veux cette animation, passons à ces variantes, et ça va changer après un certain temps. Il utilise Ease out and Back. Si je choisis mon propre Bézier personnalisé, vous voyez, c'est à cela que ressemble Ease out Cela va s' assouplir de cette façon , puis passer là où il se doit, puis revenir. Si vous voulez vraiment maximiser cela, cela fonctionnera. Donnons-lui un aperçu. Je vais vous montrer ce qui se passe. Déplacez la barre d'espace par espace. Tu vois que c'est monté ? Répétons-le. Regardons le mot techno. Il est monté et s'est perdu. C'est juste parce que notre masque n'est pas assez grand. Si j'entre dans le vif du sujet et que nous passons au commandement, pourquoi ? Ce qui se passe, c'est qu'il remonte et voici mon masque. Vous le voyez là, où est mon masque, le rectangle. Cela va là-bas et cela va au-delà de cela. Vous allez juste vous assurer que c'est vraiment beaucoup plus grand que nécessaire. Il y a juste de la place pour la techno. un peu déroutant. Donnez-lui un aperçu. Si vous êtes déjà époustouflé par celui-ci, c'est bon. C'est une question délicate. Masques et assouplissement personnalisé. Nous faisons des animations dans des variantes. Tu fais des choses difficiles. Si votre esprit est un peu agité, c'est bon. Mais voyez-vous que la techno avait de la place pour porter ce masque maintenant ? Le masque se détache en quelque sorte ici, et si vous voulez aller plus loin, vous devez le faire monter de plus en plus haut et . Tu as compris l'idée. C'est bon, les copains. Nous l'avons fait qui avez-vous envoyé un texto ? C'est bon, c'est ça. Je vous verrai dans la prochaine vidéo. 44. Animation de printemps et superpositions dans Figma: Bonjour à tous. Dans cette vidéo, c'est ce que nous allons faire. Prêt, définissez Bio. OK, nous allons apprendre un certain nombre de choses. Nous allons vous rappeler ce qu'est une superposition dans le cours Essentials, ce qui est un bon rappel. Mais aussi, vraiment ? Garçon. OK, nous allons faire en sorte que la petite bosse de navigation soit entièrement souple. C'est ce qu'on appelle un spring easing, et faisons-le maintenant dans Figma Eh bien, je veux encore faire du bruit. Encore une fois. Boo. Très bien, allons-y. Très bien, pour commencer. Vous pouvez commencer par une nouvelle page et vous n'avez pas besoin de faire la sieste. Tout peut être gonflable ou suspendu. OK, donc je vais juste revenir au début et je vais le mettre là-dessus. Je vais utiliser mon Nav que j'ai créé plus tôt. Je vais donc aller dans mon panneau Actifs, et je vais trouver les composants, et il y a mon OK, donc je vais l'utiliser. Cela va démarrer à partir de l'écran parce que nous allons faire une superposition Ce que je vais dire, c'est que cette page là, je suis en prototype. Je vais vous dire d' aller sur cette page. Je veux m'en assurer après un délai de combien de temps ? Je ne sais pas, mais je veux un peu de retard. 0,3 de seconde, j'aimerais y aller, mais je ne veux pas qu' on n'y accède pas. Je veux que ce soit une superposition ouverte. Cela va ouvrir une superposition. Qu'est-ce qu'il va ouvrir ? Ça va ouvrir le bas de mon Nav. Nous nous sommes concentrés ? Non, je veux être en bas au centre. J'aimerais que ce ne soit pas instantané. Je veux emménager par le bas. OK, et c'est ici que se trouvent les sources. Nous les avons donc utilisés jusqu'à présent. Le printemps, c'est celui du bas ici. Vous pouvez également en faire un personnalisé. Jetons-y un coup d'œil. Vous voyez, l' apparence de l' arc est vraiment différente de celle que nous avions avec certains de ces béziers personnalisés, d'accord ? Le printemps passe là où il doit être et revient en quelque sorte en arrière jusqu'à ce qu'il finisse par s'arrêter Tu peux y jeter un œil. Bouncy est la solution la plus évidente, d'accord ? Vous pouvez le voir ici. C'est très cool. Vous pouvez jouer avec les autres, très similaires, plus subtils. Très bien, fais en sorte que ça marche, Dan. Est-ce que ça marche vraiment ? Cliquons sur ce type, donnons-lui un aperçu, déplaçons la barre d'espace et Boon J'adore ça. Arthur réinitialise ou rejoue Ah. Hé, tes propres effets sonores, j'aime bien. Examinons rapidement le réglage. Je vais regarder le prototype. Option neuf, 09. Je vais cliquer dessus, le faire glisser vers le haut. Bouncy est le plus évident. Tout cela n'en est que moins. Ils ne sont pas différents. C'est juste que c' est vraiment extrême. Elles sont juste un peu subtiles. Ce que nous pouvons faire, c'est personnaliser le ressort et, comme nous l'avons fait pour les autres assouplissements personnalisés, vous constaterez que vous pouvez déplacer ces éléments. Parfois, c'est plus facile, il suffit de jouer avec la rigidité, l' amortissement et la masse La masse, c'est la sensation de lourdeur de ce truc. Cela change le calendrier. Si je dis que je veux que la masse augmente, je vais cliquer sur le bouton « Maintenir » et la faire glisser dans cette direction. Cela ne me permet pas de maintenir ma touche d'option ou si c'est le cas. Tu vois, je suis en train de le traîner Maintenant, ça fait 6 ou 8 secondes, tu peux voir à quel point ce truc semble plus lourd. Parce que c'est plus lourd. Avec un faible, c'est trop clair. Mettons-le à un. OK. Et c'est plutôt sympa. Alors jouez avec, sachez que vous pourriez finir par le casser. Si je passe à quatre, d'accord ? C'est un peu lourd. Regardons l'amortissement L'amortissement, c'est si je n'ai pas d'amortissement, allons-y. C'est juste pour vraiment rebondir. C'est quoi ça ? Saute, saute, chasse aux déchets. Ça ne s'arrêtera peut-être jamais. Ça joue pendant environ une minute, 4 minutes. Il n'arrêtera jamais de rebondir. OK ? Donc ça va marcher. Allons-y, mais ce sera une question intéressante, pas très utile. Animation téléphonique. Tu vas le casser. Et quand vous le ferez, vous devez entrer ici et dire, en fait, vous allez redescendre à 1 seconde. 1 seconde. Pour en revenir à quoi c'était ? Personne. Je ne me souviens pas de la valeur par défaut. En fait, revenons simplement à Bouncy, puis revenons à Custom Spring et nous avons réinitialisé. Rigidité. Faisons-en une de plus. Je vais examiner la rigidité et laisser l' amortissement seul. Alors, quelle est la rigidité du ressort. Rendons-le plus rigide. Passons à 3 000, d'accord ? Il est lourd, mais son ressort est très rigide. Très bien, tu as compris l'idée. Il s'agit d'une superposition et d'une superposition auxquelles est appliqué cet assouplissement printanier Jouez avec les autres douce, rapide, rebondissante, travaillez sur vos effets sonores, Bo, je vous verrai dans la prochaine vidéo Au revoir. 45. Projet de cours 12 - Animation de texte Houdini: C'est bon. Je veux que tu fasses ta propre animation Houdini Text Il n'est pas nécessaire que ce soit exactement comme le mien. Je veux juste taper Houdini et utiliser des masques, comme nous l'avons fait dans les tutoriels précédents Je veux que tu utilises l'animation du printemps. Entraînez-vous donc avec eux et partagez une vidéo si vous le pouvez. Sinon, partagez une capture d'écran et téléchargez-la dans les projets de classe. J'adorerais le voir sur les réseaux sociaux, juste pour rappel, je ne peux pas accéder à tous les projets de tout le monde. La seule façon dont cela fonctionne est télécharger les vôtres dans les projets de classe, d'en regarder deux autres et de laisser un commentaire. Il n'est pas nécessaire que ça aille. Mais ce qui fonctionne vraiment bien, c' est souvent un compliment, quelque chose qu'ils voudront peut-être essayer ensuite, suivi d'un compliment. Appelez ça le sandwich ****, mais il y en a probablement un autre en fait, je ne trouve pas d'autre mot. C'est un super nom pour ça. OK ? Commencez donc par quelque chose que vous aimez, quelque chose qu'ils pourraient essayer. Et ce que vous découvrirez, c'est que vous devenez un designer acharné, capable de vous exprimer par le biais du texte, et cela se résume à la pratique. Je veux donc que tu sortes et que si tu en télécharges un, commente celui de deux autres personnes. De cette façon, nous recevons beaucoup de commentaires . Tu peux t'entraîner. Les gens s'entraînent à critiquer votre travail, soyez respectueux Préparez le sandwich. C'est bon. Amusez-vous à créer le texte Houdini . C'est délicat. Faites-moi savoir dans les commentaires si vous rencontrez des problèmes, si vous rencontrez des problèmes, j'espère que quelqu'un les aura résolus dans les commentaires. C'est bon. Je vous verrai dans la prochaine vidéo une fois que vous aurez terminé le texte Houdini . C'est bon. Au revoir. 46. Pourquoi l'interaction par clic sur le clic est-elle grisée ou manquante dans Figma ?: R : Bonjour à tous. Dans cette vidéo, nous allons voir pourquoi parfois le appuyer » signifie « dégrader » ou « cliquer » est « rétrograder », et nous allons également rappeler pourquoi parfois il écrit « au toucher » et parfois au « clic ». Je dis juste qu'en appuyant sur un clic, pareil. Regardons-le un peu plus en détail. Commençons par un simple clic. Je vais récupérer l'un de mes boutons dans ma bibliothèque, et je vais passer en mode prototype, Alt ou Option 9, je vais dire, vous allez ici. Je vais faire défiler l'écran vers le haut en disant « on tap ». Ou appuyez sur, rendez-vous sur cette page. Excellente. Je prends mon outil de cadrage et je descends ici et je dis : je veux un beau grand cadre appelé MacBook Ear Okay Toujours sous le nom d' iPhone 16. Ignorez cela. C'est juste répéter ce que c'était ici, donnons à Scrab le même bouton, le bouton que j'ai saisi et revenons maintenant au mode prototype Je vais vous dire d' y aller quand vous avez cliqué. Allons y jeter un œil. Il a toujours été dit « on tap ». Tu es du genre, ce n'est pas un téléphone. C'est un site Web, il faut cliquer sur un clic. Ce qui se passe, c'est que si je clique sur le cadre, que je monte ici et que je dis les paramètres du prototype, c'est celui du document, à savoir l'iPhone 16, qui est utilisé . Je peux dire qu'en fait, il s'agit maintenant du MacBook Air SCQUscroll, qui est un ordinateur portable, sur lequel nous cliquons Un clic sur le bouton, c'est exactement la même chose, mais ça s'appelle un clic. Celui-ci est maintenant également en ligne. Nous avons modifié le prototype de ce fichier pour en faire un ordinateur portable. Donnons-lui un aperçu et voyons, il est prévisualisé et intégré à l'aide d' un ordinateur portable, le MacBook ici Ils font exactement la même chose. Ça n'a pas d'importance. Si vous suivez le tuteur de quelqu'un et qu'il est du genre, maintenant j'utilise le bouton on tap et vous dites que je ne l'ai pas. J'ai OnClick Même chose, sauf dans les paramètres du prototype prototypé, sur ce prototype, il est réglé soit sur probablement parfois, il peut être réglé sur rien ici, soit Je vais revenir sur iPhone quelque chose ou autre, juste pour pouvoir me connecter à nouveau. L'autre que je voulais te montrer à portée de main, parfois tu ne l'as pas. C'est une baisse de niveau. Je vais cliquer sur cette nouille ici. Parfois, vous arrivez au sommet et vous vous dites que cela ne vous laissera pas du tout le choisir, c'est une note. C'est le cas lorsque vous en avez plus d'une candidature. Je fais ça tout le temps, puis je panique, mais je fouille mon cerveau pour comprendre pourquoi je dis que j'ai Je veux que tu viennes ici. J'ai le haut ici. Je voulais être sur écoute, c'est génial. C'est génial parce que vous avez déjà appliqué quelque chose. Je vais postuler par glisser-déposer. C'est cool. Deux choses s'y appliquent. Vous ne pouvez pas en avoir deux sur les robinets parce qu'il ne sait pas où aller Si j'ai besoin que celui-ci soit sur le pouce, je dois le saisir et appuyer sur Supprimer. Maintenant, je peux revenir à celui-ci et haut, ici, on Tap sera de retour. Voilà. C'est ça. clic permet de prévisualiser un aperçu sur un ordinateur portable ou un ordinateur de bureau, c'est dans les paramètres du prototype ou rien n'est sélectionné lorsque vous êtes en mode prototype, ou lorsque vous appuyez sur un appareil mobile ou un iPad, c'est parce que vous êtes sur appareil mobile ou un iPad. Voilà. Ils sont tous pareils. Je vous verrai dans la prochaine vidéo. 47. Ajouter automatiquement des interactions par l'IA dans Figma: Premièrement, dans cette vidéo, nous allons laisser les robots effectuer toutes les interactions et le prototypage Nous allons cliquer sur un bouton, et ça va aller de là à boum, ça , il y en a plus Il y a des nouilles partout, mais je n'en ai rien fait. Il a dit : A, le bouton en forme de cœur permet d' accéder aux favoris et ce bouton « À l'heure actuelle » devrait aller au panier, le tout automatiquement à l'aide des robots. Très bien, allons-y. OK, donc ce que j'ai fait, c'est que j'ai créé une nouvelle page, pendant que nous y travaillions. Restez désordonnés. J'ai créé une nouvelle page, OK, j'ai cliqué sur Plus, j'ai créé une page intitulée Directions. J'ai juste copié des bribes et j'ai créé ce petit méli-mélo OK, j'ai juste ouvert la page des genres et j'ai remis mon Nav dedans. La page Watsa est exactement ce qui se trouve, et elle est exactement telle qu'elle était sur l'autre document J'en ai créé un nouveau, appelé Favorites, je lui ai donné un titre, et pareil pour le panier, ai ramené de l'autre dock. Ils partagent tous la même navigation que celle que nous avons créée précédemment. Si vous suivez le cours, vérifiez en mode prototype pour voir s' il y a actuellement des interactions dessus. Dans le cadre du prototype, vous pouvez voir que je viens de supprimer tout ce que j'avais, tout est propre parce que nous voulons que l'IA fasse le travail. Et allons-y. La première chose que je vais faire est d'accéder à mes ressources et d'ajouter quelques boutons. Les boutons sont plutôt intelligents. Ça va devenir plus intelligent. Ce bouton , évidemment, le mot bouton n'est pas bon. Je vais ajouter le mot. Qu'est-ce qui se passe ? Je vais utiliser ce bouton à nouveau et peut-être que je vais juste en mettre un autre ici. Donne-moi un bouton. Je dois passer en mode design. Vous pouvez effectuer quelques modifications dans le prototype. J'y vais, je sors, je coupe, et tu peux continuer ici. Co. Ce type ne sera pas ce qui se passe. Allons dire au revoir maintenant. Au revoir, achetez. Quoi qu'il en soit Nous verrons que cela fonctionne pour certaines choses et pas pour d'autres. C'est bon. Tout ce que nous faisons, c'est tout sélectionner. En fait, vous n'avez même pas besoin d'être en mode prototype. Il vous suffit d'entrer ici et de dire, tapez ces interactions publicitaires. C'est de l'IA, donc ce sera une fonctionnalité payante. Cliquez dessus, asseyez-vous et voyez ce qu'il fait. Qu'est-ce que faire des choses. des nouilles partout. Voyons ce qu'il a fait. L'avons-nous accepté ? Je continue d'y jeter un œil. Donc, c'est une bonne chose. Regarde. Quoi de neuf. Je suis en mode prototype. Vous pouvez voir que la page Quoi de neuf est passée à la page Quoi de neuf. Je n'ai rien fait. Je pense que ce qu'il fait, c'est qu'il regarde le texte ici et regarde soit le titre, soit le cadre. Je ne sais pas, c'est magique. Allons y jeter un œil. Le bouton BioNow est-il entré ici ? By est allé au chariot. C'était cool parce que je n'ai pas écrit panier, mais je savais que le panier était connecté au bouton Bynw Maintenant, une chose que j'aime vraiment, c'est de voir ce cœur ici, d'aller sur la page des favoris, et il est sur chacun d'entre eux. Écoutez, si je clique, si je clique, prototypons-le, vous verrez, réduisez-le et le cœur passe aux favoris. billetterie est redirigée vers la page « À l'heure actuelle », cœur y va, c'est bon Il ne sait pas où cela mène pour une bonne raison. La recherche. Oh, ça marche. OK ? Cela ressemble à une page de recherche. Je ne sais pas genres, je suppose, je suis assez étonné qu'on puisse commencer de cette façon. Oui, disons, ajoutez des interactions, IA et connectez la plupart d'entre elles d'une manière ou d'une autre. Combien de temps cela vous fait-il gagner ? Je ne sais pas Est. Cela dépend de l'ampleur de votre projet. Cela m'impressionne, alors j'ai pensé partager. Cela ne fonctionne pas aussi bien lorsque vous avez un vieux dossier en désordre, quelque chose comme ça parce que vous pouvez le faire Mais, ouah, ça va probablement devenir fou juste parce que nous avons laissé tout ça en désordre. Principalement parce que c'est un tutoriel. Nous avons beaucoup d'iPhone 16 et des variables un, deux et trois. Quoi qu'il en soit, je suis impressionné. Tu serais impressionné. C'est ça. Merci, robots. Que tout le monde soit gentil avec les robots, au cas où. C'est bon. Vidéo suivante. 48. Fabriquer et retirer plusieurs fils de nouilles en une seule fois dans Figma ma: Bonjour Vous avez des problèmes avec les nouilles ? Tu as deux nouilles aux genoux. Des nouilles qui vont partout, ou vous devez mettre à jour une chose et vous devez toutes les faire en même temps. Vous devez ajouter ce bouton en vrac notre siège éjectable Laissez-moi vous montrer comment ajouter et supprimer en bloc. Appelons-les fils, des nouilles air drôle. Très bien, allons-y. Très bien, je viens d'ajouter un bouton à toutes les pages très simplement Ce que vous pouvez faire, le moyen le plus simple est de changer de position, de cliquer sur toutes les options, puis de passer en mode prototypage, qui est la neuvième option, vous le savez, je sais que vous le savez Prends l'un d'eux et regarde ce qui se passe. Ils viennent tous faire le trajet. C'est un bon moyen de les faire toutes en masse. Vous pouvez apporter toutes les modifications, et cela fonctionnera pour tout le monde. Vous pouvez aussi le faire quand je vais m'en débarrasser, les supprimer tous. Si c'est le cas, j'en fais un composant, puis j'en utilise des instances sur toutes les pages. Tu y vas, tu les mets en haut. Je vais les copier et les coller parce que ce sont toutes des instances de cette version principale. Ce que vous pouvez faire, c'est dire, vous allez sur la page d'éjection et vous constaterez que tous ces petits copains y vont tous aussi Ça. Tout problème survient avec cette méthode si cela l'annule. Annulez-le jusqu'à ce qu'il disparaisse. Disparu. Si ce cadre est à juste titre sur une page de composants. Ce truc ici, vous ne pouvez pas le dire, c'est vrai, je veux que vous passiez à une interaction cliquant sur Je veux que vous passiez à Navigate 2. Vous ne pouvez pas pour le moment, au moins, passer à une autre page. Vous ne pouvez accéder qu'aux cadres qui se trouvent sur cette page en cours, donc cela ne fonctionnera pas. Je dois les parcourir les sélectionner toutes et les déplacer vers le bas. Parfois, il est difficile de faire sorte que celui-ci se retrouve dans ce cadre. Donc, si je veux tous les sélectionner, il peut parfois être difficile de cliquer dessus. Ce que vous pouvez faire, c'est en sélectionnant une option, passer à vos actions rapides ou à Commande ou Contrôle, puis sélectionner et simplement déterminer laquelle de ces options pourrait être la bonne. Sélectionner avec les mêmes propriétés fonctionne très bien pour celui-ci. J'en suis au prototype. Je vais dire à n'importe lequel de ces gars d'y aller. Excellente. Il va être porté disparu maintenant, nous allons supprimer toutes les interactions. Supposons que vous l'ayez reçu de quelqu'un d'autre ou que vous ayez créé votre propre désordre, c'est un fichier communautaire. Vous n'avez rien sélectionné , puis assurez-vous que vous êtes dans le prototype. Cliquez avec le bouton droit de la souris et dites «   Supprimer toutes les interactions ». Vous pouvez le faire par image. Vous pouvez cliquer sur le cadre, dessus avec le bouton droit de la souris et dire « Tout supprimer ». Si vous le trouvez, veuillez suspendre le traitement. Tout en bas, supprimez toutes les actions uniquement pour cette page. Mais je vais le faire pour l'ensemble de la page afin de tout ranger. Parce que ce que je veux également vous montrer, c'est que sélectionner toutes les propriétés fonctionnent pour celle-ci. J'ai fait la même chose pour cela et j'ai choisi Commande ou Contrôle K, sélectionnons toutes les mêmes propriétés, parfait. Il l'a. J'ai décidé que toutes ces propriétés étaient identiques. Il y en a beaucoup. Vous pouvez donc entrer et essayer autre chose. Commandez, sélectionnez, et le conjoint sélectionne à droite. Pourquoi allons-nous y aller ? Jetez un coup d'œil ici. Il y a les mêmes couches correspondantes. bon, ça a marché. Nous avons sélectionné toutes les couches correspondantes. Maintenant, nous pouvons le faire. C'est un bon moyen de se plonger dans ces choses assez compliquées et de les mettre à jour en même temps. Regardez-nous. Nous sommes avancés et nous en avons fait un siège éjectable. J'ai utilisé l'IA et j'ai dit de faire appel à un graphiste. Ah. C'est définitivement un comptable avec une enseigne de graphisme. Mais c'est plutôt cool. C'est bon, c'est ça. Il s'agit de l'édition et du retrait en masse des nouilles. Au revoir 49. Comment créer une barre de recherche collante en position de défilement dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons voir comment rendre les choses collantes. Nous allons faire défiler la page vers le haut et regarder la barre de recherche rester bloquée. Tout va défiler derrière lui. Nous allons également corriger les éléments UA en haut et en bas, mais nous sommes vraiment venus ici pour leur adhérence, faire défiler la page vers le haut pendant un moment, puis nous nous retrouvons coincés Très bien, allons-y. C'est bon. La première chose dont vous avez besoin, c'est que je viens de créer une véritable page de recherche de base, concevoir un cercle avec l'icône dedans. Il n'y a donc rien d'extraordinaire là-dedans. J'ai créé une liste. Dans cette liste, l' important est qu'elle sorte de la page pour ne pas défiler. Il n'y a rien à faire défiler deux. Alors, tout d'abord, donnons-lui un aperçu. Cliquons dessus, cliquons sur le cadre parent, déplaçons la barre d'espace et je fais bouger mon petit doigt sur l'ancienne molette de défilement, pas de défilement pour le moment. Nous devons l'activer. J'ai sélectionné le parent sur mon propre prototype, vous pouvez le voir ici. Que faites-vous avec le trop-plein ? J'aimerais qu'il défile verticalement, s'il vous plaît. Maintenant, je peux lui donner un aperçu et je peux le faire défiler. Je ne fais pas défiler exactement ce que nous voulons que ce type soit collant. Ce que nous pourrions faire avant cela c'est parce que je veux que cela reste également au sommet. Nous l'avons déjà fait. Je tiens à dire de ne pas faire défiler la page avec le parent. Je ne veux pas que tu restes là, s'il te plaît. Je vais m'assurer qu'il se trouve en haut de ma pile de couches, et je vais dire encore une fois : prévisualisez celui-ci. Maintenant, faites défiler l'écran vers le haut, vous pouvez voir que l'élément reste en haut. Mais je veux que la recherche soit bloquée ici en haut, non qu'elle disparaisse parce que je veux qu'elle soit toujours là Oh, ce que nous allons faire, c'est cliquer sur vous et nous allons dire : « Hé, j'aimerais que vous ne fassiez pas défiler le parent, je veux que vous ne soyez pas réparé comme nous faisons la navigation supérieure, nous faisons du stick ». Il s'arrête au sommet, et ça va marcher. Allons-y, prévisualisez, faites défiler, faites défiler. Ce qui se passe, c' est qu'il colle, mais il est caché derrière, il remonte et se bloque en haut Il est juste en dessous. Nous devons donc faire un peu de rembourrage. Avec ça, il se trouve que c'est une sortie automatique, donc je vais concevoir. Je peux aller sur mon rembourrage et le monter. Le problème, c'est qu'il l'a fait. J'ai passé du temps à faire en sorte que tout cela ait l'air bien. Le vôtre fonctionnera peut-être, mais j'ai fait certaines choses avec mes couches de commande pour que tout soit beau. Ce que nous devons faire, c'est ce gars ici va le mettre dans un cadre, faire une mise en page automatique, mettre un emballage pour parents dessus et y mettre de la peinture dessus pour ne pas gâcher tout ce que nous avons fait Cliquez avec le bouton droit de la souris et sélectionnons le cadre. Je vais le convertir en Aoout. Tout ce que j'ai fait, c'est de saisir ma barre de recherche, de la mettre dans un cadre, de lui donner le nom génial 22, puis de la convertir en Aolout Je le fais uniquement parce que je veux y ajouter un peu de rembourrage. Je vais prendre du rembourrage sur le dessus. OK ? À ce point. Je n'en ai aucune idée et reporte ça à la hausse. J'espère que vous verrez en quelque sorte ce que cela va faire. Ce bord supérieur. Qu'est-ce qui va se heurter au sommet ? Nous devons être un peu plus nombreux. D'accord. Très bien, donnons-lui un aperçu. Cliquez sur celui-ci. OK, je vais faire défiler la page vers le haut. Oup. Travaillant. Oh, je sais pourquoi. Nous sommes du genre : « Eh bien, c'était censé rester au sommet ». Dan a dit que c' était le top des quatre. Pourquoi ce n'est pas le cas maintenant ? C'est pour cela que nous l'avons fait. Nous avons craqué sur la barre de recherche. Nous sommes allés au prototype, et nous avons dit : «   D'accord, collez en haut Mais ensuite, nous avons créé cet autre cadre autour de lui, appelé cadre 22, et il n'est pas appliqué à celui-ci. Donc, quel que soit le bas de cette pile, nous ne pouvons pas ajouter de caractère collant à ceci, à cela ou à cela Il faut que ce soit ce qui se trouve à ce niveau de base. Qu'est-ce que je veux dire ? Du point de vue de la hiérarchie ? Je veux dire cadre 22. Parent Scroll ? Non, je veux que tu sois collante au sommet. Maintenant, allons-y. C'est la barre d'espace. Roulez vers le haut. Montez, faites défiler l'écran vers le haut. Et ça ne marche pas vraiment, n'est-ce pas ? Allons-y, Dan, en baissant un peu le sujet. Et maintenant, mettons-le au travail. Allons utiliser la barre d'espace, cliquez sur lui. Regarde ça. Il va défiler vers le haut puis rester bloqué. Co. Il monte au sommet puis reste persévérant. Tout problème est lié à l'ordre des couches. Je vais donc dire que vous êtes en haut en utilisant mon dernier crochet ou le second. Donnons-lui un autre aperçu de vous, montez vers le haut et il va faire défiler, défiler, démarrer, rester bloqué et passer derrière. Cool. OK, vous pouvez donc l'obtenir, pour qu' il adhère à l'endroit où se trouve le rembourrage Parfois, il suffit de l'envelopper dans un cadre, fabriquer et de l'huiler, d'ajouter un peu de rembourrage à tout ce qu'il contient, d' y mettre un peu de rembourrage Une chose que nous devons faire, c'est que vous devez probablement aussi être réparé. Vous voyez fixe ici dans vos couches. Pouvez-vous voir que le fixe est projeté vers le haut. Il y a donc des choses qui défilent et d'autres qui sont corrigées. C'est un moyen facile de voir ce qui fait quoi, et les choses réparées sont au top. Essayons-y une autre fois. Enfin, faites défiler défilement, vous pouvez le faire avec plusieurs titres. Faisons-le. C'est une bonne sorte de rappel. OK, disons que nous avons un succès, que nous voulons atteindre le sommet mais nous y opposer. Ce que nous devons faire, c'est nous assurer qu'il se trouve dans sa propre boîte. Nous devons y ajouter le rembourrage. Je vais donc ajouter une mise en page automatique à ce truc. Je dois dire que vous avez un peu de rembourrage sur le dessus. Combien à ce sujet ? En fait, non, j'en ai besoin d'un peu trop grand, n'est-ce pas ? OK, prenons-le car il va s'arrêter en haut de la page. Il s'agit de voir ce que je fais ici ? Je suis en quelque sorte en train de t'attraper et de te dire, d'accord, tu vas t' arrêter là J'ai donc besoin d'un rembourrage plus petit, mais peut-être ça. Essayons-le. Il suffit de dire prototype, faire défiler le parent. Non, l'un d'eux doit être collant sur le bord supérieur. Tu ne fais que compliquer les choses, Dan. Non Nous verrons comment nous allons. Faites défiler la page et la barre de recherche s'arrête, puis il s'arrête trop bas. Moins de rembourrage. Dan sait-il au moins ce qu'il fait ? Il suffit de le donner pour aller, prévisualiser, faire défiler, faire défiler. C'est mieux Va. Vous pouvez placer un autre titre en dessous de celui-ci et le faire simplement pour la barre de recherche. Parce que le simple fait d'essayer de les empiler peut être un peu déroutant. Ce que vous devez retenir, c'est que si vous voulez un rembourrage, il doit s'agir d'une sortie automatique. Et souvent, il est plus facile de simplement installer le sien, entourer d'un cadre et d'en faire une sortie automatique. L'autre chose que vous devez faire est de vous assurer que vous avez des informations qui sortent de la page. Je vois que mes étudiants n'ont tout simplement rien à faire défiler, donc peu importe ce que vous activez. Il ne défile pas, vous avez donc besoin de fichiers indésirables par le bas. L'autre chose est de cliquer sur le cadre parent sous le prototype. Le comportement du défilement doit être vertical, et ce que vous voulez garder en haut doit se trouver en bas de la hiérarchie, non pas à trois ou quatre points de profondeur dans cette grande structure de couches. Sélectionné, vous passez en mode Sticky. C'est ça. Je ne sais pas si j'ai rendu cette chose plus difficile ou plus facile à apprendre, mais voilà. C'est ce qui s'est passé. C'est bon. Je vous verrai dans la prochaine vidéo. 50. Comment faire défiler par balayage horizontal dans Figma: Bonjour, bonjour. Cette vidéo, nous allons la réaliser. Nous allons faire un peu de défilement horizontal. Nous allons faire quelques critiques et les faire défiler de cette façon, comme dans un petit carrousel Très cool. C'est ce qu'on appelle le défilement horizontal Je vais vous montrer comment le faire dans Figma. Pour commencer, je viens de créer une carte, une carte d'évaluation générique. Ce que je veux faire, c'est y aller, le faire démarrer. Vous pouvez le faire avec n'importe quoi, juste un vieux cadre. Je veux juste le faire très simplement. Je vais me contenter de ça parce que ça a l'air cool. Ce que nous allons faire, c'est d'abord ce que nous avons besoin que ce soit le cas, nous avons besoin de quelques-uns d'entre eux pour sortir de la page. Maintenant, vous pouvez vous souvenir commencer à faire glisser et maintenir la barre d'espace enfoncée, commencer à les faire traverser ou avec celui-ci sélectionné ici, C De l'autre côté. Il est sorti. Faisons semblant que ça va sortir parce que vous le ferez par accident. Je vais chez DDD. J'en ai quelques uns. Ce que je veux dire, c'est qu' avant de commencer, c'est sont pas réellement sur ce cadre pour défiler. Je dois m'assurer de vous et de vous. Ces gars ne sont pas sur le cadre. Ce premier gars est Frame 23. Bon travail, Dan. En fait, non, ça s'appelle B review Je vais donc le faire glisser vers le bas pour être avec ses potes. Tu y vas. Maintenant, ils sont tous sur la page. À vous de choisir, cliquez sur le cadre parent pour passer au design et décider si vous souhaitez découper le contenu ou non. Ça n'a pas d'importance. Ça a l'air différent. Essayons-le. Je prévisualise toujours au fur et à mesure. Déplacez la barre d'espace et vous ne verrez aucun défilement. Tout ce que nous avons à faire est de dire, page de commentaires. Passons au prototype. Si vous optez pour la neuvième option, vous en aurez assez parce que c'est là, n'est-ce pas ? Passons au débordement. Horizontal. Ce n'est pas ce que je veux. Je suis juste en train de réfléchir. Je ne veux pas que tout ça se passe comme prévu. Je veux juste ça, et ce sont tous ces gars. Je veux qu'ils soient dans leur propre cadre, tous ces avis d'achat soient dans leur propre cadre et c'est nous qui les ferons défiler, pas le parent. C'est ce qui compte ici. Nous ne voulons pas que tout l'écran s'écoule. Je le ferai. C'est bon d'y aller. Horizontal rapide, je vais dire « aperçu », et le tout le Le tout fonctionne. Le problème sera dû au fait que ceux-ci seront corrigés si j'ajoute un titre ici. Si j'ajoute du texte ici. Allons y jeter un œil. Cliquons sur, prévisualisons-le mieux. Il y a une télévision là-bas. Ça va terriblement mal. U, V, va-t'en. Cliquez sur vous, prévisualisez. Si je fais défiler, tout défile. Je ne veux pas que cela défile et je ne veux pas que les avis défilent. Je ne veux pas que le cadre entier défile. C'est ce que j'essayais d'expliquer. Allez, Dan. Ce que je veux, c'est ça. Tous ces gars doivent être dans leur propre cadre. Il peut s'agir d'une sortie automatique, d'un cadre, peu importe. Je vais passer au Shift A pour Autout. simplement que l'espacement est correct, assurez-vous qu'ils se trouvent dans le cadre des commentaires. Maintenant je le fais pour ça. Au lieu d'appeler le cadre 24, appelons ce parchemin de révision. Une fois sélectionné, je veux ne pas savoir faire défiler, je veux passer à la verticale ou à l'horizontale. Je ne m'en souviens jamais. Je pense que c'est horizontal, mais je dois y réfléchir. Allez, Brain, allons-y. Donnons-lui un aperçu. Maintenant, pouvez-vous voir ce qui se passe ici ? Cela fonctionne. Très bien, découvrons ce qui n'a pas fonctionné. Cela devrait simplement fonctionner. Devrait défiler horizontalement. Il suffit de cliquer et de faire glisser, cela ne fonctionne pas. C'est bon. Laissez-moi vous montrer comment je décompose les choses. Tout d'abord, j'ai vu quelque chose en dessous. Oui, que faites-vous là-bas ? Tu y es. Oui, je me débarrasse de toi. Je n'ai pas besoin de toi. Donnons-lui à nouveau un aperçu. En faisant défiler OK. Il y a donc un défilement horizontal Ça devrait être Oh. Je sais ce que c'est. C'est l'élément clé de tout ce cours. Encore une fois, en prétendant ce que je voulais faire, c'est que ce cadre doit être clipsé Nous avons ce cadre parent que nous avons appliqué. Le parchemin se trouve jusqu'ici. Ce que nous devons faire, c'est avoir un endroit pour le faire défiler. Nous devons le faire traîner vers le haut. Le cadre, ce cadre parent avec tous ces gars à l'intérieur, ce cadre peut en fait être plus petit. Elle peut être plus petite. Normalement, nous les gardons de la même taille. Mais nous pouvons dire, en fait, que vous n'êtes une petite fenêtre sur le monde, et que nous pouvons, lors de la conception, accéder au contenu des clips pour ne pas le voir. Cela explique un peu mieux les choses. Le cadre parent est un peu plus petit, il y a donc des éléments à faire défiler ici. Maintenant, allons-y. Travaillez s'il vous plaît. Cela fonctionne. Nous pouvons faire ce parchemin. De toute évidence, il est préférable de tester sur votre téléphone avec votre doigt. Tu y vas. Il y a des parchemins horizontaux Une chose que je vais devoir faire c'est que le parent doit être un peu plus large parce que les ombres tombées sont coupées, et je vais juste dire, passons à l'alignement, en haut à gauche, y aller maintenant devrait être encore mieux Je peux y voir mes ombres tombées, tu peux voir, oui, c'est parfait. C'est bon. retenir, vous devez donc vous assurer que tout ce que vous voulez faire assurer que tout ce que vous voulez faire défiler horizontalement disparaît de l'écran et qu'il s'agit d'un cadre apparent ou automatique, que la mise en page automatique ou le cadre doit être réglé sur un défilement horizontal et cadre parent doit être de la même taille À retenir, vous devez donc vous assurer que tout ce que vous voulez faire défiler horizontalement disparaît de l'écran et qu'il s'agit d'un cadre apparent ou automatique, que la mise en page automatique ou le cadre doit être réglé sur un défilement horizontal et que le cadre parent doit être de la même taille que votre appareil mobile. Et ce n'est pas grave, mais vous pouvez dire, dès le design, couper le contenu pour tout voir. Cela devrait fonctionner. La prochaine chose que je veux faire, c'est de t' attraper et de faire des trucs sur l'IA. Réécris ça. Nous avons terminé maintenant. Je vais juste vous montrer quelques trucs sympas que j' aime faire avec certaines choses liées à l'IA Je vais donner des critiques et appuyer sur Command Enter ou Control Enter. Regardez-le. Il suffit de passer en revue et de modifier tout cela, il ne crée pas les images pour le moment, et vous pouvez utiliser l'IA pour les faire. Le problème, c'est qu'ils prennent du temps à faire. J'utilise souvent Command ou Control K pour mes raccourcis, j'utilise le contenu R. oTENtral est un plugin ou un widget vraiment cool Vous pourriez y aller et le trouver. C'est vraiment pratique pour plein de choses. Disons que c'est juste parce que je veux que je n'ai pas besoin qu'il soit généré par l'IA. Il va passer à la publicité et cliquer sur Min. Idem : puis-je faire des multiples ? Je suis presque sûr que je le peux. Je peux dire que vous êtes tous simplement que cela n'a pas fonctionné. Je peux cliquer sur toi. Je maintiens la touche Commande enfoncée sur touche Ctrl d'un PC et je mets la touche Shift en même temps, et vous pouvez cliquer dessus pour simplement passer et insérer des images d'espace réservé génériques maintenant Ils ne sont pas générés par l'IA, ce sont juste des modèles prédéfinis. Vous voyez qu'ils en ont 1 700. Même chose si nous avions les noms complets. Si vous avez besoin d'une liste de noms complets, vous pouvez utiliser des éléments d'IA. Si vous n'y avez pas accès parce que vous utilisez le compte gratuit. Ce que vous pouvez faire, c'est tenir le Commander Shift ou le Control Shift PC. Prends tout ça et tu pourras dire, donne-moi quelques noms complets. Ensuite, vous pouvez cliquer à nouveau dessus. Donne-moi d'autres noms. Il y a un tas de choses comme ça ici. Vous pouvez vous frayer un chemin, et oui c'est utile. Je vais annuler parce que je veux me soutenir, et ça suffira. Est-ce que ça marche toujours ? Il y a toujours quelque chose de marrant après avoir déconné Cela fonctionne toujours. Regarde ça. Nous sommes des génies. C'est bon. C'est ça. Je vais activer le contenu de mon petit clip, pour qu'il soit rangé et je vous verrai dans la prochaine vidéo En fait, une dernière chose est la commande Y, le contrôle y est que vous pouvez accéder à Outline View si vous avez besoin de voir des informations. Tu es du genre : « J'ai besoin de voir toutes ces choses. Vous vous demandez : « C'est quoi tout ça ? En fait, c'est quoi tout ça ? C'est le parchemin de cette page. Est-ce que cette page défile ? Je parie que non ? C'est le cas. Il faut quand même réparer le dessus de toute façon, pour se laisser distraire. Nous avons fait du défilement horizontal, et nous sommes géniaux. Je vais voir ta personnalité géniale dans la prochaine vidéo. 51. Projet de cours 13 - Défilement horizontal: C'est bon. C'est le numéro porte-bonheur 13. Je veux que vous créiez votre propre défilement horizontal, que vous fassiez une carte d'évaluation, que vous soyez simple , parfois complexe, à vous de choisir et je veux juste que vous fassiez défiler l'avis horizontalement sur votre appareil. En gros, c'est ce que nous avons fait dans la dernière vidéo. Créez votre propre version, et j' adorerais voir une vidéo, sinon, prenez-en une capture d'écran, partiellement défilée. Je sais que tu peux faire semblant. Nous ne sommes pas là pour ça. Nous sommes là pour nous améliorer et ces exercices pratiques. Je parie que si tu les fais, tu es encore plus amer. Et c'est tout. Téléchargez-le dans la section des devoirs. J'ai retiré le partage sur les réseaux sociaux. Si c'est ennuyeux, ne le partagez pas. Si tu y as mis un peu de travail, tu es cool. Partagez-le, s'il vous plaît. J'adore le voir. Cette partie est intitulée Prenez une capture d'écran de votre aperçu partiellement défilé C'est ce que je veux dire, j'ai déménagé un peu. Oui, mais j'adorerais voir une vidéo. Téléchargez-le dans les projets de classe. Celui-ci est simple mais aussi très technique. Tu dois faire toutes les choses correctement. Vous devrez donc peut-être revoir la vidéo pour voir où vous vous êtes trompé. La plupart du temps, je vois des gens avoir des problèmes, c'est probablement lorsqu'ils oublient faire tout le reste correctement, mais le cadre dans lequel tout cela se situe doit être un peu réduit. C'est bon. Amuse-toi bien Voyez si vous pouvez y arriver. Rendez-vous dans la prochaine vidéo. J'ai pris un café. Peux-tu le dire ? Très bien, vidéo suivante. 52. Faire défiler automatiquement la page vers le bas jusqu'au point d'ancrage dans Figma: Bonjour. Dans cette vidéo, nous allons créer des boutons qui défilent vers le bas de la page sur laquelle nous travaillons , même très loin . Vous pouvez le voir ici. Ce ne sont pas des cadres séparés. Il suffit de faire défiler ce cadre vers le bas et nous expliquerons comment créer un lien hypertexte. Accédez à un site Web. C'est facile et en même temps un peu original. Laissez-moi vous montrer toutes les bizarreries. Pour commencer, je n'ai fait que créer une page d'événement avec un peu plus de détails, le nom du concert. J' ai quelques boutons ici. Ce ne sont que des mises en page automatiques contenant des textes. Vous pouvez le faire avec n'importe quoi et j' ai quelques éléments que nous voulons faire défiler, donc c'est assez simple. Passons à ce que nous allons faire : passer au prototype. Option 9, ligne Alt sur un PC. C'est la dernière fois que je dis ça. Vous aimez probablement les vidéos de « stop at 50 something ». C'est suffisant. Ce que nous allons faire, c'est sous forme de prototype, nous allons dater. Où vas-tu aller ? Tu vas descendre ici. C'est à peu près aussi simple que cela. Il sera automatiquement assez intelligent pour dire « Au toucher, faites défiler deux ». Si ce n'est pas le cas, vous pouvez le forcer à partir. Il va défiler jusqu'à cette date d'accord. Vous pouvez le voir dans mon panneau Layers. Maintenant, là où il est dit animation, Instant est la version standard que vous obtiendrez. Donnons-en un aperçu. Shift Space Bar, c'est la dernière fois que je dis qu'un outil date et il passe à la date inférieure Va. Un rendez-vous. Ce que nous allons faire maintenant, c'est le rendre un peu plus agréable. Une fois les nouilles sélectionnées, passons à l'animation et je vais utiliser la facilité d'entrée et de sortie qui fait À quelle vitesse cela va-t-il aller alors ? J'aime accélérer les choses. Cela va prendre plus de temps, donc je veux le chiffre le plus élevé. Cela va prendre une seconde, 1,1 seconde. Encore une fois, je ne peux pas cliquer en ligne. Alors allons-y, Shift, je ne vais plus le dire. Passons à ce jour. Regarde, tout défile bien vers le bas Faisons le reste, et je vais vous montrer quel est le prochain problème que vous rencontrerez Le lieu va se concentrer sur le site et toujours tester, continuer à tester. Ne pensez jamais que vous allez faire 1 000 choses, puis j'espère que tout ira bien et que vous ne savez pas où vous vous êtes trompé. Le lieu fonctionne. La seule différence est que, eh bien, faisons-le avec le prix. Le prix doit baisser complètement. Parfois, il peut être un peu difficile de s'y rendre. Donc, ce que vous pouvez faire, c'est simplement cliquer dessus. Allons-y en interaction. Je veux qu'il soit à portée de main. Quelle action ? J'aimerais qu'il en fasse défiler deux. Où souhaitez-vous en faire défiler deux ? Il y a plein de choses ici. Je veux en venir au prix. Pareil, mais je veux qu'il soit animé. La différence ici est qu'il utilise la valeur par défaut de 300 millisecondes Même si j'utilise celui-ci, c'était quoi celui-ci ? Celui-ci a duré environ 1 seconde. Si je fais celui-ci, cela prend 1 seconde. Il reste encore beaucoup à faire. Si je le fais environ 1 seconde, rien ne fonctionne. Je dois maintenant maintenir ma touche d'option enfoncée pour la faire défiler, Figma Normalement, il n'y a pas de bugs ni de figma. C'est une application assez solide. Mais donnons-en un aperçu. Si j'atteins la date, elle défile doucement vers le bas, mais si je fais le prix, il doit couvrir beaucoup plus loin, en fait, le prix n' est pas OK, faisons semblant. Faisons en sorte que ce soit super long. Crochet. Je fais semblant. Je vais revenir au mode design et le réduire complètement. Je le fais pour trouver un meilleur exemple. Je vais vous donner un aperçu et je vais dire date et il faut que ça y arrive en 1 seconde, donc ça accélère. Si vous devez faire défiler une page assez loin vers le bas, vous pouvez ajuster le montant nécessaire. Je pourrais doubler ce montant parce que cela doit aller beaucoup plus loin. Bizarre. Je peux le taper ici, mais je ne peux pas le taper ici. Quoi qu'il en soit, la seule chose est que maintenant que c'est très long, redonnons-lui un aperçu. Si je vais à ce jour, cela met la date au sommet. vôtre pourrait convenir car vous n' avez peut-être pas une longue page. Mais si vous parcourez une longue page, il y en a beaucoup à parcourir. Donc, cette date veut vraiment être au top, et pour moi, elle est cachée derrière tout. C'est juste un peu bizarre. Je veux qu'il atterrisse à peu près là afin que les dates qu'il contient et les dates auxquelles les lieux ont été cliqués apparaissent à peu près ici afin que vous puissiez voir le lieu et, évidemment le prix baisse jusqu'au bas. Alors faisons-le. Prenons une date, et cliquons sur les nouilles. Je vais double-cliquer sur la nouille, et c'est à cela que sert ce décalage X représente la gauche et la droite, Y le haut et le bas. Je dois me le dire et me dire dans quelle mesure ce que je veux faire, c'est entrer, disons, en pixels Donnons-lui un aperçu. Je clique sur la date et ça ne marche pas, encore plus dans le mauvais sens. La date est passée de 200 pixels. Vous devez vous assurer que lorsque vous le faites, utilisez des nombres négatifs si vous voulez un rembourrage en haut Exactement la même chose. Passons à moins 200. Donnons-lui un aperçu, et disons la date. Ça ne marche toujours pas. Pourquoi ça ne marche pas ? Oublions U, négatif. Peut-être que ce n'est tout simplement pas suffisant. X. C'est définitivement Y, je pense que oui. Allez, rendez-vous. Voilà. Cela ne suffit pas. Quelque part au beau milieu de ce que j'ai fait là-bas. J'en ai fait 200 ou 400. Essayons 300. Date. Oh, on y est presque, 250. Allez, Dan. Il y en a beaucoup. Je ne le fais pas assez pour savoir exactement ce que cela devrait être et m'en faire une idée. Si vous en faites un peu plus, vous pourriez vous améliorer. Oh, je voulais être un peu plus. 20 ANS ? Ensuite, vous pouvez passer toute la journée à essayer de faire glisser le produit là où vous en avez également besoin. La seule chose que je ne regarderai pas dans sa propre vidéo, que vous pouvez vous frayer un chemin les différents décalages pour les faire fonctionner Une chose que je vais juste ajouter à la fin prime, c'est disons que nous voulons un lien cartographique. que je vais sélectionner. L'une des interactions que nous n'avons pas abordées dans une vidéo séparée qui se faufilera ici est que nous avons envisagé de passer à Scroll il y a une seconde Il y en a un qui dit « ouvrir le lien », puis vous pouvez taper une URL. Permettez-moi de prendre un extrait de Google Maps. Je viens de trouver un lien sur Google Maps. Évidemment, il peut s'agir de n'importe quelle URL sur n'importe quel site Web. Si jamais vous êtes en Irlande et que vous arrivez à Limerick, envoyez-moi tout d' abord un message et assurez-vous de visiter le Daln's Pub. C'est le plus cool. OK, et nous allons passer à mon rythme d'encre. Il va s' ouvrir dans un autre onglet. Donnons-en un aperçu. Allons à Venue. Cliquons sur la carte. Et regardez, ça s'ouvre. Sympa. La seule chose que vous devez faire vous-même est de lui donner cette couleur affreuse. carte ici doit donc probablement être le bleu inventé il y a de nombreuses lunes pour souligner, qui signifie commande ou contrôle, je suis fier de devoir la mettre en gras Pourquoi pas ? Sous contrôle B. Très bien. Voilà comment faire glisser la page vers le bas, d'accord ? C'est ce qu'on appelle une ancre, et il y a un petit manque de timing et surtout de décalage. Mais tu y arriveras. Oh, et une dernière chose, c' est que parce que nous avons déterminé que 220 ou moins 220 fonctionnent pour cela, vous ne pouvez pas le changer pour tous. Le timing, oui, mais le décalage réel reste le même, si vous voulez qu'il apparaisse au même endroit. Passons donc aux prix où nous devons baisser assez loin. Il fait toujours moins 220. Quoi que vous ayez décidé, je vais faire en sorte que ce soit plus rapide, et allons-y, que les saisies fonctionnent à nouveau. OK, donc une minute et demie, peut-être une minute et demie, une seconde, 1,3 seconde. Donnons-en un aperçu et regardons-le. Il utilisera toujours ce décalage qui fonctionnera. La raison pour laquelle il ne va pas jusqu'en haut est qu'il n'y a pas assez de place en bas. Alors allons-y comme ça. Allons te chercher. Partez sur une tangente. OK, revenons au design. Cliquons sur le cadre. Où est-il là-bas ? Voici les critiques. Cliquez sur le cadre, grattez-le, et je vais l'allonger pour que ce type ait un endroit où faire défiler la page vers le haut, tu vois ce que je Sinon, il n'y a nulle part où continuer à monter. Que veut-il dire ? Ça ? Maintenant, il devrait arriver à l'endroit où nous voulions, car il y a un peu de place ici pour le transporter. N'ajoutez pas ce genre de choses, Dan, cliquez sur les boutons et faites défiler l'écran un peu vers le bas , et le tour est joué. C'est ça. C'est faire défiler les ancres à l'intérieur 53. Comment réaliser des composants interactifs dans Figma: Bienvenue. Bienvenue, bienvenue. Qu'allons-nous faire ? C'est super excitant. Tu es prêt ? Regarde, tu vois. Il est en vol stationnaire C'est très excitant. Ne t'inquiète pas Cela devient encore plus excitant. Écoutez, je saisis le bouton. Cliquez sur Activé et Désactivé. Même pas une ombre sur celui-ci. Quoi qu'il en soit, nous allons les faire, ils sont appelés composants interactifs. Nous le faisons assez facilement. Dan se perd vraiment en faisant celui-ci. Mais je vais l' inclure dans le cours, car vous pourriez vous perdre de la même manière. est très simple, même si ça a l' air d'être une longue vidéo, c'est juste parce que je m'y perds un peu. Tous, mon ami, faisons un survol et une coche super excitants Très bien, donc je commence par un simple vieux bouton. C'est un bruit automatique. Il y a du texte dedans. C'est ça. Ce que je tiens à vous rappeler , c'est que nous l'avons fait. Je vais te montrer ça. C' est exactement la même chose. Nous l'avons utilisé ici pour créer un ensemble de composants contenant un , deux ou trois éléments différents, et nous avons animé entre eux tous. Nous nous sommes retrouvés avec ça. Ce que nous avons fait, c'est ce que nous avons dit, vous animez entre les deux, un prototype Nous avons dit que nous utilisions simplement un délai. C'est la seule différence, mais cela ressemble à quelque chose de complètement étranger. Mettons-nous tous dedans dedans dedans dedans dedans dedans. Nous l'avons appris plus tôt. J'ai oublié de l'utiliser pendant le cours. Il suffit de parcourir toutes les nouvelles pages que nous avons ouvertes Ça y est. J' ai cette page ici. Si j'utilise un MacBook Pro ou une version de bureau, c'est parce que le survol ne fonctionne évidemment pas sur un téléphone Vous ne pouvez pas survoler un téléphone avec votre doigt. Mais c'est un très bon exemple de cette technique particulière. Nous devons donc vous fabriquer un composant. Fam, tu es un composant. C'est en ajouter une variante. En cours de conception, variante Maintenant, ce que je veux, c'est que la deuxième variante soit différente . Tout ce que je veux probablement faire, c'est choisir la couleur de remplissage qui sera l'une de mes couleurs les plus foncées. Donnons-lui une ombre. Cool. Tout comme pour Viva Techno, il suffit de prototyper, d' entrer dans mon ensemble de composants Cette variante revient à celle-ci. Mais au lieu de le faire après certain délai, nous allons dire « on tap », ce qui est très bien, ou « en un clic » et nous allons dire «  passez à la variante 2 instantanément nous n'allons pas le faire sur simple pression. Nous allons continuer en planant. Prenons un exemple de ce type. Il devrait être sur ma page de composants, mais il ne l'est pas, donnons-lui un aperçu. Il est toujours en cours de prévisualisation sur mon téléphone. Tu peux le changer. J' ai utilisé le raccourci pour accéder à l'aperçu, il s'ouvre comme ça. Tu peux aller à celui-ci, présent. C'est toujours sur un téléphone. Ne sélectionnez rien et dites, pas un iPhone 16. On pourrait dire « aucun appareil ». Je vais simplement choisir le format de page sur lequel vous travaillez , sinon vous auriez pu passer au Macbook Pro 16 Hé, prévisualisons-le et regardons ça. Très bien, nous avons un bouton de survol . Nous sommes durs. C'est un petit peu, on dit que c'est instantané. Ce que nous allons faire, c'est dire, en fait, vous, je veux le faire en survolant, pas instantanément Passons à l'animation, à la dissolution. Peu importe dans les deux cas, ça finira par se ressembler. Prévisualisez, passez le curseur au-dessus. Oh, c'est juste un peu lent. Le drop shot arrive très vite, non ? Essayons l'autre. Disons donc que lorsque je dis que cela n'a pas d'importance, essayons l'animation intelligente. Voyons si cela fonctionne mieux. Tu vas certainement mieux. OK. Ignorez ce que j'ai dit tout à l'heure. Les animations intelligentes sont bien plus agréables. C'est un peu lent. D'accord ? Vous pouvez donc simplement jouer avec ça. Une demi-seconde, regarde ça, sors. C'est mieux Nice H. Prenons un autre exemple. Je vais juste créer rapidement une case à cocher. Tu es là. C'est bon. Après tout ça, je me suis causé quelques problèmes et je me suis dit : « Je vais vous le montrer aussi ». J'ai utilisé un plugin pour trouver une tique car d'une manière ou d'une autre, les ticks sont vraiment difficiles à dessiner soi-même. Ils se sentent toujours mal. Bizarrement, si je suis un utilisateur d'Android, donc mes ticks ressemblent à un tic, ce n' C'est la coche IOS. Il s'agit de la coche Android. Ils utilisent ce qu' on appelle un matériau, mais ils nomment leur système de conception. J'aime toujours les tiques parce qu'elles semblent trop debout, mais elles ne sont pas assez longues trop debout, mais elles ne sont pas assez longues, de toute façon. C'est pourquoi j' utilise le plug in. J'aime Cons Eight parce qu'il contient beaucoup de trucs Apple. Il y a IOS ici. Il contient le matériel de Google, il y a Windows, toutes sortes de choses génériques. Mais ce que j'ai fait, c'est que je l'ai fait, j'ai trouvé la tique, et je me suis dit : « D'accord, c'est celle que je voulais », je l'ai attrapée et je l'ai traînée Je l'ai fermée, puis j'ai commencé à travailler. Ce que j'ai fait, c'est que j'ai cliqué sur la case, je l'ai réduite, j'ai commencé à travailler, je l'ai déplacée et je vous l'ai montrée au début du cours vous l'ai montrée au début du Je vais faire semblant d'en avoir parlé à nouveau maintenant pour te le rappeler, mais en réalité je viens de le faire. Ce que vous verrez, c'est que lorsque cela est sorti de cette icône 8 du plug-in, il y avait un cadre avec un vecteur à l'intérieur. Je viens de parcourir le vecteur et voilà un vieux truc qui traîne. Regarde ça. Si je prends le vecteur à l'intérieur d'ici et que j'essaie de le déplacer ici. Regarde, ça sort de là. Maintenant ils sont séparés, mais j'ai toujours ce gros cadre. Supprimez-le et supprimez-le parce que c'est ce que j'ai fait. Regarde ça. Si je passe la souris quelque part, où est le mien ? Voilà, c'est là. Il y a ce grand cadre dont je ne pensais pas qu' il existait et je me suis C'est quoi ce bordel ? Nous pouvons le voir sous Commande ou Contrôle Y pour les grandes lignes. Il y a ce truc. Tu fais quoi ici, bordel ? Nous le savons. J'ai réduit le crochet à l'intérieur. Ensuite, j'ai mis ce petit cadre autour de la marque. Ce que je dois faire, c'est prendre tout ça. Je l'ai appelé Frame 30. Disons que c'est une case à cocher, et je veux que ce soit terminé Donc tu en sors, tu as terminé et tu t'en débarrasses . Débarrassez-vous de Done. D'accord. C'est donc le long chemin dire : Que faites-vous, Dan ? En fait, ce que j'ai fait, c'est : ai-je besoin de cette deuxième image ? Je ne le sais pas vraiment ? Vous pouvez sortir et être cochée et cela peut disparaître. Cochez la case contenant un vecteur. J'aurais dû commencer comme ça et simplement réduire la taille de la boîte. Mais de toute façon, nous pouvons faire exactement la même chose. Que faisions-nous, bordel ? Je ne sais pas Je me suis perdu C'est ce que nous faisons. C'est exactement la même chose. Donc, ce que je peux faire, c'est comme avant, je peux dire composant UR , dire qu'il ne peut pas le transformer en composant, c'est un bon composant. Pourquoi pas ? Je peux le voir sur mon dernier panneau. Cette coche se trouve en quelque sorte en dehors du cadre de mon MacBook Pro Je peux le dire. J'y vois le texte. Donc je dois m' assurer que tu es là. Maintenant, je peux les sélectionner tous les deux, le composant cartographique, puis passer à la variante Tout ce que je vais faire, c'est dire que dans cette variante, je vais éteindre le globe oculaire OK, passer mode prototype et dire quand on clique sur ce truc Lorsque vous cliquez dessus, nous allons changer la variante deux et utiliser tous ces éléments d'animation intelligents. Nous n'avons probablement pas besoin de l'animation intelligente. Allons-y instantanément car c'est une coche. Prenons-en un exemple. Vous venez ici et nous allons en avoir un aperçu. C'est petit. Allons ici et entrons. Je peux cliquer dessus. Écoute, il ne revient pas en arrière. Cependant, il s'est allumé, alors il a cliqué sur Actualiser. Cela remonte à une page il y a de nombreuses lunes. C'est bon Réglons le problème principal : lorsque la coche est activée, elle ne revient pas en arrière. J'ai juste besoin d'aller ici et de dire, lorsque vous avez cliqué, revenez par là Vous pouvez faire les mêmes choses. Prévisualisez ceci. Maintenant parce que je n'avais rien sélectionné. Cela remonte à un autre endroit. Je pense que celui-ci est là, fluide. Ce que je dois faire, c'est que si ça continue, aller ici, passer au prototypage Commençons un nouveau flux. Je vais l'appeler bureau et je vais prévisualiser à partir d'ici. Maintenant, je passe au champ de saisie qui s'allume et s'éteint. Combien de temps dure cette vidéo ? Écoutez, nous avons Havas, Dill. J'ai mentionné que nous faisons aussi du Hvas, et une D'accord. Mais tu comprends maintenant. Nous l'avons fait très tôt pour une animation, mais nous l'utilisons maintenant pour créer des composants interactifs qui font des choses interactives intéressantes. C'est bon, c'est ça. Nous avons appris des choses. Nous nous sommes perdus. Pourquoi je me suis perdu. Mais nous avons tous appris quelque chose. Vous serez perdu de la même façon à un moment ou à un autre, mais vous vous souviendrez quand Dan s'est perdu. C'est bon, c'est ça. Passons à la vidéo suivante. 54. Projet de cours 14 - Composant interactif: C'est bon. Heure du projet de classe. Nous allons créer des composants interactifs. Je veux que tu le fasses. C'est une page de connexion avec une petite coche pour se souvenir de moi et le bouton de connexion a l'état Ha. Maintenant, je sais que tu ne peux pas faire Ha sur une mousse, mais tu n' as qu'à me faire plaisir Ce ne sont que des rectangles avec des ombres tombantes, rien de spécial Jetez un coup d'œil en ligne pour un exemple d'interface utilisateur de connexion. Vous avez une idée de ce à quoi cela devrait ressembler ? Mais en réalité, nous sommes là pour ça. Je veux que les composants interactifs pour les deux fonctionnent. Lorsque vous avez terminé, prenez une capture d'écran des deux. Définissez votre composant juste à côté afin que, lorsque vous le téléchargerez, nous puissions voir à la fois ce que vous avez créé les ensembles de composants et les ensembles de composants contenant ces composants interactifs Sur les réseaux sociaux, j'aime bien voir ce que vous gagnez. Si vous aimez ce cours, le moment est peut-être venu de dire à d'autres personnes à quel point les cours sont excellents et qu'ils pourraient venir le suivre. C'est comme ça que je continue à faire les choses. Si vous aimez le cours et que vous pouvez trouver un moyen de le promouvoir, n'hésitez pas à le faire. Cela agrémenterait ma journée. Mais oui, prenez plaisir à créer le projet de classe. Démarrons ces composants interactifs. Des coches super excitantes. Whoo. 55. Comment utiliser les sections dans Figma pour organiser votre contenu content: Bonjour, tout le monde. Cette vidéo est entièrement consacrée aux sections. Mains en l'air, qui ne l'a jamais utilisé ou n'a même jamais su qu'il existait. Il est là depuis longtemps. Regardons les sections, à quoi elles servent. Ils sont très utiles sur le plan de l'organisation , ce qui est un code pour s'ennuyer Vérifions-les parce que vous allez les croiser. Pour commencer, j'ai trouvé ce fichier communautaire. C'était de la part de Hansa Ohile. Merci beaucoup. En l'utilisant comme exemple, il existe une version iPad pour ordinateur de bureau et téléphone de cette application de trading. C'est là que les sections peuvent être très pratiques car elles sont relativement bien organisées. Mais ce que nous pouvons faire, c'est appuyer sur le bouton, vous n'avez jamais appuyé. C'est sous notre cadre pour le maintenir enfoncé et c'est celui-ci qui se déplace. C'est ce qu'on appelle section. Il le fait, c'est mettre une boîte autour des objets. Tu es comme si j'avais fait des boîtes. Cela ressemble beaucoup à un cadre. Il ne contient pas certains éléments de cadre, mais il comporte de belles parties organisationnelles. Comme dans, il a une nouvelle icône. C'est comme un petit dossier ou une section. Tout ce qui se trouve à l'intérieur est en dessous, ce qui est génial. Donnons-lui un nom, Command ou Control R, et disons que celui-ci sera mon téléphone ou que j' appellerai simplement un mobile. Vous pouvez faire certaines choses, comme je vais changer la couleur d'arrière-plan et cela organise simplement votre matériel. Vous pouvez le faire avec un cadre. La plupart des gens le font simplement avec un cadre. Vous pouvez convertir des cadres en sections, en sections de cadres. Le nom change en haut Au lieu d'être simplement un vieux cadre, il se trouve dans une pilule ou une boîte. Vous pouvez double-cliquer sur les bords pour qu'il s'adapte tout seul aux bords de vos dessins. OK, resserrez-les. Vous pouvez créer un lien direct vers une section. Au lieu d'essayer de dire « d'accord », je veux que tu t'en ailles à ce cadre. Vous pouvez voir, passons à cette section sur laquelle je travaille. Il peut s'agir d'une version, cela peut être mobile. Lorsque vous accédez à Partager, vous pouvez dire, j'aimerais que vous puissiez voir ici qu'il est indiqué qu' il s'agit de partager dans la section mobile. Si vous n'avez rien sélectionné, rien n'est sélectionné, passez à Partager, c'est différent. Je vais juste partager l' intégralité du fichier. Vous pouvez amener les gens à aller exactement où vous voulez qu'ils aillent. Vous pouvez vraiment vous débrouiller avec vos sections, vos équipes et vous pouvez avoir des sections à l'intérieur des sections pour diviser davantage les choses Ce que vous ne pouvez pas faire, c'est qu'ils doivent être les patrons. Si j'ai un cadre et que j' essaie d'y placer une section, de voir ce qui se passe au-dessus de Myers, cadre quatre, si j'y mets une section, vous remarquerez que ma section 5 est au-dessus du cadre Il ne veut tout simplement pas entrer. Les sections constituent le bossage et les cadres peuvent entrer à l'intérieur. Vous pouvez vivre sans sections, mais vous allez vous retrouver dans les dossiers d'autres personnes, vous vous demanderez : « Quelles sont leurs fantaisies ? Tu sais, tu as des sections. L'autre point, c'est que vous pourriez tomber sur le dossier de quelqu'un d'autre et vous dire  : « Oh, c'est un cadre Vous vous demandez pourquoi je ne peux pas faire des choses sur le cadre ? Pourquoi ne puis-je pas le faire ? Passons à Auto Lout Shift e. Alors voilà. Ce sont des sections. Si vous êtes un designer UX super organisé, vous allez adorer les sections. Si tu es comme moi, et que tu finis par traîner au loin Je fais des sections lorsque je remets des fichiers au développeur ou à d'autres personnes, juste pour faire semblant vraiment organisé, mais voilà. Sections, à apporter pour certaines personnes. Certaines personnes les adorent. Dites-moi dans les commentaires si vous êtes un amoureux ou si vous ne voyez pas le pointeur. Très bien, mes amis, c'est tout. Je vous verrai dans la prochaine vidéo. 56. Comment créer une barre de recherche expansive dans Figma: Bonjour, toi. Êtes-vous prêt pour quelque chose d'amusant ? D'accord, prêt ? Jouet super fidget, barre de recherche super insistante et sourde qui s'étend Oh, j'adore celui-ci. Ce qui est cool, c'est que cela repose vraiment sur tout ce que nous avons fait auparavant, et c'est un bon petit résumé de nos géniales réussites en matière de prototypage Nous allons rencontrer plein de choses différentes ensemble dans le cadre de ce projet Super résultat, c'est un projet vraiment cool qui réunit tout ce que nous avons appris dans un projet délicat et satisfaisant. Je n'arrête pas de cliquer sur la petite barre de recherche. Nous allons donc recommencer depuis le début juste pour nous assurer que nous sommes tous prêts, que nous sommes doués pour les prototypes et que nous arrêtons de cliquer vers le bas. Tout d'abord, j'ai créé une page. En fait, je viens de voler la page Familia et de supprimer la barre de recherche que nous avions, mais il y avait assez de place en haut pour que nous puissions mettre une petite barre de recherche en haut Ajoutons notre icône, Command Shift K, Control Shift K. Dans vos fichiers d'exercices, il y a un dossier d'icônes. Apportons l'icône. Je vais cliquer une fois ici. C'est très gros. Je vais me procurer l' outil de mise à l'échelle et m' assurer que la couche parent est sélectionnée. Rosie est là. Ce n'est pas le vecteur à l'intérieur, tu te souviens ? Je vais dire que tu as 24 ans. Retour à mon outil de déplacement, outil de sélection, sélectionnez les couleurs. En fait, je vais choisir l'un de mes styles, le 500. Pouvez-vous le voir, voir toutes les choses intéressantes que nous commençons à assembler ? Ce que je veux aussi, c'est l'outil de saisie, je vais taper. Rechercher. Je vais copier cela, aller modifier, et je vais copier les propriétés, aller modifier. Nous allons aller chez Pace Properties. Oup. Co. J'ai du texte et un membre de la barre de recherche. Tu dois essayer de saisir le cadre à l'extérieur, pas le vecteur à l'intérieur Voilà, tu y vas. C'est bon. Je veux que ces objets soient dans une voiture. Doivent-ils l'être ? Pensée cérébrale, probablement. Je vais sélectionner les deux, Shift A. Ils sortent automatiquement. Ajoutons un peu de blanc. Je vais ajouter une ombre. Il va falloir que j'aime parcourir ces chiffres. Ce sera un, un, et 25, c'est toujours un peu trop élevé. Peut-être 20. Bien, ajoutons quelques coins arrondis. N'oubliez pas qu'il suffit de quelque chose de très haut pour les rendre ronds, et nous aurons besoin d'un peu de rembourrage Mettons juste n'importe quoi ici pour le moment. Allons-y huit d'un bout à l'autre. Il s'agit donc de huit, onglet huit. Il lui en faut plus. C'est bon. Nous allons le faire fonctionner mécaniquement, puis nous pourrons le ranger. Donc, ce que j'aimerais faire, c'est en quelque sorte l'amener là où je veux. Je vais appuyer sur Shift G pour activer mes guides. OK ? Voilà. Et puis de ce côté, je veux que ce soit jusqu' ici. Sympa. Shift G à nouveau. Très bien, ça devrait fonctionner maintenant. Il faut donc que ce soit un composant, Command Option K, Control Alt K. C'est un nouveau jour. Je pense que c'est peut-être une nouvelle semaine en fait. Je crois que la semaine dernière j'ai dit que j'arrêterais d'utiliser les raccourcis, du moins certains d'entre eux. J'ai oublié lesquels, alors supportez-moi. Nous l'avons intégré dans un composant. Nous avons besoin de le faire défiler vers le haut, deux variantes. Cette variante haut de gamme, je veux qu'elle soit belle et légèrement secouée comme ça. Waouh. Génial Faisons-le fonctionner mécaniquement. Ensuite, nous pourrons corriger tous les bugs. Ce que nous voulons faire, c'est le mode prototype, et nous voulons dire que celui-ci est disponible ici. À quoi ça sert ? Cliquez ensuite sur Remplacer par celui-ci. Pas d'instant, passons à Smart Animate. Et ce que je veux faire, c'est que j' aimerais que la facilité d' entrée et de sortie soit cool. Cool. Et ce dont nous avons besoin, c'est qu'il s' agit d'un composant principal, nous devrions donc le mettre sur notre page des composants principaux , mais pour l'instant, ce n'est pas le cas. OK ? J'en veux un exemple. C'est un peu pénible de traîner une instance. Je maintiens la touche d'option enfoncée. Vous pouvez maintenir la touche Alt enfoncée sur un Mac pour en faire glisser un vers l'extérieur. Une petite astuce intéressante est, n'oubliez pas que deuxième option nous amène aux actifs, au lieu de passer par les éléments et de cliquer, cliquer, cliquer, cliquer, cliquer, cliquer, cliquer, tout le temps. Tu peux revenir ici. B dans les fichiers, passons à Option ou Alt 2 et tapez simplement la recherche, ce qui ne fonctionnera pas car cela s'appelle le cadre 32. D'accord. Je vais donc appeler cela une recherche. Tout cela fonctionnerait beaucoup plus facilement s'il s' appelait recherche. Je suis ici, je suis super d' avoir le panneau Assets, le deuxième rouleau facultatif, puis de commencer à taper « Rechercher », et le voilà en haut. Je vais dire que tu vas ici, allons-y. Nous ignorons le texto qui traîne. Cliquons sur vous, prévisualisons-le , et les parties fonctionneront. Ah, ça s'est agrandi. Tu peux le voir ? Je suis sorti comme ça pour me rafraîchir, ça marche. y a deux choses que nous devons faire. Nous voulons qu'il parte Si vous l'avez vraiment ici, il fonctionnera. Donc, si vous le vouliez de ce côté, vous avez presque terminé. Je veux souffrir et je veux que la mienne soit ici. Ce que je suis tenté de faire, c'est d'aller ici et de dire : A Je ne sais pas quoi faire, concevoir, je vais dire votre contrainte vers la droite. Peut-être que celui-ci doit être limité à droite. Je ne sais pas, vous essayez et cela ne fonctionne pas parce que vous êtes comme, vous êtes comme si c'était le cas ici. N'oubliez pas que la contrainte ne s'applique pas au composant lui-même. Il faut que ce soit l'instance. Vous pouvez voir que cela part de la gauche, qu'il s'en sert comme référence et qu'il va dans cette direction. Je vais dire que tu vas vers la droite. Donnons-lui un G. Duke. Ah. Nous sommes en train de le faire. Cela ne revient pas en arrière, mais nous savons comment y remédier. OK, revenons en arrière. Donc c'est parti, j'ai donc créé un mode prototype, et nous allons dire. Tout le bouton s'y trouve. Mais quand tu auras fini, ne prends pas le côté. Attrapez les petits points. Parfois, ils sont difficiles à trouver, eh bien, si vous revenez par là, tout semble bon. Intelligent, oui. Souvenez-vous de tout ce que j'ai enduré. J'espère donc que nous devrions maintenant être en mesure de basculer, oui et oui J'adore ce mouvement d' entrée et de retour. Peut-être un peu vite. Quoi qu'il en soit, nous devons maintenant changer cela. Nous devons nous débarrasser de la recherche. OK ? Vous pouvez le faire de deux manières. J'ai donc de la chance. Mes recherches sont en quelque sorte insignifiantes. Donc, ce que je peux faire, c'est venir ici et dire à ce sujet que vous êtes sous-conçu, que vous êtes coupée Si vous êtes en train de découper, veuillez conserver le contenu du clip Ça y est. OK ? Et j'espère que maintenant allons-y. C'est parti. Cela semble un peu bizarre. Non, ce n'est pas le cas. S'échappe. Parfait. L'autre chose que le mien fonctionne très souvent quand je fais ça, c'est que les choses ne s'alignent pas. Ce type est entouré d'un cercle étrange. Il n'a pas tout à fait raison. Je suppose que le tien est pareil, cassé. Ce que vous pouvez faire si vous utilisez loupe est un peu étrange, ou si vous pouvez toujours voir la recherche, même si elle est coupée. Je vais dire en fait le cadre parent ici sur le composant. Vous pouvez dire que je veux que votre rembourrage soit un peu différent. Je vais donc le diviser en quatre, afin que je puisse les voir tous les quatre et peut-être que vous en avez juste besoin d'un peu plus en haut, ou peut-être d'un peu plus sur la droite ici. Vous pouvez double-cliquer dessus. Vous passez en mode design, mais vous pouvez simplement double-cliquer dessus et dire, en fait, j'aimerais que ce soit neuf. Eh bien, vous pouvez utiliser la flèche vers le haut du pH. Entrer ? Qu'est-ce que je faisais ? J'étais en train de combler le vide. Oui, voilà. L'écart est l'espace entre vous et la barre de recherche. Si je fais celui-ci, tu vas commencer à le voir. C'est un autre conseil. Je n'étais pas ce que j'essayais de faire. Si je monte, voyez-vous que je peux simplement le pousser pour qu'il sorte hors du cercle. Avec ça, on en est à neuf. Maintenant, je peux monter, emmène-le où tu veux. Vous devrez peut-être redimensionner votre loupe. Vous pouvez agrandir l'ensemble de votre barre de recherche. Il existe de nombreuses façons d'y faire face. Les mécaniciens sont là maintenant. Donnons-en un aperçu une fois de plus, et il y a une autre chose que je sais que je veux faire. Tu peux voir par ici ? Je l'ai juste mis au hasard en haut à droite. Mais quand il disparaît, vous voyez trop loin de cette façon, pas loin de cette façon. C'est difficile de l'aligner parce que vous voyez, c'est vraiment petit. Comment le faites-vous ? Vous pouvez faire de nombreux tests. Ce que vous pouvez faire, c'est une petite astuce : ce qui se passe avec une variante est sélectionnée, la valeur par défaut est celle du haut. Ce que vous pouvez dire, c'est que je ne veux pas que ce soit la valeur par défaut. Je veux être le deuxième et ensuite tu pourras l' aligner ou Shift G, tu peux l'aligner correctement, Shift G encore une fois pour le désactiver et tu pourras dire, en fait, je t'ai juste utilisé pendant une petite seconde, revenons-y. Maintenant, ok Génial. Eh bien, vous remarquerez également que si vous plissez les yeux, il y a une étrange pixellisation qui se produit, je pense que c'est l'ombre au travail Je ne sais pas, c'est là depuis toujours et ça ne semble pas disparaître. C'est un prototype. Vous ne l'avez peut-être remarqué que maintenant que je l' ai remarqué , non ? Donc tu es du genre : « OK ». Mais j'adore ça. Regardez-le. C'est cool. Accroche-toi. Je pense que j'ai peut-être un moyen de m'en débarrasser. Tu attends là-bas. Non, je n' arrive pas à le comprendre. Ignorez la pixelisation. À moins que vous ne le sachiez, faites-moi savoir dans les commentaires si vous avez une solution de contournement C'est peut-être juste réparé, mais c'est comme ça depuis environ quatre ans maintenant, trois ans. Lorsque vous le faites, comme dans l'application, OK ou sur un site Web, vous pouvez totalement le faire et la pixelisation ne vous viendra pas à l'esprit Vous devrez peut-être suspendre votre incrédulité pendant un petit moment Je n'arrête pas de cliquer dessus. Nous ferions mieux de passer à autre chose parce que c'est usé. J'adore l'idée d' une fonction de recherche qui utilise très peu d'espace d'écran. Ce que c'est est est très clair. Vous cliquez dessus, il s'agrandit pour former une belle grande boîte. Oh, j'aime bien ça. C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. 57. Projet de cours 15 - Développer la barre de recherche: Bien, c'est l'heure du projet de classe, je veux que vous créiez votre propre barre de recherche extensible avec tous les problèmes que cela pose. C'est une question délicate, elle lie plein de choses différentes. Essayez-le. Ce que je veux que tu fasses, c'est sur celui-ci. Dans le passé, je vous ai demandé de commenter le travail de deux autres personnes. Ce que je veux que vous fassiez, c'est lire les commentaires et voir si quelqu'un a besoin d'aide. Voyez si vous pouvez aider deux autres personnes là-bas, alors nous serons tous très utiles. Si vous vous trompez, faites partie de ceux qui commentent en bas en disant «  je suis perdu » et expliquez pourquoi. Partagez également un lien vers votre projet, comme lorsque nous partageons des projets pour que les utilisateurs puissent les examiner, vous pouvez partager des projets auxquels les gens peuvent jeter un œil, saisir le lien et vous pouvez également le mettre dans les commentaires afin que les gens puissent le déchiffrer et jeter un coup d' œil à votre projet Si vous avez réussi à faire fonctionner le vôtre, assurez-vous d'aider certaines de ces personnes. Je n'arrive pas à joindre tout le monde. Je reçois littéralement des centaines de milliers de commentaires chaque année, mais je fais de mon mieux. J'adorerais ton aide. Créez donc une barre de recherche extensible. J'adorerais en voir une animation. Vidéo ajoutée aux projets de classe. Sinon, vous pouvez prendre une capture d'écran de votre ensemble de composants et nous dirons simplement que vous l'avez fait fonctionner. Si vous lancez la vidéo, j'adorerais la voir sur les réseaux sociaux. Je ne sais pas ce qu'il en est. J'adore ces petites barres de recherche gonflables et ce que tout le monde sache où vous le faites Le cours de Dan. C'est bon. Profitez de la création de la barre de recherche. Ce sera un peu frustrant. Bonne chance 58. Soyez prudent à ce que vous créez dans Figma ma: Bonjour, tout le monde. Cette vidéo est un avertissement. Fais attention à ce que tu crées. Editeur, pouvez-vous zoomer et dézoomer comme ça ? Fais attention, alors de quoi parle-t-il ? Je parle de prototypes et d'animation. Donc des animations, des choses qui se jouent, d'accord ? Tu ne fais vraiment rien avec eux. Et puis les prototypes, d'accord, lesquels nous faisons les dernières vidéos ressemblent à de l'interactivité Et l'avertissement est que parfois, vous pouvez concevoir des choses impossibles à construire ou du moins qui prennent beaucoup de temps, ce qui signifie très cher. Parfois, cela ne dépend pas des compétences de votre ingénieur, de votre développeur ou de vous-même si vous voulez le faire. Veillez donc à ne pas créer quelque chose, à ne pas le vendre au client, puis à ne pas le faire, vous savez, puis à ne pas le supprimer et à quelque chose qu'ils aimaient, ou à ce que cela coûte cher Vous savez, parfois certaines de ces interactions et, vous savez, compétences spécialisées peuvent finir par doubler le prix du travail ou le temps, Alors, soyez-en simplement conscients. Un bon moyen. Par exemple, il y a des moments où tu as besoin de tout ça. Par exemple, si vous vous adressez à un client, vous avez parfois besoin de toutes les indications nécessaires pour vous faire sentir et, vous savez, vraiment vendre le concept C'est peut-être pour votre portfolio, allez trop loin pour ça C'est peut-être juste pour impressionner le patron, d'accord ? Il y a des moments où vous devez en quelque sorte monter de niveau. Mais il arrive souvent que nous commencions à faire quelque chose et que je continue à ajouter des éléments, et c'est le cas et j'ai doublé le temps qu'il m'a fallu pour créer sans réel gain net concerne les tests utilisateurs parce que c'est ce que nous voulons vraiment faire. Nous voulons créer quelque chose rapidement, le communiquer aux parties prenantes, le mettre entre les mains de nos utilisateurs et recueillir des commentaires. Et, vous savez, Figma est prototypage rapide. Je ne sais pas pourquoi j'ai fait ça. C'est du prototypage rapide. Certaines des choses que nous avons construites ici n'ont rien de rapide . Fais juste attention. Jetez un œil au terme Lean UX, d'accord ? C'est juste, tu sais, parfois, que tu peux te perdre un peu dans les détails. Et parfois, il suffit quelque chose de très rapide, super wireframing et de sommaire pour arriver là où vous devez aller et être capable d'itérer. C'est donc ça. Parfois, vous n' avez pas besoin de tous les niveaux. Parfois, vous avez juste besoin d'une solution rapide, puis parfois vous pouvez créer des choses qui peuvent être très difficiles à construire pour le développeur ou l'ingénieur. Il se peut qu'il ne puisse pas être construit. Une autre chose est que nous allons faire un peu plus sur l'animation , que nous avons abordée dans un chapitre précédent . Animation Figma, n'est-ce pas fait pour ça, d'accord ? Vous pouvez faire quelques animations de base. Nous allons le faire parce que c'est amusant, et cela nous aide à gâcher les outils et à devenir vraiment bons Mais si je dois faire de l' animation pour quelque chose, quelque chose qui doit être diffusé sur la page d'accueil l'image de bienvenue ou sur l'image du héros, je veux de l'animation, je le ferai dans un autre programme. After Effects dispose d'un plugin appelé Body Moving, dont nous parlerons des animations Lottie Et tu le ramasses et tu le mets dans Figma, d'accord ? Ce n'est pas vraiment un outil d'animation. Il existe des plugins qui vous aideront avec animation, l'animation de la chronologie, d'accord ? Sache juste que, oui, tu peux le faire ailleurs et simplement le jeter. C'est le prototypage, c'est la spécialité de Figma. OK. Il était donc très bon pour les prototypes interactifs, d'accord, et ce, assez rapidement. Il y a aussi des limites, et si vous voulez opter pour une approche encore plus spéciale, comme, je sais, le photoréalisme, je ne sais pas quand les utiliser Mais quelque chose qui ressemble à une véritable application, vous devrez peut-être passer à l'étape suivante avec quelque chose comme ProtoPie est assez courant Nous y reviendrons plus tard. Mais oui, voilà. Ne concevez pas quelque chose qui ne peut pas être construit. C'est l'avertissement que je voulais diffuser ici. C'est bon, c'est ça. Je vous verrai dans la prochaine vidéo. 59. L'espace des calques dans Figma: Bonjour, ma Figma. Il s'agit de la couche Zent. Je vais apporter du plaisir à travailler avec des couches. De gros documents confus vous donnent mal à la tête. Ne t'inquiète pas. Zenhem. Maintenant, erreur. Cette vidéo va vous apporter la joie ou vous ennuyer pour Tess. Cela m'apporte de la joie, alors rejoignez-moi dans ce voyage. Allons-y. D'accord. La première est la touche Entrée ou la touche Retour si vous utilisez un Mac. Je l'utilise tout le temps, surtout pour les boutons. Vous pouvez cliquer sur le bouton. Au lieu de double-cliquer, double-cliquer, double-cliquer, saisir le texte Tu peux. Sélectionnez sur le bouton. Appuyez sur Entrée, il plonge simplement à l'intérieur du bouton et le texte est maintenant sélectionné. Vous pouvez appuyer à nouveau sur Entrée, et le texte est même surligné. Va. Est-ce utile ? Je ne sais pas tout le temps. Entrez Entrez, changez-moi. Échappez-vous pour sortir. fois par semaine, tout. Est-ce utile ? Vous pouvez simplement exécuter la commande et cliquer pour vous plonger dans des choses plus complexes. L'Enter ne fonctionne pas pour cela car il y a beaucoup de choses. Passons à mes couches. Vous pouvez voir qu'à l'intérieur de mon Nav , il se passe un tas de choses Il serait donc plus facile de maintenir la touche Commande ou Ctrl enfoncée et de cliquer dessus. Ensuite, vous pouvez appuyer sur Entrée et le modifier. Oh, la touche Entrée. Pourquoi est-ce si bon ? Oh, ça va mieux. Parfois, j'essaie de trouver des choses complexes, des choses qui s'ajoutent à d'autres choses. Allons-y pour ce texte. Ce bout de texte se trouve à l'intérieur du parchemin horizontal légèrement défilant, à l'intérieur d'une carte, qui se trouve à l'intérieur d'une mise en page automatique, qui se trouve à l'intérieur d'une autre boîte Il se passe donc beaucoup de choses. Ce que j' aime vraiment, c'est de maintenir enfoncée la touche commande ou contrôle, MacOPC et de cliquer avec le bouton droit de la souris Tout le monde a un clic droit, mais regardez ça. Vous pouvez choisir la hiérarchie. Écoutez, vouliez-vous dire la critique telle qu'elle est dans le cadre ou vouliez-vous dire le parchemin de la critique ? Peut-être que vous regardez le commentaire d'achat. C'est peut-être le tag dans lequel il se trouve ou le texte qui est recommandé. J'aime bien ça parce que tu en as juste besoin, c'est parfois difficile d'y aller, , pas toi, tu ne peux pas en sauvegarder un. Vous pouvez simplement maintenir la touche Commande ou Ctrl enfoncée, écrire des clics et dire : « Je veux leurs lèvres et je veux le cadre dans lequel elles se trouvent ». Ce que vous voulez, ce n' est pas tout à fait au bas de l'échelle. Tu penses que c'est ennuyeux, ça va devenir encore plus ennuyeux, mais j'adore ça. Il y a un peu d'OCDME de conception et, pour une raison ou une autre, cela me donne tout ce qu'il faut Regarde tout ce qui se passe ici. Ce que j'aime vraiment, c'est l'option. Faites-vous tatouer sur votre avant-bras ou Alt Al, ne changez pas Mac ou BC. Le tatouage ne marchera pas. J'adore ça. Écoute, je range juste tout. Tout s'est effondré et le zen est rétabli. Ensuite, vous pouvez aller dans le champ de votre choix et y jeter un œil. Je vais combiner celui-ci. Vous pouvez cliquer sur ces chevrons et voir, disons celui-ci ici. Qu'est-ce qu'il y a là-dedans ? Qu'est-ce qu'il y a là-dedans ? Ce qu'il y a dedans, vous pouvez passer des heures à essayer de et de découvrir que tout le trouble obsessionnel-compulsif est terminé J'ai besoin de tout trouver ici. Je dois développer tous ces chevrons. Ce que vous pouvez faire, c'est simplement maintenir la touche Commande ou Ctrl enfoncée et cliquer sur le Chevron qu'il s'expose tout seul accord, peut-être ne pas s'exposer, mais partager tous ses entrailles. C'est une sorte de meurtre. C'est bon. C'est ça qui fait ça. Maintenez la touche Commande enfoncée, maintenez la touche Ctrl enfoncée et cliquez simplement sur le Chevron En fait, tu dois d'abord le sélectionner, puis le faire. Eh bien, bon point. Vous pouvez donc voir ici que ce n'est pas du tout sélectionné, donc je peux tout voir Encore une fois, vous ne pouvez rien sélectionner. Et souvenez-vous de ce tatouage, Option a tout rangé. Sympa. L'autre point, c'est que lorsque vous êtes ici, certaines personnes n'utilisent même pas les pages. Ce que vous pouvez faire, c'est voir que les pages ici peuvent être empilées. Tu es comme si je ne les utilisais jamais. Je veux plus d'espace pour mes couches. L'autre est, disons, développons tout sur Select All, maintenons la touche Kamankey enfoncée et cliquons sur l'une d'entre elles, et nous ouvrirons tout. Mais parfois, ils deviennent assez longs. Aucune des miennes ne l'est vraiment. Oh, il y en a. Si vous voyez que cela devient de plus plus long, en plus long, vous pouvez simplement le faire glisser pour l'agrandir, vous aurez un peu plus de place. Vous avez peut-être un très grand écran et vous êtes heureuse d'avoir une belle grande fenêtre ici. Même chose pour les pages. Si vous utilisez un grand nombre de pages, vous pouvez simplement procéder comme ça et dire : « Je n'ai besoin que de plus de pages parce que j'ai un grand écran géant ». Vous pouvez double-cliquer dessus pour revenir à la version la plus petite. Tout ça, c'est tout. Cela se superpose. Reste maintenant. Faites-le moi savoir dans les commentaires. S'il y en a un là-dedans, tu es du genre : «   C'est ça ». C'est celui-là. De même, faites-moi savoir si je refais ce cours, comme si, Dan, ce cours n'avait pas besoin de couches vidéo Je pourrais le supprimer. Je ne le ferai probablement pas. Ça me rend heureuse. C'est ça. Je vous verrai dans la prochaine vidéo. 60. Recherche avancée dans Figma ma: Nous faisons une recherche avancée, pas très avancée, mais très utile, surtout si vous n'en connaissez pas le pouvoir. Allons-y et faisons quelques recherches. OK, alors trouve-toi un remplaçant. Vous serez enregistré et peu de gens savent qu'il y a une petite icône de recherche. Je peux taper quelque chose. Disons que j'en ai besoin. J'ai quelques modifications de texte à faire et j'en ai besoin de beaucoup. Le mot, ce que j'ai compris, c'est collectif. Le collectif Groove est à la base de ce document. La seule chose à noter également, est que Cs l'a coloré, le fait tout le temps. Ça m'a fait flipper quand je l'ai vu pour la première fois. Je me suis demandé : « Qu'est-ce qui s'est passé avec ça ? Quels styles s'y appliquent ? Ce n'est pas une montre pendant la recherche, ça revient à la normale. Réactivez la recherche , il est évident qu'une recherche et un remplacement sont vraiment utiles. Je vais taper Groove Collective et nous avons découvert qu' en fait, il est censé s'appeler groove code point. Je trouve cela utile lorsque vous utilisez à moitié la connexion, l' inscription ou la connexion. Vous devez être cohérent Vous devez donc rechercher toutes les instances dans un gros document et dire : «   Oui, je veux que vous les changiez un gros document et dire : «   Oui, toutes et un seul coup ». Sympa. Maintenant, c'est Groove Co partout. Remplacer n'a que peu de choses que vous pouvez faire. Trouvez, cependant, saisissons un bouton Word. Vous pouvez trouver tout ce qui possède un bouton, mais vous pouvez voir qu'il y en a beaucoup trop. Vous dites : « Non, je veux toutes les instances ». Ce qui est cool avec Find , c'est que vous pouvez entrer ici et dire, je veux juste vous montrer les exemples de ces gars. Voici tous mes boutons. Très pratique pour un gros document. Tu dois aller changer quelque chose. Tu as juste besoin de savoir où tout se trouve. Une chose est de vous assurer de désactiver le filtrage et le désactiver avec un petit X si vous avez fini de rechercher des informations. C'est facile. Passons à la vidéo suivante. 61. Comment renommer manuellement des calques en masse avec des astuces avancées dans Figma: Bonjour, tout le monde. Je vais essayer de t'impressionner avec tout mon code. Mais en réalité, j'ai juste cliqué sur ces boutons. C'est un excellent moyen de renommer de nombreux objets à la fois. Vous n'avez pas besoin de savoir comment coder. Il suffit de savoir comment cliquer sur les boutons et la magie opèrera. Allons-y. Très bien, je vais donc passer à ma page Interactions, elle est un peu plus petite. Nous l'apprendrons plus tôt, mais vous pouvez renommer à l'aide de l'IA, exemple la page du panier ici Je vais dire, cliquez avec le bouton droit de la souris et je veux que vous utilisiez cette fonctionnalité de renommage des couches et d' IA, que vous cliquiez dessus et que vous observiez la magie Magnifique. L'une des grandes choses que j'ai aimées lorsque j'ai utilisé le nom. D'accord ? C'est écrit, était-ce Groove Collective, pour le titre ci-dessus. Mais une fois que j'ai changé le nom, je ai appelé nom de l'artiste, et tu me dis  : « Oh, tu es douée Cela va changer au fil du temps. Vous pouvez le voir ici, cadre 23. Cela n'a pas changé. Donc ce que vous pouvez faire, c'est que vous pouvez dire, en fait, renommer ce type, renommer le Laos et il pourrait simplement dire : «   Hé, il n'y a rien qui ait besoin d'être renommé, faites-le quand Et parfois, il fait les choses correctement. Tu es du genre à aller ici, Jickbton. C'est bon. Mais maintenant, nous voulons faire quelque chose d'un peu plus manuel car c'est une bonne solution et cela peut vous permettre de vous rapprocher de ce que vous voulez, mais parfois nous devons simplement le faire automatiquement. J'ai quelques icônes. Si vous posez des questions à ce sujet, ils sont super cool. Ils viennent d'Icone Eight et ils le sont. Trois D plus le sina Je n'ai jamais pu les utiliser en dehors des cours, mais ils ont l'air tellement cool. Je vais tous les sélectionner, passez la souris au-dessus. Faisons le ménage. Pour une raison ou une autre, tidy up ne veut pas les faire horizontalement. C'est vrai verticalement, n'est-ce pas ? Vous pouvez maintenir la touche V optionnelle enfoncée. C'est une option pratique, option V ou H, horizontale, verticale. Je ne veux pas qu'ils soient alignés horizontalement, annulez. C'est juste un raccourci pour les deux. Donc, si vous survolez et que vous survolez, je les utilise beaucoup. Bien, nous avons donc nos icônes, et vous voyez qu'elles proviennent directement de l'icône 8 appelée Trash Share et de Bookmark, ce qui est une bonne chose Il est difficile de le trouver. Je les appelle toutes icônes, et je peux cliquer dessus et simplement les taper. Mais dans un hit escape, ce n'est pas ce que je veux. Je dois dire que si je clique sur l' un d'entre eux et que je fais un goommand, c'est un Pouvez-vous le voir surligné dans le panneau LaaS pour que je puisse commencer à taper ? Vous en avez sélectionné plusieurs et appuyez exactement sur la même touche, commande ou contrôle, puis vous passez à cette chose. C'est comme le renommer en bloc. cool, c'est que vous pouvez dire, en fait, que je veux en renommer deux, quoi ? Le mot icône. Vous pouvez voir ce qu'il fait. C'est ce qu'on appelle une icône. Je veux lui donner un numéro, croissant, décroissant, donc je veux passer à l'icône un, deux, trois Tu peux voir ce qui s'y fait ? C'est l'expression d' une raison quelconque, signe Dlo N est un nombre et N est un autre nombre. Il y en a donc deux. Tu pourrais te débarrasser de l'un d'entre eux. Vous pourriez l' appeler icône un, deux, trois. Écoutez, hacker informatique. Je ne sais pas vraiment comment fonctionnent ces ailes. Je les utilise un peu dans le design. Ils ont ce qu' on appelle les styles grep. C'est très similaire. Si vous avez quelque chose de compliqué, vous pouvez vous adresser à un développeur et lui demander. Si vous êtes vous-même un développeur, il existe de la documentation sur Figma sur la façon de le faire fonctionner. Nous allons faire en sorte que les choses restent simples. Ce que je veux faire, c'est ajouter le mot icône. Je voudrais ajouter un chiffre, un seul d'entre eux, pas deux. Pas quatre ou cinq, juste un. Ensuite, j'aimerais mettre un espace, un trait d'union et un espace Ce n'est pas nécessairement la façon dont j'aime nommer les choses et je veux utiliser le nom actuel. Une raison est le signe du dollar et c'est le code pour utiliser son nom existant. Cool. Je les ai renommés à partir de la corbeille et j'ai ajouté un signet à l'icône avec un système de numérotation, puis j'ai simplement utilisé leur nom actuel. Renommez, c'est fait Cool. Donc, si vous vous souvenez de la recherche dans la dernière vidéo qui était ennuyeuse. Tu peux y aller et trouver des trucs. OK, trouvez toutes vos instances de boutons, celui-ci, celui-ci, et il n'y en a que deux sur cette page en particulier. Mais imaginez que vous en avez beaucoup plus, puis appuyez sur votre commande ou contrôle. D'accord, vous pouvez dire, en fait, que j' aimerais utiliser le nom actuel. Je ne le sais pas. Je veux juste que ces gars appellent le principal. Cela peut être suffisant ou vous souhaitez utiliser la numérotation principale D'accord ? Et il va les renommer D'accord, il y a un changement de nom en masse. Vous pouvez utiliser les fonctionnalités de l'IA, mais parfois vous devez simplement utiliser le type de fonctionnalité manuelle et ne pas avoir peur du code. D'accord ? En gros, ce sont trois que vous utiliserez et il suffit de regarder l'aperçu ici. Qu'est-ce que tu veux faire ? Annuler. C'est bon. J'espère que cela vous a été utile. Nous sommes des maîtres de couches. En fait, je vais le faire encore une fois, juste pour être lent. Tu peux continuer. Si vous maîtrisez celui-ci. Je vais annuler, annuler, annuler jusqu'à ce que ces gars redeviennent des choses normales. Allez, on y va. Encore une. Je sais qu'en classe, il est parfois utile d'en suivre un de plus. Donc, je vous ai sélectionnés plus d'un. Accédez à Command ou Control R pour les renommer. Et je dois dire que j'aimerais que vous les appeliez des icônes avec un numéro. Ensuite, je vais le mettre dans un espace dans un trait d'union sans raison valable parce que j'aime son apparence, puis je vais leur dire d' utiliser leurs noms actuels Cliquez sur Renommer, et c'est terminé. Voilà. Lisse. Vous avez peut-être un tas de cartes contenant des fonctionnalités. Quel que soit le nom que vous souhaitez renommer en bloc, sélectionnez-en plusieurs, Command ou Control R. Très bien. C'est ça. Rendez-vous dans la prochaine vidéo. 62. Trouver des composants à l'aide de l'IA: Vous, nous allons faire quelque chose de super génial. J'adore cette vidéo. C'est ce qu'on appelle trouver des composants avec l'IA, ce qui semble nul, mais bon sang, c'est cool. Plein de bons raccourcis , c'est comme si j'avais besoin d'un ticket. Donnez-moi ceux qui ressemblent à ça provenant de la communauté et soyez capable de les sortir et de les utiliser. Prêt à rouler Allons-y. C'est bon. Nous avons récupéré nos actifs dans le panneau des actifs. Cet atout vous donne du fil à retordre lorsque vous passez de l' un à l'autre. Il existe un raccourci Shift I sur Mac et BC qui permet passer directement à votre panneau Ressources dans cette petite fenêtre. Vous pouvez saisir des informations. Disons que j'ai besoin d'un billet. Je sais que j' ai une icône de ticket. Il l'a trouvé. Je peux le faire beaucoup plus facilement. Shift I. Ce qu'il fait, c'est passer à cette option ici , puis passer aux actifs. C'est juste une façon différente d' arriver à la même chose, mais Shift I vous y emmènera automatiquement. Shift I. L'autre point intéressant, c'est que le ticket n'est pas très bourré Les gens ne sont pas sûrs que ce soit un billet. Nous pouvons donc saisir un ticket. Ce que j'aime vraiment, c'est de parcourir le reste de mon document. Je n'en ai trouvé qu'une : vous pouvez accéder à la communauté, et cela va permettre de consulter les fichiers communautaires de tout le monde et d'y trouver des tickets. Donc, celui de Tamsburg, je peux le traîner. Je peux juste commencer à utiliser celui-ci. La seule chose à laquelle il faut faire attention , c'est que cela est apparu comme un composant principal, prêt à être utilisé. Parfois, ils sont apparus sous forme d'exemples. Il suffit donc de vérifier s'il s'agit d'une instance. vous suffit de cliquer dessus avec le bouton droit de la souris et de dire détacher, puis vous pouvez en faire votre propre composant principal Shift I. Supposons que nous encore un ticket et disons que vous aimez ce ticket. Tu es comme, eh bien, comme ça. Je me demande s' il y a vraiment quelque chose sous le terme « communauté ». Disons que vous aimez celui-ci, ou demandez-vous quel est le reste. Vous pouvez le sélectionner, vous pouvez dire ouvert et communautaire et il ira dans le fichier dans lequel il l'a volé, et voler n'est pas le bon mot. Voici le dossier. Je peux y accéder et ouvrir le fichier communautaire auquel il l'a emprunté. Jetez-y un coup d'œil, utilisons notre fonction Sweet Find. Kit à tiques. Rien sur cette page. Ce ne sont que des pages. Déplacez deux points pour zoomer dessus, car il y était caché, mais vous pouvez maintenant voir tous les autres que vous pourriez utiliser. Mais ne nous y trompons pas. Vous pouvez aller voir d'où il vient, mais je l'aime vraiment. Disons que tu en as besoin, très bien, je dois créer un bouton de partage. Shift I, tapez Share. Je vais voir ce que vous avez actuellement dans vos bibliothèques, que vous avez créé, mais aussi dans notre communauté. Tu peux y jeter un œil. Vous allez dire : « À quoi elle ressemble ? J'aime bien celui-ci. Faites-le glisser vers l'extérieur et commencez à l' utiliser. N'oubliez pas de le sélectionner. Il suffit de vérifier. C'est quoi celui-ci. Vous voyez ici, il s'agit d'une instance, pas du composant principal réel. Je pourrais cliquer dessus avec le bouton droit de la souris et accéder au composant principal. Nous ouvrirons le fichier d'où je ai obtenu, mais je veux juste le détacher Je vais en faire un élément principal pour moi. Oh, ça va mieux. C'est une recherche visuelle. Parfois, tu te dis « Je veux que tu trouves que c'est une question difficile ». Disons la personne. Tu es comme, A, cette personne ici. Je veux trouver un remplaçant. Fais ce que Dan a dit, Shift D, tape des personnes. Non C'est une personne. Il fouille mes affaires. Je n'en ai qu'un. Passons à la communauté, personne. C'est un peu ce que je voulais. L'homme. Tu peux passer des heures à te dire Ce n'est pas ce que je voulais ». C'est vraiment cool. Je vais donc le fermer. Une fois sélectionné, je peux dire celui-ci ici. Utilisez l'IA pour effectuer une recherche visuelle de l'objet que j'ai sélectionné. C'est ce qu'il a fait. Comment s' appelle-t-il réellement ? Cela ne le dit pas vraiment, mais cela m' a indiqué de nombreuses options différentes. Vous pouvez dire, en fait, que j'aime bien celui-ci. Non, j'aime bien celui-ci. Vous pouvez faire glisser et commencer à l'utiliser. Prêt à rouler D'accord ? Il y a donc deux ou trois choses là-dedans. Déplace le gros fichier, ouvre votre dossier de ressources. Vous pouvez saisir des informations. Bouton, Shifte, saisissez des informations. N'entrez pas et ne jetez pas un coup d'œil à ce que vous avez dans votre bibliothèque ou allez dans la communauté. Voyons quels autres boutons sont créés. Tellement de boutons. Si vous n'arrivez pas à y penser ou si vous avez juste besoin d'un guide visuel pour le faire, il vous suffit de cliquer dessus et de dire, pareil, sournois Effectuez une recherche visuelle, s'il vous plaît. Jetez un coup d'œil à mes documents, mais aussi à ce que vous trouvez dans la communauté. Beaucoup de cœurs différents. C'est bon. C'est ça. un plaisir de trouver des composants dans le joli nouveau raccourci Shift I. 63. Échange d'instance dans un composant: Bonjour. Dans cette vidéo, nous allons effectuer un échange d'instance. Cela signifie que je peux avoir un bouton et simplement choisir parmi les différentes instances qui se trouvent à l'intérieur. Je peux y aller rapidement, j'ai besoin du plus. Terminé. Cela est différent de la création d'un bouton dont les différentes icônes sont toutes répertoriées. Nous pouvons simplement avoir un composant principal et nous pouvons le dire : Hé, cette petite zone , vous pouvez utiliser ces différentes icônes si vous le souhaitez sans avoir à être si précis. Cela devient de plus en plus amer. Quatre n' est pas trop mal pour varier. Mais lorsque vous obtenez quelque chose comme ça, vous avez besoin d'un champ de saisie, et il doit avoir tellement de variantes différentes, certaines d'entre elles ont une étiquette, d' autres non, autres ont des listes déroulantes de textes Certains d'entre eux ont le truc du globe oculaire. Il existe tellement de variantes différentes que vous vous retrouvez avec un fichier comme celui-ci pour un simple formulaire. Nous allons donc apprendre à effectuer un échange d'instance. Nous pouvons donc n'avoir qu'un seul champ ou, dans ce cas, un bouton. Nous allons commencer par un bouton parce que c'est plus simple et nous allons simplement dire : « Très bien, je peux choisir parmi n'importe quel nombre de ces composants préférés. Un seul bouton pour toutes les contrôler. D'accord ? Allons-y. Bien, pour commencer, j'ai créé un bouton, juste un cadre très simple contenant du texte, et j'en ai fait une sortie automatique pour qu'il s'agrandisse. Il apporte quelques icônes, Command Shift K sur Mac, Control Shift K sur PC, et il y a un dossier contenant des icônes spéciales ou spéciales. Celles que nous voulons utiliser sont appelées icônes deux, saisissez-les toutes les quatre, ouvrez-les, et je vais cliquer une, deux, trois fois, quatre fois. J'ai toutes mes icônes. Je dois m'assurer que ce bouton est un composant. M, et pareil pour ceux-ci. Sélectionnez-les tous, et je vais dire que j'aimerais que vous soyez ou plusieurs composants. Très bien, voici donc mes principaux composants. Ce que je veux faire, c'est prendre une instance, disons du tick. Je vais donc simplement en faire glisser une copie et la mettre dans mon bouton. Comme il s'agit d'une mise en page automatique, elle se redistribue. Maintenant, je vais faire glisser une instance de mon bouton, que j'ai appelée cadre deux, peut-être appelons-le autrement. Appelons celui-ci. Mais un nom orange est terrible pour ça. Parce que la première chose que nous allons faire est d'utiliser l'instance, allons-y et changeons simplement la couleur pour clarifier ce que nous faisons. Donc les composants principaux ici, l'exemple ici bas. Ce que je peux faire avec l'instance et éviter tous les tracas que nous allons apprendre, pas les tracas, mais toutes les choses fantaisistes, c'est que je pourrais y entrer, cliquer sur la case et dire, en fait, je ne veux pas que ce soit cliquer sur la case et dire, en fait, je ne veux pas Je souhaite changer d'instance . Où est-ce que je le veux ? Pas celui-ci, le crayon, le crayon là. Cela fonctionne très bien. Quand je travaille seule, le problème, est qu'il est difficile de savoir lesquels sont autorisés à entrer ici. Le crayon, tu te dis : « Oh, est-ce que c'est celui-ci, est-ce que c'est cet autre ? Il y en a tellement sur ma page de composants. Ce que nous pouvons faire pour être excellents et nous faciliter la tâche, pour les grands systèmes de conception et pour les concepteurs débutants, vous pouvez le dire dans ce composant principal ici, vous pouvez dire : cochez cette case ici, cliquez sur la case à l'intérieur. Donc, dans cette instance, vous pouvez faire quelque chose appelé échange instantané. Avec un ti sélectionné, c'est l' instance à l'intérieur de mon bouton. Je peux dire, voyez cette option ici. Il dit, créez une propriété d'échange d' instance. Vous pouvez dire « Hop, nous allons l'appeler icône » pour indiquer clairement ce que nous échangeons. La valeur par défaut va être définie, c'est très bien. Ce que je peux faire, c'est ce que je peux faire. Il indique les valeurs préférées. Je peux aussi dire : j'aimerais que ce soit l'un d'entre eux, qu'est-ce je voudrais que ce soit fait pour être l'un d'entre eux, et pas celui-ci, lesquels d'entre eux avons-nous ? Crayon et plus. Ce qui est cool, c'est que si je le ferme et que je crée la propriété, cela signifie simplement que lorsque quelqu'un dit : « J' ai besoin d'un bouton ». Je vais en donner un exemple et ils pourront dire : « On se voit ici ? » Icône, quelle icône voulez-vous ? Ce sont les seuls parmi lesquels vous pouvez choisir, non la longue liste de composants de l' ensemble de votre document ou de votre système de conception. C'est juste beaucoup plus clair. Co. Je vais vous montrer ceci pour que vous puissiez être géniale, mais aussi pour que lorsque vous trouvez un bouton et que vous vous demandez, est-ce que cela se produit ? C'est quoi ce vaudou ? C'est parce qu'ils ont fait un échange instantané. Avez-vous pu rencontrer des problèmes ? Pas vraiment de problème, mais j'ai choisi ces icônes spécifiquement parce que vous voyez ça, elles ont la même hauteur et la même largeur, 16 sur 16, celle-ci, 16 sur 16, celle-ci, 16 , celle-ci, 16 16. Donc, lorsqu'ils font l'échange, il y a un beau chevauchement. Si vous finissez par y mettre beaucoup de tailles différentes, cela devient plus délicat C'est pourquoi, lorsque vous trouvez des ensembles d'icônes, vous constaterez qu' ils le sont souvent. vois, c'est plus étroit que le crayon, mais ils le placent dans le cadre parent, et il a une hauteur et une largeur spécifiques, pour qu'ils soient tous assortis. Parce que vous le combinez avec une variante, à 100 %, d'accord ? Si vous n'aimez pas cette méthode, la raison pour laquelle elle est bonne est que le composant principal est exactement celui-ci. Alors que si nous avions un écart, nous devrions le faire, nous devrions avoir celui-ci, puis nous remplacerions celui-ci par quatre. Supprimons-le. Prenons une version de ceci. C'est très bien. Ensuite, il me faudrait un autre, un autre, et un autre, et c'est bien s'il y en a quatre. Mais lorsque vous commencez à accéder à des versions de boutons qui présentent d'innombrables variantes, cela devient encore plus délicat. Oui, c'est une bonne introduction. Il suffit d'utiliser des boutons. C'est ce qu'on appelle un échange d'instance. Vous pouvez avoir un seul bouton et effectuer de nombreuses tâches différentes. Génial. Je vous verrai dans la prochaine vidéo. 64. Comment utiliser la propriété de composant booléen dans Figma: C'est bon, tout le monde. Dans cette vidéo, nous allons examiner les propriétés des composants. Celui-ci s'appelle un lingot, et à quoi sert-il ? C'est très cool. Nous pouvons simplement l'activer et désactiver l'icône que nous avons créée. Cela signifie que nous pouvons dire que j'ai ce composant principal qui peut faire plusieurs choses. Je peux dire, A, je veux que ce soit terminé ou que ce soit terminé. Mais en fait, tu sais quoi ? Aucune. C'est nous qui fabriquons une propriété d' investissement nom semble bizarre, mais il peut être super. Allons-y. C'est vrai. Pour activer notre petit interrupteur, trouvez le composant principal et trouvez celui que vous souhaitez désactiver. Je l'ai sélectionnée et je vais passer ici à l'apparence et il y a cette option ici. Il s'agit de l'application d'une variable ou d'une propriété. Nous allons appliquer une propriété, et nous allons passer à plus et la propriété sera, vous pouvez voir qu'elle est par défaut avec ce lingot Ils ne l'appellent même plus 1 milliard. C'est un mot bizarre, il m'a donné une bonne réputation. Est-ce que je veux montrer le fait ? En fait, je veux simplement l'appeler icône car cela va générer de nombreuses icônes différentes. La valeur par défaut sera. Propriété. Maintenant, je prends mon instance et je peux dire : « A quoi ? Icône que je souhaite afficher ? Peut-être que c'est fait. En fait, je n'en veux aucune. Voilà. Allez. Comme il s'agit d'une sortie automatique, elle se redistribue Ne me demandez pas ce qu'est le violet. Je le cherchais et je me suis dit : « C'est quoi ce bordel ? Je ne sais pas Il semble qu'il ne soit pas prévisualisé, et si vous pouvez me dire ce que c'est, faites-le moi savoir dans les commentaires. J'ai parcouru les options d'affichage. Cela semble tout simplement disparaître. Tu peux voir ? C'est parti là-bas. Je pense que c'est peut-être une solution. C'est ainsi que l'on peut activer et désactiver les choses. Vous pouvez voir quand vous le combinez avec, je veux qu'il soit allumé, mais je veux que ce soit un crayon . Ce petit composant principal est beau et petit, pas une pile de variations , avec toutes les icônes, puis il est désactivé à nouveau. Très cool. C'est bon. Vidéo suivante. 65. Créer un champ simple avec les propriétés des composants: C'est bon, tout le monde. Dans cette vidéo, nous allons combiner ce que nous avons fait dans les deux dernières vidéos pour créer quelque chose de différent. Nous allons le faire pour le bouton. Nous allons faire exactement la même chose. Nous allons activer et désactiver les choses et échanger des icônes. Mais nous allons le faire pour un champ de texte car c'est la même chose, mais le rendu est différent lorsqu' il est utilisé différemment. C'est un bon résumé de ce que nous avons appris. Ce gars ici peut avoir une étiquette allumée et désactivée, peut avoir l'icône allumée et désactivée et l'icône peut être désactivée. Nous sommes en train de le faire. Sautez dedans. Pour commencer, j'ai dessiné quelque chose qui ressemblait à un champ. Il s'agit simplement d'un cadre avec un trait l'extérieur et des coins arrondis. J'ai mis des textes à l'intérieur. Il ne fait même rien. Ce n'est tout simplement pas des voyants automatiques, juste pour traîner et j'en ai fait un gris clair Également crédité d'un bout de texte, il est écrit étiquette. Commençons par celui-ci. Allons ici pour trouver une étiquette pour notre champ, et nous allons récupérer tout cela, en faire un composant. Ensuite, nous allons entrer dans vif du sujet et prendre un bout de texte. Ici, là où il est question d'apparence, nous voulons dire que je veux en ajouter une. Voulons-nous montrer l' étiquette ? Oui, je vous en prie. Maintenant, lorsque nous le faisons glisser et que nous avons notre instance, nous pouvons dire « afficher l'étiquette ». Je ne veux pas montrer l'étiquette, vous pouvez modifier le texte ici. Ça va être, disons, date de naissance, Dp. Allons-y et ajoutons également le swap d' instance. Je vais importer quelques icônes. Command Shift K, Control Shift K sur un PC. Il existe un autre dossier appelé icons three. J'ai ces deux icônes. Je vais cliquer une fois, cliquer deux fois, saisir les deux. Ils sont de la bonne taille. Vous avez 18 ans sur 18 et 16 sur 16. Oups, tu vas devoir les changer. Parce que je veux vraiment qu'ils soient de la même taille. Je vais les sélectionner tous les deux et créer plusieurs composants. Je vais en prendre une instance, pas le membre principal du composant. Un composant principal ne peut pas vivre à l'intérieur d'un autre composant principal, nous allons donc récupérer votre instance, accéder, tous les UPS s'y trouvant. Maintenant, ce que nous allons faire, c'est dire que ce truc bouge, n'est-ce pas ? Nous utilisons celui d'en bas , puis celui-ci est légèrement différent. Vous voyez que les icônes sont légèrement différentes. Appliquez une propriété variable, et celle-ci est un échange d'instance. Très similaire. Cliquez dessus et lesquels est-ce que je veux autoriser les gens à utiliser ? Le crochet. Ça en bas. J'ai obtenu mes valeurs préférées, j'ai glissé la propriété. Maintenant, j'espère que ce truc ici, je peux dire : voulez-vous l'étiquette ? Non. Est-ce que je veux prendre le danger ? C'est une coche, mais parfois nous voulons la désactiver. Revenons à notre composant principal, découvrez le composant. Donc, notre instance à l'intérieur d'ici, disons, ici en bas, l'apparence. Est-ce que je veux que vous présentiez que la propriété présente un danger ? Je vais l'appeler show icon. Créez une propriété. J'espère que maintenant, je peux dire que ce type affiche l'étiquette sur et hors de l'icône. Et choisissez une autre icône. Regardez ce que nous avons fait. Ignorez le violet. Peut-être que c'est un peu rapide, tu peux le revoir à nouveau. C'est exactement la même chose que dans la dernière vidéo, mais nous avons ajouté un bouton, ce qui est utile, mais ces champs peuvent également être très utiles. Une chose que je pourrais faire, c'est que pour mon élément principal, c'est que cela ne semble pas être la bonne solution. Je veux étiqueter, puis activer et désactiver l'icône, puis en sélectionner l'instance. Dans mon cas, je veux le changer à partir de ce qu' on appelle instance. Appelons cela une icône. Juste pour que ce soit un peu clair ici. Oui, icône, Checkmark. Faire des choses. La seule autre chose, c'est que j'ai à moitié sauté dessus , c'est que ce bout de texte est centré, dois revenir à mon composant principal et dire, vous devez être aligné à gauche et revenir là-bas Celui-ci a gardé le parfum, ce qui est intéressant. Si vous faisiez glisser un nouveau composant, il restera aligné à gauche Mais je ne savais pas que tu pouvais. Oh, ça ne l'est pas. Pourquoi pas ? Vous êtes aligné à gauche. Ils devraient tous venir faire le trajet maintenant. Passons à une autre instance. Dan est en train de se perdre Il a transformé un tutoriel simple en didacticiel pour Dan se perdre. Oui. Cela fonctionne, nous combinons des choses et nous faisons preuve de fantaisie. Dans de nombreux cas, vous devrez peut-être activer et désactiver des éléments et échanger des instances simplement pour que votre composant principal soit beau et petit, facile à partager, mais qu'il puisse devenir de nombreuses versions différentes. J'espère que c'était éclaircissant. OK, je te verrai dans la prochaine vidéo. 66. Projet de cours 16 - C'est votre anniversaire: Bonjour. C'est l'heure des projets de classe. Je veux que vous mettiez en pratique ce que nous avons appris. OK, nous allons créer ce champ ici et il contient beaucoup de choses que nous voulons utiliser. Vous allez devoir créer une étiquette qui doit être activée et désactivée. Pareil pour l'icône, et l'icône lorsqu'elle est activée, je peux également choisir différentes icônes et un texte d'aide en bas et l'exemple de texte qui se trouve au milieu N'oubliez pas, dans votre composant principal que vous voudrez peut-être réorganiser ces éléments Je viens de remarquer que les choses appelées instance veulent probablement appeler celle-ci. Alors nommez-les correctement et passez la bonne commande , car je veux probablement l'exemple de texte juste en haut. Cela semble être l'un des plus importants. A, dans votre fichier de projet de classe, créez donc un champ de saisie en utilisant les propriétés des composants. L'important, c'est que lorsque vous créez les propriétés des composants, elles se situent parfois en haut et parfois en bas en apparence. Si ce n'est pas en haut, c'est en apparence plus bas. C'est la seule chose que je ne sais pas. Si je ne les ai pas faites depuis un moment, j'oublie sur laquelle je clique. Co. Vous avez donc besoin d'un champ, qui n'est qu'une boîte blanche. L'exemple de texte doit être activé ou désactivé, l'étiquette doit être désactivée, le texte auxiliaire doit être activé et l'icône doit être activé, mais il peut être remplacé instantanément. Vous pouvez utiliser mes icônes, vous pouvez trouver les vôtres. Les livrables, je veux que vous preniez une capture d'écran de votre composant principal, y compris les propriétés Je vais te montrer ici. Où est mon composant principal ? Faites-le configurer lorsque je clique dessus, je peux prendre une capture d'écran de tout cela en même temps. Je peux voir mon composant principal, mais nous pouvons en fait voir toutes les différentes propriétés et voir si vous les nommez correctement ou non. En fait, peu m'importe comment tu les appelles pour voir si tu peux les faire fonctionner. C'est difficile à faire, mais cela peut être très utile et encore plus utile lorsque vous vous faites remettre le truc de quelqu'un d'autre et que vous dites, voilà et que vous vous dites : « Waouh, il fait toutes sortes de choses géniales ». Tu sais comment c'est fabriqué. Le vôtre. C'est bon. Profitez du projet de classe. Je vous verrai dans la prochaine vidéo. 67. Comment incurver du texte avec des caractères sur un chemin dans Figma: Bonjour, tout le monde. Dans cette vidéo, je vais vous montrer comment placer du texte sur un chemin dans Figma. Allons-y. Très bien, il faut donc commencer par la forme. Je vais utiliser le cercle. Donc, en utilisant le raccourci O de mon clavier, maintenez la touche Shift enfoncée pour obtenir un cercle parfait, puis passez à l'outil de saisie et cliquez simplement sur le bord. Vous verrez l'icône passer des barres croisées à celle-ci et il vous suffira de cliquer à l'endroit où vous souhaitez qu'elle commence Même si vous ne les placez pas au bon endroit, sélectionnez-les tous. Je vais maintenir la touche d'option PC enfoncée et la faire simplement glisser pour l'agrandir. Ce que vous pouvez faire, c'est revenir à l'outil de sélection et vous remarquerez que je l'ai sélectionné. Tu vois ce petit point ? C'est là que tout commence. Le mien est aligné à gauche. Je vais placer le mien au centre et placer mon ancien alignement de texte normal au centre. Maintenant, c'est au sommet. Vous remarquez que la forme est invisible. Si vous avez toujours besoin d'un cercle, vous devez dessiner une deuxième ellipse à utiliser comme partie centrale Parce que nous utilisons ce cercle d'origine comme texte sur le tracé. Maintenant, vous pouvez dessiner et récupérer n'importe lequel de ces outils ici. Je vais utiliser le crayon et je vais dessiner une forme et c'est pareil ici. Prenez l'outil de saisie et vous pouvez simplement cliquer dessus et nous pouvons taper. L'autre chose que tu peux faire , c'est de t'en débarrasser. Une fois sélectionné, vous pouvez jouer avec les bases. Vous devez souvent jouer avec l'espacement des lettres pour obtenir le bon résultat, car il est ventilé, dépend de la précision de votre cercle L'autre point, c'est qu'ici, vous avez de nouvelles options, C ici. Vous pouvez écrire du texte par-dessus le chemin, vous pouvez dire du texte au milieu en dessous, selon ce dont vous avez besoin. Ce que l' on me demande souvent, c'est comment faites-vous des deux côtés ? Tu ne le sais pas vraiment. Vous n'avez que deux cercles distincts. Je vais faire du Limerick. Deux zones de texte distinctes, et ce que je vais faire, c'est qu'il y a une option de retournement. J' ai oublié de le mentionner. Je vais le faire pivoter et je le veux en dessous de la ligne, et vous pouvez voir que je peux donner à ce truc l' impression qu'il tourne autour d'une ellipse. Je vais placer mon fardeau Ensuite, je vais passer du temps à faire en sorte que tout soit beau, à jouer avec l'interligne. Mais c'est l'essentiel. Vous pouvez le faire autour d'un cercle, d'un squiggle, d'un carré, d'une étoile, tout ce que vous voulez C'est du texte sur un chemin à l'intérieur de Figma. 68. Projet de cours 17 - Texte courbe: C'est l' heure des projets de classe. Je veux que vous utilisiez la fonction de texte incurvé et que vous refassiez votre logo Cela peut être très simple. Tu peux y consacrer un peu plus de temps. Ce n'est pas vraiment le problème. Il s'agit simplement de jouer avec le texte de la courbe. Un nouveau logo, assurez-vous d'utiliser un ou plusieurs éléments de texte incurvés et téléchargez une capture d'écran. J'adore aussi le voir sur les réseaux sociaux. Si vous êtes en quête d'inspiration, quelque chose comme le dribble Je viens de taper le logo du badge, parfois appelé logo emblème Mais vous pouvez voir ici une simple courbe. Le cercle complet de celui-ci ne dépend que de vous. Assurez-vous de me taguer sur les réseaux sociaux. J'aimerais voir ce que tu gagnes. Je ne sais pas pourquoi le texte incurvé est génial, mais c'est Amusez-vous bien et je vous verrai dans la prochaine vidéo. 69. Comment faire en sorte que les boîtes de texte s'alignent avec le bord en utilisant la découpe verticale: Bonjour, tout le monde. Nous allons examiner le découpage vertical. Si vous êtes comme moi, et que vous êtes du genre, j'ai réglé mon rembourrage à huit pixels, et vous dites : « C'est loin d'être proche de huit pixels Quelle est cette grande lacune ici ? Je vais te montrer comment le désactiver. En fait, il est très facile d'aller ici et de cliquer sur ce bouton. Mais il y a encore un peu plus à cela, alors allons-y. Mais regardez à quel point les lignes sont bonnes maintenant. Bien, je vais commencer par le type d'outil de saisie, et je vais utiliser le bouton de saisie du mot. Je vais m'échapper pour sortir de l'outil de saisie et vous verrez que j'utilise juste Inter, qui est la valeur par défaut pour figma, et je vais le transformer en Autolayout et je vais lui donner une et je vais lui donner Et qu'allons-nous faire ? Eh bien, si je clique sur le cadre parent ici, vous remarquerez qu' il a un rembourrage horizontal et vertical de huit par défaut Ce que vous remarquerez, c'est que si je passe le curseur au-dessus du rembourrage vertical, vous voyez le huit ci-dessus, laissez-moi le déplacer pour que nous puissions zoomer Tu peux voir ? C'est loin du texte réel. Les côtés sont plus proches, mais le haut et le bas sont loin de huit pixels. Je peux les compter. Ils sont si proches. Cela fait huit, neuf, dix, 11 pixels. Ce qui se passe, c'est que le typographe a décidé que l'apt, qui est la majuscule, est défini aussi loin que la ligne de base Chaque police est différente. Si je le change pour opter pour celui-ci en ultra. Ce n'est pas la même chose que l'Inter. En fait, c'est assez proche. Laisse-moi penser à un autre. Je pense que Leto est différent. OK, je peux voir que Lato fait environ 3,5 pixels avant de se rapprocher du haut Ce que nous pouvons faire, je vais revenir à Inter, c'est avec le texte sélectionné, vous pouvez passer à la typographie, accéder aux paramètres ici, et vous pouvez activer ce truc ici C'est ce qu'on appelle le découpage vertical ou quel que soit le nom qu'ils appellent cela à une hauteur de cap par rapport à la ligne de base. Il adapte simplement la boîte au type réel. Ça ne sera jamais parfait. Vous pouvez voir, regardez, qu'est-ce que c'est là ? Pourquoi y a-t-il un espace là-bas ? Cela sera dû au fait que certaines des autres lettres majuscules seront supérieures ou inférieures à celle-ci. Ils sont tous pareils. Je suppose que ce que je voulais dire, c'est que vous ne l'obtiendrez jamais parfaitement. Mais l'utilisation de la découpe verticale vous permettra de vous en rapprocher vraiment. Maintenant, il semblerait que si je clique sur le texte à l'intérieur, j'ai la zone de texte qui maintient votre touche d' option, ancienne touche sur un PC et que je survole simplement Tu vois que c'est plus proche des huit ? C'est ce qu' on appelle le découpage vertical. Si vous passez du temps à essayer d'aligner les choses et que vous vous demandez, pourquoi est-ce que ça ne fait pas la queue ? Parfait Expérimentez avec un découpage vertical. Mais sachez que certaines polices sont différentes et que vous allez au moins avoir une certaine originalité avec certaines polices Très bien, garniture verticale. Je vous verrai dans la prochaine vidéo. 70. Tronquer du texte dans Figma …: Bonjour à tous. Dans cette vidéo, nous allons regarder les troncatures, le point qui apparaît lorsque vous avez le S moor. C'est vraiment bien de jouer aux cartes. Je n'avais pas l'intention de l'inclure dans le cours avancé, mais je finis par le faire souvent lorsque je copie et colle de nombreux textes pour remplir les champs Vous avez conçu pour les quatre ou cinq petites lignes, puis vous devez parcourir toutes les autres listes et falsifier le point. Nous pouvons l'activer dans le composant principal et le faire automatiquement. En fait, c'est juste cette topographie, troncature sur quelques lignes troncature sur quelques lignes . C'est la version facile. Permettez-moi de vous expliquer un peu plus et d'attendre jusqu'à la fin J'ai rencontré un problème que vous pourriez également résoudre si vous avez suivi le cours. Allons tronquer les choses. Pour que cela fonctionne, il n'y a rien la mise en page automatique ou quoi que ce soit d'autre, je vais en faire J'en veux une autre version, et le groupe suivant est celui des prodiges, et nous allons remplir toutes ces différentes listes, et je l'ai obtenu soit à toutes ces différentes listes, partir d'une base de données, soit copier-coller, soit à partir d'un document Je suis du genre : « Oh, oh, nous pourrions aller dans la zone de texte ». Ce que j'ai fait dans le passé, c'est avec la zone de texte sélectionnée. Je passe juste en revue, je supprime tout cela, j'en supprime un peu plus , puis j'ajoute mon propre point de troncature et je le fais semblant. Mais il existe un moyen simple. Tout cela étant toujours là, nous pouvons revenir au composant principal. Saisissez la case et sous les propriétés du texte. Vous avez cette option qui indique de tronquer le texte. Vous pouvez voir là, en bas de la zone de texte, que tout sera tronqué, tout comme toutes les instances Le texte est toujours là et il est toujours modifiable, mais vous remarquerez que lorsque je sortirai, tout disparaît et ajoute la troncature C'est sympa et facile. Au moment où ma zone de texte est définie sur une taille fixe. Si vous optez pour la hauteur automatique, ce qui signifie qu'elle s'étendra et se contractera, vous pouvez revenir aux mêmes paramètres de topographie et obtenir des lignes Mx C'est uniquement pour ça que je vais le mettre à trois. Ils vont tous à trois. La seule chose à vérifier est de vous assurer que vous êtes réglé sur Hauteur automatique et ce n'est qu'alors que les lignes maximales apparaîtront. L'une des choses que j'ai découvertes dans les dernières vidéos lorsque nous étions train de taper sur un chemin, c'est que je l'ai fait alors que la valeur par défaut était définie pour cette ligne centrale Je vais désactiver la troncature. Nous avons donc fait la troncature, désactivez-la maintenant car je veux vous montrer le problème que j'ai rencontré Lorsque j'ai ajouté beaucoup de texte, il a commencé à s'étendre du milieu vers le haut dans les deux sens. Avez-vous également eu ce problème ? C'est parce que nous étions en train de taper du texte sur un chemin Nous l'avons fait fonctionner au centre. Je devais juste m' assurer d'aller dans ma boîte d'origine ici et de la placer en haut, ce qui est la valeur par défaut, de la remettre en position, puis de commencer à travailler. Je vais réactiver ma troncature. Oup. Réglez-le sur une ligne. Montez deux, trois ou quatre. Génial C'est la troncature. Nous allons simplement le taper en point point et effectuer de nombreuses suppressions. C'est bon, c'est ça. Je vous verrai dans la prochaine vidéo. 71. Masquage d'images en utilisant l'arrière-plan AI: Bonjour, tout le monde. Nous allons utiliser l'outil de masquage basé sur l'IA intégré à Figma Je vais vous montrer ce qu'il y a de bon à ce sujet, certaines des choses bizarres qui ne vont pas Mais dans l'ensemble, il fait un travail assez incroyable. Et si vous attendez jusqu'à la fin, je passe aux années 1980 et je vais vous montrer un outil de couleur Figma sympa Très bien, allons-y . C'est bon. Première étape, j'ai quelque chose à partager. C'est la troisième fois que j' enregistre ce tutoriel. J'ai enregistré le mauvais écran deux fois de suite. Je vais donc vous parler du masque, et je vais le faire d'une manière un peu grognon Autant que je l'ai rendu grincheux Oh, d'accord. Ce que nous devons faire, c'est apporter quelques images. Je veux donc que vous les rapportiez de vos fichiers d'exercices les numéros 912 et 13 Apportez-le Je viens de créer une nouvelle page intitulée Images, juste pour avoir quelque chose à part. Nous allons commencer par celui-ci ici. Il s'agit d'une image générée par l'IA, mais elle possède un arrière-plan. Nous pourrions travailler avec l'IA pour voir s'ils pouvaient nous en donner un sans antécédents lorsque nous l'avons créé à l'origine, mais c'était il y a longtemps. Donc, ce que nous allons faire, c'est le sélectionner. Nous allons passer ici à nos actions, et nous allons taper Supprimer l'arrière-plan. C'est une fonctionnalité de l'IA. Cela fait partie des options payantes de Figma Je vais cliquer dessus, puis être étonnée de voir à quel point il est prêt ? Oh, c'est bon. Ce truc est louche depuis longtemps, mais ça devient vraiment bon Il y a quelques éléments. Par exemple, si je le fais glisser ici, il est parfait. OK ? Regardez-le partout. C'est génial. C'est un peu ici. Il a fait un excellent travail, mais il y a des choses étranges parce que j'adore mon ombre. Donc, si j'ajoute une ombre, tu peux voir que ça fait flipper. Cette nana est la tienne, tu le seras dans le futur. Ils ont peut-être résolu le problème, mais il ne s'agit pas savoir quoi faire sur ces bords. Il possède un masque de découpe très dur qu'il utilise pour le fard à découper, mais il existe en fait un joli masque Je ne sais pas où est le problème, mais sais juste qu'il y a des problèmes. A Exports Lovely au format PNG. Je ne sais pas ce qui se passe avec cette ombre. Cela fonctionne donc très bien lorsqu'il y a un fort contraste entre l' arrière-plan et le premier plan Faisons-le encore une fois, supprimez l'arrière-plan. Les personnes réelles et les choses compliquées prennent beaucoup de temps. Celui-ci a été très rapide. Je vais passer à autre chose quand celui-ci sera terminé. C'est bon. Cela prend donc peut-être quatre ou cinq fois plus de temps que cela, mais c'est quand même un résultat assez étonnant. Regardez-le. Même ici, j'aime bien ça. Je vais le mettre au-dessus de ça, mais c'est super. Cela pose les mêmes problèmes lorsque vous commencez à ajouter une ombre portée. Mais quand il y a moins de contraste entre l'arrière-plan et le premier plan, KC, il y a beaucoup de couleurs similaires ici en arrière-plan C'est vraiment difficile de trouver une solution. Essayons-le et supprimons l'arrière-plan. J'essaie de choisir quelque chose de difficile. Je passerai directement au moment où ce sera fait. En fait, en cours de route. Oh, c'était une bonne transition. Tu peux voir ? Je ne savais pas quoi faire. Il a fait un travail incroyable. Si vous avez déjà masqué Photoshop il y a un an ou deux, c'est toujours très bon, et nous pourrions y remédier, mais cela a fait un excellent travail en déterminant il finit et où commence l'arrière-plan Probablement impraticable sur fond blanc. Mais regardez en bas. Il suffit de saisir le doigt pour découvrir où se trouve le trou entre son bras. Si vous l'avez déjà fait, si vous êtes un maître de la vieille école, vous savez que la moitié du bol peut facilement manquer et que le doigt aura peut facilement manquer et certainement disparu et que la moitié de l'arrière-plan sera incluse. Oh, mec, ça marche vraiment bien. Cela fonctionnerait si j'avais un fond noir, donc l'Iki, ou une couleur foncée. Je voulais le recadrer ici et c'était une couleur foncée. Déplacez-le vers l'arrière. Commande de moulage dans mon premier crochet ou commande, KC, j'ai masqué l'arrière-plan Je viens de contourner le problème de cette partie du masque. Cela fonctionne très bien. Mais si vous avez besoin d'elle sur un fond blanc, vous devrez utiliser quelque chose comme Photoshop. Photoshop possède tous les outils manuels, contrairement à Figma C'est un one-shot pour le moment. L'autre chose à noter, c'est que si je sélectionne, en fait, je vais m'en débarrasser. C'est parce que j'ai fait cette vidéo plusieurs fois. À y aller, Dan. Donc, lorsque vous créez un masque, vous vous retrouvez avec ces deux couches. Donc, celui de fond, tu vois qu'il est toujours là ? Donc, si vous avez besoin d'y revenir, cela se fait, c'est que cela génère une toute nouvelle image, remplissez-la par-dessus. Vous les avez donc toujours tous les deux. OK ? Et ça va être pratique lorsque nous utiliserons une sorte de masque anti-débordement dans le prochain Mais non, il n'y a que deux remplissages. Tu n'as pas besoin de celui-ci, d'accord ? Ce n'est pas obligatoire, mais voilà. C'est assez étonnant. En fait, ajoutons quelque 80 % de caractère spectaculaire. Tu peux y aller maintenant, tu es renvoyé. Mais si vous traînez dans les parages, il y a un petit outil sympa que je voudrais vous montrer. Pour le choix des couleurs. Je vais donc utiliser le triangle en maintenant la touche Shift enfoncée pour obtenir une largeur et une hauteur proportionnelles Et pour cela, je vais choisir une couleur. Je vais donc prendre le compte-gouttes et certaines parties de moi veulent juste l'assombrir Ok, et peut-être mets-le derrière. Je vais maintenir ma touche de commande enfoncée, ou la touche Ctrl d'un PC, et utiliser mon crochet. C'est cool. Je veux annuler. Je veux trouver la couleur de contraste. Je vais sélectionner la couleur ici dans mon fond de couleur. À propos d'un site web sympa appelé figma.com slash Color Ce que vous pouvez faire, c'est simplement coller cette couleur, puis entrer la tête. Et la valeur par défaut est « gratuit ». Vous pouvez voir que vous avez une belle couleur qui le complète. Ce sont ceux qui sont analogues au Bt, ils sont censés l'être. Je ne sais pas Je ne les utilise jamais. Ils sont scientifiquement utiles, comme dans le triangle, mais je ne sais pas, le seul que j'utilise est gratuit, joyeux petit exemplaire en cliquant simplement dessus. J'adore ça. Je vais le coller et j'ai un joli contraste de couleur. Je veux probablement qu'il soit un peu plus foncé et que je le déplace vers l' arrière. Allons-y. Années 1980. Très bien, on en fera un autre avec ça. Donc, la touche O de l'outil Ellipse et je vais maintenir deux touches enfoncées, l'option et la touche Shift sur un Mac. C'est Alton Shift sur PC. Vous pouvez obtenir fois un cercle rond et commencer par le centre C'est cool. C'est bon. Je vais choisir une couleur. Je vais le déplacer vers l'arrière pour ma palette, et je vais juste deviner la couleur complémentaire Je vais utiliser mon compte-gouttes pour attraper l'un de ces violets, puis je vais juste aller ici et essayer de trouver l'autre côté. C'est plutôt cool. Peut-être, peut-être un peu plus sombre. C'est bon. Nous sommes en train de le faire. C'est bon. C'est ça. C'est supprimer l'arrière-plan, et je crois que nous avons enregistré le bon écran cette fois, happy days. Je vous verrai dans la prochaine vidéo. 72. Comment créer un masque d'overflow en dehors du cadre dans Figma cadre: Bonjour Je vais vous montrer comment utiliser le masque anti-débordement C'est assez simple. C'est un peu délirant, mais j'aime bien l'effet de débordement du produit Tu peux voir comme ça. Pareil pour cette image en bas, nous la parcourons et la recadrons à l'aide de notre masquage, mais nous la faisons déborder sur le produit, et je vais vous montrer comment assombrir l'arrière-plan Effet. Allons-y. Je vais vous montrer comment faire. Pour commencer, introduisez les images 14 et 15. Faisons d' abord celui-ci. Nous allons utiliser ce que nous avons utilisé auparavant, supprimer l'arrière-plan. Gates a fait du très bon travail. N'oubliez pas que nous avons toujours le contexte, donc c'est l'astuce. Nous allons en avoir deux versions. Celle-ci s'appelle l'image 14. Appelons simplement celui-ci top. Nous allons copier et coller, pas le remplissage, mais la couche elle-même ici. Parfois, si vous avez sélectionné la couche , elle copie simplement le remplissage. Je veux juste copier la couche ici, copier-coller. J'en ai deux, en haut et celui en bas s' appellera en bas C'est là que ça devient un peu confus. Éteignons le globe oculaire sur celui du haut. Boup. Rien n'a vraiment changé, alors nous examinons celui du bas. Dans celui du bas, je veux désactiver le masque et activer la version complète. Confus. C'est un peu confus. C'est comme le début. Prenons l'outil Oh, l'ellipse. Je vais déplacer et choisir ou déplacer et lt, et je vais le faire de manière à ce que j'aie un peu de l'arrière-plan et que le couvercle dépasse par le haut. Maintenant, je veux masquer avec un arrière-plan. Qui sait ce qui ne va pas en masquant les deux ensemble ? C'est exact. Ça doit être à l'arrière. Je vais le mettre au premier plan en utilisant mes crochets. Maintenant, je dois le glisser plus l'ellipse, et je vais créer un masque, en appuyant sur ce bouton Et c'est terminé. Sh. Nous avons juste besoin de l' allumer. C'est notre top. Déplaçons-le pour qu'il apparaisse là. En fait, non, c' est le bas et nous allons activer le haut pour remplir cette partie. Ah, c'est de l'ineptie. Je sais En gros, vous avez besoin de deux couches, une complètement masquée, c'est-à-dire celle-là, puis une qui est masquée juste en cercle, celle-là Mais lorsque vous les posez les uns sur les autres, c'est un masque qui se répand. Tu vas faire de même pour celui-ci. Voyons voir si ce masque est bon, en fait, je n'ai pas vérifié. J'espérais juste déplacer l'arrière-plan, s'il te plaît, ne garde pas l'arbre. Ne gardez pas l'arbre, s'il vous plaît. Il a fait un travail horrible. Très bien, je vais laisser ça ici. C'était une bonne idée. Pouce vers le bas. Vous n'avez pas fait du bon travail sur ce point. Je veux juste ce sac. Oh. Continuons de contourner le problème. ce que Dan va faire. Annulons cela. Oh, oui, je sais ce que nous faisons. Est-ce que ça va marcher ? Je ne sais pas Je vais donc avoir l'image 15. Je vais copier-coller le calque. J'en ai deux. Désactivons celle du bas. Allons prendre celui du haut. Appelons-les, donnons-leur des noms, en haut de la page. Celui-ci va être le plus bas. Je le fais uniquement parce que vous regardez, pour essayer de clarifier les choses. C'est un super nom. Très bien, donc ce que je vais faire, c'est double-cliquer dessus. Je veux recadrer ce truc, et je veux voir si je peux l'obtenir aussi. Recadrez-le d'abord. C'est bon. Essayons ça. Ouais ouais ouais. Fermez-le maintenant, allez-vous déplacer l'arrière-plan ? C'est bon. Je suis un génie. Maintenant, nous pouvons activer celui du bas et désactiver celui du haut, et ce que je veux faire, c'est simplement le masquer. Vous pouvez le faire comme je viens de vous le montrer en entrant ici et en passant au recadrage. Il existe un raccourci. Vous pouvez maintenir la touche de commande enfoncée ou contrôler KeyOPC et nous passerons directement au recadrage C'est ce que je veux. Je te veux, je te veux, peut-être même un peu plus bas. Quelque chose comme ça. Nous allons le faire. Allons-y. C'est ce que je cherchais. Qu'est-ce que c'est ? C'est une boîte à héros. Permettez-moi d'y ajouter du texte. Maintenant, je suis là pour que tu puisses partir si tu veux. Je vais prendre mon outil rectangulaire et je devrais utiliser un cadre. Je vais faire traîner ça. J'essaie de le faire claquer sur les bords. Ce sera le cas. Bien. Je vous montre ce que je veux faire pour que le texte sorte de cette vidéo, comme au début de cette vidéo. Je reviendrai et j'enregistrerai l'intro par la suite. Cela fonctionnera-t-il ? Je ne sais pas Ce que je vais faire, c'est le remplir d'un dégradé. Ce côté va être noir. Ce côté va être noir, mais avoir une meilleure transparence, en fait une transparence totale, alors je vais juste le déplacer ici, quelque chose comme ça et abaisser la transparence vers le bas. Est-ce que c'est assez long ? J'ai l'impression que c'est assez long. Maintenant, je peux y ajouter du texte. Tapez pour choisir un nouveau téléphone, je vais utiliser mon ultra, le diviser en deux , et c'est tout. Je vais choisir quelques couleurs, jouer avec l'interligne. accord, il y a des couleurs. J'ai senti que ça allait aller mieux. Quoi qu'il en soit, c'est ce que nous avons obtenu. Il semblait plus frais dans ma tête. Mais il était pratique de trouver une petite astuce pour contourner notre problème de masquage où il ne masquait pas C'est donc une victoire après tout, et ça a toujours l'air cool. Des images qui sortent des cercles. C'est ça. Je vous verrai dans la prochaine vidéo. 73. Comment masquer des images avec du texte dans Figma: Bonjour à tous, je vais vous montrer comment masquer une image dans un texte. C'est super facile. Le texte est toujours modifiable. Il y a plusieurs façons de le faire. Laissez-moi vous montrer comment faire. Allons chercher Rowdy. C'est ainsi que tu épelles Rowdy ? Ça va faire l'affaire. Nous allons commencer par le raccourci simplifié, car si vous voulez masquer du texte, celui-ci doit être suffisamment épais pour que l'image soit visible. Vous pourriez le faire sous forme de texte, mais ce n'est pas aussi bon. Nous l'avons fait au début du cours, vous pouvez appuyer sur Commande ou Contrôle B, ce qui le rend juste en gras. Mais saviez-vous que vous pouvez maintenir enfoncée l'option de commande Ctrl Alt sur un PC et simplement utiliser votre valeur supérieure ou inférieure à. Oh, je sais. Il joue avec un poids. Vous voyez ici, je vais utiliser le raccourci, regardez. Il va de léger à régulier à mi-vif. Je vais aller jusqu' au noir. Vous devez avoir une police de caractères. J'utilise Inter qui a toutes ces options différentes, mais c'est un raccourci sympa. C'est bon. Ce que nous devons faire, c'est donc le meilleur moyen, à mon avis, de ne même pas en avoir besoin là-bas. Nous devons le sélectionner et nous pouvons passer à l'édition et à la copie des propriétés. Avec celui-ci, nous pouvons coller les propriétés, qui se trouvent dans le même bit, ou vous pouvez appuyer sur Command Option V sur un Mac, Control Ol V sur un PC. Maintenant, c'est là, donc c'est masqué. J'ai cliqué sur une mauvaise image parce qu'elle est en quelque sorte centrée au milieu Ce que nous pouvons faire, c'est que je vais t'en donner un autre. En fait, il suffit de vous indiquer le chemin le plus long, puis je vous donnerai le raccourci. L'image est donc là. C'est un remplissage qui fait partie de ce texte. Ce que je peux faire, c'est cliquer sur l'image, et au lieu d' essayer de remplir le texte, nous pouvons sauter, et non pas recadrer le texte. D'accord ? Nous pouvons donc prendre cette image d'arrière-plan et trouver quelque chose qui ressemble un peu plus à ce que nous voulons en termes de recadrage Vous pouvez également le faire pivoter ici. Il faut que je l'agrandisse maintenant. Tu as compris l'idée. C'est donc juste le raccourci idéal pour sauter et le convertir en remplissage. Retournons à l' endroit où il a été cassé. Allons-y. Ce n'est pas une image recadrée, mais si je maintenais mon option KeneMaco enfoncée sur un PC et que je double-clique dessus, comme par magie, c'est un raccourci pour la transformer en recadrage au lieu d'un Est-ce que c'est utile ? Probablement pas. Mais c'est le cours avancé. Il y a des choses étranges dans mon cerveau que j'ai envie de partager. Allons-y. OK, c'est une façon de créer un masque au lieu d'un texte. L'avantage, c'est que nous pouvons nous embrouiller et que vous pouvez voir les choses se renouveler Le texte est entièrement modifiable. L'autre point intéressant, c'est que vous pouvez le voir dans le panneau Calques ? C'est juste ce texte qui est rempli. L'autre façon de le faire est d'utiliser un masque. Je vais le récupérer. Débarrassez-vous du remblai à Gray pour revenir à ce que nous étions quand nous avons commencé Prends mon outil pour le réduire, mets-le là où je le jette au milieu. Vous pouvez simplement utiliser un masque. Il n'y a rien de mal à cela, sauf que le texte doit être derrière. Allons-y. Maintenant, je peux sélectionner les deux et utiliser mon outil de masque. Je pense que c'est l'option de commande. Non, cela le minimise. Oh. C'est bon, nous sommes de retour. Je ne m'en souviens pas. Donc, une fois ces deux options sélectionnées, il y a une option là-haut qui dit « utilise un masque ». Ça y est. Il s'agit du Command Control M. Sinon, il est réduit au minimum sur un Mac Imaginez que c'est toujours Control Alt sur un PC. Essayez-le. Je ne sais pas si le PC dispose de la version minimale. La différence ici, c'est que tu peux voir ce vieux groupe de masquage moche C'est un peu plus clair, d'accord ? Donc, tu sais, je peux voir mon texte. Je peux voir mon image. C'est dans ce qu'on appelle le groupe de masques. Il n'y a vraiment rien de mal à cela. D'accord ? Le texte est toujours modifiable. Est-il toujours modifiable ? Oui, ça l'est. Mais c'est bizarre, ça ne l' affiche pas sous forme de texte, et si je double-clique dessus, j'entre dans le masque. Mais si je prends mon outil de saisie que je vais ici et que je le sélectionne, cela fonctionne. J'ai vraiment compris l'idée. C'est à vous de décider comment vous voulez le faire. Les deux fonctionnent, et je vous montre les deux parce que vous aurez le dossier de quelqu' quelqu'un le fera faire comme ça et quelqu'un le fera faire comme ça et vous vous direz : « C'est quoi ce bordel ? Mais maintenant tu le sais. De plus, nous apprenons d'autres raccourcis intéressants. L'option ou le double-clic permettent directement d'en faire un recadrage. Et pour une raison ou une autre, j' aime beaucoup le raccourci pour les poids, option de commande ou Control Alt l'option de commande ou Control Alt et j'utilise les touches supérieures et inférieures à pour gérer les différents poids de la police. Oh, nous avançons. C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. 74. Comment utiliser les modes de fusion des calques de couleurs dans Figma: Bonjour à tous. Nous allons examiner les modes de fusion des couleurs. Cela signifie que nous pouvons faire des choses intéressantes avec ce JPEG qui n'a aucune transparence. Nous pouvons dire, d'accord, Bam, vous êtes transparent maintenant et nous pouvons faire choses créatives avec des couleurs et des images Nous pouvons également le faire avec du texte lorsqu'il affecte l'arrière-plan, c'est ce que l' on appelle les modes de fusion de couches Allons-y et vérifions-le. Pour commencer, insérez dans vos fichiers d'exercices le logo, un, deux et trois. Celui-ci n'est qu'un JPEG. Mais je dois le rendre transparent et c' est là que les modes de fusion peuvent être pratiques Lorsque c'est sélectionné, utilisez cette petite larme ici et vous pourrez vous frayer un chemin comme par défaut. Mais vous pouvez voir, oh, regarder, multiplier et assombrir Allons multiplier. Parfait avec un logo en noir et blanc. Vous pouvez voir que c'est désormais transparent. Très cool. Maintenant, cela dépendra de l'image. Donc, cette version blanc sur noir. Regardez à nouveau la même chose, multipliez, cela ne fonctionne pas très bien. Cela fonctionne. Montre. Il y a un trou dedans. C'est peut-être ce que vous voulez. Je ne pense pas que vous puissiez vous frayer un chemin parmi les autres, et voyons ce qui pourrait fonctionner sur celui-ci. Down One fonctionne. Parfait. Écran Lightning. Ce que vous trouverez, c'est voir les lignes qui s'y trouvent. Ce groupe fait la même chose, pas exactement, mais de la même manière. Pareil pour ceux-ci. Ils font tous même chose, mais pas exactement. Ceux-là sont similaires, mais pas exactement. C'est ainsi qu'ils les regroupent. Revenons à Lighten. Maintenant, quand il y a un mélange de couleurs, cela peut être un peu plus délicat Je peux donc entrer dans le vif du sujet et m'assombrir. Cela fonctionne un peu, mais vous pouvez voir la différence entre normal et multiplier. Cela assombrit un peu la couleur, ce qui me fait mal aux fesses en tant que designer , et quand cela couvre des objets, vous pouvez voir qu'il fait des choses spéciales Eh bien, cela ne marcherait pas pour un logo en couleur, cela pourrait vous suffire pour vous en sortir, mais cela est utile pour faire des mélanges de couleurs. Parfait, lorsque vous n'avez qu'un logo qui n'est pas transparent au dos. Vous pouvez utiliser votre arrière-plan supprimé ou simplement jouer avec les modes de fusion Tu dois créer un autre cadre et y ajouter une image que tu as. J'ai apporté une image appelée Layer Blend. Tu peux aussi apporter celui-ci. Ce que je vais faire, c'est le mettre en arrière-plan. Nous pouvons simplement le laisser là. Peu importe qu'il s'agisse d'un remplissage sur le cadre d' arrière-plan ou simplement d'une image située juste en bas de mon panneau de calques. Laissons les choses comme ça. Ce que nous pouvons faire, c'est passer à l'image et nous pouvons entrer ici et jouer avec les modes de fusion qui s'y Mais en fait, d'abord, nous allons jouer avec l'exposition. En fait, jouons avec la saturation, éliminons-la, puis jouons avec le contraste et l'exposition pour obtenir ce que nous voulons Ce que nous voulons, c'est, je ne sais pas. Je suis juste en train de m'amuser avec ça. Monochromatique pour que nous puissions dessiner des choses par-dessus. Je vais prendre un grand vieux cercle, OK, tout le quart de travail, un grand vieux cercle. Je vais choisir une couleur, peut-être une de mes couleurs ici. Ce qui est cool, c'est je ne sais pas où je veux dire, c'est que vous pouvez également jouer avec les modes de fusion de ce La couleur apparaît ici, comme nous le faisions auparavant avec ces images de logo, la même petite larme, et nous pouvons jouer Regarde comme c'est cool. Plus sombre. Oh, je l'aime bien. Passez du temps à les parcourir à vélo et à en trouver un. J'aime bien celui-ci. Superposition. Vous pouvez en avoir plusieurs et vous pouvez les voir doubler. En fait, je vais choisir une autre de mes couleurs, 500. Essayons celui-ci. Il y a une superposition intéressante ici. Il y a des choses intéressantes que vous pouvez faire avec les modes de fusion. Vous pouvez également le faire avec du texte. J'ai créé un autre cadre et j' ai juste introduit du texte. Nous pouvons faire exactement la même chose, et utiliser mon outil Ka pour le rendre beau et grand, le faire pivoter. Ce sera un gros bout de texte abstrait. OK, revenons à mon outil de déménagement et à mon apparence. Même chose. Il suffit de vous frayer un chemin, de trouver quelque chose que vous aimez, ou Olagds, mon préféré. C'est plutôt cool. Oh, différence OK ? Les modes de fusion peuvent donc être appliqués à tout, et vous obtenez simplement un effet différent Parfois c'est utile pour les logos, parfois c'est un peu comme un effet créatif. Cela peut être recréé en CSS, ou vous pouvez simplement l'exporter sous forme d'image à utiliser dans votre application ou votre site Web vrai, ce sont les modes de fusion . Je vous verrai dans la prochaine vidéo. 75. Projet de cours 18 - Publicité sur les réseaux sociaux: Bonjour Il est temps de faire un projet de classe. Nous allons intégrer un grand nombre de choses que nous avons faites plus tôt. D'accord ? Alors voilà, Class Project 18, on vous demande de créer une publicité sur les réseaux sociaux pour promouvoir votre application. Je veux juste que vous incluiez ces techniques. Donc, masque de texte, masque de débordement et mode de fusion de couches Le masque Spillover est quelque chose que j'ai inventé. C'est juste là que les choses se passent un peu comme ici, le téléphone. À l'extérieur d'un masque. Nous l'avons fait plus tôt, mais juste pour votre information, je ne pense pas que quelqu'un d'autre l' appelle un masque anti-débordement Mais il y a mon masque de texte dedans, et j'ai joué avec l' arrière-plan avec les modes de fusion Pas besoin d'être un génie créatif comme le mien. Je ne sais pas C'est rapide. Il s'agit plutôt d' intégrer ces trois choses et de s'entraîner avec elles. Ce que j'ai fait, c'est créer une nouvelle page appelée social media add et j'ai utilisé le format carré d'Instagram, qui est de 1080 x 1080. Cela ne me dérange pas vraiment du type ou de la taille de la publicité sur les réseaux sociaux. Il s'agit principalement des techniques de masquage. Amuse-toi bien Fabriquez quelque chose. Eh bien, si vous m'aimez, le fait d'introduire des techniques dans une annonce donne des résultats moyens. Pratiquant. Mais si vous y arrivez, j'adorerais le voir, le partager sur les réseaux sociaux et télécharger votre devoir Vous pouvez soit prendre une capture d'écran, soit cliquer dessus et n'oubliez pas d'utiliser l' option Exporter, télécharger dans les projets de classe et de la partager en ligne. Tague-moi si tu peux. Ce n'est pas le bon exemple. Voilà. Fixé. C'est bon. Amuse-toi bien Je vous verrai dans la prochaine vidéo. 76. Comment ajouter une vidéo dans Figma ma: Bien, il est temps d'apprendre à utiliser la vidéo dans les prototypes Figma Nous allons introduire cet heureux petit carlin dans Vous pouvez également l'utiliser uniquement dans une ancienne image vidéo ordinaire. Vous pouvez cliquer dessus pour l'arrêter et le démarrer. Oui, regardons les vidéos et les joyeux Little Pugs. Bien, une petite chose avant de commencer est que si vous utilisez la version gratuite de FIGMA, je ne pense pas qu'ils vous permettent de faire des vidéos C'est donc une sorte de montre qui permet d' apprendre à utiliser les vidéos. Mais si vous avez un essai gratuit ou vous utilisez un compte payant, nous pouvons créer des vidéos. Sauter. Je vais commencer par un cadre vide avec un peu de navigation de base dessus. Désormais, les vidéos sont importées en utilisant simplement l'image d'importation normale. Command Shift K, Control Shift K sur un PC. Dans les fichiers d'exercices, il y a un dossier de vidéos, et je devrais le mettre parce que c'est plutôt, je ne sais pas, une technique nulle, mais j'ai trouvé ce type Je vais apporter le carlin. Je vais cliquer sur Ouvrir. Comme avant pour les images, vous pouvez cliquer une fois et elles apparaîtront en taille réelle. Sinon, vous pouvez cliquer et faire glisser. L'importation peut prendre un certain temps . Pour une raison ou une autre, secouer votre souris semble l'accélérer. Lorsque vous êtes prêt, il vous suffit de cliquer dessus et de le faire glisser vers l'extérieur. Parfait. Tu as une vidéo. C'est ça. Nous allons faire un peu plus, mais voyons un aperçu de ce type. Ça prend un peu de temps à charger, mais voilà. Il y a un carlin à l'air heureux. Maintenant, regardons un peu plus en détail. fois cette option sélectionnée, vous constaterez que vous pouvez avoir quelques paramètres supplémentaires pour elle dans le prototype. Vous pouvez voir ici qu'avec l'image sélectionnée, sous prototype, j'ai des choses comme la lecture automatique Par défaut, il se lance automatiquement. Vous pouvez le faire tourner en boucle si vous le souhaitez. Il est en boucle par défaut, vous pouvez désactiver le son s'il en contient. Tu n'en veux pas. Le mien n'en a pas. Maintenant, ce qui est cool avec les vidéos c'est qu'elles sont comme un film de remplissage. Le remplissage de ce rectangle est une vidéo comme nous le faisons avec des images. Est-ce que j'ai une image ou est-ce une image ? Veuillez patienter. Celui-ci n'est qu'un cadre avec un remplissage d'image. Revenons-en à ce type. Ici, on commence à s' embrouiller. Nous y voilà. cool, c'est que je peux le récupérer, copier et faire des choses comme ça. Tu attends là-bas. C'est bon. Du ROP au carlin. La vie de carlin, nous allons y aller et en faire le plein. En fait, nous pouvons simplement le coller. Nous l'avons copié à partir de ceci, nous l'avons collé dessus et cela devrait fonctionner. Essayons-le. Cela a fonctionné. Je ne sais pas pourquoi la police ne se charge pas. Cela fonctionne. Ignorez la police. Essayons encore une fois. Oh, je me demande pourquoi. Vous êtes à la figurine « Je vais fermer » et la rouvrir ? C'est bon, je l'ai fait. Il suffit de l' éteindre et de le rallumer. Insérez le texte J'adore ça. On dirait que le chien est constamment poussé contre une vitre. Il existe certaines limites. Je vais lire la plupart des fichiers vidéo, MOV, des MB Four, ce genre de choses Vous ne pouvez pas y mettre de gros fichiers. Je crois que c'était 100 mégaoctets par le passé. Je ne sais pas ce que c'est maintenant. N'essayez pas d'y mettre des fichiers vidéo de deux gigaoctets. Ajoutons-y quelques interactions. Pour le moment, il se joue automatiquement. Éteignons ça. Ce que nous pouvons faire, c'est ajouter une interaction indiquant «  Je veux lancer la vidéo et la mettre en pause ». Il y a cette petite interaction qui ne mène nulle part. Mais j'espère que si nous le faisons, en bas pour jouer automatiquement, celui-ci, nous ne jouerons que lorsque nous cliquons dessus Nous sommes en train de le faire. C'est tout pour ajouter une vidéo. C'est assez simple. Ajoutons un peu plus d'interaction dans la vidéo suivante. 77. Comment créer un bouton de lecture pause pour une vidéo dans Figma: Bonjour. Dans cette vidéo, nous allons créer un bouton de lecture et un bouton de pause pour la vidéo dans Figma Allons-y. C'est bon. Pour commencer, j'ai ajouté deux icônes de mon dossier gratuit d'icônes. Cela s'appelle Video icon play and pause. J'ai également apporté une vidéo du fichier vidéos. Il se trouve que c'est Video 02. Ce que nous allons faire, c'est qu'ils se sont révélés très, très importants. Je vais m'assurer de cliquer sur le cadre parent, d' appuyer sur K et de m' assurer que c'est le cas. Je vais probablement leur faire atteindre une hauteur de 32. Je vais utiliser ces deux-là. Je vais en faire des composants. Je vais dire que vous êtes des composants multiples. Je devrais les déplacer vers ma page de composants , puis je vais en faire glisser des instances juste pour tout faire correctement. Je vais les mélanger. Vous passez de ce côté et nous faisons une pause, vous allez passer de ce côté. Un peu gros. C'est bon Ce que nous allons faire, c'est dire bouton en mode prototype. Nous allons dire que vous avez une interaction, et quand on clique sur vous, je veux que vous jouiez à quelque chose Quoi ? Quelle vidéo ? Je veux que tu joues le seul sur ce cadre. Et est-ce que je veux qu'il bascule ? Non, je voulais juste jouer. Essayons-le. Prévisualisons ce cadre. La vidéo met un peu de temps à charger, puis elle fonctionne. Le bouton fonctionne, mais il est en mode lecture automatique. Qui se souvient où je peux désactiver la lecture automatique ? C'est juste là, Dan. Tu as raison. Dans Prototype avec la vidéo sélectionnée, désactivez la lecture automatique Maintenant, faisons jouer celui-ci. Passons à une page aléatoire. Cliquons dessus pour prévisualiser, et maintenant ce n'est pas une lecture automatique, mais j'appuie sur le bouton de lecture et ça joue et je dois appuyer sur pause Je vais faire exactement la même chose qu'avant. Si vous cliquez, je veux que la vidéo soit mise en pause, et qu'est-ce que je veux ? Je veux voir cette vidéo, et qu'est-ce que je veux faire ? Pause uniquement. Très bien, allons-y. Jouez. Pause, nous sommes des génies Regardez-nous. Maintenant, nous ne les aborderons pas toutes. Les autres choses que vous pouvez faire avec vidéo simplement parce que je ne sais pas. La vidéo dans les maquettes, qui vont peut-être un peu loin, peut être pratique pour certaines d'entre elles, surtout si vous créez une application spécifique autour de la vidéo, alors vous devrez peut-être faire un peu plus d'efforts pour vidéo fonctionne dans des maquettes Je veux vous montrer ici, que vous pouvez faire une pause en cliquant sur Play. Il y a des choses comme le muet. Vous pouvez sauter jusqu'à un certain moment, vous pouvez avancer de quelques secondes. Il y a quelques autres choses que tu peux faire ici. Ils sont assez explicites. Ils fonctionnent exactement de la même manière que Play et Pause. Je te laisserai jouer avec eux s'il le faut. C'est bon. C'est la pause de lecture de la vidéo dans Figma. 78. Comment obtenir une vidéo play lorsque vous survolez dans Figma: Bonjour, bonjour. Nous allons lancer une vidéo lorsque vous la survolerez. Regarde ça. Ignorez le fait que nous sommes sur un téléphone portable, qui ne peut pas survoler se trouve que je travaillais sur mobile en ce moment, mais ce serait pour un site pour ordinateur sur lequel la souris passe le curseur et où elle commence à prévisualiser la vidéo Très cool. Allons-y. C'est bon. Je viens d'apporter une vidéo. Prévisualisons-le. Il joue automatiquement comme d'habitude. Et ce que vous pouvez supposer, ce que j'ai supposé quand je fait pour la première fois, c'est que si je passe en mode prototype, option neuf, Alt neuf, juste un petit rappel pour passer au prototype, c'est que vous y allez probablement, d'accord, il suffit d'ajouter une interaction et sur Ha, je peux lancer la vidéo. Ça change. Il dit : «   Non, il faut cliquer ». Tu es du genre à dire que ça ne marche pas. Je vais me débarrasser de cette interaction. Assurez-vous de vous en débarrasser. Je reconnais également que j'utilise un téléphone portable, sur lequel vous ne pouvez pas survoler C'est exact. Imaginez que nous sommes sur un appareil tel qu'un ordinateur portable, que nous avons une souris et que vous pouvez survoler Ce que nous devons faire, c'est vous dire ici, nous allons faire une variante. Nous l'avons déjà fait, mais pas avec une vidéo. Pour en revenir au mode conception, nous allons dire que vous êtes un composant. Nous allons avoir deux variantes de vous. L'un d'entre eux sera en cours de prototype, vidéo sélectionnée. Oh, c'est un bon point. Si je l'ai et que vous vous demandez  : « Où est passé Autoplay ? Ce qui s'est passé, c'est que vous pouvez voir ici ces variantes clôturent la vidéo. Si j'ai sélectionné la vidéo, je peux jouer avec la lecture automatique C'est aussi le meilleur nom. C'est celui du bas. Il s'agit une variante du nom de propriété de Actually, nommez-les ici. Une fois le parent sélectionné, passez à la conception. Nommons bien tout cela. Celui-ci s'appelle Video Hover, et nous avons le premier , appelé default. Je vais renommer celui-ci C'est la pause. Pourquoi pas ? C'est ce qu'on appelle play. N'oubliez pas que pour obtenir l'autoplay, nous devons être en phase de prototype Sur cette première, nous allons soit double-cliquer, soit entrer dans la variante, la saisir et dire «  la première se joue automatiquement Ici, allez à l'intérieur, prenez la vidéo, vous la lancez automatiquement. Nous devons maintenant ajouter une interaction, saisir la première, pas la vidéo, mais la variante parent. Tout ce que je sais, c'est bizarre. Ce que nous allons dire, c'est dire que vous y allez quand vous cliquez dessus. Non, quand il survole et que je vais changer vais changer ce truc ici en survol vidéo, ça va fonctionner Devons-nous le faire changer à nouveau ? Je ne sais pas Prenons une instance de ceci et faisons-la glisser vers l'extérieur. C'est une variante comme nous l'avons fait auparavant. C'est un peu bizarre que nous jouions avec une vidéo. Jouons à celui-ci, il ne fonctionne pas, il ne fonctionne pas. Survolez. Hé, vas-y , et ça s'arrête. Whoo. Oh, nous sommes sur un téléphone portable, sur lequel vous ne pouvez pas passer la souris Mais nous l'avons fait. C'est bon. C'est ainsi que vous pouvez lancer une vidéo lorsque vous la survolez. C'est bon. Je vous verrai dans la prochaine vidéo. 79. Projet de cours 19 - Carte vidéo: C'est vrai, c'est l'heure du projet de classe. Ne vous inquiétez pas si vous avez un compte gratuit. J'ai une quête secondaire à te faire réaliser. Mais si vous avez l'option Figma payante ou si vous utilisez le sentier, je veux que vous construisiez quelque chose comme ça, une carte qui fasse une pause Regardons les détails. Carte vidéo dotée bouton de pause de lecture et d'un titre vidéo. Faites quelques recherches sur l'interface utilisateur des lecteurs vidéo. Je vous ai donné quelques exemples d'endroits où aller ici. Vous pouvez simplement effectuer une recherche sur Google dans l' interface utilisateur du lecteur vidéo. J'en ai une très basique. Vous trouverez peut-être quelque chose d'un peu plus intéressant à copier. Partagez ensuite une vidéo de vous en utilisant votre vidéo, téléchargez le lien vers les projets de classe ou je vous laisserai faire une capture d'écran de votre carte vidéo. Je ne peux pas vraiment tester si cela fonctionne. Et il en va de même pour les personnes libres. Vous n'avez pas le compte payant. Je veux que vous fassiez preuve de créativité avec l'image que vous téléchargez. J'étais en train de regarder les autres. Vous êtes géniaux, les gars. Trouvez votre propre version de quelque chose de simple et rapide, c'est-à-dire que je n'ai pas de compte Figma payant J'adore tout ça. C'est bon. Que vous soyez payant ou que vous utilisiez un compte gratuit, faites preuve de créativité, créez une vidéo ou je ne sais pas pourquoi cela implique un chat, mais ajoutez quelque chose aux projets de classe. J'espère que vous avez la version payante et que vous pourrez la faire fonctionner. Sinon, des chats qui pleurent. Je vais voir dans un moment. 80. Astuces de couleur avancées dans Figma ma: Bonjour, mes amis. Nous allons donner de la couleur à Nerdy Je vais vous montrer certaines astuces de couleur et certaines des bizarreries qui se produisent dans Figma Allons-y. La première est que j'ai un cadre simple ici. L'outil Eyedropper est la clé du globe oculaire, mais en réalité, c'est l'œil globe oculaire, mais en réalité, c'est l' Tu vois ce que je veux dire ? Je peux récupérer les couleurs de l'image. Tu vois, je vais le récupérer et il me donne le numéro ix correspondant. Le problème, c'est que si j'utilise outil Eyedropper et que je le vole , disons, ici, où la couleur de mon style est appliquée, vous voyez qu'il apporte le chiffre x, pas le Si je clique dessus, c' est un style de couleur primaire. Cela n'a volé que le numéro hexadécimal, ils ne sont pas connectés Si je mets à jour mon style, cela ne se produira pas pendant le trajet, ce qui peut être difficile. Pour en revenir à l'Itol, vous pouvez voir si je maintenais la touche Shift enfoncée et que je clique dessus, vous verrez que ce n'est pas le nombre hexadécimal, mais la couleur principale Maintenant, ils sont connectés. Pareil ici. Je veux cette couleur, mais je veux le style réel, maintenez la touche Shift enfoncée, et cela reprendra le style de la couleur, pas l'hexadécimal Ça peut te rattraper. si vous cliquez sur une image, par exemple, et que vous souhaitez en réduire l'opacité, vous pouvez utiliser les chiffres situés en haut de votre clavier Vous le connaissez probablement déjà. Appuyez sur quatre, ça le changera en. Pouvez-vous voir l'opacité à 40 %, tapez huit, pour 80, si vous êtes rapide, vous pouvez en faire 66 Ça va être sympa et rapide. Si vous voulez revenir à 100 %, vous devez atteindre le zéro et si vous voulez obtenir transparence totale, zéro, zéro. Il suffit de les taper rapidement ensemble. Dix, 20, 30, zéro pour le mode complet et double-cliquez sur zéro pour passer à la transparence totale. Je vais aller à zéro une fois pour le ramener. Cela fonctionne pour tout ce que vous avez sélectionné. Colore les images, fonctionne même sur la vidéo. Premièrement, si vous jouez avec votre film et que vous choisissez une ancienne couleur, si vous avez une molette de défilement, regardez votre souris, vous avez peut-être une molette de défilement, peut-être pas. Je le sais. J'utilise ma molette de défilement sur cette zone de couleur ici. Vous voyez qu'il manque juste une teinte ? Je peux passer à autre chose avec ma molette de défilement. Si vous maintenez la touche option ou l'ancienne touche enfoncée sur un PC, cela va jouer avec la transparence de haut en bas, voyez ? Utile ? Peut-être pas. J'utilise celui de la teinte, pas tellement celui de l'opacité. Le suivant est en bas. Par défaut, c'est sur Hicks, qui est facile à copier-coller entre les programmes GB, vous avez peut-être un manuel d'entreprise, vous voulez le saisir dedans. Le CSS est intéressant. Si vous utilisez du CSS, ou si vous devez donner une couleur à votre développeur, ce RGBA, qui est rouge, vert et bleu, est l'Alpha de transparence J'ai mis 0,5, ça va être transparent à 50 %. Je n'utilise pas le HSL, la saturation des teintes et la luminosité. J'utilise beaucoup le HSB, saturation et la luminosité de Hue Similaire. La raison pour laquelle j'aime ça, c'est que je déteste avoir à faire glisser vers le bas et à le déplacer vers le bas parce que tu veux une couleur foncée Ce que vous pouvez faire, la saturation des teintes et la luminosité, vous pouvez le faire, OK, luminosité Je peux maintenir ma touche Shift enfoncée et simplement monter. Vous voyez qu'il saute simplement de haut en bas ? Je trouve que c'est vraiment bien pour choisir une couleur très foncée de cette couleur spécifique sans espérer qu'elle aille droit. Il me suffit de cliquer dessus, d'utiliser mon shift, de monter et de descendre, de lâcher le shift, puis tout fonctionnera par petits incréments. Je ne les utilise pas, tu peux. La saturation va de gauche à droite. Et la teinte n'est qu'un curseur de teinte. Je ne m'en sers pas beaucoup, mais j' adore prendre celui-ci et descendre un peu plus bas. Je veux une couleur légèrement plus foncée. Je passe au HSB. Ils sont tous de la même couleur lorsque vous avez terminé, juste des manières différentes de les représenter. C'est tout pour l' intello des couleurs. Il y a une dernière chose. C'est un peu ce que je ne sais pas. Cela fait partie de la loi sur Internet, où vous pouvez simplement taper en rouge. OK ? Je peux entrer ici et dire, je veux du rose. Pourquoi est-ce cool ? Ce n'est pas vraiment cool. C'est intéressant, surtout quand on commence à penser à des choses comme « D'accord, je veux du gris Et si je l' épelais dans l'autre sens ? Il y a deux orthographes de gris pour autre. Ce sont exactement les mêmes. Quelqu'un a fait le tour et a donné un nom à chaque couleur. Eh bien, pas toutes les couleurs, mais il y a beaucoup de couleurs nommées. Ils deviennent vraiment bizarres. Comme ça. Si je passe au gris foncé, il ne peut pas y avoir d'espaces entre les deux, gris foncé, un peu plus clair que le gris. Ensuite, les grands noms, d'accord ? Peach Peach est un bon nom. Mais regarde ça. PH Puff est un super nom. Donc, si vous avez une couleur proche d'un nom, je ne sais pas. C'est formidable de pouvoir le saisir, mais cela ajoute également une très bonne image de marque à une opération lorsque vous n' utilisez pas le FDA B nine. Tu utilises Peach Puff, bien plus cool. Tu sais, tu peux jeter un petit coup d'œil en ligne. Ils sont là. OK ? Il s'agit du w3.org. Vous pouvez voir, jetez un œil à toutes les couleurs nommées. Il y en a des bizarres. Trouvez-en une étrange pour votre marque. Chifron citronné Oh. Je n'aime pas la couleur, mais j'aime le nom. D'accord, c'est tout pour les couleurs avancées. 81. Comment modifier et remplacer les couleurs dans Figma: Salut, salut. Dans cette vidéo, je vais vous montrer comment mettre à jour toutes vos couleurs en une seule fois. Certains de mes objets utilisent le style de couleur, le bon et celui-ci utilise le numéro ix. Je vais vous montrer comment les sélectionner toutes et les mettre à jour, afin qu'elles utilisent toutes le style, non des parties des deux. Allons-y. C'est bon. Quand j'ai commencé à concevoir, j'ai juste commencé à utiliser cette couleur avant d' en faire un style. C'est très courant. Vous avez peut-être accidentellement utilisé l'outil Eyedropper pour installer le numéro Hix au lieu du style de couleur officiel que je voulais La façon de procéder et de les modifier toutes pour être cohérente, vous utilisez le style partout dans cette couleur, pas celui d'Ix qui consiste simplement à en faire une sélection. Il suffit de ne rien sélectionner et de sélectionner A, qui est une commande ou un contrôle tout est sélectionné, et de descendre en bas où il est écrit « couleurs de sélection », «   il y en a trop pour être affichées », « Voulez-vous que je vous les montre » ? Oui, je vous en prie. Ce que nous pouvons faire, c'est que vous pouvez voir, cela vous donne les principaux modèles ici ou vos styles. Mais vous pouvez voir ici qu'il est écrit : «  Montre-moi toutes les autres couleurs ». Celui que je recherche, c'est quoi ? F quatre, 746b. Je vais faire une secte, je reviens ici. Ce que je vais faire, c'est dire, me les montrer tous et je trouverai celui-ci, pas toi. Voilà, c'est là. Je vais dire qu'il ne faut pas être un gros numéro Je veux que tu sois de ce style. Il va passer en revue tous les cas d'utilisation de ce type. Tu as remarqué qu'il a disparu d'ici ? C'est parce que maintenant toutes ces couleurs sont toutes liées au même style de couleur. Ça y est. Je parie que vous en avez aussi pour le green, quelque part. Voilà, tu vas ici. Ce n'est pas lié au style, Wendy C Two, Selectol, venez ici, rangez simplement tout pour qu'ils utilisent tous la Est-ce que c'est là ? Peu, je crois que j'ai utilisé quelques versions de ce vert. Je vais juste passer celui-ci à celui-ci et m'assurer que tout est cohérent. Parce que souvent, au début, vous ne faites que jouer avec les couleurs, puis vous rangez les choses . Ce type m'épuise. C'est bon. C'est ainsi que vous pouvez mettre à jour toutes vos couleurs en une seule fois. Évidemment, si vous les avez déjà intégrés à un style, vous pouvez vous frayer un chemin et dire, en fait, que je vais les ajuster tous et ajuster le style à cette nouvelle couleur. Je ne sais pas quelle est cette nouvelle couleur, mais vous pouvez vous frayer un chemin, ajuster votre style secondaire et simplement vous frayer un chemin parmi les différentes couleurs. C'est un moyen facile de le mettre à jour. J'y retourne avant de le casser. C'est bon, c'est ça. Sélection et mise à jour de nombreuses couleurs à la fois, pour les rendre cohérentes. Très bien, vidéo suivante. 82. Comment concevoir des thèmes de couleurs pour la lumière et l'obscurité dans Figma: Salut, dans cette vidéo. Je veux vous montrer ici cet outil que j' utilise. Juste une question rapide. Je trouve ça super utile. Vous avez choisi vos couleurs primaires, secondaires et d'accent, et elles sont idéales pour les gros blocs. Ils ont l'air cool. Mais ensuite, on en vient à des choses comme ça. Qu'allons-nous faire en termes de différentes zones de texte ? quoi ressemble un schéma de lumière, pour lequel nous concevons souvent abord et ensuite, comme vous le souhaitez, vous avez besoin d'un schéma sombre. Laissez-moi vous montrer comment saisir toutes vos données pour avoir une idée de ce qui va fonctionner et de ce qui constitue un bon contraste. Bien, j'ai ajouté un lien pour cela dans vos fichiers d'exercices ou vos fichiers de projets de classe Générateur de thèmes All Material. Il se déplace, vous devrez donc peut-être le rechercher sur Google s'il a été déplacé et que le lien est rompu. Mais ce qui est vraiment cool, c' est que c'est idéal pour simplement choisir les couleurs au début d'un projet. Vous pouvez passer en revue et simplement dire : Oh, donnez-moi quelques idées sur la façon dont l'interface utilisateur pourrait fonctionner. Il existe un contraste standard, moyen et un contraste élevé. Ce qui est vraiment cool, c' est que j'ai choisi mes polices, donc j'ai choisi Ultra et Roboto, comme celles que j'ai utilisées Mais ce que vous pouvez faire, c'est voir ici, vous pouvez ajouter votre couleur primaire secondaire et tertiaire. Je vais aller voir Figma et lui dire : Très bien, couleur primaire, où es-tu ? Là-bas ? Je vais prendre ça. Je vais prendre celui-ci ici. Je vais saisir le chiffre, et je vais cliquer ici, le coller et cliquer sur Appliquer et vous pouvez le voir dire, d' accord, c' est votre couleur principale En fait, ajoutons-les tous d'abord. Nous allons passer en mode vitesse. Très bien, j'ai donc ajouté ces couleurs, et c'est vraiment intéressant de voir ce que cet outil fait avec mes couleurs. Tu peux voir si je fais défiler la page vers le bas ? C'est ma couleur principale, et c'est là qu'il est indiqué que je devrais être en termes de bon contraste entre le texte clair et cet arrière-plan coloré. Ça l'a complètement assombri . Ce n'est pas obligatoire, mais c'est vraiment une bonne idée parce que parfois on finit comme ça. Vous n'utilisez pas les couleurs très fortes de votre marque pour faire des choses très utilitaires Supposons que nous ayons besoin d'une page de comptes, vous devez modifier vos préférences en matière de courrier électronique, probablement en utilisant vos couleurs primaires et secondaires en gras pour ce faire. Cela le dévalorise probablement en termes d'attention. Ce que vous pouvez faire, c'est entrer dans quelque chose comme ça et dire que j'utilise cela pourrait être une meilleure façon d'afficher les données ou ici, comme de petits panneaux. Les préférences de courrier électronique peuvent fonctionner mieux dans ce cas ici. C'est juste subtil, ce n'est ni grand ni audacieux. Vous pourriez décider, en fait, que je veux que ce soit une version légèrement contrastée de tout cela . Il ne fait pas si sombre. Lorsque nous traitons de certaines parties utilitaires d' une application, vous pouvez choisir le medium lourd, vous pouvez choisir le medium lourd, surtout si l'on vous donne les couleurs de votre marque Vous travaillez pour une entreprise qui possède déjà un logo de marque. Vous ne voulez pas simplement le jeter partout comme nous l'avons fait. Vous pouvez y accéder et cet outil ici, ne vous inquiétez pas de savoir si c'est iOS, si vous faites des choses sur le Web ou pour Android. C'est juste une bonne façon de regarder vos couleurs d'une autre manière très bons contrastes constants, ils sont facilement lisibles, pour une raison ou une autre, des coins bien trop arrondis Quoi qu'il en soit, j'aime bien ça. J'adore y ajouter mes couleurs, surtout si nous avons déjà couleurs de marque pour avoir une idée de ce que nous pourrions faire, et j'aime bien les augmenter jusqu'au contraste de hauteur. Dîner. Vous pouvez ensuite passer en revue et dire : Très bien, je veux copier cette couleur ici et vous pouvez la coller dans Figma Vous pouvez également choisir vos polices. J'utilise Ultra et Roboto juste pour avoir une idée de ce à quoi cela pourrait ressembler Mais encore une fois, plus de suggestions, je trouve cela utile. J'ai pensé le partager avec vous. C'est bon. C'est ça. C'est le constructeur de thèmes Material. Ça me plaît. Vous pourriez aussi. 83. Comment utiliser les bibliothèques d'équipe dans Figma: Bonjour, tout le monde dans cette vidéo, nous allons regarder les bibliothèques. Les bibliothèques sont un moyen lorsque nous avons créé un tas de composants et un tas de couleurs, de police et de styles d'effets. Nous voulons les utiliser dans d'autres projets et nous n'avons pas à les copier-coller sans cesse, ou si nous voulons les partager avec un autre membre de notre équipe, afin qu'il puisse utiliser exactement la même chose Nous sommes tous cohérents. Nous pouvons créer une bibliothèque, la publier, accéder à de nouveaux documents auxquels rien ne s'applique. Un nouveau document et créer un cadre et je peux dire qu'en fait, j'aimerais charger la bibliothèque Limerick, l' ajouter au fichier, j'ai accès à tous les composants Dans ce tout nouveau document, j'ai également accès à toutes les couleurs de cette bibliothèque. Je dois copier et coller ou recommencer. Le mieux, c'est que je peux le partager avec autres membres de l'équipe ainsi qu'avec moi-même. Très bien, allons-y. Tout d'abord, bon nombre de ces fonctionnalités sont destinées au compte payant. Ils n'arrêtent pas de me le changer, voyez jusqu'où vous pouvez aller avec les versions gratuites. Eh bien, dans le passé, vous étiez autorisé à utiliser les couleurs et les styles de police, mais pas les composants. Je sais qu'il est question de payer entièrement uniquement, mais vous verrez jusqu'où vous irez. Le document sur lequel je travaille dans lequel j'ai créé un tas de composants pour un tas de styles de couleurs et de textiles, des corrections, des variances, des variables. Il y a beaucoup de choses que vous pouvez conserver dans une bibliothèque. Créez la bibliothèque, c' est-à-dire le document à partir duquel vous souhaitez la créer, c'est-à-dire celui-ci. Vous accédez à votre panneau Ressources et vous voyez cette petite icône en forme de livre. Là-dessus. Nous allons dire que j'aimerais le publier bibliothèque pour que d' autres personnes puissent l'utiliser. Je vais cliquer sur Publier. Il va dire : « Hé, tu ne peux pas le faire parce que c'est dans tes brouillons Vous souhaitez le déplacer ? Je vais dire à Cookie. Vous avez un projet dans lequel vous souhaitez qu'il participe ? Je ne vais pas le faire, c'est arrêter de fumer. Je vais rentrer chez moi et je vais me consacrer à mes projets. Je vais en faire un nouveau. Créez un projet. Je sais que dans le compte gratuit vous ne pouvez en avoir que trois, n'est-ce pas ? Je pense que oui. Je vais en créer une qui s'appellera Limeric Techno Est-ce que je vais le partager avec les gens ? Pas pour l' instant, je vais créer. J'ai un projet sur lequel je dois m'attarder. Maintenant, nous pouvons le déplacer là-dedans. Retournez ici, créez une bibliothèque, publiez-la. Il dit qu'il doit être intégré à un projet. J'en ai un pour y entrer. Va. C'est la première partie. Vous pouvez maintenant passer en revue et décider ce que vous souhaitez y inclure. Il a fait toutes mes couleurs. Vous voulez tous vos composants ? Juste celui-là. Je veux dire qu'il suffit de les faire toutes. Activez-le, désactivez-le et incluez tout. Il se peut que vous deviez d'abord mettre de l'ordre dans votre dossier. Surtout si vous partagez avec d'autres coéquipiers ou avec vous-même. Nommer des éléments tels que le composant quatre n'est probablement pas très utile. Rangez tout ça d'abord. Appuyons sur Publier. Cela va se réduire en fonction du nombre de composants dont vous disposez Regardez en bas , bisous. Chien, je vais m'y prendre rapidement. Ce qui est cool maintenant, c'est que si je crée un nouveau document, au lieu d' essayer de copier-coller éléments de ce document, créer tous mes composants principaux, je peux simplement créer un tout nouveau fichier, nouveau fichier de conception, je vais commencer à créer une application. Je vais passer à l'iPhone 16 et maintenant je veux faire glisser des éléments de ma bibliothèque de ressources. n'y a rien ici pour le moment, ce que vous pouvez dire, c'est que vous pouvez consulter le petit livre de bibliothèque. Vous pouvez le rechercher. Vous pouvez dire qu'en fait je veux le Limeric. Il est là Limerick Techno, je vais l'ajouter à ce dossier, le fermer Maintenant, regardez, dans le panneau de ma bibliothèque, je peux accéder à mes composants et je peux commencer à créer ce truc ici, saisissant des tonnes d'instances, des icônes, tout ce qui a été créé ici ? Oh. Bizarre. Oui, il a joué un rôle principal. L'autre point intéressant, c'est que si je veux colorier ce cadre ici, je peux entrer dans mes champs de saisie et accéder à mes styles et vous pouvez dire, toutes les bibliothèques, non, je veux regarder la bibliothèque de Limerick Vous pouvez voir ici toutes les couleurs de ce document original afin que nous puissions garder les choses cohérentes. Ce qui est vraiment cool, c' est que ce fichier original, bibliothèques ont l'impression qu'il devrait y avoir quelque chose de séparé. Où puis-je trouver mes bibliothèques ? Les bibliothèques ne sont pas une chose à elles seules. C'est juste le lien entre ce document original. Si vous créez une bibliothèque d'équipe, peut-être mettre de l'ordre dans votre fichier, éviter d'avoir tous ces déchets partout. Conservez simplement les composants, les styles, et rendez-le un peu plus ordonné car il n' y a pas tous ces déchets partout. Conservez simplement les composants, les styles, et rendez-le un peu plus ordonné car il n' y a Si j'entre dans le vif du sujet et que je dis, revenez au composant principal. Il n'ira pas dans un document de bibliothèque distinct, il va simplement ouvrir le fichier original, même si je l'ai fermé. Je dis : « Hé, où est ce composant principal parce que je dois le changer maintenant ? » Il va ouvrir ce fichier original où qu' il se trouve et vous montrer ce composant principal. Ceci est tiré de mon document Limerick Techno V one. Disons que je dois changer cela parce que je veux aller jusqu'au bout. En fait, faisons-le légèrement différemment. Alors voilà, je suis parti changer le bouton pour dire au revoir maintenant. Nous avons fait certaines choses. Nous avons modifié le texte et nous avons décidé que celui-ci en fait une couleur différente. Nous allons appliquer le style de 500. Si je reviens à mon composant principal maintenant et que je dis : « Hé, composant principal, vous allez maintenant avoir différents coins arrondis ou s'il s'agit de 100, je vais passer à huit. Ce qui va se passer, c'est parce que c'est le composant principal qui contrôle ma bibliothèque. Il y a cette petite icône ici, dit : « Hé, il y a des modifications inédites Rien n'a encore changé ici. Mais ici, je peux dire qu'en fait, j' aimerais publier ces modifications. Il y a un changement. Je vais cliquer sur Publier. Voulez-vous tous les publier ou seulement l'un d'entre eux ? Je n'en ai qu'un. Il y en a plusieurs inchangés, donc c'est cool. Cliquez sur Publier. Ce qui est vraiment bien, c'est que cela peut être connecté à 20 autres fichiers et qu'ils ne se mettent pas à jour automatiquement, ce qui est vraiment bien. Je peux aller ici et dire, en fait, de cliquer sur mon bouton. Vous pouvez voir en haut ici, il y a une option qui dit : «   Hé, une mise à jour est disponible ». Vous vous demandez qui a fait ça ? Vous cliquez dessus et vous pouvez demander : est-ce que je veux simplement le mettre à jour ou puis-je consulter la mise à jour ? C'est très intelligent. Regarde, ça te montre côte à côte ce qui va se passer. Vous remarquerez qu' il conserve mon texte et la couleur que j'ai modifiés, mais qu'il change les coins arrondis. Vous pouvez les regarder côte à côte ou les superposer. Il est parfois difficile de savoir quels changements ont été apportés. Tu te demandes ce qui s'est passé. Vous les superposez, vous avez l'impression qu'ils ont embrouillé les coins arrondis Cliquez sur Mettre à jour l'instance. Fermons-le et il sera mis à jour. C'est un excellent moyen de contrôler de nombreux documents. Vous avez un composant principal et document de style liés à de nombreux autres fichiers. cool, c'est que ces bibliothèques peuvent être partagées avec d' autres membres de votre équipe. Comment y accèdent-ils ? Si vous passez à votre projet, y trouverez tous mes projets. Allons voir Limerick Techno. Ce que nous pouvons faire, c'est partager ou l'autre des membres de votre équipe. C'est mon ordinateur portable Binger Ou tapez simplement les personnes Victoria Borode, designer UX, je peux cliquer sur elle et lui envoyer invitation pour qu'elle ait accès à cette bibliothèque Vous pouvez décider si elle peut le voir et ne pas le modifier ou si elle peut également le modifier. Elle fait maintenant toute l'expérience utilisateur ici avec son ordinateur portable, afin qu'elle puisse le modifier. Souvent, elle partage des fichiers avec moi et je ne demande qu'à les consulter, alors ne vous embrouillez pas. Cool. Le gros problème, c'est qu' il n'y a pas de bibliothèque où aller et trouver. Il s'agit simplement d'un fichier qui peut être publié. Il doit se trouver dans un projet, et lorsque vous créez un nouveau document, vous pouvez charger cette bibliothèque pour assurer que vous utilisez tous les boutons, couleurs et styles cohérents. Cherchez juste en haut, le voici, et je vais l' ajouter au fichier. Elle est là. Ils n'apparaissent pas ici dans les styles. Mais lorsque vous les faites glisser vers l'extérieur et que vous passez aux styles, ils se trouvent dans celui que vous avez connecté. Ils sont tous là. Vous remarquerez que nous avons des styles de remplissage, des couleurs, mais nous avons également certains des effets qui figuraient dans le dernier document. Nous avons créé l'effet dropshadow. Nous en avons fait un style. Cool. Les bibliothèques sont géniales. Ils doivent participer à un projet d'équipe. Vous devrez vérifier le compte gratuit, ce qui est inclus maintenant. Je sais que dans le passé, jusqu'à récemment, seuls les couleurs et les styles de police étaient autorisés , pas les composants, mais je sais qu'ils envisagent de changer cela. C'est le grand avantage de l'utilisation des bibliothèques d' équipe dans Figma. Je vais voir dans la prochaine vidéo. 84. Comment masquer les styles et les composants de police de couleur de la bibliothèque d'équipe dans Figma fonte: Bonjour, tout le monde. Dans cette vidéo, je vais vous montrer comment créer ce dossier caché pour les composants, nous masquerons également les couleurs dans la bibliothèque principale. Il peut s'agir de composants sur lesquels vous travaillez ou simplement de composants vous savez que l' équipe n'a pas besoin. Vous pouvez les désactiver, les masquer dans la bibliothèque partagée. Vous pouvez également le faire avec des couleurs, et je vais vous montrer ce nom et cette convention de soulignement au début. Très bien, allons-y. C'est bon de commencer. Soyons deux personnes distinctes. Dan et Doug. Doug travaille en tant que collègue. crée un fichier de conception et il dit « Je dois connecter la bibliothèque que nous utilisons », puis il va à Limerick et la trouve Limerick tech no V one, l'ajoute, puis il peut commencer à travailler sur un nouveau projet, mais en utilisant tous les composants utilisés Fait glisser certains de mes boutons et commence à fonctionner, il a accès aux couleurs Il y a certaines choses, mais je ne veux pas que Doug les ait non plus, elles doivent faire partie de mon dossier, mais je ne veux pas qu'elles soient publiées pour l'instant car ce sont des fichiers à venir Je les utilise peut-être, mais personne d'autre ne devrait l'être. Ce que nous devons faire, c'est redevenir Dan. Nous devons revenir au fichier de création de la bibliothèque d'origine, et c'est assez simple. Dans le panneau Ressources, recherchez l'élément sous les composants que vous ne souhaitez pas inclure dans la bibliothèque, et vous pouvez simplement dire masquer lors de la publication. Si tu redeviens Doug, cela peut prendre une seconde, mais finalement, allez, ça disparaîtra. Il n'est pas en train de disparaître Je sais pourquoi. Donc, si je le désactive, je l'ai masqué, je dois ensuite republier ma bibliothèque Vous pouvez voir que ce petit point indique modifications n'ont pas été publiées Je dois maintenant le publier. n'y a qu'une seule modification et nous avons supprimé le bouton objet. Publiez maintenant, redevenez Doug Doug devrait en perdre l'accès Oui OK. Il convient de noter, cependant, que les utilisations ou instances de ce projet principal qui sont déjà présentes dans des projets ne seront pas renvoyées dans la bibliothèque. OK, donc c'est bien. n'est pas ce que nous voulons. OK ? Mais maintenant, ils ne peuvent pas être utilisés pour les nouveaux projets, les anciens fichiers, les anciens composants. Imaginons que je veuille le réactiver. OK, je suis redevenu Daniel. Je suis le patron. Je dois le réactiver pour y accéder. Ce que vous constaterez, c'est qu'il a en quelque sorte disparu de mon panneau Assets. Si tu en retournes un, d'accord ? Y a-t-il une petite flèche pour en revenir à une depuis les composants, il y a un autre dossier appelé caché. Et voici mon bouton. OK, et je peux cliquer dessus et dire « Afficher la publication ». Je dois juste m'assurer d'aller ici et de dire de publier ma bibliothèque, et Doug y aura à nouveau accès. Ce que je veux vous montrer, c'est que certaines personnes n'utilisent pas le clic droit pour masquer lors de la publication. Ils le renomment simplement. Je vais retourner à mes dossiers. Je vais trouver cet actif ici et je vais double-cliquer dessus. Les utilisateurs mettront un trait de soulignement devant lui, ce qui fera la même chose S'il fait la même chose, vous voyez, il indique simplement qu' il y a un changement. Quelles sont les modifications ? Il a été supprimé. Le nom et la convention du trait de soulignement juste avant le nom du composant sont une autre façon de procéder Vous le verrez et vous vous demanderez : « C' est quoi ce bordel C'est juste une autre façon de faire de même. Les gens aiment que tu sois là pour les couleurs. Je suis dans ma bibliothèque créer un fichier et vous pouvez voir que j'ai toutes ces couleurs. Disons 900, je ne veux pas y accéder. Nous ne voulons pas que les gens l'utilisent. J'en ai besoin dans mon document de travail ici, mais je peux dire la même chose. Je peux juste mettre un trait de soulignement. y a aucun moyen de cliquer avec le bouton droit de la souris et dire « masquer le style de couleur ». Donc, ce qu' ils font, c'est qu'ils vous permettent également de mettre un soulignement devant. Même chose. Si je le publie maintenant, il publie et supprime ce fichier couleur. Et par fichier couleur, je veux dire style de couleur. Si vous trouvez les documents d'autres utilisateurs, ils sont soulignés partout, c'est parce qu'ils les suppriment d' une bibliothèque partagée Je vais rallumer le mien et je vous verrai dans la prochaine vidéo. 85. Comment déplacer des composants de refactorisation de la relie vers un autre fichier de conception dans Figma conception: Nous allons examiner ce que l'on appelle le refactoring ou plus facile de le considérer comme Nous avons le fichier à partir duquel nous avons créé nos composants, mais il est désordonné. Nous avons tout cela ici, nous avons des publicités sur les réseaux sociaux, des images, des éléments que nous ne voulons pas voir apparaître sur nos composants principaux ou dans nos styles. Nous voulons que nos styles soient beaux et qu'ils soient regroupés dans un seul document. C'est ce que nous allons faire. Nous allons déplacer nos composants et tous nos styles de couleurs vers document distinct, et ce qui est cool, c'est que Figma les reliera s'ils sont utilisés dans un autre fichier Le résultat final est que j'aurai ce joli fichier de design épuré contenant juste mes composants, juste mes styles, qui ne fonctionne pas, pas de mises en page mobiles, rien d'autre, et qui est beaucoup plus facile à partager avec l'équipe C'est ce qu'on appelle le refactoring. Imaginez-le en créant un lien vers un autre document. Allons-y. Pour commencer, je suis dans le dossier dans lequel j'ai créé ma bibliothèque. C'est mon gros dossier désordonné. Je vais ici, il contient tous mes modèles de téléphones portables. Il contient mes composants, ce qui est pratique, mais maintenant je dois les extraire et les mettre dans son propre fichier afin que personne n'accède à ce vieux fichier désordonné et que vous deviez le conserver pour toujours. Alors faisons-en un bien rangé Pour commencer, j'ai juste créé un tout nouveau document. J'ai connecté la bibliothèque Limerick et j'ai utilisé un composant et une couleur en arrière-plan Ils sont donc extraits de cette Je veux changer cela. Pour le changer , il vous suffit de créer un nouveau fichier, et je vais créer un nouveau fichier de conception. Je vais appeler celui-ci. La techno de Limerick, je vais juste l'appeler « main ». Et tout ce que nous faisons, c'est copier-coller des éléments dessus. Je dis que c'est la seule chose. Il y a quelques autres choses, mais c'est l'essentiel Si je vais ici et que je dis « cet article ici », je veux le trouver dans mes composants. Je vais passer à cut, qui est Command or Control X, juste votre ancienne version normale. Tu le coupes et tu le colles ici, d'accord ? Vous avertir en disant : « Hé, vous avez transféré des informations d'une bibliothèque ». Tu dois le publier. Je peux le faire, mais c'est le principal. Vous pouvez couper et coller des éléments dans ce nouveau document. Pour que tout fonctionne et que les choses ne soient pas cassées car ce fichier que j'ai créé ici contient ce bouton. Qu'est-ce que cela fait ? S'agit-il d'un lien vers l'ancien ou le nouveau fichier ? Pour que tout fonctionne, il vous suffit de le publier. Je vais accéder à mes actifs, je vais dire publier ce truc, je vais devoir publier. Cela va dire deux ou trois choses. Nous savons que vous ne pouvez pas l' avoir sous forme de brouillons, je peux donc le transférer dans mon projet Je vais le déplacer dans mon dossier techno de Limerick. Déplacez-le ici sous forme de fichier de conception distinct. Et je vais m' assurer que toutes ces choses changent. Cela va vous donner un avertissement. Il va dire : «   Hé, les choses ont été coupées d'ici à ce document, mais d'autres documents, comme mon nouveau design et 1 000 autres projets, utilisez-le. Ils vont recevoir un avertissement. C'est bon C'est gros, rouge et effrayant, mais ce n'est pas si effrayant. C'est publié. Ce que vous remarquerez, c'est que mon nouveau fichier indiquera que j'ai quelques mises à jour. Quelles sont ces mises à jour ? Cliquons dessus pour y jeter un coup d'œil. Tout ce que ça veut dire, c'est que j'ai juste cliqué sur Mettre à jour. Il n'a fait que mettre à jour le lien d'où il venait. Maintenant, ça ne vient pas de Limeric Techno V qui contenait tous mes déchets, ça vient de ce Vérifions-le. OK, cliquons dessus. C'est ici, revenez ici. Vous pouvez maintenant voir que j'ai deux bibliothèques connectées. J'ai celui-ci ici, il n'y a qu'un seul composant, c' est-à-dire celui-ci, et toutes ces autres choses. Maintenant, je dois passer en revue, supprimer tous les composants que je veux inclure dans mon ensemble de composants principaux, continuer à les déplacer. Ce qui est cool, c'est de les refactoriser pour vous. Il vous suffit de les couper et de les coller dans votre nouveau document, assurer qu'il est publié, et pour tout fichier qui utilisait le bouton d'éjection, nous avons juste une mise à jour et rien ne change vraiment sauf l'endroit vers lequel il est lié Un dossier bien plus ordonné. Nous pouvons travailler dur sur celui-ci, en le gardant beau et propre plutôt que sur notre original. Est-ce que cela a du sens ? Maintenant, le principal problème rencontrent les gens, c'est la publication. Les gens oublient de publier et ils diront que cela ne fonctionne pas, que cela ne se voit pas. Assurez-vous donc que tout est publié et mis à jour. Ce que je veux dire par là, c'est aller ici et s'assurer qu' il n'y a pas d'éditeurs exceptionnels. Il n'y a aucun changement. C'est très bien Mon article principal n'a pas changé, doit être publié. D'accord ? Et assurez-vous que tous les autres fichiers que vous ouvrez vont dans la bibliothèque et vérifiez s'il y a des mises à jour. Nous faisons la même chose avec les couleurs, c'est encore une fois pour que ce soit clair. Les couleurs sont un peu différentes Les couleurs, j'ai oublié que rien de sélectionné ne se trouve ici dans mon panneau de propriétés. Disons que je souhaite récupérer toutes mes couleurs primaires. Je vais aller couper, comme avant. Cela provient de ce document. Je passe à celui-ci, je le colle. Il est dit que vous devez le publier, je peux le publier. Peu importe d'où tu viens. Je clique sur publier ici ou si vous le faites à partir du petit livre ici, cliquez sur Publier, et si je reviens au fichier dans lequel ils ont pu être utilisés, vous devrez peut-être aller ici, puis accéder aux mises à jour et vous pourrez voir qu' une mise à jour est mise à jour. Cliquez sur Mettre à jour et c'est tout. Terminé. C'est en train de refactoriser et je vais juste suivre le lent processus passer en revue Donc, ce que je vais faire, c'est prendre toutes mes couleurs maintenant. Je clique sur le premier, je maintiens la touche Maj enfoncée, je le coupe, pour passer au nouveau. Faisons-le encore une fois, collons, publions, publions toutes ces choses. Si vous entendez un crépitement en arrière-plan, j'ai acheté deux nouveaux kits et ils attaquent des objets au bureau Il est difficile de les faire arrêter de faire du bruit. Pourrais-tu arrêter ? Très bien, c'est mis à jour, jetons un coup d'œil à tout. Il vous suffit de vous assurer que la bibliothèque de styles est mise à jour. Rien ici n'a besoin d'être mis à jour uniquement parce que je n'utilise qu' une des couleurs de ma bibliothèque de styles. Un composant de ma bibliothèque de composants. Il n'y a vraiment rien à mettre à jour ici. Il vous suffit de vous frayer un chemin et de dire que ce truc doit changer. Nous allons le faire encore une fois. Vous venez ici et je vais cliquer sur publier ou le faire ici. Je vais le publier. Publiez, s'il vous plaît. Mon nouveau dossier de design ici. Si je vais dans ma bibliothèque pour accéder aux mises à jour, il n'y aura aucune mise à jour car je n'ai pas utilisé le bouton principal dans ce document. Je suppose que je vais y accéder. Voilà le bouton principal. C'est un peu lent et fastidieux, mais c'est bien mieux que de travailler à partir de cette monstruosité que nous avons créée jusqu'à présent Tellement de fichiers, tellement de pages différentes. Vous pouvez être vraiment bien rangé lorsque vous le refactorisez. N'oubliez pas que la refactorisation consiste simplement à reconnecter. La seule chose qui va vous surprendre et attirer l'attention des étudiants tout le temps, c'est que rien n'est publié. Il suffit de tout parcourir et de tout publier, et de vérifier les mises à jour sur tout, et vous constaterez probablement que c'est votre problème. Parfois, j'ai découvert que je devais fermer fig et ouvrir une sauvegarde. Cela se produit de moins en moins à mesure qu'il mûrit en tant que produit, mais parfois cela est également utile. Tout ce que je vais faire, je ne sais pas, c' essayer de faire quelque chose avec les chatons Ils ont besoin d'autre chose à faire plutôt que attaquer des objets situés près de mon micro. Très bien, c'est du refactoring. Je vous verrai dans la prochaine vidéo. 86. Quels sont les conseils et astuces avancés en matière de dessin dans Figma: Tout le monde. Dans cette vidéo, nous allons gâcher un document. Mais en cours de route, nous allons apprendre tous mes trucs et astuces de dessin avancés. C'est bon, allons-y. Bien, commençons par l'outil Lasso Vous devez être dans la fonction ou le mode de dessin de Figma, et j'ai l'étoile que j'ai dessinée Nous devons y aller pour commencer à modifier la forme, double-cliquer dessus. Et je pourrais utiliser l'outil de sélection et le déplacer pour obtenir les points dont ils ont besoin, mais l'outil Lasso est génial pour les fichiers vectoriels vraiment complexes Vous pouvez simplement vous déplacer et dire « je vous veux mais pas les autres », et vous pouvez toutes les sélectionner. Maintenant, je peux cliquer sur les faire glisser et les déplacer si je veux les supprimer. Si j'avais supprimé mon clavier, supprimez-le simplement en entier. Je vais donc revenir à ma sélection. Je vais prendre ceux-ci. Si je veux supprimer uniquement ceux du haut de la page, maintenez la touche Shift enfoncée et appuyez sur la touche de suppression ou sur la touche de retour arrière Les deux fonctionnent. Mais si vous le faites simplement sans la touche Shift, cela supprime le tout Conseil d'appel : si j'utilise mon outil de déplacement et que je clique sur l'un d'entre eux, je peux utiliser l'onglet de mon clavier. Regarde ça, passe à travers et attrape le point d'ancrage suivant Cela pourrait être très pratique. Surtout lorsqu'ils sont très proches l'un de l'autre, vous pouvez cliquer sur l'un d'eux , puis passer au suivant avec la touche de tabulation. le cap, débarrassez-vous de lui. Pauvre vieille star. Ensuite, je voudrais vous montrer l'outil commun, et je viens de suspendre la vidéo parce que je l'ai foirée Je veux vous montrer comment je gâche les choses parce que je le fais tout le temps, vous faites de même. Si je prends l'outil stylo maintenant, que je clique, que je fais glisser et que je fais tout cela, ce qui se passera, c'est que je l'ai dessiné avec un stylo, mais je l'ai dessiné en forme d'étoile. Cela fait partie de l'étoile, ce qui fait mal aux fesses car ce ne sont pas deux formes distinctes. Regardez si je reviens à mon MoveTool, cliquez sur l' arrière-plan. Il s'agit d'une unité. Et un peu de travail, mais ce n'est pas ce que je voulais. Chaque fois que vous travaillez sur, disons l'étoile, je suis en train d' annuler, assurez-vous de double-cliquer sur l'arrière-plan pour en ressortir afin dessiner une forme distincte qui m' attire tout le temps Dessinez une forme et approchez-vous de la terminer, croyez-le comme un écart Vous pouvez obtenir l'icône ou le graphisme d'une autre personne dans une autre bibliothèque ou bibliothèque d'icônes. L'écart vient peut-être de votre dessin. Ce que vous pouvez faire, c'est simplement appuyer sur la commande J, et elle reliera les deux points d'ancrage là où il y a un écart, c'est très pratique car sinon, je ne pourrais pas ajouter de remplissage. Command ou Control J, rejoignez-le. Maintenant, je dois ajouter un remplissage. une chose que tu ne peux pas faire, et je ne sais pas, c'est cool aussi. Je prends mon outil de déplacement, je les sélectionne tous et tu passes à Command J, regarde ça. Comment. Je pense que nous avons créé une secte, mais annulons cela et vous pouvez soit sélectionner ces deux options et passer à Command ou Control J, soit ne rien sélectionner. Soyez dans votre forme. Si je double-clique pour sortir, cela ne marchera pas, mais si je vais à l' intérieur et que je passe à la commande J, ça dit : Oh, vous pensez probablement à ces deux-là. Et ajoutez un remplissage. Ensuite, il y a le point d'ancrage pour la rotation. Si je clique sur Sortir de mon carré aléatoire sur le rotateur en forme d'étoile brisée, il tournera autour du centre, et c'est peut-être ce que vous voulez Mais il arrive souvent que vous ne vouliez pas que cela se produise et vous passez simplement le curseur ici comme si vous alliez le faire pivoter Attends, attends, attends. Vous voyez que le point d'ancrage au milieu vient d'apparaître ? Bonjour Cette petite cible ici signifie que vous pouvez la traîner et dire «  je veux qu'elle soit là ». Maintenant, lorsque vous le faites pivoter, le centre de rotation a changé. Tu dois juste attendre un petit moment. Ensuite, emballez horizontalement ou verticalement. Nous avons déjà rencontré ce problème. Ramenons quelques icônes de tout à l'heure. OK, je suis juste sur un tout nouveau projet. Je suis parti importer. Je vais consulter les fichiers d'exercices. Je vais choisir les icônes 2. Nous l'avons envoyé à ceux-là. Je vais en apporter d'autres. Je place, et ça les jette les uns sur les autres et tu passes des heures à y aller Vous pouvez voir comment vous avez saisi le cadre séparément du vecteur à l'intérieur, en peignant la crosse. Ce que vous pouvez faire, c'est les sélectionner toutes et utiliser nos actions, K Command K ou cliquer sur le bouton en bas ici. Ce que nous cherchons, c'est emballer. Nous pouvons les emballer horizontalement ou verticalement et il suffit de les empiler. Enfin. Et si nous zoomons suffisamment, vous commencerez à voir les éléments habituels que nous avons examinés auparavant. C'est une sélection intelligente. On peut aller les traîner partout. Il ne s'agit pas d'huile et nous pouvons jouer avec le rembourrage juste pour récupérer. Mais avant. Une autre solution simple est que si je prends le cadre à crayons ici, là-haut, il y a une option pour le retourner verticalement ou horizontalement, juste pour que vous le sachiez. Regardons un raccourci pour aligner un objet. Disons que j'ai un cadre dans lequel se trouvent mes icônes. Ces gars-là, je voudrais les aligner peut-être sur la droite. Ce n'est pas vraiment ce que je veux. Je veux l'aligner sur le bord du cadre parent. Je pourrais les regrouper et les aligner, regardez ça. Si je maintiens ma touche Shift enfoncée et que je passe le curseur au-dessus de celles-ci, vous pouvez voir la touche Shift lorsque vous la touchez sur mon clavier Si je le maintiens enfoncé, vous voyez qu'ils changent un peu ? Ce qu'il va faire, c'est qu' il va s'aligner à droite du cadre. Utilise celui-ci le plus souvent. Il suffit de les centrer verticalement et horizontalement par rapport au cadre. Maintenez la touche Shift. Sinon, ils se placent au milieu, mais ils s'empilent tous. Vous pouvez les regrouper, les transformer en sortie automatique en maintenant la boîte de vitesses, c'est juste une bonne petite astuce. Une autre est que si vous dessinez quelque chose, il est simplement livré avec une boîte grise sans trait. Il a un rembourrage, pas de trait. Vous pouvez les changer très facilement. Maintenez la touche Shift enfoncée et X. Je bascule simplement. La couleur du trait se déplace vers le fond. remplissage passe au trait. Ils passent simplement de l'un à l'autre. Cela peut être pratique. Vous avez quelque chose qui a un trait et un remplissage. Je vais le rendre beau et épais, pour qu'il soit plus facile à voir. J'ai un accident vasculaire cérébral et je suis rassasié. Vous pouvez les activer/désactiver. N'oubliez pas que Shift X les active. C'est cool. Vous souhaitez donc supprimer le trait. Tout est lié au bouton Slash de votre Ford. Abaissez votre clavier, trouvez la barre oblique. Si vous maintenez la touche Maj enfoncée et que vous appuyez sur la barre oblique, le trait est supprimé. Je vais annuler. Si vous ajoutez une option et utilisez barre oblique, le remplissage Voilà. Raccourcis nudy Vous connaissez probablement déjà celui-ci. Commandez ou contrôlez Y. Nous allons passer d'une vue d' ensemble à une autre Il est simplement plus facile de voir certains vecteurs dans cette vue, et cela ne les change pas définitivement, mais cela vous aide à voir certaines parties et à aligner les éléments un peu plus facilement. C'est la commande ou le contrôle Y pour le plan. Ce sont mes astuces de dessin avancées. Je vous verrai dans la prochaine vidéo. 87. Comment utiliser l'outil de largeur variable et simplement le trait dans Figma ma: C'est bon, tout le monde. Dans cette vidéo, nous allons examiner l'outil simplifié et l'outil de largeur. L'outil simplifié va transformer les dessins crédules en jolis objets lisses auxquels nous pourrons ensuite ajouter ces largeurs variables De belles touches ou des lignes simples qui ont un peu plus de dynamisme. Ce n'est pas un mot, alors nous intervenons et vous montrons comment les fabriquer. Je vais m'assurer de ne pas être à l'affût des autres formes que nous dessinons. Je vais passer en mode dessin. Je vais passer à l'outil crayon et je vais choisir une belle couleur. Je vais dessiner une forme. Par défaut, ce n'est pas particulièrement fluide. Ce que je peux faire, changer d' outil de déplacement, qui est le Viki. Cliquez dessus une fois et vous verrez cette option ici, elle dit « Simplifier le vecteur ». Cela fonctionne pour n'importe quelle forme vectorielle, mais c'est parfait pour cette courbe. Vous pouvez simplement voir qu'il y a trop de points d'ancrage, en essayant de vous en sortir. Ce que vous pouvez faire, c'est simplement le faire glisser de cette façon, vous pouvez voir qu'il commence à les supprimer et à le rendre de plus lisse jusqu'à ce que vous obteniez résolution suffisante ou suffisamment de points d'ancrage. Je vais le rendre vraiment petit et lisse et cliquer maintenant pour utiliser l'outil Largeur Ce que je dois faire est légèrement différent, je dois entrer dans la forme que j'ai dessinée. sélectionnée, je vais double-cliquer dessus pour y accéder et vous remarquerez cette option ici, elle s'appelle l'outil Width variable. Vous pouvez le saisir n' importe où, cliquer et faire glisser le pointeur pour obtenir cette jolie forme. Vas-y. Il y a quelques profils par défaut ici. Vous devriez peut-être jouer avec eux. Ils doivent être plus grands. Je vais annuler et revenir à celui que j'étais en train de créer. OK, donc j'ai fait ma largeur. Vous pouvez faire glisser le centre pour décider où il doit être placé. Et vous pouvez à nouveau faire glisser les bords pour l'ajuster. Vous pouvez en ajouter plusieurs, assurez-vous que vous utilisez toujours votre outil de largeur. Vous pouvez avoir de nombreuses largeurs différentes. J'utilise beaucoup cet outil dans Illustrator. Pour ce genre de choses où il y a ces jolies petites bulles et fleurs, vous pouvez faire de même dans Figma Il s'agit essentiellement du même outil. Faisons celui-ci, je vais donc accéder à mon outil Width. Ce dont vous avez besoin pour que cela fonctionne, en fait, supprimons-le et commençons par quelque chose de plus agréable. Je vais donner mon stylo. Je vais maintenir et faire glisser, cliquer sur Maintenir et faire glisser. On m'y applique toujours ma largeur. Cliquez sur Maintenir et faites glisser, et peut-être un autre ici pour obtenir une belle courbe. Je vais me débarrasser du profil de largeur et revenir à la normale. Je vais accéder à mon outil de largeur. Pour fabriquer ce petit objet à bulles que je viens de te montrer, tu en as besoin de Tu as besoin de celui-ci. D'accord, un peut être plus petit , puis un au bout juste à la fin, pour l'agrandir. Maintenant, ce que vous pourriez trouver c'est que selon la date à laquelle vous l'avez utilisé pour la dernière fois, vous pourriez vous retrouver avec une extrémité plate ou arrondie. Changez cela, je peux récupérer mon outil de sélection et cliquer simplement sur la ligne et vous verrez ici qu'il y a différentes encaps Par défaut, il est réglé sur deux, pas de casquette, et puis il y a celle-ci qui est une casquette ronde et elle vous donne un joli petit pompon. Je peux utiliser mon outil de largeur et trouver quelque chose d'un peu plus approprié. Vous pouvez jouer avec le trait de l'ensemble. Même s'il est indiqué deux, cela va simplement augmenter proportionnellement aux largeurs que vous avez définies Il n'est pas nécessaire que ce soit si exotique. Il peut s'agir simplement de quelque chose de simple, comme un soulignement lorsque vous faites quelque chose de simple et de gentil. Je vais réduire l'épaisseur de mon trait non pas à zéro, mais à un, pour que ce soit beau et fin. Prends mon outil de mesure de largeur. Peut-être que vous devez double-cliquer dessus pour accéder à l'outil de largeur. J'ai fait exactement la même chose que je t'ai montrée de ne pas faire avant. Je vais le laisser dans le cours, car je continue à le faire chaque fois que je dessine de nouvelles formes. Si je suis ici et que je commence à dessiner, ça les combine Je vais te chercher. Je vais découper ton apparence en arrière-plan. Ne sélectionnez rien, collez-le, il est tout seul, puis entrez dans lui. Ensuite, je peux accéder à mon outil Width et faire quelque chose de plus agréable comme celui-ci Quelque chose de beau et de simple et peut-être que je vais passer à cet embout qui est un joli embout pointu. Vous verrez ici que j' ai encore raison. Vous pouvez réduire l'épaisseur de votre ligne à environ 0,1, elle sera très fine aux extrémités. Je vais devoir ajuster la largeur de mon outil ici pour qu'il soit à nouveau pointu aux extrémités et qu'il ait ma petite hauteur au milieu Il s'agit d'une largeur variable. Je peux le retourner, c'est l'outil à largeur variable. Vous pouvez les supprimer. peux y aller, les supprimer, Je peux y aller, les supprimer, et on revient à une ligne droite normale. C'est ça, mes amis. C'est l'outil à largeur variable. 88. Comment superposer et empiler des éléments dans un layout Figma out: Très bien, tout le monde, nous allons faire en sorte que les choses se chevauchent. Vous pouvez simplement les faire glisser les uns sur les autres. Mais nous allons vous montrer comment utiliser sortie automatique pour que vous puissiez modifier l' espacement et le rendre parfait Vous pouvez manipuler vos objets et les faire glisser. Et comme il s'agit d'une sortie automatique, nous avons certaines fonctionnalités spéciales nous permettent de dire « premier en haut », dernier en haut », « dernier en haut Yo, allons-y. A pour commencer. J'ai un cadre de révision. Je suis revenu à mon document original. Je suis sur mon mobile Hi Fi et j'ai créé une page de commentaires dans laquelle j'ai juste mis un rectangle pour mon avis. Je vais utiliser l'Oki pour dessiner mes petits cercles, et je vais maintenir la touche Shift enfoncée pour qu'ils soient parfaitement ronds. Je vais le dupliquer plusieurs fois, commande D D D D. Ce que je peux faire maintenant, c'est simplement les sélectionner toutes. Je tiens la touche Shift enfoncée pour les saisir toutes et vous pouvez maintenir l'espacement. Impossible de voir l'espacement et de zoomer. Eh bien, ça ne me montre pas l'espacement. Est-ce qu'il m'en manque un ? Hum. Quand est-ce que je le ferai ? Je peux les modifier, mais je ne peux pas changer l'espacement. Ou c'est là. Voilà mon espacement. Il est juste apparu comme par magie. Vous ne pouvez pas simplement les faire se chevaucher comme ça, non ? Mais ce que nous allons faire, c'est les transformer en Audi Lout car cela nous offre quelques fonctionnalités supplémentaires Nous adorons Audiouts. En fait, avant de le faire, ajoutons quelques avatars. J'aime utiliser un plugin appelé Content Reel. Vous pouvez utiliser n'importe lequel d'entre eux. Il y en a beaucoup. J'aime Content Reel parce qu'il contient un tas de choses différentes que je pourrais utiliser. Sous Image, je vais choisir, disons, des avatars masculins. Vous cliquez sur Appliquer. À l'arrière. J'aime bien celui-ci parce qu' il est plus réaliste, les gens. C'est un utilisateur en quelque sorte déconnecté, qui va le déplacer ici. Très bien, transformons-en Atoout. Les avantages sont les mêmes qu'avant de commencer à jouer avec le Tu peux le faire ici ou ici , dans la brèche. Vous venez de le mettre dans un montant négatif. L'avantage d'utiliser Atoout que nous avons ces commandes ici Pouvez-vous voir ces petits paramètres de mise en page automatique ? Il existe une option permettant de dire dernier en haut ou premier en haut et vous pouvez voir que cela change l'ordre des couches. Dernier, premier. C'est bon. En gros, vous avez juste besoin d'un montant d'écart négatif et vous pouvez les faire se chevaucher. Facile, facile. C'est ça. Je vous verrai dans la prochaine vidéo. 89. Comment ignorer Autolayout pour l'espace absolu dans Figma: D'accord. Tout d'abord, pour ignorer la sortie automatique, vous devez disposer d'une sortie automatique Pour le moment, il ne s'agit que d'un cadre avec quelques têtes dedans. J'ai quelques textes que j'ai créés pour ma révision. Je vais prendre le cadre parent, vous transformer en sortie automatique et le faire comme je veux jouer avec le rembourrage, 24 et 24, le faire glisser vers Il fait des trucs de sortie automatique, ce qui est bien. Je veux cette tête dans le coin supérieur. Je vais juste récupérer ce remplissage et le coller, et cela ne fait pas partie de la commande. Je montre juste comment je le construis. Regarde ça. Si je l'ajoute à la commande, c'est comme je voulais participer au flux et que je vais remplacer mes amis Il s'agit de la configuration par défaut d'Atoout. Je pourrais juste l'avoir ici et maintenir la barre d'espace pour qu' il ne saute pas dedans et que cela fonctionne, mais ça n'en fait pas partie. Je ne peux pas en faire un composant car ce sont deux choses distinctes. Ce que je peux faire, c'est dire que vous êtes là, mon ami, mais que vous êtes prêt à passer à celui-ci. Pouvez-vous vous tenir debout ? Une position indique « Ignorer la sortie automatique ». Il faut que ce soit à l'intérieur et à l'extérieur, alors ce type pourra l'ignorer. Impoli. Je peux y aller et il peut ignorer la sortie. Le problème, c'est qu' il est coupé, donc je peux prendre le cadre parent et dire, découpons pas en coupant, en coupant le contenu. Allons-y. Maintenant, vous constaterez que lorsque vous le faites glisser, il finira par sauter hors de ce cadre parent et ne plus en faire partie du tout Tu vois, il y a une ellipse maintenant, il traîne juste tout seul Nous utiliserons la technique que nous avons déjà utilisée. C'est à l'intérieur d'ici, ce qui est bien. Commencez à faire glisser la barre d'espace et vous pouvez l'obtenir pour qu' elle ne quitte pas le mode automatique Maintenant, cela va être ignoré, mais tout cela fait partie de la même sortie automatique unifiée. Je vais jouer avec l'espacement. Je sélectionne ce type et je vais maintenir la barre d' espace pour qu'il ne parte pas . ' va faire quelque chose comme ça. Prenez ce cadre pour parents. Je vais prendre la mise en page de ce côté. Ça va probablement le rendre un peu plus petit. Je m'éloigne un peu en maintenant barre d'espace et ce sera mon Autout peut se transformer en composant maintenant, il traîne dehors, mais ignore la sortie automatique. C'est facile Je vous verrai dans la prochaine vidéo. 90. Comment ignorer autolayout mais qui est toujours réactif dans Figma actif: Bonjour, tout le monde. Cette vidéo, nous allons trouver quelque chose, cette pastille en haut Je vais le rendre réactif tout en ignorant la sortie automatique Cela signifie que je peux faire glisser la voiture extérieur et elle arrive vers la droite. Sinon, il reste là. Il l'ignore, mais il ne se présente pas et il ne répond pas. Je suis là pour le faire. C'est bon. Pour commencer, j'ai fabriqué une petite pastille. C'est la sortie automatique. Je veux qu'il soit dans mon Auto Out. Et nous allons faire la même chose qu' avant, c'est-à-dire le déplacer ici, nous allons le passer au positionnement absolu. Cela s'appelle maintenant Ignore Auto Lut. Le terme est appelé positionnement absolu. C'est comme ça qu'on l'appelait autrefois. Si vous êtes un développeur de sites Web, vous saurez ce que cela signifie. Pareil. Ignorez la sortie automatique. Nous l'ignorons donc. Si nous le mettons ici, souvenez-vous nous ne voulons pas le faire glisser hors du cadre, nous voulons le garder dans le cadre, nous allons maintenir la barre d' espace pendant que nous le faisons glisser, il peut se trouver ici Je vais laisser le mien traîner un peu, et ça marche. Il est assis là, au moins. Il ne s'ajuste pas, il ne répond pas. Il est réactif. Il ne me reste plus qu'à le sélectionner. Vous voyez ici les lignes pointillées ? Il essaie de se maintenir en haut et à gauche. Tout ce que j'ai à faire, c'est de dire, d'accord, tu es en haut et à droite. Maintenant, quand je règle le bruit de mon petit Auto ici, regardez, il arrive vers la droite. C'est facile. Regardez-nous en train de combiner différentes fonctionnalités. Voilà. C'est ainsi que l'on peut s'assurer qu'il est absolument positionné, ignoré ou autorisé, mais également réactif. C'est ça. 91. Comment créer un bouton de largeur et de hauteur minimales dans Figma ma: Bonjour, tout le monde. Je vais vous montrer comment créer un bouton de taille minimale et maximale. Celui-ci pourrait être appelé panier, mais vous pouvez voir que le bouton ne devient pas plus petit, mais qu'il peut s' agrandir jusqu'à un certain point et ne pas s'élargir par rapport à ce que je l'ai configuré. C'est la taille minimale et maximale. Répondre à Auto outs. Laissez-moi vous montrer comment faire. Je viens de commencer par un petit texto. Le Min Max ne fonctionne que lorsque vous êtes en mode sortie automatique. Je vais donc passer au Shift A ou au Autolou. Hé, je vais le colorier , tu manges là-bas. OK, donc c'est un bouton coloré, et je peux taper pour toujours, non ? Donc, ce que je dois faire, c'est remettre mon texte dedans. Je dois le régler au minimum et au maximum. Maintenant, vous devez le faire sur le cadre extérieur, pas sur le texte à l'intérieur. Le cadre parent doit être une sortie automatique. Ne fonctionnera pas avec un rectangle cela ne fonctionnera pas avec un simple vieux cadre. Donc, une fois cette option sélectionnée, je vais passer à la largeur, et je peux simplement dire que j'aimerais commencer avec un maximum que je veux mettre , je ne sais pas, 140. Vous pouvez y voir que c'est tout ce que vous pouvez faire. Essayons. D'accord, vous pouvez le voir, il se casse tout simplement. Je ne peux pas être plus grand que ça. Mais au minimum, pour le moment, il continuera à descendre et à s'enrouler autour de l'extérieur. Je dois en faire une taille minimale. Encore une fois, cliquez sur le parent et je vais répéter avec la largeur, mais je veux une largeur minimale. Et je veux que la largeur minimale soit, disons, de 40. Vous pouvez y voir la largeur minimale. Maintenant, quand je fais le plus petit, le plus petit, vous pouvez voir qu'il n'atteint qu'une certaine taille. Ce que vous pourriez faire, c'est, disons que je veux l'appeler B. Vous voulez qu'il soit probablement centré dans cette Vous voulez qu'il soit probablement centré case, de sorte que lorsqu'il devient de plus en plus petit, il reste au milieu. C'est à vous de décider. Je vais annuler ? Supposons que vous ayez des boutons existants. Vous voulez simplement que ce bouton soit de la plus petite taille. Vous pouvez cliquer sur le parent. Vous pouvez aller ici et lorsque vous fixez la largeur minimale, la largeur minimale, ici où il est indiqué la largeur minimale, vous pouvez la modifier pour la définir sur la largeur actuelle, et ce sera cette taille. Je ne peux pas être plus petit que celui que tu as juste devant toi. N'oubliez pas qu'il doit s'agir d'une mise en page automatique, et qu'il ne peut pas s' agir simplement d'un vieux cadre ordinaire, car vous ne le trouverez pas ici sous Width Si vous vous demandez comment j'ai créé cette ombre en forme de goutte, elle se trouve juste en dessous de l'affixe et vous pouvez passer à travers Vous l'avez probablement vu en mode vitesse, mais j'ai simplement augmenté l'opacité à 100, puis j'ai supprimé le flou à zéro, et vous vous retrouvez avec J'ai pris deux onglets, deux, puis je l'ai simplement colorié. Voilà. C'est le minimum et le maximum. Idéal pour les boutons, mais vous pouvez l'utiliser pour n'importe quelle mise en page automatique. 92. Comment assembler des objets de mise en page automatique dans Figma: Bonjour, tout le monde. Nous allons examiner ce que l' on appelle l'emballage à l'intérieur d'une sortie automatique. C'est vraiment facile à faire et très pratique. Si vous avez beaucoup d' éléments qui doivent simplement remplir l'espace prévu. Vous pouvez faire en sorte que le parent sorte automatiquement haut en bas et tout ce qu'il contient sera enveloppé. En utilisant les boutons ici, mais cela peut être des images, cela peut être ce que vous voulez. Passons à l'emballage. Pour commencer, j'ai créé juste une mise en page automatique contenant du texte, tout comme les boutons que nous avons créés nombreuses fois et j'en ai créé un tas. Je vais donc tous les sélectionner, les mettre dedans ou les déplacer, et il essaiera de deviner ce que vous voulez. Souvent, il devine l' horizontale ou la verticale. Celui-ci a été conçu pour essayer de les mettre dans une grille. Nous avons examiné les grilles tout à l'heure Nous pouvons prendre ces cadres et y aller, vous y allez, nous l'avons fait avec des images. Mais ce que nous voulons faire, c'est ne pas être dans un réseau. Je veux donc cliquer sur le cadre parent, et je veux passer à l'horizontale. Dans ce cas, il s'agissait par défaut de l'emballage. Parfois, ce n'est pas le cas et c'est ce que fait tout simplement. Quand j'en ai fait une démonstration il y a quelques secondes, c'est donc l' option d'encapsulation, cliquez dessus Il doit s'agir d'une sortie automatique, elle doit être horizontale et verticale, puis vous pouvez cliquer sur l'emballage. Ce que cela signifie maintenant, c'est que s'il y a de la place pour cela, il le fera, et s'il faut l'agrandir, il le fera également. Je vais passer la mienne à une hauteur automatique. Vous pouvez simplement double-cliquer sur le bas. En fait, je n'arrive pas à faire en sorte que le mien double-clique pour aller en bas. Je vais juste dire d' étreindre le contenu, et cela signifie simplement que s' il doit être redimensionné, il sera redistribué et prêt. C'est de l'emballage. Vous avez peut-être des images ici. Vous avez peut-être ces petites pilules comme celles-ci. Je les ai déjà appelés pastilles. C'est un mot terrible pour eux. Appelons-les des pilules. Oui, c'est l'emballage de l'intérieur de la sortie automatique à l'intérieur de Figma 93. Comment organiser des composants en groupes dans Figma: Bonjour à tous. Dans cette vidéo, je vais vous montrer comment organiser vos composants dans votre panneau Ressources. OK. Au moment où ils sont tous un peu barbouillés ici, et c'est exactement là où vous n'en avez que quelques-uns, mais quand vous en avez beaucoup, c'est génial de les mettre dans ces petits sous-dossiers ici, afin que je puisse dire, d'accord, tous mes boutons se cachent dans C'est vrai. Permettez-moi de vous montrer deux manières de procéder. Ils ont tous deux raison, vous constaterez que les deux sont utilisés dans la communauté, il est donc préférable de les connaître. » est en train de sauter. OK, j'ai donc deux fichiers qui ouvrent le fichier original que nous avons créé avec toutes nos conceptions mobiles et le document que nous utilisons pour notre bibliothèque principale, pour tous nos composants à utiliser sur d'autres projets. C'est celui sur lequel je vais travailler. À l'heure actuelle, il ne se passe pas grand-chose dans ce document. Il n'y a que quelques boutons ici. Commençons par le moyen le plus simple. Passons aux sections ci-dessous. Nous avons donc examiné certaines sections plus tôt, mais nous allons en montrer un autre pouvoir caché. OK, je vais donc passer à la section outil. Je vais dessiner une section autour de cela qui n'a pas fonctionné. Je vais dessiner une section autour de ces boutons. Je vais appeler cette section. N'utilisez pas l' outil de section pour double-cliquer dessus. Retournez à l'outil de déplacement, le Viki. Appelle un bouton. Ce qui est bien, c'est que tout ce qui se trouve à l'intérieur se trouve maintenant dans ce sous-groupe appelé boutons. Jetez un œil ici. Pas tant dans le fichier que dans mes couches, mais allez dans les ressources et vous pouvez voir le crédit dans ce fichier. Ici, il y a ces deux boutons. Ils ne font pas encore partie d'un groupe. Tu dois l' activer ensuite. Par défaut, il est désactivé. Vous pouvez accéder aux paramètres de la bibliothèque ici et demander : pouvez-vous également afficher les sous-dossiers Lorsque vous avez un très petit document, il est pratique de désactiver les sous-dossiers, car cela sert à rien. Nous avons ouvert deux boutons. Mais lorsque vous commencez à créer une structure plus complexe, et que cela s'intègre assez rapidement dans un design complexe, vous pouvez afficher les dossiers et vous pouvez voir que voici mes boutons Je peux cliquer à l'intérieur. Regarde, j'ai ces deux-là. Shift S est mon outil de section. Je peux le traîner. Je veux revenir à mon outil de déplacement, je veux appeler celui-ci mes icônes, et je vais y aller, aller sur ma page de composants et en extraire quelques icônes. Allons chercher ces gars. Vous allez être supprimé et vous allez aller ici, je vais m'assurer de mettre à jour la bibliothèque, la bibliothèque, de publier, de publier, vous pouvez le voir ici maintenant, j'ai une option de boutons pour mes actifs, mais j'ai aussi une option d'icônes. Je peux évidemment le désactiver à nouveau pour ne pas afficher les sous-dossiers et simplement les voir dans une longue liste Il en va de même pour les fichiers qui l'utilisent. Il y a un fichier techno de Limerick ici. Si j'ai un nouveau cadre ici, allons-y, découvrons-le. Je dois ajouter certains de mes actifs. Par défaut, il répertorie tout. Mais encore une fois, une fois que vous aurez commencé avoir des designs plus compliqués, vous pouvez afficher les sous-dossiers à avoir des designs plus compliqués, vous pouvez afficher les sous-dossiers pour faciliter J'ai besoin d'une icône, je peux aller dossier Cons et le faire glisser vers l'extérieur bien avec cette méthode, c'est qu'ici, si j'ai une icône que je ne veux pas voir ici et que je veux les boutons, regardez-la simplement glisser dessus. Maintenant, si je vais le réactiver, c'est OK, ce cœur se trouve maintenant dans le dossier des boutons. C'est donc un moyen facile de déplacer des objets. Permettez-moi de vous montrer le contraire, simplement parce que beaucoup de gens le font encore. Je vais prendre ça. C'est mon principal composant pour mes domaines. Je vais le supprimer . Je vais le mettre dans ma bibliothèque principale. Au lieu de le placer dans une section, vous pouvez simplement le nommer. Donnons donc à celui-ci un meilleur nom pour commencer. Ce sera mon champ de naissance. Ce que vous devez faire, c'est qu' au début du nom, vous pouvez taper dans le champ et simplement mettre une barre oblique Ford Il peut avoir des espaces, il n'en a pas besoin. J'aime les espaces. Cliquez dessus. Eh bien, j'y ai ajouté quelques éléments. Tu t'en vas. Ce que vous constaterez, c'est que si je vais dans mon panneau Ressources, vous pouvez voir que j'ai ce dossier de champs ici. Vous vous retrouvez au même endroit. La seule différence, c'est que c'est ainsi que nous devions procéder. Vous pouvez maintenant le faire avec des sections. Peu importe le chemin, mais vous tomberez sur les deux. C'est pourquoi je voulais vous montrer n'y a pas de bonne méthode pour que je trouve les sections plus faciles, car il est trouve les sections plus faciles évident que j' avais juste besoin de les faire glisser. Mais si j'en ai beaucoup, je dois les renommer. Je peux renommer en masse, alors prenons un exemple ici. Avec FK, créons un tas de Yep. Donne-lui de la couleur. N'importe quelle couleur. Transformons-les en plusieurs composants principaux. C'est un élément essentiel. Vous ne pouvez pas le faire avec des instances. Vous devez aller chercher le composant principal, et je peux maintenant renommer en bloc Je pourrais les ajouter individuellement, mais je peux utiliser ma commande ou mon contrôle R. Je peux dire que j' aimerais en renommer deux Je vais avoir un dossier appelé Squares dans lequel je vais mettre une barre oblique Ford, puis je vais utiliser le nom actuel Je vais renommer tous ces cadres, ces carrés, comme nous l'avons fait pour la date de naissance Mais j'espère que dans mon panneau Assets, j'ai maintenant un dossier Squeze comme vous montrer deux façons de faire les choses, mais vous tomberez sur les deux, et c'est pratique de savoir ce qui se passe Devez-vous les mettre en groupes ? Non, mais vous arrivez à un point où, en fait, vous avez beaucoup de ces différents composants, et vous devez les regrouper parce qu'il devient difficile de savoir où tout se trouve. Très bien, voici comment organiser vos composants en groupes dans votre panneau de ressources Les deux choses qui pourraient vous surprendre, c'est que si je prends et que je m'en vais, vous êtes le composant principal. Non, vous pouvez voir ici que ce n' est qu'un exemple. OK ? Donc, si je prends celui-ci et que je passe par ici, et que je forme un groupe en y allant, renommons la commande Appelons-le Ty parce que je n'ai plus de noms, Thingi parce que c'est une instance, vous pouvez le comparer au composant principal Accédez à mon dossier de ressources. Je n'ai pas de dossier This. L'autre chose qui vous dissuade, c'est que vous devez l'activer ici. Sinon, vous ne les verrez pas. Je vais juste être éparpillé. Une autre chose que je voulais aborder et vous montrer si vous placez sections à l'intérieur de sections, vous avez cette section appelée composants. Composants. Ce que vous découvrirez, c'est que vous en avez un seul composant, mais vous n'aurez pas ce sous-groupe d'icônes supplémentaire Ils ne fonctionnent tout simplement pas comme ça lorsque vous les nommez, alors c'est peut-être une autre chose que vous rencontrerez. Quel que soit le parent , ce sera le nom du groupe Vous ne pouvez donc pas avoir de sections et de sections latérales pour nommer ce groupe ici. C'est bon, c'est ça. Je vais l'annuler et je vous verrai dans la prochaine vidéo. 94. Projet de cours 20 - Carte de révision: Je sais que tu l'as demandé . C'est l'heure des projets de classe. Cela fait longtemps. Je veux que vous créiez une carte d'évaluation, similaire à celle que nous avons créée. Je veux que vous incluiez ces fonctionnalités ici, à l'outil Width superpose des étoiles, ignoriez l'objet de sortie automatique, le bouton xmax et les composants Laissez-moi vous montrer ce que je veux dire, quelque chose comme ça. Incluez donc l' outil Largeur quelque part. Je l'ai juste intégré à la sortie automatique en tant que ligne de démarcation que vous pourriez avoir comme image de fond façon dont tu le fais ne me dérange pas. Faites preuve de créativité. Il y a peut-être quelque chose de cool dans ce domaine ou ça dépend de vous. Je veux que vous ayez un classement par étoiles et je veux ils se chevauchent simplement parce que transforme le mien en composant , puis j'ajoute un tas d' instances à une mise en page automatique juste pour que je puisse également entrer ici et les désactiver si nécessaire pour différents classements et différentes lectures Mais je voulais juste les voir se chevaucher. Je veux en voir au moins un ignorer la sortie automatique. J'en ai un en haut ici et un ici. Je m'en fous de savoir lequel tu fais. Vous pouvez essayer celui qui est réactif, mais cela ne me dérange pas. Tant qu'il y en a un qui ignore la mise en page automatique, mais qu'il fait toujours partie de ce cadre, assurez-vous d'avoir un J'ai celui-ci ici, l'autre a un Min Animax et je dois juste m'assurer que le mien part de ce côté Ensuite, mon texte est écrit une ligne de telle sorte que lorsque je commence à le taper, il passe de ce côté. Cool. Assurez-vous également que vos actifs se trouvent dans des dossiers. ne me dérange pas qu'il se trouve dans le dossier actuel ou dans votre dossier principal, selon le temps que vous êtes prêt à mettre de l'ordre dans votre projet Je veux voir ça continuer. Il peut s'agir simplement de boutons et d'icônes. Je suis d'accord avec ça aussi. Lorsque vous avez terminé, normalement, partagez une capture d'écran de votre carte de révision. Essayez de prendre une photo où vous avez à la fois les groupes et la carte d' évaluation dedans. Fais quelque chose de mieux que le mien. Téléchargez-le dans des projets de classe et partagez-le en ligne. Voyons si nous pouvons mettre en pratique certaines des choses que nous avons apprises. Je te verrai une fois que tu auras terminé ton projet de cours. 95. Comment ajouter des conditions aux variables dans Figma: Bonjour, tout le monde. C'est un temps variable conditionnel. Nous avons créé des variables plus tôt, souvenez-vous que nous avons créé le bouton, lorsque nous appuyons sur souvenez-vous que nous avons créé le bouton, le signe plus, il augmentait et lorsque nous cliquions sur le signe moins, il descendait. Nous le ferons à nouveau pour récapituler, mais nous veillerons également à ce qu' il ne descende pas en dessous de zéro Il monte vers le haut, mais ne peut pas descendre vers le bas. C'est la condition. S'il est inférieur à zéro, ne continuez pas. Nous ajouterons également une autre condition où il est dit : Si vous obtenez jusqu'à dix, ne montez pas plus haut. Regarde ça. On les appelle des variables conditionnelles. Allons-y et partons. C'est vrai. Pour commencer, je viens de créer un tout nouveau fichier de design. Cela s'appelle Untitled, j'ai fait glisser mes boutons, et il y a un peu de texte au milieu pour les chiffres Il y a juste un nouveau document. Allons récapituler la façon dont nous avons créé les variables plus tôt car je dois récapituler parce que c'était il y a si longtemps, probablement vous Créons d'abord les variables. Ne sélectionnons rien. Va par ici. Des variables. Cliquons sur cette petite option. Créons-en une, et nous allons créer une variable numérique. Nous allons appeler cela un total, et nous allons définir la valeur à cinq juste pour savoir que nous l'avons bien appliquée. Appliquons donc cette variable au nombre et ici. Cliquez sur la case numérique et dans le design en haut, vous verrez ce bouton d'application de la variable. Cliquons dessus. Quelle variable voulons-nous appliquer ? Passons au total. Ils sont désormais connectés. Donc cinq, ce n' est pas ce que je veux. Je vais le remettre à zéro, mais nous savons que cela fonctionne. Fermons ça maintenant. Nous avons maintenant besoin de ces boutons pour modifier cette variable. Faisons le plus. Cliquons sur celui-ci, et montons ici, où est-il ? C'est un prototype. Les options 8 et 9 permettent de basculer entre le design et C'est le seul saut qui est un peu bizarre. Assurez-vous donc que vous êtes dans le prototype. Je vais ajouter de l'interaction à ce bouton. En un clin d'œil, ce que je voulais faire. Je ne veux pas accéder à une page. J'aimerais définir une variable. Quelle variable ? Totale. Je n'en ai qu'un. C'est écrire une expression. Lorsque vous cliquez sur ce bouton, j'aimerais prendre le total et j' aimerais y ajouter un J'en tape juste un sur mon clavier et cela devrait fonctionner. Je suis juste en train de cliquer sur Shift en arrière-plan, la barre d'espace Shift, et cela devrait fonctionner. Faisons de même pour Minus. Disons dans le cadre d'un prototype. Ajoutons de l'interaction. Au toucher, j'aimerais que cette chose définisse une variable. Quelle variable ? J'en ai déjà un ? J'aimerais qu'il s'exprime. C'est la seule chose que tu dois faire deux fois. Je cherche à soustraire. Vous devez dire qu'en fait, je veux que le total soit soustrait, et je veux qu'il soit soumis à un En arrière-plan, voyons si cela fonctionne. Déplacez la barre d'espace vers le haut, le haut, le haut, le bas, le bas. Mais ça descend en bas, papa. C'est là que les conditions sont utiles. Ce que je vais dire, c'est celui-ci. Tu peux le faire ici ou en bas. Je dois dire que je ne veux pas définir de variable. Je vais le remplacer par une condition. Maintenant, une condition est comme un organigramme. Vous pouvez y voir une petite icône. Un organigramme, oui, non, et vous allez dans des directions différentes. Il en va de même ici pour cette condition. Ce qu'il va dire, c'est que si c'est vrai, fais-le . Si ce n'est pas vrai, fais-le. Si c'est vrai, cliquons dessus si je veux écrire notre condition. Je vais dire si le total est inférieur à zéro, oh, s'il est supérieur à zéro. S'il est supérieur à zéro, j'aimerais qu'il soit réduit d'un parce que nous avons remplacé cette variable d'origine, qui avait complètement disparu. Nous allons donc dire que s' il est supérieur à zéro, j'aimerais qu'il soit défini comme variable. J'aimerais prendre le total, qui est notre objectif, et j'aimerais prendre le total et j' aimerais en retirer un. Nous avons donc fait la même chose auparavant, mais maintenant c'est dans cette déclaration où il est dit : «  Si le résultat est supérieur à zéro, fais ce truc ». Si ce n'est pas le cas, ne faites rien. S'il n'est pas supérieur à zéro, ne le réduisez pas à zéro. Essayons-le. Est-ce que ça marche ? Changez d'espace. OK, de haut en haut, bas en bas, de bas en bas, da, da. Arrête de fonctionner. Regardez-nous. Nous sommes des programmeurs informatiques. Si vous êtes un développeur en regardant ce film, beaucoup de développeurs développent leurs compétences en matière de figma et savent comment travaillent les designers Vous allez vous moquer de ma terminologie et de mon enthousiasme à ma terminologie et de mon enthousiasme faire fonctionner quelque chose d' aussi simple Comme je ne suis pas un très bon développeur ou un bon codeur, je suis très enthousiaste. Tu es peut-être comme moi. Faisons-en une autre, et nous en discutons simplement parce que je tiens à dire que cela ne descend pas en dessous de zéro, mais qu'il ne peut pas dépasser dix. Supposons que les gens ne puissent pas acheter plus de dix billets. Nous allons donc dire si nous allons entrer ici. OK ? Nous avons tout mis en place. Nous allons nous en débarrasser. Nous allons dire, en fait, je ne veux pas définir de variable, je vais définir une condition. J'aimerais que la condition soit définie à deux au total. Si le total est de quel montant ? Si le total est inférieur à dix, je veux que cela fonctionne. Ce que je veux faire pour travailler. Donc, si le total est inférieur à dix, je veux que tu le fasses. Je veux que vous définissiez la variable sur le total, qui est la cible, et je veux qu' un point soit ajouté au total. Je voudrais en ajouter un. C'est tout ce que nous avons fait lorsque nous avons commencé la vidéo. Mais maintenant, il est dans cet état. Il ne le fera que si le nombre est inférieur à dix. S'il est supérieur à dix, je veux que tu ne fasses rien, s'il te plaît. Je ne veux pas que tu travailles. Essayons-le. Allez, ça marche et ça reste à dix heures. Si vous n'êtes pas un codeur inconditionnel, jouer un peu et essayer de trouver un résultat inférieur à, inférieur ou supérieur à. Mais j'espère que cela vous a donné un bon aperçu des conditions, un moyen d'étendre les variables, en particulier les inconvénients C'est un excellent moyen d'étendre les variables et il y a 1 million d'autres choses que vous pouvez faire avec les variables, essentiellement du codage. Mais j'espère qu'ils vous donneront un bon aperçu de ce que font les gens, d'autres personnes auraient pu faire pour vous ou création de vos propres variables avec des conditions. Maintenant, je suis plutôt visuel. Je ne peux pas voir ce genre de choses et y aller, je sais que c'est ce qui se passe. Je dois y aller, j'ai une variable. Si c'est le total, puis je le pointe du doigt, il y a une variable que j'ai labourée jusqu'à zéro ici Si le total est inférieur à 1 et que je dois me débrouiller avec l'alligator, moins de dix, fais ce truc. C'est quoi ce truc ? Je veux trouver le total, puis prendre ce total et y ajouter plus un. Quoi qu'il en soit, j'espère que cela vous a été utile. J'aurais dû m' arrêter là, non ? Certaines personnes vont trouver cela facile. Les gens vont donc trouver cela difficile. Je suis au milieu. J'ai l'impression d'être un génie quand je le fais fonctionner, mais je ne le fais pas toujours du premier coup. Vous serez quelque part dans ce spectre. D'accord, ce sont des variables conditionnelles dans Figma. 96. Transformer notre variable booléenne en false dans Figma: Tout le monde. Dans cette vidéo, nous allons examiner une autre variable. Nous allons examiner ce que l' on appelle une variable d'investissement C'est un nom fantaisiste pour activer ou désactiver, vrai ou faux. Ce que nous allons faire, c'est cliquer sur Plus dessus et regarder l'icône de la carte actuellement définie sur false comme vide. Si je clique sur Plus. Regardez, cela montre que vous avez quelque chose dans votre panier. Pantalons de fantaisie. Allons-y et montrons comment faire en sorte qu'une variable d'investissement dans Bullion soit un mot difficile à dire et très étrange . Allons-y. C'est bon. Pour commencer, j'ai trouvé l'icône d'un panier et je l' ai mise en cercle. C'est ça. J'utilise celui d'iconify et j'ai juste saisi n'importe quel vieux panier d'achat et j'en ai simplement fait le vecteur avec l'ellipse Je me suis débarrassé du cadre dans lequel il se trouvait . C'est ce que nous faisons maintenant. Nous avons besoin d'un composant. Je vais donc les sélectionner tous les deux, les transformer en composant, option de commande K, contrôle OK. Donnons-lui un nom. Appelons cela mon panier et nous avons besoin de deux variantes. Ainsi, un booléen basculera entre deux. Elle doit être allumée ou désactivée. Vrai ou faux. Celui-ci, je vais t'en colorier huit. C'est bon. Eh bien, cela m'a pris plus de temps que prévu, mais nous avons deux variantes, pas des variables. Nous l'avons fait plus tôt. Nous avons un composant, il n'en existe que deux variantes. J'en ai un qui semble vide, et un qui semble plein. Nommons-les. Cliquons sur le premier ici. Nous devons les nommer correctement. On ne peut pas dire que celui-ci est vide. Tu dois dire que celui-ci est faux. Comme dans la section Puis-je épeler faux ? Voilà. Le panier est faux. Il n'est pas vide. Nous allons dire que celui-ci est vrai. Oh, l'orthographe est importante. Le booléen est vrai ou faux. Faisons-en glisser une instance, et c'est ce que nous allons activer Il nous faut maintenant créer une variable. N'oubliez pas que rien n'est sélectionné en mode conception, accédez aux variables. Nous en avons déjà un. Je vais en créer un autre. Ce sera le numéro un. En fait, ce ne sera pas le numéro un. Je vais en créer un autre appelé Boolean. Tu peux continuer à l'appeler Bullion. Vous devriez faire quelque chose comme un indicateur de panier. Vous verrez souvent ce que c'est un étui en forme de chameau. Le premier est en minuscules et ceux entre les deux en majuscules. Un indicateur de panier. C'est un étui Camel Je n'utilise jamais d'étui Camel parce que je pourrais simplement faire du cart. Je fais des choses comme «   Est-ce que le panier est plein ». Si vous voulez être meilleur, les gens utilisent des soulignements. Je ne fais rien de tout ça. Parce que tu n'es pas mon patron et que tu n'as pas besoin de Figma Si vous le codez correctement, vous devrez utiliser des traits de soulignement, des traits d' union ou un étui union ou Quoi qu'il en soit, nous avons donc créé cette variable. Cela ne s'applique à rien, alors appliquons-le à quelque chose. Vous allez donc être cette variable. Où le faites-vous ? Par ici ? C'est un peu caché parce que c'est là. L'instance du panier. Voilà ma petite bascule, qui est cool. Nous les avons déjà fait. Member, vrai ou faux, vous donne cette petite option, et ici vous pouvez appliquer cette variable Je tiens à dire que le panier est plein tel qu'il est appliqué à cela. Pour le contrôler. Qu'est-ce que nous utilisons pour le faire basculer Nous allons utiliser ce bouton. Nous allons dire que nous allons ouvrir nos variables, dont nous nous souvenons qu'elles sont en mode prototype. J'en ai déjà un. Je clique dessus et je remonte un peu. Je vais en ajouter un deuxième. C'est une autre condition. Parce que ce que je vais dire, c'est que si le total est supérieur à zéro, je veux que cela fasse quelque chose. Qu'est-ce que je veux faire ? Je veux faire cette action. Cette action ici va consister à définir cette variable, quelle variable, la variable panier complet, qui est ce truc ici, je veux qu'elle la définisse sur true. Merci beaucoup. Essayez-le. Regarde si ça marche. Shift Plus. Si cette valeur est supérieure à zéro, cela devrait indiquer que cela est vrai. Et c'est vrai. Oh, je suis tellement contente de moi, d'accord ? Mais ce que je vais faire, c'est le laisser là quand il sera réduit à zéro, il ne fonctionnera pas. Je vais te demander de le faire. Ce que je vais faire, c'est vous présenter comme un petit mini-projet. Ce ne sera pas un projet de classe complète comme nous l'avons fait. Je veux juste que tu ailles voir si tu peux le faire devenir faux quand il passe en dessous de zéro, en fait, à zéro ou en dessous. Vas-y toi-même, vois si tu peux le faire. Dites-moi dans les commentaires si vous l'avez fait. Même si tu ne l'as pas fait, dis-moi si c' est trop difficile, je suis juste intéressée. Je vais vous montrer dans la prochaine vidéo comment je l'ai fait pour que vous puissiez comparer les notes. Si vous l'avez fait, sautez partout. Tu es un hacker informatique. Si vous êtes déjà développeur, vous pouvez voir à quel point c'est facile. Mais si vous êtes comme moi et que vous êtes vraiment enthousiasmé par le codage, sautez dans le vif du sujet. Dites-moi dans les commentaires comment vous trouvez les variables. Essayez-le et je vous verrai dans la prochaine vidéo. 97. Variable booléenne - Terminé: D'accord. Dans la dernière vidéo, nous avons pu montrer que le panier était plein, mais nous n'avons pas pu le désactiver. Mais dans cette vidéo, je vais vous montrer comment je l'ai fait pour l'éteindre. Juste au cas où vous ne le pourriez pas, juste au cas où vous voudriez comparer des notes. Si tu l'as fait fonctionner. Très bien, allons-y. Très bien, j'espère que tout s'est bien passé dans la dernière vidéo. Nous allons le faire ensemble au cas où vous ne l'auriez pas reçu ou si vous souhaitez simplement comparer vos notes. OK, donc nous allons le faire avec ce point négatif. Nous voulons le désactiver. Nous voulons repartir à vide. Nous allons donc dire : ajoutons une autre condition en le faisant ici. OK, nous allons dire, je veux une condition qui dise : Est-ce que notre état va être le cas ? Si le total est égal à zéro, je veux que tu fasses quelque chose. Zero, je veux que tu fasses cette action. Quelle action ? Je vais dire la variable ? Quel type de variable je souhaite voir ? Le panier est-il plein ? Il n'est pas plein. C'est faux. Essayons-le. Cela a-t-il fonctionné ? Branchez, haut, haut, bas. Oui, nous l'avons fait. Je suis sûr que vous l'avez fait également. Tu te sens bien ? Je me sens bien. Quoi qu'il en soit, c'était faisable et vous devez regarder ce que vous fabriquez maintenant Vous regardez ça et vous dites : « Eh bien, regardez ce que j'ai fait. C'est moi qui l'ai fait. Ce n'est pas grand-chose, mais ces petites interactions peuvent vraiment faire fonctionner votre prototype lorsque vous essayez de vendre des idées à des clients et de montrer au développeur comment vous imaginez ce type de prototype fonctionner avant qu' il ne le construise. D'accord, je me sens bien. J'espère que vous êtes fier d'avoir défini certaines variables avec les conditions et les lingots Regardez-nous. Je vous verrai dans la prochaine vidéo. 98. Réaliser un pop-up en superposition dans le panneau Actions variables dans Figma ma: Bonjour. Nous allons envisager d'ouvrir un modèle lorsque nous cliquons sur le signe plus, : « Écoutez, nous l'avons ajouté au panier et au bout d'un certain temps, il disparaît. Ce n'est pas vraiment une variable, même si nous sommes dans la section des variables, mais je voulais vous montrer comment je me suis embrouillée et je sais que cela a du sens dans cette partie de la vidéo. Allons-y et créons une variable non dans la classe des variables. Tout d'abord, nous allons passer en mode prototype pour que tout cela fonctionne. Certaines variables sont appliquées à ces boutons. Il se passe plein de choses. Ce que vous pouvez faire, c'est lorsque j'ai examiné cela pour la première fois, quand ils l'ont introduit, je me suis dit : « A », nous pouvons ajouter une variable qui fait des superpositions Pas vraiment. Nous ne faisons rien de variable. C'est ce que nous faisons, nous travaillons avec l'on tap. Ce que nous ajoutons, ce n'est pas le cas de ces variables. Nous avons créé des fenêtres contextuelles dans le cours sur les bases. Ce que nous allons faire, c'est dire, j'aimerais qu'une fois que ce soit sur écoute, oubliez tout ça. Je voulais juste faire quelque chose séparément. Je veux faire une action. Je ne veux pas définir de variable. Je veux juste ouvrir une superposition. Ici, nous ne faisons pas de variables, même si nous avons l'impression de le faire parce que nous sommes dans même fenêtre pour les déplacer vers le haut. Je vais dire que lorsque vous appuyez dessus, j'aimerais ouvrir une superposition, laquelle superposition, je n'en ai qu' J'en ai fait le bouton de réussite . C'est par ici, je l'ai fait. Je lui ai donné un nom, et qu' est-ce que je veux en faire ? Je veux qu'il apparaisse en position. Je vais aller le chercher, pas l'envoyer. Je veux le mettre manuellement quelque part. Je dois dire que c'est toujours un obstacle là-bas. Je veux qu'il apparaisse en bas, achetez mon pied de page. Il apparaîtra proche lorsque vous cliquerez à l'extérieur. Quelle animation, je vais la faire fondre après le dépliage Ici, il est apparu entre mes deux variables distinctes. Ne t'inquiète pas pour ça. Tu peux les faire glisser. Tu ne peux pas les faire glisser. Avant, vous pouviez les faire glisser, et vous pouviez également les fermer, pour les voir un peu plus facilement, c'est bon. Deux variables s'appliquent à ce bouton, mais séparément, nous venons d'ouvrir cette superposition pour essayer Lorsque vous cliquez sur ce bouton, essayons-le. Je devrais faire le numéro à la fois, cela devrait changer le panier et je devrais avoir ce petit indicateur de succès ici, ajouté au panier. Lorsque je clique sur l' arrière-plan, il se dissout. Un peu plus chic et faisons en sorte que ce bouton se dissolve. Nous n'avons donc pas à cliquer sur l'arrière-plan, il se dissout au bout d'un moment. Ce que nous pouvons faire ici, c'est cliquer sur notre bouton et ajouter une interaction. Donc un prototype. Ajoutons une interaction et disons, après un délai de combien de temps ? Je ne sais pas, 1,5 seconde. J'aimerais qu'il ferme la superposition. Essayons-le. Ajoutez une barre d'espace, puis attendez, attendez, attendez, attendez, attendez une minute et demie Il s'en va tout seul. Évidemment, prenez l' habitude d'utiliser vous-même l'option « Supprimer du panier ». Vous avez donc besoin d'un autre bouton et voyez si vous pouvez faire fonctionner cette logique ici. Je ne le ferai pas moi-même dans la prochaine vidéo. J'ai l'impression que tu l'as . Essayez-le. Faites-le moi savoir dans les commentaires. Tu l'as reçu ? Si vous rencontrez des problèmes, laissez-les dans les commentaires et moi ou l'un des experts viendrons vous aider. Je suppose que je veux l'ajouter dans cette section sur les variables, même si nous ne créons pas de variable c'est parce que lorsque j'ai vu cette fonctionnalité pour la première fois, je me suis demandé : « Est-ce que nous créons une variable ? Nous ne le sommes pas. Nous ajoutons simplement une autre action à notre robinet. Ce n'est pas une variable, mais tout est mélangé. J'ai trouvé une solution, tout avait un peu plus de sens. D'accord, j'espère que cela a du sens pour toi. Je vous verrai dans la prochaine vidéo. 99. Comment modifier l'espacement avec les Variables numériques dans Figma ma: I Très bien, tout le monde, nous allons examiner une autre variable En gros, nous allons utiliser des variables pour l'espacement. Regarde ça. Je dois dire que vous n'êtes pas à l'aise, que vous allez être compacte et que cela réduit l'espace autour de vous , confortable et Vous pouvez voir que nous pouvons également utiliser des variables pour l'espacement. Nous l'avons fait plus tôt lorsque nous avons créé le mode sombre. Vous pouvez créer ces designs vraiment convaincants designs différents avec de nombreuses modifications apportées d'une simple pression sur un interrupteur Dans cette vidéo, je vais me perdre un peu. Je vais l'inclure dans le cours car vous allez également vous perdre. quoi je veux me concentrer dans cette vidéo, c'est simplement jouer avec un espacement. Ce n'est pas si difficile. D'une manière ou d'une autre , je complique les choses dans cette vidéo en me cassant, perdant, en réparant les choses ensemble et nous en serons tous plus sages Allons-y. Très bien, pour commencer. Je voulais juste vous montrer ce que nous avons fait plus tôt dans le cours lorsque nous avons créé le mode clair et le mode sombre. Souvenez-vous que nous l'avons créé et que nous avons pu déterminer où se trouvent les éléments colorimétriques, du mode clair au mode sombre. C'est très similaire à ça. Il n'est pas nécessaire d'appliquer le mode clair et le mode sombre, mais je vais revenir au fichier que j'ai créé dans notre document principal et y faire mon espacement Pour commencer, j'ai juste un tas de zones de texte et une petite image qui traînent. Ce que je veux faire, c'est en faire une mise en page automatique. Je veux les transformer en mise en page automatique, Shift A, puis je combine les deux, la sortie automatique et cette image en une journée de sortie automatique Il y a un nid d'Auto ici parce que je veux jouer avec l'espace entre les deux . Ce sont les espacements auxquels je veux appliquer des variables. Ne sélectionnons rien. Passons aux variables. Nous en avons déjà un. Peut-être pas, mais j'en ai un qui s' appelle Color Stuff. Créons-en un nouveau. Je vais dire : faisons un recouvrement de crédits. Je vais appeler ça , pas collection. Je vais l'appeler espacement. OK. Et ici, je vais créer ma première variable. Ce sera une variable numérique, et nous avons deux choses. Ici, lorsque nous parlons d'espacement, nous n' souvent pas de chiffres, nous utilisons des mots comme les mots Tissuet Nous utilisons des petites, moyennes, ce genre de choses. Je vais commencer par Medium. Vous pourriez écrire le mot « medium » dans son intégralité. Cela n'a pas d'importance. C'est très courant sur le web d'utiliser MD pour ma taille moyenne, je veux avoir environ 16 ans. Ce n'est ni trop grand, ni trop petit. C'est moyen. Ce que je veux faire, c'est deux modes. Ce premier mode sera appelé compact. Petite remarque ici. Si vous entendez beaucoup de bruissements et d'objets qui claquent, j'ai deux nouveaux chatons qui attaquent tout au bureau. Ils doivent être là parce que je m'occupe Ignorez le bruissement. Il s'avère que je suis un amateur de chats. Nous sommes compacts et il serait courant d'avoir un autre mode appelé confortable. Nous dirons simplement que c'est confortable. Bah, c'est plus court. Vous pourriez l'appeler mobile et ordinateur de bureau. Ordinateur de bureau, vous avez plus d'espace, vous pouvez donc agrandir légèrement le support lorsque vous êtes sur un bureau. Tu peux le renommer Il est très courant d'avoir un appareil compact et confortable ainsi que pour l'espacement. Vous l'avez peut-être rencontré lors de vos voyages. taille moyenne sur un petit appareil, ou un appareil compact, ce sera 16, mais nous avons plus d'espace, taille moyenne sera en fait un peu plus grande. Essayons-le et appliquons-le. Nous créditerons nos variables. Allons-y et appliquons-le. Nous allons le faire pour ce qui est de l'espacement ici. Cet espacement entre ce titre et le texte, je veux qu'il soit moyen Vous ne pouvez pas l'utiliser pour le moment pour appliquer la variable. Tu dois faire exactement la même icône ici. L'écart est le même que l'écart là-bas. Mais dans celui-ci, pour obtenir le menu déroulant, nous pouvons dire que j'aimerais appliquer une variable, à laquelle j'aimerais appliquer mon espacement de milieu Je veux qu'ils aient aussi un espacement moyen entre Je veux que tu n'aies pas 18 ans, je veux que tu sois une variable ou un médium. Les deux sont distants de 16 pixels. Ce qui est cool, c'est que je n'en ai pas encore saisi 16. J'ai tapé medium. Cela signifie que je peux dire à ce parent ici qu'il utilise par défaut la première de vos variables Sa valeur par défaut est 16 car c'est le premier de la liste. Mais ce que je peux dire, c'est que ce truc était là, nous avions le mode clair et le mode sombre, vous n'en avez peut-être pas. Nous pouvons en ajouter un autre pour dire : je veux que l'espacement soit compact, ce qui ne changera rien car c'est la valeur par défaut car c'est le premier, il est sur Auto Je vais le dire trop confortable. Regarde ça. Tout change. Tout change. Nous pouvons également passer du mode léger au mode compact. Allez. Oh, j'adore combiner ces choses. Passons donc en revue un peu plus. Je vais revenir en mode sombre. Je vais revenir au compact. C'est une bonne chose. Renseignez certaines des autres variables. C'est plus ou moins pareil. Je veux juste te montrer. Vous devriez parcourir et créer toutes vos différentes variables de couleur, désolé, toutes vos variables numériques. Tu devrais faire un petit OK, tu devrais passer par là et le rendre encore plus petit. Il y en a évidemment de grands, très grands. Ce sont des tailles normales que vous utilisez. Vous pouvez évidemment créer ce que vous voulez. Donc, sur un petit appareil, j'aimerais que ce soit six. Désolé, ce n'est pas un petit appareil. Sur un appareil compact, j'aimerais que le petit espacement soit de huit et le confortable de 16, ce qui augmente légèrement le petit Très petit, il n'en reste que quatre. Et chaque fois que j'utilise un espacement très petit, d'accord ? Quand c'est confortable, ça passe à huit. Tu devrais remplir les autres. Je ne vais pas le faire. Ce qui est cool, c' est que je n'ai appliqué que du médium partout, et cet écart est trop important. OK ? Donc, ce que je veux dire, c'est que lorsque j'ai affaire à ça, oui, la taille moyenne est une bonne taille pour cela La taille entre les deux, puis-je cliquer dessus ? Je ne peux pas. Je vais cliquer sur la case réservée aux parents. Double-cliquez dessus. Nous y voilà. Je veux qu'il n'en soit pas 16. Tu vois ce qui se passe ? C'est dans une boîte bizarre. Cela signifie qu'une variable lui indique en quelque sorte ce qu'il doit faire. Ce n'est pas 16, c'est en fait moyen, soit 16. Oh, mec, je confond tout le monde. Va changer ça. Disons que je veux appliquer la variable à une valeur non moyenne, je veux qu'elle soit très petite. Dans le mode compact, nous avons décidé que le très petit est quatre, mais que dans le mode confortable, c'est huit. En commençant par quatre, comme je l'aime. Mais si je dis qu'en fait, vous êtes tous à l'aise maintenant, cette petite taille est juste un peu plus grande. Tu comprends l'idée ? Cela signifie que si je les supprime je passe à celui-ci et que j'applique ma variable d' accord, je suis de retour. Tu m'as vue m'y perdre . Parce que je me suis dit : « Très bien. Parce que j'allais juste vous montrer que nous avions supprimé le texte, nous allons dire, d'accord, nous allons monter ici, et nous allons postuler Espacement. Il n'est pas ici. J'ai dit : « J'ai supprimé des choses, j'ai changé des choses. J'ai même redémarré Fgment et je me suis dit : « Peut-être, c'est tout. Il s'avère que cela ne s'appliquera pas s'il n'y a rien dedans avec l'espacement appliqué J'ai donc appliqué un très petit moyen. Donc ici, comme cela ne figure pas sur ce document, je ne peux pas appliquer mes ensembles de variables. Parce que c'est sur des matériaux de bonne couleur. Mais si je t'attrape, duplique-les. Je dis que ce parent contient maintenant de l'espacement parce qu'il n' en Je n'aime pas ça. Mais maintenant tu sais, nous le savons tous les deux. Je vais ajouter de l' espacement, et je vais dire que c' est réglé pour être confortable Bien sûr, nous pouvons dire que je veux aussi désactiver mon mode clair et mon mode sombre , pensant que c'était le problème. Je peux le faire passer du mode sombre et je veux qu'il soit compact. Regardez-nous, en utilisant des variables pour l'espacement. C'était une bonne vidéo ? Dois-je réenregistrer celui-ci ? Je ne sais pas J'aime le fait que nous nous soyons perdus et que nous l'ayons découvert ensemble. Je pense que c'est important. Je tiens à vous montrer une dernière chose, c' est que nous avons cette mise en page automatique ici. Changeons la couleur d'arrière-plan car je veux vous montrer comment les rembourrages s'appliquent en termes de variable C'est un peu différent. Donnons-lui une couleur de remplissage juste pour que nous puissions voir ce qui se passe. Pas de cette couleur. N'importe quelle couleur verte. Ça va être une bonne chose. C'est donc ma sortie automatique. Je veux l'entourer d'un peu de rembourrage Je vais dire, voyez-vous ici, que je peux taper 16. Oups. Il n'y a pas de liste déroulante comme celle-ci pour indiquer appliquer une variable. Vous le faites légèrement différemment, et c'est ce que je voulais vous montrer. Tu peux y voir ? C'est juste la même petite icône variable que nous avons vue un peu partout. R, et nous pouvons faire la même chose. Appliquer le milieu, soit 16. R, celui-ci est de taille moyenne , il a 16 ans, et il va fonctionner. Disons que cela a l' espacement de compact. C'est la valeur par défaut. Passons au confort, et le rembourrage s'agrandit Il y a un certain nombre de problèmes là-dedans . Rien à voir avec les variables. Nous allons régler ce problème maintenant. Mais je suppose que je voulais juste récapituler que nous pouvons utiliser l'espacement Nous avons créé des variables pour l'espacement. Nous les avons nommés et nous avions deux modes différents entre lesquels nous pouvions basculer. Ce que nous faisions auparavant, c' est avec la couleur avec deux modes différents, le mode clair et le mode sombre. Nous y sommes allés puis nous l'avons appliqué. Pour la couleur, c'était avec la couleur de remplissage. Débarrasse-toi de ça. Nous pouvons dire remplir la couleur avec Oh, non, et ici je veux la remplir avec cette variable d'interface que nous avons créée. Alors que lorsque nous faisons de l'espacement, nous trouvons l'espacement que nous voulons modifier. Nous trouverons au moins la boîte, le parent avec lequel nous voulons jouer, soit vous le faites dans le menu déroulant pour certains d'entre eux, soit vous avez cette petite icône variable dessus. C'est bon, c'est ça. Je veux vous laisser là parce que l'espacement, vous qui pouvez décider de quel espacement il s'agit et quelles sont les différentes tailles confortables et compactes Vous remarquez également que cela n'a pas fonctionné. Allons-y et réparons ça maintenant. Quelque chose de complètement distinct. Faisons une pause, respirons profondément. y a quelque chose qui cloche là-dedans. Je sais ce que c'est. Ma sortie automatique est réglée sur le haut et sur rien d'autre. Je pense que oui, pour la gauche. Ce que nous allons faire, c'est dire que les contraintes vont disparaître. Revenons au mode compact. Asseyons-nous. Mettons-le au milieu de telle sorte que, lorsqu'il sera confortable, il se replie sur lui-même et ne saute pas simplement vers la droite En haut et à gauche, ce n'est pas ce que nous voulons. Nous voulons aller ici et dire gauche et droite, haut et bas. Nous l'avons déjà fait. Les contraintes. Essayons-le. Ça ne marchera probablement toujours pas. Passons en mode confortable. La boîte ne s'est pas agrandie, l'espacement a changé, mais elle va se coincer un peu sur les côtés Qu'est-ce qui ne va pas avec eux ? Revenez au format compact. C'est cette zone de texte ici. Eh bien, en fait, la sortie automatique qui se trouve sur le côté droit ici est réglée sur une largeur fixe. C'est donc une largeur fixe de 230. Ainsi, lorsque nous ajoutons du rembourrage, il ne sait pas où aller. Nous disons de remplir le contenant dans lequel vous vous trouvez. Génial. Ça va marcher. Allons-y ici. C vous pouvez voir que cela a fonctionné sur toute la largeur. Remplissez le contenant dans lequel il se trouve, appuyez légèrement vers le bas. Annulez, rétablissez, mais cela n'a pas fait le fond. En gros, c'est pareil, ça va arriver ici. Trouvons que sa hauteur est réglée sur un câlin. C'est une bonne chose. Il y a cette zone de texte à l'intérieur Parfois, c'est le parent à part entière. Parfois, c'est la sortie de commande qui se trouve à l'intérieur ou à l'extérieur, et parfois c'est cette zone de texte Cette zone de texte a une largeur de remplissage, c'est très bien. summum de l'étreinte. D' accord, donc ce n'est pas lui. Prenons l' Aout dans lequel il se trouve, et il a plein de câlins. Demandons-lui de remplir le contenant, et essayons-le. Vous êtes réglé sur confortable. Cela ne fonctionnait toujours pas. Qu'est-ce que je fais mal ? Tu fais une pause et tu vois ce que je fais mal. Oh, c'est quelque chose. Oh, c'est le parent de tout. C'est ce type, regarde, sa taille est fixe. Ah, les joies de la figma, mais nous savons comment y remédier. Nous ne pouvons pas nous frayer un chemin. Est-ce que c'est ça ? Est-ce que c'est ça ? OK ? Eh bien, j'espère que c'est ça. Passons au contenu des câlins. Et maintenant allons-y. Ouaip. Nous sommes en train de le faire. Confortable et compact. Et tout se redimensionne bien. Regardez-nous. Nous l'avons fait. Je vais faire comme si je n' étais pas perdu, mais totalement perdu. Lorsque nous commençons à combiner de nombreuses choses différentes, variables et des mises en page de commande, puis des espacements variables, cela peut devenir un peu écrasant, ne vous inquiétez pas Ce sont les chats. Ils sont assez distrayants. Frayez-vous un chemin. Est-ce que c'est ça ? Est-ce que c'est ça ? Ce n'est peut-être pas ça. Faites beaucoup de tests, vous y arriverez et vous vous améliorerez chez Figma Tout comme moi et ne pas me perdre. Tout ça, c'est tout. Nous avons fait de l'espacement pour les variables Je vous verrai dans la prochaine vidéo. 100. Rendre vos créations accessibles : un guide de plugin d'accessibilité dans Figma ma: Bonjour à tous. Cette vidéo sera entièrement consacrée à l'accessibilité. En gros, nous nous assurons que nos designs peuvent être utilisés pour les personnes malvoyantes, peut-être daltoniennes. Ici, nous allons nous concentrer sur quelques domaines clés. Nous allons examiner la police, sa taille, son poids et sa couleur. Quel est le contraste entre la police et l'arrière-plan ? Nous examinerons également les points de contact. Est-il facile de cliquer sur les boutons ? À quelle distance sont-ils ? Tout se résume à ce que l' on appelle l'accessibilité. Très souvent, ce sont des choses faciles à mettre en œuvre, et une fois que vous en avez fait quelques-unes, vous pouvez les faire naturellement fur et à mesure que vous parcourez les plans de construction. Nous allons les examiner maintenant, à la fois les modèles intégrés Figma et certains plug-ins Soyons un peu perplexes, car je ne me sens pas hautement qualifiée pour enseigner cette partie, mais je le fais, nous devons le faire Je vais vous faire part des connaissances que j'ai acquises jusqu'à présent et vous donner l'idée d'aller voir plus loin. Allons-y. C'est bon. Certaines pièces sont intégrées à Figma et d'autres pour lesquelles nous utiliserons un plug-in Regardons les éléments intégrés à Figman, examinons les contrastes de couleurs pour commencer Choisissons-en un simple, et choisissons l'un de nos titres. Choisissons celui-ci ici. Alors ici, peut-on le lire en arrière-plan ? Oui, je dois dire que nous pouvons vérifier, cependant, c'est sélectionné ici, nous pouvons passer à notre couleur, notre couleur complète pour le texte, et nous allons passer à la personnalisation. Nous n'allons pas détruire la bibliothèque, nous allons juste vérifier. Est-ce que cela passe les rapports de contraste, ce sont ces options ici. Vous pouvez l'activer ou le désactiver en cliquant sur ce bouton. En gros, nous cherchons un ratio. En gros, il va examiner la différence entre le premier plan et l'arrière-plan Dans ce cas, c'est la couleur de la police avec l'arrière-plan, j'ai un gris cassé. Celui-ci passe ici. Comment ça passe ? Permettez-moi de revenir à la coutume, assurez-vous qu'elle est activée. Je peux le voir là-bas. Il y a une coche à côté de l'AA. AA est le niveau de base par défaut. Vous pouvez l'augmenter jusqu'à, disons, le AA, les filles les plus hautes. Je regarde un contraste vraiment élevé. Il passe également celui-ci, ce qui est formidable. J'ai conçu pour celui-ci ici. Il recherche un niveau de base de trois contre un. Vous pouvez donc voir ici que c'est six contre un, c'est très élevé. Si je choisissais une police différente comme celle-ci, c'est un pour un ou 1,3 pour un. Ou vous pourriez arriver à un endroit où j' en suis proche, mais vous êtes toujours en train d'échouer. cool, cependant, c' est de dire que vous avez une police ici et que ce n'est pas la bonne couleur. Vous pouvez cliquer dessus . Vous voyez qu'il va sauter d'ici et voir ce groupe ? Tout ce qui est ci-dessous est bon. Vous pouvez choisir n'importe laquelle de vos couleurs tant qu'elle se trouve en dessous de cette courbe. Cela dépend vraiment de son origine. Reprenons le même titre, déplaçons-le ici. C'est dans le badland Il ne peut pas être sombre car les arrière-plans sont sombres. Encore une fois, le rapport de contraste ici est de 1,5 pour un, il doit être de trois pour un ou plus. Encore une fois, je peux cliquer dessus . Cela le soulève. Je peux être n'importe où dans cette zone pour réussir le test. J'adore la façon dont Figment a mis cela en œuvre. C'est super facile. Tu l'as remis en place. Examinons quelques autres options concernant des sujets qui m'inquiètent. Je crains que cela ne fonctionne pas. J'ai cliqué sur mon bouton. Je vais aller ici. Je vais regarder l'accident vasculaire cérébral. Regardez donc le trait et vous verrez ici qu'il est juste à côté. Donc ça ne marchera pas. Je vais cliquer dessus, le faire défiler vers le bas et constater que tout va bien. Ce que je pourrais aussi faire, c'est qu'au lieu d'ajuster la police ou la couleur, je pourrais aller ici et choisir, j'ai quelques couleurs de bibliothèque. Membre, nous en avons fait 500. Eh bien, 500 fonctionnent. Faisons un chèque. Personnalisé. S'il n'apparaît pas, vous devez parfois cliquer sur la bonne chose. Je vais cliquer sur mon trait ici, puis passer à la personnalisation. J'y suis passé aux couleurs sélectionnées. J'ai assisté à l'accident vasculaire cérébral proprement dit cette fois et ça passe. Génial. Je vais juste utiliser le 500 au lieu de la couleur aléatoire que j'utilisais là-bas. Pareil, ça ne va pas passer. Au lieu de simplement utiliser cette petite option ici, je vais dire : allez dans je vais dire : mes bibliothèques et je vais utiliser le 500 alors que nous devrions être en dessous de Phil, assurez-vous que c'est activé. Nous ne sommes pas en train de réussir A. Pourquoi ça ne passe pas, même si c'est le cas de l'accident vasculaire cérébral ? Voilà à quoi nous ressemblons. Passons à la personnalisation. Ce que cela va faire, c'est que je vais sélectionner ces petites options ici. Cela me montre que ce n'est qu'un texte normal. À cette taille et à ce poids, ça ne passe pas. Le texte normal est différent du texte volumineux. Nous l'avons fait plus tôt, nous avons choisi la même couleur, mais comme le texte est volumineux, c'est bon. Quand il s'agit d'un texte normal, ou d'un petit texte, c'est-à-dire 16, il le sait. En fait, le rapport de contraste doit être plus élevé. Nous regardons. Il dit que cela doit être le cas, qu'est-ce que cela doit être ? En solo, il faut que ce soit 4,5 contre un. Parfois, vous pouvez le contourner en utilisant une police plus lourde. Nous ne pouvons pas le faire car nous en sommes déjà à l'audace. Pour atteindre ma note AA, je vais la remplacer par le 700 de mon vert. Nous y voilà. J'espère que maintenant, sous forme de texte normal, voilà. C'est parfait. Jetons un coup d'œil à quelques autres options. Jetez un coup d'œil aux mauvaises. Je l'ai fait dans le cadre d'un projet que j'ai réalisé tout à l'heure, et ce que vous trouverez , c'est quoi ce texte ? C'est 18, et ça en est 14. Il existe quelques règles de base en matière de texte et d'où viennent-elles ? C'est un site moche. Il provient du site w3.org et s'appelle le WCAG Pour le moment, 2.2 est l'actuel. Ils sont en train de rédiger le troisième. Jetez-y un œil quand vous y arriverez. Ce que je fais quand j'ai besoin de trouver cette page parce qu'elle est très difficile à trouver, c'est simplement de taper WIAG et y entrer une référence rapide pour accéder à la dernière Ensuite, vous pourrez entrer un peu plus dans les détails. Ce que je finis par faire quand je viens sur ces sites, c'est que je suis tellement bouleversante. Si je passe au contraste et que je recherche simplement en bas de la page, vous pouvez voir ici que vous pouvez afficher la description complète. Vous pouvez dire qu'un texte volumineux doit être de type 3.1 et qu'il doit être de type logo. Regarde ça. Aucune exigence de colocandra n' Les logos bénéficient d'une exemption, d'un texte accessoire. Ce serait des choses comme ça , donc je vais vous montrer un texte accessoire Avons-nous un texto accessoire ? Euh, ce texto là, un texto accessoire. Ce n'est qu'un graphique. Il n'est pas utilisé pour lire. C'est juste une sorte de visuel, c'est un graphique. C'est fortuit. Un autre texto accessoire ? La vie de carlin ne serait qu'un texte accessoire. Les autres, que GD ne serait qu'accessoire. Jetons un coup d'œil à ça. Cela pourrait être intéressant. C'est donc dans un contexte assez mitigé. Alors, est-ce que ça panique ou est-ce que ça marche ? C'est vraiment grand. Je pense que cela fonctionne. Jetons un coup d'œil, remplissons-le sur mesure. Comme il a un arrière-plan d'image, cela ne fonctionnera pas. Donc, ce que vous pourriez faire, c'est choisir l' une des couleurs principales, et donc ce que je fais, c'est vous , vous déposez un outil, vous le prenez et le testez de cette façon. Nous devrions alors être en mesure de mieux savoir si c'est adopté, très bien. Je dois utiliser mon cerveau, je ne sais pas, pour ça et je pense que ça va passer. Parfait. Alors jetez un œil à ce bouton ici. Rick, et il ne va pas réussir. Allons y jeter un œil. Cela ne fonctionnera pas dans le contexte. Il déteste ça, 2.8. Le problème, c'est que vous pouvez le voir ici, il le veut ici. Je voulais être noir. Non, je voulais être légère. Si vous voulez que cela se produise, vous devez ensuite jouer avec un arrière-plan séparément et dire, en fait, je vais utiliser ma couleur de 700 pour cela. Je vais maintenant vérifier le texte et voir s'il fonctionne. Je pense que nous sommes décédés maintenant. Oh, tu vois cette petite lacune. C'est la toute petite zone avec laquelle vous pouvez jouer, et elle fonctionne. Ainsi, lorsqu'il s'agit de contraste, c'est différent lorsqu'il s'agit d'un graphique ou d'un texte. Le rapport de contraste doit être plus élevé. Jetons un coup d'œil à un plug-in, car les éléments intégrés à Figma sont bons Mais jetons un coup d'œil à celui-ci. Il existe donc quelques excellents plugins. Si vous accédez à vos actions, aux plugins et que vous tapez accessibilité, il y en a tellement. Celles que j'utilise le plus sont celles qui sont vives et contrastées. Utilisons celui-ci car il est très attrayant visuellement. C'est simple, c'est ce que je voulais dire. Sur cette page, je vais dire de le scanner et il va scanner cette sélection. Cela va dire que beaucoup d'entre eux ont échoué. Pouvez-vous voir que cette ligne est AA et celle-ci est AA. Cela dépend si vous concevez pour les AA ou les AA. Cela se résumera aux AA Je travaille très rarement pour une entreprise qui vient me voir et me dit, en termes vagues, que nous voulons que ce soit accessible, mais elle n'a aucune règle D'autres agences gouvernementales pour lesquelles j'ai travaillé diront qu'il faut respecter la norme AA, c'est complètement cool et personne ne le vérifie jamais. C'est une zone amusante d'accessibilité. Vous devriez le faire dans le cadre de la conception de votre expérience utilisateur. Vous devez en être conscient. Parfois, tu devras le toucher. Là où cela devient un peu plus délicat ou où vous devez le faire c'est lorsque vous créez sites Web, en particulier des sites Web mobiles. Les classements de recherche sur Google classeront les sites non seulement en fonction question de savoir s'il s'agit d'un site pertinent, mais aussi en fonction de son accessibilité, d'accord ? Et il peut passer en revue et vérifier. D'accord, je vais vérifier s'il s'agit d'une note AA, et évidemment, une note AA sera meilleure qu'une note AA, mais la note AA est assez restrictive en termes de couleurs que vous pouvez utiliser. Tu dois regarder ton public, à qui c'est destiné. Pour mon guide Gig, A va travailler. Regardez ce texte ici. Donc ce texte ici, a-t-il échoué, exemple de texte ? C'est où ? En fait, vous pouvez simplement sélectionner quelque chose et dire, scanner la sélection. Aucune chaussure trouvée. Génial. Allons-y AA. Sélection du scan. Aucune chaussure trouvée. C'est bon. Vous trouverez que l'une des règles que j' utilise et qui est répertoriée sur le site W Three est que le texte normal est considéré comme ces deux règles. S'il est en gras, le texte normal qui répond toutes les exigences d'accessibilité est 14 mais en gras. Normal, cependant, si vous voulez utiliser du texte qui n'est pas en gras, comme le texte normal ou clair, il faut 18. Les deux sont égaux en termes de taille. Ces deux éléments sont égaux en termes d'accessibilité. Celui-ci est plus petit, mais en gras. Celui-ci est plus grand , pas trop gras et il a un contraste très élevé. C'est noir sur ce gris. C'est une vidéo un peu sinueuse. Ce que je veux que tu fasses, c'est que tu ne prennes aucune des choses que je t'ai données pour évangile. Je veux que tu t'en ailles et que tu l' explores toi-même. Vous allez vous heurter à des choses et vous serez entendu. Dan a dit : « Je ne suis pas un expert en accessibilité, mais lorsqu'il s'agit de conception de l'expérience utilisateur, vous devez posséder certaines compétences de base Les éléments de base sont le contraste des couleurs et les tailles de police. Jetez un œil à celui-ci ici. Analysons cette sélection. Cela a échoué. Pourquoi échoue-t-il ? Nous sommes sur AA. Regardons A, scannons-le. C'est toujours un échec. Ce qui est drôle, c'est que si je passe en revue et que je dis, en fait, que tu as 16 points, tu n'es pas de la bonne couleur. Passons en revue et choisissons la version 700 de celui-ci. Scanne-le, ça va passer. Il y a des choses simples que vous pouvez faire pour effectuer de petits ajustements et faire passer les choses Jetons un coup d'œil à une autre application que j'aime bien. Il est bloqué. Vous pouvez vous connecter sans vous inscrire ici. Jetons un coup d'œil au contraste. Regardons celui-ci. Celui-ci a échoué à l'AA, mais passe l'AA, ce qui est parfait. Vous pouvez voir ici que c'est un gros texte. Nous n'allons pas nous baser sur le fait qu'il échoue au A, mais il s'agit d'un texte volumineux , supérieur à 18, et vous pouvez voir ici qu'il a réussi le test A. Tout dépend de la taille du texte, son poids et de la façon dont le contraste des couleurs fonctionne avec un arrière-plan. Ce dont vous devez tenir compte lorsque vous traitez de l' accessibilité, ce sont les points de contact. C'est ce bouton ici. Prévisualisons-le. Et pour cliquer sur un taureau, il faut que ce soit sur Android, qu'il fasse 48 pixels et sur Apple, comme un iPhone en a besoin de 44. Si je clique ici, j'ai ce bouton. Vous pouvez voir que la zone tactile est assez petite. Je ne veux pas augmenter la taille du cœur. Ce que vous pouvez faire, c'est que vous pouvez voir ici ce que sont 32 pixels. C'est ce que je t'ai dit de faire tout à l'heure. Ce que nous allons faire, c'est aller chercher l'original. Je vais revenir à mon composant principal. Vous pouvez voir ici que c'est 32 sur 31. Ce que vous remarquerez également, c'est que j'ai ce vecteur, qui est le cœur, qui se trouve à l'intérieur de ce parent. Ce que je peux faire, c'est simplement agrandir un peu le cadre pour parents, laissant le cœur à l'intérieur, la plus petite taille, la taille que je veux qu'il soit. Une fois ce parent sélectionné, je peux dire, en fait, j'aimerais que vous ayez les dimensions 48 x 48. Elle est plus grande. Je vais dire « A pouvoir le mettre en plein milieu du parent. Je l'ai transformé en Lou, il s'est à nouveau enroulé autour de lui. Je vais dire qu'en m' assurant d'avoir sélectionné le cadre extérieur, je vais obtenir un 48 x 48. Vous pouvez le voir ici. Maintenant, j'ai ce point de contact beaucoup plus grand, mais le cœur a toujours la bonne taille. Lorsque vous avez créé vos icônes plus tôt, assurez-vous que s'il s'agit de VOS, elle mesure au moins 44 x 44 pixels et sur Android, elle mesure 48 x 48 pixels. L'autre point est de noter que les points de contact doivent être distants d'au moins 16 points sur Mac, Apple et Android. Même si les gens ne le remarqueront pas, surtout lorsqu'il s'agit, par exemple , d'un site Web mobile, Google , qui possède Android, ils classent les sites en fonction non seulement de leur contenu, mais aussi de leur accessibilité. Si vous avez de très petites icônes très proches les unes des autres et difficiles à cliquer, elles sont moins susceptibles d' afficher un résultat de recherche contenant votre site Web, car elles sont moins accessibles. Pour garder cela à l'esprit également. Polices de caractères, contraste, points de contact. n'est là que l'un des principaux problèmes lorsqu'il s'agit de l'aspect Figma du design Il existe de nombreuses autres considérations en matière d' accessibilité qui ne sont pas abordées ici, comme les touches pour les images, le daltonisme navigation clavier pour les malvoyants, les lecteurs d' écran, Il n'y a pas que ce que nous avons abordé ici, mais ce sont là les principaux éléments. Assurez-vous que vos couleurs présentent un bon contraste, que les tailles de police sont suffisamment grandes et de la bonne couleur et que vos points de contact sont suffisamment grands et suffisamment éloignés. Bien, c'est mon petit loyer en matière d'accessibilité. Il y a bien plus que cela. Ne m' obligez à rien. L'une des nouvelles fonctionnalités intéressantes de Figma est qu'elle intègre une partie de l' accessibilité Si vous l'activez, n' oubliez pas de cliquer sur Personnaliser, même si vous utilisez un article de bibliothèque, juste pour le vérifier. C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. 101. Comment utiliser le mode DEV dans Figma: Bonjour, tout le monde. Nous allons examiner ce on appelle le mode DEV dans Figma C'est une façon pour votre développeur interagir avec vos fichiers, commencer à extraire les dimensions, les fichiers, commencer à extraire les couleurs et les icônes de son propre chef afin que vous n'ayez pas à leur envoyer chaque élément individuel. Ils peuvent explorer le document, obtenir ce dont ils ont besoin et commencer à créer le vôtre une fois que vous l'avez conçu. Très bien, allons-y. C'est bon. Pour commencer à travailler dans DevMo, en tant que concepteur, vous pouvez travailler en mode DEV. Le développeur peut obtenir ses propres comptes payants, c'est une version pro uniquement, mais le développeur peut obtenir une version moins chère pour travailler avec vos fichiers Voici donc ma place complète, mais un DV est légèrement moins cher et ils ne peuvent pas faire tout le design complet, mais ils peuvent en faire une bonne partie Si vous êtes un peu les deux, un peu designer et un peu développeur, vous pourrez peut-être simplement vivre sur le siège du DV Cela change ce à quoi vous avez accès, mais les développeurs peuvent souvent effectuer beaucoup de travail de conception. Ou disons que Malcolm, développeur d' ordinateurs portables, a juste un DV, ça veut dire ? Il s'agit donc d'un designer. Disons que je travaille sur le fichier ou la page d'inscription et que je suis prêt pour le développeur. Vous l'avez peut-être déjà vu. Il y a cette option ici. Toi, Dan, le designer. Je peux dire que c'est prêt pour le développeur. Cela va dire deux ou trois choses. Il dit : « Hé, vous n'avez pas renommé un tas de fichiers. Je pourrais y aller et le faire. Je ne vais pas le faire pour le moment. Disons que je vais le partager. Je vais cliquer à nouveau dessus et leur dire copier ce lien et de le leur envoyer par e-mail , puis de le leur envoyer. Qui que ce soit, envoyez le lien. Ce qui finit par arriver, c'est qu'ils y entrent dans ce mode. Cela semblait à peu près le même, ce qui peut être un peu déroutant. Ils entrent en mode DEV. cool, cependant, c' est que le mode DEV leur donne les informations dont ils ont besoin. De plus, s'ils sont zoomés, ils peuvent voir ce sur quoi ils devraient travailler Ici, dans le panneau Layers, cela leur indique simplement qu'ils sont prêts pour le développement. Ils peuvent le sceller, cliquer dessus , travailler dessus et le voir. Mais ils peuvent facilement voir, regardez, c'est ce sur quoi je voulais travailler. Vous pouvez le copier et le coller dans un autre document, c'est tout à fait normal , car cela peut être un peu accablant pour quelqu'un. Il se peut que je le fasse. Mais pour vous, le truc cool qu'ils obtiennent , c'est qu'ils ont travaillé dessus pendant un moment. Ils ont vu le fichier original, vous avez apporté quelques modifications et ils s'y intéressent. L'un des avantages Dvmode, c'est qu'ils peuvent entrer dans le vif du sujet et n'étaient pas si différents auparavant ou s'ils me l'ont dit Je suis le développeur maintenant. Dan m' a envoyé cet e-mail en disant : « J'ai apporté toutes les modifications et vous dites que je ne me souviens même pas de ce document ». Ils peuvent être comparés à différentes versions. Je dois d' abord apporter des modifications. Supposons que Dan, le designer, accord, j'ai changé certaines choses , amélioré mon accessibilité, et maintenant je dois choisir cette couleur foncée, et ce sera une police différente. Changeons la police. J'ai effectué mes modifications. Maintenant, Malcolm, alors que notre développeur vient ici et s'en va, d'accord. Ça fait longtemps que je n'ai pas vu ça. Qu'est-ce qui a changé, bordel ? Ils peuvent dire comparer avec les versions précédentes. Tu peux voir ? C'est l'ancienne version. Il s'agit de la nouvelle version. Ils peuvent commencer à voir quels sont les changements. Ils peuvent décider côte à côte, la superposition peut être pratique Vous pouvez voir que j'ai également joué avec une mise en page, afin qu'ils puissent facilement voir le changement . » Alors ferme-le. C'est l'un des avantages. L'autre avantage, c'est que lorsqu'ils sont en mode développeur, lorsqu'ils cliquent sur des objets, ils obtiennent ce qu'ils veulent vue du design, nous savons que certaines des choses que j'ai fabriquées sont des sorties Audi à l'intérieur des cadres à l'intérieur des composants principaux, ils s'en fichent Supposons que le développeur veuille passer en revue maintenant et simplement déterminer les tailles et l'espacement que vous avez utilisés, il peut simplement cliquer dessus et dire « voici la police Voilà la police de caractères. C'est un condensé de Roboto et je pourrais simplement en extraire le CSS, ou ils utilisent iOS et SifuI, peut-être que c'est Ils peuvent obtenir le code qu'ils veulent. Ils peuvent également décider que s'ils utilisent du CSS, ils n'utilisent peut-être pas de pixels, mais des jantes Juste une mesure différente OK, très bien. 1 h 00 du matin au lieu de 16 pixels. au lieu de 16 pixels Pareil, mais ça leur donne un peu de contrôle sur la façon dont ils extraient les objets d'ici. Vous pouvez voir qu'il y a des couleurs. Ils peuvent entrer dans certains d'entre eux, donc je peux entrer dans n'importe quoi Je l'ai marqué pour Dev, mais ils peuvent aller où ils veulent. Ils peuvent entrer ici et simplement en extraire le texte. C'est quelque chose que je faisais souvent. J'avais l'habitude de lire le texte et de l'envoyer par e-mail séparément parce qu'il figurait dans un document de conception auquel le développeur refusait d'accéder. Ils peuvent maintenant y entrer, prendre ce qu'ils veulent. Ce que j'aime vraiment, c'est dire ce truc ici. moi qui l'ai fait. C'était un membre d' Auto Layout. Nous l'avons fait ensemble. Il s'agit d'une mise en page automatique. Il contient toutes sortes de choses qui le rendent réactif. Mais bon, ce qui se passe pour eux, c'est tout ce que nous avons fait, ils peuvent le voir. En tant que développeur, je suis vraiment un mauvais développeur. Je peux copier et coller des trucs. Je sais ce que je fais avec du code frontal. Nous les appelons Autolayout dans Figma parce que cela a du Mais pour un développeur, cela s'appelle Flexbox et cela me donne tout ce dont j'ai besoin pour le rendre réactif, donc je n'ai pas à essayer de tout recréer. Vous pouvez voir ici tous les rembourrages, toutes les bordures, les différents styles L'autre point cool, ce sont toutes les couleurs, le look, certains des atouts qu'il y a là-dedans Tu vois que j' ai trois étoiles ? Ils peuvent passer en revue et dire, en fait, je veux que vous téléchargiez toutes ces icônes, et je vais les y coller. Parce que je les vois ici maintenant, ils sont sur mon ordinateur. Le développeur dispose de ces SVG, ces graphiques vectoriels évolutifs, prêts à être intégrés à ses conceptions Ça rend les choses vraiment faciles. Les variables que nous avons créées plus tôt, voyez-vous que je n'ai rien sélectionné ? Ils peuvent ouvrir le tableau des variables et voir ce que nous avons fait pour nos modes clair et sombre fonctionnent. L'autre avantage, c'est que disons que nous avons ce document ici. Ils peuvent monter ici et dire open et VS code. Ce serait probablement le terminal, le code qu'ils utilisent pour écrire le code, quelque chose comme le code VS Ce qu'ils peuvent faire, c'est que vous avez peut-être passé beaucoup de temps à avoir différentes variantes, pas des variables. Peut-être que nous l'avons fait pour notre logo. Nous avions un mode clair et un mode sombre. OK, je sais qu'en termes de design, j'ai ce petit interrupteur que j'ai fabriqué Ce qu'ils peuvent faire en tant que développeur, ils peuvent entrer dans n'importe quoi et ils peuvent voir qu'il suffit de cliquer sur le logo ici. Je peux voir l'accès des squas aux couches. Je peux cliquer sur le logo. Je peux explorer le comportement que j'ai adopté. Dans ce cas, il suffit d'activer et de désactiver, pour le mode clair et le mode sombre. Voici un autre projet sur lequel j'ai travaillé ici. Dans Design View, j'ai créé cette inscription anticipée par intermittence et je l'ai rendue horizontale, c' était très compliqué. Cela m'a pris du temps, mais je veux que le développeur puisse expérimenter cela plutôt que simplement voir un site Web statique, plutôt que de simplement voir une interface utilisateur statique. Ils peuvent en mode Div, si je le partage avec eux, ils peuvent parcourir et explorer le comportement et voir ce qu'ils ont fait ici. Ils peuvent le recréer au lieu que vous essayiez de documenter trois versions différentes pour tout, ils peuvent les parcourir et les expérimenter. Bien. Le développeur a également accès à de nombreux plugins différents, distincts de ceux de conception, sur cet onglet ici. Vous pourriez donc passer un peu de temps à familiariser votre développeur. De nombreux développeurs suivront ce cours en particulier afin de mieux travailler avec les concepteurs, même s'ils ne sont peut-être pas sûrs faire eux-mêmes le design. Bienvenue dans le cours. Mais vous pourriez leur envoyer un petit message, nous leur expliquerons comment ils peuvent travailler avec vous du côté des développeurs, plutôt que de simplement leur envoyer des JPEG en espérant qu'ils pourront recréer des choses un peu de travail de leur côté pour se mettre au courant, mais ils trouveront cela suffisamment utile pour se donner la peine de le faire car cela peut nous faire gagner beaucoup de temps au lieu d' essayer d'envoyer des images, ils peuvent le saisir et le charger. Même si c'est juste pour ça, ils s'y habitueront et commenceront à explorer. Ils découvriront qu'ils utilisent du stretch pour remplir la boîte. telles choses leur seront utiles et ils exploreront Figma un peu plus en profondeur, ce qui facilitera vraiment vos deux tâches et ce transfert. Plutôt que de créer un document de transfert distinct pour les développeurs, vous pouvez simplement transmettre les fichiers. C'est DevMDE Il est uniquement payé. C' est super utile. C'est cette petite option ici. Vous pouvez commercialiser pour Dev. Tu n'es pas obligée. Ils peuvent explorer les fichiers. Il est encore très courant de créer une nouvelle page indiquant Ready for Dev et y mettre simplement les éléments que vous souhaitez. De toute évidence, cela peut être un peu accablant. C'est DevMode dans Figma . Je vous verrai dans la prochaine vidéo. 102. Comment documenter un composant dans un système de conception dans Figma conception: Bonjour, tout le monde. Dans cette vidéo, nous allons examiner une spécification de conception, qui est différente d'un système de conception Je vais expliquer ce que sont les deux. Nous créerons nos propres spécifications de conception, lesquelles nous commencerons à ajouter des mesures et à décomposer l'anatomie de certains des éléments que nous avons créés Ici, nous allons utiliser de jolis plugins pour nous aider à atteindre cette position rapidement. Il s'agit plutôt d'une façon visuelle d'exprimer ce que vous avez créé et comment vous devez l'utiliser plutôt que de simplement passer en mode Dvmode et de laisser d'autres personnes, collègues et développeurs le découvrir par eux-mêmes Allons-y. OK, pour commencer, j'ai créé une nouvelle page et je l'appelle simplement spécifications techniques. Il existe deux niveaux pour la transmission de vos documents. Vous avez des spécifications de conception et vous avez un système de conception. Une spécification de conception est ce que vous avez vu au début. Un système de conception n'entre pas dans le cadre de ce cours, et pour les très grandes entreprises comptant des centaines de concepteurs et de développeurs, ils doivent tous travailler à partir d'une source centrale et les nouveaux employés doivent se familiariser et se former eux-mêmes. C'est à ce moment-là que vous vous lancez et que vous créez un système. Supposons que Shopify l'ait. ce qu'ils ont appelé. Ça s'appelle Polaris. Ils travaillent dans ce domaine. Il possède son propre site Web et vous pouvez comprendre ce qu' ils pensent des différentes icônes, comment ils les utilisent, ce qu'ils doivent faire et ne pas faire. Ce que vous constaterez, c'est que certains noms sont assez cohérents. Tu vois ? Composant. Je sais ce que sont les composants. De quel type de composant ai-je besoin ? Je veux regarder un groupe, et vous pourrez découvrir comment il s'en sort. Il n'y a pas de règles établies sur ce que cela devrait être. Ils sont souvent destinés aux développeurs. Il y a beaucoup de code, selon la façon dont leur site Web est construit, mais il y aura des choses à faire et à ne pas faire, ainsi que les meilleures pratiques Jetons un coup d'œil à quelques-uns d'entre eux. Microsoft utilise Fluent, pour leurs systèmes de conception, vous pouvez passer en revue. Souvent, vous devez utiliser l'option de recherche. Supposons que je veuille voir comment ils traitent les cartes, et voici leur carte. Oui, cela vous donne beaucoup de documentation à ce sujet. asiatique. Ils ont leur propre système de design avec son propre nom, appelez-le Lasian Regardons celui d'Adobe. Ils appellent le spectre. Donc, si j'avais besoin d'une carte de leur part, jetons-y un œil. Qu'est-ce qu'on a ? Carte. Ils fonctionnent tous légèrement différemment. Voilà. Vous pouvez télécharger le fichier Adobe XD, qui est un logiciel redondant pour le moment Parfois, ils contiennent également des fichiers Figma que vous pouvez télécharger Uber utilise la base. OK, je peux donc examiner leurs composants et comprendre comment ils utilisent le. Que faisons-nous ? Messagerie. Je vais vous en donner un exemple, les spécifications en termes, elles ne vous donnent pas toutes les chiffres réels. C'est ce que nous allons faire dans cette vidéo, mais certaines d'entre elles vous donneront simplement le code et vous pourrez le parcourir pour découvrir de quoi il s'agit. Certains d'entre eux sont étiquetés plus clairement. OK, et Google utilise du matériel et Apple pour iOS. Si vous créez des applications, elles utilisent cette interface humaine, c'est le nom de leur interface. Vous pouvez parcourir et comprendre, n'est-ce pas, comment font-ils la mise en page et comment l'abordent-ils ? Beaucoup de documentation. Il y a quelque chose de très lourd. n' est pas trop lourd, mais Ce n' est pas trop lourd, mais vous ne pouvez pas tout gâcher si vous le lisez en entier. Nous allons donc créer le type de version légère, appelée spécification de conception Supposons que je doive remettre cette carte à mon développeur ou que j'aie simplement besoin qu'elle soit documentée pour que tout le monde sache ce que j'ai fait, ce que nous faisons. J'ai créé une nouvelle page intitulée Spécifications techniques. J'ai juste copié et collé cet élément, ok cette carte est issue de notre design principal. La première chose que vous devez probablement faire est de vous assurer de l'étiqueter. Je vais donc y aller et essayer à l'IA de la nommer, car il y a beaucoup de cadres uniquement. Non Aucune d'entre elles n'a besoin d'être nommée. Je vais devoir passer en revue maintenant et dire que c'est ma carte de vœux pour les concerts, et me frayer un chemin en nommant les choses Une fois que vous avez fait cela, il existe quelques excellents plugins. Commençons par mon préféré. Ils en ont changé le nom. Chaque fois que je fais une mise à jour pour ce cours, ils passeront à la section Design et widgets C'est ce que l'on appelait autrefois huit formes. Maintenant, cela s'appelle des spécifications. Documentaire de conception Ils l'ont renommé spectral, puis ils l'ont rebaptisé design doc. Jetez-y un coup d'œil. Peu importe que vous utilisiez celui-ci en particulier. Jetez un coup d'œil, disons, aux spécifications de conception, parcourez et je les évalue en fonction de ce que j'ai utilisé auparavant, évidemment, mais aussi du nombre d' entre elles qui ont été téléchargées, du nombre d'utilisateurs ? Il n'y a que quelques utilisateurs et quelques likes, ce n'est peut-être pas utilisé très souvent. Vous voulez en trouver un qui soit utilisé par un grand nombre de personnes. Écoutez, 38 000 personnes. Utilisons Design Doc, mon préféré. Nous utilisons la mesure dès le début. Et c'est juste pratique. Si vous l'avez sélectionné, vous pouvez cliquer sur mesurer pour qu'il passe en revue et vous donne toutes les mesures. Il y a certaines choses comme si 15 ne devraient pas être là. Lorsque je fabrique ces objets, je dois souvent les passer en revue et les ajuster pour m'assurer qu'ils sont également tous parfaits. Je vais devoir annuler cela, parcourir ceci, découvrir de quel espace il s'agit et le remplacer par 15 parce qu'il devrait être 16. Je ne sais pas comment il est arrivé à 15. cool à propos du design, Doc, c'est qu'il existe également une option appelée spec Celui-ci, jetons-y un coup d'œil. Vous pouvez voir que j'ai le compte gratuit pour cela pour le moment. Je vais passer aux spécifications de conception. Ce que ça va faire, ça va faire un gros gâchis. Vous devez vous assurer qu' il y a suffisamment de place pour que ce truc se développe et vous pouvez commencer à voir c'est la même chose, mais avec beaucoup plus de détails. Cela peut être un très bon moyen d'avoir une apparence professionnelle, mais aussi d'être très clair. Vous pouvez le voir se casser dans les différentes options. L'image de couverture est donc une petite barre à part entière Vous pouvez voir qu'elle montre non seulement l'espacement, mais aussi qu'elle est remplie et qu'elle a une hauteur fixe ? Cela peut être très pratique pour le développeur de savoir si vous êtes un document. Souvent, cependant, vous pouvez simplement leur donner le fichier Figma et leur faire utiliser le mode développement comme nous le faisions auparavant Ce type de documentation est vraiment génial lorsque vous travaillez, par exemple, en tant que freelance et qu'on vous a demandé de créer quelque chose et que vous voulez quelque chose vous soit remis en retour plutôt que de simplement présenter un fichier contenant beaucoup de détails. Vous pouvez renommer tout cela. Ce que vous trouverez, c'est que vous voyez qu'il a été créé, cet énorme document est essentiellement créé par Figma Pour vous, avec tout cela, vous pouvez les parcourir, commencer à les renommer, à changer de couleur Ici aussi, je pense qu'il existe des options pour déterminer et modifier des éléments tels que le rembourrage, les couleurs Qu'est-ce que vous voulez inclure ? Avons-nous besoin des couleurs ? Devons-nous appliquer les effets ? Ou voulons-nous que ce soit plus simple ? Très pratique. Dans ce cas, nous avons l' espacement et l'anatomie, ce qui me donne des éléments tels que des polices plutôt que simplement de l'espace tout magnifiquement annoté. J'adore ça. L'autre, appelé specs fonctionne de manière très similaire, donc je vais vous chercher, le dupliquer, accéder exactement aux mêmes plugins et widgets. Je vais trouver les spécifications. Cela fonctionne de manière très similaire. Donne-lui une seconde. Je vais créer une branche de cadres avec toute la documentation ici. Jetez un œil pour voir lequel vous rapproche le plus de l' endroit où vous devez être. Ils changent au fil du temps, et vous constaterez que certains d' entre eux ont des paramètres gratuits , d' autres non, et vous finirez par passer un peu de temps à tout ranger Parfois, ils n' ont pas les bons noms et vous avez utilisé la mauvaise taille et d'autres choses Il y a deux niveaux. Il existe une spécification de conception, qui n'est en fait qu' une page dans Figma Voilà. Voici ce que j'ai fait et c'est documenté. Vous pouvez ensuite passer à un système de conception. je n'ai jamais travaillé dans une entreprise où j'ai être honnête, je n'ai jamais travaillé dans une entreprise où j'ai dû produire un système de conception. Je travaille avec des PME, donc tout est affaire petites entreprises et rien n' a eu besoin d'un système de conception. Je comprends leur fonctionnement et j'ai travaillé à partir d'eux, vous en avez tiré des détails. Ce que je finis par faire, c'est utiliser système de conception pour me faire une idée de la façon dont je devrais documenter D'accord ? Qu'est-ce qui pourrait être utile à mon équipe ? Probablement un fichier Figma à télécharger. Dois-je copier le CSS et le JavaScript ? Comment cela fonctionne-t-il et réagit-il ? Vous devrez décider de ce que vous devez remettre. Mais le simple fait d'utiliser certains de ces plugins peut vous permettre d'y parvenir, au moins vous donner une idée de ce que vous devriez transmettre si vous ne l'avez jamais fait auparavant N'oubliez pas qu'il ne s'agit pas de partager quelque chose chic, c'est censé être utile. S'il y a des choses que vous connaissez ici, rejetez simplement les gens. Direction verticale, est-ce que ça doit être là ? Je peux parcourir et commencer modifier cette liste et dire, en fait, que je n'en ai pas besoin. Restons-en aux choses pour lesquelles je veux être importante. Sinon, le fait de se retrouver ici pour rien ne va aider personne Mais ça a l'air chic. Bien , pour couvrir à nouveau, parfois vous remettez simplement un document, vous vous demandez, d'accord, où est-il ? Celui-ci est là ? Passons à mes dossiers. Il vous suffit de dire « Zoomez , marquez pour Dev », et c'est peut-être tout ce dont vous avez besoin, et d'y partager le lien lié à ce fichier. Vous pouvez dire que je souhaite copier le lien du mode DEV, et c'est ce que je vais envoyer à mon développeur. Il se peut que vous fassiez des spécifications de conception, ce qui ressemble plus à ceci OK, je suis juste en quelque sorte répertorié. Les objets, le rembourrage, les marges. Vous pouvez ajouter ici des annotations indiquant de ne pas utiliser ces images C'est juste pour que cela soit très clair sur ce que vous attendez d'y entrer et ce que vous n'y attendez pas. Ensuite, le niveau suivant est un système de conception. D'accord ? Et puis vous trouverez peut-être un modèle au sein de la communauté pour commencer. J'ai dû en examiner quelques-uns qui font partie de Figma, et il y avait un tas de modèles pour les systèmes de conception. Ils sont tous différents. Tu dois décider quelle saveur te convient le mieux. Il n'existe pas de règles spécifiques codées sur le fonctionnement de ces systèmes de conception. Ils devraient être utiles. C'est ce qu'ils devraient être. C'est vrai. Il s'agit d'une spécification de conception et d'un système de conception intégrés à une Figma et de jolis plugins D'accord. C'est ça. Je vous verrai dans la prochaine vidéo. 103. Projet de cours 21 - Spécifications de conception: Bonjour, tout le monde. C'est l'heure des projets de classe. Je veux que vous établissiez vos propres spécifications de conception pour l'un des éléments de votre design, que vous trouviez quoi que ce soit, quelque chose qui vous intéresse D'accord ? Mets-le sur sa propre page. Je veux m'assurer que toutes les couches sont bien nommées. Je veux que tu ajoutes l'anatomie et les mesures. D'accord ? Vous pouvez donc utiliser le plugin. Mais je veux que tu passes par là et que tu vérifies tout. Je veux que vous vous rendiez compte l' espacement des données n'est pas correct Cela n'a aucun sens. Je devrais peut-être changer ça. Ne vous contentez pas d'appuyer sur Exporter le plug-in et de l' envoyer, de le parcourir de vous assurer que tout est bien nommé, de vous assurer que tout est important et de découvrir comment ils fonctionnent. Une chose que vous devrez peut-être faire est que vous devrez peut-être passer par le connecteur, certains d'entre eux peuvent être verrouillés, ce qui peut être un peu délicat. Je ne l'ai pas mentionné dans la dernière vidéo, mais vous pouvez voir ici ce contenant contenant toutes mes mesures en couches verrouillées. Il faudrait que je les sélectionne toutes et que je me demande de faire passer les commandes aux parents ? C'est pour le déverrouiller. J'ai besoin que vous soyez tous débloqués si je dois apporter des modifications Déverrouillez les couches, apportez les modifications nécessaires, assurez-vous que tout est bien étiqueté, passez en revue l' espacement et l'anatomie, assurant que j'ai besoin la description pour y écrire des textes Probablement pas. Il suffit donc de l'attacher avant de prendre une capture d'écran, puis la télécharger dans la section des devoirs. Partagez-le également sur les réseaux sociaux. Cela a toujours l'air chic lorsque vous avez défini une spécification de conception. Pour vous, peut-être, si pour moi, je suis comme si je suis un designer UX, regardez-moi avec mes spécifications de conception. Alors fais-le et je te verrai dans la prochaine vidéo. 104. Comment consulter et restaurer l'historique des versions dans Figma: Un. Dans cette vidéo, nous allons examiner l'historique des versions. En gros, Figma enregistre automatiquement tout ce que vous avez fait Vous pouvez également le faire manuellement. Plongeons-nous dans le vif du sujet et examinons l'historique des versions dans Figma Pour retrouver l'historique de vos versions, cela se fait automatiquement, ce qui est bien. Si vous cliquez sur le nom ici, il y a une liste déroulante. Vous pouvez afficher l'historique des versions. Vous pouvez également accéder au F, accéder à Fichier et afficher l'historique des versions. Et il existe de nombreuses façons d'y accéder. Ce qui finit par se produire, c'est que cela s'ouvre sur le côté droit. Affiche toutes les versions du document. Si vous avez un forfait gratuit, ils disparaissent au bout de 30 jours. Si vous avez un forfait payant, assurez-vous qu'il ne s'agit pas de brouillons, mais d'un projet réel, il l'enregistrera pour toujours. Je vais le faire automatiquement, ce qui est cool. Vous pouvez revenir en arrière et dire, ou prendre l'un des plus anciens. Tu vois, ceux qui ont des dates sont des sauvegardes automatiques. Il le fait toutes les demi-heures. En gros, il le fait chaque fois que vous faites une pause, il sait que vous avez fait beaucoup de travail et que vous n'y avez pas travaillé depuis un petit moment. Il l'enregistre pour vous. Vous pouvez le ramener à celui-ci. Vous voyez un clic droit dessus et dites « Restaurer vers cette version ». Ce qui est cool, c'est que vous pouvez copier le lien vers celui-ci. Disons que nous avons fait amende honorable, que les clients reviennent. Nous avons effectué les modifications et personne ne sait exactement quelles modifications ont été apportées ou ils se demandent : « C' était comme ça avant ? » Vous pouvez en fait y aller et dire «  copiez ce lien » et ils obtiendront un lien vers cette version, comme dans une version antérieure de ce document. Cela le sauve pour toujours. C'est incroyable. Je l'utilise beaucoup, disons que je fais changements ou que je fais beaucoup pour ce cours. Lorsque je suis sur le point de démarrer une vidéo, j'en enregistre une version afin de pouvoir accéder à l'historique des versions. Je peux le sauvegarder. Je vais faire la vidéo de démarrage. Euh, un oh un, de sorte que si je gâche mon enregistrement pendant que j'enregistre, je n'ai pas à appuyer sur Annuler, Annuler, Annuler, Annuler. Je peux simplement restaurer cette version. Je ne suis pas sûr de ce que je suis en train de taper. Tapez-le dedans. Je peux l'enregistrer, et il est maintenant dans l'historique de mes versions. Si je passe maintenant, je gâche tout ça . Oh, le plus important. Je vais faire semblant de l'avoir fait exprès avec l'historique des versions, c'est-à-dire que je vais le supprimer. Je ne peux rien supprimer ni faire quoi que ce soit. Vous voyez que les barres d'outils sont limitées ? C'est parce que je n'ai pas fermé l'historique de mes versions. Je veux vraiment que tu mettes fin à en coupant cette petite croix, puis tout reprendra vie, et d'accord, je me suis débarrassé de toi et d'accord, je me suis débarrassé de toi par accident et toi et ça a été déplacé, et maintenant je peux consulter l'historique de mes versions Je peux dire que vous affichez l'historique des versions, et je peux le ramener ici. Je peux dire de restaurer cette version. Tu dois juste te rappeler de le fermer une fois que c'est fait. C'est bon. Si vous le restaurez, il le ferme automatiquement. Mais je suis coincé dans l'historique des versions ne peux rien faire tout le temps. Je l'utilise beaucoup quand un client revient avec un homme. Je vais enregistrer l'historique des versions avant apporter les modifications, au cas où j'aurais besoin d'une restauration. Comme faire une sauvegarde, comme lorsque vous utilisiez d'autres fichiers, documents et logiciels. Une autre chose utile est que si vous optez pour un plan spécial, je suis sur un plan professionnel. Vous utilisez peut-être le compte gratuit. Vous devez suivre un plan d' organisation ou d'entreprise. Vous payez plus cher pour cela et vous bénéficiez fonctionnalités supplémentaires comme celle-ci, vous obtenez le journal des modifications, sorte qu'en tant qu'administrateur, vous pouvez consulter et voir qui a travaillé sur le fichier, ce qu'il a changé, quand, et suivre tout. C'est un peu fraternel, mais vous pouvez garder un œil sur les dossiers pour savoir a détruit tout cela ou qui l'a fait ? Quand est-ce que cela a été fait ? Vous pouvez consulter ce journal pour vos différents fichiers, voir qui a fait les choses, mais vous devez souscrire à des plans d'organisation ou d'entreprise spéciaux. C'est ça. Il s'agit de sauvegarder votre historique et de le recharger à partir de votre historique N'oubliez pas de frapper la petite croix lorsque vous aurez terminé. Sinon, il reste coincé dans les limbes. C'est ça. Je vous verrai dans la prochaine vidéo. 105. Comment utiliser l'outil Tranche dans Figma ma: Très bien, tout le monde, et nous allons examiner l'outil Slice. Vous pouvez dessiner des objets et exporter des limites spécifiques plutôt que des cadres spécifiques. C'est un outil pour trancher. Montrez-le ici car il occupe un raccourci très important. Je ne sais pas pourquoi, mais c'est le cas. Découvrons ce qu'il fait et à qui il sera utile. C'est bon. Commençons. Il possède un raccourci super simple, la touche S. Je pense que c'est du gaspillage pour l'outil Slice. Vous dessinez des cases autour des éléments que vous souhaitez exporter. C'est bon pour, disons, cette longue page ici. Si je veux exporter le cadre entier, je peux venir ici et dire que je veux exporter le tout. Mais je vais me procurer le rôle complet. Ce que je veux faire, c'est prendre la tranche k et la faire glisser dessus. qui est cool, c'est que vous pouvez décider de sa taille, puis vous pouvez aller ici et dire : je veux exporter un fichier PNG pour celui-ci, et je vais exporter uniquement celui-ci. Mettons-le là. Jetons-y un coup d'œil. Vous pouvez y voir que c'est la tranche et qu'elle exporte également l'arrière-plan par rapport à d'autres éléments. C'est pourquoi c'est très utile. Tu devrais peut-être prendre ça. Je suis de nouveau sur mon outil Slice. Je vais prendre le dessus. Tu dois être un outil mobile. C'est Viki, prends le dessus. Ils sont difficiles à saisir. Si vous faites glisser une boîte autour d'eux, ils sont un peu difficiles à saisir. Tu vois, je ne peux pas cliquer dessus, mais si je fais glisser une boîte dessus, je peux le saisir et exporter tout ce morceau Les deux parties supérieures, y compris le fond. Il convient de noter qu'ils ont une icône spéciale ici dans le panneau des couches, et si vous leur donnez un nom, ce sera mon flux de signalement Maintenant, je peux le sélectionner dans mon panneau Laos et je peux exporter juste ce morceau ici et il utilisera le bon nom, le mettra au bon endroit Il s'agit simplement d'une alternative à l'utilisation votre capture d'écran sur un Mac. C'est Command Chef 4. Je pense que c'est un écran d'impression sur un PC. Oui, c'est suffisant pour l'outil Slice. C'est utile. Vous allez le voir partout, utiliser un très bon raccourci, gaspiller, à mon avis, vous êtes probablement deux, peut-être deux sur YouTube, trois d'entre vous qui trouveront cela très utile. C'est l'outil Slice. Je vais le supprimer. C'est l'outil Slice. Terminé. À la vidéo suivante. 106. Projet de cours 22 - Finaliser votre conception: C'est vrai, c'est le dernier projet de classe. Nous allons vous demander de terminer votre design. Selon ce que vous avez accompli tout au long du cours, cela sera relativement facile ou pourrait vous prendre un certain temps. Allons y jeter un œil. Je vais d' abord vous montrer ce que nous allons faire. Si vous consultez vos fichiers d' exercices, vous trouverez en bas ce que l'on appelle projet de classe final Z, Z, juste en bas et vous verrez un PNG ici, et voici le cadre en Y que je veux que vous créiez en haute fidélité. Oh, vous avez besoin d'un écran de bienvenue, d'une page d'accueil, vous avez besoin des résultats de recherche, des détails de l' événement, du panier et d'une confirmation. Nous les avons conçus tout au long du cours. Laisse-moi te montrer. Ça va tout ranger en gros. Regardez l'animation de bienvenue, nous en avons fait différentes. Nous avons créé le texte Houdini et différentes animations où tout le texte apparaît Ainsi, en fonction de votre design, vous voudrez peut-être revenir arrière et commencer une nouvelle page et simplement copier les éléments dont vous avez besoin plutôt que le désordre que nous avons créé tout au long de ce cours. L'animation d'abord, le point suivant est la page d'accueil. C'est ce que nous avons fait ici. Il va se charger après l'animation sur votre page d'accueil et il va charger sur cette page What's on page ou sur les concerts tendance à venir. En gros , juste cette carte. La page d'accueil propose cependant deux options. Je vais commencer par la page de formation, mais je veux aussi que les gens puissent accéder aux genres ou à une autre catégorie de recherche sur votre site. Laissez-moi vous montrer dans l'iframe. Ça va commencer. Votre page d'accueil sera à la mode et contiendra votre carte d'événements Mais je veux qu'il y ait une sous-navigation en haut pour que les gens puissent aller ici et accéder à cette catégorie J'ai donné un nom générique. Les vôtres appartiennent peut-être à des genres différents. Lorsque vous cliquez dessus, vous obtenez tous ces genres différents en fonction de vos différents types de techno, si le vôtre est de la techno Le vôtre peut être par lieu. Cette catégorie peut être un bouton de localisation déroulant vers les différents emplacements et les gens peuvent cliquer dans les différentes zones, peut-être dans votre quartier ou dans votre ville. Je vous ai donné quelques options, donc c'est peut-être nouveau. Ce week-end pourrait être une autre option. Il peut s'agir d'une sous-catégorie des genres actuels. Il peut s'agir de l'emplacement, de deux manières d'accéder à cette page d'accueil. Pour moi, j'ai déjà créé cette version ici, donc je n'utiliserais probablement que des genres. Mais je vais devoir faire une petite navigation pour me retrouver entre ceci et cela . Le long des boutons, ça peut être ce que tu veux. Ensuite, ce sont les résultats de recherche. Vous avez une barre de recherche en bas. Je veux que cela soit cliquable et que vous accédiez à votre page de résultats de recherche Nous l'avons fait quelque part. Nous avons créé cette version. Je veux qu'il y ait une page de détails sur les évents. Est-ce que celui-ci explose tout simplement ? Si vous cliquez sur l'une des pages d'accueil, vous cliquez sur celle-ci ici, Groove C, qui vous donnera plus de détails et vous indiquera les dates, les lieux et la marche à suivre . Il y a donc une page de détails. Une fois cela fait, ils cliquent sur Ajouter au panier, je veux que vous créiez votre page CRT. Vous pouvez utiliser la page que nous avons créée précédemment avec les variables. Voilà, c'est là. La mienne est très simple. Tout dépendra du temps dont vous disposez. Remplissez-le, surtout si vous comptez l'utiliser pour votre portfolio. Vous trouverez un peu plus de détails ici. Jetez un œil aux autres chariots existants et à ce qui pourrait s'y trouver, à ce qui pourrait être utile Je veux aussi une page de confirmation. Lorsque vous cliquez sur le bouton « À l'heure actuelle », vous recevez une confirmation d'achat des billets. Vous pouvez, selon le temps dont vous disposez, en mettre un entre les deux pour saisir informations de votre carte de crédit, vous pouvez créer un formulaire. Mais ce sont les exigences, tout le reste du projet de classe. Cela pourrait être facile. Tu devrais avoir toutes ces choses. Mettons-le en ordre. La page d'accueil doit afficher par défaut les événements les plus populaires, et il y a une navigation inférieure et une sous-navigation en haut dont nous avons parlé . Où se trouvent-elles ? Ces deux là en haut, cette petite sous-navigation. J'ai une page de résultats de recherche, une page d'événements , un flux de tickets. Nous n'avons qu'un panier et une confirmation. Vous pouvez également y mettre la carte de crédit. pages facultatives, si vous le faites pour votre portfolio , n'hésitez pas à remplir quelques autres pages pour le rendre un peu plus complet. Des choses comme le profil de l'artiste des listes de souhaits, je vous laisse le soin de décider. Elles sont facultatives. Mais vous pouvez voir ici la navigation inférieure. Nous en avons un qui a une navigation inférieure. Voilà, nous pourrions monter dans notre chariot. Nous pouvons accéder aux résultats de recherche de notre profil. C'est là que vous le connectez, et vous avez peut-être également une page de liste de souhaits Vous l'avez fait, j'aimerais faire une vidéo de vous en train d' interagir avec lui. N'oubliez pas de le télécharger sur Vimeo ou YouTube et de partager ce lien dans les projets Si vous ne pouvez pas faire les vidéos, que vous avez du mal à le faire. C'est peut-être le moment de le faire, car vous pourrez alors en avoir un interactif que nous pourrons tous voir. Sinon, il suffit d'une capture d'écran de toutes vos pages finales et téléchargez-la dans les projets de classe. Veuillez également le partager sur les réseaux sociaux. Tu n'es pas obligée, mais c'est peut-être le moment où tu vas bien, j'ai fait quelque chose. Partagez-le sur les réseaux sociaux, inscrivez-moi dessus, et lorsque vous l' ajouterez aux projets de classe, jetez un œil à deux autres projets et faites-nous part de vos commentaires Si vous le faites pour deux personnes, nous couvrirons tout le monde. Je n'arrive pas à les consulter tous, à regarder projets des autres et à laisser un ou deux commentaires, sur ce que vous avez aimé, ce qui pourrait être changé selon vous , ce sur quoi vous pourriez travailler. Il s'agit des super points de karma optionnels. Préparez-le pour votre portefeuille. À partir de là, les prochaines étapes consisteront à inclure le brief, le personnage pour lequel vous travaillez, les cadres en Y que vous avez réalisés, vos conceptions finalisées, et simplement à vous assurer que si vous utilisez votre portfolio vous le décrivez comme une étude de cas Il est très courant de l'appeler ainsi. Nous ne prétendons pas que c'est un produit réel que nous avons créé pour un client C'est la seule chose. Parfois, les gens hésitent à aimer, c'est faux. C'est ainsi que les concepteurs d'expérience utilisateur élaborent des projets et démarrent en utilisant des études de cas. Nous devons indiquer clairement aux futurs employeurs qu'il s'agit d'une étude de cas. Décrivez-le comme. C'est vrai, c'est ça. Les projets de classe sont terminés. Assemblez vos designs finaux, rangez-les, mettez-les sur une nouvelle page, faites fonctionner toutes les interactions J'adorerais voir comment ils s'assemblent. J'aime bien suivre les projets des gens, surtout à la fin de ce cours avancé, car nous commençons à acquérir certaines compétences , et j'aime les voir. Très bien, alors fais-le, partagez-le, et je vous verrai dans la prochaine vidéo. C'est une longue question. Prends ton temps, fais-le. Ensuite, je vous verrai dans la prochaine vidéo. 107. Et après Figma Advanced: D'accord, c'est la fin du cours. Mais il faut que je te dise au revoir , mais ça y est. Tu dois déménager. Déplacez-vous. Déplacez-vous. Pourquoi tu ne bouges pas ? D'accord, c'est mieux. Hum, félicitations. Tu as atteint la fin du cours. Nous sommes à la fin de Figma Advanced. Quoi, un grand cours. Des tas de vidéos, et je voulais juste vous féliciter, vous et moi, nous sommes arrivés jusqu'au bout. J'ai tout enregistré, et tu les as tous regardés. D'autres personnes regardent Netflix. Tu t'améliores. Ouais. C'est triste aussi. Il faut en finir ici. Mais si vous voulez continuer avec d'autres cours, vous pouvez passer à la prochaine étape, à savoir que Webflow serait un bon cours pour cela, d' accord, où Webflow prend vos designs Figma et sites Figma sont quelque sorte un nouveau logiciel amer créé par Figma Faites-moi savoir qu'il y aura un lien ici, d'accord ? Si vous pouvez vous y préinscrire. Et si cela m' intéresse suffisamment, je ferai également une vidéo sur les sites Figma Parmi les autres cours, nous avons Photoshop et After Effects, In Design et Illustrator, et nous avons Cava, DaVinci et Procreate Il existe de nombreux autres cours chez Bring Our Laptop. Donc, où que vous trouviez ce cours, allez peut-être consulter certains de ces autres cours, et vous pourrez me rencontrer ou rencontrer l'un des membres de l'équipe qui apporte votre ordinateur portable. Tu peux aussi me suivre sur Figma, d'accord ? Allez sur ce lien ici, figma.com slash APBYOL Et tu peux m'y suivre. De plus, ce qui pourrait être vraiment intéressant pour vous maintenant, c'est le FGMA. Il s'appelle CFI et se produit une fois par an C'est le genre d'émission qu'ils font. D'accord ? C'est en personne, et ils le font en ligne. Essayez donc de vous y rendre en personne. C'est super cool. Mais vous pouvez également le faire en ligne. Et c'est juste qu'il y a une diffusion en direct, et ils publient tous les nouveaux produits. C'est donc un excellent moyen de l' inscrire sur votre calendrier une fois par an, juste pour vous tenir au courant. Je vais continuer à mettre à jour le cours, d'accord ? Et nous le pouvons. C'est distrayant, non ? Et il ne porte pas ses lunettes. Je ne peux pas les avoir maintenant parce qu'il y a le chat là-bas. Mais oui, la configuration est une bonne chose à faire. Je tiens également à remercier les éditeurs. Cela représente beaucoup de travail pour moi, mais tout autant de travail énorme pour Taylor et Jason, les éditeurs de ce cours. Je vous remercie donc beaucoup. Également pour Sepan Inappropriate Veuillez patienter. Les chats sont à la fois mignons, mais aussi un peu dégoûtants. Tu es dégoûtant. L'autre chose que j'adorerais vous demander, c'est si vous y revenez. L'autre chose que j'adorerais demander, c'est que nous sommes amis maintenant, c'est si vous connaissez quelqu'un ou si vous trouvez un moyen de partager, genre : « Hé, j'ai suivi ce cours. Vous devriez le consulter sur Apportez votre propre ordinateur portable. Ce serait génial aussi. Le type de recommandation est le meilleur moyen pour les gens de trouver mon contenu et de nous permettre de continuer à créer des choses ici sur Bring your laptop Donc, si vous pouviez trouver un moyen, un lien, une publication sur les réseaux sociaux, ce serait bien aussi. Maintenant, parce que vous faites partie de Bring your own laptop, vous bénéficiez de fonctionnalités supplémentaires spéciales. Il y a donc évidemment des certificats. Donc, si vous ne les avez pas faites, vous devriez les faire. Il y a un laissez-passer, un mérite et une distinction. Nous les avons en quelque sorte abordés dans le cours, mais ce sont des points que vous pouvez ajouter à votre CV, et c'est surtout ce qui est bon pour pratique, car vous devez réaliser le projet de classe. Assurez-vous donc de les vérifier. Vous travaillez dans une grande organisation ou dans une école, nous faisons des réservations de groupe en apportant votre ordinateur portable. Vous bénéficiez d'une réduction si vous réservez plus de cinq. OK, alors jetez également un coup d'œil à cela pour les réservations de groupe sur Bing, notre ordinateur portable, si vous voulez mettre votre équipe ou vos étudiants au courant. Oui, consultez les réservations de groupe sur Bing, notre ordinateur portable. L'autre point à vérifier, ce sont nos défis de conception, d'accord ? Alors apportez notre ordinateur portable, vous verrez qu'il y a, vous savez, un défi régulier. Parfois, la conception graphique, parfois l'expérience utilisateur, vidéo pour les découvrir et les impliquer. Tu cherches en quelque sorte un moyen de t' entraîner . Assurez-vous d'entrer dans le vif du sujet. Encore une fois, félicitations pour votre arrivée jusqu'au bout. High Five. Voilà. Ouais. C'est beaucoup de travail. J'espère que vous avez beaucoup appris et que j'ai apprécié de passer du temps ensemble. C'est marrant, non ? J'aime faire ces choses. Hum, c'est la fin. Comment y mettre fin ? Il n'y a rien de plus gênant qu'un chat qui se ressemble, je suppose. Nous allons nous arrêter là. Chats mignons, dites au revoir. Il n'y a rien à voir ici. D'accord, mais j'espère vous voir un autre cours. Au revoir. Du gras au noir. Fate Black.