Figma UI/UX Design Masterclass 2026: from Basics to Advanced

1. Figma Masterclass Trailer: Bonjour, tout le monde. vous souhaite donc à tous la bienvenue dans le design Je vous souhaite donc à tous la bienvenue dans le design complet de la zone Pigma UIUX de la zone Master Series Donc, dans cette série de master en particulier, je vais vous enseigner l'outil Figma du niveau le plus élémentaire au niveau avancé Tout d'abord, je vais vous apprendre disposition et les fonctionnalités de base de son interface. Ensuite, nous apprendrons certaines choses de base comme les composants, mise en page automatique et le prototypage J'ai créé cette série de conférences de manière très systématique afin que tout le monde puisse la comprendre très facilement. Donc, peu importe qui possède quel bagage, même si vous n'avez jamais utilisé logiciel de conception graphique de toute votre vie, vous pouvez toujours comprendre Figma grâce à mes séries de conférences Cette série de master débutera au niveau très débutant et passera au niveau professionnel. Vous ne devez donc pas manquer ma série de conférences. Je vous verrai lors de la conférence. OK, au revoir. 2. Figma Basic Interface, Layout & Features: Je vais donc maintenant commencer ma série de conférences Figma. Donc, tout d'abord, je vais vous apprendre interface et ses propriétés de base , ainsi que le fonctionnement de Figma D'accord, nous allons donc discuter de tout. OK, c'est donc un espace vide. Où vous devez créer votre design. OK. Tout d'abord, examinons son outil, ses fonctionnalités et sa mise en page. OK. Tout d'abord, parlons de certains outils. Ici, nous avons un outil de déplacement, un cadre, des saps, un outil stylo, un outil de texte D'accord, nous allons donc aborder chaque sujet un par un de manière très détaillée. OK. Ici, je présente d'abord sa mise en page. OK. Supposons donc que vous créiez un rectangle. Ainsi, chaque fois que vous créerez quelque chose dans votre canevas vierge, sa couche sera projetée sur le côté gauche de l'écran. Tu peux le voir. J'ai donc créé un rectangle et il est cousu sur le type de couche. OK. 1 minute. Il s'agit d'une section de couche où une couche rectangulaire est cousue. Supposons que je crée une ellipse, sa couche apparaîtra dans la partie gauche de l'écran Supposons que je crée une flèche pour que sa couche apparaisse sur le côté gauche de l'écran. OK. Ainsi, chaque fois que vous créerez quelque chose, sa couche apparaîtra sur le côté gauche de l'écran. OK, vous devez donc remarquer ce point. OK. Maintenant, nous avons abordé les outils et nous avons également discuté du panneau de gauche. Bien, parlons maintenant du panneau de droite. Ainsi, chaque fois que vous sélectionnez un objet, sa propriété apparaît sur le côté droit de l'écran. Tu peux le voir. J'ai sélectionné le rectangle, nous pouvons donc voir ici que toute la propriété du rectangle est visible. Maintenant, nous pouvons tout changer. Supposons que si je dois changer quoi que ce soit dans l'ellipse, je clique simplement sur l'ellipse et sa propriété apparaîtra sur le côté droit de l'écran Supposons que si je dois modifier quelque chose dans erotap, sa propriété apparaîtra sur le côté droit de l'écran OK. Alors, clarifions-le. Et maintenant, je vais répéter tout ce que j'ai accompli. OK, il s'agit donc d'un onglet d'outils. Supposons que vous créiez un rectangle, sorte que sa couche apparaisse sur le côté gauche de l'écran. Il s'agit d'un onglet de couche lequel toutes les couches seront collectées. OK. Et chaque fois que vous devez modifier une couche, vous devez cliquer sur ces objets. Supposons que je vide les NVA, j'ai créé un rectangle et un cercle Dans des toiles vierges, j'ai créé un rectangle et un cercle. Supposons ensuite que je doive changer quoi que ce soit dans le rectangle, alors je vais simplement cliquer sur le rectangle à partir d'ici. Maintenant, je peux régler tous ces paramètres. Ou au lieu de cela, ce que je peux faire, aussi sélectionner mon rectangle dans le calque sexan. C'est un sexan. Ainsi, au lieu de sélectionner directement mon objet, je peux simplement sélectionner mon calque rectangulaire dans le panneau de gauche, et sa propriété apparaîtra sur le côté droit de l'écran. Vous avez donc la méthode des deux. Vous pouvez soit sélectionner votre objet ici, soit le sélectionner dans le calque. OK. C'est une chose fondamentale. Maintenant, colorons ce cercle. couleur rouge OK. OK, très bien. Maintenant, dans la section de la couche, vous verrez que l'ellipse tourne autour du rectangle L'ellipse concerne le rectangle. C'est pourquoi ça ressemble à ça. Mais que se passera-t-il si nous faisons glisser notre ellipse sous le rectangle, que se passera-t-il alors Faisons glisser l'ellipse sous le rectangle. Faisons maintenant glisser le pointeur et vous verrez que le rectangle recouvre l'ellipse. Il s'agit d'un élément fondamental du design. Supposons donc que si vous avez déjà utilisé Photosop, cela vous est familier Je pense que vous le connaissez peut-être. OK. Lors de la création de votre conception UIUX, certains éléments n'apparaissent peut-être pas correctement Vous devez vérifier la bonne disposition des couches par sexe Ainsi, dans cet écran, l' ellipse n'apparaît pas car couche rectangulaire est située autour de la couche elliptique. De plus, la taille de la couche rectangulaire est beaucoup plus grande que celle de l'ellipse. C'est pourquoi ici, l'ellipse n'apparaît pas. Alors, que devons-nous faire ? Nous devons faire glisser l'ellipse au-dessus de la couche rectangulaire. OK ? Bien. Tu dois tout pratiquer avec moi. OK. Donc, chaque fois que je crée quelque chose ici, vous devez également effectuer la même activité sur votre ordinateur. OK ? Et à l' aide de quelques conférences, je maîtriserai votre Figma Je commence ma série de conférences dès le niveau débutant. Donc, si vous connaissez certaines choses de base, vous pouvez ignorer cette partie Mais selon moi, vous devriez regarder la vidéo en entier, vous ne devez rien éviter Je vais augmenter progressivement le niveau de difficulté de mon parcours. Cela commence donc par le niveau débutant et va monter jusqu' au niveau pro. Je vous verrai lors de la prochaine conférence. OK. Au revoir. 3. Properties in Figma: Découvrons maintenant le sexon de la propriété à l'intérieur de la figma Donc, pour apprendre un sexon immobilier, il faut évidemment créer n'importe quoi Créons donc un rectangle. OK. Maintenant, comme je vous l'ai déjà dit chaque fois que vous devez modifier la propriété d'un objet, celui-ci doit être sélectionné. Donc, soit vous sélectionnez directement votre objet à partir d'ici, soit au lieu de cela, vous pouvez passer à la section calque et vous pouvez sélectionner directement votre rectangle à partir d'ici. OK. Donc, quelle que soit la méthode que vous utilisez, il vous suffit de sélectionner objets dans lesquels vous devez modifier quoi que ce soit. OK, maintenant, notre objet a été correctement sélectionné. Maintenant, sa propriété, ses propriétés apparaissent sur le côté droit. OK, alors tout d'abord, parlons du poste. Ainsi, à l'aide de la position, vous pouvez manipuler sa position en faisant glisser votre souris comme ceci Il vous suffit de survoler votre souris. Vous devez placer le pointeur de votre souris sur le X, et son icône changera Zoomons dessus. Passons donc la flèche de ma souris au-dessus du X, et elle change d'icône OK. Maintenant, ce que je peux faire pour diminuer la valeur, je dois faire glisser ma souris vers la gauche. Pour augmenter la valeur, je dois, euh, déplacer ma souris vers la droite. Diminons-le donc en faisant glisser ma souris vers la gauche. OK. OK. Et pareil pendant un certain temps. Mais ce n'est pas si important car vous pouvez facilement changer la position de votre objet, cela n'a donc aucun sens. OK. Nous allons donc sélectionner notre objet et passer aux autres outils. OK. Ainsi, à l' aide de la rotation, vous pouvez facilement faire pivoter votre objet. C'est un retournement. OK. Donc évidemment, vous ne l' obtiendrez pas ici parce que c'est un rectangle. OK. Ainsi, avec l'aide de Flip Opson, vous pouvez retourner horizontalement et verticalement. OK. OK. Il s'agit d'un onglet de dimension, ce qui est le plus important. OK. À partir de là, vous pouvez définir n'importe quelle dimension. Supposons donc que 720 devrait être la largeur et que la hauteur devrait être 1080. OK, il s'agit donc d'une dimension verticale, vous pouvez donc la saisir manuellement. OK. C'est simple. Maintenant, remplissons la couleur. Maintenant, remplissons la couleur. Alors remplissons la couleur orange. OK. Maintenant, vous verrez ici l'opacité Opson. Ici, vous verrez l'opacité Opson. Vous pouvez donc le mettre 70. L'opacité est donc synonyme de transparence. Vous pouvez donc diminuer sa valeur. Tapons 20. OK. Au lieu de cela, nous avons une sorte de coupure dans notre clavier. OK, donc d' abord, tapons 100. OK. Donc, si vous devez modifier la transparence de votre objet, nous avons quelques raccourcis dans notre clavier. Supposons donc que si vous devez régler votre opacité à 70 %, vous devez appuyer sur sept sur votre clavier Tu vois ? OK. Si vous devez annuler quoi que ce soit, vous devez appuyer sur Ctrl Z ou sur Annuler. Control plus Z. OK. Supposons que vous deviez régler votre transparence à 30 %, puis que vous deviez appuyer sur trois sur votre clavier. OK. Appuyons sur Ctrl plus R pour Annuler. Supposons que si vous deviez régler votre transparence à 60 %, vous deviez appuyer sur six. De même, si vous cliquez sur deux, la transparence sera réglée à 20 %. Si vous appuyez sur trois, transparence sera réglée à 30 %. Nous avons donc quelques raccourcis. OK. Au revoir. Maintenant, augmentons-le. Il s'agit donc d'un rectangle. Passons maintenant à une autre option. Ici, nous avons un rayon d'angle. Ici, nous avons un rayon d'angle. Alors, qu'est-ce que cela signifie ? Votre angle SAR deviendra radial. OK, donc tout d'abord, activons ceci. OK. Donc soit je peux mettre n'importe quelle valeur sur le rayon d'angle, soit au lieu de cela, je peux déplacer ma souris vers la gauche et la droite, la gauche et la droite. Mettons donc la valeur de T. Vous pouvez voir que mes arêtes SAP ont été converties en courbure. Au lieu de cela, vous verrez ici un petit point. Vous pouvez également facilement manipuler la courbure à partir d'ici. OK. Et vous remarquerez une chose : tous les bords changent en même temps. OK. Mais que se passe-t-il si vous devez modifier le rayon d' un coin spécifique ? Supposons que vous deviez modifier le rayon d' un coin spécifique. Vous n'avez pas à changer de coin, alors ce que vous allez faire. Donc, pour cela, nous avons ici une option distincte appelée coin individuel. Il s'agit donc d'une option de coin individuel. D'accord, je vais donc vous montrer comment cela fonctionne. Donc, tout d'abord, supprimons la courbure. OK. Nous avons maintenant des arêtes SAP sur tout le rectangle. Sélectionnons-le donc. OK. Supposons que je doive créer une courbure uniquement ici. Et les autres pièces resteraient les mêmes. Comment vais-je m'y prendre alors ? Donc, tout d'abord, je vais sélectionner un rectangle et je vais cliquer sur un coin individuel. Cliquons donc sur un coin individuel. OK. Maintenant, nous avons ici un quatre côtés. Ici, nous avons un quatre côtés. Donc, ce quatre côtés envoie quatre coins. Supposons donc que je doive changer ce coin pour manipuler le réglage. Donc, soit je peux mettre une valeur directement, soit faire glisser ma souris vers la gauche ou la droite. OK. Faisons donc glisser ma souris vers la droite. Vous pouvez voir que j' ai atteint la courbure de la partie spécifique et que la partie restante reste la même. OK. Voici donc comment vous pouvez manipuler avec une option de coin individuelle. OK. Alors maintenant, passons à autre chose. Nous avons ici une option que je vais aborder dans les prochaines conférences. OK, il s'agit d'une option avancée. Avec l'aide de I, vous pouvez désactiver la couleur. Ou à l'aide du bouton moins, vous pouvez supprimer la couleur. Vous pouvez également supprimer la couleur. Alors pressons Andrew. OK. Nous avons maintenant une option Etroke. Cliquons donc sur Estroke. Cliquons sur Estroke. Et ici, il vous posera des questions sur etrokeposision. Il doit être à l'intérieur, au centre ou à l'extérieur. OK. Je pense donc que cela devrait être au centre. OK. Et choisissons son intensité. Trois. Et aussi, nous avons ici la même option qui consiste à faire glisser ma souris comme ça OK. Voici donc comment fonctionne un accident vasculaire cérébral. De même, j'ai un effet secondaire. Donc, avec l'aide de Effect, je peux fournir du sadoblur Nous avons toutes les options que nous aborderons dans les prochaines vidéos, et vous pouvez également les explorer par vous-même. C'est très simple. OK. Vous pouvez ajouter des sados derrière l'objet R. Vous pouvez donner le fils direct de sados. OK. Vous pouvez créer un effet de flou derrière l'objet R. Tu peux tout faire. C'était donc la propriété complète du rectangle. Mais si je crée un cercle ici, j'obtiendrai la propriété en fonction du cercle. Si je crée une flèche, j'obtiendrai les propriétés, selon les flèches. La propriété dépend donc totalement du type d' objet que vous créez. OK ? Vous pouvez donc créer n'importe quel objet, et en fonction de votre objet, propriété s'affichera sur le côté droit. OK. Supposons donc que je crée une étoile. Supposons que je crée une étoile. Je vais donc voir ici nouvelles options que je ne verrai pas dans le rectangle ou le cercle OK. Ainsi, selon SAP, vous obtiendrez des propriétés différentes. OK. Le sexe de la propriété peut donc varier en fonction de votre forme ou de vos objets OK. C'est ainsi que fonctionne Property Secan. Donc, actuellement, je vous enseigne quelques notions de base, et j'améliorerai les niveaux de difficulté lors des prochaines conférences. OK. Alors, au revoir. 4. Shortcuts in Figma: Dans cette conférence en particulier, je vais vous parler de certaines sortes de découpes dans Figma, qui vous permettront de créer un design plus rapidement OK. Tout d'abord, parlons de la façon dont vous pouvez copier n'importe quel objet dans Figma OK. Alors, tout d'abord, parlons de la méthode traditionnelle. OK, la méthode traditionnelle consiste à écrire cliquant sur la souris et vous obtiendrez une copie, puis vous appuierez sur le bouton Ctrl plus V. Voici donc comment vous faites la copie de n'importe quel objet. Il s'agit donc d'une méthode très traditionnelle. Évidemment, nous ne l' utiliserons pas ici. OK, alors supprimons. Arrêtez donc de copier de manière traditionnelle. OK. Nous avons donc maintenant deux méthodes. La première méthode est le bouton Alt. Donc, dans votre clavier, vous devriez avoir le bouton Alt, le bouton Alt. Vous devez donc appuyer sur le bouton Alt. Et à l'aide du clic gauche de la souris, vous devez faire glisser votre objet comme ceci, et il en fera une copie infinie. Juste ce que vous devez faire, vous devez appuyer sur le bouton Alt votre clavier et déplacer votre objet , que vous devez copier. Vous pouvez copier dans n'importe quelle direction. C'est ainsi que vous pouvez faire une copie infinie à l' aide du bouton Alt. Parlons maintenant de la deuxième méthode par laquelle vous pouvez copier l'objet. La deuxième méthode est Control plus D. Sélectionnons cet objet et appuyons sur Control plus D. Control DDD, Control DD DD OK. Voici donc comment vous pouvez créer la copie als à l'aide du bouton Control plus D. OK. Maintenant, il semble tellement cliqueté, alors faisons un zoom arrière Zoomons en arrière sans changer la taille de quoi que ce soit. Vous devez appuyer sur la touche Ctrl de votre clavier et faire défiler la page vers le bas. OK. Voici donc comment vous pouvez augmenter ou diminuer. Voici comment vous pouvez zoomer ou dézoomer sur votre canevas. Sa taille ne change pas dans le monde réel. OK. Nous sommes les seuls à zoomer ou dézoomer à l'aide du bouton de contrôle et de défilement de la souris Ainsi, à l'aide du bouton de commande et du bouton de défilement de votre souris, vous pouvez zoomer et dézoomer. Et tu dois t'assurer que tu pratiques la même chose en regardant ma conférence. Il faut tout pratiquer. OK, supposons que je vous enseigne ces principes fondamentaux. Vous devez donc effectuer toutes ces activités en même temps sur votre ordinateur. Sinon, vous ne comprendrez pas mon point de vue lors des prochaines conférences. Alors, s'il te plaît, entraîne-toi un peu avec moi. OK. Supprimons-le donc. OK. Nous avons donc appris comment copier. Nous avons donc deux méthodes. La première méthode est Alt plus souris. Tout en appuyant sur le bouton Alt, nous devons faire glisser notre objet, et c'est ainsi que nous pouvons terminer la copie ou, au lieu de cela, sélectionner simplement votre objet et appuyer sur Ctrl plus B. Et cela fera une copie infinie. Et pour effectuer un zoom arrière, appuyons sur le bouton Ctrl votre clavier, puis défilons vers le bas et vers le bas. Voyons maintenant comment effectuer une sélection multiple dans votre projet. Supposons que vous deviez sélectionner plusieurs objets en même temps, alors comment vous pouvez le faire. OK, donc avec l' aide de la touche Shift, vous pouvez facilement le faire. Appuyez donc sur la touche Shift de votre clavier, touche Shift de votre clavier, et sélectionnons les objets que vous devez sélectionner. Nous allons donc sélectionner tous les objets. Maintenant tu vas y réfléchir. Nous pouvons le faire facilement en faisant glisser ma souris comme ça, évidemment, vous pouvez le faire comme ça Mais que se passerait-il si nous n'avions pas à sélectionner l'étoile ? Si nous sélectionnons tout comme ça, alors tous les objets sont sélectionnés. Mais que se passera-t-il si je n'ai pas à sélectionner l'étoile, comment dois-je procéder ? Je vais simplement présider la touche et sélectionner les objets dans lesquels je dois changer quoi Et ici, je ne sélectionne pas une étoile. Changeons la couleur pour que vous puissiez voir les modifications. Voici donc comment vous pouvez sélectionner plusieurs objets à l'aide de la touche Shift. De plus, nous avons une autre utilisation de la touche Shift à l'intérieur du figma. OK. Supposons par exemple que si vous activez l'outil rectangle, vous pouvez facilement créer un rectangle, euh, avec une hauteur et une largeur différentes. OK. Mais si vous utilisez la touche Shift en même temps, cela la rendra symétrique. Et maintenant, si vous déplacez votre souris, cela ne changera pas. Cela s'explique par le fait que Petra a été enregistré. OK. Ainsi, chaque fois que vous utiliserez la touche Shift, elle vous guidera pour créer votre objet symétrique. OK. Donc, sans la touche Shift, je peux créer un rectangle comme celui-ci. Mais si j'utilise la touche Shift pour créer un rectangle, cela conservera cela conservera rapport hauteur/largeur spécifique sur l' ensemble du dessin. R, supposons que je crée une ligne comme celle-ci. Mais avec l'aide de la touche Shift, que se passera-t-il si je crée une ligne à l'aide de la touche Shift, soit elle créera une ligne horizontale pure, soit une ligne verticale pure. Ou au lieu de cela, il peut fournir une ligne à 45 degrés, mais il ne créera pas de ligne aléatoire. Si j'utilise la touche Shift, soit elle sera purement horizontale soit elle sera à 45 degrés, soit elle sera verticale. Mais si je n'utilise pas la touche Shift lors de la création d'une ligne, je peux créer une ligne dans n'importe quelle direction. Et une fois que j'appuie sur la touche Shift. Il a certaines limites. OK. Supposons donc que vous deviez créer des diagrammes de lignes droites sans compromettre les dimensions, vous devez utiliser la touche Sift Découvrons maintenant le regroupement. Supposons que vous ayez créé des objets, un ensemble d'objets, et que vous deviez les regrouper. Ensuite, avec l'aide de Control plus G, vous pouvez facilement le faire. Supposons que j'aie créé un rectangle, une ellipse et un atar. Ainsi, sur le côté gauche, couche sexon, vous pouvez voir que toutes les couches sont créées individuellement OK. Mais pour le regroupement, je dois sélectionner tous les objets. OK, alors sélectionnons Sift, Shift, Shift. À l'aide de la touche Shift, j'ai sélectionné toutes les couches que vous pouvez vérifier ici. Toutes les couches sont sélectionnées. Maintenant, je dois appuyer sur le bouton Ctrl plus G de mon clavier pour les regrouper. Appuyons donc sur Ctrl plus G, désolé, Contrôle plus G. Maintenant, le groupe a été créé avec succès. Maintenant, si je veux le développer, vous pouvez voir qu' à l'intérieur du groupe, à l'intérieur du groupe, j'ai une ellipse et un rectangle C'est ainsi que vous pouvez regrouper n'importe quel article. OK. Supposons donc que vous ayez créé, supposons que vous ayez créé un rectangle et qu'après cela, vous tapez quelque chose ici. OK ? Oh, vous avez créé un design comme celui-ci. Et si vous devez les fusionner, sélectionnez les deux objets et appuyez sur Ctrl plus G pour les regrouper. OK. Parlons maintenant la sélection spécifique de l'objet. OK. Créons donc un grand rectangle à l'intérieur de ce rectangle, créons un autre rectangle. Changeons. À l'intérieur de ce rectangle, créons un polygone et à l'intérieur du polygone, créons le cercle OK, très bien. Supposons maintenant que vous deviez changer quoi que ce soit dans Circle. Supposons que si vous devez changer quoi que ce soit dans le cercle, vous devez évidemment sélectionner le cercle correctement. OK. Actuellement, toutes les couches sont individuelles. Ils ne sont pas regroupés. OK. Ainsi, vous pouvez facilement sélectionner un cercle à tout moment et modifier n'importe quoi dans le cercle. OK. Mais, mais, mais. Si nous les regroupons, c' est un compliment. Control plus G. Maintenant, le groupe a été créé avec succès. Le groupe a été créé avec succès. Maintenant, si vous devez sélectionner le cercle, cliquez sur le cercle, il ne sélectionne pas pour le moment. Vous devez double-cliquer à l' aide de la souris, puis le cercle sélectionnera, mais il n'est pas nécessaire que cela fonctionne dans toutes les situations. OK. Passons donc au design pratique. Il s'agit d'un dessin. OK. Supposons donc que je doive sélectionner cette image de garçon, elle ne sélectionne pas correctement. C'est une boîte carrée que nous sélectionnons. OK. Donc, pour la sélection directe, vous devez appuyer sur le bouton Ctrl et déplacer votre souris sur l'objet. Ensuite, vous pouvez voir que vous pouvez facilement sélectionner n'importe quel objet. Il suffit d'appuyer sur le bouton de commande. Vous pouvez sélectionner une pièce spécifique. Supposons que vous deviez sélectionner du texte. Ainsi, en appuyant sur le bouton Ctrl , passez la souris sur le texte et cliquez sur le texte sélectionné. Si vous devez sélectionner UI UX Designer. Donc, si vous le sélectionnez normalement, cela signifie qu'il ne sélectionne pas, vous pouvez voir que je clique, mais il ne sélectionne pas. Mais avec l'aide du bouton de commande, je peux facilement le sélectionner. Ainsi, à l'aide du bouton de contrôle, vous pouvez sélectionner n'importe quoi avec la souris. OK. Donc, pour une sélection spécifique, vous devez utiliser le bouton de commande. Dans le cas contraire, il sélectionnera n'importe quoi. N'utilisons pas le bouton de commande. Et supposons que je doive sélectionner Afficher plus. Je clique donc sur Afficher plus et il ne sélectionne pas. Au lieu de Afficher plus, les cases carrées ont été sélectionnées. Ce n'est donc pas exact, non ? Et cela prend du temps. Maintenant, appuyons sur le bouton Ctrl et passons la souris sur la vue plus détaillée Maintenant, cliquons. C'est simple. OK. Ainsi, à l'aide du bouton de commande, vous pouvez facilement sélectionner une pièce spécifique. Donc, de la même manière, si vous devez sélectionner le cercle, vous devez appuyer sur le bouton Ctrl, puis vous pouvez facilement sélectionner le cercle. Supposons que vous deviez sélectionner la sève de la pyramide. Ensuite, sans le bouton de contrôle, essayons de sélectionner. Il ne sélectionne pas correctement. Maintenant, appuyons sur le bouton Ctrl du clavier et passons le pointeur de la souris Vous pouvez maintenant sélectionner la sève triangulaire. OK. Supposons que vous deviez sélectionner ce rectangle radar. Ensuite, si vous le faites sans appuyer sur le bouton de commande, cela ne fonctionnera pas correctement. Mais si vous utilisez le bouton de commande de votre clavier, vous pouvez désormais facilement sélectionner une partie spécifique. Donc, pour sélectionner correctement une pièce spécifique, vous devez utiliser le bouton de commande. Et tout en appuyant sur le bouton Ctrl, vous devez passer la souris sur n'importe quel objet Voyons donc comment cela fonctionnera. Appuyons sur le bouton Ctrl. Et tout en appuyant sur le bouton Ctrl, je passe ma souris sur des objets alludiens, et on me demande de sélectionner n' Voici donc comment vous pouvez sélectionner une pièce spécifique à l'aide du contrôle. Donc, si vous aimez cette conférence, n'oubliez pas de me donner une bonne note positive et de me faire part de vos commentaires. OK, Bee. 5. Alignment in Figma: Bonjour à tous, dans cette conférence en particulier, je vais vous apprendre comment utiliser l'alignement dans Figma OK, alors sans perdre de temps, commençons notre vidéo. OK. Supposons donc que nous ayons quatre éléments , un, deux, trois et quatre. Mais ceux-ci ne sont pas correctement alignés. OK. Donc, si nous devons l'aligner correctement, nous devons évidemment sélectionner tous les éléments. OK. Et sur le côté droit, vous verrez l'alignement Opson. OK. Nous avons donc ici différents types d'options d'alignement. Supposons que si vous deviez aligner à partir de la ligne de référence gauche, cela ressemblera à ceci. Appuyons sur Control plus. Si vous devez les aligner à partir du centre horizontal, cela ressemblera à ceci. De même, vous pouvez explorer toutes les options, mais nous les utiliserons généralement, mais nous utiliserons généralement l' alignement au centre horizontal et l'alignement au centre vertical. OK. Sélectionnons donc tous les éléments, et tout d'abord, créons un centre commun. Cliquons sur Aligner le centre vertical. Vous verrez maintenant que tous les éléments sont correctement disposés avec un centre commun. OK. Mais si vous le remarquez ici, l'écart entre chaque élément est incohérent. OK. OK. Donc, pour résoudre ce problème, nous verrons ici chaque fois que vous sélectionnerez tous les éléments, ici vous verrez cette icône, rein. Ce qui indique que l'égalité passe entre tous les éléments. OK. Ainsi, chaque fois que vous cliquez sur Reline, l'écart entre tous les éléments devient constant D'accord, vous pouvez facilement le modifier à partir d'ici. Bien. Aussi, OK. C'est ainsi que vous pouvez créer un centre commun. OK. Créons maintenant un bouton. Tout d'abord, créons un rectangle. Utilisons maintenant le texte. Télécharger. Maintenant, voici le texte de notre bouton. Augmentons la taille du bouton. Maintenant, ce que nous allons faire, c'est fusionner les deux éléments. Donc, au lieu de le faire manuellement, au lieu de le faire manuellement, vous pouvez également faire comme ça. Sélectionnez l'élément. Maintenant, tout d'abord, nous devons créer un centre vertical. Ensuite, nous devons sélectionner un centre horizontal. Il l' organisera automatiquement. OK. De même, si nous devons créer un onglet d'accueil pour n'importe quel site Web , nous créerons des fonctionnalités d' accueil, contact à ce sujet n'est qu'un texte. Ce n'est qu'un texte. Et nous avons ici un rectangle. OK, nous devons donc les fusionner. OK. Donc, au lieu de tout faire manuellement, nous allons faire exactement ce que nous allons faire. Tout d'abord, nous allons sélectionner tout le texte, les aligner au centre commun. OK. Nous allons maintenant cliquer sur une ligne égale ou un espacement égal. OK. Nous allons maintenant tous les sélectionner à l'intérieur de ce rectangle. Nous allons tout sélectionner. Encore une fois, nous allons cliquer sur aligner le centre vertical. OK. Vous pouvez maintenant voir que nous les avons correctement alignés Vous n'avez donc pas à effectuer de travail manuel si vous savez comment utiliser l'alignement. D'accord ? Par exemple, vous avez créé un rectangle, vous avez créé un cercle. OK. Vous avez créé un autre rectangle. Disons la couleur rouge. OK. Maintenant, ce que vous pouvez faire, c'est sélectionner à la fois l'élément, placer au centre commun, d'accord, faire comme ça. Créez un centre commun. Sélectionnez tous les éléments pour les placer au centre commun. OK. C'est ainsi que vous pouvez créer n'importe quoi. C'est ainsi que vous pouvez jouer avec l'alignement. OK. Donc, si vous aimez cette conférence, n'oubliez pas de me donner une bonne note positive. Au revoir. 6. What is Wireframe, Mockup & Prototype : Bonjour, tout le monde. vous souhaite donc à tous la bienvenue dans ma série complète de master sur Pigma UIUX Design Dans cette conférence particulière, je vais vous apprendre ce que sont la maquette filaire et le Alors, sans perdre de temps, commençons notre. OK. Vous verrez donc ici la préimage, première, la deuxième et la troisième OK, donc le premier est un fil filaire. Châssis. Le wireframe est donc un schéma approximatif de votre application ou de votre site Web. OK ? Quoi que vous allez créer, vous devez créer un schéma approximatif de votre application. OK ? Bien. Comme il s' agit d'un diagramme approximatif, vous n'avez pas besoin de mesurer quoi que ce soit. Vous pouvez même le créer à l'aide d'un stylo et d'un papier. En gros, vous devez transmettre votre idée à l'aide d'un schéma approximatif. OK. Ainsi, chaque fois que vous créerez un wireframe, vos autres coéquipiers pourront comprendre votre idée très facilement. OK. À l' aide du wireframe, vous pouvez partager votre idée avec les parties prenantes, le PDG OK. On peut donc dire que le wireframe est la phase initiale de conception Découvrons maintenant ce qu'est Mockup Mkup. La maquette est donc une meilleure représentation de votre application. OK. On peut dire qu'il s'agit d'une version avancée du wireframe. Voici donc un exemple de maquette. Il s'agit d'une version réaliste de votre application, et elle est en fait plus belle que le wireframe. Wireframe était le schéma de base de votre application. D'autre part, la maquette est une version plus réaliste de votre application OK. Et voici également une version Web de notre application OK. C'est le premier, c'est le second. La principale différence est donc qu'il s'agit d'un mauvais design. Il s'agit d'un design haut de gamme. D'accord, alors pourquoi ça a l' air médiocre et pourquoi ça a l'air plus réaliste à cause de la fidélité. Ici, nous allons voir le terme Fality. Il s'agit donc d'une faible fidélité. Et ce design est de haute fidélité. La fidélité est donc synonyme de réalisme. Si votre design est plus enclin au réalisme, vous direz haute fidélité. Si votre design est moins réaliste, vous direz faible fidélité. Il s'agit donc d'un autre exemple de faible fidélité et de haute fidélité. Cela semble plus réaliste. C'est pourquoi on peut dire qu'il s'agit d'une maquette de haute fidélité. C'est une maquette de basse fidélité. Enfin, nous avons une dernière étape qui est le prototypage, le prototypage Prototypage ou prototype. Où vous jouerez l'intégralité de votre design. Où vous jouerez l'intégralité de votre design. Jouons donc à n'importe quel design. Donc, au stade du prototype, en gros, ce que vous allez faire, connecter de nombreuses pages, comme celle-ci. OK. Supposons que si je clique sur discuter avec Colin, cette page devrait apparaître. Si je clique sur Ambassadeur, cela devrait apparaître. D'accord, vous pouvez donc attribuer la relation entre toutes les pages. C'est un processus qui prend du temps. OK. OK. Vous pouvez donc également jouer à votre prototype. Alors jouons, et il est en train de charger. OK, les gars, donc au stade du prototype, vous pouvez réellement jouer à votre site Web en temps réel. Alors, cliquons sur « at » avec Colin. Vous allez maintenant voir apparaître une nouvelle page. Cliquons sur Créer un compte, inscription, sur Vérifier l'OTP, puis sur Afficher le profil de Colin D'accord, planifiez le calendrier des réunions, passez au planificateur OK. Vous remarquerez donc ici que je me déplace dans toutes les pages à l'aide d'un simple clic, il s'agit d'un prototype. J'ai donc tout couvert, le wireframe, la maquette et le Ainsi, chaque fois que vous créerez un projet. Vous devez d'abord créer un wireframe, qui est un schéma approximatif Et après cela, vous devez créer une version plus réaliste de votre conception de base dans le logiciel. Ensuite, vous devez créer d'autres pages et lier toutes les pages elles afin de pouvoir les exécuter en temps réel. D'accord, donc si vous avez apprécié cette conférence, n'oubliez pas de me donner une bonne note positive afin que je puisse me motiver. OK. Au revoir. 7. What is Component in Figma. How to Create it: Bonjour, tout le monde. vous souhaite donc à tous la bienvenue dans ma série complète de master sur le design UIUX de Pigma Ainsi, dans cette conférence particulière, nous allons apprendre ce qu' est un composant et comment nous pouvons le créer. OK, alors tout d'abord, parlons de sa définition. Les composants Pigma sont donc des éléments d'interface utilisateur réutilisables, comme une icône de bouton et des barres Avigan, ce qui signifie vous créerez votre composant pour une seule fois, et chaque fois que vous devrez l'utiliser, vous le ferez simplement glisser dans votre conception OK. Supposons qu'il s'agisse d'un vrai projet. Il s' agit d'un véritable projet. Et ici, vous pouvez voir que j' ai utilisé le même bouton plusieurs fois. J'ai utilisé le même bouton plusieurs fois. Ainsi, chaque fois que vous créez un design, vous créerez chaque bouton depuis le tout début chaque fois, vous ne le ferez pas. Au lieu de cela, ce que vous allez faire, créer votre bouton. Vous ne créerez votre bouton qu'une seule fois. Et après cela, chaque fois qu'il est nécessaire de l'utiliser, vous suffit de le faire glisser. D'accord, c'est ce qu' on appelle un composant. Le composant est donc un élément réutilisable. Qu'est-ce qui est réutilisable ? Parce que vous le créez pour une seule fois et que vous pouvez l'utiliser pour toujours. D'accord ? Le bouton est donc un bon exemple de composant. Il s'agit d'un composant. Je peux donc utiliser ce bouton plusieurs fois dans ma conception. Donc, si je dois l'utiliser sur 50 pages différentes, je peux facilement l'utiliser car il s'agit d'un composant. C'est une beauté. OK. Maintenant, ici, tu dois comprendre une chose. Qu'est-ce qu'un composant et qu'est-ce qu'une instance ? OK, donc tu vas comprendre ce truc. OK. Mais avant cela. Mais avant cela, créons un composant. Ok, vas-y, d'accord. Je vais maintenant créer un composant. Tout d'abord, prenons un rectangle. Créons. Vous pouvez donner un rayon d'angle, vous pouvez sentir la couleur. Vous pouvez maintenant ajouter un bouton de texte, augmenter la taille. Maintenant, sur le côté gauche, vous verrez deux couches différentes. premier calque est pour le texte, second pour le rectangle. D'accord ? Maintenant, ce que nous allons faire, fusionner les deux éléments. Tout d'abord, sélectionnons l' élément après avoir cliqué dessus avec le bouton droit de la souris. Et ici, vous verrez le bouton de création de composant. Vous devez donc cliquer sur Créer un composant. OK. Maintenant, vous pouvez voir que nous avons une nouvelle icône comme celle-ci. Il s'agit d'une icône de composant. Il s'agit d'une icône de composant. Chaque fois que vous créez un composant, son icône apparaît comme suit. D'accord ? Je peux donc utiliser ce composant plusieurs fois dans ma conception. OK. Prenons donc un cadre. Prenons un cadre. OK. Et supposons que je doive utiliser ce bouton ici. OK. Alors, nombreux d'entre vous, nous y réfléchirons. Nous pouvons copier, nous pouvons copier et nous pouvons le coller ici comme ça. Mais ce n'est pas une bonne méthode. Tu n'es pas obligée de faire ça. Au lieu de cela, que devez-vous faire ? Chaque fois que vous devez utiliser un composant, vous devez passer à Asset Sexon Tu dois passer à l'examen des actifs. Vous n'êtes pas obligé de le copier. Vous n'êtes pas obligé de le copier. Tu dois utiliser Asset Sexton de ta Figma. Ainsi, lorsque vous passerez aux actifs, vous verrez ici toute la bibliothèque. Ici, vous verrez toute la bibliothèque. Il faut cliquer dessus. Et vous verrez ici tous les composants que vous avez récemment créés. C'est donc mon composant. Alors, qu'est-ce que je dois faire ? Je vais cliquer dessus. Et ici, vous verrez l'instance Inset Vous allez maintenant écouter une instance de terme. Cliquons donc sur Instance. OK. OK. Maintenant, tu dois écouter très attentivement. C'est ce qu'on appelle le composant parent. C'est ce qu'on appelle le composant parent. Et c'est ce qu'on appelle une instance. Vous pouvez dire enfant, parent, enfant, parent, enfant. OK. Donc, quel que soit le changement que vous ferez dans le composant parent, son reflet apparaîtra sur l'instance, d'accord ? OK. Quelle que soit la modification que vous appliquerez dans le composant parent, son effet s'appliquera automatiquement au composant enfant, qui est une instance. OK. C'est donc mon composant parent, sélectionnons-le. OK. Supposons que je change de couleur. Je peux voir ça. Quelle que soit la couleur que j' appliquerai dans le composant parent, la même couleur s'appliquera également à l'enfant. Quoi que je fasse ici, réflexion apparaîtra également ici Pourquoi avez-vous une quelconque raison pour laquelle cela se produit ? Parce que c'est le composant parent, le parent, le père, le parent. Et c'est un composant enfant. Dans figma, au lieu d'appeler un enfant, on peut dire « exemple C'est une instance. OK. Ainsi, quelle que soit la modification que vous appliquerez au composant parent, elle s'appliquera également à l' instance ou à l'enfant. OK. Mais si vous voulez changer d'enfant, cela ne se reflétera pas sur le parent Il s'agit d'un concept essentiel. Tu dois y réfléchir. Quel que soit le changement que vous ferez chez le parent, son effet s'appliquera également à l'enfant. Mais quel que soit le changement que vous ferez sur l'enfant, son reflet n'apparaîtra pas sur le parent OK. OK, très bien. Passons maintenant au sujet de l'appartement. Mm. Vous verrez donc ici. Il s'agit d'un élément essentiel. Il s'agit d'un élément essentiel. Tu peux dire parent. Composant parent également appelé composant principal. Composant principal Et avec l'aide du composant parent, vous allez créer plusieurs enfants. Avec l'aide d'un parent, vous allez créer plusieurs enfants. Et au lieu de l'appeler enfant, vous pouvez dire que c'est une instance. OK. Donc, tout d'abord, clarifions chaque chose. OK. Supposons que vous ayez créé un composant. Supposons que vous ayez créé un composant. Ainsi, quel que soit le composant que vous avez créé, vous l'appellerez composant principal. Ainsi, chaque fois que vous créerez un composant, vous direz qu'il s'agit d' un composant principal. Composant principal également appelé composant parent car il s'agit d'un composant de base. Et chaque fois que vous utiliserez ce composant principal dans votre cadre, chaque fois que vous l'utiliserez. Dans ce cas, vous pouvez l'appeler instance. OK. Tu peux appeler ça un enfant. OK. Maintenant, la plus belle pièce d' attraction est. Quelle que soit la modification que vous appliquerez dans le composant principal. Son reflet apparaîtra également ici. OK. Mais quelle que soit la modification que vous appliquerez par exemple, son effet n' apparaîtra pas sur le composant principal. C'est une chose essentielle que vous devez apprendre. OK. OK, très bien. Euh, d'accord. Supprimons donc tout. Et il s'agit d'un composant que nous avons récemment créé. Ainsi, chaque fois que vous créez un composant, vous pouvez l'appeler. Il s'agit d'un élément essentiel. Il s'agit d'un élément essentiel. Tu peux dire parent. On peut dire composant principal ou parent, les deux choses sont identiques. Et chaque fois que vous devez l'utiliser dans votre cadre, vous devez passer à Asset Sexan OK. Créons donc un cadre. Créons n'importe quel cadre. Maintenant, si vous devez utiliser ce composant dans ce cadre, vous allez accéder à la ressource Sexan et à l'intérieur ressource, vous verrez la bibliothèque et à l'intérieur de la bibliothèque, vous verrez votre bouton Donc, si vous cliquez dessus, vous obtiendrez le composant enfant ou le composant parent. Vous obtiendrez un composant pour enfant. OK. Et vous pouvez créer plusieurs versions de votre composant enfant. OK. Supposons donc que nous l'utilisions trop souvent. OK. De même, nous pourrions avoir 50 pages différentes où j'ai utilisé ce bouton plusieurs fois. OK. OK. Créons plusieurs cadres. Supposons que j'ai plusieurs cadres, où j'ai utilisé ce bouton. OK. Supposons que je doive changer la couleur du bouton dans toutes les pages, comment puis-je le faire ? Je vais simplement passer à l'élément principal. Je vais simplement passer à l'élément principal. Et quel que soit le changement que je vais apporter ici, son reflet apparaîtra ici, ici. OK. Donc, au lieu de changer la couleur de chaque bouton individuellement, cela a évidemment pris du temps. Au lieu de suivre cette méthode, ce que nous allons faire, nous allons simplement passer au composant principal. Il s'agit de l'élément principal. S'il s'agit de composants mineurs. Et quel que soit le changement que je vais apporter ici, c'est le reflet qui apparaîtra également ici. Changeons donc la couleur du texte. Changeons la couleur du texte. Tu peux le voir. Appliquons un trait, augmentons l'épaisseur. Changeons le bouton de couleur. OK. Voici donc comment vous pouvez appliquer le composant. Le principal avantage du composant est que vous n'avez pas à créer chaque bouton à chaque fois. Vous créerez n'importe quel composant pour une seule fois et vous pourrez l'utiliser chaque fois que vous en aurez besoin. C'est donc un processus qui permet de gagner du temps. OK. Supposons que vous ayez un site Web comme celui-ci où vous avez créé 50 pages différentes. Supposons que votre supérieur vous demande de changer la couleur de tous les boutons. Ensuite, si vous y allez manuellement, il faudra une journée entière pour changer de couleur. voyez, si vous changez la couleur de chaque bouton individuellement, cela prendra beaucoup de temps, peut-être un jour ou deux jours. OK. Mais si vous avez créé un composant , d'accord, que ferez-vous ? Vous allez accéder à son composant parent. OK. Il s'agit d'un composant enfant. Il s'agit d'un composant enfant. De toute évidence, nous devrions avoir un élément principal. Nous devrions avoir un élément principal. Nous devons donc passer au composant principal et quel que soit le changement que nous allons apporter ici, peu importe ce que nous changeons de couleur, de texte, de taille. Quelle que soit la modification que vous ferez dans le composant principal, son reflet apparaîtra sur l'ensemble du design, peu importe ce que vous avez utilisé ce bouton en 50 ou 100 pages. Avec ce petit effort, vous pouvez modifier la propriété du bouton dans toutes les pages. D'accord ? C'est la beauté du composant. Et si vous ne voulez pas créer de composant, alors pour une tâche très simple, vous devez effectuer chaque processus manuellement. Si vous ne voulez pas créer de composant, alors je vous demanderai de changer la couleur du bouton, puis ce que vous ferez, vous irez ici, puis vous changerez de couleur et vous appliquerez simplement la même chose sur l'ensemble du design. C'est un processus qui prend du temps. OK. Donc, au lieu de le faire, créez simplement un composant, passez à actif et utilisez le composant que vous souhaitez utiliser. OK. Et à l' aide du composant, vous pouvez modifier l'ensemble de votre design en quelques clics. OK. J'espère donc que vous avez apprécié cette conférence. Donc, si le studio vous a aidé, vous pouvez me donner une bonne note positive et un commentaire. 8. Variables in Figma: Bonjour, tout le monde. Je vous souhaite donc à tous la bienvenue dans ma série complète sur le design UIUX de Figma Dans cette conférence, nous allons donc apprendre ce qui est variable dans Figma et comment nous pouvons le créer très facilement Dans une conférence précédente, nous avons déjà abordé ce qu'est un composant. Le composant était donc un élément réutilisable comme un bouton. Pourquoi est-il réutilisable ? Parce que nous n'investirons notre temps et nos efforts qu' une seule fois et ensuite, chaque fois que cela sera nécessaire, nous pourrons facilement utiliser Dragon Drop. C'est pourquoi on l'appelle élément réutilisable. OK ? Le bouton est donc le meilleur exemple. Le bouton est le meilleur exemple de composant, c'est donc un composant. Mais qu'est-ce qui sera variable ? Si je veux créer une variante différente de ce bouton. Tu vois, c'est mon composant. C'est mon composant. Si je veux créer, il s'agit d'une variation différente en fonction de la couleur du texte, de la forme et de la taille. OK. Si je veux créer une variante différente de ce bouton, cela s'appelle variable. OK, je pense que tu as compris mon point de vue. Voyons maintenant comment nous pouvons le créer très facilement. Donc, tout d'abord, vous devez passer à blanc et vous devez créer un enchevêtrement, donner un rayon d'angle, couleur pâle et ajouter un effet de trait. Maintenant, ajoutons un bouton de texte, bouton. OK. OK, très bien. Je n'ai donc pas encore créé de composant. Texte, texte et bouton, les deux sont séparés ici. OK ? Je ne l'ai pas converti en composant. OK. Tout d'abord, ce que je vais faire, c'est créer ses différentes variantes. Je vais donc sélectionner correctement les deux couches, puis je vais dupliquer. Ainsi, à l'aide de l'ancien bouton, vous pouvez facilement copier le bouton. OK. Maintenant, je dois créer une variante différente. Nous devons créer une variante différente. Disons donc que si j'ai une couleur rouge foncé, autres variations seraient une couleur rouge clair. OK. C'est donc mon deuxième bouton. Faisons en sorte que ce soit léger. OK. De même, changeons la couleur du bouton en vert. OK ? Et je vais copier le même code couleur dans le Fest ici. Maintenant, faisons-en une version allégée. Je pense que tu comprends mon point de vue. En fait, ce que je fais, créer un bouton principal. C'est mon bouton principal. Et me voilà en train de créer mon bouton secondaire. Le bouton secondaire est donc indiqué par une couleur claire. Le bouton principal est indiqué par la cible. OK. Vous pouvez créer une variation différente sur la base d'un texte différent, d' forme différente, d'une taille différente. OK. Je crée donc ici différentes variations de composants sur la base de la couleur uniquement. OK, ici je crée ici je crée ici je crée une variation ici je crée une variation sur la base de la couleur OK. Vous pouvez créer une variation différente du composant en fonction de la taille, de la forme également. OK. Allons-y, sélectionnons-le. Mettez la couleur bleue, mettez la couleur bleue, copiez son code couleur et collez-le dans le second. Et fais-le léger. Rends-le léger. OK. Donc, actuellement, nous avons une version plus sombre, version plus foncée et une version plus claire, maintenant nous devons convertir chaque élément en composant OK. Maintenant, ici, tu dois faire attention. Tout d'abord, nous aborderons le bouton et le texte comme celui-ci. Après cela, nous allons créer un composant. OK. Ainsi, chaque fois que vous convertirez deux éléments en un seul composant, vous verrez cette icône ici. OK ? Maintenant, sélectionnons le bouton et le texte du deuxième élément. Maintenant, dans la section de gauche, vous pouvez voir que l' élément de texte a été sélectionné. Et les rectangles ont été correctement sélectionnés. OK. Quel que soit l'élément que vous sélectionnez, vous devez donc vérifier que vous sélectionnez la bonne couche. Sinon, vous risquez de faire une erreur. OK. Ainsi, chaque fois que vous sélectionnez un élément, vous devez vérifier dans le panneau de gauche. Vous sélectionnez le bon élément ou non. OK ? Convertissons donc à la fois l' élément en composant. C'est la même chose que nous devons faire ici, lire le composant. Créez un composant. Créez un composant. OK. Vous pouvez maintenant voir que nous avons six composants différents. Nous avons ici six composants différents. Maintenant, nous devons les renommer de manière intelligente, d'accord. Vous devez donc suivre n'importe quelle séquence lors du renommage. OK. Donc, par exemple, c'est mon composant 1, c'est mon composant 1. Je vais donc double-cliquer sur le texte, et maintenant je peux le renommer Mais avant de renommer, vous devez comprendre que c'est la base du renommage Alors maintenant, je vais vous apprendre comment renommer votre ordinateur OK. Donc ça devrait être comme un bouton. Tu dois faire attention ici, d'accord ? Bouton, bouton, barre oblique. Bouton Mm, barre oblique, rouge, barre oblique active OK, donc tu dois le renommer comme ça. OK. Alors maintenant, nous allons comprendre ce que c'est. Donc, slash signifie dossier. Chaque fois que vous utiliserez une barre oblique, Pigma prédira qu'il s' agit d'une propriété différente OK. Slash est donc un dossier. Slash est un dossier. Donc, tout d'abord, vous devez taper le bouton. En second lieu, vous devez taper la couleur. En troisième lieu, vous devez saisir le statut actif ou inactif. OK, alors explorons-le de manière très pratique afin que vous le compreniez très facilement. OK, nous devons donc suivre le même ordre. Nous devons suivre le même ordre. Bouton, puis rouge, qui est de couleur, et ensuite, statut, actif ou inactif. OK, nous devons donc suivre la même séquence. OK. Tout d'abord, renommons ce composant en un OK. Maintenant, tapons. Tapons le bouton. Actif. D'accord, parce que c' est un activiste. OK. De même, je dois le copier, et je vais passer au deuxième bouton et son nom doit être bouton, rouge et inactif car la couleur claire signifie son inactivation OK. Vous pouvez également saisir «   désactiver » ou « activer ». Vous pouvez également taper « activé » ou désactivé » au lieu de «   actif » ou « inactif ». Il n'est pas nécessaire d' utiliser du texte actif ou inactif. Au lieu d'être actif ou inactif, au lieu d'être actif ou inactif, vous pouvez utiliser « off », vous pouvez utiliser « activer ». Vous pouvez utiliser Disable pour être libre. Tu peux utiliser n'importe quoi. Mais quelle que soit la séquence que vous avez assignée dans le premier bouton, vous devez suivre la même séquence sur l'ensemble du bouton. Sinon, cela ne fonctionnera pas. OK ? Même vous n'avez pas à faire de faute d'orthographe. OK ? Vous n'avez pas à faire de faute d'orthographe. Sinon, cela veillera à ce que cela soit cohérent. Vous pouvez donc voir ce bouton ici. Rouge actif. OK. Et ici vous verrez le bouton, barre oblique rouge, inactif. OK. Bien. Vous devez faire la même chose avec les autres boutons exemple si je passe au composant trois, puis je dois renommer le bouton, puis le bouton vert, puis le bouton actif OK, très bien. Copions, pareil. Passez au composant 4, renommez-le comme bouton, bouton vert, bouton, vert et inactiviste inactif Même chose que vous avez à faire avec le composant 5 Bouton, bleu et actif. Copiez le même texte et collez-le dans le composant six. Bouton, bleu et inactif. Bien. J'ai donc créé six composants différents avec un renommage approprié OK. Maintenant, si vous avez fait très correctement, que va-t-il se passer ? Vous devez sélectionner tous les composants, et si vous les avez très bien exécutés, vous verrez Opson like, puis Opson Combinez en tant que variante. Combinez en tant que variante. OK. Vous devez donc cliquer sur Combiner en tant que variante. Bien. Cliquez sur Combiner en tant que variante. Maintenant, tous les composants sont convertis en un seul gros composant. OK. Maintenant, nous avons une meilleure partie. Propriété une propriété deux. Donc, si vous avez effectué toutes les activités correctement, nous obtiendrons enfin la propriété 1, propriété 1 et la propriété 2. Vous souvenez-vous que nous avons ajouté une icône de barre oblique lors du changement de nom ? OK. C'était donc pour la propriété. La première propriété est donc synonyme de couleur. La deuxième propriété correspond à actif ou inactif. OK. Alors maintenant, supposons que je doive utiliser un composant. OK. Il s'agit d'un nouveau cadre dans lequel je dois utiliser un composant que j' ai créé récemment. Dans un premier temps, je vais passer à Asset Sexon. Tout d'abord, je vais passer à l'examen des actifs. Passons donc à l'actif. Dans Asset, je vais voir ici tous les composants que j'ai créés récemment. Il s'agit donc d'un composant. Cliquons dessus. Instance interne. OK. Il s'agit donc d'un bouton que j'ai créé récemment. OK. Mais le plus beau, c'est que je vais obtenir la propriété 1 et la propriété OK. Donc, la propriété 1 est synonyme de couleur, donc je peux passer à n'importe quelle couleur : vert, bleu. OK. Et supposons que je doive me procurer une version plus claire de la couleur bleue. Ensuite, je passerai à la couleur bleue, et dans la deuxième propriété, je passerai à la couleur militante. OK. Ainsi, chaque fois que vous utiliserez l'icône de barre oblique pour renommer D'accord, il sera converti en propriété. OK, supposons que vous renommez votre bouton comme bouton, bouton, barre oblique, barre oblique, rouge, barre oblique Lumière. OK. Que va-t-il se passer alors ? Ce serait votre première propriété et ce serait votre deuxième propriété. Ainsi, chaque fois que vous utiliserez une icône de barre oblique, elle sera considérée comme une propriété différente Voici donc ce que nous avons fait en fait, nous avons renommé ce bouton J'aime. Couleur, actif. OK. Ainsi, à la place d'actif ou d'inactif, vous pouvez utiliser des mots tels que activer ou désactiver ou «   OK », « clair » ou « foncé ». Vous pouvez donc utiliser n'importe quoi. OK. Au lieu d'un bouton, vous pouvez taper n'importe quoi. Au lieu d'un bouton, vous pouvez taper une carte de composant. Tu peux taper n'importe quoi. Voici donc notre séquence, bouton, notre couleur et notre actif. Voici donc ce qui se passe réellement. La couleur est une première propriété et l'état actif ou inactif est une deuxième propriété. Donc, sur le côté droit de l'écran, vous verrez les deux choses. Supposons que vous ayez créé un ensemble de composants dans lequel vous avez attribué plusieurs propriétés, vous verrez ici plusieurs propriétés sun. Puisque nous avons divisé en deux parties uniquement, couleur et état actif ou inactif, c'est pourquoi nous avons ici une propriété un et une propriété deux. Et si vous voulez créer votre bouton comme celui-ci , le bouton change de taille, taille différente, de texte différent OK. Alors, que va-t-il se passer ? Dans le dossier des boutons, vous obtiendrez la première propriété concernant le mode plus sombre ou le mode plus clair. Deuxième propriété concernant la taille différente. Troisième propriété concernant le texte différent. OK. C'est donc la beauté de la variation. Maintenant, je peux utiliser n'importe quelle variante comme celle-ci. OK, très bien. C'était donc une variante. De même, vous pouvez créer des variantes pour différents ensembles. Par exemple, si vous voulez créer quatre soleils différents à partir de ce bouton rouge, 100 % rouge, 100 % rouge, 80 % rouge. 60 % d. En fait, je parle des différents ensembles de boutons particuliers. OK. Vous pouvez donc le faire facilement à l'aide de variables. J'espère donc que vous avez apprécié cette conférence. Et si le studio vous a aidé, vous pouvez me donner une bonne note positive. OK. Et si vous voulez apprendre Figma personnellement avec moi, un cours individuel en direct, alors ce que vous pouvez faire, c'est me contacter sur Instagram, UX par l'intermédiaire d'un professeur d'UX Nous pouvons donc discuter de tout ce qui concerne Figma en tête-à-tête. Si vous souhaitez en savoir plus, vous pouvez me contacter. OK. J'espère donc que vous avez apprécié cette conférence. Hé, Bob. 9. What is Design system ?: Bonjour, tout le monde. vous souhaite donc à tous la bienvenue dans ma série complète sur le design UIUX de Figma Dans cette conférence, nous allons donc apprendre ce qu'est système de conception et comment vous pouvez l'utiliser dans Figma OK. Donc, sans perdre de temps, passons à la définition principale. OK ? Il s'agit d'une définition. Les systèmes de conception sont une collection complète de composants réutilisables. OK. Il s'agit d'un composant réutilisable. Il s'agit d'un ensemble de composants réutilisables. Ainsi, dans des conférences précédentes, j'ai déjà expliqué ce qu'est un composant, comment vous pouvez l'utiliser, quelle est l'importance du composant. J'ai tout abordé dans des conférences précédentes. Ainsi, à l'aide de la définition du système de conception, vous pouvez comprendre une chose, que le composant fait également partie du système de conception. Si le grand cercle est un système de conception, alors le petit cercle est un composant. Le composant fait également partie du système de conception, ce qui signifie que le bouton que vous avez créé dans cours précédents fait également partie du système de conception. OK. Et c'est un élément réutilisable. Il s'agit d'un élément réutilisable. Réutilisable. Pourquoi ? Parce que vous n'investirez vos efforts et votre temps que pour la première fois. Ensuite, chaque fois que cela est nécessaire, vous pouvez facilement faire glisser n'importe quel élément ou composant. Vous n'êtes pas obligé de le créer plusieurs fois. Vous n'êtes pas obligé de le créer dès le début. Vous pouvez simplement créer une collection d'éléments réutilisables et chaque fois que cela est nécessaire, vous pouvez facilement glisser-déposer. OK. Il s'agit donc d'un système de conception. OK ? Alors pourquoi le système de conception est-il important ? Le système de conception est important pour la cohérence. Supposons que vous ayez une marque, supposons par exemple qu'il s'agisse d'un site Web. Maintenant, je vous demande quelle est la couleur de la marque ? Quelle est la couleur principale du site Web Quelle est l'identité de marque ? Vous allez donc dire que cette couleur bleue est l'identité de la marque. ce que tu vas dire. Cette couleur bleue est l'identité de la marque. OK. Si je vous demande quelle est la couleur principale d'Instagram, alors vous direz que c'est un peu comme le rose et si je vous demande quelle est la couleur principale de YouTube, alors vous répondrez rouge et noir. OK ? Si je vous demande quelle est la couleur primaire ci-dessous. Vous allez donc dire bleu et blanc. OK. Ainsi, avec l'aide de la couleur, vous pouvez créer un design cohérent. OK ? Donc, pour une bonne cohérence, nous utiliserons un système de conception. OK ? Nous créons donc un système de conception sur la base de la couleur, du texte, de la taille, de la mise en page, des directives et des composants. OK. Et comme je vous l'ai déjà dit système de design est le plus important pour l'image de marque. OK ? Parce que chaque marque possède sa propre couleur unique appelée couleur de marque. OK. Donc, pour une image de marque appropriée, nous devons utiliser un système de conception dans l'ensemble du design. OK. Si vous voyez ce site Web, vous verrez cette couleur bleue sur toute la page. Sur toute la page, vous verrez la même couleur. OK. À l'aide de cette couleur, nous maintenons la cohérence, et la cohérence est très importante lors de la création d'UIUX OK ? Il s'agit d'un principe fondamental de l'UIUX La cohérence est essentielle. OK. Le système de conception est un modèle prédéfini, une température prédéfinie où vous l' avez créé une seule fois, vous pouvez l'utiliser chaque fois que cela est nécessaire. OK. OK, très bien. Maintenant, la question se pose de savoir pourquoi le système de conception est si important ? Supposons que je sois un CO, PDG d'une entreprise. Supposons que je sois PDG d'une entreprise et que j'ai confié à mes employés la tâche confié à mes employés la tâche de créer le design d'une application hôtelière. Vous devez créer une application pour l'hôtel. OK. Ensuite, j'ai assigné la tâche à plusieurs concepteurs UIUX. OK. Supposons que j'ai assigné Mm She's Katy, supposons C'est Katie. OK. J'ai donc confié à Katie le travail de créer une page de connexion. De même, j'ai assigné une tâche à Rahul selon laquelle vous devez créer un écran d'accueil D'accord, j'ai donc embauché deux designers UIUX différents et les deux concepteurs travaillent sur le même projet Les deux designers travaillent sur le même projet. OK. Katty a ensuite créé cette page de connexion. OK. Et Rahul a créé cette Mais si vous remarquez qu' il n'y a aucune cohérence. En termes de couleur, d' icône, de typographie, il n' y a aucune cohérence Alors, comment les deux conceptions seront liées au même projet, comment elles seront liées au même projet. Si vous ne maintenez pas cohérence sur la base de la couleur, du texte, iconographie, quelle que soit la page que vous créerez, toutes les pages auront un aspect différent de la précédente OK. Il s'agit d'un mauvais processus. C'est pourquoi nous utiliserons ici un système de conception pour une cohérence adéquate. OK. Voici donc à quoi ressemble le système de conception. Vous allez créer un ensemble de texte de différentes tailles. Vous allez créer une couleur que vous utiliserez couramment dans votre design. OK. Vous allez créer un motif comme celui-ci. OK. Voici donc à quoi ressemble le système de conception. Maintenant, sans perdre de temps, créons un système de conception. Alors, tout d'abord, prenons un cadre. OK. Tout d'abord, créons un système de design pour la couleur. Ce que je vais faire, c'est créer un rectangle comme celui-ci. Je vais en faire une copie. OK. Entrez donc la couleur. Vert foncé OK, alors tapons la couleur noire. Copions la même couleur. Copiez la même couleur, collez-la dans la deuxième. Rendez-le un peu plus lumineux. Rendez-le un peu brillant. OK. Maintenant, je vais copier le même code. Collez-le ici. Réduisez la transparence. J'ai donc créé plusieurs ensembles ici. OK ? Voici donc comment vous pouvez créer un système de conception. C'est ma couleur principale. Supposons que ce soit ma couleur principale. OK. De même, je peux créer une couleur secondaire. OK. Épluchons une autre couleur rouge. Et copions son code couleur. OK. J'ai donc créé plusieurs ensembles de rouges. OK. C'est donc ma couleur principale, c'est ma couleur secondaire. OK. Je vous ai donc expliqué comment renommer votre composant dans les conférences précédentes De même, vous devez suivre le même processus ici. OK. Alors, tout d'abord, cliquons sur F one. OK. Et ici, vous verrez quatre points. Appliquez le style et les variables, cliquez dessus et cliquez sur le bouton Plus. OK. Maintenant, vous pouvez renommer comme nous l'avons déjà fait dans la conférence sur les composants OK. Tapons-en donc un. Tapons Black one. OK. Je tape donc ici Black slash one Donc, chaque fois que j' utiliserai cette barre oblique, elle sera divisée dans le dossier. OK. De même, je vais le renommer comme Black, un, black, two, black, three, black, four Donc, si je n'utilise pas l'icône en forme de barre oblique entre X et chiffre, que se passera-t-il ? Toutes les couleurs seront visibles individuellement. Mais si j'ajoute une barre oblique comme celle-ci , que se passera-t-il ? Je vais prendre du noir et, à l'intérieur, du noir, tous les variesens Ce serait donc très systématique. Ne vous inquiétez donc pas à ce sujet si vous ne le comprenez pas. Je vais vous montrer pratiquement. OK. Tout d'abord, renommons le premier bouton, Black one. Je l'ai renommé. OK. Cliquez sur Creative Style. Le premier style a donc été créé avec succès, vous pouvez le voir ici. OK. Maintenant, cliquez sur le deuxième bouton, passez à quatre points. Cliquez sur le bouton Plus. Nouveau style dans la variable, et collez le nom sans barre oblique deux Style créatif. OK. Maintenant, passe à la troisième. Bouton Ajouter plus. Manque Slash Three. Continuez sur quatre points plus x quatre. OK. Bien. De même, vous devez également utiliser quatre couleurs rouges. OK, alors cliquez sur la couleur rouge, puis sur quatre icônes. OK. Et tu vois, j'ai déjà créé le rouge un, le rouge, le deux, le rouge trois. OK. Alors, tout d'abord, passons au dernier bouton. Un rouge. Rouge moins un. Point F plus icône, deux rouges, créez du style. Trois rouges. Tarifs moins quatre. OK. Supposons maintenant que vous deviez utiliser cette couleur. OK. Qu'est-ce que tu vas faire alors ? Supposons que j'ai créé ce cadre et qu'à l'intérieur de ce cadre, j'ai créé un cercle. OK. Supposons donc que je doive appliquer cette couleur. OK. Je ne vais donc pas prendre de pilule. Je n'utiliserai pas l'option de remplissage pour sentir la couleur. C'est faux. Donc, chaque fois que vous créez un système de design, vous devez mettre de la couleur comme celle-ci. Tout d'abord, vous allez sélectionner les objets dans lesquels vous devez sentir la couleur, j'ai sélectionné le cercle. Maintenant, je vais passer à quatre points, et vous verrez ici ce que vous avez créé. Point. Ici, vous verrez l'ordre systématique. Comme je vous l'ai déjà dit, je le renomme ainsi Rouge un, rouge plus deux, rouge plus trois. Il semblerait donc qu' il y ait un dossier, rouge, et à l'intérieur rouge, un, deux, trois. De même pour le noir, je vais prendre du noir, un, deux, trois. Il s'agit d'un processus systématique. Supposons donc que je doive colorer le cercle rouge. Je vais donc cliquer sur le cercle et appliquer le style et les variables. Faites défiler la page vers le bas Et ici vous verrez un dossier noir, un dossier rouge. OK, alors mettons un deux noir. C'est donc ce que tu peux ressentir. Et si vous voulez le supprimer, vous pouvez le supprimer d'ici. OK. Supposons que j'aie créé un autre cercle ici. Je dois sentir la couleur sur ce cercle, donc je vais passer à quatre points Supposons que je doive aussi remplir le rouge de couleur rouge. Il s'agit donc d'un dossier principal, rouge, et à l'intérieur du rouge, nous en avons un, deux, trois, quatre. OK. Ainsi, chaque fois que vous utiliserez une icône de barre oblique dans votre renommage, elle la divisera en tant que propriété Voici donc comment vous pouvez l'utiliser. OK. Au lieu de cela, que pouvez-vous faire ? Vous pouvez le renommer comme ceci. Vous pouvez le renommer comme ceci. Absence primaire, absence principale et ainsi de suite. Tu peux faire un nom comme celui-ci. Ainsi, chaque fois que vous utiliserez cette barre oblique, elle la considérera comme deux propriétés différentes La première propriété concerne le noir et la seconde le nombre. OK. Vous pouvez également faire un nom comme celui-ci. Primaire principal, noir foncé. Vous pouvez donc également renommer comme ça. OK, le plus sombre, le plus clair, le plus clair, le plus clair. OK. Ainsi, chaque fois que vous utiliserez une icône, une barre oblique, cela la divisera en différentes propriétés Vous pouvez renommer les couleurs primaires en rouge, les couleurs secondaires en noir. OK. Vous êtes donc libre de renommer. OK. Il suffit donc d'y penser quel que soit le type de séquence que vous utilisez, mais cela doit être cohérent dans l'ensemble du système de conception. J'ai donc créé un système de design pour les couleurs. OK. De même, vous devez utiliser un système de conception pour le texte, la typographie OK, alors agrandissons le cadre. OK. Créons maintenant un système de conception pour le texte. Donc, tout d'abord, tapons ici le titre. En-tête. OK. Donc, ici, vous pouvez voir qu'actuellement, style quanti est pop ins, normal 36. OK. Vous pouvez maintenant le copier et le réduire à 32, puis copier ce 24. 20. OK, ou vous pouvez taper un paragraphe. OK. Voici donc votre typographie. OK. Et dans un seul design, il n'est pas nécessaire d'utiliser plus de deux fontistyles différents Je dis qu'il n'est pas nécessaire d'utiliser plus de deux funtistyle dans chaque design Dans chaque design, vous devez utiliser au maximum deux types de police différents. Dans votre design unique, il ne doit pas comporter plus de deux polices différentes. Il s'agit d'un élément fondamental du design. J'ai donc créé quatre tailles différentes. OK. Vous pouvez également modifier son épaisseur. OK ? J'ai donc créé quatre versions différentes de manière très aléatoire. Vous pouvez donc attribuer la manière dont vous pouvez l'attribuer. Encore une fois, vous partirez sur quatre points. Tout d'abord, sélectionnons ce texte, passons sur les quatre points et ajoutons le style créatif des icônes. Ici, vous pouvez taper n'importe quoi. Disons donc le titre 1. Supposons que le titre 1 soit notre premier texte. Ensuite, passez à Edding 2. En ajouter trois. En ajouter quatre. Supposons donc que je doive m'en servir. OK, j'ai donc créé quatre typographies différentes. OK. Supposons donc que je doive l'utiliser. Je vais donc passer à ce cadre. Tiens, je vais le prendre. OK. Maintenant, si je dois appliquer l' un de ces systèmes de conception, comment puis-je le faire ? Tout d'abord, je vais double-cliquer sur mon nom et ensuite, à partir de là, je pourrai choisir n'importe qui. Titre un, titre deux, titre trois, titre quatre, paragraphe. D'accord, voici comment vous pouvez utiliser le système de conception. OK. Donc, quand vous créerez ceci, quand vous le créerez. Supposons que vous créiez un site Web comme celui-ci. Vous créez un site Web comme celui-ci. Ensuite, ce que vous allez faire, abord créer votre système de design pour la couleur. Vous allez créer un rectangle ou un cercle. Ceci n'est qu'à titre de référence. OK. Et ce que vous allez faire, vous allez copier cette couleur. OK. Voici donc mon système de conception. OK. J'ai donc créé un système de conception pour ce site Web. OK. Donc, chaque fois que je dois appliquer cette couleur, je clique simplement sur ces éléments et je peux remplir la couleur à partir d'ici. OK. C'est donc une beauté du système de design. Vous pouvez faire la même chose avec du texte. Il s'agit donc essentiellement d'un modèle prédéfini. Il s'agit d'un temple prédéfini. Ici, vous pouvez voir que j'ai utilisé cette couleur particulière dans tout le design, dans tout le design. C'est pourquoi, à titre de référence, j'ai créé un système de design, et dans un souci de cohérence, j'utiliserai la même couleur. OK. C'est ainsi que vous pouvez créer votre propre système de design. OK. J'espère que vous avez apprécié cette conférence. Au revoir. 10. Autolayout in Figma ( part 1 ): Bonjour à tous. Je vous souhaite donc à tous la bienvenue dans ma série complète de master sur le design d'IGMauiux Donc, dans cette conférence particulière, nous allons apprendre ce qu'est la mise en page automatique. OK. Alors sans perdre de temps, commençons notre vidéo. OK, alors tout d'abord, discutons de sa définition. OK, la mise en page automatique est donc une fonctionnalité de conception qui ajuste automatiquement un élément dans un cadre. Il y a donc un cadre composé d'une grande quantité d'éléments. Ainsi, chaque fois que vous diminuez ou augmentez la taille du cadre, les éléments qui se trouvent à l'intérieur ce cadre ajustent automatiquement sa position. D'accord, par exemple, prenons un projet pratique. OK. C'est un cadre. OK. Il s'agit d'un cadre composé de nombreux éléments. OK, donc c'est un cadre. Ce corps entier est un cadre. Et à l'intérieur de ce cadre, nous avons de nombreux éléments comme ceci, ceci, cela. Le cadre est donc composé de nombreux éléments. OK. Ainsi, chaque fois que vous augmentez ou diminuez la taille du cadre, son élément ajustera automatiquement sa position. Par exemple, si je réduis la largeur du cadre, vous pouvez voir que l'image ajuste automatiquement sa taille en fonction de la largeur du cadre. C'est ce qu'on appelle autoyout. Donc, dans Autoout, dans Autoout, nous avons un cadre. Otoeut est une fonction de conception qui s'ajuste et s'aligne automatiquement sur les éléments d'un cadre. OK, donc pour un exemple, prenons un conteneur. Prenons un contenant. OK. Ce conteneur est donc un cadre. Supposons que ce récipient soit un cadre et que le récipient soit constitué d'eau. Il est composé d'eau. C'est un container. D'accord, disons que le conteneur est votre cadre et que l'eau est votre élément. OK. Alors imaginez une chose. C'est votre contenant. Il s'agit votre récipient, qui est composé d'eau. OK. Alors, que se passera-t-il si j' augmente la largeur du conteneur ? Que va-t-il se passer ? Évidemment, si j'augmente la largeur du récipient, l'eau s'adaptera à tout l'espace. OK, ici j'ai mentionné quatre points de référence, un, deux, trois, quatre, qui ne sont rien d'autre qu'un support pour vous montrer comment fonctionne la mise en page automatique. OK. Donc, si vous avez de l'espace supplémentaire , vous l'occuperez évidemment. OK ? Supposons que vous voyagiez avec vos quatre amis en bus. OK, supposons que vous voyagiez en bus avec quatre amis. Supposons donc que si vous avez un nombre de places limité, vous vous adapterez à un très petit endroit. OK. Mais chaque fois que vous aurez de l'espace supplémentaire, vous occuperez tout l'espace, d'accord ? OK. Il s'agit donc d'un cadre. Si j'augmente la largeur du cadre, élément s'ajustera en fonction de la taille du cadre. OK. Prenons un autre exemple. Il s'agit d'un bouton. Il s'agit d'un bouton. OK. C'est un cadre. C'est un cadre, et à l'intérieur de ce cadre, nous avons un élément, non ? Nous avons un cadre, et à l'intérieur de ce cadre, nous avons un élément. Alors maintenant, que se passera-t-il lorsque j'augmenterai ou diminuerai la taille du cadre, son élément s'ajustera automatiquement en fonction de la taille du cadre. OK. Maintenant, vous remarquerez une chose : il maintient sa position. Donc, si je veux augmenter le niveau de notoriété, encore une fois, l'élément conserve sa position. C'est ce qu'on appelle la mise en page automatique. La mise en page automatique est donc une meilleure fonctionnalité de GMA qui permet à l'élément d'ajuster sa position en fonction de la taille du cadre Chaque fois que la taille du cadre change, son élément change automatiquement de position. OK ? Donc, euh, chaque fois que nous devons concevoir une application. D'accord, alors nous ne créerons pas de design distinct pour mobile, design séparé pour ordinateur de bureau, design séparé pour tablette. OK ? Comme vous le savez, nous avons plusieurs cadres. Si vous cliquez sur le cadre, vous verrez ici. Nous avons un cadre pour tablette, ordinateur de bureau, tablette, ordinateur de bureau et téléphone. OK. Ainsi, avec l'aide d' Autoayout, ce que vous pouvez faire, vous pouvez créer votre design et optimiser pour différentes tailles Vous pouvez optimiser la conception des applications de bureau pour l'affichage sur tablette ou sur téléphone. OK. C'est donc une beauté d'Autoeyout Voyons maintenant comment nous pouvons le faire. OK. Donc, tout d'abord, je vais vous expliquer sa propriété. OK. Après cela, nous appliquerons l'effet de mise en page automatique. Mais avant cela, nous devons comprendre que c'est une propriété. OK. Nous avons donc deux choses. Tu vois cette ligne bleue, ce rectangle bleu ? C'est ce qu'on appelle un cadre. Et à l'intérieur, il y a un élément. OK. Ainsi, chaque fois que j' augmente ou diminue la taille du cadre, son élément ajustera également sa position et sa taille. OK. Augmentons donc le et vous verrez qu'il maintient sa position. Il maintient sa position centrale. OK. Maintenant, tu dois regarder de ce côté. Ici, vous obtiendrez une icône comme celle-ci. Tu peux voir ça ? Il s'agit d'un pogison d'élément différent dans un cadre. OK. Vous verrez donc ici une petite boîte. Ici, vous verrez une petite boîte. Tu peux voir ça ? OK. Et mon anglais est un peu médiocre parce que l' anglais n'est pas la langue. OK. Mais tu devrais te concentrer sur mes connaissances. OK ? Vous n'avez pas à juger de mes compétences en anglais, car ce n'est pas le cas de l'anglais. OK. Vous pouvez donc voir ici que le point noir représente l'élément et le cadre rouge représente le cadre. OK. Bien. Ainsi, chaque fois que vous sélectionnez votre cadre, chaque fois que vous sélectionnez votre cadre, vous verrez une option d'alignement. Donc, si je clique sur le coin supérieur, vous remarquerez que sa position a été modifiée. OK. Ainsi, à l'aide de l'alignement, vous pouvez modifier sa position. OK. Il s'agissait donc d'une option d'alignement. Il s'agissait d'un alignement. Donc, si vous le placez au centre, se passera-t-il si vous augmentez ou diminuez la taille du cadre ? Il prendra donc de toute façon sa position au centre. OK. Si vous vous dirigez vers le Pogison gauche, vous le ferez vers le pogison gauche Si vous cliquez sur le bouton droit, il conservera le bon poison. OK. Donc, chaque fois que vous créez un bouton, vous devez le placer au centre, d'accord ? De même, nous avons un cadre pour l'icône des étudiants. OK. Donc, si je clique en haut à gauche, éléments se déplaceront vers le coin supérieur gauche, en haut au centre, en haut à droite, centre, au milieu droit, au milieu, au milieu gauche. OK. Voici donc comment vous pouvez attribuer son centre. OK. OK, très bien. Maintenant, chaque fois que vous appliquerez mise en page automatique à plus de deux éléments, que se passera-t-il ? Ici, vous verrez une lacune. Ici, vous verrez une lacune. OK. En fait, lorsque je passerai ma souris, désolé, vous verrez cet écart Tu vois cette ligne violette ? Tu vois cette ligne violette ? C'est ce qu'on appelle un écart. Il s'agit d'un écart entre chaque élément. OK. Donc, là où vous le trouverez, c'est une lacune. Il s'agit d'une lacune. OK. Supposons donc que vous l' augmentiez à partir d'ici, vous verrez également le même changement apparaître ici. OK. Vous avez donc le choix entre les deux. Vous pouvez soit modifier la valeur à partir d'ici, soit au lieu de cela, vous pouvez modifier la valeur à partir d'ici. Les deux choses sont identiques. OK. Et euh, vous devez faire attention ici parce que supposons que je tape ici 50. Cela signifie que chaque fois que j' augmente ou diminue la taille du cadre, cela ne changera pas son écart. OK, l'écart sera de 50, quoi qu'il arrive, j' augmente ou diminue la largeur du cadre. OK, Gap n'est pas un OK. Donc, si je le réduis trop, c'est que cela ne fonctionne pas. Mais si je dois cliquer sur Hit taper Auto et appuyer sur le bouton Enter. Que va-t-il se passer maintenant ? Son élément s'ajustera en fonction de la taille du cadre. Hein ? Son élément s'ajustera en fonction de la taille du film. Bien. Vous avez donc le choix entre les deux. Donc, si vous voulez mettre la valeur de l'écart entre chaque élément, vous avez l'option à la fois. Vous pouvez soit saisir n'importe quelle valeur. Donc, si vous entrez une valeur telle que 50, distance sera constante de 50, quelle que soit augmentation ou la diminution de la taille du cadre. Il gardera la distance 50. OK. Et vous avez une autre option, qui est de régler l'écart par rapport à la voiture. OK. Ainsi, lorsque vous réglerez votre écart sur le mode automatique, il ajustera automatiquement sa distance entre les autres éléments. OK. Répétons donc la même chose. Donc, tout d'abord, ce que vous devez faire, est sélectionner un cadre. , si vous passez la souris entre cet espace, Ensuite, si vous passez la souris entre cet espace, vous verrez ces lignes hachurées violettes, qui représentent l' écart entre chaque élément Il s'agit d'un écart entre chaque élément. Maintenant, vous avez le choix entre les deux. Vous pouvez soit entrer une valeur fixe soit la régler sur le mode automatique. Il est actuellement en mode automatique. Actuellement, notre écart est défini en mode automatique, ce qui signifie que si j'augmente la largeur de mon cadre , l'écart augmentera également. Si je réduis la largeur du cadre, écart diminuera également. Si je veux entrer une valeur fixe comme 40. Ensuite, il vous demandera de les aligner correctement. Je l'aligne au centre. Maintenant, si je dois diminuer ou augmenter la largeur, AP est cohérent. Ici, AP est cohérent, 40, 40. Vous avez donc le choix entre les deux. Vous pouvez soit mettre n'importe quelle valeur fixe, soit la régler sur le mode automatique. J'ai donc expliqué ces deux scénarios. 11. Autolayout in Figma ( part 2 ): Donc les gars, euh, c'est un cadre, et ici nous avons attribué l'écart à l'automatique, ce qui signifie que chaque fois que nous augmentons ou diminuons la taille du cadre, Gap s'ajuste automatiquement. D'accord, selon la taille du cadre. Donc, si j'augmente la taille du cadre, l'écart augmentera également. Si je réduis la taille du cadre, l'écart diminuera également. OK. Mais il devrait y avoir une limite, non ? Par exemple, si j' augmente trop la largeur du cadre, vous remarquerez une chose, c' est que tous les éléments ont été fusionnés et que cela a l'air moche. Cela gâchera l'ensemble de votre design. OK, tu dois donc postuler. Vous devez appliquer une largeur minimale et une largeur maximale. Vous devez restreindre la dimension de votre design. Vous devez limiter les dimensions de votre design comme le maximum et le minimum. OK. En gros, vous limitez la flexibilité de votre conception. OK ? Il s'agit de la limite maximale et de la limite minimale. Je pense que tu comprends mon point de vue. OK, donc si je dois diminuer la largeur du cadre. OK. Maintenant, je dois appliquer une limite de largeur minimale. Alors ce que je vais faire, actuellement, notre largeur est de 1508 Je vais donc copier cette limite. OK. Et comme nous devons appliquer une limite de largeur, c'est pourquoi je vais me concentrer sur la largeur. Supposons que je doive appliquer une limite de hauteur, alors je vais passer à la hauteur. Ici, nous devons appliquer une limite de largeur. C'est pourquoi je vais aller sur la largeur, passons à la liste déroulante. Et ici, nous avons une largeur minimale ajoutée, ajoutez une valeur de largeur minimale ici. OK. Vous pouvez donc voir ici que j'ai ajouté une largeur minimale de cadre. Alors, à partir de maintenant, que va-t-il se passer ? Chaque fois que je diminuerai la largeur du cadre, elle diminuera de 1508 OK. Après cela, je ne peux pas diminuer la largeur du cadre parce que j'ai restreint, d'accord ? Et pareil, vous devez demander le maximum. D'accord, je vais diminuer, désolé, si j'augmente la largeur du cadre, alors il n'y a pas de limite, je peux l'agrandir selon mes besoins. Mais il est nécessaire que j'attribue une limite maximale à. OK ? Si j'ai attribué une largeur minimale, je dois également attribuer une limite maximale. OK. Supposons donc que ce soit ma limite maximale. Alors ce que je vais faire, notre largeur actuelle est 1961. Je vais copier ce menu déroulant. Et ici, vous verrez ajouter une largeur maximale. OK, alors mettez la valeur. OK. Que va-t-il se passer maintenant ? Il augmentera ou diminuera dans une limite maximale et minimale. Es-tu capable de comprendre ce que j'essaie de faire ? J'ai assigné une limite maximale et une limite minimale, qui ne doivent pas être dépassées. OK, j'ai assigné une limite minimale. J'ai assigné une limite maximale, elle ne doit pas être dépassée. OK. Bien. Complet. OK. Je pense que tu as compris mon point de vue, non ? Réduisons donc l'écart. OK. Mettons-le au centre. J'ai donc assigné l'écart 55. Puisque j'ai laissé une pause d'une minute, d'accord. Puisque j'ai attribué un écart de 55, cela signifie que cet écart est de 55 Je l'ai assigné, peu importe ce que je fais pour augmenter ou diminuer le cadre. OK, il va continuer à maintenir un écart de 55. OK. À partir de là, vous pouvez également modifier. OK, très bien. Vous verrez maintenant ici l' option de rembourrage. Tu peux le voir. Cette ligne bleue est un rembourrage Le rembourrage correspond à la distance entre votre cadre et votre élément Par exemple, C. C'est ce qu'on appelle le rembourrage C'est ce qu'on appelle le rembourrage. Il s'agit d'un rembourrage horizontal. De même, nous aurions un rembourrage vertical. OK, c'est donc un rembourrage horizontal. C'est donc votre élément. Et voici ton cadre. Le rembourrage est donc une distance entre le rembourrage est une distance entre l'élément et le cadre. OK. De même, vous pouvez attribuer un rembourrage comme celui-ci. OK. Passons maintenant à autre chose. Ici, nous avons une mise en page différente comme la disposition horizontale, disposition verticale, afin que vous puissiez modifier votre mise en page comme ceci. OK ? Bien. OK. Maintenant, nous avons un autre cadre ici. Nous avons un autre cadre. Comme je vous l'ai déjà dit, le cadre est composé d'éléments. OK. Le cadre est composé d'un élément. À cette ligne bleue, j'ai ajouté un effet de trait pour que vous puissiez voir le cadre. Cette ligne bleue représente le cadre. Cette ligne bleue représente le cadre, et à l'intérieur de ce cadre, nous avons deux éléments. Le premier élément est l'image, second est le texte. Voyons maintenant les propriétés de l'élément. Nous avons déjà appris la propriété du cadre. Nous allons maintenant apprendre la propriété de l'élément. Tout d'abord, sélectionnons l'image. Sélectionnons l'image. OK ? Donc, sur la largeur du sexe, vous verrez un contenant à pilules Alors, qu'est-ce que cela signifie ? Le contenant à pilules agit comme de l'eau. Pot à pilules, agit comme de l'eau. C'est le meilleur exemple de conteneur de remplissage. Il s'agit d'un cadre composé d'eau. Il s'agit d'un cadre composé d'eau. Donc, si j'augmente la largeur du cadre, l'eau se répandra dans tout le cadre. OK. Si vous donnez de l'espace supplémentaire, il occupera. OK. Ici, tu peux voir. J'augmente la largeur du cadre. Ses éléments s'ajustent donc en fonction de la taille. La même chose s'applique donc ici. Si je clique sur cette image, et que je passe à la section de largeur et à la largeur intérieure, si je clique sur le conteneur de terrain, se passera-t-il alors ? Et vous voyez, vous devez vous rappeler une chose : conteneur Peel est une propriété d'un élément. OK, et l'élément se comportera en fonction du cadre. Tu dois te souvenir de cette chose. Eh bien, le conteneur est une propriété de l'élément. Cette image, cette image est un élément. Ici, nous avons appliqué un contenant à pilules. Sentez le contenant. Le récipient à souder agit comme de l'eau. OK. Le conteneur de champ est donc une propriété de l'élément. À la place de l'élément, cela peut être n'importe quoi. Il peut s'agir d'une image ou d'un texte. Tout ce qui se trouve à l'intérieur d'un cadre appelé élément. Vous verrez donc le conteneur de champ dans l'élément, pas dans le cadre. OK, donc le conteneur pour roues est une propriété de l'élément, non ? Et l'élément se comportera en fonction du cadre. OK. J'ai donc appliqué l'effet field container sur cette image. J'ai appliqué l' effet field container sur cette image. OK. Alors, quand se comportera-t-il ? Si je veux faire un changement avec le cadre. OK. Donc, si je réduis ou augmente la taille du cadre, son élément ajustera automatiquement sa taille et sa position. OK. C'est la beauté d'un contenant rempli. Répétons donc la même chose. OK. Répétons la même chose. Vous devez regarder cette conférence plus de trois fois, trois ou cinq fois, parce que c'est un peu confus. Cette ligne bleue représente donc le cadre. OK. Et j'ai ajouté un effet de trait bleu dans le cadre pour vous le montrer. OK ? Sinon, le cadre ne ressemblera pas à ceci. OK. À l'intérieur de ce cadre, nous avons deux éléments. premier élément est l'image et le second est le texte. OK. Donc, tout d'abord, nous parlons de cette image. OK. Ainsi, lorsque nous cliquons sur cette image, puis dans la section largeur, nous appliquons l'effet field container. OK. Le conteneur de champ est donc une propriété d'un élément, qui s'ajustera en fonction de la taille du cadre. Si vous réduisez la taille du cadre, taille de l'élément diminuera également. Si vous augmentez la taille du cadre, taille de l'élément augmentera également. Le conteneur de champ est une propriété d'un élément, qui dépend totalement du cadre. Donc, le cadre augmentera, l'élément augmentera. Si la taille du cadre diminue, la taille de l'élément diminuera. Démontrons cela si je veux diminuer le cadre. Vous pouvez donc voir que sa taille est en train de changer. OK ? Bien. Vous pouvez également appliquer la même chose en hauteur. Cliquons sur l'image. Et si j'applique le conteneur de terrain en hauteur, que se passera-t-il ? Si j'augmente la hauteur, son image s'ajustera automatiquement en fonction de l'espace libre. Si je réduis la hauteur, vous pouvez voir que la hauteur de l'image a également été réduite. Si j'augmente la hauteur du cadre, vous pouvez voir que la hauteur des éléments augmente également en fonction de la hauteur du cadre. OK. Vous avez donc ici une option de conteneur de testament. Donc, si vous cliquez sur l'image et allez ici, vous avez ici une largeur fixe. Vous avez donc ici deux options différentes, le conteneur de terrain et la largeur fixe. Supposons que nous ayons exploré le conteneur de terrain, n'est-ce pas ? Cliquons donc sur la largeur fixe. Et ajustons la largeur. OK. largeur fixe signifie donc, évidemment, qu'elle ne changera pas. Cela ne changera pas. Si je réduis ou augmente la taille du cadre, largeur ne changera pas, n'est-ce pas ? La largeur ne change pas. Si j'augmente la hauteur, c'est que l'image s'ajuste d'elle-même car si vous cliquez sur l'image et que vous passez à la hauteur, Sexton est actuellement sélectionné dans le conteneur de terrain, ce qui signifie qu'elle ajustera sa hauteur en fonction de la hauteur du cadre Donc, si vous fixez sa hauteur comme ceci, maintenant, peu importe ce que vous augmentez ou diminuez, sa hauteur ne changera pas. Vous avez donc deux options. Deux options s'offrent à vous. Nous parlons d'élément. Nous parlons de la taille de l'élément. OK. Ainsi, lorsque vous cliquez sur n'importe quel élément, peu importe ce que vous cliquez sur une image, une icône, un texte. OK. Chaque fois que vous cliquez sur un élément, vous avez deux options : largeur et hauteur, largeur et hauteur. Vous verrez cette option en largeur et en hauteur à la fois. OK. Quelle option allez-vous voir ? Conteneur de testament. Touchez le contenant et fixez-le. Alors, lorsque vous attribuerez propriété du conteneur de terrain, que se passera-t-il ? Si vous augmentez la taille du cadre, taille de l'élément augmentera également. Si vous réduisez la taille du cadre, taille de l'élément diminuera également. Mais si vous sélectionnez une largeur ou une hauteur fixe, ne changeront pas hauteur et la largeur ne changeront pas en fonction du cadre. OK. Je pense que tu as compris mon point de vue. OK. J'ai donc abordé les éléments de base concernant la mise en page automatique. En gros, j'ai expliqué la propriété de la mise en page automatique. OK. Et il y a aussi une chose que je dois t'apprendre , c'est 1 minute. OK, donc si je clique sur le texte, si je clique sur le texte, je sélectionne un autre élément. Nous avons donc ici une option de conteneur de terrain, et le contenu des câlins est une nouvelle option. J'ai donc déjà expliqué le conteneur de terrain. J'ai déjà expliqué la largeur fixe. Ici, nous avons un contenu câlin. Alors, que va-t-il se passer ? Tout d'abord, ajustons la largeur. OK. J'ai donc assigné le conteneur à câlins. Ainsi, chaque fois que vous attribuerez un conteneur HGA, il verrouillera sa position Maintenant, si vous augmentez, si vous augmentez ou diminuez la largeur de votre cadre, il ne bougera pas. En gros, il dira que je ne bougerai pas d'ici. OK, je vais verrouiller sa position. C'est ce qu'on appelle un contenu de câlin. OK. C'est ce qu'on appelle le contenu Hug, qui peut être appliqué au texte. OK. OK, très bien. Sélectionnons le texte. Sélectionnons le contenu du câlin. Diminuez la largeur. OK. Maintenant, si je dois diminuer ou augmenter la largeur. La position du texte a été enregistrée. D'accord, cela ne change pas selon Okay. J'ai donc tout couvert. Tout d'abord, j'ai abordé tout ce qui concerne le cadre. Le cadre est composé de nombreux éléments. D'accord, le cadre est composé de nombreux éléments. Et chaque fois que vous devez modifier quoi que ce soit en rapport avec l'alignement, vous devez cliquer sur le cadre. OK. Après cela, je vous ai expliqué toutes les propriétés des éléments. Donc, dans Elements, nous avons un conteneur de champ re property fix. Et un câlin. OK. Donc, si vous cliquez sur Corriger, peu importe ce que vous allez changer de cadre, largeur ou de hauteur, cela se réparera. Si vous utilisez un conteneur de terrain, il ajustera automatiquement sa taille en fonction de la taille du cadre. Si vous cliquez sur le contenu de Hug, élément verrouillera sa position et il ne bougera pas, que vous augmentiez ou réduisiez la taille du cadre. OK. J'ai donc tout couvert. Et dans la prochaine conférence, je vous apprendrai à appliquer la mise en page automatique. OK ? J'ai abordé la propriété de base de la mise en page automatique, et dans la vidéo suivante, je vais vous apprendre à appliquer la mise en page automatique dans votre OK ? Si vous avez obtenu de l' aide grâce à cette vidéo, vous pouvez me donner une bonne note positive et commenter afin que je puisse me motiver. 12. How to Create Responsive UI/UX website Design in Figma ?: Bonjour, tout le monde. vous souhaite donc à tous la bienvenue dans ma série complète sur le design UIUX de Figma Dans cette conférence particulière, nous apprendrons comment créer un design entièrement réactif à l' aide de Figma tout en utilisant AutoEOutFeature OK. Alors sans perdre de temps, commençons notre vidéo. Tout d'abord, nous allons reproduire ce site Web, d'accord ? Nous utilisons cette page comme référence, et nous essaierons de reproduire cette page OK, alors tout d'abord, prenons un DextoFrame dans lequel nous reproduirons notre OK. Tout d'abord, créons un onglet. OK. Créons un onglet. Donc, tout d'abord, prenons un outil de texte et tapons home. Ensuite, à l'aide du bouton Control plus D, vous pouvez le dupliquer et suivre des cours, contacter la communauté et nous parler de nous. Maintenant, vous devez tous les sélectionner et vous pouvez modifier leurs propriétés à partir d'ici. Vous pouvez l'aligner correctement, d'accord ? Alignez-les correctement. Et à l'aide de ces trois lignes, ce que vous pouvez faire, vous pouvez créer un écart égal entre chaque texte. Assurez-vous donc de cliquer dessus. Enfin, nous avons un écart égal. Enfin, nous avons un écart égal. Maintenant, cliquons dessus. Et ici, nous avons l'option de mise en page automatique. Alors cliquez dessus. Avec l'aide de la mise en page automatique, vous pouvez le rendre réactif. OK ? Maintenant, sur le côté droit, vous trouverez sa propriété. OK ? Et c'est ce qu'on appelle un cadre. Il s'agit donc d'un cadre, et vous pouvez le renommer comme un onglet OK ? Pour faciliter la navigation, vous pouvez le renommer Sur le côté gauche, vous pouvez voir que nous avons une nouvelle couche appelée tab. OK. Maintenant, sur le côté droit de l'écran, nous avons une propriété. Ainsi, à l'aide de l'alignement, ce que vous pouvez faire, vous pouvez aligner votre élément par rapport à votre cadre. Vous pouvez donc les aligner correctement au centre. OK. Maintenant, augmentons la hauteur OK. Vous avez donc ici un alignement. Donc, si vous cliquez sur le coin supérieur gauche, il se déplacera vers le coin supérieur gauche. Si vous cliquez sur le coin supérieur droit, il se déplacera vers le coin supérieur droit. Voici donc comment vous pouvez les aligner. Si vous cliquez sur le coin supérieur, en bas, désolé, en bas à droite, message se déplacera vers le coin inférieur droit. Donc, si vous voulez créer un onglet, il doit être au centre, d'accord ? Maintenant, nous avons ici un rembourrage horizontal et un rembourrage vertical, il s'agit donc d'un espace entre votre cadre et votre élément de texte OK ? Vous devez donc les attribuer correctement. Il s'agit d'un écart entre votre cadre et votre élément. Ok, maintenant diminuons la taille, d'accord ? Parlons maintenant de l'écart. À partir de là, vous pouvez manipuler le réglage de l'écart. Vous pouvez soit entrer une valeur fixe, soit entrer une valeur automatique. Nous allons donc sélectionner Auto. Si vous sélectionnez l'option automatique au lieu de la valeur fixe, que se passera-t-il ? L'écart varie en fonction de la taille du cadre. Si vous augmentez la taille de votre cadre, l'écart augmentera également. Si vous réduisez la taille du cadre, l'écart diminuera également. OK. De même, si vous entrez valeur fixe au lieu de la mettre automatiquement, si vous entrez une valeur fixe, le même écart entre chaque texte sera maintenu. OK ? Vous pouvez donc utiliser les deux en fonction de vos besoins. Supposons donc que vous puissiez taper 50, 40, alors cela conservera le même écart. Maintenant, pour remplir la couleur, vous devez continuer. Tout d'abord, vous devez sélectionner votre cadre et passer à Feel. Et à partir de là, vous pouvez choisir votre couleur principale. Je vais donc utiliser le bleu comme couleur primaire. Maintenant, changeons le texte. Ainsi, pour une sélection spécifique, vous devez utiliser le bouton de contrôle, et pour une sélection multiple, vous devez utiliser le bouton Sift, ce qui signifie que vous devez utiliser les deux boutons ensemble OK, appuyez sur le bouton de contrôle et cliquez sur la souris. À l'aide de cette combinaison, vous pouvez sélectionner tout le texte. Sélectionnez maintenant des éléments entiers et faites-en des composants. C'est ce qu'on appelle le composant parent. Et chaque fois que nous l'utiliserons, il appellera child components. Je vais donc passer à la section des actifs, et ici je vais obtenir mon instance parent signifie composant enfant. Maintenant, je vais ajuster sa taille, d'accord. Ajustons-le ici. C'est mon composant parent. Il s'agit de mon composant parent et de mon composant enfant. Donc, quoi que je fasse dans le composant parent, sa réflexion apparaîtra sur le composant enfant. Si je change la couleur du parent, cela se reflétera également sur l'enfant. Créons maintenant le logo du site Web. Prenons donc un nom : I school Hub. Vous pouvez modifier les propriétés du texte. Vous pouvez augmenter la taille. Vous pouvez modifier l' épaisseur de chaque texte. Vous pouvez modifier la couleur du texte. Sélectionnons donc l'école et appliquons la couleur de notre thème. Donc, pour appliquer cela, vous devez aller sur quatre points et vous pouvez postuler comme ceci. Maintenant, je vais télécharger un logo, que je vais joindre à mon logo. En gros, je dois joindre ce logo à Ikolhub. Vous pouvez créer votre propre logo de cette manière, nous allons donc fusionner les deux éléments. Alignons-les correctement. Maintenant, alignons-les correctement. Sélectionnez maintenant tous les éléments et appliquez la mise en page automatique. Ainsi, à l'aide de la mise en page automatique, vous pouvez facilement modifier la position de vos deux éléments Ainsi, tu peux changer de position. Renommons maintenant ce logo. Et si vous souhaitez créer un composant, vous pouvez également créer un composant de votre logo afin de pouvoir l'utiliser chaque fois que cela est nécessaire. Nous allons donc placer notre logo. Il est maintenant temps de créer une bannière pour notre site Web. Je crée donc une bannière avec le rectangle Alpha. Maintenant, téléchargeons l'image d'ici. Sélectionnons n'importe quelle image. Je pense que je devrais utiliser cette image. OK. Ça a l'air sympa. Maintenant, augmentons la hauteur de notre cadre pour que les utilisateurs puissent le faire défiler. Maintenant, nous devons également créer d'autres éléments. Par exemple, nous devons créer ce rectangle d'image. Je dois créer celui-ci, inscrire pour l'automne et le printemps. OK. Essayons donc de reproduire ce site Web J'ai donc créé de nombreux rectangles, un grand rectangle, un petit rectangle et un très petit rectangle, et je fusionne ces deux éléments en un groupe afin qu'ils se déplacent ensemble OK. Ajustons sa position, alignons-les correctement, et nous devons écrire un texte comme «   Postulez pour l'automne et le printemps ». Je vais donc taper quelque chose de différent. Tapons explorers. Vous pouvez modifier le réglage du texte Vous pouvez diminuer ou augmenter son épaisseur. Alignons-les et ajustons leur position. Mais avant cela, nous devons appliquer la mise en page automatique. Maintenant, ajustons sa position. Nous allons maintenant sélectionner les deux éléments et les créer en tant que groupe. OK ? Maintenant, nous pouvons télécharger une image, mais avant cela, nous pouvons la dupliquer car nous avons besoin de cet élément trois fois. Maintenant, je vais appliquer effet de mise en page automatique entre ces trois éléments, mais avant cela, alignons-les correctement et créons un écart constant. OK ? Et tu peux prendre ton coin de rue. Puisque nous avons sélectionné les trois composants, c'est pourquoi si nous changeons le rayon d'angle, il changera en même temps. Sélectionnez maintenant tous les éléments. Et encore une fois, nous appliquerons la mise en page automatique. Maintenant, si vous tapez ici une valeur fixe, elle sera corrigée. Créons maintenant un titre. Commencez votre parcours UX avec nous. Maintenant, nous allons l' organiser correctement, et je vais sélectionner tous les éléments, et je vais appliquer l'effet autoeu entre tous ces éléments Vous devez vous assurer que l'autolaout est correctement appliqué Vous pouvez maintenant manipuler sa distance. Bien. J'ai créé ce cadre. OK ? Maintenant, nous allons faire glisser l'image et la placer comme ceci. Encore une fois, nous appliquerons la mise en page automatique. En gros, ce que je fais ici, j'applique la mise en page automatique dans un petit élément. Après cela, nous le fusionnons avec un autre élément, d'accord ? OK, maintenant faisons-le glisser dans notre cadre. Nous devons maintenant télécharger l'image. Je vais passer à l'image et à la vidéo dans l' outil Rectangle et je sélectionnerai plusieurs images avec le bouton de contrôle. À l'aide du bouton de contrôle, vous pouvez sélectionner plusieurs images et vous pouvez déposer votre image à l'aide du clic gauche de la souris. C'est super facile. Tapons maintenant « connect » avec nos étudiants actuels. Ajustons-le et créons un paragraphe. Ici, je saute cette vidéo car il s'agit d'un processus répétitif. OK ? Si je ne veux pas sauter une partie, cette vidéo serait très longue. Maintenant, appliquez la mise en page automatique. Donc, en gros, vous devez diviser votre site Web en plusieurs parties, puis fusionner toutes les parties dans la grande mise en page automatique. Donc, en gros, vous devez diviser votre site Web en petits groupes. Vous devez appliquer autolyou dans ces petits groupes, puis fusionner tous les petits groupes à l' aide d' OK. Maintenant, sélectionnons Se connecter à notre étudiant actuel, et dans la section largeur, nous devons sélectionner un conteneur de terrain. Donc, avec l'aide d'un conteneur de terrain, ce que vous pouvez faire, il agira comme une eau. Nous avons donc un cadre, et à l'intérieur de ce cadre, nous avons une eau. Donc, si vous augmentez la largeur du cadre, ce qui se passera La largeur de l'eau augmentera également par rapport à la largeur du conteneur. La même chose fonctionne également avec notre site Web. lien avec nos étudiants est donc un élément de texte, se trouve actuellement dans le cadre. J'ai donc sélectionné la propriété field container dans le texte. OK, donc ça va fonctionner comme de l'eau. Si je réduis la largeur du cadre, elle diminuera également. De même, vous devez sélectionner votre paragraphe, et encore une fois, vous devez appliquer le conteneur de champ. Maintenant, il va ajuster sa position en fonction de la taille du cadre. Si vous réduisez la taille de votre cadre, elle diminuera également. Et à partir de là, vous pouvez ajuster l'écart. Vous pouvez modifier la valeur ici. OK. Il est maintenant temps de créer un sexon différent de notre site Web, comme le sexon de profil OK. Essayons donc de reproduire cela Créons un rectangle, un rectangle plus grand. Créez un rayon d'angle. Sélectionnez maintenant une couleur blanche. Créez une petite boîte carrée pour le profil, créez un coin lisse, alignez-les correctement. Créons maintenant un autre rectangle ici. Et nous utiliserons la couleur primaire pour remplir ce rectangle. Le bleu était donc notre couleur principale. Maintenant, je vais ajuster cela comme ça. OK ? Sélectionnez donc une boîte carrée et placez-la devant notre cadre. Sélectionnez, amenez au premier plan. Donc, si vous cliquez sur Mettre au premier plan, ce sera la couche supérieure. Tapons maintenant un nom de profil texte. Je tape donc mon nom Ankit Maintenant, j'ai téléchargé une icône de profil Pour l'icône, vous pouvez également utiliser le plugin. Tu peux l'ajuster. Maintenant, je vais appliquer un effet de mise en page automatique entre ces deux éléments Ankit et cette icône, appliquer Donc, en gros, vous devez appliquer la mise en page automatique dans un petit élément, puis le fusionner avec de gros De même, créons un texte pour le concepteur UIUX. Je vais les aligner correctement. De même, tapons-les en ligne et alignons-les correctement. Nous pouvons maintenant appliquer effet de mise en page automatique entre ces éléments. Sélectionnez donc tous les éléments et appliquez la sortie automatique. Sélectionnez tous les éléments et appliquez la mise en page automatique. J'ai donc supprimé un texte en ligne parce qu' il avait l'air moche. Maintenant, je crée le bouton appelé chapeau avec Ankit. Je télécharge donc l'image PNG du chat. Vous pouvez également utiliser un plugin. Diminérons la taille. Sélectionnez le texte et l'icône, alignez-les correctement et appliquez la mise en page automatique. Augmentez maintenant la taille du cadre et vous pouvez les convertir en bouton. Vous n'avez pas besoin d'un rectangle ici. Vous pouvez convertir votre cadre en bouton comme ceci. Si vous sentez de la couleur sur votre cadre, il se convertira sur le bouton. Changeons maintenant la couleur du texte. Ajustez-le correctement. Maintenant, je vais sélectionner l'élément entier, et je vais appliquer Autoout, mais ça a l'air moche Donc, ce que je vais faire, c'est supprimer Autoot et ensuite fusionner ces deux éléments en tant que groupe Maintenant, je vais appliquer Autoout. OK. Donc, parfois, si vous rencontrez des problèmes, vous devez essayer de convertir deux éléments en groupe, puis convertir deux éléments en groupe, vous pouvez appliquer la sortie automatique OK. Répliquons-les donc Ainsi, chaque fois que vous rencontrez des difficultés lors de la création d'Autoeout, vous devez regrouper intelligemment deux éléments et ensuite appliquer Autoayout Maintenant, téléchargeons toutes les images. À l'aide du bouton de contrôle, vous pouvez sélectionner plusieurs images et les déposer facilement comme ça. Sélectionnez maintenant notre cadre et appliquez Autoaout. Mais vous pouvez constater qu'il ne répond pas à nos besoins. Ensuite, ce que nous allons faire, nous allons faire glisser tous nos composants comme ceci. Comme il répond à nos besoins, c'est pourquoi nous n'avons plus besoin d'un cadre blanc. Nous pouvons convertir ce cadre en cadre blanc. Il suffit de sélectionner votre cadre et vous pourrez sentir votre couleur comme ça. Vous pouvez sentir la couleur blanche. Vous n'avez pas besoin d'un cadre blanc. OK ? Ajustons le texte. Faisons maintenant glisser notre logo dans notre nouveau cadre. Ajustons-le. Donc, les gars, vous pouvez voir que cela fonctionne bien. Enfin, nous avons créé une page responsive. OK, les gars, si vous aimez cette conférence, n'oubliez pas de me donner une bonne note positive et commentaires pour que je puisse me motiver. OK, au revoir.