Cours de base de Figma

1. Introduction: Bonjour à tous. Je suis bien au Rwanda. Et j'aimerais vous souhaiter la bienvenue au cours accéléré super facile de Figma Basics. Dans ce cours, nous allons apprendre toutes les bases de Figma, c' est-à-dire la partie design, les différentes caractéristiques de Pigma. Et nous allons également apprendre à créer des prototypes dans Figma. Et tout cela se fera dans les 16 minutes. Examinons maintenant le contenu de ce cours. Voici maintenant le contenu de ce cours. Et j'ai conçu ce cours de manière à ce qu'il soit très convivial pour les débutants. qui signifie que si vous n'avez aucune idée de ce qu'est Figma, ou si vous êtes nouveau dans Figma, vous voulez savoir comment cela fonctionne. Vous êtes nouveau dans la conception et le prototypage dans son ensemble. Ne vous inquiétez pas, nous allons apprendre à partir de zéro. Je vais couvrir tous les aspects de la conception et du prototypage à l'aide de l'application Figma. abord, nous aborderons la partie installation de sigma, comment installer l'application de bureau. Ensuite, nous allons passer à l' aide de certains contrôles de base comme la création du cadre à l'aide de la commande zoom avant, zoom arrière, à l'aide de l'outil à main, qui sont les indispensables pour utiliser l'application Pigma. Et ensuite, nous allons passer à la partie de conception. Nous en apprendrons plus sur les formes, les composants de masse, la mise en page automatique, toutes les fonctionnalités de Figma nécessaires à la création de designs dans Figma. Ensuite, nous allons passer à l'utilisation de plugins. Il y a tellement de plugins dans Figma, qui facilitent notre travail. Nous allons apprendre à utiliser des plugins pour améliorer notre projet. Ensuite, nous allons passer à l'étape de la communauté Figma. Vous êtes différents créateurs, téléchargez leurs propres projets et nous pouvons dupliquer ces projets et les modifier. Pour créer notre propre projet. Nous pouvons copier les différents éléments des créateurs et nous pouvons utiliser notre propre créativité et nous en inspirer. Nous allons apprendre à utiliser la communauté Figma pour améliorer notre projet. Et en continuant, nous apprendrons également comment créer un prototype dans Figma, nous apprendrons les différentes fonctionnalités impliquées dans le prototypage. Ensuite, nous allons implémenter le prototype pour créer un projet simple, une application mobile. C'est ainsi que va se dérouler le cours. Tout d'abord, nous allons apprendre la partie design. Nous couvrirons diverses caractéristiques de Pigma, telles que les cadres, composants de masse que nous examinerons un par un. Après cela, nous apprendrons comment utiliser les plug-ins et les fonctionnalités de la communauté Figma pour améliorer notre projet et rendre notre travail beaucoup plus facile. Et après avoir appris comment fonctionne le prototypage, nous créerons un projet qui implémente le prototype sans plus tarder. Commençons. 2. Installer l'application de bureau Figma: Bonjour, tout le monde a Walker et j'aimerais vous accueillir dans ce figma, les scores de QI de quelqu'un. Aujourd'hui, Figma est un outil de conception graphique et de prototypage. Dans ce cours, nous allons maintenant couvrir toutes les bases de Figma dont vous aurez besoin pour la conception graphique, conception d'interface utilisateur ou le prototypage. Et si vous êtes complètement nouveau sur Figma ou si vous avez déjà installé Figma, mais que vous ne savez pas comment cela fonctionne, c'est le bon endroit pour vous. Nous couvrirons rapidement toutes les bases du magma dont vous avez besoin. Commençons. La première chose dont vous aurez besoin est l'application de bureau Figma. Si vous êtes déjà installé, il note. Nous reviendrons vers vous dans une minute. Et si vous n'avez pas installé ou l'application de bureau Figma, accédez simplement à n'importe quel navigateur et recherchez le téléchargement Figma. Ici, vous pouvez voir le premier résultat qui apparaîtra ici. Figma.com. Il suffit de cliquer dessus. Vous pouvez maintenant voir qu'il existe une option pour les applications de bureau. Vous pouvez le télécharger pour Mac OS ou Windows. Maintenant, j' utilise actuellement Windows, donc je clique simplement sur Windows et c' est un processus d'installation simple. Il suffit de télécharger le fichier et d'installer l'application Figma. Une fois que j'ai installé l'application de bureau Figma, l'interface ressemblera un peu à ceci. Nous sommes maintenant deux options. Vous pouvez vous connecter avec votre compte Figma ou en créer un nouveau. Maintenant, j'avais déjà un compte Figma, mais pour aller avec vous, je vais juste en créer un nouveau. Je vais simplement cliquer sur Créer une oreille droite. Et maintenant, nous allons être redirigés vers le navigateur. Vous pouvez maintenant créer un compte Figma à l'aide de votre e-mail ou de votre mot de passe. Vous pouvez également vous connecter avec Google. Je vais donc simplement cliquer sur Continuer avec Google l'oreille droite. Maintenant, il y a quelques options que vous pouvez simplement remplir. Et une fois que vous avez terminé, cliquez simplement sur le bouton Créer un compte. Le processus d'inscription est maintenant terminé. Vous pouvez voir qu'il existe une option, ouvrez l'application de bureau. Je vais simplement cliquer dessus et cliquer sur Ouvrir Figma. Nous avons maintenant inséré l'application de bureau Figma pour la toute première fois. Et il nous demande un nom d'équipe. Vous pouvez simplement cliquer sur « Faire cela plus tard ». Par défaut, le nom de l'équipe sera celui de votre e-mail. Vous pouvez donc voir ici que Rona est l'équipe des lunettes. Je cliquerai sur ça plus tard. Et voici deux options. Il suffit de cliquer sur l'Explore par moi-même. Maintenant, tu es sorti. Certains fichiers par défaut fournis par Figma vont simplement les ignorer et passer à la partie de conception. Maintenant, si vous vouliez créer quelque chose ou créer quelque chose, la première chose à faire est cliquer sur le signe plus ici. Je vais donc simplement cliquer sur ce signe plus. Et il s'ouvre dans la page Untitled. Nous sommes maintenant dans la section design. Vous pouvez voir que le nom est sans titre et poursuivi en tant que brouillons. Si vous souhaitez modifier le nom, vous pouvez simplement cliquer dessus et nous laisser maintenant lui donner un nouveau nom. Il suffit de cliquer dehors. 3. Les contrôles de base dans Figma: Maintenant, si vous voulez concevoir quelque chose dans la vraie vie, supposons que vous vouliez dessiner de la peinture. La première chose dont vous avez besoin est d'un papier ou d'une toile. De même, chez Figma, nous avons besoin d'une toile pour nos créations. Maintenant, cette toile s' appelle, Let's frame. Si vous souhaitez définir un cadre pour vos conceptions, il vous suffit de cliquer sur le cadre ou d'appuyer simplement sur la touche F de votre clavier. Je vais juste appuyer sur la touche F de mon clavier. Maintenant, sur le côté droit, vous pouvez voir plusieurs cadres s'afficher maintenant, il s'agit des dimensions par défaut pour différents cadres. Vous pouvez voir pour le téléphone, il y a l'iPhone 13 Pro Max. Ce sont les dimensions de l'écran hors iPhone. De même, si vous le souhaitez, vous pouvez voir qu'il s' agit des dimensions de cadre par défaut pour le bureau. Maintenant, je sélectionne simplement cette option de bureau pour un maillage affiché. Avant de commencer à créer quoi que ce soit, il y a quelques commandes et touches que j'aimerais que vous sachiez. La première chose à faire est la commande zoom avant et zoom arrière. Le prochain cadre supérieur. Et si je veux zoomer à partir de cet automne, je dois maintenir la touche Ctrl enfoncée et faire défiler la souris vers le bas. Vous pouvez voir que nous sommes en train de faire un zoom arrière. De même, si vous souhaitez effectuer un zoom avant, vous pouvez simplement maintenir la touche Ctrl à nouveau et faire défiler votre souris vers le haut. Maintenant, les touches de contrôle de l' utilisateur Windows, si vous avez un appareil Apple, je suppose que ce sera la touche Commande au lieu de la touche Ctrl. Les fonctions sont donc similaires sur le regard de leader, de contrôle et de commandement différents. Maintenant, la commande suivante est l'outil à main. Disons maintenant que je veux faire glisser cette chose et la garder sur le côté gauche. instant, il vous suffit maintenir le bouton d'espace de votre clavier. Et maintenant, vous pouvez voir que le curseur ne fait pas une icône de main à l'aide de la souris, vous pouvez simplement cliquer et faire une icône de main à l'aide de la souris, vous pouvez simplement cliquer et glisser ce truc n'importe qui que vous le souhaitez. Je vais juste faire glisser ça sur le côté gauche. C'est ainsi que vous pouvez faire glisser différents éléments. Ces deux-là sont cependant très importants, outil manuel et zoom avant, commande zoom arrière. Maintenant, ils peuvent paraître insignifiants, mais pendant que vous concevez divers éléments du cadre sont en dehors du cadre. Ainsi, l'outil de glissement, zoom avant la partie en mode zoom est très pratique. N'oubliez pas que si vous souhaitez effectuer un zoom avant et un zoom arrière, dois-je enfoncer la touche Ctrl ou la touche Commande pour les utilisateurs Apple et faites simplement défiler le bouton de la souris vers le bas. Pour l'outil à main, vous devez maintenir votre bouton d'espace enfoncé et simplement faire glisser votre cadre ou plusieurs éléments de votre fichier Figma, qui que ce soit. C'est tout pour la session d' introduction. Au cours de la prochaine session, nous apprendrons diverses caractéristiques motrices de sigma. Donc, c'est tout. Merci. 4. Comment créer des conceptions dans Figma: Dans Figma, si vous souhaitez apporter des modifications à un élément particulier, vous devez d'abord le sélectionner. Alors, sélectionnez n'importe quel élément particulier, disons cadre ou forme ou quoi que ce soit. Il suffit de cliquer dessus. Vous pouvez maintenant voir que leur image de bureau a été sélectionnée. Maintenant, si vous souhaitez désélectionner ce cadre, vous suffit de cliquer à l'extérieur. Il existe maintenant un autre moyen de sélectionner également ces éléments. Vous pouvez voir ici sur le côté gauche de la section calque, il y a celui du bureau. Vous pouvez simplement cliquer ici. Cela est élu. Et chaque élément que vous ajoutez dans votre page de création sera ajouté dans la section calque. Chaque élément agit comme une couche individuelle. Nous allons donc examiner cela plus tard avec un exemple. Le nom de la trame que nous avons ajoutée lors la session précédente par défaut est Desktop One. Si vous souhaitez modifier le nom, il vous suffit de double-cliquer ici sur le premier stock de la section calque. À partir de là, vous pouvez modifier le nom de l'élément. Je vais donc simplement changer le nom de ce cadre pour nous laisser dire. Une fois que vous avez terminé, appuyez simplement sur Entrée. Vous pouvez maintenant voir que le nom de cette image a été modifié. Ajoutons une autre page de porte de cadre. Vous pouvez simplement appuyer sur le bouton F de votre clavier. Maintenant, si vous regardez votre curseur, vous pouvez voir qu'il y a un signe plus. Donc, si je maintiens simplement le bouton gauche de la souris et que je fais glisser cette chose quand même, je veux, je peux ajouter un cadre de mes propres dimensions. Vous pouvez également voir les dimensions en direct. Je vais juste laisser ce bouton de la souris. Et voici mon autre cadre. Maintenant, si vous souhaitez déplacer ce cadre n'importe où, il vous suffit de tirer sur le bouton gauche de la souris et de le faire glisser où vous le souhaitez. Et vous pouvez juste aligner cette oreille droite. Ok, donc les dimensions par défaut de ce cadre ou 1576 et 1053, si vous voulez modifier ces dimensions, il suffit de voir la largeur et la hauteur du côté droit. Ainsi, à partir de là, vous pouvez modifier leurs dimensions. Vous pouvez ajouter vos propres dimensions personnalisées. Je vais juste ajouter quelques dimensions. Je vais changer la largeur à 1080 et changer la hauteur à 109 à 0. Vous pouvez utiliser le bouton Zoom avant, Zoom arrière et l'outil manuel qui a indiqué l'écran d'une manière que vous êtes à l'aise de modifier. Donc, je vais le garder comme ça. Maintenant, si vous jetez un coup d'œil à la section du calque sur le côté gauche, vous pouvez voir qu'il y a celle du cadre. C'est le deuxième élément que nous avons ajouté. Passons maintenant à la partie design. Je vais donc juste sélectionner ce cadre ici. Maintenant, si vous jetez un coup d' œil sur le côté droit, vous pouvez voir qu'il existe différentes options pour la partie design. L' option largeur et hauteur que nous venons de voir. Il existe une autre option qui est l'option d'angle de rotation. Vous pouvez simplement entrer l'angle de ligne. Vous voulez faire pivoter cette chose. Si je viens d'entrer dix et de cliquer sur Entrée, vous pouvez voir que c' est comme ça qu'il tourne. Maintenant, vous pouvez également faire pivoter cette chose manuellement. Il suffit de prendre votre souris près d'un des bords. Vous pouvez également voir que le curseur change sur l'icône Rotation. Et à partir de là, vous pouvez simplement maintenir le bouton gauche de la souris enfoncé et faire glisser cette chose quand même, vous voulez la faire pivoter. Et sur le côté droit de la partie design, vous pouvez voir un aperçu en direct des changements d'angle que vous effectuez. Je vais juste le remettre à 0 une fois de plus, qu'il passe à autre chose. Il y a également la fonction de rayon d'angle. Vous pouvez donc évoquer des idées ordinaires à cette chose. Qu'est-ce que le rayon d'angle ? Maintenant, nous allons zoomer et jeter un coup d'œil à ce bord, à cette idée. Vous pouvez donc voir ici qu' il s'agit d'un rectangle parfait. Les bords sont des lignes droites. Maintenant, je vais sélectionner ce cadre et ajouter un rayon d'angle juste ici. Ajoutons donc un rayon d' angle de 50. Vous pouvez maintenant voir qu'il y a un rayon d' angle vers le cadre. Cela concerne également le rayon d'angle. Maintenant, la fonctionnalité de mise en page automatique et de grille de mise en page, je vais expliquer dans la dernière partie avec un exemple. Parlons maintenant de la section sur le terrain. Remplissez comme le nom l'indique, voici la sensation de vos éléments. Actuellement, nous avons sélectionné le cadre, donc modifions le remplissage de ce cadre. l'heure actuelle, le remplissage de ce cadre a été sélectionné en blanc. Maintenant, si je clique sur cette couleur ici, vous pouvez voir que nous sommes différentes options pour la couleur de cet élément. Vous pouvez simplement sélectionner n'importe quelle couleur de votre choix. Vous pouvez également ajuster l'opacité de cette chose en changeant ici. Il suffit de sélectionner la couleur souhaitée. Vous obtiendrez un aperçu en direct et vous apporterez les modifications en commençant en vert pour l'instant. Et il existe également beaucoup d'autres options pour ce domaine. Si je ne fais que développer cette option ici, vous pouvez voir qu'il y a aussi un remplissage linéaire, radial , angulaire, losange et image. Vous pouvez simplement les explorer un par un. Il existe cette option de remplissage linéaire. Vous pouvez les modifier comme vous le souhaitez. Il existe également cette option d'image, qui signifie que vous pouvez ajouter une image en tant que sensation de l'élément. Nous allons donc sélectionner l'option image. À partir de là, vous pouvez télécharger une image depuis votre appareil. Nous avons ajouté une image en tant que remplissage du cadre. Maintenant, il y a les traits, les effets et les options d'exportation, nous allons donc les examiner un par un. Actuellement, l' option Contour n'est pas activée. Donc, si vous souhaitez activer l'option de contour, vous pouvez voir le signe plus. Il suffit de cliquer dessus. Et maintenant, l' option de contour a été activée, c'est la couleur du trait. Vous pouvez donc sélectionner n' importe quelle couleur de votre choix. Je vais juste le prendre comme lu. Et le téléchargement correspond à la taille du trait. Vous pouvez simplement faire glisser cette chose et sélectionner la taille du trait. Vous pouvez également saisir manuellement le numéro souhaité. Je viens de dire que le gamin a dix ans. Nous avons donc ajouté un trait rouge à notre cadre. Et en continuant, il y a l'option d'effet. Actuellement, cette option n' est pas activée. Cliquons donc sur le signe plus. Et maintenant, il y a Ombre portée, calque d'ombre intérieure floue et ainsi de suite. Vous allez explorer ces fonctionnalités par vous-même. Maintenant, je vais juste vous donner un exemple, disons l'ombre portée. Il suffit de sélectionner cette icône ici et de modifier les valeurs comme vous le souhaitez. Nous avons maintenant ajouté une ombre portée. Maintenant, si je fais un zoom avant, vous pouvez voir qu'il y a l' ombre portée ici. Ensuite, il y a la fonction d'exportation. Je vais donc simplement cliquer sur ce signe plus. Vous pouvez voir que j'ai sélectionné le cadre. Nous parlons d'exploiter ce cadre. Et maintenant, il existe des options que nous allons exporter ces types de fichiers. Il y a donc PNG, JPG , SVG, PDF, etc. Nous allons sélectionner PNG. Et maintenant, je vais simplement cliquer sur Exporter le cadre 1. Vous pouvez maintenant l'enregistrer sur votre appareil. Je vais donc simplement cliquer sur la vente. Maintenant, ce cadre a été exporté au format PNG sur notre appareil. Bon, donc voici le cadre. Vous pouvez voir que c'était le cadre que nous avons exporté. C'est comme ça que ça va ressembler à une image. Ajoutons maintenant quelques éléments à ce cadre. Jetez donc un coup d'œil à l'option en haut à gauche. Le premier est essentiellement l'outil de déplacement que nous utilisons, qui est notre curseur de souris. Et le second est l'outil de mise à l'échelle. Maintenant, l'outil de mise à l'échelle sert essentiellement redimensionner les éléments de votre page. Alors, sélectionnez l' outil d'échelle que vous pouvez sélectionner parmi votre ou vous pouvez appuyer sur le bouton J de votre clavier. Maintenant, avant de sélectionner l'outil de mise à l'échelle, je vais juste zoomer un peu parce que c'est comme ça que je me sens à l' aise pour le montage. Disons maintenant que je vais sélectionner cette image ici. Et je veux redimensionner ce cadre. Pour cela, j'avais besoin de l'outil de balance. Appuyons sur le bouton de notre clavier. outil de mise à l'échelle a donc été activé. Maintenant, si je prends ma souris vers l'un de ces bords, vous pouvez voir que le curseur a changé. Maintenant, il s'agit d'un bool de redimensionnement. Donc, si je clique avec le bouton gauche et que je fais glisser cette chose, je peux redimensionner mon cadre. C'est ainsi que fonctionne l'outil de redimensionnement. De même, si je veux redimensionner ce cadre, je vais simplement sélectionner dessus. Et je prends mon curseur vers le bord, et je vais juste faire glisser cette chose. Maintenant, si vous jetez un coup d'œil pendant que je redimensionne ce cadre, partie de celle-ci se trouve derrière celle-ci. Maintenant, si vous voulez que cette image soit juste derrière cela, notre première image, il vous suffit donc d'aller la section calque, puis de maintenir votre bouton gauche de la souris sur notre première image et faites glisser cette chose à propos du cadre. Ok, c'est ainsi que fonctionnent les couches. Maintenant, je vais juste le remettre là où il était. Et je vais simplement déplacer ce truc ici. Ok, donc maintenant si je sélectionne cette image et que je vais vers le bord, vous pouvez voir actuellement que l'option d' échelle est toujours activée. Donc, si vous souhaitez désactiver cette option, il suffit d'appuyer sur le bouton V de votre clavier. Maintenant, si je prends mon curseur vers le bord, vous pouvez voir que nous pouvons encore redimensionner cette chose, mais elle ne sera pas redimensionnée en fonction d'une dimension fixe. Vous allez redimensionner cette chose de façon aléatoire, d' accord, alors je viens d'appuyer sur Control Z sur mon clavier. Si vous le ramenez à sa dimension d'origine. Et maintenant, appuyons à nouveau sur le bouton. Vous pouvez maintenant voir que nous redimensionnons cette chose dans chaque dimension, en redimensionnant proportionnellement. D'accord, je viens de cliquer à nouveau sur le bouton V de mon clavier. Pour revenir à l'option Déplacer, vous pouvez la sélectionner à partir de votre valeur. Vous pouvez déplacer ou sélectionner l'échelle. Passons maintenant à la deuxième option. La deuxième option est frame. Nous avons déjà couvert cette partie. Et maintenant, la troisième option est les outils de forme. Donc, si je développe cela, vous pouvez voir ce sont les outils de forme des vidéos. Et certains de ces outils ont également un raccourci. Ainsi, au fur et à mesure que vous êtes bien au courant de Figma, vous pouvez simplement sélectionner directement à l'aide de raccourcis. Vous n'avez pas besoin de choisir dans ce menu à chaque fois. Allons d'abord avec un rectangle. Maintenant, je vais simplement cliquer sur ce rectangle. Maintenant, tout comme le cadre freestyle, vous pouvez simplement tirer sur le bouton gauche de la souris et faire glisser cette chose. Créez un rectangle. Et lorsque vous quittez le bouton de la souris, le rectangle s'est formé. Je vais donc simplement cliquer dehors. Maintenant, il existe également une autre fonctionnalité de cet outil rectangle. Sélectionnons à nouveau l'outil Rectangle. Et maintenant, disons que je voulais ajouter un carré au lieu d'un rectangle. Si vous souhaitez ajouter un carré au lieu d'un rectangle, vous pouvez l'ajouter à l'aide de cette même option. C'est l' outil Rectangle. Pour ça. Tout ce que vous avez à faire est d' appuyer sur le bouton Maj votre clavier , puis de faire glisser cette chose. Maintenant, si vous jetez un coup d'œil pendant que vous faites glisser cette chose, ça va de manière carrée parfaite. Je quitte le bouton de la souris , puis je laisse la touche Maj. Il reste donc parfait. Ok, donc les vôtres sont au carré et le vôtre sur un rectangle. Et les deux ont été ajoutés à l'aide du même outil de rectangle. Tout comme l'option de cadre lorsque nous avons sélectionné le cadre, nous avons pu apporter des modifications dans la section de conception. De même, si vous souhaitez apporter des modifications à votre rectangle ou à votre carré ou à tous les éléments que vous êtes. Il suffit de sélectionner ces éléments et d' apporter des modifications ici. Ok, alors changeons le remplissage de ce carré. Je vais le changer en bleu. Et restons également dans le champ de ce rectangle. Je vais le garder blanc. Et je vais juste ajouter un coup à ça. Il suffit de changer la couleur du contour et de modifier la largeur du trait. Explorons d' autres outils de forme. Il y a la ligne. Je vais juste sélectionner cette ligne. De même, vous pouvez simplement maintenir le bouton gauche de la souris enfoncé. Et vous pouvez faire glisser cette chose. Maintenant, si vous voulez que ce soit exactement à 0 degré, 45 degrés ou 90 degrés, il suffit de maintenir le bouton Maj de votre clavier enfoncé. Et à partir de là, vous pouvez simplement faire glisser ces choses pour voir lesquelles restent proportionnelles. Ensuite, je bougerai le bouton de ma souris. Nous avons donc une ligne droite. Voici la ligne. Vous pouvez sélectionner cette ligne et apporter des modifications dans leur section de conception. Modifions la largeur de contour de cette ligne. C'est là. Et changeons la couleur du trait, rouge. Maintenant, il y a également cette option de flèche. Similaire à la ligne. Maintenant, je vais simplement maintenir ma touche Maj enfoncée et faire glisser cette chose ici. Si nous avons une annonce ou votre réservoir, je vais simplement modifier la largeur du trait et modifier la couleur du trait. Il y a également quelques options ici. Vous pouvez également modifier le point final. OK ? Il y a donc le diamant étroit, il y a la flèche de ligne. Cela est donc utile pour créer des organigrammes, etc. En continuant, il y a cette éclipse. Maintenant, vous pouvez simplement maintenir le bouton gauche de la souris et faire glisser cette chose, mais je vais laisser cette chose telle qu'elle est. Vous pouvez maintenant ajouter un cercle parfait l'aide de cet outil Eclipse. Il suffit de sélectionner l'outil Eclipse. Et avant de commencer à faire glisser cette chose en maintenant le bouton gauche de la souris enfoncé, maintenez simplement la touche Maj de votre clavier obtenir un cercle parfait. C'est ainsi que cela fonctionne et connaissait d' abord le bouton de la souris , puis laissez la touche Maj pour qu' elle reste parfaite. Maintenant, je vais sélectionner ma première image une fois de plus. Si j'ai essayé de redimensionner cette chose, vous pouvez voir que nous sommes en train de se redimensionner en trois dimensions. Maintenant, si je maintiens la touche Maj pendant que je redimensionne cette chose, vous pouvez voir qu'elle bouge dans des proportions parfaites. Nous ne pouvons pas faire le freestyle que nous voulons. C'est ainsi que la boîte de touches Maj, je suppose que j'avais aussi un champ dans notre cercle. Parlons maintenant des autres outils. Je vais juste étendre ce truc. Ici, vous pouvez voir qu'il y a un stylo et un outil crayon. Commençons par sélectionner l'outil Plume. Maintenant, l'outil stylo est similaire, connectez les points. Si vous souhaitez créer un vecteur, vous pouvez utiliser l'outil plume. La première étape consiste à cliquer quelque part. Maintenant, ce sera le point de départ. Et maintenant, si vous cliquez à nouveau, ce sera les autres points. Cela ressemble donc à la création de points et de lignes. Nous sommes en train de créer un vecteur ici. Maintenant, je vais juste porter ça jusqu'au point de départ, ou vous pouvez l' amener à n'importe quel point que vous voulez. Une fois que vous avez terminé, cliquez simplement sur Terminé l'oreille droite. Nous allons maintenant sélectionner notre vecteur. Et vous pouvez voir que nos différentes fonctionnalités supplémentaires que nous pouvons également utiliser pour le vecteur. Ajoutons donc un remplissage à ce vecteur. Actuellement, le champ n'a pas été ajouté, alors cliquons sur le signe plus. Vous pouvez maintenant voir le vecteur comme un champ. Changeons le remplissage de ce vecteur. Ce sont maintenant que c'est juste à titre de référence. Les vecteurs sont très utiles. Vous pouvez créer n'importe quelle forme de votre choix. Maintenant, en continuant, il y a l'outil crayon. Je vais juste sélectionner cet outil de crayon. Maintenant, c'est pour un style gratuit. Vous pouvez juste avant le bouton gauche de la souris et dessiner tout ce que vous voulez. Si vous souhaitez tracer une ligne droite, suffit de maintenir le bouton Maj votre clavier pour dessiner une ligne droite. C'est ainsi que fonctionne l'outil crayon. Une fois que vous avez terminé avec l'outil crayon, il suffit d'appuyer sur le bouton votre clavier pour revenir à l'option Déplacer. Si vous souhaitez supprimer un élément particulier, il suffit de sélectionner cet élément particulier. Disons maintenant que je veux supprimer ce qui est dessiné avec un crayon. Il suffit de sélectionner cet élément et appuyer sur le bouton retour arrière de votre clavier. Ok, maintenant cette chose a disparu. Et si vous voulez annuler les changements, disons maintenant que j'ai dilué ce dessin au crayon et que je voulais le ramener. Il suffit d'appuyer sur Control Z sur votre clavier, qu'il annule les modifications, prenne du recul. Vous pouvez le faire plusieurs fois pour revenir à l'étape précédente. Je vais donc simplement le sélectionner à nouveau et supprimer en appuyant sur le retour arrière. Je vais donc supprimer cette chose aussi. Celui-là aussi. Ok, donc tout est question de l'outil stylo pénicilline. Passons maintenant à l'autre. C'est l'outil de texte. Il suffit de sélectionner le texte ici. Et maintenant, ajoutons du texte quelque part dans notre cadre. Je vais donc simplement descendre à l'aide de l'outil à main. Je vais zoomer. Ajoutons maintenant du texte dans cette zone. Je vais simplement cliquer ici. Et maintenant, à partir de là, vous pouvez simplement ajouter n'importe quel texte que vous voulez. Disons donc qu'une fois que nous aurons terminé, il suffit de cliquer dehors quelque part. Voici notre texte et je vais simplement faire glisser cette chose vers le centre. Vous pouvez voir que Figma est un outil très intelligent. Il vous donne également des dimensions. C'est notre point de vue, c'est ici que vous pouvez voir qu'il est parfaitement au centre. Et maintenant, vous pouvez également personnaliser ce texte. Vous pouvez voir sur le côté droit dans l'option de conception, il existe différentes options. Vous êtes les styles étrangers. Vous pouvez modifier la police à partir de cet emplacement. Modifions également le style de police. Je vais le changer pour faire bouillir. Maintenant, il y a le manuel que nous avons déjà couvert. Vous pouvez simplement faire bouillir le bouton d'espace votre clavier et faire glisser cette chose où vous le souhaitez. Et la dernière fonctionnalité consiste à ajouter un commentaire. Je vais donc simplement sélectionner cette chose. Vous pouvez sélectionner l'endroit où vous souhaitez ajouter un commentaire. Je viens de sélectionner ce cercle ici. Je vais ajouter un commentaire. Maintenant, le commentaire a été ajouté, et maintenant je vais appuyer sur le bouton V de mon clavier pour revenir en arrière. Supposons maintenant que vous travaillez en équipe et que vous vouliez vérifier les commentaires laissés par vos coéquipiers sur ce design particulier. Les utilisateurs doivent cliquer sur ce commentaire ici. Et sur le côté droit, vous pouvez voir les différents commentaires que vos coéquipiers sont laissés tomber. Ici, vous pouvez voir le seul commentaire, le Yoda c'est. C'est ainsi que les commentaires sont utiles lorsque vous travaillez en équipe. Bon, donc c'est tout pour cette session. Nous sommes couverts par les bases de Figma. Au cours de la prochaine session, nous passerons à l'avant avec les fonctionnalités plus avancées de Figma et nous allons également examiner la partie prototypage. C'est tout. Merci. 5. Quelques fonctionnalités d'Advance à connaître avant le prototypage: Bonjour et bienvenue à tout le monde. Au cours de cette session, nous allons apprendre quelques fonctionnalités plus avancées de Figma et nous nous pencherons vers la partie prototypage. Avant de commencer le prototypage, il y a quelques photos de Pigma que vous devez connaître, qui sont les plus couramment utilisées dans Figma. Commençons donc. Je vais d'abord ajouter une éclipse. Vous savez maintenant comment ajouter une éclipse. Il suffit d'aller à la forme, sélectionner l'option Eclipse. Et si vous voulez ajouter un cercle parfait, suffit de maintenir la valeur de la touche Maj ou de faire glisser cette chose. Le voilà. Nous avons donc un cercle parfait. Maintenant, je vais juste sélectionner ce cercle ici. Et si vous regardez la section supérieure, il y a trois options. Modification, objet, création, composant et masque utilisateur. Maintenant, tous ces trois sont très intéressants et importants si vous allez créer plusieurs conceptions lors création d'un prototype ou simplement pour un journal de base figma. Nous allons juste les parcourir un par un. Le cercle a déjà été sélectionné, il suffit donc de cliquer sur l'option Modifier l'objet. Et maintenant, nous pouvons modifier ce cercle comme nous le voulons. Vous pouvez voir qu'il y a quatre points ici, sorte que vous pouvez simplement les ajuster et le design de votre façon. C'est donc l' une des caractéristiques de Figma pour créer un design. Et une fois que vous avez terminé, cliquez simplement sur Terminé l'oreille droite. Et vous pouvez également modifier le remplissage de cette forme. Il s'agissait maintenant de la fonction de modification de l'objet. Je vais simplement supprimer ça. Pour supprimer n'importe quel objet dans Figma, il suffit de sélectionner cet objet en particulier et de cliquer sur Retour arrière sur votre clavier. Maintenant, la forme est disparue. Maintenant, avant de passer à une autre fonctionnalité de Figma, je vais juste ajouter un rectangle. Il suffit donc d'aller dans Formes, cliquer sur le rectangle. Et maintenant, je vais simplement enfoncer la touche Maj parce que je veux un carré parfait. C'est que nous avons un carré parfait. Et maintenant, passons à autre chose avec une autre caractéristique intéressante du magma appelée «  créer un composant ». Okay, il s'agissait donc de l'option Créer un composant. Avant de vous expliquer ce qu'est le composant Create Component, je vais simplement vous montrer la différence entre l'utilisation option Créer un composant et sans utiliser l'option Créer un composant. Maintenant, l'option Créer un composant est très utile lors de la création de conceptions et également lors du prototypage. Maintenant, vous avez entendu dire que nous avons un carré. Je vais juste dupliquer cela maintenant pour créer une copie de n'importe quel élément, tout ce que vous avez à faire est de sélectionner cet élément particulier et appuyer sur le contrôle D sur votre clavier. Et il est écrit Sélection des doublons. Il y a maintenant deux rectangles. Il suffit de faire glisser celui-ci ici. C'est là. Et maintenant, je vais appuyer une fois de plus sur Control D sur mon clavier pour créer une autre copie. Maintenant, si vous l'avez remarqué, Figma a automatiquement créé l' espace entre les deux. Sigma est donc une application très intelligente. Et maintenant, nous sommes trois carrés. Je vais juste sélectionner le premier carré ici. Maintenant, si j'essaie de changer le remplissage de ce premier carré, passons au rouge. Maintenant, si vous remarquez, j'ai changé l'attrait du poste au carré. Cependant, l'attrait des carrés restants de la piscine est tout à fait le même, bien qu'il s' agisse de la copie du premier. Maintenant, même s'il s'agit de la copie du premier carré, ils ne sont aucunement liés au premier car ils sont simplement copiés et ces deux carrés sont un élément individuel ou différents de la premier. C'est ici que la fonction Créer un composant s'avère utile. Parce que lorsque vous créez n'importe quel design ou n'importe quel projet dans Figma, il y aura beaucoup de réputations. Les motifs doivent suivre un motif de couleur particulier ou disons un format particulier. Et en temps mort, vous ne pouvez pas continuer à éditer chaque objet individuellement pour maintenir un modèle particulier. À ce moment-là, le composant Create est très pratique. Nous allons maintenant apprendre comment créer une fonction de composant fonctionne. Maintenant, je viens de créer une copie de ce rectangle rouge. Je viens d'appuyer sur Control D sur mon clavier. Et je vais traîner ce truc ici. Nous avons maintenant une copie de ce carré. Et changeons l'attrait de cette place uniquement à des fins de démonstration. Mais je vais juste le changer pour, disons vert. Maintenant, c'est là. Nous avons un rectangle, un autre rectangle, c'est un rectangle vert. Nous avons maintenant un rectangle vert. Et maintenant, je vais vous montrer comment fonctionne la fonctionnalité Créer un composant. J'ai sélectionné ce rectangle vert et je vais juste appuyer sur Créer un composant. Si vous observez la couleur de ce calque particulier est remplacée en violet. Nous avons ici un composant, ce rectangle vert est désormais un composant du composant parent. Maintenant, si je vais créer une copie de cet élément ou E5 lié pour dupliquer ce rectangle vert. Il suffit de regarder comment cela fonctionne. Je vais juste appuyer sur Control D sur mon clavier une fois de plus. Maintenant, nous avons noté une copie de ce rectangle, et je vais appuyer une fois de plus sur Control D sur mon clavier. Maintenant, j'ai trois rectangles verts. Maintenant, si j'essaie de changer quoi que ce soit avec le premier, c'est le rectangle parent. Vous pouvez voir qu'il s'agit du rectangle parent. Si vous jetez un coup d'œil à la section Calques, vous pouvez constater que ce n'était pas le premier composant que nous avons créé. Et le rectangle six et les rectangles sept sont les copies du premier. Vous pouvez voir la différence entre les icônes. Il montre donc que le rectangle cinq du composant parent, et il s'agit des composants enfants. Maintenant, j'ai sélectionné le fichier rectangle, et je vais essayer de modifier le remplissage de cet élément particulier. Cliquons sur Remplir. Je vais juste le changer par, disons jaune. Donc maintenant, si j'essaie de changer une couleur ou effectuer des modifications avec ce fichier rectangle, les modifications seront également visibles dans les deux autres. Il y a les copies du fichier rectangle. C'est ainsi que fonctionne la fonctionnalité Créer un composant. Quoi que vous fassiez avec le premier composant, le composant enfant suit. Cela n'est pas seulement éligible pour les formes, mais également pour la texture. Je vais juste vous montrer comment cela fonctionne pour le texte. Ajoutons du texte. Au-dessus du texte. Je vais simplement sélectionner ce texte et augmenter sa taille. Augmentons donc un peu la taille. Il en va de même pour nos textes et je vais juste cliquer sur Create Component. Maintenant, ce texte est également un composant. Maintenant, ce n'est pas forcément que tout comme les formes sont similaires, textes ont tendance à être similaires. Les textes peuvent être n'importe quoi. Je vais donc juste appuyer sur Control D sur mon clavier. Nous avons créé un duplicata de ce texte particulier. Maintenant, je vais juste changer ce texte ici. Yoda c'est le deuxième élément et Figma est facile est notre composant parent. J'ai maintenant sélectionné le premier texte. Maintenant, je vais simplement changer le remplissage de ce texte particulier. C'est ainsi que fonctionne la fonctionnalité Créer un composant. Même si les deux suivent un schéma similaire, il n'est pas nécessaire qu'ils soient exactement les mêmes. Il va à l'exemple du rectangle. Encore une fois, je vais simplement diminuer la taille de ce rectangle particulier. Et je vais le garder ici. Maintenant, si j'apporte des modifications au composant parent, modifions le champ une fois de plus. Vous devez double-cliquer dessus pour modifier le remplissage. Maintenant, je viens de changer, on va le faire, disons rose. Vous pouvez donc voir ici que la couleur a changé pour tous. Cependant, il n'est pas nécessaire que la forme, la taille de chacun d' entre eux, doive dire exactement qu'elles peuvent également être de n'importe quelle forme. Bon, passons maintenant à une autre caractéristique intéressante de Sigma. Je viens de clarifier tout ça. Il suffit de les sélectionner tous et d'appuyer sur Retour arrière sur votre clavier pour qu'il soit supprimé. Maintenant, je vais juste ajouter une autre éclipse. Il suffit d'aller à Eclipse. Je vais simplement maintenir la touche Maj enfoncée pour obtenir un cercle parfait. Nous allons maintenant apprendre une autre fonctionnalité intéressante de Figma appelée masque des utilisateurs. Nous avons donc maintenant un cercle parfait. Je vais juste le garder sur le côté et je n'ajouterai pas d'image quelque part ici. Je vais donc simplement accéder aux formes et je cliquerai simplement sur Placer l'image. Affiche cette image ici, pour que vous ayez une image particulière. Je vais simplement développer cela en maintenant la touche Maj enfoncée sur mon clavier, puis en faisant glisser les bords. Nous avons donc une option de redimensionnement symétrique ici. Maintenant, ce que je veux faire, c'est que je veux que ce logo WordPress soit exactement sur ce cercle. Je veux qu'ils fassent partie de la même chose. Je vais donc juste placer cette image au-dessus de ce cercle. Il suffit maintenant d'aller dans la section calque, gras la touche Maj de votre clavier, sélectionner l'éclipse ainsi que l'image. Et une fois que les deux sont terminés, il suffit d'appuyer sur la fonction Masque des utilisateurs dans le coin supérieur du menu pour que ce soit le cas. Maintenant, vous pouvez voir que nous avons utilisé l'élément ne masque pas. C'est donc tout ce que la fonction Masque jeunesse fonctionne et vous pouvez faire glisser cette chose où vous le souhaitez. Et une fois que vous êtes satisfait, vous regroupez ces éléments et créez un seul élément à partir de ces deux éléments. Passons donc à la section Calque maintenant la touche Maj de votre clavier enfoncée, sélectionnez l'éclipse ainsi que l'image, puis appuyez simplement sur Control G sur votre clavier. Une fois que vous avez terminé, vous pouvez voir maintenant qu'il s'agit d'un groupe unique. Ce ne sont plus des éléments différents. C'est là. C'est ainsi que fonctionne la fonctionnalité Masque des utilisateurs. Nous avons donc maintenant deux cercles et des dépenses. Ce deuxième cercle au-dessus du premier cercle se dirigera vers une autre caractéristique intéressante de sigma. Vous pouvez donc voir ici un deuxième cercle sélectionné. Sélectionnons également le premier en même temps. Il suffit donc de maintenir la touche Maj votre clavier et de sélectionner le premier cercle. Nous avons maintenant sélectionné ces deux cercles. Si vous regardez la section supérieure, vous pouvez voir cette option qui indique groupes booléens. Il suffit d'agrandir ça. Vous pouvez maintenant voir qu'il existe de nombreuses options telles que sélection de l'union, la soustraction, l' intersection, l'exclusion. Vous pouvez également essayer ces groupes booléens. Cliquons donc sur la sélection syndicale et voyons ce que nous obtenons. Nous avons simplement cliqué sur la sélection de l'union et vous pouvez voir que nous avons une forme différente. Et à l'heure actuelle, il s'agit d'une union des deux cercles que nous avons créés. Examinons donc également les autres options. Si vous souhaitez prendre du recul, appuyez simplement sur Control Z sur votre clavier. Vous pouvez passer à l'étape précédente. Je vais donc appuyer une fois de plus sur Control sur mon clavier. Nous avons maintenant deux cercles une fois de plus. Et ce n'est pas forcément que les deux doivent avoir une forme identique. Ils peuvent être sous n'importe quelle forme que vous voulez. Je vais donc simplement changer la forme de ce cercle en particulier ici. Je vais juste le changer en éclipse. Et maintenant, je vais jouer ça sur le premier cercle. Nous allons les sélectionner tous les deux. Encore une fois. Il suffit de maintenir la touche Maj votre clavier et de cliquer sur la première. Nous avons donc sélectionné ces deux objets. Et essayons d'autres fonctionnalités, par exemple, supposons soustraire la sélection que c'est maintenant que cette sélection a été soustraite. C'est ainsi que fonctionne la fonctionnalité de groupe booléen dans Figma. Maintenant que nous sommes couverts par ces parties, passons à autre chose. Je viens d'ajouter du texte ici. Si vous souhaitez créer un double de ce texte, il suffit de sélectionner ce texte et d'appuyer sur le contrôle D de votre clavier. Vous y avez créé une copie de cet élément particulier. Et c'est également une autre façon de créer un duplicata de ces éléments. Il suffit de sélectionner le texte souhaité, le texte ou la forme souhaitée, et vous n'avez pas besoin d'appuyer sur Control D à chaque fois. Il suffit de maintenir la touche Alt de votre clavier enfoncée. Ensuite, vous pouvez simplement faire glisser cette chose où vous le souhaitez. Bon, vous pouvez maintenant voir la copie de ce texte a été placée ici en maintenant la touche Alt enfoncée sur mon clavier. C'est ainsi que cela fonctionne. De même, vous pouvez également créer des copies des formes. J'ai sélectionné cette forme ici. J'ai juste enfoncé la touche Alt de mon clavier et je vais faire glisser cette chose vers le bas. Vous pouvez créer une copie dupliquée facile de tous les éléments de votre choix. Si vous souhaitez revenir aux étapes précédentes, cela signifie que si vous souhaitez annuler une opération, appuyez simplement sur Contrôle et Z sur votre clavier plusieurs fois. 6. Prototypage et création d'un projet: Passons maintenant à la partie prototypage. Et pendant la partie prototypage, nous apprendrons d' autres fonctions et outils dans Figma. Commençons. Nous allons maintenant créer un prototype de base, par exemple créer un prototype d'application mobile. Donc, tout d'abord, il faut ajouter une image-clé, passer à l'option image. Cliquez sur le cadre. Vous pouvez sélectionner l' écran mobile souhaité. Le voilà, vous êtes que nous avons un cerveau. Et nous allons zoomer. Maintenez simplement la touche Ctrl votre clavier et faites défiler le bouton de la souris vers le haut. C'est là. Nous allons maintenant créer un duplicata de cette trame car nous voulions créer un prototype. Je vais juste vous montrer comment fonctionne le prototypage. Plus la touche Alt est ancienne de mon clavier. Et faites glisser cette chose ici. Je vais maintenir la touche Alt de mon clavier une fois de plus et faire glisser cette chose que l'informatique, ou. Nous allons créer un prototype simple d'application mobile l'aide de ces trois cadres. Je vais simplement changer la couleur de remplissage de ce post-impression. Changeons ça en noir. Nous allons maintenant ajouter du texte à la première image. Je vais juste taper. Bienvenue dans notre application. Si vous remarquez que la taille du texte est trop grande, réduisons la taille du texte. Tout d'abord, je vais simplement sélectionner le texte et je réduirai la taille low tech de votre part. C'est maintenant que nous avons réduit la taille du texte et je vais juste écrire, bienvenue dans notre application. Je vais placer cette chose, cette idée. Ajoutons maintenant quelques champs de texte sous la forme d'un bouton. Lorsque certains utilisateurs cliquent sur ces boutons, ils sont redirigés vers une autre page. C'est ce que nous allons créer dans ce prototype. Nous avons ajouté un texte et nous apprendrons une autre caractéristique importante et la plus populaire de Pigma appelée mise en page automatique. Il suffit de sélectionner ce texte ici. Ensuite, il vous suffit de cliquer sur Maj a sur votre clavier. Vous pouvez voir que la mise en page automatique a été ajoutée et que vous pouvez également l' ajouter. Je vais simplement activer l'option de remplissage pour cette mise en page automatique particulière pour qu'elle le soit. Et nous pouvons simplement changer le remplissage de cet élément particulier. Passons simplement au jaune. Et maintenant, nous avons noté un bouton pour cette application particulière. Et maintenant, je vais simplement le sélectionner et réduire la taille en maintenant la touche K mon clavier, puis en faisant glisser cette chose un peu vers le haut. Et maintenant, je vais simplement créer un duplicata de cette fonctionnalité. Nous allons donc choisir celui-ci. Maintenez la touche Alt de votre clavier enfoncée et faites glisser cette chose vers le bas. Maintenant, je ne suis pas vraiment en train de créer une belle application. Je vous montre simplement comment fonctionne la fonction prototype et maintenant, modifions le texte de cet élément particulier qui le nommera tel qu'il est. Nous avons maintenant créé deux éléments pour cette page particulière. Maintenant, ce sera la page d'accueil de l'application, et je vais juste la placer ici. Maintenant, cette deuxième image, notre idée sera la page À propos de nous. qui signifie que si un utilisateur clique sur ce bouton à propos de nous ici, il sera redirigé vers cette page en particulier ici. Bon, ajoutons les détails dans cette deuxième image. Je viens de changer le remplissage de cette deuxième image. Ajoutons quelques textes. Vous pouvez également copier le texte à partir de votre. Il suffit de mettre en gras la touche Alt de votre clavier et de faire glisser cette chose ici, puis vous pourrez modifier ce texte ultérieurement. Je vais juste modifier le texte. Je vais simplement créer un double de ce texte, la touche Alt de mon clavier. Faites glisser cette chose ici et j'ajouterai simplement une ligne simple. Et maintenant, une autre caractéristique importante de Figma ou des plugins. Voyons donc comment fonctionne la fonctionnalité des plugins. Maintenant, je vais juste ajouter une forme à cette idée. Ajoutons un carré en bas de la route sur la page À propos de nous. Maintenant, si je sélectionne ce carré et que je clique sur le bouton droit de la souris, vous pouvez voir que nous obtenons certaines options. Et parmi ces options, il y a une fonctionnalité appelée plug-ins. Maintenant, vous savez ce que sont les plugins, mais voyons comment les plugins négocient Figma. Les plugins de Figma rendent vraiment votre travail et facile. Il y a tellement de plugins pour beaucoup de fonctions. Explorons-les. Vous pouvez voir que nous sommes des plugins gérés et parcourez les plug-ins dans l'option communauté, je clique simplement sur Parcourir les plug-ins dans la communauté. À partir de là, vous pouvez installer les plugins que vous voulez, pas seulement les plug-ins étant plus communautaires, c'est une très grande communauté. Vous pouvez voir qu'il existe différentes fonctionnalités. Il y a une topographie qui est un design mobile ainsi que des illustrations Dui Kids, etc. Vous avez également publié vos propres créations. Nous sommes donc à la recherche de plugins. Vous pouvez donc voir que l' option des plugins a été sélectionnée. Maintenant, cherchons quel plugin. Je vais juste chercher le plugin Unsplash. Maintenant, le plugin Unsplash nous aide à accéder facilement aux images non protégées par le droit d'auteur. Quel que soit le design, vous pouvez dire, c'est le plugin Unsplash. Je vais donc simplement cliquer sur Installer. Il suffit de cliquer sur Installer le plugin. Maintenant, le plugin Unsplash a été installé. Revenons à la page de conception. Maintenant, si je clique à nouveau avec le bouton droit sur ce carré, vous pouvez voir si je vais aux plugins, vous pouvez voir qu'il y a le plugin Unsplash que nous venons d'installer. Il suffit donc de cliquer dessus. Vous pouvez voir que le plugin s'est ouvert. À partir de là, vous pouvez rechercher une image de votre choix. Il y a donc l' image de la lune que je veux, alors je vais simplement cliquer dessus. C'est là. Vous pouvez voir ici que nous avons ajouté la lune au rectangle. C'est ainsi que fonctionne le plugin Unsplash. La page À propos de nous a maintenant été créée. Créons également la page Contactez-nous. Je vais juste changer le remplissage de ce cadre particulier. Il suffit donc de maintenir la touche Alt votre clavier et de faire glisser cette chose ici. Et si vous voulez vous assurer que les deux sont parfaitement alignés, vous pouvez également vérifier les dimensions. Bon, il suffit de sélectionner l'affiche qui nous concerne ou la touche Alt de votre clavier. Ensuite, vous pouvez simplement déplacer votre curseur vers les bords. Vous pouvez voir la distance, les dimensions de ce texte particulier. C'est donc écrit en 1996. Maintenant, vous pouvez vous assurer que cela nous concerne est également à la même distance. Il suffit donc de maintenir la touche Alt et de pointer vers les bords. Ici, vous pouvez voir que ce n'est pas exactement similaire. Maintenant, maintenez simplement la touche Alt de votre clavier enfoncée et utilisez les touches fléchées votre clavier pour contourner les dimensions. Bon, je vais juste changer ça en 1986. Bon, donc maintenant ces deux-là sont parfaitement alignés. Je vais simplement changer le texte pour nous contacter. Maintenant, ajoutons un autre plugin à cette page Contactez-nous. Je vais juste appuyer sur le bouton droit de la souris. Allons dans Plugins et cliquez sur Parcourir les plug-ins dans la communauté. Maintenant, additionnons à nouveau une carte qui est le plugin de localisation. Je viens d'installer le premier plug-in ici. Cliquez sur Installer. Maintenant, le plugin a été installé, il suffit d'appuyer sur le bouton droit de la souris, d'aller dans Plugins. Et maintenant, nous allons sélectionner une fonction de cartographe dôme. À partir de là, vous pouvez ajouter n'importe quel emplacement de votre choix. Je vais donc taper n'importe quel hasard, même celui-ci va bien. Vous pouvez entrer l' adresse d'entrée ici, puis ajouter l'emplacement. Je vais simplement cliquer sur Make map. C'est là. Et maintenant, vous pouvez également le redimensionner. Il suffit donc d'aller sur les bords et le bouton k de votre clavier. À partir de votre, vous pouvez redimensionner cette chose en particulier et la faire glisser. OK ? Maintenant, lorsque vous appuyez sur le bouton V de votre clavier, revenez à l'option Déplacer. C'est là. Et vous n'avez pas besoin de créer manuellement des objets à chaque fois. Divers concepteurs professionnels ont créé les prototypes d'applications et divers kits d'interface utilisateur, etc. Et tous ont déjà été téléchargés dans la communauté. Il suffit d' appuyer sur le bouton droit de la souris. Accédez à Plugins et parcourez les plug-ins de la communauté. Et ici, vous pouvez simplement rechercher une application mobile. n'est pas que nous créons simplement une recherche d'application mobile. Vous pouvez donc voir qu'il s'agit de la section plugin, et c'est une autre section appelée fichiers. Il suffit de cliquer sur Fichiers ici. Et ici, vous pouvez voir ce sont les différents projets, différents designs créés par les utilisateurs et ils ont été téléchargés dans la communauté. s'agit donc de fichiers, ce qui signifie que vous pouvez copier et modifier ces fichiers. Vous pouvez copier chaque élément de ces fichiers et l'utiliser dans votre propre projet. Ce qui signifie que vous n'avez pas besoin de créer manuellement des objets à chaque fois. Quoi que vous ayez besoin pour créer une page bêta et page de connexion automatique des applications, vous pouvez simplement rechercher dans la communauté , vous inspirer de ces personnes et copier les éléments individuels également. Vous pouvez littéralement importer ces projets dans votre propre application Figma, puis les modifier. Supposons maintenant que je souhaite la page de connexion pour mon application. Donc, tout ce que je vais faire, c'est simplement chercher la connexion ici. Ensuite, vous pouvez simplement cliquer sur Fichiers. Vous pouvez voir qu'il s'agit des différents fichiers disponibles sur la page de connexion. Vous pouvez voir qu'ils se trouvent dans les pages de connexion créées pour les applications mobiles ou disons le stock technologique. Vous pouvez sélectionner celui que vous souhaitez, modèle que vous souhaitez. C'est le premier projet. Je vais donc simplement cliquer dessus. Vous pouvez voir ici que ce créateur a créé page de connexion simple pour l'application mobile, une page de connexion unique. Tout ce que je vais faire, c'est simplement cliquer sur le double car nous voulons copier ces éléments. Il vous suffit donc de cliquer sur le double pour pouvoir importer le projet dans votre propre application pig my. Vous pouvez donc voir ici que ce projet créé par l'utilisateur est en cours importation dans notre propre application de bureau. La première chose que je veux faire, c'est que je veux cet onglet de connexion dans mon propre design. Je ne vais donc pas sélectionner ce login ni le texte, mais le rectangle avec lui, car je veux l' intégralité de l'onglet de connexion. Il suffit donc de sélectionner le rectangle à l'aide de la touche Maj , puis de créer un groupe à l'aide de Control G sur votre clavier. Une fois que vous avez atteint le contrôle Z, vous pouvez voir que les deux éléments sont regroupés en un seul. Nous allons simplement appuyer sur Control C sur notre clavier pour copier cet onglet de connexion. Ensuite, nous reviendrons à notre propre projet. Ensuite, nous allons simplement sélectionner le cadre , puis le coller ici. Maintenant, l'onglet de connexion est également disponible dans notre projet. Nous l'avons simplement copié à partir de l'utilisateur. Maintenant, nous voulons également ces icônes, les icônes de connexion sociale de notre projet. Nous allons simplement sélectionner toutes ces icônes. Nous allons à nouveau appuyer sur Control G sur notre clavier pour créer un groupe. Et nous allons simplement appuyer sur Control C pour copier toutes ces icônes, le groupe ensemble. Ensuite, nous reviendrons à son propre projet, puis nous allons appuyer sur Control V sur notre clavier. C'est ainsi que cela fonctionne. Cela rend notre travail beaucoup plus facile. C'est ainsi que fonctionne l'ensemble de la fonction de copie. Et c'est très utile. Maintenant que nous avons fini avec la partie design. Ce n'est pas vraiment un beau design. Je voulais juste vous montrer un design de base que nous pouvons poursuivre avec le prototype. Maintenant, vous pouvez voir que nous avons fini avec la partie design. Passons donc à la section prototype. Là, vous pouvez voir que c' est la section prototype en plus du design. Comprenons maintenant le flux de ce prototype. Lorsqu'un utilisateur clique sur le bouton À propos de nous, nous voulons que l'utilisateur soit redirigé vers la deuxième image. C'est la page À propos de nous. C'est la première partie. Et lorsque l'utilisateur clique sur le bouton Contactez-nous, nous voulons qu'il soit redirigé vers la troisième image. C'est la page Contactez-nous. C'est le flux de notre prototype. Ce que nous allons maintenant faire, c'est que nous allons créer ce prototype. Le flux du projet est désormais clair. Créons le prototype. Allons maintenant sur le bouton À propos de nous. Ici, vous pouvez voir qu'il y a un point juste ici près du bouton ci-dessus. Il suffit donc de cliquer dessus et de faire glisser cette chose vers la deuxième image. Ce qui signifie que lorsqu'un utilisateur clique sur le bouton À propos de nous, vous serez redirigé vers la deuxième image. Merci également pour le bouton Contactez-nous, ce que nous devons faire est de faire glisser cette chose qui se trouve près du bouton Contactez-nous. Nous devons faire glisser cette chose vers la troisième image, c'est la page Contactez-nous. C'est ainsi que fonctionne le prototype. C'est assez simple, c'est assez facile. C'est ainsi que fonctionne le framework prototype. Vous pouvez également modifier les animations en fonction de la façon dont vous souhaitez le faire. Vous pouvez donc voir ici que nous avons créé deux interactions pour le prototype. Le bouton À propos de nous et le bouton Contactez-nous. Maintenant, vous ne pouvez pas les voir parce qu'ils sont assez proches, donc je vais les faire dans un petit peu. Vous pouvez donc voir qu'il s'agit de deux interactions distinctes. Le bouton À propos de ce bouton va à la deuxième image, C'est la page À propos de nous. Et le bouton Contactez-nous passe par la troisième image. C'est la page Nous contacter. Vous pouvez également créer des animations ici. Ce n'était qu'une interaction à sens unique que nous avons apprise. Nous devons également créer une interaction inverse. Je vais simplement ajouter un texte qui dit précédemment parce que nous avons appris comment passer du bouton À propos de nous à la page À propos de nous. Mais que se passe-t-il si l'utilisateur souhaite revenir à la page d'accueil à partir de la page ci-dessus. J'ai donc créé un texte qui dit Précédent, je vais simplement ajouter la mise en page automatique en faisant un clic droit dessus. Nous avons donc ajouté une mise en page automatique, et je vais simplement changer le remplissage. Donnons une couleur à ce film que nous créons également un bouton précédent. Ensuite, nous utiliserons également ce bouton pour le prototype. Maintenant, je vais également copier ce bouton sur la troisième image. C'est là. Maintenant, nous avons également le bouton précédent avec la troisième image. Vous pouvez voir en plus du bouton précédent, il y a un point juste là. Nous allons simplement faire glisser cette chose et ramener à la première image elle montre une interaction selon laquelle lorsque vous cliquez sur le bouton précédent, vous êtes redirigé vers la première image. C'est la page d'accueil. De même, pour le prochain bouton Précédent fera la même chose. Vous pouvez voir qu'il y a le point. Il suffit de faire glisser cette chose et de la ramener à la première image. C'est la page d'accueil. Maintenant, nous en avons totalement fini avec notre prototype. Nous avons créé une interaction directe et nous avons également créé une interaction inverse. L'application pour toujours. Voyons maintenant comment fonctionne notre prototype. Maintenant que nous avons fini avec le prototype, vous pouvez voir qu'il y a le bouton Lecture. Il suffit donc de cliquer dessus. Ici. Voici notre page d'accueil. Si vous cliquez sur À propos de nous, vous serez redirigé vers la page À propos de nous. Voici la page À propos de nous. Et si vous voulez revenir en arrière, cliquez simplement sur précédent. Si vous cliquez sur précédent, Il y a, vous revenez à la page d'accueil. De même pour le bouton Contactez-nous, si vous cliquez simplement sur le bouton Contactez-nous, vous serez redirigé vers la page de contact. Et si vous cliquez sur précédent, vous serez redirigé vers notre page d'accueil. C'est ainsi que fonctionne l'aperçu du prototype et vous pouvez également partager ce prototype. Il suffit de cliquer sur le bouton Partager. Vous pouvez l'envoyer à n'importe quel ami. Vous pouvez l'envoyer à n'importe quel courrier ou à n'importe quel utilisateur de Figma. Vous pouvez également le publier sur la communauté Figma. Il suffit de cliquer sur Partager. Vous pouvez également publier sur la communauté Pigma. Ceux-ci peuvent également s'inspirer de votre projet. Ils peuvent copier les éléments du projet, tout comme la façon dont nous pouvons dupliquer le projet d' autres, puis le modifier. Il s'agit donc de Figma. C'est la base de Sigma. Nous avons appris quelques fonctionnalités de base, nous avons appris quelques fonctionnalités avancées. Nous avons également appris à faire du prototypage. C'est tout pour cette session, et c'est tout pour ce cours. Je vous recommande, à vous ou aux personnes que vous visitez régulièrement la communauté Figma, apprendre diverses choses auprès d'autres utilisateurs qui ont publié leurs designs. Il y a toujours de nouvelles choses à apprendre dans Figma. Vous pouvez toujours visiter la communauté Figma. Vous pouvez ensuite dupliquer leurs projets et comprendre comment ils ont créé ces conceptions et ces projets. C'est donc tout pour ce cours. J'espère que vous allez très bien à Figma. Bonne chance, et merci beaucoup.