Fondements Figma : Introduction au design d'interface utilisateur

1. Introduction: Salut les gars, je m'appelle Peter et bienvenue dans la classe. Donc, pour aller droit au but, si vous voulez maîtriser quoi que ce soit dans la vie, il est très important que vos bases soient claires. Et c'est exactement ce que nous faisons dans cette vidéo en apprenant les bases de Figma. Dans ce cours, nous allons donc partir du strict minimum de la création d'un compte Figma. Ensuite, nous voulons explorer l'interface de Pigma, où nous approfondissons la section consacrée aux couches cette semaine, mes outils, le panneau des propriétés, tout avec quelques exemples pertinents. Enfin, nous allons terminer en limitant toutes les connaissances que nous avons acquises en créant une page de destination permanente. Donc, les gars, à la fin de ce cours particulier, vous aurez une idée précise de ce qu' est Figma et de ce qu'est la Figma potentielle. Et vous serez sûr à 100 % de créer un design de base à l'aide de Figma. Il s'agit donc d'un aperçu de haut niveau de ce que cette classe en particulier, et il y en aura beaucoup plus et il y en aura beaucoup plus à ce sujet dans la prochaine instance. Merci beaucoup d' avoir regardé et j' espère vraiment vous voir dans la prochaine vidéo. 2. Commencer avec Figma: Alors les gars, dans cette vidéo, voyez comment démarrer avec Figma. C'est ainsi que nous pouvons créer un compte sur Figma. Cette vidéo s'adresse donc aux débutants qui n'ont pas encore de compte Figma. Donc, si vous avez déjà un compte, je peux probablement ignorer cette vidéo en particulier. Donc, pour créer un compte sur Figma, encore une fois, rendez-vous sur l'URL www dot figment are cool, qui vous redirigera directement vers ce site Web particulièrement magnifique. C'est donc un avantage vraiment instructif et bien construit. Je vous suggère de consulter ce site Web en particulier, voir ce qui rend Figma unique. Quelles sont les différentes fonctionnalités et bien plus encore. Donc, si vous avez déjà un compte, vous pouvez directement accéder à la page de connexion et vous connecter à l'aide de vos informations d'identification. Donc, si vous n'avez pas de compte, vous pouvez cliquer à nouveau sur Commencer, saisir un e-mail, un mot de passe, créer un compte, le vérifier, et vous serez prêt à partir, sinon, pour faciliter les choses, vous pouvez vous inscrire directement auprès de Google. Il s'agit donc de la partie création du compte. Donc, pour l'instant, je vais me connecter puisque j'ai déjà un compte. Alors les gars, en ce moment, nous sommes dans bord Figma et, comme vous pouvez le voir, nous avons quelques projets sur lesquels je travaille. Vous pouvez également créer un nouveau fichier de conception à partir d'ici. Vous pouvez également importer un fichier existant à partir d'autres outils. heure actuelle , nous accédons à Figma via leur application Web et toutes les autres données sont essentiellement stockées dans le cloud et rien n'est transféré sur le stockage local de votre machine. Vous pouvez donc également obtenir Figma et une application de bureau. Vous pouvez cliquer sur le logo de votre annonce ici, et vous pouvez également cliquer sur Obtenir l'application de bureau pour télécharger Figma sur votre machine locale. Voici donc le tableau de bord de base. Cliquons donc sur le nouveau fichier de conception pour créer un nouveau fichier. Alors les gars, c'est Figma qui a de l'interphase. Donc, ne vous inquiétez pas si vous ne comprenez pas ce que sont les choses, nous allons essentiellement approfondir chacune des différentes sections chacune des différentes sections dans les prochaines vidéos. Donc, tout ce que je voulais dire dans cette vidéo c'est que si vous êtes un débutant, je voulais juste vous aider à démarrer avec Figma, créer un compte, à consulter le tableau de bord et à créer un nouveau projet. C'est donc tout à propos de cette vidéo en particulier. Merci beaucoup d'avoir regardé, et je vous verrai dans la prochaine vidéo. 3. Aperçu de l'interface Figma: Alors les gars, dans cette vidéo, je vais vous donner une interface ou une vue de Figma. Dans la vidéo précédente, nous avons donc créé un nouveau projet. Et comme vous pouvez le constater, l'interface utilisateur de Figma est assez simple et très facile à comprendre. Et puis la mort dans le visage est principalement divisée en quatre sections différentes. Sur la gauche, vous pouvez voir la section des couches. Ainsi, chaque fois que vous ajoutez un objet ou une image, tous ces éléments peuvent être organisés sous forme de couches, ici même dans la section de gauche. En fait, vous pouvez voir la structure complète de votre projet en regardant simplement la section des couches. C'est donc à peu près la dernière section. Et en haut, vous pouvez voir la section des outils. Et Figma a relativement moins d'outils. Mais tous ces outils sont plus que suffisants pour créer n'importe quel type de design. Et c'est ce qui fait la beauté de Figma. Les choses sont assez simples, mais vous disposez d' une quantité suffisante d'outils et de ressources pour convertir votre idée en un design approprié. Et en bas, vous pouvez voir la toile. En bref, c'est un endroit où nous construisons essentiellement le design. Et vers la droite, vous pouvez voir la section des paramètres ou la section des propriétés. C'est là que nous personnalisons essentiellement un objet individuellement. Cette section est donc à nouveau divisée en conception, prototype et inspection. Mais nous nous en tiendrons très probablement à la section design. Alors les gars, il s'agit essentiellement un aperçu de haut niveau de chaque Figma. Dans les prochaines vidéos, nous allons aborder chaque section et approfondir leurs fonctionnalités. Vous y trouverez différents trucs et astuces, meilleures pratiques et toutes ces informations dans les prochaines vidéos. Voilà pour cette vidéo, et je vous verrai dans la prochaine vidéo. 4. Outils Figma: Alors les gars, dans cette vidéo, examinons les différents outils qu'offre la stigmatisation. Laissez-nous comprendre ce qu'ils sont et quelles sont les différentes fonctionnalités qu'ils offrent. Le premier que je peux écrire ici, dans la section des outils , est essentiellement le menu principal qui offre une certaine aversion fonctionnelle de base plutôt qu'une belle vue féminine. La chose typique que nous pouvons voir sur n'importe quel type de site Web. L'outil suivant est essentiellement qu'il sera déplacé vers l'outil de déplacement, comme son nom l'indique, est essentiellement utilisé pour déplacer des objets et le canevas. Ainsi, par exemple, si j'ai une structure de symboles ici même sur le canevas, je peux utiliser l'outil de déplacement pour la déplacer sur le canevas. Il s'agit donc de l'outil Move. Et nous avons également saisi un outil à cette échelle. Quelle est donc la différence entre l'outil Move et l'outil Scale ? Nous parlerons d'une autre différence ou d'un test dans une seconde. L'outil suivant est donc essentiellement le cadre. Le Frame Tool est l'un des outils les plus importants de Figma. Donc, au moment où je clique sur le cadre direction de la section des paramètres, je vois à nouveau beaucoup d'entre eux saigner, comme celui de Frame Them Blade pour téléphone, tablette et ordinateur de bureau, ou bien vous pouvez également créer un cadre de taille personnalisée ici. Nous pouvons donc voir que nous en avons un cadre ici même sur la toile. L'iframe peut donc être considéré comme un document distinct, sur lequel sera essentiellement construit notre design. Donc, ici, je peux cliquer sur cette bobine aux quatre coins, si elle tombe du coin. Et je vais cliquer, le redimensionner et décider, disons un. J'allais utiliser les outils ici pour modifier les axes x et y, c' ici pour modifier les axes x et est la largeur et la hauteur à partir des paramètres qu'ils peuvent aspirer. Donc, si je veux un modèle prédéfini, je peux à nouveau sélectionner les huiles pour cadres. Je peux utiliser le raccourci F. Et je peux sélectionner n'importe lequel pour le modèle prédéfini. Et ce sera directement sur mon Canvas. Cela concerne donc l'outil de cadre. Ainsi, chaque fois que nous nous intéresserons à notre conception, nous la concevrons essentiellement pour un ordinateur de bureau, un mobile ou une tablette. Dans ce cas, ils sont prédéfinis. Les modèles sont des cadres prédéfinis qui sont pratiques. C'est donc à peu près tout, l'outil Frame. Et nous avons également une deuxième tranche. Permettez-moi donc d'expliquer l'outil Slice à l'aide d'un exemple. Alors laisse-moi le coller. Nous avons donc ici un petit dessin simple. J'ai donc déjà sélectionné un outil découpe et je vais définir cette section particulière ici. J'ai essentiellement utilisé cette partie particulière du design et ils peuvent vous voir dans la bonne direction. Et si je clique sur Exporter et sélectionne Aperçu, vous pouvez voir que les souris FIC n' exporteront que la zone que j'ai découpée. Donc, si je modifie cette tranche, replacez-la à nouveau en fonction des modifications de l'aperçu. Donc, si nous voulons n' exporter qu' une partie particulière du design, c'est là que les diapositives peuvent être utiles. Je peux définir la zone que je souhaite exporter. Et encore une fois, venez ici pour cliquer sur prévisualiser et exploiter la partie correspondante. Cela concerne donc l'outil Slice. Passons maintenant au troisième de la liste. Ce sont les formes. Et je pense que More propose des formes comme des rectangles, lignes, des adultes, des ellipses, des polygones , des étoiles et bien d' autres choses différentes. Et tous ces éléments sont des designs explicites que je veux sélectionner et je peux simplement les faire glisser sur la toile et ils sont dedans. Et chaque fois que j' ajoute un objet, par exemple un rectangle, vous pouvez voir les bords de ce Coyer, qui sont utilisés pour redimensionner des nœuds ou qui contiennent des cercles, qui sont essentiellement utilisés pour tout le rayon, c' est-à-dire un rayon de bordure. Je peux le déplacer vers l'intérieur ou vers l'extérieur. En conséquence, cela augmentera ou diminuera essentiellement le rayon de la bordure. C'est donc à peu près ça. Et ici, dans le troisième outil, nous avons également joué une image. Donc, lorsque je clique dessus, j'ai essentiellement demandé de sélectionner une image. Lorsqu'ils sélectionnent une image, utilisez une autre touche, faites-la glisser ici. Ainsi, chaque fois que vous redimensionnez la moyenne, l'image correspondante est également redimensionnée en conséquence pour l'aligner. C'est donc une bonne chose. Ainsi, lorsque je le modifie, nous pouvons également voir la musique être modifiée en conséquence. Donc là encore, je peux modifier la taille de l'image. De plus, c'est borderradius. Et si je sélectionne l' image ici dans les paramètres, encore une fois, je cliquerai sur l'image et je procéderai une correction des couleurs même dans les paramètres, encore une fois, je cliquerai sur l'image et je procéderai à une correction des couleurs de base ou à des modifications de base pour le média. Je peux également choisir une image. Je peux remplacer l'image. Toutes ces choses peuvent également être faites ici. Cela concerne donc l'outil Place Image. Cela peut s'avérer utile lorsque vous travaillez avec des sites Web sur lesquels vous souhaitez modifier les principales activités, effectuer immédiatement des tâches de base. Pour tous ces scénarios, l'outil Place Image est très pratique. Maintenant, nous n'y sommes pas parvenus. Le stylo, comme son nom l'indique, est également assez explicite. Il est essentiellement utilisé pour créer des designs personnalisés. Vous pouvez faire certains designs que Sigma ne propose pas par défaut à l'aide du stylet. Et nous avons également l'outil de pliage qui est utilisé pour, pour créer une sorte de courbure, des arêtes plus nettes. Cliquez dessus et cela va créer une courbure. Et nous avons également une poignée à l'aide de laquelle vous pouvez essentiellement aligner l' angle pour le virage. Donc, si je clique à nouveau sur le cercle, la structure précédente sera rétablie. Cela concerne l'outil stylo et l'outil Pen ici. Et nous avons aussi un seau à peinture pour papa. Je peux donc sélectionner une zone et lui attribuer une couleur. Donc, tout va dans le pot de peinture. Outre le stylo, nous avons également le crayon qui, comme son nom l'indique, permet de réaliser des tâches générales sur le Canvas. Très bien, et laisse-moi juste le sélectionner. Et supprimons-le. Et nous avons également r d x2, lequel je peux sélectionner l'outil de texte, dans lequel je peux sélectionner l'outil de texte, cliquer sur un endroit du canevas et encore une fois indirectement. Donc, ici, je peux sélectionner le texte et ici, dans les paramètres, je peux personnaliser un mur de choses concernant le texte. Je peux modifier le type de texte. Nous avons entendu de nombreux types de textes différents les téléphones préinstallés avec Figma. Et je peux également ajouter des polices personnalisées. Je vais donc ajouter Poppins. Ici, je peux sélectionner les différents paramètres en gras. Je vais mettre cette touche supplémentaire en gras pour modifier à nouveau la taille des textes. Beaucoup de choses peuvent être faites ici. Vous pouvez donc voir ici que nous avons nos différents paramètres, comme l'axe X, l'axe Y, la largeur, la hauteur, toutes ces choses peuvent également être modifiées. Et aussi chaque fois que nous écrivons ceci comme ça, je peux appuyer sur Alt sur mon clavier. Dans le cas où les fenêtres sont des options sur Mac, cela transformera le curseur en curseur. Cela, et je peux faire glisser la valeur vers la gauche ou droite pour augmenter ou diminuer la taille. Par exemple, je peux sélectionner le texte et j'arrive au sélecteur de taille ici, je vais appuyer sur la touche Option de mon clavier. Et encore une fois, faites glisser le pointeur vers la droite ou vers la gauche pour augmenter ou diminuer la taille du texte. Il s'agit d'un petit raccourci symbolique permettant à nouveau à la Rumba modifier ces valeurs de manière beaucoup plus rapide. Cela concerne donc le texte. Voyons maintenant quelle est la différence entre l' outil Move et l'outil de mise à l'échelle, dont nous n'avons pas parlé. Donc, si je sélectionne l'échelle ici même, encore une fois, redimensionnez le texte et le texte contenu dans les autres contenus qu'il contient évolue également en même temps. Mais dans le cas d'un outil de déplacement, cela ne se produira pas et la zone suivante ne sera pas redimensionnée. Maintenant, je peux utiliser l'outil de mise à l'échelle pour augmenter la taille du texte en même temps que celle de ses bordures ou de sa zone . Vous pouvez également constater que la taille par défaut est également la même en Grèce. C'est donc la différence entre l' outil Move et l'outil Scale. Ici, j'ai papa et un outil, qui sont généralement utilisés pour déplacer des objets. Et nous avons également des ressources telles que vous pouvez accéder à des composants, des plug-ins et à toutes ces choses. Et nous avons également reçu le commentaire trop léger ici. Le double commun est donc plus pratique lorsque vous travaillez en équipe, en particulier avec plusieurs personnes. Vous pouvez ajouter un commentaire, par exemple, si vous voulez une personne en particulier, mais que vous modifiez la couleur du texte, vous pouvez cliquer sur le texte. Après avoir sélectionné l'outil commun, je peux simplement ajouter un changement radical, couleur du texte et le placenta. Donc, ici, vous pouvez voir que mon nom vient essentiellement ici. Ainsi, lorsqu'une autre personne se connecte à ce même projet, vous pouvez voir ma commande ici, y répondre et , en gros, résoudre le commentaire. Donc oui, en ce qui concerne l'outil commun, voici donc quelques-uns des outils proposés par Figma. Comme vous pouvez le constater, ces outils se trouvent à notre numéro de leçon, mais ils sont plus que suffisants pour transformer une idée en un design. Il s'agit d'un aperçu assez basique des différents outils proposés par Figma. Ensuite, j'espère que vous avez une compréhension de base des différents outils et des différentes fonctionnalités de chaque outil. C'est donc tout pour cette vidéo en particulier, et je vous verrai dans la prochaine vidéo. 5. Aperçu du panneau de propriété: Alors les gars, dans cette vidéo, jetons un coup d'œil à la section Daddy Property de Figma. Je veux donc tout de suite créer un cadre sur la toile. Pour cela, je vais utiliser le raccourci qui consiste à appuyer sur la touche F du clavier. Et je vais faire glisser dans un simple petit cadre Model Canvas. Ça va ? Et je peux également modifier la couleur de la toile afin que vous puissiez faire la distinction entre la toile et le cadre lui-même. Et après cela, je vais également ajouter une ellipse. Je peux donc cliquer dessus et ajouter une ellipse. Ou je peux utiliser le raccourci 0. Et laisse-moi dessiner une ellipse. Alors, juste un petit conseil pour vous. Comme vous pouvez le constater à l'heure actuelle, les points de suspension sont essentiellement élargis, achetés en largeur et en hauteur. est-à-dire que c'est une sorte d'objet fluide. Donc, pour obtenir une ellipse parfaite ou pour modifier simultanément la hauteur et la largeur, je peux appuyer sur la touche Shift du clavier. Et si je le fais glisser maintenant, la largeur et la hauteur seraient fondamentalement liées et s' élargiraient dans la même proportion. C'est donc un petit conseil pour vous. Maintenant, je peux utiliser les lignes directrices pour aligner cet objet particulier et le centre du cadre. Et permettez-moi également de changer la couleur de l'ellipse. Nous avons maintenant un petit dessin sur la toile. Donc, dès que je clique sur cette ellipse particulière, ici , dans les paramètres de la propriété. J'ai entendu de nombreux réglages que je peux modifier pour cet objet en particulier sur le chien. Vous pouvez voir ici les différents outils d'alignement tels que l'alignement, la gauche, l'alignement, le centre, l' alignement à droite, l' alignement en dessous du dessus et toutes ces choses. Cela peut donc s'avérer utile si vous souhaitez aligner un objet particulier dans une position particulière à l'intérieur des trois lumières. Maintenant, je ne l'ai pas appris de retour au centre. Et juste en dessous, nous avons nos paramètres qui peuvent nous aider à modifier la position de l'objet. Par exemple, I. Peut modifier la position en termes d'axe X et d'axe Y. Nous pouvons également saisir des valeurs manuellement ici. Et ici, je peux augmenter ou diminuer la largeur ainsi que la hauteur. Donc, à l'heure actuelle, la largeur et la hauteur sont liées comme vous pouvez le voir avec cette proportion de contrainte particulière. Donc, si je la décoche, la largeur et la hauteur peuvent être modifiées individuellement ou elles auront un impact individuel. Comme vous pouvez le constater en ce moment. Ici, je peux essentiellement faire pivoter l'objet. Donc, puisqu'il s'agit essentiellement d'une ellipse, puisque nous avons une largeur et une hauteur différentes. heure actuelle, vous pouvez voir qu'il y a en fait une rotation ici lorsque nous les survolons également. Vous pouvez voir un petit point ici. C'est donc l'arc. Donc, si je clique dessus, je peux essentiellement spécifier un arc. Encore une fois , cliquez et faites glisser dessus, je peux également fournir une valeur ici. Cela peut donc être très utile, surtout lorsque nous créons des diagrammes à secteurs et tout le reste. Cela peut s'avérer très utile. Et nous avons également d'autres outils qui peuvent nous aider à créer un arc précis. Voilà, ce qui concerne l'outil Arc. Et juste en dessous, nous avons également des contraintes. Ainsi, comme vous pouvez le voir maintenant, la contrainte est définie en haut et à gauche. Vous pouvez voir une petite ligne à partir du haut ainsi que sur la gauche. Donc, si je sélectionne le cadre et que je me déplace de la droite vous pouvez voir que rien ne se passe fondamentalement. Mais quand j'ai essayé de déplacer le cadre depuis la gauche, vous pouvez voir que l'objet est fixé en haut à gauche, c' est-à-dire en haut et à gauche. Cependant, si je change le cadre, l'objet sera fixé en haut à gauche, par exemple si je sélectionne l'objet et si je modifie la contrainte au centre, au centre et au centre. Vous allez donc voir que, même si je change, le cadre sera fixe ou desserré et beaucoup plus gratuit. Cela concerne donc les contraintes. contrainte est donc très pratique, en particulier en termes de conception Web adaptative phi lorsque nous voulons spécifier comment un objet doit être placé, dans quel ordre. Dans ce type de scénario, les contraintes jouent un rôle très important. Soit en cliquant sur ce bouton, les glycanes et lesdites huiles de contrainte peuvent cliquer et définir la contrainte requise. Cela concerne la section des contraintes. Passons donc à autre chose, nous n'avons pas encore rempli la section. Donc, si vous cliquez sur la section de remplissage, pouvez essentiellement changer la couleur de l'objet. Je peux essentiellement passer du solide ou utiliser diverses autres options que nous avons pour le linéaire ici, où vous pouvez spécifier la couleur du dégradé linéaire que nous voulons. Nous l'anatomons également, encore une fois. Ici aussi, nous avons quelques paramètres de base , ils sont tellement géniaux. Outils de base ou de retouche d'images également. Oui. De nombreuses options sont également disponibles ici. Et ici aussi, nous pouvons spécifier la couleur dans différentes unités comme le hexadécimal, le RGB. Il existe également plusieurs options pour spécifier la couleur d'enregistrement possible. Et ici, vous pouvez spécifier l'opacité de la couleur. Donc, ici, je peux également utiliser l'ancienne fonction pour augmenter ou diminuer l'opacité. Et je peux aussi gagner de plus en plus. Juste en dessous, j' ai cette option d'achat d'actions. Donc, si je clique sur plus, un trait sera ajouté ici, je peux changer la couleur du trait, par exemple si je veux une sorte de trait vert, je peux l'ajouter ici. Je peux plutôt spécifier où je souhaite effectuer le trait, des informations et des données, ou en dehors. Ici, je peux spécifier l' épaisseur du trait, augmenter ou la diminuer. Et je peux également ajouter plusieurs traits en cliquant sur l'icône plus. Et ici, si je clique sur les trois points, je peux essentiellement sélectionner le style de stock. Si je voulais du solide ou du rapide. Ou je peux spécifier l'espace en pointillés. Je peux spécifier la jointure. Si j'en ai besoin, c'est de la netteté, de l'humeur. De nombreuses options sont également disponibles ici dans l'option d'achat d' actions. C'est donc tout ce qui concerne la section des camions. Alors laissez-moi simplement le supprimer. Et juste en dessous, nous avons la section des effets. Je vais donc cliquer sur l'icône plus. Et par défaut, pour l'automne nous aurons l'ombre tombante. heure actuelle. Si nous y regardons de plus près, nous avons une légère ombre ici. Donc, si je clique sur cette icône en particulier, j'aurai plus d'options pour personnaliser l'ombre. Spécifiez donc à nouveau l'axe X. Spécifiez à nouveau l'axe Y, comme une augmentation ou une diminution du sang. Et ici, je peux également spécifier la couleur. Donc, soit je peux spécifier manuellement la couleur que je souhaite pour le public. Ici, vous pouvez cliquer sur Maintenant, cet outil à stylet en particulier. Ou vous pouvez également appuyer sur le raccourci clavier, c'est-à-dire. Et vous pouvez voir que nous avons maintenant le stylet. Et ici, vous pouvez choisir la couleur que vous souhaitez et obtenir une couleur parfaite au pixel près. Donc, à l'heure actuelle, il y a des électrodes, des objets particuliers. Nous avons donc la même chance de l' usage subtil réservé qu'il a vendu. Réduisez donc les listes de tri pour les rendre un peu floues, augmentez l'axe X et l'axe Y. Et augmente également. Mais ces personnalisations géniales et si petites qui, encore une fois, visent essentiellement à améliorer les ombres. Nous avons également d'autres options si vous cliquez sur la flèche déroulante, comme notre couche d'ombre intérieure, le flou, le flou d'arrière-plan et différentes options, puis faites à nouveau votre choix. Cela concerne donc la section Effets. Enfin, nous sommes arrivés à la section d'exportation. Ainsi, lorsque nous la sélectionnons ici, et là encore, spécifiez la taille qui correspond à x. Ainsi, par exemple si votre image ou le StartIndex de conception, si vous sélectionnez x, la zone de confort sera quatre fois supérieure à la taille d'origine. Cela concerne donc les critères de sélection du site. Et ici, vous pouvez sélectionner tous les formats dans lesquels vous souhaitez exporter. Et il peut également avoir un petit aperçu de la façon dont le design va se dérouler. Et vous pouvez cliquer sur Exporter et il sera téléchargé. Alors merci les gars. Tout dépend essentiellement de l'interface de Figma. J'espère que vous avez une idée de base concernant les objets pour femmes, les objets haut de gamme à utiliser là où se trouvent les objets, et une idée générale qui peut vous aider à naviguer confortablement dans votre propre Figma. Alors ça y est, les gars. Et je vous verrai dans la prochaine vidéo. 6. Concevoir une page de destination: Alors les gars, dans les vidéos précédentes nous avons vu ce qu'est Figma. Quels sont les différents outils proposés par la navigation, où pouvons-nous y accéder et à quoi servent-ils ? Mais nous n'avons encore rien fait de concret. Dans cette vidéo, nous allons donc mettre en pratique toutes les connaissances que nous avons acquises. Mon bâtiment, une page de destination comme celle-ci. Dans cette vidéo, nous allons donc construire cette plage de débarquement particulière. Ainsi, tous les actifs utilisés dans cette vidéo seront répertoriés dans la section des projets et des ressources. Vous pouvez y accéder à partir de là. Donc, si nous avons plus de temps, mettons-nous à la construction de ce projet en particulier. Alors les gars, j'ai déjà créé un nouveau projet ici. La première étape consiste donc à créer un cadre pour cela. Je vais appuyer sur le raccourci F de mon clavier pour sélectionner l'outil de cadre. Et je vais dessiner un cadre ou ma toile. Ensuite, je vais accéder aux paramètres des propriétés et je vais modifier la largeur et la hauteur. La largeur sera de 2560 et la hauteur d'un quart pour zéro. C'est donc sur cette taille que nous allons travailler. Bien. Laisse-moi l'aligner vers le centre. Et maintenant, sélectionnons le cadre et changeons sa couleur de fond. Je vais donc entrer dans la section des champs et la sélectionner. Ici. Je vais utiliser un dégradé linéaire. Je vais donc le changer de solide à linéaire. Et permettez-moi également d'ajuster la poignée ici. Bien. Maintenant, sélectionnons la première poignée, c'est-à-dire la poignée de gauche. Et je vais à nouveau changer la couleur en foncé, et je vais sélectionner la bonne poignée. Et je vais y arriver ici. Et je vais augmenter l'opacité au maximum, à la lumière et au maximum, ou simplement à l'aide d'un curseur. Nous avons maintenant un arrière-plan en dégradé linéaire. Et permettez-moi également de le faire un peu plus vers la droite. Maintenant, ça a l'air bien. Maintenant, ce que je vais faire, c'est ajouter un objet rectangulaire vers la droite de cet arbre en particulier. Pour cela, je vais appuyer sur Alt sur mon clavier pour sélectionner l'outil rectangulaire. Et je vais essentiellement dessiner un rectangle par dollar ici. Encore une fois, je vais sélectionner le rectangle et passer à une autre section ici. Et je veux changer l' arrière-plan par radiale. Et encore une fois, je veux le rendre un peu plus sombre. Sélectionnez la poignée la plus haute. Je vais faire en sorte que celui-ci soit sombre et l'autre un peu clair. Ajustez légèrement la poignée, la position. Bien. Et nous apportons également quelques légères modifications ici. Laisse-moi avoir un peu plus de lumière. Maintenant, ça a l'air bien. Nous avons donc maintenant créé un dégradé radial ici, vers la partie droite du cadre. Et maintenant, il est temps d'ajouter quelques images. Ici. J'ai déjà ajouté quelques images ici. Donc, pour obtenir ce genre d'images, c'est assez facile. Il existe en fait une extension. Donc, en ce moment, je suis dans un bureau de Logitech. Répète. Voici donc les images que nous avons utilisées pour cette vidéo en particulier, mais vous ne pouvez pas cliquer directement avec le bouton droit les enregistrer et les utiliser, sinon cela ne fonctionnera pas réellement avec Sigma. Donc, ici, nous pouvons essentiellement utiliser une exposition intitulée Fat can batched already meet. Donc, si je sélectionne cette extension particulière, je peux sélectionner l'application actuelle. C'est-à-dire que si je clique dessus, cette extension va maintenant afficher toutes les images présentées sur cette page Web particulière. Il peut donc directement cliquer et les télécharger au format PT PNG. Il s'agit donc d'un outil pratique que vous pouvez utiliser pour télécharger des images de haute qualité à partir de sites Web officiels tels que celui-ci où les images des produits sont de haute qualité. C'est donc un petit conseil pour vous. Maintenant, ajoutons en gros les principaux éléments du canevas. C' est une sorte de cadre. C'est l'image principale du héros. Placez-le juste ici. Hein ? Notez également que vous pouvez ajouter ces images à droite de l'image du héros. L'arrière-plan est un peu plus clair, alors laissez-moi le rendre un peu plus sombre. Et ça a l'air bien. Je vais les placer juste ici. Donc, afin de le diminuer. Maintenant, nous avons essentiellement ajouté les médius et nous les avons regroupés. Maintenant, si nous examinons notre projet terminé, vous pouvez voir que nous avons un bel anneau autour de cette souris en particulier. Alors maintenant, créons cet effet particulier. Donc, pour cela, permettez-moi de zoomer un peu. Et je vais tous nous placer sur mon clavier pour sélectionner l'outil ellipse. Et je vais dessiner une ellipse comme ça. Laisse-moi le placer ici. Maintenant, je veux accéder à la section des champs et je vais supprimer le remplissage à partir d'ici. Maintenant, pour cela, je veux ajouter un trait et augmenter l'épaisseur à deux. Et je vais sélectionner la couleur qui doit être une couleur grisâtre ici. Et je veux changer l'arrière-plan ou le trait de type 2 linéaire. Permettez-moi de faire quelques légères modifications ici. Rends-le un peu plus lumineux. Et je veux le faire pivoter comme ça et le laisser, ou simplement le positionner pour qu'il soit beau. Faisons donc quelques légers ajustements. Rendons-le un peu plus petit. Très bien, ça a l' air vraiment bien. Jouez avec le dégradé linéaire pour le rendre un peu plus réaliste. Bien. Maintenant, nous avons déjà créé notre défaut de souris aussi connu, qui a l'air vraiment bien. Maintenant, nous en avons terminé avec ça. Maintenant, créons également tous ces liens désormais erronés là-bas. Je vais appuyer sur la touche T mon clavier et je vais cliquer ici. Donc, le premier là-bas est quelque sorte un pas par ici. Et je vais sélectionner les couches par défaut pour changer la taille de police à 24. Et vous souhaitez également changer la couleur du téléphone à cette valeur particulière. Maintenant, je peux appuyer sur la touche Alt du clavier et la maintenir enfoncée , cliquer et faire glisser. Et cela va faire une copie exacte de ce texte en particulier. Et l'octet suivant supprime le boutique support commercial de la boutique. heure actuelle, établissons correctement la portée du signal sur ces liens. Ces directives sont donc très utiles à placer. Ces éléments sont dans la bonne position avec un espacement adéquat ou constant. Hein ? Nous avons maintenant ajouté les liens de navigation. Amenons-le également un peu plus haut. Et une autre chose que je veux faire, c'est dire que la boutique change sa couleur en blanc. C'est donc un peu comme si nous étions dans la version bêta courte en ce moment. Les liens de navigation sont donc corrects. Sélectionnons-le et déplacons-nous un peu vers la droite. Et créons-en également une autre copie. Nima convient. Et créons une autre copie. Le logo Windows. Ici, j'ai deux icônes. C'est copié et collé ici. Hein ? Oui, ils ont l'air bien là-bas aussi. Permettez-moi donc également d' ajuster légèrement leur position. Très bien, ils cherchent une définition maintenant. Ils ont l' air un peu loufoques. Ils ne sont pas parfaitement alignés. Permettez-moi donc de les sélectionner et de les aligner ensemble. air plutôt plat. Nose ajoute également le logo ici. Produit. Et puis amenez-les légèrement vers la droite. Maintenant, ils ont l' air plutôt bien. Nous avons en fait créé la barre de navigation supérieure ainsi qu' un identifiant de recherche, ainsi que le logo. Et maintenant, il est temps d'ajouter à nouveau le contenu du texte ici même. Et puis un B plus , pour taper MX Master 3. Ensuite, je suis sélectionné et je vais changer la coque du téléphone en majuscules. Et je vais également augmenter notre taille de police de 200. Et je veux aussi changer l'audace en audace. Et puis asseyez-vous juste ici. Encore une fois, je veux cliquer sur ce texte en particulier tout en appuyant sur Alt, je vais en faire une copie. Fait un CD de mixage. Donc, pour utiliser la taille 30, je vais donner une audace déformée à normale et je vais augmenter l'espacement entre les lettres. Je vais le placer juste au-dessus du plat principal. Bien, maintenant, ajoutons également cette description de base particulière du produit. Encore une fois, même un plus, la touche D du clavier. Et collons-les ici. Ici. Nous avons déjà hérité du style du projet précédent. Nous n'avons donc fait que changer la couleur du texte. Collons-le ici. Maintenant, ce dont nous avons besoin, c'est de la partie révision. Donc, encore une fois, appuyez sur la touche de raccourci textuelle T, puis tapez plus de 50 critiques. Nous devons également ajouter quelques étoiles. Permettez-moi donc de zoomer un peu depuis la section des formes ou de sélectionner ou de sélectionner l'outil Star. Et je vais ajouter ce noir et ils vont former des équipes. C'est bon pour 30 ans ou Lockett. Tout d'abord, je ne veux pas changer la largeur à 35, n'est-ce pas ? Et créons une copie. Je vais donc attendre quelques fois pour faire cinq de ces doses. Faisons de la place ici. Et je veux sélectionner la dernière étoile et la rendre un peu plus sombre pour qu' elle mette en valeur ce produit en particulier qui a quatre étoiles. Permettez-moi de les sélectionner, de les regrouper et de les placer ici. Maintenant, laissez-nous créer cette section de tarification particulière ainsi que le bouton Ajouter au panier. Donc, le montant souhaité dans la section des prix, soit 99,999 dollars augmentera la taille pour le placer juste ici. Ajoutons également ce rectangle ici. Et je vais ajouter un texte à titre de protection. Permettez-moi de réduire sa taille. Ensuite, je veux qu'une équipe prenne ce rectangle en particulier et qu'il prenne une couleur foncée. Je souhaite changer la couleur du texte en blanc. Nous diminuons également la profondeur. Et laissez-nous également arrondir les bords. Hein ? Maintenant, dessinons parfaitement ce texte vers le centre de ce bouton particulier afin sélectionner les deux et de sélectionner les centres verticaux d'alignement. Et cela va parfaitement aligner ce texte particulier vers le centre de cet élément rectangulaire particulier. Et permettez-moi également de les regrouper. Et placons-le juste ici. Ça a l'air plutôt bien aussi. Donc, ici, vous pouvez voir que l'arrière-plan semble un peu vide ou éteint. C'est pourquoi j'ai ajouté cette sorte de superposition de texte en forme de M qui remplit le vide de l'arrière-plan. Alors maintenant, ajoutons-le également ici. Pour cela, je vais ajouter un texte de M max. Et augmentons la taille à 200, ou peut-être même plus. Et laissez-moi le placer juste ici. Je veux changer le bolus en gras. Et je vais appuyer sur le crochet d'ouverture pour le placer vers l'arrière. Et je vais sélectionner le texte et supprimer le remplissage à partir d'ici. Et je veux ajouter un trait et la couleur du trait sera un peu vive. En Grèce. L'épaisseur est de deux. Permettez-moi de réduire un peu l'opacité. Et cela va parfaitement rendre l'arrière-plan un peu plus riche. Permettez-moi de sélectionner ceci et de les placer en haut de la page. Amenons-le un peu plus bas. Maintenant, ça a l' air plutôt bien. Ici. Je pense que ça a l' air un peu brillant. Encore une fois, cela pourrait être la profondeur. Encore une fois, je pense que l'arrière-plan doit être un peu plus sombre vers la droite. Alors, ajoutons-y plus d'obscurité. Maintenant, ça a l'air plutôt bien. Nous avons presque imité l'intégralité du prototype dans notre projet. Vous pouvez voir ici que nous avons une différence entre la gauche et la droite. Pour cela, sélectionnons le cadre, passons à la section des champs et sélectionnons le gaucher et augmentons légèrement la luminosité de la couleur. Et cela va apporter une différenciation ici même. Alors ça y est, les gars. Il s'agissait donc d'un petit tutoriel ou d'un exemple pratique sur la façon dont nous pouvons essentiellement donner vie à un design. J'espère donc que vous avez pu apprendre quelque chose de cette vidéo en particulier. Donc, comme je l'ai déjà dit, vous pouvez accéder à toutes les ressources disponibles ou à tous les actifs disponibles dans la section projet et ressources dans la section projet et ressources à partir de là. Alors ça y est les gars, merci beaucoup de Y2 et je vous verrai dans la prochaine vidéo. 7. Conclusion: C'est ça, les gars. Vous avez atteint le bout du verre fondamental féminin. Et cela montre à quel point vous êtes passionné par la conception de l'interface utilisateur. Et j'espère vraiment avoir été en mesure d'apporter la valeur que nous en mesure d'apporter la valeur que nous recherchions N' hésitez pas à partager dans la section des critiques . Que pensez-vous du cours ? Alors ça y est, les gars, jusqu'à ce que nous rencontrions à nouveau un autre pigment génial ou un appareil respiratoire dorsal Johnson qui signe.