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

1. Introduction à la formation sur les bases de Figma: Je m'appelle Dan Scott, et je vous souhaite la bienvenue chez Figma Essentials. Ensemble, vous et moi, allez apprendre tout ce que nous devons savoir pour commencer en tant que concepteur UX dans Figma. Nous utiliserons cet outil de conception UI UX pour créer de belles interfaces. Nous allons également créer des prototypes attrayants et nous examinerons également certaines des attentes réelles de vous en tant que nouveau concepteur UX. Maintenant, ce cours s'adresse aux personnes qui sont novice dans la conception, conception de l'expérience utilisateur, même si vous n'êtes même pas entièrement sûr de ce qu'est réellement le design UX, ne vous inquiétez pas, nous allons commencer dès le début et nous frayons un chemin étape par étape. abord, nous allons décrire le bref et comment travailler avec un personnage UX, puis vous apprendrez à créer des cadres filaires vraiment simples. À partir de là, nous apprendrons comment implémenter correctement les couleurs et les images dans vos maquettes haute fidélité. Vous apprendrez les choses à faire et à ne pas faire pour choisir des polices pour les applications Web et mobiles, vous apprendrez comment créer des icônes, boutons et toutes sortes de composants d'interface utilisateur. Vous apprendrez tous les termes effrayants comme les composants, les contraintes et la variance multidimensionnelle. Ils sont tous très faciles une fois que vous les connaissez. Mais nous simplifions également la vie en utilisant kits d'interface utilisateur et des plug-ins gratuits pour Figma pour accélérer notre flux Nous allons créer un guide de style simple prêt pour la transmission de collègues ou de clients. Vous saurez comment créer des micro-interactions simples et avancées, des transitions de pages et des animations. Avant la fin de ce cours, vous disposerez de prototypes entièrement interactifs prêts à être testés par les utilisateurs jusqu'à collaborer avec d'autres membres de l'équipe et à exporter les bons fichiers prêts à être transmis à votre développeur ou logiciel. ingénieur. Vous avez des devoirs que j'ai définis tout au long du cours afin que vous puissiez pratiquer et développer vos compétences, et vous aurez quelque chose d'unique pour votre portefeuille à la fin. Il est temps de vous améliorer et de passer de Figma Zero à Figma Hero. Inscrivez-vous et je vous verrai en classe. Cette chemise avait beaucoup de sens. Cela fait beaucoup de sens plus tard quand vous connaissez Figma un peu plus, mais pour le moment, j'ai réalisé qu'il va probablement se croiser juste flippant, mais c'est fait maintenant et il va falloir vivre avec elle, donc inscrivez-vous au cours. Je vous verrai là-dedans. 2. Commencer la formation Figma: Bonjour. Tu y es arrivée. Félicitations. Bienvenue dans le cours. Tout d'abord, vous devez télécharger les fichiers d'exercices. Il y aura un lien sur cette page ici. Téléchargez-les. Ces fichiers d'exercices contiendront les fichiers que nous utiliserons pour le cours. Mais il y aura également une feuille de raccourcis. OK. Nous n'allons pas trop approfondir les raccourcis Md ici, mais il y en a quelques uns très utiles que vous devrez connaître à la fin du cours. Imprimez donc cette feuille et vous pourrez encercler celles que vous aimez vraiment. Attends, je fais juste une pause. J'ai oublié de mentionner que vous devez vous inscrire à Figma. Oups. Vous pouvez utiliser ce lien affiché à l'écran ici. Et si vous utilisez mon lien, Figma m'accorde un peu de crédit Rien de différent pour toi, et ça m' aide à continuer à faire ce que je fais. C'est bon. Taylor, tu peux remettre la vidéo en pause. Taylor est notre incroyable monteur vidéo, et il pense que je ne sais pas s'il fait une pause mon visage dans ces positions inconfortables. Exprès. Je sais que tu le sais. Vous pouvez soit utiliser la version du navigateur. Alors inscrivez-vous, utilisez la version du navigateur ou téléchargez la version de bureau. y a absolument rien, vous savez, aucune différence entre les deux. Je vais utiliser la version de bureau. Et parce que je suis vieux et que j'aime que les choses se trouvent sur mon bureau sans aucune raison valable car elles sont exactement les mêmes. Donc ça n'a pas d'importance. Vous saurez également, en ne regardant qu' une infime partie de ma vidéo, que je parle vite. J'ai pris beaucoup de café. Il est tôt. Je ralentis. OK ? Mais si vous trouvez que je parle très vite, ou peut-être que l'anglais n'est pas votre langue maternelle, et que vous trouvez mon accent un peu fort, il y en aura sur toutes les vidéos, c' est comme un petit rouage, ou est-ce là en bas, et vous pourrez cliquer dessus pour me ralentir vers une version plus lente Ça a l'air un peu bizarre, mais ça pourrait te faciliter la tâche. Et c'est la version gratuite, la version payante. Nous allons utiliser la version gratuite pendant la majeure partie du cours, principalement parce qu'elle est incroyable. C'est incroyable que Figma ait décidé de le rendre gratuit par rapport à ce qui est payant Vers la fin du cours, je vous montrerai pourquoi vous devriez passer à la version payante. Mais vous pouvez aller assez loin en tant que designer professionnel en utilisant la version gratuite, mais je vous montrerai les avantages de la version payante plus tard De plus, Figma est toujours en train de se mettre à jour, ce qui est incroyable. Pour moi, en tant que designer, de nouvelles fonctionnalités apparaissent en permanence. Ils réorganisent les choses pour les rendre plus simples et plus faciles et incluent des fonctionnalités plus avancées C'est vraiment pénible pour moi en tant qu'instructeur, car en gros, je le sais. Dès que j'aurai fini d'enregistrer ce cours, ils vont en mélanger quelques parties. Alors gardez un œil sur cela. Si c'est fondamental, je vais réenregistrer les vidéos. S'il ne s'agit que de petites choses, jetez-y un coup d'œil. Souvent, il peut s'agir d'un simple changement de nom. C'est au même endroit, c'est le même travail, mais peut-être l'ont-ils appelé autrement ou l'ont-ils clarifié un peu. Consultez également les commentaires ci-dessous. Soit je laisserai un commentaire s'il ne s'agit que d'un petit changement, soit d'autres étudiants le feront également. Alors gardez juste un œil là-dessus. Salut, voilà. Un petit mot rapide. Si vous trouvez que votre Figma ne ressemble pas à la mienne, vous êtes peut-être en train de voir le nouveau design UY que Figma vient Tu peux le remettre à ressembler au mien. Si vous êtes en bas, vous pouvez cliquer sur le point d'interrogation noir en bas à droite de l'écran, puis passer à l' option qui indique revenir à l'interface utilisateur précédente, et vous obtiendrez Figma exactement comme la mienne Ils fonctionnent tous les deux de la même manière. Ils viennent quelques modifications à l'interface utilisateur. Tu y vas. Continuez. Oui, pour de nombreuses mises à jour. Réservez pour de nombreuses mises à jour. Bien, passons à la vidéo suivante. 3. Qu'est-ce que Figma et peut-il servir au codage ?: Parlons à quoi sert Figma et à quoi elle ne sert pas. Il est incroyable de prototyper rapidement des choses comme des sites Web et des applications. Il fait d'autres choses que nous couvrirons un peu mais c'est l'outil principal d'un concepteur d'interface utilisateur ou d'interface utilisateur, et leur rôle dans la création de l'une ou l'autre des filaires, ce que nous faisons ce cours d'aspect très rapide pour une application ou un site Web, il ressemble exactement à un site Web. Maquettes haute fidélité de ce site Web avec interactivité également. Cela m'amène à ce qu'il ne fait pas. Vous pouvez créer quelque chose qui ressemble beaucoup un site Web pour que vous puissiez effectuer des tests. C'est probablement la meilleure chose à propos de Figma et de l'UX en général, c'est que nous allons créer quelque chose et ensuite nous pourrons le mettre entre les mains du client, du public visé, de nos clients, et ce n'est pas le cas. pour être complet, mais ils pourront l'utiliser suffisamment pour que nous puissions faire quelques observations et tester certaines théories sur ce qu'ils pensent et ce que veulent les utilisateurs. S'il y a des changements, nous pouvons les changer très rapidement dans Figma, puis les remettre à eux pendant qu'ils sont assis là. Il s'agit de prototypage rapide, de changements rapides et d'en arriver à un point où vous êtes satisfait du site Web ou l'application et que vous êtes comme si cela a subi un peu de tests utilisateur, client en est satisfait. C'est là que Figma ne fait rien d'autre. C'est juste le prototype et il ne va pas coder le site Web pour vous ou pour l'application. Il remet des petits morceaux au développeur à utiliser, CSS et SVG, graphiques et autres. Mais pas beaucoup que le développeur peut utiliser. Ils finiront par partir de zéro en utilisant vos maquettes. Ils perdront beaucoup de choses comme l'espacement et la feront ressembler votre application, mais c'est ce qu'elle ne fait pas Figma, elle ne fait pas le codage. Donc, ce que vous faites, c'est que vous l'avez inscrit pour le client, puis que vous travaillez avec un développeur, si vous êtes vous-même développeur, vous commencez à le coder, ou vous pouvez commencer si vous pouvez entrer dans le HTML et le CSS, j'ai un cours là-dessus. Si vous voulez commencer à faire vos propres affaires. Ou vous utilisez peut-être quelque chose comme WordPress ou Webflow. J'ai des cours à l'horizon pour ces deux ou Wix ou quelque chose de plus, glisser-déposer. Vous devez ensuite le construire en fonction de votre maquette Figma que vous possédez, c'est beaucoup plus rapide à faire. Ensuite, allez le construire soit dans l'un de ces outils, soit codez-le. C'est ce que c'est, le prototypage rapide. Ce qui n'est pas le cas, c'est que vous n'aurez pas de site complet à la fin. C'est une question qui me pose beaucoup. Vidéo suivante. En fait, j'ai oublié une chose qui ne disparaît pas. Ne le découpez pas. À quoi s'habitue-t-il d'autre ? Figma s'habitue beaucoup pour un design graphique régulier. Principalement dans l'espace numérique, sélectionne des campagnes sur les réseaux sociaux. Ces choses incroyables, vous le verrez au fur et à mesure que vous suivrez le cours que vous aimeriez, ce serait vraiment pratique pour faire des posts ou des carrousels Instagram, ou un tas de tailles différentes pour les publicités. C'est vraiment bon pour ça. Il ne fait pas de très bonnes impressions. Vous pouvez y insérer une page normale. Vous pouvez dire lettre américaine A4. Alors que les gens l'utilisent comme alternative à quelque chose comme illustrateur et un peu de photoshop. Photoshop en a toujours besoin, mais vous verrez qu'il est conçu pour la conception de sites Web et d'applications. Mais les gens l'utilisent pour tous les autres trucs maintenant, il ne s'agit pas d'un outil de conception général, mais sachez que vous constaterez que certaines personnes l'utilisent beaucoup plus pour des choses qu'il n'est pas censé faire, mais c'est tout simplement parfait. C'est ce que c'est. C'est ce qui n'est pas le cas. Maintenant, c'est la fin. Coupe. 4. Quelle est la différence entre UI et UX dans Figma ?: Parlons de ce qu'est l'interface utilisateur par rapport à l'UX. Si vous le savez déjà, vous êtes autorisé à ignorer cette vidéo. C'est bon. Cela ne sera pas très détaillé, mais simplement pour vous permettre de comprendre les différences entre les deux parce que cela arrive beaucoup. Conception de l'interface utilisateur de manière simple. Tout cela est très simple. L'interface utilisateur de l'interface utilisateur par rapport à l'UX, l'expérience utilisateur. L'interface utilisateur correspond à l'apparence de quelque chose et l'UX est la façon dont quelqu'un l'utilise. Souvent, comme ça ressemble, comment il est utilisé. Jusqu'à ce que UX fasse partie de ma vie et beaucoup d'entre nous, c'est une nouveauté, j'ai fait beaucoup de conception d'interface utilisateur. J'ai conçu un site Web. Cela reposait beaucoup sur mon intuition, boutons devraient être aussi gros et ils devraient être ici, et traditionnellement, les choses passent ici dans [inaudible]. Il y a eu beaucoup de choses. Je le donnerais au client qui, comme ça, génial. Mais il manquait un gros élément, l'UX. Il y a eu très peu de tests. J'avais une idée de ce qui fonctionnerait, mais c'était totalement une idée. C'était comme une hypothèse sur la façon dont cela devrait fonctionner. La partie UX d'être un concepteur UX consiste à prendre cette disposition de l' interface utilisateur et à la mettre entre les mains des clients et à la tester. Cette partie de cela vous transforme d'un simple concepteur d'interface utilisateur aux débuts d'un concepteur UX, c' est le faire sortir et le tester. Est-ce que ça a fonctionné ? Est-ce qu'il a fait exactement ce que j'espérais qu'il fasse ? Le client, lorsqu'il clique sur ce bouton, a-t-il obtenu ce qu'il attendait, ou a-t-il été surpris ? C'est un concepteur d'interface utilisateur qui conçoit le bouton, les coins arrondis , le beau dégradé et les tiques au milieu. Le concepteur UX déclare : « C'est génial. Allons tester ça », et il dit : « Est-ce assez grand ? Peuvent-ils cliquer dessus ? Y a-t-il suffisamment de contraste ? Est-il accessible aux personnes malvoyantes ? La hiérarchie des boutons est-elle trop grande ? Parce qu'il a l'impression qu'il devrait faire autre chose. » Une grande partie de ce côté est l'UX. Maintenant, en toute honnêteté, ce cours est principalement basé sur la conception de l'interface utilisateur parce que nous laissons Figma. Figma est la création de ces choses, le côté test des choses. Je vais vous donner quelques informations fur et à mesure que nous allons parler de ce que je ferais à différentes phases de test, mais c'est plus large que ce qui peut être couvert dans ce cours. Mais nous allons faire de l'interface utilisateur avec un peu d'expérience utilisateur. Mais Figma est essentiellement un logiciel de montgolfière. C'est pourquoi vous vous êtes probablement inscrit. Cela ne fait pas de vous instantanément un concepteur UX. La partie UX va plus loin que de simplement déplacer des pixels sur l'écran. C'est comme le donner là-bas, le faire tester, changer les choses et tester des choses. C'est UX. Mon petit exemple que je suis en train de parcourir en ce moment, ma banque a mis à jour son site Web et son application, et il est magnifique. L'interface utilisateur, incroyable. L'UX est terrible. Je suis sûr qu'il a subi des tests. J'ai mentionné qu'il a subi beaucoup de tests. Mais pas juste à la fin, car c'est juste des choses simples. Supposons que je tape mon mot de passe, «  Entrée », non, vous allez chercher la souris et cliquer sur le bouton. Lorsque vous arrivez à la fin, il sait que lorsque vous appuyez sur Entrée, vous parlez de ce bouton ici. C'est juste une chose. Autre chose, je suis allé mettre à jour une personne dans mes ordres permanents, comme un prélèvement automatique, je ne sais pas comment vous l'appelez dans votre pays, mais un paiement régulier que je fais. Je suis allé chercher comment modifier ça. Je suis comme, je dois le supprimer parce qu'il n'a pu le trouver nulle part. Je suis averti de la technologie, je sais comment utiliser les ordinateurs et je ne l'ai pas trouvé. Je me disais, peut-être devrais-je le supprimer. Je l'ai fait quelques fois, et j'étais comme si je vais leur envoyer un courriel [inaudible]. Ils sont comme, vous devriez aller cliquer sur le nom de la personne pour la modifier. Je suis comme, eh bien, ça semble simple. Allez, jetez un coup d'œil. Si vous cliquez sur le nom de la personne, le modifiez, mais il manque quelques éléments. Toute indication que c'est possible, souligner, flèche, grand signe, infobulle. L'autre façon de penser est lorsque votre souris se déplace et que vous passez sur quelque chose cliquable, elle se transforme en petite main. Il ne fait pas ça. suffit de cliquer dessus avec la flèche et il commence à cliquer sur tout. Il doit y avoir comment éteindre cette chose. D'une certaine façon, c'est éteint. Il y en a un million et une de ces petites choses. C'est juste sorti. Mais ça me pose un problème. Quoi qu'il en soit, je babille. [inaudible], c'est très inquiétant, ma petite lumière colorée. Je viens de tirer la lumière colorée. Vous allez le voir tout au long de ce cours jusqu'à ce que j'en ai marre. Mais oui, c'est mon histoire UX pour le moment. Vous les aurez aussi. C'est le genre de chose si vous débutez dans l'UX, c'est de garder ces idées ouvertes. Ils sont terribles et ils sont douloureux dans les fesses, mais c'est le langage et les choses que vous rassemblez en tant que designer pour que lorsque vous travaillez, vous puissiez éviter certaines de ces choses, ou du moins quand elles reviennent de vous n'êtes pas surpris. Vous êtes comme, cette chose que je déteste aussi est dans cette chose. UI, UX, c'est mon explication pour le moment. Vidéo suivante. 5. Réalisation dans ce cours Figma: Bonjour à tous. Dans cette vidéo, nous allons regarder ce que nous fabriquons. D'accord. Nous allons commencer à fabriquer des cadres filaires au départ, d'accord. Ensuite, nous ferons des versions haute fidélité, d'accord. Ça a l'air un peu plus joli et on est en fait assez désordonné. Regardons celui-ci ici. Je vois les écrans en bas. D'accord. Nous allons travailler là-dessus. Nous allons créer des styles, des composants, toutes sortes de bontés. Jetons un coup d'œil à l'une des versions de maquettes. Oui. Ce sera ce que nous fabriquons. Nous allons concevoir cela ajoutera de l'interactivité, fera un formulaire que les gens peuvent acheter des choses, va suivre notre mémoire, à fois notre personnalité et notre flux de tâches. Parlons de ce que sont ces choses. Nous allons nous concentrer sur le logiciel Figma. Mais je vais proposer une sorte de conseils généraux de conception UX pour les gens qui sont tout à fait nouveaux. Nous avons une entreprise appelée Scott Headphones, qui veut que nous créions quelques pages après ce flux de tâches. Le flux de tâches ici, dans ce cas, est qu'ils veulent une page d'accueil qui va vers certaines fonctionnalités du produit, partie que le produit peut être ajoutée à un paiement, puis une fois l'ID critique, il a une conformation remplie. C'est ce qu'ils nous ont demandé de construire. Ils nous ont donné un personnage. Parlons rapidement de ce qu'est un personnage. Ce n'est qu'un personnage d'enchère. Ils peuvent s'exécuter sur une page entière, sur toutes les pages. Cela va suffire pour ce cours particulier. Qu'est-ce qu'une force ? Je vais le lire, vous pouvez lire à leur sujet. Notre client idéal est une femme nommée Sarah. Sarah a la vingtaine. Elle est titulaire d'un baccalauréat. Elle travaille pour elle-même. Elle est mariée avec des enfants et elle vit en Irlande. Elle n'a jamais rien apporté de tel auparavant et certaines des préoccupations sont qu' elle est très écologique et consciente des déchets. Pourquoi avons-nous un personnage ? C'est pour nous permettre d'être précis. D'accord ? Pas spécifiquement pour Sarah elle-même. Sarah est représentative d'un type de personne, d'accord ? Un groupe de personnes qui me font utiliser ce site Web et qui m'aide à prendre mes distances. Sinon, je finis par construire des choses que j'aimerais, accord, en fonction de ma propre histoire et de la façon dont je connais le produit. Cela me donne des limites. Sinon, vous finissez par concevoir pour vous-même ou pour tout le monde, et personne ne gagne, d'accord. Parce que vous vous retrouvez avec cette chose générique qui ne fonctionne pas réellement pour le public cible. Un personnage nous aide à définir ce public. Cela vous aide également lorsque vous traitez avec le client ou les parties prenantes, car vous pouvez détacher vos propres préférences personnelles comme je veux Brush Script. Ils veulent Times New Roman. Mais que veut Sarah ? Nous devons avoir de l'empathie pour elle et sa situation et son expérience avec le produit. Il est utile de séparer ces conversations de ce que Dan aime en tant que designer, ce que le client aime comme lui-même. Parlons de ce qui est juste pour Sarah. C'est à travers la couleur, polices, la langue, les types d'imagerie, l'organisation des informations comme les fonctionnalités à afficher plus tôt en fonction de certaines des préférences qu'elle possède et d'une partie de la connaissance du produit. Maintenant, c'est comme un aperçu super rapide de persona. C'est un design UX apprenant ici dans Figma. Un chercheur UX, d'accord. Nous allons passer beaucoup plus de temps et potentiellement produire beaucoup plus de documentation et comprendre Sarah beaucoup plus que ce que nous avons fait ici. Je suppose que c'est un aperçu général si vous êtes nouveau et si vous êtes nouveau, je vous conseille de passer du temps, d' accord, maintenant ou après ce cours à faire des recherches. Persona est ce qu'il faut faire pour mieux comprendre et simplement savoir qu'il s'agit d'une version très simplifiée, mais bonne pour ce dont nous avons besoin pour ce cours. Maintenant, flux de tâches si vous n'en avez pas entendu parler auparavant. flux de tâches ici nous a été donné, au lieu de concevoir tout le site Web mobile, on nous a demandé de concevoir une certaine fonctionnalité critique importante, d'accord. Nous devons concevoir cette page d'accueil, montrer les produits du produit, une page de paiement et une page de confirmation. Il s'agit d'un flux de tâches simple et agréable. Ils peuvent être un peu plus compliqués, d'accord. Ils peuvent être moins compliqués. Cela peut ressembler à des flux de tâches, peut inclure des éléments tels que, comment une personne annule-t-elle ce produit ? Quel est le processus ? D'accord. Vous êtes peut-être en train de concevoir un processus d'annulation. C'est peut-être le processus d'inscription. Peut-être que c'est comment modifier votre mot de passe, comment télécharger ou télécharger un document, c'est peut-être une chose spécifique qui doit être effectuée sur votre application ou votre site Web particulier. C'est considéré comme un flux de tâches. Aussi, en fait, jetons dans cet autre terme genre de flux de tâches de pote contre les flux d'utilisateurs arrive pas mal, ok. C'est un excellent article d'Erika Harano. Je vais mettre un lien à l'écran ici, mais après cette vidéo ou après ce cours, passez un peu plus de temps à les comprendre, mais je vais vous donner un bref aperçu. Fondamentalement, flux de tâches, jetons un coup d'œil, ils ont le flux de tâches crêpes. Je vais trouver une version de recette. D'accord. Très simple, comme ce que nous faisons dans notre cours. Page d'accueil, crêpes sociales, résultats de recherche, trouvez la recette de pancake super banane, flux de tâches simples, c'est étape par étape. C'est séquentiel, un peu linéaire. Alors qu'un flux de tâches, d'accord, est beaucoup plus complexe, jetons un coup d'œil à celui-ci. Celle-ci ici, pouvez-vous le voir ? Nous en finissons par là. C'est le même genre de processus, on démarre la page d'accueil et on se retrouve avec une super pancake à la banane. Mais il y a beaucoup plus de moyens d'y arriver. Il y a plus d'une option, ce qui, nous le savons, est toujours le cas, comme cette option est comme la plus grande ici. Le premier va soit utiliser la barre de recherche, maintenant le flux de tâches au-dessus de la casse est supposé en utilisant l'option de recherche, mais il va y avoir, votre personnage pourrait ne pas être comme type de personne de la barre de recherche. Encore une fois, ils vont aller de cette façon, alors sachez qu'ils n'utiliseront pas la barre de recherche. Ensuite, il va falloir construire une maquette, d'accord, la navigation dans les catégories, et il y a une catégorie de petit-déjeuner, puis il y a une page de petit-déjeuner. D'accord ? Ils trouvent des crêpes dans cette page du petit-déjeuner, puis ils cliquent sur la recette qu'ils veulent, d'accord. Ils se sont retrouvés au même endroit, mais c'est une autre façon d'y arriver. D'accord. Vous pouvez voir ici la clé, ces nœuds de décision et les différentes formes, d'accord, pour différentes actions, d'accord. Ce sont toutes des pages. Il s'agit d'interactions entre l'utilisateur et l'interface et les décisions de l'utilisateur. J'ai commencé et je m'arrête là. Les flux utilisateur sont plus complexes, présentent différentes options. Vous devez vous assurer que vous êtes en train de concevoir pour la bonne chose. Si vous concevez votre flux d'utilisateurs, il y aura plus de choses à faire et un travail plus important, alors qu' un flux de tâches peut être une option limitée assez simple. Maintenant, vous aurez des flux de tâches dans ce flux d'utilisateurs, pouvez-vous toujours voir notre page d'accueil, les résultats de recherche, la banane est toujours là, d'accord. C'est juste une sorte de chemin plus complexe ou différent que l'utilisateur pourrait suivre. Un flux d'utilisateurs vous aidera à trouver d'autres choses comme impasses ou où les gens sont coincés dans une boucle ou ne savent plus comment faire face. D'accord ? Oui. Il s'agit du flux utilisateur bref par rapport au flux de tâches. Une autre chose à mentionner est qu'on nous a demandé de concevoir une version de site Web mobile de cette application, et non pas une application. Une application que vous n'avez qu'un écran de taille mobile , d' accord, parce qu'il s'agit d'un site Web mobile, cela signifie que vous devrez probablement concevoir non seulement la version mobile, mais peut-être une tablette et une version de bureau. Cela peut souvent vous surprendre lorsque vous êtes nouveau et que vous êtes comme, quelqu'un vous demande de concevoir un site Web de bureau que vous allez devoir développer, va vouloir voir comment le site se décompose en version mobile ou se transforme en une version mobile version pour ordinateur de bureau. Prenez cela en compte. Mais nous nous concentrons ici sur la version mobile. Enfin, c'est assez nu en ce qui concerne le fait que nous avons un personnage, j'ai un nom d'entreprise et un flux de tâches, mais souvent un bref peut être beaucoup plus grand que cela, ok. Comme concevoir tout un site Web et parfois vous pouvez obtenir beaucoup de détails, d'accord. Pour moi, en tant que designer, ce qui serait difficile avec celui-ci, c'est que je sais à propos de Scott Headphones ? Pas très peu à ce stade, d'accord. J'aimerais voir, j'aimerais leur parler ou que mon chef de produit leur parle ou qui est responsable leur parler de leur sujet et de quelles sont leurs valeurs, quelle est leur mission de m'aider, une sorte d'aide avec cette persona pour construire un autre niveau là-dessus. Parfois, vous n'obtiendrez pas cette information, d'accord, et parfois vous le ferez. Si vous recevez quelque chose de la part d'une plus grande entreprise, elle aura probablement une déclaration de valeurs et de missions. Vous pouvez trouver cela et l'ajouter à votre ensemble d'outils lorsque vous concevez cette chose pour avoir de meilleures conversations avec les parties prenantes lorsque vous référencez ce que vous faites, est là qu'elles se trouvent. en tant qu'entreprise. De même, vous allez trouver des emplois où il n'y a pas de valeurs et où il n'y a pas de mission. Ils n'y avaient pas vraiment pensé. Vous allez devoir faire de votre mieux avec ce que vous avez. Au fur et à mesure que vous obtenez de plus en plus d'expérience pour ce genre de choses, ce sont probablement des conversations que je veux avoir de plus plus, plus j'ai de l'expérience pas seulement un personnage, mais comme, pourquoi faisons-nous cela ? Où est la direction que nous allons ? D'accord. Qui ai-je ? Pourquoi aidons-nous une réelle influence sur mon travail de conception ? Mais de toute façon, c'est un bon point de départ pour ce cours, et passons à autre chose. 6. Projet de cours 01 - Rédiger votre propre cahier des charges: Bonjour, tout le monde. Il est temps pour votre tout premier morceau de, nous n'appellerons pas ça des devoirs, nous allons appeler ça des projets de classe. Vous pouvez les ignorer. Vous le pouvez, mais cela vous aidera vraiment à consolider ce que nous avons appris et mon objectif est que vous puissiez créer quelque chose grâce à ce cours qui soit unique à partir du matériel de cours que je fabrique, qui est génial pour votre portefeuille propre. La première consiste à créer votre propre mémoire. Nous avons vu dans la dernière vidéo que j'ai fait un bref. Où est mon mémoire ? C'est le mien. Ce que je veux que vous fassiez, c'est aller sur ce site que nous venons de créer ici, c'est randomprojectgenerator.com. Je veux que vous saisissiez votre nom de famille, le nom de votre animal de compagnie ou le nom de famille d'un ami, le nom de quelqu'un pour l'entreprise et que vous saisissiez votre emplacement. C'est Manurewa que je suis né. Vous pouvez mettre en Irlande en tant que pays. Si vous êtes dans un grand pays, placez dans votre état ou votre ville, quel qu'il soit, puis cliquez sur GENERATE MY PROJECT. Assurez-vous que nous sommes dans l'onglet UX/UI, puis cliquez sur GENERATE MY PROJECT. Vous devriez obtenir quelque chose d'unique pour vous. J'ai des planches de surf Shadow. C'est cool. Cela est généré aléatoirement, n'appuyez pas sur une nouvelle tentative. Le bouton rouge est lu. Je veux juste que tu choisies le premier que tu as eu, même si tu es comme moi. Certains des objets les plus délicats et des personnages délicats sont l'une de ces choses qui vous aideront vraiment à vous construire en tant que designer. Ne le frappe pas. Vous avez un peu lu et vous allez obtenir quelque chose d'unique. Il sera unique à certains égards, comme dans le nom de l'entreprise et le produit. Mais la chose que nous construirons ensemble sera le même genre de structure. Nous suivrons le même flux de tâches. Vous allez utiliser la page d'accueil, les fonctionnalités du produit, le paiement et la confirmation, quel que soit le produit. Cela signifie simplement que lorsque vous commencez à suivre, nous allons toujours dessiner un bouton et nous allons toujours dire en savoir plus. Mais vous allez utiliser des couleurs qui sont bonnes pour votre personnage et quand je dis apporter une image, au lieu d'apporter des écouteurs, vous allez apporter des planches de surf ou quel que soit votre produit. Vous allez toujours avoir une image en cercle. Ils auront la même structure, mais au moins à la fin, vous pouvez avoir quelque chose d'unique pour votre propre portefeuille, plus cela vous fera réfléchir à votre propre personnalité et à la façon dont vous pourriez concevoir pour eux. Vous avez l'idée ? Suivez ce cours, mais en utilisant votre propre nom d'entreprise, que je vous demanderai de faire un peu plus tard et de choisir vos propres images et couleurs pour cette marque. Une fois que vous l'avez fait, vous en prenez une capture d'écran, soit vous la copiez dans le presse-papiers ou téléchargez-la au format PNG, et stockez-la simplement sur votre ordinateur ou votre téléphone prêt pour plus tard dans le cours. Nous allons les assembler sur une page Brief & Taskflow plus tard. Une autre chose que je veux que vous fassiez, est que nous avons le nom et la personnalité de notre entreprise. Vous l'avez téléchargé, copié dans le presse-papiers ou quelque chose comme ça. Vous l'avez entreposé quelque part. Apportons également le flux de tâches car nous utilisons tous le même. Cela va me permettre de vous montrer quelque chose d'étrange, bizarre et d'intéressant pour Figma. Figma veut vraiment que tout soit dans le Cloud, en ligne. Retournez à votre page d'accueil, ou si vous êtes sur un PC, accédez à la petite icône Figma et accédez à celle qui dit, c'est à peu près ici, ça dit aller dans des fichiers ou quelque chose de similaire. Soyez sur vos brouillons. Si vous souhaitez importer un fichier Figma plutôt que de le partager avec vous, cette petite icône ici, Importer, recherchez cette icône. Il s'est déplacé dans le passé, donnez-lui un clic, et dans vos fichiers d'exercices, il y en a un appelé Task Flow.fig. Chargez-le là-dedans et nous l'utiliserons plus tard. Vous pouvez l'ouvrir, jeter un coup d'œil. Fondamentalement, ce n'est que notre flux de tâches. Nous allons le copier et le coller et le combiner plus tard dans le cours. Mais vous avez votre flux de tâches, vous avez votre propre mémoire, ou du moins un personnage et un nom, et vous êtes prêt à continuer. Va faire ça comme devoirs et je te verrai dans la vidéo suivante. 7. Wireframe basse fidélité ou haute fidélité dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons parler la différence entre les filaires et la haute fidélité. Ce qui est assez facile, vous pouvez le voir. Les filaires sont assez économiques, et les maquettes haute fidélité sont vraiment belles. Ils vont les appeler Hi-Fi, Lo-Fi. En général, ils les appellent filaires. La Hi-Fi est haute fidélité. Celui-ci sera très rapide et facile à réaliser et à tester. N'essayez pas de sauter, si vous débutez dans l'UX, sautez le filaire et la section de votre processus de conception à votre paie. Vous pouvez probablement faire tomber un filaire en quelques minutes. Toujours haute fidélité, vous pouvez finir comme jouer avec un trekking et partir pendant des heures et des heures. Vous n'obtiendrez pas de meilleur test auprès de votre public potentiel. flux de tâches nous a été attribué. Nous pouvons vraiment facilement créer une image filaire et tester ce flux de tâches même sur l'application. Je vais vous montrer comment faire ça. C'est comme sur un téléphone ou sur un site Web. Super rapide, super facile et pas distrayant, comme, oh, est-ce la bonne image ? Est-ce la bonne police ? Je ne suis pas sûr des couleurs. Vous parlez du flux de tâches, la mécanique réelle de la façon dont cela est construit en dessous, et nous pouvons tester rapidement avec des filaires. Les filaires n'ont pas besoin de ressembler à ça. C'est mon filaire. Un autre filaire que j'ai téléchargé beaucoup plus joli. Les boutons ont de la couleur dedans. Choisissez une couleur uniquement en gris et une couleur si vous le souhaitez, ou collez au gris. Vous voulez enlever les éléments de design ici, vous passez du temps à le faire, ou du moins, le client va, oh, je n'aime pas le rose ou ce bleu n'est pas le bon bleu. Vous voulez retirer tout cela de l'équation lorsque vous concevez des filaires. Gardez les choses simples. Choisissez une police ennuyeuse et une couleur ennuyeuse. Un autre filaire, un peu plus agréable. Oui, quelqu'un a passé du temps sur beaucoup de coups. n'y a aucune raison que vous ne puissiez pas pousser vos filaires plus loin que ce que nous faisons dans ce cours. Un texte très simple qui a supprimé tout le texte. Une autre esquisse. Oh, c'est un peu esquissé. Je suppose que c'est trop proche du sens comique pour moi. Mais j'aime bien que les lignes esquissées soient à l'extérieur. Ce sont tous des filaires Lo-Fi en direct, Hi-Fi. C'est dans le même document. Mais celle-ci est très jolie. Celui-ci ici, un autre Hi-Fi. y a beaucoup plus de temps, et si ça va dans celui-ci. Mais pour les tests, vous n'aurez besoin que de la base. C'est pourquoi nous faisons des filaires. Il faut le faire, car c'est le début du cours. Nous allons en apprendre beaucoup sur l'utilisation de Figma, construisant des filaires avant de commencer à construire nos super belles choses un peu plus tard dans le cours. Commençons par Figma et faisons quelque chose. 8. Création de votre fichier de design et présentation des frames dans Figma: Faisons notre premier fichier de conception. Cela peut être un peu déroutant pour ce premier écran. Le vôtre sera différent du mien parce qu'ils changent cela assez souvent. Si vous n'avez rien de tel que le mien, vous pouvez monter en haut à gauche ici et cliquer sur la petite liste déroulante. Si vous êtes ailleurs, vous pouvez d'abord cliquer sur le bouton Accueil, puis ce petit menu déroulant et ce que vous souhaitez faire est de cliquer sur votre nom. La mienne sera un peu floue ici parce qu'elle a aussi mes adresses e-mail. Mais cliquez sur votre nom, et non sur Community. Cliquez ici et vous devriez trouver quelque chose qui ressemble à mon écran. Ce que nous voulons faire, c'est un nouveau fichier de conception. Cela n'est apparu que l'autre jour et ce que j'ai fait normalement dans le passé, c'est que nous allons créer un brouillon et ce petit plus à côté. Quoi qu'il en soit, je crée un nouveau fichier de conception et on y va. Très bien, si vous êtes tout nouveau. J'ai réinitialisé ma Figma pour qu'elle apparaisse toujours. Vous pouvez montrer vos affaires, je suis ici pour vous montrer. Je vais annuler cela. Vous finissez avec ce grand écran rien. Nous avons notre fichier de conception, nous devons maintenant introduire des cadres. Les cadres sont ces gars ici. C'est cette petite icône ici, la troisième ici, cliquez dessus et vous pouvez dessiner n'importe quelle taille de cadre. Considérez un cadre comme une page. Si nous dessinons une application. Nous allons revenir à cet outil ici, dessiner quelque chose qui ressemble à une application. Vous pouvez avoir plusieurs cadres, toutes sortes de tailles différentes, un ordinateur de bureau, une tablette. Les cadres ont de nombreuses utilisations, mais à ce stade précoce du cours, considérez-les comme une page ou un tableau d'art si vous venez d'Adobe Land. Ce que nous devons faire, c'est les supprimer car il s'agit de tailles aléatoires. Cliquez n'importe où à l'intérieur, puis cliquez sur Supprimer. Cliquez sur eux, supprimez-les. Très bien, alors allez dans votre outil de cadre et soyons un peu plus précis avec nos tailles. Ici, vous aurez des tailles préfabriquées. Vous allez être dans le futur, donc vous serez peut-être sur iPhone 52. Je vais utiliser l'iPhone 8. Il s'agit d'une taille générique agréable pour Android et Apple. Certaines de ces grosses tailles sont un peu grosses et étranges. Maintenant, l'objectif est de choisir une taille générique. Nous n'allons pas concevoir tous les iPhone différents dans une taille différente, nous allons concevoir quelque chose de assez proche du téléphone à usage général et notre développeur construira quelque chose qui soit un peu plus réactif ajustez les petites modifications de différents pixels. Je vais choisir une taille de téléphone assez générique. Il est plus facile de Google comme la taille de téléphone la plus courante et vous obtiendrez quelque chose ou la taille la plus courante du bureau et vous obtiendrez quelque chose ici et le choisirez. Si vous concevez une montre, si vous ne faites que du papier traditionnel à la vieille école, des trucs en bois. Il y a tout ici, donc le vôtre sera différent. Maintenant, je vais commencer par iPhone 8 même s'il est vraiment vieux. Je ne sais pas pourquoi il est encore ici, c'est là. Mais c'est une bonne taille générique, 375 pixels que j'aime bien. Vous pouvez le régler par la suite, voici votre cadre. En fait, la nouvelle taille n'est même pas répertoriée ici. Je vais utiliser 400 et taper par-dessus le haut. Je vais annuler cela parce que l'iPhone 8 est parfait pour ce dont j'ai besoin. Encore une fois, si vous regardez dans le futur et qu'il n'y a pas d'iPhone 8. Vous pouvez taper ce 375, 667 pour obtenir les mêmes dimensions. Mais optez pour ce qui est commun pour Toi en ce moment. L'autre chose que j'ai tendance à faire, c'est que j'essaie de comprendre le téléphone mon client parce qu'il va potentiellement le tester sur son téléphone. Je veux m'assurer que s'ils ont une sorte de téléphone, je pourrais l'utiliser juste pour que le balisage fonctionne très bien sur leur téléphone. Nous allons finir par nommer beaucoup de ces cadres car l'iPhone 8, 1,2,3,4,5,6,7,8 ne va pas nous aider. Nous allons double-cliquer sur le mot ici, ou vous pouvez double-cliquer ici dans le panneau de vos calques. Si vous ne pouvez pas voir les couches, il se peut que vous soyez sur des ressources. Double-cliquez dessus et nous l' appellerons la page marketing oblique de la page d'accueil. Nous en voulons un autre, pour que vous puissiez revenir à votre outil de cadre, cliquer à nouveau sur iPhone 8, vous en obtenez un autre et continuez tout simplement à travers. Nous n'allons pas faire beaucoup de raccourcis dans ce cours, mais nous allons devoir en apprendre quelques-uns. Le premier sera la barre d'espace, alors maintenez la barre d'espace enfoncée. C'est assez courant dans de nombreux programmes de conception et cliquez sur maintenir et faire glisser. Je vais le nommer ici. N'oubliez pas que notre flux de tâches est la page marketing, puis les détails du produit. Un autre raccourci que nous utilisons beaucoup est Vous pouvez simplement copier et coller ces cadres, alors cliquez simplement sur le nom Commande C sur un Mac ou Control C sur un PC, puis V. Donc, Commande V, nous en avons un autre. Contrôlez V sur un PC, à vous de décider. Je ne dis pas de raccourcis. Ensuite, je commence par beaucoup de raccourcis. Disons maintenant quatre pages pour que notre tâche, comme je l'ai dit, nous faisons cette partie des détails. Qu'y avait-il d'autre ? Il s'agissait d'un retrait et d'un copier-coller, barre d'espace, de cliquer et de glisser. Nous allons faire notre confirmation. Dans le même document, il n'y a aucune raison pour que vous ne puissiez pas y aller maintenant, je veux ma version de bureau. Je vais cliquer sur le cadre. Je vais dire tablettes et je vais dire que nous allons concevoir pour l'iPad Pro 12 parce que c'est celui que je possède. Ici, paysage, portrait. Barre d'espace sur le paysage, le portrait. Vous pouvez les enlever. Je vais cliquer sur le nom. Vous faites glisser le nom, la barre d'espace, faites glisser le nom, vous pouvez dire copier, coller et faire la même chose. Nous allons avoir la page d'accueil, détails du produit, de même que les versions de bureau. Je vais vite ici parce que nous allons les supprimer pour que vous n'ayez pas besoin de le faire. Peut-être s'entraîner à jouer avec ça. Vous voyez l'iPad Pro pour le moment, vous pouvez cliquer sur ce cadre et dire maintenant que vous êtes un bureau standard normal. C'est une très bonne taille de bureau. Très courant et générique. Maintenant, zoomez avant et arrière. Commande sur un Mac, Contrôler sur un PC et est-ce les touches plus et moins. s'agit principalement de différentes façons de faire beaucoup de choses ici à Figma. Je vais vous donner une façon que je pense être la plus facile à votre niveau ou juste la meilleure façon générique. Si vous trouvez un autre moyen et que vous êtes horrifié. Je n'utilise pas l'option de maintien, maintenez la touche Commande enfoncée et j'utilise ma molette de défilement, c'est ce que je peux faire. Pour effectuer un zoom avant et arrière, vous pouvez le faire, c'est très bien. Ce que je veux que vous fassiez pour ce cours, c'est que je vais sélectionner tous ces éléments et j'utilise simplement cet outil. Il est par défaut à chaque fois, donc vous n'avez pas vraiment besoin de le choisir autant. Je vais juste le supprimer. C'est là que je veux que tu sois à la fin de tout ça. Si Tu finis au milieu de nulle part, j'ai zoomé au milieu de nulle part. Je vais effectuer un zoom arrière, utiliser ma barre d'espace, la placer au milieu, puis zoomer. C'est ce que je veux que tu ailles. Je ne veux que quatre vieux cadres ennuyeux et je veux que tu les nommes tous. La dernière chose que je veux Vous montrer, commencer à m' habituer à Figma, c'est de nommer votre fichier. Juste pour que tu saches, tu vas finir avec beaucoup de documents sans titre et ça arrive. Je ne sais pas, ce programme adore avoir des documents sans titre et nous allons donc être très précis et les nommer. Si nous cliquons en arrière-plan ici, pouvez-vous voir ce qui apparaît là-haut. Si vous avez sélectionné quelque chose, il disparaît. N'avez rien sélectionné, cliquez sur no mans land et vous pouvez cliquer ici et vous pouvez lui donner un nom. Vous avez déjà bien compris votre mémoire, donc le mien est Scott. Le vôtre va être différent. Mais nous allons tous appeler notre Ecom V1. Vous choisissez le nom de votre entreprise et mettez Ecom V1. Notre Ecom est la version 1. Au lieu de V1, juste quelque chose. A, B, C, 1, 2, 3, peu importe. Tant que vous n'êtes pas une personne finale, finale, revisitée finale, finale. Si tu rires, tu sais de quoi je parle. Je vous parle, donnez-lui quelques numéros de version. Il y a plus tard quelques fonctionnalités intéressantes pour la gestion des versions dans le document, mais c'est plus tard. Une autre chose est que si vous avez un tas de sans titre, vous pouvez. Je veux explorer cette petite maison ou retourner dans la petite maison. N'oubliez pas, assurez-vous d'être à votre petit nom ici et pas de communauté. Ce que vous remarquerez, c'est qu'il est là en bas Ecom 1. Si vous avez déjà beaucoup de sans titre. J'ai prévu de sortir le mien, vous pouvez cliquer avec le bouton droit de la souris et aller à renommer et simplement le faire là ou les ouvrir et faire ce que nous venons de faire. Retournez à cet onglet, revenez à la maison, continuez à pratiquer cela. La base d'accueil dans notre travail est un peu comme un navigateur. Très bien, c'est notre configuration de base. Ce sont des cadres, le tout s'appelle un fichier de conception. Les cadres ont d'autres paramètres sournois dont nous parlerons plus tard dans le cours, mais pour le moment, considérez-les sur les pages. Bien en haut, mais ils les appellent cadres. À la prochaine vidéo. 9. Les bases de la police dans Figma: Bonjour à tous ? Peut-être allons-nous arrêter de faire des choses dans Figma maintenant. Ce que je vais faire au cours des prochaines vidéos, c'est que je vais présenter des choses comme le type dans celle-ci et la prochaine sera comme des cercles, des boutons et des couleurs, et juste les choses dont nous avons besoin pour aller de l'avant. Je vais juste les toucher, et tout au long du cours, nous allons approfondir les choses plutôt que d' essayer de cliquer sur tous les boutons pour taper cette vidéo, nous allons obtenir toutes les bases et quand approprié tout au long du plus cool plongera un peu plus profondément dans eux. Commençons. Dans cette vidéo, nous allons regarder le type et les différentes bizarreries de Figma. Commençons par l'outil de type, il est écrit lettre t ici. Si vous survolez des choses, est-ce que vous voyez le texte et le raccourci est t sur mon clavier, donc je peux taper t sur mon clavier. Je ne vais pas parcourir les raccourcis. Mais s'il y en a un que j'utilise beaucoup, survolez et cela devrait vous dire de quoi il s'agit. voir si j'ajoute un commentaire. Nous avons deux types de zones de texte, vous cliquez une fois et vous pouvez taper éternellement. C'est celui-ci ici, il s'appelle A ou une boîte de largeur parce que je le sais [inaudible]. L'autre type de zone que vous allez créer est une zone de clic et de glissement. Saisissez l'outil de type cliquez et faites-le glisser vers l'extérieur. S'agit-il d'un clic une fois que vous cliquez et faites-le glisser, nous obtenons cette option ici, qui est la zone de taille fixe. Celui-ci signifie simplement que lorsque j'arriverai à la fin, il se brisera. Nous utiliserons ces deux éléments dans ce cours, en particulier pour ce filaire. Je vais annuler, si vous ne le savez pas, c' est annuler si vous utilisez la version du navigateur, c'est ici, c'est annuler. Encore une fois, vous verrez le raccourci correspondant, l'annulation, la réinitialisation. Nous allons faire deux choses, nous allons faire la largeur automatique, alors tapez outil, alors tapez outil, cliquez une fois et tapez simplement le nom de votre marque. Le mien est un casque Scott. Lorsque vous avez fini, vous pouvez simplement cliquer sur ce no man's land, et vous pouvez le déplacer et les trucs et saisir à nouveau l'outil de type et faisons une boîte à propos de cette taille, et nous allons taper notre message marketing. Il suffit de taper quelque chose comme celui-ci est notre message marketing. Cela dépend de la personne pour laquelle vous travaillez. Il est préférable de garder tout ce qui est très générique, essayer de ne pas utiliser de langage, marketing parle ici parce que vous pouvez envoyer des tests et au lieu de tester le flux, ils pourraient finir par tester, et je reviendrai avec des erreurs d'orthographe ou cela pourrait être controversé au sujet du message marketing. Ce n'est pas juste. Passons au copywriting. Pour le moment, nous allons simplement tout garder aussi simple que possible pour supprimer toutes les variables pour nos tests, juste pour que nous soyons concentrés. Maintenant, vous pouvez les changer plus tard. Disons que celui-ci ici, nous voulons en faire une largeur automatique, pour que nous puissions cliquer dessus ici, de même que celui-ci. Nous pouvons en faire une boîte fixe et la différence maintenant c'est que nous voulons simplement commencer à taper, sortir de la boîte et sa largeur est fixe. Vous pouvez les modifier plus tard. Je vais cliquer sur Annuler plusieurs fois. J'utilise mon raccourci Command Z sur un Mac, Control Z sur un PC. annulés ne sont pas aussi cohérents que vous l'imaginez dans d'autres programmes. Pouvez-vous voir l'annulation, n'ai pas remis mon rectangle à la grande taille, ça annule mon type mais il ne fait pas ce grand rectangle. C'est assez courant dans Figma. Parfois, vous pouvez dessiner une flèche, changer la pointe de flèche, appuyer sur Annuler et cela laisse la pointe de flèche là. Cela peut changer avec le temps, mais ce n'est qu'une de ces bizarreries à propos de Figma. Parfois, si vous cliquez sur Annuler, il décide de ne pas toujours faire ce que vous demandez et en raconte des morceaux. Ce que j'ai, c'est que je l'ai sélectionné avec mon outil de sélection, je me suis assuré qu'il est de taille fixe et je vais le faire glisser pour qu'il soit un peu plus grand, car ce que j'aimerais qu'il fasse, c'est que je vais jouer avec les bases ici. Examinons la taille de la police et les bases, plutôt que d'entendre. Je ne vais pas les couvrir tous parce que vous savez comment aller taille de la police est un peu déroulante, regardez ça. Allez à quelque chose de beau et de grand, vous devrez peut-être sélectionner vos prises d'abord et double-cliquez dessus, mettez-le en surbrillance et dites ici je vais le rendre beau et grand. Parce qu'il s'agit d'une boîte fixe, elle va se briser sur les côtés et laisser la ligne sainte. Vous savez toutes sortes de choses. Une chose que je vais vous montrer, c'est que laissez dire les choses, si vous survolez cette petite icône, il y a la hauteur de la ligne, mais vous pouvez les cliquer et les faire glisser dans les icônes, donc je vais annuler cela. Défaites encore là, c'est parti. Si vous voyez la petite icône, par ici, elle ne peut pas être glissée. Ici, sur n'importe laquelle de ces petites icônes, vous pouvez cliquer sur « Maintenir » et « Glisser ». J'ai tendance à le faire beaucoup, quand je travaille et que vous me verrez tout au long du parcours, faisant glisser la hauteur de ligne, le suivi et le méta espacement, etc. C'est une petite astuce. Celui que je fais un peu est, et disons que ce n'est pas possible, ce qui était le cas, mais si vous cliquez ici et que vous voyez mon petit curseur clignoter, si j'appuie sur la touche fléchée de mon clavier, juste le [inaudible] vers le bas de la Peur, utilisez le haut et le bas. Si vous tenez « Shift », il monte et de gros morceaux et boîtes de boîtes de conserve. C'est vrai pour toutes les cases ici, si je veux que la largeur soit un peu plus large, de haut en bas, nous maintenons « Shift », monterons en gros morceaux et je rends la largeur de cette zone de texte plus grande, détruisant mes boîtes. Mais pour les polices, je l'utilise un peu, juste en montant et en bas, je regarde mon bureau, je ne regarde pas vraiment ici, je vérifie, est-ce une bonne taille de police ? La taille de police n'est pas bonne. Maintenant, quand il s'agit de polices ici, vous utilisez quelques éléments. Nous choisissons des tailles de police maintenant, et vous devez vraiment être à 100 % pour le moment où nous sommes à 86, vous avez peut-être 100, mais si vous choisissez la taille de police, vous aimez « C'est trop petit ». Vous allez essayer de choisir une taille de police avec empattement à 100 %. Vous ne voulez pas essayer de choisir une taille de police lorsque vous effectuez un zoom arrière, car vous pouvez la rendre trop grande. Parce que cela va se faire sur un appareil mobile, il s'agit d'un site Web mobile, ce n'est pas une application, mais elle ne sera consultée via un site Web mobile qu'à cette hauteur. Il est préférable de choisir les tailles de police sur votre téléphone. Je vous montrerai un peu plus tard dans le cours, pas trop loin, nous pouvons en fait tout prévisualiser sur un appareil. Donc, vous ne passez pas trop de temps à décider qui était-ce 12 ? Devrait-il être 16 ans ? 14 ? En fait, mettez-le sur les extrémités de l'appareil. La dernière chose que je souhaite partager avec vous lorsque vous êtes à ce stade de sélection de polices, en particulier pour une image filaire, c'est que je veux que vous choisissiez une police non, une police sans caractère. Je me sens mal parce que c'est Roboto. Désolé Roboto, vous n'avez aucun caractère. N'allons pas brosser le script, ou même si c'est une belle police et c'est excitant. Nous voulons des polices vraiment simples ici parce que lorsque nous effectuons un test et que nous voulons que les commentaires ne soient pas « Hé, je n'aime pas cette police ou ça ne communique pas. » Nous ne voulons pas intégrer cela dans la conversation, nous voulons que tout soit séparé et que cela soit très, très simple. Il serait très courant d'utiliser quelque chose comme Roboto ou Open Sans. Jetons un coup d'œil à Open Sans et à une autre sauce Source Sans. Vous pouvez le dire. Ce ne sont pas les gars que vous invitez à la fête. Ils ont peu de personnalité, aussi claire que ça, ils sont professionnels et parfaits pour un filaire, mais pas de script de pinceau. Quoi que vous décidiez, choisissez-en un, nous allons utiliser Roboto pour cela car c'est le plus générique d'entre eux, il y a beaucoup de blancs avec lesquels vous pouvez souvent jouer. Si vous n'avez pas Roboto, vous pouvez le trouver en ligne, le télécharger et c' est assez courant partout, et c'est gratuit. Vous pouvez utiliser Arial ou Calibri ou tout ce que vous souhaitez utiliser. En fait, aucun moyen d'utiliser Arial Calibri, c'est pour Microsoft et très bien. Nous avons choisi une police non, nous allons lancer quelques choses différentes pour notre maquette. Nous avons aussi comment et pour notre logo, nous allons simplement rester super simple et si votre entreprise a déjà une marque, c'est probablement une gorge appropriée en noir et blanc. Parce que la marque n'est pas encore développée pour cette entreprise, et nous allons simplement rester très simple. Je vais jouer avec des polices de caractères. Maintenant, c'est là que j'enfreins toutes mes propres règles comme : « Hé, ne choisissez pas une police qui a du caractère, restez à l'écart. Alors, vous ne pouvez pas vous avoir. J'ai l'impression que « Cette pose est vraiment grande. » Si vous voulez que la pose revienne à zéro, supprimez-la et appuyez sur « Entrée », et elle revient à [inaudible]. Même dans ce cas, vous vous dites : « Je vais juste le faire, c'est juste un peu ici. Je ne peux pas m'en empêcher moi-même. » Vous faites ce que je dis, ne faites pas ce que je fais. Ne jouez pas avec l'espacement des lettres et des trucs et faites en sorte que vos boucles filaires soient bonnes. Faire en sorte qu'une image filaire soit vraiment belle. C'est difficile d'arrêter ça, on peut faire un peu de design. Nous avons besoin de quelques éléments, donc nous allons le conserver et nous allons copier , coller et utiliser à nouveau. C'est devenu bizarre. Lorsque vous copiez et collez, avez-vous remarqué qu'il n'y en a qu'un seul maintenant ? Si je copie et que je colle dans Figma, ça revient en haut. Il y en a deux juste au-dessus, donc c'est bizarre, mais ça marche. Nous allons avoir un bouton Acheter maintenant. À l'heure actuelle. Maintenant, je finis par dupliquer au lieu de copier-coller, vous pouvez ou non le faire sur un Mac, vous maintenez la touche option enfoncée, vous voyez une petite flèche. C'est un peu double là-bas. Sur un PC, c'est votre clé d'option. Si vous le faites avant de commencer à faire glisser, sélectionnez Outil, maintenez cette touche Option ou Alt enfoncée, faites-la glisser vers l'extérieur et vous tombez malade [inaudible]. Figma est vraiment douée pour aligner les choses, voyez-vous, oh, si pratique. Vous avez un achat maintenant et en savoir plus. Nous allons être saints pour celui-là. J'en ai besoin d'un autre ici. Ce sera ma photo de produit. Je pense que c'est tout ce que nous allons faire pour cette maquette particulière. Nous aborderons un peu plus de détails plus tard, mais si vous voyez cette petite ligne pointillée ici, c'est là que vous entrez là-dedans. C'est assez incroyable à quel point il va en profondeur. Si vous êtes un designer qui aime un peu les ligatures et toutes les choses incroyables, vous pouvez voir l'alignement, pas si excitant. La décoration souligne la barrée n'est rien. Il y a beaucoup de points à puces ici, vous pouvez commencer à faire des majuscules, des minuscules, je ne les couvrirai pas tous. Nous allons regarder des petits morceaux tout au long du parcours, mais son plus vieux, si vous voulez vraiment entrer dans les décors stylistiques et les hommes, il devient profond. La plupart sont juste assis ici dans votre bon menu. Ils l'appellent bien écrire des panneaux, parfois ils l'appellent inspecteur des propriétés. Ce truc ici à droite. Vous pouvez en obtenir la majeure partie ici, cette petite ligne pointillée vous apporte encore beaucoup plus. Nous avons fait quelque chose, un tas de textes ennuyeux. Passons à la vidéo suivante et créons des rectangles et des boutons ennuyeux. Je vous verrai dans la prochaine vidéo. 10. Rectangles, boutons ronds et coins arrondis dans Figma: Bonjour à tous. Cette vidéo nous allons dessiner des rectangles, des cercles et des coins arrondis. C'est très excitant. Allons-y. Mettons tout d'abord notre photo de produit, nous allons le placer dans une image réservée pour cela. Je vais utiliser mon outil de sélection, il suffit de cliquer et de les faire glisser sur un tas d'entre eux, puis je peux le faire glisser vers le bas, donc j'ai un peu d'espace. Prenons l'outil Rectangle. C'est l'un de ceux pour lesquels vous apprendrez probablement le raccourci, et ils se cachent tous ici, voient des lignes de rectangle, toutes les formes de base. Quant à l'outil rectangle, ce qui est logique. Je vais cliquer sur « Maintenir » et le faire glisser vers l'extérieur, et vous obtiendrez la grande boîte grise, et vous remarquerez que notre texte a disparu. Cela nous amène à la superposition. Par ici, si vous ne pouvez pas le voir, vous pourriez être sur des actifs. Allez dans les calques. Vous verrez. C'est mon cadre de page d'accueil, et à l'intérieur, il y a toutes ces choses différentes. Toutes les différentes prises d'édition. Maintenant, nous avons un rectangle, mais il est en haut. Nous pouvons faire deux ou trois choses. Cliquez avec le bouton droit de la souris et dites : « Envoyer en arrière s'il vous plaît ». et c'est juste ce raccourci. Vous apprendrez cela un peu aussi. Apprenez les différents raccourcis à votre niveau, vous êtes peut-être prêt à recevoir des raccourcis, peut-être pas, vous risquez de paniquer. Il suffit de cliquer avec le bouton droit de la souris et de dire envoyer à l'arrière, ou je veux que vous vous entraîniez. Je l'ai défait. Vous voyez ici ? Je peux faire glisser ça comme [inaudible] Photoshop. Je le tiens, je le traîne, maintenant c'est au fond de tous ces gars, et je peux le voir, facilement. Je vais le défaire et vous montrer une autre façon douloureuse, principalement parce qu'il y a beaucoup de façons de tout faire dans Figma. Je vais vous montrer la façon dont je pense que c'est le plus logique pour votre niveau, et ce qui est vraiment commun et utile, mais si vous trouvez une autre façon, et que vous êtes genre, « Hé, pourquoi ne nous a-t-il pas montré ainsi ? Cela semble mieux. » Si vous le trouvez et que vous l'aimez, vous pouvez le faire. Mais voyons celui-ci ici, vous voyez ce petit menu Figma ici ? Si vous êtes sur un Mac, vous avez ce bout en haut ici, qui est exactement le même que l'édition, ou est-ce organisé. Vous pouvez simplement voir comment. Non, je ne veux pas d'objet Range. C'est là, là. Vous pouvez voir à quel point j'utilise ce menu, pas très souvent. Sur un Mac, vous les verrez en haut, et ils correspondront. Vous déposez, ce fichier, éditez, cette modification. Souvent, j'utilise ceux-ci en haut ici, mais je sais que si vous utilisez la version du navigateur, elles ne sont pas présentes sur un PC, elles ne sont pas là, elles sont exactement les mêmes. Je vais essayer de me rappeler tout au long de ce cours que je vais aller à l'objection, l'envoyer à l'envers. Mais vous découvrirez peut-être dans ce cours que Dan va monter en haut ici, et vous vous dites : « Hé, je n'ai pas ça. » C'est là qu'il est là. Je vais aller à l'objet, renvoyer à l'arrière. Oui. Il y a plein de façons de faire la même chose. Mettons ça au milieu, là. Vous remarquerez que Figma veut tout simplement naturellement aller au centre des choses, au centre des boîtes, au centre des tableaux d'application, ou simplement à la faire glisser. Vous n'avez pas à faire beaucoup. Il y a les arrangements complets le long du haut ici, arrangés au centre, disposés à gauche, mais souvent, le simple fait de le glisser autour se fait parfaitement bien. Allons faire nos boutons en bas ici. Je vais zoomer sur Command Plus ou Control Plus sur un PC, puis maintenir ma touche de barre d'espace enfoncée, puis cliquer et faire glisser. Après l'outil Rectangle ou montez simplement là-haut, faites-le glisser. Nous savons qu'il est au top. Vous pouvez le faire glisser ici. Quel est le raccourci ? C'est un test. Quel est le raccourci pour aller jusqu'au fond ? C'est ce support carré, à côté de P sur votre clavier. Le voilà, en bas, en haut, l'autre, en bas, en haut, en bas. J'ai ce bouton. Je vais maintenir ma touche Option enfoncée et en faire glisser une autre. Vous devrez peut-être redimensionner cela. Je veux passer aux coins arrondis, car quand je dis ne pas, quoi que vous fassiez, ne concevez pas cette chose. C'est difficile parce que vous me dites : « Je voulais des coins arrondis, vous n'êtes pas le patron de moi Dan, je vais faire quelques petits choix de design. » Lorsque le rectangle est sélectionné, vous remarquerez peut-être ces petits points. Si vous ne voyez pas ces petits points, si je zoome tout de suite moins, vous voyez qu'ils disparaissent. Ces petits points sur les coins aident à arrondir les coins. Si vous ne pouvez pas les voir, continuez simplement à zoomer. Ecoutez, je ne peux toujours pas les voir. Ou sont-ils là ? Oui, ils sont là. Zoom arrière. Il y a un niveau, vous regardez là, ils ne sont pas là. Zoomez encore une fois, je peux les attraper et les faire glisser. là que tu y vas. Jolis coins arrondis. Vous pouvez le faire. Je vais aller zoomer jusqu'à 100 %. Le raccourci est, où est-il ? C'est le long chemin, à 100 %. Voir ce Shift. Cette petite flèche est Maj. Je suis toujours comme, regardez celui-là, surtout sur un Mac, je me suis dit, quel est ce type. Je dois regarder mon clavier, heureusement il est écrit dessus. Vous penseriez que je le saurais. Mais donc Shift 0, en haut, il va à 100 pour cent parce que c'est probablement un meilleur endroit pour concevoir coins arrondis parce que vous êtes comme ça que ça va ressembler. Si je le fais ici, je peux le faire ici, dans mon inspecteur immobilier ici, dans ce panneau droit. Je peux dire que nous allons essayer, ajouter en utilisant mes touches fléchées. Rappelez-vous que le raccourci sucré vers le haut, oh, a un autre, fracassant vers le haut, vers le bas. Je vais juste mettre dans des coins arrondis, cinq. C'est pratique parce que vous pouvez obtenir de la cohérence, donc comme l'autre, allez cinq fois. Cliquez sur celui-ci. Nous allons avoir cinq coins arrondis. Regardez-moi ça. Parce que nous faisons des coins arrondis, ce n'est pas approprié pour le moment. Mais si je clique dessus, suffisamment zoomé, pour que je puisse voir ce rayon, vous pouvez en fait maintenir la touche Option enfoncée sur un Mac, touche Alt sur un PC et simplement cliquer sur l'un d'eux et passer [inaudible]. Regardez-moi ça. Défaites-le parce que nous n'en avons pas besoin pour le moment. Mais vous avez probablement eu cette question comme si je peux en faire une seule ? Vous pouvez simplement maintenir la touche Option enfoncée sur un Mac, touche Alt sur un PC, puis cliquez dessus et faites-la glisser. C'est là que tu y vas. Avant de partir, ajoutons ici un petit cercle en bas. L'outil cercle, l'ellipse est un O. Je vais le faire glisser vers l'extérieur. Une autre chose que je n'ai pas encore complètement couverte, si vous voulez qu'elle soit complètement circulaire ou carrée, maintenez la touche Maj enfoncée pendant que vous faites glisser. Regardez ceci, je vais revenir à mon outil Cercle, et avant de commencer à faire glisser, et avant de commencer à faire glisser, maintenez la touche Maj enfoncée, faites-la glisser vers l'extérieur et vous voyez un cercle parfait. Si je le lâche, ellipse ou ovale. Revenons à tenir Shift, je vais contourner ça. Pour le moment, je vais le poser ici, je vais prendre mon outil de type et cliquer une fois. Je vais toucher mon plus, et je vais choisir une taille de police appropriée. Maintenant avec type. Je veux le déplacer, et il va juste le sélectionner. Je clique en arrière-plan, puis je le fais glisser là où vous le souhaitez. La taille de la police, ici, j'utilise ma flèche vers le haut pour l'obtenir à la taille que je veux. L'audace est bizarre pour ça. On y va. Ce sera suffisant pour cette vidéo. Cercles, excitants, rectangles. Oh, un petit bonus pour les cercles. Cellule allait le faire plus tard, mais regardez ça. Vous voyez ce cercle ? Que fait cette chose ? Vous l'avez probablement déjà traîné, vous êtes prêt ? Absolument inutile. ai jamais utilisé. Je vois que je suis comme, oui, un graphique à barres et je n'ai pas encore moqué un graphique à secteurs. C'est ce que fait cette chose. Quoi qu'il en soit, passons à la vidéo suivante. 11. Comment utiliser la couleur dans Figma: J'espère que vous êtes assis. Cette vidéo, nous allons regarder la couleur. Vous êtes prêt ? Stable ? Boom. Il est vert et noir. Je sais que ce n'est pas très excitant. Je vais essayer de vous convaincre que vous n'avez pas besoin de beaucoup de couleurs quand il s'agit de vos cadres filaires, vous devriez probablement le laisser gris, mais bon, nous apprenons la couleur dans cette vidéo. Allons-y et je vais vous montrer ce que vous devez savoir. Pour travailler avec la couleur et sélectionner quelque chose. Nous allons utiliser ce grand rectangle ici comme couleur par défaut pour Figma, si vous venez de cliquer dessus. Maintenant, remplissez, cliquez dessus une fois et vous obtenez ce petit gars. Si vous n'avez jamais utilisé de sélecteur de couleurs auparavant, ce petit point où se trouve notre couleur, vous pouvez cliquer dessus et le faire glisser. Pour le moment, vous ne pouvez choisir que le rouge. Pour le changer, ce petit curseur de teinte ici, faites-le glisser jusqu'à la zone que vous voulez qu'elle soit. Je vais choisir quelque chose et ensuite déplacer ça pour obtenir cette saturation complète, pas de lumière de saturation quelque part là-dedans. D'autres choses que vous devriez savoir ici si vous voulez un blanc complet, il suffit de cliquer, de le faire glisser et de le faire glisser comme le passé, continuez et il sera entièrement blanc. L'un ou l'autre de ces sombres en bas, je vais être le même. Blanc, noir, celui-ci est noir, peu importe et je vais choisir une sorte de couleur verte. Vous pouvez le choisir dans la marque ou simplement choisir bleu clair est probablement la couleur de cadre métallique la plus courante. C'est la valeur par défaut et [inaudible] quelques autres, donc vous finissez par voir ce truc bleu furtif tout au long. Je vais choisir une vision légèrement plus verte. Vous choisissez tout ce que vous voulez. D'autres choses à savoir sur la couleur, c'est la transparence en bas ici, vous pouvez rendre les choses légèrement transparentes, qui n'a aucun sens, ce qui n'a aucun sens, à moins que je n'apporte tout cela à l'avant, j'utilise mon support carré. Vous pouvez voir qu'il couvre les choses avec un peu de transparence. En fait, je vais changer le fait qu'ils sont à 100 %. Peu importe que vous le fassiez ici. Vous pouvez voir que le 100 pour cent ou vous tapez simplement ici et vous dites que je veux qu'il soit 50, bien même encore, vous pouvez utiliser vos flèches haut et bas pour parcourir tout cela. Je veux que le mien soit un 100, parfait. Si vous êtes un peu plus un nerd des couleurs, alors vous serez peut-être comme moi. Nombres hexadécimaux. C'est la version de Wib d'une couleur. Vous n'aimerez peut-être pas ça, vous pourriez aimer les visions RVB, voilà c'est RGBA pour que vous puissiez voir une transparence à la fin, rouge, vert, bleu. Vous mélangez peut-être des couleurs d'un manuel de discours d'entreprise ou quelque chose d'autre et d'autres coloris, CSS. Si vous êtes développeur, vous travaillez peut-être de cette façon. Couleurs RGBA et tapez-les ici. Luminance de saturation de teinte, je l'utilise pas mal. Luminosité de saturation de teinte. Est-ce que je le fais vraiment ici ? Probablement pas dans ce programme très souvent. Je fais beaucoup de choses comme Premiere et Illustrator, mais pas ici dans Figma. Je vais m'en tenir au nombre hexadécimal. Je voudrais également souligner la pipette. Nous avons donc ça ici. Je veux voler cette couleur, alors je la sélectionne, je vais à ma couleur de remplissage, je clique sur la petite pipette. Vous voyez ici ? Il y a comme une version zoomée et regarde ça, je peux le déplacer. Vous voyez simplement des zooms avant sur les choses, c'était assez facile car nous pouvons choisir ce grand rectangle, mais parfois vous voulez simplement choisir un tout petit bout de couleur. Ce sera un gris bizarre. Pipette, je vais cliquer dessus. en va de même pour ce type. Vous, pipette, vous. Maintenant, pour atteindre les yeux, très souvent, je n'irai pas dans le sélecteur de couleurs pour le faire donc je vais me défaire pour récupérer mes gris. Je le sélectionne. Il y a le raccourci pour pipette, comme moi, pas E-Y-E, la lettre I. C'est un raccourci. Sélectionnez-le, appuyez sur la pipette, cliquez dessus. Il y a beaucoup de choses qui se passent. Comme vous le voulez, obtenez cette couleur de la même couleur pour moi et soyez résilient. N'essayez pas d'ajouter un tas de couleurs. Gardez ça juste du noir, des gris, blancs et des collèges jusqu'à six fois un tout petit peu. Lorsque vous commencez à y ajouter des palettes de couleurs, vous commencez à saisir à nouveau différentes parties de la conversation sur suivante  : « Est-ce la bonne couleur ? Est-ce la bonne couleur de marque ? » Il suffit de le garder générique, de le garder gris et personne ne va se plaindre. Ici, pouvez-vous voir les couleurs du document ? Vous dites : « Super, ce sont les couleurs que j'ai déjà utilisées. » Mais cela devient fou et trop utile. C'est très bien pour le moment parce que vous vous dites : « Ok, je veux revenir à ce gris que nous avions auparavant. » C'est là, quelque chose qui est utilisé ou « Il y a ce vert, était-ce le vert ? C'est le même vert. » Plus tard, nous allons examiner cela et nous allons regarder les couleurs de la bibliothèque de l'équipe. C'est plus tard dans le document, de plus, nous allons examiner quelque chose appelé styles de couleurs dans un avenir pas trop lointain, où nous allons tout ranger et devenir un peu plus cohérent. Mais les couleurs du document partageront tout ce qui est utilisé dans ce document, donc il devient un peu fou, mais c'est ce qu'elles sont. C'est la base des couleurs. Passons dans la vidéo suivante. En fait, nous n'allons nulle part. Ça te rend fou, ça me rend fou. Vous ne pouvez pas le faire alors. Nous allons faire quelques boutons réactifs plus tard. Mais pour le moment, je ne peux pas vivre avec ça, besoin d'être plus grand et ça doit être plus au centre. Une des choses que je veux vous montrer, un petit raccourci peut être utile, c'est parce que vous voulez l'agrandir des deux côtés, vous pouvez maintenir enfoncée la touche « Option » sur un Mac, la touche « Alt » sur un PC. Lorsque vous scannez des choses au lieu de simplement faire glisser les bords, puis d'essayer de les déplacer. Si vous maintenez la touche « Option » enfoncée sur un Mac, touche « Alt » sur un PC, et que vous le faites des deux côtés et que vous vous dites : « C'est mieux ». Nous pouvons maintenant passer à la vidéo suivante. Est-ce que c'est même au milieu ? Oui. Arrangez le regard, c'est mieux. Faisons la même chose pour celui-ci. Je dois le remplacer par celui-là. Certains d'entre vous vous disent : « Pourquoi s'en soucie-t-il autant ? » Alors certains d'entre vous se diront : « Mon Dieu, enfin. Il a réparé le bouton et va-t-il un jour se débarrasser de l'arrêt complet ? » Il n'est pas correctement aligné, n'est-ce pas ? Quoi qu'il en soit, passons maintenant à la vidéo suivante. 12. Traits et mise à jour des paramètres de couleur dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons regarder les accidents vasculaires cérébraux. Les coups autour de l'extérieur, c'est la ligne autour de l'extérieur ici. Nous examinerons les menus de hamburgers, qui ne sont qu'un groupe de lignes. Mais nous allons également regarder les extrémités ici. Pouvez-vous voir ces belles petites lignes arrondies au lieu de cette grande extrémité plate sur le pouce ? Nous chercherons à définir certaines des valeurs par défaut selon lesquelles chaque fois que nous dessinons quelque chose comme un rectangle, il est assis aux coins arrondis, au trait que nous aimons et à la couleur que nous aimons. Il y a quelques éléments que nous abordons dans cette vidéo. Allons-y. Faisons notre AVC. Nous allons cliquer sur le rectangle. Le trait est celui-ci ici, par défaut, vous obtenez un remplissage, obtenez un trait. Pour ajouter un trait, appuyez sur le petit bouton Plus. Nous avons un coup noir autour de l'extérieur. La largeur du trait, on peut faire glisser. Je vais en mettre deux pour le mien. Vous devez avoir un accident vasculaire cérébral autour des trucs ? Vous ne le savez pas, mais nous apprenons des choses. La seule chose qui vous ennuiera plus tard, c'est que si vous avez comme un style, vous avez décidé que ce vert avec ce trait à l'extérieur, vous êtes comme, d'accord. Je vais en dessiner un autre sur ce produit, les détails ici. À partir d'un outil rectangulaire, vous êtes comme si c'est gris. C'est encore gris. Il n'y a pas de trait ni de coins arrondis, et vous êtes comme, d'accord, donc je vais aller ici, et je vais le changer à cinq et devenir un peu fou en essayant d'obtenir l'outil pipette. Ce que vous pouvez faire, c'est que vous pouvez en arriver à un point. Tu es comme, en fait, j'aime bien ça. J'aime mes coins arrondis, j'aime mon vert, j'aime mon coup. Je peux le modifier par défaut. Allons sur notre petite icône Figma ici et passons à Edit. Il y a celui-là qui indique définir les propriétés par défaut. Rien ne se passe vraiment, sauf que ce mot apparaît. Mais maintenant, je clique dessus, attrape mon outil rectangle, dessine quelque chose et je regarde ça. Vous avez un rectangle vert doux avec une doublure noire à l'extérieur et aux coins. C'est ainsi que vous définissez les valeurs par défaut, et je vais laisser ça. Parce qu'ils sont déjà dessinés dans le passé, je ne peux pas y aller, je veux que ça ressemble maintenant à ça. Nous n'avons pas de configuration de style, ce que nous ferons plus tard dans le cours. Ce que vous pouvez faire, c'est que vous pouvez cliquer sur ce type et dire : Modifier. Copiez ses propriétés. Ce sont ses propriétés ici. On va les copier et on peut cliquer sur lui. Peu importe la couleur que c'était, si nous allons dans Modifier, Coller les propriétés, cela arrive. On peut cliquer sur plus d'un, obtenir les deux rectangles. Allons dans Modifier, Coller les propriétés, voilà. C'est un accident vasculaire cérébral. Regardons un peu plus de coup. Nous allons ajouter un peu de tangente. Ils définissaient les valeurs par défaut, et regardons un petit menu de hamburgers en haut. Je vais zoomer, dans Command Plus, sur un Mac Control Plus sur un PC, et je vais me lever ici pour commencer au moins. Déposons le rectangle. suffit de cliquer dessus et de le maintenir enfoncé et il vous montrera d'autres choses. Permettez-moi d'utiliser l'outil de ligne. Je vais utiliser mon outil pour cliquer sur maintenir et faire glisser. Cela n'a pas fonctionné. Je ne sais pas pourquoi. Cliquez sur maintenir et faites glisser le curseur. Il va essayer d'être franc. Si ce n'est pas assez droit pour vous, maintenez la touche Maj enfoncée. La touche Maj fera quelque chose avec un outil de ligne. Rappelez-vous qu'il l'a fait avec l'outil cercle, il a fait un cercle parfait. Avec un outil de ligne, il suffit de le faire passer à environ 45 degrés, 90 degrés et droit. Je veux quelque chose d'aussi long. Ne vous inquiétez pas de combien de temps cela dure, nous allons le faire, puis nous allons passer à 100 % et le faire à la bonne taille. On va attraper ce type. Nous allons en avoir trois. Nous allons soit copier et coller. N'oubliez pas que le copier-coller a cette option bizarre, eh bien, ce n'est pas bizarre, mais c'est au-dessus de tout ça. N'oubliez pas que j'ai tendance à utiliser l'outil Sélection, maintenir ma touche Option enfoncée sur un Mac, touche Alt sur un PC et à faire glisser une autre version vers l'extérieur, ce qui veut vraiment aller en dessous, ce qui est génial. Je vais présenter un autre raccourci. Si ce type présente un autre raccourci ici, je vais crier. Fermez les yeux ou les oreilles. Je vais vous présenter le commandement D ou le contrôle D. Très commun dans Figma. Ça veut juste dire, refais-le. Dupliquer, refais-le. Comment voulez-vous l'appeler ? Donc, Commandement D. Nous allons faire la dernière chose que j'ai faite. Je peux passer aux commandes D, D, D, D. C'est génial lorsque vous faites comme des listes et des images et que vous en avez quatre. Vous voulez juste en faire un nouveau. Peu importe ce que vous faites. Disons que je veux un type et que je fais une liste, fais glisser, en maintenant ma touche Option sur un Mac, touche Alt sur une commande PC D, D, D, D, D ou Control D, D, D sur un PC. Vous pouvez maintenant ouvrir vos oreilles à des gens qui crient à propos de mes raccourcis. Avec ces lignes ici, vous êtes comme, quelle devrait être la taille de la navigation ? Le meilleur moyen consiste à copier un modèle existant. Je vais vous montrer quelques-uns des modèles que Figma possède. Mais si vous construisez vous-même des choses, en particulier des icônes, il est préférable de se rappeler que le décalage zéro ou à 100 % ici, sorte que vous ayez une bonne idée de la taille. Parce que si vous les avez comme ça, ils seront très difficiles à cliquer. Ou s'ils doivent être de grands jumbo, mais pas si amusant. Eh bien, ça n'a pas l'air de le faire. J'ai eu de la chance avec le mien. Je pense que les miens sont de taille appropriée ici. Ce que vous pouvez faire, c'est simplement faire glisser une boîte autour d'eux. Saisissez le coin et adaptez-les à ce que vous pensez qu'ils devraient ressentir. Ça me fait du bien. Je vais les placer dans une position appropriée pour la navigation. C'est ce que l'on appelle le menu du burger ou le sandwich nav. Cette chose que vous cliquez, qui vous donne une liste d'options, vraiment courantes en haut à droite, mais qui peut également apparaître en haut à gauche. Regardons un peu plus de bonté caresseuse. Je vais zoomer dessus parce que je veux que la petite bulle se termine. Ici, le poids de l'AVC dont nous avons parlé. Commençons par Endpoint. Ils font deux choses. Cliquez sur le premier. Vous pouvez mettre une flèche à la fin, c'est génial. Si je clique sur Annuler, ça ne disparaît pas. C'est peut-être juste sur ma machine. Je ne sais pas pourquoi. Annuler, annuler. C'est une de ces bizarreries. Je vais le laisser dans ce cours parce que c'est une bizarrerie bizarre. Est-ce que c'est juste sur mon ordinateur ? Non, je pense que c'est universel, mais il va probablement disparaître à l'avenir. C'est l'une de ces mises à jour où elle figure sur la liste des correctifs de bogues de certains développeurs. Ce n'est pas très important car je ne peux revenir à aucun. Mais mon annulation ne désactive pas ça. Nous sommes partis sur une tangente. Restons sur le point car je veux vous montrer ces trois options. Votre course en ce moment se termine juste à la fin. Pouvez-vous le voir là ? Le second, je vais faire ce coup a une extrémité arrondie et c'est le joli que je veux. Le coup s'arrête toujours là, mais il y a comme un petit rond, c'est un bouchon de fesse, c'est un bonnet rond, et ce sera une casquette carrée. Il y en a un ici. Regardez la différence entre ce haut et le bas. Le trait est de la même taille, en dessous, mais il s'agit d'une grosse casquette carrée à l'extrémité. Cela a malheureusement été nommé bouchon de cul et il y a une belle casquette ronde. C'est ce que je veux. Vous verrez beaucoup de choses mixtes si vous avez sélectionné des choses et qu'il ne sait pas quoi dire, au lieu de passer un point d'interrogation, je suis confus, c'est mitigé. Il y a toutes sortes de choses différentes, je vais dire que vous êtes tout autour, ce qui n'a fonctionné que partiellement. Nous allons aussi faire la fin. On y va. Qu'avons-nous appris ? Il y a des bizarreries à Figma comme l'annulation avec les flèches. Nous avons appris les accidents vasculaires cérébraux. La dernière chose que je veux faire, c'est avec des images, nous avons écrit des photos de produit, mais il est en fait plus courant de simplement dessiner la croix au milieu comme support pour une image. Je vais juste prendre mon outil de ligne et je vais passer de ce coin à ici. Ce coin. Vous devez revenir à l'outil à chaque fois. Allez-y. Ce serait vraiment courant de l'avoir. C'est un indice visuel indiquant qu'il y a une image à venir ici, mais elle n'est pas disponible pour le moment. L'autre chose que vous pourriez faire juste pendant que nous sommes sur le sujet est au lieu de ces lignes, je vais m'en débarrasser une seconde et les ramener, c'est que nous pouvons mettre comme une icône qui montre une image. Une icône est vraiment courante pour cela. Je vais vous le montrer. C'est dans vos dossiers d'exercices. Comment introduire une image ou une icône ? Il y a deux façons, et il y a celui-là. C'est bizarre. Sous votre outil rectangle, comme nous apportons également des images, je peux donc placer une image. Il y a le raccourci. Dans l'autre sens, c'est sous Figma. Vous pouvez accéder à Modifier le fichier, Placer l'image. Utilisez un peu le raccourci. Mais je vais apporter une image sous vos fichiers d'exercices et vos icônes. Apportez celui qui indique Icon-Image et cliquez sur Ouvrir. Avec cela, si vous apportez une image, vous cliquez une fois, elle apparaîtra à une taille gigantesque ou quelle que soit sa taille. Je vais annuler, revenir à mon image d'entrée. Retrouvez-les à nouveau. Vous pouvez cliquer et faire glisser le curseur, ce qui vous donne une taille plus appropriée. Ce que vous remarquerez, c'est qu'il l'écrase, ce qui me tue à l'intérieur. Ne laissez jamais votre icône comme ça. Maintenez la touche Maj enfoncée et déplacez-la vers l'extérieur. La même chose avec les lignes qui les font aller droit dans un rectangle parfaitement carré. Ce serait également très courant pour une image de lieu. Nous n'allons pas faire cela pour le moment. Ça ne me dérange pas. Je ne comprends pas vraiment. En fait, non, gardez les lignes là car nous allons regarder quelque chose dans la prochaine vidéo qui dépend de quelques lignes diagonales. C'est Strokes 101. Passons à la vidéo suivante. 13. Édition d'objets et échappement dans Figma: Bonjour, tout le monde. Je vais présenter brièvement le mode d'édition d'objets, ce genre de lignes rayées où vous êtes coincé actuellement. Vous êtes peut-être coincé ici en ce moment et vous ne savez pas comment vous échapper. Permettez-moi de vous montrer comment vous échapper et ce qui est réellement utile. Je veux le présenter au début du cours parce que si vous êtes un double-clic, vous y êtes probablement déjà allé par accident et je vais vous montrer comment vous en sortir. Je vais prendre mon outil rectangle, je vais juste dessiner quelque chose. Normalement, vous pouvez juste saisir les bords et vous êtes comme, ok, c'est comme ça que je veux. Mais si vous voulez dire : « Brisez le bord et déformez cela. » Vous double-cliquez. Il y a la façon officielle d'entrer ici. Je l'ai sélectionné. Écoutez, il y a la voie officielle. « Modifier l'objet » cliquez dessus et rien ne se passe vraiment, sauf que ce changement de menu supérieur est ce qui devrait commencer. Cliquez dessus et vous bénéficiez de ces fonctionnalités supplémentaires. Nous les couvrirons plus en détail lorsque nous commencerons à dessiner nos propres icônes, mais je veux vous faire échapper plus tôt dans le cours. Donc, la façon officielle d'y entrer, cliquez dessus. Ok, et ce que vous pouvez faire, c'est que vous pouvez saisir un coin et le faire glisser et vous êtes comme, je l'ai détruit ou manipulé. Vous pouvez également cliquer sur le centre et supprimer le centre de votre rectangle. Cliquez sur cette arête ici, supprimez la partie supérieure. C'est ce qu'est le mode d'édition d'objets. Il le brise de ce rectangle qui ne fait que rectangles et je vous montre ici parce que beaucoup de gens sont perdus ou coincés ici. Je vais donc défaire ça. Maintenant, la façon officielle de sortir, cliquons sur « Terminé ». Mais normalement, la plupart des gens font simplement un double-clic sur l'arrière-plan. Voie officielle, faites-le choisir, en dehors. De façon non officielle, double-cliquez dessus, double-cliquez sur l'arrière-plan pour sortir. Je devais supprimer cela, je n'en ai pas besoin. Je voulais juste vous montrer quel était le mode d'édition d'objets et comment sortir si vous étiez piégé. Très bien, sur la vidéo suivante. 14. Échelle et outil de sélection dans Figma: Examinons la mise à l'échelle par rapport à l'outil de sélection. Vous allez avoir besoin des deux et ils sont un peu rapides par rapport à d' autres programmes que j'ai utilisés et qui m'ont surpris au début. Alors, faisons-le ensemble. Avec mon outil de sélection, je vais simplement cliquer sur le rectangle. Je ne suis pas en mode d'édition d'objets, tu te souviens ? Tout ce que je veux faire, c'est que j'ai cet outil ici, l'outil par défaut. Je peux cliquer sur le bord et je peux le faire glisser. C'est comme ça que vous l'avez imaginé. C'est la plupart du temps ce que vous voulez faire. Ce que vous remarquerez, c' est que l'accident vasculaire cérébral reste à deux heures tout le temps. Si je fais autre chose, disons que je sélectionne à la fois le texte et le rectangle et que je suis comme, je veux qu'il soit plus grand et que je le fais glisser. C'est bizarre. Peut-être que si je maintiens Maj, maintenez Shift, ça ne fonctionne toujours pas. C'est là que l'outil de balance entre en jeu. Il y a des moments où vous voulez simplement tout agrandir , taper, tout. C'est cet outil ici qui se cache sous l'outil de sélection, cliquez, maintenez, faites glisser, ne maintenez pas et ne faites pas glisser, il suffit de cliquer et de le maintenir enfoncé et le voilà, l'outil de mise à l'échelle. Je clique dessus, j'ai les deux sélectionnés. Je peux simplement cliquer et faire glisser le coin. Si je ne maintiens rien vers le bas, il le fait proportionnellement, le redimensionnement, la fois le trait, pouvez-vous voir le trait, la police et le rectangle ? Il y a des moments où nous avons besoin des deux. Disons que dans ce cas, j'ai dessiné trop gros pour ce que j'en ai besoin. Je vais donc aller à mon outil de mise à l'échelle et je vais le rendre un peu plus petit et à la fois la police parce que je l'utilise comme rectangle. Mon petit coup devient plus petit. Je l'apporte à l'avant à l'aide de mon support carré. Même si vous regroupez d'abord des choses, vous devez toujours utiliser l'outil de mise à l'échelle. Ce que je veux dire par là, c'est dire que nous le faisons, qu'avons-nous ? Ces deux-là. Sélectionnez-les tous les deux. Je vais cliquer dessus avec le bouton droit de la souris. Je vais dire que vous êtes groupé, cette sélection. Je vais utiliser mon ancien outil de sélection normal. Il fait toujours la même chose même si vous pensez que je l'ai groupé. Non. Ça fait toujours des choses bizarres. Vous devez passer à l'outil de mise à l'échelle et vous le faites si souvent qu'il y a un raccourci et que vous êtes excellent. C'est facile à retenir. C'est probablement S parce que c'est l'outil d'échelle. Non. C'est K. Je ne sais pas pourquoi, mais ne vous inquiétez pas. L'outil S, si je frappe S, c'est l'outil de tranche que personne n'utilise. Il y a probablement des gens qui l'utilisent, mais je ne le fais jamais. C'est un gros gaspillage d'un bon raccourci. Bien que nous soyons obligés d'utiliser K. C'est exactement comme ça. V est le raccourci pour l'outil de sélection et K, vous finissez par basculer. Encore une fois, j'essaie de ne pas faire trop de raccourcis, juste ceux qui sont vraiment utiles. Je vais vous les battre tout au long de ce cours, donc vous allez à la fin de l'année et soyez comme, je sais que c'est K, je sais que c'est V, parce qu'ils sont utiles, et il est difficile de s'en souvenir parfois. Il faut que tu te battes. K, et vous pouvez les mettre à l'échelle. Parfait. Retournez à l'outil de sélection et passez à la vidéo suivante. 15. Frames et groupes dans Figma: Bonjour à tous. Cette vidéo, nous allons examiner les différences entre les groupes et les images. Jusqu'à présent, dans ce cours, c'était assez basique. L'outil de type fait ce que vous imaginez, l'outil Rectangle fait ce que vous imaginez. Ce n'est pas de la science des fusées. Prêt pour que cette vidéo soit la science des fusées. Je l'ai présenté plus tôt dans le cours parce que c'était probablement la chose la plus difficile que j'ai dû m'habituer à venir à Figma. Je vais vous présenter un peu maintenant et un peu plus tard, et un peu plus, et vers la fin, vous deviendrez maître des cadres. Mais si vous arrivez à la fin de cette vidéo et que vous vous dites : « Je comprends, mais je ne comprends pas », ne vous inquiétez pas. Je le présente tôt pour que nous puissions le revoir quelques fois. Tout d'abord, comprenons les groupes. Dessinons un tas de formes ici. Nous allons faire l'outil Rectangle. Nous allons faire trois formes. Examinons l'outil Polygone. Vous n'avez pas besoin d'avoir la bonne taille. Ils peuvent être trois cercles. Je fais ça parce que ça a l'air bien. Faites trois ou quelque chose, et ce que vous verrez ici sur ce cadre Détails du produit, c'est mon ellipse, mon polygone et mon rectangle. Je peux tous les sélectionner et je peux cliquer avec le bouton droit de la souris et les regrouper. Ou bien ils sont vraiment courants, Command G sur Mac, Control G sur un PC. Ils sont regroupés. Super. Que se passe-t-il ? Là, pouvez-vous voir que l'icône a changé ? Il s'appelle le groupe 2. Où est le groupe ? Il doit y avoir un groupe ailleurs. J'ai fait un groupe plus tôt, n'est-ce pas ? Le voilà, ce bouton. Groupe 2, je peux renommer. Ce sont peut-être mes icônes. Super. Cette petite icône n'est pas importante ici, mais vous allez vous habituer à ces formes, donc la petite ligne pointillée est un groupe. Je peux regarder autour de moi, il y a un autre groupe. Je peux regarder à l'intérieur du groupe de mes calques, cette petite flèche vers le bas ici. Vous pouvez voir des choses à l'intérieur. Le regroupement est utile car nous savons ce qu'est le regroupement. Vous pouvez les attraper et ils bougent ensemble. Mais je peux y aller individuellement en cliquant sur eux ici dans le panneau Calques et en allant, cela doit être de cette façon. Ou nous pouvons passer en mode d'édition d'objets. Double-cliquez sur l'arrière-plan. Pas une fois double-cliquez, nous entrons dans le groupe et nous pouvons opérer et travailler dessus, double-cliquer dessus pour sortir et c'est toujours un groupe utile. Vous pouvez dissocier le groupe en cliquant dessus avec le bouton droit de la souris et en allant à la dissociation, puis il sort de ce groupe en pointillés et il est de nouveau constitué d'unités uniques. Je vais revenir en arrière Command G ou Control G sur un PC et le regrouper. Quelle est la différence ? Faisons deux versions. Je vais dupliquer ce type, et je vais cliquer dessus avec le bouton droit de la souris et dire « Dissocier ». J'ai eu ce groupe groupé. Vous pouvez le voir, il s'appelle Groupe 2. Ces gars ici, traînent seuls dans ce cadre. Ce que nous allons faire est très similaire, nous allons tous les sélectionner. Au lieu de cliquer avec le bouton droit de la souris et de dire groupe, nous allons dans « Sélection de cadres ». C'est exactement la même chose qu'un groupe, sauf que l'icône est différente. Vous pouvez voir ici, il y a mon top, il a déplacé cet ordre de calque, donc c'est plus logique. C'est mon groupe, c'est eux là, c'est mon cadre, l'icône est différente, vous obtenez ce petit peu, comment appelez-vous cela ? livre, symbole de hachage, grille, quel qu'il soit. Mais ils font beaucoup de la même chose, donc vous pouvez toujours les voir là-dedans. Ils sont toujours coincés à l'intérieur de ce joli cadre, alors quelle est la différence ? La différence est que Frame peut survivre tout seul. Le Groupe, si je vais dans ce groupe et que je dis que vous êtes parti et que vous êtes parti, peut-être double-cliquez dessus pour entrer dans le groupe, le Groupe disparaît. Bye Group. Si je défais ça parce que je veux le récupérer. Le cadre d'un autre côté, si j'entre, supprimez ce type, celui-ci, il vous reste un cadre qui peut être bizarre quand vous êtes nouveau. Vous êtes comme « Quels sont ces cadres vides partout ? » Parce que le cadre peut exister sans le groupe. Pourquoi est-ce utile alors ? C'est utile parce que je me défais, c'est parce que je peux faire des choses comme disons que je veux couper ça. Je peux faire glisser mon cadre, pouvez-vous le voir ? Il fonctionne différemment. Si je fais glisser le bord de ça, regarde ce qui se passe, raclette. Si je fais glisser le bord de cela, je peux faire des choses comme ça, couper le contenu. Je peux utiliser le cadre comme un masque pour cacher des choses, ce qui est une chose. Laissez-moi vous montrer rapidement. C'est pourquoi c'est utile. Vous créez une belle liste, vous pouvez saisir votre cadre, le rendre un peu plus petit. Je sais que nous sommes en train de sauter de l'avant dans le cours, mais je suppose que je veux introduire des cadres plusieurs fois. C'est pourquoi c'est bon. Vous avez obtenu cette liste et vous pouvez la voir faire défiler, de sorte qu'elle se détache. Dites avec ça que vous avez le matériel suspendu sur les bords ici, je peux dire : « Où est votre cadre ? Vous pouvez être là-bas. » Ensuite, je peux dire « Clip content », donc je peux utiliser des parchemins. Les utilisateurs peuvent faire défiler vers la gauche et la droite en coupant les bords. C'est l'une des choses. Revenons en arrière. C'est un clip qui contient l'une des raisons et il y en a d'autres. La raison pour laquelle je vous le montre ici, c'est que vous allez télécharger les modèles d'interface utilisateur gratuits de quelqu'un et vous allez me dire : « Pourquoi tout est-il encadré ? C'est un peu bizarre. Je ne comprends pas. » C'était ma position de toute façon. La raison pour laquelle les gens le font, ils atteignent un niveau intermédiaire ou avancé de Figma et ils cessent d'utiliser des groupes. Parce que les cadres sont comme des groupes, mais avec des fonctionnalités supplémentaires supplémentaires et des contenus de découpage en font partie. Examinons l'un des autres principaux, juste pour le présenter maintenant et nous y travaillerons un peu plus en profondeur plus tard. Ce que nous pouvons faire, c'est que je vais vraiment dissocier cela. Lorsque vous pensez à un cadre, c'est que vous le regroupez. Vous regroupez ce premier groupe, puis vous le dissociez. Votre cadre, puis vous le dissociez. Est-ce logique ? Dissocier fonctionne pour les deux. Maintenant, dissociez-le et vous remarquerez que ces gars viennent de sortir. Je vais les mettre ici et je saisis mon nom ici et je vais les sélectionner et les transformer en cadre, pas en groupe. Parce que je veux voir le bonus. Le bonus, c'est de regarder ça. Je peux double-cliquer pour passer en mode d'édition d'objets. Je suis à l'intérieur de mon cadre et je vais dire que vous vous en tenez à l'ascenseur supérieur de ce cadre, qu'il est à l'intérieur. Ce cadre est ce qui se passe autour de l'extérieur. Mais ces gars-là, je vais cliquer sur vous. Je vais dire en fait que vous allez aller en haut à droite, même chose avec vous, vous pouvez aller en haut à droite, même avec vous, en haut à droite. Vous êtes comme, qu'est-ce que ça fait ? Regardez ça. Si je pars maintenant et que je vais en faire une copie et regarder ça, quand je le fais glisser, nous sommes là. Il colle en haut à droite du cadre. Les groupes ne peuvent pas faire cela, ils les appellent des contraintes. Nous ferons la propriété plus tard. Mais quand il arrive à des choses comme, j'ai besoin d'une autre version, j'ai besoin d'une tablette. Je vais juste cliquer sur mon outil de cadre et disons que ce sera une tablette, une mini. Ce sera un portrait et je vais le coller ici et je commencerai le design. Au lieu d'essayer de tout faire glisser et d'essayer de tout aligner, vous pouvez cliquer sur ce type et partir, vous allez ici. Je peux vous mettre en haut et je peux faire glisser ça et je peux le coller de ce côté. Vous voyez la photo ? Il devient de plus en plus approfondi lorsque vous commencez à empiler les choses, et cela signifie que lorsque vous commencez à ajouter du texte, les choses commencent à se renouveler, cela ne devient pas compliqué, cela devient plus génial. C'est ce qu'il fait. Mais cette formidable situation arrive à un stade déroutant car rappelez-vous qu'au début de ce cours, nous avons traîné des cadres. Rappelez-vous le cadre, c'était notre téléphone portable. Nous venons de le refaire maintenant avec la tablette. Les cadres sont utilisés pour la grande chose autour de l'extérieur, mais aussi pour les petites choses à l'intérieur. Ce petit cadre imbriqué. J'ai un cadre à l'intérieur d'un cadre, bizarre. Si je fais entrer, disons peut-être cette icône que nous avons évoquée plus tôt. Vous ne l'avez probablement pas remarqué, mais si je vais à un endroit, et j'en apporte la même ou une autre. Regardez ce qui se passe si je traîne ça. Vous remarquerez qu'en fait, vous pouvez voir que je l'ai apporté en tant que cadre. C'est un cadre, à l'intérieur, c'est notre petit vecteur, mais c'est à l'intérieur d'un cadre. C'est pourquoi nous ne pouvons pas laisser ça jusqu'à la fin du cours, car il y aurait des cadres partout. Vous êtes comme, dans ce cas, ça n'a pas d'importance. Nous n'utilisons pas cette bonté avec des contraintes et des variances et toutes les choses intéressantes que nous allons faire plus tard. C'est comme un groupe. C'est tout ce pour quoi nous allons l'utiliser, pour ce type. Mais sachez que plus tard, il y a des trucs fantastiques que nous pouvons faire. John, dis-moi, Dan est mauvais pour les groupes ? Non. Les groupes sont géniaux et ils fonctionnent très bien, sauf si vous n'avez pas toutes les fonctionnalités supplémentaires. C'est tout mon point de vue de cette vidéo. Nous allons désormais utiliser des cadres plutôt que des groupes parce qu'ils ont des fonctionnalités que nous apprendrons plus tard et qu'elles apparaissent dans Figma et je me suis demandé pourquoi. Ce qui est bizarre, c'est que quand on a des cadres à l'intérieur d'un autre cadre, c'est bizarre. Pourquoi avez-vous des cadres à l'intérieur des cadres ? La dernière chose, c'est que ce cadre, pourquoi celui-ci a-t-il un nom ? Comment avez-vous obtenu ce nom là et celui-ci n'a pas de nom ? Fondamentalement, si une image n'est pas répertoriée, elle porte un nom. Ce que je veux dire par là, c'est voir ce cadre ici, je vais le sélectionner. Si je le traîne hors d'ici, regardez, son nom apparaît à l'intérieur, son nom disparaît. C'est pourquoi vous pouvez parfois voir un nom de cadre et parfois le cadre est simplement utilisé comme groupe et il se trouve à l'intérieur d'un autre cadre. Quelle vidéo déroutante, Dan. Quoi qu'il en soit, j'espère que cela nous a rapprochés de la compréhension des cadres par rapport aux groupes. Ce dont nous n'avons pas besoin, c'est que nous n'avons pas besoin de ces exemples particuliers que nous avons faits. Nous allons créer quelques icônes spécifiques dans un peu. Mais nous nous dirigeons vers la compréhension des cadres par rapport aux groupes. Supprimez-les, et je vous verrai dans la vidéo suivante. 16. Projet de cours 02 - Wireframe: Bonjour à tous. C'est l'heure du projet de classe, je veux que tu crées quelque chose comme ça. Vous suivez peut-être jusqu'à présent et vous pourriez être dans un genre similaire ici. Si ce n'est pas le cas, je veux que vous construisiez tous vos cadres. Je veux que vous construisiez cette première page plus ces trois autres, essentiellement d'autres versions de cette première page. Rectangles, lignes, texte. Je veux que vous le gardiez très raisonnablement similaire à ma mise en page. Même si vous voulez, si vous le savez, si vous n'êtes pas d'accord et que vous aimez non, ils ne devraient pas être là, gardez la même chose parce que je veux que vous suiviez votre exemple tout au long ce cours et ces unités m'aident à vous montrer un peu différent fonctionnalités de la Figma. Restez près de cela et les exigences réelles pour les différents projets de classe figurent dans vos fichiers d'exercices. Vous verrez quelque chose et ils ont appelé Projets de classe. Ouvrez-le et cela ressemblera ceci, nous avons fait ce premier, alors ignorez que maintenant, si vous ne l'avez pas, l'URL du site va changer, la construisant pour le moment. Mais peut-être allez-vous aller sur ce site Web et vous allez créer votre propre mémoire et votre propre personnalité, donc nous l'avons déjà fait potentiellement. Ensuite, nous sommes jusqu'ici, alors utilisez les compétences que vous avez acquises jusqu'à présent. Cela devrait ressembler à ça. Si vous recherchez une version plus grande, vous devriez pouvoir zoomer dans ce PDF. Mais si vous ne le pouvez pas, dans vos fichiers d'exercice, il y a l'exemple PNG, Wireframe, juste une belle version volumineuse que vous pouvez regarder. Il y a également un fichier Figma là-dedans. N'oubliez pas que si vous ne vous souvenez pas comment faire le fichier Figma, lorsque vous rentrez chez vous, accédez à vos brouillons et cliquez dessus et vous pouvez importer ce fichier Figma jusqu'à vous. Que faut-il faire d'autre ? Voici les exigences, donc quatre pages, ce sont les quatre pages de notre flux de tâches. Choisissez votre propre couleur, il n'est pas nécessaire qu'elle soit verte ni votre propre police. Vous perdez des points si vous utilisez papyrus, Trajan, Brush Script ou Comic Sans, ou des polices terribles. Choisissez une police simple que je ne déteste pas selon les exigences. Je vous regarde papyrus et ce que je veux que vous fassiez, c'est juste prendre une capture d'écran et je vais vous montrer comment exporter correctement des cadres et des choses plus tard, mais il est en fait plus facile pour le moment d'aller dans Figma et d'ouvrir votre projet. et prenez simplement une capture d'écran sur un Mac, c'est Command Shift 4, vous pouvez simplement faire glisser une boîte autour et sur votre bureau, vous avez probablement une capture d'écran. Sur un PC, il est légèrement différent que vous utilisez l'écran d'impression et que vous le collez quelque part. Je ne suis pas grand sur PC exactement comment le faire pour les différentes versions, alors Google comment faire une capture d'écran. Vous êtes autorisé à prendre une photo avec votre téléphone. Quoi qu'il en soit, vous le chargez dans les projets ou dans les affectations. Cela dépend du site Web sur lequel vous vous trouvez, vous y verrez un coup d'œil. Il y aura un moyen de le soumettre sous forme d'affectation, de discussion ou de projet. Une fois que vous aurez fait cela, je vous verrai dans la vidéo suivante, est-ce que c'est de gros devoirs. Je ne sais pas. Cela ne prend pas trop de temps. Mais c'est bien. Nous allons mettre en pratique nos outils, nos techniques, et nous allons nous améliorer ensemble, mais nous avons besoin de notre Wireframe. Très bien, je vous verrai dans la vidéo suivante. 17. 17: Bonjour à tous. Parlons de l' endroit où obtenir des icônes gratuites. Je ne vais pas parler spécifiquement des sites Web, même si je vais vous en donner quelques-uns. Il s'agit plutôt de ce que vous recherchez lorsque vous téléchargez des icônes pour notre fichier Figma J'utilise iconfinder.com. J'aime bien, il y a plein de trucs gratuits ici. Des trucs bien payés aussi. Mais si ce site Web n'est pas là, lorsque vous visitez Internet, trouverez de nombreuses icônes gratuites. OK, donc ce que vous recherchez, c'est, disons que je veux l'icône du panier d'achat. OK, c'est ce dont j'ai besoin pour ma maquette ici. Ce que vous recherchez, c'est un format de fichier particulier. C'est GoDong, je bloque ce truc pour évaluer la charge de toute façon. Il y a donc quelques éléments sur la plupart des sites. L'essentiel est de savoir à quel point c'est gratuit. OK ? Parce qu'il y a la gratuité et puis la vraie gratuité. Gratuit ou sous licence, je vais utiliser celui qui est destiné à un usage commercial. OK ? Et celui-ci ici vous oblige cependant utiliser à des fins commerciales, mais vous devez créer un lien vers eux, ce qui est tout à fait normal. Vous y trouverez peut-être de bons trucs gratuits. Celui-ci nécessite un usage commercial, mais ne nécessite pas de lien de retour. Je n'ai donc pas vraiment besoin de reconnaître les personnes qui l'ont créé. Donc ici, choisissez tout ce que je dis, choisissez n'importe quoi. Je vais trouver un panier qui ressemble à un panier d'achats. En voici une. Choisissez rapidement quelque chose, Dan, les gens surveillent bien Al. Celui-ci. C'est bon. Donc celui-ci ici. Je vais l'ouvrir et ce que vous trouverez sur la plupart de ces sites, c'est qu'il existe une version G et une version SpG Regardons les deux. Ping est probablement celui que vous connaissez déjà. Spg, vous le savez peut-être déjà ou non. Je vais donc simplement choisir une version d'icône plus petite de ce G, et je vais vous montrer la différence. Je vais les télécharger tous les deux , les mettre sur mon bureau et sur ce G, comparer les deux et voir comment Figma les gère Y a-t-il une bonne et une mauvaise ? Oui, Fg est meilleur, mais plus compliqué. Mais maintenant que nous savons ce que sont les cadres et les groupes, ce n'est pas si mal. OK, apportons un dossier. Je vais procéder de cette façon, placer l'image, d'accord ? Et amenons-les tous les deux. Vous pouvez afficher plusieurs images à la fois en maintenant la touche Maj enfoncée et en cliquant sur les deux. Cliquons sur Ouvrir. Tu vois que j' ai un chiffre, un petit deux là. Vous pouvez même voir ma petite icône ressembler à un petit chariot. OK, donc je vais cliquer sur Maintenir la touche Shift pour que lorsque je les fais glisser vers l'extérieur, ils ne deviennent pas tous bancaux comme ça OK, maintenez la touche Maj enfoncée sur votre clavier. C'est pourquoi nous avons un SVG plutôt qu'un PNG. Je reconnais avoir téléchargé une toute petite version. D'accord, ici, vous pouvez télécharger une version vraiment volumineuse. Téléchargez-le et il aura l'air bien. Apportons-en un autre. Allez, shift K. OK, nous avons cet autre fichier PNG, la différence est que vous voyez cette taille de celui-ci ? D'accord, je peux donc obtenir un PNG de bonne qualité, mais mon SPG est de 1 kilo-octet Cela représente 112 kilo-octets. C'est la raison pour laquelle nous ne le faisons pas. Nous préférons utiliser G. Cela a l'air bien mais c'est énorme. Je ne peux pas utiliser le format PNG. C'est transparent, ce qui est génial. Cette figure est transparente. Tu es du genre : « Waouh, ce n'est pas transparent ». Il y a un fond blanc. Fg aime la figma. Ce qu'ils font, c'est que nous avons examiné cela plus tôt, vous voyez ? Ils nous ont servi de cadre. OK, à l'intérieur de ce cadre se trouve un groupe. À l'intérieur de ce groupe se trouve un vecteur. C'est tout ce que nous voulons vraiment, alors je vais juste le copier. OK, sortez de ce cadre et appuyez sur Coller. Je ne suis pas vraiment sortie de ce cadre. Vous pouvez le faire glisser hors du cadre, pour qu'il reste là. No man's land. Je vais donc cliquer sur ce truc. J'aime bien que ce soit ce que je fais. Je ne le veux pas dans un cadre pour le moment. Je veux juste le retirer et supprimer le cadre d'origine juste pour avoir le vecteur qui traîne dans les jours heureux, maintenant il est transparent, il est coloré, d'accord Je peux donc utiliser mon outil Eyedropper et commencer à les utiliser maintenant Alors que pour le PNG, nous ne pouvons pas changer la couleur. Nous pourrions, nous pouvons obtenir un Photoshop, le modifier, d'accord. Mais évidemment, SG est évolutif. C'est ce que sont le S et le SpG. Donc, d'accord, oui, nous pouvons passer en mode édition d'objets, que vous connaissez déjà, d'accord. Si vous êtes du genre, j'adore ça, mais je veux vraiment double-cliquer pour démarrer. Je veux vraiment qu'on m'en prenne un à Spiky. OK. On dirait une pelleteuse. Quoi qu'il en soit, vous voyez l' idée, les BD sont meilleurs. Donc, chaque fois que vous recherchez des icônes gratuites ou non, assurez-vous d'obtenir le SVG. C'est bon. Un autre endroit idéal pour obtenir trucs gratuits est de faire partie de la communauté Figma Donc, si vous retournez dans votre petite maison tout en haut, il y aura une option quelque part dans les environs, appelée Figma Community C'est un peu nouveau. C'est mieux chez moi. Tout le monde, petite mise à jour rapide. Tu aurais trouvé une solution. Ils ont déplacé l'onglet Communauté, nous allons donc utiliser le bouton Accueil. Et ce n'est pas là que je vous montre dans la vidéo, mais c'est ici. Pas difficile de trouver une communauté Explore. Ils le déplaceront probablement à nouveau juste au moment où je ferai cette mise à jour, mais voilà. Continuez avec la vidéo. Nous allons faire une pause voir sur quoi Dan travaille. Hmm, rien d'incriminant. Nous en resterons là en fonction de la durée pendant laquelle il deviendra de plus en plus robuste dans le futur. Il y a des trucs incroyables ici et la plupart sont gratuits. Ok, donc ici vous pouvez faire des choses comme des icônes, d'accord. Et vous trouverez de nombreux jeux d' icônes géniaux créés par des personnes que nous sommes autorisés à utiliser. Ce n'est pas aussi consultable que quelque chose comme un outil de recherche d'icônes si vous voulez juste aimer, hé, j'ai besoin d'une partage ou d'une icône de réseau social Vous devez en quelque sorte faire un peu plus de recherches à ce sujet. Mais il y a de bonnes choses et elles sont déjà en quelque sorte déjà présentes dans Figma OK, alors jetons un coup d' œil au pic à figues. OK, Fig Pick signifie simplement que Figma a décidé que c' était génial et que tout le monde devrait y jeter un œil Donc, ce que nous pouvons faire, c'est que lorsque nous avons affaire à la communauté de Figma, vous finissez par télécharger des fichiers OK, alors jetons un petit coup d'œil. Vous pouvez y accéder pour le prévisualiser. Mais finalement, à un moment ou à un autre, pour en tirer tout le contenu, vous devez faire ce qu' on appelle la duplication OK, alors cliquons sur Dupliquer. Et en gros, vous obtenez votre propre copie enregistrée dans votre flux de type Figma Alors maintenant, jetons un coup d'œil, jetons un coup d'œil ici. Il y a deux pages différentes. Oh, plein de bonnes icônes. OK, et avant de les copier-coller, laissez-moi vous montrer ce qu'il advient de ces fichiers communautaires, ou du moins de tout ce que vous avez dupliqué Rentrons chez nous. Ce que vous remarquerez maintenant chez moi, c'est que je suis un peu perdu. OK. Je vais donc accéder à ma petite liste déroulante, mon adresse e-mail floue, et je vais vous dire de choisir mon nom Permettez-moi d'en revenir au type de base où nous nous trouvions auparavant. Cela a pris du temps. Le vôtre pourrait faire de même, alors je vais le laisser là. OK. Je me suis demandé j' avais fait quelque chose de mal. Il a fini par se charger. OK. Ce qui se passe, c'est qu'il est dupliqué dans vos brouillons Vous remarquerez que maintenant j'ai des licornes. Je suis du genre, tu l'as ouvert juste pour grandir , en sortir, mais maintenant ça fait partie de ton flux. OK, vous pouvez cliquer dessus avec le bouton droit de la souris et le supprimer. OK ? Mais tout ce que vous ouvrez ou dupliquez dans Figma aboutit à cela Cela fait partie de votre monde. C'est le genre d'avantage, je suppose, de travailler dans le cloud, comme le fait Figma. OK ? Ce n'est pas une question de sécurité, votre disque dur fait partie de votre système de connexion en ligne dans le cloud. Cela signifie également qu'au bout d'un moment, vous aurez une tonne de choses ouvertes ici et il sera difficile de savoir laquelle vous appartient. Nous examinerons donc la recherche et la recherche des fichiers que vous recherchez plus tard Vous serez peut-être très bien rangé et vous devrez peut-être supprimer ceux que vous ne voulez plus. OK, nous avons donc quelques fichiers ouverts. Nous avons celui sur lequel nous travaillons en plus nos petits inconvénients de Unicorns Union Donc des licornes. Quoi qu'il en soit, alors allons-y regarder maintenant. Cela dépendra de la façon dont ces choses seront créées. Ces éléments sont créés sous de ce que l'on appellera un composant plus loin dans ce cours. Cela peut donc être un peu délicat pour nous à ce niveau. OK, alors faisons-le quand même. Allons en obtenir une copie. J'en ai vraiment besoin. Je l'aime bien grâce à ma structure métallique. Je vais revenir à ce document et je vais le coller. Et ce qui finira par se passer, c'est ce fichier Wed apparaîtra avec l'icône Wed. Il se retrouve dans notre dossier Assets. OK ? Utilisé dans ce fichier. Ça y est, là. C'est quelque chose de spécial que nous apprendrons plus tard. Pour le moment , nous allons le sélectionner, cliquer dessus avec le bouton droit de la souris et dire instance détachée comme si je ne savais pas pourquoi je le faisais Ne vous inquiétez pas, nous en saurons plus tard. Mais cela signifie que vous pouvez simplement dire que c'est un peu comme dissocier. OK ? Nous allons voir détacher l'instance, vous pouvez voir qu'elle revient en quelque sorte à ce cadre. Et vous pourriez décider , comme nous l'avons fait auparavant, garder le cadre. Cela fonctionne très bien. Ou vous pourriez faire comme nous le faisions auparavant et le sortir de ce cadre, le traîner, il traîne tout seul ou est-il là ? Renommons-le, appelons-le fichier. Dans mon cas, où est-il allumé ? Cela s'est retrouvé sur une page étrange, disons que je le veux sur la page de paiement. Il ne figure actuellement pas sur la page de paiement. Nous y voilà. Et c' est la communauté. Je l'ai présenté plus tôt. OK. Entrer dans la communauté parce qu' il y a tellement de bonnes choses là-dedans. Vous pouvez trouver de bons cadres métalliques, de bonnes mises en page, des blocages, des cartes et des icônes Et nous allons nous habituer à copier-coller, à les coller dans notre document et à voir ce qui se passe Ils apparaissent sous forme de composants, parfois de cadres, parfois de groupes, et ils sont très simples. Mais pour le moment, je vais juste faire le ménage. Je n'ai pas besoin que ces gars-là soient une sorte d' exemple de ce qu'il faut chercher et trouver. Et je vous verrai dans la prochaine vidéo. Nous savons maintenant ce dont nous avons besoin lorsque nous obtenons ces icônes gratuites. Mettons quelques icônes sur la page, prêtes à être insérées dans notre cadre métallique. 18. Faire correspondre le trait de nos icônes: Bonjour, tout le monde. Dans cette vidéo, nous allons apporter quelques icônes que j'ai dans nos dossiers d'exercices. Nous allons essayer de les faire correspondre pour que leurs largeurs de traits correspondent à ce premier et je vais vous montrer comment les répliquer sur tous nos points vers le haut. Oui, nous allons creuser. Apportons quelques icônes et rangeons-les toutes afin que nous puissions les utiliser. Nous allons utiliser le long chemin encore pour le moment, en utilisant la petite flèche là, Placer l'image. Je veux 1, 2 et 3. Donc, sur Icone Share, User and Home, je maintiens simplement la touche « Commande » enfoncée sur un Mac et je clique simplement sur eux individuellement. Sur un PC, c'est « Contrôler » et ouvrez-les. Maintenant, quelle est la clé que je maintiens pour m'assurer qu'ils ne vont pas tout tortiller ? « Shift », c'est tout. Je vais amener le mien à une taille. Ne vous inquiétez pas de la taille du moment et faites-les glisser. Maintenant, ce qui finira par se passer, c'est la taille de V dépendra de la dernière taille de trait que vous travaillez. Parfois, vous pouvez traîner et ils peuvent être épais comme ça ou être super fins. Une chose que nous devons faire, c' est de faire en sorte qu' ils soient tous très similaires. Je les ai d'une taille similaire et ce que je veux faire, c'est les réduire, et vous devez décider ici si vous allez simplement utiliser l'outil de sélection normal ou notre outil d'échelle de fantaisie. Cela dépendra de ce que vous voulez faire. Mon cas, vous voyez que les accidents vasculaires cérébraux restent à deux points. Si je les emmène à peu près là, ils se rapprochent en quelque sorte. Vous pouvez également utiliser l'outil de mise à l'échelle. Il suffit de les réduire, ils baissent tous et nous pourrons les ajuster par la suite. Je veux qu'ils descendent à peu près et qu'ils les placent dans cette position. Importez-les, faites-les descendre à cette position et nous allons essayer de les faire correspondre maintenant. Maintenant, vous devez décider si je travaille tout ça, sont des cadres comme des groupes avec des trucs en eux. Si vous êtes heureux de travailler comme ça maintenant, nous les laisserons là. Vous pouvez les extraire et supprimer les cadres. Ce que je vais faire, c'est les laisser, donc mon icône Partager ici avec elle est sélectionnée, vous pouvez voir ici, je dois aller à l'intérieur parce que je veux cliquer sur cette chose, suis entré avec un groupe à l'intérieur, mais avec elle est sélectionnée, en fait, je peux aller ici et je peux voir la couleur du trait. Dans mon cas, je n'ai pas besoin de le changer car il mentionne ce que j'ai d'autre, mais la largeur du trait est d'environ deux. C'est ce que j'ai utilisé ici et je veux essayer de les faire correspondre. Même chose avec celle-ci et parfois je ne vois pas encore le trait, donc je dois aller à l'intérieur du cadre et cliquer sur les deux en maintenant « Maj » pour les sélectionner et il est réduit à 0,5, vous pouvez le voir, donc je vais juste tapez en deux. Celle-ci ici, ce n'est pas une chose terrible, mais la façon dont cela a été dessiné, c'est que pas un joli petit coup, c'est en fait un remplissage. Si je double-clique dessus en mode d'édition de code, ce n'est pas comme des lignes qui se trouvent les unes au-dessus des autres. Pour un illustrateur depuis longtemps, vous saurez de quoi je parle, et si vous n'êtes pas nouveau dans ce monde Vector, vous trouverez juste quelques-uns d'entre eux qui sont faits des traits, et celui-ci est en fait fait fait. en haut d'un remplissage. Cela rend l'ajustement un peu plus difficile. Pour que celui-ci soit plus mince, je dois littéralement aller faire des trucs comme ça, ce qui n'est pas amusant du tout. Vous pouvez simplement en télécharger un autre ou simplement en dessiner un. Nous allons dessiner. Vous pouvez facilement redessiner cela avec l'outil de ligne. Je vais défaire. Double-cliquez pour sortir et à l'échelle, ceux-ci doivent probablement descendre un peu. C'est là que je ne veux pas utiliser ma balance. Si j'utilise l'échelle maintenant et que je l'échelle à la bonne taille, cela pourrait ressembler à celui-ci ici, mais si je vais à l'intérieur, double-cliquez, vous pouvez voir que ce n'est plus 2, il est 1,8, ils peuvent vous attraper. Personne ne le remarquera probablement, mais je remarque que vous le remarquerez. Nous allons simplement utiliser l'outil de sélection pour effectuer la mise à l'échelle et cela signifie que le fait de maintenir « Maj » signifie qu'il restera un trait à deux points. Vous savez ce que je veux dire ? Oh, réservez ça. Je vais le quitter. [inaudible] Ce que nous allons faire maintenant, c'est faire entrer ces trois personnes, leur donner la même apparence. J'ai l'impression que celle-ci n'est peut-être pas exactement la même. N'y passez pas trop de temps, il ne s'agit que d'un cadre métallique. Ce que je veux faire, c'est que je veux vous montrer une autre astuce, mais une chose utile dans Figma, c'est que je vais les supprimer. Parce que ce que je veux faire, c'est avoir ça sur eux tous. Ce que je vais faire, c'est le copier. À partir de ce premier, cliquez sur le nom des détails du produit et appuyez simplement sur « Coller » pour que j'utilise « Ctrl+C » et « V ». Sur un Mac, vous allez utiliser, oh, c'est un PC. PC utilise « Ctrl+C » et « V », et un Mac utilise « Commande+C » et « V », donc vous avez simplement « Commande+V » sur tous ces éléments et le récupère exactement là où il a obtenu de cette première image, ce qui est cool. Fais ça, je ne vais pas passer trop longtemps à donner tout l'espacement parfait là-dessus parce que nous allons devoir aller tester ça sur un téléphone, c'est comme ils sont trop gros sur un téléphone ? Probablement. Sont-ils assez éloignés ? Sans doute pas. Mes gros gros doigts vont finir par toucher plus d'une icône, alors quand nous effectuerons un test sur notre téléphone. Mais nous avons trouvé nos icônes, nous les avons là-dedans, nous les avons semblables. Ce sera bien pour l'instant. Passons à la vidéo suivante. 19. Comment utiliser les plugins d'icônes dans Figma: Bonjour à tous. Dans cette vidéo, nous allons examiner une partie de la source secrète, ce qui rend Figma incroyable Et ce sont les plugins qui sont exécutés en parallèle avec Figma Les plugins sont fabriqués par d'autres personnes, pas par Figma. D'accord, en gros, vous les installez. OK. Et dans ce cas, j'ai installé un petit plugin à icônes. Imaginons que nous recherchions une maison. Je peux récupérer mon icône et simplement la faire glisser vers l'extérieur. C'est une façon de le faire, il est un peu minuscule, mais vous voyez l'idée C'est une façon d' étendre Figma. Il existe de nombreux plugins et ils sont incroyables. Nous allons nous concentrer sur l'icône pour le moment, mais elles fonctionnent toutes à peu près de la même manière qu'elles étendent ce que figma peut faire Passons à l'action et examinons au moins l'un d'entre eux pour installer notre premier plug-in. Si vous utilisez ce petit menu déroulant à côté de l'icône Figma, vous pouvez accéder à Plug-Ins. Bonjour à tous, notre petite mise à jour de l' interface utilisateur de Figma. Encore une fois, plugins, je vais vous demander de cliquer sur Parcourir, Plug-ins et Communauté. Tu ne le fais plus de cette façon. ce faire, cliquez sur ce tout nouveau bouton appelé Resources Beyond Plug-Ins. Ensuite, vous pouvez accéder à cette option appelée onglet Communauté. C'est comme ça qu'on y entre. Ou rendez-vous sur la page d'accueil, puis sur Explore Community. En bas, vous pouvez le passer à toutes les ressources. Non, merci. Montrez-moi simplement les plugins. Et vous obtiendrez, si je fais défiler à nouveau la page vers le bas, tous ces détails sur les plug-ins. Mais ce que vous allez faire à partir de maintenant, j' aime bien l'utiliser de cette façon. C'est ainsi que je continue de procéder, car cela me donne beaucoup d'informations sur le nombre de fois où il a été téléchargé, ce qui est populaire, si vous connaissez déjà le nom du plugin. OK, si Dan vous en donne un ou si vous trouvez un sur notre site Web, vous pouvez le saisir. simplement aux ressources, accédez aux plug-ins et saisissez-le ici. Nous allons apprendre à le déballer, d'accord ? Au lieu de passer par cet onglet de communauté, vous pouvez voir qu'il est juste là si vous en connaissez le nom. Très bien, c'est ce que j' aimerais que vous fassiez, c'est que les plugins sont une partie incroyable de Figma. Vous passez juste 5 minutes à respirer grâce à tous les plugins incroyables OK, il y a tellement ici qui peuvent vous mener jusqu'ici et vous permettre d' être rapide et efficace et d'être visuellement très convaincant. OK, alors jetez un œil à tous les différents plugins, nous allons regarder les icônes pour le moment. Ce que vous devez faire, c'est que, eh bien, la façon dont j'avais l'habitude de déterminer si ce plug-in est bon dépend principalement des installations. Il n'y a pas encore de classement par étoiles similaire, et j'aurais aimé qu'il y en ait un. Mais comme Unsplash, qui est un moyen d'obtenir des images gratuites à des fins commerciales, est un plugin vraiment cool , très courant, probablement le premier que tout le monde installe, nous le ferons plus tard dans le Mais vous pouvez voir que 630 000 autres concepteurs d'expérience utilisateur ont décidé que c'était utile Il doit donc y en avoir un gros là-dedans. Nous allons utiliser Iconify. OK ? Si celui-ci n'est pas là ou été mis à jour au cours des trois dernières années ? D'accord, vous trouverez une autre version qui fonctionnera de la même manière. Cette vidéo ne montre pas vraiment comment utiliser Conify, mais comment l'installer, brancher et le faire fonctionner Nous allons donc cliquer sur Installer. Oui, n'oubliez pas qu'ils ne sont pas fabriqués par Fugma. Aucune responsabilité n'est prise. OK, allons-y et voyons maintenant comment faire fonctionner un plug in. Nous en aborderons quelques-unes dans le cadre de ce cours. Allons y jeter un œil. Tu dois allumer la prise. Vous ne pouvez en faire courir qu'une à la fois. Vous allez dire que je veux appelé Iconify pour commencer à fonctionner Maintenant, c'est là qu'ils varient tous. La plupart d'entre eux ont une sorte de Y. Ils ont tous un aspect différent. Aucune d'entre elles ne se ressemble. Celui-ci, ici, est grand. J'ai mis le mien sur l'autre écran, mais je vais juste le déplacer ici. Allons y jeter un œil. Jetons donc un coup d'œil à celui que nous recherchons pour faire du shopping. Allons dans une autre maison. Peut-être que cette maison était cassée, c'était difficile de la changer ici. Jetons un coup d'œil aux maisons. Est-ce que ça va être un accident vasculaire cérébral ? Aucun d'entre eux ne sera un accident vasculaire cérébral. Je parie que tu es peut-être ce type, peut-être que ce gars-là le sera. Probablement pas. Je vais utiliser celui-ci. Chiffres croisés. Vous pouvez donc simplement les cliquer et les faire glisser vers l'extérieur. Regardez ça, j'ai une icône SVG géante et c'est vraiment C'est ce plug-in, vous pouvez simplement faire glisser des éléments. Il y a évidemment d'autres options ici. D'accord, vous pouvez rechercher des icônes et il y a beaucoup de tags et d'autres choses qui se passent Les plug-ins fonctionnent donc tous de la même manière. Il existe une sorte d'interface utilisateur et vous pourrez cliquer et faire glisser des éléments vers l'extérieur. Nous en ferons quelques autres tout au long du cours, mais oui, c'est le plugin spécialement conçu pour les icônes. Je n'ai pas besoin de ce type maintenant, alors nous allons juste les supprimer. Maintenant, lorsque vous supprimez des bribes, c'est probablement parce qu'il vous restera toujours un cadre. Essayez donc de le faire comme vous le pouvez, vous pouvez simplement le supprimer. Avec ce cadre, il est préférable d' entrer dans vos couches et de dire «  c'est tout, je vais les supprimer et tout ce qu'il contient. Ensuite, assurez-vous simplement que vos couches sont bien rangées pour être accrochées C'est ce que tu fais là-bas ? Je ne sais pas comment je l'ai obtenu de toute façon, gardez-le propre. Choisis aussi ce type. C'est bon. C'est-à-dire, oui, un plug in très simple. Les plugins sont géniaux dans Figma Nous allons en apprendre un peu plus tout au long du cours. Passons à la vidéo suivante. 20. Projet de cours 03 - Icônes: Bonjour à tous, c'est l'heure du projet de classe, pas de devoirs. Nous allons faire quelque chose autour des icônes, donc si vous ne l'avez pas déjà fait, je veux que vous alliez m'assurer d'ajouter les trois icônes le long du haut que nous avons faites dans la classe, puis tout seul, je veux que vous ajoutiez cette section en bas de la page de confirmation, tout comme une invite pour demander aux gens de partager leur achat, alors quand ils cliquent dessus, ils vont pré-remplir leur page Facebook ou leur tweet Twitter sur  : « Hé, j'ai acheté ces super écouteurs, vérifiez-les Voir ici à ce lien. » Lorsque vous faites cela, vous commencerez à vous barboter avec notre personnage. Dans mon cas, Sarah ici, elle a la fin de la vingtaine, donc j'ai l'impression de pouvoir être un peu moins explicite avec ma langue parce que si quelqu'un d'autre est peut-être un peu moins averti sur le plan technologique, né dans une décennie différente, ils pourraient avoir besoin d'un peu plus d'explication. Cliquez sur ce bouton pour télécharger sur vos réseaux sociaux et partager avec vos amis ce que vous avez acheté. Le mien doit être un peu plus délibéré. Ma persona, elle est dans genre 20, donc elle obtient le bâillon ou la blague, Gore, l'inférence sans être trop explicite. De plus, ce sont les icônes des réseaux sociaux que je ressens. Je ne vais pas les mettre tous là. Ne détestez-vous pas les sites qui ont juste comme, voici les 40 différentes plateformes de médias sociaux que vous pourriez partager dessus, et j'ai exclu un tas parce que je me sens comme son groupe d'âge, quoi d'autre ? Elle travaille pour elle-même donc a probablement un profil LinkedIn, et ça ne va pas être corporatif, donc elle va probablement bien partager son nouvel achat d'écouteurs, et tout le monde utilise celui de Facebook aussi. Utilisez ce genre de : « Que devrais-je avoir ici Retournez à la persona, décidez de ce qui va se passer là-dedans. C'est peut-être faux, comme, « Je me suis peut-être trompé et mon client va revenir et partir, pourquoi n'y a-t-il pas Reddit ou quelque chose qui est nouveau et TikoToky, mais c'est quelque chose que j'ai l'impression que ça vaut la peine d'être testé nous pourrions en ajouter plus tard, et j'espère que lors de nos tests utilisateurs, il y aura des commentaires tels que : « Hé, où est cette chose que je ne connais même pas ? Pourquoi n'est-ce pas là ? » C'est ça. Les meilleurs navs, je ne veux pas que vous les dessiniez, je veux que vous trouviez ceux existants à partir d'un site gratuit juste pour pratiquer les trucs SVG et, ou plug-in, et stocker votre plug-in, faire fonctionner, économiser des trucs. C'est un petit peu de tiques là qui se passe là. Choisissez les icônes appropriées. Nous en avons parlé, ajoutez-les à la page Confirmation, prenez une capture d'écran et téléchargez-la dans les commentaires des projets d'affectations, et c'est un exemple. En fait, avant de partir, si vous utilisez des plugins que je pense que vous devriez l'installer, allez-y, il n'est pas nécessaire que ce soit une icône, j'utilise autre chose. Parfois, lorsque vous faites glisser des choses à partir de plugins, disons, cela dépend de leur taille. Disons que je traîne dans ce Facebook. Parfois, vous aimez « Giant F », et cela rend tout vraiment difficile et [inaudible] quand vous êtes nouveau, alors je vais annuler cela. Souvent, il peut être annulé. Il est tout simplement plus facile de trouver un pot vide ou votre plan de travail et de le faire glisser hors de là, car ils sont les leurs propres dans leur propre petit cadre. Je peux aussi faire glisser un tas d'entre eux. Qu'est-ce qu'on a d'autre ? Je peux les réduire et les rendre appropriés, puis les amener plutôt que d'essayer de les pousser là-dedans, et ils se sont retrouvés à l'intérieur de groupes ou de cadres qu'ils ne devraient pas être. C'est mon conseil. Lorsque vous avez fini d'utiliser le plug-in, fermez-le. Vous êtes partis les gars. Je vous verrai dans la prochaine vidéo. 21. Comment utiliser les pages dans Figma: Bonjour. Dans cette vidéo, nous allons regarder des pages. Cela semble ennuyeux. Ce n'est pas le cas. Ici, pour le moment, nous allons finir par créer une page. J'ai actuellement une page 1. Nous allons le renommer mobile. Nous allons créer une deuxième page qui aura nos cadres de bureau dessus. Ensuite, nous allons créer une autre page qui contient un bref et notre personnalité ainsi que notre flux de tâches, le tout dans une figure et un seul document. Mais ces pages vont être jolies et séparées. Allons ici et apprenons comment les fabriquer. Pour commencer, vous avez déjà une page 1 et elle se cache là. Il est probablement fermé. Vous êtes dans le panneau Calques, vous avez la page 1. C'est là. Vous pouvez aller assez loin dans Figma et ne jamais avoir plus que la page 1. page 1 est tout ce que nous avons fait jusqu'ici. Nous avons ces petits chevrons ici pour les fermer juste pour que tout soit plus soigné. Nous avons notre page de confirmation, notre commande, nos détails sur le produit. Vous pouvez les réorganiser parce que cela n'a pas de sens, n'est-ce pas ? Conformation jusqu'au bout. Nous avons nos cadres, que vous pourriez argumenter, des pages. Ils sont cool, comme les tableaux d'art, mais nous les appelons cadres parce que c'est ce que Figma les appelle. Les pages sont un moyen de séparer ce tableau d'art ici. Page 1, vous pouvez avoir plus d'une page, a, Page 2, et en gros, vous pouvez frapper et vous partez, je vais arrêter de faire quelque chose de différent. Pourquoi auriez-vous deux pages ? Dans notre cas, ce que nous pourrions faire Page 1 pourrait être, je vais double-cliquer dessus et l'appeler mobile. Cet autre sera un ordinateur de bureau. Je veux que vous le fassiez parce que nous allons concevoir une version mobile et une version de bureau dans ce cours, il devrait également y avoir une vision de la tablette. Nous n'allons pas le concevoir parce que nous ne sommes pas seulement un petit, mais entre les deux. Nous avons notre mobile et notre ordinateur de bureau. Permettez-moi de vous en montrer d'autres exemples. Vous allez sur le bureau. Avant d'aller chercher notre outil de cadre. Dans l'image 2, encore une fois, je n'essaie pas d'obtenir trop de raccourcis, mais la touche F, c'est assez courant, ici je vais dire que je veux le bureau. Selon le moment où vous regardez cela à l'avenir, il s'agit d'une très bonne taille générique, 1440 x 1024. Nous allons en avoir 1, 2, 3, 4. Je vais en sortir un. Je fais ça. Accédez à votre outil de déplacement, saisissez le nom, maintenez enfoncée la touche Option sur un Mac, touche Alt sur un PC, maintenez la touche Maj enfoncée si vous ne le verrouillez pas avant qu'il ne soit. Ensuite, commandez D ou Control D plusieurs fois. J'adore cette commande D, si satisfaisante. J'en ai trois. Vas-y, je vais accélérer ça. Je vais les nommer tous exactement comme mon téléphone portable. Je ne m'en souviens absolument pas. Je vais faire des allers-retours. Veuillez tenir. Oui. C'était un copier-coller douloureux. C'est une bonne utilisation des pages. n'y a aucune raison pour que vous ne puissiez pas simplement les avoir en dessous, mais vous verrez qu'avant d'aller trop loin, ils finissent par ressembler à ceci. Jetons un coup d'œil à mon mobile plus tard dans ce cours, juste bourré partout. Ce n'est pas joli, mais c'est véridique. C'est un dossier honnête, c'est ce que c'est. D'autres cas d'utilisation sont que nous allons également faire dans cette vision, c'est souvent que vous mettez une autre page avec des choses comme votre flux de tâches et votre persona. Nous allons le faire dans une seconde. Jetons également un coup d'œil. Je vais vous montrer maintenant parce que vous avez ouvert certaines choses de la communauté. Rappelez-vous que nous avons regardé ces icônes et des icônes, unicones, quels qu'ils soient. ici, je l'ai peut-être fouillé. Peut-être que je ne les ai pas portés, mais vous avez peut-être remarqué que j'ai peut-être fait deux couches et j'ai peut-être posé ça parce que je suis comme toutes ces pages, cette couverture et ces unicones. C'est comme ça que je l'ai trouvé. Il s'agit de pages différentes au sein de celle-ci. Celle-ci ne fait que servir de couverture ou de vignette. C'est là que sont toutes les bonnes choses. Il devient encore plus hardcore. Regardons quelque chose d'un peu plus grand. Je suis à la maison, je suis ici à la communauté et je vais explorer. Je vais trouver n'importe qui. Essayons celui-ci. Microsoft Teams est susceptible d'être massif. J'ai fini, ça va être gros si vous avez une connexion Internet lente et que c'est un gros kit ou un gros fichier Figma. Le téléchargement peut prendre beaucoup de temps. J'ai un haut débit rural. C'est vrai, c'est sur un appareil mobile. C'est bon. Ce que vous trouverez, c'est que vous pouvez voir ici et partir. Ce n'est pas si utile. Où est le reste ? C'est ici. Toutes les pages le sont. Vous remarquerez qu'il y a une page de couverture, super. Informations générales. Ils ont créé une page sans rien dessus juste pour faciliter la tâche ici, pouvez-vous voir que celle-ci ne fait rien. C'est ici que nous commençons, c'est un peu de documentation à ce sujet. Ressources. Que pense d'autre ce téléchargement ? Vous pouvez voir que c'est assez complexe. Le journal des changements, jetons un coup d'œil à ce sujet, il y en a plus ici. Regardez combien de pages il y a, charge. Choisissons-le un peu d'entre eux, les mises en page, l'icône des avatars. À la fin de ce cours, nous n'allons pas créer de système de conception complet. C'est ce qu'on appelle un UIKit. UIKit sous-estimant ce que fait cette chose, est un système de réflexion sur tout ce qui concerne les équipes Microsoft. Quelqu'un a fait ça, quelqu'un chez Microsoft. Je me suis séparé, donc ça veut dire un designer. Je suis designer junior. Je suis venu ici et il y a longtemps, je dois créer cette fenêtre contextuelle qui indique que j'ai perdu tous vos fichiers et je suis vraiment désolé. Vous pouvez passer par ici, très bien. Lisez les directives, comprenez les polices, comment communiquer avec différentes polices sur différentes plates-formes, espacez les couleurs qu'elles sont autorisées à utiliser ? Quelles sont les couleurs communiquées ? Il s'agit d'un système de conception complète. Plus tard dans le cours, nous créerons un système de conception minuscule qui codera normalement comme un guide de style. Mais c'est un cas d'utilisation assez important. Mais je suppose que je voulais faire des pages parce que vous allez devoir tomber à travers ces pages. Je vais refaire mon application. Chaque page vue dans ce cas contient un tas de cadres. À l'intérieur de ces cadres, il y a beaucoup d'autres cadres et tableaux d'art et de bonnes choses. C'est à ça que servent les pages. D'autres cas d'utilisation peuvent être que vous avez dit que vous avez un mobile. Ils peuvent être l'option 1, j'ai un flux de tâches spécifique et vous faites un autre mobile. option 2, avec un flux de tâches différent ou des couleurs différentes ou un concept d'aspect différent 1 concept 2. Vous avez compris l'idée. Vous pouvez utiliser des pages pour le séparer. Sommes-nous bons là-dessus ? Ce que je veux que vous fassiez, c'est d'avoir une troisième page et celle-ci sera notre bref et notre flux de tâches. C'est génial d'avoir tous les trucs ensemble. Ce sera le top. Ici, je veux que vous apportiez la capture d'écran ou le JP Go. Comment avez-vous obtenu votre personnage plus tôt dans le cours ? J'ai eu le mien ici. Je vais copier et coller ça. Vous serez également légèrement différent. Je construis cette fonctionnalité pour vous, mais plus tôt dans le cours, je vous aurais montré comment créer votre propre personnage. Je veux que vous la saisissiez, la capture d'écran ou le JPA que vous avez téléchargé et que vous le mettiez sur votre mémoire dans le flux de tâches. Mettez-le ici et le vôtre n'est probablement qu'une grosse forme. Qu'est-ce qui redimensionne le mien et je vais apporter ce flux de tâches. Si vous vous souvenez plus tôt, si vous avez ouvert le flux de tâches, il devrait se trouver sous votre petit bouton d'accueil, sous votre nom. Où est ce flux de tâches ? Il est là. Flux de tâches. Si vous ne l'avez pas ouvert, rappelez-vous, retournez là-bas. Accédez à votre nom, allez dans les brouillons, allez dans Importer et le flux de tâches se trouve dans vos fichiers d'exercices. La voilà, ouvrez cette application et je veux juste que vous la copiiez et la collez ici. Il est pratique d'avoir tous vos documents, copier, de les fermer. Revenez à notre initiale, celle sur laquelle nous travaillons ensemble et j'ai mis ça là-bas. Mon flux de tâches et mon mémoire sont réunis en un seul endroit pour que je puisse y revenir facilement et que nous ayons appris ce que font les pages. Simple. Faites ces choses et je vous verrai dans la vidéo suivante. 22. 22: Bonjour tout le monde Dans cette vidéo, nous allons réaliser un prototype. Nous allons le mettre dans un téléphone et lorsque nous cliquons sur un élément, il passe à l'image suivante. Je vais également me perdre un peu dans cette vidéo. Quelque chose ne va pas, nous allons le réparer ensemble pour que nous apprenions tous : commençons. OK, c'est une période excitante. Comment prototypons-nous ? Il fera d'abord quelques tâches de base Ce que nous devons faire, tout d'abord, c'est passer de la conception, dans laquelle nous travaillons depuis longtemps, au prototype. OK, et ce que nous allons faire, c'est la page d'accueil sélectionner la page d'accueil, d'accord, nous allons commencer par celle-ci. Et ce que vous remarquerez, c'est que ce petit point est un petit point important. Nous allons cliquer, maintenir et faire glisser, faire glisser notre livre, le coller dessus. Joue-le. Vous pouvez simplement cliquer dessus puis lâcher prise. Maintenant, c'est ça. Il va faire quelques choses de base pour commencer. Nous nous occuperons des autres pages. Il en va de même pour celui-ci. Cliquez sur le nom en haut et dites que vous avez obtenu le nom en haut de celui-ci. Et ils s'en vont, d'accord, prototypons-le. Bonjour tout le monde C'est Future Dan, je vais juste mettre la vidéo en pause très rapidement et partager une mise à jour de Figma Je suis sur le point de cliquer sur ce bouton , cette petite flèche. Et c'est l'option actuelle. C'était la seule option lorsque j'ai suivi ce cours. La dernière mise à jour est ajoutée, une option supplémentaire Preview. Voici donc ce que nous allons utiliser pour le reste de cette vidéo. Cela ouvre notre design dans un nouvel onglet. La différence entre le présent, que nous utilisons dans ce cours, et l'aperçu, c'est que l'aperçu s'ouvre à lui seul dans une petite fenêtre. C'est toujours le cas pour nos interactions. Il n'y a pas vraiment de différence, sauf qu'il y a une petite fenêtre que vous pouvez garder ouverte tout le temps Et l'autre est un onglet séparé. Vous avez reçu une jolie petite mise à jour de Figma, qui est meilleure. J'utilise toujours l'option de tabulation. Celui-ci est bon, mais il me gêne toujours, mais il est nouveau, donc je vais peut-être m'y habituer. Vous pouvez choisir celui que vous préférez. n'y a aucune différence réelle entre le prototypage, si est qu'il s'agit d'un onglet ouvert et d'un onglet séparé Je vais fermer ça et vous laisser revenir à la vidéo. Pourquoi est-il de cette couleur orange ? Je ne sais pas J'ai essayé de recréer la vidéo, mais bon, elle est assez proche Vous revenez au prototypage vidéo. C'est ce qu'on appelle un cadeau. Tu peux le voir ici ? Le petit bouton Play. Cliquez dessus et il s'ouvrira. Vous remarquerez un autre onglet. Voilà notre original. Nous sommes passés à cet autre onglet. D'accord. Et ce qui se passe, c'est qu'il s'affichera quelle que soit la page sur laquelle vous vous trouvez. Ce n'est donc pas ce que je veux. Je veux y retourner. Et si je vais sur cette page d'accueil ici, il suffit de cliquer sur le mot Homepage puis sur Présenter. Il reviendra essentiellement à ce même onglet, mais au moins nous sommes maintenant sur la page d'accueil. Regarde ça. C'est une jolie page d'accueil. Donc, ce que nous allons faire, c'est simplement cliquer n'importe où, juste cliquer une fois, et passer à nouveau à la page de paiement. Qu'est-ce que c'est ? Les pages de confirmation ont eu une mauvaise journée. Ce qu'il y a là-bas qui fait cela ne devrait pas faire cela. Fermons-le pour que, encore une fois, qu'y a-t-il là-dedans ? Rien Certaines choses que nous avons faites se sont produites. Je m'en occuperai même au cas où cela vous arriverait, page d'accueil présente. Le vôtre aura probablement aussi ce petit écran de chargement . Laisse-moi partir Ew, Ew, Ew, Ew, géant, il y a quelque chose qui me gêne. Je m'en occuperai plus tard. Mais ça marche un peu tout le temps. boîte noire, comme un UA là-dedans et je vais découvrir pour que vous sachiez tous pourquoi. C'est bon, je suis de retour. Je n'ai aucune idée de la réponse. L'avez-vous déjà vu en mode rapide ? En gros, ce que je fais normalement dans une telle situation c'est que je vais commencer, je vais commencer à parcourir et à supprimer des éléments. Je l'ai imaginé avec du SVG qui faisait des choses étranges, alors je l'ai supprimé, je l'ai testé et il est toujours cassé Vérifions-le. Cela fonctionne toujours. Non, c'est réparé. Bizarre. Je ne sais pas alors. Donc, tout ce que j'ai fait a été supprimé, puis annulé et il est revenu à la vie. Donc, juste au cas où quelque chose d'autre se produirait et que ce ne serait pas aussi facile, cela m'a pris du temps et il m'a fallu environ 05:10 minutes pour comprendre ce qui se passait Ce que je fais normalement, c' est parcourir et je supprime simplement des éléments, puis je les teste, je supprime des éléments, puis je les teste, je supprime des éléments et je les teste. Et le fait de voir finalement quelque chose que j'ai supprimé montre que cela était à l'origine des problèmes. Normalement, je le fais comme ça, puis je les ai abandonnées, alors j'en ai juste fait une autre version . Et ça a marché. Dans ce cas. Je l'ai juste supprimé puis fait et il est revenu probablement en fermant le programme, en l' ouvrant en mode de sauvegarde, en réinitialisant la machine Quoi qu'il en soit D'accord, c' était un peu tangent, mais ces choses-là Cela a donc en quelque sorte fonctionné. Passons au présent et oublions que c' est de retour dans la zone. Dan Beck est dans la zone. OK, nous allons donc le prévisualiser et nous avons fait prototypage de base où vous cliquez n'importe où et il se déplace Ça arrive au bout et c'est un peu bloqué. Donc, ce que vous pouvez faire si vous vous baladez, vous remarquerez qu'au bout d'un moment, d'autres petites options apparaissent Redémarrer, qui est R, c'est très courant. Revenez au début. Vous pouvez donc retravailler sur votre prototype. Vous pouvez le parcourir manuellement. Pouvez-vous voir ici la page 1234 ? les autres options qui pourraient être utiles Parmi les autres options qui pourraient être utiles, vous pouvez passer à 100 % ou en plein écran pour vous débarrasser de tout le type de Chrome qui se trouve vous pouvez passer à 100 % ou en plein écran pour vous 100 % ou en plein écran pour à l'extérieur Que voudrais-tu faire d'autre ? C'est un peu ça. Une chose que vous devez savoir, c'est que vous n'avez pas besoin de le fermer à chaque fois. Vous avez l'impression que lorsque vous avez terminé, vous le fermez puis vous revenez ici, mais vous n'avez pas à le laisser ouvert et à toujours y revenir. Parce que ce qui se passe c'est qu'il se met à jour. À voir si je vais ici et que je décide d'en changer la couleur, oh, c'est bon point. Cela arrive souvent lorsque vous êtes nouveau et que vous vous demandez pourquoi tout cela s'est passé ? Parce que vous êtes dans le prototype. N'oubliez pas de revenir au design, ces trois éléments en haut de page. Nous examinerons Inspect soit dans le cours, mais chaque fois que vous manquez de couleurs ou de polices, c'est parce que vous êtes bloqué sur le design du prototype. Je vais entrer ici et je vais dire que tu vas maintenant être d'une autre couleur. OK, maintenant je vais passer à cet onglet qui est toujours ouvert. Et vous remarquerez que si je retourne sur mes pages, elles sont mises à jour. Si vous utilisez la version du navigateur, il est pratique d'obtenir cet onglet, retirer et de le placer sur un autre bureau. Sur la version de bureau, c'est un peu bloqué ici pour le moment. Je ne peux pas le démonter. Il suffit donc de passer de l' un à l'autre. Si vous souhaitez revenir de l'un à l'autre. Le raccourci est qu'il n'y en a pas. C'est un peu pénible. Ils le seront peut-être dans le futur. Vérifiez. Tu veux chercher sur Google ce qui dit « Figma present » s' appelait ça ? Oui, le raccourci actuel n'existe pas pour le moment. Ce que nous faisons, c'est utiliser la commande sur un Mac, Control sur un PC. Et Command One est de retour sur votre petit écran d'accueil. OK, nous avons cliqué sur cette commande pour savoir quel que soit le deuxième onglet considéré comme le premier 123. Donc, dans mon cas, je vais revenir en arrière entre deuxième commande, la commande 3123 Procédez à une modification instantanée autour de trois mises à jour. Vous pouvez donc le garder ouvert. Maintenant, il faut noter que vous ne pouvez pas prototyper sur plusieurs pages. J' ai donc ma page d'accueil. Je passe au prototype et je veux passer à la page quelque chose ici. Ce n'est pas possible. OK, donc c'est uniquement entre les cadres d'une page. Ce que vous remarquerez également, c'est que j'ai ce joli chrome sur l' extérieur d'un iPhone 8. Ils peuvent sembler anciens lorsque vous regardez ceci, mais vous pouvez changer cela. Et laissez-moi vous montrer comment faire. Passons donc au prototype. Allons afficher les paramètres du prototype ou ne rien sélectionner. Vous vous retrouvez au même endroit, d'accord. Donc, après avoir sélectionné quelque chose, Prototype, cliquez sur ce bouton ou cliquez simplement sur no man's land Et vous pouvez dire, d'accord, je ne veux pas d'iPhone 6 Je veux, je ne sais pas à quoi ressemble Google Pixel. J'en possède un quatre en ce moment. Pourquoi ne pouvons-nous pas en avoir un quatre. Tu dois aussi regarder un très vieux. Et vous pouvez choisir parmi les différentes couleurs qui ont beaucoup changé sur un iPhone, mais évidemment, sur notre iPhone 8, d'accord, au lieu de la couleur dorée, vous pouvez choisir le gris sidéral ou l'argent. Il s'agit essentiellement du dos du téléphone, donc peu de changements. Si vous modifiez la couleur de fond, vous pouvez passer du mode portrait au mode paysage. Et quand je passerai à l'aperçu maintenant, jetons-y un coup d'œil. Hé, ça ne fonctionne pas vraiment sur le paysage, mais vous voyez l'idée. Si vous ne voyez aucun de ces éléments, c'est parce que lorsque vous avez commencé, souvenez-vous du début, d'accord, créez notre première image et nous choisirons l'une de ces valeurs par défaut Ils y sont attachés. OK, donc même si vous venez de taper, vous avez commencé avec une version de bureau, vous avez dactylographiée et vous en avez fait une taille de téléphone Il ne se connecte plus. Vous devrez donc peut-être définir la taille du téléphone et les copier-coller si vous voulez que Chrome s'y trouve. Cela n'aide pas beaucoup à la dégustation si ce n'est que ça a l'air cool. Vous remarquerez également que nos versions de bureau. Jetons donc un coup d'œil à l'ordinateur de bureau. Cliquez sur celui-ci même s' il n'y a rien dessus. Je vais donc cliquer sur Page d'accueil, sur l'outil cadre, puis sur la page d'accueil. Vous remarquerez que dans le prototype, les paramètres du prototype, il n'y a rien ici. Je peux donc dire que je veux que ce soit un ordinateur de bureau ou un ordinateur portable et que ce n'est pas le cas. OK, il n'y a donc que quelques éléments que vous pouvez réellement utiliser dans Chrome pour le moment. Bien, une dernière chose avant de partir c'est que si vous m'avez suivi, je veux que vous reveniez au mobile Et je veux que vous démontriez tous ces prototypes ici parce que je ne veux pas simplement cliquer n'importe où. Je souhaite accéder aux détails du produit uniquement lorsque je clique sur le bouton En savoir plus. Et je veux désormais passer directement à la page de paiement. Lorsque vous cliquez sur ce bouton, il utilise actuellement l'ensemble du cadre. Donc, pour vous en débarrasser, vous pouvez faire deux choses. Ce que j'ai tendance à faire, c'est simplement cliquer sur la couche, puis sur Supprimer. Vous pouvez également cliquer sur votre cadre ici et dire que sous prototype, pouvez-vous voir qu'il est écrit, nous avons appliqué cette indirection appelée Tap checkout OK, il suffit d'avoir un inconvénient. Il en va de même si vous souhaitez le supprimer en le sélectionnant et en le supprimant, ou en sélectionnant le cadre, puis en minimisant toutes les interactions que vous avez Modifier D'accord, et alors ? Nous n'avons abouti nulle part. Nous les avons ajoutés, mais nous les avons supprimés. Passons à la vidéo suivante et nous ferons apparaître les boutons, mais nous ajouterons également des animations sans transitions. Très bien, je t'y verrai 23. Animation de prototypes et accélération de la transition dans Figma: Hé, tout le monde. Dans cette vidéo, nous allons mettre en place ce prototype. Les boutons vont à des endroits, pas seulement en cliquant sur le cadre. De plus, nous examinerons les différentes techniques d'animation entre les images. En fait, je vais vous montrer. Acheter maintenant, il y a un truc cool. Celui-ci fait un truc glissant. Je vais vous les montrer. Je vais aussi vous montrer, vous vous souvenez du problème que nous avons eu sur ce dernier cadre, les grosses boîtes noires géantes ? Ils sont revenus et nous l'avons réparé au début ici. Je vais laisser ça là-dedans pour que nous puissions tous apprendre. Nous en apprendrons également sur l'assouplissement. C'est un petit peu long, mais nous couvrons beaucoup. Allons-y. Pour modifier les animations, nous allons faire quelques choses. Nous allons nous assurer que nous sommes sur Prototype en haut à droite, et nous allons les supprimer si vous ne l'avez pas déjà fait. Cliquez sur les noms en haut et supprimez ces transitions. D'où vient-il ? Vous souvenez-vous que dans une vidéo précédente, je me disais : « Quelles étaient ces grosses boîtes noires ? » J'ai éteint Figma, je l'ai ouvert, et j'ai complètement compris ce qu'étaient ces grands carrés. Il y a quelque chose ici. C'est ce qu'ils étaient. De grosses lettres géantes, Facebook. On y va. Notre problème a été résolu. Je pense que je faisais la démonstration avec vous les gars, vous montrant comment le faire rentrer, et ils ont tous fini là, mais ils ont disparu, et maintenant ils sont de retour. Nous avons résolu ce problème. Regardons l'animation. Nous avons supprimé les connexions entre eux tous. Faisons-le pour des boutons spécifiques réels plutôt que pour l'ensemble du cadre. Ce que nous pouvons faire, c'est que nous allons dire, l'achat a maintenant son propre petit point. Chaque petite unité possède un point, ce qui vous permet de rendre tout cliquable. Sur ce bouton Acheter maintenant, il va ignorer les détails de nos produits et aller jusqu'à celui-ci. Pouvez-vous voir que je ne fais que le faire glisser et que vous pouvez le connecter ? Je veux aller directement à la caisse. C'est aux acheteurs passionnés d'y aller directement, sans chichis, pas de manquer. Maintenant, l'animation est la suivante. Il est instantané pour le moment, il se déplace simplement. Regardons la dissolution et allons le tester. N'oubliez pas que vous n'avez pas besoin de le recharger, mais vous pouvez , si vous l'avez fermé, aller sur ce petit bouton de lecture et aller à un cadeau et il l'ouvrira. Notre petit bouton, puis-je cliquer dessus ? Regardez-moi ça, dissolvez. C'est très excitant. N'oubliez pas que R est le bouton de rafraîchissement et vous pouvez vous entraîner à l'utiliser. Nous ne couvrirons pas chacun d'entre eux parce que certains d'entre eux sont assez explicites. Nous allons instantaner, c'est facile, dissoudre, comme vous venez de le voir. Smart Animate, nous partirons pour cette vidéo car c'est un peu plus compliqué pour plus tard dans le cours. C'est incroyable, mais nous allons le faire plus tard. Vous devez le configurer un peu plus. Jouons avec Move in. Jetons un coup d'œil. R pour réinitialiser, emménagez. Voyez-vous qu'il glisse de côté ? C'est plutôt cool. C'est vraiment agréable lorsque vous faites de la navigation mobile. Vous voulez vous déplacer de côté ou peut-être des images qui volent de l'autre côté. Au lieu de tester chacun d'entre eux, ce que vous pouvez faire est Déplacer. Pouvez-vous le voir en bas ici ? Si vous survolez, il vous donne un indice visuel de ce qu'il va faire. Push, pouvez-vous voir au lieu de bouger, qui est un glissant sur le dessus, poussez un vers l'extérieur pour en déplacer un. C'est un moyen facile, la glissière est vraiment bonne quand on arrive à ces couches mobiles où elle pousse simplement sur le côté, pas tout le long. Je vais m'en tenir pour emménager. Pouvez-vous voir ici les directions ? Vous pouvez décider si nous le voulons de gauche ou de droite, en bas, en bas le haut et en haut par le bas. Tout cela est assez facile. Regardons l'une des autres choses intéressantes qui s'assouplissent. L'accélération est activée par défaut. Cela signifie simplement que la facilité de sortie signifie qu'elle va démarrer rapidement et se ralentir. Il va se calmer hors de cette petite courbe là-bas. Je vais l'exagérer ici. C'est un autre terme que nous devons apprendre, ms, qui est en millisecondes. Il y a 1 000 millisecondes en une seconde, donc c'est une seconde. Donc, 300, c'est, je ne sais pas, cette petite partie, troisième. Je vais le faire passer à une seconde juste pour pouvoir le prévisualiser et jeter un coup d'œil. Allons ici, R pour se rafraîchir, acheter maintenant. Voyez-vous ? Joli et lent. Il démarre rapidement, puis devient agréable et lent à la fin. C'est facile de sortir. Ce qui est très souvent agréable, c'est à la fois la facilité d'entrée et de sortie. Vous pouvez le soulager, donc ça va lentement au début. Voyez-vous ? Cela le montre mieux sur cette petite icône ici. Il démarre lentement, lentement, lent, lent, lent et devient plus rapide. Il a toujours l'air bien avec cette facilité d'entrée et de sortie facile. Je vais aller jusqu'à l'exagérer à 200 millisecondes. Je peux le faire, c'est 1/5 de seconde. Nous allons le prévisualiser. Jetons un coup d'œil. R pour une réinitialisation, achetez maintenant. C'est trop rapide. Essayons 400. Réinitialiser, cliquez dessus. Encore probablement un peu vite, mais vous comprenez l'idée. Il est plus facile de jouer avec l'animation. Facile à entrer et à sortir, c'est plutôt cool. C'est comme un rebond, alors regardons un peu. Ça va probablement encore un peu vite, jetez un coup d'œil. Trop rapide mais cool. Faisons en sorte que ça aille pour y aller. C'est ça. Enfoncez, je vais l'aider à entrer et à sortir, et je vais le faire passer à 600. Il y a beaucoup de choses à jouer avec ça. Cela dépend de la durée et du type d'assouplissement que vous faites, quel type de direction doit aller, jusqu'où elle doit se déplacer ? R pour réinitialisation. Comment s'appelait-il ? La facilité d'entrée et de sortie est cette option de rebond. Avant de partir, nous allons le truquer un peu. Vous le faites également sur votre exemple. Je ne vais pas le faire en classe car je ne peux pas vraiment le vérifier. Ce que je vais faire, c'est juste me suivre. Nous voulons passer de En savoir plus. Vous pouvez le faire à partir du texte. Il vaut mieux le faire à partir du bouton. Vous pouvez le regrouper et le faire à partir des deux. Je vais juste le faire à partir du bouton à l'extérieur. Je vais dire que En savoir plus va dans nos détails sur le produit, vous pouvez en savoir plus à ce sujet. Nous allons faire le texte ici. Lorsque vous cliquez souvent sur un en-tête sur un site Web, il retourne à la page d'accueil. C'est ma page d'accueil. Ce que je vais faire, c'est que je vais dire que vous allez voir celui-là. Celle-ci, allez à celui-là. Maintenant, quelle animation utilise-t-elle ? Il va utiliser la dernière chose que vous avez utilisée. J'utilise beaucoup de poussées. Si vous n'aimez pas pousser, nous allons devoir tous les changer. Choisissez-le d'abord avant de commencer à cliquer dessus. Il se souviendra juste de la dernière. Je m'en tiens à pousser. L'autre chose à noter sur animation et juste les interactions en général et le prototypage, si je copie ceci et que je supprime celui-ci, cliquez dessus, cliquez dessus, appuyez sur « Coller », pouvez-vous le voir apporté avec elle ? Tant que vous êtes en mode prototype, vous pouvez copier et coller sur différents modèles. Cela signifie que vous pouvez configurer l'intégralité de la navigation sur l'un d'eux et simplement le copier et le coller. Disons que c'est celui-là. Je veux qu'il aille sur la page d'accueil. Je fais en sorte que ça aille sur la page d'accueil. Je n'ai pas encore de bouton de partage et de compte ni même de navigation mobile, mais je pourrais simplement les copier tous et les coller dessus et tout simplement pour gagner du temps. Achetez maintenant, vous finissez avec un spaghetti. Il devient de plus en plus spaghetti-ish, selon la précision que vous souhaitez que votre prototype soit détaillé. Ce que je veux faire, c'est m'assurer que ce bouton d'achat va ici. Mon bouton d'accueil est en marche, mon bouton d'accueil s'en va. Vous n'avez pas besoin de le faire glisser. Après un certain temps, c'est vraiment facile avec seulement quatre d'entre eux, car il suffit zoomer et de faire glisser rapidement celui-ci, de l' obtenir ici. C'est faisable. Au bout d'un moment, ce n'est pas le cas. Vous avez vu que Microsoft Materials est un. Non, Microsoft Teams un. Il n'y a aucune chance de truquer ça avec le glisser-déposer. Ce que vous pouvez faire, c'est que vous pouvez cliquer dessus. En fait, ne cliquez pas dessus. Vous le sélectionnez en mode prototype, cliquez sur « Interactions », appuyez sur « Plus » et vous allez dire Tap. Que se passe-t-il ? Lorsque vous touchez celui-ci, il va accéder à la page d'accueil. Vous pouvez le faire de cette façon et jouer avec votre dissolution. Au lieu de le faire glisser, vous pouvez simplement le sélectionner, ajouter cette interaction et le faire de cette façon. Je vais me dissoudre. Je pense que c'est tout. Accrochez-vous. Laissez-moi réfléchir. Je vais le mettre en pause. Accrochez-vous. De toute façon, il est difficile de faire les choses correctement, lorsque vous êtes dans la vue du bureau. Dans notre prochaine vidéo, nous allons tester cela sur notre téléphone. Ensuite, vous le saurez instantanément. Vous direz : « Je suis coincé et je ne peux pas revenir. » Vous pouvez mettre à jour votre prototype. mettre à jour. Nous ne l'avons pas fait. Si je veux mettre à jour celui-ci depuis Push, vous pouvez cliquer sur cette ligne et cela apparaîtra. Sinon, cliquez dessus, puis vous pouvez cliquer sur « Page d'accueil » et cela revient à nouveau. Pour en supprimer une, vous pouvez le faire glisser vers lui-même pour qu'elle disparaisse ou cliquer sur la ligne comme nous l'avons fait auparavant et la supprimer. Il commence à devenir prototypé. Jetons un coup d'œil à notre prototype. Que pouvons-nous faire ? Retournons à la maison. Avez-vous remarqué que si je clique sur un endroit où ça ne fonctionne pas, ces petits points bleus apparaissent ? C'est juste pour aider les personnes qui testent, même vous-même, ce qu'il faut réellement cliquer parce que nous faisons, disons un flux de tâches et que c'est très simple, il n'y a que quatre diapositives dedans. Je veux seulement tester ça. Je ne veux pas que les gens y aillent, j'ai probablement retiré ce bouton plus pour mon test juste parce que cela va confondre le test lui-même. Mais peut-être qu'il va à la page des détails du produit, mais si vous cliquez n'importe où, cela devrait mettre en surbrillance celle-ci. Achetez maintenant, achetez, salut, félicitations. La poussée et le rebond sont un peu bizarres, mais vous comprenez l'idée. C'est de l'animation. Ce que vous pensez probablement, c'est je ne suis pas sûr de pouvoir utiliser Figma car il n'a pas la meilleure plus étonnante transition d'animation au monde. Jetons un coup d'œil. Il ne s'est pas dissous. Où sont mes pages peel et les portes de mon groupe ? Ils sont en fait illégaux dans la plupart des pays maintenant parce qu'ils sont terribles. Pour votre plaisir de visionner, éditeur, pouvons-nous conclure avec un peel de page ? 24. Test sur votre téléphone avec Figma Mirror: Bonjour. C'est l'autre côté de mon bureau. Normalement, vous regardez de cette façon de l'autre côté. C'est ce à quoi ça ressemble. C'est ma cochonnerie et mes tables d'harmonie pour essayer de le faire sonner bien. C'est la nuit, ce n'est pas maussade, c'est juste sombre. Il est onze heures du soir, et nous préparons des cours pour nous. Dans cette vidéo, nous allons regarder quelque chose appelé Figma Mirror. Qu'est-ce que c'est ? C'est une façon de tester comment sur un ordinateur [inaudible], en essayant de concevoir un site Web téléphonique et un site Web mobile rapide ou une application. ne sert à rien de passer tout votre temps là-dessus, vous devez tester sur l'appareil, cette chose. Il existe une application que vous pouvez télécharger depuis Android ou le Mac App Store, vous pouvez dire que je ne l'utilise pas. Mais ça s'appelle Figma Mirror. Ils sont peut-être en train de changer ce nom. Vérifiez les commentaires s'ils l'ont mis à jour, mais ils s'appellent Figma Mirror. Vous vous connectez avec votre nom d'utilisateur et votre mot de passe Figma. Alors, comme par magie, ça commence à se produire. Vous n'avez pas besoin d'être dans le même réseau. C'est Magic. En gros, ce qui se passe, c'est que je peux vous montrer ici ? Je vais vous montrer, pouvez-vous zoomer là-dessus ? Vous pouvez. En gros, si je clique sur différentes choses ici sur mon bureau, vous ne pouvez pas voir ce que je fais ici. Cliquez parfaitement sur ma page de détails, où est-ce ? Page de détails ? C'est là. Cliquez sur Mon Check Out. C'est une mise à jour en direct, et encore mieux. En fait, c'est en direct, indirectionnel. Cela fonctionnera-t-il ? Peut-être. Cliquez sur mon bouton Accueil. Que pouvez-vous voir ? Bouton d'accueil. Le bouton Accueil est trop petit car je peux à peine cliquer dessus, on ne voit pas ce que je fais. bouton Acheter maintenant, vous entendez cela. Ensuite, les achats. Sur quoi se concentre-t-il ? Est-ce qu'il se concentre sur la bonne chose ? Peut-être s'estompe. Regardez à quel point c'est bon. Je peux vraiment y travailler, et ce que je vais vous montrer, c' est que le bouton Acheter maintenant est trop petit. Les textes ont l'air bien sur le bureau, mais ils sont minuscules là-dedans. Le bouton Acheter est tellement grand lorsque je vais à Acheter maintenant. Comment filme-t-on la caméra ? C'est probablement terrible, mais ce bouton d'achat me fait du bien. J'ai aussi du mal à cliquer sur les boutons le long du nerf. 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. Le logo est trop petit. texte sur la page d'achat est bon qu'elle ait obtenu la page. Je suis coincé sur un membre ou une page. Je n'ai pas de prototypage sur la page de détails des produits plus de date. J'ai oublié de modifier. Vous l'avez probablement vu dans la dernière vidéo, mais c'est quand vous arrivez à cette étape et que vous êtes comme la tester vous-même. Vous êtes comme, c'est trop petit ou c'est une couleur hideux, le vert. En fait, c'est probablement plutôt bon. Faisons une mise à jour en direct parce que c'est plutôt cool. Je vais régler le zoom pour que nous puissions le faire un peu mieux. Attendez là, je vais changer la caméra. Il aurait probablement dû le faire au début. Regardez ça, il est mis à jour en direct. Je déplace des choses sur mes ordinateurs de bureau. Vous regardez mon ordinateur portable là-bas, mon téléphone là-bas. Vous pouvez simplement travailler. Quand je travaille, surtout à cette étape initiale, taille des polices, n'est-ce pas prêt ? Je n'ai pas de support, quel est mon téléphone couché par terre ? Mais pour que vous puissiez le voir. C'est vraiment pratique maintenant. Je peux passer en revue et dire en fait la taille de police ici. Que dois-je faire ? C'est un groupe, donc je vais entrer dans mon groupe et je vais utiliser de haut en bas jusqu'à ce que je trouve quelque chose. Ce que je regarde, c'est que je garde un œil sur mon téléphone ici. D'accord. C'est ce que je regarde. Je suis comme si c'est une taille de fichier accessible ? Ce que vous trouverez est presque toujours 16, c'est bon. Vous ne pouvez pas voir parce que c'est de ce côté de mon bureau, mais j'ai atteint 16 points que Jim est vraiment que je connais un bon cerveau. Je ne peux pas le détruire. Quinze si vous essayez d'être cool et fantaisiste et que vous essayez de le donner petit. Mais s'il n'a pas arrondi les 12 et 13 points, ça devient une chose assez délicate à. C'est bon pour certaines choses, mais pour un gros bouton d'achat tout clic maintenant, c'est un peu petit. Je veux passer par là et passons à travers, je les envoie ensemble. faut faire de même pour le bouton Lumo, c'est difficile de le faire d'une seule main, mettre mes mains ici, mais je n'entends pas les jointures dans la vidéo. Mais vous avez compris l'idée. Vous pouvez apporter des modifications très rapidement. Voyez à quoi ça ressemble sur un téléphone. C'est presque instantané. Je suis assez étonné par la façon dont cela fonctionne. Si vous concevez une tablette, possédez une tablette. Si vous concevez pour un ordinateur de bureau, c'est un peu plus facile car vous pouvez simplement le faire sur votre bureau, mais sur un téléphone mobile ou une application ou sur un site Web mobile rapide comme nous le faisons, ce top fait partie de notre plan, mais c'est secondaire. La plupart de notre public va provenir de publicités payantes parce que j'en ai parlé au client. est le genre de conversations dont vous parlez aussi comme la génération de leads, alors qu'elles proviendront, elles proviennent de publicités Facebook. Tout va venir des téléphones portables. Si ça vient de Youtube, comment faire des vidéos, comme beaucoup de mes cours le font. Ensuite, c'est d'abord le bureau. Genre de questions auxquelles vous allez vous poser en tant que concepteur UX, quoi devons-nous concevoir en premier ? Il est tard et étonnamment aidé avec toutes ces caméras et ces lumières. Faisons une autre vidéo avant d'en avoir un peu. Voici Figma Mirror et testez votre prototype sur votre téléphone. On se voit dans un peu. 25. Projet de cours 04 - Test sur votre téléphone: C'est l'heure du projet de classe. Je veux que vous téléchargiez l'application Figma Mirror depuis Google Play ou l'App Store. Je les ai tous les deux mal nommés dans la dernière vidéo. Va là-dedans et cherche Figma Mirror. Si cela ne fonctionne pas pour vous pour quelque raison que ce soit, vous pouvez en fait, sur votre téléphone portable et non sur le bureau, aller sur figma.com/mirror. Il fonctionne principalement de la même manière. Connectez-vous avec votre compte Figma et testez votre téléphone. Ce que je veux que vous fassiez, c'est juste avoir une critique de votre propre travail. Les polices sont-elles assez grandes et assez lisibles ? Les couleurs sont-elles facilement contrastées ? Est-ce que je peux vraiment voir un texte qui se trouve au-dessus de tout cela. Je sais que c'est un cadre métallique. Il ne se passe pas grand-chose. Ces polices sont-elles suffisamment grandes pour la description ? Ils ne doivent pas tous avoir 16 ans et massifs, mais certaines parties doivent être plus grandes. Celui-là, cette partie plus petite ici, doit-elle être plus grande ? Je ne sais pas. Laissez-moi le tester depuis mon téléphone. Assurez-vous également que vos boutons sont tous câblés. Accédez au prototype et assurez-vous qu'ils sont tous connectés lorsque vous testez. De plus, sont-ils facilement cliquables ? Les boutons sont-ils assez grands ? La dernière, laissez-moi revenir en mode design, j'ai eu des problèmes avec ceux-ci. Ils ne se sentaient tout simplement pas cliquables. Ils n'étaient pas très gentils, juste très gênants à cliquer. Ce que je ne veux pas faire, c'est, pouvez-vous les voir là-bas ? Je vois bien que celui-ci ici doit être plus grand. Pas l'icône réelle, j'aime bien cette taille. C'est le cadre à l'extérieur. Contrairement à un groupe, souvenez-vous d'un groupe, nous ne pouvons pas gérer le cadre de manière indépendante. Mais parce que nous avons affaire à ces cadres sympas avec le petit symbole de hachage, voyons que cette chose à l'intérieur et à l'extérieur, qui est le cadre, peuvent être de tailles différentes. Nous allons avoir un tout petit peu avancé ici, mais bon, faisons-le. Je ne veux pas prendre l'avantage, car ce que je veux faire, c'est que je veux entrer dans ce groupe, bonjour groupe, ou n'importe laquelle de ces choses, aller à l'intérieur d'eux tous. En fait, je ne veux pas que tu fasses évoluer. Essayons de faire correspondre la taille du cadre, ce qui est cool. Mais en fait, je n'en veux pas. Je voulais que tu dises je pourrais rester au centre, ne pas évoluer. Cela signifie que quand je saisis mon cadre, qui est celui-ci à l'extérieur et que je l'attrape, regardez. Je peux l'agrandir. Il reste au milieu, ce qui est cool, mais je peux arrêter de rendre mes boutons beaucoup plus cliquables sans déformer l'image ou essayer d'agrandir l'icône. Même chose avec celle-ci ici, je peux y aller. Il y a deux vecteurs, je vais cliquer sur les deux en maintenant la touche Maj. Ne faites pas d'échelle, s'il vous plaît. Il suffit de rester au centre. Génial. Retournez à l'encadreur à l'extérieur. Je vais dire, en fait, être un peu plus gros. Joli. Là, je n'ai pas changé la taille. J'ai rendu la zone cliquable plus facile à atteindre et c'est la seule que j'ai réellement montée, n'est-ce pas ? Vous comprenez l'idée. C'est ça. Testez votre cadre filaire et vérifiez vos projets de classe. Pouvez-vous prendre une photo de votre téléphone ? Tout le monde ne le peut pas. Si vous avez le téléphone d'une autre personne, prenez-en une photo. Je veux juste le voir à l'écran, preuve que vous l'avez fait dans un joli petit graphique sympa de votre cadre filaire sur l'écran. Comment vous sentez-vous maintenant ? Je me souviens que lorsque j'ai fait mon tout premier cadre filaire, je ressens toujours ce bourdonnement, ce que j'ai fait, c'est sur un appareil. C'est sur mon ordinateur, c'est excitant, il interagit, je clique sur des boutons. Je me sens comme un professionnel. Je ne sais pas. Est-ce YouTube ? De toute façon, prenez une photo. Si cela ne fonctionne pas et que vous ne pouvez pas, vous n'avez personne d'autre pour prendre une photo de votre nouvelle application filaire. Il suffit de prendre une capture d'écran depuis votre téléphone et de la télécharger sur la partie affectations de ce site Web. C'est ça. Je vous verrai dans la vidéo suivante. 26. Qu'est-ce que l'animation intelligente et que sont les retards dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons regarder l'animation dans Figma. Jusqu'à présent, nous avons fait plus de transitions de pages avec le tout glissant, mais maintenant, êtes-vous prêt pour cela ? Attendez-le. C'est la flèche qui glisse à l' intérieur, juste la flèche plutôt que le tout. Pour ce faire, nous devons apprendre quelque chose appelé Smart Animate et nous devons ajouter un délai à nos pages. Allons-y et je vais te montrer comment y arriver. Pour animer Figma comme un seul élément, nous serions simplement en train d'animer une transition entre le tout. Nous voulons juste que cette flèche s' installe, comme au début. Ce que je veux faire, c'est que vous avez deux du même cadre. Nous allons avoir la confirmation de cette première, nous allons le dupliquer. Maintenez la touche Option enfoncée sur un Mac, la touche Alt sur un PC, pour que vous en ayez deux. Sur ce premier, je veux qu'il soit hors écran, ici. L'un des conseils est que lorsque vous faites de l'animation, c'est je défais cela, c'est juste avoir un peu d'espace. Je vais le déplacer ici pour servir d'espace à ma flèche. Nous allons avoir cette première confirmation où la flèche va s'éteindre et la seconde où elle sera allumée. Pour que la magie se produise, il faut relier ces deux-là. Je vais cliquer sur ce cadre et je veux dire prototype et je veux dire aller là-bas. Lorsque vous y allez, je veux que vous utilisiez Smart Animate. C'est celui que nous avons ignoré plus tôt. Fondamentalement, cela fonctionne lorsqu'il y a des objets du même nom sur deux cadres distincts et qu'il les animera. Vous pouvez les voir sur ce premier et vous pouvez les voir sur le second. On peut voir : « Hé, ils sont dans des positions différentes. Je suis intelligent, je vais les animer. » J'utilise la facilité à l'intérieur et à l'extérieur parce que c'était joli. Allons y aller. Confirmation, cliquons sur « Aperçu », et cela ne fonctionnera pas. Je sais que ça ne marchera pas. Ce sera la grande chose qui vous attirera, surtout avec ces animations slide-in. Allez, cliquez une fois, il s'est estompé. Ce qui se passe, c'est que cette flèche ne fait pas encore partie de ce cadre, ne fait plus partie de ce cadre. Il y a eu une époque où j'ai regardé, je fais partie de ce cadre. J'ai un coup d'œil ici dans mon panneau Calques. J'ai cette ligne 13 sur la page de confirmation, mais regardez ce qui se passe. Placez dans le panneau Calques, si je le fais glisser vers l'extérieur, il en fait toujours partie. À un moment donné, ça devient [inaudible]. Vous voyez ? Je ne sais pas d'où vient ce bruit, mais vous y allez. Il s'agit de la ligne 13 et ce n'est pas dans ce cadre, ni dans ce cadre, donc il ne sait pas quoi faire. En gros, il est dit qu'il n'y a pas de flèche. Maintenant, il y a une flèche, c'est pourquoi elle s'estompe. C'est vraiment important pour s'assurer qu'il fait partie de ce cadre. Vous pouvez l'avoir ici. Il suffit de vous assurer qu'il se trouve à l'intérieur du cadre et de le faire glisser. Un petit conseil, c'est que nous avons deux confirmations et c'est de la douleur. Il est difficile de savoir lequel est celui dans le panneau des calques, donc je vais faire confirmation A et la confirmation B juste pour être utile ici. Mon TOC dit que A doit être inférieur à B, A, B, et voilà. La confirmation A n'a pas ma petite ligne là-dedans. Tout ce que je vais faire, c'est de le faire glisser. Vous y voilà. Peu importe où il se trouve, tant qu'il se trouve dans ce cadre et qu'il y en a un qui correspond dans ce cadre, donc il y a la ligne 13 là, et il y en a une là, ça va marcher. Allons faire un test. Je vais utiliser ma flèche arrière une fois et je n'utilise que la flèche. Vous pouvez cliquer ici si vous le souhaitez. Je suis à la page 4, cliquez une fois, une petite animation. C'est la base de Smart Animate. Tant qu'il y a quelque chose sur les deux cadres qui porte le même nom et qu'il fait quelque chose de différent, cela fonctionnera. Essayons deux ou trois choses. Une des choses avec des trucs hors écran sur la confirmation A, nous savons que c'est là. Nous pouvons le voir là-bas, mais nous ne pouvons pas le voir ici. Ce que nous pourrions faire, c'est tourner, peut-être que l'un des avantages d'un cadre est sous Design. Lorsque le cadre est sélectionné, vous pouvez dire Contenu du clip, donc le découper. Vous pouvez vraiment le voir et y travailler. Il fait toujours partie du bon ordre des calques. Rien n'a changé, sauf que vous pouvez le voir maintenant pendant que vous travaillez. Mais il y a des moments où vous voulez l'éteindre, donc tout est bien rangé. Maintenant, je peux le voir. Nous avons fait de l'animation du mouvement. En fait, il animera n'importe quoi intelligemment. Supposons que nous voulions commencer ici pour qu'il soit toujours dans la bonne position et que nous sommes toujours dans le bon cadre. C'est toujours un mouvement différent. Mais ici, nous allons ramener l'opacité à 10 % juste pour que je puisse encore la voir. Allons commencer maintenant. Flèche arrière, cliquez une fois, elle s'estompe et le fait. Il y a beaucoup de choses que vous pouvez faire. Je vais juste rester simple pour le moment. Parlons de quelques bizarrerie. L'une des bizarreries est que si vous le renommez, donc nous avons la ligne 13 et la ligne 13, si vous êtes comme ça, je vais faire très attention et bien et renommer au moins un de mes calques. Parce qu'il a un autre nom maintenant, ça ne va pas marcher. Revenons en arrière, flèche arrière, cliquez une fois, juste foutu. Si vous devez en nommer un, c'est très bien, assurez-vous de nommer l'autre, Arrow. arrière, cliquez sur. Que dois-je faire d'autre ? Je n'aime pas le fondu. Je vais remonter jusqu'à 100 %. L'autre chose que je veux faire, c'est que je fais un clic. En gros, ce que je veux arriver, c'est que je veux aller sur la page de paiement, et lorsque je clique dessus, je veux que la flèche commence à se déplacer automatiquement. Parce qu'en ce moment, je dois cliquer dessus et l'apporter. Vous remarquerez également si je reviens en arrière, lorsque je clique dessus, raison de la transition entre la page de paiement et la page de confirmation, car elle fait cela d'avant en arrière, vous voyez réellement la flèche. Regardez. [inaudible]. Nous allons faire deux ou trois choses. Lorsque le Checkout est ouvert et que le prototype est ouvert, je ne veux pas qu'il fasse la folie. Que faisons-nous ? Nous allons faire en sorte que ce soit au toucher, naviguer vers une confirmation, parfait. Mais je ne veux pas emménager. Je vais passer à Instant et je vais réactiver ce clipping. Retour à Design. Peut-être qu'on l'a déjà coupé avant ou on l'a changé pour pouvoir y travailler. C'est génial pendant que vous travaillez, mais si vous commencez à voir des choses bizarres, vous devrez peut-être réactiver le contenu du clip. Allons y aller. Je veux vraiment que ce soit hors écran. Assurez-vous que c'est à l'intérieur de la confirmation A, prêt, il va revenir en arrière. Cliquons sur cet instant. Je veux qu'il se transforme automatiquement. Maintenant, je dois cliquer quelque part et traverser. Nous allons introduire une autre transition entre les images. Fondamentalement, ce que je veux arriver, c'est quand il arrive ici et que nous avons un prototype, le moment où ce qui se passe est que nous disons On tap, Naviguez vers cette autre Confirmation B. Je ne veux pas qu'il soit sur le robinet, je veux juste utiliser celle-ci qui dit après un retard. Je veux qu'il arrive ici et après un délai aussi long, je vais le ramener à une milliseconde. Vous ne pouvez pas avoir zéro pour une raison quelconque, vous devez avoir une milliseconde, soit un millième de seconde. Ce sera instantané. Il va arriver ici, puis passer automatiquement à cela. Il va toujours utiliser notre Smart Animation, c'est donc le seul changement. Allons y aller. Revenons à notre page Achats, cliquez-y. Vous voyez ? Il est arrivé là et il est passé automatiquement à autre chose. Si c'est un peu déroutant, passons à 2 000 millisecondes, et revenons en arrière. Nous cliquons dessus, il arrive ici, attend deux secondes, puis passe à l'autre. L'animation intelligente le déplace. Vous êtes avec moi ? Si vous n'êtes pas avec moi, ne vous inquiétez pas. Nous avons encore quelques autres choses à faire. C'est un peu bizarre, surtout si vous venez d'un autre outil d'animation où vous avez une chronologie et des images-clés. Figma le fait, mais si vous réfléchissez, cela semble un peu maladroit, c'est le cas. Ne le dites à personne. C'est Figma qui fait de son mieux pour être toutes choses pour tous. Les règles permettent de s'assurer que les noms des éléments que vous souhaitez animer, comme notre flèche ici, sont identiques sur les deux images. Vous avez des doublons de la même image. Ne déplacez pas ce que vous ne voulez pas, déplacez ce que vous voulez animer. Vous devez vous assurer que Smart Animate est en transition entre les deux. C'est ce qui fait que la magie se produit. L'autre chose importante, c'est que tout doit être dans les cadres. Ce que je veux dire par là, c'est me souvenir de notre petite flèche ici ? Il ne peut pas être en train de traîner dans le no man's land. En fait, il doit être sur ce cadre et sur ce cadre, même s'il est dans le plan de travail, il faut le regrouper pour y arriver à l'intérieur de ce cadre. Ce sont les règles de l'animation dans Figma. C'est ça. Je vous verrai dans la vidéo suivante. 27. Projet de cours 05 - Ma première animation: C'est l'heure du projet de classe. Votre première animation. Il suffit d'emménager cette flèche. Si vous débutez dans l'animation et que vous vous dites : « Mec, ça va être dur. » Il suffit de faire la flèche que nous avons faite. Mettez-vous au travail sur le vôtre, changez un peu la flèche. Soyez excitant, obtenez une flèche de ligne ou une flèche inversée, faites quelque chose d'un peu différent. Mais faites-le, puis envoyez-moi des captures d'écran. Il suffit de capturer ces deux images ou trois images si vous finissez par en faire plus. Mais oui, si vous en avez besoin, il suffit de le faire, bien simple, nous allons entrer dans plus d'animation plus tard. Si vous êtes un peu passionné, averti et courageux , je suis heureux que vous alliez un peu plus loin. Ici, il est dit que vous pourriez essayer quelque chose, rester simple. Ne faites pas rebondir les choses et faire rebondir les choses. Plusieurs images clés comme celle-ci sont délicates dans Figma, mais peut-être qu'elles viennent du haut. Peut-être utiliser un bol, un carré, une tique qui vient dans quelque chose de différent. À vous de décider. Si vous souhaitez effectuer plus d'une animation, vous pouvez avoir plusieurs images qui présentent toutes des retards et se dirigent l'une dans l'autre. Mais encore une fois, c'est pour les gens qui, je ne sais pas à ce stade, je viens d'un fond d'animation, donc j'aimerais m'y attaquer. Mais si vous êtes nouveau, faites cette simple flèche, et nous en ferons plus tard. L'autre chose, c'est que nous prenons simplement des captures d'écran et les téléchargeons en tant que devoirs. J'aimerais bien voir vos animations, mais dans Figma, juste pour que vous sachiez, il n'y a pas de partie d'enregistrement intégrée lorsque vous entendez. Soyez [inaudible] si ce bouton indique enregistrer mes affaires. vérifiez que c'est peut-être là maintenant. Mais il n'y en a pas pour le moment. J'aimerais bien voir quelles sont vos animations. Si vous savez comment enregistrer votre écran comme moi, j' aimerais voir une vidéo téléchargée sur quelque chose comme YouTube ou Vimeo qui serait géniale ou un GIF animé, mais cela peut devenir un peu compliqué si vous ne l'avez pas fait avant donc la capture d'écran est tout à fait correcte. C'est le projet de classe. Faites votre première petite animation, soyez excité même si c'est juste une vieille flèche ennuyeuse qui glisse. Dans la vidéo suivante. 28. Partage et commentaires sur le fichier Figma avec les parties prenantes: Bonjour à tous. Dans cette vidéo, nous allons partager notre conception avec notre client ou l'une de nos parties prenantes. Nous allons tout d'abord le partager avec Doug. Qui est Doug ? Doug est fictif. J'utilise Doug comme représentant d'un niveau de personne à qui vous allez l'envoyer. Doug est une créature simple. Il déteste les ordinateurs, la connexion et les mots de passe. C'est notre client, je veux lui obtenir ce prototype, ce filaire à ce stade juste pour voir si je suis sur la bonne voie. Gardez-le impliqué plutôt que de le surprendre à la fin. Il est vraiment facile de partager des trucs dans Figma. Je vais utiliser le bouton Partager en haut. Cliquez dessus, et nous allons commencer par une version simple, car ce que je vais faire, c'est simplement envoyer un lien à Doug par e-mail. C'est tout ce que je vais faire. Je vais le copier, je vais le fermer, je vais ouvrir un navigateur et je vais prétendre être Doug. Voici Doug. Je lui envoie un lien par courriel, il a cliqué dessus dans son adresse e-mail, et c'est ce qu'il voit. bien, c'est que Doug n'a pas à s'inscrire, obtenir des mots de passe ou à obtenir un essai gratuit ou tout ce jazz, ça marche, ce qui est vraiment cool. Il peut se déplacer. Il ne peut pas faire beaucoup de choses sans se connecter, mais il peut le regarder. Il ne peut pas commenter à ce stade, on fera ça dans la prochaine partie, mais il peut le regarder et se dire : « Ouais, c'est cool. J'aime bien ça », ou « Hé, qu'est-ce qui se passe ? Donnez-moi quelques commentaires à ce stade précoce de mon filaire, juste pour m'assurer que je suis sur la bonne voie. » L'autre chose qu'il peut faire, c'est que ce petit bouton Play apparaît toujours ici, pour qu'il puisse cliquer dessus, vous devrez peut-être lui dire exactement où il se trouve, et il peut passer par et réellement le prototyper sans avoir à se connecter. Il peut le voir, il peut cliquer sur En savoir plus. Il peut se rendre compte que vous ne pouvez pas aller de En savoir plus à l'achat. Retour à la page d'accueil. Il peut voir tout ça, ce qui est cool. Une chose qui pourrait confondre Doug, ce que cela fait pour certains de mes clients, est qu'il a ouvert un onglet séparé, et que vous ne pouvez pas fermer cela et revenir à ce que vous aimez. Vous pouvez cliquer sur tout, mais un onglet séparé s'ouvre lorsque vous cliquez sur ce bouton Lecture. Vous voyez ça en haut ? où ça devient encore plus frais, comme ça pourrait faire flipper Doug. Ça pourrait vous faire flipper. Il travaille là-dessus, ce que vous remarquerez, c'est que je vais faire passer Doug sur le côté, alors prétendez que ce côté est Doug et que ce côté est ma vieille Figma habituelle. Mettons un écart entre les deux. C'est donc lui sur son ordinateur chez lui et c'est moi qui travaille comme je l'ai fait avant. Ce que vous remarquerez, c'est qu'il peut voir ma flèche. Figma est un outil de conception collaboratif vraiment incroyable. Probablement pour Doug, il n'appréciera pas ça. Il va être attendu que je le suive avec ma petite main. Je peux même voir Doug, regardez, il y a sa main. Si je le déplace et que je clique dessus. Quoi qu'il en soit, on peut se voir, c'est le but. Disons que Doug dit : « Oh mec, c'est bien, mais qu'est-ce que c'est vert ? » Je me dis : « Vite avant que Doug ne le voit », on peut choisir la même couleur, aller et il me dit : « Je déteste l'homme vert. vert est la pire couleur du monde. » Je me dis : « Aha. Qu'en est-il du rose ? » Il dit : « Je déteste plus le rose. » « Qu'en est-il du rouge ou de l'orange ? » Ce qui se passe, c'est une collaboration en direct. C'est incroyable lorsque vous travaillez avec d'autres designers et autres créatifs, car vous faites simplement quelque chose et nous pouvons tous y travailler ensemble. Mais à ce stade, on travaille juste avec Doug et il n'a rien à faire d'autre. Il peut juste regarder, on n'a pas à le mettre à jour devant lui, mais c'est un petit bonus cool en plus. Maintenant, ramenons Doug. Allez, Doug. Si Doug veut utiliser des commentaires qui est probablement l'une des fonctionnalités vraiment intéressantes, il peut s'inscrire gratuitement avec Google ou s'inscrire avec son adresse e-mail et il pourra commencer à commenter. C'est une chose que je pourrais convaincre Doug de faire. Vous pouvez réellement utiliser une petite épingle et commencer à commenter. Faisons quelques autres choses avant de commenter. Je vais retourner à Figma, alors oublie Doug. Au revoir, Doug. Une ou plusieurs choses que vous pouvez faire en tant que designer, c'est que vous pouvez entrer ici, et lorsque vous allez partager, vous pouvez dire, je veux créer un lien vers un cadre spécifique. Supposons que la page d'accueil soit bouclée, il y a juste des problèmes avec la page de détails du produit car il n'y a pas de bouton cliquable. Faisons ça terriblement. Faisons en sorte que cela soit cliquable et nous pouvons passer à la caisse. Que fait-il ? Instantané, ça va faire. Ce que je peux faire maintenant, c'est que je peux d' abord sélectionner le cadre , puis aller partager, puis cette option fonctionnera. Il dira que lorsque j'enverrai ce lien, il sera en fait lié à ce cadre spécifique, celui-ci ici, il commencera par là. S'il est grisé, cela signifie que vous n'avez rien sélectionné et que je vais partager, vous ne pouvez rien cocher. C'est une chose. Permettez-moi de vous montrer ce que fait les commentaires. Laissez-moi améliorer Doug juste là. J'ai amélioré Doug, c'est Doug maintenant. Avant qu'on ne puisse faire que des trucs très limités, maintenant avec sa connexion gratuite, il obtient probablement un peu trop de détails pour le vieux pauvre Doug. Il dit : « Pourquoi puis-je voir le code CSS ? » Mais la différence maintenant, c'est qu'il a des commentaires. Doug, ici, se dit : « D'accord. J'aime bien ça. » Je ne vois pas mon commentaire. Doug va écrire : « Pourquoi n'utilisons-nous pas de vraies images ? » Signé, Doug. Doug a un filaire, c'est pourquoi. Il poste sur son, de mon côté, je peux voir Doug maintenant, il est là, et je peux commencer à voir des commentaires arriver. Je peux le voir là et je peux voir qu'il est épinglé et je peux voir qu'il va là et je peux répondre à Doug et dire : « Doug, je vous l'ai dit un million de fois, c'est juste un filaire pour les tests. » Envoyez ça à Doug. Je devrais mettre un visage Smiley là-dedans. Vous voyez, nous pouvons avoir cette collaboration entre mon client et moi. Ils peuvent épingler des choses, tout ce dont le client a besoin est d'une connexion gratuite ou ils peuvent simplement le faire par e-mail et n'ont pas à se connecter du tout. Commenter, c'est génial. Il y a deux ou trois choses. Pour moi de mon côté, oublions Doug maintenant. Allons-y. Vous pouvez voir ici, il y a deux D. J'aurais dû les appeler effilochés ou quelque chose comme ça, mais voici deux Doug maintenant Il y a là, et c'est le gars jaune. Vous pouvez avoir des tas de personnes différentes qui le regardent. Beaucoup de clients différents, beaucoup de testeurs différents. Je vais passer de mes commentaires, je ne veux plus être sur les commentaires car je peux faire des commentaires moi-même. Je veux revenir à mes outils que je connais et que j'aime, et en fait, je peux revenir aux commentaires et je peux dire celui-ci ici, je peux cliquer dessus et je peux dire, voir ici, dossier résolu. C'est l'une de ces choses que nous avons fini maintenant. J'ai fait les ajustements en fonction de cela ou moins j'ai répondu à son et j'ai fini cela et je peux travailler en tant que designer à travers les différentes notes de mon client ou de mon testeur ou de mon chef de produit à commenter est assez sympa et fluide, et en temps réel. Nous allons terminer cette vidéo. Dans la prochaine étape, nous expliquerons comment partager pour édition. Il va introduire une autre partie de l'expérience Figma, savoir les équipes Figma. Je vous verrai là-bas. Au revoir, Doug, au revoir Dan. Je suis Dan. 29. Partager l'édition avec d'autres UX Designers dans Figma: Dans cette vidéo, nous allons faire un pas de plus. Nous envoyons notre dossier pour être partagé avec notre client et cela s'est bien passé. Mais supposons que nous allons partager cela avec d'autres collègues travaillant dans une équipe de conception UX dans une entreprise et que plusieurs d'entre vous travaillent sur des documents. Lorsque vous partagez cela avec quelqu'un, il peut commencer à travailler sur le projet et nous pouvons travailler ensemble. Pour ce faire, nous devons introduire ce qu'on appelle des équipes et des projets d'équipe. Nous sommes allés jusqu'ici avec seulement les brouillons et en utilisant notre partage. Nous regardons ici, nous avons donné une indication. Si je veux partager, je peux l'envoyer pour dire Doug et je veux qu'il soit rédacteur en chef, mais ça dit, hé, d'abord pour être rédacteur en chef, il faut le déplacer dans un projet d'équipe. Je vais cliquer sur Fermer, ici ça dit que c'est bien, voulez-vous déplacer ce fichier ? Beaucoup de choses indiquent qu'il faut faire partie d'une équipe. Allons-y et regardons ça de façon manuelle. Nous pouvons déplacer cela et cela se produira automatiquement, mais regardons le long chemin juste pour que vous puissiez mieux le comprendre. De retour dans ma petite maison, ici, nous avons travaillé dans des brouillons. Vous pouvez avoir déchargé des brouillons, un bazillion de brouillons. Toutefois, si vous souhaitez le partager avec d'autres personnes et y travailler, vous devez le transférer dans l'un de vos projets. Le vôtre sera nommé différemment selon la façon dont vous avez configuré Figma, mais c'est ce qu'on appelle une équipe. Considérez une équipe comme un projet comme Scott Headphones. En tant que concepteur UX indépendant, vous avez probablement environ 20 équipes ou 30 équipes pour différentes entreprises. Certaines entreprises n'ont besoin que d'une seule équipe avec de nombreux projets. Les projets peuvent être des choses comme, hé, c'est leur site Web mobile, le site Web de bureau, il peut s'agir de médias sociaux sur lesquels nous travaillons, il peut s'agir de dépliants que nous avons faits ou de la refonte de cette page Web, puis redessiner à nouveau. Beaucoup de projets différents. Vous partagez ce genre d'équipe à l'échelle de l'entreprise avec les différentes personnes. Je peux aller voir les membres et dire que je veux vous inviter, vous, vous et vous, dans cette équipe et dans le cadre de ce projet, nous allons avoir des postes de travail mobiles, ventes [inaudibles], tout ce genre de choses. Quoi qu'il en soit, c'est l'aperçu de base de ce que sont les équipes et les projets. Revenons à ce sujet. Le vôtre sera différent. Le nom sera différent. Mais on vous a donné, sein de votre équipe, il y a déjà un projet d'équipe. C'est ce truc ici. Vous pouvez le voir de cette façon ou de cette façon. C'est la même chose. Nous allons le supprimer pour le moment et créer le nôtre. Ils vous ont donné un projet d'équipe prédéfini avec des trucs. Nous pouvons l'ouvrir, jeter un coup d'œil. Il s'agit de la valeur par défaut pour Figma pour le moment. Il y a juste un tas de styles, beaucoup de choses se passent ici, des atouts différents. C'est utile. Je trouve que ça saute probablement trop pour un débutant. Nous allons le fermer et vous pouvez le garder si vous le souhaitez. Vous n'êtes pas obligé de le faire. Retour à la maison. Je vais me débarrasser de ce projet, cliquer dessus avec le bouton droit de la souris, le supprimer. Désolé, projet d'équipe. Je crée le mien. De plus, créez mon propre projet. Celui-ci va être le commerce électronique. Il doit être minuscule e pour une raison quelconque, site de commerce électronique. Il est créé. Maintenant, tout ce que nous devons faire, c'est cette ébauche ici, celle sur laquelle nous travaillons s'appelle Scott Ecom 1. Je peux simplement le faire glisser dans ce projet et cela déverrouillera l'édition. Vous dites : « Pourquoi ? Quelle est la différence entre les brouillons et cette équipe avec le projet d'équipe avec un fichier dans ce projet d'équipe ? » Cela débloque certaines fonctionnalités afin que je puisse réellement collaborer avec cette personne. J'ai toujours un fichier ouvert, rien n'a vraiment changé, sauf que je vois qu'il n'est plus dans les brouillons, c'est dans ce projet. Maintenant, je veux aller en partage. Je peux en faire plus. Je peux autoriser les utilisateurs à modifier. Je peux dire, Doug, on ne veut pas vraiment modifier, mais disons Victoria, Victoria est quelqu'un avec qui je travaille, autre concepteur UX, je peux envoyer son adresse e-mail ici et elle peut commencer à éditer cette chose . Pourquoi est-ce que je vous montre tout cela ? Parce que ça surgit un peu et c'est l'un de ces points d'arrêt où vous passez de gratuit à payant. Parce que nous allons jeter un coup d'œil. Laissez-moi vous montrer. De retour à la maison. Vous vous souvenez des brouillons ? Vous pouvez avoir autant de fichiers que vous le souhaitez dans vos brouillons, mais si vous souhaitez les partager avec un autre collaborateur, il faut le déplacer ici. J'ai une équipe. Cette équipe ne peut avoir qu'un seul projet d'équipe. Dans ce projet d'équipe, vous ne pouvez avoir que trois fichiers. C'est là que vous passez d'aller, ok, je dois payer pour cela parce que c'est génial d'avoir un projet, mais j'en ai besoin de deux, site Web de commerce électronique et cette autre application que je construis pour eux ou cette autre sous-section que je veux se détacher plutôt que de les coincer dans le même projet. Maintenant, en ce qui concerne les fichiers, oui, vous aurez besoin de plus de trois assez rapidement. Maintenant, cela change. Rendez-vous sur figma.com/pricing et ils vous montreront ce que vous avez obtenu. En fait, je vais en parler ici. C'est ce à quoi ça ressemble actuellement. Il va changer. Il est dit gratuit, vous avez droit à des brouillons illimités, mais vous n'avez droit qu'à un seul projet d'équipe et vous n'avez droit qu'à trois fichiers dans ce projet. Il y a aussi quelques autres choses, mais c'est là que vous pourriez vous heurter au produit payant. Il y a des moyens de contourner cela. Beaucoup de gens le font. Nous serons autorisés pour le moment à un nombre illimité d'équipes. Je pourrais avoir un zillion d'équipes différentes avec un projet et trois dossiers. Vous pouvez voir comment cela fonctionne et vous pouvez voir comment cela peut être un peu encombrant, mais c'est assez incroyable ce que vous obtenez gratuitement de cette Figma. Encore une fois, ces règles vont changer. Consultez figma.com/pricing pour voir ce qui est disponible et ce qui ne l'est pas. Pour le réitérer, j'ai ceci, je peux le partager quand il s'agit de brouillons. Je peux le déplacer vers les brouillons. Je peux dire ici que j'en ai fini avec ce projet maintenant et je vais être sournois et le remettre en brouillons pour ne pas avoir à payer. Le problème avec ça, c'est que quiconque était éditeur ne peut plus le voir. Il sort de leur Figma et passe en brouillons. Je dois le partager de cette façon. On y va. Doug, il peut le voir, il peut le commenter, mais il ne peut pas être co-collaborateur là-dessus. Avantages et inconvénients. Il y a quelques autres choses qu' une version payante vous donne qui vont se lancer tout au long du cours, mais c'est l'une des plus grosses. Une équipe, un projet d'équipe et trois dossiers seulement. C'est ça. J'espère que cela a aidé. Cela m'a vraiment confus au début de cet écran ici. J'ai confus comment faire des brouillons, cette chose, cette chose, je peux créer plus d'équipes, ce qui se passe ici. J'espère que cela vous aidera. Je vais laisser le mien dans les brouillons pour le moment. Si vous l'avez traîné vers l'extérieur, remettez-le dans des brouillons. Vous pouvez simplement le faire glisser, cliquer sur Maintenir, faire glisser de l'un à l'autre. Nous reprendrons notre version gratuite régulière de Figma dans la prochaine vidéo. Je vous y verrai. 30. Où trouver l'inspiration pour les projets UX: Bonjour à tous. Dans cette vidéo, je vais vous montrer où je m'inspire pour mes projets. Tout le monde va avoir sa propre place, je me suis dit que je vous montrerais où je vais. Avant de le faire, parlons rapidement de la transition que nous faisons. Nous passons du filaire, faible fidélité à la haute fidélité, quelque chose comme ça. C'est ici que nous allons finir. C'est Hi-Fi, haute fidélité, on dirait que ça va marcher. C'est un prototype plus proche de la chose finie. Toutes les polices, toutes les couleurs, toutes les images et oui, vous obtenez aussi ce désordre. Eh bien, ça dépend. Le mien finit toujours par paraître aussi désordonné. Je les range quand je les envoie à des clients ou à des collègues, mais bon, je finis par renverser les cadres et j'enfreins mes propres règles. Écoutez, rien n'est dans un cadre. Faites ce que je dis, pas comme je le fais, mais ça ne sert à rien de faire semblant, ça peut devenir un peu désordonné. Le filaire est en train d'être terminé, il est en cours de test et maintenant nous sommes prêts à passer à ce Hi-Fi. Comment puis-je m'inspirer maintenant ? Il y a les suspects habituels, Dribble, Behance. Allez dans ces endroits, saisissez comme un kit d'interface utilisateur. C'est un bon terme et il suffit de voir ce qui apparaît. Vous pouvez être très précis comme vous l'avez vu auparavant. J'ai tapé des écouteurs. Ce que vous faites, c'est vous ne cherchez pas à copier, ce n'est pas ce que nous faisons ici. Nous cherchons à avoir des idées comme, « Ooh, je n'ai jamais pensé à ça » ou « Ooh, je ne savais même pas que nous devions avoir ce genre de composant d'interface utilisateur », et simplement commencer à prendre des captures d'écran. Il en va de même pour Behance pour rechercher des kits d'interface utilisateur et vous aurez beaucoup d'idées. Il est également utile même si vous n'allez pas acheter un kit premium auprès de quelque chose comme Envato Elements ou Adobe Stock, il est bon de faire une recherche, kits d' interface utilisateur et d'avoir juste un petit coup d'œil. Prenez des captures d'écran, laissez-vous inspirer par les couleurs et les polices, et profitez-en un peu plus et prenez simplement beaucoup de captures d'écran. N'oubliez pas d'aller sur les produits réels aussi bien que j'ai quitté mon mood board et les captures d'écran que j'ai prises pour m'inspirer de ce matériel de cours, ils sont tous ici. Certaines de ces dernières ne sont que de véritables entreprises qui vendent des écouteurs par elles-mêmes. Je viens de prendre des captures d'écran de mon téléphone et de les télécharger ici et c'est comme ça que j'ai une idée. Parfois, dans ces kits d'interface utilisateur, ils peuvent être un peu comme : « Hé, il n'y a aucune chance que je puisse l'utiliser parce que A, n'est pas accessible ou B, avec tous les termes et conditions et tous les trucs ennuyeux dont vous avez besoin. » Parfois, ils les simplifient pour qu'ils soient vraiment jolis, mais peut-être pas dans la pratique. Allez voir les concurrents et même les entreprises parallèles à ce que vous faites, surtout si vous débutez dans la région. Les écouteurs ne sont pas terriblement nouveaux pour moi, mais si je devais faire quelque chose dans la construction ou le shampoing, quelque chose que je n'utilise pas depuis très longtemps depuis la vingtaine, je devrais aller explorer la publicité du shampooing. De toute façon, je me suis fait moi-même. L'autre chose que vous pouvez faire lorsque vous entrez dans cette inspiration, c'est que vous pouvez devenir assez profond. Il est de mieux en mieux de trouver une chose unique tout à fait spécifique. Disons que dans ce projet, nous faisons comme si c'était joli, c'est amusant parce que nous avons un grand projet. Nous avons un site Web de commerce électronique complet à construire. Souvent, en tant que designer, vous êtes comme : « Hé, pouvez-vous redessiner ma page d'inscription ? » Vous dites : « Bien sûr, je peux. » C'est passionnant du point de vue UX car vous avez probablement déjà des taux de conversion existants et que vous pouvez apporter des modifications, faire des tests AB, aller voir, pouvez-vous l'améliorer ? Avez-vous aggravé les choses ? Quelle langue fonctionne ? Ceux-ci sont passionnants de différentes manières, mais en termes de conception, redessinons la page d'inscription. Vous pouvez aller dans des endroits comme celui-ci que j'utilise. Il y en a peut-être de meilleurs et cela pourrait disparaître. C'est plein de publicités, c'est mon problème avec celle-ci et les images ne sont pas en haute résolution, elles sont un peu basses. Quoi qu'il en soit, cette orthographe de Pttrns. Ce qu'ils ont fait, c'est qu'ils ont une chose vraiment cool où vous pouvez dire, m'a demandé de faire un calendrier. Vous pouvez cliquer sur les calendriers et l'heure, et il y a un tas de captures d'écran d'interface utilisateur provenant d'applications qui me donnent également ma conception Web. Juste des sites différents et la façon dont ils abordent les calendriers parce que vous vous dites : « Est-ce qu'ils vont tous ressembler à ceux traditionnels comme ça ? » Ou regardez celui-là, ils ont des trucs de jours de la semaine. Jetons un coup d'œil à peut-être que vous venez de faire des notifications simples dans le cadre de votre projet d'équipe. Vous êtes en charge de cela et il est intéressant savoir comment traiter les notifications et différents types d'instances. Charts en est un autre ici. Si vous êtes en charge de la représentation des données, infographie en cours, il y a des choses intéressantes. Un autre bon pour ce genre de choses et pour se lancer dans les chemins est Awwwards avec trois W's. Vous pouvez, par exemple, dans Awwwards, aller au menu. Je veux chercher des nominés car cela ne vous donne pas les gagnants, je veux regarder toutes les personnes nominées pour la catégorie e-commerce, parfaites. Utiliser les balises du design de pied de page parce que c'est ce que j'ai été mis en charge. Vous devez redessiner le pied de page, puis vous dites : « Okie dokie, je vais le faire, pas de problème. » Ce que vous devrez faire, c'est que vous devez creuser et jeter un coup d'œil. Vous pouvez l'ouvrir, avoir une vue, vous pouvez le voir, cliquer sur ce bouton. Ils changent également leur site, alors jetez un petit coup d'œil autour de vous, vous pourrez l'ouvrir, aller jeter un coup d'œil et voir ce qu'ils ont fait. Je ne pense pas qu'ils aient même mis à jour leur site Web depuis qu'ils ont été nominés dans ce prix. Vous pouvez plonger dans ces captures d'écran. Où est ce pied de page incroyable. Jetez un coup d'œil. L'ont-ils changé ? C'est cool. Jetons un coup d'œil au pied de page. Oui, c'est plutôt bien. Regardez-moi ça. Je ne sais pas comment ils font cela et je ne le vendrais pas à mon client parce que mon développeur pourrait me tuer. Oui. D'autres bons endroits que je regarde de temps en temps, CSSDesign Awards et onepagelove.com. Ils peuvent également être divisés en différentes choses, mais oui, c'est là que je trouve mon inspiration, beaucoup de captures d'écran, puis je vais vous montrer ce que je fais avec toutes ces captures d'écran dans notre mood board dans la vidéo suivante. Petite note, laissez-le dans les commentaires. Si vous avez trouvé d'autres bons, mieux comme celui-ci où vous pouvez vous retrouver dans une multitude d' applications et de sites Web, faites-le moi savoir. Faites-le nous savoir dans les commentaires, partagez-les avec tout le monde. Si vous avez un bon site qui le décompose à ce niveau très granulaire de choses bizarres du genre, « J'ai besoin d'un écran de connexion ». Regardez tous les identifiants. C'est ça. Je vous verrai dans la prochaine vidéo. 31. Comment créer un moodboard dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons prendre nos captures d'écran d'inspiration, les mettre dans quelque chose qui semble à moitié décent comme un mood board et je vais vous montrer comment faire la version rapide et sale, en fonction du cas d'utilisation du mood board. Laissez-moi vous montrer comment le faire. Pour créer un mood board, vous avez deux planches d'ambiance. Vous avez le mood board pour vous-même en tant que designer , puis le mood board que vous allez envoyer aux parties prenantes. Maintenant, je déteste le mot parties prenantes autant que vous, peut-être pas. C'est la direction, mais le nouvel ex-monde, tout le monde est une partie prenante. Les personnes comme le client font partie des parties prenantes, ce sont peut-être les personnes qui le financent, c' est peut-être l'utilisateur à la fin. C'est un bon terme pour tout le monde, mais je déteste ça. Je déteste penser en dehors des sentiers battus. Aller de l'avant et peut-être donner 110 %. Toutes ces choses de gestion auxquelles je suis allergique, je les déteste, mais bon, les parties prenantes. Celui que vous faites un mood board pour vous-même peut être vraiment rude et prêt. Tout ce que j'ai tendance à faire, c'est de zoomer, aller chercher des captures d'écran de mon mood board, et d'aller les jeter tous dessus, et de faire un mood board. Je vais peut-être les empiler un peu plus près d'ici. Je l'utilise simplement pour obtenir des idées de polices, de couleurs et de mises en page. C'est le Mood Boards numéro 1 simple. Maintenant, ça peut devenir un peu désordonné. Voyez-vous qu'ils ne sont pas dans un cadre ? Juste pour rendre la vie un peu plus facile, ce que j'ai tendance à faire, et vous pouviez voir l'exemple avant, je ne l'ai absolument pas fait. Mais je vais le présenter pour qu'il soit au moins un peu gérable. Donnez-moi une seconde. Maintenant, vous avez vu que je les fais simplement glisser sur mon bureau depuis ma fenêtre du Finder. Vous pouvez le faire ou utiliser le fichier de recherche normal, placer l'image. Ce que je devrais faire, c'est de les mettre dans un cadre pour pouvoir ranger ça. Je peux dire outil de cadre, traînez-en un. Parce que je l'ai traîné sur tout, ils sont tous tombés en place et je peux appeler ça mon humeur board. Vous pouvez devenir plus fantaisiste et créer une page qui s'appelle Mood Board et copier tout dedans. Je ne le veux pas, je vais annuler cela parce que je veux pouvoir le voir pendant que je travaille, mais en fonction de votre flux de travail. bizarre avec un mood board, c'est que pour un client, ce ne sera pas un tas de couleurs et de trucs d'interface utilisateur parce qu'ils vont revenir me voir et me dire : « Pourquoi y a-t-il une chaussure là-bas ? Pourquoi est-ce ici ? » Je vais devoir être beaucoup plus délibéré avec mon mood board et savoir à qui ça va aller. Pour moi, je peux jeter n'importe quelle vieille cochonnerie ici et être heureuse, pour mon client, je dois le faire paraître mieux et il faut qu'il soit un peu plus clair sur ma direction parce que ce truc plus cette chose là-bas n'est pas une direction claire. Ils ne vont pas dire : « Oui, c'est une excellente idée. J'aime la direction que vous prenez avec votre mood board. » Il n'y a pas de direction. Pour en concevoir un chic, vous pouvez simplement faire exactement ce que je fais ici. Il s'agit de traits à l'extérieur, envie de couleurs, tout agencer, de le mettre échelle à l'aide de notre outil CAE pour l'échelle à l' échelle à l'aide de notre outil CAE pour l'échelle et de les mettre en place joliment ou vous pouvez utiliser l'un des modèles. Il existe un tas de modèles dans notre communauté. De retour à la maison, assurez-vous d'être dans la communauté, il y a une petite option ici. Allons dans notre communauté, vous tapez un mood board. Il y en a juste beaucoup de pré-aménagés pour vous. Vous pouvez décider que vous aimez celle-ci, alors je vais cliquer dessus, je vais cliquer sur dupliquer. N'oubliez pas que la duplication signifie qu'elle fait maintenant partie de mon fichier Figma. Vous pouvez voir un tas de mises en page. Maintenant, si vous ne pouvez pas les voir ici, il y a un exemple de mood board. Ça va finir par ressembler à ça et on peut dire à quel point c'est plus agréable. Je ne sais pas où je vais. Un petit raccourci pendant que nous sommes ici est le Maj 1. Maj 1 effectue un zoom arrière pour vous montrer tout ce qui se trouve sur le document et qui peut être vraiment pratique. Placez-le au milieu, puis écrasez Command plus ou Control plus sur un PC. Vous pouvez voir que j'ai créé celui-ci. Sur ce point, ils ont créé des structures de mood board. Vous pouvez simplement le copier, le coller et commencer à ajouter vos images. Maintenant, nous allons mieux couvrir les images plus tard, mais disons que vous aimez la mise en page D, vous pouvez double-cliquer dessus pour entrer dans ce composant. Cliquez sur ce rectangle et accédez simplement à notre fichier. Le fichier Figma F, placez l'image et choisissez l'une d'elles et vous y allez ou ne faites rien de tout cela et cliquez simplement dessus. Vous pouvez voir qu'il est passé à l'intérieur, double-cliquez dessus, déplacez-le. Nous allons couvrir le recadrage et les images plus tard, mais nous voulions juste donner un sens maintenant. À ce stade de ma conception, planches d'ambiance sont en train de se créer. Vous pouvez soit simplement faire celui pour vous-même, le jeter dans un cadre, ne pas vraiment vous en soucier ou bien plus considéré comme un mood board avec lequel je vais aller voir mon client et dire : « Hé, c'est la direction. Avant de commencer à concevoir et à déplacer, à choisir des couleurs et à choisir des polices, c'est le style vers lequel je me dirige. Que pensez-vous ? » Ils peuvent vous donner des commentaires tels que : « Non, je veux que ça ressemble au site Web d'Apple » ou « Non, je veux que ce soit beaucoup plus urbain et branché ». Je pense que vous n'êtes pas immédiatement urbain et branché si vous le dites comme je viens de le faire là-bas. Je ne prétends pas être urbain et branché, mais vous comprenez ce que je veux dire. Ils vont leur donner une idée de l'endroit où vous allez avant de commencer à le faire. Ce dialogue est vraiment important parce que vous pouvez passer des lustres à créer une interface utilisateur qu'ils n'aiment tout simplement pas. C'est tout pour les planches d'ambiance, passons à notre prochaine vidéo. 32. Projet de cours 06 - Moodboard: Bonjour, tout le monde. C'est l'heure du projet de classe. Vous allez créer un moodboard pour votre entreprise. n'est pas celui que je fais, donc pas d'écouteurs, peu importe ce que dit votre mémoire. Votre mémoire est peut-être Bob et il se vend peut-être, je ne me souviens pas de toutes les listes. Mais il peut s'agir de microphones ou de chérie ou, j'essaie de me souvenir de ce que j'avais sur la liste. Mais partez, trouvez juste de beaux éléments, composants d' interface utilisateur, des couleurs que vous aimez, que vous voudrez peut-être utiliser dans votre conception, ainsi que l'industrie dans laquelle votre produit vit et les industries parallèles pour que vous obteniez une idée de ce qui se passe en ce moment, où vous pourriez être positionné, prenez beaucoup de captures d'écran, puis vous pouvez faire l'une des deux choses suivantes. Vous pouvez simplement les jeter tous sur la page comme je l'ai fait, le vieux Dan paresseux, ou vous pouvez les rendre un peu plus fantaisistes en utilisant l'un de ces exemples de communauté Figma que nous avons fait. Je vous ai déjà montré, tous bien agencés. Cela ne me dérange pas, mais gardez juste un œil sur une autre page appelée moodboard. Pour le moment, le mien traîne dans mon mobile low -fi, et il est juste perdu ici, il est difficile de le trouver plus tard. L'année où j'ai besoin d'essayer de trouver, ça va être difficile à comprendre. Il suffit de créer une nouvelle page ici, créer un moodboard, de les mettre tous, puis de prendre une capture d'écran, comme cet exemple ici, et de la télécharger dans les devoirs, les projets, les commentaires de ce site Web. C'est ça. Va faire un moodboard, et je vous verrai dans la vidéo suivante. 33. Comment travailler avec des colonnes et un tableau dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons créer nos cadres HiFi. Nous allons ajouter nos colonnes, c'est ces choses rouges ici, à la fois sur ordinateur et sur mobile et nous examinons la grille qui entre dans la conception de l'application. Maintenant, je me lance un peu dans les mauvaises herbes ici pour expliquer pourquoi nous faisons. Si votre cerveau fond, la seule chose dont vous devez vous souvenir, c'est 12, c'est bien. Il suffit de faire 12 colonnes. Allons-y. Pour commencer avec celui-ci, nous allons renommer les pages. Je vais faire avancer ça rapidement. Ce n'était pas très [inaudible] Je viens de mettre mobile LoFi ou un filaire. Je vais ajouter deux autres pages et nous allons avoir un mobile. Je vais faire avancer cela aussi rapidement. Ce sont ceux sur lesquels nous avons travaillé plus tôt. Je vais commencer par un document séparé pour la chaîne HiFi. Je le fais souvent. Je ne veux pas apporter de bagage de déchets aléatoires dans celui-ci, donc je vais recommencer pour mobile et ordinateur de bureau. Nous allons passer à l'ordinateur de bureau pour un peu, sans autre raison, juste pour mélanger ce cours. Je suis sur mon bureau HiFi, ma version haute fidélité. Je vais aller à mon outil de cadre. Je vais choisir la taille du bureau. Il s'agit d'une taille de bureau très courante à concevoir. C'est joli au milieu de beaucoup de choses. Il va changer au fil du temps. Cela va probablement être changé également. Vous pouvez Google comme la taille de bureau la plus courante dans votre région. Si vous travaillez avec un pays qui n'a pas grandes adoptions technologiques ou le contraire, il se peut que vous ayez de très grands écrans dans votre ville pays ou votre industrie, que vous concevez pour cela. Parlons de nos colonnes. Je vais faire un zoom arrière un peu. Pour faire les colonnes, cliquez sur le nom du cadre, et je vais le nommer au fur et à mesure, page d'accueil. Ici, il y a quelque chose qui s'appelle la grille de mise en page. Je vais appuyer sur le petit bouton Plus et nous allons obtenir une grille et c'est ce que nous ne voulons pas. Nous voulons cliquer sur ces petits paramètres de mise en page de grille et passer de la grille aux colonnes. Nous avons le décompte que nous ne voulons pas ; nous en voulons 12. Nous allons en faire 12 pour commencer et expliquer pourquoi nous utilisons 12. Certains d'entre vous le sauront, certains d'entre vous ne le feront pas. Mais pourquoi utilisons-nous 12 ? Parce que tout le monde le fait et parce que vous seriez vraiment bizarre si vous utilisez 11 ou 13. Nous voulons, je suppose, suivre les normes de l'industrie. n'y a pas de règle réelle qui dit que vous ne pouvez pas utiliser 13, mais votre développeur pourrait vous traquer et avoir des mots forts avec vous parce que 12, il y a beaucoup de frameworks qu'ils vont utiliser qui utilisent 12 par défaut. raison pour laquelle nous l'aimons, c'est qu'elle est facilement divisible en tant que designer. Nous pouvons y aller et dire, très bien, c'est ma nav et ça va être mon mot à dire, boîte de héros, d'accord, avec ma grande image et mon grand message marketing dedans. Ensuite, je vais avoir des boîtes de fonctionnalités et j'en aurai quatre. qui est cool à propos de 12, c'est que tout est facilement divisible. Il y a suffisamment de détails pour séparer ces quatre éléments. Mais nous pourrions aussi y aller, je veux avoir trois boîtes de fonctionnalités, des cartes ou des choses, et c'est toujours facile à diviser. Nous aimons 12. Nous faisons la même chose pour le mobile. Cadre mobile, je vais aller au téléphone, iPhone 8. Je vais aller à la grille de mise en page, toucher le petit plus. Je ne veux pas de grille. J'aimerais une colonne de 12 car Dan l'a dit. Je vais changer la marge, non. La gouttière est l'espace entre les colonnes. Les choses rouges dans mes colonnes sont trop petites, donc je vais en faire six. J'en ai 12 ici et je peux faire la même chose. Je peux dire, en fait, que je veux une navigation mobile en haut, je veux ma boîte de héros. En tant que designer, je sais que j'ai ici tout cet espace supplémentaire sur le bureau, donc j'ai poussé ma boîte de héros depuis les bords. Mais sur mobile, je n'ai pas ce luxe, c'est trop petit. Ma boîte de héros est en train de traverser ici. Quand j'arriverai à mes fonctionnalités, qui ont ces trois boîtes ici, je vais dire que trois en face vont les rendre trop petits. Ce que je vais faire, c'est que je vais soit les empiler l'un sur l' autre , soit dire que sur le bureau, je vais en avoir quatre. On y va. Je vais en avoir quatre pour que lorsque je travaille sur mobile, je puisse avoir le rectangle 2. J'ai peut-être juste à traverser. Faites-en deux, en les sélectionnant tous, et faites mon option de maintien sur un Mac, alt sur un PC. Vous pouvez voir que j'ai exactement le même contenu, mes quatre boîtes de fonctionnalités, mais bien disposées sur mobile. Je dois le tester pour voir à quel point les tiques sont grosses et les images. C'est pourquoi 12 est utile. Il est divisible sur les appareils mobiles, vous pouvez également concevoir pour tablette et ordinateur de bureau. Nous ne l'avons pas abordé spécifiquement, mais je voulais vous montrer quelque chose ici : ce site Web ici. Je viens de choisir un site Web aléatoire. Si vous recherchez des informations sur l'UX et l'interface utilisateur et que vous effectuez des tests, vous finirez probablement par vous retrouver chez HubSpot. C'est de très bonnes ressources ici, j'aime ça. Mais supposons que vous soyez le concepteur de ce site Web. Vous avez conçu une version de site Web, mais regardez ce qui se passe lorsque je le rends plus petit ? C'est comme le grand écran. Quand je passe sur un écran plus petit, pouvez-vous voir ce qui se passe ? Certains changements se produisent. Dans ce cas, juste l'illustration. Quand je descends encore plus petit, disons à la tablette, ils se débarrassent du menu et passent à ce genre d' image de navigation plus traditionnelle ou de menu plus grand. Ensuite, quand je suis encore plus petit, les choses changent à nouveau dans la disposition d'un téléphone portable. C'est ce que vous faites ici. Vous concevez une version de bureau. Vous devriez également concevoir une version tablette et une version mobile. quoi ressemblent toutes ces choses sur les différents appareils et le développeur, la personne qui effectue le codage dira : « Ok, je fais ici une boîte », et sur le bureau, elle ne sera rangée en rangées que sur 10. Quand il arrive au mobile, il sera en fait plein 12. C'est ce qu'on appelle le design responsive. Il y a toutes sortes de choses amusantes avec des points d'arrêt en CSS. Certains d'entre vous vont avoir des informations et des connaissances à ce sujet et quand je dis points d'arrêt dans CSS, vous allez hocher la tête avec sagesse. Certains d'entre vous vont l'être, ce sera vraiment étranger à vous. Mon conseil est que vous n'avez pas besoin d'être codeur pour être concepteur UX. Mais c'est vraiment utile si vous comprenez un peu ce que le développeur ou le concepteur Web va faire par la suite. Utilient-ils un framework ? Quel est le cadre ? Utilise-t-il une grille à 12 colonnes ? Quel est l'espacement par défaut ? Quel est le point d'arrêt ? Qu'est-ce qu'une requête multimédia ? Toutes ces sortes de choses sont très utiles. Vous n'êtes pas obligé de le faire, mais je sais qu'ils sont vraiment utiles lorsque je conçois quelque chose. Je le donne au développeur et ils ne me frappent pas avec leur chaussure parce que j'ai conçu quelque chose de terriblement difficile à réaliser. Si vous voulez vous lancer dans quelque chose de ce genre, même si vous n'y êtes pas à plein temps, vous pouvez consulter le cours de n'importe qui, YouTube, quoi que vous vouliez faire. Mais si vous vouliez consulter un de mes cours, conception web réactive est probablement très bonne. Va voir ça. Cela vous permettra de vous mettre au courant avec beaucoup de ce design réactif. Quoi qu'il en soit, parlons de certains des morceaux que j'ai sautés assez rapidement. Pour arrêter, page d'accueil, nous sommes allés dans les colonnes ici. Douze, nous savons pourquoi nous utilisons cela. Les autres parties, la marge. À quoi sert la marge ? Ce sont les côtés. Si j'ai 80 ans, ce qui va se passer, c'est qu'il y en a 80 de l'extérieur de la marge. Je vais supprimer ces gars ou les couper. Il est évident que vous deviez d'abord insérer vos marges et vos colonnes avant de commencer la conception. J'ai mis quelques bords ici. Disons que je suis en train de concevoir un site Web et que je veux vraiment le concevoir pour une taille vraiment grande. Maintenez la touche Option sur un Mac, Alt sur un PC pour que les deux côtés puissent sortir. Je suis en train de concevoir un site beaucoup plus large. Ce que je peux faire, c'est mettre de belles marges importantes, disons 300, parce que ce que vous remarquerez est sur la plupart des sites Web comme celui-ci HubSpot en est un bon exemple. Quand il arrive à mon écran géant 4K LG, ce qu'ils ne veulent pas, c'est qu'ils ne veulent pas du logo ici et de cette page d'inscription jusqu'ici, comme si elle devenait trop large. Vous connaissez ces grands écrans enveloppants ? Ça deviendrait ridicule. Ce que nous faisons, c'est que nous mettons des marges de l'extérieur. Vous pouvez voir le site Web réel, c'est juste dans ce morceau du milieu ici. Ce truc ici n'est qu'un espace réservé. C'est ce que vous pouvez faire ici. Vous pouvez le mettre dans une marge et il peut simplement s'agir d'une couleur d'arrière-plan. Mais vous commencez votre logo ici, gardez le site Web à l'intérieur, et cela est un peu étiré en fonction de la taille de l'écran. Je vais défaire cela parce que ce n'est pas ce que je veux. Je vais rester avec 14 ans. Je vais dire 14, je veux dire, la largeur de 1440. Il y est là. Parlons du caniveau. La gouttière est l'espace entre les colonnes. Quelle taille devraient-ils être ? n'y a pas de règle officielle d'exigence policière. Mais il est très courant d'utiliser 24. Vingt-quatre est également une chose courante dans le développement. Il est facilement divisible par huit, huit est un très bon numéro de grille de référence. Nous examinerons cela lorsque nous notons une application dans une seconde, ou au moins la grille. Mais vous pouvez choisir 13. Encore une fois, 13 n'est pas un nombre facilement divisible, ce qui devient très important plus tard lorsque nous codons le site Web. Vingt-quatre c'est un bel espacement. Quelque chose d'autre que je veux partager avec vous avant de faire la grille ? Une dernière chose, c'est que même si j'ai dit que 12 est génial, la fois mobile et de bureau, c'est un peu bizarre ici. Il y a trop de colonnes et l'espacement n'est pas assez grand. Ce serait vraiment courant, même si la technologie ou le code sous-jacent utilisera potentiellement 12 colonnes. C'est souvent le cas. Il suffit de cliquer sur le cadre réel et de dire que 12 colonnes, c'est trop. Laissez-moi en utiliser six. Il est divisible par huit et ça me donne juste un peu plus d'espacement. [inaudible] la gouttière. Je vais probablement utiliser quelque chose comme 16 pour l' espacer , ce qui est un objectif si vous êtes concepteur Web. Il s'agit d'une utilisation courante sur les appareils mobiles. Je vais l'utiliser pour ma mise en page. Même si j'ai dit utiliser 12, lorsque je conçois, il est juste plus facile d'utiliser 6, et supposer que 12 se produiront plus tard. Mais c'est facile, six en 12 deux fois. Maintenant, l'autre chose que je veux vous montrer avant que votre cerveau ne fonde, il est probablement déjà fondu. Je vais ajouter une version d'application. Nous ne concevons pas d'application, nous concevons un site Web mobile. Mais supposons que vous conceviez une application. Il serait très courant de ne plus utiliser de colonnes. Je vais utiliser l'iPhone 8. Il serait très courant de dire que je veux une grille de mise en page. Cliquez sur le plus. C'est là. Pas de 10, il est très courant d'en utiliser huit. C'est un framework que quelqu'un comme Android et iOS utilise pour l'espacement. Encore une fois, c'est facile, il est divisible et il place bien les choses. Ce serait très courant. Parlez au développeur qui s'en occupe en premier, il pourrait dire le contraire. Mais huit est une très bonne taille de grille et vous n'utilisez pas de colonnes dans ce cas car elles ne répondront pas. Ce sera toujours au téléphone. Nous n'avons pas besoin de l'application pour le moment. Au revoir. Je vais revenir à mon bureau HiFi. Si vous ne tirez rien d'autre de cette vidéo, sachez simplement qu'il est bon d'avoir 12 colonnes à concevoir. Je suppose que je jette ça là-dedans parce qu'il y aura quelques-uns d'entre vous qui ont beaucoup de connaissances et certains ayant un peu de connaissance de l'autre partie de ce processus sont le processus de développement Web et certains d'entre eux les chiffres sonneront une cloche. La dernière chose avant de partir, raccourci. Ce sera dans votre feuille de raccourcis car c'est bizarre sur Mac de l'activer et de le désactiver. Parce que, comme quand je prévisualise ce look, il n'apparaît pas réellement. Il est juste là en mode Wiki pour m'aider, mais il n'est pas produit à la fin. Vous finissez par l'allumer et l'éteindre un peu. Contrôlez G sur un Mac. Maintenant, pas la commande G, c'est le contrôle G, qui est un raccourci bizarre. Il devient encore plus bizarre pour PC, c'est Control Shift 4. Complètement différent. Ceux-ci seront dans votre feuille de raccourci de toute façon. Est-ce que c'était la fin ? C'était la fin. Je suis revenu pour réenregistrer quelque chose. Je veux que vous créiez réellement des pages complètes et je veux vous montrer un petit truc ou astuce, je vais les lancer avec des colonnes. Disons que j'ai quelques cadres différents. Je vais ajouter une autre version de bureau. J'ai passé un certain temps à trouver toutes les colonnes à ce sujet. Il y a une chose bizarre que vous puissiez faire à Figma. Cliquons là-dessus. Beaucoup de ces éléments peuvent être sélectionnés en cliquant sur la zone grise située à côté d'eux. Regardez, juste là. Pas là, car cela ouvre cela. Mais cette zone, pas de terre d'homme. Il y a des endroits différents où vous pouvez cliquer, celui-ci. Est-ce que je peux obtenir celui-là ? Peut-être le remplissage. Ils ne sont pas tous cliquables. Mais celui-ci ici, cliquez sur ce petit écart. Je l'ai sélectionné pour pouvoir le copier, y aller, et j'utilise ma commande Commande C V sur un Mac, c' est-à-dire Control C Control V sur un PC. Je clique juste dessus et je vais coller et tu peux coller beaucoup de choses. C'est une façon de le faire ou vous pouvez simplement commencer à dupliquer comme cette commande D, Control D sur un PC. J'en ai trois. Je vais les nommer rapidement. Je veux que vous fassiez la même chose. J'en ai quatre. Faites la même chose pour mobile et je vous verrai dans la vidéo suivante. Nous n'avons pas besoin de ça. Faites le mode avance rapide pour que vous sachiez ce que je fais. Très bien, donc ça. Qui se souvient comment tout mettre à l'écran en une seule fois ? Vous vous rappelez, le quart 1. Vous y allez. C'est ce que je veux que vous construisiez à la fois pour mobile et ordinateur de bureau et je vous verrai dans la vidéo suivante. 34. 34: OK, c'est l'heure d' une petite pause pleine de trucs et astuces passionnants , de préférences et de bizarreries C'est en quelque sorte le titre de cette vidéo. Nous allons le faire simplement, nous allons revenir à notre point faible parce que nous avons plus de trucs pour faire des trucs et astuces. OK, donc je pense que vous êtes arrivés à un point où certains éléments du flux de travail ne vous feront pas peur mais vous aideront Passons donc en revue quelques-uns d'entre eux. Maintenant, pour ce qui est de tous les raccourcis, vous pouvez en quelque sorte les trouver en survolant certains d'entre eux. Beaucoup d'entre eux sont cependant cachés. Regarde ça, un petit point d' interrogation ici. J'espère qu'il est toujours là. OK. Si vous cliquez dessus, par exemple sur l'aide et les ressources, nous avons tous été conditionnés par les premiers logiciels qui, intégrés à l'aide et aux ressources, sont pratiquement inutiles. Il faut l'éviter. Mais les fictions sont vraiment bonnes. Cliquons ici. Et je vais passer à la section des raccourcis. OK ? Ils ont des trucs géniaux. OK ? Mais le raccourci est vraiment utile et bien agencé. Donc, l'essentiel, c'est parti. OK. Je ne vais pas tous les passer en revue. Je veux juste te montrer. Jette juste un petit coup d'œil et vas-y , d' accord, voilà celui-ci. OK, il y a cette seule vue, d'accord ? Tous ceux-là. Comment accéder aux couches. sautant entre les ressources Nous avons fait cela un peu en sautant entre les ressources et le prototype de conception. Je vais entre ici et ici. Vous pourriez dire, d'accord, c'est moi, c'est Alt ou l'option 9. OK, donc ça marche. Il y en a de très bons. Je vais aborder les principaux points tout au long de ce cours, mais il y en a de bons. Passons donc à l'option neuf ou à la mienne à l'option huit. Conception, prototype. Conception, prototype. OK, c'est un petit truc utile là-bas. Je vais revenir au design. Un autre raccourci très utile est celui qui les régit tous. OK, maintenez la touche Commande enfoncée sur un Mac, Contrôler sur un PC, et appuyez sur votre barre oblique Regarde deux barres obliques. L'un d'eux avance, l'autre recule. Donc, le Ford Slash soulève ceci : «   Oh, c'est quoi ça ? Hein ? Petite précision ici. J'ai juste utilisé les actions rapides et j'ai dit, hé, c'est une barre oblique sur un Mac Contrôlez Forward Slash sur un PC. Et cela fonctionne sur des claviers Quirti similaires à ceux de l'anglais, mais si vous utilisez un clavier dans une autre langue, se peut que vous n'ayez pas de barre oblique Figma est donc intelligente et nous allons choisir un autre personnage. Alors jetez un coup d'œil ici. Alors, allez jusqu'ici et survolez Quick Actions. Et vous verrez que quel que soit le raccourci correspondant votre type de système d'exploitation et à votre clavier, il sera différent. C'est peut-être ça plus une apostrophe ou des personnages étranges Voilà, Carry on. En gros, il va examiner tout ce que Figma peut faire, si vous pouvez le taper et l'épeler OK, alors souvenez-vous qu'avant de changer de couleur, je voulais sélectionner le même remplissage. Donc, si je l'ai sélectionné, je l'ai fait désinvolture lorsque nous faisions C'est vrai. Encore une fois, ce que vous faites, c'est que je n'y vais pas et je trouve que je sais où se trouvent la plupart d'entre eux. OK. Mais je le fais pour votre bénéfice parce que c'est une façon vraiment maladroite de le faire. Tout tourne autour des raccourcis, du moins pour moi en tout cas. Je peux donc cliquer dessus et passer à la commande Slash, et je peux dire sélectionner Je viens de taper S, E, L E. Je n'ai même pas besoin de très bien épeler Et je peux voir Select all with same, Phil. Ensuite, allez changer de couleur. Je trouve cela très utile. OK. Au lieu d' avoir à savoir où il se trouve, est-il en cours de modification ? Est-il en cours de modification ? Qu' est-ce que c'est sélectionné ? C'est en dessous de toi. OK. Il suffit donc de le taper. Si je veux que tout soit en majuscules, je vais juste commander pour slash et je vais passer en majuscules Voilà, majuscules, boum. Je n'ai rien à faire. Je n' ai pas besoin d'aller le chercher. C'est là-dedans. C'est aussi quelque part ici. Mais j'utilise tout le temps cette commande que Ford a fixée. C'est bon. Une autre chose pratique que nous n'avons pas vraiment abordée est le clic droit. OK. Donc, si vous allez ici, clic droit vous montrera des informations relatives à ce que vous avez sélectionné. Vous pouvez voir que cela changera en fonction de ce que vous avez sélectionné. OK ? Et il n'y a que des éléments utiles liés à ce que vous faites. Avancez. Au lieu de tout le chemin vers l'avant, vous pouvez voir le raccourci, mais il vous suffit de cliquer dessus ici. Vous pouvez le déplacer vers une autre page. clic droit sur des éléments vous donnera donc beaucoup de choses intéressantes liées à l'objet sur lequel vous avez cliqué OK, clic droit, tu sais comment cliquer avec le bouton droit de la souris, hé, c'est sur ma liste ici, dans les préférences. Il n'y en a que quelques-unes que je changerais pour toi. OK, donc je vais y aller, je n'en ai aucune idée. Les préférences sont. Nous allons donc utiliser notre commande « barre oblique » et saisir les préférences. Bien sûr, ce n'est pas celui qu'il y a dedans. Bon sang, d'accord, quelles sont tes préférences ? Je parie qu'ils sont en cours de modification. Non, ils sont sous dossier. Restez là, s'il vous plaît. En bas, ici. Il n'y en a pas beaucoup dans ce programme. OK. Celui que je change est de garder l'outil sélectionné après utilisation. Je l'active, c'est désactivé par défaut. OK ? Cela signifie simplement que chaque fois que je saisissais mon outil rectangulaire et que je le faisais glisser, il revenait à l' outil de sélection et je devais retourner à mon outil rectangulaire pour choisir un outil et le laisser à votre discrétion La seule autre chose à laquelle je joue ici, c'est dans les préférences et le montage du nœud. OK ? Donc, un petit coup de pouce signifie juste un coup de pouce, c'est ça Lorsque je saisis ce rectangle et disons que je travaille dessus, je vais utiliser mon raccourci personnalisé. Deuxième quart de travail. Le deuxième quart, c'est nous en avons fait le premier. Tout ce qui se trouve sur ce cadre ou cette page en entier, désolé. Et si j'ai sélectionné quelque chose, déplacez deux zooms directement dessus OK. Je vais me retirer un peu parce que c'est un peu trop intime. Quoi qu'il en soit, pourquoi sommes-nous ici ? Pousser. J'ai donc ces deux-là dans un groupe. Un coup de pouce signifie simplement que cela va passer d'un pixel à la fois. C'est probablement très bien. OK. À moins que j' aie affaire à mes huit membres. Nous avons conçu notre application et nous avons affaire à notre grille à huit points. Vous vous souvenez de cet ajout, OK, et nous avons obtenu huit points. OK, nous faisions de la conception d'applications, ça pourrait être vraiment sympa d'entrer ici et dire « préférences, coup de pouce », « montant En fait, le gros coup de pouce n' est pas de dix, mais de huit. C'est utile parce que cela me permet de l'obtenir ici et de marquer huit points Utile uniquement lorsque vous développez des applications. C'est bon. Un petit peu. Ce n'est pas très excitant, mais jetons un coup d'œil, nous avons ces groupes. Je sais que c'est à l'intérieur. Je sais que je peux double-cliquer dessus pour entrer. Un bon raccourci K consiste à maintenir enfoncé le PC Katro et à cliquer dessus immédiatement Et vous le voyez, il suffit de plonger directement dedans plutôt que d'avoir à cliquer. Cliquez. OK. Et lorsque vous avez beaucoup de choses, des types de groupes, disons que vous décidez de le faire en utilisant un ancien groupe normal, alors je vais le regrouper avec celui-ci. Avec des groupes. Avec des groupes, d'accord. Vous devez double-cliquer. Double-cliquez. OK. Vous pouvez simplement maintenir la touche de commande que j'ai enfoncée. J'essaie de comprendre tout ça. Je peux saisir cette ligne en maintenant simplement la touche Commande enfoncée et en cliquant. Une fois que je suis entré directement dans le vif du sujet, c'est le contrôle d'un PC. Dans le cadre de tout cela, je l'ai totalement érigé. Ce sont les raccourcis que j'utilise. Il y en a quelques autres que je vais présenter dans le cours, mais en fait, cette commande, barre oblique , puis il suffit de taper des choses J'ai même eu ceux qui ont été utilisés en dernier, ce qui est bien. Et ce petit truc d'aide ici , en cochant les raccourcis, c'est que je t'apprends à pêcher C'est ce que j'essaie de faire, c'est ce que j'essaie de dire. Au lieu d'enseigner à chacun d'entre eux, abordons également quelques points étranges dans Figma, afin qu'ils puissent déjà vous surprendre ou peut-être à l'avenir Disons que si vous avez un cadre, est-ce bizarre ? Non, c'est juste normal, c'est un groupe. Tu peux monter ici et dire, en fait, je veux tout ce qu'il y a de plus pour un cadre, d'accord ? Si vous avez des groupes partout et que vous souhaitez passer à l'utilisation des fonctionnalités de cadre, vous pouvez simplement les changer ici. Ce qui est bizarre, c'est que si votre nom apparaît au-dessus d'un cadre, d'accord, cela s'appelle le cadre 1. Si je finis par le mettre ici, où vais-je le mettre ? Je vais le mettre juste à côté de tout. Je peux l'y faire parvenir ? Mettons-le au-dessus de tout. Voilà. Si vous vous retrouvez avec des noms partout, c'est parce que ce cadre, même s'il semble se trouver sur une page d'accueil, ne l'est pas. Il passe du temps tout seul. Tu dois t'assurer qu'il y aille. Très bien, voilà pour mes conseils, astuces, préférences et un peu de bizarrerie à la fin Très bien, je vais voir dans la prochaine vidéo. 35. Inspiration de couleurs et la pipette dans Figma: Bonjour à tous. Dans cette vidéo, je vais vous montrer les endroits où je me rends pour m'inspirer des couleurs, des tas de différents endroits. Je vais alors vous montrer comment les intégrer dans Figma, utilisant à la fois l'outil Pipette, copiant et en collant des codes, et nous installerons un plugin qui me fera mal paraître. Vous verrez pourquoi dans un peu. J'ai d'abord trouvé comment l'utiliser. Très bien, commençons. Pour vous inspirer de la couleur, il vous suffit de la taper dans Google. Sites web d'inspiration couleur, il y en a plein. Je vais juste vous montrer ceux que j'utilise. C'est colorhunt.co, c'est bien. Les couleurs sont superbes. Il y en a quatre qui fonctionnent bien ensemble. Même chose avec color.adobe.com. Si vous allez ici, ils sont tous les deux gratuits. J'aime bien celui-là. Nous pouvons aller à Explore et taper des choses ici. C'est plutôt sympa, vous pouvez dire. Rappelez-vous que Sarah est éco-consciente. Je me rends compte qu'il n'est pas nécessaire qu'il soit vert pour le rendre écologique, mais vous utilisez peut-être des mots issus des valeurs de l'entreprise. Il se peut qu'il s'agisse de luminosité et d'égalité ou de voyage, ou j'essaie de penser à des choses qui auraient une bonne couleur et une palette de couleurs unique pour eux. Il peut s'agir d'une entreprise, d'une entreprise, parce que c'est le sentiment que vous avez besoin de cette chose. Comme beaucoup d'entre eux, trouvez-en un qui vous plaît. C'est dur à cause de ce regard. Je suis dans la zone. Ce que vous pouvez faire, c'est cliquer dessus, et vous pouvez voir si je ne survole pas et que je vois ce nombre hexadécimal, numéro de hachage, c'est ce que vous pouvez copier et coller dans Figma. Comme ici, vous pouvez voir les codes si je clique dessus. Cliquons sur ce code là, il est copié, c'est la même chose à partir d'ici, vous pouvez les copier. Ensuite, à Figma, vous y allez, et Sarah est respectueuse de l'environnement. Elle va aimer le vert. Passons à notre version pour ordinateur de bureau. Je vais dessiner un rectangle et je vais le remplir, c'est là. Vous pouvez le coller avec un hachage et Figma le trier. Voilà, c'est vert. Vous pouvez copier et coller certaines couleurs à partir de ces couleurs plus officielles. Des lieux d'inspiration, ce sont des tas d'entre eux. Maintenant, un autre pour les dégradés. J'utilise Grabient beaucoup, et il y en a beaucoup autour aussi en termes de sites de dégradés de couleurs, et probablement de la prochaine vidéo. Mais vous pouvez simplement commencer à voir de très belles couleurs dégradées. Ici, vous pouvez voir les nombres hexadécimaux. Vous pouvez copier les coller dans vos dégradés. L'inspiration couleur n'est pas quelque chose que nous sommes à court. Maintenant, ces choses isolées vont bien, souvent ce que vous finissez par faire ou ce que je finis par faire va à des choses. Souvenez-vous de notre planche à moodboard inspirée. Je vais utiliser des captures d'écran de Dribble. Même si les couleurs ne sont peut-être pas le bon contenu, mais les couleurs sont bonnes. Ce que vous pouvez faire à Figma, c'est que je vais aller sur mon mobile Lofi. C'est ici. Souvenez-vous de mon moodboard douteux, faites la même chose. Rectangle, prends ça, et je vais prendre l'outil Pipette et prendre n'importe quoi ici. Vous pouvez voir que je pourrais utiliser ça. Je vais dessiner un autre rectangle. Vous pipette quelque chose de plus léger et plus léger. Il suffit de faire quelque chose comme ça, tirer les couleurs de ce groupe. Vous pouvez voir des indices sur l'endroit où j'ai eu mes couleurs pour ma dernière. Vous avez déjà vu le dernier, puis je me suis moqué de me préparer. J'ai sorti certaines de ces couleurs et j'ai ensuite conçu les miennes. Vous commencez par ceux des autres, puis vous commencez à l'utiliser. Vous êtes vraiment trop lumineux, pas assez lumineux, pas assez de contraste. En dehors de cette classe, l'accessibilité en termes de couleur de contraste est très importante. Cela dépend de l'endroit où vous allez et de la mesure dans laquelle il est appliqué. En tant que concepteur UX, vous devez vraiment vous préoccuper de l'accessibilité. Ce n'est pas tout le monde, certaines personnes sont daltoniennes. Certaines personnes sont un peu daltoniennes. Beaucoup d'hommes de mon âge sont un peu daltoniens. Les malvoyants ont besoin d'un rapport de contraste très élevé. Adobe Color est utile pour cela. Vous en avez peut-être lu un peu. C'est en dehors d'ici, mais en voici un exemple. Celui-ci et celui-ci ont un rapport de contraste de 3, 33:1. Ajoutez vos deux couleurs et vous pouvez voir 17 points ou moins avec cette couleur, ou le texte normal sur ce fond vert remplit le goût d'accessibilité ici. Le contraste entre ces deux points avec ces 18 points et c'est audacieux, ces couleurs fonctionnent. Encore une fois, c'est probablement juste que nous sommes en train de trop faire dans ce cours. L'accessibilité est hors de portée ici, mais sachez simplement qu'elle doit faire partie de votre processus et l'ajouter à la liste des choses à apprendre en tant que concepteur UX. Une dernière chose, c'est qu'il s'agit sûrement d'un plug-in pour cela. Je vais aller sur Parcourir la communauté, ou nous pouvons aller ici, Community. Je peux dire plug-in et je vais dire couleur. J'utilise l'orthographe américaine ici. Je regarde ceux qui ont le plus de téléchargements. Cela semble avoir beaucoup de téléchargements. Je n'ai jamais utilisé celui-ci. Découvrons-le ensemble. Il est installé, ce qui est génial. Revenons à celui-ci ici. Je vais aller Plugins, Color Pellets, et je marge, voilà, des palettes de couleurs. C'est comme s'il était intégré plutôt que d'aller sur ces sites Web. Il a l'air [inaudible], a l'air incroyable. Je pense que ça m'a plu. Je ne sais pas comment utiliser ça, bon choix. C'est un bon choix. Ça a l'air incroyable. Que s'est-il passé ? Je n'en ai aucune idée. Je dois lire la documentation. Est-ce qu'il est apparu ici ? Ce n'est pas le cas. J'ai édité, on y va. J'ai travaillé ça à l'origine. Ce ne sont que des vieux rectangles réguliers qui sont regroupés, nous pouvons commencer à choisir les couleurs. Tous les plug-ins fonctionnent légèrement différemment. Merci. Granulés de couleur, tu m'as fait croire que je ne sais pas ce que je fais. Vous y voilà. Vous comprenez l'idée. Les couleurs sont partout. Vous devriez tirer les couleurs de vos sessions de découverte avec les clients, vous savez ce qu'ils cherchent à faire. Ils ont peut-être déjà des couleurs d'entreprise et vous êtes coincé à les utiliser, mais parfois nous avons toute la liberté et nous pouvons chercher inspiration des couleurs et utiliser l'outil Pipette pour voler les couleurs des images. C'est tout, l'outil Pipette d'inspiration couleur, appris et fait. 36. Comment concevoir une palette de couleurs dans Figma: Bonjour à tous. Dans cette vidéo, nous allons créer une palette de couleurs avec laquelle nous allons commencer à construire notre maquette haute fidélité. vais vous montrer ma technique pour saisir les couleurs d'accent primaires et secondaires peut en être quelques nuances. Que faire avec les noirs et les blancs ? Il dirige mon processus. Allons-y. Mes couleurs, d'où viennent-elles ? Je ne m'en souviens plus. préparé ce cours il y a deux semaines. J'ai tout préparé, je ne me souviens pas comment j'ai eu mon premier au moins. Je sais donc ce que c'est parce que j'ai mes dossiers d'exercices d'entraînement. Mais ce que je vais faire, c'est prendre mon outil rectangle et dessiner comme un joli petit rectangle ici. Par ici, je vais coller cette couleur. Vous avez peut-être obtenu le vôtre de Color Hunt ou d'Adobe Color ou de la maquette de quelqu'un d'autre. C'est la couleur avec laquelle j'ai commencé et je me souviens que j'ai obtenu ma couleur secondaire de ça. Je vais m'en servir beaucoup. Je vais probablement utiliser un peu ce prochain. Maintenant, avec cette étape conceptuelle, vous finissez par le changer tellement. Nous n'allons pas devenir trop officiels. La police des couleurs ne va pas venir vous chercher. Vous avez le droit de faire ce que vous voulez. Mais j'ai eu l'impression que ce genre de choses allait ensemble. Il y a quelques nuances différentes que vous pouvez voir. Plus clair, plus sombre, je peux le voir ici. Je suis en train d'en trouver un qui me plaît. chose comme ça. Je voulais une autre couleur, une couleur d'accent. Il est très courant d'avoir une couleur primaire, secondaire et accentuée. La couleur d'accentuation peut souvent être très forte ou distincte car c'est une petite couleur spéciale que vous utilisez, puis encore une fois. Je suis passé comme ça, je suis passé par là et j'ai trouvé quelque chose que j'aimais avec tout ça. J'ai fini avec quelque chose de rose, rougey, assez mandarin, quelque chose comme ça. Vous pouvez finir par le rapprocher ici, puis vous pouvez le déplacer en fonction de sa saturation, obscurité, de sa luminosité. Probablement quelque chose là-dedans. Nous pouvons changer cela plus tard, nous ne sommes qu'une étape conceptuelle. Souvent, lorsque vous arrivez à ce type d'étape, vous avez besoin de quelques variations de ces couleurs. Je le déplace d'ici et en fait je vais couper et le déplacer dans mon hi-fi de bureau. Je ne sais pas pourquoi ils sont là Qui déplace le raccourci dans les colonnes, Control G sur un Mac et sur un PC. Le voilà, Control Shift plein, dont on ne se souvient jamais. De toute façon. Je vais coller ça ici, et je vais juste l'avoir ici et il serait vraiment courant de le faire. J'ai ces dernières. Je vais aller dans toutes ces versions droites et légèrement plus sombres. Vous allez donc être déplacé un peu vers le bas. Je veux le garder dans la même zone. Ce que vous pourriez faire, c'est passer à la luminosité de saturation de teinte et la teinte change la couleur, la saturation, sa saturation et cette luminosité, vous pouvez vous déplacer vers le haut et vers le bas. J'utilise ma touche fléchée pour monter et descendre. Maintenir « Shift » va en gros morceaux. Vous ne devriez pas monter de 10 pour cent à deux ou nous allons finir par avoir une assiette avec ça dans la maquette et l'ajuster au fur et à mesure que nous allons en fonction de ses cas usagés et nous ne voulons pas avoir un million de couleurs différentes, mais commençons par certains que nous pouvons résoudre. Version légèrement plus sombre et dites, maintenant « Shift », en appuyant quelque part là-dedans. Je vais faire la même chose pour les plus légers. Je vais dire que vous en voulez un plus léger maintenant ? Est-ce que je veux juste augmenter la luminosité ? Oui, et probablement un peu plus riche aussi, donc j'aurai plus de saturation de cette façon. Tout droit, plus blanc. Alors que je veux monter un peu de cette façon. Il en va de même pour celui-ci. Je veux qu'il soit un peu plus lumineux. Il est assez proche de la luminosité maintenant. Faut-il qu'il soit plus riche ? Probablement pas. Je l'aime bien là-bas. En fait probablement un peu en arrière de cette façon. Quelque part par là. Je suppose que ce que j'essaie de souligner ici, c'est qu'il y a de la science à colorer. Il y a la roue chromatique et vous pouvez choisir des couleurs particulières, des contrastes et des analogues. Parfois, bien qu'il y ait un peu comme je suis une personne créative qui fait des trucs créatifs avec mes couleurs. Ce que nous allons également faire, c'est regarder en noir et blanc. Avec le blanc, le blanc est facile, vous n'avez pas besoin de le mélanger. J'ai tendance à ne pas utiliser de blanc complet, j'utilise un peu de blanc cassé, juste un minuscule petit. Je trouve que je peux l'utiliser comme un panneau. Disons que nous avons une grande application blanche, et qu'elle est blanche. Je vais souvent utiliser ce truc blanc cassé. Si je l'apporte aux crochets avant, ce n'est probablement pas suffisant. Juste un tout petit peu plus. En soi, il semble presque assez blanc. Mais ici, je vais utiliser ce truc d'interface blanc cassé, des choses qui doivent être blanches. Mais lorsque nous ajoutons des éléments comme une ombre portée, ils fonctionnent plus tard. Comment faire une ombre portée ? Trop tôt pour une solution. Laissez-moi regarder ma liste. Oh, oui, on va bientôt trouver une solution. Ça va être une bonne chose. Maintenant, quand je me lèverai pour dire un noir, je vais peut-être en avoir cinq. Five est un bon moyen de mettre en scène quelque chose comme 1, 2, 3 , 4, « Control D » sur un PC. noir. Je ne vais pas avoir de noir complet. Je vais avoir ce qu'on appelle un noir riche. Je veux qu'il soit tout petit peu vert parce que je vais utiliser beaucoup de ce vert par endroits et je ne veux pas juste un noir plat. Je voulais entrer dans les verts. En fait, prenons cette première couleur. Prenons mon outil pipette, on va te chercher, on est dans la même teinte, mais je vais le faire descendre ici. Pouvez-vous voir qu'il est assez noir, mais il y a un soupçon de vert là-dedans, juste un petit peu. C'est ce que j'aime faire et donc je vais utiliser l'outil pipette ça, mais je vais utiliser ma saturation et monter un morceau. Vous voyez, de haut en bout. Je ne veux pas qu'il soit trop vert, je veux qu'il soit plus léger et qu'il ait un soupçon de vert, mais pas trop. Encore une fois avec U. U. et encore. Là encore, il y a encore un soupçon de vert là-dedans. Mais pas trop. Si vous êtes un théoricien de la couleur ou un designer bien meilleur que moi, vous êtes totalement autorisé à ne pas être d'accord avec moi. Quand je me rapproche du blanc, un peu de vert là-dedans, j' air un peu bizarre, donc je n'ai rien vers la fin, mais dans ces parties ici, j'aime qu'elles soient plus sombres. Qu'est-ce que j'ai fait ? Je pense que j'ai accidentellement cliqué sur le fond. Pour la pipette , vous, je vais aller quelque part ici et pas trop vert. Voici mes couleurs. Vous pouvez aller dans l'autre sens. Nous sommes devenus verts. Si vous optez pour un groupe de couleurs plus chaudes, vous pouvez faire la même chose que d'avoir un noir qui se trouve juste dans les espaces rouges et chauds. Dans ce cas, c'est probablement trop riche, donc je vais le ramener ici. Il fait toujours chaud, chocolaté, mais il est noir aussi. Maintenant, il est dit que maintenant que j'ai vu cela en contraste, je pense qu'ils sont trop verts. Donnez-moi une seconde. Je vais l'avancer rapidement. On y va, j'ai l'impression qu'ils sont sombres, ils sont gris frais. C'est ce que je fais. Il y a ma décision finale pour au moins ce premier concept. C'est une bonne gamme de couleurs que je peux commencer à choisir pour mon interface utilisateur. Maintenant, si vous avez comme une couleur d'entreprise à laquelle vous devez vous en tenir, mais que vous n'avez qu'une couleur primaire et le logo, peut-être deux d'entre eux et que vous avez besoin d'autres bits, je trouve Adobe ou coloradobe.com. Ils changent encore une fois cette situation. Jetez un coup d'œil autour de vous et essayez de trouver la roue chromatique. Ce que vous pouvez faire, c'est que vous pouvez en choisir un. Je choisis celui qui a une petite flèche. C'est ma couleur de base. Je vais le mettre dans ce vert fuchsia. Ce que vous pouvez faire, c'est que vous pouvez dire en fait que je veux trouver des couleurs complémentaires à cela. La roue chromatique n'est pas toujours correcte. C'est techniquement complémentaire, mais bon pour moi. Je trouve que le partage complémentaire est vraiment bon. Il y a mon verdâtre. Je ne suis pas sûr de ces gars, mais c'est peut-être une façon d'être un peu plus scientifique double split complémentaire. Prenez une triade, un carré, un composé. Vous pouvez simplement explorer des couleurs que vous n'avez peut-être pas auparavant et vous pouvez trouver certaines des couleurs secondaires et accentuées dont vous pourriez avoir besoin pour votre interface utilisateur. Il ne sera qu'une seule couleur à moins que vous ne le vouliez. C'est tout pour celui-là, nous avons une palette de couleurs. Passons à autre chose. 37. 37: Bonjour à tous, je vais vous montrer comment créer des dégradés. Dans Figma, nous allons créer de jolis dégradés subtils, à mon avis Nous allons construire une machine à voyager dans le temps, revenir dans les années 1980 et créer ce dégradé, puis nous allons créer ronds qui sont vraiment très mauvais Je vais également vous montrer comment changer la couleur de fond. Tu es comme si le fond était sombre. Comment faites-vous cela ? Très bien, passons au gradient de temps. OK ? Pour créer un dégradé, tracez un rectangle. Je vais le faire sur la page de détails de mon produit Hi Fi mobile parce que j'en ai besoin pour plus tard OK, et je vais faire glisser un rectangle de n'importe quelle taille, et pour le modifier afin qu'il ait un dégradé partir d'un remplissage, cliquez sur cette partie. OK ? En fait, cliquez sur le petit carré s' y trouve et passez du solide à l'un ou l'autre. Tout le monde, juste une petite mise à jour rapide. L'interface utilisateur a légèrement changé. J'ai donc sélectionné mon rectangle. Je clique toujours sur ce petit cube, mais au lieu de la liste déroulante comme je viens de vous le montrer, ils ont en quelque sorte retiré le menu déroulant et sont devenus solides avec une image vidéo en dégradé OK, ils sont tous là sous forme d'icônes. Et ce qu'ils ont fait, c'est qu'ils ont regroupé tous les ingrédients. Donc, si je clique sur Ingrédient OK, vous devez avoir sélectionné l' objet. Vous pouvez voir que j'ai ce nouveau type de fonctionnalité similaire en haut. Et maintenant, il y a une radio linéaire, Angular, d'accord. Ce que je vais aborder dans le cours. Mais oui, ils l' ont juste un peu changé. Je savais que vous le trouveriez, mais je suis là faire des mises à jour et je me suis dit que je le ferais. Bon, passons à la vidéo. OK, une radio linéaire sera une radio ronde, angulaire. Je n'en utilise aucun sauf le linéaire ou le radial. Nous allons utiliser le linéaire dans ce cas. Parlons de la façon de l'ajuster. Tu cliques sur l'un ou l'autre, d'accord ? Pour ajuster le début ou la fin et le faire glisser, faites glisser le curseur de teinte, trouvez ce que vous aimez, cliquez sur ce côté Par défaut, c'est une couleur, mais la transparence est réduite à zéro, d'accord ? Tu vois la différence ? OK, celui-ci peut être transparent. Je ne veux pas que la transparence augmente complètement. Cliquez dessus et je peux le faire glisser et choisir le pire dégradé au monde. C'est le pire au monde. En fait, j'ai fait pire, mieux. Quoi qu'il en soit C'est ça. Vous pouvez l'ajuster en faisant glisser ces points. OK, le début et la fin, selon le type de dégradé dans la direction souhaitée. En disant radial, saisissez ceci, vous pouvez avoir votre point de départ et point final et y voir ce point. Cela ne fait pas beaucoup de différence lorsque vous optez pour le linéaire. Mais la radiale, vous pouvez la rendre circulaire. Regardez ce dégradé de cercles et rendez-le peut-être beau et grand pour qu'il soit circulaire et plus ondulé. Quoi qu'il en soit, voici comment créer un dégradé. Pour poursuivre ce cours, je souhaite créer un dégradé basé, oui, sur certaines de mes palettes de couleurs que j'avais auparavant. Si vous êtes juste venu pour les dégradés, ça suffit. Si vous voulez poursuivre le cours, je vais vous montrer quelques points supplémentaires. Notez également que vous pouvez ajouter un dégradé aux rectangles et à nos rectangles réels Sortons-en de ça. Cuisinons sur la page d'accueil. Supposons que vous souhaitiez un ingrédient d'arrière-plan dans votre cadre. Vous n'avez pas besoin de dessiner un rectangle et de le placer à l'arrière. Vous pouvez vraiment, je vais le faire à celui-ci parce qu'il y a déjà quelque chose dedans. Regarde ça. Si je clique sur les détails de l' arrière-plan, même s'ils se trouvent au-dessus du rectangle, regardez ceci. Je peux changer le remplissage en linéaire et il est toujours en retard. OK. Dans ce cas, je vais vouloir aimer utiliser la couleur de mon interface. Tu te souviens du blanc ou du blanc cassé que j'ai fait ? OK, le haut ici est entièrement blanc. Cela pourrait mener à quelque chose comme ça. Et en bas de la transparence vers le haut, je vais choisir quelque chose qui est juste un peu plus élevé, donc ce n'est pas une bonne chose. D'accord, lorsque vous avez affaire à des arrière-plans de couleur claire, vous pouvez modifier l'arrière-plan de l'application elle-même. Dans Figma. Figma, tu ne peux simplement rien sélectionner Cliquez sur le bouton en arrière-plan, vous pouvez voir l'arrière-plan ici. Cela ne changera rien à votre maquette. OK, mais c'est juste une façon de procéder. OK. Je veux que ce soit plus sombre pour que je puisse voir le contraste, mais cela n'affecte en rien le type de présentation. Vous ne verrez pas l'arrière-plan. Oui, il n'y a rien sur cette page. Voici mon autre page. Voilà, c'est là. Cette couleur de fond est juste pour votre plus grand plaisir visuel. Ce que je vais faire maintenant c'est apporter ma palette de couleurs. Qu'est-ce que j'en ai fait ? Je l' ai fait sur ordinateur parce que j'ai dit : nous allons travailler sur ordinateur, changer d'avis, nous allons copier ceci. Et je vais le transférer sur, en fait, le couper et le transférer sur mon mobile Hi Fi A zoom arrière. Je vais le coller ici et je vais le mettre là-haut. Maintenant, le problème ici, huit, c'est qu'il est trop grand, c'est beau et petit. Il se trouve juste dans le répertoire racine. OK, je ruine mon joli panneau de couches. Donc, ce que je vais faire avec toutes les options sélectionnées, cliquez sur n'importe laquelle d'entre elles et dites encadrer cette sélection. Et maintenant, ils sont tous bien rangés. Ils y sont toujours. Mais maintenant, ils sont tous beaux et bien rangés. Je vais appeler ça une pastille unicolore. Est-ce une pastille de couleur ? Je pense qu'il y en a trop d'autres. Ah, je m'en fous assez. Donc oui, ma palette de couleurs existe et je vais probablement choisir un dégradé en fonction de cela. Je ne sais pas comment ça va se passer, allons-y un jour. Alors allons-y. Ça te montrera comment je peux m'y prendre. C'est cette couleur que je veux obtenir à partir de là. Ensuite, je veux obtenir cette couleur avec le compte-gouttes. À partir de là. C'est horrible. Horrible. Oui, il y a de la boue au milieu Un OK. Essayons-en un autre. Je suis d'accord avec ça. Ce que je vais probablement faire , c'est probablement le prendre et partir. C'est là, il y en a des indices, mais ce n'est pas le cas. Et je vais l'ajouter à mon espace colorimétrique. Je l'ai dupliqué. Je veux qu'il soit de la même taille que celui-ci. Qu'est-ce que c'est ? 52 par 52. Vous pouvez saisir ces informations manuellement. 52 x 52, zoomez. Je vais utiliser ce dégradé. Je pourrais créer quelques dégradés supplémentaires que j'utiliserai pour les boutons et tout le reste, mais je ne sais pas J'ai l'impression d'être un dégradé. Cela vient peut-être du fait que j'ai mis des dégradés dans tout ces dix dernières années L'autre chose que vous pouvez faire, c'est si vous utilisez quelque chose comme je vous l'ai montré et vous pourriez dire « oh, j'adore wow ». Qui l'utilise ? Quoi qu'il en soit, trouvons-en un qui a trois bonnes couleurs. OK, les années 80 veulent savoir où se situe son dégradé. Le voici, 98, ce crossover. Peut-être que vous pouvez les copier-coller, et je veux vous montrer comment ajouter plus d'une couleur. Disons que tu adores ça. OK, et je vais utiliser un autre dégradé. J'ai l'impression qu'il faut les séparer. Je vais, je vais passer au linéaire. Je vais le ramener à quelque chose de normal, comme s'il s' agissait simplement de haut en bas. Ce que je veux faire en haut, c'est simplement coller mon code hexadécimal OK, il y a le premier là-dedans. Je vais mettre le dernier. Et puis vous allez vous demander, comment puis-je en mettre un troisième ? Oh, c'est bien. Contente que tu me l'aies demandé. OK, cliquez sur celui-ci ici, puis collez-le dans X. Je viens de le faire pour nous, mais c'est un peu boueux ici. Le designer a choisi une jolie couleur intermédiaire Il vous suffit de cliquer une fois. Vous pouvez avoir autant de points que vous le souhaitez. Je vais en prendre trois. Ça y est. Mais tu peux en ajouter d'autres. OK, c'est à vous de décider. Ce sont donc des dégradés. Cela suffit. Je vous verrai dans la prochaine vidéo. 38. Comment réaliser et utiliser des styles de couleur dans Figma: Bonjour, tout le monde. Cette vidéo nous allons regarder les styles de couleurs. Les styles de couleurs sont un moyen de sauvegarder vos couleurs pour les réutiliser, voyez-vous ici ? Nous pouvons leur donner des noms sympas et cela signifie que plus tard, si je veux le mettre à jour, je peux mettre à jour ce style et vous pouvez voir toutes les utilisations de celui-ci ont été mises à jour, nous pouvons le partager avec d'autres projets et autres membres de l'équipe. tous ont obtenu des couleurs uniformes tout au long d'un projet. Laissez-moi vous montrer comment les fabriquer. Examinons la création de notre premier style. Le style est génial parce qu'en ce moment j'utilise simplement l'outil pipette, regarde le clavier, et je choisis des couleurs, c'est génial. Mais cette chose ici, vous faites glisser ça vers chaque document. C'est un peu douloureux et vous ne pouvez pas vous en sortir pendant longtemps, mais il va y avoir un moment où nous sommes comme, en fait, j'en ai juste besoin dans un endroit précis, mes styles et je veux pouvoir partager ces deux styles avec moi-même dans d'autres documents et partagez-les avec d'autres membres de l'équipe, et lorsque je mets à jour le style, tous les usages de tous mes documents changent, c'est ce qui est pratique. Vous comprenez ce qu'est un style, comment le faites-vous ? Ce que nous allons faire, c'est que nous allons dire que vous allez être un style et que vous le faites, voyez ces quatre points ici, c'est le petit peu. Tout le monde a un style pour que nous puissions créer un style de trait, nous le ferons plus tard dans le cours. Un style fixe est celui des styles de tick. Il s'agit de quatre petites pressions, donc vous cliquez dessus et vous appuyez sur « Plus » pour dire, je veux ajouter un nouveau style de couleur à mon groupe. Vous avez peut-être quelques styles ici, qui sont venus par défaut de Figma, mais ignorez-les pour le moment, nous allons créer des styles pour ce document. Quand il s'agit de nommer ceci, en fait, ce que je vais faire pour celui-ci, vous attendez là. J'ai décidé que c'était ma couleur principale et c'est ma seconde, je vais l'utiliser beaucoup plus. Avec celui-ci sélectionné, je vais aller à mes quatre points et je vais aller plus et en termes de nommage, c'est ma couleur principale. En tant que pigiste, vous travaillez sur de nombreux projets différents. Je vais mettre les initiales de l'entreprise, vous finissez par avoir beaucoup trop de primaires. Si vous travaillez dans une entreprise, travaillez spécifiquement en interne dans l'entreprise, vous n'aurez peut-être besoin de l'appeler principal que parce que vous travaillez. En ce qui concerne les conventions de dénomination, il existe plusieurs façons différentes. Je vais juste aller 1, 2, 3 pour les différentes couleurs primaires avec des tons différents pour, ça pourrait être A, B, C, ça n'a pas vraiment d'importance. Il y a une règle de Jim que je ne connais pas, les normes de l'industrie, mais cela ne change rien. C'est juste quelque chose de personnel, donc 1, 2, 3 fonctionne plutôt bien, d'autres personnes utilisent des pourcentages. Ils utiliseront des couleurs fixes et au lieu de mélanger de nouvelles couleurs ce que j'ai fait, ils vont juste la renverser, ils diront simplement que le ton est, cette première est comme 50 % de la couleur d'origine. Vous le verrez pas mal, vous verrez 18, 30, 70 pourcentages. L'autre façon de le faire est un peu plus, tire de CSS, qui tire de l'ancienne ligne de police de type. Fondamentalement, les gens utiliseront des centaines, ce serait 100 pour cent cette couleur est de 1 000. Une version minuscule de cette couleur, la plus basse est 100, c'est un peu bizarre, je sais. C'est vraiment courant que vous le voyez, vous le verrez principalement dans les polices, avez-vous rencontré ça ? Surtout avec le design web, le gras ne sera pas appelé gras, il s'appellera comme 700, c'est la version de code pour gras, donc nous pouvons également le faire pour les couleurs. Disons que si nous faisions cela, j'appellerais ça peut-être 100, j'appellerais ça, peut-être que ça 300, me donnant de la place pour aller un peu plus léger à 200 et 100 ans plus tard si j'en ai besoin. C'est très courant aussi, mais faisons simplement 1, 2, 3. Je vais vous copier, l'enregistrer, vous plus vous, très excitant. Je vais accélérer la situation et je vous verrai dans une seconde. Si vous appuyez accidentellement sur le bouton, celui-ci est parfait pour être appelé secondaire. Comment modifier votre style ? Une fois qu'il est fait et que vous devez changer la couleur ou le nom, vous pouvez cliquer dessus avec le bouton droit ici, car je viens d'essayer. Cliquez dessus une fois et ici, vous pouvez cliquer dessus avec le bouton droit de la souris et accéder à Modifier le style. Le vôtre est probablement défini comme ça, peut-être que d'autres dans un autre fragment de document vous ont donné. Mais ici, vous pouvez cliquer dessus avec le bouton droit de la souris et dire modifier les styles, puis entrer ici et ce sera mon secondaire. Vous pouvez également ajuster la couleur ici, mais je ne fais que régler le nom. Donnez-lui aussi une description, vous pourriez être la première personne. En fait, j'ai menti, les grands systèmes de conception pourraient donner des descriptions aux couleurs pour faire savoir aux gens quoi et où les utiliser. Je vais continuer à traverser ça, nous reviendrons en mode avance rapide. Nous arrivons aux gris, ce serait très difficile maintenant de faire 1, 2, 3, 4, 5, rien de mal, mais j'ai l'impression de regarder ces couleurs, je vais probablement en avoir besoin d'une autre ici parce que c'est aussi. c'est une grosse lacune ici. Il va y avoir un truc d'interface utilisateur dont je vais avoir besoin pour avoir quelque chose entre les deux. Je vais me laisser un peu de place pour bouger, puis je mélange mon nom. Pour les gris, je vais utiliser ce genre de centaines de noms. Je vais commencer ici et je vais dire que vous êtes gris et que celui-ci sera ma centaine. Ce que je vais faire, c'est le prochain, je veux l'appeler 200, je vais me donner de l'espace entre les deux pour dire que vous l'êtes, donc celui-ci est 300. Juste au cas où, plus tard, je pourrais serrer, je peux dire, oh, mec, j'en avais vraiment besoin de 200 et ça ne va pas gâcher ma numérotation. Je peux juste mettre 200 ici et continuer mon joyeux chemin, alors continuons. Je suis de retour, j'ai oublié les dégradés. Celle-ci ici, vous pouvez appliquer de la même manière, sorte que vous puissiez en faire un style. Celui-là, je vais dire que vous êtes un style et que celui-ci va s'appeler SH- Gradient et cela va être A1, toujours un. chose de légèrement différent, c'est que nous l'avons fait pour s'amuser, donc nous avons nos styles, il apparaîtra dans tous les styles. La seule chose dans laquelle il n'apparaîtra pas, c'est que si je te pars et que je te dis, et que je me souviens ici des couleurs locales, ça n'apparaît pas ici. C'est peut-être le cas plus tard, mais pour le moment, il faut aller à la voie officielle, ce qui est bien. Je vais l'enfermer dans mon dégradé SH. Un autre avantage pour les gens qui traînent, c'est que vous pouvez faire glisser ces choses. Si vous cliquez sur no man's land, vous pouvez dire que je veux que ces derniers soient ici. Il ne fait rien d'autre que d'obtenir votre façon Finch. Si vous les obtenez, vous en ajoutez un, plus tard, vous êtes comme en fait, je l'utilise tout le temps pour mélanger les couleurs et l'état des grains. Très bien, merci d'avoir traîné jusqu'au bout. Merci, Brian de m'avoir rappelé les dégradés avant de passer à autre chose. Passons maintenant à la vidéo suivante. 39. Projet de cours - Couleurs et colonnes: Heure du projet de classe. Nous allons combiner deux d'entre eux ici, principalement parce que les colonnes sont ennuyeuses et je ne voulais pas le définir comme son propre projet de classe. Je l'ai attaché avec des couleurs. Nous allons faire ces deux choses. Les deux C, le C ennuyeux, les colonnes ennuyeuses et les couleurs excitantes. Vous ne l'avez probablement pas encore, nous avons nos filaires Lo-Fi, créons les deux pages pour notre chaîne hi-fi, pour mobile et ordinateur de bureau. Dans ceux-ci, je veux que vous ajoutiez les colonnes. Alors n'oubliez pas que 12 pour les ordinateurs de bureau, six pour les appareils mobiles, et chacune de ces nouvelles pages doit avoir des cadres complets. C'est ce que je veux dire que nous allons créer. Vous n'avez que cette page pour le moment et cette page. Créez ces deux-là, nommez-les et assurez-vous qu'il y en a, décalez-en un, voyez tout sur votre page. Il y a ces quatre images, 1, 2, 3, 4. Même chose avec le bureau et assurez-vous qu'il y a des colonnes, et plus excitant, choisissez des couleurs. Cela peut être un peu bizarre selon l'expérience que vous êtes en tant que designer. Ne vous inquiétez pas, nous pourrons les ajuster plus tard. Ils peuvent être terribles et nous commencerons partager des choses avec le groupe un peu plus tard, et vous pourrez obtenir des conseils de la part des gens. Ce qui sera génial. Je ne suis jamais un bon sélecteur de couleurs. Je ne sais pas, ça a l'air bien. Choisissez vos propres couleurs, faites la même chose. Dessinez donc une petite grille comme celle-ci, choisissez la couleur primaire, secondaire et accentuée, ainsi que tous les gris. D'où viennent toutes ces couleurs ? Vous pouvez les obtenir à partir de votre mood board. Vous y trouverez peut-être des couleurs qui vous plaisent. Vous souhaitez vous approprier ou voler, ou vous pouvez vous rendre sur l'un de ces sites d'inspiration couleur que nous avons déjà regardés et obtenir vos couleurs à partir de là. Faites la grille, puis créez des styles car ce que je veux que vous fassiez une fois que vous avez terminé, c'est de m'envoyer une capture d'écran de tous les fichiers nommés ici, toutes les couleurs nommées pour montrer que vous pouvez le faire, et vous l'avez fait. Ne vous inquiétez pas de m'envoyer une capture d'écran des colonnes, de vieilles colonnes ennuyeuses. Je vais croire que vous les avez faites. C'est donc le projet de classe. Une chose que je veux vous montrer pendant que nous sommes ici, c'est j'ai commis une erreur plus tôt dans le cours. Eh bien, ce n'est pas une erreur, je veux vous montrer quelque chose. Les colonnes ici sur mon mobile, je n'ai pas mis de rembourrage à l'extérieur. J'aime bien avoir du rembourrage à l'extérieur. Vous n'êtes pas obligé de l'avoir, mais nous allons d'abord le faire. Je vais dire que nous allons regarder les colonnes. Je vais cliquer dessus ici, nous avons fait une gouttière de 16 entre les colonnes, mais en fait, je veux aussi une marge de 16, de chaque côté, de sorte que lorsque je dessine des choses comme celle-ci, elles sont en fait alignées. Cela dépend de votre design. Si vous ne voulez pas aller directement aux bords ici, vous ne pouvez pas avoir cette marge, mais j'en ai besoin. Je l'aime bien. Je vais le copier et le coller sur tous. Qui se souvient comment ? C'est bizarre. Cliquez sur le nom, allez ici, cliquez dans cette zone aléatoire. Pas là. Vas-y. Copiez-le, je vais dire que vous maintenez la touche Maj, cliquez sur vous et vous allez aller coller. Non, j'en ai deux. [RIRES] Je ne savais pas que c'était arrivé. Maintenant, j'en ai deux sur chacun d'eux. Super, alors. Lequel dois-je supprimer ? Est-ce le bas ? C'est le cas. Vous y allez. Nous avons appris quelque chose. Vous pouvez placer plus d'un ensemble de grilles. Je sais que lorsque je fais horizontalement et vertical, plus tard, lorsque vous êtes un peu plus avancé, vous pourriez commencer à faire des grilles, des colonnes. Je veux faire des rangées. Vous pouvez commencer à créer des lignes et des colonnes. Il a un peu de fantaisie hardcore. Nous avons nos colonnes. Alors, faites-le. Les colonnes sur le bureau forment quelques couleurs, nous pouvons les modifier plus tard, et parce que, n'oubliez pas c'est un style, votre style de couleur, nous pouvons l'ajuster facilement plus tard. Apportez quelques ajustements en fonction des commentaires des clients et peut-être des commentaires des étudiants, lorsque nous commençons à les partager ensemble. C'est ça. Projet de classe terminé. Va le faire. Je vous verrai dans la prochaine vidéo dans une minute. 40. Police desktop ou navigateur dans Figma: Bonjour à tous. Il s'agit d'une petite vidéo spéciale pour ceux d'entre vous qui ont décidé d'utiliser Figma sur le navigateur plutôt que sur le bureau. J'ai dit qu'il n'y a pas beaucoup de différences. C'est l'un d'entre eux. Même si vous êtes un utilisateur de bureau n'importe quelle version, il y a beaucoup de fois que vous finissez par sauter dans le navigateur et les polices vont être une des choses un peu étranges. Ce que je veux dire par là, c'est que je vais vous montrer. J'ai ouvert la version de bureau sur mon ordinateur et j'ai la version du navigateur. Ils ont l'air très semblables, sauf qu'il y a ce petit bouton maison. Rappelez-vous que plus tôt dans la vidéo où j'ai sauté, c'est cette vidéo que j'ai réalisé qu'il y avait une petite maison ici et qu'elle n'est pas sur la version du navigateur. N'oubliez pas que c'est là-bas, de toute façon. L'autre différence est que les polices qui, lorsque je regarde dans le navigateur, laissez-moi expliquer un peu, et je vais dans mon outil Type et je commence à taper ce que vous remarquerez, c'est que les polices la version du navigateur sont inférieures au montant que vous sur la version de votre bureau. Pour résoudre ce problème, pour vous assurer que toutes les polices de votre système se retrouvent dans le navigateur ici, il vous suffit d'aller sur Figma, le site Web et de faire une recherche pour le moment et les téléchargements. Celui-ci ici, mais regardez le programme d'installation des polices et installez simplement la version de votre système d'exploitation et il aspirera toutes vos polices de votre bureau, de votre ou de votre ordinateur portable et les mettra dans la version du navigateur et tout ira bien. C'est ça. Courte vidéo, je vous verrai dans la prochaine. 41. Polices disponibles et appariement de polices dans Figma: Salut. Dans cette vidéo, nous allons voir quelles polices puis-je utiliser dans Figma ? Quels sont ceux qui sont vraiment courants à utiliser ? Ensuite, nous allons regarder un peu de jumelage de polices, collant des exemples gratuits qui ont l'air vraiment jolis. On y va. C'est un bon jumelage là-bas. Juste pour vous aider si vous n'êtes pas sûr des polices à choisir et de celles qui correspondent. Allons-y. Quelles polices puis-je utiliser ? Vous pouvez utiliser n'importe quoi ces jours-ci. Vous voulez vous assurer que quelle que soit la police que vous utilisez, il existe une version Web de celle-ci. Le plus souvent, les utilisateurs utilisent simplement Google Fonts. Google Fonts ou fonts.google.com regorge de polices gratuites que nous pouvons utiliser commercialement et elles sont disponibles pour être utilisées en ligne et à l'intérieur des applications. C'est un endroit idéal pour obtenir des polices. Pourquoi ne pouvez-vous pas simplement utiliser toutes les polices de votre machine ? C'est principalement parce que vous devez vous assurer qu'ils sont disponibles. Il existe un autre type de police qui se retrouve dans les applications et les sites Web. Disons qu'il y a une police que j'ai achetée l'autre jour. des majuscules, Je vais utiliser des majuscules, SCOTT HEADPHONES. C'est celui-là, Geograph. J'ai commandé, c'est génial, j'adore ça. Mais quand je l'achetais, c'était ici. J'ai dit : « Super, j'adore cette police. » Je l'utilisais pour la conception de t-shirts pour l'un de mes derniers cours. J'ai dit : « Je vais acheter celle-ci parce que c'est une police payante. » N'ayez pas peur de payer les polices. Celui-ci ici et j'ai décidé que je voulais l'utiliser pour la vision de bureau. Au lieu de tout cela pour 300, je viens d'acheter les tailles que je veux uniquement pour les ordinateurs de bureau. Mais si je devais l'utiliser pour une application ou pour un site Web, je dois payer pour une licence différente. Cela dépendra du nombre de pages vues ? Sachez que vous pouvez réellement mettre beaucoup de polices en ligne, mais c'est un peu un obstacle que beaucoup de gens évitent en utilisant des polices comme Google Fonts parce que nous n'avons pas à les payer. Google a vraiment, je ne sais pas, embellir le web avec ses polices. Vous pouvez parcourir et choisir des polices ici et les télécharger. Disons que j'ai déjà eu un petit aperçu de la façon dont j'ai obtenu mes polices, et qu'il y en avait une appelée Crimson Text qui m'a plu. Je voulais une police avec empattement et une police sans empattement correspondante. J'aime bien celui-là. J'ai dit : « Super, c'est cool. » Vous pouvez taper ici. Vous pouvez insérer mon message marketing. Vous pouvez vérifier à quoi il ressemble. Vous pouvez ensuite télécharger certaines parties ou télécharger toute la famille. Ce qui est sympa, c'est de les télécharger, de les mettre quelque part, les ouvrir et de les installer. Il suffit de double-cliquer dessus. Ils s'installent. C'est assez facile. Ce qui est vraiment sympa, c'est que votre développeur ou celui qui crée votre site Web pourra avoir accès aux mêmes polices. Ils vont les installer légèrement différemment. Ils utiliseront probablement Content quelque chose Network, quelque chose appelé CDN. Ils ont différentes façons de le faire, mais c'est la même police, ce qui est sympa. Très courant d'utiliser Google Fonts. Il existe de nombreuses alternatives à Google Fonts. Si vous possédez une licence Adobe, il existe Adobe Fonts. Vous pouvez les utiliser, ils sont gratuits dans le cadre de votre licence. Vous pouvez vous rendre sur d'autres sites où vous les achetez. C'est juste une fonderie indépendante dans laquelle j'ai acheté des trucs. De belles choses ici. Celui-ci s'appelle Klim. Mais vous pouvez également aller sur fonts.com ou Envato. Nous avons examiné Envato Elements plus tôt. Ils ont beaucoup de polices sympas là-dedans. Marché créatif. Il y a un million d'endroits où vous pouvez acheter des polices. Mais sachez simplement que vous devrez peut-être acheter une licence spécifique. Il y a juste quelques polices que personne n'a encore pris la peine d'en créer une version Web, alors ne vous inquiétez pas. Un autre petit astuce est l'appariement des polices. Ce que je trouve c'est, disons que vous décidez que vous aimez cette version semi-audacieuse, regardez 600. C'est là que tu y vas. Il y a encore une numérotation bizarre dans les centaines que nous avons fait pour la couleur. Supposons que vous aimiez cette version 600, que vous choisissiez le style. En fait, ne le faisons pas de cette façon. Jetons un coup d'œil en bas ici. Ce que vous verrez, c'est qu'ils ont souvent des appariements populaires avec Crimson Text. là que tu y vas. Montserrat est vraiment courant. Tu aimes bien ? Oui, c'est un bon combo. Ou peut-être Open Sans. Il s'agit de toutes les autres polices que vous pouvez télécharger depuis Google Fonts. Maintenant, il ne s'agit pas d'une classe de topographie, mais d'une façon agréable , simple et assez courante de travailler, c'est que si vous avez choisi une police qui a une empattement pour votre texte de héros ou votre texte frappant, ces petites sérifs, ces petits [ inaudible] dessus. Il sera courant d'utiliser un sans empattement comme copie corporelle et vice versa. Ce n'est pas le rôle à 100 %, c'est juste une règle très courante. Maintenant, si vous débutez dans le jeu de polices ou le jeu de design, vous pourriez trouver ce terme très utile, les jumelages de polices. Si nous allons utiliser Google Fonts ou Adobe Fonts, ou quoi que ce soit, le mot « jumelages de polices » est utile. Le résultat est ici. Jetons un coup d'œil. Je vais en ouvrir quelques-uns. Quoi qu'il en soit, un tas d'entre eux. Ce que vous verrez, c'est qu'il y a un couplage de polices. Quelqu'un d'autre avant que vous ne soyez parti et a décidé de jumeler des trucs. On y va. Voici enfin quelques exemples. Abril avec un Lato. Que pensez-vous ? Vous y voilà. Ce n'est pas parti. C'est plutôt cool. [inaudible] qui se passe. Tellement de pop-ups. Quoi qu'il en soit, jetons un coup d'œil à d'autres exemples. Montserrat Oswald. Vous n'êtes pas obligé d'être d'accord. Je n'aime pas ce jumelage. Jetons un coup d'œil. Mais ils sont tous téléchargeables à partir de Google Fonts et vous pourriez dire  : « Oh mec ». C'est ça. Abril Fatface avec Roboto est là où je vais. Ayez juste un peu de travail à travers toutes les différentes. Vous pouvez entrer dans la communauté Figma. Il y a également des fichiers de couplage de polices là-dedans, mais cela peut être un peu difficile lorsque vous essayez de choisir des polices pour une application ou un site Web, un peu de couplage de polices. C'est tout pour quelles polices puis-je utiliser dans mes fichiers Figma ? Passons à la vidéo suivante. 42. Quelles tailles de police courantes choisir en web design: Bonjour à tous. Dans cette vidéo, nous allons parler du dimensionnement des polices dans Figma. La réponse courte est que vous pouvez choisir n'importe quelle taille que vous voulez, mais certaines valeurs par défaut ou des choses communes ont été convenues entre un grand nombre de membres de la communauté Web. Mais vous pouvez enfreindre totalement les règles, vous pouvez utiliser n'importe quelle taille que vous voulez. Mais je vais vous montrer les valeurs par défaut, puis nous ferons des choses de base et noterons certaines des cartes de fonctionnalités que nous allons utiliser dans ce cours. Très bien. Allons-y. D'accord. Tailles pour le texte, vous pouvez choisir n'importe quelle taille que vous voulez. Certaines règles générales sont utiles lorsque vous êtes nouveau. Je vais travailler sur ma page d'accueil. Je vais effacer tous les déchets que j'ai eu dans les tutoriels précédents. Nous allons maintenir la touche Maj enfoncée et passer à zéro. Vous pouvez passer au décalage numéro un, vous montre toute la page. décalage deux fait la chose que vous avez sélectionnée en plein écran. Mais c'est trop proche. Le mien est à 133 ans. Je veux qu'il soit à Shift Zero, soit 100 pour cent. C'est une meilleure façon de choisir des polices. Encore une fois, vous devez effectuer des tests sur votre appareil. Surtout si vous allez voir une montre connectée ou peut-être une télévision ou autre chose. Ajoutons notre principal message marketing sur cette page d'accueil. Je vais prendre mon T sur mon clavier pour l'outil de type, cliquez une fois. Je vais appeler celle-ci, la musique de notre peuple. Je vais choisir ma police. J'utilise ce Crimson Pro. Ça m'a plu. J'ai vu un exemple en italique. Quelle taille devrais-je le faire ? Je vais vous montrer les éléments de base. Je vais commencer par là bas. Je vais le rendre blanc pour que je puisse le voir ici. Mettons quelques tiques d'échantillon, mettons la tête d'un échantillon. La plus grande taille jamais parcourue sur Terre est d'environ 72. Laissez-moi l'utiliser. Mais cela semble faire partie de la liste des exemples de tous. Ensuite, je vais en descendre un, puis je vais le changer au prochain saut. Il est 48 ans. Saut suivant, 32 , 24, 18. Ensuite, vous passerez souvent à votre copie corporelle pour 16. C'est une échelle de taille vraiment normale, vous pouvez avoir toutes sortes entre les deux. Mais ce sera vraiment courant car beaucoup de sites auront ceci, c'est une hiérarchie. Vous avez peut-être le titre 1, le titre 2. Souvent, c'est ce que l'on appelle Head-0 parce que personne ne l'utilise. Parce que c'est aussi gros que ça. Donc, Rubrique 1, 2 , 3, vous ne pouvez pas avoir cinq. Nous venons de les avoir. C'est vraiment typique. Disposons-les bien. Ici, nous allons distribuer l'espacement vertical, on y va. Vous pouvez l'utiliser pour votre espacement. Si vous êtes comme ça, je ne suis pas sûr de ce que cela devrait être. En fait, la musique pour notre peuple était là et je dirai que je vais faire un cap. Je vais donc l'amener. Je vais en faire une de mes couleurs. Je vais donc utiliser mes trois secondaires. C'est en contraste sombre avec l'arrière-plan. Je vais utiliser ce message marketing, la musique de notre peuple. Vous allez devoir proposer votre propre message marketing pour votre personnalité ou votre client. Je vais juste mettre un retour là-dedans, et je vais le mettre au centre, puis je vais saisir mon outil de sélection, cliquer dessus, mettre au milieu, et ça va marcher pour moi. C'est mon principal message marketing. Vous serez en tête 1 parce que vous êtes vraiment important. Selon la façon dont vous allez utiliser la police, peut que vous ayez exactement le même groupe, mais ce n'est pas en italique. Il est peut-être dans un demi-boulon. En fait, c'est trop gros pour moi. Régulier, moyen. Il peut s'agir d'un autre cas d'utilisation pour vos en-têtes. Cela peut ressembler à la version marketing familière et il peut s'agir de plus en plus d'informations. Lorsque vous arrivez à votre copie corporelle, elle est normalement de 16 ans. Tout ce qui est inférieur à cela pose des problèmes à la fois sur les applications et les sites Web où ils sont trop petits. L'accessibilité est un problème où les gens peuvent le lire. En fait, les sites Web de Google n'aiment pas quand vous mettez de minuscules polices partout. Il est dit : « Hé, vous avez enfreint certaines règles dans votre classement de recherche pourrait être affecté. » De toute façon. Ma police correspondante s'appelle Dosis. ai jamais utilisé auparavant, il a l'air cool. J'ai vu un exemple et je vais l'utiliser en standard et 16, ce sera mon paragraphe. Au lieu de la rubrique 4, il s'agira soit de ma copie corporelle, soit vous pouvez l'appeler paragraphe. Ce que vous remarquerez probablement sur les lignes, c'est qu'ils l'appelleront H1 ou H0. H zéro, désolé. Rubrique 1, Rubrique 2. Votre cerveau de concepteur web pourrait être comme, je sais totalement ce que c'est. Si ce n'est pas le cas, vous êtes concepteur Web et le cerveau du développeur web saura de quoi il s'agit. C'est juste une version abrégée de celui-ci. Ce qu'il y a ici, il y a parfois un P un et un P deux. Si vous avez un deuxième paragraphe, se peut que vous en ayez un qui doit l'être, c'est un cas particulier. Il s'agit d'un fond de modèle mixte et cette version légère est trop légère. Il peut être nécessaire d'avoir cette version plus lourde. C'est la taille d'échantillon de base. Vous pouvez le laisser là. Je vais déménager ça là-bas, et regarder un exemple de travail. Je vais me débarrasser de ce contexte. Je vais juste ne pas avoir de remplissage. Vous devez remplir. Même s'il est blanc. Je vais commencer à construire des cartes que nous allons construire plus tard avec nos fonctionnalités. Je veux dessiner des boîtes, mais je veux les accrocher à nos colonnes. Il y a un peu de production. Nous avons appris tout ce que nous allons apprendre sur les tailles. Encore une fois, il n'y a aucune raison pour que vous ne puissiez pas en avoir 35. La raison pour laquelle certains de ces chiffres existent est un couple de rôles différents, mais disons que 16, 16 est la valeur par défaut sur le Web. Quelque chose appelé Ems. Un em a la taille par défaut pour toutes les polices en ligne si vous ne la modifiez pas. Nous l'utilisons donc comme base. Nous avons parlé de cette grille de 8 pixels plus tôt. Eight est divisible par 16, ce qui est pratique également. Il y a des choses à voir avec les hauteurs de lignes et les grilles. Vous pouvez aller assez loin là-dessus, mais c'est un bon échantillon de départ. En fait, donnez-moi une seconde. Je vais les écrire ici pour que vous puissiez prendre une capture d'écran ou l'avoir pour vous-même. De plus, ne me retenez pas à ça. Ce ne sont que des règles générales et vous pouvez les enfreindre tout ce que vous voulez. Allons faire le truc. Je vais dessiner quelque chose ici. Ce que je voulais faire, c'est que je voulais accrocher les colonnes. Je vais créer ce qu'on appelle une carte. C'est notre petite boîte réutilisable. Nous allons en avoir trois. Vous les avez vus au début. Ce que je vais faire, c'est cliquer dessus sur le globe oculaire de ma grille. Il est là. Je vais dessiner avec l'outil Rectangle, et je vais dessiner quelque chose qui ressemble à ça. termes de couleurs, je vais choisir un de mes styles et passer à cette couleur secondaire. Je vais aller à mon outil de cercle. outil Cercle est la touche O car il ressemble à un cercle. Si vous voulez un raccourci. Je vais le traîner en maintenant Shift. Je vais les utiliser comme images plus tard. J'ai l'intention de les utiliser pour des images. En termes de cohérence, il n'est pas nécessaire de suivre toutes les grilles, mais cela va être pratique. Je vais le faire. Mon plan est de les utiliser alternativement. Donc, l'image va être ici, les coches de fonctionnalité vont se passer de cette façon. Je veux renverser celle-ci. Pour cela, nous allons utiliser notre raccourci super incroyable, notre commande, barre oblique avant ou notre barre oblique de contrôle avant. Je me demande s'il y a un retournement ? Pas une glissade, un flip. Il y a, retournez horizontalement. Vous y allez. Je vais faire la même chose. C'est mon plan pour le moment. Je vais vous montrer juste un cas d'utilisation pour le texte, et nous devons vraiment créer quelque chose de cool. Il y a beaucoup de théorie, je ne veux pas vraiment faire quelque chose. Tapez outil, cliquez une fois. Mes fonctionnalités vont être, nous en aurons trois. L'une de mes rubriques est probablement le plastique recyclé. Ce sera l'une des caractéristiques de mon produit, les plastiques. Sélectionnez-le tout. Quelles sont les rubriques que nous avons ? 22 ? Est-ce que je saute jusqu'à 24 ? 24 va travailler pour moi, parce que ça va bien. Ensuite, dans la copie de mon pote, je vais cliquer et faire glisser. Parce que je veux qu'il perce ici. En cliquant une fois, vous obtiendrez cette boîte en expansion permanente. En cliquant et en faisant glisser, cela vous donnera une largeur fixe. J'aimerais avoir un style. Nous allons le faire dans une seconde. Je vais le changer manuellement en Dosis. Je vais utiliser 16. Je vais commencer à taper. Nous allons le faire pour le moment. On y va. Cool. Je suis de retour à zéro, reviens à 100 pour cent, alors décalez zéro. Cela n'a pas fonctionné. Si vous appuyez sur Maj zéro alors que vous êtes dans l'outil Type, il écrit cela. Qui a su ? Décaler le zéro. D'accord. Oui, ça a l'air bien. Cependant, il n'y a pas de texte approprié là-dedans, mais c'est quelque chose que je cherche. Probablement un peu d'espacement, probablement des coins arrondis. C'est peut-être ce que je fais. La hauteur de la ligne doit probablement sortir un peu, à mon avis. Je vais m'assurer que le rédacteur n'écrit qu'une phrase. Merci beaucoup. Très bien. C'est mon plan pour 1, 2, 3 d'entre eux. Cela ne s'est pas aligné sur ça. Mais c'est plutôt bien. Pouvez-vous voir les lignes rouges ? J'avais couvert, mais ici. Mauvais endroit. Vous pouvez voir tout cela aligné. Ce n'est pas encore parfait, mais je suppose que nous devons arrêter de faire certaines choses, je veux vous montrer un exemple de cette rubrique. Est-il trop proche ? C'est peut-être le cas. Je saute jusqu'au 32, peut-être que j'ai besoin d'un 28 à cause de cette police particulière. Certaines polices semblent plus grandes que d'autres. De toute façon. Ne passez pas trop de temps sur votre ordinateur portable, moins qu'il ne s'agisse d'un site Web. Vérifiez sur votre téléphone, comme ce que nous devons faire. Allez dans ce miroir Figma et vérifiez-le, est-ce lisible ? Est-ce que cela doit être réellement régulier ou doit-il être moyen ? Très bien. C'est tout, la taille de la police est terminée. Je vous verrai dans la prochaine vidéo. 43. Comment réaliser un style de caractère dans Figma: Bonjour à tous. Dans cette vidéo, nous allons regarder les textiles. Nous allons en faire tous ces beaux. Ils sont utiles car nous pouvons être cohérents. Nous pouvons y aller et faire des mises à jour rapides et vraiment peaufiner leur design. Allons-y. Pour créer un style, c'est exactement le même processus que les couleurs, à l'exception des polices. Vous n'avez pas besoin d'avoir cette fantaisie. Vous ne les avez pas énumérés de cette façon. Vous pouvez simplement utiliser cette police ici. Je pourrais dire que vous, mon ami, allez être mon style de tête. Je vais passer par SMS. Tu te souviens de ces quatre petits points quand on faisait de la couleur ? C'est la même chose ici. Sauf que ce style va informer notre police ou notre texte. Nous allons appuyer sur ce petit bouton Plus comme avant, et vous pouvez l'appeler Titre 1, ou je vais juste appeler H1. Quel que soit le nom que vous voulez appeler ça. Je vais appeler la mienne en tête 1. Super. Je peux aller ici et dire, en fait, j'ai besoin que vous alliez maintenant, c'est le même endroit, mais en bas ici comme si nous avions des couleurs. Ils sont là. Regardez-moi ça. J'ai postulé à celui-ci. C'est la même chose. Ce que vous remarquerez, c'est que la police viendra, mais pas la couleur. Nous allons taper autre chose. Je vais vous taper, et je vais dire, disons que c'est la mauvaise police. Je vais le briser, et je vais dire Roboto, et c'est un petit 16 ans. Je vais casser cela et dire que vous n'êtes que la couleur jaune vif ou quelle que soit cette couleur. [inaudible] loin et tu es genre, j'ai besoin qu'il soit mon style. Génial. Je peux utiliser mon style sucré. Je vais sélectionner le texte. Où sont mes styles ? Texte. C'est là. Je vais dire : « Vous, mon ami, êtes ici. » Notez que le texte est actuellement de la lime. C'est une couleur vert jaunâtre. Vous remarquerez qu'il a la bonne taille, qu'il a la bonne police. Il est en italique, tout l'espacement des lettres, le crénage et le menage feront tous partie du style. Mais vous voyez que la couleur ne l'était pas. C'est quelque chose qui ne correspond pas au style de police. Une chose que j'ai rapidement sautée là-bas, c'est dire que je veux changer cela. Ce que vous remarquerez, c'est que lorsqu'il s'agit d'un style, ce genre de zone de texte devient vraiment petit. Vous êtes comme, « Je peux faire aligner à gauche, aligner à droite. Je peux jouer avec quelques petites parties, mais je ne peux pas faire grand-chose. » Je veux changer cela. Pourquoi est-il bloqué ? Vous pouvez casser du texte. Ce style d'en-tête, appliquez-le en cliquant sur la petite icône de lien cassé, et tout cela apparaît à nouveau. Avant, après, et il est détaché de ce style. Je peux y aller de l'avant et faire tout ce que j'aime. Ce que je vais faire, et je vais vous amener à le faire aussi, c'est travailler. Je vais dire que celui-ci est mon texte. Ce sera un style. Je vais utiliser la rubrique zéro et continuer à les ajouter. Maintenant, si je clique sur l'arrière-plan, voyez-vous ? Ce sont plutôt mes styles. Plus tard, je vais vous montrer comment partager tous ces styles avec d'autres membres de votre équipe, ce qui les rend encore plus excitants. Maintenant, parcourez votre chemin. En fait, avant de passer, l' un des grands points pour les styles dont je ne vous ai pas parlé est la mise à jour. Ces deux-là sont exactement les mêmes, sauf pour les différentes couleurs. Si je leur applique un style de titre 1, rien ne change. Disons que le client revient et dit : « En fait, Dan, nous ne ressentons pas le texte cramoisi. J'ai une police pour vous. Je vais le faire passer. Pouvez-vous utiliser cela ? » Et tu me dis : « Pas de problème. Je peux le mettre à jour. J'ai hâte. » Avec cette option, je vais entrer ici, et je ne vais pas rompre le lien ici. Ce que je veux faire, c'est que rien n'ait été sélectionné. Allez ici et dites que le titre 1 doit être mis à jour et rappelez-vous que je l'ai appliqué là et là. Si je mets à jour celui-ci, ils devraient tous être mis à jour, et je peux entrer ici et dire, cool, vérifier l'e-mail, s' évanouir du choc, et c'est Brush Script, et ce beau design que vous avez a travaillé a maintenant été Brush Script. Vous pourriez aimer Brush Script. Je déteste tellement ça. Mais de toute façon, voici comment mettre à jour votre textile. Vous pouvez voir s'il est utilisé sur de nombreuses pages différentes, des cadres différents. Tout va être mis à jour. Vraiment dur. Annuler. On y va. Continuez à travailler sur votre chemin, créez un style pour chacun d'eux, et je vais faire ce mode d'avance rapide. Ce que je dois vraiment mentionner, c'est que j'ai choisi deux styles. Je ne devrais pas. Je devrais garder ce cours simple et aller comme ignorer celui-là. Nous n'allons jamais l'utiliser. Mais il se peut que vous ayez un en-tête marketing, puis un en-tête d'information, ou il peut y avoir des versions de votre site Web qui sont back-end, frontales. Vous pouvez avoir deux types de titres. Comment les diviser ? C'est à vous de décider. Je vais avoir cela en tant qu'Alt H1 ou en tête 1. Juste pour connaître la différence entre les deux, et dans mes spécifications, mes spécifications de conception ou mon système de conception, je peux expliquer aux autres concepteurs quand utiliser l'italique, quand l'utiliser. C'est peut-être familier pour les citations, ou peut-être le jargon, tous les messages marketing occasionnels. Alors que c'est vraiment pour les en-têtes d'information pour les menus et les choses. Je pourrais expliquer cela là, lequel utiliser et où. Je vais m'y frayer un chemin. Je vous verrai dans une seconde. Je suis de retour. Je les ai tous ajoutés. Je veux vous rappeler deux choses. La première est que si j'entre ici et que je me dis : « Je veux que tu sois l'un des styles. » Vous remarquerez que dans mes styles, ils ne sont pas par ordre alphabétique. Ils sont dans l'ordre dans lequel je les ai faits. Cela se dit : « Que fais-tu là ? Pourquoi est-ce que l'un est au-dessus de zéro ? » Nous l'avons fait avant. N'ayez rien sélectionné et partez, bien zéro est au-dessus d'un, et Alt un. J'en ai deux. J'ai eu une autre chose. Je ne me souviens pas de ce que c'est. Vous attendez là. Je suis resté ici depuis cinq minutes. Je n'arrive pas à le comprendre. Passons simplement à la vidéo suivante, en étant important. 44. Lorem ipsum et emplacement de texte réservé dans Figma: Bonjour à tous. Dans cette vidéo, nous allons introduire un peu de texte réservé, au lieu d'utiliser le mot texte réservé ou xxx, que nous avons appris plus tôt. Je vais partager un site Web pour l'obtenir, et je vais vous montrer un plug-in de suite appelé content real. Nous allons mettre à jour notre style de paragraphe simplement parce que, tout cela et bien plus encore, en fait, pas seulement cela dans cette vidéo. Commençons. Nous avons besoin d'un texte réservé parce que nous avons écrit cela ou écrit, je pense que plus tôt, nous l'avons fait xxx. Ça ne va pas voler. Nous allons utiliser quelque chose appelé Lorem Ipsum. Certaines personnes n'aiment pas l'utiliser, c'est très bien. Vous avez vu au début, c'est juste le latin mélangé des mots qui ressemblent à l'anglais, il y a Lorem Ipsum pour toutes les langues différentes, mais regardons. Il y a un moyen facile. C'est comme un rite de passage pour aller sur lipsum.com, plein de publicités, horriblement conçues, mais je ne sais pas que tout le monde l'utilise. Si vous ne le voyez qu'une fois, sachez cela. là que tu y vas. J'ai besoin d'un paragraphe, générez Lorem Ipsum et vous pouvez le copier et le coller dans votre document. Il contient juste la place, un espace réservé. C'est à peu près tout. Jusqu'à ce que nous obtenions le texte du rédacteur signifie simplement que nous ne sommes pas un peu plus faciles à concevoir et cela nous donne une idée de la hauteur de ligne, mots différents et de la taille de la police, mais comme beaucoup de choses dans Figma, il y a un plug-in. pour ça. Je retourne chez moi ou je vais peut-être revenir aux dossiers. dois revenir ici, trouver le pot communautaire et je vais aux plug-ins et je veux rechercher du contenu réel, K-R-E-E-L. Celui-là est super génial. Nous allons utiliser pour cela et beaucoup d'autres choses sur le parcours. Il pourrait y en avoir une meilleure maintenant, Google, meilleure alternative pour le contenu réel ou le plugin de texte réservé de base pour Figma. Je vais l'installer et le plugin est si bien installé très rapidement. Allez dans l'onglet, ouvrez le plugin. Le voilà, ils ont du contenu réel et ce que je vais faire , c'est que je vais prendre mon outil de type, Tiki, faire glisser ça. Je suis en fait allumé mes colonnes là où on y va. Je vais prendre mon outil de type et je vais dessiner une boîte de type qui s'adapte ici et avec le cas de la chair, je vais dire Lorem Ipsum. Vous pouvez le décomposer. Nous examinerons quelques-uns de ces autres plus tard. Mais je veux que Lorem Ipsum y aille. C'est trop gros. Imaginez si j'avais un raccourci pour le faire aimer le corps du texte. Voici que je vais tout sélectionner et je vais aller ici et dire en fait que vous, mon ami, allez être paragraphe et j'ai également remarqué ici que mon interligne est mon interligne. Mon interligne pour le paragraphe n'est pas bon, c'est vraiment serré et je l'aime mieux ici. Ce que je vais faire, c'est que je vais cliquer là-dessus. quoi cela s'applique-t-il, fixez-le à 115 pour cent. Je n'aime pas ce numéro bizarre, mais ici, il est réglé sur, comment puis-je mettre à jour celui-ci ? Qui s'en souvient ? C'est comme un test, un quiz pop. Vous vous souvenez, n'avez rien sélectionné et ils sont tous ici, je peux m'y attarder. Ce que je vais faire, c'est finir avec votre contenu réel. Merci beaucoup. C'était le truc de Lorem Ipsum. Nous allons finir avec lui. Nous y voilà. Rappelez-vous que depuis la dernière fois que je travaillais. Si vous supprimez tout et que vous cliquez simplement dessus, il passera en mode automatique. L'auto est très pratique. C'est plutôt bien. Vous ne pouvez pas le forcer en tapant des trucs, mais je vais juste le laisser à 100 % ou automatiquement. En fait, ce n'est pas 100 pour cent, c'est un peu plus gros. Donc la valeur par défaut est 20.2 et j'aime mieux ça et ce qui est cool, c' est maintenant si je le joue ici et je dis que vous allez être le style de paragraphe. Il va garder le large, mais il va utiliser ce nouvel interligne. Si vous obtenez un style configuré même s'ils se sentent un peu tôt pour eux, ce copain devrait copier. Cela signifie que vous pouvez mettre à jour rapidement les choses sur un document volumineux. Je vais vous, mes amis, vous êtes paragraphe. Regardez-moi ça. Il y a du texte réservé Lorem Ipsum dans Figma pour vos balises. Une note que si vous travaillez, vous dites que votre client est comme mon père, aime mon père, si je leur envoie ça cependant, il se plaindrait qu'il était cassé et je devrai lui expliquer par un courriel que son espace réservé texte et c'est mélangé des mots latins juste pour donner l'impression parce que nous n'avons pas encore écrit le texte juste pour que vous sachiez que cela vous arrivera une fois. Très bien. Vidéo suivante. 45. Choses importantes à savoir sur le texte dans Figma: Bonjour à tous, dans cette vidéo, je vais parcourir quelques fonctionnalités légèrement plus avancées pour le texte, juste celles que j'utilise beaucoup et j'imagine que vous utiliserez. Je ne vais pas couvrir tous les cas d'utilisation des polices, mais je vais vous montrer où les trouver. Nous allons ajouter des liens. Je vais vous montrer comment faire des trucs, détruire les tiques. Nous allons faire un espacement approprié des paragraphes, espacement entre les lettres et d'autres. Allons-y et sautons. Le premier est de s'assurer que vous êtes conscient, j'ai un style appliqué à cela, je vais le casser, c' est tout ou pas tout, mais beaucoup de bonnes choses ici dans les trois petits points avancés. Nous allons en couvrir des morceaux, juste des trucs utiles. Les principaux que j'aime utiliser sont le début ou la hauteur de ligne ici, évidemment nous avons regardé, et l'autre est l'espace entre les paragraphes. Si je mets un retour entre ces deux-là, je comprends, est-ce une veuve ? [inaudible] veuve ou orphelin. Je vais ouvrir ça. [inaudible] tournez là, mais tout ce que je veux faire, c'est ouvrir l'espacement. Ne faites pas partie de ces personnes qui font ça. Cela fonctionne, ou faites-le moins lorsque vous sélectionnez le texte, pouvez-vous le faire et réduire la taille de la police ? Vous riez si vous l'avez fait. Je vais tout sélectionner et je vais passer à celui-ci ici, quand j'utilise un peu d'espace entre les paragraphes, il serait très courant de diviser la taille de votre police en deux. Vous n'êtes pas obligé de le faire. Quoi qu'il en soit, divisez-le en deux ou au moins [inaudible] certains facilement divisibles par la taille de votre police vous facilitent la vie plus tard lorsque vous essayez d'aligner les choses lorsque vous êtes un peu plus avancé. Mais de toute façon, la hauteur de la mine et cet espace [inaudible], comment appelons-nous cela ? Appelez ça l'espace après, l'espacement des paragraphes, il a le bon nom. Examinons l'espacement des lettres, je vais dire que vous vous efforcez plus tard de créer un logo basé sur les polices que vous utilisez. Nous allons faire des écouteurs Scott. Je vais en choisir un audacieux, et avec mon Scott, très souvent, je vais prendre ces deux-là. Est-ce que c'est celui-là, et bien ça aussi. Quoi qu'il en soit, l'espace entre les lettres souvent ces deux-là, et je vais les faire glisser vers le bas. S'il apparaît mélangé, il ne sait pas quoi faire lorsque vous le faites glisser. Je vais le supprimer, puis le faire glisser de cette façon. Quelle débâcle, zéro. Ces choses arrivent aux meilleurs d'entre nous. C'est ce que je veux faire. Je les ai tous sélectionnés, je suis revenu à zéro et je vais juste arranger ça. Vous pouvez décider ici, c'est un grand espace sur cette police, je n'aime pas ça, donc je vais vous dire aussi, je vais aller plus petit. Juste celui-là plus petit, c'est celui-là. Cool. Si je suis honnête, je finis par faire beaucoup plus de travail de design dans Illustrator. Je ne fais que le copier et le coller ici. Je vous montrerai plus tard les connexions Illustrator, mais l'espacement des lettres ou les variations de suivi ou de crénage d'un thème. Je vais avoir des écouteurs Scott. Vous allez faire le vôtre. Nous allons faire un petit logo verrouillé en haut ici. Je pourrais le faire par la suite. Cela réduit l'une des autres choses que je vais montrer dans cette vidéo est en hausse. Vous êtes comme, où est la taille en haut. Souvenez-vous de l'outil K ou de l'échelle faites simplement des choses où nous ne voulons pas vraiment toucher ceux comme 72, 48. Nous voulons juste l'agrandir. Je vais le faire. Ce sera mon logo pour le moment. Ça fera le titre de marche. Décaler le zoom zéro à 100 %. C'est assez grand. Ce n'est pas tout aligner comme je l'aime, mais passons aux polices les plus avancées. Le suivant consiste à sélectionner tous les mêmes. Disons que j'ai cette chose, ces trois là n'ont pas le style appliqué à eux. Quel autre côté je pense en frapper trois. Je vais passer par là. C'est comme ça le premier, ça peut causer beaucoup de cadres différents. Nous les avons tous assez serrés ici. Je n'ai pas pu sélectionner tous les remplissages. Nous pouvons trébucher ici et aller dans « Modifier », « Sélectionner tout le texte à corriger », est-ce un raccourci ? Je pense que c'est le cas. Avec cette option sélectionnée « Slash Forward Command » ou « Control Forward Slash » sur un PC et tapez « Sélectionner la même chose avec les propriétés du texte », c'est parti. Il est passé en revue et les a tous sélectionnés et maintenant je peux dire que vous êtes tous en tête 3. En fait, c'est mon Alt Heading 3 qui va le casser, revenez en arrière. Voici mon « Alt Heading 3", on y va. Vous pouvez parcourir et mettre à jour les choses, les modifier. Vous n'avez pas besoin de le changer pour un style, mais ce peu, sélectionner les mêmes propriétés de texte est pratique. Une nouveauté pour Figma, c'est que nous avons maintenant des balles et une numérotation. Ils ne sont pas très excitants, n'est-ce pas ? Ils sont vraiment très pratiques. Mais ils sont là juste pour que vous sachiez. Une autre chose utile que je veux vous montrer est que vous avez peut-être un lien ici. Je vais tout sélectionner et [inaudible] ici, on le ferait. Vous pouvez cliquer dessus et dire que lorsque vous cliquez dessus, nous allons aller sur www. dans ce cas, va sur figma.com. Nous allons le coiffer avec le clic traditionnel parce que je suis une couleur de lien, vérifiez ce que c'est réellement, mais je vais le rendre audacieux. Un autre raccourci que je lance en bonus est que si vous avez quelque chose sélectionné, vous pouvez utiliser un si vous avez quelque chose sélectionné, vous formatage de base, comme « Commande B » ou « Control B » sur un PC et je le rends juste en gras. Idem avec les italiques « Commande I », si votre téléphone a un I, il n'a pas d'italique. Mais si c'est le cas, « Commande B », celui-ci passe ici à « Régulier », j'ai sélectionné « Commande I », passera en italique. Je dis commande, [inaudible] Donc si vous entendez la commande, pensez « Contrôle » sur un PC donc « Commande U », c'est souligner « Commande S », ce n'est pas le cas. Strike through est là-dedans sous votre avancé ou est là, je ne me souviens pas du raccourci pour cela, est-ce que c' est « X » « Commande X » nope, il se ferme. Il s'agit d'une mise en forme de base. Le lien fonctionnera dans votre prototype, donc je vais aller à plat et voilà. Il va sauter sur un site Web. Il a sauté ici. C'est vous demander, voudriez-vous partir pour vous assurer qu'il va le faire, ça va aller à Figma. Vous avez l'idée de celui-là. Quoi d'autre ? Le dernier est lorsque vous décrivez la police. Disons que vous êtes [inaudible] et que vous voulez en faire quelque chose de fantaisiste. Je vais le dupliquer parce que je vais détruire cette chose [inaudible]. Zoom avant, « Maj 2" pour ma sélection, zoom avant et je vais appuyer sur « Commande moins 1 » pour revenir un peu, toujours trop zoomer. Allez, Figma juste un zoom avant assez mais pas trop près donc, c'est « Commande moins », pour zoomer un peu ou « Control Minus ». Il s'agit d'un texte modifiable, ce que je peux dire que vous voulez y faire quelque chose de spécial. Détruisez-le, nous allons personnaliser cette police. Ce que nous pouvons faire, c'est que nous pouvons décrire le trait. Fondamentalement, il ne s'agit pas d'une police. Vous ne pouvez pas modifier le type, mais ce sont des formes modifiables, je peux donc double-cliquer dessus, passer en mode d'édition ou membre avec lequel il est sélectionné, aller à la mode fantaisie ou à long terme. Je peux aller ici et dire ce que je vais faire ? Je vais le faire, sélectionner tout ça et je vais y arriver. Que vais-je faire ? Je vais essayer de les attraper. J'ai dû zoomer pour saisir tous ces éléments. Il y en a un, [inaudible] ici. Vous devez zoomer avant pour obtenir un peu de détails. Scott Headphones, que suis-je en train de faire ? Détruire cette articulation, c'est ce que je fais. Je ne peux même pas le faire. C'est ce qui arrive quand on ne planifie pas très bien la vidéo. C'est comme une onde sonore ? Je me suis vu réparer ça. Faisons-en encore une. C'est comme si les ondes sonores regardent ça, beau. Vous pouvez définir un plan de texte, n'est plus modifiable, toujours vous assurer qu'il y a une sauvegarde. Tout ça. J'ai fini, mais je suis de retour maintenant parce que j'ai un autre petit pourboire. En fait, je l'utilisais comme je devais le montrer aux gens. Je vais utiliser ce texte ici, et avec ce texte sélectionné, si vous n'êtes pas dans ce type de taille très régimentée [inaudible] lors de la phase de lecture, vous pouvez sélectionner du texte et maintenir « Command Shift » enfoncée sur un Mac, et c'est « Control Shift » sur un PC, et vous recherchez le raccourci clavier, c'est soit la période, soit la plus grande que, inférieure à ce que je ne suis pas sûr. Vous allez devoir expérimenter. Je ne sais pas lequel est lequel. Mais vous pouvez monter et descendre avec du texte simplement par globe oculaire plutôt que utiliser les chiffres ici ou d'essayer de vous en tenir à un nombre prédéfini. C'est pratique et j'utilise celui qui est à côté. Donc, recherchez le point et la virgule, ou le plus grand et le moins que sur le clavier. Appuyez sur la touche M et maintenez enfoncées les touches Maj et Commande sur un Mac. Eh bien, la touche Maj et Ctrl sur un PC. Très bien, ça va être tout. Ce n'est pas toutes les fonctionnalités de Figma pour le texte, mais ce sont les gros titres des choses que je pense que vous allez utiliser le plus, mais assurez-vous de jouer avec le reste. Vous y trouverez peut-être des trucs que vous aimez utiliser. Très bien, sur la vidéo suivante. 46. Comment corriger les polices manquantes dans Figma: Bonjour à tous, cette vidéo nous allons regarder ce qu'il faut faire lorsque vous avez une police manquante. Vous pouvez le voir ici, interrogation avec un A ou un A avec un point d'interrogation ici, que faites-vous ? Eh bien, il suffit de cliquer dessus et de le remplacer. Il y a un tout petit peu plus à ça. C'est une courte vidéo, restez là, traînez, et je vais vous montrer toutes les différentes façons de remplacer les polices manquantes. En remplaçant les polices que vous n'avez pas, il y a plusieurs façons de procéder. J'utilisais ce kit ici, je voulais utiliser les champs parce qu'ils sont vraiment cool. Merci, Michelle. Je l'ai dupliqué, je l'ai épinglé et j'ai dit : « Super ». Je suis allé copier tous les champs et j'aime aussi le texte qui s'y trouvait pour mon projet, et il y avait une police manquante. Vous pouvez le voir ici dans ce document original, peu importe si cela se produit ici ou disons que je copie et que je le déplace dans mon document, je le colle, ça arrivera pour les manèges comme « Hé, je manque. » Que faire ? La première chose à faire est de voir si vous aimez la police, celle-ci s'appelle Helvetica Now Display, vous pouvez aller la télécharger. Il peut s'agir d'une police gratuite. C'est ce que j'ai fait pour eux. J'ai cette police sur ma machine maintenant car elle s'appelle Inter et je l'ai aimée. C'était un très beau simple et en cliquant, je brise son style, et y va, Inter. Je viens de le télécharger. Il ne peut pas partir, c'est gratuit. J'ai dit : « Super ». Puis ce petit truc s'est envolé. Je ne voulais pas utiliser celui-ci ici, alors je l'ai laissé. Mais prenons cela comme exemple. Disons que nous le voulons. Vous pouvez vérifier que vous l'avez peut-être sur votre machine. On pourrait appeler ça autre chose, donc Helvetica, je n'ai pas Helvetica maintenant, mais j'ai Helvetica audacieux, est-ce suffisant ? Ce n'est pas la même chose, mais il est peut-être assez proche. Disons que je ne veux pas faire ça. Disons que je veux le changer pour quelque chose parce que j'aime le blocage de cela, mais je veux utiliser mes polices. Vous pouvez soit sélectionner le texte ici et le cliquer ici, simplement le modifier, soit il y a un amateur en haut où vous pouvez dire qu'il manque. Parcourez tout le document et remplacez-le par, j'utilise Crimson Pro. Est-ce que Crimson Pro a un noir ? C'est le cas. Cet autre ici, je vais utiliser le Dosis, j'utilise régulièrement ma copie corporelle. Appuyez sur « Remplacer ». Regardez-moi ça. Vous pouvez le faire ici pour tout et si je l'annule ici, vous pouvez le faire spécifiquement pour cette police particulière ici dans le texte, dans ce panneau de droite ici. Il manque des polices. Allez-y et téléchargez-les s'ils sont gratuits et que vous souhaitez les utiliser. Vérifiez si votre machine les a et qu'on les appelle autre chose ou éteignez-les à l'aide la petite icône ici ou dans votre petit texte du panneau de droite. Il manque des polices. Je vous verrai dans la prochaine vidéo. 47. Projet de cours 08 - Texte: Bonjour, tout le monde. C'est l'heure du projet de classe. Nous allons récapituler une bonne partie des textes que nous avons réalisés et repousser votre conception sur laquelle vous travaillez, celle sur laquelle vous avez reçu le mémoire plus tôt. Il a votre propre nom et votre propre objet. Vous allez travailler là-dessus. Créez un logo, ils peuvent être simples, faire quelque chose comme, tout ce que j'ai fait pour ce cours était de coller une façon différente aux zones de police les unes sur les autres ou quelque chose comme ça où il ne s'agit que de poids séparés. Si vous êtes passionné, vous pouvez dépenser beaucoup plus longtemps sur votre logo, à vous de choisir, mais je ne m'attends à rien de fantaisie. Sur la page d'accueil, je veux que vous ajoutiez votre message marketing et votre copie de pote d'espace réservé, puis que vous travailliez à trouver une police. Nous l'avons fait dans cette classe, alors allez, regardez les polices Google, les polices Adobe, ce que vous voulez, trouvez de bons jumelages de polices. Je veux que vous ayez ce grand message marketing et cette copie corporelle. Le message marketing arrive par vous-même. Le mien est super fromage. Regardez ça, la musique de notre peuple. Apportez le vôtre. Si votre produit finit par être des sacs à main, vous pouvez également emprunter auprès d'une autre entreprise. Nous ne faisons que le pratiquer. Quelque chose ici, coiffez-le, faites-le bien, faites-en l'une de vos rubriques. Ici, je veux que vous installiez le plugin pour la ligne de contenu juste pour vous entraîner à installer un plugin et à lancer une copie de corps. Je vais le coiffer, je vais mettre le mien sur quelques couleurs de fond. Nous allons probablement jeter une image en arrière-plan plus tard. Une fois que vous avez fait cela, et que vous avez une idée des polices que vous souhaitez utiliser. Je veux que vous construisiez ces styles, ces styles de texte. J'ai déplacé le mien ici. Ce truc, vous n'avez pas besoin d'une alternative, juste de la première. Créez-les, vous pouvez choisir n'importe quelle police que vous aimez, transformez-la en styles comme ici. Ce que je veux que vous fassiez, c'est saisir ces palettes de couleurs, rappelez-vous qu'ils étaient ici sur mobile, copiez-les et collez, déplacez-les sur leur propre page pour que vous appreniez, vous savez créer une nouvelle page maintenant. Créez une page, fermez le guide de style, videz ces deux pages. Je les ai attachés dans leurs propres petits cadres et je vois. Sinon, vous vous retrouvez avec des trucs comme ça, où est-ce ? Ceci. Si vous ne finissez pas par déplacer le mood board vers les planches d'humeur et les styles vers des styles, il y a tellement de déchets. C'est ce que je dis, mais pas comme je le fais. Pour créer les styles, déplacez-les vers leur propre page. Celle-ci est intéressante ici. Il s'agit d'un projet de recherche. Donc, si vous êtes un concepteur expérimenté et que vous apprenez déjà Figma, vous pouvez ignorer les parties de recherche et créer des cartes. Les cartes d'interface utilisateur sont un terme que vous devez connaître. Non, je ne peux pas connaître les principes de conception dans celui-ci, donc si vous êtes nouveau, allez faire des recherches, qu'est-ce qu'une carte d'interface utilisateur ? Je vous ai donné quelques exemples de ceux que je veux que vous construisiez là-dedans, c'est ce que j'ai fait. Ce n'est pas fantastique, mais c'est ma petite carte. La version courte est une carte comme une unité réutilisable. Je pourrais en avoir 100. C'est agréable, facile, raisonnable. Il s'agira d'images. Je veux créer une carte image. Je l'ai fait avec un cercle sur le côté avec le texte ici. Je sais que ça va revenir me mordre quand quelqu'un veut plus de textos. Mais, ce sont des cartes, je m'en sors avec certaines choses ici. Faites des recherches, qu'est-ce qu'une carte d'interface utilisateur, et jetez un coup d'œil à quelques articles. Ça ne doit pas être long, passer 10 minutes, lire à leur sujet. Développez vos compétences, sachez ce qu'est une carte. Je vous ai donné quelques exemples de ceux qui, selon moi, seraient appropriés pour cela. Vous pouvez utiliser ce que vous voulez, sous vos fichiers d'exercices, sous des exemples de cartes d'interface utilisateur, et ce ne sont que des images et du texte. C'est ce que je cherchais. Voyez ces choses ici, il y a une carte. Celui-ci est assez approfondi. Il y a une copie de titre et de corps comme ce que nous avons une image. Très différent de la carte que j'essaie de créer ici. Jetez un coup d'œil, des tailles, des façons de les exposer, il y a quelques exemples là-dedans. Va trouver le vôtre. Google images ou dribble et regarder conception de cartes ou de cartes d'interface utilisateur serait le terme le plus facile à utiliser. Ensuite, jusqu'à présent, nous avons fait des choses et nous ne faisons que les garder pour vous ou les télécharger dans vos devoirs. Ce que j'aimerais faire, c'est partager certains de ces éléments pour obtenir des commentaires du groupe. Nous avons un groupe amical sur Instagram, Twitter, Facebook et LinkedIn, quelles que soient vos bases d'origine, quel que soit votre lieu de résidence, quel que soit votre choix. Prenez une capture d'écran de deux choses. Prenez une capture d'écran de ces deux bits et de votre guide de style. Je les ai téléchargés dans la partie devoirs dans les projets de classe, mais j'ai également pris des captures d'écran et je les télécharge pour que je puisse voir ce que vous avez fait. Vous pouvez demander des commentaires. Je suis sur Facebook, je suis sur tous les lieux. Je suis un peu débordé. J'ai reçu de l'aide d'assistants pédagogiques, de mes amis créatifs qui m'aident, passent en revue et donnent des commentaires. Il y a peut-être juste du genre, « Hé, bon travail », et c'est ce que vous cherchez. Ou si vous voulez, « Hé, je ne sais pas pourquoi je fais, qu'est-ce que je fais mal ? » Faites-nous savoir dans les commentaires quand vous publiez des trucs ou pour n'importe quel banc, allez le vérifier. C'est ça. Je vous verrai dans la vidéo suivante. Un peu de travail là-bas, pas trop. Encore une fois, nous ne sommes pas vraiment à la recherche de design, si vous détestez vos couleurs et que vous détestez vos polices, c'est bon. Ce n'est pas de cela qu'il s'agit. Il s'agit d'un cours [inaudible]. Mettons en valeur les compétences, pratiquons et ne vous inquiétez pas si vous n'êtes pas encore très fier de l'endroit où vous en êtes. Soyez fier que vous ayez commencé. Vidéo suivante. 48. Conseils et astuces pour dessiner dans Figma: C'est ce que nous réalisons dans cette vidéo. Vous l'éteignez, sautez, ne le sautez pas. Nous faisons des choses simples. Figma n'est pas un outil de dessin à plein temps. Il fait très bien des choses simples et vous allez probablement l'utiliser beaucoup pour créer une interface utilisateur et des icônes. Je ne vais pas passer en revue toutes les fonctionnalités, mais toutes les choses utiles lorsque vous êtes concepteur d'interface utilisateur. Vous devez créer des commutateurs, des icônes et des bits et des morceaux. Je vais passer en revue ces trucs et astuces maintenant. C'est tellement mauvais. Ne faisons pas celui-là. Maintenant, je vais commencer. Pour commencer, je vais simplement utiliser la page de paiement car elle est vide. Vous pouvez utiliser tout ce que vous voulez. « Maj » 2 pour zoomer sur l'objet que vous avez sélectionné. Je vais juste passer brièvement en revue l'outil crayon parce que je n'aime pas vraiment ça. Vous pouvez modifier les paramètres de base ici. Si vous maintenez la touche « Shift », vous pouvez dessiner des bâtons droits. Je ne l'utilise pas. Vous pourriez adorer ça. Il n'y a pas grand-chose à faire. L'outil Crayon en est un, l'outil Stylo est un outil usé. Si vous ne l'avez jamais utilisé, ce n'est pas la vidéo pour l'apprendre. Je vais juste vous donner les vrais basiques. Mais en tant que concepteur d'interface utilisateur ou concepteur UX, il est très pratique d'apprendre l'outil Plume. J'ai un cours d'illustrateur qui passe beaucoup de temps avec l'outil Plume. C'est peut-être bon pour vous. Mais les super bases, est que si vous cliquez une fois, vous obtenez un coin. Je vais vous chercher, vous, vous. ne fais rien, je veux juste aller tout droit, qui est cool et c'est ma maison ou une flèche. Quoi que vous vouliez faire. Quand vous revenez au début ici, regardez ça. Si je clique dessus au début, je peux le fermer, puis ici je peux le remplir. C'est la base des lignes droites avec l'outil Plume. Barre d'espace, glissez, tombez, c'est n'importe quelle lune parce que c'est un exemple facile. N'oubliez pas que le fait de cliquer une fois vous donne un coin, et si vous voulez une courbe, cliquez, maintenez et faites glisser le curseur. Cliquez une fois pour un coin, cliquez, maintenez le doigt et faites glisser pour une courbe. Cliquez une fois pour un coin. C'est là les règles de base. Maintenant, j'ai ces deux-là, et comme nous avons dessiné en mode d'édition d'objets, il ne s'agit pas de deux formes distinctes. Voyez-vous que je suis toujours ici, je suis pris au piège en mode d'édition d'objets. Je suis tout le temps pris là-dedans parce que je suis habitué à d'autres programmes. Ces vecteurs ensemble. Ce que je vais faire, c'est de vous sélectionner, de couper. Qui se souvient comment s'en sortir ? Il y a la voie officielle. Terminé. L'autre moyen consiste simplement à double-cliquer sur l'arrière-plan à l'aide de l'outil Sélection. Je suis sorti maintenant, je peux cliquer sur « Coller ». Je les ai séparés. J'ai ma maison et ma lune. Lorsque vous dessinez, vous essayez de faire un peu de symétrie et de symétrie. Si vous effectuez un zoom avant, vous pouvez commencer à voir les pixels. C'est un peu difficile à voir à l'écran, probablement sur l'enregistrement, mais pouvez-vous le voir et il va essayer de les accrocher. Vous pouvez faire des choses comme ça, où il s'accroche probablement à ces pixels ici. Dessiner une maison parce que qui d'autre va adorer la maison latérale ? J'utilise ma touche fléchée juste pour la déplacer sur une. Je l'ai choisi une fois. Je suis en mode d'édition d'objets, ai sélectionné, je l'ai déplacé une fois. Qui d'autre les rendait dingues ? Celui-là, ici. Rappelez-vous notre original, je l'ai simplement ignoré et ils se disaient : « Tu n'as pas la bonne largeur. » La façon dont il a été conçu, je n'ai pas pu le changer. Nous pouvons le faire maintenant avec notre outil de stylo doux. Pour qu'il cesse de ressembler à une flèche, je dois l'avoir dessinée avec une porte. Mon outil Plume, je vais entrer à l'intérieur de cette chose en revenant à l'outil Sélection, double-cliquez dessus pour aller à l'intérieur, outil Stylo, j'ai probablement besoin de 1, 2, 3, 4. Pour revenir à mon outil de sélection, j'ai besoin que ces deux gars viennent ici. Nous y voilà, belle fin. Mieux ? Un peu mieux. Le zoom sur les pixels peut vous donner un peu de cohérence. Une autre chose à voir avec cela est l'accident vasculaire cérébral. Vous sortez du chemin, vous venez ici. Le trait que nous avons examiné plus tôt, et avec le trait sélectionné, vous pouvez accéder à cette option avancée de contour, cliquer dessus et nous avions regardé les points de terminaison. Nous n'avons aucun point de terminaison car sa forme est complète. Rappelez-vous qu'ils sont arrondis et têtus. Celui que je cherche maintenant est celui d'abord, au centre. Voyez-vous ici, la ligne bleue est la ligne que j'ai dessinée, puis mon trait, qui est d'un pixel, le chevauche. Mais vous pouvez aller de l'intérieur comme de l'extérieur. Cela va faire une plus grande différence à cet égard. Pouvez-vous voir la différence dans la maison maintenant ? C'est le même genre de coup original. Ce que vous pourriez trouver, c'est que vous allez télécharger un tas d'icônes et qu'il aura la même hauteur et la même largeur, mais vous aimez pourquoi celle-ci semble-t-elle plus petite et celle-ci semble plus grande ? C'est juste la façon dont cela est traité. Est-ce que le coup se déroule à l'intérieur ou à l'extérieur ? L'autre chose, c'est les bords ici, il se peut que vous ayez un tas d'icônes qui n'ont pas ces arêtes vraiment vives. De retour à l'avancée, il s' agit d'un compteur. C'est un peu pointu par défaut, on peut les trancher, un peu têtu ou on peut les arrondir, ce qui est plutôt sympa. Fantaisie. Ce n'est pas une fantaisie. Celui-là est un peu plus long que celui-là. Je vais abandonner. Vous avez compris l'idée. Une autre chose, c'est qu'il y a des lignes de tiret. Ils sont ici, style contour, solides, ils ont été pointillés. là que tu y vas. C'est là que c'est. Défaites ça. D'autres choses utiles et que je n'ai pas encore couvertes, il y a une étoile. Nous allons cliquer dessus une fois. Je veux cliquer, maintenir et faire glisser et lâcher. Cela ne semble pas fonctionner. Je vais cliquer une fois, puis cliquer, si vous rencontrez le même problème. Je peux faire glisser une étoile si je veux qu'elle soit parfaitement en hauteur et que la largeur est contrainte, maintenez « Maj ». J'ai une étoile. Je vais maintenant revenir à mon outil Sélection. Je peux jouer avec des choses comme ici c'est le numéro d'étoile. Je peux faire plus comme une petite chose basée sur les étoiles, et ces deux-là ici vous pouvez jouer. Ils sont assez explicites. Celle-ci ici et Randy Corners. Il en va de même pour le triangle. Vous pouvez créer un triangle. Eh bien, Polygon, ici. Je continue de le faire. Polygone, dessinez-le, puis passez comme ça. Regardez ici toutes vos formes. Pouvez-vous le voir ici ? J'ai dit polygone, rappelez-vous, pas triangle. Vous pouvez quatre, en faire un carré, mais allons cinq, et nous allons passer à six. Vous avez compris l'idée. Octagon, faisons-le. Arrondir les coins. Ensuite, ici, le comte est également là. C'est un peu bizarre. C'est là que tu y vas. Vous obtenez un carré. Une autre chose que je dois vous montrer, c'est la rotation. Maintenant, avec l'outil sélectionné, vous pouvez simplement survoler ici et faire pivoter les choses. Si vous les faites pivoter, je suis juste en train de planer dehors, maintenez « Maj » et je le fais pivoter. Il va le bloquer en unités logiques. Vous pouvez le taper ici. Je pense que c'était ce que je montais par incréments de 15 degrés. Vous pourriez décider qu'en fait, je veux juste faire pivoter ce 180 et que vous le tapez simplement. Sachez également qu'il y a un tas d'options ici, sous le petit f, sous Object. Voyez-vous tourner ? Nous avons déjà regardé ces basculations horizontales, retournées verticales. Il y a beaucoup de choses ici. Dernier point mais non le moindre, c'est quelque chose appelé mode contour. Il utilise même, si vous avez entendu parler de Outline View, d'Adobe Illustrator, c'est la même chose ici. C'est même le même raccourci. Va l'essayer. Si vous connaissez le raccourci, c'est « Commande Y » sur un Mac, « Contrôler Y » sur un PC. C'était là, si vous voulez le long chemin. Si c'est nouveau pour vous, c'est juste cette option ici. Il est en vue et le voilà, les contours. Qu'est-ce que c'est ? Il regarde votre document, si je zoome directement, zoomons sur tout. C'est vrai, « Shift one », tout sur toute ma page. Voyez-vous qu'il se résume à cette vision vraiment simpliste. C'est très pratique, surtout lorsque les choses sont coupées. Regardez-moi ce type. J'utilisais cette caméra hors caméra quand je l'étais, de quelle commande s'agit-il ? « Commande Y » ou « Contrôle Y ». J'essayais juste de les faire aligner. Je viens de passer « Command Y » ou « Control Y » sur un PC, donc je peux commencer à travailler dessus et les voir réellement. Vous pouvez travailler exactement comme vous le faisiez auparavant. Il s'agit simplement d'une vue hiérarchique, où le nom Vue contour. Très bien quand vous dessinez, que les choses s'alignent, que vous voyez des choses comme une radiographie. Retournons sur « Commande Y » sur Mac, « Control Y » sur un PC. La seule chose dans laquelle je suis toujours coincé, c' est que vous êtes ici et vous ne vous en rendez pas compte vous essayez de faire quelque chose ici et vous êtes coincé dans le mode d'édition. J'ai mentionné quelques fois parce que j'ai juste l'impression, pourquoi ne puis-je pas déplacer ça ? Parce que vous avez zoomé ici et que vous ne savez pas ce que vous faites et vous êtes bloqué en mode d'édition d'objets. Terminé, ou double-cliquez simplement sur l'arrière-plan à l'aide de l'outil de sélection. Voilà mes trucs et astuces pour dessiner dans Figma sans y aller trop loin. Nous dessinons ici. Ce n'est pas la meilleure fonctionnalité, mais il fait toutes les bonnes choses, toutes les choses de base parfaitement. Merci Figma. Merci d'avoir regardé. Je vous verrai dans une autre vidéo. 49. Boutons carrés arrondis avec cursus ios complet dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons regarder Squircles, c'est-à-dire s'agit d'un écureuil et celui-ci n'est pas écureuil. C'est un mot génial. Pouvez-vous voir la différence de rondeur ici ? Il s'agit d'un iOS lisse et arrondi. ne s'agit que d'anciens coins arrondis géométriques réguliers. Nous allons apprendre comment le faire dans cette vidéo. Effectuera également des coins arrondis individuels, plus quelques raccourcis. Allons se tortiller. Commençons par les écureuils car ils portent le nom de base. Nous allons commencer par quelques boutons ici sur ma page d'accueil. Je vais saisir l'outil rectangle, qui est l'arcie, et faire glisser un bouton. Choisissez un style de couleur. Nous ne pouvions pas avoir de contraste. Je pense que c'est bon d'avoir deux d'entre eux. Ce que nous allons faire, c'est que nous allons les faire tous les deux avec un coin arrondi de disons 10. Maintenant, le truc de l'écureuil s'appelle quelque chose qui s'appelle le lissage des coins ici. Ce que nous allons faire, c'est que nous devons cliquer là-dessus. Il est écrit de les faire passer de et de tous les coins connectés vers des coins indépendants. Maintenant, nous pouvons voir tout cela. Ici, c'est ici. Ils appellent cela le lissage des coins et ce que vous pouvez faire, c'est simplement le faire glisser vers le haut. Pouvez-vous le voir là ? Je vais continuer à le faire glisser et je vais faire zoomer l'éditeur. Pouvez-vous voir des flexes ? C'est un écureuil, pas un écureuil. écureuil, pas un écureuil. C'est un carré, un cercle. Que pensez-vous par rapport à celui-ci ? C'est un truc très Apple iOS. C'est de là que vous pouvez l'utiliser quand même. Mais il leur est emprunté. Ils en ont fait, ils l'ont fait et c'est cool. J'ai trouvé cela pour vous donner un peu plus d'exemple visuel du soumissionnaire. C'est de Figma few, écureuil Google Figma, si vous pouvez l'épeler. Cela vous amènera à quelque chose comme ça. Vous n'êtes pas obligé de faire des écureuils. Ce que vous pourriez faire, c'est que vous pourriez faire de façon indépendante dans les coins. N'oubliez pas que vous pouvez devenir indépendant au coin de la rue. Vous pouvez dire que je veux vraiment, pouvez-vous voir ici si je clique ? Vous voyez ces icônes ? Il vous indique lequel. En haut de ma route, tu vas faire le zéro. Vous voyez ce petit onglet dessus. Est-ce que je le fais ici ? Vous pouvez le faire manuellement en le tapant, ou vous pouvez le faire ici. J'ai mon rectangle ici. Si je maintiens la touche Option sur un Mac. Touche Alt sur un PC et je clique et je fais glisser l'un d'entre eux. Vous pouvez simplement travailler là-dessus. Ça va être le lissage des coins ou non. Faites-le moi savoir dans les commentaires. Cela en vaut-il la peine ? Voyez-vous la différence ? J'aime ça parce que beaucoup plus de personnalité pour un bouton de toute façon. Très bien sur la vidéo suivante. 50. Pathfinder booléen Union Soustraction Intersection Exclusion dans Figma: Bonjour, tout le monde. Êtes-vous prêt pour un tutoriel de dessin légèrement meilleur ? Nous allons explorer les opérations booléennes, Union, Soustraire, Intersecter, Exclure. C'est très comme le Pathfinder dans Adobe Illustrator, mais ici, dans Figma, il y avait quelques avantages intéressants. Permettez-moi de vous montrer ce qu'ils font et quels sont les avantages. Oui, il se peut que nous ayons une icône de maison en feu. Quoi qu'il en soit, il affiche toutes les différentes opérations booléennes. Cela semble être une bonne idée, c'est pourquoi elle est là. Dans les deux dernières vidéos, nous avons réalisé un dessin réel, à l'aide de nous avons réalisé un dessin réel, l'outil épingle de formes, et c'est une façon de dessiner vos icônes et vos composants d'interface utilisateur, mobilier de page est un autre bon mot pour eux. Ce qui se trouve sur la page, nous allons utiliser ce qu'on appelle une opération booléenne. C'est un mauvais nom. Je n'aime pas ce nom, mais c'est essentiellement la façon dont ces booléens fonctionnent. Créons quelques choses. Je vais aller à l'outil Rectangle. Je vais dessiner la base de ma maison. Je vais utiliser l'outil polygone pour dessiner le haut. Sélectionnez-les tous les deux et dites centrez-les et faites-les comme ça. C'est assez bien pour moi. [inaudible] tous les deux et moi devons les choisir pour être une belle couleur juste parce que. Union, que fait-il ? Parce que si j'ai fait ça et que c'était l'icône de ma maison, peut être comme, oui, il y a ma maison, c'est tout ce que je dois faire. Le problème est que lorsque j'exporte cela, il exportera deux formes. Je vais envoyer ça à mon développeur et il se dira, pourquoi m'as-tu envoyé un triangle et un carré. Nous allons exporter plus tard dans le cours, mais c'est un problème. Ce que vous devez faire pour les combiner ou les réunir, c'est de les sélectionner tous les deux. Vous pouvez avoir un tas de formes différentes, n'avez pas besoin d'être deux et cette chose apparaît. Sans elle, pas là, l' un d'eux, pas là, deux d'entre eux, manquant une pièce. Comment Booléens. Déposez ça et nous allons commencer par le syndicat. Vous êtes comme, regardez ça, fracassé ensemble. Il s'est débarrassé des deux formes et maintenant c'est une. C'est ce qu'on appelle union et on peut appeler celui-ci, je l'appellerai union parce que nous essayons de nous adapter aux noms, mais c'est l'icône de ma maison et je l'exporte. Ce ne sera qu'une seule unité. Ce qui est génial, c'est qu'il est toujours modifiable. C'est magique. Je peux double-cliquer dessus pour aller à l'intérieur et regarder, c'est séparé, mais quand il exporte, c'est une seule unité. C'est vraiment pratique. Vous avez toujours des choses comme si je pouvais jouer avec le rayon de la frontière. C'est ma maison de forgeron, donc revenez et c'est ce qui est exporté. C'est ce que fait un syndicat. En fait, je vais le copier, annuler jusqu'à ce que cela disparaisse, car ce que j'aurais dû faire c'est faire quelques copies différentes. on y va, « Commande D », « Control D » et je vais coller mon prochain. Soustrayez, passons par eux très rapidement. Soustrayez, cela fait, celui qui est en haut soustrait le bas. J'ai dessiné ce truc en dernier, donc c'est au sommet. Je peux voir, il y a un rectangle ou est-ce un rectangle en bas sur le dessus. C'est au-dessus de mon rectangle. Si je le change, si je dis que vous êtes en haut, je vais utiliser mon support carré par le pic, donc je sais qu'il est au-dessus de tout et je les sélectionne tous les deux, exactement la même chose, soustraire, obtenez une opération différente. Celui qui est sur le dessus va couper celui derrière. Intersectez. Faisons celui-là. Intersectez, c'est tout ce qui reste là où ils se chevauchent. C'est ce qu'il vous reste. Exclusion, cela allait laisser un grand trou là où ils se chevauchent. Ils sont leurs opposés, intersectent excluent. Très bien, c'est très chic, mais vous aimez, comment ça marche ? Cela va vous donner un peu plus d'exercice pratique. Je pensais que c'était intelligent, peut-être pas. Vous pouvez continuer à y ajouter. Ajoutons un outil rectangle pour dessiner une cheminée pour la couleur différente. Regardez ce qui se passe si je vais au syndicat, vous pouvez en fait, c'est le cas par défaut. Il suffit de cliquer sur l'icône. Quel que soit le haut, il va toujours s'écraser, mais il utilisera la couleur supérieure. Union, vous pouvez continuer à syndiquer les choses. Allons le faire passer maintenant. Soustrayez. Ce que je vais faire, c'est que je vais prendre mon outil de rectangle. Je vais le faire glisser ici pour ma porte et parce que je peux revenir à mon outil de sélection et zoomer un peu pour voir mes points. Je peux aller comme ça et ensuite aller à ces deux-là et utiliser exactement la même chose. Soustrayez. Cool. Regardez à quel point je suis chic. Celui-là, je veux qu'une maison soit en feu parce que c'est le cas. Cet exercice, c'était intelligent. J'ai une ellipse. Je vais dessiner une ellipse. Je vais en avoir deux et je veux utiliser celui-ci ici, l'intersection. C'est un peu difficile de les voir. Je vais y aller, comment puis-je voir la vue des contours ? Vous vous en souvenez ? Vous souvenez-vous de « Commande Y » sur un Mac, « Contrôler Y » sur un PC, ou vous pouvez utiliser l'autre raccourci, le raccourci qui les traverse tous, « Commande Forward Slash », tapez simplement contour. Le voilà, les grandes lignes. Ce que je cherche, c'est le point entre les deux pour ressembler à une flamme. Je suis à la recherche de ce moment. Je veux saisir les deux et revenir hors de la vue des contours et utiliser cette intersection. C'est mon petit truc de flammie. Regardez-moi ça ? Il devrait juste être en train de sortir d'ici. Je ne sais pas pourquoi tout ça doit être en feu. Très bien. Le dernier, comment cela pourrait-il devenir intelligent ? Eh bien, nous allons avoir besoin de fenêtres sur moi. La touche O de l'outil cercle maintient la touche Maj enfoncée. Je vais faire comme de terribles fenêtres. Je ne peux pas les voir, ils sont là. Allez à nouveau dans la vue hiérarchique. C'est en désordre. La vue hiérarchique n'est pas très utile de cette façon. Pourquoi tous ces cercles ici ? Eh bien, nous allons faire face à cela dans une seconde, finissons-le et utilisons-le [inaudible]. Je vais sélectionner tous ces éléments. Vous pouvez changer les couleurs juste pour être bonnes, mais sélectionnez-les toutes les deux et allez jusqu'ici et utilisez la dernière. C'est ce qu'on appelle exclure, nous avons notre maison avec des trous dedans. Je peux les coller tous ensemble et je peux dire union. Maintenant, c'est une petite unité qui sera exportée pour notre terrible maison au bord de la mer, [inaudible] qui est en feu. Super icône. Maintenant, la grande chose que j'ai expliquée au début qu'il y avait encore des distincts, mais tous ces éléments sont toujours séparés. C'est pourquoi si je les déplace juste ici et que je vais dans la vue des contours, vous pouvez voir qu'il y a encore beaucoup de choses ici. Vous pourriez avoir cette porte là-bas. Je vais vraiment sortir de cette porte ici doit être différent. L' [inaudible] est terrible, donc vous pouvez y aller. Je peux dire, où est-il ? Exclure un est un peu profond ici. Mais je peux dire que le rectangle a maintenant des coins arrondis de deux. Ce n'est pas si bizarre. Ils y vont, totalement corrigés, mais vous pouvez double-cliquer sur des choses, continuer à double-cliquer et aller, regardez ça. Il est toujours exclu. C'est toujours un trou dedans, mais tout est encore modifiable. C'est pourquoi ces choses booléennes sont vraiment cool, c'est comme le Pathfinder, si vous venez d'illustrer un terrain ou peut-être le constructeur de formes qui est également très utile. Très bien, ça va être le cas pour ces derniers. Oui, passons à la vidéo suivante. C'était bon dans mes notes. Icône de maison flamboyante. En tout cas, la prochaine vidéo. 51. Différence entre Union et Aplatir dans Figma: Bonjour à tous. Dans cette vidéo, nous allons examiner la différence entre union, haut ici et aplatir, l'option non destructive et l'option terminale, très destructrice mais parfois utile. Allons-y. Parlons de l'union par opposition à l'aplati, je vais utiliser cet exemple ici. Je vais faire une nouvelle page, et si je passe en mode contour, Commande+Y ou Ctrl+Y sur un PC. Vous voyez que tout ce qui se trouve en haut ici est cool qu'il soit encore modifiable, mais cela constitue un document vraiment désordonné. Vous pouvez voir ici aussi ? Si je suis entré dans ce syndicat, appelons ça ma caserne de pompiers. Il se passe beaucoup de choses ici. Bien que tout ira bien, il exportera très bien. Ce que je veux faire, c'est simplement le lisser en un seul dessin et c' est là que l'aplati entre en jeu. Nous allons d'abord prendre cet exemple. Faisons-en une copie ici. Passons à la vue Contour. J'ai ce truc et il est entièrement modifiable, ce qui est sympa. Mais en fait, je vais juste aller à l'aplatir et ça revient juste là. Il est destructeur. Non destructif, c'est l'union que nous avons faite, ou dans ce cas, si nous nous sommes croisé pour obtenir celle-ci. Souvent, vous utilisez aplatir après avoir utilisé l'un d'entre eux. Nous avions l'habitude d'intersecter pour faire celui-là, puis juste pour le ranger, nous sommes allés aplatir. C'est également une bonne victoire. Disons que je vais prendre mon O pour l'outil de cercle. Je vais prendre mon outil rectangle et je vais dessiner moi-même un petit homme. Alors, j'ai fait quoi ? Je pense qu'ils sont différents, mais 12 points, il est très trapu, il est censé être mon compte. Il est très trapu. Il est l'icône du videur/du compte. Allons l'aligner. Maintenant, si j'ai ce type, je ne veux pas l'exporter de cette façon parce que ce sera deux formes. Si je dis Export de fichiers maintenant, nous allons inspecter et exporter et autres choses plus tard, mais si je veux exporter ce type, il va exporter deux formes distinctes vers mon développeur, et il va partir, pourquoi est-ce deux formes ? Normalement, vous allez à Union et que vous pouvez exporter, vous pouvez le regrouper et l'exporter. Pas de différence. Je vais d'abord défaire ça. Je vais avoir deux versions. Celui-ci va être syndiqué et celui-ci va être aplati. Ils se ressemblent, vous vous dites : « Quelle est la différence ici ? » Il s'agit de choses comme la mise à l'échelle qui, si je saisis ces deux, en maintenant, en maintenant, en baissant , à l'échelle, regarde celui dont le rayon est réglé à 12'ish. Voyez-vous ? Il essaie de conserver ces 12, alors que celui-ci est aplati. C'est comme si on l'a bouché et je peux aller ici et dire, le smooshed to bits, ça ne sait plus que c'est un coin arrondi. Il sait juste que c'est la forme que je vais toujours être. Je peux aller le personnaliser. Je peux cliquer sur ce point d'ancrage ici, voilà. C'est mon videur à visage de lune. aplati le détruit, ce qui est parfois utile et l'union serait plus courante. Laissez-le simplement éditable. Vous pouvez l'adapter comme si je l'annule. Il y a un moyen de contourner tout ce problème avec le caresseur à l'extérieur, ou du moins le rayon. Vous pouvez simplement utiliser l'outil Echelle au lieu de l'outil de sélection, en maintenant l'outil Maj enfoncé. Vous pouvez voir qu'il met à l'échelle le rayon et cela. Flatten consiste à ranger les choses désordonnées que vous souhaitez ensuite modifier plus de l'union, comme tous les autres opérateurs booléens ne sont pas destructifs. Vous pouvez les modifier par la suite, ce qui est probablement plus courant. De toute façon, tu fais plus de ça. C'est tout pour cette vidéo, je vous verrai dans la prochaine. 52. Projet de cours 09 - Concevoir toutes sortes de choses: Un autre projet de classe, vous appréciez ça, j'espère que vous l'êtes. Celui-là remplit un morceau que nous avons fait, beaucoup de dessins, essentiellement ce truc ici, les icônes et les boutons. Cliquez sur le cadre Shift 2, effectuez un zoom avant. On y va. Ces trois boutons sont en haut avec ces deux boutons. Que devez-vous faire ? Faites des boutons avec des tiques dedans, comme ceux que j'ai faits. Vous pouvez choisir vos boutons. Vous n'avez pas besoin de faire les bords de squiggle ou j'ai fait une version contour. Vous pouvez utiliser des couleurs différentes, peut-être être carrées, mais faites en sorte que ça marche. Je veux que tu crées trois icônes. J'ai choisi ces trois ennuyeuses que nous avons fabriquées en classe, mais vous pouvez en choisir trois. En fait, assurez-vous que l'un d'entre eux est la navigation, ce qui est facile à réaliser mais [inaudible]. Faites-en trois et vous devez les dessiner vous-même. Vous ne pouvez pas partir et les trouver à partir des points d'icônes. Je le saurai. Je les ai tous vus, chacun d'entre eux. Choisissez trois, trois. Ce que j'aimerais que vous fassiez, c'est si vous avez un peu plus de temps, faites-en cinq, choisissez cinq. Si vous êtes très enthousiaste, je veux que vous les fassiez tous, voir si vous pouvez briser tous ces types. Maintenant, je les ai mis dans ce que je pense être le plus facile à dessiner. Comment un panier d'achat est-il le plus facile, les menus hamburgers. Si vous n'en choisissez que trois, optez pour les plus difficiles si vous avez envie de le faire. Mais de toute façon, j'ai vraiment besoin de trois, mais en faire autant que possible. Maintenant, une petite note est que lorsque vous dessinez des icônes, les icônes ne sont pas faciles. Ne vous inquiétez pas si vous les dessinez et qu'ils ne correspondent pas tout à fait et ont l'air un peu horribles. Ce n'est pas ce que l'objectif de tout cela est ici. L'objectif est de m'entraîner au dessin, donc j'aimerais voir celles que vous avez faites à la fois avec la section projets et devoirs ainsi que sur les réseaux sociaux. Vous n'allez pas être jugé en fonction de leur étonnement. Il s'agit de nous montrer, vos arts en ce moment, et d'obtenir des commentaires d'autres personnes. Maintenant, un bon début pour dessiner des icônes consiste à commencer par un carré. Peut être de n'importe quelle taille, mais il peut être assez agréable de commencer, dessiner cela et d'en faire une largeur et une hauteur d'environ 48. C'est une icône très courante pour la conception de la taille. Cela signifie simplement que lorsque vous dessinez là-dedans, dessinez votre icône à l'intérieur et utilisez les bords. Vous n'avez pas besoin d'aller avec des bords complets, mais sachez simplement que ces petites unités. Vous allez empiler ces icônes les unes à côté des autres afin qu'il soit pratique de les dessiner à l'intérieur, de les presser, juste pour vous donner quelques limites. Quand j'ai dessiné celui-ci, il ne me semble pas assez large. J'ai essayé de le remplir et de le faire comme une personne courte. Vous remarquerez également que j'ai arrondi les épaules. J'ai l'impression qu'il n'est plus un grand videur. Quoi qu'il en soit, trois icônes , faites quelques boutons, et je veux que vous le fassiez tester. Testez-le sur votre téléphone juste pour voir si les boutons sont-ils facilement cliquables ? Peuvent-ils être vus ? La police est-elle assez grande sur vos boutons ? Peut-il être plus petit ? Peut-il être plus grand ? Juste pour lui donner un petit avant-goût de ce que vous faites. Voici quelques règles, une capture d'écran des icônes que vous avez créées, trois, cinq, toutes, et prenez une capture d'écran de votre page d'accueil dressée comme ça. Ce type Shift 2, n'a pas besoin de ça. Téléchargez-le dans la section Affectations et projets et j'aimerais également voir ce que vous faites sur les réseaux sociaux. Icônes de captures d'écran, page d'accueil de capture d'écran, off you go. Profitez du dessin, parvenez à voir ce que vous créez réellement. Vidéo suivante. 53. Sélection intelligente et nettoyage dans Figma: Bonjour à tous. Dans cette vidéo, nous allons regarder quelque chose appelé Tidy Up. Super génial, prenez des trucs qui ne sont pas bien rangés. Regardez ça. On doit bien ranger. Ça va mieux, parce que tu es comme si j'avais besoin de ce type ici. Ecoutez, ils échangent. Ça va mieux. J'ai des cartes. Je dois tous les sélectionner, vous ranger. Mais aussi, vous savez ce dont j'ai besoin ? J'en ai besoin d'un autre. Cliquez dessus. Commande D, contrôle D. Il y en a un autre et un autre. Tellement bien. Je suis un peu excité à ce sujet. Vous allez en profiter. Jetons un coup d'œil à quelque chose appelé Tidy Up et Smart Selection. Commençons par Tidy Up. Si vous sélectionnez quelques éléments, vous remarquerez peut-être que cette petite ligne est apparue. Que fait-il ? Cliquons dessus. Donnez-lui un clic. Il le range. C'est comme ça que ça s'appelle, Tidy Up. Si je l'annule et que Tidy Up n'apparaîtra pas si vous n'avez sélectionné que deux choses. Il faut trois pour faire l'espacement entre eux. De plus, il n'apparaîtra pas si vous êtes déjà très intelligent et que vous avez un grand espacement. Si tous ces gars sont séparés de sept, ça n'apparaît pas parce que je n'avais pas besoin de ranger ça. Cela fonctionne aussi, si je l'ai, disons que ces trois lignes rayées le transforment en grille lorsqu'il y a une grille. Il y a plus d'une rangée de choses. Ou plus de deux colonnes. Cliquons dessus. Il aliine tout. Maintenant, ce n'est pas comme essayer de créer une grille complète. Il place juste l'espacement uniforme de cette rangée, de la même manière que celle-ci. Vous pouvez voir que c'est un peu désactivé. Ce n'est pas exactement comme ça que je pensais que ça fonctionnerait, mais c'est génial pour faire des rangées individuelles. Le chemin est long. Si je sélectionne là-dessus, rangez, l'icône devrait apparaître. S'il est grisé ici, l' une des deux règles que j'ai mentionnées il y a une seconde est enfreinte. Ils sont déjà uniformément espacés. Nous n'avons sélectionné que deux choses. Si je l'ai arrangé maintenant, nous en sommes arrivés à un point où Smart Selection. C'est ma partie préférée de Figma. Peu importe si vous utilisez Tidy Up ou si vous les avez simplement bien espacés ou vous avez utilisé l'espacement horizontal distribué. Tant qu'ils sont uniformément espacés, vous obtiendrez ces lignes roses et ces points roses. Qu'y a-t-il de bien chez eux ? Les espaces entre les deux. Regardez ça. Cliquez sur, faites glisser. Vous avez beaucoup de contrôle sur un grand groupe de choses. Horizontalement ou verticalement. Je les ai, ils sont de formes différentes. J'ai tout dessiné avec des formes différentes. Quoi qu'il en soit, prenons l'espacement juste sur eux. Peut-être qu'on va même les centrer juste parce que. Peut-être que nous allons même les aligner d'un côté. Cela n'a pas d'importance horizontalement, verticalement. Nous pouvons les faire glisser ou nous pouvons les taper ici, disons, en utilisant 16 comme espacement. Allons jusqu'à huit. Ils ne doivent pas nécessairement avoir exactement la même forme. De toute évidence, je ne l'ai pas fait. Mais ce n'est même pas la meilleure chose. Vous êtes comme s'il y avait de meilleurs morceaux ? Il y a de meilleurs morceaux. Ces points roses sont les meilleurs. Regardez ça. Si je clique sur lui une fois, cliquez sur le vert, je me dis, qu'est-ce que je vais faire de vous ? J'ai besoin que tu sois ici. Regardez ça. Cliquez, maintenez enfoncé et faites glisser le curseur. Regardez, il se déplace partout où je veux qu'il aille. Imaginez cela avec des cartes, des listes et des icônes. Nous faisons des rectangles juste pour aller vite et avoir l'idée. C'est encore mieux. Vous êtes comme, pas question. Oui, Way. Regardez ça. Disons que je les ai eus. Ils sont tous uniformément espacés car tous ces éléments s'appellent Smart Selection. On dirait que j'en ai besoin d'un autre. Cliquez dessus et appuyez sur Commande D. Cela en fait un autre que vous ressemblez, si j'en ai besoin d'un autre jaune ici ? Commande D, Control D sur un PC. Il n'en ajoute qu'un autre. Mentionner votre grande liste de choses dans les cartes. Listes et cartes, je ne peux penser à rien d'autre. Vous pouvez simplement les commander ou les contrôler et cela en fera un nouveau et séparera tout le reste. Bien rangé, séparé, mais ils sont regroupés. C'est juste une façon de les ranger. Peu importe que vous utilisiez un espace de rangement ou un espacement horizontal vertical, tant qu'ils sont espacés uniformément, ces éléments apparaissent. Avec eux, vous pouvez voir qu'ils ne sont pas là. Faisons quelques autres exemples réels. qui pourrait vous surprendre, c'est que j'ai cette icône, celle-ci et celle-ci. Celui-là, si je fais la queue intelligente, ça a marché. Cela a vraiment bien fonctionné pour le mien. Supposons que nous ajoutions un cercle à notre cheminée. C'est ma fumée qui en sort. Parce que ces gars ne sont pas groupés, puis je dois ranger, ça fait des choses bizarres. Si vous rencontrez des problèmes et que votre icône est composée de quelques parties, assurez-vous simplement qu'il s'agit soit d'un booléen comme nous l'avons appris, soit d'un groupe, soit d'un cadre. Juste quelque chose qui l'attache ensemble. Ils sont tous liés ensemble et celui-ci comporte trois lignes. Je vais le transformer en cadre. Je vais appeler ça un Mobile Nav. Maintenant, je peux utiliser l'espacement intelligent et ensuite je les obtiens. Vous pouvez l'imaginer surtout si vous effectuez des tests pour la zone tactile. Je suis comme si je voulais bouger ça. Maintenant, vous voyez, vous êtes comme oui, maintenant je comprends. C'est peut-être juste moi. Je suis vraiment excité par celui-là. Tellement bien. La prochaine chose que je vais faire, c'est que je vais vous montrer, c'est juste bon pour le type aussi bien pour les menus. Je vais taper chez Home. Au lieu de les faire dans une seule zone de texte, je vais en faire quatre. Dupliquer. Jetons un coup d'œil. maison. Je vais accélérer ça. Je vais juste prétendre qu'il y en a d'autres. C'est le seul que j'ai pour ma navigation. Supposons que vous obteniez un tas de lignes dans petites zones de texte séparées et que vous êtes comme les ranger. En fait, une fois qu'ils sont rangés, puis-je modifier l'espacement ? Vous pouvez. Puis-je cliquer sur l'un d'entre eux ? Sélectionnez-les tous. Les points roses sont assez petits. Ils sont là. Bonjour ? Ensuite, vous pouvez les déplacer. Ajoutez-en plus. Cliquez sur une commande ou un contrôle D. À partir de quelque chose de plus compliqué très rapidement. Je vous ramènerai très vite pour un autre petit conseil bonus. Vous m'avez vu les nommer ? Vous ne l'avez probablement pas fait, c'était assez rapide. Mais je trouve que j'ai nommé le premier, passons à A. Je sélectionne tout cela, je copie. Je peux appuyer sur Tab sur mon clavier pour passer au suivant. Encore une fois. Vous n'avez pas besoin de double-cliquer avec votre souris, d'y entrer, coller et de faire un saut. Je les ai créés. Ils doivent être des groupes comme nos icônes, les combiner. Je les ai transformés en cadres parce que les cadres sont géniaux. Mais si je sélectionne tous ces éléments, je pensais qu'ils étaient proches. Vous pouvez voir que leur espacement est proche. Mais ce n'est pas le cas. Cliquez dessus. Parfait. Maintenant, je les reçois. Je suis super. Si je décide réellement, ils sont tous recyclés, mais attendez là. Ils sont tous dans des cadres, ce qui les a rendus différents. Je peux tous les sélectionner. Ils ont tous été bien espacés et je peux dire que j'ai besoin d'un autre de celui-ci. Commande D, Contrôle D. Vous devez probablement tous les sélectionner. Vous, Commandement D. Je peux dire que vous y allez. Regardez-moi ça. Ce qu'il fait, il repousse le cadre. Vous pouvez voir le cadre extérieur dans l'une des bizarreries. Il y a probablement un moyen de résoudre ce problème. Je n'arrive pas à le comprendre. Quelle est la taille de ma page ? La largeur de celle-ci est de 375. Je vais dire que vous revenez complètement à 375. Merci. Ils ne poseront aucun problème si le vôtre comme mon design pousse vers l'extérieur du cadre, ça flippe un peu. Que pensez-vous ? Faites-le moi savoir dans les commentaires. Est-ce que c'est ton truc préféré ? Quelle est votre chose préférée jusqu'ici ? Faites-le moi savoir dans les commentaires ci-dessous. Je vais revenir en arrière. Je vais voir. Est-ce que c'est aussi bon que possible ? Ou y a-t-il d'autres choses que vous ressemblez, désolé Dan, cette autre chose. La maison flamboyante. C'est Tidy Up, ce qui est sympa et simple. Ensuite, Smart Selection, qui n'est un peu pas compliqué, mais il faut abord les espacer uniformément et probablement groupées ou coincées dans un cadre ou un composant, ce que nous ferons un peu. J'espère que ça vous a plu. Je vous verrai dans la vidéo suivante. 54. Dois-je connaître Illustrator pour Figma: Que faisons-nous ici ? Ce n'est pas Figma. Voici Illustrator. Dois-je connaître Illustrator pour travailler dans Figma ? La réponse est non. Vous pouvez aller assez loin avec Figma, dessiner des objets, dessiner des icônes, dessiner des logos , illustrations, il y a toutes les bases là-dedans, mais il y aura un moment où vous aurez besoin de faire des choses personnalisées. Nous allons le démontrer un peu dans cette vidéo pour vous montrer et ensuite vous montrer à quel point il est facile de faire des allers-retours entre Figma et Illustrator. Non, pour être concepteur UX, vous n'avez pas besoin de connaître Illustrator, mais c'est un outil pratique. Laissez-moi vous montrer pourquoi. Je vais vous montrer un peu d'Illustrator, pour vous montrer où Figma s'arrête. Vous pouvez vous faire prendre avec Figma pour faire beaucoup de ce qu'Illustrator fait, mais ce n'est pas fait pour cela, Illustrator reprend assez rapidement et vous êtes comme, en fait, peut-être que j'ai besoin d'apprendre Illustrator. Si vous possédez déjà les compétences, elles ne sont pas gaspillées. Si vous ne possédez pas les compétences requises, vous pouvez rejoindre mes cours Illustrator Essentials ou Illustrator avancés, jetez-les en revue. Quoi qu'il en soit, je vais juste dessiner ça et je vais, je suppose, juste vous montrer quelques éléments qui font d'Illustrator pourquoi j'y reviendrai, en particulier pour la conception de logo ou d'icônes. Je vais zoomer sur ça. C'est un dessin que j'ai fait. C'est l'une des choses que nous faisons dans l'un des cours. Je l'ai dessiné et je vais juste le construire avec des cercles. Vous attendez là. Je fais juste un tas de cercles. Continuons encore. Je viens d'avoir un tas de cercles. Laissez-moi vous montrer le calque d'arrière-plan. C'est juste pratique car vous pouvez tous les sélectionner. L'un de mes outils préférés est l'outil de création de formes. Dans l'une des vidéos précédentes, nous utilisons un Pathfinder booléen ici et tout va bien. Shape Builder, êtes-vous prêt ? Maintenons la touche Option enfoncée sur un Mac, touche Alt sur un PC et glissons simplement les éléments que nous ne voulons pas. Regardez à quel point c'est rapide et bon. Maintenant que je veux le colorer, je vais passer en revue et choisir des couleurs aléatoires pour celle-ci. Commençons par un léger. Cette oreille ici, au lieu de maintenir Option enfoncée, ne tient rien et vous pouvez joindre les choses. Regardez ça. Je me suis frayé un chemin à travers les couleurs. Juste les valeurs par défaut. C'est bon pour un renard. Vous avez impressionné ? C'est amusant. J'adore Illustrator. La raison en est, tant que concepteur UX, qu'il fait souvent partie de tous les outils dont vous avez besoin. Sélectionnez-le tout. Je ne vais pas avoir d'accident vasculaire cérébral. Ce qui est cool, c'est de regarder ça. Travailler au sein de Figma ou faire des transitions d'avant en arrière est super simple. J'ai tout sélectionné, copié, et je vais sauter dans Figma et je vais juste le coller. C'est un peu gros. Déplacez-le ici. Mais vous pouvez voir, vient d'un cadre, ce qui est génial. C'est encore plus génial car je peux entrer dans ce cadre et tout est encore modifiable. Je peux faire des ajustements ici. Vous pourriez faire votre travail de dessin ici. Bouton OK ici. Vous pouvez toujours effectuer des ajustements, mais je peux aussi commencer à choisir mes couleurs d'entreprise. Vous attendez là. Je vais le colorer. N'oubliez pas que si nous avons des couleurs, j'ai besoin d'une autre couleur pour devenir plus foncée. Je peux cliquer sur celui-ci et casser le lien et y aller. Allons juste un peu plus sombre pour celui-là. est très facile de travailler entre Illustrator et Figma. Il suffit de copier-coller, vous n'avez pas besoin d'exporter, et il reste modifiable, évolutif et bon. Nous n'avons aucune raison pour ce renard. C'est ici. C'est ça. Peut-être qu'après ce cours, soit ma formation ou celle de quelqu'un d'autre, allez voir Illustrator si ce n'est pas déjà fait. Si vous êtes maître d'Illustrator ou du moins peut-être autodidacte, consultez mon cours avancé Illustrator. Sur la vidéo suivante. 55. Conseils et astuces pour utiliser des images dans Figma: Bonjour, tout le monde. Cette vidéo est une question d'images. Nous allons examiner les différentes façons de les importer, comment les ajuster, plusieurs images et comment jouer avec des choses telles que l'exposition, comme les éléments de base de Photoshop, afin que nous puissions le mettre en arrière-plan. Certains sont un peu peu inintuitifs, alors restez dans les parages et laissez-moi vous montrer ce qu'il faut faire. Nous avons couvert un peu d'images plus tôt. Examinons tout ça, toutes les bonnes choses utiles à savoir. En apportant des images, vous avez probablement vu qu'il y a environ un millier de façons. Plus tôt, je ne sais pas trop comment nous l'avons fait, mais il y a une image de lieu, ou vous pouvez aller ici et aller à l'image de place. C'est la même chose. Ou le raccourci, c'est ce que j'utilise le plus. Apportons une image, juste une. Lorsque vous apportez une image, vous pouvez cliquer une fois et elle est en taille réelle, ce qui est trop grand, et maintenant c'est correct. Cela peut être très bien, et vous voudrez peut-être le voir à sa taille réelle. Je vais utiliser mon raccourci, c'est Command Shift K sur un Mac et c'est Control Shift K sur un PC. Ce que j'ai tendance à faire, c'est quand on introduit une image, c'est de la faire glisser vers l'extérieur. Je vais le faire traîner ici. Vous pouvez lui donner la bonne taille. Attention cependant. Maintenez la touche « Maj » enfoncée pour atteindre la hauteur et la largeur proportionnellement. Apportons plusieurs images. Je vais utiliser à nouveau mon raccourci, Command Shift K, Control Shift K sur un PC. Je vais tous les faire venir. Allez, les gars. Ce que vous remarquerez, c'est que votre petit curseur finira par se mettre à jour. Il y a sept images. Je vais maintenir « Shift down » et les amener dans les bonnes tailles. La chose est appropriée à cela. En rotation, nous en avons déjà parlé, mais réitérons. Si votre outil de sélection est sélectionné et que vous survolez simplement dans ce coin magique, vous pouvez cliquer et faire glisser le curseur. Maintenez la touche « Maj » enfoncée, elle s'enfoncera. Vous pouvez le taper ici. Vous pouvez être à 180 degrés, merci beaucoup. Bien que ce ne soit pas Photoshop, vous pouvez faire des choses de base ici qui vous donnent assez pour vous en sortir parce que ce que je veux faire, c'est que je le veux, disons que j'aime cette image ici, mais je veux l'alléger. Lorsque je le sélectionne ici sous Remplir, c'est là que l'image finit, je peux cliquer dessus et je me débarrasse de tous les nuanciers et j'obtiens des ajustements liés à l'image. Je peux jouer avec l'exposition. Je vais augmenter un peu l'exposition. Vous pouvez faire des choses de base. Nous n'allons pas tout couvrir. Mais la saturation, noir et blanc, voilà. Changez la température si elle est peut-être un peu trop bleue, un peu trop jaune. Ayez un peu de plaisir avec eux. Encore une fois, pas les liaisons Photoshop, quelques-unes des bonnes bases pour mettre à jour une image. Une autre façon de faire apparaître une image est d'avoir déjà une forme. Disons que j'ai ce cercle ici, peut-être un rectangle. Quand il est sélectionné, je peux dire que je ne veux pas que vous ayez un remplissage de cette couleur primaire. Je vais rompre ce lien. Nous l'avons déjà vu, les images sont remplies. Je peux simplement continuer et changer la couleur de ce remplissage, passant d'un dégradé solide, pas linéaire ou radial, aussi génial que ceux-ci soient, je peux aller à Image et obtenir ce petit damier et vous dites, c'est comme un endroit support. Vous pouvez dire choisir l'image et nous allons par là. C'est génial si vous avez déjà des formes sur votre document, comme moi. se moque, décroche. Je vais supprimer ces choses maintenant et commencer à avancer. Il y a quelques endroits où cliquer sur le bouton, il y a un raccourci, vous pouvez le faire glisser depuis votre bureau. Est-ce que j'ai couvert celui-là ? Je ne l'ai pas fait. Si je fais ce problème, c'est qu'il est de taille géante. Si vous utilisez une taille appropriée, vous pouvez simplement les faire glisser depuis votre fenêtre de recherche. Ce dernier, là où nous avons cliqué sur une forme, nous sommes entrés dans le remplissage et nous avons dit que vous êtes une image maintenant. J'en ferai encore une. Je les choisis au hasard. La dernière chose que je veux faire avant de partir, c'est que je vais me débarrasser de cet arrière-plan coloré, et je vais combiner les choses que nous venons d' apprendre un peu parce que je veux une image d'arrière-plan, c'est peut-être une boîte de héros. Je l'utilise pour le site Web complet. Je vais saisir, vous avez deux options ici. Je veux utiliser, disons, cette image. Ce n'est pas une mauvaise façon, mais c'est un moyen. C'est une façon naturelle de le faire. Je vais mettre ça ici, et je vais l'agrandir. Si vous maintenez Shift, il le fera proportionnellement, qui est normalement bon, mais ce que je veux faire, c'est que je ne veux rien retenir parce que pouvez-vous voir ce qu'il fait ? Il veut naturellement être réactif, donc je peux simplement la faire glisser jusqu'à la taille de cette fenêtre, et tout ce qui est [inaudible], il suffit de la déplacer vers l'arrière. Où est-il ? Il est là. Je vais juste cliquer dessus avec le bouton droit de la souris et dire, revenir en arrière ou utiliser ce raccourci de commutateur, puis vous commencez à travailler de cette façon. Il y a une image à l'arrière, c'est très bien, mais c'est un objet qui peut être déplacé. Il n'y a rien de mal là-dedans. Mais il est en fait plus facile de simplement changer le remplissage du cadre lui-même. Vous n'êtes pas obligé de le faire. Mais ce qui est cool, c'est ici, page d'accueil que j'ai sélectionnée. Encore une fois, je vais casser le lien vers ce style parce que je veux que ce remplissage soit une image. Vous devez jouer avec les deux parce que vous obtiendrez beaucoup de choses de la communauté configurée de cette façon et ce n'est pas intuitif, mais c'est utile. Allons choisir une image, et je vais trouver celle-ci. Lequel s'agit-il ? Maintenant, là. Il fonctionne de la même façon. Nous avions déjà une forme et elle l'a remplie, mais ce qui est cool, c'est qu'il n'y a rien dans mes calques, c'est bien rangé, et même si nous l'avons appliquée à cette page d'accueil de haut niveau, elle est en fait exécutée en bas. Je vais revenir à l'endroit où je l'ai fait avant mes paramètres d'image. En fait, je vais dire que l'exposition est un bon moyen de la réduire. C'est le plus évident. Ce que je trouve utile, c'est souvent de diminuer un peu l'exposition, mais ce n'est pas tant que tout est en baisse, c'est principalement les reflets qui diminuent pour éliminer une partie de ce contraste fort. Vous pouvez simplement jouer avec eux, décider où vous voulez que cela se trouve. Je vais aussi retirer la saturation, pas la totalité. J'ai toujours voulu faire ce truc de fond, et vous me dites, je ne peux pas voir le texte. C'est ce que je vais faire entre deux vidéos. Je vais prendre une diminution, le rendre blanc juste pour qu'il se démarque en arrière-plan. C'était mon rapide examen de tous les éléments d'imagerie en une seule vidéo. Passons à d'autres éléments d'imagerie dans la vidéo suivante. 56. Masquage du recadrage d'images dans Figma: Bonjour, tout le monde. Comme vous pouvez le constater par cette sortie désordonnée, nous allons examiner le masquage/recadrage. De cette façon, nous masquons et cochons à l'intérieur des formes. Figma peut le faire à votre place de deux façons différentes. Laissez-moi vous montrer les voies. Tout d'abord, j'utilise le mot masque et recadrage de manière interchangeable ici dans Figma parce qu'ils signifient la même chose pour Figma. Figma appelle ça la culture, on pourrait appeler ça masquage, même ici. La première chose à remarquer est la différence entre le recadrage et l'utilisation du remplissage. Ces images que nous avons achetées dans la dernière vidéo, rien pour eux, juste les déversent ici. Par défaut, si nous allons au remplissage et que nous allons aux images, c'est l'option Remplir. Nous allons examiner la culture dans une seconde, mais le remplissage fait le recadrage. C'est peut-être suffisant pour vous. Si je n'ai rien sélectionné, j'ai mon outil de sélection. Je peux juste saisir l'extérieur de ceux-ci et cela pourrait être suffisant pour vous. Le problème, c'est que je ne peux pas monter et descendre. Je peux exposer de façon réactive, mais cela pourrait suffire. Nous allons maintenant passer à la culture. Qu'est-ce que cela signifie ? En gros, il vous montre les extras. Maintenant, je peux travailler de manière interchangeable sur le bord de l'image sur le bord de l'image. Maintenant, en saisissant le bord de l'image, vous devez maintenir « Maj » et la largeur, vous devenez un peu squishy. Quand j'ai eu ça, c'est comme, oui, ça a du sens ? Comment puis-je double-cliquer ? J'essayais d'ajuster l'image. Figma doit ajouter, peut-être déjà, quelques poignées ici pour savoir que vous pouvez cliquer et faire glisser. C'est mon conseil de toute façon. Mais vous pouvez cliquer sur maintenir, et le faire glisser maintenant la touche « Maj », vous pouvez également le faire pivoter ici, voyez-vous ? C'est du recadrage. Maintenant, il y a deux façons de faire des recadrages. Laissez-moi les décomposer parce que vous allez tomber sur eux tous. C'est trois façons de masquer. Une façon qui arrive souvent, c'est que vous le ferez avec une forme. J'appelle cela la méthode du masque à deux formes. J'ai inventé ces noms. Vous n'allez pas pouvoir les trouver de toute façon. Je vais saisir l'outil polygone jeter en maintenant « Maj ». Maintenant, la plupart des programmes ont la forme au-dessus, vous devez sélectionner l'image d'arrière-plan. Je les ai tous les deux sélectionnés et vous avez cliqué sur cette option, vous voyez ça là ? Il savait, il n'est pas là, il est là quand vous avez sélectionné deux choses, c' est-à-dire le bouton Créer un masque. Boom, pas ce que je veux. L'image doit être à l'avant. Qui supprime le raccourci pour mettre les choses au premier plan ? Vous pouvez cliquer dessus avec le bouton droit de la souris ou utiliser un crochet carré. C'est le deuxième support carré. Vous y voilà. Ils sont tous les deux là, vous vous cachez juste en dessous. Image sur le dessus, sélectionnez ces deux masques fins. C'est une façon de le faire et c'est plutôt bien. Vous pouvez toujours y entrer. Je peux double-cliquer. C'est différent, il s'agit de deux objets distincts ici dans le panneau Calques. Il y a un groupe de masques, il y a mon image et ma forme. C'est pourquoi je l'appelle le masque à deux formes. Il faut deux, il faut une image et une forme pour la masquer. Vous pouvez toujours les ajuster séparément. Vous y allez, cliquez ici, cliquez sur mon image. C'est ma méthode à deux formes. L'autre façon de le faire est mon premier masque de forme, un autre nom que j'ai inventé. Vous dessinez la forme et comme nous l'avons fait auparavant, nous cliquons dessus, nous l'avons fait un peu. Cliquez sur le remplissage. Nous ne voulons pas être gris, non, nous voyons ce gris. Nous allons voir les images. Cliquez sur là, choisissez une de mes images et nous avons maîtrisé leur, mais nous utilisons ce remplissage. Vous pouvez l'éteindre maintenant et aller au recadrage et vous êtes comme en quoi est-ce différent de cela ? C'est surtout à voir ici que, vous voyez cette grande construction ici, c'est ma méthode à deux formes. Celle-ci est ma forme en premier, nous faisons la forme et nous y modifions simplement un remplissage. C'est juste plus propre ici, et ça fonctionne légèrement différemment. Ils font la même chose que si je double-clique dessus . En fait, je ne veux pas double-cliquer dessus. Je veux aller ici, ouvrir ma petite image et vous pouvez voir, je peux voir le bord de ma forme et me souvenir de la magie que vous vouliez juste savoir, saisissez les bords ici, maintenez « Shift ». Vous arrivez au même endroit. Pouvez-vous ne voir qu'une ou deux formes, probablement le moyen le plus facile de contourner votre tête de cette façon est un remodelage, peut avoir un remplissage. Si vous changez ce remplissage à partir du remplissage, il y a deux remplissages, excellents, lors du recadrage, vous pouvez les ajuster séparément ou les prendre, ce genre de chose. La troisième, c'est ce que nous avons fait au début. C'est ce que j'appelle la culture de vanille. Je donne ces noms, ce n'est probablement pas utile, mais la culture de vanille apporte de l'image. Faisons ça ensemble. Nous l'avons fait au début et j'apporte celui-ci, traîne, maintenez « Shift ». Au lieu de dessiner la forme en premier, comme nous l'avons fait ici, puis de la remplir, nous l'avons déjà eue. Nous avons une forme rectangulaire, elle est remplie, on dit qu'elle est remplie, on la définit pour recadrer, puis on peut ajuster la forme et l'image. Trois façons de faire cette chose similaire. Vous me comprenez ? Deux formes. Commencez par la forme. Commencez par simplement l'image et passez à l'image pour recadrer. Ces deux éléments exigent que vous changiez le remplissage pour recadrer. Celui-là ressemble plutôt un masque traditionnel où vous avez quelque chose qui masque la chose en dessous, mais dans ce cas, les choses en haut, une Figma bizarre. Une autre chose est d'utiliser ces techniques que vous pouvez utiliser avec du texte. Mon texte Roboto. Comment ai-je pu arriver à Roboto ? Eh bien, Roboto c'est le cas. Mises à niveau de la taille de police, « Command Shift » et la touche Arrêt complet. Est-ce que je l'ai fait plus tôt ? Je suis presque sûr de l'avoir fait. « Commande Shift » sur un Mac ou « Control Shift » sur un PC, et vous pouvez le faire de toute façon. Je vais en avoir deux. Vous pouvez soit le faire selon la méthode à deux formes. Je peux dire que vous êtes l'image en haut ou en bas. Faisons ça avec un autre. Allons faire ce type. Image en haut, en bas, c'est juste. Image sur le dessus à l'aide d'un crochet carré, sélectionnez-les tous les deux, faites la même chose. Masque, boum. Je peux toujours entrer là-dedans, double-cliquer dessus, avoir ma forme celle de l'intérieur. Je peux toujours modifier le texte. C'est probablement plus facile de le faire ici. Le texte est-il lisible ? Il s'avère que non. J'ai supposé que ce serait le cas. Attendez là-haut, Dan. Dans ces vidéos originales, j'étais comme si vous ne pouviez pas changer le texte. Tu peux vraiment le faire. Je reviendrai du futur et je vais vous montrer comment. Merci, Victoria Bardo, qui passe en revue le cours et dit que vous pouvez changer complètement le texte alors, alors nous y allons, nous allons faire quelque chose. Comme avant, il existe une méthode en deux parties où il y a une image et il faut s'assurer que l'image est en haut. En le sélectionnant, je vais utiliser mon crochet carré pour le placer au premier plan, sélectionner les deux, puis cliquer sur l'icône Masque. Nous avons ceci, maintenant pour modifier le texte, vous devez être sur cette partie de votre calque, il y a les lettres que j'ai besoin d' ajuster et simplement passer au type deux. C'est ce que j'ai manqué. Maintenant, je peux aller ici et dire, maintenant c'est Ben. C'est ainsi que vous ajustez le texte en mettant à jour la partie de l'image pour cliquer sur cette partie, c'est l'image que j'ai apportée, saisissez mon outil de sélection et je peux le déplacer en cliquant n'importe où à l'intérieur du cadre de sélection et je peux le régler. la taille de celle-ci ici aussi. C'est ainsi que vous pouvez ajuster le texte et l'image. Maintenant, il existe un autre moyen, c'est la méthode en deux parties vous avez une image et prenez séparément et vous les joignez en utilisant cette icône de masquage en haut. Dans l'autre sens, plus de vanille consiste saisir l'outil de type et il suffit de cliquer sur le côté ici. Nous allons le taper. Maintenant, au lieu d'avoir deux choses distinctes et de les combiner, ce que nous pouvons faire est de retour sur mon outil de sélection. Je l'ai sélectionné. Nous pouvons aller dans le remplissage et aller cliquer sur la couleur. Je vais dire à partir d'un solide, je vais aller à Image, et je vais cliquer sur « Choisir une image », puis je vais choisir une image. Nous pouvons le faire de cette façon. C'est là que ça va. La même chose qu'avant est en fait un peu plus facile d'ajuster le type, car vous pouvez simplement double-cliquer dessus et l'ajuster. C'est juste une autre façon de le faire. La différence ici, c'est regardez ceci et voyez-vous comment il s'est ajusté, c' est-à-dire lorsque je tape O, que l'image se développe pour la remplir. Alors que cette méthode ici, l'image reste là où elle est, peu importe la taille que cela prend. Supprimons-le. Vous pouvez ajuster l'image dans celle-ci. Cliquons dessus avec cet outil de sélection. Je veux voir le remplissage et au lieu de l'endroit où il est écrit image et remplissage, il s'agrandit. remplissage signifie qu'il va se développer et se contracter en fonction de la taille du type, nous allons obtenir une culture et vous obtiendrez maintenant un peu plus de contrôle comme dans cette option ici. n'y a pas de bonne ou de mauvaise façon, mais je peux ajuster le texte, je peux ajuster l'image d'arrière-plan. L'image de fond ici, comme les autres masques. Encore une fois, c'est peut-être un peu bizarre. n'y a pas de cadre de délimitation à l'extérieur. Il suffit de cliquer sur « Maj » enfoncé. C'est masquer avec du texte. C'est également une petite mise à jour de mes connaissances. Là, vous allez sur la vidéo suivante. 57. Image et plugin gratuits dans Figma: Bonjour, tout le monde. Dans cette vidéo, je vais vous montrer quelques bons endroits pour obtenir des images gratuites commercialement utilisables, et je vais également vous montrer le plugin correspondant. Pour que nous puissions simplement cliquer sur les formes ici et partir, vous savez quoi ? Je le veux, trop bien. Permettez-moi de vous montrer comment tout fonctionne. Images gratuites. Le grand endroit où aller est unsplash.com. Ils sont utilisables dans le commerce et peuvent être utilisés à la fois professionnellement, commercialement ou pour l'éducation. C'est assez incroyable ce que vous pouvez obtenir ces jours-ci. Je ne sais pas comment cela fonctionne. Je sais comment ça marche. Ils sont payés via des publicités et des ventes incisives à celles payantes. Mais je ne sais pas, c'est assez spectaculaire. Unsplash and Pexels en est un autre, si vous ne trouvez pas ce dont vous avez besoin dans Unsplash. Si vous travaillez pour une grande entreprise, demandez-lui de vérifier correctement les détails, mais vous verrez ici la licence Unsplash. Il est assez clair ce que vous pouvez et ne pouvez pas en faire. Vous pouvez faire beaucoup de choses et ils apprécient l'attribution. Il se peut que vous disiez : « Hé, si c'était le photographe, merci pour l'image gratuite. » Il y a beaucoup d'autres endroits, mais disons que ces deux-là sont vraiment bons pour le moment. Ce serait encore plus pratique s'il y avait un plugin qui les connectait, car en les téléchargeant, nous n'allons pas couvrir. Vous y allez, cliquez sur le téléchargement. Mais imaginez s'il y avait un plugin directement dedans. Les images gratuites, nous allons trier par plugins. Je suis dans le pot communautaire. Le voilà, Unsplash et vous pouvez voir où il y a beaucoup de téléchargements. Je l'ai déjà installé. Mec, c'est facile de désinstaller et d'installer ces choses. Cliquez dessus une fois et c'est parti. Donnez-lui une seconde, en fait, installons celui-ci aussi. Je ne sais pas s'il est installé ou désinstallé, allons le vérifier. C'est tellement facile à ce moment-là. Vous avez des plugins et oui, l' un est parti et celui-ci est de retour. Pexels. J'espère que ça fonctionne de la même façon. J'ai utilisé des charges Unsplash. Jetons un coup d'œil. Est-ce qu'ils travaillent de la même façon ? Oui, cliquez une fois, ils s'installent. Si vous avez d'abord une forme, supprimons celle-ci. Cela peut prendre un peu de temps, ne continuez pas à les écraser parce qu'il faut parfois un peu de temps pour apparaître ici. Disons que j'ai cette sélection et que je tape, écouteurs, ça ira dedans. On y va. Cliquez une fois et il devrait y aller. Tellement bien. Ce sont des images gratuites. Cherchez le plugin, il y en a probablement un pour presque tout. C'est tout pour cette vidéo. Je vous verrai dans le prochain. 58. Photoshop est-il nécessaire pour l'UX design dans Figma: Bonjour à tous. Dans cette vidéo, nous allons parler de utilité de Photoshop en tant que concepteur UX ? Spoiler, je pense que c'est le cas. Mais parlons de la façon dont ils travaillent ensemble. Ce qui est bon avec Figma et ce que vous pourriez faire dans Photoshop. Nous allons couvrir des choses comme la réduction de l'échelle des images prêtes pour Figma. Nous allons regarder des images de découpe d'argile. Boom. Je les jette dans Figma. Voici mes petits écouteurs ici, coupant les gens et probablement une partie de la monotonie et laisse Photoshop emporter la monotonie et laisse Photoshop emporter beaucoup de travail pour étendre les arrière-plans. Vous avez des emplacements pour le texte et les logos et remplissez des tableaux d'images de héros. Tout cela et plus encore dans ce tutoriel. Allons-y. Pour commencer, répondons à la plus grande question : ai-je besoin de compétences Photoshop pour devenir concepteur UX ou concepteur d'interface utilisateur ? Mon humble avis est oui. C'est juste mon avis. C'est juste trop difficile de s'éloigner. Figma fait des choses de base. Nous avons fait comme, cliquez sur une image, entrez ici et vous pouvez faire comme saturation, exposition et autres choses. C'est ce que Photoshop fait également. Mais c'est le masquage. Nous pouvons faire du masquage de base, ce que nous avons fait dans ce cours, mais cela ne va pas très loin. L'autre chose pour Photoshop est de redimensionner des images très volumineuses. Nous avons apporté ces images de génomes et nous les avons simplement réduites. La taille du fichier est vraiment grande, donc les prototypes commencent à mal fonctionner. Si vous avez une maquette vraiment importante , toutes ces images ralentissent les choses. L'autre partie est que lorsque vous allez embauché si vous n'êtes pas déjà embauché et que vous cherchez un emploi, il y aura souvent de la publicité comme, hé, rôle de concepteur UX doit avoir, et Figma peut être l'outil UX. peut être XD ou Sketch. Ils sont tous très similaires. J'ai un cours XD si vous voulez le faire aussi. Ils auront probablement aussi des compétences Photoshop. Il existe des alternatives gratuites à Photoshop. Gimp est mal nommé. L'autre chose à prendre en compte est la façon dont vous travaillez avec Photoshop ? Ce qu'il ne fait pas, c'est que vous ne pouvez pas importer de fichiers Photoshop. Je ne peux pas aller dans Mes brouillons et aller à Importer et aller sur PSD et cliquer sur « Ouvrir » parce que cela ne fonctionne pas pour le moment. Vérifiez votre version. Parce que ce qui arrive souvent, c'est peut-être vous en ce moment. Les gens utilisent Photoshop pour faire ce que nous avons fait dans ce cours et cela fonctionne bien et beaucoup de gens le font. Puis ils le remettent à quelqu'un comme moi ou au nouveau vous et ils disent : « Voilà. Je l'ai fait. » Vous êtes comme prototyper cette chose, il n'y a pas de prototypage ED de fichier Photoshop. faut le reconstruire, ce qui n'est pas amusant. Cela ne fonctionne pas pour le moment. Vérifiez s'il y a un plugin, il n'y en a pas pour le moment. PSD à Figma, gardez un œil sur celui-ci si vous le rencontrez. Il peut y avoir une solution à un moment donné. Ce que nous finissons par faire, c'est dans Photoshop, il suffit de créer des trucs puis de les exporter pour Figma. Ce que je veux faire, c'est faire quelques exercices de ce qui serait génial. Certaines des bonnes choses uniques de l'utilisation de Photoshop pour entrer dans Figma. Maintenant, ça va être un peu tourbillon. Ce n'est pas un cours Photoshop. Je veux juste jeter quelques trucs parce que je veux vous montrer comment vous obtenez des fichiers pour les personnes expérimentées et les personnes que je ne veux essayer de vous vendre mon cours Photoshop. J'ai un Photoshop essentiel et avancé. Si vous avez une expérience autodidacte, même les éléments essentiels restent plutôt bons pour nos autodidactes. Si vous êtes assez avancé, consultez mon cours avancé. Faisons quelques bases. La première consiste à redimensionner les images parce qu'elles sont trop grandes. Si nous saisissons celui-ci, il s'agit de 1,4 mégaoctets. Je vais éditer dans Photoshop. Encore une fois, je ne vais pas vous donner un tutoriel complet. Si tu dis : « Hé, il est allé trop vite. » Je ne veux pas trop me lancer dans le tutoriel ici. Les bases sont si vous allez dans Fichier et que vous recherchez cette option Exporter sous. C'est l'incroyable pour réduire la taille du fichier dans le bon format. En fait, je veux qu'il soit 500 pixels de largeur parce qu'il va dans l'une de ces vignettes. Il va s'agir d'un JPEG et peut-être qu'il sera de 60 %. Ensuite, vous l'exportez. Je vais coller le mien sur mon bureau. Vous pouvez sauvegarder cela. essayé de le garder bien et vous pouvez simplement importer ce fichier. Comparons les deux. Prenons-en un autre. Où se trouve mon ordinateur de bureau ? C'est là. Ce même dossier. Taille parfaitement fine. Il s'agit de 38 kilo-octets, soit 0,038 mégaoctets, [inaudible], soit 1,4. Vous le faites beaucoup, juste en rangeant les images, en les réduisant. Le plus important est probablement lorsque vous essayez de masquer. Il le fait si bien dans Photoshop. Je vais utiliser celui-ci ici. Je vais le jeter dans Photoshop. Je vais renommer le calque d'arrière-plan en calque 0. Il y en a une douce, regardez, supprimez l'arrière-plan. Est-ce que c'est bon ? J'adore montrer ce bouton à ceux qui utilisent Photoshop depuis un certain temps. Il y a beaucoup de choses qui se glissent dans Photoshop maintenant. Si vous ne vous êtes pas donné de perfectionnement professionnel dans Photoshop ou si vous l'avez fait, mon cool, c'est très cinq vous, vous l'avez peut-être déjà fait. Prêt, High Five. C'est là que tu y vas. Mais si ce n'est pas le cas, même si ce n'est pas mes cours, passez en revue les nouveautés de Photoshop. Il se trouve sur le site Adobe, il vous donnera une version écrémée de ce qui est sorti depuis 2004, date de la dernière mise à jour vous-même. Comment puis-je faire entrer ça dans Figma maintenant ? Deux façons. Comme nous venons de le faire, c'est probablement un bon moyen parce que cela est transparent. Tout ce que nous avons vraiment à faire ici, c'est d'y aller, en fait, la taille peut devenir plus petite, pas 100, elle est trop petite. Le format doit simplement être PNG. Celui-ci apportera la transparence et c'est vraiment ce que nous voulons. La taille n'a pas vraiment d'importance. Je vais l'exporter, l'enregistrer sur mon bureau. Désordonné ce bureau, puis dans Figma, je vais aller à Command Shift K ou Control Shift K, et où en sommes-nous ? Il suffit d'arrêter. Où était ce type ? Allez, entrez. [inaudible] Je ne sais pas ce que j'ai fait là-bas. Cliquez une fois, on y va même 1000 pixels est assez gros. Utilisez le K pour la mise à l'échelle. Eh bien, vous le voyez. Il est déjà là. Je vais faire une petite démo juste pour la parcourir et avant. C'est un peu plus fluide que les ums et les chances, mais de toute façon, je l'ai coincé entre quelques trucs ici pour aller et monter. Essaie juste d'avoir l'air cool. Cela ne fonctionne pas sur tous, contrairement à cela, j'ai trouvé que le soir, les pages de shopping pour essayer de vous impressionner, cela ne fonctionne pas aussi bien sur eux que ça. Un autre, allons-y pour les gens. Nous allons être, où est-il ? Découpons ce type. L'une des fonctionnalités étonnantes de Photoshop est le sujet sélectionné. Vous n'avez pas cliqué dessus, vous devriez regarder ça. Encore une fois, cela ne fonctionne pas sur tous les gens tout le temps, mais je vais le faire et masquer des calques, tellement bien. Je pourrais revenir à mes, ces choses pour retoucher. Je pourrais travailler sur ce bouton de masque plus. Ce que nous pourrions faire, c'est que nous pourrions revenir à notre fichier Explore As et faire un PNG. Si vous vous moquez simplement des choses rapidement et pas comme officielles, vous pouvez dire cliquer avec le bouton droit sur ce masque, et pour dire, appliquons ce masque de calque. C'est parti, c'est un montage destructeur. C'est bon. Je peux simplement utiliser mon outil de réception. Sélectionnez autour, manqué son démarrage, et copiez simplement, en utilisant la commande C ou Control C sur un PC et je vais juste le coller. Collons-le quelque part ici. Est-ce que c'est bon ? Regardez les bords. Je n'avais pas l'air si bien dans Photoshop. C'est génial. Je n'arrive pas à croire à quel point c'est bon. Vous avez compris l'idée. Une dernière chose qui est super pratique pour les gens qui utilisent Photoshop qui pourrait ne pas le savoir, c' est comme le contenu loin des choses, je veux le faire sortir d'ici, c'est que vous pourriez avoir une image qui juste doit être plus grand. Je vais retourner celle-ci car c'est l'image que j'ai décidé d'utiliser parce qu'elle figurait dans cette liste. Allons faire ça. Je vais l'ajouter à Photoshop. Le problème avec cette image est que j'ai besoin de plus de fond, arrive tout le temps. Lorsque vous mettez du texte dessus, vous devez monter en haut. Il existe plusieurs façons de le faire dans Photoshop. Je vais utiliser l'outil de recadrage, qui est le raccourci C. Je vais activer le Content Aware. Content Aware est incroyable dans Photoshop. Faites-le beaucoup de temps en regardant les différents Content-Aware. Il y en a environ quatre ou cinq. Si je fais ça et que je clique sur « Enter », tu es prêt ? [inaudible]. Ce n'est pas génial. Mais ça va bien se passer pour mettre des textes au-dessus du haut. C'est vraiment incroyable de cette façon. Il y a une autre façon de le faire, si cela ne fonctionne pas tout à fait ou si vous obtenez des choses bizarres, je vais utiliser à nouveau cet outil de recadrage. Je vais désactiver Content Aware. Je vais juste l'agrandir. Parce que supposons que vous vouliez une très grande bannière de mauvaises herbes en haut de notre image de héros, en haut de votre image de héros. Je vais utiliser cet outil de chapiteau de rectangle et attraper un morceau, puis aller dans Modifier. Je vais utiliser Content-Aware, mais celui-ci est Content Aware Fill. Non, pas celui que je veux. Je vais frapper « Escape ». Je veux le frapper, « Échelle consciente du contenu », celui-là. J'ai dit : « Fill ». On y va. Echelle. Regardez-moi ça. Maintenez la touche Maj enfoncée pendant que vous faites glisser ce coin. Vous devez juste aimer agrandir les choses. Il faut que ce soit le fond, les choses floues, ne fonctionnent pas sur tout, mais c'est bien. Encore une fois, je pourrais simplement copier et coller cela maintenant parce que je n'ai pas vraiment fait de transparence. Copiez dans Figma, peut-être sur ma version de bureau. J'ai cette belle image de grand héros. Je déconne les choses. Allons-y, tu as compris l'idée. Sortons ça, ça doit être bizarre. Je vais aller coller et on y va tout droit et c'est le cas. Regardez à quel point nous sommes bons. Quelques compétences de photoshop sucrées combinées à des compétences Figma mignonnes, un menu de concepteur UX professionnel. C'était long. Je voulais juste aborder certaines des choses de Photoshop qui pourraient être utiles si vous êtes déjà utilisateur de l'interface utilisateur. Je sais que beaucoup d'entre vous le sont déjà et j'ai choisi des super excitants qui ont fonctionné différemment dans ce tutoriel principal juste pour voir si, venez faire le cours. C'est excitant. Croisez ça. C'est Figma et Photoshop. Je vous verrai dans la prochaine vidéo. 59. Projet de cours - Images: Bonjour, tout le monde. C'est l'heure du projet de classe. En gros, je veux juste que vous ajoutiez des images à votre maquette Hi-Fi mobile et que vous m'envoyez une capture d'écran. De toute évidence, vous n'allez pas utiliser d'écouteurs à moins d' avoir la chance d'avoir également des écouteurs. Pour votre mémoire, en partie Board, votre mémoire disait : gardez à l'esprit la personnalité pour laquelle vous travaillez. Des images appropriées pour eux. Le voilà. Ajoutez également des images à l'expérience Hi-Fi avec le plugin. Essayez simplement n'importe lequel de ces plugins sur l'installation d'images. Gardez à l'esprit votre bref et votre personnalité lorsque vous choisissez des images. Prenez une capture d'écran de toutes les pages contenant des images et téléchargez-la, partagez-la également sur les réseaux sociaux. Surtout maintenant que nous mettons en place un site Web de remplissage, ce que vous voudrez peut-être faire ici est de prendre une capture d'écran de votre mémoire et de votre personnalité lorsque vous le téléchargez, surtout si vous recherchez des commentaires parce que ce truc pourrait être utile. Probablement pas votre flux de tâches, mais cela va être différent du mien, mais où il a le nom de votre entreprise et ce qu'il est, surtout si vous recherchez des commentaires, car d'autres personnes peuvent le lire et le savoir comment ils jugent vos images. C'est ça. Je vous verrai dans la vidéo suivante. 60. 60 essais: D'accord. Bonjour, tout le monde. Dans cette vidéo, nous allons examiner la mise en page automatique et les boutons étendus. Que font-ils ? Ceci. D'accord. Ah, c'est trop cool. Nous pouvons y mettre notre bouton en forme pour l'enrouler autour de notre texte. C'est ce qu'on appelle une Lut automatique. Nous allons aller un peu plus loin. Nous allons créer ce bouton super extensible et réactif Ah. Perturbations automatiques. C'est tellement amusant. D'accord. Allons-y. Juste avant de commencer, vous remarquerez que l'interface utilisateur est différente, qui signifie qu'il s'agit d'une vidéo de mise à jour. J'ai essayé de suivre le rythme du cours autant que possible. Il peut y avoir de légères différences. Mais le contenu est le même. Commençons. Très bien, pour commencer J'ai saisi ce bouton et je l'ai mis ici. Et juste pour vous rappeler qu'il s' agit d'un bout de texte posé au sommet d'un rectangle Les rectangles, c'est bien, mais ils n'ont pas de bruit automatique. C'est pour cela que nous sommes venus. Donc, pour que quelque chose soit automatiquement bruyant, je vais sélectionner les deux, et il y a un bouton ici qui va le convertir en un cadre doté d'un son automatique. C'est l'un de ces pouvoirs spéciaux que possède Frames et que j'ai mentionnés plus tôt. Cliquez sur Plus. Rien n' a changé sauf que... Maintenant c'est encore plus génial. D'accord. Et extensible Co. Les arolautes sont géniaux Maintenant, la chose intéressante à laquelle il faut faire attention. Je vais cliquer depuis l'arrière-plan consulter mon panneau de couches. Cela a changé. Au lieu qu'il n'y ait que du texte, il se trouve au-dessus d'un rectangle, là où va le rectangle. D'accord ? Ce qui s'est passé maintenant, c'est du texte à l'intérieur de ce qu'on appelle un cadre. Accroché dans un fichier renommé en double-cliquant. Appelons celui-ci BTN. Disons que c'est petit, et l'icône change également. C'en est une nouvelle. Donc, le rectangle disparaît, et c'est juste du texte à l'intérieur de ce parent. Ce parent. D'accord, parce qu'il est à l'intérieur. C'est la façon dont le parent. D'accord ? C'est lui le patron. Il fait beaucoup de choses avec ce texte. C'est comme l'enrouler autour de lui. Cela lui donne également sa couleur. Tu peux voir par ici ? Sa couleur se trouve dans le cadre parent. Même si c'est en haut, c'est un peu comme l'arrière-plan du bouton. Qu'y a-t-il d'autre dans ce bouton ? Le texte. Voilà. La prochaine étape est de savoir comment contrôler le rembourrage, car avant de le déplacer physiquement Mais maintenant, tout est en quelque sorte réuni. Le rembourrage se produit donc lorsque vous sélectionnez notre cadre de mise en page automatique, et c'est ici Il y a la gauche, la droite le haut et le bas. Donc, à gauche et à droite. Euh, c'est vraiment parfait. Mais tu peux le changer. Modifions-le 32 et 16. Je vais annuler ce que j'ai aimé tel qu'il était, mais là, vous pouvez changer le rembourrage Notez pour le reste du cours que tout ce rembourrage était caché. Donc, pour le reste du cours, si je vous montre où il se trouve, il était caché dans une icône ici. Je vais rapidement vous le montrer. Donc, pour le reste du cours, je vais dire que c'est dépassé. OK, j'ai cliqué sur cette petite icône. C'est ce que je vais faire pendant le reste du cours, parce que je ne savais pas mieux. Mais Future Dan le sait, et il le sait. Hé, sortons-le. Parce que dans le cours original, j'aime bien, pourquoi l'ont-ils caché ici ? Et ils ont écouté. Je doute qu'ils m'aient écoutée, mais pour les nombreux utilisateurs, rembourrage se trouve juste à l'extérieur Si vous souhaitez opter pour un rembourrage individuel pour des côtés uniques, il vous suffit de cliquer sur cette option Ce qui est étrange avec le rembourrage, c'est qu'il est en fait contrôlé par le parent, le cadre de mise en page automatique Ce n'est pas le texte. Si je clique sur le texte, il n'y a pas de rembourrage Cliquez sur le parent, sur tout le rembourrage. Bien sûr, l'éditeur déteste ça parce que c'est un côté à l'autre de la vidéo OK, mais tu vois l'idée. Je vais cliquer dessus. Regarde. Le parent fait une grande partie du travail. L'autre point à prendre en compte est que lorsque vous convertissez une zone de texte, elle peut parfois ne pas s'étendre ni se contracter. Cela dépendra de cette option ici. Vous devez donc réellement cliquer sur votre texte. Le moyen le plus simple est de cliquer sur le panneau des couches ou simplement double-cliquer dessus pour accéder à l'intérieur de mon cadre de mise en page automatique . Le texte est sélectionné, sans rembourrage Mais je peux faire des choses comme ça. C'est celui que vous voulez simplement vérifier. Si vous vous en tenez à une hauteur automatique, qui aura une largeur fixe, cela signifie simplement que lorsque vous arriverez à la fin, cela fonctionnera à moitié, mais pas complètement. C'est encore pire lorsqu'il est à cette hauteur et à cette largeur fixes. Ça va exploser , c'est du texte blanc, et ça traîne un peu en bas. Donc, pour régler ça. Tout d'abord, vous n'avez pas besoin de beaucoup de texte, puis vous devez vous assurer que votre zone de texte est celle-ci appelée largeur automatique. Génial, moi. Revenons en arrière. Changeons cette valeur deux fois par échec. C'est bon. La prochaine chose que je voudrais vous montrer, c'est le bouton qui s'étire lorsque vous le déplacez, car pour le moment, ce n'est pas le cas pour celui-ci C'est un peu un T, c'est vous qui ferez le maximum, mais si vous voulez un bouton réactif, qui se déplace de l'intérieur, que ce soit horizontalement ou verticalement, nous allons examiner ce que l'on appelle le redimensionnement, et nous allons examiner ce que l'on appelle le câlin Vous pouvez voir par défaut. Si je clique sur celui-ci, il voit un câlin. C'est pour cela que je porte ce t-shirt. C'est un peu une blague de papa. Tu peux voir les petites icônes ici ? D'accord. C'est une blague de papa en matière d'UX Design. Voilà. C'est de là que ça vient. Un câlin et le parent étreint le contenu. Bien, ils ont compris la blague. Donc ce que je veux faire, c' est que si je le fais glisser, il passe instantanément à celui-ci appelé fixe, parce que je dis que vous avez exactement cette largeur, mais nous voulons toujours le bouton au milieu Donc, ce que nous devons faire, c'est passer à Ard out et il y a des options. Où aimerais-tu que ce qui se trouve à l'intérieur soit placé ? Je vais aller au centre. Et maintenant, oh Squidgy, voilà. Bouton SquigyGiant Faisons en sorte qu'il soit jaune. Toutes ces couleurs. Et le dernier bouton va passer au bouton de poursuite. D'accord ? Nous avons donc dessiné un rectangle, mis du texte dessus, l'avons sélectionné , en avons fait une mise en page automatique. Ce que vous finirez par faire, c'est aller droit au but. Maintenant que nous savons comment cela fonctionne. Je vais prendre l' outil de saisie, je vais cliquer une fois, et je vais dire « bouton, bas ». Appuyez sur Escape pour en sortir. Ce que je veux faire, c'est en faire une sortie automatique. Cliquez avec le bouton droit sur Ajouter une sortie automatique. Vous finirez par apprendre ce raccourci. Shift D. C'est vraiment une bonne idée. Dessinez du texte, appuyez sur Shift D sur MCL PC, et vous vous dites que cela n'a pas l' air d'avoir fonctionné En gros, il a créé ce truc ici, où nous avons ce parent, et à l'intérieur du texte. Ici, nous avons commencé avec du texte, mais dès que nous l'avons converti en Lut automatique, vous pouvez voir le même type de structure. Il ne manque que le parent. N'oubliez pas que ce n'est pas le texte lui-même. Je veux lui donner une couleur de champ, quelle que soit ma couleur. D'accord. Commencez par la première. Voilà. C'est juste un moyen plus rapide de faire que de dessiner le bouton, surtout si vous savez que vous voulez que ce soit une sortie automatique. Nous pouvons toujours ajouter nos coins arrondis. D'accord. C'est trop. Et nous savons que nous pouvons ajuster notre rembourrage ici. Je pourrais donc passer 24 heures sur 8. Ça a l'air bien. Voilà. Ainsi, à l'avenir, lorsque vous créerez des boutons, tapez simplement du texte. Déplacez la touche A ou cliquez dessus avec le bouton droit de la souris et cliquez sur Mise en page automatique. Ajoutez une couleur de fond et votre rectangle. En fait, vous finirez par dessiner un bouton une fois dans ce cours, puis pour toujours, le dupliquer et l'utiliser. Tout est fait. Et n'oubliez pas, si vous avez besoin d'une largeur fixe. Ici, nous avons besoin que ce soit, disons, 130 pixels. C'est la taille de nos boutons. Nous pouvons soit le faire glisser. Tu peux voir, et ça fait passer du statut de câlin à celui de fixe. Ou je peux annuler et simplement dire manuellement que vous êtes réparé, puis je peux le taper dedans. Ça va être un 30. Comment puis-je me placer au milieu ? Tu t'en souviens ? C'est comme celui-ci. Reste au milieu. Comment est-ce que je peux m'y prendre ? Euh, hein. Vous vous souvenez des contraintes, ce n'est pas une option ici. Oh. Allons-y. Il fait 30 pixels de large. L'étreinte du haut et du bas. C'est ce que j'ai laissé. Je n'ai pas besoin d'une hauteur fixe. se peut que tu en aies besoin. Je ne cela signifiera plus tard si je crée un bouton, sais pas ce que cela signifiera plus tard si je crée un bouton, alors qu'il doit l'être. 200. Il se déplacera vers le milieu. Voilà. Nous sommes un peu avancés dans le cours de base, mais nous avons l'impression d' être prêts pour cela. Et juste pour récapituler les modifications. Les câlins se sont donc déplacés jusqu' à la section du cadre. Le rembourrage est désormais visible lors de la pose automatique. Vous n'êtes pas obligé de cliquer sur une icône. Et il en va de même pour les contraintes qui semblent un peu différentes. Oui, presque pareil. Une autre chose est que dans le passé, avant que les mises à jour ne soient fréquentes, j'utilisais l'outil Rectangle. Et je reçois mon outil de texte. Et ce que je fais, c'est d'abord le convertir en cadre. Je fais donc un clic droit, je le convertit en cadre, puis je clique sur Auto Lt. C'est bon Tu peux passer directement à ça. Vous n' avez pas besoin de le convertir en cadre au préalable. Passez directement à Auto Lut, et il fera ces deux tâches pour nous. Sympa. Rien d'autre ? Non Il s'agit de la mise à jour. Je mettrai également à jour la vidéo suivante. Et juste pour que tu saches, le futur Dan se porte bien. Il ne regrette pas la chemise Dorky qu'il a confectionnée. Je fais en quelque sorte du contenu dans mes câlins. Bref, passons à une autre vidéo. 61. Projet de cours 11 - Boutons: Bonjour à tous, heure du projet de classe. C'est juste un simple. Vous allez dessiner trois boutons pour moi, pour votre propre projet sur lequel vous travaillez. Deux des boutons extensibles. Ce qui est ceux qui, lorsque vous tapez, ils se développent. Deux d'entre eux et l'un des plus extensibles. Faites-en un bouton d'achat, car nous allons l'utiliser plus tard sur notre page de paiement uniquement pour mettre en pratique ces compétences. J'aime vraiment que ce soit l'une des choses les plus délicates que nous allons faire à Figma. Si vous trouvez que c'est difficile et que vous trouvez des trucs et astuces qui vous aideront à mieux fonctionner ou qui peuvent mieux l'expliquer à quelqu'un d'autre, faites-le moi savoir dans les commentaires. Faites savoir aux autres dans les commentaires car je trouve cela difficile à expliquer. Déposez vos propres notes ci-dessous si vous trouvez une meilleure façon de l'expliquer, créez ces trois boutons. Pour celui-ci, vous n'avez pas besoin de le télécharger sur les réseaux sociaux. Ce n'est pas si excitant que ça. Ce que je veux faire, c'est un curveball pour le petit plus. Créez un plan qui n'a pas de remplissage, même si vous ne l'aimez pas. C'est à ce moment que vous pratiquez la pratique. Allez, téléchargez-le simplement sur les devoirs, mais pas sur les autres médias sociaux. Allez faire trois boutons, et je vous verrai dans la vidéo suivante. 62. 62: Salut tout le monde. Dans cette vidéo, nous allons examiner la mise en page automatique et aller un peu plus loin que dans la dernière vidéo. Dans la dernière vidéo, nous ne l'utilisons que pour un bouton extensible. Mais dans celui-ci, nous allons essayer regrouper de nombreux éléments et d'étendre ce grand groupe, afin de trouver une autre option dans ma navigation. Voyez-le remanié, agrandissez la boîte. Je peux le supprimer , le réduire. C'est donc un peu comme combiner les fonctionnalités de sélection intelligente que nous avons examinées plus tôt avec de nouvelles fonctionnalités sophistiquées d' ajout de mise en page automatique Passons donc à l'action et utilisons disposition automatique pour l' espacement. Bonjour tout le monde Hé, vous remarquerez que l'interface de cette vidéo est un peu différente car il s'agit d'une vidéo de mise à jour. Les modes de commande ont beaucoup changé. Vous avez remarqué dans la dernière vidéo que nous utilisons mise en page audio et que vous avez fait des câlins, d'accord, pour le bouton Et j'ai remarqué que tout le monde trouvait étreinte là où c'était devenu une bonne chose. Mais dans cette vidéo, la mise en page automatique a tellement changé que je vais la réenregistrer C'est pourquoi les choses ont l'air différentes et pourquoi j'ai l'air différent, plus vieux, plus mature. Quoi qu'il en soit, passez à la vidéo, Dan. D'accord, donc tout d'abord, tu vas me regarder taper des trucs. Nous allons le faire en mode rapide. Va. D'accord, je tape quelques trucs et je vais les aligner à gauche Et la seule chose que nous allons faire est de vous assurer que le texte se trouve dans des zones de texte séparées. Ne vous contentez pas de dessiner une zone de texte contenant tout cela dans les retours d'entrée et cela ne fonctionnera pas pour les astuces de mise en page automatique que nous voulons faire OK, alors ayez juste des zones de texte séparées. Je les ai simplement dupliqués en maintenant la touche Alt enfoncée, en faisant glisser puis en appuyant sur Commande D pour en obtenir une autre, puis en modifiant simplement le texte Allons-y. D'accord, parlons donc de la mise en page automatique. J'ai ces éléments maintenant et nous avons déjà utilisé la sélection intelligente. Si je les aligne, je peux faire des choses comme les faire glisser et les ajuster. Tellement intelligent, ça a l'air cool. Je peux faire le rembourrage, je peux être utilisé de la même manière avec quelques avantages supplémentaires Je vais donc le convertir en une mise en page de commande, un petit plus. Et vous remarquerez qu'ici, j'ai maintenant un cadre parent, d' accord, sur le cadre de mise en page automatique, c'est cette petite icône avec les petites lignes, d' accord, et à l'intérieur se trouvent ces gars. Et en gros, je peux faire ce que j'ai fait avec Smart Select. Je peux accéder aux fonctionnalités, me déplacer. Je peux appuyer sur la commande D pour en obtenir un autre et il s'ajuste très facilement Mais j'ai beaucoup plus de contrôle ici. Vous remarquerez donc qu'ici, je n'ai que des fonctionnalités de texte. OK, ce que je veux faire, c'est cliquer sur le dossier parent, cliquer sur le cadre 12. Mal nommé. Je vais appeler celui-ci un système de navigation. OK, et ici, mise en page automatique possède toutes ces fonctionnalités supplémentaires C'est pourquoi nous avons dû mettre à jour cette vidéo, car cela a beaucoup changé. On peut donc dire que je veux qu'ils soient tous empilés verticalement ou horizontalement Vous pouvez les encapsuler, mais c'est un peu plus dans les fonctionnalités avancées Nous le ferons plus tard dans le cours avancé. Mais nous pouvons faire de belles choses, comme combler l'écart entre les deux. Nous avons donc toujours ce contrôle total. Vous pouvez le saisir en huit, ou vous pouvez faire glisser cette icône et cette icône ici, en cliquant sur le fait glisser en maintenant le pointeur. Vous pouvez toujours le faire à l'écran comme nous le faisons avec Smart Select L'un des autres avantages de l'utilisation de la mise en page automatique comme celle-ci est que nous pouvons faire du rembourrage Donnons donc le contexte de cette mise en page automatique. J'ai donc sélectionné les parents, voir navigation. Je vais dire que je vais le remplir. La valeur par défaut est le blanc, ce qui n'est pas utile. Je vais choisir l'une des couleurs. Et maintenant, ils passent au second plan. Cliquez dessus, j'ai, j'ai du rembourrage. Je vais donc passer au rembourrage horizontal et vertical. Vous pouvez donc voir qu'il existe de nombreuses similitudes entre Smart Select, mais l'ordre a certains avantages et sa persistance nous permet de les garder dans les parages Je peux ajouter du rembourrage. Et l'autre point positif à propos de la persistance des sorties orales. Disons que je crée un nouvel article ou un nouveau menu ou quelque chose comme ça. Mais nous voulons les mêmes fonctionnalités. Nous voulons le rembourrage , une couleur de fond et un espacement Ce qu'il peut faire, c'est dire que vous n'êtes pas autorisé. OK, alors je peux sélectionner celui-ci, cliquer dessus avec le bouton droit de la souris et dire Copier Coller pour copier les propriétés comme celles-ci, cliquer à nouveau avec le bouton droit de la souris, copier/coller sous forme de collage. Et il intègre toutes ces fonctionnalités et vous permet d'obtenir des choses cohérentes Désormais, vous pouvez faire de plus en plus avec les mises en page automatiques. Nous allons vraiment approfondir le cours avancé avec la mise en page automatique. Mais pour le moment, la plupart des cas d'utilisation sont des boutons et ceux-ci ressemblent un peu à de petites fonctionnalités de navigation, cohérentes Et nous pouvons contrôler l' espacement au niveau du rembourrage, sur les marges au niveau de l' Et nous pouvons ajouter et supprimer des éléments très facilement, et tout se contracte et s'agrandit. C'est génial. Maintenant, certaines des choses que j'ai faites dans la vidéo précédente, la vidéo originale avec laquelle les gens avaient des problèmes, avec lesquelles vous pourriez avoir un problème c'est parfois ce que les gens font. Ils vont copier-coller. Et ça s'est terminé à l'extérieur d'ici. Maintenant, pourquoi je voulais y aller pour essayer de le faire, alors que c'est un peu en dehors de ça. Il y a deux choses. Le moyen le plus simple de dupliquer quelque chose ici est de le sélectionner, d'accord, pas le texte. Si je double-clique trop souvent, je copie et je colle et j'obtiens simplement plus de texte. Évidemment, si je clique sur Escape une fois que cela sort, cela active le mode édition. Maintenant, si je le copie et le colle, il fera l'ensemble de l'unité. Ou ce que je fais le plus, c'est cliquer une fois sur le tout, double-cliquer pour obtenir le bit que je veux à l'intérieur, d'appuyer sur la commande D, contrôler D sur un PC et le dupliquer, puis de le modifier S'il sort pour une raison ou une autre, vous pouvez simplement le faire glisser vers l'arrière. Tu peux voir les lignes là-bas ? OK, c'est parti. Si cela ne fonctionne toujours pas, jetez un œil à votre panneau de couches ici. J'ai donc ce cadre, qui est le cadre extérieur de mon téléphone. OK. À l'intérieur, j'ai ce cadre 12 mal nommé et mon système de navigation peut parfois se terminer comme ici. Et il s'est retrouvé là-dedans. C'était bizarre. OK. Voyez-vous que c'est loin d'ici, mon panneau Layers, si je veux qu'il soit dedans, d'accord, un système de navigation, ce que je peux faire c'est dire que vous, mon ami, êtes entre deux prises de coton. Il est là. Il est au bon endroit. Tu y vas. Les mises en page des commandes sont géniales. C'est bon, c'est ça. Passons à la vidéo suivante. 63. Comment utiliser les contraintes dans Figma: Bonjour à tous. Dans cette vidéo, nous allons examiner ce que l'on appelle des contraintes. Les contraintes nous permettent de faire quelque chose comme ça. Pouvez-vous voir la navigation en haut ? Cela nous permet de dire, collez en haut à gauche, que vous collez en haut à droite. C'est à l'envers, mais vous comprenez l'idée. Nous allons ajouter un peu de mise en page automatique à la fin de ce cours ainsi qu'une combinaison, pour faire exploser votre cerveau, rejoignez-moi dans cette extravagance des contraintes. Commençons par quelques trucs de base. Faisons juste quelques formes, je vais avancer rapidement. J'ai quelques formes et disons que je veux en faire une version iPad. Je vais dupliquer ça juste parce que je vais le détruire. J'appellerai ce groupe ma version iPad et, par défaut, si je saisis le bord de cela et que je l'étire, il fait des choses. Vous êtes comme, pourquoi ne sont-ils pas restés là ? Il essaie d'être réactif et il se répand uniformément et vous êtes comme, ce n' est pas ce que je veux, je veux juste que vous restiez dans le coin supérieur droit comme Dan nous l'a montré. Nous allons examiner les contraintes. Les contraintes sont toujours là, nous les avons déjà. Disons que le mot Scott, vous pouvez voir, est limité en haut à gauche. Ces gars ici, également en haut à gauche, ce n'est pas ce que je veux. Commençons par ce triangle ici. Je vais dire que vous êtes contraint en haut à droite du coin supérieur droit. Maintenant, si je le traîne, regardez ce qui se passe, ce type reste au bord. Ce que je pourrais faire, c'est regrouper ces gars, mais je vais plutôt utiliser le cadrage. Option de commande G ou contrôle alt G. Pour en faire un cadre, appelons cela mes icônes et je vais dire au lieu de contraindre en haut à gauche, contraindre en haut à droite pour qu'elles soient toutes ensemble, et je les fais glisser, regardez ça, ils contraindre. C'est ça les contraintes. Vous pouvez le faire coller au fond, faisons-le pour ce type. Nous pouvons dire que vous êtes contraint en bas à gauche, ce qui ne fonctionnera pas. C'est ce que je veux, éteignons-le d'abord. Revenons au sommet. Si j'entre ici et que je le traîne, tu me dis : Non, je veux que tu sois contraint en bas à gauche et que ça va marcher, regarde ça. Hé, collé au fond, mais je veux qu'il s'étende à tous. Vous pouvez dire que vous n'êtes pas seulement coincé à gauche ou à droite, mais vous pouvez faire les deux. Il est difficile de cliquer sur ces choses, vous pouvez les faire ici, mais vous pouvez aller à gauche et à droite. Tous les deux ensemble et en bas, maintenant regardent. Cliquez sur ce bouton, la contrainte en bas. C'est ce que sont les contraintes. Nous allons les utiliser pour la navigation, c'est un très bon cas d'utilisation. Je les utilise beaucoup pour nos cartes, ce que nous ferons quelques bons cas d'utilisation dans un peu, mais c'est l'essentiel. Ce qu'il faut noter ici, c'est laissez-moi zoomer, pouvez-vous y voir les petites lignes pointillées ? Il va de là vers la droite. Il devrait aller jusqu'au bord, un petit insecte. Cela montre que si je vais à gauche, vous pouvez le voir là-bas. Vous pouvez y voir le début. Il est limité au cadre extérieur, vous ne verrez pas de contraintes si ce type, copier-coller, est en dehors d'un cadre. Il est dans le no man's land, regarde, pas de contraintes, il est parti. Quand je le repousse, il a des contraintes. Il a besoin d'un cadre parent, contraintes complètes pour travailler. C'est une chose. Pour le moment, nous allons jusqu'à ce début. Souvent, ce qui arrivera, c'est que vous mettrez tout cela dans son propre cadre, peut-être l'appeler nav, dans son propre cadre parent. Peut-être appeler ça nav pour que ces gars soient tous coincés à l'intérieur de ce joli petit groupe. Faisons cela, mes icônes sont jointes. Je pourrais d'abord rejoindre ces deux gars ensemble. Au lieu de regrouper les membres, nous allons le placer dans un cadre. Ces deux unités vont entrer dans leur propre cadre. Laissez-moi juste citer les choses, ça le rend un peu plus clair, logo. Ces deux gars, à l'intérieur d'un cadre. On va peut-être dessiner le poing du cadre. Faisons-le dans l'autre sens, car je vais prendre mon outil de cadre. Nous avons converti beaucoup de choses en cadres. Vous pouvez commencer par le cadre, ce sera ma navigation et donner à ce cadre une couleur d'arrière-plan. Il va être noir dans ce cas, ça va faire. Je vais utiliser mon gris foncé, ils vont regarder, ce que j'ai réalisé que A n'est pas si sombre que ça, et B est juste vert. Vous avez peut-être vu plus tôt dans le cours et vous êtes genre, Il fait juste du vert, peut-il le dire ? Je ne l'ai pas fait quand il était petit, mais quand il est grand, il faut l'ajuster. Nous allons laisser ça pour le moment. Je vais le casser et le rendre beaucoup moins vert. Vert hindou, alors, pas tout vert. Nous avons ce cadre que ces logos se trouvent à l'intérieur. La raison pour laquelle ils sont entrés à l'intérieur est parce que je les ai choisis abord, puis j'ai dessiné un cadre, ils se sont nichés à l'intérieur. Si ce n'est pas le cas, vous pouvez simplement les faire glisser à l'intérieur. Ce sera mon nav. Je pense à cela comme au lieu d'utiliser l'extérieur du tout, parce que maintenant regardez ça. Si je règle l'ensemble du cadre, cela ne fonctionne pas, mais cela signifie que je peux l'utiliser comme une belle unité de copier-coller et le déplacer. Mais ce que je dois faire, c'est l'ajuster à nouveau pour que ces gars soient en haut à droite de ce cadre. Allons y aller. Je vais défaire, revenir à celui-ci. Nous avons notre nav, qui a ces deux choses à l'intérieur. Le logo est par défaut en haut à gauche, c'est très bien. Mais les icônes vont en haut à droite. Maintenant, quand je ne fais que vous, plus gros ou plus petit, c'est à ça que sont les contraintes. C'est ainsi que vous vous retrouvez avec ces choses folles que vous avez empruntées d'autres personnes et que vous aimez, c'est tellement déroutant. C'est vrai, c'est un peu. Ce qu'il faut se rappeler, c'est qu'ils doivent être à l'intérieur d'un cadre. Tu te rappelles quand on les a eus ici ? Je n'ai pas pu voir les contraintes. Vous pouvez utiliser l'extérieur, comme tout le cadre que nous utilisons, ce que nous appelons l'iPad ou le mobile, c'est à vous de choisir, mais dans ce cas, j'ai créé un cadre qui dit nav, et ces gars sont à l'intérieur. Maintenant, je veux que vous fassiez une pause, vous l'avez compris ? Est-ce que ça va bien ? Si vous étiez comme, Messieurs, je n'ai pas beaucoup suivi ça. Je veux que vous passiez peut-être à la prochaine vidéo maintenant. Si vous étiez comme, je le suis, continuez, nous allons aller d'un niveau plus profond, plus de création. Nous allons combiner quelques choses, nous allons combiner les contraintes que nous venons d'apprendre avec quelque chose d'autre que nous avons appris. Vous vous souvenez de la disposition automatique ? La mise en page automatique était cette navigation là-bas et nous utilisons la mise en page automatique pour ces boutons ici. Utilisons la mise en page automatique pour ces gars. Je vais aller à l'intérieur, trouver mes icônes, elles sont là, et au lieu que ce soit un cadre, je vais faire une mise en page automatique. Rappelez-vous l'une des choses intéressantes de la mise en page automatique, c'est une sélection intelligente. Cliquez dessus, maintenant je peux entrer ici et je peux l'ajuster très facilement, je peux jouer avec la commande. Je peux en ajouter un autre, commande D. Regardez ça et comme il est limité en haut à droite, il est poussé de cette façon. En combinant des choses, la mise en page automatique est séparée des contraintes, mais si vous les combinez, vous pouvez obtenir des trucs fantaisie et vous obtiendrez des trucs fantaisies d'autres personnes et maintenant vous savez comment il est construit peut-être. Vous pensez à ce que je pense ? Celui-ci, si je prends la taille de l'iPad et que je le fais de la taille iPaddy mais ça ne va pas et je peux continuer là-bas et je peux le faire et c'est parfait. Pourrions-nous simplement faire ce que nous avons fait en bas ici ? Disons que pour la navigation, vous êtes en haut à gauche. Et si je disais que vous étiez en haut à gauche et à droite ? Ensuite, nous saisissons tout ce cadre et il fait ce que celui-ci a fait et va à gauche et à droite. C'est trop. Oubliez que je l'ai dit, je vous verrai sur la prochaine vidéo. Nous allons faire quelques autres exemples de mise en page automatique dans le monde réel avec des contraintes et tout ce bonté parce que c'est de bonnes choses, mais c'est bon à savoir dans la prochaine vidéo. 64. 64: Bonjour à tous. Dans cette vidéo, nous allons combiner quelques fonctionnalités que nous avons déjà apprises. D'accord, nous allons examiner l' imbrication des cadres dans les cadres Nous allons examiner les contraintes liées à la sortie automatique. Nous allons créer quelque chose comme ça, où c'est une jolie petite carte, vous pouvez la voir ici. Mais c'est évolutif et raisonnable, d'accord ? Et je peux modifier le texte, d'accord ? Nous allons donc combiner les éléments relatifs à la sortie automatique. N'oubliez pas que nous avons créé des boutons, sorte que la boîte s'ajuste et s'agrandit de plus en plus, sans compter les contraintes qui la verrouillent en bas Juste un autre cas d'utilisation pour, espérons-le approfondir notre compréhension de certaines de ces choses que nous avons apprises. Ça devient vraiment cool aussi une fois que tu l'as fait. Si je le copie-colle, disons dans notre version mobile, disons que je n'aime vraiment pas les fonctionnalités de celle-ci. OK, je vais les changer. Je vais en utiliser un autre. OK ? Mais vous pouvez voir, regardez, obtenir un arrière pour mobile. OK. Le texte s'ajuste, tout est pareil, il est réutilisable et il est bon de voir un autre cas d'utilisation de certaines de ces choses que nous avons apprises Très bien, allons-y. Je vais vous montrer comment tout faire. Bien, pour faire cette combinaison, nous allons le faire sur notre ancien ordinateur de bureau isolé. OK. Nous n'avons pas fait grand-chose sur ce point. Et je vais utiliser le laisser ici juste pour que nous puissions le recréer afin que vous sachiez où je vais. OK, nous allons changer cette boîte de couleur avec une image. Donc, tout d'abord, allumez le réseau. C'est facile Sur un Mac, c'est Control J, G, désolé. OK. PC, je ne me souviens jamais de ce que c'est parce que c'est bien trop difficile. Mais nous nous souvenons tous de cet autre raccourci, OK, command ford slash, d'accord ? Et vous pouvez taper dans la grille. Et il suffit de regarder ici, juste en haut. Très bien, je veux dessiner un rectangle et nous apprenons que les rectangles sont comme des cadres, mais avec des avantages supplémentaires Au lieu d'utiliser l'outil rectangle, je commence souvent par un cadre. OK ? Je vais donc commencer par ce cadre. Je vais en citer peut-être quatre. Donnez-lui un film de fond, utilisez l'un de mes styles. OK, nous allons commencer par celui-ci. Maintenant, je vais désactiver les inconvénients. OK, vous avez remarqué que le raccourci était déjà en quelque sorte préchargé lorsque je suis passé à une commande pour contrôle des barres obliques, parce qu'il mémorise la dernière chose Vous pouvez donc en quelque sorte basculer entre ces éléments. Je viens de taper sur mon clavier. Cela ne fonctionne pas pour tous les raccourcis, mais beaucoup d'entre eux peuvent simplement être activés ou désactivés Très bien, donc nous avons ça, c'est un cadre, disons-le, je vais l'appeler fonction carte. OK ? Maintenant, je veux mettre ce rectangle à l'intérieur. OK, celui-là. Passons à autre chose, reprenez-moi le cadre. Je pourrais utiliser un outil rectangulaire comme simplement utiliser un cadre. OK. Je vais suivre cela à peu près comme ça. Remplis-le. En fait, choisissez une couleur , je vais casser et la passer au noir. Je vais utiliser mon doux raccourci de cinq en haut. Vous voyez, cela fait passer la couche à 50 %. Maintenant, à l'intérieur de ce truc, nous allons appeler ce bloc de texte. Je ne sais pas. Allons chercher le texto. Je le mets à l'intérieur de ce truc et sur le dessus uniquement pour gagner du temps. Parce que souvenez-vous si nous créions un rectangle dans un bloc de texte et que nous essayions ensuite d'ajouter des éléments tels que des contraintes et une mise en page automatique, ce que je veux, d'accord, parce que je veux qu'il soit extensible N'oubliez pas que nous pouvons mettre à jour ce texte. Et elle devient de plus en plus petite. Il le fera de toute façon. Il va le convertir en cadre, donc je pourrais aussi bien commencer par un cadre et y mettre le texte, donc je suis passé à la sélection. Si je clique ici, vous remarquerez qu'il est entré dans ce cadre. Vous pouvez le faire glisser par la suite. Allons nous réconforter. Maintenant, deux ou trois choses. Ce point vient d'apparaître parce que j'ai utilisé le trait d'union, celui-ci, et cela suppose que vous voulez dire un point Il a donc disparu et l'a automatiquement changé. Si le vôtre change et que vous ne le souhaitez pas, vous pouvez désactiver les puces sous le texte. Maintenant, un problème avec l'utilisation ce joli raccourci de 50 %, nous l'avons déjà appris, que ce cadre, le cadre parent à 50 %, fait tout ce qu'il contient. 50 % Ce n'est pas ce que je veux, d'accord ? Parce que c'est le Texas qui est en train d'être détruit. Je vais donc revenir à 100 % Qui se souvient comment revenir à 100 % et à zéro sur son clavier ? OK. Et en fait, juste cette partie, juste le remplissage, pas le trait, juste le remplissage à 50 %. OK, nous sommes un peu plus précis. Nous avons ce cadre, si je commande à nouveau, il ne fonctionne pas tout à fait. Passons à la première étape, faisons en sorte que ce cadre reste de ce côté, d'accord ? Et c'est à ce moment-là que nous examinons les contraintes. Il y a trois grands sujets ici, non ? Il y a des cadres imbriqués, ce que nous avons déjà fait. J'ai donc ce rectangle de cadre extérieur avec ce cadre intérieur, d'autres rectangles avec du texte à l'intérieur. Cette partie est terminée. Nous parlons également de contraintes, et je veux donc que cette histoire de parentalité s' en tienne vraiment à la droite. Maintenant, prenez le cadre parent, enroulez-le. Dans mon cas, je veux probablement que ce soit le bas plutôt que le haut. OK. Parce que je vais redimensionner des mises en page très différentes Je vais donc dire bloc de texte, vous êtes coincé au bas de la page. Maintenant, lorsque vous serez nouveau, vous constaterez qu'il est très difficile de savoir laquelle vous allez finir par choisir. Celui-ci, jouer avec, tester, celui-ci. Je le teste dans l'un d'eux. OK. Ne vous inquiétez donc pas si vous êtes cette personne. C'est ce que tout le monde est. Au bout d'un moment, on s'y habitue. accord ? C'est donc cela qui fait cette partie. La prochaine chose que je veux faire, c'est dire, vous savez, j'en veux deux et la prochaine sera, vous savez, le recyclage. OK, donc je veux que ça s'adapte. Cela n'a donc rien à voir avec les contraintes, cela a à voir avec la mise en page automatique. C'est un peu confus, car nous avons utilisé mise en page automatique pour faire des choses amusantes dans les dernières vidéos. OK, on a ajouté des choses et on les a remplacées. Mais n'oubliez pas que nous avons également utilisé mise en page automatique pour ce bouton qui la mise en page automatique pour ce bouton qui devenait de plus en plus petit. Même fonctionnalité, quelques utilisations différentes. Ajoutons donc une mise en page automatique. Et ça l'a réduit, ce que je vais réparer dans une seconde Mais j'espère que maintenant cela va fonctionner et que cela va se poursuivre parce que le parent est coincé sur la droite. OK, rétablissons à nouveau cet espacement. Maintenant, je vais l'annuler jusqu'à ce que vous puissiez remarquer qu'en gros, ce qu'il veut faire est mettre un espacement uniforme de chaque côté Je vais le faire. Voilà. Supposons donc que vous souhaitiez le conserver. Je ne l' aime pas trop longtemps, mais je voulais vous montrer une petite fonctionnalité supplémentaire pendant que nous sommes ici. D'accord, c'est l'inspection que nous utiliserons plus tard dans le cours. Plus pour tout le monde, petite mise à jour de Figma, ils ont disparu et ont changé les choses Auparavant, on parlait de conception, de prototype et d'inspection. J'allais vous montrer l'inspection, mais ils l'ont déplacée vers ce qui s' appelle maintenant le mode Dev. Mode développement, nous n'allons pas aborder maintenant, nous y reviendrons plus tard dans le cours. C'est un peu plus avancé et nécessite un accès payant à Figma Je vais vous montrer une alternative qui fait exactement ce que nous devions faire sans tous les extras. Si vous voulez suivre cette voie, vous devez la supprimer des brouillons, d'accord Nous sommes actuellement à l'état de brouillon. Transférez-le à l'une de vos équipes payantes , puis le mode démode sera activé et vous pourrez voir l'inspection Je suis presque sûr de ne l'avoir mentionné nulle part ailleurs dans le cours sur l'inspection, mais si vous me voyez cliquer sur Inspecter ici, c'est une option réservée au mode Dev. Maintenant que c'est un forfait payant, comment le contourner ? Ce que je veux faire, c'est vous montrer comment nous pouvons voir les différences. Je l'ai refait très rapidement. Parce que tu peux voir, parce que c'est violet. Maintenant, je veux voir la distance entre le haut et le bas, les marges. OK ? Pour ce faire, cliquons sur l'objet pour lequel nous voulons trouver les informations. Cliquons sur le côté du cadre, il y a le mot confort. Je veux maintenir la touche option enfoncée sur un Mac OlkaPC et regarder ceci Si je déplace simplement ma souris, je ne clique sur rien, je maintiens simplement cette touche enfoncée. Vous êtes sur un PC, maintenez la touche Alt enfoncée. Si vous utilisez un Mac, maintenez l'option enfoncée, déplacez-vous simplement. Vous pouvez voir, regardez, le mot confort en haut et en bas est 15 et 16 à gauche et à droite en haut du cadre. Ce cadre extérieur, vous pouvez voir qu'il en fait 142. Maintenez simplement cette touche enfoncée pour obtenir les mesures. C'est ce que nous voulions et c'est pour cela que nous avions l'habitude d'inspecter. Mais il existe une option simple et pratique comme celle-ci. Le seul truc, c'est que vous devez cliquer sur l'objet pour lequel vous voulez des mesures. Si je veux cliquer sur ce cadre extérieur ici, peux obtenir des mesures. OK, c'est en maintenant la touche Option enfoncée. Je vais maintenant obtenir les mesures du haut vers le cadre. Cliquez sur le texte, ce qui est parfois plus facile dans le panneau des calques, et maintenez la touche facultative enfoncée. Je vais obtenir les mesures depuis le haut du cadre jusqu'au texte. Assurez-vous simplement que vous êtes très déterminé dans ce que vous sélectionnez Si je clique sur ce cadre, regarde ça. Si je maintiens la même touche enfoncée, d'accord, 64 pixels du côté, 51 de ce côté. Voilà. C'est la solution. Mais encore une fois, nous ferons une démonstration plus tard dans le cours. L'autre point, c' est que je vous donne des raccourcis comme cette option Alt. Il suffit de vérifier. Je n'y vois aucun problème, mais quelques raccourcis clavier qui tentent d'internationaliser davantage Figma. Au lieu de simplement utiliser comme je le fais un clavier d'art occidental, ils modifient certains raccourcis. Ils ne sont donc pas aussi universels qu'ils devraient l'être parce que certaines personnes n' ont pas certaines clés. Ce que vous pouvez faire, c'est cliquer sur le point d'interrogation. Accédez aux raccourcis clavier pour celui-ci en particulier, alors que je pense qu' il se trouve sous le curseur. Vous pouvez voir ici la sélection de mesures à deux. C'est ce que nous venons de faire. Vous pouvez voir l'apparence de l'ancienne touche d'option. OK, alors vérifiez le vôtre si vous avez l' impression que votre esprit ne fonctionne pas. Je n'ai pas de touche d'option. Vous devriez avoir une touche d'option. Mais si vous ne le faites pas pour le futur, jetez simplement un œil ici et cliquez sur les raccourcis clavier pour voir si vous pouvez trouver celui que vous recherchez et si vous pouvez trouver celui que vous recherchez que Dan a mentionné. OK, et vous pourriez trouver la différence, d'accord, pour votre Mac Px ou pour votre autre clavier. Bien, une dernière chose n' est qu'un rappel. Je vais entrer ici maintenant et dire, nous allons entrer le rembourrage pour cela ici, d'accord ? Avant, tout était caché ici, mais maintenant c'est agrandi, non ? Je pense l'avoir déjà mentionné dans une mise à jour. OK, mais ce n'est tout simplement pas caché là. Le rembourrage individuel est que si nous voulons différent du k gauche et du k droit, il y en a toujours Mais la version avec laquelle j'ai enregistré ce cours avait en quelque sorte tout à voir avec ces petits points. Mais maintenant, tout est étendu. Regardez un rembourrage horizontal Rembourrage vertical Juste un petit changement. Et je voulais juste te le rappeler parce que je suis déjà là pour mettre à jour la vidéo Très bien, continuez avec le carré jaune dans l'autre vidéo, profitez-en. L'option Auto ne peut être appliquée qu'aux cadres. Passons à ce que nous faisons ? Je ne m'en souviens pas. Ah oui. Automatique. Allons-y. Et il l'a juste sauté dedans et vous vous dites, ne vous inquiétez pas, je pouvais trouver le rembourrage Où est ce rembourrage ? Waouh, il se cache ici. Tu peux en quelque sorte le faire en mode mixte. OK, c'est tout le rembourrage. Celui-ci vous montre les différents. Alors c'était quoi ? 56. Faisons juste 50, 16. Allez. Très bien, alors j'espère que nous allons essayer maintenant. Il s'ajuste, nous pouvons créer plus d'une version. Pour réactiver mes colonnes. Regarde ça. Faisons en sorte qu'une commande D contrôle sur un PC et celle-ci sera recyclée et l'autre sera de base. OK, réutilisable, génial, ajustable. Ensuite, quand je partirai, je pourrai avoir besoin de ces gars pour accéder à ma version mobile. OK. Passez à ça. Je dis que je crée une autre page détaillée du produit parce que j'ai décidé que je n'aimais pas cette mise en page. OK, je vais entrer ici en fait, il suffit de coller l'un d'entre eux. J'en ai trop à essayer. Allumons les grilles pour celui-ci. Même raccourci, j'utilise la commande « barre oblique » ou « control forward slash ou « control forward slash Éteignons-les tous . Bon travail. Aucun d'entre eux ne viendra pour celui-ci, je ne sais pas pourquoi. Alors maintenant, je peux y aller et je peux dire, en fait, je veux que celui-ci soit sur mobile peut-être comme ça. Tu comprends le point ? Je pense que c'est beaucoup de travail. Ce n'est pas beaucoup de travail. Une fois que vous aurez acquis un peu d'expérience, vous savez, ce sera votre voyage. Il y aura un moment où vous passerez une demi-journée à faire en sorte que ce truc fonctionne réellement. Et tu dis que ça n'en vaut pas la peine. Cela m'a pris une demi-journée. Je pourrais alors simplement dessiner des rectangles Et puis il y aura un moment où vous vous direz, en fait, je dois le réutiliser dans un tas de choses différentes. Cela vaut le coup d'y consacrer du temps. OK. Oui, allons-y, changeons les images et rangeons cette partie parce que je veux que ce soit comme au début de cette image intérieure, je vais vous montrer quelque chose Ce problème, pas vraiment un problème, est le cadre extérieur de la carte. OK, je dois dire que je ne veux pas remplir le formulaire ici. Je veux une belle image pour aller un peu vite avec certaines choses. Je ne sais pas, on commence à s'améliorer un peu. Ne va-t-on pas un peu plus vite ? OK. J'ai mon truc, mon image ici, il est extensible, ce qui est génial Le problème, c'est que le cadrage n'est pas correct. OK. Il va donc falloir que je passe de Phil à recadrage. OK ? Et je vais juste faire glisser ce changement vers le bas OK ? Donc ça va en ligne droite. Génial. Le problème, c'est que mon élasticité est un peu réduite Le texte est toujours bon, mais l'image ne s'ajuste pas. Ce n'est qu'un des inconvénients du passage au recadrage. OK. Si je décide d'y aller, comme ça, je dois sélectionner le cadre extérieur. Cliquez sur mon image et allez, Phil Crop, faites-la glisser vers le bas. Il y en a un peu qui se passe. Il y aura peut-être une meilleure solution plus tard dans Figma à l'avenir, mais c'est le genre de solution pour le moment Je vais donc remplacer ces images. OK, donc j'ai changé les images et l'un des autres avantages est, ouah, un autre avantage suffit de lancer un autre niveau Il suffit de lancer un autre niveau dessus pour que si je les sélectionne tous, je pourrais me transformer en sortie automatique. Ce n'est pas ce dont j'ai besoin pour le moment, tu sais, pourrais les réorganiser, jouer avec les ajustements Mais nous allons revenir à la simple vieille sélection intelligente. Donc, en les sélectionnant tous, ils se trouvent tous au bon espacement Vous pourriez utiliser le rangement si ce n'est pas le cas, mais nous pouvons ajuster les espacements et le plus amusant est probablement de les ajuster N'oubliez donc pas de cliquer une fois sur le point , puis de le faire glisser. Besoin d'une nouvelle commande D, contrôlez D sur un PC. Super bien. C'est bon, c'est ça J'espère donc qu'il a été utile de voir Club une autre version fonctionnelle de certaines des choses que nous avons déjà apprises. Peut-être espérez-vous, approfondissez notre compréhension de choses comme les cadres imbriqués, les contraintes et la sortie automatique D'accord ? Que ça va être ça. Je vous verrai dans la prochaine vidéo, mes amis. 65. Ajouter la hauteur automatique de la boîte de texte à la mise en page automatique dans Figma: Bonjour à tous. Dans cette vidéo, nous allons couvrir quelque chose que nous connaissons déjà, appelé mise en page automatique. Nous allons faire ce qu'on appelle une mise en page automatique double. C'est un nom que j'ai inventé. Mais nous allons aussi regarder quelque chose que je n'ai pas inventé, quelque chose appelé hauteur automatique pour les zones de texte. La partie mise en page automatique est ce que nous connaissons déjà. Cela signifie que nous pouvons réorganiser ces choses. Nous pouvons les dupliquer. Nous pouvons jouer avec leur espacement. C'est l'une des mises en page de l'ordre des pixels. Nous allons doubler la mise en page automatique pour que lorsque nous ajustons éléments comme du texte, ajoutez d'autres éléments. Pouvez-vous le voir ? Regardez, il s'étend et pousse les autres à l'extérieur. C'est ce que l'on appelle la hauteur automatique dans une zone de texte. Allons-y, et je vais vous montrer comment y arriver. Pour commencer, je vais dupliquer ce cadre, créer une page d'avis et simplement rassembler les parties de travail. Je vais le faire en mode vitesse. Je vous verrai dans une seconde. Nous sommes en pause ici, et nous venons de commencer. Je ne peux pas accrocher le gris. ajustant vos préréglages, vous pouvez entrer ici, et vous pouvez dire en fait beaucoup trop vert alors, et je veux probablement qu'il soit plus sombre. On y va. Ici, au vert. Maintenant, il est ajusté là et partout où je l'ai utilisé. Où que je l'ai utilisé ailleurs. On y va ne veut pas dire que tu es là. Maintenant, la conception de la vitesse. Nous sommes de retour. Ce [inaudible] a l'air tellement beau. Revenons sur. Vous êtes de retour. C'est ma petite critique. Ce que je veux faire, comme au début, je veux que cela puisse s'étirer de haut en bas et de jouer avec l'espacement. Nous allons faire une double mise en page automatique. Pour faire la mise en page automatique double, nous allons commencer par la hauteur automatique. Nous avons ignoré cela et le précédent. Vous pourriez dire : « Hé, vous ne nous avez pas dit ce qu'il a fait. » Celui-là, Auto Width, nous savons que ça se passe toujours de cette façon. Celle-ci ici, c'est comme une taille fixe. Cela signifie que quand je le dessine, il a une hauteur. Le texte peut s'étendre à l'extérieur, mais c' est la hauteur, il y a une hauteur fixe là-dessus. Ce que nous allons faire, c'est faire une option. Il y a celui-là. C'est une largeur fixe, mais une hauteur automatique. Vous voyez ce qui est cool à ce sujet, ça l'a aspiré jusqu'au fond et signifie simplement que la hauteur va grossir. Vous voyez que la hauteur s'agrandit ? Cela va être pratique car cette boîte bleue va être ce qui pousse le cadre extérieur. En gros, c'est exactement comme nous l'avons fait avec ces choses. Celui-ci pousse vers la gauche et la droite pour qu'il soit épinglé. Nous avons utilisé les contraintes à droite et en bas. Celui-ci va faire quelque chose de légèrement différent. Nous avons besoin que ce cadre parent soit en hauteur automatique, appelons celui-ci Avis. Nous avons besoin de ce parent comme nous l'avons fait auparavant, avec la boîte noire claire et transparente, nous avons dit faire la hauteur automatique et ça a fonctionné. Ça marche, ça va marcher. En fait, voir si ça fonctionne sans rien d'autre, ce gars étreint le contenu. Ma boîte de hauteur automatique, pouvez-vous grandir ? Ça fait, ça marche, le travail fait sauf avec ce genre de choses. Ce que cela dit, c'est que lorsque vous avez plus d'un objet, nous revenons à cette liste. Vous vous souvenez de la liste de navigation que nous avons faite ? Je fais un zoom arrière. Où est cette liste de navigation ? Il est là. Rappelez-vous que nous avons eu deux ou trois choses différentes. Quand on fait une chose, ça fonctionne comme ça. Lorsque nous avons quelques choses, cela finit par essayer de les empiler ou nous pouvons aller à gauche ou à droite et nous sommes géniaux. Nous sommes allés de haut en bas pour celui-ci, mais tous ces objets doivent être un seul groupe, donc je vais défaire. Il y a beaucoup de choses à défaire. Tout ça jusqu'au bout. Fondamentalement, ce que je voulais faire, c'est empiler cette partie et toutes ces choses de haut niveau. Je vais prendre un U et tout ça et en faire une unité. Je pourrais le regrouper. Je pourrais le transformer en cadre. Nous allons le transformer en cadre. Allons-y, tu es un cadre. Une façon légèrement différente de le faire ici dans le panneau Calques, ou vous pouvez cliquer dessus avec le bouton droit ici ou utiliser votre raccourci. Maintenant, il n'y a que deux choses dans cette liste. Il va maintenant passer au cadre parent. Faisons de vous la mise en page automatique, aspirez ça de ce côté là. N'oubliez pas que c'est pour étreindre le contenu comme mon t-shirt. Cette zone de texte ici a juste besoin d'aider à pousser cela si vous avez besoin d'une certaine largeur. Il s'agit toujours de la hauteur flexible ou de la hauteur automatique. Maintenant, si j'ai quelqu'un qui a une très longue critique, ça s'ajuste, plus agréable. Celui-là est vraiment pratique, surtout pour ce type de gros trucs texty boxy. Faisons en sorte qu'il en soit plus d'un. Nous avons déjà fait une mise en page automatique et nous l'avons principalement utilisée pour empiler ces deux choses à l'intérieur. Maintenant, nous allons faire un peu plus d'empilement, donc nous revenons à notre double disposition automatique. Nous avons ce truc ici, c'est le cadre, mais il est en train d'être converti en mise en page automatique, qui monte et descend. Ce que nous allons faire, c'est expliquer que ce conteneur parent en page automatiquement les choses à l'intérieur. Nous allons avoir besoin d'un conteneur parent pour deux d'entre eux. Ces deux-là, les gars de l'intérieur, nous avons besoin d'un cadre autour de l'extérieur et nous pouvons le faire en disant, créons une mise en page automatique. C'est la double disposition automatique que je mentionnais. Cette critique juste ici, disons celle-ci, utilise la mise en page automatique pour empiler ces choses à l'intérieur de celui-ci. Cette mise en page automatique extérieure empile, ces gars qui se trouvent être aussi des mises en page automatiques mais qui n'ont pas à l'être. J'ai celui-là, j'en ai besoin d'un autre. Je vais aller, vous, sélectionnez-le, Commande D. Lorsque vous utilisez la mise en page automatique, le petit point rose apparaît comme il l'a fait, c'est utile. Mais Commande D, Commande D. Regardez à quel point nous sommes bons et les bonnes choses à ce sujet, encore une fois, nous pouvons l'appliquer avec l'espacement. On peut le traîner, on y va. Tapez-le en utilisant 24. Lorsque je les ajuste, copiez-les et collez quelques-uns d'entre eux. Je ne sais pas ce que ça fait. Sélectionnez le texte. Je ne sais pas pourquoi il ne sélectionne pas de texte. Rien ne fonctionne. Je pense qu'il est peut-être gelé. Il arrive que les gens, vôtre gèle beaucoup plus que le mien. C'est comme la première fois que la mienne est gelée. Je vais le fermer et l'ouvrir. Je reviendrai dans une seconde. Nous sommes de retour. Voyons s'il l'a corrigé. Collez, collez, collez. Il fonctionne encore une fois. Nous sommes allés un peu plus loin là-dessus, j'espère encore une fois pour vous aider à expliquer certaines choses fantaisistes que vous voyez à propos de Figma, comme, oh mon Dieu, imaginez si vous pouviez le faire, nous savons comment maintenant. Nous combinons deux choses, il y a une nouvelle hauteur de commande pour la zone de texte, et de plus, nous avons deux couches de mise en page automatique profonde. Il y a une disposition automatique qui fonctionne à l'intérieur de ce cadre, mais il y en a aussi un qui fonctionne à l'extérieur. Je vais appeler celui-ci notre Review Stack. Ce sera tout pour cette vidéo. Je vous verrai dans le prochain. 66. Projet de cours 12 - Design réactif: Bonjour à tous, c'est l'heure de votre projet de classe. J'appelle ça un design réactif. Je veux juste que vous construisiez les trois choses que nous avons construites. Vous l'avez peut-être déjà fait. Il y a un menu mobile, une carte de fonctionnalités et des cartes de révision. En gros, ce que nous avons fait jusqu'ici. Si vous n'avez fait que regarder, nous devons commencer à le faire. Le mobile signifie utiliser celui-ci ici. N'oubliez pas que nous pouvons ajuster ces choses et elles se déplacent. Nous pouvons les dupliquer et ils ajustent leur taille. Réalisez quelque chose comme ça avec les fonctionnalités et le compte du chat domestique. Il n'a pas besoin de ressembler exactement à la mienne, mais juste la même mécanique, cette mise en page automatique. Les cartes de fonctionnalités font cela pour la vue de votre bureau. Jetez un coup d'œil. Ceux-ci ici, rappelez-vous qu'ils restent en bas et se déplacent. Maintenant, c'est à vous de décider. La conception ne doit pas nécessairement ressembler à la mienne, mais je veux cette mécanique où il y a une unité inférieure verrouillée ici. Restez attentivement au mien si vous vous sentez un peu sous confiance, parce que vous pouvez suivre, mais si vous vous sentez courageux, soyez fantaisistes. La dernière chose, c'est les critiques. Ces choses ici. Je veux que vous voyiez si vous pouvez y arriver. Créez-en un et voyez si vous pouvez en créer plusieurs. Maintenant, avec celui-ci, il y a une option. Je n'ai pas besoin de le faire, mais je veux que vous voyiez si vous le pouvez, car à l'heure actuelle, ces derniers sont réactifs. En bas, il est réactif, mais cette zone de texte n'est pas disponible pour le trajet. Je veux que vous voyiez, et que vous voyez si vous pouvez le faire. C'est votre bonus supplémentaire. Vous n'êtes pas obligé de le faire, parce que je ne vous ai pas vraiment montré explicitement, mais bon, j'espère qu'il y aura un peu de choses à vous apprendre à pêcher et que vous serez peut-être en mesure de le résoudre. Cliquez sur tout. Ce que je veux que vous fassiez, c'est si vous le comprenez, informez les gens dans les commentaires pour les personnes qui rencontrent des problèmes, tous les problèmes que vous rencontrez et comment vous les avez surmontés. Aider les autres est souvent le meilleur moyen de se souvenir de ces choses vous-même, alors donnez-lui une fissure et faites simplement les capturer tous. Nous ne pouvons toujours pas ou Figma n'autorise pas les enregistrements de celui-ci. Je vais juste devoir supposer que les captures d'écran sont réactives, mais prenez une capture d'écran de toutes et téléchargez-les dans les commentaires des devoirs du projet. Partagez-les également sur les réseaux sociaux. J'adore voir ce que vous faites et peut-être recevoir des commentaires d'autres personnes. Très bien, projet de classe. Allez-y et je vous verrai dans la vidéo suivante. 67. De beaux effets d'ombre portée et d'ombre portée intérieure dans Figma: Bonjour à tous, dans cette vidéo, nous allons commencer à regarder les effets dans Figma. Maintenant, il suffit de sauter l'ombre portée. Où est l'ombre portée, voilà, ombre portée sur le texte, très excitant. Il se démarque de l'image là-bas. Je vais essayer d'ajouter un peu plus de valeur. Ici, deux ombres tombées sont appliquées à celle-ci. Nous allons regarder des trucs d'ombre intérieure avec deux d'entre eux là-dedans pour des trucs d'interface, voyez ici, il y a un peu de valeur supplémentaire ici, alors sautez avec moi, commençons. Parlons d'abord des ombres tombées. Tout ce qui est sélectionné : polices, boutons , rectangles, cadres et juste ici les effets. Cliquez sur « Plus » par défaut sur Ombre portée, et nous avons une ombre portée. Ce que je trouve avec les ombres portées, c'est que j'essaie d'ajouter un peu plus que simplement, il y a l'ombre portée, pour l'ajuster, cliquez sur la petite « icône » à côté. Pouvez-vous en obtenir un peu plus ? Vous pouvez jouer avec évidemment la transparence, comme à quel point il fait sombre, pouvons-nous revenir en arrière. Maintenant, je trouve que ces bons sont frottés plutôt que de les taper dans des échantillons, X, Y, Flou, Spread , vous pouvez simplement planer au-dessus d'eux et voyez-vous, vous pouvez les faire glisser. Une jolie ombre portée est bonne à zéro et un peu de Y. C'est mon avis. J'utilise également la flèche vers le haut et vers le bas en maintenant la touche Maj. Juste quelque chose de subtil, pas si subtil, juste pour qu'il se détache de l'arrière-plan. Maintenant, n'ayez pas peur, vous pouvez ajouter plus d'une ombre portée. Disons que vous avez une ombre portée de remplissage qui est juste un peu plus grande, pouvez-vous le voir ? Mais c'est plus caprieux. J'ai eu celui-là. Je vais faire en sorte qu'il reste un peu plus loin. Je vais réduire l'opacité à l'aide de ma flèche vers le bas. J'en aurai un qui le soulève en général de l'arrière-plan, mais ensuite un joli petit peu pointu sur le dessus pour que tu puisses en ajouter plus d'un. Cool. Ça va arriver ici, et celui-là, c'est un duplicata de l'original, donc je vais le baisser à deux, le flouter, le faire baisser gentiment et petit, glisser, quelque chose comme ça. Montez un peu, ce bout aura l'air bien alors, peut-être jusqu'à un. Maintenant, les chiffres réels ici vont changer en fonction de la taille de vos objets. Tu sais que c'est vraiment grand, il faut en mettre plus, si c'est assez petit, on met moins. Mais sachez que vous ne pouvez pas en ajouter plus d'un, alors activez-le et désactivez-le. Que pensez-vous ? Le globe oculaire est allumé. C'est juste avec ça, c'est le gros wafty, et c'est juste cette petite lumière de clé supplémentaire ou une petite chose supplémentaire autour de l'extérieur. Évidemment, c'est génial pour les prises, mes prises se détachent de l'arrière-plan. En fait, nous allons l'éteindre. Voyons vous, mon ami, l'image d'arrière-plan, dire que l'exposition et le contraste ne suffisent pas, et que vous devez l'utiliser pour le texte. Le texte, vous pouvez faire un double là-dessus aussi, je suppose que l'effet que vous recherchez généralement est que personne ne s'en aperçoit. Si quelqu'un remarque votre ombre portée, vous êtes allé trop loin. Abaissez-le vers le bas et abaissez-le vers le bas. Maintenant, une chose que je n'ai pas couverte, c'est la propagation, donc j'ai ça. Allons au flou tout de suite. La propagation, c'est jusqu'où elle commence, elle a encore, la terre et six, flou, ce qui est ce petit peu, mais ça commence ici. C'est ça la propagation. Je ne touche pas souvent à la tartinade, vous le pouvez. Est-ce que je l'aime davantage ? Je ne le suis pas. Regardons l'autre cousin de l'ombre portée, l'ombre intérieure. Maintenant, vous êtes comme, quand vous allez utiliser l' ombre intérieure comme la peur de Photoshop, vous êtes comme, je n'utilise jamais l'ombre intérieure. Mais quand il s'agit des options d'interface utilisateur, vous commencez par le début. Je l'ai donné, et je vais le faire jusqu'au maximum. Vous pouvez peut-être aller aussi haut que vous le souhaitez et j'aurai des coins arrondis. Il n'y a que moi. Sur votre clavier, pour qu'un décalage de maintien en cercle soit parfait, revenez à mon outil de sélection, qui est V, Pac-Man sans raison. Passons à la sélection de ma couleur claire. Celui-ci ici, ombre intérieure, et déposez-le, vous n'avez pas beaucoup, moins de deux vidéos dans ce cours sur les effets. L'ombre intérieure, ils pourraient être plus nombreux à l'avenir. J'ai eu l'ombre intérieure. Je vais le laisser par défaut parce que c'est de la cire à souhait. Je vais en ajouter un autre, le changer en ombre intérieure. C'est bon pour les choses d'interface comme celle-ci. Vous pouvez passer des lustres à travailler là-dessus et personne ne s'en apercevra, mais je le remarquerai, vous le remarquerez. Ce que vous faites aussi, c'est que nous sommes allés à gauche, vous pouvez voir que je peux le faire glisser vers le bas et vers la gauche. Vous pouvez réellement obtenir un négatif, regarder ceci, si je le fais glisser de cette façon, pouvez-vous voir au lieu de pousser par la droite, il pousse de la gauche ou de l'opposé. Je peux faire quelque chose comme ça juste pour le remplir. Peut-être que celui-ci ici, je vais aller un peu plus loin, juste pour aller plus loin dans cette direction, le faire paraître plus profondément avec ce flou légèrement différent. Celle-ci peut être avec une ombre portée. Corrigez l'ombre portée, est-ce que je l'aime ? Il faut peut-être y aller comme ça. Deux, deux. Vous pouvez travailler dessus, ce n'est pas génial. Est-ce qu'il y a trop d'ombre intérieure. Vous comprenez l'idée ? Nous allons regarder un peu le nouveau morphisme dans une vidéo séparée parce qu'il est très populaire et on me pose des questions à ce sujet tout le temps. Mais l'ombre intérieure, les ombres tombées, sachez que vous pouvez en ajouter plus d'une. Ils peuvent s'appliquer à peu près n'importe quoi ici. Passons dans la vidéo suivante. 68. Masque de floutage et masque d'arrière-plan et masque d'image dans Figma: Bonjour à tous, nous allons regarder quelques autres choses. Dans Figma, nous allons regarder une image flou, nous allons l'utiliser juste pour simuler un peu de profondeur de champ. Nous examinerons également le fond flou. Nous allons faire ce petit truc qui survole au-dessus, pouvez-vous le voir à travers ? Cela brouille l'arrière-plan pour aider notre modèle à sortir et à être un peu plus distinct de l'arrière-plan. Très bien, montons et apprenons comment les faire. Nous allons commencer par le calque flou et c'est utile. Sélectionnez sur celui-ci, je vais dire Effets et je vais utiliser le calque de flou. Il brouille les couches. Je vais vous montrer quelques cas d'utilisation, allons-y. Ce que je vais faire, passons à notre vue de bureau, et vous avez vu au début et nous allons saisir ces 1,2,3, je vais les dupliquer. Je vais juste les réarranger. Vous attendez là. Il suffit de les redimensionner, rappelez-vous que si vous utilisez votre outil de sélection pour les redimensionner, supposons que je l'agrandisse, cela ne s'agrandit pas. Si vous utilisez votre « K », ou si vous le basculez ici pour l'agrandir et le rendre grand et que tout arrive pour le trajet. Je l'ai fait et je les ai réordonné. C'est comme une page marketing, peut-être l'alternative à la page d'accueil, de toute façon. Vous pouvez sélectionner cette unité entière ou toute cette image, puis aller sur Effets, je vais ajouter un flou de calque. Celui-ci va être légèrement déconcentré et celui-ci va être encore plus déconcentré, vous comprenez l'idée. Allons un peu plus loin. On y va. Ajoutez des ombres portées. Si vous souhaitez ajouter des ombres portées, vous devez les faire en plus du flou du calque. J'ai besoin d'ajouter une ombre portée, ombre portée et une ombre portée. Je peux tous les sélectionner. Est-ce que je peux tous les faire ? Non. Ces deux-là, parce qu'ils ont plusieurs choses sélectionnées dessus, je ne peux pas les ajuster complètement. Vous pouvez le faire s'il y a beaucoup d'entre eux et qu'ils ont tous la même chose, regardez, ils ont tous la même ombre portée sur eux. Vous voyez, vous pouvez tous les ajuster en déplacement. Parce que ces gars ont plusieurs choses qui s'y appliquent, cela ne fonctionne pas. Si vous y arrivez et que vous aimez réellement, je veux copier et coller cela sur différentes séries, donnons un coup de main. Obtenons une ombre portée qui n'est pas vraiment mauvaise. C'est toujours mauvais. Peut-être y a-t-il cette astuce où nous jouons à no man's land que vous connaissez, quand vous cliquez, un endroit bizarre, il suffit d'aller « Copier » sur votre clavier et d'aller à « U » et vous pouvez coller celui-ci. Nous nous sommes retrouvés avec deux d'entre eux. C'est bon. Collez celui-là. Lequel je suis en train de supprimer ? On y va. Ils ont tous des ombres tombantes, toutes belles et floues. Examinons ensuite le flou d'arrière-plan. Il y a deux ou trois choses qui doivent se produire. Vous avez besoin d'un arrière-plan. J'utilise la page de confirmation, je mets une image à partir des fichiers d'exercices appelés map. C'est une carte de ma région. Je viens de capturer ça à partir de Google Maps. Il existe un plug-in pour Google Maps, mettez-le là-dedans et je peux l'ajuster, mais c'est ce dont j'ai besoin pour le moment, et maintenant nous avons besoin de quelque chose en haut. Je vais donc utiliser un rectangle au lieu d'un cadre, pour mélanger les choses, confondre tout le monde. C'est peut-être un cadre. Je vais lui donner un peu de blanc. Cela doit être partiellement transparent. Cela fait partie de l'accord, pas 100 pour cent, mais en partie il peut s'agir de n'importe quelle couleur. Appliquons l'effet ici. Pas l'ombre portée que je veux, le fond flou et rien ne se passe. Cette chose doit être partiellement transparente et je me souviens même de laquelle il s'agit. J'ai un flou d'arrière-plan et je suis presque sûr que c'est le remplissage. Si je fais 50 %, c'est 50 %, mais le fond n'est pas floue, donc pas celui-là. C'est le remplissage de 50 %. On y va. Je peux voir la moitié de cette chose, 50 pour cent, et l'arrière-plan est floue par ce montant. Vous pouvez le faire monter ou descendre, vous permet simplement de faire des choses comme ces modèles contextuels qui sont un peu plus clairs et qui se séparent de l'arrière-plan. Ils ont fière allure en noir ou en blanc. Ce sera ma page de confirmation d'animation rappelez-vous que nous l'avons fait plus tôt. C'est un flou d'arrière-plan. Supposons que ce modèle ait également une ombre portée, et que vous avez passé longtemps et dur à essayer d'obtenir ce parfait, pas 24 seulement deux flou, tout va bien. Peut-être un autre qui est un peu plus gaufré. Il va se répandre un peu, se répandre, s'estomper. Cela peut être zéro, car il sort de toutes les directions et l'opacité va baisser à 10 %. Vous avez un tas de choses qui se passent. Nous allons envisager de créer un style à partir de cela pour que je puisse vous montrer, je vais y arriver, c'est comme tout le reste. Ce sont ces petits points, ajoutez le plus pour en ajouter un, ça va s'appeler mon modèle de flou. On y va. Regardez, sorte que plus tard, lorsque vous créez quelque chose de rectangulaire pour dessiner quelque chose au-dessus de tout le reste, peut-être traversez ça. On peut y aller, ça ne va pas tout faire, mais on va passer à mon modèle de fond de style. Tant que je baisse l'opacité du remplissage de 50 %, vous pouvez voir qu'il fonctionne, en fait je veux être blanc ou noir. Ce sont les effets, il n'y en a que quatre. C'est tout ce dont vous avez besoin, en fait, ce n'est pas tout ce dont vous avez besoin. Nous avons besoin de flare, Figma, où est mon objectif ? Lentille Flare, complète. Passons à la vidéo suivante. 69. Comment concevoir des boutons Ui néomorphiques dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons regarder ces boutons ici. Ils sont neumorphes, c'est le terme utilisé pour décrire ce style d'interface utilisateur poussé. C'est vraiment facile à fabriquer dans Figma. Ils ont l'air jolis. Ils ont des problèmes d'accessibilité, mais nous allons en parler maintenant dans Figma. Avant de commencer, qu'est-ce que le neumorphisme ou la conception neumorphique ? C'est ce look. Il est beau, on dirait que le bouton est enfoncé dans le tissu ou le gel. Il est magnifique. Je me suis précipité et je l'ai édité sur de nombreux designs lorsque je l'ai découvert pour la première fois. Il s'agit essentiellement d'un tas d'ombres tombées, et je vais vous montrer comment y arriver en une seconde. Le problème, c'est qu'il y a beaucoup de gens qui détestent ça, et je suis l'un d'entre eux maintenant. Pourquoi ? Son accessibilité. Ce sont les personnes qui utilisent votre appareil en cas de faible luminosité ou sur un écran défectueux ou qui ont des obstacles visuels, ils ne verront pas votre bouton. Vous voyez celui-là près de l'inscription ? C'est très difficile à voir, très faible contraste. C'est en dehors du cadre de ce cours, mais en tant que concepteur UX, vous devriez regarder l'accessibilité, et surtout pour cette conception d'interface utilisateur de Figma, examinant quelque chose comme les ratios de contraste. Ecrivez cela et soyez ce que vous allez voir après ce cours Figma. En gros, ce que je fais, c'est qu'au bout d'un certain temps, il est assez facile de savoir ce qui va marcher et ce qui ne fonctionne pas. Si je plisse les yeux sur ces boutons, regarde à travers mes cils, ils disparaissent, je ne peux même pas dire où ils sont. Ils fondent juste. C'est mon test d'accessibilité rudimentaire. Ce n'est pas précieux, mais en louchant les yeux, c'est bizarre, toute cette interface a disparu. Vous avez besoin d'une différence vraiment forte, peut-être juste assez forte entre les choses, les boutons et le texte. Vous pouvez le faire. Je vais vous montrer une approche équilibrée ici à Figma. Il y a beaucoup de saveurs différentes de ce neumorphisme. Vous pouvez aller chercher sur Google le neumorphisme et regarder les images Google et trouver des tutoriels sur eux. Je vais vous donner la voie de base, parce que fondamentalement tout ce que j'ai obtenu à partir d'un autre tutoriel, j'ai ce bouton. Cela peut être n'importe quoi, il peut s'agir d'un bouton de texte , d' interface utilisateur, nous allons utiliser cette chose. Je ne m'y suis rien appliqué. Tout ce que je veux faire, c' est essentiellement un tas d'ombres tombantes. Sous Effets, nous savons que nous pouvons ajouter plusieurs ombres portées. J'ai eu mon premier ici, et en gros, il y en a deux en bas à droite et deux en haut à gauche. Les deux en bas à droite sont noirs et les deux en haut à gauche sont blancs. Maintenant, le problème avec l'utilisation du blanc en haut à gauche, est qu'il correspond à la couleur d'arrière-plan. Quoi que vous fassiez, qu'il s'agisse d'une version en mode sombre ou d'un mode clair comme nous le faisons, l'arrière-plan ne peut pas être noir ou blanc uni. Plus le contraste est grand, si vous faites juste un petit indice, voyons comment cela se passe. Allons aimer cet objectif. L'arrière-plan est un peu plus sombre, donc je vais faire deux ombres tombées ici. Je vais partir, peut-être que je vais en faire deux gros. Ces chiffres devront être ajustés en fonction de ce que vous faites. Je vais l'amener à peut-être ici et l'autre peut être là, floue. C'est beau et flou. Il y a un gros flou noir. Je vais en ajouter un autre. Il y a donc mon gros Waft Black en bas. Celui-ci sera un titre 1, donc peut-être un et un, et le flou sera peut-être deux. Vous pouvez voir qu'il y ajoute cette profondeur. Nous l'avons déjà fait avant, deux ombres tombées. Maintenant, nous devons en ajouter deux autres. Celui-là, il l'ajoute au sommet. C'est difficile à savoir, on ne peut pas les renommer, donc ça devient un peu délicat, il faut qu'il soit blanc et qu'il faut qu'il soit négatif. Nous devons donc aller de cette façon, vous partez. Nous en avons déjà une idée. Je vais en faire un petit. Alors, quoi ? Moins 2, moins 2, baissez le flou à deux. On y arrive, non ? Nous en ajouterons un autre. C'est en haut, passe au blanc. Par défaut, il sera blanc à 100 %. Nous allons le tonifier dans une seconde, et celui-ci sera de nouveau à gauche, haut, et peut-être que je vais augmenter un peu le flou. C'est cool. C'est ça. Voici mon tutoriel, et je vais peut-être réduire l'opacité de cela, et il s'agit également de ce retour sur le contraste. Allons-y un peu plus sombre. Maintenant, c'est pire, donc c'est un équilibre. Permettez-moi de réduire l'opacité de ces dernières, 20 %. Celle-ci ici, faites-le descendre à 40 %. Je suppose qu'ils regardent le document là-bas. Je pense que c'est la plus grosse, qui est la plus huppée. Je ne sais pas pourquoi j'utilise le mot « wafty ». J'ai eu ça de Sarah Parkinson, elle disait des gars wafty. Regardez ça, est-ce que ça a l'air neumorphe ? Quoi qu'il en soit, j'aime ça parce qu'il y a toujours le contraste. J'ai encore assez de contraste, mais j'en ai aussi ajouté un peu. Maintenant, permettez-moi de vous montrer rapidement qu'il est différent selon les autres. Ces paramètres que je viens de vous montrer, c'est toujours comme une grande ombre, une petite ombre que vous avez faite ici, noire, les deux là-haut, blanches. Mais si je change la couleur d'arrière-plan, allons-y. Faisons une mauvaise chose. Cela va paraître cool, mais le rapport de contraste ne sera probablement pas assez élevé. Alors, faisons-le. Vous allez avoir la même couleur que l'arrière-plan, voilà, et cela apparaît, cela ne fonctionne pas. Nous pouvons devoir aller beaucoup plus bas là-dessus, donc peut-être 5, 10, 5. Vous voyez, cela dépendra de ce que vous faites, de quelles couleurs. Ce n'est pas un paramètre spécifique. Si vous suivez le tutoriel de quelqu'un et que le vôtre n'a pas l'air aussi étonnant et neumorphe, vous devrez peut-être ajuster les choses pour qu'elles s'adaptent. Je ne sais pas. Que pensez-vous ? Si cela vous intéresse, google neumorphic design Figma. Il y a un tas de choses dans la communauté que vous pourrez simplement télécharger et commencer à utiliser. C'est neumorphe, et vous pouvez simplement copier et coller, commencer à les utiliser et simplement regarder un peu. Si vous me dites : « Oh, ça a l'air cool, voyez comment Dan a fait ça. Ils ne vont pas se frayer un chemin à travers ça. Vous l'avez vu là. Où en est un autre bon ? Je ne sais pas. Il y en a un tas différents. Trouvez le look que vous aimez. Notez quelle éthique a été appliquée, quelle est l'ampleur et la durée de leur prolongation, mais soyez prudent. Il y a des moments où il est juste agréable de faire de belles choses. Mais si vous voulez que cela soit utilisable et pratique dans un sens réel, ce bouton ne réussira aucun test d' accessibilité et rendra la tâche difficile pour vos utilisateurs. Mais si vous êtes toujours excité par ça comme je l'étais quand je l'ai vu pour la première fois, devenez fou. Mettez le neumorphisme partout. Préparez-vous le système, comme apprendre la lumière de l'objectif lorsque vous apprenez Photoshop pour la première fois, mettez tout en place, mais vous réalisez que tout a besoin d'une fusée d'objectif. C'est ça. Je vous verrai dans la vidéo suivante. 70. Projet de cours - Effets: C'est l'heure du projet de classe. Il s'agit du projet Effects. Je veux que vous examiniez et appliquiez au moins un des quatre effets différents à différentes parties de votre InDesign, puis prenez une capture d'écran et téléchargez-la. Tant les affections/projets que sur les réseaux sociaux. J'aimerais bien voir ce que vous avez fait. Même si vous décidez de ne pas utiliser de flou d' arrière-plan ou de flou de calque dans votre conception finale, appliquez-le ici maintenant, pratiquez-le, utilisez-le. Allez chercher d'autres tutoriels sur la façon de faire des flous de calque et flous d' arrière-plan pour voir si vous pourriez trouver des cas d'utilisation plus intéressants. Expérience. Dans ce même ordre d'idées, je veux que vous réalisiez l'un des dessins neumorphiques. Il peut s'agir d'un bouton, il peut s'agir d'une interface juste pour s'entraîner principalement à utiliser les effets de Figma. Même si vous décidez que je suis contre, je suis l'une des personnes sur la ligne de piquetage, dites non au design neumorphique, c'est bon. Je veux juste que vous le pratiquiez parce qu'il peut être joli. Allez. Si vous le faites également, n'utilisez pas seulement mes paramètres avec deux ombres à gauche et à droite, haut et en bas, l'une est blanche, l'autre est noire, allez voir d'autres tutoriels, les versions des autres, venez avec le vôtre, c'est peut-être un accident vasculaire cérébral. Jetez un coup d'œil comme : « Je veux essayer de copier celui-ci ou celui-ci. » Trouvez des tutoriels, donnez-y un coup de main, prenez une capture d'écran, téléchargez-la. J'aimerais bien voir ce que vous faites. Si vous suivez le tutoriel de quelqu'un d'autre, lorsque vous le partagez comme disons sur les réseaux sociaux, assurez-vous de partager le lien vers le tutoriel pour aider d'autres personnes. Ils se disent peut-être : « Mec, c'est génial. Comment l'avez-vous fait ? » Parce que vous allez l'obtenir et expliquer si vous l'avez fait vous-même, peut-être expliquer les paramètres, peut-être en faire une capture d'écran. Si vous avez commencé avec quelqu'un d'autre et que vous faisiez des ajustements, un lien vers le tutoriel serait peut-être également utile. Je ne sais pas pourquoi nous sommes de retour ici, mais nous le sommes. Effects, allez, pratiquez-les. J'ai hâte de voir ce que vous faites. 71. Comment enregistrer localement et enregistrer l'historique dans Figma: Bonjour à tous. Dans cette vidéo, nous allons examiner l'enregistrement local sur votre machine et l'historique des sauvegardes intégré à Figma. Ce que vous avez probablement réalisé, c'est que Figma n'a pas vraiment besoin d'être sauvé. Il est basé sur le cloud. Qu'est-ce que c'est basé sur le cloud ? Cela signifie que même si j'utilise ma version de bureau, il enregistre dans le Cloud, enregistre des dossiers en ligne et ça marche tout le temps. Nous n'avions pas besoin d'effectuer une sauvegarde correcte des fichiers. n'y a pas de Save comme normal. Il existe une copie Enregistrer une copie locale. Une copie locale signifie simplement que, au lieu de cette jolie version en ligne, je vais enregistrer un fichier sur mon bureau, ce qui est parfois juste que j'ai l'impression d'avoir besoin de le faire, envoyer par e-mail à quelqu'un, de l'archiver. Mais normalement, vous le partagiez simplement avec quelqu'un. Mais il suffit d'enregistrer une copie locale. Tout ce que cela fait, c'est de vous donner quelque chose que vous pouvez, essentiellement une version téléchargeable et c'est un point fig. Enregistrez-le sur votre bureau, envoyez-le par e-mail aux utilisateurs, tout sera inclus. Lorsque je l'ouvre dans Figma, il le convertit et le place sur leurs documents Cloud et une partie de leur espace de travail Figma. C'est comme ça qu'on peut le faire localement. L'autre est l'historique des versions. Supposons que vous arriviez à un point maintenant parce que si vous êtes sur le plan gratuit, vous obtenez 30 jours de retour en arrière de l'histoire. Il est toujours en train de l'enregistrer. Vous pouvez le trouver de deux façons. Jetons un coup d'œil à ce long chemin. Historique de division enregistré, nous allons simplement afficher l'historique des versions. apparaît ici, et il vous montre toutes les choses que vous avez faites. Gratuit, cela permettra d'économiser jusqu'à 30 jours avec les choses. Vous pouvez voir qu'il y a eu deux sauvegardes automatiques là-dedans. Revenons à quelques-uns d'entre eux, revenons à cette sauvegarde automatique. Cliquons sur celui-ci. C'était loin en arrière ? Gardez un œil là-dessus. Ouah, le pot de maison en feu. Je peux y revenir et le voir. Écoutez, c'est un énorme défait, et bien ces histoires sont sauvées. Pour la version gratuite de Figma pour le moment, c'est 30 jours. Vous pouvez obtenir un nombre illimité si vous passez à payant. C'est l'un des parcs. Disons que tu veux retourner vers lui que tu aimes, mec, j'ai détesté tout ce que j'ai fait jusqu'ici. Je veux y revenir. Vous pouvez cliquer sur cette petite ligne pointillée ici et dire restaurer cette version, et elle remontera jusqu'au bout. Mais soyez prudent parce que vous vous débarrassez de toutes ces choses futures. En fait, avant de passer à autre chose, on sait pas quoi faire maintenant parce qu'il n'y a qu'une vue, faut appuyer sur ce bouton « Terminé » pour revenir là où vous étiez. Je vais vous montrer l'historique des versions. Disons que j'ai cassé ce truc. On y va. Je le casse et je suis comme, mec, j'aimerais pouvoir y retourner. Je peux le faire. Revenons à l'une de nos versions. Je n'utilise pas cette méthode. Il est facile de ne rien sélectionner et de voir cette petite flèche ici et c'est l'historique de vos versions. Est-ce plus rapide ? Je ne sais pas. Encore là où je vais. Je vais ici et je peux revenir à notre version. Je peux aussi cliquer sur « Annuler ». Cela fonctionne totalement. Appuyez sur « Annuler ». Nous allons commander Z. Je pense que c'est ici sur PC annuler. Vous pouvez le faire, mais ces sauvegardes automatiques sont comme des morceaux plus gros, de grandes choses se sont produites. Si je recule et que je vous dis et que maintenant restaurer cette version, ne sauvegarde pas une langue différente, lit la sortie. Encore une fois, vous devez cliquer sur « Terminé ». Maintenant, je suis de retour là où j'étais dans cette histoire et je surpasse tout ce que j'ai fait à l'avenir, c'est très bien. Ce que j'aime faire, c'est en fait les nommer. Ce que vous auriez vu à l'esprit que vous n'avez pas dans le vôtre, c'est tous les noms de ces CLES. C'est pour moi et mes tutoriels, mais vous pouvez également les utiliser pour votre travail. En gros, quand j'ai fini quelque chose, j'aime bien le nommer. Disons que je finis cette vidéo ici. Cette vidéo s'appelle comment enregistrer localement. Je vais donc en plus et je veux nommer celui-ci. Vous pouvez ajouter plus de description ici, mais ça sauve car plus tard, je peux y aller, c'est là que j'en suis, plutôt que de deviner, était-ce il y a trois heures, était-ce il y a trois jours ? C'est pourquoi. Vous pouvez l'utiliser légèrement différemment. Vous êtes peut-être à une minute de Doug ou de changements à l'interface utilisateur ou à quelque chose d'autre important pour vous-même et vous pouvez y revenir si nécessaire. Une autre chose que vous pourriez faire est de le dupliquer car si je recule et que je commence à travailler, j'efface ce que j'aurais déjà fait. Cela n'a pas de sens, n'est-ce pas, Dan ? Allons dans l'historique des versions. Disons, d'accord, je suis ici et que je veux y revenir, mais je veux aussi conserver cette version. Je ne veux pas le remplacer. Ce que vous pouvez faire, c'est que vous pouvez cliquer avec le bouton droit de la souris. Trouvons un peu plus tôt, masquant et recadrant des images. N'oubliez pas qu'à l'époque, c'est dupliqué. Tout ce qu'il fait, c'est, pouvez-vous voir qu'il est dupliqué dans vos fichiers ? Ouvrons-le. Il en a fait une copie à ce moment-là. Jetons un coup d'œil à ce que nous faisons. Oui, tu te souviens de cette partie du cours ? Maintenant, si je retourne chez moi ou que vous devrez peut-être revenir ici et revenir aux fichiers et aux gouttes, regardez, j'ai une autre version. Je vais devoir le renommer parce que ça va être vraiment déroutant. Voici ma vidéo d'images de masquage. Il s'agit d'un document Figma distinct à ce stade. Est-ce que tout cela a du sens ? Cela grandit sur moi, ce travail en ligne, le travail basé sur le cloud parce que cela signifie je peux sauter sur n'importe quel ordinateur et tous mes fichiers sont là, connecter à Figma, utiliser la version du navigateur. Vous devez vous rappeler quand vous l'utilisez, que lorsque vous arrivez à votre point quand vous avez fini, super, pourquoi ne puis-je rien faire ? Cliquez sur « Terminé ». C'est ça. Sauvegarder des histoires ou des choses formidables dans Figma. 72. Quels sont les composants dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons examiner un composant. Qu'est-ce que c'est ? Pourquoi est-ce utile ? La version courte est que vous avez un maître et une instance, ce maître peut contrôler tous ses petits enfants qui sont appelés instances, mais les petits enfants peuvent faire des choses différentes. Vous pouvez voir qu'il est vert, il y a un texte différent. Nous pouvons créer un composant maître, faire quelques petits remplacements, ils se sentent tous uniques, mais quand nous faisons une modification audacieuse, ils deviennent tous audacieux, super utiles. Jetons un coup d'œil à la façon de créer un composant. Parlons des composants. Que sont les composants ? Ce sont des objets réutilisables. J'ai plein d'avantages, commençons par un joli exemple simple. J'ai ce bouton ici, il peut s'agir d'un rectangle, vous pouvez faire n'importe quoi dans un composant. Je vais utiliser ce bouton car je veux l'utiliser plus d'une fois. Parce que dès que je dois aller le trouver et le copier et le coller, je vais donc le créer dans ce qu'on appelle un composant maître. Sélectionnez-y. C'est ici, ça s'appelle bouton, cliquez sur ce bouton ici. Il est écrit Créer un composant, boom. Qu'est-ce qui a changé ? Très peu, sauf que l'icône a changé comme annuler, refaire. Il s'est transformé en ce petit truc. Vous verrez les composants partout, et nous commencerons à les utiliser un peu maintenant, puis nous les utiliserons, vous trouverez que tout est un composant. Pourquoi dis-tu ? C'est parce qu'il s'ajoute à mon panneau de ressources, ce qui est utile, donc nous l'avions fait exclusivement avec des couches. Allons dans Actifs, et jetons un coup d'œil sur notre page de paiement, il y a mon petit bouton. Facilite leur réutilisation. bas, je suis en fait, je ne veux pas celui-ci, je veux ce bouton ici pour pouvoir cliquer sur le maintien et le faire glisser vers l'extérieur. Il s'agit d'une instance de mon composant principal. Mon maître est l'original ici. Ce type est le chef de toutes les instances. Disons que j'ai créé celui-ci et que je ne veux pas les supprimer. Ils m'ont mis du temps à traîner. J'ai celui-là, copier-coller. J'en ai trois. Ces instances proviennent de celle d'origine. Pourquoi ? C'est le CO, est-ce que ce monstre est ici ? Si je suis dans celui-ci, si je vais à l'intérieur, je vais donc revenir au panneau de mes calques, double-cliquez dessus pour aller à l'intérieur. Ce que je cherche à faire, c'est peut-être changer certaines choses. Je dois peut-être en faire une taille différente. Écoutez, ils sont tous connectés. C'est le pouvoir d'avoir des composants, le maître et l'instance, ou le parent et l'enfant. C'est ce qu'on appelle la masse, la version principale et les premières versions de Figma. Vous m'entendrez appeler ça principal un peu par accident, et c'est maintenant le maître. Même nom différent. Cool. C'est un avantage. Un autre avantage est que vous pouvez réellement faire quelques variations sur ces derniers. Vous pouvez dire en fait celui-là, je vais changer cette couleur. génial, c'est que je peux faire de légères amines à mes instances, quelques variations là-dessus. Mais regardez ça, il est toujours contrôlé pour que je puisse tout rendre un peu individuel, mais contrôler certaines des grandes choses comme les tailles et cette échelle. Je peux entrer dans la police ici et la changer pour qu'elle soit légère. Vous voyez qu'ils sont tous légers. Tu te dis : « Oh, c'est cool. » Que se passe-t-il si j'ai besoin de ce bouton pour dire non pas acheter mais supprimer ? Les instances peuvent comporter des parties uniques. Couleur, j'ai changé le texte, mais il y a certaines parties que le maître contrôlera. Il est plutôt bien mis en œuvre ici dans Figma. Disons que vous êtes ici dans votre dossier et que je dois le réinitialiser. Je veux revenir en arrière pour être comme le maître, je peux cliquer dessus avec le bouton droit et dire, allons réinitialiser tous les remplacements. Remplace ce que nous faisons à ces instances, nous en remplaçons certaines comme si nous avons créé un rose fuchsia rose, mais vous pouvez le réinitialiser. Souvent, vous perdrez le contrôle de la même chose, placement avec le titre est un maître. Je peux cliquer dessus avec le bouton droit de la souris et dire : « En fait, composant principal, allez à celui-ci pour moi. » Eh bien, voilà, c'est le principal, et maintenant je peux faire mes ajustements. Je dois m'en débarrasser, autour des coins, 0, 0, 0, 0. Vous pouvez les voir tous venir pour le trajet, mais celui-ci ici, en fait, je veux que celui-ci ait quelques virages, 10, 10, 10. En tapant le mauvais, accrochez-vous, 10. J'ai ajouté dans les coins, donc j'ai eu des remplacements appliqués à cela. Cool. Nous couvrirons un peu plus dans un peu, mais en gros, tout devient un composant comme si c'était un cadre. Vous commencez par un cadre. Eh bien, la bonne qualité du cadre, puis finit par devenir un composant. Comme ce logo ici, soyez génial, c'est un cadre, je vais le transformer en composant. Pourquoi ? Parce que je veux que ce logo apparaisse dans mon panneau de ressources. Sur la page de paiement, il est là. Je peux accéder à mon nouveau document et je me dis : « D'accord. Allons sur nos pages. Ouvrons mon bureau », et je me dis : « J'ai besoin de ce logo. Où pourrait-il être ? » Les atouts, c'est là. Regardez-moi ça. Dans ce cas, je ne le changerai peut-être jamais, mais je pourrais le faire. Cela signifie qu'il peut revenir à l'original. Ce qui va se passer, c'est regarder ça, parce que je suis sur une autre page, je vais voir des calques ici, un sur une autre page. Je vais cliquer avec le bouton droit de la souris et dire revenir à mon composant principal, et il reviendra à la page mobile que nous avons récupérée à cet original. L'autre chose que je n'ai pas mentionnée, c'est que le composant principal ressemble à ça. C'est le docteur en forme de diamant à quatre. Si je reviens à ma version de bureau, vous voyez que c'est le même nom, mais il a ce single pas un carré de diamant sur le côté mais il est creux, ce sont les instances. L'autre façon de le dire, c'est de jeter un coup d'œil. Revenons à notre vue mobile. Maintenant, pour le moment, nous avons la nôtre sur une page, mais si je le fais glisser dans le no man's land, vous verrez à nouveau cette icône. Vous le verrez pas mal. C'est mon maître, et faisons glisser une instance. Avant de faire glisser une instance à partir d'ici, elle n'a pas toutes ces choses fantaisies avec les diamants, vous pouvez simplement dupliquer cela, et ce que vous avez fait, c'est que vous n'avez pas fait aux maîtres, vous avez fait un instance. Vous pouvez dire mon panneau de calques, vous voyez là, juste un petit diamant. Original, le maître, le principal, le parent, puis l'instance basée sur cela. Vous pourriez vous retrouver avec 100 instances dans un seul maître. Passons en revue d'autres avantages pour les composants. 73. Mise à jour, modification et réinitialisation de vos composants: Bonjour à tous. Dans cette vidéo, nous allons examiner la mise à jour, modification, la réinitialisation, la poussée des remplacements. Oui, toutes les bonnes choses à faire avec les composants et leurs instances, plus le raccourci doux. Prêt ? Mode lumière, mode sombre. Allons-y. Regardons, nous avons ici cette chose que nous avons faite plus tôt. Je veux le transformer en composant, car je veux l'utiliser dans différentes choses, et je veux que ce soit un maître. Sélectionnez-le, faites-en un composant. Super. Il peut descendre et juste pour qu'il puisse être là. Nous avons maintenant besoin d'une instance. Nous pouvons soit Alt en faire glisser un, soit aller dans le panneau de mes ressources, savoir où il se trouve, le voilà, le faire glisser vers l'extérieur. Nous savons que c'est une instance, nous nous en souvenons, car dans la dernière instance de panneau, il y a ce petit type de diamant unique, plusieurs diamants remplis pour le maître. Nous savons que nous pouvons choisir là-dessus et dire que je trouve réellement le composant principal. Je peux y aller et faire un ajustement. Disons que cela doit être audacieux maintenant. audacieux. Les instances sont mises à jour. Nous savons comment mettre à jour cela. C'est facile. Nous savons que nous pouvons nous pencher sur ce cas particulier, dans ce cas particulier. Je peux y aller et dire où est ce cadre ? Celui-ci s'appelle Stephen Butler. Vous l'avez probablement déjà croisé. Il est génial. Exprimez Stephen. Nous pouvons demander à nos instances de faire des petites choses. Ils sont appelés substituts du maître, mais nous pouvons également repousser. Disons que nous oublions que nous travaillons là-dessus. Nous sommes comme, oui, c'était sur une autre page et un autre document. J'en ai fini ici. Je suis comme, puis-je ajuster cela, puis-je y aller, et nous avons décidé que tous ces styles, nous n'aimons pas les coins arrondis. Je maintiens le quart de travail pour les sélectionner tous. Je vais dire que les parties prenantes reviennent et ont dit qu'il n'y a pas de virages arrondis. Nous allons passer à zéro. Je dois avoir six bouts pointus, super. En fait, je le veux. Vous réalisez que vous en traînez un autre, vous êtes comme si je vais aller dans mes affaires, il y une autre que vous aimez, attendez que celles-ci soient mises à jour. Vous pouvez revenir à l'original. Laissons ces autres instances. Il y a mon maître qui se cache là-haut. Ce type que je suis comme en fait, pouvons-nous repousser les remplacements à leur maître ? Vous pouvez le faire. Nous allons le sélectionner. Nous pouvons aller à notre composant principal et dire pousser les remplacements au composant principal. Vous remarquez que l'une est mise à jour et que toutes les autres instances le font si vous travaillez sur une chose particulière que vous n'avez pas à trouver potentiellement le maître, vous pouvez simplement ajuster l'instance et repousser. Une autre chose si vous décidez d'aller jusqu'au bout, nous avons en quelque sorte couvert cela, je les mets tous dans une seule vidéo pour la prospérité. Vous décidez de faire quelques remplacements, et vous êtes comme si c'est la bonne couleur ? Vous pouvez cliquer avec le bouton droit de la souris et dire que nous allons effacer les remplacements. Je ne peux pas le voir. Il réinitialise tous les remplacements. Il y a une autre façon de le faire ici. Pouvez-vous voir cette petite icône, réinitialiser tous les remplacements ? Il reviendra en quelque sorte à ce design original. Faisons quelques flèches sur cette page, je veux vous montrer autre chose. Je vais juste utiliser la flèche. Donnez-lui une couleur sans raison, je ne peux pas la voir. Nous allons réduire, c'est ma flèche droite. Je vais vers la flèche droite, je vais faire un exemple. Maintenant, le raccourci est, donc j'en veux deux. Je veux une flèche gauche et une flèche droite pour ma conception d'interface utilisateur sur deux de ces choses, et il va y avoir des cas où j'en ai besoin pour pointer vers la droite, gauche que vous pourriez avoir de haut en bas, peut-être allumé ou désactivé, quoi que ce soit. Vous pouvez en fait sélectionner plus d'une chose et aller jusqu'ici et dire, pas seulement créer un composant, si vous avez sélectionné plusieurs éléments, cette option ici crée plusieurs composants comme ça. Donc, dans mes actifs, vous pouvez voir que j'en ai deux en une seule fois. Si vous avez dessiné un tas de boutons et que vous voulez qu'ils soient tous, vous n'avez pas à les faire individuellement, il suffit de les sélectionner tous et de dire créer plusieurs composants. J'ai ces deux-là, et disons dans ce design ici pour quelque raison que ce soit que j'ai besoin d'une flèche, que vous êtes comme super travailler, travailler, travailler, travailler. C'est la mauvaise flèche. Je peux faire deux choses. Je peux dire que vous mon ami peut aller ici, et je ne veux pas que tu sois flèche 1, je veux que tu sois flèche deux. Vous y allez et vous les éteignez. Vous pouvez voir que ce sera bon pour les icônes. Il se peut que vous utilisiez l'icône d'accueil et que vous souhaitiez la basculer vers l'autre icône, l'icône de partage. Il y a un moyen plus rapide, donc j'ai notre flèche gauche ici. Vous pouvez faire glisser ceci en maintenant la touche Option sur un Mac, touche Alt sur un PC, il suffit de le vider près d'être au-dessus et il le bascule automatiquement. Il se peut que nous ayons deux versions de cela. Bon point. Je veux deux versions, donc c'est comme une version légère du logo, je veux en faire une version sombre. Pour le moment, c'est une instance, je veux casser l'instance. Je veux créer un nouveau composant comme une version sombre. Je ne veux pas que ce soit une instance qui le remplace. En fait, je veux un composant complètement frais pour pouvoir cliquer dessus avec le bouton droit de la souris et dire détacher cette instance. C'est donc le retour à l'ancien logo habituel. C'est un peu comme le casser même si c' est ce que vous voulez faire, vous venez de casser. Ce n'est plus un composant. n'y a rien de tel lié à quoi que ce soit d'autre. Joyeux jours. Mais disons maintenant que, bien que nous ayons envie d'entrer et de changer tout cela, c'est le cadre d'arrière-plan. Allons le faire au texte. Nous voulons le remplacer par une version sombre. Je l'ai détaché. Maintenant, je vais en faire un composant en tant que panneau. J'ai une version claire et sombre. J'ai mes versions claires et sombres. Faisons une nouvelle page. Faisons cela, par exemple, je veux attraper mon outil de cadre et cliquer simplement une fois que je suis arrivé à l'outil Frame, allons trouver l'iPhone huit. Nous avons un design. Nous avons utilisé la version sombre de notre logo. Ça a l'air bien, parfait. Ensuite, nous créons une autre version et l'arrière-plan utilise une sorte de couleur foncée. Je peux entrer ici et vous dire et maintenir ma touche Option enfoncée sur un Mac, touche Alt sur un PC, et je vais juste changer ces deux-là. Vous pouvez le changer avec n'importe quoi. Si vous avez besoin d'être étroit maintenant, ça marchera. Vous pouvez également les changer ici. N'oubliez pas le logo. Maintenant, cette chose ici, c'est un peu délicat comme les sushis, si vous n'avez pas bien nommé vos différentes choses. Souvent, c'est facile, surtout si vous avez nommé vos calques juste pour effectuer une recherche. Logo, et ça va se réduire aux essais que j'ai nommés logo. Annuler. Très bien, c'est comment mettre à jour, modifier, réinitialiser vos composants. Une chose en fait avant que je parte, c'est que ce changement ne fonctionne pas avec les composants principaux. Il s'agit d'un élément principal. Comment puis-je le savoir ? Il y a ce petit truc de star là-bas, et je le sais parce que si je vais bien, je vais vous changer pour la version légère et maintenir ma touche douce enfoncée, ça ne marche pas. Les maîtres sont spéciaux, ils ont quelques choses supplémentaires ici. Faisons un exemple de cela. L'instance a très peu de choses. Vous pouvez faire quelques trucs ici, mais celui-ci que vous voyez contient des choses comme si je veux ajouter une description. C'est mon logo en mode sombre. Vous pouvez ajouter un lien de document lorsque vous êtes un peu plus avancé, et disons que c'est ici. Avec un peu plus, vous devrez peut-être créer comme un document de page Web ou une spécification de conception, ou peut-être une documentation du système de conception à expliquer comme si c'est ce rembourrage, ne changez pas cela lorsque vous le faites dans ce cas, comme beaucoup plus de détails, vous pouvez ajouter une URL dans, où elle se trouve. Il suffit de copier-coller l'URL. Maintenant, c'est la fin. Je vous verrai dans la prochaine vidéo. 74. Les composants principaux ne peuvent pas être annulés dans Figma: Bonjour, là. Dans cette vidéo, nous allons voir pourquoi vous ne pouvez pas tuer un composant principal dans Figma. Eh bien, c'est difficile à faire de toute façon, laissez-moi vous montrer ce que je veux dire. Nous allons arrêter de l'appeler, de le tuer et appelons-le supprimer. Je vais créer ce top nav en tant que composant. Pas plusieurs composants, mais un seul gros composant entier. Je vais appeler ça un « Top Nav ». C'est donc le maître. Mettons-le là-bas et reprenons une instance de lui là-dessus. Mais disons plus tard que j'oublie, je me dis qu'est-ce que c'est, je n'ai pas besoin de ça. Supprimez-le. En fait, il m'affiche le panneau des ressources, donc il y a mon composant principal dans le panneau des ressources, mais disons que je clique dessus et que je le supprime. Vous pouvez le voir supprimé d'ici aussi ? Regarder la suppression. Vous êtes comme, Oh non, c'est parti, mais vous ne pouvez pas supprimer un composant principal, c'est difficile. Ce que vous pouvez faire, c'est que tant que vous en avez au moins une instance, vous pouvez cliquer avec le bouton droit sur ces instances. Normalement, cela dit aller au composant principal, mais maintenant il est dit que je ne peux pas les trouver, puis-je les restaurer ? Il a dit : « Oui, s'il vous plaît. » Il revient en arrière. Il y a un juste retour où il était. Supprimez-le pour toujours, si vous le supprimez, lui et son instance. Là, en fait, il est probablement parti. Mais tant que vous avez au moins une instance qui regarde autour de vous, vous pouvez revenir à ce composant principal. Maintenant, un autre niveau est que nous utilisons un maître dans le même fichier de conception. Supposons que nous prenions un maître ou une instance à partir d'un autre fichier de conception. Je vais trouver quelque chose à partir de mes brouillons. Cela pourrait provenir de la communauté, quelque chose que quelqu'un a partagé de vous. Je vais l'utiliser, c'est quelque chose que nous avons utilisé plus tôt dans le cours. C'est de la communauté et je vais aller voir les actifs, qui sont au-delà des composantes, et ce que je veux faire, c'est que je veux, ils sont partout. Je veux le truc de recherche. Disons que je veux ce petit chercheur. J'ai traîné une instance et je la copie. Je ne veux pas utiliser ça sur le mien. Normalement, vous ne le faites pas exprès. Tu te copies accidentellement comme ça, je vais prendre tout ça et m'approprier, voler, parce que c'est bon et bien aménagé et ça va dire un peu de temps. C'est l'une des choses charmantes de cette industrie UWix et Figma en particulier, il y a beaucoup de choses dans cette communauté que nous pouvons utiliser. Mais disons que nous le faisons exprès, que nous copions cela et par exemple, cela doit être un exemple pour que cela fonctionne parce que ce que je veux vous montrer, c'est ce qui est arrivé à notre panneau des actifs. Il y a une seconde, si je défais, nous n'avions que des composants locaux. Cela signifie que les maîtres sont dans ce document quelque part, mais si je colle une instance de celle de quelqu'un d'autre, nous obtenons cette nouvelle chose. Super, Nice. On utilise cette chose dans ce fichier. C'est un exemple, comment puis-je connaître les couches ? Ou est-ce leur petit diamant ? C'est arrivé ce qui est cool mais où est l'original ? Où est le maître ? En fait, nous pouvons y revenir comme avant. Accédez au composant principal. C'est un langage légèrement différent de l'autre, mais ce sera la même chose. Il existe, pas dans ce document. Même si ce document est fermé , j'en ai oublié un. Si je fais un clic droit et que je dis, allez au composant principal, boom, il va ouvrir le fichier. Il va essayer de le trouver pour moi. Vous êtes là, vous pouvez le sélectionner. C'est parfois utile, et la plupart du temps, c'est juste une douleur dans les fesses. Si je vais aux actifs et que vous aimez, c'est pourquoi c'est là. Ce que vous pouvez faire, c'est que j'ai cliqué dessus avec le bouton droit, vous pouvez également accéder au composant principal. En fait, ce que nous allons faire, c'est cliquer dessus avec le bouton droit de la souris et dire détacher l'instance. Ce n'est plus un composant. C'est pourquoi il a disparu et il va en faire un composant et au moins maintenant c'est un composant de ce fichier. Il ne va pas revenir dans cet autre fichier maintenant qu'il est déconnecté. Est-ce logique ? Maintenant, pour le moment, la façon dont je vais le défaire. Il est toujours connecté à ce fichier d'origine. Pour le moment, si je vais le mettre à jour, il ne va le composant principal et que j'ai mis à jour ici, il ne circule pas. Ce n'est pas le moyen idéal, ni du moins la façon dont Figma veut que vous contrôliez les fichiers volumineux. Si je vais ici maintenant et que je dis détruire, sauvegarder ceci, cliquez sur « Terminé », il n'y a pas de véritable sauvegarde. Je le fais toujours, Commandez ceci ou Contrôlez ceci. Cela n'aide pas. Fermons ça. Voyez-vous qu'il ne s'écoule pas de cette façon. La mise à jour du poids et faire comme, faire circuler est quelque chose qu'on appelle une bibliothèque, une bibliothèque d'équipe. Nous le ferons un peu plus tard dans le cours. C'est l'une des choses payantes que nous devons utiliser et si vous voulez vraiment savoir maintenant, vous pouvez consulter la partie du cours, c'est ce qu'on appelle des bibliothèques. Pour le moment, restons aux composants et faisons une autre chose pour ne pas tuer les composants. Vous pouvez y aller. Les principaux composants ne meurent pas. L'autre chose qui ne peut pas mourir. C'est un exemple de mon composant principal. Rappelez-vous, je le sais parce que dans les couches, c'est mon original, mais disons que j'en ai deux. J'ai celui-là et je le copie. Vous collez celui-ci là et essayez de faire glisser tout cela vers le bas. Chaque fois que nous essayons de tout sélectionner à bord, j'essaie de faire glisser une boîte autour de tout, c'est parti. J'ai celui-là et celui-là. Dans ce cas, je n'ai pas besoin d'un bouton d'accueil. Nous sommes déjà chez nous, donc je vais entrer ici, double-cliquer dessus et appuyer sur Supprimer, et c'est parti. Pas vraiment. C'est bizarre. Rien n'est lié. Vous ne pouvez pas le tuer, vous vous souvenez ? Regardons un peu ce qui s'est passé. Je vais le déplacer pour que vous puissiez le voir. Nous pouvons bien zoomer avec l'angle de la caméra. Je vais défaire. Il y a mon instance Top Nav. Instance principale. Si je vais dans ce double-clic pour entrer dans mon instance et que je dis, j'utilise simplement la touche Supprimer de mon clavier. Regardez ce qui arrive à cette chose appelée Soustraire. Ça devrait s'appeler le bouton Home, mais bon, mauvais nom. Vous voyez qu'il ne disparaît pas réellement. Il ne disparaît pas vraiment. Le globe oculaire se ferme. On ne tue pas vraiment les choses dans un cas, mais il le cache. Cela signifie que nous pourrons le rallumer plus tard et qu'il ne rompt pas le lien entre ces deux-là. Si je voulais m'en débarrasser pour toujours, je dois aller dans ma principale et ça va s'effacer de ceci et de ceci. Est-ce logique ? Vous trouverez peut-être des choses qui ont un tas de choses que je vais l'éteindre dessus. C'est pourquoi vous ne pouvez pas tuer les composants, même de petits morceaux et ce qu' il faut faire lorsque vous travaillez avec ce qui ressemble à des fichiers d'autres personnes, mais simplement des fichiers conçus qui font partie de votre monde Figma que vous n'avez pas créés. En fait, c'est quelque chose que je n'ai pas mentionné. Je vais ouvrir cette chose à nouveau. Revenons à celui local. Si vous amenez réellement le Maître au lieu de l'instance, tout cela disparaît. Disons que je vais devoir apporter ce point d'exclamation. Si je fais venir le Maître, je sais que c'est le maître. Copiez-le et je l'apporte. Examinons nos actifs, collez-les. Le voilà, pouvez-vous voir que c'est juste une partie de mes composants locaux, pas utilisés dans ce fichier. Si je veux l'utiliser dans ce fichier, cliquez avec le bouton droit de la souris, détachez-le refaites un composant, c'est de retour. J'espère que cela a été utile. Les composants peuvent parfois devenir un peu mystérieux. Jetons maintenant dans la vidéo suivante sur les composants. 75. Où conserver les éléments principaux dans Figma: Salut, gang. Cette vidéo nous allons parler de l' endroit où vous devez conserver vos principaux composants. Pour le moment, nous ne faisons que les jeter partout. Il y a une bonne pratique, permettez-moi de vous montrer comment. C'est ma meilleure pratique et beaucoup de bonnes pratiques d'autres designers. Vous pouvez choisir votre propre chemin. Pour le moment, notre panneau Actifs ici n'est pas trop mal. Il y a des composants locaux et ceux-ci ne sont pas sur un cadre, sorte qu'ils traînent ici en dehors des choses. Celui-là est sur un cadre, disons iTune, je veux utiliser cette chose. La meilleure pratique, c'est que vous allez être un composant. Je vais la touche d'option Commande sur un Mac, et c'est Contrôler Alt K sur un PC et ce que vous faites, c'est que vous laissez le principal là-bas et ensuite vous utilisez l'instance dans ce type, ce gars est séparé. Juste pour que nous puissions mettre notre maître sur une autre page. Faisons quelques-uns d'entre eux sur des pages. Copions-le ici. Je vais transformer cela en notre composante. Cela peut devenir super désordonné. Ce que nous aimons faire, parlant au nom de tous les designers UX dans le monde, c'est que je veux saisir cela avec mon maître là-bas. Ce maître ici, je veux le déplacer vers une nouvelle page, tout garder. Je peux accéder à mes pages ici. Je peux dire que je dois être une page entière dédiée à mes composants. Je vais le mettre en haut pour que si quelqu'un d'autre utilise mon fichier, il puisse tous les trouver. Ils ne sont qu'au même endroit. Je peux les trouver au même endroit et quand nous les déplacons là-bas, passons à notre chaîne HiFi. Nous pouvons cliquer avec le bouton droit de la souris, passer aux composants de la page. Celui-là bien, déplacons-le là aussi bien que composants gardent ça bien rangé et une fois qu'ils seront tous là, vous verrez que j'ai cette page appelée composants, et ils sont tous juste ici plutôt que répartis dans ce document. Il y a quelques composants sur le bureau, ajoutons un composant ici. Imaginons qu'il s'agisse d'un composant, Command Shift K. Vous pouvez voir les ressources réparties sur deux pages. Il peut s'agir d'une centaine de pages sur lesquelles vous travaillez. C'est juste agréable de dire que je vais laisser cette version là, mais le maître va aller sur la page des composants. On peut dire que tout se trouve juste dans les composants, ce qui facilite la tâche. Maintenant, je vais revenir en arrière et déplacer toutes ces choses là-bas. Il y a vous et vous allez maintenant être déplacé vers la page des composants. Maintenant, il ne saute pas vers eux, sur lequel vous pourriez cliquer dessus et il a juste sauté vers eux. Il sautera sur la page sur laquelle ils se trouvent. J'espère qu'il y aura un maître ou un maître de spectacle. Peut-être que je ne le trouve pas, mais je suis parfois confondu entre XD et ça. XD l'a, pas K-Figma. Je ne pense pas. Laissez dans les notes, si vous savez sauter auprès du maître de lui. Où est celui-là ? Je ne sais pas, j'ai quelque chose qui lui ressemble, c'est le maître ? Oui. Je clique avec le bouton droit de la souris pour voir s'ils ont l'option master de référence. Je l'ai repéré. Vous allez également aller sur celui-ci, vous pouvez simplement le ranger, assurez-vous simplement que vos composants sur une seule page et que cette page n'a pas besoin d'un cadre, regardons cela. Je vais passer le quart 1. Le moment. Il y a des trucs partout, nous allons le ranger quand nous arriverons un peu plus tard, nous ferons une page de système de conception, mais ils peuvent simplement traîner seuls comme ça. Vous pouvez créer tous ces modaux contextuels, vous pouvez créer toutes les cartes ensemble, tous les logos différents pour que l'étirement soit beau. Maintenant, si vous ne voulez pas être aussi gentil ou organisé, vous pouvez simplement utiliser la recherche. Si vous avez un nom, au moins en leur nommant quelque chose, vous pouvez accéder à votre dossier Assets en désordre et simplement taper logo et cela le réduira simplement à ceux-ci. C'est peut-être suffisant pour vous. Vous pouvez passer en mode liste, assurez-vous simplement de l'effacer, se bloque autour des ressources qui recherchent. Vous pouvez travailler pendant un certain temps et y aller, une autre petite astuce. Je ne suis pas sûr que vous puissiez toujours le faire, mais si vous vous contentez de mettre dans un espace, comme si vous cherchiez tout et que vous les énumérez joliment. Peu importe s'il s'agit de ListView, ou That View, les décompose dans les différentes images, mais si je mets une barre d'espace là-dedans, cela semble faible. Mais ça ne se sent pas très officiel. Cela pourrait disparaître. Deviendra un bouton sucré sur lequel vous pouvez cliquer. C'est une façon de le faire. Si vous avez simplement le vôtre dispersé dans votre document, c'est bon aussi. Il peut être partout et vous n'utilisez que la recherche, mais vous constaterez que dès que vous aurez passé un document, peut-être quelques documents qui étudient, partagent avec quelqu'un d'autre, vous allez devoir cesser d'être un peu un peu plus prudent avec votre nom et l'endroit où vous conservez vos principaux composants. J'espère que cela a été utile. C'était une vidéo désordonnée. Après cela, passons à la vidéo suivante. 76. Introduction à la convention de nommage avec slash dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons comprendre ce qu'est cette convention de dénomination. Vous m'avez vu l'utiliser, vous avez vu d'autres l'utiliser, pourquoi ces barres obliques sont-elles partout ? La réponse courte est que cela vous aide à organiser vos composants, mais permettez-moi de vous donner quelques exemples, et nous en ferons ensemble. Commençons par la première raison utile, cette convention de dénomination. Je vais mettre la mienne sur ma page Composants, parce que j'ai envie d'utiliser l'outil triangle. Je vais dessiner quelque chose. Je vais accélérer ça. J'en ai un et l'un d'entre eux ; ça va à gauche, on va à droite. Je vais les transformer en composants en même temps. Créez plusieurs composants. C'est juste ce que l'on appelle polygone 2 et polygone 1. C'est très bien. Mais le nom va nous aider. Regardons ça. Polygone 1, je vais appeler cette flèche, mais je vais utiliser cette barre oblique. C'est tout à propos de ça. J'ajoute juste la barre oblique entre ça. Vous n'avez pas besoin d'espaces. Si vous êtes développeur, vous n'aurez probablement pas d'espace. Les concepteurs, dans mon expérience d'enseignement, ont mis dans les espaces parce que c'est beau. Voici Arrow Right. J'utilise Maj Tab pour passer au suivant. Juste un petit raccourci bonus pour nommer. Pour une raison quelconque, cela doit être là. Si j'utilise cette convention de dénomination, regardez ce qui arrive à mes composants. Je vais aller dans mon panneau Actifs. Je ne regarde pas les choses, mais les composants. Pouvez-vous voir ce qu'il a fait, c'est qu'il s'agit de flèches groupées ensemble. Vous pouvez voir ? En un petit groupe, alors que tout le reste est simplement regroupé. Ils sont assemblés à cause de cette barre oblique. Il est écrit, regardez, il y a un composant, mais c'est aussi une flèche, donc je regroupe toutes ces flèches. Disons que j'en fais un couple de plus. J'aurais dû les fabriquer avant de les transformer en composants. Sortons ce type, détachons-nous de la composante. Dans mon panneau Calques, celui-ci s'appelle Bas. Non, je vais d'abord le transformer en composant. En fait, peu importe que vous le nommiez avant ou après. Maintenant, c'est un composant, et j'espère en avoir un supplémentaire dans mon panneau Actifs, tous regroupés sous forme de flèches. Faisons aussi un bouton. Je vais commencer par un cadre. Je vais utiliser nos bonnes pratiques. Je vais le remplir avec mon truc, et je vais ajouter du texte à l'intérieur du cadre. C'est un géant. Ce sera mon bouton Click Me. Je pense que mon bouton est assez gros. Ces flèches en comparaison, faisons un zoom arrière, quelle est la taille de ces choses ? C'est assez gros. Ils n'avaient pas besoin d'être aussi grands, de toute façon. J'ai un bouton. Je vais aussi rendre le texte génial. maintenant la touche Maj et en utilisant la flèche vers le haut, je déplacerai ce texte. Cliquons sur l'extérieur et transformons la mise en page automatique, juste pour qu'elle s'ajuste quand elle s'ajuste. Nous savons comment créer un bouton maintenant. J'ai ce bouton. J'en ai un autre qui est une version plus petite. J'utilise ma clé pour réduire les choses. Il y a une petite version, disons, et une grande version. Sélectionnons les deux. Sélectionnons ce cadre et disons composant. Ce cadre, ce composant et nous allons les nommer ici, donc mon panneau Calques. Au lieu de la trame 4, je vais appeler ce bouton. C'est comme la racine. Il est facile de trouver tous les boutons, mais ils ne veulent pas trouver les gros boutons. Il en va de même pour celui-ci. C'est toujours un bouton, donc je vais rejoindre ce gang, mais c'est le petit. Dans mon panneau Actifs, j'ai ce charmant groupe appelé Button. Là, ils sont tous bien ensemble. Bouton grand, petit bouton. Vous pouvez passer en mode liste, en mode miniature. C'est raisonnablement facile. Il peut être encore plus profond. Vous êtes prêt ? Nous allons en descendre encore un. J'ai ces deux boutons, mais disons que j'ai également besoin de modes clair et sombre. Ceux-ci sont parfaits sur fond sombre. Ce sont mes modes sombre. Ces deux-là ici, je vais me détacher. Ce ne sont plus des composants. Je vais les changer. Ce truc va être ma version sombre. Il va y avoir un texte léger. En fait, je vais accélérer ça. Ils sont différents. Je vais sélectionner ce type, en faire un composant. Celui-ci en composant et renommez-le. Vous pouvez le faire dans votre panneau Calques, comme nous l'avons été, mais vous pouvez simplement double-cliquer dessus ici. Ce bouton va être grand, mais ce sera mon mode d'éclairage. Il en va de même pour celui-ci. Il est encore petit, mais il est maintenant en mode lumière. Celui-là, celui-ci va être petit, mais il va être en mode sombre. Vous avez une idée de ce qui va se passer ? J'espère. Tant que le nom est le même, en mode sombre, je vais avoir des boutons regroupés en un seul groupe, puis, espérons-le, se décomposer en grand et petit, puis en mode sombre et en mode clair. Jetons un petit coup d'œil à mes atouts. J'ai des boutons. À l'intérieur des boutons, il y en a de petits et grands. Tout ce que je veux, ce sont ces grands. Ils sont là. Il y a un mode clair et sombre. On y va. Vous avez l'idée ? Cela m'a semblé vraiment sensé quand j'ai écrit le plan de classe pour celui-ci. Peut-être que celui-là doit être un bouton sombre grand, pensez-vous ? C'est difficile à savoir avec celui-ci en particulier. Maintenant, les choses peuvent aussi aller plus loin que cela. Permettez-moi de vous montrer quelques exemples d'autres personnes. Nous le faisons parce que c'est bon pour nous-mêmes, regrouper ces choses, plus vous allez les obtenir à partir des documents d'autres personnes ou vous utiliserez ce matériel. Material Design est le terme ou le nom utilisé par Google pour son système de conception. Celui qu'il partage entre de nombreuses équipes et entreprises différentes afin qu'elles soient toutes cohérentes. Nous allons en regarder un simple pour commencer. Celui-ci s'appelle simplement les icônes de conception matérielle de la communauté que j'ai trouvée, et je vais vous montrer comment ils ont utilisé la convention de dénomination. Dans ce document, il y a un tas de pages, des icônes sont remplies. Ceux-ci ont un remplissage solide. Il y en a ici qui n'ont que les grandes lignes. Vous voyez ? Ce sont les mêmes icônes, juste des styles différents. Ce qu'ils ont fait, c'est qu'ils les ont rompus différemment. Nous avons divisé les nôtres en boutons/mode sombre ou clair, grands ou petits, puis sombres. Ce qu'ils ont fait dans leur panneau des actifs, c'est qu'ils sont partis ; nous avons divisé le nôtre, disons ceux remplis et ceux remplis qui sont des actions. Il s'agit des actions pour lesquelles vous pouvez utiliser l'icône. Examinons les icônes matérielles. Ce sont tous ceux qui ont quelque chose à voir avec le matériel. Vous pouvez voir à quel point cela serait plus facile que toutes les icônes remplies partout. Ils les ont divisés en petits groupes sympathiques. Ils les ont bien nommés. C'est cette convention de dénomination. Allons voir une version un peu plus extrême. Disons que nous concevons quelque chose pour l'appareil Android. Le matériau est leur kit qu'ils utilisent ou leur système de conception. Ce fichier Figma particulier, regardons ce qu'ils ont fait. Allons à Assets. Ils sont divisés en composants. Nous venons d'avoir des boutons. Ils ont leurs boutons, mais vous pouvez également voir qu'ils ont des boutons avec des ticks, avec des contours, des boutons qui contiennent des conteneurs. Jetons un coup d'œil là-dessus. C'est une façon d'organiser de nombreux composants différents pour qu'ils puissent être trouvés. Il y a un bonus plus tard lorsque nous effectuons des variables, ce que nous allons faire très bientôt, et cette convention de dénomination devient encore plus importante. Mais pour le moment, disons que je suis en train de concevoir quelque chose. Je vais faire un zoom arrière. Je dois faire un téléphone. Allons ici. Nous allons choisir Pixel, car nous utilisons Material Design. Disons que j'ai besoin d'un petit snack-bar en bas. C'est un très bon nom. Le voilà, Snackbars. Disons que j'ai besoin d'un snack-bar. Quel genre de snack-bar ? Une ligne ou deux lignes. Il est déjà conçu. Regardez-moi ça. Je peux dire que j'ai besoin d'un snack-bar qui est celui-ci. Cela signifie qu'il s'agit toujours d'un composant prêt à être utilisé. Je peux commencer à le faire. Je peux commencer à le mettre à jour. Je peux commencer à construire des choses très rapidement. Il y a ce petit snack-bar temporaire qui apparaît un peu puis disparaît. Tout est bien organisé avec ces barres obliques. C'est la convention de dénomination. Il est utile pour dissocier des actifs. C'est encore mieux pour les variables, dans une vidéo à venir très bientôt. En fait, je pense que c'est le prochain. C'est ça, les conventions de nommage, tout en avant. Vous êtes licencié. On se voit dans un peu. 77. Projet de cours - Les composants: Bonjour à tous, c'est l'heure du projet de classe. Nous allons créer un composant. Je veux que vous créez d'abord une page, si vous ne l'avez pas déjà fait, des composants sympas de votre fichier Figma. Ensuite, vous allez créer deux composants, essentiellement le même composant, un mode clair et un mode sombre. Je veux que vous vous entraîniez à utiliser cette convention de dénomination, afin que vous ayez deux composants, mais ils finissent par être regroupés dans votre fichier Figma, et en prennent une capture d'écran pour prouver que vous l'avez fait. C'est là. C'est là que je veux que vous finissiez. Prenez une capture d'écran, agréable et simple, téléchargez-la dans les devoirs ou la partie projet, ne vous inquiétez pas de partager celle-ci sur les réseaux sociaux car ce n'est pas si excitant. Oui, c'est le projet de classe. Je vous verrai dans la prochaine vidéo. 78. 78: Bonjour à tous. Nous allons apprendre ce qu'est une variable. Les règles de la peur sont simples, hein. En gros, nous avons trois composants distincts qui font trois choses différentes. Nous allons les assembler afin de pouvoir faire glisser une unité, un composant avec des variables de ces trois couleurs différentes Nous avons le mode clair, le mode sombre, le mode moyen, K. C'est ce qu'est une variable. Vous prenez des composants séparés comme ces trois, vous les écrasez ensemble. Juste pour faciliter les choses dans Tidy Air, vous pouvez passer de l'une à l'autre . Nous fabriquons celui-ci aussi. OK, celui-ci, ce sont les trois écrasés ensemble. Est-il possible de désactiver huit états différents pour notre bouton actif ? Il s'agit d'une variante. Passons à l'action et faisons une pause, une pause, une pause, une pause. Salut, juste avant de poursuivre, il y a eu une mise à jour de Figma Je veux juste... c'est juste un changement de langue. Dans cette vidéo, je vais utiliser les termes Variant et variable de manière interchangeable parce que c'est ce que j'ai fait Mais récemment, Figma a apporté quelques modifications. Et ils ont utilisé le mot variable pour désigner quelque chose de complètement différent de ce que nous faisons ici. Je vais donc utiliser le mot variable qui, selon vous, est Variant d'un bout à l'autre. Donc, au lieu d'y croire , d' exagérer, pensez simplement que chaque fois qu'il parle de variable, il parle de variantes. Les variables sont quelque chose de différent que nous allons aborder. C'est un peu comme un truc du genre à Cody que nous faisons dans les cours avancés Mais oui, quand je l'ai créé à l' origine , il n'y en avait pas. Alors je les utilise bon gré mal gré. Les variables sont des variantes. J'ai compris. Allez-y, oh, et amusez-vous bien. Très bien, qu'est-ce que la variante ? J'ai fabriqué deux boutons. OK, et je vais les nommer parce que je suis doué. Je vais utiliser la convention de dénomination que nous avons apprise auparavant. Voici donc mon bouton pour Duck Interfaces, en mode sombre. C'est mon mode d'éclairage. Il n'est donc pas nécessaire qu'il s'agisse boutons pour être une variable d'une taille et demie pour avoir cette convention de dénomination C'est juste utile, mais j'ai deux choses. Je veux que ce soit un composant sur ces deux composants. En fait, ce que je pourrais faire, c'est en avoir deux autres ici, juste pour les dupliquer pour plus tard J'ai ces deux-là, je vais en créer plusieurs composants pour moi, ce qui est cool. Ce ne sont que des composants distincts. Ils sont là, dans ma bibliothèque , avec un bouton. Ils sont là. Les deux éléments qui se trouvaient dans mon panneau d'actifs imaginaient que si vous les combiniez en tant que variables, d'accord, il les sélectionnait toutes les deux et disait : « Hé, ne sont que des variantes de la même chose », entrez dans ce que l'on appelle un ensemble de composants, qui est cette petite ligne pointillée ici Et vous les laissez comme un composant principal. OK, c'est un ensemble de composants principaux. Il va les laisser tranquilles. Et ce que vous remarquerez, c'est un look qui a disparu. Vous pouvez voir que ces deux ont été combinés en un seul bouton, juste celui sur lequel vous faites glisser ce bouton. Regardez ici, il y a un mode sombre et un mode clair. C'est ce que font les variantes. Vous prenez deux composants ou plus, vous les fusionnez en une variable, puis vous pouvez les parcourir et les ajuster. Vous pouvez avoir plusieurs variantes. OK, disons ça. Démontons. Je vais y retourner jusqu'à ce que nous soyons de retour ici. Vous avez peut-être une troisième version. D'accord ? Je veux une troisième version qui soit déjà un composant. Si vous voulez une autre version, car en ce moment je suis en train de faire glisser une instance de celle-ci Comment savoir s'il s'agit d'une instance ? Parce que c'est ce qui se passe lorsque vous faites glisser la touche Alt ou que vous faites glisser la touche Option vers la fin. Et c'est un cas que je veux séparer. C'est très juif là où nous allons. Nous voulions dire détaché de l'instance. Génial. C'est donc juste un vieux type de cadre ordinaire. Maintenant, ce sera en mode intermédiaire. Je ne sais pas si c'est le cas. OK. Je vais le parcourir et le changer en rose. Donc c'est un composant, c'est un composant, ce type doit être un composant. Les trois peuvent être des variables. Maintenant, ce sont les composants. C'est ce que la plupart des gens appellent simplement un composant. Pourtant, même s'il s'agit techniquement d'un ensemble de composants avec des lignes pointillées et écoutez mon panneau d'actifs Je n'ai encore qu' un petit détail. Il n'y en a pas trois ou deux douzaines selon la taille de votre application ou de votre système de conception. Mais je peux en sortir un maintenant et dire que c' est en fait le mode intermédiaire, comme Mood Doc Mode. Le moment est juste le premier. Des propriétés qui portent un grand nom. Donc, si vous avez sélectionné cette , vous pouvez dire que je ne veux pas être une propriété, je veux qu'elle soit tondue. Ils veulent aller ici. Je peux dire qu'il ne faut pas mettre deux points alors qu'il y en a deux. D'accord, mais c'est un peu plus descriptif. Cela ne change rien. Vous pouvez simplement dire que, d'accord, comment avez-vous trouvé ces variables ? Maintenant que nous comprenons les composants, ce n'est pas si mal et cette convention de dénomination. Ainsi, pendant que nous le faisons un peu plus tôt, il suffit de mettre de l'ordre dans notre liste de composants Vous n'êtes pas obligé d'utiliser des variables, mais vous pouvez voir à quel point elles sont utiles. Une seule chose à faire, toutes sortes de choses. Faisons-en une de plus ensemble. Juste pour te montrer, je vais utiliser trop le mode clair, le mode sombre. Et faisons autre chose, un peu pratique. Ce n'est donc pas encore un composant. Ce sera un bouton correspondant aux différents états d'un bouton. Ce sera comme un bouton actif. Ça va être comme un vol stationnaire. Celui-ci ici. Cela peut être comme si vous étiez handicapé de voir gouverné. Et laissez-moi juste en changer les couleurs. D'accord, ce sont donc des états différents pour la conception de mon site Web. K, actif quand quelqu'un passe la souris, il fait un peu plus sombre et ce sera mon bouton désactivé Nous devons donc en faire tous les composants. Alors faisons-le. Sélectionnez-les tous. D'un seul coup. J'ai donc trois composants distincts qui sont tous à peu près les mêmes Où sont-ils tous ici ? Mes composants sont-ils intégrés ou sont-ils intégrés ? Celui-ci en a trois, va les voir tous ne faire qu' un, boum. Un seul bouton pour les contrôler tous. Actif, désactivé, autres choses étranges. La ligne pointillée indique que les composants sont définis. N'oubliez pas que vous pouvez réellement modifier comme c'est le cas par défaut. Changez leur ordre. Nous pouvons le nommer ici. Et mes étuis, l'état des boutons. Si j'en fais glisser un autre, ce sera celui-ci et l' ordre a changé. Est-ce que c'est fait ? Je suis presque sûr que c'est le cas. Très bien, c'est tout pour notre introduction aux variables Faisons un peu plus de variables afin de mieux les connaître. Je te verrai dans la prochaine vidéo. 79. 79 1: Salut tout le monde, il existe plusieurs façons de créer une variable. Dans cette vidéo, je vais vous montrer une méthode légèrement différente. Essentiellement, vous savez qu'il s'agit de la même pièce, mais il existe juste une méthode légèrement différente pour les créer. Et nous allons aussi regarder l'interrupteur à bascule. Regardez ici, c'est écrit « bascule », regardez ce petit interrupteur là-bas Nous allons également créer un petit logo multicolore. D'accord, c'est toujours une méthode de construction variable, fondamentalement la même, légèrement différente. Laissez-moi vous montrer, d'accord, dans la dernière vidéo, je vous ai montré comment rendre un composant OK, touche Option de commande sur Mac, Ctrl Alt sur PC Nous en avons donc créé deux, les deux options différentes et nous les avons combinées , il y a de la variance. D'accord ? Je vais faire les choses différemment dans cette vidéo. Nous allons commencer par ce petit interrupteur à bascule. Ce n'est rien, c'est juste un cercle dans un rectangle arrondi. Mais si je le convertis en composant, je peux directement en faire un composant virulent Bonjour tout le monde Juste une petite mise à jour de cette vidéo. Vous remarquerez que le mot Variant n'est plus surchauffé. Figma l'a légèrement modifiée. K ici, c'est en fait sous Propriétés et vous cliquez sur le plus. Il y a une variante là-dessus. Et ce que vous devez faire, la deuxième étape consiste à ajouter une deuxième variante. Tout cela ne faisait qu'un pas auparavant, mais il en est maintenant de deux. OK, donc l'ego, c'est la mise à jour, tu peux continuer avec la vidéo. L'autre chose à retenir, cependant, c'est que je vais appeler beaucoup de choses variables. Ce n'est pas le bon mot. Je vais tout faire à travers cette vidéo. Qu'entend-on par « variance » ? C'est exact J'ai compris. Très bien, Karen, avec une vidéo. OK, et la même chose se produit. Nous obtenons ce type d'ensemble de composants. Ensuite, je pourrai entrer ici et dire que c'est à moi de le faire. D'accord. Il vous suffit de double-cliquer dessus pour y accéder. Et je vais passer à cela dans mon panneau d'actifs ici. J'ai maintenant mon petit interrupteur et j' ai une option qui indique Variant. Vous y allez, si vous les nommez mal, vous vous retrouvez avec la propriété 1 et une variante à nommer, les renommer par la suite n'est pas particulièrement difficile Vous devez les renommer sur le composant ou dans votre panneau Layers, vous le voyez un peu quand ils sont appelés Variant de ceux par défaut dans le métro V ici Vous pouvez donc les nommer en double-cliquant dessus. OK, nous allons le faire ici ou être un peu meilleurs quand tu as fait cet interrupteur pour la première fois OK, si on actionne cet interrupteur et qu'on l'appelle peut-être interrupteur et qu'on l'appelle barre oblique Cela nous aidera à effectuer cette dénomination automatiquement. Mais nous sommes allés chez Clever, donc nous allons le faire plus tard. Donc, tout d'abord, le tout s'appelle le composant 1, ce qui n'est pas ce que je veux. C'est l'interrupteur dans lequel j'ai accédé à Variants. Je vais les renommer ici en propriété, qu'elle soit activée ou désactivée Maintenant, cela va faire quelque chose de fantaisiste si j'utilise, peu importe comment je l'appelle, mais si j'ai le premier qui est par défaut, d'accord, et qu'il sera désactivé si j'ai utilisé les mots « off » et « on », remarquez comment cela va changer ici. Allons-y Allons chercher un actif. Il a saisi l'interrupteur à bascule. Et parce que j'utilise le mot «   on » et « off », vous voyez, il contient ce petit truc cool, c'est génial. Voilà l'interrupteur à bascule. Cela ne fait rien. C'est juste parce que j'utilise les mots « on » et « off ». Vous pouvez utiliser les mots « vrai » ou « faux ». Ou quoi d'autre peut utiliser oui ou non. D'accord. Ce peut être une case à cocher tant que vous utilisez ce genre de mots En d'autres termes, activez-le et désactivez-le. Ça ressemble à un petit interrupteur. Et ça nous fait paraître chics. Faisons-en une de plus. Nous allons faire le logo et avons fait, j'ai l'impression que nous l'avons déjà fait. Je vais donc faire semblant de ne pas l'avoir fait. Je vais avoir cette version. D'accord ? Il s'agit d'une instance de mon composant. Je vais casser cette instance et oublier que nous l'attachons. OK, ce n'est donc plus qu'un cadre maintenant. Regarde à quoi ça ressemble. Oui, c'est juste un cadre maintenant avec mon logo dedans. Je vais donc modifier les couleurs des textes à l'intérieur. D'accord ? Donc, la même chose, au lieu de « like », tant qu'il s'agit d'un composant au départ. Et utilisons notre convention de dénomination. Disons donc que c'est un bon nom. Disons que c'est primaire. Couleur primaire. Convertissez-le en un composant Command Option K Mac et Control Option KPC. Vous en avez marre, messieurs ? Tu t'en souviens ? C'est le truc. Ou nous cliquons simplement sur le bouton en haut. J'ai ça. Qu'est-ce que je fais ? Je lui ai donné un nom, ce qui est génial. Je l'ai converti en composant. Et au lieu de, nous allons ajouter toutes les variantes. Nous y voilà. Une fois que vous avez obtenu cette variante, vous pouvez en ajouter une autre. Alors, en fait, allons-y et changeons la couleur pour une autre. Secondaire. Celui-ci, il va être cool, pas Variant Dent ne sera appelé couleur secondaire. Vous pouvez en ajouter d' autres en cliquant sur ce petit plus ici. OK, nous avons une autre version et ajoutons ton propre effet sonore. OK, et celle-ci sera notre couleur d'accent. Il existe un autre moyen de cliquer dessus, appuyer sur Commande D sur un Mac, de contrôler D sur un PC. Il existe donc de nombreuses façons de créer des variantes. Trouvez simplement celui qui vous convient le mieux. Celui-ci va être là. Mon logo sera celui-ci, ici sera la couleur. Tu peux choisir. Modifiez pour voir ce qu'il fait. Nous y allons et je peux passer en revue et dire quelle couleur je veux de la couleur ? Choisissons une couleur d'accent secondaire. Créons des variables. Nous sommes donc passés d' un grand nombre de composants à la combinaison d' éléments tels que les trois versions en une seule petite unité Ce que nous pouvons également voir ici , c' est qu'il y a en fait trois boutons. Cela pourrait donc encore devenir incontrôlable à moins que nous ne créions des variables multidimensionnelles, ce que nous ferons dans la vidéo suivante Très bien, je te verrai là-bas. 80. 80: Bonjour tout le monde Dans cette vidéo, nous allons discuter des variantes multidimensionnelles. Ils ont l'air chics. fait, ce qu'ils sont, c'est que nous avons déjà fait connaître notre Dimensional, ou au moins une variante dimensionnelle. Celui-ci est là, il est allumé ou éteint. OneDimension peut faire tout le reste. Ce look, il existe une version petite et une version grande, qui passe deux couleurs différentes. C' est ce que nous allons faire. Nous allons créer un bouton disant : Oh, je veux que ce soit en fait la version grand format, c' est-à-dire la couleur secondaire. Il est multidimensionnel. Pareil pour cette personne. D'accord. Il a le positif ou le négatif, mais il a aussi une couleur. Il a une dimension supplémentaire, multidimensionnelle. Donc oui, je vais probablement toujours dire multidimensionnel avec cette voix étrange Vous devez, pour qu'une partie des règles de Figma soit multidimensionnelle Très bien, je vais essayer encore et encore de le baisser. Passons à la vidéo. Très bien, pour créer une variante multidimensionnelle, vous devez commencer par quelque chose D'accord ? Peu importe ce que c'est. J'ai commencé par un bouton. D'accord, il faut que ce soit un composant comme avant. Nous allons faire la version qui consiste à créer des variantes en commençant par une et une nouvelle inutilisée dans ce petit plus. Bonjour tout le monde Faites une pause rapide ici juste pour vous rappeler le changement d'interface. Dans la vidéo, je vais dans Variantes et j'appuie sur Plus, il n'y a plus de variance. Tu dois aller dans Properties, dans Plus et dans Virion. Mais tu le savais déjà. C'est juste un rappel. Vous devez également monter en haut de la page et ajouter une nouvelle variante ou sélectionner et appuyer sur Commande ou Ctrl D comme vous le souhaitez. Et la dénomination est assez similaire. OK, j'ai le premier ici que je peux nommer. La deuxième variante ici que je peux nommer. Et si je veux modifier la propriété globale, je double-clique dessus. Donc, très similaires, de petits changements. Tu l'as compris. Très bien, passons à la vidéo Ce que je vais faire, c'est qu'avec cette variante, nous n'allons pas utiliser le mode clair et sombre. Je devrais probablement appeler ces couleurs primaires et secondaires des couleurs laitières. Donc celui-ci est secondaire. Celui-ci n'est pas en mode sombre. C'est primaire. Remplacez la couleur de celle-ci par ma couleur secondaire. Ce sont donc des variantes telles que nous les connaissons. Très bien, donnons même cette variante et cliquons sur le cadre du composant pour dire que ce composant s'appelle couleur Mais maintenant, comme au début, nous voulons une autre taille plus grande. Et tout cela est multidimensionnel. Et Variant, c'est que nous avons une propriété qui indique à Color Everyone de faire une mise à jour de plus pour cette vidéo. Ils l'ont changé. C'est un peu similaire à ce que nous avons déjà fait, mais je tiens à vraiment le souligner parce que cela faisait perdre un peu les gens OK, donc sous la vidéo se trouvent ses variantes. Cliquez sur ces points et accédez à la nouvelle propriété edX. Maintenant, ce que nous faisons dans un endroit similaire , c'est accéder aux propriétés, nous devons donc le sélectionner. Nous allons dans Propriétés, nous allons créer une nouvelle propriété Variant. OK, similaire, similaire. Et nous allons appeler notre taille unique et créer une propriété, vous vous retrouvez avec deux propriétés. Diego multidimensionnel, petit changement, un peu confus. Je vois qu'il y a la mise à jour. Continuez. Créons une autre nouvelle propriété qui s'appellera taille. Il en crée un appelé default. Et ce que vous remarquerez ici, c'est que dans mes couches, annulons ça. Donc je n'en avais qu'un, d'accord, juste le secondaire et le primaire. Si j'ajoute une autre propriété et que je l'appelle couleur, encore une fois, taille, regardez ce qui se passe ici, qui s'est traduit par une barre oblique plus calme sur cette autre multidimension, vous avez deux dimensions Il peut s'agir d'un N secondaire, il peut être de tailles différentes. Donc ce que je vais faire, c'est dire que cet homme est de la taille d'une petite taille. Il est la couleur principale. Un peu petit ? Ce type est de la couleur secondaire, et il est aussi petit. Il m'en faut donc deux de plus. Je dois y ajouter un autre gars. Tu peux, juste pour rigoler, OK, on peut cliquer sur le plateau Vous pouvez également ajouter une autre variante de cette façon. Il existe de nombreuses façons d'ajouter des variantes. Vous pouvez cliquer dessus et sur Commande D, Ctrl D. Vous pouvez coller dessus, le copier et le coller. Je sais que ça ne fonctionne pas. Commande. OK, donc j'ai l'autre. Ce type va dupliquer celui-ci juste parce que je veux commencer par la bonne couleur Il est donc principal et il va devenir grand. Il n'est pas encore grand, alors je vais juste lui ajouter un peu de rembourrage Les composants ont donc été sélectionnés, où sont-ils ? Ils sont juste là. Je vais dire que tu es ce que je vais faire 24 heures sur 24. Et je vais faire 72 faces. C'est donc un bouton plus gros. Vous pouvez voir qu'il a été coupé. Il vous suffit de cliquer dessus et vous pouvez faire glisser de n'importe quelle façon. Nous allons faire des variantes multidimensionnelles assez simples Mais vous pourriez vous retrouver avec des centaines de variantes différentes. Vous utilisez toutes ces différentes tailles, différentes couleurs, puis vous faites tout ce type de survol actif et inactif également Ils peuvent donc devenir assez compliqués. Tu peux l'agrandir autant que tu le souhaites. Je vais en faire un autre à côté de vous, vous pourriez simplement le dupliquer. D'accord. Je ne sais pas Les sons proviennent de. Et disons qu'il s'agit d'une couleur secondaire. Ce type va être, où est ma variable ? Cela peut être assez long maintenant parce que nous sommes des variables. Donc il est de couleur primaire, je sais, il est de couleur secondaire et il est grand. Regarde ça. La façon dont cela fonctionne est d'accéder au panneau Actifs. C'est très bien Notre petit bouton Et maintenant il a deux variables, d'accord ? Il a deux types de propriétés pour ses variables, sa couleur et sa taille qui en font un objet multidimensionnel Je peux donc dire qu' en fait, j'ai besoin de la principale, la version secondaire, mais j'ai besoin de la version plus grande. C'est multidimensionnel. Faisons-en une de plus, d'accord, parce que nommer ici n'est pas difficile, non ? Cela peut être plus facile. N'oubliez pas nos conventions de dénomination, les barres obliques, qui peuvent être très intéressantes Alors faisons-le. Je vais accélérer le processus. Je te verrai chez un malade. OK, alors j'ai fait ces petits boutons, ces petits boutons circulaires. Et encore une fois, rien pour eux. Je vais d'abord en faire des composants individuels. Pour le moment, je pense qu'ils sont tous séparés. Si je crée tous ces composants séparés parce qu'ils ne sont en aucun cas regroupés ou encadrés. Regardez ça, vous allez vous retrouver avec quatre composants distincts. Je vais donc simplement le sélectionner et je peux soit le convertir en cadre, soit le regrouper, soit simplement convertir en un composant lui-même. C'est en quelque sorte une autre façon de grouper qui consiste à en faire un composant. Très bien, j'en ai maintenant deux conventions de dénomination. Donc celui-ci va être ma couleur d'accent pour les boutons ronds, les barres obliques, les barres obliques positives Donc, en gros, nous ajoutons des propriétés, ces dimensions multiples avec ces barres obliques ici, et nous faisons de même ici. Mais celui-ci va être négatif nega Tiv. Si je crée des variantes maintenant, multidimensionnel. OK, vous pouvez donc aller droit au but si vous êtes prêt à utiliser la barre oblique Et ici, je peux dire que je ne sais pas comment nous appeler. Si vous n'êtes pas sûr, appelez-le simplement valeur. OK, et ça va être ma couleur. Je peux en faire deux autres. En fait, je vais les sélectionner tous les deux , en créer deux de plus. Et tout ce que je vais faire c'est de la changer en couleur secondaire avec celle-ci. Maintenant que c'est sélectionné, je peux dire que vous êtes positif mais que vous n'êtes pas une couleur d'accent. Vous allez en ajouter un nouveau. Tu vas être ma couleur secondaire. Secondaire. Vous, je n'ai pas besoin de le taper parce que c'est déjà là. À présent. J'ai oublié les actifs. Je t'ai compris. Et je vous ai tous créés de manière multidimensionnelle J'ai besoin du négatif dans la couleur secondaire. Si vous vous demandez, est-ce que je pourrais continuer à les nommer au lieu de les dupliquer ? Tu peux tout à fait. Prenons donc le dernier exemple que je vais annuler et qui, avant, c'était notre variable. Ok, je peux le faire maintenant. OK, il n'y a donc aucune raison pour que je ne puisse pas les séparer. Instances tactiles. Et celui-ci va être : qu'est-ce que c' est que le bouton rond est positif ? Mais je vais la remplacer par ma couleur secondaire. Tu vas être la couleur secondaire. Et ça va changer les noms. C'est donc désormais secondaire. Vous pouvez donc faire tout cela avant. Nous l'avons fait par la suite, vous pouvez tout faire avant si vous le souhaitez. Secondaire. Ça doit encore être des composants. Composant, composant, pas composant. Cela n'a pas marché. OK, donc tant que les conventions de dénomination sont là, si je zoome, vous pourrez voir la dénomination. Et tu pourrais en faire une quatrième. Nous n'allons pas en faire une quatrième ici. Ce petit cours Be Essentials, mais il n'y a aucune raison pour que vous ne puissiez pas également créer une version grande et petite de tous ces cours. Mais parce que je les ai bien nommés. Les variantes combinées étaient absentes. Regarde ça. D'accord. Rappelle-toi je ne sais pas comment appeler. Je suis sûr qu'il y a un bon nom. Vous pouvez probablement trouver un bon nom. Je n'entends pas, c'est là ? Et c'est le même genre de choses. Secondaire, négatif. D'accord ? Ce que vous ressentez, ce que vous pensez des variables et ce que vous pensez du multidimensionnel J'avais vraiment peur des variables à skier. Disons que je ne voulais pas m'en mêler quand ils sont sortis parce que je m'y connaissais Je suis du genre, mec, que ça a l' air compliqué. Mais une fois que vous les aurez compris, vous pourrez commencer à voir la propreté qui Ensuite, vous commencez à faire du multidimensionnel. J'ai évité cela aussi parce que cela semblait être toutes ces barres obliques et que cela devenait confus Si vous trouvez que cela peut être multidimensionnel confus, vous devez en tenir à toutes les variantes normales et n'avoir que quelques versions ici pendant un certain temps. Ce sont des choses relativement avancées que nous faisons ici. Une dernière chose que vous pourriez faire est que si vous avez ceci, disons que nous avons peut-être suivi nos conventions de dénomination et nous l'avons fait. C'était quoi celui-ci ? Je ne me souviens pas de ce que nous avons regardé. Nous avons aimé le bouton rond, le positif, le secondaire. Si vous vous trompez, ne vous inquiétez pas. Si vous êtes du genre, dans quel ordre est-ce que ça passe ? Vous pouvez ajuster cela plus tard, une fois il s'agit réellement d'un composant multidimensionnel, vous pouvez dire « vraiment je veux que ce soit le premier  », regardez ceci, vous cliquez réellement sur le parfum Souvenez-vous de l'ensemble des composants, vous y voyez cette petite ligne pour adolescents. Vous pouvez même dire qu'il est plus approprié de choisir la taille en premier. Alors faisons sortir ce type. Ce type. Je ne sais pas d'où tu viens. Et j'ai jeté un coup d'œil, ce type, je le traîne maintenant, il va prendre la taille d'abord. Et puis Premiere n'a pas vraiment d'importance, ça ne l'est pas. Très bien, mes amis, ce sont des variantes multidimensionnelles de Figma. Je te verrai dans la prochaine vidéo. 81. Projet de cours 15 - Variantes: Bonjour, tout le monde. C'est l'heure du projet de classe. Nous allons faire quelques écarts. Nous allons en créer trois, une étoile, une case à cocher et un bouton. Jetez-y un coup d'œil. Je veux que vous fassiez une variante qui comporte trois options. Nous pouvons faire des étoiles vides, étoiles pleines, des demi-étoiles, nous allons l'utiliser pour ces critiques. Vous obtenez des points bonus si vous pouvez les obtenir dans cet ordre, vides, à moitié et pleins. Par défaut, selon la façon dont vous le faites, ils peuvent être mélangés. Fondamentalement, ils sont placés dans l'ordre alphanumérique. Vous obtenez des points supplémentaires si vous pouvez les placer dans cet ordre. L'autre projet, k, est la case à cocher. Dans cette case à cocher, activez et désactivez. Facile. Mais vous obtenez des points bonus si vous pouvez obliger à utiliser ce petit interrupteur à bascule ici. Le gros bouton multidimensionnel. Je veux que vous créiez un bouton dans votre propre style, votre propre police, vos propres couleurs primaires. et je veux que vous ayez une version grande et petite et plus d'une couleur. Vous pouvez devenir fou et avoir plus que ces quatre options, à vous de choisir. Mais je veux au moins deux propriétés différentes, dans notre cas, la taille et la couleur. C'est la partie la plus difficile de Figma, variable. Si vous rencontrez des difficultés, posez une question sur la page, moi ou l'un des assistants vous aideront, ou l'un des autres étudiants. Si vous voyez une question, alors vous êtes comme, hé, je sais comment y répondre. Sautez à l'intérieur. Une fois que vous avez terminé, prenez une capture d'écran de tout cela et téléchargez-la la partie affectations de cette page avec une partie projet pour y jeter un coup d'œil. C'est ce que je veux. C'est ça. Allez-y, faites un peu de variance. Soyez fier de vous-même si vous obtenez même l'un d'entre eux parce que c'est délicat. Je vous verrai dans la prochaine vidéo. 82. 82: Bonjour à tous. Dans cette vidéo, nous allons créer notre formulaire essentiellement des rectangles avec du texte, mais nous allons faire preuve de fantaisie et dire, en fait, nous voulons, nous allons en faire une variable afin de le rendre actif ou nous pouvons en faire un message d'erreur Cette vidéo présente donc toutes les compétences que vous connaissez déjà, mais dans un format différent nous aider à mettre en pratique ce que nous avons appris. De plus, montrez-nous à quel point les variables sont importantes et utiles. Très bien, passons à la création de formulaires. OK, alors préparons notre formulaire. J'ai sélectionné le cadre extérieur, décalé de deux pour zoomer dessus. Je vais également activer mes chroniques. Nous pouvons utiliser ma commande, faire avancer la barre oblique et activer la grille. Grille. OK, nous allons donc commencer par un cadre. Nous pourrions utiliser un rectangle. Attendez, attendez, attendez, attendez, attendez. Je viens de dire que vous pouvez utiliser un cadre ou un rectangle, peu importe. Je le sais parce que je cause des problèmes à beaucoup de gens quand vous faites cela. Quand nous allons le redimensionner dans une seconde, nous allons le redimensionner Il ne sera pas redimensionné si vous avez commencé par un rectangle, même si vous le convertissez ensuite en cadre À ce stade, en particulier pour ces formulaires, utilisez simplement des cadres au lieu du rectangle, car les cadres ont des pouvoirs spéciaux. Je ne m'en suis même pas rendu compte avant de faire cette vidéo et quelques personnes se sont perdues. OK, alors assurez-vous d'utiliser des cadres, pas des rectangles. C'est bon. Continuez. Les cadres semblent étranges, mais nous savons que les cadres sont utiles Je vais donc les dessiner à peu près de cette taille. Je vais lui donner un coup. Nous sommes juste en train de construire, je n'en connais pas les détails d'abord. OK, nous allons commencer par quelques vieux composants isolés , puis je vais vous montrer comment les améliorer au fur et à mesure. J'ai donc ces coins arrondis. Oui, quelque chose. OK. Le texte va entrer. Si vous avez sélectionné un cadre ici et que vous cliquez simplement à l'intérieur, il plongera à l'intérieur. Ce n'est pas important pour celui-ci. Nous allons ajouter un exemple de texte. Je veux qu'il soit aligné à gauche. Par défaut, c'est ma police, la police que j'utilisais. C'est vrai. Et chaque fois que vous créez un formulaire, n' essayez pas de le personnaliser. Mon conseil est que, surtout pour les détails des cartes de crédit, il faut s'en tenir à Roboto, Open Sands ou Inter, ou il y en a beaucoup. Plus c'est ennuyeux, mieux je vais utiliser les sables ouverts. Je veux que les gens fassent confiance à ce formulaire. Je veux avoir l'impression que ce n'est pas, je ne sais pas, le Mickey Mouse Show OK, la lumière n'est pas ce que je veux. Sur du sable ouvert, ça va être facile à lire à 16 ans, je vais changer un peu la couleur. Je vais essayer de me souvenir que 990 s'est répété. OK, je vais utiliser ce texte, le copier, coller hors de mon cadre juste parce que je le veux au-dessus. Et ce sera mon label. Je vais l'appeler une étiquette plutôt qu' un nom ou quoi que ce soit d'autre, juste pour pouvoir le réutiliser pour différentes choses. C'est bon. Je vais tourner mes grilles de commande, de contrôle automatique sur un PC et simplement entrer Pas besoin de changer quoi que ce soit. J'adore ça. C'est bon. J'ai donc mon premier morceau et je pense que je le veux en noir OK ? Parce que je veux l'utiliser encore et encore. Je vais en faire un composant. OK. Si vous ne faites rien d'autre que d'utiliser un composant, c'est très bien. Nous allons créer une variable dans une seconde. ce qui concerne les composants, souvenez-vous qu'il s'agit mon composant principal. Souvent, maintenant, je déplace mon principal ici et je commence à créer avec l'instance de celui-ci afin de pouvoir faire des choses comme celle-ci et changer ce nom. Si je l'ai changé sur le premier, cela le changera pour tous. Je souhaite modifier l'instance. En fait, ce sera un e-mail. OK ? Mon exemple de texte sera pré-rempli. Nous y voilà. OK, dupliquons-le car il y a une instance. Je peux le changer, je dois dire que c' est peut-être le nom inscrit sur la carte. Je vais juste laisser ce nom , peut-être un autre. Je vais passer à la commande D pendant que j'y suis. Un autre. Ce sera le numéro de carte. C'est bon. Vous avez l'idée que vous pouvez créer un composant, vous l'utilisez encore et encore. cool, vous pouvez aussi faire avec les composants , c'est que vous avez peut-être appris, elle ne vous l'a peut-être pas montré , vous pouvez évidemment changer le texte et la couleur des éléments sans détruire lien avec composant principal ou principal d'origine. Je vais annuler ça. Vous pouvez en fait faire des choses physiques, comme souhaiter que je ne puisse pas déplacer ce texte séparément de cette étiquette et je veux passer à la vitesse supérieure. Ce ne sera pas le cas. Certaines choses physiques ne changeront pas avec cela, mais d'autres oui. Je vais donc réactiver mes chroniques. Et regarde ça. Si je prends l'ensemble du cadre, toute la composante incendie, et que je fais comme ça, tu peux le voir ? Va changer. OK. C'est comme étirer cette boîte. Certaines choses peuvent toujours rester connectées et changer, d'autres non. Une liste exhaustive. Je ne sais pas, j'en trouve de nouveaux tout le temps. S'il ne veut pas bouger, il ne peut pas. Si c'est le cas, c'est possible. Bonjour à tous. Je veux juste entrer ici et étendre cette vidéo juste parce que si la vôtre ne se redimensionne pas bien OK, regarde la vidéo, tu vas peut-être bien. OK, mais il y a pas mal de personnes dans les commentaires qui ont du mal à, vous savez, c'est de ma faute si je n'explique pas quelque chose correctement. Et il y a certaines choses qui se sont peut-être mal passées si vous le redimensionnez et qu'il ne le fait pas, soit que cet objet dépasse sur le côté, soit que l' étiquette se déplace Je vais vous montrer les solutions à ce problème. OK. La première est, comme je l'ai mentionné plus tôt, que pour utiliser un cadre et non un rectangle, vous ne pouvez même pas utiliser un rectangle et le convertir comme vous ne pouvez pas encadrer une section ou le convertir en cadre. Il y a quelque chose cuit dans un rectangle et il est pratique de savoir que seuls les cadres conviennent mieux à de nombreuses choses. Utilisez simplement un cadre dès le départ Vous devrez donc supprimer le rectangle et le reconstruire nouveau avec un cadre qui devrait résoudre tous vos problèmes. Je vais juste le revoir , le refaire une fois de plus et souligner certains des points qui ont pu mal tourner. J'ai cette structure ici. Je l'ai gardé propre et propre ici pour que vous puissiez vérifier le vôtre. OK, je vais sélectionner ceci, je vais dire que vous êtes un composant. J'y ai mis mon composant principal. Je vais maintenir ma touche d'option enfoncée, PC. Ce sera mon exemple, d'accord ? Et il devrait être redimensionné, sauf que parfois ce type n'en avait jamais fait l'habitude Bien sûr, quand je l'ai fait pour la première fois, cela n'arrivait jamais, mais c'est ce qui se passe. Maintenant, l'une des choses que nous pouvons faire, tout d' abord, c'est de le redimensionner Faites-moi savoir dans les commentaires si vous n'êtes toujours pas redimensionné, si votre texte au milieu ou ici est redimensionné La seule chose à regarder, c'est que j'ai double-cliqué dessus, donc j'ai sélectionné mon étiquette ici En cas de contraintes, la mise à l'échelle est définie par défaut. OK, il s'agit donc de réduire la taille de la boîte. Parfois, le texte, laissez-moi vous le montrer, indique en fait que celui-ci va bien. Le texte peut être divisé en deux lignes. C'est un autre problème que j'ai vu des gens avoir. OK. Je vais cliquer sur mon étiquette et je vais la modifier à partir de l'échelle. Je ne peux pas le changer à partir de l'échelle. Pourquoi pas ? OK, c'est parce que je travaille sur mon instance. N'oubliez pas que vous pouvez effectuer certaines opérations à l'intérieur d'une instance, comme le redimensionnement de cette zone. Mais je ne peux pas déplacer l'étiquette. Je dois revenir à mon composant principal ici. Si je clique sur l'étiquette, je peux dire que vous n'êtes pas une échelle, ce n'est pas ce que je voulais. Je veux que tu sois aligné à gauche ou au moins attaché à ce côté gauche. Pour ce qui est de la hauteur, je suppose que nous pouvons le faire coller au sommet. Je ne pense pas en avoir besoin car je ne redimensionne que de ce côté. Vous pouvez voir maintenant que ça ne va pas s'ajuster. Vous devrez peut-être faire de même pour le texte interne. Je n'ai pas besoin, dans ce cas, de voir ce que c'est Defoldedo, ça va en haut à gauche Ils changent quelles que soient les valeurs par défaut de Figma. J'ai pensé ajouter cette vidéo juste pour que si nous nous perdions à l'avenir, vous ayez peut-être plus de chances de la corriger. Faites-moi savoir dans les commentaires si vous avez encore d'autres problèmes et je reviendrai pour une autre mise à jour. J'espère que cela nous a permis de nous rapprocher de ce que nous devions être. J'espère que le vôtre est en train de redimensionner dans ce cas. bon, alors c'est tout. Quelques modifications apportées à la Fig. Je blâme Figma, pas mon professeur. OK, c'est définitivement Figma, pas moi. Mais j'aime bien aussi ces petits ajouts. J'espère que vous adopterez également certaines de ces solutions de résolution de problèmes plutôt que de contenter de tout suivre dans la vidéo. Très bien, nous allons continuer avec la vidéo. Il y a encore beaucoup à faire, profitez-en, d'accord ? Et ce sera mon mois, mon mois, mon année. Ce sera mon CSV. accord ? L'autre avantage de l'utilisation, eh bien, que je voudrais ajouter à ce cours est la commande de contrôle pour entrer. Supprimer mes colonnes, c'est que si je les sélectionne toutes, nous aurons notre sélection intelligente, d'accord ? Et évidemment, je peux aller et partir, en fait, cela doit être là. Ça doit être ça, d'accord ? Une chose qui va provoquer un certain drame, c'est que vous pouvez voir ? Je les ai, ça marche bien. J'ai ces espaces et je peux ajuster l'espacement avec Mais disons que je vais OK, veuille dupliquer celui-ci en dessous comme celui-ci commande Go D la met sur le côté. Cela pousse aussi mon cadre vers l'extérieur. Tu peux le voir ? Pour compenser , parfois, avec ces gars qui font des trucs bizarres, je peux les regrouper ou les mettre dans un cadre. Je vais passer à l' option de commande ou à la commande Alt G sur un PC juste pour les coller de manière à ce qu'il s'agisse du même type d'unité. Ensuite, d'accord, je peux m'en occuper, d'accord, et je peux les déplacer de haut en bas maintenant, et je peux cliquer dessus et les dupliquer ou en créer un autre. OK ? Puis faites-le glisser en dessous. Cela arrive souvent avec les formulaires. OK ? Vous voulez ces demi-phrases : une longue s'arrête quelque part, une autre s'arrête ailleurs. Mais je pense que c'est tout ce que je veux. Tu t'en vas. Vous pourriez donc terminer, alors vous serez comme dans un formulaire. C'était juste une zone de texte avec du texte au-dessus. D'accord, nous allons aller un peu plus loin car nous voulons maintenant ajouter certains de messages d'erreur et différents types de versions de ces boîtes. Nous allons donc commencer par notre composant principal. C'est où ? C'est là-haut. OK. Si vous ne le trouvez pas, comment le trouvez-vous ? Cliquez dessus avec le bouton droit de la souris, composant principal. Va me voir. Voilà, y est-il. Soyons encore plus sophistiqués, découpons-le et ajoutons-le sur notre page de composants parce que nous sommes géniaux comme ça. Ce que je veux faire, c'est où en êtes-vous au deuxième quart de travail. Nous y voilà. OK, je veux avoir quelques variables différentes. OK, donc je vais sélectionner ceci et dire que vous êtes une variante, en fait j'en veux quatre. Allons-y, boum. Ce premier est heureusement appelé default. Donnons le nom de ce composant, de cet ensemble de composants, appelons-le Ticksfield ou épelons-le correctement cette fois, Et je pense que celui par défaut est bien. Ce que nous allons faire, c'est en avoir un actif, d'accord ? Vous en avez souvent une active, une erreur et peut-être une désactivée. Il peut s'agir d'autres versions, mais passons à la version par défaut, optons pour une version désactivée. Et je vais juste passer en revue et dire que la différence entre vous était de 90, c'est vrai, 90. Tu vois ce que j'ai fait là-bas ? Je viens de taper 90 Cela suppose que vous voulez dire 1990, 1990. Souvent, ces chiffres se répètent, surtout si vous utilisez une échelle de gris. Je veux que ce soit pareil, 90. Cliquons dessus. Où est la variante 2 ? Je ne veux pas être appelé variante deux, je veux qu'on l'appelle désactivé. D'accord, je n'ai pas besoin d' ajouter de description ou de documentation à cela car c'est assez explicite. Celui-ci va être mon actif. Lorsqu'il est actif et que vous cliquez dessus, il produira quelque chose d'extraordinaire. Le texte va redevenir noir. Peut-être que la ligne extérieure indiquera qu'il est utilisé. Je vais donc utiliser l' un de mes styles. Je vais utiliser cette couleur d'accent parce que je ne sais pas. C'est trop proche de l'époque, donc je vais peut-être utiliser celui-ci pour l'agrandir un peu. Un AVC, un AVC que nous pouvons tester et revenir. OK, et le dernier sera Era. Nous allons donc mettre beaucoup de rouge partout. Du rouge, du rouge, du rouge, comme une petite touche de rouge. C'est cool ce que vous pouvez faire avec ces variantes. Vous pouvez créer des choses vraiment complexes. OK, et comme nous avons commencé avec un composant, nous l'avons ajouté par la suite. Allons jeter un coup d' œil à ce qui s'est passé. Tu es prêt pour ça ? Tu penses que tu devrais peut-être recommencer ? D'accord, mais comme ils utilisaient tous ce composant d'origine et que nous avons développé ce composant pour en faire une variante, nous pouvons maintenant, en fait, vous avez mal saisi votre nom ici, la propriété. En fait, celui-ci l' est, je ne appelé erreur, appelez-le variante, mais vous avez bien compris l'idée. Alors peut-être que celui-ci n'a pas de variante. C'est où ? C'est parce que nous nous souvenons de les avoir regroupés dans un cadre, je vais donc y entrer. Je peux dire que tu es comme un handicapé. Vous êtes également handicapé. Vous avez l'idée des composants. Génial Ajouter des variantes , très spécial, sympa. Ce formulaire a l'air moche. Je dois enfreindre les règles de mes colonnes. Ce formulaire a l'air moche. Maintenant, les formulaires se font à la volée, je dois les tester sur mon téléphone pour voir s'ils sont assez grands. Je dois jouer avec l'espacement. OK. Je dois revenir à ce nom d'origine. Les choses vont mieux. Je ne sais pas si je faisais quelque chose comme ça maintenant. OK. J'irais chercher un autre formulaire créé par quelqu'un d'autre qui ressemble à un formulaire. Et digne de confiance. Il y a quelque chose qui ne semble pas digne de confiance. Jetez-y un œil. Qu'est-ce que c'est ? J'ai fait quelque chose de mal. OK. Je regarde probablement ce que font Mac et désolé, ce que font Apple et Android, d'accord, pour créer leurs formulaires. Parce que je veux en quelque sorte égaler ça. Je veux que les gens se sentent en sécurité en cliquant sur mon bouton. J'ai l'impression que le mien n'est pas en sécurité. Très bien, revenons donc à mon composant et activons ce dernier. Appelons-le lui. Je ne sais pas, qu'en avez-vous pensé ? C'est plutôt agréable de commencer à enchaîner des choses et de voir à quel point c'était facile C'est comme un gros batteur qui crée des variables. Au moins, j'en ai fait une batterie dans les dernières vidéos, mais en fait, vous pouvez créer des variantes à mi-parcours. Vous n'avez pas besoin d'être totalement proactif, donc tout ira bien pour nous. Je veux te montrer un peu comme celui de quelqu'un d'autre. Je vais donc voir où c'est amusant. J'ai donc en quelque sorte examiné cela plus tôt. Alors regardez celui-ci qui est l'un des hiboux. OK ? Tu te souviens comment ça s'appelle ? Comment ça s'appelle ? C'est ce qu'on appelle un ensemble de composants de cadre de contenu. Je l'ai complètement oublié moi-même. Cet ensemble de composants est donc agréable, convivial et facile. Et celui-ci ici, whoa. OK, il y a donc un tas de variables différentes. Maintenant, vous pouvez voir que je ne vais pas l'examiner entièrement, mais jetons un coup d'œil au panneau Actifs. Et l'avantage du panneau Actifs est qu' il ressemble à un champ de saisie, juste un vieux champ de saisie isolé. Tout cela s'y trouve. Alors, jetons un coup d'œil. Donc, ce qu'ils ont fait, c'est que vous pouvez voir qu'il existe trois options différentes, l'une avec des icônes, l'autre sans icônes. Il y a des erreurs. Il existe un groupe de messages d'erreur. Il y a un groupe de, il y en a, je ne suis même pas sûr. OK. Mais ici, ce qu'ils ont fait, c'est qu'ils ont dit que l'état est le champ rempli par défaut, le champ de saisie active , le champ désactivé. ce que nous avons fait. OK. Mais ils y ont également ajouté un message d' erreur. OK, y a-t-il une icône sur la gauche ? Ils ont fait beaucoup plus, mais très bien, si je le pouvais, étant donné qu'en tant que designer, je pourrais les utiliser, puis actionner les interrupteurs et les faire faire ce que je veux Et il existe une variable un peu plus complexe. OK ? Et c'est une variable multidimensionnelle. Lorsque vous les construisez vous-même, ils ne sont pas aussi confus. Oh, c'est ce dont nous avons besoin. OK, j'en ai besoin. Copiez ça. Allons par ici. C'est exactement ce qui va faire de moi, ça va tout arranger sur mobile. C'est ce dont ils ont besoin. Super sûr. Maintenant. En fait, c'est le cas. Cela lui apporte un peu de fiabilité. Très bien, c'est un exemple pratique d' utilisation de composants avec des variables pour créer un formulaire. C'est bon, c'est ça. Passons à la vidéo suivante. 83. Projet de cours 16 - Forme: Bonjour à tous. C'est notre projet de classe. Je veux que vous conceviez votre propre formulaire. Concevez-le sur votre page de paiement, comme nous l'avons fait dans la dernière vidéo. Je veux que vous fassiez une capture d'écran de votre formulaire fini et que vous m'envoyez une capture d'écran de votre champ variable. Je veux que vous vous entraîniez à utiliser une variable dans ce domaine et ce que je veux que vous fassiez, c'est en faire un peu un projet de recherche. J'ai fait le mien un peu à la volée. Je veux que vous regardiez un peu d'autres formes. Qu'en est-il du mien en qui vous avez confiance ? Qu'en est-il de cela que vous n'avez pas confiance ? Il y a quelque chose qui cloche là-dedans ? Je ne sais pas exactement ce que c'est. Ce que je veux que tu fasses, c'est être un concepteur UX et que tu partes vraiment voir ce qui manque vraiment. C'est peut-être un espacement, peut-être que c'est le type de coins arrondis, peut-être pas de coins arrondis. C'est peut-être la police, l'espacement, l'alignement. Peut-être les bords ici. Jetez un petit coup d'œil aux exemples d'autres personnes. Construisez le vôtre, et j'aimerais que lorsque vous le téléchargez, en particulier sur les réseaux sociaux, téléchargez celui-ci sur les réseaux sociaux de ce que vous avez fait et peut-être jeter les choses que vous estimez avoir donné la fiabilité de ce formulaire, surtout parce qu'il s'agit d'un formulaire de carte de crédit. Demandez peut-être conseil, peut-être si vous avez des difficultés et que d'autres personnes peuvent vous aider. Postez-le et voyons ensemble pourquoi. Je ne mettrais jamais les détails de ma carte de crédit sous ce formulaire, peut-être simplement parce qu'ils ne s'alignent pas là. Il y a quelque chose, de toute façon, faire votre forme, de faire vos variables. J'aimerais bien voir ce que vous faites. 84. Synthèse dans un exemple sur desktop: Bonjour, tout le monde. Cette vidéo, qu'est-ce que c'est ? Il s'agit d'une vidéo de production. J'ai besoin d'une version pour ordinateur de bureau. Nous ne l'avons pas encore. Je vais y travailler. Il n'y a rien de nouveau que nous allons apprendre ici. C'est juste un tour de moi qui fabrique quelque chose et vous montre comment lier des variables, mettre à jour des variables, utiliser certains des styles que nous avons utilisés. Je vais vous donner quelques raccourcis. Mais si vous êtes un designer compétent et que vous êtes plutôt bon chez Figma, vous vous sentez prêt, vous pouvez passer à la fin de celle-ci. Je n'aurai pas le cœur brisé, il n'y a rien d'essentiel dans cette vidéo si ce n'est que moi qui travaille et que je réalise ça. Cela vous surprendra dans la prochaine vidéo. C'est juste un cadre avec des trucs, il n'y a rien de fantaisiste là-dedans non plus. Parce que nous allons nous lancer dans le prototypage et nous en avons besoin. Je vais le faire dans cette vidéo avec la page d'accueil, quelques trucs et astuces, mais surtout un peu un peu de promenade. Profitez-en, sautez, c'est tout à fait correct pour moi. Mais si vous restez dans les parages, allons-y. Commençons. J'espère que je vais avoir l'air professionnel, mais ça va devenir désordonné et c'est le genre de choses que vous allez rencontrer, j'espère. travaillant sur la page du bureau parce que nous l'avons négligé dans ce cours, je vais activer ma grille, la grille oblique de commande avant, bien. Donc, vous descendez un peu. Maintenant, mes composants deviennent un peu désordonnés, donc je vais en ranger quelques-uns. Si vous cliquez dessus, il sautera sur la page sur laquelle se trouve, la voilà. C'était bien. Je n'en ai plus besoin là où je vais. Je n'ai pas besoin de toi non plus. Voyez-vous qu'il le met en évidence ? Si vous effectuez un zoom avant et que vous cliquez dessus, regardez ceci. Si je vais sur mon autre page, Composants, Pages et que je vais ici, et que je retourne à mes ressources et que je clique dessus, regardez ceci. Il le met en surbrillance sur la page. Il vous amène à la page, mais vous ne pouvez pas la voir. Vous allez être beaucoup zoomé. Voilà, c'est mis en évidence. Je n'ai plus besoin de toi parce que je fais une très grande variance. J'ai besoin de ce type ? Je le sais. Ai-je utilisé les autres endroits ? N'oubliez pas que même si vous le supprimez à partir d'ici, tant qu'il y a une instance quelque part, vous pouvez y revenir. C'est beau et bien rangé. Allons sur ma page. Maintenant, nous allons commencer par ce raccourci bonus. Sauter sur les pages, c'est lorsque vous êtes sur Assets, il les ferme tous. calques. C'est un peu plus exposé, mais vous pouvez toujours y accéder. Ce que je trouve le plus utile, peut-être pas. Si vous avez branché un PC ou un gros clavier sur votre Mac, vous pouvez utiliser la page suivante, la page suivante. Sur un MacBook Pro que j'ai, je maintiens la fonction et j'utilise la flèche vers le bas, et elle se déplace simplement dans les pages. Vous voyez ? Maintenant, ça semble très bizarre. Ce n'est pas bizarre. Mais pouvez-vous voir la petite tique qui se déplace ici ? Au bout d'un moment, vous avez une idée de l'endroit où se trouvent les choses. Je sais que c'est ma vue de bureau. Je vais le faire dans cette vidéo juste parce que je le fais. Panneau Actifs. Prenons notre logo. Logo Viens ici. Maintenant, c'est un composant, c'est cette taille. Il a été fait de cette taille pour notre mobile. Je vais l'agrandir, en maintenant la clé ou en appuyant sur l'outil du kit, la faire glisser un peu. On y va. N'oubliez pas que nous avons une couleur d'indexation primaire et secondaire. Je ne suis pas sûr de ce que je vais utiliser pour cela. Ajoutons un peu de texte ici. Je vais dessiner une boîte de largeur fixe qui va de cette colonne à cette colonne. Je vais taper ma « musique pour notre peuple ». Sélectionnez-le tout. Nous allons utiliser certains de nos styles. Rappelez-vous que j'ai dit que je n'allais pas utiliser zéro parce que c'était vraiment grand, en utilisant totalement notre vue de bureau. C'est ce que je veux. C'est ce que je veux faire. Je veux ajouter quelques boutons. Nous avons créé quelques variables plus tôt. Je vais m'en servir. Vous pouvez voir ici que nous les avons rassemblés avec ces choses et choses que nous avons faites plus tôt. Ce bouton ici en contient quelques-uns. Est-ce que je veux un petit ou un grand ? Je veux le petit, s'il vous plaît. Celui-ci peut rester la couleur principale. Je vais en faire un autre. Le problème avec celui-ci est que je veux la vue générale. Allons réparer celui-là. Je vais cliquer dessus avec le bouton droit de la souris et dire, emmenez-moi vers le composant principal. Le voilà. On va devenir un peu fou avec ça. Je n'en ai pas besoin. C'est juste un exemple de cela. Allons devenir un peu dingues. Commençons par créer la couleur d'accent du bouton. Je n'ai pas ça. Je n'ai que primaire et secondaire. Je vais choisir ça, attraper ce type, Commande D, Contrôle D. Ça dérange mon flux. C'est vrai. Nous pouvons rendre cela plus grand souvenir. Faisons en sorte que c'est vraiment grand. Vous pouvez descendre ici tous les deux. Celui-ci va être petit, secondaire. Je vais d'abord en changer la couleur. N'oubliez pas notre point de vue. Celui-ci va être de couleur x. Ce que nous remarquerons, c'est que pouvez-vous voir celui-ci dit si vous voyez que c'est mauvais, les choses ne vont pas marcher. Les propriétés et les valeurs de variance sont contradictoires car nous l'avons dupliquée. C'est exactement la même chose, c'est tout aussi petit et secondaire. Figma n'a donc aucune chance de travailler celle que vous voulez dire. J'ai besoin d'une autre propriété. Je peux soit revenir à l'extérieur et dire, j'en ai besoin d'une autre ici, donc cette propriété, j'en ai besoin d'une autre maintenant. Je n'en suis pas sûr. Défaisons ça. Revenons à toi, cette variante, faisons-le ici. C'est plus sûr. Ajoutons-en un nouveau. Celui-ci s'appelle un accent. Maintenant, il n'y a plus ce problème. J'en ai probablement besoin d'un autre. Je vais dupliquer ça. Celle-ci va être la couleur d'accent. Donnons-lui en fait la couleur d'accent. Ce que vous avez tendance à faire, c'est de les parcourir toutes une fois que vous les fabriquez, surtout lorsque vous êtes nouveau, pour vérifier s'il y a des erreurs. Je l'ai eu. La prochaine chose que je veux faire est la vue générale. En gros, tout ce que je vais faire, c'est de vous attraper et d'aller sur un ensemble de contours. Je dois l'agrandir un peu. Certainement vers cette version géante. Je vais faire un aperçu général de tous ces éléments. En fait, je n'en aurai jamais un aperçu, donc je vais le garder bien et propre. Ces gars-là sont encore problématiques parce qu'ils ne savent pas quoi faire. Faisons en sorte que cela devienne un troisième niveau multidimensionnel. Là, donnons-lui une autre variante non pas , la propriété, qui est ici. Celle-ci va être la version contour. Vous allez être la version contour. Parfait. J'ai défini le coin par défaut. Le contour va être activé. Tous ces gars, je vais tous les sélectionner. Je vais dire que vous n'avez pas de remplissage. Pouvez-vous voir quand vous avez sélectionné beaucoup de remplissage, cela indique que je ne sais pas quoi faire ? Cela vous donne un indice, juste ceux qui ont été placés avec Accent 1. Lorsque je le supprime, je ne veux pas de remplissage. J'aimerais un accident vasculaire cérébral. Il y aura probablement 2, 3, 2, 2, 3. Nous pouvons revenir. Nous allons commencer par trois. Celui-là va être le coup de primaire, coup de secondaire, le coup d'accent. Ces boutons ici, maintenant pour cliquer sur des choses à l'intérieur d'autres choses, nous l'avons fait plus tôt. Nous avons une commande complète et vous pouvez cliquer à l'intérieur. Si je maintiens la touche Maj et Commande, je peux cliquer sur de petits morceaux dans ces cadres. Sinon, je ne peux pas cliquer sur si je maintiens la touche Maj enfoncée et que je clique dessus, cela saisit tout. Je veux juste saisir les morceaux de texte à l'intérieur de ces cadres. Je tiens juste Shift. Ensuite, nous allons être blancs. Nous l'avons ajouté à la propriété. Celui-ci est petit ici. Il est primordial et il y a un aperçu. Qu'est-ce que c'est ? C'est petit, primaire et le contour est allumé. Maintenant, éteignons celui-ci. en va de même pour celui-là, et celui-là. Je peux en sélectionner plusieurs. Donc, vous êtes la vision hors de la vision, comme ça. Elles sont toutes grandes. Ce sont des couleurs mixtes, mais je peux tous les faire disparaître en termes de contour. N'oubliez pas que nous utilisons sur et hors tension. J'espère que nous pourrons y aller, petit, j'ai besoin qu'il soit coloré en accent et je pourrais activer le contour. Je vais cliquer dessus. Allons à notre page, à flèche vers le bas ou à notre page vers le bas. Vous ne trouverez peut-être pas ce raccourci utile, mais maintenant je peux dire petit. Vous trouverez peut-être celui-là. Je veux que vous ayez une couleur secondaire et je veux le contour. Je vais changer le texte. Celle-ci va être l'achat maintenant. Celui-là, il va être qui en apprendra plus. Vous remarquez qu'ils ne se sont pas cognés ? Ils s'intègrent bien là-dedans. Mais si vous faites ce truc de choc, qui se souvient de ce que c'est ? Ces deux-là doivent être transformés en quelque chose parce que nous avons utilisé la sélection intelligente. Nous aimons la sélection intelligente. Cela signifie simplement que nous n'avons rien à leur faire et que nous pouvons les attraper et les déplacer. Mais si vous voulez qu'ils interagissent tout le temps, vous les sélectionnez et les définissez automatiquement. Tout ce que cela veut dire, c'est qu'ils se référenceront mutuellement. Allons acheter. Celui-là va être le plus en savoir plus. Ce n'est pas vraiment nécessaire, mais nous apprenons. Ajoutons notre navigation le long du haut ici. Je vais utiliser le même bouton. Le problème avec ces boutons, c'est que je n'aime pas les coins arrondis sur tout. En fait, ajoutons tout d'abord le texte. En fait, transformons cela en mise en page automatique car je veux qu'ils s'ajustent au fur et à mesure que les choses s'ajustent. Cela me donne l'occasion de vous montrer quelque chose de cool. Pour le moment, nous allons ajuster celui-ci. Ce sera mon panier ou mon panier, appelons-le panier. Pouvez-vous voir que c'est un peu de gauche à droite ? Ce qui n'est pas ce que je veux. Qui se souvient du terme pour qu'il s'en tienne à ce côté-ci ? Vous êtes comme, « Je me souviens. » Vous avez la main levée. Je vous choisis. Qu'est-ce que c'est ? Il s'agit de contraintes. Je l'ai sélectionné, il ne doit pas nécessairement s'agir d'une mise en page automatique, mais il doit s'agir d'un cadre. Vous pouvez dire que vous vous contraignez de ce côté-là. Ce qui se passe, c'est ce que je veux vous montrer. Regardez ça. Si je vous déplace là-bas, c'est contraignant pour ma grille, mes guides, ou même mes colonnes, au lieu du bord du cadre. Parce que lorsque nous utilisons des colonnes comme celle-ci, surtout ça ne colle pas à la colonne, c'est vraiment coller à la marge, au bord ici. Cela signifie simplement que si j'ajuste maintenant cette chose ici, elle va s'en tenir à cette colonne plutôt qu'au bord de la page. Juste quelque chose à noter qu'il colle aussi aux colonnes. Vous ne pouvez pas le voir, mais il le fait toujours. Il s'en tient ainsi. Maintenant, si je pars, vous êtes un panier et vous êtes à la maison et vous êtes un compte. Je veux que tu sois secondaire et que tu puisses être la sortie, toutes les couleurs. Maintenant, ce que je veux faire, c'est que j'en veux un qui n'a pas coins arrondis parce que j'ai l'impression qu'ils ont des significations différentes. Ce type de boutons de navigation, et ce sont des boutons supplémentaires. Va ici et fais ça. Je veux que ces boutons de navigation n'aient pas de coins arrondis. Cliquez avec le bouton droit de la souris pour aller au composant principal. Pourquoi ne puis-je pas le voir ? Parce que mes petits composants sont en fait à l'intérieur de cette chose est la mise en page automatique, voir dans les calques. Ils sont là. Mais j'ai cliqué là-dessus. C'est pourquoi je n'ai pas pu le faire ? Ce que vous pouvez faire est de cliquer sur Commande comme l'un d'entre eux, puis de cliquer dessus avec le bouton droit de la souris et de dire aller au composant principal. Une autre chose que vous avez peut-être remarqué, c'est que cette chose est vraiment grande. Vous pouvez en fait, avec votre panneau des couches et des ressources, vous pouvez agrandir et plus petit, car à mesure que nous ajoutons ces étiquettes supplémentaires, vous remarquerez qu'elles vont le faire sortir et que vous devez l'étendre pour voir des choses. Jetons un coup d'œil. Je veux ajouter une autre propriété. La façon dont vous les organisez dépend totalement de vous. Disons que je veux avoir l'air d'être une bonne idée de les séparer de cette façon. Maintenant, ce que je vais faire, c'est que je vais t'y aller, je vais en traîner un autre morceau. En fait, avant de faire cela, j'ajouterai la propriété. J'ai de la taille, de la couleur, du contour, et je vais faire une nouvelle propriété qui s'appelle autour des coins arrondis. Je pourrais ajouter non seulement une propriété, mais nommons les coins arrondis et ajoutons une variante à celle-ci également. Cela n'a pas fonctionné. Ajoutons ensuite la variante. Coins arrondis. Dupliquons cela et appelons ceux-ci ajoutés nouveaux. Celle-ci va être arrondie dans les coins. Vous pouvez commencer à comprendre pourquoi maintenant vous avez cessé d'en avoir besoin parce que vous commencez à devenir assez compliqué, mais nous savons ce que nous faisons. Tous ces éléments sélectionnés, je vais dire que vous avez arrondi les coins de zéro ou peut-être juste un minuscule minuscule. Mon bureau est un peu allumé. C'est comme s'ils étaient tous en place et rangez-les. Regardez ça. Regardez à quel point nous sommes bien rangés. Cliquez sur le cadre extérieur du composant. Rangons-le aussi. Est-ce que ça va marcher ? Je ne sais pas. C'est peut-être le cas. Nous allons voir s'il y a des erreurs. En fait, je ne l'ai jamais vérifié. Je joue avec et s'il se brise, je reviens vérifier lequel est cassé. est peut-être bien. Allons l'appliquer. Fonction vers le bas ou page suivante. Cliquez sur l'un d'entre eux en maintenant la touche Commande. J'essaie de cliquer sur la touche Maj. Je saisis tout ça, je vais dire que les petites couleurs sont mélangées. Le contour n'est pas ce que je veux changer, mais les coins arrondis sont désactivés. Sentez-vous tellement satisfaisant. Nous travaillons sur la page d'accueil et nous devons passer à la suivante. Nous savons que la flèche vers le bas ou la fonction vers le bas se déplace vers la page suivante. Vous pouvez réellement passer à l'image suivante. Si vous voulez passer à l'image suivante. Je vais zoomer, Maj deux et dire que je veux passer à la suivante, il suffit d'appuyer sur la touche In. C'est une bonne façon de basculer le changement de vitesse vers l'arrière. Vous avez traîné si longtemps dans la vidéo, vous obtenez un raccourci bonus. Je vais en descendre un. Nous y sommes arrivés. La prochaine chose que je vais faire, c'est ce modal. Nous allons l'utiliser dans les prochaines vidéos, nous devons donc le construire. Pratiquons ce que nous utilisons. Je vais commencer par un cadre ou un rectangle sans raison valable, je vais lui donner un remplissage de mon dégradé. Je vais lui donner des coins arrondis qui apparaissent, inscription fait habituellement le truc. J'ai en fait une image que j'ai découpée dans la commande photoshop shift K et qu'elle s'appelle cassette. Il sera dans les fichiers d'exercices si vous le souhaitez. C'est énorme d'un mégaoctet. Je vais maintenir la touche Maj et le faire glisser. Quelque chose comme ça. J'adore ces choses qui se projettent sur les bords. Tapez Tool stocke une boîte de largeur fixe. Tout le texte a été sélectionné. Revenons à utiliser la vision zéro. Je vais soulever l'alignement sur le fait qu'il est tout sélectionné, Maj de commande L pour aligner à gauche. Maintenant, certains raccourcis sont totalement ridicules. Je le connais parce que si vous planez au-dessus, ses tiques, la ligne gauche et droite. Vous êtes sur un PC. C'est probablement quoi ? Contrôlez Alt L. Nous y arrivons maintenant en termes de taille, c'est probablement le décalage zéro. C'est probablement une bonne chose à 100 %. Nous savons quel genre de collaboration avec nous. Prenons à nouveau mon outil de type. Celui-là, c'est trop gros, on va l'utiliser. Même si cela fait partie de mon style de paragraphe ou de mon style de texte, je ne peux pas faire tout ce truc de boîte à largeur fixe. Il est en fait là pour une raison quelconque. Vous y voilà. Je veux que ce soit ça. Je vais fixer la hauteur, donc elle se dilate car nous en avons besoin juste pour le ranger afin qu'il ne soit pas blanc principalement. Même chose avec celle-ci, je vais sortir une boîte et je vais voir que vous êtes ce genre de version inférieure extensible. Je vais changer mon style en paragraphe et celui-ci va dire que je vais accélérer ce peu. Je ne peux pas épeler, c'est là que tu voulais dire ? C'est ce que je veux dire. Merci, Google. Je vais utiliser mon champ de texte de forme douce. Je pourrais revenir en arrière et ajouter une autre variable pour un arrière-plan rempli, mais je peux simplement modifier cela. Rappelez-vous, ces choses que vous pouvez simplement passer outre. Je vais mettre un remplissage en arrière-plan. Si je veux cette étiquette, je vais la supprimer. Est-ce qu'il a été supprimé ? Vous savez que ce n'est pas le cas. Je l'ai supprimé et il l'éteint. Il est toujours là. Il va gâcher ma doublure de choses. Prenons nos actifs, prenons notre bouton, inscrivez-vous. S'il vous plaît, mettez-le ici. Je veux absolument la version des coins arrondis. Vous pouvez être primaire, secondaire ou aucun d'entre eux ne fonctionne. Bouton de dégradé, puis ça va le faire. S'abonner. Si nous voulions pousser dans l'autre sens, nous le sélectionnons. Avant de le faire, nous allons l'annuler. Si je veux que vous quittiez ce côté du cadre extérieur. Maintenant, quand je tape, regardez-nous. On est fantaisie. rapport de contraste ici ne fonctionnera probablement pas comme si ce n'était tout simplement pas suffisant du contraste, mais je vais le reconnaître et passer à autre chose. Changeons également les tiques de l'échantillon. Mon petit cadre va avoir un effet d'ombre portée. Cela suffira probablement jusqu'à ce que nous le connections dans notre prochaine vidéo. J'espère que cela a été utile. Vous avez été totalement capable de l'ignorer. Il y avait quelques bonus là-dedans et je pense que c'est agréable de voir des gens travailler. Je ne suis pas un designer super incroyable, mais c'est agréable de voir cela arriver et être utilisé dans différents cas. J'espère que c'est le cas, de toute façon, c'est fait maintenant. Passons à la vidéo suivante. 85. Comment ajouter un calque de popup modal en superposition dans Figma: Bonjour à tous. Dans cette vidéo, nous allons faire quelque chose comme ça. Il y a une fenêtre pop-up Modal, qui couvre l'arrière-plan. Dans notre cas, nous allons faire un bulletin d'information, mais il peut s'agir de n'importe quelle fenêtre contextuelle. Confirmation, voudriez-vous ? Vous êtes sûr ? Ce genre de choses. Nous allons cliquer en arrière-plan, ça disparaît. Je les adore. Permettez-moi de vous montrer comment vous y rendre ici à Figma. La façon dont cela fonctionne, c'est que vous avez besoin d'un cadre, près de celui-ci, quelque part dans votre page. Il peut s'agir simplement d'un vieux cadre. Dans la dernière vidéo, nous en avons conçu un peu plus fantaisiste. Nous allons sélectionner la page d'accueil. Ensuite, nous passons en mode Prototype, et je vais dire que vous y allez. Je ne veux pas être sur le clic, ce que je veux dire, c'est peut-être après un certain temps que je vais taper dans quatre secondes. Ce n'est pas quatre secondes. Il y a quatre secondes. Je ne veux pas naviguer vers, je veux ouvrir une superposition. C'est là que la magie se produit. Nous laisserons tout par défaut et allons le prévisualiser. J'attends, hé, c'est apparu. Vous vous en débarrassez-vous. Il y a deux ou trois choses que nous devons faire. Si vous ne l'avez pas sélectionné, cliquez sur la petite ligne et dites après retard, cool. Soyez au centre, fermez lorsque vous cliquez autour de l'extérieur, ajoutez une superposition d'arrière-plan. Cela va assombrir l'arrière-plan, j'aime le faire un peu plus sombre, donc c'est un peu évident. Cinquante, même. Dans l'animation, je vais l'amener à se dissoudre. Je vais cliquer sur la page d'accueil, aller sur mon bouton d'aperçu. Je vais devoir appuyer sur R pour une réinitialisation, attendre mes 4 secondes et passer du temps. Vous pouvez le faire avec n'importe quel type de pop-up modalement. Nous le faisons pour vous inscrire à la newsletter, vôtre peut être un bouton. Tout ce que vous faites, c'est qu'il ne s'agit pas d'une newsletter qui s'affiche automatiquement, c'est quelque chose pour confirmer quelque chose ou que vous avez cliqué sur un bouton. Disons que ce bouton va faire la même chose. Mais lorsque vous cliquez dessus, au lieu de notre retard, si vous ne pouvez pas retarder un bouton. Lorsque vous cliquez dessus, ouvrez-le en superposition. Normalement, il passe à Naviguer vers. Vous pouvez ouvrir cette superposition. Allons sur notre page d'inscription à la Newsletter, toutes ces mêmes choses. Allons-y et supprimons celui-ci parce qu'il va essayer de se battre. Il va apparaître automatiquement, ce retard. Maintenant, si je clique sur ce bouton, j'espère qu'il devrait s'ouvrir. Allons-y un coup de fouet. Allons appuyer sur Reset. Rien ne se passera à moins que je clique sur ce bouton et qu'il apparaisse. C'est peut-être un, êtes-vous sûr ? Vous êtes sûr d'être sûr ? Vous êtes sûr de vouloir supprimer des choses ? Ce que je veux dire par là, c'est jeter un coup d'œil, je viens de googler l'inspiration pop-up. Vous pouvez voir qu'il y a beaucoup de modaux pop-up différents. Il assombrit simplement l'écran, n'est pas obligé de quitter la page, il peut s'agir de n'importe laquelle de ces choses. C'est mon modal pop-up. Passons à la vidéo suivante. 86. Comment réaliser un prototype d'infobulle dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons créer cette petite infobulle qui apparaît lorsque vous cliquez sur l'information CSV. Il y a beaucoup de choses comme la carte, infobulle et la petite icône d'information ici. Je vais faire pour vous si vous pouvez suivre tout ça. Mais si vous voulez juste vous lancer dans la poursuite, ce que vous devez faire c'est, laissez-moi vous montrer que vous avez un cadre ici. Dans notre cas, ce n'est qu'un cercle, et nous avons un autre cadre ici, qui est mon infobulle avec quelques textes. Pour les connecter, vous cliquez dessus, vous dites, allez là. Lorsque vous avez tapé sur, accédez à l'infobulle. C'est mal. Je veux aller sur Activé, Ouvrir la superposition à l'infobulle et au lieu d'être centré, je veux passer à Manuel et vous verrez cette version fantôme de celle-ci. Il commence par là, lorsque vous cliquez dessus, il apparaîtra où que ce soit. Mettons-le là. Donnons un aperçu. Vous cliquez dessus et il apparaît. Nous allons le faire, la version longue en construisant tout cela. Restez dans les parages si vous voulez le voir. Sinon, passez directement au positionnement manuel. Commençons avec [inaudible] Faisons une infobulle sur la page de paiement. Il va falloir dessiner deux parties, la gâchette, un petit bouton qui le fait apparaître, puis un petit bouton. O pour l'outil ovale ou l'outil cercle. Essayez quelque chose de la bonne taille, c'est de la bonne couleur. Je vais ajouter cette petite information Eye, qui va dans l'infobulle. Je vais utiliser l'outil Texte, cliquez une fois. Je vais le taper, je ne vais probablement pas utiliser ma police, je vais utiliser Roboto ou j'ai commencé à utiliser Open Sans pour des informations. Voyez-vous la différence entre Roboto et Open Sans ? D'accord, ce sont des polices différentes. Mettons ça au milieu. Faisons le blanc. Centreons-les tous les deux. Maintenant, le centrage existe un raccourci, c'est l'option H de leur envoyer horizontalement et l'option V pour verticalement. OK, sur un PC, il suffit de maintenir la touche Alt enfoncée et H ou V pour horizontalement ou vertical. Ok, peut-être que vous êtes de l'autre côté, les deux ont sélectionné l'option H. Maintenant, parce que nous avons affaire à quelque chose de si petit, nous n'avons qu'un seul Pixel, nous ne pouvons pas chevaucher la taille des pixels, quelque chose comme dans Photoshop. Vous devez donc vous assurer que le cercle est assez grand pour avoir un espace au milieu. Pouvez-vous voir cette ligne là ? Option H. Nous y allons. Ok, vous aussi pouvez passer beaucoup trop de temps pour être un petit déclencheur. Donc j'ai les deux, dépensez deux de plus pour être audacieux. Je ne sais pas pourquoi. Non, ce n'est pas le cas. Très bien. Alors, avec eux sélectionnés, je vais les transformer en petit cadre. C'est Command Shift G, ou cliquez dessus avec le bouton droit de la souris, transformez-les en cadre. J'appelle ça mon, ça va être une infobulle et ça va être le déclencheur. OK, construisons l'autre partie. Prenons donc un rectangle. Je pensais que nous utilisions des cadres pour tout. J'utilise un rectangle ici parce que je veux le saisir. Je veux que vous commenciez à utiliser ces trucs booléens et vous ne pouvez pas le faire avec des cadres. Il existe un de ces cas d'utilisation où nous pouvons utiliser des rectangles et des triangles. Bon, donc je veux le faire. Je les sélectionne donc l'option H, les centrerai ensemble, et lissons-les. Si vous cliquez simplement sur le premier, c'est Union. Voilà, c'est celui que vous utilisez le plus et je vais double-cliquer dessus et je vais saisir les coins. J'ai des coins de course très incohérents tout au long. Vous auriez dû, j'en ai deviné quatre. Vous devriez avoir de la cohérence dans les coins de votre type d'application. Je vais les sélectionner, sorte que l'infobulle et ces unions se déplacent, afin que je puisse cliquer sur ce premier, maintenez la touche Commande enfoncée afin que je puisse cliquer sur ce premier, sur un Mac. Touche de contrôle sur un PC, sélectionnez les deux et à nouveau, l'option H. Donc ils s'alignent. Cela pourrait faire apparaître un peu ça. Je veux aussi qu'il soit blanc. Prenons du texte dedans. Cliquez et faites glisser le curseur pour obtenir une zone de largeur fixe. OK. J'ai des textos pour le mettre là-dedans. La boîte n'est tout simplement pas assez grande. Double-cliquez, entrez à l'intérieur pour qu'il me manque un rectangle, quelque chose comme ça. Je vais également le basculer à la hauteur fixe. Je vais dire une hauteur fixe, je veux dire, Hauteur automatique. Je vais aussi le centrer. Bon, et passons à l'ombre Drop Shadow. Il se passe beaucoup de choses. Très bien, changez l'ombre portée. Je vais les coller tous les deux dans un cadre, donc c'est une sorte d'unité. Ok, ça doit être un cadre. Nous allons dire qu'il s'agit de la fenêtre contextuelle d'infobulle. Cool, il y en a deux. J'ai ce truc. C'est mon déclencheur d'infobulle et j'ai ça. Maintenant, le mien est un peu rentré là-dedans. Ça n'a pas d'importance. Sans doute pas. Le mien est un peu mêlé dans ce groupe. Non, ce n'est pas le cas, on va te sortir de là. Alors ils sont là, mettons-les l'un en dessous de l'autre. Donc, cette chose commence, regarde ce dossier, comme l'autre que nous avons fait. Ok, et ce que nous disons, c'est quand on vous clique, alors passons au prototype. Disons que quand on vous clique, je veux que vous alliez ici. OK, et Au toucher, ce qui est génial, accédez à l'infobulle. En fait, je veux qu'il ouvre la superposition. Ok, et la différence entre celle-ci, c'est qu'il est là-haut et il peut apparaître au milieu. Ça ne va pas être sans valeur, nous allons simplement le prototyper rapidement. Je vais cliquer sur ce bouton et il apparaît au centre de mon écran. Je voulais qu'il soit juste au sommet. Donc, ce que vous devez faire, c'est changer cela pour dire, nous l'avions centré, probablement vu qu'il y a en haut à gauche, haut à droite, en bas au centre. Ce sont les principaux. Il y en a un tas d'autres, y compris le manuel. Ce que fait le Manuel, c'est qu'il vous montre une sorte d'aperçu de l'endroit où il va apparaître. Je vais donc dire que vous y voilà. Il y a mes touches fléchées juste pour le faire baisser. C'est donc là que nous le gardons ici à des fins de travail. Il n'est donc pas à l'écran et il apparaît ici. J'ai dit que ça va se superposer. Il ne va pas se dissoudre. Ça va juste apparaître instantanément, je ne vais pas griser l'arrière-plan. Nous allons le prévisualiser, je vais le présenter. Allons-y. Vous regardez ça. Je clique en arrière-plan, rien ne se passe. Alors, faisons-le. Disons donc que chaque fois que quelqu'un clique dans la zone d'arrière-plan, il se déclenche. Très bien, prévisualisez-le encore une fois. Je dois arrêter de fermer cet aperçu. Cela prendra de plus en plus de temps, plus vous aurez d'images impliquées dans votre aperçu. Regardez ça, une petite infobulle cool. Très bien. Donc fondamentalement la même chose que la dernière, sauf que nous pouvons utiliser ce positionnement manuel. C'est le caractère unique de cette infobulle particulière. Très bien, passons à la vidéo suivante. 87. Que sont les flux dans Figma: Bonjour, tout le monde. Nous allons examiner les flux. Que sont les flux ? Ce sont ces choses. Vous avez probablement eu le flux 1 et le flux trois quelque part, et vous ne savez pas comment vous l'avez obtenu. Je vais vous montrer comment les utiliser, à quoi ils servent, comment les renommer. Toutes sortes de bonnes choses sur les flux de Figma. Allons-y. Vous avez déjà quelques flux ? Vous en avez peut-être un tas. Allez dans Prototype. Je suis sur mon mobile, j'ai un flux, vous pourriez en avoir un autre. Pourquoi auriez-vous plus d'un flux ? C'est parce que vous travaillez sur quelque chose d'autre, peut-être en bas, et que vous allez le prototyper, et vous êtes comme, je vais dessiner ceci sur celui-ci, parce que ce flux ne se connecte à celui-ci à aucun moment, ça monte, il faut commencer ici, et ici , donc tu pourrais en finir avec beaucoup d'entre eux. Pour s'en débarrasser, parce que vous ne savez pas encore vraiment ce qu'ils font. Ok, vous ne pouvez rien avoir sélectionné. Cliquez en arrière-plan, au-delà du prototype, et il y a un tas de flux, et vous pouvez en fait cliquer dessus et les supprimer. Bon, j'ai un flux et ça commence ici. Quel est le flux ? Allons-y en fait. Le seul prototypage que j'ai fait sur cette maquette mobile est sur cette page ici. Ça commence ici, ça va, je suis le début du flux. Vous pouvez le démarrer ailleurs en cliquant, en maintenant enfoncé et en le faisant glisser, puis par exemple démarrer le flux là-bas. Ensuite, quand on clique sur ce bouton, il va acheter maintenant, il va jusqu'ici, et quand on clique sur celui-ci, il va là. Vous commencez à le truquer. C'est donc ce flux particulier. C'est mon flux de commerce électronique. Faisons cela, appelons ça le flux de commerce électronique. Je vais cliquer en arrière-plan, je vais nommer celui-ci, je vais l'appeler eCommerce Flow. Parce que c'est ce que nous avons été chargés de faire. C'est le flux de tâches que nous faisons. Disons que nous avons terminé ce travail, nous devons maintenant travailler sur l'écran de connexion. Il s'agit donc d'un autre flux de tâches. Je vais voler un identifiant à quelqu'un d'autre. Je l'ai trouvé ici depuis Bravo Studio. Merci beaucoup. Figma est génial pour la communauté. Donc je vais vous attraper, vous, vous, c'est déjà truqué sous prototype, ce qui est sympa. Je vais le copier, et il apporte tous les prototypes ici, Shift-1 pour tout voir. J'ai tous ces trucs. Qu'est-ce que c'est ici ? C'est de la cochonnerie que j'ai construite tout au long de ce cours. Je vais coller celui-ci ici. Ça devrait être au-dessus, mais il y a aussi de la cochonnerie là-haut. Junk partout. le moment, il n' y a aucun moyen d'arriver ici. Donc, si je vais le prévisualiser, combien de pages avons-nous ? Nous avons un tas de cadres, nous allons le prévisualiser. Tout a commencé avec mon flux. Je n'ai qu'un seul flux, donc il ne me montre pas d'autres, et je peux cliquer dessus et aller travailler. Mais il n'y a aucun moyen d'accéder à cet écran de connexion, car nous commençons par la page d'accueil, nous sommes déjà connectés. On fait semblant. Je vais fermer ça, donc nous avons besoin d'un autre flux. Pour créer un autre flux, cliquez sur cette première page ici, et je vais commencer un flux à partir de ce point. Celui-ci ne s'appellera pas flux, cela peut s'appeler Login. Cela signifie que maintenant, quand je vais à mon prototype, réinitialiser, non, cliquez sur celui-ci. C'est là. J'ai deux types de flux. Je pourrais montrer à quelqu'un, et s'il sait ce qu'il fait, vous pourriez dire comme ces deux flux à gauche, vous pouvez commencer celui vers lequel vous voulez aller, parce qu'ils ne se connectent pas vraiment. n'y a aucun moyen de sauter à travers ces deux-là. Vous pouvez avoir plusieurs flux, vous connecter, peut-être l'écran d'annulation, peut-être comment modifier votre profil utilisateur, comment réinitialiser un mot de passe. Vous avez beaucoup de flux différents si votre prototype devient assez gros. C'est à cela que servent les flux. Vous pouvez en fait faire des trucs sympas, comme si vous pouvez simplement commencer le prototypage en jouant plutôt que de frapper celui-ci, là où vous ne savez pas où vous voulez commencer. Vous pouvez dire que vous commencez à partir de l'écran de connexion, s'il vous plaît. Ou celui-ci ici, partez de ce flux de commerce électronique. Vous pouvez faire un peu plus. Vous pouvez voir ici qu'il ne se passe pas grand-chose, donc nous ne pouvons rien faire de sélectionné, au-delà du prototype , trouver mon flux, vous pouvez cliquer dessus, non, vous cliquez dessus ici. Vous pouvez ajouter une description. Je ne me souviens pas où. Oh, c'est là. Je l'ai donc sélectionné ici, et vous pouvez voir ce petit crayon ici, entrer une description et vous pouvez dire : « Voici comment acheter les écouteurs ». Vous pouvez ajouter un peu à la description, ce qui pourrait être « Cela inclut les mises à jour de Doug ». Ainsi, lorsque les gens le prototypent, et qu'ils disent la connexion, ils peuvent voir cet écran et peuvent voir cela inclut les mises à jour de Doug. Vous comprenez l'idée. Vous pouvez le fermer. Maintenant, je trouve que c'est probablement, je ne sais pas, qu'il est un peu caché là-bas. Ce que vous pouvez faire, c'est que vous pouvez vraiment aller, donc si je clique en arrière-plan, voyez ces éléments, il y a cette option qui dit : voir ce petit lien ? Vous pouvez copier ce lien, et tout ce n'est qu'une URL, une URL volumineuse, longue et moche. Mais vous pouvez le mettre dans un e-mail, et dire : « Dave, c'est celui que et dire : « Dave, je veux que vous vérifiiez, et ce qui se passera, c'est qu'il ira exactement sur cette page de connexion. Vous n'avez qu'un seul fichier, mais Doug, ou Dave, ou quiconque est responsable de la connexion, peut y aller directement. Ou peut-être avez-vous reçu un e-mail avec quelques liens différents, comme « Hé, consultez le flux de commerce électronique. Le voilà. Hey, vérifiez le login. Le voici », et donnez-leur simplement deux liens distincts plutôt que d'essayer d'expliquer que vous entrez ici, puis cliquez sur cette petite chose qui ressemble à une boîte avec un rectangle. Il suffit de cliquer sur les liens. Très bien, c'est pourquoi vous avez des flux, et vous avez probablement le flux trois et le flux 17, juste suspendus. Très bien, donc c'est pour les flux. Oui, utile. Super quand on les renomme, est génial quand on obtient un très gros prototype. Très bien, c'est tout. Je vous verrai dans la vidéo suivante. 88. Menu de navigation défilant sur mobile dans Figma: Bonjour, tout le monde. Nous allons faire une petite glissade dans le menu de navigation qui entre et sort. Vous pouvez utiliser le bouton de fermeture, très facile à réaliser. Allons-y. Pour gagner du temps, j'ai créé une petite diapositive dans Menu, tout ce n'est qu'un cadre qui se trouve ici. Ce n'est probablement pas assez gros pour cliquer, je vais devoir le tester sur mon téléphone, mais j'y ai aussi fait un peu de croix. En fait, c'est juste un avantage de tourner de son côté pour que je puisse fermer les choses. Mais oui, commençons à le truquer. C'est toujours un monde superposé. Ce que nous allons faire, c'est la page d'accueil, nous allons passer à notre prototype et nous allons dire que lorsque ce bouton est cliqué ici, c'est un peu petit, et c'est bon pour le moment. Je vais dire que quand on clique sur ce bouton, allez-y. Je ne veux pas que tu y ailles. Je veux que vous ne navigiez pas, ouvriez une superposition. Au lieu d'un instant, je veux que vous emménagiez. Il va glisser, va y aller, prévisualiser-le. Cliquez sur vos gribouilleurs, et c'est parti. Il s'installe, c'est la mauvaise façon que je voulais. Jetons un coup d'œil. Je peux dire en fait, je veux que vous ne le déplaciez pas de cette façon. Il va de la gauche. L'assouplissement, faisons entrer et sortir facilement pour être un peu plus joli. Même chose, il y a du jeu. Je vais activer ma réinitialisation, cliquer sur ce bouton. Il est coincé là. Nous devons nous en débarrasser. Nous allons faire deux ou trois choses. La première est que nous allons trop le rapprocher lorsque vous cliquez sur l'arrière-plan. C'est ce que je veux. Je vais aussi l'amener à canard en arrière-plan. Ce que je vais faire, c'est que j'ai créé ce petit bouton ici. Ce que je veux que cette chose fasse, c'est quand on clique, en fait, je ne veux pas qu'elle aille nulle part. Je veux qu'il passe à une interaction quand il est cliqué . Quand il est tapé, ce que je veux faire, je veux qu'il ferme la superposition. C'est son travail. Il ne va nulle part, il se ferme simplement. Donnons-lui un aperçu. Cliquons sur un pour un rafraîchissement et cliquons dessus. Je peux cliquer n'importe où en arrière-plan ici. Maintenant, je peux cliquer dessus et il va fermer, avec un peu d'assouplissement et de sortie, l'obscurité en arrière-plan un peu. C'est plutôt sympa. Allons le truquer un peu plus juste pour voir parce que ce que je veux faire, c'est, le moment, si je clique ici et que je vais Fonctionnalités, je ne peux aller nulle part ailleurs. Si j'arrive à la page Fonctionnalités, la navigation n'a pas l'air. Passons en revue les motions parce que ce que je veux faire, c'est et j'en ai besoin, double-cliquez dessus pour aller à l'intérieur, pour faire la même chose. J'en ai besoin pour y aller et je peux dire On Tap, Overlay, le faire emménager. On se souvient de la dernière chose que j'ai faite, ce qui est génial. Cependant, il est souvent plus facile de le saisir, de le copier, et si je copie quelque chose, et que je le supprime et que je le colle, cela fera passer le prototypage. Donnons-lui un aperçu. Nous allons le réinitialiser pour Aki. Il fonctionne sur la page d'accueil. Si je vais dans le menu En savoir plus, cela fonctionne également ici. Ce que nous devrions probablement faire maintenant, c'est de double-cliquer dessus et de dire que ça va à la maison, qui va aux fonctionnalités, qui va à la coupe, et ça va sur la page de mon compte. Je n'ai pas de page de compte. Maintenant, la navigation va faire quelque chose et faire plus qu'un simple glissement. C'est une transition moche. Cette transition utilise toujours le mouvement parce qu'elle se souvient de la dernière chose que vous vouliez faire. Ce truc ici, passons à Tap. Je ne veux pas emménager. Je vais le dissoudre. Ça va marcher. Il en va de même pour celui-ci. Touchez cette chose pour dissoudre. Donnons-lui un aperçu, des fonctionnalités, voilà. Je vais glisser n'importe quel menu en plus de truquer un peu notre prototype. Ce sera tout pour cette vidéo. Je vous verrai dans le prochain. 89. Projet de cours - Prototypage: Bonjour à tous, l'heure du projet de classe. Je vais vous amener à réaliser quelques-uns des prototypes que nous avons réalisés dans les vidéos précédentes. Fondamentalement, la fenêtre contextuelle de la newsletter , l'infobulle et la navigation mobile qui glisse. Assurez-vous que l'infobulle s'appelle CVV, je l'appelle CVC depuis longtemps. Prenez des captures d'écran de toutes, soyez en mode prototype afin que je puisse voir les lignes qui les relient. Maintenant, le vôtre n'a pas besoin d'être comme un bulletin d'information, il n'a pas besoin de ressembler à la mienne. L'infobulle peut se trouver ailleurs, et votre navigation peut glisser depuis différents endroits du haut et ne pas ressembler à la mienne. Mais je veux juste que ces mécaniciens soient corrects, donc la superposition qui est chronométrée et surgit. Celui-ci est un peu cliquable, apparaît manuellement sur la page, et celui-ci est ici une diapositive de navigation, et nous avons également quelques autres petits boutons. Partagez-le ensuite dans la partie devis/projets/commentaires de ce site Web, et partagez-le également sur les réseaux sociaux. Je serais intéressé de voir comment se présente votre design, ressemble la petite forme, ce que vous avez fait avec la petite fenêtre contextuelle de votre newsletter. C'est tout, je vous verrai dans la prochaine vidéo. 90. 90: Bonjour tout le monde Dans cette vidéo, nous allons épingler des éléments en haut de la page. OK, pour que le contenu se glisse derrière. Nous allons le rendre un peu transparent. Nous allons également faire un pied de page. Mon pied de page n'est pas très spectaculaire. C'est une boîte. Ok, tu veux la version courte ou la version longue ? Nous allons commencer par la version courte. La version courte consiste à sélectionner quelque chose, disons une position fixe vers le haut. Pareil pour celui du bas, vous êtes dans une position fixe. Cochez cette case et collez-la sur Non, ce n'est pas le cas. Elle a disparu et la petite vidéo de mise à jour a été déplacée, ils vont juste se déplacer là où elle se trouve. Nous cliquons donc sur l'élément. Et lors de la conception, il y avait une option qui comportait une petite case à cocher que vous pouviez voir. Il est maintenant déplacé sous Prototype. OK, donc je clique sur Prototype. J'ai sélectionné l'élément et au lieu que la position soit le défilement, qui est la valeur par défaut, je veux qu'elle soit corrigée. Je veux qu'il reste en place. OK, et regardez mon petit aperçu. Et le look reste en place. Génial Ils viennent de le déplacer. Refaisons celle du bas. OK, je vais cliquer dessus et nous savons que ce n'est pas en cours de conception parce qu'ils l'ont déplacé C'est là que ce sera pour le reste de ce cours. OK, si je recommence, j'ai essayé de mettre à jour les vidéos qui en contiennent, mais tu sais que tu es du genre, je ne le trouve pas là. Il est actuellement en cours de prototypage. OK. Au lieu d'un défilement apparent, cela va être corrigé. La seule différence avec celui-ci c' est qu'il va être en quelque sorte corrigé. C'est bon Mais je voulais le réparer en ne m' en tenant pas au sommet. Vers le bas. OK. Donc, si je dois redimensionner les choses, elles resteront en bas Tout le reste de cette vidéo est bon et correct. Très bien, continuez. La seule autre chose vous devez faire est de vous assurer que votre cadre est prototype de votre cadre est réglé sur le défilement vertical. OK ? Et des trucs qui s'étendent réellement. Tu vois ça ? En fait, éteignons le mien. OK, je vais donc passer à la conception du contenu du clip. J'ai un tas de trucs à faire défiler. Deuxièmement, si vous ne l'avez pas, il ne défilera pas. OK. Cette page ne peut jamais défiler. Peu importe le nombre. Hmm, défilement du prototype, travaux horizontaux. Cela ne marchera pas de faire défiler des éléments. Fais-le comme par le bas. C'est bon. Alors, regardez. Défilement, défilement de la page d'accueil, page d' accueil, pas de défilement. C'est bon. Alors pourquoi cette vidéo est-elle si longue ? C'est parce que tu vas courir, c'est un, je veux te montrer comment je travaille mais aussi les problèmes que tu vas rencontrer. Nous allons examiner les problèmes liés à l'ajout de likes. À l'origine, nous n'avions pas ce fond noir, nous allons donc essayer de le forcer s'intégrer dans un composant existant. OK, nous allons rencontrer des problèmes avec la mise à l'échelle générale, des problèmes avec la mise à l'échelle comme des choses qui pourraient vous surprendre pendant que vous travaillez. Cela n'a pas l'air intéressant. Passez à la vidéo suivante. Allons-y OK, il est donc facile de se hisser au sommet. Il est tout aussi facile de le mettre en bas. Mais voyons pourquoi cette vidéo est-elle si longue ? C'est parce que je vais essayer de le faire à la mienne. Je veux y ajouter ce genre de fond noir. Je vais vous montrer certaines choses que vous finirez par rencontrer aussi lorsque vous le fabriquez à partir de zéro et que vous savez où vous allez. C'est facile quand vous êtes un peu laborieux et que vous le modifiez au partir de zéro et que vous savez où vous allez C'est facile quand vous êtes un peu fur Les choses peuvent devenir confuses. Si vous êtes nouveau, vous trouvez cela, vous savez, nouveau et passionnant mais difficile, recommencez. Il suffit de les ranger, vous savez, de les ranger et de recommencer et d'en créer un nouveau selon vos besoins. Mais disons que nous ne voulons pas le faire parce que nous l'avons utilisé un tas de fois. Eh bien, la première chose à faire est de remarquer comment les images se sont déroulées. Cela se produit de temps en temps sur ma version, principalement lorsque je m'occupe de l'historique des versions. Alors je le ferme et je l'ouvre à nouveau, il s'en va. Je vais laisser cela dans le cours car vous pourriez rencontrer la même chose. Vous vous demanderiez : où vont toutes mes images ? Ils sont là pour une raison ou une autre, ils disparaissent. Cela pourrait être juste en ligne. Quoi qu'il en soit, nous sommes de retour. Je veux ce fond noir là-dedans. Tout d'abord, nous ne pouvons pas ajouter le fond noir à cette instance. Cela m'a laissé là pendant une seconde. OK, donc nous voulons trouver le composant principal, alors cliquez avec le bouton droit de la souris et passons au composant principal pour lui. OK, il est juste là. Il devrait être sur la page des composants. Ce que nous allons faire, c'est placer l'instance là-bas et utiliser le naw principal Je vais le mettre ici pour que nous puissions tout mettre en ordre. Donc, en gros, ce qui s' est passé, c' est que nous avons ce qu'on appelle Top Nav. C'est un composant à l'intérieur duquel se trouvent les différentes icônes. Maintenant, il n'y a plus de cadre. OK, il n'y a aucun cadre qui l'entoure. Alors, comment puis-je le colorier ? En fait, le composant est un cadre. cadre et un composant possèdent tous les mêmes attributs qu'un cadre. OK, donc si je clique dessus, je peux y ajouter une couleur de fond Je vais utiliser le noir et je vais réduire la transparence. Tu es géniale, sauf que c'est un san. Faites un zoom arrière sur Excel. Allons-y d'un peu plus près. Et regarde ça. Si j'attrape ce type et que je me lance dans une opération, je me dis que ça ne marche pas, que ça reste. Pourquoi n'est-ce pas exagéré dans le look ? Vois ces gars. OK, jetons un petit coup d'œil. Nous sommes revenus à nos contraintes. Annulons-le à nouveau directement. Si je clique sur ce type, à l'intérieur de ce composant, il est écrit que Scott s'en tient aux écouteurs gauche et supérieur. En haut à gauche Mais l'ensemble du groupe, pour une raison ou une autre, jetons-y un coup d'œil. Tout mon cadre indique échelle. Ce qui n'est pas le cas. Donc c'est bon. Mais je vais désactiver ça pour ces gars-là. Si je clique sur lui, il m'a dit d'agrandir. Si je tourne son corps vers droite, je l'éteins en fait. Je m'en fous de ce que c'est pour le moment parce que je veux m'étirer. Je vais juste m'assurer qu'ils sont tous pareils. Assurez-vous que vos téléphones sont éteints. Sélectionnons celui-ci. Je ne veux plus évoluer. Je vais utiliser ce que j'ai fait. J'ai bien fait. Et pareil pour ces gars-là. Ces gars-là seront au top. Cela signifie simplement que lorsque je redimensionne le cadre ou le composant, d'accord, ils ne se déformeront pas. Cela tient en partie à ce qui n'a pas fonctionné. C'est quoi ce truc ? Quelle était la porte de ma maison ? J'ai oublié Ils ont même fait disparaître notre porte il y a quelques secondes. Voyons ce qui se passe là-dedans. OK, donc la porte est coincée d'une autre façon. Alors ouvrons une grande porte d'entrée centrale. Il a disparu il y a longtemps. Le rectangle ici est donc réglé à l'échelle, donc je vais lui demander de s'en tenir à droite. C'est la première fois que cela se produit au sommet. Alors j'espère qu'ils s'en vont maintenant. Allons-y. OK, donc je ne fais que déformer les choses. Il serait facile de le recréer, non ? Mais bon, qu'est-ce qui l' étire de haut en bas, ces différentes parties ici ? Ce rectangle est en haut et à droite, cette partie est réglée à l'échelle. Oh, il se passe toutes sortes de choses. Tu sais, quand je l'ai dit , tu peux l'aplatir. OK, je vais probablement l'aplatir. Maintenant, qu'est-ce que tu vas faire ? Je suis juste en train de vérifier toutes ces pièces, de vérifier l'échelle , toutes ces pièces, vous pourriez y aller, mon ami va être aplati C'est juste plus facile de travailler avec. OK. C'est ce que nous avons fait maintenant. Très bien, ces choses délicates apparaissent. Je l'ai comme ça maintenant. Je vais juste le réorganiser à l'intérieur de celui-ci. Il aurait été plus facile de le recréer, mais nous n'aurions pas appris grand-chose Tout semble un peu grand. Je vais le tester sur mon téléphone. que je n'ai pas testé sur mon téléphone longtemps que je n'ai pas testé sur mon téléphone pendant ce cours, et j'ai eu l' impression horrible qu'ils sont vraiment gros. D'accord, vous allez obtenir un 0 %, ce qui correspond au décalage zéro. Ouais. Ils ont toujours l'impression d'être encore très grands. Très bien, maintenant que je l'ai réparé et que c'est fait, je vais dire que vous êtes position fixe en haut et à gauche. Juste une petite interruption. J'ai oublié Je viens de remarquer que lorsque je le modifie, j'ai oublié de le mentionner ici dans le panneau des calques. Tu vois qu'il y a ce nouveau titre ? Il est dit que tout ce qui s'y trouve sera réparé, comme ce que nous venons de créer. Fixé. OK. Et tout le reste se trouve sous la rubrique parchemins Vous verrez donc que vous avez probablement des bits assez explicites là-dedans il y avait des bits fixes. En bas, il y a des parchemins. C'est bon, continuez. Et je ne veux pas vraiment m'en servir. Je vais le déplacer pour qu'il soit complètement inficiel. Déplacez-le sur la page du composant. Je vais faire venir cette personne ici. Et ces gars-là ont besoin d'un peu plus de queue. Celui-ci, ici. J'ai besoin d' être légèrement différent. Je suis peut-être en train de commencer à créer une variante, mais je suis paresseux. OK, donc je vais juste double-cliquer sur l'extérieur et me cacher. Impossible de le supprimer car il fait partie du composant d'origine. Il y a une petite lacune là-dedans. Je pense que celui-ci, pour une raison ou une autre, c'est quoi, 375 ? Celui-ci est probablement 376 pour une raison ou une autre. Pourquoi est-ce le cas ? C'est probablement à l'époque où je m'amusais à créer des variables ici Parfois, ils se mettent sur le côté et je les ramène dedans. Et je ne l'ai évidemment pas fait reculer dans le bon sens. Très bien, où est-il passé sur mon espace de composants, c'est vérifier. Où t'es-tu retrouvé ? Ça y est. Bonjour Là-bas. Tu peux y aller maintenant. Très bien, testons ça. C'est collé sur cette page. Maintenant, jetons un petit coup d'œil. L'autre chose qui n'arrivera peut-être pas à la vôtre, nous l'avons abordée rapidement au début, c' est disons cette page ici. Il y a en fait des choses à faire défiler vers le bas. S'il n'y a rien vers lequel faire défiler la page, elle peut descendre. Ça va aller, ah , mais ça ne marchera pas. Je parie que je clique dessus. Je passe au prototype. En fait, vous n'avez pas besoin de passer au prototype. Accédez à cet aperçu ou à cette présentation, ils l'appellent Look, rien ne se passe, ça ne colle pas au sommet. Le moyen d'y parvenir est de cliquer sur le cadre réel. OK, allez sur Prototype et vous allez demander, que faites-vous avec le trop-plein OK, pas de défilement, pas question. Je veux un défilement vertical. J'utilise très souvent le scroining horizontal, qui se fait à gauche et à droite OK. Par accident, des verticales que vous voulez monter et descendre. C'est bon, allons-y. Maintenant, nous avons commencé à faire défiler la page. Est-il fixé au sommet ? Ce n'est pas le cas. Mes amis sont conçus fixés sur le dessus. OK. Est-ce que celui-ci est fixé au sommet ? Faisons-le. Allons-y. Encore une fois. Très frais Passons à la petite page jackpot. D'accord, donc c'est épingler des choses en haut. Épingler des choses vers le bas n'est pas la même chose. Je vais dessiner quelque chose et dire que vous et mon ami êtes coincés dans la position fixe inférieure lorsque vous faites défiler Et tu ne seras pas en haut mais en bas. OK, allons-y. Faire défiler, défiler, faire défiler, faire défiler, des choses que vous pourriez coller en bas choses J'ai fait une petite recherche sur Google pour toi. Ce genre de choses apparaît dans certaines applications en bas de la page. Nous avons également vu ces snack-bars plus tôt. Ces petites choses temporaires qui apparaissent. Ce sont les éléments potentiels qui pourraient apparaître en bas de la page. Ce que vous pourriez envisager de faire, c'est de ne pas suivre le chemin. Je ne sais pas pourquoi ça ne me plaît pas. Oui, épingler des trucs en haut. Épingler des trucs vers le bas. C'est ça. Notre nef fonctionne et je le verrai dans la prochaine vidéo 91. Comment faire défiler par balayage horizontal dans Figma: Bonjour à tous. Dans cette vidéo, nous allons voir comment faire le défilement horizontal, bonté dans Figma. Laissez-moi vous montrer comment. Commençons par une version simple ici. Je ne sais même pas pourquoi nous les avons faits, mais ils vont servir leur but. Nous allons le faire avec quelques rectangles pour commencer. Nous allons faire 1, 2 et passer aux commandes D, D, D, D, D, D, afin qu'ils partent. Nous avons besoin de quelque chose qui sort de la page horizontalement. Je vais cliquer sur mon cadre et désactiver le contenu du clip juste pour pouvoir le voir. Je vais tous les attraper. Pour que cela fonctionne, toutes ces choses doivent être à l'intérieur d'un cadre, d'un composant ou d'une mise en page automatique. Toutes ces choses sous le rouleau sont comme un cadre, et c'est ce dont nous avons besoin. Je vais juste utiliser le cadre Plano, je commande l'option G. C'est un cadre, je ne vais pas lui donner de nom parce qu'il n'y a rien, et vous devez faire deux choses. Dans l'autre vidéo, rappelez-vous que nous avons dit, c'est un prototype qui fait défiler la verticale. C'est la même chose pour l'horizontale. Sauf pour faire ce cadre extérieur mobile, vous le faites sur ce cadre, et le cadre que nous venons de créer, nous disons que vous pouvez réellement avoir votre propre défilement, et vous dites défilement vertical. Vous pouvez utiliser cette petite erreur et cela ne fonctionnera pas car ce qu'il dit, c'est le cadre doit être petit, cela doit être clair. Est-ce qu'il va lire ? Mais ce que cela dit, c'est que si je travaille à la conception, il y a un cadre autour. Même si je clipse ça, ça ne marchera toujours pas. Regardez ça, si je reviens au prototype, c'est toujours un avertissement. Ce que cela dit, c'est que vous devez clipser le cadre comme ceci. Remettons-le pour qu'il soit plus logique. Rappelez-vous, ces gars à l'intérieur d'ici se révèlent dans un cadre. Ce cadre peut être plus petit. Normalement, c'est plus gros. Nous le faisons toujours plus gros, mais nous pouvons le réduire. On y va, on l'a réduit. Devez-vous le clipser ? Vous ne le faites pas, mais c'est plus beau. Il suffit d'avoir ce cadre extérieur plus petit que le contenu à l'intérieur, alors il fonctionnera. Cliquons dessus et essayons de le prévisualiser, nous y allons et je peux faire défiler. Pourquoi ne fonctionne pas ? Revenons en arrière et vérifions. Vous avez un prototype de défilement vertical. Parfait. Il y a toujours un avertissement qui indique le défilement du cadre, plus grand que le cadre. C'est vrai, je l'ai fait. Vous piéger, c'est comme ça qu'il est grand. Est-ce qu'une métaphore coupe le contenu, et j'ai appliqué ce défilement vertical, le défilement horizontal. Je veux un homme horizontal, je les mêle tout le temps. Vous le voyez. Tu es comme, hé, il veut dire vertical, horizontal. Cela arrive tout le temps. Si vous avez suivi l'un de mes autres cours, vous le saurez. L'orthographe est un défi, horizontal, vertical. Ils ont besoin d'autres icônes ici. Est-ce qu'ils ont une icône ? Ils ne le font pas. Mettez une icône là-dedans pour les gens comme moi qui ne peuvent pas dire l'horizontale depuis la verticale. C'est la vision fondamentale. Tant que le cadre situé à l'extérieur de l'endroit où il se trouve, est plus petit et doit être un peu plus petit que le contenu de l'intérieur. Il suffit de le rentrer. Encore une fois, peu importe si vous avez sélectionné cette image et qu'elle soit coupée ou non. C'est juste si vous pouvez le voir ou non. Il veut simplement voir le cadre plus petit. Que vais-je faire ? Je vais y arriver. Nous l'avons fait plus tôt. Je ne voulais pas commencer par ça au cas où vous viendriez à cette vidéo sans suivre tout le cours. C'est quelque chose que nous avons fait plus tôt lorsque nous avons appris cela. qui est cool avec la mise en page automatique, c'est que vous pouvez passer comme ça, ce qui le fait fonctionner, et il y a deux choses que vous devez faire. C'était quoi ? première était que nous devons vous dire que le cadre est plus petit, et l'autre est que nous devons nous assurer Dan ne dit pas horizontalement, vertical ou horizontal. Vous pouvez tracer la ligne en l'air et cliquons dessus. Je vais essayer de le prévisualiser, en le prévisualisant mal exprès, je pense. Cela commence par cette page. Nous retournerons à la page d'accueil. Eh bien, où est-il ? Je ne vois pas cette page. J'ai 1-4. J'ai cette page aléatoire, mais je n'ai aucune autre page. Pourquoi je ne l'ai pas ? Tout d'abord, je pourrais simplement entrer dans ce domaine et passer au prototype et lui donner un point de départ de flux, puis je peux commencer par ici, parfait. défilement fonctionne, et la raison pour laquelle ce n'est pas le cas, c'est parce que nous n'y avons eu aucun lien à aucun moment. Je vais annuler ce flux, donc je ne veux pas ça. Si j'ai un prototype et si je sélectionne sur tout, je commande A ou Control A sur un PC, pouvez-vous voir toutes ces lignes aller partout qui se connectent à cela, quelque chose se connecte à cela. Rien ne va là ou là. C'est pourquoi nous n'avons pas pu voir ces deux pages sans avoir abord cliqué dessus pour ensuite les présenter. Ce que nous pouvons faire, c'est que nous pouvons dire que lorsque quelqu'un clique sur le bouton d'achat et s'y rend, appuyez sur Naviguer instantanément, parfait. Cela en fera partie. Ce ne sera toujours pas le cas. Comment y parvenir ? Nous avons besoin d'un bouton. C'est des critiques de show. Nous n'avons pas cela de toute façon. Heureusement, nous avons un atout, et nous avons un gros bouton géant ici. On y va. Maintenant, je peux dire cliquer sur celui-ci et y arriver. Sur le robinet, allez-y, ouvrez-le, envoyez-le maintenant, même si je recommence ici, commencez par ce flux. Je ne peux plus cliquer dessus parce que cette chose est toujours la voie. Parfois, vous devez effectuer un zoom avant pour pouvoir cliquer dessus. Encore une critique et il y a notre petit truc de défilement. On y va. C'est un défilement horizontal. Les deux choses à retenir, le cadre extérieur doit être plus petit que le contenu intérieur et le prototype dont vous avez besoin pour le passer à l'horizontale. Je me souviendrai que pendant deux jours, ne vous inquiétez pas, mais ça finit par s'éteindre. L'autre chose qui n'est pas dans ce cours, je suppose, c'est que je serais tenté raccourcir afin que vous puissiez en voir davantage pour donner un soupçon de glissement. Je déteste les sites quand c'est comme ça et vous êtes comme, oh, vous glissez et vous êtes comme, eh bien, comment suis-je censé le savoir ? Celui-ci a probablement assez d'indice. J'aimerais voir quelque chose comme ça, le coup d'oeil là-bas. Je parlais et je concevais probablement une carte de révision qui était juste un peu plus maigre, donc il y avait la possibilité de le voir. C'est ça. Je vous verrai dans la vidéo suivante. 92. Faire défiler automatiquement la page vers le bas jusqu'au point d'ancrage dans Figma: Hé, le gang. Je vais vous montrer comment cliquer dessus et faire défiler la page vers le bas. Allons au bas. C'est assez facile à faire. Laissez-moi vous montrer comment. Pour que cela fonctionne, je viens de faire cette chose en haut ici sur les détails de mon produit. En gros, je vais parler de ces choses. Ce ne sont que des cadres que j'ai fabriqués. Nous avons obtenu un mode prototype, et nous disons que, au lieu d'aller aux pages, nous allons ici, aller sur ce lien. Le rectangle. Maintenant, cela dépend, il peut s'agir d'un composant, il peut même s'agir d'une zone de texte. Vous pouvez aller à n'importe quoi, c'est plutôt cool. Il suppose également que, parce que vous faites défiler, vous faites quelque chose sur la même page. Il est dit que nous allons faire défiler jusqu'à. Nous allons dans ce rectangle. Donnons un aperçu, alors nous allons cliquer sur le titre ici. Allons-y et présentons. Je clique dessus, et ça marche. Que s'est-il passé là-bas ? Pour rafraîchir. Ce truc, ça marche. Il va jusqu'au sommet, mais cette chose est restée bloquée, une autre chose est apparue. Il fonctionne. Je vais prétendre travailler. Tout d'abord, ces choses ne devraient pas bouger. Ça est sorti, te rappelles des parchemins et corrigé ? Il doit faire partie du gang fixe, ils ne sont pas des gangs défilants. Cette actualisation devrait corriger cela. Cliquez dessus et cela fonctionne. Le truc, c'est que ça va jusqu'au sommet. Maintenant, nous devons jouer avec ça et c'est des décalages. Vous avez X et Y. Une de ces choses que je trouve difficile à nouveau, donc vous avez vraiment besoin de savoir, et vous pouvez aller à gauche et à droite. Il suffit de jouer avec ça. Je ne me souviens même pas de laquelle il s'agit chaque fois que j'y arrive, je sais parce que j'ai déjà pratiqué celui-ci, que c'est le premier. Que c'est de haut en bas, et c'est négatif. Donnons-lui un aperçu, rafraîchissons. En savoir plus, Matériaux. Vous pouvez voir, ça continue de baisser jusqu'à ce que vous soyez content qu'il soit un peu plus bas. Allons le baisser. J'ai joué avec ça et je suis arrivé à moins 200, c'était bien. Rafraîchir, cliquez sur le bouton. Cliquez sur ce bouton. Je vais le reprendre, moins 200 n'était pas bon. Quelque chose a changé depuis. Faisons moins 150. Vous avez l'idée là. Une chose que nous allons faire est de vérifier ce dernier. C'est à peu près juste, et facile sera animé. La valeur par défaut est instantanée. Cliquez sur Animer. Choisissons un bon assouplissement, et donnons-y un autre coup. Actualisez. Cliquez sur ce bouton. Joli. Je vais faire la même chose pour celui-là, et je vais juste descendre dans ce rectangle. Gardons tout bien. Je vais utiliser le même 150 négatif. Donnons-lui un aperçu de rafraîchissement. Celui-là. Vous y voilà. Joli. Vous vous frayez un chemin à travers celui-ci aussi. Le problème, c'est que je ne vois pas ça. Vous devrez peut-être allumer votre cadre extérieur ici. Vous devrez peut-être aller au design, désactiver le contenu de votre clip pour que je puisse vraiment tout voir. C'était le dernier réconfort. Retour au prototype. Jusqu'ici, moins 150. C'est ça. Je n'ai pas fait défiler jusqu'au rectangle, j'ai probablement fait défiler tout cela plutôt que le rectangle à l'intérieur. C'est pourquoi mon petit calcul était désactivé. C'est un. Des trucs qui défilent. Si vous descendez de la page, vous devrez peut-être refuser car aller aussi loin n' est pas très loin. Cela peut prendre un mur de 0,3 seconde. Celui-là, peut-être que nous allons le rendre un peu plus long. Celui-ci peut être comme utiliser ma flèche vers le haut Shift Up, monte en gros morceaux, donc je pourrais aller au x400 d'une seconde. Je peux obtenir mes mesures, les confondre. Quoi qu'il en soit, 400 millisecondes, et celle-ci va être un peu plus longue. Peut-être la flèche Shift Up. On y va. Est-ce que cela va faire une différence ? Sans doute pas. Mais nous le saurons. On y va. Voici comment faire défiler une page vers le bas. Avoir quelque chose ne doit pas nécessairement être quoi que ce soit. Il ne faut pas nécessairement être un cadre, juste une chose à cliquer, il peut s'agir d'un élément de navigation. Il suffit de le faire glisser vers le bas et de faire défiler par défaut et de l'animer si vous le souhaitez. Il s'agit de faire défiler automatiquement le contenu de la page dans Figma. 93. Équipes, projets et fichiers dans Figma: Bonjour à tous. Dans cette vidéo, nous allons parler de ce que sont les équipes et de nos projets et de ce que j'ai conçu des fichiers et de ces fichiers de conception, Quelle est la différence entre les le site Web de la partie de projet et les différences entre ceux dans les brouillons. Permettez-moi de vous montrer comment cela fonctionne. Parlons des différences. Les dossiers sur lesquels nous avons travaillé jusqu'à présent, c'est ce projet sur lequel nous travaillons. Vous pouvez avoir un tas de fichiers différents. Les fichiers peuvent vivre dans des brouillons ou ils peuvent vivre dans un projet ou en tant que projet. En fait, passons à l'équipe. L'équipe est comme le nom de l'entreprise ou disons que c'est le cas, si vous travaillez dans une très grande entreprise, c'est peut-être comme une division. Il peut s'agir de ventes ou de marketing ou je ne sais pas, Asie-Pacifique, qui pourrait être votre équipe. Au sein de cette équipe, il y a différents projets. Site Web de commerce électronique, donc c'est mon projet à l'intérieur, il pourrait avoir ce site Web que nous fabriquons, la vision mobile. Il peut y avoir un autre fichier que nous créons, donc nous travaillons sur e-comm V1. Il peut y avoir un autre fichier de conception dans ce projet appelé V2. Il peut s'agir d'une division d'applications, il peut s'agir d'une version iOS et Android. Il peut également y avoir des fichiers liés au lancement du site Web. Ce projet est comme un projet de haut niveau de l'entreprise. Pour la version gratuite, vous avez autant d'équipes que vous le souhaitez, mais vous n'obtenez qu'un seul projet. Si je vais ici et que je dis que je veux un autre projet, s'il vous plaît, il est dit, hé, vous en avez déjà un gratuit. Ce que vous faites, c'est de partager des équipes avec des gens. Je peux cliquer sur le casque et dire que je travaille avec un autre designer, pas peut-être avec mon client, parce que je vais en parler dans une seconde. D'autres membres de l'équipe, je peux ajouter les autres designers avec lesquels je travaille, et ils auront accès à nos différents projets. Ces projets ici, ces projets nous permettent de séparer tout le travail que nous effectuons plutôt que de simplement les déverser dans un seul gros fichier. Pourquoi avons-nous eu des brouillons et pourquoi conservons-nous des fichiers dans nos projets et nos brouillons ? Les brouillons sont un endroit agréable pour avoir vos affaires avant que n'importe qui puisse les voir. Parce que, de toute évidence, si je partage mon équipe, ils peuvent voir dans mon projet et voir mon travail à moitié terminé, puis ils peuvent me juger, je ne suis pas prêt à être jugé. C'est l'une des raisons pour lesquelles vous pouvez garder les choses au brouillon. Personne d'autre ne peut encore les voir. Je suppose que c'est la raison pour laquelle vous avez ce projet, c'est que vous pouvez modifier pour que l'autre équipe puisse le trouver, vous n'avez pas à lui envoyer de lien à chaque fois. Voici cet autre fichier qui est un e-mail enterré quelque part. Ils apparaissent tous ici. Tout autre concepteur UX, marketing ou vente utilisant Figma. Ils peuvent entrer ou vous pouvez entrer ici et regarder les fichiers du projet e-commerce et voir tout ce qui s'y trouve. , privé, public et public avec les personnes logique, privé, public et public avec les personnes avec qui vous avez partagé l'équipe. Vous pensez peut-être, eh bien, je vais juste garder n'importe quoi dans les brouillons et ensuite le partager comme ça et c'est très bien. Vous pouvez aller un peu plus loin, comme si vous pouvez aller raisonnablement loin, pour que je puisse le partager avec des gens qui peuvent le voir. Mais je ne peux pas les amener à voir si je veux ajouter quelqu'un d'autre pour le modifier, pouvoir copier et coller des choses à partir de ce fichier, faire amende honorable à l'intérieur de ce fichier. Il faut que ce soit dans un projet. N'oubliez pas que vous n'avez qu'un seul projet pour une équipe, pour le projet gratuit, mais oui, dans les brouillons, vous ne pouvez faire que quelques choses. Je peux le partager. Rappelez-vous que nous l'avons fait avant de le partager avec Doug, Doug avait qu'il pouvait le voir et il pouvait le commenter, ce qui est cool. Mais il y aura un moment où vous travaillez avec un autre designer comme moi, et je dois partager le fichier avec eux. Il faut qu'il s'inscrive dans notre projet qui fait partie d'une équipe. Lorsque les autres limitations sont libres pour le moment, c'est que je ne peux avoir que trois fichiers ici dans mon projet. Un projet, trois fichiers que je peux partager avec mes autres copains de design. Mais en tant que pigiste, je vais avoir plus d'une équipe. C'est l'entreprise sur laquelle je travaille. Vous pouvez avoir autant d'équipes que vous le souhaitez. Disons donc que je travaille sur une autre entreprise, le mobilier. Je peux ajouter mes collaborateurs à cette équipe. Je vais sauter ça pour l'instant. J'ai une version payante, mais je n'utilise que la version gratuite pour ce cours. Vous pouvez avoir autant d'équipes que vous le souhaitez pour le moment, mais un seul projet, un seul fichier. Si vous êtes un concepteur super frugal et que vous pouvez vous en sortir en n'ayant que beaucoup d'équipes un seul projet, le problème est que vous devez partager un tas d'équipes différentes avec des gens. Je ne sais pas que cela arrive à un point où en fait, en fonction de votre professionnalisme, quantité de travail que vous y faites, il est juste trop élevé pour essayer de gérer toutes ces différentes équipes. Un projet, trois dossiers. Supposons que vous obteniez quatre fichiers, vous devez créer une autre équipe, partager cette équipe avec cette même personne. C'est là que cela peut devenir désordonné, mais rappelez-vous que ces choses changent, et aussi si vous êtes un étudiant ou un éducateur comme moi, vous pouvez obtenir une version gratuite, aller sur figma.com et la consulter. Il existe une option gratuite pour les éducateurs et les étudiants. Mais si vous vous sentez frugal, il y a une chose qui pourrait vous repousser et c'est la bibliothèque, alors je vais vous montrer les bibliothèques dans la prochaine vidéo. voyez, les équipes comme le nom de l'entreprise, vous avez des projets différents. Vous pouvez avoir des fichiers dans ces projets. C'est tout, je vous verrai dans la prochaine vidéo. 94. Comment utiliser les bibliothèques d'équipe dans Figma: Bonjour à tous. Dans cette vidéo, nous allons parler des bibliothèques d'équipes. Que sont les bibliothèques ? Les bibliothèques permettent de connecter les composants et tous les styles que vous avez créés dans ce document à tous les futurs documents et potentiellement à d'autres personnes de votre équipe. En gros, nous les téléchargeons ici une bibliothèque, ce qui signifie que d'autres documents que vous fabriquez, nous allons en faire un rapide. Je peux dire en fait : « Vous savez quoi ? Je n'ai rien ici. » Imaginez si je pouvais le connecter à cette bibliothèque et obtenir tous les styles, toutes les couleurs, tous les composants que vous utilisez vous-même. Connecter de nombreux projets différents ou encore plus utiles si vous travaillez avec d'autres concepteurs, vous pouvez également les partager avec eux. Si je mets à jour l'original, tous les fichiers sont également mis à jour. C'est ce que c'est. Permettez-moi de vous montrer comment y arriver. Examinons la publication d'une bibliothèque. Une bibliothèque va être publiée. Vous devez ouvrir le fichier à partir duquel vous souhaitez publier, le fichier d'origine. Il contient des composants, nos variables, tous nos styles, nos couleurs, et lorsque vous êtes prêt, allez dans nos variables, tous nos styles, nos couleurs, et lorsque vous êtes prêt, « Actifs » et accédez à l'icône du petit livre. Il va publier ce fichier actuel. Je vais le publier. Il va publier, par exemple si vous gardez l'esprit et les brouillons pour le moment, il ne publiera que les styles, pas le composant. Je peux publier mes couleurs, mes polices et mes effets. Mais en fait, ce que je veux faire, c'est que fermer cela et je veux le transférer dans une équipe professionnelle. Je dois payer une équipe professionnelle. Je vais dire que vous, mon ami, devez entrer dans celui-ci. Ce n'est plus dans mes brouillons, c'est dans cette équipe et dans ce projet d'équipe. Maintenant, je vais l'ouvrir. Je vais à mon panneau d'actifs, et si je vais ici maintenant, tout va marcher. Je vais dépublier ça parce que je viens de le faire. Disons que nous allons le faire correctement. Au lieu de simplement publier mes styles et couleurs, je vais cliquer sur « Publier », et il va publier tout, y compris QC ici, mes composants. C'est donc l'un des inconvénients de la version gratuite, c'est que vous pouvez publier des éléments comme des styles de bâton et des styles de couleurs, mais vous ne pouvez pas faire ces composants, ce qui est l'un des principaux avantages. Cliquez sur « Publier ». Pensez-y. Le fichier est donc publié. Ce que vous pouvez utiliser maintenant, c'est que si vous travaillez seul, vous pouvez créer un nouveau fichier de conception. Il n'est pas nécessaire d'être dans les brouillons ou dans les projets d'équipe. Touche F, je vais aller sur iPhone 8, et ce qui est cool, c'est que je peux aller dans mon panneau de ressources. n'y a encore rien ici, mais je peux aller dans cette bibliothèque et accéder à ces bibliothèques publiées. On y va, je peux l'allumer, on va le fermer maintenant. Ce que nous verrons ici dans mon panneau des ressources, ce sont ces composants, pour que je puisse y aller. On y va. Toi, mon petit bouton. Si je crée du texte, sélectionnez-le tout. Tous mes styles se présentent également. L'inverse, la solution consiste à commencer à copier et coller les bits dont vous avez besoin à partir de cet autre fichier, ce qui est faisable, mais c'est amusant. L'autre avantage, c'est quand on partage avec quelqu'un d'autre. Je peux partager cette bibliothèque avec n'importe qui de mon équipe. En fait, je n'ai pas eu à le partager. Tout ce que je dois faire, c'est dire que cette équipe a des membres et que j'ai d'autres membres de mon équipe ici et qu'ils auront accès à leur bibliothèque. Ils peuvent saisir tous les trucs que nous avons créés à l'échelle de l'entreprise, tous les styles. Il s'agit de cohérence. Tout le monde va utiliser le même style de frappe, styles de couleurs, tous les mêmes composants. Moi ici ou mes collègues d'autres pays. Ce qui se passe, c'est si, disons que moi, en tant que concepteur principal, je décide que je veux changer cela. Changeons, qu'allons-nous changer ? Allons changer cela. Il est utilisé dans dizaine de documents différents et je me dis que je dois changer cela. Donc ce que je peux faire est ici, je peux cliquer avec le bouton droit de la souris et dire aller au composant principal. Cela évoque l'une des choses intéressantes dans les bibliothèques. La bibliothèque elle-même n'est pas autonome. Il fait référence au fichier initial que nous avons créé. Ça va ouvrir Scott Econon, ce que j'ai créé à l'origine. Alors, gardez ça dans les parages car cela va être comme l'original. La bibliothèque fonctionne plutôt comme un pont entre ce document et tous les autres documents. Je vais m'y atteler. Je vais juste le détruire. Allons le détruire. On est en train de le faire. Ce qui va se passer ici, c'est que je vais cliquer sur « Terminé ». Il y a deux ou trois choses qui vont se produire. Il y a cette petite icône des actifs, il y a un petit point bleu là. Si je clique dessus, si je clique dessus, ça me dit aussi. Souvent, les premières versions sont apparues ici comme une petite fenêtre contextuelle pour dire : « Hé, vous avez mis à jour quelque chose », mais le vôtre pourrait être là. Vous pourriez revenir. Il n'est pas là pour le moment. Ce qu'il dit, c'est ces changements n'ont pas été publiés dans cette bibliothèque, peuvent intervenir ici. Ce que je peux faire, c'est que je peux cliquer sur mes bibliothèques. Bibliothèques de ressources et dites que vous souhaitez publier cette modification dans un bouton rond ? Vous pouvez lui donner une note. Expliquez simplement aux gens : « Hé, c'est le changement que nous avons demandé. » Ils sont vraiment gentils. Bouton Plus maintenant. Si je clique sur « Publier », ça va augmenter. Quiconque utilise cette bibliothèque ne va pas se mettre à jour automatiquement, ce qui est bien. Il va dire : « Hé, voilà, l' un des composants a été mis à jour, que voulez-vous que je fasse ? » Je vais le revoir. Ça va me dire comment les notes que j'ai pu lui donner et je vais cliquer sur « Mettre à jour ». Regardez notre petit bouton mis à jour, de même que n'importe lequel de nos styles de tick, styles de couleurs. Tout ce qui est mis à jour, il sera transféré dans tous vos autres documents afin que vous puissiez voir quel point votre bibliothèque de projets initiale n'est peut-être pas si utile, mais dès que vous entrez en deux ou trois en essayant de réutiliser logos et partagez-les avec d'autres membres de l'équipe, les bibliothèques sont incroyables. La version gratuite vous permet de secouer les couleurs et les styles. Quand ils parlent de styles, ils parlent de tous ces styles. Jetons un coup d'œil. Ceux-ci, ici, façonnent ce que font les composants. C'est donc un très grand avantage pour la version professionnelle. Encore une fois, je vais le dire un million de fois, ils ont changé ces choses. Il peut être inclus, la liste peut être incluse, donc elle n'est pas gravée dans la pierre. Une autre chose à mentionner est que c'est mon fichier original. Les remplacements, c'est le nouveau fichier que nous avons commencé à créer. Si je vais dans quelque chose comme ça, disons ce texte où il y en a un meilleur. Cette case à cocher ici et j'y vais et je change la couleur pour quelque raison que ce soit, il faut que ce soit l'autre, et je n'ai pas fait de vision changeante de couleur. Mais j'ai changé de couleur. N'oubliez pas qu'il s'agit d'un remplacement si le fichier d'origine est mis à jour. Je vais cliquer avec le bouton droit de la souris. Maintenant, nous quittons la bibliothèque. Je vais le trouver, il est là en bas. Cela soulève un autre point positif. J'en parlerai dans une seconde. Si j'entre ici et qu'il y a quelque chose qui a changé, encore une fois, en cassant les choses, je l'épargne. Il va dire que cette chose a été mise à jour. Vous poussez nos oiseaux, poussez les mises à jour, publiez, même faites tout cela. Maintenant son original, disons que je vais le revoir. C'est ça le changement. Je vais le mettre à jour. Mais vous pouvez voir j'espère que ma priorité est que la couleur n'a pas changé. Les boutons du même KG modifient le texte et le bouton est mis à jour. Il ne va pas tout détruire. C'est plutôt bien. Conserve tous ces remplacements comme nous l'avons déjà utilisé. L'une des autres choses, je suis à nouveau sur mon fichier d'origine, le fichier créatif, et vous pouvez exclure des choses. Vous avez peut-être un fichier qui contient beaucoup de choses, mais des déchets et vous êtes comme : « En fait, celui-ci ici n'a pas besoin d'être dans la bibliothèque. » Peut-être que ces derniers se déplacent de la bibliothèque, puis nous pourrons la mettre à jour et dire supprimer ces bits de la bibliothèque, s'il vous plaît, parce qu'ils ne sont plus utilisés. Une autre chose que vous pourriez faire, c'est que c'est un peu déroutant la façon dont je l'ai fait. J'ai utilisé ce document de travail pour créer mes bibliothèques. Ce que je pourrais faire, c'est que je vais vous montrer une façon un peu plus agréable de le faire. Cela doit toujours être dans vos projets d'équipe, donc je vais dupliquer celui-ci. Cette personne ici, c'est une nouvelle, c'est une nouvelle « copie ». Je vais dire « Renommer ». Il s'agira de SCOTT, styles maîtres et des composants. Je vais donc m'en servir pour créer un nom et à l'intérieur de celui-ci. Ça va traîner, mais celui-ci ici va être mon maître principal, je vais dire, est-ce que j'ai besoin de la brève et du lancer ? Pas pour celui-là en particulier. J'en ai une copie. Je vais garder le guide de style, je garderai les composants mais je n'ai pas besoin de ces pages. Ce truc ne va avoir que ces deux pages et ça va être beau et joli et je ne vais pas le détruire et je vais l'exposer bien, et je vais publier celle-ci. Assets, bibliothèque, donc c'est un fichier différent. Celui-là, je peux l'éteindre. Je vais le faire dans une seconde, mais vous pouvez voir que c'est plus agréable à partager avec les gens. Parce que c'est plus logique, vous savez ce qu'est l'e-comm V1 ? Mais celle-ci peut être universelle. Je peux le partager avec d'autres designers. Ils peuvent l'ajouter et s'en mêler, le changer et le mettre à jour. Pour éliminer l'autre bibliothèque, nous devons ouvrir ce fichier ou s'agit-il d'Ecom1, et vous pouvez aller dans les ressources, la bibliothèque. J'ai apporté quelques modifications, mais ce que je veux vraiment faire, c'est d'y aller et de dire : « Dépublier celui-ci ». Ils sont supprimés des bibliothèques et rompent le lien avec tous les autres et voient ce qui est arrivé au fichier que nous avons créé. Celui-là, ici. Cela était basé sur cette bibliothèque. Ce que vous remarquerez maintenant, c' est que c'est celui que nous avons sorti tous les trucs de cette bibliothèque d'ombres. Il ne les supprime pas. C'est vrai, vos fichiers maintenant locaux ne sont plus connectés comme ils l'étaient. Et vous pouvez voir là que tous mes styles ont disparu de côté. J'ai déconnecté leur bibliothèque. Je peux en choisir un autre. On va juste avoir les mêmes choses dedans. Allons-y. De retour en affaires. Une chose que je pourrais faire, c' est que je vais lire les pages dont j'ai besoin. Faisons-le à partir de celui-ci. Pour utiliser ces styles, une chose que je viens de me rappeler que je n'ai pas couverte c'est que je peux aller sur mon Ecom V1. Allons sur ma page de couverture, ça pourrait aller sur la page d'accueil. J'ai quelques grilles. Vous pouvez également les transformer en styles. Je peux ajouter ceci et dire que c'est ma balle, juste pour que nous soyons tous cohérents entre différents documents, vous-même et d'autres personnes avec qui vous travaillez. C'est mon 6 colonel. Vous pouvez le mettre dans le type de caresses que vous utilisez aussi pour que tout le monde sache que cela peut faire partie de la bibliothèque. Il s'agit des bibliothèques d'équipes dans Figma, vous devez disposer de votre fichier hors brouillons et dans vos projets d'équipe pour pouvoir partager vos styles. Si vous avez un compte payant, vos composants également, et que les bibliothèques ressemblent davantage à un pont entre ce fichier d'origine et d'autres fichiers entre vous et vos documents et les autres membres de l'équipe. Il y a les bibliothèques. Passons à la vidéo suivante. 95. Différence entre animation et micro-interactions: Bonjour à tous. Dans cette vidéo, nous allons discuter rapidement de la différence entre l'animation et les micro-interactions. C'est un tombeau nouveau pour certaines personnes si vous débutez dans le design UX, pour d'autres, vous allez savoir exactement de quoi je parle. Mais si ce n'est pas le cas, c'est juste une chose subtile, et le processus de création est le même ici dans Figma, je vais le faire dans les prochaines vidéos. Mais je sais, c'est un terme dont nous devons être clairs au moins. L'animation est assez facile. L'animation est ce que vous imaginiez qu'elle soit. Pour ravir les usages, aider, raconter ou communiquer un peu plus. Parfois, c'est juste une image de marque pure. Ce ne sont que des animations, et elles peuvent se produire sur des sites Web et vous pouvez le faire dans Figma et je vais vous montrer comment. L'autre est celui des micro-interactions. C'est probablement une bonne représentation des micro-interactions, juste des choses simples qui le montrent. Regardez quand on clique sur ce bouton. Cela semble quelque chose. Ce sont les commentaires des utilisateurs ou du moins les commentaires du système que quelque chose s'est passé. C'est peut-être pour aider à transmettre comme si quelque chose est traité comme ça, ou il se peut que quelque chose soit en attente. Vous pouvez voir cette petite micro-indirection ici. Vous obtenez un peu : « Ouah, regardez ça. » Ils n'ont pas besoin d'être animés, mais ils le sont généralement. C'était une autre bonne chose. Cette petite icône verrouillable. C'est très pratique pour savoir si votre système, vous avez fait est verrouillé ou non verrouillé. Qu'il fonctionne ou que le microphone fonctionne. Souvent, c'est peut-être pour vous empêcher de faire quelque chose de mal, rappelez-vous plus tôt que nous l'avons fait. Il s'agirait d'une micro-interaction vraiment grosse, les choses commencent à devenir rouges ou savoir que vous avez mal fait ou que vous n'en avez pas assez au cours de la deuxième année, n'avez pas assez de choses pour un mot de passe. Ils deviennent un peu floues parfois des gens comme moi qui ont fait une micro indirection et vous êtes comme si ça pourrait être juste une animation parce que ce n'est pas vraiment le cas. Comme celle-ci ici est étiquetée comme une micro indirection, mais peut-être que c'est juste une animation, je pense, parce que c'est vraiment cool, ça fait partie du cerveau, ça fait partie du cerveau, ça ravit les gens avec des trucs amusants. Il franchit la ligne. Regardez celui-ci. S'agit-il d'une micro-interaction ? Je pense que c'est bien, mais c'est ennuyeux. Pas d'animation complète. Jetons un coup d'œil à d'autres intéressants. Payez une chose touchée complète. Voyez ceux-ci ici, ce CO et le plaisir et certainement être étiqueté comme des micro-interactions parce que oui, ça aide. Souvent, une micro-indirection est une interaction d'interface utilisateur comme j'ai fait quelque chose sur le site et le système, votre site Web, votre application me le dit, donnez-moi une réponse sans avoir à ouvrir une fenêtre disant, oui, vous avez a activé cette fonctionnalité. C'est comme un peu facile. Nous en construirons un couple, ils seront tous les deux construits de la même manière, avec animation. Nous allons faire quelques exemples différents. Allons-y. 96. Animation avec accélération de transition personnalisée dans Figma: Bonjour à tous. Dans cette vidéo, nous allons réaliser cette animation. Nous cliquons sur le bouton et il se transforme en boîte, puis la boîte s'éteint. Animation amusante. Maintenant, quand je dis « fun », j'utilise ce terme de façon lâche. Il couvrira quelques-uns des principes d'animation que nous avons appris au début du cours et s'appuiera sur ces principes. Beaucoup d'entre eux que nous avons déjà utilisés auparavant, nous allons les utiliser dans un travail plus important, et je vais lancer de nouveaux trucs comme l'assouplissement, je vais mettre au moins un peu de personnalisation, et je vais jeter les choses que j'ai Je sais que mes élèves se trompent et restent coincés quand nous construisons quelque chose. Si cela n'a pas l'air très excitant, vous pouvez l'ignorer, c'est un cours vidéo. Mais si vous voulez le construire avec moi, faisons-le. Allons-y. Je vais vous avertir, c'est long. Très bien, pour commencer. Eh bien, nous allons juste voir où nous avons commencé dans ce cours. vous souvenez ici quand nous avons fait cette animation ? Nous sommes toujours à ce niveau. Nous allons aller un peu plus loin et rendre un peu plus excitant de commencer par là. Mais oui, c'est là que nous avons commencé. Nous allons mettre à jour cette page. Ce que j'ai fait, c'est que je vais travailler sur mon Hi-Fi mobile. Je suis revenu sur ce projet original Scott Ecom. Si vous venez juste pour l'assouplissement et l'animation, je vais d'abord faire un dessin ici, vous voudrez peut-être sauter. Nous allons chercher le rédacteur en chef. Pourriez-vous mettre un code temporel en bas maintenant juste un moyen de sauter si vous voulez ignorer toute cette partie de dessin parce que vous savez dessiner maintenant, vous êtes un tiroir incroyable. Sautez là. Sinon, attendez avec moi. Ce dont j'ai besoin, c'est deux choses. J'ai besoin d'une boîte. Je vais utiliser mon outil rectangle dans ce cas parce que nous allons surtout faire des cadres pour cela. Je vais juste faire des choses assez simples. Je vais utiliser les couleurs de ma marque et dessiner des écouteurs. Préparez-vous à des écouteurs pas étonnants. Un autre rectangle. Rappelez-vous, je ne peux pas voir mes points s'ils sont trop petits, je ne peux pas les voir. Vous allez zoomer un peu, ils sont là. Qui se souvient où je peux m'en tenir juste pour en faire un ? Maintenez la touche Option ou la touche de maintien enfoncée. Je veux que ces deux côtés soient 6, 6. Pourquoi viennent-ils tous ? Sélectionnez les premiers, non. Est-ce que je tiens la mauvaise clé enfoncée ? Je le suis. Ce n'est pas du tout une option, c'est une commande. Vous le saviez. J'ai cette clé ici muff mod. Je vais le faire un peu. Je vais le copier et le coller. Il remonte au-dessus de lui-même, très bien. Mais je veux maintenant aller vers les réflecteurs de mon appareil photo. Retourner horizontalement, est-ce l'option H ? Non, c'est au centre horizontalement. Je ne m'en souviens plus. N'oubliez pas que la barre oblique de commande ou la barre oblique de contrôle avant est la réponse à toutes nos options. Allons-y, c'est un retournement ? C'est le cas. Shift H, voilà. Allons les aligner de cette façon. Les écarter sur l'orteil circulaire, a commencé à peu près là. Si vous maintenez la touche Option ou Alt enfoncée sur un PC, vous pouvez faire des trucs à partir du centre. Je tiens Shift aussi pour obtenir quelque chose comme ça. Qui se souvient comment retourner le remplissage et le coup ? Shift X. Je vais utiliser ma flèche vers le haut pour monter un peu avec mon casque. Nous y arriverons. Je vais choisir ma même couleur. Ce que je vais faire, c'est celui avec un demi-rectangle. On va juste le trancher ici, il disparaît là-dedans. Comment puis-je faire cela ? Sélectionnez vous, sélectionnez-vous, tant que celui-ci est en haut, cliquez sur non-union, soustrayez. J'ai un casque 1. Choisissez mes touches fléchées pour y aller deux fois et nous avons des écouteurs d'apparence moyenne. Maintenant, vous n'avez pas à les regrouper, mais c'est vraiment pratique de le faire, car cela ne se passe pas toujours mal, mais parfois ces choses finissent par faire leurs propres choses. Mettons-les tous ensemble. Faut-il les coller dans un cadre ou un groupe ? Mettons-les dans un cadre car tout peut être un cadre. Donnons un nom, un casque. N'oubliez pas que dans nos premières animations, vous devez garder les noms cohérents dans ces deux panneaux. C'est ma boîte. Ouah, c'était excitant. Nous avons des écouteurs. Ils vont tomber dans la boîte qui est petite. C'est bon de le mettre à l'échelle. Peut-il rentrer à l'intérieur ? Parfait. Nous allons dupliquer cela. Je vais maintenir ma touche Option sur un Mac, O sur un PC. C'est ainsi que nous allons animer sur deux images. Que faisons-nous ? Celui-là va être en bas. ordre des calques, cela n'a pas vraiment d'importance, ils n'ont pas besoin de correspondre, les noms doivent correspondre, mais sur celui-ci, en fait, il doit être sous la boîte. D'une manière ou d'une autre, je vérifierais que c'est en fait une rangée, peut-être qu'elle doit commencer à droite, mais allons y aller. Comment l'animer ? Nous passons à notre prototype 2, puis nous arrivons au prototype. C'est tout le haut, ici. Vous y voilà. Faites défiler vers le haut Notre prototype, vous, mon ami, allez aller dans cette boîte. Nous allons faire la même chose qu'avant. Nous allons retarder. Après le retard, combien coûte une seconde ? C'est vrai, 1000 de ces millisecondes, et ensuite il va y accéder. Maintenant, l'animation, utilise toujours Smart Animate, c'est magique. C'est juste intelligent qui l'anime. Nous allons regarder dans une seconde. Faisons une entrée et une sortie faciles, pourquoi pas ? Donnons un aperçu. Je dois m'assurer que celui-ci est sélectionné. Ces flux maintenant, vous pouvez double-cliquer dessus ici pour le modifier au lieu de faire ici, il y a le flux 2. Appelons celui-ci notre animation casque. Mauvais nom. De toute façon, tout simplement. Préparez-vous à la gloire, tout le monde. Cela a fonctionné. Je vais revenir en utilisant ma flèche arrière. C'est génial. Après un retard, ils tombent dans l'animation, l'assouplissement est bien. Ce que nous allons faire, c'est envisager la personnalisation. Ce que nous allons faire, c'est que l'assouplissement se fait entre les deux images ici. Un petit conseil est que vous pouvez simplement utiliser votre flèche vers le haut pour monter par dizaines, maintenez la touche Maj pour monter par centaines. Vous n'en remarquerez que des centaines. Disons qu'on passe à deux secondes. Donnons-lui un aperçu ici. Nous n'avons pas besoin de le recharger car il avait notre clé. Nous devrions le redémarrer. C'est assez lent. Vous pouvez faire des mathématiques dans beaucoup de choses. C'est comme le bonus de cette vidéo. Tu m'as collé avec les écouteurs ennuyeux, tu auras le raccourci super incroyable. Je peux diviser cela par 2. Vous pouvez le faire dans beaucoup de choses différentes. Disons que j'ai besoin de concevoir, et que j'ai besoin que la largeur soit la moitié de cela, je vais diviser par 2. Parce que c'était lié, ils arrivent tous les deux. Ce sont des mathématiques que vous pouvez faire dans n'importe lequel de ces éléments. Quoi qu'il en soit, si vous avez besoin de x, et allons-y deux fois plus loin, il faut que ce soit deux fois de cette façon, cela doublera ce qu'il est. Vous pouvez ajouter des heures, qui est en fait la clé astérisque, normalement fracassée avec votre clé 8. Je dois donc maintenir Shift 8 sur mon clavier, mais vous le trouverez sur le vôtre. Fais ça fois 2 et ça se déplacera vers nous. Il y en a beaucoup. Vous pouvez faire moins, diviser par, fois, plus. Vous devez ajouter un peu de rembourrage à l'extérieur. Vous pouvez ajouter 20 rembourrages à n'importe lequel de ces champs. Segue Way, où allons-nous ? Ce prototype va être retardé, facile à entrer et à sortir. Mais en fait, je veux passer à la personnalisation. Vous n'avez peut-être pas vu quelque chose de pareil. Fondamentalement, l'entrée et la sortie, puis-je l'inverser ? Adoucissant, c'est l'entrée, c'est la sortie. L'assouplissement est ce joli virage ici. Fondamentalement, c'est l'heure, et en gros, c'est à quelle vitesse ça se passe. Au fil du temps, cela se passe très lentement. La vitesse augmente. Imaginez qu'il s'agisse de kilomètres à l' heure ou de kilomètres par heure, selon l'endroit où vous venez, de 0 à 100. Entre ici et ici, juste au début de cette étape, ça se passe très lentement. Beaucoup de temps s'est écoulé, mais la vitesse est passée de 0, elle n'est pas allée très loin, elle ne fait que 10 milles à l'heure. Mais au milieu, ici, il est en marche. Il est allé très vite, il est allé très haut. Il se déplace rapidement au milieu, puis il devient très lent à la fin, à des kilomètres à l'heure. Il faut du temps pour atteindre 80 à 100 milles à l'heure, un vieux a applaudi de voiture. C'est ça l'assouplissement. Si je reviens à l'aise, faisons-le en fait, c'est cette coutume juste pour faciliter l'entrée, puis revenir à la coutume. Il vous montrera, lentement, lentement, rapide, rapide, rapide, rapide. C'est un peu plus facile. Si vous arrivez à personnaliser, vous pouvez simplement cliquer dessus. Cliquez et faites-le glisser hors d'eux. C'est ce que vous devez faire. Vous pouvez les cliquer et les faire glisser, et vous pouvez vous déplacer facilement. Maintenant, regardez celui-là, ça va être assez extrême. Ça va aller, Sue est comme ça, et à la fin, ici plus d'une seconde. Donnons-lui un aperçu, puis rafraîchissons. Vous y voilà. Est-ce que c'est mieux ? Ce n'est pas le cas, mais nous avons appris ce qu'est la personnalisation. Vous pouvez également faire l'inverse. Très peu de gens vont le faire. Non, je le reprends. Je ne l'utilise pas très souvent. Ça va vite, ça va lentement au milieu et ça. Vous avez peut-être une animation qui semble parfaite pour elle. Jetons un coup d'œil. Rapide, lent, rapide, fin. La courbe en S est la belle courbe. chose comme ça a toujours l'air sympa. Fermer Photoshop, en facilitant l'une des animations qui est belle. Pouvez-vous le prouver ici ? Pas vraiment bien. Cela va être la personnalisation. Examinons un peu ces principes. Nous sommes venus pour l'assouplissement, la personnalisation, mais examinons en fait quelques autres choses qui pourraient vous surprendre. Je veux mettre un couvercle comme vous l'avez vu au début. La règle est qu'il doit être dans ces deux cadres si je veux que ce soit dans les deux. Si je modifie ici, mon outil de rectangle. Je vais cliquer sur ce couvercle, le concevoir étonnamment. On y va, et j'appelle ça le couvercle. Honnêtement, je vais probablement finir avec le rectangle 50 ou 150, mais tu regardes, donc ça va être couvert aujourd'hui. Passons rapidement à Design. Choisissez une couleur. Je veux que ça s'anime. En fait, je veux qu'il soit ici. C'est là ça va se terminer directement dans l'animation. Je veux qu'il soit fermé. Vous devez le copier manuellement et le coller car il n'est pas dans le premier. Il va simplement pousser ça comme par magie pour répéter. Il essaie du mieux que possible. Je ne suis pas ici, je vais juste m'effacer et espérer le meilleur. Ce que je dois faire, c'est ici, faites-le de cette façon, et je vais faire quelque chose de spin. n'y a pas beaucoup de contrôle car il ne s'agit pas d'un outil d'animation de chronologie. C'est très primitif et probablement le plus gros problème est que tout se passe en même temps. Cette personnalisation que nous venons de faire est la même pour la boîte, mais pour une animation simple, en particulier le prototypage, elle est parfaite. Si vous souhaitez intégrer le hardcore dans l'animation, quelque chose comme After Fix a un format de fichier appelé Latte. C'est quelque chose à faire pour faire des recherches, qui fait des trucs SVG animés étonnants. Je vais peut-être faire un cours sur ce sujet un jour ou Adobe Animate. Il existe d'autres programmes. Je finis par être un peu avec Adobe. Google SVG Animation ou outils d'animation Latte, mais nous travaillons dans Figma, nous allons donc travailler avec ce que nous avons obtenu. Maintenant, je vais tirer une coche rapide. Cliquez une fois, cliquez à nouveau. Que mon ami est la coche géniale. Glisser vers la gauche et la droite. Je vais cliquer là-dessus et dire que votre point final sera rond. Ce point final va également être rond. ce coin, on va jouer avec l'onglet, rond. Vous pouvez tous les sélectionner en une seule fois, les faire en une seule fois. Quoi qu'il en soit, ça va être ma tique. Je vais revenir à mon outil de déménagement. Je suis coincé dans ce mode d'édition d'objets. Je suis coincé ici tout le temps. Cliquez sur « Terminé » et maintenant c'est une chose unique appelée vecteur. Je vais appeler ça une tique. Outil de mise à l'échelle Je vais le réduire parce que je veux que le coup soit également mis à l'échelle. C'est un peu gros. Je veux que ça apparaisse ici. Où est-il ? Savez-vous où il se trouve ? Il est là. Il est juste rentré à l'intérieur du casque. En fait, je l'ai traîné par accident dans ce cadre. Je vais juste arriver au-dessus de la boîte. On y va. Rappelez-vous qu'il doit être sur cette copie et qu'elle doit être sur celle-ci, et qu'elle doit avoir le même nom, cocher, cocher. Ce que je veux faire, c'est que si vous voulez qu'il soit hors écran, disons que je veux que cette chose glisse ici, ce qui a tendance à se produire, c'est que ça ne marchera pas. Vous vous rappelez pourquoi. Il suffit de le répéter. Il ne fait que s'estomper. Parce qu'il ne le voit pas ici parce qu'il est hors du cadre. On peut l'avoir hors du cadre, visiblement ici, mais il doit être inclus dans toute cette trame de confirmation V2 que j'ai : V2 A, B. Il doit être sur A. Même s'il est suspendu ici, pouvez-vous le voir ? Il n'est à l'intérieur d'aucun de ces éléments. Je peux juste le mettre là-dedans. Je ne peux pas le voir là, donc vous pouvez décider si cette chose est coupée ou non. Il va zoomer avant. Allons-y un coup de fouet. Je ferme mon aperçu, et je pense que parce que je ne l'ai pas sélectionné, je n'avais rien sélectionné, donc il est retourné à mon Flow 1, mais regardez, j'ai eu mon super flux. Pour répéter, rafraîchir, refaire, redémarrer, nous y allons. Ce que je vais aussi faire, c'est probablement le faire disparaître. En bas, je vais vous dire, mon ami labo. En fait, je peux utiliser mon raccourci sucré. Qui s'en souvient ? Sélectionnez-le. Comment faire pour atteindre la valeur zéro ? Eh bien 50, il suffit de taper cinq ou zéro. Non, zéro vaut 100. Vous pouvez le faire descendre à 10 %. Qu'est-ce que le zéro ? Comment ne pas le savoir ? Vous y voilà. Vous n'êtes pas obligé de le faire aussi. Vous pouvez simplement éteindre l'œil dans toute la couche. Il fera la même chose. Donnons un aperçu. Rafraîchir, il doit zoomer vers le haut et fondu. La dernière fois, nous avons terminé en deux images. Nous allons aller un peu plus loin dans celui-ci. Nous allons vous voir en double parce que je veux que tous ces trucs avec tous les bons noms arrivent. Qu'est-ce que je vais faire ? Je vais essayer de faire du jogging. Je vais y aller, je veux que ça se passe comme une fermeture éclair. Je veux que ça monte un peu, donc on dirait qu'il s'envole. On y va. Il faut s'assurer qu'il se trouve à l'intérieur de ce cadre, même si je ne peux pas le voir. On y va. Vous allez venir avec ça. Devrions-nous les obtenir tous les deux ? Oui. Cliquez sur les deux Maj, ça va venir. Il va être un peu en l'air aussi, et assurez-vous qu'il se trouve sous mon couvercle. Vous pouvez venir avec le trajet et vous assurer qu'il, où est-il ? Le casque est en confirmation, mais en dessous. Permettez-moi d'utiliser mes crochets pour les envoyer directement à l'arrière. On y va. Trouvez tout. À quel point cela va-t-il être bon ? Probablement terrible. Le moment ne va pas être bon. C'est la conception d'une tanière hors du manchette. Je devrais passer plus de temps là-dessus, mais voilà. Vous êtes prêt ? Ça ne va pas marcher. Sait-on pourquoi ? Vous savez pourquoi. Il n'y a aucun lien entre la page. Où êtes-vous ? Vous y êtes. Prototype. J'ai besoin d'une connexion, donc je vais faire un autre retard après 0,3 seconde. Nous allons animer intelligemment. Nous allons utiliser notre facilité personnalisée. En fait, je ne le suis pas. Je veux que ça se passe comme ça. Il devient de plus en plus rapide. Démarre lentement, démarre lentement, commence lentement, rapide, rapide, rapide, rapide, rapide. C'est bon d'y aller. Rafraîchir Il fonctionne. Je dois jouer avec le timing. Il faut une éternité pour y arriver et c'est toujours avec celui-là. Comment puis-je contrôler le moment de cela ? C'est le temps qu'il faut entre celui-ci et celui-ci. Voici ma personnalisation, puis vous basculez pour descendre. Oui, ça va le faire. Il faut monter et descendre quelques fois. Rafraîchir Génie de l'animation juste là, regardez-moi. Ma boîte arrive. C'est très vite caché de venir à ma porte. J'en ai probablement un couple, ou peut-être pas aussi brutal. C'est presque ça. Je vais vous montrer ce qui se passe maintenant quand vous êtes comme, je sais, je vais ajouter cette autre chose au début. Vous avez vu au début que le bouton Acheter était mis à jour. Ce sera le cas, je veux vraiment redoubler. Comment puis-je redoubler et modifier un autre cadre ? Ce n'est pas si dur. Je vais encore utiliser celui-ci. Juste pour avoir les conventions de dénomination, je n'ai pas besoin de la moitié de ces choses. Que faites-vous quand vous avez un A ? Vous pourriez aussi bien, le dernier V2 final. J'ai gâché le nom. Il est plein dedans. J'ai deux départs de flux, ce n'est pas ce que je veux. Si vous voulez vous débarrasser du flux, ne cliquez pas sur le tout. J'en ai deux. Je l'ai dupliqué. Je ne l'ai pas, on y va. Vous y allez. Voyez-vous que je peux en avoir deux ? Ce qui est bizarre que je n'aime pas chez Figma. Vous pouvez en avoir deux, alors supprimez un en ajouter un. Vous y allez, vous y allez, et celui-ci va être différent. En fait, je ne vais pas avoir ça. Je vais vous avoir quand on vous clique, allez là-bas. Je vais simuler ça jusqu'à un bouton, donc je vais dire que vous êtes maintenant un bouton. Je n'utilise pas nos composants et toutes ces belles et variantes. Je fais juste semblant ici, et je vais dire Design, quatre. Je vais y ajouter l' achat, acheter et m'assurer que j'utilise mes styles. Vous devez les sélectionner tous pour vous assurer que les styles sont appliqués. Je vais le rendre audacieux de toute façon. C'est à propos de la scène que je vais probablement créer un autre style de texte. Cela peut être mon texte du bouton 1. C'est fondamentalement la même chose que le paragraphe, sauf qu'il est gras au lieu de devoir changer, et je vais l'écrire. Ça va être ça. Ce type ici, prototype. Quand on clique sur lui, il va aller sur le robinet, aller à cet endroit sur c'est mon animateur, et je vais probablement abandonner ma personnalisation et sortir et revenir. Oui, ça pourrait disparaître. Nous allons faire un test de toute façon. Ce truc ici, rappelez-vous que nous pouvons le supprimer tant que vous voulez qu'il s'estompe ici. Nous avons vu que si vous supprimez des choses en cliquant , je vais juste le fondre parce que je ne sais pas quoi faire d'autre. Oui, jouons à celui-ci. Cliquez sur ce bouton. Si vous ne voulez pas que cela se produise, je vais défaire. Vous devez faire quelque chose avec ça, alors peut-être qu'ils tombent du ciel. Assurez-vous que le casque est toujours dans mon dernier V, et cette chose ici, vous ne pouvez pas le faire suivre un chemin si vous demandez, puis-je le faire suivre un chemin ? Non, il vous permettra d'animer automatiquement, vous devez vous habituer à une animation automatique comme ce qu'elle est susceptible de faire. Sont-ils tous là-dedans ? L'allumer et l'éteindre comme une bonne façon que je le ferai, sont-ils tous là-dedans ? Est-ce que ça va marcher ? Rafraîchissez, achetez. C'est bon. Vous pouvez le dire. Rafraîchissez, achetez. C'est cool, le petit truc boxy. Ça va être ça. Pour ma petite animation ici, je vais vous dire après un certain temps de bouclage ici. En cas de retard après zéro seconde, revenez là. C'est mon animateur ? Non. Je vais juste aller me dissoudre. Faisons un test. Bouton, retourne, boucle en arrière. Eh bien, il faut que vous vous cachiez, les choses à retenir, les choses doivent être nommées de la même façon sur les deux. Si je vais appeler ça maintenant, tu peux les changer un peu. Rappelez-vous que si j'appelle ce bouton parce que je suis bon, il ne va pas s'animer dans celui-ci. Actualisez, cliquez sur. Il vient de s'évanouir. L'autre chose avec laquelle je rencontre des problèmes, je vais défaire, c'est que je vais aller ici et je vais commencer à regrouper les choses. Je suis en mode Création, je vais commencer à le regrouper, et ce n'est pas bien parce qu'il y a maintenant groupe au lieu de toutes ces choses et c'est caché, et qu'est-ce que cela en fait ? Il suffit de le faire disparaître à la fin parce qu'il ne savait pas comment aller ici. Veillez à ne pas regrouper les choses ou à encadrer les choses. Une fois que vous commencez, gardez la même cohérence, continuez à tester pour voir si quelque chose se brise, et oui, vous vous retrouvez avec beaucoup d'amis. C'est ce que c'est ici. Je ne le garderais pas avec ce flux de travail parce que vous vous retrouvez avec tellement d'entre eux. Une autre chose que vous pouvez faire, peut-être qu'on n'a pas rangé. J'ai sélectionné tous ces éléments que je veux obtenir l'espacement identique. Vous pouvez voir, ils sont tous partis. Si je les sélectionne tous, le rangement fonctionne sur tout, pas seulement les objets dans les cadres, mais les cadres extérieurs eux-mêmes. Si vous pensez que c'est complexe, laissez-moi vous en trouver un. Vous attendez là. Réticent à vous montrer les animations des autres parce qu'elles sont bien meilleures, regardez ça, à quel point est-ce cool ? Je suppose que je voulais essayer d'en trouver une à la tête, c'est tout. Fondamentalement, chaque chose est dans son propre cadre, et ils ont juste joué à travailler avec ce qui peut animer automatiquement et une personnalisation pour aimer dire que cette boîte se ferme. Évidemment, il est assez facile de tomber, mais après la fermeture de la boîte, elle n'a pas pu aller directement de là à là parce que Figma a raté l'animation, donc ils ont dû faire un peu entre les deux, peu de entre les deux, un peu plus, un peu plus, un peu plus fermé, peu plus fermé, un peu de bande. C'est assez incroyable ce qu'ils ont fait. On dirait ça quand c'est fini. Ce n'est pas le seul, celui-là. C'est mon préféré. Regardez à quel point celui-ci est heureux. J'ai dû y aller voir comment il a été fait, et c'est ce que vous allez faire. Je viens d'entrer dans la communauté, j'ai tapé de l'animation, puis j'ai cliqué sur beaucoup d'entre eux. Beaucoup d'entre eux sont horribles, et certains d'entre eux sont géniaux. Parce que tu as de bonnes compétences Figma. Vous pouvez les parcourir et les choisir maintenant, c'est tellement bien parce que l'illustration est si merveilleuse. Je peux faire la même chose, mais mon bâton ne serait pas aussi gentil. Mais en regardant cela, on peut voir il y a à partir de l'image 1, c'est juste beaucoup de retards de temps, va à l'image 2, du délai, du délai. J'ai dessiné ces pièces distinctes, et c'est la partie principale que je pense que c'est cette belle illustration. Mais le véritable rebondissement entre les deux, c'est que nous allons jeter un coup d'œil. Tout est à voir avec l'assouplissement. Pouvez-vous voir que cela a fait de l'animation intelligente comme nous l'avons fait, mais ensuite ils ont fait de belles choses avec l'assouplissement comme dans, quand je dis bien, ils sont passés et vous pouvez cliquer dessus. Il n'est pas nécessaire que ce soit ici, j'ai gardé le mien dans la boîte. Vous pouvez être en dehors des sentiers battus. Nous pouvons ruiner l'animation de cette personne. Jetons un coup d'œil. Revenons en arrière, rafraîchissons ce que nous remarquons ? Oui, nous verrons ce zip au début où il va. Oui, c'est de l'art et non de la science. J'ai l'impression que c'est juste une belle illustration, une grande facilité en cours, et beaucoup et beaucoup de cadres Shift 1. J'en ai vu beaucoup plus. J'en ai vu 30 et 40. Quelle vidéo sinueuse, mais nous avons appris la personnalisation plus tôt. Nous avons construit un projet un peu plus grand, et je suppose que c'était mon objectif ici, c'est de vous montrer qu'une animation plus complète et nous sommes passés d'une petite flèche noire qui s'est installée, je ne sais pas. Laissez-moi revenir à la mienne, en ligne. Je vous verrai dans la vidéo suivante. 97. Projet de cours 18 - Ma deuxième animation: Bonjour à tous. C'est l'heure du projet de classe. Nous allons créer votre deuxième animation, d'accord. Maintenant, vous serez peut-être vraiment excité par ce projet de classe ou vous risquez de le dériser, d'accord. Mais il s'agit d'apprendre, d'accord. Cela pourrait être votre très malade et l'animation de toute votre vie. C'est bon. Je vous donne la permission d'être épouvantable. Il suffit d'y aller et d'avoir un minimum de trois cadres et de créer votre propre page de confirmation et d'aller à la boîte. Vous pouvez faire le truc de la boîte. Mais pensez-y comme si votre produit est comme le vélo, peut-être que les vélos roulent 10 et qu'il dérape ou qu'il y a un appareil photo qui prend peut-être une photo. Il n'est pas nécessaire qu'il soit dans une boîte. OK. Jetez un coup d'œil à ce que vous avez. La bière artisanale peut bouillonner au sommet, quelque chose d'amusant. Dessinez votre propre version d'icône. J'ai dessiné ces écouteurs, vous faites tout ce que vous faites et expérimentez l'assouplissement comme l'autre chose. Jouez avec l'assouplissement et que devez-vous livrer ? Prenez une capture d'écran de tous vos écrans, d'accord. Juste de tout ça, d'accord. Si vous savez comment enregistrer votre écran, j'utilise QuickTime sur un Mac, accord, sur un PC, je suis sûr qu'il y a une version, mais ce serait génial si vous savez comment enregistrer votre écran pour télécharger une vidéo, téléchargez-le directement ici ou collez-le sur Vimeo ou YouTube ou quelque chose et partagez-le, et j'aimerais le voir dans le groupe. Même si vous vous considérez comme si je suis un tiroir terrible, faites-le quand même. Notre groupe est un groupe incroyablement accueillant. Expliqué, je ne suis pas animé ce que mon visage va, que pensez-vous ? Si vous voulez critiquer, demandez quelle critique. Les gens sont gentils, j'aimerais voir ce que vous faites, et c'est au moins trois cadres. Si vous faites une grande animation longue, allez-y. Sinon, faites simplement quelque chose de simple, et je vous verrai dans la vidéo suivante. 98. 98: Bonjour à tous. Vous voyez ce grand nid d'oiseau ? Cela se transforme en magie. Vous êtes prêt, les couleurs de Doug apparaîtront un peu plus tard OK, donc c'est ce que nous construisons, nous allons faire. Au lieu de simplement faire de l'animation comme nous l'avons fait, c'est pareil, mais nous créons en quelque sorte une page, comme une transition de page. OK. Aucune page ne s'efface malheureusement Mais il y en a. Oui, on peut faire quelque chose de presque aussi bien. Très bien, décollons-nous la page, d' accord, pour ne pas détruire notre page d'accueil Je vais juste le déplacer ici et c' est là que commence notre énorme page désordonnée. Well continue. OK, nous allons donc avoir notre page d'accueil. Appelons ça quelque chose de différent. Nous allons donc l'appeler maintenant animation. La façon dont cela fonctionne est essentiellement que nous avons besoin d' une page d'espace réservé Nous allons devoir en enchaîner quelques-uns pour obtenir cette animation. La première chose que nous allons faire est ne pas faire entre ces deux pages. Entre celui-ci et celui-ci. Viens avec moi, copie ici, colle. Maintenant, je vais avoir le mien un peu plus éloigné pour le moment, juste parce que je vais vous montrer un peu de vin. Je veux cette page. Je vais passer au prototype. Maintenant, je suis juste en train de cliquer sur les boutons ici. OK, oui, si tu commences à avoir un peu comme un raccourci, du genre « hey », c'est quoi ? OK, n'oubliez pas que le raccourci est la commande ou le contrôle de barre oblique et que vous pouvez commencer à le saisir comme dans un panneau de prototype D'accord ? Et tu l'as vu là-bas. Regardez le petit raccourci, OK, c'était l'option 9 ou l'ancienne 9 sur un PC. Si vous regardez votre clavier, maintenez la touche Option d'un Mac enfoncée sur un PC, puis appuyez sur 890890 Ils sont tous côte à côte. Sur le dessus de votre clavier, vous pouvez voir le prototype de conception inspecter. N'oubliez pas non plus qu'il y a ce petit bonhomme ici, K sous les raccourcis clavier. Et c'est en fait très bien présenté et groupé, et ils ont mis en évidence les meilleurs, et celui-ci est en cours d'examen, ou est-ce que ce sont ces trois-là ? Pourquoi celles-ci ne sont-elles pas bleues ? Je pense que c'est juste pour montrer l'importance k des plus utiles. Alors gardez un œil sur les espèces bleues, probablement celles que vous voudrez. Donc je vais y aller. En fait, je pourrais juste en casser quelques-uns, juste parce que c'est un peu désordonné Revenons au point le plus important. Ce n'est pas ce que je veux pour le moment, d'accord ? Donc, ce que je veux faire, c'est dire que lorsque je clique un peu plus, je veux que vous vous rendiez ici la page de détails du type de produit. Au toucher, je vais utiliser une animation du style « push ». C'est ce que j'ai utilisé dans celui-ci. Peu importe le relâchement. Donnons-lui juste un aperçu. Renommons ce flux ici au lieu de E Commerce Flow. Ce sera mon flux d'animation. Jouons-y à partir d' ici. C'est bon. Plus lui. OK, c'est par ça que je vais commencer. Et je veux que ça se développe comme tu l'as déjà vu. Donc, ce que nous allons faire, c'est avoir deux pages, d'accord ? Séparez-les. Encore une fois, en gros, il n' y aura rien sur cette page. Le principal point à retenir de ce cours ou de cette vidéo, c'est que lorsque vous effectuez des transitions, vous devez probablement commencer par un écran vide N'oubliez pas que nous ne pouvons pas avoir un écran vide. Nous avons besoin de choses hors écran ou totalement transparentes. Ce que j'aimerais faire c'est peut-être faire glisser ce premier bloc. Ces gars-là vont s'en sortir. Il va falloir agrandir ce chemin. N'oubliez pas que s'ils sont sélectionnés, vous pouvez les ranger et combler l'écart entre les deux si vous en avez beaucoup. OK, donc j'ai un peu d'espace, les duplique pas, je tiens juste Ils glissent donc de cette façon vous ne savez pas d'où je les ai trouvés. C'était mon pied de page maintenant, dans ce cas, je veux les regrouper maintenant D'accord ? parce que je ne les ai jamais regroupés auparavant. Ils devraient vraiment être des composants, mais nous les avons créés plus tôt dans le cours. Maintenant, je ne vais pas le faire, je vais tous les laisser comme des bribes moches. Pourquoi ? Parce qu'il y a des bribes ici. Sont-ils dans le cadre 9 ? En fait, ils ne le sont pas. Ils vont bien dans l'ensemble. Oublie-moi. OK. Donc tu peux y aller, tu peux y aller. Faites juste attention lorsque vous saisissez un objet. Ils n'ont pas besoin d'y aller, n'est-ce pas ? Personne ne peut vraiment les voir sur leur premier écran, mais soyons officiels. Pareil pour vous. Je vais vous demander de recommencer par ici, je vais vous faire recommencer par ici et je vais probablement vous faire passer à autre chose. Je vais donc commencer par l'effacer. Je vais atteindre zéro si la capacité de mon clavier est réglée à zéro, 100 % Peut-être que oui. Faites-moi savoir dans les commentaires, s'il y a un ensemble à zéro, je sais qu'il y a un ensemble à 100 %, comment ne le savons-nous pas ? Peut-être qu'il n'y en a pas. D'accord ? Et tu peux aussi t'y fondre. Donc zéro que je projette ici. Je veux juste que ces choses entrent en ligne de compte. OK, je veux que ça s'estompe. Et ce que je vais faire, c'est ici, en fait, donnons un aperçu, juste pour m'assurer que tout fonctionne. Nous allons donc cliquer sur le bouton. Ça va aller ici, et puis rien ne se passera. C'est vrai. Il va juste être bloqué pour une réinitialisation Allons-y encore un peu. OK, et il est juste là. Donc, ce que je dois faire, c'est prendre un peu de temps. Vous allez donc passer en mode prototype. Utilisons notre joli nouveau raccourci. Souvenons-nous de notre option sur un Mac. Sur un PC et tapez neuf prototypes. Celui-ci va aller chez nous. Vous pouvez le faire glisser vers l'extérieur ou vous pouvez dire « sur Ed » dans le sens «   ne pas toucher ». Je tiens à le dire au sujet des délais. Où est-ce que je veux aller ? Je voulais y aller. Maintenant, on arrive à quelle page ? C'est le nom que je donne à celui-ci. Je dois donner un nom aux détails des produits d'animation. Détails du produit d'animation Vous passez aux détails du produit d'animation. Merci beaucoup. OK, ça passe instantanément aussi. Passons à Smart Animate. OK, donnons-en un aperçu. Maintenant, réinitialisons-nous. Au bout d'un moment, ça va disparaître. Ce n'est pas ce que je veux, je veux que ça se glisse dedans. Vous voulez maintenant, pourquoi ne sont-ils pas là ? Vous êtes peut-être en train de crier à l'écran, en train de partir. Il ne les a pas tous mis dans le cadre d'origine. OK. C'est l'une des choses quand on le traîne, j'aurais aimé qu'il y en ait, mais ce n'est pas Photoshop. Et une où tu peux dire que tu ne quittes pas ce cadre. Il y a une option ici qui dit de ne pas, vous savez, quitter le cadre parent lorsque je vous fais glisser, même si je dis, même si je vous ai en quelque sorte traîné vers extérieur, j'espère que cela entrera. Le futur est peut-être là. Prends un chèque. Le futur est là. En fait. Le futur était réellement disponible à ce moment-là, mais je ne connaissais pas le raccourci. OK. Je viens donc de mentionner que je voulais un moyen de faire glisser les éléments pour qu'ils restent à l'intérieur de la page OK, il a donc quitté cette page et sort pendant que vous faites glisser Commencez donc à faire glisser simplement avec la souris, cliquez sur ancien et faites-le glisser Et pendant que vous faites glisser le pointeur, maintenez la touche de la barre d'espace enfoncée. Et ce que vous remarquerez, c'est que vous pouvez voir ici que c'est resté dans la page. Lorsque vous déplacez un élément de la page vers l'extérieur, commencez par le faire glisser, puis maintenez la barre d'espace enfoncée. C'est un peu avancé parce que ce que vous pouvez faire, c'est simplement y aller, vous êtes là, vous êtes là et vous êtes sauté dessus. Je le ramène juste dedans. OK. C'est une option, mais voilà. Merci à Dexter pour le tuyau. Continuez. Tout ça, j'ai besoin de tout pour être un produit d'animation, donc je vais vous chercher et l'intégrer. Faisons tout ça d'abord. Tout cela va entrer à l'intérieur. Maintenant, si je fais glisser ceci, voyez-vous qu'il les manque ? Si je les fais glisser vers l'intérieur, l' animation sous la partie parchemin, est-ce que cela a laissé les parents derrière moi ? C'est ça ? Ces gars sont arrivés, certains y sont déjà. Mettons-les tous dans la même pièce. C'est bon. Donnons-en un aperçu maintenant pour que ces gars-là puissent travailler. Réinitialisez ces diapositives. Ces choses n'en font pas partie. La seule raison pour laquelle je les ai laissés séparément, c'est que si je les fais glisser dans le mauvais ordre, alors si j'y vais, c'est quoi ? Onglets, saisissez les cadres parents. De plus, si je les fais glisser et que je les sélectionne bizarrement ou si je fais glisser celui-ci au premier jour et que je l' ajoute à l'animation sous le partenaire de défilement C'est corrigé. Non, nous ne voulons pas que cela soit réparé. Ensuite, faites-les glisser vers le haut pour voir ce qui va se passer. Peut-être pas, mais l'onglet en fait, vous le faites glisser en dessous par accident. Allons y jeter un œil. Cliquez, faites une pause, diapositives dans l'ordre des couches restées dans le mauvais sens pendant une seconde. Rafraîchissons-le. C'est un peu difficile de revenir en arrière. J'utilise mon dos et en fait, on ne peut pas vraiment voir la transition. Mais vous constaterez peut-être que si vous les prenez du retard, ils doivent en quelque sorte changer de scène pour être au top. OK, ils sont en haut ici. Mais sachez simplement que vous vous assurez simplement que l'ordre de vos couches n'est pas important, car cela ne perturbe pas l'animation. Mais vous constaterez peut-être que pendant une partie de la transition, ces gars-là seront sous-tendus. Cela a-t-il du sens ? Pourquoi pas ? Bref, où en est-on ? Flèche pour revenir en avant. OK, donc c'est un peu ce que je veux et je veux que ces gars-là arrivent plus tard. Donc, le truc, c'est que nous devons, vous savez, tout doit être chronométré en même temps pour entrer Maintenant, ce n'est que deux pour Figma, n' est pas quelque chose que j'ai expliqué très clairement dans les dernières vidéos Tout est en quelque sorte lié. Lorsque vous créez ce site Web Apple, le développeur peut, vous savez, contrôler tout le timing à tout moment, d'accord ? Ce n'est donc qu'une limitation pour Figma pour le moment. Il existe des moyens de contourner ce Si vous obtenez des plugins d'animation chronologique, des protopyes, une autre solution vers laquelle vous pouvez exporter vos fichiers Figma et créer des animations plus complexes Mais en dehors du cadre de ce cours, sachez simplement que nous en avons tous en même temps, uniquement parce que c'est ce que fait Figma Très bien, la prochaine chose que je veux, c'est qu'ils ne soient pas dedans. D'accord ? Donc, ce que je vais faire, c'est être intelligent et le dupliquer d'abord. D'accord ? Parce que la difficulté à le faire après, je vais devoir essayer. Et si je les supprime tous puis que je les duplique, je dois essayer de les remettre là où ils étaient. Donc ce que je vais faire, c'est dire Frame 11, donne-nous un peu plus d' espace, tu peux rester dans les détails, tu peux partir. Oh, regardez comme ça devient compliqué, et ces gars sont hors du commun de toute façon. Cela se voit. Nous commençons, il passe à un écran vide. Ce truc construit. Et puis la différence entre ça et ça, ce sont ces gars-là. Ils ont commencé par ici et devraient s'y glisser. Essayez-le. Le cadre 11 n'est pas la bonne solution. L'animation défile avec 99. Tu dois être à l'intérieur, les animations défilent. Maintenant, essayez-le. Jouez. Eh bien, il y a une chose qui nous manque, allez, faites un quiz. Pourquoi ne pas passer à la suivante ? Nous venons de le faire. Nous l'avons bien fait. Je te jure que nous l'avons fait, sauf que nous n'avons pas dit ce qui se passera une fois que tout cela restera là. OK, nous devons dire vous, mon ami, option de membre prototype ou Alt Nine. OK, on peut dire que vous y allez sur simple pression. Non, je veux que tu y ailles après un certain temps. Combien de temps durera cette animation intelligente, s'il vous plaît. Faisons en sorte que cela soit facile à saisir et faisons-le à l'intérieur et à l'extérieur juste pour Google Très bien, prévisualisons-le maintenant, car je n'ai sélectionné nulle part. Il va simplement prévisualiser la première page d'accueil. Je vais donc passer à Headphones. Animation. Aucun flux d'animation. OK, et allons à Lomore. OK, alors voilà. Salut tout le monde. Je voudrais insérer une petite section ici. Cette vidéo convient à certaines personnes et certaines se perdent un peu. Et j'ai pensé que une bonne occasion de participer et de montrer différentes choses qui auraient pu vous faire perdre. Si vous vous êtes perdu et si vous l'avez bien compris , vous devez quand même le regarder. Parce qu'il est utile de voir où vous pourriez vous tromper à l'avenir et comment y remédier. Donc, la plupart des problèmes étaient dus au fait que ces choses ne s'intégraient pas, n'est-ce pas ? Eh bien, en fait, la première était qu'ils ne pouvaient même pas les voir. Donc, une fois qu'ils l'ont retiré de la page, ils sont comme s'ils avaient disparu. OK. Ce que nous devons faire, c'est nous assurer que lorsque nous cliquons sur notre cadre parent, accord, quelle que soit la page d'animation, vous devez toutes les consulter et les modifier toutes. D'accord, mais choisissez-en un. OK, puis passez au prototype. Et puis passez à celui-ci qui dit non. Passez au design. Et passez à celui-ci qui indique le contenu du clip. Pouvez-vous voir En fait, le contenu du clip ne change pas grand-chose si ce n'est que nous ne pouvons pas le voir. OK, dans l'aperçu, vous pouvez toujours l'obtenir comme si je savais que l'un d'eux s'appelait, s'appelle-t-il, Frame 11. Tu peux le voir là-bas ? Et je peux en quelque sorte cliquer dessus et le faire glisser. Il est toujours accessible, mais je ne le vois tout simplement pas. Donc, si vous avez du mal à faire votre animation, cliquez sur le cadre parent, désactivez-le. OK, pour que vous puissiez voir des trucs pour nettoyer les choses, vous pouvez les activer. Le principal problème, c'est que lorsque les gens le font glisser, ils quittent la page en ce moment, tout se trouve dans ce que l' on appelle les détails du produit A. D'accord ? Donc, si je veux que ce soit le cas, si je le fais glisser, parce que je ne veux pas qu'il soit inclus ici, vous pouvez voir si je le fais simplement glisser sans rien tenir. Le cadre 11 se trouve désormais en dehors de cette page. D'accord ? Cadre 11 sur la page. Il se trouve dans cette page parent, mais si je le fais glisser vers l'extérieur, n'avez plus à vous assurer de le faire glisser à nouveau vers l'intérieur, mais de le faire glisser vers l'intérieur de la page produit. Il me suffit de cliquer et de faire glisser le cadre parent, qui est le cadre 11, pour le remettre dedans, ou comme je vous l'ai montré un peu plus tôt avec la mise à jour, lorsque vous le faites glisser vers l'extérieur, commencez à faire glisser l'espace de maintien et il ne sort tout simplement pas de sa Une autre chose à vérifier est de cliquer sur la page parent et d'accéder à Prototype. Et voyez simplement si vous savez où se trouve le comportement du défilement. OK, regarde le trop-plein. Vérifiez s'il n'y a pas de changement vertical de défilement entre les deux. Je ne vois pas cela comme un problème, mais je suppose que c'est quelque chose que j'irais vérifier. OK. L'autre chose à vérifier est qu'ils portent le même nom pour le moment. Celui-ci s' appelle Frame 11. C'est dans les détails du produit A, ici sous Détails du produit, d'accord ? Celui-ci s' appelle toujours Frame 11. Regardez quand je le fais et je passe à autre chose, comme si je ne savais pas, Frame 11. A, quelque chose, quelque chose de différent. Elles ne correspondent pas. Jetons maintenant un coup d'œil et prévisualisons celui-ci. Ça va apparaître, cool. Hein ? La nouvelle petite mise à jour pour le comprendre s'ouvre donc sur une petite page. Je clique sur celui-ci, après un délai. Ça va à celui-ci. Je peux voir qu'il s'est simplement estompé au lieu d'être glissé. OK, si ça s'estompe alors que vous lui dites de faire autre chose, c'est de la figue, je ne sais pas quoi en faire parce que je ne le trouve pas sur la page précédente Impossible de le trouver car il porte des noms différents. Mais actualisons-le. Tu le regardes. Ça va juste s'estomper. Assurons-nous que les noms sont les mêmes. Peu importe qui appelle quoi. Je vais t'appeler ici. Passons à 11 A pour qu' ils soient tous les deux identiques. Donnons-lui un aperçu. C'est, ça va marcher. J'ai parcouru les pages pour être différent. C'est sur la mauvaise page. Passons au flux d'animation. Allons à Limore. Livré avec commande coulissante. Cela s'est estompé dans la vidéo d' aide à la mise à jour et ne fonctionne pas. Attends là-bas. Très bien, je sais pourquoi. Et j'ai renommé celui-ci. Nous avons donc en fait trois exemples de la même chose, n'est-ce pas ? Je renomme donc ce 111. Ce 111. Mais celui qui fait l'animation se trouve entre ces deux images. Ici. Entre celui-ci et celui-ci. Celui-ci porte toujours l' ancien nom de frame 11, donc maintenant ils s'appelleront tous 11. D'accord ? Tant qu'ils les nomment tous sur tous les cadres. Je vais également laisser cette erreur dans la vidéo , car cela vous arrivera probablement Nous allons donc appuyer sur Fa refresh. Et j'espère que maintenant nous allons passer au pré-slider, au pré-slider Il y a de la lumière dedans. Très bien, j'espère que l'une de ces petites mises à jour vous aidera si elle ne fonctionne pas tout à fait Bien, passez à la dernière partie de cette vidéo. Ce que nous pourrions faire pour celui-ci, c'est faciliter les allers-retours , car il y a encore beaucoup à faire et nous devrons peut-être augmenter ce chiffre. OK, alors cliquez, faites-le glisser si vous êtes sûr, saisissez-le simplement. Peut-être que ça va prendre une seconde ou deux. Une autre chose que nous pourrions faire avant de le nettoyer est de cliquer sur Prototype. Si vous n'avez rien sélectionné, vous pouvez les faire glisser. J'ai l'impression que mes flux d'animation doivent être présents. Je n'ai aucune idée de ce qu'est Float One. Vous pouvez donc le sélectionner et le supprimer. OK, ça semble plus cohérent. Allons rafraîchir vos diapositives là-dedans. Je me sens mieux. Mieux. OK. Ce sont donc des transitions de page. Il vous suffit de faire ce que vous voulez faire, d'avoir une page vide et de la créer sur chaque page si vous voulez un calendrier différent. Si vous voulez évidemment que tout soit réuni en un seul, vous pouvez sauter de celui-ci jusqu'ici. D'accord, voici comment faire des animations de transition de page dans Figma Passons à la vidéo suivante. 99. Projet de cours - transition de pages: Hé, le gang. C'est l'heure du projet de classe. Il s'agit d'une transition de page. Je trouve cela assez difficile à dire, alors je vais le prononcer, la transition de page. Je veux que vous fassiez quelque chose comme ce que nous avons ici. vôtre peut être égale à celle faite. Cela ne me dérange pas entre les cadres, mais une sorte de construction où vous allez d'une page à l'autre pour que ce soit de l'animation, mais c'est un moyen, je ne sais pas, de construire une page. ne me dérange pas, cela peut se situer entre la page d'accueil et la page détaillée de votre produit existante, c'est bon. Il peut également s'agir de nouvelles pages que vous créez pour votre propre version. Vous avez peut-être un produit particulier qui pourrait avoir une page vraiment amusante. Construisez cela et voyez si vous pouvez faire une transition entre les deux. Comme avant, il suffit de prendre une capture d'écran des pages que vous faites. Disons celui-ci ici. Il suffit de zoomer. Je veux voir tout cela probablement en vue de la conception. Tous les Ys sont partis. chose comme ça. Capture d'écran si vous savez comment enregistrer votre écran. J'aimerais bien voir votre animation réelle. Téléchargez cela au lieu de ou aussi. Partagez-le également avec les médias sociaux. J'aimerais voir ce que vous faites et ce que vous pouvez plier Figma pour faire. Oui, ce n'est pas un outil d'animation complet. Je serais intéressé de voir ce que vous pouvez faire. C'est ça. Je vous verrai dans la vidéo suivante. 100. Micro-interactions avec composants interactifs dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons réaliser les micro-interactions les plus élémentaires. S'agit-il même d'une micro-interaction ? Un vol stationnaire. Ils sont appelés composants interactifs à l'intérieur de Figma. Il s'agit d'un vol stationnaire, comme vous pouvez le voir. Ici, il suffit de cliquer dessus et de désactiver. Jusqu'à présent, nous devions choisir une variante pour commencer, et nous n'avons pas eu cette belle interaction, mais maintenant c'est le cas. Laissez-moi vous montrer comment les fabriquer. Bonjour, tout le monde. La première chose est que cette fonctionnalité que je vous montre ici est nouvelle pour Figma, en fait, elle n'est pas encore sortie. Il est toujours en version bêta, en fonction de la durée que tu regarderas ça dans le futur. Soit cela fonctionnera parfaitement, soit vous devrez peut-être l'activer. Si certaines des fonctionnalités ne sont pas disponibles, allez simplement sur Figma, et nous effectuerons une recherche Google à la recherche composants interactifs bêta et demanderons à faire partie du programme. Cela prend environ une semaine, puis ils ont semblé laisser n'importe quelle personne âgée dedans. Ils m'ont laissé entrer. Mais à l'avenir, cela pourrait simplement fonctionner, donc nous allons commencer par cela. Je vais défaire et on va commencer pour de vrai. Ce que je veux faire, c'est juste une version vraiment bare bones, juste pour que je puisse montrer comment cela fonctionne et ensuite nous ferons des choses plus détaillées au fur et à mesure. Je viens d'avoir un document vierge parce que l'autre est en désordre et j'ai appelé ça des micro-interactions. Je vais juste commencer par un rectangle. Nous allons faire ce bouton que vous avez vu au début. Je vais vraiment faire des os nus. Nous commencerons par un bouton gris et nous le transformerons en composant. Nous allons compter sur certaines choses que nous connaissons déjà. Un bouton doit être un composant, se dirigeant vers une variable. C'est ce que nous devons commencer, car composants interactifs ne sont qu'un moyen de changer de variables. Pour créer une variable, il faut commencer par un composant. Ce composant doit être transformé en variable, et il doit s'agir de deux variantes ou d' au moins deux variantes. Celle-ci ici, je vais juste double-cliquer et changer la couleur. J'ai deux couleurs, et c'est là que nous avons déjà fait. C'est une variante et ce que nous avons pu faire jusqu'à récemment, c'est seulement nous pouvons y aller, voici mon composant, je peux choisir si c'est cette variante ou cette variante. fallait juste le faire. n'y a pas eu d'interactivité entre les deux, ce qui est bizarre. Ces nouvelles fonctionnalités semblent être très importantes dans nos prototypes. Mais de toute façon. Ce que nous devons faire maintenant, c'est de rendre cela réellement interactif. Pour ce composant interactif, ce que nous faisons, c'est que nous entrons ici, ce sont mes composants. Peut-être que les points bordaient l'extérieur. Allez dans Prototype, entrez dans mes composants ici. Voici les deux versions. Vous pouvez voir ces points apparaître. Eh bien, jusqu'à présent, nous ne pouvions aller que vers d'autres cadres. Mais maintenant, nous pouvons passer à d'autres composants et utiliser des choses comme, vous voyez cela sur le robinet pendant le survol. Si vous ne pouvez pas voir en survol, cela signifie que vous ne faites pas partie de la bêta et que vous devrez peut-être demander l'accès si vous le souhaitez. Sinon, attendez, ça sortira bientôt. Ils pourraient changer le nom de celui-ci. Il suffit de regarder ici. Certains d'entre eux vont dire quelque chose à voir avec le vol stationnaire. Cela peut ne pas dire en survol, mais ils se réservent le droit de le modifier en version bêta. En planant, je vais passer à la variante 2, et c'est tout. Allons y aller. Prévisualisons celui-ci. Je dis que ça va marcher. Cela ne va pas marcher, ou c'est le cas. Si le vôtre ne fonctionne pas, regardez ça, je suis en train de planer, je ne fais rien. C'est la nouvelle Figma, et ce qu'on appelle des composants interactifs. Super serviable, à venir depuis longtemps. Si vous ne pouvez pas voir le vôtre, c'est parce que vous n'avez que ceci, j'en ai cette version. Eh bien, comme je l'ai expliqué ici, traînez-en un. Vous n'avez peut-être que ces premiers composants ici. Vous devrez peut-être faire glisser le curseur depuis le panneau des ressources, le bouton réel. Vous devriez vraiment être sur sa propre page. Allons à celui-ci maintenant, et nous y allons en planant. Faisons un autre simple. Cela se fera en cliquant ou du moins sur le bouton. Je vais aller voler quelque chose de mon dernier document. Je suis allé installer cette case à cocher, je pense que je l'ai initialement volée dans la communauté Connect de Microsoft. Quoi qu'il en soit, allons regarder les calques. Il s'agit simplement d'un rectangle et d'une case à cocher. Actuellement, vous êtes à l'intérieur d'un cadre, mais cela n'a pas vraiment d'importance. Je vais les sélectionner tous les deux. Assurez-vous qu'il s'agit d'un composant. Assurez-vous qu'il existe deux variantes. La deuxième variante, je vais double-cliquer pour supprimer la coche. C'est ce que nous avons fait avant. Nous avons fait cette petite chose et nous pouvons décider si elle est cochée ou cochée. Pour ajouter l'interactivité, comme nous l'avons fait auparavant, passez à l'option prototype 9, Alt 9. J'ai double-cliqué pour entrer dans les composants ici, pour dire : « Vous y allez ». Quand y allez-vous ? Sur le robinet. Je l'ai déjà fait. Sur la touche, passez à Variant2. Instantanément ? Oui, pourquoi pas ? Dissoudre, ça ne va pas être aussi excitant. Donnons un aperçu. Je vais traîner une instance. J'en ai déjà un et nous allons le prévisualiser. Je suis presque sûr qu'il devrait être déjà ouvert, et regarder. Regardez à quel point c'est cool. Pourquoi ça ne remonte pas à l'époque ? C'est allé dans un sens. Si je le réinitialise pour tous, il se déclenche mais ne se remet pas. Comment pouvons-nous faire cela ? Fondamentalement, si vous voulez qu'il bascule, des allers-retours, il suffit d'y aller. Nous en avons un qui traîne d'ici à ici. Allons juste en revenir à cette voie. Il se souviendra de la dernière chose que vous avez faite. Il va aussi se souvenir du changement de robinet, et il va passer à ce nouveau. J'espère que cela fonctionne. Allons-y. Basculer, basculer, basculer, basculer, basculer. Hé, des micro-interactions super basiques. En fait, il ne s'agit que de composants interactifs. C'est basique tel qu'il est. Nous allons faire d'autres micro-interactions, les bits de la prochaine vidéo. Il s'agit de composants interactifs à l'intérieur de Figma. 101. Commutateur de micro-interaction dans Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons créer ce petit interrupteur à bascule pour qu'il s'allume et s'éteint, qu'il anime et change de couleur. Très similaire à la dernière vidéo, mais un peu plus excitante et probablement un peu plus micro-interaction-nes car elle devient verte pour nous aider à communiquer qu'elle est réellement activée. Très bien, allons-y. Pour gagner du temps, j'ai mis un cercle avec un rectangle aux coins arrondis, joué avec quelques ombres tombantes douces et de jolis dégradés. Nous allons commencer à ce stade. N'oubliez pas de faire une variante, il faut d'abord qu'il s'agisse d'un composant, de créer une variante. Il faut que ce soit différent et je ne vais faire que déplacer ça ici. La seule différence entre cette vidéo et la dernière vidéo est que nous devons, lorsque nous les rejoignons, prototyper. Je vais cliquer sur celui-ci à l'intérieur. Je double-clique dessus pour aller à l'intérieur du siège. Vous allez là-bas et détouchez la deuxième modification que nous utilisons instantanée, qui est la valeur par défaut. Mais nous pouvons utiliser Smart Animate. C'est la seule différence, et cela va faire notre belle animation à laquelle nous sommes habitués. Pendant que nous sommes ici, nous devons le faire revenir pour faire la même chose. Donnons-lui un aperçu. Vous ne pouvez pas prévisualiser cela ici. Les composants, nous allons faire glisser une instance de celui-ci. Maintenant, cela devrait vraiment fonctionner. Ça fait du bien. C'est bien. Je vais en avoir envie. C'est une micro interaction. J'ai l'impression que c'est plutôt une micro-interaction si on fait quelque chose avec la couleur. Jetons un coup d'œil. Design linéaire. Indiquons qu'il est activé pour le rendre un peu plus clair. On y va. On va aller quelque chose. Nous allons passer trop de temps à choisir des couleurs, c'est ce que nous allons faire. Est-ce que c'est assez vert ? Je pense que je suis allé trop loin pour un aqua. Quoi qu'il en soit, allons-y jeter un coup d'œil. Celle-ci et nous continuons, partez. Regardez-moi ça. Regardez-nous en train de faire des choses. C'est assez petit, mais vous êtes probablement zoomé. Vous y allez. Vous avez peut-être un rouge d'un côté et un vert de l'autre. Cela nous aide vraiment à savoir que la chose que nous avons cochée à côté est réellement activée et que l'animation intelligente fonctionne bien. Très bien, faisons-en un extra spécial dans la vidéo suivante. Oui, allons-y et on le fait maintenant. Avant de partir, j'ai été vraiment paresseux avec mes conventions de dénomination. Quelques choses à retenir. Les mêmes règles s'appliquent. Si vous voulez aller entre ceci et ceci, les couches doivent être identiques. Si le vôtre cesse de fonctionner à n'importe quel stade, c'est parce que vous avez un composant ou est-ce que c'est, passons à U. Ceci mes composants ici. Je peux dire que c'est le maître à cause de l'icône et que j'ai la variante 1 par défaut. Tout d'abord, allons le ranger. On peut le nommer ici. Nous pourrions appeler celle-ci au lieu de la variante 2, probablement qu'elle sera activée. Celui-là va être désactivé. C'est une chose qui va rendre ça plus agréable. Lorsque nous essayons de le faire glisser vers différents endroits. Vous verrez, « Faites glisser la modification vers ». Vous pouvez voir que j'ai mon petit interrupteur à bascule maintenant allumé et éteint. Cela pourrait être utile. L'autre chose, c'est que celle-ci s'appelle Ellipse 10. C'est ce qu'on appelle Ellipse 10. Si je finis par le changer ou le regrouper accidentellement, il va se casser. Allons-y un coup de fouet. Pas de travail. Assurez-vous simplement qu'il s'agit de la même chose entre les deux variantes. Le même genre de problèmes que nous avions lorsque nous faisions de l'animation entre les images et entre ces petites variantes, la même structure, les mêmes règles s'appliquent. Encore une fois, jetons un coup d'œil à la conception de nos composants. Qu'avons-nous ? Il s'appelle la composante 1. C'est un nom terrible pour ça. Ce sera mon interrupteur à bascule. Vous voyez que la variance est, comment appelez-vous cette valeur de nom, c'est ma valeur par défaut comme « Je ne sais pas comment appeler cela ». J'ai allumé ça. Vous avez compris l'idée. Nous sommes revenus à name juste pour vous rappeler de mieux nommer les choses que de le laisser par défaut et dans la variante 2. Très bien, allons maintenant rendre quelque chose d'un peu plus excitant dans la prochaine vidéo. 102. Menu latéral de micro-interaction transformé en croix dans Figma: Bonjour à tous. Préparez-vous. On va passer des menus de Burger rayés, sandwichs [inaudibles] aussi, des trucs croisés. Il va s'animer, il va changer de couleur, les formes extérieures vont changer. C'est totalement un rite de passage pour réaliser cette animation. Tout le monde le fait. C'est génial. Il a l'air cool. Je pourrais cliquer dessus toute la journée. Allons-y. Très bien. Nous allons vous montrer comment y arriver. Le truc avec celui-ci, c'est qu'il n'y a pas d'astuce. C'est la même chose que le petit interrupteur à bascule. C'est juste l'animation intelligente, mais je ne vais pas prendre plus de temps, mais je vais juste vous frayer un chemin à travers cela juste pour que vous ayez l'idée de comment le faire, et en plus c'est comme un rite de passage, cette animation du petit menu Burger. Je vais commencer par le rectangulaire ou le cadre, peu importe. Autour des coins, tout autour, au niveau des couleurs, ça va faire. Ce que nous allons faire, c'est que nous allons commencer par nos petites lignes. Je vais utiliser L pour la ligne 2. Je vais maintenir la touche Maj enfoncée pour les faire glisser. Je vais en faire trois. Commande D. Je vais faire glisser le premier ou l'option draper la première. Commande D. Sélectionnez-les tous les trois. Je vais y aller. Je dois vraiment tester à quel point ils doivent être éloignés. Mettez-les tous. Nous allons les resserrer. Très bien. Ce sera mon début. Je vais commencer par des couleurs spécifiques à certaines marques, c'est une couleur comme celle-ci. Tout comme avant, nous devons avoir un composant qui doit être une variance entre eux à cette fin. Fondamentalement, ce que nous faisons est celui du milieu, vous pouvez soit supprimer, soit réduire l'opacité jusqu'à zéro, elle disparaisse, soit décider qu'elle s'éteint ou faire autre chose. Avec ces deux lignes, je double-clique pour entrer dans mes composants. Ne cliquez pas trop sur et je comprends ça. Je veux planer sur l'extérieur pour que je puisse obtenir ça, et je veux le faire, qui se souvient comment le faire passer à 45 degrés, c'est ce que je veux. C'est ça. Hold et Maj. Vous pouvez le dire en le regardant et il le dit là-haut. Il y a celui-là. Il y a celui-là, 45 degrés aussi. Maintenant, je vais les aligner, eux au milieu et non alignés. Allons-y par là. Ça va bien paraître. Personne n'a besoin d'aller dans le sens. Encore aligné. Horizontal, vertical. C'est là que tu y vas. Je vais les changer en, allons-y pour toi. Passons au rouge. Je veux une bonne micro-interaction supplémentaire. Je voulais rouge pour fermer, vert pour commencer. Allons faire une ronde complète. Au lieu de passer à un cercle, vous pouvez créer un cercle en allant à l'outil Rectangle et tout cela. Nous en avons parlé un peu plus tôt, mais tous les coins arrondis. Tant que vous êtes au-dessus, cela n'a pas d'importance, mais 2 000 là-dedans tant qu'il va au-delà d'un rectangle à un cercle. La magie se produit, c'est ce prototypage. N'oubliez pas que je vais cliquer à l'intérieur pour prendre ma première variante. Vous allez y aller. C'est pareil. Sur Tap Change to, mais au lieu d'instantané, ce sera Smart Animate. Il en va de même pour celui-là. Quand je clique sur celui-ci, retournez là-bas et il se souviendra de ce que j'ai fait. Donnons un petit aperçu. Allons-y. N'oubliez pas que vous devez faire glisser une instance hors de celle-ci car vous ne pouvez pas prévisualiser le jeu de composants. Allons-y ici. Vous êtes prêt. Où est-il ? C'est là. C'est un rite de passage. Celui-là va impressionner vos collègues, vos amis. Regardez à quel point c'est beau. Il va d'un carré à un cercle. Il fait également que les lignes se glissent les unes sur les autres pour se croiser. C'est amener la micro direction à son niveau supérieur, quelque chose qui a l'air assez chic. Les mêmes principes, le prototypage au lieu de passer de cadres à différentes variantes d'un ensemble de composants au lieu de passer à des pages. Ensuite, je change juste mon animateur pour avoir tout ça. Cliquez sur ça toute la journée. Très bien. C'est ça. Je vous verrai dans la vidéo suivante. 103. Projet de cours 20 - Micro-interaction: Hé gang, c'est l'heure d'un projet de classe. Il s'agit de micro-interactions. Je veux que vous fassiez le menu des hamburgers et, comme je l'ai dit, c'est le rite du passage si vous ne l'avez pas déjà fait. C'est celui-là. Les lignes à travers vous font votre propre version. Eh bien, il suffit de faire ça. Mais je veux que vous fassiez le vôtre. La coutume et la direction peuvent être tout ce que vous voulez. Il peut s'agir d'un interrupteur à bascule. Ce que je veux que vous fassiez, c'est aller chercher une recherche Google pour trouver micro-interactions ou 20 meilleures micro-interactions ou les plus excitantes, et voir si vous pouvez en recréer une. Ce sera pour votre fichier Figma. Va jeter un coup d'oeil là-dessus. Que pourrait-on faire ? C'est peut-être ce bouton ici, peut-être que c'est ce bouton d'achat, peut-être que c'est sur la page Félicitations, quelque chose à faire pour les étoiles. Le vôtre commence à paraître un peu différent du mien maintenant parce que vous utilisez vos propres produits. Réfléchissez, faites un peu d'exploration, et j'aimerais que vous créiez à la fois le menu bugger et que vous le croisiez et le vôtre. Ensuite, une fois que vous avez terminé, envoyez-moi des captures d'écran du jeu de composants. Si vous ne parvenez pas à savoir comment faire une animation vidéo. Ce que je veux dire par là, c'est m'envoyer une capture d'écran. Mais si vous le pouvez, j'aimerais voir une vidéo de la chose qui fonctionne, vous interagissez avec elle. Allez-y, faites un peu d'interaction, et je vous verrai dans la vidéo suivante. Après avoir fait vos devoirs, allez le faire. 104. Comment modifier la miniature des fichiers Figma: Bonjour, tout le monde. Dans cette vidéo, nous allons passer de la miniature que nous avons utilisée, qui n' est pas pour moi assez représentative de ce que nous faisons, de celle-ci à celle-ci, qui est un peu plus représentative de la fichier réel à l'intérieur. Parfois, il peut être très évident ce qu'il y a dans le fichier et parfois pas si évident, donc une vignette personnalisée peut être pratique. Laissez-moi vous montrer comment. Cela vous rend probablement tout aussi furieux. Les miniatures ici vont parfois bien, mais elles finissent comme pour le moment, ça me montre des choses que j'ai fabriquées il y a longtemps. Il se trouve sur ma page Flux de tâches et ce n'est pas vraiment révélateur de ce qu'il y a réellement dans le document. Celui-là, ce n'est pas utile. Fondamentalement, cette vignette utilise la première page de votre document. Je vais l'ouvrir et découvrir comment y aller plus tard, lequel travaillait ? Ce n'est pas utile, c'est juste trop petit. Ce que vous pouvez faire, c'est que vous pouvez le modifier. Je vais y aller. Ce qu'il utilise actuellement, c'est tout ce qui se trouve sur la première page de la première image. Il utilise cette chose sur la mienne. Ce que nous pouvons faire pour le mettre à jour, nous pouvons simplement accéder à un cadre et cliquer avec le bouton droit de la souris. Voici la vignette. C'est une façon de le faire. Le problème est qu'il ne va utiliser qu'un seul cadre, donc ce que vous avez tendance à faire est de créer une page entière pour, vous allez appeler cela ma page de couverture ou ma vignette de couverture. Vous pouvez l'appeler comme vous le souhaitez. Placez-le en haut, et ici, il y a une trame par défaut sous la communauté Figma appelée couverture de fichier. C'est tout ce que nous voulons. Cela correspond à la taille en arrière d'ici. Vous pouvez y mettre tout ce que vous voulez. Je suis réticent à l'idée de commencer à copier une partie de ça. Pourquoi ? Parce que j'ai plus d'exemples de ces choses et de ce que j'ai tendance à faire, vous pouvez utiliser le copier-coller et le coller sur cette page. Ce que j'ai tendance à faire, c'est simplement faire une capture d'écran de la pertinence. Sur un Mac, c'est Command Shift 4. Sur un PC, je pense que vous imprimez l'écran et que vous le collez dans quelque chose. Vous devrez vérifier deux fois. Je vais faire une capture d'écran. Je vais sur ma page de couverture et je la dépose dessus. Commande Maj K, Importer. J'ai une capture d'écran, la voilà, et je vais avoir exactement, cliquez une fois. Je vais le coller à l'intérieur de mon cadre. Ce que je vais faire, c'est que je ne sais pas, impression qu'une partie de la légitimité d'être concepteur UX est qu'elle doit être inclinée sur le côté comme un pistolet dans les films. Vous n'êtes pas un vrai concepteur UX si vous avez vos affaires claires. Il faut être sur le côté. Coq à un angle. Ce sera le mien et je peux cliquer dessus avec le bouton droit de la souris et dire : « Définir comme vignette ». C'est la bonne taille. Ce que vous verrez également, c'est que la petite icône change ? Il y a tout petit petit, je ne sais pas ce que c'est. C'est le petit glam qui se trouvait à la carte qui apparaît ici. Eh bien, pour moi, dans ma vision, j'utilise un peu de vision, donc ça pourrait être dans la mienne. Il ne le met pas à jour tout de suite et je le ferme et je l'ouvre. Juste là et nous sommes de retour et ça a marché. Regardez-moi ça. tout sur la diapositive et personnalisé. Regardez-moi ça. De toute évidence, certains d'entre eux fonctionnent très bien, mais nous y allons. Une autre chose que vous pouvez faire est, ouvrons cela, vous pouvez prendre une capture d'écran de la présentation réelle, vous voudrez peut-être la voir à l'intérieur du cadre, ce qui peut être sympa. Ce n'est pas cette page. On y va. Celui-là, ici. Si nous le faisons et que nous présentons, prenez une capture d'écran de cette page. Cela peut paraître plus beau, il doit toujours être sur un angle. Combien d'angle ? Je ne suis pas sûr des diplômes, je ne suis pas encore dans les échelons supérieurs des concepteurs UX pour connaître les diplômes. C'est une recette secrète. Quoi qu'il en soit, je gaufre. Voici comment mettre à jour la vignette dans les fichiers Figma. 105. Comment exporter les images dans Figma: Bonjour à tous. Dans cette vidéo, nous allons examiner l'exportation d'images depuis Figma, une image d'exportation à usage général. Nous examinerons quelques cas d'utilisation plus spécifiques pour les développeurs et les collègues, ainsi que dans les prochaines vidéos, mais nous allons le faire à usage général. Vous pouvez exporter n'importe quoi. Jetons un coup d'œil à ce logo, j'ai besoin que le logo soit exporté. Ce que vous devez faire, c'est d'autres programmes que vous le sélectionnez et allez fichiers, exporter, quelque chose comme ça. Celui-ci ici vous applique des paramètres d'exportation, donc je veux dire que vous avez sélectionné, je vais y appliquer certains paramètres et ensuite vous pouvez passer en revue et choisir. C'est le format principal, de quel format il s'agit, PNG, JPG, SVG ou PDF. Si vous êtes nouveau, un SVG est un graphique vectoriel évolutif idéal pour objets tels que les logos et les icônes car ils sont comme indépendants de la résolution, c'est la mauvaise clé, l'échelle, vous pouvez voir qu'ils grossissent de plus en plus sans pixelliser. Par le passé, vous auriez probablement utilisé le PNG, car cela permet de voir une certaine transparence autour de l'arrière-plan par opposition aux fichiers JPG. Maintenant que cet aperçu est mis à jour, je pense que vous devez aimer cliquer sur « Off », cliquer à nouveau sur « On ». Allons-y, on. Regardez l'aperçu, il est toujours là, juste en me montrant l'arrière-plan quand même, cela va être exporté avec un arrière-plan solide, ce ne sera pas clair. SVG, c'est quand vous pouvez les faire, des icônes géniales, logos géniaux tout ce qui est cette victoire, lignes droites simples, c'est ce qu'est SVG, un graphique vectoriel évolutif et des PNG sont utiles, je vais vous montrer, nous allons vous montrer . faites JPG car c'est l'opposé d'un PNG en tant que JPG et SVG. JPG sont vraiment bons s'il n'y a pas besoin de transparence et que vous avez beaucoup d'informations sur les couleurs, quelque chose comme ça. SVG ne saura pas quoi en faire, car il ne s'agit pas d'un graphique vectoriel comme ces formes linéaires de texte et d'icônes, donc JPG se base en premier. JPG ont de grandes couleurs, ils peuvent être compressés beaux et petits, et ont fière allure. Disons d'exporter, et je dirais que vous êtes un JPG. Ce que vous remarquerez, c'est le nom ici, si je veux exporter cela, je clique simplement sur le bouton et ça me dit, vous allez exporter cette chose. Je mets mes images ici sur un dossier vide sur mon bureau, vous remarquerez que le nom de la couche ici est ce que Figma utilisera pour le nom de votre fichier. Je peux l'enregistrer là, regardons un peu et il y a mon JPG. Maintenant, quelle sera la taille ? Figma n'est pas vraiment conçu pour compresser cela, vous devrez peut-être utiliser autre chose, quelque chose comme minuscule JPG est une bonne solution ou utiliser quelque chose comme Photoshop pour réduire la taille du fichier. Il peut y avoir un peu de gros morceaux qui sortent de Figma. Vous remarquez également que c'est le nom de fichier, donc si vous voulez être intelligent, vous pouvez entrer ici et appelons cette femme IMG 1 et maintenant, lorsque je vais exporter, elle utilisera cette convention de dénomination. JPG sont bons pour les images sans transparence, SVG est bon pour tout type de vecteur linéaire. Lorsque nous utilisons un PNG, c'est idéal pour la moitié et la moitié. Celui-ci a un cercle et il a de la transparence, donc je ne peux pas utiliser de JPG. Cette image peut être un SVG ou un JPG, il doit donc s'agir de ce PNG, car elle permettra la transparence autour de l'extérieur. D'autres choses dont nous n'avons pas parlé est le guide des tailles ici. Cela dépendrait, disons d'une conception Web, vous fournissez souvent à votre développeur web un 1X et un 2X en fonction de la façon dont il fabrique le site. Comment ils font face aux images réactives. Il s'agit d'une question à laquelle vous aimeriez discuter avec un développeur. Voulez-vous qu'il coupe simplement le milieu et qu'il soit 1,5 et qu'il n'ait aucun changement d'image ? Cela signifie simplement qu'il y a certains moniteurs que l'image aura fière allure à cette taille 1X plus petite, par 1X, elle sera 174 par 174. Si j'exporte celui-ci, il va être le double de cette taille, ce qui signifie simplement sur de nouveaux ordinateurs portables ou ordinateurs, ce qui est la plupart d'entre eux maintenant. Il aura une meilleure apparence et 1X se chargera rapidement puis sera petit, mais un sera aussi beau. Si souvent, vous pouvez ajouter plus d'une fois. Je vais exporter ce PNG en 1 et 2X. Suffixe, c'est une pratique courante pour le titre, donc on l'appelle toujours ellipse 2, mais l'un d'eux n'aura pas de suffixe à la fin, vous pouvez le faire pour être clair avec vous-même, et un suffixe signifie simplement que c'est Je vais aller jusqu'au bout. Mettons-le là-dedans. Jetons un petit coup d'œil. Je vais passer à cette vue, donc nous avons 1X et 2X, pouvez-vous voir les différences de taille de fichier ? Toujours en transparence, vous voyez la différence de qualité. Ce serait un peu dur sur cette vidéo, mais je suis sûr que vous pouvez le voir. Quels sont les grands pixels ? Cela devient un peu vieux maintenant la plupart des sites Web vont probablement essayer de le faire deux semaines, pas toujours. D'autres choses utiles lorsque vous exportez, disons que je souhaite exporter cela. Je vais double-cliquer sur « Exporter » , encore une fois ce cercle, donc je vais aller haut, j'en ai besoin, qu'est-ce que c'est ? Transparence PNG. Il y a une option ici qui dit, ces petites lignes pointillées, vous pouvez dire ignorer les calques qui se chevauchent, mais si je le désactive, ce qui est une icône ici. Vous y allez. Il a attrapé la partie arrière de cette image, il a également attrapé la boîte verte et tous ces autres trucs. Cela dépend, en gros, d'utiliser les bords de l'ellipse et de saisir tout le reste qui se chevauche, donc vous pouvez ou non en avoir besoin, je montre à tout le monde que je n'en ai jamais besoin, il y aura un certain temps que vous en aurez besoin. Nous avons parlé de 1X et 2X, mais disons que vous le voulez, disons que vous avez une icône, je vais juste prendre une modification ici. Qu'est-ce qu'on a ? J'ai eu ça, je ne me souviens même pas quand j'ai fait ça. Je l'ai eu de quelque part, disons que je dois exporter ça. Je vais exporter mais au lieu d'être SVG, m'a demandé d'être fourni à une taille spécifique, donc je vais être un PNG, donc il reste transparent, il devrait vraiment s' agir d'un SVG. Mais disons ici qu' au lieu de 1X, nous pouvons le taper, nous pouvons dire que je veux qu'il soit d'une largeur de 500. Vous mettez un W à l'extrémité ou un H pour la hauteur, vous voulez avoir 500 pixels de hauteur ou 500 pixels de large, ce qui le forcerait simplement. Il suppose des pixels, alors faisons-le et faisons-en un autre et cela sera, disons 100 pixels, peut-être pour une version miniature de celui-ci. Exportons les deux PNG. J'ai laissé un suffixe là-dedans comme parfois deux, ce qui n'est pas bon, mais là, c'est mon blanc, vous pouvez vraiment le voir. Il y a la grande version, on peut voir les roues, elles avaient de la transparence, autre est évidemment 1000 pixels ou 500 pixels et l'autre mesure 100. Si vous avez appliqué l'exportation à quelques éléments différents et que vous effectuez un changement, disons que vous modifiez l'un de vos styles de couleurs et que cela met à jour beaucoup de choses que vous aimez, dois-je aller et appliquer individuellement tous ces éléments à nouveau ? Non, vous pouvez les exporter en un seul coup en allant jusqu'à votre petite icône Figma, allez dans le fichier, et si vous cliquez sur celui-ci, il suffit d'exporter. Il va passer en revue et dire, hey regardez, voici toutes les choses que vous avez aussi modifiées les paramètres d'exportation et vous pouvez dire, j'en ai besoin, ça, je n'ai pas besoin de ça, mais j'ai besoin de ces trois et je clique simplement, « Exporter » et il le fera en une seule fois et les mettra là-dedans, remplacera les fichiers existants, voilà, simple. Mes amis qui exportent des images depuis Figma espèrent que cela vous a été utile. Je vous verrai dans la prochaine vidéo. 106. Comment partager votre document avec des clients et des parties prenantes: Bonjour à tous. Dans cette vidéo, je vais vous montrer comment exporter votre document vers vos clients ou parties prenantes, peut-être votre chef de produit, votre responsable de ligne ou votre responsable de studio, que soit cette personne. Nous avons parlé de partager un lien. Nous allons le faire vers la fin parce que nous l'avons déjà fait. Je vais vous montrer quelques choses uniques que vous pouvez faire. L'un d'entre eux consiste à exporter vos cadres. Je suis sur ma page, je frappe cette exportation. Je vais accéder à mon icône Figma et au fichier en haut à gauche, celui-ci a ici des cadres à exporter ou à exporter vers des cadres. Cadres au format PDF. Cliquez dessus. Ça va être bon, ça va être mauvais. Le problème, c'est que c'est considéré comme un cadre. Il y a beaucoup de choses, même s'il s'agit d'une mise en page automatique, qui sont considérées comme un cadre. Il va falloir ranger. Nous évitons de ranger le rangement depuis longtemps, mais bon, nous allons devoir le faire bientôt. Il y a mon PDF. Je vais frapper Save. Où est-il ? Il est là, c'est un PDF très désordonné. Ça a traversé toutes les choses. Alors, c'est ce que je veux pour pouvoir supprimer les pages que je ne veux pas, selon vos besoins, je suppose. Ce que je dois faire, c'est partir, vous mon ami doit être que mon nerf mobile, je vais simplement supprimer parce que j'avais besoin de faire partie de ce document dont je pense qu'ils n'ont pas besoin même là. Celui-là, je n'utilise pas celui-là. Ces deux-là, je ne voulais plus. Ces gars ici, ce que je vais faire, c'est que vous allez devenir du contenu découpé. Normalement, peu importe. Celle-ci, pour exporter des PDF, nous voulons découper le contenu. Quelque chose d'autre ? Ces gars y vivront parce que je ne veux pas les supprimer. Ceci est familier sur la façon dont le courrier indésirable est ainsi un bouton d'exportation. Nous allons devoir le faire à un moment donné. Maintenant, lorsque nous exportons, ce sera un peu plus précis et nous pourrons supprimer les pages. Je veux garder ça autour de moi. Alors, regardez. C'est beaucoup plus rangé. J'ai ces deux-là que je devrais supprimer. Je m'ouvrirais dans Acrobat et je les enlèverais. Qu'est-ce que vous avez obtenu à votre machine pour travailler avec des PDF ? Vous remarquerez maintenant que tout cela est étroitement intégré. J'ai toutes mes pages. Vous pourriez penser à une autre raison pour laquelle vous pouvez utiliser cela, KPDF. Vous utilisez peut-être Figma pour faire des présentations. Il est très courant d'utiliser l'outil cadre. Ici, il y a des présentations pour différentes diapositives. Il s'agit d'un format HD générique pour une diapositive. Vous pouvez utiliser totalement vos compétences ici simplement pour utiliser Figma pour présentation, car vous avez de bonnes connaissances. Ça te plait. C'est rapide. Il est facile à mettre à jour, facile à partager. Les gens utilisent Figma pour toutes choses. Autre utile, je ne dirais pas que c'est utile. C'est quelque chose que j'ai l'intention de vous montrer. Je vais vous montrer que c'est l'outil Slice. L'outil cadre est ce que nous avons utilisé des charges. outil Slice, qui utilise le très bon raccourci de s, qui devrait être l'échelle, est l'outil de tranche que personne n'utilise. Je ne pense pas que Figma ait de documentation là-dessus. Il pourrait disparaître. Que fait-il ? Je peux voir quand vous l'utiliseriez. Je ne l'ai jamais fait. Vous voulez que ces deux cadres sortent et que vous dessinez simplement une boîte autour d'eux. Il s'appelle Slice 1. Vous pouvez lui donner un nom. Il peut s'agir d'un flux de tâches pour le flux de tâches de connexion. Vous pouvez le sélectionner ici comme nous faisons beaucoup de choses. Pouvez-vous le voir juste apparaître en haut de ma liste de calques ? Je peux ajouter des paramètres d'exportation comme je l'ai fait précédemment et dire, je veux l'exporter au format JPEG ou je ne pense pas qu'il prenne en charge le PDF, nous allons le vérifier. C'est un JPEG. Je ne veux pas de suffixe dessus. Je vais juste passer à zéro et je vais juste le supprimer. Ce sera juste une taille 1x ou je peux lui donner une largeur spécifique. Disons qu'il doit convenir à quelque chose. Il va sur un site Web dans une galerie et il doit absolument être 480 pour une raison quelconque. Il doit être de 480 W. Exportons-le. L'exportation de PDF n'est actuellement pas prise en charge. Ça va baisser ça. On y va. Nous allons exporter cette petite diapositive. Regardez ce qu'il a fait. Testez une connexion. C'est peut-être juste un moyen. Un 180 pixels est plutôt floue. C'est de ma faute. Ça devrait être comme un 1480. C'est ce que fait l'outil Trancher. Maintenant, ce sont des moyens de le faire sortir. C'est une façon générique de sortir. Il va y avoir des moments où nous en aurons besoin. Si vous partagez avec votre collègue ou votre client ou si je ne devrais pas appeler le client, quelqu'un qui n'est pas un concepteur UX. Souvent, il vaut mieux partager le lien et dire que je ne veux pas que vous soyez modifiable. Je veux que tu regardes. Parce que je ne veux pas que vous déplacez les choses, donnez-leur l'adresse e-mail, ou vous pouvez simplement copier le lien, vous n'avez pas besoin de leur envoyer un e-mail pour simplement écrire un e-mail et le copier. Vous pouvez créer un lien vers une tranche [inaudible] spécifique. Imaginons que vous vouliez commencer par cette animation. Vous pouvez dire que vous partagez le cadre sélectionné et qu'il y a un lien. Il est automatiquement sélectionné parce que j'ai cliqué et sélectionné une première image. Vous pouvez faire ces choses. Copiez ce lien. Je vais simplement le coller dans un document texte ici. Prêt pour mes courriels plus tard. Un autre lien que vous pouvez leur envoyer est le prototype réel plutôt que le document de travail réel, vous voudrez peut-être partager plutôt que le prototype. Allons faire un cadeau. J'utilise ce flux ici et je vais dire un prototype à partir de cette fenêtre et je le copie. Il sélectionnera le prototype pour commencer. Cela va être très similaire à l'autre. Vous pouvez, à partir de ce lien, accéder au prototype. Je vais vous le montrer, mais celui-ci ira directement là. Souvent, même si vous pouvez obtenir le prototypage à partir de celui-ci ici, beaucoup de double-clics. Je leur enverrai deux liens distincts pour faciliter la tâche des gens. Alors ouvrons celui-là. Je vais ouvrir un navigateur. Jetons un coup d'œil. Nous l'avons fait il y a, il y a. Donc, juste les bases à couvrir. Ils peuvent ignorer cela et ils veulent vraiment qu'ils s'inscrivent, mais ils n'ont pas à le faire. S'ils veulent commenter, ils peuvent se connecter avec une adresse e-mail gratuite, mais ils peuvent le consulter sans rien faire. Ils peuvent le prototyper sans rien regarder. Il y a une barrière assez faible à l'affichage de votre travail si vous leur envoyez. Qui s'en souvient, c'était il y a quelque temps ? Il existe comment partager votre document avec les clients et les parties prenantes. Pas vraiment d'autres concepteurs UX, certainement pas de développeurs. C'est un excellent moyen de partager des dessins, des images et de pouvoir faire des commentaires provenant de Figma. Ce sera tout pour cette vidéo. 107. Consulter votre développeur très en amont dans le processus de conception Figma: Bonjour à tous. Je pensais avoir sauté hors de l'écran. Nous allons le faire en direct. En travaillant avec votre développeur, il n'existe aucun moyen officiel de travailler avec un développeur. Un processus officiel de transfert, essentiellement ce qui finit par se produire, c'est que cela dépendra du développeur et de votre relation avec eux, l'objectif et de l'endroit où tout est incroyable est endroit où vous avez eu le développeur plus tôt dans le processus. Surprendre quiconque avec un design fini n'est pas amusant. Le développeur ressentira du ressentiment, probablement un mot trop fort, mais il n'a eu aucune contribution. Ok, ce designer m'a donné ce truc à construire et je vais le construire parce qu'ils ont dit que je devais le faire, ce que vous voulez, c'est qu'ils fassent partie des cadres, pour vous donner des conseils. Une partie des premières images que vous faites pour vous donner des conseils afin qu'il n'y ait pas seulement de buy-in, mais ils ont l'impression de faire partie du processus. Surtout lorsque vous êtes nouveau en train de recevoir des commentaires plus tôt cela signifie simplement que vous n'allez pas vous concevoir comme un désastre. La langue peut être très simple. Il n'est pas nécessaire que ce soit des réunions officielles. Ça peut être comme, « Salut, Sandy, pourrais-je vous montrer rapidement mes cadres filaires, c'est là que je pense aller avec le projet. Je veux juste avoir vos commentaires. Pourriez-vous me donner cinq minutes ? » Ou, « Hé, voici les premières images, qu'en pensez-vous ? » Parce qu'il y a tellement d'emplois où j' ai supposé que quelque chose était trop difficile à faire, donc je ne l'ai pas fait. Seulement pour découvrir dans cette première conversation que j'allais le faire, mais je pense que nous allons passer à la phase 2 parce que ça semble être un travail acharné, que pensez-vous et ils sont comme non, nous avons cette autre chose qui ressemble beaucoup. Ce cadre est déjà conçu pour cette autre chose. Nous allons juste mettre ça là-dedans et je vais le changer et vous êtes comme, hé, je ne suis pas ingénieur ou développeur, donc il y a plein de choses où je pense que c'est vraiment dur, mais il s'avère que ce n'est pas le cas, et le contraire. D'accord, il y a des choses que je conçois et c'est comme un élément essentiel de ce que je veux. C'est peut-être comme une annonce de valeur « Oh, ce serait génial. » Ensuite, vous parlez très tôt au développeur et ils sont comme si cela allait prendre le double du temps du projet ou ajouter toute cette complexité supplémentaire. Vous en avez vraiment besoin ? Quand il sera tôt, vous aimerez : « Oui, nous le ferons dans la phase 2. » La phase 2 est une bonne façon de dire que nous le ferons plus tard, mais probablement ne jamais remuer pour que nous puissions réaliser ce projet. Tout cela se produit lors de ce premier dialogue. Oui, il y a un processus de transfert lorsque tout est approuvé, mais ce ne devrait pas être la première fois que votre développeur doit voir votre projet. Travaillez en plein air, demandez-leur de commenter, les impliquer et de découvrir pourquoi et comment ils aiment travailler. Quels types de choses ils veulent voir au moment de la remise que vous ne soyez pas « J'espère qu'ils aiment ça » et que vous envoyez un e-mail avec tous vos liens et images et qu'ils en veulent. Ils vont vouloir voir des maquettes, des prototypes et un tas d'images. Ils utiliseront vos maquettes pour déterminer l'espacement et rembourrage de ce genre de choses et s'il s'agit d'un nouveau travail, d' accord, mais ils n'utiliseront pas vos rectangles, d'accord ? Ils se contenteront de regarder l'espacement et de tout reconstruire principalement en code, l'exception des images. Il existe certaines cohérences entre la remise. Nous en ferons un peu plus dans une seconde, mais parlez à votre développeur et découvrez qui il est. Soyez proactif. N'attendez pas que le département d'ingénierie magique aille le faire. Vous avez peut-être un responsable produit ou un chef de produit, ou vous travaillez vous-même et que vous allez l'externaliser, ou peut-être que le client va le faire pour vous. Trouvez qui c'est, parlez-leur. Faire du développeur votre ami, si vous êtes le développeur, facilite les choses. Mais très bien, c'est comment travailler avec votre développeur. Allons-y et je vais vous montrer des choses plus tactiles que nous pouvons faire avec Figma. 108. Partager votre production Figma avec les développeurs et les ingénieurs: Bonjour à tous. Dans cette vidéo nous allons voir ce que j'appelle une version originale du transfert à votre ingénieur ou à votre OK, donc c'est très simple, juste les bases, il y a votre maquette en bas, il y a juste quelques informations sur ce que nous faisons, ce qu'est le client, flux que nous démontrons ici. Peut-être des liens. OK, le lien vers le prototype. OK, nous avons donc ajouté ce lien plus tôt afin qu'ils puissent accéder facilement au prototype s'ils ne savent pas comment s'y rendre. C'est vraiment pour quelqu'un avec qui vous allez travailler, développeur qui va vraiment se familiariser avec Figma et participer à toute cette histoire de collaboration en ligne. Et puis il y aura des gens qui voudront simplement qu'on leur dise quoi faire, leur donne une bonne documentation et qu'on leur laisse le soin de la construire. Encore une fois, cela dépendra de vos développeurs, il vous suffit de travailler avec eux. peut être un peu intégrer à Figma OK, il y a un document partagé que nous sommes peut-être en train d'utiliser. Du papier, de la confiture de figues, un tableau miroir que vous pourriez utiliser. OK. Il y a juste tout ce qu' il faut et on peut facilement les trouver. Et j'ai juste mis tous mes styles sur la page. Toutes les couleurs, tu sais, ça dépend de la façon dont tu veux les impressionner. Ce n'est pas impressionnant du tout, mais j'ai mis les couleurs en avant. OK. Les composants, je les ai en quelque sorte retirés et je ne les ai pas tous étiquetés. Je pourrais Il n'y a vraiment pas de bien ou de mal. OK. Faites-vous simplement une idée de ce qui est requis pour celui-ci. Vous pourriez aller bien trop loin pour le premier. OK, fais en sorte que ce soit joli. Je vais vous montrer quelques bons exemples. C'est mieux que mes exemples. Ouais. Je viens de présenter les bases de cette page maintenant, comment puis-je la partager avec eux ? Vous utilisez cette option de partage. Oh, bonjour à tous. Voici un petit bouton. Je vais, il y a une petite mise à jour de cette vidéo. Cela a peut-être un peu changé les choses. Ce que nous avons fait dans le passé, c'est lorsque nous partagions des informations pour un développeur, nous les lui faisions ensuite accéder à cet onglet d'inspection ici. Ils ont déplacé cet onglet d'inspection dans ce petit interrupteur à bascule OK, ça s'appelle le mode dev maintenant. Au lieu d'inspecter, continuez à inspecter, le voilà, d'accord. Mais ils l' appellent mode développement, d'accord ? Donc, lorsque vous partagez, je suis en mode design, c'est en mode bleu. Vert. OK, si je et que je partage ce lien avec le développeur, vais partager, et que je partage ce lien avec le développeur, il finira par entrer dans votre version de conception, qui est un peu plus compliquée et un peu plus difficile à utiliser pour les développeurs D'accord, vous voulez donc les mettre directement en mode développement. Donc, ce que vous faites en tant que designer, comme vous le dites, vous l'avez compris, puis vous le partagez. Et si vous partagez un lien depuis ce mode, d'accord, le mode dev , d' accord, vous obtiendrez un lien vers cette version verte. Je vais vous expliquer où se trouve actuellement la version verte, mais c'est une meilleure façon de partager. C'est pourquoi je l'ai mordu juste à ce moment-là. Ne partagez pas cette version originale. C'est la nouvelle meilleure méthode. Maintenant, je pourrais tout aussi bien continuer avec une partie de la vidéo expliquant ce qu' il y a dans ce type de mode d'inspection Maintenant, vraiment appelé mode Dev, est-ce que cela permet un développeur de passer par là et d' être un peu autonome, d'accord ? Ils peuvent donc passer en revue et dire, en fait, je peux cliquer dessus et c'est simplement plus facile pour eux de travailler dessus. OK, si vous avez des groupes à l'intérieur, des groupes à l'intérieur de cadres, il peut être un peu difficile pour les développeurs de cliquer, cliquer, cliquer, cliquer pour essayer de trouver les éléments dont ils ont besoin. Alors que maintenant, en mode Dev il suffit d'un clic, et si je clique sur cette barre de navigation supérieure, d'accord ? Cela m'apporte beaucoup de choses sur la navigation, la hauteur et la largeur, d'accord ? J'utilise du CSS. Ils utilisent peut-être l'un des frameworks de développement d' applications, d'accord ? Je vais utiliser du CSS, d'accord ? Mais cela leur donne le code qu'ils peuvent utiliser ou non, selon leurs besoins, d'accord ? Les couleurs utilisées là-dedans sont géniales. OK ? Et tous les atouts qu'il contient. En fait, je m'occupe de l'ensemble du cadre. Cliquons uniquement sur les Ks de navigation supérieurs. Cela m'a donné cet espacement, mais cela m'a donné les icônes qui s'y trouvent, ce qui est vraiment facile Dans les vidéos précédentes, nous vous avons donc montré comment exporter des SG pour le développeur. Si vous avez un développeur qui travaille dans Figma, il peut s'en charger lui-même C'est ainsi que nous travaillons chez Bring your laptop. OK, notre développeur, Malcolm, va consulter les fichiers Figma et en extraire tout ce dont il a besoin OK, donc c'est pratique. D'accord, vous pouvez choisir G PNG, puis appuyer sur le petit bouton de téléchargement, beaucoup plus autonome. L'autre point à noter, c'est qu'à l'heure actuelle, c'est ce que l'on appelle une meilleure ouverture. C'est donc une fonction qui est utilisée. Tout le monde en figure peut l'utiliser. Comptes gratuits, comptes payants, entreprises. Et je sais que c'est prévu pour le futur. Je pense que oui, c'est pour en faire un compte réservé aux professionnels, d'accord ? Donc un compte payant uniquement, donc le vôtre pourrait être différent si vous utilisez le compte gratuit à l' avenir et que vous regardez ça d'une manière ou d'une autre, vous avez mis la main sur cette vidéo, d' accord, elle n'est pas mise à jour Et que le vôtre pourrait être légèrement différent. Vous avez peut-être une version réduite. Votre mode Dev n'est peut-être activé qu'en mode Pro, d'accord ? Et vous pouvez bénéficier d'un nombre limité de fonctionnalités d'inspection, mais pour le moment, elles sont ouvertes à tous. Alors, on y va. Le mode Dev, c'est vraiment cool. Assurez-vous simplement que lorsque vous partagez votre lien, vous êtes activé sur ce bouton pour vous assurer d'obtenir le bon lien vers le développeur Très bien, c'est la dernière partie de la vidéo, puis nous passerons à autre chose. Eh bien, c'est la version de mise à jour qui a disparu. Continuez avec la vidéo. Profitez. En fait, avant de partir, une dernière chose. Super important, d'accord ? Vous devez savoir comment mettre emojis dans les noms de vos pages car cela va impressionner tout le monde, d'accord ? Donc, sur un Mac, vous double-cliquez ici, le curseur clignote à l' endroit où vous voulez votre emoji et vous passez à la barre d'espace de contrôle des commandes, Ensuite, vous pouvez commencer à décider du genre de choses que vous voulez y trouver. Très important, trouvez des informations appropriées pour les différents noms de page. Il est plus facile de les retrouver. En quelque sorte, c'est amusant d'utiliser des emojis sur un PC. Je ne sais pas en quoi c'est un peu bizarre. Je le recherche sur Google et ce n'est pas très clair. Il suffit de taper les mots sur Google. Ajoutez des emoji aux couches de texte. Il s'agit plutôt d'un système Windows générique. OK, même Olmcutus, mais Mac a un raccourci pour ça. Mais il est possible de faire les deux. Vous pouvez également ajouter ces emojis ici. Ils peuvent se trouver dans n'importe quelle zone de texte. Assurez-vous simplement que votre malédiction en fait clignoter deux. C'est bon, ça va être ça. C'est très important, Mochis. Très bien, à la vidéo suivante. 109. Que sont les nouveaux transferts, aussi appelés systèmes de design: Bonjour à tous. Dans cette vidéo, nous allons juste jeter un coup d'œil à l'autre extrémité du spectre. S'il s'agissait de notre guide de conception ou de notre guide de style Vanilla, cet autre extrémité est un système de conception complet. Parlons-en rapidement. Qu'est-ce qu'un système de conception ? Il est un peu utilisé de façon lâche. Je considère qu'il s'agit d'un système de conception où vous ne décrivez pas seulement ce que vous faites, c'est pourquoi vous le faites. Ici, c'est Atlassian, c'est étonnant de voir comment UX est une communauté et une industrie si ouvertes. Si vous venez d'un design plus traditionnel ou autre chose, le public n'a pas accès à votre manuel d'entreprise ni à toutes vos spécifications, mais dans UX, c'est le cas si vous pensez à une entreprise que vous admirez, c'est dans cette vie numérique de la Silicone Valley, vous allez probablement bien. Vous pouvez Google leur système de conception. Je viens d'en attraper quelques-uns. C'est celui de Google, Atlassian, celui d' Apple, Shopify, souvent ils leur donneront un nom, Polaris. Je pense qu'Adobe est Spectrum, Mailchimp, et ce qu'il fait est incroyable. Il s'agit de plusieurs sites Web et il vous présentera si vous êtes nouveau dans UX, ce que vous pourriez être, certaines choses, ils parleront de couleur, jetons un coup d'œil. Il y a de la couleur ici et des polices, mais lire ces éléments antérieurs, leur mission, leur vision, d'où ils viennent, leur histoire, où ils veulent aller, vous aideront à comprendre pourquoi il est jaune et pourquoi ils ont un singe masculin. Mais cela serait considéré comme l'autre extrémité complète d'un système de conception. Vous travaillez peut-être dans une entreprise, c'est-à-dire que vous travaillez à partir d'une entreprise. C'est peut-être votre premier travail si vous débutez dans l'UX, vous pourriez en créer un. De toute évidence, ce n'est pas un petit travail, et il est évidemment construit à partir d'une équipe énorme, mais c'est génial si vous êtes nouveau pour aller jusqu'au bout. J'ai tellement appris quand j'étais en UX grâce à cette conception de matériaux. A) ils ont maintenant des articles sur leur design et ce qu'ils font, mais ils se déplacent et regardent quelle couleur, leur système de couleurs, pourquoi ils le font, la bonne langue, parlant de lisibilité et hiérarchiques et tous les mots que vous devez ajouter à votre vocabulaire en tant que concepteur UX. Je suppose que je veux juste vous laisser avec ce cours, c'est tout, vous avez créé un système de conception. Maintenant, il y a beaucoup plus à cela, et pour être honnête, mes types de travail, les types de clients et les choses que je fais, je finis à ce stade ou un peu plus loin, mais pas grand-chose. Même si vous vous retrouvez ici, il est vraiment important d'aller explorer d'autres systèmes de conception, rejoindre des groupes de rencontres avec d'autres concepteurs UX pour vous assurer que même si vous êtes dans ce monde, vous comprenez le plus complet image des systèmes de conception et de conception UX. 110. Projet de cours 21 - Finaliser votre design: Bonjour à tous. C'est le dernier projet, Project 21. Je sais. Il y en a eu quelques-uns, mais j'espère que vous les avez trouvés utiles dans le fait de cimenter une partie des connaissances que vous avez apprises dans les vidéos, fait de créer votre propre chose qui est excitante. Ce que je veux que tu fasses, c'est juste le ranger. Tout le monde peut porter cela à son niveau. Vous pouvez simplement rapidement mettre en place une version de bureau parfaite et m'envoyer une capture d' du mobile fini et de la version de bureau finie. Mais si vous voulez aller un peu plus loin, ce que je veux que vous fassiez est assez systématique. présent, faites-le. Je veux que vous alliez regarder votre mémoire, regarder votre personnage et vous dire, de quelles pages n'ai-je pas besoin ici ? Quelles sont les pages qui me manquent dans mon personnage ? Je le ressens de l'environnement. C'est quelque chose que je n'ai pas vraiment abordé. J'ai fait des choses de base. Nous utilisons des plastiques recyclés, mais je pense que cette personne aura besoin de plus de profondeur. Je vais probablement avoir besoin d'une vue éclatée du moment où on clique sur cette question, en savoir plus pour savoir comment les matériaux sont approvisionnés, comment j'aborde notre chaîne d'approvisionnement et probablement même des choses comme nos valeurs en tant qu'entreprise, où nous là où nous allons, manque probablement quelque chose comme ça pour répondre à mon personnage. Ceux-ci peuvent être différents. Il peut avoir besoin d'une liste d'ingrédients ou de soutien peut être des produits, ou peut-être avoir besoin de vidéos ou de témoignages, critiques, de ce genre de choses. Réfléchissez un peu à ce que vous pourriez faire. Vous n'avez pas besoin d'aller trop loin. Mais même si c'est excitant comme une caisse, ce n'est probablement pas le cas. Cela fait partie du flux et cela fait vraiment partie de ma tâche, mais ce n'est pas quelque chose que je ressens. Ces autres choses que je pourrais faire pour que ce personnage particulier s'engage vraiment ici. Pensez à une ou deux pages supplémentaires, ce serait génial. Mais encore une fois, optionnel. Tout le monde n'aura pas le temps et la capacité de le faire, mais les gens qui font ce genre de choses qui rendront ce produit plus significatif et un peu de portefeuille colleront mais les gens qui font ce genre de choses qui rendront . Si vous voulez le transformer en quelque chose pour votre portefeuille, encore une fois, totalement facultatif, vous pourriez envisager de créer quelque chose pour un portefeuille. Vous avez peut-être un portefeuille tel que l'obtenir là-dedans. J'adorerais le voir là-dedans et me moquer. Quand je dis moqué, juste vos filaires, jolies captures d'écran disposées, montrez votre mémoire, votre personnalité. Les filaires peuvent avoir vos designs finis. Lorsque vous allez au portefeuille, vous voulez inclure non seulement vos conceptions finales, mais voici le bref, voici mes hypothèses tirées de ce mémoire, et voici mes filaires que j'utilise pour tester mes hypothèses. Voici quelques leçons que j'ai tirées du test des filaires et peuvent être une version finale. Si vous n'avez pas fait de tests, vous pourriez essayer de tester même votre conception finale, il pourrait s'agir de votre autre personne importante, vos enfants, de vos amis. Vous pourriez trouver quelqu'un dans l'un de nos groupes Facebook pour vous aider à effectuer des tests. Énumérez ce que vous pensiez qu'il allait se produire, quels étaient les résultats, toutes les amendes que vous avez faites et toutes les conclusions finales. Lorsque vous décrivez cela, ce n'est pas un vrai projet. Je sais que l'étude de cas est une bonne façon de dire cela. Ne dites pas que ce n'était pas un vrai projet. Mais une étude de cas est une bonne façon d'expliquer qu'il s'agissait d'un exercice dirigé par un instructeur ou du moins qu'il ne s'agissait pas d'une véritable étude de cas client. C'est une bonne façon de dire ça. Maintenant, il n'y a pas de parfait. C'est à quoi ça devrait ressembler. Va y jeter un petit coup d'oeil. Il ne faut pas longtemps pour trouver un design qui vous plaît en termes de mise en page d'un projet UX. Effectuez une recherche Google pour trouver des exemples de portefeuilles UX. Il y en a beaucoup sur Dribble et Google et il y en a beaucoup. Trouvez quelque chose qui vous convient à votre projet et à votre style. Vous en avez peut-être déjà un et simplement le mettre en place. J'aimerais bien le voir aussi. Il peut s'agir simplement des captures d'écran de vos cadres mobiles et de bureau. Mais pour les autres qui vont un peu plus loin, j'aimerais le voir comme une pièce de portefeuille. Si vous avez des questions et que vous êtes nouveau à ce sujet, publiez la pièce du portefeuille et dites : « Hé, c'est ce que je pense ajouter à mon portefeuille. Que manque-t-il ? Que puis-je mettre à jour ? » C'est génial d'obtenir des commentaires et de surmonter ce syndrome du petit imposteur que vous aurez inévitablement commencé dans un nouveau domaine. Les groupes Facebook sont incroyables pour cela, tout comme le groupe LinkedIn. Mais même si vous ne voulez pas de commentaires critiques, envoyez-les simplement. J'aimerais voir ce que vous avez réellement fabriqué, quel produit vous avez obtenu. Assurez-vous de partager le mémoire que vous avez utilisé et je veux voir ce que vous avez fini par faire. C'est tout pour nos projets. Je vous verrai dans la vidéo suivante. Je vais vous voir en direct, sortir de derrière l'écran. On se voit dans une seconde. 111. 111 3rdp: Très bien, ouah, tu es arrivée jusqu'au bout. C'est un long parcours. Félicitations, tu es là. Je suis là. C'est plutôt incroyable. C'est long à faire, long à faire. Nous devrions tous deux être très fiers de nous. Je voudrais aborder quelques petites choses dans cette vidéo , juste pour terminer. Où allez-vous de lui ? C'est nouveau pour moi. Je suis revenu pour mettre à jour cette vidéo car il y a une nouvelle mise à jour très importante en ce qui concerne ce que vous devriez potentiellement faire ensuite. Et c'est mon cours avancé Figma. Vous venez donc de terminer Figma Essentials. Figma Advanced vient vous chercher là où vous vous trouvez actuellement pour vous faire passer à un niveau plus avancé Cela va donc s' appuyer sur la situation actuelle et constitue la prochaine étape parfaite pour aller plus loin et toutes ces choses que vous souhaitez pousser un peu plus loin. Oui. C'est aussi avancé, mais c'est plutôt pour vous faire avancer. Ne pensez pas que c'est réservé aux personnes avancées, c'est pour vous faire connaître à l'avance. Mais ça commence un peu là où nous en sommes maintenant. Donc, si vous êtes à l'aise ici, passez à Figma pour passer à l'étape suivante Et pour d'autres logiciels, si vous n'êtes pas vraiment pour Figma ou si vous n'êtes pas un expert, il y a peut-être deux solutions de ce genre On apprend un peu de HTML et de CSS. OK, j'ai quelque chose qui s' appelle Web Essentials. Alors jetez un œil si vous voulez faire une petite introduction au codage Si vous ne l'avez pas encore fait, cela vous aidera vraiment à entrer en contact avec les développeurs et à parler leur langage. Et l'autre pourrait être si vous voulez descendre à la racine du Web, mais vous ne voulez pas le faire à la manière du code. Tu ne veux pas de code. Et j'ai récemment créé un cours intitulé Webflow Essentials Alors jetez un œil à celui-ci. Ce n'est pas un code entièrement lié au design, mais tout de même à la création de sites Web Et à part ça, ce sont peut-être des sujets conçus que vous voulez aborder et que je fais. J'ai suivi de nombreux cours de design. Il existe Photoshop, Illustrator, InDesign, et après avoir réparé la salle Premiere Pro Light, il existe également un cours de base et un cours avancé pour tous ces outils Donc, s'il y a quelque chose dans lequel vous souhaitez vous lancer, mettez-vous à jour et allez plus loin. Et ce sont les cours à suivre. Ce sont les petites nouveautés à part que j'ai une nouvelle chaise. Que peut-il se passer en un an ? Une nouvelle chaise dans une imprimante 3D. Vous pouvez le voir là-bas. De nouvelles lunettes également. C'est la mise à jour. Ensuite, plein de choses, des lunettes Apple. Je vais vous renvoyer au cours précédent, Dan, très enthousiaste Pour vous expliquer tout le reste, j'aimerais remercier les éditeurs, Jason et Taylor, pour tout leur travail. Produire cette série de vidéos représente beaucoup de travail pour eux. Merci les gars. Et aussi à Stephen Butler et à sa joyeuse bande d' assistants pédagogiques qui vous aident dans les commentaires Vous savez probablement déjà qui Stephen Butler et les TA. Alors merci à vous aussi. À ce stade également, j'aimerais vous demander si vous avez apprécié le cours, donnez-lui une bonne critique. Et ce qui est probablement le plus important, c'est de savoir si vous pouvez trouver un moyen de partager ce cours avec d'autres. Quoi qu'il en soit, le fait que vous puissiez penser à k m'aide à grandir et me permet de continuer à le faire. Il y a donc tout ce que vous pouvez faire, partager avec vos collègues, vos amis, les gens, vous connaissez peut-être votre entourage, qui serait également très utile. Vous pouvez me suivre sur les réseaux sociaux car vous l'avez probablement déjà après tous les dossiers de cours, ils seront là. Oui. C'est le bon côté. Voici mes réseaux sociaux Et l'autre chose que vous pourriez faire est YouTube. J'ai une chaîne YouTube et il y a beaucoup de choses qui ne sont pas transformées en cours, juste des informations en petit format sur ma chaîne YouTube. Abonnez-vous à cela, jetez-y un œil. Ensuite, je voudrais parler brièvement de l'industrie, de son évolution, évolution syndrome de l'imposteur et de son ampleur OK, donc le secteur n' est pas nouveau, mais il est nouveau dans la façon dont il a été appliqué à un grand nombre de ces types de produits , même aux petites entreprises. Comme personne ne s'occupait de l'expérience utilisateur et que les petites et moyennes entreprises, et même les grandes entreprises, c'était une approche différente. Donc, si vous trouvez que les choses changent tout le temps et que vous avez l'impression que, oh, je ne sais rien parce que tout ne cesse de bouger. Ce sont des choses qui, vous savez, il y a cinq ans, c'était comme si nous travaillions ainsi et que la faute de tous les autres s'ils ne l' ont pas fait de cette façon, c'est comme cette année. Comme ce que nous montrons du doigt et que nous rions, et vous aimez, souvenez-vous de l'époque où nous faisions les choses de cette façon. Je trouve que cela se produit souvent dans le design de l'expérience utilisateur. Maintenant, pour ce qui est du syndrome de l' imposteur, on peut se demander : êtes-vous déjà un concepteur d'expérience utilisateur ? Non, je ne le suis pas. Je n'ai pas réussi la qualification. Maintenant, je vous donne la permission, si vous êtes nouveau ce secteur, de vous appeler designer UX à partir d'aujourd'hui , designer UX, designer UX junior, mauvais designer UX, designer UX très inexpérimenté C'est très bien. Il n'y a pas de qualification officielle. C'est comme devenir docteur. Il y a très peu de formation formelle sur le design UX. D'autres apparaissent. Mais la plupart d'entre nous sont autodidactes. Et je suppose que vous commencez à 16 ans ou à 60 ou 80 ans. OK. Peu importe qu'il n' y ait pas de ligne similaire à franchir. Il s'agit de démarrer, décider par vous-même que oui, c'est une industrie que j'adore. Je veux m'en mêler. Je n'en suis qu'au début. Il y a tant à apprendre et je suis impatiente. Je suppose donc que c'est la mentalité qui pourrait vous aider à surmonter cela et à surmonter le syndrome de l'imposteur Mais le syndrome de l'imposteur est énorme. C'est énorme, comme les tas de personnes à qui tu parles. La peur n'a pas d'importance, que vous ayez huit, 80 ou 42 ans. OK. J'ai toujours l' impression qu'il y a quelqu'un qui va venir me demander mes papiers et m'emmener parce que je ne suis pas un vrai designer d'expérience utilisateur pause gênante, c'est parce que quand tu as dit 40 à 42 Dan, tu as l'air de Billy 32 ans. C'est ce que tu voulais dire là-bas. D'accord, ce sera la fin du cours. Fini les blagues. J'espère que vous avez apprécié le cours. J'ai vraiment aimé le faire. J'espère que vous avez aimé le visionner, et j'espère vous voir bientôt dans un autre cours. Au revoir tout le monde, cachez-le