Les bases de l'UX Design pour interfaces utilisateur dans Figma

1. Introduction à la formation sur les bases de Figma: Bonjour. Je m'appelle Dan Scott, et voici le cours Figma Essentials Ensemble, vous et moi allons apprendre tout ce que vous devez savoir pour démarrer en tant que designer UX au sein de fGMA Au cours du cours, vous apprendrez à maîtriser tous les outils de Figma Je partagerai également tous les principes fondamentaux du design UX pour créer belles interfaces utilisateur et facilement de belles interfaces utilisateur et des prototypes attrayants dans Figma Qui est-il ? Je suis Dan Scott. Je suis designer depuis plus de 25 ans. J'ai remporté plusieurs prix d'enseignement et mes cours en ligne ont été suivis par plus d'un million de personnes maintenant, tout comme vous. Tout d'abord, nous vous donnerons votre propre brief unique et vous montrerons comment travailler avec un personnage UX Vous allez apprendre à créer des wireframes simples. À partir de là, vous apprendrez à intégrer correctement les couleurs et les images dans vos designs. Vous découvrirez ce qu'il faut faire et ne pas faire pour choisir des polices pour les applications Web et mobiles Vous apprendrez à créer vos propres icônes, boutons et toutes sortes de composants d'interface utilisateur à l' aide des fonctionnalités de dessin de Figm Vous apprendrez les termes effrayants tels que les composants, les contraintes et les variances. Ils sont tous très faciles, d' où vous savez comment faire. Vous nous simplifierez également la vie en utilisant kits d'interface utilisateur et des plug-ins gratuits pour FigMA afin d' accélérer notre flux Vous apprendrez également à utiliser certaines des nouvelles fonctionnalités pratiques de l'IA de FigMA Nous élaborerons un guide de style simple prêt à être transmis au client. Vous allez apprendre à créer des microinteractions et des animations Tout au long de la collaboration avec les autres membres de l'équipe, un aperçu des sites FuGMA afin que vous puissiez créer le site vous-même et l' exportation de tous les bons fichiers prêts à être transmis à un développeur ou à un ingénieur logiciel Tout au long du cours, vous avez des devoirs que j'ai définis afin que vous puissiez mettre en pratique ce que vous apprenez et avoir quelque chose d'unique pour votre portfolio à la fin. Désormais, ce cours s' adresse aux personnes novices dans le domaine du design, UIX et de la conception de l' expérience utilisateur Même si vous n'êtes pas vraiment sûr de ce qu'est le design UX , ne vous inquiétez pas, nous allons commencer par le début et procéder étape par étape. Très bien, mon ami, c'est l'heure. Inscrivez-vous, rejoignez-moi et passez de Figma Zero à Figma Hero. Est-ce qu'il crée sa propre chemise ? Il l'a fait Je suis tellement fier de celui-ci. C'est cool Je l'ai en quelque sorte retourné sur le côté et je l'ai rendu dégoulinant. Sauf que l'or ne se repasse pas. Toutes les autres pièces sont bien repassées. Ce passage me rend furieuse. Pourquoi ne repasses-tu pas l'or ? Pourquoi ? Euh. 2. Commencer la formation Figma: Bonjour Tu es partante. toi qui l'as fait. Bon travail. Hé, tout d'abord vous devez télécharger les fichiers d'exercices. Il y aura un lien sur cette page quelque part. Téléchargez-les, les fichiers dont vous avez besoin pour ce cours. De plus, dans ces fichiers d'exercices il y aura une feuille de raccourcis, d'accord ? Nous n'allons pas trop approfondir les raccourcis de celui-ci. Nous le ferons, mais il y qui sont vraiment naturels et utiles à utiliser. J'ai donc créé une feuille que vous pouvez imprimer, coller à côté de votre ordinateur et encercler celles que vous utilisez le plus souvent. L'autre point, c'est qu'il existe une version gratuite et une version payante de Figma Je vais commencer le cours en utilisant un grand nombre de fonctionnalités gratuites, et nous tomberons sur des fonctionnalités payantes au fur et à Donc, si vous prévoyez d'utiliser uniquement la version gratuite, c'est très bien. On peut aller très loin dans Figma. Vous savez, vous pouvez être un concepteur d'expérience utilisateur très compétent dans Figma en utilisant la version gratuite, et je le ferai, mais je ne me cacherai plus de la version payante, car il y a aussi des choses vraiment intéressantes à faire là-dedans Donc, même si vous n'utilisez pas la version payante, il est bon de voir quelles sont les fonctionnalités payantes et comment les utiliser. L'autre point est qu'il existe une version de bureau et une version basée sur un navigateur. Je vais utiliser la version de bureau. Ils sont exactement les mêmes. Un que vous pouvez télécharger et avoir sur votre ordinateur, un autre que vous pouvez simplement utiliser dans votre navigateur Chrome. n'y a aucune différence entre les deux. Utilisez l'un ou l'autre. Je vais utiliser la version du navigateur parce que je suis vieux, et j'aime que les choses soient sur mon bureau sans aucune raison valable. Alors voilà. L'autre point, c'est que je peux parler très vite, surtout si je suis au début d' un cours et que je viens de prendre un café. Je suis peut-être oui, parlez trop vite pour certaines personnes, surtout si l'anglais est votre langue seconde. L'autre point, c'est que certaines personnes pensent que je parle trop lentement. Tu peux m' accélérer. Il y a un rouage. C'est où ? Je pense que c'est par ici. Cliquez dessus. Tu trouveras une vitesse. Tu peux m'accélérer ou me ralentir comme bon te semble. L'autre point, c'est que Figment est vraiment doué pour mettre à jour des choses. Ils disent : « Améliorez les choses ». Changeons-le. Rendons-le plus clairement. Le problème pour moi, cependant, c'est qu'en tant que créateur de cours, ils changent les choses et les améliorent , et cela peut être difficile. Si c'est un gros changement, je vais juste réenregistrer la vidéo et tu ne le sauras pas. S'il s'agit d'un petit changement, il suffit de consulter les commentaires. Il y a peut-être une note en bas, comme si elle s'appelait comme ça avant et maintenant, d'accord ? Mais il est au même endroit, il a la même apparence et fait la même chose. Gardez donc un œil sur cela tout au long du cours. L'autre point est le suivant qui est impatient de commencer ? Je le suis. J'adore créer ce cours. J'ai hâte de commencer. Faites-moi savoir dans les commentaires si vous l'êtes aussi. J'adore les consulter après avoir suivi un cours. Je me demande : « Qui est venu pour commencer ? D'accord. Poursuis le cours, Dan. OK, allons-y. 3. À quoi sert Figma ?: Bien, dans cette vidéo, nous allons parler de ce qu'est la figma et de ce qu'elle n'est Donc, figma, c'est devenu beaucoup de choses. Il est principalement utilisé pour le travail UIUX. Donc, en gros, lorsque vous le résumez, vous créez ou concevez un site Web ou une application. Alors un client vient me voir et me dit, Dan, j'ai besoin de toi pour concevoir un nouveau site web. Vous ouvririez Figma et vous le conceviez dedans, puis vous le transformeriez en un véritable site Web Figma est donc l'apparence d'un site Web et constitue un moyen rapide de le concevoir pour que les clients l'approuvent. Pourquoi se donner la peine de le concevoir dans Figma et de le construire ensuite C'est principalement une question de vitesse. Il s' agit de prototypage rapide C'est en quelque sorte le terme clé désignant Figma et les alternatives à Figma Prototypage rapide. Donc, si le client vient me voir et me dit : je veux toutes ces fonctionnalités, je veux faire ces choses. Vous pouvez le concevoir rapidement, le donner au client. Vous pouvez le prototyper pour qu' il ressemble à un site Web et qu'il fonctionne comme tel . Les boutons s'enclenchent. Tu vas partout. C'est ce que nous ferons dans le cours. C'est ce qu' on appelle le prototypage Vous pouvez donc en faire un site Web vraiment compétent. Donc le **** peut revenir et dire, euh, ce n'est pas ce que je veux, ou que cela ne fonctionne pas, ou plus important encore, que vous pouvez le tester auprès des clients de ce client, et ils peuvent utiliser ce type de prototype. D'accord ? Ce n'est pas un site Web à part entière, mais il ressemble à un site Web, et ils peuvent s'y perdre. Et tu peux arranger ça. D'accord ? L'itération est ce qui fait de nous un designer UX, et c'est aussi ce qui rend Figma si puissante Je peux dire, très bien, client, voici votre projet, et ils disent, non, je peux revenir en arrière et apporter des modifications rapides, pas retourner voir le développeur et reconstruire cette énorme base de code Big que nous avons créée, d'accord ? Il suffit de faire glisser quelque chose dans Figma, prototype super rapide et facile Ensuite, retournez voir le client ou son client et dites : Qu'en pensez-vous maintenant, d'accord ? Et regardez-les s'en servir et réalisez qu'ils se perdent toujours. Changez les choses, changez la langue, modifiez la taille , vous savez, ajustez les choses très rapidement pour que tout le monde l'approuve. Le client dit Oui, j'adore ce Ensuite, vous pouvez travailler avec un développeur, d'accord, pour créer ce truc. Ou travaillez avec l'une des autres fonctionnalités de Figma, appelées sites Figma ou WordPress, ou quoi d'autre ? Il y en a d'autres dans ma tête Webflow, il y en a d'autres, d'accord ? Elementor. Il y a de nombreuses façons de le construire par la suite, d'accord ? Nous allons donc nous concentrer sur le côté design, le type de processus de conception UX, d'accord ? Et créez des sites qui ont l'air et l'impression de fonctionner. Tu dois juste savoir que ce n'est pas juste comme dans la création finale, d'accord ? C'est le genre de processus. Et pourquoi le faisons-nous ? Parce que c'est rapide et c'est beaucoup moins cher que de vous demander de le concevoir ou de passer du temps à créer ce site Web entièrement fonctionnel pour qu'il passer du temps à créer ce site Web entièrement fonctionnel y ait beaucoup de changements. donc là que Figma entre en jeu. C'est ce qu' il fait vraiment bien. Prototypage rapide. Maintenant, ce que Figma fait vraiment bien, c'est qu'elle s' insinue en quelque sorte dans l'espace général du design Figma est donc née pour créer des sites Web et des applications, d'accord, du prototypage rapide Mais maintenant, les gens ont excellé dans leurs outils, d'accord ? Et les gens ont commencé à l' utiliser uniquement pour des tâches de design générales. Donc, les outils que vous allez apprendre dans ce cours seront basés sur la conception Web et la conception d'applications, mais nous allons apprendre l'outil afin que vous puissiez également l'utiliser comme outil de conception général. Et les gens s' en servent pour cela. Ils l'appellent donc Figma Draw, mais c'est en quelque sorte intégré à ce cours Il y a aussi les outils de dessin. Vous vous demanderez donc : « Oh, pourquoi ne puis-je pas simplement concevoir ce dépliant ici Ou cette publicité sur les réseaux sociaux, vous pouvez totalement utiliser les compétences de ce cours. Nous devons nous concentrer sur UIUX, mais vous pouvez l'utiliser pour tout cela Certaines des autres activités de la FIGMA ne sont pas abordées dans ce cours Ils ont donc d'autres types d'outils. Il y en a un qui s'appelle FIG JAM, d'accord , qui est, vous savez , un produit à part entière. C'est comme un outil de tableau blanc comme Merro, d' accord, un peu comme des idées et du brainstorming Ils ont Figma Buzz, un outil de conception de réseaux sociaux spécifique qui constitue une sorte d'alternative à Canva ou Adobe Ils ont des sites Figma, d'accord, où vous pouvez prendre votre fichier Figma, d'accord, que nous sommes en train de créer, de le concevoir et de le transformer en D'accord ? Les sites Figma n' entrent donc pas dans le cadre de ce cours Nous y reviendrons un peu à la fin. D'accord, parce que c'est plutôt cool et le genre de prochaine étape de votre processus. Mais ce serait une alternative à quelque chose comme Web Flow ou Wordpress, d'accord ? Mais souvent, je crée des éléments dans Figma, d'accord, puis je les donne à un développeur pour qu'il un autre type de base de code, d'accord ? Mais si vous le construisez vous-même, vous pouvez utiliser les sites Figma Ils ont des diapositives Figma, qui est essentiellement une alternative à PowerPoint Qu'est-ce qu'ils ont d'autre ? Figma Buzz, réseaux sociaux ? Laissez-moi vérifier mes notes. Attends là-bas. Allons-y. Figma M est une sorte de version bêta du codage par IA Vous pouvez en quelque sorte lui parler pour coder votre site. C'est plutôt cool en dehors du cadre de ce cours. Nous allons nous concentrer sur ce qu'ils appellent Figma. Et c'est le genre d'utilisation générale, et ils l'appellent le design Figma. Nous allons donc le faire. Concentrez-vous sur la conception de l'interface utilisateur et de l'expérience utilisateur, mais sachez que les outils que vous allez apprendre peuvent également être utilisés à des fins de conception générale . C'est aussi une sorte d'alternative. Let's Photoshop More Adobe Illustrator, si vous connaissez ce logiciel. D'accord, donc c'est ce qu'il fait. Je m'amuse un peu. J'espère que cela vous sera utile, car Figma comporte de nombreuses facettes différentes Nous allons nous concentrer sur l'interface utilisateur, le design UX, et cela s'appelle Figma Design. Vidéo suivante. 4. Quelle est la différence entre une UI et une UX dans Figma ma ma: Bien, parlons de la différence entre UI et UX Les différences sont donc l'UY, l'interface utilisateur, l'UX, l'expérience utilisateur. L'interface utilisateur correspond aux pixels de la page, comme les polices que vous choisissez, les images, les couleurs, l'espacement. Tu es en train de le faire bien paraître. D'accord, vous étiez concepteur d'interface utilisateur, et c'est ainsi que j'ai commencé dans ce domaine. Le client viendrait me voir et me dirait : je veux un site Web. J'ai conçu que ça avait l'air cool. Ça lui a plu. Nous l'avons envoyé. D'accord, j' étais concepteur d'interface utilisateur. Là où je suis devenu designer UX c'est le client qui vient me voir avec un problème. Supposons que nous devions mettre à jour le paiement sur notre page. Nous voulons l'améliorer, d'accord ? Donc, au lieu de simplement concevoir quelque chose que je pensais être mieux, d'accord, je concevrais quelque chose. J'aurais une bonne idée et une hypothèse sur ce qui pourrait être fait, d'accord ? Ensuite, j'irais le tester, d'accord ? Je le testerais donc avec quelques personnes et je verrais elles trouvent cela plus facile. Est-ce qu'ils le trouvent plus fiable, d'accord ? Nous effectuons de petits tests en personne, ou vous pouvez le faire en ligne, ou, disons, apporter votre ordinateur portable. Nous effectuons de nombreux tests AB où nous disons : « D'accord, nous le faisons, nous examinons toujours les mises à jour du flux de paiement Nous faisons des tests AB où la moitié des personnes qui consultent le site web accèdent à l'ancienne version 1.5 du site et accèdent au nouveau. Et je me demande : « D'accord, est-ce que c'est mieux ? Avons-nous de meilleures conversions ? Moins de conversions ? Pourquoi ? Pouvons-nous changer cela ? Cela l'a-t-il amélioré ? Nous commençons à entrer dans le domaine de l'UX, d' accord, où nous testons nos idées, vous savez, en itérant rapidement, ce qui fait de nous un concepteur d'expérience Si vous avez déjà utilisé un site Web lorsque vous êtes tombé sur quelque chose de frustrant, ce sont des problèmes de conception UX, Et c'est quelque chose que vous allez prendre beaucoup plus en compte maintenant et vous devriez le faire, d'accord ? Donc, disons que j'utilise mon site Web bancaire via mon ordinateur ici. Je ne sais pas pourquoi je fais semblant de taper, mais, tu sais, l'une des petites frustrations, c'est à chaque fois que je vais sur ce truc, ils le mettent à jour Et maintenant, quand je saisis mon mot de passe et que j'appuie sur Entrée, cela ne fait rien. Vous allez prendre votre souris et cliquer sur le type de bouton de soumission. Vous êtes du genre à dire que c'est si facile d'entrer et d'ajuster cela et s'ils avaient fait quelques tests là-dessus, d'accord, ils constateraient que les gens sont frustrés et s'arrêtent là, et cela aurait été une solution facile, et cela aurait rendu l' expérience utilisateur beaucoup plus agréable à l'utilisateur dans son ensemble Ce n'est pas un mot. Mais tu vois l'idée. L'interface utilisateur nous place sur la page, comme elle en a l'air. L'expérience utilisateur est la façon dont les gens interagissent avec votre projet. Et c'est ce que nous allons faire dans ce cours. Nous allons examiner les deux interfaces utilisateur, et je vais vous donner quelques conseils sur la façon dont l' expérience utilisateur est réalisée et sur le prototypage tout au long du cours Nous allons en quelque sorte nous concentrer sur les outils Figma, mais je vais également essayer d'y intégrer certaines des meilleures pratiques en matière d'expérience utilisateur pour vous aider à démarrer 5. Réalisation dans ce cours Figma se: D'accord. Que gagnons-nous dans ce cours ? Nous allons le faire. Il s'agit d'un site Web pour une marque de commerce électronique particulière. Tout le monde va en avoir un. Celui que j'utilise pendant ce cours est pour les portefeuilles, d'accord ? Et faisons-en une démonstration rapide. Très bien, une petite newsletter d'abonnement apparaît. OK ? Nous pouvons aller à «   Apprenons-en plus ». Nous en faisons une sorte de page d'accueil, de page de fonctionnalités. Nous allons à la page d'achat. Les gens peuvent cocher des cases, ajouter des éléments, puis vous obtenez une page de confirmation. Et un interrupteur qui ne fait rien pour le moment. Nous allons créer une version de bureau et une version mobile de notre site. Le système de navigation mobile. Nous allons également créer des wireframes. OK ? Nous allons donc aboutir à ce type de version plus haute fidélité, ce type de version complète, mais nous allons également créer nos wireframes pour commencer, connecter le tout, afin qu'il soit diffusé et que nous puissions faire des Nous veillerons à ce que tout soit réactif afin qu'il puisse s'adapter aux différentes tailles d'écran. Nous allons créer un guide de style de base avec les styles et nos différents composants pour la navigation et les boutons. C'est très amusant. Alors pourquoi le construisons-nous ? Nous allons travailler sur ce point. Nous allons donc commencer par un brief décrivant ce que nous faisons et un personnage et nous allons créer ce qu'on appelle un Ta oh. En gros, parlons-en Dans la vidéo suivante, chacun aura son propre brief. Nous construisons tous quelque chose de légèrement différent. Vous recevrez notre produit et vous recevrez un petit personnage Un personnage est juste une description approximative de qui est le client, car si nous créons quelque chose pour tout le monde, cela devient un peu clair et ce n'est pas vraiment bon pour une personne en particulier Nous allons identifier pour qui nous le construisons. Dans ce cas, je le construis pour Sam. Je connais leur âge, je connais les informations de base les concernant, de sorte que lorsque nous prenons des décisions tout au long de notre processus de conception nous utilisons l'utilisateur, sa personnalité pour prendre des décisions, plutôt que de créer quelque chose que Dan veut parce que ce n'est pas pour moi, je ne devrais pas être le seul à décider, c'est cool Je pense que cela devrait fonctionner de cette façon. Je dois me séparer et me demander : que voudrait Sam ? Tout le monde en aura une légèrement différente. Sam aime la mode et les dernières tendances, donc je vais m'en servir dans ma tête. Alors que vous pourriez avoir quelqu'un de très respectueux de l' environnement ou soucieux de l'environnement. Cela va vraiment changer le design. Le public cible. Nous devons le construire pour eux, pas pour vous, pour le client ou votre client, pour Sam. Nous allons maintenant aborder un peu le processus de conception UX. Nous dirigeons principalement le logiciel, mais je le présenterai tout au long du cours afin que vous ayez une compréhension de base du processus de conception UX. Mais après cette vidéo ou après ce cours, jetez un œil aux personas, un peu plus. Renseignez-vous sur eux. C'est une question très simple Maintenant que nous connaissons notre personnalité, nous allons travailler sur ce flux de tâches Nous allons tous construire le même. Nous allons créer une page d'accueil, une page de fonctionnalités, une page de paiement et une page de confirmation de paiement. C'est ce qu'on appelle un flux de tâches. Il s'agit d'une tâche très spécifique à effectuer sur un site Web. Souvent, on vous donne un travail pour un site existant qui n'est pas une refonte complète C'est comme si vous mettiez à jour le flux d'inscription ou le flux d'annulation ou que vous mettiez à jour la manière de télécharger un document. Vous travaillerez sur un flux de tâches spécifique. Il est probablement important maintenant de parler de la différence entre un flux de tâches et, disons, un flux utilisateur. J'ai trouvé un bon exemple ici. Il s'agit davantage d'un flux d'utilisateurs. Comme le flux est très linéaire, ce flux d'utilisateurs, il existe de nombreuses manières différentes, de nombreuses décisions pour accéder à cette dernière partie et vous devez toutes les prendre en compte. Un travail bien plus important que ce que nous faisons dans ce cours. Disons un bon flux d'utilisateurs pour le site Web Bring our Laptop. Il se peut que quelqu'un arrive sur la page d'accueil, qu'il s'inscrive et qu'il y accède via l'option de recherche pour suivre un cours qu'il y accède via l'option de recherche pour . Il y a peut-être des gens qui cherchent. C'est peut-être dans les sourcils, les gens. Ils ont peut-être été publiés par le biais d'une annonce qui mène directement à la page d'aperçu. Il existe toutes ces manières différentes de suivre un cours vidéo. En tant que concepteur d'expérience utilisateur chargé d'un flux utilisateur, sont toutes les considérations que je dois prendre en compte. Un travail plus important. Nous faisons quelque chose de gentil et de simple, juste une tâche, d'accord. Donc, dans la prochaine vidéo, je vais vous donner votre brief unique. Nous allons utiliser ce flux de tâches. Nous en créerons une version filaire, nous la testerons. Nous en créerons ensuite une version hiidelity. Nous allons également créer une version de bureau. Nous allons le concevoir. Nous allons le rendre inactif Tout en apprenant tous les éléments essentiels de Figma, mais nous intégrerons également une partie de ce processus de conception UX C'est bon. Tu es prêt ? Je suis prêt. C'est bon. Allons-y. 6. Projet de cours 01 - Rédiger votre propre cahier des charges: est bon, c'est l' heure des devoirs. Il a dit devoirs ? Je voulais dire pratiquer en apprenant. Nous allons donc définir des tâches tout au long du cours, afin que vous ne vous contentiez pas de suivre aveuglément pour créer quelque chose Et ce qui est cool, c'est que vous pouvez créer quelque chose d' unique pour vous. Nous allons utiliser ce qu'on appelle random project generator.com pour générer un brief unique, mais nous allons tous suivre le même flux de tâches Nous allons donc tous le faire. Nous allons tous créer une page d'accueil pour un produit, les fonctionnalités du produit. Il y aura une page de paiement et une page de confirmation. Nous suivons donc le même flux de tâches. Mais si nous utilisons le générateur de projets aléatoires, nous pouvons tous créer quelque chose de légèrement différent que nous pouvons utiliser et qui est unique pour notre portefeuille. Ouvrez donc le document sur les projets de classe. Cela devrait se trouver dans vos fichiers d'exercices. Ça y est, d'accord ? Et la tienne sera bien plus remplie que la mienne. Nous en sommes donc à celui-ci, le projet 01. Visitez donc random project generator.com et cliquez sur le bouton UyX. Alors faisons-le. D'accord ? C'est un outil que mon équipe et moi avons créé, et vous pouvez cliquer sur UyXO pour entrer un nom Peu importe ce que c'est. D'accord ? Votre nom de famille, le nom de votre ami, nom de votre animal de compagnie, le nom de votre enfant , le nom de votre grand-mère, ce que vous voulez, puis un lieu D'accord ? J'habite donc à Limerick, et je vais cliquer sur Générer mon projet D'accord, et vous serez créé votre propre personnage. Ils seront très similaires et la différence résidera dans le produit généré aléatoirement et dans le nom que vous utiliserez, mais tout le reste sera structurellement le même Nous concevons donc tous la même chose, mais avec un peu d'originalité. Si vous n'aimez pas ce que vous avez, n'appuyez pas sur Réessayer. C'est rouge pour une bonne raison. Je te préviens. D'accord ? Donc je fais Scott Wallets Mon client est Sam. Et ça m'en dit un peu plus sur eux. Ce que nous pouvons faire, c'est le télécharger au format PNG. Vous l' avez donc pour pouvoir y revenir, téléchargez-le simplement pour votre machine. Conservez-le dans un endroit sûr. Nous allons l'utiliser tout au long du cours, et nous l'utiliserons également vers la fin lorsque nous combinerons pour en faire un élément de portfolio. Très bien, c'est ainsi que fonctionnent les projets de classe. Je vous dis ce qu' il faut faire, et parfois je vous demande de le télécharger parfois je vous demande de le télécharger sur le site lorsque nous avons quelque chose d'un peu plus intéressant à partager, mais pour le moment, enregistrez simplement votre brief quelque part, gardez-le en tête lorsque nous concevons tout au long de ce cours. C'est bon. C'est ça. L'heure de la prochaine vidéo. 7. Wireframe basse fidélité ou haute fidélité dans Figma : quelle est la différence entre les fonctions wireless et haute fidélité ? ?: D'accord. Parlons du cadre filaire par rapport à la haute fidélité. Oh. C'est assez simple. wireframes sont des wireframes, et haute fidélité sont ces Dans ce cours, nous allons donc créer le wireframe, d'abord, le tester, puis développer d'autres fonctionnalités de conception pour cette haute fidélité On l' appelle donc normalement une image en Y, certains l'appellent low fi et hi fi ou filaire et haute fidélité Mon conseil est de ne pas l'ignorer. Le conseil est de ne pas sauter l'étape du wireframing. Quelqu'un vient vous voir avec un projet ou un brief, vous pouvez lancer un cadre métallique et le tester, comme le fonctionnement des boutons et le système de navigation qui permet d' effectuer des tâches de base en quelques minutes. Vous retournez voir votre client responsable des parties prenantes et vous lui demandez : est-ce ce que nous essayons de faire ? Et ils peuvent dire : Oui, vous pouvez passer à autre chose, plutôt que de passer des heures à mettre en conserve, à suivre sélectionner des images et à faire les choses correctement pour qu'elles Ce n'est pas ce que je voulais dire. C'est rapide, c'est sale, c'est facile. Et vous allez devoir le faire pour ce cours car nous allons d'abord le créer. Et cela va nous donner une grande partie des fonctionnalités fondamentales de Figma avant de passer à autre chose et de nous lancer dans la jolie Pourquoi les cadres ne doivent pas nécessairement ressembler à ça. Il n'y a pas de véritable règle sur ce qu'ils peuvent faire. Normalement, les gens y mettent une ligne pour une image, mais c'est le cas. Trouvons quelques exemples sur Figma. Je suis à Figma. Je vais aller ce bouton d'accueil en haut. Je vais passer à celui-ci qui parle de modèles et d'outils. Ils n'arrêtent pas de déplacer ce bouton, mais ils y jettent un œil, autrefois appelé communauté. Je vais taper en haut ici. Je vais taper un wireframe. Jetons un coup d'œil à quelques exemples. Vous pouvez donc simplement emprunter le kit de quelqu'un d'autre. Alors jetez un œil à celui-ci. Cliquez dessus une fois. In va voir. Celui-ci remonte encore plus loin, car ils en ont retiré le texte. Tu peux le faire aussi. Ce que vous remarquerez cependant, c'est qu'ils sont monochromes Certaines personnes utilisent une seule couleur, mais pas plus d'une. Choisissez une couleur inoffensive ou utilisez simplement le noir et blanc et des versions de gris et choisissez une police très offensive Nous cherchons des choses ennuyeuses ici, parce que ce que nous ne voulons pas faire, jetons également un coup d'œil à celle-ci. OK ? Disons que c'est beaucoup plus complet. C'est un peu plus chic Encore une fois, il n'y a pas de véritables règles. Vous pouvez en choisir un qui a un peu plus de goût en matière de design. Ce que vous voulez éviter, c'est d'avoir des conversations avec vos clients et parties prenantes genre « Oh, ce n'est pas Alfon Oh, ce n'est pas la bonne image. Oh, on ne dit pas ça. Beaucoup d'autres dans notre titre. Ce que vous faites ici ne fait que tester la fonction. Lorsque je clique sur ce bouton, il passe ici, puis il passe ici. Est-ce que je crée toutes les bonnes pages ? Oui. Génial. Ensuite, nous pouvons passer à la haute fidélité. Restez ennuyeux, maintenez-le fonctionnel. Nous aborderons plus tard l'utilisation des modèles d'autres personnes. Mais si vous êtes tombé ici, pensez à la page d'accueil, aux modèles et aux outils J'ai fait une recherche ici et vous pouvez les ouvrir. Ouvrons celui-ci ici. Et il est juste écrit « ouvrir » et « Fig. » Ce qui est cool, c' est que j'ai maintenant ce fichier. C'est ouvert dans un autre onglet, je peux retourner à la page d'accueil ici. Mais si je passe aux articles récents, ce n'est plus que mon dossier. Figma est cette formidable communauté où les gens partagent leurs fichiers et où vous pouvez les emprunter, vous les approprier, les voler. Bien entendu, nous ne voulons pas simplement le dupliquer et le distribuer comme le nôtre, mais si vous aimez le style de certains d'Okay, à partir des modèles, vous pouvez les parcourir et commencer à les récupérer. Ils sont tous sélectionnables. Vous pouvez commencer à travailler avec eux. Mais c' est un petit avantage dans la classe. Je vais fermer cet onglet. Je reviens aux modèles et j'ai supprimé le cadre filaire d'ici juste pour vous montrer une haute fidélité. Ce n'est pas si chic que ça. Ce sont juste des sites Web vraiment créés. Je pourrais ouvrir celui-ci et commencer à travailler avec celui-ci. Celui-ci ressemble à un cabinet d'avocats. Ils ont beaucoup travaillé. Je travaille peut-être aussi pour un comptable ou un avocat. J'aime bien ça. Je peux commencer par ça. Et commencez à le changer à partir de mes propres polices, mes propres images, mais j' aime bien la structure. Il s'agit d'une haute fidélité, l' étape du wireframing Mauvais. C'est bon. Passons au cours et commençons à créer des choses. Tout ça, c'est tout. C'est le filage par opposition à l' infigma haute fidélité Passons au cours suivant. Commence à fabriquer des trucs, Dan. 8. Création de votre fichier de design et présentation des frames dans Figma ma: Là-bas. Dans cette vidéo, nous allons créer notre tout premier fichier de design, puis nous allons commencer à ajouter pages, appelées cadres. Nous allons faire un peu de navigation de base, et nous allons créer quatre boîtes blanches, ce qui est très intéressant Tu les vois à l'écran ? Quoi qu'il en soit, ce sera la mise en page de notre téléphone portable pour notre projet. Allons-y. Très bien, j'ai donc ouvert Figma. J'en ai une nouvelle copie ici. Donc, ce que nous voulons faire, c'est que cet écran change beaucoup. Chaque fois que je crée un cours, cet écran est différent. En gros, pareil. Ce que vous recherchez, c'est cette petite icône de la maison. Ils le déplacent également un peu, mais cela devrait se trouver dans le coin supérieur gauche. Ensuite, nous cherchons à créer ce que l'on appelle un fichier de conception. N'oubliez pas que ce cours porte sur le design Figma. Pour la première fois, ma souris est au ralenti. C'est bon, attends là. C'est bon, ma souris est revenue. Il y a donc un bouton de conception. Vous pouvez cliquer dessus. Mais dans Figma, il y a dizaine de façons d' aller partout. Je vais essayer de vous donner le meilleur moyen constant ou le meilleur moyen pour atteindre notre niveau. Si tu découvres un autre moyen. Bon travail. Si tu préfères cette méthode , fais-la. Par exemple, vous pouvez cliquer sur le fichier de conception, sur ce bouton Plus, puis sur le fichier de conception. Vous pouvez aller voir Reese pour savoir s'il s' agit de brouillons, appuyer sur Plus pour obtenir un fichier de conception Il existe de nombreuses façons d' obtenir un fichier de conception. Très bien, alors créons-en un. Boum. En gros, il s'ouvre dans un nouvel onglet ici, voir Accueil le fichier sans titre que nous avons ouvert, accueil le fichier sans titre vous pouvez travailler à partir de modèles Pour commencer, vous pouvez travailler à partir de modèles. Nous n'allons pas le faire. Vous pouvez passer le curseur au-dessus d'eux, et il vous les montre simplement. Ce n'est que le début. Nous utiliserons des modèles plus tard lorsque nous serons meilleurs, mais nous devons repartir de zéro. Mettons fin à tout ça et nous arriverons à ce truc ennuyeux. Très bien, allons-y et créons une page. Vous pouvez le faire en utilisant ce bouton en bas. C' est ce qu'on appelle des cadres. Les cadres ressemblent à des pages ou à des pages supérieures dans Adobe Land Cliquez sur cette petite icône en bas, cliquez et dessinez quelque chose. Vous avez maintenant une page. Ce petit curseur passe par défaut à l'outil de sélection une fois que vous l'avez dessiné, donc si vous voulez une autre page, vous allez revenir à l' outil cadre, en dessiner une autre Pour en revenir à l'outil de sélection, c'est en fait très pratique. Maintenant, nous voulons une taille spécifique parce que nous voulons la taille de notre téléphone pour laquelle nous allons faire notre maquette Ce que nous pouvons faire, c'est les supprimer en cliquant simplement sur le nom en haut. Vous voyez si je clique sur le nom en haut, surligne le tout et que je peux appuyer sur Supprimer sur mon clavier. Je veux aussi me débarrasser de ce type. Ce que je vais faire, c'est passer à mon outil de cadre. Ce que vous remarquerez, c'est que sur le côté droit, vous devez vous concentrer sur le design, c'est ce qu'il devrait être. Ce cadre peut avoir plusieurs tailles prédéfinies. agisse d'un téléphone, d'une tablette, d'un ordinateur de bureau, Qu'il s'agisse d'un téléphone, d'une tablette, d'un ordinateur de bureau, passons au téléphone et utilisons la taille la plus courante à l'heure actuelle. L'iPhone 16, c'est je ne sais pas. Ils sont tous à peu près identiques et on ne s'attend pas à ce que vous les conceviez pour toutes les tailles de téléphones. On peut s'attendre à ce que vous utilisiez un téléphone, une tablette et un ordinateur de bureau, si vous créez, par exemple, un site Web. S'il s'agit d'une application, vous n' allez évidemment utiliser qu'une seule taille, le téléphone. Nous allons commencer par l'iPhone 16. Si vous regardez ce film dans le futur et qu'il y a l'iPhone 500, suffit de rechercher sur Google la taille de téléphone la plus utilisée. Google vous indiquera ce que possède la plupart des clients du monde ou vous pouvez découvrir ce que possède votre patron client comme téléphone, car il le testera et vous voulez l'impressionner le plus Vous voudrez donc utiliser son site. Je vais utiliser l'iPhone 16. Si nous le faisons pour les réseaux sociaux ou autre, vous devez avoir une taille spécifique. Pouvez-vous voir si j'ai sélectionné le nom en haut, donc si vous n'êtes pas sélectionné ici sur le côté droit, vous pouvez taper n'importe quelle taille. Si cela doit être de 500 par 800, vous pouvez le faire. Ce n'est pas ce que je veux. Je vais donc utiliser le bouton Annuler sur un Mac, c'est la commande Z, contrôle Z sur un PC pour le ramener à la taille normale de l'iPhone. Il se trouve également sous Modifier dans Annuler, ou si vous utilisez la version du navigateur, vous aurez une petite barre en haut où vous pourrez accéder à Modifier Annuler en tant que. C'est réglé. J'ai dit que nous n'allions pas faire trop de raccourcis, mais il y en a certains qui sont tout simplement inévitables. L'autre chemin est très long. En bref, le raccourci est que je veux zoomer et dézoomer, maintenir la touche commande enfoncée et appuyer sur le signe plus sur mon clavier, et le signe moins apparaît à nouveau. Maintenez la touche Commande enfoncée sur un Mac, Contrôle sur un PC, puis zoomez et dézoomez. Tu peux l'utiliser ici. Il y a une petite liste déroulante manuelle, mais vous allez devenir fou en essayant de l'utiliser ici. Effectuez un zoom arrière. Remontez. Effectuez un zoom arrière. Commande ou contrôle en plus ou en moins. C'est bon. Nous avons donc ce document, qui s'appelle iPhone 6-1. Ce n'est pas drôle. Nous pouvons le renommer en double-cliquant dessus ici appelant cette page d'accueil et en appuyant sur Enter on Les gens préfèrent aller ici sur le côté gauche. Assurez-vous que vous êtes dans le dossier, pas les actifs. Nous le ferons plus tard. Accédez à Fichier et vous verrez en bas sous vos couches Vous pouvez également double-cliquer dessus . C'est à vous de décider. J'en veux deux. Je peux retourner à mon outil de cadrage et dire : je veux un autre iPhone 16 et je vais le déposer à côté. Appelons celui-ci. C'est quoi celui-ci ? Fonctionnalités O. Une autre façon de le faire est de sélectionner les fonctionnalités du mot et de simplement copier-coller. Commande C, Commande V, sur Mac, Contrôle C, Contrôle V, sur PC, le copier-coller standard. Non, merci. Autre raccourci que je voudrais vous montrer, maintenez la barre d'espace enfoncée, nous ne sommes qu'une seule vidéo créons des choses et nous utilisons déjà le raccourci, Stan, les vrais raccourcis. Vous maintenez la touche de la barre d'espace enfoncée et vous verrez votre curseur se transformer en main, vous cliquez sur le bouton de maintien et vous le faites glisser Maintenez la barre d'espace enfoncée, puis cliquez sur Maintenir le glissement. Maintenant, nous avons ces trois-là. C'est bon. Maintenant, selon le travail, on peut s'attendre à ce que vous utilisiez à la fois un téléphone, une tablette et une version de bureau. Ce que vous pouvez faire, c'est faire un petit zoom arrière. Commande moins ou Contrôle moins sur un PC. Cliquons sur les fonctionnalités, copiez-les et collez-les. Ce que je vais faire, c'est cliquer sur « Mettre en attente » et je pourrai faire traîner ces gars. Ces cadres, je peux les traîner et dire, je veux que celui-ci soit fait ici. Peux-tu faire glisser le nom ? Si vous faites glisser les bords, vous pouvez en quelque sorte modifier manuellement la taille de votre cadre. Je vais annuler ça. Et ici, je peux dire ce cadre, je veux que tu ne sois pas juste un cadre, mais je veux que tu ne sois pas Android 16, je veux que tu sois. Qu' allons-nous faire ? Je prie P 11. OK ? Voyez-vous que le cadre s'est beaucoup agrandi ? Barre d'espace, maintenez-la enfoncée, cliquez et faites glisser. Lorsqu'elle est sélectionnée, vous pouvez voir cette rotation ici. Vous pouvez décider s' il s'agit d'un paysage ou d'un portrait. Il suffit de double-cliquer dessus. Appelez ça la page d'accueil. OK. Encore une fois, copiez et collez le jeu. Nous pouvons ajouter des fonctionnalités. J'ai oublié celui-ci, celui-ci s'appelle Checkout. Je dois le copier-coller. Clic plongeant. C'est ce qu' on appellera confirmation. Vous pouvez le faire pour mobile, pour tablette, pareil pour ordinateur de bureau. Allons prendre les deux. J'ai juste cliqué et fait glisser une case autour des deux et j' ai copié et collé Je pense qu'ils se sont retrouvés l'un sur l'autre. Ils l'ont fait. Nous voilà donc en bas. Celui-ci ici va être cadre, je veux qu'il soit de la taille du bureau. L'ordinateur de bureau, vous pouvez le voir, il y a un tas de choses. Vous pouvez utiliser l'Apple Watch. Vous pouvez utiliser certains formats à base de papier. Les posts sur Twitter, ils sont tous là. Je cherche Scroll Scroll Scroll. Je l'ai dépassé. C'est un ordinateur de bureau. C'est une taille d'ordinateur de bureau très courante et c'est ce que la plupart des gens utilisent pour concevoir un site Web, même s'il existe de nombreuses tailles différentes en ligne. Je peux le traîner là-bas. Tu as compris l'idée. Ce que j'ai tendance à faire, c'est d'abord concevoir pour quelque chose. Nous allons d' abord concevoir pour les appareils mobiles pour cette structure filaire, puis nous allons d' abord concevoir pour les ordinateurs de bureau lorsque nous travaillerons sur notre site Web C'est une conversation à avoir avec votre client. Ils voudront peut-être voir les deux. Mais disons « apportez votre propre laptop.com ». Mon site. Nous privilégions les ordinateurs de bureau, car la plupart des gens regardent des vidéos et interagissent avec des logiciels. Ils sont sur leur ordinateur. Nous concevons d' abord pour cela, puis nous déterminons comment cela s'intègre dans le mobile. De nombreux sites seront désormais d'abord mobiles. Nous concevons d'abord pour les appareils mobiles , puis nous proposons une version pour ordinateur de bureau. Vous pouvez les concevoir simultanément. Souvent, je dessine l' une d'entre elles, la plus importante, puis je détermine les autres tailles intermédiaires. Ce que je vais faire, c'est dézoomer suffisamment pour que je puisse tout voir. N'oubliez pas de commander moins ou de contrôler moins sur un PC. Je vais juste faire glisser une boîte autour de tous ces gars parce que je vais d'abord travailler sur mobile. Je vais juste cliquer sur Supprimer pour qu'ils disparaissent. Si vous vous perdez, vous pouvez parfois zoomer par accident ou si vous appuyez sur votre molette de défilement, vous zoomez, zoomez et zoomez et vous vous demandez  : « Où diable suis-je OK, tu pourrais utiliser ces petites barres de gommage ici. Bonjour. Emmenez ces petits gars ici et essayez de trouver une issue. Souvent, il est plus facile de monter ici et de demander : pouvez-vous zoomer pour l'ajuster ? Je vais juste placer tout ce que tu as au milieu de l'écran. Voilà le nom de notre document. Par exemple, certains logiciels vous demanderont de nommer, vous savez, le fichier dès que vous le créez. Des chiffres comme ça. Vous vous retrouvez donc avec 1 million de fichiers sans titre. Non, c'est courant. Mais nous allons être super géniaux, et nous allons renommer notre fichier J'ai donc double-cliqué ici, je vais lui donner un nom Nous allons appeler Scott, tu appelles le tien par ton nom, d'accord ? Donc tu ne fais pas Scott eCom. Je ne sais pas, vous faites Sandy ou Jim, quel que soit le nom de votre entreprise. Voici notre site eCom, et nous allons passer au V One parce que nous ne sommes pas cavernes. Ne soyez pas cette personne. Finale. Finale. Un, nouveau. Tu ris parce que tu le fais. OK ? Allons-y. Peu importe que ce soit V un ou A, B, C, quelque chose comme ça. Donc, lorsque nous devons mettre à jour d'anciens fichiers, oui, c'est plus facile à trouver. Il existe une méthode sophistiquée de création de versions dans Figma, mais cela va fonctionner pour nous maintenant Vous pouvez également double-cliquer dessus ici. OK. Et vous pouvez le fermer en fermant le dossier ou en appuyant simplement sur cette petite croix dans le coin et le tour est joué. Tu es de retour chez toi. Et ce que vous constaterez c' est que par défaut, ce sont les plus récents, la plupart du temps Si ce n'est pas le cas, allez à Recence et vous verrez qu'il est là. Regarde, on vient. Nous allons donc cliquer dessus, l'ouvrir dans un nouvel onglet. Rentrons chez nous. Et ce que vous constaterez, c'est que lorsque vous avez plein de fichiers appelés « sans titre », vous pouvez cliquer dessus avec le bouton droit sur un Mac, si vous n'avez pas de clic droit sur votre souris, vous pouvez appuyer sur Ctrl sur votre clavier et appuyer sur « cliquer PCP, vous allez cliquer avec le bouton droit de la souris. Je le fais aussi sur mon Mac. Mais vous pouvez cliquer avec le bouton droit de la souris et les renommer ici. L'endroit où vous le faites n'a pas vraiment d' importance. Et ces choses-là, ce sont des douleurs aux fesses. Je vais juste les sélectionner. Go a simplement fait glisser une boîte autour d' eux et les a supprimés OK, c'est un peu comme s'habituer aux fichiers Figma. Je trouve juste qu'ils compliquent ma vie. Je me demande : « Est-ce que je les ai faits ? D'où viennent-ils ? Vous pouvez les laisser ici, ou vous pouvez cliquer dessus avec le bouton droit de la souris et passer à la corbeille. Oui. Prenez également ces deux-là et supprimez-les juste pour mettre de l'ordre. Bien, revenons-y, soit en double-cliquant dessus, soit en cliquant sur les onglets déjà ouverts. Et c'est tout. Nous avons dessiné quatre cases blanches. Bon travail. Nous avons tous pensé que Figma serait plus excitante Mais nous avons appris ce que les cadres sont des sortes de pages, et nous avons déterminé ce qu'est un fichier de design figma C'est le genre de chose qui héberge tout cela. Très bien, allons-y et créons d'autres choses dans la prochaine vidéo. Je t'y verrai. 9. Les bases de la police dans Figma ma: Bonjour. Dans cette vidéo, nous allons aborder certaines des bases de la typographie. Nous n'allons pas passer en revue tous les paramètres du menu de saisie, mais simplement les éléments de base pour commencer. Vous savez comment modifier les polices et les tailles de police, n'est-ce pas ? Je vais juste vous montrer les particularités de Figma. Très bien, allons-y et ajoutons du texte à notre page. Très bien, lançons donc la barre d'espace pour passer au-dessus de la commande ou Control plus pour zoomer fois, barre d'espace. Je vais prendre l'outil de saisie. C'est en bas, cliquez dessus. Vous remarquerez que les outils les plus courants , si vous les survolez, peuvent être vus en C à côté, cela signifie que je peux passer à l'outil de commentaires en pointant C, T pour l'outil de type, F pour l'outil de cadre Donc, les plus courants passent simplement le curseur au-dessus d'eux, et vous verrez qu'il vous indiquera le raccourci Nous voulons donc T pour l'outil de type. Il existe deux types de boîtes de saisie. Il y en a un où tu cliques une fois et tu commences à taper. Et celui-ci durera pour toujours et à jamais. D'accord ? Donc, vous cliquez une fois, vous obtenez une zone de texte, idéale pour les en-têtes ou les boutons, juste de petites parties de texte, et la zone de saisie continue Est-ce que celui-ci est là, ça s' appelle une boîte automatique avec. Je connaissais ce nom. L'autre type de zone de saisie est que je vais cliquer en arrière-plan, puis aller sur ma touche T. Évidemment, si votre curseur clignote ici et que vous appuyez sur le raccourci T, vous obtenez simplement Ts. OK, donc je vais cliquer en arrière-plan, puis appuyer sur ma touche T, et je vais cliquer sur le bouton maintenir et faire glisser une case vers l'extérieur. C'est ce qu'on appelle une boîte de taille fixe. Je veux qu'elle soit exactement de cette largeur. La différence, c'est que lorsque je commence à taper, vous pouvez voir qu'il se brise au bout de la ligne. est mieux pour le corps du texte, tout ce qui nécessite un saut de ligne. Vous pourrez les convertir par la suite. Je peux cliquer sur celui-ci ici et dire, en fait, vous avez maintenant une taille fixe, et je peux saisir le point. Je vais cliquer en arrière-plan. Allons-y jusqu'au bout et cliquons à nouveau. Si je clique dessus une fois, je peux saisir le bord ici, et maintenant c'est une largeur fixe. Pareil pour celui-ci. Je n'ai pas sélectionné le texte. Qu'est-ce que cela fonctionne de toute façon ? C'est le cas. La façon dont vous l'avez sélectionnée n'a pas vraiment d'importance. Je veux que ce soit une largeur automatique, plutôt un titre ou un bouton ou une sorte de petite partie de texte. Vous pourrez les convertir par la suite. Nous aborderons la question de la hauteur automatique plus tard dans le cours. Voici nos deux zones de texte. Je vais les annuler pour m'en débarrasser. Donc, sur un Max, Command Z sur un PC, c'est Control Z ou sur ma version de bureau, c'est Modifier et annuler. Si vous utilisez la version du navigateur, vous aurez une autre modification. Ce sera juste en dessous. Vous pouvez accéder à Modifier, annuler. C'est la même chose. Je vais donc annuler plusieurs fois dt, dt, tant d'annulations. Allons sur le Tiki et ajoutons notre logo à la marque. Maintenant, si vous avez un logo pour l'entreprise pour laquelle vous travaillez et qu'il existe, vous pouvez l'utiliser. Mais comme nous développons en quelque sorte une marque pour cette application en même temps, nous n'utiliserons que du texte brut. Nous n'allons pas encore entrer dans le design du logo. Le mien va donc être appelé. Je vais utiliser des casquettes. Je vais opter pour Scott ou pour Caps. OK, nous allons rester simples pour le déplacer. Je vais cliquer en arrière-plan. Utilisez mon outil de sélection, j' allais le déplacer ici. Ensuite, nous voulons que notre message marketing soit affiché ici. Je vais prendre un outil de saisie, cliquer et faire glisser, et me rappeler que cliquer et glisser nous donne une zone de largeur fixe Nous allons simplement saisir un message marketing. Le message marketing est envoyé ici. Je ne vais pas vous ennuyer en passant en revue toutes les polices de caractères. Vous savez comment modifier les polices. Mais l'astuce, changeons simplement la taille de la police, quelque chose de beau et de grand. Je veux qu'il soit cassé sur deux lignes afin que nous puissions regarder la hauteur automatique. Par défaut, il essaie de le faire automatiquement. Tu peux taper quelque chose. C'est 24, il est très courant d'en ajouter huit ou quatre de plus. Allons-y 28. Génie, Dan. Allons-y Qu'est-ce que 832. Ce que vous pouvez faire, c'est voir ces petites icônes ici. Je finis par le faire beaucoup dans ce cours. Je vais maintenant vous montrer si vous curseur au-dessus de cette icône, de cette icône Vous pouvez cliquer sur le bouton de maintien et le faire glisser. Si vous avez plutôt tendance à le regarder, demandez si c'est la bonne taille ? Peut-être un peu d'espacement entre les lettres. Plutôt que d'essayer de le taper et de faire des calculs. Vous pouvez faire glisser le pointeur sur l'une de ces icônes. Voilà. Revenons à 32. Donc, en termes de polices, lorsque vous créez une image filaire, lorsque vous faites de la haute fidélité, passez bien sûr beaucoup de temps à choisir des polices Lorsque vous créez un cadre métallique, il est préférable de le laisser sous forme de police super ennuyeuse Quelque chose qui ne va offenser personne, car ce que vous voulez faire, c'est lorsque vous faites un test avec quelqu'un, en particulier avec des parties prenantes lorsqu'elles peuvent avoir une opinion sur la police, mais ce n'est pas ce que vous faites pour un premier test Vous construisez une maquette pour tester les mécanismes de ce truc. Peuvent-ils cliquer sur les boutons ? Arrivent-ils là où ils doivent aller ? Eh bien, vous ne voulez pas revenir et dire : «   Hé, je n'aime pas cette police de caractères. D'accord ? Optez donc pour des polices simples qui n'ont que je ne sais pas, caractères qui n'en ont aucun , comme Roboto Désolé, Roboto. Ou celui par défaut qui vient. Tu sais, l'Inter est le Figma par défaut. Les gens l'utilisent donc beaucoup. Roboto est bon. Sauce envoie la police que vous voulez, tant que c'est le cas, je ne sais pas. Des polices ennuyeuses. De plus, comme Roboto, je l'aime parce que c'est ennuyeux Désolé Roboto. Mais il y a tous ces autres poids ici. J'ai mis un gras, un italique et toutes sortes d'autres bonnes choses pour l'accompagner Conservez donc la simplicité de vos polices. L'autre point est que lorsque vous choisissez des polices, il est préférable de le faire sur l'appareil lui-même. Je vous montrerai plus tard comment prévisualiser sur votre téléphone. Lorsque je travaille sur mon ordinateur, je finis par passer des heures à jouer avec l'espacement des lettres, le suivi et interligne. C'est juste trop gros. Donc, ce que vous pouvez faire comme astuce, c'est de zoomer en arrière jusqu'à ce que votre téléphone ait la bonne taille. Littéralement, ce que je fais maintenant, c'est que je décroche mon téléphone et que C'est un peu petit, 100 c'est trop gros, alors peut-être qu'ici, je peux taper. Peut-être que 75 c'est bien. Je tiens mon téléphone, c'est encore trop gros. Vous serez capable de découvrir ce qu'il y a sur votre téléphone pour vous permettre de voir à quel point c'est minuscule maintenant ? Tu es du genre, OK, c'est trop petit. Mais si je tiens mon téléphone en l'air, c'est la bonne taille pour le téléphone. Très bien, je vais donc aller un peu plus loin à ce sujet. L'autre truc avec n'importe lequel de ces champs ici, c'est que j'en ai 12. Ces chiffres sont assez bons pour passer d'un élément à l'autre, mais vous pouvez simplement cliquer sur 12 et utiliser la flèche vers le haut. C augmente simplement par incréments d'un. Si vous maintenez la touche Shift enfoncée et que vous appuyez vers le haut, cela passe par incréments de dix Nous sommes donc à 38 ans, ça passe à 48. Mais si j'utilise juste ma touche ra, il suffit de cliquer dessus Cela fonctionne. De haut en bas. Alors je trouve que c'est à peu près là, ça a l'air bien. Celui-ci doit maintenant être plus grand, cliquez ici, pop up pol shift, go up. Vous pouvez le voir, parce que j'ai une hauteur de ligne fixe, 32, et que ma taille de police est 53, ça devient un peu bizarre. Si vous devez revenir à une hauteur de ligne automatique, supprimez simplement ce qui s'y trouve pour revenir à Auto. Vous pouvez voir ici qu'il sort du bas de ma zone de texte Cela ne fait pas vraiment de différence ici, mais je peux l'étendre un peu plus loin. L'autre raison est que je vais passer à l'alignement. Je ne vais pas passer en revue tout ça. Tu sais utiliser la typographie. Ce que je tiens à mentionner, c'est que souvent, lorsque vous avez affaire à, disons, vous voyez comment le message marketing reçu est transmis ici plutôt que le message marketing lui-même. Surtout lorsque vous en êtes à une toute nouvelle étape de l'application, j'aime ajouter des éléments vraiment génériques, comme ces polices génériques ennuyeuses avec des titres non offensants. Ils savent où va aller le message marketing , mais si je commence à utiliser, je ne sais pas, ma propre créativité pour ajouter des messages marketing ici à ce stade précoce des tests, quelqu'un reviendra et dira : «   Hé, nous ne restons pas assis comme ça ». Cela doit passer à la rédaction. Non, non, non, il suffit de cliquer sur le bouton. Je veux voir si ça marche. Souvent, je supprime tout ce qui peut offenser ou provoquer un mauvais feedback. Le message marketing est envoyé ici, c'est bien. Nous avons besoin de quelques petites choses avant de pouvoir passer à autre chose et d'autres choses à souligner. Si je le fais glisser avec mon pointeur. Si je clique sur Maintenir et que je fais glisser le pointeur, le voyez-vous simplement sauter ? C'est très pratique. Vous pouvez voir la ligne au milieu de ma page. Je peux le faire glisser vers le bas. C'est au milieu de la page. Oh, sympa. Je vais y mettre ça. Je vais copier-coller. C'est une autre chose intéressante à propos de Figma et du zoom avant Copiez-collez, et vous vous demandez  : « Que s'est-il passé ? En fait, c'est collé dessus. Par défaut, tout ce que vous avez copié sera collé , juste au-dessus. Il semblerait donc que vous ne l'ayez pas copié. Mais maintenant tu le sais, c'est bon. OK, je l'ai copié et collé. C'est là que mes photos de produits vont être prises. Photo du produit. Je vais faire le plus petit parce que c'est plutôt une question dont je ne sais pas pourquoi. Il va être plus petit. L'autre chose à faire est si vous voulez copier-coller, je le fais souvent en maintenant enfoncée la touche option mon PC Okon. Je l' ai sélectionné. Je suis sur mon outil de déplacement, continuez à l'appeler outil pointeur. L'outil de déplacement, maintenez cette touche d' option enfoncée sur un Okon sur un PC. Observez les petites flèches doubles qui apparaissent. Les flèches doubles indiquent quand je le fais glisser. J'ai la souris baissée tout le temps. J'ai le choix entre Olkey et Olkey. Je vais en faire un duplicata. Pareil ici. J'en veux un autre. Allons-y. Il y en a deux. Je peux utiliser les deux, et je ne vais probablement que les rendre audacieux. Et agrandissez-les un peu. Maintenant, la typographie contient les bases. Si vous êtes du genre : « Oh, où est le reste ? Voilà le reste. Il y a quelques options ici, des paramètres de saisie, vous obtenez toutes les choses supplémentaires. Nous en aborderons différentes parties dans ce cours. Mais voici les autres choses que vous recherchiez peut-être. Je vais m' assurer que c'est parfumé. Je vais m'assurer que tout est en majuscules avec majuscules. Voilà, c'est là. Je vais double-cliquer sur celui-ci et dire, celui-ci est mon B maintenant, maintenant, et celui-ci va être mon moyen d'en savoir plus. En savoir plus Très bien, je pense que c'est ça. Regardez ce que nous avons fait. Nous avons mis du texte sur la page. C'est bon, ça va être ça. Un vieux texte ennuyeux. Faisons vieilles boîtes ennuyeuses dans la vidéo suivante. 10. Rectangles, cercles, boutons et coins arrondis dans Figma: De retour, nous avons ajouté des rectangles à la vidéo. Je vais vous montrer comment faire des rectangles et des cercles. Nous allons faire des coins arrondis. C'est très excitant. Je te le promets. Allons-y. Très bien, commençons par utiliser l'outil rectangle. Ici en bas, c'est ce truc. C'est un rectangle. Il y a plein d'autres choses. S'il y a une petite flèche à côté. D'accord, il existe un tas d'autres types d' outils de dessin utiles, mais nous allons commencer par l'outil rectangle. Et ce que je vais faire, c'est que je veux une sorte d'image fictive C'est un grand rectangle comme vous l'avez vu au début. Je vais donc cliquer sur le bouton maintenir et faire glisser le pointeur vers l'extérieur et c'est gris. Whoo. Mais cela a également couvert mon texte. Il est toujours là. Regarde, bonjour, tu es en dessous. Examinons donc ce que l' on appelle les couches. Tu sais ce que sont les couches. Comment fonctionnent-ils dans Figma Il y a plusieurs façons d'y accéder. Je vais donc vous montrer quelques méthodes, juste pour vous montrer les différentes méthodes de Figma, pas pour vous embrouiller, mais c'est bon de connaître les principaux moyens de trouver des Et vous trouverez celui qui vous convient le mieux à votre niveau. plus simple est de cliquer dessus avec le bouton droit de la souris et dire « ne pas sélectionner la couche ». Je veux le renvoyer. Je vais dire de l' envoyer au dos des couches, et c'est derrière maintenant. Je vais annuler ça. L'autre solution est ici, dans ce panneau de gauche. Vous devriez voir le fichier. Vous êtes peut-être sur la première page, et nous devrions voir des couches. La seule autre chose dans laquelle vous pourriez vous trouver, ce sont les actifs. Passez à archiver vos couches y a une page appelée confirmation, appelée Checkout, une autre intitulée fonctionnalités, et nous sommes sur cette page d'accueil. À l'intérieur, il y a tous les éléments et vous pouvez voir qu'il s'agit d'un ordre de couches, comme dans les logiciels de conception plus traditionnels. Le rectangle se trouve au-dessus de l'endroit où apparaît une photo du produit. Je dois appuyer sur le bouton de maintien et faire glisser le rectangle voir s'il y a des lignes. Donne-lui une chance. Annulez-le s'il tourne terriblement mal. Vous pouvez faire glisser la photo du produit, cliquer sur Maintenir, maintenir et la faire glisser au-dessus du rectangle. Cela fonctionne aussi. La façon dont je veux vous montrer, c'est que je suis sur la version de bureau, donc j'ai l' objet d'affichage File Edit en haut ici. Si vous utilisez la version du navigateur, vous diriez : « Je ne l'ai pas ». Le tien se cache juste ici. Fichier, édition, affichage des objets. S ? C'est exactement le même objet là-bas, le objet là-bas. Ça n'a pas d'importance. Souvent, dans ce cours, je vais monter en haut pour trouver des choses et vous me direz que je n'en ai pas. C'est juste en dessous de ce F ici pour Figma. Vous verrez que je peux aller dans Modifier, accéder à Objet et descendre pour mettre au premier plan, avancer. Je ne peux pas vraiment parce que c'est une note inférieure, c'est parce que je ne l' ai pas sélectionné, je vais l'annuler, donc c'est en haut. Je vais donc cliquer sur le rectangle. Ensuite, je peux passer à Modifier. J'étais sous Object. Vous pouvez envoyer du bois, c' est-à-dire descendre d' un niveau pour qu'il soit placé derrière un message marketing Je veux le renvoyer complètement à l'arrière. Encore une fois, c'est exactement au même endroit, un objet U et il y a un renvoi en retour. D'accord ? Vous avez également dit qu'il y avait un raccourci. Tellement de manières. Objet, je l' utilise pas mal. Cela dépend. Si vous êtes prêt à utiliser des raccourcis, ici, le crochet se trouve juste sur votre clavier. Vous le verrez normalement à côté de votre Peki et vous le placerez devant Je peux passer du crochet carré vers l'avant, du crochet arrière, vers l' avant, vers l'arrière, vers l'avant vers l'arrière Peu importe celui que vous utilisez. Mais dans cette vidéo, je veux vous montrer les différentes méthodes, car je veux vous donner l'impression qu'il existe plusieurs façons de procéder peu importe la voie que vous choisirez. Mais c'est tout. Je vais suivre une voie facile à partir de maintenant. Très bien, zoomons ici, espace, cliquez et faites glisser, Commandez plus pour zoomer. Control plus sur PC. Prenons notre arc pour l'outil rectangle, faisons glisser une boîte, et je vais utiliser mon crochet parce que nos raccourcis sont sophistiqués , mais utilisons-les comme bon vous semble. J'ai un bouton B maintenant. Maintenant, une autre astuce Figma est que si vous voulez sélectionner deux éléments, je peux cliquer et faire glisser le pointeur sur ces deux éléments ou je peux cliquer sur l'un d'eux, maintenir la touche Maj enfoncée sur mon clavier et cliquer sur l'autre, et les deux sont sélectionnés Maintenant, je veux un autre rectangle. Au lieu de le dessiner, je vais cliquer une fois sur celui-ci et utiliser mon copier-coller. Ce qui finit par le mettre juste au-dessus, mais ne vous inquiétez pas, nous le savons, et c'est tout. J'ai parlé de garder le design hors de cette structure filaire. Les cadres Wi sont censés être super génériques. Mais je ne peux pas me contenter certaines choses comme les coins arrondis. Oh, j'aime vraiment les coins arrondis. Si vous cliquez sur ce rectangle ici et que vous zoomez suffisamment, vous verrez les petits points dans le coin. Vous pouvez les maintenir enfoncés et les faire glisser. Si vous ne les voyez pas, c'est-à-dire si je fais un zoom arrière, que je les ai sélectionnés et que votre curseur clignote au-dessus Tu vois qu'il n'y est pas ? Il ne s' affiche qu'à certains niveaux de vue. Il faut être assez près pour les voir. Si vous souhaitez les faire manuellement, vous l'avez sélectionnée. Ici, en apparence, vous avez celui-ci appelé rayon d'angle, et je peux taper huit. Celui-ci, je peux soit le faire glisser et vous verrez qu'il vous indique que c'est huit, c'est à vous de décider. Maintenez la barre d'espace, déplacez-vous vers le haut. Cliquez également sur celui-ci, et je vais le rendre cohérent en saisissant huit également. Vous pouvez décider qu' en fait le rayon d'angle, vous ne voulez pas qu'ils soient huit dans tous les coins, vous voulez que l'un d'entre eux soit différent. Découvrez cette petite option ici, qui élargit les coins individuels. Pour le moment, ils ont tous huit ans, c'est à vous de décider en bas à droite. Tu vois, c'est en haut à gauche, en haut à droite. Vous l'avez compris en bas à droite, je peux en faire 130. Cela signifie simplement que si je fais zoom arrière, l'un d' eux est différent. Vous pouvez également le faire manuellement. Vous pouvez maintenir la touche option d'une touche Mac sur un PC et vous pouvez également les faire individuellement. Tu peux le voir ? Un seul d'entre eux se déplace. Très bien, je vais revenir à la régularité , avec des corners mitigés. Je vais me débarrasser de Mixed, le supprimer taper huit par-dessus et appuyer sur Entrée. Maintenant, ils sont tous pareils. Très bien, nous dessinons des rectangles aux coins arrondis. Dessinons un cercle. Voici notre cercle. L'ellipse, qui est un raccourci pour O. Lisa, ressemble à un cercle Je vais appuyer sur la touche O mon clavier et je vais tracer un cercle. Autre chose lorsque vous dessinez des cercles ou des carrés ou quoi que ce soit d'autre, si vous voulez que ce ne soit pas un ovale, d'accord, d'accord. Ici, vous maintenez le bouton enfoncé. De quelle clé s'agit-il ? Tu sais de quelle clé il s'agit. Shift. Maintenez la touche Maj enfoncée pendant que vous faites glisser le pointeur pour verrouiller la hauteur et la largeur Donc sur quelque chose de ce genre de taille. Vous pouvez en voir les tailles ici. Le mien est à 32 x 32, à peu près là. Cela n'a pas vraiment d'importance. Je vais zoomer dessus, barre d' espace et utiliser l'outil de saisie parce que je veux le bouton Plus. Je vais donc prendre le Tiki, je vais cliquer une fois, et je vais juste taper un plus sur mon clavier Police de caractères, je vais utiliser du gras provisoire, c'est bon. Retournez à mon outil de sélection. Maintenant, si vous voulez le déplacer , vous allez dire : «   A, je veux le mettre au-dessus de ce bouton ». Ouais. Parfois, il suffit de cliquer sur le bouton en arrière-plan, puis de le faire glisser. ce qui est de la taille de la police, nous allons utiliser notre joli shorku, cliquez ici et sur la flèche vers le haut F, prenez-le à la bonne taille. Il saute partout. Il essaie de se verrouiller en pixels. C'est bon Donc, à peu près à la bonne taille. Encore une fois, n'oubliez pas que nous sommes à 400 %. 60 ans ont en quelque sorte fonctionné pour moi. Alors maintenant, je me dis : « D'accord, ça a l'air bien. L'autre astuce que je veux vous montrer, c'est que lorsque vous essayez d' aligner quelque chose, cela peut être assez délicat. Je vous montrerai plus exactement plus tard. Mais en le traînant, il essaie de se casser. Tu vois que c'est comme : « Oh, je veux être ici ». Tu veux dire ici ? Tu es du genre, non, non, juste au milieu. J'ai donc envie de le faire circuler. Donc, ce que vous faites, c'est que vous l' avez sélectionné , je vais cliquer dessus en arrière-plan, cliquer immédiatement et je peux utiliser ma touche fléchée, les touches de mon clavier, juste pour le déplacer et l'amener là où je veux. C'est une bonne chose. Oh, à quoi sert ce bouton ? Tu ne l'as pas demandé. Si vous zoomez suffisamment près de votre cercle, vous voyez ce point et vous vous demandez : à quoi cela sert-il Tu es prêt ? Non, non, non, non, non. Ce n'est absolument pas très utile, mais cela me fait plaisir. Quoi qu'il en soit, j'imagine des graphiques à barres et des diagrammes à secteurs et. D'accord. Faisons un zoom arrière. Je vais utiliser le raccourci pour y aller. Zoom to fit en est une que je vais essayer de vous faire comprendre au cours de ce cours. Il s'agit de Command Zero ou Control Zero sur un PC. Non, c'est passer à zéro. Non, ce n'est rien de tout ça. Commande zéro ? Oh, zut. Mon cerveau a disparu. Zoomez pour ajuster. C'est ce que je veux. D'accord ? Donc, celle que je viens de vous montrer, la commande zéro est de passer à 100 %. C'est très bien Celui-ci me plaît beaucoup. Zoomez pour ajuster. OK, et un quart de travail. Je le sais OK, maintenez la touche Shift enfoncée Mac et PC et appuyez sur la touche 1, et tout s'affichera dans votre fenêtre. Allons-y. Nous faisons des rectangles. Regardez-nous. Très bien, je vais sélectionner les deux et les déplacer en quelque sorte ici Nous l'utiliserons un peu plus tard. Ça va se situer au milieu d'ici. Ensuite, nous passerons à la vidéo suivante. Allons-y. 11. Comment utiliser la couleur dans Figma ma: Salut, voilà. Dans cette vidéo, nous allons passer de ceci à cela. Du gris à cette couleur. Turquoise, vert, bleu. Quoi qu'il en soit, nous allons examiner les bases de la couleur dans Figma. Ne sautez pas en avant. Il y a quelques trucs utiles et juteux là-dedans , ainsi qu'un petit raccourci à la fin C'est bon. Allons-y. Très bien, colorier, c'est facile. Cliquons sur notre rectangle gris. C'est la couleur par défaut pour Figma et ici, sous Phil, vous pouvez cliquer sur ce petit carré de couleur pour obtenir ce sélecteur de couleur Vous avez peut-être déjà utilisé un sélecteur de couleurs. Si vous n'avez pas de petit point voici la couleur que vous avez sélectionnée. Vous pouvez cliquer dessus et le faire glisser pour sélectionner n'importe quelle couleur, à condition qu'elle soit rouge. Je vais le déplacer vers le haut et ce que vous pouvez faire est de saisir le curseur de teinte et le faire glisser. Tu peux voir ce qui se passe avec la couleur ? Supposons que vous vouliez que ce soit bleu, vous pouvez décider que je veux que ce soit plus bleu et que ce soit un bleu plus foncé, ou que ce soit un bleu moins saturé. La saturation est de gauche à droite, haut et vers le bas en tant que luminosité. Vous pouvez choisir ici quelque chose qui vous convient. En noir et blanc, c'est bizarre. Vous pouvez les utiliser en bas ici. Voici quelques couleurs par défaut. Ou ce que les gens ont tendance à faire, c'est de cliquer sur le bouton « Maintenir et de faire glisser le pointeur au-delà du coin. Ma souris est toujours enfoncée. Si vous le faites glisser au-delà du coin, vous le bloquez en blanc et faites de même avec le noir, si vous le faites glisser vers le bas, il le fait glisser en noir complet C'est à vous de décider. C'est un énorme slider. Voici la diapositive de transparence. Je vais emballer cette couleur ici. Je vais faire glisser la transparence vers le bas pour qu'elle soit un peu plus transparente. Vous ne pouvez pas vraiment le dire maintenant parce que le blanc en arrière-plan est visible. Déplaçons-le au-dessus de tout cela et déplaçons-le vers l'avant du panneau des calques, comme vous le souhaitez. Je vais utiliser le crochet situé près du piki. Vous voyez que c'est du givre et que vous regardez à travers ça ? Parfois, vous n'avez pas besoin de ouvrir. Je peux le sélectionner. Si je veux la sauvegarde de la transparence, pouvez-vous voir qu'elle est de 47 % ? C'est là que je l'ai fait glisser sur cette dernière fenêtre. Je peux taper 100 et entrer ici. Je vais le remettre à l'arrière en utilisant ce premier crochet, je vais le remettre là où il devrait être. Je vais choisir une couleur. Il est très courant d'utiliser du bleu ou du bleu clair sur le dessus ici. Je vais utiliser un sarcelle sans aucune raison valable. L'astuce consiste à n'utiliser qu'une seule couleur. Essayez de ne pas trop choisir les couleurs pour tout, surtout dans cet iframe. N'oubliez pas qu'il s'agit de tester ses mécanismes, pas vraiment de le styliser. Mais tu veux OK, alors choisis une couleur que tu aimes. Maintenant, la valeur par défaut ici est ce nombre hexadécimal, il s'agit donc d'un code à six chiffres qui représente la couleur sur le Web. Vous pouvez le changer en RGB ici. Si vous avez un document de spécification du manuel d'entreprise, vous devez utiliser la couleur officielle de l'entreprise, vous pouvez le saisir ici. C'est le RGBA, qui est rouge, vert, bleu, et Alpha est la transparence Vous pouvez soit faire glisser ce curseur, soit le faire ici. Ça n'a pas d'importance. Le CSS est un autre outil utile. Si vous êtes plutôt un développeur et que vous connaissez les couleurs CSS, vous pouvez les saisir, ou je n'utilise pas beaucoup, le luminant à saturation Hue J'utilise la saturation des teintes et la luminosité. Ce que je trouve très utile, c'est si je veux le rendre plus sombre, je dois le faire glisser vers le bas, mais vous finissez par dire «   Waouh » en le zaguant vers le bas, vous dites «   Non, tout droit Vous pouvez cliquer sur la luminosité. La luminosité augmente et diminue. Donc ce que tu peux faire c'est entrer ici et partir, tu vois ma flèche ? Je suis juste en train d'utiliser. Tu ne peux pas voir mes doigts. Vous pouvez simplement cliquer ici, comme nous l'avons fait pour beaucoup d' autres, et simplement le faire glisser vers le haut. Maintenez la touche Shift enfoncée, et ça fera des blagues en gros morceaux. Le degré de saturation de la couleur se fait de gauche à droite. Donc, au lieu de le remuer de cette façon, vous pouvez simplement cliquer sur celui-ci ici et descendre vers le haut. Vous voyez que ça va de gauche à droite. Pareil pour la teinte. Je voulais être un peu plus bleu. Ça va monter, monter, monter, p, p, p, p, p. Voilà. Mais c'est très courant de le laisser en hexadécimal. Laisse-le sur dix. L'autre point, c'est que vous vous retrouverez avec un tas de couleurs en bas. C'est comme les couleurs que tu as déjà utilisées. Il y a ce gris. Si vous voulez y revenir, c'est fait. Il y a ce bleu que nous venons de mélanger Nous pouvons donc vous dire ou vouloir que ce soit cette couleur du bleu qui a disparu maintenant parce qu'elle n'est utilisée nulle part sur cette page. Bonne mèche, Dan. Annulez-le, pour qu'il revienne. Je peux l'utiliser maintenant et dire que tu es de cette couleur. Ça ne me plaît pas. Tu attends là-bas. C'est cette couleur que je vais nous voir. L'autre chose que vous pouvez faire est d'utiliser Eyedrop atol. Vous pouvez cliquer ici et dire : «  Je veux que le pipette L'avantage de l'outil compte-gouttes, c'est que vous pouvez vous lancer dans les détails . Tu peux voir ? À côté de l'icône, il y a cette petite version zoomée que vous voyez version zoomée Disons si vous voulez juste cette étrange couleur grise sur le bord de ce type. Vous ne pouvez le voir que lorsque vous zoomez vraiment. Non, vous ne pouvez même pas le voir lorsque vous zoomez. C'est là. Excellent choix des couleurs des images. Je vais cependant vous montrer le raccourci si je vais cliquer dessus. Je le fais très souvent. Je vais maintenir la touche Shift enfoncée pour cliquer sur les deux. Je les ai tous les deux sélectionnés et je le fais pour annuler le déménagement. Maintenez la touche Shift enfoncée, cliquez sur les deux, utilisez mon raccourci Eyedropol, c' est-à-dire I sur votre clavier, la lettre I, pas votre Je peux cliquer ici et ils deviendront tous les deux de cette couleur. Peu importe où vous le faites. Il est parfois difficile de cliquer sur des objets. Si vous trouvez qu'il est vraiment difficile de cliquer sur des objets, le moyen le plus simple est de zoomer un peu et de dire «   A maintenant, c'est plus facile de cliquer ». Je peux aller ici, utiliser mon compte-gouttes. Ça y est. C'est bon. Je vais m'en procurer un pour me montrer tous mes cadres dans un seul document. Vous pouvez changer la couleur du cadre du téléphone que nous avons ici, ici en bas, vous pouvez dire qu'il est plein de blanc, c'est-à-dire si, si, vous pouvez le changer pour autre chose. Certaines personnes aiment en faire un gris clair. Nous allons le laisser blanc pour le moment. Les cadres peuvent être colorés comme rectangles. Ils sont très similaires. Ce que vous voudrez peut-être changer ou je ne me souviens pas de la valeur par défaut est. C'est la couleur du thème. En gros, il y a une mise en page très blanche de mon interface, tout est blanc Les arrière-plans sont gris clair. Vous pouvez entrer dans ce petit F ici et vous pouvez accéder aux préférences. Vous pouvez dire, en fait, que je veux que le thème soit clair ou foncé. Le thème de votre système en ce moment, le mien provient de mon Mac. Mon Mac le dit, il fait jour, vous allez utiliser une lampe claire et la nuit, elle passe au noir, ce qui est bizarre Tu pourrais le forcer à être noir. Cela ne change pas le document, il change simplement l'interface. Cela signifie également que lorsque je crée un nouveau document, crée un nouveau fichier de conception, vous voyez que l'arrière-plan est noir. Si je prends mon outil de cadrage et que je dessine autre chose, nous sommes dans la même position, mais l' interface est très différente. C'est juste une version noire foncée. C'est à vous de décider. Si vous le changez en foncé et que vous êtes d'accord, mais que l'arrière-plan est toujours de couleur claire. Vous pouvez ne rien sélectionner, cliquer en arrière-plan , monter ici et dire, en fait, je veux qu'il fasse nuit. Je ne me souviens pas de la valeur par défaut. Les vôtres seront différentes en fonction des préférences de votre système. Je vais donc le forcer à être léger et à rester en mode clair pour le reste de ce cours, mais vous pouvez le modifier. Thème, léger, sympa. Une autre chose utile est qu' en fonction de votre vision et de votre écran, vous pouvez passer à l'affichage et descendre à l'échelle de l'interface. Vous pouvez dire, en fait, que j' aimerais l'agrandir ou essayer de décoder ces hiéroglyphes. Pas utile, Figma. Mais si je le fais, pouvez-vous voir que tout ce qui se trouve dans les panneaux s'agrandit, et vous pouvez devenir de plus en plus grand. Vous avez un énorme écran enveloppant, il serait peut-être préférable d' avoir une interface plus Allez-y, dois-je le laisser de cette taille ? Je vais laisser cette taille pour la vidéo afin que vous puissiez voir ce que je fais un peu plus facilement. Une dernière chose, c'est que ça me rend furieuse. Est-ce que ça te met en colère ? Tu t'en fichais ? Cela ne convient pas à tout le monde. Je peux donc l' agrandir un peu. Je ne sais pas Il faut qu'elle soit plus grande. Je vais vous montrer un petit raccourci. Un petit bonus pour avoir attendu jusqu'au bout. Si je fais glisser ce côté et que je veux qu'il soit également placé de ce côté, vous pouvez faire ce que vous pouvez faire au lieu de simplement faire glisser un côté, puis l'autre, vous pouvez maintenir un raccourci doux Je n'ai promis aucun raccourci, mais nous en avons fait plein. Maintenez le compteur d' options Mac enfoncé. Ok, Counter PC, et vous voyez qu'il le fait des deux côtés. Oh. Fantaisie. Tu vois, ça valait traîner à faire des carrés de couleur. C'est bon, c'est ça. Le principal point à retenir ici est de ne pas utiliser beaucoup de couleurs Essayez de garder vos cadres en Y vraiment simplistes, utilisez du gris, utilisez du bleu N'essayez pas de recommencer à coder des couleurs. Nous ne voulons pas nous détourner de l' objectif de ce test Yframe. Il suffit de tester la mécanique. Les gens cliquent-ils là où nous pensons qu'ils vont cliquer ? Est-ce le genre de chose que le client souhaite sans polices, sans couleurs, sans style ? bon, c'est ça. Je vous verrai dans la prochaine vidéo. 12. Traits plus mise à jour des paramètres de couleur dans Figma: Bonjour. Dans cette vidéo, nous allons examiner le trait, qui est la ligne à l'intérieur de Figma, et tout ce que vous pouvez ou ne pouvez pas en faire Je vais également vous montrer comment modifier la valeur par défaut. Chaque fois que vous dessinez un rectangle, il correspond à un style précédent que nous avons créé. C'est bon. Allons-y. C'est bon. Ajoutons un trait. L'AVC n'est qu'un autre mot pour désigner une ligne. Je vais cliquer sur ce grand rectangle haut ici et ici. Par défaut, lorsque nous dessinons quelque chose avec un outil rectangulaire, nous obtenons un fond, mais pas de trait. Nous pouvons ajouter un trait en appuyant sur le petit bouton plus. Faites-vous un petit coup de pouce à l'extérieur. Par défaut, il s'agit d'un trait d'un point ou ils l' appellent le poids. C'est l'épaisseur de la ligne. Je peux cliquer ici et utiliser ma flèche vers le haut ou la saisir. Je vais mettre quelque chose de beau et épais pour que vous puissiez en voir trois. Vous pouvez vous débarrasser du trait en cliquant sur ce petit signe négatif, le rajouter et le tour est joué. Changez-en évidemment la couleur. Si vous voulez brouter, vous voulez juste un gris plus clair, faites-le simplement glisser jusqu'à ce bord et trouvez quelque chose ici ou faites-le simplement noircir, fermez-le Disons que vous passez du temps, vous vous dites, en fait, je veux que ce soit quoi ? Trois. Passe un peu de temps, tu te dis : « J'adore cette couleur verte ». Eh bien, tu ne l'aimes pas, mais tu dois l' utiliser encore et encore. Si je vais ici et que je dis, outil rectangle, qui est une archie, et que je fais glisser une autre boîte, vous vous dites qu'il n'a pas de coins arrondis, n'a pas couleur, n'a pas de trait. Je pourrais utiliser mon collyre sur l'outil, cliquer dessus, l'œil pour le collyre sur l'outil Bam, j'en ai pris une partie, mais pas les coins arrondis. Il a juste saisi les couleurs. Ce que vous pouvez faire, c'est modifier les valeurs par défaut. Disons que je veux que ce soit la valeur par défaut chaque fois que je dessine un rectangle. Ce que vous pouvez faire, c'est simplement le sélectionner, monter sur le F ici, descendre sur Modifier et là, il est dit définir les propriétés par défaut. Vous devez d' abord le sélectionner ou l'objet dont vous voulez voler toutes les propriétés. Tu cliques dessus. Rien ne se passe si ce n'est que cela apparaît en bas. Maintenant, je vais cliquer en arrière-plan, appuyer sur mon arc pour le rectangle et dessiner autre chose. Regardez-nous. Nous avons réinitialisé nos valeurs par défaut Disons aussi que nous faisons quelque chose de différent pour les boutons. C'est la valeur par défaut pour chaque fois que vous utilisez un outil rectangulaire, mais les cas d'utilisation sont évidemment différents Nous avons dessiné notre image d' espace réservé Tout d'abord, il y a un bouton. Supposons que le bouton soit différent, que nous ayons une couleur différente et que nous ayons un trait différent à l'extérieur. C'est affreux, mais il faut le déplacer ici. Ce que vous pouvez faire, c'est que vous pouvez le dire, et vous l'avez probablement vu là-dedans, au même endroit sous le F, passer à l'édition. Vous pouvez copier les propriétés et les coller. Si vous le faites souvent, il y a un raccourci, donc je peux copier les propriétés. Vous, mon ami, allez le faire si vous éditez et collez les propriétés, et je vais tout récupérer à partir de là et le coller dessus. Génial Je ne veux pas faire ça, mais maintenant tu sais comment faire. Très bien, annulez, annulez et faites. Ce sont les valeurs par défaut Essayons de tracer quelques lignes. Nous avons mis des lignes à l'extérieur. Dessinons une ligne toute seule, elle se cache sous l'outil rectangle. Il y a l'outil linéaire. Je vais cliquer dessus. Je vais commencer ici, cliquer sur le bouton Maintenir et faire glisser, faire glisser et le faire descendre dans le coin inférieur ici. Je veux qu'il ait le même poids, alors je vais cliquer ici et augmenter de deux, donc ça fait trois. Du poids, et je ne pas très bien aligné. Nous le ferons dans une seconde. Revenons à l'outil linéaire, qui est la touche L. Cliquez sur le bouton de maintien et faites glisser le pointeur de bas en bas. C'est très courant qu'Ug ne cesse de changer cela. Je vais dire, deuxièmement, trois, que nous pourrions copier et coller des propriétés. Faisons-le juste pour nous entraîner. Je clique dessus. Je passe à l'option de commande C sur un Mac. C'est Control Alt, C, cliquez sur cette autre option et passez à l'option de commande V, la propriété sera collée. Utilise ces charges. Encore une fois, c'est trop de photos, tu es comme, mec, il a dit « pas de raccourcis, attends trop de raccourcis ». Je t'ai montré le long chemin. Tu peux fermer les oreilles quand je commence à faire des raccourcis. C'est bon, donc c'est bon. Sauf que je gâche tout, donc je vais zoomer. Command Plus Plus Plus. Barre d'espace, faites-la glisser vers l'extérieur. Vous pouvez cliquer dessus une fois sur cette ligne ici. Si je clique dessus et que je le fais glisser, le tout fera glisser. Ce que je veux faire, c'est double-cliquer sur la ligne et j'obtiens les deux points à la fin. Tu peux voir ? Si je clique dessus, il se transforme en cercles et j'en obtiens les petites extrémités Déplacez la barre d'espace vers le bas si je ne clique pas en arrière-plan Je clique dessus, je dis que je vais déplacer le carré. Il finit par faire des choses bizarres. Donc, si je double-clique dessus, je peux dire et sur la barre d'espace, ça a l'air bien Celui-ci a besoin de travail. Double-cliquez. Allons-y. Très bien, nous avons donc quelques lignes dans les coins. Pour vous en sortir, vous devez cliquer plusieurs fois en arrière-plan juste pour sortir de ce mode ici. Ce n'est pas comme si vous deviez cliquer trois fois. C'est ce que tu dois faire. C'est bon. Nous avons fait passer nos lignes par là. Faisons notre menu de hamburgers. Le menu Burger est le menu le plus courant sur la navigation d' un téléphone mobile. Prenons Alky pour l' outil linéaire ou allons-y. Tu peux totalement aller jusqu'au bout. Où que vous soyez prêt, voici l'astuce, je vais cliquer et faire glisser. Maintenant, c'est plutôt bon pour prendre des photos, mais si vous faites ce que je veux dire par prendre des photos , c'est regarder ça. Il veut vraiment aller droit au but. Si tu es un peu déprimé, c'est facile de le récupérer. Ce que vous pouvez faire, c'est comme nous l'avons fait avec le cercle Souvenez-vous que lorsque nous avons fait glisser le cercle, que nous avons maintenu la touche Maj enfoncée, cela l'a bloqué dans la largeur accrue, vous avez fait la même chose avec une ligne, qui alky, clique et fait glisser vers Si je maintiens la touche Shift enfoncée, le moment passe n'importe où, si je maintiens la touche Shift enfoncée, vous verrez qu'elle la verrouille dans des angles de 90 degrés, voire de 45 degrés. C'est pratique. Donnez-le à la taille que vous souhaitez. Encore une fois, lorsque nous testons bientôt sur un vrai téléphone, il est difficile de savoir quelle doit être la taille moyenne du hamburger. En gros, juste trois petites lignes. J'aime l'appeler « Nav sandwich ». Personne d'autre ne l'appelle sandwich à la navigation, mais la plupart des gens l'appellent hamburger. Je vais zoomer un peu. Regardons d'autres lignes. Nous en voulons trois. Vous pouvez copier et coller à l'aide de la commande C, la commande V ou de la commande C, de la commande V. Nous connaissons le raccourci de notre suite. Maintenant, n'oubliez pas, maintenez la touche option enfoncée sur un Mac, un PC et nous pouvons le dupliquer. Nous refaisons la même chose. Je voudrais faire un autre raccourci. Fermez les oreilles si vous voulez, pas plus. C'est bon. Encore une. Pour ceux d'entre vous qui sont encore là, maintenez la touche option enfoncée et faites-la glisser vers l'extérieur. Ce que tu peux faire maintenant, c'est que tu te « Je veux refaire la même chose ». Il suffit de le dupliquer, au même montant, à la même distance. Vous maintenez la touche Commande sur un Mac, Contrôle sur un PC et la touche D. Cela permet de dupliquer ou de refaire la commande D ou la commande D. C'est vraiment pratique. Vous pouvez continuer, c'est parfait pour les listes et tout le reste. Chaque fois que vous faites traîner quelque chose, disons que c'est une petite liste pour cela Je vais d'abord le dupliquer . Tu es du genre : « Je vais le faire ». Souvenez-vous ensuite de la commande ou de la commande D, pour recommencer. C'est parfait pour créer de petites listes comme celles-ci ou des carrés, des cercles ou des points. Nous avons ces gars. Nous devons examiner des éléments avancés sur les accidents vasculaires cérébraux. Pas vraiment Allons-y, je vais l' augmenter en taille à deux, juste pour que vous puissiez le voir un peu plus facilement Avec ce haut, cela s'appelle un bonnet. C'est un nom malheureux, mais c'est la ligne qui suit et qui s'arrête là. Tu as une autre option. Cliquez dessus. L'accident vasculaire cérébral ici. Ce petit panneau de commande. Vous avez ce point de départ et ce point d'arrivée et ici, ils sont liés à un tas de choses. J'aime les flèches. Voilà. Si vous voulez vous débarrasser de la flèche, appuyez sur Annuler. Je veux que l'autre extrémité soit une flèche. Voilà. Vous avez des trucs de base ici. Celui que je voulais vous montrer, c'est que je ne sais pas pourquoi ça dérange. Ce bonnet au bout, vous pouvez dire, en fait, que je veux que ce soit l'un ou l'autre, je dois faire défiler la page un peu vers le bas. Je ne le vois pas vraiment sur mon écran toute façon, il y en a du rond et du carré. Je vais dire rond. Tu vois que c'est vers la fin ? C'est ce que je préfère. Ici, la dernière option est que vous pouvez le faire de l'une ou l'autre. Il fait les deux bouts. Il y en a un carré aussi. Ce que je veux vous montrer, c'est essentiellement la limite Pouvez-vous voir ce petit objet bleu qui passe au milieu ? C'est le véritable accident vasculaire cérébral. Ensuite, vous mettez un poids dessus et vous pouvez voir que la petite ligne bleue restera , mais que les lignes bleues situent au milieu et qu'elle s'étend simplement de chaque côté. Si je fais une casquette carrée, jetons-y un coup d'œil. Vous voyez qu'il pousse la ligne un peu et qu'elle se met à plat au bout ? Je ne m'en sers pas très souvent. Les gens demandent. Il est là, mais j'utilise un peu le capuchon arrondi pour lisser les bords des traits. Vous devriez peut-être utiliser le capuchon Je vais tous les sélectionner. C'est un bon point. Vous voyez ici qu'il est écrit « mixte » ? Vous verrez apparaître des combinaisons partout lorsque vous aurez sélectionné plusieurs éléments. Je suis juste sur mon outil de pointeur, fais glisser la boîte autour de ces trois outils. Il dit que le point de départ est qu'il s'agit d'un mélange de bonnets, de bonnets arrondis et de bonnets carrés, je ne sais pas quoi dire, il écrit juste de manière mixte. Il est indiqué que c'est mixte, mais je ne sais pas quoi afficher. Je vais les dire toutes en bas, rondes. Et je ne l'ai fait qu'à l'un d'entre eux. C'est bizarre. Ronde. Ça va mal. C'est un bug étrange. Normalement, ça ne se passe pas comme ça quand je l'enseigne. Qu'est-ce qui ne va pas ? J'abandonne. Ce qui se passe avec je pense que c'est la casquette carrée, ils ont changé leur façon de procéder. Quand ils fabriquaient le capuchon carré, il sortait autrefois. Maintenant qu'ils l'ont rentré, donc avec le bonnet carré, la ligne finit par avoir la même taille Mais cela a changé la largeur de mon trait réel. Tu n'as aucun sens, Dan. Ne t'inquiète pas Vous ne le ferez pas trop souvent, mais c'est un bogue, et je vais le laisser dans le cours car vous pourriez aussi le rencontrer. Bizarre, déroutant et même déprimé, l'instructeur en est un peu étonné . Je les refais juste. Quoi qu'il en soit, l'objectif principal ici est d'examiner la différence entre le bonnet plat, le bonnet fessier et le bonnet arrondi. Je vais simplement en changer un pour voir le tout, et je vais tous les sélectionner, et souvent j'utilise simplement mon râteau pour les déplacer parce qu'il est difficile de les faire glisser à la taille souhaitée C'est comme des snaps. Tu es du genre, non, non, do D. J' aime les amener là où je veux qu'ils soient et ensuite utiliser mon râteau pour les taperonis C'est bon. Tu y vas. Nous avons un menu de hamburgers un GPS mobile ou un sandwich GPS. Commençons par ça. C'est bon. Je vais juste le déplacer ici. J'utilise à nouveau mon rakey. Oh, un petit raccourci sympa pour toi, c'est que nous l'avons déjà fait. Quand j'utilise mes râteaux, je les déplace simplement. Si vous maintenez la touche Maj enfoncée pendant que vous le faites, elle le fait dix fois par dix. Ainsi, au lieu de déplacer d' un pixel vers le haut ou vers le bas, si vous maintenez la touche Shift enfoncée et que vous utilisez vos rakes, il le fait de dix pixels Des trucs que j'utilise et que j'oublie de faire. Voilà. Tu le sais aussi. C'est bon. C'est ça. Tracez des traits et regardez les couleurs par défaut à l'intérieur de Figma. Passons à la vidéo suivante. 13. Édition d'objets et échappement dans Figma ma: Salut, dans cette vidéo, je vais vous montrer ce truc. C'est ce qu'on appelle le mode d'édition d'objets. Vous êtes peut-être déjà coincé ici. Je vais vous montrer à quoi ça sert et comment y échapper. Voir les lignes stropiques. Je veux te le montrer dès le début du cours. Nous aborderons les sujets plus avancés plus tard. Mais les gens se retrouvent bloqués très tôt. Si vous double-cliquez, vous êtes probablement déjà là. Vous avez peut-être déjà trouvé le moyen de vous en sortir. Mais si j'ai un objet, et si vous double-cliquez sur choses qui vous ressemblent, que se passe-t-il ? Comment puis-je en sortir ? Pour sortir, il suffit de double-cliquer sur l'arrière-plan. Faisons-le avec de nouveaux rectangles. L'arché de l' outil Rectangle, dessinez-le. Revenez par défaut à l'outil de déplacement. Double-cliquez dessus et vous êtes dedans, vous vous « Qu'est-ce que c'est que c'est ? Cela signifie essentiellement que lorsque vous n'êtes pas en mode édition d'objets, vous saisissez les coins du rectangle et celui-ci effectue des opérations rectangulaires. Il faut que ce soit un rectangle. En double-cliquant dessus, je pénètre dans cet objet et je peux le détruire Je peux prendre le coin maintenant. Vous remarquez que les arêtes passent d' un carré à un cercle. Regarde ça. Regardez, nous l'avons détruit. Maintenant, il ne fait plus de bits rectangulaires. Vous avez trouvé l'intérieur de cet objet et vous l'avez modifié. C'est ce qu'on appelle le mode d'édition d'objets. Tu peux faire d'autres trucs sympas. Regardez Double-cliquez sur Go inside. Je peux cliquer sur cette ligne ici. Je vais juste cliquer en ligne sur Supprimer sur ma clé. Je me suis débarrassé de cette ligne, qui a supprimé le remplissage. Je peux dire : débarrassez-vous de cette ligne et vous pourrez commencer à le détruire et à le démonter. Ce n'est plus un rectangle. Cela peut être utile plus tard, lorsque nous commencerons à dessiner nos propres icônes. Je vais l' annuler pour revenir. Mais c'est le mode d'édition d'objets. C'est là que nous nous sommes également retrouvés avec cette ligne. Et nous avons double-cliqué sur la ligne et nous sommes comme si nous avions les points Nous sommes en mode édition d'objets. La façon de le savoir aussi, c'est que la ligne n'a pas de rayures dessus. Ce truc apparaît ici. Regarde ça. Je double-clique dessus ici. Vous voyez que cela n' existait pas avant, cliquez sur « off », « cliquez sur ». Il dit : « Hé, tu veux gâcher le déménagement ? Tu veux un outil de lasso ? Nous allons créer le Shape Builder. Nous utiliserons tous ces outils plus tard. Vous pouvez en sortir en cliquant sur la croix officielle ou, si vous êtes dedans, double-cliquez simplement sur l'arrière-plan. Passez au mode d'édition d'objets où les gens se perdent très tôt. C'est bon, c'est ça. Je vous verrai dans la prochaine vidéo. 14. Échelle et outil de sélection dans Figma: Bonjour Dans cette vidéo, nous allons voir la différence entre l' déplacement et l'outil de mise à l'échelle. L'outil de déplacement est celui que nous avons utilisé jusqu'à présent. Je vais le redimensionner, et il deviendra peu plus gros, mais ce n'est pas ce que nous voulons. Nous voulons l'étendre à une plus grande échelle. Nous allons donc utiliser l'outil de balance, d'accord ? Sélectionnez tout, et c'est ce qu'il fera. Ils ont tous les deux leur place. Laissez-moi vous montrer comment ils fonctionnent tous les deux. Et nous nous perdons un peu, mais nous réparons le problème. C'est bon Allons-y. Pour commencer, je voudrais ajouter le trait autour de ces boutons, donc je vais le saisir. Allez ici, allez modifier, et je vais dire copier les propriétés, ou vous pouvez utiliser un raccourci et je vais sélectionner les deux. n'est pas le genre, je veux juste deux petits rectangles et je vais utiliser le Command Shift V ou le Control Shift V sur un PC C'est bon. Par défaut, Figma fonctionne comme vous le gérez. Je fais une sélection là-dessus. Je les ai attrapés tous les deux. texte et ce bouton sont là et vous vous dites « Je voudrais le déplacer un peu ». Et peut-être le redimensionner un peu. Mais disons que je veux qu'il s'agrandisse. Disons que celui-ci ici, je suis du genre, A, c'est trop gros. Il faut que je le réduise. Montre. La police ne devient pas plus petite. Redimensionne le rectangle, mais rien à l'intérieur. Pareil pour le dessin ci-dessous. Si je veux que tout ce bouton soit plus gros, regarde. Si je le fais glisser plus gros, on dirait que le trait a la même largeur. Le texte est de la même taille, comment puis-je le faire alors ? Je veux que tout soit plus grand. Ah, quart de travail. Il le redimensionne proportionnellement au rectangle, mais la police est toujours de la même taille Nous allons donc utiliser l'outil de mise à l'échelle. vous allez souvent passer de l'outil de cours, vous allez souvent passer de l'outil de déplacement à l'outil de mise à l'échelle Je vais prendre de l'échelle et cela fera ce que nous voulions faire. Redimensionnez à la fois le trait , la police et le rectangle. Il le fait de manière proportionnée. Je vais l'annuler parce que je veux le faire pour cela. Je vais les sélectionner tous les deux. Je vais passer à mon outil de balance. C'est déjà le cas par défaut. Maintenant, je vois que tu deviens un peu plus petit. Vous pouvez voir qu'elle se rétrécit vers le bas de la croix, ce qui correspond à une police ou à un signe plus, et je vais la déplacer ici En fait, j'ai envie d'un coup d'œil à l'extérieur. Faisons-le à la fin. Il s'agit davantage d'une question de balance que d'accident vasculaire cérébral. Vous aurez besoin de basculer un peu entre les deux. Polices de caractères. C'est fait, si je clique ici, je peux jouer avec la taille de ma police. Double-cliquez à l'intérieur de la zone de saisie. Disons que je veux l' agrandir, tu te dis, oh, oui. Mais ne vous inquiétez pas, il existe un raccourci super facile pour l'échelle, qui est clairement S pour échelle. Non, S est pour l'outil Slice , que je n'utilise jamais. C'est OK sans aucune raison valable. V est l'outil de déplacement, voir en bas, V et K. Vous parlez souvent entre eux. Tu le vois changer en bas ? OK, VK. Je serais sur K pour l'échelle, je peux dire, accord, une plus grande. Ce truc, je veux tout sélectionner. Je suis sur ma balance. Je peux dire que je change de sketch. Je vais sélectionner tout cela et le réduire pour qu'il soit plus petit. D'une manière ou d'une autre, je n'ai pas compris. Prends le tout. Alors réduis-le ? Qu'est-ce qui ne va pas chez toi ? Qu'est-ce que j'ai fait à ce type ? Allons y jeter un œil. Il travaille. Mm. Veuillez patienter. C'est bon, je suis de retour. Je sais maintenant ce que j'ai fait pour le casser. Le vôtre fonctionne probablement bien. Je vais te montrer pourquoi le mien est cassé. C'est parce que je vous ai montré quelque chose tout à l'heure et vous pourriez tomber dessus de toute façon Continuons dans cette voie. Sur cette ligne, pouvez-vous faire la différence entre les deux ? Celui-ci est entouré d'une boîte. La raison en est que lorsque je vous ai montré comment y accéder, double-cliquer dessus et vous déplacer de ce côté, je vous ai montré que cette montre n'était pas la bonne façon de procéder. Si je prends celui-ci, alors toi. J'ai saisi le rectangle et j'ai essayé de l'agrandir. J'ai fini par l' entourer d'une boîte , au lieu que ce soit une ligne. Il s'agit maintenant d'une ligne à l'intérieur d'un rectangle. Alors, que s'est-il passé lorsque j'ai saisi la tête carrée pour montrer la mauvaise façon de faire les choses ? Je ne le fais pas normalement, c'est pourquoi ça m'a un peu effrayé car j'étais perdu Nous n'expliquerons pas trop comment y remédier. C'est vraiment compliqué en début de cours et ce n' est pas vraiment utile. Nous pouvons simplement copier-coller. J'en ai un autre, je vais le traîner et je vais vous montrer comment obtenir un bonus parce que nous nous sommes perdus. Ce que je vais faire, c'est aller ici et dire retourner celui-ci et mettre dans le coin. Lorsque je le fais glisser, cliquons à l'arrière. Cliquez sur la ligne et faites-la glisser. Nous finissons par l'entourer d'une boîte comme nous l'avons fait. Regarde ça. Si je clique sur le bouton maintenir et que je le fais glisser, cela cause ces problèmes lors du redimensionnement Essayez de ne pas faire glisser les bords de ces cases car cela pourrait nous causer quelques problèmes. Si vous devez modifier la ligne, assurez-vous de passer en mode édition d' objets en double-cliquant dessus puis en la déplaçant plutôt que de faire glisser les carrés vers l'extérieur, car cela pose problème Très bien, c'est le problème. C'est ainsi que l' on peut y remédier. Où en étions-nous ? R, sélection par rapport à l'échelle J' espère pouvoir maintenant tous les sélectionner. Passez à mon super raccourci, qui est K. Vous l'avez compris, et maintenant je devrais être capable de l'étendre à la hausse ou à la baisse. Et le trait vient avec la police. Tout évolue. Pour en revenir à l'outil de déplacement, qui est probablement l'outil le plus courant, souvenez-vous que je n'ai rien sélectionné. Appuyons sur V sur le clavier. Allons-y. Raccourcis ou utilisez-le sur le long chemin. Cela n'a pas vraiment d'importance. C'est la différence entre l'utilisation de déplacement et celle de l' outil de mise à l'échelle. Vous passerez constamment de l'un à l'autre. Idéal pour les polices de caractères. OK, réduis-le. Allons-y. Police de caractères plus petite. C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. Essayons de ne pas trop nous perdre dans la prochaine, Dan. C'est bon. 15. Frames et groupes dans Figma: Dans cette vidéo, nous allons comparer les images aux groupes. Nous avons utilisé les deux. Au moins tu sais ce qu' est un groupe . Il s'agit d'un groupe ici. permet juste de garder les choses en place et je peux les écraser et les déplacer. Fait des trucs de groupie. Des cadres quand même, super spéciaux. Ils se regroupent, mais ils peuvent faire des choses amusantes comme ça. Regarde, ça colle dans les coins. Je peux le rendre plus petit et je peux couper des trucs. Les cadres ont des pouvoirs spéciaux. aime les groupes, et je voudrais les présenter assez tôt dans le cours, si vous voulez, mec. Après cette vidéo, vous êtes encore un peu perplexe quant aux images. Ne t'inquiète pas. ai présenté plus tôt pour ne pas vous inquiéter plus tard dans le cours, car vous rencontrerez de nombreux modèles et œuvres d'autres personnes qui utilisent tous des cadres plutôt que des groupes, vous vous demanderez pourquoi ? Pourquoi ? Nous allons aborder une partie du Y. Maintenant, allons-y Commençons par dessiner quelques formes de ce côté. Prenons l'outil rectangulaire. Je vais dessiner un rectangle et maintenir la touche Maj pour obtenir un carré parfait. Faisons le polygone, qui est un triangle, faisons également une ellipse À peu près de la même taille. Je n'ai pas besoin de l'être. Je vais zoomer. Je dois dire que n'avez pas tous un accident vasculaire cérébral. Je vais sélectionner les deux options et dire que vous n'avez aucun rayon d'angle sans raison valable. Je veux juste des formes simples. Nous avons trois formes et je peux les aligner sans aucune raison valable. Descendez, passez à autre chose. Sélectionnons-les tous les trois et je peux cliquer dessus avec le bouton droit de la souris et dire groupe. Commande G, Contrôle G sur un PC. Regroupement très courant. Le regroupement fonctionne, comme vous l'imaginez. Je peux cliquer en arrière-plan maintenant et maintenant je peux cliquer et faire glisser tout cela parce qu'ils font partie d'un groupe. L'autre point à regarder, c'est que vous pouvez voir ici, sur mon panneau Layers, n'oubliez pas que vous allez sur le fichier, à la première page, et que nous sommes sur cette page de fonctionnalités, il y a celle-ci appelée « icônes ». Vous pouvez le renommer ici. À l'intérieur, parfois ils se sont effondrés, parfois ils sont ouverts. Il y a un petit chevron ici. Tu peux les ouvrir. À l'intérieur de mon groupe, il y a une ellipse, un polygone et un triangle Excellente. Groupes. Vous pouvez les dissocier en cliquant avec le bouton droit de la souris et en disant «  dissocier », le groupe disparaîtra et c'est juste la forme qui se trouve ici maintenant toute seule Annulez ça parce que je veux ce groupe. Ce sont des icônes. Vers le bas. C'est bon. Je vais vous montrer la différence entre un groupe et un cadre. Donc, ce que je vais faire, c'est dupliquer ça. J'en ai deux. J' utilise mon Alt Drag optionnel. Je vais les dissocier. Est-ce que mon groupe est en haut, appelé icônes, et voici mes trois ellipses. Je vais les déplacer au-dessus dans le panneau des couches juste pour que vous puissiez les voir plus facilement. Il y a mes icônes, et puis j'ai ces gars qui traînent ensemble. Je vais faire en sorte de maintenir ma place, vous attraper, de vous et de vous. Ils sont tous sélectionnés. Au lieu de dire groupe, nous allons parler de sélection de cadres. Nous avons un raccourci similaire. Vous allez dire : « Oh, ils se ressemblent beaucoup ». Comme tout cela est simplement nul, vous pouvez les déplacer. Celui-ci est maintenant dans un cadre, pas dans un groupe. Je peux les déplacer. Quelle est la différence, Dan ? Eh bien, ce qui est de regrouper des choses, rien vraiment. Vous pouvez utiliser un cadre ou un groupe. Dans Figma, ils utilisent des cadres pour tout au lieu de groupes Pourquoi ? Parce qu'ils sont comme des groupes, mais vous bénéficiez de fonctionnalités bonus supplémentaires. Je vais en parler un peu dans cette vidéo, peut-être juste un aperçu du fonctionnement des cadres, principalement parce que si vous ouvrez peut-être juste un aperçu du fonctionnement des cadres, principalement parce que si vous le modèle de quelqu'un d'autre, utilisez ou que vous ouvrez le projet de quelqu'un d'autre, ils peuvent utiliser des cadres pour tout C'est ce qui m'a embrouillé quand j'ai commencé. Je me suis demandé : « Pourquoi y a-t-il des cadres partout ? Je dis des choses bizarres, mais ils font vraiment des choses puissantes. Au fil du cours, nous en apprendrons davantage à leur sujet, mais je tiens à vous les présenter très tôt afin que vous n' ayez pas l'impression d'avoir affaire à des cadres Cool. Parlons des cadres. Ici, vous pouvez voir la différence dans l'icône. Comme vous pouvez le constater, les groupes sont représentés par ce petit carré en pointillé et les cadres de ce petit symbole de la livre. Il fonctionne de la même manière. Regarde, il y a des trucs dedans. Certaines des différences fondamentales, regardez ceci. Si j'entre dans mon groupe. Voici donc celle de mes icônes. Appelons simplement celui-ci des groupes pour faciliter les choses. À l'intérieur d'ici, si je double-clique pour entrer, c'est le mode d'édition d'objets, vous y entrez. J'ai double-cliqué dessus Donc, dans mon groupe, ou vous pouvez simplement cliquer dessus ici. Je vais supprimer l'ellipse, supprimer le polygone, supprimer le rectangle, et le groupe s'en va Il ne sert à rien d'avoir un groupe qui n'a rien à l'intérieur. Annulez ça. Que se passe-t-il avec le cadre ? Si je vais dans mon cadre, supprimez-le, supprimez-le, supprimez-le. Le cadre est toujours là. C'est bizarre. C'est pourquoi vous vous retrouverez avec de nombreux cadres vides. Vous vous demandez à quoi sert un cadre vide ? Je peux vivre seule. Cela nous ramène à la façon dont nous avons débuté ce cours. Regarde ça. Souvenez-vous quand nous avons dessiné les pages de notre téléphone. Ils utilisaient l' outil de cadre que nous avons utilisé ici. Ici, nous utilisons l'outil à cadre, le FK. Un cadre peut exister seul avec des éléments à l'intérieur ou non. Les groupes ne le peuvent pas. C'est l'un des avantages d'avoir un cadre. Ça les rend bizarres quand on en supprime des choses, elles existent toujours. Tu es du genre, c'est bizarre. C'est exact. Nous commençons à nous habituer à cette bizarrerie. Examinons un peu plus les différences. Lorsque j'utilise un groupe et que je viens de le sélectionner et que je le redimensionne , tout s'écrase Alors que si je prends celui-ci, le cadre QC peut occuper son petit espace. Il n'écrase pas le contenu. C'est très pratique parce que les cadres, disons, je le fais comme ça et je le fais glisser vers le haut, tu es du genre à ne rien faire, Dan. Waouh, ce que vous pouvez faire, c'est dire : « Je veux découper le contenu que vous puissiez l'utiliser comme un masque ». C'est l'avantage d'un cadre, et je l'annule. Permettez-moi de vous en montrer quelques autres, juste pour que nous puissions nous habituer. Pourquoi est-ce que je fais peur aux cadres à tout le monde ? Si j'attends la fin et que je vous montre des cadres, c'est trop tôt. Nous allons faire un peu ici et suivre le cours. À la fin, vous serez le maître des cadres. Regardons le groupe. Le groupe ici possède quelques paramètres différents sur ce côté droit. Regarde ça. Si je clique sur le cadre, il y a quelques éléments supplémentaires comme la mise en page. Nous pouvons cliquer sur le flux. À l'heure actuelle, il existe une forme libre mixte. Regarde ça. Je peux les empiler de cette façon. Je peux les empiler verticalement. Tu vois ? Revenez à Free Flow. En fait, tu dois annuler. Je peux faire d'autres trucs sympas. Permettez-moi d'en faire une démonstration de plus, de déplacer le groupe là-haut, de prendre ce cadre et nous allons savoir qu'il y a une chose étrange à propos des cadres, c'est qu'on ne décadre pas le cadre Vous regroupez et dissociez, mais vous encadrez puis dissociez Les deux utilisent le dégroupage pour les séparer à nouveau. Nous avons perdu notre cadre. Ce que je vais faire, c'est vous demander de le copier-coller , de le déplacer. Cela fait un petit bond en avant, mais je voudrais vous expliquer pourquoi les cadres sont puissants et pourquoi vous les retrouvez dans les autres documents de tant de personnes. Je vais donc les sélectionner tous les trois, quatre maintenant. Je vais cliquer avec le bouton droit de la souris, je vais dire sélection de cadres. Ce que je peux faire, c'est entrer dans le cadre en double-cliquant dessus. Mode d'édition des objets membres, accédez à l'intérieur. Je peux dire que vous allez avoir la contrainte du haut et de la gauche par défaut. Ces trois, cependant, j'ai sélectionné les trois avec ma touche Shift. Je suis donc à l'intérieur du cadre. En double-cliquant , j'ai demandé à Shift de les saisir tous les trois. Je vais dire pas en haut à gauche. Je vais être en haut à droite, rien ne changera sauf si je sors, maintenant je prends les bords, regarde ça. Pouvez-vous voir que les icônes ici veulent rester en haut à droite parce que je les ai définies sur la contrainte en haut à droite. Cela deviendra très pratique plus tard quand vous serez du genre « Je n' ai rien sélectionné », «   F », mon outil de cadre. Je veux que nous travaillions actuellement sur la version tablette. Nous allons faire un iPad Pro 11 pouces. Je vais faire glisser le nom vers le bas récupérer, le copier-coller et le déplacer vers le bas. Mets-le là et regarde ce qui se passe. Regarde, fais-le glisser, il colle en haut à droite. Vous pouvez utiliser de nombreux éléments à l'intérieur des cadres où vous pouvez les faire glisser vers l'extérieur pour les redimensionner facilement Si tu te sens un peu dépassé, c'est bon. Nous allons aborder ce sujet encore et encore, mais je voudrais juste aborder un peu d' action dès le début afin de ne pas trop vous choquer par la suite. Mais aussi, vous verrez que tout le monde utilise des cadres. Vous regardez le tutoriel de quelqu'un d'autre en ligne, vous utilisez des cadres. C'est pourquoi. Ils sont vraiment puissants. Je n'en ai pas besoin maintenant. Je vais cliquer sur le nom et appuyer sur Supprimer sur mon clavier. Je n'ai pas vraiment besoin de tout ça non plus. Je vais donc me débarrasser de tout ça. Oh, une dernière chose intéressante à propos des cadres, c'est de regarder ça. Lorsqu'il y a un cadre en arrière-plan, il porte un nom. Ce cadre n'a pas de nom. Allons y jeter un œil. J'ai ce panneau de fonctionnalités. N'oubliez pas que nous l'avons nommé. C'est la taille de mon iPhone, et c'est un cadre exactement comme celui que nous venons de créer. Vous pouvez soit dessiner des cadres à l'aide de la touche F, soit sélectionner des éléments et enrouler un cadre autour de celui-ci. Sélection du cadre. Peu importe la façon dont vous obtenez votre cadre, ils sont les mêmes une fois fabriqués. étrange, c'est voir comment celui-ci a un nom ici, celui-ci n'en a pas , même si, il s'appelle frame one. Je peux voir le mot « features » ici, mais pas pour le cadre 1. Cela n'arrive que lorsque ce n'est pas le cas. Tu vois ? Qui j'ai un nom maintenant. Mais je n'ai pas de nom. Donc, vous êtes du genre à trouver des choses qui ont un nom qui n'en a pas. C'est simplement parce qu'ils ne sont pas imbriqués, ce qui signifie simplement qu'il y a un cadre à l'intérieur d'un cadre. Le nom disparaît. Ah, Dan. Cela a pour but de vous aider à être moins confus au sujet des cadres. Mais passons simplement à autre chose . C'est bon. Passez à autre chose. Il s'agit de cadres par rapport à des groupes dans une figma Une chose est que je ne devrais jamais utiliser de groupes ? Sont-ils mauvais ? Ils ne sont pas mal. Il leur manque juste certaines fonctionnalités. Donc, si vous aimez utiliser des groupes, vous pouvez les utiliser. Si vous en avez besoin pour autre chose, comme découpage ou pour limiter l' endroit où ils adhèrent aux bords, vous devez utiliser des cadres Mais il n'y a rien de mal à créer un groupe. Cependant, les gens utilisent simplement des cadres C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. 16. Projet de cours 02 - Wireframe: Bonjour. C'est le projet de classe numéro deux. Nous sommes en train de développer notre structure filaire pour obtenir une version plus complète Donc, en gros, c' est juste ça. Nous avons en quelque sorte construit cette pièce ensemble. Je veux que vous développiez ces autres pages. Ils ne sont pas particulièrement difficiles car ce ne sont que des rectangles avec un certain type de texte J'ai mis du texte d'espace réservé ici en utilisant simplement des X. Il n'est pas nécessaire que ce soit exactement comme je l'ai fait, mais juste quelque chose de similaire. Nous voulons être relativement similaires au fur à mesure, car nous allons construire des choses ensemble. Donc, même si tu n'es pas d'accord, ils ne devraient pas être là. Faites-le de la même manière que Okay. La seule autre chose, c'est la flèche. Nous avons couvert les flèches, vous devrez donc peut-être y revenir. Mais oui, il suffit de le construire pour les trois pages. Nous suivons notre flux de tâches. Si vous n'êtes pas sûr de tout cela, n' oubliez pas que le document contient des projets de classe dans les fichiers d'exercices. Il existe un PDF de projets de classe. Tu peux vérifier ça. Comme nous utilisons ce flux de tâches que nous avons examiné plus tôt. Nous développons les fonctionnalités du produit sur la page d'accueil, la page de vérification et la confirmation C'est ce que nous construisons. N'oubliez pas choisir une couleur et une police simples. C'est aussi probablement le bon moment pour mentionner qu'il existe des polices illégales que vous pouvez choisir. Vous ne pouvez pas choisir le papyrus, le comic sans, le Times New Roman, aérien ou le script au pinceau Ils vous feront enfermer. Donc, n'importe quelle autre police que celle-ci. Ensuite, quand tu auras terminé, je veux que tu fasses une capture d'écran de tout ça. Il existe donc un moyen d' exporter des cadres. À l'heure actuelle, sur un Mac, je sais que je peux maintenir la touche Commande enfoncée, puis cliquer et faire glisser une boîte autour de chacune d'elles, et j'obtiens ce genre de capture d'écran pratique qui apparaît sur mon bureau. PC, je ne sais pas exactement ce que c'est. Vérifiez simplement ce que c'est sur un PC. Les différentes versions sont légèrement différentes. Ou prenez une photo avec votre téléphone, puis téléchargez-la dans la section des devoirs de ce site Web. OK, tu trouveras un endroit où tu pourras les mettre. Et pour ceux qui restent là jusqu'au bout, vous obtenez un bonus. Vous remarquerez que MO ne les a pas en haut, parce que je me suis dit : « Oh, il suffit de le copier cliquer sur celui des fonctionnalités et de le coller. Tu es du genre, hein. Mais pourquoi est-ce là ? c'est à cause d'une certaine bizarrerie que je veux vous montrer Cela n'arrive donc pas normalement, mais c'est arrivé dans ce cas, et je me suis dit que je vais le garder dans la vidéo. Le portefeuille de Scott se trouve donc sur cette page d'accueil. Pouvez-vous voir la page d'accueil ? Dans le panneau Laos à l'intérieur, Scott Wallets est un peu en retrait Mais comme sur ce point, vous traînez sur aucune page d'une manière ou d'une autre. Ce n'est pas sur confirmation. Il ne s'agit pas du paiement à l'écran, des fonctionnalités ou de la page d'accueil. C'est juste passer du temps seul. Voici mon menu de hamburgers. C'est pourquoi lorsque vous le sélectionnez, il le copie afin de savoir où il se trouve sur la page. Ce truc ne sait pas vraiment où il doit aller. Donc, quand je le copie et que je le colle, il le place simplement dans la page des fonctionnalités et c'est comme si M se produisait de temps en temps. Pas très souvent, souvent. Quoi qu'il en soit, ce que je vais faire, c'est juste m'assurer que ce menu de hamburgers se trouve sur ma page d'accueil, où il faut juste m' assurer qu'il se trouve à l'intérieur d'ici. Peux-tu survoler et partir, Woh là-dedans. Maintenant, lorsque je sélectionne les deux et que je vais les copier, je clique sur le mot fonctionnalités et colle, je le place au bon endroit. C'est une bizarrerie, cela se produit de temps en temps si les choses ne sont pas dans le cadre que vous deviez être Il traîne juste tout seul. Je ne sais pas comment j'ai fait ça. Voilà. Un petit conseil en prime pour vous à la fin. Va réaliser ton projet et je te verrai dans la prochaine vidéo. 17. Où trouver des icônes gratuites pour Figma: Bonjour. Hé, nous allons parler d'icônes gratuites. Il y en a plein en ligne. Je vais vous montrer les bons endroits pour les obtenir à la fois sur les sites Web et auprès de la communauté Figma Je vais vous montrer les types de fichiers dont nous avons besoin et comment les nettoyer pour les rendre utilisables. Allons-y. C'est bon. Il existe de nombreux endroits pour trouver des icônes gratuites. J'utilise iconfnder.com. Ça me plaît. J'ai utilisé un gratuit. Allons chercher une icône et discutons des choses à faire et à ne pas faire. Je vais taper. J'ai besoin d'un panier. Tapez donc dans le panier. Certaines choses dont vous devez vous méfier dépendent de la façon dont vous l'utilisez. Supposons que nous l'utilisions uniquement pour la pratique des études, vous pouvez utiliser n'importe lequel d'entre eux. Ceux que vous aimez sont gratuits et payants, donc je vais passer à la version gratuite pour ce cours. Vous pourriez les payer, c'est très bien. Nous recherchons. L'autre point, c'est que si je veux les utiliser à des fins commerciales, donc pour le travail, je dois m' assurer de les utiliser à des fins commerciales. Maintenant, certaines de ces utilisations commerciales nécessitent que vous disposiez de ce que l'on appelle un backlink Si vous passez la souris au-dessus de ce qui est indiqué, vous devez ajouter un lien vers le site Web du concepteur Ils vous permettront de l' utiliser, mais vous devez le faire sur votre site Web ou votre application quelque part, vous devez créer un lien pour dire : «  C'est là que je me suis autant amusé ». Vous pouvez choisir de rechercher un panier d'achat utilisé à des fins commerciales, mais il n'y a pas de lien retour Comme je peux simplement l'utiliser librement sans avoir à reconnaître le créateur. Maintenant, qu'est-ce que je cherche ? En gros, trouvez quelque chose que vous aimez. J'aime bien celui-ci. Je vais cliquer dessus. Vous pouvez le télécharger de plusieurs manières. Il y a les formats PNG et SVG. Vous connaissez probablement le PNG. Hum, tu sais, c'est juste un fichier image. Il est transparent, ce qui est parfait, et puis il y a eFGI qui convient mieux à ce boîtier Jetons donc un coup d'œil aux deux. Je vais télécharger un fichier PNG. Ça va faire 28 pixels. Je vais le télécharger. C'est bon. Je vais cliquer sur Enregistrer. Vous pouvez simplement copier le fichier PNG dans le presse-papiers, puis accéder à Figma et simplement le coller, car je viens de le copier-coller D'accord, c'est évidemment un moyen plus rapide ou vous pouvez télécharger si vous avez besoin de le partager avec d'autres personnes Bref, jetons un œil à l'autre. Passons à EFG. Téléchargez-le parce que je veux vous montrer quelques trucs. Je télécharge également le SVG, je vais copier le presse-papiers et le coller Tu es comme s'ils se ressemblaient, Dan, en quelque sorte. Si je les prends tous les deux et que je les agrandis, n'oubliez pas que notre outil de mise à l'échelle est l'outil K. OK, et je vais les agrandir. Pouvez-vous voir la différence entre SVG ici et PNG ici ? Le PNG est composé de pixels. Il est transparent, ce qui est cool, mais il n'est pas évolutif. C'est ce que SVG signifie graphique vectoriel évolutif. Je vais le saisir, il est évolutif et transparent. Vous pouvez évidemment obtenir un PNG plus grand. Je peux aller ici et dire : je veux un PNG, Dan, si je le fais grand, ça marchera. Copier dans le presse-papiers. Parfait. C'est beau et clair à cette grande taille. Mais il est toujours fait de pixels. Finalement, si je l' intensifie, je commencerai à les voir. Vous voyez le petit flou qui règne à l' extérieur. L'autre point, c'est que si je le télécharge, je veux vous montrer de le télécharger à nouveau. Regardons les tailles. OK, donc le SVG est assez petit. Il s'agit de 500 octets. Il y a ce premier PNG, le plus petit, qui était trop petit, non ? Et la taille du fichier est assez proche. Mais dès que je crée un fichier PNG plus grand, la taille du fichier est beaucoup plus grande. Donc 5 kilo-octets. Ce sont des octets, des kilo-octets. Cela représente 5 000 octets. Il est donc dix fois plus grand. Et lorsqu'il s'agit de conception de sites Web et d'applications, lorsque vous créez un site Web, vous devez avoir besoin que ces icônes soient très petites, se chargent très rapidement et soient évolutives. Les SVG gagnent. L'autre avantage des SVG est de se débarrasser de celui-ci. De plus, ils sont de couleur changeante. Regarde ça. Je peux double-cliquer dessus pour entrer. Je suis dans ce mode d'édition d'objets et je peux dire que vous êtes maintenant rouge. Alors que les PNG, je ne peux pas aussi facilement. Je dois passer à quelque chose et le recolorer plus difficilement Le SVG, c'est pour le vent. Parfois, cependant, vous pouvez tirer vers le bas une icône sur fond blanc. Ça va juste continuer comme ça. Parfois, ils sont allumés, parfois non. Vous voyez que ce n' est pas transparent maintenant ? Parce qu'il y avait un cadre extérieur avec du blanc en arrière-plan. Vous pouvez résoudre ce problème en. Allons y jeter un œil. Débarrassons-nous de ça. Les SVG, lorsque vous les obtenez d'autres personnes, de sites Web, sont souvent un gâchis Le problème, c'est qu'il y a un cadre et à l'intérieur de ce cadre se trouvent un rectangle et mon petit dessin vectoriel que je veux voir du panier. Je n'ai pas besoin de ces autres déchets. Ce que je peux faire, c'est simplement le sélectionner dans mon cadre. Voici mon vecteur. Je veux les sortir de ce cadre et le cadre que nous avons ici n' est pas très utile pour le moment. Je pourrai les nettoyer ensuite. Vous finissez par le faire souvent lorsque vous travaillez avec SVG d'autres personnes de la même manière que Figma les traite Ils sont compliqués, je sais, plus compliqués qu'un PNG, c'est sûr, mais c'est exactement la voie à suivre. L'autre avantage des SVG, que si je double-clique dessus, vous pouvez commencer à voir ces points Nous avons vu ces points lorsque nous travaillions avec cette ligne. Regarde ça. Zouk. Vous pouvez commencer à les personnaliser sur le chariot Mad Max. Super rapide. icônes gratuites Figma lui-même est un autre bon endroit pour obtenir des Elle possède une communauté. Je vais revenir à cette petite icône de la maison ici. Je vais aller dans Modèle et outils. Ils n'arrêtent pas de le renommer Parfois, cela s'appelle Communauté et parfois il y avait un bouton en bas, puis un bouton en haut, il suffit de garder un œil sur l' endroit où il aurait pu aller. Chaque fois que je change ça, et je le change. Du côté de la communauté, je vais faire une recherche dans cette communauté, je vais taper des icônes, et vous découvrirez qu'il y a plein de choses géniales ici, en groupes. Disons que les icônes I want hero sont très courantes à utiliser. Il s'agit d'un groupe d'icônes que de nombreux designers et développeurs utiliseront. Je vais ouvrir ça. Peu importe ceux que vous utilisez. Vous recherchez le style qui vous plaît. Cela va soulever un point intéressant. J'ouvre essentiellement le dossier de quelqu'un d'autre. Voici l'aperçu. Je suis allée dans la communauté, j'ai trouvé quelque chose qui m'a plu. Il y a plein d' autres éléments ici comme les maquettes, les maquettes ou les applications et sites Web complets d'autres personnes maquettes, les maquettes ou les applications et sites Web complets Nous y reviendrons plus tard. Mais pour le moment, ça va dire que je veux l'ouvrir dans Figma, ce qui est étrange Vous n'y jetez pas un œil. Vous l'ouvrez réellement et maintenant cette copie est à vous. Ce que je veux dire par là, c'est en ce qui concerne les icônes des héros, si je rentre chez moi, que je le ferme si je rentre chez moi, que je le ferme et que je passe à mes brouillons C'est en quelque sorte là que nous avons commencé. Il y a le flux de tâches, le wireframe sur lequel nous travaillons Et maintenant, hero icons est un fichier que j'ai. C'est dans le cloud, mais pensez-y maintenant sur votre bureau. C'est comme ton dossier. Il n'est pas connecté à l'original. Cela peut devenir un peu compliqué. J'ai l'impression que lorsque vous ouvrez de nombreuses icônes différentes, elles s'empilent ici. Donc, une fois que vous avez trouvé le contenu et que vous l'avez peut-être retiré d'ici, vous pouvez revenir à cet onglet d'accueil, cliquer avec le bouton droit de la souris et le déplacer vers la corbeille, afin de pouvoir le garder bien rangé Donc, si vous parcourez de nombreux modèles différents, informations provenant de la communauté d'autres personnes, ils gâcheront vos documents. Bien, jetons un coup d'œil ici, et vous pourrez y voir plein de trucs sympas, de tailles différentes. Ce qui est bien, c'est que disons que quelque chose comme ça est une icône de la maison. C'est un bâtiment ici. Ils ont une version solide par rapport à une version sommaire. Mais quand il devient plus petit, pouvez-vous voir qu'ils le modifient réellement. Lorsqu'il doit fonctionner avec une très petite taille, ils perdent beaucoup de détails. Regardez les fenêtres se rétrécir. Un designer y a bien réfléchi et quand c'est une taille aussi grande, elle ressemble à ça, mais quand elle est plus petite, nous allons en quelque sorte l'ajuster. Vous pouvez voir que celui-ci est un peu plus élaboré. Lorsqu'il devient plus petit, il est juste un peu plus découpé pour être plus visible à une taille plus petite. Il y a plein de trucs sympas ici. L'une des autres choses est que si vous avez téléchargé autre chose que les icônes des héros, vous constaterez peut-être que sous les pages d'ici, il y a peut-être une page de couverture puis les icônes. C'est ce qu'ils ont fait ici. Si vous ouvrez quelque chose, vous diriez que je ne le trouve pas. Parce qu'il y a des pages. Nous ferons des pages ensemble plus tard, mais regardez, il y a peut-être autre chose. L'autre chose est d' essayer de trouver les icônes ici. Vous pouvez effectuer une recherche par recherche, mais il existe une option. Icônes. Je peux y jeter un œil. Voici toutes mes icônes, plein de choses. Ils sont très bien organisés, mais vous pouvez faire une recherche. Tu peux faire ce que nous recherchons ? Du shopping ? Y en a-t-il un pour faire du shopping  ? J'imagine qu'il y en a. Oh, regarde ça. OK ? On y est donc passé directement. Maintenant, comment puis-je l' intégrer à mon document ? Ce que je vais faire, c'est dire, d'accord, j'aime bien ce type ici, double-cliquez dessus pour entrer Maintenant, c'est là que ça devient un peu compliqué. Je vais mettre fin aux recherches. Voilà, c'est là. Je double-clique à nouveau dessus. OK ? C'était donc au sein d'un groupe. Maintenant, il est de nouveau à l'intérieur. Je peux rentrer à l'intérieur, et je peux me rendre directement au vecteur qui s'y trouve. OK ? Vous savez, vous vous retrouvez avec ce mode d'édition d'objets. C'est alors que vous savez que vous êtes allé assez loin, car il peut s'agir de groupes à l'intérieur de groupes à l'intérieur de groupes. Donc tu essaies de les trouver. Je vais le copier, puis je vais passer à mon autre onglet. Oh, c'est l'heure du raccourci. Commandez un, deux, trois sur un Mac, contrôlez un, deux, trois. Nous allons passer d'un onglet à l'autre en haut de la page. Si vous avez quatre objets ouverts, vous pouvez choisir un, deux, trois, quatre. Si rien n'est ouvert, vous ne pouvez accéder qu'à la commande ou au contrôle. C'est juste le port d'attache. Je peux revenir à la commande 2, coller, et c'est parti. Je vais utiliser mon outil de balance, Juk Okay, et nous avons l'icône de quelqu'un d'autre Une dernière chose qui pourrait arriver, c'est que vous pourriez saisir, disons que c'est ça et que je comprends, je pense l'avoir, et je vais passer à la commande deux, contrôle deux sur un PC où je le colle. Ce que je veux te montrer, c'est que je l'ai. Mais il y a cette étrange icône ici. En gros, cette petite icône ici et ce petit groupe ici, ça a l'air bizarre. Il est de couleur violette. C'est parce que c'est une instance. Nous examinerons les cas plus tard. C'est trop loin de ce que nous sommes maintenant, mais vous pouvez alors vous demander accord, c'est quoi tout ça ? N'oubliez pas que je peux y entrer , par exemple, je vous veux, je peux soit le couper , soit le coller, il en sort et ce petit conteneur, appelé instance, peut être supprimé et nous revenons à notre vecteur. Donc je suppose que je veux vous le montrer parce que vous allez chercher des choses et que vous vous demandez est quoi tout ce bordel » Essentiellement, nous voulons simplement en extraire le vecteur plus tard, lorsque nous saurons ce est une instance, ils seront utiles. Mais nous ne savons pas encore de quoi il s'agit. Prenez le vecteur. Très bien, nous n'avons besoin de rien de tout ça pour le moment. Nous avons tous trouvé d' où nous pouvions les obtenir. Je vais vous montrer un autre endroit où les trouver avant de partir et en faire un projet de classe. Mais nous le ferons dans une autre vidéo, car il s'agit d' un autre aspect fonctionnel de Figma appelé plugins. C'est ça. travaillant avec des icônes dans Figma, essayez de trouver des SVG, puis essayez de découvrir la partie vectorielle de cette icône, abandonnant le cadre dans toutes les instances qui l'enveloppent J'ai appris un joli raccourci Commande ou Contrôle, un, deux, trois, nous allons passer d'un onglet à l'autre. Impressionnez vos collègues en sautant les onglets . Je vous verrai dans la prochaine vidéo. 18. Comment utiliser les plugins d'icônes dans Figma: Bonjour Hey, nous allons examiner les plugins à l'intérieur de Figma En gros, un plugin est un petit mini-programme qui s'exécute dans Figma pour l'étendre D'accord, il pourrait s'agir de trouver des polices et des images. Il peut faire toutes sortes de choses. Hé, il y a plein de plugins différents. Je vais vous montrer comment les trouver dans le document de design de Figma, également dans la communauté Il existe un moyen super puissant d'étendre Figma et très utile pour nous Alors plongez-vous dans le vif du sujet et je vais vous montrer comment les trouver et les utiliser. C'est vrai, branchements. Ils se trouvent ci-dessous dans la section Actions. Ils le déplacent. Chaque fois que j'enregistre cette vidéo, c'est un nouvel endroit. Ils jettent un petit coup d'œil. Nous recherchons des actions, et nous allons passer à celle-ci appelée plugins et widgets. Nous allons donc examiner les plug-ins maintenant. Nous examinerons les widgets plus tard. Regardons quelque chose que nous connaissons déjà , nous allons donc examiner les icônes. Je vais taper des icônes de héros. Parce que c'est pour cela que nous avons trouvé ce document communautaire. Cela n'a pas vraiment d'importance, mais il se trouve qu'il existe également un plugin pour cela, plutôt que d' ouvrir le document de la communauté, rechercher dans les fichiers, puis de l'importer. Cela signifie qu'il suffit de brancher un petit mini-programme qui s'exécute sur votre écran, c'est simplement plus facile que de parcourir des fichiers. Je peux aller ici et dire, je veux la page du compte. Ils ont des comptes, allons-y . Il n'y a pas de compte. Je recherche une personne. Homme. Est-ce qu'ils en ont même un ? Personne responsable du compte, homme, femme, personne. Allez, Brain. Abandonnons. Allons réserver. OK, il y a donc un livre. Utilisons ce signet Donc, ce que vous pouvez faire, c'est cliquer et simplement le faire glisser vers l'extérieur et vous avez une icône, prête à être utilisée. Regarde ça. Super cool, super rapide, super facile. N'oubliez pas qu'il apparaît dans un cadre avec un vecteur à l'intérieur. Il n'y a rien de mal à avoir un cadre. Je crois que dans les deux dernières vidéos, j'ai dit Débarrassez-vous du cadre ». Non, c'est un peu comme un groupe. Il contient le vecteur. Cela le place dans un joli carré. n'y a rien de mal à cela. Parfois, cependant, ils ont un fond blanc. Vous pouvez voir qu'ils désactivent le globe oculaire pour le masquer. Parfois, ils s' en sortent et vous pouvez le désactiver. Un cadre est parfois souvent utilisé car il suffit d' en faire glisser un autre pour qu'il puisse être aligné. Tu peux voir ? Ce sont des vecteurs de tailles différentes, mais sélectionnons-les tous les deux. Ils sont dans le même carré, tu vois ce que je veux dire ? C'est pratique pour les icônes, car elles la même hauteur par largeur, 24 x 24 par leur apparence. Tu n' as pas besoin de t'en débarrasser. Je vous fais juste prendre conscience du cadre parce que ce qui se passe, c'est passer à autre chose, trouvons quelque chose avec des bits. Nous y voilà. Celui-ci, je finis par le faire parfois et vous me dites : « OK, je veux me débarrasser de cette partie, puis de cette partie, et vous vous retrouverez faire parfois et vous me dites : « OK, je veux me débarrasser de cette partie, puis de cette partie, et avec des restes indésirables parce qu'il y a ce cadre que je n'ai pas supprimé Ici, je peux le voir. Il n'y a rien dedans. Je peux le supprimer. Pour t'y habituer. Vous pouvez trouver des plug-ins d'autres manières. Je vais me débarrasser de ces gars. Oh, tu vois, je l'ai fait là-bas. Je ne me suis pas débarrassé des cadres. Je me suis débarrassé de l' intérieur. Je pensais l'avoir fait. Je n'ai tout simplement pas fait glisser une sélection assez grande autour d'eux avant de les supprimer. Passons donc à la communauté, et passons aux modèles et outils, on appelait autrefois communauté, qu'on appelle toujours communauté. Et passons aux plug-ins. En fait, il existe un ensemble qui dit spécifiquement de trouver des plugins pour l'organisation des fichiers. Il y en a plein ici. Je vous conseille, après cette vidéo, passer 5 minutes à regarder les plugins. Vous serez surpris de voir combien de choses ont été faites pour nous ici à Figma C'est vraiment utile. Si vous faites quelque chose de façon répétitive ou quelque chose d'étrange pour votre travail que vous utilisez cette autre société, Splash, un site de bibliothèque ou une base de données, vous découvrirez probablement que quelqu'un a créé un plug-in Il y en a tellement ici. Passez un peu de temps jeter un œil à l' édition dans les effets. En ce qui concerne les plugins, c'est parti. La raison pour laquelle cette méthode est très utile est que vous pouvez souvent dire que je veux les versions gratuites. L'autre élément pratique ici est, disons, iconfy. Faisons une recherche. Allons-y, icône, Pio ? C'est censé être une entreprise, mais il y a beaucoup de personnes différentes. J'ai tapé dans Knifi tous les produits que je souhaite montrer aux plugins. Vous pouvez voir cette iconographie, il y en a une autre. Vous pouvez regarder et dire : « A, celui-ci a été utilisé par 23 000 personnes, qui semble beaucoup jusqu'à ce que vous voyiez celui-ci et celui-ci a été utilisé par 3,5 millions de Lorsque vous êtes nouveau, c'est un bon signal pour partir. C'est bon. Beaucoup de gens utilisent celui-ci. C'est probablement celui que je veux. Ce sont les mêmes plugins. Nous pouvons simplement y accéder d'une manière différente, soit via la communauté, soit via notre document de conception. Je vais l'ouvrir dans le fichier sur lequel nous travaillons, et voici mon plugin. C'est ici. Vous remarquerez que tous les plugins sont fabriqués différemment car il n' y a aucune cohérence. je vous montre comment utiliser celui-ci était très différent de celui de l'icône du héros. Certains d'entre eux sont donc vraiment gros comme celui-ci, c'est assez gênant. L'autre Herro Con était assez petit. Celui-ci a des fonctionnalités intéressantes comme ce que ça fait si j'y vais, j'aime bien celui-ci ici. Je peux décider de quelle couleur il s' agit avant d'entrer dans Figma, et je peux décider de la taille qu'il doit avoir Ce sera un SVG et je peux importer en tant que cadre ou en tant que composant Lorsque nous serons plus avancés plus tard dans le cours, vous pourrez passer à ceci. Cela nous permettra donc d'économiser une étape plus tard. Mais pour le moment, nous savons ce qu'est un cadre. Nous allons l'apporter. Où est-il passé ? Juste sur ma page, vous pouvez simplement les faire glisser sous forme de. OK. N'oubliez pas qu'ils ne sont pas fabriqués par FIGMA s'ils ne fonctionnent pas, il se peut qu' ils ne soient plus pris en charge ou qu'il s'agisse d'une nouvelle prise et qu'il y a une pauvre fille qui essaie maintenir la prise en charge pendant ses pauses déjeuner Alors parfois, vous avez l'impression que cela devrait fonctionner, mais ce n'est pas le cas. Pourquoi ça ne marche pas ? Les plugins sont créés par la communauté, parfois par des entreprises, mais pas par la FIGMA La seule chose que je voudrais mentionner ici aussi , c'est faut en trouver une autre. Allons Unsplash Un très bon outil pour les images de stock gratuites. Si je fais une recherche, je vais dans plugins et widgets et disons que, cliquez sur celui-ci. Je m'en donne un petit aperçu. Tu as Run and Save. OK ? Courir est celui que tu veux. Il s'exécute simplement dans ce document. OK, je commence juste à travailler. C'est celui que tu veux. Save l'enregistrera pour votre organisation, ce qui signifie simplement que si vous utilisez FIGMA au sein d'une équipe plus importante, comme une organisation ou une grande entreprise comptant plusieurs utilisateurs de Figma, vous pouvez l'enregistrer, ce qui signifie que tout le monde y aura accès La plupart du temps, cependant, vous voulez simplement l' exécuter. Nous y voilà. Slash. D'accord, il existe de nombreux plugins, et c'est votre introduction aux plugins. Enfin, si vous revenez en bas et que vous cliquez ici sur votre panneau d'actions, vous verrez qu' il contient des actions récentes, vous n'avez donc pas à les rechercher chaque fois. Tout, c'est tout. Ce sont des plug-ins intégrés à Figma. Nous examinerons quelques autres lettres dans le cours, mais c'est une bonne introduction Passons à la vidéo suivante. 19. Projet de cours 03 - Icônes: Bonjour, ce ne sont pas des devoirs, mais un moment de projet de classe super amusant. Je veux que vous trouviez trois icônes pour votre site. R, je veux que vous trouviez un panier en image et une icône de réussite. Jetons un œil à la mienne. L'icône du panier apparaît donc sur chaque page, en haut, d'accord ? Et l'icône en forme d'image, nous allons remplacer les croix, d'accord ? Il est donc très courant d'utiliser ce type d'icône d' espace réservé à une image Iman d'apparence générique OK, donc je veux que tu le remplaces là où tu l'as utilisé. Et aussi sur la page de confirmation, trouvez une sorte de bon travail. Vous l'avez fait, icône. Ça n'a pas besoin d'être un conseil. Cela peut être un conseil. Votre image peut être différente de la mienne. Votre panier est peut-être un sac de courses. Cela dépend de votre produit. Si tu trouves une bonne place pour un autre, tu peux en avoir plus de trois. C'est très bien. Avant de continuer, je voudrais vous montrer quelques trucs. Pour ceux d'entre vous qui font leurs devoirs et qui ne les ont pas oubliés, vous pouvez gagner. Je vais copier celui-ci. Je dois m'assurer d'avoir saisi le cadre contenant mon vecteur ou simplement le vecteur si vous l'avez nettoyé. Je vais cliquer sur les fonctionnalités. Cliquez sur le nom de la page et je clique sur Coller. Je vais accéder à cette page au même endroit. Pareil pour celui-ci, maintenez la touche Shift enfoncée, saisissez les deux et collez-les. Se retrouve sur les deux pages. Regardez-nous. C'est idéal pour les navigations ou pour tout ce qui est cohérent sur la page Cohérent sur de nombreuses pages. Imaginez que vous avez, je ne sais pas, 20 ou 30 de ces cadres pour différentes pages de votre téléphone portable. Vous pouvez facilement les coller sur un grand nombre d'entre eux. L'autre chose que je veux vous montrer, c'est que j'ai utilisé le IConfiPlug Vous pouvez les obtenir à partir de l'outil de recherche d'icônes. Vous pouvez les obtenir où vous le souhaitez dans la communauté. L'endroit où tu les trouves ne me dérange pas. Je vais maintenant revenir dans le temps et vous montrer certains des problèmes que je rencontre, je ne sais pas, juste pour continuer à vous montrer certaines des particularités de Figma lorsque vous importez des icônes provenant d'autres personnes Bien, laissez-moi vous montrer maintenant. J'ai donc fini par utiliser l'icône Phi et j'en ai simplement fait glisser quelques versions Je me suis retrouvé sur cette page ici, et c'est là que c'est bizarre. Faisons un zoom arrière. Disons que je vais faire glisser celui-ci ici, il a bien fonctionné. Les vecteurs à l'intérieur du cadre, je vais les laisser comme ça, et ils sont là-haut. Ici, je vais faire glisser le vecteur sorti de ce cadre, le cadre est toujours en bas. Ce n'est qu'une des choses étranges de la FIGMA. C'est bon. On commence à s'y habituer. Ce qui rend les choses étranges, c' est que si je clique sur ce vecteur, c'est un vecteur à l'intérieur de ce truc appelé Ix success. D'une manière ou d'une autre, j'ai cliqué sur le vecteur et non sur le cadre. Si je clique sur le cadre puis que je le fais glisser vers l'extérieur, j'obtiens le tout. Parfois, vous pouvez développer le vecteur sans l'obtenir, Dan. L'autre chose à noter, c'est que je vais annuler cette première. Cette icône se trouve dans ma page de fonctionnalités car elle semble l'être. Regarde, ça y est. L'autre, si je clique sur celui-ci ici, le plus réussi, est en fait accroché à mon panneau de couches, pas à l'intérieur des fonctionnalités. C'est juste au-dessus. Imaginez si vous connaissez les couches, vous le saurez. Mais si vous ne le faites pas, cela signifie simplement qu'il semble être au-dessus, mais qu'il ne se trouve pas réellement à l'intérieur de ce cadre parent, appelé fonctionnalités. Ce que je vais faire, c'est juste une chose à laquelle il faut être attentif et je ne cesserai de vous le rappeler à la classe parce que c'est là que nous sommes pris au dépourvu Ce que je vais faire, c'est dire que vous sélectionnez l'ensemble du cadre parent , puis je vais le faire glisser. OK, maintenant c'est complètement terminé. C'est très bien. Pareil pour celui-ci. Il n'a plus de fonctionnalités, donc il n'est plus là, puis celui-ci, j'ai de nouveau saisi le vecteur par accident, je vais prendre le cadre parent et le faire glisser vers l'extérieur. Maintenant, ces gars traînent ensemble, pas sur quoi que ce soit, et je vais être un peu plus précis. Parfois, il est plus facile de simplement zoomer car il est plus facile de saisir les petits noms. Dans ce cas, il s'agit d'un point car il est assez petit. Je vais ajouter à une dernière chose que je veux vous montrer, c' est que j'en ai choisi trois différents. Ils venaient de la même famille. Ils correspondent à la taille. Mais celui-ci ne l'est pas. Ce que je vais devoir faire, c'est le faire glisser vers le haut et l'agrandir un peu. La raison pour laquelle cela est arrivé est 24 sur 24. Celui-ci fait 24 heures sur 24. Celui-ci est arrivé à 16 sur 16. Maintenant, je peux utiliser mon squelette, il suffit de le faire glisser vers le haut. Il devrait claquer et se casser. Et voilà, 24 sur 24. Maintenant, c'est la bonne taille. Vous pouvez sélectionner le cadre parent et dire, en fait, que vous allez avoir 24 ans. voyez, les dimensions sont indiquées par et comme la hauteur et la largeur sont verrouillées, on parle de ratio hauteur/largeur. Je ferai les deux en même temps. Cela vous a-t-il été utile ? Je dois ajouter ces éléments parce que oui, Figma a quelques particularités Les plus faciles pour s'y habituer. Je veux les mettre ici au cas où tu te perdrais. Et ce que je pourrais faire pour rendre choses un peu plus sympa, c'est ce que je vais dire Je vais appeler ça une icône, un trait d'union. Celui-ci, ici. Vous pouvez peut-être double-cliquer dessus ici ou dans le panneau Las. Celle-ci sera appelée image d'icône, et celle-ci ici sera « ne cliquez pas sur ce bouton ». C'est ce que nous allons supprimer. C'est-à-dire une petite icône, si vous cliquez dessus, qui indique simplement au développeur lorsque vous aurez terminé ce cours, j'en ai fini avec cette icône prête à être développée. Quand il est éteint, cela signifie que ce n'est pas le cas. Vous allez cliquer dessus accidentellement comme je l'ai fait. Nous aborderons le mode Dev un peu plus tard, et nous l' appellerons « succès » ou « technologie ». Cela n'a pas vraiment d' importance à ce stade. Je vais les mettre sur mon document. Maintenant, déplacez-les comme vous l'avez vu au début. Je veux que tu sois là. En fait, celui-ci n'avait pas besoin d'être taille parce que je vais l'utiliser beaucoup plus pour beaucoup plus terminer le projet. Je te verrai après le projet de cours. 20. Comment utiliser les pages dans Figma ma: Très bien, tout le monde. Dans cette vidéo, nous allons découvrir le monde passionnant des pages. Je veux avoir sa propre vidéo parce qu'elle comporte plusieurs éléments. Je veux apporter une valeur ajoutée, et nous en aurons besoin, car pour le moment , nous commençons par une seule page, notre structure filaire mobile, mais nous allons ajouter un tas d'autres pages pour conserver notre personnalité et notre flux de tâches Nous allons avoir celui-ci sur lequel nous travaillons actuellement dans une version de bureau, et je voudrais aussi vous le montrer parce qu'une page vous pouvez aller assez loin, mais vous finissez par vous retrouver avec des choses comme celle-ci. Il s'agit plutôt d'un projet du monde réel de ma part. Cela devient compliqué, vous finissez par avoir beaucoup de pages différentes. Au lieu de vous contenter de la première page avec tous les pourriels, vous devez séparer les éléments de manière à obtenir différents groupes de contenu pour vous de manière à obtenir différents groupes faciliter un peu les choses que nous allons faire pendant le cours. Allons-y et découvrons les pages de Figma Allons-y. Très bien, Pages. La première page vous est attribuée par défaut. Si vous ne le voyez pas, il se peut que vous soyez sur Assets. Vérifiez que vous êtes bien inscrit et consultez la première page. On peut aller assez loin avec un document. Vous n'avez pas besoin de pages, c'est ce que je vais dire. Vous devez cependant les comprendre, car oui, ils sont pratiques avec des pages supplémentaires. De plus, lorsque vous travaillez avec les documents d'autres personnes. Passons en revue maintenant et vérifions-nous que vous êtes inscrit. Appelons-en un. Au lieu de la première page, celle-ci est mobile et elle sera filaire, pas Wi-Fi Ajoutons une nouvelle page. Nous en sommes au petit plus. Appelons cela un ordinateur de bureau. Nous allons probablement ignorer les cadres Y. Je vais appeler cela un ordinateur de bureau et vous aurez deux pages. On dirait des pages, mais ce ne sont que des cadres. Passons au bureau et créons quelques pages. F est le raccourci pour l'outil de cadre ou saisissez-le en bas de l'écran. Je vais aller ici et nous allons passer de la tablette à l'ordinateur de bureau, nous allons passer au carlin, à l'ordinateur de bureau, ce 1440 par 1024 Je ne sais pas pourquoi vous devez dire 1024, mais c'est ainsi que tout le monde fait référence à cette taille. Pas de 1024 pour une raison ou une autre. OK, combien d'entre eux en veulent quatre. Je vais utiliser mon option sur un Mac sur un PC. Il suffit de faire sortir celui-ci. J'en ai deux ou tu pourrais utiliser ton copier-coller. Il suffit de cliquer d'abord sur le nom en haut, puis de passer à Commande. Qui se souvient de quel duplicateur ? C'est exact. Bon travail. C'est Command D sur Mac Control D sur PC. J'en ai quatre. Ensuite, nous allons passer au raccourci Shift. Maintenez la touche Shift enfoncée et appuyez sur un. Cela permet de tout mettre sur la page. J'aime bien ça. Je vais accélérer les choses parce que je vais copier et coller. En fait, je sais ce que c'est, page d'accueil. Permettez-moi de les copier-coller pour qu'ils correspondent. Tu attends là-bas. Je vais juste passer de celui-ci à celui-ci Le raccourci pour passer l'autre est simplement la page en haut et la page en bas de votre clavier. Vous avez peut-être actionné la touche de fonction si vous utilisez un ordinateur portable. Je copie ce qui s'était échappé pour en ressortir, page en bas. C'est douloureux. Je vais l'ignorer. Passons à la fin. Nous allons créer une troisième page. Celui-ci va appuyer sur Plus, et celui-ci va être un personnage et un flux de tâches Maintenant, sur cette page, je veux qu'elle soit en haut, afin que je puisse cliquer sur Maintenir et la faire glisser, pour qu'elle passe en haut et qu'elle n'ait pas besoin de cadre. Je vais juste les télécharger à partir des fichiers d'exercices. Je vais ajouter mon exemple de personnalité. Vous devriez avoir fait une capture d'écran ou téléchargé le vôtre ou téléchargé Je vais légèrement dézoomer, puis ajouter mon flux de tâches. Ici, il y a deux flux de tâches. Il s'agit de la version P&G, qui ressemble à une capture d'écran. Nous pouvons les utiliser. Déplacez-en un pour les intégrer tous. Il existe donc un endroit idéal pour conserver le brief et tout ce que nous faisons sur le document. Comme vous pouvez le voir, ces gars n'ont pas besoin de cadres pour continuer. Ils peuvent simplement être déposés sur ce que je veux vous montrer, c'est que si le flux de tâches est actuellement au format PNG, parce que c'est facile à ajouter, mais vous voyez, nous voulons ajouter le fichier Figma de quelqu'un d'autre Vous l'avez téléchargé , vous l'avez trouvé, il est sur le disque dur, quelqu'un l'a partagé avec vous. Il est très facile de partager un lien vers le fichier, mais les utilisateurs partagent des fichiers Figma, le fichier lui-même, vous pouvez enregistrer une version locale Je l'ai fait dans des fichiers d'exercices. Je vais vous montrer Hope and one. Ce que nous allons faire, c'est retourner à la maison et nous allons passer à cette petite icône ici, Importer, et nous allons importer depuis mon ordinateur. Nous allons découvrir des fichiers d'exercices. Nous allons dire point FIG. Vous le voyez là, pas le wireframe. Je vais saisir le point du flux de tâches FIG. Je veux celui-ci parce que c'est un fichier de travail. Je l'ai saisi ou est-il là ? Au lieu d'une image, ce sont en fait tous les rectangles et autres objets Au lieu de cette image, je peux copier ceci, revenir à ma deuxième commande, même pour revenir à et me débarrasser de ce PNG et simplement coller les fichiers eux-mêmes, car ensuite nous pouvons le celle-ci et me débarrasser de ce PNG et simplement coller les fichiers eux-mêmes, car ensuite nous pouvons le changer et le modifier, corriger orthographe terrible et choisir de nouvelles couleurs. à vous de décider, mais je voulais aussi vous montrer comment importer C'est à vous de décider, mais je voulais aussi vous montrer comment importer les fichiers Figma d'autres personnes lorsqu'il s'agit d'un fichier physique Nous partagerons correctement plus tard. Pourquoi nous embêtons-nous à parcourir les pages ? Je l'ai mentionné au début, mais je voudrais vous montrer un autre bon exemple. Je vais rentrer chez moi, je vais aller aux modèles. Supposons que vous créiez une application IOS, IOS, nous allons appuyer sur Entrée. Nous allons en trouver un qui a, pour IOS 17, ouvrons-le. Et ce que vous trouverez est ouvert et Figma, dont nous savons que nous allons être d'accord, nous fournira une copie locale de notre propre version Nous ne travaillons pas vraiment là-dessus, c'est maintenant la personne qui l'a créé. Nous travaillons actuellement sur la version selon laquelle, si je rentre chez moi et que je consulte mes publications récentes, elle est là C'est en fait sur mon ordinateur maintenant. Mais quand je suis dedans, tu me dis : « Oh, c'est sympa. C'est très confortable. Il ne se passe pas grand-chose. Mais ensuite, vous devez vous assurer que les fichiers se trouvent sous les pages. Regardez, couvrez. Journal des modifications. Commencer. Mais regardez ça. Je peux faire défiler la page vers le bas et il y a beaucoup de pages pour ce document en particulier. De toute évidence, le système d'exploitation pour les appareils mobiles est énorme. Nous pouvons donc descendre et dire, en fait, pouvez-vous voir ce qu'ils ont fait, c'est qu'ils les ont regroupés ? Au lieu du mobile par rapport à l'ordinateur de bureau, ils ont disparu, je veux m'en sortir. Trouvons quelque chose d' intéressant. Regardons les notifications. Super intéressant. Mais voici une page dédiée aux liens vers directives les concernant et les éléments que vous pouvez commencer à utiliser. Ils sont un peu compliqués maintenant parce qu'ils se trouvent dans ce que l'on appelle des composants, mais nous allons les apprendre. Tu t'y habitueras plus tard. Mais cela vous permet simplement de contrôler les pages. Regarde ça. Tous les points dont vous avez besoin lorsque vous faites glisser des fenêtres contextuelles. Alors, regardez. Oh. Cela ne concerne que l'iPad, mais vous pouvez commencer à voir des personnes regrouper des éléments sur des pages, et lorsque vous êtes nouveau, vous risquez de ne pas les trouver perdre ou de vous perdre un peu. Il y a plein de choses cachées dans les pages ici. Très bien, fermons-le. Je vais retourner ici et tout nettoyer. Tu ne le feras pas. Il y aura plein de déchets ici. C'est bon. Je vais entrer ici et dire, pour être bien rangé pour ce cours, de retirer les poubelles Excellente. C'est ça. Nous avons réalisé une vidéo complète sur Comment ajouter une page. Bon travail, Dan. J'espère qu'il y a quelque chose utile pour vous et je vous verrai dans la prochaine vidéo. 21. Comment réaliser des prototypes dans Figma ma: Bonjour, tout le monde. Dans cette vidéo, nous allons créer un prototype. L'une des fonctionnalités les plus puissantes de Figma est la possibilité de simuler nos designs et de les tester au moins sur un téléphone virtuel , puis sur un téléphone physique, où nous pouvons accéder à nos différentes pages et voir comment cela fonctionne Nous pouvons lui donner une taille plus appropriée. Nous pouvons vérifier les tailles, et nous pouvons garder cela ouvert , continuer à travailler et à tester tout au long. C'est ce qu'on appelle le prototypage Passons à l'action et apprenons les bases. Bien, tout d'abord, déplacez-en une juste pour que dans l'écran, nous passions à cette option appelée prototype. Vous allez passer un peu du design au prototype et vous vous perdrez probablement un peu au départ , car prototype, si je clique dessus maintenant, il perd tous les éléments de design, donc la couleur, la police et les tailles Alors soyez juste attentifs. Je vous le rappellerai tout au long du cours. Cliquez sur Prototype. Cliquons sur ce premier cadre. Vous cliquez sur le premier titre du cadre, nous allons accéder à la page d'accueil sélectionnée. Ce que nous allons faire, c'est regarder cette voix planer autour de ce point qui apparaît dans les coins ici Ce que je peux faire, c'est dire cliquer sur Maintenir le pointeur. Allez-y. Par défaut, cela va juste dire que tout va bien se passer. Il dit : « Le déclencheur sera lorsque je toucherai, je vais accéder instantanément à la page des fonctionnalités Passons à la page des fonctionnalités. Celui-ci, il suffit de le faire glisser ici. Vous pouvez le faire glisser vers l'arrière de cette façon. Vous pouvez tout faire glisser pour voir ces éléments ici, on les appelle des nouilles ou des fils, et nous allons les faire glisser des fonctionnalités vers cette page. Ensuite, lorsque nous passerons à la caisse, nous allons faire défiler barre d'espace et la faire glisser vers celle-ci Nous allons utiliser toutes les interactions par défaut. C'est bon. Préparez-vous. Vous êtes prêt à créer un prototype ? Vous pouvez le faire en appuyant ce petit bouton en haut. Le petit bouton Play. C'est ce qu'on appelle un cadeau. Prêt, en cours de chargement. Ça y est. C'est dans un téléphone. Pas bon. Voici tout mon logo et tout ce qui s'y trouve. Nous aborderons cette question plus tard. OK, regarde ce combat. Cliquez une fois. Je passe à la page suivante. Page suivante. Page suivante. Oh, très excitant. Et puis ça ne mène nulle part parce que nous n' avons nulle part où aller une fois que c'est terminé. C'est bon. Lorsque vous utilisez cette vue prototype, il convient de noter cette vue prototype, il convient de qu'elle est en fait ouverte dans un autre onglet. Voici donc l'onglet sur lequel nous travaillons. Tout ce qu'il a fait, c'est que lorsque nous avons eu le bouton de lecture, il a ouvert notre design dans l'onglet. Il y a deux choses que nous allons examiner, c'est regarder ça. Il n'y a rien ici pour le moment, mais si vous faites un gros mouvement de souris, agitez ou cliquez en arrière-plan pour vous en éloigner Je dirais, écoutez, toutes ces autres options ici. Les principaux points que vous allez examiner sont le redémarrage. Vous voyez en bas, ici, Restart ou l'arche. Nous allons simplement revenir au début pour pouvoir le revoir. Charmant. Il y a d'autres options ici. Vous pouvez passer en plein écran pour vous débarrasser du chrome si vous souhaitez qu'il le présente à un client. Cliquez à nouveau dessus. Il y a d'autres options ici. Je ne vais pas tout passer en revue. La seule autre chose que vous pourriez faire, c'est que vous avez également une méthode manuelle pour procéder. Donc, il suffit de faire des allers-retours en utilisant le bouton OK, vous pouvez le laisser ouvert. Vous n'êtes pas obligé de le fermer une fois que vous avez terminé. Vous pouvez simplement le laisser là et il sera en ligne. Ce qui se passe, c'est de regarder ça. Si je clique dessus, vous remarquerez que je ne vois pas la couleur. Pourquoi ne puis-je pas changer de couleur, Dan ? Ouais. C'est exact. Je suis sur le prototype, je vais passer au design. Ici en bas, je vais choisir une nouvelle couleur. Je vais juste y mettre n' importe quel vieux truc. Et si je reviens à l'aperçu, je n'ai pas vraiment besoin de le lancer. Je peux le redémarrer et vous pouvez voir je suis de retour ici, que je peux rester ouvert. J'ai tendance à cliquer et à faire glisser cet onglet. Je peux le déplacer et je peux dire, c'est vrai, je veux qu'il soit sur le côté droit ici. Je peux travailler de ce côté, qui est un peu nul maintenant. Mais c'est une mise à jour en direct. Je peux le dire. En fait, je veux revenir à cette couleur d'origine. Qu'est-ce que c'était annuler, annuler, annuler ? Vous pouvez voir qu'il est en cours de mise à jour ici. Et ce que je fais encore plus, c'est moins côte-à-côte. Et ce que je fais, c'est le faire glisser et l'ouvrir. Ce que je vais faire, c'est fermer ça. Ce que je fais normalement, c'est que je le prévisualise et que je prends cet onglet . Vous pouvez le faire glisser du navigateur vers mon autre bureau que vous ne pouvez pas voir. Je fais exactement la même chose. J'entends parler mon autre document. C'est à vous de décider. Je vais le fermer. Un autre bon moyen de prévisualiser est ici, il y en a un autre Ainsi, au lieu d'appuyer sur le bouton de lecture, il y a un bouton de prévisualisation. OK ? Vous cliquez sur ce petit chevron ici, sur cette petite flèche vers le bas, vous cliquez sur l'aperçu, et cela s'ouvre dans une petite fenêtre qui peut être déplacée C'est juste pour traîner là-bas. C'est trop gros. Je peux le réduire pour améliorer l' affichage de mon téléphone. Ce que c'est vraiment pratique, c'est là, je peux le dire, donc je travaille sur la taille du clic sur Fonctionnalités. Pouvez-vous voir ses mises à jour ? Je clique ici, et le texte du produit est tout simplement trop petit. Je passe par ici et je dis bup, bup, vous pouvez le voir se mettre Je vais le rapprocher, vous pouvez prendre le haut, vous pouvez commencer dans ma vue distale vers le haut, je peux zoomer, travailler sur des choses et me demander, d'accord, quoi cela ressemble-t-il en termes de taille de police sur un appareil mobile ? Je ne dessine pas la mauvaise taille. Parce que vous voyez que ce 99 est bien trop petit. Je vais donc entrer ici, faire un grand, un grand, un grand, un grand, un grand, un plus grand plus grand. Tu as compris l'idée. Cliquez sur Shift, beau et gros. Encore une fois, vous pouvez redémarrer celui-ci et le fermer lorsque vous avez terminé. Je vais revenir à mon mode prototype. Vous pouvez supprimer ces fils en cliquant simplement dessus et en appuyant sur Supprimer sur votre clavier, les supprimant physiquement. Cliquez sur le cadre lui-même cliquez ici et appuyez sur Supprimer si vous voulez vous en débarrasser. Je vais annuler l'annulation parce que nous allons les supprimer. C'est ce que je veux faire. Supprime ce type, tu y manges. En fait, je vais les remettre dedans parce que je veux vous montrer quelques autres choses intéressantes qui pourraient vous surprendre. Si je suis à la caisse et que je vais jouer, en fait, c'est fini, oui, c'est bon. Si je clique sur, vous passez de l'aperçu au présent. Quel que soit le cadre que vous avez sélectionné, c'est le premier qui apparaîtra. Vous voyez que j'ai terminé un paiement vous plaît, mais ce n'est pas la première page. Cela signifie simplement que celui sur lequel vous travaillez sera présenté en premier. Si vous voulez que ce soit la page d'accueil de la première, je réinitialise, elle sera sur cette page. Une chose qu'il ne peut pas faire, c'est que vous ne pouvez pas le supprimer dans le sens voulu. Vous ne pouvez pas vous connecter à une autre page. Je suis toujours en mode prototype. Je peux cliquer sur Homepage. Je peux voir un petit point. Vous pouvez le faire de chaque côté. Peu importe si vous voulez qu'il apparaisse en haut, passe automatiquement à certains endroits, mais vous ne pouvez pas le faire passer sur une autre page. Ça ne lui plaît pas. Il faut donc passer à un autre cadre, c'est bon. Vous voyez, ils lâchent prise trop tôt, alors vous allez le faire glisser et ce que les gens demandent, c' est que parfois vous n' avez pas le cadre du mobile, alors je vais aller sur la page d'accueil et vous vous demandez Comment ai-je obtenu le téléphone portable ou peut-être que je ne veux pas d'iPhone, je veux un Android ou autre chose ». En mode prototype, cliquez sur l'arrière-plan pour ne rien sélectionner et vous pouvez voir ici les paramètres de votre prototype. Vous voudrez peut-être un téléphone plus ancien, vous le serez dans le futur. Tu ne peux être que dans le futur. Vous avez probablement un 17, 18, 19, vous pourriez vous dire, accord, je veux un Google Pixel 2 datant de l'âge des ténèbres. Ensuite, quand j'aurai un cadeau, il l'utilisera comme cadre. Pareil pour le bureau, passons au bureau, sans rien sélectionner, vous pouvez le parcourir. Je crois que j'ai changé le mien. Le vôtre ne porte probablement sur rien. J'ai mis le mien sur Macbook Pro parce qu'il a l'air cool. Et quand je prévisualise cette page, il n'y a rien dessus. Pas très excitant, mais c' est sur ce MacBook Pro. Je vais retourner à mon téléphone portable. Vous pouvez le changer en horizontal ou en vertical. Ils ne fonctionnent pas très bien car il est très rare de concevoir pour mobile paysager vertical, sauf si vous concevez spécifiquement une application pour le faire. Souvent, il prend la forme d'une tablette, ne se prévisualise pas très bien parce qu'il y est écrasé Lo Voilà. C'est bon, c'est ça. C'est du prototypage de base. Nous allons faire quelque chose d'un peu plus excitant que le suivant. Supprimons les interactions. Je clique donc dessus et je les supprime simplement. Et dites adieu aux nouilles. Peu de gens les appellent nouilles de navigation. C'est peut-être juste moi, alors soyez prudent lorsque vous vous rendez à la réunion et que vous parlez de nouilles. Bref, passons à la vidéo suivante. Connectons les boutons. 22. Animation de prototypes et accélération de la transition dans Figma ma: Bonjour Dans cette vidéo, nous allons voir comment ajouter des interactions aux boutons et au moment où nous cliquons dessus. Tout ça n'a pas marché. Nous allons cliquer sur celui-ci. Vous voyez que nous allons ajouter de l'animation à la transition entre les différentes images. Nous allons faire fonctionner la navigation en haut ici, en savoir plus. Oh, légèrement OK, ajoutons donc des interactions aux boutons et ajoutons quelques animations entre eux. Montez dedans. Très bien, pour commencer, assurez-vous que vous êtes en mode prototype et que vous vous êtes débarrassé des vieilles nouilles. Alors je vais me débarrasser de toi, de toi et de toi. Très bien, et changez-en un pour que nous puissions tous les voir. Très bien, nous avons donc effectué des transitions de page ou des pages et des itinéraires. Ce que nous allons faire maintenant, c' est le faire sur les boutons. Nous allons cliquer sur le bouton D'ici maintenant, assurer que vous êtes sur le prototype, et vous verrez que vous verrez les petits points, comme nous l'avons fait pour l'ensemble du cadre, là où ils apparaissent, nous pouvons les déplacer. Nous pouvons le faire pour n'importe quoi. Regardez, le texte ici, il y a une icône. Nous avons ce bouton ici. Lorsque vous cliquez sur le bouton B now, je veux cliquer sur maintenir et faire glisser le pointeur vers la page de paiement Nous avons ignoré la page des fonctionnalités. Faisons un test. Déplacez la barre d'espace pour ouvrir ce petit aperçu Dans ce cas, je t'y emmènerai. Lorsque je clique sur À présent, il passe à la page de paiement, ignore la page des fonctionnalités Génial Je vais le réduire pour que nous puissions voir les choses. L'autre Eh bien, en fait, avant d'aller trop loin, je vais appuyer sur la réinitialisation. Je ne vois pas les boutons. C'est un bon point à souligner. Nous concevons pour le I'm scrolling up pour l'iPhone 16 ? Et les boutons sont bons. Consultez-les, mais vous devrez peut-être prendre en charge les anciens modèles de téléphone. Vous devrez peut-être simplement vérifier quels sont les téléphones les plus courants actuellement, quelles sont leurs tailles et tester quelques-uns d'entre eux pour vous en assurer. Parce que si j'y reviens , où sont-ils ? Pixel 2 si ces boutons se trouvent en dessous de l'écran, l'écran initial, on l'appelle dessous du pli. C'est comme ça qu'ils l'appellent. Ancien terme d'impression où je ne peux pas les voir et n'ai pas autant de chances de les trouver parce qu'il faut les faire défiler ici. Ce que je vais faire, c'est qu'ils peuvent faire défiler la page sur le téléphone. Mais ici, je ne peux que regarder ça. Je peux prendre les deux. Ce qui est intéressant dans Figma, c'est que si je suis dans le prototypage, pas dans le design, je peux toujours faire bouger les choses Je ne peux pas en changer la couleur. C'est difficile de les attraper. J'y ai attrapé tout un tas de trucs. Je ne sais pas ce que j'ai attrapé. Je vais te chercher, tu peux les déplacer. Allez, Dan. Je vais zoomer. n'est clairement pas aussi utile en mode prototype, mais vous pouvez déplacer les choses. Tu peux voir mon petit aperçu ? Je suis du genre à vouloir qu'ils soient là. Cela signifie qu'ils peuvent être vus sur l'iPhone 16 et sur cet ancien téléphone. Et que pouvons-nous faire d'autre ? Faisons ce bouton. Maintenant, faites attention à l'endroit d'où vous choisissez de créer un prototype. Vous pouvez cliquer sur le texte et le transformer en prototype sur notre page de fonctionnalités, et cela fonctionnera. Dans la zone de clic, ils doivent cliquer sur le texte, qui est beaucoup plus petit que le bouton lui-même. Je vais donc annuler cela et m' assurer que je clique sur le bouton. Je veux que tout cela soit un bouton. Je suis juste en train de cliquer, de maintenir et de faire glisser. La prochaine chose que je veux vous montrer, c'est l'animation. Donc, par défaut, il est activé sur Instant. Ce que j'aimerais faire, c'est que lorsque l'on clique sur le bouton En savoir plus, j'aimerais qu'il fasse quelque chose d'un peu plus intéressant, comme Dissolve. Dissolve c'est. Si vous passez la souris au-dessus de ce petit pouce maintenant ici, cela vous donnera un petit aperçu Dissolve est clairement assez facile à comprendre. Ignorez Animate. Il y a un tas d' animations différentes ici. Il manque le meilleur du monde, Page Peel. Mais vos proches emménagent, déménagent. Permettez-moi juste de vous le démontrer. Je veux y aller, vous pouvez les explorer. Faisons la différence entre, disons, emménager. Tu vois ? C'est très excitant. Je le survole, je m'y glisse. Attention, il y a quelque chose d'un peu plus spécial à insérer ou à glisser, j'aime bien. Vous voyez, glissez dedans, je pousse l'autre et je le dissout en même temps La blanche est expulsée. Prévisualisons-le en fait. Par ici, je peux cliquer dessus. Vous pouvez voir l'autre se déplacer vers la gauche et se dissoudre tandis que celui-ci, le deuxième cadre, s'est déplacé vers l'intérieur. C'est une idée plutôt cool. Parmi les autres points à examiner, citons la direction à suivre. On peut le faire partir de l'autre côté. Je vais frapper. Je clique ici, en appuyant Alpha Reset. J'y vais encore un peu. Tu le vois pousser depuis la gauche ? Je vais retourner sur la droite. Tu peux monter ou descendre. Parlons de la courbe. Ease out est la méthode par défaut, ce qui signifie qu'elle arrive très vite et ralentit à la fin. Cela facilite les choses. Si vous voulez qu'il entre vraiment lentement, que vous voulez qu'il soit facile à prendre en main puis qu'il soit rapide à la fin, vous pouvez utiliser la facilité d'entrée. Tu peux faire les deux. La facilité d'entrée et de sortie est souvent une bonne solution par défaut. Ça me plaît. Lent au début, rapide au milieu, lent à la fin. Parmi les autres points intéressants, il y a la facilité d'entrer et de sortir. Cela a encore une fois un beau rebond. Regardez ceci pour en savoir plus. Il contient ce que vous appelez l' anticipation issue de l'animation. Il entre et va un peu au-delà de ce qu'il doit être, rebondit un peu. Ça me plaît. Vous pouvez jouer avec ceux-ci. Vous n'êtes pas autorisé à utiliser Bouncy. C'est légal. Alors, essayez Bouncy. En faisant, vous êtes autorisé à le faire. Je vais les utiliser à l'arrière. Regardons la durée. La durée est le temps qu'il faut pour que toute cette animation participe. Millisecondes, MS, il y a 1 000 millisecondes en 1 seconde, donc ça fait 1 seconde donc ça fait Donc si vous voulez que ce soit plus long, vous voulez que ce soit 1 seconde, le 0,3, vous pouvez le faire et regarder ça. Est-ce que c'est le cas. Plus rien Cela prend beaucoup plus de temps. Vous déterminez votre timing. Les valeurs par défaut sont cependant assez bonnes. Je vais revenir à 400. Vous êtes prêt. Je le traîne Probablement un peu vite, en fait. Je vais passer à 700. Voilà. Passons maintenant à certaines des autres tâches que nous avons l'heure actuelle, apprenez-en plus. Vous pouvez simplement sélectionner tout, vous ne devez donc rien sélectionner. Je vais faire un zoom arrière, en changer un. Tout voir. Je le ferme. Et vous ne pouvez rien sélectionner en cliquant en arrière-plan puis en allant sur Tout sélectionner, c'est modifier, je ne connais pas le raccourci. Là, vous pouvez sélectionner tout, ou commande A sur un Mac, contrôler A sur un PC, et vous pouvez voir toutes les différentes nouilles. Tu les vois ? Il y en a deux. Alors, quels sont les autres dont j'ai besoin ? À l'achat, cliquez sur le bouton. Allons-y, je l'ai acheté. Toutes nos félicitations. Et ce qu'il fera, c'est qu'il se souviendra de la dernière chose que tu as faite. Il va s'intégrer en utilisant toute la courbe et la durée. Un autre conseil, c'est que nous sommes bloqués. N'oubliez pas de déplacer la barre d' espace pour ouvrir le petit aperçu ou d'appuyer sur un petit bouton de lecture ici, à vous de choisir. Je vais passer à l'achat d' ici maintenant. J'arrive à ce point et puis je suis coincé. ne peux pas vraiment faire autre chose. Que faisons-nous ? Emmenez-le là-bas. Saisissez le bout blanc pour le faire glisser. Il est très courant de cliquer sur le logo pour revenir à la page d' accueil. Faisons-le. Je suis très proche et j'en ai besoin pour accéder à la page d'accueil. Évidemment, je pouvais faire un zoom arrière et faire glisser le fil ou les nouilles Mais vos designs deviennent vraiment très complexes. Parfois, vous savez simplement où il doit aller, mais vous ne voulez pas avoir à effectuer un zoom arrière et à essayer de le faire glisser sur tous ces éléments, c' est-à-dire faire glisser, comme vous le faites Cela peut être un peu pénible. Ce que vous pouvez faire, c'est simplement le faire manuellement. Une fois que c'est sélectionné, vous vous en assurez sur le prototype. Vous pouvez voir les indications ici. Vous pouvez ajouter un plus à côté . J'ai une nouvelle intersection. Le déclencheur est un clic. Lorsque vous cliquerez sur ce point, l'action sera effectuée, nous en parlerons plus tard Mais nous allons dire que j'aimerais qu'il navigue vers . Quelle destination ? Eh bien, regardez, c'est dans mes pages. Je veux qu'il accède à ma page d'accueil. Quel genre d'animation je vais lui faire dissoudre. Je vais tout laisser par défaut. Vous pouvez le fermer et vous verrez que le fil descend ici. Parfois, il est simplement plus facile de le faire manuellement. Il est donc bon d'y aller maintenant. Cela remonte à là. Plus. Nan. Je ne peux pas y retourner. Je ne l'ai pas fait sur cette page. Je l'ai fait uniquement pour ce logo, mais pas pour les deux. C'est un bon point. Ce que vous pouvez faire, c'est que vous pouvez simplement vous frayer un chemin en faisant la même chose pour tout cela. Ou ce que vous pouvez faire , c'est supprimer celui-ci. Supprimez-le. Ce que vous remarquerez, c'est que vous pouvez effectuer certaines tâches de conception de base à l'intérieur d'un prototype. Je pense que nous en avons discuté . Nous l'avons fait Je vais le sélectionner et le copier. Sur la page de confirmation je l'ai copié à l'aide de mon raccourci, et je vais cliquer sur Commander pour savoir où aller, puis simplement le coller. Tu vois, c'est allé exactement au bon endroit. Nous en avons déjà parlé , mais nous avons également acheté grâce à l'interaction. Cela ne fonctionne pas lorsque vous êtes en train de concevoir. Regardez ceci : si je clique dessus et que je copie, je passe ici, je colle puis je reviens au prototype. J'ai travaillé Cela n'a jamais été le cas auparavant. C'est le cas maintenant. Hourra. Je le savais. Quoi qu'il en soit, vous pouvez donc copier et coller des éléments et ils entraînent des interactions avec eux. Maintenant, nous devrions pouvoir aller ici, y aller et revenir. Accédez à la page À l'heure actuelle, c'est un achat, revenez à la page d'accueil. Oh, on est en train de le faire. Nous sommes en train de prototyper Vous devez en mettre à jour un ancien, comme celui-ci ici, je ne pense pas qu'il fasse la même chose, vous pouvez cliquer dessus ou peut-être que c'est celui-ci. Vous pouvez cliquer sur le fil et vous pouvez le voir en dessous ou vous pouvez le changer ici. Ça n'a pas d'importance. Si vous voulez en voir un peu plus ici, vous pouvez cliquer dessus et tout ce qui apparaît lorsque vous cliquez sur le fil ici s' ouvrira tout ce qui apparaît lorsque vous cliquez sur le fil ici s' ouvrira . C'est bon. Faites donc une petite expérience avec les différentes animations. D'accord ? Tu sais, tout ça. Malheureusement, il n'y a pas de peeling de page comme nous l'aimons tous. Je pense que c'est devenu illégal dans la plupart des pays. Donc oui, c'est ça. Expérimentez, ne jouez pas avec Smart Animate. Fais-toi une bonne idée. Rédacteur, pouvez-vous nous quitter de cette vidéo en utilisant le très joli peeling de page ? Allons-y J'ai dit : Fais-le. Voilà. 23. Comment ajouter la barre d'état iOS dans Figma ma: Bonjour, tout le monde. Dans cette vidéo, nous allons regarder la barre d'état, qui indique l'heure, la batterie et le signal Wi-Fi. Nous allons l'ajouter à notre modèle car pour le moment, il est regroupé ici sur l'iPhone 16 Nous allons l'ajouter pour avoir un peu d' espace afin d' éviter la boîte aux lettres, le fenêtre. Je ne me souviens pas comment ça s'appelle. Quoi qu'il en soit, nous voulons éviter l'appareil photo qui traverse l'écran de la plupart des nouveaux téléphones. Très bien, allons-y. C'est ce qu'on appelle la barre d'état. D'accord, alors faisons-le ensemble. Je fais ça depuis un petit moment, alors allons-y. Je vais rentrer chez moi. Je vais passer aux outils et aux modèles, et je suppose que je peux taper dans IOS. C'est ce qu'on appelle une barre d'état. OK ? J'utilise iOS parce que j'utilise l'iPhone. Vous pouvez utiliser la barre d'état Android. OK ? Et puis la façon dont je décide lequel utiliser est la suivante : je ne sais pas. Commencez simplement à les regarder, voyez laquelle est plutôt belle. Il a beaucoup de likes, de nombreux téléchargements. Il y en a probablement plus. Je m'en fous assez. Je vais en prendre un, l'ouvrir, voir si je peux récupérer IOS 7, jeter un œil, barre d'état. Voilà, donc je dois dire qu'en fait, cela ressemble à des parties de la barre d' état, jetez-y un coup d'œil. Oh, d'accord. Ils ont de nombreuses options. Nous allons opter pour la solution de base. Faisons-nous dans le noir ou dans la lumière ? Nous avons besoin du Dark One. Je vais le copier, aller ici et dire, faisons-le sur la page d'accueil. Passons à la page d'accueil, revenons au design, et je vais passer à. Tout d'abord, je sais que je vais devoir déplacer tout ça vers le bas. Il n'est pas nécessaire d' ajouter la barre d'état. La première chose, c'est que votre développeur n'en voudra pas, mais lorsque vous le prévisualiserez, cela peut être un peu étrange de ne pas l'avoir Allons-y. Je me base sur le dessus. Parfait. Je vais probablement le faire. Passons à notre aperçu et assurons-nous d' avoir jeté un coup d'œil, c'est là-haut. Nous allons changer de téléphone. Retournons en arrière. Passons au prototype. Allons-y et revenons à l'iPhone 16, qui se trouve tout en haut. Maintenant, prévisualisons-le mieux. Parce que c'est inscrit dans le comment ils appellent ça ? La pilule, non, la boîte aux lettres, la porte. Je ne m'en souviens pas. Mais maintenant, nous avons notre système de navigation ici. Ce qui a tendance à se produire, en particulier pour le Web mobile, c'est que vous n'en avez pas besoin, car le navigateur finit par le pousser vers le bas de toute façon, et il y a un peu de chrome en haut du navigateur. Mais pour notre modèle, je pense qu'il est bon. Nous l'avons réglé ensemble. La seule chose que nous pouvons faire, c'est est-ce que je le veux ? Je n'en veux vraiment pas. Ce que nous pouvons faire, c'est le sélectionner et passer au design et peut-être simplement lui donner une couleur de fond, afin que nous puissions le contourner lors de la conception . Je peux le faire glisser vers le haut ? Oh, je peux. Joliment conçu. La seule chose, c' est que lorsque vous commencez à ajouter des composants complexes provenant de quelqu'un d'autre, cela entraîne un certain nombre de choses. Ce truc ici est une instance d'un composant, dont vous ne savez pas encore de quoi il s'agit. Alors fais attention, tu te demandes : en ai-je vraiment besoin ? C'est possible. Il existe une option de mode sombre. Regardez, mode clair, mode sombre. C'est ce que nous allons également pouvoir construire. qui est vraiment intéressant, c'est que ces icônes sont tirées de ce document. Il existe un moyen de le faire dans Figma. Je vais l'inclure ici dans le cours simplement parce que vous finirez par le faire. Vous allez dire : « Je veux que vous preniez chez quelqu'un d'autre et qu'il commence à l'extraire d'autres documents, ce qui peut être un peu confus ». Ce que vous pouvez faire, c'est le sélectionner. Vous pouvez cliquer dessus avec le bouton droit de la souris et vous pouvez dire : « J'aimerais détacher cette instance », et vous pouvez faire de même pour toutes ces Tous ces petits diamants renvoient à ce document original. Je peux aussi aller te voir et détacher Instance. Maintenant, ce n'est qu'une partie de ce document, pareil pour celui-ci. C'est une façon un peu grossière de procéder car ce serait formidable si vous saviez ce que sont les instances et les composants, ce que vous ferez plus tard. Mais je ne veux pas trop approfondir ce sujet maintenant. Je veux juste ajouter des choses ici et en mettre un peu ici pour que si tu sautes de l'avant, je vais prendre ça, je vais prendre ça. Vous vous retrouvez avec quelques problèmes , sachez que ce n'est pas vous, c' est juste que vos connaissances actuelles ne sont pas encore tout à fait là. Mais ne vous inquiétez pas, nous y arriverons. C'est ce que nous avons. Est-ce que je le veux ? Je vais l'enlever. Cours. Tu peux le faire. Tu es totalement autorisé à le faire. D'accord, mais je vais l'enlever pour le reste. C'est juste que nous faisons en sorte que ce soit facile, mec. Voilà. Et passons à autre chose. Où est passée la ligne autour de mon bouton ? Hum. Est-ce qu'il a toujours disparu ? C'est le cas. Cela vous embête, n'est-ce pas ? Je ne sais pas quand ça a disparu. C'est bon, n'est-ce pas ? C'est ainsi que vous pouvez saisir la barre d' état et vous en occuper afin de la prévisualiser un peu mieux. Bien, passons à la vidéo suivante. Oubliez que cette vidéo s'est produite. Je pense que c'est la morale de l'histoire d'aujourd'hui. Très bien, vidéo suivante 24. Test sur votre téléphone avec Figma Mirror: Bonjour. C'est l'autre côté de mon bureau. D'habitude, tu regardes de ce côté. C'est comme ça que ça ressemble à camelote et à mes cartes son pour essayer de faire en sorte que ça sonne bien Et c'est la nuit. Ce n'est pas un peu maussade. C'est juste qu'il fait noir. Il est environ 11 h du soir, et nous organisons des cours pour nous Et dans cette vidéo, nous allons regarder ce qu' on appelle le miroir Figma. Qu'est-ce que c'est ? C'est une façon de tester notre Vous savez, nous sommes sur ordinateur à essayer de concevoir un site Web pour téléphone, un site Web d'abord mobile, accord, ou une application, d'accord ? Ça ne sert à rien d'y passer tout son temps. Tu dois le tester sur l' appareil, d'accord ? Il existe donc une application que vous pouvez télécharger depuis l'App Store Android ou Mac. On voit bien que je ne m'en sers pas. Mais ça s'appelle Figma Mirror. Ils sont peut-être en train de changer ce nom dans les commentaires s' ils l'ont mis à jour, mais cela s'appelle Figma Mirror Bien, fais une pause pendant une seconde. Salut, ils ont légèrement mis à jour l'application miroir. OK ? Donc, une fois que vous l'avez installé sur votre téléphone, vous pouvez simplement démarrer automatiquement. Maintenant, vous devez cliquer sur le bouton de mise en miroir, qui se trouve en bas à droite Cliquez simplement sur Mirror, puis ici dans Figma sur votre bureau, cliquez simplement sur la page que vous souhaitez voir apparaître en miroir OK, je vais cliquer sur une page d'accueil, et elle apparaîtra sur votre téléphone. C'est magique. En fait, vous devrez peut-être cliquer sur le bouton Commencer la mise en miroir, mais ce sera magique. Revenons à la vidéo. Vous vous connectez avec votre nom d'utilisateur et votre mot de passe Figma, puis comme par magie, tout Vous n'êtes pas obligé d'être sur le même réseau. Magie. Et en gros, ce qui se passe, c'est : puis-je vous montrer ici ? Je vais te montrer. Peux-tu zoomer dessus ? Tu peux en quelque sorte. En gros, si je clique sur différentes choses ici sur mon bureau, vous ne pouvez pas voir ce que je fais ici. Mais si je clique sur ma page de détails, où se trouve-t-elle ? Page de détails ? Ça y est. Cliquez sur mon paiement. C'est donc une sorte de mise à jour en direct. Et même Verda, c'est de la mise en scène en direct. Alors, est-ce que ça va marcher ? Peut-être. Alors, cliquez sur mon bouton Accueil. Qu'est-ce que tu peux voir ? Bouton d'accueil Le bouton d'accueil est trop petit, parce que je peux à peine cliquer dessus, et vous ne pouvez pas voir ce que je fais. Bouton « À l'heure actuelle ». Regarde ça. OK, achats. Sur quoi se concentre-t-il ? Est-ce qu'il se concentre sur la bonne chose ? Peut-être. S'estompe. Oh, regarde comme c'est bon. Je peux donc réellement y travailler. Et le plus important que je vais vous montrer, c' est que les boutons « À l'heure actuelle » sont trop petits, le texte. Ça a l'air bien sur un ordinateur de bureau, mais c'est tout petit là-dedans, d'accord ? Le bouton d'achat semble tout à fait correct quand je vais sur By now. Et comment se passe le tournage de la caméra ? C'est probablement terrible, mais bon, ce bouton d'achat me fait du bien. J'ai également beaucoup de mal à cliquer sur les boutons du menu de navigation. Ils doivent juste être, ils n'ont pas besoin d'être plus grands. Ils doivent être plus petits avec une plus grande surface autour d'eux, donc un cadre pour les agrandir. Les logos sont trop petits. Le texte sur la page d'achat est bon. La page de paiement. Et je suis bloqué sur la page En savoir plus. Je n'ai aucune sorte de prototypage sur la page plus de détails du produit J'ai oublié de l'ajouter. Vous l'avez probablement vu dans la dernière vidéo, mais quand vous arrivez à ce genre de scène et que vous voulez le tester vous-même, vous avez oublié ce passage. Eh bien, c'est bien trop petit, ou c'est une couleur hideuse. Vert. OK, donc, en fait, c'est probablement très bien. Oh, faisons une mise à jour en direct, parce que c'est plutôt cool Je vais régler le zoom afin que nous puissions le faire un peu mieux. Tu attends là-bas. Je vais changer d'appareil photo. D'accord. J' aurais probablement dû le faire au début. Regarde ça. Ce sont des mises à jour en direct. Je déplace des objets sur mon bureau, alors vous regardez mon ordinateur portable. Voilà, mon téléphone là-bas. Et oui, tu peux juste travailler. Donc, quand je travaille, surtout pendant la phase initiale de préparation des tailles de police et d'autres éléments, j'ai juste l'impression de ne pas avoir de support J'ai juste mon téléphone posé par terre. Mais pour que tu puisses le voir. C'est vraiment pratique maintenant. Je peux passer en revue et dire, en fait, quelle est la taille de la police ici, qu'est-ce que je veux faire ? C'est un groupe, donc je vais entrer dans mon groupe, et je vais utiliser le haut et le bas. Jusqu'à ce que je trouve quelque chose, ce que je regarde , c'est que je garde un œil sur mon téléphone. OK ? C'est ce que je suis en train de regarder. Je me demande Est-ce une taille abordable ? Ce que vous trouverez, c'est que presque toujours, 16 ans c'est bien. OK ? Vous ne pouvez pas le voir parce qu' il se trouve de ce côté de mon bureau, mais je suis passé à 16 points. Cette salle de sport est vraiment une bonne salle de sport sans cerveau. OK, je ne peux pas le détruire. 15, si vous essayez d' être cool et chic et que vous essayez de rester petit. Mais si vous descendez autour des 12 et 13 points, cela devient une chose assez délicate. C'est bien pour certaines choses, mais pour un gros bouton d'achat en cliquant maintenant, il semble un peu petit. Je veux donc passer en revue et élargir un peu les choses. Fais-les passer. Envoyons-les ensemble. Là-bas. Je dois faire de même pour le bouton en savoir plus. C'est difficile de le faire d'une seule main. J'ai besoin de mes mains ici, mais je ne veux pas voir mes doigts poilus dans la vidéo. Mais tu vois l'idée. Vous pouvez apporter des modifications très rapidement, voir à quoi cela ressemble sur un téléphone, d'accord ? C'est à peu près instantané. Je ne sais pas Je suis assez étonné de voir comment cela fonctionne. Donc, oui, si vous concevez pour une tablette, procurez-vous une tablette. Si vous concevez pour un ordinateur de bureau, c'est un peu plus facile, vous pouvez simplement le faire sur votre bureau. Mais un téléphone portable ou une application, d'accord, ou un site Web axé sur le mobile, comme nous le faisons, d'accord ? L'ordinateur de bureau fait partie de notre plan, mais il est secondaire. La plupart de notre audience proviendra de publicités payantes, car j'en ai parlé au client est le genre de conversations dont vous parlez également, comme la génération de leads, d'où vient tout cela ? Cela provient de publicités sur Facebook. Tout va venir des téléphones portables. S'il s'agit de vidéos YouTube How to, comme le font beaucoup de mes cours, il s'agit d'abord d'un ordinateur de bureau. Alors, quel genre de questions allez-vous vous poser en tant que designer UX ? Dans quel but concevons-nous en premier lieu ? Très bien, il est tard et il fait étonnamment chaud avec toutes ces caméras et toutes ces lumières allumées Je vais faire une autre vidéo avant d'aller au lit D'accord, c'est le miroir Figma et je teste votre prototype sur votre téléphone. Vu un peu. 25. Projet de cours 04 - Test sur votre téléphone: C'est l'heure des projets de classe. Nous allons prototyper votre site Web mobile et le tester sur votre téléphone. Utilisez les techniques que vous avez déjà utilisées et que nous avons apprises au cours des dernières vidéos pour signaler vos boutons de manière à ce que, lorsque vous cliquez sur les boutons, ils passent aux bonnes pages. Téléchargez ensuite l'application Figma. Je pense qu'il est juste répertorié maintenant sous le nom de Figma. Tu devrais le trouver. Il dispose de l'option miroir. Vous le trouverez sur Google Play et sur l'App Store. C'est comme ça que ça s'appelle et testez-le. Cliquez sur les boutons pour voir si cela fonctionne. Si, pour une raison ou une autre, vous ne pouvez pas faire fonctionner l'application, l'application téléchargeable. Vous pouvez simplement aller sur figma.com slash Mirror, et vous pouvez également l'utiliser Tu le fais sur ton téléphone. Je vais vous demander de vous connecter. C'est une solution de contournement. Ainsi, lorsque vous êtes sur l'application, connectez-vous et testez votre design. Ce que vous recherchez, c'est simplement effectuer quelques réglages de lumière. Les boutons sont-ils cliquables ? Sont-ils assez grands ? Le texte est-il lisible ? L'un des gros avantages que vous pourriez trouver cette vidéo, c'est qu'il y a un panier d'achat ici. Je n'ai rien arrangé. Cela devrait être le cas. Passons au prototype. Allons-y et c'est cliqué. Vous allez sur la page de paiement. La seule chose qui pourrait arriver c'est que ce bouton est assez petit. Il est difficile d'appuyer sur le menu ou de le fermer. Donc, ce que vous pourriez apprendre grâce à votre prototypage, c'est un zoom avant Je dois dire qu' en fait, cela doit être un peu plus éloigné de cela, afin que je puisse cliquer dessus avec mon gros doigt. L'autre chose que vous pouvez faire est que, selon la façon dont vous avez obtenu votre icône, vous en avez peut-être choisi une autre. Cela fonctionne peut-être différemment. Passons en revue. C'est bien de concevoir. Supposons que je veuille que la zone cliquable soit plus grande, mais pas l'icône elle-même à l'intérieur Je veux que l'icône reste à la bonne taille, mais je veux que la zone active sur laquelle je peux cliquer soit plus grande. J'ai l' outil de déménagement. Dans ce cas, ce qui se passe, c'est qu'il agrandit tout ce qu'il contient. Nous sommes un peu avancés ici, mais c'est quelque chose que vous voudrez peut-être faire. Couvrez-le correctement plus tard. Double-cliquez pour entrer dans ce cadre. Si vous n'avez pas de cadre, je vais vous montrer comment le faire en une seconde. Ce qui se trouve à l'intérieur de ma découpe d' icônes est réglé sur l'échelle. Je peux le mettre au centre là où il est indiqué les contraintes. Que si je clique dessus puis que je clique à nouveau sur le cadre parent, vous pouvez voir ici, et non le vecteur, le cadre qui se trouve à l'extérieur. Maintenant, regardez ce qui se passe. Je peux l'agrandir, vous savez, agrandir la zone qui l'entoure, mais l'icône reste la même. Il y a plus d'endroits où votre doigt peut réellement toucher et cliquer. Si vous n'en avez pas, disons que j'ai une icône et qu'elle existe, et je vais la copier-coller. Disons que vous m'avez suivi tout à l'heure et que vous n'aviez pas de cadre, vous avez juste l' icône assise là. Ce que vous pouvez faire, c'est cliquer dessus avec le bouton droit de la souris et dire « sélection de cadre ». Maintenant tu es là où j'ai commencé. Nous allons aller à l'intérieur et, par défaut, aller trop loin. Passons au vecteur ici. Oh. OK, c'est un bon point. Lorsque je clique suffisamment, je reçois de petites icônes. Ce que je veux vraiment faire, c'est sélectionner le cadre, corriger le vecteur et ensuite vous verrez s'il est réglé sur l'échelle ou sur le centre. Alors voilà. Petits bonus pour les personnes qui réalisent les projets de classe. Vous pouvez agrandir le cadre, mais pas les objets à l'intérieur. Très bien, teste-le quand tu auras fini. Ce que je veux, c'est que tu prennes une photo du cadre de ton excuse. Prends une photo du téléphone, d'accord ? Juste pour prouver que vous l'avez fait, téléchargez la photo de votre téléphone avec le projet dessus, le cadre en Y, et téléchargez-la dans la section des projets. J'imagine que beaucoup de gens aiment que je n'ai pas de deuxième téléphone , de copain, de partenaire, d' enfant ou de personne pour prendre une photo de votre téléphone. D'accord, vous pouvez simplement télécharger une capture d'écran si vous le souhaitez. Et une fois que tu l'auras fait, je veux que tu sois enthousiaste. Je ne sais pas Je parie que vous avez probablement la même chose. Lorsque vous le lancez sur votre téléphone, il y a une sorte de magie. Même moi, j'en ai fait 1 million. Je me dis : « Quand je le vois sur mon téléphone et que je commence à travailler dessus, touchant les boutons, je me dis : Oh. C'est réel. C'est en direct. C'est passionnant. J'espère que tu le ressens aussi. Alors, entraînez-vous, prototypez, apportez quelques ajustements. Peut-être que les polices ne sont pas de la bonne taille, peut-être que les boutons ne sont pas cliquables, puis téléchargez-les dans la section des devoirs Section des projets, même. C'est bon. Profitez. Je vous verrai dans la prochaine vidéo. 26. Qu'est-ce que l'animation intelligente et que sont les retards dans Figma ?: Bonjour. Hé, il est temps d'apprendre à faire de l'animation de base dans Figma OK, nous allons utiliser cette flèche pour animer nos félicitations Votre achat est en cours d'expédition. L'animation est assez intéressante dans Figma. C'est un peu rapide. Nous allons apprendre quelque chose appelé Smart Animate. Allons-y. Bien, tout d'abord. Premier quart de travail. Il suffit de donner tout ce qui se trouve sur la page. Barre d'espace, cliquez et faites glisser. Nous allons créer deux versions de cette page de confirmation. Nous allons animer entre eux. Vous pouvez donc le copier-coller. Je vais maintenir ma touche d'option KanimaCo enfoncée sur un PC et la faire glisser vers l'extérieur J'en ai donc deux exemplaires. Et ce que je veux faire, c'est animer cette flèche Que se passe-t-il à Figma ? C'est un peu étrange, c'est qu'en gros, nous allons juste animer entre ces deux pages et que quelque chose doit être différent Cette flèche va être différente. Nous allons le déplacer ici. Il suffit de le déplacer légèrement vers la gauche. Tout ce que nous faisons, c'est page de confirmation si je passe au prototype, et quand celui-ci sera prototypé, lorsque nous y jouerons et que nous arriverons à la page de confirmation, je veux que vous vous rendiez ici Nous allons simplement laisser toutes les valeurs par défaut et nous allons le tester Passons donc à notre petit prototype. Qu'est-ce qui va se passer ? Utilisons le présent. Non, ne pas utiliser le cadeau. Le cadeau, c'est bien. Va. Je vais utiliser une petite version pour que nous puissions tous la voir , afin que nous puissions en avoir un aperçu. Téléphone géant. Je vais aller sur la page VYW et j'achète, puis c'est ici. Si je clique une fois, ça bouge. Œuvres. Ce que nous devons faire, c'est ajouter de la magie. La magie dans ce cas, c'est si je clique sur la page de confirmation et que je clique sur cette transition entre les deux. Au lieu d'utiliser Instant, nous allons utiliser celui que nous ignorons avant Smart Animate. Nous allons tout laisser par défaut et lui donner le même aperçu. Fermons ça. Je vais utiliser Shift Enter pour ouvrir ce petit aperçu. Ce n'est pas le tour de Dan. C'est Shift Space. Déplacez l'espace, et maintenant, passez aux photos et cliquez une fois que c'est animé. est très peu excitant. Mais on l'a. Nous l'avons fait. Bon travail. Votre première animation. Améliorons les choses. En fait, nous allons le casser parce que je parie que vous allez casser le vôtre. Maintenant, l'une des choses que je veux faire , c'est que cela ne s'est pas produit très vite. Je veux qu'il sorte de l' écran. Je vais donc le déplacer ici. Vous pouvez maintenir la touche Maj enfoncée pour qu'elle lorsque vous la faites glisser en ligne droite Génial. C'est donc par ici. Je vais afficher un aperçu à partir de cette page de confirmation. Si vous cliquez d'abord sur celui-ci, puis appuyez sur la barre d'espace Shift. Je vais commencer ici plutôt que sur la page d'accueil. Si vous n'avez rien sélectionné, cela commence dès la première image. Mais si vous avez sélectionné le nom du cadre, il partira de l'endroit où vous l'avez sélectionné. Cliquons dessus une fois et cela n'a pas fonctionné. Ça a marché ? Je vais utiliser ma flèche arrière pour revenir en arrière. Juste mes flèches ou tu peux appuyer sur Réinitialiser. J'utilise simplement mes flèches gauche et droite pour avancer et reculer. B, cliquer une fois ne fonctionne pas. Pourquoi ça ne marche pas ? Cela arrive souvent. Si les choses s' estompent, c'est que c'est cassé La première chose que nous allons faire est de cliquer sur le titre ci-dessus, de le rapprocher un peu plus. Je vais maintenir la touche Shift enfoncée, récupérer deux pages de confirmation et les déplacer pour avoir de l'espace. Il est très courant de séparer un peu les animations pour avoir de la place. Que fait ce type ici ? Si je l'y mets, OK, maintenez la touche Shift. Il ne va toujours pas travailler. Pourquoi est-ce parce que jetez un œil aux couches. J'ai ma page de confirmation 1, 2, et je suis sur ma page de calques et je peux voir mon panneau de calques ici. Fichier, mobile, filaire, vous pouvez voir cette page de confirmation et celle-ci, si je les fais tourner et les fermer, ce type, ligne 13, traîne tout seul Il n'est sur aucun de ces cadres. Il joue sur cette page. Et en ignorant ce type. Ce qu'il fait, c'est dit Eh bien, il n'est pas là, mais il apparaît ici alors que nous disparaissons Ce que nous devons faire, c'est nous assurer que cela figure sur cette page. Vous pouvez le faire en le faisant glisser Vous voyez maintenant, c'est dans la page de confirmation. Regarde, il est dedans, mais si je le fais glisser vers l' extérieur, que je clique immédiatement, que maintiens la touche Maj enfoncée, il apparaît Ce que je peux faire, c'est juste le forcer. C'est quelle page ? Nommons-les. Double-cliquez dessus, confirmation 1. Confirmation 2, juste pour que je puisse faire la différence entre les deux. Je veux que ce soit sur la première page de confirmation. La ligne U 13 devrait être là. Elle disparaît. C'est là-dedans. Il est simplement masqué parce qu'il est accroché à cette page Essayez-le et regardez-le. Sachez où il se trouve. Donnons-lui un aperçu. Cliquez sur celui-ci, Shift space. Cliquons dessus. Nous l'avons fait. Il s'est animé dans. Nous sommes des génies. Fermons-le. L'une des choses que vous pouvez faire est que si vous créez animation qui sort de la page, vous pouvez cliquer sur cette page de confirmation et sur l'un des avantages d'un cadre au-dessus d'un groupe C'est cette page qui se trouve ici Si je passe au design, il y a une option qui indique le contenu du clip. Tu vois celui-ci ici ? J'ai l'impression que nous l'avons appris plus tôt, n'est-ce pas ? Je ne m'en souviens pas. C'est bon. Ça fait le week-end. Ah, alors désactivons cela et cela signifie que vous pouvez réellement le voir. Tu peux y aller. En fait, je veux qu'il soit un peu plus proche ou un peu plus éloigné ou je modifie la taille ou la largeur du trait. Quand je le prévisualise, vous déplacez la barre faciale, cliquez à nouveau, il fonctionne toujours de la même manière. Il n'est tout simplement pas coupé. Maintenant, peu importe comment vous publiez, qu' il soit découpé ou non Parfois, vous souhaitez simplement que le découpage soit désactivé pendant que vous travaillez , puis qu'il soit réactivé lorsque vous avez terminé le projet Encore deux choses qui pourraient vous détruire Si le vôtre est toujours en train de disparaître, vous êtes toujours en train de disparaître Vérifiez qu'il se trouve dans le bon cadre, alors nommez-les peut-être. L'autre chose importante à savoir, c'est qu'en gros, cela signifie j'ai reçu ces deux images et Dan a décidé d' animer intelligemment entre les deux Ce qu'il regarde, c'est tout ce qu'il y a ici. Si quelque chose bouge, il l' animera, ce qui est génial. Mais il doit savoir de quoi il parle. Disons que j'ai la ligne 13 et que j'ai la ligne 13. Si, pour une raison ou une autre, vous les avez copiés et collés et que celui-ci est à la ligne 14, il ne saura pas quoi faire Il doit porter le même nom. 13 et 14 ne marcheront pas. Essayons-le, il va cliquer et il va s'estomper. Tu es comme si c'était en train de s'estomper. La décoloration signifie cassé parce que c'est comme si, A, ce truc apparaissait juste sur cette page, je vais juste le faire apparaître Il vous suffit de vous assurer que vos noms sont les mêmes. Peu importe le nom qu'on leur donne du moment qu' ils sont identiques. Si cela ne fonctionne toujours pas, vous pouvez faire entre vos deux images disons que celle-ci ne fonctionne pas. Je pense que je ne peux pas le faire fonctionner, Dan, en m'en débarrasser. Ce que je peux faire, c'est récupérer cette version ici, la copier, cliquer sur le titre du cadre et la coller, et vous verrez qu'elle est collée aux lignes 13 et 13, puis l' animer Assurez-vous qu'il ne quitte pas la page. C'est un peu difficile à voir. Tu peux voir si je les fais tourner ? ligne 13 est en fait sortie de cette page, donc je dois la faire glisser à nouveau. Nous l'avons appris. Parfois, cela peut simplement résoudre votre problème. Donnons-le, cliquez une fois. La prochaine chose que je veux faire est cliquer sur Once Business. De toute évidence, les gens ne cliqueront pas après avoir accédé à cette page. Nous allons apprendre une autre technique d'animation. Cliquons sur le numéro de confirmation. Assurons-nous d'avoir un prototype. Ce que nous allons dire, c'est qu'au moment où il s'agit de cette interaction appelée «   appuyez, passez à la confirmation ». Dans ce cas, il s'agit de la deuxième confirmation. Ou vous pouvez cliquer sur ce Y ici. Matière. OK, donc nous ne voulons pas que ce soit disponible. Nous en voulons une autre. Nous en voulons un autre qui indique qu' après un certain délai, nous allons simplement le laisser comme valeur par défaut, puis passer à la deuxième confirmation. Il ne va pas demander de permission. Ça va juste attendre. Sais-tu combien de secondes cela fait ? C'est juste 0,8. OK, allons-y. Shot Plus. Et maintenant, C est parti tout seul. Je vais utiliser mes touches Ara pour y aller. Retour à la page d'accueil. Vous pouvez utiliser gauche et la droite. Je souhaite trouver la page d'accueil. Où en sommes nous ? Nous y voilà. Passons maintenant à By. Achetons-le et attendons. Attendez, attendez, attendez, attendez. Regarde ça. Je l'ai fait tout seul. Cela s' appelle After Delay. Vous pouvez jouer avec le timing. OK ? Nous l'avons à 0,8. Nous pouvons le faire à 100 millisecondes Donc, en gros, vous ne pouvez pas mettre zéro. Tu ne peux pas mettre zéro ? Oui, il faut y mettre une milliseconde Au bout d' une milliseconde, nous pouvons partir instantanément. L'autre chose que nous pourrions examiner est que vous pouvez les cliquer et les faire glisser, d'ailleurs, s'ils vous gênent. Souvent, ils peuvent finir comme ça. Il vous suffit de cliquer et de faire glisser cette partie supérieure pour la déplacer vers le haut. Regardons notre assouplissement. Nous avons envisagé un assouplissement. Faisons celle que j'aime le plus, c' est-à-dire la facilité d'entrée et de sortie le petit rebond. À quelle vitesse cela devrait-il être rapide ? Faisons-le 1 seconde et lançons-le . C'est trop long. Cela change en grande partie la durée, Shift Plus, en vérifiant simplement beaucoup trop vite. Réinitialisation alpha. Ça fait du bien. Maintenant, nous n'avons fait que le mouvement. Tu peux animer n'importe quoi. Tant que vous ne modifiez pas le nom, vous pouvez animer n'importe quoi. Trouvons. Cliquons sur la confirmation , revenons à la conception. Vous finirez par souvent alterner entre les deux. Je ne veux pas trop insister sur le raccourci, donc si vous le bloquez si vous le remplissez déjà. Mais si vous recherchez les raccourcis, la touche E permet de basculer entre conception du prototype et Maintenez la touche Shift enfoncée sur Mac et PC puis appuyez simplement sur E pour passer de l' un à l'autre. Je veux donc m'intéresser au design. Supprimons le contenu pour que nous puissions le voir et je dirais qu' il faut changer la transparence du trait pour qu'il soit nul. Il s'estompe au fur et à mesure. Tu déplaces l'espace. Vous le voyez disparaître. Je ne peux pas vraiment voir, mais c'est le cas. Où es-tu en ce moment ? C'est bon. C'est parti. Ligne 13. Voilà, c'est là. Remontons l'apparence à 100. Nous pouvons choisir le triangle. Peut-être que le triangle n'en a pas pour commencer et qu'il se transforme en triangle. Essayons ça. Je vais le déplacer un peu afin que nous puissions réellement voir les animations qui nous manquent. Réinitialiser. OK, je ne pense pas que tu puisses le faire pousser. Oui, ça a en quelque sorte grandi. Voilà. Je ne pouvais tout simplement pas vraiment le voir. Tu peux le voir tel qu'il apparaît ? Ce n'est pas drôle, Dan. Modifions le poids du trait. Essayez de ne pas cliquer dessus. ce qu'on appelle des variables. Nous les examinerons plus tard. Tu vois, ce sont de petits diamants. Ils sont présents dans beaucoup de choses. Nous traiterons des variables plus tard. Ils sont plutôt inconditionnels. Essaie de les éviter. Essayons ça. C'est bon. Pour rafraîchir, une flèche géante arrive. C'est bon. C'est donc ça. C'est l'animation, les bases de l'animation et de la figma. Vous avez deux cadres, il y a quelque chose de différent sur les deux. Tant que les deux éléments apparaissent sur les deux cadres, vous ne pouvez pas les empêcher d'apparaître ici. Vous ne pouvez pas le supprimer de ce cadre en espérant simplement qu'il apparaisse ici, il le fera, mais il disparaîtra simplement. Vous avez besoin de deux éléments, du même nom sur les deux, et vous devez vous assurer qu'ils figurent sur les images entre lesquelles vous animez Jetez un œil à ces couches ici, fermez-les toutes. Je trouve que c'est le moyen le plus simple de voir. Y a-t-il quelque chose qui ne devrait pas l'être ici ? Ensuite, faites simplement un changement entre eux. Que ce soit le mouvement, la taille, la couleur ou tout ce que vous aimez. Le gros truc est de passer au prototype, à Shifty ou de cliquer sur le bouton et de vous assurer que cette page, vous cliquez sur le bouton maintenez et faites glisser qu'elle est animée entre les deux et qu'elle est animée intelligemment et qu'elle les animera intelligemment entre les Si vous avez accidentellement deux interactions, comme je viens faire, vous cliquez sur le cadre, vous dites, lequel dois-je appuyer ou retarder Je veux me débarrasser de ce robinet. Je veux que mon délai soit réglé et que je passe à autre chose. C'est la base de l' animation dans Figma. C'est un peu maladroit. Si vous utilisez un autre outil d'animation doté d'une chronologie, c'est exactement comme ça dans Figma, mais nous savons maintenant que c'est un peu maladroit Nous ne réalisons pas beaucoup d'animation dans cette phase filaire. Mais c'est amusant et je voudrais le présenter plus tôt afin que nous puissions faire des choses plus compliquées plus tard. C'est bon. C'est ça. Animation à l'intérieur de Figma. C'était censé être la fin et j' enregistre les intros à la fin Puis j'ai enregistré l' intro et la mienne était cassée. Je me demande : « Que font-ils ? Je suis revenu pour te montrer. Je vais vous donner un aperçu à partir du paiement ici, donc Shift plus. Puis j'ai fait apparaître cette grosse flèche. Vous vous demandez : « D'où est-ce que cela vient ? » Quelqu'un d'autre a ce problème lors des tests ? La flèche se déplace dans cette direction. Que se passe-t-il ? Et comment y remédier ? Nous avons une animation entre la page de paiement et la page de confirmation. C'est une petite nouille ici. Le bouton va ici et il est écrit : «  Au toucher, je veux que tu glisses dedans ». Je l'utilise à l'intérieur comme à l'extérieur. Ce qu'il fait, c'est qu'il glisse dans cette direction. J'étais un peu animatrice. Vous voyez donc que toute la page est en train de glisser. Ce truc se voit parce que j'ai laissé le sous-design sournois Lors de la conception, j'ai oublié le contenu du clip. Si je l'éteins maintenant, cela devrait fonctionner. Comme je l'ai oublié, même lorsque je le prévisualise, cela peut être vu parce que l'animation entre ici et ici est une diapositive, toute cette unité glisse, passe en Zook, et nous pouvons le voir lors de cette transition Il y a deux manières de s'en débarrasser. Là où je parle de cette page, je vais la couper pour qu'elle soit masquée. Voyons si cela fonctionne. Je suis presque sûr que ça marche. OK, j'ai travaillé. L'autre chose que nous pouvons faire, c'est la même chose ici lorsqu'il s'agit de prototyper entre les deux Au lieu de faire tout cela, nous pouvons simplement y aller instantanément. Il n'y a aucun visuel entre les deux. C'est juste une question de réflexion et je suis déjà là, ça marchera aussi. J'espère. Quoi qu'il en soit, il est probablement plus facile de découper le contenu une fois que vous avez fini de travailler dessus. Vous avez peut-être eu ce problème. J'ai eu ce problème. Nous allons maintenant passer à la fin, à la fin finale. Voir dans la vidéo suivante. 27. Projet de cours 05 - Ma première animation: Bonjour, c'est l'heure des projets de cours. Nous pouvons créer une animation. Je veux que tu fasses ce que nous avons fait dans la dernière vidéo, animer quelque chose sur la page de confirmation Il n'est pas nécessaire que ce soit la flèche. Si vous êtes un peu nouveau sur Figma, vous trouvez cela assez difficile, surtout dans le domaine de l'animation, il suffit de faire ce que nous avons fait dans la dernière vidéo. C'est très bien. Si tu te sens courageuse et que tu as un peu plus d'expérience, tu te dis : « Oui, je peux le faire ». Essaie autre chose. Essayez une balle, un carré, une tique, icône, quelque chose d'autre à animer. Ce que c'est ne me dérange pas. Et lorsque vous aurez terminé vos livrables, je veux que vous preniez simplement une capture d'écran de vos deux pages A, les deux pages de confirmation. C'est totalement le cas. Téléchargez-le dans les projets. Si vous êtes une personne qui sait comment faire un enregistrement d' écran, faites un aperçu, enregistrez votre écran et téléchargez-le. Vous pouvez télécharger des liens Vmeo ou YouTube. Mais si c'est un peu hors de votre portée pour le moment, ne vous inquiétez pas. La capture d'écran est bonne. Mais lorsque vous commencerez, jetez un œil aux projets, voyez ce que d'autres personnes ont réalisé. Oui, trouvez des idées, appropriez-vous, copiez, ajoutez-y votre propre saveur. Et il y en a un peu que vous pourriez avoir d'abord. La plupart des gens auront un peu de mal à élaborer les animations maladroites C'est tout à fait normal, ne vous en faites pas si vous voulez, un peu d'épreuve et d'ère qui passent. Vous devrez peut-être revoir la dernière vidéo. Vous allez vous y habituer. C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. Joyeux Animate. 28. Partage et commentaires sur un fichier Figma avec les parties prenantes ders: Un Dans cette vidéo, nous allons voir comment partager vos fichiers avec les parties prenantes. Il peut s'agir de votre client, de votre patron, de votre ami. Vous devez partager le wireframe avec eux rapidement afin qu'ils puissent voir ce que vous faites, le tester et dire que vous êtes sur la bonne voie Je vais vous montrer les meilleurs moyens de le partager, ainsi que la façon de laisser des commentaires et de les utiliser. Nous travaillons avec un gars qui s'appelle Doug. Doug n'est pas mon alter ego intelligent. Je vais vous montrer comment lui permettre de travailler facilement avec moi en tant qu'UX. Sautez dedans. Pour partager votre document avec votre client, votre client, votre partie prenante, toute personne ayant besoin de le voir. J'aime partager le mien très tôt. Il suffit de cliquer sur le bouton géant Partager. Je vais cliquer sur celui-ci qui dit Copier le lien. Il est écrit que Linked a copié. Ensuite, je peux simplement le coller dans un e-mail. Donc, n'importe qui avec ce lien peut le voir, laissez-moi ouvrir dans un navigateur. C'est bon. C'est ce que voient vos clients et parties prenantes. Je suis le client. Je m'appelle Doug et Dan travaille pour moi et il vient de m' envoyer ce lien par e-mail J'ai cliqué dessus, je l'ai ouvert, et voici ce que je vois. Je n'ai pas besoin d'identifiant, je n'ai pas besoin de mot de passe. Je peux voir ce truc, je peux cliquer et faire glisser le pointeur. Je ne peux pas faire grand-chose. Mais je peux y jeter un œil, approuver, dire que vous êtes sur la bonne voie. Peut-être pourriez-vous changer cela, pourquoi faisons-nous cela ? Vous pouvez démarrer ce dialogue plus tôt. Il suffit d'utiliser le bouton de partage. Maintenant, si vous pratiquez cela chez vous et que vous copiez et le lien dans un autre navigateur, vous devez le coller dans une fenêtre de navigation privée, une fenêtre qui n'est pas connectée à vos comptes, sinon vous utiliserez le lien et il saura que vous êtes connecté à Figma. Nous serons donc InFigma qui n'est pas connectée vos comptes, sinon vous utiliserez le lien et il saura que vous êtes connecté à Figma. Nous serons donc InFigma Nous serons donc Vous devez utiliser un navigateur, soit vous déconnecter d' un Figma dans votre navigateur pour le tester, soit ouvrir une fenêtre de navigation privée Tu n'es pas obligée de faire ça. C'est plutôt OK, donc je suis Doug, le client client Ça me plaît. Si je dois faire autre chose, ils doivent se connecter. C'est gratuit Ils peuvent s'inscrire auprès de Google ou simplement s'inscrire avec leur adresse e-mail. Laisse-moi faire ça. Maintenant que je suis connecté à Doug, tu n'as pas à le faire Cela vous montre simplement ce que voient les autres clients. Je pense qu'il est utile de voir ce qu'ils peuvent faire. C'est un peu compliqué. Nous avons toutes ces choses en cours. Mais ce qui est cool maintenant, c' est qu'ils peuvent faire des commentaires. C'est le plus important. Ils peuvent faire des commentaires et Doug peut dire : «  Ar Dan, qu'est-ce qui se passe ? Pourquoi n'y a-t-il pas d'accident vasculaire cérébral ici ? Doug publie ça et ce qui est cool, c'est qu'il faut revenir à la baisse. Fermez ça. Ce que vous allez voir, c'est que, tout d'abord, il y a Doug, ce qui est vraiment étrange. Vous pouvez voir ce commentaire. Écoutez, pourquoi y a-t-il Astra ? J'ai écrit ça ? Je n'ai pas besoin de le lire. Et ce que je peux faire, c'est que nous pouvons simplement communiquer via ces simples commentaires. Je peux faire des mises à jour. Je peux faire des choses comme ça et dire : « Très bien, Doug, parfait, un smiley Ne le dites à personne. Tu peux dire, L, je l'ai fait. Cochez, donc c'est résolu et c'est fini. Autre point intéressant à propos Figma, c'est qu'il s'agit d'un véritable outil collaboratif, surtout lorsque vous travaillez avec d'autres designers Y voyez-vous des chiens ? Laisse-moi te montrer. Laissez-moi organiser les écrans. Voici Daniel. Voici Doug, mon client, et il est en train de consulter le document Ce qui est bizarre, c'est que tu peux voir Doug bouger. Tu peux le voir sur la droite ici ? C'est Doug qui se déplace. Je le vois bouger sur mon écran, c'est en direct. Même chose de mon côté. Il peut me voir me déplacer, ce qui risque de faire peur à Doug Quoi qu'il en soit, l'autre avantage de cet outil de collaboration en direct, c'est que je peux lire dans les pensées de Doug Je le vois piquer ce panneau ici, et je sais qu'il s' inquiète de la couleur verte Je peux dire que tu es de couleur verte. Eh bien, c'était quoi cet accident vasculaire cérébral ? Non, c'était ça. Je peux dire, passons au design, mettons à jour le trait que vous pouvez voir sur le côté droit, il est en train de se mettre à jour. J'utilise ce côté gauche lorsque je dessine, mais Doug peut me voir déplacer des objets et les ajuster en direct Regarde ça. Je vais le déplacer. C'est plus facile. Regardez, c'est un outil de collaboration en direct. cool, c'est que Doug n'avait pas besoin d'un compte payant infigma Il peut vérifier mon travail. Il peut se tenir au courant. Tu peux te reconnecter et voir jusqu'où j'en suis. Vous n'êtes pas obligé de renvoyer un nouveau lien et un nouvel e-mail. L'autre point, c'est de redevenir Dug. Je suis Doug. Je peux cliquer dessus et je peux le prévisualiser. Je ne pense pas que vous puissiez le prévisualiser sans être connecté. Mais il peut également parcourir et tester les animations. La dernière chose que je veux vous montrer, c'est que je suis toujours Doug, et Doug pourrait trouver cela assez confus Il y a plein de choses avec lesquelles ils ne peuvent pas jouer. Ils peuvent glisser des objets, mais ils ne peuvent pas les déplacer. Il y a des choses comme la largeur et la hauteur des pixels, toutes sortes de choses ici, vous pourriez vous dire : « Oh, ça va faire flipper Doug Doug n'est pas doué en informatique. Je dois le lui montrer, mais il faut que ce soit beaucoup plus simple. Ce que vous pouvez faire, c'est à l'intérieur d'une Figma. Je suis en train de partager ceci. Je peux dire « partage ». Vous pouvez utiliser cette option ici. C'est le lien Copy Prototype. Vous sautez donc tout cela et vous passez directement au prototype. Faisons-le apparaître, fenêtre de navigation privée, pour qu'il ne soit pas connecté en tant que moi OK, j'ai besoin d'être fouillé. Doug se connecte et il passe directement au prototype, et ils peuvent travailler avec Mais ils n'ont tout simplement pas accès à tous les extras. En plus, ils peuvent faire des choses. C'est un peu dur. Voyez-le ici. Voilà le commentaire. Je peux dire, pourquoi est-ce 99 ? Cela me revient sur mon site ainsi que sur Dan. Cela pourrait bien être une version plus facile pour eux. Jetez un coup d'œil au commentaire, Bec afigma, vous verrez, j'espère Bec afigma, vous verrez, j'espère . Ça y est, Doug. Enfin, vous pouvez répondre à Doug ici. Vous pouvez vous demander pourquoi ce chiffre est 99 ? Il s'agit simplement d'un espace réservé. Allez-y, et cela revient à Doug de ce côté. Écoutez, en réponse, il est là, juste un espace réservé. Cool. C'est bon. Il s'agit d'un partage avec les parties prenantes afin qu'elles puissent le consulter et le commenter depuis Figma C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. 29. Que sont les ébauches de projets d'équipe dans Figma ma ma: Un. Dans cette vidéo, nous allons partager nos documents afin qu'ils puissent être édités. Nous allons tomber sur ce que l' on appelle équipes, des projets, des fichiers et des pages C'est la façon dont Figma structure, c'est l'organisation des fichiers. J'ai trouvé cela assez confus quand j'ai commencé, alors je voudrais faire une vidéo à ce sujet ici pour que vous sachiez où tout se trouve et que signifient ces toms ? Allons-y. C'est bon. Si nous avons besoin de le partager avec quelqu'un d'autre qui doit modifier ce travail, ainsi que plein d'autres choses. De nombreuses fonctionnalités sont liées à cela. Allons partager. Je ne peux pas dire, Doug, que tu puisses le modifier. Vous êtes un collègue, vous devez y travailler. Vous êtes développeur, vous devez travailler dessus . Je souhaite me déplacer pour modifier. Il va dire : «   Hé, tu dois transférer ce truc vers l'un des projets de ton équipe ». Expliquons cela. Parce que si je vais partager à nouveau également, vous voyez qu'il est dit ici, pour inviter les gens à le modifier, déplacez ce brouillon dans vos projets. C'est quoi toutes ces choses ? Cela m'a embrouillé quand j'ai commencé, alors je vais vous l'expliquer. Allons à la maison. Nous sommes récents, ce qui est normal. Vous avez ce truc ici, une équipe. Au sein de cette équipe, il y a des brouillons et des projets. Hé, on vous donne donc une équipe gratuitement. Pensez que l'équipe est l'entreprise pour laquelle vous travaillez. Il se peut que vous apportiez votre ordinateur portable et que vous n'ayez pas besoin d'autres équipes. Il se peut que vous deviez simplement amener votre équipe chargée de l'ordinateur portable. Mais si vous êtes indépendant, vous pouvez avoir quatre clients, 20 clients, et ce ne sont que des équipes distinctes, des entreprises différentes pour lesquelles vous travaillez Du côté de cette équipe, nous avons des brouillons et des projets. Brouillons Chaque fois que vous créez quelque chose de nouveau, cela se retrouve dans le brouillon Ensuite, lorsque vous devez le rendre modifiable pour quelqu'un d'autre, partager pour qu'il puisse travailler dessus, vous devez le déplacer vers l'un de ces projets C'est ce que cela demandait tout à l'heure. J'ai dit : « Hé, vous devez vous assurer de passer des brouillons à l'un de vos projets pour l'une de vos équipes. Nous n'avons qu'une seule équipe. Vous ne pouvez avoir qu'un seul projet gratuit au sein de votre équipe. Ce projet peut être, dans ce cas, notre site eCom, mais il se peut que vous en ayez besoin d'un autre Je pense que cela a peut-être un rapport avec autre chose au sein de l'entreprise. C'est peut-être le flux d'inscription, peut-être les soldes d'été. Vous pouvez créer tous ces projets. Vous pouvez leur en donner un par défaut gratuitement, et s'il vous en faut plus, c'est ici que nous passons au de base au plan professionnel. Cela va changer, les prix seront différents. Ils nous embêtent tout le temps. Mais c'est là que vous pourriez décider qu'en fait, j'ai besoin d'un siège. Un siège complet coûte 16 euros par mois. Ce sera différent dans toutes sortes de pays. Vous voyez ici, la limite est que vous n'avez qu'un seul projet. C'est ce qui se passe ici, dans certains cas, sur notre site Web économique, mais vous pourriez avoir besoin d'un deuxième site, qui pourrait être celui de vos campagnes sur les réseaux sociaux Vous pouvez y avoir trois fichiers, et l'autre limite est que vous ne pouvez avoir que trois pages par fichier. Décomposons-le. Si vous l'avez déjà, vous dites : « Oui, ne le couvrez pas à nouveau. Passez à la vidéo suivante. Il n'y a rien. Je vais juste le reprendre juste pour m' assurer que j'avais besoin de cette vidéo début. Nous n'avons qu'une seule équipe. Nous avons un compte gratuit, nous n'avons donc qu'un seul projet. Dans le cadre de ce projet, je peux en avoir trois, les fichiers de conception que nous avons créés. J'ai fait celui-ci. Je peux en créer un autre pour le design et ce sera un cadre disons que nous concevons une publication sur Twitter sur les réseaux sociaux. C'est-à-dire deux fichiers. Dans mon projet, je peux en avoir trois. Le truc, c'est que vous pouvez avoir autant de brouillons que vous le souhaitez Vous pouvez simplement les laisser dans les brouillons. En tant que freelance, c'est peut-être tout ce dont vous avez besoin. Il vous suffit de les transférer dans les projets d'équipe dès la fin pour les exporter les envoyer au développeur. Vous pouvez aller assez loin avec le compte gratuit. La dernière chose était le nombre de pages autorisées. Regardez celui-ci ici, nous avons les pages 1, deux et trois jusqu'à présent. C'est le nombre de pages que vous pouvez avoir dans un fichier de conception. C'est dans le cadre d'un projet d'équipe. Voilà. Un projet, trois fichiers, et ils ne peuvent comporter que trois pages. C'est logique. Que faisons-nous ? Nous devons déménager, nous voulons lancer le partage pour celui-ci ici. N'oubliez pas qu'il disait : « Hé, vous devez le déplacer de vos brouillons vers vos projets Nous pouvons le faire d'ici. Il vous suffit de cliquer sur le bouton de déplacement, c'est fait. Il sait où il doit aller. Nous allons simplement le faire manuellement parce que je veux vous le montrer. J'en suis aux brouillons. Voici tous mes dossiers. Je n' en ai pas besoin pour mon projet, car c'était juste une étrange barre d' état que j'ai copiée et collée. Je n'ai pas besoin de celui-ci. Mais celui-ci, je le fais. Ce que je peux faire, c'est cliquer dessus et le faire glisser. Je peux vous dire de participer à mes projets. ne peux pas le faire parce que je ne le vois pas. Avant, c'était Abdu Maintenant, vous cliquez dessus avec le bouton droit de la souris et dites « déplacer le fichier ». Je veux le transférer à cette équipe, s'il te plaît. Il a disparu de vos brouillons. Si je participe à des projets, c'est là, mon équipe Project. Il y a mon petit dossier là-dedans. J'en ai sans titre dont je n'ai pas besoin Je vais passer à la poubelle. Je n'en ai que trois. Je ne veux pas en gaspiller. C'est juste une nouvelle maison pour elle. Mais si je reviens au même fichier que j'ai toujours ouvert, je peux aller sur Shear maintenant Cette petite bannière est sortie du haut et je peux dire que Doug peut maintenant la modifier Il peut déplacer des choses, changer les polices, faire tout ce que je peux faire. C'est donc l'une des choses que vous pourriez rencontrer. Je voudrais vous montrer très tôt, juste pour vous présenter les projets et les équipes et les domaines dans lesquels vous pourriez commencer à découvrir certaines des fonctionnalités payantes Vous pouvez voir maintenant que mon fichier se trouve dans mon projet qu'il est écrit : « Hé, tu n'as droit qu'à trois pages ». Si vous en voulez plus, vous devez effectuer une mise à niveau. Eh bien, passez à une mise à niveau plus tard dans le cours pour vous présenter certaines des fonctionnalités Premium Pro. Mais pour le moment, nous allons simplement ignorer cela. La mise en garde contre les mauvaises herbes est valable pour le moment. Eh bien, tant que Figma existe, vous pouvez avoir plus d'une équipe Renommons donc cette équipe parce que c'est un drôle de nom pour une équipe OK, je vais entrer ici. J'ai donc cliqué sur l'équipe. Va ici, je vais le renommer et le mien s' appellera Scott Wallets C'est le client pour lequel je travaille. Mais ce que je peux faire, c'est créer une nouvelle équipe. C'est peut-être la société d'ordinateurs portables Binger et je travaille pour eux. Je n'ai pas besoin de collaborateurs. Je vais choisir le plan de départ, et vous pouvez voir ici que j'ai deux équipes. Ce qui est bien, c'est que la deuxième équipe que j'ai créée obtient son propre projet et ses trois fichiers avec ses propres trois pages. Allez assez loin avec un compte gratuit. Très bien, je vais donc retourner voir Scott Wallets pour voir tous ces projets Voilà mon éco, fermez-le , bloquez tout, et c'est tout. Cela vous a-t-il été utile ? Je sais J'ai l'impression que j'ai peut-être rendu choses plus confuses que ce que c'est. Peut-être pas. J'espère que cela a été utile. C'est ça. Passons à la vidéo suivante. 30. Où trouver l'inspiration pour les projets UX: Un. Dans cette vidéo, nous allons passer de notre structure filaire, d' accord, où il ne s'agit que de carrés et texte brut à notre modèle haute fidélité Et avant de le faire, nous allons chercher idées sur la façon dont nous pourrions passer d'une sorte de wireframes vierges à la façon placer les polices, les couleurs, les styles et l'apparence des choses Et c'est en quelque sorte la partie amusante du processus où nous cherchons à nous inspirer des autres. Permettez-moi donc de vous montrer les endroits où je vais pour trouver l'inspiration avant commencer à créer des maquettes en haute résolution et Figma maquettes en haute résolution et Figma D'accord, il y a donc un tas d'endroits où vous pourriez avoir le vôtre. Ce sont les endroits que j'ai l'habitude de visiter en premier, comme Dribble, Behance ou n'importe lequel de ces sites de bibliothèque. Ce que vous devez faire, c'est que vous recherchez le terme « kit d'interface utilisateur Le kit d'interface utilisateur le réduit généralement à éléments plus mobiles pour les sites Web au lieu de se limiter à des éléments de conception génériques. UIKits et vous pouvez simplement les parcourir et vous vous dites , oh, j'aime bien ça, et vous en prenez une capture d'écran, et nous allons commencer à les assembler dans un moodboard Mais parcourez simplement pour trouver ce que vous aimez. Utilisez le terme kit d'interface utilisateur. Vous pouvez également taper dans UX, juste pour le réduire et commencer la capture d'écran Behance est un autre bon modèle. Il s'agit de se concentrer sur le Web, ce qui est bien pour nous, commencez à prendre des captures d'écran, des choses que vous aimez. Vous pouvez payer un kit sur l'un de ces sites. Nous ne sommes pas là pour voler, nous avons juste des idées de choses qui selon nous, fonctionneront en utilisant des éléments envahissants ou, disons , Adobe Stock en a de bons, puis nous passons à d'autres. Je les aime bien. Ce sont des récompenses. OK, c'est css design awards.com, et celui-ci s'appelle Awards with ThreeWST. Il est vraiment pratique car ce ne sont que superbes designs qui ont été soumis à des prix, donc c'est vraiment un bon point de départ pour donc c'est vraiment un bon point de départ pour Utilisons l'une ou l'autre de ces deux options. J'aime les récompenses parce que si je tape portefeuille, me limiterai à ce qui contient des portefeuilles, ce qui est vraiment cool Quel que soit le sujet sur lequel vous travaillez, saisissez-le et cela vous permettra de le réduire. J'espère que vous trouverez quelque chose que vous n'aimerez peut-être pas le mien. Il n'y a pas beaucoup de vrais portefeuilles. Il y a un vrai portefeuille. Tous ces éléments semblent être des portefeuilles cryptographiques numériques. OK. Quoi qu'il en soit, c'est juste pratique de le parcourir et d'y jeter un coup d'œil. Ce qui est vraiment bien avec ce site de récompense également, c'est que vous pouvez l'explorer. J'aime regarder les nominés, pas seulement les gagnants, et j'aime entrer ici et prononcer des tags Il y a plein de bons tags ici. Supposons que vous deviez effectuer un paiement, parce que vous ne l'avez jamais fait auparavant et que vous voulez voir à quoi ressemblent les autres. J'ai donc saisi le formulaire de paiement. n'y a pas de paiement. OK, ça ne marche pas car il n'y a pas de check-out. Je ne fais pas de recherche. Je cherche des tags. Vous pouvez faire défiler les tags. Je sais qu'il y a un pied de page là-dedans, donc Footer Design Awards. Qui a été nominé ? OK, vous pouvez donc passer en revue et dire : «   D'accord, regardons ce site Et il est dirigé vers le site lui-même. Nous allons fermer les fenêtres contextuelles. Jetons un coup d'œil à leur pied de page. Accédez même à leur pied de page. Bref, tu as compris l'idée. Vous pouvez passer en revue et choisir des choses spécifiques. Ils ont peut-être changé de site depuis. Non, c'est une promotion. J'ai cliqué sur une annonce. Bon travail, Dan. Regardons le Footer Award décerné à ces personnes Je suis en train de regarder les dessins. Passons au site Web actuel. Comment accèdes-tu au site web actuel, Dan ? C'est ça. Vous cliquez sur Visiter le site Web. Ils ont changé ce site assez souvent, donc au moment où vous arriverez ici, il se peut qu'il ait l'air différent. Je vais passer à celui-ci, puis jeter un coup d'œil à leur pied de page. Allons y jeter un œil. Oh, oui, c'est un très bon pied de page, je suppose. Tu comprends ce que je veux dire ? Parce que parfois vous redessinez un certain élément de votre processus de conception UX, peut-être pas un site Web entier, c'est donc pratique Fermons celui-ci. D'autres que j'aime bien sur une page love.com Alors ces derniers ne sont que des portefeuilles. Je viens de commencer à chercher des portefeuilles de créateurs en ligne via Google et viens de découvrir le portefeuille Ridge Je veux juste voir leur site Web et comment ils ont créé leurs portefeuilles Ils ont ce joli portefeuille mécanique et jetons-en un coup d'œil à d'autres. C'est juste un bon moyen, vous n'avez pas à vous contenter de regarder le design. Vous pouvez consulter les sites eux-mêmes. Essayez de trouver des marques que vous aimez, en particulier pour les portefeuilles, je sais ce qu'est un portefeuille. J'ai déjà acheté des portefeuilles Mais si je devais faire quelque chose comme le shampoing, pour lequel je ne suis pas sur le marché depuis longtemps, je devrais peut-être me rendre sur des sites pour voir à quoi ressemblent les sites de shampoing en ce moment, quels sont les bons sites , quelles marques se portent bien, simplement les parcourir et commencer à prendre des captures d'écran de ce qu'ils aiment. Tu es du genre, oh, j'aime bien la façon dont ils font les choses ici, tu commences à en ramasser de petits morceaux pour ton mood board. Laissez-vous inspirer. W J'ai dû faire une capture d'écran sur votre machine sur le Command Chef 4 de mon Mac et vous pouvez faire glisser une boîte autour de certains éléments. Vous pouvez dire que j'aime bien ce petit point, je vais emprunter ou du moins me faire une idée sur un PC, je suis presque sûr que c'est de la sérigraphie, mais vous devrez simplement vérifier ce que c'est sur un PC. Prenez des tonnes de captures d'écran. Faites-moi savoir également dans les commentaires si vous le souhaitez, nous n'avons pas mentionné ce site pour nous inspirer. Dites-moi dans les commentaires si vous en avez qui vous plaisent. J'adore cette partie du processus. Laissez-vous inspirer, trouvez des objets, jetez-les tous sur un quai, ce que nous allons faire dans la prochaine vidéo. Je t'y verrai. 31. Comment créer un moodboard dans Figma: C'est bon, tout le monde. Dans cette vidéo, nous allons voir comment mettre notre inspiration dans un moodboard. Nous en ferons une élégante , puis nous ferons celle qui se trouve un peu partout et que j'utilise habituellement. Mais nous avons besoin des deux. L' un est envoyé chez un client, l'autre pour notre propre référence. Créons maintenant un moodboard dans Figma. Faisons la première méthode désordonnée que vous utiliserez vous-même. En gros, vous pourriez en faire votre propre page et manquer de pages. Je peux revenir aux brouillons et avoir plus d'une page Mais je suis coincé avec trois pages, donc je pourrais en créer une qui soit une page de moodboard qui conviendrait parfaitement Si vous êtes sur le compte professionnel, c'est peut-être une bonne chose. Cependant, lorsque je fais du design, j'aime souvent mon humeur ou mes captures d'écran juste au-dessus de ce sur quoi je travaille. Je n'ai pas besoin de passer d'un onglet à l'autre. Tout ce que je fais, c'est d' apporter une image. Au cas où j'aurais pris beaucoup de captures d'écran, je peux suivre cette voie. Il y a une option en bas, sous le rectangle, dit « apporter une image ». OK ? Et je peux cliquer dessus. Je peux aller le trouver dans mes fichiers d'exercices. Il y en a un qui s'appelle Mo Board. J'ai mis tous les miens ici. N'utilisez pas les miens. Je les ai juste mis ici pour emporter. Voici toutes mes photos. Je peux aller jusqu'au bout et dire, en fait, que je veux tout cela. Je clique sur la première, je maintiens la touche Maj enfoncée, je prends la dernière, je clique sur Ouvrir . J'ai 21 images et je clique une fois pour une, et je peux simplement commencer à les insérer. OK, c'est donc mon inspiration. C'est mon mood board. Souvent, cela me suffit lorsque je travaille. Continuez à cliquer. OK ? J'en ai juste besoin ci-dessus pendant que je conçois et que je choisis des polices, et je me dis : « Oh, c'est une couleur cool, et je pourrais la modifier pour voir si je peux la faire correspondre. Cela suffit en quelque sorte. Vous pouvez évidemment les déplacer par la suite. Vous pouvez faire glisser le bord avec une image et simplement la redimensionner. Vous pouvez utiliser l'outil officiel de la balance, mais l'image en elle-même, vous pouvez simplement prendre le coin et vous pouvez partir, c'est cool, mais le truc que j'aime vraiment, c'est ce truc ici pour une raison ou une autre, je le fais beau et grand. Nous ferons du recadrage et d'autres choses plus tard, mais c'est souvent suffisant pour que je commence à travailler Ce que je pourrais faire pour ranger le tableau, c'est que vous pouvez le voir ici avant que nous n'ayons les fonctionnalités de la maison, paiement, très serein dans ses propres petits cadres J'ai celui-ci ici. À quoi servent toutes ces choses ? Vous pouvez voir toutes ces mises en page délirantes qui traînent, toutes ces captures d'écran qui traînent sur le dessus, ruinant mon menu préféré sur le côté ici Ce que je vais faire, c'est que vous pourrez ajouter un cadre par la suite. Regarde ça. Faisons en sorte que celui-ci soit un peu plus petit. Hmm, veuillez patienter. Ce que vous pouvez faire, c'est dessiner un cadre autour du tout, afin de pouvoir saisir votre outil de cadre. Si vous dessinez le cadre tout autour de l'extérieur de tous ces objets, ils tomberont simplement à l'intérieur Tu vois que je l'ai fermé maintenant ? Vous pouvez voir le premier cadre que je pourrais appeler ce moodboard. Juste pour qu'il soit autonome. Je pourrai le déplacer quand j'en aurai fini. Tu comprends ce que je veux dire, non ? Faisons un mood board plus officiel car disons que nous devons en revenir à nos parties prenantes. OK ? J'utilise ce mot, je le déteste, mais il est courant. Parties prenantes Toute personne impliquée dans ce projet peut concerner, je ne sais pas, certains investisseurs ou toute personne qui touche à un projet en tant que partie prenante, il serait courant, surtout si vous travaillez sur une nouvelle marque y revenir avec un moodboard avant de commencer à moodboard avant de commencer Travaillez sur l'iframe. Ensuite, le tableau de déménagement, une fois qu'ils sont approuvés et que vous avez défini l' orientation en termes de thème et de style, vous commencez à créer des maquettes haute fidélité Une bonne façon de le faire est parcourir et de les aligner , de leur donner une belle apparence, d'ajouter des étiquettes et de les embellir un peu. Je trouve qu'il est plus facile de commencer avec le modèle de quelqu'un d'autre. Nous allons donc passer à l'écran d'accueil. Nous allons passer aux modèles et aux outils, que je suis sûr qu'ils ont déjà renommés. Trouvez une communauté, et je vais taper moodboard et voir ce que les autres ont créé Nous allons en trouver un, choisissez-en un. Vous devrez peut-être en parcourir quelques-unes pour trouver ce que vous voulez. Ce que nous cherchons, cependant, c'est de voir cette petite icône en forme de crayon et celle-ci est différente. Fig Jam est un logiciel différent créé par Figma. C'est comme Merro ou PowerPoint. C'est un outil de tableau blanc. C'est plutôt cool. Mais nous voulons des fichiers Figma. Je vais cliquer sur celui-ci. Maintenant, n'oubliez pas si je dis open infig, ce modèle ou ce fichier communautaire fait désormais partie de mes brouillons pour Scott C'est le mien maintenant. Je pourrais y récupérer ce dont j'ai besoin et le supprimer ou simplement le conserver. Ce que je veux faire, c'est trouver plein de trucs sur celui-ci. Vérifiez, souvenez-vous que lorsque vous utilisez le travail d'autres personnes, regardez les différentes pages. Les grilles. C'est ce que je veux. Oui, regardons les grilles ici. Lequel est-ce que je veux ? Peslik celui-ci. La seule chose, c'est qu'avant de le mentionner, si je le copie et que je le ramène dans le document sur lequel ils travaillent, je ne peux pas y mettre une autre page car je suis limité par le compte gratuit pour le moment. Je vais juste mettre le mien ici et il s' agit d'une instance d'un composant, dont vous ne savez pas de quoi il s'agit. S'il y a un petit diamant pour le moment, jusqu'à ce que nous apprenions à travailler avec eux, il suffit de cliquer dessus avec le bouton droit de la souris et de dire «   L est une instance attachée ». Maintenant, ce n'est qu'une partie de ce document. voyez, c'est un cadre normal avec des cadres à l'intérieur, et ce que je veux faire, c'est apporter des images. Un petit raccourci pour importer des images est souvent ce que j'aime faire, c'est ouvrir dans mon Finder, donc je ne suis plus Figma. Il s'agit d'un Mac ou d'un PC. Ouvrez la fenêtre du Finder, recherchez le fichier que vous souhaitez, faites-le simplement glisser et je l' ajouterai simplement au document. Je trouve que c'est souvent facile. Je le fais quand même, il suffit de les faire entrer. Ensuite, vous pouvez aller à l'intérieur de ce cadre ici. S'il n'entre pas dans le cadre, vous le faites glisser. Tu vois, c'est devenu bleu. Maintenant, il sait qu'il doit être à l'intérieur. Maintenant, il a de nouveau sauté. S'il n'entre pas dans la bonne grille, alors celui-ci, cadre zéro. Je veux que la capture d'écran y soit insérée. Maintenant, je vais le déplacer devant lui, à l'intérieur. Je n'essaie pas de tout montrer. Je donne juste une référence visuelle. C'est l'ambiance, l' ambiance du truc. Une autre façon de le faire est de le sélectionner. En fait, vous n' avez pas besoin de le sélectionner, mais vous pouvez aller ici, aller dans Image et vidéo. Tu peux trouver celui que tu veux. Ray l'a eue. Faites celui-ci, cliquez sur Ouvrir, puis je peux simplement cliquer là où je veux qu'il aille. Ce sont peut-être les différentes manières d'introduire des images. Le but ici est d'essayer de les aligner pour qu'ils soient un peu plus beaux, afin de pouvoir les envoyer à un client Ce n'est pas très convivial pour les clients. Est-ce que cela peut être. Vous pouvez faire en sorte que ces images plus grandes représentent des choses qui vous influencent le plus. C'est comme ça, mais un peu comme ça. Tu comprends ce que je veux dire ? Je le fais très tôt. Partagez le wireframe, faites-le signer, donnez-leur un moodboard, c'est dans cette direction que je me dirige Ils n'ont peut-être pas une idée très claire, peut-être une ou deux, alors vous devrez peut-être créer plusieurs moodboards différents pour y aller. Qu'est-ce que tu en penses ? Cette direction, direction avant que je ne passe beaucoup de temps à concevoir quelque chose. Jolie version. Version désordonnée que j'utilise lorsque je travaille seul. Encore une fois, ce n'est pas pour copier, c'est pour que vous puissiez le voir. Vous dites : « Oh, je n'ai jamais pensé à faire l'arrière-plan, cette couleur blanc cassé. C'est une couleur plutôt grise. Et cette combinaison bleu sarcelle est vraiment cool. J'aime bien ça. Je vais commencer à l'utiliser pour certains de mes boutons et autres. Cela ne fait que stimuler la créativité et constitue une partie très amusante du processus de conception, je pense C'est ça. C'est comment créer une planche de déménagement. Version douteuse, version chic. C'est bon. Passons à la vidéo suivante. 32. Projet de cours 06 - Moodboard: OK, il est temps de créer votre propre moodboard. Ce projet de classe consiste à créer un moodboard pour l' entreprise que vous avez obtenu grâce au générateur de projets aléatoires. Les miens sont les portefeuilles de Scott. Et je veux que vous fassiez des recherches sur Internet inspiriez et que vous preniez de nombreuses captures d'écran. OK, donc tous ceux de la dernière vidéo, regardez ces sites, mais regardez aussi les vôtres. Vous pouvez consulter Pinters et Instagram. Je ne les ai pas montrées. Il y en a un autre qui m'est venu à l'esprit, c'est Mobinn. OK, mobin.com. Celui-ci est vraiment bon pour la conception d' applications en particulier, d'accord ? Il y a juste plein de trucs sympas ici. Et encore une fois, il existe une option gratuite et une option payante. Vous devez vous connecter pour l'utiliser. Pour le moment, cela peut changer, mais vous pouvez voir que vous faites une recherche par éléments de l'interface utilisateur, ce qui est plutôt sympa. OK, ça en est une autre, puis il suffit de les déposer tous dans votre fichier de design Figma Vous pouvez faire l'une des deux choses suivantes. Tu peux faire les deux si tu veux. Vous pouvez faire la version la plus moche où c'est juste dans un cadre, simplement jeté et aligné à moitié. Ou vous pouvez faire le bon choix en trouvant un modèle. Entraînez-vous à utiliser les modèles d'autres personnes, disposez-les bien. Vous pouvez faire l'une ou les deux et simplement en prendre une capture d'écran et la télécharger. Où est notre fichier de projet de classe ? Vous pouvez faire ceci ou cela, ou les deux. Et une chose que vous pourriez faire, c'est que, tout d' abord, j'ai colorié mon tableau de déménagement, le cadre, vous pouvez vraiment colorier les cadres. Vous pouvez donc en ajouter à la place d'un blanc, assombrir le mien pour le séparer. L'autre chose que vous pouvez faire, c'est que si vous voulez une autre page, vous savez comment nous en sommes obligés à n'avoir que trois pages maintenant que c'est en équipe. Si vous voulez revenir au bon vieux temps où vous aviez les brouillons et où vous aviez autant de pages que vous le souhaitez, parce que vous n'avez pas besoin de la capacité d' édition pour le moment Ce que tu peux faire, c'est rentrer chez toi, et je pense que j'ai déjà fait le mien. Je l'ai fait. Les miens étaient des brouillons. C'est celui sur lequel je travaille. Je peux transférer le fichier vers les projets de mon équipe, Scott Wallets Et là, nous avons les restrictions de trois pages seulement. Si vous voulez revenir aux brouillons, vous pouvez accéder à tous vos projets et double-cliquer, pas sur le fichier lui-même, mais juste dans cette zone blanche à l' extérieur pour y accéder. Vous pouvez cliquer avec le bouton droit sur ce type et lui dire : «   Hé, je veux vous déplacer vers un endroit où les brouillons Merci beaucoup. Les fichiers sont toujours ouverts. Il ne s' ouvre pas et ne se ferme pas vraiment. Cela vient d'être déplacé, et vous constaterez qu'il se trouve dans mes brouillons, dans les zones qui s'y trouvent, et je reviens sur mes pages pour que vous puissiez créer une version moodboard ici Nouvelle page, moodboard, et créez-la ici pour la séparer Cela dépend de vous et de votre trouble obsessionnel-compulsif. Je vais supprimer cette page. Je vais juste garder le mien sur la même longueur d'onde simplement parce que j'aime le voir lorsque je crée. C'est à vous de décider. C'est ça. C'est une chose assez simple à faire. Mettez des captures d'écran sur une page et transformez-la d'une manière ou d'une autre en une vidéo de quelques minutes. Bon travail, Dan. Très bien, vas-y et trouve l'inspiration. Et assurez-vous de le télécharger. Téléchargez-le dans les projets de classe, dans la section des devoirs. Je serais curieux de voir ce que tu gagnes. Surtout lorsque nous voyons vos derniers articles, c'est agréable de revenir en arrière et de voir où l'inspiration a pu commencer. C'est bon. Maintenant c'est la fin. Au revoir. 33. Comment travailler avec des colonnes et des quadrillages dans Figma ma: Bonjour. Bienvenue dans la vidéo Epic consacrée à ces 12 petites chroniques ici. D'une manière ou d'une autre, c'est une longue vidéo car il est facile d'appliquer les colonnes. les raisons pour lesquelles nous appliquons les colonnes J'espère que les raisons pour lesquelles nous appliquons les colonnes vous seront utiles, surtout si vous n'avez pas beaucoup travaillé dans le domaine de la conception de sites Web ou d'applications. Il y a aussi quelques astuces très pratiques que nous abordons tout au long, donc je ne sais pas, ne les sautez pas. Il y a quelques petits trucs et astuces utiles en plus de simplement créer des colonnes ici. C'est une bonne idée. Allons-y. Commençons. Même l'intro est longue C'est bon, saute dedans. C'est vrai. Tout d'abord, nous avons besoin de quelques pages supplémentaires. Si tu es coincé dans le genre, oh, je ne peux en avoir que trois. Nous devons remettre cela dans les brouillons. OK, donc pour ce faire, retournez à la maison, et trouvez dans vos brouillons le gars avec qui vous travaillez Non, c'est dans les projets. OK ? Et cette personne ici présente, je vais m'occuper des projets de mon équipe. Double-cliquez donc sur la partie extérieure, pas sur le fichier lui-même. D'accord, je peux cliquer dessus avec le bouton droit de la souris et je peux dire MoveTo move file OK, deux brouillons et cliquez sur Déplacer. Vous pouvez également cliquer sur Maintenir et le faire glisser dans des brouillons. OK ? Ensuite, le fichier qu'il est toujours ouvert s'ouvre en quelque sorte et vous pouvez avoir plus de pages. Passons en revue et renommons. Je vais zoomer Je viens de renommer le mobile ofi pour mon mobile et mon ordinateur de bureau. Je vais ajouter deux nouvelles pages et les appeler. Hi-Fi mobile et de bureau. Ce sont mes versions du cadre en Y. Vous pouvez les appeler cadre en Y, c'est bon. J'aime les appeler Lo Fi. Nous allons aller sur le bureau et je vais regarder les colonnes. Appuyons sur la touche F de mon clavier. Cliquons sur Note. Allons ici et disons, je veux un ordinateur de bureau. Je veux la taille de bureau vraiment courante, qui est de 14 40 x 1024. Tu dois le dire comme ça. Si vous vous rendez à une réunion et que vous dites que vous avez un site Web 1 440 pixels sur 1 024 pixels, ils sauront que vous êtes nouveau Pour une raison ou une autre, vous devez dire 14 40 par 1024. Je ne sais pas pourquoi. Mais allez sur notre bureau. Ajoutons une colonne. Je vais les corriger un peu. Ils sont ici appelés guide de mise en page. Appuyons sur le signe plus dans le guide de mise en page et vous obtiendrez une grille. Nous voulons le passer aux colonnes et le nombre de colonnes par défaut est de cinq pour une raison quelconque, même si le nombre de colonnes le plus courant est de 12. Allons y jeter un petit coup d'œil. Eh bien, tout d'abord, quels sont-ils ? Ils sont juste là. Si je prends le Fk pour le cadre, cela me permet de faire quelque chose comme ça. En saisissant mon système de navigation, je vais lui donner une couleur. Allez-y de la couleur alors. OK. Et je suis en train de le dupliquer. C'est ma boîte à héros, c'est le genre de message marketing où l'on dit souvent : « Hey, viens nous rejoindre ». Une image inspirante est ici. Ensuite, nous voulons que ces cartes soient placées en bas. Je vais le dupliquer à nouveau. Maintenant, ces cartes sont souvent dotées de fonctionnalités, comme « Hey, rejoignez-nous et obtenez de meilleurs avantages, gagnez plus d'argent ». Économisez du poids maintenant, les caractéristiques du produit se trouvent évidemment souvent dans ces trois ou quatre petites boîtes. On les appelle des cartes, parfois cartes de fonctionnalités ou des cartes d'interface utilisateur, et c'est une structure vraiment basique pour un site Web, c'est pourquoi cette grille est très pratique. Cela vous permet de vous y connecter instantanément pour que vous puissiez simplement y aller, et cela nous donne également un peu de flexibilité si vous en vouliez trois, mais en fait, ce que vous vouliez vraiment, je vais les supprimer, c'est que vous en vouliez quatre. 12 est facilement divisible. Par un, deux, trois, quatre, six. Tu ne peux pas en faire cinq. N'en fais juste pas cinq. Arrête de poser des questions. Cela dépend donc du nombre de fonctionnalités dont vous disposez. L'autre raison pour laquelle nous le faisons, c'est parce que c'est très courant. Et c'est important parce qu'il n'y a pas de véritable règle. Vous pourriez avoir 13 colonnes, mais votre développeur vous trouvera et vous blessera. Parce que la personne qui crée le site Web, que vous le codez ou que utilisez des sites Wordpress, Webflow ou Figma, quel qu'il soit, le code de base sous-jacent pour vous aider a souvent une plage de colonnes par défaut de 12 Cela peut être annulé, mais c'est juste douloureux sans aucune raison valable Bien. La raison pour laquelle c'est une bonne chose, c'est que si vous êtes concepteur de sites Web, vous aurez une très bonne compréhension des points d'arrêt et de la réactivité Pour ceux qui ne le font pas, je voudrais vous faire une petite démonstration rapide pour expliquer pourquoi il est important de se concentrer sur ce point. J'ai donc ce site Web ici, HubSpot, pour la seule raison qu'il est vraiment bon et réactif Donc, lorsque nous concevons, nous avons le site ici. Jetons un coup d'œil à leur boîte de fonctionnalités. Ils en ont trois. Cela arrive quand il s'agit de : je suis un ordinateur de bureau, je suis un ordinateur de bureau, je suis une tablette. Je suis une tablette là-bas. Ce qu'ils font, c'est deux choses. Ils remplacent le menu par un menu de hamburgers dans le restaurant chic de l'établissement. Ils ont donc décidé de le faire. Mais ils ont aussi décidé de les casser au lieu de continuer à les écraser parce qu'ils commencent à devenir assez petits, ils disent : « D'accord, réservez, ils y vont, ajouter votre propre effet sonore, c'est passer à la grille Donc, ce qu'ils ont décidé, c'est : OK, j'ai la taille d'une tablette Je vais le dupliquer, et je vais le concevoir pour une tablette Je vais donc passer au cadre ici et je peux le remplacer par un iPad Pro. Supprimons quelques éléments et mettons de l'ordre dans tout cela. Tout d'abord, sur iPad Pro, nous utilisons le même système de navigation et la même boîte à héros qui existent toujours. Mais ils vont passer de trois deux, c'est ce qu'ils font. C'est le design qui aurait permis au développeur de dire : «   Hé, voici ma vue de bureau ». Voici la vue de ma tablette pour qu'ils sachent quoi faire. Est-ce qu'ils n'arrêtent pas de le presser ? Si tu ne le leur dis pas, ils vont juste continuer à le presser. OK ? D'accord, les bons développeurs sauront que quelque chose doit changer, et vous pouvez leur laisser le soin de le faire, ou vous pouvez le leur dire et leur dire : Écoutez, en fin de compte, je vais le faire. Parfois, les gens font comme ça. Je l'ai déjà fait et je me dis, c'est vrai, que ce dernier n'est pas si important en fait et cela m' embête vraiment qu' il y ait une telle lacune ici. Cela ne dérange clairement pas Hubspot, mais il y a une grosse lacune ici Je pense que tu en as probablement besoin. Que faisons-nous ? Vous pourriez donc le désactiver comme je viens de le faire, et qu'est-ce que je viens de faire ? Je viens d'éteindre le globe oculaire sur la couleur, toujours là, difficile à sélectionner OK, vous pouvez donc le désactiver ou ajouter un nouveau. Un quatrième apparaît. OK ? Peut-être pas aussi important, donc ce n'est pas sur le bureau, mais il apparaît ici. Nous en avons quatre, donc ça marcherait bien. Tu vois, j'en aime quatre. Quatre, c'est bien. OK ? Mais cela signifie qu'il s'effondre bien ici pour une tablette, mais parfois trois, c'est plus courant, et vous devez trouver quelque chose à faire Et ce qu'ils font avec leur mobile, regardez ceci. Prêt pour le Alors maintenant, c'est un site Web mobile et ils ont dit, vrai, ils prennent tellement de place sur mobile. Regardez qu'ils passent de cette taille à une grande taille sur mobile. C'est comme, c'est vrai, du design mobile, faites glisser ça. Je vais supprimer et vous. Je vais le faire. Je suis juste en train de le taper. Vous pouvez voir la saisie. Tu vas être notre iPhone 16. Et ce que nous avons décidé, c'est ceci et cela va juste s'effondrer. Ensuite, je vais juste les avoir sur toute la largeur, et je vais en avoir une, je vais m' assurer qu'ils sont sur le châssis du mobile. Je ne peux pas les voir, donc je vais cliquer sur mobile, disons sur le contenu du clip, r. Vous montrer comment les faire défiler plus tard, mais en gros, il va falloir les faire défiler sur mais en gros, il va falloir les mobile pour les adapter. Voilà. C'est la réactivité mobile et c'est pourquoi nous prenons la peine de créer cette grille ici Cela nous donne juste quelques points à aborder, car le développeur dira, cette boîte ici, cette boîte ici. Lorsqu'elle fait autant de pixels de large, 14 à 40, elle a un bout de code à attacher à cette petite carte, disons, B de trois colonnes de diamètre. Mais si la largeur du site est de 800 pixels, B, quelle est cette largeur de 16 pixels ? C'est donc très simple. Vous pouvez simplement donner un peu de raison pour dire que si c'est cette taille, qu' il y a autant de colonnes, et quand il est allumé, vous savez, 600 pixels de large, comme sur un appareil mobile, il doit faire 12 colonnes de large. Je ne sais pas, Malusa USA. Jetons un coup d' œil à la version mobile. Le mobile est un peu différent. Je vais donc aller ici, téléphoner, aller Dean, vous pouvez tous les développer sur leur propre page. Je vais juste les séparer pour ce cours. souvent ce que je fais. Je conçois ce qui est le plus important pour le site Web. Avec un ordinateur portable, nous sommes un site Web axé sur les ordinateurs de bureau, nous concevons d'abord des produits pour ordinateur de bureau, puis nous déterminons comment cela fonctionne sur mobile. Cependant, beaucoup de sites Web seront d'abord mobiles, ce qui signifie que leurs éléments de conception d'interface utilisateur seront d' abord conçus pour le mobile , puis en élaboreront une version de bureau , car il s'agit d'un site Web principalement mobile J'ai un iPhone 16. Je vais passer à la grille et Dan a dit que nous devrions utiliser des colonnes de 12. Ce n'est pas très utile. Ainsi, lorsque vous travaillez avec un téléphone portable, la technologie sous-jacente sera le 12, mais il est tout simplement plus facile de concevoir avec six. Six est divisible par 12, donc, tu sais, c'est bon. C'est juste beaucoup plus facile de le faire à six plutôt qu'à 12. Je vais donc récupérer mon cadre à partir d'ici. OK ? En fait, nous n'avons pas besoin de le faire. Tu as compris l'idée. Concevez simplement avec six pour mobile et 12 pour ordinateur de bureau. Et probablement encore 12 pour tablette. Si vous concevez pour une tablette, c'est à vous de décider. Cela dépend du poste. Est-ce un gros travail où vous disposez également de beaucoup de temps et de ressources pour développer une version pour tablette ? C'est peut-être une utilisation importante de votre site Web. Alors passez certainement du temps développer ce que vous appelez la version tablette. Parfois, cependant, les concepteurs oublient la tablette et se contentent de l'ordinateur de bureau et du mobile et laissent le développeur travailler sur tablette. Ce n'est pas bien, mais souvent vous trouverez surtout des modèles et d'autres choses, ils ont juste un mobile et un ordinateur de bureau. Pourquoi puis-je voir ces noms ici ? C'est comme un quiz populaire. Pourquoi puis-je voir le cadre 3, alors que tout est mélangé C'est parce qu'ils ne sont pas réellement sur ou dans le cadre de mon mobile. Les noms disparaissent une fois qu'ils sont à l'intérieur. autre chose que je veux vous montrer, c'est que je vais aller à F, je vais aller à U. Si vous concevez un site Web mobile, vous utilisez des colonnes Si vous concevez une application pour IOS, Apple ou Android. Il est très courant de ne pas utiliser de colonnes car ce n'est pas très flexible. Il n'y a pas tout ce genre de sauts. Une application n'apparaît que sur un téléphone et il est très courant d'utiliser cette grille qui est apparue en premier. La taille de la grille est très courante pour utiliser 12. D'accord, il s'agit donc d'une taille ou d'une méthode de travail très courante lorsque vous concevez une application, car vous pouvez être un peu plus précis sur une application. Tu connais la hauteur et la largeur. Avez-vous remarqué que sur une application, vous faites moins défiler les pages. Tout est en quelque sorte organisé dans une sorte d'utilisation forcée du téléphone. Tout est en quelque sorte organisé et vraiment délibéré sur un téléphone. Il serait donc courant d'utiliser une grille à huit points pour la conception d'une application. C'est ce que les développeurs iOS utiliseront. Ils utiliseront une grille à huit points. Encore une fois, si vous finissez par ne pas l' utiliser pour espacer les choses, cela leur posera problème. Alors, tenez-vous-en à une grille à huit points. J'ai deux autres choses. Passons à Disk top. Cliquons sur Disktop en bas. Cliquons sur cette petite icône pour ouvrir les paramètres. OK ? Nous en avons donc 12. Regardons les autres. Regardons Magin. Magin, c'est donc les bords. OK ? Je pourrais mettre une marge de huit en laissant juste un petit espace sur les bords. Faisons quelque chose de grand. Faisons 80. OK ? Ce ne sont que les bords ici. Lorsque vous développez les contours d'un site Web ou que vous les concevez, le nombre exact n'est pas très important , car il est très flexible. Regarde ça. Si nous allons sur ce site Hubspot, vous remarquerez cette vue Disktop Vous voyez que le site réel n' apparaît que dans ce bit central. Tout cela s' étend jusqu'au bord. Souvent, les gens ne veulent pas. Certains sites Web le font. Ils développent en fait pour de très grands écrans, comme les grands écrans enveloppants ou les grands IMAX, et ils auront un autre Mais souvent, ils se contentent de dire : « D'accord, nous développons pour cette partie centrale, et cette partie ici va juste être maladroite en l'étendant et en ajoutant cette extension d'ombre ajoutant cette Pareil pour cette couleur ici. Vous voyez, il n'y a rien ici, mais on a l'impression qu'il prend le contrôle de l'ensemble du site. C'est aussi une chose très courante à faire. Pour avoir une marge, je vais utiliser 100. Cela signifie simplement mon site parce qu'il fait 14 à 40. Je les ai emménagés par 100 de chaque côté. fait, je suis en train de concevoir un site au milieu qui fait 12 40. Descendez, 12 40 là-dedans. Je vais le concevoir pour ma boîte Herro. Je vais probablement faire en que le NAV aille jusqu' au bord. Mais ma boîte à héros, mes problèmes de marketing vont arriver Je vais les supprimer et je vais dire que vous y êtes. Et combien en faisons-nous ? Je ne m'en souviens pas dans notre cadre en Y. Que faisons-nous ? Nous avons trois boîtes de fonctionnalités. Je vais donc aller ici et dire « Commande D » ou « Contrôle D » pour le dupliquer à nouveau. Ce seront mes bases. L'autre chose que je dois faire avant de commencer concevoir les boîtes, c'est de cliquer sur le cadre parent. Regardons la dernière chose qui s'y trouve, c'est le caniveau. gouttière est l'espace entre les colonnes, et son utilisation est très courante Huit est un chiffre très important dans la conception de sites Web et d'applications. Une grande partie de l'espacement et de la taille de police est réalisée avec huit. Huit en soi, c'est donc probablement trop petit. Pis. D'accord, mais faisons-en 16. Ça se passe bien. Vous verrez probablement ces chiffres lorsque vous travaillez dans le domaine du web et de la conception d'interface utilisateur, vous en verrez 16. Vous verrez quel est le suivant, 24 et 32, ou simplement des multiples de huit. Je vais utiliser le 32 comme gouttière. C'est une autre taille très courante pour les gouttières. Il est suffisamment grand pour nous laisser un peu d' espace entre ces boîtes sans être trop grand. Et encore une fois, si j'utilise ce que c'était, 32, si je le fais glisser vers le bas, pouvez-vous voir l'espacement entre ces gars ? Vous voyez que ça saute en quelque sorte quand on le déplace vers haut pour le cogner contre le haut, et je voudrais le déplacer un peu vers le bas Qu'est-ce qu'on a ? Poste. Le y, qui représente le haut et le bas. Je vais dire plus 32. Je sais que c'est exactement la même chose qu'à partir de là. Vous remarquerez que j'ai fait des maths sur le terrain. C'est ce que je fais souvent. Je trouve les chiffres difficiles. Ce que je finis par faire, c'est, disons, qu'est-ce qu'il y a d' autre bon ? Oh, quand je faisais la chronique, alors regardons ça. Je le fais pas mal. Je sais que c'est un multiple de huit, mais je m'y perds parfois Est-ce 32 ou 34 ? C'est 36. Je fais donc des choses comme ça huit fois quatre. Donc quatre huitième. Il suffit d'utiliser l'astérisque quatre fois et d'appuyer sur Entrée, et c'est 32 Ou si vous voulez savoir quelle est la prochaine étape, vous pouvez faire moins huit et appuyer sur Entrée, et cela vous donne 24. J'aime bien le faire pour beaucoup de ces domaines ici. Il suffit de faire de même pour tout ce groupe. Autant tout aligner, j'ai compris, je vais le déplacer. X et Y sont mélangés. Je vais juste dire plus huit. Tu te souviens de ce que signifie « mixte » ? Tu t'en souviens ? C'est exact. Ça veut juste dire qu'il ne le sait pas vraiment. J'en ai fait plus de huit. Annuler. C'est parce que nous avons sélectionné beaucoup de choses. C'est comme, Oh, je ne connais pas vraiment le y. Je connais le Y de ceci et de cela, mais ensemble, c'est un peu bizarre. Je vais donc dire plus 32, juste pour le déplacer vers le bas. Très bien, nous avons donc des grilles un peu cohérentes Maintenant, la dernière chose est qu'ils ne s' impriment ni ne s'affichent. Regarde ça. Si je passe à l'aperçu, vous le remarquerez. Ils n'apparaissent pas vraiment. Les cases le font, mais pas la grille elle-même. Vous pouvez les activer et les désactiver en allant ici et en activant et désactivant le I. C'est maintenant à Shift G d' activer et de désactiver en tant que raccourci. Il devrait s'agir de Control G sur un PC. Oh, je ne suis pas sûr. Ils fonctionnent tous les deux sur Shift G sur Mac et Control G sur Mac. L'un d'entre eux fonctionne pour PC. Tapez-les, faites-moi savoir quels commentaires il s'agit. Je suis presque sûr que c'est l'un d'entre eux. Ils sont vraiment bons pour la mise en page, mais ensuite ils sont moches. Très souvent, je les active et les désactive. Mais vous pouvez simplement utiliser le globe oculaire, l'allumer et l'éteindre. Oh. Tout ce que je sais, c'est que celui-ci devient vraiment long. Je voudrais également vous présenter quelque chose maintenant. Donc, juste un petit détail intéressant, c' est bizarre. Nous l' utiliserons dans le cours. Je veux le présenter maintenant. Passons à l'ordinateur de bureau. Passons à celui-ci. Ce que tu peux faire, c'est que j' ai cette grille ici. Dois-je le saisir à nouveau ? Pas si vous l'avez dupliquée, évidemment, mais si vous avez une nouvelle page et que vous vous demandez, pourquoi cela n' apparaît-il pas sur celle-ci Ce que tu peux faire, c'est le dire. En fait, ce n'est pas la bonne taille Dist. D'accord, est-ce que je peux le copier-coller ? Regarde ça. C'est un truc un peu bizarre dans Figma, mais c'est super utile Si je clique sur le bureau de celui-ci ici, je peux accéder à celui-ci. J'ai ceci. Je pourrai en faire un style plus tard. Mais ce que tu peux faire, c'est regarder ça. Je peux cliquer sur Row. C'est le no man's land par ici. Regardez, je ne peux pas le faire pour tout. Que puis-je faire pour le remplissage ? Ouaip. Est-ce que c'est dans cette zone du no man's land que je peux copier certaines choses. Regarde ça. Je l'ai sélectionné, je te veux. Je passe simplement à Command C sur un Mac, Control C sur un PC. Cliquez dessus pour obtenir le cadre et collez-le simplement et il l'emportera. C'est intéressant pour beaucoup de choses. Je vais le présenter maintenant. Nous le ferons quelques autres fois dans le cours. Parce que pour le moment, il est probablement plus facile de le dupliquer. Ensuite, vous avez les colonnes qui arrivent. Holy smoke Dan, d'une manière ou d'une autre, tu as réussi à dessiner 12 lignes pour former une saga épique. J'espère que tu apprendras quelque chose. Si vous êtes déjà développeur, cela vous intéressera en grande partie, si vous n'avez jamais travaillé dans le Web ou dans l'interface utilisateur auparavant J'espère que c'est utile. Cela prête à confusion. Vous pensez qu'il y a beaucoup de choses à assimiler. C'est tout à fait normal. Je voulais vous expliquer les coulisses des raisons pour lesquelles nous nous sommes donné la peine d'en choisir 12. Mais si vous n'en retenez rien d'autre, choisissez-en 12 et passez à autre chose. C'est ça. Je vous verrai dans la prochaine vidéo. 34. Conseils, astuces et préférences dans Figma ma: Bonjour, tout le monde. Je vais faire une vidéo sur le type de raccourcis, où les trouver, et sur certains des trucs et astuces de Figma Nous avons maintenant une certaine expérience. Il est temps d'ajouter quelques éléments au flux de travail pour nous accélérer. Donc, l'une des premières choses que je veux vous montrer est ce petit point d'interrogation. Nous avons tous appris que l'aide contenue dans un logiciel n'est jamais vraiment bonne. Figma est vraiment bonne. Cliquez sur le petit point d' interrogation. Celui qui est assez intéressant se trouve sous les raccourcis clavier. Et ce sont tous les raccourcis clavier qui ne sont pas évidents. Évidemment, vous pouvez survoler certains éléments. Vous savez, je sais que le stylo est P parce qu'il y est écrit. Mais ici, nous allons vous montrer tous les autres. Alors, faites-vous un petit tour. Certaines sont bleues. Les bleus que nous avons déjà utilisés dans ce cours. Je les ai probablement tous utilisés. C'est un nouveau login pour moi pour ce cours, certains d'entre eux ne sont toujours pas bleus. Je ne sais pas, c'est comme un défi. Utilisez-les tous. Mais jetez un œil ici et trouvez ceux qui vous disent  : « Oh, j'aurais aimé que ce soit un raccourci pour passer à travers. Shift Command X. Je vais également vous montrer la version PC si vous êtes sur PC. Jetons un coup d'œil à l'un de mes favoris. C'est là-dedans. Je pense que c'est une sélection. Sélection approfondie. Donc, quand je travaillerai, passons à cette boîte de fonctionnalités ici. Je suis donc sur mon portable Lo Fi. Oh, un autre raccourci est que si vous sélectionnez quelque chose, pouvez-vous voir que je l'ai sélectionné ici ? Au lieu de zoomer en plein milieu de l'écran, vous pouvez appuyer sur Shift 2 sur MacNPC Ce que je vais faire, c'est zoomer sur ce que vous avez sélectionné. Nous avons terminé la première étape, qui consiste à me montrer tout ce qui se trouve sur mon document. Que faites-vous ici ? Je n'ai plus besoin de vous. C'est une journée de travail. Mais si je sélectionne quelque chose, disons que je clique sur ce texte ici et que je touche Shift 2, cela zoome directement sur l' élément que j'ai sélectionné C'est une question pratique. Faites un petit zoom arrière. Qu'est-ce qu'on a ? L'autre raccourci est Deep Select. C'est ici que je l'ai regroupé. À l'intérieur de ce groupe se trouve un autre groupe. À l'intérieur de ce groupe se trouve un autre groupe. Il y a beaucoup de groupes. Vous finissez donc par double-cliquer. Disons que je veux cliquer sur cette icône ici. Je le sélectionne une fois. J'ai trouvé le groupe. Double-cliquez dessus. Entrez dans ce groupe, double-cliquez à nouveau dessus, entrez dans ce groupe, double-cliquez à nouveau dessus pour y accéder et saisissez l'icône. Beaucoup de clics. sélection approfondie consiste à maintenir enfoncée la touche commande sur un Mac, touche Ctrl sur un PC, puis à cliquer en une seule fois, pour parcourir tous ces groupes, cadres ou composants. Tout saisit simplement ce que vous avez placé au-dessus de votre souris. C'est donc Deep Select. Et je veux juste vous donner par exemple, comment passer par ici, parcourir les raccourcis clavier regarder vous-même un peu et vous dire : Oh, celui-ci est bon. Je vais le noter. N'oubliez pas que vos fichiers d'exercices contiennent une feuille de raccourcis contenant les principaux, mais que vous ne trouverez que ceux qui vous seront personnellement utiles pour votre flux de travail. Maintenant, l'autre raccourci est celui qui permet de contrôler tous les raccourcis. C'est ce qu'on appelle l'action rapide ? Comment ça s'appelle ? C'est ce qu'on appelle le bouton Actions. Vous pouvez le voir là-bas. Il s'agit Command K sur Mac, Control K sur PC. C'est un autre point positif car il y a parfois des claviers qui ne sont pas les claviers anglais que Si vous êtes du genre, cela ne fonctionne pas mon autre langage stylistique, dans mon autre langage stylistique, passez la souris ici, vous verrez également tous les raccourcis sur le côté Non seulement faites ces raccourcis vers le bas dans le point d'interrogation, mais aussi à côté d'eux ici. Jetez-y un coup d'œil. Si j'ai suivi ce cours et que je suis du genre à utiliser la commande K, ce n'est pas bon pour. Regardez ici ce qui est répertorié ici. Bien, celle que je veux, c'est la clé des actions. Commande K. Il s'agit du raccourci le plus important. Vous pouvez simplement demander à Figma de faire ce que vous voulez. J'adore ça. Regarde ça. Disons que je veux que ce soit en majuscules. Je sais que je peux aller ici, je peux faire défiler la page, je peux accéder aux paramètres et je peux trouver que c'est celui-ci ici. Mais il y a beaucoup de choses qui nous ressemblent : soit c'est trop long, soit vous ne vous souvenez pas où c'est. Je peux cliquer dessus , appuyer sur la commande K et simplement taper en haut. C'est bon. C'est pourquoi il y a un avertissement. Arrêtez ma commande K. Bref, j'ai sélectionné la commande K, puis elle est apparue. Le vôtre pourrait le faire et je peux taper en haut. Tu vois, il passe en revue tous les menus et s'en va, tu veux dire ça ? Tu dis : « Oui, je suis sérieux. Co. Disons que j'ai cette couleur ici et que je souhaite sélectionner toutes les autres couleurs. Je sais ce que je dois faire et je sais que c'est possible. Je vais donc passer à commande K. Au lieu d' essayer de la trouver, je vais sélectionner et je vais dire qu'elle est là. Sélectionnez avec le même remplissage. Il clique sur tout ce qui a la même couleur de remplissage que ces gars. Je peux dire, c'est vrai, je veux que tu changes maintenant. Si vous vous souvenez de son nom vague, vous pouvez simplement passer à la commande K, taper et passer directement à elle Tout est là. L'autre point utile, c' est que si vous ne cliquez pas avec le bouton droit de la souris, accord, il y a tellement de choses utiles ici OK ? Si vous cliquez avec le bouton droit sur des éléments, cela dépend du contexte. Il va donc vous donner la liste des choses que vous pouvez faire avec cela. Lorsque vous cliquez avec le bouton droit sur du texte, cela vous donne des informations différentes , ainsi que des raccourcis. Mais cela peut souvent être très utile. Donc, si je clique dessus et que je clique dessus avec le bouton droit de la souris, je veux sélectionner la couche. Tu vois qu'il s'agit de sélectionner toutes les choses qui se trouvaient sous ma souris ? Est-ce que je veux le groupe ? Voulez-vous que le groupe fasse partie du groupe ? l'image qui se trouve dans le groupe situé dans l' onglet des fonctionnalités vous donne une idée de l'endroit où vous avez sélectionné votre objet N'oubliez donc pas de cliquer avec le bouton droit de la souris. Il y a des trucs utiles là-dedans. Préférences. Il n'y en a pas beaucoup. Si je passe au petit F pour Figma et que je passe aux préférences. Il y en a ceux-là. Avez-vous lu, trouvé tout ce qui vous semble utile. Une des choses que j'aime changer est de garder l'outil sélectionné par la suite. je prends l'outil rectangle et que je le dessine, par défaut, il revient normalement à l'outil de sélection, et vous dites : «   Non, maintenant il va rester sur l'outil que vous avez sélectionné ». Une autre option utile que j'aime bien est la molette de défilement pour zoomer. Au moment où ma molette de défilement se trouve sur ma souris, peut que vous n'en ayez pas une qui monte ou descend sur la page. C'est totalement cool. Mais vous venez peut-être d' un autre programme où vous êtes du genre, mec, qui zoome normalement Je vais changer cela pour faire défiler la molette vers Zoom. Une dernière chose que j'aime bien, c'est toute préférence personnelle. Celui qui dit que le clavier zoome sur la sélection. C'est celui-là. OK ? Est-ce qu'avant, quand je zoomais, il passait juste au milieu de l'écran Maintenant, si je l'ai sélectionnée et que j'appuie sur Zoom, donc j'utilise simplement mon Command plus sur un Mac, Control plus sur un PC, il zoome en quelque sorte sur ce que vous avez sélectionné Très bien, alors jetez un œil aux préférences, modifiez ce que vous voulez. Oh, un dernier point est le coup de pouce. Jetons un coup d'œil à celui-ci. Entrons dans le vif du sujet. Passons aux préférences, et passons au montant du nudge. C'est ça, bordel. C'est en donnant un coup de pouce que je suis parti, euh, à gauche et à droite avec mes râteaux Je me souviens que Shift le pousse en gros morceaux Lorsque vous travaillez sur une grille à huit points, en particulier pour une application, vous souhaitez qu'elle se déplace par incréments de huit points Même si vous ne travaillez pas sur une application, je préfère que le coup de pouce soit de huit points Passons aux préférences, passons au montant du nudge. Un coup de pouce correspond à un pixel. C'est très bien. Mais je veux avoir le gros coup de pouce lorsque vous maintenez le quart de travail à huit Maintenant, quand il se déplace, je sais qu'il se déplace de huit pixels. Très bien, voici donc certains de mes conseils. Et le plus important est Command K, Control C ou PC et tapez simplement ce que vous voulez. Tapez simplement la mise en page. Alors montrez à Lou, les gars. Les guides de sortie sont cachés. Pouvons-nous même les voir avant ? Nous ne sommes pas sur la bonne voie. Passons à celui-ci ici. Passons à commande K. Même si vous ne vous souvenez pas du raccourci, vous pouvez vous souvenir de la commande K, puis simplement la saisir. Vous pouvez voir que je peux les activer et les désactiver. Chaque raccourci sous la commande K, le contrôle C du PC. C'est bon, c'est ça. Je vous verrai dans la prochaine vidéo. 35. Inspiration de couleurs et la pipette dans Figma ma: Bonjour Nous allons parler de l'inspiration en matière de couleurs. Nous étudions notre maquette haute fidélité , nous devons donc choisir les couleurs. On vous donne peut-être les couleurs de l' entreprise et vous êtes peut-être coincé avec les couleurs, mais dans le cadre de notre projet de classe, nous pouvons choisir les nôtres. Par où commencer ? L'inspiration en matière de couleurs peut provenir de nombreux endroits. Il existe de nombreux sites en ligne. Il y en a quelques-unes que j' aime beaucoup et que je voudrais suggérer que les glacières sont vraiment intéressantes, et Color Hunt en est une autre que j'utilise beaucoup Ce qui est bien avec eux, c'est qu' ils vous montrent simplement des couleurs qui fonctionnent ensemble. Vous pourriez dire  : « Oh, ça y est. Qu'est-ce que je veux ? Ne faites pas trop défiler la page. J'aime bien ces quatre ensemble. C'est combinaison de couleurs vraiment cool. Il est très facile de les intégrer à Figma. Je peux juste cliquer dessus. OK, et cliquez dessus. Il dit qu'il est copié ou que vous pouvez le copier-coller d'ici. Ensuite, dans Figma, je vais passer à la version Hi Fi, zoomer un peu Je vais créer quelques rectangles. Je passe à ces cadres simplement parce que je maintenais la touche Shift enfoncée pour que tout soit parfaitement carré et une fois sélectionné, je vais me débarrasser de FFF et simplement coller ce code, la tête saisie, et c'est cette couleur au-dessus Je vais zoomer. Je vais en faire une copie , puis revenir aux glacières et faire une recherche de couleurs, copier celle-ci également, puis me frayer un chemin en ajoutant les couleurs Un autre bon outil est color.adobe.com, contient des informations intéressantes sous les rubriques tendances et Vous pouvez voir ici que les images déterminent les combinaisons de couleurs, ce qui est vraiment cool. Explorez, c'est juste que vous pouvez aller ici et dire, je veux voir tous les thèmes de couleurs les plus utilisés qui sont populaires ce mois-ci. Que les gens ont utilisé. Ils ont une grande bibliothèque de personnes utilisant des couleurs, c'est très intéressant de voir ce qui est utilisé. Allez, chargez. Cela ne fonctionne pas pour le moment, mais cela fonctionne à d'autres moments. D'autres bons endroits pour trouver des idées de couleurs. Surtout si vous débutez dans le design en général. Signification des couleurs. Il s'agit de figma.com slash Colors et l'entreprise souhaite, disons, utiliser cette couleur, mais vous devez en parler à votre client J'aime le rouge. Ce n'est pas suffisant. Vous devez dire qu'est-ce que le Chili vous donne un langage pour expliquer au client pourquoi vous l'avez choisi, et vous donne simplement, oui, un langage à utiliser. Je trouve cela très utile. De plus, cela me donne des couleurs qui fonctionnent avec. Un autre bon jeu de Figma est figma.com Slash D'accord ? Ensuite, vous pouvez choisir votre couleur, et elle choisira une couleur complémentaire. Une solution qui fonctionnera ensemble. J'aime bien celui-ci. Je l'aime encore plus. Un autre élément utile est le gradient. C'est vraiment bon pour les dégradés, et vous pouvez parcourir les dégradés en une seconde, cela vous permettra de trouver une bonne inspiration pour les dégradés Celui que j'utilise beaucoup provient de mon moodboard. Disons que vous faites votre moodboard, que vous recherchez des objets et que vous créez portefeuilles, mais que vous aimez cette couleur Je vais donc faire une capture d'écran, je vais y aller. J'aime bien ces combinaisons de couleurs. Même s'il n'y a pas de portefeuille dedans, il peut tout de même faire partie de mon moodboard Je vais aller à Figma. Je vais aller sur mon moodboard. Où est mon mood board ? C'est au-dessus de mon lofi doc. C'est juste pour traîner ici. Je vais prendre ma capture d'écran et l'apporter. Il suffit de le faire glisser sur la page depuis mon outil de recherche. Ce qui est cool, c'est que je peux dire que zoomer , c'est que je peux prendre mon outil rectangulaire ou mon outil cadre , dessiner ceci, prendre mon collyre, un outil, qui est la touche œil du clavier et celui-ci, c'est cool. Celui-ci ici, un collyre est un outil, vous pouvez commencer à vous frayer un chemin et à vous approprier les couleurs D'accord, je trouve cela plus facile que de copier-coller tous les nombres à décimales élevées Je le fais aussi pour ceux-là. Disons que je parle de glacières et passons au générateur Celui-ci est aléatoire. Vous pouvez appuyer sur la barre d'espace sur celui-ci, juste pour passer d'une case à l'autre au hasard. Je ne sais pas, c'est cool. Disons que j' aime bien ce groupe, je peux juste faire une capture d'écran de cette grosse tranche, mettre dans Figma Allons-y. J'utilise le c'est trop gros. Massif. Réduisez-le, zoomez et j'utilise à nouveau l' outil compte-gouttes Je vais vous chercher pour faire une copie de ces gars ici. Qu'est-ce que je veux ? Je veux un, deux, trois, quatre, cinq Je peux simplement utiliser mon compte-gouttes pour les extraire plutôt que de copier-coller ce numéro hexadécimal ai raté. Ma dernière. Maintenant, j'ai mes couleurs. L'autre chose que tu peux faire, c'est que tu dis : « Je les aime bien, mais celui-ci, j'en ai besoin d'une autre version . Je vais y aller. Ici, vous pouvez commencer à jouer avec les curseurs comme nous l'avons fait J'en veux un un un un peu plus saturé , peut-être ici, en hexadécimal Je vais passer en luminosité par saturation des teintes et je veux que ce soit en luminosité par saturation des teintes. Est-ce que celui-ci est saturé ? Je vais juste utiliser ma flèche vers le haut pour en trouver une qui est plus saturée. Tu vois ici ? Vous pouvez commencer à les diviser en alternatives à cette couleur primaire. Peut-être un peu plus désaturé. Voilà. C'est bien trop désaturé C'est bon. C'est en quelque sorte une façon de commencer à utiliser la couleur, de trouver l'inspiration, et simplement de parcourir et utiliser l'outil Eyedropper pour extraire les couleurs que vous pourriez utiliser dans votre design 36. Comment concevoir une palette de couleurs dans Figma: Bonjour à tous. Dans cette vidéo, nous allons créer une palette de couleurs à partir de laquelle nous pouvons travailler pour notre design. Nous aurons une couleur primaire, une couleur secondaire et une couleur d'accent. Nous allons créer certaines couleurs d'interface, puis nous proposerons des variantes de nos couleurs primaires, secondaires et d'accent. D'accord. Ce n'est pas la seule façon officielle de le faire. C'est comme ça que je le fais. J'ai pensé partager. Je trouve cela très pratique, lorsque je commence à créer un concept, d' avoir une sorte d'échantillons de couleurs prêts à être lancés. Très bien, commençons. Créons donc une palette de couleurs plus utilisable. Tu as commencé à le faire à moitié. Faisons un peu plus. Après le ton du rectangle, dessinons un rectangle. Je vais commencer par la couleur que je souhaite. J'ai aimé ce violet ici , surtout parce que quand je regarde le marron du cuir de mes portefeuilles, impression que c'est une bonne couleur violet semble disparaître. Ça, je l'aime bien avec. Vous pouvez l'obtenir sur vos sites d'inspiration en matière de couleurs. Vous pouvez l'extraire de votre graphique. Il se peut que l'entreprise vous donne une couleur. OK, je suis d'accord avec quelque chose comme ça. Maintenant, j'ai besoin d'une couleur pour l'accompagner. Soit vous l'avez choisie, soit c'est une couleur d'entreprise avec laquelle vous devez travailler Vous pouvez choisir cette couleur et passer à quelque chose. Vous recherchez une roue chromatique. Il y en a beaucoup en ligne. Nous utiliserons la roue chromatique Figma One, la roue chromatique de figma.com, la roue tiret de couleur oblique et vous pourrez C'est le violet que je veux voir en bas. Il a choisi une couleur complémentaire. Est-ce que ça me plaît ? Je n'en suis pas sûr. Gratuit, comme vous le verrez ici, il est complètement opposé dans la roue chromatique C'est souvent un excellent point de départ. Comme ce que je recherche, peut-être un violet un peu plus, moins dans le violet et le vert, mais plus dans le violet est-il toujours violet ? Du violet, du bleu et de la moutarde. Est-ce que j'aime ça ? Je peux le copier et je pense que cela pourrait être une bonne couleur secondaire par rapport à ma couleur principale. C'est la couleur principale de la marque, et ce sera une couleur primaire. Mais ce n'est pas toujours le cas, vous n'êtes pas obligé de l'utiliser. Les signes de couleur ne sont pas vraiment une science. Souvent, vous pouvez simplement y aller et le cueillir. J'aime aussi le split parce que le split passe directement de l'autre côté, mais vous pouvez voir les deux côtés de l'autre côté. Séparer. J'aime bien celui-ci. C'est plutôt mon truc. C'est définitivement du green down. J'aime bien ce violet et marron. Est-ce que je vais l'utiliser également ? Je n'aime pas vraiment ça. Je ne le suis pas. Mais si vous vous y prenez, vous constaterez peut-être qu'il existe différents modèles pour cela. Oh, je déteste vraiment ça. Square est plutôt sympa. Vous pouvez les voir. Lorsque vous travaillez, vous avez souvent besoin d'au moins deux couleurs, une couleur principale et une couleur secondaire. Mais souvent, lorsque je travaille, j'aime avoir une couleur d' accent, comme une couleur tertiaire, trois d'entre elles. C'est ça ? Ou est-ce que c'est ça ? Une sorte de travail d'avant en arrière. Sur mon Mac, je peux appuyer sur l'onglet Commande. Je pense que vous pouvez utiliser l'onglet Contrôle sur un PC pour passer d'une application à l'autre. Je passe entre Chrome et Figma. Et qu'est-ce que je veux ? N'ayez pas peur. Va-t'en, je pense que je sais ce que je veux. Je vais juste appuyer sur la roue chromatique et revenir en arrière. Oh, est-ce que j'aime ça ? Est-ce que c'est bien ? Je ne suis pas sûr. Je vais juste revenir en arrière pendant un petit moment et je ne sais pas, je suppose que je veux vous montrer que ce n'est pas une science complète Je veux probablement quelque chose de plus clair pour ma couleur d'accent. Je veux que ça soit prêt. J'allais avancer un peu plus vite. Nous y voilà. Peut-être pas. Peut-être de ce côté du rouge, peut-être de l'orange. C'est bon. Je reviendrai dans une seconde une fois que j'aurai choisi une couleur. J'ai passé des heures à changer toutes les couleurs. Je ne suis toujours pas sûr, mais c'est un bon point de départ. Ce que j'aime faire alors, c'est que nous avons notre couleur principale, secondaire, notre couleur tertiaire ou notre couleur d'accent. Utilisez beaucoup, utilisez un peu, utilisez avec parcimonie, des trucs très excitants. Et ce que j'aime faire, c'est que vous ne pouvez pas simplement utiliser ces couleurs. Tu as besoin d'un petit supplément. Ce que vous finissez par faire, c'est saisir cette boîte, sortir de cette façon et dire, d'accord, j'aime bien celle-ci, mais j'ai besoin d'une version plus foncée Je vais donc cliquer ici. Je vais aller à mon HSB. Je vais aller à. Vous pouvez simplement le faire glisser vers le bas. Je vais juste récupérer ma luminosité, maintenir la touche Shift enfoncée et appuyer plusieurs fois. J'ai une version plus foncée. Je vais en faire une version allégée. OK. Et je vais monter un peu. OK ? Je veux donc une version allégée. Maintenant, vous n'avez pas à simplement monter et descendre dans la nuit. Certaines couleurs réussissent très bien à les rendre un peu plus foncées et un peu plus claires. Certains d'entre eux deviennent dégoûtants. Je ne suis pas au courant de celui-ci. J'ai l'impression que ça va devenir dégoûtant. Je vais donc passer à la luminosité, baisser un peu. Non, ça s'est bien passé. Ce que vous pourriez aussi faire, c'est le rendre plus sombre, mais aussi le rendre moins saturé. n'y a pas de règles strictes en matière de couleur. J'espère que certains de ces conseils vous aideront, J'espère que certains de ces conseils vous aideront si vous êtes nouveau, à vous en faire une meilleure idée. Ainsi, celle qui devient plus lumineuse devient cette toute nouvelle couleur. Je veux donc obtenir la saturation et m'y attarder également. Je pourrais aussi baisser un peu la luminosité. Oui, allons-y. Pareil pour celui-ci. Allons-y. Je vais passer à celui-ci. C'est bon. Alors voilà. Ce sont mes couleurs. Je vais les utiliser principalement, mais il y aura des moments où j'aurai besoin d'un peu de contraste pour pouvoir utiliser ceci ou peut-être cela, juste pour avoir un contraste plus clair entre les deux tout en restant dans le même type de zone de couleur. Le suivant est blanc et noir. Donc blanc et noir, vous pouvez utiliser du blanc et du noir complet. Cependant, il est très courant d'utiliser non seulement du blanc, mais aussi quelque chose. Pouvez-vous voir le dos de Figma Ils ont utilisé ce blanc cassé pour cette couleur d'interface ? Allons-nous créer notre propre couleur d'interface ? Et pouvons-nous faire correspondre le contexte ? En gros, oh, oh, je m'en suis assez rapproché. OK, donc c'est très courant d'avoir un peu de blanc, juste un peu de gris dedans. raison pour laquelle nous avons une couleur d'interface qui n'est pas tout blanche, c'est pour que nous puissions faire des choses comme je vais laisser cela là. Ce que je pourrais faire, c'est les récupérer tous et déplacer vers cet autre arrière-plan. Je vais le réduire en maintenant la touche Maj enfoncée pour qu'il soit bien redimensionné ou utiliser votre outil de mise à l'échelle, juste pour qu'il soit facilement visible, sinon il se confond avec l'arrière-plan. La raison pour laquelle nous avons cela, c'est disons que j'ai un cadre sur fond blanc. Je veux qu'une fenêtre contextuelle apparaisse dessus et qu'il ait juste un peu de contraste y ait juste un peu de contraste pour pouvoir la séparer de l'arrière-plan Je pourrais ajouter un petit trait. Ce n'est qu'un pixel, c' est vraiment une couleur claire. Juste pour le faire, ajoutons un drop shadow ex drop shadow. Nous n'en avons pas encore parlé, mais vous pouvez finir par avoir ces modèles qui apparaissent dans votre application je peux probablement me débarrasser de l'accident vasculaire cérébral maintenant. Le dropshadow fait l'affaire et il suffit de voir qu'il y a un beau contraste entre les deux Vous pouvez le faire dans l'autre sens, avec du blanc cassé en arrière-plan et toutes vos fenêtres contextuelles en blanc, c'est à vous de décider. OK. Et encore une fois, en termes de couleurs, vous pouvez choisir le gris de votre choix, mais il est courant de n'avoir que du blanc et du noir, cinq d'entre eux. Vous êtes du blanc cassé jusqu'au noir le plus foncé. Souvent aussi, avec du noir, la découpe n'est pas aussi nette. Faites-le glisser vers le bas et utilisez simplement le noir. Tu pourrais le faire. Il n'y a rien de mal à cela. Ce que j'aime faire, c'est trouver : oui, vous pouvez choisir un noir froid ou chaud. Vous déciderez peut-être que j'ai besoin tous les voir un peu avec Zoom. Le noir chaud se trouve en bas, mais dans votre curseur de teinte, passez à une couleur jaune, une couleur dorée, puis choisissez un noir mais dedans. C'est peu. Comparons-le au noir normal. Le noir ordinaire est là tout seul, n'est pas grand-chose, mais si vous le comparez à celui-ci, vous voyez qu'il y a juste une chaleur dans celui-ci et nous pourrions devenir encore plus chauds mais plus foncés. Vous vous retrouvez avec celui-ci, vous obtenez un noir chaud plutôt qu'un noir froid. Eh bien, c'est un noir uni, un noir chaud. Voyons la comparaison. Je vais le faire sur la diapositive d'un noir cool. Vous pouvez entrer ici et dire : « D'accord, je veux que ce soit un noir cool, alors je vais passer au bleu-vert et choisir un noir vraiment foncé Mais ici, voyez-vous la différence entre les deux ? À eux seuls, ils ont l'air plutôt noirs. Mais avec leurs copains, vous pouvez voir du frais, chaud, et c'est à vous de choisir le chemin que vous voulez prendre Décidez si vous voulez ce type de noir chaud ou froid avec vos couleurs. Je vais opter pour le noir. Et tu peux avoir une sorte de cool bleu. Vous pouvez également avoir un peu de fraîcheur verte. Cela dépend de vous. Je pourrais entrer dans une sorte de petit coin violet petit coin violet OK. Oui, ça marche pour moi. Donc tu es là. Maintenant, je vais prendre ça, prendre l'iba dropal, faire comme ça et partir, il nous faut une, deux, trois, quatre, cinq étapes Il m'en faut un au milieu. Celui-ci, je vais le voler de la même couleur. Je dois dire qu'il ne fait pas si sombre que ça, donc nous devons être beaucoup plus lumineux. Vous pouvez simplement vous souvenir de la saturation de la teinte et de la luminosité. C'est celui-ci et montez, maintenez la touche Maj enfoncée, et vous pouvez voir ici que ce n'est pas gris. Je veux être ici. Je veux qu'il soit gris mais qu'il fasse chaud en utilisant un peu de ce bleu. Tu peux le voir ici ? C'est un gris froid. Celui-ci va se situer quelque part entre les deux. Je vais donc y aller, je laisse tomber et je m'en vais, ce qui est toujours dans la zone bleue, mais plus encore ici. Oh, non, il doit faire noir, quelque part là-dedans . Ça me plaît. Très bien, nous allons faire notre dernier. Ce sera à mi-chemin entre ces deux gars, et il ne s'agira jamais d'une traînée de 20 % ou 50 %. Oui, je vais le rendre plus lumineux, mais il semble trop bleu, alors je vais venir ici et avoir juste une touche de bleu. C'est bon. J'ai mes couleurs à partir desquelles je peux commencer à construire. J'ai une couleur d' accent principale, secondaire , puis voici les couleurs de mon interface. Du texte, des boîtes, des commutateurs, ce genre de choses. Nous en sommes maintenant au stade de la conception. Cela peut être ajusté à la volée parce que vous découvrirez que vous allez l' utiliser et vous vous direz  : « Oh, cela ne fonctionne pas ou cela a l'air horrible, il existe une combinaison et vous pouvez les mettre à jour. Mais c'est bien de commencer, surtout quand on utilise des moodboards, et que l'on se dit : « Oh, j'aime bien ceux-ci ? Oh, comme pour le violet. Allons-nous échanger ? Non, Dan. Concentrez-vous. Je veux vraiment cette couleur maintenant au lieu de cette couleur moutarde. C'est bon. Descends. C'est bon. C'est ainsi que je choisis les couleurs. Ce n'est pas le seul moyen officiel. Il existe de nombreuses façons de le faire. Vous pouvez emprunter à des sites Web en couleur, y trouver des idées. Mais jouez avec la roue chromatique si vous ne l'avez jamais utilisée auparavant pour vous faire une idée de ce que la science vous recommande d'utiliser, puis faites votre propre truc quand même C'est tout. Je vous verrai dans la prochaine vidéo. 37. Comment réaliser des dégradés dans Figma ma: Vous. Nous allons examiner les dégradés à l'intérieur de Figma Bonjour Gradients. Nous allons en faire une subtile. Nous allons en faire un avec trois couleurs. Je vais vous montrer comment créer un dégradé transparent pour qu'il ressemble à un fondu. Tout cela et bien plus encore, en fait, juste cela à l'intérieur de Figma. Allons-y. Très bien, gradient time. Allons-y et j'ai tout un tas de désordre. C'est mon inspiration. Je vais les récupérer, les copier et les déplacer sur mon bureau Hi Fi. C'est celui que nous allons commencer à construire. Je n'ai plus besoin de toi. Je n'ai pas besoin de vous, les gars. Supprimez-le. Qui se souvient comment désactiver les colonnes ? Oh, vous ne vous en souvenez pas, mais souvenez-vous du super raccourci Command ou Control K et tapez la mise en page. Disposez, et nous pourrons vous montrer des guides. C'est bon. Je vais les mettre en haut ici. Le seul problème, c' est mon panneau de couches, j'ai mon bureau, mais j'ai tout cela au hasard dans mon panneau de couches. Sélectionnons-les tous. Passons au clic droit et nous pouvons encadrer la sélection. Ils sont dans leur propre petit groupe de barres obliques. Je vais appeler cela une palette de couleurs unique. Est-ce une question de palette de couleurs ? Quoi qu'il en soit Accroche-toi. J'ai juste besoin de vérifier. Attends-y. C'est bon. Je suis de retour, bon sang, comme deux autres. Bonne orthographe, bonne souris. Mais dessiner, c'est bien. Et jetons-y un coup d'œil. J'ai ça dedans. L'un des problèmes vient de ce fond blanc. Nous avons déjà examiné cette question. Si je n'ai rien sélectionné, je peux changer le document, comme la couleur du document de travail par une couleur plus foncée. C'est parfois utile. Je peux les voir avec un peu plus de contraste. Donc, il suffit de ne rien sélectionner et vous pouvez changer de page. La page ne s'imprime pas et ne s'affiche pas sur le site Web mobile. C'est juste l'interface utilisateur de Figma. Très bien, alors faisons un dégradé. Je vais copier l'un de ces gars. Et les dégradés se cachent sous le film et en dessous, il y a le solide. Nous avons un dégradé. Nous en avons quelques autres, des modèles, des images, des vidéos. Passons donc aux dégradés, et cela nous donne un dégradé par défaut, et ce que vous pouvez faire, c'est le modifier ici C'est probablement le moyen le plus simple. Supposons que je veuille extraire des dégradés. Eh bien, faisons-en une manuelle. Il suffit de double-cliquer dessus. Vous pouvez saisir le curseur, choisir n'importe quelle ancienne couleur. Ensuite, à la fin, cliquez sur celui-ci, faites-le glisser, choisissez n'importe quelle ancienne couleur. Oh, c'est horrible. Supposons donc que je veuille choisir des dégradés à partir de mes couleurs réelles Je prends le compte-gouttes et nous travaillons sur ce dernier outil ici, donc je ne sais pas Je vais régler ça et voir à quel point ça va empirer. Pour le premier, je veux prendre l'eyedroptol de mon violet. Je suis en train de le creuser. Souvent, ce que j'aime faire c'est bizarre, au lieu de ce dégradé vraiment très complet . Tu vois la flexion sur la mienne ? Ça se voit probablement dans la vidéo. Je ne sais pas d'où ça ne passera pas. C'est juste bizarre. Eh bien, c'est une sorte de différence au niveau du zoom. Vous l'avez peut-être dans le vôtre. Bizarre. Tu vois, je suis rentré. Ignorez la ligne. Donc, revenir au dégradé, c'est ce que vous pouvez faire. Ce que je trouve un peu mieux les dégradés, c'est que vous pouvez voir le petit point blanc Vous pouvez le faire glisser là où il doit être. J'aime souvent les dégradés un peu plus subtils comme celui-ci. Effectuez un zoom arrière. Je trouve que c'est souvent un meilleur dégradé. De plus, vous pouvez aller encore plus loin et vous dire : «   D'accord, je veux que ce soit ici Et il s'agit d'un dégradé linéaire par défaut. Tu peux passer à la radio. Ils sont vraiment bons aussi. Je vais le retourner, ce que je veux faire , c'est saisir cette extrémité et y être. sais vraiment ce que je veux. Je vais le retourner en arrière. J'aime faire ça là où il y a plus de montre. Je peux l'agrandir. Il y a ce dégradé plus abstrait. se passe quelque chose. Je l'aime bien pour les boutons où ce n'est pas vraiment clair, regardez-moi. Je suis un dégradé. C'est un dégradé subtil. Je l'ai préféré comme nous l'avons fait pour la radio, donc je vais annuler. Vous pouvez faire d'autres choses ici. Il y a la radio, il y en a d'autres que vous n'utiliserez jamais en angulaire. Ça a l'air cool, je crois. Ça te plaît ? Et le dernier, qui est le diamant. Encore une fois, pas celle que j'utilise. Je vais utiliser le linéaire. Vous pouvez également les rendre transparents . Donc, introduisons une image. J'ai quelque chose dans le fichier d'exercices, alors allons-y. Non, passez à celui-ci et passez à Image vidéo. C'est Command Shift K, Control Shift K sur un PC, accédez aux fichiers d'exercices. Il y a quelques images ici. Choisissez n'importe quoi. Choisissons celui-ci ici. OK, donc Scott. Apportez celui-ci, je vais cliquer dessus et le faire glisser vers l'extérieur. Ce que je trouve vraiment utile pour les dégradés , c'est que nous devons mettre du texte en haut ici Prenons l' outil de saisie, cliquez une fois. En-tête. Le problème avec ce texte , c'est qu'il est difficile de le lire en arrière-plan. D'accord ? Assurez-vous donc d'utiliser le K pour l' outil d'échelle pour redimensionner le texte. D'accord ? C'est vraiment difficile à lire dans ce contexte. Nous allons donc ajouter un dégradé. Alors faisons-en un nouveau. Prenons l' outil rectangulaire ou un cadre. D'accord ? Et ce que je vais faire , c'est passer à Gradient. Je vais choisir linéaire. Celui du haut sera complètement noir ou le noir que j' utilise sera mon noir. Celui-ci est là, donc je vais jeter œil sur un outil et prendre celui-ci D'accord. Et celui du bas, le second, au lieu d'être entièrement en couleur, comme c'est le cas ici, tu peux le prendre et le mettre à zéro. C'est la transparence comme celle-ci. Vous pouvez faire des choses comme ça où vous pouvez le faire glisser vers le bas. Je dois jouer avec les couches. Vous vous souvenez qui se souvient du raccourci des couches ? Vous pouvez simplement le faire glisser ici en dessous du titre ou ce sont les crochets qui le renvoient complètement vers l'arrière. Ce sont les crochets à côté du piki et il se peut que je doive faire de même pour l'arrière-plan Quoi qu'il en soit, j'aime bien faire cette transition agréable entre l'arrière-plan et le premier plan. Une fois sélectionnée, vous pouvez choisir le linéaire ici une fois que vous avez cliqué dessus, ainsi que sa longueur Tu vois que je peux faire disparaître ce petit teint ? Je suis en train de rendre les choses horribles maintenant. L'autre point à noter à propos des dégradés lorsque vous faites de la transparence, que même si c'est complètement transparent, il est dit à zéro que la couleur est importante Pouvez-vous voir qu'il y a de la lumière là-dedans ou qu'il est encore plus exagéré ? Utilisons le vert. Même si le vert est complètement transparent, il apparaît dans cette transition entre les deux. Parfois, vous voulez simplement du noir et du noir et une transition à zéro pour obtenir un dégradé vraiment clair et simple. Aucune autre couleur mélangée. La dernière chose que je veux vous montrer est d'ajouter trois couleurs. Nous avons considéré le gradient plus tôt comme un gradient. Très bien, ils ont plein de couleurs intéressantes. Certaines d'entre elles sont horribles aussi. Alors prenons-en un qui nous plaît. Faites défiler, faites défiler. Dis celui-ci ici. Trois couleurs y sont appliquées. D'accord, et les sites ne fonctionnent pas. J'espère que lorsque vous y irez, il y aura trois couleurs différentes ici. Ils ont ajusté ce site. Avant, j'avais une apparence différente. Maintenant elle est cassée. Faisons simplement une capture d'écran et nous trouverons une solution de contournement Nous allons le transformer en fiction et en tirer les couleurs Comme vous pouvez voir qu'il y a une couleur là-haut, réduisons-la un peu et peut-être une couleur différente au milieu pour une troisième couleur plutôt bleue. Alors faisons-le. Je vais laisser celui-ci là. C'est comme si c'était l'une de mes couleurs, et je vais m'en emparer. Et ajoutez une troisième couleur. C'est linéaire le moment, il y en a un et deux. Vous pouvez simplement cliquer n'importe où ici pour en ajouter un troisième. Vous pouvez également le faire sur cette ligne ici sur le plan de travail. Cela n'a pas vraiment d'importance. Alors celui-ci, on peut dire que troisième peut être ce look, j'ai choisi cette couleur moyenne. Celui du haut sera de cette couleur violet, plus bleu ici, puis celui-ci sera de cette couleur ici. Et je pourrais le déplacer un peu plus tard. Vous pouvez ajouter autant de couleurs que vous le souhaitez à votre dégradé. Nous en avons trois. Voilà. C'est ainsi que l'on crée trois couleurs, et c'est ainsi que l'on crée des dégradés en général dans Figma Je vais soit faire des dégradés de couleurs, soit quelque chose comme ça où ça passe au transparent C'est ça. Ce sont des dégradés dans Figma 38. Comment réaliser et utiliser des styles de couleur dans Figma: Bonjour Nous allons transformer nos palettes de couleurs en styles de couleurs. Les styles sont réutilisables. Nous pouvons les nommer afin uniformiser les couleurs. Nous pouvons les partager avec les gens. Nous pouvons les partager avec d'autres documents. Ils sont tous pareils. Leur avantage réside dans le fait que, disons que je souhaite ajuster couleur que j'ai créée et que j' utilise beaucoup dans mon document, je peux les parcourir et elles sont toutes connectées. Écoutez, je peux en quelque sorte apporter des modifications, et tout ce qui est contenu dans ce document mettra à jour le pouvoir des styles de couleurs. De plus, nous aborderons certaines des conventions de dénomination qui s'appliquent lorsque nous nommons des couleurs. Allons-y. Très bien, pour créer des styles. Commençons par celui-ci ici. Et c'est à cela que servent ces petits points. Vous pouvez définir des styles pour chacune de ces fonctionnalités. Pouvez-vous voir les styles pour les effets, les styles pour les traits ? Ils sont simplement réutilisables, non ? Faisons donc cette première. Passons aux styles. Toutes les bibliothèques sont assez confuses. Ce que vous pouvez faire, c'est le créer dans ce fichier juste pour aimer, c'est clair. Et ce que nous allons faire, c'est en ajouter un nouveau. Donc, ce petit plus. J'ai sélectionné le mien, j'appuie sur Plus, ou j'appuie sur les points, puis sur plus. Nous pouvons lui donner un nom. Maintenant, les conventions de dénomination des couleurs. Il y en a un peu. Je vais vous donner les plus courants. Il existe de nombreuses façons de le faire. Le plus courant est qu'au lieu de l'appeler violet, appelez-le primaire. Si vous remplacez votre couleur principale par une autre couleur, vous ne voulez pas avoir toute une série de couleurs appelées violet. C'est donc primaire. Si vous êtes indépendant travaillez pour de nombreuses entreprises, vous pouvez saisir le nom de la marque Je mets souvent juste les initiales. C'est donc le principal de Scott Wallets. Parce que si vous travaillez pour une autre entreprise, vous vous retrouverez avec de nombreux employés principaux. Ce que c'est est clair, car nous en avons une, deux ou trois versions. Vous pourriez vous retrouver avec cinq, dix, une bonne convention de dénomination. Vous pouvez simplement appeler celui-ci numéro un, ou peut-être ce numéro un, numéro deux, numéro trois. OK, parfois les gens l'ont à 100 ans, puis celui-ci dit que c'est plus transparent. Ils vont le mettre à 50. C'est environ 50 % de cette couleur principale. Vous le voyez assez souvent. Le plus courant est probablement d'en utiliser des centaines. Cela vient des jours de police, du poids des polices. Si vous connaissez le poids des polices, vous savez qu' poids de 500 est la norme. 700 est en gras, 900 en très gras. Nous faisons la même chose avec la couleur. Tu es de couleur moyenne. Il s'agit de son utilisation intermédiaire. Vous avez une échelle de 1 à 900. 100 sera la version la plus claire de votre couleur et 900 sera la version la plus foncée C'est juste au milieu, donc nous allons l'appeler 1500. Je sais que c'est bizarre. Il essaie d' être cool et nerveux à ce sujet, mais c'est bizarre Je vais le copier, je vais créer un style. Nous avons un style maintenant. Appliquons le style et nous reviendrons à la dénomination. Je vais passer en mode Zoom et ajouter quelques éléments différents à ma page. C'est bon. Bon travail. Tous les éléments que j'ai déjà créés, je les ai rajoutés. Supposons maintenant que nous voulions ajouter notre couleur principale. Ce que nous pouvons faire, c'est tout sélectionner. Au lieu d'essayer de le copier-coller, utilisez l' atol en forme de goutte d'œil, ce qui est très bien Vous pouvez cliquer sur les styles maintenant et vous pouvez dire : « Regardez, voici mon style. Ce qui est vraiment cool, c'est que vous avez un très gros document et que les clients vous demandent  : « Oh, qu'est-ce qui ne va pas avec le violet ? Pourquoi n'en est-il pas un peu plus, je ne sais pas, Violet. Ce que vous pouvez faire, c'est ne rien sélectionner, trouver votre style, aller modifier et dire, en bas, c'est ma modification. Tu vois que tout est prévu pour le trajet ? Vous pouvez déjà en voir l' avantage, non ? C'est un excellent moyen de simplement l'ajuster. L'autre avantage, c'est que vous pouvez partager des styles. Nous y reviendrons plus tard, mais vous pouvez le partager entre entreprises, entre documents. Nous utilisons donc tous le même violet. Très bien, construisons-en quelques autres. Passons à celle-ci, qui est la version la plus sombre. Ajoutons-le à mes styles. Appuyons sur Plus, et nous allons appeler celui-ci, comment allons-nous l'appeler ? C'est toujours une couleur primaire, mais au lieu de 500, la la plus foncée que vous devriez probablement avoir est 900 Je veux me laisser de la place pour une version plus sombre, alors je vais l'appeler 1700. Laisse-moi en faire une autre et annuler. J'en ai ajouté un en plus. Faisons cette dernière. Je vais le faire en mode rapide, tu attends là. C'est bon. C' est une bonne chose que j'en ai 300 700 et que vous pouvez les déplacer si je n'ai rien sélectionné parce que je les ai créés à des moments différents, il suffit de les empiler, mais je veux , disons, 700 en bas, 300 en haut. Clair, moyennement foncé. La raison pour laquelle c'est très pratique, c'est plus tard, si vous êtes du genre : « Oh, mec, je dois colorier entre les deux. Ce que vous pouvez faire, c'est dire, d'accord, je veux colorier entre les deux, et il faut que ce soit un peu plus clair mais pas aussi foncé que ça. Vous avez de la place pour n'en nommer qu'un, écoutez, nous avons un 300, un 500 et un 700. C'est entre les deux. Euh, hein. Oui, on pourrait appeler ça 1600. Nous avons donc une certaine marge de manœuvre. Si tu trouves les couleurs des autres, ils en auront une pour tout. Ils en auront 100, 200, 300, ils ont tout cela. C'est un peu exagéré par rapport à ce que nous faisons. Nous allons cependant annuler cela, mais c'est ainsi que fonctionne le nommage. C'est bizarre, je sais. Vous en voyez beaucoup et c'est pourquoi c'est là. Si vous n'avez jamais rencontré cela auparavant, c'est ainsi qu' ils créent les polices de caractères. Audacieux, régulier, c'est léger. Non, quelle que soit la lumière. La plus fine, il y a de la place pour une plus fine et une plus foncée. C'est bon. Ce sont ces couleurs. rien n'est sélectionné, vous pouvez voir vos styles ici, vous pouvez cliquer dessus avec le bouton droit de la souris et les supprimer ou les dupliquer, les copier. Vous pouvez les modifier. Vous pouvez également les réorganiser en cliquant dessus et en les faisant glisser Ajoutons également notre dégradé. C'est celui que je voulais ajouter. Même chose, ajoutez celui-ci. La convention de dénomination de celui-ci sera légèrement différente car vais-je avoir des versions différentes de celui-ci ? Probablement pas. Je vais dire dégradé. Je vais juste appeler celui-ci un dégradé. Maintenant, ce qui est cool, c' est que cela se retrouve dans l'ensemble du document. Nous pouvons donc retourner sur notre mobile Lo Fi et retrouver notre document. Nous utilisons cette couleur ici et double-cliquez dessus pour accéder à l'intérieur. Oh, non, je vais utiliser mon raccourci. Vous vous souvenez du clic de commande ou du clic Ctrl sur un PC ? Voici la couleur de l'image ici. Je ne sais pas pourquoi ça s' appelle image, de toute façon. Oh, il y avait une image dedans, n'est-ce pas ? Oh, nous l'avons fait et nous l'avons supprimé, n'est-ce pas ? Je ne m'en souviens pas. Mais ce qui est bien, c'est que je l'ai sélectionné. Je peux sélectionner toutes les couleurs. Nous pouvons aller jusqu'au bout. C'est où ? Sous Modifier, nous pouvons tout sélectionner. Oh, c'est une question bizarre. OK. Normalement, tout est sélectionné avec le même remplissage, mais comme j'ai fait quelque chose de bizarre et maintenant cela s'appelle image, cela ne fonctionne pas. Passons à celui-ci ici. Qu'est-ce que je ferais maintenant ? Je supprimerais probablement cette boîte. Il pense que c'est une image, ça ne l'est pas. Mais celui-ci a un vieux remblai ordinaire. Faisons-le pour celui-ci. Je peux dire Figma, modifier, et vous pouvez voir tout sélectionner Très bien, je me suis perdu. Ça y est, Dan. Tu es du genre à cliquer dessus, Dan. Oh, ça y est. OK. Donc rien à voir avec cette image. Sélectionnez tout avec le même remplissage. Maintenant, ceux-ci utilisent un remplissage similaire. Celui-ci est là pour une raison ou une autre, je crois que j'ai changé quand je vous ai parlé. Je vais essayer la même chose. Je vais cependant utiliser mon raccourci, Command K , Control C ou PC, et je vais tout sélectionner avec le même remplissage, et aucun d'entre eux ne sera saisi. Bizarre. Je l'ai cassé et je veux les supprimer et passer à autre chose. Mais passons à celui-ci ici. Command K, Control C ou PC, il mémorise les dernières choses que vous avez faites, donc je peux simplement cliquer dessus. Je l'ai sélectionné, imaginez qu'il sélectionne l' ensemble du document. Je peux passer au remplissage maintenant et je peux dire que je vais utiliser ma couleur primaire et cela les changera toutes. Pareil pour l'accident vasculaire cérébral. Je peux entrer ici et mes couleurs sont là-dedans. Je pourrais décider d'utiliser celui-ci. Vous pouvez voir les avantages. Parfois, même si vous ne voulez pas que cela change, imaginez que vous voulez qu'ils changent tous, mais celui-ci doit quand même rester violet. Ce que vous pouvez faire, c'est sélectionner cela, cliquons immédiatement. Voilà, c'est là. Vous pouvez également voir la différence d' apparence du remplissage. Quelque chose comme ici, c'est un rectangle, alors que celui-ci est un point. Un point représente les styles à l'intérieur d'une figure. Ce que tu peux faire, c'est juste le casser. On en revient à cette couleur, ce petit carré avec cette couleur, et il ne sera plus lié à ce style. Si je mets à jour mon style, ceux-ci changeront. La dernière chose que nous allons faire, c'est vous pouvez partir et passer à la vidéo suivante maintenant, parce que je vais simplement développer mes autres vidéos. En fait, les conventions de dénomination. Ce sera un accent primaire et secondaire. Je vais juste passer en revue et le faire. Je vais le dire. C'est assez fastidieux Ajouter des styles, plus un bouton. Ici, ce seront des portefeuilles Scott. Ce sera mon secondaire. Voici mes 500. Je n'ai pas vraiment besoin de quitter ça. Je vais m'occuper du reste. Tu vas aussi être un style. De plus accord. Et il y a une chose que je n'ai pas mentionnée, c'est comment les appelle-t-on ? Si c'est un accent primaire ou secondaire, je vais appeler ceux-ci des tons neutres. D'accord ? Donc je vais dire que je vais le remplir. En plus, ce sera mon Nu neutre. Je n'ai pas de colonne vertébrale neutre, veuillez patienter. C'est bon, maintenant. Je vais donc te voir et me frayer un chemin jusqu'à 100. Ça va être 300, 500, 709 cents. Nous allons donc accélérer cela ensemble. C'est bon. J' ai pris mes couleurs. La prochaine chose que je veux faire, c'est les ranger. 3057 ingrédients probablement juste descendre au bas de l'échelle Je vais m'en servir le moins. 57 300, c'est dépasser 700 peu importe la façon dont vous les commandez. Assurez-vous simplement que vous n'avez rien sélectionné en arrière-plan pour obtenir les styles de couleurs, il y en a un, tous ces gars. Génial Une chose que vous auriez pu faire, c'est de faire attention. Tu vas ici , puis tu appuies sur Plus. Parfois, vous voulez simplement appuyer sur le signe plus, et vous vous retrouvez avec deux remplissages. Pour vous débarrasser de deux remplissages, vous pouvez le fermer ou appuyer sur le petit bouton « moins ». C'est bon. Nous avons une palette de couleurs. Imaginez-nous avec des designers d'expérience utilisateur sophistiqués, et nous avons une palette de couleurs sur laquelle travailler, et nous les avons transformées en styles. Regardez-nous. C'est bon. Commençons à mettre ces choses en pratique. Je vais voir dans la prochaine vidéo. 39. Projet de cours 07 - Couleurs et colonnes: Bonjour. Nous n'avons pas réalisé de projet de classe depuis un petit moment. C'est l'heure. J'ai regroupé les couleurs et les colonnes parce que le projet de classe des colonnes est ennuyeux et celui des couleurs est passionnant. C'est la partie ennuyeuse. Je veux que vous parcouriez et ajoutiez vos colonnes. Tout d'abord, créez un mobile et un ordinateur de bureau Hi Fi. Nous avons créé la version filaire plus tôt Vous devriez être au nombre de cinq Assurez-vous que votre document figure bien dans votre brouillon afin de pouvoir ajouter plus d'une page ou plus de trois pages OK, je vous l'ai montré dans les vidéos précédentes. Ensuite, je veux que vous ajoutiez quatre cadres sur ces pages, nos quatre pages. OK ? Donc, notre page d'accueil, les détails du produit, la page de paiement et la confirmation, à la fois pour ordinateur de bureau et mobile. Permettez-moi de vous montrer rapidement. J'ai donc ces deux pages, mobile et ordinateur, passez une page pour les voir toutes. Alors, bercez ces pages. Il devrait y en avoir quatre pour chacune, et je veux que vous ajoutiez les colonnes aux deux. OK, sur mobile et sur ordinateur. Numéro 6 sur mobile, 12 sur ordinateur. Et vous pouvez décider de la gouttière et de la marge. Cela dépend entièrement de vous. OK, alors ce sont des couleurs de bits excitantes. Je veux que vous passiez en revue et dessiniez une palette de couleurs comme celle-ci Je vais la sélectionner, appuyer sur Shift 2, mettre ce que j'ai sélectionné au premier plan. Je veux que tu le crées. Vous avez une couleur primaire , secondaire et tertiaire ou une couleur d'accent. Peu importe le nom que tu lui donnes. N'oubliez pas que nous voulons une version moyenne, foncée et claire, et je veux que vous les transformiez en styles. Alors voilà. Vous pouvez utiliser une numérotation différente, un, deux, trois, j'utilise l'échelle des centaines Lorsque vous aurez terminé, assurez-vous de les faire glisser qu'ils aient du sens pour vous, un peu d'ordre. Fais aussi les gris Nous les appelons neutres et au moins un dégradé. Lorsque vous aurez terminé, je veux que vous preniez une capture d'écran de tout cela parce que je veux voir vos couleurs, mais aussi vos styles. Ensuite, téléchargez-le. Je n'ai pas tout saisi. Je veux récupérer tout ça. Jetons un coup d'œil aux projets de classe. Voilà, c'est là. Il existe un exemple de livrable, quelque chose comme ça. Couleurs. Mais ne vous inquiétez pas, si vous préférez, les couleurs se séparent. Je ne sais pas ce que je vais faire. Nous pouvons les ajuster tout au long du cours. Au fur et à mesure, vous pouvez les ajuster assez facilement, membre, car nous avons des styles. Ça va. Vous pouvez obtenir les couleurs sur votre tableau de déménagement ou le site Color Inspiration. L'endroit où tu trouves tes couleurs ne me dérange pas. Ne vous inquiétez pas de m'envoyer une capture d'écran de vos colonnes. J'ai confiance que tu l'as fait. Mais je veux voir cela pour votre projet de classe. Très bien, va créer des couleurs. Si vous ne l'avez pas déjà fait, mettez-les bien ordre et assurez-vous qu'il y a également un dégradé Je n'ai pas le mien là-bas. En fait, je dois le mettre à jour. Il s'agit d'une ancienne version de mes couleurs. Voilà. C'est la bonne. C'est bon. Profitez de créer des couleurs et de vieilles colonnes ennuyeuses. Je vais voir dans la prochaine vidéo. 40. Polices manquantes dans le navigateur Figma: Cette courte vidéo s'adresse à tous ceux qui utilisent Figma dans le navigateur et non dans l'application de bureau L'application de bureau n'a pas besoin de cette vidéo. Si vous utilisez la version du navigateur, et vous finirez probablement par le faire, il peut arriver que des polices soient manquantes. Et tout ce que vous avez à faire, c'est assez simple, vous allez sur figma.com slash Downloads et vous l'installez. Redémarrez le navigateur. Permettez-moi de donner un peu plus de détails à ceux qui sont intéressés. Sautez dedans. C'est facile Accédez à figma.com slash Trouvez le programme d'installation de polices correspondant à votre système d'exploitation, installez-le, puis fermez votre navigateur, rouvrez-le et il apparaîtra Un peu plus de détails sont les deux versions de Figma que vous pouvez utiliser Il y en a un pour ordinateur que vous pouvez télécharger. Hé, c'est celui-ci. C'est quelque chose qui fonctionne sur mon bureau. C'est très similaire à la version du navigateur, que j' utilise dans Chrome. OK ? Et ils se ressemblent. Une petite différence, c'est que j'ai oublié que cette version du navigateur ne possède pas le petit bouton d'accueil, que j'ai mentionné à quelques reprises dans le cours. Le voilà donc, le bouton d'accueil. Ça n'en a pas. Vous vous souvenez que vous allez dans Fichiers et revenez aux fichiers pour arriver au même endroit. Mais la version de bureau, celle-ci ici, en a. Bizarre et contient toutes les polices que j'ai installées sur mon ordinateur. Ce n'est pas le cas de ce navigateur. Il ne contient qu'un certain nombre de polices, aucune n'est installée sur votre machine. Tout ce que vous avez à faire est de l'installer , puis de fermer votre navigateur, le rouvrir et toutes les polices que vous avez téléchargées ou achetées apparaîtront dans Figma Facile, soyez tranquille. C' est ça. Continuez. 41. Quelles polices puis-je utiliser ? Ainsi que l'appariement de polices dans Figma: Dans cette vidéo, nous allons voir quelles polices je peux utiliser sur mon site Web et mon application. Nous examinerons les polices Google et nous examinerons également appariement de polices, un moyen de combiner deux polices différentes qui se marient bien ensemble M. Bin. C'est bon. Quand tu es dans le domaine, c'est ce que je veux. Lorsque vous tapez dans Figma, vous recevez un tas de polices préchargées et vous vous demandez : « D'où viennent-elles ? En gros, ils proviennent tous de Google Fonts. Google a fourni au monde et à Internet un tas de polices gratuites à usage commercial, et vous y trouverez probablement quelque chose qui fonctionnera pour vous. Si vous souhaitez installer votre propre police, vous devez juste faire attention. Imaginons que vous trouviez une police ailleurs et que vous l'installiez sur votre machine. Il vous suffit de vous assurer que vous disposez d'une licence commerciale pour l'utiliser. N'aie pas peur d'acheter des polices comme celles que j'ai achetées l'autre jour, Clem, j'adore cette fonderie Si le site Web aussi. C'est très cool. Disons qu'American Grotesque est celui que je veux. C'est tout simplement parfait pour la marque, quelque chose que je veux utiliser quand il s'agit de l'acheter. C'est celui que j'ai acheté. J'ai acheté Geograph et je l'ai acheté à l'origine uniquement pour ordinateur de bureau Cinq utilisateurs peuvent l'utiliser et je peux l'utiliser sur mon ordinateur et le faire pour toutes sortes de documents imprimés. Je l'utilisais pour un t-shirt. Quelles sont les polices que je veux, je choisis celles que je porte, j'en veux une fine et régulière. Vous voyez que vous payez en fait pour chaque police. Vous pouvez les acheter moins chers en pack, mais nous les achetons. N'ayez pas peur d'acheter, mais il y a beaucoup de bons trucs gratuits en ligne. Maintenant, la chose à vérifier, c' est que je n'ai pas pu le parcourir sur mon site Web. Je dois utiliser la licence Web, et je dois payer pour cela. Je dois m'assurer attention à la police que je vends à mon client. S'ils disent : « Oh, oui, c'est génial. Ensuite, tu vas essayer de l'utiliser. Soit ça va avoir des problèmes, soit ça va coûter cher, peut-être que c'est dans le budget. Vous devez vous assurer que vous avez les droits nécessaires pour l'utiliser sur votre site Web. Revenons aux éléments gratuits intégrés à Google. En gros, ils viennent tous de fonts.google.com . Ils sont tous préchargés dans Figma, et c'est tout ce que vous devez vraiment savoir à ce sujet Mais ensuite, vous arrivez à savoir quelles polices dois-je choisir ? Vous avez peut-être déjà un penchant pour les entreprises et vous recherchez une police qui va avec. Le terme que vous recherchez est appariement de polices. Si vous débutez dans le domaine des polices, ce terme peut être très utile et vous pouvez rechercher des pings Google sur Internet Je suis dans le slash de figma.com. Google Hyphen Fonts et Figma a fait quelques associations de polices et va juste vous montrer Jetons un coup d'œil à une police que j'utilise beaucoup. Chemin de fer. Jetons-y un coup d'œil , trouvons le jumelage. Ce qu'ils vont faire, c'est comme, est-ce pas, vous aimez Railway ? Quelles sont les polices qui vont avec ? Voulez-vous une police Serif, c' est-à-dire celles avec petits pieds ou Sand Serif ? Il n'a pas le. J'aime beaucoup cette page car elle ne me donne pas de très bons exemples. Tu pourras éventuellement y arriver. Regarde ça. Si j'ouvre Railway Plus, essayons Merryweather. Il est ouvert à l'intérieur de mon navigateur. En gros, j'utilise Figma maintenant. C'est copié dans mes brouillons et ils vous ont donné des exemples de A, c'est un Merywther, il contient juste quelques notions de base Ce que j'aime voir, c'est simplement rechercher sur Internet des paires de polices intéressantes Je viens de cliquer sur un tas de résultats Google. L'une d'elles vient de Google lui-même et elle vous montre simplement : écoutez, ces deux polices combinées pourraient être pour vous. Quelles sont ces polices ? Ce n'est pas un très bon site. Sites que j'aime fontpa.co C'est plutôt bon. Vous pouvez commencer à voir, n'est-ce pas ? C'est bon. Lesquels est-ce que j'aime ensemble ? Vous en êtes peut-être au stade de la conception ou de la conception du logo, et vous vous dites « oh, j'aime bien les deux ensemble ». J'aime encore plus quand il y a des exemples. Je viens de trouver celui-ci. Juste une page de blog aléatoire. Il se peut donc que cela soit là ou non à votre retour. Mais cela me donne d'autres exemples. Tu es du genre, oh, j'aime Playfair. Lequel dois-je utiliser avec la police Playfair with a Sands here C'est quoi ça ? C' est le Playfair Pass C'est quoi celui-ci ? Source Sands Pro. Le corps du texte est destiné à la source Sands Proro et peut-être que je ferai mes titres Peur. Tu peux juste faire le tour et partir, j'aime bien ça. J'aime bien ça. Encore une fois, il vous suffit de vous frayer un chemin en essayant de trouver de bons accords. Vous n'avez même pas besoin de les installer. Disons que nous avons affaire à Oswald ici. Si je vais dans FIGMA, vous constaterez que si j'entre ici et que je tape simplement Oz, Oswald est là. Je peux commencer à l'utiliser. Tu auras tous les poids. Il n'y a que quelques poids ici, mais vous voyez l'idée. Tout ce que je suis, c'est de retour du futur. Je veux juste ajouter ceci à la vidéo. Les gens posent des questions sur fonts.adobe.com. Vous possédez peut-être déjà une licence Adobe et vous utilisez des polices Adobe. Peux-tu les utiliser Figma ? Vous devez les télécharger et les installer comme vous le faites habituellement avec les polices Adobe. Si vous possédez l'application Creative Cloud, vous suffit de double-cliquer dessus qu'elle soit ajoutée à votre ordinateur. Si vous utilisez la version navigateur, comme dans la dernière vidéo, vous devez avoir installé le programme d' installation des polices pour qu'elles apparaissent dans la version navigateur de FIG. C'est ça. Le seul hic avec FigMa, désolé, les polices Adobe, c'est que vous pouvez les utiliser parce que vous avez une licence Adobe payante Vous devez donc conserver la licence pour continuer à utiliser leurs polices. C'est la seule mise en garde à leur sujet. De plus, si vous la partagez avec un autre concepteur, celui-ci doit également disposer de sa propre licence pour la police. Vous ne pouvez pas simplement leur donner la police. Mais il est très courant d'utiliser des polices Adobe. N'ayez pas peur d'eux, mais il vous suffit de vous assurer que vous êtes bien abonné à Adobe. C'est bon. Revenons à la vidéo. C'est juste une petite note sur la façon dont vous vous assurez d'avoir les bonnes polices à utiliser. Si vous avez une police payante, assurez-vous d'en obtenir la licence et si vous comptez utiliser une police Google, comment les associer pour qu'elles aient l'air cool ? Je fais du design depuis plus de 20 ans et je continue quand je cherche des choses. En particulier, si une entreprise m'offre une police, je vais essayer de trouver une police compatible avec elle afin de conserver leur police, mais aussi d'avoir une ou plusieurs polices supplémentaires que je pourrais utiliser tout au long du design, pour le pimenter un peu Je vais regarder l' appariement des polices. J'aime bien Oswald Je n'aime pas vraiment Oswald, d'habitude, parce que c'est normalement en gras Je suis du genre, mais très léger, c'est vraiment bon. Regarde ça. Tout ça, c'est tout. Savoureux. Je vous verrai dans la prochaine vidéo. 42. Quelles tailles de police courantes dois-je choisir en web design ? ?: Bonjour. Bienvenue. Hé, nous allons parler des tailles de police. Il existe des tailles très courantes à utiliser. Vous pouvez utiliser n'importe quelle taille. Mais il y en a quelques unes courantes à faire dans le domaine de la conception de sites Web et d'applications, et je vais les partager avec vous. Ensuite, nous passerons un peu de temps appliquer du texte aux premières parties de notre design. Nous allons créer notre sorte de boîte à héros, ces cartes en bas avec du texte dedans. Très bien, allons-y et allons-y. Bien, alors commençons par quelques polices. Je vais cliquer sur le Tiki, cliquer ici et je vais taper en appuyant sur un, puis je vais mettre un trait d'union puis un échantillon Peu importe ce que tu écris ici. Je vais appuyer sur Escape pour revenir à l'outil de déplacement afin de pouvoir le déplacer. Une fois sélectionnée, je vais dire, d' accord, quelle police est-ce que j'utilise ? J'ai opté pour quelque chose qui s'appelle Source Sans. Ça me plaît. Source Sans Pro, et pour mes titres, j'utilise une police en gras Maintenant, quelle doit être la taille de votre titre ? Vous voulez donc une gamme avec laquelle vous pouvez travailler. Souvent, le plus gros est 72. C'est assez gros. C'est à vous de décider. C'est souvent le cap zéro parce que je ne l'utilise pas très souvent. La prochaine meilleure taille et la plus grande taille pour un grand nombre de pages seront 48, ce sera mon titre . Pourquoi est-ce que je les nomme ? Juste pour que nous puissions avoir quelques règles, et nous allons créer des styles dans la prochaine vidéo, je vais être cohérent avec la taille de ma police Il est très courant d'avoir 72, 48 ou 32, c'est la taille suivante pour le titre deux. Alors j'ai un titre trois. Quelle doit être sa taille ? Ils peuvent être de n'importe quelle taille. Il est très courant d'utiliser ces tailles. Une fois que vous arrivez à la rubrique 4 , soit 18, vous ne descendez souvent pas plus bas que cela. Tu pourrais en avoir cinq. C'est à vous de décider et nous allons passer à quatre. Ensuite, le suivant est un corps de copie. Ici, celui-ci est souvent appelé paragraphe. Vous pouvez l'appeler « corps de texte » ou « paragraphe ». Allez, Dan. ici est normalement toujours pour un site Web, 16. C'est vraiment une bonne taille de départ. Certaines polices semblent plus grandes que d'autres, vous pouvez donc les ajuster. Vous devrez peut-être utiliser le 17 ou le 14, peu importe, et mon texte sera normal. C'est ce que je vais utiliser. Il est souvent bon d'avoir un échantillon comme celui-ci afin d'obtenir une certaine cohérence lors de la conception . Je suis juste en train d'aligner les miens maintenant parce que mais pour les avoir sur le côté, juste pour que vous puissiez vous en sortir et partir j'ai besoin d'un titre trois, puis de commencer à le changer. Je vais le faire avec mon texte marketing maintenant. Mais tu peux sauter le pas maintenant. Ce sont les tailles les plus courantes. Tu peux faire ce que tu veux. Une dernière chose, c' est qu'ils les appellent souvent, je ne vais pas utiliser celui-ci ici. Trop gros. Je vais le faire, je vais dire un H. C'est le raccourci pour un titre. Si vous n'utilisez pas le Web pendant un certain temps, vous saurez de quoi il s'agit. Si vous n'avez pas juste un raccourci pour indiquer clairement le troisième titre. Et le paragraphe s'appelle P. Ce sont mes tailles. Vous en avez peut-être un autre pour les termes et conditions, qui est limité à 14 ou 12. L'autre chose à faire est de vous assurer que vous êtes à 100 % lorsque vous recherchez les polices d'un navigateur, car elles seront représentatives de l'écran au moment de la publication. Si je fais un zoom arrière trop loin et que je dis : Oh, oui, je dois absolument me diriger vers zéro parce que cela ne semble pas si grand, vous êtes assez zoomé sur Être juste à 100 %, ce qui correspond au décalage zéro sur mon clavier, passe à 100 %. Et si vous utilisez un appareil mobile, n'oubliez pas que vous devez soit effectuer zoom arrière à peu près à la même taille, soit effectuer des tests sur votre téléphone portable avant entrer en retard. Disponible en deux tailles. C'est ça. Je vais faire un peu de production maintenant, donc vous pouvez passer à autre chose si vous ne vous contentez de la taille de police et que nous allons créer un petit nombre de pages, car il y a eu beaucoup de théorie Nous devons vraiment faire certaines choses. Je vais le faire sur ma page d'accueil, je vais récupérer mon outil de cadre. Je vais saisir un NAV de base et je vais choisir l'une de mes couleurs. Mon remplissage ici, je vais passer à mes couleurs de remplissage. Je vais passer à mes petits échantillons ici. Est-ce que nous le faisons ? Quoi qu'il en soit, cliquez sur les quatre points. Je vais choisir n'importe lequel d'entre eux. Vous pouvez y accéder d'une manière ou d'une autre, soit y aller, soit appuyer sur plus, puis entrer dans les couleurs de cette page. Vous devrez peut-être changer cette couleur ou vous pouvez, une fois sélectionnée, passer à la petite option ici et dire, en fait, que je vais utiliser cette couleur primaire. Mets-le dans un Nav. Je vais activer mes chroniques. Qui se souvient du raccourci ? Tu ne te souviens pas de Shift G. C'est vrai. Je vais l'apporter ici pour ma boîte à héros. Il s'agit de la partie principale du message marketing. Il y aura une image dessus et un peu de texte. Je vais fermer mes colonnes maintenant, Shift G. Je vais ajouter mon premier titre ici, je vais y ajouter mon marketing. Je vais en avoir pour moi, je vais dire un minimum. Je vais tout mettre en majuscules. En fait, le verrou des majuscules de mon clavier est cassé, mais nous savons comment y remédier. Nous allons donc opter pour un design minimal, un objectif maximal. Vous devrez créer votre propre message marketing lorsque nous y consacrerons un projet de classe, mais c'est ce que je vais utiliser. N'oubliez pas que je veux les mettre en majuscules. Je vais tout sélectionner. En fait, dans mon raccourci pour les gouverner tous. Shift K ne fonctionnera pas lorsque je suis dans mon outil de saisie. Je vais donc appuyer sur Escape pour en sortir. Il est toujours sélectionné, mais le texte n'est pas surligné. Maintenant je peux faire le Shift K. Ce n'est pas Shift K. Mon cerveau a disparu. C'est la commande K. Contrôler K sur un PC. Et je vais dire majuscules et les mettre toutes en majuscules Ce que je vais faire, vous n'êtes pas obligé c'est que je ne vais pas opter pour une police secondaire. Ce que je vais faire, c'est simplement mettre en gras pour les titres et non en gras pour le texte des paragraphes. Vous pourriez avoir une deuxième police, c'est très bien. Vous pouvez en avoir un peu exagéré pour la frappe et quelque chose d'un peu plus simple pour le corps du texte ou vice versa. Ce que je vais faire, c'est simplement opter pour une version allégée. C'est ainsi que je vais éviter d'avoir deux polices. Je vais juste utiliser la même police avec des poids différents. J'ai donc reçu mon message marketing, et ce que je vais faire, c'est créer mes petites boîtes de fonctionnalités ici. Ce que je vais faire, c'est réactiver un réseau. Je vais probablement simplement le copier-coller, et je vais créer la boîte de fonctionnalités. Ils les appellent des cartes ou des boîtes à fonctionnalités. Et ici, je vais changer ce titre pour en faire un titre différent. Je vais dire que vous l'êtes, c'est quoi celui-ci ? C'est 24. Cela semble juste. 24 ans, c'est mitigé. Je vais juste passer au gras, et je vais taper certains titres de fonctionnalités. Nous pourrions utiliser du texte de remplacement ici, mais nous sommes dans la version haute fidélité J'ai juste le mien sur une autre page ici. Je les ai dactylographiés. Je vais te demander de le faire un petit peu, mais je vais me diriger vers celui-ci. En-tête. Ça va descendre en bas je vais mettre une image en haut ici. Maintenant, je vais le dupliquer. Je vais en choisir une, Command D, contrôler le NRPC et je vais juste les taper Je vais passer en mode rapide. Je vais sélectionner toutes les miennes. Il suffit de maintenir la touche Maj enfoncée et de double-cliquer dessus pour dire que vous êtes centré en termes d'alignement du texte. Lorsque j'ajoute du texte, au lieu de sortir par la gauche, il part du centre. Vous savez à quel point le centrage fonctionnait et je dois dire que vous et vous allez être celui-ci ici, cet alignement. Vous étiez ensemble. Cela n'a pas marché. Il l'a placé quelque part en dessous. C'est par défaut. C'est une bonne chose intéressante. Avec ces deux options sélectionnées, en fait, non, avec juste le texte sélectionné à l'intérieur du cadre, je devrais être capable de le centrer. Voilà. C'est une bonne chose à savoir. S'ils sont superposés, vous pouvez les centrer. Mais ce que je vais faire, c'est dire : je clique simplement sur le texte, je vais le centrer et il centrera dans le cadre. C'est bon. Y a-t-il autre chose que je voudrais faire avant de passer à autre chose ? Ça va être ça. C' est ainsi que l'on choisit les tailles de police. Nous avons maintenant développé une petite partie de notre projet de design. Je vais passer à Shift G pour désactiver les colonnes. J'ai besoin de jouer avec l'espacement, mais c'est suffisant pour cette vidéo Nous vous verrons bientôt. 43. Comment réaliser un style de caractère dans Figma: Bonjour. Hé, dans cette vidéo, nous allons créer ces styles de caractères. Nous avons défini nos rubriques dans la dernière vidéo. Nous allons maintenant les transformer en styles réutilisables, comme les couleurs que nous avons utilisées précédemment, sorte que lorsque nous en ajustons un, faisons-le et changeons la police. Vous verrez que tous les cas d'utilisation changent ici. Script en forme de pinceau, oh. Annuler annuler. Passons à l'action et apprenons à créer des styles de texte dans un Figma Très bien, transforme-les en styles. Passons à notre premier article, KOH one, et passons à la typographie. Tout comme couleur S, ces petits points dans le coin, ce sont les styles Je vais cliquer dessus, et je vais dire, ajoutons-en un. Quels sont les autres ici ? Ils viennent de have a look. Le matériau trois peut être le matériau quatre ou cinq selon l'avenir, et c'est pourquoi Google crée ses polices de caractères. Ils utilisent ce système de conception appelé matériau. Au lieu de l'appeler Android, ils l'appellent matériel. Si vous faites défiler l'écran vers le bas, vous trouverez tous ceux d'IOS. Si vous concevez des applications, vous pouvez simplement sauter celles-ci et commencer à les utiliser. IOS, et c'est probablement ça. Quelqu'un d' autre a des trucs là-dedans ? Nous allons les ignorer. Nous allons créer le nôtre. Repartons à zéro. Une fois cette sélection sélectionnée, nous allons passer aux styles. Nous allons dire « plus », comme nous l'avons fait avec la couleur, et nous allons dire que celle-ci sera mon titre et que vous pouvez ajouter une description si vous en avez besoin. Ce que nous avons et où l'utiliser est clair , car il ne s'agit que du titre, mais je vais créer le style. C'est bon. Pourquoi est-ce bien ? Cela signifie que vous pouvez faire le tour et repartir, c'est vrai, celui-ci doit être le style « titre un ». Je n'ai pas besoin de savoir quelles sont les tailles et quel est le poids. Je peux simplement entrer dans mes styles et dire que vous vous dirigez vers l'un d'entre eux. Voilà, c'est là. Boum, c'est trop gros. OK, mais tu vois l'idée. Vous pouvez créer des styles. Si vous n'avez rien sélectionné, vous verrez tous les styles apparaître avec vos styles de couleurs. Salut, les gars, je vais aussi faire le titre 2, et je vais vous montrer l'un des avantages. Créons-le et appelons-le titre deux. OK, je vais aller l'appliquer ici, je vais maintenir ma touche de commande enfoncée et la touche Shift. N'oubliez pas que nous avons déjà examiné cette question. Si vous maintenez la touche Commande enfoncée ou la touche Ctrl sur un PC, plonge dans ce cadre contenant ce texte au lieu de double-cliquer dessus. Mais si je maintenais également la touche Maj enfoncée, cela signifie qu'il sélectionnera plus d' une chose à la fois. Je vais juste cliquer, cliquer, cliquer, cliquer. C'est le changement de commande sur un Mac, le changement de contrôle sur un PC. Ce que je vais faire, c'est dire que vous êtes maintenant dans le style du titre deux. Oh. Le style n'est pas en majuscules, c'est parti Je vais faire comme si ça faisait partie du cours. Ce que nous allons faire, c'est dire le titre deux, en fait, tous mes titres sont en minuscules Disons que ce sera ma règle, donc je n'ai pas à la changer plus tard. Pour modifier un style, le client revient et indique qu' doit être en majuscules et dans une police différente C'était mon plan initial. Ce que vous pouvez faire, c' est adapter vos styles. Je n'ai rien sélectionné. Rien n'est sélectionné, je peux voir mes styles. Je suis dans le design, pas dans le prototype, et je peux passer à celui-ci dans le titre deux, et je peux appuyer sur le petit bouton de modification du style. Il n'y en a pas beaucoup là-bas. Je peux cliquer sur les petits points et dire, accord, je veux qu'ils soient tous en majuscules. Pouvez-vous voir ce changement, ce changement, ce changement ? Le client pourrait revenir et dire : je n'aime pas la sauce Sands Pro ou peut-être qu'elle n'est tout simplement pas assez lourde. Nous voulons que ce soit la version noire et vous pouvez voir qu'ils se présentent tous comme il se doit, ou le client revient et dit : « Très bien, c'est l'heure de passer à Comic Sans ». Et tu démissionnes parce que tu ne peux pas vivre avec la bande dessinée Sands sur fond violet. Tu as eu l' idée ? Annulez rapidement. Je vais m' y rendre. Je ne vais pas tous les passer en revue. Maintenant, une chose que je veux faire avant de les créer toutes, c'est que vous pourriez avoir deux polices. Ce ne serait pas courant, mais vous pourriez vous retrouver avec deux styles de titre, l'un plus informatif et l'autre plus marketing. Vous avez peut-être trouvé une police. Un autre bon conseil est que si un titre lui est appliqué, un style lui est appliqué. Désolée. Vous pouvez aller ici et dire : « Ce titre, je peux le modifier ». Mais je peux aussi le casser. C'est toujours la bonne taille dans la même police. Ce n'est tout simplement pas lié à ce style maintenant. Si je change de style, allons-y et changeons-le. Il a la même apparence, mais si je le change, appuyant sur le style et que je le change en clair, vous remarquerez que cela a changé, mais pas celui-ci parce que j'ai rompu ce lien. Je vais annuler ça, passer au style. J'ai rompu le lien, et je ne me souviendrai plus de ce que je fais. Je vous en prie, oh, oui, c'est vrai. Nous étions en train de créer une taille de police différente. Je vais taper ici toutes les polices. Ici, je vais parler des polices populaires, des polices Google. J'aimerais vraiment qu'il y ait de meilleurs filtres ici. Ça ne l'est pas. Je vais juste taper à la main et j'espère trouver une police dessinée à la main. Si je peux taper à la main. Allez, Dan. Très bien, je vais donc opter pour celui-ci, Figma hand, Fast Hand Disons que c'est rapide et je n'aime pas ça. Veuillez patienter. Ça me plaît, une autre main. C'est cool. Supposons que vous ayez besoin d' un titre de police d'information régulier et que vous ayez besoin d'un titre de style marketing publicitaire plus descriptif. Ce que vous pouvez faire, c'est avoir un H, et vous pouvez avoir un H, vous pouvez le nommer comme vous voulez, mais nous allons appeler le nôtre un H un Alt comme alternative. Lorsque vous créez ce style, vous pouvez faire la même chose. Je vais faire un hit de style plus, et je vais appeler celui-ci titre 1, Alt. J'en ai deux, donc je peux monter ici et dire, en fait, que cet objectif multiple ou maximal peut être le style de ce titre 1 Alt. Celui-ci va être en tête d'un article régulier, dont j'ai besoin pour préparer un dossier. Je vais donc passer par ici et relooker tout cela, aussi bien Je commence à aimer ce truc à la main. Je vais le faire et me frayer un chemin en créant tous les styles. Vous devriez en avoir cinq au total. Je vais finir par en avoir six parce que je veux ce style de titre alternatif. En fait, avant cela, il y a une chose qui ne va pas avec le style de titre, c'est de regarder ça. Je fais deux ou trois choses. Passons en revue, assurons-nous qu'il s'agit d'un titre. Je vais modifier cette rubrique. En fait, je ne peux pas être là. C'est une autre chose intéressante, toutes sortes de choses intéressantes qui surgissent. Ici, si j'ai celui-ci, qui n'est pas un style, j'ai beaucoup d'options de type. Si je clique sur quelque chose qui est déjà un échantillon, voyez-vous, je n'ai que des éléments tels que l'alignement et quelques ajustements de ligne. C'est tout parce que tout est lié au style. Cela le limite. Tu peux le casser et continuer à bouger. Ce que je vais faire, c'est tout d'abord, mettre à jour celui-ci, rien n'est sélectionné, je vais passer au premier titre , je vais dire que vous devez être prêt au plus vite Sympa. J'ai donc celui-ci. Disons que je vais le prendre et le mettre sur une autre page, mais je dois être d'une couleur différente. De toute évidence, le blanc n'est pas bon ici. Je vais le rendre rouge. Et comme rien n'est sélectionné, si je dois ajuster mon titre maintenant, regardez. J'ai besoin d'en changer la taille de police . Faisons en sorte qu'il soit vraiment petit. je le fais, vous remarquerez que c' est devenu très petit, mais qu'il a conservé sa couleur. La couleur ne vient donc pas au rendez-vous. Il ajuste simplement les mécanismes réels de la taille de la police, mise en conserve, du début, Je vais maintenant passer en mode rapide et créer tout mon. Je vais tout annuler. Je vais créer tous mes styles et je vous verrai dans une seconde. Attends là-bas. Très bien, j'en ai créé un tas. L'une des choses que je veux partager, c'est que cette police à 100 % correspond vraiment à la taille. Je ne vais même pas créer de style pour cela, juste au cas où la prochaine personne dirait, oh, je suis autorisé à utiliser le titre quatre. Tu n'es pas autorisé à le faire. J'ai décidé. Pouvez-vous voir comment cette police se trouve ici ? Ils ont la même taille. Ils ont tous les deux 48 ans. est plus difficile à lire à cette taille. C'est la même hauteur. C'est beaucoup plus étroit. J'ai décidé de ne pas le rendre vraiment petit et je ne veux vraiment pas qu'il soit utilisé comme paragraphe. Mes chiens. Si nous regardons ici, j' ai le cap sur un, deux et trois, mais rien d'autre. Une autre chose est que ces styles sont créés dans l'ordre dans lequel vous les avez créés ou qu'ils sont répertoriés ici. Nous devons les traîner partout. Je veux aller un, deux, trois là-haut, quatre là-haut. Alors probablement le paragraphe en haut parce que c'est celui que j'utilise le plus. Un, deux, trois, quatre, puis j'ai un, deux, trois pour ces alternatives, vous n'avez pas besoin d'un autre type de police pour vos titres Il se peut que vous en ayez un pour votre paragraphe ou qu'il s'agisse d'une version en italique de Mais maintenant, nous avons un style et l'avantage de les utiliser dans le document Si nous devons apporter des modifications, nous allons ajuster un très gros fichier. En fait, vous découvrirez plus tard que nous pouvons le faire sur plusieurs documents et les partager avec d'autres collègues. Nous pouvons tous partager ces styles, ce qui est vraiment cool. Ce dont vous devez peut-être vous assurer c'est que vous les avez réellement appliqués. Parfois, vous créez votre style suite et il a la même taille, mais ce n'est pas lié. Je dois m' assurer que ce bit est connecté à mon titre, c' est-à-dire que celui-ci est connecté à mon ancien titre. Celui-ci est le bon. Ce sont toutes les deux rubriques, donc je suis prête à partir. Celui-ci l'est probablement aussi, mais je n'ai pas besoin de toi. C'est ça. Nous avons créé des styles de caractères ou des styles de caractères dans Figma. Nous sommes tellement professionnels. C'est bon. Je vous verrai dans la prochaine vidéo. 44. Lorem Ipsum et emplacement de texte réservé dans Figma ma: Dans cette vidéo, nous allons voir comment ajouter du texte d'espace réservé C'est juste utilisé pour tenir la place. Si nous n'en avons pas la copie, c'est juste un mélange de mots latins. Je vais vous montrer les bons endroits pour vous le procurer . Je vais vous montrer un plugin. C'est vraiment cool que ça s'appelle Content Real. Il contient ce texte d'espace réservé, mais il vous permet également parcourir et d' ajouter tout un tas de faux noms ou dates ou quoi d'autre ? Des adresses e-mail ? C'est où ? J'étais ici. Quoi qu'il en soit, les devises un très bon générateur de contenu aléatoire. Allons-y et voyons comment cela fonctionne. Très bien, alors ajoutons du texte de remplacement. Je vais appuyer sur la touche T, cliquer et faire glisser le pointeur parce que je veux mon message marketing soit ensuite un peu reproduit dans le corps du texte. Et selon la dernière police que vous avez utilisée, il se peut qu'elle soit probablement définie sur un titre. Une chose que je ne vous ai pas montrée, c'est vous pouvez simplement cliquer ici, puis cliquer dessus pour le modifier. Je vais mettre le mien en paragraphe. Si ce n'est pas dessus et qu'il est cassé, souvenez-vous que vous pouvez entrer ici et dire, je veux que ce soit un texte de paragraphe. Mycosa clignote là-dedans. Où puis-je trouver Laura Nipsm ? C'est le rite du passage qui se trouve de ce côté, lipsum.com, plein C'est moche. Mais c'est là que beaucoup de gens reçoivent des textos factices Tu peux entrer ici et dire : «   Très bien, qu'est-ce que je veux ? Je veux cinq paragraphes. En fait, je veux juste un paragraphe, générer, je vous donne juste un tas de textes que vous pouvez copier directement depuis le navigateur, ignorer les publicités. Et collez-le ici. Ce sont juste des mots latins mélangés qui ne veulent rien dire. Le problème avec son utilisation , c'est que lorsque vous l'envoyez au client parce que vous n'avez pas encore les textes protégés par le droit d'auteur, il n'avez pas encore les textes protégés par le droit d'auteur, se demande : « Qu'est-ce que c'est ? Elle est cassée. Il se peut donc que vous deviez l'expliquer. Mais c'est vraiment pratique car vous devez travailler sur des éléments tels que la hauteur et la mise en page de la ligne et donner au rédacteur quelques mots à saisir. Si vous avez laissé de l'espace pour 200 caractères, ils peuvent fonctionner en conséquence. Nous utilisons du texte d'espace réservé juste pour combler le trou plutôt que je ne sais pas Qu'avons-nous fait plus tôt ? je pense que X, l'une des Mais je pense que X, l'une des choses intéressantes, c'est qu'il y a un plug in. Il y a toujours un plugin, il y en a un vraiment bon. Il y en a plein pour un texte de commande. Disons que je veux la même chose ici, je veux un peu de texte. Je vais appuyer sur mon outil de saisie. Ça va aller ici. Je n'ai pas besoin de grand-chose. Je vais m' assurer de ne pas en manger deux par paragraphe, et je vais apporter un plugin. Les plugins se cachent ici dans votre panneau d'actions, je vais aller dans Plug-ins et je vais taper celui-ci intitulé Content Real, Content Real. Si vous tapez les ticks Uropsm ou Place Auto, tapez Lam, vous en trouverez beaucoup Encore une fois, vous regardez combien d'utilisateurs l'ont utilisé et aimé. C'est un moyen facile de savoir lequel est le plus populaire. Mais le contenu réel est très courant et vraiment génial car il contient un tas de choses différentes. Disons que je peux passer au texte, et je peux dire, avec mon curseur clignotant ici, que je vais l'aligner à gauche Je vais dire donne-moi un peu de Lornopsm. C'est là-dedans. Je n'ai pas besoin de tout ça. J'ai juste besoin de ce morceau, mettre un point final à la fin Et voilà. Il y a un plug in. Ce plugin est plutôt cool car il fait également d'autres choses. Je vais double-cliquer sur lui, faire une copie en maintenant enfoncée ma touche optionnelle. Je vais juste taper le mot sample. Je vais faire la taille de la boîte. Nous avons examiné la question tout à l'heure. Récapitulons Dès que c'est une case à hauteur fixe parce qu'elle va jusqu' en bas, je veux la remplacer par cette boîte automatique où elle correspond juste à la hauteur de ce que j'ai tapé dedans, pour m'en débarrasser Faites-en quelques copies, Escape to Get Out, faites-en glisser une vers l'extérieur en maintenant la touche enfoncée, Command D DDDD ou Control DD DDD. Je vais tous les sélectionner. Que fait-il ? Que nous montre-t-il ? Sous le texte, il y a ce nom complet. Si vous avez besoin d'un tas de noms aléatoires dans vos maquettes, vous pouvez simplement les obtenir ici Ou peut-être avez-vous besoin d'adresses américaines, d'adresses e-mail ou de dates. C'est vraiment pratique pour beaucoup de choses autres que Lauren Ibson Je vais annuler tout ça. Je n'en ai pas besoin, mais voilà. Texte de remplacement bon pendant que vous travaillez, comble une lacune, vous permet de continuer à concevoir, même si vous n'avez pas le texte. C'est vraiment génial pour vos wireframes. Utilisez-les simplement pour les maquettes, car vous ne voulez pas commencer à ajouter du texte car il ne s'agit pas de cela au stade du filaire et nous allons apprendre un autre plug-in Je vais fermer celui-ci. C'est bon. Passons à la vidéo suivante. 45. Utiliser l'IA pour créer du texte dans Figma: Ici. Bonjour, je vais vous montrer comment utiliser l' IA de Figmas pour créer des textes pour nous Nous lui avons donné un coup de main et il a publié des textes intéressants pour nos portefeuilles en cuir Il est facile à utiliser. Super utile. Laissez-moi vous montrer comment cela fonctionne. Tout d'abord. Ces fonctionnalités font actuellement partie du programme payant Figma, je passe donc à mon compte payant ici Nous allons probablement rester sur le compte payant pour le reste du cours. Je vais essayer de signaler tout ce qui est payant et non gratuit, mais je ne veux pas éviter les fonctionnalités payantes tout au long du cours. Si vous avez un compte gratuit et que vous voulez vous y tenir, vous pouvez simplement regarder certaines vidéos pour faire une idée de ce qui est bien. Cela vaut peut-être le coup ou c'est bon à savoir, mais je ne vais pas bien, alors j'ai changé de compte de paie. La vraie différence, c'est que si vous utilisez le compte gratuit, vous voyez cette icône changer, vous voyez cette icône changer, vous vous demandez à quoi cela sert ? Il s'agit de votre bouton Actions. Nous y sommes allés pour les plugins et les raccourcis. Ici, c'est pareil, mais c'est magique. C'est une capture d'écran que j'ai prise du compte gratuit. Juste par exemple, nous allons donc l'utiliser maintenant avec la magie. Oh, il y a une IA intégrée. Ce que nous allons faire, c'est du texte et de la rédaction. Je vais tout sélectionner, le supprimer. Ma malédiction clignote toujours là-dedans, pour appuyer sur ce bouton magique je vais utiliser l'option de réécriture de cette option C'est une version bêta. Cela va changer. Ils vont le renommer*****. Mais jetez un œil à l'option d'écriture. Je vais cliquer sur Réécrire ceci et je vais écrire quelque chose En fait, je l'ai pré-écrit. Tu manges là-bas. Allons-y. Écrivez une phrase pour la boîte à héros décrivant le design minimaliste du portefeuille en cuir. C'est ce sur quoi je travaille. J'ai besoin d'un copywriting. Je vais cliquer sur Réécrire, et ça va créer quelque chose Oh. Sympa. OK ? Vous pouvez l'utiliser pour la rédaction, comme hGBT, Gemini ou Claude ou tout autre outil d'IA que vous connaissez Il s'agit de votre première touche à l'IA. Plutôt incroyable. Vous pouvez faire des choses comme : « D'accord, je veux apporter des modifications ». Dans ce cas, je veux le rendre plus décontracté, s'il vous plaît. Cliquez sur Réécrire Oui, c'est plus décontracté. Vous pouvez faire des choses comme apporter des modifications et raccourcir, prolonger. Alors fais ces deux phrases. Est-ce que je l'épelle mal ? Juste deux phrases. Voilà. Je vais annuler, j'aime bien celui que j'avais avant. annulation fonctionne. Cool. L'IA est intégrée à Figma en différentes parties Nous aborderons quelques-uns d'entre eux. Mais ce truc de réécriture est parfait pour les textes de commande ou même simplement pour la rédaction, chose pour laquelle je ne suis pas douée, et je dois mettre des choses ici Je l'aime aussi pour le simple rangement. Je connais mon intention, aucun détail n'est laissé en suspens. Je ne sais pas Je viens de l' inventer et je me suis « Je me demande ce que dirait l'IA juste pour mettre de l'ordre Cliquez dessus, puis vous pouvez simplement taper rewrite, puis taper tidy not Puis cliquez sur Réécrire. Cela m'aidera à améliorer ma grammaire et mon orthographe. Je vais probablement y ajouter des Mdashs. Cela semble être son activité préférée. Mais oui, je trouve que c'est bien pour simplement resserrer mon travail au fur et à mesure. J'adore ça. Cette case doit être à hauteur automatique. C'est comme ça qu'ils l'appellent en fait. Oui, hauteur automatique. Celles de taille fixe. Cool. C'est bon. C'est l' IA intégrée à Figma Vous pouvez l'utiliser à la place du texte de remplacement. Si vous souhaitez réellement y mettre du contenu, cela sera utile. Mais ce sera différent quand tu arriveras ici. C'est nouveau et chic. Dites-moi dans les commentaires si c'est complètement différent. Je reviendrai et réécrirai celui-ci J'espère que cela ne devrait pas être trop difficile à trouver et à démarrer. Mais chaque fois que je me connecte à Figma, ils ont changé la façon dont l' interface et son fonctionnement ont changé. Voilà. C'est bon. Je vous verrai dans la prochaine vidéo. 46. Choses importantes à savoir sur le texte dans Figma ma: Bonjour Il s'agit de trucs et astuces de type légèrement avancé Tout ce dont vous aurez besoin pour le cours. Nous allons passer en revue et vous montrer comment jouer avec l'espacement des lettres, l' interligne, l'espacement des paragraphes Nous allons créer une petite maquette de logo, de listes, de liens. Je vais vous montrer comment ils fonctionnent en cliquant dessus. Je travaille alors. Oui, juste un tas de petites choses dont nous aurons besoin pour le cours et maintenant que nous avons certaines compétences que nous pouvons acquérir. Alors allons-y. C'est bon. Pour commencer, je suis sur ma page HyidelityHme. Je vais sélectionner ce bout de texte ici. Je l'ai juste copié et collé plusieurs fois. Nous avons donc quelques lignes supplémentaires sur lesquelles travailler. Je vais également le remplacer par cette zone de taille automatique, de hauteur automatique, afin qu'il devienne plus grand au même titre que mon texte. Examinons quelques fonctionnalités légèrement avancées. Ici, la hauteur d'une ligne correspond à l' espace entre mes lignes. Donc, sur Auto, si je clique sur Auto, la hauteur de ligne est de 20. Cela est basé sur le fait que cette taille de police est de 16. La valeur par défaut est plutôt bonne. Tu peux y aller et le modifier. Les règles de base correspondent donc à environ la moitié de ce que les tailles de police semblent généralement bonnes. Si vous avez 16, huit œuvres. Désolé, la moitié plus la police de caractères. 16 plus huit. Okay t'en donne 24. Ce n'est pas une science complète. Auto est vraiment très bon. C'est un peu plus strict, à vous de choisir, mais ce sont quelques règles de base L'autre point est là, vous pouvez utiliser des pourcentages, donc je pourrais utiliser 150 150. Si je tape simplement 150, cela suppose que j'utilise des pixels. Je dois taper le pourcentage, et cela me donnera la même mesure. Cela n'a pas vraiment d'importance. Ce qui est cool, c'est que si je l'augmente jusqu'à 20, cela augmentera la hauteur de la ligne. Annulez ça. Si vous voulez vous en débarrasser et revenir à Auto, il suffit de le supprimer d'ici, tout supprimer et d'appuyer sur Entrée, il reviendra à Auto. Examinons la différence entre la hauteur des lignes et l'espacement des paragraphes Je vais faire un retour. Je mets un retour après cela, vous pourriez être tenté de mettre un deuxième rendement en mauvais état. C'est vilain. Vous n'êtes pas autorisé à effectuer deux retours. La meilleure façon de le faire est de démarrer un seul retour, et je sélectionne l'ensemble de mon texte. Je peux entrer dans ces fonctionnalités avancées, et il y a une option ici qui indique l'espacement des paragraphes Il s'agit donc des espaces, non pas entre les lignes, mais entre vos paragraphes. Un paragraphe de vous a été renvoyé. Encore une fois, je vais mettre ce que tu voudras. La règle d'espacement des paragraphes correspond à environ la moitié de la taille des polices. C'est pourquoi j'ai confondu 16/2 c'est huit. Bon travail, Dan. Cela finit par ressembler à un joli saut de paragraphe. C'est à vous de décider si vous pensez que c'est une bonne chose. Si vous le gardez par multiples de huit, il peut être plus petit, il peut donc être de quatre. Tout ce qui est divisible par huit ou multiplié par huit est utile C'est juste plus tard que nous mettrons les choses en ordre. Lorsque nous serons très avancés, peut-être dans le cadre d' un cours d'imagination avancé, nous passerons en revue la grille en huit points pour aligner les éléments. C'est un peu ringard, mais en règle générale, essayez de garder un espacement de huit ou 8,5, Quelque chose qui fonctionne, encore une fois, vous pouvez le supprimer et appuyer sur Entrée et. Vous pouvez le mettre à zéro pour revenir en arrière. Vous ne pouvez pas utiliser de pourcentages ici. Vous faites peut-être quelque chose de pliable, regardez celui-ci, passez à celui-ci ici, et je vais fixer la hauteur et je dois la réduire Vous pouvez voir qu'il sort simplement de l'extérieur. Je m'écoule juste. Quel est même l'intérêt ? C'est pour que vous puissiez entrer dans la topographie et la tronquer Si vous voyez le point point à cet endroit, vous voulez probablement ajouter un bouton, dit « Lire la suite » pour l'ouvrir. Vous pouvez tronquer les paragraphes. Parmi les autres choses utiles, il y a des puces. Je vais revenir à la taille de la voiture, et je vais faire un retour, je vais aller chercher. Liste. Les listes sont également cachées ici. Ils n'étaient pas inventés. Maintenant ils le sont. Tu as des balles et des chiffres. Vous pouvez utiliser l'espacement entre les listes plutôt que l'espacement entre les lignes. Il s'agit spécifiquement de quatre listes. Encore une fois, je peux en inscrire huit ou peut-être quatre dans ce cas. Maintenant, je veux qu'il y espacement entre les paragraphes et je veux qu'il soit dit : que décidons-nous de huit ? Sympa. Je veux vous montrer l'espacement entre les lettres, donc je vais récupérer ma police, et je vais taper une sorte de logo d'espace réservé Vous pourriez créer votre logo dans Figma ou ailleurs, peut-être plus tard, lorsque vous aurez un peu amélioré vos compétences Mais si vous avez des compétences en Illustrator ou une autre affinité avec les logiciels, Canva, vous pouvez créer un logo Ce n'est pas habituel de créer des logos dans Figma, mais c'est possible D'accord ? Donc ce que je vais faire, c'est vous montrer ceci. Je vais choisir ma police. J'aime bien le côté zen de mon logo, et je vais en faire un autre. D'accord ? Tapez deux, et je vais mettre des watts. Walts sera le sable à sauce que nous avons utilisé tout à l'heure De la sauce. Ici c'est Source Aspro Très bien, évadez-vous, revenez à l'outil de déplacement et je vais simplement les aligner ici. Je vais aller le dimensionner. Rappelez-vous, comment dimensionner les polices ? Je veux juste le faire glisser vers le haut parce que je ne veux pas qu'il soit d'une taille spécifique. C'est un logo. J'essaie juste de le faire glisser. C'est exact. Le ketol appuie simplement sur la touche K de votre clavier et vous pouvez l'agrandir. Je vais faire en sorte que le mien soit à peu près aussi grand et mon portefeuille sera un peu plus petit. Mais pas avec le Ketol Dan. C'est bon. Allons-y. Très bien, voici donc ma petite maquette de logo Ce que je veux faire, c'est jouer avec. Vous voyez cet écart gênant entre les deux ? Cela arrive souvent avec mon nom, Scott. Les deux T finissent par se séparer. Ce que je peux faire, c'est sélectionner celui-ci en premier, et cela affectera l' espace juste après. Ici, j'ai un espacement entre les lettres. Regarde ça. Je peux simplement cliquer sur le bouton maintenir et le faire glisser, haut en bas pour l'espacement des lettres Tu vois ce que je fais ici ? Oh, c'est magique. Vous pourriez décider que le C pourrait être un peu plus proche parce qu'il s'enroule en quelque sorte dedans Les polices sont donc meilleures. Oh, est-ce que j'aime, non, c'est parce que je joue juste avec l'espacement des lettres, souvent appelé mise en conserve ou suivi, l'espacement des lettres ici Une autre chose que vous pouvez faire lorsque vous personnalisez des polices est que je vais en conserver une version, donc je l'ai simplement copiée Mais celui-ci ici, je dois dire, cliquez avec le bouton droit de la souris, il y a un moyen de le décrire Où est son contour ? Ce que je veux dire Ce qui s'est passé ici, c'est qu'il ne s' agit plus d'une police de caractères. Ce sont des formes qui ressemblent à une police de caractères. La bonne chose à ce sujet, c'est que je ne peux pas changer le texte, mais je peux y entrer. Double-cliquez plusieurs fois et je peux vraiment commencer à voir ces petits points ici. Je zoome encore plus loin. Et tu vois, je peux récupérer Shift, ces deux petits points. Il faut être assez près pour jouer avec les points. Écoute, je peux commencer à m'en mêler. Je peux dire que je veux que cela y participe. Je vais juste suivre le courant. Qu'est-ce que je fais ? Je ne suis pas sûr. Shift clique sur les deux, déplace-les d'un côté à l'autre. Je vais utiliser mes touches fléchées juste pour le toucher. Vous pouvez voir que vous pouvez commencer à décomposer les polices. Cliquez sur la commande du membre. Nous allons passer directement au sujet sur lequel vous travaillez. Parfois, c'est plus facile. Ça. Donc un petit peu plus. C'est bon. C'est cool. C'est bon. Le fait de définir des polices les transforme simplement en forme. Je l'utilise aussi assez souvent ici. Disons que je veux un petit plus, jetons un coup d'œil. Parfois, vous utilisez des polices, celle-ci était censée être une police, Scott, je voulais juste m'y intéresser. Prenons l'outil cercle, maintenons le bouton enfoncé, saisissons l'EllipsTol, maintenons la touche Shift enfoncée pour le faire glisser vers l'extérieur Je ne veux pas me rassasier et je veux un coup. Laissons tomber Shadow. trait va être blanc, et je vais en faire un poids à l'intérieur, je vais ajouter l'outil de saisie. Je vais cliquer une fois juste ici, je vais utiliser le plus. Je veux que cet avantage soit audacieux. Mais je ne veux plus que ce soit une police parce que c'est vraiment difficile à aligner. Vous voyez ici que je vais prendre mon Ktol, l'agrandir et ça marche Le problème, cependant, c' est que si je change de police, juste certaines, par exemple, je vais utiliser Comic Sans, je vais changer celle-ci parce que c'est un endroit qui peut être un peu difficile à aligner parce que c'est dans une grande zone de saisie parce que je ne l'utilise pas comme police, je vais juste cliquer dessus avec le bouton droit de la souris et dire, créer un je vais juste cliquer dessus avec le bouton droit de la souris et dire, contour Maintenant, il ne s'agit plus que d'une forme. Je peux décider, je vais m'y intéresser et décider que je ne sais pas pourquoi, mais je vais l'ajuster, mais surtout que je l'aime simplement en tant que forme. Parce qu'il est alors facile de saisir ceci et cela et aligner au centre plutôt que dans une police. Essayons de le faire avec une police. Est-ce que ça va marcher ? Je ferais mieux de ne pas le faire. OK, je prends ceci, ceci et je pars par là, et de cette façon, vous pouvez voir que c'est un peu décentré. Je vais donc revenir à ma jolie police. C'était décentré, Dan ? Faisons tous semblant que c'était le cas. D'accord ? Parfois, vous voulez simplement que la police soit une forme. Y parfumé, centré. Et groupons-le. Je vais l'encadrer, entrer dans un cadre. D'accord, nous l' utiliserons également plus tard. Donc, quand les gens cliquent dessus, ça passe à la page suivante. accord, d'autres choses intéressantes sur les polices de caractères, pendant que nous écoutons les nerd out. Regardez ceci. J'ai trouvé ce texte ici, et j'ai besoin d'un lien. Je vais mettre un lien entre crochets sans aucune raison valable. Je vais sélectionner ceci, et il y a une option ici. Pouvez-vous voir à côté du texte qu'il y a un petit élément spécial qui dit : « Hé, tu veux créer un lien ? D'accord ? Où est-ce que ça va aller ? Nous allons apporter notre propre ordinateur portable, Head Enter. Je vais aussi le rendre bleu simplement parce que je pense que polices doivent être des liens et doivent être bleues. Mon étui doit être légèrement plus clair que le bleu normal, car je ne suis pas sûr de le voir sur le violet. En fait, cela ne fonctionne pas vraiment, mais je vais aussi le sélectionner et c'est parti. Oh, j'ai ajouté un remplissage. J'en ai fait le plein ? Non, je n'ai pas sélectionné tout cela et je peux aussi passer en gras, donc c'est un autre raccourci. Au lieu d'aller en chercher la version audacieuse, c'est très bien. Mais la plupart des polices, si elles sont en gras, vous pouvez les sélectionner et simplement passer à Commande ou Contrôle B. Même chose en italique S'il y a un italique dans la police, si ce n'est pas le cas, ce ne sera pas B, j'utilise le soulignement, et je pense qu'il faut passer au shift X. C'est tout. Command Shift X ou Control Shift Six sur PC, nous allons passer à travers. Ce sont des trucs ringards qui fonctionnent sur tout ce qui se trouve sur votre ordinateur. Word, Google Docs, e-mails, commande B, I, UX. Vous pouvez les trouver ici. N'oubliez pas que vous avez des raccourcis clavier. Vous pouvez accéder au texte et vous trouverez le contenu où nous avons obtenu Underline. Il y a le lien de création que nous venons de créer. Voici le raccourci pour cela. Mais les soulignements en gras et en italique passent inaperçus. Mais ce qui est cool, c'est que si vous les apprenez, ils sont les mêmes sur toutes les publications assistée par ordinateur. Tout ce que je vais faire de Underline, c'est de ne pas utiliser d'italiques. Donnons-lui un aperçu juste pour voir comment cela fonctionne. Je vais y aller, Oh, oui, parce que les gens ne sauront pas comment fonctionne Link, Dan. C'est un peu flippant, du genre : « Hé, tu quittes Figma. C'est bon Voilà. Les liens fonctionnent. Je ne sais pas où j'ai dû le prouver. Un dernier qui, à mon avis, est vraiment utile comme raccourci, surtout lorsque vous n'êtes pas sûr des polices. Je vous ai donné une sorte de limite pour les polices de caractères, quelles devraient-elles être ? Il arrive souvent que vous n'en soyez tout simplement pas sûr. Vous pouvez sélectionner le texte et utiliser commande Shift sur un Mac, la commande Shift sur un PC. Et si vous pouvez voir en bas de votre clavier, vous avez un supérieur et un inférieur à. Sur mon clavier, ils sont confondus avec le point et la virgule Vous maintenez ces deux touches enfoncées, Command Shift ou Control Shift sur un PC. Cela ne fait que la taille de la police. J'adore ça. Parce que je suis à 100 %. Je suis du genre à avoir besoin d'être plus grand. Combien plus grand ? Il suffit de donner un pourboire, un pourboire, un pourboire, un pourboire, faire. Et encore une fois, c'est l'un de ces outils qui fonctionne dans pratiquement tous les logiciels de publication assistée par ordinateur. Vous pouvez simplement le saisir et l' agrandir . Il faut que ce type soit plus grand. Maintenant, ce type, j' essaie d'en utiliser un plus grand, qui ne fonctionne qu' avec les polices, non ? Ce n'est plus une police, je dois donc utiliser mon ketol et l'agrandir. Cliquez sur You Nice Chef. Cela devrait-il être parfumé ? Je ne suis pas sûr. Je vais utiliser des râteaux pour le déplacer. J'aime bien ça là-bas. Waouh. Cool. C'est bon, mes amis. C'est ça. Il s'agit de polices avancées, de trucs et astuces. Tout ce dont nous aurons besoin pour le cours. Passons à la vidéo suivante. Avant qu'il ne nous montre à nouveau comment utiliser Links. Regarde, ça clique. Je vais sur notre site Web. Euh. Très bien, vidéo suivante 47. Projet de cours 08 - Texte: Bien, il est temps de mettre en pratique ce que nous avons appris au cours des dernières vidéos. Projet de classe numéro huit, le texte. OK, donc je veux que tu crées un petit logo. Cela n'a pas besoin d'être chic à moins que vous ne le vouliez. Vous n'êtes pas obligé de le concevoir dans Figma. Concevez en fait Figma. Je veux que vous vous entraîniez avec les différents types d'outils que nous avons appris. Décrivez-le peut-être, vous n'êtes pas obligé. Et nous voulons quelque chose dans le coin supérieur gauche. Pas besoin d'être chic. J'ai fait quelques autres blocages faciles où vous pouvez simplement polices à titre d'exemple Vous êtes peut-être un grand designer et vous pouvez concevoir quelque chose de beau. Si vous recherchez simplement quelque chose de simple, juste du texte avec une différence de poids et une différence de couleur, quelque chose de simple. C'est à vous de décider, mais je veux que cela apparaisse sur votre page d'accueil. Sur votre page d'accueil de votre haute fidélité, je veux que vous fassiez ces bases. Vous avez besoin de votre message marketing texte d'espace réservé, et de quelques cartes, ce que nous ferons lors d'un rapport sexuel. En gros, quelque chose comme ça. Navong est le haut de votre boîte à héros, votre principal message marketing Trouvez quelque chose. Cela peut être nul, cela peut être très attentionné. Vous pouvez utiliser l'IA. Ça ne me dérange pas. OK, et puis du texte de remplacement. Cela peut être à nouveau UrinOpsumo, vous pouvez taper quelque chose, penser à quelque chose, utiliser l'IA Ça ne me dérange pas, mais je veux que tu utilises tes styles. Et ce que je veux que vous fassiez avec vos styles et vos styles de couleurs, c'est que vous créiez une page de guide de style. Figmaples peuvent devenir très compliqués, nous allons créer une page appelée Je vais juste y copier une palette de couleurs ainsi que nos polices. Je veux que tu les inventes, et que tu t' assures que ce sont des styles. Vous n'avez pas besoin d'en avoir deux. Il se peut que vous en ayez un. C'est très bien. Je veux que vous preniez une capture d'écran de tout cela et de votre page d'accueil. Sur votre page d'accueil, je veux que vous créiez également une carte. Je vais y retourner Ah, Do, Hi Fi. Cette carte est là. J'en ai fait un assez générique. Je veux que tu fasses une petite recherche sur ce que tu pourrais faire. En fait, je te veux là-haut. Copiez-le, entrez dans celui-ci, collez-le pour le remettre au bon endroit. OK ? Les cartes d'interface utilisateur sont donc un terme si vous débutez dans le domaine conception d' interface utilisateur. J'en ai quelques exemples dans vos fichiers d'exercices appelés exemples de cartes d'interface utilisateur. Juste quelques exemples que j' ai trouvés plutôt sympas. Je veux que tu ailles y jeter un œil toi-même. OK ? Il y a donc cette foule sur le site web que je vous ai montrée dans le dernier. C'est plutôt bien pour rechercher des cartes d'interface utilisateur. Allez au dribble, allez sur Pentrs, allez sur Instagram, allez partout où vous allez habituellement pour chercher informations et saisissez des exemples d'UIcard ou simplement de UIcard Il suffit de voir ce que les autres ont fait. une partie très courante de la conception de sites Web et de la conception d'applications et de trouver une solution. Tu peux copier ce que j'ai fait. C'est très bien Ou quelque chose qui figure dans les exemples ici, mais juste quelque chose de basique. Il n'a pas encore besoin d'images, je veux que vous les disposiez et j'en veux trois. Je ne suis pas sûr de les aimer. Ça n'a pas l'air bien, n'est-ce pas ? Retournez là où vous étiez. Voilà. Et j'en ai trois. Il se peut que vous deviez activer vos guides. Ne tuez pas Hitman H sur Mac. C'est parti. Voilà, vous revenez, et c'est le Command G alors. Pas de Shift G. Je veux trois cartes en bas. Vous pourriez jouer avec l'espacement pour que tout soit beau. Il faut le même en haut. En bas, examinons également trois fonctionnalités que votre produit pourrait avoir. Encore une fois, ne passez pas trop de temps à réfléchir aux fonctionnalités parfaites. J'ai utilisé Lauren Ipsum en bas, et nous avons juste une image ici Éclaircissez l'icône de l'image avant créer des images dans un instant . A c'est ça ? Vérifions-le. Déplacez vos styles vers un style GoodEpagerSearch, cartes d' interface utilisateur, jetez-y un petit coup d'œil Vous pouvez décider si vous voulez choisir entre trois ou quatre cartes de fonctionnalités. Exemples dans les fichiers d'exercices, les livrables. Prenez une capture d'écran de votre page d'accueil et votre page de guide de style ou du moins de la partie qui s'y trouve Ensuite, je veux que vous partagiez sur les devoirs, les projets et les devoirs, mais je veux aussi que vous les partagiez sur les réseaux sociaux maintenant. Nous en sommes arrivés à un point où vous vous dites Ce ne sont pas toutes les mêmes choses. Ce sont des projets ennuyeux, ennuyeux. Ils ne sont pas spécifiques à vous et à votre produit. Nous en sommes maintenant arrivés à ce stade. Je veux que tu partages également sur les réseaux sociaux. J'adore voir ce que tu as fait, et il y a un bon public qui dit : « Hé, c'est ce que je fais ». Je suis en train de suivre ce cours Figma Essentials donné par ce très beau kiwi de Nouvelle-Zélande Et c'est sur cela que nous travaillons. De plus, demandez des commentaires et donnez des commentaires. C'est le compromis. J'ai des gens qui m'aident, font appel à nos experts en ordinateurs portables pour apporter des réponses, mais c'est difficile d'y arriver. Nous avons croisé plus d'un million d'étudiants, vous pouvez donc imaginer que nous avons beaucoup à offrir. Donc, ce que nous faisons maintenant, c'est vous le demander. Nous nous assurons que si vous demandez un avis, vous devez en donner deux, cela vous sera plus utile. Être capable de vous exprimer avec les autres designers est une compétence très importante, surtout lorsque vous devez commencer à défendre ou à expliquer vos choix de design lorsque vous êtes de l'autre côté Installez le vôtre, demandez conseil et assurez-vous de trouver celui de quelques autres personnes et donnez-leur des conseils. C'est peut-être très mauvais au début. Tu vas t'améliorer. Les couleurs sont bonnes. Mais regardez ce que font les autres. J'aime bien le contraste. Je n'aime pas le contraste. La lisibilité n'est pas excellente. Assurez-vous simplement de le faire avec un peu d'humilité. Tout le monde ne fait que commencer. Ce que j'aime faire, c'est ce qu'on appelle le sandwich ****. Je ne suis pas sûr que cela puisse nous être utile. Tu commences par un point positif. J'aime bien ce que tu as fait pour ce moment précis. Ensuite, au milieu, la partie S du sandwich indique ce que je ferais ensuite, ce que vous pourriez faire plus loin, ou je pense qu'il va y avoir un problème de lisibilité, mais je pense que c'est une excellente première étape Tu vois le morceau de sandwich ? Positif à l'extérieur et critique au milieu. Tu sais ce que tu fais. Quoi qu'il en soit, c'est le projet. Nous allons créer notre page d'accueil, publier notre page Star go. Même si vous détestez vos polices et vos couleurs, ne vous inquiétez pas. Nous pourrons les modifier ultérieurement. Nous sommes vraiment en train d'apprendre les outils, alors lancez-vous, essayez-le, et je vous verrai dans la prochaine vidéo. 48. Texte sur un chemin courbe dans Figma ma: Bonjour à tous. Dans cette vidéo, je vais vous montrer comment taper sur un chemin. Écoutez, nous sommes en train de taper un chemin dans Figma. Laissez-moi vous montrer comment faire. pour commencer, dessinons-le sur le bord plutôt qu'à l'intérieur des cadres. Cela nous facilite un peu les choses pendant que nous travaillons. Et c'est une sorte de vidéo de transition où nous passons de la dactylographie à une du dessin, qui est la section suivante. Nous avons besoin d'un peu des deux parce que nous avons besoin d'une courbe. La meilleure façon de faire une courbe. Eh bien, le moyen le plus simple est de passer à ce mode de dessin en bas. Nous nous sommes intéressés au design. OK ? Nous ne sommes pas encore allés voir Dev. Oh, qu'y a-t-il là-dedans ? Ne cliquez pas dessus. Passez en mode dessin, c'est celui-ci ici. Pouvons-nous avoir des objets qui semblent secs. Nous allons maintenant commencer par le crayon. Prends le crayon, choisis une couleur. Je dois choisir une couleur blanche parce que je ne la vois pas en arrière-plan. À vous de choisir en termes de taille. C'est la largeur. Woo, cliquez à nouveau dessus. C' est l'épaisseur de la ligne. Cela n'a pas vraiment d'importance pour ce que nous faisons. Ce que nous allons faire, c'est cliquer sur maintien et faire glisser une ligne ondulée Figma n'est pas encore douée pour dessiner des lignes lisses. Je veux qu'il y ait une solution fluide. Oh. Dessine juste quelque chose. Dessine vite. Prêt ? Dessine vite. Non. Dessine vite. J'en ai eu un qui était bon. Ça fera l'affaire. OK, maintenant nous allons récupérer l'outil de saisie, ne nous reste plus qu'à le survoler OK, pouvez-vous voir la petite icône se transformer en petit nœud  ? Cliquez une fois. Maintenant, nous pouvons taper sur une courbe. Il devrait se retrouver au bon endroit. Si ce n'est pas le cas, il existe une option ici pour inverser l'orientation pour être l'autre côté. Ce n'est pas ce que je veux. Une autre chose utile, c'est que si je reviens à mon outil de déplacement, vous y verrez un petit point. Ce petit point blanc est en quelque sorte le point de départ. Tu peux jouer avec si c'est centré, d'accord ? Donc les petits points au milieu. OK ? Ainsi, lorsque vous commencerez à taper du texte, il partira du centre. Ce que je vais faire maintenant, c'est que vous pouvez faire n'importe quelle courbe, donc nous pouvons utiliser une ligne. En fait, une ligne n'est pas très utile. On pourrait utiliser une étoile. Cliquez et dessinez une étoile, saisissez l'outil de saisie. n'avez pas besoin de l'outil crayon, vous n'avez pas besoin d'être réellement en mode dessin. Nous allons revenir à la conception et à l'outil de saisie. Tant que vous le survolez, je le transformerai en chemin Appuyez sur Escape pour en sortir. Vous remarquerez que l'étoile a disparu. Avant de le faire, vous pourriez le copier de telle sorte que lorsque vous le transformez en chemin, échapperez pour en ressortir, je puisse le coller à nouveau. Le collage depuis le presse-papiers a échoué. Annuler, annuler, annuler, annuler, copier. J'allais d'abord le coller. Oh, j'ai échoué. D'accord, il n' aime pas copier les étoiles aujourd'hui. Ceci, copiez-collez. Oui, j'en ai deux. Bizarre. Il n'aime pas la star. C'est un bug pour moi, probablement seulement aujourd'hui. Je vais le laisser là parce que de telles choses se produisent. Mais normalement, il suffit de le copier et de le coller, vous en avez donc deux versions. Faisons quelque chose d'un peu plus gentil. Donc je vais, je vais me contenter de ce texte ici. Je fais ce second, je le copie, et je vais double-cliquer dessus et le coller dedans. Vous pouvez voir qu'il y a en quelque sorte deux bouts de texte dedans maintenant. En fait, je l'ai juste copié et collé pour avoir deux lignes différentes Je n'en ai pas vraiment remplacé un. Ils n'étaient que deux empilés l'un sur l'autre. Ce que je vais faire, c'est le faire et je vais faire le maximum d'efforts là où je veux que ce soit. Quelque chose comme ça. Bien, ce n'est pas ce que je veux. Mais c'est du type sur un chemin. Je vais passer du temps à le dessiner. Oh, c'était une bonne idée. Copiez ceci, prenez mon outil de saisie et vous verrez qu'il y a un trait blanc, ce trait blanc disparaîtra lorsqu'il sera transformé en texte sur un chemin. Je vais le sélectionner en ligne, l' agrandir un peu. Le raccourci pour cela est le changement de commande et le crochet. C'est ce que nous avons fait, n'est-ce pas ? Oui, nous avons fait le Control shift, pas le crochet, le plus grand et le moins que le péché. Je vais le faire et je m'en suis sortie, et je vais me débarrasser de toi. Et je vais déplacer ça. C'était mieux dans ma tête. Je vais le faire pivoter. Faites pivoter n'importe quoi avec cette option sélectionnée. Ici, vous ne pouvez pas survoler le pointeur sur les bords, mais uniquement sur l'extérieur. Tu vois ces petites flèches doubles ? OK ? Est-ce que ça nous plaît ? Oh, je vais me débrouiller. Oh, c'est terrible. OK, saisissons un chemin. Nous serons en mesure de tracer une ligne plus fluide une fois que nous serons entrés dans la section de dessin suivante, fois que nous serons entrés dans la section de dessin suivante lorsque nous commencerons à utiliser l'outil à épingle. Mais pour le moment, ça a l'air assez souple. Et c'est tout. Je vous verrai dans la prochaine vidéo. 49. Texte autour d'un badge circulaire dans Figma: Bonjour à tous. Nous allons faire en sorte que ce badge avec du texte passe en haut et en bas. L'astuce sournoise, c'est qu'il ne s'agit en fait que de deux cercles. Vous avez deux bouts de texte sur le même chemin. Il vous suffit donc d' en faire deux, de les retourner et de les aligner pour qu' ils ressemblent à ce qu'ils sont. Il y a quelques autres choses que je voudrais partager ici, comme le mode plan et quelques autres choses. Alors allons-y. D'accord, pour celle-ci, c'est la même technique que celle utilisée pour taper sur un chemin depuis la dernière vidéo, mais nous allons faire quelques petits extras pour y parvenir. Nous allons commencer par le fait que nous n'avons pas besoin d'être en mode tirage au sort. Nous avons juste besoin d'une ellipse, qui est l'Oki, qui ressemble à une ellipse Voilà. Oh, Oki et moi allons maintenir la touche Maj enfoncée pour que mon cercle soit parfaitement rond et non ovale Je vais prendre l'outil de saisie et je vais cliquer quelque part en haut pour qu'il se transforme en trajectoire Pas de surprise, Dan. Je vais faire 30 jours 30 jours. Lorsque vous créez des badges, il est plus facile de les mettre en majuscules. Si vous commencez à faire du haut et du bas, ils ont juste l'air bizarres. Et c'est à vous de décider. Le remboursement est-il un mot ? C'est aujourd'hui. Je vais sélectionner une taille de police plus appropriée. Je vais le déconnecter de mon en-tête et utiliser mon autre titre, qui est sourcens Vous pouvez voir que je peux jouer avec des choses comme l'espacement des lettres, ce qui est important lorsque vous essayez de contourner ce problème Je vais également utiliser une taille de police plus adaptée, quelque chose comme ça à l'espacement des lettres Si vous voulez vous débarrasser de ce que vous avez saisi, supprimez-le et appuyez sur Entrée, Oh, Non, tapez simplement et zéro L'une des choses que je veux faire, c'est frapper, m' échapper ou revenir à l'outil de déplacement. Tu as compris le point. Ce que je veux faire, c'est que je veux que tout soit centré et que ce soit à peu près là. Encore une fois, en ce qui concerne la taille de la police, je vais la réduire un peu. Maintenant, comment puis-je le mettre en bas, d'accord ? faut savoir, c'est que vous ne pouvez pas avoir plus d'un trait sur un cercle. J'ai donc besoin de deux cercles. Je vais donc le copier et le coller, donc j'en ai deux. Je vais les séparer, je vais les retourner puis je vais les faire pivoter. J' ai donc la pièce inférieure. OK ? Vous pouvez maintenir la touche Shift enfoncée pendant que vous effectuez une rotation. OK ? Vous pouvez le faire pivoter ici. Vous pouvez voir ici qu'il est écrit rotation 180, et je dois dire que j' besoin d'une garantie et que mon verrouillage des majuscules a cessé de fonctionner, donc j'ai eu un quart de travail complet à tout moment. Le seul problème, c'est que vous ne pouvez pas pour le moment avec Figma, jouer avec sa position sur la ligne Au moins, je n' ai pas trouvé comment faire. Il s'agit d'une nouvelle fonctionnalité pour cela. Ça a l'air bizarre, donc je vais devoir agrandir un peu l'ellipse et il suffit de les superposer. Je claque. Il est un peu difficile de voir où ils en sont maintenant parce qu'ils sont complètement transparents. Il y a un raccourci, d'accord ? Ou Commande Y ou Contrôle Y sur un PC. Waouh. Que s'est-il passé ? C'est ce qu' on appelle le mode plan, et c'est comme une invisibilité Non, des radiographies que je veux. Vous pouvez commencer à voir les choses et leurs grandes lignes. Vous ne pouvez malheureusement pas voir le texte pour certains d'entre eux, mais pas pour ces cercles ici. Ce que je vais faire maintenant, c'est si je voulais être parfaitement exagéré, vous pouvez voir ici que c'est un peu plus facile dans ce mode, et il vous suffit de basculer entre Commande ou Contrôle Y pour aligner les choses Alors je vais jouer avec. C'est tout pour taper sur un chemin. Je vais y aller et faire ma nièce. Tu peux me suivre si tu veux, comme tu veux. Je vais opter pour le gras, l' espacement des lettres ici doit être augmenté Juste pour mieux m'intégrer ici. Celui-là a l'air bien. Je vais prendre d'autres cercles, est arrivé l'Oki. Je peux faire l'une des deux choses suivantes. Je vais maintenir le quart de travail. Je peux soit faire quelque chose de central ici, maintenant à nouveau la touche Maj enfoncée, soit la mettre au milieu. Ça devrait craquer. C'est plutôt bon pour prendre des photos. Ensuite, je peux ajouter un trait vers l'extérieur. Je choisis n'importe quoi en ce moment, puis j' augmente simplement le poids pour avoir cette ligne autour de moi. Il passe en position intérieure en dehors du trait, et je vais continuer à m' agrandir de plus en plus. Jusqu'à ce qu'il y arrive, puis je vais utiliser mon raccourci, qui est le renvoi, vous pouvez cliquer avec le bouton droit de la souris, mémoriser, renvoyer ou les crochets ici. Vous pouvez le faire pour démarrer votre petit truc ou simplement faire deux cercles vers vous. Allons en bas de page. C'est juste un peu bizarre. Un autre petit avantage, si vous avez traîné dans les parages, c'est que lorsque je le fais glisser pour l'agrandir, je maintenais la touche Maj enfoncée pour qu'elle reste cercle, sinon elle devient bancale Mais si je maintiens ma touche Shift et le compteur d'options Mac enfoncés sur un PC, cela fait glisser le pointeur depuis le centre, ce qui peut être pratique, surtout pour l' aligner. Voilà. Je vais choisir quelques couleurs dans mon style. Au lieu de simplement choisir la couleur du trait au hasard, je vais passer à mes styles. Je vais dire que celui du centre sera un dégradé. Oh. J'ai ajouté ça au trait. Ce n'est pas ce que je voulais. Cliquez dessus. Je veux que ce soit lequel est-ce que je veux de l'extérieur ? Attends là en pensant à la couleur foncée. Au centre, le remplissage, je vais y aller et je vais choisir le dégradé. Fantaisie. C'est bon. Voilà comment en faire un badge où se trouvent les textes en haut et en bas. C'est juste une ruse. Ils se chevauchent simplement On dirait qu'ils suivent le même chemin, mais il ne s'agit pas simplement de deux cercles superposés Nous avons maintenant un badge. Les badges sont géniaux. C'est bon. C'est ça. Je vais voir dans la prochaine vidéo. 50. Comment utiliser les outils Crayon et Pinceau dans Figma: Bonjour, tout le monde. Nous allons tracer de nombreuses lignes, et nous allons les rendre toutes brossées et souples. Voici ma ligne de conduite. Il s'agit du crayon du pinceau et de certains de leurs réglages dans un figma Allons-y. L'outil à crayons et pinceaux. Nous avons un peu couvert l' outil à crayons. Nous allons passer à nos outils de dessin, et cela se fait en bas ici. L'outil crayon dessine avec le trait. Je vais choisir une meilleure couleur. Optons pour le blanc. OK, et en cliquant et en faisant glisser, nous obtenons un outil en forme de crayon. L'outil pinceau, en revanche, dessine avec ces traits de type plus stylistiques Je vais m'en tenir à Heist, puis cliquer et faire glisser. Oh, je dois choisir une couleur. C'est ce que nous allons faire. Vous pourrez les modifier par la suite. Mais en cliquant et en faisant glisser, encore une fois, j'attends la partie lissante qui se trouve peut-être ici J'espère qu'il y aura une mise à jour qui indiquera pouvons-nous dessiner plus facilement, ou peut-être que le dépliage est simplement plus fluide. Mais c'est plutôt cool, non ? J'aime bien les pinceaux. Les pinceaux masquent en quelque sorte certains problèmes de fluidité. Mais comme cet effet vraiment cool, vous pouvez les croiser. Regarde ça. Nous avons ce dessin que nous avons fait avec le crayon. Vous feriez mieux si vous avez une tablette Wacom ou une autre tablette de dessin Elles seront plus fluides. Mais ce que vous pouvez faire, c'est de les sélectionner. Vous pouvez aller ici jusqu'au bout, et il y a une option là-dedans. Regardez cette petite option de configuration et vous pourrez dire, en fait, que je veux qu'elle soit dynamique. Non, je veux que ce soit un pinceau. Vous remplacez celui-ci par un pinceau. Vous pouvez les parcourir et les sélectionner à l'aide du pinceau. Celui-là. Tu ne peux pas vraiment le voir. Tu vois que je dois augmenter l'épaisseur Vous pouvez également jouer avec une direction. L'autre chose que vous pouvez faire avec le crayon, désolé, c'est dessiner quelque chose. Je vais l'agrandir un peu. En fait, je vais devoir utiliser mon outil de sélection, le récupérer et l'agrandir un peu parce que je veux vous montrer certaines des autres fonctionnalités ici. C'est sous-dynamique. Tu peux le faire onduler. Vous pouvez baisser la fréquence et la rendre vraiment ondulée Un peu tordu. Il faut aussi jouer avec le coup. Donc Mme est peut-être un peu épaisse. La fréquence correspond à la force avec laquelle les tortillements sont tortillés et à leur hauteur Alors, quelle est leur distance l'un de l'autre, quelle est leur taille. Si nous zoomons un peu, vous devriez voir là où il est écrit « lisse » ou « lisser », vous pouvez les rendre nets ou très lisses. Vous pouvez ajouter des points de terminaison comme nos flèches, et je ne sais pas pourquoi nous en avons besoin ici, mais c'est là C'est bon. Ce que je vais faire, c'est que je vais vraiment détester ça. Je vais prendre ça et maintenant nous ne faisons que du travail de production. C'est tout pour le pinceau et le crayon. Suivez-nous si vous voulez vérifier cela. Je vais m'en débarrasser, remettre ça en place. Je ne fais que le copier et le coller. Ce que je veux faire, c'est mettre un espace entre eux et je ne suis pas sûre de ce que je veux, que ce soit le pinceau, alors je vais prendre le pinceau. Fais quelque chose comme ça, comme une petite ligne de démarcation. C'est plutôt bien. J'aime bien ça. Ou j' ai peut-être une option où je vais t'y déplacer. Je pourrais juste faire une ligne droite. Au lieu d'utiliser le crayon le stylo ou quoi que ce soit d'autre, je vais aller voir les moutons, je vais prendre une ligne, et je vais continuer à maintenir la touche Maj enfoncée. C'est blanc. Je vais l'épaissir un peu et je vais faire tous les réglages pour créer une dynamique ondulée. Je ne peux pas voir le mien ici. Vous pouvez le récupérer s'il finit par apparaître hors de l'écran. Je pense que c'est le cas du mien parce que j'ai un deuxième moniteur ici que vous ne pouvez pas voir. Ça a l'air cool, tordu. Oh, je l'aime bien. Ça correspond un peu à la police dessinée à la main, d'accord ? Je pense que c'est le cas, de toute façon. OK, je vais retourner à mon outil de déplacement et je vais l' utiliser comme séparateur Lequel aimons-nous ? Celui qui est caressé, le plus brossé ou le plus tordu Oh, je crois que j'aime bien celui qui est tordu, mais pour une raison ou une autre, j'ai l' impression qu'il faut un point à la fin Eh bien, il y a une chose, elle a une extrémité très pointue. Pouvons-nous changer cela ? Oh. Allons y jeter un œil. Embout arrondi. Panier pour ceux-ci. Ces options ne fonctionnent pas, n'est-ce pas ? Basique ? Non OK, alors tu peux en finir ici ? Extrémité arrondie ? Oh, tu peux. Très bien, cochez le code. Ce que je voulais aussi, c'était l' Oki et je voulais dessiner un petit cercle à la fin, de couleur blanche. Pourquoi ? Je ne sais pas C'est cool avec le point ? Je pense que c'est le cas. C'est bon. Pinceau, outil à crayon à l'intérieur de Figma. 51. Comment utiliser l'outil Plume dans Figma en: Premièrement, dans cette vidéo, nous allons apprendre à utiliser le Pentl. C'est délicat. C'est vraiment hors du cadre de ce cours, mais je voudrais vous donner une fois de plus pour que vous puissiez commencer. Si tu arrives au bout, tu es frustrée et tu te dis : « Je déteste le crayon ». OK, beaucoup de gens détestent le stylo. Désolé, stylo. Mais je vais vous expliquer comment cela fonctionne dans l'imaginaire, quelques trucs et astuces, et nous allons dessiner une montagne C'est une montagne. Ils sont censés être des nuages. Et je n'en suis pas sûr. C'est censé être une flamme, mais ça ressemble à une feuille maintenant. Quoi qu'il en soit, allons-y et apprenons l'outil à épingle dans Figma. Très bien, pour le stylo, dessinons quelque chose. Nous allons dessiner en haut d'une image que j'ai. Ainsi, lorsque vous exercez des fichiers, il existe un Pentool 01 Vous pouvez simplement le faire glisser ou vous souvenir que vous pouvez y aller aussi. Pouvez-vous être en mode tirage au sort ? Probablement. Oui, tu peux. Apportez une image et trouvez-la. Il se trouve dans vos fichiers d'exercices et s'appelle Pentool 01. Apportez-le. Je vais cliquer une fois, et je vais zoomer dessus. Nous allons également le verrouiller. Vous pouvez cliquer avec le bouton droit de la souris sur des éléments et dire « verrouiller ». Cela signifie simplement que je ne peux pas le déplacer. Pour le déverrouiller, vous pouvez cliquer dessus avec le bouton droit de la souris et dire « déverrouiller » ou dans le panneau des couches. Vous voyez qu'il y a une petite icône de verrouillage ici ? Je peux le déverrouiller, le verrouiller. Quoi qu'il en soit, j'ai besoin qu'il soit verrouillé parce que nous allons dessiner par-dessus. Passons à nos outils de dessin. Allons chercher ce type, le stylo. Quelle couleur vais-je utiliser ? Je vais utiliser quelque chose de très brillant pour que vous puissiez le voir s'annuler, très lumineux, afin que vous puissiez le voir s'allumer, Dan. Il s'est évadé pour le fermer. Crayon. Assurez-vous que vous êtes sur Pentil C'est le piki et nous allons commencer par les plus simples. Nous allons commencer par le carré. Pentol est cliqué une fois, cliquez à nouveau et vous pouvez créer des formes personnalisées Je vais augmenter le poids de ma ligne pour que vous puissiez le voir. Je clique une fois, je clique une fois, je clique une fois. Ce que vous recherchez, c'est que lorsque vous revenez, ça claque ou non sur mon dessin, c'est sur Tu peux y voir ? Ça va dire : « Hé, regarde, nous sommes alignés. C'est cool pour moi. Ensuite, nous devons revenir au début. Celui que vous recherchez, voyez le crayon, il y a ce petit cercle qui apparaît Cela signifie que j'ai une forme complète. cool, c'est que je peux alors aller ici et dire que vous pouvez vous rassasier. En fait, je vais utiliser l'un des miens que je vais utiliser. L'un des miens. Comment s'appellent-ils ? Ils sont appelés styles. C'est ça. Un cerveau. Je vais m'en servir. Les files d'attente sont faciles. Pour les ajuster par la suite. Supposons que vous ayez cliqué dessus, que vous passiez au double-clic pour accéder à l'intérieur, cet outil devrait être activé par défaut Si ce n'est pas le cas, accédez à l'outil de déplacement. C'est comme un second outil de déplacement. C'est comme l'outil de déplacement, mais pour ces vecteurs, ces lignes d'outils en forme de stylo , vous pouvez cliquer dessus , les déplacer et les aligner si vous les avez mal. C'est une bonne chose. Voyons comment faire des courbes. Allons-les. Nous allons créer un cloud. C'est un cloud, au fait. Assurez-vous que sur mon crayon, nous sommes en train de dessiner Pentl au point de vue, ça va être Nous allons donc faire des courbes et des virages. Nous allons donc cliquer une fois pour un coin. Si vous souhaitez créer une courbe, trouvez le sommet de la courbe, cliquez sur le bouton de maintien et faites glisser le pointeur. Lâchez prise. Et si vous souhaitez à nouveau prendre un virage, cliquez une fois. Cliquez sur Maintenir et faites glisser. Vous recherchez le sommet de la courbe que vous tracez. À ce propos, cliquez sur le bouton de maintien et faites-le glisser vers l'extérieur. En dessous, cliquez sur Maintenir et faites glisser. Si tu le perds, tu te demandes, comment puis-je revenir à Noscpescape, tu te demandes, comment puis-je y retourner Vous double-cliquez dessus pour accéder à l'intérieur. Vous pouvez revenir à votre crayon et cliquer dessus pour le redémarrer Dans ce cas, il en a fait un coin. Je vais cliquer sur le bouton maintenir et le faire glisser vers l'extérieur. Il est cassé, c'est tout. Je vais vous montrer comment réparer en une seconde. Si vous le perdez, il vous suffit de cliquer pour savoir où se trouve la fin de la ligne et nous allons continuer. Je vais vous montrer comment résoudre ce problème dans une seconde. Cliquez une fois pour un angle, cliquez, maintenez le bouton enfoncé et faites glisser le pointeur pour une courbe. Cliquez une fois pour un coin, puis revenez ici, il y a un autre clic. C'est un joli coin pointu. Je cherche ce petit cercle et nous avons une forme complète. Regardez-nous. H. Si vous avez des objets un peu cassés mais que vous voulez que ce soit une courbe, vous pouvez revenir à cet outil ici, ou passer à cet outil ici, plier. Cliquez dessus, puis cliquez et faites glisser dessus. Je clique dessus, je le maintiens et je le fais glisser. C'est ce qu'on appelle un point d'ancrage, et je peux le faire glisser vers l'extérieur. Voilà comment convertir les coins en courbes. Si vous voulez que cela aille dans l'autre sens, vous voulez que cette courbe soit pas, car pour le moment c'est une balançoire Je suis retourné à mon outil de déplacement et je peux ajuster ce que l'on appelle des poignées. C'est ce qu'on appelle un point d'ancrage. Je peux faire sortir cette poignée. Mais disons que je veux que ce soit pointu. Comment puis-je le casser ? Je suis sur cet outil ici. Je maintenais enfoncée mon option Countermac Canopy, C, et je tire l'une des balançoires, et elle la Voilà. J'ai un étrange champignon flamboyant maintenant. Je vais y retourner, en faire une courbe et me dire : Génial. L'une des autres choses que vous remarquerez ici, c'est que j'ai un trait assez épais et très prononcé. Tu vois que celui-ci a raison ? Pourquoi cela a-t-il un intérêt ? C'est parce qu'il existe ce qu'on appelle la mitre. Est-ce que c'est mitrant ? Je pense que oui. Ce qui se passe, c' est que celui-ci plus subtil que celui-ci, il lui permet de le faire. Quand ils sont vraiment aigus, comme celui-ci, vous pouvez voir qu'ils sont juste là Il ne sait pas quoi faire, alors il se contente de le couper. Ce que nous pouvons faire, c'est regarder ça et revenir à mon outil de déménagement, cliquer dessus. Vous verrez les petites poignées apparaître ici. Regarde ça. Si je l'ouvre, tu vois, parfois ils sont là, parfois non. Parce que sinon, pouvez-vous voir jusqu'où cela pourrait prendre de l'ampleur ? J'ai fini par sortir de la page en courant, ils l'ont juste supprimée. Ce que vous pourriez faire, cependant, c'est dire que je n'aime pas cette incohérence Ce que je vais faire, c'est passer à mon accident vasculaire cérébral. Où en est mon accident vasculaire cérébral. Voilà, je vais accéder aux paramètres ici, et quel type de jointure est-ce que je veux ? C'est Mited qui est diffusé en ce moment. Vous pouvez jouer avec l'angle mixte, comme dans Let's just play around Eh bien, augmentez le 290. Les bords seront coupés en onglet. Tu vois que ça coupe les bords ? Je pourrais aller sur celui-ci et simplement dire « biseautez-les ». Je peux le voir biseauter les bords ou je pourrais dire les arrondir. Probablement plus approprié pour ce dessin en particulier, il le fait pour ceux-là. La seule chose à remarquer, c'est que cela a également été fait pour celui-ci, car il le fait pour l'ensemble du vecteur que j'ai dessiné. Si je veux que ce soit séparé, je peux double-cliquer dessus pour accéder à l'intérieur, faire glisser une boîte autour de tout cela, aller sur couper, je m'en suis débarrassé. Je vais sortir de ce vecteur comme en double-cliquant sur le fond. Il est maintenant seul, et je peux coller celui-ci, et il y a deux vecteurs distincts. Maintenant, je peux vous dire que mon ami n'est plus arrondi, vous êtes muet, donc vous avez des bords pointus. Je sais que c'est un peu compliqué car je ne sais pas. Voici Figma. Nous faisons de la conception d'interface utilisateur, mais les crayons sont vraiment pratiques C'est un cours en soi, mais je tiens à vous en donner un bon aperçu. Faisons-en une de plus. Testons, PentilPiki clique une fois pour un coin, clique et glisse Cliquez une fois pour un angle, cliquez et faites glisser pour une courbe, cliquez une fois pour un angle, cliquez et faites glisser pour une courbe, une fois pour un angle, puis revenez au début. Si vous le manquez, vous pouvez simplement continuer à cliquer dessus jusqu' à ce que vous le trouviez, ou je l'annulerais et recommencerais. Il y a une option ici si vous vous en approchez. Vous pouvez passer au Command J, je pense. Tu ne peux pas. Tu peux. Vous pouvez utiliser l'outil de sélection, sélectionner tous ces types et appuyer Command J ou Control J sur un PC. Mais c'est moche. Ce que je veux faire, c'est probablement simplement supprimer ce point pour supprimer un point. C'est un bon point. Je clique dessus, il devient bleu, je clique sur Supprimer, je prends mon stylo. Mm, je peux juste passer la souris ici pour recommencer, cliquez une fois Encore une fois, et nous sommes de retour. Je vais en voler les couleurs. Ce que je veux faire, c'est double-cliquer dessus pour sortir du mode dessin. Je souhaite sélectionner ceci. Je vais aller à. Je ne me souviens pas où il se trouve. Il se trouve sous Modifier les propriétés de copie. Je vais cliquer dessus et aller sur Modifier les propriétés du rythme. Il existe un raccourci. Je ne me rappelle pas ce que c'était. C'était quoi Pace Properties là-bas ? Option de commande V sur un Mac Contrôlez O old V sur un PC. Cool. Mais ignorons cela. Très bien, faisons quelque chose de plus compliqué ici. Est-ce plus compliqué ? Gentil. Je voudrais vous montrer un autre exemple avant de passer à autre chose. Je vais prendre le crayon. En fait, je vais m' assurer que j'ai cliqué sur l'arrière-plan pour ne pas y ajouter d'éléments. Je suis en train d'en faire un nouveau. Un crayon ? Est-ce une courbe ou un coin ? C'est un coin. Sharp, donc je vais cliquer sur. Ici, où va la courbe ? Parce que c'était plus facile ici parce que c'était juste au milieu. Ce que nous recherchons, c'est le sommet est celui où il tourne le plus, c' est-à-dire plus encore ici. Ce n'est pas au milieu. Tu vois, c'est la partie la plus délicate. Je vais donc cliquer sur le bouton maintenir enfoncé et faire glisser le pointeur vers l'extérieur. OK, je vais ici et je vais dire  : Oh, ça ne correspond pas. Vous avez tendance à cliquer, à maintenir et à faire glisser, et cela fonctionne Le problème, c'est que nous l'avons. Whoo. Quoi qu'il en soit, nous devons le réparer. Nous l'introduisons à l'état brut, puis nous le réparons ensuite. Continuons ainsi, je vais vous montrer comment y remédier, puis nous le redessinerons et vous montrerons une autre méthode Maintenant, j'ai deux courbes ici. Que dois-je faire ? Tout d'abord, je ne peux pas m'en occuper. Nous l'avons déjà regardée sur mon pentel. Si vous maintenez la touche option enfoncée sur un Mac, ancienne touche sur un PC, lorsque vous passez la souris au-dessus de cette poignée, vous pouvez le voir passer du stylet à cette petite flèche qui dit : «   Je vais attraper cet homme » et, comme je maintiens la touche LK enfoncée sur la touche d'option d'un PC sur un Mac, je peux la casser Où va-t-il ? C'est la partie la plus délicate lorsque vous vous familiarisez avec le stylo. Certains d'entre vous seront peut-être d'accord avec ça. Certaines personnes en ont peut-être peur. C'est difficile. Cela n'entre pas dans le cadre de ce cours, mais je voudrais vous donner les réponses. Je vais le traîner ici uniquement parce que je sais que lorsque je le lâche, vous pouvez voir que c'est la gravité qui le tire dans cette direction. Vous pouvez le saisir à nouveau et dire « oui » ici. C'est juste pour le grossir puis le réparer ensuite. Où va ma prochaine courbe ? J'en veux un là-bas et un là. Cette courbe suit deux directions. Il entre et sort. Ce que je vais faire, c'est cliquer sur le bouton « Maintenir » et faire glisser le pointeur. Tu es du genre « ça ne marche pas », Dan, je vais cliquer sur le bouton «   Maintenir » et faire glisser le pointeur pour y faire glisser le pointeur. Et puis, en bas, cliquez une fois pour un coin. Celui-ci se tortille dans les deux sens. Il y a un sommet là-bas et un petit sommet là. Je vais exagérer le mien, cliquer sur Maintenir et faire glisser, cliquer sur Maintenir et faire glisser. Cliquez ensuite une fois pour un coin. Il n'y a qu'un seul pli, cliquez sur le bouton de maintien et faites-le glisser. Pour en revenir au début, c'est un coin. Je vais cliquer une fois. Comment réparer ce gâchis ? Vous pouvez survoler certains points existants. Si vous maintenez l' option Kona MacKenna PC enfoncée, vous pouvez les supprimer et c'est parti Si vous avez trop de ces poignées, je veux passer à cet outil et je vais faire certaines choses. Je dois dire que c'est ce truc qui a ruiné ma petite file ici Je vais le ramener chez lui. Et tu peux t'en débarrasser en le traînant ou complètement dans sa maison parce que c'est lui qui fait tout le travail Il y avait tout simplement trop de petites poignées qui essayaient de déformer la ligne En fait, ça a l'air bien maintenant. Vous pouvez déplacer les points d'ancrage s'ils ne sont pas au bon endroit. Si tu es du genre, je veux être là, fais glisser ça vers le haut. Comment puis-je régler ce problème ? C'est un peu des deux. Ce type, peut-être celui-ci. Vous remarquerez que lorsque le virage se rapproche, il s'agit d'un virage plus aigu et que plus il est éloigné, plus le virage est fluide. Il y a donc un peu comme vous et vous faites des allers-retours. Qu'est-ce que je veux faire avec celui-ci ? Ça a l'air bien. Celui-ci a l'air bizarre. Pourquoi ça a l'air bizarre ? N'ayez pas peur de zoomer. Je vais dire que vous devez probablement être un peu plus comme ça. Plus loin, n'oubliez pas de ne pas avoir peur de déplacer les points d'ancrage. J'exagère le mien parce que je le préfère. Celui-ci doit être tordu de cette façon. Vous remarquerez ces gars à la fin. S'ils vous sont utiles, utilisez-les. Ils sont ajoutés automatiquement pour vous. Utilisez-les s'ils ne le sont pas et vous dites : « attendez, il y en a trop ». N'oubliez pas de les ramener chez eux. Est-ce que je veux celui-ci ? J'aime bien celui-ci. Je n'ai pas utilisé celui du haut, celui du bas, et c'est le mien qui n'est pas très lisse, n'est-ce pas ? Si ce n'est pas très fluide, ils doivent être plus longs. Comment puis-je aimer celui-ci ? J'ai toujours mes propriétés de copier-coller. Je peux donc utiliser mon raccourci. Maintenant, je peux cliquer sur « off en arrière-plan. Ce n'est donc pas un mode d'édition. Je viens de le sélectionner et je devrais avoir les propriétés de collage, savoir l'option de commande V sur un Mac et Alt V sur un PC. Vous pouvez simplement continuer à les copier-coller. Est-ce que j'aime ça ? Est-ce une feuille ? Est-ce une flamme ? Je veux vraiment que le point soit là en bas, alors je vais y aller , double-cliquer, saisir le fait que nous avons déterminé plus tôt qu' il faut que l'angle soit moins aigu pour que cela fonctionne. Voilà, c'est là. Ajoutez vos propres effets sonores. C'est bon. Ça avait l'air mieux dans ma tête. Double-cliquez. Est-ce que ce truc est là. Il y a quelque chose qui cloche ici. Oh, oui, c'est plus fluide. C'est bon. C'est fini pour le stylo. C'est délicat. Cela devrait être une section entière d'un cours, mais FIG se concentre davantage sur la création d'applications. Mais je voudrais inclure le Pentl et l'outil crayon car Figma est de plus en plus utilisé comme un outil de conception général Et lorsque vous devez créer des icônes, même si vous créez un logo, il n'y a aucun problème à le faire ici. Il possède des outils de dessin très puissants, mais les crayons sont difficiles à utiliser J'espère que cela vous a été utile. C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. Je peux le sentir pour les nouveaux utilisateurs de Pen, jusqu'à ce que vous disiez : je ne reviendrai jamais sur cette vidéo. Je vais juste importer des icônes, Dan. Oui, c'est bon aussi. C'est bon. Vidéo suivante. 52. Projet de cours 09 - Outil Plume: ne va pas nous obliger à faire un projet de classe Il ne va pas nous obliger à faire un projet de classe en utilisant le Pentl, n'est-ce pas ? Il l'est. Je suis ici Je veux que vous vous entraîniez en utilisant l'exercice du pentle que j'ai montré dans la dernière vidéo Ça s'appelle Pentlo One. C'est dans votre fichier d'exercices, dessinez-les comme nous l'avons fait. Entraînez-vous avec ceux-là. Alors, tout seul, je veux que tu essaies de le dessiner un cœur n'a pas besoin de ressembler au mien. Utilisez vos propres couleurs. Ce que je veux que vous fassiez, c'est que expérimentiez les options de jointure à partir du trait. Peut-être que c'est biseauté et rond en onglet. Allons y jeter un œil. Je joue avec eux ici. Que vous ayez des bords arrondis ou biseautés, il vous suffit de jouer Je veux également que vous expérimentiez ce que nous avons fait avec le crayon et le pinceau, ces paramètres ici . Nous pouvons en fait, sans utiliser le crayon, le pinceau, simplement appliquer des éléments tels que Dynamic ou Pinceau, avoir un terrain de jeu avec des outils comme celui que j'avais. Voilà, c'est là. Maintenant, ça va être difficile. J'ai même écrit ici. C'est difficile, surtout si vous utilisez le stylo pour la première fois, essayez-le. Si c'est horrible, c'est bon. Vous pouvez toujours être un concepteur d'expérience utilisateur sans connaître l'outil du stylo. C'est un outil difficile à apprendre. Pourquoi c'est là en tant qu'exercice. Nous allons jouer avec. Lorsque vous avez terminé, prenez une capture d'écran de l' ensemble et téléchargez-la dans les projets et les missions. Vous n'avez pas besoin de télécharger celui-ci sur les réseaux sociaux, principalement parce que tout le monde aura la même apparence. Nous allons commencer à publier d' autres éléments uniques que nous inventons sur les réseaux sociaux. Mais pour l'instant, juste dans les projets de classe ou dans la section des devoirs, bonne chance avec l'outil Pen. Maintenant, tu peux faire plus que ce que j'ai fait ici. Plus l'outil Pen est intéressant, comme nous le verrons dans les projets de classe, mieux c'est. Si vous ne faites que commencer, quelque chose de simple. Très bien, amusez-vous bien avec l'outil Pin. Je vous verrai dans la prochaine vidéo. 53. Comment utiliser le constructeur de formes dans Figma ma: Bonjour, tout le monde. Nous allons utiliser l'outil Shape Builder. Dans Figma, pour les fabriquer, nous allons commencer par quelque chose de facile à ranger. Ça, je ne sais pas ce que c'est, mais ça a l'air cool, et c' est un bouclier avec une tique dedans. Success Shield, c'est ce que nous appellerons. Nous allons découvrir l'outil Shape Builder. De plus, nous allons combiner certaines des autres techniques que nous avons apprises plus tôt dans le cours afin de pouvoir créer de nombreuses choses. C'est un peu délicat, mais je ne veux pas oublier ce genre de choses dans Figma, car Figma est de plus en plus utilisé comme un outil de conception graphique à usage général Découvrons l'outil Shape Builder, qui est génial. Très bien, commençons. Trouvons un morceau propre de notre carton. Dessinons une maison. Je vais prendre l'outil rectangulaire. Je vais dessiner un rectangle. Je vais utiliser l'outil polygonal. Je vais dessiner un polygone ou un triangle. Nous n'avons pas abordé cet outil. Vous pouvez voir ici que je peux modifier cela pour avoir autant de tailles que nécessaire. Je n'en ai besoin que de trois, mais voilà. Vous avez besoin d'un pentagone ou d'un hexagone, je vais l'aligner. C'est plutôt bon pour aligner les choses. Voilà. Vous pourriez sélectionner les deux et dire vous deux, parfaitement alignés. Très bien, Mme sort un peu. Dessinons la porte, revenons à l'outil rectangulaire et dessinons une porte à cet endroit. Je vais le faire glisser ensuite juste pour l' aligner au centre. Est-ce que ça ressemble à une maison ? Ça a l'air d'une maison suffisante. Ce que nous allons devoir faire c'est faire en sorte que tout soit réglé Vous voyez, ce sont toutes des couches séparées les unes sur les autres. Ce que nous devons faire, c'est dire que vous êtes tous anéantis, mon ami. Cela signifie qu'ils sont tous écrasés dans le même vecteur. C'est comme un groupe, mais pas un groupe. Cela signifie qu'ils sont tous ensemble sous forme de vecteur. Descendez. Je viens de le sélectionner et je voudrais passer à cette option ici une fois qu'il sera plat. C'est ce qu'on appelle Edit Object. Nous l'avons déjà fait ou il vous suffit de double-cliquer dessus. Et tu as toutes les lignes rayées. Nous allons maintenant passer à l'outil Shape Builder, qui est la clé. Cliquez dessus et vous pourrez vous joindre à des activités. Dans ce cas, nous voulons supprimer des éléments. Maintenez le compteur d' options Mac enfoncé. Co PC, tu vois, il y a un petit signe négatif à côté de mon curseur et tout est rouge. Ce que je peux faire, c'est cliquer et glisser le pointeur sur ces deux éléments pour m'en débarrasser. Maintenant, je pourrais les laisser un peu en désordre. Elles sont toutes de couleur différente Je peux donc cliquer et faire glisser le pointeur, sans rien enfoncer, et nous les additionnerons. J'ai maintenant une maison. Nous l'avons fait Double-cliquez sur l'arrière-plan pour sortir et nous avons une jolie icône au lieu de VtorHuse Vous pourrez ensuite l'ajuster. Si vous avez dessiné le vôtre et qu'il est un peu trop pointu ou trop haut, vous pouvez double-cliquer pour accéder à l'intérieur Je peux sélectionner tous ces points d' ancrage en bas, en utilisant simplement l' outil par défaut. Je vais maintenir la touche Maj enfoncée et utiliser la touche fléchée pour le déplacer vers le haut. Pour essayer de trouver quelque chose de plus proportionnel, c' haut. Pour essayer de trouver quelque chose de plus est peut-être juste ce point. Le vôtre est trop grand ou pas assez grand. Telles sont les bases du Shape Builder. Faisons quelque chose de cool comme vous l'avez vu au début, et prenons l'outil « Oh for the Circle » et je vais dessiner un levier de maintien pour qu'il soit beau et parfaitement rond. Je vais changer le mien pour qu'il n'y ait aucun remplissage et qu' ait un trait blanc pour que nous puissions le voir. Et ce sera mon cercle extérieur, copier-coller, j'en ai un autre, et je vais le réduire. Membre, si vous copiez et collez, ils se retrouveront les uns sur les autres. Faites un cercle plus petit, pas trop petit, quelque chose comme ça. Ensuite, il suffit de les aligner, j'en veux un pour y aller, de copier-coller, j'en veux un autre ici, de copier-coller, j'en veux un autre pour y aller et de copier-coller, un autre pour aller en bas. Très bien, ça va me donner j'espère, mon petit spirographe Tout le monde se souvient de ces mains en l'air. Tout comme la maison, je les sélectionne toutes. J'ai tout un tas d' ellipses qui ne sont pas connectées Je dois les aplatir pour qu'ils soient tous dans le même vecteur, puis je peux double-cliquer dessus ou cliquer sur le vecteur Modifier Ensuite, nous pouvons prendre celui-ci ici, M, l'outil Shape Builder et dire, eh bien, avant cela, vous pourriez utiliser l'outil de remplissage entrer ici et dire, n'est-ce pas, je veux que vous soyez rempli de quelle couleur ? Passez au rouge. OK, il suffit de te débrouiller et de le remplir. Ils ne sont pas joints, mais ils sont tous de la même couleur, et c'est peut-être ce que vous devez faire. C'est une bonne façon de l'utiliser pour aplatir puis modifier un objet Je vais annuler cela parce que ce que je veux faire, c'est les rejoindre tous. Donc, pour le Shape Builder, je vais le colorier et vous allez découvrir, essayer de déterminer quels sont ceux que je dois couvrir. Je ne fais rien. Je les fais simplement glisser à l'aide de l' outil par défaut. Ou est-ce celui-ci ? Je pense que c'est celui-ci. Et puis celui-ci est ce que je recherche. Je ne m'en souviens pas. Est-ce que c'est à peu près juste ? Non, il y en a trop. Annuler annuler. C'est peut-être celui-ci ici. Toi, c'est ça. Alors pour m'en débarrasser, quelle touche dois-je appuyer ? C'est vrai, la touche d'option, et je vais les faire glisser toutes ou la touche Ok sur un PC. J'ai fini avec cette rayure. Allons-y. Je vais retourner à mon outil de pot à peinture et je vais choisir une couleur de remplissage. Je vais me débarrasser des traits et ajouter un fond, et je vais choisir parmi ceux créés dans ce fichier. Ça va me donner mes couleurs ici. Cela fonctionne. Le comportement de ce seau de remplissage est un peu étrange pour le moment. Il s'agit d'une nouvelle fonctionnalité pour Figma. J'imagine que cela va devenir plus facile en ce moment. Ce que je fais, c'est de cliquer sur l'un d'eux puis de le modifier. Ça change tout OK, donc je clique dessus, je clique à nouveau ou je clique deux fois dessus. Ensuite, si je choisis une couleur d'ici, elle s'applique. Alors, allez dans Modifier. Ne cliquez pas trop vite dessus. OK, c'est un peu humide. Et encore une fois. Et j'espère que cela fonctionne un peu plus facilement pour vous, un peu original. Mais nous y sommes arrivés. Cool. Et ça l'est. Je veux ajouter des dégradés, en fait faisons-nous ? Ou bien, nous allons le faire très rapidement. Ensuite, nous passons à la suivante. Ici, je veux ajouter un dégradé. C'est un deuxième dans ou quand je l'aime déjà. Regarde ça. Très bien, je vais les faire toutes les quatre. Tu attends là-bas. Je vais passer en mode super rapide. C'est bon. Est-ce que je l'aime davantage ? Je pense que oui. C'est plutôt cool. Très bien, passons au bouclier D'accord ? C' est donc le bouclier qui va entrer. Nous allons devenir ultra avancés ici. Nous sommes très avancés. Ça va être le cas, je ne sais pas. Nous allons y mettre beaucoup de choses. Encore une fois, n'oubliez pas qu'il ne s'agit pas d'un outil de dessin. Il s'agit d'un outil de conception graphique Figma. Nous l'utilisons ici pour l'expérience utilisateur, nous n'entrons donc pas trop dans les outils de conception ou dessin, mais ils sont très pratiques. Commençons donc par le rectangle. Je vais dessiner un rectangle de la taille d'un bouclier. Ça lance de nouvelles choses. Je veux donc passer à Edit Object, parce que ce que je veux faire, c'est prendre mon crayon et je veux ajouter un nouveau point en bas de page OK, il n'y en avait pas avant. Maintenant, il y en a. Je peux maintenant revenir à mon outil de déplacement et faire glisser vers le bas pour atteindre la partie pointue. Je vais maintenir la touche Maj enfoncée pendant que je la fais glisser vers le bas, pour qu'elle descende tout droit. Maintenant, je veux qu'il soit incurvé sur ces bords ici. Je dois convertir certains de ces points. Ce que je vais également faire, c'est me concentrer uniquement sur un côté, puis le retourner à la fin. Je vais le saisir pour en faire une courbe, cliquer immédiatement, et vous vous dites : ce que je vais faire maintenant, c'est revenir au premier outil, l'outil de déplacement. Et ce que je vais faire, c'est briser ce côté. Qui se souvient comment le casser ? Maintenez la touche option d'un Mickey enfoncée sur un PC et vous pouvez dire que vous l'avez interrompue. Je veux en faire avec celui-ci ? Je ne le veux pas vraiment, alors je vais juste le ramener chez lui et il s'en ira. Ce qui est bien, c'est que si je clique toujours dessus, j'ai toujours ce côté et c'est ce que je vais faire. Parce que je veux ce côté incurvé mais pointu dessus. Je vais attraper ce type, peut-être le faire descendre un peu plus. J'utilise juste mon râteau. Ce côté ne m'inquiète pas trop car je vais le retourner dans une seconde. Mais tu pourrais. La prochaine chose que je vais faire est de récupérer le petit haut de mon bouclier. Je vais prendre l'outil pour faire glisser l'outil cercle vers l'extérieur et appuyer à nouveau sur l'outil . Cela ne fonctionne pas. Je vais aller à l'Ellipstol ici. Il est issu de ce mode d'édition d' objets. OK. Il va donc falloir que je l' aplanisse dans une seconde Tracez une sorte de cercle. En fait, je vais changer de couleur juste pour pouvoir le voir. Et j'essaie de me faire comprendre. Je dois franchir un peu la ligne médiane . Ça a l'air bien. Vous pouvez l'ajuster pour vous sachiez ce que vous recherchez, oubliez pas que c'est exactement ce qui reste , car nous allons utiliser cet outil de création She. Comment savoir s' il est dépassé à mi-chemin ? Je fais juste une sélection. Ouais Et ce que je vais faire, c'est comment obtenir le Shape Builder ? Ce n'est pas ici. Vous avez ces autres choses comme le syndicat et le front négatif. Nous allons ignorer ceux-là. Nous allons utiliser le Shape Builder, qui est tout simplement plus simple que tout cela. Il va falloir utiliser l'aplatissement. Ensuite, nous pouvons passer en mode Object Edding, appuyer sur la touche M pour accéder à notre Shape Builder, qui n'est que cette troisième icône Je peux maintenir la touche Alt enfoncée sur une option PC sur un Mac et simplement cliquer dessus. J'ai la moitié d'un bouclier. Maintenant, ce que je veux faire, c' est la même chose, je vais utiliser un rectangle, qui est l'archie, pour le traverser. Tout ce que je cherche à faire, c'est le faire en sorte qu'il en soit là. Je vais juste m'en servir comme emporte-pièce. Encore une fois, sélectionnez les deux. Aplatissons-les. Oh, j' ai fait un aplatissement automatique Aplatissez-les. Oh, je ne savais pas que c' était le cas. Cela fonctionne. Est-ce que c'est le cas ? Il utilise automatiquement l'un d'entre eux, qui, je pense, utilise exclude. Il y a une certaine bizarrerie dans Figma. Je vais laisser cela dans le cours parce que cela n'a jamais été fait auparavant, mais maintenant c'est le cas. Je ne le lui ai pas demandé. Donc, si on peut le faire malgré tout. Il a percé un trou dans ce L, je peux voir à travers. Ce que je vais faire maintenant, c'est y aller, récupérer mon outil Shape Builder et, espérons-le, être capable de maintenir enfoncée ma touche option ou ma touche sur un Mac. Sois capable d'en couper la moitié. Cela fonctionne toujours. J'en ai maintenant la moitié. Ce que je vais faire, c'est le dupliquer. Je vais me rendre ici. Il y a un retournement horizontal et je vais essayer de les aligner et ils se bloquent ensemble. Ils devraient le faire automatiquement. Parfois, j'ai eu des problèmes où cela laissait un petit espace entre les deux, alors je fais un zoom arrière. Parfois, il y a un écart d'un pixel là-dedans. Vous pouvez simplement cliquer dessus et utiliser votre touche fléchée pour le déplacer d'un côté à l'autre. Maintenant, je pourrais laisser les choses comme ça, mais je vais les sélectionner toutes les deux. Je vais aplatir parce que n'oubliez pas qu'il y a deux formes distinctes sur mon panneau de pose Je vais les assembler et vous verrez qu'ils sont là Ce sera mon icône en forme de tique. Ça va faire l'affaire. À voir. Je vais passer en mode édition d' objets. Je vais aller chercher mon Shape Builder et les réunir. Il me suffit de cliquer et de faire glisser le pointeur sur les deux. Ajoutons la tique. Je vais gratter mon stylo, que nous avons appris à utiliser Je vais cliquer une fois de plus pour un coin une troisième fois. Je vais saisir mon trait pour obtenir un trait de taille appropriée, vos propres effets sonores, et je vais faire celui-ci intitulé Outline Stroke. Nous l'avons utilisé plus tôt pour séparer le type. Nous pouvons faire la même chose pour. Je vais faire une sélection là-dessus. Je vais écrire « click it ». En fait, cela ne peut pas être un mode d'édition d'objets pour que cela fonctionne. Je vais fermer le mode d'édition d'objets. Maintenant, je peux écrire « click ». Cette même option ici où il est écrit contour. C'est plutôt pour cela qu'il est censé être utilisé. Nous l'avons utilisé plus tôt pour décrire le type. Celui-ci, ici, esquisse un trait, ce qui signifie pour le moment qu'il s'agit d'un trait. Si je passe à Command Y, Control Y sur un PC. Pouvez-vous voir qu'il s'agit d'une ligne dont le dessus a pour effet de l'épaissir ? Ce que nous voulons faire, c' est en faire un grand rectangle épais dans lequel nous pouvons percer un trou en arrière-plan. Contrôle ou commande Y, je vais maintenant vous donner un aperçu. Regardez ce qui se passe. Pouvez-vous voir si je passe à nouveau en mode contour maintenant, au lieu d'une ligne épaisse, c' est en fait une forme, cette grande forme épaisse. Je vais cliquer dessus, le déplacer un petit peu vers le haut . Touchez pour appuyer, Commande ou Contrôle, pourquoi ? Et ce que je veux faire, c'est y percer un trou. Parce qu' à l'instant, c'est noir. Faisons-en une couleur, rendons-la plus évidente. Je veux vraiment être un trou dedans. Vous pouvez le laisser sous forme de couleur. C'est tout à fait bon. Je veux percer un trou dans le mien. Je vais donc les assembler tous les deux , les assembler, K pour le Shape Builder, et je vais percer le trou au milieu de celui-ci Cela m'est déjà arrivé par le passé. Vous pensez qu'il y a actuellement une certaine originalité dans l' outil Shape Builder dans tous les outils de dessin de Figma Pour une raison quelconque, il le laisse là, k. Il devrait juste y percer un trou. Il en a vraiment envie. Mais une petite solution pour le moment. Je ***** ça marchera dans le futur. C'est juste un problème de dentition avec l'outil. Si vous prenez votre pot de peinture, si vous survolez un objet déjà peint, voyez-vous que c'est un inconvénient ? C'est juste un moins , pas d'annulation, vous pouvez sélectionner. Pouvez-vous sélectionner cette pièce ? Non, utilisez simplement le seau de remplissage si le vôtre ne fonctionne pas avec l'outil Shape Builder car il contient maintenant un trou. Comment puis-je l'approuver ? Juste pour passer au-dessus de quelque chose. Bonjour, je peux voir à travers vous. Il s'agit de l'outil Shape Builder. Nous avons ajouté quelques extras ici, comme le miroir. Nous avons également envisagé d'utiliser notre outil à stylet que nous avons examiné plus tôt. Il y a quelques petites particularités ma version de Figma. La vôtre est peut-être différente. Je suis passé en mode objet. J'ai l'impression que cela doit être inférieur. Oh, sympa. C'est bon. Il s'agit de l'outil Shape Builder de figma. C'est super génial. Dessinez des éléments, superposez-les et joignez ou soustrayez des bits. Dino ajoute de jolis dégradés. C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. 54. Boutons en forme de vaguette avec des cours arrondis iOS dans Figma ma: Là. Hey, nous allons découvrir ce qu' est un écureuil dans le design UX et dans Figma Squirkl n'est pas tout à fait un carré, pas tout à fait un cercle. Voyez ce qu'ils ont fait là-bas. OK ? C'est ce qu'on appelle aussi le lissage des coins, mais c'est un bien meilleur nom pour le terme « gril Laissez-moi vous montrer comment le faire dans Figma. D'accord, faisons-le sur notre page d'accueil de bureau Bonjour cinq. Donc, déplacez d'un S tout sur le nom ici et passez à la deuxième. Nous allons zoomer directement. Nous avons donc besoin de deux boutons ici. Je vais y aller encore plus souvent. J' utilise ma roue crânienne. Vous pouvez également utiliser votre Shift plus. Allons créer deux rectangles ou cadres, utilisons des cadres Nous allons dire, je veux un bouton. Il va être à peu près de cette taille. va falloir aller le tester à 100 % parce que c'est gros ? Oui, cela semble juste. OK, nous allons donc zoomer un peu plus. Donnons-lui la couleur de remplissage de l'une des nôtres, celle-ci est intéressante. Asseyez-vous en bas. Sur cette page, Gate me montre ceux qui sont utilisés et qui ont obtenu un crédit dans ce fichier. Voici tous mes styles. Vous remarquerez que pour une raison ou une autre, les dégradés ne veulent pas voir de dégradé ou simplement voir les noms, vous pouvez accéder à celui-ci qui dit Bibliothèques Voici ma bibliothèque de couleurs. Cela peut être un moyen plus simple de choisir les couleurs. Je vais choisir ma couleur secondaire. Je ne suis pas sûr d'aimer la couleur secondaire. Quoi qu'il en soit, faisons-en deux. Nous allons avoir un bouton À l'heure actuelle et un bouton en savoir plus, et nous allons les sélectionner tous les deux. Shift, cliquez sur les deux. Allons-y et ajoutons-y. Je vais juste taper le mien plutôt que de le faire glisser, je vais taper dix pixels Bien, regardons la différence entre nos coins arrondis habituels et nos tortillements. J'ai sélectionné celui-ci. Nous devons passer à cette option ici, aux coins individuels, puis passer aux paramètres. Nous ne voulons pas vraiment de corners individuels. Nous voulons ce qu' on appelle le lissage des coins. C'est le nom technique. Squirkle est bien meilleur, non ? Cercle carré. Alors, jetons un coup d'œil. C'est donc le grand changement. Tu es du genre : « Ça a l'air pareil ». Je vais demander à l'éditeur de zoomer dessus avant, après, avant, après. Peux-tu même le voir ? Très bien, agrandissons-le pour l'éditeur de port OK ? Avant, après, avant ou après, il s'agit simplement d'un autre type de coin arrondi. C'est donc comme ça que je le fais toujours. Il y a juste, je ne sais pas, une sensation intéressante que j'adore vraiment, et c'est pourquoi il a sa propre vidéo. OK ? Donc, oui. À vous de choisir, vous n'avez pas besoin d'écureuils. Vous pouvez utiliser des coins arrondis réguliers. Je vais faire les deux écureuils. Cliquez sur la commande à l'intérieur de celui-ci, ou cliquez sur le bouton Contrôle pour accéder à ce bouton. Sinon, vous avez sélectionné le cadre entier, je vais en avoir deux. Je vais faire en sorte que celui-ci n'ait pas de remplissage mais un trait un beau gros trait épais de ma couleur secondaire, quelle taille ? Quelque chose comme ça. Je vais également y ajouter mon texte. C'est ça. Ce sont des écureuils Une dernière chose. Vous pourriez abandonner complètement les écureuils et opter pour un tour complet Regarde ça. Si je le contourne et que je continue à aller au-delà de ce qu'il doit être, parce que vous pouvez voir qu'il essaie d'avoir 146 coins arrondis, il ne peut pas le faire. Ça prend juste la forme d'une pilule. C'est quelque chose qui pourrait aussi vous plaire. Nous avons examiné cette question plus tôt. Si je descends à, je descends à zéro et que je récapitule. Si je zoome suffisamment près, je peux voir les petits points dans les coins. J'ai besoin de le démarrer. Ce que vous pouvez faire, c'est dire qu'ils n'apparaissent pas. Je me demande pourquoi. Normalement, il y a un petit point que vous pouvez faire glisser dans les coins sans zoomer suffisamment Hmm. N'apparaît pas. Quoi qu'il en soit, vous pouvez avoir différents coins arrondis, vous pouvez mettre un à zéro. Voilà. Des écureuils dans un figma. Je vous verrai dans la prochaine vidéo. 55. Projet de cours 10 - Icônes: Ah, c'est plus de temps pour les devoirs. Non, ne t'inquiète pas. C'est une période de projet de classe super amusante. C'est très différent. Prends un peu de temps pour celui-ci. Même si vous ne réalisez pas les projets de classe, vous devriez le faire. Mais si ce n'est pas le cas, il y a choses intéressantes et intéressantes qui se passent ici. Je veux donc que tu dessines quelques objets, des boutons et des icônes. Les boutons sont donc faciles. OK, tu peux décider si tu veux te tortiller ou non. Ce sont ces gars ici. Maintenant, apprenez-en plus, mettez-le sur votre page d'accueil. Ensuite, je veux que tu dessines des icônes. Donc, en utilisant les outils que nous avons appris jusqu'à présent, l'outil stylo, outil Shape Builder, tout ce que vous voulez, je veux que vous dessiniez des icônes. Combien peux-tu en dessiner ? Tu dois en dessiner trois. D'accord, tu peux choisir n'importe lequel de ces trois. Je les ai classés dans l'ordre du moins difficile à dessiner au plus difficile. Vous pouvez donc commencer par les trois premiers. Vous pourriez les faire toutes pour continuer à vous entraîner. Un petit conseil lorsque vous concevez quelque chose est de placer dans des cadres de 28 x 28. OK, désolé, 28 ans. Je ne peux pas lire 48 par 48, juste pour commencer. OK ? Donc, si je prends mon outil de cadrage, que je dessine celui-ci, et je dirais que vous avez des dimensions de 48 pixels sur 48 pixels. La raison pour laquelle nous faisons cela est que lorsque vous finissez par les combiner, d'accord, vous devez les avoir en quelque sorte proportionnés. Souvent, vous pouvez concevoir quelque chose ou assembler les icônes d'autres personnes. Ce n'est pas ce que j'attends de cette vidéo. Je veux que vous dessiniez les vôtres, mais il arrive souvent que vous ne fassiez que bricoler les icônes d'autres personnes et que vous deviez les manipuler. C'est pourquoi vous avez besoin de compétences en dessin. OK ? Il se peut que celui-ci provienne de la bibliothèque d'icônes de quelqu'un d'autre, et il est tout simplement trop gros par rapport à ses potes. La façon de savoir si c'est trop grand est de les placer dans ces cadres de 48 x 48 pixels , puis de les empiler les uns à côté des autres. Cela vous permet également de les espacer, d'accord ? Et déterminez la part de ce petit espace qu'ils occupent ici. Ils n'ont pas besoin d'un tel écart ici. Ils pourraient être plus grands à l'intérieur. Je tiens mon shift et mon option Comac ou Shift enfoncés et un PC pour le faire glisser vers le haut. Si celui-ci est de cette taille, vous vous dites qu'il faudrait peut-être que celui-ci soit plus grand. Je vais aller dans l'autre sens et les réduire. Commencer par un carré de 48 x 48 pixels est très courant. Je vais le défaire jusqu'à ce qu'il soit plus petit. Va. Ils ont tous l' air d'être un bon groupe. L'autre raison pour laquelle nous aimons 48 pixels , c'est que nous allons le faire. Vous finissez par dire : «   Très bien, vous ». J'ai un fond blanc juste au moment où je les dessine, mais souvent vous désactivez le remplissage , vous les utilisez simplement comme ça, vous allez dire, d'accord, celui-ci va passer ici et vous pouvez voir le type de gamme et il y a un espacement constant Donc, ce que j'ai fait, c'est que vous pouvez voir ici ? Il y a ce cadre appelé compte d'icônes, et il contient le vecteur. Certains des dessins que nous avons faits représentent simplement, disons, ce cœur ici, où est-il ? Voilà, il y a juste un vecteur assis sur mon panneau. Si je devais le mettre dans le 48 x 48, soit dessinez la boîte et faites-la glisser dedans , soit je peux dire que je veux encadrer cette sélection et que le cadre qui les entoure soit bien plus grand que ce dont j'ai besoin, 48 x 48. Où est mon petit cadre ? Maintenant, je vais dire que vous devez devenir beaucoup plus petit à l'intérieur de ce cadre. L'un de ces conseils utiles consiste à utiliser la commande ou le contrôle Y pour passer en mode plan, en particulier si votre cadre n'est pas coloré et qu'il n'y a donc pas de remplissage. Maintenant, je peux dire qu'une icône serait appropriée, probablement à ce sujet, je devrai peut-être redessiner un peu mon icône pour qu'elle occupe bien l'espace Je vais l'appeler maintenant Icone Hart. La raison pour laquelle je les appelle icônes cœur c'est que plus tard, lorsque je cherche des icônes, le trait est un peu trop épais maintenant. C'est ici, dans mon panneau Layers. Pouvez-vous voir qu'il y a une recherche en haut de la page ? Je peux taper le mot icône, le trait d'union, cela me donnera tout ce qui est une icône sur mon document Si vous le faites dans l' autre sens en contournant l'icône Call Heart ou l'icône du compte, je ne sais pas. Pour une raison quelconque, cela semble plus agréable et plus facile à trouver. Très bien, venez au premier quart de travail. Effectuez un zoom arrière. Je vais faire une dernière chose que je veux vous montrer avant de partir, c'est que j' ai ces icônes, parfaites. Je les veux vraiment sur ma page d'accueil. Je veux en changer les couleurs. Ce que vous avez peut-être remarqué, c'est tout d'abord qu'ils sont probablement trop gros et qu'ils ne sont pas vraiment allumés. Si vous pouvez voir les noms, souvenez-vous qu'ils ne sont pas vraiment sur la bonne page. Je vais mettre fin à mes recherches. Assurez-vous de fermer la recherche par la suite. Sinon, tu ne peux rien voir. Je veux que tout cela soit sur ma page d'accueil. Je pourrais juste les faire glisser vers le bas. Ils sont juste cachés là-dedans. Plutôt que d'essayer de les faire glisser dans le panneau Calques. Alors allons-y à 100 %. Je fais un petit zoom arrière. Ils sont en quelque sorte de la bonne taille. Je pourrais choisir une taille légèrement plus petite pour ces gars de 32 ans. Oh. Cela soulève un autre point positif. Certains d'entre eux sont évolutifs, d'autres non. Oh, il y a toutes sortes de bonnes choses dans cette vidéo. Donc, avant cela, j'allais vous montrer que si je change le remplissage de tous ces champs, regardez ce qui se passe. Cela change le remplissage du cadre. Je vais donc annuler ça. Ce que tu peux faire, c'est voir en bas ? J'ai fait le plein, mais il est écrit « couleurs de sélection ». Si je sélectionne tout cela, je devrais obtenir le noir et blanc, et l'une de mes couleurs pour l'arrière-plan ici, ma couleur principale. Je vais donc récupérer toutes mes icônes, vous et vous. En fait , cela n'a pas d'importance. Je peux saisir tout cela et vous pouvez dire, d' accord, tout ce que j' ai sélectionné, les couleurs de sélection. Tout ce qui est noir, je veux qu'il soit, disons, blanc, ou vous pouvez aller dans vos bibliothèques et dire que je veux que ce soit ma couleur secondaire. C'est là que les couleurs de sélection peuvent être utiles. Vous avez sélectionné des lots, je vais dire : « Hé, voici toutes les couleurs que vous avez sélectionnées. Changez-les si vous le souhaitez. Sinon, vous pouvez simplement plonger dans chaque icône, les sélectionner et les modifier également ici. Très bien, en termes de taille. Nous avons examiné cette question plus tôt. Je pense que nous l'avons fait. Allons récupérer toutes mes icônes. Toi, je tiens Shift dans mes bras, je t'attrape, toi. Quelle est ma dernière visite là-bas ? OK, j'ai mes trois icônes, et vous remarquerez que lorsque je les ai modifiées 32, seules certaines d'entre elles se sont ajustées comme je le voulais. L'un et l'autre ont besoin d'un peu de travail. Je vais prendre la maison que j'ai dessinée et voyons la différence. Jetez un œil ici entre vous et vous. Rien n'est différent. Si tu entres dedans, je clique dessus. Ce gars ici est prêt à prendre de l'ampleur, et ce gars à l'intérieur est prêt à être au centre et au sommet. Je veux qu'il évolue, toi et toi. Pareil pour celui-ci, et pour vous, je veux être à l'échelle. En haut et échelle en bas. Vérifions-le, ce type s'est mis à l'échelle. Dans son cadre, le cadre de son petit parent, ils vont tous être redimensionnés maintenant plutôt que d'être collés à gauche et en haut à droite en haut et à gauche. Plutôt que d'être coincés en haut et à gauche ou quoi que ce soit d'autre. Essayons-le. Allons tous vous chercher. Prends celui-ci, Shift, Shift, Shift. Il peut être difficile d' entrer dans certains de ces cadres car vous êtes dans ce cadre parent. Double-cliquez immédiatement pour attraper ce gars. Ancien quart de travail. Ou vous pouvez l'attraper dans le panneau des couches si c'est plus facile. J'espère que maintenant, parle bien, Dan. Ils l'ont fait. Sympa. OK, donc 32, souvenez-vous d'utiliser des multiples de huit, ce qui est pratique, 48, 32, soit 100 %. Ils ressemblent à des boutons de taille appropriée. Je sais que c'est plutôt pour un téléphone portable, celui-ci ici, mais c'est bon pour le moment. Ce que je vais faire, c'est cliquer sur toutes les colonnes, et je vais utiliser mes colonnes, peut-être Shift G, et je vais vraiment y faire entrer les miennes. Ran Keys, allons-y. C'est bon. C'est une longue vidéo de projet, mais nous sommes tombés sur des parties intéressantes que vous rencontrerez probablement ou que vous avez déjà rencontrées L'objectif principal ici est de dessiner trois icônes et de créer des boutons, de les télécharger dans la partie du site Web consacrée aux projets de classe, et de nous taguer également sur les réseaux sociaux. J'adorerais voir de quelle marque. C'est bon, c'est ça Je vous verrai dans la prochaine vidéo. C'est bon, je suis de retour. Une autre chose m'est venue à l'esprit fois que j'ai fini d'enregistrer, c'est vous pouviez le faire au lieu d' avoir à vous embêter comme ça. Ils ne sont donc pas évolutifs. Eh bien, celui-ci n'est pas évolutif. Je dis que tu aurais 48 ans, ils ne font pas exactement ce que je veux. Tu peux. Au lieu de passer en revue et de dire « A, j'ai besoin que vous soyez cette chose interne ici pour être à l'échelle et à l'échelle », vous pouvez simplement utiliser l'outil d'échelle. J'aurais dû commencer par celui-ci. C'est plus facile, Dan. Vous pouvez simplement utiliser l'échelle, l'outil d'échelle, qui est K, et vous pouvez le faire de cette façon. Tu devras peut-être sortir. Il est caché ici lorsque vous êtes en mode dessin. Passez à l'échelle. Cela se fera simplement de la manière la plus simple et la plus rapide plutôt que de la manière que je vous ai montrée. Mais je suppose que je vais laisser l'inverse car il arrive parfois que vous ayez besoin de le régler à l' échelle afin de ne pas vous causer de problèmes éternels lorsque vous essayez de redimensionner des éléments C'est bon. Utilisez l' outil de mise à l'échelle. C'est beaucoup plus facile Quoi qu'il en soit, c'est maintenant la fin officielle, la fin appropriée. Au revoir. 56. Sélection intelligente et nettoyage dans Figma ma: Bonjour Tu veux voir quelque chose de vraiment cool ? C'est ce qu'on appelle la sélection intelligente et le rangement à l'intérieur d'une Figma. Prêt ? Écoute, je peux juste les traîner, jouer avec l'espacement entre les deux en même temps C'est ce qu'on appelle la sélection intelligente. Nous allons également utiliser quelque chose appelé tidy up à l'intérieur de Figma. Allons-y. Jouez, dessinez des rectangles, et je vais en faire un, deux , trois, quatre, et les colorier différemment. C'est bon, Magic. Maintenant, je vais les déplacer pour qu'ils aient tous des espacements différents Et nous allons regarder le premier qui s'appelle tidy up. Je vais juste les sélectionner toutes. Et ce que vous remarquerez, c'est que vous l'avez peut-être déjà remarqué. Si j'ai sélectionné plusieurs éléments, vous voyez ici, j'ai cette petite ligne stropique C'est le bouton de rangement, il ne fait que le ranger. Vous pouvez faire le long chemin et ici, il y a une option pour faire le ménage. C'est encore plus cool quand on en a plusieurs. Allons-y. Je suis juste en train d' en dupliquer quelques unes différentes. Ici, nous allons tous les sélectionner, passez la souris au-dessus. Regarde, ça les a rangés. Vous ne verrez pas le rangement s'ils sont déjà bien espacés. Mettons-les ici. déjà bien espacé, il n'apparaît donc pas s'il est déjà rangé. Maintenant qu'ils sont rangés, régulièrement espacés, vous allez voir, c'est quoi ces autres trucs ? Il y a une ligne rose et un cercle rose. Ils sont utilisés pour l'espacement entre les deux. Cliquez sur ces petites lignes entre les deux et faites glisser l'une d'elles. Regarde ça. J'adore ça. C'est ce qu'on appelle la sélection intelligente. Je peux faire des choses intelligentes avec les sélections. L'autre point vraiment cool, ce sont les points. Je peux appuyer sur le bouton de maintien et faire glisser l'un des points. Regardez ce qui se passe. Ils peuvent échanger leur place. Vous pouvez dire : «   Oui, c'est vraiment bien pour changer de mode. Faisons des icônes dans une seconde. Maintenant, ils n'apparaîtront pas. Si vous n'avez sélectionné qu' une seule chose, vous devez en avoir au moins deux. Ensuite, vous pouvez même en inverser deux. Vous pouvez aussi faire quelque chose de vraiment cool là où vous allez. D' accord, je veux celui-ci. Peux-tu dire que c'est un point fort ? J'ai cliqué dessus. Vous pouvez appuyer sur Commande D ou Contrôle D sur un PC comme nous l'avons fait. Écoutez, j'en ai fait un autre. Faisons-le avec cet exemple ci-dessous. cool avec ces gars, un, deux, trois, quatre, c'est qu'ils sont dans ces 48 x 48 pixels. En fait, nous en avons fait 32 pour les nôtres, donc ils n'étaient pas uniformément espacés Je peux dire qu'il faut que certains tiennent la montre pour les attraper tous. Voilà mon rangement. Super, et la plus magique, c'est ça. Vous pouvez faire glisser les points et dire, en fait j'ai besoin que celui-ci soit comme ça, que celui-ci le soit vraiment, celui-ci va passer par ici. Il m'en faut un autre. J'ai besoin de deux d'entre vous. En fait, je n'en ai pas besoin pour ça. Vous avez compris l'idée, c'est super pratique. C'est aussi très bon pour le texte. Voici quelques zones de texte que j'ai saisies très rapidement, et elles doivent se trouver dans des zones de texte séparées Ils ne peuvent pas être simplement des retours entre eux. Ce que vous pouvez faire, c'est que s' ils sont espacés différemment, je peux dire, les ranger pour moi, si je veux ajuster l'espacement entre eux, Regarde ça. Pratique. C'est la même chose. Tu peux les déplacer. Il faudra peut-être zoomer un peu plus près. J'étais trop loin, c'est un bon point. Si je suis trop loin et que je ne peux pas vraiment faire le point pour une raison ou une autre, faut zoomer et les points grossiront. Je peux dire, en fait, que je veux que tu sois là, et j'ai besoin d'un double de celui-ci et que Member Command ou Control D. Payons avec l'espacement, super pratique Il se peut que vous vouliez les aligner de cette façon. Sélectionnez-les tous, rangons-les. C'est sur l'espacement. Je veux aussi connaître la hauteur, donc je vais dire qu' il faut aligner ces gars au centre. Je peux voir les points et je peux dire : j'ai besoin de toi là-bas et j'ai besoin l'espacement entre eux, ce que je ne peux pas voir Pourquoi ne puis-je pas voir l'espacement entre les deux ? Zoomez. Effectuez un zoom arrière. Si vous ne voyez pas la limite entre les deux, j'essaie juste de réfléchir à voix haute. Nous devons maintenant les distribuer horizontalement. Non, les lignes n'apparaissent pas. Voilà. Tu dois zoomer, Dan. Oh, ils sont là, ils sont là, ils sont là. À un certain niveau, ces petites lignes entre les deux disparaissent également. C'est un bon point. Je ne savais pas que c'était arrivé. C'est bon. Voilà. L'autre chose pour laquelle vous pourriez l'utiliser, c'est pour moi nos cartes. Assurez-vous que tout est inscrit sur la carte. Membre, j'ai ma carte deux et celle-ci devrait s'appeler carte trois. Si vous les avez tous sélectionnés, vous remarquerez que vous obtenez les mêmes points. C'est très utile car il est évident que tout réorganiser est très facile lorsqu'ils sont dans la sélection intelligente Encore une fois, vous pouvez vous déplacer dans les centres. Il vous suffit de vous assurer qu'ils sont rangés ou disposés horizontalement, verticalement selon la façon dont vous les empilez Oh, je l'adore. D'accord, c'est une sélection intelligente et un rangement intelligents à l'intérieur d'une Figma J'adore ça. Faites-moi part de vos commentaires. Est-ce votre fonctionnalité préférée ? Quelle est votre fonctionnalité préférée jusqu'à présent ? J'aime consulter les commentaires pour voir ce qui est, vous dites, « Oh, c'est unique à Figma et génial Pour moi, j'aime bien sélection intelligente, mais dites-moi ce que vous en pensez. D'accord. Ça va être ça. Oh, une dernière chose est que si vous dessinez des icônes et que vous ne les avez pas mises dans un cadre comme celui-ci, disons que je dessine cette icône. Outil cercle, qui est l'outil OK et pour l' outil rectangle. Donc, c'est vous qui le concevez. Je ne suis pas sûr de ce que c'est. C'est un homme très costaud pour la page de compte ce que je fais et j' ai un autre truc ici et vous dites que j'ai ces deux choses. Ce qui va finir par se passer, c' est que ça va mettre de l'ordre, super, et tu te dis : « OK, je veux changer les choses Tu te demandes : « Qu'est-ce qui se passe ? C'est parce que ces gars ne sont pas groupés. Je dois m'assurer que ce truc est soit dans un cadre, soit dans un groupe. On n'est pas ce que je voulais. Sélection du cadre. Maintenant, c'est une unité. Maintenant, je peux les ajuster comme je l'imaginais. C'est ça. C'est une sélection intelligente et du rangement dans une figma. Au revoir. 57. Conseils et astuces pour utiliser des images dans Figma: Dans cette vidéo, nous allons parler des images contenues dans Figma Nous en avons déjà fait un peu, mais les images comportent de nombreuses nuances, différentes manières de les intégrer Nous allons examiner quelques notions de base de la retouche d'image, nous allons jouer avec la saturation, le contraste et la température. Allons-y et apprenons tout ce qui a trait aux images. Il existe donc de nombreuses façons d'intégrer des images. Nous pouvons y aller, aller dans Fichier et, euh, placer des images. J'utilise celui-ci assez souvent. Raccourci que vous pouvez apprendre en fonction de votre flux de travail. Dans ce cas, Shift Command K, ce sera Shift Control K sur un PC. Vous pouvez utiliser cette méthode pour apporter une image, ou vous pouvez descendre ici et au lieu d'insérer un rectangle, vous pouvez insérer une image. Ou vous pouvez simplement le faire glisser depuis votre bureau, le faire glisser vers l'intérieur, et il entre en ligne. Le seul problème lorsque vous les importez depuis votre bureau, est que s'il s'agit de fichiers vraiment volumineux, ils sont bien trop volumineux. Je vais utiliser mon Command Shift K dans vos fichiers d'exercices. Il y a quelques images. Ils sont tous basés sur un portefeuille. Ce qui est cool, c'est que vous pouvez en ajouter plusieurs. Je veux ce premier groupe ici, je vais l'ouvrir et vous remarquerez que votre curseur se met à jour. Vous voyez, j'ai six images, et je peux dire que je veux qu'il ait cette taille, cette taille, et que vous les obteniez dans une taille plus appropriée. Cela peut être utile. Voilà. Lorsque vous redimensionnez une image, si vous saisissez le coin et que vous la faites glisser vers l'extérieur, vous remarquerez que la hauteur et la largeur sont bloquées, mais si vous saisissez les côtés, non, c'est une nouvelle fonctionnalité. Il l'a redimensionné Je remarque juste ici que c'est activé par défaut maintenant. Verrouillez le rapport hauteur/largeur. Si je l'éteins, je prends le côté maintenant, regardez ce qui se passe. Que fait-il ? Cela change le cadre dans lequel elle se trouve et fait en sorte que l' image le remplisse. Vous pouvez donc également suivre cette voie, et il le redimensionnera pour essayer de remplir au mieux la forme que vous avez choisie , car c'est ce que je veux Je veux cette autre image ici. J'utilise le raccourci Mcmand Shift K. Vous pouvez utiliser Control Shift K sur un PC ou simplement utiliser les méthodes les plus longues. Je vais l'apporter, et ce que je veux faire , c'est le faire glisser d' une taille aléatoire, et je vais le mettre ici. Ce que je veux faire, c'est entrer dans ce cadre. Ce que je veux faire, c'est sélectionner tous ces éléments et les déplacer vers la droite sans la boîte violette. Vous pourriez cliquer dessus et dire, je veux récupérer tout ce qui se trouve ici, que nous allons le sélectionner. J'ai juste cliqué sur le premier, j'ai maintenu la touche Shift enfoncée et je l'ai saisie Mais ce que j'ai tendance à faire, si vous n'êtes pas déjà plein de raccourcis, souvenez-vous que vous pouvez maintenir enfoncée la touche Commande d'une touche Ctrl ou d'un PC pour sélectionner quelque chose à l'intérieur. Vous le faites également pour une sélection. Je vais maintenir la même touche enfoncée, Commande ou Contrôle, Mac ou PC, et simplement faire glisser une boîte autour de tout cela pour qu'elle saisisse tout ce qu'il contient Je vais dire «   vous » ou « par ici ». Il se déplacera assez bien vers la droite en ligne droite. J'aime simplement maintenir la touche Shift enfoncée et la forcer à le faire. Je vais donc dire que vous êtes là et que je veux que cela soit placé dans le coin supérieur. Est-ce que je veux qu'il se bloque dans les coins ? Voilà. R Je m'assure juste que c'est à l'intérieur de ce cadre. Je vais le renommer Hero Box. Je sais que tout cela est ma boîte à héros, et c'est mon image de héros Le héros est le mot généralement donné à cette boîte. C'est mon image de héros, l'image de mon grand produit. Ce que je veux faire, c'est rompre le lien pour le rapport hauteur/largeur afin que je puisse le faire glisser et faire remplir l'espace que je veux. Je veux que ce soit 50, 50 et vous remarquerez que cela s' adapte au mieux au cadre que j'ai fait glisser N'oubliez pas que je peux le faire glisser de plus en plus petit, il fait de son mieux pour le remplir. C'est au milieu de ma page. Vous avez remarqué que j'ai trouvé le milieu en ne faisant rien vraiment, je l'ai simplement fait glisser près de l'endroit où se trouve le milieu de la page Ça ne l'est pas. Pourquoi ne claque-t-il pas au milieu Ce que je pourrais faire, c'est cliquer sur ce cadre extérieur et dire, qui êtes-vous ? Vous avez une largeur de 12 40, donc je vais m' assurer que c'est 1240/2, et que nous sommes indéfiniment la moitié. Normalement, il s'enclenche Maintenant, une autre façon d' importer une image est de commencer par une forme. Nous pouvons commencer par n'importe quelle ancienne forme, mais nous allons choisir une ellipse, car les rectangles sont trop faciles. Ce que vous pouvez faire, c'est qu'en gros, ce qui se passe avec celui-ci ici est un hit escape pour revenir à mon outil de déplacement, maintenez la touche commande enfoncée pour cliquer dessus. Cette image, ou est-ce qu'elle se trouve dans mon panneau Lays. Il est là. Cette image est en fait un rectangle rempli à l'intérieur d'une image. Ce cercle est un remplissage mais avec une couleur à l'intérieur. Ce que vous pouvez dire, c'est que nous ne sommes pas obligés de le supprimer. Nous pouvons simplement le changer. C'est comme le faire passer d'un solide à un dégradé. Mais on peut le changer en image, bizarrement. Je vais vous montrer les différentes manières de régler ces images. Pourquoi ? Principalement parce que vous allez vous procurer des modèles et vous demander : «   Comment diable ont-ils fait ça Comment diable ont-ils fait Eh bien, maintenant tu le sais. Eh bien, après cette vidéo, vous le saurez. Je vais cliquer dessus et dire, au lieu d'un dégradé solide ou non. Ah. Une image. Vous cliquez sur une image et dites que je vais la télécharger depuis mon ordinateur. Je vais choisir celle-ci et je vais la bloquer. Cool de faire la même chose au lieu de simplement le faire glisser, vous le remplissez Vous pouvez également faire autre chose. Prenons une autre forme aléatoire, le même processus, juste une manière différente de le faire. J'ai une étoile. Je tiens ma chemise pour que ce ne soit pas une étoile molle. Combien de faces vais-je mettre en huit ? Ce que je vais faire, c'est attraper ce type et le traîner à l'intérieur. Est-ce que je peux le faire ? Je ne sais pas si je pourrais. Je sais que je peux l'importer et l'apporter . Faisons-le différemment. Ce que je vais faire, c'est prendre mon oh, non, il y a deux façons. Faisons entrer une image avec le raccourci Command Shift K, Control Shift K, un PC. Je vais trouver une image. est bon. Je clique sur Ouvrir. Au lieu de simplement cliquer et glisser comme nous l'avons fait, je vais annuler et je dois tout recommencer Je peux simplement cliquer à l'intérieur d'un cadre Pouvez-vous voir ce qu' il a réellement saisi mon étoile et l'a remplie de cette image. C'est une autre façon d' apporter des images. Pourquoi choisir un moyen alors que vous pouvez en avoir 72. Mais maintenant, vous le savez, vous pouvez le classer et le porter. Vous pouvez utiliser l'option ci-dessous pour importer une image, vous pouvez utiliser un raccourci. Vous pouvez le faire glisser depuis votre bureau. Lorsque vous le faites glisser , vous pouvez le placer directement dans une forme existante ou prendre une forme existante et changer le fond de solide en image. Utile. Non, je voudrais aborder quelques notions de base en matière de photos. Fais-le pivoter. Si vous cliquez dessus, vous pouvez le faire pivoter en maintenant simplement l'extérieur. Il y a cette prise d' avantage, ce n'est pas ce que je veux. Si vous survolez juste à l'extérieur, vous obtenez le type de rotation traditionnelle Si vous maintenez la touche Shift enfoncée, elle sera verrouillée dans Qu'est-ce que c'est ? Des multiples de 15 degrés ? Oui, c'est ce qu'il fait. Ou vous pourriez décider, en fait, que je vais juste taper. Il doit être à 180 degrés, à l'envers. À vous de le retourner. Faites-le pivoter. Boup. Ajoutez vos propres effets sonores. Faites juste une dernière chose et je voudrais vous montrer quelques techniques de retouche d'image de base. Ce n'est pas un éditeur de photos complet, mais il fait assez bien les bases. Disons que je veux une image sur notre arrière-plan. En fait, faites-le d'abord sur le mode de base. Regardons celui-ci. J'utilise celui-ci ici. C'est l'une des images des fichiers et ce que je veux faire, c'est que vous pouvez aller ici, cliquer sur l'image. Ici, tu as les bases. Vous avez l'exposition, le contraste, la température de saturation, les tons clairs et les ombres au cas où vous ne sauriez pas lire, et vous pouvez simplement les faire glisser. Exposition, si vous voulez la baisser, faites-la glisser vers la gauche. Soulevez-le. Voilà. Je ne sais pas, ce trucs vraiment basiques sur Photoshop, donc il n'y a pas grand-chose là-dedans. En noir et blanc, faites glisser la saturation vers le bas. Pour le réchauffer, faites-le glisser vers la droite. Pour le rendre plus frais, faites-le glisser vers la gauche. Modifiez la température de l'ensemble de l'image. Lorsque vous travaillez avec des images de bibliothèque d' archives, elles sont parfaitement correctes et vous n'avez pas besoin d'en faire grand-chose. Lorsque vous avez affaire à des images que vous avez peut-être prises ou un photographe et qui n'ont pas encore été retouchées, vous devrez peut-être jouer un peu plus avec elles . Je le ramène en arrière. Je vais vous laisser expérimenter avec les teintes, la température et les reflets Une chose que je veux vous montrer, c'est que souvent pour, disons, les graphismes, je choisis un graphique que je souhaite utiliser. Disons que c'est celui-ci ici. Ça me plaît. Je veux que ce soit une image de fond. Le problème, cependant, c' est que si je prends ce texte et que je le colle dessus, le déplace au premier plan en utilisant mes crochets. Vous voyez qu'on se perd un peu dans ce contexte ? Tu vois que c'est un peu difficile à lire ? Celui-ci est assez sombre. C'est mieux ici en fait. Le contact devient difficile à lire. Ce que tu peux faire, c'est que je vais l'avoir là. Vous pouvez cliquer sur l'arrière-plan, cliquer sur remplir et cliquer sur Image. Il y a deux choses. L'exposition ne fera que l'assombrir Je trouve que si je veux effacer quelque chose en arrière-plan, je dois le garder riche mais juste sombre pour pouvoir lire des choses. Je vais le réduire un peu pour me faire connaître, puis jouer avec des choses comme les points forts. faisant glisser les surlignages vers le bas, vous pouvez voir les parties très nettes qui se perdent souvent dans le texte Tu peux créer des ombres. Je ne trouve que ces deux-là. Une exposition légèrement réduite permet surligner autant que possible sur l'image. Celui-ci peut descendre jusqu' en bas et je ne pense pas que cela nuit à l'image Vous pourriez augmenter les ombres, y retrouver un peu plus de contraste Cela pourrait les rendre un peu plus chauds et plus riches à cause leurs portefeuilles et de leurs vêtements en cuir chauds La saturation peut également augmenter un peu. Vous pouvez jouer avec ceux-ci. Je trouve de l'exposition et des reflets juste pour les reléguer au second plan. Je n'aime pas ce que j'ai fait. Ça va y retourner, la saturation va revenir. Le texte est désormais beaucoup plus lisible. Maintenant, une dernière chose est, disons que j'ai cette image ici, et je voudrais peut-être l'ajouter à l'arrière-plan ici. Je pourrais juste le faire glisser et c'est parti, je vais y aller, le faire glisser. C'est là-bas. Est-ce que c'est sur ma page d'accueil, c'est vrai ? Je vais le renvoyer au verso en utilisant mes crochets à côté mon PK sur mon clavier, et tu peux le faire Parfait. Il n'y a rien de mal à cela, mais je voudrais vous montrer une autre solution, simplement parce que vous obtiendrez d'autres documents où vous serez surpris de trouver l'image. Nous l'avons déjà fait. Dès que c'est assez clair, j'ai ma page d'accueil et à l'intérieur de ma page d'accueil, il y a une image juste au fond. C'est logique. Mais si je le supprime, je peux réellement ajouter l'image dans le cadre de la page d'accueil. Nous l'avons fait aussi. À qui l' avons-nous fait ? Celui-ci, ici. Nous avions un cercle, souvenez-vous, et nous avons remplacé le remplissage par une image. Nous faisons la même chose, mais c'est bizarre de le faire sur la page d'accueil, même si ce n'est qu'un cadre, mais nous pouvons le faire. Nous allons cliquer sur la page d'accueil. Zoomez sur Shift 2 sur ma sélection. Je dois dire que je ne veux pas remplir de solide, je veux remplir d'image. Je vais télécharger depuis mon ordinateur et je vais trouver celui qui était plutôt cool comme arrière-plan. Sur un Mac, comment prévisualise-t-il les images ? Sur un Mac, vous pouvez appuyer sur la barre d'espace. Je ne pense pas que vous puissiez le faire sur un PC, peut-être que c'est possible, mais vous pouvez avoir des filtres d'espace pour les prévisualiser ou vous pouvez avoir des vignettes plus grandes que J'utilise celui-ci ici, ce Julius Trost ouvert et vous remarquerez qu' il est en arrière-plan Maintenant, je peux modifier un peu l' exposition. Vous voyez à quel point c'est peut-être un peu plus étrange, ce n'est pas trop mal. Mais je veux le rendre plus subtil. Je vais réduire légèrement l'exposition et la faire glisser un peu vers le haut, trouver mes points forts et les faire glisser vers le bas. Vous en retirez simplement la netteté et vous pourriez décider de réduire la saturation. Peut-être un peu plus d'exposition. Vous voulez que ce soit quelque chose de subtil en arrière-plan. Tout ce que j'ai dit, c'était une dernière chose. Enfin, dernière chose, vous pourriez décider qu'en fait, j'aime bien cette image. Peut-être que tu en as des copies et que tu te dis : «   A, j'en ai deux Je veux le même cercle, mais j'ai besoin d'une image différente. Vous pouvez simplement aller ici, cliquer sur l'image, et vous pouvez dire « télécharger depuis un ordinateur » et en et vous pouvez dire « télécharger depuis choisir une autre, à 1 h 00 du matin. Je l'ai mise ici et je l'ai remplacée. C'est bon. Il s'agit beaucoup d' images réunies dans une seule vidéo. J'espère que cela vous a été utile. Je le fais principalement parce qu'il y a tellement de manières différentes d' aborder les images dans la figma, et je me souviens que lorsque j' apprenais, je me disais que les images sont étranges, parfois elles vont bien C'est parce que parfois ils sont simplement insérés sous forme d'image, ce qui est logique Parfois, il s'agit d'images à l'intérieur d' un cadre de remplissage. C'est bon. Je vais arrêter de parler d'images. Eh bien, passons à la vidéo suivante. Nous allons faire d'autres images. Mais c' est ce que nous ferons dans la prochaine vidéo, je vous y verrai. 58. Masquage et recadrage d'images dans Figma: R : Très bien. Cela devrait s'appeler How to make a really big mess of your Figma Design File Mais en réalité, tout tourne autour du masquage. Nous allons utiliser des formes pour masquer les images, et il existe trois méthodes différentes. Je veux tous vous les montrer au cas où vous les rencontreriez avec les fichiers d'autres personnes Il y a des avantages et des inconvénients pour les trois. De plus, nous rédigerons également des SMS. Nous recevrons un texto. Vous pouvez choisir une meilleure image à insérer dans votre texte. Ça a l'air horrible. Mais c'est là que nous nous sommes retrouvés. Alors allons-y. Commencez à le faire. Examinons les trois différentes techniques de masquage. Nous allons commencer par le masque à la vanille. Je les ai nommés. Personne d'autre ne les a nommés, juste moi. Juste pour leur permettre de se différencier pour que nous apprenions. Nous allons commencer par la version originale et ce que nous allons faire, c'est importer une image. Supposons que nous ayons importé celui-ci. Le recadrage à la vanille consiste simplement à introduire l'image , puis à la remplacer par image. Il se remplit par défaut, vous pouvez le passer en mode recadrage et vous vous dites que rien ne se passe Ce que vous pouvez faire ensuite, c'est saisir le cadre et le faire glisser. Nous l'avons recadré en double-cliquant sur le fond. Voilà. J'utilise le mot recadrer et masquer de façon interchangeable, Figma l'appelle masquage. C'est la même chose. Pour y revenir, il suffit de cliquer dessus et de cliquer sur l'image ici pour qu'elle reprenne vie. Remplir par défaut. Cliquons sur Remplir. Ce sera le cas, si je le redimensionne tant que les ratios d'aspections sont désactivés. Je peux le redimensionner et il essaiera toujours remplir la forme que j'ai dessinée ou laissée Je vais passer à la culture de la vanille. Vous pouvez décider que ce qui est étrange , c'est de voir le bord ici. Le cadre est très facile à saisir car ses poignées sont très transparentes. Tu peux le faire glisser. Vous pouvez faire pivoter le cadre. Cependant, l'image ne semble pas avoir de lignes bleues autour de l'extérieur. Il a l'équivalent. Tu ne peux tout simplement pas les voir. Alors attention, je peux faire glisser le bord ici, maintenir la touche Shift enfoncée, cela redimensionnera proportionnellement. Je peux faire la même chose avec la rotation. N'oubliez pas d'avoir plané un peu plus loin ici. Il y a cette zone de rotation magique, et vous pouvez également la faire pivoter . Cliquez dessus et faites-le glisser pour le déplacer. Je vais devoir agrandir la mienne pour qu'elle s'adapte, afin que vous puissiez ajuster l'image , la séparer du cadre. Demandant. C'est le masque à la vanille. Apportez l'image, passez-la au recadrage, modifiez-la. Il existe la méthode des deux formes. En fait, tout d'abord, pour ce qui est de la version originale, jetez un œil au panneau Layers ici. Tu peux voir ça ? C'est vraiment simple. C'est juste une image avec le nom de l'image. n'y a rien à cela dans le panneau des couches. C'est très clair. Il suffit de penser à entrer ici pour l'ajuster. C'est cool. La méthode à deux objets est donc lorsque vous avez une image ou, malheureusement, une forme et une image. Je vais mettre le mien sur le devant. Si je veux masquer ces deux, il me suffit de les placer l'un au-dessus de l'autre, de les sélectionner tous les deux. Vous devez les sélectionner tous les deux et ici, une petite icône apparaît indiquant de les utiliser comme masque. Tu es comme si ça n'avait pas marché. étrange à propos de ce masque c'est que la forme doit être en bas. J'ai juste sélectionné la forme. J'utilise mes crochets à côté de ma clé PKey pour la pousser vers l'arrière ou vous pouvez cliquer avec le bouton droit de la souris et dire envoyer pour revenir Je dois encore les sélectionner tous les deux, donc je dois essayer de les récupérer tous les deux maintenant, ce qui est assez simple et maintenant je dois passer au masque. C'est l'objet arrière qui masquera l' image en haut. Mais c'est ainsi que cela fonctionne. Vous pouvez voir pour le modifier, vous pouvez sélectionner dessus et vous pouvez soit double-cliquer dessus pour y accéder, soit probablement plus facilement, surtout lorsque vous apprenez à cliquer dessus une fois. Ici, tu vois la différence. Cet autre objet, qui était celui-ci, sur lequel on travaillera là-bas. Je vais le déplacer vers le haut dans mon panneau Lays pour qu'il soit plus facile de le comparer. C'était la méthode à la vanille, où nous apportions simplement une image et la recadrions Celui-ci fonctionne différemment. Nous nous retrouvons avec la même partie, nous avons toujours un masque, mais dans ce cas, il s'agit d'un groupe de masques contenant deux éléments mon vecteur en bas et mon image en haut. Cela facilite un peu les choses lorsque vous voulez ajuster un peu le swing de l'image. OK ? Je peux sélectionner sur l'image, puis j'ai ces jolies petites poignées qui apparaissent et je peux maintenir la touche Maj enfoncée, la réorganiser , la faire glisser Si je veux travailler sur le cadre, je peux cliquer dessus et dire : je veux t' agrandir un peu et peut-être te faire pivoter. Vous pouvez travailler dessus de façon un peu plus pragmatique. Je ne sais pas C'est plus facile de travailler dessus, mais c'est un peu plus confus ici dans le panneau des couches. Facile à regarder, dur à regarder, mais probablement plus facile à utiliser. Il a indiqué qu'il y avait trois options de masquage. Il y en a. La troisième méthode est la forme du premier masque. C'est-à-dire que vous dessinez simplement une forme, n'importe quelle forme. Je vais dessiner une ellipse. C'est peut-être ça, tu aurais pu dessiner une flamme, peu importe. Mais au lieu d'avoir l' image en haut et de faire un masque, vous l'avez sélectionnée et vous dites, en fait, je veux la transformer en image. Quel genre d'image avez-vous ? Je vais dire que je vais en choisir un ici, et je le fais. C'est juste une méthode légèrement différente de la première, la vanille, où vous commencez par l'image, puis vous découpez les bords. Dans ce cas, vous commencez par la forme et vous la remplissez d'une image. Si je passe du remblai au recadrage, je peux faire à peu près la même chose. Je peux jouer avec le fond. Vous ne comprenez pas les poignées, mais vous pouvez faire de même. Comme celui à la vanille, différentes manières de l'aborder. Vous trouverez d'autres tutoriels où vous vous dites « J'ai pensé que vous deviez importer l'image puis la recadrer ou devriez-vous introduire une forme et l'ajouter, puis la recadrer ? Ou avez-vous deux formes, collez-les l'une sur l' autre puis masquez-les ? Ils sont tous pareils. Parce que regarde ça. Est-ce que j'en ai une autre copie ? Je le sais. Je vais prendre ça et je peux faire exactement la même chose que l'ellipse que je peux vous dire Tu n'as plus rien à rassasier. En fait, vous allez avoir un remplissage, mais ce sera un solide. Non, je vais passer à l'image. Je vais choisir une image. Je vais choisir cette image de Scott. Je vais me débarrasser de l'accident vasculaire cérébral, et nous nous retrouverons exactement au même endroit. Je peux toujours l'ajuster, mais je l'ai ici dans les couches, vous pouvez voir que cela semble différent. C'est ce que je veux vous montrer c'est que je travaillerais là-dessus. Je dirais : « C'est quoi ce bordel ? Ou vous allez regarder ça en vous demandant Où est l'image ? Comment puis-je y accéder ? Juste une autre façon de travailler. Je clique dessus, je vais sur Crop et maintenant je peux travailler dessus. De la même façon. Même résultat final, juste deux manières différentes de le faire. Vanilla, commencez par l'image. La méthode à deux formes où nous superposons simplement deux objets et nous créons un masque Ensuite, la dernière où vous commencez par une forme et vous ajoutez un fond qui est une image à recadrer. Cela vous a-t-il été utile ? Allons plus loin. Faisons la saisie. Si je dois taper outil, je vais taper mon nom. Je vais appuyer sur Escape. Je vais utiliser mon Ktol pour faire le dimensionnement juste pour que la police soit belle et grande Je vais prendre mon outil de saisie, le sélectionner, trouver une jolie police noire, belle et épaisse, et je pourrai faire de même. Regarde ça. Il y a beaucoup de blanc. Regarde, imagine ce que je pourrais faire. Hmm, je clique dessus et je pars, image. Tu y es déjà. Tu es du genre : « Ce n'est pas difficile ». Ça ne l'est pas. Allons-y. Nous avons une image en arrière-plan. Avant, si nous voulions l'ajuster parce qu'au moment où il était indiqué de remplir, ce qui signifie que si je change allez dans l'outil de saisie, modifiez le texte. Le texte est toujours modifiable, ce qui est cool. Je vais taper l'intégralité de mon nom. Vous pouvez m'appeler Dan et pouvez-vous le voir développé en fonction des lettres disponibles ? C'est donc rassasiant. Vous pouvez le passer au recadrage, puis vous dire : « D'accord, ça ne peut pas être sur mon outil de saisie Je dois être sur mon outil de déplacement. Oh ça n'a pas marché. Allons-y. Oh, le type. Comment puis-je attendre là-bas ? Je ne suis pas sûr. Oh, c'est toujours pour Phil. J'ai une récolte. Nous y voilà. Je ne sais pas ce que j'y ai fait. Je te jure que j'ai déjà fait du crop, mais clairement non. OK, donc je peux faire glisser mon image, en maintenant la touche Maj enfoncée, d'accord, de la positionner où je veux, d'accord ? Et si je veux changer de type par la suite, d'accord, je dois utiliser l'outil de saisie. Et comme nous sommes potes, tu peux m'appeler Dan. Il y a une image terrible de ce que nous faisons parce que vous ne pouvez pas vraiment voir mon texte. C'est bon. Je veux m'y remettre. Cliquez sur le remplissage comme avant, et je peux ajuster celui-ci pour essayer d'en trouver d'autres. Il se peut que je doive faire le contraire de ce que j'ai fait tout à l'heure, en maintenant la touche Maj enfoncée et en essayant de mettre toutes les parties en cuir au second plan Il se peut que je doive jouer avec le contraste et l'augmenter un peu Aucune exposition, augmentez-la un peu. OK ? Ce sont les points forts, réduisez-les, il se peut que je doive les évoquer. Ou dans ce cas, les ombres. Je veux qu'ils soient plus légers. OK ? Ça ne marche toujours pas aussi mal. Tu as compris l'idée. Il y a donc quatre manières de recadrer si nous incluons le texte à la fin Oui, je le veux vraiment ici parce que je me souviens que c' était très confus. Si vous ne faites rien d'autre, le moyen le plus simple est probablement d'utiliser la méthode à deux formes qui consiste à associer l'image et la forme, à vous assurer que l'image se trouve en haut, à les sélectionner toutes les deux et à appuyer sur le bouton du masque. Mais vous allez les croiser et vous direz : N'est-ce pas ? Comment puis-je le modifier ? N'oubliez pas de cliquer sur l'image pour modifier le recadrage et si vous passez la souris ici comme nous l'avons fait dans la dernière vidéo, nous pouvons télécharger une nouvelle image pour la remplacer C'est ça. Masquage, barre oblique, recadrage terminé. Rendez-vous dans la prochaine vidéo. 59. Images et plugins gratuits pour Figma ma: Dans cette vidéo, nous allons voir comment obtenir des images gratuites que vous pouvez utiliser à des fins commerciales dans le cadre de vos projets Figma, et je vais vous montrer quels sites Web et vous montrer comment utiliser certains plugins Ils sont vraiment faciles. Allons-y et faisons-le. En attente du chargement de celui-ci. Voilà. Il est chargé. Je vais vous montrer d'où je les trouve. C'est bon. Ainsi, lorsqu'il s'agit de rechercher des images à utiliser dans vos documents, vous recherchez probablement que vous pouvez utiliser à des fins commerciales. Donc, si le client dit : «   Oui, j'adore ça », et ensuite tu dois partir et en trouver un autre, ce n'est pas drôle. Vous recherchez des produits sous licence commerciale, il existe deux très bons endroits pour les versions gratuites. Unsplash.com. Et un autre concerne les pixels. Tu as peut-être le tien. Faites-moi part de vos commentaires. Si vous en avez un autre que vous pourriez utiliser et que vous aimez et que d'autres pourraient également apprécier. Ce qui est cool, c'est que disons Unsplash, celui que j'utilise le plus, ils en ont un tas de gratuits. Ceux qui ont peu d'avantages pour le moment sont ceux qui sont haut de gamme. Ils les appellent Unsplash plus. Je les évite, et disons que je veux que nous fassions une recherche. Allons-y, que faisons-nous ? OK ? Et vous trouverez un tas de trucs, et disons que je veux celui-ci, il vous suffit de les télécharger et de les utiliser. Vous pouvez y jeter un œil et voir quels sont leurs droits commerciaux, mais vous découvrirez que tout ce qui se trouve sur ce site est gratuit sous licence Unsplash. C'est très clair. Vous pouvez le télécharger gratuitement. Vous pouvez les utiliser à des fins commerciales, et vous n'avez pas besoin d'autorisation. Bien que l'attribution soit appréciée. Vous pouvez laisser un lien ou , quel que soit le photographe , le saluer. Tu ne peux pas y aller et les vendre ensuite. Vérifiez si vous les utilisez pour quelque chose d'un peu étrange, mais pour une utilisation normale, les pixels Unsplash sont excellents téléchargement depuis le site est une chose que vous pouvez réellement aller droit au but et installer un plug. OK, donc ici bas, le vôtre sera différent si vous utilisez le compte gratuit, mais ce petit panneau d'actions. Vous pouvez aller dans Plugins, et je vais taper des images gratuites. Encore une fois, vous recherchez ceux qui ont fait l'objet de nombreux téléchargements, beaucoup d'entre eux. Je vais aller taper Unsplash parce que je sais qu'il existe un plugin Et tu peux juste cliquer ici, je vais courir. Donnez-lui une seconde pour le charger, et c'est parti. Je peux simplement cliquer dessus et ils apparaissent. Je vais annuler ça. Vous pouvez déjà cliquer sur une forme et cliquer dessus pour la coller à l'intérieur. Maintenant que nous savons comment utiliser le recadrage, nous savons comment passer au recadrage et nous pouvons voir les bords, nous pouvons commencer à l'ajuster. Oui, c'est ça. Ce sont des images gratuites à l'intérieur de Canva. Vous pouvez soit utiliser les sites Web soit utiliser le plugin. Super facile. C'est bon. Je vous verrai dans la prochaine vidéo. 60. Créer des images IA dans Figma ma: Là-bas, nous allons utiliser les intelligences artificielles pour rendre les images commercialement utilisables à partir de zéro Elles n'existaient pas. Nous les avons simplement saisies et les machines les ont fabriquées. Merci, machines. Permettez-moi de vous montrer des trucs et astuces pour les réaliser, obtenir le bon éclairage et bien composer. C'est bon. Allons-y. C'est bon. Je vais sélectionner la page d'accueil, décaler de deux pour zoomer. Je vais remplacer cette image ici. Si vous ne voulez pas garder celui-ci, en fait, je vais les mettre là-bas, et je vais dessiner un rectangle et je vais dessiner un cadre en fait. Vous n'êtes pas obligé de commencer par un cadre. J'en ai vraiment envie. Parce que je veux qu'il soit d'une taille précise. Quelle que soit la taille que vous dessinez, l'IA le remplira . OK, maintenant ici, c'est l'une de ces fonctionnalités où vous avez besoin d'un compte payant. Je suis presque sûr que si vous êtes sur le compte gratuit, vous en avez besoin , et vous allez utiliser celui-ci qui dit de créer une image Il ne s'agit pas de nous battre. Le vôtre aura un aspect différent et fonctionnera probablement différemment. Chaque fois que je charge Figma, c'est un peu différent. L'un des aspects frustrants d' un outil de conception UX est qu'il ajuste toujours l'UX. Quoi qu'il en soit Je vais taper un portefeuille en cuir sur un bureau en bois cher. Vous allez devoir déterminer le type d' invite que vous souhaitez utiliser C'est ce que j'ai en tête. Je vais cliquer sur Créer. Nous allons attendre que tout cela se produise. Cela se produit dans le cloud et il suffit de le télécharger, ce qui peut prendre un peu de temps. Je suis en train de stagner. Je n'aime vraiment pas cette animation. C'est bon. Je vais passer directement à ce qui est fait. Cela fonctionne. Très bien, ils ont probablement mis une minute de plus pour terminer. Oh, je l'aime bien. Ensuite, je me demande, d' accord , quels changements voulez-vous apporter ? Apportons des modifications ici. Disons que je veux une vue aérienne ou une vue de haut en bas. Vous pouvez apporter des modifications à ce truc, comme «   All I want it not it be a wood, but it be not be a wooden desk, mais peut-être un bureau en bouleau ou je ne sais pas ». Je ne connais pas beaucoup de types de bois. Mais vous pouvez faire des ajustements au fur et à mesure. Je joue avec les angles de caméra ici, passons à la partie suivante. Bien, qu'est-ce qui décrit le mieux ? C'est celui que je veux. C'était l'original. C'est le nouveau. Vous pouvez cliquer entre eux et conserver celui que vous voulez, vous pouvez choisir, c'est clair. quoi ai-je cliqué ? Je vais y retourner. C'est un bon point. Je vais utiliser mon outil de déplacement, cliquer sur cette image, cliquer à nouveau sur le côté de celle-ci. Je l'ai sélectionné ici. Je vais retourner à ma création d'image. OK. OK, donc je viens découvrir qu'une fois que vous aurez quitté ce flux, je ne pense pas que vous puissiez le remettre dedans. va donc falloir que je recommence. Je pense. Si tu le découvres, tu peux le faire. Fais-moi savoir. C'est peut-être quelque chose qu'ils mettent à jour. Il s'agit d'une version bêta de l'IA. Alors est-ce que je dois tout recommencer ? Ce que je vais faire, c'est faire cette vue Birds Eye, et je vais dire Bright lighting. Il se peut que vous vous comportiez différemment. Vous pourriez dire, vous savez, mauvaise humeur ou vous êtes peut-être meilleur au cinéma et à la télévision que moi ou en photographie et trouver différents angles d'éclairage, peut-être à l'extérieur, à la lumière naturelle, à l'éclairage en haut à gauche Tu peux lui dire ce que tu veux. C'est bon. C'est peut-être mieux. D'accord ? Donc oui, l'IA est assez puissante et n'existait pas dans le monde. D'accord ? C'est un peu difficile, les portefeuilles Scott vont vraiment avoir des produits physiques Mais pour les espaces réservés ou les images de soutien, oh, génial. Maintenant, je pourrais en faire une série et dire de faire en gros plan sur les coutures et en utilisant des angles différents, un éclairage différent, mais vous voyez l'idée Cela va modifier cette interface. Mais je ne sais pas, Los Angeles se porte vraiment bien. Le monde vous appartient donc. L'une des choses intéressantes à ce sujet, cependant, c'est de regarder ça. Si je fabrique un cadre qui ressemble à ce genre de boîte aux lettres, je fais exactement la même chose, mais je vais ajouter un petit plus. Oh. Ajouté avec une lampe de bureau. Je vais en dessiner un autre, et nous allons passer à la fin. C'est bon. J' ai ma lampe de bureau. Oh, je l'aime bien. C'est comme si c'était recadré ici En fait, si nous allons ici et disons que nous voulons le recadrer, nous savons que nous n'avons pas besoin de ce remplissage blanc. C'est juste là pour le fun. Celui-ci ici, cette image. Si j'y vais et que je dis, je veux qu'il soit recadré, vous voyez ? Cela a en fait agrandi l'image, elle ne l'a pas vraiment recadrée. Il a simplement créé ce rapport hauteur/largeur standard et l'a simplement adapté à ce que vous avez créé Il y en a peut-être d'autres que vous ne pouvez pas voir. C'est juste quelque chose dont il faut être conscient pour le moment. Va changer cette interface d'IA. JE*****. Mais voilà. Il s'agit de créer des images utilisables commercialement à l'aide de l'IA, de redresser les figma, et les résultats sont l'aide de l'IA, de redresser les figma, et les résultats Très bien, le vôtre le sera dans le futur. Les résultats seront encore meilleurs. J' ***** l'interface et d'autres commandes seront disponibles. Si ça change beaucoup, je viendrai le refaire. Mais j'espère que ce n'est pas trop différent, et bonne chance avec l'IA. Je vous verrai dans la prochaine vidéo. 61. Projet de cours 11 - Images: Très bien, c'est l'heure du projet de classe. Je veux que vous intégriez vos images à votre design. OK, alors revenez à votre brief et assurez-vous de ne pas utiliser de portefeuilles Déterminez vos images. Vous pouvez les obtenir depuis Unsplash ou utiliser l'outil AI si vous y avez accès, si vous êtes dans la version Pro, puis commencer à remplir votre page d'accueil sur votre ordinateur Hi Fi Maintenant, tes cartes seront différentes des miennes. OK, alors où est le tien ? Vous avez peut-être donné différents exemples. Vous avez peut-être utilisé des cercles au lieu de rectangles comme moi, ou comme celui-ci ici où le recadrage des images est plus intéressant C'est à vous de décider, mais je veux que vous y alliez, que vous preniez les images. Je veux que vous essayiez également d' utiliser le plug-in pour les pixels, l' unsplash ou quoi que ce soit d'autre. Ça ne me dérange pas. Je veux que tu l'expérimentes. Encore une fois, l'IA, si vous y avez accès, n' oubliez pas votre personnage et votre brief, en vous assurant de choisir des images qui reflètent votre personnalité, et de prendre une Téléchargez-le sur le projet Slash Assignments et emmenez-nous également sur les réseaux sociaux, car il est intéressant de voir projets de chacun commencer à se remplir, avec des images, des polices et tout le reste C'est une période excitante. Très bien, alors allez ajouter quelques images, et je vous verrai dans la prochaine vidéo. 62. Qu'est-ce que la mise en page automatique et les boutons de développement dans Figma ?: Bonjour, tout le monde. Dans cette vidéo, nous allons apprendre ce qu'est une sortie automatique. Et nous allons nous serrer dans nos bras. Oh, oui, nous le sommes. Écoutez, il va faire toutes sortes de câlins. Pourquoi les câlins sont-ils bons avec les sorties automatiques ? C'est parce que c'est génial. Je ne sais pas taper. Allez, tapez. Ça va faire l'affaire. OK, vous remarquerez que le bouton a redimensionné le texte, et je peux faire des choses sympas. Regarde, squdgy squidgy et le texte reste au milieu. Tout est bon et réactif. C'est Autouts et c'est pourquoi nous aimons nous étreindre. Très bien, allons-y . C'est bon. Avant de commencer, il ne s'agit simplement pas d'un avertissement. Les avertissements sont mauvais. Bal de fin d'année. C'est Aout qui est la chose la plus délicate que vous ayez faite jusqu'à présent Et ils sont délicats. Mais ne t'inquiète pas. J'ai refait cette vidéo de nombreuses fois pour essayer de la rendre de plus en plus facile à comprendre Donc ça va être facile, je te le promets. Ce que nous allons faire, c'est vérifier si ce n'est pas déjà fait. Je suis sur un tirage au sort par rapport à tout à l'heure. Je vais me lancer dans le design. C'est bon. Tout d'abord, zoomons sur une page blanche, ou vous pouvez le faire sur le plan de travail. Décrivez les outils de châssis, le FK. Dessine un objet de la taille d'un bouton, et remplissons-le. Je vais utiliser un de mes styles pour que vous puissiez le voir. OK ? Nous avons donc un cadre. Rien ne se passe vraiment. Je vais l'appeler BTN, et celui-ci sera mon petit bouton. Bien, que faisons-nous maintenant ? Qu'est-ce que nous avons fait par le passé ? Cela ne fonctionne pas pour l'outil rectangle. Vous savez, tout à l'heure, j'ai dit : « Hé, les cadres ont des pouvoirs spéciaux. C'est l'un d'entre eux. C'est la mise en page automatique. Ne le faites donc pas avec un outil rectangulaire. Assurez-vous de le faire avec un outil à cadre. Prenez mon outil de saisie, cliquez ici et je vais taper d'ici maintenant. Maintenant, c'est ce qui se passe par défaut, non ? Je vais prendre mon outil de déménagement, cliquer sur l'extérieur et il se trouve en quelque sorte là, n'est-ce pas ? Genre, c'est marrant. Ce que je voulais faire, c'est redimensionner Il me suffit donc de sélectionner le cadre, pas le texte à l'intérieur, mais le parent. Le parent est ce qui se trouve à l'extérieur. Voici l'enfant. Appelez le parent, et ici, il y a un bouton indiquant Autout. C'est très courant d'utiliser le shift a. Et bam, je fonctionne en quelque sorte Changeons le texte de B maintenant à Oh, regardez, il s'agrandit. Mon bouton Capsoc est cassé, je dois donc maintenir la touche Shift enfoncée. Gagnez plus. Oh, il est en pleine expansion. Regardons un peu plus car ce n'est pas tout à fait la taille que je souhaite. Ce que je vais faire, c'est cliquer sur le parent et jeter un coup d'œil. voyez cette icône ici ? Si je retire le O, vous voyez, c'est ce que nous voyons normalement. C'est l'icône du cadre. Annuler, rétablir, annuler, rétablir Vous pouvez voir l'icône, le hachage, puis cette nouvelle icône, qui indique une sortie automatique. Il fait les trucs automatiques magiques. Nous avons également quelques câlins en cours. Si vous ne voyez pas les mots « câlin », vous devrez peut-être zoomer un peu. Mais ce qui se passe, c'est que le parent étreint tout ce qui se trouve à l'intérieur C'est ce qui fait son truc. Ce que nous voulons faire, c'est que si vous passez la souris au-dessus, vous voyez ces petits hachages apparaître C'est le rembourrage, qui se trouve au milieu et qui a été serré dans ses bras par le parent qui l' tenu éloigné des bords par La taille par défaut sera celle sous laquelle vous avez dessiné la taille. Donc, ce que nous allons faire, c'est ici , il est écrit « rembourrage ». Vous remarquerez également le panneau de mise en page. Le panneau de mise en page automatique était nouveau dans votre propriété, il n'y était pas auparavant. Cela vous donne quelques options. Ce que nous allons faire, c'est indiquer rembourrage pour la gauche et pour la droite. C'est le premier. Je vais en faire 24 et 18, en haut et en bas. C'est une taille très courante. Peut-être qu'utiliser des multiples de huit est une bonne chose. Voilà. Nous pouvons y aller et le changer. Retournons acheter maintenant. À l'heure actuelle, le bouton va être redimensionné. Le meilleur, c'est qu'il flotte juste au milieu. Il s'agit d'un bouton qui sera redimensionné en fonction du texte à l'intérieur Si vous devez modifier la taille du bouton, si je clique dessus et que je le fais glisser, cela met fin au câlin Il y a un câlin pour la gauche, la droite, le haut et le bas Si je le fais glisser de cette façon, vous remarquerez qu'il a une taille fixe et qu'il est toujours serré en haut et en bas, mais que la gauche et la droite sont désormais de taille fixe J'ai décidé que tous mes boutons seraient de la même taille car ils ont besoin d'une pile. Je pourrais décider qu'ils seront de 200 pixels. C'est comme ça que tu pourrais le faire. bien, c'est que le bouton permet de voir le texte étiré à l'intérieur. Si vous en avez besoin pour revenir en arrière, ce que vous pouvez faire ici, c'est voir qu'il est indiqué de redimensionner Vous remarquerez que celui-ci est câlin. Écoutez, je peux laisser tomber ça et dire « revenez en arrière », pas « réparer », ce à quoi il est automatiquement passé en mode « retour en arrière ». Allons encore une fois embrasser le contenu. Il essaiera de se serrer le plus étroitement possible par rapport au texte. Si je retire le rembourrage, ce sera un peu plus clair. Je vais essayer de me faufiler complètement autour de lui. Mais si nous ajoutons un peu de rembourrage, exemple 24 ou 8, cela essaiera de vous étreindre, tout en respectant le rembourrage D'autres choses qui pourraient vous déconcerter c'est ce texte et son intérieur. Comme j'ai cliqué une fois, j'ai automatiquement obtenu un redimensionnement automatique de la largeur Si je dis, disons, taille fixe quand je le dessine et que je le fais, ça marchera, vous allez regarder ça en vous demandant pourquoi le texte est-il si haut ? Je l'ai dit pour ce parent ici présent. Écoutez, c'est réglé pour étreindre, mais il n'étreint pas le bord Je n'ai que 24 pixels de rembourrage, mais c'est plus grand que ça C'est à cause de la zone de texte. Si je double-clique, il est réglé cette largeur fixe, ou hauteur automatique. Passons à la première étape, qui est la largeur automatique. La zone de texte elle-même est automatiquement la bonne taille et le parent s'embrasse parce qu'il aime ses enfants C'est une sortie automatique. Il fait plein d'autres choses. Mais pour le moment, je pense que c'est une bonne introduction aux nouveautés d'Audi. Et si vous devez le changer pour une taille spécifique, faites-le simplement glisser. OK, et si tu as besoin d'y retourner, passe à un câlin. D'accord. J'espère que ce n'était pas trop mal. Les autolauts sont super puissants dans Figma. Je vais maintenant faire mien ait un rayon d'angle de huit, et je veux entendre, passer au lissage des virages, juste pour que je ne sais pas, C'est ça. Il s'agit d'un bouton de mise en page automatique à l'intérieur de Figma En fait, encore une chose, si vous utilisez l'outil rectangle, vous n'aurez même pas la possibilité convertir en mise en page automatique. Il ne veut pas le faire, vous devez donc commencer par un cadre. C'est bon, c'est encore une fois. La finale finale. Je vous verrai dans la prochaine vidéo. 63. Projet de cours 12 - Boutons: D'accord, c'est l'heure du projet de classe. Je veux que vous liiez les boutons que vous avez créés plus tôt, que vous auriez pu faire avec le cadre ou le rectangle, que vous repartiez à zéro et que vous créiez un bouton de mise en page automatique Je veux que tu en fasses trois. Il y en aura deux sur la page d'accueil. Je veux que ce soient les boutons qui me serrent les bras. Celles qui, lorsque vous tapez, s'étirent. Ensuite, sur la page de paiement, je veux que vous créiez un bouton d'achat. Et je veux que ce soit un bouton à largeur fixe. D'accord ? Cela signifie qu'il ne s'étreint pas et ne se dilate pas. Il est spécifiquement de 250 x 50 pixels. Je vais te montrer. Donc, ces deux boutons ici, d'accord, qui sont de type et d'extension, et celui-ci sur notre page de confirmation a une hauteur et une largeur spécifiques. Nous l'utiliserons plus tard dans le cours. Maintenant, Figma a changé pour être beaucoup plus facile par défaut. Ce que vous pourriez rencontrer en termes de problèmes, c'est tout d'abord, rappelez-vous que vous ne pouvez pas utiliser un rectangle, vous ne pouvez pas trouver le moyen de le transformer en une mise en page automatique. D'accord. Si je fais un cadre, il est plus facile de créer un autout. Il a une couleur, mais ce n'est pas grave. Je peux voir ce cadre de sortie automatique. Les choses qui pourraient vous causer des problèmes se trouvent ici. Vous avez peut-être ajusté le contenu du câlin, à la fois en haut et en bas pour que le bouton d'étreinte se dilate, et l'autre concerne l'alignement Vous pourriez vous retrouver avec un alignement en haut gauche sur mon outil de saisie maintenant. En fait, colorons-le. Allons faire le plein de couleurs. Allons chercher mon outil de saisie pour le Tiki. Je vais taper dedans, taper dedans. L'autre point est que vous ne trouverez pas les options Autout si vous travaillez avec le type Ce n'est pas l'enfant, vous devez travailler avec un cadre parental. S'il n'y est pas non plus, jetez un œil ici. Est-il converti en cette icône Autu ou s'agit-il toujours d'un cadre ? S'il s'agit toujours d'un cadre, cliquez dessus pour sortir automatiquement, puis vous devriez obtenir ces options. Câlin, câlin, en termes d'alignement, surtout pour votre alignement à largeur fixe, vous pourriez vous retrouver avec quelque chose qui se trouve peut-être en haut à gauche. Vous pouvez voir cet alignement ici. La valeur par défaut est centrée maintenant, ce n'était jamais le cas auparavant. C'est une chose qui pourrait te bouleverser. L'autre est le rembourrage à gauche et à droite. Cela n'a pas vraiment d'importance pour un bouton étiré comme celui-ci que je veux faire ici, un bouton à largeur fixe, mais le moment où vous voulez le serrer dans vos bras est important. Si je le serre dans mes bras et que le rembourrage est réglé sur zéro et zéro , c'est évidemment le cas Quand je le fais pour ce bouton, c'est une largeur fixe. N'oubliez pas que c'est juste réglé sur réparé. Je l'ai réglé à 250. Si je réduis le rembourrage gauche et à droite à huit, vous remarquez que cela ne change rien vraiment Le rembourrage change, mais comme j' ai une largeur fixe, cela n'a pas vraiment d'importance Si j'en fais 120, oh, fais-en 250. Cela ne fait rien. Pang n'a pas d'importance. Sur un boîtier fixe. Voilà. Alors fabriquez vos boutons, et je veux que vous m' envoyiez une capture d'écran de ce groupe ici. C'est donc dans vos fichiers d'exercices. Envoyez-moi le groupe ici. Je ne vais pas pouvoir vérifier si vos boutons fonctionnent ou non. Faites-nous savoir dans les commentaires si vous rencontrez des problèmes et si vous les corrigez, et voyez si vous pouvez répondre aux questions des autres, nous nous ferons part des problèmes que vous avez rencontrés. Ils modifient le fonctionnement des mises en page automatiques pour les rendre plus faciles. Avant, c'était une vidéo très compliquée pour apprendre cela. Je suis sûr qu'il y a encore quelques bizarreries et je vais vérifier les commentaires C'est bon. Fabriquez des boutons. Je vous verrai dans la prochaine vidéo. Oh, une dernière chose. Inutile de voir celui-ci sur les réseaux sociaux, car tout le monde aura les mêmes boutons. J'allais juste le dire maintenant et plus encore dans différentes couleurs. Ce n'est pas très excitant. Téléchargez-les certainement dans la section du projet, et nous verrons vos boutons un peu plus tard dans un design plus complet, plus complet et plus impressionnant C'est ça. Je vous verrai dans la prochaine vidéo. 64. Mise en page automatique pour la navigation espacée dans Figma: Un. Dans cette vidéo, nous allons utiliser Auts. Même type de fonctionnalités que dans la dernière vidéo, mais nous allons utiliser plusieurs éléments à l'intérieur d'un louts parce que c'est assez cool comme ça Je peux déplacer des objets. Il y a un rembourrage à l'extérieur que je peux régler comme notre bouton. Vous pouvez voir que le haut et le bas sont maintenant à 50. C'est énorme. Tout s'ajuste. Je peux jouer avec un rembourrage Je peux jouer avec un écart entre les deux. Je peux le faire de deux pixels, très serré. Je peux dire, d'accord, je n'ai pas besoin de cette pile. Je veux que ce soit juste, et je vais encore augmenter l'écart. Nous allons également le faire avec ce bouton où nous disons : « D' accord, c'est un bouton qui s'étend, mais il y a aussi une icône dedans ». L'icône peut être placée de chaque côté, elle s'agrandit et contient des trucs sympas avec Aroudy J'adore les sorties automatiques. Ils sont compliqués si vous êtes nouveau dans tout cela. Ne vous inquiétez pas, nous allons le faire plusieurs fois au cours de ce cours, mais c'est trop pratique. Très bien, allons-y et faisons des sorties automatiques pour l'espacement dans notre navigation. Infime. Oh. C'est bon. Pour commencer, j'ai dessiné quelques zones de texte contenant du texte. C'est juste une ligne utilisant l'outil linéaire, et je les ai. Peu importe où ils se trouvent. Je vais les déplacer juste pour m'amuser. Il faut qu'il s'agisse de boîtes séparées pour que tous les bienfaits de l'autolou fonctionnent Dans le passé , nous avons d'abord placé un cadre, puis du texte, puis nous l'avons converti en Autout Vous pouvez aller droit au but, et vous pouvez sélectionner tout cela. Et si je dis « soyez une sortie automatique », vous devrez peut-être faire défiler la page vers le haut et vers le bas, car cela devient assez important en ce moment Recherchez le panneau de mise en page. Je les ai donc tous sélectionnés. Si je clique sur ce bouton ici, il l' enveloppera automatiquement dans un cadre pour nous et transformera ce cadre en automatique. Faites attention dans le panneau des couches ici. Je vais cliquer sur le bouton Je ne sais pas pourquoi je fais ces bruits Il l'a mis dans un cadre. C'est ce qu'on appelle le frame 19. Je vais l'appeler Nav et convertir cette image en un bruit automatique. Tu peux toujours le faire dans l' autre sens. Vous pouvez dessiner un cadre et y ajouter ce texte, puis le convertir en sortie automatique. Ça n'a pas d'importance. Ce qu'il essaie de faire, c'est qu'il se peut que vous soyez tous centrés dedans. Le mien est sur la gauche, il essaie juste de le faire automatiquement. Ne t'en fais pas pour le moment. Examinons certains des avantages de la sortie automatique. Comme il s'agit d'un cadre, je peux sélectionner le parent et dire : je veux que le parent, scroll, scroll scroll ait une couleur de remplissage correspondant à l'une de mes couleurs secondaires. C'est comme le bouton. Le bouton ici, nous avons fait la même chose sauf qu'il contient plein de choses. L'un des avantages de ce bouton est que nous pouvons ajouter du rembourrage Trouvons le parchemin de remplissage, défilement, défilement. Voilà, je vais en mettre 16 et 8. Vous m'avez peut-être vu dans une autre vidéo. J'ai oublié de le mentionner. Je tape juste. Pouvez-vous voir si je ne tape que des onglets dans le menu ? Je fais très souvent ce 24 onglet 16 pour gagner du temps. Vous vous demandez : « Qu'est-ce qui s'est passé ? Cela fonctionnait. Maintenant ça ne l'est plus. Il y a deux choses que nous devons faire. Examinons les éléments qui pourraient nous causer des problèmes. Tout d'abord, le parent, le Nav, est-il prêt à s'embrasser ? Est-ce qu'il étreint tout ce qui se trouve à l'intérieur ? Il n'est pas réglé sur une largeur fixe. Tu vois que celui-ci est un câlin, pas celui-ci. Je dirais que vous étreignez tout ce qui se trouve à l'intérieur, s'il vous plaît, et cela pourrait tout arranger. Normalement, c'est le cas. Il se peut que vous ayez un autre problème concernant la façon dont vous avez créé les zones de texte Si je crée une zone de texte, que je la fais glisser et que je tape à la page d'accueil, vous avez peut-être l'habitude de le faire à partir d'autres programmes et de la dupliquer Il s'agit d'une largeur fixe ou il peut s'agir d'une hauteur automatique. Pour que tout cela soit réactif et bon, vous devez le régler sur le premier, qui est la largeur automatique, et voilà. Cela signifie simplement que ce n'est pas une largeur fixe. Je vais également étendre et contracter. C'est quelque chose que vous devrez peut-être examiner et vérifier celui-ci. Ici, il est réglé sur une hauteur fixe. Allons-y celui-ci. Ce gars ici, je veux aussi être en largeur automatique. Ce gars ici, et ce type ici. n'est pas un texte, nous n'avons donc à nous inquiéter pour celui-ci. Ce n'est qu'une ligne. Nous avons fabriqué une boîte rembourrée. Excellente. Certains des autres avantages d' une mise en page automatique sont la réorganisation Comme les sélections intelligentes et le rangement. Ce que nous pouvons faire, c'est dire : je veux que tu sois au sommet. Je n'ai pas du tout eu besoin de sélectionner pour créer un groupe comme la sélection intelligente. Je peux juste le déplacer. Je peux utiliser mon râteau pour descendre, redescendre. Je peux le dupliquer comme je le faisais avant. Commande ou contrôle D. D'accord ? Je vais en ajouter un de plus, et la sortie automatique s'agrandit et se contracte. Parfait pour les menus et les listes. Vous pouvez modifier l'espacement en le survolant. Vous pouvez simplement le faire glisser ou ici, vous pouvez être un peu plus précis. C'est là la lacune. L'écart est apparu lorsque nous avons appuyé sur le bouton, mais rien, il n'y avait aucun écart. Je vais donc faire mes multiples de huit et je vais passer à 24. Sympa. Inversons-le pour le faire. Un autre avantage de l'Auto Out. Disons que nous avons celui-ci pour notre design mobile, mais que nous voulons celui-ci, je vais en faire une copie pour notre page d'accueil. En haut, voyez-vous le flux ? Par défaut, il était vertical parce que c'était nouveau. Je voulais passer à l' horizontale. Ah. À cela. Et ce que je pourrais faire ici, c'est supprimer celui-ci, et ajouter une barre en quelque sorte de haut en bas. Prenons donc l'outil linéaire. Je vais dessiner celui-ci. Je vais m' assurer que c'est un pixel. Il est probablement un peu grand. Je vais donc faire en sorte que le mien soit 24. Il s'échappe vers l'outil de déplacement. Et ce que je peux faire, c'est juste le jeter dedans. Regarde, génial hein. J'adore vraiment ça. Il suffit de le mettre en mode arrêt automatique et il s'ajustera en quelque sorte. J'ai fait moins de largeur spécifique. Je vais décider, en fait, que je ne veux pas que ce soit une largeur fixe. Désolée, je veux que ce soit un câlin. Maintenant, ça me fait un câlin, et ça me donne la flexibilité changer le texte pour que tout soit réaligné Vous commencez à voir les avantages des sorties automatiques, vous pouvez simplement les aligner sur le dessus Vous n'êtes pas obligé d' utiliser une sortie automatique. Je pourrais être un rectangle avec du texte en haut et vous ferez fonctionner les liens . Cela fonctionnera toujours parfaitement pour un portfolio, mais vous allez avoir plein de modèles d'autres personnes, ils seront mis en ordre et vous allez paniquer au bout d'un moment, vous allez commencer à utiliser les sorties automatiques aussi parce que vous êtes du genre à le transformer rapidement en un commandez. Ce qui est cool, c'est le même principe s'applique quand je dis, je vais le copier, donc je vais aller ici, je l'ai copié et collé et je me suis retrouvé dedans Je vais le sortir. Ce que je veux faire, c'est prendre ça. Je vais apporter une icône. Allons ici. Passons aux icônes, configurons , prenons un bouton d'accueil. Quelqu'un à la maison. J'ai gagné. Lequel ? Choisissez-en un vers le bas, choisissez-en un seul, rond. Toutes ces tailles ne me dérangent pas. Est-ce qu'il vient d'apparaître ? Je n' allais pas le faire traîner. C'est là. Quelle est sa taille 24 x 24 ? Ça a l'air bien. Je vais les aligner. En fait, je n'en ai pas besoin. Fermons-le. Allons prendre ces deux-là. Je vais le convertir en sortie automatique, ce qui le projette dans un cadre et en fait une voiture. Tu es du genre : « Oh, c'est faire le truc avec Huggy ». Encore une fois, je peux maintenant me renseigner pour que vous puissiez voir ce que je fais. Passons à mes échantillons actuels. Allons-y. C'est pratique. Vous voyez que j'ai remplacé le remplissage par le parent. Appelons cela un bouton d'accueil. OK, appelons-le BTN home. Nous partons un peu sur une tangente. Je n'avais pas prévu cela, mais je pense que c'est un autre bon exemple. OK ? J'ai sélectionné celui-ci, le parent. C'est sorti. Il y a plusieurs choses dedans. Les éléments que j'ai sélectionnés ont une couleur primaire et il y a du noir dedans. Je dois dire que tout ce qui est noir dans ma sélection sera désormais blanc. Cool. Vous commencez à voir que vous êtes du genre : « Oh, nous sommes en train de créer un bouton ». Allons ajouter un peu de rembourrage à notre bouton, donc un peu de rembourrage, 16 et 8 Ajoutons des coins arrondis parce que j'en suis amoureuse. Tu es du genre : « Oh, j'aime bien ça. L'écart entre les deux. Faisons en sorte que ce soit huit également. Tu peux le voir rétrécir ? Ça. Il s'agit d'un bouton d'accueil avec une icône. Regarde ça. Si je clique sur l'icône d'accueil ici, je peux dire « OK ». Elle se déplace. Je vais annuler ça. Et si je change ça pour autre chose. Le bouton s'agrandit, l'icône joue le jeu. Nous avons essentiellement fait exactement la même chose ici. Il s'agit d'une sortie automatique que nous utilisons pour un menu. Le bouton est le même que celui que nous avons utilisé dans le précédent. Mais parce que nous avons plusieurs éléments là-dedans, nous obtenons cette commodité qui nous permet de déplacer les choses C'est un peu plus flexible. Elle s'étend et se contracte. Nous pouvons bien jouer avec l'espacement. Nous n'avons pas besoin de l'aligner, de le faire glisser sur quelques pixels, puis de le mesurer. Tout se fait via la mise en page automatique. Après un audit, il suffit de cliquer à nouveau sur le bouton et maintenant le cadre redevient un cadre contenant une icône contenant du texte. Je peux faire des choses, mais il a tout simplement perdu tout son avantage une icône contenant du texte. Je peux faire des choses, Je peux faire des choses, de mise en page automatique. Je peux le régler maintenant, faire une sortie automatique. Je veux ramener mon rembourrage à huit, et nous reprendrons nos activités. J'espère que vous commencez à comprendre les avantages des sorties automatiques. Une chose qui a posé problème à certaines personnes la dernière fois que j'ai fait cette vidéo, c'est qu'ils l'ont copiée et collée et elle s'est retrouvée à l'extérieur d'ici Tu sais, ça n'entre pas. C'est assez facile de le glisser dedans. Mais parfois, ici, au Québec, il y a mes fonctionnalités et le Nav sur lequel je travaille. Vous pouvez simplement le faire glisser dedans. Vous pouvez également le faire pour une réorganisation. Si vous souhaitez que les fonctionnalités soient inférieures au prix, modifiez-les ici et elles seront mises à jour dans le menu ici. Quoi qu'il en soit. C'est bon. J'espère que cela vous a été utile. Quelles sont les astuces pour faire de l'espacement et de la navigation. C'est bon. Je vous verrai dans la prochaine vidéo. 65. Comment utiliser les contraintes dans Figma ma: Bonjour à tous. Dans cette vidéo, nous allons examiner ce que l'on appelle les contraintes. En gros, nous allons y arriver au final. Vous voyez que la navigation reste en haut à droite, que le logo y reste, qu'il peut vous déplacer. Tout est ce que nous appelons responsive. On les appelle des contraintes dans Figma. Je vais faire différents niveaux. Ce sera le mode facile. C'est tout ce que je veux vraiment que tu fasses. C'est l'essentiel. Moyennement difficile et super difficile vers la fin, juste pour les personnes capables , afin que nous puissions le faire tôt et nous le ferons encore quelques fois plus tard dans le cours si vous ne comprenez pas certaines des parties les plus compliquées. Mais faisons-le maintenant. Allons-y. C'est bon. Mettons-le en mode facile pour commencer. Je viens de tout déplacer vers le bas. J'ai dessiné une ellipse et j'ai intégré le logo de l'autre page Contraintes déjà appliquées. Tu n'as même pas eu besoin de demander. Cela représente notre navigation en haut à droite. C'est un petit point, juste pour vous permettre de voir les petits points ici ? Ces points sont les contraintes. Il est limité au sommet et à cette terre magique sur la gauche ici Pas sur toute la longueur, juste une taille aléatoire. En fait, c'est la taille supérieure juste ici. Tu peux voir à gauche et en haut ? Lorsque je le redimensionne, j' essaie simplement d'utiliser le côté gauche. Ce que je veux dire, c'est : Hé, mon pote, je veux que tu restes sur le côté droit. Vous pouvez utiliser le menu déroulant ou ce menu ici. Voyez-vous que cela change les deux ? Je veux que tu utilises le haut et la droite comme point de référence. De cette façon, je peux dire boîte de fonctionnalités, ce qui arrive au point. Regarde, il reste. Il est collant, et il sera à la même distance. C'est vraiment utile. Annulez ça. Idéal pour les meilleurs navigateurs. Jetons également un coup d'œil à ce type ici. Vous n'avez peut-être pas fait de même, mais ce n'est qu'un bon exemple que je voudrais vous montrer. Si je redimensionne ce cadre parent, cette carte, regardez ce qui se passe Zuk, mais si je dis toi, petit bouton en plus. Votre contrainte n'est pas laissée parce que cela ne fonctionne pas pour moi, c'est à droite. Puis je récupère le cadre parent. Ça s'appelle Card One, et je le refais. Juju. Ah ah. Tu es du genre : « Qui ? En fait, c'est plutôt cool. Très bien, c'est le niveau 1. Nous sommes prêts à passer au niveau deux. Ce n'est pas trop difficile. C'est comme un médium. Le vôtre ne le fait peut-être pas, mais jetez un œil. Je veux te donner une chance, par exemple parce que ça va arriver. Tu vois mes logos faire des trucs bizarres ? Ce portefeuille a son propre haut, il est à gauche et il va ici. Le mot Scott va un peu plus loin à l'intérieur d'ici. Tu vois, ce type a encore le sien. Pareil pour ce gars, ça va un peu plus loin. C'est pourquoi ils font tous des choses différentes. Le moyen le plus simple de contourner ce problème est de dire : « Hé, les gars, je veux faire de vous une unité et vous obliger à faire tous la même chose ». Au moment où ce sont des pièces séparées. Je peux te dire, mon ami. Je vais cliquer avec le bouton droit de la souris. Je dois dire que vous pouvez le regrouper ou le cadrer, cela n'a pas vraiment d'importance, mais les cadres ont plus de magie. Allons-y, la magie se situe par défaut en haut et à gauche. Pour le moment, c'est ici que ça se passe. Si vous le rapprochez du bord, il disparaîtra, voulez-vous dire du côté gauche ? C'est ce que nous voulons pour notre logo. Je vais vous dire d'y jeter un œil. Voilà, tu es prête, Juuchu, si je passe de ce côté, regarde, uji Je ne sais pas d'où vient ce bruit. Carafe. Quoi qu'il en soit, ce sont des contraintes. Vous pouvez obtenir la contrainte vers le bas faisons-le pour ce bouton ici. Je vais le copier. Je vais aller ici et je vais utiliser un outil de cadre, je vais choisir un téléphone iPhone 16, l'aligner, coller ce type dedans, et je vais dire, voir la valeur par défaut pour lui est en haut et en bas. Mais disons que vous voulez que cela soit toujours à la bonne place ici. Ça ne marchera pas. Téléphone de taille différente, disparu. Ce que je peux dire c'est toi, mon ami, en bas et à gauche. Maintenant, regardez ça ? Chuk chuk. Il est coincé au fond. Andy ? Regarde ça. Gauche et droite. Ce n'est toujours pas au milieu. Ça colle à gauche. Imaginez s'il y en avait un ici qui n'était pas juste à gauche ou à droite, mais à gauche et à droite. Regarde ça. Vous êtes maintenant fixé en bas. Regardez-nous. Nous sommes en train de le faire. Ce sont des contraintes, et c'est la version moyenne. Prêts pour le plus dur ? Nous allons ajouter une voiture à tout ce bordel. Éteignez-la si vous êtes déjà rassasié. Ce que je vais faire, c'est prendre, j'ai d'autres boutons ici, pour vous placer ici. J'ai plusieurs objets ici pour ma navigation. Et par défaut, jetons un coup d'œil, cruche. Les violets fonctionnent. Les autres sont en train de faire toutes sortes de folies. Tout comme le logo, je peux vous dire . Je vais d'abord les ranger Peut-être les aligner. Je vais les ajouter à un cadre. Je vais dire encadrer cette sélection. Par défaut, c'est en haut et à gauche, mais je dis, je veux que tu sois à droite, mon pote. Nous avons maintenant cette navigation qui contient beaucoup de choses qui se déplacent et se connectent au sommet. Nous sommes en train de naviguer, mais vous trouverez de nombreuses instances, comme ce bouton Plus, où vous avez parfois besoin de groupes pour s'en tenir à une zone. C'est bon. difficulté maximal. Es-tu prêt ? Je vais prendre mon outil de cadre et nous allons effectuer une navigation en haut. Cela devient difficile. Je ne devrais probablement pas l'inclure. Je vais l'inclure pour les quelques-uns d'entre vous qui me plaisent. Cela se porte bien. Si l'esprit est fondu, c'est bien. contraintes vous poseront des problèmes si vous ne savez pas qu'elles existent, en particulier lorsque vous utilisez le travail d'autres personnes pour la Vous devrez peut-être les passer et vous demander : « D'accord, qu'est-ce qui se passe ? Les contraintes, même si vous ne savez pas dans quelle direction elles vont, commencez simplement à les éliminer et j'essaierai à gauche Je vais bien essayer. Je vais essayer une balance. Ils peuvent vous donner le résultat dont vous avez besoin, car le concepteur qui vous a précédé et le modèle ont peut-être fait des bêtises pour vous aider, mais cela ne vous aide pas. J'ai dessiné une navigation par défaut, parce que je l'ai dessinée par-dessus mon logo. Je vais nommer les choses, mon logo et mes cercles. Il y a un cadre ici, ils sont tous à l'intérieur. Vous devrez peut-être ajouter le vôtre si vous ne travaillez pas, je vais le remplir. Je vais y aller. En fait, je vais prendre mes couleurs. Je vais utiliser celui-ci. Non, c'est moche. Je vais y aller. Mon logo n'est pas visible, je vais donc cliquer sur le logo. Ce n'est pas la partie la plus difficile. C'est une bêtise. Le violet ne peut pas être rouge. Donc, avec c'est sélectionné. Tout ce qui se trouve dans ce cadre, il y a toutes les couleurs que j'ai sélectionnées. Je voudrais changer le violet, s'il vous plaît, en blanc. Je vais le déplacer pour qu'il soit mieux ajusté. Je veux que vous en ayez fini un peu. Allons y jeter un œil. Par défaut, cette navigation est vraiment cool. Si je le prends et que je fais ce que nous avons un téléphone, créons une version pour tablette. Disons UR iPad Mini. Si je le colle et que je dois le réduire maintenant pour cet autre travail, vous pouvez le voir, nous regarder. Nous avons fait des choses. Nous avons créé une navigation qui peut aller sur différentes pages et à différentes échelles. Tout est dans la bonne position, super pratique. C'est le niveau de difficulté maximum. Non, ça ne l'est pas. Il y a un niveau très difficile. Si on apprend les sorties automatiques. Est-ce qu'ils vont fonctionner ? Oh, non, il y a deux niveaux très difficiles. La première est que cela pourrait tout aussi bien être une sortie automatique. Cela ne changera pas grand-chose, sauf que je peux faire des trucs sympas où je peux entrer dedans et les déplacer. D'accord, les mises en page de commande sont donc pratiques de cette façon. Je peux jouer avec le rembourrage beaucoup plus facilement, en cliquant dessus, double-cliquant dessus pour avoir juste ce groupe de gars et je peux dire que vous avez un écart de huit Ils rangent. Le niveau super maximum est le suivant. Que se passera-t-il si j' en attrape l'extérieur ? Tu peux voir Juke ? Vous êtes du genre : ne venons-nous pas de le rendre réactif ? Nous avons fait en sorte que cela et tout ce qu'il contient soient réactifs, en y imposant les bonnes contraintes , pour que cela fonctionne. Mais nous n'avons pas joué avec l'extérieur. Ce que nous allons faire, c'est lier les deux. Tu es prêt ? Temps de fusion du cerveau. Nous avons appris ce que nous avons appris, vrai, nous avons appris le mieux. Nous avons appris ici, nous avons appris à gauche et à droite. OK ? Où cela se met à rude épreuve des deux côtés. Il y a le dernier , c'est celui-ci. Au lieu d'être en haut à gauche, ce qui est par défaut et ne fonctionne pas, le haut va bien. Je veux que la gauche et la droite soient à l'échelle. Cela signifie que cette navigation va s' adapter au parent, qui est ma page de fonctionnalités. Donnons-lui un mouchoir. C'est comme Inception où mes cercles sont collés en haut et à droite du cadre parent, qui est le NAV. La navigation vers son paraframe est la mise à l'échelle. Nous avons fait différentes choses ici. Je sais que c'est confus, mec. J'essaie. Euh, ça va être un peu d'entraînement. Nous le ferons à nouveau dans le cours. Je veux réunir toutes les contraintes dans une seule vidéo. Si la seule chose que vous retenez, c'est que contraintes existent et que vous pouvez les contourner. Parfois, c'est tout ce dont on a besoin. Je le fais parfois. J'ai ouvert le document de quelqu'un, je me demande : « Oh, qu'est-ce qui ne va pas avec ce truc ? Je clique simplement sur des trucs, je trouve, commence à changer les contraintes, et j'essaie de me faire une idée, genre, d'accord, c'est logique D'accord. C'était faux, et maintenant je l'ai réparé. Cela vous a-t-il été utile ? Je l'espère. Je vous verrai dans la prochaine vidéo. Facilitons les choses. En fait, peut-être qu' un autre exemple serait utile. Oui. Prenons un autre exemple. 66. Combiner les cadres imbriqués et les contraintes de mise en page automatique dans Figma ma: Bonjour. Hé, nous allons créer un autre exemple de contraintes juste pour les intégrer et je vais vous montrer un autre cas d'utilisation. Nous ajouterons également une mise en page automatique afin de pouvoir également la pratiquer. Nous avec ceux-ci. Ce qui est cool, c'est de les regarder, ils se mélangent et bougent Je peux prendre l'un de ces gars, aller sur mon appareil mobile, coller et décider, d'accord, il doit être d'une taille différente ici, et le texte peut être modifié Voilà. Comme nous l'avons fait dans le dernier exemple. Mais maintenant, juste un autre exemple. Allons nous entraîner. Allons-y. C'est bon. Reconstruisons une version simple de ceux-ci. Elles sont un peu plus compliquées pour être réactives. Faisons donc quelque chose de simple, juste à titre d'exemple. Je vais passer au Shift G pour activer mes grilles. Vous pouvez faire défiler l'écran vers le bas et vous devriez trouver si je clique sur les fonctionnalités, vous devriez trouver vos grilles là-bas Vous pouvez activer et désactiver le globe oculaire. Je vais prendre mon outil à cadre au lieu d'un rectangle parce qu'à l'origine, ils étaient qui ? Oh. C'étaient des cadres. Lorsque vous créez quelque chose à dessein avec des mises en page automatiques et des contraintes d' imbrication, il est toujours préférable de le créer à partir de zéro Essayer de réutiliser quelque chose finit toujours par me mordre le cul. Je vais créer un cadre. Il y aura quatre colonnes de diamètre. Je vais lui donner une couleur de fond à partir de mes échantillons. Choisissons celui-ci. Non, choisissons quelque chose de plus léger. Je vais désactiver mes grilles de Shift G. D'accord, donc ce que je veux faire, c'est ajouter mon texte en bas à droite, comme vous l' avez vu au début Je vais prendre mon outil de cadre. Je vais mettre un cadre à l'intérieur d'un cadre. qu'on appelle la nidification. Vous n'avez pas besoin de vous en souvenir, mais ce cadre est à l'intérieur de celui-ci. Je vais lui donner une couleur de remplissage noire. Je vais le faire. Je veux m' aligner en bas. Là-bas. Nous savons que si nous redimensionnons celui-ci pour notre appareil mobile, cela ne fonctionnera pas vraiment car si je sélectionne ce cadre, il est écrit en haut et à gauche Je ne veux pas que ce soit en haut et à gauche. Je veux que ce soit vers la droite et que ça marche. Prenez le cadre parent, et cela fonctionne, mais pas le bas. Oh, je clique sur ce type. Je peux dire en bas et à droite. Voilà. Maintenant, je peux redimensionner ce truc J'ai ma petite zone de texte ici ou une petite barre dans laquelle je vais mettre mon texte. C'est ce que nous allons faire. Mettons le texte dedans. Prends le Type 2, cliquons à l'intérieur de ce type et passons à. Je ne me rappelle pas quels étaient les mots que j'ai utilisés. Cela va le copier RFID et je vais le mettre dans ma zone de texte qui a probablement disparu Si vous n'utilisez pas votre zone de texte, elle disparaît, ce qui est pratique Tapez deux, cliquez sur Coller, je vais réduire la taille de ma police. Le mien 16, et je vais prendre mon outil de déplacement, le déplacer. Non, cliquez dessus, saisissez la boîte entière, et je vais la mettre sous forme de puce. Il y a un raccourci qui met des puces. Si vous le mettez dans un tiret dans un espace, il crée automatiquement une puce, ou vous pouvez le sélectionner et accéder options supplémentaires de typographie et dire « je veux que ce soit une que j'ai. Je veux que ce soit à peu près aussi loin de ce site, je vais utiliser ma flèche. C'est là que vous vous dites : « D'accord, devrions-nous faire l'alignement comme ça ? Je peux juste le faire sauter au centre ? C'est là qu'une sortie automatique est très utile. Cet élément d'exercice à boutons a fait la boîte qui l'entoure. Le bouton se dilate et se contracte et nous pouvons jouer avec le rembourrage. C'est ce que nous allons faire. Le parent de cette zone de texte, donnons-lui un nom. Appelons cela un bloc de texte. OK. Il y a mon texte dedans. Ce truc est noir, et je veux juste le transformer en cadre automatique. Il s'enroule autour de mon texte. Il est rembourré. Assurez-vous simplement qu'il continue de fonctionner. Continuez à vérifier au fur et à mesure. Est-ce que ça marche toujours ? Si ce n'est pas le cas, vérifiez. J'ai sélectionné le cadre, pas le texte. Je veux que le cadre soit sélectionné. Je veux m' assurer que dans ce cas, je veux que ce soit juste et bas. C'est parfait. Ce qui est cool c'est que c'est un châssis automatique, c'est une question de câlin OK, si je le remplace par un autre, faisons un zoom arrière. Allons en prendre un autre, Shift G from my frames, prends toi. J'en ai un deuxième. Je ne veux pas changer celui-ci non plus. Quel est notre autre texto ? Je ne m'en souviens pas. Je vais arranger ça dans un moment. Mon horloge est toujours cassée. Allez-y, il se redimensionne parce que c'est un cadre automatique et on dit qu'il fait un câlin Si ce n'est pas le cas. Si c'est juste en train de changer et que l'on peut dire que c'est corrigé, sorte que lorsque je le change, cela ne change pas. C'est peut-être ce que tu veux. Que tu sois réparé. Vous savez que vous avez une certaine taille de personnage et que vous voulez qu'ils se ressemblent tous. C'est ce que tu veux. Cela soulève un point intéressant. C'est maintenant au centre de tout cela. Le centre. Je veux écrire un alignement pour trouver ce que je voulais ici. Ce que je veux dire, c'est que ce parent ici, tout ce qu'il contient, souvenez-vous de l'alignement, il est centré par défaut. Je peux y aller à droite. Parfois, il tourne par défaut vers la droite comme la bonne parce qu' il penche d'un côté. J'essaie de faire des trucs automatiques. Je vais dire que ce parent, tout ce qu'il contient est aligné sur ce site. Peu importe si tu l'as dit pour te serrer dans tes bras. Si je fais un câlin, c'est sur la droite, mais peu importe parce que c'est un câlin. Il n'y a aucun espacement autour de Je vais donc dire centre, et je veux que ce soit une largeur fixe. Il est plein d'esprit, celui-ci ? Celui-ci est 215. Alors je vais dire, oh, non, ce n'était pas le cas. Je me perds parfois avec le positionnement et la largeur. Cela arrive-t-il à tout le monde ? Voilà la largeur, 177. Donc je vais dire que nous sommes 177. Est-ce 177 ? Je vais l'aligner. Et nous devrions être prêts à partir, sauf que je veux que tout soit aligné. Une chose que vous pourriez trouver délicate c'est que si vous avez une police, elle essaie de la placer au milieu. Si vous avez une police étrange ou une puce étrange, les puces peuvent parfois être un peu étranges. Certaines polices finissent par avoir un très grand écart en dessous de cette hauteur en X et au-dessus de ces ascendeurs, ces lettres majuscules, vous devrez peut-être jouer avec le rembourrage du parent Vous devriez peut-être dire qu' en fait, pour le moment, il se situe dans les 11 premiers et derniers. Vous devrez peut-être aller ici et dire, c'est vrai, cela le divise et dire, d'accord, le haut n'est que dix et le bas 15 parce que vous devez faire un rembourrage sophistiqué pour donner à la police l' impression qu'elle se trouve dans le Je l'ai remarqué dans certains projets de classe. Cela inquiétait les gens. C'est bon. La dernière chose que je vais faire, c'est te voir, je vais en faire une autre. Je vais très vite récupérer tous ces trucs. Oh, je vais le mettre en pause parce que c' est un raccourci avancé, juste un raccourci sympa. Je copie ceci ici et si je copie tout cela, que se passera-t-il ? coller apparaît comme le style de celui d'origine. Tu dois changer la taille, c'est un peu de la peinture. Au lieu de simplement coller comme d'habitude, cela fonctionne dans tous les programmes, pas seulement figma, Word Docs, Google Docs Si vous appuyez sur Command Shift Coller ou sur Control Shift Coller, il le collera sous forme de fichier brut et correspondra au style que vous avez. J'ai également découvert qu'avoir une largeur fixe me posait des problèmes ici. Je vais juste dire traçable. Nous y voilà. Fixé. La dernière chose que je vais faire est d'ajouter des images à ces cadres. Je vais cliquer sur la couleur ici et je vais passer à la personnalisation. S'il y a un style que vous appelez ça ici, il ne veut pas que vous fassiez des choses. Alors je clique dessus, vous vous demandez Où est mon passage à l'image ? Je peux simplement passer à la personnalisation, puis à l'image. C'est donc ce que je vais faire. Je vais télécharger pour ordinateur. Je vais choisir l'un de ces gars. C'est celui que je veux. Je vais les ajouter. Voilà. Ajouter des images. Faisons le mode vitesse pour ces deux-là. J'ai donc intégré mes images et là où cela devient super génial, c'est si je les attrape, passe sur mon appareil mobile et que je dis, je passe sur mon appareil mobile et que je dis, je vais les coller ici, les mettre dans le cadre, et je vais dire, d' accord, allons-y Je les ai fait entrer. Je peux les redimensionner pour cet appareil différent, tout est redimensionné Les images sont configurées pour être remplies par défaut. Ces gars-là ont leurs contraintes en bas à droite, et j'ai fait quelques trucs sophistiqués où je suis allée dire : « D' accord, tout le cadre ici est réglé sur la mise en page automatique Je sais que cela peut être un peu confus. L'avantage de la mise en page automatique est que je peux ajuster la taille de la police. Abaissons ou augmentons la taille de la police pour le mobile, et le cadre parent autour duquel j'essaierai de l'adapter car la mise en page automatique aime bien s'adapter. C'est un câlin. J'espère que cela a été utile pour voir d'autres cas d'utilisation de contraintes et nous y avons combiné une mise en page automatique, juste pour pouvoir créer le texte. Même s'il s'agit d'une sortie automatique, c'est peut-être trop combiner, il suffit d'utiliser les contraintes. Vous avez juste une boîte à largeur fixe. Nous n'allons pas nous étirer et nous agrandir. Utilisez simplement les mises en page automatiques pour les boutons où cela a peut-être un peu plus de sens et séparez-les Quoi qu'il en soit, j'espère que cela vous a été utile. Passons à la vidéo suivante. 67. Projet de cours 13 - Design réactif: de projet de classe 131010. Du rhum, du rhum. C'est une question délicate. Les laustrits automatiques sont assez délicats. Il y a donc un projet de classe pour que tu puisses t'entraîner. En gros, ce que nous avons déjà abordé dans le cours c'est la navigation sur ordinateur et certaines cartes de fonctionnalités que je souhaite que vous créiez. Pour la navigation sur le bureau, je veux que vous créiez un nouveau Nav doté de ces fonctionnalités. Allons y jeter un œil. Je veux que vous passiez au Hi-Fi de bureau. Ce que j'ai fait, c'est que j'ai dupliqué la page d'accueil d'origine et je l'ai simplement qualifiée d'ancienne. Ensuite, je suis allée construire un nouveau nombril sur le dessus et quelques nouvelles cartes de fonctionnalités C'est juste que je ne sais pas, nous y avons consacré du travail. Je vais laisser ça là. Je veux votre meilleur système de navigation. L'essentiel est de s'assurer qu'il le fait, qu'il bouge et s'ajuste. Sois géniale aussi. Je n'ai pas défini cela et je ne peux pas vraiment vérifier de toute façon, c'est que c'est un tout, donc vous pouvez faire ces belles choses. Vous verrez également que l'une des icônes ou l'un des textes est en fait une icône. C'est la carte. Je l'ai écrit dans les projets de classe, créé une liste de texte pour notre carte de navigation, carte de fonctionnalités d' accueil et mon compte et me suis simplement assuré que la carte est une icône. Tu peux le dessiner. Vous pouvez l' obtenir sur un site d'icônes gratuit. Vous pouvez l'obtenir à partir d'un plugin, cela ne me dérange pas. Je veux que vous créiez également Nav pour le mobile. Cela va être un peu différent et assez simple, car nous allons passer à l'Hi-Fi mobile, et nous allons recréer un système de navigation très différent Ajoutez simplement les lignes, le menu des hamburgers, le sandwich Nav parce que nous ne pouvons pas contenir tous les textes C'est pourquoi nous avons ces petits gars. Il suffit de mettre le logo et le panneau de navigation à stropy en haut dans une boîte. Il doit également être réactif . Le mien ne l'est pas. Mais le vôtre doit l'être. Cette petite ligne stroby doit être collée entre le haut et la droite Ensuite, les cartes de fonctionnalités. Il s'agit simplement d'un copier-coller les uns des autres afin que vous puissiez les redimensionner. Je veux que ce soient les téléphones portables qui le fassent. Où vous pouvez en modifier la taille, les déplacer et ils s'ajustent de la même manière sur le bureau ici. Fais-en de nouveaux. Ils n'ont pas besoin de ressembler exactement aux miens. Je veux quelque chose en bas, juste ici, pour qu' il fasse ce joli truc spongieux Une chose qui pourrait vous poser problème, c'est si je le copie parce que je crée d'abord sur mobile ou sur ordinateur de bureau , cela ne me dérange pas, copiez-le et si je passe au Wi-Fi Hi Fi et que je passe au Hi Fi mobile et que je le colle simplement sur cette page ici. Tu es du genre, A, je vais faire bouger les choses. Il ne bouge pas. Pourquoi pas ? Je vois que le nom est un cadeau. Ce n'est pas vraiment à l'intérieur du paiement. Je peux essayer de le faire glisser. Est-ce que cela a fonctionné ? Je suis entré. Parfois, ce n'est pas le cas. Ce que vous pouvez faire, c'est le couper, cliquer sur le paiement, puis le coller et cela donne à Figma un indice  : il le veut ici Ensuite, vous pouvez commencer à le manipuler. Parfois, cela peut vous empêcher d'essayer de vous mettre au bon endroit. Le couper, le coller est probablement le moyen le plus simple de le faire. Vous pouvez le faire glisser dans les couches, mais ces couches deviennent assez massives maintenant, donc c'est un peu plus difficile. Voilà, puis une fois que vous avez terminé, prenez une capture d'écran, téléchargez-la à la fois de votre page d'accueil sur votre ordinateur de bureau et de votre mobile, téléchargez-la dans la section projet et partagez-la également sur les réseaux sociaux. Nous en sommes au stade où tout le monde commence à avoir une apparence un peu différente. Je serais curieux de voir ce que tu as fait. Vous pouvez obtenir des commentaires de la part d'autres personnes. Je peux donner mon avis. Voilà. Créez une navigation et une carte de fonctionnalités. Faites en sorte que tout soit réactif et bon. C'est bon. C'est une question délicate. C'est bon. Vous devrez peut-être revenir en arrière et revoir les vidéos, consulter les commentaires S'il y a d'autres étudiants, ils seront peut-être en mesure de vous aider ou pourraient rencontrer le même problème et avoir des réponses. Alors oui, profitez bien de l'entraînement. C'est Class Project 13. Je vous verrai dans la prochaine vidéo. Une fois que tu as fait tes devoirs, pas tes devoirs, 68. De beaux effets d'ombre portée et d'ombre portée intérieure dans Figma (en anglais): Bonjour. C'est l'heure de Drop Shadow. Nous allons ajouter des ombres portées aux boutons, et je vais vous montrer comment ajouter des ombres doubles. Je vais vous montrer comment créer des styles, et je vais vous montrer la façon super géniale, ma façon préférée de créer des ombres. C'est une sorte de préférence personnelle. Vous pouvez le faire pour taper A, évidemment, pour le désactiver lorsque vous êtes au-dessus des images. Nous allons également créer des ombres intérieures pour ce type d'options de type d'interface afin de leur donner un peu de profondeur. C'est bon. Parlons des ombres tombantes. C'est bon. Donc, mon téléphone portable Hi Fi. Si ce n'est pas déjà fait, j'ai déplacé le bouton d'achat de l'ordinateur juste ici. Si vous ne l'avez pas copié, c'est que nous l'avons fait plus tôt. Je vais passer à la case 2 pour zoomer sur l'objet sélectionné et reculer un peu. Et je vais aller jusqu' à ce que les effets soient faciles, faire défiler, faire défiler, sélectionner les éléments et trouver le panneau d'effets. Let's Plus and Drop Shadow est une option par défaut. Il y en a un tas d'autres. Nous allons commencer par Drop Shadow et un drop shadow vraiment sympa. C'est une préférence personnelle, mais j'ai créé beaucoup d'ombres tombées. J'aime X à zéro. X est la distance qu'il va vers la gauche et Y est la distance qu'il va vers le bas. Je vais passer à X zéro et deux finissent par être beaux, puis jouer avec un flou, souvent deux c'est bien aussi Vous devez également regarder une vue agrandie. Si les gens remarquent votre ombre portée, c'est que vous en avez trop. Vous voulez que ce soit subtil, je les trouve plutôt sympas. Mais ce qui est cool avec les ombres projetées, ou tout autre effet, c'est qu' avec la sélection, je vais zoomer un peu. Est-ce que vous pouvez en ajouter plusieurs. Les effets ici, je peux encore une fois appuyer. Souvent, ce que j'aime, c'est un effet assez serré comme le premier que nous avons fait, puis celui-ci plus Souvent, ce que j'aime, c'est un effet assez serré comme le premier que nous avons fait, loin et plus flou Augmentez le flou. Pouvez-vous voir que c'est comme une combinaison avec cette option sélectionnée ici. Éteignons l'un d'entre eux. Vous voyez ce flou de remplissage ? Cela dépend également de la taille de l'objet Ce n'est pas une règle absolue, mais commencez par 02, puis ajoutez une règle floue. C'est mon dropsh préféré Autres paramètres de Drop Shadows au cas où cela vous intéresserait. Le flou, c'est évidemment à quel point il est flou. Le spread est intéressant . Faisons-le simplement glisser vers le haut. Vous pouvez saisir l' icône, la faire glisser vers le haut. C'est toujours un flou entre deux, mais ça commence plus loin. Cela peut devenir cool quand vous l' avez et que vous êtes assez loin, qu' il semble que c'est plus loin de la page, et nous allons devoir le rendre beaucoup flou et probablement prendre les couleurs à 25 % Vous pouvez également faire glisser le pourcentage pour lui donner l' impression qu'il flotte. J'aime vraiment ça. Je n' utilise pas beaucoup de pâte à tartiner. Voilà. Un autre avantage des effets, c'est que vous pouvez les copier. Il y a cette zone étrange ici. Tu peux voir si Hova est juste dans cette zone étrange, tu vois, il y a des petites files d' Je peux cliquer dessus une fois, maintenir la touche Maj , l'attraper, le copier et c'est parti. Tout, je vais l'utiliser pour cet autre bouton sur mon ordinateur Hi Fi, et je vais l'utiliser pour ce type ici aussi. Je vais sélectionner ce bouton, double-cliquer, entrer, et je vais juste appuyer sur Coller sur mon clavier. Tu vois, je peux l'apporter. Vous pouvez également le définir sur un style, qui est Lick, ce gars Voici mes effets. Je peux dire style. Je peux dire « plus », et cela reflétera l'effet que j'ai créé, et je vais donner un nom à mon style. Maintenant, c'est un style. Si rien n'est sélectionné, cliquez en arrière-plan. Vous voyez que j'ai mes polices, j'ai mes couleurs et regardez en bas, le style est super génial. Tu peux l'ajuster. Ce qui est cool, c' est que tout ce à quoi il s'applique, vous pouvez le modifier ici. Allons l'appliquer à. Ça ne marchera pas avec celui-ci, il n'est pas rempli. Mais appliquons-le quand même. Je vais passer à mes styles ici. Je vais dire un style super génial. Euh, ça va bien fonctionner. Allez-y. De toute évidence, ombres tombantes australiennes sont excellentes lorsque vous avez du texte Je vais le copier au-dessus d'une image. OK ? Cela fonctionne bien en fait, mais je***** ça serait plus beau avec un effet Je vais y aller. Non, je vais passer à mes styles et opter pour un style super génial. Encore une fois, c'est minimal, mais ça le distingue vraiment de l'arrière-plan. Regardons les ombres intérieures. Les ombres intérieures peuvent être vraiment géniales, surtout avec les éléments de l'interface utilisateur, d'accord ? Faisons un petit changement. Je vais donc prendre mon outil de cadre. Je vais en faire un petit comprimé. Je vais agrandir le mien pour que tout le monde puisse le voir. Je vais faire le plein de mes échantillons. Je vais dire que je les appelle des échantillons, mais nos styles. En utilisant mon accent 300, je vais choisir une marque de coins, et de coins. Ici, si vous le prenez, le faites glisser et le faites glisser, vous en avez besoin. Le faisons-nous tôt ? Je pense que nous l'avons fait. Continuez jusqu'à ce que le maximum soit atteint. Vous pouvez passer à 1 000 et cela finira par s' arrondir complètement dans les virages. C'en est une. Je veux tourner en rond. Je vais utiliser l' outil O pour l'ellipse. Dessinez une petite option ici, comme un petit interrupteur à bascule. Choisissez une meilleure couleur. Excellente. Et voici cette pilule que j'ai sélectionnée, je peux dire que vous avez un effet sur l'endroit où se trouve son ombre intérieure. Les ombres intérieures sont sympas pour ajouter un peu de profondeur à ces éléments, et comme avant, la valeur par défaut est correcte. Le flou est probablement un peu élevé. Vous pouvez utiliser vos flèches, n'oubliez pas, dans ces champs vers le bas, vers le haut. Celui-ci ici, probablement pas aussi loin, et vous pouvez le doubler, en ajouter un autre, et nous allons faire la même chose dans l'ombre. Mais nous allons y aller. C'est intéressant de savoir que vous pouvez passer à la négative. Plus quatre, on peut passer à une valeur négative pour qu'elle descende vers le bas. J'en ai peut-être un un peu plus petit en bas. Est-ce que ça a l'air cool ? Je ne sais pas, Dan. Ici, je vais aussi appliquer mon style super génial. Pouvez-vous voir que vous pouvez ajouter de la profondeur à ces choses ? Bouton géant. Tu vois l'idée dans l'ombre. Ce n'est pas difficile, mais maintenant vous pouvez passer au négatif et vous pouvez ajouter plusieurs et les transformer en styles. Vous pouvez également les copier-coller. N'oubliez pas que c'est un peu étrange de les copier-coller. Il y a une sorte de no man's land que vous pouvez sélectionner et vous pouvez simplement appuyer sur la commande C, la commande B. accord, voici le super tutoriel Drop Shadow de Dan . Passons à la vidéo suivante. 69. Masque de calque floutage, masque d'arrière-plan et masque d'image dans Figma ma: Bonjour, tout le monde. Dans cette vidéo, nous allons brouiller les choses. Nous allons créer cet effet de verre où tout cache derrière ce modèle éphémère est flou. Est-ce que tu peux voir flou ? Nous le ferons également pour les calques, où cette image commence par assez nette et potentiellement distrayante Je vais le brouiller, le déplacer en arrière-plan, l' assombrir pour pouvoir mettre des éléments par-dessus sans que cela ne soit gênant. Des trucs bleus. Pour commencer, regardons le fond bleu. C'est le plus drôle, le meilleur. Je suis sur ma page de confirmation sur mon mobile Hi Fi. J'ai sélectionné le cadre, je vais y ajouter une image, donc je vais me débarrasser du remplissage, et je vais ajouter et réajouter le remplissage et le remplacer par une image. Je vais télécharger une image depuis mon ordinateur, et j'en ai une appelée map. Donc, la page de confirmation affichera simplement Bonjour, c'est votre adresse, et c'est là que nous livrons ou c'est là que nous sommes basés. C'est ma région, et je vais l'inscrire. Parfait. Nous allons en brouiller des parties et nous le faisons avec l'objet en haut Je vais prendre mon outil de cadre. Ce sera notre modèle contextuel qui apparaît ci-dessus, il y aura de l' écriture dessus, nous voulons donc souffler l'arrière-plan pour pouvoir le lire. Je vais le remplir. Et nous allons ajouter l'effet. C'est ce qu'on appelle le flou d'arrière-plan, et cela va brouiller tout ce qui se trouve derrière Le problème, c'est que vous ne pouvez pas encore vraiment voir ce qu'il y a derrière. Vous allez donc en réduire l'opacité. Ce qu'il est difficile de retenir c'est qu'il existe deux manières de réduire l'opacité Vous pouvez réduire l'opacité de cette apparence pour l'ensemble, cela fonctionne. Regarde ça. Si je le fais glisser vers le bas, je peux voir à travers. Mais ce qui est étrange, c' est que cela réduira l'opacité du fond, du trait et tout ce qu'ils contiennent, y compris l'effet Ce n'est pas ce que je veux. Ce que je veux faire, c'est simplement réduire l'opacité de la couleur de remplissage J'ai choisi le blanc, mais si je le baisse, peux-tu qu'il soit flou ? Vous devez décider dans quelle mesure vous voulez que cela soit opaque ou transparent. D'accord ? En gros, nous voulons que ce soit juste effet cool, un effet de verre où vous pouvez voir à travers. Nous pouvons ajouter du texte en haut. Permettez-moi d'ajouter immédiatement mon texte. Voilà. Pour qu'il ressemble davantage à un modèle éphémère, il a probablement besoin de coins arrondis, vous n'avez pas besoin de coins arrondis, je vais en mettre huit, et il peut être agréable avec une petite ombre en forme de goutte, afin que nous puissions combiner notre effet. Nous avons donc un effet de fond. Ajoutons également une petite ombre à découper. N'oubliez pas la règle super spéciale deux par deux et peut-être en ajoutez-en une autre pour la version la plus loufoque. Passons à huit heures. Ça nous plaît ? C'est probablement un peu fort pour le moment , mais vous voyez l'idée, vous pouvez flouter les choses qui se cachent derrière, c' est un effet de verre cool Éteignons cette émission. Très bien, mon premier. Cela fonctionne. La prochaine que je veux montrer est la couche bleue. Tu peux tout brouiller. Vous pouvez saisir cette image, dire effet et simplement dire «  je veux que le calque que j' ai sélectionné soit flou Je ne trouve pas cela particulièrement utile, et ce que je trouve utile pour l'utiliser, c' est que je veux flouter une image d'arrière-plan qui pourrait être un peu forte Nous l'avons fait plus tôt en éteignant les noirs ou en éteignant les lumières, désolé. Maintenant, ce sera pour ce contexte. Je pourrais mettre cette image dedans et dire : « Al est mon film ». Je veux le transformer en image. Je vais d'abord vous montrer comment le faire mal. C'est une façon naturelle de procéder. Tu es du genre : « D'accord, j'ai une image. Je veux que ce soit flou. Tu sais, je veux que ce soit plus abstrait. C'est assez géométrique et je veux ôter une partie de sa netteté. Je vais donc passer à l' action. Je vais aller au labo et tu me dis : « Oh, cool ». Je vais le récupérer, d'accord ? Et le seul problème, c'est que si je dis, d'accord, je vais ouvrir mon menu maintenant, il va entrer dans ce cadre où une image est appliquée à un effet Caoutchouc. D'accord ? Il fait tout ce qui est dans le cadre. Donc, ce que nous allons faire, c' est peut-être le faire d'une manière différente, pas de la mauvaise manière, pas de la bonne manière, juste d'une manière différente. Je vais apporter une image. Donc, Command Shift K, je vous utilise un petit menu déroulant ici dans ce panneau de formes, et je dirais que vous entrez. Je vais cliquer dessus et le faire glisser, donc je ne veux pas cliquer sur l'arrière-plan car cela l' appliquera à ce cadre. Tout ce que je vais faire, c'est le rendre vraiment grand. Il va sauter de la page, mais je ne le ferai probablement pas pour vous. Ce que vous devez faire, c'est assurer que c'est sur la bonne page. J'ai ma page de fonctionnalités ici. Je veux que tu sois là, ce qui peut être difficile, je ne vais pas mentir. Nous sommes à court. Je vais faire des cultures parce que je veux que ce soit à un certain endroit. Je veux ça comme ça, je veux ça. Allons-y. Maintenant qu'il s'agit d'une image à l'intérieur du cadre, je peux sélectionner l' image et je peux dire que je veux que l'effet s'applique simplement à elle. Tu vas devenir un label et je peux le monter autant que je veux Maintenant, lorsque je prends mon menu, que je copie, je le copie d'ici et je me rappelle que je clique sur le nom du cadre dans lequel je veux entrer pour qu'il sache où le placer . Regardez-nous. Les autres choses que j'aime faire avec ce flou de couches sont les choses que je ne fais pas et que je devrais vous montrer Une fois l'image sélectionnée, voici l'image. Parfois, je trouve qu'il est plus facile de sélectionner des éléments dans les couches. Oui, double-cliquer. Vous trouverez peut-être la même chose. Cela peut être un peu étrange de maintenir cette touche de commande ou de contrôle enfoncée pour cliquer sur l'image. Cela fonctionne aussi. OK, dans mon flou de couche, il y en a un progressif Cela signifie simplement que le progressiste est où ? Comme mon image est si grande, la progression se fait ici pour une raison ou une autre. Je peux le faire glisser ici pour le rendre un peu plus utile visuellement. Ce que vous remarquerez, c'est que vous pouvez voir que le bas ici montons vers le haut, est flou et que le haut est réglé sur deux, zéro, afin que vous puissiez zéro, afin que vous puissiez décider dans quelle mesure vous voulez que le résultat soit C'est un effet cool. Je n'en ai pas vraiment trouvé un bon usage. Je suis sûr qu'il y en a beaucoup et que vous pouvez inverser la tendance. Tu peux voir ce que je fais ? Est-ce que ça me plaît ? Peut-être. Retournez à l'uniforme. Je vais le baisser un peu. C'est un peu fort. Ce que j'aime aussi faire, c'est ce que nous avons fait dans une vidéo précédente, juste un petit récapitulatif des bonus Est-ce que cette image est là ? Je voudrais l'assombrir un peu Le mien est assez sombre, du texte apparaîtra dessus. Ça ne va pas être trop distrayant. Mais n'oubliez pas que vous pouvez sélectionner cette image. Je vais m'y intéresser et vous pourriez réduire l'exposition. De cette image, juste pour l' assombrir à nouveau. Et n'oubliez pas de jouer avec les points forts, de les faire glisser, mien n'en a pas beaucoup ou tout, donc ça ne m' inquiète pas Mais vous verrez une autre façon de le faire . Je m'en sers beaucoup. Je vais le remettre à zéro, puis le remettre à zéro et m'en sortir. Ce que vous pouvez faire, c'est que vous pouvez avoir plusieurs remplissages sur une couche. Nous avons produit plus d'un effet. Vous pouvez effectuer plusieurs remplissages. J'ai mon image et je dirais qu'elle a deux remplissages par défaut, elle fait vraiment ce que je veux. Il ajoute un fond noir, mais il en réduit également la transparence ou l'opacité jusqu'à 20 % Je peux l'augmenter. Évidemment, s'il est à 100 %, il est complètement noir, mais vous pouvez simplement le faire. C'est presque exactement comme utiliser l'exposition. La raison pour laquelle j'aime parfois procéder ainsi , c'est que si je fais plusieurs images, je peux être cohérente, alors que jouer avec l'exposition, c'est la regarder, langue ouverte, tête, **** de côté C'est ce que je fais de toute façon. Je me dis : « Oui, qu'est-ce qu'il y avait dedans ? Ouais. OK, où est-ce, je peux juste copier et le faire à 30 %, pour qu'ils soient tous cohérents. Mais cela n'a pas vraiment d' importance. J'aime bien ça pour les arrière-plans. Éteignez-les un peu. Maintenant, lorsque nous commençons à ajouter nos objets, c'est un peu un arrière-plan cool, mais cela n'enlève rien à la page d'accueil ou à mon contenu. D'accord, ce sont quelques flous. Nous avons trouvé quels étaient-ils ? Ils étaient superposés en bleu, celui-ci, puis nous avons eu le bleu de fond probablement plus froid, une sorte d'effet de verre. C'est vrai. C'est ça. Oh, c'est presque ça. Il y a une nouvelle fonctionnalité ici. Je n'allais pas en parler, mais je me suis dit : « Oh, ce serait cool pour ça. Il y a d'autres effets ici. Je vous ai donné les bases, que vous pouvez explorer. Y en a-t-il d'autres qui apparaissent ? Celui qui vient d'apparaître est celui-ci, du bruit. Par défaut, c'est un peu difficile, mais pouvez-vous voir comment si je le réduis, la densité, la densité augmente, et peut-être pas si noir, plus clair. J'opte pour l'effet verre, ce genre d'effet de fenêtre de toilette givrée Il y a donc un peu de jeu. Je n'ai pas encore de chiffre magique pour ça. Il s'agit simplement de traîner, langue sortie, tête baissée et de décider ce que cela ajoute à cela ? N'est-ce pas le cas ? Ça ressemble plus à du verre ? Ce n'est pas le cas. Mais maintenant tu sais comment utiliser le bruit. Vous pouvez évidemment le faire également pour les images. Mais pour le moment, c'est tout. flou est terminé. Je vous verrai dans la prochaine vidéo. 70. Projet de cours 14 - Effets: Équipe, classe, heure du projet. Facile et amusant. Je veux juste que vous mettiez en pratique les effets que nous avons appris au cours des dernières vidéos. Déposez l'ombre dans un flou de couche d'ombre et un flou d'arrière-plan. La façon dont vous les mettez en œuvre ne me dérange pas. Ce que j'ai fait, c'est ce que nous avons fait dans le tutoriel, à savoir le flou d'arrière-plan J'ai fait le mien sur ma page d'accueil sur mon Hi Fi. J'ai parcouru et j'ai fait une sorte de flou flou sur la couche d'arrière-plan pour ce truc abstrait Je le voulais quand même assez léger. C'est ce que j'ai fait, et j'ai fait mes ombres tombantes. Et là, je viens mettre mon interface dans l'ombre. C'est à vous de décider où cela va. Je l'ai fait aussi sur le texte, et je veux que vous preniez une capture d'écran qui inclut tout cela. Je me suis retrouvé avec deux captures d'écran pour les miennes. Vous pouvez combiner tous les vôtres en un seul. Il y a donc le mien et le mien. J'adorerais aussi le voir sur les réseaux sociaux. Téléchargez-le sur les projets, évidemment, mais partagez-le également et taguez Mass sur les réseaux sociaux ou sur notre groupe Facebook, le groupe LinkedIn. J'adore voir ce que tu gagnes. C'est bon. Amusez-vous à créer des effets Infigma. Je vous verrai dans la prochaine vidéo. 71. Que sont les composants et les instances dans Figma ma: Un Parlons des composants et des instances. En gros, ils vous permettent de créer un composant principal qui contrôle de nombreux autres . Regarde ça. Je peux dire que je veux plus de rembourrage en haut et en bas ou moins, et tout change Ce qui est bien, c'est que vous pouvez voir que vous pouvez garder vos instances de ce composant principal uniques. Celui-ci a sa propre couleur, son propre texte, mais je peux contrôler des choses comme régler le poids de la police et apporter ces modifications. Elles sont mises à jour, mais conservent leur caractère unique. C'est vraiment cool. Allons-y. Parlons des composants et des instances. C'est bon. Créons d'abord un composant principal. Nous allons commencer par notre bouton. Tu peux utiliser n'importe quoi. Je vais juste le copier-coller ici. Gardez-le simplement séparé. OK, donc ce que nous voulons faire, c'est ce bouton que nous passons du temps à l' obtenir comme nous le voulons, nous voulons le réutiliser. Mais nous voulons avoir le contrôle, comme vous l'avez vu dans l'introduction, en permettant de régler ce composant principal et tout le reste Donc, tout d'abord, nous devons le transformer en composant. Vous le faites en haut de votre panneau de propriétés ici. Pouvez-vous voir ces quatre petits losanges ici ou le raccourci, c' est-à-dire l' option de commande K sur un Mac. Contrôlez Holt K sur un PC. C'était difficile d'en faire ressortir le résultat. Mais si tu cliques dessus, rien ne se passe. Tu es comme si c'était arrivé. Une chose s' est produite, c'est que dans votre panneau Laos, je vais voir ici annuler, c'était quand il s'agissait d'une mise en page automatique ou d'un cadre, peu importe ce que c'est. Une fois que vous l'avez modifiée, elle obtient cette petite caractéristique en forme de diamant. Tu te dis : « Très bien, que fais-tu maintenant ? Eh bien, nous pouvons en faire une copie. Je peux dire que j'en veux un autre. Qu'est-ce qui se passe, c'est que vous pouvez voir l'icône sur celui-ci ? C'en est une copie, mais il n'y a qu'un seul diamant. C'est le composant principal, c' est-à-dire l'instance de ce composant principal, parent et enfant. Maintenant, pourquoi est-ce utile ? Je vais avoir une, deux ou trois versions. En fait, nous allons avoir trois versions. Min et trois exemples. Ce qui est cool, c'est de regarder ça. Quand je change le principal , ils changent tous. C'est très utile. Je pourrais décider que le rembourrage doit être de 32 et 16 Vous remarquerez que les 32 n'ont pas fait grand-chose car qui s'en souvient ? C'est exact. Ce n'est pas un câlin Je vais changer cela pour ajouter ce qui est cool , parce que j'ai changé celui que j'ai peut-être oublié, comme je l'ai fait là-bas, tous les enfants ou les instances de ce composant principal ont également changé. Ce qui est vraiment cool, c'est que ces instances peuvent avoir un caractère unique. Supposons que celui-ci veuille être d'une couleur différente. Donc je vais dire que tu ne l'es plus. Oh, il y a un remplissage derrière ça. Non, ce sont des couleurs sélectionnées. Voilà le remplissage. En me montrant le texte blanc. Voici ce qu'il me faut. Je peux dire, en fait, que je veux que ce type soit ma couleur principale, celui-ci soit ma couleur d'accent, et je vais laisser cette couleur normale. Je vais laisser ça comme couleur secondaire. Ce qui est cool, c'est qu'ils sont uniques, mais regardez, ils ont tous toujours ce contrôle principal. Ils peuvent être tout à fait uniques. Pareil pour le texte. Il faut acheter maintenant. Nous recevrons notre bouton d'achat. La serrure de ce stupide chat est toujours cassée. Ils sont uniques, mais ils ont toujours ce contrôle principal. Vous pouvez entrer ici et dire, d'accord, ce type ici pour une raison ou une autre, parce qu'il est sur une autre page et qu'il doit avoir une apparence différente. Il ne peut pas avoir de rayon d'angle. Encore une fois, nous pouvons toujours le contrôler avec le parent. Vous pourriez décider que celui-ci, en fait , provoquera une sorte de changement global. Je veux donc changer cela par rapport au titre 1. Je vais le casser parce que je veux utiliser une version allégée, et elles deviendront toutes légères. C'est le pouvoir d'utiliser un composant principal et d'avoir des instances. Un autre avantage est que c'est assez compliqué, non ? Tout est là. D'accord ? Je peux accéder à mon panneau Ressources, que nous n'avons pas encore examiné, et mon bouton devrait figurer dans la bibliothèque. Il n'est pas ici. C'est où ? Les composants sont ajoutés à la bibliothèque. Parfois, il y a un bug. J'espère que cela disparaîtra. Je dois fermer le produit et le rouvrir. Tu attends là-bas. Ça ne l'est pas Ils viennent de changer l'interface utilisateur. Ce qu'il dit, c'est sur cette bibliothèque , ici, c'est là. Voilà mon bouton. Je n' aime pas cette nouvelle façon de travailler. J'aime juste les autres listés ici. C'est pour quand vous avez de très gros projets, vous devez dire dans ma bibliothèque pour ce fichier : OK, c'est la première page de ce document, où est-elle ici ? C'est ma première page, c'est pourquoi elle le montre. Dans cette page ou dans ce document de conception, voici tous mes actifs. Tu peux traîner dehors. Je vais revenir à cette page sur laquelle nous travaillons et revenir sur mes actifs. Je peux créer une instance de cette façon. Peu importe que vous le copiiez et colliez ou que vous le glissiez vers l'extérieur, vous créez une instance de ce composant principal. Cela devient pratique lorsque vous commencez à créer des bibliothèques et à les partager avec d'autres personnes. Ils peuvent se dire : « D'accord, je veux tous les actifs de ce dock et ils seront listés ici Quel doit être un composant ? En gros, au stade de la conception lorsque tout est un peu conceptuel, vous n'avez pas besoin de composants dans les instances. Dès que tu as verrouillé quoi que ce soit, oui. Ils devraient être des composants. Comme ce logo ici, nous en sommes satisfaits. Je dois dire, mon ami, que vous allez devenir un composant et que cela finira par devenir un logo ici. Il a un fond blanc , vous ne pouvez donc pas vraiment le voir. Mais cela signifie simplement que si je passe à une autre page maintenant et que je suis sur mon mobile Hi-Fi, au lieu d'avoir à retourner au document, à le copier-coller et à ne plus avoir de connexion maintenant, je peux accéder à ma page de confirmation, à mes actifs, et simplement récupérer le logo et le faire glisser vers l'extérieur. C'est constant. Je vais ajouter un effet. Je vais ajouter en fait mon style que j'ai créé auparavant. Super génial. Ça ne marche toujours pas. Je peux changer la couleur de celui-ci ici en fonction de la couleur de ma bibliothèque. Nous avons apporté quelques modifications à mon composant principal. Mais si je reviens à cet élément principal, c'est une bonne astuce. Comment revenir à la page principale ? Sur mon panneau Layers, je sais que je travaille sur cette instance. C'est le petit diamant. Comment puis-je le trouver ? Vous pouvez cliquer dessus avec le bouton droit de la souris et dire « composant principal », «   aller au composant principal ». Je reviens à ma page qui l'a, et je peux dire qu'en fait, leur taille ne me convient pas. Je dois utiliser l'outil K. Je vais l'agrandir. Vous ne serez probablement pas en mesure de le dire Faisons autre chose. Détruisons-le. Non, je l'ai dit à Shift. Faisons-le encore plus grand, beaucoup plus grand. Ce que nous ferons si nous revenons au Hi-Fi mobile , vous voyez, je suis devenu vraiment grand. Génial Une autre astuce est que disons que vous avez fait quelques ajustements et que vous voulez revenir à l'original, je veux l'utiliser à nouveau, mais je ne veux pas avoir tout ce que j'ai fait le violet et que la goutte peut aller pour réinitialiser l'instance, cela revient au composant principal. Vous pourriez également décider qu' en fait, sur cette page, vous avez passé du temps à bien faire les choses et que vous l'aimez comme ça. C'est la bonne taille. Tu peux aller dans l'autre sens. Vous pouvez dire, en fait, que je veux que ce soit le composant principal maintenant, pas le composant principal, mais je veux envoyer toutes les modifications à ce composant principal. Pouvez-vous le voir ici qui dit d' appliquer les modifications au composant principal. Si je reviens au Hi Fi de bureau, il a ces nouveaux paramètres. J'ai une nouvelle couleur, elle a une nouvelle taille, encore trop grande, toujours de la mauvaise couleur, mais vous voyez l'idée. Je vais l'annuler avant de corriger mon logo. Laisse-le là. Allons-y Il a toujours ses dérogations. Je vais donc dire, en fait, revenir à où se trouve l' instance de réinitialisation ? Tous les bons composants. Vous commencerez par un ou deux, puis vous constaterez que vous en avez beaucoup. Et vous trouverez les modèles d'autres utilisateurs à partir desquels vous travaillez. Vous allez les saisir, les copier-coller pour leur document ou travailler à partir de leur modèle, et ils utiliseront de nombreuses instances dans le document Et si vous voulez tous les changer, il vous suffit de le faire parce que vous ne savez pas où se trouve le composant principal ? Vous êtes du genre, c'est définitivement une instance, ou celle-ci ici, certainement une instance. Où se trouve le composant principal ? Je pourrais dire cliquer avec le bouton droit de la souris et y aller et m'y emmener. Allez-y, s'il vous plaît. Maintenant, c'est juste là. Oh, et la dernière chose, c'est que nous l'avons fait tout à l'heure, lorsque nous copions et collons à partir du document de quelqu'un d'autre, vous pouvez le casser Vous vous retrouverez avec des instances que vous avez copiées et collées, et vous vous dites : « Je ne veux pas qu' connectées au composant principal parce que c'est le Il peut créer des liens entre des documents. Supposons que vous ne le vouliez pas, je peux simplement dire qu' en fait, je veux détacher cette instance Nous l'avons fait plus tôt sans savoir pourquoi, maintenant nous savons pourquoi parce que nous ne voulons pas que ce composant principal y soit connecté. Nous pourrions le casser et le fabriquer nous-mêmes. Nous pouvons cliquer dessus avec le bouton droit ou aller jusqu'ici et dire créer un composant ou créer un composant. Nous avons maintenant ce composant principal qui est maintenant Ls que nous pouvons utiliser, et il n'est pas connecté au document de quelqu'un d'autre datant d'il y a longtemps. vrai, c'est ça. Il s'agit des composants et des instances, composant principal et des instances de ce composant principal. Est-ce que je l'explique bien ? C'est compliqué J'espère que cela a du sens maintenant ou du moins un peu plus de sens. Nous allons nous entraîner davantage . C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. 72. Où conserver les éléments principaux dans Figma ?: Bonjour, voilà. Nous allons organiser nos principales composantes car nous sommes très organisés. Beaucoup de designers ont ce problème de trouble obsessionnel-compulsif où tout serait bien organisé sur une autre page. C'est ce que nous allons faire. C'est une bonne étiquette et pour les gens désordonnés, vous Je vais vous montrer quelques astuces sur la façon de laisser les choses en désordre et vos principaux composants partout de retrouver vos principaux composants partout. Bien, allons-y. Organisons-nous. Commençons par le ranger. Nous avons notre composant principal ici. N'oubliez pas que si vous ne trouvez pas votre composant principal, vous pouvez cliquer avec le bouton droit de la souris et demander où se trouve-t-il ? Composant principal, allez au composant principal pour savoir où il se trouve. Je vais le couper, et je vais aller où je vais aller. Je vais créer une nouvelle page. Celui-ci s' appellera C po Let's. Je vais le faire glisser pour qu'il soit en haut ici et je vais être sur cette page, que je vois. Je vais juste le coller. Très gros Il est préférable de conserver vos composants principaux sur une page de composants afin qu'ils soient faciles à trouver. Nous ne suivons ce cours que depuis un petit moment, HiFi. Regardez-le. C'est Methias Alors que maintenant, c'est une très bonne habitude de les garder sur une page de composants ou de les séparer afin de savoir où ils se trouvent, surtout lorsque vous travaillez avec quelqu'un d'autre, vous ne voulez pas qu'ils aient à les parcourir et à essayer découvrir où se trouve ce mystérieux composant principal. Je vais créer un autre composant. Je vais vous montrer un autre moyen d'y parvenir. J'ai tout ce qu'il faut. Ce sera mon GPS principal. Je vais suivre les moments, juste un cadre. Je vais en faire un composant. Cliquez sur le bouton, utilisez l' option de commande K de votre raccourci ou cliquez avec le bouton droit de la souris. C'est bon. Cela n'en fera pas un composant principal. Faisons celui-ci, cliquez avec le bouton droit de la souris et créez un composant. Et je ne veux pas vraiment en parler parce que si je finis par m'embrouiller, cela affectera toutes les autres pages Il vaut donc mieux y aller maintenant, d'accord, vous, mon ami, allez passer à la page, ou vous pouvez le copier-coller et je vais le déplacer vers ma page de composants. Ce que je vais faire, c'est accéder à mes actifs, et je vais y retourner et je vais y retourner encore. Ce fichier se trouve sous mon panneau de composants, je vais simplement tout avoir ici, puis tout sera réuni au même endroit plutôt que de le répartir Ce qu'il fait ici se trouve sur cette page et si j'ai un autre composant, je veux vous montrer où il est désordonné. Si je fais celle-ci et que je crée, ce sera ma carte, donc je vais utiliser le raccourci Command Option K ou Control Alt K sur un PC. J'ai mon composant, je vais lui donner un meilleur nom. Carte A, je suis sûr que je vais en créer une autre. Vous pouvez voir que c'est certainement un composant, car il contient les quatre diamants. Maintenant, si je reviens au panneau Ressources, vous pouvez commencer à voir que je me retrouve avec des composants sur chaque page. Mais si je les déplace tous, regardez Mobile est là. Si je vais sur celui-ci ici et que je dis « A », vous allez maintenant être déplacé vers ma page de composants. Tu vois qu'il le range  ? Pareil pour mon Hi Fi. J'ai le logo quelque part ici. Je peux cliquer dessus avec le bouton droit de la souris et dire, aller au composant principal. Voilà, je vais le dire, et maintenant, passez à autre chose. Allez, passez aux composants de la page. Vous verrez simplement que dans ce document, je n'ai que ces composants. les range. Sinon, il affiche toutes les pages sur lesquelles ils se trouvent. Ils comprennent, Dan, ils le savent. Je vais l'ajouter parfaitement. Maintenant, vous pouvez simplement tout laisser en désordre et traîner. Vous le faites au début, puis rapidement, vous finissez par simplement les déplacer vers une autre page. Si vous décidez d'être la personne désordonnée et laisser traîner autour de votre document, c'est très bien Dans le panneau Ressources, s'il est vraiment difficile de le comprendre, vous pouvez simplement effectuer une recherche. Si j'ai besoin de la carte que je viens de créer, je peux taper la carte et elle me donnera juste la carte. C'est très pratique lorsque vous travaillez, par exemple, un document plus volumineux, lorsqu'il n'y a que des tonnes et des tonnes de choses différentes. De nombreux boutons différents sont mélangés à tout le reste et vous voulez simplement rechercher des boutons. Bon point, revenons à ma page de composants et procédons à un nommage. Petit bouton, je l'ai déjà fait. Maintenant, je vais bien. J'ai déjà nommé ces objets, carte 1. Je suis un génie et un logo. Voilà. Je n'ai pas besoin de renommer quoi que ce soit. Vous êtes là, cependant, je vais vous montrer une bonne façon de les parcourir et de les renommer. Disons que cela ne s'appelait pas Logo, je peux appuyer sur l'onglet pour descendre pour nommer celui-ci parce que souvent vous vous retrouvez avec juste le cadre 47, le cadre 52. Mains en l'air si c'est déjà toi. Oui, je savais que ce serait toi. Vous pouvez simplement utiliser un onglet vers le bas, les renommer, un onglet vers le bas. Est-ce que c'est utile ? Je trouve cela utile. En cherchant, assurez-vous qu'ils se trouvent sur notre propre page et une autre astuce pour trouver le composant principal. Vous pouvez cliquer dessus avec le bouton droit de la souris. J' ai cette instance ici maintenant. Vous voyez ici, je peux dire : passez au composant principal, c' est ce que vous faites. Vous verrez également que lorsqu' ils ne sont pas sur un cadre, vous pouvez voir le nom, mais vous pouvez également voir l'icône. Vous voyez que lorsque c'est sur un cadre, vous ne verrez ni le nom ni cette petite icône. Maintenant, il ne reste plus qu' à les aligner. J'ai peut-être une section de boutons ici pour les personnes atteintes de troubles obsessionnels compulsifs qui suivent le cours Vous pouvez commencer à aligner les choses, à les étiqueter, à les regrouper et à les placer dans des endroits spéciaux Vous avez un deuxième bouton, vous les regroupez, vous les retrouvez facilement, vous lancez votre feng. C'est ça. Il s'agit de savoir comment ranger vos composants Tu n'es pas obligée. Mais au fur et à mesure que vos projets prennent de l' ampleur et que vous les confiez à d'autres personnes, vous le ferez probablement Du moins pour l'illusion d'être organisé. C'est ça. Je vous verrai dans la prochaine vidéo. 73. Projet de cours 15 - Composants: C'est l' heure des projets de classe, et si vous sautez des projets de classe, n'y allez pas Il y a un petit peu plus dans celui-ci. Je voudrais ajouter quelques éléments intéressants avant de commencer le projet de classe. OK, parlons de ce que nous devons faire, puis je vais vous montrer les choses. Je veux que vous créiez une page de composants, et je veux que vous créiez deux versions du logo, un bouton, une navigation. Laisse-moi te montrer. J'ai les deux logos de mon Nav. J'en ai un qui s'allume sur un fond sombre et un sur fond clair. Vous ne pouvez donc pas vraiment le voir là-bas. C'est une version plus foncée du logo. Donc, lorsque vous le nommez, il est difficile de le savoir. C'est le véritable logo clair, et c'est le logo sombre, mais celui-ci s'appelle le mode clair, le mode sombre. Il est très courant en UX de lui donner le nom de l'endroit où il va en arrière-plan. Mode clair, mode sombre, vous l'avez probablement déjà rencontré. Ceci est utilisé en mode clair car s'il y a un fond blanc, ce serait plus approprié. Sur fond sombre, c'est plus approprié. Utilisez le mode clair et le mode sombre. Il s'agit donc de deux composants principaux distincts, plutôt que d'une instance que vous avez modifiée. Si vous ne parvenez pas à voir certains de vos éléments, vous pouvez les entourer d'un cadre. n'y a aucun problème ce qu' un cadre ne complique un peu les choses, sauf si vous pouvez voir votre mode sombre ou si vous modifiez simplement l'arrière-plan Donc, si vous n'avez rien sélectionné ici, vous trouverez peut-être un arrière-plan qui ressemble un juste milieu sur cette page en particulier afin que tout le monde puisse voir tous les différents éléments. L'autre chose que je voudrais partager avec vous si vous ne faites pas les projets de classe, vous devriez le faire, c'est que celui-ci est une instance imbriquée d'un logo Nous avons donc notre système de navigation ici. À l'intérieur, nous avons notre système de navigation, qui se trouve sur la droite ici. OK. Et je ne le nomme probablement jamais vraiment. Appelons celui-ci des boutons de navigation en forme de trait d'union. J'ai également ce logo ici. Ce n'est pas un exemple de cela. C'est juste le logo que nous avons créé plus tôt. Tu peux voir, c'est toujours un cadre. Qu'est-ce que je dois faire ? Parce que le problème, c'est que maintenant, si j' une modification à cela, vous pouvez voir que si je l'agrandis, cela ne se produira pas pour le trajet. C'est ce qu'on appelle une instance imbriquée, ce qui signifie que j'ai mon composant principal et que je veux une instance à l'intérieur de celui-ci expliquer n'a pas aidé, n'est-ce pas ? Donc composant principal. J'en ai créé une instance que je vais utiliser dans cette navigation. Je vais me débarrasser de ce type et je vais l'intégrer. Ce n'est pas le composant principal. Ce n'est qu'une instance qui me permet de travailler dessus séparément, qui doit être supprimée. Mais ce qui est cool, c'est que lorsque je joue avec ça, parce que c' est un plat principal et que c'en est un exemple, cela arrive. J'ai ce plus grand contrôle. J'ai tout ce bit de navigation à l'intérieur, c'est une instance. Aucune raison pour laquelle vous ne pourriez pas avoir le principal ici également, ce serait peut-être plus facile, mais ce n'est pas le cas. C'est bien d' avoir le logo tout seul plutôt que d' être intégré à celui-ci car vous utiliserez un logo à de nombreux endroits différents, et pas seulement sur le NAV. Mettons-y juste un exemple . C'est bon. Si vous ne faites pas les projets de classe, ce que vous devriez faire, vous pouvez y aller maintenant. Pour le reste d'entre nous, créez une page, créez deux logos, l'un foncé, l'autre clair, avec un bouton et le NAV, avec le logo imbriqué Livrables, prenez une capture d'écran comme celle de tout ce qui se trouve sur votre page et téléchargez-la dans les projets Nous n'avons pas besoin de partager celui-ci sur les réseaux sociaux, ce n'est pas particulièrement intéressant. Nous en parlerons plus tard, mais assurez-vous de le télécharger dans les projets, de couper les Assignements, et c'est tout. Je vous verrai dans la prochaine vidéo. 74. Comment réaliser des variantes de composants dans Figma ma: Bonjour. Bienvenue. Nous allons voir ce qu'est une variante de composant. Dans la dernière vidéo, nous avons créé des composants, simplement quelque chose de réutilisable qui se trouve dans notre bibliothèque d'actifs, mais nous allons aller encore plus loin et combiner deux composants afin que plus tard, nous puissions dire : A, vous, vous pouvez réellement avoir deux variantes différentes d'une même chose. C'est sympa. Cela permet de garder les choses simples et agréables. J'ai un bouton qui peut être plusieurs choses plutôt que d'essayer de faire glisser tas de choses différentes. Pareil pour celui-ci, nous avons créé cette variante. Fais-les participer à ce truc. Je peux dire qu'en fait, je veux l'état de Hova ou l'état des personnes handicapées J'ai appelé Variance et que nous allons faire maintenant. Allons-y. C'est vrai. Variation des boutons. Je vais créer le mien sur ma page de composants. Ils peuvent figurer sur n'importe quelle page, et je l'ai dessinée. C'est juste un simple cadre contenant du texte. Rien d'autre. Je l'ai transformé en sortie automatique pour obtenir un espacement cool, mais c'est Ce que je vais faire, c'est le dupliquer. Je vais en avoir deux versions, et celle-ci ici, je vais l'appeler secondaire. Je veux un bouton que je puisse réutiliser et qui soit prêt à être utilisé avec ma couleur secondaire. C'est la couleur secondaire. C'est bon. Celui-ci sera le principal. J'ai reçu mes boutons principal et secondaire. Je vais les transformer en composants. Je vais donc dire que vous, le bouton principal de mon ami, allez être un composant, faites défiler l'écran vers le haut, appuyez sur ce bouton, vous aussi, les deux composants, comme nous l'avons fait. C'est en gros tout ce que nous avons fait depuis la dernière vidéo. Regardez mon panneau d'actifs, il y deux, deux d'entre eux, c'est bien. Mais lorsque vous en avez trois avec votre troisième couleur et que vous en avez un autre avec des contours, des tailles de police différentes et des boutons plus grands et plus petits, vous pouvez imaginer que ce panneau de ressources devient vraiment grand. Ce que nous pouvons faire, c'est que j'ai mes deux composants. Je peux sélectionner les deux. Que se passe-t-il lorsque vous sélectionnez deux composants à la fois, voir le haut ici, qui dit : « Hé, aimeriez-vous les combiner sous forme de variance ? Tu dis : « Oui, ce serait génial. Que s'est-il passé ? Pas beaucoup. Il y a une ligne pointillée à l'extérieur. Ce qui est arrivé à mon panneau Assets, voyez-vous, passe de deux à un Celui-ci contient maintenant beaucoup de choses. Waouh, plein de choses. Plus d'une chose. Une fois sélectionné, je peux aller ici et dire, écoutez, je peux dire que vous êtes le bouton secondaire. Ah. Oh, vous pouvez fusionner différentes versions ou variantes en un seul composant C'est ce que sont les variantes. Faisons-en une autre. Encore une fois, jetons un coup d'œil au cadre. C'est juste un lot automatique avec du texte dedans. Pas un composant, rien. Mais celui-ci, je veux créer un bouton plus typique sur les sites Web où je peux dire : «  J'en ai un, deux, trois ». Ce ne sera pas mon plan, ce sera mon bouton principal. Celui-ci sera mon survol, lorsque vous le survolerez, puis nous aurons une option pour ce bouton qui sera désactivée Modifions-les lorsque vous passez le curseur dessus avec votre souris, je vais changer la couleur du trait pour qu'elle soit plus foncée, comme pour le texte Le texte sera de la couleur la plus foncée lorsque vous survolerez et si vous désactivez l'option, je vais juste réduire l'opacité de tout ce qu'il contient pour le rendre transparent Tu peux voir ce que je fais ici ? Tout comme vous avez déjà vu des boutons désactivés. Nous devons maintenant les transformer tous en composants. Il existe une astuce pour le faire un peu plus vite. Vous pouvez tous les sélectionner. Au lieu d' en faire une à la fois, vous pouvez dire de regarder ce petit menu déroulant ici. Lorsque vous avez sélectionné plusieurs images, le message suivant s'affiche : « Voulez-vous créer un composant ? Non, je souhaite créer plusieurs composants. Vous voyez, je les ai toutes faites en une seule fois. Des jours heureux. Maintenant, cependant, si je les sélectionne peux les combiner en une variante. Encore une fois, j'ai une variante et si je vais dans mon panneau Actifs, je vais annuler l'annulation d'une, deux ou trois choses qui gâchent mon panneau Actifs à une seule Il est là. Faites-le sortir et je peux dire que l' option AT one doit être le survol Non, ce sera l'option désactivée. Il s'agit d'une variante de composant, tout comme un composant, mais avec quelques variations. Rangeons-les un peu. Au lieu d'appeler le composant deux, c'est un mauvais nom, on l' appellera mon plan BTN, juste pour que je sache ce que c'est dans mon panneau Assets Vous pouvez le nommer ici ou en haut. L'autre chose que nous pouvons faire est d'utiliser le composant principal sélectionné, et non l'instance que nous avons déplacée. Ce type ici. Nous pouvons passer à cela et dire, allez dans les paramètres ici et dire, en fait, quelle propriété je sélectionne ? Parce que c'est ce que nous faisons. Nous allons ici et nous disons, quelle propriété voulez-vous ? Disposez-vous d'une primaire ? Je voudrais aller ici et dire, soyez un peu plus descriptif et dites, pas la propriété. Je veux mettre l'état du bouton. Ensuite, vous pouvez choisir entre le survol désactivé et le principal. Vous pouvez les faire glisser en fonction dans lequel vous souhaitez que l'ordre de la liste déroulante apparaisse. Alors maintenant, ici, celui-ci ici, quel état du bouton voulez-vous ? Vous pouvez dire que je veux le primaire, le premier. Voilà. Vous avez créé une variante de composant ultra compliquée pour la rendre plus compliquée, il suffit de vous donner la langue pendant que nous avançons. C'est ce qu'on appelle maintenant un composant principal, et c'est toujours le cas, ils l' appellent maintenant un ensemble de composants. C'est ce que signifient les petites lignes pointillées autour du bord. C'est juste une façon de dire que ce gars ici a des capacités spéciales, toutes réunies dans une variante Faites donc glisser une instance de celui-ci, ou vous pouvez la faire glisser directement depuis le composant principal comme avant. Vous pouvez en faire glisser une copie. Peu importe. Ce gars ici, je veux changer l'état du bouton. Nom. Vous ne pouvez pas avoir à le faire sur le composant principal. Ensuite, je peux aller ici et dire que l'état du bouton peut être modifié. Pareil ici, vous pouvez dire, d'accord, je veux changer le mot survoler ici Vous ne pouvez pas le faire sur l'instance, mais vous pouvez revenir au composant principal ou à l' ensemble de composants, accéder aux paramètres, puis aller ici et dire que ce n'est pas le principal, c'est autre chose. Effectuez donc vos modifications sur l'ensemble de composants ou sur le composant principal. Ils utilisent ces deux mots pour désigner ces choses, et les instances, il vous suffit de les parcourir et d'apporter les modifications que vous souhaitez voir. Je veux choisir cette variante. Cela vous a-t-il été utile ? J'espère que c'était le cas. Encore une fois, c'est dans le cours de base, c'est assez avancé, principalement parce que vous trouverez le bouton de quelqu'un, vous allez vous dire « Génial ». J'ai copié ce bouton. Ah, j'aurais aimé qu'il y en ait d'autres versions, et tu devrais peut-être aller ici, vérifier et partir, quelqu'un a fait tout le travail pour moi, et tu arriveras à un point où tu seras du genre, mec, j'ai juste besoin de combiner quelques-uns de ces gars, et tu pourras créer tes propres variantes. Très bien, regardez-nous. Utilisateurs inconditionnels de Figma Très bien, ça va être ça. Je vous verrai dans la prochaine vidéo. 75. Autre façon de réaliser des variantes dans Figma: Bonjour, nous allons nous entraîner à nouveau à créer des variantes. Je vais vous montrer une autre façon de les fabriquer. En gros, vous pouvez simplement les créer dans le jeu de composants plutôt que de les créer tous d'abord, et je vais vous montrer une astuce intéressante qui vous permet les transformer en petits interrupteurs à bascule Oh, j'adore les interrupteurs à bascule. Très bien, bonne pratique. Faisons une autre variante. Je vais vous montrer d'autres astuces intéressantes. Et bien sûr, le bouton de bascule. Comment s'y prend-il ? Bien, allons-y. OK. Pour commencer, je l'ai créé, en fait je viens de le voler dans un précédent tutoriel où nous avons appris à utiliser Drop Shadows. ne s'agit donc que d'un cadre aux coins arrondis, avec un petit cercle dedans. Il ne se passe rien. Je vais le convertir en composant, comme nous l'avons fait auparavant. Il s'agit d'un raccourci Command, Option K, Control Alt K sur un PC. OK, j'en ai un. Et si vous faites défiler l'écran vers le haut, accord, je l'ai moi-même nommé Toggle Switch OK ? Et voyez-vous cette petite option ? OK ? Au lieu de simplement signer deux, il vous suffit de cliquer dessus. Et regardez, je vais ajouter une variante. Et c'est un peu comme si tout fonctionnait pour nous au lieu de créer deux composants différents, de les sélectionner tous les deux pour en faire une variante. Créez un composant et dites : «  Je veux une variante de ce composant ». Est-ce que cela fonctionne pour vous ? Pour le second, je vais le récupérer deux fois pour entrer. Je veux que cet interrupteur soit là, peut-être que la couleur de fond passe à l' un de mes neutres, pour qu'il s'éteigne Comme précédemment dans notre panneau d'actifs, nous pouvons simplement le faire glisser. Nous nous retrouvons au même endroit. Peu importe que cela ressemble à ceci ou à cela , nous nous sommes retrouvés avec une instance qui possède différentes variantes. Nos appellations sont toutes très mauvaises, mais elles sont les mêmes. Vous pouvez en ajouter un autre à nouveau. Vous voyez, je l' ai sélectionné. Si vous voyez ce petit plus apparaître en bas, vous pouvez en ajouter un autre. Je ne sais pas quel bouton cela va faire . Coincé dans le bouton central. Je peux aussi le récupérer, et je peux appuyer ma commande D ou contrôle D sur un PC pour dupliquer des éléments. Peu importe la façon dont vous faites votre écart. Vous pouvez les copier et les coller, les dupliquer, appuyer sur le petit bouton plus. Ça n'a pas d'importance. Celui qui vous convient le mieux. Ce que je vais faire, c'est vous montrer quelques autres choses. je supprime ces boutons, remarquerez-vous que la petite ligne pointillée ne s'enroule Vous pouvez saisir l'extérieur et le faire de n'importe quelle taille. C'est juste un indice visuel pour que tu saches que, hé, c'est la chose la plus importante. Ensemble de composants, le composant principal, et vous pouvez l'ajuster selon vos besoins. qui est intéressant, c'est que c'est juste une astuce amusante. C'est notre nom, non ? Si je clique sur le composant principal. Ici, vous remarquerez qu'il y a deux réglages. Cette petite icône de propriétés universelles est partout. Celui-ci, parmi les meilleurs, est générique. Ce que je veux faire, c'est ici, il y a cette autre option ici pour que je puisse me lancer et nommer. n' arrive pas à croire que ce sera celui-ci . Je vais l'appeler. Le rédacteur en chef aurait dû le supprimer, mais j'étais assise là à plisser les yeux, à essayer de me demander comment ça allait s'appeler C'est ce que j'appelle la position de ce bouton parce que nous n'avons rien nommé. C'est ce qu'on appelle la valeur par défaut dans la variante 2. Vous vous retrouverez avec beaucoup d'entre eux. OK ? Nous pourrions leur donner d'autres noms, mais si nous leur donnions le nom secret, s'agit-il d'un nom secret ? Activé. Et si les autres sont annulés, regardez ce qui se passera. OK ? Si j'appuie sur Entrée maintenant, débarrasse-toi de ça. Si je clique sur mon instance, elle sort de la bibliothèque ou est copiée d'ici Sur un Mac, je tiens la touche d' option enfoncée. Oh, contre PC, peu importe, ils sont tous pareils. Toutes les instances de ce composant principal. Regarde ce qui se passe. Il y a un interrupteur à bascule. Pour, cliquez, ajoutez vos propres effets sonores. Je ne sais pas pourquoi c'est génial, mais si vous utilisez ce mot nommer votre variation de façon intermittente, cela se produira. Vous pouvez les qualifier de vrais et de faux, de oui ou de non. Je ne sais pas pourquoi cela me rend heureuse. OK ? J'adore les interrupteurs à bascule D'accord, c'est donc assez compliqué. Faisons-en une autre, super simple. Pour l'outil de cadre, je vais dessiner un simple rectangle, et je vais dire que vous, mon ami, allez être un composant, et je vais créer une variante de vous. Cette autre variante sera d'une couleur différente. Il va être d' une taille différente. Et maintenant, sur mon panneau de propriétés, c'est là. Et il a deux variantes. Pourquoi ne le fais-tu pas au début, Dan ? J'aurais probablement dû. Mais tu t'y prends. Nous avons d'abord créé le plus compliqué, puis celui-ci très simple plus tard. Vous pouvez l'utiliser très rapidement, très simplement et cela permet de garder votre bibliothèque bien rangée. Assurez-vous de donner un nom à vos articles. Sinon, vous devez en définir un dont il est difficile de comprendre à quoi il sert. Ce qui est vraiment bien, c'est plus tard, lorsque vous copiez et collez le travail d'autres personnes, d'autres designers dans votre bureau ou que vous utilisez une bibliothèque appartenant à quelqu'un d'autre Sur Internet, vous pouvez cliquer sur des objets et vous découvrirez peut-être qu' il y a peut-être d' autres options cachées dedans. C'est bon, je suis de retour. Tu ne savais pas que je suis parti. J'ai terminé et je me suis dit : « Oh, nous devrions en faire un de plus, car un autre très bon cas d'utilisation logo clair et foncé est un autre très bon cas d'utilisation qui nous aide à nous entraîner ». Nous les avons déjà. Nous les avons déjà fabriqués. Nous l'avons déjà raccourci, non ? Nous avons ces deux versions. Ils n'ont pas besoin d'être les uns sur les autres. Je ne sais pas pourquoi je les cumule, mais je peux les sélectionner tous les deux maintenant Oh, passez directement au statut de variante. Et maintenant, il a rangé notre bibliothèque. Au lieu de ces deux choses, nous n'avons qu'une seule chose. Nous pouvons le faire glisser et nous pouvons dire : « D' accord, je veux le mode clair ou le mode sombre du logo Va. Il se peut que je change le nom maintenant. Je pourrais dire qu'au lieu d' appeler le composant deux, je pourrais simplement appeler ce logo, et à l'intérieur de celui-ci, je vais entrer dans ces propriétés, et je vais dire que la propriété est mode, et qu'au lieu d'appeler le logo en mode sombre, oh, où allons-nous ? Je me suis perdu. Revenons-en à vous. Au lieu du mode sombre du logo, je vais juste mettre « Impossible de taper ». Mode sombre, mode lumière à onglet bas. Voilà. Un autre très bon cas d'utilisation, bien meilleur que l'interrupteur à bascule ou ce type Aussi glorieux que lui. Très bien, c'est la fin. Je vous verrai dans la prochaine vidéo. 76. Projet de cours 16 - Variantes: Bonjour, il est temps de mettre en pratique ce que nous avons pratiqué. Je veux que tu fasses tes propres variantes. OK, donc nous allons en faire quatre. Nous en avons déjà fait trois en classe. Vous pouvez simplement les faire si ce n'est pas déjà fait. Et puis le dernier veut que vous ajoutiez une case à cocher en bas ici Même si vous ne faites pas le projet de classe, vous devriez le faire. Je vais vous donner un petit conseil sur les domaines dans lesquels vous pourriez vous tromper. Alors regarde ce que tu vas faire. Je veux créer un bouton qui a deux variantes. L'un est le secondaire et l'autre le principal. Je veux que vous fassiez un interrupteur avec une petite option de bascule Pareil pour le logo, il y aura un mode clair et un mode sombre entre lesquels vous pourrez passer de l'un à l'autre, puis je veux que vous cochiez cette case, vous pourriez tomber, et c'est quelque chose que je rencontre très rarement, mais c'est arrivé pendant que je le créais Je me suis dit : « Oh, ici. Ce qui finit par arriver, c'est que tu vois ça, j'ai ma case à cocher. Ça a l'air correct. J'en ai un sans la technologie, un avec la technologie ici. Je suis du genre, A, je vais juste le changer pour je ne puisse pas le faire passer à quoi que ce soit. Je l'ai allumé, mais il ne s'éteint pas. C'est bizarre. C'est parce qu'ici, cet ensemble de composants comporte deux variantes. L'un à côté de l'autre plutôt l'un sur l'autre, peu importe. Ce qui compte, c'est le nom. Ce gars ici s'appelle default et ce gars ici s'appelle default. Je peux voir ici dans mon panneau de couches, par défaut et par défaut. Ce type ne sait pas quoi montrer car ils sont tous les deux appelés par défaut. Nous pouvons le renommer, nous pouvons saisir la case à cocher. Nous pouvons visiter les propriétés ici. En fait, nous ne pouvons pas n'y trouver qu'un seul d' entre eux. Il faut le faire ici. J'en ai une. C'est le vide. Il y a un meilleur nom pour ça. Je n'arrive pas à y penser. Inactif, c'est probablement ça. Celui-ci va être vérifié. Parce qu'ils sont différents, maintenant ce truc sait quoi faire. Il peut dire, c'est vrai, j'ai deux options, pas seulement par défaut, vous pouvez les activer et les désactiver. Dans l'un ou l'autre cas, si j'appelle, faisons-le aussi pour le casser. Je vais entrer ici et je vais les appeler tous les deux mode sombre, mode sombre. Supprime l'un d'entre eux, mais ils sont tous deux appelés mode sombre. Donc ce truc, je ne sais pas quoi faire. Mode sombre, mode sombre. Assurez-vous donc que vos deux variantes ont un nom unique. Cela se produit souvent par défaut. Composant un, composant deux, composant trois, composant quatre. Je ne sais pas comment j'ai fait pour que les miens soient tous deux appelés default, mais je l'ai fait et vous pourriez aussi. Voilà. Je veux que vous créiez ces quatre et que vous en preniez une capture d'écran , alignée comme celle-ci, où je puisse voir le set et l'exemple, et les télécharger dans la section du projet. Amusez-vous à faire des variations. Je vous verrai dans la prochaine vidéo. 77. Comment ajouter un calque popup modal en superposition dans Figma ma: Bonjour. Es-tu prêt ? C'est ce que nous allons faire. Trois, deux, un, un, vas-y. J'adore ça. Il s'agit d'un prototype où ce modal apparaît au-dessus de tout Je peux le fermer, il apparaît automatiquement au-dessus d'un cadre existant. Laissez-moi vous montrer comment faire cela dans Figma. Pour que cela fonctionne, vous devez avoir l'objet que vous souhaitez afficher sur son propre cadre en arrière-plan. Il ne peut figurer sur aucun autre cadre de cette page, vous l'avez juste sur le côté. J'ai dessiné juste un petit cadre avec quelques icônes et un bouton dedans. Je peux juste être un cadre normal. Ça n'a pas d'importance. J'ai conçu le mien pour qu'il ressemble à une fenêtre contextuelle de newsletter. Ce que nous faisons, c'est passer en mode prototype, qui est décalé, ou vous pouvez cliquer sur Prototype ici Ce que nous disons, c'est la page d'accueil ici, je veux que vous y alliez. Nous ne voulons pas qu'il y ait un Navigate two. Nous voulons que l'action indique d'ouvrir une superposition. C'est en gros ça. Jetons un coup d'œil pour voir ce que cela donne. Prototypons la page d'accueil. Passons au Prototype. Attendez un chargement. Et c'est réglé sur un clic, donc je clique immédiatement. Le bulletin d'information apparaît. Je ne sais pas Il y a quelque chose de génial là-dedans. Ça ne se ferme pas, mais je ne sais pas, SMS, donc ce que nous devons faire , c'est cliquer sur le Y ici ou sur le nouille, disons, pas sur cliquer, nous voulons qu'il soit indiqué après un certain temps Je vais dire qu'après environ 4 secondes, 4 000 millisecondes. Essayons-le. Encore une fois, je vais vous donner un aperçu de ce gars, disons play. D'accord. Et au bout de 4 secondes, 4 secondes. Ça y est. Hé ! C'est apparu. Ça ne disparaît pas. Nous laisserons l'aperçu ouvert. Regardons quelques autres points. Lorsqu'il est sélectionné ici, après un délai de 4 secondes, je veux qu'il soit parfumé. Je veux qu'il se ferme lorsque je clique sur l'extérieur. C'est assez courant et je veux que l'arrière-plan soit légèrement estompé sur le dessus. J'aime 50 %. Ça a l'air tout à fait correct. Et l'animation, faisons-la fondre. Et donnons-en un aperçu maintenant. Salut ici. Appuyons sur Réinitialiser. N'oubliez pas que c'est la clé, 4 secondes. Va. Va. Oh, ça a presque marché. s'est estompé, ce qui est une bonne chose. Maintenant, si je clique sur l'extérieur, ça disparaît. Pourquoi le fond noir n' apparaît-il pas ? Allons y jeter un œil. Contexte Alors je l'éteins. Tu l'as vu ? Quoi qu'il en soit, je déteste Figma C'est probablement moi. Après une réinitialisation, trois, deux, un. Va. Il disparaît de l'arrière-plan Je peux m'abonner pour accéder à ma page d'abonnement. Je n'ai pas encore configuré ce bouton, mais si je clique en arrière-plan, il disparaît. Très bien, nous avons donc créé la newsletter par e-mail. Vous pouvez l'avoir pour une alerte, par exemple, au lieu d'un bouton. Donc, je dois dire que lorsque j'ai cliqué sur ce bouton, je suis sur le prototype. À l'heure actuelle, il passe à cet autre cadre Est-ce que j'ai un autre cadre ici ? Châssis. Ce sont toutes des images. C'est un cadre. Je ne veux pas qu'il y aille. Dessinons simplement un rectangle et il sera rouge. Disons qu'il s'agit d'un message d'erreur. Il faudrait le concevoir. Mais pour l'instant, je vais cliquer sur le bouton et je vais passer à Prototype Shifty et je vais dire d'y aller, mais je veux être sur le clic Je ne veux pas trop naviguer, souvenez-vous que je voulais ouvrir la superposition et qu'elle passe au cadre 29 J'ai appelé ce modèle éphémère. C'est exactement comme ça que je l'ai appelé. Modal est le terme générique désignant une unité qui n'est pas une page comme les autres, il me semble, comme un petit groupe. C'est un modèle. Centré, fermé lorsque vous cliquez, arrière-plan, faisons tout. C'est tout bon. Très bien, allons-y. Page d'accueil Et nous allons vous donner un aperçu. En fait, il suffit de revenir ici, d'appuyer sur Réinitialiser. Si je clique sur le bouton B maintenant, ma petite boîte de dialogue d'avertissement apparaît, ou c'est peut-être comme ça, en êtes-vous sûr ? Tu es sûre d'être sûre ? Ou il se peut que vous n'ayez pas rempli ce champ ou quel que soit le modèle de fenêtre contextuelle. Une autre chose que vous pourriez rechercher est juste une partie de la terminologie. J'ai utilisé un modèle. Si vous l' avez déjà entendu, mon accent est peut-être un peu dur. pas un modèle, un modèle avec un A. Il existe également des éléments tels que des fenêtres contextuelles, des boîtes de dialogue. Ils les appelleront aussi. Les avertissements qu'ils les appelleront snack-bar, c'est intéressant. Snack-bar Google. C'est intéressant C'est ce qui se passe sur les téléphones portables. C'est juste en bas. C'est une petite fenêtre contextuelle. Ils les appellent snack-bar. Voilà. C'est une petite technique de prototypage sympa pour les pop-ups et c'est tout. Je vais voir dans la prochaine vidéo. 78. Comment réaliser et prototyper une infobulle dans Figma: Bonjour, nous allons faire une autre superposition, gros avec exactement les mêmes fonctionnalités avec une autre modification, et il s'agit d'une infobulle selon laquelle la superposition n'apparaît pas en plein milieu de la page comme nous l' avons fait pour le bulletin d'information par e-mail Regarde ça. Quand je clique dessus. Il apparaît juste au-dessus du projet sur lequel nous travaillons. Maintenant, c'est une vidéo assez longue uniquement parce que je la fais, nous la faisons ensemble. Si vous êtes venu ici juste pour obtenir cette astuce et savoir comment la faire apparaître où vous le souhaitez, je vais aller droit au but. En gros, il vous suffit de faire comme nous le faisions auparavant, nous allons le faire en un clic. Nous allons ouvrir la superposition. La seule chose que nous changeons, c'est le positionnement. Par défaut, il était au centre, qui se trouve juste au milieu de l'écran, ce qui n'est pas ce que nous voulons dire manuel Puis manuel, vous pouvez le déplacer où bon vous semble. devez toujours démarrer la vie hors écran et vous pouvez passer en mode manuel, puis simplement déplacer là où vous le souhaitez. Même technique : cliquez sur OK, on passe dans ce cadre appelé Olay CC ici, et je passe en mode manuel, puis je peux le faire glisser Mais pour le reste d'entre nous qui veulent tout construire ensemble, c'est traîner et fabriquer. Nous allons créer cette interface utilisateur et cette fenêtre contextuelle ici. Je ne le ferai pas. J'ai rendu ma page de paiement plus complète, mis une image en arrière-plan, puis j'ai dessiné des rectangles dans le texte Tu sais comment faire, tu peux le faire toi-même. J'ai juste un rectangle blanc avec du texte, avec des rectangles aux coins arrondis qui ressemblent à des champs dans lesquels vous pourriez taper votre carte de crédit Nous allons donc sauter cette étape et nous allons commencer construire ces pièces plus uniques. Allons-y. Très bien, donc la façon la plus ennuyeuse de le faire est de faire des points ensemble. Je vais dire : Oh pour mon circatol, dessine un Je vais passer au design. Je vais lui donner une couleur de fond de ma couleur d'accent. Nous avons peut-être une couleur plus informative Souvent, les informations sont vertes. Le succès est vert. En fait, les informations sont bleues. Vous devez déterminer ce que vous allez être comme couleur d'information pour votre site Web. Er est toujours rouge. La conformation est normalement toujours verte. Les informations sont bleues ou grises. Mettons notre moi au milieu de tout ça. Passons à l'outil informatique. En fait, je veux mettre la lettre I, je vais utiliser l'outil de saisie, qui est T, taper un I. Et pour une raison ou une autre, je dois l'être. Je vais rompre le lien avec le style. Il faut que ce soit un serapont. Je ne sais pas pourquoi, oui. J'ai l'impression que c'est le cas. Je vais déplacer mon numéro. J'utilise mes râteaux de manière anale. OK, maintenez la touche Shift enfoncée pour la toucher. Cela me semble bon. Si les choses ne s'alignent pas, il est parfois difficile de les aligner. Si vous l'avez ignorée plus tôt dans les préférences, ici, dans les préférences F, trouverez une grille de pixels capturée Vous pouvez le désactiver pour qu'il soit un peu plus facile de l'aligner au centre. Vous pouvez également cliquer sur ce I, maintenir la touche Shift enfoncée, saisir le cercle, et vous pouvez utiliser cette horizontale. Le raccourci est l'option H ou Alt H sur un PC. Vertical est la même option ou Alt, mais V. Je l'utilise assez souvent. Je vais le faire en blanc, et ce sera mon petit groupe ici. Sont-ils tous les deux cliquables ? Je vais cliquer sur les deux en majuscule . Vous pouvez les voir ici. Ils y sont. Je vais les transformer en cadre. Je vais dire cliquer avec le bouton droit de la souris, encadrer cette sélection dans une petite unité que je peux déplacer. C'est comme un regroupement. C'est cette partie. Nous avons maintenant besoin du bit que nous allons pouvoir superposer. qu' il faut retenir, c'est que vous pouvez le concevoir ici, mais qu'il doit finir par sortir du cadre, sinon il ne fonctionnera pas. Je pourrais trouver les bases ici. Je vais regrouper l'outil de cadre et je veux qu'il soit à peu près aussi gros. Génial Maintenant, je vais le prendre et faire glisser vers le haut et, pour une raison ou une autre, je n'en ai pas rempli. Je ne sais pas pourquoi. Je vais prendre ce cadre. Et réalisez que je ne peux pas utiliser de cadre pour ce que je fais. Les cadres doivent être rectangulaires. Vous remarquerez que même le cercle autour duquel nous avons placé un cadre s'est retrouvé avec une boîte. C'est l'une de ces astuces où ils ont encore besoin de l'outil rectangulaire. La moitié de l'outil rectangulaire a à peu près cette taille. L'avantage de l' outil rectangle , c'est que vous pouvez y entrer et le décomposer avec le stylo, c'est ce que je veux faire. Je voudrais d'abord passer aux coins arrondis. Allons-y huit. Non, c'est trop, quatre, je vais le rendre blanc. Je vais prendre mon stylo. En fait, nous allons d'abord passer en mode dessin. C'est ce que nous allons faire. Passons en mode dessin. Passons au mode dessin, qui est Modifier un objet. Je suis allé ici, en mode dessin. J'ai sélectionné le fichier, je vais dedans. Vous pouvez soit double-cliquer dessus, soit cliquer sur le bouton qui s'y trouve, qui a été appelé. Allez, Dan, tu peux le faire. Celui-ci ici, Modifier l'objet. Je gagne. Maintenant, je peux prendre mon stylo et dire : j'en veux un autre. J'en veux un là, j'en veux un au milieu, puis je vais prendre mon outil de déplacement. Et il suffit de le faire glisser vers le bas pour avoir des points supplémentaires. Oh, c'est arrondi, même. Ça me plaît. Sympa. Vous pouvez simplement utiliser un triangle et les assembler à l'aide de l'outil de création de formes, mais cela fonctionnera pour moi Je veux probablement déplacer le mien. Je vais tenir des graviers, les faire glisser de ce côté, ce sera mon petit modor Je vais prendre mon type d' orteil, le mettre ici. Je vais me procurer HeiPto. Je ne suis pas sûre de ce qu'ils utilisent comme colonne vertébrale pour leur réécriture Je vais envoyer un e-mail comme un e-mail à mon patron. Je veux un CVP x. Je me trompe ? Voilà. Oh. Apportez des modifications. Ne comptez pas plus que combien de mots ? Un, deux, trois, quatre, cinq, environ huit. Oh, faisons-en sept. C'est incroyable ce qu'on peut lui dire de faire. C. C'est du texte blanc, ce qui n'est pas bon. Je ne pense pas que tu puisses le faire pour ça. Vous ne pouvez pas utiliser l'IA pour le moment pour changer de couleur, mais voilà. Ce n'est pas très bon non plus. J'en ai probablement besoin pour dire des choses comme « c'est au dos de la carte ». Mais quoi qu'il en soit, ça fera l'affaire. Je vais donc les assembler. Je vais m'assurer qu'ils sont dans un cadre. C'est l'une des règles. La superposition ne peut pas charger un rectangle dessus, mais elle peut charger un cadre. Je peux donc simplement sélectionner tout cela et vous dire, mon ami, la sélection de cadres. Je vais lui donner un meilleur nom que Frame 30. Ça va être superposé, CVB. J'aime utiliser le terme générique suivant si vous en avez beaucoup dans votre panneau Ressources, ce qui n'est pas le cas pour le moment, toutes les superpositions sont regroupées Quoi qu'il en soit Je pense que nous sommes presque prêts à partir. Essayons-le. Shift E, passe en mode prototype. Shift E. ShiftE ne fonctionne pas lorsque vous êtes en mode dessin pour le moment. Devrait. Mais ça ne l'est pas. J'étais en mode dessin, Shift E ne fonctionne pas. Je dois retourner au design. Ensuite, passez à Shift D. Gates, je dirais que vous, mon ami, allez y aller. Je ne veux pas m'y retrouver. Je souhaite accéder à OnClick. J'aimerais qu'il ouvre la superposition comme nous le faisions auparavant, et par défaut, il se chargera au centre Donnons juste un bref aperçu de ce monde à vous montrer. J'aime le prévisualiser à chaque étape parce que si vous le cassez, vous ne savez pas où vous l'avez fait au cours des 20 dernières étapes , alors continuez à le prévisualiser fur et à mesure et cela fonctionne C'est juste au milieu. Ce n'est pas ce que je veux dire. D'accord, tout d'abord, je voudrais ajouter, sous le design, « sournois Je veux ajouter Drop Shadow parce que ça avait l'air un peu bizarre. J'ai trouvé mon style tout à l' heure, un style super génial. Pouvez-vous voir comment les styles commencent à devenir utiles une fois que vous vous intéressez à la viande et aux pommes de terre du design dont vous avez besoin de cohérence. Je veux que ce soit le même que l'ombre qui y a été appliquée. Très bien, alors passons maintenant à ceci. Retournez à Shifty. Mode prototype. Je vais cliquer sur la nouille ou sur le fil, et je vais dire sur cliquer sur la position de superposition ouverte, pas au centre ou en haut Il y a quelques défauts. Vous pouvez cliquer sur manuel. Un manuel, c'est cool. Passons dans l'autre sens. Vous pouvez simplement le déplacer où vous le souhaitez. Elle doit commencer sa vie et vivre là-haut. Mais une fois que vous avez cliqué sur manuel, vous pouvez le faire glisser pour dire : «  Je veux qu'il apparaisse là lorsque l'interaction de superposition se produit Instantanément, faisons une dissolution. Fermons en cliquant sur l'extérieur. C'est logique. Prévisualisez à nouveau, appuyez sur Réinitialiser, qui correspond à l' Archie sur laquelle je clique. Oh. Regardez-nous. Superposition contextuelle. Maintenant, le clic est utile, surtout lorsque vous utilisez un appareil mobile. Lorsque vous utilisez une version de bureau, il peut être plus agréable d'y accéder Cliquez sur la nouille et je peux dire « Au lieu de onclick », je pourrais dire « on hover La raison pour laquelle cela ne fonctionne pas sur les téléphones portables est que vous savez pourquoi, car vous ne pouvez pas survoler, mais vous pouvez survoler sur un C'est plutôt sympa pour un ordinateur de bureau. Assurez-vous simplement que lorsque vous le faites pour mobile, il est réglé sur « peut-être un clic ». Nous. C'est une autre incrustation contextuelle Nous l'avons fait plutôt sous forme d'infobulle ici, mais le terme est la superposition et les règles sont simplement de s'assurer que le cadre dans lequel vous allez obtenir la superposition ou la fenêtre contextuelle ou, dans ce cas, une infobulle se trouve en dehors du cadre parent L'une des choses qui surprend les gens lorsqu'ils travaillent, c'est qu'ils peuvent le faire et qu'ils peuvent qu'ils se trompent, et ce qu'ils font, c'est qu'ils se En fait, je veux passer à autre chose. Ils en ont postulé deux. Ce qui finit par arriver, c'est que vous voyez ici que ça panique. C'est comme si tu ne pouvais pas en avoir deux. J'ai un survol et un clic et vous pourriez trouver que nous allons essayer de changer celui-ci en un clic. Tu vois qu'il n'y a pas de sol ? C'est comme si, euh, je le faisais ? J'ai passé des lustres à essayer de comprendre pourquoi je ne pouvais pas cliquer. Et je ne savais tout simplement pas qu'il y en avait deux qui s'appliquaient à cela. Parce que parfois tu travailles ici. En cliquant dessus, tu te dis : « Très bien ». Cela va passer en mode « en un clic ». Je ne peux pas aimer. Oh, pourquoi pas ? Parce que tu ne regardes pas vraiment ici. Fais juste attention. Si c'est une note inférieure, cela signifie probablement que vous en avez deux. OK ? Je veux m'en débarrasser. Je vais continuer à cliquer. Tu les manques juste. Maintenant, tout va bien dans le monde de la superposition. C'est vrai. Il s'agit d'une petite incrustation modale contextuelle en forme d' infobulle Oublier toute la terminologie. Vous en avez probablement déjà entendu parler . Mais de toute façon, c'est ça. Je vous verrai dans la prochaine vidéo. 79. Que sont les flux dans Figma ?: C'est bon. Dans cette vidéo, nous allons parler des flux. Ce sont ces choses-là. Vous les avez déjà vus dans le coin. Que font-ils ? Laisse-moi te montrer. C'est bon. À quoi servent donc les flux ? En gros, ils sont juste le point de départ des prototypes. Vous ne pouvez pas les voir, souvenez-vous de B sur le prototype, de Shift E. Nous connaissons Dan, nous le savons, et vous les verrez peut-être. Il se peut que tu ne le sois Si vous n'en voyez pas, c'est parce que vous n'avez aucune de vos configurations de prototypage . Celui-ci n'a aucun flux. Montre. Il n'y a rien par ici, mais si je le connecte à quelque chose, observez ce qui se passe. Si je le connecte à celui-ci, le flux trois apparaît. C'est pourquoi vous vous retrouvez avec plusieurs car cela n'a aucun moyen d'y arriver. Il s'agit d'un nouveau flux. Celui-ci ne va que là-haut. Celui-ci, ici, va là-haut. Jetons un coup d' œil à notre précédent. Passons à l'événement Mobile Info Lo Fi. Nous avons un flux parce qu'il va là-bas, va là-bas, va là-bas. Il s'agit d'un flux continu. Si j'ai une autre page ici, un cadre et un cadre, je passe en mode prototype, alors est-ce que je vais obtenir un autre cadre ? Je ne l'ai pas fait Tu vas ici. Je reçois du flux parce que ceux-ci ne se connectent pas. La raison pour laquelle vous en auriez deux est que vous pouvez réellement partager avec les gens et leur dire : « Hé, sur la même page, je veux que vous consultiez la page d'accueil, mais aussi cet autre flux que j'ai créé ». Prenons un exemple plus intéressant. Je l'ai obtenu dans la bibliothèque de modèles. Cela s'appelle Onboarding Logging and Signup. Où l'ai-je trouvé ? Est-ce que celui-ci est là ? Je ne sais pas Je recherche simplement les flux d'inscription J'ai trouvé celui-ci. C'est un bon exemple. Il y a une inscription, vous avez reçu un e-mail de vérification, un mot de passe oublié. Il existe tous ces différents flux de tâches qui ne sont pas connectés les uns aux autres. n'y a aucun moyen de passer de la page d'inscription à la page du mot de passe oublié. Nous avons notre premier. Je les ai connectés. Juste un véritable flux de base pour le registre. Je vais ici et je dis que le mot de passe oublié va partir d'ici. Dès que je le fais, le flux 2 démarre parce qu'il part, accord, c'est un flux complètement différent. Et ce qui est cool, c'est que je peux prévisualiser directement à partir d' ici, donc je peux passer Alright flow one, appuyer sur Play, et je peux prévisualiser ce flux de registre Ensuite, je peux passer à celui-ci ici et prévisualiser celui-ci. Flux 2, mot de passe oublié. Qui ne se charge pas. Allez. Cela ne fonctionne pas. Pourquoi travaillez-vous ? Hum. Je ne sais pas pourquoi ça ne marche pas. Laisse-moi y réfléchir. Voyons un autre moyen d'entrer dans le vif du sujet. Si vous cliquez simplement sur Présent ou vous allez sur cet autre onglet, vous verrez. C'est un moyen pratique de partager avec les gens. Vous pouvez dire : « Écoutez, vous pouvez passer au flux 1 ou au flux 2. Celui-ci ou celui-là fonctionne ici. Je ne sais pas pourquoi. Il n'y a donc aucun moyen de sortir de cette première. À la seconde. Vous pouvez donc utiliser la navigation ici. Si ce n'est pas le cas, vous pouvez cliquer dessus. La petite icône de la barre latérale est là, et c'est à cela que servent les flux Allons nommer nos flux. Vous avez peut-être obtenu des flux par accident. Vous pourriez dire, en fait, que je ne veux pas que ce soit un flux. Ce que vous pouvez faire, c'est cliquer dessus ou, en fait, cliquer en arrière-plan sans que rien ne soit sélectionné Pouvez-vous voir, voici mes flux ? Je n'ai pas besoin de toi. Je vais dire que tu es mort. Je ne veux pas que quiconque ait accès à cet autre cadre. Ce n'est pas un point de départ, c'est juste quelque chose sur lequel je travaille. Ce que vous pouvez également faire, c'est ne rien sélectionner. Ici, il est écrit Flow One. Vous pouvez double-cliquer dessus et dire qu'il s'agit mon flux d'achat, de mon flux d'achat. Si je vais le prévisualiser ici, je n'ai en fait qu' un seul flux, n'est-ce pas ? Si vous n'avez qu'un seul flux, il ne l'affichera pas par défaut, vous pouvez l'activer. Flux d'achat. Jetons un coup d'œil à celui-ci. En fait, tu as compris l'idée. Tu peux leur donner un nom. La description peut également être utile. Flux d'achat ici. Je n' ai rien sélectionné. Flux d'achat, je peux entrer ici et j'ai regardé l' écran pendant un moment en me demandant où est la description ? Je l'ai découvert. Vous cliquez dessus ici, le véritable tag accroché à ce premier cadre. Ensuite, il y a cette petite icône ressemblant à du papier et vous pouvez ajouter une description. Cela inclut peut-être les modifications apportées par rapport à D. D'accord ? Ainsi, lorsque je le prévisualiserai, vous y voilà. Inclut les modifications pour Doug. Vous pouvez modifier le point de départ du flux en le faisant glisser. Supposons que vous en ayez besoin pour commencer ici et que ce sont peut-être des pages arrières. Vous pouvez les faire glisser. Annulez ça. Une autre chose utile est que si rien n'est sélectionné ici, vous remarquerez qu'à côté de ce flux, nous allons créer un autre flux. Nous ne l'avons pas fait, n'est-ce pas ? S'il n'y a aucun flux pour commencer, vous pouvez ajouter un flux, un point de départ du flux. Bop va appeler ça mon flux de test. OK. Maintenant que rien n'est sélectionné, je clique simplement sur l' arrière-plan pour obtenir nos deux flux. Voici ces options. Celui-ci est vraiment utile. Supposons que notre document comporte de nombreux flux et que nous voulions créer un lien direct vers celui-ci. Il est copié dans le presse-papiers. Je peux accéder à mes e-mails et dire : ce lien ici, Doug, vous mènera à mon flux d'achats Ensuite, vous pouvez simplement les séparer, car parfois envoyer l'aperçu à quelqu'un que vous devez expliquer, vous devez cliquer sur cette petite icône et les parcourir peut être un peu délicat. Si vous voulez simplement les avoir dans la documentation ou les envoyer par e-mail à quelqu'un, il est parfois préférable de les coller dans des liens séparés Et nous ouvrons dans un navigateur. Il se charge dans Chrome, et il passe directement à ce flux. Si vous souhaitez accéder au flux de test, il vous suffit de copier l'autre lien. Vous savez comment copier des liens. Faisons-le quand même. Je n'ai donc rien sélectionné, je vais accéder à mes flux. Oh, ça ne marche pas. Je suis sur mon outil de saisie. Retournez à votre outil de déplacement, puis ne sélectionnez rien, puis je peux dire que je veux créer un lien vers celui-ci. Et lorsqu'ils ouvriront le lien, il commencera par défaut ici. Fais-le, Dan. OK ? Très bien, cliquez sur le lien, et c'est parti. Cela passe directement à mon étrange flux de tâches sur la page blanche. C'est à cela que servent les flux. Juste là où tout commence, vous commencerez à les voir apparaître. Vous vous êtes déjà demandé ce qu'ils font. Maintenant tu le sais. C'est bon. Passons à la vidéo suivante. 80. Menu de navigation défilant sur mobile dans Figma ma: Bonjour, tout le monde. Nous allons le faire. Il s'agit d'un menu de navigation mobile qui va se glisser vers l'intérieur. OK ? Donnons-lui un aperçu. Je vais cliquer sur mon petit menu de hamburgers. Le menu se glisse vers l'intérieur, puis je peux le fermer et il glisse vers l'extérieur. Il y a quelque chose de très amusant et tactile dans celui-ci. Il s'agit d'utiliser des compétences que nous avons déjà apprises, ce qui est cool, de les mettre en commun d'une manière différente. Bien, entrons dans le vif du sujet et créons un système de navigation mobile dans Figma. Très bien, je vais commencer par ce système de navigation mobile déjà créé Si vous voulez voir comment je l'ai fait, je le ferai à la fin de cette vidéo, mais pour l'instant, juste un rectangle avec du texte dedans. Faisons en sorte que ça marche. Donc, ce que je veux faire, c'est m'assurer que ce cadre n'est pas encore au top. Nous allons utiliser cette fonctionnalité de superposition. OK, donc Shift E pour passer à Potter, je veux la page d'accueil. En fait, non, je veux que ce menu de hamburgers soit affiché sur ce navigateur mobile. De toute évidence, nous sommes sur la page mobile Hi Fi. OK ? Donc, lorsque vous appuyez dessus, je ne veux pas qu'il navigue vers Je veux qu'il ouvre une superposition et qu'il soit positionné, non pas au centre, mais en haut à gauche Essayons-le. Prévisualisons-le. Donnons un aperçu de ce type. Eh bien, il est parfois difficile de cliquer sur le flux parce que ce fil vous gênait. Nous y voilà. Cliquons sur le Nav. C'est apparu. En quelque sorte. Et puis ça ne disparaîtra pas. Alors, jetons-y un coup d'œil. Je vais cliquer sur le fil. Je vais dire « on tap », c'est bien. Superposition ouverte, en haut à gauche. Je ne veux pas qu'il se dissolve. Je veux emménager. quelle direction nous allons le faire entrer par la droite. Et faisons en sorte que l'assouplissement soit agréable. J'aime la facilité d'entrée et de retour. OK ? Eh bien, en fait, non, j'aime et sortir, mais voyons à quoi ça ressemble. Allons jouer, jetons un coup d'œil. Zuko. C'est un peu rapide. Tout se mélange dans la boîte aux lettres en haut au cas où nous allions faire deux ou trois choses. Je vais devoir ajuster mon système de navigation parce que je veux que vous et vous passiez en dessous. Cela signifie que vous et vous allez descendre. Et je voudrais cliquer sur ce fil ici et me détendre. Je veux juste entrer et sortir facilement. Et allons-y un peu plus longtemps. 0,4 seconde. autre chose que tu souhaites changer ? Oui, c'est ça. Passons donc à nouveau à l'aperçu. Ouais, oui, c'est mieux. Je dois encore le déplacer vers le bas. Nous pourrions ajouter toutes les autres parties à la navigation avec la batterie, le Wi-Fi et d'autres éléments de ce genre. Je ne veux pas faire ça maintenant. Maintenant qu'il fonctionne, je dois le fermer car il ne se ferme pas. Il y a deux choses simples que nous pouvons faire. Cliquons à nouveau sur ce fil. Nous pouvons dire gagner en cliquant à l'extérieur, le fermant et en ajoutant un flou d' arrière-plan Mais j'en ai jusqu'à 50 et ça en fera une partie. L'autre chose que je veux faire, c'est faire en sorte que cela fonctionne. Je veux te dire, mon ami, ce que je veux te dire. C'est une question étrange. Je ne le traîne nulle part. Ce que je peux faire, c'est ajouter une interaction à ce bouton qui ne mène nulle part. fois sélectionné, je peux dire, en fait, qu'il suffit d'ajouter une interaction. C'est la même chose que de faire glisser le pointeur. Si je fais glisser le pointeur ici, j'ai ajouté de l'interaction et j'ai juste prérempli ces éléments Mais si je dis, je vais m'en débarrasser. cette option sélectionnée, je peux dire que je veux une interaction, fois cette option sélectionnée, je peux dire que je veux une interaction, mais au lieu d'une interaction, oui, je veux qu'elle soit instantanée. L'action va se superposer de près. Vous pouvez voir que ça ne mène nulle part. Il y a ce petit peu maintenant, donnons-en un aperçu, allons-y Zouk et ensuite Jug Regardez-nous . Je ne sais pas pourquoi je l'aime bien. quelque chose de très tactile dans le fait qu'un menu entre et se ferme. Sympa. L'autre chose que je dois faire, c'est câbler mes boutons. Lorsque vous cliquez sur Accueil, vous accédez à cette page ici. En ce qui concerne les fonctionnalités, il va aller sur cette page ici, et Cart va aller sur cette page ici. Le truc, c'est que je me souviens la dernière interaction que j'ai faite, ça va probablement faire des choses étranges. Allons-y, passons aux fonctionnalités et ça a glissé vers la droite Je viens de m'en souvenir. Ce que je vais probablement faire, c'est passer par tout cela et au lieu de passer à l' action, je vais simplement passer à Instant ou dissoudre. Se déplacer instantanément et au toucher, c'est bien. Il se déplace vers le bas. Allez. Instantané. C'est bon. Donnez-lui un aperçu, et il y a une dernière chose que je pense que nous devrons faire, et je pourrai accéder aux fonctionnalités, puis je clique sur le menu, sur le menu. Donc ça ne marche pas. Donc, ce que je peux faire, c' est juste arranger celui-ci. OK ? Je peux dire que lorsque vous avez cliqué, allez dessus, faites-le superposer, faites-le glisser, faites toutes ces choses Mais c'est probablement, eh bien, je sais que c'est plus facile. Je vais annuler cela en saisissant ce menu ici, celui que j'ai déjà créé, en le copiant, en supprimant celui-ci ici, en collant et en accédant celui que j'ai déjà créé, en le copiant, supprimant celui-ci ici, à celui-ci collant, en passant à celui-ci et en passant. Je vais me débarrasser du logo en dessous de celui-ci. OK ? Et je vais prendre celui-ci, y aller. Et c'est tout. J'espère que cela fonctionnera. Il suffit de vérifier. Je vais aller voir l'un de ces gars. Ouaip. Toutes les interactions se sont donc produites. Donnons-lui un autre aperçu. Oui, passons à la page des fonctionnalités. Retournez au menu, prenez un panier et revenez ici. Il n'y a rien dans mon panier. Regardez-nous. J'ai un système de navigation mobile qui fonctionne. En gros, nous utilisons la superposition pour cela. Nous l'avons utilisé pour notre menu contextuel. Nous l'utilisons pour notre infobulle, une petite fonctionnalité très pratique, et vous pouvez y aller dès maintenant. Tu es renvoyé. Si vous voulez traîner, je vais vous montrer comment j'ai créé une boîte contenant du texte Cela peut être pratique car je les ai légèrement différentes en les espaçant ou en utilisant des outils que vous connaissez déjà Alors, traînez dans les parages si vous voulez le voir. Sinon, je vous verrai dans la prochaine vidéo. Continuez. Découvrez comment ils ont été fabriqués. Bien, commençons à construire. Très bien, donc l'essentiel est de le construire. Je vais dessiner quelque chose qui ressemble à une navigation. Je vais le mettre rapidement sur ma page , juste pour lui donner la bonne taille. Je veux un peu d' espace sur le côté droit, car j'ai de la place et je veux que les gens sachent que nous ne sommes le côté droit, car j'ai de la place et je veux que les gens sachent que nous ne sommes pas allés une nouvelle page et qu'ils puissent cliquer sur l' arrière-plan pour la fermer. Une fois que j'aurai terminé, je vais juste le déplacer, nous le construirons ici. Donnons-lui un bon nom. Appelons celui-ci mobile. OK. Et ajoutons le logo depuis notre panneau Ressources. Donc le logo, le voilà, J ****** et nous allons passer en mode clair ou nous regarder en utilisant la variance. OK ? Et je veux prendre l'outil de saisie. Je vais avoir un bouton d'accueil. Ce que je veux faire, c'est rendre le bouton d'accueil un peu facile à cliquer, car il est assez petit Donc, ce que je vais faire, c'est fabriquer une sorte de rembourrage à l'extérieur Pour ce faire, je dois l'ajouter à un autoframe car il est facile d'ajouter du rembourrage, Mais vous ne pouvez pas ajouter une mise en page automatique uniquement au texte. Cela doit être à l'intérieur d'un cadre. Sélection du cadre, et je dois dire, maintenant vous sortez automatiquement uniquement parce que je le veux. Tu n'es pas obligée de le faire de cette façon. Vous pouvez simplement faire glisser le cadre extérieur et déplacer le texte à l'intérieur comme un bouton, mais je le fais différemment. Je vous montre différentes manières. Je vais faire huit par huit pour qu'il soit facile de cliquer avec le doigt. D'accord, parce que je veux que ce soient des boutons séparés, je vais les avoir dans des zones de texte séparées Alors, combien est-ce que j'en veux ? Je ne m'en souviens pas. Allons-y. Oh, on devrait le faire. Faisons-le correctement, Dan. Faisons-en maintenant un composant. OK ? Nous allons donc opter pour l'option « Allez ». OK, maintenant c'est un composant. Je veux avoir, dois-je conserver ce composant principal ici ? Souvent non. J'aime juste l'avoir sur mon autre page. En fait, c'est juste sur le Non, tout va bien. Il doit être copié et collé sur ma page pour les composants. OK ? Et passons au bouton de navigation mobile. OK, revenons à la même page. Où en sommes-nous avec Mobile Hi Fi, et nous allons en tirer un atout. Tu y vas. D'accord. Maintenant, je vais faire glisser une instance, une, deux, trois, quatre. Très bien, nous sommes rentrés chez nous. N'oubliez pas que nous pouvons modifier ces instances pour qu'elles soient uniques. Nous avons des fonctionnalités pour la maison. Je vais appeler ce chariot maintenant chariot. En fait, j'en ai donc besoin de trois, votre site web finirait par en avoir plus, n'est-ce pas ? Tu es parti. vous les avez toutes sélectionnées, si je zoome suffisamment, je peux voir ces petites lignes ici. Vous pouvez le faire manuellement ici sous espacement. Nous utilisons simplement les guides intelligents ici. C'est bon. Maintenant, il nous faut une petite croix dans le coin. Je triche souvent et j'utilise simplement la même police que celle que j' utilise, en appuyant sur un plus C'est une des raisons pour lesquelles les X ne fonctionnent pas bien. Elles ne ressemblent jamais à une croix, et je vais les agrandir. Non, je vais utiliser mon CatOfEscale, l'agrandir, et je vais le décrire, donc ce n'est pas une police Ça va décrire un accident vasculaire cérébral. Maintenant, il s'agit d'une forme, et je vais la faire pivoter. Et maintenant, nous avons notre croix. Est-il assez grand pour cliquer ? Encore une fois, il se peut que je doive le coller dans un cadre. Juste pour lui donner une zone plus cliquable , c'est probablement suffisant Mais encore une fois, je pourrais transformer en cadre automatique au moment du rembourrage, ou simplement le parcourir et le faire glisser un peu plus grand Vous quadrillez l'objet à l'intérieur, vous le déplacez. Nous y voilà. Principalement au milieu. Suffisamment bon. Voilà. Et c'est là que nous avons en quelque sorte commencé la vidéo. Je veux que ça s'aligne un peu, là. Et juste parce que j'aime ajouter du drop shadow, je vais ajouter mon type d'effet Where we Go. Je vais ajouter mon style super génial. Je vais le casser, d'accord ? Parce que j'en ai probablement besoin pour faire avancer la cause en ce moment, c'est pour pousser vers le bas. OK ? Tout va de pair là-dedans Je vais faire quatre et zéro, ce qui le pousse de quatre pixels sur l'axe X, ce qui est correct, et pareil pour celui-ci ici Oh, je ne savais pas que ça te le montrait. Tu peux y voir ? Cela vous montre dans quelle direction il pointe réellement ? Oh, c'est chic. Deux et zéro. Sympa. D'accord. C'est là que nous avons commencé notre tutoriel. Cela n'a probablement pas été très utile. Nous avons ajouté du texte, mais il est parfois agréable de le voir. C'est bien d'utiliser une variante, ce qui est cool. Très bien, en avant et vers le haut. Je vous verrai dans la prochaine vidéo. 81. Projet de cours 17 - Prototypage: Bien, il est temps de créer votre propre prototype. OK, je veux que tu fasses trois choses. Donc, le modèle contextuel, nous avons intégré la newsletter par e-mail dans les didacticiels, l'infobulle pour le CVV et la navigation mobile, ce que nous venons Nous les avons donc tous déjà fait. Je veux que tu t'assures d'avoir fait le tien. Fais une capture d'écran et montre-le-moi. Lorsque vous en prenez des captures d'écran, passez en mode prototype afin de voir toutes les lignes, d'accord pour les connecter toutes. OK ? Prenez donc une capture d'écran de tout cela. Il n'est pas nécessaire que le vôtre soit un bulletin d'information. OK ? Je t'ai donné d'autres options, mais tu peux choisir ce que tu veux, une sorte de fenêtre contextuelle différée, d'accord ? Signature de l'e-mail lors de la confirmation du panier. Je t'en ai donné quelques autres. L'infobulle ne doit pas nécessairement être pour le CVV, c'est peut-être autre chose. Et quand vous le ferez, vous devrez rassembler une sorte de données de saisie par carte et consulter d'autres modèles, voir ce que d'autres personnes ont fait, ce qui donne l'impression que c'est un bon formulaire fiable que vous pourriez saisir. Mais l'infobulle ne me dérange pas . Cela peut être pour autre chose. Pareil pour le mobile Nav. glisser sur mobile Hi Fi, mais il n'est pas nécessaire qu'il ressemble au mien. Il peut glisser dans différentes directions. Il s'agit plutôt de la mécanique pour le faire fonctionner. Très bien, alors amusez-vous à créer des prototypes en utilisant de nombreuses superpositions Je vous verrai dans la prochaine vidéo. 82. Comment épingler la navigation vers le haut dans Figma ma: Bonjour. Dans cette vidéo, nous allons créer une navigation qui se situe en haut, là où les objets se glissent en dessous. Je vais faire une version rapide car la technique actuelle est assez simple. Ensuite, je ferai une version plus longue laquelle nous prendrons en compte un peu de transparence et nous créerons une petite barre à sandwichs à l'arrière. Très bien, allons-y. Très bien, le moyen le plus rapide est de saisir ce que vous ne voulez pas faire défiler. Tu veux le fixer au sommet. Et tu dois passer au prototype. C'est ce que je n' arrête pas d'oublier. Je sais que mes étudiants oublient, alors vous pourriez oublier qu'il faut passer au prototypage, et vous dites que ce truc est sélectionné ici. Je veux le poste. Tu veux faire défiler la page avec le parent ? C'est juste un défilement et ça avance. Je veux dire non, je veux que ça soit réparé. L'autre chose que vous devez faire, c'est que vous avez besoin de quelque chose vers lequel vous pouvez faire défiler la page. Pour le moment, mon contenu se termine avant la fin de ma page, ne défile pas car il n'y a rien vers lequel faire défiler la page. Je vais le dupliquer, d'accord ? Et c'est exagéré, et je dois juste vérifier que c'est toujours sur la page d'accueil. Je peux le dire parce que c'est coupé. Vous pouvez voir ici les couches de ma page d'accueil, ma carte, la nouvelle carte que j'ai créée, quatrième carte que je vais juste faire glisser vers le bas parce que je ne sais pas, le trouble obsessionnel-compulsif Allez-y. OK, un, deux, trois, quatre, c'est un problème, mais ça fait toujours partie de la page d'accueil. Allume ça. Je sais que c'est là-dedans. Une dernière chose est que vous devez sélectionner le cadre parent et dire : «  Que voulez-vous que je fasse de ce dépassement lors du comportement de défilement ? ce dépassement lors du comportement de défilement Je voudrais faire défiler la page verticalement, s'il vous plaît. Donnons maintenant cet aperçu, jetez-y un coup d'œil. J'espère que maintenant aussi, nous avons des choses à faire défiler. La principale chose à retenir ici est qu'il y a trois étapes. Tu dois faire réparer le truc. Tu dois t'intéresser au prototype, d'accord ? Fais-le réparer. Et puis le trop-plein doit être vertical OK ? Mais vous ne le faites pas sur cet objet en particulier. Tout cela me met mal à l'aise. Parfois. Je suis du genre : « Oh, oui, fais le défilement vertical ». Parfait. OK ? C'est le vrai cadre parent, pas ça. Vous voulez que ce trop-plein soit réglé à la verticale. Et vous avez également besoin de quelque chose pour faire défiler la page. Trois choses, tu es en or. Très bien, faisons le long chemin maintenant. Un peu de transparence, et je veux juste vous montrer mon fonctionnement et il y a quelques petites choses intéressantes que vous allez rencontrer. Je veux revenir à Design View, donc Shift E pour me débarrasser principalement des fils. C'est difficile d'avoir beaucoup de défilement Vous cliquez sur cette page d'accueil et vous dites : «  Je ne veux pas couper Tu n'as pas besoin de le porter. Cela ressemble plus à un élément visuel. Vous pouvez avoir quelque chose de très long, je vais les dupliquer. En fait, je vais retourner à mon panneau Ressources. Ai-je créé une carte ? Non, nous n'aurions pas dû créer de carte. L'avons-nous fait sur la page d'accueil ? Nous n'avons pas raison, devrions, je devrais prendre ce premier maintenant, le transformer en composant afin que je puisse le contrôler globalement. Mais juste pour cette vidéo, je vais ignorer mes propres conseils et continuer avec quelques-uns d'entre eux. Celui-ci s'est-il retrouvé à l'extérieur de la maison ? Jetez-y un coup d'œil. Donc non, il est toujours là. Cool. Vous n'avez donc pas besoin de le déplacer vers le haut. Cela peut être aussi long qu'il le souhaite. OK, je vais y aller. Et quand je le prévisualiserai, d'accord , je vais utiliser l'espace Shift pour le prévisualiser. OK ? Je vais maintenant faire défiler la page, et vous pouvez la voir défiler vers le bas. Il est toujours contenu dans le téléphone. Tu comprends ce que je veux dire ? Même si vous avez rallongé le cadre. De toute évidence, vous en avez besoin lorsque vous travaillez. Lorsqu'il est publié, il est piégé dans le téléphone. Que vous l'ayez clipsé ou non, peu importe. La prochaine chose que je veux faire, c'est ajouter un peu de transparence à mon NAV. Ce que je vais faire, c'est que je n'ai pas de navigation pour mon mobile comme dans un composant. Je les ai tous sous forme de cadres séparés. Ce que je vais faire, c'est en faire un composant, option de commande K sur un MAC, Control Alt K sur un PC. C'est maintenant un composant principal. Je vais copier ou le couper, le déplacer vers mon panneau de composants parce que nous sommes super géniaux. J'ai le Nav ici. Donnons à celui-ci un nom amer. Appelez celui-ci NAV. Portable. Cool. Revenons à notre page. Nous faisons du Hi-Fi mobile. Je dois dire que c'est pénal, où êtes-vous ? C'est toi debout ? » Alors fais-le sortir. Faites-le entrer, assurez-vous qu'il est sur la bonne page. C' est juste une double vérification. Parfois, oui, il est sur la page d'accueil, ce qui est bien. Je vais le supprimer, le supprimer. Supprimer. Ce que je ne veux pas faire, c'est faire glisser le Nav du panneau Assets à chaque fois, donc je vais le copier. Et si vous copiez une instance, vous obtenez simplement une autre instance. Coller. Encore une fois, si vous cliquez sur le nom, il sait en quelque sorte où le mettre. Et allons rendre cette partie violette un peu transparente. Faisons un clic droit dessus. J' y vais accidentellement dans le Maine d'une manière ou d'une autre. Ou vous pouvez simplement accéder au panneau des composants, et je vais prendre mon violet ici et je vais devoir rompre le lien parce qu' il n'est pas transparent. Si je fais l'apparence, ça fera tout. Je veux rompre le lien avec cela, et je vais dire que ce sera 80 %. Je dois faire des allers-retours depuis cette autre page. Passons au mobile, le Hi Fi se lave un peu. Ça a l'air bien dans ce contexte. Donnons-lui juste un aperçu. Quoi qu'il en soit, déplacez la barre d'espace et vous verrez qu'elle n'est plus épinglée. Réactivons tout ça. Vous, mon ami, souvenez-vous d'un prototype. Parent Scroll ? Non, fixé sur le dessus. J'ai déjà configuré le défilement vertical de la page entière pour que cela fonctionne. Déplacez la barre d'espace. J' aime bien quand elle monte en dessous. J'aime bien la couleur là-bas. pourrais choisir la couleur la plus foncée. Je vais le faire de la bonne façon cette fois, en passant par le composant principal, et je vais passer au design, Shifty Regardez-nous avec des raccourcis. Je vais choisir notre bibliothèque. Je vais choisir la couleur la plus foncée pour commencer, puis la décomposer et la baisser à 80 %. C'est bon. Et tous mes téléphones Hi Fi auraient dû être mis à jour. N'oubliez pas que c'est pourquoi les composants sont très pratiques, car ils les mettent tous à jour en même temps. Passons à notre aperçu. Je vais effectuer une réinitialisation. Je l'ai déjà fait. Oui, je préfère cette couleur. Je n'aime pas que Scott soit coincé dans un coin. Je dois travailler là-dessus. Mais voilà. défilent. Vous pouvez également le faire vers le bas. Ce n'est qu'une étape de plus. Si vous avez ce qu'on appelle des snack-bars qui apparaissent en bas. Parfois, les gens auront une navigation en bas assez courante. Faisons-le simplement avec un rectangle. Ce que je dois faire, c'est dire, allons-y pour celui-ci. suffit de trouver la bonne position, puis je vais déplacer parce que celle-ci est assez longue Je dois dire que vous aimez un petit système de navigation mobile ici et je vais avoir une couleur de remplissage de. Allons-y pour celui-ci. Je vais le casser et le rendre un tout petit peu transparent. Juste un peu 90 %. Je n'en veux pas vraiment. Je veux en finir avec celui-ci, collez. Il est dans la bonne position, si vous voyez ce que je veux dire, il sait où se trouve le bas du téléphone parce que j'ai commencé par celui-ci. Ce que nous devons faire, c'est le sélectionner. N'oubliez pas qu'en mode prototype, nous devons dire que vous avez de quoi il s'agit ? Parent de défilement corrigé. Reste où tu es. Encore une fois, la page d'accueil ou l'ensemble du cadre doivent être placés à la verticale. Je l'ai déjà fait. Essayons-le. Navire la barre d'espace, faites défiler la page vers le haut et vers le bas. Voilà. H. Il y a une chose que tu devras peut-être faire. Je n'ai pas besoin de le faire sur cette instance Parfois, sous le design, les contraintes, en haut à gauche, fonctionnent pour moi, car si je redimensionne ma page, reprenons mon cadre parent Il est fixé sur le dessus, il ne bouge donc pas. Parfois, c'est le cas par défaut . Ce gars ici peut par défaut être en bas Ensuite, lorsque je redimensionne ma page, elle reste collée à cette partie Donc c'était bien pour moi. C'est quelque chose que vous pourriez rencontrer en fonction de votre design. Voilà. Nous l'avons fait. Navigateur autocollant. Stylo sur le dessus. Je te le rappelle encore une fois. Vous devez être en prototype pour que cela fonctionne. Tu dois cliquer dessus . Tu veux qu'on te répare. Puis positionnez-vous. Le parent Scroll est modifié pour corriger. Le cadre parent dans lequel vous souhaitez qu'il soit corrigé doit autoriser le défilement vertical et vous devez également avoir quelque chose pour le faire défiler Cela devrait fonctionner. Très bien, autocollant de navigation. Je vous verrai dans la prochaine vidéo. 83. Équipes, projets et fichiers dans Figma ?: Bonjour, tout le monde. Vidéo rapide. Je voudrais juste récapituler. Je peux être un peu confus ici sur votre page d'accueil. Vous avez des équipes. Au sein de ces équipes, vous avez des projets. À l'intérieur de ces projets, vous avez des fichiers de conception. Vous avez également des brouillons. Couvrons-les maintenant, rangons-les dans notre tête. Allons-y. C'est bon. Tout d'abord, revenons à la page d'accueil, l'icône d'accueil en haut, ou si vous utilisez un navigateur, vous pouvez aller sur le F en haut et revenir aux fichiers. Peu importe lequel. Vous avez alors trois types de fichiers, ou trois types de choses. Vous avez des fichiers, des fichiers de conception sur lesquels nous travaillons. Vous avez des projets dans lesquels ils vivent, et ils sont tous placés sous l'égide de cette équipe. A des projets. À l'intérieur de ces projets se trouvent des fichiers de conception. Ces fichiers de conception. Allons y jeter un œil. J'ai mon équipe ici, mon équipe qui apporte des ordinateurs portables. J'ai de nombreux projets sur lesquels je travaille et à l'intérieur de tous ces différents projets se trouvent des fichiers de conception. Maintenant, ces projets sont là, je peux en créer un nouveau. Supposons que nous travaillions sur une campagne par e-mail. Avec qui est-ce que je souhaite le partager ? Je ne vais tout simplement pas les partager avec qui que ce soit, puis je pourrai y mettre mes fichiers. Je peux consulter mes brouillons sur lesquels je travaille peut-être, mais personne d'autre ne peut voir ces brouillons Il vous est caché à moins que vous ne le partagiez. Si vous y allez, d'accord, je suis prêt à partager avec l'équipe Je peux déplacer ce fichier vers ce projet de courrier électronique ici. OK, c'est juste une façon de tout organiser. Regardons maintenant mes projets , ils sont sortis de brouillons Cela fait partie de mon projet appelé Email et tous ceux qui ont accès à mon équipe, tous ceux avec qui je travaille peuvent le voir maintenant. Ça a du sens ? L'avantage de le déplacer des brouillons vers des projets est évidemment que tout le monde peut le voir, mais que votre équipe peut également collaborer avec Ils peuvent réellement commencer à travailler sur ce fichier. S'il s'agit d'ébauches, ils ne peuvent pas le voir, le commenter comme Doug l'a fait, mais ils ne peuvent pas y travailler L'une des limites du compte gratuit est que vous ne pouvez avoir qu'un seul projet, et à l'intérieur de ce projet, vous ne pouvez avoir que trois fichiers de conception. La faille du Web est que vous pouvez avoir autant d'équipes que vous le souhaitez Donc je vais dire, d'accord, je suis sur le compte gratuit. J'ai épuisé mon seul projet et mes trois fichiers. Je vais créer une nouvelle équipe. Ensuite, je reçois un autre projet et trois fichiers. Lorsque vous commencez à penser au compte Pro, si vous utilisez beaucoup Figma, disons que je travaille avec un client et que je dois ensuite le partager avec deux équipes distinctes pour déterminer où se trouvent les fichiers et les deux équipes distinctes qui se sont distinctes qui jointes, cela ne fait que s' embrouiller. Faisable. Si vous ne travaillez que sur quelques projets pour plusieurs clients différents , cela fonctionne parfaitement. C'est lorsque vous travaillez pour un client principal et que vous avez de nombreux projets, de nombreux fichiers, que vous devrez peut-être envisager une mise à niveau. Vous pouvez changer d'équipe. Vous pouvez voir que j'ai cette autre équipe ici. Il a été créé par une personne disposant d'un compte gratuit. Vous pouvez voir qu'il est dit que c'est gratuit. Je n'ai pas été créé par moi, j'ai été créé par quelqu'un d'autre. Je voulais juste te montrer à quoi ça ressemble. J'ai un compte payant, mais la personne qui a créé l'équipe n'en est pas le chef, elle la contrôle, et elle n'a droit qu' un seul projet et à trois fichiers ici. Plus utile ? J'espère que c'est le cas. Cela peut être un peu confus. D' accord, qu'est-ce que je fais ici ? Les équipes sont comme le client. Au sein de l'équipe, il y a des projets, différentes choses sur lesquelles vous travaillez. Vous pouvez voir ici certaines des informations sur notre ordinateur portable, certaines des campagnes sur lesquelles nous travaillons, des pages de destination. Ils font tous partie de projets distincts et nous pouvons y déposer autant de fichiers que nous le souhaitons. Vous pouvez voir que nous ne sommes pas une grande entreprise, mais vous pouvez commencer à constater que de nombreux projets sont en cours. Nous avons donc besoin du compte Pro. Voilà. Tu as une équipe. L'équipe a des projets, et à l'intérieur de ces projets se trouvent vos fichiers de conception. Vous avez également ces fichiers de conception qui peuvent être intégrés à des projets, mais ils peuvent également être conservés sous forme de brouillons, mais les brouillons sont un peu limités en termes de ce que vous pouvez faire Principalement autour du partage. C'est bon. J'espère que cela a été utile. Je vous verrai dans la prochaine vidéo. 84. Variante de composant interactif pour la case de coche défilée dans Figma ma: Accrochez-vous à votre chapeau, tout le monde. Nous devons créer une case à cocher. Écoutez, quelqu'un dans notre prototype peut interagir et nous allons faire un survol. Regardez, vous pouvez le survoler et il change de couleur. D'accord, on les appelle des variantes de composants interactifs. C'est vraiment un mauvais nom. Ils ne sont pas si difficiles. Nous avons créé des composants, nous avons créé des variations. Nous allons simplement ajouter un peu d' interactivité entre nos variantes. C'est l'heure de Ha. Allons-y. Très bien, je vais donc commencer par un simple vieux bouton. Ce n'est pas un composant. Cela n'a rien de spécial. Il se trouve que celui-ci est une mise en page automatique parce que je veux le rembourrage, mais c'est tout Vous pouvez commencer avec un nouveau rectangle si vous ne voulez pas gâcher ce sur quoi vous avez travaillé et lui donner une couleur. Faites-le ressembler à un bouton. Pas besoin de texto pour ça. Je vais donc m'en occuper. Tout d'abord, je vais le créer dans un composant, Command Shift, K ou beyond design. Est-ce que cela a fonctionné ? J'ai travaillé. Le raccourci fonctionne même si vous êtes en mode prototype. C'est cool. Sinon, concevez et appuyez sur cette option en haut qui dit de créer un composant. Maintenant, comme nous l'avons fait plus tôt, nous allons créer une variante de ce bouton. Dans ce cas, je vais juste le rendre plus sombre. Je vais sélectionner cette option, je vais passer à ma couleur et je vais remplacer celle-ci par la version plus foncée. Nous l'avons donc déjà fait, non ? Je vais en faire glisser une instance ou je pourrais la récupérer depuis mon panneau Ressources, et simplement la faire glisser à partir de là. Où est-ce que ça s'appelle ? Ça s'appelle. Ce n'est pas sur la page des composants. C'est sur cette nouvelle page Hi Fi de bureau. Voilà, c'est là. Tu peux aussi faire traîner ça. Ça n'a pas d'importance. Maintenant, ce que nous faisions avant, c'est que nous ne pouvions qu' aller voir ce type et lui dire : D' accord, il y a deux variantes, et je peux passer de l'une à l'autre. Je l'ai sélectionnée et je peux faire défiler la page vers le haut et j'ai ces deux variantes mal nommées. Mais maintenant, nous pouvons ajouter l' interaction entre les deux. Nous le faisons ici dans le composant principal. Il y a des différences ici. Je veux juste cliquer dessus. Je vais aller dans ma section consacrée aux prototypes et je vais dire que je veux que vous y alliez. Jusqu'à présent, nous l'avons simplement fait glisser vers d'autres pages pour naviguer Alors que maintenant, ce que nous pouvons faire, c'est le faire glisser entre ces deux variantes, et nous pourrions dire «   survolez, survolez Pendant le vol stationnaire. Nous voulons également passer à cette variante, qui est ma deuxième version mal nommée. Et instantanément, nous ne le sommes pas. Faisons en sorte qu'il se dissolve. Maintenant, donnons-lui un aperçu. Déplacez la barre d'espace. C'est un peu petit, et regardez ça. Nous faisons du survol. Ma souris est vraiment bizarre aujourd'hui. Voilà. Tu as compris. Ça. Cela ajoute un peu d' interactivité aux composants C'est ce qui lui a valu le nom fou interactif, parce que c'est interactif. C'est un composant parce que nous l'avons transformé en composant et nous avons créé des variables à partir de ce composant. Pas des variables, des variantes. Je le dis assez souvent. Ces deux mandats me manquent. Mais si vous faites un peu d'animation entre eux, vous pouvez faire des trucs sympas comme ça. Le truc n'est pas ça, ça doit être ailleurs. Nous avons besoin de ce type. En fait, je veux récupérer tout l'extérieur. Je vais le couper et le mettre sur la bonne page. Je vais passer aux fichiers, aux composants, et je vais construire celui-ci ici. Et vous pensez que nous l'avons fait plus tôt. Pouvons-nous juste arranger celui-ci ? Nous le pouvons totalement. Tant que nous sommes en mode prototype, je peux dire que tout va bien ici. En fait, je voulais juste passer à celle-ci, la version la plus sombre. Au clic. Maintenant, je vais recommencer à survoler tout en survolant, désolée, et je vais dire de changer celui-ci, de le dissoudre, de le faciliter à entrer et je vais dire de changer celui-ci, de le dissoudre, de le faciliter à et à Très bien, prenons-le et mettons-le sur l'une de nos pages. Passons à Nous ne pouvons pas mettre le survol sur un mobile, car nous avons déterminé que vous ne pouvez pas survoler sur un Allons-y ces deux-là. Donnons-lui un aperçu, Shift Spacebar. Tu peux voir. Vous ne pouvez pas vraiment le voir parce qu'il est trop petit, mais il plane. Allons-y. Version plus foncée sur Hover. Très bien, le H est donc passionnant. Faisons quelque chose d'un peu plus banal. Allons faire la nana Mark. Quelqu'un va en construire un très rapidement. Tu peux me regarder le faire en mode rapide. Voilà. C'est juste le crayon et l'ellipse Je vais les sélectionner tous les deux parce que je veux savoir où ils se trouvent dans la page des fonctionnalités. Parfois, il est plus facile de le créer à partir de cette page, mais je vais vivre avec. Ces deux-là sont là. Ce que j'aimerais faire, c'est les transformer en cadre, puis en composant. Je n'ai pas besoin de faire un cadre d'abord. Si j'en fais un composant, il le collera automatiquement dans un cadre, donc c'est un petit raccourci. Ici, je peux le convertir en composant. C'est parce que je suis en mode tirage au sort. Lorsque vous êtes en mode conception, cette option n'est pas disponible et vous devez soit utiliser votre raccourci , soit en haut, une option indique « disparu ». J'utilise le raccourci pour charger, c'est-à-dire la commande d'option K ou Control Alt K. D'accord, vous l'avez compris. Donnons-lui un nom. Appelons ça. Coche. Créons une variante de ce composant. Deux d'entre eux. Celui-ci, en bas, je vais appeler. Donnons-lui de bons noms. Tout d'abord, celui-ci doit être le meilleur. Ce ne sera pas le cas par défaut, mais sur celui-ci, ce sera appelé ici. Éteint. Peu importe que vous nommiez dans les couches ou ici. Celui-ci va être annulé. Ce que je vais faire, c'est attraper cette tique. Je double-clique juste pour y entrer. Je vais aller ici et juste fermer les yeux dessus . Tu pourrais le supprimer. Comme précédemment, nous devons ajouter cette interactivité à l'intérieur de notre composant qui présente une variance J'adore ces termes. Nous allons passer en mode prototype, Shifty Je vais dire que je vais passer à celui-ci en utilisant le bouton « on click », ce qui est vraiment bien maintenant. Nous voulons cliquer dessus et nous voulons vraiment que ce soit l' inverse, n'est-ce pas ? Si je recommençais, je désactiverais le premier. D'accord, changeons-le pour celui-ci. Essayons-le instantanément. Nous allons donc en faire glisser une instance. Je dois cliquer sur l'objet réel et faire glisser une instance ou la faire glisser depuis votre bibliothèque. Donnons-en un aperçu. Shift Spacebar. Maintenant, cliquez, cliquez, cliquez, cliquez, oh. Cela ne s'est passé que dans un sens. Cela a donc fonctionné. Et ce que nous devons faire maintenant, c'est revenir ici , dans mon composant qui présente des variations, nous devons y ajouter de l'interaction, revenir en arrière, et il devrait simplement se souvenir de la dernière chose que vous avez faite. accord ? Maintenant, essayons-le à nouveau et préparons-nous. Cliquez, cliquez, cliquez, cliquez. C'est beaucoup de travail, Dan, pour une coche. C'est ce que nous sommes en train de faire. Et c'est pratique de voir la puissance des deux composants, d'accord ? Parce que je peux réutiliser ce chargement et ce chargement dans mon document. Je peux emprunter celles d'autres personnes, d'accord ? Mais maintenant, j'ai juste cette petite unité qui peut passer de l'une à l'autre, mais qui peut le faire automatiquement, d'accord ? Il y a une interaction avec elle maintenant. Plutôt qu'avant, nous le traînons, et je dirais que, selon le design, je changerais la propriété ici. Et choisissez-le manuellement. Désormais, les personnes qui testent mon site Web ou mon application peuvent réellement interagir avec celui-ci. C'est beaucoup de termes. Il s'agit d'un composant qui possède une variante et nous y avons maintenant ajouté un peu d'interactivité. C'est pourquoi on les appelle des variantes de composants interactifs. Tout ça, c'est tout. Nous avons créé une case à cocher. Je vous verrai dans la prochaine vidéo. 85. Commutateur de micro-interaction dans Figma ma: Bonjour, nous allons faire une micro-interaction. Hors de cet interrupteur à bascule. Tu as déjà fait un interrupteur, mais regarde ça. Quand je clique dessus. Regarde ça passe au vert. Et regardez cette belle interaction. J' adore apprendre ce truc. Nous allons apprendre la micro-interaction. Donc, en gros, une micro-interaction est similaire à ce que nous avons fait dans la dernière vidéo lorsque nous avions une case à cocher, mais une micro-interaction ajoute un peu d'animation pour aider à communiquer ce qui se passe A ajoute un peu de joie à l'opération. C'est ce qu'on appelle une micro-interaction. Faisons en sorte que cela se produise. Nous allons utiliser tous les outils que nous avons déjà appris. C'est vraiment facile à faire. Arrêtez de cliquer dessus. C'est bon. Allez-y. C'est bon. Je vais commencer par cet interrupteur à bascule que nous avons utilisé plus tôt dans l'exercice Drop Shadow Je vais rendre le mien un peu plus petit. C'est juste une ellipse surmontée d'une autre ellipse surmontée d'une ombre. OK ? Revenez à l'exercice Drop Shadow. Si vous ne l'avez pas fait, il n'a pas besoin d'ombre. Je vais changer le mien pour ne pas l'avoir. Je vais me rassasier un peu comme un gris parce que c'est éteint. Ce cercle doit être un peu comme ça. Et comme avant, je vais faire en sorte que cela soit un composant. Allez. Option K, option de contrôle K sur un PC. Il s'agit donc d'un composant. Ce composant nécessite deux variantes. Dans cette variante inférieure, je vais avoir le cercle de ce côté. D'accord, alors nous devons passer au prototype comme avant. J'utilise Shifty, je dois dire que celui-ci se résume à ça Qu'est-ce que ça va faire ? Quand je le touche ? Super, ça va changer. Mais la différence ici est de le définir comme instance ou de le dissoudre, nous allons utiliser Smart Animate. Pendant que nous sommes ici, nous ferions mieux faire revenir celui-ci à cet endroit lorsque vous cliquez dessus. Il devrait utiliser toutes les valeurs par défaut. Essayons-le. N'oubliez pas que vous ne pouvez pas prévisualiser le jeu de composants. Vous devez en extraire une instance, pas la totalité, mais l'une de ces parties. Double-cliquez pour entrer et j'ai simplement maintenu la touche option enfoncée et j'ai fait glisser une autre version vers l'extérieur ou maintenez la touche Alt enfoncée ou vous pouvez la faire glisser Maintenant, j'ai cet interrupteur à bascule assez gros Donnons-lui un aperçu, Shift, la barre d'espace, et ça va commencer sur la bonne page. J'espère que ce sera le cas. C'est le cas. Et prêt. Cliquez. Sympa. Je dois jouer avec l'assouplissement parce que c'est un peu bizarre. Changeons également la couleur, nous sommes là. Nous pouvons garder cela ouvert. Vous restez là-bas, et je dois dire que celui du bas va revenir en mode design. Il va passer à un bouton gooey on. Couleur qui est verte parce que je suis là en ce moment. Excellente. Et comme Smart s'anime, cela devrait fonctionner. Essayons-le. Bascule, bascule Vous pouvez voir à quel point il est utile l'ouvrir tout le temps ou, comme moi, je l'ouvrirais sur cette autre fenêtre de bureau que j'ai ouverte, mais vous ne pouvez pas voir celle-ci. Les blagues de mon père sont répertoriées. D'accord, c'est un bon interrupteur. Passons à l'assouplissement très rapidement parce que c'est un peu bizarre. OK ? Nous allons donc revenir au mode prototype, et je vais cliquer sur celui-ci, et je vais dire « ease out ». Je vais entrer et sortir plus facilement. Permettez-moi de faire les choses un peu plus rapidement et pareil pour les autres. Tu dois appuyer sur les deux fils. OK ? Celui-ci va être facile à entrer et à sortir, et ce sera 0,2 de seconde. Très bien, allons-y maintenant. D'accord. Mieux. Qu'en est-il de la facilité d'entrée et de sortie ? Retour. Faisons-le pour les deux. Maintenant fais-le. Il y a un bouton excité. C'est bon. Cela consiste à utiliser exactement les mêmes exercices que le dernier projet. Je veux juste vous montrer quelques exemples différents, et nous avons ajouté une animation intelligente et un changement de couleur Je l'ai écrit en changeant de couleur. Mais Smart Animate a l'air cool. Je n'arrête pas de cliquer dessus. C'est un petit jouet. C'est bon. C'est ça. Nous avons créé une autre variante de composant interactif, et cette animation pourrait être considérée comme un souvenir d'une micro-interaction, d'une un petit peu plus excitant et un peu plus joyeux qui et un peu plus joyeux aide à communiquer ce que nous faisons. La couleur est bonne. L'équilibre est très clair. Micro-interaction. C'est bon. C'est ça. Je vous verrai dans la prochaine vidéo. 86. Projet de cours 18 - Micro-interaction: Heure du projet de classe. Nous allons créer des micro-interactions ou des variantes de composants interactifs. Les micro-interactions sont plus agréables. les trois que nous avons faits Cochez les trois que nous avons faits en classe. Je veux que vous en fassiez une autorisation de newsletter électronique, cela ne doit pas nécessairement être exactement cela, mais vous pouvez voir ici que je l'ai transformée en à notre liste de diffusion, petit crochet Je veux que vous activiez également le bouton Hover et l'interrupteur à bascule Lorsque vous avez créé vos ensembles de composants, assurez-vous qu'ils ne se trouvent pas simplement sur toutes vos pages, mais qu'ils se trouvent réellement dans votre page de composants et qu'ils soient bien séparés. instance réelle du composant doit se trouver sur leurs pages respectives. Les Google Switch y trouvent quelque chose de créatif. Mais en réalité, ce que je veux faire, c'est le voir prendre une capture d'écran de ce groupe et la télécharger dans la section du projet. Maintenant, si vous savez comment enregistrer votre écran, j'adorerais en voir une vidéo, en utilisant un lien Vmeo ou YouTube. Tu sais comment faire ça ? Ce n'est pas essentiel et partagez ce que vous avez créé sur les réseaux sociaux. J'adore le voir fonctionner, surtout. Très bien, joyeux Micro Interaction Building. 87. Comment modifier la miniature des fichiers Figma: Tout le monde. Simple. Nous allons mettre à jour la miniature de nos fichiers de design car, par défaut, elle sélectionne simplement les premières pages, et parfois vous regardez probablement déjà vos brouillons en vous demandant : « À quoi sert celui-ci ? C'est quoi celui-ci ? Qu'est-ce qui se passe ici ? Nous allons le mettre à jour , en particulier notre projet, afin que cela ressemble à quelque chose de représentatif du projet dans les projets, et qu'il soit incliné, ce qui le rend cool. Je suis tellement pas cool. Allons-y et montrons comment mettre à jour ces vignettes afin de faciliter la recherche de fichiers. Très bien, je fais donc partie de mon projet d'équipe. Je vais aller chez Scott Wallet et vous pouvez voir la miniature, qui n' est pas très représentative Vous pouvez aller dans ce fichier et dire qu'en gros, il vous montre simplement quelles les premières pages, ce qui s'y trouve. Vous pouvez simplement modifier le contenu de cette première page. Ou vous pouvez accéder à l'une de vos pages qui dit desktop i Fi et pour dire page d'accueil, vous pouvez cliquer avec le bouton droit sur le nom et dire définir comme pouce maintenant. C'est plus représentatif, non ? Je rentre chez moi ici. Il ne se met pas à jour. Tu dois fermer Figma, l' ouvrir de nouveau, et maintenant c'est ton pouce C'est une bonne façon de procéder. Une autre solution consiste à s' adresser à beaucoup de monde. S'ils vont ouvrir le document, ils vont créer une nouvelle page, ils l'appelleront couverture, ils la colleront en haut. Il n'y a rien à ce sujet pour le moment. Mais ce que nous pouvons faire, c'est dire : je veux encadrer. Je veux un cadre indiquant si vous allez sur cette liste, il y en a une appelée communauté Figma, et ce fichier de couverture du plug-in Le fichier de couverture est ce que nous voulons. Il s'agit de votre standard de 1920 x 1080 pixels de large, et nous pouvons y coller une image. Je vais chercher quelque chose. Utilisons le mobile, le Hi-Fi mobile, et je vais faire une capture d'écran de tout cela. Regarde. OK, revenez sur ma couverture, trouvez ma capture d'écran. Il est là, déposez-le dans cette image et utilisez une image. Plutôt que de copier et coller des cadres et des éléments provenant d'autres pages, vous pourriez le faire, mais vous vous retrouverez avec des doublons Vous passez également à côté du réel. Tout doit être de son côté. Je ne sais pas pourquoi. Mais je ne connais pas l'industrie du design UX. Lorsque vous exposez quoi que ce soit, il faut le tourner sur le côté, comme un pistolet dans les films , un peu Très bien, je vais utiliser cette couleur de remplissage. Je vais utiliser le même. OK. Oh, ça va être génial. Je vais juste vérifier que c' est défini comme miniature C'est là que vous pouvez ouvrir de nombreux modèles. Et cette première page que vous consultez ne fait rien. Essayez de cliquer sur des éléments, il s'agit souvent d'une simple capture d'écran. Il y a un élément de marketing lorsqu' il s'agit de trouver des modèles. Mais pour vous, vous voulez juste que cela soit utile, vous n'avez pas besoin de l' avoir sur l'angle, mais je ne sais pas, cela ressemble à des règles de design UX. Je dois quitter Figma et revenir tout de suite. Hey, Presto, regarde-nous. Tout est maussade sous l'angle. Définissez un cadre comme miniature pour faciliter les choses ou créez une page de couverture, la page doit être en haut et inclinée . Voilà. OK ? Juste pour éviter la douleur, je vais vous montrer certains de mes brouillons, vous vous Qu'est-ce que c'est que c'est ? Qu'est-ce que c'est ? Celui-ci n'a même pas de page car vous avez peut-être travaillé sur la deuxième page. Celui-ci n'est pas très utile. Celui-ci, c' est quoi au juste ? Celui-ci est là ? Encore une fois, il est difficile de savoir ce que ces choses créent. Pouvez-vous voir ce qu'elles ont fait ? Ouvrons celui-ci, voyons ce qu'ils ont fait. Au fait, je n'en ai aucune idée. Ils ont donc créé un moodboard de première page, c' est-à-dire qu'ils l'ont créé sous forme de texte Ils les ont en fait conçus spécifiquement pour cela. Plutôt qu'une simple capture d'écran. Vous pouvez voir qu'ils feront des efforts pour le concevoir. Si vous regardez un autre exemple, regardez celui-ci, s'il vous plaît, soyez JB Je viens de dire à tout le monde de faire un JP. Oh, il y a une image de couverture. Oh, parfait. Donc, cette couverture, ils ont même utilisé le bon mot, et vous pouvez voir que c'est en fait juste si j'y jette un œil, elle l'est. Si vous cliquez dessus, ce n'est qu'une image. Ils l'ont donc conçu soit en figma, soit dans quelque chose d'autre et l'ont simplement intégré sous forme Sur le dessus. Voilà. Juste un petit moyen sympa à la fin de mettre de l'ordre dans vos fichiers. C'est bon. C'est ça. Comment fabriquer un pouce maintenant. Oh, super vidéo, Dan. C'est bon. Passons à la vidéo suivante. 88. Aperçu rapide des sites Figma Sites: Tout le monde Bienvenue sur l'aperçu très rapide ce que l'on appelle les sites Figma Nous avons conçu notre site. Maintenant, nous voulons réellement le construire. Il y a plusieurs options qui s'offrent à vous. Vous pouvez vous adresser à un développeur, vous pouvez le reconstruire dans quelque chose comme WordPress ou vous pouvez l'appeler Dragon Drop ou Wizzywig Ce que vous voyez, c'est ce que vous obtenez dans un éditeur, lequel vous utilisez une approche plus visuelle plutôt qu'une approche de codage pour la conception Web. Les sites Figma sont nouveaux. C'est un concurrent direct de quelque chose comme Webflow. Je l'ai conçu infigma, maintenant nous devons le construire. Les sites Infigma sont un moyen d'y parvenir. Il s'agit d'un cours à part entière, mais je voulais vous donner un bref aperçu pour vous donner une idée de ce que c'est et pourquoi il pourrait vous convenir. Lancez-lui quelque chose, Dan. Très bien, voici donc le fichier de conception que nous avons créé. J'ai commencé à le reconstruire sur des sites infigma, ce que nous allons faire dans ce tutoriel Et vous pouvez voir ici ordinateur de bureau, tablette, mobile. Je vais le prévisualiser et vous pouvez voir que sur ordinateur, il ressemble à ceci, mais vous pouvez voir quand il tombe en panne sur tablette. OK, je change de carte. Quand je passe au mobile, ça change à nouveau. Tout est très beau et réactif. C'est très cool. C'est ce qu'on appelle les sites Figma. Permettez-moi de vous donner un bref aperçu maintenant. N'oubliez pas, juste un bref aperçu, ne paniquez pas. Ce n'est pas difficile, mais c'est différent. Bien plus qu'un module dans ce cours. Mais je veux quand même vous montrer, allons-y . Très bien, Figma Sites Je vais y aller, vous pouvez soit appuyer le nouveau bouton et accéder au site Figma soit sur la page d'accueil, vous pouvez accéder à la page d'accueil pour créer et choisir un site Quoi qu'il en soit, nous avons un nouveau site. cool, c'est qu'il utilise à peu près les mêmes outils que Figma Il y a le design Figma, le truc que nous apprenons à concevoir des sites Web Ensuite, il y a la partie du bâtiment, qui concerne les sites Figma. Nous allons commencer par un site vierge. Vous pouvez commencer avec un modèle, qui vous offre à la fois une version de bureau et une version mobile. y a deux choses que nous devons faire si nous voulons transférer des choses. Nous pouvons le copier-coller. Je fonctionne totalement. Nous allons commencer par dire, c'est vrai, nous avons construit notre site autour de ce site 14 40. La valeur par défaut ici est 12 80. Ajustons simplement cela. Il y a beaucoup de copier-coller car ce n'est pas aussi simple que de créer un site Web Heureusement, notre mobile est quel est notre mobile ? La taille de notre mobile est mobile. Hi Fi le sera. Nous avons choisi l'une des tailles d'iPhone. C'est ce 393. Assurons-nous simplement que le mobile est le 393. Vous pourriez le faire, nous pourrions également créer une vue de bureau. Désolé, un affichage sur tablette. Ce que nous allons faire, c'est la tête baissée et dire : « Je veux aussi concevoir ma tablette ». Nous devons créer un site Web qui soit beau à la fois sur ordinateur, tablette et mobile. Vous pourriez aussi le faire dans Figma pendant que vous y allez. Nous restons un peu plus serrés en retirant la tablette, mais vous devez en tenir compte Très bien, nous allons avoir besoin d'autres choses. Faisons quelque chose de simple. Dessinons juste quelque chose. Allons le chercher. Nous allons dessiner une boîte à héros FK pour le cadre. Tous ces raccourcis que vous avez appris et que vous avez saisis pendant le cours, vous les avez toujours. Je vais le traîner et le coller sur les côtés comme ça. Je vais lui donner une couleur de fond pour n'importe quoi. Ce qui est cool, c'est que chaque fois que vous concevez quelque chose sur ordinateur, cela vous montre à quoi cela ressemble sur tablette et mobile, malheureusement, cela fonctionne réellement. Vous pouvez voir que celui-ci a une petite lacune ici. C'est parce qu'il y a un petit écart ici. Il n'est pas collé sur le côté. J'ai laissé un petit vide, donc je vais m' assurer qu'il y soit traîné J'espère que de ce côté, je vais dire que vous faites glisser, je veux claquer sur les bords, puis de ce côté. Disons que je veux que ce soit à cette distance des bords. Ce qui, dans ce cas, est 27, juste par hasard. Ce que je peux faire maintenant, c'est que je peux le prévisualiser. Vous pouvez appuyer sur le bouton de prévisualisation, ou je finis par appuyer souvent sur celui-ci. Il va prévisualiser la vue de bureau, la vue tablette et la vue mobile. Va. C'est ce qu'on appelle le Responsive Design, et c'est là que nous passons le plus clair de notre temps lorsque nous créons un site Web. Nous devons le concevoir en figma, faire signer les clients, et ils disent : « Oui, j'adore Tu dois aller le construire pour qu'il soit aussi extensible. Parce que si je regarde ça, je peux le déplacer, donc je peux dire : Eh bien, votre ordinateur portable est de cette taille, le mien est de cette taille. Vous en avez besoin pour répondre aux différentes tailles. Faisons preuve d'un peu de réactivité. Retournez à cet onglet. Vous appuyez sur un petit bouton de retour. À l'intérieur de ce cadre, passons à un peu de texte. J'ai eu toutes sortes de raccourcis là-bas. Qu'est-ce que j'ai dessiné ? Je ne suis pas sûr. J'ai entendu un tas de choses. Ce que nous allons faire, c'est prendre l'outil de saisie, cliquer ici et je vais taper. Je vais juste augmenter la police de caractères. cool, c'est que nous choisissons une police vraiment géante, elle apparaît ici. Pour en revenir à mon outil de déplacement, il apparaît ici et apparaît ici. On ne le voit pas vraiment sur celui-ci. Le panneau Layers ici, j'ai ordinateur de bureau, une tablette et un mobile. Si j'ajoute quelque chose au bureau, cela s'applique à tous. Il est ici sur mon portable. Si je clique dessus, ici, où est-il juste en train de traîner ici ? Ce que je dois faire pour le mobile, c'est que je pourrais décider, en fait, que j'ai besoin que cela se fasse sur deux lignes. Les trois lignes, et je veux que la police soit plus petite , conviennent à mon appareil mobile. On y va. Ce que fait Figma ou font les sites Figma, c'est dire que, d'accord, sur cette page, je vais la déplacer vers le haut sans raison valable Prévisualisons-le. Sur ordinateur, elle est grande et au milieu sur tablette elle se trouve en haut, en bas ici et en bas sur mobile, c'est une police plus petite et elle est divisée en deux lignes. C'est le plaisir de concevoir pour le Web. Vous devez penser à toutes ces tailles différentes puis ignorer les éléments intermédiaires, vous vous demandez : que faites-vous ici, d'accord ? Ce n'est qu'un bref aperçu. Construisons quelque chose, quelque chose. Débarrassons-nous de ce message d'Hera. Si je le supprime de ma page d'accueil ou de mon bureau, il disparaît tous. Ce que je veux faire maintenant, c'est voir comment créer ces cartes à partir de celle-ci. Tout d'abord, nos cartes, nous utiliserons celle de bureau. Nous l'avons construit autour de nos colonnes. cool, c'est que pour le moment, je ne peux pas le copier-coller. Les colonnes se souviennent de la commande G. Mais je connais les bases. Allons ici et disons cheveux de bureau, guide de mise en page S est toujours là ? Génial Apprendre deux outils pour un, ce qui est vraiment cool. Je veux que ce soient des colonnes. J'aimerais qu'ils soient un compteur de 12 membres. Je veux avoir une marge sur les bords de 100 et je pense que l'écart était de 32. Alors maintenant, ça correspond. Sur ceux-ci, ils ne s'appliquent pas. Ils ne fonctionnent pas très bien. Celui-ci, ce que je pourrais faire sur une tablette, pourrait être réduit à six parce que c'est juste plus facile à gérer. marges de 50, et je vais réduire l'écart à 24 sur mobile, je vais descendre à six et je n'aurai aucune marge sur les bords, et l'écart sera de 16. Vous pouvez personnaliser tout cela pour les différents. Ils les appellent points d'arrêt. Cela signifie simplement que lorsque cette taille se réduit à cela, tout ce qui est inférieur à 1 400, cassez et faites cette nouvelle chose, dans notre cas, ce ne sont que les colonnes Allons chercher quelques trucs. C'est là que c'est amusant. Je peux le copier et je peux venir ici et le coller. Ou si vous le collez bon gré mal gré, il se peut que je n'aie rien sélectionné, que je le colle, que j' ai choisi de le mettre en tant que nouvelle page et que vous ne pouvez pas simplement le faire glisser facilement Je vais annuler ça. Je vais aller sur mon bureau, appuyer sur Coller. Vous remarquerez qu'il apparaît sur toutes mes différentes pages. Allons chercher les deux autres, et toi. Copiez sur ce design, assurez-vous sur mon bureau, appuyez sur Coller, et ils devraient apparaître sur chacun d'eux. Ce que nous allons faire, c'est y aller, R, ils sont tous bien alignés. Parfait Très bien, je l'ai donc conçu pour ordinateur de bureau. Ça a l'air génial. Et ce que vous finissez par faire, c' est d'abord le faire fonctionner sur le bureau, puis les autres un peu plus tard. Parce que ce que je veux faire, c'est juste en avoir un aperçu. Allons voir à quoi ça ressemble à la maison. Cela fonctionne en quelque sorte. Ça fait des trucs bizarres avec les trous, tu vois ? Donc, ce que je peux dire, c'est que pour revenir ici, je peux dire que nous y sommes allés. Celui-ci utilise juste la gauche. Ce sera donc à 100 pixels de la gauche, quoi que je fasse. Ce que je pourrais dire, c'est d' aller à gauche et à droite. Maintenant, si nous prévisualisons OK. Tu peux le voir là-bas ? Il est beaucoup plus grand ? Vous voyez qu'il s'étire parce qu'il utilise la gauche et la droite pour ses dimensions plutôt que simplement la gauche ? Ce sont des choses qui sont utiles quand on les apprend par imagination, oui, je comprends Mais lorsqu'il s'agit de la création du site Web, c'est beaucoup plus important. Je vais faire de même ici. Je vais dire que vous allez être à gauche et à droite, et j'espère faire un test. Il y a beaucoup de tests. Vous faites quelque chose, testez, vous le faites, vous le testez, vous ne l'ignorez jamais. Mais sur cette vue de bureau, c'est plutôt bon. Il se trouve à 100 pixels du bord et il est réactif. Tout est mou. Quand ça passe à la tablette, ça passe, Boop ça marche toujours Alors maintenant, nous pouvons revenir à la tablette et corriger celle-ci. Six, passez au bureau, puis passez à la tablette et dites D'accord, je veux que tu sois là Je veux que tu me caches. Tu vois, j'ai besoin qu'ils soient plus petits. Que nous les ayons rendus réactifs, souvenez-vous que tout à l'heure, vous êtes du genre, nous l'avons fait en bas à gauche et vous êtes du genre, nous l'avons rendu réactif. Par exemple, pourquoi est-ce qu'on se donne la peine de faire ça ? C'est parce que maintenant nous l'avons appris. Ce petit objet en bas est coincé en bas. N'oubliez pas que nous avons appris le bas et que nous l'avons appris à rester sur la droite. C'est pour que nous puissions le faire plus tard, nous pouvons y aller, c'est parfait. Facilement redimensionné. a du sens lorsque nous faisons Figma, est encore plus logique lorsque vous concevez le site Web ou que vous le créez drôle, c'est qu'il y en a un, deux, et le troisième est joué ? Comme sur mobile, vous devrez peut-être passer à l'affichage de votre tablette. J'ai des cartes mal nommées. Fermons tout ça. J'en ai 18, que je peux voir, 19, que je peux voir et 20. D'une certaine manière, c'est là-bas. Il s'agit d'une version bêta, il y aura donc des choses qui s' amélioreront avec le temps, qui ne vous arriveront peut-être pas. Maintenant, qu'est-ce que je vais faire ici ? C'est le casse-tête, du genre : « Oh, ici, non genre : « Oh, ici, Ce que vous pouvez faire, c'est dire sur tablette je vais passer à la comparution et je vais dire que vous vous en allez. Tu es là, toujours là, on ne te voit tout simplement pas. Sur mobile, celui-ci ici, je pourrais décider qu'au lieu que celui-ci soit le premier, je vais le réorganiser Je dois dire que tu es le premier, que tu vas aller jusqu'au bout. Maintenant, dans Figmacytes, si vous le faites glisser vers le bord et qu'il s'enclenche, il le fera basculer vers la gauche et vers la droite Vous verrez celui-ci réglé sur la droite. Mais si je dis que vous êtes ici et que vous êtes là, vous voyez que c'est le cas. Vous pouvez évidemment le modifier manuellement, mais il le fera automatiquement. Sur mon appareil mobile, je souhaite allonger ce processus. D'accord, plus longtemps, plus longtemps. Vous verrez que celui-ci se fixe en bas parce qu'il pense que c'est ce que vous voulez. Non, je veux que ce soit en haut, afin qu'il ne soit pas redimensionné et déplacé vers le bas Vous utilisez le haut comme vous le souhaitez comme point d'ancrage et je pourrais faire sorte de mûrir un peu plus longtemps. En fait, les colonnes ici ne sont pas très utiles. Sur mobile, je vais aller voir le globe oculaire, les désactiver, et je vais retrouver la carte manquante Où est-il allé ? Il était dans le cadre 20. Il est là-bas d'une manière ou d'une autre. Nous avons donc même joué avec la commande, d'accord ? Et ce qui est beau c'est qu'il utilise les mêmes outils. Comme Webflow le fait, Framer le fait. Il existe de nombreux autres outils comme les sites Figma C'est comme une copie directe de ceux-ci, mais il utilise le même langage et la même terminologie. Vous pouvez copier et coller depuis Figma. Et lorsque vous concevez, une fois que vous avez créé quelques sites Web, lorsque vous créez ce truc, vous pourriez tout aussi bien faire l' effort de le corriger au bas et à droite, car vous savez que cela vous fera gagner du temps plus tard lors de la création du site. Très bien, allons-y et prévisualisons-le. Prévisualisez tout le temps. Et si vous ne le prévisualisez pas pendant un moment et que vous le cassez, vous ne savez pas ce qui a cassé. OK, donc tu vas bien. Oh, tu travailles bien, et tu travailles bien aussi. D'accord ? Ce qui est cool, c'est que tu peux voir une tablette ? Je me suis débarrassé de celui-ci, je l'ai éteint, mais il revient sur mobile, et j'en ai changé l'ordre. Génial Il y a quelque chose d'étrange dans les sites où ils ont cette barre, barre de diapositive que je n' aime pas, qui contient des couvertures. Nous publierons le site Web actuel avec cette petite partie ici, mais ces petits diapositives nous gênent Espérons que ce soit quelque chose qui disparaîtra comme ça. Jetez un coup d'œil entre les deux parce que ça a l'air bien ici. Que se passe-t-il quand je fais à nouveau ce qu'il a fait sur ordinateur de bureau L'ordinateur de bureau fonctionne, mais pas sur tablette. Je dois accéder à Tablet. Mauvais fichier. Revenez à ça. Je veux accéder à Tablet. Où êtes-vous ? En gros, ce que nous avons fait pour la page d'accueil, nous avons dit : «  Faisons en sorte que vous ne soyez pas à gauche, mais à gauche et à droite, à gauche et à droite ». Prévisualisez-le à nouveau. J'espère que maintenant, vous devez parfois atteindre 21 points, un autre point d'arrêt D'accord ? Oh, c'est beaucoup mieux. Il y a ce genre de choses, pouvez-vous voir maintenant comment nous avons conçu pour un téléphone aussi gros, mais aussi gros, mais aussi gros ? Et une tablette qui se trouve être aussi grande, mais un peu plus grande, je sais que c'est une tablette maintenant. C'est un téléphone géant et celui-ci ici, une tablette. Mais quand ça grossit, c'est plus gros, plus gros, plus gros. Finalement, en ce qui concerne la taille du bureau, il est écrit «   bon, ordinateur de bureau », vous pouvez avoir autant de points de rupture que vous le souhaitez. Vous pouvez opter pour l'habitude « Je reviens là-bas ». Vous pourriez avoir un très gros ordinateur de bureau de plus de 14 40. Qu'est-ce que tu en fais ? Tu en as peut-être un quatrième. Maintenant, j'ai choisi quelque chose qui avait du sens pour vous maintenant, à votre rythme. Ce doit être un cours à part entière sur les sites Figma car la conception Web est plus complexe que je ne peux faire, il suffit de faire un petit module ici Si vous le souhaitez, je vais laisser un lien dans les fichiers d'exercices pour un cours sur les sites Figma Je n'en ai pas encore fait, mais si cela vous intéresse, vous pouvez vous préinscrire et si j'ai suffisamment d'intérêt, je le ferai. Pour le moment, cependant, quelque chose comme Webflow fonctionnera. C'est un cours que j'ai suivi. Vous pouvez aller voir où vous trouvé. Je ne voulais pas vous laisser au sec pendant ce cours, genre, que dois-je faire ensuite ? Souvent, c'est à un développeur de créer votre site pour vous et il n'utilisera pas les sites Figma Ils coderont le site, utiliseront un autre framework, peut-être une prière par mots, autre chose et ils utiliseront simplement vos designs comme source d'inspiration, mais ils en extrairont les images , le texte, les tailles, tout cela peut ressortir. Mais maintenant, avec quelque chose comme les sites Figma ou le flux Web, vous pouvez le créer vous-même . Vous pouvez publier, publions-le. Notre site a été publié, d'accord ? Il ne le publie pas encore sur un domaine approprié. Tu peux le mettre dedans. OK, je vais passer à celui-ci ici, voir la publication. Allons y jeter un œil. Je suis en train d'ouvrir sur mon navigateur. C'est en fait sur Internet. Je pourrais l'envoyer à quelqu'un maintenant, d'accord ? Et ça ne fait pas grand-chose. Regardez, sauf qu'il y a points d'arrêt de balayage que nous venons de déterminer. Faisons quelques dernières petites choses pour vous donner une autre idée de la façon dont cela fonctionne. Nous avons conçu uniquement la page d'accueil. Ce que nous pouvons faire, c'est comme avant, nous pouvons dupliquer ce truc. Celle-ci s' appellera Ma page de fonctionnalités. Sur cette page de fonctionnalités, je vais me débarrasser de ces cases sur ma page de fonctionnalités, je vais la rendre vraiment grande, je vais y mettre du texte. Je vais juste l'ajuster en fonction des différents points d'arrêt Je fais de très mauvaises choses. Faisons-le. Toutes les fonctionnalités que nous avons apprises sur les interactions me permettent de dire : passons à la commande E, qui est géniale. Même raccourci que le design de Figal. Je peux dire que lorsque quelqu'un clique dessus, cela passe à la page des fonctionnalités. Maintenant, lorsque je prévisualise ceci, que je fais mon site Web, que je clique sur mes boutons, je les transforme en bouton, je clique dessus et je passe à ma page de fonctionnalités, que j'ai conçue sur la base de mon fichier de conception FIGMA Vous pouvez également faire toutes les autres choses, des activités régulières sur le site Web. Si je vais dans les paramètres. Je peux dire que voici le titre de mon site, je peux ajouter tous mes éléments de référencement. Je peux ajouter Google Analytics. Il y a plein de choses que tu peux faire. Vous pouvez connecter un domaine réel. Il peut donc s'agir d'apporter votre laptop.com, concevoir le site pour le client, tester parce que c'est rapide Au début, nous avons discuté des raisons pour lesquelles nous nous donnions la peine d'utiliser Figma, pas simplement de créer un site Web, car il est très rapide de créer un concept, de créer un wireframe, de le tester, de créer un design, faire approuver par toutes les parties prenantes, puis de passer au développement Parce qu'alors, lorsque vous construisez, vous devez y passer des heures ou pas. Tu dois y passer beaucoup de temps. Partons d'ici. La décision à ce sujet doit être prise à gauche et à droite. Est-ce qu'il entre dans une boîte ? Comment s'écoule-t-il ? Alors que dans votre fichier de design Figma, vous pouvez simplement faire glisser un bouton pour indiquer que vous y êtes D'accord. Mais lorsque vous concevez un site, ce qui se passe dans toutes les tailles devez réfléchir à ce qui se passe dans toutes les tailles. A. Est-ce que celui qui est attaché en haut est attaché à gauche ? Quelle est sa taille sur mobile ? Comment s'adapte-t-il aux tailles intermédiaires ? Cela prend beaucoup plus de temps, mais lorsque vous avez approuvé le fichier Figma, le fichier de conception, vous pouvez simplement passer en mode Build J'aime beaucoup le mode build. Tout va bien Tu commences à le faire. C'est comme résoudre un casse-tête. C'est bon. Il s'agit de la navigation rapide des sites. Vous ne serez pas doué pour sites après avoir regardé ce tutoriel, mais je voulais vous donner une idée de ce que sont les sites et aussi des raisons pour lesquelles nous nous peine de faire toutes les choses dans Figma, en particulier celui-ci ici, peut-être que nous l'avons fait C'est cool Nous avons prêté la fonctionnalité, mais maintenant nous savons pourquoi nous utilisons ces fonctionnalités, c'est que nous devons les rendre réactives à un moment ou à un autre, même dans nos conceptions. C'est pratique de pouvoir le copier-coller, coller sur un mobile, le redimensionner, mais cela devient encore plus spécial quand vous avez fait ce travail, qui pourrait être publié sur notre site Web Très bien, mes amis, c'est celui que l'on trouve sur les sites Figma, tu te souviens ? Utilisez le lien dans les fichiers de classe. Je vais le mettre en haut maintenant. S'il y a un cours, ce lien redirigera directement vers le cours sur les sites Figma proprement dit, je vais juste évaluer vos centres d'intérêt. C'est bon. Sites Figma, c'est fait. Il y a beaucoup de gaufres. Je suis désolée Passons à quelques vidéos plus succinctes. Je te verrai dans le prochain. 89. Comment exporter les images dans Figma ma: Premièrement, nous allons examiner les paramètres d'exportation d'images depuis Figma Vous devez obtenir une image de Figma, l'envoyer à quelqu'un Nous allons passer en revue les différents formats. OK ? Nous parlerons des différentes tailles et du moment où les utiliser. Très bien, allons-y et exportons des images depuis Figma. D'accord, parlons d'un peu d' une exportation d'images à usage général Parlons donc de certains formats de fichiers et faisons-le. Je souhaite donc exporter une image. Commençons par cette image ici. OK ? Je souhaite l' exporter. Vous n'utilisez pas l' exportation de fichiers comme c'est le cas pour de nombreux programmes. Il y a en fait cette unité ici que je veux sélectionner, ajouter une exportation. OK ? Quel type d'exportation ? Oh, a ajouté Effex. Exportation Reden Il vous donnera ensuite quelques options sur le type de paramètres d'exportation que vous souhaitez utiliser. Voici les principaux groupes alimentaires, PNG, JPEG, Fici PDF En ce qui concerne les images, il est généralement plus utile d' utiliser le format JPG, plus le format JPIG Idéal pour les images, permet de réduire la taille du fichier. L'inconvénient est qu'il n'est pas transparent, mais qu'il permet de réduire la taille des fichiers. Vous verrez beaucoup de JPigs en ligne et cela fait partie de la conception de sites Web Appuyez sur Exporter et il le placera quelque part. Je vais mettre le mien sur mon bureau dans un dossier d'images que je viens de créer. Très bien, passons aux autres formats. Quand est-ce que le PNG serait une bonne idée ? C'est lorsque vous avez quelque chose qui a besoin de transparence, regardez que quelque chose est masqué Disons celui-ci ici. Donc, si je l'exporte au format JPEG, vous pouvez également en ajouter un autre pour dire que je veux aussi un PNG au format X. Nous parlerons des X dans une seconde, mais ils sont exactement de la taille que j'ai créée. Dans ce cas, celui-ci mesure 314 pixels carrés. Si j'exporte, vous remarquerez qu'il choisit le nom du groupe ou du cadre que vous avez sélectionné. Tu vois que celui-ci n'est qu'une image ? Je vais appeler cela un portefeuille IMG Star. Ainsi, si vous le nommez dans le panneau des couches au fur et à mesure, cela vous facilitera la tâche lors de l'exportation. Je vais juste en choisir un, y jeter un œil. OK, tu vas voir que j'ai deux images. L'un est un JPEG. Le problème avec celui-ci, c'est qu'un JPEG n'est pas transparent. Vous ne pouvez pas voir à travers, alors que le PNG est bien transparent. Vous pouvez voir à travers l'arrière-plan. Donc, si j'en ai besoin pour accéder à un site Web et que vous avez besoin de voir la couleur d'arrière-plan, vous avez besoin d'un PNG, même s'il s'agit d'une image, mais parce que vous avez besoin de transparence, nous utilisons du PNG. L'autre est le SVG. Les SVG sont bons pour tout ce qui est vectoriel. Il est l'abréviation de scalable vector graphic. Ce qu'ils veulent dire par là, c'est qu' il faut trouver quelque chose d'évolutif. Passons à notre page de composants. Vous voulez trouver un logo qui s' y trouve ? Nous savons que si j'utilise mon outil K et redimensionne, ce truc évoluera à jamais. Il est composé de graphiques vectoriels, petits points d'ancrage, etc. Il est donc très pratique d'être un SVG car il peut être redimensionné sur de nombreux navigateurs différents N'oubliez pas les sites Figma, nous pouvons faire évoluer les choses à la hausse et à la baisse. C'est pourquoi c'est une bonne chose , la taille du fichier est petite et transparente. Dans ce cas, nous dirions que je vais revenir à mon outil de déménagement. Je vais dire qu'il n'y a aucun effet. Je vais trouver l'exportation et je vais dire que êtes le meilleur en tant que SVG Il est exporté, et c'est pourquoi le X disparaît. Vous n'en avez pas besoin dans une autre taille car il peut être redimensionné à l'infini Je vais l'enregistrer, l'exporter, et j'ai ce SVG De nombreux logos. Le mien est blanc sur fond blanc. Bon travail. Passons en mode lumière. Il est de nouveau exporté. Nous allons remplacer celui-ci. Maintenant, le SVG permet parfois de prévisualiser un mot comme ici, mais celui-ci est désormais évolutif Super petit, 15 kilo-octets. Disons que je voulais un très gros fichier PNG parce que j'ai besoin d'être gros parce qu'il doit être dimensionné à la hausse ou à la baisse, alors que mon SVG le fait sans demander Je dis, je veux un PNG. Je vais exporter celui-ci et comparer les tailles. Ici. J'ai deux fichiers PNG , soit 12 pixels, plus petits que mon SVG, mais ils sont fixes à cette taille Je ne peux pas le faire plus grand que ça. Sinon, la qualité se détériorera. Mettons-les dans Figma. Voici mes deux fichiers. Vous pouvez déjà voir le PNG. Il y a de petits pixels. C'est un format basé sur les pixels, alors que le SVG que je viens peut être redimensionné à l'infini C'est pourquoi je l'utilise pour de nombreuses icônes et logos, ce genre de choses. Je vais annuler avant d'écrire tous mes dessins Vous pouvez également utiliser un PDF C'est très bien Un PDF peut être utile dans ce cas. Passons à mes pages, et je veux tout exporter. Je vais exporter l'intégralité de ce cadre. Je vais dire, sortez de mon outil de mise à l'échelle, revenez à mon outil MO et je vais dire : exportons celui-ci non pas sous forme de grande image, mais sous forme de PDF. Ils sont faciles, ils sont partageables. Les PDF sont excellents car ils incluent à la fois des images en pixels, mais également des images vectorielles évolutives C'est un mélange de JPEG et de SVG. C'est génial. Exportez ce type. Il va prendre le nom du cadre, jetons-y un petit coup d'œil, et nous avons un PDF que nous pouvons partager avec les gens. Génial Oh. Pourquoi est-ce que je veux un menu ? Voyons pourquoi je n'ai pas de menu. C'est ici, oh, ce n'est pas ce que j'ai besoin de porter. Je peux le faire entrer ? Ce n'est pas coincé là. Je suis entrée, j'ai fait des bêtises, retrouvée sur Nous allons maintenant exporter. Parlons des X. Disons que j' ai cette image ici. Je souhaite l'exporter. Je veux le faire au format JPEG à un X. Cela signifie simplement que si le diamètre est supérieur à 620, il va commencer à être pixelisé Ce que vous pourriez faire, c'est que vous pourriez décider que je vais exporter deux fois la taille dont j'ai besoin, donc le produit sortira chez Come on Maths 12 40. Je l'ai fait. R, vous pouvez en fait en exporter deux versions, l'une au format JPEG d'un X et l'autre à deux X. Vous devez demander à votre développeur ce qu'il souhaite. Veulent-ils deux versions ? Veulent-ils un petit et un grand ? Et ce qu'ils vont faire, c'est encoder. Lorsque cette image est affichée sur un écran de faible qualité, elle charge la petite taille. Je charge bien et rapidement car ne sert à rien d'avoir cette version Big Mama Jammer, qui fait deux fois plus de taille sur un très petit écran Alors que sur un grand écran arrière haut, il le remplacera par ça. Regardons un peu comment il l'exporte. Remplacez-le. Le mien s'appelle Allons y jeter un œil. J' ai ces deux là. L'un est le portefeuille et celui-ci est le plus petit. C'est la taille que j'avais dans Figma. Il s'agit de l'exportation du second. Vous devez vous assurer que votre image d'origine est haute qualité pour qu'elle puisse être exportée deux fois plus grande. Parlez au développeur, voyez quelle taille il souhaite. Il se peut que vous exportiez simplement deux fois plus de tailles. Parce que souvenez-vous quand nous avons regardé les sites et aussi lorsque nous faisions des sites Figma ou celui-ci. En fait, c'est lequel ? Celui-ci, ici. À cause de cela, voyez-vous, il apparaîtra dans cette taille sur un écran, mais dans cette taille sur un autre ou dans cette taille sur un autre. Vous voyez que c'est beaucoup ? C'est pourquoi nous exportons souvent deux fois plus de taille lorsque nous exportons des images pour notre site Web. Parfois, cependant, vous avez besoin de quelque chose à exporter à une taille spécifique. Supposons que vous l'ayez et qu'il doive être sorti à une taille spécifique, vous pouvez vous en débarrasser et simplement dire, regardez ce menu déroulant ici, il y a de la largeur en bas ici. C' est juste un exemple. Si je clique dessus, 512 W signifie simplement la largeur. Je peux dire que je veux que celui-ci fasse 100 pixels large parce que j'en ai besoin pour mon site Web. Je vais lui donner un autre nom. Appelons celui-ci. 100 pixels. Je suppose juste des pixels. Quand tu dis W, frappons. Allons y jeter un petit coup d'œil. Nous avons notre portefeuille très petit. Voilà. C'est bon. Supposons que vous apportiez des modifications, vous deviez tout exporter à nouveau. Vous vous demandez si je dois cliquer sur chacune d'elles ? Vous ne pouvez pas simplement aller jusqu'au F ici, aller dans Fichier et aller dans Exporter Cela se souviendra de tout ce que vous avez ajouté à la petite option d'exportation 2. Vous pouvez voir que voici mes quatre choses, vous pourriez décider que je n'ai pas besoin de vous et de vous. J'ai juste besoin de ces deux mises à jour. J'exporterai à nouveau toutes ces images, au même endroit. Je vais les annuler. Tout ce dont vous avez besoin pour être exporté, saisissez-le et dites en bas ici, cliquez sur Exporter, choisissez ce que vous voulez qu'il soit. Dans ce cas, je veux que ce soit au format JPEG. Je n'ai pas vraiment besoin d'exporter maintenant, je peux simplement accéder à mes paramètres d'exportation généraux et cela l'inclura dans cette liste. Allons-y. Voici leur page d'accueil. Boum. Et c'est terminé. Très bien, voici un bref aperçu de la façon d' extraire des images de Figma Juste une sorte de format de fichier image à usage général. Nous en parlerons un peu plus dans les prochaines vidéos. Très bien, allons-y. C'est bon, je suis de retour. J'ai dit de participer. Je voulais dire que je te verrai dans la prochaine vidéo. Le parcours a été long. Nous le savons tous les deux. Oh. Très bien, je vous verrai dans la prochaine vidéo. 90. Comment partager votre document avec des clients et des parties prenantes: Bonjour. Dans cette vidéo, nous allons exporter nos fichiers Figma prêts pour nos clients Nos clients, peut-être parties prenantes, et non d'autres designers, développeurs, en particulier des personnes qui ne sont pas vraiment des utilisateurs de Figma ou des concepteurs d'expérience utilisateur Permettez-moi donc de vous montrer les différentes options qui s'offrent à eux. Très bien, nous avons donc envisagé plus tôt d'aller partager et nous pouvons copier le lien ou leur envoyer un e-mail Le seul problème, c'est qu'ils se retrouvent dans ce genre de monde de mutilations génitales féminines, ce qui ne fera que leur causer des problèmes à certains clients ne fera que leur causer des problèmes à OK ? De plus, c'est ce qu'on appelle vos déchets et vous devez les ranger, comme nous l'avons déjà vu plus tôt Vous pouvez le parcourir, sélectionner ces gars et dire : «   Très bien, je veux que vous exportiez format PDF ». C'est une autre façon de procéder. Il y a une option ici qui dit : Très bien, sous ce FK ici, vous pouvez dire, j' aimerais que vous exportiez des cadres au format PDF. Cela ne fonctionne pas très bien parce que vous vous retrouvez avec cela, où il exploite chaque cadre de mon document, quel que soit ce que j'ai choisi. J'ai exporté tout cela. C'est un cadre, c' est un cadre, donc il les a tous exportés. Vous pouvez ensuite les ranger en utilisant, je ne sais pas, Acrobat Reader ou tout autre outil que vous utilisez pour le PDF, mais ce n'est pas très pratique La capture d'écran est évidemment pratique, mais il existe un autre outil ici. Nous examinons donc l'outil Slice. Je peux faire glisser une boîte autour de ce groupe ici, disant que je veux que ce bit soit exporté. Je vais déménager. OK, tout ce qui s' y trouve. Mets-le bien en ordre. L'option Slice ici. Cette petite ligne pointillée se retrouve ici dans le panneau des calques Si je fais défiler l'écran vers le haut, il y a ce qu' on appelle Slice One. Je vais l'appeler. Le flux de tâches, et qu'est-ce que c'est ? Ecom. Ce qui est cool c'est que cette petite ligne autour l'extérieur n' exportera que tout ce qui se trouve à l'intérieur de cette boîte. Ce n'est pas un objet réel. C'est comme une fenêtre d'exportation. Si je vais sur Exporter maintenant, si je l'ai sélectionné, je peux cliquer dessus ici sur mon panneau LAS. Je peux dire que je veux que vous exportiez sous le nom de Ch Pi. Je vais l'exporter. Voici mon flux de tâches, et tout ce qu'il contient est exporté. Il a supprimé les noms sur le dessus. C'est juste un peu plus ordonné. Si vous êtes du genre, pourquoi ne l'avez-vous pas montré plus tôt, surtout si vous êtes un utilisateur de Windows et que la capture d'écran est un peu plus difficile. Je suis désolée. Principalement parce que c' est juste parce qu'il y a cette boîte ici, ça gêne. Maintenant que vous êtes un très bon utilisateur de Figma, vous pouvez commencer à les utiliser Vous pourrez les ajuster par la suite. Vous pouvez les supprimer. Cliquez dessus, supprimez-les. Vous pouvez dessiner des boîtes autour de nombreuses choses différentes et simplement exporter tout ce qu'elles contiennent. C'est l'outil de découpe ici. Je vais revenir sur une autre façon intéressante de partager vos fichiers avec un client qui ressemble davantage à une présentation je vais prendre cette page d'accueil ici et la copier. Je vais aller chez Plus ou tu peux rentrer chez toi. Tu cherches les diapositives. Comme les sites et les autres. Ils sont tous différents de l'outil que nous avons appris, design Figma, utilisé par les concepteurs d'expérience utilisateur Vous pouvez également utiliser Figma pour les diapositives, comme une présentation PowerPoint Je vais commencer par une simple diapositive, et je vais commencer par un modèle. Il va en choisir un au hasard. Regardons celui-ci. Par quoi voulons-nous commencer ? Ajoutons toutes les diapositives. Ce qui est cool, c'est qu'il s'agit d'un logiciel différent, mais maintenant que vous avez de bonnes compétences en design Figma, vous pourrez utiliser les diapositives Figma très facilement Allons-y et attrapons. Je viens de le copier membre. Je peux coller mon dessin, je peux utiliser mon outil de mise à l'échelle et je peux l'ajouter à une présentation destinée à mon client. Je pourrais en décider et commencer à utiliser ce modèle. cool avec ces modèles c'est que si je clique en arrière-plan, je peux commencer à jouer avec le style du modèle. Ils ont toute cette hiérarchie. Il se peut que je clique sur « off ». Il y a ce bouton de mixage. modèle de remix, il suffit de cliquer dessus et de trouver celui qui vous plaît Rien de tout cela ne me plaît. Continuez à cliquer pour toujours. Oh, j'aime bien celui-ci. Peux-tu y retourner, Undo ? Tu peux. Vous pouvez passer en revue et dire, en fait, que je veux que tout mon What is this one le souligne. C'est mon H deux, donc je vais cliquer sur le bouton en arrière-plan. Je vais dire que les H deux maintenant ne sont pas des soucoupes. Ce sera du riz épicé. Je vais passer en revue l'ensemble de votre document et tout sera mis à jour. Ils ont créé des styles. Tu peux aller assez loin, assez vite. Je ne vais pas passer par un tutoriel complet sur les diapositives Figma, mais c'est un excellent moyen de devenir professionnel très rapidement Sans quitter Figma, vous pouvez copier et coller des éléments dans votre fichier de conception sans avoir à utiliser PowerPoint. Je déteste PowerPoint. Je ne déteste pas PowerPoint. PowerPoint me déteste. Voici peut-être une meilleure façon de commencer à partager. Vous pouvez partager cette présentation plutôt que le fichier Figma seul. Vous pouvez simplement partager le lien vers votre fichier de design Figma, ce qui peut être source de confusion pour certains Vous pouvez utiliser simplement le vieux PDF d'exportation, ou vous pouvez utiliser cette tranche pour dessiner un cadre autour d'elles, ou vous pouvez examiner les diapositives Figma et opter pour une présentation plus Tout cela est partagé pour les clients, pas pour les autres designers, ni pour les développeurs. ce que nous ferons ensuite. Je vous verrai dans la prochaine vidéo. 91. Consulter votre développeur très en amont dans le processus de conception Figma: Bonjour, tout le monde. J'ai pensé sauter hors de l'écran. Nous allons le faire en direct. Collaborez avec votre développeur. Il n'y a de méthode officielle de travail avec un développeur, sorte de processus de transfert officiel, d' En gros, ce qui finit par se passer, c'est que cela dépendra du développeur et de votre relation avec lui. Par exemple, l'objectif et là où tout est incroyable c'est de faire participer le développeur plus tôt dans le processus, d'accord ? Surprendre quelqu'un avec un design fini n'est pas amusant. Le développeur pensera que mot ressentiment est probablement trop fort, mais qu'il n'a pas eu son mot à dire. Donc, d'accord, ce designer m'a donné ce truc à construire, et je vais le construire parce qu'ils m'ont dit que je devais le faire. exemple, ce que vous voulez, c'est ils fassent partie des wireframes pour vous donner des conseils, qu'ils fassent partie des premières images que vous faites pour vous donner des conseils, afin qu'ils aient non seulement l'adhésion, mais qu'ils aient l'impression de faire partie du processus et que, surtout lorsque vous êtes nouveau, obtenir des commentaires plus tôt signifie simplement que vous n'allez pas vous transformer en catastrophe J'ai souvent eu l'impression que le langage peut être très simple. Il n'est pas nécessaire que ce soient des réunions officielles. Ça peut être comme : « Hé, Sandy, pourrais-tu que je puisse te montrer rapidement les cadres de ma femme ? C'est dans cette direction que je pense aller avec le projet ? Je veux juste avoir votre avis. Tu sais, pourrais-tu me donner 5 minutes, d'accord ? Ou, hé, ce sont les premières images. Qu'est-ce que tu en penses ? Parce qu'il y a tellement d'emplois où j' ai supposé que quelque chose était trop difficile à faire, alors je ne l'ai pas fait , pour découvrir lors de cette première conversation qu'ils me disent : « Oh, j'allais le faire, mais je pense que nous allons passer à la phase deux, parce que cela semble être un travail difficile ». Qu'est-ce que tu en penses ? Et ils disent : « Non, nous avons un autre truc très similaire. Nous avons déjà construit cela, vous savez, ce type de cadre qui est déjà conçu pour cette autre chose. Nous l'avons juste mis là-dedans, et je vais le changer. Et vous dites que je ne suis ni ingénieur ni développeur, donc il y a plein de choses que je trouve vraiment difficiles, mais il s'avère que ce n'est pas le cas et c'est le contraire. D'accord ? Il y a des choses que je dessine et c'est un peu la pièce maîtresse de ce que je veux. Par exemple, c'est peut-être comme une valeur. Je lui dis : « Oh, soyons géniaux ». Ensuite, vous parlez au développeur dès le début, et il vous dit que cela va doubler le temps du projet ou ajouter toute cette complexité supplémentaire. En avez-vous vraiment besoin ? Et quand il est tôt, vous dites : « Non, vous êtes juste comme si nous le ferions dans la phase deux, phase deux est une bonne façon de dire, nous le ferons plus tard, mais probablement jamais, vous savez, pour le remanier afin que nous puissions mener à bien ce projet Et tout cela se passe dans ce premier type de dialogue. Donc oui, il existe un processus de transfert lorsque tout est approuvé, mais cela ne devrait pas être la première fois votre développeur devrait voir votre projet. Travaillez donc ouvertement, demandez-leur de commenter, impliquez-les et découvrez pourquoi et comment ils aiment travailler. Vous savez, quel genre de choses ils veulent voir au moment du transfert pour ne pas vous plaire, j'espère qu'ils aimeront et qu'ils envoient un e-mail avec tous vos liens et images, et ils voudront tous quelque Ils voudront probablement voir des maquettes, des prototypes et un tas d'images Ils utiliseront vos maquettes pour déterminer l'espacement, le rembourrage et ce genre de choses, s'il s'agit d' un nouveau travail, d' Mais ils n'utiliseront pas tes rectangles, d'accord ? Ils vont juste regarder l'espacement, et, euh, oui, tout reconstruire, principalement en code, d' accord, sauf pour des choses comme les images Donc oui, il y a des cohérences entre les transferts Nous en ferons un peu plus dans une seconde, mais parlez-en à votre développeur savoir qui il est. Soyez proactif. N'attendez pas qu' département d'ingénierie magique se charge de le faire. Demandez. Vous avez peut-être un chef de produit ou un chef de produit vous travaillez peut-être seul et allez l' externaliser, ou peut-être que le client le fera pour vous Découvrez de qui il s' agit. Parlez-leur. Faites du développeur votre ami. Si vous êtes le développeur, cela facilite les choses. Mais c'est vrai, c'est ainsi que vous devez travailler avec votre développeur. Allons-y et je vais vous montrer d'autres choses tactiles que nous pouvons faire dans Figma 92. Mode de développement et transfert à un développeur: Dans cette vidéo, nous allons examiner ce que l' on appelle le mode Dev dans Figma Il s'adresse aux développeurs. En tant que concepteurs, nous pouvons annoter des éléments prêts à être examinés par le développeur, et ce qu'il peut voir, c'est des choses comme, d'accord, c'est ma police. s'agit d'un code CSS qui le fait fonctionner afin qu'ils puissent le rendre exactement comme vous l'avez conçu. Disons ici pour ce logo. Cela leur permet de le parcourir et de dire « OK, logo » ici. Ils peuvent télécharger leur propre SVG et leur donner le pouvoir de télécharger leurs propres fichiers plutôt que de tout exporter prêt Très bien, passons en mode développement. C'est bon. Tout d'abord, le mode Dev est une fonctionnalité payante de Figma pour y accéder Tu as une option ici. Vous pouvez simplement y passer. Nous avons fait du design, domaine dans lequel nous avons passé la majeure partie de ce cours. Nous avons fait un petit dessin qui change les outils, et il en va de même pour le mode Dev. Changez les outils et vous obtenez un nouvel ensemble d' outils ici. Ce que vous pouvez faire en mode design, c'est vous qui décidez . D'accord, passons au Hi Fi mobile Supposons que la page d'accueil soit terminée, tout soit signé, prêt pour notre développeur. Tu peux. Avec cette petite option que nous avons ignorée pendant le cours, vous pouvez dire que Mark est prêt pour Dev. Cliquez sur celui-ci et appuyez dessus ou vous pouvez simplement dire que ce cadre est prêt à être développé. Il a été approuvé , prêt à être utilisé, même s'il n'y a rien sur cette page, puis nous pouvons partager et nous pouvons aller ici et partager ce lien vers le mode Dev. Je l'ai copié et disons que je envoie à mon développeur. C'est ce qu'ils voient. Pour le développeur, il a besoin de sa propre licence, il doit donc signer et il peut voir ainsi. Il peut voir que celle-ci est marquée comme développeur, celle-ci est prête pour le DV, mais il ne peut pas faire grand-chose s'il n'a pas de compte payant Moins cher que le compte FIGMA normal. OK ? Cela dépendra donc de l' endroit où vous travaillez. Et si vous utilisez beaucoup ce flux, il est très utile pour eux d'obtenir un compte Dev afin qu'ils puissent faire quelque chose appelé inspecter les éléments. Allons y jeter un œil. C'est ce que verra votre développeur lorsqu'il consultera votre fichier. S'ils ont un compte payant, ils peuvent voir toutes les colonnes que j'utilise, ce qui leur sera très utile pour savoir quelles tailles de colonnes vous avez utilisées. Ce qui est vraiment cool, c' est qu'ils peuvent passer en revue et dire : «  Très bien, regardez ce Nab que Dan a fait Cela leur indique qu'ils en sont les éléments importants. Vous pouvez voir que j'en ai utilisé 12 et 12 en haut, en termes de rembourrage en pixels et 16 sur les côtés Ici, de ce côté, cela commence à leur donner des tailles de développeur utiles. Pas tant de tailles de conception, en plus, cela leur donnera le CSS ou tout autre framework qu'ils pourraient utiliser sous Android OOS, selon qu'il s'agit d'un site Web ou d'autres propriétés CSS qui pourraient les aider à le créer plus rapidement, couleurs, défilement vers le bas Même les icônes que j'ai utilisées ici. Voilà le logo. Ils peuvent cliquer dessus et dire, par eux-mêmes, que vous pouvez leur envoyer les fichiers SVG, leur indiquer les tailles Ils peuvent le déchiffrer à partir des visuels. Mais cela leur donne des largeurs, des hauteurs et des tailles de rembourrage spécifiques et leur permet de passer en revue et de dire, d'accord, ils peuvent télécharger leurs propres fichiers SVG, leur donne le contrôle de télécharger ce qu'ils veulent plutôt que, euh, vous ayez à Supposons que cette petite unité que nous avons construite ici soit peu redimensionnable et qu'elle se trouve en bas à droite Cela leur donne la possibilité d'opter pour une extrémité flexible. Tu n'as pas besoin de vraiment savoir ce que c'est. C'est pratique si vous connaissez un peu le codage. Ce n'est pas essentiel. Vous pouvez consulter mon cours sur les bases du Web. Si vous voulez le faire, pour avoir une longueur d'avance sur la façon de le coder vous-même. Même si vous ne voulez pas le coder vous-même, cela peut être pratique pour acquérir une compréhension de base du langage, je ne sais pas, en particulier de cette option flexible. Cela s'appelle Flexbox. Non, cela aura du sens pour votre développeur et lui donnera un peu plus d'avance en termes de volonté d' utiliser cette police, de quelle police s'agit-il ? C'est Source Sans Pro. De quel poids s'agit-il ? Normal, c'est-à-dire notre 700. N'oubliez pas que nous avons appris précédemment que poids des polices dans le code se chiffre souvent par centaines. Ils peuvent copier-coller le texte à partir de celui-ci. Ils peuvent ajouter des commentaires, qui seront renvoyés directement dans votre fichier de conception où ils pourront vous demander « Hé, que faites-vous ici ? Pourquoi est-ce ainsi ? Ça te dérange si c'est comme ça ? Parlez-en à votre développeur, voyez s'il a déjà utilisé Figma et si c'est pratique Parfois, les développeurs veulent simplement une maquette JPEG et toutes les icônes, logos et images exportés et ils la créent eux-mêmes parce que c' est peut-être ainsi qu'ils fonctionnent Ce que vous devez probablement faire, c'est que je vais revenir à mon point de vue sur le design, non sur le développeur, c'est probablement à vous de leur donner une page. C'est très courant de dire « prêt » ? Pour DIV. Ce que je fais, c'est que j'ai mes fichiers de travail, mais j'ai aussi ce fichier en haut ici. Peut-être que c'est juste en haut pour qu'ils puissent le trouver facilement. Je vais juste copier parce que celui de mon ordinateur de bureau, Just to Hi Fi, est vraiment en désordre. Je pourrais prendre ceux dont je sais qu' ils sont prêts et simplement les copier, les copier, les mettre sur leur propre page, prêts pour DIV. Collez-les dedans, marquez-les comme étant prêts, simplement parce que, mais faites-leur savoir que c'est la page qu'ils devraient retirer de la finale finale. Parce que pour vous, il est pratique d'avoir tous les fichiers de travail ici. Vous pouvez voir que celui-ci a ce petit indicateur indiquant que quelque chose sur cette page est prêt pour Dev. Vous pouvez le voir ici sur le mobile Hi Fi que nous avons fait plus tôt. En tant que designer, vous êtes peut-être en train de les marquer comme étant prêts pour Dev et c'est tout. Tu peux toi-même. Si vous êtes développeur, vous pouvez passer à ce mode de développement ici et commencer à extraire des informations utiles, en extrayant le texte, le poids des polices, les couleurs, les styles, les ombres que vous avez passées des lustres à y trouver, vous verrez qu' il y a mon ombre à cocher. C'est le code CSS pour que cela se produise. Exactement comme tu l'as obtenu. Et il a même un nom. Style super génial de Gold Mines. C'est DevMDE dans Figma. Une fois que vous avez terminé, vous pouvez revenir en mode design. S'ils ont un compte réservé aux développeurs, ils n'auront que le mode Dvmode, ils ne pourront pas passer en mode design Mais pour moi, qui fais un peu de codage, je peux passer de l'un à l'autre. Remarque, une fois que vous aurez votre page prête, vous pouvez décider, d'accord, de la page d'accueil ici. En fait, je vais revenir en mode conception Cette page d'accueil a été sélectionnée, je vais la partager, et je vais la partager pour copie Dev Modink Vous pouvez voir que le lien va réellement commencer ici sur cette page d'accueil. Les place au bon endroit pour commencer. Très bien, c'est donc un rapide tour d'horizon de Dvmode. Cela dépendra de la façon dont vous travaillez avec un développeur, s'il souhaite simplement des maquettes visuelles et un tas d'images que vous pouvez exporter. C'est ce que nous avons fait. Nous pouvons choisir cette option et dire : je veux exporter cette image sous forme probablement de JPEG dans ce cas, leur donner un fichier contenant tout ce qu'elle contient, et les lâcher avec juste une maquette d' un PDF ou d'un JPEG de votre dessin C'est bon. C'est le mode Dev. Je vous verrai dans la prochaine vidéo. 93. Projet de cours 19 - Finaliser votre conception: D'accord, c'est l'heure du dernier projet de cours. J'espère que vous les avez trouvés utiles. Et ce que nous allons faire ici, c'est simplement terminer nos designs, d'accord ? Nous avons laissé quelques trous principalement autour de cette page de fonctionnalités. Utilisez-le en quelque sorte comme terrain d'essai. Je veux que vous étendiez les fonctionnalités que nous avons proposées cette page d'accueil pour les intégrer à leur propre type de cartes, ces blocs. Leur apparence ne me dérange pas. Si vous cherchez de l'inspiration, exemple si je viens de taper sur quelque chose comme Dribble, d' accord, j'ai juste saisi fonctionnalités de l' interface utilisateur, j' ai juste par exemple si je viens de taper sur quelque chose comme Dribble, d' accord, j'ai juste saisi les fonctionnalités de l' interface utilisateur, j' ai juste jeté un coup d'œil et je me suis dit : « Oh, ça a l'air plutôt cool ici Et c'est en quelque sorte là que je puise mon inspiration. Vous pouvez voir mon cachot ici. Votre flux Hi Fi de bureau, je veux que vous ayez quatre pages complètes. Donc, tout ce que tu as oublié ou laissé derrière toi, je veux que tu le finisses. Vous pouvez voir ici que j'ai terminé ma page d' accueil, mes fonctionnalités, mon paiement et ma page de confirmation sur ma version de bureau. Tout ce qui vous manque également. Assurez-vous d'utiliser vos styles de caractères et de couleurs. Je veux que vous vous entraîniez à le masquage, un ou plusieurs effets, et vous pouvez utiliser du texte de remplacement pour le texte, en particulier dans votre page de fonctionnalités, ou vous entraîner avec les options d' intelligence artificielle de Si vous n'avez pas de compte payant, vous pouvez passer à quelque chose comme GBT, qui est gratuit et fera de même lui ai demandé de me donner un paragraphe ou une page marketing sur la protection RFID d' un portefeuille, et c'est ce qu'il m'a donné. J'ai demandé des points, et c'est ce que cela m'a donné, et je l'ai fait pour les trois. Je suis même mort un petit pied plus bas. Je veux donc que vous le terminiez, puis que vous preniez une capture d'écran ou que vous puissiez utiliser votre outil Slice ou exporter des fichiers JPEG C'est à vous de décider, mais je veux voir ces quatre images. Téléchargez-le dans la section des projets, et j'adorerais l'amour, l'amour, l'amour. Si vous ne l'avez pas encore fait, partagez-le sur les réseaux sociaux. Si tu veux, tu peux dire où tu es. Euh, tu fais ce cours avec Dan. Et voici le lien. Ce serait également utile. Partagez-le sur l'un d'entre eux ou sur tous. Vous obtenez des points Comer supplémentaires facultatifs si vous utilisez également le Hi-Fi mobile Passer à une version mobile va être amusant et intéressant. Essayez-le si vous avez le temps. Mais pour tous les autres, je veux juste que vous finissiez ces quatre pages. Ils n'ont pas besoin d'être parfaits ou beaux. Je veux juste que tu remplisses les quatre pages. J'adorerais les voir. C'est bon, c'est ça Amusez-vous avec le dernier projet de classe. Ouf, c'est terminé. Allez-y et je vous verrai dans la prochaine vidéo. 94. Quoi faire ensuite ?: Oh, non, c'est la fin. N'y allez pas. Euh, nous traînons ensemble depuis si longtemps, mais c'est la fin. Euh, devinez quoi ? Nous pouvons passer plus de temps ensemble, si tu veux. Tu peux suivre un autre cours. J'en ai plein d'autres qui pourraient vous intéresser compte tenu de votre situation chez Figma Il existe un Figma Advanced. C'est probablement la prochaine étape. J'ai des cours sur Photoshop, Illustrator dans le domaine du design, After Effects Premiere Pro. Blender en est un autre bon. J'ai co-enseigné ça avec Robin, alors regarde ça. C'est une autre bonne étape suivante. Mais je voulais juste te féliciter, à toi et à moi, nous y sommes tous les deux parvenus, d'accord ? Ces cours ne sont pas faciles à préparer et ils ne sont pas faciles à suivre. D'accord ? Ce que font les autres en scrobbling, vous êtes ici de mieux en mieux chez Donc, toi sur le dos. Bon travail. J'aimerais remercier rapidement les éditeurs, Taylor, Jason et Edgar, d'accord, pour leur travail sur ce cours Je ne fais pas tout ça moi-même. Alors dites-moi également ce que vous avez pensé de l'ensemble de l'expérience, d'accord, pour ma part, ce que je pourrais améliorer. Faites-moi part de vos commentaires. Je les lis. J'aime bien m'enregistrer et voir comment se déroule le cours, voir le ratio de personnes heureuses par rapport aux personnes mécontentes, ce qui pourrait être mieux dans le prochain cours, ce que vous avez apprécié dans ce cours. Et en général, oui. Est-ce que tu y penses ? Faites-le moi savoir dans les commentaires. D'accord. C'est la fin. Et ce que j'aimerais faire et terminer, c'est simplement vous donner la permission de vous qualifier de designer UX. Tu l'es maintenant. Certaines personnes me demandent, exemple, comment puis-je savoir quand je le suis ? Tu sais, comment puis-je le faire accréditer ? Il n'y a pas d'accréditation, d'accord ? C'est un état d'esprit, et il peut être difficile de sortir du monde si vous êtes boulanger , graphiste ou mécanicien pour ensuite vous demander quand deviendrai-je designer UX ? Par exemple, vous êtes un designer UX maintenant. Félicitations. Tu n'es pas très bon. Tu ne fais que commencer. Mais c'est un peu comme ça que ça marche. D'accord ? Ne soyez pas timide. La partie suivante, lorsque quelqu'un vous demande ce que vous faites, dites-lui que vous êtes un concepteur d' expérience utilisateur, d'accord ? Je viens juste de commencer. Tu es nouveau, d'accord ? Mais tu l'es. Vous êtes peut-être un designer UX expérimenté qui vient d'apprendre Figma, alors vous pouvez le dire fièrement Mais j'aimerais vous donner la permission dire que vous êtes un concepteur d'expérience utilisateur. Il est difficile de savoir quand cela est approprié. C'est l'heure. Tu as fait un long et long cours. Tu as beaucoup appris. Allez-y, soyez un concepteur d'expérience utilisateur. OK, fin, fin. C'est ça. Je te reverrai sur un autre cours, j'espère. Triste. Au revoir Du gros noir. Je vais tourner.