Dominarás el diseño web y móvil: Figma, Fundamentos de UI/UX y +Más

1. Introduction : Maîtriser le design Web et mobile : Figma, les bases de l'interface utilisateur/UX, +Plus: Bienvenue dans le cours ultime qui vous permettra de maîtriser le design Web et mobile avec facilité et confiance. Je m'appelle Chetan, je suis designer, designer d' ajustement et programmateur À cela, j'ai pensé étudiant en personne et en ligne. Et je suis très heureuse de suivre ce cours, que vous soyez un débutant souhaitant découvrir le monde du design pour la première fois, un philoso désireux de mettre vos compétences au service de vos compétences ou un designer expérimenté souhaitant apprendre le puissant outil de Figma Alors ce cours est votre compagnon idéal. Attachez vos ceintures de sécurité alors que nous nous lançons dans un voyage passionnant. Cela nous fera passer de la conception graphique fondamentale à la création de produits époustouflants En tant qu'étudiant de ce cours, vous aurez accès à plus 10 heures de contenu vidéo réel, qui contient des essais étape par étape, des projets interactifs, des exercices, etc. Je vais vous expliquer l'ensemble de ce processus, étape par étape, au fur et à mesure que vous me suivrez ce cours. Ensemble, nous explorerons le domaine du design X et NI. Nous dévoilerons le secret des interactions fluides et dévoilerons un processus de conception compressif, adapté aux futurs projets et lignes À présent, plongeons-nous dans le monde palpitant du design vex en utilisant les incroyables capacités de C à une créativité incertaine alors que nous progressons dans le processus de création d'une interface captivante et de prototypes captivants Ce cours est destiné aux débutants. N'essayez pas si vous débutez dans le design Vex ou si vous n'êtes pas sûr de ses subtilités Nous commençons par le tout début et vous guidons tout au long de la procédure , depuis la compréhension du brief jusqu'à la création cadres Tomsting personnalisés et de marquages de haute fidélité Nous démystifierons des éléments tels que les ensembles de composants, les contraintes et les variantes, afin de vous permettre de naviguer facilement dans le monde de la conception d'interfaces vous permettre de naviguer facilement dans le monde de la conception d' À l'aide de CD gratuits et de plug-ins enivrants, nous optimiserons notre flux de travail et créerons des prototypes interactifs, prêts à être testés par les utilisateurs et à collaborer avec votre équipe Des travaux pratiques seront répartis tout au long du cours pour vous aider à perfectionner vos compétences et à créer un portfolio impressionnant. Aujourd'hui, le design est une compétence intemporelle qui reste pertinente même lorsque les contraintes changent. Les notions de base que vous apprendrez ici vous accompagneront pendant des années, et vous pourrez appliquer ces compétences pour travailler avec n'importe qui, n'importe où dans le monde. Et le meilleur, c'est qu'il n'est pas nécessaire d'être un génie artistique ou un prodige du dessin pour exceller dans le design Nous partons tous de zéro, et à la fin de ce cours, vous serez en mesure de concevoir. Alors, je regarde le plan du cours dans la vidéo suivante pour voir si ce cours vous convient. Ce cours inclut tout ce dont vous avez besoin pour assembler Figma, alors inscrivez-vous dès maintenant et commençons à concevoir Nous vous verrons à l'intérieur. 2. Nouveau Skillshare: C'est ici que les étudiants monteront à bord. Vous avez atteint la ligne de départ, et je suis ravi de vous compter parmi nous pour ce voyage passionnant. C'est bon. Tout d'abord. Téléchargeons ces fichiers verticaux et ces fichiers de ressources. Vous trouverez les fichiers dans la section des ressources de cette page. Ces fichiers vous permettront d'accéder à un apprentissage pratique tout au long du cours. Mais en plus du matériel de cours, vous trouverez une feuille de raccourcis très pratique. Nous ne nous intéressons pas trop aux raccourcis, mais croyez-moi, cela change la donne. Vous ne voudrez pas le rater. Imprimez-le dans vos favoris circulaires et allons-y. Maintenant, en parlant d'outils, vous aurez besoin de Figma. Dans les ressources, il y a un lien de téléchargement de Figma pour obtenir la version textop Téléchargez Figma et inscrivez-vous. Vous pouvez également utiliser la version du navigateur. Mais n'oubliez pas qu'en cas de coupure de votre connexion Internet, vous ne pourrez pas travailler sur votre projet. Je recommanderai donc d'utiliser la version dextop. Que vous soyez un navigateur ou que vous fassiez de l'art sur Dextrop comme moi, c'est toujours aussi bon. Personnellement, je m'en tiens à la version de bureau, mais bon, choisissez celle qui vous convient le mieux Et voici les points rapides. m'a dit que je parle à la vitesse de la lumière, surtout après toutes les tomodensitométries que j'ai subies. Hum. J'adore City W, viens-tu de le dire ? Chi signifie D, frère, tu veux dire DD. Est-ce que je vous demanderais un café avec une place pour les amateurs de crème ? Mais n'ayez crainte. Si mon couplet et mon accent vous dérangent, appuyez simplement sur le bouton rouge de lecture situé en bas pour régler la vitesse. Cela peut sembler un peu drôle. Mais bon, tout ce qui vous aide à mieux absorber le contenu, n'est-ce pas ? L'anglais n'étant pas ma langue maternelle, je prononce parfois un mot différemment, mais n'ayez crainte. Un sous-titrage automatique est disponible. Parlons maintenant des saveurs Figma. Free contre spade. Nous optons pour la version gratuite pendant la majeure partie de notre aventure, car honnêtement, ce que vous pouvez faire sans perdre de temps est époustouflant Mais bon, vers la fin de notre voyage, je vais vous donner un aperçu des avantages de la Paul Alert, c'est assez direct. Voici l'offre que Figma propose pour garder les choses à jour. Cela implique des mises à niveau constantes, nouvelles fonctionnalités et des modifications pour vous faciliter la vie en matière de conception. Bien que cela soit fantastique pour votre parcours de conception, c'est un vrai casse-tête pour moi en tant que professeur. Mais n'ayez crainte. En cas de changement majeur, je mettrai à jour ces vidéos Et, hé, gardez un œil sur les sections de commentaires ci-dessous. Pour tout conseil ou point de vue de la part d'autres étudiants. à jour et améliorations de BagGalf font donc mises à jour et améliorations de BagGalf font donc partie de l' aventure partie de l' C'est bon, je discute. Passons à la vidéo suivante et lançons cette émission sur la route. 3. Figma to code construire de superbes interfaces sans écrire une ligne: Bienvenue aux étudiants. Décrivons ce qu' est le FiMMA et ce qu'il n'est pas FGMA est votre super héros pour créer des brouillons rapides de sites Web et d'applications C'est très pratique pour les concepteurs d' expérience utilisateur et d'interface utilisateur. Ces personnes qui créent des objets de design , qu'il s'agisse de croquis ou de sites Web sophistiqués et presque réels. FIMAg vous couvre. Maintenant, voici la partie amusante. Le FiMA ne se limite pas à créer un design cool. C'est génial pour tester ces designs avec de vraies personnes. Vous pouvez montrer votre travail au client ou à l'utilisateur, obtenir son avis et apporter des modifications à cet endroit. C'est comme une boucle de rétroaction ultra rapide. Mais voici le hic. FiPMA ne transformera pas comme par magie votre design en véritables sites Web ou applications Non, c'est là qu'intervient le développeur. Le FIPA leur donne quelques bribes avec lesquelles travailler. Mais la partie codage, pas encore le truc FICA. Donc, une fois que vous avez conçu levez le pouce, il est temps de passer le relais aux développeurs Ils opéreront avec la magie et mettront votre design en ligne sur le Web. Mais attendez, il y en a d'autres. Le FMA n'est pas réservé aux sites Web et aux applications. Non, c'est aussi pratique pour créer trucs sympas comme des publications et des publicités sur les réseaux sociaux Ce n'est peut-être pas parfait pour imprimer des documents, mais ça s'améliore de jour en jour et je comprends. Les gens utilisent Figma pour toutes sortes de choses. Ce n'était même pas fait pour ça. C'est comme l'outil ultime pour les concepteurs qui peuvent tout faire . Alors voilà. Figma est le code à suivre pour une conception et des tests rapides. Alors, êtes-vous prêt à lui donner un puits ? Plongeons-nous dans le vif du sujet et faisons preuve de créativité. 4. UI vs UX dans Figma Design Magic Explained: Très bien, plongeons-nous dans le monde merveilleux de Y contre X. Maintenant, si vous êtes déjà un pro dans ce domaine, n'hésitez pas à garder une longueur d'avance Mais si ce n'est pas le cas, restez dans les parages pour suivre un cours intensif. Il y a une différence entre les deux. L'interface utilisateur ou l'interface utilisateur ressemble à un produit d'emballage sophistiqué. Tout dépend de l' apparence et du remplissage des objets sur votre écran. Pendant ce temps, l'expérience utilisateur, c'est le parcours que vous empruntez lorsque vous interagissez avec le produit. Pensez à la Y comme à une voiture de sport encore plus élégante et Vx qui offre une conduite souple qui vous balader d'une oreille à l'autre Maintenant, décomposez-le un peu plus loin. En tant que concepteur d'interface utilisateur, votre travail principal est de rendre les choses géniales Vous êtes à l' origine des boutons, du menu et de l'attrait visuel général du produit numérique. Mais voici le point fort. Avant l'arrivée de l'expérience utilisateur, les concepteurs d'interface utilisateur comme moi s'appuyaient sur de nombreuses innovations et devinettes. Ceux âgés de 60 jours. Bien sûr, notre design a l'air cool, mais là où ils l' utilisent, c'est convivial. C'est là que x entre en jeu. Les anciens designers les considèrent comme conceptions d' interface utilisateur et les mettent à l'épreuve Ils sont comme des détectives du monde du design, investissant dans la manière dont les utilisateurs réels interagissent avec le produit. Avez-vous déjà cliqué sur le bouton et retrouvé quelque part de façon inattendue ? Oui, c'est le genre de choses que les concepteurs d'expérience recherchent. Maintenant, dans ce cours, nous allons nous concentrer à la fois sur U, Y et X, nous allons plonger dans le figma L'outil ultime pour l'artisanat, l'interface époustouflante et l'expérience utilisateur En parlant de convivialité, permettez-moi de partager une petite anecdote sur ma récente expérience avec une nouvelle application de recettes. Imagine ça. Je télécharge l'application, pour essayer de nouveaux plats et la terrasse moderne et raffinée Cependant, quand j'essaie de trouver une recette, c'est comme si je naviguais vers le mit Je suis piégé par diverses icônes à la recherche de la barre de recherche, et je me rends compte qu' elle se trouve dans un coin. Et ne commencez pas par l' absence d'une catégorie claire ou par l'utilisation excessive de couleurs vives et inquiétantes. Donc, à la fin, j'ai fini par utiliser Cardp. Mais bon, chaque VX SUP est une leçon apprise, non ? En tant que designers, il est de notre devoir de garder l'œil ouvert sur ces points faibles et de nous efforcer de rendre notre design aussi fluide qu'un bouton. Voilà, vous avez le x et tout le reste. Alors, êtes-vous prêt à porter A Designs comme un sujet ? Passons à la vidéo suivante et poursuivons ce voyage créatif. 5. Créer des applications et des sites Web que vous allez adorer (dans ce cours Figma) Nouveau: Bienvenue dans notre cours Figma. Que vous débutiez ou que vous cherchiez à maîtriser des techniques d'expérience utilisateur avancées, vous êtes au bon endroit. Dans ce cours, nous aborderons principes fondamentaux de Figma pour vous aider à concevoir des axes avancés, en abordant tout ce qui se trouve entre les deux Nous apprendrons comment exploiter la puissance des fonctionnalités de Figma , des outils de base aux outils les plus avancés, mais nous ne nous arrêterons pas là Nous aborderons le principe de l'UIVX assurer que vous comprenez non seulement comment utiliser Figma, mais aussi pourquoi certains choix de conception Nos projets ne se limitent pas à de l'exercice. Ce sont des scénarios du monde réel. Chaque produit est accompagné d'un ensemble complet de braves abordant les objectifs du projet et le public cible. Ensuite, nous tracerons le plan des tâches, identifierons les éléments clés tels que la page détaillée du projet, vérification de votre processus et les pages d'accueil. À partir de là, nous passerons à la création de cadres en fil métallique à faible teneur en gras, jetant ainsi les bases de votre conception. C'est là que vous commencerez à comprendre les principes fondamentaux de l' UIEX tout en explorant en profondeur la fonctionnalité Pigma En tant que maître du wireframing, nous passerons à la conception de l'interface utilisateur haute fidélité Vous apprendrez à donner vie à votre design, créant un visuel époustouflant qui non seulement est beau , mais améliore également l'expérience utilisateur. prototypage est la prochaine étape à l'ordre du jour où vous apprendrez à ajouter de l'animation, micro-interactions et d'autres fonctionnalités avancées à votre conception Comprendre la psychologie qui sous-tend x est crucial. Nous explorerons comment la couleur, le texte et l'animation peuvent influencer le comportement des utilisateurs. Enfin, vous aurez l'occasion de mettre en pratique tout ce que vous aurez appris grâce à des projets concrets. Mais n'oubliez pas que nous possédons l'alimentation à la cuillère B. Vous aborderez ce projet vous-même, appliquant ce concept et techniques que vous avez apprises tout au long du cours. En ce qui concerne les ressources, nous avons ce qu'il vous faut. Vous recevrez un fichier Zip rempli d'icônes, plugins et de liens vers des sites Web d'inspiration et utiles. Ces ressources vous aideront à perfectionner vos compétences en matière de Figma et d'UVA, vous assurant ainsi d'être bien outillé pour réussir Alors, je suis prêt à devenir le maître de Figma, à gagner et à concevoir quelque chose d'incroyable ensemble 6. Apprendre les briefs UX et les flux de tâches dans Figma: le design du futur, nous nous intéressons aujourd'hui à l'aspect crucial de la collaboration en matière de conception, l'ex brief et au flux de tâches. Maintenant, je sais que certains d'entre vous se grattent peut-être la tête se demandant ce qu'est le Vx Eh bien, n'ayez crainte. À la fin de ce dé vous aurez une brève exportation. Très bien, décomposons-le. Design Grip est comme la carte de votre projet. Il indique à tout le monde où aller et comment s'y rendre. Considérez-le comme le document secret du succès d'une équipe de design des États-Unis. Il décrit les objectifs, la portée, le budget et les principaux détails du projet , afin de garantir que tout le monde est sur la même longueur d'onde. Considérez-le comme l'outil de collaboration ultime. Mais attendez ce qui se trouve exactement dans X Prip. C'est votre outil de triche pour le projet. Il explique en quoi consiste le projet. Quels sont les défis à relever et quels sont vos objectifs. De plus, il vous donne également un aperçu de votre produit et des personnes qui l' utiliseront. Voyons maintenant cela en action. Imaginez envoyer un brief et obtenir réponse qui vous laisse perplexe. C'est ce qui arrive avec un mauvais brief. Mais n'ayez crainte, avec une bonne proposition, vous recevrez une proposition qui vous coupera le souffle. Alors, quelle est la source secrète de l'excellent K brief. plus qu'un simple bout de papier, c'est le cœur et l'âme de votre projet. Il précise les objectifs que vous visez pour Gate Severn sur la même longueur d'onde et guide votre processus de conception vers le succès Très bien, parlons des résultats. Un ex-brief solide, qui fait en sorte que tout le monde chante de la même manière. Facilite le processus de conception comme un simple bouton, se concentre sur ce qui compte vraiment et vous permet d'économiser du temps et de l'argent. C'est ce que j'appelle gagnant-gagnant. Je sais que tu te sens peut-être, ne t'inquiète pas. Nous avons un modèle pour vous faciliter la tâche. De la définition du problème à l'envoi de votre budget et de votre calendrier, tout est fait pour vous. Oh, et il y a un petit secret : il est essentiel de connaître votre public comprendre qui utilisera votre produit. Vous considérez qu'il vous va comme un gant. Mais bon, tirons les leçons d'une erreur : être trop agité en sautant les recherches sur les utilisateurs et en rêvant trop grand peut vous faire trébucher et en rêvant trop grand peut vous faire trébucher Mais avec un entraînement ultérieur, vous éviterez les chutes comme un pro. Tout tourne donc autour de X Bra Apprenons-en davantage sur le flux Ta. Avez-vous déjà entendu parler du flux de tâches ? C'est comme une feuille de route vers le succès dans le monde du design. Mais bon, ne vous inquiétez pas, si cela vous semble être une langue étrangère, nous sommes sur le point de vous l'expliquer. Alors, en quoi consiste exactement le flux de tâches ? Considérez-le comme une étape par étape vers la réalisation d'un objectif. Pourquoi le flux utilisateur se concentre-t-il sur le flux des tâches de décision et d' interaction Visualisez chaque étape par étape. C'était nécessaire pour faire avancer les choses. C'est-à-dire que New essaie de se plonger dans la leçon sur une plateforme d'apprentissage. Eh bien, un flux de tâches définirait toutes les étapes que vous devez effectuer de la connexion à la comparaison des leçons. Mais voici le côté cool. Talod ne commence pas toujours par le début. Ils peuvent zoomer sur une partie spécifique du processus à condition qu'il s' agisse d'objectifs clairs sur un site. Parlons maintenant des avantages. Les Talod sont comme les super-héros d'Ex design. Ils sont très simples à créer, ce qui les rend parfaits pour les premières sessions de brainstorming lorsque vous essayez de comprendre comment aborder un projet de grande envergure De plus, vous n'avez pas besoin d'un outil ou d'un design sophistiqué ? Sachez comment en préparer un. Une épingle, du papier et un soupçon de créativité sont tout ce dont vous avez besoin pour donner vie à vos idées ? Parlez d'espion, vous l' avez endommagé. Votre flux est endommagé. Que vous soyez un designer chevronné ou que vous soyez simplement immergé dans le monde de x. Tus flow et x b sont armes secrètes pour transformer vos idées en réalité Êtes-vous prêt à l'essayer ? Alors faisons une tempête de douleur ? 7. Lo Fi vs Hi Fi Design Showdown: Bonjour, chers collègues de design. Aujourd'hui, nous partons à la découverte du monde merveilleux de Figma et des fondamentaux du design Iframs Lo Fi contre haute fidélité. Si vous débutez, vous êtes dans le top, et si vous êtes déjà un magicien du design, vous pouvez compter sur vous, car il y a toujours quelque chose de nouveau à apprendre. OK, commençons par les wireframes LF. Présentez ça. Lofi est synonyme de faible fidélité, ce qui signifie essentiellement que les choses restent simples et rudes dès le début de votre processus de conception C'est comme dessiner le plan avant de commencer à construire la maison de vos rêves Les wiframs Lafe concernent tous des formes, des boîtes et des lignes de base Nous parlons de l' essentiel ici, les gars. Ces cadres Wii sont conçus en option pour colonne vertébrale. Ils vous aident à planifier la mise en page, à déterminer où placer ces boutons et à esquisser la structure générale. C'est rapide, c'est loin d'être ennuyeux. C'est incroyablement utile. iframes Loaf sont votre meilleure solution pour le brainstorming Pensez-y comme à une idée fictive sur un papier. Passons maintenant au côté des choses. C'est là que la magie opère. High Fertyfms, c'est comme transformer ces croquis C'est comme passer d'un dessin sur une serviette à rendu architectural raffiné de votre maison design Vous aviez des boutons, des images, du texte, vous le faisiez briller comme un diamant. C'est donc là que votre design prend vraiment vie. Ses pics sont parfaits. Chaque détail est méticuleusement conçu et se rapproche le plus possible d'une offre réelle sans toucher à une seule ligne de code wireframes High Ferty sont parfaits pour la présentation, tests faciles et l'obtention du sceau d' approbation final Est prêt à éblouir le monde. Maintenant, parlons de notre partenaire fiduciaire, Figma. C'est l'allié idéal pour le L Pi et la haute fidélité Avec Figma, démarrer avec Lo Fi est un jeu d'enfant. Vous pouvez esquisser vos idées, déplacer des objets et voir comment tout s'intègre dans un seul terrain de jeu numérique. Et quand est venu le temps d'améliorer vos installations de haut niveau, Figma est là pour vous. Vous pouvez affiner votre design, ajouter toutes les fonctionnalités visuelles et créer des prototypes interactifs pour voir ce que votre maître ressent aux yeux de l'utilisateur Dans ce cours, nous allons examiner en profondeur les installations électroniques et supérieures de FiGMA Nous apprendrons, chacun d'entre eux, comment transformer en douceur l'un à l'autre. Nous aborderons les outils, les astuces et la source secrète pour que votre design soit vraiment original. N'oubliez pas qu'il ne s' agit pas de choisir son camp. Il s'agit de savoir quand exploiter le pouvoir des deux. C'est comme si vous aviez deux super nœuds dans votre trousse d'outils de design. Alors, êtes-vous prêt à conquérir le monde ? Préparez-vous à vous lancer dans cette aventure palpitante cadres Lop Bar et la haute fidélité dans Figma Nous sommes sur le point de créer de la magie du design ensemble, et je ne pourrais pas être plus enthousiaste. Alors rendez-vous dans la prochaine leçon et réalisons un rêve de design. 8. Cadres et dossier de design dans Figma Design(Interface): Designer. Bienvenue sur notre FiigTerial Aujourd'hui, nous nous plongeons dans le monde passionnant de la création de votre premier fichier de conception. Mais avant de nous plonger dans cette vidéo, je tiens à vous présenter rapidement mes excuses. Pendant que j'enregistrais, je pensais que tout était sous contrôle en passant par le filaire découpé en un clic Cependant, en travaillant sur le projet, j'ai remarqué que le fichier n'avait pas de titre En vérifiant les serrures de mes fenêtres, j'ai réalisé que j'avais fait une erreur. C'est donc une erreur de ma part. Passons maintenant au FiMA et laissez-moi vous apprendre à créer des cadres Maintenant, je sais que cela peut être un peu confus, surtout si vous débutez, ne vous inquiétez pas, je suis là pour vous. Votre écran peut donc être un peu différent du mien à cause de Figma pour peaufiner les choses. Si vous ne trouvez pas le chemin, ne vous égarez pas, dirigez-vous vers le haut et sur la gauche, vous verrez qu'il y a un nom comme « programmeur imaginaire Et il y a le ML ou d'autres choses. Si nous avons plusieurs comptes dedans. Donc, actuellement, je n' ai qu'un seul compte, c'est donc mon compte par défaut. Mais disons que si vous avez un compte, il vous affichera un logo en couleur ainsi que le MLID afin que vous puissiez changer Supposons que vous soyez dans une autre application parce que vous essayez Figma Vous pourriez donc vous égarer. Donc, ce que vous voulez faire, c'est simplement cliquer sur cette icône d'accueil, et vous serez dans cette section. Je sais que cela peut être accablant pour vous car je travaille sur de nombreux projets et j'en ai créé de nombreux. Voici donc mon interface. Laisse-moi te montrer autre chose. Voici les équipes. OK. Laisse-toi furieux. C'est un peu confus. Je sais Voici donc mon interface. Nous allons donc créer un nouveau fichier de conception. Vous pouvez donc voir qu'il existe une option appelée fichier de conception, de couleur bleue. Il suffit donc de cliquer dessus et nous obtiendrons notre fichier de conception. J'ai donc commis cette erreur. Alors laissez-moi régler ça d'abord. Le nom de notre projet va donc être « Cliquez sur Panier ». Et ce sera la première version, donc c'est la version V. OK, c'est donc le nom de mon application. Passons maintenant aux cadres. Laissez-moi vous expliquer pourquoi je l' appelle V parce que je travaille sur de nombreux projets, et lorsque j'ai commencé à apprendre FMA, je voulais mettre à jour cette version J'avais l'habitude de dire « final » après cela, « une autre finale ». Ensuite, une autre finale après ce dernier V quatre, quelque chose comme ça. Donc, si vous aimez Photoshop Visor ou le graphisme, vous connaissez peut-être mon épingle du jeu. C'est ce genre de choses que j'avais l'habitude de faire. Mais maintenant, je dis juste la version 1. Donc, chaque fois que je veux faire fonctionner quelque chose, je dis que c'est la première version. J'ai besoin de la version deux. Je passe à nouveau à la version 2. Vous pouvez également créer un nouveau fichier et renommer Version Tune OK, donc c'était le truc avec les noms. Maintenant, nous allons apprendre à créer des cadres. Ce bouton carré est donc pour un cadre. Panneau, utilisez donc le raccourci F pour les cadres. Ainsi, dans la section droite du panneau de conception, nous avons de nombreuses options, comme des téléphones, tablettes, prises de vue, des présentations, des montres. Oui, nous pouvons également concevoir des montres, papier, des réseaux sociaux, de la coupe et des archives. J'ai vu beaucoup de gens utiliser Figma, par exemple, pour les réseaux sociaux parce qu'avec la FDMA, nous pouvons faire plein de choses Cela dépend donc totalement de vous. Supposons que vous souhaitiez transformer votre interface utilisateur actuelle en designer ou graphiste. Vous pouvez également utiliser Figma. Tu n'as pas besoin d' un autre sanglot. Si vous êtes à l'aise avec Figma, vous pouvez le faire. OK, maintenant allons-y avec les téléphones. Tout d'abord, nous avons l'iPhone 14 et l'iPhone 15. Je ne sais pas quand vous regardez ce 212. Il pourrait ajouter un iPhone 17 16 iPhone 99. Pour ce projet, nous utilisons donc IP 14 et 15 P max. Cette première option. Vous pouvez également vérifier la résolution. Il s'agit des quatre 30 entrées dans le 9302. Il suffit donc de cliquer dessus et nous avons notre premier cadre. On peut le déplacer comme ça sur l'écran. Si vous souhaitez modifier la largeur et la hauteur comme le cadre, vous pouvez également le faire à partir d'ici. Il existe donc de nombreuses options, alors ne vous y trompez pas. Dans les prochaines vidéos, nous allons donc voir toutes les options, comme leur utilisation, l' exportation des effets de trait OK, actuellement, dans ce do, nous en apprenons juste sur les cadres et un peu sur l'interface. Il s'agit donc de la première image. Vous pouvez le renommer ici. Vous pouvez double-cliquer dessus sur cet iPhone 14 P max et simplement double-cliquer dessus, et vous pouvez le transformer en une page d'introduction, disons OK, donc si vous souhaitez zoomer sur cette interface ou dézoomer , maintenez la touche Ctrl enfoncée et utilisez le défilement de la souris Nous pouvons également faire la même chose en maintenant contrôle enfoncé et en utilisant le bouton plus ou le bouton moins. Cela fonctionne donc de la même manière. Maintenant, disons que vous voulez ajouter un autre cadre, afin de pouvoir revenir aux cadres, et vous pouvez ajouter 14 15 P maximum, celui-ci. Vous pouvez choisir celui-ci. Ou ce que vous pouvez faire, c'est que vous pouvez simplement maintenir la touche Alt enfoncée sur votre clavier, et vous pouvez voir qu'il y a un rideau de souris derrière notre rideau de souris, et nous avons dupliqué cet élément ou ce cadre Voici donc comment vous pouvez dupliquer ou copier. Vous pouvez également utiliser le contrôle C qui est le contrôle de base. Et disons que vous voulez le faire actuellement, c'est un peu chaotique. Et je veux un peu d'espace. Je veux passer à ce design. Vous pouvez utiliser ce curseur, vous pouvez utiliser ce curseur ou vous pouvez également utiliser la barre d'espace Si je tiens la barre d'espace enfoncée, vous pouvez voir notre souris se transformer en main Je peux simplement cliquer avec le bouton droit de la souris et le déplacer comme ça. Voici comment vous pouvez utiliser cet outil Drag or More. Et vous pouvez également renommer les pages à partir d'ici. Supposons que je veuille nommer cette page d'accueil. Donc ça va être ma page d'accueil, et ça va être mon hamburger man. OK, voici donc nos cadres. Donc, pour ce projet, je n' aimerais pas avoir jusqu'à six images Je vais donc faire un petit zoom arrière, et je vais maintenir la touche Alt enfoncée ou nous pouvons utiliser les commandes C et V. Cliquez avec le bouton droit sur votre cadre et sélectionnez Copier, cliquez avec le bouton droit sur cet espace vide et cliquez sur parasite Il va donc faire des ravages ici. Et laissez-moi le suivre dans cette direction. avons donc quatre. Encore une fois, control V control V. Nous avons donc obtenu nos six cadres. Je vais nommer cette catégorie. Celui-ci sera un compte, et notre page d'accueil sera consacrée à mes commandes. Nous pouvons suivre nos commandes à partir d'ici. Tout est donc une question de cadres, et vous pouvez voir dans un panneau de liste que nous avons obtenu chaque page. Et si j'ajoute un élément, disons si j'ajoute une ligne sur cette page. Comme vous pouvez le voir, il a été imbriqué et sous cette page d'introduction, nous avons nos éléments Ne vous inquiétez donc pas pour celui-ci. Je vais supprimer celui-ci pour le moment. OK, alors poursuivons sur notre lancée. Donc, pour vous entraîner, créez plus de cadres, copiez-collez comme un pro et nommez-les en fonction du flux de tâches UA, et voici un conseil de pro. Supposons que vous travailliez sur un projet UX en tant que freelance. Dans ce cas, vous pouvez demander le numéro de téléphone de votre client. Donc, comme le modèle du téléphone. Disons qu'il utilise un Samson Galaxy S 23 ultra. Dans ce cas, vous pouvez créer une dimension en fonction de ce téléphone. Ils vont donc l'adorer pour cela. Enfin, n'oubliez pas de nommer votre fichier car je sais que j'ai commis une grave erreur. Cliquez sur cet espace vide et accédez simplement à cette section et nommez le fichier. Actuellement, j'utilise Click Cut, mais vous pouvez le nommer comme vous voulez. Et n'hésitez pas à en explorer davantage. Êtes-vous prêt pour la prochaine vidéo, alors poursuivons notre créativité ? 9. Outil de texte Figma et polices: Bon retour, tout le monde. Dans cette vidéo, nous allons tout savoir sur le texte, les astuces, la police, taille de police, le p, comment l' aligner, etc. Alors, tapons. Voyons d'abord comment ajouter du texte. C'est très simple. Accédez simplement au menu de la barre supérieure. Et comme vous pouvez le voir, nous avons ce bouton T. Alors cliquez dessus et cliquez à nouveau sur le troprig. Vous recevrez votre texte comme ceci. Maintenant, vous voyez peut-être beaucoup de choses étranges comme s'il y avait beaucoup d'espace entre elles, et tout ça. Nous allons donc régler ce problème dans un instant. Il existe deux méthodes pour ajouter du texte. La première chose que nous avons vue est un vélo qui clique sur le menu de la barre supérieure. De plus, nous pouvons utiliser un raccourci appelé t, appuyer sur t sur votre clavier, et le carsel de votre souris deviendra cette icône plus, et vous pouvez simplement faire glisser une boîte comme celle-ci pour y mettre beaucoup de texte Voici donc comment nous pouvons ajouter le texte dans la page ou, celui-ci est la page, afin que nous puissions l'ajouter dans la page. Il y a une chose que j' ai oublié de mentionner. Par exemple, lorsque nous ne choisissons que du texte et que nous cliquons simplement dessus, nous obtenons une boîte, une petite boîte, et nous ne pouvons pas l'ajuster. Nous pourrons l'aborder ensuite, comme ceci. Mais dans certains cas, nous voulons une boîte qui doit être longue et divisée, afin de pouvoir la faire glisser comme ceci et d'ajouter un tas de texte Voici donc comment nous pouvons ajouter des cases et tester que nous pouvons également l' ajuster comme ça. Alors laissez-moi dater celui-ci pour le moment. Celui-ci également. OK, je vais garder celui-ci. Passons maintenant à la façon dont nous pouvons faire beaucoup de choses avec les types. Avant cela, découvrons les caractères typographiques. Alors, quel type de visage ? Une police de caractères est un ensemble de caractères du même design. Ils incluent des lettres, des chiffres, des signes de ponctuation et CLFy Il existe des milliers de faces ti disponibles. Il est important de ne pas faire plusieurs faces. Cela peut donner l' impression que votre design est fragmenté et maladroit. Vous devez donc faire attention, organiser et délimiter le s de deux ou trois faces typographiques Ainsi, la plupart du temps, lorsque nous concevons des structures en fil de fer, nous optons pour les polices de base comme Roboto Je sais que le robot est ennuyeux, mais beaucoup de gens doivent le faire pour avoir une idée, quel est le design. Nous utilisons donc cette police ennuyeuse. C'est un robot. Je sais, je sais. Désolé Roboto. Je le sais. Passons maintenant à l'épaisseur de la police. Une police de caractères peut comporter de nombreux types de tuiles ou de poids Par exemple, le roboto a beaucoup de style et de poids, comme vous pouvez le constater C'est inconfortable pour moi. Vous pouvez passer le mouillé, vous pouvez tous les compter, comme un boulon fin très léger, un boulon supplémentaire, ce genre de poids de police. Le poids de police peut créer une topographie Hetch VA. Utilisez un poids élevé pour mettre en évidence les informations les plus importantes et plus petit pour les informations moins importantes. Passons maintenant à la taille de police. Cela permet de déterminer l'échelle et la taille du texte. Les figures représentent la taille de police en pixels indépendants de la densité. La taille de police peut également créer une topographie hechi uva. Il est important de choisir la bonne taille de police pour les bonnes informations. Assurez-vous que votre texte est lisible et qu'il n'est jamais inférieur à dix PT, c' est-à-dire dix pixels. Comme vous pouvez le constater, si j'en choisis dix, vous pouvez voir que la taille de la police est trop petite et qu'elle est assez lisible, mais si nous allons en dessous, elle risque de ne pas être lisible, alors surmontez cela. Cela le rendrait donc illisible pour de nombreux lecteurs. Passons maintenant à la hauteur de la ligne. OK, donc c'est la hauteur de la ligne qui la connecte à 100 %. Nous pouvons l'ajuster car disons que la hauteur de ligne contrôle l'écart entre les lignes ou le texte d'un paragraphe. La hauteur de la ligne doit être comprise entre un (20 % ) et 1 405 % de la taille trouvée, afin ) et 1 405 % de la taille trouvée, rendre le paragraphe plus lisible Donc, si j'augmente jusqu'à 400, comme nous le voyons, c'est bizarre. Mais si je m'en tiens à un 20, je peux le faire manuellement. Donc, voir est plus lisible. Lorsque votre ligne est trop longue, le lecteur aura du mal à se concentrer. Gardez donc cela à l'esprit. OK, au début de la vidéo, j'ai dit que nous avions foiré l'espacement Voyons maintenant comment fixer l'espacement et comment ajouter l'espacement Laissez l'espacement définir l' espace entre deux caractères. Cela peut être utile pour le texte de légende du site. Ne confondez pas non plus cela avec la ruse, qui consiste à ajuster l'espace entre deux personnages spécifiques Actuellement, c'est 20 %. Et si je passe à six ou sept comme ça, je peux voir maintenant que c'est plus lisible et que ça n'en a pas l'air. OK, donc espacement des paragraphes. Ensuite, il y a l'espacement des paragraphes. OK, pour ça, je dois ajouter un autre texte aléatoire pour expliquer ce qui se passe avec toi. OK, maintenant ça marche. Permettez-moi ajouter un texte aléatoire comme celui-ci. Considérez ceci comme un paragraphe. Je sais que ce n'est pas un paragraphe, mais je le considère comme un paragraphe. L'orientation vers le paragraphe définit la distance entre chaque paragraphe. Cela peut augmenter ou réduire l'espace entre chaque paragraphe. Il aide l'utilisateur à se concentrer en ajoutant des intervalles réguliers, ce qui rend le texte plus lisible et Donc, si j'augmente l' espacement des paragraphes comme vous, il augmente comme ça Voici donc comment vous pouvez ajouter de l'espacement entre les programmes. Nous avons maintenant la possibilité de redimensionner. Actuellement, la zone du texte est de taille fixe. Nous pouvons choisir le poids automatique et le masquage automatique. J'ai beaucoup utilisé un FMA, mais je n'utilise jamais beaucoup cette option Mais si vous le souhaitez, vous pouvez l'utiliser, et il ajustera votre texte de cette façon. Cela dépend donc totalement de votre design. OK, la prochaine étape est l'alignement. Cela détermine la manière dont vous distribuez le texte dans l'espace confiné. Par exemple, les alignements horizontaux alignent votre texte sur l'axe X et les alignements verticaux votre texte sur l'axe Y. Donc celui-ci est pour le côté et celui-ci pour la droite. Je ne sais pas Je n'ai jamais vu quelqu'un faire ça, comme sur le côté droit. La plupart du temps, le texte se trouve sur le côté gauche ou dans la pédale. Et vous pouvez également utiliser celui-ci pour aligner le texte. Ce sont donc les méthodes de base. Et si vous voulez obtenir des options plus avancées, par exemple si vous voulez ajouter moins de puces ou si vous voulez ajouter du J'aime, je l'ai oublié. Laisse-moi aller vérifier. OK. Donc, si vous voulez ajouter un texte en majuscules, vous pouvez le faire, vous pouvez ajouter du soulignement et ce genre de choses, et vous pouvez également faire d'autres choses. Comme nous l'avons vu, l'option élément. Il est également disponible ici, mais dans ce cas, nous avons un avantage. C'est-à-dire que nous pouvons voir un aperçu. Si je choisis de redimensionner et si je passe à Auto W, cela nous en montrera un aperçu À quoi ressemblera-t-il une fois que nous aurons ajouté cet effet, je dirais. Et aussi le soulignement, également la percée. Et des majuscules, des minuscules et tout ça. Vous pouvez également ajouter des puces. Voici donc tous les paramètres de base du texte, de la police ou du pipa que vous pouvez effectuer dans le figma N'oubliez donc pas que le texte contenait plus de 80 % du contenu de l'eo design Il est important de connaître ces propriétés du texte et leur signification. Cela permet de bien comprendre la topographie, de se concentrer sur son utilité et de toujours donner la priorité à la lisibilité Tout est donc une question de texte. Donc Astro Video. Et je sais qu'il y a d'autres choses, comme façon dont nous pouvons créer des styles de texte, ainsi que le corps du texte et tout ça. Nous allons donc apprendre que ce sont des choses un peu plus avancées. Nous allons donc apprendre ces choses dans de futures vidéos. Tout comme Potro, et je vous verrai dans le prochain 10. Les bases de Figma Comment CRÉER et MODIFIER DES FORMES: Dans cette offre, nous apprenons tout sur les formes, exemple comment créer des rectangles, lèvres, des polychromes, comment créer des coins arrondis et comment les ajouter Commençons donc. OK, donc pour les formes, on peut aller dans le menu topo et cliquer sur ce carré Et le premier est que nous avons un rectangle dont la ligne, les flèches, est une étoile polygonale, et nous pouvons également mettre des images et des vidéos OK, allons-y et commençons par le rectangle. Et je pensais utiliser cet espace pour des photos de produits. Comme lorsque nous allons sur Amazon. Il y a une énorme banderole. Et là-dessus, il glisse et montre un produit, comme type d'offre proposé. Je veux donc fabriquer ce truc. Ou je vais faire en sorte que ce jeu soit joué pour une catégorie. OK, donc je vais déplacer cette photo du produit ici, et je vais la garder comme ça. Et d'accord, c'est pour les diapositives, et maintenant je vais choisir l' ellipse et le raccourci est, Oh, vous pouvez aussi l'utiliser . Pour des décalages précis, comme un cercle parfait, je vais maintenir la touche Maj enfoncée et la faire glisser comme ça Et je vais en faire quatre. Si vous souhaitez créer un doublon comme celui-ci, vous pouvez maintenir la touche Alt enfoncée. Si vous maintenez la touche Alt enfoncée sur un élément, vous pouvez voir qu'il y a un double curseur de souris, signifie que vous pouvez dupliquer votre élément. Il suffit de cliquer sur la souris et de le faire glisser comme ceci. Vous allez obtenir un duplicata. D'accord, il existe de nombreuses méthodes pour utiliser contrôle C et le contrôle V. Mais si j'utilise le contrôle C et le contrôle V, l' objet est superposé. Vous pouvez voir que j'étais au top. C'est donc un peu confus. J'utilise donc l'aloption. Je vais donc les aligner comme ça, et encore une fois, les sélectionner tous et maintenir la touche Alt enfoncée. Et faites-la glisser comme ça parce que je veux que cette section soit une catégorie, et je la garderai comme ça. C'est ainsi que nous pouvons fabriquer des navires. Maintenant, disons que je veux créer une icône de barre de surtension ici. Donc, ce que je peux faire, c'est appuyer sur R, et je vais créer un petit rectangle comme celui-ci et le placer au centre. Et je veux aussi un menu hamburger. Vous pourriez donc voir que dans de nombreux cas, il existe un menu à trois lignes appelé menu Hamburger Nous pouvons donc créer en utilisant des lignes. Alors faisons-le moi et suivons les choses comme pendant tout ce quart de travail. Je vais d'abord dessiner dessus, et je vais également ajouter un trait. Je sais que je vais trop vite, mais c'est facile. À l'heure actuelle, l'accident vasculaire cérébral en est un. Je vais en prendre jusqu'à trois, pour qu'il devienne plus lourd et le tenir comme ça, et un autre. OK, nous avons donc notre menu de hamburgers et ici, nous pouvons cliquer sur les lèvres ou sur l'icône de recherche Ou peut-être que je vais continuer comme ça pour moment parce que je ne veux pas trop aller vite. Donc, vous savez, la recherche Barbano se fait toujours avec des coins arrondis Nous voulons donc des angles arrondis, et nous avons actuellement des angles très vifs. Si je mets le doigt dessus, je vais me faire couper du papier. Je sais que c'était un très mauvais travail. Alors, allons-y et créons des coins arrondis. Cliquez sur votre élément. Et vous pouvez voir qu'il y a quatre points de chaque côté. Vous pouvez simplement cliquer dessus et le suivre à l'intérieur, et il s' arrondit comme ça. Donc, pour aller voir, nous avons pris des virages. Vous pouvez le faire manuellement, comme si je le mets à zéro, si vous cliquez sur l'élément, et si vous allez dans le panneau de conception, et qu'il existe une option de rayon d'angle. Vous pouvez simplement cliquer dessus et ajouter des valeurs telles que 15 pour que vos coins soient plus arrondis. Et vous pouvez également placer des coins arrondis de chaque côté, dans le coin supérieur, dans le coin supérieur gauche. Les 15 derniers si j' ajoute la valeur zéro. Comme vous pouvez le voir, cela ressemble à une sorte de message texte. Vous pouvez donc aussi le faire comme ça. Vous pouvez également maintenir la touche Alt enfoncée et la faire glisser comme ceci pour les coins individuels, et vous pouvez créer des coins arrondis comme ceci. Pour l'instant, je vais garder OK, donc celui-ci est notre fil conducteur pour notre page d'accueil. Je sais qu'il y a plein de choses que je peux faire ici. Par exemple, je peux ajouter une petite barre de navigation. Passons donc à ce volet. Je peux simplement utiliser le raccourci R et je vais le suivre comme suit. Et je peux ajouter quatre ou cinq éléments, comme catégorie d' accueil, le profil de la carte de commande, etc. Et ce que nous pouvons faire D'accord, nous pouvons ajouter un petit rectangle. Oh, ici. Cela représentera que celui-ci est pour la carte. Je sais que ça n'a pas l' air très beau, mais c'est le cadre métallique, donc il n'est pas nécessaire qu'il soit aussi beau. D'accord. Donc, pour l'instant, c'est ce que c'est. D'accord, nous avons déjà vu comment fonctionne le texte dans FMA. Il suffit d'appuyer sur T ou même sur ce bouton. Ajoutons donc du texte comme celui-ci pour la bannière. Pas de bannière Bruce. D'accord. Celui-ci est donc pour les bannières et celui-ci pour les catégories, et je peux dessiner quatre carrés, qui représenteront nos menus de navigation. OK, donc je vais en prendre cinq. OK, comme ça. OK, donc j'ai oublié de vous montrer une chose, cela concerne les couches. Nous en apprendrons davantage sur les couches dans les couches futures, mais c'est l'essentiel, je dois donc vous le montrer. Imaginons donc que vous dessinez une forme. Et laisse-moi déplacer ça ici. Et si je choisis le rectangle, et si je dessine un rectangle comme celui-ci, et comme vous pouvez le voir, notre texte disparaît. Je sais que vous devez paniquer en ce moment, où cela s'est passé et tout ça. Mais c'est très facile de le ramener car en profane, vous pouvez le voir, s'agit du rectangle 15 et où se trouve notre texte. Voici la bannière. Vous pouvez donc le faire à partir d'ici, mais c'est un peu, disons, à des fins avancées. Donc, dans ce cas, vous allez simplement sélectionner le premier élément et cliquer sur le centre à l'arrière. Et comme vous pouvez le voir, nous avons reçu notre pack de textes. Vous pouvez utiliser le paquet carré de raccourcis qui se trouve à côté de la touche P et si j'appuie, nous avons notre pack de texte. Voici donc comment vous pouvez ajuster les couches. OK, il y a une autre option. Vous pouvez faire la même chose, aller à l'objet et vous pouvez voir amener vers l'avant, être vers l'avant, reculer ou renvoyer en arrière. Il existe donc de nombreuses options. Tu peux le faire. Vous pouvez également l'ajuster à partir d' ici si vous utilisez beaucoup de Figma. Dans ce cas, vous pouvez l'ajuster à partir d'ici. Mais c'est un peu déroutant. Je vais donc dire raccourci ou vous pouvez le corriger à juste titre et vous pouvez l'ajuster comme un ensemble à renvoyer à l'arrière ou à l'avant. Ce sera donc facile pour vous. Et j'ai oublié dans la vidéo précédente d'ajouter le nom de la marque. Je pensais à un nom de marque appelé Click Cart. OK, donc je vais l'ajouter dans le CD et le détriber vers le bas. Et je vais utiliser ellipse pour ajouter un logo de marque ici Je maintiens la touche Shift pour un cercle parfait. Et dans ce cercle, nous ajouterons le logo de la marque. OK, alors vous vous demandez peut-être, quel est ce petit point, quel est ce petit point ? OK, laisse-moi te montrer une magie. Si je le fais glisser vers le haut, nous avons notre chef de meute et il peut atteindre tous les points de notre jeu. Je sais que c'est un lit. D'accord. Nous pouvons donc également le faire. Nous pouvons créer des cercles creux comme celui-ci. Nous pouvons également créer un Pie Chat et tout ça. C'est pour un design complexe. La plupart du temps, nous ne l'utilisons pas, alors ne vous inquiétez pas. Voici donc comment fonctionne ce point. Donc, à la fin, nous avons un cercle creux, vous pouvez donc l'ajouter comme ceci. OK, donc pour le moment, je vais vivre à Azits. C'est ainsi que vous pouvez utiliser des formes pour créer ce cadre métallique, comme cette bannière, cette section de catégorie, ainsi que cette icône de recherche, la ligne pour le menu Hamburger, et le carré pour notre section du menu de navigation Et nous apprenons également à créer un cercle creux ou Pac Man. C'est donc tout pour deux, cette vidéo. Et je te verrai bientôt, Kays. 11. Comment choisir et utiliser les couleurs dans figma: Bienvenue aux étudiants. Aujourd'hui, nous plongeons dans le monde vibrant des couleurs de Figma Préparez-vous, car à la fin de cette vidéo, vous maîtriserez l'art d'ajouter touche de couleur parfaite à vos créations Commençons par comprendre que moins peut souvent être plus. En matière de filaire, bien que le gris soit un choix judicieux, nous sommes là pour explorer l'arc-en-ciel de possibilités qui s'offrent à vous Pour travailler avec la couleur, nous allons sélectionner le rectangle géant. Sur le panneau de conception, nous avons obtenu cette option appelée remplissage. Dans le film, nous pouvons donc changer nos couleurs. C'est pour la lumière. C'est pour le Tarke, c'est pour le faible contraste, et c'est pour le contraste Et on peut aussi changer la couleur par le côté, cette couleur cidre. plus, nous pouvons également augmenter ou diminuer la transparence de la couleur. OK, donc d'abord, je vais choisir couleur jaune industriel parce que j'aime beaucoup cette couleur et que le code hexadécimal est pour cela, je suppose que quelque chose EC ten est le code hexadécimal de cette Ensuite, nous avons le mode transparence à partir de là, vous pouvez rendre votre couleur ou votre élément transparent. Disons donc que si je le place en arrière-plan, où est l'arrière-plan ? OK, c'est donc le contexte. Donc, comme vous pouvez le voir, notre couleur est en quelque sorte transparente. Ce n'est pas du tout transparent. Donc, si je fais ça à 200 %. OK. Donc, actuellement, ify, si je le fais à 100 %, comme vous pouvez le voir, c'est invisible OK. Voici donc comment vous pouvez rendre la couleur transparente. Permettez-moi donc d'abord de l'envoyer au dos. OK, donc c'est un front indien maintenant. Maintenant, l'option suivante est que vous pouvez choisir une couleur en utilisant un compte-gouttes. Voici donc le compte-gouttes. Et comme vous pouvez le voir en haut, nous avons cette version agrandie Si je le déplace sur les pages, cela changera. Comme s'il zoomait. C'est comme une loupe, et on peut choisir n'importe quelle couleur Disons que je veux tous les colorier. Permettez-moi d'abord de sélectionner l'outil de sélection. Et les raccourcis pour l'outil de sélection sont V, et je vais sélectionner tout cela, puis choisir l'outil approprié Et pour les raccourcis. OK, donc je vais choisir cette voiture jaune, comme vous pouvez le voir, il a du jaune partout. OK. C'est ainsi que vous pouvez utiliser un outil approprié. Ensuite, nous avons le code X. Il s'agit d'un type de code différent, à quatre couleurs, comme nous avons le symbole RGB RGB pour le rouge, le vert et le bleu. Si vous connaissez les valeurs du rouge, du vert, du bleu, vous pouvez créer n'importe quelle couleur. Et après cela, nous avons le CSS. Le CSS est utile, par exemple, pour un développeur frontal. Comme quand j'étais à l'université, j'avais l'habitude de coder en CSS, alors j'avais besoin de ce type de couleurs, comme ces types de codes. Ensuite, nous avons HSL. C'est un peu comme les RGB. Ce sont également des valeurs que vous pouvez mettre, et cela peut créer de la couleur. Ensuite, nous avons HSB. Mais la plupart du temps, nous utilisons XCode ou RGB, ou si vous êtes développeur, vous utiliserez du CSS Donc pour l'instant, allons-y avec le code X. D'accord, à partir de là, vous pouvez également augmenter ou diminuer la transparence. Tu peux faire la même chose ici. Ensuite, nous avons la couleur du document. D'accord, la couleur du document représente la couleur que nous avons utilisée dans nos designs. Comme si nous nous intéressions au jaune, blanc, au gris, au noir et à une sorte de gris. Il s'agit donc de la couleur du document. Si vous cliquez sur cette couleur de document, vous aurez accès à certaines options. Comme c'est pour les couleurs du travail. j'ai créé plusieurs projets, je peux donc exporter ces couleurs dans ce projet, et je peux également les utiliser. Jusqu'ici, maintenant, allons-y avec celui-ci. Parce que je sais que ces sujets sont un peu compliqués, pas compliqués, mais pas faciles à comprendre. Je vais donc faire une vidéo séparée ou dédiée à ce sujet. Et il existe également une option appelée styles de couleurs. Nous pouvons créer notre palette de couleurs et les utiliser plusieurs fois dans notre conception. Ce sera donc facile. C'est tellement direct pour ça. Il y a une vidéo à venir. Tout est donc une question de couleurs. Vous pouvez également créer votre couleur de dégradé si nous choisissons cette option. Vous pouvez choisir un dégradé de couleur. Pour l'instant, passons aux couleurs solaires, et nous allons apprendre comment créer un dégradé dans les prochaines vidéos. C'est tellement direct pour ça. Mais n'oubliez pas que lorsque vous concevez un filaire, utilisez des couleurs simples comme le gris, le blanc ou le bleuâtre Vous pouvez le voir dans certains wireframes. Les couleurs sont vraiment très ennuyeuses. Il faut donc rendre le wireframe vraiment ennuyeux. Et voilà, les gars, la base de l'ajout de couleurs dans Figma En attendant, joyeux coloriage. 12. Traits et mise à jour des propriétés par défaut dans figma: Les autres étudiants sont les bienvenus dans notre aventure du design. Et aujourd'hui, nous nous plongeons dans le monde fascinant des traits. Débarrassez-vous pour une touche de génie dans vos créations. Donc, quel trait est la ligne épurée sur les bords, définit les limites et ajoute qui définit les limites et ajoute ces deux visuels supplémentaires Imaginons nos panneaux, d'accord ? Imaginez un miroir à hamburgers, je sais que vous imaginez autre chose, mais ce n'est pas un menu de hamburgers Voici donc le menu des hamburgers. OK, nous sommes ici. Donc, ces trois lignes que nous connaissons tous et que nous aimons tous. Nous ne nous contentons pas de tracer des lignes. Nous leur donnons du style aux extrémités arrondies car soyons honnêtes. Les arêtes vives ont l'air tellement ennuyeuses. Mais il y a encore quelque chose, nous allons définir des paramètres par défaut pour vous faciliter la vie en tant Chaque rectangle que vous dessinez sera accompagné d'un dicono, un trait, sous une couleur que nous adorons Plus besoin de le faire manuellement à chaque fois. Alors, associons-nous. OK, comme vous pouvez le voir, nous avons ce rectangle ennuyeux, alors sélectionnons celui-ci. Donc actuellement, il a des arêtes vraiment tranchantes, et permettez-moi d'ajouter quelques bords arrondis. Alors allons-y avec cinq. Ça a l'air super maintenant. Comme vous pouvez le voir sous le champ, nous avons une option appelée traits. Alors, cliquons sur le signe plus. Nous appelons le premier accident vasculaire cérébral, mais nous pouvons en additionner autant que nous le voulons. La plupart du temps, j'en prends deux parce que deux sont subtils et magnifiques. OK, on peut changer la couleur du trait. Comme actuellement, il est noir. La plupart du temps, il est livré avec le noir. Tu peux changer de couleur. Vous le saviez déjà dans les années précédentes, nous avons vu comment changer de couleur et tout ça. Donc, si vous ne voulez pas cette couleur, vous pouvez également la modifier. Ensuite, nous avons cette option appelée « nous pouvons placer notre trait à l'intérieur, à l' extérieur ou au centre ». Donc, si je choisis le centre, comme vous pouvez le voir, cela implique une limite à l'extérieur de la limite ainsi qu' à l'intérieur de la limite, et cela crée un trait au milieu. Après cela, nous avons l'intérieur. Cela crée donc un trait à l'intérieur des limites. Et au final, nous savons tous que cela crée des traits à l'extérieur. C'est pourquoi il est à l'extérieur. Je vais donc opter pour l'intérieur. Et c'est pour augmenter le nombre d' accidents vasculaires cérébraux. Ensuite, il y a un coup par côté. Comme nous l'avons vu dans les coins arrondis, nous pouvons attribuer une valeur arrondie spécifique à des arêtes spécifiques. Permettez-moi donc de cliquer sur ce menu à trois points pour accéder à de nombreuses options, exemple si vous voulez que votre trait soit en pointillé ou en trait plein Je vais donc y aller parce que le solide lâche très bien et la plupart du temps solide Et nous pouvons également utiliser du custom comme dottil ou un peu solide Vous pouvez également les personnaliser. Mais la plupart du temps, nous n'utilisons pas trop cette option. Soyez donc conscient de cela. OK, j'ai oublié de vous montrer que cette option s'appelle trait par côté. Par exemple, si je choisis le haut, le trait sera uniquement sur le dessus. Comme vous pouvez le voir, le trait n' est disponible que sur le dessus. C'est ainsi que cela fonctionne. Si vous choisissez toutes les options, vous pouvez également les personnaliser. Mais pour l'instant, je veux que le coup soit de tous les côtés. Voici donc comment fonctionne l'AVC. Nous pouvons maintenant choisir plusieurs options comme plusieurs éléments, et en même temps, nous pouvons appliquer des traits. Cliquons sur le bouton trait plus, et je vais donner la valeur à. Deux. Vous pouvez également utiliser les touches fléchées pour augmenter ou diminuer la valeur. Si j'utilise la touche flèche vers le haut, le trait serait plus grand. Et si j'utilise les touches bas, le trait aura moins de valeur. Donc pour le moment, je vais en choisir deux. D'accord, voici comment vous pouvez utiliser les traits, mais il y a d'autres options. Imaginons que vous vouliez créer ce truc comme un petit rectangle, comme une publicité ou un bouton, vous devez donc tout recommencer encore et encore. Donc, si je ne veux pas faire ces choses encore et encore. Donc, ce que je peux faire, c'est sélectionner l'élément que je veux voir comme un ensemble par défaut. Je sélectionne donc celui-ci pour le moment, et passons à ce jour. Et dans ce document, nous avons une option appelée définir les propriétés par défaut, et vous pouvez voir que la propriété par défaut est mise à jour. Maintenant, je peux simplement choisir un rectangle et je peux simplement dessiner la même chose de différentes tailles comme celle-ci. Je n'ai donc pas besoin de tout créer encore et encore. Voici donc comment vous pouvez définir certaines propriétés pour une valeur par défaut. OK, il y a donc une chose que je dois vous montrer, disons que dans la majeure partie du cadre i, vous devez avoir vu qu'il y a quelques lignes qui fonctionnent comme ça. Et d'accord, laisse-moi choisir une nouvelle ligne. OK. Cela indique l' espace réservé à l'image Donc, si quelqu'un passe en revue votre structure filaire, cette personne le saura À cet endroit, nous devons ajouter une image, afin que vous puissiez l'ajouter comme ça. OK, certaines personnes aiment ces lignes ou certaines personnes gardent une image comme espace réservé Dans ce cas, vous pouvez faire en sorte que l'événement supprime cette ligne. Ajoutons donc une image. Nous pouvons utiliser cet outil d'enchevêtrement, et il existe une option appelée placer l'image, et nous pouvons également accéder à cette icône Figma, et dans le fichier, nous avons l' option appelée placer l'image Utilisons celui-ci et le raccourci est, vous savez, en forme de contrôle K. Je crois avoir ajouté la liste des raccourcis dans les ressources. Vous pouvez également y accéder. Alors pour l'instant, montrons celui-ci. Et je peux juste ajouter MH ici. Vous pouvez maintenir la touche Maj enfoncée pour obtenir une forme similaire précise. Et je peux l'ajouter au centre, comme des tests. Et je peux l'utiliser comme espace réservé. Mais pour l'instant, je ne vais pas le faire. Je vais supprimer celui-ci, et je garderai mes lignes car elles me plaisent beaucoup. Je vais donc garder ces lignes. OK, il y a donc une chose que j'ai oublié de te montrer. Comme dans Shape Video, j'ai créé ce menu de hamburgers. Mais il y a plus d'options car cela a des arêtes vives, et je ne veux pas d'arêtes vives. Donc, en quelques traits, nous avons d'autres options. Actuellement, nous n'en avons aucune et nous avons une flèche linéaire, une flèche triangulaire, rivière triangularo, une rivière triangularo, une flèche moins importante et une flèche en diamant. Et nous pouvons également faire le bord des lignes en rond ou au carré Comme vous pouvez le voir, c'est génial, mais je veux que les bords soient arrondis. Je vais donc tous les sélectionner, et je vais choisir celui qui est arrondi. Et j'en compte un parce qu' il est beau et esthétique. Oh, il y a encore une chose que j'ai oublié de te montrer. Supposons que vous vouliez dupliquer quelque chose que nous maintenons sur Alt, et nous le dupliquons simplement comme ceci. Mais supposons que vous souhaitiez dupliquer plusieurs éléments encore et encore. Vous pouvez utiliser le raccourci pour contrôler les appels. Je sais qu'il existe de nombreux raccourcis, mais ils font de nous des experts de la FigMA Pour cela, nous pouvons utiliser Control D. Il dupliquera donc ces éléments encore et encore. Voici donc comment vous pouvez utiliser le raccourci control pour dupliquer l'élément Mais pour le menu des hamburgers, nous allons garder trois lignes. Je sais donc que certaines personnes utilisent quatre lignes, mais quatre lignes ne sont pas très belles, alors je vais choisir trois lignes. Et si vous le souhaitez, vous pouvez également ajouter ces lignes au cercle. Mais ça dépend totalement de toi, mais je vais rester comme ça. Mais disons qu'il y a une chose comme supposons que vous vouliez copier les propriétés du cercle, et que vous vouliez coller ces mêmes propriétés cette barre de recherche. Sélectionnons donc cette icône de recherche, et commençons copier les propriétés de cet objet. Pour cela, nous pouvons passer à l'édition et copier les propriétés. Le raccourci est le contrôle C. OK, copions-le et collons-le ici. Contrôle. Comme vous pouvez le constater, nous avons copié toutes les propriétés. Et nous n'avons appliqué aucun trait. Désolée. Nous n'avons pas appliqué de coins arrondis car ils sont alternés. C'est pourquoi nous avons des arêtes vives, mais nous pouvons y remédier ici. Ou nous pouvons choisir celui-ci et nous pouvons copier les propriétés de ce rectangle, et nous pouvons le coller ici. Donc pour l'instant, je vais choisir la barre de recherche par défaut car elle est superbe. Tout tourne donc autour des accidents vasculaires cérébraux. Ainsi, nous allons apprendre comment ajouter des traits à des éléments tels que le rectangle, le cercle, etc. Nous apprenons également à copier les propriétés des éléments et à les coller sur les autres éléments, et nous apprenons également comment créer ce magnifique menu mburger comment y ajouter des coins arrondis Et qu'est-ce qu'on apprend d'autre ? Euh, nous avons également appris comment ajouter une image comme espace réservé et ce genre de choses de base que nous apprenons aujourd'hui C'est donc parfait pour les accidents vasculaires cérébraux un par un. Vous êtes désormais doté des compétences nécessaires pour ajouter une touche de jeu supplémentaire à vos créations. Restez à l'affût pour découvrir encore plus de magie du design dans la prochaine vidéo, jusqu'à ce que vous continuiez à créer et à vous amuser. 13. Qu'est-ce que le mode de montage d'objets et comment l'utiliser ! dans figma: GC design entusias Aujourd'hui, je vous guide dans le domaine principal du mode édition d'objets dans Tu connais cet endroit avec ces lignes rayées. Vous pourriez vous sentir un peu comme un leveti du design. Mais s'il vous est déjà arrivé de vous retrouver dans un piège accéléré, ne craignez rien Je suis là pour être ton magicien de l' évasion. Alors pourquoi abordons-nous cette question au début du cours ? Eh bien, si vous êtes un double-cliqueur comme moi, vous êtes peut-être tombé sur le territoire sans le savoir Réduisons-le et apprenons à nous en détacher. Comme si je suis actuellement en mode object tor. Par accident. Imaginons que c' est accidentel. Si vous voulez en sortir, il vous suffit de cliquer sur la ligne Noman Et tu n'es plus en mode objectif. Par exemple, une autre option est que si je passe en mode objectif, cette barre apparaîtra ou la barre de navigation passera en mode objectif, et vous pouvez le créer. Mais si je passe en mode objectatif, et que vous pouvez voir que nous avons quelques options, comme la modification de notre objet Donc actuellement carré, je peux transformer ce carré en autre chose, comme je peux en faire un don ou je peux changer la forme, si je peux aussi faire quelque chose comme ça, disons, je veux faire ce côté autour de lui, pouvoir le faire glisser comme ça. Je peux le faire glisser vers l'extérieur ou le faire glisser vers l'intérieur pour créer cette forme étrange. OK, supposons que vous souhaitiez supprimer ce champ. Donc, ce que vous pouvez faire, c'est que vous pouvez choisir cet outil Pin Bucket, le raccourci est pour cela B. Donc, comme vous pouvez le voir, l'icône ou le curseur se transforme en cette liste déroulante. Et dans cette goutte, il y a le bouton « moins ». Comme s'il y avait un signe négatif. Si je clique dessus, vous pouvez voir que le champ est supprimé. Mais si je veux l'ajouter à nouveau, je peux simplement cliquer dessus, et par défaut, il choisit le gris. Vous pouvez également en changer la couleur. Vous savez déjà comment changer de couleur. Je vais donc choisir celui-ci maintenant. OK, je suis vraiment obsédé par ce local industriel. Voici donc comment vous pouvez sortir du mode édition d'objets. Mais supposons que vous souhaitiez passer intentionnellement en mode édition d' objets. Ce que vous pouvez faire, c'est choisir l'élément ou la forme et cliquer sur ce bouton, comme le bouton carré en pointillé Vous êtes donc maintenant dans le mode d'édition d'objets. Vous pouvez modifier ou créer un objet de cette manière. Tu peux en faire n'importe quoi Faisons quelque chose de bizarre. Oh, j'ai fait P. Oh, pas ce P. que j'ai fait en alphabet. D'accord. C'est ainsi que nous pouvons sortir du mode objectif et c'est ce que vous pouvez faire davantage avec l'édition objective Je vais donc supprimer ce chef-d'œuvre. Cela lui sert à quelque chose. Maintenant, vous savez ce qu'est le mode objectatif, comment en sortir gracieusement C'est donc la vidéo de Porto, et je vous verrai dans la prochaine. 14. Comment utiliser l'outil d'échelle et la sélection dans Figma: Très bien, concepteurs, découvrons le mystère entre la mise à l'échelle et l'outil de sélection dans Figma Croyez-moi, c'est un peu original, et je vous ai surpris en parcourant huit Tout d'abord, nous avons un outil de sélection. Oh, c'est le p. Je transfère supprime un P. OK, il est supprimé maintenant. Prenons ce rectangle et doublons celui-ci. Si j'essaie de réduire la taille, par exemple en maintenant la touche Maj enfoncée, comme vous pouvez le voir, la bannière devient étrange. Il essaie de ficeler, mais il ne le fait pas, et il est actuellement destiné aux tailles 4 à 8, il en reste donc 48. Alors, comment pouvons-nous réduire nos objets ou éléments dans Figma, comme précisément Donc pour cela, laissez-moi d'abord annuler cela. Passons donc à l'outil de sélection, et en dessous de ce mouvement, nous avons l'échelle. Donc, si je choisis l'échelle, si je maintiens la touche Maj enfoncée, et si je la réduis. Comme vous pouvez le constater, nous avons des cordes à notre arc, et vous pouvez faire le contraire, comme vous pouvez le faire grand ou Ainsi, avec l'outil de sélection, la magie opère la mise à l'échelle proportionnée de tout, du trait et du texte. Mais certaines personnes pensent peut-être que vous êtes designer, que vous travaillez avec Photoshop ou Anova. Et laissez passer un tas de textos. Et vous pensez peut-être : groupons-les. Si vous les regroupez, cela fonctionnera. Je sais. Je le sais aussi. Mais si je les regroupe, disons, si je contrôle un groupe de photos. Et si j'essaie de les regrouper et, exemple, de les casser ou de les réduire, comme vous pouvez le voir, ils s' enfoncent ou ils grossissent, d'une façon étrange, pas comme nous le voudrions. Cela ne fonctionne donc pas lorsque nous groupons des choses. Et oui, il existe également un raccourci pour cela. Je sais que vous pensez peut-être à l'échelle. Mais non, il s'agit d'un outil de sélection K pour. Je sais. B est la logique, mais c'est la méthode la plus connue pour l' outil de sélection et K pour la mise à l'échelle. Donc pour la sélection. Donc, actuellement, je choisis tout cela. Il est donc sélectionné et K pour la sélection. Je te promets qu'à la fin de ce cours , tu seras un esclave. Maintenant, vous êtes armé de cette connaissance des compétences et de la sélection Passons à la vidéo suivante. Donnez-nous mes camarades de design. 15. Groupes et cadres Figma pour de meilleures conceptions d'interface utilisateur: Bienvenue aux étudiants. Le B d'aujourd'hui va nous emmener au plus profond de l'univers de Figma Explorez la nuance entre le groupe et les cadres. Baggala parce que nous entrons dans un domaine un peu plus complexe. Mais ne craignez rien. Je suis là pour vous guider. Jusqu'à ce que vous ayez passé en revue les bases, et ici, maîtrisez les types, les polices, rectangle et les outils, mais maintenant, élevons-le à quelque chose Bienvenue dans le monde des cadres. Je sais que j'aborde ce sujet au début du cours parce que MusteringFrames était l'un des défis de MtricSFMA, et je veux m'assurer que vous avez une longueur d' Tout d'abord, révélons la maîtrise des groupes. Prenons donc une ellipse rectangulaire, ainsi que l'étoile Comme vous pouvez le voir sur Burger Menu, ce sont les formes que nous avons ajoutées, mais elles ne sont pas organisées, et vous pouvez également tout voir sur la page d'accueil, les lignes, les rectangles, la ligne numéro dix, le rectangle dix Donc c'est un peu confus et ça gagne en organisation. Donc, dans ce cas, nous pouvons tous les sélectionner comme ceci, et nous pouvons essayer de cliquer dessus et de cliquer simplement sur la sélection du groupe. Maintenant, ils sont en groupe. Supposons que vous souhaitiez le déplacer vers l'interpag Tu peux juste le déplacer comme ça. En un seul clic. Vous n'avez pas besoin de le faire glisser et déposer comme ça encore et encore, vous pouvez donc le faire en une seule fois. C'est donc le gros avantage du groupe. Cela rend notre design organisé, comme vous pouvez le voir dans le panneau des couches. Nous avons maintenant une section appelée groupe, dont l'icône est pointillée par un carré Et c'est là que se trouvent nos formes. Nous pouvons le renommer en fonction de votre design. Mais pour le moment, je vais rester comme ça. Supposons que vous souhaitiez organiser cela, comme dans le design. Donc, ce que vous pouvez faire, c'est simplement double-cliquer dessus et le suivre comme ça. Je sais que nous pouvons le faire en harmonie. Mais je dois dire que ce sujet est un peu plus avancé. D'accord, voici comment nous pouvons lier nos éléments et nos objets. OK, c'est le seul avantage du regroupement. Vous pouvez également utiliser le raccourci Control G, laissez-moi le regrouper, cliquer avec le bouton droit de la souris et dissocier Et si je sélectionne OK, maintenant c'est Dissocier. Si je les sélectionne tous, je peux simplement appuyer sur Ctrl G. Maintenant, ils sont tous groupés. Passons maintenant aux cadres. D'accord, nous avons maintenant ce petit panneau de navigation ou section de navigation où nous avons beaucoup de boutons. Donc, pour le moment, je n'ai pas mentionné de quel type de boutons il s'agit, mais imaginons qu' il s'agit du bouton d'accueil. Il s'agit du bouton de catégorie. Il s'agit d'un bouton de commande. C'est le bouton de mon compte, et c'est peut-être le bouton de la carte. OK, alors encadrons-les. C'est le même processus. Sélectionnez l'objet de tous les éléments et cliquez dessus pour sélectionner le cadre. Et vous pouvez également utiliser le raccourci Control G. D'accord, c'est donc le cadre maintenant. Si je vais dans un panneau de couches, vous pouvez voir qu'il s'agit du cadre et que l'icône est également modifiée. OK, nous avons donc ces éléments imbriqués à l'intérieur, et voici les autres formes et objets Nous pouvons faire les mêmes choses qu'avec les groupes. Nous pouvons les arranger comme ça ou nous pouvons déménager à l'extérieur. Actuellement, c'est hors cadre. Nous pouvons tout arranger et tout ça. Nous pouvons tous faire les mêmes choses. Mais avec les cadres, nous obtenons davantage de fonctionnalités, telles que le contenu des clips et les contraintes. Maintenant, laissez-moi vous montrer quel type de fonctionnalité nous obtenons avec les cadres. J'ai donc ce clone d'Instagram. C'est un clone vraiment basique. Nous avons donc actuellement cette section horizontale semblable à une histoire, et je ne veux pas que cette section soit visible comme ce cadre extérieur. Donc, ce que je peux faire, c'est cliquer sur le contenu du clip. Et je peux juste le suivre comme ça. Et si je me lance dans un prototype, vous pouvez voir que je suis capable de le faire. Je peux aussi faire celui-ci. C'est donc l'avantage du contenu du clip, et au final, c'est le cadre. Donc, comme vous pouvez le voir dans moins de panneaux, c'est le cadre. D'accord, c'est le super pouvoir du contenu des clips, mais il y a le plus de cadres, introduisez le concept de contrainte Bon, maintenant, parlons des contraintes. OK, nous avons donc ce groupe. Permettez-moi de dissocier celui-ci d'abord. OK, donc c'est maintenant ngroup et laissez-moi tous les sélectionner Laisse-moi le réduire un peu. Déplaçons-le ici. Et j'ai également ajouté notre nom de marque qui est Click Card. Maintenant, ces éléments sont comme ne pas être groupés, ni comme s' ils n'étaient pas encadrés. Permettez-moi donc de tous les sélectionner. Et cliquez avec le bouton droit de la souris et sélectionnez le cadre. Maintenant, disons que je veux que cet élément soit ou que ce texte soit sur le côté gauche et en haut. Je vais donc aller dans une secte et de gauche en haut. Il s'agit du réglage de base. Maintenant, je vais choisir juste et en haut et celui-ci devrait être en haut, celui-ci devrait être en haut de page. si je le fais grand ou petit, il doit rester au même endroit sur le côté droit. Cet élément doit rester sur le côté droit, et cet élément doit rester sur le côté gauche. Permettez-moi de dupliquer celui-ci. Et si j'importe, désolé, si j'ajoute un pitch dextop comme celui-ci, et si je l'ajoute ici, si j'essaie de l'étendre, comme vous pouvez le voir, je suis capable de réutiliser mon élément encore et encore C'est l'avantage de la contrainte. Et souvenez-vous d'une chose. Si vous souhaitez dissocier le cadre, il existe une option appelée dissocier C'est maintenant dissocié. Et cela a également fonctionné avec le groupe, disons que vous avez un élément. Disons qu'il s'agit de l'élément du groupe. OK. Et si vous souhaitez également les regrouper , utilisez la même méthode. Dissociez le travail pour les deux, comme pour la sélection de cadres, ainsi que pour la sélection de groupes OK, laissez-moi allumer celui-ci parce que nous ne l'utilisons pas. OK, c'est ce qu'il a fait. C'est donc la contrainte. Je sais que c'était un peu confus, comme la contrainte et le contenu du clip. Mais lorsque vous l'utiliserez encore et encore, vous vous y habituerez et il deviendra l'un de vos outils préférés. Je sais que j'ai introduit ce sujet très tôt car au fur et à mesure que vous progressez dans FiMMA, vous rencontrerez des cadres partout Ils deviennent le choix préféré en raison de leurs fonctionnalités supplémentaires telles que la contrainte, variante, etc., que nous explorerons en profondeur dans les prochains sujets dans les prochaines vidéos. La prochaine fois, vous vous demanderez pourquoi cette plaque en U gratuite est pleine de cadres. Vous le saurez car les pros des cadres étaient là pour eux. Vous n'avez rayé que la surface des cadres et des rainures Au fur et à mesure que nous avancerons, les choses deviendront plus géniales, pas compliquées. Oubliez la confusion dès maintenant, et vous serez bientôt amené à souder des cadres comme un magicien du design. Es-tu prête à vivre d'autres aventures avec Figma parce que je le suis ? Passons donc à la vidéo suivante et découvrons d' autres secrets de conception. Alors restez curieux. 16. Skillshare 101 : soumettre des projets et présenter votre travail: Les esprits créatifs sont de retour à Figma Master Class. Dans ce master class sur les figues, mon approche consiste à apprendre par la pratique. Aujourd'hui, nous abordons la partie passionnante du voyage. Cela revient à soumettre nos projets dans Skillshare. Vous avez donc développé ces compétences en design et conquis des projets du monde réel. Il est maintenant temps de partager votre chef-d'œuvre avec le monde entier. Voici donc comment vous pouvez le faire. Une fois votre projet terminé, il est temps de le partager avec le monde entier. Soumettez votre chef-d'œuvre sur Skills Inspirez les autres avec votre création unique. Je vais donc vous expliquer comment vous pouvez soumettre vos projets. OK, donc tout au long du cours, je propose quelques défis de design comme celui-ci. Et dans ce défi de conception, j'ai mentionné tout, comme ce que vous devez faire dans ce défi de conception, toutes les instructions sont fournies ici. De plus, il y a un p dans la section des ressources. Donc, si nous passons au projet et à la ressource, il y a un Zile qui le télécharge et qui l'ouvrira Et nous y trouvons le fichier d' exercices de conception d'expérience utilisateur et d'interface utilisateur Figma. Accédez à ce fichier. Et comme vous pouvez le constater, il y a les petits défis de conception. Ce défi de design vous aidera à apprendre le design de Figma et de X. Il y a au total, je suppose, 18 petits projets, plus de petits défis de conception. Et après cela, j'ai joint des projets Word à l'arrière. Le premier projet arrière est Click Cart. C'est-à-dire que nous allons concevoir cette application. Dans cette section, il vous suffit de soumettre ce projet dans la section des projets. Je vais d'abord vous dire comment le soumettre. Permettez-moi de vous parler des autres projets. Ensuite, nous avons le projet numéro deux. Restez. C'est l'auberge où vous pouvez réserver une petite auberge lorsque vous êtes en vacances dans un autre pays. Ensuite, nous avons une application de livraison de nourriture. Vous devez concevoir des robots d' application somato après cela, nous avons MCA, vous pouvez concevoir Aflac Spotify Après ce numéro de projet f, vous devez concevoir vous-même une application ou un site Web Dans ce projet, je ne vais rien vous aider. Mais pour chaque projet, j'ai donné toutes les instructions, par exemple ce que vous devez faire, d'où vous pouvez trouver l'inspiration, où vous pouvez la soumettre, et quel type de technique, quel type de matrice de figues vous devez appliquer pour mener à bien ce projet Voici donc le projet Fire Word. Tu dois le faire. Je vais maintenant vous expliquer comment le soumettre. Supposons que vous ayez conçu ce wireframe. Vous souhaitez maintenant le soumettre à un ski-share. Tu veux le montrer au monde entier. Nous pouvons donc simplement aller skier Il y a une section appelée Summit Project. Lèche dessus Et vous pouvez ajouter une image miniature. Vous pouvez en faire une capture d'écran. Laissez-moi vous montrer comment vous pouvez le faire. Prenez une capture d'écran de votre design comme celle-ci , puis soumettez-la ici, téléchargez l'image ici, et vous pourrez donner un titre de projet, comme si le titre de ce projet était un cadre métallique. Vous pouvez donc ajouter le titre du projet, comme un cadre pour le panier de clics, puis ajouter une description du projet, comme ce que vous avez fait dans ce projet. Ensuite, vous pouvez ajouter un lien à ce sujet, mais je dirais d' ajouter un lien pour les projets du panneau arrière, car ces projets se comporteront bien. Je sais qu'il y a beaucoup d'étudiants qui sont aussi créatifs que moi. Vous pouvez enregistrer un écran comme comment fonctionne votre application, comment elle s'affiche, comment elle interagit avec l'utilisateur et l'ajouter ici, et nous rendrons également ce projet privé en ajoutant du texte comme la conception Web, X, Figma, etc. Et ensuite, soumettez votre projet. Je vais te dire une chose. Si vous concevez de petits défis de conception. Vous pouvez donc les rendre privés. Je ne peux donc que les regarder, je suppose. Je ne peux donc que les regarder, comme nous nous en sortons dans ce cours. Et si je veux montrer vos projets réels de routes ferroviaires au monde entier, vous pouvez les soumettre, vous n'avez pas à les rendre privés. La communauté de la sculpture est là pour vous soutenir à chaque étape. Interagissez avec d'autres apprenants et échangez en retour. Je célèbre les réussites de chacun. N'oubliez pas qu'il ne s'agit pas simplement d'un défi de projet. C'est l'occasion pour vous de vous développer, apprendre et de présenter vos compétences à un public mondial. Alors, êtes-vous prêt à relever le défi ? Laissez libre cours à votre créativité chez Cm project dès aujourd'hui. Maintenant, le projet de sculpture lance le défi de faire partie de la communauté de créateurs de Wron C'est votre potentiel et faites votre projet un animal de compagnie durable. J'ai hâte de voir ce que vous allez tous créer. N'oubliez pas que votre parcours consiste à devenir un expert en figma. Faisons de la magie du design ensemble. 17. Class Project 01 Wireframe: Create nous rappelle que c'est l'heure du projet et que nous nous lançons ensemble dans quelque chose de génial. Vous m'avez donc suivi. Et peut-être que vous vous retrouvez dans phase similaire ou peut-être un peu en retard Ne vous inquiétez pas, car nous sommes dans le même bateau. Que vous soyez sur la même longueur d'onde ou que vous ayez besoin de rattraper votre retard, faisons participer ces amis. Maintenant, je veux que vous le restiez un peu proche de ma mise en page. Même si vous réfléchissez, peut-être que vous n'y êtes pas. Léchons-le. Pourquoi ? Eh bien, cela vous aide à suivre ce cours en douceur. Ces exercices ne sont essentiels que pour explorer toutes les fonctionnalités intéressantes que FMA a à offrir Maintenant, vérifiez votre fichier CIS, il y a une section nommée FMA exercise projects Ouvre-le et Va. Les exigences relatives aux différents projets de classe sont clairement définies. Maintenant, utilisez les compétences que vous avez acquises jusqu'à présent, et votre création devrait ressembler à un exemple donné. Pour regarder de plus près, zoomez sur le PNG. Il est également fourni dans le fichier d'exercices de ressources. Il existe donc une grande version de Pj qui s'appelle, je suppose, clickt Parlons maintenant des exigences. Nous visons environ six pages. C'est comme une page d'introduction. C'est vraiment simple à concevoir après la page d'accueil, la catégorie Burgermenu, mon compte et mes commandes Et si vous voulez faire preuve de plus de créativité, vous pouvez ajouter une page, comme une page d'accrochage ou des informations sur le produit, par exemple Vous pouvez également créer ces pages. Et n'oubliez pas que nous concevons WiFire en utilisant des formes simples, ainsi que des points simples. N'utilisez pas de polices vraiment géniales. Et une fois votre projet terminé, prenez une capture d'écran. Pour les utilisateurs de PC, c'est comme un écran d'impression, et pour les utilisateurs de Mac, je suppose que c'est Coma Ship Four. Et si vous avez perdu quelque part, Google est votre ami. Vous pouvez effectuer une recherche sur Google ou utiliser un raccourci pour une capture d'écran. Et si vous ne voulez pas prendre de capture d'écran, vous pouvez simplement prendre une photo avec votre smartphone et la télécharger dans la section projet. Je sais que cela ressemble à un peu plus de devoirs, mais croyez-moi. Ça vaut le coup. Nous perfectionnons nos compétences, apprenons les ficelles du métier et nous nous améliorons ensemble Alors, guerriers du wireframe, je vous retrouverai dans la prochaine vidéo Voilà, ce design est prêt. 18. Meilleurs packs d'icônes gratuits pour les designers UIUX: D'autres designers. Aujourd'hui, plongeons-nous dans les trésors des icônes gratuites et discutons de l' endroit où les trouver. Je ne vais pas simplement vous donner le nom du site Web. Je vais plutôt vous indiquer ce qu'il faut rechercher lors du téléchargement d'icônes pour vos projets Figma Ma destination préférée est la communauté de Figma. En cela, nous avons des ressources fantastiques avec un mélange de contenu gratuit et premium. Cependant, Internet fait équipe avec les icônes gratuites. Alors explorez et trouvez ce qui vous convient le mieux. Passons maintenant à la communauté Figma et explorons quelques icônes gratuites D'accord, comme vous pouvez le voir, actuellement, nous sommes en projet. Donc, si je rentre chez moi, il existe une option appelée Explore Community, ou vous pouvez également y accéder à partir d'ici. Et pour la communauté, le symbole est une sorte de globe, une sorte de globe Internet. Et à partir de là, vous pouvez accéder à toutes sortes d' actifs tels que des icônes, différents projets, ainsi que des cadres métalliques. Vous le nommez, vous trouverez tout ici. Alors laissez-moi trouver quelques icônes ici. Donc, comme vous pouvez le voir, nous avons quelques icônes ici. Voici les packs d'icônes. Il contient 1 000 icônes gratuites. Vous pouvez voir que ce téléphone contient 6 000 icônes, et il convient à ce type de soft, comme le Pigma Sketch ou le XD et d'autres pneus pleins de sang également Vous pouvez également les trier par free pad » ou « premium ». Pour le moment, je vais choisir la version gratuite. Vous pouvez également utiliser des plugins dans la vidéo suivante ou probablement après deux vidéos. Je vais vous expliquer comment utiliser les plugins car les plugins sont très simples à utiliser, et il suffit de glisser-déposer. Donc, au lieu de l'utiliser, vous pouvez utiliser des plugins. D'accord, vous pouvez donc également trier cela par train populaire et récent. J'utilise principalement le populaire. Parce que dans la section populaire, nous avons beaucoup d'icônes que les gens adorent. J'utilise principalement celui-ci comme Bazel ainsi que celui-ci avec une licorne Jusqu'à présent, passons aux lunettes, je pense que je vous le promets bien. OK. Donc je suppose que je l'utilise déjà, c'est pourquoi il montre un fuma ouvert Mais certaines personnes pourraient avoir cette option de duplication. Donc, si vous voyez un doublon, vous pouvez le dupliquer, mais actuellement moins ouvert dans Figma et cela ouvrira un nouveau projet Et nous y trouverons de nombreuses icônes. Je peux donc voir que nous avons un tas d'icônes. Voici les grandes lignes. Ce sont les icônes solides. Supposons que si vous souhaitez utiliser cette icône comme cette icône d'accueil, vous pouvez simplement la copier comme copier les contrastes et la coller sur votre design OK, nous avons donc cette icône de la maison. Nous pouvons simplement le suivre ici car ce sera notre section d'accueil, comme le bouton d'accueil. Comme vous pouvez le voir, nous avons une icône en forme de losange violet sur notre icône. Comme dans le panneau, vous pouvez l' associer ici. Il s'agit du composant. Le composant est comme ajouter un sujet. Nous aborderons ces sujets dans de futures vidéos. Un stade pour ça. N'oubliez donc pas qu'il s'agit du composant principal et que nous pouvons simplement l' utiliser directement quand nous le voulons et où nous le voulons. Maintenant, allons-y, et supprimons d'autres icônes gratuites. D'accord, il existe donc des sites Web comme Icone Scout. À partir de ce site Web, nous pouvons obtenir toutes sortes de choses relatives à EIUX C'est aussi comme la communauté FMA, mais ce sont les modèles triés et populaires sont également disponibles ici Le suivant est le choix gratuit. OK. Permettez-moi donc de télécharger un élément à partir d'ici. Supposons que je choisisse celui-ci. Il existe donc une option appelée PNG, et nous pouvons télécharger celle-ci. Pour l'instant, passons au PNG. OK. Et permettez-moi de télécharger également le SVG. Je pense qu'il n'y a pas d'autre choix. Mais laissez-moi télécharger un fichier SVG. OK, donc actuellement, je suis sur le site Web de recherche d'icônes. Nous obtenons donc les deux options, comme le fichier PNG et le fichier S G. Et dans d'autres, nous avons également d'autres options. Mais pour l'instant, je souhaite télécharger le fichier SVG. Téléchargeons donc le fichier SVG. Et permettez-moi d'importer ces fichiers dans notre projet. Celui-ci est le fichier SG et celui-ci est le fichier PNG. Laissez-moi le passer ici. Je suis en attente, je n'ai pas occupé de quart de travail, mais pour l'instant, je vais maintenir le quart de travail. D'accord, nous avons donc le PNG, et nous avons aussi SG. Mais avec le SVG, nous pouvons faire beaucoup de choses. Le PNG n'est qu'une image. On ne peut pas faire beaucoup de choses avec le PNG. Mais avec SEG, vous pouvez faire beaucoup de choses. Actuellement, il possède cette vaste expérience. OK, laisse-moi sortir ça du cadre. OK, nous avons donc cette icône G. Donc, avec ce fichier SVG, nous pouvons augmenter le trait, disons que je veux que le trait soit égal à cinq Je peux également changer la couleur du trait. Disons donc que je veux que ce soit blanc, je puisse le changer en blanc ou que je puisse le choisir sans qu'il perde en qualité, exemple si j'augmente autant, il restera le même. Mais si j'augmente le fichier PNG, comme vous pouvez le voir, le pixel devient un peu flou, mais avec le fichier, ce n' est pas le cas OK, c'est donc la différence entre un fichier PNG et un fichier SVG. Gardez donc à l'esprit lorsque nous utilisons des icônes. N'utilisez pas le format PNG. Je dirais d'utiliser des fichiers SVG. D'accord, c'est ici que vous pouvez trouver toutes sortes d'icônes pour vos projets. Je vais vous donner tous les liens dans les ressources. Alors jetez un œil à ça. Donc, celle-ci est la bibliothèque UX, celle-ci est Iconcot. Celui-ci est La Pannja. Et le choix gratuit après l'icône, trouvez-nous. Voici donc quelques ressources gratuites que vous pouvez utiliser pour vos projets. Et ils sont totalement exempts de droits de copie. Vous pouvez les utiliser directement. Mais avant d'utiliser des icônes similaires, gardez à l'esprit que l'icône est gratuite ou non. Supposons que vous importez des icônes depuis Icone Scout. Il sera arrêté. Son utilisation est gratuite , commerciale ou personnelle. Alors, beb ça et utilise l' accordéon. Ça. C'est ainsi que vous pouvez télécharger importation et les ressources pour les icônes. Passons maintenant à la vidéo suivante pour agrémenter notre wireframe de quelques icônes. Alors restez créatifs. 19. Les bases de l'icône dans Figma: Étudiants de Goma Dans les années précédentes, nous apprenons comment télécharger des icônes gratuites où les obtenir. Nous avons également constaté la différence entre le PNG et le SVG. Nous avons également supprimé la communauté, la communauté Pigma, et nous avons également vu d'autres ressources Donc, dans ce bâtiment, nous allons réellement utiliser du CoS dans notre structure métallique. Nous explorons donc notre fichier d'accès en PMMA pour intégrer certains CO et nous assurer qu'ils s' harmonisent avec notre conception existante Donnons-leur donc un aspect lisse et uniforme sur l'ensemble de notre structure métallique. Alors, tu es prêt ? Alors allons-y. Passons donc à notre outil rectangle et plaçons l'image. Donc, dans ce fichier d'accès, il y aura des icônes en forme de clic, alors ouvrez-les toutes et placez-les une par une ici OK, ce sont donc cinq icônes. OK. Comme vous pouvez le voir, nous avons ajouté un endroit d ici, et voici le cadre. Permettez-moi donc de supprimer cette boîte rectangulaire. OK. Laissez-moi sélectionner ceci et OK. Alors maintenant, la première sera notre maison. Square, je vais placer mon icône d'accueil. Après cela, je vais placer une catégorie. Ensuite, ma commande, et celle-ci est pour notification, et celle-ci est pour notre profil. OK, donc actuellement, la taille des icônes, je dirais que la largeur est de 22 points z un. La hauteur est de 20 9117. Si je veux augmenter ou diminuer cela, vous pouvez le modifier ici. OK, disons que je veux monter jusqu'à 30, donc je peux juste passer à 30, et cela augmentera la largeur et la hauteur. Cela dépend totalement de votre design. Mais pour l'instant, je vais le garder tel quel parce que c'est très beau. D'accord, alors utilisons-les d'abord. s'agit de la section d'alignement où vous pouvez aligner n'importe quoi dans Figma Si vous cliquez sur ces trois barres sous forme de menu à barres verticales, il existe une autre option, comme « ligoted up ». Il sera donc attaché conformément à notre design, et vous pouvez le placer au centre comme ça, et vous pouvez voir que le bas n' est pas très bien ajusté Nous allons donc cliquer sur le réglage inférieur. Et c'est à ajuster maintenant. Nous pouvons également l'aligner au centre, comme ceci. Notre icône d'accueil n'est pas très grande, alors laissez-moi en faire une grande car les autres icônes en ont environ 35 et celle-ci en a environ 27. Laissez-moi sélectionner celui-ci. Ce sont les propriétés de contrainte si je le sélectionne, et si je change la valeur de la largeur, sorte que la hauteur et la taille seront automatiquement hj ici Actuellement, toutes nos icônes sont de la même taille. Supposons que cette icône de profil semble petite, vous pouvez également l'agrandir ici. Jusqu'à présent, je vais garder*** Permettez-moi de le sélectionner à nouveau, et laissez-moi ajuster le bas. Donc, si nous ne sommes pas en mesure de comprendre cela dans la section, ne vous inquiétez pas. Je vais faire une vidéo délicate à ce sujet. moment, il suffit de comprendre que la section « in » sert à aligner nos icônes. Dans cette vidéo, nous apprenons simplement comment importer des icônes et comment les modifier. OK, c'est donc notre section. Sélectionnons-les donc tous, comme cette barre de navigation, ainsi que les icônes. Nous les déplacerons et les sélectionnerons tous, ainsi que ce rectangle et jambe droite, et nous en ferons un cadre. Laissez-moi vous montrer une magie ici. Supposons que je veuille cette même barre de navigation ici également sur le menu des hamburgers. Dans ce cas, ce que je peux faire, c'est qu'il y a une étape traditionnelle, c'est-à-dire que je vais tout recommencer. Mais vous pouvez faire autre chose, comme sélectionner ce cadre. Ainsi, comme vous pouvez le voir dans le panneau, il est sélectionné. Maintenant, il suffit de contrôler C, puis de sélectionner le menu du hamburger. Vous devez sélectionner le menu des hamburgers et simplement le coller ici. Comme vous pouvez le voir à la même position, nous avons collé ce bouton de navigation. Quant à savoir si nous pouvons le faire ici, mais Tate l'a fait en premier. Catégorie I. Et aussi bien sur mon compte. Fichier J'ai supprimé le tigre direct, alors laissez-moi tous les supprimer Je pense que ce n'est pas un cadre. OK. Permettez-moi donc de supprimer celui-ci également, ainsi que Pasta Control, ainsi que mes commandes. D'accord, voici comment nous pouvons ajouter nos icônes dans notre trame métallique. Mais laissez-moi en changer la couleur. Je ne m'y opposerai pas davantage. OK, donc la couleur sera celle-ci parce qu'un échange n'a pas l' air si esthétique, et celui-ci devrait être blanc. Et parce que nous sommes dans la section Bergme. Je pense donc que dans la section Burgom, nous n'avons pas besoin de cette barre de navigation, je vais donc supprimer celle-ci OK. OK, le cadre quatre est vide. Donc, actuellement, nous sommes dans la catégorie. catégorie devrait donc être L. Et celle-ci est L. Laissez-moi créer ce blanc blanc blanc. Et voici mon compte. Ce profil doit donc être L et celui-ci doit être blanc. Pareil pour celui-ci. OK, voici donc notre barre de navigation. L'utilisateur saura donc dans cette section qu'il est, disons , sur la page d'accueil. Cela indiquera donc que nous sommes la page d'accueil, si nous sommes dans la catégorie, donc cette icône indiquera que nous sommes dans la section des catégories après cela, dans mon profil, ainsi que dans mes commandes. Étudiants, c'est ainsi que vous pouvez ajouter des icônes à votre iframe ou à vos conceptions d'interface utilisateur C'est donc le Ford Will et je vous verrai dans le prochain. 20. Comment installer et utiliser des plugins dans Figma: Bonjour, design to ias. Dans ce but, nous explorons la source secrète qui rend Figma incroyable C'est un plug in. Cet outil astucieux est créé par des dragals extérieurs à Figma Étendez les capacités de la plateforme pour vous permettre d'en faire plus et de travailler plus efficacement. Nous allons nous concentrer sur certains plugins pour le moment. Mais n'oubliez pas qu'il existe tout un monde de plugins, et ils sont tous accessibles via la communauté Figma Il existe donc trois options pour lesquelles nous pouvons utiliser des plug-ins. Comme le premier, nous pouvons entrer dans cette icône Figma. Il existe une option appelée plugins. Voici quelques plugins installés dans mon Figma. À l'heure actuelle, vous pouvez accéder à ce bouton. Il s'agit des ressources. Et là, nous pouvons accéder aux plugins et rechercher différents types de plugins, et nous pouvons également les ajouter à nos favoris et cliquer directement dessus pour les utiliser Par exemple, je veux ajouter une photo de profil ou je peux simplement la sélectionner, et disons que je veux que le profil soit celui-ci. Je peux donc simplement cliquer dessus, et comme vous pouvez le voir, l'image est ajoutée O Disons que vous voulez une icône de connexion, vous pouvez donc simplement rechercher une icône. Des icônes, et il vous donnera des plugins d' icônes très populaires. Allons-y, disons l'icône huit. Et il suffit de cliquer car il n' est pas installé dans mon système. OK, il est donc installé maintenant. OK, voici donc l'interface du plugin Icone Eight. Nous pouvons effectuer une recherche comme je veux une icône de la maison. Je peux simplement rechercher chez moi, et nous pouvons également choisir différentes options comme l'option PNG p. Nous pouvons également en changer la couleur. Nous pouvons également modifier le format des icônes. Disons que je veux ce bouton d'accueil, donc je peux simplement le faire glisser, je peux le coller et je peux l'utiliser quand je veux. C'est l'avantage d'utiliser un plug-in. Nous pouvons également accéder au plugin via la communauté. Vous pouvez simplement vous rendre dans la communauté. Disons que je ne veux que des plug-ins de Let's Picture. Bien sûr. Et je peux aller comme dans les plugins. Il y a 47 plugins, et je peux simplement cliquer sur le bouton Ouvrir. Je peux régler le problème. Passons au populaire. Ce sont donc des plugins populaires, je peux donc simplement les ouvrir dans mon figma Et comme vous pouvez le voir, vous demandez où vous voulez ouvrir vos plugins, alors allons-y sans titre et lançons C'est une méthode plutôt difficile. Je vous ai déjà montré comment ouvrir des plugins à partir des ressources. Utilise celle-là aussi. Disons que je souhaite ajouter ma photo de profil ici. OK, ça a l'air cool. Je vais choisir celui-ci. comment vous pouvez utiliser les plug-ins. N'oubliez pas que les plugins que nous utilisons tout au long du cours peuvent avoir des interfaces différentes, mais le concept sous-jacent reste le même. Faciliter les capacités de Pigma. Les plugins sont un aspect passionnant de Figma, et nous en parlerons davantage dans de futures vidéos Entrez pour une plongée plus approfondie dans les pixels ou Pizza Bay et d'autres plugins puissants à côté de Trail. On se voit là-bas 21. Projet de cours 2 : maîtriser la boîte à outils : icônes et plugins pour des designs Figma puissants: Bonjour à tous, bienvenue dans notre aventure en matière de design. Aujourd'hui, nous plongeons dans le monde merveilleux de Figma. Notre créativité ne connaît pas de limites. J'espère que vous êtes tous aussi enthousiastes que moi car nous sommes sur le point de faire passer vos compétences au niveau supérieur. Comme vous le savez, nous avons exploré les incroyables capacités de Figma, et la session d'aujourd'hui vise à traduire ces connaissances en actions Vous avez découvert les icônes, les plugins et la magie qui se produit lorsqu'ils sont combinés. Voyons maintenant cela dans l'action alors que vous vous lancez dans votre propre projet. Tout d'abord, je veux que vous vérifiiez tous les fichiers excédentaires. Vous trouverez les outils précieux que sont les icônes pour pimenter votre design. Et vous ne savez déjà pas comment ajouter des plugins dans figma, ouvrez-les Considérez-le comme votre terrain de jeu pour le design. Maintenant, n'oubliez pas que la flexibilité est essentielle. N'hésitez pas à jouer avec ces icônes et plugins. Mais gardez à l'esprit que certains plugins peuvent modifier la taille de vos icônes Alors ne vous inquiétez pas, adaptez-les à votre design. Absolument. Il s'agit de le personnaliser de manière unique. Pour vous donner un peu d'inspiration, voici un aperçu de mon propre projet. Remarquez les icônes et les plug-ins, ainsi que l'apparence générale. C'est comme ajouter une touche de personnalité à votre design. Maintenant, voyons ce que vous pouvez apporter. Et voici le fichier d'instructions notre exercice de projet FDMA Vous pouvez le parcourir, toutes les instructions sont écrites ici, et à la fin, lorsque vous aurez terminé votre projet, soumettez-moi ce fichier. Vous pouvez prendre une capture d'écran ou une photo du design et me la soumettre. Je suis là pour vous aider à chaque étape. Si vous avez des questions, n' hésitez pas à les poser. Transformons cela en un voyage collaboratif. Et n'oubliez pas que c'est là notre véritable tournant en matière de design, de nouvelles découvertes passionnantes. Alors, mes incroyables designers, créons un jeu et transformons ces cadres en œuvres d'art. Plongez dans Figma, explorez les icônes, exploitez la puissance des plugins et laissez libre cours à votre créativité J'ai hâte de voir ce que tu trouveras. Faisons de ce projet un projet pour les livres. 22. Comment créer et utiliser des pages dans votre dossier Figma: Bienvenue aux étudiants dans cette offre, nous allons nous plonger dans le pli des pages de Figma Cela peut sembler un peu ennuyeux, mais croyez-moi, c'est un outil d'organisation crucial qui vous permettra de travailler de manière serrée et extensible. Commençons donc. Tout d'abord, vous avez probablement remarqué que nous avons déjà une page par défaut. C'est la page numéro un. page contient actuellement tous les cadres que nous avons créés jusqu'à présent, probablement la page IntervageHME, la catégorie du menu Burger, mon compte Pour que tout soit clair et organisé, nous allons créer de nouvelles pages. Par exemple, cliquons sur le bouton de cette page et ajoutons une nouvelle page ou renommons cette page Renommons donc cette page. Actuellement, c'est la première page, donc je vais la renommer comme Click Art Mobile App Pour le renommer, il vous suffit de cliquer sur votre page numéro un Maintenant, nous pouvons changer de nom. OK, ce sera donc le nom de notre page. Maintenant, ajoutons un autre nom de page. Supposons que nous voulions créer une application Dextp ou une application pour tablette. Dans ce cas, nous allons créer une nouvelle page. Et en cela, nous allons créer un design spécifique pour tablette. Ou laissez-moi le renommer à nouveau car celui-ci est pour mobile Si quelqu'un accède à ce fichier, cette personne sera confuse. Qu'est-ce qui se passe ? Comme si celle-ci était une tablette. Je comprends, mais quel est le précédent ? Permettez-moi donc de le renommer en mobile. OK, nous avons donc deux pages. Le second est totalement vide, nous n'avons donc aucun élément dedans, mais ajoutons quelques cadres. Alors tablette, choisissons tablette. Oh, ça. OK, nous sommes donc Surface Pro et iPad mini 8, iPad 11 et iPad pro 0,12 0,9 Alors prenons celui-ci comme 12,9 pouces. Et nous pouvons créer plusieurs pages, je dirais, comme hold Alt et tublicate Et disons que nous avons six pages, je suppose, six cadres dans notre application, donc nous allons faire la même chose. OK, ce sera donc notre section consacrée aux tables. Je ne vais donc pas le concevoir. Je le montre juste à des fins de démonstration, comme comment utiliser les pages. Comme si vous vouliez créer l' ensemble de l'application pour tablette comme ceci. Vous pouvez créer une nouvelle page, créer ces nouveaux cadres et créer une nouvelle application pour tablette, ou vous pouvez créer un site Web semblable à un ordinateur de bureau pour la même application qui est Click Card Donc, si cela vous intéresse, faites-le, et vous obtiendrez des points supplémentaires Vous pourrez également partager cela avec moi et vous saurez où soumettre ce projet. Vous pouvez en prendre une capture d' écran et la soumettre dans la section du projet. Bien, passons maintenant à la nouvelle page, et créons une page unique, dans laquelle nous allons ajouter Card, Tastro et Grief OK, donc ça va être notre première page. Laisse-moi le déplacer ici. Il suffit de le tenir. Il suffit de cliquer dessus, de le maintenir enfoncé et de le faire glisser comme ça. Il va donc passer à autre chose. Donc, fichier de ressources, un fichier d'exercices Figma J'ai ajouté ce flux de tâches, ce flux de tâches et un brief. Il vous suffit donc de le copier-coller ici. Vous ne savez donc pas comment l'ajouter, allez dans la section d'accueil et cliquez sur Importer. Choisissez un ordinateur From. OK, je fais de l'exercice sur le fichier, il est ici, Figma, désolé, cliquez sur Card brief et tallo cliquez dessus, et si l'extension est fi Si vous pouvez utiliser PNG mais je dirais d'ajouter le fichier fi au fichier Figma Et moins important. OK, c' est fait, donc c'est par ici. Il suffit de copier toutes ces choses. Le cadre un et ce cadre deux. Contrôlez C, et copiez-le dans notre This is where I want to paste. Control V. Ce sera notre brief. Ce sera notre application mobile, et ce sera notre tablette. Ou si vous souhaitez créer un autre site Web, vous pouvez également créer une nouvelle page, la renommer et créer un site Web. Je suis totalement déçue de toi OK, maintenant, laissez-moi vous montrer très bons exemples de pages. Donc, lorsque nous essayons d'obtenir des icônes auprès de la communauté, nous avons dupliqué ce fichier comme Basel et vous pouvez voir que nous n'en avons aucune, comme des icônes ici parce que nous sommes sur la page numéro un et que le nom de la page est une miniature Et après cela, on devient complètement pro. Et en version full pro, nous obtenons toutes les icônes. Nous pouvons donc l'utiliser directement dans nos conceptions. Même chose avec le design de licorne, vous pouvez accéder aux pages Le premier concerne les couvertures, le second les icônes, et nous obtenons beaucoup d'icônes, et nous pouvons simplement les copier et les utiliser. Et il y a un autre exemple. Je sais que je prends trop d'exemples. Supportez-moi parce que celui-ci est une bonne chose. OK, disons que quelqu'un est vraiment un nouveau débutant. Il ne sait rien de U x, et il a découvert nouvelle fonctionnalité de cet iPhone, Dynamic Island Et il veut copier ces éléments et les utiliser dans son design. Donc, si nous sommes duveteux, vous pouvez voir que nous ne me laisserons pas partir ici OK. Donc, sur la première page, il verra ceci. Mais il n'est pas dans la section des pages. Vous risquez donc de vous y perdre. Dans ce cas, il peut simplement accéder à cette section de couverture ou à cette section de page, et il peut accéder à tous les éléments tels que celui-ci : le statut Hom Ba Mus, fond d'écran, le plan de travail et les grilles. Celui-ci, ce sont les grilles. La section de la grille est donc très importante. Je vais t'apprendre ça en fanatique. Grâce aux grilles, nous sommes en mesure de concevoir nos applications. En bas âge pour ça. C'est ainsi que fonctionnent les pages. Cela nous aide à organiser nos objets dans nos designs. D'accord, au fur et à mesure que nous progresserons dans ce cours, nous créerons un système de conception simple. Souvent appelé guide de style, ce sera un autre cas d'utilisation des pages. Pour le moment, assurez-vous d'avoir créé des pages pour le flux de tâches mobile ainsi que pour le toucher sur table. Si ce type de tableau vous intéresse, créez-le, créez un design et vous saurez où le soumettre. Et copysto persona et le flux de tâches dans les Très bien, mes étudiants, nous avons tous des pages. Alors restez organisés et je vous retrouverai dans la prochaine vidéo. Bonne conception. 23. Prototypage Figma pour les débutants: Bonne expérience dans cette offre, nous allons assister à la saisie automatique multivers Attachez votre ceinture, car nous allons créer une interaction qui nous permettra de naviguer facilement dans nos cadres Permettez-moi donc de vous montrer quelques verso multiples ici. Comme vous pouvez le constater, il s'agit de la version finale de notre application. Si je zoome. Nous avons donc des boutons, des images, et tout ça. Il s'agit donc de la version finale. Alors laissez-moi vous montrer un multivers. Donc, si actuellement nous sommes dans la section design, si je passe au protype comme vous pouvez le voir, c'est un peu chaotique et le multivers est autour Cela ne s'appelle pas un multivers. Je l'appelle multivers parce que ça a l'air drôle. OK, ce sont donc des lignes que nous venons d' ajouter pour interagir avec notre application. Permettez-moi donc de passer à notre application principale qui sera le wireframe de notre application Click Cart Donc, actuellement, nous sommes dans la section design, si nous passons à un prototype, et qu'actuellement rien n'est sélectionné, nous sommes donc dans un espace vide. Ainsi, lorsque nous sommes dans un espace vide, nous sommes en mesure de choisir certains appareils actuellement, nous choisissons l'iPhone 15 Pmax, nous pouvons le changer Nous pouvons choisir n'importe quel appareil. Nous pouvons choisir entre, disons, iPad, Appog ou Mac Book Mais je vais garder l'iPhone 15 PMx parce que nous voulons évaluer celui-ci en largeur et en hauteur, ainsi que sur les mêmes pixels Nous pouvons donc également le changer en horizontal ou en vertical comme ceci et la couleur de notre iPhone est le titane naturel. C'est le cas par défaut. Vous pouvez également choisir une autre couleur , et ce sera p, la présection d'arrière-plan et le flux des courants. Ne vous concentrez donc pas là-dessus pour le moment. Je vais vous montrer comment fonctionne Flow dans la prochaine vidéo. Donc, si je clique sur une page, comme je suis actuellement sur Interage, si je la sélectionne, vous pouvez voir qu'un point apparaît Il apparaît ici, ici , ici, ainsi qu'ici. Ce point nous permet de relier nos pages. Je peux donc connecter cette page comme ceci. Vous pouvez voir une petite flèche, et il y a également une certaine interaction. Par exemple, si je tape ceci, comme si je le tape dans l'espace, cela ira sur cette page, et ce sera instantané. Voici donc quelques paramètres. Pour le moment, nous allons sauter cette partie parce que dans la prochaine, nous allons voir ces choses. Alors maintenant, cliquons sur la page d' accueil, même chose. Menu, il va passer à la catégorie et à la catégorie deux, mon compte et le dernier, ce sont mes commandes, nous rejoignons nos six pages, et pour nous pré-inscrire, nous pouvons simplement cliquer sur ce bouton de jeu ici. Nous avons donc deux options, comme présenter et prévisualiser. Si vous cliquez sur l'aperçu, vous pouvez voir ce menu apparaître ou ce petit popo apparaître Et si je clique au hasard n'importe où sur l'écran, cela change car dans la direction, il n' y a rien pour le moment. Nous ajoutons donc simplement un flop. Donc, si je clique à nouveau sur l'espace vide, ce sera comme ça. Il se déplace simplement dans notre application. OK, donc nous pouvons également en décider à partir d'ici. Il s'agit donc de la section précédente. Et laissez-moi vous montrer une magie. Donc, si je choisis la page d'accueil et si je change la couleur de cette bannière et que je me laisse passer au design, nous devons passer au design en fonction des modifications. Et laissez-moi le changer en, disons, si je le rends rouge. Ainsi, comme vous pouvez le voir, en même temps, dans la section précédente, cela change de couleur. Laisse-moi faire ça. C'est donc l'avantage de Nous obtenons également la même chose lors de la présentation. Permettez-moi donc de passer à la présente section. Cela prendra du temps. Cela dépend totalement de votre design. Donc, actuellement, nous sommes en première page, pas sur la première page, mais sur la page d'accueil. Laissez-moi le réinitialiser. Donc, pour la réinitialisation, c'est R. Cela apparaît ici. Si je clique sur l'espace vide, nous passons ensuite à la page d'accueil après cette catégorie. Ceci sur cette catégorie, le compte M et les commandes. C'est ainsi que fonctionne le prototype. Si vous cliquez sur cet espace vide, nous avons la possibilité de réinitialiser cette application, et nous pouvons également naviguer à partir d'ici, comme à la page deuxième, troisième, 4506, comme Nous pouvons également le changer d'avant en arrière à partir de ce bouton. Nous pouvons également ajouter des commentaires. Et à partir de cette section, si nous avons plusieurs flux, nous pouvons également choisir cela. Actuellement, nous n'avons qu'un seul flux, il affiche donc un flux. Supposons que vous présentez cette application à votre client et que vous souhaitiez partager cette expérience en direct avec vos clients. Dans ce cas, vous pouvez choisir cette option et vous pouvez me mettre en lumière, en cliquant sur la ligne spot Il suivra vos instructions. Après cela, nous avons partagé le prototype. Vous pouvez partager ou prototyper avec votre client ainsi qu'avec vos amis. Vous pouvez apporter des modifications, vous pouvez ajouter des adresses e-mail ici, et ils apprendront comment fonctionne votre application et comment elle interagit Option, nous obtenons certaines tailles, comme actuellement c'est 100%. OK, actuellement, il est adapté à l'écran. Nous pouvons choisir un écran 100 % ajusté. Nous pouvons également désactiver certains paramètres ici, et c'est pour les récitations. OK, voici donc l'interface de la section pro present. Et c'est ainsi que fonctionne le prototype dans Figma. De cette façon, nous apprenons à placer l'appareil dans le pot ainsi que dans le corps horizontal. Nous pouvons également changer la couleur de la présente section. Nous n'avons pas découvert le flux. Ensuite, nous allons en apprendre davantage sur le flux. Alors, prépare-toi à ça. Et nous allons découvrir ce que nous avons appris d'autre ? D'accord, nous allons en apprendre davantage sur cette section. C'est donc la base du prototype, mais par rapport à cela, cela semble vraiment facile. Le prototypage est très simple. Je sais que cela semble un peu chaotique, mais le prototypage est l'une des choses les plus simples que nous puissions faire dans UI UX En tant qu'exercice rapide, il s'agit pas d'un projet, mais d'un exercice rapide. Je vous suggère de rompre le prototype de connexion et configurer une interaction spécifique pour le bouton. Supposons que vous conceviez cette page et que vous souhaitiez ce bouton fasse quelque chose comme ce bouton indique une catégorie. Vous pouvez donc rejoindre cette catégorie et simplement jouer avec. Il ne s'agit donc que d'un exercice, pas d'un projet. Tu peux le faire pour un doctorat. Supposons que vous maîtrisiez quelque chose et que vous vous inscriviez à un autre endroit comme celui-ci et que vous ne sachiez pas comment le supprimer Vous pouvez simplement accéder à ce prototype, et vous pouvez voir que l'onglet d'interaction est mon compte. Il suffit de cliquer sur ce signe négatif, mais il sera supprimé sur son pH. Ou vous pouvez également appuyer sur le bouton de suppression. Il sera également supprimé. C'est donc la conclusion des bases du prototypage dans Figma Dans la vidéo suivante, nous allons donc aller plus loin et ajouter une animation à l'aide de la transition. Alors rejoignez-moi dans la prochaine vidéo pour plus de prototypage pour. 24. Prototypage de Figma et transitions (facilité): Nous revenons à y x designer. Dans ce document, nous allons apprendre à prototyper notre structure métallique. Dans le passé, nous avons appris comment prototyper nos objets, mais ce n'était pas un détail. Nous rejoignons simplement nos pages comme ça. Si vous ne le supprimez pas en tant que prototype, vous pouvez le supprimer. OK, donc dans ce domaine, nous allons faire ces choses à partir de zéro. Si vous ne savez pas comment le supprimer, sélectionnez simplement ce fil prototype et appuyez sur Supprimer sur votre clavier C'est ainsi que vous supprimez le prototype de fil. J'appelle ça du fil. OK, donc actuellement, nous en sommes au prototype. Si vous êtes dans le panneau de conception, allez simplement sur Ptype et je veux d'abord prototyper celui-ci Donc d'accord, donc ça doit être comme sur un type. OK, permettez-moi de supprimer ceci d'abord parce que pour certains étudiants, cela peut prêter à confusion. OK. Alors laisse-moi t'orienter vers ça. Ici. OK. Nous avons donc maintenant un peu d'espace. Alors permettez-moi de cliquer sur la page intermédiaire, et laissez-moi me joindre à cela. Donc, dans cette section sur la page intermédiaire, nous n'avons aucun bouton ou élément cliquable Donc, pour cela, nous pouvons simplement appuyer sur n'importe quel espace vide. Il naviguera vers la page d'accueil. Comme vous pouvez le voir, il navigue vers la page d'accueil et l'animation se déplace Mais vous pouvez définir n'importe quelle animation. Vous pouvez définir l'instance Dissolve Mt animation, déplacer vers l'extérieur, glisser et glisser vers l'extérieur. Pour l'instant, je vais choisir Dissol car Dissol est comme une animation de base Et pour les images filaires, nous devrions choisir une animation normale, pas si sophistiquée. Tout en travaillant sur une vraie application sur cette vraie application, nous choisirons différents types d'animation. Gardez cela à l'esprit. Nous avons donc choisi Dissolve. Ensuite, nous entrons et sortons à l'arrière. Nous avons de nombreux types d'animation, nous pouvons donc choisir n'importe lequel d'entre eux, et nous avons également un aperçu quoi cela ressemblera après avoir cliqué sur cet espace vide. Et après cela, nous pouvons également définir le temps d'animation actuellement bloqué par Difult On peut dire que mille mille c'est 1 seconde. Cela dépend donc totalement de votre design. OK, donc je ne veux rien de fascinant ici. Passons maintenant à la page d'accueil. Et voici le menu des hamburgers. Joignons donc ce menu de hamburgers à cette page de menu de hamburgers. Je veux donc parcourir ces deux menus de hamburgers. Et souvenez-vous d'une chose. Comme lors du prototypage précédent, nous avons ajouté une animation comme Dissolve Il en sera donc de même pour cela car Mar ne réinitialise pas l'animation. Il conserve l'ancienne animation et les anciens paramètres. Nous devons donc le changer. Par exemple, si tu veux le changer, tu dois le changer. Je veux donc que ce soit pour le menu des hamburgers, et ça devrait être le cas. Supposons que vous emménagez et que l'animation vienne de la gauche, comme ceci, et que nous puissions définir easin et ease out En toute simplicité, cela va vite et lentement comme ça. Si je choisis la facilité, elle passe en premier et je l'ajuste lentement comme celle-ci. Je sais que c'est confus. Vous pouvez simplement régler l'heure en millisecondes et vous pouvez voir ces choses, comme un ralenti, pour comprendre OK, donc pour cet emménagement et ce sera l'animation. OK, alors fermons ça. Après ça, OK, j'ai réussi. Si je clique dessus, cela devrait aller sur la page d'accueil car depuis la page d' accueil, nous y sommes allés. OK, jusqu'à présent, mon animation sera déplacée vers la droite comme ça. OK, je vais garder le temps 300 parce que 300 perdent leur note. Si je choisis 1 000 ou 2 000, ce sera très lent. OK, nous devons donc prototyper beaucoup de choses, comme nous devons prototyper ces deux catégories, après les commandes, après mon compte, et après ce profil. Bien, rejoignons ces deux catégories. Ensuite, nous avons mes ordres. OK. Je n'ai rien réglé. OK, laissez-moi d'abord régler celui-ci. Je garderai le réglage tel quel . Je le maintiendrai dissous. Je ne veux pas d' animation sophistiquée pour le wireframe. Nous examinerons toutes les animations et les interactions avec le micro dans prochaines vidéos, car le wireframe ne nécessite aucun élément sophistiqué. OK, donc je vais juste me joindre à tout le reste, et je vais accélérer la vidéo. OK, donc j'ai oublié une page, je suppose. Il devrait y avoir une section de page de notification, mais je pense que j'ai oublié qu'elle était vide telle quelle. Je vais le garder tel quel. Je ne vais pas associer cela à quoi que ce soit. Il y a donc un tour de magie. Tu ne veux pas faire tout ça encore et encore. Comme pour la section des catégories, nous devons tout rejoindre encore et encore. Donc dans ce cas, ce que nous pouvons faire, c'est comme si nous devions supprimer le premier. Je sais que tu as bien entendu. Tu dois supprimer celui-ci. Celui-ci aussi, et celui-ci en a 12, et nous pouvons simplement copier ce cadre et cliquer sur la catégorie. Vous devez cliquer sur ce nom en haut et simplement le coller. Et ce sera ici au même endroit et le prototype sera le même pour le compte et pareil pour mes commandes Il suffit donc de changer la couleur de ces icônes. Pour ceux qui devraient être blancs parce que nous sommes dans cette catégorie, alors choisissons celui-ci pour une couleur industrielle après celui-ci OK, je suis passé en mode évaluation des objets. C'est. Et voici mon compte. Mon compte sera donc industriel. Vous pouvez choisir la couleur de votre choix. C'est ma couleur préférée, alors je choisis celle-ci. OK. Je suis de nouveau allée m'opposer à White. Mes ordres, ça va être celui-ci. OK, donc voici à quoi ça va ressembler. Donc, si je passe au prototype, il ressemblera à ceci. Si je clique dessus, vous pouvez voir que tout est joint. Nous n'avons pas à faire ces choses encore et encore. Nous devons regrouper tout ce qui concerne les achats à domicile par catégorie, mes commandes encore et encore. Je vais avancer rapidement sur ce point. Encore une fois, Bergame, j'ai ajouté quelques éléments comme la liste des allées, le portefeuille, l' offre, la boutique, le coupon et le cadeau Click Car Je n'ai donc conçu aucune page pour eux. Donc, si vous le souhaitez, vous pouvez les concevoir, mais je me suis dit que si je les concevais, le projet deviendrait très gros et qu'il serait presque bouleversant. Je vais donc continuer et ajoutons ces éléments pour améliorer l'apparence de notre design. OK, nous pouvons donc rejoindre à nouveau le menu Berg. OK, nous avons presque terminé. Permettez-moi de vérifier et de noter l'aperçu de notre application. Permettez-moi de le présenter à nouveau. OK, donc en ce moment, le clic est coupé et sur la première page, nous n'avons défini que l'animation des onglets. si je tape sur un espace vide, il accède à la page d'accueil. OK. Permettez-moi donc de taper sur cet espace vide. OK, ça marche. L' animation est dissoute. Maintenant, si je clique sur l'espace vide comme celui-ci, cela me montrera quelles choses sont cliquables Dans ce cas, les catégories cliquables ou cliquables ainsi que mon compte et la section hamburgers Passons donc à la catégorie. L'animation est donc dissoute. J'ai déjà configuré l' animation pour qu'elle soit dissoute. Et si je choisis Bergman, Bergman, je n'ai pas créé le Alors laisse-moi rentrer chez moi. OK, Home n'est pas un État. C'est ainsi que fonctionne le prototype. Et lorsque nous parcourons notre application, nous savons quels objets sont connectés ou non Donc mon plus vieux et ensuite , encore une fois, mon compte. Et l'animation familiale n' est pas un statut. Alors laissez-moi offrir à nouveau la maison à tout le monde. OK. À chaque fois que je rentre chez moi. OK, alors laisse-moi réessayer. Donc, si j'appuie sur Accueil, d'accord, ça marche maintenant. Et vous avez pressé le menu des hamburgers. Ainsi, dans Burgermenu, nous obtenons des éléments cliquables, comme home show par catégorie dans mes commandes Voici donc à quoi ressemble le prototypage multivers. OK, c'est ainsi que vous pouvez joindre vos icônes aux pages UR, comme l'icône d'accueil à la page d'accueil. Désolée, je ne suis pas à la maison. L'icône de catégorie vers la page de catégorie, toccone pour accéder à la page, micro de mon compte et d'autres micro-interactions. Ce n'est qu'un élément de base. Je sais que cela semble vraiment bouleversant et vraiment futuriste, mais ce n'est qu'un élément de base , il suffit de joindre les icônes avec des pages, une petite micro-interaction C'est le truc avec le prototypage. Je sais qu'il y a beaucoup de choses que nous devons aborder, comme la micro-interaction, l' animation, la personnalisation des touches, etc. Nous verrons donc ces choses dans les futures offres. Donc je vois Porto bi et je vous verrai dans le prochain. 25. Prototype de test de Figma avec Figma Mirror: Étudiants, dans cette pièce, nous allons regarder ce qu' on appelle le miroir Figma Il s'agit d'une application Figma. Vous pouvez, par exemple, tester votre application sur votre téléphone. Passons au Playstore ou à l'App Store si vous utilisez Apple. J'utilise donc Presto, donc je vais aller sur Presto, et il y a une application appelée Vous pouvez rechercher un Figma et après l'avoir installé, il suffit de l'ouvrir Et après ouverture, connectez-vous avec le même compte, qui est connecté à votre PC Ainsi, après la connexion, les interfaces ressemblent à ceci. Et actuellement, nous avons de nombreux projets dans mon application. Vous pouvez donc voir qu'il existe des options. Comme le premier, il y a un bouton de lecture en haut à gauche. Cela signifie donc qu'il s' agit du prototype. Nous pouvons donc simplement cliquer dessus. Donc, actuellement, nous utilisons la première version de Clickard. Voici donc le prototype. Alors, cliquons dessus. Nous passons au même prototype sur le MScreen, vous pouvez voir en même temps que l' application Fliardp Click Card est ouverte sur notre PC ainsi que sur D'accord, mais le problème avec mon smartphone c'est que mon téléphone a un écran de 6,2 pouces et que l'iPhone 15 P max a un écran de 6,69 pouces Donc, si je vais à la page d'accueil. D'accord, vous pouvez donc voir sur mon écran sur l'écran du mobile que les icônes de la barre de navigation sont masquées. Je dois donc faire défiler un peu la page pour obtenir cette icône. Mais à Bergame, cela fonctionne. si j'y touche, vous pouvez voir l'animation ici, je peux accéder à la page d'accueil, à la catégorie. Mais si je veux accéder à la barre de navigation, je dois suivre les bits données, les réduire puis passer aux commandes par catégorie ainsi qu'à mes comptes. Voici donc comment fonctionne le miroir Figma. C'est vraiment facile. Supposons que vous souhaitiez partager cette application avec votre ami ou votre client et que celui-ci ne connaisse aucune application fo. Dans ce cas, vous pouvez accéder au prototype dans votre application, et vous pouvez voir l'option appelée partager le prototype. Dans cette option, nous avons quelques options. Vous pouvez leur ajouter un e-mail, les ajouter par e-mail dans cette section, ou vous pouvez simplement copier ce lien et le partager où vous le souhaitez. Comme sur quelle application sur Telegram, ainsi que sur Instagram, vous pouvez leur envoyer un message, et ils peuvent simplement l'ouvrir sur le téléphone. Mais quand je l'essaie, comme sur mon smartphone, je ne sais pas, pour une raison ou une autre, il n'arrêtait pas de se charger. Comme je ne pouvais pas l'utiliser il y a quelques jours, j'ai ouvert la même ligne, mais elle fonctionnait, mais je ne sais pas ce qui se passe actuellement. Cela ne fonctionne pas pour le moment. Vous pouvez le voir à l'écran, il se charge pour toujours. Donc dans ce cas, je ne sais pas, il se peut qu'il y ait un hamburger et que le système soit en maintenance. Il y a autre chose. Disons que je me lance dans le design. Je te l'ai déjà montré, mais laisse-moi te le montrer encore une fois. OK, disons que nous sommes sur la page d'accueil. Sur le mobile également sur la page d'accueil. Et si je change la couleur de cette bannière. Imaginons que j'en fasse un tarif bleu. Vous pouvez le voir changer sur mon application mobile ainsi que sur l'application Fimeter C'est en temps réel, et c'est vraiment agréable de voir l' interface comme ça. D'accord. Parce que notre client obtiendra des informations. Supposons que vous soyez au téléphone et que vos clients disent : «   OK, je n'aime pas cette couleur, s'il vous plaît, vous pouvez la changer en quelque chose d'autre, par exemple la rendre rouge ». Donc, dans ce cas, vous pouvez simplement faire glisser un curseur et votre client le sera. Cela a l'air génial OK, donc nous devrions garder ce rouge. OK, c'est donc l'avantage de l'application Puma Mirror. Un autre avantage est que lorsque vous êtes mobile, vous pouvez voir la taille réelle de l'icône, disons que la taille actuelle de l'icône est plutôt bonne, je dirais, ou je peux réduire ce rectangle. Cela dépend donc totalement du téléphone. Actuellement, j'utilise un très vieux téléphone. Donc ça devient assez mou. Mais si vous le souhaitez, vous pouvez essayer sur votre Disons que si vous avez un iPhone, vous pouvez l'essayer sur iPhone. Et vous pouvez observer les icônes. Disons que sur votre téléphone, les icônes semblent trop grandes. Dans ce cas, vous pouvez les rendre petits ou grands, comme ça. Mais en ce moment, j' aime bien cette appli. La fabrication de hamburgers est excellente et toutes les options de la catégorie, ainsi que le menu des hamburgers Donc, tout va bien. La seule icône de la barre de navigation est un peu détaillée. Nous pouvons donc changer cela. C'est donc l'avantage d'utiliser le miroir, nous permet d'avoir une vision réelle de l'application que nous concevons. Donc, camarades de classe, voici les photos et la vidéo, et je vous verrai des kits dans la prochaine. 26. Projet de cours 3 : magie du design mobile : présenter votre application dans Figma: Bienvenue à mes étudiants, nouvelles passionnantes. Aujourd'hui, c'est le jour du projet, et je suppose que notre numéro de projet est trois. OK. Passons donc au projet Tap. J'espère que vous ouvrirez ce fichier sur votre PC. OK. Donc, vous devez d'abord télécharger l'application Figma depuis le Playstore ainsi que depuis l'App Store Si vous avez un iPhone, disons que dans tous les cas, l'application n'est pas disponible dans votre pays Vous pouvez aller sur ce site Web appelé figma, et vous pouvez vous connecter, et cela fonctionnera de la même manière Après avoir testé votre design, vérifiez qu'il est fidèle à votre téléphone. Supposons que si l'icône est trop grande, apportez les modifications, changez également la couleur, ainsi que la taille du téléphone, apportez ces modifications et vérifiez à nouveau votre application sur votre téléphone. Après cela, capturez ce cadre métallique comme ceci. Après avoir capturé un cadre filaire comme celui-ci, soumettez-le à la section du projet. Supposons que vous soyez un peu technophile comme moi, que vous puissiez enregistrer cette vidéo sur votre téléphone et la convertir en fichiers cadeaux Après l'avoir converti, vous pouvez soumettre dans la section du projet. Voici le lien vers ce site Web. Vous pouvez accéder à Auto Express et envoyer votre fichier ici, et cela prendra un certain temps. Et après avoir créé ce fichier, je ne sais pas comment il s'appelle. C'est ce qu'on appelle un gif si c'est ce qu'on appelle un cadeau. Vous pouvez donc soumettre ce fichier. Et disons que vous ne savez pas comment enregistrer un écran. Dans ce cas, vous pouvez simplement capturer une capture d'écran comme celle-ci et me soumettre ce fichier. C'est donc le projet numéro trois. Ensuite, nous verrons quelque chose de vraiment cool appelé animation. Nous allons voir les bases de l'animation. Et j'espère que cela vous enthousiasme , car c'est une partie vraiment intéressante. Alors restez dans cette voie et réalisez le projet, et je vous souhaite bonne chance. Alors au revoir pour le moment. 27. Animation intelligente Figma pour les débutants: Bon retour aux étudiants. Dans cette vidéo, nous plongeons dans le monde fascinant de l'animation de Figma Jusqu'à présent, nous venons d' apprendre qu'il y a une transition de page, mais une ville pour quelque chose de nouveau. Il s'agit de la transition d'éléments. J'ai donc fait une petite animation pour vous. Donc, si je clique sur l' icône Auto, la magie opère. Alors, s'il vous plaît, gardez l'œil ouvert. Voilà donc la petite animation que nous avons réalisée. Apprenons donc à créer cette animation. OK, nous avons donc ma page de commande et je voudrais animer quelque chose sur cette page Permettez-moi donc d'abord d'ajouter cette icône de panier sur cette page. Pour cela, je vais passer aux plugins et l'icône h. Vous pouvez choisir l' icône de votre choix. Cherchons donc le panier. OK, donc je vais choisir celui-ci. Il contient un symbole vraiment égal à l'intérieur, et n'oubliez pas qu'il contient un PNG. C'est pourquoi cela peut sembler flou. Comme vous pouvez le constater, les bords sont flous. OK, alors permettez-moi de créer des doublons de ces pages. OK, donc je suppose que nous détestons trois pages, la page une, la page deux et la page trois. OK, alors laissez-moi d' abord renommer la page car elle risque d'être confuse Permettez-moi de le renommer, disons que ma commande en est une, ou que nous pouvons la nommer comme « A one Je le saurai ou n'importe quelle autre personne le saura. Voici l'animation. Un. Permettez-moi de copier-coller ici. Ce sera la page deux. Tu peux le nommer comme tu veux. Animation 3, et ce sera l'Animation 4. Bien, passons maintenant au prototype. Mais avant cela, permettez-moi de dater ceci pour le premier. Ou nous pouvons faire une chose comme, disons, me laisser entrer, et j' essaie quelque chose de nouveau. Alors laisse-moi mettre tout ça derrière moi. Mais permettez-moi d'augmenter la taille. Je tiens la montre et les tailles sont 1205, 1205. Laissez-moi également en faire 1205. Je ne sais pas pourquoi la couleur a changé. Ce sera également 1205. Il devrait avoir 1205 ans, et pareil pour celui-ci Bon, maintenant je peux travailler sur mon animation. Alors laissez-moi envoyer ceci à l'envers et passons au protype. OK. Donc, actuellement, nous sommes sur Animation Miles Animation One. Permettez-moi donc de rejoindre cette page. Sur l'onglet, cela fera quelque chose, mais nous ne voulons pas que cela soit sur l'onglet. Je voudrais After Delay, et ce devrait être de l'animation. Nous devons choisir une animation intelligente. Je sais que dans Figma, c'est un peu confus parce que j'utilise de nombreux logiciels, tous des logiciels de base pour films, FM, dans lesquels nous avons l' option de cadrage Ainsi, avec le cadrage des touches, nous pouvons faire de l'animation. Mais dans Figma, nous avons une animation intelligente. Et il suffit de choisir l' animation comme l'animation intelligente. Il n'est pas nécessaire d'ajouter des images-clés. Elle décide de son propre chef. C'est bien, mais si quelqu'un est plus grand, il ne s'y connaît pas en animation. Animation intelligente, ce sera un peu déroutant pour eux. Donc, actuellement, pour accéder à l'animation 2, animation intelligente et la facilité d'utilisation, il faut 300 millisecondes Mais d'accord, laissez-moi garder 100 millisecondes, mais je veux que cette page ou ce truc soit Et cette icône de panier devrait être ici. Ça va être mon truc. Laisse-moi aller voir l'animation. Cela fonctionne. Laisse-moi le refaire. OK, donc c'est comme ça, mais laissez-moi corriger l'icône. Je suppose que c'est un petit peu. Je dois le mettre au centre. Maintenant, ça va marcher. Cela fonctionne. Il se peut que nous fassions quelques animations ici. Maintenant, permettez-moi de réduire les choses. Maintenant, laissez-moi passer à autre chose, afin que nous puissions simplement orienter les choses vers ceci. Mais dans moins de panneaux, vous pouvez voir nos images hors cadre. Nous devons donc apporter ce cadre intérieur. Et si je passe au design, il peut parfois s' agir du contenu d'un clip Vous pouvez donc par défaut utiliser contenu du clip, afin que vous puissiez décocher ce lien OK. Permettez-moi de passer à nouveau au prototype et laissez-moi me joindre à cela. OK. Accédez donc à cette page Animation Three et Smart Animate. Et permettez-moi de revenir sur cette section. Mes commandes. C'est censé aller de ce côté du bon côté, donc j'ai fait des erreurs. Laissez-moi vérifier quelle erreur j'ai commise ici. OK, donc c'est sur onglet. Je ne veux pas de tablette. Ce devrait être après un certain délai. Cela fonctionnera donc maintenant. Permettez-moi de revenir à cette section. Mes commandes devraient être en panne. OK, j'ai compris. J'ai mis la milliseconde, celle-ci une milliseconde. Alors laissez-moi en dire 300. Laissez-moi vérifier à nouveau. J'espère que cela fonctionnera à nouveau. OK, ça marche parfaitement bien. Mais maintenant, nous voulons que ce soit ici. Nous allons donc le garder tel quel, et nous allons le faire celui-ci. Et permettez-moi de me joindre à nouveau à cela. Et cela devrait être le cas après un certain délai. Et animation de 300 millisecondes. Alors laisse-moi réessayer. OK, notre animation est terminée. OK, donc ça va descendre, allez sur le côté droit. OK, c'est notre animation. C'est ainsi que vous pouvez faire de l'animation dans Figma. Je sais que c'est un peu confus et difficile à comprendre, mais nous allons faire beaucoup d' animation dans les prochaines vidéos. Donc un stade pour ça. Si vous le souhaitez, vous pouvez revoir cette vidéo encore et encore. Vous découvrirez alors ce qu'est l'animation intelligente et comment elle fonctionne dans Figma Et souvenez-vous du contenu du clip. Si vous faites ressortir un élément en dehors du cadre, il se trouvera en dehors du cadre. OK, donc l'élément 3 de l'animation se trouve à l'extérieur du cadre, mais nous l'avons fait glisser vers l'intérieur C'est donc la troisième partie de l'animation. Donc je veux juste dire une chose. En résumé, l'animation dans Figma repose sur quelques principes clés, s'assurer que les éléments portent le même nom, comprendre l'animation intelligente et gérer les délais pour créer un capacité d'animation de Figma peut sembler un peu complexe, mais le prix à payer pour la verticité qu'elle offre est modique Alors, place à une aventure encore plus excitante avec la FEMA dans la vidéo suivante 28. Projet de cours 4 : donner vie à votre design : créer des animations intelligentes dans Figma: Bienvenue aux étudiants, préparez-vous à un défi passionnant avec le projet de classe numéro trois, ou quatre, je suppose que c'est quatre. Ce sera donc notre première animation. Pour ce projet, vous devez créer cette animation vraiment cool, que j'ai créée ici. OK, voici donc les instructions. Accédez à mes commandes, créez quelques pages et animez-les. Après cela, vous pouvez utiliser une méthode différente, comme j'utilise une carte, mais vous pouvez utiliser une autre icône, comme forme, un rectangle carré ou une flèche. Le total dépend de, vous pouvez utiliser le PNG ainsi que des icônes et des formes. Après cela, faites une capture d'écran et soumettez-la moi. Si vous êtes un texte, je m' apprécierai ou si vous voulez me lancer un défi afin que vous puissiez enregistrer ce fichier, enregistrer votre animation et le convertir en fichier donné. Vous savez déjà que nous pouvons convertir notre Bfour en fichier Give dans Ado Express Utilisez donc le lien, vous pouvez cliquer dessus, il sera redirigé vers Auto Express, puis soumettez-le dans la section du projet. Ce sera donc notre projet numéro quatre. Suivez donc toutes les instructions et soumettez-moi cette animation. C'est donc une vidéo, et je vous verrai dans la section suivante. 29. Partage et retours en temps réel avec Figma: Je vous souhaite la bienvenue, designer. Aujourd'hui, nous améliorons notre compétence Figma sur Arch. Vous avez donc maîtrisé l'art de partager des fichiers avec vos clients, et tout s'est bien passé. Mais maintenant, parlons du travail d'équipe. Collaboration avec votre design d'expérience utilisateur appelée AW. Imaginez que vous n'êtes pas seul sur un projet. Il existe de nombreux cernes créatifs dans une pièce de théâtre. Pour que cela soit fluide, nous nous intéressons au domaine des équipes et des projets d'équipe. Maintenant, vous vous êtes bien débrouillé avec les brouillons. Une édition limitée dessine le rêve d'un designer. Mais voici le test de l'intrigue. Si vous faites équipe avec des collègues, il est temps de changer Imaginons donc que vous travailliez sur un projet critique, mais que votre équipe soit éparpillée sur différentes plateformes, plus en plus de commentaires et essaie désespérément de rester sur la même longueur d'onde. C'est donc suffisant pour donner créateurs les plus aguerris envie aux créateurs les plus aguerris de s'arracher les cheveux. Et s'il existait un moyen de collaborer de manière fluide, partager des fichiers sans effort et de tenir tout le monde informé ? Nous vous présentons donc les équipes Figma. Vous êtes un guichet unique pour le design collaboratif au Nirvana Donc, actuellement, je suis à la maison et je travaille sur les brouillons Nous avons donc cette option appelée trims C'est peut-être comme cette interface, mais elle peut avoir un seul projet. Créons donc une nouvelle équipe. Découvrons quelques avantages de la Figma P. Avec la version gratuite, nous utilisons actuellement la version gratuite, nous obtenons un projet, trois fichiers de conception et trois fichiers fijum et trois pages Avec la version propional, nous obtenons également les nouvelles fonctionnalités et d'autres fonctionnalités Actuellement, nous voulons utiliser la version gratuite. Créons une équipe et laissez-moi vous donner le titre de missionnaire OK. Créons une équipe. OK, maintenant, ajoutons mL ID. Imaginons que vous souhaitiez ajouter des personnes. Je veux donc ajouter une personne. Ce sera moi avec mon autre identifiant. D'accord, vous pouvez y ajouter plusieurs personnes. Il n'y a pas de limite, vous pouvez ajouter un nombre illimité de personnes. Il affiche à nouveau la première version, mais je veux m'en tenir à ma start-up Je vais donc choisir le Starter Pack et nous avons une version gratuite de Team. OK, il n'y a donc rien pour le moment. Supposons donc que nous travaillions avec des brouillons et que nous souhaitions ajouter des membres de l'équipe à notre conception Supposons que nous travaillions sur ce projet et que nous voulions ajouter des membres de l'équipe à notre conception, afin que je puisse simplement suivre ce fichier et ajouter à notre équipe, c' est-à-dire une équipe imaginaire. Maintenant, c'est dans les équipes. Maintenant, ouvrons-le. OK, donc, actuellement, cette personne n'est pas disponible ici car elle n' a pas accepté notre demande. Permettez-moi donc de me connecter avec ce compte et d'accepter la demande. OK, donc je me suis connecté avec ce compte et j'ai obtenu ce design. Maintenant, je peux simplement faire glisser n'importe quel élément ou je peux ajouter n'importe quel élément, et je peux faire ce que je veux. Je peux ajouter un punch shop, par exemple, des éléments comme celui-ci, je peux ajouter des couleurs. D'accord. J'y vais en premier. OK, donc si je vais à nouveau sur mon compte principal, comme vous pouvez le voir, il est également disponible ici, laissez-moi faire comme ça. OK, donc je suis également en mesure de voir cette personne, notamment ce qu'il fait dans notre design et le type de modifications qu'il apporte. Et nous pouvons également attribuer, en temps réel, comme « OK, je ne veux pas cette couleur, la changer en quelque chose d'autre, donc nous pouvons la changer comme ça ». C'est donc l'avantage des équipes collaboratives et de l'utilisation d'équipes. Donc pour l'instant, je vais arrêter car j'espère que vous comprenez le point, comme le fonctionnement des équipes, mais laissez-moi vous parler d'autres caractéristiques des équipes. OK, donc victimes, nous partageons notre lieu de travail comme celui-ci. Et en cela, nous pouvons ajouter plusieurs fichiers. Mais nous utilisons une version gratuite, nous ne pouvons donc créer que trois fichiers. Comme vous pouvez le constater, nous en utilisons actuellement un. Il nous en reste deux, ainsi que trois fichiers Fix JM. Dans Share Workplace, nous sommes en mesure de partager des fichiers, prototypes et de corriger les blocages en même temps. Nous pouvons également ajouter des commentaires dans certains de nos designs Cette personne peut simplement accéder à ce rectangle et ajouter un commentaire et nous pouvons obtenir une réponse en un instant en temps réel. Nous obtenons également le contrôle de version. Ensuite, cette personne peut obtenir un accès basé sur les rôles, comme nous voulons protéger nos informations. Dans ce cas, nous pouvons attribuer le rôle. Avec des équipes, nous sommes en mesure de gérer des projets. Nous pouvons ainsi organiser notre modèle de projet, notre liste de tâches et nos dates d'échéance, et nous sommes également en mesure de centraliser notre système de conception Et après la fin du projet, nous pouvons analyser notre projet, comme si nous pouvions obtenir des informations précieuses à partir des activités de notre équipe et identifier les domaines à améliorer. Mais je vais vous suggérer une chose, disons que nous travaillons en solo. Dans ce cas, n'utilisez pas les équipes, optez pour les brouillons, car les brouillons sont plus faciles, et avec les brouillons, nous pouvons ajouter Mais en équipe, si vous pouvez le constater, nous ne pouvons ajouter que trois pages. Mais dans les brouillons, nous pouvons ajouter plusieurs pages, et il n'y a aucune limite L'équilibre entre free et pad plaus dépend donc des besoins spécifiques et de l'ampleur de votre travail de conception Voilà comment créer une équipe, ajouter plusieurs collaborateurs à notre équipe et les fonctionnalités de l'équipe. J'espère que vous comprenez tout cela. Je vais le répéter, une chose. Si vous travaillez si peu, vous n'avez pas besoin d'équipes. Mais si vous travaillez avec deux ou trois membres, cette fois-ci, vous pouvez rejoindre équipes et devenir vierge professionnelle. Donc c'est pour les gars, et je vous verrai dans le prochain. 30. Figma Collaborer en temps réel avec le multijoueur: Bienvenue à mes étudiants. Dans ce projet de loi, nous allons explorer le processus de partage de nos designs avec nos clients. Supposons qu'il s'agisse de mon client imaginaire et que j'ai partagé mon projet avec lui. Ainsi, chaque fois qu'il passe à un design, je suis en mesure de voir quel genre de choses il fait sur notre design. Disons qu'il traverse ce cirque ou cette bannière ou disons qu' Pergame, nous pouvons voir toutes ces choses Voyons donc comment nous pouvons partager notre design avec notre client. OK, c'est donc notre design. C'est notre structure filaire, et nous avons également ajouté quelques animations ici. Alors allons-y et partageons avec notre client. Supposons que le nom de mon client soit Chetan. C'est aussi mon nom parce que je me suis connecté depuis un autre compte C'est donc mon nom ici, et c'est mon vrai compte, que j'ai utilisé pour utiliser Figma OK, donc je veux partager ça avec Chen. Je peux ajouter cette personne ou je peux simplement copier ce lien et le partager via, disons, What's App, Gmail, tout autre réseau social, que vous aimez. Pour l'instant, allons-y avec un simple navigateur et laissez-moi simplement copier ce lien. Ainsi, toute personne disposant du lien peut voir notre design. Et cette personne obtient un compte anonyme comme celui-ci, et c'est notre vrai compte. Mais avec le lien, cette personne ne peut voir que le dessin. Il n'est pas capable de faire grand-chose. Comme s'il ne pouvait pas modifier ou commenter notre design. Mais il ne peut pas présenter notre design. exemple, si nous voulons avoir une idée du design similaire, de ce que nous avons fait lors du prototypage, afin qu'il puisse voir ces choses Donc, comme celui-ci, comme nous avons créé cette animation simple, compte de catégorie et tout ça. Maintenant, mettons à jour notre client imaginaire qui me permet de me connecter avec mon kit secondaire. Donc, si cette personne s'est connectée, elle pourra tout voir, comme le brief, ainsi que les différents types de pages que nous avons créées, comme pour tablette, pour mobile, ainsi que le flux de tâches. Cette personne ne peut voir que le dessin. Il ne peut pas modifier. Supposons que cette personne essaie de le faire glisser. Cela n' arrivera pas parce que nous avons seulement donné l'autorisation de le visionner, pas de le voir. Mais ce qu'il peut faire, c'est qu'il peut ajouter un commentaire. Disons qu'il est curieux de découvrir ce genre de cirque. Vous pouvez donc simplement cliquer dessus et ajouter des commentaires comme celui-ci. Quels sont les cadeaux du cirque, et vous pouvez les envoyer au concepteur principal. C'est moi. Donc, si je passe à mon vrai design, comme si c'était moi, c'était mon compte principal, donc je peux le voir dans mes commentaires, j'ai reçu un commentaire, et il apparaît également ici Je peux simplement accéder aux commentaires et voir quel commentaire j'ai reçu de Ceden. Je peux simplement cliquer sur ce commentaire OK, donc je peux juste répondre, il s'agit de quatre catégories. Catégorie et je peux simplement l'envoyer. OK, donc cette personne a reçu notre réponse, et je peux simplement cliquer sur ce bouton de résolution. Et si je passe aux commentaires, vous pouvez voir que nos commentaires sont maintenant résolus. Permettez-moi de vous montrer une chose. Fais comme ça. OK, vous pouvez donc voir ce qu'il fait dans notre design. Disons qu'il passe sa souris dessus comme ça, comme sur ce dessin que nous avons créé Nous sommes donc en mesure de voir où il va , quelles sont les choses qu'il traverse ? Aime-t-il le cadre ou non ? Disons que nous sommes tous les deux sur appel, et disons qu'il veut, genre, je n'aime pas cette couleur. Et laisse-moi partir. OK. Laisse-moi prendre celui-ci. OK, donc s'il dit que je n'aime pas cette couleur, peux-tu la changer ? Je peux donc simplement aller voir ma Figma. Et je peux juste changer de couleur comme ça. Je peux choisir le rouge, le vert, le bleu, comme ça. C'est l'avantage de la collaboration à l'aide d'un Figma. La vraie magie opère grâce aux capacités de conception collaborative de Figma J'ai démontré que c'est moi. J'ai démontré à mon client ce que nous pouvons faire avec une fonctionnalité collaborative avec un utilisateur manipulant un élément que l'autre utilisateur peut voir en temps réel Il s'agit d'une fonctionnalité puissante pour les concepteurs travaillant en collaboration. Cela permet d'organiser le processus de conception et aide les concepteurs à gérer efficacement les commentaires des clients. En résumé, partager le design dans Figma est une expression. Que ce soit par le biais d'un simple lien pour les premiers commentaires ou en activant les commentaires pour une interaction plus détaillée, la fonctionnalité collaborative de la plateforme a été améliorée grâce à la communication entre les concepteurs et le client, rendant ainsi le processus de révision de conception fluide et plus interactif. Il s'agit de partager votre design avec votre client et de passer des commandes. Restez dans la section suivante dans Explore pour voir, je suppose, comment fonctionnent les équipes. C'est un port et je te verrai Kai dans le prochain. 31. Quels sont les tableaux de moodboard et le secret pour trouver l'inspiration pour la conception de sites Web et d'applications: Bon retour designer. Dans le livre d'aujourd'hui, nous allons découvrir ce qu'est moodboard et comment trouver l'inspiration pour vos projets. Imaginez que vous regardez une toile blanche, votre esprit défile avec des idées Mais en l'absence d'une vision cohérente pour votre prochain projet américain, cela pourrait être accablant, n'est-ce pas ? Entrez dans le moodboard. Vous créez une boussole et une feuille de route visuelle pour réussir. moodboards sont bien plus qu' un simple collage. Ce sont de puissants outils. Ils exploitent tout le potentiel de A Design Journey. Plongeons-nous dans les moodboards magiques et découvrons pourquoi ils sont une arme indispensable dans le design UX. Tout d'abord sur cette clarté et cette concentration. Imaginez vendre sans carte. C'est essentiellement ce à quoi ressemble la conception sans moodboards moodboards apportent la clarté et la concentration nécessaires en capturant l' essence du projet O. Vous définissez l'esthétique, vous fixez la palette de couleurs, explorez la police et la texture, et vous établissez un langage visuel constitutif. Cette feuille de route vous guide dans nos décisions de conception, garantissant une expérience utilisateur cohérente et sans entraves Deuxièmement, l'inspiration et la créativité. Les moodboards sont comme un régal visuel pour votre âme. Le mélange éclatant d'images, de couleurs et de textures stimule votre créativité et alimente votre imagination C'est une source d'inspiration constante, ouvrant la voie à de nouvelles possibilités de design et à des approches innovantes Au fur et à mesure que vous expérimentez différents éléments, vos moodboards évoluent, reflétant le paysage en constante évolution de votre vision créative Le troisième est la collaboration et la communication. La communication est essentielle. Et moodboard dépasse les limites entre les concepteurs, les clients et les parties Ils agissent comme un puissant outil de communication, traduisant votre idée abstraite en une représentation visuelle concrète En présentant votre moodboard, vous partagez efficacement votre vision, vous partagez efficacement votre vision, veillant à ce que tout le monde soit sur la même longueur d'onde, aligné sur l'orientation du projet et investie dans sa réussite Le premier est la cohérence et la vision commune. Imaginez un design où chaque élément semble déplacé, comme une discorde éclatante dans moodboards évitent cette disharmonie en favorisant la cohérence et la cohésion En reflétant votre schéma de rôle visuel, tout au long du processus de conception, vous vous assurez que chaque détail, de la palette de couleurs à la typographie , correspond à votre vision initiale, créant ainsi une expérience utilisateur unifiée et harmonieuse Et le dernier concerne la prise de décision et l'efficacité. Moodboards agit comme un catalyseur pour une décision efficace grâce à une vision claire qui vous est présentée Faire des choix concernant les éléments de design devient un jeu d'enfant Vous répartissez le travail sur le gaz, évitez les révisions coûteuses et gérez le processus de conception en vous concentrant sur la conférence. La clarté et l'orientation fournies par un plus grand nombre de conseils d'administration. En fin de compte, rationalisez votre flux de travail, économisant du temps et des ressources précieux. Tout dépend donc du plus grand nombre de planches. Voyons maintenant comment trouver l' inspiration pour nos projets. Donc, le premier site Web est une page d'amour. C'est le site Web où vous pouvez trouver beaucoup d'inspiration pour vos projets. Et la meilleure chose à propos de ce site Web est que vous pouvez trier beaucoup de choses ici. Disons que je veux concevoir une application. Je peux accéder aux modèles et à l'application. Vous pouvez également accéder aux ressources, à la location d'informations et à la page Build One. Donc, actuellement, je suis dans les modèles et l'application. Vous pouvez donc dire que j'ai beaucoup de modèles. Je peux simplement accéder à n'importe quel modèle. Disons, choisissons celui-ci, ce face-à-face. Donc, je peux voir la police, ainsi que l'image, ainsi que la couleur de l'arrière-plan et le type de dessin. C'est ainsi que vous pouvez trouver l'inspiration pour votre projet. Vous pouvez donc vous rendre sur ce site Web, consulter tous les modèles et les designs et vous inspirer pour votre projet. Maintenant, le second est le voto, Ivo voto limit. C'est également un très bon site d'inspiration. Accédez simplement à la recherche et tapez ce que vous voulez, comme dans ce cas, le site Web I Want Commerce, l'application de commerce électronique Apple. Et nous allons vous montrer toutes les applications. OK, voici à quoi ressemble l'application. Vous pouvez donc créer une application de capture d'écran et nous pouvons l'ajouter dans un moodboard. suit est que Dribble est l'un des meilleurs sites Web pour EV Dris et ce site Web sur les guerres est l'un des Voici donc les trois meilleurs sites Web Un design utilisé pour s'inspirer. Il y a aussi Adobe Stop. Vous pouvez aller sur ce site Web, rechercher ce que vous voulez et vous en inspirer. Vous pouvez télécharger cette image ou en faire une capture d'écran. Et après avoir pris ces images et ces captures d'écran, entrez simplement dans le Figma Voici donc le site Web sur lequel vous pouvez vous inspirer. Permettez-moi de vous montrer cette récompense . C'est vraiment génial. qu'il contient des modèles et des sites Web vraiment Je dirais qu'il contient des modèles et des sites Web vraiment très intéressants, qui sont vraiment primés. Disons si je vais sur un site Web. Donc, comme vous pouvez le voir, c'est un site vraiment minimaliste. Il contient du texte et tout ça. Et le texte est vraiment simple mais attrayant. Les images utilisées sont également très bonnes. Tout tourne donc autour des moodboards et de la manière de trouver l'inspiration pour votre projet. Maintenant, laissez-moi vous montrer un moodboard que j'ai créé pour mon projet, et nous allons créer ce projet dans le cadre d'un deuxième projet. Alors laisse-moi te montrer ça. Il s'agit donc de notre deuxième projet, et voici le moodboard, la conception du texte et tout ça. Il est également présent. Je sais que c'est vraiment foiré en ce moment. Je vais l'organiser à l'avenir. Mais voici à quoi ressemble le moodboard. Euh, j'ai pris un tas de captures d'écran, je les ai arrangées, et je les ai aussi créées, comme la palette de couleurs O pour ce design spécifique, et le design final ressemble à ceci. Je ne sais pas comment vous en montrer autant, mais voici le mood board et la palette de couleurs. Tout tourne donc autour de moodboards et de sites Web inspirants Il suffit de le parcourir. J'ai ajouté tous les liens dans les ressources et je les parcoure, inspire, je prends quelques images sous forme capture d'écran, je les capture normalement. Alors, pour la prochaine vidéo, nous allons vous révéler comment j' organise les s en moodboards. Je te retrouverai donc dans le prochain. 32. Comment créer un moodboard dans Figma: Nous sommes des esprits créatifs. Aujourd'hui, nous nous intéressons à l'art des moodboards. Je vais vous montrer comment transformer votre capture d'écran inspirante en quelque chose de raffiné, à la fois pour votre parcours créatif personnel et pour les clients exigeants Commençons donc par nos moodboards. Pour cela, nous pouvons aller sur la communauté Figma et simplement rechercher des moodboards. Alors laisse-moi te montrer. D'accord, vous pouvez donc accéder à cette communauté Figma. Et si vous recherchez des moodboards, vous obtiendrez un tas de moodboards et vous pourrez sélectionner n'importe lequel d'entre eux. J'ai donc sélectionné ces trois, comme celui-ci, celui-ci et celui-ci. Voici donc l'exemple, quoi ressemblera le moodboard. Cela ressemble donc à des moodboards plus organisés. Donc, dans la vue précédente, je vous ai montré mon moodboard. C'était vraiment foiré. Donc, si vous voulez vous organiser si vous voulez créer un mood board organisé, vous pouvez choisir cette tablette, copier, me laisser en copier une autre. OK, laisse-moi le copier. Passons à Power Project, et collons-le ici. Et je peux maintenant ajouter une image. Permettez-moi donc de suivre une image d' abord plus une image. Dans le fichier d'exercices Figma, j'ai ajouté des moodboards, afin que vous puissiez également prendre une capture d'écran si vous le souhaitez, ou si vous avez votre propre capture d'écran, nous pouvons également choisir celle-ci Ouvrez un, deux, trois. C'est la méthode la plus organisée, mais je vais lire celle-ci. D'accord, je vais vous montrer mon chemin, donc de la manière la plus sale. Si tu travailles si bas, je te conseille de te salir. Faites glisser un cadre comme celui-ci et laissez-moi sélectionner à nouveau quelques images. Je vais juste aller dans mon pot à moules, je les sélectionnerai tous, et je vais juste les jeter ici. Après cela, je vais l'organiser comme ça. C'est ma façon de faire. Vous pouvez simplement créer un cadre et le vider comme ça, et vous pouvez le nommer moodboards. Si vous le souhaitez, vous pouvez accéder à la communauté et vous pouvez également choisir celle-ci. Pour une manière plus organisée. Si vous travaillez, je vous conseille de vous salir et de créer des moodboards comme celui-ci. N'oubliez pas que ces moodboards sont un outil de communication essentiel, ils vous aident donc à transmettre votre orientation de conception aux clients. Voilà, le mood board rapide et sale pour l'exploration que vous avez créée, et la version policière pour nos lignes. Alors, profitez-en pour plus d' aventure en matière de design dans la vidéo suivante. 33. Projet de cours 5 : station d'inspiration : créer un tableau de moodboard dans Figma: Bonjour, tout le monde. Bienvenue dans le projet numéro cinq. C'est Mood Board. Dans ce projet, nous explorerons le monde passionnant des moodboards. Pour votre projet, allons-y. Tout d'abord, vous devrez créer un moodboard, pour votre Il s'agit d'une représentation visuelle du style esthétique général et de l'émotion. Vous voulez que votre marque soit véhiculée. Une fois que vous avez créé vos moodboards, il est temps de les présenter. Si vous pouvez créer une page dédiée et la nommer moodboards, vous pouvez la copier et coller ici pour plus d'organisation Cela peut être un simple vidage de capture d'écran ou quelque chose d'un peu plus élaboré, comme l'exemple de la communauté Figma Après avoir créé un autre tableau comme celui-ci, prenez-en une capture d'écran et soumettez-la moi dans la section projet. Ce sera donc notre projet numéro cinq, créer un autre tableau et me le soumettre. Ce sont les photos B et je vous verrai sur la prochaine. 34. Créer un système de grille réactif pour le Web et l'interface utilisateur: Salut tout le monde, et bienvenue sur le coût de Figma Cost de UI EX Designers Nous avons parcouru de nombreux terrains jusqu'à présent. De la conception la plus élémentaire à la fabrication de wireframes et de prototypes à faible Il est maintenant temps de mettre nos compétences à l'épreuve et de commencer à concevoir une véritable interface. À partir d'aujourd'hui, nous allons donc nous plonger dans nos structures filaires à haute fosse, c' est-à-dire des structures à haut feu Et aujourd'hui, nous allons également apprendre comment ajouter des colonnes, des notes dans notre application mobile. Donc, tout d'abord. Donc, comme vous pouvez le voir, nous sommes actuellement en mode filaire basse fidélité. Ce sont des frais modiques. Mais dans les pages, je l'ai nommée application mobile Clickart, mais ce n'est pas l'application, alors laissez-moi la renommer Double-cliquez. Et je vais le renommer Application mobile Click Card, frais modiques. C'est un filaire de faible foi. OK. Tu peux le nommer comme tu veux. C'est ce que je nomme. Vous pouvez utiliser des noms comme Amazon ou Walmart Cela dépend donc totalement du fait que vous pouvez également vous mettre un nom au lieu d'une carte PLI Et nous avons créé cette page pour tablette, mais nous ne concevons aucune application pour tablette. Nous sommes en train de concevoir des applications. Alors permettez-moi de le renommer. Je vais juste l'appeler app et si. C'est un cadre métallique haute fidélité. Donc, chaque fois que nous voulons passer au wireframe, nous pouvons simplement y aller comme ça et nous pouvons passer à notre haute fidélité OK. Passons maintenant aux cadres et ajoutons un cadre car je veux vous montrer et vous apprendre à utiliser les scripts de colonne Il y a certaines choses que les utilisateurs ne voient pas, mais en tant que concepteurs, nous les utilisons pour rendre la disposition des composants à l'écran plus facile et plus cohérente. Lorsque vous concevez un écran, vous disposez de différents composants dont taille et la distance les uns par rapport aux autres diffèrent. Voici donc un bref aperçu de la façon de structurer un écran pour prendre une décision rapide lors de la conception. Tout d'abord, ce seront les marges. Les marges sont des espaces situés entre le contenu et les bords de l'écran. Elles sont définies avec un H fixe, généralement 16 pixels, mais certaines applications utilisent 20 ou 24 marges. Toute la taille des éléments de l'interface utilisateur et l'espace entre eux sont définis comme un multiple du nombre de huit. Vous pensez peut-être par huit, car il est facile de diviser la plupart des écrans mobiles dans la grille des huit. Maintenant, il y a les choses entre les marges qui sont des colonnes. Le contenu est placé à l'intérieur des colonnes. Cela nous aide à décider où placer un élément et à créer une interface bien structurée. Les colonnes aident le développeur à créer une mise en page cohérente sur plusieurs tailles d'écran. nombre le plus courant est quatre, mais vous pouvez essayer six ou huit. La largeur est définie en pourcentage plutôt qu'en utilisant des valeurs fixes. Et ensuite, ce sont les gouttières. Des gouttières séparent le contenant dans les colonnes. La valeur recommandée pour les gouttières est également de 16 pixels. Moins de 16 pixels ne suffisent généralement pas pour séparer visuellement les éléments. Mais bon, peut-être que huit pixels pourraient fonctionner un jour. Essayez-le vous-même. Parlons maintenant des lignes. Il est également appelé grain d'interface utilisateur horizontal. Une interface utilisateur horizontale est utilisée pour aligner horizontalement les éléments de l'interface utilisateur, tels que les boutons, les cartes et les commutateurs Les niveaux horizontaux sont définis sur un rythme de huit pixels. Cela garantira que l'espacement vertical et horizontal est synchronisé Passons à Fragma en allemand et ajoutons quelques notes et colonnes Donc, si vous cliquez sur votre cadre dans le panneau de conception, nous obtenons un écran de mise en page. Cliquez simplement dessus. Tout d'abord, c'est un peu malin, une grille de dix pixels fait dix pixels, mais je veux configurer la première, je dirais les colonnes, alors choisissons une colonne Et la plupart du temps, j'utilise un quatre. À l'avant, vous pouvez en utiliser six ou huit. Tout dépend de vous et de votre design. La marge doit être de 16 et les gouttières de 16 x 2. Ce sont donc les valeurs standard de l'industrie. D'accord ? Maintenant, allons-y avec une rangée. Nous en avons fini avec les colonnes. Il suffit donc de cliquer sur le bouton plotum plus et maintenant sur les tiges. Donc, pour les lignes, je vais dire que le décompte devrait être automatique car cela ajoutera automatiquement le compte. Et une fois, je devrais être au centre, et la hauteur devrait être huit et la gouttière de huit également Voilà, saisissez la valeur et regardez votre belle mise en page. Et voici une cassette. Jouez un peu avec les chiffres, peut-être parcourez six ou huit colonnes pour voir ce qui va se passer et comment vous pouvez l'utiliser. Pour activer ou désactiver la grille de mise en page, il suffit de cliquer sur l' icône comme ici Nous pouvons l'activer et le désactiver comme ceci. Vous pouvez également utiliser un raccourci pour contrôler G pour Mac et Ctrl Shift pour Windows. Et voici une cassette pro plus importante. Par exemple, ne vous inquiétez pas, si un composant fonctionne et a une meilleure apparence s'il n'est pas parfaitement aligné sur une grille. Grid est là pour vous aider, mais vous n'êtes pas obligé de les suivre aveuglément. Si vous maintenez la plupart des choses alignées, un petit ajustement ne cassera rien. Le contenu définira la grille et non l' inverse. Tout dépend donc des marges, des coupe-grilles, des colonnes, des sols. Oui, c'est ainsi que nous plaçons nos grilles sur nos cadres. C'est donc une vidéo photo, et je vous verrai dans la prochaine 35. Comment choisir les couleurs (inspiration des couleurs): Bienvenue au designer Max. Dans ce monde, nous plongeons dans le monde coloré du design et explorons les différentes sources d'inspiration en matière de couleurs. Commençons donc par savoir comment trouver , extraire et utiliser ces couleurs dans Figma Tout d'abord, il existe de nombreux sites Web consacrés à l'inspiration des couleurs, mais laissez-moi vous dire qu'un Ju Juhad est comme si nous faisions quelque chose étrange pour créer quelque chose d'utile C'est le monde indien. OK, alors laisse-moi te montrer une chose. Donc, la plupart du temps, je crée des cartes mères comme celle-ci et je dessine des rectangles Supposons qu'il s'agisse du rectangle. Il s'agit d'un rectangle. Et je vais juste sur le terrain et je choisis un compte-gouttes, et des couleurs supplémentaires comme celui-ci Et si je veux une palette de couleurs, je peux passer aux couleurs et au compte-gouttes, et choisissons cette couleur OK ? OK, celui-ci. Comme vous pouvez le constater, c'est ainsi que j'extrait mes couleurs. C'est la méthode vraiment basique. Ce n'est pas une méthode professionnelle, mais vous pouvez l'utiliser et ensuite cela fonctionne. Faisons tirer une autre balle. OK, allons-y avec celui-ci. Nous avons donc trois types différents de couleur orange. D'accord, voici comment nous pouvons extraire les couleurs. Maintenant, laissez-moi vous montrer quelques plugins d'où vous pouvez vous inspirer pour vos palettes de couleurs. OK. La première concerne les palettes de couleurs, les quatre. Et nous avons également celui-ci. Mais Figma utilise une prise à la fois. D'accord, nous avons donc également cette palette de couleurs Slash Color Swatch D'accord, nous pouvons donc également utiliser celui-ci. Par exemple, si je sélectionne celui-ci et que je veux le copier, je peux simplement le copier et passer à ce remplissage et à la lutte antiparasitaire. Et vous pouvez voir que la couleur a changé maintenant. À partir de là, nous pouvons obtenir un tas de palettes de couleurs, et il existe un autre plugin appelé palettes de couleurs. Et d'accord, c'est aussi exactement le même site Web. Il suffit de sélectionner le rectangle de choisir la couleur de votre choix et de cliquer dessus. Cela ajoutera cette couleur à ce rectangle. Vous avez maintenant une palette de couleurs. Passons maintenant à la méthode promotionnelle et voyons quelques sites Web qui fournissent une palette de couleurs et de l' inspiration pour vos projets OK. Le premier est l'un des meilleurs, je dois dire, et la plupart des conceptions graphiques utilisent ces sites Web. Le premier est via colors, w.com slash Colors. Nous pouvons aller sur ce site Web, et nous y trouvons quatre options, comme le générateur de palette de couleurs, idée de palette de couleurs, la roue chromatique et la signification des couleurs. Allons-y donc avec le générateur de pièces de couleur. Disons que vous avez une image et qu' actuellement, nous avons une image MO. OK, donc si vous avez une image, vous pouvez la télécharger, elle en extraira toutes les couleurs, et elle vous donnera le code X correspondant, et vous pouvez simplement la copier-coller dans Figma Et vous pouvez l'utiliser comme palette de couleurs. C'est donc la première option. Après cela, passons aux idées de palette de couleurs. Nous avons également des options de bunjop ici. Et nous pouvons taper le type de couleurs que nous voulons. Disons que je veux un coma bleu, noir et jaune. OK, voyons voir. Nous avons donc belles barats de couleurs, du bleu, du jaune, ainsi que ce que j'ai tapé Donc, c'est ainsi que fonctionne ce barreau de couleur. La suivante est la roue chromatique. Oh, je dois dire que c'est l'un des meilleurs. Si nous passons à la roue chromatique, et si nous choisissons n'importe quelle couleur, , optez pour le rouge. Il vous indiquera également la couleur complémentaire. Et vous pouvez également passer au monochrome ou à l'analogue Après cela, si vous voulez un analogue, vous pouvez obtenir trois couleurs En striic, nous obtenons également trois couleurs avec des couleurs différentes, et en sottique, nous obtenons quatre Nous pouvons simplement la copier et exporter cette palette. Vous pouvez la saisir dans Puma et l'utiliser pour notre design Si vous souhaitez obtenir de nombreuses informations sur une couleur de série, accédez simplement à la signification de la couleur, et vous pouvez taper, je suppose, le nom de la couleur, et il vous racontera tout l'historique Disons que si j'opte pour celle-ci, Amber, elle me racontera toute l' histoire de cette couleur. Si cela vous intéresse davantage, vous pouvez consulter ce site Web. Si vous voulez en savoir plus sur les couleurs. Maintenant, le suivant est Adobclor. C'est aussi un peu pareil, mais il a également des fonctionnalités similaires comme va. Nous faisons pivoter ce cadran et nous obtenons ces couleurs, et nous pouvons changer le mode de couleur RGB SG lab, ainsi que nous pouvons également rechercher les besoins des acteurs, comme je l'ai fait dans un, comme le bleu, le jaune et le vert, quelque chose comme ça. Vous pouvez les joindre ici, et vous obtiendrez une palette de couleurs comme celle-ci. Maintenant, la prochaine étape est de les extraire. Nous avons donc vu dans Canva que nous pouvions télécharger n'importe quel fichier, téléchargeons celui-ci, et il en extraira toutes les couleurs Si vous voyez à l'œil nu, nous ne dirons que deux couleurs comme bleu désolé, le jaune et le blanc. Mais avec cet outil, nous pouvons voir les différentes nuances de jaune, ainsi que le noir et le noir. Et vous pouvez également extraire le dégradé de couleur, comme vous pouvez le voir. Et celui-ci est important, l'outil d'accessibilité. Il vous indiquera que cette couleur convient ou non à votre design. Voyons voir si j' utilise autre chose. Alors laisse-moi utiliser celui-ci. Vous pouvez donc voir que cela se fait sentir et que la couleur ne correspond pas à la couleur de fond principale. La couleur du texte ne correspond pas à la couleur de fond. Il vous indiquera donc quelle couleur convient le mieux à notre design d' arrière-plan pour un texte. C'est donc très utile. Vous pouvez accéder à Explore pour obtenir d'autres palettes de couleurs comme celle-ci, et nous pouvons effectuer une recherche en fonction de nos besoins. Et il y a aussi une section sur les tendances, vous indiquera toutes les palettes de couleurs tendances Si vous souhaitez télécharger cette seconde, téléchargez-la et importez-la dans figma. Téléchargeons celle-ci Et permettez-moi d'ajouter cela à Figma. OK. OK, c'est donc l'image qu'il a téléchargée. Voici donc la partie couleur. Il est également livré avec du code X. Vous pouvez également choisir le tropo 2 pour extraire cette couleur. Passons maintenant au site Web suivant. C'est Color Hunt. C'est l'un des sites Web les plus populaires dans conception graphique, dans le domaine de la vx et dans le domaine de la motivation Vous pouvez donc simplement accéder au sous-site. Il a déjà créé une palette de couleurs. Vous pouvez simplement le télécharger et l'importer dans Figma. Vous pouvez également le rechercher en fonction des couleurs. De plus, il montre un cromon populaire et des sections aléatoires de tous les temps Si vous aimez une couleur, par exemple si vous aimez celle-ci, et si vous allez à la collection, elle vous le montrera. Tu as ce truc en collection. OK, il s' agit donc de Color Hunt. Si vous souhaitez des palettes de couleurs dégradées, rendez-vous sur Criban. C'est aussi l'un des types de sites Web populaires, vous pouvez aller sur ce site Web et copier ces couleurs et les utiliser dans votre conception. N'oubliez pas que le monde est plein de couleurs et que votre design doit refléter le ton, l'ambiance et le but de votre projet. Que vous vous inspiriez d' site Web, de dégradés ou d'un design existant, Fiber fournit l'outil qui vous permettra de créer votre palette de couleurs en toute simplicité. Alors expérimentez, explorez et laissez libre cours à votre créativité. Dans la prochaine vidéo, nous poursuivrons notre parcours de conception, donc state tuned. 36. Comment je crée des palettes de couleurs d'interface utilisateur dans figma: Bienvenue Pour ce faire, nous plongeons dans le monde coloré du design en créant une palette de couleurs qui servira de base à nos fausses herbes de haute fidélité. Voici donc l'exemple de ma palette de couleurs. Il s'agit donc de la technique un peu avancée et de la technique normale , que nous allons apprendre maintenant. Et voici mes couleurs principales. Comme si c'était la couleur primaire. C'est la deuxième couleur, et c'est la couleur ou la couleur neutre ou vous pouvez l'appeler accent Créons donc un système de couleurs. Avant de le faire, laissez-moi vous dire une chose. Disons qu'il existe une application préférée dont vous souhaitez reproduire les couleurs Disons Instagram. Il existe donc un site Web appelé Brand ***. Il contient toutes les informations sur ces marques, comme les polices de caractères, les couleurs, ainsi que je dirais les images et tout ça. Passons à Instagram. Disons qu'Instagram est un type de héros, et nous pouvons passer à Sagm et il nous indiquera tout, comme le logo, la police et la couleur Passons donc aux couleurs. Vous pouvez voir que nous obtenons huit couleurs. Et si vous voulez vous inspirer de cette marque, vous pouvez simplement copier les couleurs et les utiliser dans votre marque. Je dirais que c'est l'une des meilleures options. Il existe également l'option Tesla. Vous pouvez voir dans Tesla et passons aux couleurs. Vous pouvez voir que T L est une couleur vraiment basique. Il n'a aucun profil. Ce sont des couleurs vraiment basiques. Comme les gens qui connaissent les codes couleurs qu'ils connaîtront, c'est l'une des couleurs de base. C'est totalement blanc, c'est totalement noir, et c'est la couleur totalement rouge. Si vous voulez opter pour ces couleurs, allez-y. Passons maintenant à Figma et créons notre palette de couleurs D'accord, dessinons un cadre, et je vais le nommer système de couleurs. Maintenant, apportons nos couleurs primaires. Dans mon cas, ce seront mes couleurs primaires pour notre application Click Card, et permettez-moi de la coller et de dupliquer celle-ci. Je duplique comme ça. D'accord, ce seront donc les couleurs principales. Ce sera comme une sorte de nuance de couleurs, et ce sera une teinte, je suppose. OK, donc je vais d' abord concevoir . Passons à Phil, et je vais choisir Par défaut, ce sera x, alors choisissez SSH SL, alors choisissez SSH SL, et il vous suffit d'utiliser shifty et down erk pour modifier les valeurs Mais avant de devoir choisir l' un des paramètres. Comme dans ce cas, je vais choisir cette légèreté, et je vais la diminuer de dix. Et pareil pour ce dix. Nous pouvons également modifier la saturation. À l'heure actuelle, c'est chose faite. Permettez-moi de descendre un peu à 71, pareil pour celui-ci, lumières moins dix, et celui-ci correspond également à la saturation. Je pense que je n'ai pas changé la saturation ici. OK, donc ça va être ma section de teinte, et ça va être ma section partagée. Alors permettez-moi de le partager. Actuellement, c'est le quart de travail 81 et AppRef celui-ci aussi. Comprenez celui-ci. Dans ce cas, la saturation 100, nous allons donc conserver 100 ats. S'il passe à cent dans ce cas, vous pouvez le modifier un peu. Nous voulons juste un soupçon de cette couleur. Je vais aller jusqu'à 95. C'est visible. À peine visible. Nous voulons maintenant créer des partages, tels que des partages en noir et blanc de la couleur primaire. Permettez-moi de copier celui-ci et de créer les cinq. Ce ne sera pas totalement noir, comme dans les couleurs. Comme si c'était forcément la couleur la plus foncée de cette couleur. Je vais aller à celui-ci. Tout dépend de vous et de votre design. Maintenant, dans ce cas, je vais le rendre un peu plus clair, comme ceci et nous copions celui-ci. Permettez-moi d'en savoir plus à gauche. Pareil pour celui-ci. Le dernier doit être en blanc cassé, pas totalement en blanc cassé. Si nous fabriquons du blanc, il est utilisable. Laisse-moi faire comme si c'était le cas. OK, comme ça. D'accord, ce sera donc notre palette de couleurs pour cette conception d'interface utilisateur pour carte. C'est ainsi que nous créons une palette de couleurs dans Figma pour notre design en Y. Et lors du prochain paiement, nous allons voir comment créer le style. C'est donc vraiment utile. Laisse-moi dessiner un rectangle. Je peux donc simplement le faire glisser dans n'importe quel rectangle. Je peux simplement remplir, et je peux choisir ma palette de couleurs comme, disons, la mienne actuellement, ce sont les différentes palettes. La couleur est donc différente. Disons que, euh, c'est mon principal cologue que je puisse sélectionner Je n'ai donc pas à entrer dans le remplissage, puis à choisir la couleur et à déposer. La tâche de reput est arrêtée ici. Il suffit donc d'aller dans cette section dans les styles, dans la bibliothèque, et de choisir les couleurs pour notre design. C'est simple. Il s'agit de notre système de conception. Oh, désolée. Voici notre système de couleurs pour cette application, clickat app. Et voici un pro type. Il est essentiel de noter que la couleur peut être utile pour explorer les couleurs complémentaires, comme vous pouvez passer aux couleurs Canva ou aux couleurs Auto B, et vous pouvez choisir les couleurs complémentaires Cela peut vous aider à trouver couleur secondaire et neutre afin harmoniser avec la palette que vous avez choisie N'oubliez pas que la théorie des couleurs comporte une certaine science, qu'elle comporte également un élément de créativité. Le processus implique un mélange d'intuition, préférences personnelles et d'expérimentation. N'hésitez donc pas à explorer et à modifier jusqu'à ce que vous trouviez une palette de couleurs qui correspond à la vision du design 37. Comment créer des dégradés dans Figma: Optez pour un maxi designer, nous plongeons aujourd'hui dans le monde dynamique des dégradés Et croyez-moi, ça va être génial. Portez donc votre ceinture alors que nous nous lançons dans l'aventure visant à créer des dégradés qui ne sont pas simplement des éradients, mais sont un retour au rouge bop qu'ils sont Oui, nous créons des dégradés avec une touche d'originalité. OK, alors passons à Figma et créons un dégradé. Donc pour l'instant, je vais choisir un rectangle et laisser la touche Maj enfoncée pour le rectangle. Pour créer un dégradé, nous avons une option spéciale dans Phil. Passons donc à Phil et nous verrons que nous avons un tas d' options, comme la première décoloration Ensuite, nous avons le gradient. Après cela, nous avons la mylose. Ensuite, nous avons des images et ensuite cette vidéo. Actuellement, nous choisissons le dégradé. Et ingrédient, nous avons quatre options comme linéaire, radial, angulaire et diamant. Donc, la plupart du temps, nous n' utilisons pas cet angle et ce diamant. Mais j'utilise souvent un linéaire. Allons-y donc avec le linéaire. Nous avons donc ces options, laissez-moi entrer. Vous verrez donc que nous obtenons ces deux boîtes. Tout d'abord, c'est la couleur primaire. Je vais donc choisir le tarif. Et la deuxième sera une couleur secondaire. Vous pouvez choisir la couleur de votre choix. Je vais donc opter pour Disons bonjour comme ça. D'accord, actuellement, il est transparent, nous pouvons donc augmenter le taux de transparence afin d'obtenir des couleurs plus vives comme celle-ci. Et nous avons un peu l'ambiance d'un coucher de soleil dans notre lycée. Nous pouvons simplement ajuster ces lignes pour la couleur principale et la couleur secondaire de cette manière. Si je choisis, disons, le mode radial, pour que vous puissiez voir, nous obtenons ce genre d' effet faible au milieu, comme celui-ci. Nous pouvons l'ajuster à partir de ce point, ainsi qu'à partir de cette ligne. Maintenant, regardons Angular. Angle est comme ça. C'est un cercle rond, et nous pouvons l'ajuster comme celui du cadran, je suppose, comme celui-ci. La plupart des gens ne l'utilisent pas. Je n'ai jamais vu quelqu'un utiliser l'angle dans aucun design. Repartons avec le diamant. Un diamant, c'est comme ça. Cela crée un petit diamant et nous pouvons l'ajuster comme un D angulaire. Le design nécessite l'un de ces types de création, vous pouvez donc l'utiliser. Tout dépend du design. Je vais choisir le linéaire parce que j' aime le linéaire comme celui-ci, et je vais continuer comme ça. OK, donc ce sera notre dégradé. Permettez-moi donc de vous montrer un diplômé que j'ai créé pour cette heure de design, que nous verrons à l'avenir. Donc, pour ce diplôme que j'ai créé, j'utilise la couleur primaire rouge ainsi que cette couleur popo, donc cela va avec ce trophée. Donc ça a l'air super. C'est ainsi que vous créez un dégradé dans Fa. Si vous voulez vous inspirer, vous pouvez passer au dégradé, et vous pouvez choisir un tas d' options. Je sais qu'il y a trois pages sur le site Web, mais ce n'est pas trois pages. Par exemple, si je choisis ce style, je peux le changer comme ça. Je peux ajouter plusieurs couleurs. Ce n'est donc pas un site Web de trois pages. Il contient plusieurs millions de couleurs, vous pouvez donc simplement le composer, vous inspirer de cette couleur et créer votre propre dégradé. Alors, mes amis, vous devenez un pro du dégradé dans Figma. ne vous contentez donc pas de concevoir, vous créez une symphonie visuelle de couleurs. Alors allez-y, expérimentez, amusez-vous bien et je vous retrouverai dans la prochaine vidéo pour d'autres plaisirs du design Alors, laissez libre cours à votre créativité. 38. Créer un système de couleurs dans Figma: Mais étudiants. Aujourd'hui, nous allons créer des styles de couleurs dans un figma, comme celui-ci à l'écran Je sais qu'il existe des couleurs bunjob parce que j' essayais d'expérimenter quelque chose avec C'est pourquoi j'ai créé des styles de banjop dans mon panneau de conception Je les lirais donc, et nous créerons tout à partir de zéro. Avant cela, laissez-moi vous dire, imaginez un monde dans lequel vous pourrez facilement enregistrer et réutiliser vos couleurs préférées Assurez la cohérence entre les projets et partagez facilement votre palette de design avec votre équipe Eh bien, bugle, parce que c'est précisément ce dans quoi nous nous intéressons styles de couleur sont la clé d' un parcours de design plus organisé et plus efficace Il n'y a donc plus de gouttes oculaires interminables pour les quiz, nous passons donc au niveau supérieur. Permettez-moi de laisser celui-ci parce que c'est trop. Je peux y mettre 2604 couleurs, alors laissez-moi supprimer 2604 OK, maintenant ça a l'air super. OK, jusqu'à présent, pour créer un style de couleur, il suffit de sélectionner notre couleur. C'est notre couleur principale, celle-ci. Je ne sais pas comment ça s' appelle comme du bleu teinté ou du bleu sarcelle, quelque chose comme ça Si vous connaissez le nom de la couleur, merci de me le faire savoir. Quatre styles, c'est simple, sélectionnez n'importe quelle couleur, et dans ce cas, il s'agit de la couleur primaire, d'une deuxième couleur et la couleur neutre et accentuée. Ce sont les nuances de notre gris. Allons donc choisir notre couleur principale, et nous pouvons simplement cliquer sur ce bouton plus pour créer un style. Nous pouvons le faire dans tous les domaines, comme si je voulais, disons, faire un accident vasculaire cérébral. Je peux donc simplement cliquer sur les quatre menus et ajouter un bouton plus et j'obtiendrai un style. Effet Sit, port Smith, pas Symmet Export, il affecte le trait, le fond et l'ajout d'un texte Pour l'instant, nous nous intéressons à la couleur. Allons-y donc, remplissons-le. Cliquez sur le bouton plus. Et je vais l' appeler primaire. Mais avant de devoir ajouter le nom de notre marque, car chez FMA, nous travaillons avec de nombreuses équipes et sur de nombreux projets, donc tout va mal, comme lorsque nous travaillions sur de nouveaux projets Alors laisse-moi le nommer. Ce seront les premières initiales de notre marque. Cette carte Just Click. Je vais donc utiliser CC. Tash. Primaire. Et ça va en être un. Vous pouvez également ajouter une description. Supposons que vous travailliez avec des vendeurs groupés, afin que vous puissiez ajouter une description, exemple, quelle est la signification de cette couleur ? Pourquoi l'utilisons-nous ? Où allons-nous utiliser cette couleur ? Supposons que nous n'utilisions cette couleur qu'avec un texte ou un arrière-plan Vous pouvez donc l'ajouter dans la description, afin que d'autres personnes connaissent cette couleur. OK, alors créons un style. Nous avons donc simplement créé notre style. Permettez-moi de vous montrer une chose. Je ne suis pas en train de concevoir quelque chose comme ça, et je ne veux pas entrer dans le compte-gouttes comme je vais le choisir, puis je vais choisir comme ça C'est un peu douloureux et une perte de temps. Dans ce cas, ce que nous pouvons faire, c'est utiliser le style. Élément sélectif, il suffit d'aller dans le style et de choisir notre couleur primaire. Ce sera celui-ci. C'est facile par rapport à un outil approprié. OK. Laisse-moi faire ça. Choisissez toujours celui-ci et celui-ci et laissez-moi le renommer. Laissez-moi vous le montrer encore une fois. Je sais que certaines personnes pourraient être expulsées. Laisse-moi leur montrer. OK, alors choisis ta couleur. Accédez à ce menu à quatre fléchettes, menu style, cliquez sur plus Nommez-le dans ce cas, ce sera le numéro deux principal et créerez un style. Je vais maintenant faire avancer rapidement cette vidéo. D'accord, le rouge va être une couleur secondaire, donc je vais l' appeler secondaire, et tout le processus est le même. Et ce sera notre couleur neutre. Je vais donc l'appeler neutral make c neutral one. Vous pouvez également le nommer accent. C'est ce qu'on appelle aussi accent. Et ce seront des nuances de gris pour notre design. Je sais que cela ne ressemble pas à du gris, mais ce seront nos nuances de gris pour notre système de couleurs. OK, nous en avons fini avec notre style, mais il ne reste qu'une chose, c'est le dégradé. Je ne suis pas sûr de devoir l'ajouter ou non, mais allons-y. Allons-y et ajoutons ça. Style et D, j'ai hâte de passer au capital. Dégradé. OK. Nous n'avons qu'un seul dégradé, donc je vais garder un style plus dégradé. Si je clique sur cet espace vide, comme vous pouvez le voir, notre système de couleurs, c'est ici. Et nous pouvons simplement le choisir et l'utiliser quand nous le voulons et où nous le voulons. Comme lorsque j'apprenais Figma, cette époque, le bouton de dégradé n'était pas là Nous pouvons ajouter un dégradé en tant que style, mais il n'est pas visible ici. Donc, pour cela, nous devons entrer dans cette section, puis choisir notre dégradé, comme ceci. Et il y a une chose. Supposons que vous utilisiez beaucoup cette couleur Vous pouvez donc déplacer cette couleur vers le haut de cette manière, et il est facile de choisir et de faire des allers-retours lorsque vous changez de couleur. Supposons que vous souhaitiez changer le nom pour une raison ou une autre, que vous vouliez le nommer autrement. Dans ce cas, il vous suffit de cliquer sur sélectionner n'importe quelle couleur. Dans ce cas, je choisis C primary one. Je veux donc le nommer comme un zéro primaire. Dans ce cas, je peux utiliser ce style de disque, le renommer et modifier la description ainsi que la transparence C'est ainsi que vous pouvez modifier vos styles de couleurs. Voilà, les gars, le style de couleur dans la gloire de A D. Nous ne nous contentons pas d'organiser les couleurs. Nous sommes en train de sélectionner un chef-d'œuvre, donc un stade pour plus d'aventure en matière de design d' ici là, un style heureux 39. Moyen le plus facile de générer une palette de couleurs dans Figma (à l'aide de plugins: Hé, designers, avez-vous déjà rêvé de pouvoir créer de superbes palettes de couleurs pour votre design en un clin d'œil ? Eh bien, aujourd'hui, je vous dévoile deux armes secrètes qui vous transformeront en une palette de couleurs dans la boutique. Je présente donc le générateur de flux de matériaux et le générateur de couleurs de base. Ces plugins sont votre guichet unique pour créer une belle palette de photos en une seconde, ainsi de vous concentrer sur ce qui compte vraiment Ainsi, plus besoin de regarder la confusion des couleurs, plus besoin de passer des heures à créer la palette parfaite Ces plugins font le gros du travail pour vous. Ainsi, vous pouvez créer un design accrocheur en un rien de temps. Alors, êtes-vous prêt à montrer le maître des couleurs qui sommeille en vous ? Passons donc à ces plugins incroyables. Bien, passons donc aux plugins dans Figma. Vous pouvez accéder à la communauté, et à partir de là, vous pouvez rechercher ces plugins. Et nous connaissons également le raccourci qui se trouve ici. Je pense que cela s'appelle des ressources. Vous pouvez utiliser Shift Eye pour cela. Il suffit d'aller dans les plugins, de rechercher ces deux plugins et de cliquer sur Exécuter pour qu'il s'ouvre comme ça. Commençons par le générateur de couleurs de base. Ce plugin nous aide beaucoup. Auparavant, nous avions vu que nous étions en train de créer ce système de couleurs pour notre design. Et lorsque nous avons créé ces carreaux, cela a pris un certain temps, et nous avons pu créer ce système de couleurs en 10 minutes, je suppose. Mais dans ces plugins, nous sommes en mesure de créer des palettes de couleurs pendant une seconde. Pour le profil, je vais choisir le matériau. Donc, pour notre design, la couleur principale est celle-ci. Le bleu acier, je suppose. Cliquons dessus et laissez-moi l'essayer ici. Cliquez dessus et choisissons cette couleur principale, cette couleur primaire. Comme vous pouvez le constater, nous avons obtenu notre palette de couleurs pour cette couleur primaire. Nous pouvons donc simplement cliquer sur ce bouton de palette et nous avons notre palette de couleurs pour cette couleur bleue. Je peux simplement le faire glisser n'importe où sur mon écran, et je peux l'utiliser directement. Je sais que vous vous demandez peut-être si nous pouvons créer un style ? Oui, vous pouvez créer un style. Vous pouvez simplement cliquer sur ce bouton de style de voiture, et il créera du style pour vous, et c'est ici. Le fond de teint bleu. Et comme vous pouvez le voir, nous avons une palette de couleurs pour notre couleur primaire. Et vous pouvez le renommer comme si je voulais être renommé principalement en bleu Je peux donc simplement le nommer, puis je dois à nouveau créer un style de design. Alors laissez-moi d'abord lire celui-ci. Style So Cut and C. Comme vous pouvez le voir, nous avons obtenu le bleu primaire. Et il y a également ajouté le code ou, je suppose, code de valeur g. Donc, comme vous pouvez le voir dans les styles de couleurs, nous avons obtenu le style de couleur bleue. Nous pouvons donc l'utiliser directement dans notre conception. Il est donc aussi simple que cela de créer des palettes de couleurs et des styles de couleurs en un seul clic. Passons maintenant au branchement suivant. C'est Material Theme Builder. Ce plugin est exactement le même, mais il possède des fonctionnalités telles que nous pouvons y ajouter une image et en extraire des couleurs. La différence entre le plugin foundation et plug-in Material Theme Builder est que nous avons cette option, nous pouvons importer une image, et elle en extraira , je dirais, une palette de couleurs, et elle créera une palette de couleurs. Et il ajoutera automatiquement toutes ces palettes de couleurs dans notre système de couleurs, nous n'avons donc pas à les ajouter manuellement comme ça, comme vous pouvez le voir, comme ça. Mais je dirais qu'il ne faut pas trop utiliser ce plugin car il vous rend paresseux et il en manque parfois beaucoup. Je conseille donc d'utiliser le plug in de base. Nous sommes donc actuellement en pleine dynamique. Donc, en dynamique, nous avons la possibilité d'ajouter une image. Si nous passons à la personnalisation, cela prendra un certain temps car elle crée des styles et tout ce qu'elle ajoute en termes de styles de couleurs. Cela prend donc du temps. En douane, nous pouvons choisir notre couleur primaire, notre couleur secondaire, notre couleur neutre, notre couleur accent en fonction de nos besoins, et cela crée des styles en fonction de cela. OK, donc nous sommes à la douane maintenant. Nous pouvons simplement cliquer sur la couleur principale et me laisser choisir ma couleur principale. Nous n'avons pas le choix, je dirais, d'ajouter cette couleur. Donc, ce que nous devons faire, c'est passer à cette couleur et ajouter le code x. Supposons qu'il s' notre couleur principale. Ça ne l'est pas. Si je postule, il choisit donc notre couleur primaire et commence à créer un style. Si je passe au style de couleur, comme vous pouvez le voir dans le matériau, cela commence à créer des styles de couleurs. Comme vous pouvez le voir, le primaire primaire et tout ça. C'est ainsi que fonctionnent ces plugins. Très bien, designers, nous avons exploré le pouvoir incroyable du même matériau et du même générateur de couleurs de base. Et maintenant, vous êtes en mesure de créer une palette de couleurs époustouflante qui rehaussera votre design N'oubliez pas qu'avant de vous lancer dans les plugins, il est essentiel avant de vous lancer dans les plugins, il est essentiel comprendre les bases de la théorie des couleurs. Tout comme les couleurs complémentaires, l'harmonie des couleurs, ces connaissances vous donneront une base solide pour créer encore plus de palettes infectées. Et n'oubliez pas que ces plugins sont des armes secrètes. Utilisez-les pour augmenter votre efficacité et expérimenter les différentes combinaisons de couleurs. Laissez-les être vos collaborateurs créatifs et vous aider, sauf si vous êtes un gourou de la couleur. Alors continuez à pratiquer, à explorer et à créer. N'oubliez pas que la seule limite est votre imagination. Et si vous êtes bloqué, n'hésitez pas à revoir la vidéo pour un rappel rapide 40. Project 06 Couleurs, styles et grilles en action !: Êtes-vous prêt à laisser libre cours à votre créativité et à vous lancer dans l'aventure du design ? Bienvenue dans le projet numéro six, où les couleurs, les styles et les grilles se combinent pour donner vie à la mise en page d'une application mobile Alors, choisissez votre palette de couleurs. Mais par où commencer, consultez ces ressources incroyables pour trouver de l'inspiration pour les seins Que vous soyez attiré par les chaussures audacieuses ou les pilons apaisants, pensez à choisir trois ou quatre couleurs qui mettent magnifiquement en valeur les hormones L'étape suivante est un style de couleur plus artisanal. Maintenant, laissez libre cours à votre imagination, expérimentez différentes nuances et combinaisons pour donner vie à votre design ? Qu' il s'agisse de tons primaires ou de touches accentuées, chaque choix de couleur raconte une histoire Laissez libre cours à votre créativité. Maintenant, étape numéro trois, créez une mise en page mobile. Il est temps de mettre de l'ordre sur la toile. Profitez de la puissance des réseaux pour créer équilibre et structure Et la quatrième étape, la création d' un tapis, une fois votre master terminé, capturez-le et partagez-le en projection. N'oubliez pas qu'il n'existe pas de mauvais design, laissez la créativité s'épanouir et, surtout, en avoir un en cours de route. Alors, vous êtes prêts à relever le défi, plongeons-nous dans le vif du sujet et créons ensemble quelque chose d' extraordinaire. Alors bonne chance et bonne conception. 41. Meilleures pratiques pour choisir des polices et l'appariement de polices dans l'interface utilisateur et la web design: Étudiants de Work Ma, nous plongeons aujourd'hui dans le monde des polices de caractères. Le choix des polices peut être un terrain de jeu créatif, mais il faut aussi tenir compte de ces facteurs. Voyons donc quelle police vous autorisez à utiliser l'option populaire et un peu de magie du jumelage de polices Donc, comme vous pouvez le voir, dans Figma, nous avons un tas de polices en option Il inclut également InstrutDfont. Quelles polices peuvent donc être utilisées dans Figma. L'univers du design est donc à portée de main et vous n'êtes pas limité à deux polices spécifiques. Nous voulons nous assurer qu' une version wave est disponible pour la police choisie. La police Google est une convention et un choix populaire pour cela. Voici donc le site Web des polices de caractères de Google. OK, le font.google.com. C'est un véritable trésor de polices gratuites adaptées au Web que vous pouvez utiliser commercialement, n'est-ce pas ? Mais vous vous demandez peut-être pourquoi ne pas simplement utiliser tous les téléphones de votre machine Eh bien, il est essentiel de vérifier que vos polices sélectionnées sont compatibles avec le Web. Vous avez peut-être une police de caractères sophistiquée que vous avez récemment achetée. Mais gardez à l'esprit qu'une licence différente peut être nécessaire pour un site Web et une utilisation supplémentaire. N'hésitez donc pas à investir dans la police si nécessaire. Ce sont les échanges secrets d'un design exceptionnel. Maintenant, faisons un petit détour par les polices Google. C'est l'un des sites Web les plus populaires dans le domaine de la conception graphique. Vous pouvez obtenir n'importe quelle police de votre choix dans les polices Google. Il suffit de sélectionner une police comme Let's Go et de sélectionner celle-ci pour la bannir, et nous pouvons simplement la télécharger. Nous pouvons télécharger toute la famille de polices. Nous pouvons télécharger une seule police spécifique comme si vous n'aimiez que celle-ci. Vous pouvez également télécharger celui-ci. Nous obtiendrons les informations sur la police de cette manière. Et si vous voulez en savoir un peu plus sur topographie et la psychologie de la police, vous pouvez consulter l'article Il existe un autre site Web appelé Canva. Dans Canva, nous recevons également un tas d'articles. Donc, si vous êtes sérieux dans le domaine de la conception graphique, de la conception ou du travail graphique, veuillez lire cet article car il vous aidera éventuellement dans votre processus de conception. Pour installer la police, il suffit télécharger le fichier et double conity. Il s' installera automatiquement dans un système. OK, il s' agit donc de Google Font. C'est l'un des meilleurs sites Web, je dois dire, mais disons que vous voulez le faire s'il y a une infont que vous ne voyez pas sur la police Google Dans ce cas, vous pouvez utiliser ce site Web appelé de font.com quelques jours, je montais une vidéo, et je voulais le type HS f. J'ai donc fait une recherche sur la police Google, mais je ne l'ai pas trouvée. Sur ce site, j'ai fait une recherche sur HS, et j'ai obtenu cette police. Et je l'ai utilisé dans ma vidéo, et c'est totalement gratuit. Cela nous indique également qu'il est disponible dans le commerce ou non. C'est également l'un des meilleurs sites Web que vous pouvez utiliser pour vos polices de caractères. Ensuite, nous avons ce site Web appelé fonts. Par exemple, si vous voulez Dfonts vraiment entraînés, vous pouvez opter pour ce site Web Comme dans ce cas, je souhaite choisir cette police MurmuraFont Je peux accéder à cette police , la télécharger et l'utiliser dans ma conception. Et vous pouvez voir que la licence est gratuite pour un usage personnel. Si vous souhaitez l'utiliser à des fins commerciales, vous devrez peut-être acheter la police. Et nous avons également cet espace de police de caractères sur le site Web, ainsi que des écureuils agit donc d'un site Web de polices gratuit, vous pouvez simplement le télécharger et l'utiliser dans votre conception. Passons maintenant à l' appariement des polices. Une fois que vous avez choisi une police, il est judicieux d' explorer le jumelage Par exemple, si vous avez une police S pour les titres et envisagez une forme sans re pour le corps de votre texte ou vice versa. Dans ce cas, certains sites Web peuvent vous aider. Donc, la plupart du temps, j'utilise ce site web, paire de polices. Je m'inspire beaucoup de ce site. J'utilise beaucoup ce site Web parce que parfois ma créativité faiblit et je veux avoir besoin d'une certaine motivation créative. Je vais donc sur ce site. Donc, comme les autres jours, je dessinais une affiche pour un client. Et je me sentais un peu coincé avec la police parce que le client n'avait pas précisé la police que je devais utiliser pour son design. Je suis donc allé sur ce site Web et j'ai examiné certains des appariements de polices Et à la fin, j'ai choisi, je pense que c'était une police de base. OK, j'ai choisi celui-ci, le robot et le roboto. Et au final, ça lui a plu. Ce sont donc de très bonnes ressources. Il y a donc si peu de sites Web que j'utilise, mais pas tant que ça comme Monotype C'est également l'un des meilleurs sites Web pour l'appariement de polices, vous pouvez vous rendre sur, et voici ce jumelage de polices. Et voici la paire de polices. Nous pouvons également échanger les polices de cette manière, et obtenir plus de paires, et nous pouvons simplement sélectionner celle-ci, je peux la modifier et nous pouvons également générer notre propre paire. C'est donc un excellent site Web. Ensuite, nous avons FGA. C'est également un excellent site Web. Pour un débutant, le site Web peut être déroutant. Je dirais donc de l' éviter. Supposons donc vous vouliez voir le fonctionnement réel de la police. Dans ce cas, vous pouvez donc utiliser ce site Web appelé font in use. Disons que vous voulez voir le fonctionnement réel de la police, comme c'est le cas pour celle-ci. Vous pouvez donc voir la police utilisée dans ce manuel, je suppose. Et il vous montrera comment cela fonctionne après l'avoir ajoutée dans des pages similaires, et vous pourrez avoir une vraie perspective de cette police avant de l'utiliser. Cela vous fera donc gagner du temps et vous aurez une idée de la police à utiliser ou de la police à éviter. Je sais que vous pourriez être bouleversé en voyant toutes les polices de caractères et tout ça Je vous ai déjà dit de parcourir cet article et d'apprendre tout sur la police si vous êtes sérieux en graphisme. N'oubliez pas que l'appariement de polices relève davantage de l'art que de la science. Alors, faites confiance aux instincts du design. D'ailleurs, j'ai également ajouté tous les liens dans les ressources. Il suffit de le parcourir, comme d'aller sur Google Fonts ou sur cette police Da pour vous inspirer, d' aller sur, je dirais, ce site Web de Fontin, et de vous inspirer et d'utiliser inv design Tout tourne donc autour des polices et de l'enseignement de base de la topographie. Je vous verrai donc dans le prochain. 42. Créer l'échelle de typographie parfaite pour les projets d'interface utilisateur et Web: Bonjour, des gens extraordinaires. C'est plus qu'ici. C'est jeudi 10 h 30 et il pleut dehors. J'ai pensé que c'était le moment idéal pour demander à Cozy de faire un dessin à percer. Au fait, avant de commencer, je sais que si vous recherchez de bonne musique à écouter pendant que vous concevez, il y a ce tarif modique pour 24 heures de diffusion que je laisse fonctionner 2047 pendant que je crée, et cela m'aide vraiment à m'immerger dans ce que je fais Donc, si vous recherchez bonne musique, jetez-y un œil. Essayons maintenant de nous immiscer dans notre design pour voyager. Nous avons ici la mise en page de configuration typographique que nous avons pour notre projet Nous utilisons le même système de conception dans tous nos projets, car cela nous aide à maintenir la cohérence, sans avoir à réinventer la roue à chaque fois Si vous regardez comment nous avons configuré notre échelle de caractères, nous avons trois sections : affichage, titre et corps du texte. Ces types de p sont vraiment destinés aux pages de prêt et aux sites Web de marketing Lorsque vous le trouvez sur une page d'accueil spécifique, vous vous rendrez peut-être compte que les titres de la section héros sont beaucoup plus grands que ceux que vous aurez dans votre application Web Ainsi, dans la conception spécifique de l'interface utilisateur, nous essayons d'avoir un style spécifique pour ce site Web de marketing et les titres qu'il contient Nous pouvons donc les rendre extrêmement volumineux, extrêmement gras, et cela n'affecte aucun des autres titres que nous avons dans des domaines plus importants tels que les pages d'interface utilisateur, l'écran de l' interface utilisateur et les pages de l'application elle-même Nous avons donc séparé cela, puis vous verrez que nous avons nos rubriques de un à six, et vous vous rendrez compte qu'il y a peu de variations Nous l'avons structuré en un textop dédié, puis nous avons également une tablette et un mobile dédiés à Virgin plus petits un mobile dédiés à Cela nous permet de réduire efficacement toutes les tailles pour tous nos types. Et il est également extrêmement beau. En ce qui concerne le corps du texte, nous avons quelques variantes : forme du corps, taille de la légende, taille de la photo. En général, vous souhaitez travailler avec 14 ou 16 pixels, qui sont les tailles les plus couramment utilisées, et il n'y a aucune raison de réinventer la roue Alors gardez-en deux (14 ou 16). Ensuite, vous avez la légende, qui ne sont généralement que de petites parties de la légende que vous utilisez sur le site Web. Il peut s'agir d'un texte d' infobulle détaillé. Il peut s'agir de quelques conseils utiles mettre sous un champ de saisie, des choses auxquelles vous n'avez pas vraiment besoin d'accorder trop d'attention. Ensuite, vous avez également les types de photos qui sont des types vraiment minuscules que vous pouvez utiliser ici et là. Peut-être sur la photo pour les conditions générales de service ou la politique de confidentialité. Des choses auxquelles vous ne voulez vraiment pas trop attirer l'attention et qui n'ont pas vraiment besoin de beaucoup de potentiel. Maintenant que vous comprenez comment nous avons créé notre propre échelle de caractères réactive, je vais vous montrer comment l' utiliser dans de vrais projets. J'ai créé une page d'accueil conceptualisée pour notre site Web Vous pouvez accéder à cette page d'accueil lorsque vous souhaitez afficher ce contenu ou accéder à l'affichage sur tablette. Voici donc ce que vous allez faire, laissez-moi d'abord aborder celui-ci. Donc, disons, si j'apporte ceci en plus de celui-ci. Donc, si je le copie et si je l'apporte à la version tablette, il convient parfaitement. Je dois m'ajuster un peu, mais ça me va parfaitement. OK, donc je peux ajuster celui-ci. Comme ça. Évidemment, vous allez le copier et le coller, et je pourrais simplement copier et coller celui-ci juste pour illustrer ce que je veux dire. Et vous pourriez vous dire  : OK, eh bien, dans les projets ou dans cet espace, particulier, la taille du type semble correcte. Cela n'a pas vraiment l'air excessif. S'il y a beaucoup d'espace pour respirer, il convient et n'a pas l'air encombré Comme vous pouvez le constater, il convient parfaitement. Ensuite, une fois que vous êtes satisfait d'une tablette, vous pouvez tout transférer vers l'affichage mobile. Et c'est alors que vous commencez à vous rendre compte que cette police est un peu trop grande pour l'écran. Et vous pourriez envisager de réduire cette taille de texte. Alors laisse-moi te montrer une chose. Les différentes polices ont un poids différent. Donc, voici la police Bon, et celle-ci correspond un peu à la taille berlinoise. Mais la taille de police est totalement la même. Comme vous pouvez le voir, celui-ci a 24 ans et c'est pour. Mais celui-ci semble plus grand. Une police différente a donc un poids différent. Et il est trop difficile d'avoir un système qui fonctionne pour tous. C'est donc la principale considération que vous devez prendre en compte. À réitérer une fois que vous aurez configuré votre échelle de caractères. Ensuite, vous devez vous assurer d'avoir créé la version plus petite de tous vos titres. Ensuite, vous devez vous assurer d'avoir une version plus petite pour toutes les variations du corps du texte. Votre corps, vos paragraphes, votre légende et vos photos. Mais une chose que vous devez prendre en compte maintenant, c'est qu'il y aura un moment où vous travaillerez peut-être sur le même site Web. Mais l'une des pages a un titre très long, ce qui est très courant. Donc, si vous envisagez de réduire la taille de la police sur la page, vous devez vous assurer que cela est également cohérent avec les pages. Voici donc quelques considérations que vous devez prendre en et vous devez travailler avec votre équipe pour trouver une solution adaptée à tout cela. Maintenant, résolvons ce problème comme pour le design mobile. Comme vous pouvez le constater, c'est un peu encombré et ça n'a pas l'air très beau Donc, dans ce cas, ce que nous pouvons faire, c'est que la taille de police est de 61, et d'accord, elle est de 60. Je pense que je l'ai accidentellement étendu à un. OK, alors laissez-moi le réduire à une rubrique plus petite. Donc dans ce cas, je vais prendre 34 ans. Parce que celui-ci est pour tablette et celui-ci pour mobile. Laissez-moi le changer en 34. Et ce quatre est 24, laissez-moi choisir une copie mobile qui aura, je suppose, 14 ou peut-être 16, ce sera bien. Alors allons-y avec 16 et laissez-moi en choisir 16. OK. Et laissez-moi étendre la boîte. Je vais donc bien m'adapter. Et permettez-moi de prolonger celui-ci également. Et après avoir changé la taille, celui-ci est le H, celui-ci peut être S deux ou S trois ou celui-ci peut être comme H quatre. Donc, après avoir changé tous les titres et toutes les tailles de texte, les tailles téléphone, ça a l'air bien Maintenant, j'espère que cela a du sens pour vous. Tout tourne donc autour de la typographie et du système de typographie. Et probablement dans la prochaine étape, nous verrons comment nous pouvons le faire dans un style, comme nous l'avons créé en format couleur, afin de créer la même chose pour un texte. Nous n'avons donc pas besoin d'aimer, d' ajouter une police, de faire une grande ou une petite découpe. Ce sera donc facile si nous créons du style. Alors maintenant, j'espère que cela a du sens pour vous. Très bien, les gars, je vous verrai dans le prochain. 43. Moyen le plus rapide de créer des styles de texte dans Figma: Bienvenue, designers. Dans cette offre, Figma nous plonge dans le monde faci du textile Dans un article précédent, nous allons découvrir ce système de typographie que nous allons utiliser pour tous nos projets Cela modifiera le projet agonal comme la police changera le projet agonal, mais toutes les tailles de police seront les mêmes. Les textiles changent la donne. Ils apportent de la cohérence et permettent mise à jour rapide pour la conception d'une politique. Alors plongeons-nous directement dans le vif du sujet. Permettez-moi donc de vous montrer un exemple. C'est donc un seul texte, et je veux le mettre à jour en quelque chose d'autre, par exemple en un seul clic. Dans ce cas, le textile nous aide beaucoup. Il suffit donc de passer à ce menu à quatre. Du style, et actuellement, nous en avons un tas. Laisse-moi choisir celui-ci, moyen. Ainsi, vous pouvez voir un style le modifier en un seul clic. Permettez-moi de le faire encore une fois avec celui-ci. Laisse-moi choisir tête haute. OK, je change maintenant. C'est ainsi que fonctionnent les textiles. Passons maintenant à FMA et créons des textiles. OK, nous sommes à Fa en fait. OK. Permettez-moi de passer à ce pitch de typographie. Je ne sais pas pourquoi je parle toujours de topographie, mais c'est de la typographie OK, commençons par celui-ci. Mais dans ce projet, nous n' utilisons pas celui d'affichage car nous utilisons principalement celui-ci, celui-ci, celui-ci, peut-être probablement celui-ci et tout celui-ci. Peut-être que celui-ci aussi, mais pas si gros. Mais nous pouvons partager nos textiles dans le cadre de différents projets. Cela pourrait donc être utile. Alors laissez-moi commencer celui-ci. Mais avant cela, permettez-moi de supprimer l'ancien textile, que nous n'allons pas utiliser. OK, laissez-moi vous montrer comment supprimer des textiles si nous ne voulons aucun textile dans votre projet. Vous pouvez simplement cliquer sur le textile directement dessus et le supprimer entre les couches. Et il le dira. Maintenant, créons de nouveaux textiles. OK. Celui-ci concerne les titres, peut-être que je dirais les sites Web, les sites Web qui sont des titres volumineux et en gras, comme les actualités. Alors laisse-moi choisir celui-ci. Et je vais d'abord choisir me laisser changer parce que c'est 61 ans, et j'en veux 60, 60. Passons à quatre menus, bouton d plus, créons un style, et je veux nommer ce titre ou nous pouvons le nommer comme titre d'affichage. À l'avenir, nous saurons donc qu'il s'agit de l'en-tête d'affichage. Afficher le titre, et je vais donner zéro à ce titre d'affichage. Vous pouvez également ajouter une description et créer un style. D'accord, nous avons donc créé notre premier style. Passons maintenant à celui-ci si quelqu'un est perdu dans son monde imaginaire. Permettez-moi donc de leur montrer à nouveau comment nous procédons. Il suffit donc de sélectionner n'importe quelle police pour laquelle vous souhaitez créer un style. Dans ce cas, je veux créer celui-ci. Il s'agit de la police de caractères de la tablette tate pixel extra polt. Et dans ce cas, je vais en prendre un. Et nous pouvons spécifier que c' est un pour tablette. Sélectionnez des textes, accédez à Fortnu, créez un style, bouton plus et un tableau Titre 1 de la tablette, créez un style. Bon, maintenant tu sais comment créer un style. Je vais donc avancer rapidement pour chacun d'entre eux. D'accord, j'ai donc créé ce design cele. J'ai sauté celui-ci parce que dans ce projet, je n'aurai pas besoin de celui-ci Donc, si je clique sur l'espace vide, comme vous pouvez le voir, nous avons nos titres. Désolée, nous avons reçu nos textiles. Donc, comme vous pouvez le constater, il n'est pas organisé, ou peut-être qu'il est organisé D'accord, certaines sont organisées, d' autres ne le sont pas, alors voyons comment nous pouvons les organiser. D'accord, vous pouvez donc voir la tablette se diriger vers elle en dessous de celle-ci. Alors laisse-moi suivre ça comme ça. Et c'est ainsi que vous pouvez vous organiser. Actuellement, il s'agit d'une rubrique mobile. Celui-ci sera ici un, deux, trois, quatre, cinq, six, et tout sera organisé. Pendant que vous travaillez, cela ressemblera quel titre et à quelle taille de police correspondent. Et il vous indique également de quelle taille de police il s'agit. Actuellement, celui-ci 60, c'est un 48 24 et tout ça. Imaginons que vous souhaitiez mettre à jour quelque chose. Permettez-moi d'ajouter du texte, comme des mots en ligne. Passons aux textiles. Supposons que je veuille mettre à jour les relevés mobiles, afin que nous puissions simplement cliquer dessus, et il y aura certains de ces boutons, ce bouton de style. Nous pouvons donc cliquer dessus, et actuellement c' est un signe ouvert, donc je peux changer pour allons-y ou Betrons chaque gorgée Et nous pouvons aussi dire ce que nous disons. Nous pouvons également modifier les quatre tailles. est donc actuellement de 20. Et on peut en faire 64 comme ça. Et maintenant, notre style est actualisé. Et si je vais ici, comme vous pouvez le voir, les deux styles sont également mis à jour ici. Donc, parce que nous avons choisi ce formulaire, que nous l'avons modifié et mis à jour. Il a donc également mis à jour le principal. Alors laissez-moi faire celui-ci parce que je ne veux pas ce texte chiffré pour le moment OK, maintenant j'ai ce que je voulais. C'est ainsi que l'on crée des textiles. Alors que vous suivez ce processus, n'oubliez pas qu'il est crucial d'organiser votre textile. Vous pouvez avoir différents styles pour les titres marketing, les titres d'information ou d'autres catégories Cela permet de maintenir la clarté et la cohérence de votre design. Et il y a une chose que je dois vous dire, dans ce cas, je l'ai conçu comme, désolé, je l'ai nommé titre mobile, titre tablette ou titre de bureau. Il faut que ça se passe comme ça. Vous pouvez simplement le nommer Titre un, Titre deux, Titre trois. Vous n'êtes pas obligé de le spécifier comme ça, comme tablette ou mobile. C'est donc mon principal choix. Je vais le dire. C'est ainsi que je travaille. est pourquoi j'ai choisi celui-ci, ces noms. Donc, si vous voulez simplement le garder comme titre un, titre deux, titre trois, comme ça ou comme paragraphe, vous pouvez le nommer ainsi. J'espère donc que vous apprécierez créer et de mettre à jour des textiles dans Figma, alors restez à l'affût pour d'autres aventures de design passionnantes dans la prochaine vidéo 44. Comment ajouter du texte lorem ipsum dans Figma: Bienvenue aux étudiants. De cette façon, nous plongeons dans le monde du texte playdo Composant crucial de ce processus de conception. Au lieu d'utiliser des termes de genre tels que playdo text ou tritratoex, nous allons explorer Lorm Ipsen, nous allons explorer Lorm Ipsen, un choix classique playdo text ou tritratoex, nous allons explorer Lorm Ipsen, un choix classique pour générer du texte qui réassemble l'anglais. Pour nous faciliter la vie. Je vais vous présenter un plugin fantastique appelé Content Rail. Cela change vraiment la donne, et nous l'utiliserons pour diverses tâches tout au long du cours. Parlons donc d'abord du site Web de Lorem PSA. Il existe un site officiel pour Lorem Ipsum. Il s'appelle psm.com. Il contient de nombreuses publicités, mais actuellement j' utilise le navigateur Breo, donc bioproser toutes les publicités, même sur YouTube, afin que vous puissiez utiliser le Vous n'avez pas besoin d'ajouter de bloqueur de publicité ou de plug-in pour cela Cela fonctionne. Cela fonctionne tout simplement. OK, donc le site web est lipsum.com. Et vous pouvez simplement cliquer sur ce bouton de génération. Actuellement, je suis en train de créer cinq paragraphes. Et si je clique sur le bouton générer Amon avec cinq paragraphes, il en générera cinq Mais dans ce cas, je n'en veux qu'un, donc je vais opter pour une génération d'Ipsum Et comme vous pouvez le voir, j'ai un paragraphe. Mais c'est un outil dans le. Je ne veux pas autant de mots, donc je vais simplement copier celui-ci. OK. Disons que je souhaite ajouter du texte parce que je n'en ai aucune idée. Que dois-je ajouter ici ? Donc, pour une question temporaire, je veux ajouter du texte. Dans ce cas, je vais utiliser des métiers à tisser. Mais comme vous pouvez le constater, le mot n'est pas figé, et notre projet n' est qu'une mince affaire. OK, laisse-moi entrer et me rétrécir comme ça. Donc, comme vous pouvez le constater, la taille de la police n'est pas géniale. Donc, dans ce cas, nous pouvons utiliser des styles de couleurs, nous l'avons appris dans la vidéo précédente. Il suffit donc de sélectionner le texte dans ce cas, celui-ci, le mm et le style du texte. Et je pense que je vais opter pour 16 Sits Cat. Permettez-moi d'ajouter cet ensemble au centre. C'est ainsi que fonctionne L Epson. Mais dans Figma, nous nous connectons, ce qui est très populaire et je dirais que c'est comme tout le monde. Tous utilisent ce plugin, du contenu réel, celui-ci, du contenu réel. Il suffit de cliquer dessus. Si vous n'avez pas cette entrée de connexion, vous pouvez simplement l'installer. Vous savez comment cela fonctionne Vous connaissez la maison, c'est un et vous pouvez y aller pour le tester. Il ajoutera le haut , il suffit de cliquer dessus. Finalement, nous avons eu son plag shder. Je sais que c'est un peu court, mais je pense que nous devons le signer pour l'agrandir, si vous voulez, en grande taille ou par personne, comme celui-ci Je pense que tu dois le signer. OK, donc ce plugin de contenu vous aide vraiment à tout, comme si vous voulez un numéro complet, un identifiant mL , euh, un numéro de téléphone américain, nom de l' entreprise et le vous de le nommer. Vous avez tous les types d'espaces réservés. C'est ce qu'il fait, il le génère automatiquement ou peut-être qu'il contient toutes ces données dans sa base de données. Ils le récupèrent donc d'ici et l'ajoutent à notre design. Nous pouvons également ajouter une icône d'images et dans Ajouter, laissez-moi voir. D'accord, nous pouvons également ajouter notre propre truc. OK, c'est super. C'est ainsi que fonctionne une bobine de contenu, et c'est ainsi que vous pouvez utiliser euh Epson à partir de cette bobine de contenu. Il s'agit d'une combinaison révolutionnaire qui rend votre processus de conception plus fluide et plus efficace. N'oubliez pas d'expliquer aux clients que le fait de supprimer du texte ancien est intentionnel, surtout s'ils ne sont pas familiers avec le concept Restez donc au courant des conseils et astuces de conception dans la prochaine vidéo. 45. Trucs et astuces de texte utiles dans Figma: bienvenue à mes étudiants. Dans cette vidéo, nous allons créer cette superbe page d'introduction de la carte à cliquer Vous vous demandez peut-être comment il a eu ce nœud iPhone DG sur cette page d'introduction Nous allons donc également voir toutes ces choses. Il existe certaines fonctionnalités de texte. Je ne vous les ai pas montrés lors des éditions précédentes, nous allons donc les apprendre également. Donc, avant de faire celui-ci, allons-y et découvrons certaines fonctionnalités du texte. D'accord, donc lorsque vous concevez objets comme Figma comme un parado, vous pourriez avoir un petit problème, comme si vous vouliez ajouter de l'espacement, augmenter ou diminuer un espacement Donc, dans ce cas, comment pouvez-vous le faire ? C'est donc simple, cliquez sur le texte comme ceci et accédez simplement à ce menu avancé. Dans ce paramètre de type, nous obtenons cette option, l'espacement des paragraphes Je sais donc que lorsque j'apprenais Figma, j'avais l'habitude de le faire, lorsque je voulais ajouter le pressage et l'espacement entre les parag, je le faisais, mais ce n'est pas Nous avons donc une fonctionnalité spécifique à ce qu'on appelle l'espacement des paragraphes Il suffit donc de le faire glisser vers la droite pour ajouter de l' espacement et de le faire glisser vers la gauche pour le pressage fiscal Donc dans ce cas, laissez-moi additionner comme, OK, donc voici comment vous faites face à un proto OK, supposons que vous ayez ce scénario comme si vous vouliez modifier la propriété du texte en même temps. Donc, dans ce cas, vous allez utiliser recherche universelle, comme Cutter plus barre oblique, et rechercher les propriétés du texte OK, sélectionnez toutes les propriétés du texte et tout le texte que vous utilisez dans ce design sera sélectionné . Et en même temps, vous souhaitez modifier les propriétés du texte à l'intérieur. Vous pouvez simplement le diviser et le transformer en quelque chose d'autre comme ça. Et vous pouvez voir qu'en même temps, en un seul clic, nous sommes en mesure de modifier les propriétés de notre texte. Vous pouvez augmenter la taille de la face avant, changer la face avant ou changer le type, comme un demi-volt supplémentaire en gras. Et aussi l' espacement et tout ça. Alors laisse-moi faire celui-ci parce que je n'en veux pas. D'accord. Et je suppose que vous pouvez voir les chiffres à puces, mais nous ne sommes pas habitués à une technologie, laissez-moi sélectionner celui-ci. Passons à l'ajout d'une section et nous pouvons simplement utiliser notre liste à puces comme ceci. Pas de liste, de liste à puces ou de liste de numéros comme celle-ci. D'accord, il y a donc une fonctionnalité que j'aime bien, mais je ne l'utilise pas beaucoup. Supposons que vous ayez une page blanche et que vous n'ayez qu'une seule option à ce sujet. Cliquez sur moi. Et vous souhaitez y ajouter un lien. Il suffit donc de sélectionner ceci. Et comme vous pouvez le voir Top Armo, nous avons cette option insérer un lien Et nous pouvons utiliser Control K pour cela et simplement cliquer dessus et ajouter n'importe quel lien. Dans ce cas, dans le précédent, nous avons vu du MSM, donc je vais ajouter WW LPS Et si je passe au prototype, je peux changer de couleur. Ainsi, l'utilisateur saura où je dois cliquer. OK, donc je vais le rendre rouge, le rendre rose. Et laissez-moi passer au prototype. D'accord. Et si je clique dessus, cela me redirigera vers l'écran car je veux rediriger vers le Laura Mipson Comme vous pouvez le constater, c' est ainsi que nous ajoutons des liens rediriger nos utilisateurs vers nos sites Web. D'accord. Il existe certaines fonctions de base, comme celles que vous pourriez utiliser si vous connaissez un peu Google Docs ou tout autre logiciel de gestion de documents de base. Supposons que vous vouliez fabriquer ce boulon. Actuellement, c'est en gras, mais supposons que ce n' est pas en gras, c'est normal. Dans ce cas, vous pouvez utiliser le contrôle B pour le verrouiller. Si vous souhaitez annuler cela, appuyez à nouveau sur le contrôle B, il retrouvera son état normal. Si vous souhaitez mettre en italique, vous pouvez appuyer sur la touche Ctrl pour l'italique Et si vous voulez annuler cela, contrôlez à nouveau comme ceci. Une autre chose est que si vous souhaitez ajouter du soulignement, utilisez le contrôle. Cela ajoutera du soulignement. Comme vous pouvez le voir, il a été ajouté sous ce texte. Laissez-moi prendre le contrôle. Je sais que vous pouvez le faire dans cette fonctionnalité, comme dans cette section Je suis. Oh, ici. Vous pouvez également souligner cette réserve. Mais si vous connaissez le raccourci, ce sera facile. Tu n'es pas obligée d'aller ici pour faire ça. Et il existe un autre raccourci, par exemple, si vous voulez agrandir cette police. Dans ce cas, vous pouvez utiliser ce menu mais des raccourcis. Vous pouvez utiliser la commande shift et utiliser le bouton supérieur et le bouton inférieur à de votre clavier. Il se trouve à côté de Quash Mark , et vous pouvez maintenir la touche Ctrl Shift enfoncée. Super pteror et moins qu'un bouton pour moins que ça Ce sont donc des fonctionnalités de base que nous utilisons pour rendre notre tâche efficace et facile. Alors laissez-moi supprimer celui-ci et créons notre interface utilisateur. Alors permettez-moi de supprimer ceci. Nous avons actuellement des critiques, et je souhaite concevoir notre page d'introduction OK, donc pour le moment, je vais d'abord choisir. Ce sera notre couleur principale. Je vais donc choisir une couleur primaire. Donc dans ce cas, ce sera celui-ci, et ce sera notre logo ou notre click cut. Je vais l'ajouter au centre, et je vais faire un rond, pas un rond sur le cercle. L et laissez Q Aimez ceci ou laissez-moi l'ajouter dans la grille pour que je sache si c' est parfait ou non. OK, comme ça. Il s'insère dans la grille et il se peut qu' il se recentre, laissez-moi le renvoyer. M et notre carte, et laissez-moi la remplacer parce que c'est notre couleur secondaire. OK, couleur secondaire. D'accord, donc notre page est conçue pour que la phrase soit totalement conçue. Il suffit donc d'ajouter du texte, alors passons au texte. Et quel est son nom ? Cliquez sur le panier, laissez-moi agrandir. Alors je me disais que huit, ce serait parfait. Comme ça. OK, c'est donc notre design, mais je sais que c'est un peu dégressif, donc ce que nous pouvons faire, c'est le sélectionner. Permettez-moi de le déplacer vers le haut. Maintenant, ça a l'air génial. Nous allons regrouper celui-ci ou nous pouvons l'encadrer, laissez-moi le faire encadrer. Alors, où elle se trouve, et je peux dire que c'est bas. OK, c'est donc notre page d'accueil, et j'utilise une police de caractères. Mono Straight. D'accord. Je ne suis pas en mesure de l'accoler, mais c'est la police et actuellement le bot supplémentaire et la taille 40 Ce sera donc notre tropag si vous voulez utiliser une forme différente, je suis totalement d'accord avec elle parce que ce sera égal , donc utilisez une forme différente, un logo différent ou une couleur différente peut-être OK, alors permettez-moi de conclure cette vidéo. N'oubliez donc pas que ce sont les fonctionnalités que j'utilise fréquemment, mais je n'hésite pas à explorer toutes les options disponibles. but du design est de trouver le juste équilibre entre fonctionnalité et créativité N'hésitez pas à expérimenter et découvrir ce qui vous convient le mieux. Donc, stade pour plus de design intérieur dans la prochaine vidéo. 46. Comment ajouter des polices dans Figma et comment ajouter des polices manquantes dans Figma: Bienvenue sur les mots de la vidéo précédente, j'ai oublié quelque chose. Par exemple, je vous l'ai dit, nous verrons comment nous pouvons ajouter cette encoche à notre design. Mais j'ai oublié de te montrer. Mais quand j'ai réenregistré cette vidéo, j' ai découvert un problème, à savoir que je n'ai pas les polices de caractères dans mon système. Dans cette vidéo, nous allons voir comment trouver une police manquante ou comment la corriger. Donc, tout d'abord, j'ai cette police comme SP Display, j'ai cette police dans mon système. Je n'ai donc aucune erreur avec celui-ci. Mais comme vous pouvez le voir, j' ai SP Display Pro, mais pour le moment, ce design nécessitait de l'italique gulaire, mais je n'ai que du medium ou Donc, si je choisis Bolt, ça marchera. Mais pour cela, je dois télécharger une police de caractères. Je suis donc allée sur Internet et j'ai découvert ce site Web appelé Pixel Berg, contenait cette famille de formulaires spécifique appelée SEP. Il appartient à Apple. Apple utilise beaucoup ce formulaire. Si vous avez un iPhone, vous avez peut-être déjà vu celui-ci. J'ai donc téléchargé celui-ci, et laissez-moi vous montrer, ainsi que mon gestionnaire de fichiers. OK, c'est donc la famille de formulaires, et je dois le télécharger Oh, désolé, je dois l'installer un par un. Il suffit de double-cliquer dessus, et il s'installera sur lui-même. Donc, si je les installe tous, j'en ai installé quelques-uns, mais pour que cela fonctionne, je dois redémarrer ce logiciel. Permettez-moi donc de redémarrer notre Figma. Parce que lorsque vous installez quelque chose comme Fs, vous devez redémarrer le logiciel parce que ce programme est bien connu, vous l'avez. Désolé, c'est faux. Donc, comme vous pouvez le voir dans le précédent, c'était une erreur, mais maintenant notre ft est installé. Cela ne nous donne donc pas d'erreur, mais actuellement ce n' est pas le cas, et nous avons tout cela régulièrement, nous devons donc en installer une normale. Mais supposons que vous ne souhaitiez télécharger aucune police. Vous voulez simplement avoir une police à cet endroit. Donc dans ce cas, ce que vous pouvez faire, c'est aller à, disons, « Oh ici ». Et vous pouvez choisir toutes les autres polices comme celles présentes sur votre photo. Dans ce cas, choisissons Prata. Et voici la police Prata and replace. Il est donc remplacé maintenant. Je ne sais pas s'il a été remplacé , mais il est remplacé. Alors laisse-moi le refaire. OK. Laisse-moi entrer. OK. Actuellement, vous pouvez voir que cela nous donne une erreur, mais changeons-le en autre chose. Cela ne me donne pas d'erreur. Souvenez-vous d'une chose lorsque vous copiez celui-ci, actuellement, aussi profond. OK, cette partie. Ça a changé ici. Laisse-moi changer, choisir autre chose. OK, alors choisis celui-ci. J'allais donc dire ceci. Et si je le copie et que je l'utilise dans mon projet, laissez-moi le faire d'abord, copier et vous verrez que nous avons des erreurs. C'est ce que nous ne voulons donc pas. Pour cela, nous devons installer la police ou la remplacer par autre chose. OK, passons maintenant à notre design et ajoutons ce non à notre design. Mais je sais que cela me guérira d'une erreur. Mais je vais le remplacer par autre chose. OK, nous l'avons donc ajouté ici. OK, ça va maintenant. Mais comme vous pouvez le constater, nous avons eu une erreur dans notre conception. Je vais donc le remplacer par la police S en tant qu'écran professionnel, que j'ai installée sur mon système. Remplacez donc la police. Parce que, comme vous pouvez le constater, il n'apporte aucune modification. Ça a exactement la même apparence. Permettez-moi de faire de même avec 32. OK. Faisons de même avec cette police de remplacement d'écran One S Pro. OK, nous n'avons donc aucune erreur pour le moment. Comme vous pouvez le voir, cela passe en italique. Je ne sais pas comment, mais en mode italique. Je pense que nous pouvons le changer, mais qu'il en soit ainsi pour le moment. Voici donc comment remplacer vos polices. N'oubliez pas que la touche de flexibilité vous permet de décider si vous souhaitez la police d'origine télécharger ou remplacer par autre chose. Ça fait mal au design. Et c'est tout, mes amis. Vous êtes maintenant équipé de la gestion des polices manquantes comme R. Si vous vous blessez dans cette vidéo, merci de me le faire savoir et de vous voir dans la prochaine 47. Projet de cours 07 Style de texte et de texte: Aujourd'hui, nous avons un projet passionnant qui vous attend dans Figma Suivez donc cette étape simple pour mettre en valeur votre créativité et vos compétences en design. La première étape est le textile. Tout d'abord, établissons les bases du design par rapport au textile. Choisissez deux forces qui correspondent au thème de votre projet. Créez maintenant un style pour le titre et le corps du texte dans Figma. La cohérence est essentielle à cet égard. Assurez-vous donc que votre choix correspond à l'esthétique que vous recherchez. Maintenant, la deuxième est la page d'introduction. Alors laissez-moi vous montrer Figma. OK, vous devez donc créer un système de design comme celui-ci et ensuite, notre page d'introduction comme celle-ci Voici donc ma page d'introduction. Il est maintenant temps de vous lancer dans la conception d'un processus créatif ou page d' introduction en utilisant le textile que vous venez d' apprendre et de configurer N'hésitez pas à laisser libre cours à votre créativité et à ce qu'ils expérimentent différentes couleurs, polices et mises en page. Jusqu'à ce que vous trouviez le design qui vous parle. N'oubliez pas d' ajouter une police et un logo qui complètent votre vision globale. Et une fois que vous êtes satisfait de votre page d'introduction, immortalisons ce moment Prenez une capture d'écran de votre chef-d'œuvre assurant qu'il met en valeur le textile que vous avez sélectionné. Cet instantané sera une représentation visuelle de votre design, alors faites en sorte qu'il compte. Vous devez donc prendre une capture d'écran de votre système textile comme celle-ci et de votre page d'introduction Et je sais que tu es prête à partager ta création avec le monde entier. Passez donc à la projection et téléchargez-y votre capture d'écran. C'est donc votre chance de briller. Alors prenez un moment, appréciez votre travail acharné et votre créativité. Et vous pouvez également le partager sur vos réseaux sociaux comme Instagram Stories ou Twitter, ainsi que sur Linkin, et vous pouvez également me taguer là-bas parce que je veux voir ces créations épiques Voilà un projet Figma rapide et amusant. N'oubliez pas que les clés d'un bon design sont la cohérence et la propreté. Organisation méticuleuse de la vie du texte et élément clé du design CZ, chance en bois et design heureux 48. Les bases de l'outil Figma Pen et réseaux vectoriels: Étudiants d'Amazon, bienvenue dans un autre épisode. Aujourd'hui, nous plongeons dans l'univers de la FBMA pour dévoiler les mystères des puissants stylos et crayons Restez dans les parages et je vais vous montrer comment épingler un outil et un crayon comme un magicien. Alors, tu es prêt ? Alors, allons-y. Commençons par comprendre ce qu' est l'outil crayon et l'outil épingle. Le premier est un contrôle précis. Il est inactif pour créer des formes précises avec une ligne droite et une courbe lisse, y compris des formes conflictuelles telles que logos, des icônes et des illustrations. Il offre également de la flexibilité. L'outil à épingles est très flexible. Il propose des commandes Amos telles que des points d'arête, ajout de poignées et la manipulation de la trajectoire pour plus de Édition, et ce n'est pas destructif. Les modifications apportées à un point du tracé n'affectent pas l'ensemble de la forme, ce qui permet de l'ajuster facilement. Passons maintenant à l'outil crayon. C'est rapide et gratuit. Parfait pour esquisser un contour approximatif en D aussi rapidement, en particulier pour une forme d' organiste ou Il est facile à utiliser pour les débutants grâce à son dessin intuitif à main levée similaire au crayon traditionnel. Je sais que le résultat est une forme moins précise par rapport au stylo, mais cela peut être utile pour capturer l'idée initiale. Passons maintenant à l'outil stylo et créons ces structures étranges. Permettez-moi donc de le supprimer d'abord et de le supprimer de mon écran car je ne trouve pas Okay. Pour cela, nous pouvons utiliser cet outil d'épingle, et Short est juste P.P pour créer un outil d'épingle pour obtenir un outil d'épingle. Nous voulons créer quelque chose avec Pinto. Cliquez sur l'écran comme ceci, et nous avons créé quelque chose à partir de maintenant en utilisant Pintol Et comme vous pouvez le constater, nous obtenons ces points et nous pouvons les mériter Mais il y a un problème. Comme si je déplaçais mon curseur sur l'écran et qu'une chaîne y était attachée. Si je sers ailleurs, cela créerait un nœud. Donc je ne veux pas que si je veux me débarrasser de cette chaîne de nœuds, je peux simplement appuyer sur Escape sur mon clavier et elle disparaîtra Maintenant, permettez-moi de vous montrer une chose, comme si je suis actuellement dans le dossier passager, et si je déplace mon curseur de cette façon, comme vous pouvez le voir, il y a un bouton plus sous le stylet. Et si je clique n'importe où dessus, cela ajoute un point sur notre nœud. Je peux utiliser ce point pour y ajouter une courbe ou apporter des modifications. J'aimerais que vous le fassiez, mais avant cela, créons quelques changements. OK, disons que je veux créer un rectangle. Donc dans ce cas, je peux utiliser comme ça. Et désolé, ce n'est pas un rectangle. Il faut qu'il y en ait quatre. OK, trois et quatre. Nous sommes maintenant un rectangle. Mais voulons créer un rectangle précis. Dans ce cas, vous pouvez maintenir la touche Maj enfoncée et créer le point six. Et cela créera un rectangle précis parfait pour vous comme celui-ci. Et il y a une chose. Vous pouvez également y ajouter du remplissage, exemple si j'ajoute du fil, comme vous pouvez le voir, je peux changer la couleur. Je peux le faire en dégradé ou quelque chose comme ça. Je peux aussi ajouter une image et tout ça. C'est donc facile. Je sais que l' utilisation du pintol ne sert à rien pour créer une forme Mais imaginons créer une banque d'icônes complexe, si vous concevez des éléments complexes. Dans ce cas, vous avez un pistolet. Mais j'ai rarement vu quelqu'un utiliser le pentel dans le design. Passons maintenant à l'étape suivante. C'est-à-dire, disons que vous avez ces deux lignes comme ça. Et oui, nous pouvons y ajouter des courbes. Je vais donc vous montrer comment ajouter des courbes. Je peux juste l'ajouter comme ça. Permettez-moi également de l'ajouter ici. OK. Maintenant, il y a une chose que je veux te montrer. Supposons que vous souhaitiez rejoindre ce point à ce stade ou ce point à ce stade. Donc, dans ce cas, vous pouvez utiliser l'outil crayon, mais il existe un seul raccourci. Vous pouvez simplement sélectionner ce point et utiliser le contrôle J. Et il se joindra. Les deux. Et c'est facile, comme ça. Comme vous pouvez le constater, il a également rempli la couleur. Et il y a autre chose que tu peux faire. Je sais qu'il y a beaucoup de poissons avec une épingle, mais selon vous, c'est vraiment un outil. Permettez-moi de joindre cela à ces points. Maintenant, les deux sont séparés, et si j'utilise cet outil, un seau à stylos, si je clique dessus, je sais que la couleur disparaît, mais nous pouvons y ajouter un tas de couleurs Il suffit donc de le sélectionner. Et si je choisis quelque chose comme le rose. Comme vous pouvez le constater, nous pouvons ajouter des couleurs dans notre champ et les différencier au sein d'une même forme. OK, maintenant passons à la courbe. Comme il y a quelques minutes, nous avons ajouté quelques points sur ce nœud. Alors maintenant j'ai sélectionné cette courbe courbée et maintenant je peux simplement la faire comme ça Et il évacue, il crée des courbes douces comme ça. Comme vous pouvez le voir, nous avons créé quelques vagues ici, et dans la section design, nous avons quelques options : angle du miroir, fusion et miroir sans fusion miragle et angle du miroir avec une longueur La plupart du temps, c'est en angle et en longueur du miroir. Et laissez-moi vous montrer comment cela fonctionne. J'ai donc celui-ci, et actuellement nous sommes au bentol. Si je le déplace comme ça, comme vous pouvez le voir, nous avons deux poignées ici. Donc, si je déplace quelque chose ici, à l'autre bout, la même chose se produira, comme si cela se produirait également. Lune. Il ne fait que reproduire la deuxième poignée du miroir OK, donc actuellement, c'est l'angle et la longueur du miroir, et si je choisis l'angle du miroir, et si je clique sur ce point. Comme vous pouvez le voir, j' ai un seul identifiant. Maintenant, je peux juste ajuster un angle. n'y a pas de deuxième poignée et elle ne se réplique pas Si je veux ajuster un angle, je peux le faire comme ça. OK, maintenant, passons à l'étape suivante. Supposons que vous souhaitiez supprimer quelque chose comme vous vouliez supprimer ce nœud. OK, je choisis l'angle du rétroviseur. Laissez-moi donc choisir de ne pas mettre en miroir. Si je choisis celui-ci, je ne sais pas ce que c'est. OK. Je suis actuellement à Côme, c'est pourquoi je le sélectionne et j'en fais une crique. Laissez-moi sélectionner l'outil de sélection, et si je sélectionne les points normaux comme celui-ci, et si je les supprime, comme vous pouvez le voir, le champ Go est supprimé, même que les deux côtés sont également supprimés. Mais disons que je souhaite supprimer uniquement ce point, mais le remplissage doit être intact. Dans ce cas, je peux utiliser Shift pour sélectionner mon point comme celui-ci, je dois supprimer, et je vais maintenir la touche Maj enfoncée et supprimer. Comme vous pouvez le constater, l'objet est intact et le remplissage est également intact. Donc, ce genre de chose étrange que nous pouvons faire avec un stylo. Et il y a aussi un outil à crayons. Je ne crois pas. C'est qui ? Mais quand j'étais à la maternelle, nous avions l'habitude de dessiner des dessins comme celui-ci. Nous avions l'habitude de dessiner des montagnes comme celle-ci, trois montagnes, et nous avions l'habitude de mettre un peu de soleil ici comme ça. OK, je sais que mon dessin est vraiment bizarre. Pour quelle raison nous avions l'habitude de dessiner des « oui » comme ça ? OK. Il pleure. Et il doit y avoir une maison comme celle-ci. Ça fait mal, je suppose, mais. OK, c'est vraiment petit. Et je ne sais pas, pour une raison, il y a une rivière. Traversons. Nous devons donc créer des designs comme celui-ci. Voici donc comment vous pouvez utiliser un crayon. D'accord, voici comment vous pouvez utiliser l'outil crayon et l'outil stylo. Mais vous vous demandez peut-être quand nous devrions utiliser un stylo ou un crayon. Tout d'abord, passons au pintol. Supposons que vous souhaitiez avoir besoin de formes nettes et précises avec des lignes droites et des courbes lisses, utilisez l'outil à épingle. Et vous pouvez également créer des formes complexes telles que des logos, des icônes ou des illustrations, un outil d'épingle. De plus, vous souhaitez un contrôle précis ou points et courbes individuels à l'aide d'un outil d'épingle. Parlons maintenant de l'outil à crayons. Si vous souhaitez esquisser une idée ou créer un contour, utilisez un outil crayon, vous voulez dessiner quelque chose organique ou un contour gustatif, utilisez un outil crayon. Si vous êtes un débutant et que vous voulez juste avoir un téléphone comme celui-ci, vous voulez créer cette image, utilisez l'outil crayon. Donc, mon ami, c'est l' emballage de cette vidéo. Si vous l'avez trouvée pleine, merci de me le faire savoir. Jusqu'à l'heure du déjeuner, Happe design. Et n'oubliez pas que vous êtes sélectionné pour un pixel, au cas où. 49. Pourquoi les icônes Apple sont-elles différentes (lissage des angles): Chefs et escouade, nous avons l'impression que les choses sont trop nettes, comme les icônes de votre téléphone. Ça te poignarde les yeux. Et vous voyez, il s'est heurté à un mur. Eh bien, prenez une couverture pixelisée et prenez café, car nous sommes sur le point de plonger dans le monde du lissage des coins Fipma est une arme secrète pour prendre des virages. Je me rappelle avoir utilisé Android pendant des décennies, icônes étaient plates, carrées, parfois avec des bords arrondis, mais la plupart du temps, juste une boîte, puis boum, mon ami et son tout nouvel iPhone 15 P max. Je connais Lucky Duck, et je suis fasciné par les applications Soudain, quelque chose me frappe comme un mentor pixélisé. Les icônes sont à la fois arrondies et carrées. Et mon cerveau de designer UX me met en marche ? C'est quoi cette sorcellerie ? Plus tard, après notre pause, j'ai craqué le charbon. Cette taxe magique s'appelle Corner Smoothing Figma. Cela vous amène à prendre ces petits coins et à les transformer en coussins doux C'est comme si vous gardiez votre interface utilisateur ouverte de l'intérieur vers l'extérieur. Bon, maintenant, découvrons comment créer des bords arrondis. Donc, avant cela, il y a quelque chose que j'ai oublié de vous dire dans la dernière vidéo. Vous souvenez-vous que nous avons créé ce chef-d'œuvre comme Picasso ? Donc, si vous voulez maîtriser l'outil du stylo, si vous vous intéressez sérieusement à YuxFiel ou à la conception graphique, alors il y a un site Web, le jeu Bizer, quelque chose D'accord, je ne suis pas capable de le prononcer, mais si tu le sais, fais-le-moi savoir. Donc, sur ce site Web, vous pouvez vous entraîner à utiliser votre stylo de cette manière. Vous pouvez vous entraîner à utiliser votre stylo de cette manière et vous pourrez devenir maître. Voici donc comment vous pouvez vous entraîner à utiliser votre stylo. Il s'agit donc simplement d'un bref résumé ou d'un conseil sur cette vidéo. Passons maintenant au lissage des coins. OK, alors laissez-moi vous raconter ce chef-d'œuvre. Je sais que cela semble très bon, mais nous devons relier celui-ci, en particulier celui-ci. Bien, dessinons quelques rectangles pour nos icônes, et laissez-moi nous dessiner les uns OK. Laissez-moi le copier. Nous connaîtrons donc la différence. Disons que c'est notre icône, et laissez-moi vous donner des bords arrondis jusqu'à dix. Et comme vous pouvez le voir, il est arrondi. La plupart des utilisateurs savent que c'est à cela que ressemble l'icône dans Android. Mais maintenant, si je donne cette rondeur, dix, et si je passe à ces coins indépendants, il y a plus d'options pour lisser les coins Et si je fais le suivi à 200 %, comme vous pouvez le constater, c' est un peu différent Je sais que nous ne le différencions pas actuellement, mais si je zoome un peu, car il y a une différence, ce coin est trop net et cela crée une sorte d'effet de bulle ou d' effet rond Alors laissez-moi recommencer, si je passe dans un coin lisse, et si je le fais, remarquez simplement les coins. Comme vous pouvez le constater, il devient rond. J'espère que vous pouvez le voir. Permettez-moi de le résumer encore une fois. Actuellement 100 zéro cent zéro cent. OK, c'est ainsi que fonctionne Cormoing, et c'est le virage normal Je sais que c'est très joli, mais si j'augmente le 15, il paraîtra plus cool. Si j'en fais 15. Par rapport à cela, cela semble mieux. Le lissage des coins est un super nœud souhaité. Cela vous permet de me sentir plus accessible, sympathique et moderne Imaginez un bouton qui vous invite à cliquer. Au lieu d'un site qui crie, ne me touchez pas ou d'un site Web avec petite transition qui ressemble une orthèse douce, pas à un ouragan Alors allez-y, expérimentez en douceur, enfreignez les règles et découvrez quelle sorte de magie vous pouvez créer pour lisser les coins N'oubliez pas que le design consiste à faire en sorte que les choses se sentent bien, et qu'avec le lissage des coins, je serai la personne la plus chaude et la plus floue Si vous voulez en savoir plus sur le lissage des coins, Figma est cet article de blog, vous pouvez consulter ce site Web, je vais probablement créer un lien pour que vous puissiez le parcourir et lire tous les articles, pourquoi c'est comme ça Et il existe une formule. Il existe une formule mathématique. Comme quand j'étais à l'université, les mathématiques étaient l'une de mes matières préférées. Et comme si je connaissais ces dérivés et tout ça. Je dois les résoudre très immédiatement, mais maintenant je les regarde, ils me semblent très étranges. Si vous voulez en savoir plus sur cet effet d' angle, l'effet de lissage des coins, consultez cet article, lisez-le Tout tourne donc autour du lissage des coins dans Figma. C'est donc un port et je vous verrai dans le prochain. 50. Opérations booléennes de Figma (Union,Soustraire,Intersecter,Exclure): Hcretmans Dans ce titre, nous nous intéressons aux opérations de Boleon dans Figma Bien que le terme puisse sembler un peu parfait à vendre, ces opérations sont des moyens essentiels pour combiner ou manipuler des formes Considérez-les comme une boîte à outils de conception excessive, vous permettant de créer des icônes interactives ou des composants d'interface utilisateur pour illustrer ces icônes de refonte comme celle-ci à l'aide des opérations comme celle-ci à l'aide Il existe plusieurs opérations booléennes. Si je sélectionne ces deux options, comme vous pouvez le voir dans le menu de la barre supérieure, nous obtenons cette option. Mais si j'en sélectionne une, nous n'aurons pas cette option. Pour qu'une opération booléenne fonctionne, nous devons avoir au moins deux formes Donc, actuellement, j'ai sélectionné ces deux formes, et comme vous pouvez le voir, nous avons obtenu cette opération. La poste, c'est le syndicat. Après cela, nous soustrayons après cela, nous croisons et Passons donc à l'union. Disons donc que j'ai deux formes, comme un rectangle. Permettez-moi d'abord de supprimer celui-ci. OK, alors laisse-moi prendre quelques formes. Disons que nous avons un rectangle un rond, lèvres comme celle-ci, et je veux les fusionner. Donc, dans ce cas, le syndicat va fonctionner. Permettez-moi donc de vous dire ce qu'est le syndicat. Dans le spaldum, l'union est l'opération qui combine la forme en une seule unité Si vous voulez en savoir plus sur les unités, c'est ici. Union combine la forme sélectionnée en un groupe boolin. Si les objets se chevauchent, le chemin extérieur de la nouvelle forme se compose du chemin comparans ops sublis moins tout segment Donc, si je l'unit, comme vous pouvez le voir, cette forme est une union coupée. tout segment superposé, le trait serait appliqué à ce tracé extérieur, en ignorant tout segment de tracé qui se chevauche. Dans ce cas, c' est ainsi que fonctionne le syndicat. Si vous indiquez vos formes et que vous cliquez simplement sur ce bouton, elles passeront automatiquement en mode union, et ce sera notre union. Dans un langage simple et uni, l'image finale est créée en combinant deux images individuelles comme celle-ci ou deux formes. Regardons maintenant la soustraction. Permettez-moi donc de prendre deux formes qui seront des ellipses. OK. Laisse-moi t'expliquer celui-ci. Maintenant, parlons et soustrayons. Cette opération permet de soustraire la forme du haut de celle du dessous Actuellement, celui-ci est au top, je suppose. OK, celui-ci est en haut, et si je les sélectionne tous les deux, et si je sélectionne Soustraire. Comme vous pouvez le voir, le premier élément est soustrait. soustraction correspond à l'union supérieure opposée, soustraction supprime la surface de la forme ou crée des formes à partir de la forme de base Seule la couche inférieure est solide et la goutte restante en est soustraite C'est ainsi que fonctionne la soustraction. Passons maintenant à l'intersection. Donc, pour cela, prenons une autre forme, prenons une ellipse, et laissez-moi prendre un polygone OK, comme ça. Ce que fait Intersect, c'est qu'il conserve la zone de chevauchement entre les formes Alors laissez-moi prendre ceci et laissez-moi croiser les deux, et choisissons Intersect C'est vraiment cool, ça ressemble à une forme de diamant moderne . Les intersections créent donc un groupe mixte. Ces formes se composent uniquement de la partie superposée de ses tueurs OK, c'est ainsi que fonctionne Intersect. Passons maintenant à l'exclusion. Alors laisse-moi prendre les lèvres, prenons une étoile. OK, nous avons donc les deux et ajoutons un extrait. Je place donc cela au centre. Faisons une entaille sur les deux. Donc, c'est ce que fait Exclude. Cette opération crée des trous où les formes se chevauchent. Exclure est le contraire de l'intersection. Exclure affiche uniquement les zones de sa sous-couche qui ne se chevauchent pas. Donc, si je les dentelé tous les deux et si je les exclus, comme vous pouvez le voir, cela crée un trou à l'intérieur du cercle Et nous avons cette icône vraiment cool. OK, on dirait le logo de Captain America. En combinant cette opération, nous créons une icône complexe avec des composants individuels. Chaque élément restant modifiable. Vous pouvez toujours plonger dans les détails et modifier des parties spécifiques de chaque design. Donc dans ce cas, si je veux déplacer ceci, je peux juste faire comme ça. Je peux créer Hop Moon comme ça ou je peux le déplacer et je peux le modifier à tout moment. OK, alors voici la seule tâche qui vous attend. Par exemple, je veux que tu crées ceci et cette étoile Have, ainsi que celle-ci, ce symbole. Mettez la vidéo en pause et faites-le. Et je vais vous montrer comment faire. Mais d'abord, mettez la vidéo en pause et faites-le. OK, j'espère que vous l'avez fait, alors laissez-moi créer cet effet en utilisant ces cercles. Nous allons avoir besoin de six cercles dans ce cas. OK, donc j'ai placé le cercle comme ça et je me suis laissé prendre un autre cercle qui sera placé au-dessus de celui-ci au centre. OK, alors laisse-moi tous les sélectionner. Et je vais choisir Exclure. Comme vous pouvez le voir, j'ai créé cette incroyable forme, je ne sais pas comment elle s'appelle, mais elle a l'air vraiment dingue. Voici une autre chose, disons que vous voulez voir le contour de la structure. Dans ce cas, nous avons un tas de formes dont nous avons créé une opération simple. Supposons que vous vouliez voir les grandes lignes. Dans ce cas, vous pouvez utiliser la touche Shift pour voir le contour. Il vous montrera quel composant contient, combien de formes il lors de la conception de ces icônes de cette manière. Lors de sa création, nous avons six à sept cercles. Dans ce cas, nous avons une étoile ainsi que ce rectangle, et dans celui-ci nous avons trois cercles. Les forts sont en ellipse, ce n'est pas un cercle parfait. Après cela, nous avons deux cercles à l'intérieur. Pareil pour celui-ci, pareil pour celui-ci. C'est ainsi que nous pouvons voir les grandes lignes. Sortons de ça. Vous pouvez appuyer sur Shaped pour vous en sortir. J'espère que vous avez créé cette demi-forme. C'est très simple. Passez simplement aux formes. Nous avons une étoile ici. Dessine une étoile et prends un rectangle. Placez-le, vendez-les tous les deux et utilisez-les à Intersect. C'est ainsi que vous créez des demi-étoiles dans Pigma. Celui-ci est très simple. Je sais que beaucoup de gens ont dû le faire, mais laissez-moi vous montrer. Tout d'abord, nous avons nos lèvres. Laisse-moi dessiner un cirque. Au cirque d'aller ici, et l'un d'eux sera petit comme ça. Permettez-moi de le placer au centre et de l'empêcher. Comme vous pouvez le constater, nous avons créé ce symbole qui ressemble à un œil. J'espère que vous serez en mesure de vous acquitter de cette tâche simple. N'oubliez donc pas que les opérations de mise en balle sont une fonctionnalité puissante, un outil de recherche de pus ou de création de formes destiné à l'illustration Ils offrent de la flexibilité en créant un design intégré, tout en maintenant l'irritabilité Alors restez créatifs et je vous retrouverai dans la prochaine vidéo. 51. Le duo de puissance de Figma quand utiliser l'union et quand aplatir: Dans cet œuf, nous explorons la différence entre union et aplatissement Donc, si je le sélectionne et si je vais dans ce menu de fonctionnement de Bulin Comme vous pouvez le voir, nous avons obtenu cette option, la sélection aplatie. Alors c'est quoi ça ? Et ce qu'est la sélection syndicale et sélection aplatie vont faire la différence dans cette vidéo Nous savons donc ce qu'est l'union. L'union est une opération non destructive qui combine les formes tout en répondant à leur irritabilité individuelle Par exemple, comme vous pouvez le voir, cette forme que nous avons créée, si je double-clique dessus, comme vous pouvez le voir, nous pouvons modifier cette forme. Nous utilisons donc l'union pour fusionner une forme variable dans le design So. C'est excellent pour garder notre design flexible et modifiable. Mais laissez-moi vous parler de l'aplatissement. opération Flatten Distruct permet de regrouper plusieurs navires en une seule Nous avons donc créé « laissez-moi créer une chose ici ». Vous remarquerez donc la différence. Laisse-moi faire comme ça. Si je sélectionne les deux, et si je choisis la section d' intersection, comme vous pouvez le voir, nous obtenons cette forme Et si je passe en mode contour, comme vous pouvez le voir, il y a deux formes. Cela est visible en mode plan. Mais si je sélectionne les deux et si je choisis la sélection plate Comme vous pouvez le dire, il n'y a rien. Nous avons juste cette forme. C'est donc la différence entre union et flatterie. Il est donc utile pour simplifier la conception en cas de conflit ou lorsque vous souhaitez exporter un plan en tant qu'unité unique Je suis donc syndiquée, nous avons pu exporter notre design, mais c'était un peu chaotique. Nous pouvons également voir la forme des autres, mais avec un aplatissement, nous ne pouvons voir qu'une seule unité Supposons que si un design conteste les détails interactifs et que vous souhaitez le rationaliser pour une explosion finale, l' aplatir est toujours la meilleure option Il s'agit d'une union et d'un aplatissement. C'est ainsi que nous utilisons Aplatten. Permettez-moi donc de vous dire quand nous devrions utiliser l'union et où devons-nous utiliser l'aplatissement Utilisez l'union lorsque vous souhaitez combiner des formes tout en conservant la possibilité de les modifier individuellement. C'est particulièrement pratique créer un design complexe où chaque élément doit être peaufiné et utilisé pour l'aplatir comme ça, lorsque vous voulez que je le forme en une seule unité, ce qui facilite l'exploitation ou la simplification est particulièrement utile lorsque vous n' avez pas besoin de modifier des composants individuels séparément. Tout tourne donc autour de N L Aplatten. Comprendre la différence entre N N flatten vous permet de mieux contrôler votre flux de travail de conception, que vous préfériez une flexibilité non destructive ou la simplicité d'une conception aplatie, spécifiques de votre Donc, comme je fais toujours preuve de créativité, je vous retrouverai dans la prochaine vidéo. 52. Projet de cours 8 de la page d'accueil et du menu de burgur: Pour les étudiants, c'est le temps du projet. N'oubliez pas que nous étions une base pixélisée. Comment avons-nous pu concevoir une page d'accueil décente ? Eh bien, devinez ce que nous aimons. Il est maintenant temps de mettre notre talent de figma à votre service et de créer quelque chose de vraiment génial : votre propre page d'accueil et ce menu de hamburgers OK, vous devez donc concevoir cette page d'accueil. Vous avez appris le style des couleurs, le textile, vous avez également conçu le système de couleurs D, ainsi que le système de texte. Utilisez ces connaissances et créez cette page d'accueil. Et des choix créés, comme si vous voulez utiliser des couleurs différentes, utilisez-les. Si vous voulez utiliser un autre pot, utilisez-le. J'ai également fourni toutes les icônes du fichier de projet, vous pouvez donc simplement le parcourir et l'utiliser dans votre conception. Si vous souhaitez utiliser d'autres icônes ou plug-ins, utilisez-les également, et il en va de même pour un menu de hamburgers. Il contient une instruction que vous devez suivre pour créer un projet. Suivez donc ces instructions et créez cette page d'accueil et ce menu de hamburgers. Auparavant, nous avons découvert le fonctionnement des bulons ainsi que les icônes aplaties Vous devez donc créer ces formes géométriques, des icônes vraiment apicales, prendre une petite capture d'écran et les soumettre à Je suppose que tu sais déjà comment faire. Alors, étudiants, vous l'avez compris, utilisez vos talents de figma, associez-les à votre courage créatif et laissez votre chef-d'œuvre de design prendre associez-les à votre courage créatif et vie N'oubliez donc pas de capturer ces page d'accueil, burgermenu et taureau lors de la création pour les soumettre N'oubliez pas qu'il n'y a pas d'erreur de conception, seulement un heureux hasard. Alors allez-y, explorez, expérimentez et montrez au monde entier votre magie Figma Et si vous souhaitez partager ce projet sur vos réseaux sociaux, vous pouvez également le faire, et vous pouvez me taguer là-bas. N'hésitez donc pas à l'adapter davantage et à y ajouter votre touche personnelle. Alors bonne chance avec ton projet Figma 8. 53. Comment utiliser la sélection intelligente et le rangement dans Figma: Loco extras, c'est dans cette optique que nous explorons la puissante fonctionnalité de sélection liée à Mar dans Figma Préparez-vous donc à rationaliser votre processus de conception et à améliorer votre efficacité grâce à ces outils incroyables Nous allons donc également concevoir notre première page d'accueil. Vous vous demandez peut-être : qu' est-ce qui est bloqué ? Ted up est votre outil de prédilection lorsque vous souhaitez organiser et organiser soigneusement les éléments sélectionnés OK, nous avons donc notre page d'accueil vide. Nous voulons maintenant concevoir certaines catégories. Laisse-moi donc dessiner quelques cercles. Et je pensais à A six parce que pendant que je faisais des tests, cela correspondait parfaitement à ces colonnes, dis-je. Voilà, vous savez déjà comment dupliquer votre article. Maintenez-le et faites-le glisser. Il n'y a qu'une seule méthode. Vous pouvez également appuyer sur la touche D pour le dupliquer, mais il sort du haut comme ceci. Mais il existe une autre méthode. Donc, si je le fais glisser en maintenant Ed, que je l'arrange comme ça, et si j'appuie sur la touche Ctrl D., le baste sera copié sur la colonne suivante C'est donc vraiment utile. Ce sont déjà des cercles alignés. Nous n'avons donc pas cette option, mais disons que si les cercles sont comme ça, et si c'est le cas de tous, comme vous pouvez le voir, nous avons ce bouton bloqué. Donc, si je clique dessus, notre article est attaché, mais ce n'est pas ce que nous voulions Nous pouvons donc simplement l'aligner avec le bas et horizontalement comme ça en utilisant cet outil. OK. Comme vous pouvez le constater, nous avons aligné nos cercles. Il y a donc plusieurs options. Comme vous pouvez le voir, il y a des points roses au centre. Ils sont donc vraiment utiles. Imaginons que vous souhaitiez échanger cet article par celui-ci ou cet article par celui-ci. suffit donc de cliquer dessus, maintenir le clic droit et de le faire glisser comme ça. Et l'article a été échangé. Permettez-moi de tout copier comme ceci. Et si je les sélectionne tous, pour que vous puissiez voir, nous pouvons également ajouter les cercles verticalement comme ceci. Voici donc la sélection intelligente. OK, alors concevons notre pitch principal. OK, donc ça va être une section de catégories. Maintenant, ajoutons que ce n'est pas le cas si celui-ci le copie et le poste. Je sais qu'il existe une forme de tissu. Alors laisse-moi régler ça. OK, donc ça va être une barre de recherche. Renvoyez-le. Et laissez-moi dessiner un autre rectangle, pour qu'il dédie une sous-bannière. Il va donc être échangé, il y aura cinq à six bannières et il sera échangé. Ou nous pouvons créer une simple bannière comme celle-ci. Il montrera un produit comme un produit spécifique, comme un iPhone 15 max ou un ordinateur portable ou un moniteur, quelque chose d'électronique. Et il y aura d'autres éléments, comme Créons des sous-éléments, comme disons que l' offre sur les smartphones est en cours. OK, nous avons donc créé ici. Imaginons donc cette section pour les vêtements d' épicerie et créons une autre section. Dans cette section, vous trouverez un des articles les plus vendus que nous vendons sur cette application. Pour l'instant, nous ne faisons que concevoir quelques éléments de base, mais j'espère que vous avez vu la page Amazon, les pages du téléphone, la page d'accueil est totalement infinie. Nous pouvons donc le faire, mais cela prendra beaucoup de temps. Il faudra des décennies pour me concevoir. Donc, actuellement, nous ne faisons qu'apprendre. Je vais donc concevoir quelques éléments de base, comme une bannière, certains produits, ainsi que certains produits les plus vendus, ainsi que certaines catégories ici. Alors maintenant, moins de TC ou nous pouvons dessiner une barre de recherche ou nous pouvons ajouter nos articles. Alors allons-y avec notre barre de recherche. Je vais donc vous fournir toutes les icônes du fichier d'exercice. Il suffit donc de suivre ces éléments, suivre ces icônes ici, et nous les ajouterons sur notre page d'accueil. Laissez-moi donc dessiner un rectangle pour notre barre de recherche. Ce sera donc par ici. Ou on peut l'agrandir. Notre barre de recherche ressemblera donc davantage à une meilleure apparence. OK, laisse-moi changer de couleur pour le moment. Laisse-moi arranger les choses. Mettons-nous au centre. OK. Ça a l'air super. Donnons aux arêtes arrondies jusqu' à, je veux les arrondir totalement. Je pense donc que, s'il vous plaît, devinez efficacement. OK, donc 50. Nous pouvons le porter à environ 100 g. OK. Il dépasse les 100. Alors, optez pour 100. OK, comme ça. Maintenant, ajoutons des icônes. Actuellement, je pensais qu'il y aurait une recherche et qu'il y aurait un micro. Nous avons donc des moteurs de recherche et des souris, donc c'est par ici. Mets-le ici. OK, j'en ai fini avec la barre de recherche. Il y a donc une chose que nous pouvons ajouter ici, disons que nous vendons des produits et que nous voulons dire que nous pouvons rechercher de la mode. Si je fais une faute d'orthographe, veuillez m'excuser. Je suis un tas de fautes d'orthographe. OK. Permettez-moi de rester un passeur. Et donnons une couleur vraiment neutre, comme celle-ci. Il doit être visible, à peine visible. Il doit avoir cet accent de couleur de marque puissante, comme le gris comme celui-ci. OK. Ajoutons maintenant Bergm et Card Button Card. OK, nous concevons donc quelques éléments de base. Concevons maintenant une barre de navigation. La barre de navigation va se trouver ici. Dessinons un rectangle pour cela. Mais je me disais que récemment, j'étais en train de parcourir quelques applications, et j'en ai vu une vraiment cool dans un bar. Bon, fais-le pour le moment. Et c'était comme ça. J'ai fait une corniche ronde pour le rendre rond et il y avait tous les éléments Je vais donc ajouter toutes les icônes. Comme ça. Si je désactive la visibilité de la colonne, comme vous pouvez le voir, cela a l'air génial, mais sans couleur, c'est trop inquiétant alors allons-y et ajoutons quelques couleurs. Nous devons créer un style de couleur. Ce sera donc une primaire, ça n'a pas l'air génial. Ajoutons quelques couleurs à celui-ci. Et pour cette barre d'irrigation, ajoutons la plus foncée. Et ça va être noir, je suppose. OK, laisse-moi le garder ou on peut aussi le rendre noir. OK, c'est donc une page d'accueil. Je sais que nous pouvons ajouter un tas d'images et tout ça. Mais une partie de cette vidéo avait pour but de vous renseigner sur sélection intelligente et le ment, ainsi que sur le ligotage. L'icône de recherche et le bouton du micro sont totalement invisibles, alors laissez-moi changer la couleur. OK. Laisse-moi partir. OK, maintenant ça a l'air super. Il y a un tas de choses que vous pouvez faire à ce dessin, vous pouvez y ajouter un trait, exemple si j'ajoute un trait, laissez-moi une touche et changeons la couleur pour qu'elle soit plus foncée. OK. Ou nous pouvons donner une couleur primaire comme celle-ci. Ça n'a pas l'air génial, mais on peut ajouter ce trait. Permettez-moi donc d'ajouter un autre trait. Laisse-moi te donner le blanc. Je pense que le blanc sera superbe. OK, ça a l'air super. Nous pouvons également ajouter du noir. Nous pouvons également ajouter un trait à ce cercle. Nous pouvons également ajouter des bords arrondis de cette manière, pour un look plus moderne. Et nous pouvons également ajouter des images. Je pense que je n'ai pas couvert la partie image. Donc, dans la section suivante, je vais couvrir la partie image. Nous y ajouterons donc des images ainsi que notre page d'accueil. Je sais que certaines personnes savent comment ajouter des images afin que vous puissiez directement ajouter des images. Tout dépend donc du titre et de la sélection intelligente. Et nous concevons également notre page d' accueil. Ça a l'air super. Alors que nous poursuivons ce voyage en matière de design , laissez-vous inspirer et continuez à créer so S dans la prochaine vidéo. 54. Placer des images dans Figma: Créateurs de bandes dessinées, dans ce domaine, nous plongeons dans le monde de l'image dans Figma Explorons différentes manières d'importer pages et de jouer avec les images, y compris quelques réglages de base tels que le réglage de l' espace lumineux. Il existe plusieurs manières d' ajouter une image dans Figma. Il existe également un raccourci Ctrl Shift si vous souhaitez importer des images tA à partir de fichiers locaux. Et l'option est disponible dans les rectangles. Supposons que je souhaite importer cette image, afin que je puisse simplement cliquer dessus et l'ouvrir. Mais comme vous pouvez le voir, lorsque je l'importe, mon curseur se transforme en cette petite image. Je peux maintenir la touche Shift enfoncée et faire glisser l'image comme ceci. C'est donc le premier moyen. Et si je choisis une autre méthode, si je choisis celle-ci et que je l'ouvre, si je clique simplement sur cet espace vide, comme vous pouvez le voir, l'image est trop grande. Lorsque vous importez une image, gardez à l'esprit tout changer et la faire glisser comme ceci, vous devez tout changer et la faire glisser comme ceci, afin d'obtenir une meilleure perspective de l'image. Il y a donc beaucoup de choses que nous pouvons faire avec l'image. La première est que vous pouvez ajouter des bords arrondis comme celui-ci. Vous pouvez faire pivoter votre image comme ceci et si je clique sur ce bouton d'image. Donc, comme vous pouvez le voir, nous avons plusieurs options, comme un ton clair. Euh, je sais que beaucoup de gens utilisent plutôt Photoshop. Nous obtenons ce petit ajustement. Ils ne sont pas si avancés par rapport à Photoshop et Lightroom Elles sont basiques. Vous pouvez l' ajuster comme ceci. Vous pouvez ajouter des contrastes, de la saturation, de la température, des reflets et des ombres Je connais votre design et vos besoins. Nous pouvons également le recadrer pour l'adapter. Au prochain chargement, nous allons voir comment créer un masque en utilisant cette technologie MS, OK. Il s'agit donc de notre première technique. Nous pouvons également ajuster la rotation à partir d'ici. Vous pouvez également ajuster ou ajouter nos bords arrondis « Que dois-je dire » comme ceci. À côté, vous pouvez importer vos images à partir de fichiers locaux. Supposons que vous souhaitiez importer cette image, vous pouvez simplement la faire glisser comme ceci et la copier ici. Mais le problème avec cette technique c'est que vous allez le dire en second. C'est là le problème. La taille de l'image est trop grande active, nous devons donc la redimensionner Et laissez-moi en parler parce que nous n'en voulons pas maintenant. Et il existe une autre technique. La troisième technique, elle se présente sous forme de masque, mais elle ne compte pas comme masque. Je vais vous apprendre les techniques du masque dans la fenêtre suivante. Il y a donc une chose, disons que si je vais remplir, actuellement il est vide, je peux changer la couleur, mais si je veux changer l'image, je peux simplement cliquer sur ce bouton, et actuellement il devient case à cocher ou case de poursuite, et je peux simplement choisir l' image dans une image aléatoire. Je peux juste cliquer dessus et ouvrir. Comme on peut le voir sur les images ajoutées ici. Il s'agit également d'une autre technique. Supposons que vous souhaitiez ajouter une image comme des cases spécifiques comme celle-ci ou les cercles. Dans ce cas, vous pouvez accéder à l'emplacement de l'image et sélectionner n'importe quelle image ouverte et les voitures de votre souris se transformeront en cette petite image. Et vous pouvez choisir n'importe quelle case. Dans ce cas, je veux placer l'image O, afin que je puisse simplement cliquer dessus et l'image est placée maintenant. Si je zoome, comme vous pouvez le voir, sur les images ici, il existe donc de nombreux sites Web, vous pouvez télécharger vos images depuis l'un de mes favoris, les pixels. Comme vous pouvez le voir, j'utilise cette image dans cette vidéo. Et l'utilisation de ces images est totalement gratuite. Et si vous voulez en savoir plus sur les licences. Comme vous pouvez le constater, les licences sont vraiment simples. Il n'est donc pas nécessaire d'ajouter le nom du photographe ou quelque chose comme ça. Vous pouvez utiliser le système fermé, et je peux également le modifier. Ensuite, nous avons Pixabay. C'est également l'un des meilleurs sites Web. Et actuellement, elle fournit également la vidéo stock ainsi que de la musique, des cadeaux d'effets sonores, etc. Si vous êtes un vidéaste ou un graphiste, vous pouvez utiliser ce p après avoir Splash C'est également l'un des sites Web les plus populaires. Et dans Figma, nous avons également des plug-ins. Et dans Figma, nous avons également des plugins pour ce site Web spécifique, tels que les pixels et pour Splash Nous allons donc faire ces choses dans la prochaine vidéo. Donc, actuellement, nous apprenons simplement à ajouter une image et différents types d'images. Et la dernière chose que je veux vous montrer, disons que nous voulons placer une image dans ce cadre. C'est donc très simple, le même processus est le même pour remplir l'image, et cela se transforme en case de poursuite et en sélection d'une image. Vous voulez, choisissons celui-ci, et il s'ajoutera à ce cadre. Si votre conception l'exige , faites-le. Ce n'est pas une bonne pratique. OK, laisse-moi faire ça. Voici quelques méthodes pour ajouter une image dans un dessin. Essayez donc d'importer une image en utilisant différentes méthodes. C'était un ajustement semblable à Photoshop avec l'image pour une image de base comme celle-ci. Vous pouvez régler ce compteur d'exposition pour saisir le présent dans les hautes lumières et les ombres Vous pouvez appliquer l'image directement aux formes ou aux cadres de ce type, afin de gagner du temps. Vous n'avez pas besoin de glisser-déposer comme ça. Donc, les gars, tout est une question d'images. Stadium pour plus de conseils de design et n'hésitez pas à partager vos réflexions sur cette vidéo et sa conception. 55. Masques Figma (image de masque et texte dans Figma): Bienvenue à tous. Dans cet article, nous allons apprendre ce qu'est un masque et comment créer un masque dans Figma La première chose à faire est donc de savoir comment fonctionne le masque dans Figma. Avant de nous plonger dans les détails de l'utilisation du masque dans Figma, comprenons les principes fondamentaux, comme ce qu'est le masque parce que beaucoup d'étudiants ne savent pas ce qu'est le masque ou certaines personnes le savent parce que certaines personnes utilisent Photoshop ou des rencontres pour aimer remapper afin de savoir ce qu'est le Mais si vous ne savez rien sur le masque, laissez-moi vous dire ce que c'est. Dans Figma, les masques sont utilisés pour contrôler la visibilité d' une ou de plusieurs pages en utilisant une autre forme ou image comme modèle Cette technique est particulièrement utile pour révéler uniquement le contenu situé dans les limites du masque. Maintenant, comment fonctionne le masque. Les couches du masque agissent comme une fenêtre à travers laquelle vous pouvez visualiser le contenu des couches situées en dessous. Tout contenu situé en dehors des limites du masque est masqué. Vous pouvez créer un effet complexe et reconstruire une partie spécifique de votre design à l'aide de masques. Passons maintenant à la figma et créons moins un masque. Alors laisse-moi choisir une forme. Dans ce cas, je vais choisir un rectangle, et je maintiens la touche Maj enfoncée pour obtenir un rectangle précis. Maintenant, permettez-moi d'importer quelques images. OK. OK, je vais choisir celui-ci pour le moment. Il s'agit d'un iPhone 14 ou 15. OK, c'est 15. OK. Laissez-moi le redimensionner. Donc, je sais, la méthode de masquage est un peu opposée car j'utilise Canva Photoshop en plus d' un prem P. Donc, dans ce cas, nous avons l'habitude de mettre des formes Cela crée donc des marques. Mais dans Figma, c'est le contraire. Nous devons placer des formes ou des objets sous nos images. Alors laisse-moi le choix. Et comme vous pouvez le voir ci-dessus, les ormo ont un masque. Alors lèche-le et on a notre masque. C'est donc la première méthode sur le panneau des calques, vous pouvez le voir, nous avons obtenu notre masque. C'est un groupe de masques. Vous pouvez également le renommer ici. Je vais le garder tel quel pour le moment. Donc, comme vous pouvez le voir, voici l'image, et voici la fille bronzée. Si vous le souhaitez, vous pouvez également le recadrer double-cliquant dessus, et cet ormino supérieur donnera l'option de recadrage de l'image À partir de là, vous pouvez recadrer votre image ou l'ajuster comme suit. OK, je choisis le masque, je suppose. D'accord, voici comment vous pouvez recadrer vos images. Il existe une autre méthode, mais elle ne compte pas comme un masque, mais elle fonctionne comme un masque. Laisse-moi faire un quart de travail. Je choisis l'ellipse et le décalage complet pour une ellipse précise. Passons donc au remplissage. Actuellement, il est en couleurs. Maintenant, celui-ci est destiné aux notés et ce film est destiné à l'image, et Figma prend désormais en charge les vidéos Je m'intéresse donc aux images. Passons donc aux images. Maintenant, nous avons la possibilité de choisir l'image. Et maintenant, je vais choisir cette Diva Phagocc pour laquelle nous avons reçu notre masque. Mais sur le panneau des calques, vous pouvez voir qu'il ne s'agit pas d'un masque. Voici l'image et voici le masque. D'accord, voici comment vous pouvez créer un masque. Mais certains étudiants se demandent peut-être comment désactiver le masque. C'est donc très simple. Mais je suis confronté à un problème dans ma conception. OK, donc le raccourci pour masquer est comme Control M sous Windows, et pour Mac, c'est ship command M. J'utilise donc cette méthode. Laisse-moi en essayer un autre. Laissez-moi dessiner à nouveau une forme. Lèvres et laisse-moi encore une fois prendre une photo. OK, donc je vais choisir celui-ci pour le moment. OK. Je vais les sélectionner tous les deux, et j'appuierai sur la touche Ctrl Alt M pour le raccourci. Mais cela ne fonctionne pas sur mon PC. Je ne sais pas quel est le problème si cela vous arrive également. Vous pouvez donc me le dire ou vous pouvez également contacter Figma ici et leur dire que le raccourci ne fonctionne pas Si cela fonctionne ou s'il existe un autre raccourci, merci de me le faire savoir. Voyons maintenant comment désactiver le masque. Alors laisse-moi choisir celui-ci. Et il suffit d'aller dans le panneau inférieur et de cliquer sur cette forme. Donc, dans ce cas, nous avons un rectangle et il suffit de cliquer sur le bouton du masque pour désactiver votre masque. D'accord, il existe donc une autre méthode que vous pouvez également utiliser pour créer un texte vraiment génial. Je choisis donc ce bouton de texte. Je vais chronométrer sept mots au hasard. Permettez-moi d'en augmenter la taille, 40 96. Et choisissons un boulon. OK, je veux vraiment m'amuser avec audace. OK, alors allons-y avec celui-ci. Je veux donc utiliser la méthode du masque dans le texte. Vous pouvez voir cet effet dans de nombreux designs graphiques, c'est pourquoi nous recréons cet effet de masque Il est donc très facile de cliquer sur le texte. Et dans la deuxième méthode, nous avons vu comment créer cet effet de masque en utilisant le remplissage, nous utilisons la même méthode. Passons au remplissage de l'image, et choisissons une image, une image aléatoire. Je vais donc choisir celui-ci. OK, comme vous pouvez le voir, nous avons un masque de texte. Et dans ce cas, vous pouvez voir qu'il s'agit du texte, pas d'un masque. Nous pouvons l'appeler masque, mais Figma ne compte pas comme un masque, je suppose, parce que les masques sont comme ça dans Figma, et voici le texte Et vous pouvez également le renommer. OK, tu peux le renommer comme tu veux. Il s'ajustera si vous ajoutez du texte plus de texte dessus comme ça. Et nous pouvons aussi recadrer. Je vais le remplir. Avant de procéder au remplissage, nous devons sélectionner, passer au remplissage, et nous pouvons choisir le recadrage. Et nous pouvons également ajouter cette image, vous pouvez la redimensionner comme ceci Voici donc comment nous pouvons également faire l'astuce du masque avec du texte. Voici donc comment créer un masque vraiment génial dans Figma C'est la patate, et je vous verrai dans la prochaine. 56. Plugins d'images Figma pour les designers UIUX: Bon retour à tous. À croire, nous allons en apprendre davantage sur les plugins pour images. Ces plugins rendent votre travail vraiment fluide. Nous avons donc actuellement ce plugin de pixels. Alors laissez-moi vous montrer comment cela fonctionne. Si je sélectionne cet ifcli sur cette image des marées. Comme vous pouvez le voir, c' est plus fluide, bien plus fluide que d'ajouter une image. Voyons donc comment nous pouvons le faire. Imaginez un monde dans lequel vous pourriez accéder directement à des images incroyables à l'aide d'un plug-in. Donc, mes amis, le monde est là. Alors laissez-moi vous montrer les plugins. Nous pouvons donc aller à la page d' accueil pour les plugins ou vous pouvez accéder à la communauté, et nous pouvons ajouter des plugins, mais Figma a une option vraiment intéressante Ce sont les ressources et le raccourci est un travail de recherche. Il existe donc un tas de plugins. Vous pouvez le rechercher. Nous utilisons donc actuellement des pixels. Pour ce wad, vous pouvez utiliser splash, photo ou Pixabay. Ce sont également d'excellentes options. Passons aux pixels. Et disons que je veux rechercher une image sur les voyages, donc je peux simplement la rechercher et je peux simplement l'ajouter dans ma section. Alors, disons, je veux ajouter une image de ce monde. Je peux donc simplement cliquer dessus et ajouter des images de boom sur notre bouton. Supposons que vous ayez un tas de boîtes vides comme celle-ci, et que vous ne sachiez pas ce que nous devrions ajouter dans ces boîtes. Donc, dans ce cas, vous pouvez sélectionner ces cases et cliquer sur Insérer une image aléatoire, et cela insérera une image aléatoire comme celle-ci C'est donc vraiment utile. Je suppose que c'est aussi à Saba. Laissez-moi choisir un Saba. OK. Il est également présent dans Pizaby Je pense qu'il y en aura aussi dans Splash. OK, alors laisse-moi couvrir tout ça. Alors laisse-moi chercher la mode. Dans ce cas, l'image ne s'adapte pas parfaitement, nous pouvons donc la recadrer afin de pouvoir recadrer l'image et de l'ajuster. Laisse-moi comme ça. L'image n'est pas très grande, nous ne sommes donc pas en mesure de l'ajuster. Nous pouvons simplement supprimer celle-ci et ajouter une très bonne image. Disons ceci pour Indi Friction. Dans ce cas, nous pouvons ajouter des vêtements. Permettez-moi de lire ceci d'abord, mais nous devons l'ajuster car l'ajustement n'est pas parfait. Comme vous pouvez le voir dans ce cas, l'image est nette, nous pouvons donc l'ajuster comme ceci C'est ainsi que nous pouvons recadrer l'image. Je pense que je vais vous montrer comment recadrer. OK. Maintenant, quelle est la prochaine ? C'est de l'électronique. Allons-y et ajoutons de l'électronique. OK, à Pizawa, je n'ai pas vu cette image en particulier, mais en pixels, j' aime beaucoup cette image Et comme vous pouvez le voir, il est disponible à Pizawa, mais il n'était pas visible à Pizawy Permettez-moi donc d'ajouter ceci dans le domaine de l'électronique. OK, la prochaine étape est la recherche de nourriture, la suivante ce sont les livres, les livres. Celui-ci a l'air bien donc je vais ajouter celui-ci, et le dernier est le craft. OK, craft, on peut ajouter celui-ci est bon, mais laissez-moi vous montrer quelques détails. OK, celui-ci a l'air bien. Voici donc comment nous nous connectons. Comme vous pouvez le constater, cela permet de gagner beaucoup de temps. Je sais que l'ajout de votre propre image est également une bonne chose. Mais supposons que dans certains cas, vous souhaitiez simplement ajouter une image pour l'espace réservé, ou que vous ne sachiez pas quelle image ajouter Dans ce cas, vous pouvez utiliser des plugins comme Pisels, Pizawa ou Splash Laissez votre design l' exiger , puis vous pouvez également l'ajouter. Mais la plupart des clients fourniront ou votre entreprise fournira les images, ajoutez-y. OK, une chose que j'ai oublié d'ajouter dans ce design, c'est qu'il y a un bouton de localisation. Je veux ajouter, comme si cela indiquerait notre position actuelle. Et je vais choisir la couleur. OK, on passe à celle-ci. Et j'ai aussi le symbole de localisation Oh icon. Il sera là et permettez-moi d'ajouter du texte. Donc, actuellement, je vis à Marsha, donc c'est dans un poney myname is this one que si l'utilisateur tape sur cette icône, il y aura donc un menu qui apparaîtra et affichera mon adresse et certains contrats seront comme ça mon adresse et certains contrats seront comme Si l'utilisateur clique dessus , cette adresse s'affichera. Ainsi, lorsque nous voulons changer adresse ou vérifier votre adresse, dans ce cas, cela nous sera utile. OK, donc je vais probablement, vanter mon adresse. Je pense que j'ai mis de côté mes annonces précises, donc je vais probablement les brouiller C'est donc un rappeur pour cette vidéo, plugins de pré-image, le combo rêvé des designers. Alors allez-y, explorez et découvrez le monde des possibilités de design de VS. C'est le moment de continuer à créer et je vous retrouverai dans le prochain 57. Projet de cours 9 : alchimie d'images : maîtriser les images et les plugins dans Figma: Mes étudiants. C'est un projet. Tout d'abord, créez cet espace vide blanc et remplacez-le par des images sympas comme celle-ci. Je pense que j'ai également fourni toutes les images dans le fichier de ressources. Alors parcourez-le, vérifiez cela et ajoutez des images dessus. Si vous souhaitez ajouter vos propres images, afin de savoir comment les ajouter, alors allez-y et ajoutez ces images. Mais là où il y a plus, plongez dans les plugins, le merveilles et l'alchimiste de l'image qui sommeille Redimensionnez, recadrez et filtrez, jouez avec les effets jusqu'à ce que vous chantiez visuellement Rappelez-vous simplement ce qu' il y a dans Compose. Il indique le public cible et ses désirs e como. Donc, après avoir ajouté des images, prenez une capture d'écran et partagez-la dans la section du projet. Voici quelques instructions. Tout d'abord, dans cet espace vide, ajoutez des images. Ensuite, si vous souhaitez utiliser des plugins, ajoutez des plugins, prenez une capture d'écran, téléchargez-la dans la section projet et vous pouvez également la partager sur les réseaux sociaux. Alors terminez ce projet et venez au sommet pour moi, et je vous verrai. Le suivant. 58. Disposition automatique et limitations dans Figma: Salut, chers constructeurs. Bienvenue dans notre design Click Art Commerce. Aujourd'hui, j'ai un aveu à faire. Un cas classique de oups. J'ai oublié Voici donc le scoop. Au beau milieu de la création du chef-d'œuvre, devinez quoi, il s'est faufilé entre les mailles du filet. Ouais, tu as compris. La petite page très importante sur le produit. Je sais que je le sais. C'est comme préparer un gâteau et oublier un jeûne. Je sais que c'est un amateur. Mais bon, nous ne sommes pas là pour juger. Nous sommes ici pour apprendre et bien rire en cours de route. Alors restez dans les parages, car nous nous consacrons ensemble à la conception de la page produit Eclsure Tout cela, Buckler, la machine d' aujourd'hui est en train de créer la page produit que nous avons totalement oubliée et devinez quoi Nous le faisons dans un style empreint figma et d'une bonne dose d'humour Mais ce n'est pas tout, tu vois. Dans notre quête pour corriger cette petite erreur, nous allons également découvrir les mystères de la mise en page automatique et des contraintes dans C'est comme de la colle magique qui maintient le tout ensemble. Le glaçage sur un gâteau design, si vous voulez. D'accord, ce sera donc notre page produit. Je sais que je l'ai déjà conçu, je vais donc vous montrer comment le concevoir, et nous allons créer ce bouton, un bouton incroyable. Comme vous pouvez le constater, ce texte est extensible et souple et le texte reste également Et si je l'étends comme ça, ça s'étendra. En Ts Bold, nous allons créer cet incroyable bouton en utilisant la mise en page automatique et la contrainte. Mais d'abord, parlons de la mise en page automatique. Imaginez que votre dessin de figma est une caste rebondissante. Chaque élément à l'intérieur est un tué qui rebondit. L'art automatique est comme un filet invisible qui empêche les personnes tuées de s' envoler des murs Vous pouvez indiquer à chaque enfant l'espace dont il a besoin et l'endroit où il doit rebondir. Ensuite, si les animaux tués grandissent, les bords du filet ne se heurtent pas à d'autres Et si vous ajoutez un nouveau kit, le filet libère automatiquement de la place que tout le monde puisse continuer à rebondir C'était la définition de base de la mise en page automatique. Concevons donc les détails du produit. Cela va donc être très simple, il suffit donc de le copier. Je vais donc copier ce contrôle C, sélectionner les détails du produit. Contrôle. Comme vous pouvez le constater, concevez ce bouton de la barre de navigation, afin que nous n'ayons pas à le concevoir encore et encore, alors laissez-moi le renvoyer en arrière. OK. Concevons maintenant ces pages. Où nous allons ajouter quelques images de nos produits. Donnons aux bords arrondis une valeur supérieure à 15 et laissez-moi activer les colonnes pour que je puisse les ajuster parfaitement. Je tiens la touche Alt. Comme vous pouvez le constater, nous nous adressons du côté du conseil d'administration. OK. Maintenant, permettez-moi de le copier et de le coller ici comme ceci et pour celui-ci également. Mais comme vous pouvez le constater, le rectangle est hors cadre. Permettez-moi donc de les regrouper dans les détails du produit. Et actuellement, ils sont à l'intérieur. Si je clique dessus, le clip contrate est déjà activé. D'accord, ce seront donc nos images. Maintenant, créons ce bouton magique. Cela s'étire automatiquement. OK, ajoutons un texte au panier, laissez-moi créer les sites de texte. Je vais en choisir 25, je suppose. Maintenant, sélectionnez-les tous les deux, et comme vous pouvez le voir, la mise en page automatique apparaît sur le panneau de conception. Si je sélectionne l'un d'entre eux, comme vous pouvez le constater, la mise en page automatique n'est pas ici, et nous devons sélectionner les deux. Si vous souhaitez ajouter une mise en page, cliquez sur la Maintenant, si je l'étire, comme vous pouvez le voir, il reste au milieu. Il y a aussi un rembourrage horizontal et un rembourrage vertical sur ce bouton Permettez-moi d'abord de changer la couleur du bouton. Actuellement, c'est génial. Laissez-moi choisir celui-ci et laissez-moi ajouter quelques bords arrondis vers le haut pour faire le tour Je vais donc choisir comme ça, le bouton Ajouter à la carte. Nous pouvons changer la couleur de ce texte. Laisse-moi le transformer en un seul. OK, maintenant ça a l'air super. Permettez-moi de supprimer, afin que nous puissions faire une dernière chose. Nous pouvons garder le bouton comme celui-ci et me laisser diminuer la taille de la police. Maintenant, permettez-moi de démonter les colonnes. OK. Permettez-moi de faire une copie de celui-ci. OK, supposons que vous souhaitiez mettre à jour le texte. Disons que j'ai envie de le dire. Maintenant, je peux ajouter beaucoup de texte à l'intérieur. Comme vous pouvez le constater, le bouton se déplace en même temps que le texte. OK, ce truc se produit parce que nous sommes actuellement dans un panel de conception, nous sommes dans Hum Mais disons si je choisis un poids fixe. Et si j'essaie d'ajuster le texte qu'il contient. Donc, comme vous pouvez le voir, le bouton n'augmente pas. Gardez à l'esprit qu'il doit s'agir d'un câlin et non d'un poids fixe. OK, il y a une chose que je veux te montrer. Disons que vous avez un bouton comme celui-ci et que je vais ajouter du texte comme ce texte aléatoire. Et laissez-moi sélectionner les deux mises en page automatiques. Et disons que votre contrainte automatique est ici, par défaut, peut-être en haut à gauche. Et si j'essaie d' étendre ce bouton. Comme vous pouvez le voir, le texte reste là, il ne bouge pas. Il doit donc être là pour fonctionner. C'est comme ça. OK, il y a autre chose. Supposons que vous ayez un texte comme celui-ci, et qu'il s'agisse actuellement d'une pondération automatique par défaut. Mais si vous choisissez la hauteur de l'eau, elle s'ajustera en fonction de la hauteur. Donc, si j'ajoute du texte, il s'ajustera en fonction de la hauteur. Mais si je choisis une taille fixe, dans ce cas, le texte ne rentrera pas dans le cadre. Il fera quelque chose de aléatoire comme ça. N'oubliez pas qu'il doit s' agir d'un poids automatique Si vous voulez le faire horizontalement, et si vous voulez le faire verticalement, maintenez la hauteur automatique. Il existe une méthode vraiment raccourcie que vous pouvez utiliser pour créer une mise en page automatique, comme des boutons comme celui-ci. Il suffit donc d'ajouter du texte, ajouter du texte comme ajouter pour ajouter deux coupes. Et maintenant, sélectionnez le texte. Vous n'êtes pas obligé d'en faire un cadre ou d' ajouter un rectangle. Il suffit de le sélectionner et de choisir la mise en page automatique, et le raccourci est Shift A. Et comme vous pouvez le voir, nous avons notre bouton. Mais actuellement, le remplissage est blanc, il n'est donc pas visible. Laissez-moi donc ajouter un fond et choisissons la même couleur. Celui-ci, comme vous pouvez le voir, nous avons notre bouton, et nous pouvons ajouter des coins ancrés. Permettez-moi d'en additionner 20 comme ça ou d'en faire dix. OK. Et je peux le faire choisir comme ça. Je peux augmenter la taille. Maintenant, je peux y ajouter des rembourrages verticalement, horizontalement. Je peux également en modifier la contrainte, et c' est ainsi que nous fabriquons des boutons. C'est l'une des méthodes les plus simples. Vous n'avez donc pas besoin d' ajouter un texte rectangulaire, vous devez ensuite le convertir en mise en page automatique. Donc, comme vous pouvez le voir, il suffit d'ajouter du texte, de ligaturer la mise en page automatique C'est l'une des méthodes les plus simples. Et si vous souhaitez utiliser ce bouton dans un autre cadre, il vous suffit de le suivre comme ceci, copier-coller et de l' utiliser dans votre design. C'est donc aussi simple que cela. D'accord, voici comment nous créons des boutons dans Figma en utilisant des couches automatiques Et maintenant je vais terminer ce pitch car il n'est pas terminé Permettez-moi donc d'y ajouter quelques images. Je vais donc probablement avancer rapidement. D'accord, ce sera donc notre page produit. Je sais que ça a l'air bien, mais il y a plein de choses que je peux ajouter, comme une vue similaire ou une catégorie ou il y a beaucoup d'options, je peux en ajouter du minerai, mais actuellement nous ne faisons qu'apprendre. C'est donc pour cette page détaillée du produit. Je sais que c'était une vidéo totalement imprévue, il m'a donc fallu beaucoup de temps pour la créer L'objectif principal de cette vidéo était de créer ce bouton en utilisant la disposition et les contraintes de commande, et nous savons tous que nous pouvons l'utiliser ainsi et l'ajuster au centre. Je pense que ça a l'air mieux, donc je vais continuer comme ça. Alors, amis, jusqu'à la prochaine fois, bonne conception et souvenez-vous que même le meilleur designer oubliait temps la page détaillée du produit. Mais c'est ce qui fait de nous des humains, non ? Alors prends soin de mes amis. 59. Espace de disposition automatique Figma entre les objets: Bienvenue aux étudiants. Aujourd'hui, nous passons à l'étape suivante de l'automatisation. Enfin, aujourd'hui, nous étirons un bracelet à boutons parce que nous nous penchons le fait de regrouper de nombreux objets et d' étirer l' ensemble de ce grand groupe C'est comme combiner la fonction de sélection intelligente que nous avons apprise plus tôt avec une certaine magie de mise en page automatique sophistiquée. Alors, sans plus attendre, explorons la mise en page et l'espacement automatiques Donc, tout d'abord, je vais taper quelques mots aléatoires ici. Laisse-moi choisir des mots au hasard. Comme à la maison. Permettez-moi de copier celui-ci. AI, Control D, médicaments verrouillés et liste B. OK, laisse-moi arranger ça OK. Maintenant, sélectionnons-les tous et en bas. OK, nous avons donc ce type de bouton de navigation. Supposons que vous ayez conçu votre bouton de navigation sur votre site Web comme ceci, horizontalement, mais que vos clients veulent qu'il soit horizontal comme celui-ci. Nous avons un robot de navigation sur le côté gauche, et il est vertical. Supposons donc que votre client le souhaite. Donc, dans ce cas, vous pouvez l'organiser manuellement un par un. Mais il existe une autre fonctionnalité de la mise en page automatique, si nous les vendons toutes et que nous les créons en mise en page automatique. Et si je passe à la mise en page automatique, vous pouvez voir qu'il existe une option appelée mise en page verticale. Si j'en parle, comme vous pouvez le voir, nous sommes en mesure de le faire en une seconde en un clic. Et nous obtenons toutes les fonctionnalités que je peux aligner ici comme ça. Et je peux y ajouter du rembourrage. Je peux ajouter un rembourrage vertical, un rembourrage horizontal, ainsi que le contraindre comme ceci Je peux ajouter au centre, ainsi que je peux utiliser une sélection intelligente comme celle-ci. Je peux modifier le texte comme ceci. Je peux échanger leurs lames. C'est la fonctionnalité que nous obtenons avec la mise en page automatique, et nous avons déjà vu que nous pouvions ajouter un filtre. Ajoutons un remplissage, comme laissez-moi ajouter un nouveau frac. Passons à la COVID celui-ci Maintenant, disons que j'ai un texte comme ce test aléatoire. Disons que j' en ai plusieurs. Faisons comme ça. Je vais taper quelques mots britanniques. Alors laissez-moi l'aligner. Line Aig nous permet de créer une mise en page automatique. Supposons que je veuille y copier toutes les fonctionnalités, toutes les propriétés de cette mise en page automatique, et que je puisse simplement copier la barre de navigation de cette section, qui est déjà une mise en page automatique, et copier/coller, accéder aux propriétés de copie et sélectionner cette mise en page automatique , puis coller vos propriétés. Comme vous pouvez le constater, nous y avons ajouté toutes les fonctionnalités . Et si nous voulons ajouter des rembourrages, comme le rembourrage gauche, vous pouvez ajouter le rembourrage supérieur gauche Celui-ci est le bon rembourrage et celui-ci est un rembourrage Atom comme celui-ci Et il se cache ici. Vous pouvez ajouter un espace vertical comme celui-ci entre eux. Ce sont quelques fonctionnalités supplémentaires de mise en page automatique. Il y a encore une chose. Disons, disons, que nos blocs sortent de notre mise en page automatique. Et tu peux juste l' apporter comme ça. Et on peut le ranger. Il y a une limite. Je pense que je dois changer de couleur. Donc, si je change la couleur et si je la fais glisser vers l'extérieur, et si vous la faites glisser vers l'intérieur, vous pouvez voir qu'il y a une ligne bleue sur les poires et que nous pouvons les coller ici comme ça. Disons que vous avez fait une erreur et que vous l'avez mis quelque part ici, par exemple hors du cadre. Actuellement, il est hors cadre, et celui-ci est hors cadre 23. On peut juste l'apporter comme ça. Et c'est un traîneau pour la mise en page automatique. Et comme vous pouvez le constater, pour la mise en page automatique, l'icône est différente. Par exemple, pour les cadres, c'est comme la boîte carrée, et pour la mise en page automatique, nous avons 3 barres entourées de bords Et il y a une autre chose que j'ai oublié de mentionner. Je crois que j'oublie beaucoup de choses en ce moment. OK, il y a donc une chose. Supposons que vous souhaitiez copier cet élément et le coller dedans pouvoir faire une chose simple, comme appuyer sur la touche Ctrl. Pour cela, le truc est simple, mais les gens sont toujours confus. Disons que nous devons sélectionner et que les gens s'embrouillent. Par exemple, nous devons passer à la première commande. Après cela, nous devons passer au texte. Je double-clique. Ensuite, je dois appuyer sur la touche Ctrl. Ensuite, je peux faire une copie, tas de copies de ce texte comme celui-ci. S'il le faut, sélectionnez d'abord la commande après ce texte double-cliquez puis double-cliquez à nouveau pour modifier le texte comme celui-ci. Comme vous pouvez le constater, les mises en page automatiques sont vraiment géniales. Voici donc quelques fonctionnalités avancées des mises en page automatiques. Voilà la vidéo de Portola, et je vous verrai dans la prochaine 60. Consulter Figma et redimensionner simplifiés: J'ai fait un monde fascinant de questions. Les questions sont comme de la colle magique qui fixe le design à sa place. Les lettres font des choses intéressantes, comme coller la navigation à des coins spécifiques, créer un design réactif attrayant. Alors laissez-moi vous montrer que j'ai cette page appelée mon compte. Et si je mets ça. Comme vous pouvez le constater, tout reste uni. Ça ne se gâte pas. Nous l'avons donc fait en utilisant des contraintes. Alors laisse-moi annuler ça. Imaginez maintenant les possibilités que nous allons même lancer un levier automatique vers la fin du cours, créer une symphonie de design qui pourrait bien faire exploser votre design Excitant, c'est vrai. Abordons donc ces contraintes, Extra Vanza Okay a repris cette barre de navigation ainsi que cette barre de navigation de nos modèles précédents, et elle n'a aucune contrainte d'ajout J'ai une contrainte par défaut, mais il n'y a pas d' ajout ou de contrainte Cela sera utile lorsque nous voulons concevoir la même chose pour un site Web, pour iPad. Donc, cette fois-là, cela va aider. Laissez-moi donc suivre un cadre dans lequel je vais choisir un iPad 12. Comme celui-ci, et je veux copier avec un iPad, et il doit être ajusté exactement comme ça. Dans ce cas, nous pouvons donc utiliser la contrainte. Alors laisse-moi te montrer une chose. Donc, si je dessine un rectangle comme celui-ci, comme vous pouvez le voir dans le panneau de conception, les contraintes sont à gauche et en haut. Les contraintes sont donc toujours présentes et par défaut. Les éléments sont limités vers le haut et vers la gauche, mais nous voulons plus de contrôle Commençons par cette barre de navigation. OK, alors laissez-moi faire la première chose avec celui-ci, donc nous allons simplement copier-coller dessus pour qu'il fonctionne correctement. Alors maintenant, si j'étire les choses, comme vous pouvez le voir, c'est complètement foiré, et c'est aussi le cas ici Alors maintenant, nous allons poser quelques questions. OK, alors laissez-moi d'abord choisir ce rectangle, nous allons donc corriger ce premier. OK, donc c'est Reggle et actuellement c'est le centre. Je vais donc l'ajouter de gauche à droite, et vous devez être en haut. Et pour ce menu de hamburgers, il faut être sur la gauche et en haut, c'est parfait. Et pour l'icône de recherche, à gauche et en haut, c'est également bien. Tu dois être au centre. OK, au centre et ça doit être au centre et pour Mike en haut. OK. Le haut droit est parfait pour ce qui est de la gauche, de la droite et du haut. Laisse-moi prendre celui-ci. Celui-ci est de gauche en haut, mais je veux de gauche à droite en haut. Maintenant, si je l'étire, ça marchera. Comme vous pouvez le constater, cela fonctionne parfaitement bien. Nous allons faire de même avec cela également. Laisse-moi faire celui-ci. Ce sera à gauche et en bas, censé être à gauche et en bas censé être au centre et au centre, et vous devez être à droite et en bas. En bas à droite, et ce rectangle doit être de gauche à droite. Mais si je sélectionne le centre, donc si je l'étire, comme vous pouvez le voir. C'est total. Il ne s'étire pas. Je ne sais pas pourquoi il s'étire, mais il ne s'étire pas. Permettez-moi donc d'ajouter la gauche et la droite, et cela doit être en bas. Maintenant, laisse-moi choisir ça. Et comme vous pouvez le voir si j'extrait, la barre extrait également, mais je ne sais pas ce qui se passe dans celle-ci Qu'est-ce qui se passe pour toi ? OK, j'ai gardé la gauche à droite. Il faut que ce soit au centre. OK, maintenant ça va marcher. OK. Maintenant, si je choisis ceci, si je l'étire. OK, donc ça marche très bien. Maintenant, je peux simplement copier celui-ci et appuyer dessus ici. Comme vous pouvez le constater, ce n' est pas un étirement, mais je peux simplement le faire et m'étirer parfaitement. Pareil pour celui-ci. Je peux le tenir, le faire glisser comme ça. OK, ce n'est donc pas un cadre. Alors laisse-moi faire un cadre. Sélection de premier ordre. Et si je le copie, je peux étirer comme ça, et je peux l'utiliser. Mais comme vous pouvez le constater, il y a un problème. Les icônes qui vont totalement à droite et à gauche ne restent pas au milieu. Mais si je fais quelque chose ici, cela ne fonctionne pas. Je le sais parce que j'en ai fait un cadre. Mais si je le fais et si je dissocie ce monde, et maintenant si je l'étire comme vous pouvez le voir, cela fonctionne Je ne sais pas ce qui se passe ici. Je suppose qu'avec les cadres, cela ne fonctionne pas comme vous le souhaitez. Et je vais régler ça, ne t'inquiète pas. Je vais corriger cela et mettre à jour la prochaine vidéo. OK, il y a donc une chose que je veux te montrer. Par exemple, avec les contraintes, nous obtenons ces lignes pointillées. Comme vous pouvez le voir, il est présent aussi bien ici qu'ici. Il en va de même pour la gauche et la droite, comme vous pouvez le voir à gauche et à droite, et celui-ci est en bas. N'oubliez donc pas que ces lignes ne sont que des lignes de contrainte. OK, donc tout cela est une question de contraintes. Nous avons créé cette barre de navigation extensible pour notre mobile et pour le pire Je sais que c'est un peu confus, mais tu t'y habitueras. Il suffit de jouer avec, de jouer avec la contrainte et gauche à droite pour l'obtenir. Dans la vidéo suivante, nous combinons la mise en page automatique avec les contraintes, donc je pense que ce sera à un autre niveau. D'une manière ou d'une autre, vous pourriez être tenté de créer une mise en page complexe comme l'exemple de l'iPad. Mais retenez cette idée, c'est un peu trop pour le moment. Nous explorerons d'autres exemples ensemble dans la prochaine vidéo. Alors, où allons-nous mélanger les contraintes de mise en page automatique dans un scénario réel ? C'est difficile, mais c'est de l'or. Alors rendez-vous dans la couche suivante. Et continuons à explorer cette magie du design. 61. Cadres Nest, disposition automatique et restrictions dans Figma: Bienvenue. Nous compilons ici des fonctionnalités que nous avons déjà apprises Nous explorerons les cadres de nidification à l'intérieur de nos cadres. Nous aborderons la mise en page automatique. Nous allons également maîtriser les contraintes. L'objectif final est de créer des cartes réutilisables élégantes et évolutives qui peuvent être facilement personnalisées Comme vous pouvez le voir sur mon écran, j'ai un tas de cartes, que je peux simplement utiliser, réutiliser ou redimensionner, ou je peux les copier et les utiliser sur un autre projet. Dans cette journée, nous allons donc voir comment créer cette carte. Et pour cela, nous utilisons, comme je vais vous montrer quelque chose. Nous utilisons donc des cadres, des cadres imbriqués, ainsi que la mise en page automatique Comme vous pouvez le voir, nous combinons toutes les fonctionnalités avec une autre de cette bannière. Je sais que cette vidéo sera un peu longue et que certaines personnes pourraient penser qu'elle prête à confusion. Donc, avant que nous puissions éteindre votre téléphone. Passons à cette vidéo. Alors permettez-moi le suivre ici. Commençons par celui-ci. Donc, pour cela, je vais suivre un cadre. Nous pouvons dessiner un rectangle, mais avec un rectangle, les fonctionnalités sont limitées. Donc, avec les cadres, nous obtenons de nombreuses fonctionnalités. Je vais donc dessiner un cadre comme celui-ci. Permettez-moi donc d'activer mes colonnes. Il s'y intégrera donc parfaitement . Comme ça. OK. Maintenant, je vais y ajouter un remplissage. Faisons pour toi une couleur normale. C'est donc juste pour référence car la couleur du cadre et la couleur du dos sont donc invisibles pour moi. Actuellement, j'utilise la couleur naturelle, neurale ou non naturelle Réglons ce cadre sur des bords allant jusqu'à dix. Maintenant, ajoutons une image. Mais avant cela, il y a une fonctionnalité que je voudrais vous montrer. Nous devons donc créer cette image. Pour cela, il faut donc supprimer le fond de cette image. Je vais donc vous montrer comment nous pouvons le faire. Voici l'image. J'ai téléchargé depuis le site Web d'Apple. Mais comme vous pouvez le constater, son taux de bruit de fond est élevé. Je peux donc accéder à un tas de sites Web sur Internet, mais le processus est trop long. Vous pouvez utiliser mo BG ou Bago, un site Web groupé, mais cela prend du temps et du processus. Dans Figma, nous avons un plugin appelé benzine, nous pouvons donc utiliser ce plugin pour supprimer cet arrière-plan Mais pour utiliser ce plugin. Il y a un processus que vous devez suivre, comme configurer une clé pk Le processus est simple, il suffit de cliquer sur le fichier d'installation. Ensuite, rendez-vous sur le site Web et inscrivez-vous. Après votre inscription, vous devez accéder à des comptes. Et il y aura une option appelée paces. Allez-y, créez un nouveau pk, comme vous pouvez le voir, c'est une option ici Ensuite, il créera une clé, quelque chose comme ça, et la copiera et la collera dans Benzin Je sais qu'il existe un plugin de suppression de BG. Mais le problème avec le plugin hat, c'est que vous devez l'acheter après quelques essais. Donc pour cela, nous utilisons celui-ci. Je clique donc simplement sur le bouton Supprimer BG, cela le supprimera. Comme vous pouvez le constater, notre arrière-plan est totalement supprimé. Alors laissez-moi le redimensionner, redimensionner comme ça, et je vais le placer ici comme ça, mais nous devons recadrer ce mitch. Passons à Bill et OK, les images sont recadrées maintenant. Actuellement, cette image est hors de notre cadre, alors permettez-moi de l'intégrer à l'intérieur. Comme vous pouvez le constater, ce n'est pas destiné, donc je dois le faire. Encore une fois, c'est t. Maintenant, ajoutons un texte. Cela va être transféré sur iPhone. OK, j'ai donc ajouté ce texte sur le cadre, et il est dans le cadre, le cadre 36. Nous pouvons le renommer, alors laissez-moi le transformer en bannière. Bannière pour que nous puissions le faire encore et encore. OK. Maintenant, comme vous pouvez le voir, nous avons cette couleur orange, donc je vais l'ajouter. Donc pour cela, actuellement, nous ajoutons une nouvelle couleur, donc je sais qu'elle n'est pas très belle par rapport à celle-ci. Permettez-moi de passer à ce cadre , de le diviser et de choisir une image, et j'en ai une. Comme vous pouvez le voir, il y a une image correcte, j'ai donc utilisé la fonction de recadrage pour recadrer cette partie. Oh, désolée, j'ai choisi les différentes, alors laisse-moi passer à autre chose. OK, maintenant ça a l'air parfait. Mais je dois d'abord régler celui-ci. Le texte que je veux est censé être 34 34 pour Let's go a 24, 24, qui utilise des ovales et que je ne veux pas ouvrir OK, je vais choisir celui-ci, le casser et en faire 24. OK, maintenant nous avons du texte , de l'image et du panom, alors laissez-moi en changer la couleur Je vais en choisir une naturelle, une neutre. OK, alors permettez-moi d'ajouter la contrainte. Donc, si j'essaie de redimensionner ce cadre, comme vous pouvez le voir, il n'est pas redimensionnable car nous n'avons pas ajouté de contrainte Donc, pour cette image, la contrainte sera centrée et le poinçon, pour ce centre et ce dessus, sera parfait Maintenant, si j'essaie de le redimensionner ou redimensionner comme vous pouvez le voir, il est évolutif C'est donc environ un pourcentage. Je pense que le texte est trop long, alors laissez-moi en inventer 20. Et nous devons également ajouter le bouton « Shot now », donc je dois le mettre ici. OK, maintenant on en a fini avec ça. Maintenant, permettez-moi d'ajouter un texte. Et ça va être tourné maintenant et c'est trop gros. Alors laisse-moi bien faire les choses. OK. Passons à l'élément. Et nous l'avons déjà vu dans une vidéo. Lorsque nous créions des boutons, nous n'avions pas besoin d'ajouter un rectangle ou un cadre. Il nous suffisait nous n'avions pas besoin d'ajouter un rectangle ou un cadre donc de sélectionner ce texte à droite et de l'ajouter pour faire la mise en page. Maintenant, vous pouvez voir qu'il a du remplissage et des rembourrages, mais il n'a pas de champ Il est invisible à Fielty. Laissez-moi ajouter un filet et tout s'écaille. Allons-y avec celui-ci. OK, c'est trop parler. Je vais choisir celui-ci. Et permettez-moi d'ajouter les bords arrondis. Il doit être totalement rond. 20. Laissez-moi le redimensionner. Je vais donc appuyer, comme vous pouvez le voir, il change sur deux échelles. Alors maintenant, je peux le redimensionner comme ceci : appuyez dessus. Permettez-moi donc d'ajouter des contraintes. Ce sera au centre et en haut, au centre et en haut. OK. Parfait. Maintenant, si nous essayons de le réduire ou de le réduire, comme vous pouvez le constater, il reste au milieu. OK, nous avons donc ajouté la mise en page automatique. Supposons donc que vous vouliez changer ce texte en quelque chose d'autre, comme si je copiais celui-ci, donc d'accord. Supposons que je veuille ajouter autre chose : des scupons. Je sais que j'y ai joué, mais excusez-moi pour ça, quelque chose comme ça Comme vous pouvez le voir, avec Auto Lat, nous obtenons cette fonctionnalité de redimensionnement automatique avec ce bouton Nous n'avons donc pas besoin de le redimensionner manuellement. Voici comment Auto Late va nous aider. Donc, comme vous pouvez le voir, nous avons la mise en page automatique des cadres. Et si vous voulez ajouter cette image dans un cadre, vous pouvez tout à fait le faire, de sorte qu'elle deviendra un cadre. Comme vous pouvez le voir, un ordinateur central, et nous avons à l'intérieur un cadre supérieur. Et nous avons également une mise en page automatique. Cela semble un peu chaotique. La boutique numéro dix est coincée dans ces deux, elle n'a pas l' air très belle. Donc, d'abord, je vais le dissocier et le faire glisser vers le bas Permettez-moi de l'ajuster un peu à la baisse comme ceci. Maintenant, ça a l'air génial. OK, on peut l'ajuster comme ça. Maintenant, ça a l'air génial. OK, donc je peux maintenant supprimer celui-ci, celui-ci, et laisser moi ajouter la même chose ici. Nous devons en ajouter un tas. Je vais donc sélectionner toutes ces choses et vous devez passer à autre. Activons la colonne de création, et elle sera là Comme vous pouvez le voir, ça a l'air vraiment bien. Laisse-moi éteindre ça. On peut le faire glisser vers ça. Maintenant c'est totalement parfait. Je peux simplement cliquer dessus, s' il y a des cartes de réduction, pour qu'ils puissent également cliquer dessus et cela les redirigera vers cette tonalité de police. OK. C'est ainsi que nous utilisons les cadres, les cadres naturels, ainsi que l'automatique avec suffisamment d'une seule chose. Il y a une chose. Comme vous pouvez le voir, j'ai créé une carte. Il y a là quelque chose que je ne vous ai pas enseigné. Mais comme vous pouvez le constater, il y a une ombre sous cet iPhone. Comme vous pouvez le constater, cela donne de la personnalité à cette image. Ça n'a pas l'air si plat. Nous pouvons donc ajouter ceci à celui-ci. Mais d'abord, il y a une chose que je voudrais te dire. Comme vous pouvez le constater, ces visuels sont plus attrayants. Si vous êtes d'accord avec moi, merci de me le faire savoir. Parce que si je vais sur Amazon, comme vous pouvez le voir, cela a l'air dégoûtant, il n'y a aucune personnalité dans ces images. C'est comme s'ils étaient gardés là-bas sans aucune raison. Et si je passe à notre design. Donc, comme vous pouvez le voir, ça a l'air génial. Elle a une personnalité. Il a une image de fond ainsi que des piquets. Je me demandais donc pourquoi Amazon ne le faisait pas. Ils devraient suivre cette technique pour créer des fiches de produits vraiment incroyables comme celle-ci. D'accord, celui-ci est également réévolutif comme ça. Il y a une autre chose que j'ai oublié de mentionner, par exemple, j'utilise l'image qui n'a pas d'arrière-plan parce que cette image est superbe lorsqu'elle est transponnée comme ça Mais si je te montre une chose par ici. Supposons que nous ayons cette image, je vais la suivre dans notre interface et je vais la redimensionner Et si j'essaie de l' ajouter ici. Donc, comme vous pouvez le constater, ça n'a pas l'air génial. Il ne va pas avec notre baril et il a l'air vraiment sale. C'est pourquoi nous avons utilisé la méthode à distance. Comme vous pouvez le constater, le produit est bien meilleur et au moins il a une personnalité par rapport à celui-ci. C'est pourquoi j'utilise les images de transport. Cela dépend totalement de vous. C'est votre choix créatif. Si vous voulez utiliser une image comme celle-ci, vous pouvez l'utiliser. Permettez-moi de vous montrer une autre chose. J'aime ça, laissez-moi le supprimer, et si j'essaie de l' ajouter ici. Comme vous pouvez le constater, la couleur ne correspond pas, mais voyons si je supprime l'arrière-plan, il sera bien meilleur que celui-ci. C'est la technique que vous pouvez utiliser pour faire ressortir votre produit. Et voilà une autre application principale des cadres Esta, des et de la mise en page automatique J'espère que cela permettra de mieux comprendre ce concept. C'est donc l'emballage de cette vidéo. Je vous retrouverai dans le prochain, où nous poursuivrons notre voyage dans le monde passionnant du design figma. Alors, va voir des amis. 62. Techniques de disposition automatique avancées Figma: Bonjour, tout le monde. De cette façon, nous nous plongeons dans les techniques avancées du figma, explorant quelque chose comme la mise en page automatique avancée En plus de cela, nous triplerons la hauteur automatique du Magic Cub. Pour les zones de texte, les techniques vous permettront de passer au niveau supérieur en matière de conception, permettant un ajustement dynamique et suivi efficace des éléments. De cette façon, nous allons doubler la mise en page automatique. Comme vous pouvez le voir sur mon écran, j'ai trois cases. Et si, disons, je veux y ajouter quelque chose. Permettez-moi donc d'en savoir plus sur ce contenu, et si j'appuie dessus ici. Donc, comme vous pouvez le constater, les boîtes s'ajustent d'elles-mêmes. Nous n'avons pas à le cibler ou à l'ajuster manuellement ni à l'aligner à nouveau. Ainsi, lorsque nous avons configuré le multiple à la couche, si nous y insérons le conteneur, l' élément est poussé en conséquence. Voyons maintenant comment implémenter cela. J'ai cette page que j'ai créée plus tôt. Je viens de dupliquer cette page. Passons maintenant au cadre, dessinons un cadre comme celui-ci et laissez-moi parcourir ma colonne Je peux donc rentrer dedans. Pas moi, le cadre doit être ajusté à l'intérieur. Laissez-moi le rendre invisible. Permettez-moi d'ajouter quelques couleurs. Je vais ajouter des couleurs neutres comme celles-ci. Maintenant, cette page va ressembler à des informations générales. OK, donc tout d'abord, je voudrais ajouter une courte note sur cette page comme si ce produit était fabriqué à partir de matériaux réutilisables. Permettez-moi donc de l'ajouter ici, et nous allons ajouter des icônes réutilisables. Donc pour cela, je vais utiliser le plugin icons cot, et il existe un tas d'icônes bunchp que nous pouvons utiliser totalement gratuitement. C'est tellement gratuit. Et pour cela, je vais choisir celui-ci. OK, maintenant laisse-moi réutiliser. OK. OK, nous avons donc ajouté les icônes. Permettez-moi de clore ce point. Et je veux que chaque icône soit au maximum 20 car c'est trop gros. Et pour cela, je vais utiliser la propriété question. Si je clique dessus, comme vous pouvez le voir, cela devient comme une icône de chaîne, et si j'ai une place 20. Comme vous pouvez voir la largeur et la hauteur en même temps, nous n'avons pas à le faire manuellement encore et encore, comme dans ce cas. Donc, si je clique sur l'icône, si je la sélectionne, et si j'ajoute la valeur 20, comme vous pouvez le voir, j'ajoute simplement de la largeur et de la hauteur en même temps. OK, nous avons donc ces trois ions ici. Je pense que je devrais porter ce chiffre à 25. OK, maintenant ça a l'air super. Eh bien, laissez-moi sélectionner ceci. Laisse-moi le porter bien haut et juste en bas. OK, ils viennent juste d'arriver. Je vais donc dessiner une boîte, et y ajouter que ce produit est fabriqué avec au moins 20 % de recyclage contenu au poids. OK, donc ce sera notre simple note à ce sujet. OK, nous avons donc créé notre première carte. Permettez-moi d'ajouter les bords arrondis jusqu'à ce qui est mûr. Et maintenant, disons, je veux ajouter du contenu à l'intérieur. Supposons que je veuille ajouter ceci. Comme vous pouvez le voir, la zone de texte ne s' étend pas aussi bien que le mainframe, qui est celui-ci, le bleu Donc, dans ce cas, la mise en page automatique va nous aider. Mais avant d'utiliser la mise en page automatique, il y a une chose que je dois vous montrer : la fonction de hauteur automatique. Donc, actuellement, ce n'est pas une taille fixe. Et si je choisis la hauteur automatique, elle s'ajustera toute seule. Donc, si j'ajoute du texte aléatoire, comme celui-ci, comme vous pouvez le voir, la taille de la boîte s' ajuste d'elle-même. OK, nous en avons donc terminé avec celui-ci. Nous voulons maintenant ajuster le cadre, le cadre réel. Donc, pour cela, nous avons déjà appris que nous devions utiliser la mise en page automatique. Sélectionnons-les tous, puis cliquons sur la couche automatique. Comme vous pouvez le voir, le système fonctionne automatiquement, mais il a arrangé les autres éléments avec eux, comme la note avec les icônes. Je ne veux donc pas que cela figure sur cette carte. Donc, pour régler ce problème, nous pouvons faire la chose la plus simple. Nous pouvons tous les sélectionner. Les icônes, je veux que ce truc soit placé ici. Il ne se déplace ni ici ni ici. Il a donc été dissocié. Alors maintenant, permettez-moi d'ajouter cet interframe. Maintenant, si je les sélectionne tous, et si j'ai choisi la mise en page automatique. Comme vous pouvez le constater, il y est resté. Mais la boîte est tombée en panne. C'est à cause de la mise en page automatique, la mise en page automatique fait toujours cette chose étrange. Maintenant, permettez-moi d'ajouter une autre colonne. Maintenant, si j'essaie d'ajouter quelque chose à l'intérieur de cette boîte, comme vous pouvez le voir, la boîte s'étend, mais elle ne bouge pas. Il reste au même endroit. Donc, ce que nous voulons dans ce scénario c' est qu'il se déplace en fonction de notre contenu, comme vous pouvez le voir, si j'ajoute quelque chose ici, comme vous pouvez le voir, la boîte se déplace. Nous voulons donc la même chose ici. Donc, pour cela, nous utilisons la mise en page automatique. Cela revient donc à doubler notre fonction de chargement automatique. Je sais que le vieillissement automatique est déjà un sujet un peu confus, et nous appliquons le même butin automatique à deux choses Donc, si nous ne comprenons pas cette partie, regardez-la à nouveau car elle est un peu confuse Alors laissez-moi vous expliquer comment cela fonctionne. Pour cela, nous devons utiliser la mise à pied automatique. Mais avant cela, permettez-moi d'en sélectionner deux. Maintenant, les deux éléments sont sélectionnés comme vous pouvez le voir dans le panneau de conception. Le cadre 41 et le cadre 42 sont ces deux cadres, et ce sont des couches automatiques. Le symbole est ici. Maintenant, nous devons à nouveau appliquer la mise en page automatique. C'est ce qu'on appelle le double lot automatique et cliquez sur le bouton Auto Lod plus le bouton. Et laissez-moi vous montrer dans le panneau de conception. Pas dans le panneau des calques. Dans Autode, nous avons la mise en page automatique imbriquée. Maintenant, si j'y ajoute du texte. Supposons que vous souhaitiez ajouter de nouveaux détails à cette note, par exemple utiliser de l' eau réutilisable ou quelque chose comme des pailles Vous pouvez donc simplement l'ajouter et vous pouvez voir la boîte s'ajuste automatiquement d'elle-même. Nous n'avons pas besoin de le régler manuellement encore et encore. Et c'est totalement réutilisable. Donc, pour la copie, je vais sélectionner celui-ci, et je vais utiliser Control D, raccourci, et nous ajouterons une autre case. Et cette fonctionnalité fonctionnera également avec cette boîte. Disons si j'ajoute du texte. Comme vous pouvez le constater, cela fonctionne totalement. Bien. OK, donc ça n'a pas l'air génial. Je sais que ce n'est pas la véritable méthode pour concevoir les détails du produit. Supposons que nous voulions ajouter plusieurs éléments à notre design en utilisant ces voitures, et que nous n'ayons pas à le concevoir encore et encore réorganiser ou à le réaligner Donc, dans ce cas, nous allons utiliser plusieurs fonctionnalités de mise en page automatique. Maintenant, nous pouvons simplement ajouter quelques informations telles que les détails du produit ainsi que cette promotion, comme ceci. Et laissez-moi d'abord supprimer celui-ci. OK, il y a donc un espace vide, je suppose. Et permettez-moi d'ajouter juste les marges : c'est ce qu'on appelle les rembourrages Il suffit donc de les supprimer. Oh, mais j'ai fait une erreur. Je peux accéder au texte, et je peux simplement cliquer sur cet espace vide. Et tant que j' ai un endroit où travailler. Maintenant, je peux ajouter de l'utilisation Et dans les critiques, je vais ajouter, avec le premier à commenter le Jordan Triplex One R P. D'accord, c'est un nom assez connu pour les problèmes OK, vous avez donc une plongée approfondie dans la fonctionnalité avancée de Figma J'espère que cette vidéo témoignera de votre compréhension et donnera du piquant à votre créativité dans vos créations. C'est donc un rappeur pour cette session. Mais il y a une chose que je voudrais te dire. Je connais la voiture ou un peu confuse. Alors regardez cette vidéo encore et encore et entraînez-vous sur plusieurs images. C'est donc un rappeur pour cette session. Alors rendez-vous dans la prochaine vidéo. Nous continuerons à explorer les aspects passionnants de Figma, donc bonne conception 63. Projet de cours 10 : un design qui s'adapte : créer des mises en page réactives dans Figma: Vous, les concepteurs, les créateurs de fichiers, avez obtenu ce projet génial pour vous permettre de développer vos muscles d'interface utilisateur. Vous allez créer des boutons et des menus super sympas qui ne seront pas innovants, mais aussi accrocheurs. Pensez à multiplier les surprises, étirer la bonté et à réagir à la magie. Donc, tout d' abord, vous devez concevoir ce bouton, le bouton de protection A. Ensuite, vous devez concevoir la page du produit. Je sais que je l'ai oublié, et je m'en excuse déjà. Donc, n'entrez pas dans le commentaire en disant que vous avez oublié les détails du produit. Il en va de même pour la page de définition du produit et pour la conception de la page détaillée du produit. Ensuite, nous allons concevoir cette barre de navigation mobile extensible Concevez donc cette barre de navigation comme elle devait s'adapter à des écrans comme celui-ci. Et après cela, vous devez concevoir ces petites voitures pour nos produits. Et pour cela, vous devez utiliser la contrainte, la mise en page automatique et Mr. Frames. Et à la fin, vous devez concevoir les superbes cartes à ajustement automatique. OK. Donc, une fois les projets terminés, vous connaissez la marche à suivre. Prenez une capture d'écran et soumettez la section des procs. Vous pouvez également soumettre sur le réseau social, vous pouvez m'y taguer. Alors laisse-moi te montrer ici. Encore une fois, vous devez d'abord concevoir cette page de perçage du produit après le bouton Atoll, après ces vignettes Les carreaux pour nos produits, et cela doit être une contrainte réutilisable. Ensuite, vous pouvez concevoir ces voitures à réglage automatique. sommes donc prêts à vous faire marquer ce mot de l'interface utilisateur, alors allons-y. 64. Comment créer de belles ombres avec Figma: Salut, les gars, bon retour. Ce jour, nous plongeons dans le monde profond des ombres de Figma et de ses effets Pas n'importe quelle ombre, mais le plus cool de la ville, Drop Shadow et in the Shadow Bug, car nous sommes sur le point d' exploiter tout leur potentiel Voyons donc d'abord ce que sont l'ombre tombante et l'ombre intérieure. Comme vous pouvez le voir, j'ai deux exemples sur mon écran. La première est cette ombre projetée, et celle-ci est l'exemple de l'ombre intérieure tout comme celle-ci. Il s'agit de l' ombre tombante, et voici l'ombre intérieure de la corde Imaginez que vous tenez une carte dans votre main et que la lumière qui la frappe crée une zone sombre en dessous, la lumière qui la frappe crée n'est-ce pas ? C'est donc une ombre en corde. Désormais, les ombres intérieures ressemblent à des tunnels, créant une profondeur à l'intérieur d'un objet, comme un bouton ou une page de carte. Comme vous pouvez le voir ici et ici aussi, et ici aussi. Bon, voyons maintenant comment créer des boutons en utilisant l' ombre portée et l'ombre intérieure. Comme vous pouvez le voir, j' ai ce design, et si je clique dessus, comme vous pouvez le voir, cette magie opère. Il est passé du mode clair au mode sombre. Et il y a aussi de la colle dessus. Nous avons donc créé en utilisant drop shadow et shadow, alors laissez-moi clore celui-ci. Et laissez-moi d'abord vous expliquer comment fonctionne Drop Shadow sur les boutons. OK, nous l'avons donc créé sur le bouton C, alors laissez-moi le suivre ici et créer celui-ci. Je n'utilise généralement pas le raccourcisseur parce que j'aime bien ces icônes de vol. Comme vous pouvez le constater, cela correspond parfaitement à notre design. Mais si votre design nécessite le ropshodo ou une ombre, ou si vous voulez faire ressortir votre bouton pour pouvoir utiliser l' Et je vais vous donner un exemple. Je vais vous montrer un exemple où vous pouvez utiliser une ombre portée et une ombre. Donc, actuellement, cela n'a aucun effet. suffit donc de cliquer dessus et d' aller dans le panneau de conception, et à la fin, nous avons des effets. Cliquez donc sur ce bouton plus, et par défaut, nous l'appelons drop shadow, et comme vous pouvez le voir, cela lui a ajouté un peu d'ombre. Si je ferme les yeux, comme vous pouvez le voir, il y a une goutte de moins. Et maintenant, il y a une ombre. Ce sont les valeurs par défaut, mais nous pouvons maintenant les fixer en fonction de nos besoins. exemple, disons qu'actuellement, drop shadow y est de quatre, donc si je l'augmente, comme vous pouvez le voir, la position Y change, comme ça. Et vous pouvez également changer x , comme ceci. Et vous pouvez également l' étaler ici, et vous pouvez y ajouter du flou C'est ainsi que vous ajustez l'ombre portée, mais j'aime bien ça. Par défaut, il ressemble très bien à celui-ci. Et maintenant, il y a une chose. Vous pouvez modifier la couleur de l' ombre. Actuellement, il est noir. Vous pouvez le changer en droit ou en autre chose, comme vous le souhaitez. OK, regardons en jaune et toujours en bleu. Comme nous le voyons, il y a une ombre en U sous ce tunnel. Ça a l'air cool, bleu et jaune, ça va vraiment bien ensemble. OK, c'est comme ça qu'on ajoute de l'ombre. Mais maintenant, disons, je voudrais ajouter une ombre. Donc dans ce cas, ce que je peux faire, c'est que je peux d'abord supprimer celui-ci. Parce que je n'en veux pas. Passons maintenant à l'action. Nous avons quatre options ici : le sac Shadow Layer et le Bagger Blur Donc, dans ce cas, je veux être dans l'ombre. Comme vous pouvez le voir, nous nous sommes retrouvés dans l'ombre. Supposons que nous ayons deux pages comme celle-ci et que nous les ayons prototypées Et si je clique dessus, ça se transformera en ceci. Permettez-moi donc de vous montrer l'exemple de son fonctionnement . J'ai créé celui-ci. Celui-ci a une ombre tombante et celui-ci a une ombre intérieure. Maintenant, si je passe au prototype et au flux, et si je clique dessus. Comme vous pouvez le voir, cela crée cet effet lorsque nous appuyons sur le bouton, et il y a un effet que j'ai créé, comme si je faisais glisser le pointeur dessus pour créer cette animation. Ça a l'air vraiment cool. C'est ainsi que fonctionne l'ombre intérieure. Nous pouvons également faire la même chose, par exemple en y ajoutant des couleurs. Actuellement en prototype, passons au design in a shadow. Laissez-moi le changer en jaune industriel. Et permettez-moi d'ajouter ceci. OK, permettez-moi d'ajouter le coup et de changer le X et le Y, comme ça. Je sais que ça a l'air vraiment dégoûtant, mais tu peux l'ajouter comme ça. Je pense que j'en ajoute trop. OK, comme ça. OK, c'est une potion normale, et c'est en appuyant sur le bouton. J'espère que tu comprends l' ombre tombée et l'ombre. Alors laissez-moi vous dire quand vous pouvez utiliser Drop Shadow. Par exemple, si vous voulez faire apparaître votre bouton, vous pouvez utiliser Drop Shadow. Il donne à votre bouton une durée de vie cliquable grâce à une ombre subtile Il vous dit : « Hé, je suis là pour appuyer. Alors pressez-moi, et je vous montre déjà dans cet exemple, comme ici, où cela s'est passé. OK. Oh, ici. Comme vous pouvez le constater. Il y a un drop shot, je suppose, M. Comme vous pouvez le voir, celui-ci a un drop shader et celui-ci n'a pas de drop shadow Mais comme vous pouvez le constater , l'image avec une ombre projetée semble plus cool que celle-ci car elle apparaît sur cette carte. Vous pouvez surélever vos voitures à partir d' élément flottant rectangulaire plat avec une ombre tombante bien placée Donc, un point bonus si vous jouez avec un flou et un spread. Donc, dans ce cas, j'espère avoir joué avec, comme vous pouvez le voir. J'en ajoute quatre. Mais je peux ajouter ce que je veux selon mes besoins. Je peux également utiliser Drop Shadow pour ajouter du contenu, comme utiliser Drop Shadow qui séparera l'objet du dbro. Comme vous pouvez le voir, dans ce cas, il se sépare à cause de l'ombre portée, qui rend notre design plus attrayant à regarder Il ne semble pas coagulé. OK, il y a donc quelques exemples de drop shot in a shadow. J'ai donc une mission à vous confier. Mettez donc cette vidéo en pause et essayez de recréer cet effet. J'utilise Drop Shot pour cela, et je l'utilise en abrégé pour cela, pareil pour celui-ci. Mettez la vidéo en pause et procédez comme suit. Et je vais vous montrer comment créer cela. Essayez donc par vous-même. Vous saurez comment faire tomber une ombre, et dans une ombre, cela fonctionne. Ensuite, je vais vous montrer comment créer cela. J' utilise un effet de lumière, je la vidéo en pause et mieux encore. OK, j'espère que tu l'as fait et j'espère que tu apprendras à faire tomber une ombre et à travailler dans une ombre. Maintenant, je vais vous montrer comment créer ces boutons. Comme vous pouvez le voir, j'ai utilisé dans une ombre, à l'intérieur, dans une ombre. Laissez-moi créer celui-ci. Laisse-moi créer ici. Je vais utiliser un rectangle. Petit rectangle, et il va être totalement arrondi comme ça. Et laissez-moi prendre une ellipse. Laissez-moi vérifier la couleur. Je ne veux pas celui-ci. Je veux celui-ci, et tu dois être bleu. Bleu-bleu Je crois que ça s'appelle Turc Turc. J'ai vraiment fait une erreur en nommant la couleur. Donc, actuellement, il n'y a pas d'ombres, alors permettez-moi d'ajouter l'ombre intérieure. Cela lui donnera de la profondeur. En fait, dans l'ombre. Bf a l'air super, donc je ne vais rien ajouter. Je voudrais ajouter une ombre à celui-ci. Et je vais ajouter un peu de flou comme celui-ci, en plus de celui-ci. Subtil. Flou subtil Et maintenant, créons la même chose ici. Permettez-moi de le copier, faire glisser ici et de le placer ici comme ça, et je vais changer de couleur. Je vais donc utiliser celle-ci, et c'est et ce sera notre couleur neutre Ou on peut le rendre blanc. Il possède également une ombre intérieure et celui-ci a une ombre tombante. Avant cela, laissez-moi vous montrer comment cela fonctionne. Passons au prototype, et si je clique sur ce bouton, à cette action, et je mets une animation intelligente, pour qu'elle ait cet effet de glissement. Alors laisse-moi te parler. Comme vous allez le dire, cela fonctionne, mais actuellement, cela ne fonctionne pas autrement. Permettez-moi donc également d'ajouter un effet cliquable sur ce cadre. Maintenant, si je l'ajoute , comme vous pouvez le voir, les deux fonctionnent, mais cela n'a pas un si faible effet. Oh, oui. Alors allons-y et ajoutons ce faible effet. C'est donc très simple. Il suffit d'aller dans le panneau de conception et de le sélectionner pour l'arrondir. Rectangulaire. Passons maintenant à l' effet et à l'ombre projetée, et modifions une partie de la répartition. Ajoutons, augmentons le flou, augmentons la dispersion. Actuellement, il est noir, donc il n'est pas visible, et laissez-moi le changer en blanc comme ça. Et faisons une pâte à tartiner. Un truc comme ça, et réglons le flou Comme vous pouvez le voir, nous avons trouvé le flou. Et si je passe maintenant au prototype et à son flux, et si je clique dessus , comme vous pouvez le voir, l'effet de lueur est terminé. C'est ainsi que nous avons créé cette ambiance sombre et plus claire en utilisant ces motifs. Comme vous pouvez le voir, cela a l'air vraiment cool et c'est vraiment additif. Je sais qu'il y a une application sur Plast Dans cette application, il n'y a rien. Il n' y a qu'un seul bouton. Il suffit de cliquer dessus, et ça marche. Je crois que je l'ai vu, je l'ai probablement utilisé. Je ne sais pas pourquoi mais je l'ai utilisé. Ce n'est qu'une application, et il suffit d'appuyer sur un bouton. N'oubliez pas que ces effets sont des touches subtiles qui passent souvent inaperçues Mais lorsqu'ils sont bien faits, ils contrebalancent le signal téléphonique à l'esthétique globale Évitez de passer par-dessus bord. Si quelqu'un remarque votre drop shot, vous êtes probablement allé trop loin. Il y a donc quelques exemples que je veux vous montrer, comme celui-ci. Donc, comme vous pouvez le voir, dans ce cas, ils utilisent le drop shot, et ils sont vraiment subtils. Comme vous pouvez le constater, nous utilisons le même effet ici. s'agit d'un ensemble normal et lorsque nous appuyons sur le bouton, cela crée une ombre, et ils l'utilisent pour la barre de surtension, ainsi que pour la barre de chargement, pour ce texte, ainsi que pour cette barre d'analyse, ainsi que pour le bascule Nous l'avons fait petit. Merci donc de m' avoir rejoint dans cette exploration de l'ombre. N'oubliez donc pas que les ombres sont des outils électriques. Nous les utilisons à bon escient. Pour les concevoir de manière évaluative et les rendre vraiment éclatants. Alors à la prochaine pour une autre aventure Figma. 65. Comment créer un flou d'arrière-plan et un flou en calques dans Figma: Par les maîtres réunis. Aujourd'hui, nous utilisons des arêtes vives pour créer une touche de rêve avec un flou d' arrière-plan et un flou Préparez-vous donc à ajouter de la profondeur, de la concentration et une touche artistique à votre design Imaginez que vous plissez les yeux devant l' écran de votre téléphone au soleil C'est donc un peu ce que fait le flou. C'est un élément légèrement adouci qui crée un effet thal lourd. Voyons donc ce qu' est le flou d'arrière-plan. Ce sera donc notre deuxième projet J'ai créé ce petit panneau comme Sarge Bar Nous avons créé ce sac Zinger Acc. Dans les effets, nous y utilisons du flou de pagode Dans ce constructeur, nous allons donc le reproduire. Je sais que nous ne sommes pas censés nous lancer directement dans le projet 2, mais je dois aborder le panneau des effets, c'est ce que nous faisons dans cette vidéo. Voyons donc ce qu'est flou des sacs et comment il fonctionne dans notre interface utilisateur C'est comme un filtre à fenêtre magique. Votre contenu principal est net et clair tandis que l'ensacheuse se fond dans un flou onirique Il met en évidence les clés et les éléments. Il fait ressortir l'image ou le texte de notre héros en floutant l'arrière-plan et attirant tous les regards sur la vedette de la série Dans ce cas, la vedette de l'émission est Book Book Now et cette recherche s'écoule. Lorsque vous souhaitez créer un panneau dans une affiche de film, ajoutez le flou Bagger Il ajoute une touche de drame et de mystère. Il crée également une expérience immersive. exemple, cela donne à nos utilisateurs l' impression d'explorer un monde virtuel en passant doucement le bord de leur écran. Nous savons donc tout sur le ban blur. Passons maintenant à Figma et créons un flou de grange. Je l'ai donc pour le cadre 45. Allons donc insérer des pixels, et je vais chercher des montagnes. Et il y a plein de photos, mais celle-ci est l'une de mes préférées. Cela a cet effet de lever de soleil sur elle. Je vais donc placer ce H ici. Fermez le sunless, ajoutez un traggle ou vous pouvez également dessiner un cadre. Actuellement, le champ est de 100 %. Vous pouvez ajouter une sorte d'effet de fond sur cet octet en diminuant le champ de 50 %. Comme vous pouvez le constater, cela ajoute du bluff à la libération conditionnelle, mais cela n'a pas l'air très beau Donc, actuellement, je vais me contenter à 100 %, et nous pouvons passer à l'action. Passons maintenant au sac sur le flou. Je sais que cela ne rapporte rien, mais il faut maintenant ajouter le champ. Il faut que ce soit 50 %. Comparé au fichier, il a l'air génial. Et permettez-moi d'en ajouter quelques arrondis. OK, maintenant nous avons un sac sur le flou. C'était si facile. Nous pouvons maintenant ajouter ce flou. Comme vous pouvez le constater, ce n'était pas à cause de la sensation. On ne peut pas ajuster ce type de flou au toucher. Ça a l'air génial. Il y a encore une chose. Nous pouvons ajouter un effecteur de dégradé. Ça a l'air vraiment cool. Permettez-moi d'ajouter de la couleur verte. Allons remplir. Actuellement, il est de couleur normale, choisissez le dégradé, et nous avons obtenu cet effet. Comme vous pouvez le voir, la pièce est transparente, invisible. Je peux créer comme ça. Laissez-moi choisir cette couleur . Choisissons le rose, et choisissons celle-ci. Traumatisant. Moi, ça a l'air super. Ou il y a une chose que vous pouvez également rendre transparente. Actuellement, je suis obsédée par cette section, le vert à 100 %. Laisse-moi en faire 50. Vous pouvez donc voir que cela semble plus esthétique maintenant. C'est ainsi que nous créons le flou de marque. Et il y a une chose : vous pouvez également ajouter un drop shot pour qu'il apparaisse. Claquez le rectangle. Ajoutez et je veux ajouter un drop shot, donc cela ajoute déjà un drop shot, et nous pouvons y remédier si vous le souhaitez. Faisons en sorte qu' un drop shot augmente le flou Et continuons. OK. Comme ça. Comme vous pouvez le voir, il a l'air plus cool. Cela dépend totalement de votre design. Si vous voulez l'ajouter, ajoutez-le, ou vous pouvez totalement l'ignorer. Il y a encore une chose importante. Supposons que vous ayez plusieurs cadres. Pas de cadre. Imaginons qu' il s'agisse d'un écran d'iPad et que vous vouliez qu'il en soit de même ici. Mais ce truc est dans un autre design. Vous pouvez donc créer un style. Sélectionnez même ce cadre. Allez dans les effets, cliquez dessus, sur un style, sur PG Blow. Tu peux le nommer comme tu veux. Je vais donner ce BG Blow, créer un style, et je veux que tu ailles bien, donc j'ai cette saga. Je vais choisir Gil. Comme vous allez le dire, cela a ajouté du travail. Comme vous pouvez le constater, cela a ajouté du flou, mais gardez à l'esprit que vous devez réduire le champ Donc actuellement, c'est 100 %, donc je vais en garder 50, mais laissez-moi changer la couleur de ce cadre. OK, nous avons donc trouvé notre style. OK. Tout tourne autour de Background Blow. Découvrons maintenant le flou des couches. Il s'agit donc d' ajouter du jaune doux autour d'un objet spécifique, comme si vous mettiez une lumière douce sur votre élément de design Supposons que nous ayons un seul bouton comme celui-ci, et que nous voulions que les coins soient entourés ou que les bords soient souples. Dans ce cas, nous pouvons donc l'utiliser. Cela nous aide également lorsque nous voulons distinguer les éléments qui se chevauchent dans notre design, car nous avons de nombreuses couches, et si nous utilisons le flou des couches, cela peut créer une séparation certaine en gardant ces éléments propres et faciles à lire Il avait également une profondeur subtile, sorte que nos éléments ou nos formes paraissent plus texturés et plus vivants. Comme vous pouvez le voir, j' ai ce cadre 46, et j'ai un design vraiment cool, et je l'ai créé en utilisant le flou des couches Permettez-moi donc de vous expliquer comment fonctionne le flou des couches. Je vais choisir le rectangle. Et laissez-moi le dessiner ici comme ceci. Je vais le changer Pink que vers 30 ans. OK, maintenant passons à l'effet. Et le flou des couches. Si je zoome, comme vous pouvez le voir, les bords sont flous Je peux augmenter les plurins. Comme vous pouvez le voir, il fond avec notre pagron crée un effet noisette sur les Il y a quelques conseils que je voudrais donner. N'y allez pas à fond. Commencez par un faible flou et augmentez-le progressivement jusqu'à ce que vous trouviez le point idéal, comme dans ce cas Colors matters Testez les différentes couleurs de flou en fonction de votre thème de design OK, maintenant vous apprenez tout sur le flou du sac, ainsi que sur le flou des couches Il y a donc une mission. C'est une mission vraiment petite et facile. Alors allez sur Figma et essayez de le recréer. J'y ai appliqué un coup de couche, et le coup de couche est trop élevé 400 et il y a trois cercles. Ces deux cercles sont unis, et celui-ci a un cercle normal, mais je lui ai appliqué un dégradé, donc ça ressemble à ceci. Oui, donc tout tourne autour de ce design. Alors, qu'est-ce que cela va faire et essayer de le recréer ? Je vais également vous montrer comment le faire. Alors vas-y et fais-le. Je vais te sauver dans quelques minutes. OK, étudiants, j'espère que vous l'avez fait, eh bien, laissez-moi le décorer à nouveau. OK, ce sera mon cadre pour sept personnes et permettez-moi d'ajouter les arêtes 30. Et vous pouvez totalement ignorer les bords, mais avec les bords arrondis, c'est vraiment cool. Je vais donc choisir la couleur pour celle-ci, et je vais ajouter un cercle, les lèvres je vais dessiner les cercles. Mais d'abord, je veux que cette couleur soit celle-ci. Ce n'est pas orange, mais c'est orange. Maintenant, je vais dupliquer deux cercles et celui-ci. Laisse-moi entrer. Tu sais comment t'y prendre. Il suffit de les sélectionner tous les deux et de cliquer sur ce bouton, ou vous pouvez accéder à O U et même à la sélection. C'est ici maintenant, alors laisse-moi faire une rotation de 90 comme ça. Passons maintenant aux effets et choisissons le flou des calques. Allons-y avec 400. Maintenant je peux le garder ici. Maintenant, je peux choisir une couleur dégradée. Je peux juste l' ajouter ici comme ça. Oui, c'est ainsi que nous créons cette œuvre d'art vraiment géniale. Fa n'est pas simplement un outil Y. Si vous souhaitez l'utiliser comme outil graphique , vous pouvez totalement l'utiliser. Je sais qu'il y a quelques erreurs. Ça a l'air vraiment bien et ça n'a pas l'air génial. Mais j'avais besoin de temps, mais je dois terminer cette vidéo très rapidement, alors j'ai créé celle-ci. D'accord, vous pouvez également le créer avec style, et si vous souhaitez l' utiliser dans votre design, nous pouvons le réutiliser encore et encore. D'accord, ces effets peuvent sembler simples, mais lorsqu'ils sont utilisés de manière réfléchie, ils peuvent considérablement améliorer l' attrait visuel de vos créations N'oubliez donc pas que c'est certainement la clé, et que chaque effet a un objectif précis en donnant vie à votre design. Alors, retrouvez d'autres trucs et astuces de design dans la prochaine vidéo. 66. Fiesta d'effets funky du projet 11: Salut, famille Pigma, bienvenue au projet numéro 11. Nous plongeons dans le monde merveilleux des ombres, des flous et de ces boutons souples et satisfaisants. Il y a donc certaines étapes que vous devez suivre. La première étape consiste à lire le manuel et à profiter du terrain de jeu. Pour les règles de conception stopi. Considérez le projet Pigma comme votre terrain de jeu. Il ne s'agit pas d'un test moins exorant, d'avoir fourrure et de faire quelque chose de vraiment accrocheur Maintenant, la deuxième étape consiste à sélectionner un bouton, une image ou même un texte. Imaginez maintenant que vous laissez tomber une source de lumière au-dessus. Appuyez sur le bouton Drop Shadow dans Figma et faites en sorte qu'il apparaisse à l'écran Je sais que tu te sens peut-être chic, alors tu peux essayer dans une ombre ensuite. Cela donne cet effet cool three. Donnez à votre bouton l'apparence d'une courbe dès la sortie de cet écran. Étape numéro trois, décollage. Si vous souhaitez mettre en évidence quelque chose de spécial, sélectionnez un élément et ajoutez un flou Tucholaer Cela crée une ambiance rêveuse sur le bord, mettant ainsi en lumière votre héros du design Et vous pouvez également utiliser l'effet de flou d' arrière-plan. C'est comme de la magie. Votre contenu principal passe au premier plan, laissant derrière vous la beauté. C'est un peu un état de rêve flou, et la quatrième étape consiste à montrer et à indiquer l'heure. Maintenant, partageons votre chef-d'œuvre avec le monde entier. Prenez une capture d'écran pour capturer la magie de votre design, puis téléchargez-la en projection et montrez vos compétences. Et tu veux propager l'amour de Figma un peu plus loin Vous pouvez le télécharger sur les réseaux sociaux. Et tu m'emmènes aussi. N'oubliez pas que ce projet Fuma est entièrement axé sur le plaisir et l'expérimentation N'ayez pas peur d'obtenir des crédits, peaufiner les choses et d' apprendre les uns des autres, de partager vos conseils et astuces dans les commentaires, et voyons quel design incroyable vous allez créer Je te verrai donc dans le prochain. 67. Comment enregistrer vos dossiers Figma sur l'ordinateur et comment accéder à l'histoire de Figma: Bienvenue par les étudiants. Avez-vous déjà eu l'impression de perdre la précision de votre maître du design Donc pas aujourd'hui, nous plongeons dans le monde de Figma file Save Nous allons très bien apprendre comment enregistrer votre fichier localement. Gardez une trace de l'historique des versions de chaque semaine. Donc, plus de peine de design, juste une pure tranquillité d'esprit Commençons donc par la façon d' enregistrer votre fichier localement. Imaginez que votre ordinateur dispose d'un coffre-fort sophistiqué pour vos fichiers Figma C'est ce qu'il fait pour économiser au niveau local. Il crée vous-même une copie de votre design. Appareil distinct du cloud. Il suffit de penser que cela peut nous donner un accès hors ligne. Lorsque nous devons travailler sur notre design sans connexion Internet, une copie locale est à la rescousse Cela soutient donc également le bonheur. En quelque sorte, le fichier est corrompu. Il ne sera pas corrompu car il s'agit d'un service cloud. Il fonctionne sur le cloud. Disons que Figma a un problème ou quelque chose comme ça. Donc, dans ce cas, la copie locale inférieure est cloisonnée. Alors allons-y et découvrons comment enregistrer notre design localement. Et comme vous pouvez le constater, le panneau de conception est un peu différent car nous sommes actuellement dans l'historique des versions, alors laissez-moi m'en débarrasser. OK, donc c'est simple. Accédez simplement aux fichiers. Ce sera ici, le fiigmgo. Dans ce cas, nous avons une copie locale en vente, cliquez dessus, et le téléchargement se fera en moyenne, comme si nous avions sept images sur sept pages Et comme vous pouvez le voir, notre projet est un projet vierge découpé en un clic, et c'est un tas de figues. L'extension est fig. Si je clique sur la vente, et si je passe à l'âge du fichier, comme vous pouvez le voir, c'est par ici. Et il s'appelle Clicker Virgin One, et c'est une extension de FIC que vous pouvez partager directement avec n'importe qui, par Gmail, WhatsApp Telegram, et après cela, ils peuvent simplement l'ouvrir dans Figma car il s'agit du fichier Figma OK, c'est ainsi que vous pouvez économiser localement. Maintenant, découvrons le monde de l'historique des versions. L T de l'historique des versions comme machine à voyager dans le temps pour votre design. Plus de couches exécutées ou supprimées accidentellement. Il suffit donc de remonter le temps et de choisir la version parfaite. Pour l'historique des versions, nous pouvons opter pour deux méthodes. Comme dans le premier cas, vous pouvez aller ici, et cela vous montrera que la première option est d'afficher l'historique des versions. Et dans ce panneau de conception, nous avons l'historique des versions. Et vous pouvez le filtrer, vous pouvez ajouter un nouvel historique des versions. Avec la version gratuite de figma, nous avons 30 jours d'historique des versions Et cela permet de sauver tout le secteur, mais vous devez payer. Si vous souhaitez accéder à l'ancien fichier. Comme vous pouvez le voir, c'est ici, mais nous devons payer pour cela. Et disons que je veux accéder au fichier à partir du 10 décembre 11 à 13 h 00 si je clique dessus. Comme vous pouvez le constater ce jour-là, je viens de créer ces pages sur l'application Click Card, il y en a cinq, ne vous inquiétez pas. Nous n'avons pas perdu notre design. Si je clique simplement sur le tour, cela ramènera notre version actuelle, comme vous pouvez le voir ici. Passons donc à l'industrie des organisations. Et il y a encore une chose. Tu peux donner un nom à l'histoire de ta vierge. Je sais que c'est un élément vraiment intéressant et que c'est vraiment une bonne pratique à suivre. Mais le problème, c'est que je travaille en solo, donc je ne lui donne pas de nom. Donc je me souviens de tout. Et je n'ai pas besoin d' entrer dans l'histoire des vierges. Supposons que vous travailliez avec votre équipe et que si New Joini commet des erreurs, vous pouvez simplement consulter n'importe quelle histoire vierge et sauvegarder votre ancien design C'est donc une question de plus. Et il y a encore une chose. Bon, disons que je veux dupliquer ce fichier du 19 décembre. Je peux cliquer sur le duplicata et le fichier s'ouvrira ici. Laissez-moi vous montrer comment cela fonctionne. Supposons que je veuille l'ouvrir le 19 décembre, nous le concevons si je clique dessus et si je clique sur Dupliquer, il dupliquera le fichier et il s'ouvrira séparément, ainsi que O ici dans la page d'accueil. Et si 1719, nous avons fait ces choses comme créer une page de design, et nous allons apprendre comment créer bouton en utilisant Auto Yes, nous l'avons fait ce jour-là. OK. Si je rentre chez moi, comme vous pouvez le voir, c'est la copie. Cela montre qu'il s'agit de la copie de celui-ci et de son design principal. À moins que vous ne vouliez restaurer votre design. Nous sommes donc actuellement en 1919. Et si vous souhaitez restaurer ce design, si vous cliquez dessus, tout ce que vous avez créé à partir de ces deux éléments sera supprimé. Donc, en appuyant sur ce bouton, vous pouvez copier le lien et le définir sur n'importe qui. C'est donc basique. OK, laissez-moi clore celui-ci parce que nous en avons besoin, et je vais terminer, et je veux ma version actuelle. Donc ça va être ma version actuelle. Laissez-moi vous montrer comment je gâche les choses ici. Comme vous pouvez le voir, mon erreur lors de la conception de l'application. C'est ce que je fais toujours. Lorsque je crée un nouveau projet, je pense toujours que cette fois, je ne vais pas me tromper, mais à chaque fois je me trompe comme ça. OK, il y a donc certains points dont tu dois te souvenir. L'épargne locale ne remplace pas l'épargne dans le cloud, mais constitue un excellent loyer sûr supplémentaire. Virgin History ne conserve qu' un nombre limité de versions antérieures, alors faites des économies judicieuses, et le partage fichiers locaux nécessite de les envoyer manuellement , contrairement à Cloud comme le design Bien, voyons maintenant dans quel cas nous aurons besoin de l'historique des versions. Supposons que vous ayez accidentellement supprimé un composant crucial ou le design d'une section entière, supprimiez ergomnupage Donc, dans cette version, il vous permet toujours de voyager dans le temps et de le restaurer, vous évitant ainsi notre travail. Je sais que parfois nous prenons des décisions de design, vous regrettez d'avoir choisi la mauvaise couleur ou la mauvaise forme. Donc, pas de soucis, il suffit de revenir aux versions précédentes, donc là où elles étaient, toujours parfaites Grâce à la virginité, nous pouvons expérimenter en toute confiance, comme nous pouvons essayer nouvelles idées audacieuses ou expérimenter une mise en page différente sans craindre de perdre votre Si les choses doivent revenir à une version stable et repartir à zéro. Jouez avec différents styles visuels ou essayez différents éléments de design. Sans vous soucier de gâcher votre processus, Virgin History vous donne la liberté explorer et d'itérer Grâce à l'histoire vierge, nous pouvons collaborer très facilement. Il peut suivre les modifications apportées par plusieurs membres de l'équipe et revenir facilement à la version précédente si quelqu'un écrit accidentellement un travail important Comparez différentes itérations de design et discutez de celle qui fonctionne le mieux, même si elles ont été créées à des jours ou des semaines d'intervalle Il permet également de résoudre les conflits ou malentendus en vérifiant qui a apporté quelles modifications et en garantissant une compréhension claire du lieu de conception Tout tourne donc autour des fichiers locaux et de l'histoire des vierges. J'espère que tu apprends ça et que tu ne t'entraînes pas comme moi. vous plaît, sauvegardez votre histoire comme une vierge, et nommez-le, s'il vous plaît. Je sais que c'est mon style, mais ne le copiez pas, et je ne reste pas les bras croisés dans l'histoire des vierges. Alors renommez-le comme si vous appreniez aujourd'hui ce que nous avons appris aujourd'hui. J'ai oublié D'accord, nous découvrons les ombres et déposons des ombres dans les ombres. Nous avons également fabriqué ces boutons. Vous pouvez créer une histoire de version appelée effets. Nous allons apprendre les effets. Voilà, nous avons des amis, le script du fichier Pigma. Nous allons maintenant aller de l'avant et concevoir en toute confiance. 68. Composants Figma Les bases: Bienvenue à nouveau, étudiants Nous plongeons dans le monde puissant des composants de Figma Les composants sont donc des éléments réutilisables qui présentent de nombreux avantages, ce qui en fait un élément essentiel conception et du flux de travail de Figma Comme vous pouvez le voir, mon interface est devenue un peu plus propre parce que j'ai tout jeté ici Tu sais, nous avons toujours ce genre de chambre. Il y a toujours des choses inutiles là-dedans, alors j'ai fait de cet endroit une pièce inutile et je jette tout ici. OK. Commençons maintenant par le design et créons quelques composants. Comme vous pouvez le voir, nous avons ce bouton appelé Ajouter au panier. Actuellement, nous allons ajouter un composant à ce sujet. Pour créer le composant f, il suffit de sélectionner un élément. Actuellement, je choisis le bouton. Et il suffit de cliquer sur ce bouton. C'est créer un composant, et vous pouvez utiliser raccourci Control Alt K pour créer un composant. Comme vous pouvez le constater, c'est désormais un composant. Alors, comment savoir si c'est un composant ou non, comme vous pouvez le voir dans le panneau de conception, nous avons découpé ce logo. À côté du fran imprimé, il y a quatre diamants. Comme vous pouvez le voir, la couleur du cadre change également si je clique dessus. Comme vous pouvez le voir, c'est du bleu, mais la couleur du composant est toujours aussi violette. L'un des principaux avantages des composants est leur réutilisabilité Quand je passe au panneau acide comme celui-ci, comme vous pouvez le voir à l'entrée, j'ai ce bouton d'action en tant que composant Je peux facilement le faire glisser n'importe où dans mon design comme ça. Et toute modification apportée au composant principal se répercutera sur l'ensemble de l'instance. Dans notre cas, il s'agit du composant principal, et ce sont les enfants. On l'appelle aussi un instant. Donc, si j'apporte des modifications, disons que si je le redimensionne, il est également redimensionné à chaque page Si je change de point, cela fonctionne également avec cela. Comme vous pouvez le constater, j'en ai fait 14, et partout, il y en a 14 maintenant. OK. Maintenant, disons que je souhaite apporter quelques modifications ici. Le texte devrait ressembler à ce que nous disons maintenant, et il devrait s'agir d'un paiement. Donc, comme vous pouvez le constater, si j'ai apporté des modifications aux composants pour enfants, les composants principaux restent tels quels. Cela ne change pas. Disons si j'apporte des modifications au composant principal dans le pad comme celui-ci. Seuls le composant que je n'ai pas modifié et qui a été modifié, et l'autre composant que j'ai remplacé plus tôt, restent les mêmes. Alors laisse-moi faire ça. façon dont vous organisez différencie votre composant principal et l'instant, c'est que lorsque je à l'instant, c'est que lorsque je passe dans le panneau des couches et que vous sélectionnez l'instance, comme vous pouvez le voir, elle est livrée avec un diamant creux, et celle-ci est livrée avec un diamant Comme vous pouvez le voir, il y a un diamant. Supposons que le design soit trop volumineux et que vous ne sachiez pas quel est votre composant principal. Vous souhaitez donc accéder à votre composant principal pour apporter des modifications, par exemple si vous souhaitez le redimensionner Dans ce cas, disons que vous êtes actuellement sur cette page et cette page de paiement, et que vous souhaitez simplement accéder au composant principal. Vous pouvez simplement cliquer dessus avec le bouton droit de la souris et sélectionner accéder au composant principal et accéder au composant principal Comme vous pouvez le voir, accédez au composant principal qui se trouve ici dans la page de protection. Et vous pouvez également donner un nom à votre composant. Je sais que je ne nomme rien, mais c'est vraiment une bonne pratique de nommer votre composant, en particulier lorsque vous avez affaire à plusieurs instances. Il vous aide à identifier rapidement les différentes versions ou variantes de vos composants. Et les composants ne se limitent pas à de simples éléments tels que des boutons. Vous pouvez transformer des conceptions complexes en composants. Par exemple, vous pouvez transformer votre logo en composant, sorte que vous pouvez transformer ce logo en composant ainsi que les cartes en composant. Vous pouvez créer n'importe quoi dans un composant, comme cette barre de navigation dans un composant. Et il y a une chose. Supposons que nous ayons apporté quelques modifications, comme le changement de couleur, laissez-moi le transformer en dégradé. Si j'en fais un dégradé, et pour une raison ou une autre, je n'aime pas ça, et je veux juste tout réinitialiser. Dans ce cas, vous pouvez simplement sélectionner élément et cliquer avec le bouton droit de la souris sur tout réinitialiser. Il réinitialisera tout, comme le texte du téléphone, ainsi que le bouton couleur opio En termes simples, les instances sont créées en dupliquant le composant principal, ce qui en fait des copies classiques tout en créant des composants principaux supplémentaires Il est essentiel de comprendre et d' exploiter les composants pour optimiser les capacités de conception principale. Ainsi, au fur et à mesure que vous vous habituerez à ce flux de travail, vous vous retrouverez à créer main-d'œuvre ou des éléments réutilisables qui témoignent de l'efficacité de la conception. Donc, étudiants, tout dépend des composants. De la manière suivante, nous allons en apprendre davantage sur les composants. Il y a donc beaucoup de choses que vous pouvez créer différents composants, comme vous pouvez créer des variantes. Vous pouvez les faire passer en mode sombre ou en mode clair. Vous pouvez créer un bouton spécifique dans le panneau de conception pour changer leur couleur en fonction de vos besoins. Donc, étudiants, tout est une question de composants. Et je vous verrai dans le prochain. 69. Mettre à jour, changer, modifier et réinitialiser les composants dans Figma: Tout le monde explore ainsi la complexité de la mise à jour, de la modification, de la réinitialisation et du report des écritures pour les composants et les entretoises dans Figma Et en plus, j'ai un raccourci pratique pour passer du mode clair au mode foncé . Alors allons-y J'ai donc déjà appris comment créer des composants. Élément sélectif, passons à ce manuel et cliquez simplement sur le composant de création Et dans le panneau d'action, nous avons notre composant, et nous pouvons simplement le faire glisser et l'utiliser comme instances comme celle-ci. Voyons maintenant comment mettre à jour les instances. Si vous souhaitez apporter des modifications à des instances spécifiques, vous pouvez trouver le composant principal en le sélectionnant ainsi et vous pouvez accéder au composant principal s'agit du composant principal Il s'agit du composant principal. Vous pouvez effectuer un ajustement se reflétera dans ces instances. Mais que se passe-t-il si vous avez apporté une modification directement aux instances et que vous souhaitez renvoyer ces modifications au master ? Alors maintenant, vous pouvez sélectionner des instances comme celle-ci. Mais ce que je veux faire, c'est que dans ce cas, disons que notre client souhaite que la page de mon compte soit en mode sombre. Je vais donc passer en mode conversation comme ceci. Comme vous pouvez le constater, la barre de navigation n'est pas très visible. C'est visible, mais la couleur est foncée et je veux que ce soit blanc. Je vais donc choisir un combat comme celui-ci, mais les icônes ne sont pas visibles. Je veux donc le changer en noir. Je maintiens la touche Maj enfoncée, je sélectionne toutes les icônes, la couleur de sélection et le tag. Maintenant, je veux mettre à jour tout ce que contient cette barre de navigation, comme le panneau blanc et le bouton est une balise. Je veux donc toutes les mises à jour de ce composant principal. Donc, dans ce cas, ce que je peux faire, c'est que je peux simplement cliquer dessus, accéder au composant principal et apporter des modifications au composant principal. Et comme vous pouvez le voir dans le composant principal, c'est le composant principal, changez tout, la couleur du panneau, ainsi que la couleur de l'icône. Pour l'instant, je ne veux pas que mon composant principal soit celui-ci, donc je vais l' annuler pour le moment. Disons que vous avez reçu un appel d' un client qui vous a dit : «  Je ne veux pas de cette couleur ». Je veux que la couleur soit foncée. Donc, dans ce cas, vous pouvez simplement sélectionner le composant directement dessus et réinitialiser toutes les modifications. Comme vous pouvez le voir, changez toutes les choses en composant principal comme ceci. OK, donc je voudrais vous montrer une chose ici, alors laissez-moi faire une autre copie de mon compte. C'est donc l'instance et celle-ci est également instantanée. Mais je vais supprimer celui-ci. Et je veux que cette partie soit en mode clair parce que la couleur foncée ne convient pas à celle-ci. Je veux donc passer en mode clair comme celui-ci, et je vais tout changer en noir comme ça. Actuellement, je veux joindre ceci, c' est-à-dire attacher, de l'instance attachée. Il s'agit maintenant d'un nouveau cadre. Il ne s'agit pas d'un composant ou d'une instance. Je veux le créer dans un composant. Dans le même temps, je souhaite créer ce formulaire en tant que composant deux. Dans le même temps, nous pouvons créer plusieurs éléments dans des composants. Sélectionnons-les tous les deux, et si je passe aux composants, nous avons l'option appelée créer plusieurs composants. Et maintenant, si je passe au panel d'acteur. Comme vous pouvez le constater, nous avons plusieurs composants. Le premier est le mode clair, et bientôt le mode sombre. C'est un réel gain de temps, surtout lorsqu'il s'agit d'éléments de design similaires. Et cela vous aidera lorsque vous voudrez changer le même élément en différents éléments. Actuellement, ce sont les composants principaux, donc cela ne fonctionnera pas là-dessus. Disons que j'ai un autre cadre comme celui-ci, et je veux le changer pour qu'il en soit ainsi. Donc dans ce cas, ce que je peux faire, c'est maintenir t enfoncé et faire glisser dans ce nœud noir Naba Si je le jette comme ça, tant que je le vois changer, je peux faire la même chose avec celui-ci. Je le tiens, je le fais glisser dans ce composant et je le déverse sur le composant Mais si j'essaie de le faire sur notre composant principal, cela ne fonctionnera pas. Ce sera sur ce nioba. Il n'échangera pas de place, comme il l'a fait avec les instances. Alors laissez-moi vous montrer de manière simple. Supposons donc que nous ayons cette instance ici, et que notre client souhaite qu'elle soit davantage plongée dans le noir. Dans ce cas, nous pouvons maintenir la touche Alt enfoncée et choisir notre mode sombre, faire glisser en maintenant la touche droite et simplement le vider. Comme vous pouvez le voir, il est remplacé par ce noir. Et n'oubliez pas que cela ne fonctionne pas sur les composants principaux. Ce sont les principaux composants, donc cela ne fonctionnera pas. Et ce sont les instances, donc ça va fonctionner sur elles. Et vous pouvez également le modifier depuis le panneau de conception. Donc, si vous cliquez sur vos instances comme ceci et que vous souhaitez les faire passer en mode lumière. Vous pouvez voir que le menu apparaît comme le cadre 49, et nous pouvons le faire passer en mode éclairage comme ceci. Il vous montrera donc tous les atouts. Nous sommes donc actuellement dans mon compte et nous avons également l'option de détail du produit. Nous pouvons également l'intégrer. Et pareil pour celui-ci, disons qu'il s'agit d'une instance, et je veux la remplacer par celle-ci pour pouvoir simplement la maintenir, la faire glisser et la vider. Comme vous pouvez le voir, cela fonctionne également avec un bouton pour couper. Alors, étudiant, j'espère que vous comprenez comment réinitialiser les composants, comment les mettre à jour, comment les remplacer, ainsi que ce que nous apprenons à les échanger. C'est donc un wrapper pour notre explication mise à jour et de la gestion des composants dans Figma Découvrez donc des motifs et des astuces dans la vidéo suivante. 70. Supprimer les composants principaux dans figma est impossible (Trucs et astuces de composants): Bon retour, tout le monde. Dans cette offre, nous allons découvrir des astuces et des astuces relatives aux composants. Donc, des astuces comme la façon dont nous pouvons restaurer nos composants supprimés, comment nous pouvons importer ou exporter le composant principal d'autres fichiers de conception vers notre fichier de conception principal, ainsi que d'autres choses. Commençons donc. Tout d'abord, je vais vous montrer ce qui se passe lorsque vous essayez de supprimer votre composant principal. Comme vous pouvez le constater, il s'agit du composant principal de notre conception. Il est également en couches, comme vous pouvez le voir sur les quatre losanges, c'est un composant principal, et voici l'exemple. Disons donc que d'une manière ou d'une autre j'ai supprimé mon composant principal. Supposons donc que je concevais quelque chose et que je ne sache pas s'il s'agit du composant principal ou de l'instance. Comme vous pouvez le constater, si nous sommes sur un cadre, il n'y a aucune différence entre l' instance et le composant principal. Mais si je le trace à l'extérieur, comme vous pouvez le voir, c'est écrit ici, nous pouvons également voir le symbole. Il n'est donc pas visible dans le cadre. Disons donc que je suppose que c'est le cas. Et si je supprime celui-ci, comme vous pouvez le voir, il est également supprimé du panneau des calques. Mais maintenant je veux y revenir. Dans ce cas, nous avons besoin de l'instance. Donc, à l'aide de l'exemple, nous pouvons restaurer cela. Il suffit donc de cliquer dessus avec le bouton droit de la souris pour accéder au composant principal et restaurer le composant principal. Cliquez dessus comme vous pouvez le voir, notre composant est de retour. Le composant principal est de retour, et il est également ici dans un panneau inférieur. Examinons maintenant la source de l' instance provenant d'un autre fichier de conception, peut-être de la communauté Figma Supposons maintenant que vous ayez apporté une instance au lieu d'un composant. Donc, si je colle ce composant ici, désolé, instantanément. Et si je ne sais pas d'où j'ai importé cette instance. Donc, je voudrais revenir à ce dossier. Donc dans ce cas, ce que je peux faire, c'est cliquer dessus cliquer dessus et passer au composant principal. Et il ouvrira réellement ce fichier, et il vous montrera d' où vous avez obtenu ce composant. Donc, comme vous pouvez le voir, cela met en évidence que vous avez cette instance. Passons maintenant à la troisième. Maintenant, disons que nous avons ce fichier d'icône, et si je passe à l'édition d'objets comme dans celui-ci, et si j'apporte des modifications, comme vous pouvez le voir, cela se produit également avec l'instance. Mais laissez-moi sortir de l'objet pour en savoir plus. Permettez-moi de copier l' instance de cette copie, et si je la colle ici dans mon fichier de conception d'application ClickCut, et si je la transforme en composant principal, si je change quelque chose comme ça, comme vous pouvez le voir, c'est ce qui se passe avec ce fichier. Mais si j'ouvre mon application de carte cli, elle n'est pas ici, donc elle n'est pas mise à jour. Les modifications ne sont donc disponibles que pour le fichier principal. Donc, si nous utilisons une bibliothèque, dans ce cas, elle apportera des modifications, mais actuellement nous importons depuis un autre fichier de ce fichier vers ce fichier. Il n'est donc pas mis à jour ici. Passons maintenant au concept selon lequel un composant ou des parties d'entre eux ne peuvent pas être supprimés. Lorsque vous supprimez un élément dans une instance, par exemple en masquant une couche, il ne disparaît pas complètement Elle devient simplement cachée. Alors laissez-moi vous montrer comment cela fonctionne. Nous avons donc créé ce bouton de navigation, et comme vous pouvez le voir, il s'agit de l'instance et du composant principal, et si je supprime quelque chose de l'instance, comme vous pouvez le voir dans le panneau des couches, il n'est pas supprimé. Elle est cachée. Il suffit de cliquer dessus pour qu'il soit à nouveau visible. Je peux le faire comme ça ici. Mais si vous souhaitez le supprimer définitivement, vous devrez accéder au composant principal et les y supprimer. Donc, si je le supprimais ici. Vous pouvez donc le voir totalement supprimé maintenant, et il n'est pas non plus caché ici. Alors laisse-moi annuler ça. Voici donc tous les trucs et astuces concernant les composants. J'espère que cela permettra de comprendre pourquoi les composants principaux et leurs parties ne peuvent pas être facilement dilatés dans Figma Et comprendre ces nuances vous aidera à naviguer plus efficacement dans le monde des composants. Alors, passez à la prochaine vidéo, où nous aborderons l'atout le plus intéressant des composants Figma. Bonne conception. 71. Déplacer les principaux composants et comment organiser vos composants: Bienvenue Max designer, aujourd'hui, nous allons discuter des meilleures pratiques pour les composants principaux organisés dans Figma heure actuelle, nous les distribuons peut-être partout, mais il existe une manière plus organisée de les gérer, et je vais vous montrer mes meilleures pratiques, qui sont largement utilisées par de nombreux designers. Donc, dans votre panneau ACID, vous pouvez avoir un composant local comme celui-ci, mon compte sur ce bouton ainsi que sur cette barre de navigation inférieure, et un composant comme celui-ci qui traîne dans un espace vide, et un autre composant peut se trouver sur le cadre comme celui-ci. La clé ici est donc de laisser le composant principal sur sa propre page. Nous allons créer des composants distincts de la page quatre et utiliser une instance comme celle-ci, utiliser une instance dans notre fichier de conception. Je vais donc d'abord créer quelques composants. Actuellement, nous avons quelques cartes, ainsi qu'une barre de navigation supérieure et une barre de navigation inférieure. Donc, actuellement, je ne les ai pas nommés, ils ne sont donc qu'un cadre. Alors laissez-moi les nommer. Comme vous pouvez le voir, il s' agit du cadre 31, donc je vais les appeler Okay, donc j'ai nommé un composant comme celui-ci. J'ai donné un nom à ce logo, mais c'est le cadre maintenant. J'ai également nommé celle-ci, les petites cartes, et celle-ci, les grandes cartes, ainsi que ce bouton Atovd Et je nomme ce bouton tov, et voici la barre inférieure, et voici la barre de navigation supérieure. Parce que nous voulons utiliser notre composant principal hors cadre, et nous voulons utiliser l' instant dans un cadre. Laisse-moi te montrer comme ça. Celui-ci est l' instance, et c'est le principal coon, nous allons donc l'essayer. Nous le garderons ici chaque fois que nous aurons besoin de ce composant, afin de pouvoir les utiliser comme une instance instantanée comme celle-ci. Permettez-moi de les convertir en composants. Vous êtes également un composant. Vous êtes également un composant. Vous êtes également un composant. OK, j'ai donc créé un composant dans Hmpitch. J'ai ces quatre composants dans le pitch d'introduction, j'ai ce logo, et nous avons le bouton Ato Passons maintenant au panneau des couches. Et cliquons sur cette icône en forme de plus. Je vais les nommer composants. Et on peut simplement les déplacer d'ici. Comme si c'était le composant. Déplaçons maintenant notre composant principal vers cette section des composants. est donc actuellement vide, et voici notre bouton de navigation. Bouton de navigation supérieur, passons aux composants. Si je passe aux composants, comme vous pouvez le voir, où ils se trouvent, je pense que c'est bon, c'est ici, dans le cadre 48. Et déplaçons-les tous. Mais d'abord, je dois détacher mon composant principal des cadres comme ceci OK, laissez-moi vous en parler également, et laissez-moi vous donner l' exemple. Pareil pour celui-ci. Ainsi, par exemple, j'ai mis en évidence trois éléments. Sélectionnons-les donc tous. Vous pouvez donc appuyer sur Shift, maintenir la touche Shift enfoncée , les sélectionner toutes, cliquer dessus avec le bouton droit et simplement cliquer sur le pitch théorique et les composants Maintenant, nous avons tous les composants ici. Vous pouvez également vous organiser correctement, comme la seule section pour les boutons ou la seule section pour les barres de navigation, seule section pour les voitures. Laissez-moi vous montrer comment sur cette page, comme vous pouvez le voir, ils s' organisent vraiment bien. Le premier, ils ont la barre d'état, iPhone P max. Après cela, ils n'ont l'iPhone pro qu'après avoir acheté iPhone Pit plus. Ils s'organisent donc plutôt bien. Et comme vous pouvez le constater, notre organisation. Nous n'avons donc pas autant de composants. Je vous montre simplement comment il est recommandé de déplacer des composants vers la page des composants , puis de les utiliser comme instance. Donc, disons que je veux ajouter le bouton Ajouter à la carte ici. Donc, dans ce cas, je peux simplement accéder au panneau des actifs et je peux simplement rechercher le bouton Ajouter à la carte, et je peux simplement le faire glisser comme ça. Je peux l'aborder ici dans mon design. OK, c'est donc une très bonne pratique. Comme vous pouvez le constater, notre panneau de conception semble plus propre et organisé. Et si je passe aux composants, comme vous pouvez le constater, nos composants principaux sont également très bien organisés. C'est donc bien mieux que de le répartir sur plusieurs pages. Donc, si vous avez plusieurs pages dans le fichier, il est conseillé de conserver une page centrale pour tous les composants principaux, comme celui-ci. De cette façon, ils sont facilement accessibles et n' encombreront pas votre design Et n'oubliez pas que vous pouvez utiliser la fonctionnalité de recherche pour trouver rapidement des composants, comme nous l'avons fait précédemment avec le bouton Ajouter pour couper, ou si vous souhaitez rechercher un logo, nous pouvons simplement taper le logo, et il nous montrera le logo, et nous pouvons simplement le faire glisser et nous pouvons l'ajouter à nos conceptions. C'est particulièrement pratique si vous préférez un style organisé plus décontracté. Et une autre astuce consiste à utiliser une barre d'espace dans une barre de recherche pour répertorier tous les composants. Alors laissez-moi vous montrer comment cela fonctionne. Comme vous pouvez le voir dans la barre de recherche, nous n'avons rien. Donc, si je tape de l'espace, comme vous pouvez le voir, tous les composants tracés comme ça, et nous pouvons simplement les faire glisser Je sais que c'est une façon non officielle de le faire, mais c'est très simple Comme vous pouvez le constater, nous avons tous nos composants et nous pouvons les voir . Nous pouvons simplement les suivre de cette façon et les utiliser dans nos conceptions. Cela peut simplement nous aider à voir tous nos composants en même temps avec le besoin de cadres, sans avoir besoin de cadres. N'oubliez donc pas qu'au fur et à mesure que votre projet grandit, et surtout si vous collaborez avec d'autres, maintenir une structure organisationnelle devient crucial de maintenir une structure organisationnelle pour vos principaux composants. Donc, que vous préfériez une page bien organisée ou que vous utilisiez vraiment une fonctionnalité de recherche, trouvez la méthode qui vous convient le mieux J'espère que cette vidéo sur les principaux composants organisés vous a été utile. Alors, stade pour plus de trucs et astuces comme celui-ci. Voici donc toutes les astuces et astuces pour organiser notre fichier de projet ainsi que nos composants dans un fichier séparé. Tout est donc une question de composants. Comme nous les organisons. Nous avons fait un test séparé pour cela. Nous avons également appris le truc et les astuces nécessaires. Tout cela est donc une question de composants. Alors soutenons-nous, et je vous verrai dans le prochain. 72. Les meilleures pratiques de Figma nommer les calques et organiser le séjour: Designer V. Nous explorons ici le monde des conventions de dénomination. Plus précisément, l'utilisation de Hardware Slash dans Figma. Vous avez probablement remarqué la convention utilisée, et aujourd'hui, nous allons découvrir pourquoi elle est essentielle et comment elle peut vous aider à organiser efficacement vos composants. Certaines personnes l' ont peut-être vu et autres non. Permettez-moi de vous montrer comment fonctionne la convention de dénomination dans le panneau d'acides ou pour le composant. Comme vous pouvez le voir, nous avons cette ligne dynamique de barre d' état ouverte , et si je l'étends comme ça. Comme vous pouvez le constater , la barre d'état iPhone 13 est oblique P. Et si je vais dans le panneau des ressources et comme vous pouvez le voir, si je vais dans le statut et sur Accueil, le symbole est différent Ils utilisent le flash pour cela, ils ont la barre d'état à la page d' accueil après cet état B et H Ba slash ba slash phon 13 Ils nous disent donc que celui-ci est pour le phon 13, et qu'ils ont un composant principal, nous avons le mini, puis le P et le P max. Nous allons donc faire de même pour organiser nos composants. Donc, si je passe aux composants, comme vous pouvez le voir, j'ai créé ce bouton Tap Mo. Permettez-moi de supprimer ceci pour le début, car nous allons apprendre à créer ce jeu de mots Passons au panneau d'action. Et comme vous pouvez le constater, il n'est pas organisé. C'est encombré partout, et nous n'avons pas plusieurs boutons Comme vous pouvez le voir, nous avons cette barre inférieure, et disons que nous concevons également une barre de navigation en mode clair. Donc, actuellement, c' est l'instance, je vais donc la détacher. D attach instance, et je vais appeler cette barre de navigation barre oblique, vous devez être en mode sombre, et celui-ci doit être en mode clair Celui-ci est la lumière, celui-ci est le noir. Donc, rien n' a changé dans le panneau d'action parce que nous n'en avons pas fait un composant. Laissez-moi donc sélectionner celui-ci et créons un composant. Et maintenant, si je passe aux composants. Comme vous pouvez le voir, nous sommes arrivés à Nava. Le premier est le mode lumière. Désolé, le premier est plus sombre et le second est en mode clair. Je sais si vous êtes confus parce que la couleur est différente, alors laissez-moi en choisir une neutre. OK, alors maintenant c'est mis à jour. Comme vous pouvez le voir, celui-ci est utilisé pour mode sombre et celui-ci pour le mode clair. Nous pouvons donc faire de même avec ces choses. Laissez-moi donc choisir la deuxième couleur pour cela. Je vais choisir le rouge . OK, ça a l'air cool. OK, d'abord, je dois le déconnecter. Alors laisse-moi le nommer. Slash pour le mode sombre, et celui-ci doit être en mode clair. OK, maintenant c'est juste un cadre. Laissez-moi en faire un composant. Maintenant, si je peux accéder aux composants, il y a un bouton pour couper, et si je clique dessus, comme vous pouvez le voir, nous avons deux boutons. Le premier est le mode sombre et le second est le mode clair. OK, permettez-moi de vous montrer un exemple. Nous avons ajouté ces icônes de Bâle. Si je vais dans le panneau des actifs, comme vous pouvez le voir, ils nomment également leurs icônes comme ceci. Tout d'abord, ils ont un plan. Après cela, ils ont à nouveau des contours et ensuite des marques. Si je passe en revue, comme vous pouvez le voir, toutes les icônes de marque présentes ici. Donc, si quelqu'un importe ce fichier dans son design, il saura que celui-ci est destiné aux marques, que cette section est destinée aux marques, cette section est destinée aux marques, que cette section est réservée icônes générales et que celle-ci est destinée aux navigations comme celle-ci Cette convention de dénomination devient encore plus cruciale lorsqu'il s' agit de variables. Ce qui sera exploré dans les prochaines vidéos. En résumé, la convention de dénomination à quatre barres obliques de la FIMMA est un outil puissant pour Il permet de créer une structure riche, ce qui vous permet, à vous et à votre collaboration, de naviguer plus facilement votre collaboration, de naviguer et de trouver les composants dont vous avez besoin. Alors, passez à la prochaine vidéo où nous lierons les variables d' ici là, happy design. 73. Projet de cours 12 : briques : maîtriser les composants dans Figma: Mes étudiants, c'est l'heure du projet. D'accord, donc en attendant, nous en apprendrons beaucoup sur les composants, comme comment créer des composants, comment les ajouter dans des pages séparées, comment les organiser en mode clair et en mode sombre. Donc, tout d' abord, créons un espace de style pour la création de nos boutons. Alors Handover Figma, essuie-glace marque une nouvelle page appelée composants C'est le QG de notre bouton. Pas de bouton HQ, mais nous allons placer tous les composants ici et les organiser. Maintenant, deuxièmement, il est temps de réduire la superpuissance du design, de fabriquer et d'ajouter au bouton de découpe également, puis vous pouvez les faire passer en mode sombre ou en mode clair comme OK, donc ces boutons forment un duo dynamique. Donc, maintenons-les ensemble en utilisant une barre oblique. Conson de dénomination dans ce panneau de ressources. De cette façon, ils seront toujours prêts à faire la fête comme ça. Maintenant, une fois votre mission terminée, capturez la capture d'écran et soumettez-la dans notre panneau de projet. Et vous pouvez également créer deux boutons comme celui-ci, version plus petite de ceux-ci. Nous avons donc déjà ajouté la mise en page automatique. Alors laissez-moi le copier. D'accord, je dois donc d' abord le déjoindre. OK, je t'attache. Permettez-moi de renommer ce petit bouton d'éclairage de chariot slash and small Petit et encore une fois, notre barre oblique. Fimo, nous savons que c' est le plus petit et laissez-moi en créer un autre comme celui-ci, et je vais le faire C'est clair, celui-ci va être sombre. Maintenant, changeons de couleur. Actuellement, il est bleu. Alors laisse-moi le rendre rouge. Maintenant, créons un composant. OK, donc je dois le nommer comme ça. Actuellement, il s'agit d'un bouton placé au-dessus du bouton froid. Après cela, j'ai ajouté plus de lumière, mais je n'ai pas besoin d'en ajouter davantage Je peux donc simplement en ajouter une petite quantité et il faut que ce soit léger. OK. Si je clique sur un espace vide, comme vous pouvez le voir, il est ajouté au bouton Ajouter pour couper. Maintenant, nous savons que c' est le mode sombre, c'est de la moisissure claire et que c'est le mode clair, et nous pouvons faire la même chose ici. Je vais donc faire comme ça. Plus petit et plus sombre. Cliquons donc sur l'espace vide. D'accord, il ne l'a donc pas ajouté car c'est un cadre, alors laissez-moi en créer un composant. OK, maintenant c'est ajouté, le petit mode sombre. OK, voici donc les instructions que vous devez suivre pour créer. Donc, créez d'abord un composant puis déplacez votre composant dans ce pas de composant comme ceci et créez maintenant un environnement plus sombre et plus clair comme celui-ci. Et maintenant, nous avons également vu comment en créer une version plus petite prendre une photo et la télécharger dans notre outil de précision. C'est donc le fantastique Figma. Vous venez de maîtriser l'art de créer des éléments cliquables pour stimuler l'action. Si vous pouvez les expérimenter, vous pouvez ajouter une couleur différente, vous pouvez ajouter une police différente. Un choix donc totalement créatif. Voilà pour ce projet. Suivez donc ces instructions et soumettez-les moi. Donc par. 74. Composants et variantes Figma pour les débutants: C'est dans cette optique que les concepteurs vont explorer le concept de variables dans Figma Variables ou variantes, comme les appelle désormais Figma. Notre façon de combiner plusieurs composants en une seule unité, ce qui facilite la gestion du passage d'un statut ou d'un style à un autre. Comme vous pouvez le voir , cette fenêtre est apparue sur mon écran, et si je passe ma souris dessus, comme vous pouvez le voir, elle se transforme en tarplclor et si je clique dessus, elle devient rouge Dans ce cas, nous allons le faire en utilisant des variantes ou des variables. OK, alors laisse-moi clore ça. Laisse-moi passer au design. Voici donc les variantes. Maintenant, nous allons apprendre à créer des composants. Permettez-moi donc de les supprimer d'abord. D'accord. Comme vous pouvez le voir, j' ai ce bouton de suppression des publicités. Actuellement, c'est une instance. Donc, comme vous pouvez le voir, c'est instantané , il a ce bouton en diamant. Mais il est creux et celui-ci est un composant car il contient quatre diamants OK, donc je veux que ce soit un composant, pas une instance. Si vous souhaitez créer une variante, il doit s'agir d'un composant. Permettez-moi donc de l'attacher d' abord, d'attacher une instance. D'accord. Maintenant c'est un cadre. Le cadre est découpé par ajout. Le nom du bouton est indiqué lors de la découpe. Si je le sélectionne, nous pouvons utiliser le raccourci Control K, et nous pouvons également utiliser ce bouton. Maintenant, il s'agit d'une variante. Désolé, il s'agit d'un composant. OK, donc si je passe au panel, ce panel. Donc, comme vous pouvez le voir, c' est le composant maintenant. Je veux donc créer une variante. Je vais donc suivre cela en tant qu'instance, et je vais le détacher à nouveau et transformer la couleur en bleu, bleu foncé. Je pense qu'on l' appelle aussi bleu queue. Je me perds vraiment dans la confusion avec les couleurs. Donc, si vous connaissez la couleur, veuillez me le faire savoir. OK, nous avons donc deux boutons, mais celui-ci est le composant et celui-ci est le cadre. Permettez-moi donc de le convertir en composant. Vous êtes un composant. D'accord. Maintenant, si je les vole tous les deux, comme vous pouvez le voir dans les panneaux de conception, nous avons la possibilité de les combiner en variante Donc, si je clique dessus, c'est devenu une variante. Il est également indiqué par les lignes pointillées, le cadre en pointillé Maintenant, si je passe aux actifs, comme vous pouvez le voir, nous avons ce bouton d'ajout à la carte, et il y en a un numéro deux, y compris deux variantes. Et si je le fais glisser ici dans cette section de catégorie, admets que c'est ici comme ça. Et si je vais dans le panneau de conception, comme vous pouvez le voir sur un bouton Ajouter pour couper, c'est la variante. Ce symbole signifie variante. Et la propriété est née actuellement. Nous pouvons le renommer et c'est actuellement par défaut parce que nous le renommons, je suppose Permettez-moi donc de le renommer , alors laissez-moi passer à asset car les deux sont par défaut C'est pourquoi cela ne fonctionne pas. Mais comme vous pouvez le voir, si je double, la propriété sera par défaut. Je veux donc que ce soit comme si c'était le cas. Elle. Je peux dire que c'est normal et comme ça. Tu peux le nommer comme tu veux. C'est ce que je nomme pour le moment. Maintenant, si je passe à cette instance, que nous avons extraite de notre variante, et comme vous pouvez le voir, nous l'avons trouvée aussi bien que d'habitude OK, je pense que je l'ai fait dans le sens inverse. Je peux le modifier facilement, je peux donc simplement le sélectionner et je peux le modifier à partir d'ici. Ça doit être elle. Et tu dois être normal. OK, nous avons donc deux variantes. OK, tu es normal. Si je le copie en maintenant la touche alt, je peux maintenant passer à, et nous en avons une troisième. Créons une troisième variante, mais prototypons-la Je crée un flux simple. À partir de cette section, vous devez vous rendre ici. Si je clique dessus, alors que je suis en train de placer animation intelligente sur cassette, nous arrivons à une animation intelligente, mais je veux que ce soit pendant le survol Si je joue ce jeu pendant que je survole, la couleur change. Je sais que la position n' est pas très bonne, alors permettez-moi de les sélectionner tous les deux Signal T en bas, aussi. J'ai ma souris dessus, donc ça le devient. Bien, créons maintenant une troisième variante. C'est très simple de créer une variante. Vous pouvez faire une chose comme disons que j'ai créé ceci, une autre chose parce que je ne sais pas comment créer une variante. Je l'ai juste fait glisser comme exemple, et je vous ai déjà dit qu'il devait être composé Donc, attachez-le pour le moment où c'est DH. Et permettez-moi de passer à la composante lit bébé maintenant. Et je peux juste le glisser dedans. Il s'agit maintenant d'une variante. Je sais que c'est vraiment une mauvaise pratique. Ne l'utilisez pas. Je l'utilise parce que je veux juste vous montrer quelques astuces aléatoires. Maintenant, c'est la variante. Permettez-moi de le renommer quelque chose Actuellement, il s'agit de la propriété 1 et de la propriété par défaut. Il suffit de le nommer, je pensais à De. Laisse-moi taper « terminé ». Et actuellement, ce sont des propriétés. Laissez-moi venir en aide pour que je sache quels sont les autres. Revenez à la normale. OK, donc c'est génial. Maintenant, mais je dois changer la couleur du virage. OK, je vais y aller. C'est un bon acide. Actuellement, nous avons trois variantes, alors laissez-moi la faire glisser et pro, vous devez être une. Je vais la placer ici. Maintenant, si je passe à Ptype On tap, tu dois passer au rouge Jouons à ça. Pendant l'abaissement il fait sombre et si je clique dessus , il devient rouge. C'est l'avantage de faire de la variance. D'accord, nous apprenons donc à créer de la variance en utilisant du matériel très complexe. Maintenant, nous allons apprendre à créer une variance en utilisant des méthodes très simples. Je sais qu'il existe de nombreuses façons de créer une variation dans Figma, exemple si je clique dessus, un bouton plus apparaît et je peux simplement cliquer dessus, et cela crée une variante Je peux simplement accéder à cette section de couleurs et je peux la changer en couleurs neuro comme celle-ci Je peux les utiliser directement. Et comme vous pouvez le constater, il est également mis à jour. Il y en avait trois, maintenant c'est quatre. Je peux le frapper comme ça. Et je veux être rassasiée parce que nous ne l'avons pas nommée. OK, alors laisse-moi le renommer. OK, j'étais en train de réfléchir. Du blanc, c'est tout. Je donne une très mauvaise réputation, je sais, mais nous sommes juste en train d'apprendre. Nous ne travaillons pas sur de véritables projets. Donc, pendant que vous travaillez sur l'octal, veuillez donner le nom correct et réel Cela signifie quelque chose. Dans ce cas, cela ne veut rien dire. Mais une chose, actuellement, c'est une propriété, mais nous pouvons l'indiquer comme. C'est le bouton. Tout a bien changé. D'accord. Chaque fois que quelqu'un fait de l'exercice, je dis que cette personne le fera, qu' il s'agit du bouton et que nous avons quatre variantes, comme le blanc. Sympa. Oh, il y a une chose. Avec une variante, nous pouvons créer quelque chose de vraiment incroyable. Permettez-moi de vous montrer une chose. Permettez-moi de créer deux boutons. Je vais choisir le rectangle, le petit rectangle et je vais en choisir une vingtaine. Et changeons-le en «   first will be ». La deuxième, c'est de devenir chippy. Faisons-en un composant. Et ces deux éléments font maintenant partie intégrante. Combinez en tant que variante. D'accord, vous êtes parents maintenant. D'accord, je peux donc le renommer actuellement, c'est une propriété. Je peux le renommer comme on et mon frère va être éteint. Je vais vous montrer pourquoi je fais ça. Si je passe à Acid Ple, nous avons un composant et nous en avons deux, et si je le fais glisser, nous obtenons cette bascule parce que nous l'activons et le désactivons Donc, comme vous pouvez le voir, c'est vraiment cool. Nous pouvons également le renommer comme par exemple. Actuellement activé. Nous pouvons l'ajouter comme un vrai et un faux. Je vais donc voir avec quelques mots que vous pouvez créer comme ça. Cela ne fonctionne qu'avec O de true false et non, ces choses-là. Vous pouvez l'utiliser pour créer des cases à cocher ou pour créer « laissez-moi vous montrer une chose », comme ces boutons, vous pouvez définir cela comme activé et cela comme un. Il existe une autre méthode, vous pouvez créer une variante, comme si je choisissais l'ellipse et le chi comme couleur ou si c'est ennuyeux. Laisse-moi choisir une rose. OK, donc ce n'est pas un feu rosâtre. D'accord. Il s'agit donc actuellement d'un cadre, alors laissez-moi créer un composant. Et si je le sélectionne, nous obtenons l'option appelée propriétés dans la section de conception. Et si je clique sur le bouton plus, nous obtenons quatre options, comme une variante d'avantage, un échange et un texte Donc, pour l'instant, je souhaite créer une variante. Donc, variante de résine de fréquence maintenant, et je peux simplement cliquer dessus et je peux changer la couleur Donc, pêchez quelque chose en ce moment. Maintenant, je le change en trois primaires, ou je peux le transformer en un comme ça. C'est l'une des autres méthodes pour créer un parent. Cette méthode alternative de création de variables est pratique, en particulier lorsque vous souhaitez commencer par un combat et plonger immédiatement dans la variance actuelle sans étape séparée. N'oubliez pas qu'il existe plusieurs façons d'obtenir le même résultat in firma trouvez le trop-plein qui vous convient le Cela confond donc notre intrusion variables ou des variantes dans Figma Ils sont incroyablement utiles pour gérer différents états ou styles au sein d'une même compote. De la manière suivante, nous étudions en profondeur les variables, mais nous créons des variables multivers-up. Elle est également appelée variable multidimensionnelle. Donc un stade pour ça et bon design, mes amis, 75. Propriétés des composants Figma: Créez Minds Buck pour Figma Adventure. Nous allons conquérir une fonctionnalité super intéressante appelée variance multidimensionnelle. Ne t'inquiète pas Ce n'est pas aussi effrayant que ça en a l'air. C'est en fait un tour de magie qui vous simplifiera la vie en matière de design et vous donnera plus de fraîcheur. Imaginez donc un scénario vous avez conçu un superbe bouton, mais vous avez besoin d'une version différente pour différentes situations, chaque clic ou pour différentes tailles C'est un numéro de jonglerie. Je sais Mais avec la variance multidimensionnelle, c'est comme si vous aviez 1 million de petits clones de votre bouton utilisés pour une occasion Comme vous pouvez le voir, j'ai créé ces boutons, en utilisant plusieurs variantes, et j'ai nommé les boutons, tout cela s'est appelé bouton. Donc, comme vous pouvez le voir dans mon panneau de ressources, j'ai ces boutons. Si je fais le suivi comme ça, auparavant, nous ne pouvions changer que la couleur. Mais maintenant, nous sommes en mesure de changer de type. Par exemple, actuellement, je peux passer au bouton Accéder à la carte, ou accéder à la boutique maintenant, si je sélectionne une carte et que je veux qu' elle soit en rouge. Je peux aussi le faire, ainsi qu'avec le bouton Acheter maintenant avec le bouton Accéder à la carte. Ainsi, comme vous pouvez le constater avec les variantes multidimensionnelles, les possibilités sont illimitées Maintenant, décomposons-le. Pensez à votre bouton effiloché. Donc dans ce cas, ajouter à la carte est mon bouton préféré. Maintenant, imaginez qu'il porte des chapeaux différents, un chapeau haut de forme lorsque quelqu'un le survole, un chapeau de cow-boy lorsqu'il est allumé et peut-être un chapeau de lapin original pour C'est donc le pouvoir des variantes. Passons maintenant à Figma et créons des boutons. OK, alors laissez-moi supprimer celui-ci et repartons de zéro. J'ai déjà conçu un bouton, donc je vais simplement copier. Ils aiment celui-ci, celui-ci et celui-ci. Actuellement, ce sont toutes des instances, donc je vais toutes les sélectionner, cliquer avec le bouton droit de la souris et attacher une instance D. OK, ils sont donc tous un cadre maintenant. OK, alors laissez-moi d'abord m'y ranger. Donc, pour couper le bouton ici. La première sera Ple. Le second va être tourné maintenant, mais je suppose que je dois changer de couleur pour le rendre bleu Ensuite, passez au bouton de la carte et passez à carte si je passe à moins de panneau, et si je clique sur ce plaidoyer, sont des mises en page, mais c'est dans le cadre Je veux donc que ce soit un composant, donc je vais tous en faire un composant. Et il y a encore une chose. Vous pouvez également le nommer boutons, barre oblique, bleu, comme celui-ci et pareil pour celui-ci C'est vrai. Si je vais dans le panneau des actifs, je peux voir une telle valeur. Nous l'avons appris dans les vidéos précédentes, et nous pouvons faire de même avec celle-ci. Mais il s'agit d'un processus très long. Maintenant que nous avons tous les composants, allons les combiner en tant que variante en tant que variante. D'accord, ce sont toutes des variantes maintenant, et il y a un problème. Comme vous pouvez le voir, le nom de chacun d'entre eux est le même, donc g est l'erreur. OK, modifions-en maintenant leurs propriétés. La première est donc d'ajouter à carte et en défolisant cette propriété, je vais donc la transformer en Et en le nommant, j'ai ajouté du bleu, c'est pourquoi il apparaît en bleu. Mais je ne veux pas celui-ci. OK, je veux celui-ci. Mais bon, j'ai fait une erreur. Celui-ci doit être dactylographié, et celui-ci va être ajouté à mais. OK, donc ce sera aussi un type d'ajout à la carte. Maintenant, ajoutons un autre type. OK, donc c'est une boutique maintenant, donc je vais l' appeler boutique maintenant. Ou pareil celui-ci. Le type est boutique maintenant, et celui-ci va être mis à la carte. OK, nous en avons donc fini avec les types. Maintenant, ajoutons des couleurs. Sélectionnons donc les boutons, et je vais ajouter une nouvelle variante, et je vais lui donner un nom de couleur. OK. Donc pour l'instant, je vais garder la valeur par défaut. Nous allons les modifier ici. Si je clique dessus, la couleur Acanc est par défaut, mais nous pouvons la nommer en indice Ça doit être bleu, ça va être bleu. Si je clique maintenant sur la boutique maintenant et si je choisis le bracelet Accoti bleu et rouge C'est le bon, donc je vais choisir , pareil pour celui-ci, le bleu, afin que nous n'ayons pas à le taper encore et encore. Pareil pour celui-ci. OK. Le bleu, et celui-ci est le rouge. Nous créons donc une variante multidimensionnelle. Donc, si je passe aux boutons, si je les sélectionne et que je les supprime, nous comprendrons comment cela fonctionne. OK, maintenant ajoutons-les aux pages, les pages de catégories. OK, maintenant, catégorie 1. Je vais le placer ici. Pareil pour celui-ci, pareil pour celui-ci. Je ne fais que payer le prix. Juste en bas, et je vais également ajouter juste le centre. OK, donc tout est réglé maintenant. Alors listez, sur cette page, je veux que cela soit lu pendant que je passe ma souris dessus Et après avoir cliqué, il doit se transformer en ce bouton de protection. Et après l'avoir à nouveau survolé, il doit devenir rouge OK, Card, tu dois être lue pendant que tu passes la souris dessus. D'accord, voici comment fonctionne la variante multidimensionnelle. Je sais que la création de cette variante multidimensionnelle semble confuse. Je vais donc vous montrer encore une fois comment les créer. Je vais donc simplement utiliser un rectangle et ajoutons que y 1205 va bien. Ajoutons donc environ 20 ans, et je vais en faire quatre et moins en changer de couleur. Je vais donc le changer en dégradé et vous allez choisir un rose. Et j'ai vu celui-ci Mais je veux que ce soit 50 sites, vous aussi, 50 et des centaines de couleurs comme celui-ci, et vous allez être dégradé OK. OK, ce n'est donc pas un cadre, nous devons donc les convertir en cadre. Contrôle G. Et celui-ci contrôle G. Contrôle G. Contrôle G. Bien. Ce sont donc des cadres. Maintenant, créons-les dans le composant. Vous n'avez pas besoin de le convertir en cadre. Vous pouvez les convertir directement en composants. Alors laisse-moi te montrer. Comme vous pouvez le voir, ce n' est pas dans un cadre, je peux donc simplement cliquer sur le composant. Mais pour mieux comprendre, je les crée dans un composant. OK, donc composant et composant, et laissez-moi le changer en variation. Combinez en tant que variation. D'accord, ce sont donc maintenant des variantes. Ajoutons maintenant des propriétés. Vous allez donc avoir une taille. OK. Et pour être ce que je dis, grand. R pour redevenir grand. Mais on peut le changer en rose large. Mais nous pouvons à nouveau créer une variante. Alors laissez-moi le faire, mais cela nous donnera l'erreur. Il y a donc beaucoup de choses que nous devons faire. OK, ajoutons donc une autre propriété. Permettez-moi de passer à la caméra mère, cliquer dessus et de cliquer sur ce bouton plus, cliquer sur la variante, et maintenant ajoutons une couleur, et je vais laisser la valeur par défaut Bon, maintenant nous avons une couleur. Je vais donc changer ce problème. Je sais que j'ai créé un sortilège, alors s'il te plaît, tu sais, ça. Vous allez donc être rose, vous allez être un dégradé et petit, petit est de taille égale. Celui-ci sera également petit. Je vais donc le choisir d'ici, un petit et rose. OK, donc si je passe au panneau des actifs, vais dire que nous sommes comparables à, mais je vais le renommer Et si je trace ce chiffre actuellement grand, disons petit et je veux qu'il soit rose. C'est ainsi que fonctionne la variance multidimensionnelle. D'accord, nous allons donc apprendre deux choses comme nous avons créé à partir de zéro, nous avons créé en utilisant éléments prédéfinis comme le bouton Ddate, et nous avons également créé à partir de OK, alors laissez-moi vous expliquer les avantages de l' utilisation de variantes multidimensionnelles. Tout d'abord, cela nous donne l'efficacité de la conception. Donc, plus besoin de boutons ping comme des fous. Les variantes permettent de tout organiser et de maintenir la cohérence. Ensuite, nous avons Scalability Superhero. Je sais que nous avons besoin de 100 boutons de taille B , pas de problème. Avec les variantes, nous pouvons les manipuler facilement. Nous pouvons en créer plusieurs versions, comme une grande et une petite comme celle-ci , et nous pouvons simplement la choisir. Je veux donc que ce soit gros. Et la, tu as un gros bouton. En travaillant avec l'équipe, le partage du design devient un jeu d'enfant, tout le monde sait exactement à quoi ressemble chaque bouton dans chaque situation, développeur obtient une feuille de route claire de toutes les options relatives aux boutons, ce qui facilite la mise en œuvre. N'oubliez pas que si vous trouvez une approche multidimensionnelle un peu écrasante au début, vous pouvez vous en tenir à une variante simple en quelques dimensions, que nous avons créée dans la vidéo précédente. Il s'agit donc d'une introduction avancée, alors prenez votre temps pour élaborer le concept afin de pouvoir visionner à nouveau cette vidéo jusqu'à ce que vous deveniez un maître dans le domaine de la variance Si vous faites une erreur dans l'ordre de dénomination, ne vous inquiétez pas. Vous pouvez le modifier ultérieurement en cliquant sur le composant, puis en définissant et en réorganisant la dimension, comme dans les propriétés, et nous pouvons le modifier en gros et tout ça La variance multidimensionnelle peut sembler un peu intimidante au début Mais avec de la pratique, vous découvrirez qu'ils constituent un outil puissant pour organiser et rationaliser votre système de conception N'hésitez donc pas à expérimenter et vous familiariser avec cette fonctionnalité avancée. Donc, étudiants, excellent travail pour obtenir ce pouvoir, et je vous verrai dans la prochaine vidéo. Je suis tellement heureuse de concevoir. 76. Variantes du projet 13: Voici leurs détectives du design, vous souvenez-vous de l' incroyable puissance des multidimensionnels que nous avons découverts la dernière fois Préparez-vous donc à mettre ces superpouvoirs à l'épreuve dans ce défi époustouflant Voici donc le projet 13. Aujourd'hui, nous sommes en train de créer un petit ensemble de boutons , digne d'un roi ou d'une reine du design. Notre tâche est donc de créer ce bouton Atto, le bouton Go Cut, le bouton Acheter maintenant, ainsi que les tours magiques OK. Ainsi, dans mes panneaux de boutons, j'ai également créé une version plus petite des boutons de boutique. Donc, si je vais sur les boutons, et si j'utilise la boutique et que je veux que ce soit petit, je peux les utiliser comme ça. Je l'ai donc créé en utilisant une fonctionnalité multidimensionnelle. Vous pouvez donc également le faire. Et nous avons également créé ce commutateur tbl, et nous avons simplement utilisé le commutateur activé et ascendant créer cet impressionnant commutateur total s. Donc, vous devez également le faire Je sais que vous vous sentez peut-être fou d' Amterg avec plus Boutons de tailles différentes, icônes ou même prises personnalisées. Faites donc en sorte que votre outil change de forme de bosquet ou qu'il ne s'agisse pas d'une fonction cachée secrète. Donc, toutes les instructions sont également données en pédophile. Ouvrez ce pédophile et créez un bouton par, un bon bouton par, un bouton boutique, ainsi qu'un interrupteur tactile, utilisez une taille et une couleur différentes Et n'oubliez pas d'utiliser vos super pouvoirs. Des fourgons Ultimon ou une arme secrète. Soyez créatif, laissez libre cours à votre imagination et n'ayez pas peur d'expérimenter, essayez peut-être différentes couleurs, styles ou animations. Et vous avez l'occasion de concevoir une dynastie ou un bouton et des interrupteurs qui feront l'objet d'une ovation royale Donc, une fois que vous aurez terminé Design Dynasty, prenez une photo de votre fils et soumettez-la en procession. Et n'oubliez pas que si vous êtes perdu ou si vous avez besoin d'un coup de pouce en matière de design, nous devons vous le demander. Vous pouvez même revoir la vidéo autant de fois que vous le souhaitez. Nous sommes toujours là pour partager avec vous. Alors allez-y, braves designers. Que votre bouton soit en gras, votre bascule soit fluide et que votre compétence FIV Ma démissionne Et n'oubliez pas que la pratique rend parfait. Et avec un peu de créativité, vous allez créer une dynastie du design en un rien de temps. Alors c'est moi, en train de signer. Merci d'avoir regardé, et je vous verrai dans le prochain. 77. Comment construire un champ de saisie interactif dans Figma: Nous nous souviendrons de toutes ces astuces géniales nous avons apprises, comme les transformer , les réinitialiser et les faire danser comme des marionnettes sur des cordes OK, peut-être pas cette partie de danse. Nous allons conserver le casque spatial américain, car cette vidéo raconte comment vous lancer dans la prochaine galaxie de Figma Mastery Nous sommes donc en train de créer notre propre chef d'œuvre Plus de formulaires de journalisation ennuyeux ou de section de profil vide. Créons donc une page de compte aussi unique que vous. Nous serons donc comme le numérique grâce la peinture avec nos pixels et nos cordons. Sauf que notre chef-d'œuvre est livré avec les formulaires de journalisation et les boutons de validation des commutateurs. OK, alors passons à Figma et créons notre compte, la page « mon compte Donc actuellement, c'est vide, donc je vais utiliser ce composant. OK, dans le panneau des actifs. Je l'ai ajouté en tant que composant. Donc c'est par ici. Je vais donc le suivre comme ça et l'ajouter ici, et ce sera le copier-coller de la barre d'état de notre iPhone. Donc, sur la page du compte, nous allons ajouter un nom, numéro de téléphone, les détails de la carte, ainsi que la date de naissance. Créons-le donc. J'ai donc activé les grilles sur la page de mon compte. Et je veux des lignes pour le moment, décaler et faire glisser une ligne. Et ce n'est pas visible. Alors laisse-moi changer de couleur. Alors, accent Nell. Ou prenons un gris, alors j'en veux un gris comme celui-ci. Maintenant, je veux un texte qui sera notre nom. Temporaire, je choisirai simplement un nom. OK. Et il va y avoir une étiquette comme celle-ci. Permettez-moi de le transformer en étiquette. C'est une étiquette, laissez-moi la modifier. Je ne sais pas pourquoi il prend l'écran Pro. Je pense qu'il y a quelque chose qui me manque ici. Je vais le changer en 14, et c'est S, donc tu vas avoir 20 ans. Permettez-moi de créer cet élément en composant, les sélectionner tous et de créer un composant. Permettez-moi de faire glisser ce composant principal vers le haut de ce cadre car je souhaite le placer dans notre page de composants. C'est par ici. Je vais l'appeler formulaire de saisie. OK, vous vous demandez peut-être pourquoi je l'ai créé sur page de mon compte et pourquoi je le fais glisser dans Cumbo. Parce qu'avec cette page, je peux obtenir les grilles, et je suis capable de concevoir tout cela en fonction Comme vous pouvez le constater, M. De. Permettez-moi de passer au formulaire et à la ligne de saisie. Permettez-moi de suivre cela vers cette chronique. Maintenant, il convient parfaitement. Laissez-moi le sortir du cadre. Je l'ai créé dans le composant. Découpons-le et ajoutons-le à nos composants. Composants, et c'est une commande de rythme vide V. Je l'ajoute ici. Mais avant cela, je voudrais modifier la contrainte. Ce sera à gauche et en haut. Vous allez être sur le côté gauche et en bas. Choisissons le bas. Et tu vas être à l'échelle. OK, que ce soit à l'échelle. Maintenant, je veux que ce soit en variante. Vous pouvez utiliser deux options comme celle-ci, ainsi que la propriété et les variantes. Je vais donc opter pour celui-ci. Sommes-nous maintenant avec le bouton Plus. Donc, le premier sera le nom, second, ce sera l'identifiant e-mail. Le troisième sera le numéro de téléphone, puis les informations de la carte et la date de naissance. OK. Donc, le premier sera le même, puis le second, ce sera l'identifiant e-mail. Ce sera notre formulaire de saisie. Je sais que je dois apporter quelques modifications. Je vis en Inde, donc mon code est plus 91, puis dix chiffres. Je vais taper des chiffres aléatoires. Je ne sais pas. Je ne sais pas, sans aucune raison, il est resté coincé dans cette hauteur automatique fixe. Je veux le changer en automatique comme ça et pareil avec les informations sur le code. Nous pouvons taper des nombres aléatoires comme zéro, zéro, zéro, 012, quatre, cinq, comme ceci Je pense que j'ai créé celui-ci en plus, donc je vais dater celui-ci. OK. Passons maintenant à la page de notre compte, celle-ci, et passons aux comparateurs d'actifs et d'actifs. Nous avons un formulaire de saisie. Faisons-le glisser ici. OK. Permettez-moi de dupliquer celui-ci. Ce sera notre numéro de téléphone. Ça va être peut-être. C'est ce que je vais dire tous les deux. Passons à ce panneau de conception, et comme vous pouvez le voir, voici notre formulaire de saisie. Actuellement, la propriété est un et c'est la valeur par défaut. Je sais que je n'ai pas donné de nom. C'est une très bonne pratique. Permettez-moi de revenir au formulaire et de le renommer. Tout d'abord, ce sera un nom. OK, alors laissez-moi d'abord saisir la propriété. Ce sera donc un type similaire à quel type champ de texte s'agit-il ? Ça va être un nom. Nom Ce sera un e-mail. Non, ajoutez un identifiant. Ça va être le numéro PH C'est Cardin et ça va être le cas Je pense avoir ajouté un bouton plus. OK. Ce sera donc la date de naissance. C'est la date de naissance. OK, j'ai ajouté toutes ces choses. Passons maintenant à PIPMA et saisissons actuellement son nom dans le formulaire de saisie Je veux que ce soit un e-mail. Après cela, je veux que ce soit un numéro de téléphone, et cela doit être informatif, dernier doit être DOB. C'est la date de naissance. Je vais donc dire qu'il était très facile de créer une page d'informations sur le compte. OK, c'était l'essentiel. Nous savons déjà comment créer des composants et des variations, tout ça. C'était donc la base. Maintenant, ajoutons une variation multidimensionnelle ainsi qu'un bouton de bascule. Supposons que vous ne puissiez pas modifier votre numéro de téléphone sur cette application. Donc dans ce cas, ce que nous pouvons faire, c'est changer la couleur comme si nous pouvions en faire un décile Passons donc aux composants et créons une variante. Je vais donc développer cela et le copier ici. Et laissez-moi devenir un disciple. Je vais donc le garder comme celui-ci. OK. Je vais donc comprendre qu'il s'agit d'un handicapé. Cela signifie que personne ne peut modifier ce numéro lorsque vous l' ajoutez pour la première fois. Nous pouvons ajouter une nouvelle variante. Passons à la variante input and plus et ce sera stratus et la valeur devrait être activée parce que je veux ce grand bouton Si vous ne le faites pas ainsi, si vous définissez ce centre par défaut, si vous choisissez Créer une propriété, et si vous essayez à nouveau d'activer et de désactiver dans les propriétés, cela ne fonctionnera pas. Gardez donc à l'esprit que vous devez ajouter et désactiver la valeur ici avant de créer cette propriété. Créons une propriété, et elle sera activée, et elle sera ajoutée, et ce sera notre numéro de téléphone. Si je vais dans mon application, je veux maintenant montrer que c'est la chose désactivée, donc je peux simplement décocher ce bouton Comme vous pouvez le constater, cette option est désactivée. La partie numérique n'est pas surlignée. Pour ce faire, lors de la création du compte, nous utilisons tout ce que nous avons appris dans les composantes de variance précédentes, ainsi que dans les composantes multimions, ainsi que dans le bouton de traque. Il y a une chose. Supposons que vous ajoutiez votre adresse e-mail comme ceci et que vous ayez oublié d'ajouter un point, et que vous ayez ajouté autre chose D. Comp c'est une erreur, donc cela ne fonctionnera pas Je veux montrer que c'est l'erreur. Je vais donc en changer la couleur. Ça va être rouge. Comme ça. La ligne doit également être rouge. Je vais le changer en cette couleur et pareil pour celui-ci. D'accord, comme ça, mais nous devons ajouter un autre élément, comme une erreur. Permettez-moi de passer au formulaire de saisie, cliquer sur le bouton plus , de terminer, et celui-ci sera coloré. Et nous pouvons le créer dans un bouton à bascule, alors créons-le ou nous pouvons simplement taper deux ou faux ou S ou non Donc pour cela, je vais utiliser. Et créez une propriété. Cela signifie que l'alerte est oui, mais ce n'est pas Je vais donc ajouter que non, vous êtes dans une erreur, vous devez donc avoir Oui. Si je passe à ma haute fidélité et disons laquelle c'était ? OK, M LID, et créons-le. Supposons que l'utilisateur tape autre chose, qu'il ait ajouté D et qu'il ait oublié ce point. Dans ce cas, nous pouvons l' activer et il sera affiché à l'utilisateur, vous allez mettre quelque chose. Tu dois le changer. OK, voici la page de notre compte. Je sais que nous pouvons faire beaucoup de choses, mais je veux juste vous montrer la puissance des composants, des composants multidimensionnels variés ainsi que la puissance de ce simple bouton à bascule comme celui-ci Lors de la conception, il est essentiel de prendre en compte la facilité d'utilisation et la fiabilité du formulaire Je vais modifier l'espacement, le vérifier sur mon téléphone et je vais l' ajuster pour un look plus épuré Mais je n'ai pas d'iPhone pour le moment, j'en ai 100, donc je vais probablement le vérifier sur le téléphone de mon ami, et je vais le changer, donc je vais le faire comme si les couleurs ne sont pas trop visibles Je vais le rendre plus transparent ou j' ajouterai un peu plus de filtres, 50 %, comme ça. Ça a l'air plus cool. La puissance des composants à variation brille lorsque nous devons améliorer notre conception Comme nous pouvons le voir dans les composants, nous avons différents types d'actions, comme un élément erroné, un élément désactivé et celui-ci actif. Je sais que c'est une chose un peu complexe à comprendre pour un débutant. Mais si vous vous entraînez encore et encore, vous comprendrez et vous serez capable de les créer en une seconde, et nous pouvons simplement glisser-déposer comme ça et nous pouvons changer le type de couleur, tout cela. OK, comme ça. Cet exemple plus avancé démontre donc le potentiel des variables multidimensionnelles. En conclusion, nous avons abordé la création de formulaires à l'aide de composants et de variables Dans le fGMA, en mettant en œuvre cette technique, vous pouvez concevoir efficacement formulaires dynamiques et adaptables pour une expérience utilisateur fluide Mais avant de quitter cette vidéo, je voudrais vous montrer quelque chose. Vous n'avez donc pas besoin de créer un formulaire à nouveau, et encore une fois, vous pouvez utiliser quelqu'un d'autre pour travailler comme ça. Vous pouvez accéder à la communauté Figma et simplement rechercher des entrées dans les champs, et vous obtiendrez celle-ci, saisissez-la dans Figma, et vous pourrez simplement la copier Permettez-moi de copier cette copie. Et où est mon appli ? OK, alors Pet. Je peux juste utiliser ici au lieu de ce nom, et je peux changer la couleur, et il est livré avec toutes les fonctionnalités. Je vous montre le champ et l'icône, ainsi que l'icône de droite et l'icône d'erreur. Comme celui-ci, il est déjà livré avec toutes les fonctionnalités, nous n'avons donc pas à le créer à partir de zéro, mais nous apprenons à partir de zéro. Je vous montre comment créer toutes ces choses à partir de zéro, car lorsque nous les utiliserons, nous saurons ce que cela signifie. C'est pourquoi il est classé, pourquoi il est actif, pourquoi il est désactivé, et pourquoi il contient une erreur, une icône et tout ça. Il y a un autre exemple. C'est comme le bouton d' inscription de Google Sign in. Vous pouvez également utiliser ce design fin. Vous pouvez le copier et vous connecter à UAP en utilisant Google Voici quelques bonnes pratiques à mettre en œuvre dans la conception de l'UA, si vous souhaitez gagner du temps et si vous souhaitez utiliser directement les actifs de quelqu'un d'autre, et vous pouvez les personnaliser. Après cela, vous savez comment le personnaliser et tout ça. L'objectif principal de cette vidéo était mettre en œuvre tout ce que nous avons appris dans les vidéos précédentes en un seul élément, comme dans le compte. Mes amis, continuez à vous entraîner et à expérimenter, et je vous retrouverai dans la prochaine vidéo. Bonne conception. 78. Projet de cours 14 : maîtrise des comptes et des catégories : construire pour le flux d'utilisateurs dans Figma: Si je suis fantastique pour une double dose de plaisir en matière de design. De cette façon, nous nous sommes donné pour mission de créer deux pages de cartes épiques, la page du compte et la page des catégories Préparez-vous donc à tirer parti de la puissance des composants des fourgons et votre créativité sans limite pour créer une expérience d'achat à la fois conviviale et visuellement Mais d'abord, récapitulons l'essentiel. Le premier concerne les composants. Ce sont vos éléments de base utilisables. Alors laisse-moi te montrer Carns. Ce sont vos éléments de base, comme des boutons d'uniforme en rondins et des cartes de produits . Considérez-les comme des briques Lego pour votre design, ajoutez-les pour les assembler pour former structure impressionnante, puis une variante. Nous créons ces variantes par erreur ou désactivation. Les variantes sont des armes SC, elles vous permettent d'ajouter de la variété et personnalité à vos designs en quelques clics, et vous devez également utiliser le multidimensionnel. Ces variantes surpuissantes vous permettent combiner plusieurs propriétés à la fois, créant ainsi des conceptions dynamiques et dynamiques qui ajoutent une touche différente aux différentes tailles Donc, sur une page de compte, vous devez composer une brique conçue pour exploiter composants tels que ceux créés Style, couleur et topographie experts. Créez des éléments dynamiques qui s'ajoutent aux données utilisateur, en plusieurs dimensions. Et ajoutez une icône, sentez la couleur pour encore plus de magie. Et dans la catégorie, je vous fournis toutes les icônes des ressources. Alors vérifiez cela et ajoutez ces comptes. Après avoir terminé la page de compte et la page de catégorie, capturez un design avec des tramways avec capture d'écran et soumettez-le dans la section du projet Je sais que certaines personnes, comme moi, ou pas, ne le feront pas, alors ne paniquez pas, revenez à la vidéo ou contactez-moi pour obtenir des conseils. Je suis là pour vous aider et n'ai pas hâte d' accepter cette bizarrerie Expérimentez et amusez-vous. C'est l'occasion de créer quelque chose de vraiment unique. Donc, profitez du voyage. Le design consiste à explorer et à apprendre. Célébrez votre processus et amusez-vous bien. Je fournis également toutes les étapes dans le fichier d'exercices. Allez-y et lisez toutes les étapes. Adressez-le comme ça et collez-le dans la section du projet, et vous pouvez également le partager et l'emporter là-bas. Alors prenez quelques feuilles de serpillière, remplissez-les de créativité et lancez-vous dans le monde du design de plicar J'ai hâte de voir les incroyables pages que vous allez créer. 79. Comment concevoir une conception d'interface de notification dans Figma: Étudiants, êtes-vous prêts à conquérir une nouvelle frontière en matière de design ? Aujourd'hui, nous nous intéressons au domaine crucial de l'application qu'est la page de notification par carte de clic. N'oubliez pas que nous avons intégré toutes ces leçons épiques dans notre cerveau de Figma, comme la variante Cerence, le groupe d'images, en plus de mettre à jour les composants, plus de mettre à jour les composants Vous le nommez, nous avons tout escaladé dans notre cerveau. Ils sont donc tous sur le point de s' unir dans une symphonie de biais en matière de design. Mais il ne s'agit pas simplement d'un exercice technique. Nous sommes en train de créer les héros méconnus de l'expérience américaine, la fonction Guardian Open, le canon restreint des bonnes nouvelles et peut-être des moins bonnes nouvelles. Mais bon, transparence. Votre utilisateur ouvre l'application Clicker et Bam, ils ont été créés par une page de notification Ce n'est pas seulement fonctionnel , c'est aussi un régal pour les yeux. Rédigez un message clair et conscient, diffusez des animations complètes pour les mises à jour importantes, et peut-être même des plats personnalisés ou saupoudrés Nous parlons de repères visuels qui attirent l'attention sans crier, comme « achetez maintenant » ou « cliquez sur le bouton de réclamation ». Des bagages si doux qui guident l'utilisateur vers le prochain achat. Et une touche inattendue pour que les choses restent intéressantes. Passons donc à la figma et concevons notre panneau de notification Comme vous pouvez le voir, j'ai conçu ce panneau de notification, nous allons donc concevoir quelque chose de nouveau. Et comme vous pouvez le voir, j'ai également mis à jour celui-ci, nous allons donc voir comment nous pouvons le faire. Comme vous pouvez le voir, j'ai un cadre vide en toile vierge, et j'y ajoute des éléments tels que la notification, Mficon J'ai juste copié celui-ci, j'ai changé le texte, Mification et ajouté ce profil Si une personne souhaite accéder à son profil, elle peut simplement taper ici et accéder à cette section, mon compte. Et d'ailleurs, j'ai ajouté tous les inconvénients car avant ça avait l'air trop ennuyeux. J'ai donc pensé à ajouter des icônes pour donner de la personnalité. Maintenant, comme vous pouvez le constater, il a l'air moderne et en quelque sorte utilisable. OK. Concevons ma page d'induction. Je veux un cadre, cadre, et laisse-moi dessiner un cadre. Mais permettez-moi d'activer le grain des colonnes. Je sais que nous n'avons pas beaucoup utilisé Rose parce que je pense que je pourrais aborder ce sujet dans une section ou peut-être une section préliminaire. C'est tellement direct pour ça. Je veux que ce soit 15 bords arrondis et qu'il y ait moins d'alex un peu de couleur. Actuellement, il n'y a pas de remplissage coloré et je veux que cette couleur soit encore une note. Pro est censé être ici. Comme ça. Et nous avons déjà créé un dégradé, mais je pense que je vais le faire Essayons donc ce dégradé car je l'ai déjà créé là où c'est notre champ. OK, ça l'est. Et nous avons créé ce dégradé. Utilisons donc celui-ci. OK, alors laissez-moi désactiver les colonnes. OK, j'ai donc mangé cette icône représentant un trophée pour la rapidité, afin que vous puissiez la télécharger à partir de là. OK, maintenant ajoutons du texte sur ce panneau de notification, comme festival. Disons que c'est pendant que cela se passe, peut-être à Noël ou au Nouvel An. Le festival ne proposera donc que pour vous. Peut-être que nous vous donnerons des coupons, ils pourront les atténuer et ils pourront obtenir réduction à 100 %, comme des chaussettes. Je sais, chaque fois que je vais sur ce site web, ils disent 100 % de réduction, mais il n'y a rien qui est à 100 % de réduction. Dans certains cas, c'est 100 %, exemple si vous devez acheter quelque chose de très cher. Donc, dans ce cas, vous obtiendrez quelque chose gratuitement, mais ces articles ne valent pas tant que ça. C'est une caméra. OK, je vais donc ajouter l'offre du festival Valley. Ou ici. Disons qu' il s'agit d'un coupon à gratter, comme si l'utilisateur tape dessus et le gratte. Il révèle donc un code promo, qu'ils peuvent utiliser lors de l' achat d'un Permettez-moi donc d'ajouter qu' en maintenant Alt Control V enfoncé, grattez et gagnez. OK, j'ai donc choisi cette forme il y a un script fin, quelque chose comme si je n'arrivais pas à le prononcer Aga fine. OK. C'était il y a très bien, je crois. Je sais que je me trompe, donc vous pouvez me le dire dans les commentaires, peut-être sur les réseaux sociaux. OK, alors disons que nous faisons de la spéléologie à 100 % de réduction. Alors, bénéficiez d'une remise allant jusqu'à 100 %. Et ajoutons un bouton, comme acheter. Nous avons donc conçu Shop Robon, je suppose. Nous avons donc ce O dans les boutons et tapez est shop now et ple et je veux petit. OK, donc c'est très pratique. Disons que cela fonctionne dans les deux sens. exemple, l'utilisateur peut le gratter ou cliquer sur Shopbt et un produit spécifique bénéficiera d'une réduction de 100 %. OK, comme vous pouvez le voir, nous avons créé cette carte vraiment géniale. La couleur ne va pas très bien celle-ci. Alors laisse-moi changer cette couleur. OK, donc je vais opter pour le bleu. Donc, cela aime beaucoup par rapport au précédent. Et maintenant, nous pouvons ajouter un logo, notre logo Click Card ici. Je fais donc pression pour le réduire. Et je vais le placer ici. OK, nous avons donc reçu un trophée de Cliarap. D'accord, voici comment nous créons notre page de notification, et nous pouvons créer une fenêtre contextuelle, par exemple. OK, je vais vous montrer une page d'accueil. Par exemple, disons que l'utilisateur entre. Ils verront d'abord celui-ci. Après cela, il y aura une fenêtre contextuelle et dans cette fenêtre contextuelle, nous ajouterons celle-ci. Utilisez donc une redirection directe vers cette page, comme une page disco ou quelque chose comme ça, et ils pourront utiliser cette offre. OK, nous avons donc créé ce panneau de navigation dans une ambiance légère, je suppose. Permettez-moi donc de l'ajouter ici. Nous sommes donc dans un panel d'actifs, et il se trouve ici. Qu'est-ce que c'est ? Il fait noir. C'est pour faire nuit. Ajoutons donc cela comme ça, alors permettez-moi de réactiver mes caisses. OK, c'est donc du poisson maintenant. OK. Mais comme vous pouvez le constater, les icônes ne sont pas très visibles. Ils sont de couleur blanche. Je vais donc le changer dans cette couleur primaire. OK, j'ai choisi les films. Je dois choisir la sélection. OK, maintenant ça a l'air cool et visible. Comme vous pouvez le constater, ce n'est pas une mise à jour, nous pouvons donc le mettre à jour. Nous savons déjà que vous pouvez suspendre le v et vous pouvez le faire, ou vous pouvez indiquer les commandes principales. Mais disons que vous ne le savez pas, alors regardez-le. Cliquez avec le bouton droit sur le composant principal et dites simplement « pousser les modifications au composant principal », et cela changera tout Changez le push en Minot Je sais que ce n'est pas visible pour le moment, mais si je le frappe , il est visible Et si nous passons au composant principal, où il se trouve ici et où des modifications sont apportées. Si je le fais. Si je vais maintenant à la page principale, Azac est blanc, et je peux juste aller sur st, je peux apporter des modifications là où elle se trouve, je dois le laisser pendant scs maintenant si je passe en C, pousser les modifications vers Minot si je vais sur Moon, encore une fois, azac il est mis à encore une fois, azac Revenons à la distance . OK. Comme vous pouvez le voir, notre page de notification est terminée et elle a l'air vraiment cool. Maintenant, maintenant, il n'y a qu' une seule tâche pour vous. Tu dois concevoir ma page d'accords. Donc nous et nous concevons. Laissez-moi voir ce que nous concevons. Nous concevons la page d'accueil d'introduction, le menu Burgermenu, ainsi que la page produit, la page d' accord, la page accord Mais nous n'avons pas conçu ma page de commande. Il n'y a donc qu'une seule tâche pour vous. Tu dois concevoir ma page de commande. Alors mettez la vidéo en pause et faites-le et je vous montrerai ma version de ma page de commande. Alors, mettez la vidéo en pause. OK, j'espère que vous l'avez fait, que vous avez conçu le M ou le spage Alors laissez-moi vous montrer ma version. C'est ma version, et j'y ai conçu deux éléments, comme j'ai conçu celui-ci et celui-ci. Alors les deux lui demandent, et ils ont juste l' air différents. La première consiste donc à suivre votre commande. Donc, lorsque vous allez sur ma page de commande, vous verrez que vous achetez quelque chose. Et à partir de là, il vous indiquera votre date, ainsi que l'article, ainsi qu'un élément informatique, et vous pourrez accéder directement à cette page. Par exemple, si vous cliquez dessus, cela vous redirigera vers cette page de production et nous vous montrerons quel article vous avez acheté Pareil pour celui-ci, même fonctionnalité, mais il a l'air différent. Mais j'aime bien les deux. Mais si je dois utiliser in hap, j'utiliserai celui-ci. Ça a l'air beaucoup plus cool. Mais de nos jours, tout devient grand. Je pense donc que la plupart des utilisateurs utilisent ou conçoivent cette carte. Elles sont toutes géniales, regardez la page de modification et ma page de commandes. Donc je veux juste vous donner une cassette. N'oubliez pas qu'il n'y a pas d'erreur dans Figma, il n'y a qu'un heureux accident qui attend de se produire Il vous suffit donc d'expérimenter lors de la conception d'une page comme la page Modi ou ma page de commande. Et j'ai un téléphone. Et une fois que vous aurez terminé, partagez votre création avec le monde entier. Vous pouvez le télécharger sur les réseaux sociaux, me taper là-bas et le partager avec vos amis. Inspirons-nous les uns les autres et démontrons le pouvoir de la magie de Figma Voilà pour la vidéo d'aujourd'hui, et je vous verrai dans la prochaine. 80. Comment créer un composant TOOLTIP (survolez pour afficher du texte) dans Figma: Fire Fantastic Assembly. N'oubliez pas que nous avons créé un coupon de 100 % dans une vidéo de presse précédente. Donc oui, Baccala, parce que c'est sur le point de devenir plus étrange que Lama portant du rouge à lèvres D'accord, nous savons tous que les offres incroyables sont bien détaillées. Pour révéler les mystères de cette magie à 100 %, nous ajoutons une autre couche au gâteau ou devrais-je dire un oignon et le recouvrir d'une Il y a une prémisse. Je sais, c'est vrai. Donc, comme vous pouvez le voir dans ce coupon, j'ai ajouté une petite chose appelée termes et conditions. Si une personne veut connaître les termes et conditions. Je sais qu'ils ne le font pas. Mais supposons qu'une personne intelligente comme vous veuille vérifier les termes et conditions. S'ils cliquent dessus, cela leur montrera ce moins. Permettez-moi de vous montrer la démonstration proprement dite. Trois flux de type Pitch P. OK, donc ce coupon apparaîtra, et après cela , nous aurons les termes et conditions. Comme vous pouvez le voir, le curseur de ma souris se transforme en cette icône de main car elle est cliquable Donc, si je clique dessus, cela apparaît. 100 % de réduction. Oui, vous l'avez bien lu, mais procurez-vous un objet extrêmement cher, et CP Recid qui réduction incroyable sur un objet mystère La chasse au trésor, le shopping, je suis vraiment prête. Vous obtenez donc le vide. L'utilisateur obtiendra donc cette petite fenêtre contextuelle. C'est donc le point de départ. Nous allons créer dans cette vidéo. Vous vous demandez peut-être pourquoi site Web com joue à ces jeux intermédiaires. Parce que 100 % de l'offre, cet encens mérite une petite aventure À part le fait de déchiffrer le code que cela offre à WildF, n'est-ce pas comme gagner à la loterie des designs ? En parlant de raffinement, souvenez-vous de cet objet clé expressif que vous deviez acheter, même d'accéder à la folie Oui, devinez quoi ? Il se peut qu'il entre dans la poignée plus tard ou qu'il devienne clé d' un autre nivellement caché de ce design labian Qui sait, les possibilités sont infinies, comme vous l'imaginez. Et un peu aussi déroutant qu'un formulaire fiscal qui réduit les jambes. D'accord, je vais donc vous donner également quelques conseils de psychologie lors la conception de ce projet. Alors laisse-moi clore celui-ci. Et permettez-moi de supprimer celui-ci également, car nous allons tout créer à partir de zéro. Je vais donc faire celui-ci. OK. Donc, vous devez y aller et allons-y pour concevoir davantage. Rangez des rectangles. Je sais que les gens sont intelligents. Ils peuvent tout faire à partir de zéro. Mais c'est mon travail. C'est à moi de le faire. Prenons un trigle à un trigule Ajoutons-le ici et je vais en avoir deux, en ajoutant deux Je veux les trois bords arrondis, et ajoutons-les ici. Ou peut-être par ici. Ajoutons un cadre. Avant cela, permettez-moi d'ajouter un texte. Contrôle V. Ajoutons-le ici au centre, et ajoutons-les dans le cadre. Contrôle. Nous avons le cadre et le processus que vous devez créer, laissez-moi en modifier la partie. Comme ça. P est le même, alors permettez-moi d'ajouter un nom. C'est comme des termes et conditions. OK, passons au protype, nous ajoutons une superposition à une superposition Auparavant, nous ajoutions une superposition à cet article, mais maintenant nous ajoutons une superposition à cet article, et nous allons le faire en utilisant des termes et conditions, et j'ai mis à jour mon composant principal C'est donc par ici. Je viens d'ajouter les termes et conditions et ils ont été mis à jour. Nous savons tous comment cela fonctionne. Double-cliquez donc sur les termes et conditions et joignons les termes et conditions, et pareil sur l'onglet. OK, je sais quel est le problème. J'ai ajouté trois choses ici. Alors laisse-moi tous les dater. Maintenant, laisse-moi choisir à nouveau. R, maintenant c'est bon. Maintenant, cela me permet d'utiliser on type. taper, accédez aux conditions, dissolvez, mais vous devez être une superposition ouverte, et choisissons un manuel, Au moment de taper, accédez aux conditions, dissolvez, mais vous devez être une superposition ouverte, et choisissons un manuel, ajoutons-le ici, et tout ira bien Je veux que ce soit 25 %. Maintenant, si je clique sur ces trois, j'espère que cela fonctionnera. Il s'agit d'une modification de cette icône. D'accord, comme vous pouvez le voir, cela fonctionne à 100 %. OK, c'est donc le terme conditionnel. C'est ainsi que nous utilisons la superposition à l'intérieur de la superposition. Vous pouvez également utiliser cette même chose pour créer celui-ci. Laisse-moi te montrer une chose. J'ai ajouté une icône en forme de bouton, elle vous donnera quelques informations. Donc, si quelqu'un clique dessus, seuls les numéros de téléphone indiens seront affichés. Vous ne pouvez pas utiliser un autre numéro de téléphone. OK. Si je clique sur cet acc, uniquement les numéros de téléphone. Cela appelle comme un bouton d'information ou des infobulles, quelque chose comme ça. C'est donc très pratique. OK, alors je voudrais vous donner quelques conseils de psychologie. Comme vous pouvez le constater, l' état des signes terminologiques est très faible. Et c'est intentionnellement petit car ils ne veulent pas montrer conditions générales réelles à leurs clients. Et les termes et conditions sont toujours rédigés dans un langage très dur. Certaines personnes pourraient l' obtenir ou d'autres. Ils rédigent les termes et conditions très durement. Les mots sont vraiment difficiles à comprendre, et ils le font intentionnellement car ils veulent simplement que l'utilisateur clique sur cette icône. C'est donc la technique de psychologie pour les étudiants, tout tourne autour de la superposition Nous avons créé cette superposition en utilisant à nouveau la superposition. Je sais que c'est le début, et nous pouvons utiliser quelque chose pour créer cette infobulle Il y a une chose que je voudrais te dire. J'utilise Google Bar pour créer ces conditions générales. Vous pouvez donc simplement accéder à Google Park et attribuer celui-ci à ce port Je t'ai donné celui-ci. Au début, tu m'as donné la grande réplique. Je ne veux pas ça, alors j'ai encore une fois dit à Go Bard que je voulais une version plus petite. Il m'a donc donné celui-ci, l'a copié et je l'ai utilisé. C'est comme ça que tu devrais m' utiliser . Je ne prendrai pas ton travail, ne t'inquiète pas. Ce n'est pas encore si intelligent. Je sais que ce sera le cas un jour, mais ce n'est pas encore intelligent. Vous devriez tirer parti de l'IA. J'enseigne également l'ingénierie rapide de l'IA, comment utiliser l'IA pour les réseaux sociaux et tout ça. Si tu le souhaites, tu peux y jeter un œil. Le coût est indiqué sur cette plateforme, et j'ajouterai ce lien dans les ressources. Alors allez-y, vérifiez cela et utilisez l'IA pour sauver votre travail. Maintenant, excusez-moi, j'ai un lama à qui je dois assister. Jusqu'à la prochaine fois, liberté du fantastique, restez bizarre, restez curieux. Saatum pour plus de psychologue du design. 81. Comment créer des prototypes multiples et créer des flux séparés sur une page Figma: C'est un designer fabuleux. Aujourd'hui, nous plongeons dans le monde des flux à Pigma. Alors, que sont exactement les flux ? Eh bien ? Ce ne sont que des voies astucieuses, représentées par le flux un, le flux deux, le flux trois, etc. Vous êtes-vous donc déjà demandé comment les utiliser, comment les renommer ou simplement comprendre de quoi il s'agit Vous êtes donc dans le bon test. Commençons donc. Tout d'abord, vérifiez si vous avez déjà des flux. Passons donc au prototype, et je vais cliquer sur cette section aléatoire, espace vide. Comme vous pouvez le voir, j'ai des flux, comme j'ai cinq flux. Donc, un Ploto en coule trois, coulez-en quatre et cliquez sur la farine C'est pourquoi nous le voyons circuler. Eh bien, c'est pratique lorsque vous travaillez sur différentes sections ou fonctionnalités, vous pouvez même les connecter à des pages spécifiques. Vous avez peut-être vu que j'utilise beaucoup le flux, comme lors d'une présentation. C'est donc facile. Si je clique simplement dessus, cela représente le flux comme vous pouvez le voir. Il ne représente qu'un seul écran le moment car il n' est pas connecté. Mais si je le connecte comme celui-ci envoyé, je clique dessus comme vous pouvez le voir, maintenant il est accessible, et nous avons également notre superposition Voici donc comment fonctionne le flux. Et disons que je souhaite accéder au flux 4. Je peux juste le doubler et cela montrera lequel est le flux quatre. Et après ce flux deux, flux trois. Et vous souvenez-vous quand nous l'avons créé aussi c'est-à-dire que dans ce cas, j'utilise flow. Donc, si je le fais avant, si je vais Proto et si je le présente, euh, cela apparaîtra Et dans cette section de diapositives, j'ai tous les flux. OK, nous avons donc le flux 1. Donc, dans ce domaine, je peux juste le faire, le prendre comme ça. Euh, j'ai le flux 3, je peux accéder à Clickar sur la page d'accueil. D'accord, revenons à notre design. OK. Je pense que Wild Wc l'a fait. J'ai accidentellement supprimé ce nom. Alors permettez-moi de le renommer. Si vous vous retrouvez à dessiner dans le flux et que vous souhaitez créer une lettre, cliquez sur l'arrière-plan , passez au prototype et supprimez celles dont vous n' avez pas besoin dans un ensemble épuré. Disons que je ne veux pas de flux de clics dans le panier Je peux donc simplement cliquer sur le flux de clics ici et, comme vous pouvez le voir, cela apparaît sur le panneau du prototype. Et je peux simplement cliquer sur ce bouton, et il est supprimé maintenant ou je peux également utiliser le bouton de suppression. Comme vous pouvez le voir, nous travaillons sur notre application Click Cart Comma Supposons donc que je souhaite démarrer mon flux à partir de cette page. Donc, dans ce cas, je peux simplement accéder au paramètre Ptype et ajouter un nouveau flux, et je peux le doubler et le renommer Disons qu'il s'agit d'une carte-clic. Je peux vous dire que c'est une carte-clic. Application Clickard. Je peux juste le renommer Vous vous demandez peut-être pourquoi nous avons des flux différents. Eh bien, cela aide à organiser le prototype E, en particulier lorsqu'il s'agit de projets complexes. Chaque flux est un scénario distinct pour le commerce. Nous avons d'abord créé ce flux. Ensuite, nous avons ce câble et nous avons joint ces superpositions. C'est un voyage qui nous aide à organiser nos affaires. Et il y a encore une chose, disons que vous souhaitez ajouter une description à ce flux. Il suffit donc de cliquer sur ce flux, d'aller ici et de cliquer sur l'application Pencil, description. Et je peux dire que c' est la page d'accueil. OK. Si je ferme celui-ci, si je passe à la présentation et qu'est-ce que c'était ? Comme vous pouvez le voir, c'est la première page sur laquelle vous cliquez sur la carpe. Nos parties prenantes ou nos clients sauront quel est le sens de celui-ci ? Il y a une autre chose vraiment cool comme disons que vous voulez partager vos flux. Dans ce cas, je souhaite partager mon flux numéro deux. Je peux simplement copier ce lien. Vous pouvez dire qu'il y a un bouton de lien, copions-le et il nous donne l'URL. Si je le colle ici, pour que vous puissiez voir, nous avons obtenu notre flux deux et il y a actuellement deux comptes anonymes. Ils utilisent notre flux, et nous pouvons accéder à nos flux, mais je ne sais pas pourquoi il manque quelque chose. Par exemple, je pense qu'il y a un problème ou quelque chose comme ça parce que nous ne sommes pas enfermés dans Figma en ce moment Mais pourquoi ils affichent tous les flux. C'est censé nous donner un seul flux, pas tous. Si cela vous arrive, merci de me le faire savoir. avantage du lien est donc que vous pouvez partager directement avec les membres de votre équipe, ainsi qu'avec vos clients, ainsi qu'avec vos amis. Tu veux juste, oh, leur faire savoir. C'est ce que je travaille, voici à quoi cela ressemble, et voici comment cela fonctionne comme ça. Les flux en bref constituent donc le fil conducteur de votre design et vous aident à naviguer facilement dans des types complexes Il est essentiel de les renommer et d'ajouter une description pour que tout reste propre et bien rangé Donc, d'accord, c'est le point faible sur les flux. Prêts pour encore plus de magie. Rejoignez-moi dans la prochaine vidéo, et continuons à créer des designs incroyables. 82. Prototyper des transitions de superposition dans Figma: Il explique que les créateurs s' embrouillent parce que c'est une période de prototypage Nous sommes sur le point de plonger dans le monde incroyable de vous donner vie à Click Card Alto dans une figma Du sud, des boutons brillants qui font réellement des choses, plus de transition qui offriront votre utilisateur un écran interactif magique Maintenant, je sais que certains d'entre vous sont peut-être pros de Pigma qui utilisent déjà des prototypes comme les Ninjas Mais bon, pour tous ceux qui ont envie de prototyper. Et maintenant ? Ping, ne t'inquiète pas. Cette vidéo est un guide convivial sur les bases. Nous ferons de petits pas, connecterons des écrans, ajouterons de l'interaction et créerons votre application Click Card, impression d'être un chef-d'œuvre fluide et convivial. Cela va donc être facile. Nous gardons les choses simples, même si vous n'avez jamais touché à Figma auparavant Pensez à la prise d'empreintes digitales, mais avec des pixels et un outil de conception génial sentez aventureux, si vous connaissez les étapes, mettez la vidéo en pause et montrez vos compétences Créons donc une communauté de Cliard ProtypingGUR. OK, pas de combat honteux. Je sais que certains d'entre vous peuvent se sentir perdus. Il s'agit d'un filet de sécurité. Nous allons le décomposer, répondre à vos questions et faire en sorte que tout le monde atteigne la ligne d'arrivée. Ce dont un prototype peut être fier. Et transformons la vision de Clickart en réalité interactive cliquable Alors allons-y. OK, donc j'ai déjà quelques défauts qui sont totalement inutiles. D'accord, passons d'abord au prototype. Permettez-moi d'ajouter celui-ci parce que je veux tout montrer depuis le début OK, donc quand tu passeras à la rasection, il y aura des points comme celui-ci, et il suffit de les relier Ce sont les nôtres, et après l'avoir connecté, nous vous proposons quelques options. Comme au toucher, il faut accéder à la page d'accueil, et l'animation est instantanée, je veux que ce soit après un certain délai. Je ne veux pas que ce soit sur un onglet. Au bout de 800 millisecondes, vous devez vous rendre sur cette page Nous allons donc le dire à Figma et nous voulons que ce soit une animation disol Si vous le souhaitez, vous pouvez passer à une animation intelligente, mais le problème avec l'animation intelligente est que vous faites parfois des choses étranges. Donc, la plupart du temps, j'utilise Dissolve. OK, donc ça marche. L'animation intelligente fonctionne dans des exemples complexes. Nous allons donc voir ces choses à l'avenir d. Il en va de même pour cela. Dans cette offre, nous allons donc faire du prototypage simple. OK, nous en avons donc terminé avec le premier. Principalement, nous avons déjà pris connaissance de ce flux. Je le renomme donc. Je l'ai donc appelée probablement carpe. À partir de là, notre flux va commencer. OK, nous en avons terminé avec celui-ci, et je vais le garder tel quel parce que nous avons besoin des fenêtres contextuelles sur notre écran, ainsi que de ces termes et conditions. Nous voulons maintenant connecter ce menu de hamburgers. Voici donc l'icône du menu des hamburgers. Je vais donc connecter celui-ci à ce menu. Et d'accord, c'est actuellement sur la bonne voie et on tab n'est pas un animal parce que je suppose que je l'ai déjà ajouté. Je dois donc supprimer celui-ci, celui-ci également. Alors faisons-le à partir de zéro. Quand quelqu'un clique dessus dans un onglet, on passe maintenant à la page des hamburgers, mais je ne veux pas tout ça. Il y a donc une chose que Figma se souvient de votre animation précédente Donc, dans la chose précédente, nous avons ajouté. Dissolvez. Ça permet de conserver ce truc qui se dissout Gardez donc cela à l'esprit. Si vous souhaitez le modifier, le modifier ou conserver, vous pouvez le conserver. Dans ce cas, je veux emménager. Je veux que cette animation soit prise du côté gauche comme ça après 300 millisecondes Définissons également ce menu de hamburgers. Lorsque nous cliquons sur cette flèche de retour, accéder à la page d'accueil. Mais actuellement sur onglet, nous sommes en train d'emménager. Donc, si j'utilise ce menu de hamburgers, comme vous pouvez le voir, il glisse vers l'intérieur, mais lorsque je clique sur cette flèche de retour, comme vous pouvez le constater, il ne fonctionne pas comme je le souhaite. Donc, dans ce cas, nous voulons que ce soit un déménagement, et cela doit se faire du côté gauche comme ça. Et nous avons également ajouté de l'animation. Nous allons donc garder celui-ci. Et si je place à nouveau mon menu de hamburgers, comme vous pouvez le voir, il glisse intérieur et vers l'arrière, déménage. OK, donc c'est comme ça que c'est censé fonctionner. OK. Nous en avons maintenant terminé avec celui-ci. Alors disons, allons-y avec la mode. Et associons cette mode à cette chaussure. Je sais que c'est une bonne méthode, car dans le domaine de la mode, nous avons beaucoup de catégories, et je vais juste passer à la page des produits sur les chaussures. Sur l'onglet, accédez aux détails du produit, et je veux que tout soit instantané. Optez pour une instance. Rejouons-y en avant-première après 800 heures, j'ai bien compris, je ne veux pas de cette façon. Comme ça. C'est un instant. Si je le mets à dissoudre, voyons comment cela fonctionne. La mode se dissout. Fonctionne mieux. Je vais continuer à utiliser le diesel d'introduction et réduire de 300 millisecondes. OK maintenant, travaillons sur la page du compte. Chaque fois qu'un utilisateur clique sur cet humour, ce n'est pas une icône humaine comme celle-ci, et elle doit aller sur mon compte. J'ai ajouté une chose simple. La page et le disol gcc sont sortis et 300 millisecondes. Si je clique dessus, comme vous pouvez le voir, cela se résout, et nous sommes maintenant sur cette page d'arnaque. OK, maintenant je veux y retourner. D'ici, je ne peux pas revenir en arrière. Je peux juste appuyer sur ce bouton i. OK, je veux donc retourner sur ma page d'accueil. Donc, lorsque je clique sur Retour, vous devez aller sur la page d'accueil, et j'ajouterai quelques entrées de base. Naviguez sur le terrain d'accueil, Disol est éteint. Même chose. Si je clique sur cette page d'accueil. C'est cool. OK. Quelle est la prochaine étape ? OK, sans aucune raison, j'ai ajouté celui-ci, donc je vais traiter celui-ci parce que nous ne le voulons pas Bon, maintenant, créons une catégorie. Comme vous pouvez le voir, nous sommes une page de catégories, mais l'icône d'accueil est surlignée. Je souhaite donc que cela soit mis en évidence. Passons donc à la conception et à la sélection des couleurs. OK, maintenant ça a l'air super. Nous savons donc que nous sommes dans la section des catégories. OK, maintenant je dois tous les rejoindre. Actuellement, je crée des panels, alors passons au prototype, vous allez figurer dans une catégorie comme celle-ci ici, et je vais garder les choses simples La catégorie négative, c'est tout. Même chose. OK maintenant, rejoignons ma commande. Je sais que c'est un peu loin des modifications de la page d'accueil. Mes ordres, c'est fini. Vous pouvez utiliser cette méthode, comme faire glisser et rechercher vos commandes, et vous pouvez également la trouver ici Mais je sais que j'ai créé plein de choses sur ce cadre. Et nous avons un tas de cadres, ainsi que des pages, allez. Si vous êtes une personne organisée, alors tout ne sera pas gâché comme ça OK. Donc, ma commande, c'est pareil. De l'animation, tout ça. Et notification de notification. Joignons-nous à la notification. La notification est là où elle se trouve, elle est ici. Notification et Ma notification. C'est ma notification, je suppose. Mais j'ai deux notifications. Je ne sais pas pourquoi. OK, rejoignons celui-ci. Voyons voir. C'est juste ou pas. OK, celui-ci est le bon. Maintenant ça marche. La dernière chose qu'il me reste faire est de me connecter à mon compte. Mon compte, où est mon compte ? Celui-ci. D'accord, nous avons donc intégré près de 80 % ou peut-être 70 % de notre design. Jouons à son apparence. Après 800 secondes, après 800 millisecondes, nous obtenons cette Je ne veux pas celui-ci. Passons à la catégorie. Et encore une fois, ils ne sont pas joints, nous devons donc nous joindre à cela. Si je clique sur le retour en arrière, je peux accéder directement au pitch d'accueil. Je dois aussi déplacer un peu ce truc vers le haut. Alors laissez-moi aller sur le terrain et laissez-moi suivre les choses vers le haut. OK, ça va suffire, je suppose. OK, j'ai donc ajouté tous les vices à cette barre de navigation, mais nous en avons eu un avantage. Donc celui-ci est pour Dark Mo, et celui-ci est aussi pour Dark Mo. Donc dans ce cas, je peux simplement copier celui-ci et le coller ici, et il fonctionnera de la même manière. Donc, si je le fais glisser, et si je copie contrôle C et que je conserve le cadre et le contrôle, comme vous pouvez le voir, tout fonctionne correctement. Mais il suffit de changer de couleur. Donc, ce sont mes ordres. Je vais donc aller dans le panneau de conception et changer de couleur, celui-ci, et la notification Minot sera la troisième principale C'est bon pour le type. OK. C'est censé le faire, ça marche. Ça marche, mon frère fonctionne. Nous n'avons pas créé de page de panier, mais nous pouvons simplement rediriger vers la page Mold. Supposons que si vous l'ajoutez au panier, il commande automatiquement. Il contient de l'IA. OK, maintenant jouons avec cette appli. Je pense que j'ai tout rejoint. Nous devons donc apparaître. Je ne veux pas de cette mode. OK, ajoutez-le au panier, celui qui s'ouvre. Comme vous pouvez le constater, il y a un point chaud. Si je clique sur l'espace vide, certaines parties sont mises en évidence, appelées points chauds. Disons que je veux passer à la catégorie. Je peux juste cliquer dessus, mais je crois que je classe. Il est carré. Je vais changer cela et passer au compte personnel. Faux. Tout fonctionne. Il s'agit du prototypage de base de cette application, et laissez-moi passer à la catégorie. Cela fonctionne bien. Il a la même couleur, mais je ne sais pas pourquoi il montre le rectangle rouge. Nous avons tout vu pendant le prémort et allons voir le prototype réel sur grand écran Et mon flux est celui-ci. Cliquez sur l'application Cart. OK. Pop, allons-y. OK. Ensuite, les commandes des catégories C et Acme sont prises en compte De retour à la maison, Pogo, ça marche. Cela fonctionne. Nous pouvons également rejoindre ces deux pages, catégorie d' accueil, liste des sites de mification de mes commandes Je n'ai pas créé cette page car je pensais que notre projet allait devenir trop lourd. OK. Voilà , mes amis, le prototypage de base pour notre application de panier Merci donc de m'avoir rejoint dans ce cours, et je vous retrouverai dans le prochain. 83. Projet de cours 15 : faire pop-up et flow comme un pro : prototyper des interactions dans Figma: Figma pos, c'est l'heure du projet. Dans ce projet, nous devons créer des pop-ups, créer des pop accrocheurs avec les outils Figma Vous pouvez utiliser des formes, des couleurs, du texte, peut-être même des animations. Connectez ces fenêtres contextuelles aux pages, en utilisant facilement Over Lads Et après cela, créez Inception. Aucune création. Je veux dire, si vous cliquez sur les termes et conditions, ils doivent s'ouvrir, et c'est le début. Vous devez créer Inception. Et vous pouvez également créer celui-ci. Lorsque vous cliquez sur le bouton IE, il doit s'ouvrir. Ce petit menu. On l'appelle aussi pointe d' outil, je suppose. Ensuite, vous devez assembler tous les éléments en utilisant le prototypage, et nous avons déjà vu que comme ça, vous pouvez également utiliser des flux Et si vous pouvez également utiliser un seul flux. Cela dépend totalement de vous. Et après avoir conçu et joint tous vos designs, prenez une capture d'écran et soumettez-la moi dans la section projet. Tout tourne donc autour de notre projet 15, je suppose. Je ne sais peut-être pas de quel numéro il s'agissait. D'autres choses sont également disponibles en pédophile et à toutes ces choses et soumises à moi Donc c'est une photo, et je vais voir que tu es dans l'autre monde. 84. Scroll collant dans Figma: Co-designers, dans cet état d'esprit, nous plongeons dans le monde de l'épinglage des éléments à la fois vers le haut et vers le bas Cette technique ajoute une touche de fitness à notre design en permettant au contenu de glisser facilement derrière des éléments fixes. Et voici le monde cool du défilement horizontal dans Figma Êtes-vous prêt à améliorer votre jeu de design ? défilement horizontal dans Figma. Êtes-vous prêt à améliorer votre jeu de design ? Alors, commençons. Donc, avant de commencer notre vidéo, laissez-moi vous montrer quelque chose. Donc, si je passe à la présentation, comme vous pouvez le voir, si je fais défiler cette page, comme vous pouvez le voir, cette barre de navigation défile également avec notre design. Et ce n'est pas ce que je veux. Il devrait rester ici, au même endroit, et tout comme celui-ci, notre barre de navigation supérieure. Donc, si je le fais défiler. Comme vous pouvez le dire, cela augmente, mais je veux que cela reste ici. De cette façon, nous allons apprendre cela, ainsi que le défilement des verdicas ou le défilement horizontal C'est donc très simple. Sélectionnons la page d'accueil, puis passons au prototype. Et je sais qu'il y a une folie multivers. Mais nous nous intéressons à ces deux éléments comme la barre supérieure, désolé, la navigation dans la barre supérieure et le bouton de navigation inférieur. Commençons donc par la barre supérieure. Il suffit donc de sélectionner ceci. J'espère que vous avez tout ajouté dans le cadre. Et laissez-moi vérifier. OK, j'ai ajouté dans Cmd Car frame, c'est pareil, pas pareil, mais ça ajoute tout dans le cadre Comme vous pouvez le voir, je suis en prototype maintenant, et la barre de défilement fait défiler avec le parent. Je veux que le top n bar reste au même endroit. Nous allons donc choisir le fixe et le overflow. Donc actuellement, il n'y a aucun élément de débordement comme une image ou un rectangle débordant en dehors de ce cadre Nous allons donc rester tels quels, débordement, pas de défilement. Et maintenant, si je fais défiler cette page. Donc, comme vous pouvez le voir , il y reste. Il ne bouge pas avec le cadre entier. Et maintenant, changeons celui-ci et celui-ci également. Donc, comme vous pouvez le constater , il bouge également. Et je veux aussi que celui-ci reste au même endroit. Alors allons-y et choisissons cette photo au même endroit, ainsi que celle-ci Idem ici, corrigé comme étant le plus simple et sans défilement. Maintenant, si je regarde mon application, comme vous pouvez le voir, tout reste au même endroit. Nous ne faisons donc qu'épingler nos éléments. C'était donc très simple. OK, tout tournait autour de la façon d' épingler tous les éléments d'un fuma Mais comme vous le voyez, notre cadre est fait de tabouret et je n'en voudrais pas comme ça. Je veux que notre cadre soit comme ça. Et vous pouvez voir que les éléments sont hors cadre. Je dois donc cliquer sur le contenu du clip. Maintenant, ils sont clipsables. Ils ne sont donc pas supprimés, en fait. Donc, si je vais dans l'application et si je la fais défiler vers le bas, comme vous pouvez le voir, tout s'y trouve D'accord, voici comment fonctionne le contenu des clips. Maintenant, laissez-moi vous montrer comment fonctionne défilement vertical ou horizontal Donc actuellement, nous avons un défilement vertical dessus, mais je souhaite ajouter un défilement horizontal Je pense donc que j'y ai ajouté une mise en page. Donc, si je choisis celle-ci, la mise en page, comme vous pouvez le voir, le contenu est hors cadre, et nous pouvons utiliser le contenu du clip. Et laissez-moi suivre cela dans un cadre et pareil avec celui-ci. Laisse-moi recadrer le cadre. Pas de recadrage. Je suis juste en train de l'ajuster. OK. Maintenant, si je passe à la mode des produits, faites-les défiler, comme vous pouvez le voir. OK, je pense que je dois me rendre au dérailleur du prototype P. OK, il n'y a pas de défilement. Et ajoutons un défilement. Cela devrait être ou en quelque sorte ? Il est vertical. Et maintenant, si je le vérifie, comme vous pouvez le voir, je peux le faire défiler. Mais sur les cartes, je n'arrive pas à les faire défiler. Donc, dans ce cas, je souhaite ajouter le défilement horizontal. Et faites également défiler le parent . Il en sera de même. Maintenant, si je le redimensionne, passons à la page détaillée d'un produit. Comme vous pouvez le voir, je peux le faire défiler verticalement et horizontalement C'est ainsi que fonctionnent le défilement vertical et le défilement horizontal Mais ces éléments ne sont pas épinglés. Laisse-moi juste épingler l'Element. Nous allons rester ici, tout comme celui-ci. Si je le regarde maintenant, comme vous pouvez le voir, cela semble plus cool. Il y a une chose que j'ai faite ici. Comme vous pouvez le voir, j'ai ajouté les options de cette catégorie dans la boîte, mais nous pouvons les convertir en défilement vertical J'ai fait une démo du registre de la page d'accueil, et j'ai ajouté le défilement horizontal, le défilement avec le parent et actuellement il n'y a pas de défilement Laissez-moi choisir l'horizontale et laissez-moi découper le continent comme ceci. Maintenant, laissez-moi vous présenter celui-ci. Donc, comme vous pouvez le voir, je suis en ce moment, et je peux le faire. Si vous le souhaitez, vous pouvez également choisir celui-ci, ainsi que celui-ci. Mais de mon point de vue, ça a l'air plus cool. Mais si vous pouvez faire comme ça, cela ressemble à tag So, qui parle de défilement vertical, de défilement qui parle de défilement vertical, de défilement horizontal et de la façon d'épingler vos éléments en bas et en haut Alors fils, tout tourne autour du défilement vertical, défilement horizontal, ainsi que de la façon d' épingler tous les éléments en bas et en Je sais que cette vidéo peut être un peu plus longue et confuse. Mais il regorge d'informations précieuses et permet de relever les défis potentiels. Alors persévérez et je vous reparlerai dans le prochain. 85. Comment créer une animation de défilement automatique dans Figma: La mission de Maxie and Tags consiste maîtriser l'art du défilement automatique Alors clairon, ça s' appelle ici louange. Donc, comme vous pouvez le voir, j'ai ouvert une fenêtre précédente mon Figma et sur mon bureau Et si je clique sur l'électronique, comme vous pouvez le voir, elle défile automatiquement Je ne l'ai pas fait défiler manuellement comme ça. Il défile donc automatiquement. De cette façon, nous allons apprendre ceci, comment nous pouvons le faire. Figma. Avant cela, laissez-moi vous parler du contenu des clips. Je suppose que je vous l'ai dit sous presse, mais ce n'était pas dans les détails, alors je me suis laissez-moi vous dire en quoi consiste le contenu d'un clip D'accord, alors imaginez votre silhouette avec une délicieuse assiette, mais elle déborde sur la nappe. Ce n'est pas pour remplacer, n'est-ce pas ? Le contenu du clip d'information revient à placer un plateau de service sous votre chef-d'œuvre de design. Cela permet de tout garder propre et bien rangé en cachant toutes les pièces qui se répandent à l'extérieur du design en dehors de la zone de conception Voici donc comment cela fonctionne. OK, alors laissez-moi vous montrer comment fonctionne le contenu des clips. Je vais donc sélectionner la page d'accueil. Et comme vous pouvez le constater, l'écran de notre téléphone est à la hauteur, mais notre contenu est plein à craquer Donc, dans ce cas, a actuellement choisi le contenu du clip. Mais si je le sélectionne et si j' essaie de faire en sorte que mon cadre soit identique à celui-ci, identique à celui de l'écran du mobile, comme vous pouvez le voir, il déborde Donc, dans ce cas, nous pouvons simplement activer le contenu du clip, et comme vous pouvez le voir, il est invisible. Elle est là, mais elle est invisible. Si je vais aux couches de la page d'accueil, comme vous pouvez le voir, elles se trouvent là-bas. Ils sont juste invisibles pour le moment. Si je veux les voir, je peux simplement cliquer sur le contenu du clip comme ceci, et ils sont visibles maintenant. Alors laissez-moi parler parce que je veux vous montrer le défilement automatique L'avantage du contenu des clips est qu'il réunit tous nos ingrédients, comme je joue tous les éléments que vous souhaitez concevoir avec du texte, des images, des formes dans un cadre Pensez à un cadre comme à une plaque en U. Lorsque vous cliquez sur le contenu du clip, c'est comme si vous disiez au logiciel  : « Hé, gardez tout dans le cadre ». Pas besoin de jeter un coup d'œil, comme un bouclier pliable magique. Tout ce qui déborde derrière le cadre disparaît créer un design épuré et raffiné N'oubliez pas que le contenu ne disparaît pas réellement, il se cache simplement derrière le bouclier invisible. Et vous vous demandez peut-être où nous pouvons l'utiliser. Vous pouvez les utiliser lors de la création de maquettes. Il peut ajuster notre contenu à la taille du cadre pour imiter les limites de l'écran Nous pouvons également les utiliser lors fabrication de prototypes, comme vous pouvez le voir. Actuellement, nous allons faire du prototypage. Dans ce cas, il maintient tous les éléments dans un cadre afin qu'ils ne se chevauchent pas ou n'encombrent pas la peau Cela nous aide également lors de la construction de composants réels. Cela permet de découper le contenu dans le cadre afin de définir des limites claires pour l'élément lorsque nous prévoyons de le réutiliser tout au long de la conception. Donc, n'oubliez pas que le contenu du clip est votre cadre. Cela vous aide à présenter votre design manière professionnelle et à éviter les débordements inutiles. OK, donc tout tournait autour du contenu du clip. Passons maintenant aux mots : comment faire le défilement automatique. Je veux donc une fonctionnalité ponctuelle. Lorsque je clique sur ce bouton électronique, il doit automatiquement attribuer un score à ce téléviseur. Donc, pour cet effet, je vais passer au prototype, je pense qu'il a été sélectionné et que je l'ai créé. OK, alors laisse-moi le faire. Nous allons le faire à partir de zéro. OK, alors laisse-moi choisir l'électronique, et je vais associer ça à un téléviseur. Et nous avons cette option. Sur un onglet, il doit défiler jusqu'au cadre 28, et c'est le cadre 28, et actuellement nous n'avons pas ajouté y upset et xbset Nous ajoutons donc cela. Mais d'abord, laissez-moi vous expliquer comment cela fonctionne. Il s'agit donc actuellement d'un animé. Définissez l'animation, nous allons donc avoir l'idée. OK, nous sommes donc sur la page d'accueil. Si je clique sur l'électronique, elle défile jusqu'à cette carte. C'est l'électronique, la télévision, jusqu'à 70 % de réduction. OK. Passons maintenant à l'animation. Et si je clique maintenant dessus, comme vous pouvez le voir, il défile cruellement, et cela a un effet doux dessus OK, alors vous vous demandez peut-être ce que c'est ? Ils sont juste contrariés par x et y. Donc disons que j'ai mis une valeur jusqu'à -500 Et maintenant, si je passe à notre aperçu, et si je clique sur l' électronique, comme vous pouvez le voir, elle apparaît ici, mais je veux que cette carte soit là lorsque j' appuierai sur ce bouton électronique. Donc dans ce cas, je vais taper une valeur comme 250. Ce n'est donc pas si précis. Vous devez simplement jouer avec, car la valeur peut être différente selon les cadres et les designs. Alors laisse-moi le refaire. Et comme vous pouvez le voir, il vient ici. J'ai donc déjà joué avec celui-ci, donc je sais que les deux 50 fonctionnent le mieux. Et vous pouvez également faire la même chose avec nous. Passons donc à la réutilisation. Ce sont nos produits Web. Page. Ce sont donc des critiques et je vais les joindre à ces critiques. Donc, chaque fois que je clique sur ce bouton d'avis, il doit défiler automatiquement jusqu'à cet avis. Voyons donc cette mode et cliquons sur la critique. Comme vous pouvez le voir, il défile. Bon, disons que nous avons une page assez grande comme celle-ci, et que le clip ne contient pas cette page. Donc, quand je clique sur ce bouton arrière Aca, il fait trop défiler la Je veux qu'on vienne ici, pas comme ça. Donc, dans ce cas, je vais sélectionner notre proto wire, et je vais jouer avec le numéro Permettez-moi donc d'ajouter cela à 300. OK, je dois définir mon standard. Et maintenant, si je clique dessus, laissez-moi vérifier que cela fonctionne ou non. OK, donc ça marche. Mais il s'agit de méta-pots. Je veux que ce soit au milieu. Permettez-moi donc de changer la valeur jusqu'à 500. D'accord, -500. Maintenant, permettez-moi de vérifier à nouveau , est-ce que cela fonctionne. C'est comme ça que je m'y prends. Il suffit donc de jouer avec les décalages, les bouleversements en x et en y. Mais imaginez, disons que ma page est comme ça, et que les valeurs sont actuellement comme ça. Maintenant, si je clique sur la critique, comme vous pouvez le voir, elle se présente comme suit. Et à propos de Spilled Comme vous pouvez le constater, nous avons défini un maximum de 300 millisecondes. Et nous pouvons le configurer en 1 seconde. Réglons ça. Et je sais que ça va être très lent. Donc, comme je l'ai dit, avec une seconde, c'est très lent. Mais je pense que 300, c'est comme si la valeur par défaut officielle était déversée. Il vous suffit d'expérimenter, de jouer et de trouver votre rythme. Nous avons donc des amis qui font défiler une page sans effort vers le bas, comme dans un métro figma Tout ce qui est cliquable peut être votre enfant. Alors allez-y, parcourez ce parchemin , ajoutez-y de l'animation et créez votre design dans. Alors, retrouvez-vous dans le prochain. 86. La différence entre les équipes, les projets et les pages: Bonjour à tous, plongeons-nous dans l'univers de Figma et découvrons les mystères des équipes, du projet et du dossier de conception Alors, levez le clairon, ça va être instructif. Tout d'abord, les fichiers sont magiques, est ce que nous avons envisagé jusqu'à présent. C'est le projet sur lequel nous travaillons. Ils peuvent soit se refroidir dans un radeau, soit voler dans le cadre d'un projet. Revenons-en aux équipes. Considérez l'équipe comme une grande aile. Comme vous pouvez le voir, j'ai des équipes groupées ici. Donc, au cas où il serait fermé, suffit de cliquer dessus, il s'ouvrira. Et dans mon cas, j' ai plusieurs équipes. Donc, dans le cours précédent ou pendant l'enseignement mural. J'ai donc créé ces projets, et ils ont un projet. Et ils sont tous gratuits, et celui-ci est payant parce que j'ai une très bonne relation avec Webma, alors un jour, ils m'ont envoyé un mail et m'ont dit : «  Vous pouvez avoir une équipe gratuitement pendant trois ans Alors je me suis dit : « Bien sûr, pourquoi pas ? Je vais avoir une équipe libre pendant trois ans. Je l'ai reçu et je n'en utilise pas beaucoup, mais oui, je l'ai obtenu gratuitement. Les équipes peuvent être le nom d'une entreprise ou d'une division, comme les ventes, marketing ou une région spécifique. Au sein de cette équipe, il existe différents projets. Par exemple, comme vous pouvez le constater, j'ai ce projet d' application dans lequel j'ai créé une application de livraison de nourriture et j' ai cette application de livraison de nourriture ainsi qu'un wireframe Et dans cette équipe imaginaire, j'ai ce système de défilement, ainsi que la copie de l' application Click Card dans le projet MCU, j'ai une plateforme AIT moi qui l'ai créé. C'était vraiment laisse-moi te montrer. OK, celui-ci. J'ai créé cette plateforme OTT pour MCO. C'était dans le cours précédent et pendant que j'enseignais. C'est à cette époque que j'ai créé ce projet. Et au sein d'une même équipe, vous pouvez avoir un site Web, version mobile de ce site Web, version de l'application ainsi que certains fichiers liés à un lancement officiel. Maintenant, pour la version gratuite, vous pouvez avoir plusieurs équipes que vous aimez, mais il y a un avantage, un seul projet dedans Comme vous pouvez le constater, ce sont des versions gratuites. Et si j'essaie de cliquer sur le bouton Plus, et si j'essaie d'ajouter, il me demande si vous devez payer. Sans aucun doute, vous n'êtes pas autorisé à ajouter un autre projet, sauf avec la version premium Dans ce cas, j'ai une équipe gratuitement, donc je peux ajouter autant de projets que je veux ici. Pour partager l'amour de Figma avec autres designers ou collaborateurs, vous les ajoutez à l'équipe afin qu'ils puissent accéder à tous les projets C'est comme une entrée dans les coulisses du monde du design R. Alors disons que c'est le mien, faisons le CVD de celui-ci. Je veux y ajouter un membre de mon équipe, afin de pouvoir l'ajouter en le partageant sur ce lien ou simplement d'ajouter son LID afin qu'il puisse accéder à tout ce qui est présent au sein de mon équipe, qu'il puisse accéder à ce fichier, à ce fichier, à ce fichier ou à tout ce qui se trouve dans ce projet. Et ils peuvent également modifier. Si vous leur en donnez l'autorisation, ils peuvent également effectuer des modifications. Vous vous demandez peut-être pourquoi avons-nous des brouillons et des fichiers dans les projets Considère le draft comme une cachette secrète. C'est là que vous testez votre travail avant qu'il ne soit prêt à être vu par le monde entier. Pas de juin, pas d'yeux qui prient. Juste vous et votre processus de création. Les projets, quant à eux, sont des frères et sœurs organisés ou des brouillons Ils permettent à votre équipe ou à toute personne avec laquelle vous partagez l'équipe de trouver facilement un fichier d'accès public ou privé de votre choix. Permettez-moi de vous montrer une chose. Supposons que vous ayez terminé un projet comme celui-ci. Dans ce cas, j'ai créé cette application. OK, ce téléphone était l'application. Et je veux l'ajouter à l'équipe, pouvoir simplement le traîner et l'embêter ici. Et ça peut l'ouvrir. Comme vous pouvez le voir, il est présent ici, mais j'utilise trois fichiers sur trois. Donc, si j'essaie d'en ajouter une autre, elle dira « payez-moi, payez-moi parce que c'est une version gratuite ». Mais si vous le faites dans une version payante, ajouterez autant de fichiers que vous le souhaitez. Et c'est illimité. Maintenant, je sais que vous vous demandez peut-être ne puis-je pas simplement tout garder dans un brouillon et le partager quand je serai prêt. Bien sûr, vous pouvez. Si vous travaillez en solo, alors allez-y. Mais si vous travaillez avec des équipes ou plusieurs partenaires, optez pour les projets, optez pour des équipes comme celle-ci. Quand j'ai commencé à apprendre Figma, comme en 2000189. Cette fois-là, disons, je souhaite ajouter quelqu'un dans mon fichier pendant que j'utilise le brouillon. Donc, cette personne ne voyait que ce que je faisais. Cette personne n'est pas en mesure de modifier. Mais maintenant, Figma a mis à jour sa version gratuite. Maintenant, si vous ajoutez quelqu'un dans votre ventre, vous pouvez dire que cette personne peut modifier le design ou non, ou vous pouvez simplement la définir comme vue. Ou vous pouvez également les transformer en vos propres. Je dépend totalement de toi. Et voici le détail des limites La version gratuite n'autorise qu'un seul projet par équipe et chacun comporte un maximum de trois fichiers. Donc, si j'ouvre des équipes. Comme vous pouvez le voir, nous en avons ajouté trois, et c'est ici, comme si trois fichiers pthree étaient utilisés, et pour corriger les fichiers de saut, nous n'utilisons pas le fichier fijum Nous avons donc utilisé les trois pages. Et avec pm, je peux ajouter un nombre illimité de fichiers. Mais attendez, il y a une figma, et si vous êtes un étudiant ou un éducateur comme moi, il y a un mariage payant pour vous Allez simplement sur fakmot com et jetez-y un coup d'œil. Je ne sais pas quel est le plan actuel pour les étudiants et les éducateurs, mais allez sur figmotcm et Tout cela fait donc la différence entre les drops et les équipes. Donc, mes amis, c'est pour les pros et je verrai dans le prochain. 87. Figma Créer une bibliothèque d'équipe partageable: Bienvenue chez votre designer. Aujourd'hui, je veux vous montrer quelque chose de cool. Comme vous pouvez le voir, nous en sommes à l'état d'ébauche et je crée un fichier de conception. Et c'est un fichier vide. Passons aux cadres du téléphone iPhone 15 P max. Et je vais passer à Asset. Et comme vous pouvez le voir, il y a un livre. C'est ce qu'on appelle une bibliothèque. Cliquons donc sur la bibliothèque. Et dans la bibliothèque, j'ai une option appelée couper une copie, avec les 20 composants et 29 styles. Donc, si je l'ajoute, comme vous pouvez le voir, nos panneaux de ressources contiennent les composants de cette application, que nous avons créée. Lors de la conception de cette application, nous avons créé ces composants, textiles, styles de couleurs. Nous pouvons utiliser toutes ces choses dans ce fichier de conception. Je peux donc le suivre. Je peux ajouter le meilleur amino comme celui-ci, je peux ajouter un bouton de navigation comme celui-ci, et je peux aussi ajouter tout le style. Permettez-moi donc d'ajouter du texte. Et si je passe à ce truc, comme vous pouvez le voir, tous les textiles sont présents ici, et je peux juste taper quelque chose aléatoire bs et pareil pour la couleur. Dessinons quelque chose comme celui-ci et Color peut voir que toutes les couleurs sont présentes ici. La couleur primaire, la deuxième couleur, gris, la couleur naturelle, stridente. Tout cela est possible grâce à ce bouton de bibliothèque. Aujourd'hui, nous nous plongeons dans le monde des bibliothèques d'équipe de Mose . Figma Brace dira que c'est un voyage instructif Vous vous demandez donc ce que sont exactement les bibliothèques d' équipe, nous imaginons un royaume magique. Où se trouvent tous vos composants et styles dans votre document, lien avec les créations futures, et même avec les autres membres de votre équipe. C'est l'essence même des bibliothèques. En téléchargeant votre ressource de conception ici, vous permettez à d'autres documents de tirer parti de la richesse de vos styles et de vos composants, favorise la cohérence et l'efficacité Alors allons-y et créons des bibliothèques. Avant cela, permettez-moi de dépublier la bibliothèque précédente, celle-ci, Unpublished mo OK. OK, il y a donc un avertissement. Si vous utilisez la version gratuite et que vous ne souhaitez pas utiliser cette fonctionnalité. Vous pouvez totalement ignorer cela car il s'agit de la fonctionnalité premium. La FIPMA n'autorise pas cette fonctionnalité pour les utilisateurs gratuits, alors gardez à Mais pour le savoir, ps, la vidéo. Mais laissez-moi vous dire que si vous essayez de le faire en version gratuite, que se passera-t-il ? Supposons donc que nous ayons actuellement ce fichier. Nous l'avons créé en brouillon et c'est gratuit. OK, celui-ci est un fichier gratuit. Supposons que si j'accède à un actif dans des bibliothèques et que j'essaie de le publier, comme vous pouvez le dire, il y a un problème. La FICMA recommande de déplacer ce fichier vers Professional Tap afin de publier tous les composants Et il faut avoir une équipe professionnelle. J'en utilise un gratuit, ne pourrai pas le faire. J'ai donc une équipe professionnelle issue de Figma. Je pense qu'ils ont vu mes cours et mon travail. Ils ont donc dit que vous pouviez avoir une équipe gratuitement. OK. J'y ai ajouté notre projet. J'en ai fait une copie, et je l'ajoute ici. Il s'agit donc de la version copie. Et cliquons sur l'un d'eux. Alors allons-y. Actuellement, je suis dans un panneau de composants comme une page de composants. Maintenant, je veux publier celui-ci. Passons donc à la ressource, cliquez sur le bouton Bibliothèque du livre. Maintenant, je peux publier celui-ci. Donc, si je clique sur publier. Comme vous pouvez le constater, tous les composants du style de couleur textile sont prêts à être publiés. Si je clique sur le bouton « publier », cela prendra un certain temps et sera publié. Nous pouvons utiliser n'importe où dans notre design n'importe où dans nos projets, ainsi que dans les équipes D'accord, il est donc publié avec succès. Et si je passe aux brouillons et si je crée un nouveau fichier de conception, il est vide. Comme vous pouvez le voir, ajoutons une bibliothèque de ressources de 15 P, et comme vous pouvez le voir, elle se trouve ici. Il n'est donc pas encore ajouté. Ils sont donc ajoutés, et cela n'est pas ajouté. Je vais donc cliquer sur Ajouter un fichier. Et maintenant, mon panel d'actifs est plein de camarades. OK, je peux juste le suivre comme ça. Utilise celui-ci, utilise celui-ci. Je peux concevoir mon dossier. Je sais que ce n'est pas une façon professionnelle de faire les choses, mais vous avez compris comment cela fonctionne. N'oubliez pas que ce n'est que pour la version pro, pas pour la version gratuite. Laisse-moi refaire celui-ci. Il y a encore une chose que vous pouvez faire car vous pouvez voir ces fichiers comme Unicorn ou Status Bar Vous pouvez créer une équipe spéciale et supprimer tous les composants ainsi que les ressources, publier ces actifs et les utiliser dans vos équipes. Je pense qu'avec les licornes, ils ont fait les choses en jetant toutes les icônes, les ressources, les textiles, les couleurs dans un seul fichier, et nous pouvons simplement publier ce truc et nous pouvons l' utiliser directement dans Nous n'avons pas besoin d'entrer dans celui-ci et de le copier-coller dans celui-ci. C'est donc un long processus. Nous pouvons simplement publier celui-ci et l'utiliser où nous voulons. Maintenant, laissez-moi vous montrer quelque chose de cool. Actuellement, nous sommes dans le panel de Coons, et ce sont tous des composants que nous utilisons dans les bibliothèques Et disons, pour une raison ou une autre, que vous souhaitiez changer la couleur de celle-ci, ainsi que de celle-ci. Faisons en sorte que ce soit fou. Et comme vous pouvez le constater, dans le panneau des actifs, il y a des applications à point unique, ainsi que dans ce livre, les applications à point bleu. Et dans la bibliothèque, comme vous pouvez le voir, il est fait mention de quatre changements. Donc, si vous cliquez sur publier, voici les quatre modifications. Si vous souhaitez le publier, vous pouvez le publier. Cela nous indique donc que ces quatre changements sont modifiés en ce moment. Si je clique sur le bouton Publier, OK. Maintenant, si je passe à ce fichier, qui n'est pas encore mis à jour. Parfois, cela donne cette fenêtre contextuelle comme s' il disait que quelque chose avait changé. Voulez-vous le revoir  ? Mais pour le moment, je ne peux pas le voir. Je pense qu'il y a un problème ou quelque chose comme ça, mais tu peux faire la même chose ici J'ai envoyé le livre. Nous avons de nouveau reçu cette notification. Il y est dit une mise à jour. Ce bouton a été mis à jour, voulez-vous le mettre à jour ou non ? Cliquons sur la mise à jour. Si vous souhaitez mettre à jour un seul élément, si vous souhaitez tous les mettre à jour, il suffit de cliquer sur tout mettre à jour, et il est maintenant mis à jour. Laissez-moi vous montrer à quoi ressemble cette fenêtre contextuelle. OK, voici à quoi ressemble cette fenêtre contextuelle. Supposons que vous mettiez à jour quelque chose et que vous souhaitiez mettre à jour cette mise à jour. Je sais que ça a l'air bizarre. Si vous souhaitez mettre à jour cet élément remplacé, vous pouvez d' abord le vérifier pour savoir quel élément et maintenant vous souhaitez le mettre à jour ou non C'est celui qui a été mis à jour et si vous souhaitez le mettre à jour, cliquez simplement sur la mise à jour. C'est ainsi que fonctionne Pop. Mais vous pouvez faire la même chose ici si la fenêtre contextuelle ne s'affiche pas. Ce sont là tous les pouvoirs de la bibliothèque. Mais n'oubliez pas que les grands pouvoirs s'accompagnent de grandes responsabilités. Si vous mettez à jour un composant dans la bibliothèque, cela n'affectera pas automatiquement vos droits de remplacement dans d'autres documents. Vos modifications sont saines et sauves. En résumé, les bibliothèques d'équipe de Figma guident la conception, la cohérence, la collaboration et l'efficacité Allez-y, créez, partagez et concevez comme un magicien avec les bibliothèques magiques de Figma Donc, un stade pour encore plus d' aventures avec Figma dans la prochaine vidéo. 88. Animation VS micro interactionDans Figma: Un esprit créatif. Aujourd'hui, nous plongeons dans le monde de la sorcellerie du design Où de petits ticks peuvent créer une expérience utilisateur magique. Parlons donc de deux sorts puissants que sont la micro-interaction et l'animation Imaginez votre interface utilisateur et votre expérience utilisateur comme scène. Chaque onglet de défilement par clic est un acteur. Mais parfois, nous avons besoin d'un petit quelque chose en plus pour fasciner le public C'est là que deux étoiles entrent en jeu. Grâce à des micro-interactions, ils se faufilent dans le monde du design. Petit mouvement subtil qui chuchote. Ça m'intéresse. Aux utilisateurs de R. Tout comme le cœur des instruments, comme l'animation, Sury fait une pause et le cœur grandit doucement lorsque vous appuyez dessus, ce une sensation de satisfaction à l'instrument et confirme l'action R. Pensez maintenant à la flèche d' actualisation déroulante de Twitter qui ressemble à une épingle Représenter visuellement les efforts que vous consacrez à votre nouveau contenu. Même la fenêtre de notification de chat de Facebook saisit votre audition sans être bouleversante Comme une petite bulle qui se dilate et clignote lorsque vous recevez un message Et qui peut se concentrer sur l'animation ludique de Snapcha, où les icônes de feu apparaissent entre amis un jour de suite, ajoutant ainsi une touche de fun et combinaison pour maintenir votre rythme ? Maintenant, découvrons l'animation. Les animations, en revanche, sont les grands illoginistes Ils occupent le devant de la scène en faisant apparaître, transformer ou disparaître des éléments comme par magie Pensez à Tiktox Seamless Down Transition , qui combine des vidéos pour créer une expérience de tissage dynamique et engageante qui encourage la créativité et la participation Notre barre de traitement des stories sur Instagram, l'anneau coloré qui se déplace autour de votre photo de profil, donne une indication claire de la durée de l'histoire et de ce que vous avez vu. Et Linked skills endorsement Cfd est également un autre excellent exemple L'animation de célébration qui renforce votre réussite et vous encourage à poursuivre votre croissance lorsque vous recevez une approbation Et n'oubliez pas le mogy d'animation expressif qui prend vie ajoute une touche de personnalité et d' humour à la communication en ligne Vous savez, quand j'ai découvert l'animation et micro-interaction en 2018 19, cette fois-là, j'étais comme si les deux étaient pareils. Quelle est la différence ? Donc les différences, l'échelle, le but et la subtilité micro-intactions sont microscopiques et se produisent en quelques millisecondes . Alors que l'animation peut être grands spectres qui durent une seconde, voire plus micro-intaction est fonctionnelle, fournissant un feedback, confirmant l'action et guidant l'utilisateur, tandis que animation peut être purement décorative, ajoutant une touche de plaisir et de personnalité N'oubliez pas que les micro-interactions sont comme des chuchotements subtils, mais impateux, tandis que les animations peuvent être audacieuses et fortes, attention et guider le Pensez-y comme ça. Les micro-rettions sont des marques de pompe dans votre langage de conception, guident les utilisateurs en douceur tout au long de l'expérience anmiti sont des points d'exclamation ajoutent de l'empathie et de la prière aux mouvements clés, mais la vraie magie opère lorsqu'ils Une micro-rétion peut déclencher une animation ou une animation peut mener à une micro-rétion, créant ainsi un flux numérique fluide pour N'oubliez pas que la microdétection et l'animation sont des outils puissants dans votre boîte à outils de conception Utilisez-les judicieusement. Concentrez-les sur l'utilisateur et vous créerez une interface qui chantera, dansera et laissera votre utilisateur envoûté Voici donc quelques exemples que je voudrais vous montrer. Il existe un site Web appelé Air Bag Studio. Si j'ai ma souris sur cet airbag Studio, comme vous pouvez le voir, l'animation C'est comme Jello, et pareil pour la boîte Idem avec cet effet de fond. Si j'ai ma souris dessus, comme vous pouvez le voir, il bouge. Si j'arrête, ça s'arrête. OK. Si je fais défiler la page vers la boîte devient grande, prend des modifications Une autre boîte est également incluse. Cela change à nouveau. Il y a une certaine transition. Et il y a des choses géniales en même temps. C'est l'une des meilleures implémentations de l'animation et de la micro-interaction. Supposons que si j'appuie sur ce bouton, comme vous pouvez le voir, cette animation de lettres se produit et il en va de même pour les animations de données ici. C'est vraiment le cas si j' ai la mousse sur le logo, comme vous pouvez le voir, neutraliser et changer en boîte puis à nouveau en logo OK. Vous pourriez donc vous demander où nous pouvons obtenir des animations ou des micro-rétractions. Il existe donc des sites Web comme celui-ci iTatVideo. Vous pouvez obtenir des animations ou des croons comme cette notification textuelle, ainsi que cette nation de données sur les réseaux sociaux, ce commutateur d'outils OK. Celui-ci est le logo vérifié. C'est une animation en cours de chargement. La barre de processus. Il y en a donc un tas. Il suffit d' aller sur ce site Web. Je vais l'ajouter aux ressources. Ou vous pouvez simplement vous rendre sur ce site Web, Jitter point video. Et il y en a un autre appelé fichiers. C'est l'un des meilleurs sites Web. Et c'est gratuit. Je suppose que son utilisation est gratuite. Permettez-moi de vous montrer quelques animations à ce sujet. OK, donc ce sont des animations. Petite animation et micro-inaction, que vous pouvez télécharger et utiliser dans votre pigma Je pense qu'ils ont également une prise. Je peux également télécharger le plugin et l'utiliser dans votre pigma. OK, alors laissez-moi vous en montrer une qui ressemble à une animation vraiment cool. Je viens de le voir sur ce site. Donc, si j'ai ma souris dessus, lancez-vous, car vous pouvez le voir se transformer en fusée. Et il y a une petite animation derrière ça fume pareil avec celui-ci, comme vous pouvez le voir, les mains du chat entrent et il est écrit «   ne me touche pas Il existe de nombreux exemples. Rendez-vous également sur ce site Web et consultez l'animation. OK. Cela a également l'air vraiment cool. Alors oui, voici quelques exemples. Optez maintenant pour des sources de design et évitez le pouvoir de la micro-rettion et de l'animation Pour être créatif, il y a des sillons qui tracent vraiment des cartes. N'oubliez pas de toujours donner la priorité à votre utilisateur. Et la magie opèrera. 89. Animations Button étonnantes dans Figma: Quelle est la différence entre bonne interface et une bonne interface ? Ce sont les petits détails, le mouvement de la magie qui nous font parler de nous. Waouh, c'est cool. L'un des moyens les plus simples de saupoudrer la magie consiste à utiliser des boutons de largeur et de mesure Oubliez donc le carré statique ennuyeux, nous parlons de boutons qui pulsent, boutons qui dansent, de boutons qui bouchent et qui se transforment sous vos yeux. Bouton qui devient une petite passerelle vers des possibilités passionnantes. Vous pensez peut-être , mais comment ? Ne t'inquiète pas. Vous n'avez pas besoin d' être un magicien du codage. Dans cette vidéo de l'après-midi, nous dévoilons le secret de l'animation en transformant votre humble bouton Ajouter au panier en interface Tara Alors laisse-moi te montrer une magie. Si je clique sur le bouton Ajouter au panier, cela passe à cette animation vraiment cool Et si je clique sur ce bouton Mas, il redevient le bouton Au panier. Donc, dans cette idole, nous sommes une mauvaise conception de cela. OK, j'ai donc la page détaillée de mon produit, je vais la copier et ce sera un bouton OK. Transformons donc ce texte en. Je vais le réduire au carré comme ça et me laisser l'ajouter au centre. OK, maintenant c'est au centre, alors permettez-moi de recopier cette page, et ce sera notre carte par carte Dans le dernier cadre, sera un côté droit comme celui-ci, et je vais en ajouter un peu. Maintenant, et je vais en ajouter je vais ajouter le bouton plus et le bouton moins. OK, j'ai donc conçu ce bouton, et je vais changer un peu la couleur. Actuellement, c'est deux envies, et je vais choisir Cray One, et mettons-les dans le Châssis Control P. OK, ce seront donc nos quatre pages, et nous allons ajouter animation vraiment cool comme celle-ci. Bien, passons maintenant au prototype et ajoutons de l'animation. Donc, si je clique dessus, cela doit se transformer en ceci. abord, tapez « naviguer vers la page détaillée du produit », et l'animation intelligente est sortie. 300 millisecondes, il en sera de même pour celle-ci, cette Bon, maintenant je vais ajouter une animation, mais ça doit se faire après un certain délai. Pour cela, je vais donc choisir Portal Pitch Second. Donc, s'il vous plaît, oubliez la convention de dénomination parce que je suis vraiment mauvais pour le nommer Vous pouvez donc l'appeler Pot less one, Poles Two, Pro Three, comme ça. OK. Maintenant, ajoutons après délai. Donc, si je clique dessus , après un certain délai, cela doit se transformer en ceci, puis après un certain délai, changer en ceci. Et encore une fois, après un certain délai, passez à ceci. Ce sera donc notre animation, mais de l'animation. Donc, actuellement, c'est 800, mais passons à 300. Et tout sera pareil. Pareil pour celui-ci. Figma se souvient donc des anciens paramètres de ce type, nous aurons donc les mêmes paramètres, mais il faut qu'il soit activé après un certain délai, 800, mais moi 300 OK, nous en avons donc fini avec l'animation. Il reste une chose, mais commençons par celle-ci : est-ce que cela fonctionne ou non ? OK, sans aucune raison, les images. Il est désormais visible. Donc, si je clique dessus, il faut aller dans le panier, et celui-ci. Il reste une chose à faire, c'est que nous ne pouvons pas revenir à notre première page. Cette page. Nous allons donc animer celui-ci Cliquons sur ce bouton moins. Si je clique dessus, il faut aller dans Ajouter au panier. OK, donc au toucher, allez sur Acard, il y a des entrées et des sorties et l' imine est Si tu veux, tu peux choisir l'un d'entre eux, mais j'aime celui-ci, donc je vais choisir celui-ci. Et si je clique à nouveau sur le bouton moins, cela devient « ajouter à la carte ». Et c'est vraiment satisfaisant. Au panier, allez à la carte, et ce bouton Plus. Si vous le souhaitez, vous pouvez l'ajouter sur une autre page et ici, et si vous cliquez sur le bouton plus, cela se transformera en deux. Alors faisons-le. Copions cette page. Et le numéro doit l'être. OK, laisse-moi monter le protrape : tu as un peu deux ans. Si je clique sur le bouton plus. Permettez-moi donc d'ajouter maintenant le type pro. OK. Si je clique sur le bouton plus, tu dois aller ici. Si je clique sur le signe moins, tu dois aller à la page principale. Nous n'avons pas conçu notre bouton d'accès à la carte, c'est-à-dire le bouton de la carte. Désolé, cette page de carte, vous pouvez la concevoir. Ce sera ton projet. Ne t'inquiète pas. OK. Maintenant, il faut que ça marche, alors passons à moins moins. D'accord, mais nous devons retourner sur cette page. Cette page. Si je peux cliquer dessus, il passera à la page principale. Ce sera celui-ci. OK. Commençons par le début. OK, au chariot, allez, allez au chariot. Ensuite, nous avons obtenu ce bouton Plus et Gérer , que nous pouvons utiliser pour modifier la quantité de notre produit. Imaginons que je veuille en acheter un autre pour mon frère. Je peux juste cliquer dessus. Mais disons que ton frère a déjà commandé celui-ci, donc tu peux cliquer sur le signe moins comme ça. Cela n'a pas à fonctionner comme ça, laissez-moi recommencer à la carte du panier puis plus puis moins. OK, il y a quelque chose qui me manque ici. OK, j'ai mis ça dans le plus un. Je dois choisir le moins un. Et laissez-moi le faire celui-ci. Alors maintenant, il faut que ça marche. OK, alors laisse-moi vérifier. Bouton Plus. OK, ça marche. Si je clique sur le moins, il passe à un, et si je clique à nouveau sur le moins, je l'ajoute au panier. OK, voici donc notre animation de petits boutons. Il y a des versions que j'ai créées. Ce sont des versions vraiment dingues. Comme vous pouvez le voir, c'est par ici. Vous pouvez voir le multivers du prototype . J'ai également ajouté cette Si je clique dessus, il passe en mode sombre. Alors laissez-moi vous montrer comment cela fonctionne. À l'heure actuelle, il est dans le noir. Si je clique sur ce bouton, il passe en mode blanc , le mode lumière. Et laissez-moi vous montrer la magie l'un à l'autre. Si je passe ma souris sur une carte, comme vous pouvez le voir, elle se transforme en un bouton vert vraiment cool Et si je clique dessus , comme vous pouvez le voir, il y a une animation vraiment cool. Je sais que c'est un peu long et accablant. Cela plaira à certaines personnes. Certaines personnes ne le feront pas. Mais c'est votre voix de créateur. Si vous travaillez si lentement, faites-le Mais si vous travaillez sur des projets, des projets réels, ne le faites pas. Vous pouvez opter pour celui-ci, que nous avons créé, A plus moins, comme celui-ci. Comme vous pouvez le constater, c'est vraiment satisfaisant. Il est très facile de créer cette animation, mais il faut faire beaucoup de prototypage Nous venons donc de découvrir ce bouton d'animation. Maintenant c'est ton tour. Vous devez créer la même animation. C'est l'heure de votre projet. Il est temps de tester vos nouvelles compétences en matière de polices de caractères. Votre mission sera le design et l'animation. Mais il ne s'agit pas simplement d'un outil fonctionnel, mais aussi d'un incontournable. Sortez de l'expérience Bob et laissez libre cours à votre créativité. Et je sais que certains d'entre vous sont peut-être confiants. Voici donc votre défi : maîtriser véritablement l'art du design interactif. Cet angle permet de transformer l'intégralité de votre événement en mode sombre élégant lorsque vous cliquez dessus . N'oubliez pas que si vous êtes bloqué, ne vous inquiétez pas. Nous aborderons les composants interactifs dans notre prochaine aventure Figma Donc, c'est un stade pour cela et toutes les instructions sont fournies dans notre dossier d'exercices du projet Figma Allez-y, suivez ça. Je dois d'abord concevoir cette imitation de bouton d'animation. Ensuite, si vous vous sentez un peu difficile, créez cette option pour faire passer l'interface en mode clair en mode sombre Ainsi, le pouvoir de l'animation est à portée de main N'oubliez pas que la création de design est une question de détails, et que les boutons animés sont les détails qui font passer votre interface au niveau supérieur Alors allez-y, animez et donnez vie à votre design. 90. Projet 16 Ajouter au panier Animation Button: Design pour vous souhaiter la bienvenue dans un autre projet de Figma. Aujourd'hui, c'est le projet numéro 16. Aujourd'hui, nous nous intéressons au monde de la micro-interaction. Ces petites animations qui donnent à votre application une apparence fluide, soignée et si agréable. Préparez-vous à faire passer votre jeu de design à un niveau supérieur. Maintenant, marchez, achetez jusqu'à la morue. Créons une expérience d' achat satisfaisante. Imaginez qu'un client clique sur ce bouton tentant de le couper. Soudain, s'il s'agit d'une animation rapide, il se transforme en un petit bouton bourré d'action Mais le plaisir ne s'arrête pas là. Comme par magie, un panier apparaît avec une animation sympa pour aller au panier Maintenant, c'est ce que j' appelle un utilisateur convivial. Passons maintenant à la deuxième étape : le contrôle qualité du bout des doigts. Attendez, un bouton d'augmentation et de diminution du produit apparaît plus soudainement à côté du bouton Go Imaginez que la crème anglaise tape le bouton plus sur un autre article qui apparaît comme par magie sur la Mais qu'en est-il de la suppression d'un objet ? Pas de problème Le bouton négatif permet de réduire la quantité et de deviner la date, transformant ainsi le bouton en carte N'est-ce pas chouette ? Maintenant, troisième étape, achetez votre chef-d'œuvre. Maintenant que vos achats sont aussi doux que du beurre. Capturons-le pour que le monde entier puisse le voir. Prenez une photo nette de votre chef-d'œuvre et téléchargez-la dans la section projet. Célébrons ces pixels parfaitement réduits. Il y a un petit défi à relever. En projet, c'est juste un défi. Concevons un interrupteur à bascule élégant en mode sombre. Imaginez que l'utilisateur clique sur cet interrupteur et qu'avec une animation fluide, vous vous transformerez en une atmosphère de goudron fraîche. Mais il y en a un autre. Nous voulons nous assurer que le texte est net et qu'il s'adapte bien à un moule sombre. Testons ces ombres et veillons à ce que le texte brille bien sur l' arrière-plan de la cible. C'est là que vos compétences en design entrent en jeu. OK, alors n'oubliez pas que la microttion est une question de détails subtils qui font toute la différence Il expérimente donc au téléphone, affine ces animations et n'oublie pas de partager les loisirs dans section projet jusqu'à la prochaine fois continue à concevoir avec plaisir. 91. Mode sombre et mode lumière Project 17: Fimo, êtes-vous prêt à ajouter une touche de magie à votre application ? Aujourd'hui, plongez dans le monde des composants interactifs. célèbre arme secrète pour les fluides est une fonctionnalité conviviale qui permet à votre application de se démarquer. Vous êtes donc prêt à créer et à sous-titrer un interrupteur de tour qui fait passer facilement votre application en lumière, plus pour prendre de la taupe Vous souvenez-vous donc que dans Project 16, je vous avais lancé un défi  : vous deviez créer le même effet sans utiliser de composant interactif. Vous savez maintenant comment utiliser le composant interactif afin de pouvoir terminer ce projet. Sapons devient donc un maître du toggle. Imaginez, utilisez un interrupteur et faites passer votre application d'une atmosphère lumineuse et brillante à une atmosphère de travail cool Voilà le pouvoir de Tarc More Toggle. Utilisons les composants interactifs de Figma pour créer cette magie Nous allons créer deux états pour le commutateur, un pour le mode clair et un pour le mode foncé. Considérez-les comme les deux faces d'une même pièce. Maintenant, étape 2, temps d'animation. Maintenant, ajoutons-en un cinquième. Imaginez que vous basculez en douceur , en passant d'un robinet à deux états. Cette animation rendra l'expérience utilisateur raffinée et agréable. Étape numéro trois, embrasse les ténèbres. mode Tark est génial, mais la lisibilité est essentielle Nous devons nous assurer que le texte de votre application reste clair et net, même sur fond sombre. C'est là que vos compétences en design entrent en jeu. Explorez les ombres et la couleur du texte pour trouver l'équilibre parfait entre le mode clair et le mode foncé. Arrête de montrer ton chef-d'œuvre. Une fois que votre Mtogle noir brille plus qu'une boule à facettes, capturez toute sa splendeur Prenez une photo de la ville et téléchargez-la dans la section du projet. Célébrons ces pixels parfaitement conçus. Et tu peux aussi le partager sur tes réseaux sociaux, et tu peux me taguer là-bas. N'oubliez pas que les composants interactifs sont votre passerelle vers la création d'une expérience utilisateur agréable Alors amusez-vous à expérimenter, peaufinez ces animations et n'oubliez pas de partager votre Dark More Masterpiece avec le monde entier. À l'heure des carreaux, continuez à créer avec la magie de Figma. 92. Page de produit sur iPhone et projet de design de panier: Tout le monde se prépare à démontrer ses compétences en expérience utilisateur sur le projet TS. Nous étudions en profondeur la conception de la page produit et carte Experience pour le dernier iPhone dans l'application Click Card. N'oubliez pas la superbe page Nike que nous avons créée. Cette fois, nous prenons un b en coupant l'étape 1. Comme précédemment, nous avons donc créé cette page produit pour Nike Donc, dans ce projet, vous devez concevoir une même page pour iPhone 15 Pax. Laisse-moi te montrer. OK. C'est la page de la voiture que je l'ai conçue , et dans ce projet, vous devez également concevoir la même page. Et vous devez concevoir exactement la même page pour iPhone. Il vous suffit de remplacer les images, texte et certains iPhones neufs en couleur ainsi que certaines spécifications les concernant. Vous vous demandez peut-être pourquoi ce projet. La maîtrise de la conception d'une application Commerce est une question de fluidité. Ce projet vous mettra au défi de créer une page produit captivante. Vous pouvez mettre en valeur l'iPhone avec des visuels époustouflants mettant en évidence les principales fonctionnalités et fournissant des détails d'une netteté Optimisez le panier pour une expérience de paiement fluide. Le concepteur utilise une expérience de carte conviviale avec contrôle intégré et confirmation de commande Appliquez vos compétences en matière d'expérience utilisateur. Ne vous contentez pas de concevoir de belles pages, rendez-les innovantes et efficaces pour tous les utilisateurs Optez pour l'apprentissage autonome. Vous aurez des ressources à votre disposition, mais c'est nous qui choisissons le design, expérimentez, explorez et apprenez de votre créativité. Donc, tout d'abord, vous devez concevoir ce produit LPG pour iPhone en y ajoutant des images, des fonctionnalités de l'iPhone, du stockage Hama, stockage Hama Fournissez des spécifications comparatives, une collaboration et des options d'accessoires avec la nouvelle icône Boler Points. Ou un langage conscient comme ici, nous le montrons, il n'y a qu'une seule couleur avec ce produit, donc je n'en ai ajouté que pour le brûler. Mais pour le nouvel iPhone, nous avons du titane bleu, titane naturel, du noir, du blanc, quelque chose comme ça. Tu peux l'ajouter. Vous pouvez donc supprimer cette section de taille et afficher la priorité des prix d' sélection de couleurs de stockage imprudente et concevoir un bouton d'ajout à la carte efficace comme celui-ci Et vous devez également présenter, vérifier l' utilisation, le nombre d'étoiles et la comparaison avec d'autres smartphones. Si c'est possible, vous pouvez ajouter un autre smartphone comme le fait Amazon Si vous sélectionnez un smartphone sur Amazon ou un produit électronique, cela vous permet de les comparer un peu, par exemple un iPhone pour choisir entre iPhone et 24 ultra. Je vais donc vous faire la comparaison. Si c'est ce que vous voulez faire, veuillez le faire. Je serais tellement fier de toi si nous le faisons. Vous devez maintenant concevoir cette page de panier. Comme vous pouvez le voir sur mon écran, j'ai conçu cette page. Je pensais ne pas concevoir cette page, mais sans la page de ma carte, il n'y a pas d'application de commerce, donc je dois la concevoir, et c'est ma version. Donc, sur cette page, vous devez afficher l'image du produit, quantité et le prix de chaque article comme celui-ci, ce que j'ai fait ici, et permettre d'ajuster la quantité ou de supprimer l'article, d'abord, comme ça, en utilisant le bouton plus Mme. Vous pouvez également utiliser l' intégration des codes promotionnels, comme la facilité, l'application de coupons ou le disconde, ce que j'ai fait ici. Vous pouvez également ajouter un mode de paiement. Comme en Inde, nous avons le virement bancaire direct UPA ainsi que d'autres méthodes Disons que dans votre pays, vous avez une carte Mastercard, vous pouvez donc ajouter un bouton, exemple, sélectionner une carte, quelque chose comme ça. Alors n'oubliez pas que c'est l'occasion de briller. N'ayez pas peur d'expérimenter et présenter vos versions de design uniques. Il y aura donc un étudiant. Je sais qu'ils vont commenter mon cours, comme s'il se contentait de donner le projet. Il ne fait pas vraiment le travail. Mais le problème avec les plats, c'est que les gens ont l' impression de vous donner à manger à la cuillère et je ne veux pas vous nourrir à la cuillère Je veux enseigner des choses réelles, exemple si je vous apprends quelque chose comme comment créer un coupon et qu'il est réutilisable. Alors j'en parle, et vous pouvez créer même chose comme celle-ci avec le même concept, donc je ne veux pas vous parler. Vous devez expérimenter et appliquer ce que vous avez appris. C'était donc la devise principale de ce cours. Priorisez donc l' expérience utilisateur et rendez les deux pages intégratives et efficaces Utilisez les ressources fournies, mais n'oubliez pas que l'apprentissage autonome est essentiel. La plupart téléphonent de manière modale et apprécient le processus de création d'une page produit brillante pour iPhone et carte Pour le dernier iPhone en carte que j'ai. Je vous ai également fourni toutes les instructions, comme pour la page du produit, ainsi que pour la carte, et c'est ce que j'ai fait. Soumettez-moi après avoir terminé la capture d'écran du preneur ou vous pouvez l'enregistrer et la convertir en fichier cadeau Et puis je vous l'ai déjà dit, vous pouvez aller sur le site Web de B, Auto et à partir de là, vous pouvez le convertir en fichier cadeau et me le soumettre dans la section projet, et vous pouvez également le partager sur les réseaux sociaux. Tout tourne donc autour de ce projet. Concevez ma carte. Concevez ma page produit, le cas échéant, et soumettez-moi. C'est une vidéo photo, et je vous verrai dans la prochaine. 93. Micro animations à l'aide de composants interactifs dans Figma: Étudiants B. Dans la vidéo précédente, je vous avais lancé un défi. Cela ne faisait pas partie du projet. C'était juste un défi de te lancer un défi. OK, donc je vous ai dit de créer cet interrupteur qui peut passer votre interface mobile en mode conversation en mode éclairage ou en mode éclairage en mode conversation comme celui-ci Je pense que c'est vous qui l'avez créé, et si vous l'avez créé , je suis tellement fier de vous. Je sais que vous avez créé en utilisant une méthode traditionnelle, mais il y a une chose dans Figma qui s'appelle des composants interactifs Dans cette vidéo, nous apprenons cette technique et nous allons créer le même interrupteur à bascule à l' aide d'un composant interactif Concevons donc une bascule simple. Nous savons tous comment faire, simple ellipse, puis rectangle, et ajoutons un rectangle, quelques arêtes arrondies, 50 Et je vais l'ajouter à l'intérieur du rectangle. C'est le commutateur, et laissez-moi changer la couleur. Ce sera donc notre mode d'éclairage, et ce sera pour me permettre de le changer en noir. Mais le bouton de la petite ellipse se trouve, je suppose, à l'arrière. Alors laisse-moi te renvoyer ça. OK, donc c'est maintenant au premier plan. Passons maintenant à la fabrication d'algues de contrôle des cadres. Créons-le maintenant dans le composant principal. Créez un composant. Maintenant, nous devons créer une variante. Vous pouvez le faire d' ici comme d'ici. Allons-y avec celui-ci. Et maintenant, nous avons un composant. Je vais donc changer de lieu. Ce sera notre bouton d'arrêt, noir et l'autre partie sera blanche comme ça. Ça va être noir. La couleur ne correspond pas OK. D'accord, donc nous connaissons tous les principes de base. C'était l'essentiel, mais je vous l'ai répété. OK. Créons maintenant des composants interactifs. Passons donc à Ptype. Je veux que lorsque je clique dessus, il doit se transformer en ce bouton. Actuellement, nous sommes en mode lumière, et si nous cliquons dessus, il faut passer en mode conversation. OK, alors laisse-moi taper ceci. Et au toucher, vous devrez passer à deux, et le coin B est dedans et sort du pack et 300 millisecondes Maintenant, si je l'utilise dans n'importe quel cadre. OK, je vais donc ajouter ce bouton ici. Passons donc à l'actif, et ce sera notre bouton. Alors allons-y. OK. Alors maintenant, si je clique sur le sol, je peux utiliser ce bouton. Mais il ne passe pas à nouveau en mode lumière, nous devons donc le recâbler Tape-le. OK. Donc si je clique dessus, tu dois revenir à la normale. Passez à la propriété 1, par défaut. OK. Maintenant, il faut que cela fonctionne, la lumière claire Mota voit la couleur de la page et la couleur du bouton sont les mêmes C'est pourquoi il est dans le même mode, mais nous pouvons le modifier. Prenons la page de données du produit réel pour vous faire une idée de son fonctionnement Je vais le copier. Parlons de cette manifestation parce que je n'en veux pas pour le moment OK. Permettez-moi de revenir à la précédente, mais je veux que ce bouton soit ici, je vais le mettre ici. Je pense que je l'ai fait trop grand, alors laissez-moi le réduire un peu comme ça. Maintenant, ça a l'air bien. Et le placement est également bon. Il y aura un autre pitch. Ça va être un terrain noir. Soumettez le pitch pour le signer. Laissez-moi fermer la balance. Vendez. Ça va être noir. Maintenant, prototypons ceci. Si je clique sur toi. Actuellement, vous êtes en mode lumière. Si je clique sur toi, tu dois passer en mode conversation. Appuyez sur Progal Pitch et Smart Animate prend 300 millisecondes dans un délai de 300 millisecondes Voici le cadre. Et vous pouvez également vous y rendre. Vous pouvez également choisir une autre option, mais je vais utiliser celle-ci. OK. Ajoutons un flux. Avant d'y ajouter du flux, il y a un problème. Prenez quelques secondes et essayez de résoudre le problème. Cinq, quatre, trois, deux, un. OK. J'espère que tu l'as trouvé. Et le problème, c'est celui-ci. On place le même bouton sur la même page, il faut qu'il change. OK, alors laisse-moi transformer ça en deuxième partie, comme ça. OK, donc c'est le mode lumière activé, et c'est le mode lumière. OK. Donc, si j'y ajoute un flux, le flux de départ, le flux numéro dix, d'accord, cela fonctionne. D'accord, je n'ai pas utilisé l' avantage pour un prototype comme celui-ci. OK, maintenant ça va marcher. O O, O, O. Maintenant ça marche, et comme vous pouvez le voir, ça a vraiment l'air bien. Que devez-vous également faire pour aborder certaines polices et certains éléments ? Parce que certains sont totalement invisibles. Comme celui d'ici , du texte ici, ainsi que celui-ci. Alors tu le changes un peu. Il s'agissait donc d'une petite micro-animation, une microinteraction, que nous avons créée à l'aide de composants interactifs Donc, pour la démonstration, je l' utilise pour ces deux pages, mais si vous le souhaitez, vous pouvez le modifier pour l'ensemble de votre projet comme ceci. Si je joue un numéro six pro, je peux choisir n'importe quel mode. Je peux choisir le mode sombre ou le mode clair. Mais disons que si je vais sur une autre page, et si je veux faire passer une autre page en mode clair, je peux la choisir, et elle changera. Il ne passera pas à la première page, comme vous pouvez le voir, car j'ai ajouté beaucoup de prototypage Je sais que cela semble un peu confus, mais ce n'est pas le cas, c' est vraiment facile. C'est donc l'avantage du composant interactif. Vous pouvez également le faire en utilisant des composants simples, mais je dirais utiliser des composants interactifs. C'est un arbre plus utile. Cela permet à notre élément de rester organisé. OK, alors maintenant je veux vous présenter un projet. Je pense que c'est le projet numéro 17, 18 neuf. OK. Cela va prendre 80 s. Vous devez donc convertir votre interface en mode noir. Oh, désolé, en mode TAC. À l'aide de cet interrupteur plus grand. OK, laissez-moi fermer ce bouton Créez cet interrupteur volé, et chaque fois que vous cliquez dessus, il doit passer dans ce mode. Si vous le souhaitez, vous pouvez utiliser cette méthode, ou vous pouvez créer une autre page, par exemple, si vous cliquez sur le menu du hamburger, le menu hamburger apparaîtra et ajoutera un bouton spécial comme Dark Moore et Et après cela, ajoutez tout cela. Vous n'êtes pas obligé d'ajouter un bouton de mode sombre sur seule page si vous l'ajoutez dans le menu Burger. C'est une méthode simple, mais si tu le fais, je serais tellement fière de toi. Donc, vous pouvez faire ceci ou cela. La plupart du temps, toutes les applications disposent du mode tap dédié ou du mode éclairage dans l'option de réglage. Pour ce projet, je l'ai gardé ici. Donc, si vous souhaitez l'ajouter à de configuration ou à la page du menu du hamburger, faites-le. Alors c'est tout. Tout tourne autour des composants interactifs, et nous avons créé ce mode conversation et ce mode lumière vraiment géniaux. Et vous pouvez également ajouter de la colle à ce composé, comme vous pouvez ajouter de l'ombre et de l'éclat. Tu sais déjà comment faire. Alors soyez créatifs, choisissez les couleurs. Si tu veux passer à autre chose. Vous pouvez également le faire , faire preuve de créativité C'est photographier cette vidéo et terminer le projet. Toutes les instructions sont fournies. Accédez à cette vidéo, suivez toutes les instructions, créez cette superbe vidéo. Créez l'interrupteur volé et soumettez-le moi en cours de procédure. Si vous souhaitez le partager ainsi, merci de le partager. Voilà pour cette vidéo, je vous verrai dans la prochaine. 94. Faciliter le prototype de Figma et animations de printemps: Imaginez que vous êtes un prototype, bel écran mettant en valeur votre design brillant, mais qu'il manque quelque chose C'est un lieu de vie statique. C'est là qu'interviennent l'assouplissement et l'animation printanière. Êtes-vous prêt à donner de la personnalité et à peaufiner votre travail ? Pensez à l'assouplissement comme à la source secrète d'un mouvement. Il contrôle le mode de translation des objets entre les images clés avant et après une animation. Pas de mouvement robotique ennuyeux, chantez comme nuance, créez une animation naturelle et vivante. OK, donc Figma a des préréglages intégrés, comme la sortie linéaire vers l'arrière, l' entrée vers l'arrière, quelque chose Voyons donc un par un, quels sont-ils et ce qu'ils font. OK, j'ai donc créé cet effet de basket rebondissant. Permettez-moi donc d'en créer un nouveau. Et j'utilise notre ancienne méthode, et passons à Plug-in Scout Let's Search for Basket Basket. Je veux une version gratuite de Let's CV. Les versions gratuites sont excellentes. Version Parade aussi, mais si vous obtenez quelque chose de gratuit, ne le lâchez pas. Ce P était le ballon de basket que je voulais. Actuellement, c'est Fight, eh bien, je veux c et placons-le au centre, et je vais dessiner une ombre en dessous de celui-ci. Donc, chaque fois que mon ballon de basket bouge, nous le faisons, il produira une ombre. Laissez-moi le placer au centre et dans le panier. Je suppose que je dois l' ajouter dans le cadre. Au début, ce sera ici et Shadow sera comme ça. Copions maintenant ce pitch. Je tiens un ballon de basket, ce n' est pas dans celui-ci. Nous avons juste cette ellipse, où se trouve Frafyspring Maintenant, je dois supprimer celui-ci car il n'y a pas de ballon de basket. Le cadre devrait être ici. Maintenant, le basket est dedans, je suppose. Laissez-moi le copier, il est à l'intérieur. Maintenant, si ça se passe comme ça, l'ombre deviendra comme ça. OK. C'est un signe de base. Vous savez tous comment cela fonctionne. Passons au prototype. Vous pouvez également le faire en utilisant des composants interactifs, mais en utilisant du temps en utilisant des cadres, car je veux vous montrer comment cela fonctionne. Pour l'instant, rejoignons cette image après délai. Au bout d'une milliseconde, 500 c' bout d'une milliseconde, 500 Actuellement, nous sommes dans Smart Mate et rejoignons celui-ci également. Même chose. OK. Après un délai. Une milliseconde et actuellement c'est facile. Passons d'abord à un linéaire. Nous allons comprendre ce que fait le linéaire. Actuellement, les deux sont en linéaire, ce n'est pas linéaire à côté de Commençons par comprendre ce qui est linéaire. Linar est la ligne de défostate. Pensez qu'un trajet en ascenseur prévisible est utile dans certaines situations, mais pas dans les plus excitantes. Donc, si je joue à ce jeu, comme vous pouvez le voir, il y a un mouvement, mais c'est un peu robotique, mais l' ellipse a l'air bien Permettez-moi d'y ajouter un peu de souplesse pour qu'il ait un effet gonflant. Comme ça. OK, si je le rejoue, j'espère qu'il aura cet effet spécial. Mais en linéaire, cela semble étrange, d. Maintenant, découvrons comment, dans le cas étoile, un pic de vitesse lent comme un doux ballon flottant vers le haut, permet à l' élément en voie de disparition de se lisser et de se stabiliser Laissez-moi passer à notre prototype. OK. Changeons pour celui-ci. Actuellement, nous sommes linéaires, alors choisissons, péché. Et si je vous montre le graphique exact pour cela, pour le péché, c'est comme ça. Ça ira doucement comme ça et aussi vite. L'axe X indique une vitesse lente et l'axe Y est rapide. Si vous jouez au foot comme ça, une courbe est comme ça. Donc, d'abord, il va aller lentement lentement lentement et à partir de ce mouvement rapidement. Permettez-moi d'abord de vous montrer le s , puis nous examinerons la personnalisation. OK. Comme vous pouvez le voir, l'animation est modifiée. Au début, c' est lent, puis rapide, d' abord, des baisses lentes et rapides qui se produisent. Cela commence lentement, puis finalement cela prend de la vitesse. Donc c'est fini. Maintenant, découvrons ce qu'est Ease Out. Choisissons la facilité pour les deux. Le dehors est le contraire du péché. Il démarre d'abord puis ralentit comme une balle rebondissant vers vous Il est parfait pour souligner un élément important ou attirer l'attention comme celui-ci. Comme vous pouvez le constater, c'est le cas. Il a un effet naturel de faire rebondir le ballon C'était sur le point de disparaître. Maintenant, découvrons-en ce qui concerne le péché et l'extérieur. Oui et dehors, celui-ci entre et sort. OK, commencez à accélérer lentement, puis ralentissez à nouveau, comme dans une course à plein régime sur un terrain de jeu. Quel choix pour une animation comme celle-ci. Comme vous pouvez le voir sur l'animation, commencez à accélérer lentement, puis ralentissez à nouveau. Il s'agissait donc de péché out. Mais il y a plus encore, W bounce heart or play full notification toasts press sin back and bounce ont ce qu'il vous faut Donc, si je le souhaite, choisissons-le en arrière. Et voir un est sorti Comme vous pouvez le constater, le rebond augmente J'ajouterai quelques ressources, donc j'ajouterai des courbes, des graphiques, et tout ça. Ainsi, vous aurez une idée du fonctionnement réel. Mais maintenant, voyons comment fonctionne l' animation personnalisée dans Figma. OK, il y a donc une chose appelée courbe de Fa zer. Pas à Figma. C'est un terme mathématique. Il a des courbes. C' est ce qu'on appelle la courbe zéro. Et c'est ce que nous allons apprendre chez le client ici. Comme vous pouvez le voir, je jouais avec. Ma courbe est donc la suivante. Ce groupe peut sembler intimiste, mais il est plus simple que vous ne le pensez En voici un bref aperçu. Le paramètre carré représente les quatre points qui définissent une courbe à pièces Qubic comme celle-ci, et ce sont les quatre points Voici les paramètres du carré, et voici les quatre points. Laissez-moi vous montrer un, deux, trois, quatre, quatre, un. L'axe X représente le temps et l'axe y représente la transition et les propriétés telles que la position ou l'opacité Ce sont les images clés fixées à zéro, zéro et un, marquant le début et la fin de l'animation Actuellement, cela me manque, alors laissez-moi le double clip. Comme vous pouvez le voir, il est revenu à sa position normale. Double-cliquez. Zéro, zéro, un. Ce sont les poignées ajustables. Faites-le glisser pour remodeler la courbe et affiner le champ d'animation OK, jouons avec. C'est donc pour les plus lents. Et c'est pour le premier. Nous avons donc simplement créé un effet. Si je le traque trop souvent. C'est bizarre. Cela a cet effet moche sur elle. Il y a des protes Disons des courbes comme celle-ci, courbes comme celle-ci, et vous voulez simplement passer à l'opoiti Je clique dessus. Cliquez dessus une fois. Comme vous pouvez le voir, vous pouvez également ajouter une valeur générique uniquement. Actuellement, ajoutons quelque chose de aléatoire Deux six, quelque chose en ce moment. C'est ainsi que cela fonctionne. Si j' ajoute de la valeur comme ça. OK, alors je veux te montrer une chose. Je sais que certains d'entre vous peuvent se sentir intrigants ou ne pas être en mesure de comprendre ce sujet, mais il n'y a qu'un seul élément Je voudrais vous montrer un connecteur. Cela vous aidera beaucoup. Cela s'appelle. Et dans ce plugin, vous n'avez que des valeurs ou des images clés comme celle-ci. Si j'ai copié celui-ci, c'est une copie et si je l'ai passé ici. Comme vous pouvez le constater, nous avons capté notre animation. Disons que vous n'êtes pas bon avec le cours, et je ne suis pas doué non plus avec le cours. Vous pouvez donc accéder à ce plugin, copier toutes les images clés d'animation que vous souhaitez, c'est terminé. Allons-y, publions-le ici, et voyons comment il fonctionne ou non. Si vous voulez en savoir plus sur Busier Curse, je vais vous montrer un site Web OK, c'est le site web sing dotnet. Vous recevrez toutes les malédictions et vous pourrez en apprendre davantage à leur sujet. Par exemple, vous pouvez cliquer sur la courbe la plus fréquentée pour en savoir plus Si vous voulez vraiment connaître la courbe réelle, rendez-vous sur ce site Web. Est en dotinate. Je vais également l'ajouter dans les ressources. Accédez au site Web pour en savoir plus sur cette courbe. Et il contient également de l' animation. Disons que si je choisis celui-ci, le petit bouton ou le petit point nous montre comment cela fonctionne Lentement, vite. Des tranches de jeûne. Vite, bas comme ça. OK. Découvrons maintenant l'animation du printemps. L'animation printanière apporte une touche d'élasticité délicieuse à tous les prototypes Imaginez un bouton qui tremble lorsque vous appuyez dessus ou un menu qui apparaît lorsque vous jouez à plein Avec des paramètres prédéfinis tels que Gentle et Quit, il est facile d' ajouter une touche de magie. Ajoutons donc quelques effets d' animation printanière. Nous avons donc un écran doux, rapide, lent et personnalisé. OK, alors laisse-moi te dire ce que fait Gentle. Un rebond subtil, parfait pour mettre en évidence des changements subtils dans le contenu C'est ce que fait Gentle. Si je clique dessus. Permettez-moi de le dire aussi à Gendly. R, lent. Il a un effet de rebond, mais si vous voulez mettre en valeur une partie fondamentale de vous-même, utilisez-le doucement Nous sommes également rapides Quick est rapide et vous pouvez également obtenir le pré comme celui-ci. C'est comme ZP Spring Idle pour ajouter Pep aux notifications Maintenant, allons-y et cliquons sur le bond. Il a cet effet de rebond, comme vous pouvez le constater. Aussi lent que lent, c'est un ressort délibéré fluide, idéal pour augmenter le contenu en plein écran avec le progressif OK, voici donc quelques préréglages que Figma nous fournit. Découvrons maintenant le ressort personnalisé. Si je choisis un ressort personnalisé, comme vous pouvez le voir, nous obtenons un petit graphique et une trajectoire de feu comme celui-ci et l' émission se produira comme ça. Animation printanière. Et il y a un point. Il s'agit d'un cadre clé. Si j'aime ça, ce sera tellement élastique, comme vous pouvez le voir à l'écran Nous pouvons également ajuster la rigidité pour plus de souplesse. Nous pouvons faire le dépotoir pour arranger les choses, et nous pouvons simplement jouer avec le masque. Cela inclura donc la lourdeur de notre objet. Donc, actuellement, c'est deux fois plus nerveux. Laissez-moi créer un ressort. Si j'ajoute un masque à cinq, vous verrez qu'il a une masse. J'ai l'impression que c'est lourd. Il suffit de jouer avec la rigidité, le dumping et la masse pour exploiter les ressorts de cette manière. Mais j'aimerais que ça reste comme ça, normal et subtil. C'était la différence entre animation printanière et l'animation psi. Cette animation transforme notre prototype de strato captivant Il ajoute de la personnalité, attire l'attention et guide l'utilisateur grâce à une interaction de remplissage naturelle et intuitive. En combinant aisance et animation printanière, vous transformerez vos prototypes figma d'un écran statique en expérience interactive captivante et engageante. Passez donc à l'animation en toute confiance et donnez vie à votre vision du design. Tout tourne donc autour de l'animation. Nous en apprendrons davantage sur la Colombie-Britannique ainsi que sur l'animation printanière. Nous découvrons également tous les préréglages que Figma nous propose, et celui-ci chante également des pompons doux et rapides. C' est ainsi que fonctionne La plupart du temps, j'utilise simplement ces animations. Je n'opte pas pour celui-ci. Si vos projets en ont besoin, ou si vous voulez créer un projet vraiment génial beaucoup d'animation. Tu peux aussi opter pour celui-ci. J'espère que vous avez tout compris à propos de cette animation. Alors merci d'avoir regardé et je vous verrai dans le prochain. 95. Animation animée dans Figma: Salut, les passionnés de design. Avez-vous déjà l'impression que votre application a besoin d'un peu plus de MP après le paiement ? Comme s'il fallait célébrer le moment avec un festin visuel. Nous sommes sur le point de plonger dans le monde de l' animation palpitante dans Figma et croyez-moi Ça va être vraiment génial. Comme vous pouvez le voir sur mon écran, j'ai deux animations. Le premier est bouclé et le second est stable. Donc, si je redémarre ce cadre, comme vous pouvez le voir. Le premier est toujours en cours d'animation et le second est arrêté. Donc, de cette façon, nous allons créer celui-ci ainsi que celui-ci. Le second a un confit. OK. Comme vous pouvez le constater, cela donne une ambiance de fête J'ai donc beaucoup apprécié la façon dont Pope et Google Pay utilisent cette animation pour créer cette gratification instantanée après l'achat J'ai donc pensé, pourquoi ne pas apporter le même niveau de satisfaction à notre application. Et c'est à ce moment-là que les composants interactifs entrent en jeu pour sauver la situation. Certains d'entre vous se demandent peut-être nous pouvons utiliser une méthode traditionnelle comme celle-ci. Et je l'ai utilisé. Cela fonctionne, mais cela ne fonctionne pas comme je le souhaite. Alors laisse-moi te montrer. Commande en plus. Après cela, il donne de la limite, il anime et il est mis en boucle Cela fonctionne. Je dois y travailler un peu, mais comme vous pouvez le constater, cela prend beaucoup de place. Les composants interactifs, quant à eux, sont comme les opérateurs fluides des mondes du design. Ils sont efficaces, ils sont flexibles et ils sont sur le point de nous faciliter la vie. Passons donc à Figma et créons cette superbe animation, pas celle-ci OK, celle-ci, nous allons créer cette superbe animation, qui est en boucle et la seconde est stable Permettez-moi de prendre un espace vide pour le moment. Je vais donc choisir un cadre, qui sera de 200 x 200. OK. C'est donc mon choix personnel. Si tu veux en prendre 500, tu peux les prendre. Ou vous pouvez le concevoir en fonction du smartphone ou de la tablette. Si vous concevez pour une tablette, pouvez-vous augmenter la dimension. Donc d'abord, je vais ajouter trois cercles, y trois cercles parce que nous devons animer trois cercles à l'intérieur OK. Donc, maintenez la touche Shift. Et d'abord, il n' y en aura que 50. Et je vais le garder au centre comme ça. Changeons la couleur. Je vais opter pour notre décoloration Vous pouvez utiliser le vert, que je vous ai montré plus tôt. Cela dépend donc totalement de vous. Parce que la couleur y doit être prise en compte dans toutes nos applications. C'est pourquoi j'ai choisi celui-ci. Maintenant, laissez-moi copier ce contrôle C, contrôle C, contrôle B. Comme vous pouvez le voir, à partir de 84, Ep 702-70-2702 Permettez-moi de le renommer. Je vais donc l' appeler P et C. Je ne veux pas m'y perdre. Nous avons maintenant trois cercles. Maintenant, laissez-moi créer un composant. Nous pouvons donc ajouter une variante et ce seront des composants interactifs. Alors maintenant, ajoutons des variantes. OK. Nous avons une deuxième variante. Laissez-moi choisir une seconde qui sera B, et je vais changer cette dimension jusqu'à 100 et je vais choisir de passer par 25. Vous pouvez utiliser la blimation si vous le souhaitez, mais actuellement j' utilise celle-ci Allez au centre comme ça, et je vais ajouter une autre variante et dans celle-ci jusqu'à 1205 Ou faisons-en un à 50. OK. Passons au centre. Et passez à celui-ci. Allons-y dix. OK, c'est très visible. Allons-y 25. OK, maintenant c'est visible. Et ajoutons une autre variante car nous voulons la boucler. OK, donc dans celui-ci, B va être invisible et celui-ci va en avoir jusqu'à 200. Passons au centre. Voyons voir si cela fonctionne ou non. Je pense que j'ai fait une erreur quelque part, mais essayons. Le premier. OK. Donc, après délai après délai, et je veux au bout une milliseconde. Le cadre doit changer. Au bout d'une milliseconde, il devrait passer ici après ça, et j'en garderai deux 50 Désolé, quatre 50 parce que j'utilise plusieurs valeurs, mais quatre 15 ont l'air géniaux animer intelligemment et facilement . Nous serons pareils. Pareil avec celui-ci après délai et une milliseconde. Pareil pour celui-ci. J'espère que cela fonctionne. Une milliseconde et tout le reste est identique. Dans ce cas, nous n'allons pas utiliser d'animation intelligente. Nous allons dissoudre. Je vais vous expliquer pourquoi nous utilisons Dissolve et pourquoi nous n'avons pas utilisé d'animation intelligente. Choisissons le cadre de l'iPhone 15, et passons à la composition. J'espère que c'est par ici. OK, c'est par ici. Maintenant, laisse-moi y jouer. Cela fonctionne. Cela fonctionne. C'est ce que je veux. Mais nous pouvons apporter quelques modifications, nous pouvons agrandir un peu ce cercle principal ici, ainsi que O ici, et à l'intérieur, nous pouvons y ajouter une coche. Nous savons donc que votre achat est terminé ou que le paiement est effectué. Vous vous demandez peut-être pourquoi nous utilisons des cadres. Pouvons-nous simplement dessiner un cercle dans un espace vide et pouvons-nous, euh, simplement les relier entre eux. Oui, nous pouvons le faire. Mais quand j'ai essayé cela, j'ai eu une erreur. J'ai conçu celui-ci, et si j'essaie de le faire glisser ici et si je le joue, comme vous pouvez le voir, il ne montre aucun endroit. Elle bouge. C'est pourquoi nous devons le garder à l'intérieur du cadre. Il reste donc au milieu et ne bouge pas ailleurs. Rappelez-vous qu'une chose est que l'un des éléments profonds les plus importants doit être le même. Le composant doit être le même si vous voulez animer quelque chose. Si vous tracez un cercle, copiez-le. Vous n'avez pas besoin de dessiner à nouveau un cercle, car si vous le faites et si vous essayez de l'animer, cela ne fonctionnera pas Vous pouvez y ajouter une animation, une animation intelligente, mais cela ajoutera simplement un effet de disol, pas un effet d'animation intelligent Donc, composant ou élément ou quelle que soit votre forme, utilisez le même. OK, maintenant ajoutons quelques ticks. Je vais choisir Icone Scout. Laissez-moi vérifier, cochez. C'est une coche. Et je vais utiliser celui-ci. OK, tu es censé avoir 25 ans sur 25. OK. Permettez-moi de clore celui-ci. C'est par ici. Et permettez-moi de diminuer la transparence. Il animera également. Désolé, dupliquez et ici, ce sera 50 et ici ce sera 100, faites-en 100 et plus ici aussi 100. OK. Donc, si j'y rejoue, ça aura l'air plus cool. C'est ce que tu peux voir ? Il y a une chose que nous pouvons faire. Nous pouvons élargir le cercle. Actuellement, c'est environ 50. Portons-le à 75 et gardons-le au centre. Pareil pour celui-ci. Allons-y 100. Laisse-moi essayer celui-ci. Je veux juste expérimenter quelque chose. J'espère que cela fonctionne. D'accord, cela fonctionne, mais à la fin, nous avons ajouté une animation intelligente au rétrécissement. Nous pouvons donc conserver la taille du cercle du milieu, qui est, je suppose, de 100. Laisse-moi faire cette centaine. OK. OK. Celui-ci. Oh, tu devrais être au milieu. OK. J'espère que cela fonctionne maintenant. Cela fonctionne, mais nous pouvons ajouter cet effet. Ou gardons-le tel quel. Il est également très beau. C'est ainsi que nous créons des animations. Il y a une chose que je veux montrer, disons si vous choisissez un fil métallique. Dans celui-ci, nous avons déjà fourni cet effet, mais vous pouvez réellement personnaliser votre animation. Nous avons ce graphique, sur lequel nous pouvons utiliser les boutons Stoger et nous pouvons augmenter notre vitesse d'animation Si vous voulez vraiment faire la génialité dans ce cas, vous pouvez utiliser celui-ci Je vais vous montrer comment l'utiliser. Ensuite, donc Stratum pour ça. Nous pouvons également utiliser celui-ci ou il existe une autre option appelée ressort personnalisé. Il se trouve également ici. Vous obtenez également un aperçu de son fonctionnement. Ensuite, nous allons apprendre celui-ci. C'est pour notre option de paiement. Comme vous pouvez le voir, j'ai créé celui-ci, il prend beaucoup de place et il a l'air vraiment moche. Permettez-moi de copier celui-ci. OK. Permettez-moi simplement de l'ajouter en guise de superposition Donc ça aura fière allure. Passons au composant de 84, et ce sera notre superposition Si j'appuie sur Placer la commande, Smart Animate et c'est terminé. Et il doit être à portée de main et doté d'un stylo d'animation intelligent. Vérifions si cela fonctionne. Permettez-moi de créer un nouveau flux pour que je puisse simplement passer dessus. OK, ça marche. C'est sympa. Nous pouvons rendre notre champ transparent pour qu'il paraisse plus froid que f zéro. OK, maintenant ça a l'air cool. Vous pouvez augmenter la taille du cadre, et nous pouvons ajouter une autre option, comme laissez-moi passer au cadre, afin que je puisse ajouter celui-ci, celui-ci, et l'arrière-plan devrait être de 50 comme celui-ci. Et si j'y rejoue, commandez. Comme vous pouvez le constater, l'arrière-plan devient un peu noir et notre animation apparaît. Par rapport à celui-ci, vous pouvez voir quel point il faut peu d'espace et à quel point il est facile à créer. OK, je voudrais vous proposer un projet avec la même technique, vous devez créer cette animation, l'animation de chargement comme celle-ci. Alors mettez la vidéo en pause, faites-le et soumettez-moi dans la section projet. Et nous pouvons utiliser cette animation avant celle-ci. si je clique sur la commande, elle se chargera d'abord pendant un moment, puis elle passera à la case à cocher. Faisons-le. Faisons-le. Permettez-moi de passer à l'actif qui est ici le composant six. Laissez-moi le suivre ici. Actuellement, les couleurs ne sont pas très bonnes, mais nous les changerons plus tard. Permettez-moi de me joindre à cela ici. Et après ça, tu devrais aller ici. Après retard, je suppose, après délai, celui-ci. Après un certain délai, passez à ce paiement effectué avec succès. Restons-le 800 millions de secondes. Voyons comment cela fonctionne. Homme intelligent 450. Voyons à quoi cela ressemble, place order load load. J'essaie d'ajouter superposition après quelques millisecondes, cela Il doit être remplacé par celui-ci. Mais chaque fois que je fais cela, cette animation s'arrête et cela fonctionne ou parfois cela ne fonctionne pas. Je ne sais pas ce qui se passe avec la FM ou peut-être que je fais des erreurs. Permettez-moi de vous montrer si je veux échanger l'animation Je vais donc la lier à celle-ci et naviguer pour échanger la superposition Et tout sera pareil. Mais comme vous pouvez le constater, ce n'est plus le cas actuellement. Je vais choisir après le délai. Permettez-moi de fermer, de supprimer les éléments animés précédents. Que dois-je dire Après un délai de 800 millisecondes, il doit changer. Mais si je le réinitialise et si je place dessus, comme vous pouvez le voir, l'animation de chargement, elle disparaît celle-ci apparaît et il n'y a rien sur le cadre. Mais si j'essaie de faire comme ça, si je supprime celui-ci, et si je passe à nouveau commande. Comme vous pouvez le voir, c'est maintenant qu'il n'est pas visible. Je ne sais pas ce qui se passe chez Sigma. Cela fonctionnait auparavant et maintenant cela ne fonctionne plus. Et si je le supprime et si je rejoins celui-ci en appuyant sur Open Overlay, tout sera dans le même ordre de place Comme ça marche et ça ne marche pas. Permettez-moi de le changer à nouveau. Commande de plus de six. Comme vous pouvez le voir, il est invisible. Je dois donc supprimer celui-ci et j'essaie de l'ajouter à nouveau. Et si je me joins à nouveau, nous pourrons ouvrir Overlay 95 plus order Cela fonctionne maintenant. Comme vous pouvez le voir, je pense qu'il y a un burg, peut-être que je fais quelque chose de mal. Donc, si vous savez comment résoudre ce problème, faites-le moi savoir car c'est ainsi que cela fonctionne actuellement . Je le veux quand je clique dessus, il pivote et après quelques secondes, il doit s'ouvrir. Je pense que je dois maintenant utiliser la méthode traditionnelle. Je vais donc supprimer celui-ci et créer quelques pages. D'accord, maintenant je diminue le contraire pour pouvoir ajouter ce composant à ce centre. Laissez-le rejoindre Ptype après avoir passé commande, vous devez passer ici et taper, vous devez être sur cassette, et je garderai tout celui-ci Nous pouvons utiliser l'action intelligente. Utilisons Smart Mon. Parfois, cela donne une vraie animation. Donc je n'aime pas ça. Maintenant, cela fonctionne. Maintenant, ça a l'air cool aussi. Il est en cours de traitement et après un certain délai, il passera donc à celui-ci. Après 800 millisecondes, passerons à celle-ci et nous ajouterons la deuxième animation, qui est Allez au centre. Laisse-moi aller de zéro à zéro, PL zéro. Maintenant, laissez-moi essayer comment cela fonctionne. Plus la commande et au bout de 800 millisecondes. Il se transforme en celui-ci. C'est ainsi que je voulais créer en utilisant la superposition, mais je ne sais pas si cela me donnait des erreurs vraiment étranges Nous pouvons augmenter le temps de temporisation de la taille. Vous pouvez ajouter jusqu'à 202 000 secondes, 2 000 millisecondes, laissez-moi rejouer, flux 19 plus la commande bout de 2 secondes, cela deviendra celui-ci . C'est cool. Et nous pouvons également ajouter preen successful, et nous pouvons tout augmenter grâce à vous Permettez-moi de supprimer celui-ci et je pourrai le copier, en fait. Maintenant, je peux remplacer mon dist celui-ci. Il n'est pas supprimé. B vous êtes censé être au centre et le sentiment doit être nul. Et je pense que tu es censé avoir 25 ans. OK. Celui-ci devrait également avoir 25 ans. OK. Maintenant, cela fonctionne. Comme cela fonctionne. Réinitialiser. Laissez-moi le réinitialiser. OK. Flow 19 passe commande. Il se chargera pendant 2 secondes. Après cela, je n'ai pas rejoint la page. OK, permettez-moi de m'y joindre après un délai de 2000 millisecondes. Smart Animate et quatre 50 seront sortis. Maintenant, jouons. Passez la commande, rétrogradez pendant 2 secondes. Maintenant, le paiement est effectué. Et nous pouvons également taper «   paiement réussi ». OK, j'ai donc ajouté le texte de confirmation du paiement. Laisse-moi refaire ça. Chargement du chargement, chargement et succès. Comme vous pouvez le voir, ça a l'air vraiment cool. Vous pouvez augmenter la taille de police, mais je suis comme dans celui-ci, donc je le garde. C'est ainsi que nous avons créé cette animation, l'animation de chargement ainsi que cette animation de clic, qui émet une position lumineuse Votre travail consiste à créer cette animation de chargement. J'espère que vous l'avez fait, et voici à quoi ça ressemble. Vous devez réellement dessiner le premier cercle comme ceci. Laissez-moi vous montrer le panneau. Le premier est ps, puis vous devez recadrer le ps. Vous devez utiliser ces boutons de bascule. Permettez-moi de vous montrer que vous aimez les togletons et d'autres comme celui-ci. Placez-les au-dessus de cette ellipse, modifiez simplement la position dans chaque image et utilisez des composants interactifs, joignez-les au prototype et ajustez la valeur, et cela fonctionnera comme ça Si vous savez comment résoudre cette superposition, faites-le moi savoir et je sais que j'ai fait une erreur Je ne suis peut-être pas capable de le résoudre pour le moment. Mais si c'est le cas, je mettrai à jour cette vidéo. De cette façon, nous avons appris à utiliser composants indirectifs ainsi qu' à créer celui-ci celui-ci C'est ça, je suppose. C'est ça. C'est donc sur le point de se passer, et je vous verrai dans le prochain. 96. Projet de cours 19 : le clic final : terminer votre design d'application clickkart dans Figma: Bon design, nous en sommes à la fin de la partie. Alors, mon amour, nous concevons l'application Kick Card de bout en bout. Nous avons découvert le wireframe. Nous avons également conçu l'interface utilisateur, nous avons également découvert la micro-interaction, l'animation et le prototypage C'est donc l'heure du projet. Ce sera le projet 15 17, je ne sais pas, peut-être le 19. OK, ce sera donc le projet 19. Donc, si vous pensez qu'il manque quelque chose dans cette application, comme une page de commande ou panier, je sais peut-être que j'ai raté le panier. Vous pouvez l'ajouter et si vous souhaitez ajouter quelque chose de nouveau à la page, créer à partir de zéro. Concevez un wireframe, puis concevez votre interface utilisateur, puis inspirez-vous, ajoutez des couleurs, etc., et ajoutez un design unique. Ajoutez également le prototypage Si vous le souhaitez, vous pouvez ajouter une animation. Et une fois que votre chef-d'œuvre est prêt, c'est l'heure du spectacle. Prenez une capture d'écran de tous les écrans et téléchargez-les dans la section projet. Et ne soyez pas timide, partagez votre magie du design sur les réseaux sociaux. Taguez votre ami. Peut-être créer un hashtag amusant Montrez au monde entier vos formidables compétences. Imaginez que votre design puisse devenir viral. Nous avons donc construit un coup d'État dans Figma, comme ceux qui tuent le WiFi et les prototypes, mais devinez ce que nous sommes en train de terminer maintenant À partir de la prochaine fois, les choses deviendront réelles. Nous menons des projets individuels. Imaginez que c'est comme avoir votre propre vaisseau spatial et partir pour concevoir vos Vous choisirez une mission, construirez un monde et le rendrez génial. Ne vous inquiétez pas, vous n'êtes pas totalement perdu dans l'espace. Je suis un robot de confiance qui bourdonne de trucs et astuces Bon stock, pas de problème. Retour en bus vers ces anciens tuteurs. Ils sont comme votre cours secret. Et devinez quoi. Le prochain projet va être épique. Je t'en parlerai bientôt, alors fais du battage médiatique. Jusqu'à ce qu'il continue à jouer avec Figma, à apprendre et à se préparer à superpuissances du monde en matière de conception C'est donc un champion. Vous avez conquis l'application de cartes. Améliorez vos compétences et vous êtes maintenant prêt à conquérir le monde avec les superpouvoirs du design Alors allez-y et créez. 97. Comment puis-je définir une vignette ou une couverture de projet dans Figma: Bonjour à tous, de cette façon, nous allons aborder un problème. Cela peut vous mettre un peu en colère. Une miniature par défaut dans Pigma. Comme vous pouvez le voir, il s' agit d'une version cliquable, n'y a pas de miniature, et je ne sais pas ce qu' Je peux juste voir les composants. Mais si je consulte les fichiers communautaires importés, comme vous pouvez le constater, ils sont très précis et je peux voir ce qu'ils contiennent. Pareil pour ce 111 celui-ci. Et aussi bien qu'avec celui-ci. Mais notre fichier n'a pas de miniature. Je sais que c'est triste. Parfois, ils vont bien, mais d'autres fois, ils finissent par montrer quelque chose qui ne correspond pas au fichier réel, ce qui peut être frustrant. Je vais donc vous montrer comment personnaliser une miniature, rendre plus inactive par rapport au contenu de vos documents Oh, alors passons à notre dossier. Ce sera notre première version à cliquer. Je veux une page séparée qui soit une miniature du nom. Vous pouvez également le nommer comme vous le souhaitez, mais dans ce cas, je vais le nommer miniature OK, ajoutons la miniature de la carte de clic. Je vais donc m'y perdre à l'avenir. OK. Il n'y a donc rien sur cette page, alors passons aux frames. Et dans la communauté FIGMA, nous avons intégré la couverture du fichier Slash. Alors choisissons-le. Il fait 90 x 20 pixels en un, et il est actuellement vide. Je veux donc que ces pages apparaissent à l'écran comme les trois premières pages. Donc, actuellement, je vais les exporter. Je sais que je vais trop loin. Je ne vous ai pas dit comment exporter un fichier, mais suivez, ne vous concentrez pas dessus car nous allons apprendre à exporter dedans. Je vais donc choisir de déplacer et d'exporter ces fichiers, je veux que ce soit en PNG. Vous pouvez également choisir différents formats tels que JPA SPG P. Je vais choisir le PNG car le PNG fonctionne mieux avec les images et permet d'exporter trois couches OK, donc je veux que ce soit en dollars. OK, donc ces trois pages sont exportées maintenant. Ils sont en PG et je suppose que la qualité est également excellente. Passons à notre page. C'est ce qu'on appelle la miniature du menteur, et permettez-moi de les importer dedans. Bupa, allons-y. Allons par ici. Comme vous pouvez le constater, ce sont des images et non des images réelles. Maintenant, je veux que cela soit arrangé comme ça. Vous allez être ici, vous allez être ici aussi bien que celui-ci, donc je vais les fusionner. Et préparons un cadre, je suppose. Convertissons-les en cadre pour qu'ils collent ensemble. Sélection du cadre Ils sont donc encadrés maintenant, et je vais les étendre. Laissez-moi les agrandir pour que nous soyons sur la bonne échelle. Faisons en sorte que ce soit grand comme ça. Donc, comme vous pouvez le voir, ce sera du thobil mais nous pouvons ajouter quelques épices. Ce ne sont pas de vraies épices. Nous pouvons faire pivoter un peu et l'ajouter comme ça. OK, ici aussi. Maintenant, ça a l'air super et je veux que ce soit un uminil. Dans ce cas, je peux simplement cliquer sur ce cadre en tant que tel. Cliquez avec le bouton droit de la souris sur le réglage sous forme de miniature. Mais il y a un problème. Donc, si je rentre chez moi, comme vous pouvez le constater, il n' est pas encore mis à jour. Il me montre à nouveau les composants. Donc, pour que ces deux fonctionnent, vous devez réinitialiser votre logiciel. Je ne sais pas comment cela fonctionne sur le web, mais dans les logiciels, vous devez configurer votre logiciel. Doux Si vous êtes sous Windows, l'option de raccourci est toujours ouverte, alors fermez-la également. Je ne sais pas pourquoi. Alors laissez-moi ouvrir Fi Margin. Donc, comme vous pouvez le voir, il est mis à jour maintenant et il a l'air plus cool, et nous pouvons voir que c'est le panier. OK, double dessus, et actuellement nous sommes sur le point de recruter , laissez-moi y retourner. Comme vous pouvez le constater. Nous avons le thumil. Si vous le souhaitez, vous pouvez en faire une capture d'écran, laissez-moi vous montrer Par exemple, si nous sommes sous Windows, vous pouvez accéder à l' outil de capture et cliquer sur vous Vous pouvez en prendre une capture d'écran comme celle-ci , l'enregistrer et l'utiliser comme miniature Je vais donc vous montrer comment l'utiliser. Mais je pense que la capture d'écran n' est pas très claire, alors j'essaie d'importer chaque image, puis je les ajuste. Donc ça marche. Si dans tous les cas, capture d'écran fonctionne, allez-y, et si vous souhaitez exporter un cadre dans PG, vous pouvez également le faire. Il y a une chose que vous devez garder à l'esprit : dans certaines versions, la miniature peut ne pas être mise à jour immédiatement Donc, si cela se produit, fermez-le, rouvrez-le et le fichier devrait être là Les miles doivent être mis à jour. En plus de le personnaliser, ajoutez-y votre touche de design et définissez-le sous forme de miniature Voici donc it x designer, un moyen rapide et facile de mettre à jour la miniature de votre fichier Pigma afin de mieux représenter son contenu Plus de frustration face à des vignettes aléatoires ou périmées. Si vous avez trouvé cet état utile pour plus de trucs et astuces. Alors rendez-vous dans la prochaine vidéo. 98. Comment exporter votre design Figma en tant qu'image (PNG,JPG,SVG,PDF): Dans cette vidéo, nous allons nous plonger dans le traitement de l' exportation d'images depuis Figma Nous avons déjà vu comment exporter dans Figma lors de la création de ce tumil, mais dans cette vidéo, nous allons réellement apprendre comment exporter, quelles sont les choses que nous pouvons faire en Quels sont les x, qu'est-ce que le suffixe, quels sont les différents types de formats d'image et quels sont les éléments que nous prenons en compte lors de l'exportation d'images ou de votre projet Ce sera donc un guide à usage général. Et dans les prochaines vidéos, nous explorerons des cas d'utilisation plus spécifiques pour les livreurs et les collègues. Commençons donc par les bases. Exporter des FIMMA est un peu différent des autres programmes, comme j'utilise des logiciels comme Popsol. Donc, lorsque nous exportons, nous n'avons qu'à indiquer le nom ainsi que le règlement de la vidéo, et il suffit de cliquer sur l'exportation, mais dans FiMMA, c'est différent Dans FMA, nous devons appliquer le paramètre d'exposition directement à la loi ou à l'objet que nous voulons exporter Par exemple, disons que je veux exporter celui-ci, et comme vous pouvez le voir sur n, nous avons le bouton d'exportation. Cliquez dessus, et nous avons trouvé ce bouton d'exportation. Et maintenant, je vais appliquer certains paramètres d'exposition. Figma me permettra donc de choisir un format d'image différent. Alors, réfléchissez : quelle est la différence entre le PNG et le JPEG ? Certains d'entre vous pensent peut-être que je pensais que le PNG et le JPEG sont identiques. Je ne savais pas qu'il y avait une différence. Voyons donc ce qu'est le JPEG. Le JPEG est idéal pour les photos et les détails, mais il faut du temps et on ne peut pas voir à travers comme par magie. C'est bon pour les fichiers de petite taille, bon pour le Web, mais pas pour le texte ou la transparence. Mais la PNG est le contraire. Le PNG est une image cristalline. Le texte est net. On peut voir à travers les choses, et tout semble génial. Mais comme dans le cas d'un grand album photo, la taille du fichier peut être importante. Utilisez-le pour l'icône du logo et pour les objets où la qualité compte le plus. Maintenant, voyons ce qu'est le VG. Imaginez un dessin super extensible qui ne prend jamais de sang. Peu importe la taille que tu gagnes. Donc, dans ce cas, laissez-moi prendre un logo. Donc, un interrupteur comme celui-ci, si j'essaie de le redimensionner, l'agrandir, comme vous pouvez le voir, le pixel n'est pas pixelisé Tout semble parfait et tout est net. Il est parfait pour les formes d' icônes et les objets qui doivent être redimensionnés en douceur, mais toutes les applications ne l'aiment pas, considèrent cela comme un type d'image spécial, et passons maintenant au PIP Je sais que tout le monde connaît le PDP. Imaginez un classeur de présentation raffiné avec tout ce qu' contient soigneusement, des photos , des photos Idéal pour partager un design fini ou le montrer à un client. Mais vous ne pouvez pas le modifier facilement. Pid up est plus susceptible de trouver un chef-d'œuvre qui fonctionne en cours de fabrication. Essayons d'exporter ce coupon. Mais si j'essaie de l'exporter comme vous pouvez le voir, nous obtenons cette option, comme un x 1,5 x, deux x trois, jusqu'à quatre X, ainsi que cette largeur de combat de 0,50 et cette hauteur de roue de combat. Comprenons-le donc d'abord. Donc, dans Figma, ces chiffres 1x2x3 x. Vous le voyez lors de l'exportation d'un facteur d'échelle. Ils indiquent essentiellement à Figma taille de votre dessin avant de l'enregistrer sous forme de fichier Un X correspond à la taille originale de votre dessin, comme le livre de recettes de base surtout, comprenez que deux x. Cela double la taille de votre dessin, le rendant deux fois plus grand que l' original. Imaginez que vous doublez les ingrédients votre recette pour un gâteau plus gros et faites la même chose avec trois fois la même chose avec quatre x. Cela multiplie celui que possède un x. Et le point zéro s f et le point zéro sont opposés à trois x et quatre x. Cela nuit donc à la qualité de nos images. Ce facteur d'échelle est utile pour les écrans présentant une isolation différente. L'écran haute résolution nécessite des images plus grandes pour éviter la pixellisation Alors qu'un écran à faible résolution peut gérer des mots plus petits. À l'aide du facteur d'échelle, exportons votre dessin dans une taille différente pour différents appareils. Assurez-vous qu'il soit croustillant partout. Vous voudrez peut-être une version plus petite pour votre design pour le pus. Bien qu'un modèle plus grand soit parfait pour l'impression, facteur d' échelle offre une certaine flexibilité. Voyons maintenant ce que sont une largeur de puits de 500 et une hauteur de 500. Il s'agit donc de dimensions absolues, c'est-à-dire qu'elles spécifient la largeur exacte et le haut de l'image exportée en pixellisation C'est comme donner à Figma une taille de moule à gâteau spécifique. Je me suis levé juste pour ajouter deux fois plus de crédibilité. Essayons maintenant d' exporter quelque chose. Je sais que c'était une question de théorie. Nous apprenons dès maintenant. Donc, actuellement, nous allons exporter la même chose dans un x, ainsi que dans deux x. Je veux le faire en un, ainsi qu'en trois x. D'accord, ajoutons cela en cinq d'une largeur, cinq d'un en largeur, mais je vais modifier certaines valeurs. J'en ajouterai une de 50 de largeur. Vous vous demandez peut-être quels sont ces deux X à trois x à trois X. Il s'agit du suffixe que nous exportons actuellement pour le même élément Ainsi, à la fin de l'image avant l' extension, comme avant le PNG, on indiquera d'abord le nom du composant qui est coupon dans notre cas, puis on ajoutera suffixe et après cette extension Permettez-moi donc d'exporter celui-ci pour le moment. Nous saurons ce qu'ils sont. J'ajouterai cela dans les villes. Toutes les images sont donc exploitées, et comme vous pouvez le voir, ce sont les suffixes, comme à deux x à trois x et à trois x un Voici donc le suffixe. Alors laissez-moi voir l'extension. D'accord, j'ai donc exploité dans différents formats comme en JP , en P, en P et en SVG Ouvrons donc d'abord le fichier JPEG. Et disons la différence. Comme vous pouvez le constater avec le JPEG, nous n' obtenons pas de transparence. Mais si j'ouvre celui du PG, comme vous pouvez le constater, nous obtenons de la transparence. Et vous pouvez également voir les différentes tailles comme la taille réelle de la mémoire. Pour le JPEG, c'est 204 pour le PNG, celui-ci et celui-ci pour une largeur de 50. Il est très faible, 70 K, et pour SG, 77 K. Mais avantage du PG, c'est que si nous essayons de l'importer dans notre design, et si j'essaie de le redimensionner, zk, comme vous pouvez le voir, ne sera pas pixelisé Donc, si vous souhaitez utiliser vos éléments ou composants dans différents fichiers de conception, portez-les dans son fichier. Il y a une autre chose que je voudrais vous montrer , comme si je vais dans les fichiers et dans l'exportation, comme vous pouvez le voir, j'ai 12 éléments dedans, car jusqu'à présent, j'ai exporté 12 éléments de ce projet. Cela vous aidera lorsque vous voudrez consulter votre historique, exemple ce que vous pensiez avoir exporté jusqu'à présent. Il vous en montrera les propriétés, quel est le pixel, le cuir chevelu, le format p, et vous pourrez les réexporter directement si vous le souhaitez C'est donc la base de l'exportation dans Figma. Nous avons donc abordé les bases de l'exportation d' images depuis Figma Alors, indiquez-le pour un cas d'utilisation plus détaillé dans les prochaines vidéos. Si vous avez trouvé cette piscine, n' oubliez pas de me le faire savoir, et je vous verrai dans la prochaine. 99. Comment distribuer vos designs UX comme un PRO: Dans ce document, je vais vous guider tout au long du processus d'exportation du document Figma, qui peut être utile pour le partager avec vos clients, vos parties prenantes, votre équipe de développement, votre équipe de conception, participants aux recherches sur les utilisateurs Chef de produit. Nous allons donc explorer différentes méthodes notamment l'exportation de cadres à l'aide outil Slide et le partage de liens. Jusqu'à présent, nous utilisions tous les outils disponibles dans Figma, mais il n'y en a qu'un C'est une sorte d'outil caché, et nous ne l'avons pas utilisé. Je crois vous l'avoir montré, mais nous ne l'avons pas utilisé. Dans cette vidéo, nous allons donc également utiliser cet outil. D'accord, vous savez peut-être comment partager un projet. Vous pouvez simplement partager et copier un lien, et laissez-moi appuyer dessus ici. Nous pouvons copier ce lien et le partager par e-mail, selon votre choix, et vous pouvez également partager un protype Partagez simplement le protype, copiez le lien ou vous pouvez également les inviter et les configurer pour qu'ils ne puissent être consultés et partagés qu'avec eux. C'est pareil. Alors laisse-moi le copier. Copiez le lien T pour le texte. OK. C'est donc l'une des méthodes classiques que vous utilisez le plus. Mais supposons que vous souhaitiez partager votre projet au format Pap. Dans ce cas, vous pouvez utiliser Pap. Il suffit donc d'accéder aux fichiers, d'exporter le cadre vers le Pap, mais il y a un problème, mais allons-y avec le Pap maintenant, afin que vous sachiez quel est le X il a explosé, alors laisse-moi l'ouvrir. Comme vous pouvez le voir, tout a explosé, comme chaque image, chaque image automatique, chaque bouton. N'oubliez pas que la FIPMA considère une mise en page automatique comme un cadre. se peut donc que vous deviez resserrer votre document avant de l'exploser. Après avoir explosé, vous pouvez supprimer pages inutiles à l'aide d'un outil ppting tel que ILO PDF Une autre méthode intéressante consiste à utiliser l'outil Slice. Regardons donc cet outil de découpe. Mais comme vous pouvez le constater, le total de ces PDA s'élève. Je voulais juste passer de cette page à cette page, mais toutes les pages de l'application ont été ajoutées. Apprenons donc à les découper ou à les découper, et nous utilisons l'outil Slice. OK, il est ici sous le cadre pour le trancher. Maintenant, nous avons ce schéma positif, ne nous reste plus qu'à le suivre car je ne veux que ces cadres. Maintenant, comme vous pouvez le voir sur le panneau des couches, nous en avons découpé une, donc nous pouvons la nommer comme OK, je l'ai nommée click V one frames. Un seul panneau de conception, il n' y a qu' un bouton d'exportation. Cliquons dessus. Mais le problème avec la deuxième tranche est qu'elle ne supporte pas le fichier PDF. Il prend en charge tous les formats, mais il ne supporte pas le format PDF. Si j' essaie de choisir le PDF et si je clique dessus, comme vous pouvez le constater, l' exportation de tranches au format PDF n'est actuellement pas prise en charge Passons au PNG et nous définirons notre facteur d'échelle, par exemple pour que l'image soit plus claire et plus nette. Cliquons sur le port. D'accord, c'est vrai et la taille du fichier l'est, pas B. Si je l'ouvre, comme vous pouvez le voir, il est beaucoup plus croustillant, la qualité est vraiment excellente D'accord, il est maintenant pixelisé, mais comme vous pouvez le voir d'un point de vue normal, c'est génial. Il est partageable. Et nous pouvons également le convertir en PDP à l'aide d'autres outils tels que le PDP Il s'agit du site Web actuel. Vous pouvez accéder à ce site Web et P. Mais si vous souhaitez uniquement exporter ce cadre dans PIP, supprimer tous ou les déplacer dans des composants de page distincts, puis ne choisir que ces cadres et les exporter au format P. Il s'agissait donc de savoir comment partager un que ces cadres et les exporter au format P. Il s'agissait donc de savoir comment projet avec vos clients clients, comment utiliser l'outil Slice et comment exporter vos fichiers dans P. Mais là C'est une chose que j'ai oublié de vous montrer, par exemple, je veux exporter uniquement cette chose. Cliquons sur l'exportation, et je peux l'exporter en PNG car le PNG me donne de la transparence en arrière-plan, et il y a une chose que vous pouvez faire. Disons que vous ne voulez pas transparence, vous voulez tout. Dans ce cas, vous voulez que les couches se chevauchent. Dans ce cas, vous pouvez choisir accéder au menu à trois points, et il y a une option. Ignorez les couches qui se chevauchent. Si vous sélectionnez ceci, comme vous pouvez le voir, rien ne se passe car ce n'est pas le bon exemple, mais si je choisis celui-ci, exportez si je sélectionne celui-ci, comme vous pouvez le voir, nous avons des couches qui se chevauchent N'oubliez donc pas que si vous souhaitez conserver vos couches qui se chevauchent, sélectionnez-la, et si vous ne le souhaitez pas, cliquez dessus Par défaut, on clique sur ignorer les couches superposées. Fermons donc ceci pour que soit ce que j'ai oublié de vous montrer dans la vidéo précédente. Tout tourne donc autour de l'explosion. C'est une vidéo loufoque, et je vous verrai dans la prochaine. 100. Introduction aux ressources et aux inspirations des systèmes de conception: Bienvenue dans un voyage au cœur de l'innovation en matière de design. Aujourd'hui, nous sommes confrontés à la complexité du système de conception. La force motrice de la création de produits numériques cohérents et efficaces Commençons par dissiper les mythes. Un système de conception n'est pas simplement une bibliothèque ou un guide. Il s'agit d'une source unique de vérité qui utilise tous les éléments pour une conception et un développement de produits fluides Un système de conception statique des livrables évolue avec Le système de conception évolue avec les produits, les outils et les technologies Gina et Apo Sit, ils englobent des outils, des motifs et des composants enchevêtrés , mais ils font également abstraction éléments, tels que les valeurs de marque et les méthodes de travail partagées Examinons donc en profondeur les détails. Un guide de style met l'accent sur le style graphique. Alors que la bibliothèque de modèles intègre des composants fonctionnels. exemple notable est Tropifiepoliz, Un exemple notable est Tropifiepoliz, qui combine parfaitement les deux. Les démos pour le design se multiplient, autant plus que le numérique devient l'objectif principal système de conception comble le fossé entre l'impression et le numérique , en créant un langage cisaillé qui s'adapte et mûrit avec le temps Explorons donc les composants essentiels. Le premier objectif et la valeur de cisaillement constituent la base. Des guides sur les principes de conception, des décisions pertinentes et l'identité de marque issus d'un alphabet unique. Les composants et les modèles tels que les blocs Lego sont des instructions de construction, une structure. choisir le bon système de conception , il faut se poser la bonne question : je suis strict ou perds la modularité ou l'intégration, la centralisation ou la distribution ? Sa décision influence l'efficacité et l' évolutivité de ce système. Maintenant, inspirons-nous un exemple de système de design. Comme le premier, c'est le plaidoyer d'IBM en faveur des systèmes de conception. Il s'agit du système de conception d' IBM. Comme le monde américain est tellement open source, ils nous fournissent tout ce qui ressemble à des valeurs de cette couleur. Quel est le sens de celui-ci ? Quelle est la signification de cette police ou de quelque chose comme ça ? Comme vous pouvez le constater, tous les systèmes de conception sont fournis sur ce site Web. Je vais ajouter ce lien dans les ressources, alors parcourez-le et vérifiez-le. Et j'inclurai également cet article de Medium Design Systems for Design in 10204. Alors parcourez-le. Il contient tout ce que vous devez savoir, toutes les ressources et tout ça. Passons maintenant au pôle Shopify. Il s'agit du système de conception du système pour Shopify. Ensuite, nous avons material.ai, material point O. C'est également l'un des meilleurs sites Web d'inspiration en matière de design. Et système de design. Et si vous voulez tout savoir sur le système de conception à partir de zéro, rendez-vous sur ce site Web appelé système de conception, et à partir de là, vous saurez tout sur le système de conception. Un système de design est un produit en soi. Comme tout bon produit, il a été dicté par les commentaires des utilisateurs, intégration avec les concepteurs et les développeurs, Workflow annonce l'efficacité, créant ainsi une expérience utilisateur plus fluide L'avenir promet développement passionnant dans un système de conception. Les avancées technologiques nous simplifieront la vie et nous permettront de nous concentrer davantage sur l' annonce de l'expérience utilisateur. En conclusion, un système de conception est le modèle dynamique qui permet aux équipes de renforcer son intégration. Le flux et la localisation constante garantissent une approche centrée qui nous emmène dans l'ère passionnante de l' innovation en matière de Tout dépend donc du système de conception et de l'objectif du système de conception. C'est aussi l'un des sites Web sur lesquels vous pouvez vous rendre pour en savoir plus sur le système de conception, comme si je vais sur ce site Web, design point wonderful point flow. C'est le site Web, et celui-ci, ce site Web a tous les systèmes de conception. Si je le lis, comme vous pouvez le voir, ils indiquent tout, comme la couleur, les icônes, ainsi que le but de l'icône. Tout. Et allez simplement sur le site Web et apprenez tout sur le système de conception. Il existe également un site Web appelé Atlantis Design. C'est également l'un des meilleurs sites Web si vous souhaitez en savoir plus sur le système scientifique. Alors parcourez-le et apprenez tout sur le système de conception. J'ajouterai toutes les ressources dans les ressources. Alors jetez un œil à ça. Tout est donc une question de système de conception. Exploration du système de conception. Commencez donc à mieux comprendre et à innover dans tous les univers du design olv Design joyeux pour apprenants sociaux. 101. Intro - Projets du monde réel avec figma: Heather Design TOS, bienvenue dans la série de projets UX du monde réel Votre porte d'entrée pour renforcer votre créativité et perfectionner vos compétences en design. Maintenant, écoute-moi bien. Je dois encore vous annoncer que vous êtes sur le point de vous lancer dans un voyage passionnant au cours duquel vous aborderez un projet de design dans le monde réel. Mais voici le hic. Je ne vais pas vous donner le guide étape par étape. Non, tu es sur le siège du conducteur. Imagine ça. Vous êtes chargé de concevoir une application conviviale de livraison de nourriture et d'utiliser une application conviviale Vous pouvez vous inspirer de votre application préférée, comme les bots ou Zomato, ou créer votre propre version avec une touche d'originalité. D'accord. Je sais que vous aurez besoin d'une petite installation de boostp. Consultez les liens vers les ressources que j'ai fournis. Explorez différents sites Web et applications, regardez à nouveau cette discussion en discutant avec Chad Jept ou Google Gemini pour découvrir des parcs d'ondes cérébrales Dans cette série, votre mission est d' appliquer toutes les compétences que vous avez apprises dans ce cours, de la mise en page automatique et des composants à l'animation et aux effets intelligents. Et n'oubliez pas l'expérience utilisateur. Votre design doit être intégré et fluide, faciliter la vie de votre utilisateur Tout au long de cette série, vous aurez la liberté d' expérimenter avec les polices, les couleurs, les icônes et les images. Laissez libre cours à votre créativité. Mais n'oubliez pas que la simplicité est essentielle. Veillez à ce que votre design soit propre et exempt de clitters pour un impact maximal Lorsque vous avez mis la touche finale à votre chef-d'œuvre, il est temps de partager votre travail avec le monde entier. Résumez le design et profitez de la gloire de votre dur labeur et de vos nouvelles prouesses en matière de conception de polices de caractères Alors, êtes-vous prêt à vous plonger dans le monde réel du V design ? J'ai hâte de voir ce que tu trouveras. Faisons donc en sorte que la magie opère. 102. StayWave: Bienvenue dans la série de projets Real World X. Je vous demande de donner vie à vos compétences en design et de relever ensemble les défis du monde réel. Qu'il s'agisse de créer une interface élégante ou d'améliorer l'expérience utilisateur, cette série est votre chance de briller Alors plongeons-nous dans le vif du sujet et faisons de la magie du design une réalité. Très bien, ma fille, aujourd'hui, j'ai un projet passionnant pour vous tous. Nous allons concevoir l'interface utilisateur d' un site Web appelé Stay Wave. Site de séjours pour la réservation d' auberges pour touristes à petit budget. Notre objectif est de créer une interface conviviale permettant aux voyageurs de rechercher, de comparer et de réserver facilement un hébergement. Avant de nous lancer dans le processus de conception, assurez-vous de consulter les fichiers de ressources que j'ai fournis. Vous trouverez tous les actifs et informations nécessaires pour démarrer. Parlons maintenant du concept de design que nous allons appliquer à ce projet. Vous avez la liberté de laisser libre cours à votre créativité, mais assurez-vous de l'intégrer aux éléments suivants Le premier est la mise en page automatique, assurez-vous que le design est réactif et s'adapte parfaitement aux différentes tailles d'écran. La seconde est la variante, utilisez la variante pour créer un style différent pour les boutons, les cartes et les autres éléments de l'interface utilisateur. troisième inconvénient créent des composants réutilisables afin de maintenir la cohérence tout au long de la conception. Forcez une animation intelligente, ajoutez-y une animation subtile pour améliorer l'expérience utilisateur sans surcharger l' interface et maintenez cet effet, testez des effets tels que l'ombre, le dégradé et la superposition pour que le design apparaisse habituellement La première étape consiste donc à définir le flux de tâches et à comprendre le brief du projet. Pensez au parcours de l'utilisateur, depuis la recherche de l'auberge jusqu'à la fin du processus de réservation. Lorsque vous concevez le wireframe, n'oubliez pas de rester simple, concentrer sur la mise en page et fonctionnalités avant d'ajouter des éléments visuels Une fois que vous avez finalisé le wireframe, il est temps de mettre en ligne votre design Faites attention à la typographie, à la couleur et à l'imagerie pour créer un U Y visuellement attrayant. Lorsque vous aurez terminé la conception de l'interface utilisateur, vous pouvez capturer une capture d'écran ou, si possible, lien du prototype Semar, être affiché pour consulter les instructions du projet au format PDF pour N'oubliez pas que ce projet est l' occasion pour vous d' appliquer tout ce que vous avez appris dans notre cours Figma, et n'hésitez pas à nous contacter si vous avez des questions ou si vous avez besoin de conseils en cours de route Je suis impatiente de voir ce que vous allez proposer. OK. 103. App de livraison de nourriture dans le monde réel UIUX Project 3: Bienvenue dans la troisième série de projets UivX dans le monde réel. Aujourd'hui, j'ai quelque chose qui va non seulement mettre vos compétences au défi, mais aussi stimuler votre créativité. Imaginez que vous avez faim, envie de votre plat préféré et qu'il suffit de quelques types sur votre application magnifiquement conçue pour satisfaire cette envie quelques types sur votre application magnifiquement conçue pour C'est donc la puissance d'une excellente application de livraison de nourriture. Et aujourd'hui, nous allons en concevoir un. Mais avant d'entrer dans le vif du sujet, rendons les choses encore plus intéressantes. Voici le deal. Dans cette vidéo. Je ne vais pas vous donner un bref aperçu du projet, ni d'aucun flux de tâches ou d'un wireframe Votre mission est de concevoir un flux de tâches et un brief de projet, puis de créer une structure filaire pour cette application qui est non seulement fonctionnelle, mais également conviviale Notre tâche est donc claire créer une expérience fluide pour les utilisateurs qui commandent de la nourriture en ligne. Tout commence par un processus de console utilisateur, suivi de la conception d'un menu AZ pour naviguer. Réfléchissez à la façon dont l'utilisateur sélectionnera ses plats, personnalisera la commande et procédera au paiement. Nous voulons que l'ensemble du processus soit aussi fluide qu'un ruban de soie. Pour donner libre cours à votre créativité, laissez-moi vous montrer quelques exemples d'applications de livraison de nourriture qui ont placé la barre très haut. Réfléchissez à ce qui les rend géniaux et listez-les pour les surpasser. Pour cette application, vous devez concevoir un élément essentiel de l'application. Le premier est l'écran principal après cette option principale. Le troisième est la personnalisation des commandes et le dernier est le processus de paiement. Mais voici la partie la plus excitante. Je veux que vous laissiez libre cours à votre esprit créatif, que vous expérimentiez les polices, les couleurs, en page et que vous utilisiez l'interaction N'oubliez pas tous les principes de conception que nous avons abordés dans le cours. Si vous avez besoin de mises à jour, visionnez ces vidéos de cours Et n'oubliez pas de consulter le projet de loi ci-joint contenant des directives et des ressources supplémentaires. C'est votre boussole pour ce voyage créatif. Permettez-moi de vous laisser avec cette pensée. Le design, c'est penser de manière visuelle. Ainsi, votre design représentera votre pensée, votre créativité et votre innovation. Avant de terminer cette vidéo, voici le défi. Non seulement vous répondez aux exigences, mais vous les surpassez grâce à votre créativité unique. Nous n'avons pas de date limite, mais n'oubliez pas que le design n'est pas simplement une destination. J'ai hâte de voir le fantastique design I was que vous allez créer. OK. Faisons donc en sorte que ce défi soit mémorable, inspirant et surtout amusant. Alors, êtes-vous prêt à entreprendre ce délicieux voyage qui consiste à concevoir une application de livraison de nourriture qui aura un impact ? Alors allons-y. Maintenant, allez-y, faites équipe et commencez à concevoir, partagez vos progrès, vos questions et vos idées avec la classe. Le monde des applications est à conquérir, et ensemble, nous sommes imbattables Merci donc d'avoir fait partie de ce voyage. J'ai hâte de voir votre meilleur créateur. Bonne chance et commençons. 104. Application de musique RealWorld UIUX Project 4: Bienvenue dans la série de projets UX du monde réel. Il s'agit du projet 4. Je suppose. Aujourd'hui, j'ai un projet passionnant à vous proposer. Vous allez concevoir une application musicale conviviale et visuellement éclatante qui rivalise avec les plateformes populaires telles que Spotify et YouTube Music. Commençons donc par comprendre le brief de notre projet. Ce n'est pas bref, juste une instruction. Nous voulons que vous créiez une application qui offre expérience d' écoute fluide et agréable aux amateurs de musique de tous genres. Notre public cible comprend des passionnés de musique de tous âges et de tous horizons. Cela signifie que nous devons concevoir une application intégrative et facile à naviguer, tant pour les utilisateurs expérimentés que pour les utilisateurs expérimentés Nos applications musicales devraient inclure des fonctionnalités clés telles que la découverte musicale, lecture fluide et le partage sur les réseaux sociaux. Vous pouvez vous inspirer de votre application préférée comme Music ou Spotify. Vous pouvez également créer votre propre version. cadre du projet, en plus des serpillères Figma haute fidélité, vous créerez des cadres métalliques pour Et aussi des amis filaires Low Fidelity représentant le design de l'application R Music, vous aidant à planifier la mise en page et les fonctionnalités. Vos dernières vidéos incluront à la fois des maquettes FGMA à haute teneur en ferrité et des wireframes, montrant l'interface utilisateur et l'expérience utilisateur et Vous allez également cartographier le flux d'utilisateurs pour les tâches clés, telles que décourager la création de nouvelles musiques, créer une playlist et gérer la lecture. Et n'oubliez pas que nous devons donner la priorité à la conception centrée sur l' utilisateur, garantir un design visuellement attrayant et rendre l'application également accessible aux utilisateurs handicapés. Maintenant que nous avons bien compris le projet, il est temps de mettre vos compétences à l'épreuve, inspirer d'applications publiques telles que Spotify, YouTube Music, mais aussi de laisser libre cours à votre créativité. Testez les couleurs et les polices pour rendre l'application généralement attrayante. Jouez avec différents styles et trouvez la combinaison qui convient au public cible. Une fois que vous avez terminé la conception et le wireframe, assurez-vous de soumettre le projet conformément aux instructions fournies dans le PDF Il contient tous les détails que vous connaissez. Et j'ai hâte de voir ce que vous allez tous trouver. N'oubliez pas que si vous vous sentez bloqué ou si vous avez besoin de rafraîchir vos connaissances sur un concept, vous pouvez revoir les vidéos de notre leçon précédente et bonne chance avec votre projet d'application musicale J'ai hâte de voir votre design créatif et vos cadres métalliques. Si vous avez des questions, n'hésitez pas à les poser. Faisons quelque chose d' incroyable ensemble. 105. RealWorld UIUX Project 5 DIY: Bienvenue dans la série I X Project dans le monde réel. Il s'agit du projet numéro cinq. Vous avez appris les tenants et les aboutissants de la Figma. Vous maîtrisez le principe de l'UX et c'est le moment de briller Pour votre dernier projet ultime, j'ai un cadeau spécial pour vous. Vous pouvez choisir de concevoir une application mobile, un site Web ou même une application textop Le ciel est la seule limite. Et voici le coup d'envoi. Vous partez de zéro, pas de wireframes ou de modèles prédéfinis. Tout est U. Choice est entièrement composé de vers Que souhaitez-vous pour créer une application mobile révolutionnaire , un site Web époustouflant ou un ordinateur de bureau régional ou laisser libre cours à votre créativité Et oui, tu m'as bien entendu. Aucune ressource masculine. Mais ne vous inquiétez pas. Tu as toutes les compétences dont tu as besoin. Si jamais vous vous sentez coincé, souvenez-vous qu'il existe ces incroyables vidéos culturelles. Regardez-les encore une fois, ils ressemblent à un sort magique UIX. Maintenant, je veux que tu voies briller le Picasso qui sommeille en toi. Ne vous contentez pas de concevoir, créez un chef-d'œuvre , ajoutez votre touche unique , soyez créatif et personnalisez-le. Après avoir mis tout votre cœur et votre âme dans vos projets, suivez les instructions très détaillées de ce pip Il vous indique comment m'envoyer votre création. C'est comme envoyer un message dans une bouteille. OK, donc j'ai hâte de voir ce que tu vas venir. De UOxvis au design, vertus ont été incroyables Tu en as le talent. Maintenant, il s'agit de les mettre au service de l'action. Profitez donc de chaque instant de ce projet. Et si vous avez des questions ou avez besoin de conseils, je suis là pour vous. Alors, sans plus attendre, laissons libre cours à votre créativité et laissons le design commencer. Tu l'as. OK. 106. 10 principes psychologiques pour une puissante conception UX: D'autres designers et des esprits curieux. Bienvenue dans un autre épisode passionnant où nous révélons le secret pour devenir le meilleur concepteur d'expérience utilisateur. Aujourd'hui, nous explorons le monde fascinant des principes de psychologie qui peuvent évaluer votre expérience utilisateur Alors, prenez votre boisson préférée, asseyez-vous et embarquons ensemble dans cette aventure du design. En tant qu'ancien designer, nous ne sommes pas que des créateurs. Nous sommes des psychologues déguisés. Comprendre notre US Ba et notre perception est la clé pour créer une expérience agréable Aujourd'hui, nous allons explorer dix principes psychologiques qui vous transporteront dans un métro UX. Alors allons-y directement. La première est la loi de Hicks. Nous sommes-nous déjà sentis dépassés par un trop grand nombre de choix ? C'est comme se tenir devant la collection de baskets We. C'est la loi de Higs en action. Plus il y a d'options, plus le temps de décision est long. Lors de la conception de menus ou d'interfaces, simplifiez, hiérarchisez et facilitez la prise de décision de l'utilisateur. La suivante est la loi de Jacob. L'utilisateur adore la familiarité. Au lieu de le louer, vous étudierez le design réussi dans votre secteur C'est comme trouver la recette parfaite. Pourquoi le changer ? Alignez-vous avec les lecteurs du secteur pour créer une expérience utilisateur fluide et confortable La troisième est la loi de Miller. La loi de Miller nous enseigne que notre mémoire de travail a des limites. Nous ne pouvons traiter qu'environ sept fois à la fois. Ainsi, lorsque vous présentez des informations, lancez-vous dans la vérification, en les décomposant en petits morceaux pour une expérience cognitive plus fluide. Le cinquième est le principe de Gzel. Il révèle comment notre esprit organise naturellement l'information. Il utilise la proximité, la similarité, la continuité, la fermeture et la connectivité pour Le cinquième concerne les couleurs, les couleurs parlent plus fort que les mots. Soyez attentif aux choix de couleurs, ils influencent les émotions et la perception. Le vert est peut-être parfait pour les produits écologiques, mais pas tant pour les aliments. Goûtez et choisissez largement les couleurs pour transmettre le bon message. Le principe du sexe est celui des modèles métalliques, les modèles métalliques sont comme des systèmes de croyance des utilisateurs. A Lign with them, créez des produits faciles à utiliser. Son application imite l'action de la vie réelle. Conception matérielle inspirée du monde physique, elle la façon dont nous interagissons naturellement Il s'agit de faire en sorte que l'utilisateur se sente comme chez lui. Le principe des sept est l'effet « one resto ». Voulons-nous que l'utilisateur se souvienne de quelque chose, qu'il le fasse ressortir ? Le seul effet nous indique que la distinction améliore la mémoire. Comme pour concevoir une plateforme de réservation de vols, distinguez visuellement une information cruciale pour qu'elle soit mieux mémorisée Son principe est la loi la plus apte. La loi Fits simplifie les interactions. Les grands éléments plus proches de l'utilisateur sont plus faciles à repérer et à interagir avec eux. Tenez compte de cet écran de connexion. Les grands éléments sont non seulement visibles, mais également facilement localisables pour permettre à l'utilisateur d'interagir Le neuvième est le pic rural. Ce que nous pensons de l'expérience dépend de son évolution maximale et finale. Découvrez les meilleurs moments de l'interaction avec les utilisateurs, tels que la découverte d'un produit ou le paiement. Être exceptionnel. N'oubliez pas que plusieurs sommets créent un voyage mémorable. Enfin et surtout, l'effet esthétique d'utilisabilité. L'utilisateur forge un problème d'utilisabilité mineur s'il aime le design visuel. Cependant, la beauté ne doit jamais faire oublier la fonctionnalité. tests précoces avec des cadres op pour garantir un mélange parfait d' esthétique et de facilité d'utilisation. Et voilà les dix principes psychologiques qui transformeront U UX design zar. Observez, apprenez et mettez en œuvre ce principe dans votre conception, restez curieux et continuez à expérimenter et, surtout, profitez du voyage qui consiste à créer une expérience utilisateur agréable, et je vous fournirai toutes les ressources relatives tous les Donc, si vous voulez les apprendre en profondeur, parcourez-les jusqu'à l' heure du déjeuner. Bonne conception 107. Tirer parti de la psychologie pour des expériences utilisateur personnalisées : une étude de cas: Co-concepteurs : dans ce cadre, nous allons apprendre une étude de cas. C'est pour la personnalisation, comme le fonctionnement de la personnalisation dans la conception de l'interface utilisateur X. Imaginez donc que vous passiez 87 heures par an à rechercher du contenu sur une à rechercher du contenu sur plateforme de streaming. Ça a l'air épuisant. C'est vrai. Eh bien, c'est la réalité de l'utilisateur moyen. En fait, plus de 76 % des utilisateurs sont fatigués par le contenu Mais n'ayez crainte, nous avons découvert une solution ancrée dans la psychologie. Pour bien comprendre nos utilisateurs, nous suivons un processus de conception de robots. Faites preuve d'empathie, définissez l'idée et le design par le biais entretiens et de recherches. Avec la lutte, un visage nous mène à une idée relationnelle OK, ce problème, ça est toujours arrivé tous les jours, disons que je veux regarder quelque chose sur ODD ou sur Netflix. Donc, dans ce cas, c'est trop accablant et ils sont trop contents. Je me demandais parfois ce que je devais regarder. Et maintenant, Netflix et YouTube ont un bouton appelé play something random. Il est également en tube. C'est arrivé récemment, je suppose, comme il y a quelques jours, j'ai vu qu' un bouton s'appelait. Bouton carré C'était un bouton carré, jouez quelque chose au hasard. C'était comme ça. Et sur Netflix, il existe une section dédiée. Si vous cliquez dessus, il joue quelque chose de manière aléatoire. Surprends-moi. Alors, lorsque j'ai fait des recherches à ce sujet, j'ai appris à connaître le flux d'utilisateurs. Disons qu' après 1/52 de défilement, les utilisateurs sont invités à choisir leur humeur actuelle, qu'ils soient heureux, enthousiastes, déprimés ou utilisateurs sont invités à choisir leur humeur actuelle, qu'ils soient heureux, enthousiastes, tendus. Cela provoque un contenu compressé à la première action. Alors que le bonheur permet de diversifier les genres, se sentir déprimé, nous prescrivons des films légers, relaxants et bons pour le bien-être. Et lorsque nous sommes tendus, nous ajoutons quelque chose à venir. Tout d'abord, donnez le ton émotionnel. Maintenant vient la magie. En fonction de leur humeur, les utilisateurs se voient proposer des genres adaptés à leur état émotionnel Qu'il s'agisse de romance ou de comédie, les options sont personnelles pour correspondre à leurs sentiments Et l'utilisateur de la grande finale peut choisir entre du contenu international ou original Et des recommandations de films personnalisées apparaissent, créant une expérience utilisateur fluide et émouvante Avec un design méticuleux, nous avons conçu une interface qui lit le mode de l'utilisateur, tel que genres, et offre le choix entre du contenu international et régional, le résultat Un outil de recommandation de films personz avec une option complète pour encore plus de fun. Mais là où il y en a plus. Donc, quand je lisais un article, je vais le lire, comme dans le futur, nous envisageons d' utiliser le mouvement répété par un piège à souris pour mieux déterminer l'utilisateur Faire passer la personne à un tout autre niveau. Donc, si vous faites glisser votre souris comme si vous étiez excité, cela vous montrera le contenu de l'excitation, l'action et tout ça Si tu essaies lentement, ça te montrera comme dans les films. Pour cette raison, chaque guide de mouvement des utilisateurs trace un voyage cinématographique Maintenant, c'était la première partie concernant la personnation. Voyons maintenant en quoi la sclérose en plaques ressemble Google et à Facebook. La personnation. De grands acteurs tels que Google et Facebook ont donc maîtrisé l'art de collecter des données sur les utilisateurs, de combiner action et essence créer un univers numérique personnel Mais quel en est l'impact émotionnel sur l'utilisateur ? maître du design comme Don Norman a souligné l'importance du design émotionnel, de l'esthétique visuelle, de l'utilisabilité du castor ou du prestige reflété. Un bon design doit apporter joie et plaisir à l'utilisateur, mais comment cela se traduit-il dans le domaine numérique ? C'est là que la personnalisation entre en jeu dans le numérique, où les données des utilisateurs remplissent des fonctions intelligentes telles que l'AIML Lewis, vous devez avoir vu un e-mail classé dans la boîte de réception de Google. La station de Facebook vers les nouveaux contenus. Il s'agit de présenter des données personnalisées, en ajoutant facilement des émotions négatives. Par exemple, il s'est passé une chose comme moi, quand je regardais film sur YouTube ou une vidéo aléatoire, et je me disais que je regarderais quelque chose par la suite. Donc, exactement la même vidéo a été réactivée dans mon domaine. C'était donc choquant pour moi. Ils sont forts et ils te connaissent vraiment. Ils connaissent chaque mouvement, ce que vous faites et tout ça. Et sur cette base, ils vous recommandent des choses, ainsi que des publicités. L'avenir de la personnalisation s' étend également à l'Internet des objets, comme les appareils intelligents tels que Google Ns, Amazon, Alexa, les préférences des utilisateurs, non seulement visuellement, mais aussi grâce à la voix et au design physique Le design et l'émotion transcendent désormais l'écran. Le principe du design émotionnel de Donomo nous guide. Le plaisir et le plaisir devraient accompagner l'utilisation de la technologie lorsque nous créons de nouveaux produits et services numériques. L'impact émotionnel devient primordial pour réussir. Et nous devons également explorer certains déclencheurs, comme nous devons également trouver des déclencheurs positifs et négatifs. Qu'il s'agisse d'une réservation d' une place de cinéma ou d'un vol, utilisez cette urgence et cette rareté pour passer à l'action, Sportifi ravira les utilisateurs avec un mix personnalisé Il s'agit d'un équilibre délicat entre la création d' expérience positive et l'action négative des utilisateurs. La vraie magie opère dans le domaine de la personnalisation et de la couverture émotionnelle du design Il ne s'agit pas uniquement de communication visuelle. Il s'agit d'avoir un impact émotionnel sur les utilisateurs. Réaliser cette magie nécessite une compréhension approfondie de la motivation et du désir des utilisateurs. À mesure que nous nous tournons vers l'avenir, personnification et l'émotion dans le design deviennent de plus en plus apparentes Les designers deviendront des concepteurs engagement émotionnel, créant des expériences qui trouvent un écho auprès d' un groupe d'utilisateurs spécifique En cette ère d' évolution numérique, n'oubliez pas qu' un bon design est mémorable, mais qu'un bon design est à la fois mémorable et significatif. Tout tourne donc autour de l'étude de cas, ainsi que du fonctionnement de la psychologie de la personnation dans YuxFeld ainsi que dans le domaine du graphisme Je vais donc ajouter toutes les ressources ainsi que dans le pédophile, ainsi que dans le champ It's a tap Parcourez-le, si vous voulez apprendre ces choses en profondeur. Et merci d'avoir entrepris ce voyage avec nous. Si vous avez trouvé cette information précieuse, hésitez pas à me le faire savoir et jusqu'à la prochaine, continuez à concevoir avec cœur et à affronter l' opposition magique de l'expérience 108. Psychologie des couleurs dans la conception UI/UX: Bon retour aux étudiants. Aujourd'hui, nous associons le monde de la psychologie au design VX Toute cette section est donc dédiée à la psychologie de l'interface utilisateur et du X. EVA est donc synonyme d'expérience utilisateur. Nous savons tous qu'elle joue un rôle central dans notre interaction avec la technologie. Maintenant, pourquoi la psychologie est-elle importante dans la conception de l' expérience utilisateur ? Eh bien, les Schumann sont des êtres merveilleusement complexes, chacun ayant ses propres préférences et attention Alors, comment les entreprises technologiques peuvent-elles rendre leur application si attrayante pour un public aussi diversifié ? peuvent-elles rendre leur application si attrayante pour un public aussi diversifié C'est en tapant une seule chose que nous partageons tous avec nos sens. Nous avons cinq sens extraordinaires : le toucher, l'ouïe, la vue, l'odorat et le goût Cependant, en ce qui concerne l'abaissement, nous nous concentrons principalement sur le toucher, le hareng et Malheureusement, nous ne pouvons pas percevoir l'odeur et le goût. Concentrez-vous. Il y a deux ans, j'ai vu une vidéo, comme si vous divulguiez un écran et que s'il y avait un pied sur l'écran, vous goûterez à la nourriture. Ça ou quelque chose comme ça. Je sais que cela arrivera dans le futur, et nous aurons également cette fonctionnalité dans notre téléphone. Je sais que c'est flippant Examinons maintenant l'impact de la représentation visuelle sur la prise de décision OK. Considérez ceci quelle assiette semble la plus chère, celle de droite ou de gauche. Il s'avère que ce n'est pas une question de quantité de nourriture. Il s'agit de la façon dont il s'est présenté. Cela a souligné l'importance d'une belle interface, mais comment en concevoir une ? Cela se résume aux deux facteurs clés. La quantité d'informations et leur mode de présentation. Prenons l'exemple d'un menu trop d'informations peuvent entraîner une surcharge cognitive laisser des traces dans notre cerveau. Comme s'il y avait un restaurant Bani dans ma région. Leurs munis sont donc très simples, il n'y a que quatre options, c'est vraiment simple à commander, et il y a un autre joint. Ils nous donnent une carte domini, qui offre des centaines d'options Alors aujourd'hui, je vais dans ce nouveau restaurant, qui ne propose que quatre ou cinq options, et c'est vraiment facile à commander. Parlons maintenant des couleurs. Les couleurs jouent également un rôle important, car une couleur vive et dépareillée peut être éprouvante pour l'esprit Cela nous amène au traitement et à une fluidité de perception. C'est avec cela que nous traitons les informations. Jetons maintenant un coup d'œil aux informations présentées sur le site Web. Ces deux géants de la technologie offrent des fonctionnalités similaires. Mais ils optent pour des approches différentes. Ce n'est pas une question de bien ou de mal. Il s'agit de l'expérience utilisateur. Maintenant, refaisons l'expérience. Fermez les yeux un instant et pensez aux émotions associées à cette couleur. rouge, vert, bleu, violet. La couleur influence nos sentiments et nos actions. C'est pourquoi les notifications des applications utilisent souvent la couleur rouge pour attirer notre attention. En ce qui concerne le son, il s'agit d'un outil puissant permettant aux applications de capter notre attention et de promouvoir le comportement individuel. Faisons une deuxième expérience. Fermez les yeux. Je vais jouer quelques sons et vous devez identifier l' application audio ou le site Web. J'espère que vous avez identifié les sons. Ils ont été conçus avec une fréquence élevée pour nous alerter en entendant une tonalité spécifique, nous ne pouvons pas identifier l'application. Parlons maintenant de la réactivité et renforcement positif dans la conception des applications Les commentaires positifs tels que les vibrations lors de la publication d'un message encouragent l'interaction. autre côté, le renforcement positif d' Internet, comme le rafraîchissement d'un domaine sur les réseaux sociaux, nous permet de rester engagés Semblable à l'excitation d'une machine à sous. La personnalisation est cruciale pour la conception d'applications. Créez un modèle selon vos préférences en fonction de l'interaction, créer une bande-annonce plus agréable et une expérience plus agréable. Mais n'oubliez pas qu'il existe une adaptation hédonique. Nous nous habituons aux stimuli positifs et négatifs ce qui pousse les entreprises à fournir des mises à jour fréquentes pour maintenir notre engagement. Le design pursif est un facteur de motivation clé pour que l'utilisateur se comporte comme le souhaite le développeur Instagram, par exemple, promeut la notification pour chaque interaction. Encourager un engagement accru. En fin de compte, tous ces éléments de conception visent à cibler le système dopoin de notre cerveau nous rendre heureux et, par conséquent, utiliser davantage l'application dans un monde où les téléphones sont passés d'un simple appareil de communication à gadget multifonctionnel complexe, les entreprises ont besoin de notre attention Cela nous amène donc au code erroné de la pensée. Deux industries considèrent leurs clients comme des utilisateurs : les premières tonnes de drogues illégales et les logiciels secondaires. C'est une question qui mérite d'être posée. J'espère que vous êtes enthousiasmé par toutes les façons dont nos sens et nos émotions sont le site web appsit que nous utilisons tous les jours, mais ce n'est que la pointe de l'iceberg Tout un océan de psychologie fascinante est à l' œuvre dans le monde numérique, et nous ne faisons que nous y psychologie fascinante est à l' œuvre dans le monde numérique, plonger les pieds Alors préparez-vous à approfondir vos connaissances, car nous allons créer des tonnes de vidéos sur ces sujets incroyables. Au cours de la prochaine session, nous allons mettre en pratique nos codes de laboratoire et nous intéresser à la théorie des couleurs, à la science du son, à l'adtation hédotique, design réactif Nous aborderons donc tous les sujets dans une vidéo dédiée, et ce n'est que le début. Nous aborderons encore plus de sujets époustouflants dans un magasin, tels que le design persistant, l'adaptation sociale et l' avenir de l'interaction humaine Jusqu'à la prochaine fois, n'oubliez pas que les applications peuvent être conçues, mais que c'est vous qui en avez le contrôle. Utilisez vos compétences et vos connaissances pour naviguer dans le monde numérique en toute connaissance cause et choisissez l'expérience qui annonce vraiment votre vie. Restez curieux, portez votre uniforme et, surtout, restez humain 109. Le paradoxe du bonheur : comprendre l'adaptation hédonique dans la conception UI/UX: D'autres designers. Aujourd'hui, je souhaite en percer le secret en créant une expérience utilisateur exceptionnelle Aujourd'hui, nous nous intéressons au monde fascinant de la psychologie et à la façon dont il peut faire de vous un ancien maestro du design Je suis donc récemment tombée sur un podcast époustouflant, le laboratoire du bonheur avec le docteur Lures Santos J'ajouterai les ressources de liaison. Si vous voulez le vérifier, jetez-y un coup d'œil. C'est génial. Et je devine quoi ? Je me suis surpris à réfléchir à des idées profondes qui s'appliquaient directement à la conception de l'expérience Alors, Bakala, avez-vous déjà entendu parler de l'adaptation hédonique ? Je ne sais pas si je le prononce correctement ou non, mais c' est comme une adaptation hédonique. Je pense que c'est juste. C'est donc l'incroyable impulsion humaine qui nous permet de revenir rapidement à un niveau de bonheur stable. Peu importe, la vie change. Imaginez que vous gagnez 50 000 dollars et que vous pensez gagné 100 000. Nous allons faire de vous une personne statique. Alerte spoiler Ce ne sera pas le cas. Le principe influe directement sur la façon dont nous abordons l'expérience positive. Parlons maintenant des jeux incrémentaux, également appelés jeux à clics. Je n'ai pas joué à ce jeu, mais si vous y avez joué, merci de me le faire savoir. C'était dans l'étude de cas, donc je vous le dis simplement. En faisant des recherches, j'ai appris qu'il fallait effectuer une tâche simple. comme cliquer sur l'écran pour obtenir des récompenses, c'est comme une boucle du bonheur. Vous continuez à vous améliorer et à gagner plus. Et devinez quoi ? Il reflète les tendances humaines, discute de l' adaptation hanique Ces jeux font donc appel à la psychologie positive. Ce désir de plus de ressources s'aligne sur notre attention à la recherche d'un bonheur accru. Il s'agit d'un coup de maître en matière de conception de jeu qui permet joueurs de rester engagés dans un esprit de feedback positif. C'est un génie, non ? Mais là où il y en a plus. Ce jeu offre également des récompenses hors ligne. Comme à votre retour, vous avez créé avec Happiness Boo. C'est comme investir dans votre joie future. La psychologie y est proposée et permet de continuer à jouer au cerceau. Maintenant, passons à la vitesse supérieure. Souvenez-vous de cet iPhone flambant neuf. Je n'ai pas d'iPhone. OK. Disons donc si j'achète un iPhone au bout d'un mois. Au début, je serai très heureuse, et je serai très heureuse de voir cette couverture brillante et cet affichage coloré. Mais au fil du temps, je vais l'adapter, et ses impacts seront des leçons. Alors, comment aborder ce problème dans le design ? Je veux donc partager quelques stratégies qui sont des stratégies comme le design UO X, le graphisme manuel, payer ça. Nous combinons l'adaptation hédonique. Tout d'abord, soutenir la relation interpersonnelle. Produit favorisant une expérience partagée comme Muto IJ d'Albert in Je suis presque sûr que je l'ai mal orthographié. OK, donc je vais vous le montrer à l'écran. C'est difficile. L'anglais est difficile. Ce n'est pas de l'anglais. Je ne sais pas de quelle langue il s'agit, mais c'est difficile à prononcer. Cela crée donc un impact positif durable. Ensuite, la deuxième est l'expérience S, optimisez l'expérience actuelle avec un minimum de plaisir. En soutenant les objectifs personnels comme nous le voyons dans une application plus running, nous maintenons l'engagement des utilisateurs dans un flux d'événements positifs. Vous voulez vous adapter, proposer une expérience nouvelle et surprenante, qu'il s'agisse d'une prise en charge par Uber à bord d'une voiture de sport ou d'une entreprise de télécommunications ou d'envoi de cadeaux inattendus. Les surprises permettent de rafraîchir l'expérience. Enfin, soutenez la gratitude, produits et services tels que Facebook, célébrant l'amitié numérique, comme en 2018, une vidéo était utilisée pour chaque symbole. Par exemple, si vous discutez avec une personne dans cette vidéo, il y avait des photos de vous ou les deux, et elles font une vidéo vraiment géniale. C'est ainsi qu'ils personnalisent et vous permettent de rester accro à leur plateforme Cela aide les utilisateurs à apprécier ce qu'ils ont vécu et à montrer un impact émotionnel durable Donc, comme vous pouvez le voir, je m'en souviens encore . C'est donc génial. Et voilà, vous l'avez conçue pour le bonheur, en utilisant les principes de la psychologie. N'est-ce pas incroyable ? Comment la compréhension du comportement humain peut-elle façonner une expérience inoubliable ? Si vous aimez ce voyage, merci de me le faire savoir. Je suis resté ici pour plus de vx, de révélations sur le design. 110. L'effet de dopamine dans la conception UI/UX: Dans un monde dominé par la technologie, notre société a soif de Quick Topaminhds 32e vidéo, un article de 60 articles dans le monde entier et des articles d'une minute sont devenus la nouvelle norme Mais avez-vous déjà pensé conséquences de cette évolution de la consommation de contenu ? Les gens recherchent un contenu plus court, plus conscient et plus simple pour un plaisir rapide et une solution facile. Mais ce contenu postule de bonheur et de simplicité nous conduit-il sur un chemin que nous pourrions regretter ? Il évolue, juste à reculons. Nous avons tous une solution facile, avec des touches de bonheur, mais qu'en est-il de la liberté. Sommes-nous en train de devenir sans le savoir des ennemis de notre propre bien-être en étant piégés dans le cycle, alimentés par les entreprises et les récompenses numériques constantes La dopamine, le plaisir, y compris neurotransmetteur qui a toujours fait partie du système de récompense de notre cerveau Qu'il s'agisse des loisirs liés au lit ou même du shopping, nous sommes confrontés à une poussée de dopamine. Mais qu'est-ce que la connexion numérique ? Lorsque vous faites défiler un appareil de contenu tel que Real ou TikTok ou que vous publiez un instrument, vous ressentez une petite ruée vers Tpamin ? Un simple coup de doigt vous récompense avec un nouveau contenu en une seconde . C'est un cycle de récompenses constant sans que nous nous en rendions compte. Comparons cela à un plaisir plus traditionnel comme l'achat d'un biscuit fraîchement sorti du four. L'anticipation, l' achat, le goût chaque étape déclenchent Dopinpike, mais il y a Je n'ai pas remarqué à quelle vitesse vous recevez votre dopinpike grâce à des produits numériques, mangiez un cookie. C'est une course. Il se peut que votre cerveau ne réalise même pas qui est aux commandes. Une fois que votre cerveau est mis à rude épreuve par une consommation rapide et maîtrisée, vous avez soif de réputation Cela devient addictif. Vous ne voulez plus aller à pied à la boulangerie, vous préférez ouvrir, et je dois commander des biscuits, mais à quel prix. pics de dopomies à court terme, en particulier chez les adolescents, sont en hausse Une partie importante des utilisateurs de plateformes telles que TikTok, stogam et YouTube sont de jeunes adultes qui éprouvent un plaisir constant, mais qui évitent les défis qui semblent Les adolescents s'isolent, souffrent de troubles du sommeil et prennent des habitudes qui entravent leur croissance. La facilité est devenue la norme et cela affecte leur vie. Alors, comment pouvons-nous, en tant que designer, être en première ligne pour changer cette histoire ? Comment pouvons-nous faire en sorte que notre design favorise les relations à long terme plutôt que la dépendance. Notre responsabilité est claire. Aider les entreprises à établir une relation à long terme avec les utilisateurs. Nous devons éviter d'être à l'origine de la dépendance et trouver le juste équilibre en cas de pic de dopamine. Il est temps d'être des designers éthiques et compte l'impact de notre création. Il existe donc des moyens pratiques pour les concepteurs de créer des relations plutôt que de créer une dépendance. Créer un point d'arrêt permettant aux utilisateurs de se faufiler entre les dopampikes lorsque je jouais au pop gin en 2016, en 2018 Après trois matches, il y a eu un chronomètre. Tu ne peux pas jouer pendant une demi-heure. Comme I Tub aussi, il y a un bouton. Rappelez-moi de faire une pause , car il existe plusieurs applications. Maintenant, ils incluent la fonctionnalité. Ensuite, concentrez-vous sur la rétention à long terme, et pas seulement sur les missions sur le terrain Le troisième est d'éviter les choix de conception qui induisent la peur. Les utilisateurs ne sont pas des esclaves. Définissez l'ensemble de l'expérience utilisateur pour comprendre l' impact de Dopampie cinquième consiste à donner la priorité au bien de tous à long terme, en fixant des objectifs commerciaux à court terme Designers, nous avons le pouvoir de façonner la perspective de notre humanité, en particulier à l'ère numérique Créons des expériences qui favorisent la croissance, l'apprentissage et le bien-être. Et il y a un fait choquant : les anciens C et les excuses technologiques limitent leur exposition numérique, comprenant les dangers potentiels. Il est temps d'être un designer qui assure notre avenir en apportant des améliorations adaptées au goût du moment Vous êtes le designer qui peut faire la différence. Tu comprends comment ça marche. Vous pouvez être celui qui veillera à ce que notre transition vers l'avenir numérique soit positive. Alors que nous évoluons dans le paysage numérique, souvenons-nous de l'impact de notre design sur les vies, en particulier celles de la jeune génération. Donnons la priorité à la création d'une expérience positive et durable qui contribue à un avenir meilleur. Merci de m'avoir rejoint dans ce voyage dans le monde du design Cpmin et dans le futur. Jusqu'à la prochaine fois, restez attentifs, restez éthiques et continuez à concevoir pour un avenir meilleur. 111. La puissance du son : comment l'audio façonne la psychologie de l'expérience utilisateur (UX): Que ce soit aujourd'hui, nous plongeons profondément dans le monde souvent ancien du son dans le design. Oui, vous avez bien entendu les sons. Il ne s'agit pas seulement de ce que vous voyez, mais aussi de ce que vous entendez. Intéressons-nous donc à la symphonie du design UX et explorons l'incroyable impact du son sur notre expérience numérique Image d'un monde sans son pretty do right Eh bien, le son est un compagnon depuis 1 000 ans, ajoutant la communication à la narration d'histoires. Aujourd'hui, nous exploitons le potentiel du son dans le design. Lancez-vous pour un voyage dans la dimension auditive grâce à VX Ou design graphique. Avez-vous déjà remarqué le subtil retour héptique lorsque vous interagissez avec votre iPhone ou simplement avec un téléphone Pro Ou un son de rencontre qui vous présente le Netflix. Le son n'est pas qu'un acolyte. C'est un super héros dans World VX. Il annonce non seulement votre expérience, mais définit également l'identité de marque. Voyons maintenant comment le son est devenu le héros malsain de l'aventure numérique Fermez les yeux un instant et vous reconnaîtrez probablement votre marque préférée grâce à son son unique. De la version réconfortante de Microsoft Windows à Reving of Mercedes Carta Ce son raconte une histoire et crée un lien. Il est temps d'explorer comment les sons deviennent les soaps secrets de l'identité d'une marque Le son est bien plus qu'une simple toile de fond. Il participe activement au parcours de l'utilisateur, qu'il s'agisse de le guider dans l'interface ou de lui fournir des informations sur une action complète. Le son n'est qu'un assistant silencieux qui rend X ou design mémorables. Dévoilons comment le son engage l'utilisateur dans un monde virtuel. Le design s'adresse à tout le monde et son rôle est crucial pour Roni, pour rendre l'expérience numérique accessible Qu'il s'agisse d' une description audio ou de Netflix pour les troubles visuels ou d'un clic subtil sur un bouton. Le son est relié à des symboles et à des Vx exclusifs. Explorons le monde exclusif de la conception sonore. Prêt à faire passer le design de votre Vx au niveau supérieur. Entrez dans le design sonore UX. Ça change la donne. Il ne s'agit pas seulement de fonctionnalité, il s'agit de créer un lien émotionnel avec l'utilisateur. Découvrez l'aventure d'une conception sonore réfléchie, qu'il s'agisse d'accroître l'engagement ou d' améliorer la reconnaissance de la marque. Mais où trouver le son parfait pour votre symphonie de design Ne crains rien. Nous avons une liste de ressources pour le jeu VTY Sound Des effets sonores japonais gratuits aux chansons libres de droits sur Nous avons une couverture. Êtes-vous prêt à amplifier le son de votre ex ou à créer du graphisme ? Plongeons-nous dans le monde des ressources sonores ? J'ajouterai toutes les ressources sonores dans les ressources, ainsi que dans le fichier de ressources. Va voir ça. Alors que nous terminons notre voyage sonore à travers le design EVx, n' oubliez pas qu'un design exceptionnel ne se limite pas à ce que vous voyez Il s'agit de ce que vous entendez. Laissons-nous donc vous guider dans la création d'une expérience utilisateur mémorable, engageante et exclusive Jusqu'à la prochaine fois, continuez à écouter, à concevoir et à laisser le paysage sonore de l' expérience utilisateur vous guider 112. Figma Final outro skillshare: Waouh, félicitations. Il est la ligne d'arrivée. Ce voyage a été une aventure plus calme, n'est-ce pas ? Le parcours a été long. Mais nous y voilà. Et laissez-moi vous dire que la création ce cours n'était pas une mince affaire non plus. Mais nous y sommes parvenus ensemble. Je voudrais prendre un moment pour exprimer ma gratitude. Un immense merci à tous mes anciens étudiants et à tous les clients du coaching. Vous avez joué un rôle précieux sur le terrain et votre perspicacité a joué un rôle crucial dans l'élaboration de ce cours exceptionnel. Je n'aurais pas pu le faire sans toi. Maintenant, créons l'amour. Si vous avez trouvé ce cours utile, soyons honnêtes. Pourquoi ne le partageriez-vous pas avec vos collègues, amis et toute autre personne de votre entourage qui pourrait en bénéficier Votre soutien m'a aidée à grandir et à continuer à faire ce que j'aime, à savoir créer du contenu précieux pour des personnes formidables comme vous. Oh, et n'oubliez pas de communiquer avec moi sur les réseaux sociaux. Vous avez probablement déjà tous les liens dans vos fichiers de classe. Mais au cas où vous l'auriez manquée, ils sont là. Restons connectés et poursuivons le parcours d'apprentissage. Et, hé, avez-vous consulté ma chaîne DIP ? C'est un véritable trésor de contenu supplémentaire agisse de conseils rapides ou de pistes approfondies. Abonnez-vous maintenant et ne manquez jamais dernières mises à jour et informations Parlons maintenant du paysage industriel qui ne cesse de crier Le monde du design est en constante évolution, et c'est ce qui le rend si passionnant. Embrassez le voyage, même si vous éprouvez parfois un peu de doute N'oubliez pas que le syndrome de l'imposteur est courant, mais que vous êtes plus que qualifié pour vous qualifier de designer UX Aucune qualification officielle n'est requise. Et devinez quoi ? Votre parcours d'apprentissage ne doit pas nécessairement s'arrêter là. Si vous souhaitez approfondir vos connaissances dans le graphisme, les réseaux sociaux, l'IA ou les vdating, je suis là pour vous. Consultez mes autres cours sur Canva, Catbi ou Audible Les liens se trouvent dans la section des ressources, alors assurez-vous de les explorer. Et si vous avez des questions, ou si vous voulez simplement discuter, contactez-moi sur les réseaux sociaux. Tu as déjà toutes mes compétences, alors ne sois pas timide. Je suis là pour vous soutenir à chaque étape. Eh bien, les gars, c'est du rap. J'espère que vous apprécierez ce cours autant que j'ai aimé le créer. Cela a été un plaisir de partager ces connaissances avec vous, et j'ai hâte de vous voir bientôt suivre un autre cours. ici là, continuez à concevoir, continuez à créer et, surtout, continuez à être génial. Alors au revoir pour le moment.